changshu_other/other/scenic.vue

<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>