dev/dcp-app-gate/pages/profile/personIntegrate/userShopDetails.vue

<template>
	<view class="user-shop-details">
		<u-toast ref="uToast" />
		<view style="background-color: $color-white !important;">
			<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
				:background="background" title-width="300" :title="i18n('userShopDetails')"></u-navbar>
		</view>
		<view class="content">
			<view class="content-title">
				<image :src="websiteUrl + shopInfo.picture" class="left-pic"></image>
			</view>
		</view>
		<view class="shop-info">
			<view class="shop-title">
				<text>{{$i18n.locale=='zh'?shopInfo.commodityName:shopInfo.commodityNameEn}}</text>
				<text v-if="shopInfo.commodityStatus==2"
					style="margin-left: 1px; display: inline-block;text-align: center;width:65px;height:20px;line-height:20px; background-color:#f0f9eb;border:1px solid #eaf7e4;color:#5ec142;border-radius: 10px;font-size: 14rpx; ">
					{{ $i18n.locale == "zh" ? "已结束" : "Ended" }}
				</text>
			</view>
			<view class="shop-price">{{shopInfo.point}}{{$i18n.locale=='zh'?'积分':'integral'}}</view>
			<view class="shop-detail">
				<view class="shop-num">
					<view class="shop-get">{{$i18n.locale=='zh'?'已兑换':'Has change'}}：{{shopInfo.exchangeQuantity}}
					</view>
					<view class="shop-to">{{$i18n.locale=='zh'?'剩余':'Residue'}}：{{shopInfo.usageQuantity}}</view>
				</view>
				<view class="shop-time" v-if="$i18n.locale=='zh'">
					有效期至：{{shopInfo.expirationType=='y'?'长期有效':`${moment(shopInfo.createDate).format('YYYY-MM-DD')}`}}
				</view>
				<view class="shop-time" v-if="$i18n.locale!='zh'">
					Valid
					until：{{shopInfo.expirationType=='y'?'Long effective':`${moment(shopInfo.createDate).format('YYYY-MM-DD')}`}}
				</view>
			</view>
			<view class="shop-need">
				<view class="shop-many">{{$i18n.locale=='zh'?'数量':'Quantity'}}</view>
				<view class="shop-btn">
					<view class="btn-little" @tap="downNum()">-</view>
					<view class="shop-munch btn-little" id="addtext">{{addtext}}</view>
					<view class="btn-little" @tap="addNum(shopInfo.usageQuantity)">+</view>
				</view>
				<view class="user-btn-ui" v-if="shopInfo.commodityStatus==2">
					<!-- <button class="user-defeat" @tap="tochangeAddress(shopInfo.id,shopInfo.exchangeObject)"
						v-if="shopInfo.usageQuantity>=1" disabled="true">
						{{$i18n.locale=='zh'?'确认兑换':'Confirm the change'}}
					</button>
					<button class="user-defeat" v-else>{{$i18n.locale=='zh'?'暂无存货':'No inventory'}}</button> -->
				</view>
				<view class="user-btn-ui" v-else>
					<button class="user-success" @tap="tochangeAddress(shopInfo.id,shopInfo.exchangeObject)"
						v-if="shopInfo.usageQuantity>=1">
						{{$i18n.locale=='zh'?'确认兑换':'Confirm the change'}}
					</button>
					<button class="user-defeat" v-else>{{$i18n.locale=='zh'?'暂无存货':'No inventory'}}</button>
				</view>
			</view>
		</view>
		<view class="user-info">
			<view class="user-title">{{$i18n.locale=='zh'?'规则信息':'Rules of the information'}}</view>
			<view class="user-what">
				<view class="user-who">{{$i18n.locale=='zh'?'兑换对象':'For object'}}:</view>
				<view class="user-right" v-if="$i18n.locale=='zh'">
					{{shopInfo.exchangeObject}}
				</view>
				<view class="user-right" v-if="$i18n.locale!='zh'">
					{{shopInfo.exchangeObject}}
				</view>
			</view>
			<view class="user-what">
				<view class="user-who">{{$i18n.locale=='zh'?'兑换限制':'Exchange restrictions'}}:</view>
				<view class="user-right" v-if="$i18n.locale=='zh'">
					{{shopInfo.restrict=='y'?shopInfo.exchangeRestrict:'无限制'}}
				</view>
				<view class="user-right" v-if="$i18n.locale!='zh'">
					{{shopInfo.restrict=='y'?shopInfo.exchangeRestrict:'Unrestricted'}}
				</view>
			</view>
			<view class="user-what">
				<view class="user-who">{{$i18n.locale=='zh'?'活动有效期':'Validity of activity'}}:</view>
				<view class="user-right" v-if="$i18n.locale=='zh'">
					{{shopInfo.expirationType=='y'?'长期有效':`${moment(shopInfo.createDate).format('YYYY-MM-DD')}`}}
				</view>
				<view class="user-right" v-if="$i18n.locale!='zh'">
					{{shopInfo.expirationType=='y'?'Long-term effective':`${moment(shopInfo.createDate).format('YYYY-MM-DD')}`}}
				</view>
			</view>
			<!-- <view class="user-what">
				<view class="user-who">{{$i18n.locale=='zh'?'活动限制':'Activity restrictions'}}:</view>
				<view class="user-right">{{$i18n.locale=='zh'?'活动有效期':'Validity of activity'}}</view>
			</view> -->
		</view>
		<view class="user-detail">
			<view class="user-shop-title">{{$i18n.locale=='zh'?'礼品介绍':'Products introduction'}}:</view>
			<view class="user-shop-pic">
				<image :src="websiteUrl + shopInfo.picture" class="left-pic"></image>
			</view>
			<view class="user-text">{{$i18n.locale=='zh'?shopInfo.commodityDetails:shopInfo.commodityDetailsEn}}</view>
		</view>
		<view class="table-null"></view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import moment from "moment"
	export default {
		components: {
			moment,
			uniPopupDialog,
			uniPopupMessage,
			uniPopup
		},
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
				shopInfo: {},
				grade: null,
				id: null,
				msgType: 'success',
				messageText: '这是一条成功提示',
				addtext: 1
			}
		},
		onLoad(id) {
			// console.log(id);
			this.grade = id.grade;
			this.id = id.id;
			this.getShopDetail()
		},
		filters: {
			twoDecimal(value) {
				return parseFloat(string(value)).toFixed(2);
			},
			time(data, type) {
				return moment(data).format(type);
			}
		},


		methods: {
			i18n(data) {
				return this.$t('common.' + data);
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			addNum(e) {
				// var num = document.getElementById('addtext');
				// if (num.innerHTML <= e - 1) {
				// 	num.innerHTML++;
				// }

				//document.cookie=num.value;

				if (this.addtext <= e - 1) {
					this.addtext = this.addtext + 1;
				}
			},
			downNum() {
				// var num = document.getElementById('addtext');
				// if (num.innerHTML >= 2) {
				// 	num.innerHTML--;
				// }
				if (this.addtext > 1) {
					this.addtext = this.addtext - 1;
				}
			},
			tochangeAddress(id, userGrade) {
				console.log(id, '--------->');
				// var num = document.getElementById('addtext');
				var num = this.addtext;
				// num = num.innerHTML
				console.log(userGrade, '==========');
				// console.log(num);
				if (userGrade == 'V3,V2,V1') {
					uni.navigateTo({
						url: './changeAddress?id=' + id + '&num=' + num,
					})
				} else if (userGrade == this.grade) {
					uni.navigateTo({
						url: './changeAddress?id=' + id + '&num=' + num,
					})
				} else {
					// this.msgType = type
					this.messageText = `当前用户等级不符合该礼品兑换需求`
					this.$refs.message.open()
				}


			},
			//获取礼品详情
			async getShopDetail() {
				// console.log(id, '-----------');
				const res = await this.$myRequest({
					url: '/uc/umsPointCommoditys',
					data: {
						id: this.id
					},
				})
				// console.log(res, '============');
				this.shopInfo = res.data.umsPointCommoditys[0]
				// console.log(this.shopInfo, '====================');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-shop-details {
		background-color: #cacacaf;

		.content {
			width: 96%;
			height: 500rpx;
			margin-left: 2%;
			background-color: #dadee1ff;

			.content-title {
				width: 100%;
				height: 100%;

				.left-pic {
					width: 90%;
					margin-left: 5%;
					height: 400rpx;
					margin-top: 50rpx;
				}
			}
		}

		.shop-info {
			width: 96%;
			height: 240rpx;
			margin-left: 2%;
			background-color: #fff;
			margin-top: 20rpx;

			.shop-title {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 32rpx;
				text-align: center;
				font-weight: 700;

			}

			.shop-price {
				font-size: 30rpx;
				font-weight: 700;
				color: red;
				width: 92%;
				height: 50rpx;
				line-height: 50rpx;
				margin-left: 4%;
			}

			.shop-detail {
				width: 92%;
				margin-left: 4%;
				height: 50rpx;
				display: flex;
				justify-content: space-between;

				.shop-num {
					width: 55%;
					height: 50rpx;
					display: flex;

					.shop-get {
						width: 55%;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 24rpx;
						margin-right: 10rpx;
					}

					.shop-to {
						width: 45%;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 24rpx;
					}
				}

				.shop-time {
					width: 45%;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 24rpx;
				}
			}

			.shop-need {
				width: 92%;
				margin-left: 4%;
				display: flex;

				.shop-many {
					height: 80rpx;
					line-height: 80rpx;
					margin-right: 20rpx;
				}

				.shop-btn {
					display: flex;
					height: 80rpx;

					.btn-little {
						margin-top: 20rpx;
						text-align: center;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						border: 1rpx solid #b0b0b0;
						color: black;
					}

					.shop-munch {
						border-left: none;
						border-right: none;
					}
				}

				.user-btn-ui {
					height: 50rpx;
					margin-top: 10rpx;
					margin-left: 43%;
					border-radius: 50rpx;

					.user-success {
						width: 100%;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						background-color: #0000ff;
						border-radius: 50rpx;
						color: white;
						font-size: 26rpx;

					}

					.user-defeat {
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						background-color: #989898;
						border-radius: 50rpx;
						color: white;
						font-size: 26rpx;
					}
				}

			}

		}

		.user-info {
			height: 300rpx;
			width: 96%;
			margin-left: 2%;
			background-color: #fff;
			margin-top: 20rpx;

			.user-title {
				width: 92%;
				margin-left: 4%;
				font-weight: 700;
				height: 80rpx;
				line-height: 80rpx;
			}

			.user-what {
				width: 92%;
				margin-left: 4%;
				display: flex;

				.user-who {
					width: 45%;
					font-size: 24rpx;
					color: #bcbcbe;
					height: 50rpx;
					line-height: 50rpx;
					text-align: right;
					transform: translateX(-10%);

				}

				.user-right {
					height: 50rpx;
					line-height: 50rpx;
					color: black;
					font-size: 26rpx;
				}
			}
		}

		.user-detail {
			width: 96%;
			margin-left: 2%;
			margin-top: 20rpx;
			background-color: #fff;

			.user-shop-title {
				width: 92%;
				margin-left: 4%;
				height: 80rpx;
				line-height: 80rpx;
				font-weight: 700;
			}

			.user-shop-pic {
				width: 100%;
				height: 500rpx;
				text-align: center;

				.left-pic {
					width: 90%;
					height: 400rpx;
					margin-top: 50rpx;
				}
			}

			.user-text {
				width: 92%;
				margin-left: 4%;
				overflow: hidden;
			}
		}

		.table-null {
			height: 30rpx;
		}
	}
</style>