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="address-icon">
							<u-icon name="map-fill" color="#ffffff" size="46"></u-icon>
						</view>
						<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" v-if="exchangeType != 0">
						<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" >
					<text v-if="exchangeType == 0">需支付{{cashValue}}元</text>
					<text v-if="pointValue > 0 && exchangeType == 1">仍需{{pointValue}}积分</text>
					<text v-if="cashValue > 0 && exchangeType == 2">需支付{{cashValue}}元</text>
				</view>
				<view>
					<button class="cu-btn round text-white bg-base"
						style="width: 180upx;height: 80upx;margin-right: 10upx;" @click="confirmTips">兑换</button>
					<button @click="cancel" class="cu-btn round line-gray"
						style="width: 180upx;height: 80upx;z-index: 99;">取消</button>
				</view>
			</view>
		</view>
		
		<u-action-sheet 
		:list="exchangeTypeList" 
		v-model="exchangeTypeShow" 
		safe-area-inset-bottom
		@click="selectExchangeType"
		>
		</u-action-sheet>
		
		<u-modal 
		v-model="confirmExchangeShow" 
		:content="tipsContent" 
		show-cancel-button
		:confirm-style="confirmStyle"
		@confirm="confirm"
		>
		</u-modal>
		
		<webAuthAlert ref="webAuthAlert" @confirm="webAuthConfirm"></webAuthAlert>
		
		<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"
	import webAuthAlert from "@/components/alert/webAuthAlert.vue"
	export default {
		components: {
			exchangeSuccess,
			webAuthAlert
		},
		data() {
			return {
				id: '',
				//商品详情
				detail: {},
				//商品地址
				address: {},
				//点击兑换
				exchangeShow: false,
				//我的积分数
				userData: {
					userPufaPoint: ''
				},
				maxNum:1,
				maxValue: 0,
				//兑换的数据
				exChangeData: {
					num: 1,
					point: 0
				},
				//兑换列表
				exchangeTypeList: [{
					text: '现金兑换'
				}, {
					text: '积分兑换'
				}, {
					text: '积分+现金兑换' 
				}],
				//兑换方式
				exchangeTypeShow: false,
				//兑换类型
				exchangeType: null, //可选值 0:现金 1:积分 2:现金+积分
				//确认兑换
				confirmExchangeShow: false,
				//提示内容
				tipsContent: '',
				confirmStyle: {
					color: 'white',
				},
			}
		},
		onLoad(options) {
			this.id = options.id;
			if (this.$u.test.isEmpty(this.id)) {
				this.$u.toast('商品id不能为空')
				return
			}
			
			this.fetchGoodsDetail()
			this.confirmStyle.color = this.vuex_theme.bgColor;
		},
		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
				}
			},
			cashValue: {
				get() {
					let value =  null;
					if(this.exchangeType == 0){
						value = this.pointValue / 100;
						return value
					}
					value = ((this.detail.point * this.exChangeData.num) - this.exChangeData.point) / 100;
					return value
				}
			}
		},
		methods: {
			resetData() {
				this.userData = {
					userPufaPoint: ''
				}
				this.exChangeData = {
					num: 1,
					point: 0
				}
			},
			/**
			 * 兑换提示
			 */
			confirmTips(){
				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.exchangeType != 0) {
					this.$refs.toast.error('无可用积分')
					return
				}
				if (this.pointValue > 0 && this.exchangeType == 1) {
					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
				}
				
				this.confirmExchangeShow = true;
				if(this.exchangeType == 0){
					this.tipsContent = `确实使用${this.cashValue}元兑换该商品吗?`
				}
				if(this.exchangeType == 1){
					this.tipsContent = `确实使用${this.exChangeData.point}积分兑换该商品吗?`
				}
				if(this.exchangeType == 2){
					this.tipsContent = `确实使用${this.exChangeData.point}积分+${this.cashValue}元兑换该商品吗?`
				}
			},
			/**
			 * 确认兑换
			 */
			async confirm() {
				// #ifdef H5
				if(this.$isEmpty(this.vuex_gzh_userOpenid)){
					let code = this.$util.getUrlParam("code");
					if(this.$isEmpty(code)){
						this.$refs.webAuthAlert.show = true;
					}else{
						this.getWxUserInfo(code)
					}
				}else{
					this.exchangeGoods();
				}
				// #endif
				
				// #ifdef MP-WEIXIN
				this.exchangeGoods();
				// this.$refs.toast.warn('小程序暂未开放现金兑换，请前往H5兑换')
				// #endif
			},
			//获取微信网页授权用户信息
			async getWxUserInfo(code) {
				let params = {
					code: code
				}
				let res = await this.$api.wxApp.getH5WxUserInfo(params)
				if (res.data.success) {
					this.$u.vuex('vuex_gzh_userOpenid', res.data.data.openid);
					this.exchangeGoods();
				} else {
					this.$refs.toast.error(res.data.msg)
				}
			},
			//商品兑换
			async exchangeGoods() {
				let params = {
					type: this.exchangeType,
					phone: this.vuex_phone,
					goodsId: this.id,
					addressId: this.address.id,
					num: this.exChangeData.num,
					activeId: this.vuex_active_setting.defaultActiveId,
					openId: this.vuex_gzh_userOpenid
				}
				if(this.exchangeType === 2){params.point = this.exChangeData.point;}
				this.$api.pointgoods.exchange(params).then(res=>{
					if (res.data.success) {
						this.resetData()
						this.fetchUserData()
						this.getMaxValue()
						this.getAddress()
						this.fetchGoodsDetail()
						if(this.exchangeType == 1){
							this.$refs.exchangeSuccess.showSuccess(this.detail.imgUrl)
						}else{
							//混合兑换，用户选择纯积分兑换
							if(!this.$isNotEmpty(res.data.data)){
								this.$refs.exchangeSuccess.showSuccess(this.detail.imgUrl)
								return;
							}
					        
							// #ifdef MP-WEIXIN
							this.$refs.toast.warn('小程序暂未开放现金兑换，请前往H5兑换')
							// #endif
							
							// #ifdef H5
							console.log("支付订单",res.data.data)
							this.$shareConfig.H5Pay(res.data.data).then((res) => {
								console.log("商品兑换页面res", res)
								this.$refs.exchangeSuccess.showSuccess(this.detail.imgUrl)
							},(err) => {
								console.log("商品兑换页面err", err)
								this.$refs.toast.error(err.errMsg)
							})
							// #endif
							
						}
						
					}
				}).catch(err=>{
					console.log(error);
				})
			},
			//网页授权
			webAuthConfirm(){
				this.$webAuth.getUserOpenid();
			},
			cancel(){
				this.exchangeShow = false;
				this.resetData();
			},
			pufaPointChange(e) {
				this.exChangeData.point = e.value
			},
			numChange(e) {
				this.exChangeData.num = e.value
				this.getMaxValue()
			},
			selectExchangeType(index){
				this.exchangeType = index;
				this.exchangeShow = true;
			},
			async init() {
				await this.fetchUserData()
				this.getMaxValue()
				this.getAddress()
				this.fetchGoodsDetail()
				// this.exchangeShow = true
				this.exchangeTypeShow = 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.detail(params)
				this.detail = res.data.data
				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;
			justify-content: center;
		}
	}
	.address-icon{
		background: var(--bgColor);
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>