| | |
| | | <template> |
| | | <view class="weidian" v-if="store_open"> |
| | | <view v-if="shop_data.supplier.money>0&&shop_data.supplier.status!=20"> |
| | | <view v-if="shop_data.supplier.money>0||shop_data.supplier.status!=20"> |
| | | <view class="weidian_head"> |
| | | <!-- #ifdef MP-WEIXIN || APP-PLUS --> |
| | | <view class="ww100" :style="'height:'+topBarTop()+'px;'"></view> |
| | |
| | | <view class="fb">缴纳保证金</view> |
| | | </view> |
| | | <!-- #endif --> |
| | | <view class="deposit_bg"> |
| | | <view class="deposit_bg"> |
| | | <view class="deposit_tit">类目:<text class="gray9">{{category.name}}</text></view> |
| | | <view class="deposit_tit borderb">保证金:<text class="gray9">¥{{category.deposit_money}}</text></view> |
| | | </view> |
| | | </view> |
| | | <view class="member"> |
| | | <view class="member-package" v-for="(item, index) in memberPackages" :key="index" @click="selectPackage(index)"> |
| | | <view class="package-header" :class="{ 'selected': selectedIndex === index }"> |
| | | <text class="package-name">{{ item.name }}</text> |
| | | <text class="package-price">¥{{ item.price }}</text> |
| | | </view> |
| | | <view class="package-body"> |
| | | <view class="package-description">{{ item.particulars }}</view> |
| | | <view class="package-expiry">有效期:{{ item.duration }}天</view> |
| | | <view class="common-form">保证金</view> |
| | | <view class="member-package"> |
| | | <view class="selected package-header"> |
| | | <view> |
| | | <text class="package-name">{{category.name}}</text> |
| | | <text class="package-price">¥{{ category.deposit_money }}</text> |
| | | </view> |
| | | <view> |
| | | <radio-group activeBackgroundColor="#e43130"> |
| | | <radio checked></radio> |
| | | </radio-group> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="buy-button-container"> |
| | | <button class="buy-button" @click="buyMemberPackage">立即购买</button> |
| | | <view class="common-form">年卡</view> |
| | | <radio-group activeBackgroundColor="#e43130"> |
| | | <view class="member-package" v-for="(item, index) in memberPackages" :key="index" |
| | | @click="selectPackage(index)"> |
| | | <view class="selected package-header"> |
| | | <view> |
| | | <text class="package-name">{{ item.name }}</text> |
| | | <text class="package-price">¥{{ item.price }}</text> |
| | | </view> |
| | | <view> |
| | | <radio :checked="selectedIndex==index"></radio> |
| | | </view> |
| | | </view> |
| | | <view class="package-body"> |
| | | <view class="package-description">{{ item.particulars }}</view> |
| | | <view class="package-expiry">有效期:{{ item.duration }}天</view> |
| | | </view> |
| | | </view> |
| | | </radio-group> |
| | | |
| | | <!--底部支付--> |
| | | <view class="foot-pay-btns"> |
| | | <template > |
| | | <view> |
| | | 应付 |
| | | <text class="fb theme-price">¥</text> |
| | | <text class="num theme-price fb f38">{{ order_total_front_price }}</text> |
| | | </view> |
| | | </template> |
| | | <button type="primary" @tap="SubmitOrder">提交订单</button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | memberPackages: [], |
| | | selectedIndex: 0, |
| | | category: {}, |
| | | loading: true |
| | | loading: true, |
| | | plan_id:0, |
| | | order_total_front_price:0, |
| | | } |
| | | }, |
| | | onShow() { |
| | |
| | | }, |
| | | onLoad() { |
| | | this.GetStatusBarHeight(); |
| | | this.getMemberPlans(); |
| | | this.getData(); |
| | | }, |
| | | methods: {// 获取年卡套餐列表 |
| | | methods: { // 获取年卡套餐列表 |
| | | getMemberPlans() { |
| | | let self = this; |
| | | self._get('supplier.member/plans', {}, function(res) { |
| | | self._get('supplier.member/plansAll', {}, function(res) { |
| | | self.memberPackages = res.data.plans; |
| | | self.plan_id = self.memberPackages[0].plan_id; |
| | | console.log(self.category); |
| | | self.order_total_front_price = (Number(self.memberPackages[0].price)+Number(self.category.deposit_money)).toFixed(2); |
| | | self.loading = false; |
| | | }); |
| | | }, |
| | | /*提交订单*/ |
| | | SubmitOrder() { |
| | | let self = this; |
| | | self._post( |
| | | 'supplier.index/deposit', { |
| | | plan_id:self.plan_id |
| | | }, |
| | | function(result) { |
| | | self.gotoPage('/pages/order/cashier?order_id=' + result.data.order_id+ '&order_type=20'); |
| | | } |
| | | ); |
| | | }, |
| | | selectPackage(index) { |
| | | this.selectedIndex = index; |
| | | this.plan_id = this.memberPackages[index].plan_id; |
| | | this.order_total_front_price = (Number(this.memberPackages[index].price)+Number(this.category.deposit_money)).toFixed(2); |
| | | }, |
| | | /*获取数据*/ |
| | | getData() { |
| | | let self = this; |
| | | self._get('supplier.index/deposit', {}, function(res) { |
| | | self.category = res.data.category; |
| | | self.getMemberPlans(); |
| | | }); |
| | | }, |
| | | GetStatusBarHeight() { |
| | |
| | | self.store_open = true; |
| | | } |
| | | self.menu_list[0].url = '/pages/shop/shop?shop_supplier_id=' + self.shop_supplier_id; |
| | | uni.setStorageSync('shop_supplier_id', self.shop_supplier_id) |
| | | //#ifdef MP-WEIXIN |
| | | self.store_open = res.data.store_open; |
| | | //#endif |
| | |
| | | }) |
| | | }, |
| | | goback() { |
| | | uni.navigateBack(); |
| | | let self = this; |
| | | uni.navigateBack({ |
| | | delta:1, |
| | | fail:function(e){ |
| | | self.gotoPage('/pages/tabBar/user/index'); |
| | | } |
| | | }); |
| | | }, |
| | | // 支付保证金 |
| | | gotoPay() { |
| | |
| | | background-color: #FFFFFF; |
| | | border-top: 1rpx solid #efefef; |
| | | } |
| | | |
| | | .common-form { |
| | | position: relative; |
| | | height: 80rpx; |
| | | padding-left: 40rpx; |
| | | line-height: 80rpx; |
| | | font-size: 28rpx; |
| | | font-weight: 700; |
| | | margin-top: 24rpx; |
| | | } |
| | | |
| | | .common-form:before { |
| | | background: #3a8ee6; |
| | | } |
| | | |
| | | .common-form:before { |
| | | position: absolute; |
| | | content: ""; |
| | | width: 4px; |
| | | height: 14px; |
| | | left: 0; |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | } |
| | | |
| | | .member { |
| | | padding: 0 20rpx; |
| | | } |
| | | |
| | | .member-package { |
| | | background-color: white; |
| | | border-radius: 10rpx; |
| | |
| | | overflow: hidden; |
| | | box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | |
| | | .package-header { |
| | | padding: 30rpx; |
| | | background-color: #f8f8f8; |
| | | border-left: 10rpx solid #ccc; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | |
| | | .package-header.selected { |
| | | background-color: #eef5ff; |
| | | border-left: 10rpx solid #409EFF; |
| | | background-color: #ffeeee; |
| | | border-left: 10rpx solid #e43130; |
| | | } |
| | | |
| | | |
| | | .package-name { |
| | | font-size: 32rpx; |
| | | font-weight: bold; |
| | | color: #333; |
| | | } |
| | | |
| | | |
| | | .package-price { |
| | | float: right; |
| | | font-size: 36rpx; |
| | | font-weight: bold; |
| | | color: #e43130; |
| | | margin-left: 30rpx; |
| | | } |
| | | |
| | | |
| | | .package-body { |
| | | padding: 30rpx; |
| | | } |
| | | |
| | | |
| | | .package-description { |
| | | font-size: 28rpx; |
| | | color: #666; |
| | |
| | | white-space: pre-line; |
| | | line-height: 1.6; |
| | | } |
| | | |
| | | |
| | | .package-features { |
| | | margin-bottom: 20rpx; |
| | | } |
| | | |
| | | |
| | | .feature { |
| | | font-size: 26rpx; |
| | | color: #555; |
| | | margin-bottom: 10rpx; |
| | | } |
| | | |
| | | |
| | | .feature .icon-duigou { |
| | | color: #4caf50; |
| | | margin-right: 10rpx; |
| | | } |
| | | |
| | | |
| | | .package-expiry { |
| | | font-size: 24rpx; |
| | | color: #999; |
| | | text-align: right; |
| | | } |
| | | |
| | | |
| | | .buy-button-container { |
| | | padding: 40rpx 0; |
| | | text-align: center; |
| | | } |
| | | |
| | | |
| | | .buy-button { |
| | | width: 80%; |
| | | background-color: #e43130; |