activitys-uniapp/pages/shop/detail.vue

<template>
	<view :style="vuex_skin">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title-color="#000000"  :is-back="true" title="商品详情"></u-navbar>
		<!-- #endif -->
		<view>
			<view class="goods">
				<image @click="$util.preview(detail.imgUrl)" :src="detail.imgUrl" style="width: 100vw;" mode="widthFix">
				</image>
				<view class="title">
					<view class="text-bold" style="color: #353535;font-family: PingFang-SC-Bold;font-size: 34rpx;">
						<text>{{detail.name}}</text>
						<text class="red" v-if="detail.isLimit">（每人限购兑换{{detail.limitBuy}}次）</text>
					</view>
					<view class=" text-base" style="padding: 20rpx 0;">
						<view class="text-bold text-lg">
							{{detail.point || 0}}
							<text style="padding-left: 6rpx;">积分</text>
						</view>
					</view>
					<block v-if="!$u.test.isEmpty(detail.content)">
						<view class="text-sm" style="color: #888888;line-height: 42rpx;">产品说明：
							<u-parse :html="detail.content"></u-parse>
						</view>
					</block>
				</view>
			</view>
			<view v-if="exchangeShow" style="padding: 60rpx da;">
				<navigator url="/pages/address/address" hover-class="none"
					class="container flex align-center justify-between" style="border-bottom: 1rpx solid #efefef;">
					<view class="flex padding align-center">
						<image src="@/static/mine/address.png" style="width: 65upx;height: 65upx;"></image>
						<view class="padding-left text-sm" v-if="!$u.test.isEmpty(address)">
							<view style="font-size: 28upx;font-family: PingFang SC;font-weight: 800;color: #000000;">
								{{address.consignee}} {{address.phone}}
							</view>
							<view class="text-gray">{{address.address}}</view>
						</view>
						<view class="padding-left"
							style="font-size: 28upx;font-family: PingFang SC;font-weight: 800;color: #000000;" v-else>
							请选择收货地址</view>
					</view>
					<view class="padding">
						<u-icon name="arrow-right" color="#d4d4d4"></u-icon>
					</view>
				</navigator>

				<view class="padding-sm">
					<view class="flex padding-xs">
						<text class="flex justify-center align-center">兑换数量：</text>
						<u-number-box :step="1" :disabled="$u.test.isEmpty(detail.remain)" @change="numChange"
							:input-width="150" :min="1" :max="maxNum" v-model="exChangeData.num">
						</u-number-box>
						<view class="center" style="color: #888888;margin-left: 20rpx;font-family: PingFang-SC-Medium;">
							<text>剩余库存: {{detail.remain || 0}}</text>
						</view>
					</view>
					<view class="flex padding-xs">
						<text class="flex justify-center align-center">积分数量：</text>
						<u-number-box :step="10" :disabled="$u.test.isEmpty(userData.userPufaPoint)"
							@change="pufaPointChange" :input-width="150" :min="0" :max="maxValue"
							v-model="exChangeData.point">
						</u-number-box>
						<view class="center" style="color: #888888;margin-left: 20rpx;font-family: PingFang-SC-Medium;">
							<text>可用积分: {{userData.userPufaPoint || 0}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 300rpx;">

			</view>
		</view>
		<view class="bottom-change">
			<view v-if="!exchangeShow" class="footer-fixed flex align-center justify-end  bg-white"
				style="padding:30rpx;;border-top: 1rpx solid #e5e5e5;z-index: 9;">
				<button class="cu-btn round text-white bg-base" style="width: 180upx;height: 80upx;"
					@click="login">兑换</button>
			</view>
			<view v-else class="footer-fixed flex align-center justify-between  bg-white"
				style="border-top: 1rpx solid #e5e5e5;padding: 30rpx;z-index: 9;">
				<view class="text-red flex-direction flex" v-if="pointValue>0">
					<text>仍需{{pointValue}}积分</text>
				</view>
				<view class="" v-else>

				</view>
				<view>
					<button class="cu-btn round text-white bg-base"
						style="width: 180upx;height: 80upx;margin-right: 10upx;" @click="confirm">兑换</button>
					<button @click="exchangeShow=false" class="cu-btn round line-gray"
						style="width: 180upx;height: 80upx;z-index: 99;">取消</button>
				</view>
			</view>
		</view>
		<login ref="login" @signIn="signIn" @phoneSuccess="phoneSuccess"></login>
		<toast ref="toast"></toast>
		<home-btn></home-btn>
		<exchange-success ref="exchangeSuccess"></exchange-success>
	</view>
</template>

<script>
	import exchangeSuccess from "@/components/alert/exchangeSuccess.vue"
	export default {
		components: {
			exchangeSuccess
		},
		data() {
			return {
				id: '',
				//商品详情
				detail: {},
				//商品地址
				address: {},
				//点击兑换
				exchangeShow: false,
				//我的积分数
				userData: {
					userPufaPoint: ''
				},
				maxNum:1,
				maxValue: 0,
				//兑换的数据
				exChangeData: {
					num: 1,
					point: 0
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			if (this.$u.test.isEmpty(this.id)) {
				this.$u.toast('商品id不能为空')
				return
			}
			
			this.fetchGoodsDetail()
		},
		onShow() {
			uni.$on('ADDRESS',(res)=>{
				this.address=res
			})
			if (this.$isEmpty(this.address)) {
				this.getAddress()
				return
			}
		},
		computed: {
			pointValue: {
				get() {
					let m = this.$digital.floatMul(this.detail.point, this.exChangeData.num)
					let n = this.exChangeData.point
					let val = this.$digital.floatSub(m, n)
					if (val < 0) {
						val = 0
						this.$u.toast('不可以超过商品所需积分')
						return val
					}
					return val
				}
			},
		},
		methods: {
			resetData() {
				this.userData = {
					userPufaPoint: ''
				}
				this.exChangeData = {
					num: 1,
					point: 0
				}
			},
			/**
			 * 确认兑换
			 */
			async confirm() {
				if (this.detail.remain < this.exChangeData.num) {
					this.$refs.toast.error('库存不足')
					return
				}
				if (this.$isEmpty(this.address)) {
					this.$refs.toast.error('请选择收货地址')
					return
				}
				if (this.$isEmpty(this.vuex_userId)) {
					this.$refs.toast.error('用户未登录')
					return
				}
				if (this.$isEmpty(this.userData.userPufaPoint)) {
					this.$refs.toast.error('无可用积分')
					return
				}
				if (this.pointValue > 0) {
					this.$refs.toast.error('积分不足')
					return
				}
				if (this.pointValue < 0) {
					this.$refs.toast.error('不可以超过商品所需积分')
					return
				}
				if (this.exChangeData.point > this.userData.userPufaPoint) {
					this.$refs.toast.error('积分有误')
					return
				}
				let params = {
					type: 1,
					phone: this.vuex_phone,
					goodsId: this.id,
					addressId: this.address.id,
					num: this.exChangeData.num
				}
				this.$api.pointgoods.exchange(params).then(res=>{
					if (res.data.success) {
						this.resetData()
						this.init()
						this.$refs.exchangeSuccess.showSuccess(this.detail.imgUrl)
					}
				}).catch(err=>{
					console.log(error);
				})
			},
			pufaPointChange(e) {
				this.exChangeData.point = e.value
			},
			numChange(e) {
				this.exChangeData.num = e.value
				this.getMaxValue()
			},
			async init() {
				await this.fetchUserData()
				this.getMaxValue()
				this.getAddress()
				this.fetchGoodsDetail()
				this.exchangeShow = true
			},
			/**
			 * 获取最大购买数量
			 */
			getMaxNum(){
				// 是否限购
				if (!this.detail.isLimit) {
					//不限购，返回库存量
					this.maxNum=this.detail.remain
					return 
				}
				//限购
				if (this.detail.remain > this.detail.limitBuy) {
					this.maxNum=this.detail.limitBuy
					return
				}
				this.maxNum=this.detail.remain
			},
			/**
			 * 获取步进器的最大值
			 */
			getMaxValue() {
				let userPoint = parseInt(this.userData.userPufaPoint)
				let detailPoint = this.$digital.floatMul(parseInt(this.detail.point), this.exChangeData.num)
				if (userPoint > detailPoint) {
					this.maxValue = detailPoint
				} else {
					this.maxValue = userPoint
				}
			},
			/**
			 * 获取用户可用积分
			 */
			async fetchUserData() {
				if (!this.vuex_phone) {
					return
				}
				let params = {
					phone: this.vuex_phone
				}
				let res = await this.$api.loginUser.userHeatValueAndPufaPoint(params)
				this.userData = res.data.data
			},
			/**
			 * 获取用户地址
			 */
			async getAddress() {
				if (this.$isEmpty(this.vuex_userId)) {
					return
				}
				let params = {
					userId: this.vuex_userId
				}
				let res = await this.$api.address.list(params)
				this.address = res.data.data.records[0];
			},
			/**
			 * 获取商品详情
			 */
			async fetchGoodsDetail() {
				let params = {
					id: this.id
				}
				let res=await this.$api.pointgoods.list(params)
				this.detail = res.data.data.records[0]
				this.getMaxNum()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.red {
		color: #e72226;
	}

	.goods {
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #efefef;

		.title {
			padding-top: 20rpx;
			margin: 0 20rpx;
			font-size: 32rpx;
			color: #363636;
		}
	}
</style>