1061 lines
27 KiB
Vue
1061 lines
27 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- title="店铺主页" -->
|
||
<hx-navbar :fixed="true" statusBarFontColor="#ffffff" barPlaceholder="hidden" transparent="auto" color='#ffffff'
|
||
:background-color="[[13,197,197],[13,197,197]]" :pageScroll.sync="scrollData"/>
|
||
|
||
<!-- 7-3-->
|
||
<image class="fixed-share" :src="webUrl+'/20230619110913307276.png'" @click="showShare=true"
|
||
v-if="posterUrl.length>0"/>
|
||
<u-popup :show="showShare" mode="center" bgColor="transparent">
|
||
<view class="box-share">
|
||
<view class="box-img">
|
||
<image class="icon" :src="webUrl+'/20230608112219219303.png'" @click="showShare=false"/>
|
||
<image class="main-img" :src="posterUrl"/>
|
||
</view>
|
||
<image class="btn" :src="webUrl+'/20230608112210135038.png'" @click="saveImg"/>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<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">
|
||
<text style="font-size: 24rpx;color: #080F1A;">{{ inn.content }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="inn.desc != null && inn.desc.length>0" class="" style="padding: 0 32rpx;margin-top: 30rpx;">
|
||
<view class="desc-box">
|
||
<view v-html="handleRichText(inn.desc)"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="map-wrap acea-row row-center">
|
||
<image style="height: 160rpx;width: 100%;" :src="webUrl+'/20210225151241154614.png'"></image>
|
||
<view class="address-block acea-row row-middle">
|
||
<image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/20220901223747933873.png'"
|
||
mode=""></image>
|
||
<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 style="width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/20220901223901017309.png'"
|
||
mode=""></image>
|
||
<text style="font-size: 24rpx;color: #41454d;">联系客服</text>
|
||
</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'"
|
||
mode=""></image>
|
||
<text style="font-size: 24rpx;color: #41454d;">进入地图</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="top-tab acea-row row-middle row-center" style="margin-top: 60rpx;border-bottom: 1px solid #f5f5f5;">
|
||
<view class="tab" @click="changeTab(0)">
|
||
<text class=""
|
||
:style="activeIndex==0?'color:#080F1A;font-size:32rpx;':'color:#A6AAB3;font-size:28rpx;'">企业文化
|
||
</text>
|
||
<view v-show="activeIndex==0" class="btLine"></view>
|
||
</view>
|
||
<view class="tab" style="margin-left: 70rpx;" @click="changeTab(1)">
|
||
<text class=""
|
||
:style="activeIndex==1?'color:#080F1A;font-size:32rpx;':'color:#A6AAB3;font-size:28rpx;'">最新资讯
|
||
</text>
|
||
<view v-show="activeIndex==1" class="btLine"></view>
|
||
</view>
|
||
<view class="tab" style="margin-left: 70rpx;" @click="changeTab(2)">
|
||
<text class=""
|
||
:style="activeIndex==2?'color:#080F1A;font-size:32rpx;':'color:#A6AAB3;font-size:28rpx;'">商家资质
|
||
</text>
|
||
<view v-show="activeIndex==2" class="btLine"></view>
|
||
</view>
|
||
<view class="tab" style="margin-left: 70rpx;" @click="changeTab(3)" v-show="inn.hasProduct>0">
|
||
<text class=""
|
||
:style="activeIndex==3?'color:#080F1A;font-size:32rpx;':'color:#A6AAB3;font-size:28rpx;'">商品
|
||
</text>
|
||
<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">
|
||
<view :style="{width:picColumnWidth}" @click="showPic(index)" class="pics-item" v-for="(url, index) in inn.pics"
|
||
:key="index">
|
||
<image :style="{width:picColumnWidth,height:picColumnWidth,borderRadius:'8rpx'}" :src="url" mode=""></image>
|
||
</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">
|
||
<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="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>
|
||
<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>
|
||
</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">
|
||
<view class="acea-row row-middle">
|
||
<image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;"
|
||
: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+'/20230803151302213857.png'" mode=""></image>
|
||
<text class="likeNum-txt">{{ info.zan }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="time">{{ info.time }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商家资质 -->
|
||
<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 class="item" v-for="(item,index) in goodsList" :key="index" @click="goGoodsConByID(item)">
|
||
<img class="cover" :src="item.image" alt="">
|
||
<view class="">
|
||
<view class="name more-t">{{ item.storeName }}</view>
|
||
<view class="price-line flex ai-center">
|
||
<img class="label" :src="webUrl+'/20221118104357701129.png'" mode="scaleToFill">
|
||
<text>￥{{ item.price }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="sales-line flex ai-center">
|
||
<img class="icon" :src="webUrl+'/20221118092713277343.png'" mode="scaleToFill">
|
||
<text>{{ item.sales }}人已购买</text>
|
||
</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>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getHomeHotelDetail,
|
||
getHotelDetail,
|
||
getHotelNewsList,
|
||
getHotelZan,
|
||
getPoster,
|
||
goodsList,
|
||
postHotelNewsDel
|
||
} from "@/api/inn.js";
|
||
import {formatDateTime} from "@/utils";
|
||
import {getUrlParam} from "@/utils/common.js";
|
||
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
||
import dragButton from "@/components/drag-button/drag-button.vue";
|
||
import cookie from "@/utils/store/cookie";
|
||
|
||
export default {
|
||
components: {
|
||
imgBox,
|
||
dragButton
|
||
},
|
||
data() {
|
||
return {
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
isExpand: false,
|
||
activeIndex: 0,
|
||
page: 1,
|
||
limit: 20,
|
||
loading: false,
|
||
loadend: false,
|
||
picColumnWidth: '325rpx',
|
||
scrollData: {},
|
||
infoArray: [],
|
||
inn: {},
|
||
isMyInn: false, //是否是自己的客栈
|
||
goodsList: [],
|
||
goodsPage: 1,
|
||
showShare: false,
|
||
posterUrl: "", // 分享海报
|
||
id: null,
|
||
partnerId: null,
|
||
isLike: false //点赞
|
||
}
|
||
},
|
||
//必须在页面加 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';
|
||
console.log('picColumnWidth:' + that.picColumnWidth);
|
||
}
|
||
});
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
if (this.activeIndex == 0) {
|
||
this.page = 1;
|
||
this.loading = false;
|
||
this.loadend = false;
|
||
this.fetchInnInfoList();
|
||
} else {
|
||
this.fetchInnDetail();
|
||
|
||
}
|
||
},
|
||
// 上拉触底
|
||
onReachBottom() {
|
||
if (this.activeIndex === 3) {
|
||
this.goodsPage++;
|
||
this.fetchGoods();
|
||
} else {
|
||
!this.loading && this.fetchInnInfoList();
|
||
}
|
||
},
|
||
methods: {
|
||
goRoom() {
|
||
uni.navigateTo({
|
||
url: `/pkg_common/views/room?id=${this.inn.merId}&name=${this.inn.name}`
|
||
})
|
||
},
|
||
|
||
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 => {
|
||
console.log(typeof downRes, downRes, "down")
|
||
|
||
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) {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '确认删除此动态?',
|
||
content: '',
|
||
showCancel: true,
|
||
cancelText: '取消',
|
||
confirmText: '确认',
|
||
success: res => {
|
||
|
||
if (res.confirm) {
|
||
uni.showLoading();
|
||
var param = {
|
||
id: info.id,
|
||
hotelId: that.inn.id
|
||
}
|
||
postHotelNewsDel(param).then((res1) => {
|
||
uni.hideLoading();
|
||
|
||
|
||
that.$dialog.toast({
|
||
mes: '删除成功!'
|
||
});
|
||
//删除成功刷新动态列表
|
||
that.page = 1;
|
||
that.loading = false;
|
||
that.loadend = false;
|
||
that.fetchInnInfoList();
|
||
|
||
// setTimeout(function() {
|
||
|
||
|
||
// }, 1000);
|
||
|
||
|
||
}).catch((err) => {
|
||
uni.hideLoading();
|
||
|
||
uni.showToast({
|
||
title: err.msg,
|
||
icon: "none",
|
||
duration: 1500
|
||
});
|
||
|
||
}).finally(() => {
|
||
|
||
});
|
||
}
|
||
|
||
},
|
||
fail: () => {
|
||
},
|
||
complete: () => {
|
||
}
|
||
});
|
||
},
|
||
fetchInnInfoList: function () {
|
||
let that = this;
|
||
if (that.loading) return; //阻止下次请求（false可以进行请求）；
|
||
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
|
||
that.loading = true;
|
||
let q = {
|
||
page: that.page,
|
||
limit: that.limit,
|
||
hotelId: that.id
|
||
};
|
||
getHotelNewsList(q).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');
|
||
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 () {
|
||
let that = this;
|
||
|
||
if (this.isMyInn) {
|
||
getHotelDetail(that.id).then((res) => {
|
||
that.inn = res.data;
|
||
that.isLike = res.data.zanVo !== null;
|
||
}).catch((err) => {
|
||
|
||
}).finally(() => {
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
} else {
|
||
getHomeHotelDetail(that.id).then((res) => {
|
||
that.inn = res.data;
|
||
that.isLike = res.data.zanVo !== null;
|
||
}).catch((err) => {
|
||
|
||
}).finally(() => {
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
}
|
||
},
|
||
initPoster() {
|
||
getPoster(this.id).then(({data}) => this.posterUrl = data);
|
||
},
|
||
showLocation: function () {
|
||
// if (this.inn.position != null && this.inn.position.length > 0) {
|
||
// var arr = this.inn.position.split(",");
|
||
// uni.openLocation({
|
||
// latitude: parseFloat(arr[1]),
|
||
// longitude: parseFloat(arr[0]),
|
||
// success: function () {
|
||
// console.log('success');
|
||
// }
|
||
// });
|
||
// } else {
|
||
// this.$dialog.error('暂无位置信息');
|
||
// }
|
||
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 0:
|
||
this.fetchInnDetail();
|
||
break;
|
||
case 1:
|
||
this.fetchInnInfoList();
|
||
break;
|
||
case 3:
|
||
this.goodsPage = 1;
|
||
this.goodsList = [];
|
||
this.fetchGoods();
|
||
break;
|
||
}
|
||
},
|
||
fetchGoods() {
|
||
goodsList({
|
||
id: this.inn.id,
|
||
page: this.goodsPage
|
||
}).then(({
|
||
data
|
||
}) => {
|
||
let len = data.records.length;
|
||
if (len > 0) {
|
||
for (let i = 0; i < len; i++) {
|
||
this.goodsList.push(data.records[i]);
|
||
}
|
||
}
|
||
}).catch(() => {
|
||
})
|
||
},
|
||
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('电话为空');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</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";
|
||
|
||
.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: 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 {
|
||
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;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
position: relative;
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
.innInfoWrap {
|
||
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 {
|
||
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;
|
||
}
|
||
|
||
.zanmost-tag {
|
||
padding: 2rpx 8rpx 2rpx 8rpx;
|
||
background: #FF2D69;
|
||
font-size: 10*2rpx;
|
||
color: #FFFFFF;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.latest-tag {
|
||
padding: 2rpx 8rpx 2rpx 8rpx;
|
||
background: #0DC5C5;
|
||
font-size: 10*2rpx;
|
||
color: #FFFFFF;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.location-tag {
|
||
padding: 2rpx 8rpx 2rpx 8rpx;
|
||
background: #FD685D;
|
||
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-intro-bold {
|
||
font-size: 28rpx;
|
||
color: #0DC5C5;
|
||
}
|
||
|
||
.inn-intro {
|
||
font-size: 22rpx;
|
||
color: #A6AAB3;
|
||
}
|
||
|
||
|
||
.map-wrap {
|
||
padding: 0 32rpx;
|
||
position: relative;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.address-block {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
left: 56rpx;
|
||
}
|
||
|
||
.address-text {
|
||
font-size: 24rpx;
|
||
color: #41454D;
|
||
}
|
||
|
||
.phone-block {
|
||
padding-left: 40rpx;
|
||
padding-right: 40rpx;
|
||
}
|
||
|
||
.map-block {
|
||
padding-left: 40rpx;
|
||
padding-right: 40rpx;
|
||
}
|
||
|
||
.vline {
|
||
width: 0px;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
height: 32rpx;
|
||
border: 1px solid #DADCE0;
|
||
}
|
||
|
||
.buttons-block {
|
||
|
||
background: #FFFFFF;
|
||
height: 80rpx;
|
||
box-shadow: 0px 6rpx 16rpx rgba(205, 214, 214, 0.6);
|
||
border-radius: 12rpx;
|
||
// width: 263*2rpx;
|
||
padding: 0 20rpx;
|
||
position: absolute;
|
||
margin: 0 auto;
|
||
bottom: -40rpx;
|
||
|
||
}
|
||
|
||
.btLine {
|
||
width: 100%;
|
||
height: 6rpx;
|
||
margin-top: 18rpx;
|
||
background: #0DC5C5;
|
||
}
|
||
|
||
.pics-box {
|
||
margin: 36rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
.pics-list {
|
||
position: relative;
|
||
margin: 36rpx 0;
|
||
background-color: #fff;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.pics-list .pics-item {
|
||
margin-left: 36rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.info-section {
|
||
padding: 36rpx;
|
||
}
|
||
|
||
.info-list {
|
||
width: 100%;
|
||
}
|
||
|
||
.separator-block {
|
||
padding: 10rpx;
|
||
margin: 0 20rpx;
|
||
}
|
||
|
||
.info-card {
|
||
width: 500rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 40rpx;
|
||
padding: 24rpx;
|
||
border-radius: 8rpx;
|
||
background: #EBECF0;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.info-title {
|
||
font-size: 24rpx;
|
||
color: #080F1A;
|
||
}
|
||
|
||
.time {
|
||
font-size: 22rpx;
|
||
color: #A6AAB3;
|
||
}
|
||
|
||
.month-day {
|
||
font-size: 28rpx;
|
||
color: #41454D;
|
||
}
|
||
|
||
.year {
|
||
font-size: 20rpx;
|
||
color: #DADCE0;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background: #080F1A;
|
||
border-radius: 50%;
|
||
opacity: 1;
|
||
|
||
}
|
||
|
||
.first-cell {
|
||
background: #0DC5C5;
|
||
}
|
||
|
||
.dash-line {
|
||
width: 0px;
|
||
border: 1px dashed #DADCE0;
|
||
opacity: 1;
|
||
margin-top: 10rpx;
|
||
margin-bottom: 0rpx;
|
||
}
|
||
|
||
.seeNum-txt {
|
||
font-size: 22rpx;
|
||
color: #080F1A;
|
||
}
|
||
|
||
.likeNum-txt {
|
||
font-size: 22rpx;
|
||
color: #080F1A;
|
||
}
|
||
|
||
.bottom-view {
|
||
height: 86rpx;
|
||
line-height: 86rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 2;
|
||
background: #FFFFFF;
|
||
bottom: 0;
|
||
}
|
||
|
||
.bottom-btn {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
background: #0DC5C5;
|
||
}
|
||
|
||
.bottom-placeholder {
|
||
height: 86rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.desc-box {
|
||
/deep/ .fixed {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
line-height: 44rpx;
|
||
color: #0DC5C5;
|
||
}
|
||
|
||
font-size: 22rpx;
|
||
line-height: 40rpx;
|
||
color: #A6AAB3;
|
||
}
|
||
</style>
|