weapp/pages/detail/detail.vue

<template>
	<view class="giftDetail">
		<view class="bannerContainer">
			<swiper class="banner" v-if="type==1">
				<swiper-item v-if="item"><view v-if="item.gift_info.imgurl" class="img" :style="{ backgroundImage: `url(${item.gift_info.imgurl})` }" /></swiper-item>
			</swiper>
			<swiper class="banner" v-else>
				<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 v-if="type==1">{{ item.gift_info.gift_num }}份</text>
					<text v-else>{{ item.total }}份</text>
				</view>
			</view>
			<view class="bottom">
				<view class="num">
					<text class="spec">{{ totalPrice }}</text>
					<text>奖学金</text>
				</view>
				<!-- <view class="countNum" v-if="type == 1"><custom-counter :count-num.sync="item.num"></custom-counter></view> -->
				<view class="countNum"><custom-counter :count-num.sync="num"></custom-counter></view>
			</view>
		</view>
		<view class="desc">
			<view class="fixed">产品参数</view>
			<view class="content">本产品由大卫博士平台提供。本页面的信息以及服务由大卫博士交易平台提供，请确保账号处于正常状态。 全部使用奖学金形式兑换！</view>
		</view>
		<view class="submitBtn" @click="submit" v-if="type == 1">确认修改</view>
		<view class="submitBtn" :class="item.surplus === 0 ? 'disable' : ''" @click="submit" v-else>{{ item.surplus ? '立即兑换' : '已兑完' }}</view>
		<toast-confirm :show.sync="toastInfo.show" :title="toastInfo.title" :content="toastInfo.content" @confirm="exchangeConfirm" />
	</view>
</template>

<script>
import { api_getAddress, api_submitExchange ,editGiftOrder, GetBonus } from '../../api.js';
import customCounter from './components/count2';
export default {
	components: {
		customCounter
	},
	data() {
		return {
			pageTitle: '礼品详情',
			item: {},
			num: 1,
			type:'',
			requesting: false,
			userServerInfo: {
				bonus: ''
			},
			toastInfo: {
				show: false,
				title: '',
				content: ''
			}
		};
	},
	// onLoad:function(option){
	// 	this.type=option.type
	// 	console.log('我是type值：',this.type)
	// 	if (this.type == 1) {
	// 		this.num = this.item.num
	// 	} else {
	// 		this.num = 1
	// 	}
	// 	// console.log(this.item)
		
	// },
	computed: {
		totalPrice() {
			if (this.item) {
				return this.item.price * this.num;
			}
		},
		// userServerInfo() {
		// 	//用户服务器信息
		// 	return this.$store.state.userServerInfo;
		// }
	},
	onShow() {
		this.getBound()
	},
	methods: {
		getBound(){
			this.$ajax.get(GetBonus).then(([, { data: res }]) => {
				//获取兑换礼品列表
				this.userServerInfo.bonus = res.data.bonus
			});
		},
		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();
					this.$ajax.get(`${api_submitExchange}?gift_id=${this.item.id}&num=${this.num}&address_id=123`).then(([, { data: res }]) => {
							uni.hideLoading();
							this.requesting = false;
							if (res.code == 200) {
								uni.navigateTo({
									url:'./success?totalPrice='+this.totalPrice
								})
								// uni.showModal({
								// 	content: '兑换成功',
								// 	showCancel: false,
								// 	success(res) {
								// 		if (res.confirm) {
								// 			_this.$store.dispatch('onLaunch');
								// 		}
								// 	}
								// });
							} 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.userServerInfo.bonus >= 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 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;
			}
		}
		.submitBtn {
			width: 530rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: linear-gradient(93deg, #f97c55 0%, #f44545 100%);
			color: #ffffff;
			font-size: 32rpx;
			border-radius: 88rpx;
			margin: 0 auto 40rpx auto;
			&.disable {
				background: #999999 !important;
				color: #f8f8f8 !important;
			}
		}
	}
}
</style>