tijiao

pages/mine/vip/index.vue

@@ -1,7 +1,6 @@
 <template>
-    
   <view class="commonPageBox">
-    <z-nav-bar title="VIP"></z-nav-bar>
+    <z-nav-bar title="VIP"  bgColor="#3AB3AE" fontColor="#fff"></z-nav-bar>
     <view class="vip_block">
       <view
         class="vip_item"
@@ -22,7 +21,9 @@
         <view>
           <text class="vip_item_title">{{ item.title }}</text>
           <text class="vip_item_tip" v-if="item.tip && item.tip < 100"
-            ><uni-icons type="info" size="17" color="#ff1f00"></uni-icons>还有{{item.tip}}天到期</text
+            ><uni-icons type="info" size="17" color="#ff1f00"></uni-icons>还有{{
+              item.tip
+            }}天到期</text
           >
           <text class="vip_item_flag" v-if="item.state == 1">
             <uni-icons type="info" size="17" color="#999"></uni-icons>已过期
@@ -31,19 +32,22 @@
 
         <view class="vip_price" style="padding-top: 10rpx">
           <text class="font_bold">课程价格：</text>
-          <view class="vip_qx_v">一年<text class="vip_fee line">{{ item.originalPrice || 0 }}</text>元</view>
+          <view class="vip_qx_v"
+            >一年<text class="vip_fee line">{{ item.originalPrice || 0 }}</text
+            >元</view
+          >
+        </view>
+        <view v-if="$platform != 'ios'">
+          <text
+            class="vip_item_btn"
+            v-if="item.state == null"
+            @click="openorderModal(item)"
+            >去办理</text
+          >
+          <text class="vip_item_btn" v-else @click="openorderModal(item)"
+            >去续费</text
+          >
         </view>
-		<view v-if="$platform!='ios'">
-			<text
-			  class="vip_item_btn"
-			  v-if="item.state == null"
-			  @click="openorderModal(item, 0)"
-			  >去办理</text
-			>
-			<text class="vip_item_btn" v-else @click="openorderModal(item, 0)"
-			  >去续费</text
-			>
-		</view>
 
         <view class="vip_price" v-if="item.vcbList && item.vcbList.length > 0">
           <text class="font_bold" v-if="item.type == 1 || item.type == 2"
@@ -54,7 +58,7 @@
             class="vip_price_v"
             v-for="(item_price, index_price) in item.vcbList"
             :key="index_price"
-            @click="openorderModal(item_price)"
+            @click="openorderModal(item, index_price)"
           >
             {{ item_price.year }}年<text>{{ item_price.rebateFee }}</text
             >元
@@ -69,14 +73,20 @@
             class="vip_price_v"
             v-for="(item_yq, index_yq) in item.yanqiList"
             :key="index_yq"
-            @click="openorderModal(item_yq, 1)"
+            @click="openorderModal({ state: item.state, ...item }, index_yq)"
           >
             {{ item_yq.year }}年<text>{{ item_yq.rebateFee }}</text
             >元
           </text>
         </view>
         <view class="vip_qx">
-          <text class="font_bold" style="display: block">VIP权限：</text>
+          <text
+            class="font_bold"
+            style="display: block"
+            v-if="item.type == 1 || item.type == 2"
+            >超级VIP权限：</text
+          >
+          <text class="font_bold" style="display: block" v-else>VIP权限：</text>
           <view class="vip_qx_v" v-if="item.type == 1"
             >无限制观看吴门医述APP中医学、中西汇通学、针灸学、肿瘤学四个板块任意课程；</view
           >
@@ -101,33 +111,39 @@
               class="vip_fee"
               v-if="item.type == 1 || item.type == 2"
               >8折</text
-            ><text class="vip_fee" v-else>9折</text>优惠
+            ><text class="vip_fee" v-else>9折</text>优惠；
           </view>
           <view class="vip_qx_v"
             >疯子读书APP购书享受<text
               class="vip_fee"
               v-if="item.type == 1 || item.type == 2"
               >8折</text
-            ><text class="vip_fee" v-else>9折</text>优惠</view
+            ><text class="vip_fee" v-else>9折</text>优惠。</view
           >
         </view>
       </view>
     </view>
 
+    <common-select-vip
+      type="vip"
+      :isCondition="true"
+      ref="commonSelectGoods"
+      :selectGoodsData="selectGoodsData"
+      :goodsList="goodsList"
+      :buyOptions="buyOptions"
+      :customButtonGroup1="customButtonGroup1"
+      @selectGoods="handleClickSelectGoods"
+      @onHandleClickBuy="goBuy()"
+    >
+    </common-select-vip>
     <u-popup :show="orderModalShow" mode="bottom" :round="20">
       <view class="orderModalShow popup_box">
