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

Style(店铺):界面调整

Browse Source
This commit is contained in:
lifizer
2024-03-21 14:38:30 +08:00
parent c10a120fa8
commit 0febe3a5a4
4 changed files with 341 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pagesInn/inn/innHome.vue
+136 -199
View File
@@ -263,9 +263,9 @@
class="more-wrapper"
>
<view
v-show="item.isTop === 0"
v-if="item.isTop === 0"
class="more-item"
@click="setTopInfoHandle(item, index)"
@click="setTopInfoHandle(item, 1)"
>
<image
:src="webUrl + '/page/hotel/settop.png'"
@@ -273,6 +273,17 @@
/>
置顶动态
</view>
<view
v-else
class="more-item"
@click="setTopInfoHandle(item, 0)"
>
<image
:src="webUrl + '/page/hotel/delete.png'"
class="more-icon"
/>
取消置顶
</view>
<view class="more-item" @click="deleteInnInfo(item, index)">
<image
:src="webUrl + '/page/hotel/delete.png'"
@@ -376,12 +387,12 @@ import {
getHotelGoodList,
postHotelNewsDel,
setTopHotelNew
} from "@/api/inn.js";
import {formatDateTime} from "@/utils";
import {getUrlParam} from "@/utils/common.js";
} 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 cookie from "@/utils/store/cookie"
import {addStore, removeStore} from "@/api/favorite"
import GooSkeleton from '@/components/GooSkeleton/index.vue'
export default {
@@ -393,12 +404,8 @@ export default {
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: [],
@@ -411,9 +418,8 @@ export default {
},
isMyInn: false, //是否是自己的客栈
goodsList: [],
goodsPage: 1,
showShare: false,
posterUrl: "", // 分享海报
posterUrl: '', // 分享海报
id: null,
partnerId: null,
isLike: false, //点赞
@@ -431,54 +437,47 @@ export default {
]
}
},
//必须在页面加 onPageScroll(e){} ，才能滑动显示背景
// 必须在页面加 onPageScroll(e){} ，才能滑动显示背景
onPageScroll(e) {
this.scrollData = e;
},
onShow: function () {
this.page = 1;
this.loading = false;
this.loadend = false;
this.scrollData = e
},
onLoad: function (options) {
if (options.id) {
this.id = options.id || null;
this.partnerId = options.partnerId || null;
this.id = options.id || null
this.partnerId = options.partnerId || null
} else {
let obj = uni.getEnterOptionsSync();
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;
const 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);
if (this.partnerId) cookie.set('spread', this.partnerId)
this.fetchInnDetail()
this.fetchInnInfoList()
this.initPoster()
this.isMyInn = (this.$yroute.query.isMyInn != null ? true : false)
uni.getSystemInfo({
success: (e) => {
//两列商品宽度
that.picColumnWidth = (e.screenWidth - uni.upx2px(92)) / 2 + 'px';
// 两列商品宽度
this.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();
onShow() {
if (!this.isLoad) {
return
}
if (this.inn.hasProduct <= 0) {
this.fetchGoods()
}
this.fetchInnInfoList()
this.fetchInnDetail()
},
methods: {
changeShare() {
this.showShare = !this.showShare;
this.showShare = !this.showShare
},
goGoodsConByID(item) {
this.$yrouter.push({
@@ -486,22 +485,21 @@ export default {
query: {
id: item.id
}
});
})
},
saveImg() {
let that = this;
const _this = this
uni.getSetting({
success: getRes => {
if (getRes.authSetting["scope.writePhotosAlbum"]) {
that.downloadImage();
_this.downloadImage()
} else {
uni.authorize({
scope: "scope.writePhotosAlbum",
success: () => {
that.downloadImage();
_this.downloadImage()
},
fail: () => {
console.log("authorize fail")
uni.openSetting({
success: openRes => {
console.log(typeof openRes, openRes)
@@ -523,20 +521,20 @@ export default {
})
},
downloadImage() {
let that = this;
const randomID = () => Math.random().toString(36).substring(2);
const _this = this
const randomID = () => Math.random().toString(36).substring(2)
uni.downloadFile({
url: this.posterUrl, //网络图片的地址
filePath: wx.env.USER_DATA_PATH + "/share_" + randomID() + ".png", //指定的本地文件路径
url: this.posterUrl, // 网络图片的地址
filePath: wx.env.USER_DATA_PATH + "/share_" + randomID() + ".png", // 指定的本地文件路径
success: downRes => {
uni.saveImageToPhotosAlbum({
filePath: downRes.filePath, //临时文件地址
filePath: downRes.filePath, // 临时文件地址
success: function () {
uni.showToast({
title: "保存成功",
icon: "success",
success() {
that.showShare = false;
_this.showShare = false
}
})
},
@@ -556,147 +554,122 @@ export default {
}
})
},
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();
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);
this.$yrouter.push('/pagesInn/inn/innInfoDetail?id=' + info.id)
},
publishBtnClick: function () {
this.$yrouter.push('/pagesInn/inn/innInfoPublish?hotelId=' + this.inn.id);
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');
uni.setStorageSync('MY_HOTEL_INFO', JSON.stringify(this.inn))
this.$yrouter.push("/pagesInn/inn/innProfileEdit?id=" + this.inn.id)
},
//删除客栈动态
// 删除客栈动态
deleteInnInfo: function (info, index) {
let that = this;
that.toggleMoreHandle(index)
const _this = this
_this.toggleMoreHandle(index)
uni.showModal({
title: '确认删除此动态?',
content: '',
title: '提示',
content: '确认删除此动态?',
showCancel: true,
cancelText: '取消',
confirmText: '确认',
success: res => {
if (res.confirm) {
uni.showLoading();
uni.showLoading()
postHotelNewsDel({
id: info.id,
hotelId: that.inn.id
hotelId: _this.inn.id
}).then((res1) => {
uni.hideLoading();
that.$dialog.toast({
uni.hideLoading()
_this.$dialog.toast({
mes: '删除成功!'
});
})
// 删除成功刷新动态列表
that.page = 1;
that.loading = false;
that.loadend = false;
that.fetchInnInfoList();
_this.fetchInnInfoList()
}).catch((err) => {
uni.hideLoading();
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 '';
const _this = this
if (_this.loading) {
return
}
_this.loading = true
_this.infoArray = []
getHotelNewsList({
page: 1,
limit: 9999,
hotelId: _this.id
}).then(res => {
_this.loading = false
_this.infoArray.push.apply(_this.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
}))
}).finally(() => {
_this.loading = false
uni.stopPullDownRefresh()
})
},
fetchInnDetail: function () {
const that = this
const _this = this
let reqFn = null
if (that.isMyInn) {
if (_this.isMyInn) {
reqFn = getHotelDetail
} else {
reqFn = getHomeHotelDetail
}
reqFn(that.id).then((res) => {
reqFn(_this.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
_this.isLoad = true
_this.inn = data
_this.isLike = data.zanVo !== null
_this.isFavorite = data.hasFavorite
_this.favoriteCount = data.favoriteCount
_this.inn.latitude = _this.inn.latitude ? parseFloat(_this.inn.latitude) : 24.993587
_this.inn.longitude = _this.inn.longitude ? parseFloat(_this.inn.longitude) : 102.779656
// 该店铺无商品则不显示“精选商品”
if (data.hasProduct <= 0) {
that.activeIndex = 1
that.tabList[0].isShow = false
_this.activeIndex = 1
_this.tabList[0].isShow = false
} else {
that.fetchGoods()
_this.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'
_this.videoStyle.width = screenWidth + 'px'
_this.videoStyle.height = screenWidth * 500 / 750 + 'px'
}
})
// 视频宽高自适应
@@ -728,23 +701,21 @@ export default {
*/
}
}
}).catch((err) => {
}).finally(() => {
uni.stopPullDownRefresh();
});
uni.stopPullDownRefresh()
})
},
initPoster() {
getPoster(this.id).then(({data}) => this.posterUrl = data);
getPoster(this.id).then(({data}) => this.posterUrl = data)
},
showLocation: function () {
if (!this.inn.latitude || !this.inn.longitude) {
this.$dialog.error('暂无位置信息');
this.$dialog.error('暂无位置信息')
} else {
uni.openLocation({
latitude: this.inn.latitude,
longitude: this.inn.longitude
});
})
}
},
showPic: function (index) {
@@ -754,28 +725,25 @@ export default {
})
},
changeTab: function (index) {
this.activeIndex = index;
this.page = 1;
this.loading = false;
this.loadend = false;
//刷新数据
this.activeIndex = index
this.loading = false
// 刷新数据
switch (this.activeIndex) {
case 1:
this.fetchInnInfoList();
break;
this.fetchInnInfoList()
break
case 0:
this.goodsPage = 1;
this.goodsList = [];
this.fetchGoods();
break;
this.goodsList = []
this.fetchGoods()
break
default:
break;
break
}
},
fetchGoods() {
getHotelGoodList({
id: this.inn.id,
page: this.goodsPage,
page: 1,
limit: 12
}).then(res => {
const { success, data } = res
@@ -802,9 +770,9 @@ export default {
fail: (res) => {
console.log('调用失败!')
}
});
})
} else {
this.$dialog.error('电话为空');
this.$dialog.error('电话为空')
}
},
async doneFavorite() {
@@ -827,14 +795,14 @@ export default {
},
viewAllGoodHandle() {
uni.navigateTo({
url: '/pagesInn/inn/innGoodList?id=' + this.inn.id,
url: '/pagesInn/inn/innGoodList?id=' + this.inn.id
})
},
setTopInfoHandle(item) {
setTopInfoHandle(item, isTop) {
uni.showLoading()
setTopHotelNew({
id: item.id,
isTop: 1
isTop
}).then(res => {
const { success } = res
if (success) {
@@ -851,37 +819,6 @@ export default {
}
</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 {
@@ -1333,6 +1270,9 @@ export default {
border-radius: 12rpx;
background-color: #fff;
box-shadow: 0px 1px 6px rgba(0,0,0,0.16);
.more-item + .more-item {
border-top: 1px solid #d5d5d5;
}
.more-item {
display: flex;
align-items: center;
@@ -1340,9 +1280,6 @@ export default {
height: 70rpx;
font-size: 14px;
color: #333;
&:first-child {
border-bottom: 1px solid #d5d5d5;
}
.more-icon {
width: 36rpx;
height: 36rpx;