129 lines
3.7 KiB
Vue
129 lines
3.7 KiB
Vue
<template>
|
|
<view class="expo-details">
|
|
<view class="video-wrap">
|
|
<video id="ky-video" class="ky-video" @error="videoErrorCallback" :show-fullscreen-btn="false" :src="details.video" autoplay controls></video>
|
|
</view>
|
|
<view class="expo-item">
|
|
{{ details.name }}
|
|
</view>
|
|
<view class="details-wrap v12-mt-3">
|
|
<view class="v12-font-bold v12-dark-text v12-font-32 v12-mb-3">展会信息</view>
|
|
<view class="v12-justify-start v12-mb-3">
|
|
<view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">主题</view>
|
|
<view class="v12-font-bold v12-font-28 v12-dark-text v12-ml-3">{{ details.theme }}</view>
|
|
</view>
|
|
<view class="v12-justify-start v12-mb-3">
|
|
<view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">内容</view>
|
|
<rich-text class="v12-ml-3" :nodes="details.content"></rich-text>
|
|
</view>
|
|
<view class="v12-justify-start v12-mb-3">
|
|
<view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">时间</view>
|
|
<view class="v12-font-bold v12-font-28 v12-dark-text v12-ml-3">{{ details.startTime }}--{{ details.endTime }}</view>
|
|
</view>
|
|
<view class="v12-justify-start v12-mb-3">
|
|
<view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">地点</view>
|
|
<view class="v12-font-bold v12-font-28 v12-dark-text v12-ml-3">{{ details.address }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="more-wrap v12-mt-3">
|
|
<view class="v12-justify-between v12-align-center v12-mb-3">
|
|
<view class="v12-font-bold v12-font-32">其他展会</view>
|
|
<view class="v12-font-24 v12-align-center" @click="toMore">
|
|
<text>查看更多</text>
|
|
<image :src="webUrl + '/orderIcon/arrow.png'" class="arrow-icon v12-ml-1"></image>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-for="(item, index) in moreList"
|
|
:key="index"
|
|
@click="getOther(item.id)"
|
|
class="v12-white v12-dark-text v12-font-bold v12-font-26 v12-mb-3 v12-radius-50 v12-pa-2">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {getWellnessExhibitionDetails, getWellnessExhibition} from '@/api/health'
|
|
export default{
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
keyword: '',
|
|
moreList: [],
|
|
id: '',
|
|
details: {}
|
|
}
|
|
},
|
|
onLoad(opts) {
|
|
this.id = opts.id || ''
|
|
this.getDetails(this.id)
|
|
},
|
|
methods: {
|
|
videoErrorCallback(error) {
|
|
console.log(error);
|
|
|
|
},
|
|
getDetails(id) {
|
|
getWellnessExhibitionDetails(id).then(({data}) => {
|
|
this.details = data
|
|
this.getOthers()
|
|
})
|
|
},
|
|
getOther(id) {
|
|
this.id = id
|
|
this.getDetails(this.id)
|
|
},
|
|
getOthers() {
|
|
let params = {
|
|
page: 1,
|
|
limit: 5
|
|
}
|
|
getWellnessExhibition(params).then(({data}) => {
|
|
this.moreList = data.records.filter(e => e.id != this.id)
|
|
})
|
|
},
|
|
toMore() {
|
|
uni.navigateTo({
|
|
url: '/pkg_product/views/expoList'
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.arrow-icon{
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
.ky-video{
|
|
height: 400rpx;
|
|
width: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
.tag{
|
|
height: 30rpx;
|
|
}
|
|
.expo-details{
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
padding: 20rpx;
|
|
}
|
|
.expo-item{
|
|
background-color: #f2f2f2;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
margin-top: -20rpx;
|
|
padding: 30rpx 20rpx 20rpx;
|
|
}
|
|
.details-wrap, .more-wrap{
|
|
width: 100%;
|
|
background: #f2f2f2;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
</style> |