parent
2e65e574c4
commit
4a3790dd3b
20 changed files with 463 additions and 189 deletions
@ -0,0 +1,155 @@ |
||||
<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> |
||||
Loading…
Reference in new issue