b2894lxlx/jjx-wap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20261008

Browse Source
This commit is contained in:
b2894lxlx
2026-10-08 18:34:09 +08:00
commit 2933904f4c
905 changed files with 112129 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/shop/detail.vue
+310
View File
@@ -0,0 +1,310 @@
<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">&yen;{{ 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>