-        <u-icon
-          name="close"
-          color="#333"
-          size="18"
-          @click="closeOrderModalShow"
-          style="
-            display: inline-block;
-            position: absolute;
-            right: 20rpx;
-            top: 20rpx;
-          "
-        ></u-icon>
+        <!-- <u-icon name="close" color="#333" size="18" @click="closeOrderModalShow" style="
+			  display: inline-block;
+			  position: absolute;
+			  right: 20rpx;
+			  top: 20rpx;
+			"></u-icon> -->
         <orderPay ref="orderPay" :dataInfo="selectVipData"></orderPay>
       </view>
     </u-popup>
@@ -143,6 +159,17 @@ export default {
       type: 0,
       text: "", //针对不同type展示文案
       list: [],
+      buyOptions: [],
+      customButtonGroup1: [
+        {
+          with: 200,
+          text: "立即购买",
+          backgroundColor: "linear-gradient(90deg, #3AB3AE 0%,#3AB3AE 100%)",
+          color: "#fff",
+        },
+      ],
+      goodsList: [],
+      selectGoodsData: {},
       orderModalShow: false,
       selectVipData: {},
     };
@@ -155,6 +182,27 @@ export default {
   },
   onShow() {},
   methods: {
+    handleClickSelectGoods(data) {
+      this.selectGoodsData = data;
+      console.log('this.selectGoodsData at line 186:', this.selectGoodsData)
+      this.$forceUpdate();
+    },
+    goBuy() {
+      // this.$refs.commonSelectGoods.close();
+      var mynavData = JSON.stringify({
+      
+        goods:[this.selectGoodsData],
+        typeId: 0,
+        navTitle: "",
+        title: "",
+        isVip: true,
+				
+      }); // 这里转换成 字符串
+      console.log('mynavData at line 192:', mynavData)
+      uni.navigateTo({
+        url: `/pages/goods/order/index?data=${mynavData}`,
+      });
+    },
     //获取数据
     getData() {
       uni.showLoading({
@@ -179,37 +227,40 @@ export default {
     },
     //点击购买
     openorderModal(item, type) {
-		if(this.$platform=='ios'){
-			return false
-		}
+      console.log("item at line 120:", item);
+      if (this.$platform == "ios") {
+        return false;
+      }
       let text = "";
       //如果是右侧按钮点击展示
       //判断点击类型是vip价格还是延期价格
-      if (type == 0) {
-        if (item.state == null) {
-          //没有vip
-          this.selectVipData.list = item.vcbList;
-          this.selectVipData.id = item.vcbList[0].id;
-        } else {
-          this.selectVipData.list = item.yanqiList;
-          this.selectVipData.id = item.yanqiList[0].id;
-        }
-      } else {
-        this.selectVipData.id = item.id;
-      }
 
-      if (type) {
-        this.selectVipData.type = type;
+      if (item.state == null) {
+        //没有vip
+        this.selectVipData.list = item.vcbList;
+        // this.selectVipData.id = item.vcbList[0].id;
+      } else {
+        this.selectVipData.list = item.yanqiList;
+        // this.selectVipData.id = item.yanqiList[0].id;
       }
 
       this.selectVipData.title = item.title + "-" + item.year + "年";
       this.selectVipData.lastFee = item.rebateFee;
+      this.selectVipData.state = item.state;
 
-      this.orderModalShow = true;
-      console.log("-----selectVipData-----", this.selectVipData);
-      this.$nextTick(() => {
-        this.$refs.orderPay.initPrepareOrder();
+      this.goodsList = this.selectVipData.list.map((e) => {
+        return { ...e };
       });
+      this.selectGoodsData = this.selectVipData.list[type ? type : 0];
+      this.$refs.commonSelectGoods.open();
+      this.show = true;
+
+      //   this.orderModalShow = true;
+      //   console.log("-----selectVipData-----", this.selectVipData);
+
+      //   this.$nextTick(() => {
+      //     this.$refs.orderPay.initPrepareOrder();
+      //   });
     },
     //关闭
     closeOrderModalShow() {
@@ -245,7 +296,7 @@ export default {
   color: #fff;
   padding: 0 12rpx;
   border-radius: 15rpx;
-  background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
+  background-image: linear-gradient(90deg, #3AB3AE 0%, #00e1ec 100%);
 }
 .vip_item_special .vip_item_title {
   height: 50rpx;
@@ -312,7 +363,7 @@ export default {
 }
 .line {
   text-decoration: line-through;
-  color: #258feb;
+  color: #3AB3AE;
   font-style: italic;
 }
 .vip_item_flag {