H5_module/order/card/index.vue

<template>
	<view>
		<view class="top">
			<view class="top-c">
				<view class="sta ddflex" v-if="params.state == 8">已取消</view>
				<view class="sta ddflex" v-else-if="params.state == 6 || params.state == 7"><image src="../static/images/sta_dai.png"></image>已支付</view>
				<block v-else>
				<view class="sta ddflex"><image src="../static/images/sta_dai.png"></image>待付款</view>
				<view class="time ddflex">
					<uni-countdown :minute="timeHs[0]" :second="timeHs[1]" :showColon="false" :show-day="false" :show-hour="false" @timeup="timeUp" color="#fff" />
					后订单关闭，请及时付款哦~
				</view>
				</block>
			</view>
		</view>
		<view class="info">
			<view class="user ddflex">
				<image :src="params.vipOrderCardInfo.avatar ? params.vipOrderCardInfo.avatar:'../../static/pages/images/userimg.png'" mode="aspectFill"></image>
				<view class="fflex">{{params.vipOrderCardInfo.realName ? params.vipOrderCardInfo.realName : params.vipOrderCardInfo.nickName}}</view>
				<view class="kai">{{params.state == 1 ? '正在开通':params.state == 6 || params.state == 7 ? '已开通':'已取消'}}</view>
			</view>
			<view class="version ddflex">
				<view class="fflex">
					<view class="ddflex">
						<view class="v-tit">{{params.specialLevel.title}}</view>
						<view class="v-zhe" v-if="params.specialLevel&&params.specialLevel.gradesEquity"><text v-for="(it,idx) in JSON.parse(params.specialLevel.gradesEquity)" :key="idx" v-if="it.bind == 'consume'">立享{{it.value}}折</text></view>
					</view>
					<view class="v-time">有效期：{{params.state == 6 || params.state == 7 ? params.vipOrderCardInfo.timeRange.start + '至' + params.vipOrderCardInfo.timeRange.end : params.levelStrategy.day + '天'}}</view>
				</view>
				<view class="v-moneys">
					<view class="v-money"><text>￥</text>{{params.levelStrategy.price}}</view>
					<view class="v-del">￥{{params.levelStrategy.originalPrice}}</view>
				</view>
			</view>
			<view></view>
		</view>
		<view class="form">
			<view class="li ddflex">
				<view class="label">订单编号</view>
				<view class="item fflex">{{params.id}}</view>
			</view>
			<view class="li ddflex">
				<view class="label">创建时间</view>
				<view class="item fflex">{{params.createDate}}</view>
			</view>
			<view class="li ddflex">
				<view class="label">订单金额</view>
				<view class="item fflex">￥{{params.payMoney}}</view>
			</view>
			<view class="li ddflex">
				<view class="label">支付状态</view>
				<view class="item fflex dai">{{params.state == 1 ? '待支付' : params.state == 8 ? '已取消' : '已支付'}}</view>
			</view>
		</view>
		<block v-if="params.state == 1">
		<view style="height: 136rpx;"></view>
		<view class="bot">
			<view class="btn" @click="buy()">立即支付</view>
		</view>
		</block>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	const route = require('../../utils/route');
	const utils = require('../../utils/util.js');
	import uniCountdown from '../../order/components/uni-countdown/uni-countdown.vue'  
	export default {
		components: {
			uniCountdown
		},
		data() {
			return {
				picUrlss: req.public.picUrls,
				opt: {},
				params: '',
				scene: '',
				timeHs: '',
				config: ''
			};
		},
		onLoad: async function(options) {
			this.opt = options;
			if(options.scene){
				this.scene = options.scene;
			}
		},
		async onShow() {
			if(this.scene){
				await this.loadCodeParams();
			}
			await this.getDetail();
			await this.getConfig();
			await this.s_to_hs(this.params.createDate);
		},
		methods: {
			getConfig(){
				return new Promise((resolve, reject) => {
					req.getRequest('/api/config',{},data=>{
						this.config = data;
						req.setStorage('configRes',JSON.stringify(data))
						resolve();
					})
				})
			},
			loadCodeParams() {
				let _ts = this;
				return new Promise((resolve, reject) => {
					let form = {
						scene: _ts.scene
					};
					req.getRequest('/api/code/params', form, data => {
						let res = data.scene.split('_');
						req.silenceLogin(data.userId, '');
						req.setStorage('pidCode', data.userId);
						this.opt.id = res[0];
						resolve();
					});
				});
			},
			s_to_hs(s) {
				let d1 = new Date(s);//订单创建时间
				let d2 = new Date();//当前时间
				let minute = parseInt(d2 - d1) / 1000 / 60;//两个时间相差的分钟数
				if(minute > 20){
					return false;
				}else{
					var m;
					let ss = (20 - minute)*60;
					m = Math.floor(ss / 60);
					//计算秒
					//算法：取得秒%60的余数，既得到秒数
					ss = ss % 60;
					//将变量转换为字符串
					m += '';
					ss += '';
					//如果只有一位数，前面增加一个0
					m = m.length == 1 ? '0' + m : m;
					ss = ss.length == 1 ? '0' + ss : ss;
					let sTime = m + ':' + ss;
					let sTimes = sTime.split(/:|:/g);
					this.timeHs = sTimes;
					return sTimes;
				}
			},
			timeUp() {
				// req.postRequest(api.order_cancelOrder, { id: this.orderDetail.id }, data => {
				// 	this.isCancel = false;
				this.getDetail();
				// });
			},
			getDetail(){
				return new Promise((resolve,reject)=>{
					req.getRequest('/api/order/detail',{id: this.opt.id},data=>{
						this.params = data;
						resolve();
					})
				})
			},
			buy(){
				let that = this;
				route.vipPay(this.params.vipOrderCardInfo.levelLogsId, 2, this.params.levelStrategy.price, res => {
					uni.hideLoading();
					if (res) {
						req.alertMsg('你已开通'+this.params.specialLevel.brief + '·' + this.params.specialLevel.title,res=>{
							app.globalData.reLaunchTo('pages/index/index');
						})
					}
				});
			},
			jumpUrl(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	};
</script>

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