store-new/pages/shop-gift-exchange/shop-gift-exchange.vue

<template>
	<view class="gift">
		<view class="top_box">
			<view class="top_circle"></view>
			<view class="gift_top">
				<image :src="gift.imgurl" class="gift_img" mode="aspectFill"></image>
				<view class="gift_title">{{gift.name}}</view>
				<view class="flexB" style="margin:30rpx 0;">
					<view class="gift_inte">
						<text>{{integral}}</text>
						<text>积分</text>
					</view>
					<view class="gift_num_box flexS">
						<view class="flexC" @click="down">-</view>
						<input type="number" v-model="num" @input="getVal" />
						<view class="flexC" @click="num++">+</view>
					</view>
				</view>
				<view class="sub_btn" @click="exchange">立即兑换</view>
			</view>
		</view>
		<view class="bottom_box">
			<view class="bottom_circle"></view>
			<view class="gift_bottom">
				<view>产品参数</view>
				<!-- <view>活动时间：2021/05/01-2012/05/06</view> -->
				<view>兑换形式：全部使用积分形式兑换</view>
				<view>本产品由大卫博士平台提供。本页面的信息以及服务由大卫博士交易平台提供，请确保账号处于正常状态。</view>
			</view>
		</view>
		<view class="hint_pop" v-if="hintShow">
			<view class="hint_con">
				<image src="../../static/imgs/shop/hint_icon.png" class="hint_icon"></image>
				<view class="hint_title">温馨提醒</view>
				<view class="hint_intr flexCC">{{hintCon}}</view>
				<view class="hint_btn_box flexC">
					<view @click="hintShow= false">取消</view>
					<view @click="exGift">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		exchangeGifts
	} from '../../apis/shop.js'
	export default {
		data() {
			return {
				gift: '', //礼品详情
				num: 0,
				hintCon: '',
				hintShow: false,
			};
		},
		onLoad({
			gift
		}) {
			if (gift) {
				this.gift = JSON.parse(decodeURIComponent(gift))
			}
		},
		computed: {
			integral() {
				return this.num > 0 ? this.gift.integral * this.num : this.gift.integral
			}
		},
		methods: {
			//减号
			down() {
				if (this.num == 1) {
					uni.showToast({
						title: '兑换数量至少为1',
						icon: 'none'
					})
					return false;
				}
				this.num--;
			},
			//输入框获取数据
			getVal(e) {
				this.num = Number(e.detail.value)
			},
			//立即兑换
			exchange() {
				if (!this.num) {
					uni.showModal({
						content: '至少选择一件兑换',
						showCancel: false
					})
					return false;
				}
				this.hintShow = true;
				this.hintCon = `您确定使用${this.integral}积分兑换本商品吗？`
			},
			exGift() {

				this.hintShow = false
				uni.showLoading({
					title: '兑换中...'
				})
				exchangeGifts({
					gift_id: this.gift.id,
					num: this.num
				}).then(res => {
					if (res.code == 200) {
						uni.showModal({
							content: '兑换成功',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.redirectTo({
										url: '../shop-gift-suce/shop-gift-suce?integral=' +
											this.integral
									})
								}
							}
						})
					} else {
						uni.showModal({
							content: res.data || '兑换失败',
							showCancel: false
						})
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss">
	.hint_pop {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.hint_con {
			position: relative;
			width: 620rpx;
			text-align: center;
			margin: 0 auto;
			min-height: 384rpx;
			background: #fff;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 30rpx;

			.hint_title {
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 85rpx;
			}

			.hint_intr {
				font-size: 32rpx;
				margin: 25rpx 0;
				min-height: 100rpx;
			}

			.hint_icon {
				width: 183rpx;
				height: 135rpx;
				position: absolute;
				top: -67rpx;
				margin-left: 18rpx;
			}

			.hint_btn_box {
				view {
					width: 242rpx;
					height: 88rpx;
					font-size: 32rpx;
					border-radius: 44rpx;
					text-align: center;
					line-height: 88rpx;
				}

				view:first-child {
					background: #E9E9E9;
					color: #999;
					margin-right: 15rpx;
				}

				view:last-child {
					background: $base-line-bg;
					color: #fff;
				}
			}
		}

		.iconfont {
			color: #fff;
			font-size: 60rpx;
			margin-top: 30rpx;
		}
	}

	.gift {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(180deg, #FF232C 0%, #FF571B 100%);
		padding-top: 30rpx;
	}

	.top_box {
		width: 690rpx;
		height: 65vh;
		background: #fff;
		position: relative;
		margin: 0 auto 40rpx;
		border-radius: 24rpx 24rpx 0 0;
	}

	.bottom_box {
		width: 690rpx;
		height: 27vh;
		margin: 0 auto;
		background: #fff;
		position: relative;
		border-radius: 0 0 24rpx 24rpx;
	}

	.top_box,
	.bottom_box {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.top_box {
		.gift_img {
			width: 630rpx;
			height: 504rpx;
			margin: 30rpx 0;
			border-radius: 24rpx;
		}

		.gift_title {
			font-size: 40rpx;
			font-weight: bold;
		}

		.gift_inte {
			text {
				color: $base-color;
			}

			text:first-child {
				font-size: 44rpx;
				font-weight: bold;
			}
		}

		.gift_num_box {
			width: 220rpx;
			height: 64rpx;
			background: #fff4f3;
			border: 2px solid $base-color;
			border-radius: 16rpx;
			overflow: hidden;

			input {
				border-left: 1rpx solid $base-color;
				border-right: 1rpx solid $base-color;
				height: 100%;
				width: 40%;
				text-align: center;
			}

			view {
				color: $base-color;
				width: 30%;
				font-size: 44rpx;
				flex-shrink: 0;
			}
		}

		.sub_btn {
			margin-bottom: 56rpx;
		}
	}

	.bottom_box {
		.gift_bottom {
			view:first-child {
				font-size: 32rpx;
				font-weight: bold;
				padding: 20rpx 0;
			}

			view {
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}


		}
	}

	.top_circle,
	.bottom_circle {
		width: calc(100% - 40rpx);
		height: 20rpx;
		position: absolute;
		left: 20rpx;
	}

	.top_circle {
		background: #fff;
		bottom: -20rpx;
		border-bottom: 2rpx dotted #BFBFBF;
	}

	.bottom_circle {
		background: #fff;
		top: -20rpx;
		border-top: 2rpx dotted #BFBFBF;
	}

	.top_circle::before,
	.bottom_circle::before {
		content: '';
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		left: -20rpx;
	}

	.top_circle::after,
	.bottom_circle::after {
		content: '';
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		right: -20rpx;
	}

	.top_circle::before {
		background-image: radial-gradient(circle 20rpx at 0 100%, transparent 100rpx, #fff 50%);
	}

	.top_circle::after {
		background-image: radial-gradient(circle 20rpx at 100% 100%, transparent 100rpx, #fff 50%);
	}

	.bottom_circle::before {
		background-image: radial-gradient(circle 20rpx at 0 0, transparent 100rpx, #fff 50%);
	}

	.bottom_circle::after {
		background-image: radial-gradient(circle 20rpx at 100% 0, transparent 100rpx, #fff 50%);
	}
</style>