Commit f1a6bbbe authored by Mac's avatar Mac

修改

parent 013bb57c
......@@ -690,11 +690,11 @@
},{
"path":"brand/list"//品牌列表
},{
"path":"brand/detail",//品牌详情
"enablePullDownRefresh": true,
"style": {
"navigationStyle": "custom"
}
"path":"brand/detail"//品牌详情
// "enablePullDownRefresh": true,
// "style": {
// "navigationStyle": "custom"
// }
},
{
"path":"brand/detail_new"//品牌详情-新版
......
<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="details.imgs"
:effect3d="false"
:height="700"
:interval="5000"
:border-radius="0"
@click="previewImage"
name='name'
v-if="active==1"
></u-swiper>
<view style="background-color: #111;height: 700rpx;position: relative;" v-if="active==0">
<view style="height: 100vh; overflow: hidden;box-sizing: border-box;position: relative;">
<scroll-view scroll-y="true" style="height: 100%;" @scroll="scroll">
<view class="bg-red">
<view class="detail-box">
<view class="header flex ">
<view class="title">
{{details.BrandName}}
</view>
<view class="tag-box">
<text class="tag1" style="width: 30px;">2021</text>
<text class="tag2" style="width: 30px;">首店</text>
</view>
</view>
<view class="score-box flex item-center" v-if="details.OpenShopWish!=-1">
<u-rate :current="details.OpenShopWish" :count="5" :size="25" active-icon="star" active-color="#F30329" :disabled="true"
inactive-color="#b2b2b2" class="rate"></u-rate>
<text class="score">{{details.OpenShopWish?details.OpenShopWish:'0'}}</text>
<text class="desire">开店意愿</text>
</view>
<view v-if="details.OpenShopWish ==-1">
<text class="desire">无开店意愿</text>
</view>
<view style="width: 100%;" >
<view v-if="!details.VideoUrl || details.VideoUrl==''" class="img-box">
<view v-if="details.BannerList.length==1" v-for="(src,index) in details.BannerList" :key="index" style="width: 100%;">
<image :src="src" style="width: 100%;height: 226rpx;" mode="aspectFill" @click="previewImage(0)"></image>
</view>
<view v-if="details.BannerList.length==2" v-for="(src,index) in details.BannerList" :key="index" style="width: calc((100vw - 80rpx - 10rpx)/2);">
<image :src="src" style="width: 100%;height: 226rpx;" mode="aspectFill" @click="previewImage(index)"></image>
</view>
<view v-for="(src,index) in details.BannerList" :key="index" v-if="details.BannerList.length>2">
<image :src="src" class="img" mode="aspectFill" v-if="index<3" @click="previewImage(index)"></image>
</view>
</view>
<view v-else>
<view v-if="details.BannerList.length==1" class="img-box">
<view style="width: calc((100vw - 80rpx - 10rpx)/2);height: 226rpx;position: relative;">
<video id="myVideo" :src="details.VideoUrl" style="width: 100%;height: 100%;"
object-fit ='fill'
:controls='controls'
:show-center-play-btn='false'
:show-fullscreen-btn='false'
@fullscreenchange='videoControl'
></video>
<view @click="enlarge(details.VideoUrl)" 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;">
<view @click="enlarge(details.VideoUrl)" style="position: absolute;left: 50%;top: 50%;margin-top: -15rpx;margin-left: -15rpx;width: 30rpx;height: 30rpx;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;" v-if="details.VideoUrl!=''">
<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 v-for="(src,index) in details.BannerList" :key="index" style="width: calc((100vw - 80rpx - 10rpx)/2);">
<image :src="src" style="width: 100%;height: 226rpx;" mode="aspectFill" @click="previewImage(index)"></image>
</view>
</view>
<view v-if="details.BannerList.length>1" class="img-box">
<view style="width: calc((100vw - 80rpx - 20rpx)/3);height: 226rpx;position: relative;">
<video id="myVideo" :src="details.VideoUrl" style="width: 100%;height: 100%;"
:controls='controls'
:show-center-play-btn='false'
:show-fullscreen-btn='false'
@fullscreenchange='videoControl'
></video>
<view @click="enlarge(details.VideoUrl)" style="position: absolute;left: 50%;top: 50%;margin-top: -15rpx;margin-left: -15rpx;width: 30rpx;height: 30rpx;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 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;">{{details.BannerList.length}}</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 v-for="(src,index) in details.BannerList" :key="index" style="width: calc((100vw - 80rpx - 10rpx)/3);" v-if="index<2">
<image :src="src" style="width: 100%;height: 226rpx;" mode="aspectFill" @click="previewImage(index)"></image>
</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;">{{details.BrandName}}</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;">
{{details.FullBrandName}}
<view class="info1 flex flex-between">
<view class="info1-item">
<view class="info1-con">
{{details.ShopNum}}
</view>
<view style="width: 100%;height: 35px;display: flex;align-items: center;justify-content: space-between;">
<view class="label-b" :style="{'background':mainColor}">
{{details.ProjectName}}
<view class="info1-title">
店铺数量
</view>
<image v-if="details.CollectId>0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-love.png" style="width: 63px;height: 63px;" @click="getlove()"></image>
<image v-if="details.CollectId==0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_509.png" style="width: 63px;height: 63px;" @click="getlove()"></image>
</view>
<view class="brand-xinx">
<view class="brand-xinx-item">
<view class="brand-xinx-item-t" :style="{color:mainColor}">{{details.ShopNum>0?details.ShopNum:'/'}}</view>
<view class="brand-xinx-item-m">店铺数量</view>
<view class="info1-item">
<view class="info1-con">
{{details.ShopNum}}
</view>
<view class="brand-xinx-item" style="padding-left: 10px;">
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.BuiltUpArea==0 && details.EndBuiltUpArea!=0">{{details.EndBuiltUpArea>=10000?details.EndBuiltUpArea/10000+'万':details.EndBuiltUpArea}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.EndBuiltUpArea==0 && details.BuiltUpArea!=0">{{details.BuiltUpArea>=10000?details.BuiltUpArea/10000+'万':details.BuiltUpArea}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.BuiltUpArea!=0 && details.EndBuiltUpArea!=0">{{details.BuiltUpArea>=10000?details.BuiltUpArea/10000+'万':details.BuiltUpArea}}~{{details.EndBuiltUpArea>=10000?details.EndBuiltUpArea/10000+'万':details.EndBuiltUpArea}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.BuiltUpArea==0 && details.EndBuiltUpArea==0">/</view>
<view class="brand-xinx-item-m">店铺面积</view>
<view class="info1-title">
对标载体
</view>
<view class="brand-xinx-item" style="padding-left: 10px;">
</view>
<view class="info1-item">
<view class="info1-con">
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.AreaRequirement==0 && details.EndAreaRequirement!=0">{{details.EndAreaRequirement>=10000?details.EndAreaRequirement/10000+'万':details.EndAreaRequirement}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.EndAreaRequirement==0 && details.AreaRequirement!=0">{{details.AreaRequirement>=10000?details.AreaRequirement/10000+'万':details.AreaRequirement}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.AreaRequirement!=0 && details.EndAreaRequirement!=0">{{details.AreaRequirement>=10000?details.AreaRequirement/10000+'万':details.AreaRequirement}}~{{details.EndAreaRequirement>=10000?details.EndAreaRequirement/10000+'万':details.EndAreaRequirement}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.AreaRequirement==0 && details.EndAreaRequirement==0">/</view>
<view class="brand-xinx-item-m">需求面积</view>
</view>
<view class="info1-title">
面积需求
</view>
<view class="brand-x">
<view class="brand-x-l">拓店区域:</view>
<view class="brand-x-r">{{details.StoreExpansion}}</view>
</view>
<view class="brand-x">
<view class="brand-x-l">品牌定位:</view>
<view class="brand-x-r">{{details.BrandType}}</view>
</view>
<view class="brand-x">
<view class="brand-x-l">客群定位:</view>
<view class="brand-x-r">{{details.CustomerType}}</view>
<view class="baseinfo">
<!-- <view class="baseinfo-item flex ">
<view class="baseinfo-label">
拓店区域:
</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;">
<image :src='details.Logo' style="width: 100%;height: 100%;" mode="aspectFill"></image>
<view class="baseinfo-con">
{{details.StoreExpansion}}
</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;">
{{details.BrandName}}
</view>
<view class="baseinfo-item flex ">
<view class="baseinfo-label">
品牌定位:
</view>
<view class="baseinfo-con">
商业地产+体育运动的新型“SPORTMALL”的全新商业场景
</view>
</view> -->
<view class="baseinfo-item flex ">
<view class="baseinfo-label">
客群定位:
</view>
<view class="baseinfo-con">
{{details.CustomerType}}
</view>
</view>
<view class="baseinfo-item flex ">
<view class="baseinfo-label">
行业定位:
</view>
<view class="baseinfo-con">
{{details.BrandType}}
</view>
</view>
<view class="baseinfo-item flex ">
<view class="baseinfo-label">
开店方向:
</view>
<view class="baseinfo-con">
{{details.StoreExpansion}}
</view>
</view>
<view class="baseinfo-item flex ">
<view class="baseinfo-label">
拓展对接人:
</view>
<view class="baseinfo-con" v-if="details.WishDescription==null || details.WishDescription ==''">
暂无
</view>
</view>
<view style="width: 100%;height: 360rpx;" v-if="details.WishDescription && details.WishDescription !=''">
<image :src="details.WishCard" style="width: 100%;height: 360rpx;border-radius: 20px;"></image>
</view>
</view>
<view class="brand-title">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-tzxq.png"
mode="widthFix"></image>
</view>
<view style="margin-top: 30rpx;" v-if="details.WishDescription && details.WishDescription!=''">
<h-parse :content="details.WishDescription" @navigate="clickDescription"></h-parse>
</view>
<view style="margin-top: 30rpx;" v-if=" details.WishDescription=='' || details.WishDescription==null">
</view>
<view class="brand-title">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-wyxq.png" mode="widthFix"></image>
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-wyxq.png"
mode="widthFix"></image>
</view>
<view class="Listbox" >
......@@ -156,35 +220,11 @@
</view>
</view>
<view class="brand-title">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-tzxq.png" mode="widthFix"></image>
</view>
<view style="margin-top: 30px;" v-if="details.Advertising!=''">
<h-parse :content="details.Advertising" @navigate="clickDescription"></h-parse>
</view>
<view style="margin-top: 30px;" v-if="details.Advertising==''">
</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;" v-if="details.Other!=''">
<h-parse :content="details.Other" @navigate="clickDescription"></h-parse>
</view>
<view style="margin-top: 30px;" v-if="details.Other==''">
</view>
</view>
</view>
</scroll-view>
<bianmarenTooltip
:gravity="gravity"
:tooltipShow="tooltipShow"
:btns="tooltipBtns"
:eleId="eleId"
></bianmarenTooltip>
<bianmarenTooltip :gravity="gravity" :tooltipShow="tooltipShow" :btns="tooltipBtns" :eleId="eleId">
</bianmarenTooltip>
</view>
</template>
......@@ -199,8 +239,9 @@
},
data() {
return {
ID:0,
details:{},
rate: 5,
ID: 0,
details: {},
typeList: [{
Id: 0,
Name: '视频'
......@@ -208,43 +249,68 @@
Id: 1,
Name: '图片'
}],
boxOption:0,
navsOption:0,
titleStyle:{},
active:0,
mainColor:'',
controls:false,//显示默认控件
EquityList:[
{"Title":"上下水","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs-n.png",
boxOption: 0,
navsOption: 0,
titleStyle: {},
active: 0,
mainColor: '',
controls: false, //显示默认控件
EquityList: [{
"Title": "上下水",
"ImagePath": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs.png",
"Image_n": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs-n.png",
},
{
"Title": "排污",
"ImagePath": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw.png",
"Image_n": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw-n.png"
},
{
"Title": "燃气",
"ImagePath": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh.png",
"Image_n": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh-n.png"
},
{
"Title": "电量负荷",
"ImagePath": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl.png",
"Image_n": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl-n.png"
},
{
"Title": "新风",
"ImagePath": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf.png",
"Image_n": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf-n.png"
},
{
"Title": "排烟量",
"ImagePath": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl.png",
"Image_n": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl-n.png"
},
{
"Title": "空调",
"ImagePath": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt.png",
"Image_n": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt-n.png"
},
{
"Title": "管径",
"ImagePath": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj.png",
"Image_n": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj-n.png"
},
{
"Title": "开口尺寸",
"ImagePath": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc.png",
"Image_n": "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc-n.png"
},
{"Title":"排污","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw-n.png"},
{"Title":"燃气","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh-n.png"},
{"Title":"电量负荷","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl-n.png"},
{"Title":"新风","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf-n.png"},
{"Title":"排烟量","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl-n.png"},
{"Title":"空调","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt-n.png"},
{"Title":"管径","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj-n.png"},
{"Title":"开口尺寸","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc-n.png"},
],
gravity:'top',
tooltipShow:false,
tooltipBtns:["今日sad"],
eleId:"",//点击元素
gravity: 'top',
tooltipShow: false,
tooltipBtns: ["今日sad"],
eleId: "", //点击元素
}
},
onLoad(options) {
let that=this
if(options && options.id){
let that = this
if (options && options.id) {
this.ID = options.id
this.GetBrandDetails()
}
......@@ -254,13 +320,24 @@
that.titleStyle = {
height: "45px",
paddingTop: `${res.statusBarHeight}px`,
opacity:"0%"
opacity: "0%"
};
},
});
this.mainColor = this.$uiConfig.mainColor;
uni.setNavigationBarTitle({
title: "详情"
})
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#D40224',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
},
onShareTimeline() {//朋友圈
onShareTimeline() { //朋友圈
let uid = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").UserId :
0;
......@@ -278,12 +355,12 @@
}
let Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
return {
title: this.details.FullBrandName?this.details.FullBrandName:'',
query: "user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up +'&id=' +this.ID,
imageUrl:this.details.BannerList && this.details.BannerList.length>0?this.details.BannerList[0]:'',
title: this.details.FullBrandName ? this.details.FullBrandName : '',
query: "user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up + '&id=' + this.ID,
imageUrl: this.details.BannerList && this.details.BannerList.length > 0 ? this.details.BannerList[0] : '',
};
},
onShareAppMessage(res) {//朋友
onShareAppMessage(res) { //朋友
let uid = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").UserId :
0;
......@@ -301,27 +378,28 @@
}
let Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
return {
title: this.details.FullBrandName?this.details.FullBrandName:'',
path: "/pages/index/index?user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up +'&id=' +this.ID+'&JumpType=15',
imageUrl: this.details.BannerList && this.details.BannerList.length>0?this.details.BannerList[0]:'',
title: this.details.FullBrandName ? this.details.FullBrandName : '',
path: "/pages/index/index?user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up + '&id=' + this
.ID + '&JumpType=15',
imageUrl: this.details.BannerList && this.details.BannerList.length > 0 ? this.details.BannerList[0] : '',
};
},
methods: {
showTips(id,text,showis){
showTips(id, text, showis) {
clearInterval(timer);
if(this.eleId== id && this.tooltipShow == true){
if (this.eleId == id && this.tooltipShow == true) {
this.tooltipShow = false
}else{
console.log(text,showis)
if(text!=undefined && text!=null && text!='' && showis ==1 ){
} else {
console.log(text, showis)
if (text != undefined && text != null && text != '' && showis == 1) {
this.eleId = id;
this.tooltipBtns = [text]
this.tooltipShow = true;
timer = setTimeout(()=>{
timer = setTimeout(() => {
this.tooltipShow = false;
},3000)
}else{
}, 3000)
} else {
this.tooltipShow = false;
}
......@@ -331,23 +409,24 @@
clickDescription(e) {
console.log(e);
},
GetBrandDetails(){
this.request2(
{
GetBrandDetails() {
this.request2({
url: '/api/AppletTrade/GetBrandDetails',
data: {ID:this.ID}
data: {
ID: this.ID
}
},
res => {
if(res.resultCode==1){
if (res.resultCode == 1) {
this.details = res.data;
if(res.data.VideoUrl==''){
this.active=1
if (res.data.VideoUrl == '') {
this.active = 1
};
this.details.imgs=[]
this.details.BannerList.forEach(x=>{
let obj= {
name:x
this.details.imgs = []
this.details.BannerList.forEach(x => {
let obj = {
name: x
}
this.details.imgs.push(obj)
})
......@@ -373,8 +452,9 @@
});
},
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.tooltipShow = false
this.$forceUpdate()
},
......@@ -388,29 +468,32 @@
this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.requestFullScreen({
direction:0
direction: 0
})
},
videoControl(e){
if(e.detail.fullScreen==false){
videoControl(e) {
if (e.detail.fullScreen == false) {
this.videoContext.stop()
this.controls=false
}else{
this.controls = false
} else {
this.videoContext.play()
this.controls=true
this.controls = true
}
},
getlove(){
this.request2(
{
getlove() {
this.request2({
url: '/api/AppletTrade/GetCollect',
data: {Type:2,SourceId:this.ID,Id:this.details.CollectId}
data: {
Type: 2,
SourceId: this.ID,
Id: this.details.CollectId
}
},
res => {
if(res.resultCode==1){
if (res.resultCode == 1) {
uni.showToast({
title: res.message,
icon:'none'
icon: 'none'
});
this.GetBrandDetails()
}
......@@ -422,85 +505,175 @@
}
</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;
<style lang="scss" scoped>
.flex {
display: flex;
}
.wrap {
flex-wrap: wrap;
}
.flex-center {
justify-content: center;
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{
.flex-between {
justify-content: space-between
}
.item-center {
align-items: center;
}
.bg-red {
background-color: #D40224;
}
.detail-box {
width: 100%;
box-shadow: 0px -4rpx 71rpx 0rpx rgba(111, 111, 111, 0.26);
border-radius: 50rpx 50rpx 0rpx 0rpx;
padding: 40rpx 40rpx 90rpx 40rpx;
font-family: PingFang SC;
background-color: #FFFFFF;
.header {
margin-bottom: 20rpx;
align-items: flex-start;
.title {
max-width: calc(100vw - 100rpx - 70rpx);
font-size: 42rpx;
font-weight: 800;
color: #1F1F1F;
margin-right: 20rpx;
}
.tag-box {
border-radius: 6rpx;
width: 70px;
display: flex;
align-items: center;
margin-top: 15px;
margin-top: 4px;
.tag1 {
padding: 7rpx 10rpx;
background-color: #1F1F1F;
font-size: 20rpx;
color: #FFFFFF;
}
.tag2 {
padding: 7rpx 10rpx;
background-image: linear-gradient(90deg, #E8CEA5, #CAA974);
font-size: 20rpx;
color: #1F1F1F;
}
.brand-xinx-item{
width: 33%;
font-size: 17px;
}
.brand-xinx-item-m{
font-size: 12px;
color: #A4A4A4;
margin: 10px 0;
}
.brand-xinx-item-t{
.score-box {
height: 40rpx;
margin-bottom: 35rpx;
.rate {
margin-right: 20rpx;
}
.score {
font-size: 20rpx;
font-weight: 500;
color: #F30329;
margin-right: 20rpx;
}
.desire {
font-size: 20rpx;
color: #111111;
}
}
.img-box {
height: 226rpx;
border-radius: 20rpx;
box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
margin-bottom: 45rpx;
display: flex;
align-items: flex-end;
align-items: center;
justify-content: space-between;
overflow: hidden;
.img {
width: calc((100vw - 80rpx - 20rpx)/3);
height: 226rpx;
}
}
.info1 {
margin-bottom: 60rpx;
.info1-item {
width: 200rpx;
.info1-con {
font-size: 32rpx;
font-weight: bold;
color: #F30329;
text-align: center;
margin-bottom: 18rpx;
}
.info1-title {
text-align: center;
font-size: 24rpx;
font-weight: 500;
color: #A4A4A4;
}
}
.brand-x{
width: 100%;
display: flex;
align-items: flex-start;
margin-top: 18px;
}
.brand-x-l{
font-size: 13px;
.baseinfo {
margin-bottom: 40rpx;
.baseinfo-item {
margin-bottom: 30rpx;
.baseinfo-label {
font-size: 24rpx;
font-weight: 500;
color: #A4A4A4;
width: 130rpx;
margin-right: 10rpx;
white-space: nowrap;
}
.brand-x-r{
font-size: 13px;
color: #1F1F1F;
line-height: 20px;
font-family: PingFang SC;
width: calc(100vw - 40px - 130rpx);
.baseinfo-con {
font-size: 26rpx;
font-weight: 500;
color: #1F1F1F;
}
.brand-title{
}
}
}
.brand-title {
width: 134rpx;
margin-top: 30px;
}
.brand-title image{
.brand-title image {
width: 100%;
height: auto;
}
.Listbox{
.Listbox {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.Listbox-item{
.Listbox-item {
width: 25%;
display: flex;
flex-direction: column;
......@@ -509,11 +682,13 @@
align-items: center;
justify-content: center;
}
.Listbox-item image{
width: 74rpx;height: auto;
.Listbox-item image {
width: 74rpx;
height: auto;
}
.list-item-text{
.list-item-text {
width: calc(100vw / 4);
margin-top: 5px;
text-align: center;
......
<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="details.imgs"
:effect3d="false"
:height="700"
:interval="5000"
:border-radius="0"
@click="previewImage"
name='name'
v-if="active==1"
></u-swiper>
<view style="background-color: #111;height: 700rpx;position: relative;" v-if="active==0">
<video id="myVideo" :src="details.VideoUrl" style="width: 100%;height: 100%;"
object-fit ='fill'
:controls='controls'
:show-center-play-btn='false'
:show-fullscreen-btn='false'
@fullscreenchange='videoControl'
></video>
<view @click="enlarge(details.VideoUrl)" 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;" v-if="details.VideoUrl!=''">
<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;">{{details.BannerList.length}}</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;">{{details.BrandName}}</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;">
{{details.FullBrandName}}
</view>
<view style="width: 100%;height: 35px;display: flex;align-items: center;justify-content: space-between;">
<view class="label-b" :style="{'background':mainColor}">
{{details.ProjectName}}
</view>
<image v-if="details.CollectId>0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-love.png" style="width: 63px;height: 63px;" @click="getlove()"></image>
<image v-if="details.CollectId==0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_509.png" style="width: 63px;height: 63px;" @click="getlove()"></image>
</view>
<view class="brand-xinx">
<view class="brand-xinx-item">
<view class="brand-xinx-item-t" :style="{color:mainColor}">{{details.ShopNum>0?details.ShopNum:'/'}}</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}" v-if="details.BuiltUpArea==0 && details.EndBuiltUpArea!=0">{{details.EndBuiltUpArea>=10000?details.EndBuiltUpArea/10000+'万':details.EndBuiltUpArea}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.EndBuiltUpArea==0 && details.BuiltUpArea!=0">{{details.BuiltUpArea>=10000?details.BuiltUpArea/10000+'万':details.BuiltUpArea}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.BuiltUpArea!=0 && details.EndBuiltUpArea!=0">{{details.BuiltUpArea>=10000?details.BuiltUpArea/10000+'万':details.BuiltUpArea}}~{{details.EndBuiltUpArea>=10000?details.EndBuiltUpArea/10000+'万':details.EndBuiltUpArea}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.BuiltUpArea==0 && details.EndBuiltUpArea==0">/</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}" v-if="details.AreaRequirement==0 && details.EndAreaRequirement!=0">{{details.EndAreaRequirement>=10000?details.EndAreaRequirement/10000+'万':details.EndAreaRequirement}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.EndAreaRequirement==0 && details.AreaRequirement!=0">{{details.AreaRequirement>=10000?details.AreaRequirement/10000+'万':details.AreaRequirement}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.AreaRequirement!=0 && details.EndAreaRequirement!=0">{{details.AreaRequirement>=10000?details.AreaRequirement/10000+'万':details.AreaRequirement}}~{{details.EndAreaRequirement>=10000?details.EndAreaRequirement/10000+'万':details.EndAreaRequirement}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.AreaRequirement==0 && details.EndAreaRequirement==0">/</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">{{details.StoreExpansion}}</view>
</view>
<view class="brand-x">
<view class="brand-x-l">品牌定位:</view>
<view class="brand-x-r">{{details.BrandType}}</view>
</view>
<view class="brand-x">
<view class="brand-x-l">客群定位:</view>
<view class="brand-x-r">{{details.CustomerType}}</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;">
<image :src='details.Logo' style="width: 100%;height: 100%;" mode="aspectFill"></image>
</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;">
{{details.BrandName}}
</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 id="kiakou" class="Listbox-item" @click="showTips('kiakou',details.ShopSize,details.IsShopSize)">
<image :src="EquityList[8].ImagePath" v-if="details.IsShopSize==1" mode="widthFix"></image>
<image :src="EquityList[8].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.IsShopSize==1?'#424242':'#D6D6D6'}">{{EquityList[8].Title}}</text>
</view>
<view class="Listbox-item" >
<image :src="EquityList[0].ImagePath" v-if="details.Plumbing==1" mode="widthFix"></image>
<image :src="EquityList[0].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.Plumbing==1?'#424242':'#D6D6D6'}">{{EquityList[0].Title}}</text>
</view>
<view class="Listbox-item" >
<image :src="EquityList[7].ImagePath" v-if="details.Caliber==1" mode="widthFix"></image>
<image :src="EquityList[7].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.Caliber==1?'#424242':'#D6D6D6'}">{{EquityList[7].Title}}</text>
</view>
<view class="Listbox-item" >
<image :src="EquityList[1].ImagePath" v-if="details.Sewage==1" mode="widthFix"></image>
<image :src="EquityList[1].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.Sewage==1?'#424242':'#D6D6D6'}">{{EquityList[1].Title}}</text>
</view>
<!-- 燃气 -->
<view class="Listbox-item" id="ranqi" @click="showTips('ranqi',details.RanQiBZ,details.RanQi)">
<image :src="EquityList[2].ImagePath" v-if="details.RanQi==1" mode="widthFix"></image>
<image :src="EquityList[2].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.RanQi==1?'#424242':'#D6D6D6'}">{{EquityList[2].Title}}</text>
</view>
<view class="Listbox-item" id="dianliang" @click="showTips('dianliang',details.DianLiang,details.IsDianLiang)">
<image :src="EquityList[3].ImagePath" v-if="details.IsDianLiang==1" mode="widthFix"></image>
<image :src="EquityList[3].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.IsDianLiang==1?'#424242':'#D6D6D6'}">{{EquityList[3].Title}}</text>
</view>
<view class="Listbox-item" id="paiyan" @click="showTips('paiyan',details.PaiYanBZ,details.PaiYan)">
<image :src="EquityList[5].ImagePath" v-if="details.PaiYan==1" mode="widthFix"></image>
<image :src="EquityList[5].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.PaiYan==1?'#424242':'#D6D6D6'}">{{EquityList[5].Title}}</text>
</view>
<view class="Listbox-item" >
<image :src="EquityList[6].ImagePath" v-if="details.KongTiao==1" mode="widthFix"></image>
<image :src="EquityList[6].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.KongTiao==1?'#424242':'#D6D6D6'}">{{EquityList[6].Title}}</text>
</view>
<view class="Listbox-item" >
<image :src="EquityList[4].ImagePath" v-if="details.XinFeng==1" mode="widthFix"></image>
<image :src="EquityList[4].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.XinFeng==1?'#424242':'#D6D6D6'}">{{EquityList[4].Title}}</text>
</view>
</view>
<view class="brand-title">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-tzxq.png" mode="widthFix"></image>
</view>
<view style="margin-top: 30px;" v-if="details.Advertising!=''">
<h-parse :content="details.Advertising" @navigate="clickDescription"></h-parse>
</view>
<view style="margin-top: 30px;" v-if="details.Advertising==''">
</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;" v-if="details.Other!=''">
<h-parse :content="details.Other" @navigate="clickDescription"></h-parse>
</view>
<view style="margin-top: 30px;" v-if="details.Other==''">
</view>
</view>
</view>
</scroll-view>
<bianmarenTooltip
:gravity="gravity"
:tooltipShow="tooltipShow"
:btns="tooltipBtns"
:eleId="eleId"
></bianmarenTooltip>
</view>
</template>
<script>
import hParse from "@/components/u-parse/parse.vue";
import bianmarenTooltip from '../components/bianmaren-tooltips.vue'
let timer
export default {
components: {
hParse,
bianmarenTooltip
},
data() {
return {
ID:0,
details:{},
typeList: [{
Id: 0,
Name: '视频'
}, {
Id: 1,
Name: '图片'
}],
boxOption:0,
navsOption:0,
titleStyle:{},
active:0,
mainColor:'',
controls:false,//显示默认控件
EquityList:[
{"Title":"上下水","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs-n.png",
},
{"Title":"排污","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw-n.png"},
{"Title":"燃气","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh-n.png"},
{"Title":"电量负荷","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl-n.png"},
{"Title":"新风","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf-n.png"},
{"Title":"排烟量","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl-n.png"},
{"Title":"空调","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt-n.png"},
{"Title":"管径","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj-n.png"},
{"Title":"开口尺寸","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc-n.png"},
],
gravity:'top',
tooltipShow:false,
tooltipBtns:["今日sad"],
eleId:"",//点击元素
}
},
onLoad(options) {
let that=this
if(options && options.id){
this.ID = options.id
this.GetBrandDetails()
}
uni.getSystemInfo({
success(res) {
that.titleStyle = {
height: "45px",
paddingTop: `${res.statusBarHeight}px`,
opacity:"0%"
};
},
});
this.mainColor = this.$uiConfig.mainColor;
},
onShareTimeline() {//朋友圈
let uid = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").UserId :
0;
if (uid == 0) {
uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
}
let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").SmallShopId :
0;
if (SmallShopId == 0) {
//如果微店id为0 去找所属微店id
SmallShopId = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").UserSmallShopId :
0;
}
let Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
return {
title: this.details.FullBrandName?this.details.FullBrandName:'',
query: "user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up +'&id=' +this.ID,
imageUrl:this.details.BannerList && this.details.BannerList.length>0?this.details.BannerList[0]:'',
};
},
onShareAppMessage(res) {//朋友
let uid = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").UserId :
0;
if (uid == 0) {
uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
}
let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").SmallShopId :
0;
if (SmallShopId == 0) {
//如果微店id为0 去找所属微店id
SmallShopId = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").UserSmallShopId :
0;
}
let Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
return {
title: this.details.FullBrandName?this.details.FullBrandName:'',
path: "/pages/index/index?user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up +'&id=' +this.ID+'&JumpType=15',
imageUrl: this.details.BannerList && this.details.BannerList.length>0?this.details.BannerList[0]:'',
};
},
methods: {
showTips(id,text,showis){
clearInterval(timer);
if(this.eleId== id && this.tooltipShow == true){
this.tooltipShow = false
}else{
console.log(text,showis)
if(text!=undefined && text!=null && text!='' && showis ==1 ){
this.eleId = id;
this.tooltipBtns = [text]
this.tooltipShow = true;
timer = setTimeout(()=>{
this.tooltipShow = false;
},3000)
}else{
this.tooltipShow = false;
}
}
},
clickDescription(e) {
console.log(e);
},
GetBrandDetails(){
this.request2(
{
url: '/api/AppletTrade/GetBrandDetails',
data: {ID:this.ID}
},
res => {
if(res.resultCode==1){
this.details = res.data;
if(res.data.VideoUrl==''){
this.active=1
};
this.details.imgs=[]
this.details.BannerList.forEach(x=>{
let obj= {
name:x
}
this.details.imgs.push(obj)
})
}
}
);
},
changeHandler(i) {
this.active = i;
},
previewImage(i) {
console.log(i)
uni.previewImage({
urls: this.details.BannerList,
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.tooltipShow = false
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
}
},
getlove(){
this.request2(
{
url: '/api/AppletTrade/GetCollect',
data: {Type:2,SourceId:this.ID,Id:this.details.CollectId}
},
res => {
if(res.resultCode==1){
uni.showToast({
title: res.message,
icon:'none'
});
this.GetBrandDetails()
}
}
);
}
}
}
</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;
}
.Listbox-item image{
width: 74rpx;height: auto;
}
.list-item-text{
width: calc(100vw / 4);
margin-top: 5px;
text-align: center;
font-size: 12px;
}
</style>
......@@ -663,6 +663,14 @@
this.glBrandName = data.BrandName
this.disabled2 = true
this.disabled3 = true
if(this.model.BannerList.length>0){
this.model.BannerList.forEach(x=>{
let obj ={
url:x
}
this.fileList.push(obj)
})
}
this.BrandClassList.forEach(x=>{
if(this.model.BrandClassId == x.ID){
this.BrandClassName = x.ClassName;
......
<template>
<view class="detail">
<scroll-view scroll-y="true" style="height: 100vh;">
<view style="box-shadow: 0px 5px 25px 0px rgba(218, 220, 230, 0.85);margin-bottom: 20px;border-radius: 10px;">
<view class="top">
<view class="submit-date">
提交日期:2021.07.02
提交日期:{{datas.UpdateDate}}
</view>
<view class="modify-btn">
<view class="modify-btn" @click="goedit()">
修改
</view>
</view>
<view class="detail-con">
<view class="title">
兰蔻小黑瓶肌底液最强一代
{{datas.BranchName}}
</view>
<view class="con1">
<text class="">
对标载体:万达广场
</text>
<text class="">
发展区域:锦江区
</text>
<view class="con1_item">
对标载体:{{datas.CarrierName}}
</view>
<view class="con1_item">
发展区域:{{datas.Area}}
</view>
</view>
<u-divider :margin-top="20" :margin-bottom="20" half-width="100" color="#0B0B0B" fontSize='32' bg-color="transparent">清单详情</u-divider>
<view >
<h-parse :content="datas.Description" @navigate="clickDescription"></h-parse>
</view>
<u-divider :margin-top="20" :margin-bottom="20" half-width="100" color="#0B0B0B" fontSize='32' bg-color="transparent">我的名片</u-divider>
<view style="width: 100%;" @click="previewImage([datas.NameCard],1)" >
<image :src='datas.NameCard' mode="aspectFill" style="width: 100%;height: 362rpx;border-radius: 10px;"></image>
</view>
<view class="title2">
清单详情
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import hParse from "@/components/u-parse/parse.vue";
export default{
components: {
hParse
},
data(){
return{
WishId:0,
datas:null
}
},
onLoad(options) {
if(options && options.Id){
this.WishId = options.Id
}
this.getdetails()
},
created() {
uni.setNavigationBarTitle({
title: "心愿清单详情"
})
},
methods:{
getdetails(){
let parms = {
url: "/api/AppletTrade/GetMyWishInfo",
data:{WishId:this.WishId}
}
this.request2(parms, (res) => {
this.loading = false;
if (res.resultCode == 1) {
this.datas = res.data
}
})
},
clickDescription(){
},
previewImage(imgs,i) {
uni.previewImage({
urls: imgs,
current: i,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function(data) {},
fail: function(err) {
console.log(err.errMsg);
},
},
});
},
goedit(){
uni.navigateTo({
url: '/pages/kotra/wish/myWishPlan?Id='+this.datas.Id +'&type=3'
})
}
}
}
</script>
......@@ -50,6 +102,10 @@
<style lang="scss" scoped>
.detail{
font-family: PingFang SC;
width: 100%;
height: 100vh;
background: #FFF;
padding: 15px;
.top{
height: 240rpx;
padding-top: 50rpx;
......@@ -75,12 +131,12 @@
}
}
.detail-con{
width: 690rpx;
margin: 0 auto;
background-color: #FFFFFF;
box-shadow: 0px 10rpx 50rpx 0px rgba(218, 220, 230, 0.85);
border-radius: 20rpx;
padding: 55rpx 55rpx 75rpx 55rpx;
padding: 15px;
.title{
font-size: 38rpx;
font-weight: 800;
......@@ -91,11 +147,14 @@
.con1{
display: flex;
justify-content: space-between;
align-items: center;
align-items: flex-start;
font-size: 24rpx;
font-weight: 500;
color: #80808A;
margin-bottom: 60rpx;
.con1_item{
width: 49%;
}
}
.title2{
text-align: center;
......
<template>
<view>
<view style="width: 100%;height: 100vh;">
<view class="fbanniu" @click="btnclick">
<u-icon name="plus" color="#FFF" size='30'></u-icon>
<!-- <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/fabupyq.png" style="height: 26rpx;" mode="aspectFit"></image> -->
<text style="font-size: 10px;color: #FFF;">新增</text>
</view>
<u-empty v-if="dataList.length == 0" text="暂无数据" mode="list" class="noBox"></u-empty>
<view class="list-box" v-if="dataList.length > 0">
<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
style="height: 100%;">
<view v-for="(item,index) in dataList" :key="index" class="wish-item">
<view v-for="(item,index) in dataList" :key="index" class="wish-item" @click="goDetail(item.Id)">
<view class="name">
{{item.name}}
{{item.BranchName}}
</view>
<view class="flex">
<view class="addr flex">
<u-icon name="location" color="#F40329"></u-icon>{{item.addr}}
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/floor_red.png" style="width: 13px;height: 12px;margin-right: 5px;"></image>
{{item.CarrierName}}
</view>
<view class="addr flex">
<u-icon name="location" color="#F40329"></u-icon>{{item.location}}
<view class="addr flex" style="margin-left: 10px;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/address_red.png" style="width: 9px;height: 13px;margin-right: 5px;"></image>
{{item.Area}}
</view>
</view>
<view class="con" @click="goDetail">
{{item.con}}
<view class="con" >
<view v-html='item.Description' style="width: 100%;height: 50px;overflow: hidden;"></view>
</view>
<view class="flex between-center">
<view class="flex between-center" style="margin-top: 10px;">
<view class="date">
{{item.date}}
{{item.UpdateDate}}
</view>
<view class="">
编辑
<view class="" @click.stop="goedit(item.Id)">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/edit_black.png" style="width: 13px;height: 13px;"></image>
</view>
</view>
</view>
<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20"
bg-color="#F6F6F6" />
bg-color="#FFFFFF" />
</scroll-view>
</view>
<!-- 加载中 -->
......@@ -53,54 +61,14 @@
active: 0,
searchKey:"",
typeList: [],
dataList:[
{
name:"兰蔻小黑瓶肌底液最强一代",
addr:"武侯区",
location:"万达广场",
con:"这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情",
date:"2021-07-02",
},
{
name:"兰蔻小黑瓶肌底液最强一代",
addr:"武侯区",
location:"万达广场",
con:"这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情",
date:"2021-07-02",
},
{
name:"兰蔻小黑瓶肌底液最强一代",
addr:"武侯区",
location:"万达广场",
con:"这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情",
date:"2021-07-02",
},
{
name:"兰蔻小黑瓶肌底液最强一代",
addr:"武侯区",
location:"万达广场",
con:"这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情",
date:"2021-07-02",
},
{
name:"兰蔻小黑瓶肌底液最强一代",
addr:"武侯区",
location:"万达广场",
con:"这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情介绍,这里显示详情",
date:"2021-07-02",
},
],
dataList:[],
msg:{
pageIndex:1,
pageSize:10,
MetroName:"",
UserId:"",
BranchName:"",
CarrierName:"",
MetroNum:"",
Developers:"",
StartOpenTime:"",
EndOpenTime:"",
ProjectType:0,
OrderBy:0
},
loading: false,
pageCount:0,
......@@ -130,39 +98,15 @@
uni.setNavigationBarTitle({
title: '心愿清单列表',
});
this.msg.UserId = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserId:'0'
this.getCarrierPageList()
},
methods: {
// 获取载体列表
getTypeList(){
let parms = {
url: "/api/AppletTrade/GetProjectTypeEnumList",
}
this.request2(parms, (res) => {
if (res.resultCode == 1) {
// this.pageCount = res.data.pageCount
this.typeList.push({
Id:0,
Name:"全部"
})
this.typeList = this.typeList.concat(res.data)
if(this.msg.ProjectType ==0){
}else{//指定跳入分类
this.typeList.map((x,i)=>{
if(x.Id== this.msg.ProjectType){
this.active = i;
}
})
}
}
})
this.getCarrierPageList()
},
// 获取载体分页列表
getCarrierPageList(){
let parms = {
url: "/api/AppletTrade/GetCarrierPageList",
url: "/api/AppletTrade/GetMyWishPageList",
data:this.msg
}
this.request2(parms, (res) => {
......@@ -176,25 +120,7 @@
}
})
},
changeHandler(i) {
this.active = i;
this.msg.ProjectType = this.typeList[i].Id;
this.msg.pageIndex = 1;
this.dataList= [];
this.getCarrierPageList()
},
openGood(id,type) {
uni.navigateTo({
url: '/pages/kotra/carrier/detail?id=' + id+"&&type="+type,
});
},
searchHandler(val){
this.msg.CarrierName=val
this.msg.pageIndex = 1;
this.dataList= [];
this.getCarrierPageList()
},
//触底事件
lower(e) {
if (this.msg.pageIndex < this.pageCount) {
......@@ -205,9 +131,20 @@
this.status = "nomore";
}
},
goDetail(){
goDetail(id){
console.log(id)
uni.navigateTo({
url: '/pages/kotra/wish/detail'
url: '/pages/kotra/wish/detail?Id='+id
})
},
btnclick(){//新增心愿
uni.navigateTo({
url: '/pages/kotra/wish/myWishPlan'
})
},
goedit(Id){
uni.navigateTo({
url: '/pages/kotra/wish/myWishPlan?Id='+Id +'&type=2'
})
}
}
......@@ -231,9 +168,9 @@
}
.wish-item{
width: 690rpx;
height: 297rpx;
margin: 0 auto 34rpx;
padding: 40rpx 30rpx;
padding: 30rpx;
background-color: #FFFFFF;
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(218, 220, 230, 0.85);
border-radius: 30rpx;
......@@ -249,6 +186,7 @@
font-weight: 500;
color: #999999;
margin-bottom: 20rpx;
align-items: center;
}
.con{
font-size: 24rpx;
......@@ -265,5 +203,20 @@
color: #BCBCBC;
}
}
.fbanniu{
width: 42px;
height: 42px;
border-radius: 21px;
position: fixed;
right: 20rpx;
bottom: 180rpx;
background: #40766E;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 99;
}
</style>
......@@ -53,7 +53,6 @@
justify-content: center;
margin-top: 20px;
}
}
}
......@@ -68,31 +67,31 @@
<view class="box_text">
<view class="box_text_l">品牌信息</view>
<view class="box_text_r">
<input type="text" v-model="addMsg.pinpai" :min='0' placeholder="输入品牌信息" style="font-size: 12px;text-align: right;">
<input type="text" v-model="addMsg.BranchName" :min='0' placeholder="输入品牌信息" style="font-size: 12px;text-align: right;">
</view>
</view>
<view class="box_text">
<view class="box_text_l">对标载体</view>
<view class="box_text_r">
<input type="text" v-model="addMsg.duibiaozhaiti" :min='0' placeholder="输入对标载体名称" style="font-size: 12px;text-align: right;">
<input type="text" v-model="addMsg.CarrierName" :min='0' placeholder="输入对标载体名称" style="font-size: 12px;text-align: right;">
</view>
</view>
<view class="box_text">
<view class="box_text_l">发展区域</view>
<view class="box_text_r">
<input type="text" v-model="addMsg.fazhannquyu" :min='0' placeholder="输入区域" style="font-size: 12px;text-align: right;">
<input type="text" v-model="addMsg.Area" :min='0' placeholder="输入区域" style="font-size: 12px;text-align: right;">
</view>
</view>
<view class="box_text" style="border-bottom: none;">
<view class="box_text_l">心愿详细</view>
</view>
<view @click="gorichText">
<view class="boxxq" v-if="addMsg.Content==''" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
<view class="boxxq" v-if="addMsg.Description==''" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
<image mode="aspectFill" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/wish-edit.png" style="width: 50px;height: 50px;"></image>
<view style="font-size: 14px;color: #1F1F1F;margin-top: 10px;">点击进入编辑>></view>
</view>
<view class="boxxq" v-if="addMsg.Content!=''">
<view v-html='addMsg.Content' style="width: 100%;overflow: hidden;"></view>
<view class="boxxq" v-if="addMsg.Description!=''" style="padding: 15px;">
<view v-html='addMsg.Description' style="width: 100%;overflow: hidden;"></view>
<view style="font-size: 14px;color: #1F1F1F;margin: 10px 0;width: 100%;text-align: center;">继续编辑>></view>
</view>
......@@ -102,12 +101,12 @@
<view class="box_text_l">我的名片</view>
</view>
<view @click="uploadcard">
<view class="boxxq" v-if="addMsg.mymp==''" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
<view class="boxxq" v-if="addMsg.NameCard==''" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
<image mode="aspectFill" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/wish-card.png" style="width: 60px;height: 46px;"></image>
<view style="font-size: 14px;color: #1F1F1F;margin-top: 10px;">添加名片>></view>
</view>
<view class="boxxq" v-if="addMsg.mymp!=''" style="overflow: hidden;">
<image mode="aspectFill" :src="addMsg.mymp" style="width: 100%px;height: 170px;border-radius: 10px;"></image>
<view class="boxxq" v-if="addMsg.NameCard!=''" style="overflow: hidden;border:none">
<image mode="aspectFill" :src="addMsg.NameCard" style="width: 100%px;height: 170px;border-radius: 10px;"></image>
</view>
</view>
......@@ -128,18 +127,26 @@
return{
mainColor:'',
addMsg:{
pinpai:'',
duibiaozhaiti:'',
fazhannquyu:"",
Content:'',
mymp:'',
Id:0,
BranchName:'',
CarrierName:'',
Area:"",
Description:'',
NameCard:'',
},
WishId:0,
action: this.host2 + "/api/File/UploadTencent",
type:1,//1列表为新增时 2列表修改 3详情修改
}
},
onLoad(options){
if(options && options.Id){
this.WishId = options.Id
this.getdetails()
}
if(options && options.type){
this.type = options.type
}
},
created(){
uni.setNavigationBarTitle({
......@@ -150,36 +157,48 @@
this.mainColor = this.$uiConfig.mainColor;
},
methods:{
getdetails(){
let parms = {
url: "/api/AppletTrade/GetMyWishInfo",
data:{WishId:this.WishId}
}
this.request2(parms, (res) => {
this.loading = false;
if (res.resultCode == 1) {
this.addMsg = res.data
}
})
},
submit(){//提交
if(this.addMsg.pinpai == ''){
if(this.addMsg.BranchName == ''){
uni.showToast({
title:'请输入品牌信息',
icon:'none'
})
return
}
if(this.addMsg.duibiaozhaiti == ''){
if(this.addMsg.CarrierName == ''){
uni.showToast({
title:'请输入对标载体',
icon:'none'
})
return
}
if(this.addMsg.fazhannquyu == ''){
if(this.addMsg.Area == ''){
uni.showToast({
title:'请输入发展区域',
icon:'none'
})
return
}
if(this.addMsg.Content == ''){
if(this.addMsg.Description == ''){
uni.showToast({
title:'请输入心愿详细',
icon:'none'
})
return
}
if(this.addMsg.mymp == ''){
if(this.addMsg.NameCard == ''){
uni.showToast({
title:'请上传我的名片',
icon:'none'
......@@ -190,13 +209,38 @@
title:'提交中...',
icon:'none'
})
//接口
setTimeout(()=>{
let parms = {
url: "/api/AppletTrade/SetMyWishInfo",
data:this.addMsg
}
let pages = getCurrentPages(); // 当前页面
let beforePage = pages[pages.length - 2]; // 前一个页面
let that = this
this.request2(parms, (res) => {
uni.hideLoading()
},4000)
if (res.resultCode == 1) {
uni.showToast({title: res.message,icon: 'none',})
setTimeout(()=>{
uni.navigateBack({
success: function() {
if(that.type==3){//1列表为新增时 2列表修改 3详情修改
beforePage.$vm.getdetails(); // 执行前一个页面的方法
}else if(that.type==1){
beforePage.$vm.getCarrierPageList();
}
}
});
},1000)
}
})
},
gorichText(){
let data = this.addMsg.Content
console.log(this.addMsg.Description)
let data = this.addMsg.Description
data= encodeURIComponent(data)//加密
uni.navigateTo({
url: '/pages/kotra/wish/richText?Content=' +data
......@@ -206,7 +250,7 @@
let regex = new RegExp('<img', 'gi');
let richtext = e
richtext = richtext.replace(regex, `<img width="100%"`); //图片超出的处理
this.addMsg.Content = richtext
this.addMsg.Description = richtext
},
uploadcard(){
uni.chooseImage({
......@@ -231,7 +275,7 @@
success: res => {
let data = JSON.parse(res.data)
// 上传完成后处理
this.addMsg.mymp = data.data
this.addMsg.NameCard = data.data
uni.hideLoading()
},
......
......@@ -120,13 +120,14 @@
justify-content: space-between;
padding: 0 15px;
}
.scroll-box{
}
.Jiaheactivity .scroll-box{
height: calc(100vh - 50px);
width: calc(100vw);
overflow: hidden;
padding-bottom:50px ;
}
}
</style>
<template>
<view class="Jiaheactivity" >
......
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