GSExamProj/pages/giftDetail/giftDetail.vue

<template>
	<view class="hole-page">
		<view class="nav-bar"></view>
		<view class="pic">
			<image :src="picUrl" mode=""></image>
		</view>
		<h2>
			<span style="font-size: 16px;">{{ name }}</span>
			<span style="font-size: 14px; color: #7E7E7E;">剩余库存：{{ sum }}件</span>
		</h2>
		<h3 style="justify-content: flex-start;">
			<span style="color: red; font-size: 22px; font-weight: bold; letter-spacing: 3rpx; padding-right: 5rpx;">
				{{ point }}
			</span>
			分
			<!-- <span style="padding-left: 20rpx;">(剩余积分：{{ myPoint }}分)</span> -->
		</h3>
		<view class="good-detail">
			<span style="color: #868686;">商品描述：</span>
			{{ use }}
		</view>
		<h3 style="justify-content: flex-start;">
			兑换数量：
			<uni-number-box 
				v-model="changeNum"
				:min="0"
				:max="
					Math.floor(myPoint / point) > sum
					?
					sum
					:
					Math.floor(myPoint / point)
				"
			/>
		</h3>
		<!-- <button @click="toggleGift">兑换奖品</button> -->
		<view class="btm">
			<view class="btm-lef">
				<h4>总计：</h4>
				<span>{{ changeNum * point }}积分</span>
			</view>
			<view class="btm-rig" @click="toggleGift">
				立即兑换
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view 
				class="pop"
			>
				<view class="pop-upper">
					<view class="img-area">
						<image src="/static/smile.png" mode=""></image>
					</view>
				</view>
				<view class="pop-lower">
					<span style="font-size: 14px;">兑换成功</span>
					<span style="font-size: 12px; color: #7A7A7A;">继续赚取积分，兑换更多奖品</span>
					<view class="con-btn" @click="refresh">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { publicPath } from '../../public.js'
	export default {
		data() {
			return {
				id: '',
				name: '',
				use: '',
				picUrl: '',
				sum: '',
				point: '',
				myPoint: uni.getStorageSync('point'),
				changeNum: 0,
				yr: new Date().getFullYear(),
				month: new Date().getMonth() + 1,
				day: new Date().getDate(),
				hr: new Date().getHours(),
				min: new Date().getMinutes(),
				sec: new Date().getSeconds(),
				height: ''
			}
		},
		methods: {
			toggleGift () {
				let that = this
				console.log(that.changeNum);
				if (that.changeNum == 0) {
					uni.showToast({
						icon: 'none',
						title: '未选择商品添加数量！'
					})
				} else {
					uni.request({
						url: publicPath + '/backstage/appshoping/getExchange',
						method: 'POST',
						header: {
							'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
						},
						data: {
							userId: uni.getStorageSync('id'),
							shopId: that.id,
							shopTime: that.yr + '-' + that.month + '-' + that.day + ' ' + that.hr + ':' + that.min + ':' + that.sec,
							shopSum: that.changeNum,
							changePoint: Number(that.point) * Number(that.changeNum),
							pointResource: '兑换了' + that.name
						},
						success: (res) => {
							console.log(res);
							if (res.data.code == 200) {
								/* uni.showToast({
									icon: 'none',
									title: '兑换商品成功！',
									success: () => {
										uni.reLaunch({
											url: '/pages/index/index'
										})
									}
								}) */
								that.$refs.popup.open()
							} else {
								uni.showToast({
									icon: 'none',
									title: '兑换商品失败，请稍后再试！'
								})
							}
						}
					})
				}
			},
			refresh () {
				this.$refs.popup.close()
				/* uni.redirectTo({
					url: '/pages/giftDetail/giftDetail'
				}) */
				uni.navigateBack()
			}
		},
		onLoad(params) {
			let that = this
			console.log(params);
			// 获取商品详情
			that.id = params.id
			that.name = params.name
			that.use = params.use
			that.picUrl = params.url
			that.sum = params.sum
			that.point = params.point
			// 获取当前高低
			that.height = uni.getSystemInfoSync().windowHeight
		},
		onShow() {
			console.log(uni.getStorageSync('point'));
			if (this.min < 10) {
				this.min = '0' + this.min
			}
			if (this.sec < 10) {
				this.sec = '0' + this.sec
			}
		}
	}
</script>

<style lang="scss">
	.hole-page{
		.nav-bar{
			width: 100%;
			height: var(--status-bar-height);
			padding-top: var(--status-bar-height);
		}
		.pic{
			width: 90%;
			height: 400rpx;
			margin: 0 auto;
			border-radius: 15rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
			}
		}
		h2, h3{
			width: 90%;
			margin: 30rpx auto;
			font-weight: normal;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
		}
		.good-detail{
			width: 90%;
			margin: 30rpx auto;
			font-weight: normal;
			font-size: 14px;
			line-height: 20px;
		}
		.btm{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			margin-top: 40vh;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 2px solid #f4f8fc;
			.btm-lef{
				display: flex;
				h4{
					font-size: 14px;
					font-weight: normal;
					padding-right: 5rpx;
				}
				span{
					font-size: 14px;
					color: red;
				}
			}
			.btm-rig{
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				font-size: 14px;
				background-color: #219ef8;
				color: #fff;
				border-radius: 15rpx;
			}
		}
		.pop{
			width: 70vw;
			height: 40vh;
			border-radius: 15rpx;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			background-color: #fff;
			.pop-upper{
				width: 100%;
				height: 55%;
				background-color: #1F9EF7;
				display: flex;
				.img-area{
					width: 50%;
					height: 70%;
					margin: auto;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.pop-lower{
				flex: 1;
				box-sizing: border-box;
				padding: 2vh 4vh;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				.con-btn{
					width: 50%;
					box-sizing: border-box;
					padding: 10rpx 0;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #1F9EF7;
					color: #fff;
					border-radius: 15rpx;
					font-size: 14px;
				}
			}
		}
	}
	
</style>