tcwm-uniapp-user/pages/index/shop/goodsDet.vue

1568 lines
37 KiB
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: [],
dataList:[],//店铺商品
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.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() {
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) {
let dataList = JSON.stringify(this.dataList)
if (dataList.match(regex)) {
goodstr1 = dataList.match(regex).length
console.log("goodstr1----" + 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');
let dataList = JSON.stringify(this.dataList)
if (dataList.match(regex)) {
goodstr1 = dataList.match(regex).length
console.log("goodstr1----" + 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
})
} 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
})
} 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(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>