You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
3.2 KiB
156 lines
3.2 KiB
10 months ago
|
<template>
|
||
|
|
<view class="wrap">
|
||
|
|
<view class="banner">
|
||
|
|
<uni-swiper-dot class="swiper" v-if="pic.length" :current="curPic" :info="pic" field="id" mode="round" :dotsStyles="dotsStyles">
|
||
|
|
<swiper class="swiper-box" autoplay @change="picChange">
|
||
|
|
<swiper-item v-for="(item, i) in pic" :key="i">
|
||
|
|
<image class="pic" :src="item"></image>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
</uni-swiper-dot>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="detail">
|
||
|
|
<view class="prices">
|
||
|
|
<text class="price">售价 ￥{{ info.price }}起</text>
|
||
|
|
<text class="oriPrice">市场价 ￥{{ info.oriPrice }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="name">{{ info.prodName }}</view>
|
||
|
|
<view class="sku">
|
||
|
|
<view class="item">
|
||
|
|
<text></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="detail">
|
||
|
|
<view class="title">商品详情</view>
|
||
|
|
<mp-html :content="info.brief"/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { info } from '@/apis/modules/goods.js'
|
||
|
|
import Util from '@/libs/util'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
prodId: '',
|
||
|
|
curPic: 0,
|
||
|
|
pic: [],
|
||
|
|
imgs: [],
|
||
|
|
dotsStyles: {
|
||
|
|
backgroundColor: 'rgba(83, 200, 249,0.3)',
|
||
|
|
border: '1px rgba(83, 200, 249,0.3) solid',
|
||
|
|
color: '#fff',
|
||
|
|
selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
|
||
|
|
selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
|
||
|
|
},
|
||
|
|
info: {
|
||
|
|
brief: '',
|
||
|
|
categoryId: '',
|
||
|
|
content: '',
|
||
|
|
pic: '',
|
||
|
|
imgs: '',
|
||
|
|
price: '',
|
||
|
|
prodName: '',
|
||
|
|
skuList: [
|
||
|
|
{
|
||
|
|
prodName: '',
|
||
|
|
status: 1,
|
||
|
|
oriPrice: '',
|
||
|
|
price: '',
|
||
|
|
skuName: '默认',
|
||
|
|
stocks: 9999,
|
||
|
|
}
|
||
|
|
],
|
||
|
|
},
|
||
|
|
coverUrl: [],
|
||
|
|
mpStyle: {
|
||
|
|
p: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;',
|
||
|
|
span: 'font-size: 25rpx !important;font-family: Microsoft Yahei !important;font-weight: 400 !important;color: #333 !important;'
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
const pages = getCurrentPages()
|
||
|
|
const { options } = pages[pages.length - 1]
|
||
|
|
this.prodId = options.prodId
|
||
|
|
this.getInfo()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 商品信息
|
||
|
|
async getInfo() {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中'
|
||
|
|
})
|
||
|
|
const { data } = await info({
|
||
|
|
prodId: this.prodId
|
||
|
|
})
|
||
|
|
if (data) {
|
||
|
|
if (data.pic) {
|
||
|
|
this.pic = data.pic.split(',')
|
||
|
|
}
|
||
|
|
|
||
|
|
if (data.imgs) {
|
||
|
|
this.imgs = data.imgs.split(',')
|
||
|
|
}
|
||
|
|
this.info = data
|
||
|
|
}
|
||
|
|
uni.hideLoading()
|
||
|
|
},
|
||
|
|
// 描述图片切换
|
||
|
|
picChange(e) {
|
||
|
|
this.curBanner = e.detail.current;
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.banner {
|
||
|
|
position: relative;
|
||
|
|
.pic {
|
||
|
|
width: 100%;
|
||
|
|
height: 420rpx;
|
||
|
|
}
|
||
|
|
swiper {
|
||
|
|
height: 420rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.detail {
|
||
|
|
padding: 34rpx 32rpx;
|
||
|
|
margin: 20rpx;
|
||
|
|
border-radius: 20px;
|
||
|
|
background-color: #fff;
|
||
|
|
.title {
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.prices {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
.price {
|
||
|
|
font-size: 38rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #f70000;
|
||
|
|
}
|
||
|
|
.oriPrice {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #a0a0a0;
|
||
|
|
text-decoration: line-through;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.name {
|
||
|
|
margin: 20rpx 0;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|