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.
 
 
 
 

376 lines
19 KiB

<template>
<view class="content">
<view class="gxjtop">
<image :src="getUrl(datastypeimg)" class="gxjtopimg" mode="widthFix"></image>
</view>
<view class="gxjcenter">
<!-- <image :src="getImg('ra-xcx-xc-title-deco.png')" class="xctitleimg" mode=""></image> -->
<view class="xctop">
<view class="xctitle">{{defaultValue}}</view>
<view class="xcdzckAll">
<!-- <view class="xcdzcklist">
<image :src="getImg('ra-xcx-xc-title-dianzan.png')" class="xcdzcklistimg" mode=""></image>
<view class="xcdzcklistname">{{giveLike}}人赞</view>
</view> -->
<view class="xcdzcklist">
<image :src="getImg('ra-xcx-xc-title-liulan.png')" class="xcdzcklistimg" mode=""></image>
<view class="xcdzcklistname">{{browse}}人已浏览</view>
</view>
</view>
</view>
<view class="xcdzms" v-if="feature == ''||feature == null||feature == undefined">
登高、漫步、骑行,这个秋日假期给疲惫的身心来一次洗礼,感受山水带来的那份怡然自得吧!
</view>
<view class="xcdzms" v-if="feature != ''&&feature != null&&feature != undefined">
{{feature}}
</view>
<view class="xllistAll">
<view class="xllist" v-for="(el,ind) in datas" :key="ind">
<view class="xllistts">
<view class="xllisttsleft">D{{el.days}}</view>
<view class="xllisttsright">出发啦~</view>
</view>
<view v-for="(el1,ind1) in el.data.scenic" :key="ind1" v-if="el.data.scenic.length > 0">
<view class="xllistbt">
<view class="xllistbtleft"><view class="xllistbtleft1"></view></view>
<view class="xllistbtright" v-if="ind1==0">虞山<text class="xllistbtrighttext">></text>{{el1.name}}</view>
<view class="xllistbtright" v-if="ind1!=0 && ind1<el.data.scenic.length">{{el.data.scenic[ind1 - 1].name}}<text class="xllistbtrighttext">距离</text>{{el.data.scenic[ind1].name}}<text class="jlstyle">{{el.data.scenic[ind1].distanceToPreviousScenic}}</text></view>
</view>
<view class="xllistdw" @click="nato('/pagesys/list/jqDet?uid='+el1.id)">
<image :src="getImg('ra-xcx-xc-list-icon-jingdian.png')" class="xllistdwleft" mode=""></image>
<view class="xllistdwright">
<image :src="el1.img?getUrl(el1.img):$getimg('noimg.png')" class="xllistsjimg" mode=""></image>
<view class="xllistsjall">
<view class="xllistsjname">{{el1.name}}</view>
<view class="xllistsjjy" v-if="el1.consume">人均预算{{el1.consume}}元</view>
<view class="xllistsjjy" v-if="el1.address">地址:{{el1.address}}</view>
</view>
</view>
</view>
</view>
<view class="xllistdw" v-if="el.data.food.length > 0">
<image :src="getImg('ra-xcx-xc-list-icon-canyin.png')" class="xllistdwleft" mode=""></image>
<view class="xllistoverflow canyinlist">
<view class="xllistdwright active" v-for="(el1,ind1) in el.data.food" :key="ind1" @click="nato('/pagesys/list/jqDet?uid='+el1.id)">
<image :src="el1.img?getUrl(el1.img):$getimg('noimg.png')" class="xllistsjimg" mode=""></image>
<view class="xllistsjall active">
<view class="xllistsjname">{{el1.name}}</view>
<view class="xllistsjjy">地址:{{el1.address}}</view>
</view>
</view>
</view>
</view>
<view class="xllistdw" v-if="el.data.stay.length > 0">
<image :src="getImg('ra-xcx-xc-list-icon-zhusu.png')" class="xllistdwleft" mode=""></image>
<view class="xllistoverflow">
<view class="xllistdwright active" v-for="(el1,ind1) in el.data.stay" :key="ind1" @click="nato('/pagesys/list/jqDet?uid='+el1.id)">
<image :src="el1.img?getUrl(el1.img):$getimg('noimg.png')" class="xllistsjimg" mode=""></image>
<view class="xllistsjall active">
<view class="xllistsjname">{{el1.name}}</view>
<view class="xllistsjjy">地址:{{el1.address}}</view>
</view>
</view>
</view>
</view>
<view class="xllistdw" v-if="el.data.cate.length > 0">
<image :src="getImg('ra-xcx-xc-list-icon-meishi.png')" class="xllistdwleft" mode=""></image>
<view class="xllistoverflow canyinlist">
<view class="xllistdwright active" v-for="(el1,ind1) in el.data.cate" :key="ind1" @click="nato('/pagesys/list/jqDet?uid='+el1.id)">
<image :src="el1.img?getUrl(el1.img):$getimg('noimg.png')" class="xllistsjimg" mode=""></image>
<view class="xllistsjall active">
<view class="xllistsjname">{{el1.name}}</view>
</view>
</view>
</view>
</view>
<view class="xllistdw" v-if="el.data.swim.length > 0">
<image :src="getImg('ra-xcx-xc-list-icon-youli.png')" class="xllistdwleft" mode=""></image>
<view class="xllistoverflow">
<view class="xllistdwright active" v-for="(el1,ind1) in el.data.swim" :key="ind1" @click="nato('/pagesys/list/jqDet?uid='+el1.id)">
<image :src="el1.img?getUrl(el1.img):$getimg('noimg.png')" class="xllistsjimg" mode=""></image>
<view class="xllistsjall active">
<view class="xllistsjname">{{el1.name}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="xllistline"></view>
</view>
<prompt :visible.sync="promptVisible" :defaultValue="defaultValue" @confirm="clickPromptConfirm" mainColor="#0078D7">
<!-- 这里放入slot内容-->
</prompt>
</view>
<view class="fixedstyle" v-if="isShow">
<view class="sousuo">
<image :src="getImg('ra-xczs-icon-sousuo.png')" class="sousuoimg" mode=""></image>
<input type="text" value="" placeholder="输入关键词搜索景点" class="sousuoinput" />
</view>
<view class="wodeAll">
<view class="wodelist" v-for="(el,ind) in jqdatas" :key="ind">
<image :src="getUrl(el.img)" class="wodelistimg" mode=""></image>
<view class="wodeleft">
<view class="wodelistname">{{el.scenicName}}</view>
<view class="wodelistnr">位于虞山市飞云江北岸的红</view>
<view class="wodelisttitle">建议游玩1.5小时</view>
</view>
<image :src="getImg('ra-xczs-icon-zengjia.png')" v-if="ind != jqdatasIndex" class="wodelisttj" @click="addjdddclick(ind)" mode=""></image>
<image :src="getImg('ra-xczs-icon-xuanze.png')" v-if="ind == jqdatasIndex" class="wodelisttj" mode=""></image>
</view>
</view>
<view class="fotter">
<view class="fotterleft">已选择{{jdnum}}个景点</view>
<view class="fotterright" @click="qdclick">确定</view>
</view>
</view>
</view>
</template>
<script>
var web = require('@/components/utils/request.js');
import Prompt from '@/components/prompt/index.vue'
export default{
components: {
Prompt
},
data(){
return{
id: 0,
playDays: 2,//游玩天数
playAdults: 1,//游玩成人数
playChildren: 1,//游玩儿童数
stayType: '酒店',//(单选框)住宿需求(酒店,民宿)
stayDemand: '舒适',//(单选框)住宿条件(高档,舒适,经济)
foodDemand: '餐饮',//(单选框)餐饮需求(餐饮,农家乐)
journeyType: '适中',//(单选框)行程类型: 宽松、适中、紧凑
landscapeDemand: '名城古镇',//(复选框)景观需求 名城古镇、山峰峡谷、历史遗迹、地质奇观、瀑布、森林、梯田、田园村寨、博物馆、商业街、夜游、运动
scenicSpotDemand: '不限',// (单选框)景点需求:不限、必去、非必去
fitTraffic: '自驾游',//(复选框)适合的交通方式:自驾游、高铁游、公交游、骑行游
scenicConsume: '500',// 游玩总天数景区人均总预算
stayConsume: '500',//游玩总天数住宿人均总预算
foodConsume: '500',// 游玩总天数餐饮人均总预算
promptVisible: false,// 控制弹框输入框显示
defaultValue: '',
datas: [],
datasIndex: 0,
jqdatasIndex: -1,
jdnum: 0,
jqdatas: [],
isShow: false,
browse: 0,//浏览数
giveLike: 0,//点赞数
feature: '',//描述
datastypeimg:''
}
},
onShareAppMessage(res) {
if (res.from === 'menu') {// 来自页面内分享按钮
console.log(res)
}
return {
title: '分享行程',
path: '/pagesys/xczs/edit?id=' + this.id
}
},
onLoad(option) {
// uni.showToast({title:"线路生成中",icon:"none"});
this.id = option.id;
this.getData();
this.getData1();
this.dzllclick(1);
uni.showShareMenu();
},
methods:{
getUrl(url) {
return 'https://cs.tour-ma.com/' + url;
},
getImg(url) {
return 'https://cs.tour-ma.com/r/cms/www/m/yushan/' + url;
},
nato(url){
uni.navigateTo({
url:url
})
},
getData: function() {
var url = '/journey/check.jspx';
var para = {id: this.id};
var that = this;
web.httpPost(that, url, para, function(res) {
if(res.data.status == 200) {
// uni.showToast({title:res.data.message,icon:"none"});
for(var i = 0;i<res.data.data.length;i++) {
that.datastypeimg= res.data.data[i].typeImg;
that.defaultValue = res.data.data[i].journeyName;
that.datas = res.data.data[i].userJourney;
that.browse = res.data.data[i].browse;
that.giveLike = res.data.data[i].giveLike;
that.feature = res.data.data[i].feature;
}
console.log(that.datas);
}else{
uni.showToast({title:res.data.message,icon:"none"});
uni.navigateTo({
url:'/pagesys/xczs/biaoqian?playDays='+that.playDays+'&playAdults='+that.playAdults+'&playChildren='+that.playChildren
})
}
});
},
getData1: function() {
var url = '/journey/v_scenicData.jspx';
var para = {};
var that = this;
web.httpPost(that, url, para, function(res) {
if(res.data.status == 200) {
// uni.showToast({title:res.data.message,icon:"none"});
that.jqdatas = res.data.data;
console.log(that.jqdatas);
}else{
uni.showToast({title:res.data.message,icon:"none"});
}
});
},
clickPromptConfirm(val) {
this.defaultValue = val;
this.promptVisible = false;
var url = '/journey/v_update.jspx';
var para = {
id:this.id,journeyName: this.defaultValue,userJourney: this.datas,isOfficial: 0
};
var that = this;
web.httpPost(that, url, para, function(res) {
if(res.data.status == 200) {
uni.showToast({title:'修改行程成功',icon:"none"});
uni.navigateTo({
url:'/pagesys/xczs/wode'
})
}else{
uni.showToast({title:res.data.message,icon:"none"});
}
});
},
saveData: function() {
this.promptVisible = true;
},
addjdclick: function(ind) {
this.datasIndex = ind;
this.isShow = true;
},
addjdddclick: function(ind) {
this.jqdatasIndex = ind;
this.jdnum = 1;
},
qdclick: function() {
this.isShow = false;
if(this.jqdatasIndex != -1) {
this.datas[this.datasIndex].data.scenic.push(this.jqdatas[this.jqdatasIndex]);
}
this.jqdatasIndex = -1;
this.jdnum = 0;
console.log(this.datas);
},
delclick: function(ind,ind1) {
var that = this;
uni.showModal({
title: '提示',
content: '确定要删除此景点吗',
success: function (res) {
if (res.confirm) {
that.datas[ind].data.scenic.splice(ind1,1);
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
dzllclick: function(type) {
var url = '/journey/v_giveLike.jspx';
var para = {
id:this.id,type: type
};
var that = this;
web.httpPost(that, url, para, function(res) {
if(res.data.status == 200) {
// uni.showToast({title:'成功',icon:"none"});
that.getData();
}else{
uni.showToast({title:res.data.message,icon:"none"});
}
});
}
}
}
</script>
<style>
@font-face {
font-family: Medium;
src: url('https://ys.tour-ma.com/r/cms/www/m/yushan/SOURCEHANSANSCN-MEDIUM_1.OTF');
}
@font-face {
font-family: Regular;
src: url('https://ys.tour-ma.com/r/cms/www/m/yushan/SOURCEHANSANSCN-REGULAR_1.OTF');
}
.content{width: 750upx;height: 100vh;position: relative;}
.gxjtop {width: 750upx;height: 488upx;position: relative;}
.gxjtopimg {width: 750upx;height: 488upx;}
.gxjcenter {width: 690upx;background: linear-gradient(0deg, #FFFFFF 0%, #F5F6F7 100%);border-radius: 44rpx 44rpx 0px 0px;padding: 0upx 30upx 70upx 30upx;position: relative;top: -120upx;}
.xctop {height: auto;position: relative;}
.xctitleimg {width: 750upx;height: 198upx;position: absolute;top: 0upx;left: 0upx;}
.xctitle {font-size: 40upx;font-family: Medium;font-weight: 500;color: #272829;position: relative;padding: 40upx 0upx 0upx 0upx;}
.xcdzckAll {overflow: hidden;position: relative;margin: 20upx 0upx 0upx 0upx;}
.xcdzcklist {float: left;border-right: 1upx solid #BBBBBB;padding: 0upx 21upx 0upx 0upx;}
.xcdzcklistimg {width: 34upx;height: 34upx;float: left;margin: 3upx 0upx 0upx 0upx;}
.xcdzcklistname {font-size: 28upx;font-family: Regular;font-weight: 400;color: #666666;opacity: 0.92;float: left;margin: 0upx 0upx 0upx 15upx;}
.xcdzcklist:last-child {border: none;/* padding: 0upx 0upx 0upx 31upx; */}
.xcdzms {font-size: 26upx;font-family: Regular;font-weight: 400;color: #666666;line-height: 44upx;margin: 0upx 0upx 51upx 0upx;}
.xllistAll {position: relative;}
.xllistline {width: 2upx;height: 100%;position: absolute;top: 0upx;background: #DDDDDD;left: 33upx;}
.xllist {}
.xllistts {overflow: hidden;position: relative;}
.xllisttsleft {width: 68upx;height: 68upx;background: #0078D7;border-radius: 50%;float: left;font-size: 32upx;font-family: Medium;font-weight: 500;color: #FFFFFF;text-align: center;line-height: 68upx;position: relative;z-index: 1;}
.xllisttsright {font-size: 36upx;font-family: Medium;font-weight: 500;color: #272829;float:left;margin: 0upx 0upx 0upx 23upx;line-height: 68upx;}
.xllistbt {overflow: hidden;}
.xllistbtleft {width: 20upx;height: 20upx;background: #FFFFFF;position: relative;border-radius: 50%;float: left;margin: 40upx 0upx 0upx 24upx;position: relative;z-index: 1;}
.xllistbtleft1 {width: 14upx;height: 14upx;background: #B6B6B6;border-radius: 50%;position: absolute;top: 3upx;left: 3upx;}
.xllistbtright {float: left;font-size: 24upx;font-family: Regular;font-weight: 400;color: #999999;margin: 30upx 0upx 0upx 49upx;}
.xllistbtrighttext {margin: 0upx 10upx;}
.xllistdw {overflow: hidden;padding: 0upx 0upx 18upx 0upx;}
.xllistdwleft {width: 68upx;height: 68upx;float: left;margin: 96upx 0upx 0upx 0upx;position: relative;z-index: 1;}
.xllistdwright {width: 568upx;height: 146upx;background: #FFFFFF;box-shadow: 0px 0px 18upx 0px rgba(0, 0, 0, 0.08);border-radius: 8upx;float: left;margin: 41upx 0upx 10upx 23upx;padding: 15upx;position: relative;}
.xllistsjimg {width: 200upx;height: 146upx;border-radius: 8upx 0upx 0upx 8upx;float: left;}
.xllistsjall {float: left;margin: 0upx 0upx 0upx 25upx;width: 336upx;}
.xllistsjname {font-size: 30upx;font-family: Medium;font-weight: 500;color: #333333;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;margin: 17upx 0upx 0upx 0upx;}
.xllistsjjy {font-size: 24upx;font-family: Regular;font-weight: 400;color: #666666;margin: 25upx 0upx 0upx 0upx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;}
.xllistsjimgjs {width: 36upx;height: 36upx;position: absolute;top: 70upx;right: 20upx;}
.jlstyle {font-size: 24upx;font-family: Medium;font-weight: 500;color: #272829;margin: 0upx 0upx 0upx 15upx;}
.zjystyle {float: left;width: 568upx;height: 158upx;background: rgba(0, 120, 215, 0.04);border: 1upx solid #0078D7;border-radius: 8upx;float: left;margin: 41upx 0upx 0upx 23upx;padding: 15upx;}
.zjystylename {font-size: 28upx;font-family: Medium;font-weight: 500;color: #333333;}
.zjystylevalue {font-size: 24upx;font-family: Regular;font-weight: 400;color: #999999;line-height: 36upx; text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;margin: 9upx 0upx 0upx 0upx;}
.bottom {width: 280upx;height: 84upx;background: #0078D7;box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.14);border-radius: 42upx;text-align: center;line-height: 84upx;font-size: 32upx;font-family: Medium;font-weight: 500;color: #FFFFFF;position: fixed;bottom: 45upx;left: 235upx;cursor: pointer;}
.ztscimg {width: 40upx;height: 40upx;position: absolute;right: 30upx;top: 12upx;}
.tjjd {float: right;margin: 30upx 0upx 0upx 0upx;}
.tjjdimg {width: 28upx;height: 28upx;float: left;margin: 8upx 0upx 0upx 0upx;}
.tjjdname {font-size: 28upx;font-family: Regular;font-weight: 400;color: #0078D7;margin: 0upx 0upx 0upx 6upx;float: left;}
.fixedstyle {width: 750upx;height: 100vh;position: absolute;top: 0upx;left: 0upx;z-index: 9999;background: url('https://ys.tour-ma.com/r/cms/www/m/yushan/ra-xcx-bg-3qiu.png') no-repeat #FFFFFF;background-size: 100% 100%;}
.sousuo {width: 690upx;height: 72upx;background: #F5F5F5;border-radius: 36upx;position: relative;overflow: hidden;padding: 0upx 0upx 0upx 0upx;margin: 34upx auto 40upx auto;}
.sousuoimg {width: 38upx;height: 38upx;float: left;margin: 17upx 0upx 0upx 27upx;}
.sousuoinput {float: left;font-size: 28upx;font-family: Regular;font-weight: 400;color: #B8B8B8;margin: 0upx 0upx 0upx 22upx;width: 540upx;height: 68upx;line-height: 68upx;}
.wodeAll {width: 690upx;margin: 0upx auto 70upx auto;padding: 0upx 0upx 0upx 0upx;}
.wodelist {width: 660upx;height: 170upx;background: #FFFFFF;box-shadow: 0px 0px 18upx 0px rgba(0, 0, 0, 0.08);border-radius: 8upx;padding: 15upx;margin: 0upx 0upx 20upx 0upx;position: relative;}
.wodelistimg {float: left;width: 200upx;height: 170upx;border-radius: 8upx 0upx 0upx 8upx;}
.wodeleft {float: left;margin: 0upx 0upx 0upx 20upx;width: 390upx;}
.wodelistname {font-size: 32upx;font-family: Medium;font-weight: 500;color: #333333;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;margin: 20upx 0upx 10upx 0upx;}
.wodelistnr {font-size: 24upx;font-family: Regular;font-weight: 400;color: #999999;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;margin: 10upx 0upx 0upx 0upx;}
.wodelisttitle {font-size: 24upx;font-family: Regular;font-weight: 400;color: #D8A04B;margin: 10upx 0upx 0upx 0upx;}
.wodelisttj {width: 36upx;height: 36upx;position: absolute;top: 82upx;right: 20upx;}
.fotter {overflow: hidden;width: 750upx;height: 90upx;background: #FFFFFF;border: 1upx solid #EEEEEE;box-shadow: 0upx 0upx 30upx 0upx rgba(0, 0, 0, 0.14);position: fixed;bottom: 0upx;left: 0upx;z-index: 1;}
.fotterleft {font-size: 28upx;font-family: Regular;font-weight: 400;color: #999999;float: left;margin: 24upx 0upx 0upx 32upx;}
.fotterright {width: 124upx;height: 52upx;background: #0078D7;border-radius: 26upx;font-size: 24upx;font-family: Regular;font-weight: 400;color: #FFFFFF;text-align: center;line-height: 52upx;margin: 19upx 30upx 0upx 0upx;float: right;}
.xllistoverflow {display: flex;overflow-x: auto;}
.xllistdwright.active {height: auto;}
.canyinlist .xllistsjimg{width: 100%;}
</style>