Skip to content

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

完成载体的详情

parent 7e715025
Show whitespace changes
Inline Side-by-side
Showing with 925 additions and 3 deletions
pages.json
View file @ f70d79a6
......@@ -764,6 +764,12 @@
"style": {
"navigationStyle": "custom"
}
}, {
"path": "carrier/detail_carrier", //新载体详情
"enablePullDownRefresh": true,
"style": {
"navigationStyle": "custom"
}
}, {
"path": "carrier/list" //品牌详情
}, {
......
pages/kotra/carrier/detail_carrier.vue 0 → 100644
View file @ f70d79a6
<template>
<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>
<view
style="background-color: #111; height: 700rpx; position: relative"
v-if="active == 0"
>
<video
id="myVideo"
:src="detailData.VideoUrl"
style="width: 100%; height: 100%"
:controls="controls"
:show-center-play-btn="false"
:show-fullscreen-btn="false"
@fullscreenchange="videoControl"
object-fit="fill"
></video>
<view
@click="enlarge"
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, 0.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, 0.6);
border-radius: 50rpx;
left: 50%;
bottom: 80px;
margin-left: -50px;
"
v-if="detailData.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
v-if="imgsList.length > 0"
style="
height: 50rpx;
position: absolute;
background-color: rgba(0, 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">{{
imgsList.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">{{
detailData.CarrierName
}}</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;
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">
{{ detailData.CarrierName }}
</view>
<view
style="margin-top: 16rpx; display: flex; align-items: center"
>
<!-- <u-tag
:text="detailData.ProjectTypeName"
mode="dark"
size="mini"
:bg-color="mainColor"
/> -->
<view class="carriertag">
<view class="carriertagsub1">类别</view>
<view class="carriertagsub2">{{detailData.CategoryName}}</view>
</view>
</view>
</view>
<!-- 关注 -->
<view
style="
width: 120rpx;
height: 120rpx;
margin-left: 12rpx;
margin-right: -40rpx;
"
@click="follow"
>
<image
v-if="detailData.CollectId == 0"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_509.png"
style="width: 100%; height: 100%"
></image>
<image
v-if="detailData.CollectId > 0"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/2024/Upload/Goods/638695271527470000.jpg"
style="width: 100%; height: 100%"
></image>
</view>
</view>
<!-- //奖章 -->
<view class="MedalBox" v-if="detailData.listEnroll && detailData.listEnroll.length > 0">
<view
v-for="(item, index) in detailData.listEnroll"
:key="index"
class="MedalBoxItem"
>
<image
:src="item.MedalImageBig"
mode="heightFix"
style="height: 100%"
/>
</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:mainColor}" style="font-weight: bold"
>{{ detailData.CarrierSize }}万㎡</text
>
</view>
<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
<text style="width: 156rpx; text-align: right">店铺数量：</text>
<text :style="{color:mainColor}" style="font-weight: bold">{{
detailData.ShopNum
}}</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:mainColor}" style=" font-weight: bold">{{
detailData.LayersNum
}}</text>
</view>
<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
<text style="width: 156rpx; text-align: right">车位数量：</text>
<text
:style="{color:mainColor}" style=" font-weight: bold"
v-if="detailData.CarNum > 0"
>{{ detailData.CarNum }}</text
>
<text
:style="{color:mainColor}" style="font-weight: bold"
v-if="detailData.CarNum <= 0"
>/</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:mainColor}" style="font-weight: bold"
v-if="detailData.AreaRequirement > 0"
>{{ detailData.AreaRequirement }}㎡</text
>
<text
:style="{color:mainColor}" style="font-weight: bold"
v-if="detailData.AreaRequirement <= 0"
>/</text
>
</view>
<view style="flex: 1; font-size: 26rpx; color: #a4a4a4">
<text style="width: 156rpx; text-align: right">经营面积：</text>
<text
:style="{color:mainColor}" style="font-weight: bold"
v-if="detailData.BuiltUpArea > 0"
>{{ detailData.BuiltUpArea }}㎡</text
>
<text
:style="{color:mainColor}" style="font-weight: bold"
v-if="detailData.BuiltUpArea <= 0"
>/</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:mainColor}" style="font-weight: bold">{{
detailData.OpeningStatus==0?'即将开业':(detailData.OpenTime?detailData.OpenTime:'')
}}</text>
</view>
</view>
<view
style="
font-size: 26rpx;
color: #a4a4a4;
margin-bottom: 30rpx;
font-weight: 500;
display: flex;
"
>
<text
style="width: 128rpx; text-align: right; display: inline-block"
>开发商：</text
>
<text style="color: #1f1f1f; font-weight: bold;flex:1;width:1px;">{{
detailData.Developers
}}</text>
</view>
<view
style="
font-size: 26rpx;
color: #a4a4a4;
margin-bottom: 30rpx;
font-weight: 500;
display: flex;
"
>
<text
style="width: 128rpx; text-align: right; display: inline-block"
>资产权属：</text
>
<text style="color: #1f1f1f; font-weight: bold;flex:1;width:1px;">{{
detailData.Ascription
}}</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="detailData.Logo"
style="width: 100%; height: auto"
mode="widthFix"
></image>
</view>
<view
@click="goMap(detailData.Address, LatAndLon.lon, LatAndLon.lat)"
style="
flex: 1;
padding-left: 34rpx;
background: rgba(1,126,223, 0.05);
height: 95rpx;
display: flex;
align-items: center;
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
"
>
<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="
width: 366rpx;
font-size: 30rpx;
color: #1f1f1f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
"
>
{{ detailData.Address }}</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 class="carrier-item-detail" v-if="detailData.Location!=''">
<div class="title">项目发展及定位</div>
<div class="content">{{ detailData.Location }}</div>
</view>
<view class="carrier-item-detail" v-if="detailData.BrandDemand!=''">
<div class="title">目标招商业态</div>
<div class="content">{{ detailData.BrandDemand }}</div>
</view>
<view class="carrier-item-detail" v-if="detailData.Crowd!=''">
<div class="title">周边人群结构特征</div>
<div class="content">{{ detailData.Crowd }}</div>
</view>
<view class="carrier-item-detail" v-if="detailData.VisitorsFlowrate!=''">
<div class="title">人流参数</div>
<div class="content">{{ detailData.VisitorsFlowrate }}</div>
</view>
<view class="carrier-item-detail" v-if="detailData.SupportingFacilities!=''">
<div class="title">配套设施</div>
<div class="content">{{ detailData.SupportingFacilities }}</div>
</view>
<view class="carrier-item-detail" v-if="detailData.PropertyComposition!=''">
<div class="title">物业构成</div>
<div class="content">{{ detailData.PropertyComposition }}</div>
</view>
<view class="carrier-item-detail" v-if="detailData.ManagementCompany!=''">
<div class="title">管理费用</div>
<div class="content">{{ detailData.ManagementCompany }}</div>
</view>
<view class="carrier-item-detail" v-if="detailData.HonorList&& detailData.HonorList.length>0">
<div class="title">荣誉墙</div>
<div class="content">
<view
style="
min-height: 148rpx;
box-shadow: 0px 4rpx 30rpx 0px rgba(167, 167, 167, 0.15);
border-radius: 20rpx;
display: flex;
flex-wrap: wrap;
">
<view
v-for="(item, index) in detailData.HonorList"
:key="index"
class="HonorItem"
>
<image :src="item" mode="heightFix" style="height: 100%" @click="previewImage(index,detailData.HonorList)" />
</view>
</view>
</div>
</view>
<!-- <view style="height: 30px;"> </view> -->
</view>
</view>
</scroll-view>
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth" ></auth>
<view class="carrier-query-contact">
<button
open-type="contact"
:send-message-title="detailData.CarrierName"
:send-message-path="'/pages/kotra/carrier/detail_carrier?id=' + id"
:send-message-img="imgsList[0]"
:show-message-card="true"
>
<text style="margin-left: 10rpx;" :style="{background:mainColor}">获取联系方式</text>
</button>
</view>
</view>
</template>
<script>
import auth from "@/components/auth/index.vue";
export default {
components: {
auth
},
data() {
return {
showAuth:false,
u:{},
id: 0,
imgsList: [],
typeList: [
{
Id: 0,
Name: "视频",
},
{
Id: 1,
Name: "图片",
},
],
ProjectType: "",
boxOption: 0,
navsOption: 0,
titleStyle: {},
active: 0,
mainColor: "",
likeStatus: false,
controls: false, //显示默认控件
LatAndLon: {
lon: "",
lat: "",
},
detailData: {
CreateDate: "",
},
};
},
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.detailData.CarrierName ? this.detailData.CarrierName : "",
query:
"user_id=" +
uid +
"&SmallShopId=" +
SmallShopId +
"&Up=" +
Up +
"&id=" +
this.id +
"&type=" +
this.ProjectType,
imageUrl:
this.detailData.BannerList && this.detailData.BannerList.length > 0
? this.detailData.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.detailData.CarrierName ? this.detailData.CarrierName : "",
path:
"/pages/index/index?user_id=" +
uid +
"&SmallShopId=" +
SmallShopId +
"&Up=" +
Up +
"&id=" +
this.id +
"&type=" +
this.ProjectType +
"&JumpType=16",
imageUrl:
this.detailData.BannerList && this.detailData.BannerList.length > 0
? this.detailData.BannerList[0]
: "",
};
},
onLoad(options) {
this.id = options.id;
// this.ProjectType = options.type;
this.u = uni.getStorageSync("mall_UserInfo");
if (!this.u) {
this.u = {
nickName: "未登录",
avatarUrl: "",
};
this.showAuth = true;
} else {
this.getDetail();
}
let that = this;
uni.getSystemInfo({
success(res) {
that.titleStyle = {
height: "45px",
paddingTop: `${res.statusBarHeight}px`,
opacity: "0%",
};
},
});
this.mainColor = this.$uiConfig.mainColor;
console.log(this.mainColor)
},
methods: {
reloadUserinfo() {
this.u = uni.getStorageSync("mall_UserInfo");
this.getDetail();
},
//关闭登录窗口
gbAuth() {
uni.navigateBack()
},
changeHandler(i) {
this.active = i;
},
previewImage(i,imgs=null) {
const imgArray = imgs?imgs:this.detailData.BannerList
uni.previewImage({
urls: imgArray,
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,
});
},
goMap(name, lon, 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: lon,
scale: 18,
name,
// address:"武侯区科华中路 2 号",
success: (res) => {
// console.log(res)
},
fail: (err) => {
// console.log(err)
},
});
},
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;
}
},
// 获取详情
getDetail() {
let parms = {
url: "/api/AppletTrade/GetBuildingCarrierDetails",//"/api/AppletTrade/GetCarrierDetails",
data: { ID: this.id },
};
this.request2(parms, (res) => {
if (res.resultCode == 1) {
this.detailData = res.data;
this.ProjectType = res.data.ProjectTypeName;
this.imgsList = [];
if (res.data.VideoUrl == "") {
this.active = 1;
}
if (Array.isArray(res.data.BannerList)) {
res.data.BannerList.map((e) => {
let obj = {
url: e,
};
this.imgsList.push(obj);
});
}
if (res.data.LatAndLon != null && res.data.LatAndLon.length > 0) {
let LatLon = res.data.LatAndLon.split(",");
this.LatAndLon.lat = parseFloat(LatLon[0]);
this.LatAndLon.lon = parseFloat(LatLon[1]);
}
}
});
},
// 关注与取消关注
follow() {
console.log("follow");
let that = this;
let parms = {
url: "/api/AppletTrade/GetCollect",
data: {
SourceId: this.id,
Id: this.detailData.CollectId,
Type: 1,
},
};
this.request2(parms, (res) => {
if (res.resultCode == 1) {
that.getDetail();
}
});
},
},
mounted() {
},
};
</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;
}
.MedalBox {
background: #f0f0f0;
border-radius: 20rpx;
box-sizing: border-box;
padding: 15rpx;
display: flex;
flex-wrap: wrap;
margin-bottom: 30rpx;
}
.MedalBoxItem {
width: 30%;
height: 135rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 10rpx;
}
.FirstShopBox {
margin-bottom: 30rpx;
display: flex;
flex-wrap: wrap;
}
.FirstShopBoxItem {
width: 33.33%;
height: 140rpx;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.HonorItem {
height: 150rpx;
border-radius: 20rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.carriertag {
/* width: 145rpx; */
height: 40rpx;
background: #fff;
border-radius: 8rpx;
display: flex;
justify-content: center;
align-items: center;
/* margin-left: 30rpx; */
overflow: hidden;
}
.carriertagsub1 {
width: 65rpx;
height: 40rpx;
background: #1f1f1f;
border-radius: 4rpx 0rpx 0rpx 4rpx;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: bold;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.carriertagsub2 {
/* width: 81rpx; */
padding: 0 10rpx;
height: 40rpx;
background: #d0aa7b;
border-radius: 0px 4rpx 4rpx 0rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: bold;
color: #111111;
}
.carrier-item-detail{
padding-left: 22rpx;
position: relative;
margin-bottom: 25rpx;
}
.carrier-item-detail::before{
position: absolute;
display: block;
content: ' ';
width: 12rpx;
height: 12rpx;
background: #017EDF;
border-radius: 50%;
top: 12rpx;
left: 0px;
}
.carrier-item-detail .title{
font-weight: bold;
font-size: 28rpx;
color: #000000;
line-height: 38rpx;
margin-bottom: 28rpx;
}
.carrier-item-detail .content{
font-weight: 400;
font-size: 24rpx;
color: #000000;
line-height: 48rpx;
}
.carrier-query-contact{
position: fixed;
left: 0rpx;
right: 0rpx;
bottom: 0rpx;
background: #fff;
box-shadow: 0px 0rpx 30rpx rgba(0,0,0, 0.15);
padding: 20rpx;
z-index: 9;
text-align: right;
}
.carrier-query-contact button {
display: inline-block;
border-radius: 16rpx;
border: none;
font-weight: 400 !important;
outline: none;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #017edf;
}
.carrier-query-contact button::after{
border: none !important;
}
</style>
plugin/api.js
View file @ f70d79a6
......@@ -3,7 +3,7 @@ export default {
Vue.prototype.host = "https://wx.weibaoge.cn/web/index.php?_mall_id=1285"
//Vue.prototype.host2 = "https://mallApi.oytour.com" //电商接口
Vue.prototype.host2 = "http://192.168.5.46:8200"
Vue.prototype.host2 = "http://192.168.5.56:5000"
Vue.prototype.host3 = "https://jjeduapi.oytour.com" //进阶小课堂以前接口
Vue.prototype.UploadConfig = function() { //本地上传配置
......
plugin/uiconfig.js
View file @ f70d79a6
let mainColor = "#ff4544"
let secondary = "#f39800"
let mainColor = "#017edf"
let secondary = "#ea850"
let pricecolor = "#ff4544"
let topstyle = {
background: "#FFF",
......
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