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.
212 lines
4.7 KiB
212 lines
4.7 KiB
<template> |
|
<view class="page"> |
|
<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 ? '￥ ' + info.price + '起' : '面议' }}</text> |
|
<text v-if="info.oriPrice" class="oriPrice">市场价 ￥{{ info.oriPrice }}</text> |
|
</view> |
|
<view class="name">{{ info.prodName }}</view> |
|
<view v-if="info.skuList && info.skuList.length" class="sku"> |
|
<view class="sku-title"> |
|
<image class="icon" src="http://124.71.79.122/images/miniProgram/order1.png" mode="widthFix"></image> |
|
规格 |
|
</view> |
|
<view v-for="(item, i) in info.skuList" :key="i" class="item"> |
|
<text class="sku-name">{{ item.skuName }}</text> |
|
<text class="sku-price">{{ item.price ? '￥ ' + item.price : '面议' }}</text> |
|
<text class="sku-stocks">库存{{ item.stocks }}</text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="detail"> |
|
<view class="title">商品详情</view> |
|
<mp-html :content="info.brief"/> |
|
<view v-if="imgs.length" class="img-wrap"> |
|
<image v-for="(item, i) in imgs" :key="i" class="img" :src="item" mode="widthFix"></image> |
|
</view> |
|
</view> |
|
|
|
<view v-if="isTeam && (info.status === 2 || info.status === 3)" class="btn-wrap"> |
|
<view class="btn" @click="$util.to(`/other/addGoods/addGoods?prodId=${prodId}`)">编辑</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { info } from '@/apis/modules/goods.js' |
|
import Util from '@/libs/util' |
|
export default { |
|
data() { |
|
return { |
|
isTeam: uni.getStorageSync('team').isTeam == 1, // 队长 |
|
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.curPic = e.detail.current; |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.page { |
|
padding-bottom: 170rpx; |
|
-webkit-overflow-scrolling: touch; |
|
} |
|
.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; |
|
} |
|
.sku { |
|
.item { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
.sku-title { |
|
display: flex; |
|
align-items: center; |
|
margin: 40rpx 0 5rpx; |
|
font-size: 30rpx; |
|
font-weight: 600; |
|
color: #333; |
|
.icon { |
|
width: 40rpx; |
|
margin-right: 10rpx; |
|
} |
|
} |
|
.sku-name { |
|
font-size: 28rpx; |
|
color: #333; |
|
} |
|
.sku-price { |
|
margin: 10rpx 0; |
|
font-size: 28rpx; |
|
color: #ff3313; |
|
} |
|
.sku-stocks { |
|
font-size: 26rpx; |
|
color: #868686; |
|
} |
|
} |
|
.img-wrap { |
|
margin-top: 20rpx; |
|
text-align: center; |
|
.img { |
|
max-width: 100%; |
|
} |
|
} |
|
} |
|
</style>
|
|
|