liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2d73c2fe46875a3fa9f79d3e7ea0625c7206321b
xdd-uniapp-new/pagesInn/inn/innInfoDetail_bak.vue
T

388 lines
9.8 KiB
Vue
Raw Blame History

<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 View Git Blame Copy Permalink