web-app-v1/pages/zbs-detail/detail.vue

<template>
	<view class="giftDetail">
		<view class="bannerContainer">
			<swiper class="banner">
				<swiper-item v-if="item"><view v-if="item.img" class="img" :style="{ backgroundImage: `url(${item.img})` }" /></swiper-item>
			</swiper>
			<view class="num">
				<text class="spec">1</text>
				<text>/</text>
				<text>1</text>
			</view>
		</view>
		<view class="good">
			<view class="top">
				<view class="title" v-if="item">{{ item.name }}</view>
				<view class="surplus" v-if="item">限量
					<text>{{ item.total }}份</text>
				</view>
			</view>
			<view class="bottom">
				<view class="num">
					<text class="spec">{{ totalPrice }}</text>
				</view>
				<view class="countNum"><custom-counter :count-num.sync="num"></custom-counter></view>
			</view>
		</view>
		<view class="bottomBtn">
			<view class="submitBtn" :class="item.surplus === 0 ? 'disable' : ''" @click="submit">{{ item.surplus ? '立即兑换' : '已兑完' }}</view>
		</view>
		<toast_confirm :show.sync="toastInfo.show" :title="toastInfo.title" :content="toastInfo.content" @confirm="exchangeConfirm" />
	</view>
</template>

<script>
import { api_submitExchange, GetInte } from '../../apis/zbs.js';
import customCounter from './components/count2';
import toast_confirm from '../../components/toast-confirm.vue';
export default {
	components: {
		customCounter,
		toast_confirm
	},
	data() {
		return {
			pageTitle: '礼品详情',
			item: {},
			num: 1,
			requesting: false,
			integral: '',
			toastInfo: {
				show: false,
				title: '',
				content: ''
			}
		};
	},
	computed: {
		totalPrice() {
			if (this.item) {
				return this.item.price * this.num;
			}
		},
		userServerInfo() {
			//用户服务器信息
			return this.$store.state.userinfo;
		}
	},
	onLoad(option) {
		this.item = JSON.parse(decodeURIComponent(option.item))
	},
	onShow() {
		this.getBound()
	},
	methods: {
		getBound(){
			GetInte({ user_id: this.userServerInfo.id }).then(res => {
				//获取兑换礼品列表
				this.integral = res.data.integral
			})
		},
		closeToast() {
			this.toastInfo.title = '';
			this.toastInfo.content = '';
			this.toastInfo.show = false;
		},
		exchangeConfirm(flag) {
			const _this = this;
			if (flag) {
				if (!this.requesting) {
					this.requesting = true;
					this.closeToast();
					uni.showLoading();
					api_submitExchange({ gift_id: this.item.id, num: this.num, user_id: this.userServerInfo.id, address_id: 123 }).then(res => {
							uni.hideLoading();
							this.requesting = false;
							if (res.code == 200) {
								uni.navigateTo({
									url:'./success?totalPrice='+this.totalPrice
								})
							} else {
								uni.hideLoading();
								this.requesting = false;
								uni.showModal({
									content: res.msg || '兑换失败：库存不足',
									showCancel: false
								});
							}
					})
				}
			} else {
				this.closeToast();
			}
		},
		submit() {
			if (!this.item.surplus) {
				uni.showModal({
						content: '商品已兑换完',
						showCancel: false
					});
					return false;
				}
				if (this.num) {
					if (this.integral >= this.totalPrice) {
						this.toastInfo.title = '温馨提醒';
						this.toastInfo.content = `您确定兑换${this.num}件商品吗？`;
						this.toastInfo.show = true;
					}
					 else {
						uni.showModal({
							content: '奖金余额不足',
							showCancel: false
						});
					}
				} else {
					uni.showModal({
						content: '数量不能为空',
						showCancel: false
					});
				}
		}
	},
	// created() {
	// 	//加载完成后开启监听全局 MESSAGE 事件
	// 	this.item = getApp().globalData.detail; //从兑换列表页面进入当前页面后从 getApp().globalData.detail 取值
	// }
};
</script>

<style>
	page {
		background-color: #F9F9FB;
	}
</style>
<style lang="scss" scoped>
page {
	display: flex;
	flex-direction: column;
	.giftDetail {
		flex: 1;
		overflow: hidden;
		.bannerContainer {
			width: 100%;
			height: 628rpx;
			position: relative;
			.banner {
				height: 100%;
				width: 100%;
				.img {
					width: 100%;
					height: 100%;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 100%;
				}
			}
			.num {
				position: absolute;
				width: 112rpx;
				height: 48rpx;
				border-radius: 48rpx;
				line-height: 48rpx;
				color: #ffffff;
				font-size: 24rpx;
				bottom: 54rpx;
				right: 44rpx;
				background-color: rgba(0, 0, 0, 0.24);
				text-align: center;
				.spec {
					font-size: 28rpx !important;
				}
			}
		}
		.good {
			width: 100%;
			height: 264rpx;
			background: linear-gradient(94deg, #f97c55 0%, #f44545 100%);
			margin-bottom: 30rpx;
			padding: 10rpx;
			box-sizing: border-box;
			position: relative;
			&::after {
				content: '';
				display: block;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				width: 174rpx;
				height: 218rpx;
				background-position: top;
				background-size: 100%;
				background-repeat: no-repeat;
				background-image: url(../../static/gift/5.png);
			}
			.top {
				margin-bottom: 20rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 72rpx;
				padding: 0 20rpx;
				.title {
					color: #ffffff;
					font-size: 40rpx;
					line-height: 56rpx;
				}
				.surplus {
					color: #ffffff;
					font-size: 28rpx;
					align-self: flex-end;
				}
			}
			.bottom {
				width: 100%;
				height: 120rpx;
				border-radius: 8rpx;
				background-color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				box-sizing: border-box;
				position: relative;
				z-index: 3;
				overflow: hidden;
				.num {
					color: #ea4a41;
					font-size: 24rpx;
					.spec {
						font-size: 40rpx;
					}
				}
				.countNum {
					width: 180rpx;
				}
				&::before {
					content: '';
					display: block;
					width: 114rpx;
					height: 144rpx;
					position: absolute;
					top: 50%;
					left: 16rpx;
					transform: translateY(-50%);
					background-image: url(../../static/gift/5.png);
					background-position: center;
					background-size: 100%;
					background-repeat: no-repeat;
				}
			}
		}
		.desc {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 100rpx;
			.fixed {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.content {
				color: #333333;
				font-size: 28rpx;
				line-height: 48rpx;
			}
		}
		.bottomBtn {
			@include flex();
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			height: 98rpx;
			position: fixed;
			background: #FFFFFF;
			.submitBtn {
				width: 690rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: linear-gradient(93deg, #f97c55 0%, #f44545 100%);
				color: #ffffff;
				font-size: 32rpx;
				border-radius: 88rpx;
				&.disable {
					background: #999999 !important;
					color: #f8f8f8 !important;
				}
			}
		}
	}
}
</style>