NurseStationApp/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/huijiantou.png" mode=""></image>
		</view>
		<view class="Discount common">
			<view class="selected">
				优惠
			</view>
			<!-- <view class="content">
				购买最多可获得3积分
			</view>
			<image src="../../static/huijiantou.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/huijiantou.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" style="width: 96%;">
					<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>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
						@scrolltolower="lower" @scroll="scroll">
						<view class="bodys" @tap='upaddress()'>
							<view class="addressinfo">
								<image src="../../static/locatinsmall.png" mode=""></image>
								<view class="namephone" v-if='userid'>
									{{updata.receiver}},{{updata.phone}}
								</view>
								<view class="address" v-if='userid'>
									{{updata.receiveAddress}}
								</view>
								<view class="namephone" v-else>
									前往完善个人信息
								</view>
								<view class="picture2">
									<u-icon name="arrow-right" color="black" size="28"></u-icon>
								</view>
							</view>
						</view>
						<view class="centercontent topcontent" v-show="goodshow">
							<view class="header">
								商品规格
							</view>
							<view class="" style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
								<view v-for="(item,index) in goodDetailsLists"
									:class="item.isActive ? 'Productmodel':'productmodel'" @tap='isActivegoods(item)'>
									<image :src="item.attributePitureUrl" mode=""></image>
									<view class="">
										{{item.attributeDetailsName}}
									</view>
								</view>
							</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="" style="height: 230rpx;">
							<view class="bottomcontent topcontent" style="padding-bottom: 0;">
								<view class="header">
									支付方式
								</view>
								<view class="chat">
									<image src="/static/chat.png" mode=""></image>
									<span>微信支付</span>
								</view>
							</view>
						</view>
					</scroll-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'
	import {
		addStationGoodsOrder,
		appletGoodsOrderPay
	} from '@/api/confirmOrder/index.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
				goodsAttributeId: null, //商品规格id
				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: '',
				},
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				userid: null,
			};
		},
		methods: {
			upper: function(e) {},
			lower: function(e) {},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			//跳转完善页面
			goinformation() {
				this.usershow = false
				uni.navigateTo({
					url: '/pages/information/information'
				})
			},
			//立即购买跳转确认订单页面
			tapbuy() {},
			//选择商品
			isActivegoods(item) {
				if (item.isActive == true) {
					// this.updata.goodsPrice = 0
					// this.updata.goodsAttributeName = ''
					// 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.goodsAttributeId = item.goodsAttributeId
					this.updata.img = item.attributePitureUrl
					this.updata.goodsAttributeName = item.attributeDetailsName
					this.updata.goodsPrice = item.goodsPrice
					this.updata.goodsPrice = this.updata.goodsPrice.toFixed(2)
					this.goodsPrice = this.updata.goodsPrice
					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 => {
					uni.removeStorageSync('Refresh');
					if (res.data.goodsRemark) {
						res.data.goodsRemark = res.data.goodsRemark.replace(/\<img/gi,
							"<br/> <img class='richPic'")
					}
					res.data.goodsPictureUrl = this.baseurl + res.data.goodsPictureUrl
					this.image = res.data.goodsPictureUrl
					var obj = {
						image: res.data.goodsPictureUrl,
					}
					this.info.push(obj)
					if (res.data.goodAttributeDetailsLists == null) {
						this.goodshow = false
					} else if (res.data.goodAttributeDetailsLists.length == 0) {
						this.goodshow = false
					} else {
						res.data.goodAttributeDetailsLists.forEach(e => {
							e.attributePitureUrl = this.baseurl + e.attributePitureUrl
							e.isActive = false
							var objs = {
								image: e.attributePitureUrl,
							}
							this.info.push(objs)
						})
						this.goodDetailsLists = res.data.goodAttributeDetailsLists
						this.goodshow = true
					}
					this.goodsDetailslist = res.data
					this.updata.goodsName = this.goodsDetailslist.goodsName
					this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
					if (this.goodDetailsLists.length == 1) {
						this.goodDetailsLists[0].isActive = true
						this.updata.img = this.goodDetailsLists[0].attributePitureUrl
						this.updata.goodsAttributeName = this.goodDetailsLists[0].attributeDetailsName
						this.updata.goodsPrice = this.goodDetailsLists[0].goodsPrice
						this.updata.goodsPrice = this.updata.goodsPrice.toFixed(2)
						this.updata.attributeDetailsId = this.goodDetailsLists[0].attributeDetailsId
						this.updata.goodsStock = this.goodDetailsLists[0].goodsStock
						this.updata.goodsAttributeId = this.goodDetailsLists[0].goodsAttributeId
						this.updata.goodsAttributeDetailsId = this.goodDetailsLists[0].attributeDetailsId
					} else {
						var list = {}
						this.goodsDetailslist.goodAttributeDetailsLists.forEach(e => {
							if (e.goodsAttributeId == this.goodsAttributeId) {
								list = e
								e.isActive = true
								this.updata.goodsAttributeId = e.goodsAttributeId
								this.updata.goodsAttributeDetailsId = e.attributeDetailsId
							}
						})
						this.updata.img = list.attributePitureUrl
						this.updata.goodsAttributeName = list.attributeDetailsName
						this.updata.goodsPrice = list.goodsPrice
						this.updata.attributeDetailsId = list.attributeDetailsId
						this.updata.goodsStock = list.goodsStock
						this.updata.img = list.attributePitureUrl
					}
					// this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
					// this.updata.img = res.data.goodsPictureUrl
					// this.updata.goodsAttributeName = ''
					// this.updata.goodsPrice = 0
					// this.updata.attributeDetailsId = ''
					// this.updata.goodsStock = 0
					// this.updata.img = list.image
				})
			},
			//跳转到全部收货地址
			upaddress() {
				if (this.updata.receiver) {
					uni.navigateTo({
						url: `/pages/modifyAddress/modifyAddress?updata=${JSON.stringify(this.updata)}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/information/information'
					})
				}
			},
			// 收件人
			goodsList() {
				goodPatientInfo(this.updata.patientId).then(res => {
					// res.data.forEach(e => {
					// 	e.address = e.provinceName + e.cityName + e.regionName + e.streetName + e
					// 		.receiveAddress
					// })
					var list = res.data.filter(e => e.defaultAddressFlag == 1)
					if (list.length >= 1) {
						this.updata.receiver = list[0].receiveName
						this.updata.receiveAddress = list[0].areaName + list[0].receiveAddress
						this.updata.phone = list[0].receivePhone
						this.userid = list[0].id
					} else {
						this.updata.receiver = res.data[0].receiveName
						this.updata.receiveAddress = res.data[0].areaName + res.data[0].receiveAddress
						this.updata.phone = res.data[0].receivePhone
						this.userid = res.data[0].id
					}
				})
			},
		},
		onLoad(options) { //获取传值
			var that = this
			this.goodsPrice = options.goodsPrice //页面价格
			this.goodsAttributeId = options.goodsAttributeId
			this.updata.buySource = options.buySource
			this.goodsInfoId = options.goodsInfoId
			const value = uni.getStorageSync('patientId');
			if (value) {
				that.updata.patientId = value
				that.goodsList()
			} else {}
		},
		onShow() {
			var that = this
			this.baseurl = baseurl
			this.usershow = false
			this.goodsDetailsinfo(this.goodsInfoId)
			goodPatientInfo(this.updata.patientId).then(res => {
				var user = res.data.filter(e => e.id == this.userid)
				if (user.length >= 1) {
					// user[0].address = user[0].provinceName + user[0].cityName + user[0].regionName + user[0]
					// 	.streetName + user[0].receiveAddress
					this.updata.receiver = user[0].receiveName
					this.updata.receiveAddress = user[0].areaName + user[0].receiveAddress
					this.updata.phone = user[0].receivePhone
					this.userid = user[0].id
				} else {
					// 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.receiveAddress = res.data[0].areaName + res.data[0].receiveAddress
					this.updata.phone = res.data[0].receivePhone
					this.userid = res.data[0].id
				}
			})
			let useritem = null
			uni.$on('updata', function(data) {
				that.updata = JSON.parse(data.updata)
				if (data.useritem) {
					useritem = JSON.parse(data.useritem)
					that.updata.receiver = useritem.receiveName
					that.updata.phone = useritem.receivePhone
					// that.updata.receiveAddress = useritem.address
					that.updata.receiveAddress = useritem.areaName + useritem.receiveAddress
					that.userid = useritem.id
				}
			})
		},
	}
</script>

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