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

Feat(时令尝鲜):接口对接

Browse Source
This commit is contained in:
lifizer
2023-09-23 18:13:26 +08:00
parent c9ceac9f37
commit 2d73c2fe46
35 changed files with 2834 additions and 1547 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pagesInn/inn/innHome.vue
+103 -157
View File
@@ -17,66 +17,43 @@
</view>
</u-popup>
<view class="" style="position: relative;">
<image style="width: 750rpx" :src="inn.cover" mode="widthFix"></image>
<image style="width: 750rpx;position: absolute;left: 0;bottom: 0;" :src="webUrl+'/20210227115029488890.png'"
mode="widthFix"></image>
</view>
<view class="innInfoWrap">
<view class="acea-row">
<view class="inn-logo" style="flex-shrink: 0;margin-right: 10rpx;">
<image :src="inn.logo" v-if="inn.logo"></image>
<image :src="webUrl+'/20230609145651814148.png'" v-else/>
</view>
<view class="acea-row row-column" style="flex-grow: 1;">
<view class="acea-row row-between row-middle" style="flex-wrap: nowrap;">
<view class="inn-name" style="margin-right: 20rpx;flex-grow: 1;">{{ inn.name }}</view>
<view class="acea-row row-center row-middle" style="flex-shrink: 0;">
<view class="acea-row row-middle" v-if="inn.cityName != undefined && inn.cityName.length>0">
<image style="width: 22rpx;height: 22rpx;margin-right: 8rpx;" :src="webUrl+'/20210807215539157727.png'"
mode=""></image>
<text style="font-size: 24rpx;color: #fff;">{{ inn.cityName }}</text>
</view>
</view>
</view>
<view class="acea-row row-between" style="margin-top: 22rpx;">
<view class="acea-row row-middle" style="flex-grow: 1;">
<view class="acea-row row-middle">
<view class="inn-owner" style="flex-grow: 1;">{{ inn.ownerName }}/店主</view>
<!-- <view class="inn-tag-wrap acea-row row-left row-middle">
<view class="zanmost-tag" v-if="inn.zanMostTag>0">点赞最多</view>
<view class="latest-tag" v-if="inn.newTag>0">最新发布</view>
<view class="location-tag" v-if="inn.cityName != undefined && inn.cityName.length>0">{{inn.cityName}}</view>
</view> -->
</view>
<!-- <view v-if="inn.qrcode.length>0" class="" @click="showQrcode" style="margin-left: 10rpx;width: 76rpx;height: 76rpx;">
<image style="width: 100%;height: 100%;" mode="scaleToFill" :src="inn.qrcode"></image>
</view> -->
</view>
<view class="guarantee" v-if="inn.guaranteeValue">保证金：{{ inn.guaranteeValue }}元</view>
<view class="acea-row row-center row-middle" style="flex-shrink: 0;" @click="zanInn">
<block v-if="inn.zanVo != null">
<image style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" :src="webUrl+'/20210302161135069143.png'"
mode=""></image>
<text style="font-size: 28rpx;color: #FF564A;">{{ inn.zan }}</text>
</block>
<block v-else>
<image style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" :src="webUrl+'/20210807215657904755.png'"
mode=""></image>
<text style="font-size: 28rpx;color: #333333;">{{ inn.zan }}</text>
</block>
</view>
</view>
<view class="cover-box">
<image class="full-img" :src="inn.cover" mode="widthFix"></image>
<view class="box-mask flex jc-between ai-end">
<view class="inn-name flex-0 more-t">{{ inn.name }}</view>
<view class="city-section flex jc-end ai-center" v-if="inn.cityName != undefined && inn.cityName.length>0">
<image style="width: 22rpx;height: 22rpx;margin-right: 8rpx;" :src="webUrl+'/20210807215539157727.png'"
mode=""></image>
<text class="one-t" style="font-size: 24rpx;color: #fff;">{{ inn.cityName }}</text>
</view>
</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 class="guarantee flex jc-center ai-center" v-if="inn.guaranteeValue">保证金：{{
inn.guaranteeValue
}}元
</view>
<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>
</view>
</view>
<view class="" style="padding: 0 32rpx;margin-top: 10rpx;">
<view class="inn-signature">
@@ -86,19 +63,8 @@
<view v-if="inn.desc != null && inn.desc.length>0" class="" style="padding: 0 32rpx;margin-top: 30rpx;">
<view class="desc-box">
<!-- <text class="fixed">简介：</text> -->
<view v-html="handleRichText(inn.desc)"></view>
</view>
<!-- <view class="inn-intro">
<text class="inn-intro-bold">简介:</text>
<view class='conter' :class="isExpand ? 'show' : 'hide'" v-html="handleRichText(inn.desc)"></view>
<view class="acea-row row-right row-middle" @click="doExpandDesc" style="margin-top: 10rpx;">
<view class="">{{isExpand?"收起":"展开"}}</view>
<image style="width: 40rpx;height: 40rpx;" v-if="isExpand" :src="webUrl+'/20210315103122759604.png'" mode=""></image>
<image style="width: 40rpx;height: 40rpx;" v-if="!isExpand" :src="webUrl+'/20210315103104298188.png'" mode=""></image>
</view>
</view> -->
</view>
<view class="map-wrap acea-row row-center">
@@ -110,7 +76,8 @@
</view>
<view class="buttons-block acea-row row-middle">
<!-- call 拨打电话-->
<view class="phone-block acea-row row-middle" @click="goRoom">
<!-- goRoom-->
<view class="phone-block acea-row row-middle" @click="call">
<image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/20220901223901017309.png'"
mode=""></image>
<text style="font-size: 24rpx;color: #41454d;">联系客服</text>
@@ -150,14 +117,9 @@
<view v-show="activeIndex==3" class="btLine"></view>
</view>
</view>
<!-- <block v-if="inn.qrcode.length>0">-->
<!-- <drag-button :isDock="true" :existTabBar="true" @btnClick="showQrcode"/>-->
<!-- </block>-->
<view v-if="activeIndex==0" class="pics-section" style="position: relative;">
<!-- <view class="pics-box">-->
<!-- <image :src="item" v-for="item in inn.pics" mode="widthFix"></image>-->
<!-- </view>-->
<!-- 企业文化 -->
<view v-if="activeIndex===0" class="pics-section" style="position: relative;">
<view class="pics-list acea-row" v-if="inn.pics.length>0">
<view :style="{width:picColumnWidth}" @click="showPic(index)" class="pics-item" v-for="(url, index) in inn.pics"
:key="index">
@@ -165,62 +127,43 @@
</view>
</view>
</view>
<view v-if="activeIndex==1" class="info-section" style="position: relative;">
<!-- <view v-if="inn.qrcode.length>0" class="" @click="showQrcode" style="position: absolute;top: 60rpx;right: 0;z-index: 20;">
<image style="width: 116rpx;height: 116rpx;" mode="scaleToFill" :src="webUrl+'/20210809112551575811.png'"></image>
</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">
<view class="pics-item acea-row" style="flex-wrap: nowrap;" @click="infoDetail(info)"
v-for="(info, index) in infoArray" :key="index">
<view class="pics-item acea-row" style="flex-wrap: nowrap;" v-for="(info, index) in infoArray" :key="index">
<view class="date-block" style="flex-shrink: 0;">
<view class="month-day" :style="index==0?'color:#0DC5C5;':''">{{ info.monthDay }}</view>
<view class="month-day" :style="index===0?'color:#0DC5C5;':''">{{ info.monthDay }}</view>
<view class="year">{{ info.year }}</view>
<view v-if="isMyInn" class="" style="margin-top: 10rpx;" @click="deleteInnInfo(info)">
<image style="width:36rpx;height: 36rpx;" :src="webUrl+'/20210302150736618877.png'" mode=""></image>
</view>
</view>
<view class="separator-block acea-row row-column row-middle" style="flex-shrink: 0;">
<view :class="['dot',index==0?'first-cell':'']" style="flex-shrink: 0;"></view>
<view v-if="(index+1)!=infoArray.length" class="dash-line" style="flex-grow: 1;"></view>
<view :class="['dot',index===0?'first-cell':'']" style="flex-shrink: 0;"></view>
<view v-if="(index+1)!==infoArray.length" class="dash-line" style="flex-grow: 1;"></view>
</view>
<view class="info-card " style="flex-grow: 1;" @click="infoClick(info)">
<view class="info-title line1">{{ info.name }}</view>
<block v-if="info.type=='NT_TEXT'">
<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'">
<img-box style="width: 100%;" :imgList='info.resources' :num='info.resources.length'></img-box>
</block>
</template>
<view v-else style="width: 100%;margin-top: 10rpx;">
<video style="width: 100%;height: 264rpx;" :src="info.resources[0]"></video>
<video style="width: 100%;height: 264rpx;" :src="info.resources[0]" controls play-btn-position="center"/>
</view>
<!-- <view v-if="info.type=='NT_TEXT'" class="info-pics-wrap acea-row" style="flex-wrap: nowrap;margin-top: 10rpx;position: relative;"> -->
<!-- <block v-if="info.resources.length>2">
<view class="acea-row" style="height: 264rpx;width: 50%;">
<image style="width: 100%;height: 100%;border-radius: 8rpx;object-fit: cover;" :src="info.resources[0]" mode=""></image>
</view>
<view class="acea-row row-column" style="margin-left: 16rpx;width: 50%;;height: 264rpx;">
<image style="height: 124rpx;width: 100%;flex: 1;border-radius: 8rpx;object-fit: cover;" :src="info.resources[1]" mode=""></image>
<image style="margin-top: 16rpx;border-radius: 8rpx;height: 124rpx;width: 100%;flex: 1;object-fit: cover;" :src="info.resources[2]" mode=""></image>
</view>
</block>
<block v-else>
<image style="width: 100%;height: 264rpx;border-radius: 8rpx;object-fit: cover;" :src="info.resources[0]" mode=""></image>
</block> -->
<!-- <block v-if="info.resources != null && info.resources.length>0"> -->
<!-- <img-box style="width: 100%;" :imgList='info.resources' :num='info.resources.length'></img-box> -->
<!-- </block> -->
<!-- </view> -->
<view class="info-media-wrap acea-row row-middle row-between" style="margin-top: 10rpx;">
<view class="info-media-wrap acea-row row-middle row-between" style="margin-top: 10rpx;"
@click="infoClick(info)">
<view class="acea-row row-middle">
<view class="acea-row row-middle">
<image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;"
:src="webUrl+'/20220901224017781784.png'"
mode=""></image>
:src="webUrl+'/20230803152147141807.png'"/>
<text class="seeNum-txt">{{ info.pv }}</text>
</view>
<view class="acea-row row-middle" style="margin-left: 20rpx;">
<image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;"
:src="webUrl+'/20220901224304100136.png'" mode=""></image>
:src="webUrl+'/20230803151302213857.png'" mode=""></image>
<text class="likeNum-txt">{{ info.zan }}</text>
</view>
</view>
@@ -230,13 +173,14 @@
</view>
</view>
</view>
<!-- 商家资质 -->
<view style="padding: 32rpx" v-if="activeIndex==2">
<view style="padding: 32rpx" v-if="activeIndex===2">
<image class="store-img" :src="item.image" mode="widthFix" v-for="item in inn.qualifications"/>
</view>
<!-- v4 商品列表 -->
<view v-if="activeIndex==3" class="goods-section flex flex-wrap">
<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)">
<img class="cover" :src="item.image" alt="">
<view class="">
@@ -302,7 +246,8 @@ export default {
showShare: false,
posterUrl: "", // 分享海报
id: null,
partnerId: null
partnerId: null,
isLike: false //点赞
}
},
//必须在页面加 onPageScroll(e){} ，才能滑动显示背景
@@ -315,10 +260,6 @@ export default {
this.loadend = false;
},
onLoad: function (options) {
// test data
console.log("getLaunchOptionsSync", uni.getLaunchOptionsSync());
console.log("getEnterOptionsSync", uni.getEnterOptionsSync());
if (options.id) {
this.id = options.id || null;
this.partnerId = options.partnerId || null;
@@ -360,9 +301,7 @@ export default {
},
// 上拉触底
onReachBottom() {
if (this.activeIndex == 0) {
} else if (this.activeIndex == 2) {
if (this.activeIndex === 3) {
this.goodsPage++;
this.fetchGoods();
} else {
@@ -469,38 +408,19 @@ export default {
});
},
zanInn: function () {
let that = this;
var id = this.inn.id;
uni.showLoading();
getHotelZan(id).then((res) => {
uni.hideLoading();
var msg = '操作成功!';
if (res.msg.length > 0) {
msg = res.msg;
}
uni.showToast({
title: msg,
mask: false,
duration: 1500
});
setTimeout(function () {
//刷新界面
that.fetchInnDetail();
}, 1500);
getHotelZan(this.inn.id).then(() => {
this.isLike = !this.isLike;
this.fetchInnDetail();
}).catch((err) => {
uni.hideLoading()
uni.showToast({
title: err.msg + '',
icon: 'none',
mask: false,
duration: 1500
});
}).finally(() => {
})
},
infoClick: function (info) {
return;
this.$yrouter.push('/pagesInn/inn/innInfoDetail?id=' + info.id);
},
publishBtnClick: function () {
@@ -613,6 +533,7 @@ export default {
if (this.isMyInn) {
getHotelDetail(that.id).then((res) => {
that.inn = res.data;
that.isLike = res.data.zanVo !== null;
}).catch((err) => {
}).finally(() => {
@@ -621,6 +542,7 @@ export default {
} else {
getHomeHotelDetail(that.id).then((res) => {
that.inn = res.data;
that.isLike = res.data.zanVo !== null;
}).catch((err) => {
}).finally(() => {
@@ -631,13 +553,6 @@ export default {
initPoster() {
getPoster(this.id).then(({data}) => this.posterUrl = data);
},
infoDetail: function (info) {
if (info.type == 'NT_TEXT') {
} else if (info.type == 'NT_VIDEO') {
}
},
showLocation: function () {
// if (this.inn.position != null && this.inn.position.length > 0) {
// var arr = this.inn.position.split(",");
@@ -764,13 +679,43 @@ export default {
<style scoped lang="less">
@import "@/assets/css/store.less";
.cover-box {
position: relative;
.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;
}
}
}
.guarantee {
margin-right: 16rpx;
padding: 7rpx 16rpx;
padding: 8rpx 16rpx;
border-radius: 8rpx;
background: #0DC5C5;
color: #fff;
font-size: 22rpx;
line-height: 1;
}
.zan-box {
image {
width: 32rpx;
height: 32rpx;
vertical-align: middle;
}
}
.store-img {
@@ -852,15 +797,18 @@ export default {
}
.innInfoWrap {
padding: 0 18*2rpx;
margin-top: -66rpx;
position: relative;
margin-top: -66rpx;
padding: 0 18*2rpx;
line-height: 1;
z-index: 1;
}
.inn-logo {
flex-shrink: 0;
width: 56*2rpx;
height: 56*2rpx;
margin-right: 18rpx;
}
.inn-logo image {
@@ -870,21 +818,19 @@ export default {
}
.inn-name {
width: 280rpx;
font-size: 32rpx;
color: #FFFFFF;
line-height: 56rpx;
line-height: 48rpx;
}
.inn-owner {
font-size: 24rpx;
color: #8B8F99;
// margin-top: 22rpx;
}
.inn-tag-wrap {
margin-top: 10rpx;
// margin-bottom: 10rpx;
}
.zanmost-tag {
pagesInn/inn/innInfoDetail.vue
+117 -378
View File
@@ -1,387 +1,126 @@
<template>
<view class="container">
<hx-navbar
title=" "
:fixed="true"
statusBarFontColor="#ffffff"
barPlaceholder="hidden"
transparent="auto"
color="#FFFFFF"
:background-color="[[254,150,107],[255, 88, 75]]"
:pageScroll.sync="scrollData"/>
<!-- <block slot="right">
<view class="">
<text class="iconfont icon-fenxiang" style="font-size: 48rpx;"></text>
<view class="" @click="like">
<image v-if="innInfo.isLike==0" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210302161110012686.png'" mode=""></image>
<image v-if="innInfo.isLike>0" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210302161135069143.png'" mode=""></image>
</view>
</view>
</block> -->
</hx-navbar>
<block v-if="innInfo">
<view v-if="innInfo.type=='NT_TEXT'" class="banner">
<swiper :current="swiperCurrentIndex" indicatorDots="true" indicator-active-color='rgba(255, 255, 255, 1)' indicator-color='rgba(255, 255, 255, 0.3)' v-if="innInfo.resources.length > 0" autoplay circular>
<block v-for="(imgUrl, index) in innInfo.resources" :key="index">
<swiper-item>
<view class="swiper-item">
<image class="swiper-item-content" :src="imgUrl" style="object-fit: cover;" mode="aspectFill" />
</view>
</swiper-item>
</block>
</swiper>
<!-- <view class="share-section" style="position: absolute;left: 0;right: 0;">
<view class="acea-row row-middle row-right pad20" style="flex-shrink: 0;">
<view class="" style="margin-right: 20rpx;"><image @click="shareInfo" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210304153545482917.png'" mode=""></image></view>
<view class="" @click="likeInfo">
<image v-if="innInfo.isLike == null || parseInt(innInfo.isLike)==0" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210302161110012686.png'" mode=""></image>
<image v-if="innInfo.isLike != null && parseInt(innInfo.isLike)==1" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210302161135069143.png'" mode=""></image>
</view>
</view>
</view> -->
<view class="cover">
</view>
<view class="title-section acea-row row-middle">
<view class="" style="font-size: 32rpx;color: #ffffff;flex-grow: 1;">{{innInfo.name}}</view>
<!-- <view class="acea-row row-column pad20" style="flex-shrink: 0;">
<image @click="shareInfo" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210304153545482917.png'" mode=""></image>
<view class="" @click="likeInfo">
<image v-if="innInfo.isLike == null || parseInt(innInfo.isLike)==0" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210302161110012686.png'" mode=""></image>
<image v-else style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210302161135069143.png'" mode=""></image>
</view>
</view> -->
</view>
<!-- <image style="width: 750rpx;position: absolute;left: 0;bottom: 0;" :src="webUrl+'/20210227115029488890.png'" mode="widthFix"></image> -->
</view>
<view v-if="innInfo.type=='NT_VIDEO'" class="banner">
<block v-if="innInfo.resources.length > 0">
<video style="width: 100%;height: 100%;" autoplay :src="innInfo.resources[0]"></video>
</block>
</view>
<view class="hotel-section acea-row row-center">
<view class="hotel-logo">
<image :src="innInfo.hotelLogo" mode=""></image>
</view>
<view class="acea-row row-column" style="flex-grow: 1;">
<view class="hotel-name">{{innInfo.hotelName}}</view>
<view class="hotel-date">{{formattedDateStr(innInfo.createdTime)}}</view>
</view>
<view class="enrollInnBtn acea-row row-center row-middle" @click="enrollInn">进入主页</view>
</view>
<view class="detail-section" v-html="innInfo.content">
<!-- {{innInfo.content}} -->
</view>
<view class="bottom-holder acea-row row-middle row-right savebottom">
<view class="acea-row row-middle">
<view class="acea-row row-middle">
<image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;" :src="webUrl+'/20220901224017781784.png'" mode=""></image>
<text class="seeNum-txt">{{innInfo.pv}}</text>
</view>
<view class="acea-row row-middle" style="margin-left: 20rpx;" @click="likeInfo">
<block v-if="innInfo.zanVo != null">
<image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;" :src="webUrl+'/20210302161135069143.png'" mode=""></image>
</block>
<block v-else>
<image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;" :src="webUrl+'/20220901224304100136.png'" mode=""></image>
</block>
<text class="likeNum-txt">{{innInfo.zan}}</text>
</view>
</view>
</view>
</block>
<ShareInfo v-on:setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></ShareInfo>
</view>
<view class="pages-inn-info-detail">
<view class="top-box">
<view class="title more-t">{{ info.name }}</view>
<view class="sub flex jc-between ai-center">
<text class="datetime">{{ info.createdTime }}</text>
<view class="flex ai-center">
<view class="flex ai-center" style="margin-right: 28rpx">
<image :src="webUrl+'/20230803152147141807.png'"/>
<view class="num">{{ info.pv }}</view>
</view>
<view class="flex ai-center" @click="likeInfo">
<image :src="webUrl+'/20230803151308999742.png'" v-if="info.zanVo != null"/>
<image :src="webUrl+'/20230803151302213857.png'" v-else/>
<view class="num">{{ info.zan }}</view>
</view>
</view>
</view>
</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"/>
</view>
<view class="content-box">
<rich-text :nodes="info.content"/>
</view>
</view>
</template>
<script>
import { getHotelNewsDetail,getHotelNewsZan} from "@/api/inn.js";
import { formatDateTime,isNullOrEmpty} from "@/utils";
import ShareInfo from "@/components/ShareInfo";
var that;
export default {
components:{
ShareInfo
},
data() {
return {
webUrl:this.$VUE_APP_RESOURCES_URL,
scrollData: {},
shareInfoStatus: false,
innInfo:null,
swiperHeight:300,
swiperCurrentIndex:0,
// innInfo:{
// isLike:0,
// type:'NT_TEXT',
// resources:[
// 'http://resource.xdd618.com/黄精.jpg',
// 'http://resource.xdd618.com/黄精.jpg',
// ]
// },
innId:0
}
},
//必须在页面加 onPageScroll(e){} ，才能滑动显示背景
onPageScroll(e){
this.scrollData = e;
},
onLoad:function(e){
that = this;
this.innId = e.id;
this.fetchInnInfoDetail();
},
methods: {
// changeSwiper:function(e){
// this.swiperCurrentIndex = e.detail.current;
// this.getCurrentSwiperHeight('.swiper-item-content');
// },
// getCurrentSwiperHeight(element) {
// let query = uni.createSelectorQuery().in(this);
// query.selectAll(element).boundingClientRect();
// query.exec((res) => {
// that.swiperHeight = res[0][this.swiperCurrentIndex].height;
// console.log("swiperHeight:"+that.swiperHeight);
// })
// },
setShareInfoStatus: function() {
this.shareInfoStatus = !this.shareInfoStatus;
},
shareInfo:function(){
this.setShareInfoStatus();
},
likeInfo:function(){
var id = this.innId;
uni.showLoading();
getHotelNewsZan(id).then((res)=>{
uni.hideLoading();
var msg = '操作成功!';
if(res.msg.length>0){
msg = res.msg;
}
uni.showToast({
title: msg,
mask: false,
duration: 1500
});
setTimeout(function(){
//刷新界面
that.fetchInnInfoDetail();
},1500);
}).catch((err)=>{
uni.hideLoading()
uni.showToast({
title: err.msg+'',
icon:'none',
mask: false,
duration: 1500
});
}).finally(()=>{
})
},
enrollInn:function(){
//this.$yrouter.redirectTo('');
var id = this.innInfo.hotelId;
var pages = getCurrentPages();
if (pages.length>1) {
var prePage = pages[pages.length - 2];
//判断上一页是不是客栈主页
if(prePage.route == 'pagesInn/inn/innHome'){
this.$yrouter.back();
}else{
this.$yrouter.replace({
path: "/pagesInn/inn/innHome",
query: { id: id }
});
}
}else{
this.$yrouter.replace({
path: "/pagesInn/inn/innHome",
query: { id: id }
});
}
},
formattedDateStr:function(str){
return formatDateTime(str,'yyyy/MM/dd HH:mm:ss');
},
fetchInnInfoDetail:function(){
getHotelNewsDetail(this.innId).then((res)=>{
that.innInfo = res.data;
}).catch((err)=>{
uni.showToast({
title: err.msg+'',
icon:'none',
mask: false,
duration: 1500
});
}).finally(()=>{
})
},
like:function(){
uni.showLoading();
getHotelNewsZan(this.innId).then((res)=>{
uni.hideLoading();
//刷新界面
that.fetchInnDetail();
}).catch((err)=>{
uni.hideLoading();
uni.showToast({
title: err+'',
icon:'none',
mask: false,
duration: 1500
});
}).finally(()=>{
})
}
}
}
import {getHotelNewsDetail, getHotelNewsZan} from "@/api/inn";
export default {
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
id: null,
info: null
}
},
onLoad(options) {
this.id = options.id;
this.init();
},
methods: {
init() {
getHotelNewsDetail(this.id).then(({data}) => this.info = data);
},
likeInfo() {
let that = this;
uni.showLoading();
getHotelNewsZan(this.id).then((res) => {
uni.hideLoading();
uni.showToast({
title: res.msg,
mask: false,
duration: 1500,
success() {
if (res.status === 200) that.info = res.data;
}
})
}).catch((err) => {
uni.hideLoading()
uni.showToast({
title: err.msg + '',
icon: 'none',
mask: false,
duration: 1500
});
})
},
}
}
</script>
<style lang="less" scoped>
.container{
position: relative;
background: #ffffff;
}
.cover{
width: 100%;
height: 218rpx;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
opacity: 0.6;
// background-color:transparent;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.title-section{
padding: 32rpx;
// width: 100%;
// height: 218rpx;
background-color: transparent;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
<style lang="less">
.pages-inn-info-detail {
.top-box {
padding: 40rpx 32rpx 20rpx;
box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
.banner {
height: 750rpx;
-webkit-transform:rotate(0);
position: relative;
width: 100%;
overflow: hidden;
.title {
margin-bottom: 20rpx;
font-size: 40rpx;
font-weight: bold;
line-height: 64rpx;
color: #333333;
}
.sub {
font-size: 32rpx;
line-height: 1;
color: #333333;
image {
width: 40rpx;
height: 40rpx;
margin-right: 4rpx;
vertical-align: middle;
}
.datetime {
color: #999999;
}
.num {
line-height: 40rpx;
}
}
}
.video-box {
box-sizing: border-box;
padding: 40rpx 32rpx 0;
}
.content-box {
padding: 40rpx 32rpx;
box-sizing: border-box;
}
}
.banner swiper{
// height: 600rpx;
height: 100%;
}
.banner .swiper-item{
height: 100%;
width: 100%;
}
.banner image{
width: 100%;
// height: 600rpx;
height: 100%;
}
.hotel-section{
padding: 32rpx;
}
.hotel-logo{
width: 72rpx;
height: 72rpx;
flex-shrink: 0;
margin-right: 20rpx;
}
.hotel-logo image{
width: 100%;
height: 100%;
border-radius: 50%;
}
.hotel-name{
font-size: 28rpx;
color: #080F1A;
}
.hotel-date{
font-size: 22rpx;
color: #C2C5CC;
}
.enrollInnBtn{
text-align: center;
flex-shrink: 0;
width: 122rpx;
height: 48rpx;
background: #0DC5C5;
opacity: 1;
border-radius: 8rpx;
font-size: 22rpx;
color: #FFFFFF;
}
.likeNum-txt{
font-size: 22rpx;
color: #080F1A;
}
.seeNum-txt{
font-size: 22rpx;
color: #080F1A;
}
.detail-section{
padding: 32rpx;
font-size: 28rpx;
font-weight: 400;
color: #080F1A;
margin-bottom: 114rpx;
}
.bottom-holder{
position: fixed;
background-color: transparent;
left: 0;
right: 0;
height: 114rpx;
padding: 32rpx;
box-sizing: border-box;
}
.share-section{
top: var(--status-bar-height);
padding-top: 44px;
}
</style>
pagesInn/inn/innInfoDetail_bak.vue
+387
View File
@@ -0,0 +1,387 @@
<template>
<view class="container">
<hx-navbar
title=" "
:fixed="true"
statusBarFontColor="#ffffff"
barPlaceholder="hidden"
transparent="auto"
color="#FFFFFF"
:background-color="[[254,150,107],[255, 88, 75]]"
:pageScroll.sync="scrollData"/>
<!-- <block slot="right">
<view class="">
<text class="iconfont icon-fenxiang" style="font-size: 48rpx;"></text>
<view class="" @click="like">
<image v-if="innInfo.isLike==0" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210302161110012686.png'" mode=""></image>
<image v-if="innInfo.isLike>0" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210302161135069143.png'" mode=""></image>
</view>
</view>
</block> -->
</hx-navbar>
<block v-if="innInfo">
<view v-if="innInfo.type=='NT_TEXT'" class="banner">
<swiper :current="swiperCurrentIndex" indicatorDots="true" indicator-active-color='rgba(255, 255, 255, 1)' indicator-color='rgba(255, 255, 255, 0.3)' v-if="innInfo.resources.length > 0" autoplay circular>
<block v-for="(imgUrl, index) in innInfo.resources" :key="index">
<swiper-item>
<view class="swiper-item">
<image class="swiper-item-content" :src="imgUrl" style="object-fit: cover;" mode="aspectFill" />
</view>
</swiper-item>
</block>
</swiper>
<!-- <view class="share-section" style="position: absolute;left: 0;right: 0;">
<view class="acea-row row-middle row-right pad20" style="flex-shrink: 0;">
<view class="" style="margin-right: 20rpx;"><image @click="shareInfo" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210304153545482917.png'" mode=""></image></view>
<view class="" @click="likeInfo">
<image v-if="innInfo.isLike == null || parseInt(innInfo.isLike)==0" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210302161110012686.png'" mode=""></image>
<image v-if="innInfo.isLike != null && parseInt(innInfo.isLike)==1" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210302161135069143.png'" mode=""></image>
</view>
</view>
</view> -->
<view class="cover">
</view>
<view class="title-section acea-row row-middle">
<view class="" style="font-size: 32rpx;color: #ffffff;flex-grow: 1;">{{innInfo.name}}</view>
<!-- <view class="acea-row row-column pad20" style="flex-shrink: 0;">
<image @click="shareInfo" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210304153545482917.png'" mode=""></image>
<view class="" @click="likeInfo">
<image v-if="innInfo.isLike == null || parseInt(innInfo.isLike)==0" style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210302161110012686.png'" mode=""></image>
<image v-else style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20210302161135069143.png'" mode=""></image>
</view>
</view> -->
</view>
<!-- <image style="width: 750rpx;position: absolute;left: 0;bottom: 0;" :src="webUrl+'/20210227115029488890.png'" mode="widthFix"></image> -->
</view>
<view v-if="innInfo.type=='NT_VIDEO'" class="banner">
<block v-if="innInfo.resources.length > 0">
<video style="width: 100%;height: 100%;" autoplay :src="innInfo.resources[0]"></video>
</block>
</view>
<view class="hotel-section acea-row row-center">
<view class="hotel-logo">
<image :src="innInfo.hotelLogo" mode=""></image>
</view>
<view class="acea-row row-column" style="flex-grow: 1;">
<view class="hotel-name">{{innInfo.hotelName}}</view>
<view class="hotel-date">{{formattedDateStr(innInfo.createdTime)}}</view>
</view>
<view class="enrollInnBtn acea-row row-center row-middle" @click="enrollInn">进入主页</view>
</view>
<view class="detail-section" v-html="innInfo.content">
<!-- {{innInfo.content}} -->
</view>
<view class="bottom-holder acea-row row-middle row-right savebottom">
<view class="acea-row row-middle">
<view class="acea-row row-middle">
<image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;" :src="webUrl+'/20220901224017781784.png'" mode=""></image>
<text class="seeNum-txt">{{innInfo.pv}}</text>
</view>
<view class="acea-row row-middle" style="margin-left: 20rpx;" @click="likeInfo">
<block v-if="innInfo.zanVo != null">
<image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;" :src="webUrl+'/20210302161135069143.png'" mode=""></image>
</block>
<block v-else>
<image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;" :src="webUrl+'/20220901224304100136.png'" mode=""></image>
</block>
<text class="likeNum-txt">{{innInfo.zan}}</text>
</view>
</view>
</view>
</block>
<ShareInfo v-on:setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></ShareInfo>
</view>
</template>
<script>
import { getHotelNewsDetail,getHotelNewsZan} from "@/api/inn.js";
import { formatDateTime,isNullOrEmpty} from "@/utils";
import ShareInfo from "@/components/ShareInfo";
var that;
export default {
components:{
ShareInfo
},
data() {
return {
webUrl:this.$VUE_APP_RESOURCES_URL,
scrollData: {},
shareInfoStatus: false,
innInfo:null,
swiperHeight:300,
swiperCurrentIndex:0,
// innInfo:{
// isLike:0,
// type:'NT_TEXT',
// resources:[
// 'http://resource.xdd618.com/黄精.jpg',
// 'http://resource.xdd618.com/黄精.jpg',
// ]
// },
innId:0
}
},
//必须在页面加 onPageScroll(e){} ，才能滑动显示背景
onPageScroll(e){
this.scrollData = e;
},
onLoad:function(e){
that = this;
this.innId = e.id;
this.fetchInnInfoDetail();
},
methods: {
// changeSwiper:function(e){
// this.swiperCurrentIndex = e.detail.current;
// this.getCurrentSwiperHeight('.swiper-item-content');
// },
// getCurrentSwiperHeight(element) {
// let query = uni.createSelectorQuery().in(this);
// query.selectAll(element).boundingClientRect();
// query.exec((res) => {
// that.swiperHeight = res[0][this.swiperCurrentIndex].height;
// console.log("swiperHeight:"+that.swiperHeight);
// })
// },
setShareInfoStatus: function() {
this.shareInfoStatus = !this.shareInfoStatus;
},
shareInfo:function(){
this.setShareInfoStatus();
},
likeInfo:function(){
var id = this.innId;
uni.showLoading();
getHotelNewsZan(id).then((res)=>{
uni.hideLoading();
var msg = '操作成功!';
if(res.msg.length>0){
msg = res.msg;
}
uni.showToast({
title: msg,
mask: false,
duration: 1500
});
setTimeout(function(){
//刷新界面
that.fetchInnInfoDetail();
},1500);
}).catch((err)=>{
uni.hideLoading()
uni.showToast({
title: err.msg+'',
icon:'none',
mask: false,
duration: 1500
});
}).finally(()=>{
})
},
enrollInn:function(){
//this.$yrouter.redirectTo('');
var id = this.innInfo.hotelId;
var pages = getCurrentPages();
if (pages.length>1) {
var prePage = pages[pages.length - 2];
//判断上一页是不是客栈主页
if(prePage.route == 'pagesInn/inn/innHome'){
this.$yrouter.back();
}else{
this.$yrouter.replace({
path: "/pagesInn/inn/innHome",
query: { id: id }
});
}
}else{
this.$yrouter.replace({
path: "/pagesInn/inn/innHome",
query: { id: id }
});
}
},
formattedDateStr:function(str){
return formatDateTime(str,'yyyy/MM/dd HH:mm:ss');
},
fetchInnInfoDetail:function(){
getHotelNewsDetail(this.innId).then((res)=>{
that.innInfo = res.data;
}).catch((err)=>{
uni.showToast({
title: err.msg+'',
icon:'none',
mask: false,
duration: 1500
});
}).finally(()=>{
})
},
like:function(){
uni.showLoading();
getHotelNewsZan(this.innId).then((res)=>{
uni.hideLoading();
//刷新界面
that.fetchInnDetail();
}).catch((err)=>{
uni.hideLoading();
uni.showToast({
title: err+'',
icon:'none',
mask: false,
duration: 1500
});
}).finally(()=>{
})
}
}
}
</script>
<style lang="less" scoped>
.container{
position: relative;
background: #ffffff;
}
.cover{
width: 100%;
height: 218rpx;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
opacity: 0.6;
// background-color:transparent;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.title-section{
padding: 32rpx;
// width: 100%;
// height: 218rpx;
background-color: transparent;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.banner {
height: 750rpx;
-webkit-transform:rotate(0);
position: relative;
width: 100%;
overflow: hidden;
}
.banner swiper{
// height: 600rpx;
height: 100%;
}
.banner .swiper-item{
height: 100%;
width: 100%;
}
.banner image{
width: 100%;
// height: 600rpx;
height: 100%;
}
.hotel-section{
padding: 32rpx;
}
.hotel-logo{
width: 72rpx;
height: 72rpx;
flex-shrink: 0;
margin-right: 20rpx;
}
.hotel-logo image{
width: 100%;
height: 100%;
border-radius: 50%;
}
.hotel-name{
font-size: 28rpx;
color: #080F1A;
}
.hotel-date{
font-size: 22rpx;
color: #C2C5CC;
}
.enrollInnBtn{
text-align: center;
flex-shrink: 0;
width: 122rpx;
height: 48rpx;
background: #0DC5C5;
opacity: 1;
border-radius: 8rpx;
font-size: 22rpx;
color: #FFFFFF;
}
.likeNum-txt{
font-size: 22rpx;
color: #080F1A;
}
.seeNum-txt{
font-size: 22rpx;
color: #080F1A;
}
.detail-section{
padding: 32rpx;
font-size: 28rpx;
font-weight: 400;
color: #080F1A;
margin-bottom: 114rpx;
}
.bottom-holder{
position: fixed;
background-color: transparent;
left: 0;
right: 0;
height: 114rpx;
padding: 32rpx;
box-sizing: border-box;
}
.share-section{
top: var(--status-bar-height);
padding-top: 44px;
}
</style>