NurseStationApp/pages/CommodityDetails/CommodityDetails.vue

<template>
	<view class="app">
		<u-swiper :list="info" height="750"></u-swiper>
		<view class="Commodity common">
			<view class="name">
				{{goodsDetailslist.goodsName}}
			</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>
			<image :src="goodsDetailslist.goodsPictureUrl" 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="goodsDetailslist.goodsPictureUrl" mode=""></image>
					</view>
					<view class="title">
						<span>{{goodsDetailslist.goodsName}}</span>
					</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 baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				usershow: false, //完善信息开关
				baseurl: '', //url
				goodsPrice: '', //页面价格
				goodsDetailslist: [], //商品list
				goodDetailsLists: [], //提前预备商品规格数组
				goodshow: true, //商品规格开关
				buyshow: false, //立即购买遮罩层开关
				info: [], //轮播list
				updata: { //订单表
					goodsPrice: 0.00,
					goodsName: "",
					goodsAttributeName: '',
					goodsCount: 1,
					nurseStationId: '',
					img: '',
					totalPrice: null,
					patientId: '',
					goodsStock: 0, //库存数量
					goodsAttributeContent: '', //商品属性
					giveIntegral: 0, //赠送积分
					transportPrice: 0.00, //运费
					discountPrice: 0.00, //优惠   
					buySource: '', //下单来源  '护理站：NURSE_STATION，商城：SHOPPING_MALL'
					orderChannel: 'MOBILE_APP', //下单方式   手机App：MOBILE_APP，微信小程序：WECHAT_APPLET，支付宝小程序：ALI_PAY_APPLET'
					receiver: "", //收货人
					receiveAddress: "", //收货地址
					phone: '', //联系电话
					attributeDetailsId: '', //商品属性明细表id
					goodsAttributeId: '',
					goodsAttributeDetailsId: '',
				}
			};
		},
		methods: {
			//跳转完善页面
			goinformation() {
				uni.navigateTo({
					url: '/pages/information/information'
				})
			},
			//立即购买跳转确认订单页面
			tapbuy() {
				AppIdentification(this.updata.patientId).then(res => {
					console.log(res)
					if (res.data.loginFlag) {
						if (this.goodshow == true) {
							if (this.updata.goodsAttributeName == '') {
								this.$refs.uToast.show({
									title: '未选择商品',
									type: 'error'
								})
							} else if (this.updata.goodsStock == 0) {
								this.$refs.uToast.show({
									title: '库存数量不足,无法购买',
									type: 'error'
								})
							} else {
								this.updata.totalPrice = (this.updata.goodsPrice * this.updata.goodsCount).toFixed(
									2)
								uni.navigateTo({
									url: `/pages/confirmOrder/confirmOrder?updata=${JSON.stringify(this.updata)}`
								})
							}
						} else {
							uni.navigateTo({
								url: `/pages/confirmOrder/confirmOrder?updata=${JSON.stringify(this.updata)}`
							})
						}
					} else {
						this.buyshow = false
						this.usershow = true
					}
				})
			},
			// tapbuy() {
			// 	this.goodsDetailslist.goodDetailsLists.forEach(e => {
			// 		e.goodAttributeDetailsLists.forEach(el => {
			// 			if (el.isActive == true) {
			// 				this.updata.goodsAttributeName += el.attributeDetailsName + '  '
			// 				this.updata.totalPrice = (this.updata.goodsPrice * this.updata.goodsCount)
			// 					.toFixed(2)
			// 			}
			// 		})
			// 	})
			// },
			//选择商品
			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
				} else {
					this.goodDetailsLists.forEach(e => {
						e.isActive = false
					})
					item.isActive = true
					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
					this.updata.img = this.baseurl + item.attributePitureUrl
				}
			},

			// isActivegoods(item, bitem) {
			// 	if (item.attributeName.includes('服务')) {} else {
			// 		if (bitem.isActive == true) {
			// 			item.goodAttributeDetailsLists.forEach(e => {
			// 				e.isActive = false
			// 			})
			// 		} else {
			// 			item.goodAttributeDetailsLists.forEach(e => {
			// 				e.isActive = false
			// 			})
			// 			bitem.isActive = true
			// 		}
			// 	}
			// 	this.updata.goodsPrice = 0
			// 	this.updata.goodsAttributeName = ''
			// 	this.goodsDetailslist.goodDetailsLists.forEach(e => {
			// 		e.goodAttributeDetailsLists.forEach(el => {
			// 			if (el.isActive == true) {
			// 				this.updata.goodsPrice += el.goodsPrice
			// 				this.updata.goodsAttributeName += el.attributeDetailsName + '  '
			// 			}
			// 		})
			// 	})
			// 	this.updata.goodsPrice = this.updata.goodsPrice.toFixed(2)
			// },
			// 查询商品详细信息
			goodsDetailsinfo(goodsInfoId) {
				goodsDetails(goodsInfoId).then(res => {
					res.data[0].goodsPictureUrl = this.baseurl + res.data[0].goodsPictureUrl
					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.isActive = false
						})
						this.goodshow = true
					}
					var obj = {
						image: res.data[0].goodsPictureUrl
					}
					this.info.push(obj)
					this.goodsDetailslist = res.data[0]
					this.updata.goodsName = this.goodsDetailslist.goodsName
					this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
					this.goodDetailsLists = res.data[0].goodDetailsLists
					// res.data[0].goodDetailsLists.forEach(e => {
					// 	e.goodAttributeDetailsLists.forEach(el => {
					// 		el.isActive = false
					// 		el.goodsPrice = Number(el.goodsPrice)
					// 	})
					// })
					// this.goodsDetailslist = res.data[0]
					// this.updata.goodsName = this.goodsDetailslist.goodsName
					// this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
					// this.updata.img = this.goodsDetailslist.goodsPictureUrl
					// this.goodDetailsLists = res.data[0].goodDetailsLists
				})
			},
		},
		onLoad(options) { //获取传值
			this.updata.buySource = options.buySource
			this.usershow = false
			let that = this
			uni.getStorage({
				key: 'patientId',
				success: function(res) {
					that.updata.patientId = res.data
					console.log(that.updata)
				}
			});
			this.goodsPrice = options.goodsPrice //页面价格
			this.baseurl = baseurl;
			this.goodsDetailsinfo(options.goodsInfoId)
		},
	}
</script>

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