sxg/pages/index/yuyuechang.vue

<template>
	<view class="content">
		<view class="top-bg">
			<image src="../../static/img/yuyue-top.jpg" mode="widthFix"></image>
		</view>
		<!-- <view class="changci-top flex">
			<view class="djs-wrap flex">
				倒计时： 
				<uni-countdown
					color="#C6914E"
					background-color="#F6EFDF"
					:show-day="false"
					:day="0"
					:hour="0"
					:minute="0"
					:second="0"
				></uni-countdown>
			</view>
			<view class="user-info">
				<view class="" style="text-align: right;">
					消费账户：{{userInfo.now_money*1 || '0'}}
				</view>
				<view class="" style="text-align: right;">
					广告值： {{userInfo.aid_val*1 || '0'}}
				</view>
			</view>
		</view> -->
		<view class="" v-for="item in area">
			<view class="good-tit flex">
				<view class="tit-left flex">
					<image src="../../static/icon/red-tit.png" mode=""></image>{{item.name}}
				</view>
				<view class="tit-right">
					实付金额：{{item.low}} ~ {{ item.high }}
				</view>
			</view>
			<view class="good-list flex" @click="(status==2 ||status==0) ?goumai(item): opentc()">
				<image src="../../static/icon/red-gift.png" mode="widthFix" v-for="itemg in 35"></image>
			</view>
		</view>
		<uni-popup ref="popupyyok" type="center">
			<view class="popupyyok-wrap">
				<image :src="good.image" mode=""></image>
				<view class="clamp2" style="padding: 20rpx 80rpx;color: #999999;font-size: 26rpx;">
					{{good.name}}
				</view>
				<view class="" style="font-size: 35rpx;font-weight: bold;color: #333333;">
					{{good.price}}
				</view>
				<view class="btn" @click="good.status == 1 ?zhifu(): goDetail()">
					{{(good.status == 1 ||good.status == 0) ? '立即支付':'查看详情'}}
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="uppass" type="center">
			<view class="psw-wrapper">
				<view class="psw-title">请输入支付密码</view>
				<input type="password" v-model="password" class="psw-ipt"/>
				<view class="psw-btn">
					<text @click="cancel">取消</text>
					<text class="psw-qd" @click="pswQd">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		section,
		purchase,
		zfpay,
		see_order
	} from '@/api/index.js'
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniCountdown
		},
		data() {
			return {
				ccid: '',
				area: [],
				good: {},
				status: 2, //1购买了商品2未购买商品
				password: ''//交易密码
			}
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onLoad(opt) {
			this.ccid = opt.id
			this.see_order()
			this.section()
		},
		methods: {
			see_order() {
				let obj = this
				see_order({
					id: obj.ccid
				}).then(res => {
					console.log(res.data.status)
					obj.status = res.data.status
					if (res.data.status == 1) {
						obj.good = res.data.order
					}
				})
			},
			section() {
				let obj = this
				section({
					id: obj.ccid
				}).then(res => {
					console.log(res)
					obj.area = res.data
				})
			},
			goumai(item) {
				let obj = this
				purchase({
					id: obj.ccid,
					s_id: item.id
				}).then(res => {
					console.log(res)

					obj.good = res.data
					obj.$refs.popupyyok.open()
				})
			},
			zhifu() {
				let obj = this
				// zfpay({
				// 	order_id: obj.good.order_id
				// }).then(res => {
				// 	obj.$api.msg('支付成功')
				// 	obj.$refs.popupyyok.close()
				// })
				obj.$refs.popupyyok.close()
				obj.$refs.uppass.open()
			},
			opentc() {
				let obj = this
				obj.$refs.popupyyok.open()
			},
			goDetail() {
				uni.navigateTo({
					url: ''
				})
			},
			cancel() {
				let obj = this
				obj.$refs.uppass.close()
			},
			pswQd() {
				let obj = this
				zfpay({
					order_id: obj.good.order_id,
					pas: obj.password
				}).then(res => {
					obj.$api.msg('支付成功')
					obj.$refs.uppass.close()
				})
				
			},
			tishi() {
				return this.$api.msg('当前商品已售罄')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.changci-top {
		background-color: #fff;
		padding: 0 25rpx;
		height: 100rpx;

		.djs-wrap {
			padding-left: 25rpx;
		}
	}

	.good-tit {
		// margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;

		.tit-left {
			flex-shrink: 0;

			image {
				height: 36rpx;
				width: 36rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}

		.tit-right {
			text-align: right;
		}
	}

	.good-list {
		flex-wrap: wrap;
		background-color: #fff;
		padding: 20rpx;

		// justify-content: flex-start;
		image {
			width: 80rpx;
			margin-left: 15rpx;
		}

	}

	.popupyyok-wrap {
		height: 707rpx;
		width: 551rpx;
		background-color: #fff;
		border-radius: 20rpx;
		text-align: center;

		// position: relative;
		image {
			width: 100%;
			height: 429rpx;
		}

		.btn {
			position: absolute;
			bottom: 10rpx;
			left: 0;
			right: 0;
			margin: auto;
			width: 295rpx;
			line-height: 69rpx;
			border-radius: 34rpx;
			background: #303030;
			color: #F8DABA;
			font-size: 35rpx;
			color: #F8DABA;
		}
	}

	.top-bg {
		width: 750rpx;
		margin-bottom: 20rpx;

		image {
			width: 100%;
		}
	}
	.uppass-wrap {
		width: 600rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.up-tit {
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
		}
		.up-ipt {
			border: 1px solid #000000;
			display: block;
			width: 400rpx;
			background-color: #bfa;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			margin: auto;
			margin-top: 20rpx;
		}
	}
	.psw-wrapper {
		width: 548rpx;
		height: 344rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx 15rpx;
		.psw-title {
			width: 100%;
			font-size: 35rpx;
			padding: 43rpx 0 49rpx;
			text-align: center;
			font-weight: 800;
		}
		.psw-ipt {
			display: block;
			background-color: #dce3ed;
			height: 90rpx;
			width: 464rpx;
			padding-left: 30rpx;
			margin: 0 auto;
			font-size: 80rpx;
		}
		.psw-btn text{
			display: inline-block;
			text-align: center;
			width: 50%;
			padding-top: 29rpx;
			font-size: 35rpx;
		}
		.psw-qd {
			color:#5771DF;
		}
	}
</style>