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.
522 lines
11 KiB
522 lines
11 KiB
<template>
|
|
<view>
|
|
<view class="list_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="value2" :title="options2[value2].label" :options="options2"
|
|
@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="card-menu" v-for="(item, index) in waresList" :key="item.uid"
|
|
:style="{ borderTop: index == 0 ? '1rpx solid #eeeeee' : '' }">
|
|
<view class="img-container">
|
|
<u-image width="200rpx" height="200rpx" border-radius="10rpx"
|
|
:src="item.logo==''?$getimg('noimg.png'):$geturl(item.logo)"></u-image>
|
|
<view class="img-mask">
|
|
<image :src="$getimg('icon-juli.png')" mode="widthFix"></image>
|
|
<text>{{ item.distance }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="detail-container" @click="msto(item.wxMiNiAppId,item.wxMiNiPath,item.uid)">
|
|
<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 }}A</view>
|
|
<!-- <view class="for20Seconds" v-if="item.price!=0">20秒入园</view> -->
|
|
</view>
|
|
<!-- 收藏 -->
|
|
<!-- <u-icon @click.native.stop="clickOnCollection(item)" style="margin-right: 6rpx;"
|
|
name="star-fill" size="35" :color="item.isCollect ? '#FF540B' : '#e5e5e5'"></u-icon> -->
|
|
</view>
|
|
<view class="info-container">
|
|
<view class="info">
|
|
<view class="gradePrice">
|
|
<view class="lbradd">{{item.address}}</view>
|
|
</view>
|
|
<tags-list :list="item.scapeType"></tags-list>
|
|
<view class="price-container">
|
|
<!-- <text class="name">错峰价</text> -->
|
|
<text class="price-name" v-if="item.ticketPrice==0&&item.price==0">暂无价格</text>
|
|
<text v-if="item.ticketPrice!=0">
|
|
<text class="symbol">¥</text>
|
|
<text class="price">{{item.ticketPrice}}</text>
|
|
<!-- <text>0</text> -->
|
|
<text class="qi">起</text>
|
|
</text>
|
|
<!-- <text v-if="item.price!=0" class="oldPrice">￥{{item.price}}</text> -->
|
|
<text v-if="item.wxMiNiAppId!=''&& item.wxMiNiPath!=''" class="oldPrice" >立即预订</text>
|
|
</view>
|
|
</view>
|
|
<comfort-page :value="item.comfortPer" :name="item.comfort"></comfort-page>
|
|
</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:-1
|
|
|
|
}, {
|
|
label: '5A级',
|
|
value: 1,
|
|
type:5
|
|
}, {
|
|
label: '4A级',
|
|
value: 2,
|
|
type:4
|
|
}, {
|
|
label: '3A级',
|
|
value: 3,
|
|
type:3
|
|
},
|
|
// {
|
|
// label: '2A级',
|
|
// value: 4,
|
|
// type:2
|
|
// },
|
|
{
|
|
label: '未评级',
|
|
value: 4,
|
|
type:0
|
|
}],
|
|
options2: [{
|
|
label: '景区类型',
|
|
value: 0,
|
|
type: ''
|
|
}, {
|
|
label: '景区景点',
|
|
value: 1,
|
|
type: '景区景点'
|
|
}, {
|
|
label: '红色旅游',
|
|
value: 2,
|
|
type: '红色旅游'
|
|
} , {
|
|
label: '乡村旅游',
|
|
value: 3,
|
|
type: '乡村旅游'
|
|
}
|
|
// {
|
|
// label: '城市观光',
|
|
// value: 4,
|
|
// type: '城市观光'
|
|
// },
|
|
],
|
|
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: 1,
|
|
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() {
|
|
|
|
// this.params.level = this.value1;
|
|
for (var i = 0; i < this.options1.length; i++) {
|
|
if (this.value1 == this.options1[i].value) {
|
|
this.params.level = this.options1[i].type
|
|
}
|
|
}
|
|
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;
|
|
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;
|
|
console.log(1)
|
|
} else {
|
|
this.waresList = this.waresList.concat(waresList);
|
|
console.log(2)
|
|
}
|
|
|
|
|
|
});
|
|
},
|
|
// getMore() {
|
|
// if (this.params.pageNo >= this.listpages) return (this.status = 'nomore');
|
|
// this.status = 'loading';
|
|
// this.params.pageNo = ++this.params.pageNo;
|
|
// if (this.params.pageNo >= this.listpages) this.status = 'nomore';
|
|
// else this.status = 'loading';
|
|
// this.getList();
|
|
|
|
// },
|
|
handleChange(e) {
|
|
this.getList();
|
|
},
|
|
|
|
}
|
|
};
|
|
</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;
|
|
}
|
|
|
|
.list_container {
|
|
background: #F3F8F9;
|
|
|
|
.card-menu {
|
|
// width: 750rpx;
|
|
height: 250rpx;
|
|
background: #ffffff;
|
|
padding: 25rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
|
|
.img-container {
|
|
position: relative;
|
|
color: #ffffff;
|
|
font-weight: 400;
|
|
font-family: Microsoft YaHei;
|
|
|
|
image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.img-mask {
|
|
position: absolute;
|
|
width: 180rpx;
|
|
height: 50rpx;
|
|
border-radius: 0rpx 0rpx 10rpx 10rpx;
|
|
bottom: 0rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 20rpx;
|
|
background: linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
|
|
font-size: 24rpx;
|
|
|
|
image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
text {
|
|
margin-left: 9rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail-container {
|
|
margin-left: 15rpx;
|
|
width: calc(100% - 220rpx);
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.for20Seconds {
|
|
background: #fff5f5;
|
|
border: 1rpx solid #ff948e;
|
|
border-radius: 4rpx;
|
|
font-size: 20rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #ff0c00;
|
|
text-align: center;
|
|
margin-left: 10rpx;
|
|
padding: 2rpx 9rpx 2rpx 10rpx;
|
|
}
|
|
|
|
.info-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 15rpx;
|
|
|
|
.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
|
|
.gradePrice {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tags-container {
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.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: 30rpx;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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>
|
|
|