H5_module/open/index/index.vue

<template>
	<view>
		<view class="top">
			<view class="list">
				<scroll-view scroll-x="true" :scroll-into-view="scrollIntoView" class="lists">
					<view :class="'li'+(current == index ? ' active':'')" :id="'id'+index" v-for="(item,index) in pageList" :key="index" @click="checkVip(item,index)">
						<view class="li-c ddflex">
						<image :src="picUrlss+'lvluo/open_vip.png'" class="vip-ico" v-if="current == index"></image>
						<image :src="picUrlss+'lvluo/open_tag.png'" class="vip-tag"></image>
						<view class="tit"><view v-if="item.brief">{{item.brief}}</view>{{item.title}}</view>
						<view class="zhe" v-if="item.gradesEquity"><text v-for="(it,idx) in JSON.parse(item.gradesEquity)" :key="idx" v-if="it.bind == 'consume'">立享{{it.value}}折</text></view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="cons" v-if="pageList[current].editorContent">
				<image :src="picUrlss+'lvluo/open_bg.png'" class="open-bg"></image>
				<view class="tis">开通即可享受</view>
				<view class="con-s">
					<rich-text :nodes="pageList[current].editorContent"></rich-text>
					<!-- <mp-html :content="pageList[current].editorContent" :lazy-load="true" @imgtap="choose"></mp-html> -->
				</view>
			</view>
			<block v-if="pageList[current].levelStrategyDTOList&&pageList[current].levelStrategyDTOList.length > 0">
			<view class="vip-list" v-if="checkItem.price != 0">
				<view class="vip-tit">开通时长</view>
				<view class="vip-lists">
					<view class="li ddflex" v-for="(item,index) in pageList[current].levelStrategyDTOList" :key="index" @click="checkVips(item,index)" v-if="item.price > 0">
						<view class="vip-tits fflex">{{item.strategyTitle}}</view>
						<view class="vip-money">
							<view class="money"><text>￥</text>{{item.price}}</view>
							<view class="del" v-if="item.originalPrice > 0">￥{{item.originalPrice}}</view>
						</view>
						<image :src="picUrlss+(vipCurrent == index ? 'lvluo/open_gou_h.png' : 'lvluo/open_gou.png')" class="gou"></image>
					</view>
				</view>
			</view>
			</block>
			<!-- <view class="vip-list" v-if="vipList.length > 0 && money > 0">
				<view class="vip-tit">开通时长</view>
				<view class="vip-lists">
					<view class="li ddflex" v-for="(item,index) in vipList" :key="index" @click="checkVips(item,index)">
						<view class="vip-tits fflex">{{item.day == '30' ? '连续包月VIP':'年度VIP'}}</view>
						<view class="vip-money">
							<view class="money"><text>￥</text>{{item.price}}</view>
							<view class="del">￥{{item.originalPrice}}</view>
						</view>
						<image :src="picUrlss+(vipCurrent == index ? 'lvluo/open_gou_h.png' : 'lvluo/open_gou.png')" class="gou"></image>
					</view>
				</view>
			</view> -->
		</view>
		<view style="height: 176rpx;"></view>
		<view class="bot ddflex">
			<block v-if="checkItem && checkItem.price!=0">
				<view class="fflex ddflex" style="align-items: flex-end;">
					<view class="price"><text>￥</text>{{money}}</view>
					<view class="hui" v-if="saleMoney > 0">优惠￥{{saleMoney}}</view>
				</view>
				<view class="mingxi ddflex" @click="showPop">明细<image src="../../static/pages/images/bico.png"></image></view>
				<view class="btns" @click="buy()">{{userinfoVip.level == pageList[current].id && userinfoVip.level != 0 && !userinfoVip.end ? '立即续费':'立即开通'}}</view>
			</block>
			<block v-else>
				<view class="btn fflex" @click="buy()" v-if="userinfoVip.level == pageList[current].id && userinfoVip.level != 0 && !userinfoVip.end">立即续费</view>
				<view class="btn fflex" v-else @click="buy()">{{checkItem.price > 0 ? '立即开通':'免费开通'}}</view>
			</block>
		</view>
		<view class="ceng" v-if="isShowPop" @click="hidePop"></view>
		<view class="popup" :style="'bottom:' +popBottom">
			<image src="../../static/pages/images/close1.png" class="pop-close" @click="hidePop"></image>
			<view class="pop-tit">支付明细</view>
			<view class="pop-tits">{{pageList[current].brief + '·' + pageList[current].title}}</view>
			<view class="pop-info ddflex">
				<view class="fflex">{{checkItem.strategyTitle}}</view>
				<view class="del" v-if="checkItem.originalPrice > 0">￥{{checkItem.originalPrice}}</view>
				<view class="pop-money">￥{{money}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	const route = require('../../utils/route');
	const utils = require('../../utils/util.js');
	import mpHtml from "@/components/mp-html/components/mp-html/mp-html.vue"
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				picUrlss: req.public.picUrls,
				opt: {},
				current: 0,
				pageList: [],
				vipList: [],
				vipCurrent: 0,
				money: 0,
				saleMoney: 0,
				isShowPop: false,
				popBottom: '-100%',
				userinfoVip: '',
				scrollIntoView: 'id0',
				checkItem: '',
				config: ''
			};
		},
		onLoad: async function(options) {
			this.opt = options;
			this.config = JSON.parse(req.getStorage('configRes'));
			if(options.levelId){
				uni.setNavigationBarTitle({
					title: '升级健康卡'
				})
			}
			await this.getuserVip();
			await this.getNewList();
			// await this.getList();
		},
		methods: {
			getuserVip() {
				return new Promise((resolve,reject)=>{
					req.getRequest('/api/user/levelDetails', {}, data => {
						let expireTime = Array;
						if (data.expireTime) {
							expireTime = data.expireTime.split(' ');
							data.expireTime = data.expireTime.replace(/-/g, '/');
						}
						let nowTime = new Date().getTime();
						let endTime = new Date(data.expireTime).getTime();
						let times = parseInt((endTime - nowTime) / 1000);
						if(data.cardNo) data.cardNo = data.cardNo.replace(/(.{4}).*(.{4})/, '$1********$2');
						this.userinfoVip = data;
						this.userinfoVip.expireTime = expireTime[0];
						if (times <= 0) {
							this.userinfoVip.end = true;
						} else {
							this.userinfoVip.end = false;
						}
						resolve();
					});
				})
			},
			checkVip(item,index){
				if(this.current == index) return false;
				this.current = index;
				this.scrollIntoView = 'id'+this.current;
				this.vipCurrent = 0;
				this.checkItem = item.levelStrategyDTOList[0];
				this.calculateMoney(item.levelStrategyDTOList[0])
				this.$forceUpdate();
				// this.getVipMoneyT(item.level);
			},
			checkVips(item,index){
				if(this.vipCurrent == index) return false;
				this.vipCurrent = index;
				this.checkItem = item;
				this.calculateMoney(item)
			},
			showPop(){
				this.isShowPop = true;
				this.popBottom = 0;
			},
			hidePop(){
				this.isShowPop = false;
				this.popBottom = '-100%';
			},
			calculateMoney(obj){
				this.money = obj.price;
				if(obj.originalPrice > 0){
					this.saleMoney = obj.originalPrice - obj.price;
				}else{
					this.saleMoney = 0
				}
			},
			getNewList(){
				let that = this;
				return new Promise((resolve,reject)=>{
					req.getRequest('/api/levelStrategy/listV2', {}, data => {
						console.log('策略',data,that.opt.levelId)
						that.pageList = data;
						if(that.opt.levelId != '' && that.opt.levelId != undefined){
							console.log('有id')
							if(that.userinfoVip.levelGrade > 0 && !that.userinfoVip.end){
								data.map((it,idx)=>{
									if(it.id == that.userinfoVip.level){
										if(idx == data.length-1){
											that.current = idx;
										}else{
											that.current = idx+1;
										}
										that.scrollIntoView = 'id'+that.current;
										// that.getVipMoneyT(data[that.current].level);
										that.checkItem = data[that.current].levelStrategyDTOList[0];
									}
								})
							}else{
								data.map((it,idx)=>{
									if(it.id == that.opt.levelId){
										that.scrollIntoView = 'id'+idx;
										that.current = idx;
										// that.getVipMoneyT(data[idx].level)
										that.checkItem = data[idx].levelStrategyDTOList[0];
									}
								})
							}
						}else{
							console.log('没有id')
							that.scrollIntoView = 0;
							that.current = 0;
							// that.getVipMoneyT(data[0].level)
							that.checkItem = data[0].levelStrategyDTOList[0];
							console.log('that.checkItem==',that.checkItem)
						}
						that.calculateMoney(that.checkItem)
						resolve();
					});
				})
			},
			getList() {
				let that = this;
				return new Promise((resolve,reject)=>{
					req.getRequest('/api/levelStrategy/userLevelList', {}, data => {
						that.pageList = data;
						if(that.opt.levelId != ''){
							if(that.userinfoVip.levelGrade > 0 && !that.userinfoVip.end){
								data.map((it,idx)=>{
									if(it.id == that.userinfoVip.level){
										if(idx == data.length-1){
											that.current = idx;
										}else{
											that.current = idx+1;
										}
										that.scrollIntoView = 'id'+that.current;
										that.getVipMoneyT(data[that.current].level);
									}
								})
							}else{
								data.map((it,idx)=>{
									if(it.id == that.opt.levelId){
										that.scrollIntoView = 'id'+idx;
										that.current = idx;
										that.getVipMoneyT(data[idx].level)
									}
								})
							}
						}else{
							that.scrollIntoView = 0;
							that.current = 0;
							that.getVipMoneyT(data[0].level)
						}
						resolve();
					});
				})
			},
			getVipMoneyT(index) {
				let from = {
					level: index
				};
				return new Promise((resolve, reject) => {
					req.getRequest('/api/levelStrategy/list', from, data => {
						this.vipList = data;
						this.money = data[0].price;
						this.saleMoney = data[0].originalPrice - data[0].price;
					});
					resolve();
				});
			},
			//购买
			buy() {
				let that = this;
				route.vip(
					{
						strategyId: this.checkItem.id,
						scene: req.getStorage('scene')
					},
					data => {
						route.vipPay(data.id, data.status, this.money, res => {
							uni.hideLoading();
							app.globalData.reLaunchTo('pages/index/index');
						});
					}
				);
			},
			jumpUrl(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	};
</script>

<style>
	@import "./index.css"
</style>