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?goumai(item):''">
				<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="zhifu">
					立即支付
				</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未购买商品
			}
		},
		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()
				})
			}
		}
	}
</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%;
		}
	}
</style>