143 lines
4.3 KiB
Vue
143 lines
4.3 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="400px" 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 justify-between items-center w-100p mt-20">
|
|
<view class="flex justify-start items-center">
|
|
<text>零售价:</text>
|
|
<text class="font-bold text-main">￥{{ info.amount }}</text>
|
|
</view>
|
|
<view class="flex justify-end is-center">
|
|
<el-button type="danger" round class="add-to-cart-btn" @click.native="addToCart">加入购物车</el-button>
|
|
<el-button type="primary" round class="ml-35" @click.native="newOrder">立即购买</el-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</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";
|
|
|
|
export default {
|
|
components: {UGap},
|
|
data() {
|
|
return {
|
|
id: null,
|
|
info: {
|
|
name: ''
|
|
}
|
|
};
|
|
},
|
|
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}
|
|
})
|
|
},
|
|
addToCart(){
|
|
vk.callFunction({
|
|
url: 'client/cart/kh/add',
|
|
data: {
|
|
goodsId: this.id,
|
|
},
|
|
success: (res) => {
|
|
this.$message({
|
|
type:'success',
|
|
message: '添加成功'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
async newOrder(){
|
|
const {data} = await vk.callFunction({
|
|
url: 'client/order/kh/add',
|
|
data: {
|
|
goodsId: this.id,
|
|
num: 1,
|
|
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;
|
|
}
|
|
|
|
.intro-title{
|
|
background-color: #EF0021;
|
|
padding: 10px 20px;
|
|
color: white;
|
|
width: 120px;
|
|
text-align: center;
|
|
}
|
|
|
|
.intro{
|
|
border-top: 1px solid #F95F6E;
|
|
}
|
|
</style>
|