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.
101 lines
2.3 KiB
101 lines
2.3 KiB
<template> |
|
<view class="wrap"> |
|
<view class="banner"> |
|
<uni-swiper-dot class="swiper" v-if="coverUrl.length" :current="curBanner" :info="coverUrl" field="id" mode="round" :dotsStyles="dotsStyles"> |
|
<swiper class="swiper-box" autoplay @change="picChange"> |
|
<swiper-item v-for="(item, i) in coverUrl" :key="i"> |
|
<image class="pic" :src="item.url"></image> |
|
</swiper-item> |
|
</swiper> |
|
</uni-swiper-dot> |
|
</view> |
|
|
|
<view class="detail"> |
|
<view class="title">{{ info.productName }}</view> |
|
<mp-html :content="info.description"/> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { explosiveFind } from '@/apis/modules/activity.js' |
|
import Util from '@/libs/util' |
|
export default { |
|
data() { |
|
return { |
|
id: '', |
|
curBanner: 0, |
|
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: { |
|
productName: '', |
|
description: '', |
|
}, |
|
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.id = options.id |
|
this.getInfo() |
|
}, |
|
methods: { |
|
// 获取详情 |
|
getInfo() { |
|
uni.showLoading({ |
|
title: '加载中' |
|
}) |
|
explosiveFind(this.id).then(({ data }) => { |
|
this.coverUrl = data.coverUrl.split(',').map((e, i) => { |
|
return { |
|
url: e, |
|
id: i, |
|
} |
|
}) |
|
this.info = data |
|
uni.hideLoading() |
|
}).catch(e => { |
|
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: 30rpx; |
|
font-size: 30rpx; |
|
color: #333; |
|
} |
|
} |
|
</style>
|
|
|