H5_QiCaiYao/pages_tool/member/point_goodsDetail.vue

<template>
	<view class="point_goodsDetail">
		<div class="goods-info">
			<image :src="$util.img(list.image)" mode="aspectFill"></image>
			<div class="right">
				<div class="name">{{ list.type_name }}</div>
				<div>库存{{ list.stock }}件</div>
				<div v-if="list.type == 2">
					<div class="price">{{ list.point }}积分</div>
				</div>
				<div v-if="list.type == 1" style="display: flex;">
					<div class="price">{{ list.point }}积分+{{ list.price }}元</div>
				</div>
			</div>
		</div>

		<div class="tell">
			<div class="title">兑换说明</div>
			<div class="text">
				<rich-text :nodes="list.content"></rich-text>
			</div>
		</div>
		<div class="tell">
			<div class="title">兑换规则</div>
			<div class="text">{{ list.rule }}</div>
			<p class="text">
				<span style="margin-right: 50rpx;">限定兑换：{{ list.limit_num }}件</span>
				<span>已兑换：{{ list.ready_num }}件</span>
			</p>
			<image :src="$util.img(list.image)" mode="aspectFill"></image>
		</div>

		<div style="height: 130rpx;"></div>
		<div class="btn" @click="show = true">兑换</div>

		<u-popup :show="show" @close="show = false" closeable round="20">
			<view class="goods-sku">
				<div class="goods-info">
					<image :src="$util.img(list.image)" mode="aspectFill"></image>
					<div class="right">
						<div class="name">{{ list.type_name }}</div>
						<div>库存{{ list.stock }}件</div>
						<div v-if="list.type == 0">
							<div class="price">{{ list.point }}积分</div>
						</div>
						<div v-if="list.type == 1" style="display: flex;">
							<div class="price">{{ list.point }}积分+{{ list.price }}元</div>
						</div>
					</div>
				</div>
				<div class="popup-content">
					<!-- <div class="specifications">
						<div class="specifications-title">规格</div>
						<div class="specifications-list">
							<div
								class="specifications-item"
								:style="
									sho1 ? { background: 'rgb(33, 187, 243)', color: '#fff' } : ''
								"
								@click="sho"
							>
								星巴克代金券*1
							</div>
						</div>
						<u-line color="#E8E8E8" margin="40rpx 0"></u-line>
					</div>
 -->
					<div class="number">
						<div>数量</div>
						<!-- <uniNumberBox></uniNumberBox> -->
						<u-number-box :max="list.limit_num" :min="0" v-model="pointNum"></u-number-box>
					</div>
					<!-- <u-button class="exchange"  shape="circle" text="立即兑换" @click="btn"></u-button> -->
					<div class="exchange" @click="btn(list)" v-if="list.state && list.ready_num < list.limit_num">
						立即兑换
					</div>
					<div class="exchange1" v-else-if="list.state && !(list.ready_num < list.limit_num)">
						已兑换
					</div>
					<div class="exchange1" v-else>库存不足</div>
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	export default {
		components: {
			// uniNumberBox
		},
		data() {
			return {
				show: false,
				sho1: false,
				id: '',
				pointNum: 0,
				list: []
			};
		},
		onLoad(id) {
			this.id = id;
		},
		onShow(id) {
			this.$api.sendRequest({
				url: '/api/goodsexchange/detail',
				data: {
					id: this.id.id
				},
				success: res => {
					console.log(res, 'res');
					this.list = res.data;
				}
			});
		},
		methods: {
			btn(list) {
				if (!this.pointNum) {
					uni.showToast({
						icon: 'none',
						title: '请添加兑换商品数量'
					});
				} else {
					uni.showToast({
						title: '兑换成功'
					});
					uni.navigateTo({
						url: `/pages_tool/member/pointChange?id=${list.id}&pointNum=${this.pointNum}`
					});
					this.show = false;
					this.pointNum = 0;
				}
			},
			sho() {
				this.sho1 = !this.sho1;
				console.log(this.sho1);
			}
		}
	};
</script>

<style lang="scss">
	.point_goodsDetail {
		padding: 24rpx;
		line-height: 1;

		.popup-content {
			padding: 0 32rpx 32rpx;

			.exchange {
				height: 80rpx;
				background: #21bbf3;
				border-radius: 40px;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 80rpx;
				text-align: center;
				margin-top: 70rpx;
			}

			.exchange1 {
				height: 80rpx;
				background: #eee;
				border-radius: 40px;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 80rpx;
				text-align: center;
				margin-top: 70rpx;
			}

			.number {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.specifications {
				.specifications-title {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.specifications-list {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.specifications-item {
						text-align: center;
						line-height: 60rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						padding: 0 24rpx;
						color: #666666;
						height: 60rpx;
						background: #f6f6f6;
						border-radius: 12rpx;
					}
				}
			}
		}

		.btn {
			width: calc(100% - 64rpx);
			position: fixed;
			bottom: 32rpx;
			left: 32rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			text-align: center;
			height: 80rpx;
			background: #21bbf3;
			border-radius: 40rpx;
		}

		.tell {
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx;
			margin: 24rpx 0;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;

			.title {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				margin-bottom: 24rpx;
			}

			.text {
				line-height: 42rpx;
			}

			image {
				width: 100%;
				background: #f2f2f2;
				border-radius: 8rpx;

				margin-top: 32rpx;
			}
		}

		.goods-info {
			display: flex;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx;

			image {
				width: 176rpx;
				height: 128rpx;
				background: #f2f2f2;
				border-radius: 8rpx;
				margin-right: 24rpx;
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;

				.price {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #21bbf3;
				}

				.name {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
			}
		}
	}
</style>