Skip to content

U
uni-pdtravel
Commit 83b83478 authored by 潘永坪's avatar 潘永坪
Browse files
Options

组合下单页面开发

parent 24e3e559
Show whitespace changes
Inline Side-by-side
Showing with 289 additions and 295 deletions
main.js
View file @ 83b83478
......@@ -8,7 +8,7 @@ import commonjs from 'common/common.js'
Vue.prototype.$commonjs = commonjs
Vue.prototype.$request = request
Vue.prototype.$wxurl = 'https://lx.pangdly.com/#/'
Vue.prototype.$wxurl = 'https://wx.pangdly.com/#/'
Vue.prototype.imageError ='@/static/img/common/pangdingLogo.png'
Vue.use(uView)
uni.$u.config.unit = 'rpx'
......
pages/scenic/scenicCombiOrder/scenicCombiOrder.vue
View file @ 83b83478
<template>
<view class="orderBox">
<view class="head"> </view>
<view class="middle" v-for="(item,index) in productList" :key='item.id'>
<view class="middle-top">
<view class="middle">
<view class="list" v-for="(item,index) in productList" :key='item.id'>
<view class="list-top">
<!-- --------------------------------------------产品信息部分------------------------------------- -->
<view class="middle-Product">
<view class="list-Product">
<view class="merchantName">
<text class="title-text">
{{ item.merchantName || '' }}
......@@ -28,7 +29,7 @@
</view>
</view>
<!--需要排队并且站点数大于1-->
<view class="middle-place" @click="openArea(index)" v-if="item.isFetch ==1&& item.productAreaList.length >1&&item.areaUp">
<view class="list-place" @click="openArea(index)" v-if="item.isFetch ==1&& item.productAreaList.length >1&&item.areaUp">
<view> 出发站点 </view>
<view>
......@@ -40,7 +41,7 @@
</view>
</view>
<!--需要排队并且为一个站点-->
<!-- <view class="middle-place" v-if="item.isFetch == 1 && item.productAreaList.length == 1 &&item.areaUp" @click="getSortInfor()">
<!-- <view class="list-place" v-if="item.isFetch == 1 && item.productAreaList.length == 1 &&item.areaUp" @click="getSortInfor()">
<view> 获取排队信息 </view>
<view>
......@@ -52,10 +53,10 @@
</view>
</view> -->
<view class="middle-Date">
<view class="list-Date">
<view class="title-text">游玩日期</view>
<view class="middle-Datelist">
<scroll-view class="date-content" scroll-x="true" :scroll-left="dateScroll" v-if="item.priceStockList&&item.priceStockList.length > 0">
<view class="list-Datelist">
<scroll-view class="date-content" scroll-x="true" :scroll-left="item.dateScroll" v-if="item.priceStockList&&item.priceStockList.length > 0">
<view class="date-list" v-for="(item2,index2) of item.priceStockList" :class="{ on:item.dateActive == index2 }" @click="dateChoose(item,item2,index2)" :key="index2">
<view v-if="item2.week">
<text v-if="item2.week != '今天' && item2.week != '明天' && item2.week != '后天'">周</text>
......@@ -84,18 +85,22 @@
</view>
</view>
<view class="middle-time" v-if="item.productType == 3">
<view class="list-time" v-if="item.productType == 3">
<view class="title-text"> 场次 </view>
<view class="middle-timelist">
<scroll-view class="time-content" scroll-x="true" :scroll-left="timeScroll" v-if="item.timeList&&item.timeList.length> 0">
<view class="list-timelist">
<scroll-view class="time-content" scroll-x="true" :scroll-left="item.timeScroll" v-if="item.timeList&&item.timeList.length> 0">
<view class="time-list" v-for="(item2,index2) of item.timeList" @click="chooseTime(item,item2,index2)" :class="{ on:item.timeActive == index2 }" :key="index2">
<view>
{{ item2.startPlanTime ? item2.startPlanTime.substr(0, 5) : '' }}
<text v-if="item2.endPlanTime">-</text>
{{ item2.endPlanTime ? item2.endPlanTime.substr(0, 5) : '' }}
<text v-if="!item2.saleOnlyShowFromDate">
-{{ item2.endPlanTime ? item2.endPlanTime.substr(0, 5) : '' }}
</text>
</view>
<view>
<text v-if="item2.copyLast!='余票充足'&&item2.copyLast!='售罄'">剩余：</text>
{{ item2.copyLast }}
</view>
<view> 剩余：{{ item2.last }} </view>
<view v-if="item.timeActive == index" class="date-icon">
<view v-if="item.timeActive == index2" class="date-icon">
<u-icon name="checkmark" color="#ffffff"></u-icon>
</view>
</view>
......@@ -112,10 +117,10 @@
</view>
</view>
<view class="middle-divider">
<view class="list-divider">
</view>
<view class="middle-Number">
<view class="list-Number">
<view class="title-text"> 购买数量 </view>
<view>
<u-number-box v-model="item.buyNum" @change='buyNumChange'>
......@@ -129,7 +134,7 @@
</u-number-box>
</view>
</view>
<view class=" middle-coupon" v-if="couponData.length>0" @click="showCoupon()">
<view class="list-coupon" v-if="couponData.length>0" @click="showCoupon()">
<view>
券
</view>
......@@ -166,12 +171,12 @@
<u-icon name="arrow-right" color="#3688FF"></u-icon>
</view>
</view>
<view class="middle-divider">
<view class="list-divider">
</view>
<!-- ---------------------------------------------游客信息-------------------------------------------- -->
<view class="middle-bottom" v-if="item.tripTemplateFlag != 2">
<view class="middle-visitor">
<view class="list-bottom" v-if="item.tripTemplateFlag != 2">
<view class="list-visitor">
<view class="visitorTitle">
<text class="title-text"> 用户信息 </text>
<text>
......@@ -224,11 +229,6 @@
</view>
</view>
</view>
<view class="middle-phone" v-if="showTelephone">
<text> 联系电话： </text>
<input type="number" maxlength="11" placeholder="请输入联系电话" v-model.trim="ticketPhone" />
</view>
</view>
<!-- ---------------------------------------------产品押金部分---------------------------------------- -->
<view class="productDeposit" v-if="item.deposit">
......@@ -241,6 +241,11 @@
</view>
</view>
<view class="telephone" v-if="showTelephone">
<text> 联系电话： </text>
<input type="number" maxlength="11" placeholder="请输入联系电话" v-model.trim="ticketPhone" />
</view>
</view>
<view class="bottom">
<view class="bottom-left">
......@@ -261,7 +266,7 @@
</view>
</view>
</view>
<calendar ref="calendar" @dateConfig="dateConfig" :dateList="dateList" v-show="dateList.length > 0"></calendar>
<calendar ref="calendar" @dateConfig="dateConfig" :dateList="chooseDateList" v-show="chooseDateList.length > 0"></calendar>
<buyKnow ref="buyKnow" :buyKnowData="buyKnowData"></buyKnow>
<detail
ref="detail"
......@@ -281,7 +286,7 @@
:sortArr="sortArr"
:defaultAreaCode="defaultAreaCode"
></chooseArea>
<times ref="times" :chooseTimeList="chooseTimeList" @timeConfig="timeConfig" :chooseTimeData="chooseTimeData" :timeActive="timeActive"></times>
<times ref="times" :chooseTimeList="chooseTimeList" @timeConfig="timeConfig" :timeActive="timeActive"></times>
<editContacts ref="editContacts" :editContact="editContact" :contactTotal="contactTotal"></editContacts>
<contactList
ref="contactList"
......@@ -313,7 +318,7 @@
<text class="sortPoptext">{{ sortIfo.sortTotalCapacity }}</text>
</view>
<view style="margin-top: 40rpx; text-align: center" @click="sortInforPop = false">
<text class="middle-btn">确定</text>
<text class="list-btn">确定</text>
</view>
</view>
</u-popup> -->
......@@ -365,7 +370,6 @@ export default {
productDepositTotal: 0, //产品总押金
docQuery: '', //元素变量
payBackground: '', //支付按钮背景颜色
dateScroll: '', //日期滚动值
timeScroll: '' ,//时间滚动值
openid:uni.getStorageSync('openid') || '',//openid
couponData:[], //所有劵数据
......@@ -373,9 +377,9 @@ export default {
ableConpon: '', //没有可用优惠券时，达到一定条件可用，显示达到的条件
orderStatus:'',//上下架状态，任何一个产品状态为下架，该状态为下架
chooseTimeList:[],//选中产品时间列表
chooseTimeData: '', //选中的时间传给子组件
moreDateIndex:0,//点击的更多日期下标
dateList:[],//点击更多日期时对应的日期列表
moreTimeIndex:0,//点击的更多时间下标
chooseDateList:[],//点击更多日期时对应的日期列表
showTelephone:true,//用于判断是否显示输入联系人电话号码
areaIndex:0,//选择站点时对应的产品下标
contactTotal: [], //所有联系人列表
......@@ -492,7 +496,7 @@ export default {
// }
this.$refs.calendar.setDefaultDate(this.productList[index].chooseDate)//日历组件选中日期
this.moreDateIndex=index
this.dateList=this.productList[index].priceStockList
this.chooseDateList=this.productList[index].priceStockList
this.$refs.calendar.showPop = true
},
//---日期选择---已改
......@@ -505,7 +509,6 @@ export default {
this.$refs.calendar.setDefaultDate(item.chooseDate)//日历组件选中日期
item.endDate=item2.endTime//开始日期
item.startDate=item2.startTime//结束日期
this.chooseTimeData=''//清除之前选中的时间
if(item.productType==3){
//productType=3为场次票
item.cruisePlanId=''
......@@ -517,19 +520,19 @@ export default {
//解决点击日期无反应的情况
this.$forceUpdate()
},
//---日历确认事件---还未改完
//---日历确认事件
dateConfig(data) {
let index=this.moreDateIndex
let index2=this.productList[index].priceStockList.findIndex(item=>{
let index2=chooseDateList.findIndex(item=>{
return item.startTime.substr(0,10)==data
})
let item=this.productList[index]
let item=this.productList[this.moreDateIndex]
let item2=item.priceStockList[index2]
this.dateChoose(item,item2,index) //选中确认的日期
//下面需要处理
// this.docQuery.selectAll('.date-list').boundingClientRect(data => {
// this.dateScroll = (data[index].width + 4) * index
// }).exec()
this.dateChoose(item,item2,index2) //选中确认的日期
let width=0
this.docQuery.select('.date-list').boundingClientRect(data => {
width = data.width
}).exec()
item.dateScroll=(width+6)*index2
},
//---展示更多时间---已改好
showTime(item,index) {
......@@ -542,31 +545,31 @@ export default {
}
this.$refs.times.showPop = true
},
//---时间选择---已改好，数据更新需要测试
chooseTime(item,item2,index) {
//---时间选择---已改好
chooseTime(item,item2,index2) {
if(item2.copyLast!='售罄'){
item.timeActive=index
item.timeActive=index2
item.cruisePlanId=item2.cruisePlanId//获取班次Id
this.chooseTimeData=item2.startPlanTime
item.maxBookNum=Math.min(item.maxBookNum,item2.last)
//如果为场次票,开始时间为班次时间的开始时间，结束时间为班次时间的结束时间，班次时间的结束时间为空时，结束时间为班次时间的开始时间
item.startPlayTime=item2.startPlanTime
item.endPlayTime=item2.endPlanTime||item2.startPlanTime
// this.$forceUpdate()
//解决时间下标未及时选中的问题
this.$forceUpdate()
}
},
//---时间确认事件
timeConfig(data) {
let index = this.timeList.findIndex(item => {
return item.startPlanTime == data
})
if (index > -1) {
//子组件点击确认之后有选择的时间
this.chooseTime(index) //选中确认的日期
this.docQuery.selectAll('.time-list').boundingClientRect(data => {
this.timeScroll = (data[index].width + 4) * index
timeConfig(index2) {
let item=this.productList[this.moreTimeIndex]
let item2=this.chooseTimeList[index2]
this.chooseTime(item,item2,index2)
//由于没有数据需要测试
let width=0
this.docQuery.select('.time-list').boundingClientRect(data => {
width = data.width
}).exec()
}
item.timeScroll=(width+6)*index2
},
//---获取点击的编辑联系人信息，传给编辑联系人组件
getEditContact(data) {
......@@ -1273,11 +1276,14 @@ export default {
min-height: 100%;
background: #f5f5f5;
}
.middle {
.middle{
position: relative;
top: -100rpx;
padding: 30rpx 20rpx;
background: #ffffff;
padding:0 20rpx 30rpx 20rpx;
}
.list{
padding-top: 30rpx;
}
.title-text{
font-size: 32rpx;
......@@ -1308,23 +1314,23 @@ export default {
.buyKnow view:nth-child(2) {
display: flex;
}
.middle-place {
.list-place {
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.middle-place view:nth-child(2) {
.list-place view:nth-child(2) {
flex: 1;
margin-left: 20rpx;
color: $theme;
font-size: 28rpx;
font-weight: bolder;
}
.middle-Date{
.list-Date{
margin-top: 40rpx;
}
.middle-Datelist {
.list-Datelist {
display: flex;
justify-content: space-between;
align-items: center;
......@@ -1387,10 +1393,10 @@ export default {
.date-more-content {
margin-right:8rpx;
}
.middle-time{
.list-time{
margin-top: 40rpx;
}
.middle-timelist {
.list-timelist {
display: flex;
justify-content: space-between;
align-items: center;
......@@ -1439,12 +1445,12 @@ export default {
flex: 1;
font-weight: bolder;
}
.middle-divider{
.list-divider{
height: 2rpx;
background:$divider;
margin: 40rpx 0;
}
.middle-Number {
.list-Number {
display: flex;
justify-content: space-between;
align-items: center;
......@@ -1473,13 +1479,13 @@ export default {
justify-content: center;
align-items: center;
}
.middle-coupon{
.list-coupon{
display: flex;
justify-content: space-between;
align-items: center;
padding:30rpx 0;
}
.middle-coupon view:first-child{
.list-coupon view:first-child{
width: 36rpx;
height: 36rpx;
background: $theme;
......@@ -1488,18 +1494,18 @@ export default {
line-height:32rpx;
border-radius:4rpx;
}
.middle-coupon view:nth-child(2){
.list-coupon view:nth-child(2){
flex: 1;
margin-left: 10rpx;
}
.middle-coupon view:nth-child(3){
.list-coupon view:nth-child(3){
display: flex;
color: $theme;
font-weight: bold;
}
/*中间下面部分*/
.middle-visitor {
.list-visitor {
padding-bottom: 40rpx;
border-bottom: 1px solid $divider;
}
......@@ -1578,12 +1584,13 @@ export default {
.edit-list view:nth-child(3) {
flex: 1;
}
.middle-phone {
.telephone {
margin-top: 30rpx;
display: flex;
align-items: center;
font-weight: bold;
}
.middle-phone input {
.telephone input {
flex: 1;
}
/*押金部分*/
......@@ -1609,8 +1616,7 @@ export default {
max-width: 750rpx;
z-index: 10;
padding: 0 24rpx 0 40rpx;
box-sizing: border-box;
box-shadow: 0 0 3rpx #666666;
box-shadow: 0px 4px 12px rgba(0,0,0,0.16)
}
.bottom-left > text:first-child {
font-size: 28rpx;
......
pages/scenic/scenicComponents/times.vue
View file @ 83b83478
<template>
<u-popup :show="showPop" :round="20" @close="showPop=false" closeable>
<u-popup :show="showPop" :round="20" @close="confirm()" closeable>
<view class="son-wrap">
<view class="time-title">
时间选择
......@@ -14,15 +14,17 @@
:key="index" v-if="item.last>0">
<view>
{{item.startPlanTime?item.startPlanTime.substr(0,5):""}}
<text v-if="item.endPlanTime">-</text>
{{item.endPlanTime?item.endPlanTime.substr(0,5):""}}
<text v-if="!item.saleOnlyShowFromDate">
-{{item.endPlanTime?item.endPlanTime.substr(0,5):""}}
</text>
</view>
<view>
剩余：{{item.last}}
<text v-if="item.copyLast!='余票充足'&&item.copyLast!='售罄'">剩余：</text>
{{item.copyLast}}
</view>
</view>
</view>
<view style="padding: 0.5rem 0rem;color: #FF0000;" v-else>
<view style="padding:50rpx 0;color: #FF0000;" v-else>
空空如也...
</view>
<view class="time-sure">
......@@ -37,7 +39,7 @@
<script>
export default {
props: ['chooseTimeList', 'chooseTimeData', 'timeActive'],
props: ['chooseTimeList', 'timeActive'],
watch: {
timeActive: { //父组件选中的下标
handler(newValue, oldValue) {
......@@ -53,25 +55,20 @@ export default {
return {
showPop: false, //控制该组件显示隐藏
active: 10000, //默认不选中
times: '', //时间
timeNumber: '', //当前时间转化为数字
}
},
methods: {
//---时间选择
chooseTime(i) {
this.active = i
this.times = this.chooseTimeList[i].startPlanTime
},
//---时间确认事件
confirm(date) {
confirm() {
this.showPop = false
this.$emit('timeConfig', this.times)
},
},
mounted() {
let times = new Date().Format('yyyy-MM-dd hh:mm:ss')
this.timeNumber = parseInt(this.$commonjs.changeTime(times))
if(this.active!=10000){
this.$emit('timeConfig', this.active)
}
}
}
}
</script>
......
pages/scenic/scenicOrder/scenicOrder.vue
View file @ 83b83478
......@@ -91,13 +91,13 @@
<view class="time-list" v-for="(item, index) of timeList" @click="chooseTime(index)" :class="{ on: timeActive == index }" :key="index">
<view>
{{ item.startPlanTime ? item.startPlanTime.substr(0, 5) : '' }}
<text v-if="item.endPlanTime&&!item.saleOnlyShowFromDate">
<text v-if="!item.saleOnlyShowFromDate">
-{{ item.endPlanTime ? item.endPlanTime.substr(0, 5) : '' }}
</text>
</view>
<view>
<text v-if="item.copyLast!='余票充足'&&item.copyLast!='售罄'">剩余：</text>
{{ item.last }}
{{ item.copyLast }}
</view>
<view v-if="timeActive == index" class="date-icon">
<u-icon name="checkmark" color="#ffffff"></u-icon>
......@@ -329,7 +329,7 @@
:sortArr="sortArr"
:defaultAreaCode="defaultAreaCode"
></chooseArea>
<times ref="times" :chooseTimeList="timeList" @timeConfig="timeConfig" :chooseTimeData="chooseTimeData" :timeActive="timeActive"></times>
<times ref="times" :chooseTimeList="timeList" @timeConfig="timeConfig" :timeActive="timeActive"></times>
<editContacts ref="editContacts" :editContact="editContact" :contactTotal="contactTotal"></editContacts>
<contactList
ref="contactList"
......@@ -420,7 +420,6 @@ export default {
chooseContact: [], //选中的游客信息列表
contactNum: 1, //需要选择几位联系人数量
cruisePlanId: '', //班次Id
chooseTimeData: '', //选中的时间传给子组件
timeNumber: '', //当前时间转化为数字
startDate: '', //开始日期
endDate: '', //结束日期
......@@ -589,7 +588,7 @@ export default {
})
this.dateChoose(index) //选中确认的日期
this.docQuery.selectAll('.date-list').boundingClientRect(data => {
this.dateScroll = (data[index].width + 4) * index
this.dateScroll = (data[index].width + 6) * index
}).exec()
},
//---展示更多时间
......@@ -601,7 +600,6 @@ export default {
if(this.timeList[i].copyLast!='售罄'){
this.timeActive = i
this.cruisePlanId = this.timeList[i].cruisePlanId //获取班次Id
this.chooseTimeData = this.timeList[i].startPlanTime
this.maxBookNum = Math.min(this.timeList[i].last, this.productIfo.maxBookNum) //获取剩余库存
//如果为班次票,开始时间为班次时间的开始时间，结束时间为班次时间的结束时间，班次时间的结束时间为空时，结束时间为班次时间的开始时间
this.startPlayTime = this.timeList[i].startPlanTime
......@@ -609,17 +607,11 @@ export default {
}
},
//---时间确认事件
timeConfig(data) {
let index = this.timeList.findIndex(item => {
return item.startPlanTime == data
})
if (index > -1) {
//子组件点击确认之后有选择的时间
timeConfig(index) {
this.chooseTime(index) //选中确认的日期
this.docQuery.selectAll('.time-list').boundingClientRect(data => {
this.timeScroll = (data[index].width + 4) * index
this.timeScroll = (data[index].width + 6) * index
}).exec()
}
},
//---获取点击的编辑联系人信息，传给编辑联系人组件
getEditContact(data) {
......@@ -1713,8 +1705,7 @@ export default {
max-width: 750rpx;
z-index: 10;
padding: 0 24rpx 0 40rpx;
box-sizing: border-box;
box-shadow: 0 0 3rpx #666666;
box-shadow: 0px 4px 12px rgba(0,0,0,0.16)
}
.bottom-left > text:first-child {
font-size: 28rpx;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment