311 lines
8.1 KiB
Vue
311 lines
8.1 KiB
Vue
<template> <!-- 商品详情 -->
|
|
<view class="wrap">
|
|
<!-- 吸顶 -->
|
|
<u-sticky offset-top="0" customNavHeight="0">
|
|
<uititle :title="info.name"></uititle>
|
|
</u-sticky>
|
|
<!-- 轮播图 -->
|
|
<view class="layout layout-swiper" style="height: 750rpx">
|
|
<u-swiper
|
|
:list="info.album"
|
|
keyName="image"
|
|
:autoplay="true"
|
|
circular
|
|
height="750rpx"
|
|
></u-swiper>
|
|
</view>
|
|
<!-- 信息 -->
|
|
<view class="layout layout-detail bg-white">
|
|
<view class="price flex justify-between align-center">
|
|
<view class="price-left">
|
|
<text class="mr-10">零售价: </text>
|
|
<text class="current">¥{{ info.amount }}</text>
|
|
</view>
|
|
<text>已售: {{ info.sales }}</text>
|
|
</view>
|
|
<view class="title">
|
|
{{ info.name }}
|
|
</view>
|
|
<view class="mt-20 flex justify-start items-center text-25">
|
|
<template v-if="info.express">
|
|
<transporter theme="outline" size="16" fill="#9b9b9b" strokeLinecap="square"/>
|
|
<text class="ml-10">快递:{{ info.express }}</text>
|
|
</template>
|
|
<text v-if="info.deliverDate" class="ml-35">{{ info.deliverDate }}</text>
|
|
<text v-if="info.expressAmount !== undefined && info.expressAmount !== null" class="ml-35">
|
|
运费:{{ info.expressAmount === 0 ? '免运费' : info.expressAmount }}
|
|
</text>
|
|
</view>
|
|
<view class="mt-20 flex justify-start items-center text-25" v-if="info.ensureService">
|
|
<like theme="outline" size="16" fill="#9b9b9b" strokeLinecap="square"/>
|
|
<text class="ml-10">{{ info.ensureService }}</text>
|
|
</view>
|
|
<view class="text-25 mt-20 text-gray">{{ info.desc }}</view>
|
|
</view>
|
|
<view class="layout layout-parse bg-white" v-if="info.video">
|
|
<view class="parse-title">视频介绍</view>
|
|
<video :src="info.video" controls style="width: 100%; height: 400rpx" autoplay=""></video>
|
|
</view>
|
|
<!-- 详情 -->
|
|
<view class="layout layout-parse bg-white">
|
|
<view class="parse-title">商品介绍</view>
|
|
<u-parse :content="info.content"></u-parse>
|
|
</view>
|
|
<!-- 底部 -->
|
|
<view class="fiexd-bottom flex justify-between align-center">
|
|
<view class="home flex direction-column align-center" @click="homeLink">
|
|
<view class="icon">
|
|
<image class="full" src="/static/img/home.png" mode=""></image>
|
|
</view>
|
|
<view class="text">首页</view>
|
|
</view>
|
|
<view class="home flex direction-column align-center ml-20 pos-r" @click="$jump('/pages/shop/cart')">
|
|
<view class="icon">
|
|
<u-icon name="shopping-cart" size="24" color="#A92924"></u-icon>
|
|
</view>
|
|
<text class="cartNum" v-if="cartNum > 0">{{ cartNum }}</text>
|
|
<view class="text">购物车</view>
|
|
</view>
|
|
<view class="home flex direction-column align-center ml-20" @click="call">
|
|
<view class="icon">
|
|
<image class="full" src="/static/img/service.png" mode=""></image>
|
|
</view>
|
|
<view class="text">客服</view>
|
|
</view>
|
|
<view class="flex-1"></view>
|
|
<view class="shop-btn" @click="show = true">加入购物车</view>
|
|
<view class="shop-btn full-btn m-left-30" @click="show = true">立即购买</view>
|
|
</view>
|
|
<u-popup :show="show" mode="bottom" round="15" closeable @close="show = false">
|
|
<view class="p-50">
|
|
<view class="flex justify-start items-start">
|
|
<u-image
|
|
:src="info.sku.find(item => item._index === selectedSku) ? info.sku.find(item => item._index === selectedSku).image : info.cover"
|
|
width="200rpx" height="200rpx" radius="10rpx"></u-image>
|
|
<view class="ml-20 font-bold flex justify-start items-start flex-col">
|
|
<text>{{ info.name }}</text>
|
|
<text class="text-main">￥{{ info.sku.find(item => item._index === selectedSku).values }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-start items-start mt-20 flex-wrap">
|
|
<view v-for="(item, index) in info.sku" :key="index" class="mr-15 mb-15">
|
|
<u-tag type="primary" :plain="selectedSku !== item._index" :text="item.label"
|
|
@click="selectedSku = item._index"/>
|
|
</view>
|
|
</view>
|
|
<view class="font-bold my-20">数量</view>
|
|
<u-number-box v-model="num" class="pb-20"/>
|
|
<view class="flex justify-center items-center pt-20 border-top">
|
|
<view class="shop-btn" @click="addToCart">加入购物车</view>
|
|
<view class="shop-btn full-btn m-left-30" @click="newOrder">立即购买</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uititle from '@/components/common/title'
|
|
import cmsearch from '@/components/common/search'
|
|
import cmempty from '@/components/common/empty'
|
|
import {Transporter, Like} from '@icon-park/vue'
|
|
|
|
export default {
|
|
components: {
|
|
uititle,
|
|
cmsearch,
|
|
cmempty,
|
|
Transporter,
|
|
Like,
|
|
},
|
|
data() {
|
|
return {
|
|
id: null,
|
|
info: {
|
|
name: ''
|
|
},
|
|
num: 1,
|
|
selectedSku: null,
|
|
show: false,
|
|
cartNum: 0,
|
|
};
|
|
},
|
|
methods: {
|
|
homeLink() {
|
|
vk.navigateTo('pages/index/index')
|
|
},
|
|
async getInfo(id) {
|
|
this.info = await vk.callFunction({
|
|
url: 'client/goods/list/pub/getDetail',
|
|
data: {id}
|
|
})
|
|
if (this.info.sku && this.info.sku.length > 0) {
|
|
this.info.sku.map((sku, index) => {
|
|
this.$set(this.info.sku[index], 'num', 1)
|
|
return sku
|
|
})
|
|
this.selectedSku = this.info.sku[0]._index
|
|
}
|
|
},
|
|
addToCart() {
|
|
this.show = false
|
|
vk.callFunction({
|
|
url: 'client/cart/kh/add',
|
|
data: {
|
|
goodsId: this.id,
|
|
skuId: this.selectedSku,
|
|
num: this.num,
|
|
},
|
|
success: (res) => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '添加成功'
|
|
})
|
|
this.getCartNum()
|
|
}
|
|
})
|
|
},
|
|
async newOrder() {
|
|
this.show = false
|
|
const {data} = await vk.callFunction({
|
|
url: 'client/order/kh/add',
|
|
title: '请求中...',
|
|
data: {
|
|
goodsId: this.id,
|
|
skuId: this.selectedSku,
|
|
num: this.num,
|
|
type: 0
|
|
}
|
|
})
|
|
vk.navigateTo({
|
|
url: `/pages/shop/pay?id=${data}`
|
|
})
|
|
},
|
|
getCartNum() {
|
|
vk.callFunction({
|
|
url: 'client/cart/kh/getNum',
|
|
}).then(({data}) => {
|
|
this.cartNum = data
|
|
})
|
|
},
|
|
call(){
|
|
window.open('tel:400-686-5559')
|
|
}
|
|
},
|
|
onLoad({id}) {
|
|
this.id = id
|
|
this.getInfo(id)
|
|
this.getCartNum()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
.layout-swiper {
|
|
height: 600rpx;
|
|
}
|
|
|
|
.layout-detail {
|
|
margin: 20rpx 30rpx 10rpx;
|
|
padding: 20rpx 20rpx;
|
|
border-radius: 12rpx;
|
|
|
|
.price {
|
|
font-size: 24rpx;
|
|
line-height: 36rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.current {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #A92924;
|
|
}
|
|
|
|
.cost {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.title {
|
|
padding: 20rpx 0;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 36rpx;
|
|
color: #101010;
|
|
}
|
|
}
|
|
|
|
.layout-parse {
|
|
padding: 20rpx 30rpx;
|
|
|
|
.parse-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
line-height: 40rpx;
|
|
color: #101010;
|
|
}
|
|
}
|
|
|
|
.fiexd-bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
width: 690rpx;
|
|
height: 120rpx;
|
|
padding: 0 30rpx;
|
|
background: #ffffff;
|
|
|
|
.home {
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
color: #101010;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shop-btn {
|
|
width: 180rpx;
|
|
height: 60rpx;
|
|
font-size: 28rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
color: #A92924;
|
|
border: 1px solid #A92924;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.full-btn {
|
|
color: #ffffff;
|
|
background: #A92924;
|
|
}
|
|
|
|
|
|
.cartNum {
|
|
position: absolute;
|
|
right: -10rpx;
|
|
top: -10rpx;
|
|
background-color: #FFFFFF;
|
|
color: #bf2b28;
|
|
font-size: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 25rpx;
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
border: 1px solid #bf2b28;
|
|
}
|
|
</style>
|