liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style(店铺):界面调整

Browse Source
This commit is contained in:
lifizer
2024-03-19 17:56:50 +08:00
parent 9faa3e6355
commit c96cae1087
6 changed files with 867 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pagesInn/inn/innHome.vue
+336 -169
View File
@@ -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>