Commit 34f47abe authored by 潘永坪's avatar 潘永坪

填写订单页面开发

parent 267bf1ae
...@@ -101,14 +101,36 @@ export default { ...@@ -101,14 +101,36 @@ export default {
textarea { textarea {
box-sizing: border-box; box-sizing: border-box;
} }
.btn { //小按钮
background: linear-gradient(132deg, #ED400C 0%, #FB862C 100%); .btn{
background:linear-gradient(132deg, #ED400C 0%, #FB862C 100%);
display: inline-block; display: inline-block;
color: #FFFFFF; color: #FFFFFF;
font-size: 28rpx; font-size:28rpx;
border-radius: 8rpx; border-radius:8rpx;
text-align: center;
padding: 16rpx 32rpx;
}
//中等按钮
.middle-btn{
background:linear-gradient(132deg, #ED400C 0%, #FB862C 100%);
display: inline-block;
color: #FFFFFF;
font-size:32rpx;
border-radius:12rpx;
text-align: center;
padding: 18rpx 40rpx;
}
//大按钮
.big-btn{
background:linear-gradient(132deg, #ED400C 0%, #FB862C 100%);
display: inline-block;
color: #FFFFFF;
font-size:36rpx;
border-radius:28rpx;
text-align: center; text-align: center;
padding: 10rpx 20rpx; padding: 20rpx 80rpx;
font-weight: bold;
} }
/*单行溢出*/ /*单行溢出*/
......
...@@ -101,6 +101,9 @@ export default{ ...@@ -101,6 +101,9 @@ export default{
idReg:function(){//身份证正则 idReg:function(){//身份证正则
return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/ return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/
}, },
nameReg:function(){//中文名字正则
return /^[\u4E00-\u9FA5]{2,40}$/
},
getUrlKey:function(name,url){//通过连接地址获取参数值 getUrlKey:function(name,url){//通过连接地址获取参数值
return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(url)) || [, ''])[1].replace(/\+/g, '%20') || '' return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(url)) || [, ''])[1].replace(/\+/g, '%20') || ''
}, },
......
<template> <template>
<u-popup :show="showPop" :round="20" @close="showPop=false"> <u-popup :show="showPop" :round="20" @close="showPop=false" closeable>
<view class="son-wrap"> <view class="son-wrap">
<view class="head"> <view class="head">
<view class="head1"> <view class="head1">
<view style="flex: 1;text-align: center;">
购买须知 购买须知
</view>
<u-icon name="close" @click="showPop=false"></u-icon>
</view> </view>
<view class="head2"> <view class="head2">
{{buyKnowData.name}} {{buyKnowData.name}}
...@@ -20,7 +17,7 @@ ...@@ -20,7 +17,7 @@
<view style="flex: 1;overflow-y: scroll;"> <view style="flex: 1;overflow-y: scroll;">
<view class="middle"> <view class="middle">
<view class="middle-list" v-for="(item,a) of buyKnowData.productTitleResVos" :key="a"> <view class="middle-list" v-for="(item,a) of buyKnowData.productTitleData" :key="a">
<view class="middle-title"> <view class="middle-title">
{{item.title}} {{item.title}}
</view> </view>
...@@ -72,7 +69,7 @@ export default { ...@@ -72,7 +69,7 @@ export default {
<style scoped="scoped"> <style scoped="scoped">
.son-wrap{ .son-wrap{
position: relative; position: relative;
height:85vh; height:80vh;
display: flex; display: flex;
flex-direction:column; flex-direction:column;
} }
...@@ -80,7 +77,7 @@ export default { ...@@ -80,7 +77,7 @@ export default {
padding: 0 24rpx; padding: 0 24rpx;
} }
.head1{ .head1{
display: flex; text-align: center;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
padding: 30rpx 0; padding: 30rpx 0;
...@@ -113,8 +110,9 @@ export default { ...@@ -113,8 +110,9 @@ export default {
} }
.middle-content { .middle-content {
display: flex; display: flex;
margin-top: 30rpx; margin-top: 20rpx;
position: relative; position: relative;
line-height: 52rpx;
} }
.middle-content>text { .middle-content>text {
color: #666666; color: #666666;
......
<template> <template>
<!-- 客服 --> <!-- 客服 -->
<u-popup :show="showPop" :round="20" @close="showPop = false"> <u-popup :show="showPop" :round="20" @close="showPop = false" closeable>
<view class="son-wrap"> <view class="son-wrap">
<view class="title"> <view class="title">
<view style="flex: 1; text-align: center"> 客服电话 </view> 客服电话
<u-icon name="close" @click="showPop = false"></u-icon>
</view> </view>
<view class="middle"> <view class="middle">
<view class="list" v-for="(item, index) in scenicList" :key="index" @click="makePhone(item.phone)"> <view class="list" v-for="(item, index) in scenicList" :key="index" @click="makePhone(item.phone)">
...@@ -45,7 +44,7 @@ export default { ...@@ -45,7 +44,7 @@ export default {
flex-direction: column; flex-direction: column;
} }
.title { .title {
display: flex; text-align: center;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
padding: 30rpx; padding: 30rpx;
......
<template> <template>
<!-- 商家详情弹窗 --> <!-- 商家详情弹窗 -->
<u-popup :show="showPop" :round="20" @close="showPop=false"> <u-popup :show="showPop" :round="20" @close="showPop=false" closeable>
<view class="son-wrap"> <view class="son-wrap">
<view class="head"> <view class="head">
<view class="head-name"> {{detailData.name}}
{{detailData.name}}
</view>
<u-icon name="close" @click="showPop=false"></u-icon>
</view> </view>
<view style="flex: 1;overflow-y: scroll;"> <view style="flex: 1;overflow-y: scroll;">
<view v-if="detailData.imgList&&detailData.imgList.length>0"> <view v-if="detailData.imgList&&detailData.imgList.length>0">
...@@ -166,7 +163,7 @@ export default { ...@@ -166,7 +163,7 @@ export default {
flex-direction:column; flex-direction:column;
} }
.head{ .head{
display: flex; text-align: center;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
padding: 30rpx; padding: 30rpx;
......
<template> <template>
<div>
<u-calendar <u-calendar
:show="show" :show="show"
@confirm="onConfirm" @confirm="onConfirm"
...@@ -8,51 +7,37 @@ ...@@ -8,51 +7,37 @@
:defaultDate="defaultDate" :defaultDate="defaultDate"
:formatter='formatter' :formatter='formatter'
ref="calendar2" ref="calendar2"
rowHeight='112'
round='20'
closeOnClickOverlay='true'
></u-calendar> ></u-calendar>
</div>
</template> </template>
<script> <script>
export default { export default {
props: ['dateList'], props: ['dateList'],
watch: { watch: {
dateList:{ dateList:{
handler(newValue, oldValue){ handler(newValue, oldValue){
if(newValue&&newValue.length>0){ if(newValue&&newValue.length>0){
this.maxDate=newValue[newValue.length-1].startTime.substr(0,10) this.maxDate=newValue[newValue.length-1].startTime.substr(0,10)
} }
}, },
deep:true, deep:true,
immediate:true immediate:true
} }
}, },
data() { data() {
return { return {
date: '', //选择的日期
show: false, //控制日历显示隐藏 show: false, //控制日历显示隐藏
defaultDate:'', //默认日期 defaultDate:'', //默认日期
maxDate:'',//最大日期 maxDate:'',//最大日期
} }
}, },
mounted() { //默认为第一天 mounted() {
this.$refs.calendar2.setFormatter(this.formatter) this.$refs.calendar2.setFormatter(this.formatter)
}, },
methods: { methods: {
//---年月日转化
formatDate(date) {
let year = date.getFullYear()
let month = date.getMonth() + 1
if (month < 10) {
month = '0' + month
}
let days = date.getDate()
if (days < 10) {
days = '0' + days
}
let dates = year + '-' + month + '-' + days
return dates
},
//---日期确认事件 //---日期确认事件
onConfirm(date) { onConfirm(date) {
this.show = false this.show = false
...@@ -73,23 +58,16 @@ export default { ...@@ -73,23 +58,16 @@ export default {
//真机调试手极端报错,暂时注释 //真机调试手极端报错,暂时注释
// this.dateList.forEach((item, index) => { // this.dateList.forEach((item, index) => {
// if (item.startTime.substr(0, 10) == dates) { // if (item.startTime.substr(0, 10) == dates) {
// day.bottomInfo = "¥" + item.sellingPrice // day.bottomInfo = '¥' + item.sellingPrice
// day.dot = true // day.dot = true
// } // }
// }) // })
// if (!day.bottomInfo) { // if (!day.bottomInfo) {
// day.type = "disabled" // day.type = 'disabled'
// } // }
return day return day
},
//---设置默认日期方法 }
setDefaultDate(val) {
let dates = val.split('-')
let year = parseInt(dates[0])
let month = parseInt(dates[1]) - 1
let day = parseInt(dates[2])
this.defaultDate = new Date(year, month, day)
},
} }
} }
</script> </script>
......
<template> <template>
<view class="contact-box"> <u-popup :show="showPop" :round="20" @close="showPop=false" closeable>
<u-popup :show="contactsShow" @close="contactsShow=false"> <view class="son-wrap">
<view class="top"> <view class="top">
<u-icon name="close" @click="contactsShow=false"></u-icon> <view class="top-num">
<text>
需填写{{buyNum}}位联系人 需填写{{buyNum}}位联系人
<text v-if="buyNum-chooseContact.length>0"> </view>
,还需 <view @click="showEdit()" class="top-add">
<text class="top-number">{{buyNum-chooseContact.length}}</text>
位出行人
</text>
</text>
<text @click="config()" class="top-sure">
确定
</text>
</view>
<view class="bottom">
<view @click="showEdit()" class="bottom-add">
<text> <text>
+添加旅客信息 +添加旅客信息
</text> </text>
</view> </view>
</view>
<view class="bottom">
<checkbox-group @change="chooseContactChange"> <checkbox-group @change="chooseContactChange">
<view class="bottom-list" v-for="(item,index) of contactData" :key="item.id"> <view class="bottom-list" v-for="(item,index) of contactData" :key="item.id">
<label> <label>
...@@ -32,7 +21,7 @@ ...@@ -32,7 +21,7 @@
<view> <view>
{{item.name}} {{item.name}}
</view> </view>
<view> <view>
<text> <text>
身份证 身份证
...@@ -41,156 +30,156 @@ ...@@ -41,156 +30,156 @@
</view> </view>
</view> </view>
</label> </label>
<view @click="goEdit(item)" style="margin-right:20rpx;"> <view @click="goEdit(item)" style="margin-right:20rpx;">
<u-icon name="edit-pen" color="#3688ff" size="28"></u-icon> <u-icon name="edit-pen" color="#3688ff" size="56"></u-icon>
</view> </view>
<view @click="clickDele(item.id)"> <view @click="clickDele(item.id)">
<u-icon name="trash-fill" color="#3688ff" size="28"></u-icon> <u-icon name="trash-fill" color="#3688ff" size="56"></u-icon>
</view> </view>
</view>
<u-modal :show="showModal" @confirm="confirmDele" @cancel="showModal=false" showCancelButton title="确认删除该联系人" ></u-modal> <view style="margin: 40rpx 0;text-align: center;" v-if='contactData&&contactData.length>0'>
已展示所有联系人
</view> </view>
</checkbox-group> </checkbox-group>
<view class="bottom-sure">
确定
</view>
</view> </view>
</u-popup> </view>
</view> <u-modal :show="showModal" @confirm="confirmDele" @cancel="showModal=false" showCancelButton title="确认删除该联系人" ></u-modal>
</u-popup>
</template> </template>
<script> <script>
export default { export default {
props: ["contactData", "orderTouristList", "buyNum"], props: ['contactData', 'orderTouristList', 'buyNum'],
watch: { watch: {
orderTouristList: { orderTouristList: {
handler(newValue, oldValue) { handler(newValue, oldValue) {
if (newValue) { if (newValue) {
this.chooseContact = this.orderTouristList this.chooseContact = this.orderTouristList
} }
}, },
deep: true, deep: true,
immediate: true immediate: true
} }
}, },
data() { data() {
return { return {
contactsShow: false, //控制联系人弹窗显示隐藏 showPop: false, //控制联系人弹窗显示隐藏
chooseContact: [], //选中的联系人 chooseContact: [], //选中的联系人
showModal: false, //确认弹窗显示隐藏 showModal: false, //确认弹窗显示隐藏
contactId:'',//删除联系人的Id contactId:'',//删除联系人的Id
} }
}, },
methods: { methods: {
//---点击新增,展示编辑联系人弹窗,并传空值给编辑弹窗 //---点击新增,展示编辑联系人弹窗,并传空值给编辑弹窗
showEdit() { showEdit() {
this.contactsShow=false this.showPop=false
this.$parent.showEdit() this.$parent.showEdit()
this.$emit("getEditContact", "") this.$emit('getEditContact', '')
}, },
//---展示编辑弹窗,并传值给编辑弹窗 //---展示编辑弹窗,并传值给编辑弹窗
goEdit(obj) { goEdit(obj) {
this.contactsShow=false this.showPop=false
this.$parent.showEdit() this.$parent.showEdit()
this.$emit("getEditContact", obj) this.$emit('getEditContact', obj)
}, },
//---确定选中的联系人 //---确定选中的联系人
config() { config() {
this.contactsShow = false this.showPop = false
this.$emit("contactListConfig", this.chooseContact) this.$emit('contactListConfig', this.chooseContact)
}, },
//---联系人姓名变化 //---联系人姓名变化
chooseContactChange(e){ chooseContactChange(e){
let value=e.detail.value let value=e.detail.value
let arr=[] let arr=[]
value.forEach(item=>{ value.forEach(item=>{
arr.push(JSON.parse(item)) arr.push(JSON.parse(item))
}) })
this.chooseContact=arr this.chooseContact=arr
if (arr.length == this.buyNum) { //当选择的人数等于需要填的人数时关闭弹窗 if (arr.length > this.buyNum) {
this.config() arr.shift()
} }
if (arr.length > this.buyNum) { },
arr.shift() //---点击删除
this.config() clickDele(id) {
} this.showModal = true
}, this.contactId=id
//---点击删除 },
clickDele(id) { //---确认删除
this.showModal = true confirmDele(){
this.contactId=id let data={
}, id:this.contactId
//---确认删除 }
confirmDele(){ this.$request('wechatUser/contact/deleteContact', data).then((res) => {
let data={ if (res.code == '00') {
id:this.contactId uni.showToast({
} title:'删除成功',
this.$request('wechatUser/contact/deleteContact', data).then((res) => { icon:'none'
if (res.code == '00') { })
uni.showToast({ this.showModal = false
title:'删除成功', this.showPop=false
icon:'none' this.$parent.getContactList()
}) } else {
this.showModal = false uni.showToast({
this.contactsShow=false title:res.message,
this.$parent.getContactList() icon:'none'
} else { })
uni.showToast({ }
title:res.message, }).catch(() => {
icon:'none' this.showModal = false
}) })
} }
}).catch(() => { }
this.showModal = false }
})
}
}
}
</script> </script>
<style scoped="scoped" lang="scss"> <style scoped="scoped" lang="scss">
.top { .son-wrap{
height:100rpx; height: 100vh;
display: flex; display: flex;
justify-content: space-between; flex-direction:column;
background: #f0f0f0;
align-items: center;
padding: 0 24rpx;
} }
.top-sure { .top-num{
color: var(--main-color); height: 100rpx;
font-size: 28rpx; display: flex;
} align-items: center;
.top-number{ background: #FFF1E8;
color: #f9690e; color: #FC771D;
justify-content: center;
font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
font-weight:bold;
} }
.top-add {
.bottom { height:150rpx;
padding:0 24rpx 80rpx 24rpx;
}
.bottom-add {
height:130rpx;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid #e6e6e6;
width: 100%;
justify-content: center; justify-content: center;
border-bottom: 1px solid #e6e6e6;
padding: 0 24rpx;
background: #ECF3FE;
} }
.top-add text{
.bottom-add text{
width:280rpx;
height: 65rpx;
text-align: center;
line-height:65rpx;
border: 1px solid var(--main-color);
color:var(--main-color);
display: inline-block; display: inline-block;
width:100%;
height: 76rpx;
text-align: center;
line-height:76rpx;
border: 1px solid $theme;
color:$theme;
border-radius:5rpx; border-radius:5rpx;
box-shadow:0px 0px 12px 2px rgba(0,0,0,0.08);
}
.bottom {
padding:0 24rpx 80rpx 24rpx;
flex: 1;
overflow-y: scroll;
} }
.bottom-list{ .bottom-list{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -198,29 +187,38 @@ ...@@ -198,29 +187,38 @@
border-bottom: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6;
padding:25rpx 0; padding:25rpx 0;
} }
.bottom-list label { .bottom-list label {
display: flex; display: flex;
flex: 1; flex: 1;
align-items: center; align-items: center;
} }
.bottom-content { .bottom-content {
flex: 1; flex: 1;
margin-left: 40rpx; margin-left: 40rpx;
} }
.bottom-content view { .bottom-content view {
font-size:28rpx; font-size:28rpx;
color: #666666; color: #666666;
} }
.bottom-content view:not(:first-child) { .bottom-content view:not(:first-child) {
margin-top: 10rpx; margin-top: 10rpx;
} }
.bottom-content view text { .bottom-content view text {
display: inline-block; display: inline-block;
width: 100rpx; width: 100rpx;
} }
.bottom-sure{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
background: #3688ff;
font-size:32rpx;
font-weight: bold;
color: #ffffff;
}
</style> </style>
<template> <template>
<view> <u-popup :show="show" :round="20" @close="show = false" closeable>
<u-popup :show="show" :round="10" closeable @close="show=false"> <view class="son-wrap">
<view class="detail"> <view class="detail-title">
<view class="detail-title"> 订单明细
费用明细 </view>
</view>
<view class="detail-content">
<view class="content-box">
<text>
{{merchantName}}({{name}})
</text>
<view class="content-right"> <view style="flex: 1; overflow-y: scroll">
<view>¥{{sellingPrice}}x{{buyNum}}</view> <view class="content-box">
<view v-if="productDepositTotal">押金:{{productDepositTotal}}</view> <text> {{ merchantName }}({{ name }}) </text>
</view>
</view>
<!-- ---------------------------------------额外服务------------------------------------------- -->
<view class="content-box" v-for="(item,index) of choooseServiceData" :key="index">
<text>
{{item.name}}
</text>
<view class="content-right"> <view class="content-right">
<view>¥{{item.sellingPrice}}x{{buyNum}}</view> <view>¥{{ sellingPrice }}x{{ buyNum }}</view>
<view v-if="item.depositTotal">押金:{{item.depositTotal}}</view> <view v-if="productDepositTotal">押金:{{ productDepositTotal }}</view>
</view>
</view> </view>
<view class="content-box" v-if="chooseCouponObj&&chooseCouponObj.savedMoney>0"> </view>
<text> <!-- ---------------------------------------额外服务------------------------------------------- -->
<view class="content-box" v-for="(item, index) of choooseServiceData" :key="index">
</text> <text>
{{ item.name }}
</text>
<text class="content-right"> <view class="content-right">
{{parseFloat(chooseCouponObj.savedMoney.toFixed(2))}} <view>¥{{ item.sellingPrice }}x{{ buyNum }}</view>
</text> <view v-if="item.depositTotal">押金:{{ item.depositTotal }}</view>
</view> </view>
</view>
<view class="content-box" v-if="chooseCouponObj && chooseCouponObj.savedMoney > 0">
<text></text>
<view class="content-box content-total"> <text class="content-right">{{ parseFloat(chooseCouponObj.savedMoney.toFixed(2)) }} </text>
<text> </view>
合计
</text>
<text class="content-right"> <view class="content-box content-total">
¥<text style="font-size:36rpx;">{{sellTotal}}</text> <text> 合计 </text>
</text>
</view> <text class="content-right">
¥<text style="font-size: 36rpx">{{ sellTotal }}</text>
</text>
</view> </view>
</view> </view>
</u-popup> </view>
</view> </u-popup>
</template> </template>
<script> <script>
export default { export default {
props: ["merchantName", "name", "buyNum", "sellingPrice", "productDepositTotal", "chooseCouponObj", "choooseService"], props: ['merchantName', 'name', 'buyNum', 'sellingPrice', 'productDepositTotal', 'chooseCouponObj', 'choooseService'],
watch: { watch: {
choooseService: { choooseService: {
handler(newValue, oldValue) { handler(newValue, oldValue) {
if (newValue) { if (newValue) {
this.choooseServiceData = this.choooseService this.choooseServiceData = this.choooseService
}
} },
}, deep: false,
deep: false, immediate: false
immediate: false }
} },
}, data() {
data() { return {
return { show: false, //控制弹窗显示隐藏
show: false, //控制弹窗显示隐藏 extraPrice: 0, //额外服务价格
extraPrice: 0, //额外服务价格 depositTotal: 0, //额外服务总押金
depositTotal: 0, //额外服务总押金 choooseServiceData: [] //选中的服务
choooseServiceData: [], //选中的服务 }
} },
}, computed: {
computed: { sellTotal() {
sellTotal() { //卖价总价 //卖价总价
let savedMoney=0 let savedMoney = 0
if(this.chooseCouponObj){ if (this.chooseCouponObj) {
savedMoney = this.chooseCouponObj.savedMoney savedMoney = this.chooseCouponObj.savedMoney
} }
if (this.choooseServiceData.length > 0) { //额外服务价格 if (this.choooseServiceData.length > 0) {
let singleMoney = 0 //单个产品总押金,用于算出总押金 //额外服务价格
this.extraPrice = 0 let singleMoney = 0 //单个产品总押金,用于算出总押金
this.depositTotal = 0 //总押金 this.extraPrice = 0
for (let i = 0; i < this.choooseServiceData.length; i++) { this.depositTotal = 0 //总押金
this.extraPrice += parseFloat((this.choooseServiceData[i].sellingPrice * this.buyNum).toFixed(2)) for (let i = 0; i < this.choooseServiceData.length; i++) {
if (this.choooseServiceData[i].depositType == 1) { //---------------------------------------------------------------------------等于1,押金金额跟数量没关系 this.extraPrice += parseFloat((this.choooseServiceData[i].sellingPrice * this.buyNum).toFixed(2))
singleMoney = this.choooseServiceData[i].deposit if (this.choooseServiceData[i].depositType == 1) {
this.choooseServiceData[i].depositTotal = this.choooseServiceData[i].deposit //单个产品总押金 //等于1,押金金额跟数量没关系
} else if (this.choooseServiceData[i].depositType == 2) { //----------------------------------------------------------------------等于2,押金单价乘购买数量 singleMoney = this.choooseServiceData[i].deposit
singleMoney = parseFloat((this.choooseServiceData[i].deposit * this.buyNum).toFixed(2)) this.choooseServiceData[i].depositTotal = this.choooseServiceData[i].deposit //单个产品总押金
this.choooseServiceData[i].depositTotal = parseFloat((this.choooseServiceData[i].deposit * this.buyNum).toFixed(2)) //单个产品总押金 } else if (this.choooseServiceData[i].depositType == 2) {
} //等于2,押金单价乘购买数量
this.depositTotal += singleMoney singleMoney = parseFloat((this.choooseServiceData[i].deposit * this.buyNum).toFixed(2))
} this.choooseServiceData[i].depositTotal = parseFloat((this.choooseServiceData[i].deposit * this.buyNum).toFixed(2)) //单个产品总押金
} else { }
this.extraPrice = 0 this.depositTotal += singleMoney
this.depositTotal = 0 }
} } else {
return parseFloat((this.sellingPrice * this.buyNum + this.extraPrice + this.depositTotal + this.productDepositTotal - savedMoney).toFixed(2)) this.extraPrice = 0
} this.depositTotal = 0
}, }
return parseFloat((this.sellingPrice * this.buyNum + this.extraPrice + this.depositTotal + this.productDepositTotal - savedMoney).toFixed(2))
}
},
methods: { methods: {}
}
}
}
</script> </script>
<style scoped="scoped"> <style scoped="scoped">
.detail-title { .son-wrap {
height:120rpx; position: relative;
display: flex; height: 65vh;
align-items: center; display: flex;
justify-content: center; flex-direction: column;
font-size: 32rpx; }
border-bottom:var(--border-bottom); .detail-title {
} text-align: center;
.content-box { font-size: 32rpx;
padding: 0 30rpx; font-weight: bold;
border-bottom: 1px solid #f0f0f0; padding: 30rpx 24rpx;
height: 120rpx; border-radius: 20rpx 20rpx 0 0;
display: flex; }
justify-content: space-between; .content-box {
align-items: center; padding: 0 30rpx;
font-size:28rpx; border-bottom: 1px solid #f0f0f0;
} height: 120rpx;
.content-right{ display: flex;
text-align: right; justify-content: space-between;
flex-shrink: 0; align-items: center;
margin-left: 20rpx; font-size: 28rpx;
} }
.content-total { .content-right {
color: #f45803; text-align: right;
font-weight: bolder; flex-shrink: 0;
font-size:32rpx; margin-left: 20rpx;
} }
.content-total {
color: #f45803;
font-weight: bolder;
font-size: 32rpx;
}
</style> </style>
<template> <template>
<u-popup :show="show" :round="10" closeable @close="show=false"> <u-popup :show="showPop" :round="20" @close="showPop=false" closeable>
<view class="time"> <view class="son-wrap">
<view class="time-title"> <view class="time-title">
时间选择 时间选择
</view> </view>
<view class="time-content" v-if="chooseTimeList&&chooseTimeList.length>0"> <view style="flex: 1;overflow-y: scroll;padding: 0 30rpx;">
<!--库存大于零并且当前时间小于班次的开始时间才显示--> <view class="time-content" v-if="chooseTimeList&&chooseTimeList.length>0">
<view <!--库存大于零并且当前时间小于班次的开始时间才显示-->
class='time-list' <view class='time-list'
v-for="(item,index) of chooseTimeList" v-for="(item,index) of chooseTimeList"
:class="{on:active==index}" :class="{on:active==index}"
@click="chooseTime(index)" @click="chooseTime(index)"
:key="index" v-if="item.last>0" :key="index" v-if="item.last>0">
> <view>
<view> {{item.startPlanTime?item.startPlanTime.substr(0,5):""}}
{{item.startPlanTime?item.startPlanTime.substr(0,5):""}} <text v-if="item.endPlanTime">-</text>
<text v-if="item.endPlanTime">-</text> {{item.endPlanTime?item.endPlanTime.substr(0,5):""}}
{{item.endPlanTime?item.endPlanTime.substr(0,5):""}} </view>
</view> <view>
<view> 剩余:{{item.last}}
剩余:{{item.last}} </view>
</view> </view>
</view>
<view style="padding: 0.5rem 0rem;color: #FF0000;" v-else>
空空如也...
</view>
<view class="time-sure">
<text class="big-btn" @click="confirm()">确定</text>
</view> </view>
</view> </view>
<view style="padding: 0.5rem 0rem;color: #FF0000;" v-else>
空空如也...
</view>
<view class="time-sure">
<text class="big-btn" @click="confirm()">确定</text>
</view>
</view> </view>
</u-popup> </u-popup>
</template> </template>
<script> <script>
export default { export default {
props: ["chooseTimeList", "chooseTimeData", "timeActive"], props: ['chooseTimeList', 'chooseTimeData', 'timeActive'],
watch: { watch: {
timeActive: { //父组件选中的下标 timeActive: { //父组件选中的下标
handler(newValue, oldValue) { handler(newValue, oldValue) {
if (newValue >= 0) { if (newValue >= 0) {
this.active = newValue this.active = newValue
} }
}, },
deep: false, deep: false,
immediate: false immediate: false
}, },
}, },
data() { data() {
return { return {
show: false, //控制该组件显示隐藏 showPop: false, //控制该组件显示隐藏
active: 10000, //默认不选中 active: 10000, //默认不选中
times: "", //时间 times: '', //时间
timeNumber: "", //当前时间转化为数字 timeNumber: '', //当前时间转化为数字
} }
}, },
methods: { methods: {
//---时间选择
//---时间选择 chooseTime(i) {
chooseTime(i) { this.active = i
this.active = i this.times = this.chooseTimeList[i].startPlanTime
this.times = this.chooseTimeList[i].startPlanTime },
}, //---时间确认事件
//---时间确认事件 confirm(date) {
confirm(date) { this.showPop = false
this.show = false; this.$emit('timeConfig', this.times)
this.$emit("timeConfig", this.times) },
}, },
}, mounted() {
mounted() { let times = new Date().Format('yyyy-MM-dd hh:mm:ss')
let times = new Date().Format("yyyy-MM-dd hh:mm:ss") this.timeNumber = parseInt(this.$commonjs.changeTime(times))
this.timeNumber = parseInt(this.$commonjs.changeTime(times)) }
} }
}
</script> </script>
<style scoped="scoped"> <style scoped="scoped" lang="scss">
.time { .son-wrap {
padding:30rpx 20rpx 60rpx 20rpx; position: relative;
text-align: center; height:65vh;
display: flex;
flex-direction:column;
} }
.time-title{ .time-title{
font-size:32rpx; text-align: center;
font-weight: bolder; font-size: 32rpx;
font-weight: bold;
padding: 30rpx 24rpx;
border-radius: 20rpx 20rpx 0 0;
} }
.time-content { .time-content {
...@@ -120,12 +124,13 @@ ...@@ -120,12 +124,13 @@
.time-list.on { .time-list.on {
background: none; background: none;
color: #3dbcff; color: $theme;
border: 1px solid #3dbcff; border: 1px solid $theme;
box-sizing: border-box; box-sizing: border-box;
} }
.time-sure{ .time-sure{
margin-top: 30rpx; margin-top:60rpx;
text-align: center;
} }
</style> </style>
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
<view class="middle1Time" v-if="productIfo.productType == 3"> <view class="middle1Time" v-if="productIfo.productType == 3">
<text> 游玩时间 </text> <text> 游玩时间 </text>
<scroll-view class="time-content" scroll-x="true" :scroll-left="timeScroll" v-if="timeList > 0"> <scroll-view class="time-content" scroll-x="true" :scroll-left="timeScroll" v-if="timeList.length> 0">
<view class="time-list" v-for="(item, index) of timeList" @click="chooseTime(index)" :class="{ on: timeActive == index }" :key="index"> <view class="time-list" v-for="(item, index) of timeList" @click="chooseTime(index)" :class="{ on: timeActive == index }" :key="index">
<view> <view>
{{ item.startPlanTime ? item.startPlanTime.substr(0, 5) : '' }} {{ item.startPlanTime ? item.startPlanTime.substr(0, 5) : '' }}
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
<view class="visitorEdit" v-show="orderTouristList.length > 0"> <view class="visitorEdit" v-show="orderTouristList.length > 0">
<view class="edit-list" v-for="(item, index) of orderTouristList" :key="item.id"> <view class="edit-list" v-for="(item, index) of orderTouristList" :key="item.id">
<view @click="delChooseContact(item, index)"> <view @click="delChooseContact(item, index)">
<u-icon name="close-circle" color="#3688ff" size="20"></u-icon> <u-icon name="close-circle" color="#3688ff" size="40"></u-icon>
</view> </view>
<view> <view>
...@@ -183,7 +183,7 @@ ...@@ -183,7 +183,7 @@
</view> </view>
<view @click="showEdit(item)"> <view @click="showEdit(item)">
<u-icon name="edit-pen-fill" color="#3688ff" size="24"></u-icon> <u-icon name="edit-pen-fill" color="#3688ff" size="48"></u-icon>
</view> </view>
</view> </view>
</view> </view>
...@@ -600,7 +600,7 @@ export default { ...@@ -600,7 +600,7 @@ export default {
}, },
//---展示更多时间 //---展示更多时间
showTime() { showTime() {
this.$refs.times.show = true this.$refs.times.showPop = true
}, },
//---时间选择 //---时间选择
chooseTime(i) { chooseTime(i) {
...@@ -620,12 +620,9 @@ export default { ...@@ -620,12 +620,9 @@ export default {
if (index > -1) { if (index > -1) {
//子组件点击确认之后有选择的时间 //子组件点击确认之后有选择的时间
this.chooseTime(index) //选中确认的日期 this.chooseTime(index) //选中确认的日期
this.docQuery this.docQuery.selectAll('.time-list').boundingClientRect(data => {
.selectAll('.time-list') this.timeScroll = (data[index].width + 4) * index
.boundingClientRect(data => { }).exec()
this.timeScroll = (data[index].width + 4) * index
})
.exec()
} }
}, },
//---获取点击的编辑联系人信息,传给编辑联系人组件 //---获取点击的编辑联系人信息,传给编辑联系人组件
...@@ -675,7 +672,7 @@ export default { ...@@ -675,7 +672,7 @@ export default {
}, },
//---展示新增联系人,并获取联系人列表 //---展示新增联系人,并获取联系人列表
showContacts() { showContacts() {
this.$refs.contactList.contactsShow = true this.$refs.contactList.showPop = true
}, },
//---游客选择 //---游客选择
visitorChoose(i) { visitorChoose(i) {
...@@ -719,7 +716,7 @@ export default { ...@@ -719,7 +716,7 @@ export default {
}, },
//---展示购票须知 //---展示购票须知
showBuyKnow() { showBuyKnow() {
this.$refs.buyKnow.buyKnowShow = true this.$refs.buyKnow.showPop = true
}, },
//---页面初始化数据,获取产品基本信息 //---页面初始化数据,获取产品基本信息
initData() { initData() {
...@@ -748,6 +745,9 @@ export default { ...@@ -748,6 +745,9 @@ export default {
this.merchantId = res.data.merchantId //重新赋值商户id this.merchantId = res.data.merchantId //重新赋值商户id
this.beforeBookDays = res.data.beforeBookDays || 0 //提前预定天数 this.beforeBookDays = res.data.beforeBookDays || 0 //提前预定天数
this.buyKnowData = res.data //购买须知,传给子组件 this.buyKnowData = res.data //购买须知,传给子组件
setTimeout(()=>{
console.log(this.buyKnowData)
},5000)
this.loadProductResVoList = res.data.loadProductResVoList //额外服务 this.loadProductResVoList = res.data.loadProductResVoList //额外服务
this.afterBuyUrl = res.data.afterBuyUrl || '' //支付成功后页面跳转 this.afterBuyUrl = res.data.afterBuyUrl || '' //支付成功后页面跳转
//this.choooseService=res.data.data.loadProductResVoList//默认全部选中 //this.choooseService=res.data.data.loadProductResVoList//默认全部选中
...@@ -887,6 +887,7 @@ export default { ...@@ -887,6 +887,7 @@ export default {
this.$request('distribution/distribution/getTimeStock', data).then(res => { this.$request('distribution/distribution/getTimeStock', data).then(res => {
if (res.code == '00') { if (res.code == '00') {
this.timeList = res.data this.timeList = res.data
console.log(this.timeList)
this.timeList.forEach((item, index) => { this.timeList.forEach((item, index) => {
//增加一个时间Number字段,用于判断当前时间大于班次结束时间时,不显示该班次 //增加一个时间Number字段,用于判断当前时间大于班次结束时间时,不显示该班次
item.timeNumber = parseInt(this.$commonjs.changeTime(item.planDate.substr(0, 10) + item.endPlanTime)) item.timeNumber = parseInt(this.$commonjs.changeTime(item.planDate.substr(0, 10) + item.endPlanTime))
...@@ -1384,7 +1385,7 @@ export default { ...@@ -1384,7 +1385,7 @@ export default {
flex-shrink: 0; flex-shrink: 0;
width: 100rpx; width: 100rpx;
height: 90rpx; height: 90rpx;
border: 1px solid var(--main-color); border: 1px solid $theme;
border-radius: 10rpx; border-radius: 10rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -1436,8 +1437,8 @@ export default { ...@@ -1436,8 +1437,8 @@ export default {
.time-list.on { .time-list.on {
background: none; background: none;
color: var(--main-color); color: $theme;
border: 1px solid var(--main-color); border: 1px solid $theme;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -1445,7 +1446,7 @@ export default { ...@@ -1445,7 +1446,7 @@ export default {
flex-shrink: 0; flex-shrink: 0;
width: 100rpx; width: 100rpx;
height: 90rpx; height: 90rpx;
border: 1px solid var(--main-color); border: 1px solid $theme;
border-radius: 10rpx; border-radius: 10rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -1454,7 +1455,7 @@ export default { ...@@ -1454,7 +1455,7 @@ export default {
.time-more-content { .time-more-content {
margin: 0 4rpx; margin: 0 4rpx;
color: var(--main-color); color: $theme;
} }
.no-time { .no-time {
...@@ -1533,15 +1534,15 @@ export default { ...@@ -1533,15 +1534,15 @@ export default {
} }
.plus-list-last { .plus-list-last {
color: var(--main-color); color: $theme;
background: #efefef; background: #efefef;
width: 160rpx; width: 160rpx;
border: none; border: none;
} }
.plus-list.on { .plus-list.on {
border: 1px solid var(--main-color); border: 1px solid $theme;
color: var(--main-color); color: $theme;
} }
.visitorEdit { .visitorEdit {
......
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<u-icon <u-icon
name="close" name="close"
color="#909399" color="#909399"
size="18" size="36"
bold bold
></u-icon> ></u-icon>
</view> </view>
...@@ -45,9 +45,9 @@ ...@@ -45,9 +45,9 @@
</template> </template>
<script> <script>
import props from './props.js'; import props from './props.js'
/** /**
* popup 弹窗 * popup 弹窗
* @description 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义 * @description 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义
* @tutorial https://www.uviewui.com/components/popup.html * @tutorial https://www.uviewui.com/components/popup.html
...@@ -71,158 +71,158 @@ ...@@ -71,158 +71,158 @@
* @event {Function} close 弹出层收起 * @event {Function} close 弹出层收起
* @example <u-popup v-model="show"><text>出淤泥而不染,濯清涟而不妖</text></u-popup> * @example <u-popup v-model="show"><text>出淤泥而不染,濯清涟而不妖</text></u-popup>
*/ */
export default { export default {
name: 'u-popup', name: 'u-popup',
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
data() { data() {
return { return {
overlayDuration: this.duration + 50 overlayDuration: this.duration + 50
} }
}, },
watch: { watch: {
show(newValue, oldValue) { show(newValue, oldValue) {
if (newValue === true) { if (newValue === true) {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
const children = this.$children const children = this.$children
this.retryComputedComponentRect(children) this.retryComputedComponentRect(children)
// #endif // #endif
} }
} }
}, },
computed: { computed: {
transitionStyle() { transitionStyle() {
const style = { const style = {
zIndex: this.zIndex, zIndex: this.zIndex,
position: 'fixed', position: 'fixed',
display: 'flex', display: 'flex',
} }
style[this.mode] = 0 style[this.mode] = 0
if (this.mode === 'left') { if (this.mode === 'left') {
return uni.$u.deepMerge(style, { return uni.$u.deepMerge(style, {
bottom: 0, bottom: 0,
top: 0, top: 0,
}) })
} else if (this.mode === 'right') { } else if (this.mode === 'right') {
return uni.$u.deepMerge(style, { return uni.$u.deepMerge(style, {
bottom: 0, bottom: 0,
top: 0, top: 0,
}) })
} else if (this.mode === 'top') { } else if (this.mode === 'top') {
return uni.$u.deepMerge(style, { return uni.$u.deepMerge(style, {
left: 0, left: 0,
right: 0 right: 0
}) })
} else if (this.mode === 'bottom') { } else if (this.mode === 'bottom') {
return uni.$u.deepMerge(style, { return uni.$u.deepMerge(style, {
left: 0, left: 0,
right: 0, right: 0,
}) })
} else if (this.mode === 'center') { } else if (this.mode === 'center') {
return uni.$u.deepMerge(style, { return uni.$u.deepMerge(style, {
alignItems: 'center', alignItems: 'center',
'justify-content': 'center', 'justify-content': 'center',
top: 0, top: 0,
left: 0, left: 0,
right: 0, right: 0,
bottom: 0 bottom: 0
}) })
} }
}, },
contentStyle() { contentStyle() {
const style = {} const style = {}
// 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置 // 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
// 不使用css方案,是因为nvue不支持css的iPhoneX安全区查询属性 // 不使用css方案,是因为nvue不支持css的iPhoneX安全区查询属性
const { const {
safeAreaInsets safeAreaInsets
} = uni.$u.sys() } = uni.$u.sys()
if (this.mode !== 'center') { if (this.mode !== 'center') {
style.flex = 1 style.flex = 1
} }
// 背景色,一般用于设置为transparent,去除默认的白色背景 // 背景色,一般用于设置为transparent,去除默认的白色背景
if (this.bgColor) { if (this.bgColor) {
style.backgroundColor = this.bgColor style.backgroundColor = this.bgColor
} }
if(this.round) { if(this.round) {
const value = uni.$u.addUnit(this.round) const value = uni.$u.addUnit(this.round)
if(this.mode === 'top') { if(this.mode === 'top') {
style.borderBottomLeftRadius = value style.borderBottomLeftRadius = value
style.borderBottomRightRadius = value style.borderBottomRightRadius = value
} else if(this.mode === 'bottom') { } else if(this.mode === 'bottom') {
style.borderTopLeftRadius = value style.borderTopLeftRadius = value
style.borderTopRightRadius = value style.borderTopRightRadius = value
} else if(this.mode === 'center') { } else if(this.mode === 'center') {
style.borderRadius = value style.borderRadius = value
} }
} }
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
}, },
position() { position() {
if (this.mode === 'center') { if (this.mode === 'center') {
return this.zoom ? 'fade-zoom' : 'fade' return this.zoom ? 'fade-zoom' : 'fade'
} }
if (this.mode === 'left') { if (this.mode === 'left') {
return 'slide-left' return 'slide-left'
} }
if (this.mode === 'right') { if (this.mode === 'right') {
return 'slide-right' return 'slide-right'
} }
if (this.mode === 'bottom') { if (this.mode === 'bottom') {
return 'slide-up' return 'slide-up'
} }
if (this.mode === 'top') { if (this.mode === 'top') {
return 'slide-down' return 'slide-down'
} }
}, },
}, },
methods: { methods: {
// 点击遮罩 // 点击遮罩
overlayClick() { overlayClick() {
if (this.closeOnClickOverlay) { if (this.closeOnClickOverlay) {
this.$emit('close') this.$emit('close')
} }
}, },
close(e) { close(e) {
this.$emit('close') this.$emit('close')
}, },
afterEnter() { afterEnter() {
this.$emit('open') this.$emit('open')
}, },
clickHandler() { clickHandler() {
// 由于中部弹出时,其u-transition占据了整个页面相当于遮罩,此时需要发出遮罩点击事件,是否无法通过点击遮罩关闭弹窗 // 由于中部弹出时,其u-transition占据了整个页面相当于遮罩,此时需要发出遮罩点击事件,是否无法通过点击遮罩关闭弹窗
if(this.mode === 'center') { if(this.mode === 'center') {
this.overlayClick() this.overlayClick()
} }
this.$emit('click') this.$emit('click')
}, },
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
retryComputedComponentRect(children) { retryComputedComponentRect(children) {
// 组件内部需要计算节点的组件 // 组件内部需要计算节点的组件
const names = ['u-calendar-month', 'u-album', 'u-collapse-item', 'u-dropdown', 'u-index-item', 'u-index-list', const names = ['u-calendar-month', 'u-album', 'u-collapse-item', 'u-dropdown', 'u-index-item', 'u-index-list',
'u-line-progress', 'u-list-item', 'u-rate', 'u-read-more', 'u-row', 'u-row-notice', 'u-scroll-list', 'u-line-progress', 'u-list-item', 'u-rate', 'u-read-more', 'u-row', 'u-row-notice', 'u-scroll-list',
'u-skeleton', 'u-slider', 'u-steps-item', 'u-sticky', 'u-subsection', 'u-swipe-action-item', 'u-tabbar', 'u-skeleton', 'u-slider', 'u-steps-item', 'u-sticky', 'u-subsection', 'u-swipe-action-item', 'u-tabbar',
'u-tabs', 'u-tooltip' 'u-tabs', 'u-tooltip'
] ]
// 历遍所有的子组件节点 // 历遍所有的子组件节点
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
const child = children[i] const child = children[i]
// 拿到子组件的子组件 // 拿到子组件的子组件
const grandChild = child.$children const grandChild = child.$children
// 判断如果在需要重新初始化的组件数组中名中,并且存在init方法的话,则执行 // 判断如果在需要重新初始化的组件数组中名中,并且存在init方法的话,则执行
if (names.includes(child.$options.name) && typeof child?.init === 'function') { if (names.includes(child.$options.name) && typeof child?.init === 'function') {
// 需要进行一定的延时,因为初始化页面需要时间 // 需要进行一定的延时,因为初始化页面需要时间
uni.$u.sleep(50).then(() => { uni.$u.sleep(50).then(() => {
child.init() child.init()
}) })
} }
// 如果子组件还有孙组件,进行递归历遍 // 如果子组件还有孙组件,进行递归历遍
if (grandChild.length) { if (grandChild.length) {
this.retryComputedComponentRect(grandChild) this.retryComputedComponentRect(grandChild)
} }
} }
} }
// #endif // #endif
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
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