Skip to content

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

填写订单页面开发

parent 396643b7
Expand all Show whitespace changes
Inline Side-by-side
Showing with 274 additions and 332 deletions
App.vue
View file @ 3c81b50e
......@@ -103,33 +103,39 @@ export default {
}
//小按钮
.btn{
background:linear-gradient(132deg, #ED400C 0%, #FB862C 100%);
background:#3688FF;
display: inline-block;
color: #FFFFFF;
width: 135rpx;
height: 70rpx;
line-height: 70rpx;
font-size:28rpx;
border-radius:8rpx;
border-radius:16rpx;
text-align: center;
padding: 16rpx 32rpx;
}
//中等按钮
.middle-btn{
background:linear-gradient(132deg, #ED400C 0%, #FB862C 100%);
display: inline-block;
color: #FFFFFF;
width: 180rpx;
height: 80rpx;
line-height: 80rpx;
font-size:32rpx;
border-radius:12rpx;
border-radius:20rpx;
text-align: center;
padding: 18rpx 40rpx;
}
//大按钮
.big-btn{
background:linear-gradient(132deg, #ED400C 0%, #FB862C 100%);
display: inline-block;
color: #FFFFFF;
width: 240rpx;
height: 100rpx;
line-height:100rpx;
font-size:36rpx;
border-radius:28rpx;
text-align: center;
padding: 20rpx 80rpx;
font-weight: bold;
}
......
components/buyKnow.vue
View file @ 3c81b50e
......@@ -42,7 +42,7 @@
¥ <text>{{buyKnowData.sellingPrice}}</text>
</text>
<view class="bottom-right">
<text class="btn" @click="showPop=false">
<text class="middle-btn" @click="showPop=false">
去预订
</text>
</view>
......@@ -158,9 +158,4 @@ export default {
display: flex;
align-items: center;
}
.btn{
padding: 16rpx 48rpx;
border-radius: 20rpx;
font-size: 32rpx;
}
</style>
pages/scenic/scenicComponents/chooseArea.vue
View file @ 3c81b50e
<template>
<view class="area-box">
<view class="top" @click="sure()">
<view class="top" @click="closeSon()">
<view class="top-left">
选择（索道）出发站点
</view>
<view>
<u-icon name="close"></u-icon>
<u-icon name="close" bold></u-icon>
</view>
</view>
<!-- 没有默认站点时-->
<template v-if="!defaultAreaCode">
<view class="bottom">
<view class="bottom1">
<view>
您所在位置距离“{{areaList[distanceIndex].areaName}}”较近
</view>
<view class="bottom1-choose">
建议选择<text>【{{areaList[distanceIndex].areaName}}】</text>
</view>
<view v-if="defaultAreaCode" class="defaultArea">
<view class="bottom1-btn">
<text class="btn" @click="chooseArea(item)" v-for="(item,index) of areaList" :key="index">
{{item.areaName}}
</text>
</view>
</view>
<view class="bottom2">
<image src="../static/scenic/chooseArea.jpg" mode="widthFix"></image>
<view style="margin-top: 20rpx;">选错站点可导致排队号码无效。</view>
<view>若无法确定站点，请向索道工作人员咨询。</view>
</view>
</view>
<view class="pop-wrap" v-show="showPop">
<view class="pop-content">
<view>
<text>
当前站点：
您选择的站点是：
</text>
<text>
......@@ -21,6 +47,7 @@
</text>
</view>
<template v-if="sortIfo">
<view>
<text>
当前排队人数：
......@@ -42,7 +69,8 @@
</text>
</view>
<view>
</template>
<!-- <view>
<text>
退票规则：
</text>
......@@ -50,55 +78,38 @@
<text>
不可退
</text>
</view>
<view>
<image src="../static/scenic/chooseArea.jpg" mode="widthFix"></image>
</view>
</view> -->
<view>
<a class="middle-btn" @click="sure()">确定</a>
</view>
</view>
<template v-else>
<view class="bottom">
<view class="bottom1">
<view>
您所在位置距离“{{areaList[distanceIndex].areaName}}”较近
返程时，根据现场情况需重新取号
</view>
<view class="bottom1-choose">
建议选择<text>【{{areaList[distanceIndex].areaName}}】</text>
<view v-if="!sortIfo" style="font-size:32rpx;color:#FC6703;">
未找到本站信息，请根据现场大屏幕信息合理购票
</view>
<view class="bottom1-btn">
<text class="btn" @click="getSort(item)" v-for="(item,index) of areaList" :key="index">
{{item.areaName}}
<view style="text-align: center;">
<text class="btn" @click="hidePop()" style="color: #555;margin-right: 48rpx;">
取消
</text>
<text class="btn" @click="sure()">
确定
</text>
</view>
</view>
<view class="bottom2">
<image src="../static/scenic/chooseArea.jpg" mode="widthFix"></image>
<view style="margin-top: 20rpx;">选错站点可导致排队号码无效。</view>
<view>若无法确定站点，请向索道工作人员咨询。</view>
</view>
</view>
<view class="pop-wrap" v-show="showPop">
<view class="pop-content">
</template>
<!-- 有默认站点时 -->
<view v-else class="defaultArea">
<view>
<text>
您选择的站点是：
当前站点：
</text>
<text>
{{areaObj.areaName}}
</text>
</view>
<template v-if="sortIfo">
<view>
<text>
当前排队人数：
......@@ -120,8 +131,7 @@
</text>
</view>
</template>
<view>
<!-- <view>
<text>
退票规则：
</text>
......@@ -129,27 +139,15 @@
<text>
不可退
</text>
</view>
</view> -->
<view>
返程时，根据现场情况需重新取号
</view>
<view v-if="!sortIfo" style="font-size:32rpx;color: #ff0000;">
未找到本站信息，请根据现场大屏幕信息合理购票
<image src="../static/scenic/chooseArea.jpg" mode="widthFix"></image>
</view>
<view style="text-align: center;">
<text class="middle-btn" @click="hidePop()" style="color: #333;margin-right: 48rpx;">
取消
</text>
<text class="middle-btn" @click="sure()">
确定
</text>
</view>
<view>
<a class="btn" @click="closeSon()">确定</a>
</view>
</view>
</template>
</view>
</template>
......@@ -162,7 +160,7 @@ export default {
showPop: false, //控制弹窗显示隐藏
distanceIndex:0, //最小距离下标
distanceList: [], //所有距离列表
sortIfo: '', //排队信息
sortIfo: '', //排号信息
areaObj: {
areaCode: '', //选中的区域编码
areaName: '', //选中的区域名字
......@@ -180,12 +178,6 @@ export default {
this.sortIfo.peopleNumber = Math.max(item.sortTotalCapacity-item.showEnd,0)
}
})
this.areaList.forEach(item=>{
if(item.areaCode==this.defaultAreaCode){
this.areaObj.areaCode=item.areaCode
this.areaObj.areaName=item.areaName
}
})
return
}
uni.getLocation({
......@@ -198,27 +190,23 @@ export default {
})
},
methods: {
//---关闭组件
closeSon(){
this.$parent.closeArea()
},
//---隐藏弹窗
hidePop() {
this.showPop = false
},
//---返回隐藏该组件
returnClose() {
this.$parent.closeArea()
},
//---隐藏该组件
//---确定选择站点
sure() {
this.showPop = false
this.$parent.closeArea()
this.$emit('areaSure', this.areaObj)
},
//---获取排号信息
getSort(item) {
//---选择站点，获取排号信息
chooseArea(item) {
this.showPop = true
let data = {
areaCode: item.areaCode,
merchantCode: this.merchantCode, //商户code
}
this.areaObj.areaCode = item.areaCode //获取选中的站点code,便于找到返回数据的下标
this.areaObj.areaName = item.areaName
this.sortArr.forEach((item)=>{
......@@ -255,7 +243,7 @@ export default {
text-align: center;
}
.defaultArea view text:last-child{
color: #e70313;
color: $red;
font-size:32rpx;
font-weight: bold;
}
......@@ -266,7 +254,7 @@ export default {
right: 0;
bottom: 0;
z-index:99;
background: #f5f5f5;
background: #ECF3FE;
}
.top{
display: flex;
......@@ -288,7 +276,7 @@ export default {
}
.bottom1-choose{
font-size: 32rpx;
color: #ff0000;
color: $red;
text{
font-weight: bold;
font-size: 36rpx;
......@@ -300,12 +288,12 @@ export default {
.bottom2{
margin-top: 60rpx;
font-size: 32rpx;
color: #ff0000;
color:$red;
text-align: center;
}
// 弹窗
.pop-wrap{
background: rgba(0,0,0,0.1);
background: rgba(0,0,0,0.4);
position: fixed;
top: 0;
left: 0;
......@@ -328,6 +316,6 @@ export default {
.pop-content view:not(:last-child) text:last-child{
font-size:36rpx;
font-weight: bolder;
color: #f40000
color:$red;
}
</style>
pages/scenic/scenicComponents/contactList.vue
View file @ 3c81b50e
<template>
<u-popup :show="showPop" :round="20" @close="showPop=false" closeable>
<view class="son-wrap">
<view v-show="showPop">
<view class="list-box">
<view class="top">
<view class="top-num">
<text>
需填写{{contactNum}}位联系人
</text>
<view class="top-icon" @click="showPop=false">
<u-icon name="close" bold></u-icon>
</view>
</view>
<view @click="showEdit()" class="top-add">
<text>
......@@ -16,7 +21,7 @@
<checkbox-group @change="chooseContactChange">
<view class="bottom-list" v-for="(item,index) of listTotal" :key="item.id">
<label>
<checkbox :value="JSON.stringify(item)" :checked="item.ifChoose" color="#3688ff" />
<checkbox class="blue" :value="JSON.stringify(item)" :checked="item.ifChoose" color="#3688ff" />
<view class="bottom-content">
<view>
{{item.name}}
......@@ -52,9 +57,11 @@
确定
</view>
</view>
</view>
<u-modal :show="showModal" @confirm="confirmDele" @cancel="showModal=false" showCancelButton title="确认删除该联系人" ></u-modal>
</u-popup>
</view>
</template>
<script>
......@@ -83,13 +90,11 @@ export default {
methods: {
//---点击新增，展示编辑联系人弹窗,并传空值给编辑弹窗
showEdit() {
this.showPop=false
this.$parent.showEdit()
this.$emit('getEditContact', '')
},
//---展示编辑弹窗，并传值给编辑弹窗
goEdit(obj) {
this.showPop=false
this.$parent.showEdit()
this.$emit('getEditContact', obj)
},
......@@ -165,10 +170,16 @@ export default {
</script>
<style scoped="scoped" lang="scss">
.son-wrap{
height: 100vh;
.list-box{
background: #F5F5F5;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
display: flex;
flex-direction:column;
flex-direction: column;
}
.top-num{
height: 100rpx;
......@@ -179,6 +190,11 @@ export default {
justify-content: center;
font-weight: bold;
font-size: 32rpx;
position: relative;
}
.top-icon{
position: absolute;
right: 24rpx;
}
.top-add {
height:150rpx;
......@@ -201,7 +217,7 @@ export default {
box-shadow:0px 0px 12px 2px rgba(0,0,0,0.08);
}
.bottom {
padding:0 24rpx 80rpx 24rpx;
padding:0 24rpx 100rpx 24rpx;
flex: 1;
overflow-y: scroll;
}
......
pages/scenic/scenicComponents/editContacts.vue
View file @ 3c81b50e
<template>
<view class="editBox" v-show="showEdit">
<view @click="close()" class="return">
<view class="return">
<!-- 新增的时候 -->
<view v-if="!reviseContactId">
已新增{{contactTotal.length}}位联系人
</view>
<view @click="showEdit = false" class="return-icon">
<u-icon name="close" bold></u-icon>
</view>
</view>
<view class="editTop">
</view>
......@@ -39,7 +46,7 @@
<script>
export default {
props: ['editContact'],
props: ['editContact','contactTotal'],
data() {
return {
showEdit: false, //控制组件显示隐藏
......@@ -52,7 +59,6 @@ export default {
watch: {
editContact: {
handler(newValue, oldValue) {
console.log(111)
this.name = newValue.name||''
this.credentialNumber = newValue.credentialNumber||''
this.reviseContactId = newValue.id||''
......@@ -63,10 +69,6 @@ export default {
}
},
methods: {
//---关闭弹窗
close() {
this.showEdit = false
},
//---保存
keepSave() {
if (!this.$commonjs.nameReg().test(this.name)) {
......@@ -113,9 +115,17 @@ export default {
icon:'none'
})
if(!this.reviseContactId){
//新增的时候
this.$parent.addChoose()
//成功之后清空数据，防止下次新增的时候出现之前的数据
this.name = ''
this.credentialNumber = ''
this.phone=''
}
if(this.reviseContactId){
//修改的时候
this.showEdit = false
}
} else {
uni.showToast({
title:res.message,
......@@ -136,15 +146,22 @@ export default {
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
z-index: 1000;
}
.return {
height:100rpx;
padding: 0 24rpx;
background: #FFFFFF;
height: 100rpx;
display: flex;
align-items: center;
justify-content:flex-end;
background: #FFF1E8;
color: #FC771D;
justify-content: center;
font-weight: bold;
font-size: 32rpx;
position: relative;
}
.return-icon{
position: absolute;
right: 24rpx;
}
.editTop {
height:200rpx;
......
pages/scenic/scenicOrder/scenicOrder.vue
View file @ 3c81b50e
This diff is collapsed.
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