243 lines
8.1 KiB
Vue
243 lines
8.1 KiB
Vue
<template>
|
|
<view>
|
|
<top-bar></top-bar>
|
|
<common-header></common-header>
|
|
<category-bar></category-bar>
|
|
<view class="w-1200 m-a">
|
|
<view class="page-nav">
|
|
<el-breadcrumb separator=">">
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
<el-breadcrumb-item>
|
|
<navigator style="display: inline-block;" url="/pages/index/shop/shop">特产商城</navigator>
|
|
</el-breadcrumb-item>
|
|
<el-breadcrumb-item class="text-main">{{ info.name }}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</view>
|
|
<view class="bg-white p-40 flex justify-start items-start">
|
|
<el-carousel height="500px" class="album">
|
|
<el-carousel-item v-for="(item, index) in info.album" :key="index">
|
|
<image :src="item" class="album-item" mode="aspectFill"/>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<view class="ml-35 flex flex-col justify-start items-start flex-1">
|
|
<view class="font-bold text-40 mb-20">{{ info.name }}</view>
|
|
<view class="flex flex-col justify-start items-start flex-1">
|
|
<text>产品介绍:</text>
|
|
<view class="desc p-20 mt-20">{{ info.desc }}</view>
|
|
</view>
|
|
<view class="flex flex-col items-start justify-start w-100p mt-20">
|
|
<view class="flex flex-col justify-start items-start flex-1 mr-25 w-100p">
|
|
<view class="flex justify-start items-center">
|
|
<text>零售价:</text>
|
|
<text class="font-bold text-main">￥{{ info.amount }}</text>
|
|
</view>
|
|
<view class="flex-1 w-100p" v-if="info.sku">
|
|
<view class="w-100p my-25 flex flex-1 justify-center items-center p-15">
|
|
<text class="flex-1 text-center">规格/分类/说明</text>
|
|
<text class="flex-1 text-center">数量</text>
|
|
<text class="flex-1 text-center">价格</text>
|
|
</view>
|
|
<view class="border my-25 flex justify-center items-center p-15 pointer sku"
|
|
v-for="(item, index) in info.sku" :key="index"
|
|
:class="[selectedSku === item._index ? 'sku-selected' : '']">
|
|
<el-image v-if="item.image" :src="item.image" style="width: 40px; height: 40px"
|
|
@click="selectedSku = item._index"/>
|
|
<text class="flex-1 text-center" @click="selectedSku = item._index">{{
|
|
item.label
|
|
}}
|
|
</text>
|
|
<view class="flex-1 flex justify-center items-center" style="z-index: 999">
|
|
<el-input-number v-model="info.sku[index].num" :min="1" size="small"/>
|
|
</view>
|
|
<text class="flex-1 text-center" @click="selectedSku = item._index">{{
|
|
item.values
|
|
}}元
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-center items-center w-100p mt-20">
|
|
<el-button type="danger" round
|
|
:class="selectedSku ? 'add-to-cart-btn' : 'add-to-cart-btn-disabled'"
|
|
@click.native="addToCart" :disabled="!selectedSku">
|
|
加入购物车
|
|
</el-button>
|
|
<el-button type="primary" round class="ml-35" @click.native="newOrder"
|
|
:disabled="!selectedSku">立即购买
|
|
</el-button>
|
|
</view>
|
|
<view class="mt-20 flex justify-start items-center">
|
|
<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" v-if="info.ensureService">
|
|
<like theme="outline" size="16" fill="#9b9b9b" strokeLinecap="square"/>
|
|
<text class="ml-10">{{ info.ensureService }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mt-40" v-if="info.video">
|
|
<view class="intro-title">视频介绍</view>
|
|
<video :src="info.video" autoplay controls style="width: 100%; height: 800px"></video>
|
|
</view>
|
|
<view class="mt-40">
|
|
<view class="intro-title">商品介绍</view>
|
|
<view class="intro bg-white" v-html="info.content"></view>
|
|
</view>
|
|
</view>
|
|
<!-- 现货市场 end -->
|
|
<gap height="50"/>
|
|
<common-footer></common-footer>
|
|
<right-bar></right-bar>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import UGap from "@/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
|
|
import {Transporter, Like} from '@icon-park/vue'
|
|
|
|
export default {
|
|
components: {UGap, Transporter, Like},
|
|
data() {
|
|
return {
|
|
id: null,
|
|
info: {
|
|
name: ''
|
|
},
|
|
num: 1,
|
|
selectedSku: null
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
if (options && options.id) {
|
|
this.id = options.id;
|
|
this.getInfo(options.id)
|
|
}
|
|
},
|
|
methods: {
|
|
navTo(url) {
|
|
vk.navigateTo(url);
|
|
},
|
|
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() {
|
|
if (!vk.getVuex('$user.userInfo.fadadaConfirm') || ([-1, 2].includes(vk.getVuex('$user.userInfo.authStatus')) && !vk.getVuex('$user.userInfo.userType'))) {
|
|
this.$confirm('您尚未认证, 是否前往个人中心认证?', '提示', {
|
|
confirmButtonText: '确定',
|
|
showCancelButton: false,
|
|
type: 'warning'
|
|
}).then(() => {
|
|
vk.navigateTo({url: '/pages/user/user?menu=fadada'});
|
|
})
|
|
return
|
|
}
|
|
vk.callFunction({
|
|
url: 'client/cart/kh/add',
|
|
data: {
|
|
goodsId: this.id,
|
|
skuId: this.selectedSku,
|
|
num: this.info.sku.find(item => item._index === this.selectedSku).num,
|
|
},
|
|
success: (res) => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '添加成功'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
async newOrder() {
|
|
if (!vk.getVuex('$user.userInfo.fadadaConfirm') || ([-1, 2].includes(vk.getVuex('$user.userInfo.authStatus')) && !vk.getVuex('$user.userInfo.userType'))) {
|
|
this.$confirm('您尚未认证, 是否前往个人中心认证?', '提示', {
|
|
confirmButtonText: '确定',
|
|
showCancelButton: false,
|
|
type: 'warning'
|
|
}).then(() => {
|
|
vk.navigateTo({url: '/pages/user/user?menu=fadada'});
|
|
})
|
|
return
|
|
}
|
|
const {data} = await vk.callFunction({
|
|
url: 'client/order/kh/add',
|
|
title: '请求中...',
|
|
data: {
|
|
goodsId: this.id,
|
|
skuId: this.selectedSku,
|
|
num: this.info.sku.find(item => item._index === this.selectedSku).num,
|
|
type: 0
|
|
}
|
|
})
|
|
vk.navigateTo({
|
|
url: `/pages/index/shop/pay?id=${data}`
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.album {
|
|
width: 500px;
|
|
|
|
.album-item {
|
|
width: 500px;
|
|
height: 400px;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
background-color: #F5E2E3;
|
|
}
|
|
|
|
.add-to-cart-btn {
|
|
background-color: #FF7300;
|
|
}
|
|
|
|
.add-to-cart-btn-disabled {
|
|
background-color: #f6aa6b;
|
|
}
|
|
|
|
.intro-title {
|
|
background-color: #EF0021;
|
|
padding: 10px 20px;
|
|
color: white;
|
|
width: 120px;
|
|
text-align: center;
|
|
}
|
|
|
|
.intro {
|
|
padding: 20px;
|
|
border-top: 1px solid #F95F6E;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.sku:hover {
|
|
background-color: #F5E2E3;
|
|
border: 1px solid #EF0021;
|
|
}
|
|
|
|
.sku-selected {
|
|
background-color: #F5E2E3;
|
|
border: 1px solid #EF0021;
|
|
}
|
|
</style>
|