Skip to content

M
mallapp
Commit 12e9ebf0 authored by 罗超's avatar 罗超
Browse files
Options

载体详情静态页面

parent 0dca9337
Show whitespace changes
Inline Side-by-side
Showing with 180 additions and 38 deletions
pages/kotra/carrier/detail.vue
View file @ 12e9ebf0
<template>
<view style="height: 100vh; overflow: hidden;width:100vw;">
<view style="height: 100vh; overflow: hidden;width:100vw;font-family: 'pingfang';">
<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scroll="scroll">
<view style="height: 700rpx;position: relative;z-index: 1;" :style="{'opacity':(100-boxOption)+'%'}">
<u-swiper
:list="imgsList"
:effect3d="false"
:height="700"
:interval="5000"
:border-radius="0"
@click="previewImage"
name="url"
v-if="active==1"
></u-swiper>
<u-swiper :list="imgsList" :effect3d="false" :height="700" :interval="5000" :border-radius="0"
@click="previewImage" name="url" v-if="active==1"></u-swiper>
<view style="background-color: #111;height: 700rpx;position: relative;" v-if="active==0">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616398636000_211.png" style="width: 100%;height: 100%;" mode="aspectFill"></image>
<view style="position: absolute;left: 50%;top: 50%;margin-top: -49rpx;margin-left: -49rpx;width: 98rpx;height: 98rpx;border-radius: 20rpx;background-color: rgba(255,255,255,.4);display: flex;align-items: center;justify-content: center;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png" style="width: 37rpx;height: 44rpx;" mode=""></image>
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616398636000_211.png"
style="width: 100%;height: 100%;" mode="aspectFill"></image>
<view
style="position: absolute;left: 50%;top: 50%;margin-top: -49rpx;margin-left: -49rpx;width: 98rpx;height: 98rpx;border-radius: 20rpx;background-color: rgba(255,255,255,.4);display: flex;align-items: center;justify-content: center;">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
style="width: 37rpx;height: 44rpx;" mode=""></image>
</view>
</view>
<view style="width: 100px;height: 50rpx;position: absolute;background-color: rgba(255,255,255,.6);border-radius: 50rpx;left: 50%;bottom: 80px;margin-left:-50px;">
<u-tabs bg-color="rgba(0,0,0,0)" :is-scroll="false" name="Name" :list="typeList" :active-color="mainColor"
:current="active" @change="changeHandler" :show-bar="true" :bold="false" height="50"
duration="0" font-size="24" :activeFontSize="24" :typeStyle="2"></u-tabs>
<view
style="width: 100px;height: 50rpx;position: absolute;background-color: rgba(255,255,255,.6);border-radius: 50rpx;left: 50%;bottom: 80px;margin-left:-50px;">
<u-tabs bg-color="rgba(0,0,0,0)" :is-scroll="false" name="Name" :list="typeList"
:active-color="mainColor" :current="active" @change="changeHandler" :show-bar="true"
:bold="false" height="50" duration="0" font-size="24" :activeFontSize="24" :typeStyle="2">
</u-tabs>
</view>
<view style="height: 50rpx;position: absolute;background-color: rgba(0,0,0,.6);border-radius: 50rpx;left: 30rpx;bottom: 80px;color:#FFF;padding:0 18rpx;display: flex;align-items: center;">
<view v-if="imgsList.length>0"
style="height: 50rpx;position: absolute;background-color: rgba(0,0,0,.6);border-radius: 50rpx;left: 30rpx;bottom: 80px;color:#FFF;padding:0 18rpx;display: flex;align-items: center;">
<u-icon name="photo-o" size="26" color="#FFF" style="margin-right: 6rpx;"></u-icon>
<text style="font-size: 22rpx;font-family: pingfang;">15</text>
<text style="font-size: 22rpx;font-family: pingfang;">{{imgsList.length}}</text>
</view>
<view @click="goback" :style="[titleStyle,{opacity:'100% !important'}]" style="position: fixed;top: 0;left: 0;padding-left: 6rpx;">
<view @click="goback" :style="[titleStyle,{opacity:'100% !important'}]"
style="position: fixed;top: 0;left: 0;padding-left: 6rpx;">
<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx;"></u-icon>
</view>
</view>
......@@ -39,8 +40,122 @@
</view>
<view style="position: relative;z-index: 2;">
<view style="position: relative;top: -70px;border-top-left-radius: 30px;border-top-right-radius: 30px;height: 900px;background-color: #FFF;padding:60rpx 40rpx;">
111
<view
style="position: relative;top: -70px;border-top-left-radius: 30px;border-top-right-radius: 30px;height: 900px;background-color: #FFF;padding:40rpx;">
<view style="display:flex;align-items:flex-start; margin-bottom: 30rpx;">
<view style="flex:1;">
<view style="font-size: 42rpx;color:#1f1f1f;font-weight: 600;">
王府井购物中心
</view>
<view style="margin-top: 16rpx;">
<u-tag text="SHOPPING MALL" mode="dark" :bg-color="mainColor" />
</view>
</view>
<view style="width:86px;height: 86px; margin-left: 12rpx;margin-right: -40rpx;">
<image v-if="!likeStatus" @click="likeStatus=true"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_509.png"
style="width: 100%;height: 100%;"></image>
<image v-if="likeStatus" @click="likeStatus=false"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_370.png"
style="width: 100%;height: 100%;"></image>
</view>
</view>
<view style="display:flex;align-items: center; margin-bottom: 30rpx;font-weight: 500;">
<view style="flex:1;font-size: 26rpx;color:#a4a4a4">
<text style="width: 156rpx;text-align: right;">商业体量：</text>
<text style="color:#F30329;font-weight: bold;">9.2万㎡</text>
</view>
<view style="flex:1;font-size: 26rpx;color:#a4a4a4">
<text style="width: 156rpx;text-align: right;">商业层数：</text>
<text style="color:#F30329;font-weight: bold;">地上5层</text>
</view>
</view>
<view style="display:flex;align-items: center; margin-bottom: 30rpx;font-weight: 500;">
<view style="flex:1;font-size: 26rpx;color:#a4a4a4">
<text style="width: 156rpx;text-align: right;">车位数量：</text>
<text style="color:#F30329;font-weight: bold;">/</text>
</view>
<view style="flex:1;font-size: 26rpx;color:#a4a4a4">
<text style="width: 156rpx;text-align: right;">开业时间：</text>
<text style="color:#F30329;font-weight: bold;">2011年12月</text>
</view>
</view>
<view style="font-size: 26rpx;color:#a4a4a4;margin-bottom: 30rpx;font-weight: 500;">
<text style="width: 128rpx;text-align: right;display: inline-block;">开发商：</text>
<text style="color:#1F1F1F;font-weight: bold;">北京王府井百货(集团)股份有限公司</text>
</view>
<view style="font-size: 26rpx;color:#a4a4a4;margin-bottom: 30rpx;font-weight: 500;">
<text style="width: 156rpx;text-align: right;">地铁站点：</text>
<text style="color:#1F1F1F;font-weight: bold;">8号线东郊记忆站，步行700米</text>
</view>
<view style="display: flex;align-items: center;">
<view
style="width: 146rpx;height: 150rpx;background: #FFFFFF;box-shadow: 0px 4px 30px 0px rgba(167, 167, 167, 0.39);border-radius: 20px;display: flex;align-items: center;padding: 10rpx;">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616482809000_214.png"
style="width:100%" mode="widthFix"></image>
</view>
<view
@click="goMap('银泰in99',104.06,30.67)"
style="flex:1;padding-left: 34rpx;background:rgba(252, 42, 76, .05);height: 95rpx;display: flex;align-items: center;">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_382.png"
style="width: 27rpx;height: 33rpx;margin-right: 26rpx;"></image>
<view
style="flex:1;font-size: 30rpx;color:#1f1f1f;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;font-weight: 600;">
武侯区科华中路 2 号</view>
<u-icon name="arrow" size="22" color="#C2C2D1" style="margin:0 30rpx 0 20rpx"></u-icon>
</view>
</view>
<view style="height: 1px;background: #333F53;opacity: 0.1;margin:60rpx 0"></view>
<view style="margin-bottom: 83rpx;text-align: right;">
<view style="text-align: left;">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_409.png"
style="width: 425rpx;height: 75rpx;"></image>
</view>
<view
style="display:inline-block;padding:32rpx 26rpx;width: 505rpx;height: 148rpx;background: #FFFFFF;box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);border-radius: 20rpx;margin-top:-30rpx;">
<text
style="font-size: 26rpx;color:#1f1f1f;line-height: 38rpx;font-weight: 600;">由餐饮、文化、娱乐和零售四大板块的业态构成</text>
</view>
</view>
<view style="margin-bottom: 83rpx;text-align: right;">
<view style="text-align: left;">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_16.png"
style="width: 425rpx;height: 75rpx;"></image>
</view>
<view
style="display:inline-block;padding:32rpx 26rpx;width: 505rpx;height: 148rpx;background: #FFFFFF;box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);border-radius: 20rpx;margin-top:-30rpx;">
<text
style="font-size: 26rpx;color:#1f1f1f;line-height: 38rpx;font-weight: 600;">餐饮类、休闲娱乐类、跨界新零售类、儿童亲子类、文创类、教育培训类</text>
</view>
</view>
<view style="margin-bottom: 83rpx;text-align: right;">
<view style="text-align: left;">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_452.png"
style="width: 425rpx;height: 75rpx;"></image>
</view>
<view
style="display:inline-block;padding:32rpx 26rpx;width: 505rpx;height: 148rpx;background: #FFFFFF;box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);border-radius: 20rpx;margin-top:-30rpx;">
<text
style="font-size: 26rpx;color:#1f1f1f;line-height: 38rpx;font-weight: 600;">最美文化阅享社区，多元化场景体验目的地</text>
</view>
</view>
<view style="margin-bottom: 83rpx;text-align: right;">
<view style="text-align: left;">
<image
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_223.png"
style="width: 425rpx;height: 75rpx;"></image>
</view>
<view
style="display:inline-block;padding:32rpx 26rpx;width: 505rpx;height: 148rpx;background: #FFFFFF;box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);border-radius: 20rpx;margin-top:-30rpx;">
<text
style="font-size: 26rpx;color:#1f1f1f;line-height: 38rpx;font-weight: 600;">所有人群</text>
</view>
</view>
</view>
</view>
</scroll-view>
......@@ -51,16 +166,15 @@
export default {
data() {
return {
imgs:[
imgs: [
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616400499000_561.png',
'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616400499000_819.png'
],
imgsList:[
{
url:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616400499000_561.png'
imgsList: [{
url: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616400499000_561.png'
},
{
url:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616400499000_819.png'
url: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616400499000_819.png'
}
],
typeList: [{
......@@ -70,21 +184,22 @@
Id: 1,
Name: '图片'
}],
boxOption:0,
navsOption:0,
titleStyle:{},
active:0,
mainColor:''
boxOption: 0,
navsOption: 0,
titleStyle: {},
active: 0,
mainColor: '',
likeStatus: false,
}
},
onLoad(options) {
let that=this
let that = this
uni.getSystemInfo({
success(res) {
that.titleStyle = {
height: "45px",
paddingTop: `${res.statusBarHeight}px`,
opacity:"0%"
opacity: "0%"
};
},
});
......@@ -109,8 +224,8 @@
});
},
scroll(e) {
this.boxOption = Math.floor((e.detail.scrollTop-50)/1.5);
this.titleStyle.opacity=((e.detail.scrollTop-100)<0?0:Math.floor(e.detail.scrollTop-100))+"%"
this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
this.titleStyle.opacity = ((e.detail.scrollTop - 100) < 0 ? 0 : Math.floor(e.detail.scrollTop - 100)) + "%"
this.$forceUpdate()
},
goback() {
......@@ -118,6 +233,33 @@
delta: 1,
});
},
goMap(name, lng, lat) {
// let endPoint = JSON.stringify({ //终点
// name,
// 'location': {
// lng,
// lat
// }
// })
// wx.navigateToMiniProgram({
// appId: 'wx7643d5f831302ab0', //要打开的小程序 appId
// path: 'pages/multiScheme/multiScheme?endLoc=' + endPoint, //打开的页面路径，如果为空则打开首页
// fail: function() {
// wx.showToast({
// icon: 'none',
// title: '打开失败，请重试'
// })
// }
// })
wx.openLocation({
latitude:lat,
longitude:lng,
scale: 18,
name,
address:"武侯区科华中路 2 号"
})
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment