mobile/pages/user/my_shop/my_shop.vue
@@ -1,6 +1,6 @@
<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>
@@ -120,25 +120,51 @@
            <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>
@@ -208,7 +234,9 @@
            memberPackages: [],
            selectedIndex: 0,
            category: {},
            loading: true
            loading: true,
            plan_id:0,
            order_total_front_price:0,
         }
      },
      onShow() {
@@ -217,22 +245,42 @@
      },
      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() {
@@ -269,6 +317,7 @@
                  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
@@ -287,7 +336,13 @@
            })
         },
         goback() {
            uni.navigateBack();
            let self = this;
            uni.navigateBack({
               delta:1,
               fail:function(e){
                  self.gotoPage('/pages/tabBar/user/index');
               }
            });
         },
         // 支付保证金
         gotoPay() {
@@ -569,6 +624,35 @@
      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;
@@ -576,35 +660,38 @@
      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;
@@ -612,33 +699,33 @@
      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;