227 lines
7.7 KiB
Plaintext
227 lines
7.7 KiB
Plaintext
<template>
|
|
<view>
|
|
<swiper class="w-750 h-478 bgf5f7ff br-20 relative one_overflow"
|
|
:interval="5000"
|
|
:autoplay="true">
|
|
<swiper-item v-for="(item,index) in shopDet.images" :key="index ">
|
|
<image :src="URL + item" class="w-750 h-500" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="p-all-20 bgff">
|
|
<view class="rowsb rowsm">
|
|
<view class="fs-40 fw-600"><text class="fs-26">￥</text>{{ shopDet.price || '120' }}</view>
|
|
<view class="fs-24 col999">销量:{{ shopDet.sales_volume || '599' }}</view>
|
|
</view>
|
|
<view class="fs-30 col333 pt-16 pb-18 two_overflow">{{ shopDet.name || '欧诗漫珍珠源沁白珍珠源沁白亮肤水' }}</view>
|
|
<view class="rows fs-24">
|
|
<view class="br-4" style="background: #ffeceb;padding: 6rpx 24rpx; color: #FA3326;">包邮</view>
|
|
</view>
|
|
</view>
|
|
<view class="mt-20 bgff w-710 ml-20 br-20">
|
|
<view class="rowsb rowsm h-100 pl-30 pr-30 fs-28">
|
|
<view class="col000 fw-600">商品评价</view>
|
|
<view @tap="goNext('allComment')" class="rows rowsm fs-22 col999">
|
|
<text>查看全部</text>
|
|
<uni-icons type="right" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view v-if="comment && comment[0]">
|
|
<view class="pb-16" v-for="(item,index) in comment" :key="index">
|
|
<view class="rows rowsm pl-20 pr-20 pt-24 pb-16">
|
|
<image src="/static/wd_gr.png" class="h-68 w-68"></image>
|
|
<view class="fs-28 pl-20">王唤七</view>
|
|
</view>
|
|
<view class="pl-20 pr-20 fs-26 col333">我是评价信息，我是评价信息，我是评价信息，我是评价信息，我是评价信息，我是评价信息，我是评价信息。</view>
|
|
</view>
|
|
</view>
|
|
<view class="pt-130 pb-130 bgff tct fs-26 col999">暂无相关评论信息</view>
|
|
</view>
|
|
<view class="h-94 rowsc rowsm">
|
|
<view class="h-4 w-184 bgee"></view>
|
|
<text class="pl-20 pr-20 fs-26 col999">产品详情</text>
|
|
<view class="h-4 w-184 bgee"></view>
|
|
</view>
|
|
<image :src="URL + item" v-for="(item,index) in shopDet.detail_drawing_images" :key="index" class="w-750 " mode="widthFix"></image>
|
|
|
|
<view class="h-154 w-750"></view>
|
|
<view class="h-134 w-750 p-all-20 rowsb rowsm tct bgff fixed" style="bottom: 0;">
|
|
<view class="rows pl-20">
|
|
<view class="mr-50 tct">
|
|
<image src="/static/shoduyhgshd.png" class="w-38 h-38"></image>
|
|
<view class="fs-22 col666">首页</view>
|
|
</view>
|
|
<view @tap="goShoppingCat()" class="tct">
|
|
<image src="/static/shjouycjbsjdf.png" class="w-38 h-38"></image>
|
|
<view class="fs-22 col666">收藏</view>
|
|
</view>
|
|
</view>
|
|
<view class="rows rowsm fs-28">
|
|
<view @tap="openPop(0)" class="w-238 h-94 lh-90 " style="border-radius: 48rpx 0 0 48rpx; border: 2rpx solid #fc473f; color: #FA3326;">加入购物车</view>
|
|
<view @tap="openPop(1)" class="w-238 h-94 lh-94 colfff bg" style="border-radius: 0 48rpx 48rpx 0;">立即购买</view>
|
|
</view>
|
|
</view>
|
|
|
|
<uni-popup type="bottom" ref="spec" :custom="true">
|
|
<view class="bgff p-all-24 relative" style="border-radius: 30rpx 30rpx 0 0;">
|
|
<image @tap="closePop" src="/static/guanbi.png" class="w-34 h-34 absolute" style="right: 20rpx; top: 20rpx;"></image>
|
|
<view class="rows rowsm pb-30">
|
|
<image :src="URL + shopDet.image" class="w-160 h-160 bgf1 br-20"></image>
|
|
<view class=" fs-28 pl-20 h-160 rowsbl w-435">
|
|
<view class="">{{ onSpec.name || '欧诗漫珍珠源沁白珍珠源沁白亮肤水' }}</view>
|
|
<view class="col_FF0000">￥<text class="fs-36">{{ onSpec.price }}</text></view>
|
|
</view>
|
|
</view>
|
|
<view class="" v-for="(item,index) in specInfo" :key="index">
|
|
<view class="fs-32 col000 fw-600 pb-16">{{ item.name }}</view>
|
|
<view class="rows rowsw pb-10">
|
|
<view
|
|
@tap="swtichSpec(index, val.id)" :class="{'active': activeIndexArr[index]==val.id}"
|
|
class="w-152 h-66 tct lh-62 mb-20 col999 br-20 mr-20" style="border: 2rpx solid #999;"
|
|
v-for="(val,ind) in item.sku_items" :key="ind">
|
|
{{ val.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rowsb rowsm pb-30 fs-26">
|
|
<view>数量</view>
|
|
<lxc-count-style @handleCount="numberChnge" :value="1" :min="1"></lxc-count-style>
|
|
</view>
|
|
<view class="rowsb rowsm fs-30 fw-600 tct pt-20" style="border-top: 2rpx solid #f1f1f1;">
|
|
<view v-if="shopModel == 0" @tap="ifModel()" class="w-690 h-98 lh-98 colfff" style="border-radius: 48rpx; background: #fc453d;">加入购物车</view>
|
|
<view v-else-if="shopModel == 1" @tap="ifModel()" class="w-690 h-98 lh-98 colfff" style="border-radius: 48rpx; background: #fc453d;">立即购买</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const app = getApp().globalData
|
|
export default {
|
|
data() {
|
|
return {
|
|
onIndex: 0,
|
|
selectIndex: 0,
|
|
onId: null, //商品ID
|
|
shopDet: {
|
|
spec: {
|
|
item: [{
|
|
stock: ''
|
|
}]
|
|
},
|
|
}, //商品详情
|
|
number: 1, //下单数量
|
|
comment: [], //商品评论
|
|
shopModel: 0, //下单类型 0=加入购物车 1=直接下单
|
|
mobile: '',
|
|
type: -1,
|
|
activeIndexArr: [],
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.type = option.type
|
|
this.onId = option.id
|
|
this.getShopDet()
|
|
this.getComment()
|
|
},
|
|
computed: {
|
|
onSpec() {
|
|
let key = this.activeIndexArr.join('_')
|
|
if (key) {
|
|
return this.shopDet.spec.products[key]
|
|
}
|
|
return {}
|
|
},
|
|
specInfo() {
|
|
let goods = this.shopDet.spec
|
|
if (goods && goods.item) return goods.item
|
|
else return {}
|
|
},
|
|
isStock() { //判断是否有货
|
|
return this.specInfo.stock > 0
|
|
}
|
|
},
|
|
methods: {
|
|
swtichSpec(index,id) { //切换规格
|
|
this.$set(this.activeIndexArr, index, id)
|
|
},
|
|
numberChnge(value, index) { //修改下单数量
|
|
this.number = value
|
|
},
|
|
openPop(type) { //打开下单弹窗
|
|
this.shopModel = type
|
|
this.$refs.spec.open('bottom')
|
|
},
|
|
closePop() { //打开下单弹窗
|
|
this.$refs.spec.close('bottom')
|
|
},
|
|
ifModel() { //判断是加入购物车还是下单
|
|
this.$refs.spec.close()
|
|
if (this.shopModel === 0) {
|
|
this.getShopCatPush()
|
|
} else {
|
|
this.goConfirmOrder()
|
|
}
|
|
},
|
|
//加入购物车
|
|
getShopCatPush() {
|
|
this.$tools.axiosFromToken('POST', 'shop_cart/addCart', {
|
|
count: this.number,
|
|
skuId: this.onSpec.id
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.$refs.spec.close()
|
|
this.$tools.showtt('加入购物车成功')
|
|
} else this.$tools.showtt(res.msg)
|
|
})
|
|
},
|
|
goConfirmOrder() { //确认订单
|
|
app.orderShop = this.shopDet
|
|
app.specInfo = this.onSpec
|
|
this.goNext(`confirmOrder?type=${this.type}&num=${this.number}`)
|
|
|
|
},
|
|
//页面跳转
|
|
goShoppingCat() { //购物车
|
|
this.$tools.goNext('/pages/me/pagesOne/cart/cart')
|
|
},
|
|
goCommentTap() { //全部评论
|
|
this.$tools.goNext(`/pagesOne/index/seckill/seckillComment/seckillComment?id=${this.onId}`)
|
|
},
|
|
// 网络请求
|
|
getShopDet() { //商品详情
|
|
this.$tools.axiosFromToken('POST', 'platform_mall/getDetails', {
|
|
id: this.onId
|
|
}, '加载中').then(res => {
|
|
this.shopDet = res.data || {}
|
|
this.activeIndexArr = new Array(res.data.spec.item.length)
|
|
res.data.spec.item.forEach((val,ind) => {
|
|
if (val.sku_items && val.sku_items[0]) {
|
|
this.activeIndexArr[ind] = val.sku_items[0].id
|
|
}
|
|
})
|
|
})
|
|
},
|
|
getComment() { //评论
|
|
this.$tools.axiosFromToken('POST', 'product/getGoodEvaluate', {
|
|
good_id: this.onId,
|
|
user_token: app.token
|
|
}, '加载中').then(res => {
|
|
this.comment = res.data
|
|
console.log(this.comment)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f7f6fa;
|
|
}
|
|
.active {
|
|
background: #fff7f0;
|
|
color: #FF7000;
|
|
border: 2rpx solid #FF7000 !important;
|
|
}
|
|
</style> |