moxuan_takeaway_user/pages/index/shop/goodsDet.vue

<template>
	<view class="detail_all pages">
		<!-- banner -->
		<view class="detail-banner">
			<!-- <image :src="goodsDet.goodsPicture" mode=""></image> -->
			<swiper class="swiper" :autoplay="true" interval="2000" duration="500" :circular="true" style="width: 100%; height: 410rpx">
				<swiper-item v-for="(item, index) in goodsDet.goodsPicture" :key="index">
					<image :src="item" mode="aspectFill" style="width: 100%"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 详情 -->
		<view class="info">
			<view class="info-box">
				<view class="info-box-con">
					<view style="color: #ff0303">
						<span style="font-size: 24rpx">¥</span>
						<text style="font-size: 36rpx; font-weight: bold">{{ goodsDet.goodsMoney }}</text>
					</view>
					<view class="info-box-con-cart" v-if="goodsDet.goodsLabel && goodsDet.goodsLabel.length">
						<view v-for="(item, index) in goodsDet.goodsLabel">{{ item }}</view>
					</view>
					<view class="info-box-con-name">
						{{ goodsDet.goodsName }}
					</view>

					<view class="info-box-con-select">
						<view class="info-box-con-select-l">
							<view>
								<span>打包费</span>
								<text>￥{{ goodsDet.packMoney }}/份</text>
							</view>

							<view>已售{{ goodsDet.sales }}</view>
						</view>
						<view class="info-box-con-select-r" @click="skuShow = true">加入购物车</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tabs -->
		<view class="tabs">
			<view class="tabs-box">
				<view class="tabs-box-item" @click="switchTba(index)" v-for="(item, index) in tabs" :key="index">
					{{ item.name }}
					<view v-show="current == index"></view>
				</view>
			</view>
		</view>
		<view v-if="current == 0" style="background-color: #fff9ed">
			<view class="goodsInfo">
				<view class="goodsInfo-box">
					<view class="goodsInfo-box-c">
						<view class="goodsInfo-box-title">产品描述</view>
						<view class="goodsInfo-box-c-item">
							<u-parse :html="goodsDet.goodsDescribe"></u-parse>
						</view>
						<!-- <view class="goodsInfo-box-c-item" v-for="(item,index) in infoList" :key="index">
							<view class="">
								{{item.name}}
							</view>
							<view class="">
								{{item.con}}
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 图片详情 -->
			<view class="imgInfo" v-if="goodsDet.goodsParticularsPicture && goodsDet.goodsParticularsPicture.length">
				<view class="imgInfo-box">
					<view class="imgInfo-box-title">图片详情</view>
					<view class="imgInfo-box-img">
						<image v-for="(item, index) in goodsDet.goodsParticularsPicture" :key="index" :src="item" mode="widthFix"></image>
					</view>
					<!-- <view class="detail_describe" v-if="goodsDet.goodsParticularsPicture.length">
						<view class="detail_describe_ce">
							<view class="detail_describe_text">商品详情图</view>
							<image v-for="(item,index) in goodsDet.goodsParticularsPicture" :key='index' :src="item"
								style="width: 100%;" mode="scaleToFill"></image>
						</view>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 评论 -->
		<view v-if="current == 1">
			<view class="pingjia">
				<view class="pingjia-box">
					<view class="pingjia-box-title">商品评价</view>
					<view class="" style="width: 600rpx" v-if="current == 1">
						<view class="pingjia-box-btn">
							<u-button hover-class="none" @click="sel(0)" shape="circle" size="mini" :plain="false" :custom-style="count == 0 ? customStyle : customStyle1">
								全部评论
							</u-button>
							<u-button hover-class="none" @click="sel(1)" shape="circle" size="mini" :plain="false" :custom-style="count == 1 ? customStyle : customStyle1">
								好评({{ EvaluateData.goodReputation ? EvaluateData.goodReputation : 0 }})
							</u-button>
							<u-button hover-class="none" @click="sel(2)" shape="circle" size="mini" :plain="false" :custom-style="count == 2 ? customStyle : customStyle1">
								中评({{ EvaluateData.mediumReview ? EvaluateData.mediumReview : 0 }})
							</u-button>
							<u-button hover-class="none" @click="sel(3)" shape="circle" size="mini" :plain="false" :custom-style="count == 3 ? customStyle : customStyle1">
								差评({{ EvaluateData.negativeComment ? EvaluateData.negativeComment : 0 }})
							</u-button>
						</view>
						<view class="pingjia-box-item" v-for="(item, index) in EvaluateList" :key="index">
							<view class="flex justify-between align-center">
								<view class="flex align-center">
									<u-avatar :src="item.avatar" size="65"></u-avatar>
									<view class="margin-left-sm" style="line-height: 46upx; font-size: 24rpx">
										{{ item.userName ? item.userName : '匿名' }}
									</view>
									<view class="flex margin-left-sm">
										<u-icon v-for="ite in item.score" :key="ite" color="#FCD202" name="star-fill"></u-icon>
									</view>
								</view>

								<view class="timess">{{ item.createTime }}</view>
							</view>
							<view class="margin-top-sm">{{ item.evaluateMessage }}</view>
							<view class="pinglunImg" v-if="item.pictures != undefined && item.pictures">
								<view class="pinglunImg-box flex justify-between flex-wrap">
									<image
										style="margin-bottom: 20rpx"
										@click="yuanlan(item.pictures == undefined ? [] : item.pictures.split(','), index2)"
										v-for="(item2, index2) in item.pictures == undefined ? [] : item.pictures.split(',')"
										:src="item2"
										mode=""
									></image>
									<image style="margin-bottom: 20rpx; width: 140rpx; height: 0" src="" mode=""></image>
									<image style="margin-bottom: 20rpx; width: 140rpx; height: 0" src="" mode=""></image>
								</view>
							</view>
							<view class="margin-top-sm" v-if="item.shopReplyMessage">
								<view class="flex align-center">
									<view class="flex align-center text-df" style="color: #999999">
										<view class="text-df">商家回复:</view>
										{{ item.shopReplyMessage }}
									</view>
								</view>
							</view>
						</view>
						<empty v-if="!EvaluateList.length"></empty>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="detail">
			<view class="detail_text">{{goodsDet.goodsName}}</view>
			
			<view class="detail_biao" v-if="goodsDet.goodsLabel.length">
				<view class="detail_biao_sty" v-for="(ite, ind) in goodsDet.goodsLabel" :key='ind'>{{ite}}</view>
				
			</view>
			
			
			<text style="font-size: 22upx;color: #999999;" v-if="goodsDet.packMoney&&goodsDet.packMoney>0">打包費：{{goodsDet.packMoney}}元/1份</text>
			
			<view class="margin-top" v-for="(item,index) in attrList" :key="index">
				<view class="text-bold text-black">{{item.value}}</view>
				<view class="flex margin-tb-sm flex-wrap">
					<view v-for="(ite, ind) in item.detail" :key="ind" @click="skuSel(ite,index,ind)"
						class="margin-bottom-sm">
						<view class="btn" :class="item.goodsId == index && item.attrId == ind?'active': ''">
							{{ite.name}}
						</view>
					</view>
				</view>
			</view>
			
			
			
		</view> -->

		<!-- 产品描述 -->
		<!-- <view class="detail_describe">
			<view class="detail_describe_ce">
				<view class="detail_describe_text">产品描述</view>
				<u-parse :html="goodsDet.goodsDescribe"></u-parse>
			</view>
		</view> -->

		<view style="height: 180rpx"></view>
		<!-- 加购 -->
		<view class="settlement" @click="isPopupShow">
			<view class="settlement_img">
				<image src="../../../static/images/index/diancan.png" mode=""></image>
				<view class="settlement_hot">{{ goodsNum }}</view>
			</view>
			<view class="settlement_le">
				<text>￥</text>
				{{ totalPrice }}
			</view>
			<view class="settlement_ri" @click.stop="goConfirm_throttle()">去结算</view>
		</view>
		<!-- 购物车弹窗 -->
		<u-popup v-model="popupShow" mode="bottom" border-radius="20">
			<view style="padding-bottom: 30rpx">
				<view class="flex justify-between align-center" style="height: 90rpx; padding: 0 30rpx; background-color: #b2d5c6">
					<view class="text-bold text-black text-df">已选餐品</view>
					<view class="flex align-center">
						<image src="../../../static/images/index/delete.png" style="width: 28rpx; height: 31rpx" mode=""></image>
						<text class="margin-left-xs" @click="empty">清空购物车</text>
					</view>
				</view>
				<scroll-view scroll-y="true" style="padding: 0 30rpx; background-color: #fff9ed">
					<view v-for="(item, ind) in goodsList.orderGoodsList[0]" :key="ind">
						<view class="flex margin-tb-sm">
							<image mode="aspectFill" :src="item.goodsPicture[0]" style="width: 96rpx; height: 96rpx; border-radius: 10rpx"></image>
							<view class="margin-left-sm" style="display: flex; flex-direction: column; justify-content: space-between">
								<view>{{ item.goodsName }}</view>
								<view v-if="item.skuMessage">{{ item.skuMessage }}</view>
								<view class="text-bold text-sm" style="color: #ff0303">
									¥
									<text class="text-lg">{{ item.goodsPrice }}</text>
								</view>
							</view>

							<view class="flex justify-between align-center" style="margin-left: auto">
								<view class="flex align-center justify-between">
									<view @click.stop="noAdd_throttle(item, ind)">
										<image src="../../../static/images/index/jian.png" style="width: 54rpx; height: 54rpx"></image>
									</view>
									<view class="text-center margin-lr-xs">{{ item.goodsNum }}</view>
									<view @click.stop="add_throttle(item, ind)">
										<image src="../../../static/images/index/add.png" style="width: 50rpx; height: 50rpx"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="settlement1 margin-top-lg">
				<view class="settlement_img">
					<image src="../../../static/images/index/diancan.png" mode="aspectFill"></image>
					<view class="settlement_hot">{{ goodsNum }}</view>
				</view>
				<view class="settlement_le">
					<text>￥</text>
					{{ totalPrice }}
				</view>
				<view class="settlement_ri" @click.stop="goConfirm_throttle()">去结算</view>
			</view>
		</u-popup>

		<!-- 选择规格弹窗 -->
		<u-popup v-model="skuShow" mode="center" :closeable="true" border-radius="20">
			<view style="width: 700rpx">
				<view class="text-center text-lg text-bold padding-tb">{{ goodsDet.goodsName }}</view>
				<view class="margin-top-sm padding-lr" v-for="(item, index) in attrList" :key="index">
					<view class="text-bold text-black">{{ item.value }}</view>
					<view class="flex margin-tb-sm flex-wrap">
						<view v-for="(ite, ind) in item.detail" :key="ind" @click="skuSel(ite, index, ind)" class="margin-bottom-sm">
							<view class="skuBtn" :class="item.goodsId == index && item.attrId == ind ? 'active' : ''">
								{{ ite.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-between padding-lr padding-top">
					<view>
						<view class="text-xl text-bold" style="color: #ff0303">
							<text class="text-sm">￥</text>
							{{ price }}
						</view>
						<view class="detail_describe_text2">{{ checkString }}</view>
					</view>
					<u-number-box v-model="value" :min="1" @change="valChange"></u-number-box>
				</view>
				<view class="detail_account_bottom padding">
					<view class="detail_account_bottom_le" @click="payment()">立即购买</view>
					<view class="detail_account_bottom_ri" @click="orderSel(2)">加入购物车</view>
				</view>
			</view>
		</u-popup>

		<!-- <view class="detail_account">
			<view class="detail_account_top">
				<view class="detail_account_top_le">
					<view class="detail_account_text"><text>￥</text>{{price}}</view>
					<view class="detail_describe_text2">{{checkString}}</view>
				</view>
			</view>
			<view class="detail_account_bottom">
				<view class="detail_account_bottom_le" @click="payment()">立即购买</view>

				<view class="detail_account_bottom_ri" @click="orderSel(2)">加入购物车</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import { throttle } from '@/utils/throttle.js'
import empty from '@/components/empty.vue'
export default {
	components: {
		empty
	},
	data() {
		return {
			customStyle: {
				color: '#000',
				background: '#9ACAB9',
				marginRight: '20rpx',
				border: 0
			},
			customStyle1: {
				color: '#333333',
				background: '#F2F2F2',
				marginRight: '20rpx',
				border: 0
			},
			EvaluateData: {},
			shopDet: {},
			skuShow: false,
			totalPrice: 0,
			goodsNum: 0,
			infoList: [
				{
					name: '原料',
					con: '土豆'
				},
				{
					name: '份量',
					con: '1人份'
				},
				{
					name: '荤素',
					con: '素菜'
				},
				{
					name: '菜系',
					con: '川菜'
				},
				{
					name: '口味',
					con: '咸香'
				},
				{
					name: '辅料',
					con: '姜，辣椒，蒜，葱'
				}
			],
			current: 0,
			tabs: [
				{
					id: 0,
					name: '详情'
				},
				{
					id: 1,
					name: '评价'
				}
			],
			goodsList: {
				orderGoodsList: [[]]
			},
			popupShow: false,
			goodsId: '',
			goodsDet: {},
			skuId: '',
			skuMessage: '',
			skuList: [],
			attrList: [],
			checkString: '',
			checkStateList: [],
			CheckattrValue: false,
			userId: '',
			value: 1,
			shopId: '',
			price: 0,
			echoSkuList: [],
			echoSku: [],
			isEchoSku: {},
			orderType: 2,
			orderId: '',
			evaluatePage: 1,
			evaluateLimit: 10,
			grade: '',
			count: 0,
			EvaluateList: [],
			dataList: [], //店铺商品
			backType: '',
			isClick: true
		}
	},
	onLoad(option) {
		console.log(option)
		this.userId = uni.getStorageSync('userId')
		this.goodsId = option.goodsId
		this.shopId = option.shopId
		this.orderId = option.orderId ? option.orderId : ''
		this.orderType = option.orderType ? option.orderType : 2
		this.backType = option.backType ? option.backType : ''
		uni.showLoading({
			title: '加载中...',
			mask: true // 是否显示透明蒙层，防止触摸穿透
		})
		this.getData()
		this.getShopData()
		this.getEchoOrder()
	},
	onShow() {
		this.userId = uni.getStorageSync('userId')
		this.getOrderList()
	},
	onReachBottom: function () {
		if (this.current == 1) {
			this.evaluatePage = this.evaluatePage + 1
			this.getEvaluateList()
		}
	},
	methods: {
		// 获取店铺信息
		getShopData() {
			let data = {
				shopId: this.shopId
			}
			this.$Request.get('/app/goods/selectGoodsList', data).then((res) => {
				if (res.code == 0 && res.data) {
					this.dataList = res.data.list
				}
				uni.hideLoading()
			})
		},
		goConfirm_throttle: throttle(function () {
			this.goConfirm()
		}, 1000),
		// 去结算
		goConfirm() {
			if (!this.isClick) {
				return
			}
			if (!this.userId) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
				return
			}

			let goodstr1 = 0 //商品库的 必须次数
			let goodstr2 = 0 //购物车的 必须次数
			let regex = new RegExp('必选', 'g')
			if (this.goodsList && this.goodsList.orderGoodsList[0].length > 0) {
				console.log('good12----' + this.dataList)
				let dataList = JSON.stringify(this.dataList)
				if (dataList.match(regex)) {
					goodstr1 = dataList.match(regex).length
					console.log('goodstr1c----' + goodstr1)
					if (dataList.indexOf('必选') != -1) {
						//检测商品是否存在必选

						let goodsList = JSON.stringify(this.goodsList.orderGoodsList)
						if (goodsList.match(regex)) {
							goodstr2 = goodsList.match(regex).length
							console.log('goodstr2----' + goodstr2)

							if (goodstr1 == goodstr2) {
								//检查购物车商品是否存在必须
								uni.navigateTo({
									url: '/pages/index/shop/confirmOrder?shopId=' + this.shopId + '&orderType=' + this.orderType
								})
							} else {
								uni.showToast({
									title: '有' + goodstr1 + '个必选商品，请选择后结算',
									icon: 'none'
								})
								return
							}
						} else {
							uni.showToast({
								title: '有' + goodstr1 + '个必选商品，请选择后结算',
								icon: 'none'
							})
							return
						}
					}
				} else {
					uni.navigateTo({
						url: '/pages/index/shop/confirmOrder?shopId=' + this.shopId + '&orderType=' + this.orderType
					})
				}
			} else {
				uni.showToast({
					title: '请先添加商品',
					icon: 'none'
				})
			}
		},
		// 预览图片
		yuanlan(arr, index) {
			uni.previewImage({
				urls: arr,
				current: index
			})
		},
		switchTba(index) {
			this.current = index
			if (index == 0) {
				this.getData()
			} else {
				this.evaluatePage = 1
				this.getEvaluateList()
			}
		},
		sel(e) {
			this.grade = e
			this.count = e
			this.evaluatePage = 1
			this.getEvaluateList()
		},
		// 获取评论列表
		getEvaluateList() {
			let data = {
				goodsId: this.goodsId,
				shopId: this.shopId,
				page: this.evaluatePage,
				limit: this.evaluateLimit,
				grade: this.grade
			}
			this.$Request.get('/app/goods/selectEvaluateByShopId', data).then((res) => {
				if (res.code == 0 && res.data) {
					this.EvaluateData = res.data
					if (this.evaluatePage == 1) {
						this.EvaluateList = res.data.pageUtils.list
					} else {
						this.EvaluateList = [...this.EvaluateList, ...res.data.pageUtils.list]
					}
				}
			})
		},
		// 展示购物车弹窗
		isPopupShow() {
			console.log(this.goodsList, '677')
			if (this.goodsList && this.goodsList.orderGoodsList && this.goodsList.orderGoodsList[0].length > 0) {
				this.popupShow = true
			} else {
				uni.showToast({
					title: '请先添加商品',
					icon: 'none'
				})
			}
		},
		getEchoOrder() {
			let data = {
				shopId: this.shopId,
				goodsId: this.goodsId
			}
			this.$Request.get('/app/order/echoOrder', data).then((res) => {
				if (res.code == 0 && res.data) {
					this.echoSkuList = res.data
					if (res.data[0].skuMessage) {
						this.echoSku = res.data[0].skuMessage.split(',')
					}
				}
			})
		},
		valChange(e) {
			console.log('当前值为: ' + e.value)
			this.value = e.value
		},
		// 立即购买
		payment() {
			let token = uni.getStorageSync('token')
			if (!token) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
				return
			}
			if (this.attrList.length) {
				if (this.checkString == '' || !this.CheckattrValue) {
					this.$queue.showToast('请选择正确的商品规格')
					return
				}
			}

			let goodstr1 = 0 //商品库的 必须次数
			let goodstr2 = 0 //购物车的 必须次数
			let regex = new RegExp('必选', 'g')
			console.log('good----')
			console.log('good----' + this.dataList, this.goodsDet)
			let dataList = JSON.stringify(this.dataList)
			console.log('good22----' + dataList)
			if (dataList.match(regex)) {
				goodstr1 = dataList.match(regex).length
				console.log('goodstr1n----' + goodstr1)
				if (dataList.indexOf('必选') != -1) {
					//检测商品是否存在必选
					let goodsList = JSON.stringify(this.goodsDet)
					if (goodsList.match(regex)) {
						goodstr2 = goodsList.match(regex).length
						console.log('goodstr2----' + goodstr2)
						if (goodstr1 == goodstr2) {
							//检查购物车商品是否存在必须
							let data = {
								goodsId: this.goodsDet.goodsId,
								skuMessage: this.skuMessage,
								skuId: this.skuId,
								num: this.value,
								orderType: this.orderType,
								shopId: this.shopId
							}
							this.$Request.post('/app/order/buyGoods', data).then((res) => {
								if (res.code == 0) {
									this.skuShow = false
									uni.navigateTo({
										url: '/pages/index/shop/payOrder?orderId=' + res.data + '&orderType=' + this.orderType + '&shopId=' + this.shopId
									})
								} else {
									this.$queue.showToast(res.msg)
								}
							})
						} else {
							uni.showToast({
								title: '有' + goodstr1 + '个必选商品，请选择后结算',
								icon: 'none'
							})
							return
						}
					} else {
						uni.showToast({
							title: '有' + goodstr1 + '个必选商品，请选择后结算',
							icon: 'none'
						})
						return
					}
				}
			} else {
				let data = {
					goodsId: this.goodsDet.goodsId,
					skuMessage: this.skuMessage,
					skuId: this.skuId,
					num: this.value,
					orderType: this.orderType,
					shopId: this.shopId
				}
				this.$Request.post('/app/order/buyGoods', data).then((res) => {
					if (res.code == 0) {
						this.skuShow = false
						uni.navigateTo({
							url: '/pages/index/shop/payOrder?orderId=' + res.data + '&orderType=' + this.orderType + '&shopId=' + this.shopId
						})
					} else {
						this.$queue.showToast(res.msg)
					}
				})
			}

			// let data = {
			// 	goodsId: this.goodsDet.goodsId,
			// 	skuMessage: this.skuMessage,
			// 	skuId: this.skuId,
			// 	num: this.value,
			// 	orderType: this.orderType,
			// 	shopId: this.shopId,
			// }
			// this.$Request.post("/app/order/buyGoods", data).then(res => {
			// 	if (res.code == 0) {

			// 		uni.navigateTo({
			// 			url: '/pages/index/shop/payOrder?orderId=' + res.data + '&orderType=' + this
			// 				.orderType
			// 		})

			// 	} else {
			// 		this.$queue.showToast(res.msg);
			// 	}
			// })
		},
		add_throttle: throttle(function (item, index) {
			this.add(item, index)
		}, 180),
		// 添加数量
		add(item, index) {
			// this.count++;
			console.log(item, index)
			this.goodsList.orderGoodsList[0][index].goodsNum++

			let data = {
				orderGoodsId: this.goodsList.orderGoodsList[0][index].id,
				type: 1,
				num: 1,
				shopId: this.shopId
			}
			this.$Request.get('/app/order/updateGoodsNum', data).then((res) => {
				if (res.code == 0) {
					this.isClick = false
					this.getOrderList()
				} else {
					this.$queue.showToast(res.msg)
					this.goodsList.orderGoodsList[0][index].goodsNum--
				}
			})
		},
		noAdd_throttle: throttle(function (item, index) {
			this.noAdd(item, index)
		}, 180),
		// 减少数量
		noAdd(item, index) {
			console.log(item, index)
			this.goodsList.orderGoodsList[0][index].goodsNum--
			// this.count--;
			let data = {
				orderGoodsId: this.goodsList.orderGoodsList[0][index].id,
				type: 2,
				num: 1,
				shopId: this.shopId
			}
			this.$Request.get('/app/order/updateGoodsNum', data).then((res) => {
				if (res.code == 0) {
					this.isClick = false
					this.getOrderList()
				}
			})
		},
		// 清空购物车
		empty() {
			let data = {
				shopId: this.shopId
			}
			this.$Request.post('/app/order/emptyShoppingTrolley', data).then((res) => {
				if (res.code == 0) {
					this.totalPrice = 0
					this.goodsNum = 0
					this.goodsList = {
						orderGoodsList: [[]]
					}
					this.echoSkuList = []
					this.echoSku = []
					this.getOrderList()
					this.popupShow = false
					this.getEchoOrder()
				}
			})
		},
		// 获取购物车商品列表
		getOrderList() {
			// 显示加载提示
			uni.showLoading({
				title: '加载中', // 加载提示文本
				mask: true // 是否显示透明蒙层，防止触摸穿透
			})
			let data = {
				shopId: this.shopId,
				page: 1,
				limit: 1000,
				status: 1
				// orderType: this.orderType
			}
			this.$Request.get('/app/order/selectAllOrderList', data).then((res) => {
				console.log(res.data, 'rrrrrrrrrrrrrr')
				if (res.code == 0 && res.data.pageUtils.list.length) {
					this.goodsList = res.data.pageUtils.list[0]

					if (this.goodsList && this.goodsList.orderGoodsList && this.goodsList.orderGoodsList[0]) {
						this.totalPrice = res.data.money
						this.goodsNum = 0

						this.goodsList.orderGoodsList[0].forEach((res) => {
							res.goodsPicture = res.goodsPicture.split(',')
							this.goodsNum += res.goodsNum
						})
						if (!this.goodsList.orderGoodsList[0].length) {
							this.popupShow = false
						}
					}
				}
				this.isClick = true
				uni.hideLoading()
			})
		},
		// 加入购物车
		orderSel(e) {
			if (this.value < 1) {
				uni.showToast({
					title: '数量不能小于1',
					icon: 'none'
				})
				return
			}
			if (!this.userId) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
				return
			}
			if (this.attrList.length) {
				if (this.checkString == '' || !this.CheckattrValue) {
					this.$queue.showToast('请选择正确的商品规格')
					return
				}
			}
			// console.log(this.goodsDet)
			// console.log(this.echoSku, 'echoSku')
			// if (this.echoSku.length) {
			// 	this.echoSkuList.forEach(res => {
			// 		if (res.skuMessage == this.skuMessage) {
			// 			this.isEchoSku = res
			// 		}
			// 	})

			// 	if (JSON.stringify(this.isEchoSku) != "{}") {
			// 		let data = {
			// 			orderGoodsId: this.isEchoSku.id,
			// 			type: 1,
			// 			num: this.value,
			// 			shopId: this.shopId,
			// 		}
			// 		this.$Request.get("/app/order/updateGoodsNum", data).then(res => {
			// 			if (res.code == 0) {
			// 				setTimeout(function() {
			// 					uni.navigateBack()
			// 				}, 1000)
			// 			} else {
			// 				this.$queue.showToast(res.msg);
			// 			}
			// 		});
			// 		return
			// 	}
			// }
			if (this.orderId) {
				let data = {
					goodsId: this.goodsDet.goodsId,
					skuMessage: this.skuMessage,
					skuId: this.skuId,
					num: this.value,
					shopId: this.shopId,
					orderId: this.orderId
				}

				this.$Request.post('/app/order/joinOrder', data).then((res) => {
					if (res.code == 0) {
						// this.$queue.showToast('添加成功');
						// if (e == 1) {
						// 	uni.navigateTo({
						// 		url: '/pages/diancan/confirmOrder?shopId=' + this.shopId
						// 	})
						// } else {
						// 	this.skuShow = false
						// 	this.getOrderList()
						// }
						this.$queue.showToast('添加成功')
						this.skuShow = false
						this.getOrderList()
					} else {
						this.$queue.showToast(res.msg)
					}
				})
			} else {
				let data = {
					goodsId: this.goodsDet.goodsId,
					skuMessage: this.skuMessage,
					skuId: this.skuId,
					num: this.value,
					shopId: this.shopId
				}
				this.$Request.post('/app/order/insertOrder', data).then((res) => {
					if (res.code == 0) {
						this.$queue.showToast('添加成功')
						if (e == 1) {
							uni.navigateTo({
								url: '/pages/diancan/payOrder?shopId=' + this.shopId
							})
						} else {
							if (this.backType != '') {
								setTimeout(function () {
									uni.navigateBack()
								}, 1000)
							} else {
								this.skuShow = false
								this.getOrderList()
							}
						}
					} else {
						this.$queue.showToast(res.msg)
					}
				})
			}
		},
		// 选择规格
		skuSel(item, index, ind) {
			this.attrList[index].goodsId = index
			this.attrList[index].attrId = ind
			this.checkStateList[index].name = item.name
			this.checkString = ''
			this.checkStateList.forEach((d) => {
				if (d.name) {
					if (this.checkString) {
						this.checkString = this.checkString + ',' + d.name
					} else {
						this.checkString = d.name
					}
				}
			})
			console.log(this.attrList)
			for (var i = 0; i < this.skuList.length; i++) {
				let d = this.skuList[i]
				if (d.detailJson == this.checkString) {
					console.log(d.detailJson, this.checkString)
					// if (d.stock > 0) {
					this.skuId = d.id
					this.skuMessage = d.detailJson
					this.price = d.skuPrice
					this.CheckattrValue = true
					// } else {
					// 	this.$queue.showToast('库存不足请选择其他规格')
					// }

					break
				} else {
					this.CheckattrValue = false
				}
			}
		},
		// 获取商品详情
		getData() {
			let data = {
				goodsId: this.goodsId
			}
			this.$Request.get('/app/goods/selectGoodsById', data).then((res) => {
				uni.hideLoading()
				if (res.code == 0) {
					this.goodsDet = res.data
					this.goodsDet.goodsLabel = this.goodsDet.goodsLabel ? this.goodsDet.goodsLabel.split(',') : []
					this.goodsDet.goodsPicture = this.goodsDet.goodsPicture ? this.goodsDet.goodsPicture.split(',') : []
					this.goodsDet.goodsParticularsPicture = this.goodsDet.goodsParticularsPicture ? this.goodsDet.goodsParticularsPicture.split(',') : []

					this.price = this.goodsDet.goodsMoney
					this.skuList = this.goodsDet.sku
					if (this.goodsDet.attr.length) {
						this.attrList = this.goodsDet.attr[0] ? this.goodsDet.attr[0].attrValue : []
					} else {
						this.skuId = this.goodsDet.sku[0].id
					}

					this.attrList.forEach((res) => {
						let data = {
							name: ''
						}
						this.checkStateList.push(data)
						let detail = []
						res.detail.split(',').forEach((d) => {
							let data = {
								name: '',
								state: ''
							}
							data.name = d
							detail.push(data)
						})
						res.detail = detail
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.pages {
	width: 100%;
	height: 100vh;
	background-color: #f5f5f5;
}

.timess {
	color: #999999;
	font-size: 24rpx;
	margin-left: 10rpx;
}

.pinglunImg {
	width: 100%;
	margin-top: 10rpx;
}

.pinglunImg-box {
	width: 100%;

	image {
		// margin-left: 10rpx;
		width: 140upx;
		height: 140upx;
		border-radius: 10rpx;
	}
}

// 评价
.pingjia {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	margin-top: 20rpx;
	background-color: #fff9ed;

	// padding-bottom: 50rpx;
	.pingjia-box {
		width: 686rpx;
		height: auto;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.pingjia-box-title {
			// background-color: red;
			width: 600rpx;
			padding-top: 40rpx;
			padding-bottom: 10rpx;
			font-size: 32rpx;
			font-weight: 800;
			columns: #333333;
		}

		.pingjia-box-btn {
			width: 600rpx;
			display: flex;
			margin-top: 30rpx;
			padding-bottom: 50rpx;
		}

		.pingjia-box-item:nth-of-type(1) {
			margin-top: 50rpx;
		}

		.pingjia-box-item {
			width: 600rpx;
			margin-bottom: 50rpx;
		}
	}
}

.skuBtn {
	padding: 10rpx 30rpx;
	border-radius: 10rpx;
	text-align: center;
	margin: 10rpx 20rpx;
	font-size: 28rpx;
	color: #333333;
	border: 2px solid #f2f2f2;
}

.info {
	width: 100%;
	height: 283rpx;
	display: flex;
	justify-content: center;
	margin-top: 30rpx;

	.info-box {
		width: 686rpx;
		height: 100%;
		background-color: #fff9ed;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
	}

	.info-box-con {
		padding: 24rpx 0;
		width: 615rpx;
		height: 100%;

		.info-box-con-name {
			width: 100%;
			margin-top: 16rpx;
			color: #333333;
			font-size: 38rpx;
			font-weight: 800;
		}

		.info-box-con-cart {
			width: 100%;
			height: 38rpx;
			display: flex;
			margin-top: 20rpx;

			view:nth-of-type(1) {
				margin-left: 0;
			}

			view {
				height: 100%;
				background: rgba(129, 189, 179, 0.4);
				border-radius: 4rpx;
				color: #81bdb3;
				margin-left: 10rpx;
				padding: 0 15rpx 0 15rpx;
				font-size: 20rpx;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.info-box-con-select {
			margin-top: 16rpx;
			width: 100%;
			height: 56rpx;
			display: flex;
			justify-content: space-between;

			.info-box-con-select-l {
				display: flex;
				align-items: center;

				view:nth-of-type(1) {
					color: #707070;
				}

				view:nth-of-type(2) {
					color: #988251;
					margin-left: 20rpx;
				}
			}

			.info-box-con-select-r {
				width: 176rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				background: rgba(129, 189, 179, 0.8);
				border: 2rpx solid #81bdb3;
				border-radius: 8rpx;
			}
		}
	}
}

.tabs {
	width: 100%;
	height: 86rpx;
	display: flex;
	justify-content: center;
	margin-top: 44rpx;
	background-color: #fff9ed;
	border-bottom: 2rpx solid #e9e9e9;
	border-radius: 32rpx 32rpx 0 0;

	.tabs-box {
		width: 686rpx;
		height: 100%;
		display: flex;
		align-items: center;

		.tabs-box-item:nth-of-type(1) {
			margin-left: 0;
		}

		.tabs-box-item {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin-left: 100rpx;
			width: 65rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			view {
				width: 55rpx;
				height: 6rpx;
				background-color: #568d84;
				margin-top: 6rpx;
				border-radius: 10rpx;
			}
		}
	}
}

.goodsInfo {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;

	.goodsInfo-box {
		width: 686rpx;
		height: 100%;
		border-radius: 16rpx 16rpx 0 0;
		display: flex;
		justify-content: center;

		.goodsInfo-box-c {
			width: 600rpx;
			height: 100%;
			padding: 40rpx 0 40rpx 0;
		}

		.goodsInfo-box-title {
			// margin-top: 40rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: 800;
		}

		.goodsInfo-box-c-item {
			margin-top: 40rpx;
			display: flex;

			view:nth-of-type(1) {
				font-size: 28rpx;
				color: #999999;
				font-weight: 500;
			}

			view:nth-of-type(2) {
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
				margin-left: 83rpx;
			}
		}
	}
}

.imgInfo {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;

	.imgInfo-box {
		width: 686rpx;
		border-radius: 0 0 16rpx 16rpx;

		.imgInfo-box-title {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
		}

		.imgInfo-box-img {
			margin-top: 20rpx;

			image {
				width: 100%;
				margin-top: -6rpx;
			}
		}
	}
}

.settlement {
	width: 94%;
	line-height: 3.4;
	position: fixed;
	bottom: 10rpx;
	left: 3%;
	display: flex;
	justify-content: space-between;
}

.settlement1 {
	width: 94%;
	background-color: rgba(129, 189, 179, 0.4);
	line-height: 2.8;
	border-radius: 49rpx;
	position: relative;
	/* bottom: 10rpx; */
	left: 0;
	right: 0;
	/* left: 3%; */
	display: flex;
	justify-content: space-between;
	margin: 20rpx auto;
}

.settlement_le {
	width: 552rpx;
	padding-left: 20%;
	color: #000;
	font-size: 30rpx;
	background-image: url(@/static/images/index/1.png);
	background-size: 100% 100%;
}

.settlement_le text {
	font-size: 22rpx;
}

.settlement_ri {
	margin-left: -8rpx;
	width: 180rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #333333;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url(@/static/images/index/2.png);
	background-size: 100% 100%;
}

.settlement_img {
	width: 91rpx;
	height: 96rpx;
	position: absolute;
	// bottom: 30rpx;
	left: 5%;
}

.settlement_img image {
	margin-top: 10rpx;
	width: 74rpx;
	height: 81rpx;
}

.settlement_hot {
	width: 35rpx;
	height: 35rpx;
	line-height: 35rpx;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	top: 5rpx;
	right: 0;
	background-color: #ff130a;
	color: #ffffff;
	font-size: 20rpx;
	font-weight: bold;
	color: #ffffff;
}

.select_all {
	width: 100%;
	position: relative;
}

.btn {
	padding: 10rpx 30rpx;
	/* height: 60rpx; */
	/* background-color: #F2F2F2; */
	border-radius: 10rpx;
	text-align: center;
	/* line-height: 60rpx; */
	margin-right: 20rpx;
	font-size: 28rpx;
	color: #333333;
	border: 2px solid #f2f2f2;
}

.active {
	/* border: 2px solid #FCD202 !important;
		background: #FCD202 !important; */
	background: rgba(129, 189, 179, 0.2) !important;
	border: 2px solid rgba(129, 189, 179, 1) !important;
	opacity: 0.6;
}

.detail_all {
	position: relative;
}

/* banner */
.detail-banner {
	width: 100%;
	height: 400rpx;
}

.detail-banner image {
	width: 100%;
	height: 400rpx;
}

/* 详情 */
.detail {
	width: 100%;
	padding: 3%;
	overflow: hidden;
	position: relative;
	top: -20rpx;
	background-color: #ffffff;
	border-radius: 32rpx 0 0 0;
}

.detail_text {
	font-size: 36rpx;
	font-weight: 800;
	color: #333333;
}

.detail_biao {
	display: flex;
	padding: 2% 0;
}

.detail_biao_sty {
	/* padding: 1% 1.5%; */
	padding: 10rpx 20rpx;
	background: #fcd202;
	opacity: 0.6;
	color: #666666;
	border-radius: 8rpx;
	font-size: 24rpx;
	margin-right: 2%;
}

.detail_text2 {
	font-size: 24rpx;
	font-family: PingFang SC;
	color: #333333;
	margin-top: 1%;
}

.detail_biao2 {
	display: flex;
	padding: 1% 0;
	font-size: 30rpx;
}

.detail_biao2_sty {
	padding: 1% 2.5%;
	/* width: 13%; */
	text-align: center;
	background: rgba(252, 210, 2, 0.2);
	border: 2rpx solid #fcd202;
	opacity: 0.6;
	border-radius: 8rpx;
	margin-right: 2%;
}

.detail_biao2_sty2 {
	padding: 1% 2.5%;
	/* width: 13%; */
	text-align: center;
	border: 2rpx solid #999999;
	opacity: 0.6;
	color: #999999;
	border-radius: 8rpx;
	margin-right: 3%;
}

/* 产品描述 */
.detail_describe {
	width: 100%;
	padding: 3% 0;
	/* margin-bottom: 180rpx; */
	position: relative;
	// top: -40rpx;
	top: 30rpx;
}

.detail_describe_ce {
	width: 100%;
	background-color: #ffffff;
	padding: 3%;
	font-size: 24rpx;
	padding-bottom: 100upx;
}

.detail_describe_text {
	font-size: 30rpx;
	font-weight: 500;
	color: #333333;
	margin-bottom: 20rpx;
}

.detail_describe_text2 {
	font-weight: 500;
	margin-top: 2%;
	color: #999999;
}

/* 加购 */
.detail_account {
	width: 100%;
	background-color: #ffffff;
	padding: 3%;
	margin-top: 2%;
	position: fixed;
	bottom: 0;
	box-shadow: 0 -10rpx 20rpx #cccccc;
}

.detail_account_text {
	font-size: 35rpx;
	font-weight: bold;
	color: #333333;
}

.detail_account_text text {
	font-size: 27rpx;
}

.detail_account_top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.detail_account_top_le {
	width: 80%;
	padding-bottom: 32upx;
	padding-top: 32upx;
}

.detail_account_top_ri {
	width: 20%;
	display: flex;
	margin-top: 2%;
}

.detail_account_top_text {
	padding: 2%;
	line-height: 54rpx;
}

.detail_account_top_ri image {
	width: 54rpx;
	height: 54rpx;
}

.detail_account_bottom {
	margin-top: 20rpx;
	width: 100%;
	display: flex;
	justify-content: space-between;
	/* margin: 4% 0 3%; */
}

.detail_account_bottom_le {
	width: 47.5%;
	/* margin-right: 5%; */
	border-radius: 44rpx;
	text-align: center;
	line-height: 2.8;
	border: 2rpx solid rgba(129, 189, 179, 1);
	background-color: rgba(129, 189, 179, 0.4);
}

.detail_account_bottom_ri {
	width: 47.5%;
	border-radius: 44rpx;
	text-align: center;
	line-height: 2.8;
	background-color: rgba(129, 189, 179, 1);
}
</style>