389 lines
14 KiB
Vue
389 lines
14 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="maintopBox">
|
||
<view class="mainTopRight" @click="handleChangeSortType">
|
||
<view class="distanceText">{{ sortType === 1 ? '按距离' : '按票价' }}</view>
|
||
<!-- <view class="distanceText">按距离</view> -->
|
||
<image class="distanceIcon" src="https://eshangtech.com/caiyunyiImg/sortIcon.png" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mainBottom">
|
||
<scroll-view scroll-y="true" class="scrollView" @scrolltolower="handleScrollBottom">
|
||
<view class="nearbyScenicItem" v-for="(item, index) in dataList" :key="index"
|
||
@click="handleGoNavigation(item)">
|
||
<view class="nearByBottomLeftBox">
|
||
<image class="nearbyImg"
|
||
:src="item.ImageList && item.ImageList.length > 0 ? item.ImageList[0].ImageUrl : '/static/images/home/defaultIcon.png'" />
|
||
</view>
|
||
<view class="nearByBottomRightBox">
|
||
<view class="scenicName">{{ item.SCENICAREA_NAME }}</view>
|
||
<view class="scenicContent">
|
||
<view class="scenicType" v-if="item.SCENICAREA_TYPE && SCENICAREAOBJ">
|
||
{{ SCENICAREAOBJ[item.SCENICAREA_TYPE] }}</view>
|
||
<view class="scenicRateBox">
|
||
<view class="scenicRate">
|
||
<uni-rate :size="12" :value="item.SCENICAREA_SCORE" :touchable="false"
|
||
active-color="#FF8E00" color="#D8D8DA" />
|
||
</view>
|
||
<view class="scenicRateText">{{ item.SCENICAREA_SCORE || "-" }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="scenicBottom">
|
||
<view class="scenicLeft">
|
||
<image class="scenicIcon" src="/static/images/home/servicePosition.svg" />
|
||
<view class="scenicLabel">距离{{ item.ScenicDistance || '-' }}km</view>
|
||
</view>
|
||
<view class="scenicRight" v-if="item.TICKET_PRICE > 0">
|
||
<view class="scenicRightLabel">门票</view>
|
||
<view class="scenicUnit">¥</view>
|
||
<view class="scenicPrice">{{ item.TICKET_PRICE || "0" }}</view>
|
||
<view class="scenicUnit">起</view>
|
||
</view>
|
||
<view class="scenicRight" v-else>
|
||
<view class="scenicPrice" style="font-size: 24rpx;">免费</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
sortType: 1,// 1:按距离，2:按票价 1：倒叙 2:正序
|
||
dataList: [],// 表单数据
|
||
seat: {},
|
||
SCENICAREAOBJ: {},// 服务区类型的枚举
|
||
pageIndex: 1,
|
||
isOver: false,
|
||
}
|
||
},
|
||
async onLoad() {
|
||
let seatInfo = uni.getStorageSync("seatInfo");
|
||
if (seatInfo) {
|
||
this.seat = JSON.parse(seatInfo);
|
||
}
|
||
|
||
await this.handleGetData();
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
}),
|
||
},
|
||
methods: {
|
||
async handleGetData(sort) {
|
||
let SCENICAREA = uni.getStorageSync("SCENICAREAOBJ");
|
||
let SCENICAREAOBJ = {}
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
})
|
||
|
||
if (SCENICAREAOBJ) {
|
||
SCENICAREAOBJ = SCENICAREA
|
||
} else {
|
||
const field = await this.$api.$get("/EShangApiMain/FrameWork/GetFieldEnumTree", { FieldExplainField: 'SCENICAREA_TYPE' })
|
||
let fieldList = this.$utils.wrapTreeNode(field.Result_Data.List)
|
||
if (fieldList && fieldList.length > 0) {
|
||
fieldList.forEach((item) => {
|
||
SCENICAREAOBJ[item.value] = item.label
|
||
})
|
||
}
|
||
uni.setStorageSync("SCENICAREAOBJ", SCENICAREAOBJ);
|
||
}
|
||
|
||
this.SCENICAREAOBJ = SCENICAREAOBJ
|
||
|
||
console.log('this.sortType', this.sortType);
|
||
console.log('sortsortsort', sort);
|
||
|
||
|
||
let req = {
|
||
ProvinceCode: this.user.PROVINCE_CODE,
|
||
latitude: this.seat.latitude || "",
|
||
longitude: this.seat.longitude || "",
|
||
// SortStr: this.sortType === 1 ? 'ScenicDistance desc' : 'TICKET_PRICE desc',
|
||
// ServerpartID: this.serviceDetail.SERVERPART_ID || "",
|
||
type: 'encryption',
|
||
PageIndex: this.pageIndex,
|
||
PageSize: 20,
|
||
SortStr: `${this.sortType === 1 ? '' : 'TICKET_PRICE desc'}`
|
||
}
|
||
console.log('reqreqreqreq', req);
|
||
|
||
const data = await this.$api.$zzyLocalPost(
|
||
"/WisdomServerpart/GetScenicAreaListByLocation",
|
||
req
|
||
);
|
||
uni.hideLoading()
|
||
console.log('景区数据 ', data.Result_Data.List);
|
||
let list = data.Result_Data.List
|
||
let res = []
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
if (item.SCENICAREA_STATE === 1000) {
|
||
res.push(item)
|
||
}
|
||
})
|
||
if (list.length < 20) {
|
||
this.isOver = true
|
||
}
|
||
} else {
|
||
this.isOver = true
|
||
}
|
||
|
||
if (sort) {
|
||
this.dataList = []
|
||
this.dataList = list
|
||
} else {
|
||
this.dataList = this.dataList.concat(list)
|
||
}
|
||
},
|
||
handleChangeSortType() {
|
||
// 这里可以添加排序逻辑
|
||
if (this.sortType === 1) {
|
||
this.sortType = 2;
|
||
} else if (this.sortType === 2) {
|
||
this.sortType = 1;
|
||
}
|
||
this.isOver = false
|
||
this.pageIndex = 1
|
||
// this.dataList = []
|
||
this.handleGetData(true)
|
||
},
|
||
// 滑动到底部
|
||
handleScrollBottom() {
|
||
if (this.isOver) {
|
||
return
|
||
}
|
||
console.log('滑动到底部滑动到底部滑动到底部');
|
||
|
||
this.pageIndex = this.pageIndex + 1
|
||
this.handleGetData()
|
||
},
|
||
// 跳转导航
|
||
handleGoNavigation(obj) {
|
||
uni.navigateTo({ url: `/pages/scenicList/scenicDetail?id=${obj.SCENICAREA_ID}&ScenicDistance=${obj.ScenicDistance}` });
|
||
|
||
|
||
// uni.openLocation({
|
||
// latitude: obj.SCENICAREA_Y,
|
||
// longitude: obj.SCENICAREA_X,
|
||
// scale: 16, // 缩放比例
|
||
// name: obj.SCENICAREA_NAME,
|
||
// success(data) {
|
||
|
||
// },
|
||
// fail(err) {
|
||
|
||
// },
|
||
// });
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: #F5F5F5;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 30rpx;
|
||
|
||
.maintopBox {
|
||
width: 100%;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.mainTopRight {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.distanceText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.distanceIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mainBottom {
|
||
width: 100%;
|
||
height: calc(100% - 40rpx - 20rpx);
|
||
margin-top: 20rpx;
|
||
|
||
.scrollView {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.nearbyScenicItem {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
border-radius: 9rpx;
|
||
padding: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.nearByBottomLeftBox {
|
||
width: 136rpx;
|
||
height: 136rpx;
|
||
box-sizing: border-box;
|
||
padding: 4rpx 0;
|
||
margin-right: 40rpx;
|
||
|
||
.nearbyImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.nearByBottomRightBox {
|
||
width: calc(100% - 176rpx);
|
||
|
||
.scenicName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #222222;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
width: 100%;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.scenicContent {
|
||
width: 100%;
|
||
margin-top: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.scenicType {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #3D7FFF;
|
||
line-height: 32rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
padding: 4rpx 16rpx;
|
||
background: rgba(61, 127, 255, 0.1);
|
||
border-radius: 6rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.scenicRateBox {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.scenicRate {}
|
||
|
||
.scenicRateText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.scenicBottom {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
|
||
.scenicLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.scenicIcon {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.scenicLabel {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.scenicRight {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
.scenicRightLabel {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.scenicUnit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #F13216;
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.scenicPrice {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #F13216;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.scrollView ::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
</style> |