天医币和积分可以查看详情，vip延期支持积分购买

pages/vip/index.vue

@@ -27,13 +27,13 @@
 				<view class="vip_price" v-if="item.vcbList&&item.vcbList.length>0">
 					<text class="font_bold" v-if="item.type==1||item.type==2">超级VIP价格：</text>
 					<text class="font_bold" v-else>VIP价格：</text>
-					<text class="vip_price_v" v-for="(item_price, index_price) in item.vcbList" :key="index_price" @click="openorderModal(item_price)">
+					<text class="vip_price_v" v-for="(item_price, index_price) in item.vcbList" :key="index_price">
 						{{item_price.year}}年<text>{{item_price.rebateFee}}</text>元
 					</text>
 				</view>
 				<view class="vip_price" v-if="item.yanqiList&&item.yanqiList.length>0">
 					<text class="font_bold">延期价格：</text>
-					<text class="vip_price_v" v-for="(item_yq, index_yq) in item.yanqiList" :key="index_yq" @click="openorderModal(item_yq,1)">
+					<text class="vip_price_v" v-for="(item_yq, index_yq) in item.yanqiList" :key="index_yq">
 						{{item_yq.year}}年<text>{{item_yq.rebateFee}}</text>元
 					</text>
 				</view>
@@ -53,7 +53,20 @@
 			</view>
 		</view>
 		
-		<u-popup :show="orderModalShow" mode="bottom" :round="20">
+		<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;
@@ -63,7 +76,7 @@
 		  "></u-icon>
 				<orderPay ref="orderPay" :dataInfo="selectVipData"></orderPay>
 			</view>
-		</u-popup>
+		</u-popup> -->
 	</view>
 </template>
 
@@ -77,7 +90,18 @@ export default{
 			text: '',  //针对不同type展示文案
 			list: [],
 			orderModalShow: false,
-			selectVipData: {}
+			selectVipData: {},
+			selectGoodsData: {},
+			goodsList: [],
+			customButtonGroup1: [
+			  {
+			    with: 200,
+			    text: "立即购买",
+			    backgroundColor: "linear-gradient(90deg, #294a97 0%,#7dc1f0 100%)",
+			    color: "#fff",
+			  },
+			],
+			buyOptions: []
 		}
 	},
 	components: {
@@ -90,6 +114,12 @@ export default{
 		
 	},
 	methods: {
+		//选择vip
+		handleClickSelectGoods(data) {
+			console.log(data)
+		  this.selectGoodsData = data;
+		  this.$forceUpdate();
+		},
 		//获取数据
 		getData(){
 			uni.showLoading({
@@ -124,11 +154,13 @@ export default{
 				}else{
 					this.selectVipData.list = item.yanqiList;
 					this.selectVipData.id = item.yanqiList[0].id;
+					this.selectVipData.list.forEach(item => {
+					    item.yanqiStatus = true;
+					});
 				}
 			}else{
 				this.selectVipData.id = item.id;
 			}
-			
 			if(type){
 				this.selectVipData.type = type;
 			}
@@ -136,9 +168,24 @@ export default{
 			this.selectVipData.title = item.title + '-' + item.year + '年';
 			this.selectVipData.lastFee = item.rebateFee;
 			
-			this.orderModalShow = true;
-			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();
+		},
+		//组件点击购买
+		goBuy() {
+			var data = {
+				id: this.selectGoodsData.id,
+				title: this.selectGoodsData.title + '-' + this.selectGoodsData.year + '年',
+				price: this.selectGoodsData.rebateFee,
+				orderType: 'vip',
+				yanqiStatus: this.selectGoodsData.yanqiStatus
+			}
+			this.$refs.commonSelectGoods.close();
+			uni.navigateTo({
+				url: '/pages/place/order?data='+JSON.stringify(data),
 			});
 		},
 		//关闭