Style(店铺):界面调整
This commit is contained in:
lifizer
+336
-169
@@ -10,102 +10,100 @@
|
||||
transparent="auto"
|
||||
color='#ffffff'
|
||||
/>
|
||||
<!-- 7-3-->
|
||||
<image
|
||||
v-if="posterUrl.length > 0"
|
||||
:src="webUrl + '/20230619110913307276.png'"
|
||||
class="fixed-share"
|
||||
@click="changeShare"
|
||||
/>
|
||||
<u-popup
|
||||
:show="showShare"
|
||||
mode="center"
|
||||
bgColor="transparent"
|
||||
>
|
||||
<view class="box-share">
|
||||
<view class="box-img">
|
||||
<image
|
||||
:src="webUrl + '/20230608112219219303.png'"
|
||||
class="icon"
|
||||
@click="changeShare"
|
||||
/>
|
||||
<image :src="posterUrl" class="main-img" />
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/20230608112210135038.png'"
|
||||
class="btn"
|
||||
@click="saveImg"
|
||||
/>
|
||||
</view>
|
||||
</u-popup>
|
||||
<view class="cover-box">
|
||||
<image
|
||||
v-if="inn.coverType === 1"
|
||||
:src="inn.cover"
|
||||
class="full-img"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="box-mask flex jc-between ai-end">
|
||||
<view class="inn-name flex-0 more-t">{{ inn.name }}</view>
|
||||
<view
|
||||
v-if="inn.cityName != undefined && inn.cityName.length > 0"
|
||||
class="city-section flex jc-end ai-center"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/20210807215539157727.png'"
|
||||
style="width: 22rpx;height: 22rpx;margin-right: 8rpx;"
|
||||
/>
|
||||
<text class="one-t" style="font-size: 24rpx;color: #fff;">{{ inn.cityName }}</text>
|
||||
</view>
|
||||
<view
|
||||
v-if="inn.coverType === 2"
|
||||
:style="{
|
||||
'width': videoStyle.width,
|
||||
'height': videoStyle.height
|
||||
}"
|
||||
class="video-box"
|
||||
>
|
||||
<video
|
||||
:src="inn.cover"
|
||||
:autoplay="true"
|
||||
:controls="false"
|
||||
:loop="true"
|
||||
object-fit="contain"
|
||||
play-btn-position="center"
|
||||
class="video"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="innInfoWrap flex ai-end">
|
||||
<view class="inn-logo flex-0" style="">
|
||||
<image :src="inn.logo" v-if="inn.logo"></image>
|
||||
<image :src="webUrl + '/20230609145651814148.png'" v-else/>
|
||||
</view>
|
||||
|
||||
<view class="a3 flex jc-between ai-end" style="width:100%">
|
||||
<view class="inn-owner" style="flex-grow: 1;">{{ inn.ownerName }}/店主</view>
|
||||
<view v-if="inn.guaranteeValue" class="guarantee flex jc-center ai-center">
|
||||
保证金：{{ inn.guaranteeValue }}元
|
||||
</view>
|
||||
<view class="flex ai-center">
|
||||
<view class="zan-box flex flex-0 ai-end" @click="zanInn">
|
||||
<template v-if="isLike">
|
||||
<image :src="webUrl + '/20230828095210280991.png'"/>
|
||||
<text style="font-size: 28rpx;color: #FF564A;">{{ inn.zan }}</text>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="webUrl + '/20230828095217616640.png'"/>
|
||||
<text style="font-size: 28rpx;color: #333333;">{{ inn.zan }}</text>
|
||||
</template>
|
||||
<view class="innInfoWrap">
|
||||
<view class="bg-color">
|
||||
<view class="box-mask flex jc-between ai-end">
|
||||
<view class="inn-name flex-0 more-t">{{ inn.name }}</view>
|
||||
<view
|
||||
v-if="inn.cityName != undefined && inn.cityName.length > 0"
|
||||
class="city-section flex jc-end ai-center"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/20210807215539157727.png'"
|
||||
style="width: 22rpx;height: 22rpx;margin-right: 8rpx;"
|
||||
/>
|
||||
<text class="one-t" style="font-size: 24rpx;color: #fff;">{{ inn.cityName }}</text>
|
||||
</view>
|
||||
<view class="flex flex-0 ai-end">
|
||||
<image
|
||||
v-if="isFavorite"
|
||||
:src="webUrl + '/20240113230535491918.png'"
|
||||
style="width: 32rpx;height: 32rpx;margin-left: 10rpx;"
|
||||
mode="scaleToFill"
|
||||
@click="doneFavorite"
|
||||
/>
|
||||
<image
|
||||
v-else
|
||||
:src="webUrl + '/20240122093206161576.png'"
|
||||
style="width: 32rpx;height: 32rpx;margin-left: 10rpx;"
|
||||
mode="scaleToFill"
|
||||
@click="doneFavorite"
|
||||
/>
|
||||
<text style="font-size: 28rpx;color: #333333;">{{ favoriteCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body-cont flex ai-end">
|
||||
<view class="inn-logo flex-0">
|
||||
<image :src="inn.logo" v-if="inn.logo"></image>
|
||||
<image :src="webUrl + '/20230609145651814148.png'" v-else/>
|
||||
</view>
|
||||
<view class="a3 flex jc-between ai-end" style="width: 100%">
|
||||
<view class="inn-owner" style="flex-grow: 1;">{{ inn.ownerName }}/店主</view>
|
||||
<view v-if="inn.guaranteeValue" class="guarantee flex jc-center ai-center">
|
||||
保证金：{{ inn.guaranteeValue }}元
|
||||
</view>
|
||||
<view class="flex ai-center zan-favorite-wrap">
|
||||
<view class="zan-box flex flex-0 ai-end" @click="zanInn">
|
||||
<template v-if="isLike">
|
||||
<image :src="webUrl + '/icon/icon-like.png'" class="img" />
|
||||
<text class="on">{{ inn.zan }}</text>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image :src="webUrl + '/icon/icon-like.png'" class="img" />
|
||||
<text>{{ inn.zan }}</text>
|
||||
</template>
|
||||
</view>
|
||||
<view class="flex flex-0 ai-end favorite-box">
|
||||
<image
|
||||
v-if="isFavorite"
|
||||
:src="webUrl + '/icon/icon-star-on.png'"
|
||||
mode="scaleToFill"
|
||||
class="icon"
|
||||
@click="doneFavorite"
|
||||
/>
|
||||
<image
|
||||
v-else
|
||||
:src="webUrl + '/icon/icon-star-off.png'"
|
||||
mode="scaleToFill"
|
||||
class="icon"
|
||||
@click="doneFavorite"
|
||||
/>
|
||||
<text>{{ favoriteCount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 0 32rpx;margin-top: 10rpx;">
|
||||
<view class="inn-signature-wrap">
|
||||
<view class="triangle"></view>
|
||||
<view class="inn-signature">
|
||||
<text style="font-size: 24rpx;color: #080F1A;">{{ inn.content }}</text>
|
||||
{{ inn.content }}
|
||||
</view>
|
||||
<view class="share-btn" @click="changeShare">
|
||||
<image :src="webUrl + '/page/hotel/share.png'" class="img" />
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
<!-- <view
|
||||
v-if="inn.desc != null && inn.desc.length > 0"
|
||||
style="padding: 0 32rpx;margin-top: 30rpx;"
|
||||
>
|
||||
@@ -113,40 +111,35 @@
|
||||
<text class="fixed">简介：</text>
|
||||
<rich-text :nodes="inn.desc"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="map-wrap acea-row row-center">
|
||||
<image
|
||||
:src="webUrl + '/20210225151241154614.png'"
|
||||
style="height: 160rpx;width: 100%;"
|
||||
/>
|
||||
<view class="address-block acea-row row-middle">
|
||||
<image
|
||||
:src="webUrl + '/20220901223747933873.png'"
|
||||
style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
|
||||
</view> -->
|
||||
<view v-if="inn.name" class="map-wrapper">
|
||||
<view class="map-cont">
|
||||
<map
|
||||
:longitude="inn.longitude"
|
||||
:latitude="inn.latitude"
|
||||
style="width: 750rpx;height: 300rpx;"
|
||||
/>
|
||||
<text class="address-text">{{ inn.address }}</text>
|
||||
</view>
|
||||
<view class="buttons-block acea-row row-middle">
|
||||
<!-- call 拨打电话-->
|
||||
<!-- goRoom-->
|
||||
<view class="phone-block acea-row row-middle" @click="call">
|
||||
<image
|
||||
:src="webUrl + '/20220901223901017309.png'"
|
||||
style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
|
||||
/>
|
||||
<text style="font-size: 24rpx;color: #41454d;">联系客服</text>
|
||||
<view class="bg"></view>
|
||||
<view class="map-info">
|
||||
<view class="map-info-hd">
|
||||
<image :src="webUrl + '/page/hotel/icon-location.png'" class="icon" />
|
||||
</view>
|
||||
<view class="vline"></view>
|
||||
<view class="map-block acea-row row-middle" @click="showLocation">
|
||||
<image
|
||||
style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
|
||||
:src="webUrl + '/20220901223401590275.png'"
|
||||
/>
|
||||
<text style="font-size: 24rpx;color: #41454d;">进入地图</text>
|
||||
<view class="map-info-bd">
|
||||
{{ inn.address }}
|
||||
</view>
|
||||
<view class="map-info-ft flex">
|
||||
<view class="item" @click="showLocation">
|
||||
<image :src="webUrl + '/page/hotel/navigation.png'" class="img" />
|
||||
<view>导航</view>
|
||||
</view>
|
||||
<view class="item" @click="call">
|
||||
<image :src="webUrl + '/page/hotel/phone.png'" class="img" />
|
||||
<view>客服</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="top-tab acea-row row-middle row-center"
|
||||
style="margin-top: 60rpx;border-bottom: 1px solid #f5f5f5;"
|
||||
@@ -168,7 +161,6 @@
|
||||
<view v-show="activeIndex === 3" class="btLine"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 企业文化 -->
|
||||
<view v-if="activeIndex===0" class="pics-section" style="position: relative;">
|
||||
<view class="pics-list acea-row" v-if="inn.pics.length>0">
|
||||
@@ -178,7 +170,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 最新资讯 -->
|
||||
<view v-if="activeIndex===1" class="info-section" style="position: relative;">
|
||||
<view class="info-list acea-row row-column" v-if="infoArray.length>0">
|
||||
@@ -196,14 +187,12 @@
|
||||
</view>
|
||||
<view class="info-card" style="flex-grow: 1;">
|
||||
<view class="info-title line1" @click="infoClick(info)">{{ info.name }}</view>
|
||||
|
||||
<template v-if="info.type==='NT_TEXT'">
|
||||
<view v-if="info.type==='NT_VIDEO'" style="width: 100%;margin-top: 10rpx;">
|
||||
<video style="width: 100%;height: 264rpx;" :src="info.video" controls play-btn-position="center"/>
|
||||
</view>
|
||||
<template v-else>
|
||||
<img-box style="width: 100%;" :imgList='info.resources' :num='info.resources.length'></img-box>
|
||||
</template>
|
||||
<view v-else style="width: 100%;margin-top: 10rpx;">
|
||||
<video style="width: 100%;height: 264rpx;" :src="info.resources[0]" controls play-btn-position="center"/>
|
||||
</view>
|
||||
|
||||
<view class="info-media-wrap acea-row row-middle row-between" style="margin-top: 10rpx;"
|
||||
@click="infoClick(info)">
|
||||
<view class="acea-row row-middle">
|
||||
@@ -224,7 +213,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商家资质 -->
|
||||
<view
|
||||
v-if="activeIndex===2"
|
||||
@@ -238,7 +226,6 @@
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- v4 商品列表 -->
|
||||
<view v-if="activeIndex===3" class="goods-section flex flex-wrap">
|
||||
<view class="item" v-for="(item,index) in goodsList" :key="index" @click="goGoodsConByID(item)">
|
||||
@@ -256,13 +243,33 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="isMyInn" class="bottom-view acea-row">
|
||||
<view class="bottom-btn" style="margin-right: 1px; flex: 1;" @click="publishBtnClick">发布动态</view>
|
||||
<view class="bottom-btn" style="flex: 1;" @click="modifyBtnClick">修改资料</view>
|
||||
</view>
|
||||
<view v-if="isMyInn" class="bottom-placeholder"></view>
|
||||
|
||||
<!-- 分享 -->
|
||||
<u-popup
|
||||
:show="showShare"
|
||||
mode="center"
|
||||
bgColor="transparent"
|
||||
>
|
||||
<view class="box-share">
|
||||
<view class="box-img">
|
||||
<image
|
||||
:src="webUrl + '/20230608112219219303.png'"
|
||||
class="icon"
|
||||
@click="changeShare"
|
||||
/>
|
||||
<image :src="posterUrl" class="main-img" />
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/20230608112210135038.png'"
|
||||
class="btn"
|
||||
@click="saveImg"
|
||||
/>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -301,7 +308,9 @@ export default {
|
||||
inn: {
|
||||
cityName: '',
|
||||
pics: [],
|
||||
desc: ''
|
||||
desc: '',
|
||||
latitude: '',
|
||||
longitude: ''
|
||||
},
|
||||
isMyInn: false, //是否是自己的客栈
|
||||
goodsList: [],
|
||||
@@ -312,7 +321,11 @@ export default {
|
||||
partnerId: null,
|
||||
isLike: false, //点赞
|
||||
isFavorite: false,
|
||||
favoriteCount: 0
|
||||
favoriteCount: 0,
|
||||
videoStyle: {
|
||||
width: '750rpx',
|
||||
height: '500rpx'
|
||||
}
|
||||
}
|
||||
},
|
||||
//必须在页面加 onPageScroll(e){} ，才能滑动显示背景
|
||||
@@ -595,30 +608,65 @@ export default {
|
||||
}
|
||||
},
|
||||
fetchInnDetail: function () {
|
||||
let that = this;
|
||||
const that = this
|
||||
let reqFn = null
|
||||
if (this.isMyInn) {
|
||||
getHotelDetail(that.id).then((res) => {
|
||||
that.inn = res.data;
|
||||
that.isLike = res.data.zanVo !== null;
|
||||
that.isFavorite = res.data.hasFavorite
|
||||
that.favoriteCount = res.data.favoriteCount
|
||||
}).catch((err) => {
|
||||
|
||||
}).finally(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
reqFn = getHotelDetail
|
||||
} else {
|
||||
getHomeHotelDetail(that.id).then((res) => {
|
||||
that.inn = res.data;
|
||||
that.isLike = res.data.zanVo !== null;
|
||||
that.isFavorite = res.data.hasFavorite
|
||||
that.favoriteCount = res.data.favoriteCount
|
||||
}).catch((err) => {
|
||||
|
||||
}).finally(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
reqFn = getHomeHotelDetail
|
||||
}
|
||||
reqFn(that.id).then((res) => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
that.inn = data
|
||||
that.isLike = data.zanVo !== null
|
||||
that.isFavorite = data.hasFavorite
|
||||
that.favoriteCount = data.favoriteCount
|
||||
that.inn.latitude = that.inn.latitude ? parseFloat(that.inn.latitude) : 24.993587
|
||||
that.inn.longitude = that.inn.longitude ? parseFloat(that.inn.longitude) : 102.779656
|
||||
// coverType: 1-图片,2-视频
|
||||
if (data.coverType === 2) {
|
||||
uni.getSystemInfo({
|
||||
success: info => {
|
||||
const screenWidth = info.windowWidth
|
||||
that.videoStyle.width = screenWidth + 'px'
|
||||
that.videoStyle.height = screenWidth * 500 / 750 + 'px'
|
||||
}
|
||||
})
|
||||
// 视频宽高自适应
|
||||
/*
|
||||
uni.downloadFile({
|
||||
url: data.cover,
|
||||
success: downRes => {
|
||||
const { tempFilePath } = downRes
|
||||
if (tempFilePath) {
|
||||
uni.getVideoInfo({
|
||||
src: tempFilePath,
|
||||
success: videoRes => {
|
||||
const { width, height } = videoRes
|
||||
uni.getSystemInfo({
|
||||
success: info => {
|
||||
const screenWidth = info.windowWidth
|
||||
that.videoStyle.width = screenWidth + 'px'
|
||||
that.videoStyle.height = screenWidth * height / width + 'px'
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
*/
|
||||
}
|
||||
}
|
||||
}).catch((err) => {
|
||||
|
||||
}).finally(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
},
|
||||
initPoster() {
|
||||
getPoster(this.id).then(({data}) => this.posterUrl = data);
|
||||
@@ -770,20 +818,10 @@ export default {
|
||||
.full-img {
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.box-mask {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 596rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx 12rpx;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
|
||||
|
||||
.city-section {
|
||||
width: 256rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -796,14 +834,28 @@ export default {
|
||||
font-size: 22rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.zan-favorite-wrap {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
.on {
|
||||
color: #FF564A;
|
||||
}
|
||||
}
|
||||
.zan-box {
|
||||
image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
.img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 8rpx 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.favorite-box {
|
||||
.icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 8rpx 0 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.store-img {
|
||||
width: 686rpx;
|
||||
@@ -885,10 +937,37 @@ export default {
|
||||
|
||||
.innInfoWrap {
|
||||
position: relative;
|
||||
margin-top: -66rpx;
|
||||
padding: 0 18*2rpx;
|
||||
margin-top: -76rpx;
|
||||
padding: 20rpx 36rpx;
|
||||
line-height: 1;
|
||||
z-index: 1;
|
||||
.bg-color {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 50%;
|
||||
background: linear-gradient(-180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
|
||||
|
||||
.box-mask {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 166rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32rpx 12rpx 0;
|
||||
|
||||
.city-section {
|
||||
width: 256rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.body-cont {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.inn-logo {
|
||||
@@ -942,12 +1021,39 @@ export default {
|
||||
font-size: 10*2rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.inn-signature {
|
||||
background-image: url('http://admin-api.xdd618.com/file/pic/20210225101530789767.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 20rpx;
|
||||
.inn-signature-wrap {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
padding: 0 32rpx;
|
||||
margin: 20rpx 0 0 0;
|
||||
.triangle {
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
left: 72rpx;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20rpx solid transparent;
|
||||
border-right: 20rpx solid transparent;
|
||||
border-bottom: 24rpx solid rgba(243,243,246,0.39);
|
||||
}
|
||||
.inn-signature {
|
||||
position: relative;
|
||||
padding: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #080F1A;
|
||||
background: rgba(243,243,246,0.39);
|
||||
box-shadow: 0px 6px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
.share-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -68rpx;
|
||||
.img {
|
||||
width: 212rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inn-intro-bold {
|
||||
@@ -1152,4 +1258,65 @@ export default {
|
||||
color:#A6AAB3;
|
||||
font-size:28rpx;
|
||||
}
|
||||
.map-wrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 200rpx;
|
||||
margin: 40rpx 0 0 0;
|
||||
overflow: hidden;
|
||||
.map-cont {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
opacity: 0.3;
|
||||
transform: translateY(-50rpx);
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
height: 60rpx;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
.map-info {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40rpx 32rpx;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
.map-info-hd {
|
||||
.icon {
|
||||
display: block;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
}
|
||||
.map-info-bd {
|
||||
flex: 1;
|
||||
padding: 0 60rpx 0 20rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
.map-info-ft {
|
||||
.item + .item {
|
||||
margin: 0 0 0 36rpx;
|
||||
}
|
||||
.item {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
.img {
|
||||
display: block;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
margin: 0 0 20rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</view>
|
||||
|
||||
<view class="video-box" v-if="info.type==='NT_VIDEO'">
|
||||
<video style="width: 100%;height: 320rpx;" :src="info.resources[0]" controls play-btn-position="center"/>
|
||||
<video style="width: 100%;height: 320rpx;" :src="info.video" controls play-btn-position="center"/>
|
||||
</view>
|
||||
|
||||
<view class="content-box">
|
||||
|
||||
@@ -1,38 +1,69 @@
|
||||
<template>
|
||||
<view class="page-info-publish">
|
||||
<view class="tab-box flex jc-center">
|
||||
<text :class="{'active':tabIndex==index}" v-for="(item,index) in tabData" :key="item"
|
||||
@click="changeTab(index)">{{item.label}}</text>
|
||||
<text
|
||||
v-for="(item,index) in tabData"
|
||||
:key="item"
|
||||
:class="{
|
||||
'active': tabIndex === index
|
||||
}"
|
||||
@click="changeTab(index)"
|
||||
>{{item.label}}</text>
|
||||
</view>
|
||||
|
||||
<form @submit="formSubmit">
|
||||
<view class="form-item">
|
||||
<view class="title">标题:</view>
|
||||
<input v-model="title" type="text" placeholder="请输入动态标题..."
|
||||
placeholder-style="font-size:24rpx;color:#C2C5CC;" />
|
||||
<input
|
||||
v-model="form.title"
|
||||
type="text"
|
||||
placeholder="请输入动态标题..."
|
||||
placeholder-style="font-size:24rpx;color:#C2C5CC;"
|
||||
class="inp inp-input"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<textarea class="content-style" v-model="content" placeholder="请输入动态内容..."
|
||||
placeholder-style="font-size:24rpx;color:#C2C5CC;" />
|
||||
<view class="title">简介:</view>
|
||||
<textarea
|
||||
v-model="form.intro"
|
||||
placeholder="请输入简介..."
|
||||
placeholder-style="font-size:24rpx;color:#C2C5CC;"
|
||||
class="content-style inp"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-item" v-if="showUpload">
|
||||
<tm-upload :dataList="picsArray" :upload_img_wh="uploadImgWH" :upload_max="uploadMax" :url="uploadUrl" :type='uploadType'
|
||||
:header="uploadHeader" @change="uploadedImgChange" />
|
||||
<view v-if="uploadType === 'image'" class="title">图片(最多9张):</view>
|
||||
<view v-else class="title">视频:</view>
|
||||
<tm-upload
|
||||
:dataList="picsArray"
|
||||
:upload_img_wh="uploadImgWH"
|
||||
:upload_max="uploadMax"
|
||||
:url="uploadUrl"
|
||||
:type='uploadType'
|
||||
:header="uploadHeader"
|
||||
@change="uploadedImgChange"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="title">资讯详情:</view>
|
||||
<view class="inp">
|
||||
<jin-edit
|
||||
:html="form.content"
|
||||
placeholder="请输入内容"
|
||||
height="320px"
|
||||
@editOk="editOk"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-btn">
|
||||
<button form-type="submit">发布</button>
|
||||
</view>
|
||||
</form>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tmUpload from '@/pagesInn/components/tm-upload/tm-upload.vue';
|
||||
import jinEdit from '@/pagesInn/components/jin-edit/jin-edit.vue';
|
||||
import {
|
||||
VUE_APP_API_URL
|
||||
} from "@/config";
|
||||
@@ -41,7 +72,8 @@
|
||||
} from "@/api/inn.js";
|
||||
export default {
|
||||
components: {
|
||||
tmUpload
|
||||
tmUpload,
|
||||
jinEdit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -73,8 +105,11 @@
|
||||
}
|
||||
],
|
||||
tabIndex: 0,
|
||||
title: "",
|
||||
content: ""
|
||||
form: {
|
||||
title: '',
|
||||
intro: '',
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
@@ -83,46 +118,48 @@
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
this.tabIndex = index;
|
||||
this.showUpload=false;
|
||||
this.uploadType= this.tabData[index].uploadType;
|
||||
this.uploadCount= this.tabData[index].uploadCount;
|
||||
this.showUpload = false;
|
||||
this.uploadType = this.tabData[index].uploadType;
|
||||
this.uploadCount = this.tabData[index].uploadCount;
|
||||
|
||||
setTimeout(()=>{
|
||||
this.showUpload=true;
|
||||
this.showUpload = true;
|
||||
},100)
|
||||
},
|
||||
|
||||
editOk(res) {
|
||||
this.form.content = res.html
|
||||
},
|
||||
//文件上传结果
|
||||
uploadedImgChange: function(uploadedFilesList) {
|
||||
this.uploadedFilesArray = uploadedFilesList;
|
||||
},
|
||||
|
||||
formSubmit(e) {
|
||||
if (this.title.length == 0) {
|
||||
if (!this.form.title) {
|
||||
this.$dialog.error("请输入动态标题");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.content.length == 0) {
|
||||
this.$dialog.error("请输入动态内容");
|
||||
if (!this.form.intro) {
|
||||
this.$dialog.error("请输入简介");
|
||||
return;
|
||||
}
|
||||
if (!this.form.content) {
|
||||
this.$dialog.error("请输入资讯详情");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.uploadedFilesArray.length == 0) {
|
||||
this.$dialog.error("请上传动态图片或视频");
|
||||
return;
|
||||
}
|
||||
|
||||
let param = {
|
||||
hotelId: this.hotelId,
|
||||
name: this.title,
|
||||
content: this.content,
|
||||
type: this.tabData[this.tabIndex].type,
|
||||
resources: this.uploadedFilesArray.join(",")
|
||||
};
|
||||
|
||||
uni.showLoading();
|
||||
postHotelNewsAdd(param).then(res => {
|
||||
postHotelNewsAdd({
|
||||
hotelId: this.hotelId,
|
||||
name: this.form.title,
|
||||
intro: this.form.intro,
|
||||
content: this.form.content,
|
||||
type: this.uploadType === 'image' ? 'NT_TEXT' : 'NT_VIDEO',
|
||||
resources: this.uploadType === 'image' ? this.uploadedFilesArray : [],
|
||||
video: this.uploadType === 'image' ? '' : this.uploadedFilesArray[0]
|
||||
}).then(res => {
|
||||
uni.hideLoading();
|
||||
this.$dialog.toast({
|
||||
mes: "发布成功!"
|
||||
@@ -141,6 +178,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
.page-info-publish {
|
||||
padding: 0 0 80rpx 0;
|
||||
font-size: 28rpx;
|
||||
|
||||
.tab-box {
|
||||
@@ -173,10 +211,24 @@
|
||||
background: #fff;
|
||||
|
||||
.content-style {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
color: #C2C5CC;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.inp {
|
||||
padding: 10rpx 16rpx;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.inp-input {
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
}
|
||||
.title {
|
||||
margin: 0 0 10rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
|
||||
Reference in New Issue
Block a user