NurseStationApp/pages/CommodityDetails/CommodityDetails.vue

<template>
	<view class="app">
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" @clickItem='clickItem'
			style='background-color: #fff;height:750rpx'>
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex" style="height:100%">
				<!-- <swiper-item v-for="(item ,index) in info" :key="index">
				</swiper-item> -->
				<swiper-item>
					<image style='width:100%;height:750rpx' :src="baseurl+goodsDetailslist.goodsPictureUrl" mode="">
					</image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<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="baseurl+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="baseurl+goodsDetailslist.goodsPictureUrl" mode=""></image>
					</view>
					<view class="title">
						<span>{{goodsDetailslist.goodsName}}</span>
					</view>
					<view class="price">
						￥{{updata.goodsPrice}}
					</view>
				</view>
				<view class="centercontent topcontent">
					<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="999" v-model="updata.goodsCount"></u-number-box>
					</view>
				</view>
				<view class="buy" @tap="tapbuy">
					立即购买
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		goodsDetails
	} from '@/api/CommodityDetails/CommodityDetails.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				baseurl: '', //url
				goodsPrice: '', //页面价格
				goodsDetailslist: [], //商品list
				goodDetailsLists: [], //提前预备商品规格数组
				buyshow: false, //立即购买遮罩层开关
				info: [{}],
				current: 0, //轮播初始下标
				mode: 'dot', //轮播点样式
				swiperDotIndex: 0, //轮播可视图
				number: 1, //数量
				updata: { //订单
					goodsPrice: 0.00,
					goodsName: "",
					goodsAttributeName: '',
					goodsCount: 1,
					nurseStationId: '',
					img: '',
					totalprice: null,
				}
			};
		},
		methods: {
			//立即购买跳转确认订单页面
			tapbuy() {
				this.updata.totalprice = (this.updata.goodsPrice * this.updata.goodsCount).toFixed(2)
				console.log(this.updata)
			},
			// 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
					})
				} 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)
				}
			},

			// 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].goodDetailsLists.forEach(e => {
						e.isActive = false
					})
					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
					// 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
				})
			},
			//滑动轮播切换
			change(e) {
				this.current = e.detail.current;
			},
			//点击轮播点切换
			clickItem(e) {
				this.swiperDotIndex = e
			},
		},
		onLoad(options) { //获取传值
			this.goodsPrice = options.goodsPrice //页面价格
			this.baseurl = baseurl;
			this.goodsDetailsinfo(options.goodsInfoId)
		},
	}
</script>

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