nurseWeChatAppletUI/pages/CommodityDetails/CommodityDetails.vue

<template>
	<view class="app">
		<u-swiper :list="info" height="750" style='background-size: 100%;'></u-swiper>
		<view class="Commodity common">
			<view class="name" v-if="goodsDetailslist.goodsName">
				{{goodsDetailslist.goodsName}}
			</view>
			<view class="name" v-else>
				暂无
			</view>
			<view class="price">
				￥{{goodsPrice}} 起
			</view>
		</view>
		<view class="choice common" @tap="buyshow=true">
			<view class="selected">
				已选
			</view>
			<view class="content">
				{{updata.goodsAttributeName}}
			</view>
			<image src="../../static/jiantou.png" mode=""></image>
		</view>
		<view class="Discount common">
			<view class="selected">
				优惠
			</view>
			<!-- <view class="content">
				购买最多可获得3积分
			</view>
			<image src="../../static/jiantou.png" mode=""></image> -->
		</view>
		<view class="service common">
			<view class="selected">
				服务
			</view>
			<view class="content">
				· 7天无理由退货
			</view>
			<view class="content" style="display: block;">
				· 仅工作日发货
			</view>
			<!-- <image src="../../static/jiantou.png" mode=""></image> -->
		</view>
		<view class="picture">
			<view class="selected">
				图文服务
			</view>
			<view class="textInfo" v-html="goodsDetailslist.goodsRemark">
			</view>
			<!-- <image v-for="(item,index) in info" :src="item.image" mode=""></image> -->
		</view>
		<view class="Purchasecolumn">
			<view class="buy" @tap="buyshow=true">
				立即购买
			</view>
		</view>
		<u-mask :show="buyshow" @click="buyshow = false" class='mask'>
			<view class="PurchasePage" @click.stop=''>
				<image class="close" src="../../static/gb.png" mode="" @tap='buyshow=false'></image>
				</image>
				<view class="topcontent">
					<view class="image">
						<image :src="updata.img" mode=""></image>
					</view>
					<view class="title" v-if="goodsDetailslist.goodsName">
						{{goodsDetailslist.goodsName}}
					</view>
					<view class="title" v-else>
						暂无
					</view>
					<view class="price">
						￥{{updata.goodsPrice}}
					</view>
					<view class="goodsStock" v-show="goodshow">
						库存数量:{{updata.goodsStock}}
					</view>
				</view>
				<view class="centercontent topcontent" v-show="goodshow">
					<view class="header">
						商品规格
					</view>
					<view v-for="(item,index) in goodDetailsLists"
						:class="item.isActive ? 'Productmodel':'productmodel'" @tap='isActivegoods(item)'>
						{{item.attributeDetailsName}}
					</view>
				</view>
				<!-- <view class="centercontent topcontent" v-for="(item,index) in goodDetailsLists">
					<view class="header">
						{{item.attributeName}}
					</view>
					<view v-for="bitem in item.goodAttributeDetailsLists" :key="bitem.attributeDetailsId"
						:class="bitem.isActive ? 'Productmodel':'productmodel'" @tap='isActivegoods(item,bitem)'>
						{{bitem.attributeDetailsName}}
					</view>
				</view> -->
				<view class="bottomcontent topcontent">
					<view class="header">
						数量
					</view>
					<view class="number">
						<u-number-box :min="1" :max="updata.goodsStock" v-model="updata.goodsCount"></u-number-box>
					</view>
				</view>
				<view class="buy" @tap="tapbuy">
					立即购买
				</view>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
		<u-mask :show="usershow" class='mask'>
			<view class="information">
				<image src="../../static/information.png" mode=""></image>
				<view class="title">
					请完善个人信息
				</view>
				<view class="cancel" @tap='usershow=false'>
					取消
				</view>
				<view class="determine" @tap='goinformation'>
					去完善
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		goodsDetails
	} from '@/api/CommodityDetails/CommodityDetails.js'
	import {
		AppIdentification
	} from '@/api/AppIdentification/index.js'
	import {
		goodPatientInfo
	} from '@/api/modifyAddress/modifyAddress.js';
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				timer: null,
				goodsInfoId: null, //商品id
				baseurl: '', //url
				image: null, //总图片
				usershow: false, //完善信息开关
				goodsPrice: '', //页面价格
				goodsDetailslist: [], //商品list
				goodDetailsLists: [], //提前预备商品规格数组
				goodshow: true, //商品规格开关
				buyshow: false, //立即购买遮罩层开关
				info: [], //轮播list
				updata: { //订单表
					goodsPrice: 0.00,
					goodsName: "",
					goodsAttributeName: '',
					goodsCount: 1,
					nurseStationId: '',
					img: '',
					totalPrice: null,
					patientId: null,
					goodsStock: 0, //库存数量
					goodsAttributeContent: '', //商品属性
					giveIntegral: 0, //赠送积分
					transportPrice: 0.00, //运费
					discountPrice: 0.00, //优惠   
					buySource: '', //下单来源  '护理站：NURSE_STATION，商城：SHOPPING_MALL'
					orderChannel: 'WECHAT_APPLET', //下单方式   手机App：MOBILE_APP，微信小程序：WECHAT_APPLET，支付宝小程序：ALI_PAY_APPLET'
					receiver: "", //收货人
					receiveAddress: "", //收货地址
					phone: '', //联系电话
					attributeDetailsId: '', //商品属性明细表id
					goodsAttributeId: '',
					goodsAttributeDetailsId: '',
				}
			};
		},
		methods: {
			//跳转完善页面
			goinformation() {
				this.usershow = false
				uni.navigateTo({
					url: '/pages/information/information'
				})
			},
			//立即购买跳转确认订单页面
			tapbuy() {
				let that = this
				try {
					const value = uni.getStorageSync('openid');
					if (value) {
						const value2 = uni.getStorageSync('patientId');
						if (value2) {
							if (!that.updata.patientId) {
								that.goodsList()
							}
							that.updata.patientId = value2
							AppIdentification(value2).then(res => {
								if (res.code == 200) {
									if (res.data.loginFlag) {
										if (that.goodshow == true) {
											if (that.updata.goodsAttributeName == '') {
												that.$refs.uToast.show({
													title: '未选择商品',
													type: 'error'
												})
											} else if (that.updata.goodsStock == 0) {
												that.$refs.uToast.show({
													title: '库存数量不足,无法购买',
													type: 'error'
												})
											} else {
												that.buyshow = false
												that.updata.totalPrice = (that.updata.goodsPrice * that.updata
													.goodsCount).toFixed(
													2)
												uni.navigateTo({
													url: `/pages/confirmOrder/confirmOrder?updata=${JSON.stringify(that.updata)}`
												})
											}
										} else {
											that.$refs.uToast.show({
												title: '未选择商品',
												type: 'error'
											})
											// that.buyshow = false
											// uni.navigateTo({
											// 	url: `/pages/confirmOrder/confirmOrder?updata=${JSON.stringify(that.updata)}`
											// })
										}
									} else {
										that.buyshow = false
										that.usershow = true
									}
								} else if (res.code == 9999) {

								} else {
									that.$refs.uToast.show({
										title: res.msg,
										type: 'error'
									})
									if (that.timer) {
										clearTimeout(that.timer)
									}
									that.timer = setTimeout(e => {
										uni.navigateTo({
											url: '/pages/login/login'
										})
									}, 1500)
								}
							})
						} else {
							that.$refs.uToast.show({
								title: '未登录,请先登录',
								type: 'error'
							})
							if (that.timer) {
								clearTimeout(that.timer)
							}
							that.timer = setTimeout(e => {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}, 1500)
						}
					} else {
						that.$refs.uToast.show({
							title: '未登录,请先登录',
							type: 'error'
						})
						if (that.timer) {
							clearTimeout(that.timer)
						}
						that.timer = setTimeout(e => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1500)
					}
				} catch (e) {}
			},
			//选择商品
			isActivegoods(item) {
				this.updata.goodsPrice = 0
				this.updata.goodsAttributeName = ''
				if (item.isActive == true) {
					this.goodDetailsLists.forEach(e => {
						e.isActive = false
					})
					this.updata.goodsAttributeName = ''
					this.updata.goodsPrice = 0
					this.updata.attributeDetailsId = ''
					this.updata.goodsStock = 0
					this.updata.img = this.image
				} else {
					this.goodDetailsLists.forEach(e => {
						e.isActive = false
					})
					item.isActive = true
					this.updata.img = item.attributePitureUrl
					this.updata.goodsAttributeName = item.attributeDetailsName
					this.updata.goodsPrice = item.goodsPrice
					this.updata.goodsPrice = this.updata.goodsPrice.toFixed(2)
					this.updata.attributeDetailsId = item.attributeDetailsId
					this.updata.goodsStock = item.goodsStock
					this.updata.goodsAttributeId = item.goodsAttributeId
					this.updata.goodsAttributeDetailsId = item.attributeDetailsId
				}
			},
			// 查询商品详细信息
			goodsDetailsinfo(goodsInfoId) {
				let that = this
				goodsDetails(goodsInfoId).then(res => {
					if (res.code == 200) {
						try {
							const value = uni.getStorageSync('patientId');
							if (value) {
								that.updata.patientId = value
								that.goodsList()
							} else {}
						} catch (e) {}
					}
					uni.removeStorageSync('Refresh');
					if (res.data[0].goodsRemark) {
						res.data[0].goodsRemark = res.data[0].goodsRemark.replace(/\<img/gi,
							"<br/> <img class='richPic'")
					}
					res.data[0].goodsPictureUrl = this.baseurl + res.data[0].goodsPictureUrl
					this.image = res.data[0].goodsPictureUrl
					var obj = {
						image: res.data[0].goodsPictureUrl,
					}
					this.info.push(obj)
					if (res.data[0].goodDetailsLists == null) {
						this.goodshow = false
					} else if (res.data[0].goodDetailsLists.length == 0) {
						this.goodshow = false
					} else {
						res.data[0].goodDetailsLists.forEach(e => {
							e.attributePitureUrl = this.baseurl + e.attributePitureUrl
							e.isActive = false
							var objs = {
								image: e.attributePitureUrl,
							}
							this.info.push(objs)
						})
						this.goodDetailsLists = res.data[0].goodDetailsLists
						this.goodshow = true
					}
					this.goodsDetailslist = res.data[0]
					this.updata.goodsName = this.goodsDetailslist.goodsName
					this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
					this.updata.img = res.data[0].goodsPictureUrl
					this.updata.goodsAttributeName = ''
					this.updata.goodsPrice = 0
					this.updata.attributeDetailsId = ''
					this.updata.goodsStock = 0
					this.updata.img = this.image
				})
			},
			// 收件人
			goodsList() {
				goodPatientInfo(this.updata.patientId).then(res => {
					res.data.forEach(e => {
						e.address = e.provinceName + e.cityName + e.regionName + e.streetName + e
							.receiveAddress
					})
					this.updata.receiver = res.data[0].receiveName
					this.updata.receiveAddress = res.data[0].address
					this.updata.phone = res.data[0].receivePhone
				})
			},
		},
		onLoad(options) { //获取传值
			console.log(options)
			this.updata.buySource = options.buySource
			if (options.goodsPrice == 'null' || !options.goodsPrice) {
				this.goodsPrice = 0 //页面价格
			} else {
				this.goodsPrice = options.goodsPrice //页面价格
			}
			this.goodsInfoId = options.goodsInfoId
		},
		onShow() {
			this.baseurl = baseurl
			this.usershow = false
			this.goodsDetailsinfo(this.goodsInfoId)
		},
		//1.分享给朋友
		onShareAppMessage(res) {
			let pages = getCurrentPages();
			let url = pages[pages.length - 1].$page.fullPath
			return {
				title: '泉医到家',
				path: url,
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			let pages = getCurrentPages();
			let url = pages[pages.length - 1].$page.fullPath
			return {
				title: '泉医到家',
				path: url,
			}
		},
	}
</script>

<style lang="scss">
	@import "./CommodityDetailsstyle.scss";
</style>