activitys-uniapp/pages/shop/detail.vue

<template>
	<view :style="vuex_skin">
		<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;">{{detail.name}}</view>
				<view class=" text-base" style="padding: 20rpx 0;">
					<view class="text-bold text-lg">
						{{detail.point}}
						<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;">产品说明：{{detail.content}}</view>
				</block>
			</view>
		</view>
		<block v-if="exchangeShow">
			<view 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>
			</view>

			<view class="padding-sm">
				<view class="flex padding-xs">
					<text class="flex justify-center align-center">积分数：</text>
					<u-number-box :disabled="$u.test.isEmpty(userInfo.pufaPoint)" @change="pufaPointChange"
						:input-width="200" :min="0" v-model="data.pufaPoint">
					</u-number-box>
				</view>
			</view>
		</block>

		<view class="" style="height: 140rpx;">

		</view>

		<view v-if="!exchangeShow" class="footer-fixed flex align-center justify-end padding 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="$refs.toast.info('暂未开放')">兑换</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">
				<text>需支付</text>
				<text>￥</text>
				<text>{{cashValue}}</text>
			</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>
		<login ref="login" @signIn="signIn" @phoneSuccess="phoneSuccess"></login>
		<toast ref="toast" ></toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				//商品详情
				detail: {},
				//商品地址
				address: {},
				//用户信息
				userInfo: {},
				//点击兑换
				exchangeShow: false,
				//兑换的积分数
				cashValue: 0,
				data: {
					pufaPoint: 0
				},
			}
		},
		onLoad(options) {
			this.id = options.id;
			if (this.$u.test.isEmpty(this.id)) {
				this.$u.toast('商品id不能为空')
				return
			}
			this.fetchGoodsDetail()
			this.fetchUserInfo()
		},
		onShow() {
			this.getAddress()
		},
		methods: {
			pufaPointChange(e) {
			
			},










			/**
			 * 获取用户信息
			 */
			fetchUserInfo() {
				if (this.$cache.get('userInfo')) {
					this.userInfo = this.$cache.get('userInfo')
					return
				}
				if (this.$isEmpty(this.vuex_userId)) {
					this.showLogin()
					return
				}
				let params = {
					id: this.vuex_userId
				}
				this.$api.loginUser.detail(params).then(res => {
					this.userInfo = res.data.data
				})
			},
			/**
			 * 获取用户地址
			 */
			getAddress() {
				this.$api.address.list({
					userId: this.vuex_userId
				}).then(res => {
					this.address = res.data.data.records[0];
				})
			},
			/**
			 * 获取商品详情
			 */
			fetchGoodsDetail() {
				let params = {
					id: this.id
				}
				this.$api.pointgoods.list(params).then(res=>{
					this.detail=res.data.data.records[0]
				})
			}
		}
	}
</script>

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

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

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