Skip to content

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

Merge branch 'master' of http://gitlab.oytour.com/viitto/mallapp

parents 1c1c51b7 e174e0f4
Show whitespace changes
Inline Side-by-side
Showing with 363 additions and 4 deletions
pages/kotra/brand/detail.vue
View file @ ea94abab
<template>
<view style="height: 100vh; overflow: hidden;width:100vw;">
<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>
<view style="background-color: #111;height: 700rpx;position: relative;" v-if="active==0">
<video id="myVideo" :src="files" style="width: 100%;height: 100%;"
:controls='controls'
:show-center-play-btn='false'
:show-fullscreen-btn='false'
@fullscreenchange='videoControl'
></video>
<view @click="enlarge(files)" 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>
<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;">
<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>
</view>
<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>
<view class="kotra-title" :style="[titleStyle]">
<view @click="goback">
<u-icon name="arrow-left" size="44"></u-icon>
</view>
<view style="flex: 1;margin-left: 30rpx; text-align: left;">银泰in99</view>
</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;">
<view style="font-size: 21px;color: #1F1F1F;font-weight: bold;">
成都拾野自然博物馆
</view>
<view style="width: 100%;height: 35px;display: flex;align-items: center;justify-content: space-between;">
<view class="label-b" :style="{'background':mainColor}">
shopping mall
</view>
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-love.png" style="width: 63px;height: 63px;"></image>
</view>
<view class="brand-xinx">
<view class="brand-xinx-item">
<view class="brand-xinx-item-t" :style="{color:mainColor}">2</view>
<view class="brand-xinx-item-m">店铺数量</view>
</view>
<view class="brand-xinx-item" style="padding-left: 10px;">
<view class="brand-xinx-item-t" :style="{color:mainColor}">500<text style="font-size: 12px;">㎡</text></view>
<view class="brand-xinx-item-m">店铺面积</view>
</view>
<view class="brand-xinx-item" style="padding-left: 10px;">
<view class="brand-xinx-item-t" :style="{color:mainColor}">600<text style="font-size: 12px;">㎡</text> </view>
<view class="brand-xinx-item-m">需求面积</view>
</view>
</view>
<view class="brand-x">
<view class="brand-x-l">拓店区域：</view>
<view class="brand-x-r">四川成都</view>
</view>
<view class="brand-x">
<view class="brand-x-l">品牌定位：</view>
<view class="brand-x-r">商业地产+体育运动的新型“SPORTMALL”的全新商业场景</view>
</view>
<view class="brand-x">
<view class="brand-x-l">客群定位：</view>
<view class="brand-x-r">白领，家庭，学生等对体育有需求同时具有一定的消费能力的客户群体</view>
</view>
<view style="width: 100%;position: relative;margin-top: 46px;background: rgba(252, 42, 76, 0.05);padding: 15px 0;border-radius: ;">
<view style="width: 150rpx;height: 150rpx;background: #FFFFFF;box-shadow: 0px 2px 15px 0px rgba(167, 167, 167, 0.39);border-radius: 10px;position: absolute;left: 0;top: -23px;">
<!-- 放图片 -->
</view>
<view style="width: calc(100vw - 40px - 150rpx - 20px);margin-left: 190rpx;">
<view style="font-size: 13px;color: #B1B1B1;">品牌名称：</view>
<view style="font-size: 15px;color: #1F1F1F;font-weight: bold;margin-top: 10px;">
拾野·自然博物馆
</view>
</view>
</view>
<view class="brand-title">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-wyxq.png" mode="widthFix"></image>
</view>
<view class="Listbox" >
<view class="Listbox-item" v-for='(x,y) in EquityList' :key='y'>
<image :src="x.ImagePath" style="width: 74rpx;height: auto;" mode="widthFix"></image>
<text class="list-item-text" style="font-size: 12px;color: #424242;">{{x.Title}}</text>
</view>
</view>
<view class="brand-title">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-ggxq.png" mode="widthFix"></image>
</view>
<view style="margin-top: 30px;font-size: 13px;color: #1F1F1F;">
无
</view>
<view class="brand-title" style="width: 36px;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-qt.png" mode="widthFix"></image>
</view>
<view style="margin-top: 30px;font-size: 13px;color: #1F1F1F;">
城市一、二类商圈；选择繁华的商业中心，及地标性购物中心交通便利，项目周边交通状况良好，地铁直达最佳
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
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'
},
{
url:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616400499000_819.png'
}
],
typeList: [{
Id: 0,
Name: '视频'
}, {
Id: 1,
Name: '图片'
}],
boxOption:0,
navsOption:0,
titleStyle:{},
active:0,
mainColor:'',
controls:false,//显示默认控件
files:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637516872805837677.mp4',
EquityList:[
{
"Id":11,
"Title":"权益五",
"ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616056016000_64.png",
"Content":"会员权益"
},
{
"Id":10,
"Title":"权益四",
"ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616056016000_955.png",
"Content":"1对1客服"
},
{
"Id":9,
"Title":"权益三",
"ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616056016000_417.png",
"Content":"会员权益"
},
{
"Id":8,
"Title":"权益二",
"ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616056016000_864.png",
"Content":"会员权益"
},
{
"Id":7,
"Title":"所有权益",
"ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616056016000_711.png",
"Content":"超级会员"
}
]
}
},
onLoad(options) {
let that=this
uni.getSystemInfo({
success(res) {
that.titleStyle = {
height: "45px",
paddingTop: `${res.statusBarHeight}px`,
opacity:"0%"
};
},
});
this.mainColor = this.$uiConfig.mainColor;
},
methods: {
changeHandler(i) {
this.active = i;
},
previewImage(i) {
console.log(i)
uni.previewImage({
urls: this.imgs,
current: i,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function(data) {},
fail: function(err) {
console.log(err.errMsg);
},
},
});
},
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.$forceUpdate()
},
goback() {
uni.navigateBack({
delta: 1,
});
},
enlarge(file) {
// 全屏
this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.requestFullScreen({
direction:0
})
},
videoControl(e){
if(e.detail.fullScreen==false){
this.videoContext.stop()
this.controls=false
}else{
this.videoContext.play()
this.controls=true
}
},
}
}
</script>
<style>
.kotra-title {
line-height: 45px !important;
font-size: 16px;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
color: #111;
box-sizing: content-box;
z-index: 5;
display: flex;
align-items: center;
background-color: #f6f6f6;
padding-left: 6rpx;
}
.label-b{
height: 20px;
padding: 0 3px;
font-size: 13px;
color: #FFF;
border-radius: 4px;
font-weight: bold;
}
.brand-xinx{
width: 100%;
display: flex;
align-items: center;
margin-top: 15px;
}
.brand-xinx-item{
width: 33%;
font-size: 17px;
}
.brand-xinx-item-m{
font-size: 12px;
color: #A4A4A4;
margin: 10px 0;
}
.brand-xinx-item-t{
display: flex;
align-items: flex-end;
font-weight: bold;
}
.brand-x{
width: 100%;
display: flex;
align-items: flex-start;
margin-top: 18px;
}
.brand-x-l{
font-size: 13px;
color: #A4A4A4;
width: 130rpx;
}
.brand-x-r{
font-size: 13px;
color: #1F1F1F;
line-height: 20px;
font-family: PingFang SC;
width: calc(100vw - 40px - 130rpx);
}
.brand-title{
width: 134rpx;
margin-top: 30px;
}
.brand-title image{
width: 100%;
height: auto;
}
.Listbox{
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.Listbox-item{
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
height: 170rpx;
align-items: center;
justify-content: center;
}
.list-item-text{
width: calc(100vw / 4);
margin-top: 5px;
text-align: center;
}
</style>
pages/kotra/carrier/detail.vue
View file @ ea94abab
......@@ -5,10 +5,16 @@
<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
<!-- <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="width: 100%;height: 100%;" mode="aspectFill"></image> -->
<video id="myVideo" :src="files" style="width: 100%;height: 100%;"
:controls='controls'
:show-center-play-btn='false'
:show-fullscreen-btn='false'
@fullscreenchange='videoControl'
></video>
<view @click="enlarge(files)"
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"
......@@ -190,6 +196,8 @@
active: 0,
mainColor: '',
likeStatus: false,
controls:false,//显示默认控件
files:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/SaleBefore/Goods/637515953765903034.mp4',
}
},
onLoad(options) {
......@@ -259,7 +267,24 @@
name,
address:"武侯区科华中路 2 号"
})
},
enlarge(file) {
// 全屏
this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.requestFullScreen({
direction:0
})
},
videoControl(e){
if(e.detail.fullScreen==false){
this.videoContext.stop()
this.controls=false
}else{
this.videoContext.play()
this.controls=true
}
},
}
}
......
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