1359 lines
35 KiB
Vue
1359 lines
35 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- title="店铺主页" -->
|
||
<hx-navbar
|
||
:fixed="true"
|
||
:background-color="[[13,197,197],[13,197,197]]"
|
||
:pageScroll.sync="scrollData"
|
||
statusBarFontColor="#ffffff"
|
||
barPlaceholder="hidden"
|
||
transparent="auto"
|
||
color='#ffffff'
|
||
/>
|
||
<view v-if="isLoad">
|
||
<view class="cover-box">
|
||
<image
|
||
v-if="inn.coverType === 1"
|
||
:src="inn.cover"
|
||
class="full-img"
|
||
mode="widthFix"
|
||
/>
|
||
<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">
|
||
<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>
|
||
</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 class="inn-signature-wrap">
|
||
<view class="triangle"></view>
|
||
<view class="inn-signature">
|
||
{{ inn.content }}
|
||
</view>
|
||
<view class="share-btn" @click="changeShare">
|
||
<image :src="webUrl + '/page/hotel/share.png'" class="img" />
|
||
</view>
|
||
</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;"
|
||
/>
|
||
</view>
|
||
<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="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">
|
||
<view
|
||
v-for="(item, index) in tabList"
|
||
:key="index"
|
||
:class="item.isShow ? '' : 'hide'"
|
||
class="tab"
|
||
@click="changeTab(item.value)"
|
||
>
|
||
<text :class="activeIndex === index ? 'tab-item-active' : 'tab-item-no-active'">
|
||
{{ item.text }}
|
||
</text>
|
||
<view v-show="activeIndex === index" class="btLine"></view>
|
||
</view>
|
||
</view>
|
||
<view :class="isMyInn ? 'my-inn-page' : ''">
|
||
<!-- v4 商品列表 -->
|
||
<view v-if="activeIndex === 0" class="goods-section">
|
||
<view class="flex flex-wrap">
|
||
<view
|
||
v-for="(item,index) in goodsList"
|
||
:key="index"
|
||
class="item"
|
||
@click="goGoodsConByID(item)"
|
||
>
|
||
<image
|
||
:src="item.image"
|
||
class="cover"
|
||
/>
|
||
<view class="">
|
||
<view class="name more-t">{{ item.storeName }}</view>
|
||
<view class="price-line flex ai-center">
|
||
<image
|
||
:src="webUrl + '/20221118104357701129.png'"
|
||
class="label"
|
||
mode="scaleToFill"
|
||
/>
|
||
<text>￥{{ item.price }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="sales-line flex ai-center">
|
||
<image
|
||
:src="webUrl + '/20221118092713277343.png'"
|
||
class="icon"
|
||
mode="scaleToFill"
|
||
/>
|
||
<text>{{ item.sales }}人已购买</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-show="goodsList.length > 0" class="btn">
|
||
<view class="btn-cont" @click="viewAllGoodHandle">
|
||
查看所有商品
|
||
<text class="iconfont icon-jiantou"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 最新资讯 -->
|
||
<view
|
||
v-if="activeIndex === 1"
|
||
class="info-section"
|
||
>
|
||
<view v-if="infoArray.length > 0" class="info-wrapper">
|
||
<view class="info-list">
|
||
<view
|
||
v-for="(item, index) in infoArray"
|
||
:key="index"
|
||
class="info-item"
|
||
>
|
||
<view
|
||
:class="item.isTop === 1 ? 'info-item-top' : ''"
|
||
:style="{
|
||
'background-image': item.isTop ? ('url(' + webUrl + '/page/hotel/info-top-bg.png)') : 'none'
|
||
}"
|
||
class="info-item-header"
|
||
@click="infoClick(item)"
|
||
>
|
||
<view class="name one-t">
|
||
{{ item.name }}
|
||
</view>
|
||
<view class="intro more-t">
|
||
{{ item.intro }}
|
||
</view>
|
||
</view>
|
||
<view class="info-item-body">
|
||
<view v-if="item.type === 'NT_VIDEO'" class="video">
|
||
<video
|
||
:src="item.video"
|
||
:poster="item.video + '?vframe/jpg/offset/1'"
|
||
controls
|
||
play-btn-position="center"
|
||
class="video-item"
|
||
/>
|
||
</view>
|
||
<view v-else>
|
||
<img-box
|
||
:imgList="item.resources"
|
||
:num="item.resources.length"
|
||
:img-radius="10"
|
||
style="width: 100%;"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="info-item-bottom">
|
||
<view class="time">
|
||
{{ item.createdTime ? item.createdTime.replace(/-/g, '.').substr(0, 10) : '' }}
|
||
</view>
|
||
<view class="btns">
|
||
<view class="flex">
|
||
<image
|
||
:src="webUrl + '/20230803152147141807.png'"
|
||
class="icon"
|
||
/>
|
||
<text class="seeNum-txt">{{ item.pv }}</text>
|
||
</view>
|
||
<view class="flex">
|
||
<image
|
||
:src="webUrl + '/20230803151302213857.png'"
|
||
class="icon"
|
||
/>
|
||
<text class="seeNum-txt">{{ item.zan }}</text>
|
||
</view>
|
||
<view v-if="isMyInn" class="flex more-btn" @click="toggleMoreHandle(index)">
|
||
<image
|
||
:src="webUrl + '/page/hotel/more.png'"
|
||
class="icon"
|
||
/>
|
||
<view
|
||
v-if="item.showMore"
|
||
class="more-wrapper"
|
||
>
|
||
<view
|
||
v-show="item.isTop === 0"
|
||
class="more-item"
|
||
@click="setTopInfoHandle(item, index)"
|
||
>
|
||
<image
|
||
:src="webUrl + '/page/hotel/settop.png'"
|
||
class="more-icon"
|
||
/>
|
||
置顶动态
|
||
</view>
|
||
<view class="more-item" @click="deleteInnInfo(item, index)">
|
||
<image
|
||
:src="webUrl + '/page/hotel/delete.png'"
|
||
class="more-icon"
|
||
/>
|
||
删除动态
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 企业文化 -->
|
||
<view
|
||
v-if="activeIndex === 2"
|
||
class="pics-section"
|
||
>
|
||
<view
|
||
v-if="inn.pics.length > 0"
|
||
class="pics-list acea-row"
|
||
>
|
||
<view
|
||
v-for="(url, index) in inn.pics"
|
||
:key="index"
|
||
:style="{ width: picColumnWidth }"
|
||
class="pics-item"
|
||
@click="showPic(index)"
|
||
>
|
||
<image
|
||
:style="{
|
||
width: picColumnWidth,
|
||
height: picColumnWidth,
|
||
borderRadius: '8rpx'
|
||
}"
|
||
:src="url"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 商家资质 -->
|
||
<view
|
||
v-if="activeIndex === 3"
|
||
class="qualifications-section"
|
||
>
|
||
<image
|
||
v-for="(item, index) in inn.qualifications"
|
||
:key="index"
|
||
:src="item.image"
|
||
class="store-img"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view v-if="isMyInn" class="bottom-view acea-row">
|
||
<view class="bottom-btn" @click="publishBtnClick">
|
||
<image :src="webUrl + '/page/hotel/publish.png'" class="img" />
|
||
发布动态
|
||
</view>
|
||
<view class="bottom-btn" @click="modifyBtnClick">
|
||
<image :src="webUrl + '/page/hotel/edit.png'" class="img" />
|
||
修改资料
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<goo-skeleton v-else />
|
||
<!-- 分享 -->
|
||
<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>
|
||
|
||
<script>
|
||
import {
|
||
getHomeHotelDetail,
|
||
getHotelDetail,
|
||
getHotelNewsList,
|
||
getHotelZan,
|
||
getPoster,
|
||
getHotelGoodList,
|
||
postHotelNewsDel,
|
||
setTopHotelNew
|
||
} from "@/api/inn.js";
|
||
import {formatDateTime} from "@/utils";
|
||
import {getUrlParam} from "@/utils/common.js";
|
||
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
||
import cookie from "@/utils/store/cookie";
|
||
import {addStore, removeStore} from "@/api/favorite";
|
||
import GooSkeleton from '@/components/GooSkeleton/index.vue'
|
||
|
||
export default {
|
||
components: {
|
||
imgBox,
|
||
GooSkeleton
|
||
},
|
||
data() {
|
||
return {
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
isLoad: false,
|
||
isExpand: false,
|
||
activeIndex: 0,
|
||
page: 1,
|
||
limit: 20,
|
||
loading: false,
|
||
loadend: false,
|
||
picColumnWidth: '325rpx',
|
||
scrollData: {},
|
||
infoArray: [],
|
||
inn: {
|
||
cityName: '',
|
||
pics: [],
|
||
desc: '',
|
||
latitude: '',
|
||
longitude: ''
|
||
},
|
||
isMyInn: false, //是否是自己的客栈
|
||
goodsList: [],
|
||
goodsPage: 1,
|
||
showShare: false,
|
||
posterUrl: "", // 分享海报
|
||
id: null,
|
||
partnerId: null,
|
||
isLike: false, //点赞
|
||
isFavorite: false,
|
||
favoriteCount: 0,
|
||
videoStyle: {
|
||
width: '750rpx',
|
||
height: '500rpx'
|
||
},
|
||
tabList: [
|
||
{ text: '精选商品', value: 0, isShow: true },
|
||
{ text: '最新资讯', value: 1, isShow: true },
|
||
{ text: '企业文化', value: 2, isShow: true },
|
||
{ text: '商家资质', value: 3, isShow: true }
|
||
]
|
||
}
|
||
},
|
||
//必须在页面加 onPageScroll(e){} ，才能滑动显示背景
|
||
onPageScroll(e) {
|
||
this.scrollData = e;
|
||
},
|
||
onShow: function () {
|
||
this.page = 1;
|
||
this.loading = false;
|
||
this.loadend = false;
|
||
},
|
||
onLoad: function (options) {
|
||
if (options.id) {
|
||
this.id = options.id || null;
|
||
this.partnerId = options.partnerId || null;
|
||
} else {
|
||
let obj = uni.getEnterOptionsSync();
|
||
if (options.scene || obj.query.scene) {
|
||
let query = options ? decodeURIComponent(options.scene) : decodeURIComponent(obj.query.scene);
|
||
this.id = getUrlParam(query, "id") || null;
|
||
this.partnerId = getUrlParam(query, "partnerId") || null;
|
||
}
|
||
}
|
||
if (this.partnerId) cookie.set("spread", this.partnerId);
|
||
this.fetchInnDetail();
|
||
this.fetchInnInfoList();
|
||
this.initPoster();
|
||
let that = this;
|
||
this.isMyInn = (this.$yroute.query.isMyInn != null ? true : false);
|
||
uni.getSystemInfo({
|
||
success: (e) => {
|
||
//两列商品宽度
|
||
that.picColumnWidth = (e.screenWidth - uni.upx2px(92)) / 2 + 'px';
|
||
}
|
||
});
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
if (this.activeIndex == 0) {
|
||
this.page = 1;
|
||
this.loading = false;
|
||
this.loadend = false;
|
||
this.fetchInnInfoList();
|
||
} else {
|
||
this.fetchInnDetail();
|
||
}
|
||
},
|
||
methods: {
|
||
changeShare() {
|
||
this.showShare = !this.showShare;
|
||
},
|
||
goGoodsConByID(item) {
|
||
this.$yrouter.push({
|
||
path: '/pages/shop/GoodsCon/index',
|
||
query: {
|
||
id: item.id
|
||
}
|
||
});
|
||
},
|
||
saveImg() {
|
||
let that = this;
|
||
uni.getSetting({
|
||
success: getRes => {
|
||
if (getRes.authSetting["scope.writePhotosAlbum"]) {
|
||
that.downloadImage();
|
||
} else {
|
||
uni.authorize({
|
||
scope: "scope.writePhotosAlbum",
|
||
success: () => {
|
||
that.downloadImage();
|
||
},
|
||
fail: () => {
|
||
console.log("authorize fail")
|
||
uni.openSetting({
|
||
success: openRes => {
|
||
console.log(typeof openRes, openRes)
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: "请在设置中打开对应权限",
|
||
icon: "none"
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log(err, 2)
|
||
}
|
||
})
|
||
},
|
||
downloadImage() {
|
||
let that = this;
|
||
const randomID = () => Math.random().toString(36).substring(2);
|
||
uni.downloadFile({
|
||
url: this.posterUrl, //网络图片的地址
|
||
filePath: wx.env.USER_DATA_PATH + "/share_" + randomID() + ".png", //指定的本地文件路径
|
||
success: downRes => {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: downRes.filePath, //临时文件地址
|
||
success: function () {
|
||
uni.showToast({
|
||
title: "保存成功",
|
||
icon: "success",
|
||
success() {
|
||
that.showShare = false;
|
||
}
|
||
})
|
||
},
|
||
fail: function (err) {
|
||
uni.showToast({
|
||
title: err,
|
||
icon: "none"
|
||
})
|
||
}
|
||
})
|
||
},
|
||
fail: function (err) {
|
||
uni.showToast({
|
||
title: err.errMsg,
|
||
icon: "error"
|
||
})
|
||
}
|
||
})
|
||
},
|
||
doExpandDesc: function () {
|
||
this.isExpand = !this.isExpand;
|
||
},
|
||
showQrcode: function () {
|
||
uni.previewImage({
|
||
current: 0,
|
||
urls: [this.inn.qrcode]
|
||
});
|
||
},
|
||
zanInn: function () {
|
||
getHotelZan(this.inn.id).then(() => {
|
||
this.isLike = !this.isLike;
|
||
this.fetchInnDetail();
|
||
}).catch((err) => {
|
||
uni.showToast({
|
||
title: err.msg + '',
|
||
icon: 'none',
|
||
mask: false,
|
||
duration: 1500
|
||
});
|
||
})
|
||
},
|
||
infoClick: function (info) {
|
||
this.$yrouter.push('/pagesInn/inn/innInfoDetail?id=' + info.id);
|
||
},
|
||
publishBtnClick: function () {
|
||
this.$yrouter.push('/pagesInn/inn/innInfoPublish?hotelId=' + this.inn.id);
|
||
},
|
||
modifyBtnClick: function () {
|
||
this.$yrouter.push("/pagesInn/inn/innProfileEdit?hotel=" + encodeURIComponent(JSON.stringify(this.inn)));
|
||
// this.$yrouter.push('/pagesInn/inn/innProfileEdit');
|
||
},
|
||
//删除客栈动态
|
||
deleteInnInfo: function (info, index) {
|
||
let that = this;
|
||
that.toggleMoreHandle(index)
|
||
uni.showModal({
|
||
title: '确认删除此动态?',
|
||
content: '',
|
||
showCancel: true,
|
||
cancelText: '取消',
|
||
confirmText: '确认',
|
||
success: res => {
|
||
|
||
if (res.confirm) {
|
||
uni.showLoading();
|
||
postHotelNewsDel({
|
||
id: info.id,
|
||
hotelId: that.inn.id
|
||
}).then((res1) => {
|
||
uni.hideLoading();
|
||
that.$dialog.toast({
|
||
mes: '删除成功!'
|
||
});
|
||
// 删除成功刷新动态列表
|
||
that.page = 1;
|
||
that.loading = false;
|
||
that.loadend = false;
|
||
that.fetchInnInfoList();
|
||
}).catch((err) => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: err.msg,
|
||
icon: "none",
|
||
duration: 1500
|
||
});
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
fetchInnInfoList: function () {
|
||
let that = this;
|
||
if (that.loading) return; //阻止下次请求（false可以进行请求）；
|
||
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
|
||
that.loading = true;
|
||
getHotelNewsList({
|
||
page: that.page,
|
||
limit: that.limit,
|
||
hotelId: that.id
|
||
}).then(res => {
|
||
that.loading = false;
|
||
//apply();js将一个数组插入另一个数组;
|
||
if (that.page == 1) {
|
||
that.infoArray = [];
|
||
}
|
||
that.infoArray.push.apply(that.infoArray, res.data.map((info) => {
|
||
var pt = info.createdTime.replace(/-/g, "/");
|
||
info.year = formatDateTime(pt, 'yyyy');
|
||
info.monthDay = formatDateTime(pt, 'MM/dd');
|
||
info.time = formatDateTime(pt, 'HH:mm:ss');
|
||
info.showMore = false
|
||
return info;
|
||
}));
|
||
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
|
||
that.page = that.page + 1;
|
||
}).catch((err) => {
|
||
|
||
}).finally(() => {
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
},
|
||
handleRichText: function (str) {
|
||
if (str != null) {
|
||
return `<span class="fixed">简介：</span>` + str.replace(/<\/?[^>]*>/g, '');
|
||
} else {
|
||
return '';
|
||
}
|
||
},
|
||
fetchInnDetail: function () {
|
||
const that = this
|
||
let reqFn = null
|
||
if (that.isMyInn) {
|
||
reqFn = getHotelDetail
|
||
} else {
|
||
reqFn = getHomeHotelDetail
|
||
}
|
||
reqFn(that.id).then((res) => {
|
||
const { success, data } = res
|
||
if (success) {
|
||
that.isLoad = true
|
||
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
|
||
// 该店铺无商品则不显示“精选商品”
|
||
if (data.hasProduct <= 0) {
|
||
that.activeIndex = 1
|
||
that.tabList[0].isShow = false
|
||
} else {
|
||
that.fetchGoods()
|
||
}
|
||
// 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);
|
||
},
|
||
showLocation: function () {
|
||
if (!this.inn.latitude || !this.inn.longitude) {
|
||
this.$dialog.error('暂无位置信息');
|
||
} else {
|
||
uni.openLocation({
|
||
latitude: this.inn.latitude,
|
||
longitude: this.inn.longitude
|
||
});
|
||
}
|
||
},
|
||
showPic: function (index) {
|
||
uni.previewImage({
|
||
current: index,
|
||
urls: this.inn.pics
|
||
})
|
||
},
|
||
changeTab: function (index) {
|
||
this.activeIndex = index;
|
||
this.page = 1;
|
||
this.loading = false;
|
||
this.loadend = false;
|
||
//刷新数据
|
||
switch (this.activeIndex) {
|
||
case 1:
|
||
this.fetchInnInfoList();
|
||
break;
|
||
case 0:
|
||
this.goodsPage = 1;
|
||
this.goodsList = [];
|
||
this.fetchGoods();
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
fetchGoods() {
|
||
getHotelGoodList({
|
||
id: this.inn.id,
|
||
page: this.goodsPage,
|
||
limit: 12
|
||
}).then(res => {
|
||
const { success, data } = res
|
||
if (success) {
|
||
const len = data.records.length
|
||
if (len > 0) {
|
||
for (let i = 0; i < len; i++) {
|
||
this.goodsList.push(data.records[i])
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
call: function () {
|
||
if (this.inn.tel != undefined && this.inn.tel.length > 0) {
|
||
uni.makePhoneCall({
|
||
// 手机号
|
||
phoneNumber: this.inn.tel,
|
||
// 成功回调
|
||
success: (res) => {
|
||
console.log('调用成功!')
|
||
},
|
||
// 失败回调
|
||
fail: (res) => {
|
||
console.log('调用失败!')
|
||
}
|
||
});
|
||
} else {
|
||
this.$dialog.error('电话为空');
|
||
}
|
||
},
|
||
async doneFavorite() {
|
||
if (this.isFavorite) {
|
||
const res = await removeStore(this.id)
|
||
if (res.success) {
|
||
this.isFavorite = false
|
||
this.favoriteCount = res.data.favoriteCount
|
||
}
|
||
} else {
|
||
const res = await addStore(this.id)
|
||
if (res.success) {
|
||
this.isFavorite = true
|
||
this.favoriteCount = res.data.favoriteCount
|
||
}
|
||
}
|
||
},
|
||
toggleMoreHandle(index) {
|
||
this.$set(this.infoArray[index], 'showMore', !this.infoArray[index].showMore)
|
||
},
|
||
viewAllGoodHandle() {
|
||
uni.navigateTo({
|
||
url: '/pagesInn/inn/innGoodList?id=' + this.inn.id,
|
||
})
|
||
},
|
||
setTopInfoHandle(item) {
|
||
uni.showLoading()
|
||
setTopHotelNew({
|
||
id: item.id,
|
||
isTop: 1
|
||
}).then(res => {
|
||
const { success } = res
|
||
if (success) {
|
||
this.$dialog.toast({
|
||
mes: '操作成功!'
|
||
})
|
||
this.fetchInnInfoList()
|
||
}
|
||
}).finally(() => {
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.conter {
|
||
/* width:600upx; */
|
||
height: auto;
|
||
min-height: 100rpx;
|
||
display: -webkit-box;
|
||
word-break: break-all;
|
||
-webkit-box-orient: vertical;
|
||
/* 要显示多少行就改变line-clamp的数据,此处折叠起来显示一行*/
|
||
-webkit-line-clamp: 5;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
background-color: #F5F5F5;
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.hide {
|
||
display: -webkit-box;
|
||
}
|
||
|
||
.show {
|
||
display: block;
|
||
}
|
||
|
||
|
||
.conter >>> img {
|
||
display: block;
|
||
max-width: 100% !important;
|
||
}
|
||
</style>
|
||
|
||
<style scoped lang="less">
|
||
@import "@/assets/css/store.less";
|
||
.my-inn-page {
|
||
padding: 0 0 100rpx 0;
|
||
}
|
||
.cover-box {
|
||
position: relative;
|
||
|
||
.full-img {
|
||
width: 750rpx;
|
||
}
|
||
.video {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.guarantee {
|
||
margin-right: 16rpx;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
background: #0DC5C5;
|
||
color: #fff;
|
||
font-size: 22rpx;
|
||
line-height: 1;
|
||
}
|
||
.zan-favorite-wrap {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
.on {
|
||
color: #FF564A;
|
||
}
|
||
}
|
||
.zan-box {
|
||
.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;
|
||
margin-bottom: 20rpx;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.goods-section {
|
||
padding: 40rpx 32rpx 0;
|
||
background: #F5F5FA;
|
||
|
||
.item {
|
||
position: relative;
|
||
width: 332rpx;
|
||
height: 528rpx;
|
||
box-sizing: border-box;
|
||
margin-right: 22rpx;
|
||
margin-bottom: 24rpx;
|
||
border-radius: 8rpx;
|
||
background: #fff;
|
||
|
||
.name {
|
||
padding: 8rpx 6rpx;
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.price-line {
|
||
padding: 0 10rpx;
|
||
font-size: 26rpx;
|
||
line-height: 38rpx;
|
||
color: #ED0F0F;
|
||
}
|
||
|
||
.sales-line {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
padding: 8rpx 10rpx 18rpx;
|
||
border-top: 1rpx solid #EFEFEF;
|
||
font-size: 24rpx;
|
||
line-height: 34rpx;
|
||
color: #8D8D8D;
|
||
}
|
||
}
|
||
|
||
.item:nth-child(2n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.cover {
|
||
width: 332rpx;
|
||
height: 332rpx;
|
||
background: rgba(255, 255, 255, 0.39);
|
||
border-radius: 8rpx;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.label {
|
||
width: 40rpx;
|
||
height: 24rpx;
|
||
margin-right: 4rpx;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 6rpx;
|
||
vertical-align: middle;
|
||
}
|
||
.btn {
|
||
display: flex;
|
||
padding: 20rpx 0 40rpx 0;
|
||
justify-content: center;
|
||
.btn-cont {
|
||
padding: 13rpx 30rpx;
|
||
border: 1px solid #0DC5C5;
|
||
border-radius: 8rpx;
|
||
color: #0DC5C5;
|
||
.iconfont {
|
||
margin: 0 0 0 20rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.container {
|
||
position: relative;
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
.innInfoWrap {
|
||
position: relative;
|
||
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 {
|
||
flex-shrink: 0;
|
||
width: 56*2rpx;
|
||
height: 56*2rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
|
||
.inn-logo image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.inn-name {
|
||
width: 280rpx;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
line-height: 48rpx;
|
||
}
|
||
|
||
.inn-owner {
|
||
font-size: 24rpx;
|
||
color: #8B8F99;
|
||
}
|
||
|
||
.inn-tag-wrap {
|
||
margin-top: 10rpx;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
.btLine {
|
||
width: 100%;
|
||
height: 6rpx;
|
||
margin-top: 18rpx;
|
||
background: #0DC5C5;
|
||
}
|
||
.pics-box {
|
||
margin: 36rpx;
|
||
background: #fff;
|
||
}
|
||
.pics-list {
|
||
position: relative;
|
||
padding: 32rpx 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
.pics-list .pics-item {
|
||
margin-left: 36rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.bottom-view {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 99;
|
||
display: flex;
|
||
height: 70rpx;
|
||
padding: 15rpx;
|
||
border-top: 1px solid #f1f1f1;
|
||
background: #FFFFFF;
|
||
|
||
.bottom-btn {
|
||
display: flex;
|
||
flex: 1;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
line-height: 70rpx;
|
||
&:first-child {
|
||
border-right: 1px solid #d5d5d5;
|
||
}
|
||
.img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin: 0 12rpx 0 0;
|
||
}
|
||
}
|
||
}
|
||
.tab-item-active {
|
||
color:#080F1A;
|
||
font-size:32rpx;
|
||
}
|
||
.tab-item-no-active {
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.top-tab {
|
||
margin: 60rpx 0 0 0;
|
||
border-bottom: 1px solid #ddd;
|
||
.tab {
|
||
margin: 0 35rpx;
|
||
&.hide {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
.info-section,
|
||
.pics-section,
|
||
.qualifications-section {
|
||
position: relative;
|
||
background-color: #f6f6f6;
|
||
}
|
||
.info-section,
|
||
.qualifications-section {
|
||
padding: 32rpx;
|
||
}
|
||
.info-section {
|
||
.info-item + .info-item {
|
||
margin: 32rpx 0 0 0;
|
||
}
|
||
.info-item {
|
||
border-radius: 10rpx;
|
||
background-color: #fff;
|
||
.info-item-header {
|
||
position: relative;
|
||
padding: 20rpx 20rpx 0 20rpx;
|
||
&.info-item-top {
|
||
padding-top: 60rpx;
|
||
background-size: 100% 80rpx;
|
||
background-repeat: no-repeat;
|
||
background-image: url();
|
||
}
|
||
.name {
|
||
font-size: 16px;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
.intro {
|
||
margin: 10rpx 0 0 0;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.info-item-body {
|
||
padding: 0 20rpx 20rpx 20rpx;
|
||
.video {
|
||
padding: 20rpx 0 0 0;
|
||
.video-item {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.info-item-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
border-top: 1px solid #f1f1f1;
|
||
font-size: 16px;
|
||
.time {
|
||
flex: 1;
|
||
color: #333;
|
||
}
|
||
.btns {
|
||
display: flex;
|
||
color: #999;
|
||
.flex + .flex {
|
||
margin: 0 0 0 32rpx;
|
||
}
|
||
.flex {
|
||
align-items: center;
|
||
}
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin: 0 8rpx 0 0;
|
||
}
|
||
.more-btn {
|
||
position: relative;
|
||
.more-wrapper {
|
||
position: absolute;
|
||
right: -20rpx;
|
||
top: -150rpx;
|
||
z-index: 5;
|
||
width: 200rpx;
|
||
border-radius: 12rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0px 1px 6px rgba(0,0,0,0.16);
|
||
.more-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 70rpx;
|
||
font-size: 14px;
|
||
color: #333;
|
||
&:first-child {
|
||
border-bottom: 1px solid #d5d5d5;
|
||
}
|
||
.more-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin: 0 10rpx 0 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|