311 lines
8.0 KiB
Vue
311 lines
8.0 KiB
Vue
<template>
|
|
<view class="town">
|
|
<hx-navbar :back="true" :fixed="true" color="#fff" :statusBar="true" transparent="hidden" barPlaceholder="hidden" />
|
|
<view class="top-img">
|
|
<image v-if="townInfo.coverType === 1" :src="townInfo.cover" mode="scaleToFill" class="img"></image>
|
|
<video
|
|
v-if="townInfo.coverType === 2"
|
|
id="videoCover"
|
|
class="img"
|
|
:src="townInfo.cover"
|
|
autoplay
|
|
:play-btn-position="center"
|
|
:show-fullscreen-btn="false"
|
|
:show-play-btn="false"
|
|
:show-center-play-btn="flase"
|
|
> </video>
|
|
</view>
|
|
<view class="top-intro">
|
|
<view class="intro-title v12-pa-3">
|
|
<text class="v12-font-bold v12-font-40">{{ townInfo.name }}</text>
|
|
<text class="aaaa" v-if="townInfo.qualityRating">
|
|
{{ townInfo.qualityRating }}
|
|
</text>
|
|
</view>
|
|
<view class="shareBtn" @click="shareImg"><u-icon name="share-square" color="#C52733"></u-icon>分享给好友</view>
|
|
<!-- <u-line dashed></u-line> -->
|
|
<view v-if="townInfo.intro" class="v12-pa-3 intro-content">
|
|
<u-read-more :toggle="true" showHeight="200">
|
|
{{ townInfo.intro }}
|
|
</u-read-more>
|
|
</view>
|
|
</view>
|
|
<view class="tabs-wrap">
|
|
<view @click="handleTab(item.value)" :class="{ 'tab-actived' : item.value === actived }" class="tab-item" v-for="(item, index) in tabs" :key="index">{{ item.name }}</view>
|
|
</view>
|
|
<view class="list-wrap">
|
|
<view v-if="actived === 1">
|
|
<projects :info="townInfo.projectInfo"></projects>
|
|
</view>
|
|
<view v-if="actived === 2">
|
|
<culture :list="townInfo.cultureInfo.cultureImages"></culture>
|
|
</view>
|
|
<view v-if="actived === 3">
|
|
<information :infoArray="activeties" @video="handleVideo"></information>
|
|
</view>
|
|
<view v-if="actived === 4">
|
|
<service :info="{...townInfo.serviceInfo, name: townInfo.name}"></service>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 分享 -->
|
|
<u-popup
|
|
:show="showShare"
|
|
mode="center"
|
|
bgColor="transparent"
|
|
>
|
|
<view class="box-share">
|
|
<view class="box-img">
|
|
<image
|
|
:src="webUrl + '/20230608112219219303.png'"
|
|
class="icon"
|
|
@click="closeShare"
|
|
/>
|
|
<image :src="posterUrl" class="main-img" mode="widthFix" />
|
|
</view>
|
|
<image
|
|
:src="webUrl + '/20230608112210135038.png'"
|
|
mode="widthFix"
|
|
class="btn"
|
|
@click="saveImg"
|
|
/>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAncientTownInfo, getAncientTownActive, shareTown } from "@/api/inn.js"
|
|
import {getUrlParam} from '@/utils/common.js'
|
|
import culture from './components/culture.vue'
|
|
import information from './components/information.vue'
|
|
import service from './components/service.vue'
|
|
import projects from './components/projects.vue'
|
|
export default {
|
|
components: {
|
|
culture,
|
|
information,
|
|
service,
|
|
projects
|
|
},
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
showShare: false,
|
|
townInfo: {},
|
|
posterUrl: '',
|
|
activeties: [],
|
|
id: '',
|
|
actived: 1,
|
|
tabs: [
|
|
{name: '项目', value: 1},
|
|
{name: '文化', value: 2},
|
|
{name: '活动', value: 3},
|
|
{name: '服务', value: 4},
|
|
],
|
|
}
|
|
},
|
|
onLoad(opts) {
|
|
this.id = opts.id
|
|
const obj = uni.getEnterOptionsSync()
|
|
if(opts.scene || obj.query.scene) {
|
|
const query = opts ? decodeURIComponent(opts.scene) : decodeURIComponent(obj.query.scene)
|
|
this.id = getUrlParam(query, 'id') || null
|
|
}
|
|
this.getInfo()
|
|
this.getActive()
|
|
},
|
|
methods: {
|
|
handleVideo() {
|
|
const videoCtx = uni.createVideoContext('videoCover', this)
|
|
videoCtx.pause()
|
|
},
|
|
shareImg() {
|
|
uni.showLoading()
|
|
shareTown(this.id).then(res => {
|
|
this.posterUrl = res.data
|
|
this.showShare = !this.showShare
|
|
}).finally(() => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
closeShare() {
|
|
this.showShare = false
|
|
},
|
|
saveImg() {
|
|
const _this = this
|
|
uni.getSetting({
|
|
success: getRes => {
|
|
if (getRes.authSetting["scope.writePhotosAlbum"]) {
|
|
_this.downloadImage()
|
|
} else {
|
|
uni.authorize({
|
|
scope: "scope.writePhotosAlbum",
|
|
success: () => {
|
|
_this.downloadImage()
|
|
},
|
|
fail: () => {
|
|
uni.openSetting({
|
|
success: openRes => {
|
|
console.log(typeof openRes, openRes)
|
|
},
|
|
fail: () => {
|
|
uni.showToast({
|
|
title: "请在设置中打开对应权限",
|
|
icon: "none"
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.log(err, 2)
|
|
}
|
|
})
|
|
},
|
|
downloadImage() {
|
|
const _this = this
|
|
const randomID = () => Math.random().toString(36).substring(2)
|
|
uni.downloadFile({
|
|
url: this.posterUrl, // 网络图片的地址
|
|
filePath: wx.env.USER_DATA_PATH + "/share_" + randomID() + ".png", // 指定的本地文件路径
|
|
success: downRes => {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: downRes.filePath, // 临时文件地址
|
|
success: function () {
|
|
uni.showToast({
|
|
title: "保存成功",
|
|
icon: "success",
|
|
success() {
|
|
_this.showShare = false
|
|
}
|
|
})
|
|
},
|
|
fail: function (err) {
|
|
uni.showToast({
|
|
title: err,
|
|
icon: "none"
|
|
})
|
|
}
|
|
})
|
|
},
|
|
fail: function (err) {
|
|
uni.showToast({
|
|
title: err.errMsg,
|
|
icon: "error"
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getInfo() {
|
|
uni.showLoading()
|
|
getAncientTownInfo(this.id).then(res => {
|
|
this.townInfo = res.data
|
|
}).finally(() => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
getActive() {
|
|
const params = {
|
|
ancientTownId: this.id
|
|
}
|
|
getAncientTownActive(params).then(res => {
|
|
this.activeties = res.data.records || []
|
|
})
|
|
},
|
|
handleTab(value) {
|
|
this.actived = value
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "@/assets/css/store.less";
|
|
.shareBtn{
|
|
width: fit-content;
|
|
padding: 5rpx 15rpx;
|
|
background: #edbfc2;
|
|
box-shadow: 0rpx 4rpx 4rpx rgba(0,0,0,0.16);
|
|
border-radius: 24rpx 0rpx 0rpx 24rpx;
|
|
color: #C52733;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.town{
|
|
min-height: 100vh;
|
|
background: #f0f0f0;
|
|
}
|
|
.tab-actived{
|
|
color: #fff;
|
|
font-weight: bold;
|
|
background: linear-gradient(to right, #C52733 0%, rgba(211,92,101,0.91) 54%, rgba(255,255,255,0.62) 100%);
|
|
border-radius: 38rpx 0rpx 0 38rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
.tabs-wrap{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 20rpx 20rpx 0;
|
|
color: #333;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
}
|
|
.intro-content{
|
|
letter-spacing: 2.5px;
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
.aaaa{
|
|
background: #F1B61A;
|
|
color: #fff;
|
|
border-radius: 100px;
|
|
padding: 0 10rpx;
|
|
font-size: 24rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
.top-intro{
|
|
width: 100%;
|
|
min-height: 360rpx;
|
|
background: #fff;
|
|
box-shadow: 0rpx 0rpx 12rpx rgba(0,0,0,0.13);
|
|
border-radius: 30rpx;
|
|
margin-top: -30rpx;
|
|
position: relative;
|
|
z-index: 11;
|
|
}
|
|
.top-img{
|
|
width: 100%;
|
|
background: #fff;
|
|
height: 560rpx;
|
|
position: relative;
|
|
.img{
|
|
height: inherit;
|
|
width: 100%;
|
|
}
|
|
.img1{
|
|
z-index: 10;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 30rpx;
|
|
}
|
|
.bg{
|
|
height: 100%;
|
|
width: 50%;
|
|
background: #fff;
|
|
position: absolute;
|
|
top: -30rpx;
|
|
right: 0;
|
|
z-index: 9;
|
|
}
|
|
}
|
|
</style> |