You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
509 lines
11 KiB
509 lines
11 KiB
7 months ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="container">
|
||
|
|
<u-dropdown title-size="28" :class="['u-dropdown',istop?'u-dropdown-top':'']"
|
||
|
|
:style="{top:istop?(navHeight-2)+'px':0}">
|
||
|
|
<u-dropdown-item v-model="value1" :title="options1[value1].label" :options="options1"
|
||
|
|
@change="handleChange"></u-dropdown-item>
|
||
|
|
<u-dropdown-item v-model="value3" :title="options3[value3].label" :options="options3"
|
||
|
|
@change="handleChange"></u-dropdown-item>
|
||
|
|
</u-dropdown>
|
||
|
|
<view class="container_li">
|
||
|
|
<view class="card-menu" v-for="item in waresList" :key="item.uid" @click="msto(item.wxMiNiAppId,item.wxMiNiPath,item.uid)">
|
||
|
|
<view class="img-container">
|
||
|
|
<u-image width="686rpx" height="390rpx" border-radius="14rpx 14rpx 0 0"
|
||
|
|
:src="item.logo==''||item.logo==null?$getimg('noimg.png'):$geturl(item.logo)"></u-image>
|
||
|
|
<!-- <view class="img-tags" v-if="item.turnFast==1">30秒入住</view> -->
|
||
|
|
<view class="img-mask">
|
||
|
|
<image :src="$getimg('icon-juli.png')" mode="widthFix"></image>
|
||
|
|
<text>距{{ item.distance }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="text-container">
|
||
|
|
<view class="title-container">
|
||
|
|
<view class="content">
|
||
|
|
<text class="title">{{ item.name }}</text>
|
||
|
|
<view class="level" v-if="[1, 2, 3, 4, 5].includes(item.level)">{{ item.level }}星</view>
|
||
|
|
</view>
|
||
|
|
<!-- <u-icon @click.native.stop="clickOnCollection(item)" name="star-fill" size="35"
|
||
|
|
:color="item.isCollect ? '#FF540B' : '#e5e5e5'"></u-icon> -->
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<view class="gradePrice">
|
||
|
|
<view class="lbradd">{{item.address}}</view>
|
||
|
|
<!-- <view class="oldPrice" v-if="item.price!=0">￥{{ item.price}}</view> -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="label-container">
|
||
|
|
<!-- <tags-list :list="item.labels"></tags-list> -->
|
||
|
|
<view class="price-container" v-if="item.roomPrice!=0">
|
||
|
|
<!-- <text class="name">错峰价</text> -->
|
||
|
|
<text>
|
||
|
|
<text class="symbol">¥</text>
|
||
|
|
<text class="price">{{ item.roomPrice}}</text>
|
||
|
|
<text class="qi">起</text>
|
||
|
|
</text>
|
||
|
|
<text v-if="item.wxMiNiAppId!=''&& item.wxMiNiPath!=''" class="oldPrice" >立即预订</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<!-- <u-loadmore v-if="waresList.length > 0" :status="status" :load-text="loadText" /> -->
|
||
|
|
</view>
|
||
|
|
<u-toast ref="uToast" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import back from '@/components/html/back.vue';
|
||
|
|
var web = require('@/components/utils/request.js');
|
||
|
|
// import comfortPage from './components/comfort-page';
|
||
|
|
import tagsList from '@/components/tags-list';
|
||
|
|
import {
|
||
|
|
mapGetters
|
||
|
|
} from 'vuex'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
back,
|
||
|
|
tagsList,
|
||
|
|
// comfortPage
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
value1: 0,
|
||
|
|
value2: 0,
|
||
|
|
value3: 0,
|
||
|
|
|
||
|
|
options1: [{
|
||
|
|
label: '酒店类型',
|
||
|
|
value: 0,
|
||
|
|
type:2,
|
||
|
|
scapeType: ''
|
||
|
|
|
||
|
|
}, {
|
||
|
|
label: '星级酒店',
|
||
|
|
value: 1,
|
||
|
|
type:2,
|
||
|
|
scapeType: '星级酒店'
|
||
|
|
}, {
|
||
|
|
label: '精品酒店',
|
||
|
|
value: 2,
|
||
|
|
type:2,
|
||
|
|
scapeType: '精品酒店'
|
||
|
|
}, {
|
||
|
|
label: '经济连锁',
|
||
|
|
value: 3,
|
||
|
|
type:2,
|
||
|
|
scapeType: '经济连锁'
|
||
|
|
}, {
|
||
|
|
label: '特色民宿',
|
||
|
|
value: 4,
|
||
|
|
type:164,
|
||
|
|
scapeType: ''
|
||
|
|
}],
|
||
|
|
|
||
|
|
options3: [{
|
||
|
|
label: '智能排序',
|
||
|
|
value: 0
|
||
|
|
}, {
|
||
|
|
label: '等级优先',
|
||
|
|
value: 1
|
||
|
|
}, {
|
||
|
|
label: '低价优先',
|
||
|
|
value: 2
|
||
|
|
}, {
|
||
|
|
label: '高价优先',
|
||
|
|
value: 3
|
||
|
|
}, {
|
||
|
|
label: '距离优先',
|
||
|
|
value: 4
|
||
|
|
}],
|
||
|
|
params: {
|
||
|
|
pageNo: 1,
|
||
|
|
pageSize: 100,
|
||
|
|
// type: 1,
|
||
|
|
radius: 0,
|
||
|
|
ctgId:'',
|
||
|
|
// level: "0",
|
||
|
|
name: "",
|
||
|
|
scapeType: "",
|
||
|
|
orderBy: 0,
|
||
|
|
},
|
||
|
|
url: {
|
||
|
|
list: 'wareInfo/list4.jspx',
|
||
|
|
collection: 'front/jcCollect/wares_collect'
|
||
|
|
},
|
||
|
|
waresList: [],
|
||
|
|
listpages: 0,
|
||
|
|
status: 'loading',
|
||
|
|
loadText: {
|
||
|
|
// loadmore: '轻轻上拉加载更多数据~~',
|
||
|
|
loading: '努力加载中~~',
|
||
|
|
nomore: '已经到底了~~'
|
||
|
|
},
|
||
|
|
istop: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
this.getMore();
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapGetters(['navHeight'])
|
||
|
|
},
|
||
|
|
onPageScroll(e) {
|
||
|
|
if (e.scrollTop > 40) {
|
||
|
|
this.istop = true;
|
||
|
|
} else {
|
||
|
|
this.istop = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
msto(wxMiNiAppId, wxMiNiPath, uid) {
|
||
|
|
if (wxMiNiAppId && wxMiNiPath) {
|
||
|
|
if (wxMiNiAppId == 99999999) {
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: '因景区仅提供网页预订,预约地址已复制到剪贴板,请在浏览器中粘贴打开',
|
||
|
|
showCancel: false,
|
||
|
|
cancelText: '',
|
||
|
|
confirmText: '确定',
|
||
|
|
success: res => {
|
||
|
|
if (res.confirm) {
|
||
|
|
uni.setClipboardData({
|
||
|
|
data: link, //要被复制的内容
|
||
|
|
success: (e) => { //复制成功的回调函数
|
||
|
|
console.log(e)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.toOther(wxMiNiAppId, wxMiNiPath)
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
console.log(2)
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `../pages/jqDet?uid=${uid}`
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
toOther(wxMiNiAppId, wxMiNiPath) {
|
||
|
|
uni.navigateToMiniProgram({
|
||
|
|
appId: wxMiNiAppId,
|
||
|
|
path: wxMiNiPath,
|
||
|
|
envVersion: 'release',
|
||
|
|
extraData: {},
|
||
|
|
success(res) {
|
||
|
|
console.log("chenggong");
|
||
|
|
},
|
||
|
|
fail(e) {
|
||
|
|
console.log(e);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getList() {
|
||
|
|
for (var i = 0; i < this.options1.length; i++) {
|
||
|
|
if (this.value1 == this.options1[i].value) {
|
||
|
|
this.params.ctgId = this.options1[i].type
|
||
|
|
this.params.scapeType = this.options1[i].scapeType
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// for (var i = 0; i < this.options2.length; i++) {
|
||
|
|
// if (this.value2 == this.options2[i].value) {
|
||
|
|
// this.params.scapeType = this.options2[i].type
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
this.params.orderBy = this.value3;
|
||
|
|
|
||
|
|
this.params.sort = this.value1;
|
||
|
|
web.httpPost(this, this.url.list, this.params, res => {
|
||
|
|
let waresList = res.data.results;
|
||
|
|
let pages = res.data.results.length;
|
||
|
|
this.listpages = pages;
|
||
|
|
if (this.params.pageNo == 1) {
|
||
|
|
this.waresList = waresList;
|
||
|
|
} else {
|
||
|
|
this.waresList = this.waresList.concat(waresList);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// getMore() {
|
||
|
|
// if (this.params.pageNo >= this.listpages) {
|
||
|
|
// this.status = 'nomore'
|
||
|
|
|
||
|
|
// } else if (this.params.pageNo < this.listpages) {
|
||
|
|
// this.params.pageNo = ++this.params.pageNo;
|
||
|
|
// this.getList();
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
handleChange(e) {
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
// goDetail(item) {
|
||
|
|
// uni.navigateTo({
|
||
|
|
// url: `../other/hotel-detail/hotel-detail?id=${item.uid}`
|
||
|
|
// });
|
||
|
|
// },
|
||
|
|
getListImg(imgs) {
|
||
|
|
if (!imgs) return this.$getImg('ouhai_xcx/home/map.png');
|
||
|
|
return imgs.split(',')[0];
|
||
|
|
},
|
||
|
|
// clickOnCollection(item) {
|
||
|
|
// httpPost(this, this.url.collection, {
|
||
|
|
// id: item.id
|
||
|
|
// }, res => {
|
||
|
|
// this.$refs.uToast.show({
|
||
|
|
// title: item.isCollect ? '取消收藏' : '已收藏',
|
||
|
|
// type: 'success',
|
||
|
|
// icon: 'checkmark-circle'
|
||
|
|
// });
|
||
|
|
// item.isCollect = !item.isCollect;
|
||
|
|
// item.collectNum = item.isCollect ? item.collectNum + 1 : item.collectNum - 1;
|
||
|
|
// });
|
||
|
|
// },
|
||
|
|
// cilckMap() {
|
||
|
|
// uni.navigateTo({
|
||
|
|
// url: '../map?id=2'
|
||
|
|
// })
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@import "uview-ui/index.scss";
|
||
|
|
.u-dropdown-top {
|
||
|
|
position: fixed;
|
||
|
|
background: #fff;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: space-between;
|
||
|
|
width: 750rpx;
|
||
|
|
top: 120rpx;
|
||
|
|
z-index: 9;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
// padding: 30rpx;
|
||
|
|
background: #ffffff;
|
||
|
|
}
|
||
|
|
.container_li{
|
||
|
|
padding: 30rpx;
|
||
|
|
// background: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-menu {
|
||
|
|
width: 690rpx;
|
||
|
|
// height: 610rpx;
|
||
|
|
background: #ffffff;
|
||
|
|
border: 1rpx solid #dddddd;
|
||
|
|
border-radius: 14px;
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
|
||
|
|
.img-container {
|
||
|
|
position: relative;
|
||
|
|
font-family: Microsoft YaHei;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #ffffff;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 390rpx;
|
||
|
|
border-radius: 14px 14px 0px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img-tags {
|
||
|
|
position: absolute;
|
||
|
|
top: 20rpx;
|
||
|
|
right: 20rpx;
|
||
|
|
min-width: 180rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
background: #fd4818;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 48rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img-mask {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 2rpx;
|
||
|
|
left: 0;
|
||
|
|
width: 332rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding-left: 25rpx;
|
||
|
|
background: linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
|
||
|
|
font-size: 26rpx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 30rpx;
|
||
|
|
height: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
text {
|
||
|
|
margin-left: 9rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 30rpx;
|
||
|
|
|
||
|
|
.gradePrice {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 24rpx;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
.lbradd{
|
||
|
|
font-size: 24upx;
|
||
|
|
color: #666666;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
&::before{
|
||
|
|
content: '';
|
||
|
|
display: inline-block;
|
||
|
|
width: 18upx;
|
||
|
|
height: 22upx;
|
||
|
|
background: url('https://cs.tour-ma.com/r/cms/www/m/changshu/ra-liebiao-icon-dizhi.png') no-repeat;
|
||
|
|
background-size: 100%;
|
||
|
|
margin-right: 12upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.review,
|
||
|
|
.collection {
|
||
|
|
color: #666666;
|
||
|
|
|
||
|
|
text {
|
||
|
|
font-size: 25rpx;
|
||
|
|
font-family: DIN;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333333;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.divider {
|
||
|
|
width: 3rpx;
|
||
|
|
height: 17rpx;
|
||
|
|
background: #cccccc;
|
||
|
|
margin-left: 15rpx;
|
||
|
|
margin-right: 13rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.price {
|
||
|
|
text-decoration: line-through;
|
||
|
|
color: #979797;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.label-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
}
|
||
|
|
.price-container {
|
||
|
|
line-height: 50rpx;
|
||
|
|
margin-top: 5rpx;
|
||
|
|
color: #ff540b;
|
||
|
|
font-size: 24rpx;
|
||
|
|
|
||
|
|
.symbol {
|
||
|
|
margin-right: 5rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price {
|
||
|
|
font-size: 42rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.qi {
|
||
|
|
color: #666666;
|
||
|
|
font-size: 20rpx;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-name {
|
||
|
|
color: #66666670;
|
||
|
|
font-size: 22rpx;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
.oldPrice {
|
||
|
|
// margin-left: 9rpx;
|
||
|
|
// margin-left: 54%;
|
||
|
|
border-color: #ffffff00;
|
||
|
|
padding: 1rpx 12rpx;
|
||
|
|
background: #fbe0d4;
|
||
|
|
position: absolute;
|
||
|
|
right: 60rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-container {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 54rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
font-size: 48rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
margin-left: 17rpx;
|
||
|
|
margin-right: 18rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.level {
|
||
|
|
width: 60rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
text-align: center;
|
||
|
|
background: #fff1eb;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
font-family: DIN;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #ff540b;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
color: #2a2a2a;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|