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="scaleToFill" style="width: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 详情 -->
		<view class="info">
			<view class="info-box">
				<view class="info-box-con">
					<view class="info-box-con-name">
						{{goodsDet.goodsName}}
					</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>
						<view>本店销量第一</view> -->
					</view>
					<view class="info-box-con-num">
						已售{{goodsDet.sales}}
					</view>
					<view class="info-box-con-select">
						<view class="info-box-con-select-l">
							<view>
								<span>¥</span>
								<text>{{goodsDet.goodsMoney}}</text>
							</view>
							<view>
								<span>打包费</span>
								<text>￥{{goodsDet.packMoney}}/份</text>
							</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">
			<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)" type="primary" shape="circle" size="mini"
								:plain="false" :custom-style="count==0?customStyle:customStyle1">全部评论</u-button>
							<u-button hover-class='none' @click="sel(1)" type="primary" 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)" type="primary" 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)" type="primary" 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()">去结算</view>
		</view>
		<!-- 购物车弹窗 -->
		<u-popup v-model="popupShow" mode="bottom" border-radius="20">
			<view class="padding">
				<view class="flex justify-between align-center margin-bottom-sm">
					<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' class="popup">
					<view v-for="(item,ind) in goodsList.orderGoodsList[0]" :key='ind'>
						<view class="flex align-center margin-tb-sm">
							<image :src="item.goodsPicture[0]"
								style="width: 96rpx;height: 96rpx;border-radius: 10rpx;">
							</image>
							<view class="margin-left-sm">
								<view>{{item.goodsName}}</view>
								<view v-if="item.skuMessage">{{item.skuMessage}}</view>
							</view>
						</view>
						<view class="flex justify-between align-center">
							<view class="text-bold text-sm">¥<text class="text-lg">{{item.goodsPrice}}</text>
							</view>
							<view class="flex align-center justify-between">
								<view @click.stop="noAdd(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(item,ind)">
									<image src="../../../static/images/index/add.png"
										style="width: 50rpx;height: 50rpx;"></image>
								</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=""></image>
					<view class="settlement_hot">{{goodsNum}}</view>
				</view>
				<view class="settlement_le">
					<text>￥</text>{{totalPrice}}
				</view>
				<view class="settlement_ri" @click.stop="goConfirm()">去结算</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 text-black"><text class="text-sm">￥</text>{{price}}
						</view>
						<view class="detail_describe_text2">{{checkString}}</view>
					</view>
					<u-number-box :disabled-input="true" 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 empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				customStyle: {
					color: '#FFA200',
					background: '#FFFBE5',
					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:[],
				backType:'',
			}
		},
		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: '加载中...'
			})
			this.getData()
			this.getEchoOrder()
		},
		onShow() {
			this.userId = uni.getStorageSync('userId')
			this.getOrderList();
		},
		onReachBottom: function() {
			if (this.current == 1) {
				this.evaluatePage = this.evaluatePage + 1;
				this.getEvaluateList()
			}
		},
		methods: {
			// 去结算
			goConfirm() {
				if (!this.userId) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				console.log(this.goodsList)
				if (this.goodsList && this.goodsList.orderGoodsList[0].length > 0) {
					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
						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 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(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.getOrderList()
					} else {
						this.$queue.showToast(res.msg);
						this.goodsList.orderGoodsList[0][index].goodsNum--
					}
				});
			},
			// 减少数量
			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.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() {
				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
							}
						}
					}
					uni.hideLoading()
				});
			},
			// 加入购物车
			orderSel(e) {
				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() {
				this.$Request.get("/app/goods/selectGoodsById?goodsId=" + this.goodsId).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;
		// padding-bottom: 50rpx;
		.pingjia-box{
			width: 686rpx;
			height: auto;
			background-color: #FFFFFF;
			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: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;

		}

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

			.info-box-con-name {
				width: 100%;
				margin-top: 30rpx;
				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(252, 210, 2, 0.2);
					border-radius: 4rpx;
					color: #FCB202;
					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-num {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
				margin-top: 20rpx;
			}

			.info-box-con-select {
				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: #FF3D33;
						font-weight: bold;

						span {
							font-size: 24rpx;
						}

						text {
							font-size: 38rpx;
						}
					}

					view:nth-of-type(2) {
						color: #999999;
						font-weight: 500;
						font-size: 24rpx;
						margin-left: 20rpx;

						text {
							margin-left: 10rpx;
						}
					}
				}

				.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: #FCD202;
					border: 2rpx solid #FCD202;
					border-radius: 8rpx;
				}
			}
		}
	}

	.tabs {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 44rpx;

		.tabs-box {
			width: 686rpx;
			height: 100%;
			display: flex;
			.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: 10rpx;
					background-color: #FCD202;
					margin-top: 9rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
	.goodsInfo{
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		.goodsInfo-box{
			width: 686rpx;
			height: 100%;
			background: #FFFFFF;
			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;
			background-color: #FFFFFF;
			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%;
		background-color: #000000;
		line-height: 3.4;
		border-radius: 49rpx;
		position: fixed;
		bottom: 10rpx;
		left: 3%;
		display: flex;
		justify-content: space-between;
	}
	
	.settlement1 {
		width: 94%;
		background-color: #000000;
		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: 45%;
		padding-left: 20%;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	
	.settlement_le text {
		font-size: 22rpx;
	}
	
	.settlement_ri {
		width: 35%;
		background-color: #FCD202;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top-right-radius: 49rpx;
		border-bottom-right-radius: 49rpx;
	}
	
	.settlement_img {
		width: 91rpx;
		height: 96rpx;
		position: absolute;
		// bottom: 30rpx;
		left: 5%;
	}
	
	.settlement_img image {
		width: 74rpx;
		height: 81rpx;
	}
	
	.settlement_hot {
		width: 35rpx;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		top: -10rpx;
		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(252, 210, 2, 0.2) !important;
		border: 2px solid #FCD202 !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 #FCD202;
	}

	.detail_account_bottom_ri {
		width: 47.5%;
		border-radius: 44rpx;
		text-align: center;
		line-height: 2.8;
		background-color: #FCD202;
	}
</style>