wangyifang
/
walk-suzhou-wx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

Browse Source
main
lion 2 years ago
parent 7f315380ba
commit 199c5e55ab
2 changed files with 160 additions and 121 deletions
Show Stats Download Patch File Download Diff File

275
packages/detail/detail.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<view class="cotainer">
<view class="cotainer">
<!-- 全屏播放 -->
<view class="playvideo" v-if="playvideo" @click="playvideo=false,isfull=false">
<view class="playvideowrap">
@ -12,21 +12,22 @@
<view class="playvideowrap">
<view v-if="imgInfo.length>0 && !showVorImage" class="imgwrap">
<movable-area scale-area class="movable-area" style="height: 380rpx;width:100%">
<movable-view style="height: 380rpx;width:100%" class="movable-view" direction="all" scale="true" scale-min="1" scale-max="4"
:scale-value="1">
<u-swiper :height='380' bgColor="transparent" :border-radius="0" :list="imgInfo" :autoplay="false"></u-swiper>
<movable-view style="height: 380rpx;width:100%" class="movable-view" direction="all"
scale="true" scale-min="1" scale-max="4" :scale-value="1">
<u-swiper :height='380' bgColor="transparent" :border-radius="0" :list="imgInfo"
:autoplay="false"></u-swiper>
</movable-view>
</movable-area>
<view class="closevideo" @click="playimg=false">X</view>
</view>
</view>
</view>
</view>
<!-- 跳转二维码 -->
<view class="playvideo" v-if="showQrCode">
<view class="playvideowrap">
<view class="qrcode">
<image :show-menu-by-longpress="true" :src="qrCode" mode=""></image>
<view class="qrcode">
<image :show-menu-by-longpress="true" :src="qrCode" mode=""></image>
<view>长按保存二维码</view>
<view class="closevideo" @click="showQrCode=false">X</view>
</view>
@ -40,7 +41,7 @@
<!-- 状态栏占位 -->
<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
<!-- 真正的导航栏内容 -->
<view class="navBar">
<view class="navBar">
<!-- 轮播切换 -->
<view style="display: flex;" class="video-content">
<view class="video-content-left">
@ -73,21 +74,43 @@
<view class="detail-info">
<view class="detail-info-title">{{info.name}}</view>
<view class="detail-info-map">
<view>
<block v-if="info.config && info.config.length>0">
</block>
<view v-for="item in info.config">
<block>
<u-icon v-if="item.key==='address'" name="map" size="32"></u-icon>
<u-icon v-else-if="item.key==='time'" name="clock" size="32"></u-icon>
<u-icon v-else-if="item.key==='phone'" name="phone" size="32"></u-icon>
<u-icon v-else name="info-circle" size="32"></u-icon>
<view>
<span>{{item.name}}：</span>
<span>{{item.value?item.value:'-'}}</span>
</view>
</block>
</view>
<!-- <view>
<u-icon name="map" size="32"></u-icon>
<view>
<span>详细地址：</span>
<span>{{info.address?info.address:'-'}}</span>
<view>
<span>详细地址：</span>
<span>{{info.address?info.address:'-'}}</span>
</view>
</view>
<view>
<u-icon name="clock" size="32"></u-icon>
<view>
<span>开放时间：</span>
<span>{{info.time?info.time:'-'}}</span>
<view>
<span>开放时间：</span>
<span>{{info.time?info.time:'-'}}</span>
</view>
</view>
<view>
<u-icon name="clock" size="32"></u-icon>
<view>
<span>开放时间：</span>
<span>{{info.time?info.time:'-'}}</span>
</view>
</view> -->
</view>
<view class="detail-info-go">
<view class="detail-info-go-left" @click="toMap">
@ -99,27 +122,28 @@
<text>去预约</text>
</view>
</view>
</view>
</view>
<!-- vr -->
<view class="detail-vr" v-if="vrInfo.length>0">
<view class="detail-vr-title">
<image :src="require('@/packages/static/detail-vr.png')" mode=""></image>
</view>
<view class="detail-vr-swiper" v-if="vrInfo.length==1" style="margin-left: -25rpx;">
<view @click="toVr(vrInfo[0].url)" class="detail-vr-swiper-item" style="width:490rpx;margin: 0 auto;position: relative;margin-top:20rpx">
<view class="detail-vr-swiper-item-img">
<image :src="vrInfo[0].image.url" mode=""></image>
</view>
<view class="detail-vr-swiper-item-title">
<image :src="require('@/packages/static/detail-icon.png')" mode=""></image>
<text>{{vrInfo[0].name}}</text>
</view>
</view>
</view>
<swiper v-else class="detail-vr-swiper" :current="currentIndex" next-margin="140rpx" @change="swierChange"
circular :autoplay="false">
</view>
<view class="detail-vr-swiper" v-if="vrInfo.length==1" style="margin-left: -25rpx;">
<view @click="toVr(vrInfo[0].url)" class="detail-vr-swiper-item"
style="width:490rpx;margin: 0 auto;position: relative;margin-top:20rpx">
<view class="detail-vr-swiper-item-img">
<image :src="vrInfo[0].image.url" mode=""></image>
</view>
<view class="detail-vr-swiper-item-title">
<image :src="require('@/packages/static/detail-icon.png')" mode=""></image>
<text>{{vrInfo[0].name}}</text>
</view>
</view>
</view>
<swiper v-else class="detail-vr-swiper" :current="currentIndex" next-margin="140rpx"
@change="swierChange" circular :autoplay="false">
<swiper-item v-for="(item,index) in vrInfo" :key="index">
<view @click="toVr(item.url)" class="detail-vr-swiper-item"
:class="currentIndex===index?'detail-vr-swiper-active':''">
@ -159,7 +183,7 @@
<script>
import tabbar from '@/components/tabbar/tabbar.vue'
import {
toMapAPP,
toMapAPP,
shareInfo
} from "@/common/util.js"
export default {
@ -177,16 +201,16 @@
showVorImage: true,
isfull: false,
playvideo: false,
playimg: false,
qrCode:'',
showQrCode:false,
playimg: false,
qrCode: '',
showQrCode: false,
}
},
onShareAppMessage() {
return shareInfo
},
onShareTimeline(){
return shareInfo
},
onShareAppMessage() {
return shareInfo
},
onShareTimeline() {
return shareInfo
},
onReady() {
@ -204,19 +228,23 @@
async getDetail(id) {
const res = await this.$u.api.pointDetail({
id: id
})
if(res.points.config && res.points.config.length>0){
res.points.config.map(item=>{
if(item.key==='address'){
res.points.address = item.value
}
if(item.key==='time'){
res.points.time = item.value
}
})
}
this.info = res.points
this.showVorImage = this.info.video?true:false
})
// if(res.points.config && res.points.config.length>0){
// res.points.config.map(item=>{
// if(item.key==='address'){
// res.points.address = item.value
// }
// if(item.key==='time'){
// res.points.time = item.value
// }
// if(item.key==='phone'){
// res.points.phone = item.value
// }
// })
// }
this.info = res.points
this.showVorImage = this.info.video ? true : false
this.vrInfo = res.points.point_content.length > 0 ? res.points.point_content : []
if (res.points.point_image.length > 0) {
res.points.point_image.map(item => {
@ -234,35 +262,35 @@
return
}
let path = info.path ? info.path : ''
// 跳转到其他小程序
if(info.appid){
uni.navigateToMiniProgram({
appId: info.appid, // 目标小程序的 AppID
path: path, // 目标小程序的页面路径
extraData: { // 需要传递的参数
},
success(res) {
// 成功跳转到其他小程序的回调函数
console.log('成功跳转到其他小程序');
},
fail(err) {
// 跳转失败的回调函数
console.log('跳转失败', err);
}
});
}else{
if(!info.qrcode){
return
}
this.qrCode = info.qrcode.url
this.showQrCode = true
// uni.navigateTo({
// url: '/packages/vr/vr?link=' + path
// })
// 跳转到其他小程序
if (info.appid) {
uni.navigateToMiniProgram({
appId: info.appid, // 目标小程序的 AppID
path: path, // 目标小程序的页面路径
extraData: { // 需要传递的参数
},
success(res) {
// 成功跳转到其他小程序的回调函数
console.log('成功跳转到其他小程序');
},
fail(err) {
// 跳转失败的回调函数
console.log('跳转失败', err);
}
});
} else {
if (!info.qrcode) {
return
}
this.qrCode = info.qrcode.url
this.showQrCode = true
// uni.navigateTo({
// url: '/packages/vr/vr?link=' + path
// })
}
},
toVr(link) {
uni.navigateTo({
@ -271,11 +299,11 @@
},
toMap() {
toMapAPP(this.info.lat, this.info.lng, this.info.name)
},
toQus(id){
uni.navigateTo({
url:'/packages/question/question?id='+id
})
},
toQus(id) {
uni.navigateTo({
url: '/packages/question/question?id=' + id
})
},
}
}
@ -326,27 +354,34 @@
/* display: inline-block; */
right: 0rpx;
top: -25rpx // transform: translate(0,-50%);
}
.qrcode{
width: 450rpx;
position: relative;
margin: 0 auto;
>image{
width:400rpx;height:400rpx;margin: 0 auto;display: block;
}
>view{
color:#fff;
text-align: center;
margin:10rpx;
font-size:32rpx;
}
.closevideo{
z-index: 999;
color: #bc9766;
border: 1px solid #bc9766;
top: -35rpx;
right: -9rpx;
}
}
.qrcode {
width: 450rpx;
position: relative;
margin: 0 auto;
>image {
width: 400rpx;
height: 400rpx;
margin: 0 auto;
display: block;
}
>view {
color: #fff;
text-align: center;
margin: 10rpx;
font-size: 32rpx;
}
.closevideo {
z-index: 999;
color: #bc9766;
border: 1px solid #bc9766;
top: -35rpx;
right: -9rpx;
}
}
}
@ -486,14 +521,16 @@
padding-bottom: 10rpx;
>view {
display: flex;
display: flex;
align-items: flex-start;
margin-bottom: 20rpx;
>view{
display: flex;
span:first-child{
min-width: 120rpx;
}
margin-bottom: 20rpx;
>view {
display: flex;
span:first-child {
min-width: 120rpx;
}
}
}
}
@ -543,6 +580,7 @@
margin-top: 30rpx;
padding-right: 0;
padding-bottom: 25rpx;
&-title {
image {
width: 122rpx;
@ -555,6 +593,7 @@
// overflow: auto;
min-height: 530rpx;
position: relative;
&-item {
padding: 25rpx;
margin: 20rpx;

6
pages/home/home.vue
Unescape View File

@ -360,7 +360,7 @@
latitude: parseFloat(item.lat),
longitude: parseFloat(item.lng),
iconPath: '/static/home-marker.png',
truePath: item.logo ? item.logo.url : item.image.url,
truePath: item.logo ? item.logo.url : (item.image?item.image.url:'/static/share.jpg'),
width: 0,
height: 0,
title: item.name,
@ -435,7 +435,7 @@
latitude: parseFloat(item.lat),
longitude: parseFloat(item.lng),
iconPath: '/static/home-marker.png',
truePath: item.logo ? item.logo.url : item.image.url,
truePath: item.logo ? item.logo.url : (item.image?item.image.url:'/static/share.jpg'),
width: 0,
height: 0,
title: item.name,
@ -469,7 +469,7 @@
latitude: parseFloat(item.lat),
longitude: parseFloat(item.lng),
iconPath: '/static/home-marker.png',
truePath: item.logo ? item.logo.url : item.image.url,
truePath: item.logo ? item.logo.url : (item.image?item.image.url:'/static/share.jpg'),
width: 0,
height: 0,
title: item.name,

Write Preview
Loading…
Cancel
Save