Feat(时令尝鲜):接口对接
This commit is contained in:
lifizer
@@ -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>
|
||||
Reference in New Issue
Block a user