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.
695 lines
17 KiB
695 lines
17 KiB
<template>
|
|
<view class="payOrder">
|
|
<mNavbar title="确认订单" :leftClick="leftClick" />
|
|
|
|
<view class="bac"></view>
|
|
|
|
<view class="box">
|
|
<view class="server-item">
|
|
|
|
<view class="img-box">
|
|
<image :src="projectDetail.image" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<view class="server-info">
|
|
|
|
<view class="server-title">{{ projectDetail.title }}</view>
|
|
|
|
<view class="time-coupon">
|
|
<image src="@/static/home/time-icon.png"></image>
|
|
<view class="time">{{ projectDetail.times }}分钟</view>
|
|
</view>
|
|
|
|
<!-- <view class="price">
|
|
<view class="current-price">
|
|
<text class="unit">￥</text>299
|
|
</view>
|
|
<view class="original-price">
|
|
<text class="unit">￥</text>399
|
|
</view>
|
|
</view> -->
|
|
<!-- <view class="coupon">{{ projectDetail.subTitle }}</view> -->
|
|
<view class="sales-volume">
|
|
<image src="@/static/icons/icon1.png"></image>
|
|
<view class="desc">已售出 {{ projectDetail.payNum }}+ 单</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<van-cell-group>
|
|
<van-cell title="请选择地址" is-Link @click="selectAddressPopupShow = true"
|
|
:value="(address.name + address.phone + address.addressDetail) || ''">
|
|
<template #icon>
|
|
<image class="icon" src="../../static/payOrder/7.png" mode="aspectFill"></image>
|
|
</template>
|
|
</van-cell>
|
|
|
|
<van-cell title="服务技师">
|
|
|
|
<text style="color: #4899a6;">{{ technicianDetail.title }}</text>
|
|
|
|
<template #icon>
|
|
<image class="icon" src="../../static/payOrder/1.png" mode="aspectFill"></image>
|
|
</template>
|
|
|
|
</van-cell>
|
|
|
|
<van-cell title="服务时间" is-Link @click="onServiceTime">
|
|
|
|
<text style="color: #4899a6;">
|
|
{{ time.timeName ? (dateObj.format('MM-DD') + ' ' + time.timeName) : '' }}
|
|
</text>
|
|
|
|
<template #icon>
|
|
<image class="icon" src="../../static/payOrder/3.png" mode="aspectFill"></image>
|
|
</template>
|
|
|
|
</van-cell>
|
|
|
|
<van-cell title="出行方式">
|
|
<text style="color: #fff;
|
|
background-color: #6fc6ad;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
font-size: 12px;">出租车</text>
|
|
<template #icon>
|
|
<image class="icon" src="../../static/payOrder/2.png" mode=""></image>
|
|
</template>
|
|
</van-cell>
|
|
|
|
<!-- <van-cell title="出行费用">
|
|
<text>￥{{ temp }}</text>
|
|
<template #icon>
|
|
<image class="icon" src="../../static/payOrder/2.png" mode="aspectFill"></image>
|
|
</template>
|
|
</van-cell> -->
|
|
|
|
<view class="mileage">
|
|
<view class="top">
|
|
全程共
|
|
<text style="color: #4899a6;
|
|
font-size: 16px;">{{ distance || 0}}</text>
|
|
公里
|
|
</view>
|
|
<view class="info">
|
|
2公里内免费 超过2公里每公里{{ travelMoney }}元
|
|
</view>
|
|
</view>
|
|
|
|
<van-cell title="订单备注" is-Link @click="remarkShow = true">
|
|
<text>{{ remark || '选填' }}</text>
|
|
<template #icon>
|
|
<image class="icon" src="../../static/payOrder/4.png" mode=""></image>
|
|
</template>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
|
|
<van-cell-group style="margin-top: 10px;">
|
|
<van-radio-group v-model="payMethod">
|
|
|
|
<van-cell>
|
|
<template #title>
|
|
<text>账户余额</text>
|
|
<text style="color: #888;">（余额：￥{{ userInfo.price }}）</text>
|
|
</template>
|
|
<template #icon>
|
|
<image class="icon" src="../../static/payOrder/5.png" mode=""></image>
|
|
</template>
|
|
<template #right-icon>
|
|
<van-radio :name="1"></van-radio>
|
|
</template>
|
|
</van-cell>
|
|
|
|
<van-cell title="微信支付">
|
|
|
|
<template #icon>
|
|
<image class="icon" src="../../static/payOrder/9.png" mode=""></image>
|
|
</template>
|
|
|
|
<template #right-icon>
|
|
<van-radio :name="0"></van-radio>
|
|
</template>
|
|
|
|
</van-cell>
|
|
|
|
</van-radio-group>
|
|
|
|
</van-cell-group>
|
|
|
|
<van-cell-group style="margin-top: 10px;">
|
|
|
|
<van-cell title="优惠劵" is-Link @click="selectCouponPopupShow = true">
|
|
|
|
<text v-if="coupon.money" style="color: #4899a6;">优惠 {{ coupon.money }}￥</text>
|
|
<text v-else style="color: #4899a6;">{{ couponNum == 0 ? '无' : `${couponNum}张` }}</text>
|
|
|
|
<template #icon>
|
|
<image class="icon" src="../../static/payOrder/5.png" mode=""></image>
|
|
</template>
|
|
|
|
</van-cell>
|
|
|
|
</van-cell-group>
|
|
|
|
<view style="color: #888;font-size: 12px;padding: 10px 0;;">
|
|
温馨提示：下单前请仔细查看下单须知
|
|
</view>
|
|
|
|
<view class="agreement">
|
|
<van-checkbox v-model="agreement"></van-checkbox>
|
|
本人已同意<text @click="configPopupShow = true" style="color: #6FDFBE;">《用户使用协议》</text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="submit">
|
|
<view class="price">
|
|
<view>
|
|
<text style="color: #000;">合计</text>
|
|
￥<text style="font-size: 18px;
|
|
font-weight: 600;">{{ count }}</text>元
|
|
</view>
|
|
<view style="font-size: 10px;margin-top: 5px;">
|
|
已优惠￥{{ coupon.money || 0 }}元
|
|
</view>
|
|
</view>
|
|
<view class="btn" @click="submit">
|
|
立即支付
|
|
</view>
|
|
</view>
|
|
|
|
<selectTime :show="selectTimeShow" @select="selectTime" :dateList="dateList" :timeList="timeList"
|
|
:loading="timeLoading" @selectDate="getVipTenOrderList" @close="selectTimeShow = false"
|
|
:title="selectTimeTitle" />
|
|
|
|
<selectTechnician :serviceId="projectDetail.id" @select="selectTechnician" :show="selectTechnicianShow"
|
|
@close="selectTechnicianShow = false" />
|
|
|
|
<selectCouponPopup :show="selectCouponPopupShow" @selectCoupon="selectCoupon" @countCouponNum="countCouponNum"
|
|
@close="selectCouponPopupShow = false" />
|
|
|
|
<selectAddressPopup :show="selectAddressPopupShow" @select="selectAddress"
|
|
@close="selectAddressPopupShow = false" />
|
|
|
|
<van-popup v-model:show="remarkShow" round position="bottom" @close="remarkShow = false"
|
|
:style="{ height: '160px' }">
|
|
<van-field v-model="remark" rows="4" autosize type="textarea" maxlength="50" placeholder="请输入留言"
|
|
show-word-limit />
|
|
</van-popup>
|
|
|
|
<configPopup :keyValue="keyValue" :show="configPopupShow" :list="config" @close="configPopupShow = false" />
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mNavbar from '@/components/base/m-navbar.vue'
|
|
import selectTime from '@/components/payOrder/selectTime.vue'
|
|
import selectTechnician from '@/components/payOrder/selectTechnicianPopup.vue'
|
|
import selectAddressPopup from '@/components/payOrder/selectAddressPopup.vue'
|
|
import selectCouponPopup from '@/components/payOrder/selectCouponPopup.vue'
|
|
import configPopup from '@/components/configPopup'
|
|
import Position from '@/utils/position.js'
|
|
import { showDialog } from 'vant';
|
|
import { showNotify } from 'vant'
|
|
|
|
export default {
|
|
components: {
|
|
mNavbar,
|
|
selectTime,
|
|
selectTechnician,
|
|
selectAddressPopup,
|
|
selectCouponPopup,
|
|
configPopup
|
|
},
|
|
data() {
|
|
return {
|
|
payMethod: 1,
|
|
remark: '',
|
|
agreement: false,
|
|
selectTimeShow: false,
|
|
selectTechnicianShow: false,
|
|
selectCouponPopupShow: false,
|
|
selectAddressPopupShow: false,
|
|
remarkShow: false,
|
|
selectTimeTitle: '',
|
|
|
|
technicianDetail: {},
|
|
projectDetail: {},
|
|
time: {},
|
|
address: {},
|
|
coupon: {},
|
|
userInfo: {},
|
|
order: [],
|
|
|
|
dateList: [],
|
|
timeList: [],
|
|
timeLoading: false,
|
|
dateObj: '',
|
|
price: 0, //用于保存商品原价
|
|
temp: 0,//路费
|
|
count: 0, //计算出的价格
|
|
configPopupShow: false,
|
|
config: [],
|
|
keyValue: 'protocol',
|
|
distance : 0,
|
|
travelMoney : 0,
|
|
selectDay : '', //用户选择的日期
|
|
couponNum : 0
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getOrderDetail()
|
|
this.getUserInfo()
|
|
this.getConfig()
|
|
let today = this.dayjs()
|
|
|
|
this.dateList.push(today)
|
|
|
|
for (let i = 1; i < 7; i++) {
|
|
this.dateList.push(today.add(i, 'day'))
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
//获取订单详情
|
|
getOrderDetail() {
|
|
this.$api('getOrderVipDetail', {
|
|
id: this.$route.query.orderId
|
|
}, res => {
|
|
if (res.code == 200) {
|
|
this.projectDetail = res.result.shop
|
|
this.technicianDetail = res.result.technician
|
|
this.order = res.result.order
|
|
|
|
this.getVipTenOrderList(this.dayjs())
|
|
this.initPrice()
|
|
}
|
|
})
|
|
},
|
|
|
|
//获取技师上钟时间
|
|
getVipTenOrderList(item) {
|
|
this.selectDay = item
|
|
this.timeLoading = true
|
|
this.$api('getVipTenOrderList', {
|
|
tenId: this.technicianDetail.id,
|
|
name: item.format('dddd')
|
|
}, res => {
|
|
if (res.code == 200) {
|
|
this.timeList = res.result
|
|
}
|
|
this.timeLoading = false
|
|
})
|
|
},
|
|
|
|
//获取用户信息
|
|
getUserInfo() {
|
|
this.$api('getUserInfo', {}, res => {
|
|
if (res.code == 200) {
|
|
this.userInfo = res.result;
|
|
}
|
|
})
|
|
},
|
|
|
|
//点击返回箭
|
|
leftClick() {
|
|
let {current,id,distance,orderId} = this.$route.query
|
|
if (current == 'technicianDetail') { //返回技师详情
|
|
return uni.navigateTo({
|
|
url: `/pages/technician/technicianDetail?id=${id}&distance=${distance}`
|
|
})
|
|
}
|
|
if (current == 'orderDetail') { //返回订单详情
|
|
return uni.navigateTo({
|
|
url: `/pages/order/orderDetail?id=${orderId}`
|
|
})
|
|
}
|
|
uni.navigateTo({ //返回技师选择列表
|
|
url: `/pages/technician/selectTechnician?serviceId=${this.projectDetail.id}`
|
|
})
|
|
},
|
|
|
|
//支付
|
|
submit() {
|
|
if (!this.address.id) {
|
|
return this.selectAddressPopupShow = true
|
|
}
|
|
if (!this.time.id) {
|
|
return this.selectTimeShow = true
|
|
}
|
|
if (!this.agreement) {
|
|
return uni.showToast({
|
|
title: '请勾选用户使用协议协议',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
let data = {
|
|
addressId: this.address.id, //地址id
|
|
orderId: this.order.id, //订单id
|
|
payType: this.payMethod, // 支付类型
|
|
remark: this.remark, //备注
|
|
serviceTime: this.time.id, //服务时间
|
|
travelType: 1, //出行方式
|
|
travelDistance: this.distance, //技师距离
|
|
serviceDate : this.selectDay.format('YYYY-MM-DD')//服务时间
|
|
}
|
|
|
|
if (this.coupon.id) {
|
|
data.couponId = this.coupon.id //优惠劵id
|
|
}
|
|
|
|
this.$api('payVipOrder', data, res => {
|
|
if (res.code == 200) {
|
|
if (this.payMethod == 1) { //余额支付
|
|
showDialog({
|
|
title: '支付成功',
|
|
message: '订单支付成功!请前往订单查看',
|
|
}).then(() => {
|
|
this.paySusscess()
|
|
});
|
|
} else if (this.payMethod == 0) { //微信支付
|
|
this.$wxPay(res,this.paySusscess,this.paySusscess)
|
|
}
|
|
}else{ //不管订单是否支付成功，直接跳订单页面
|
|
this.paySusscess()
|
|
}
|
|
})
|
|
},
|
|
|
|
//显示选择技师上钟时间弹框
|
|
onServiceTime() {
|
|
this.selectTimeShow = true
|
|
this.selectTimeTitle = '请选择服务时间'
|
|
},
|
|
|
|
//选择技师上钟时间
|
|
selectTime(obj) {
|
|
this.selectTimeShow = false
|
|
this.time = obj.time
|
|
this.dateObj = obj.date
|
|
},
|
|
|
|
//选择技师
|
|
selectTechnician(item) {
|
|
this.selectTechnicianShow = false
|
|
this.technicianDetail = item
|
|
},
|
|
|
|
//选择优惠券
|
|
selectCoupon(item) {
|
|
if (item.useMoney > this.price) { //判断优惠券使用条件(满多少可用)
|
|
this.selectCouponPopupShow = false
|
|
return uni.showToast({icon: 'none',title: `此券需满${item.useMoney}可用`});
|
|
}
|
|
this.count = this.price //先恢复商品价格，防止多次选择优惠券前端多次减金额
|
|
this.selectCouponPopupShow = false
|
|
this.coupon = item
|
|
this.count = this.price - item.money
|
|
},
|
|
|
|
//显示选择地址弹框
|
|
selectAddress(item) {
|
|
if(!item.latitude && !item.longitude){ //判断地址信息有没有经纬度信息，避免出现距离计算出现问题
|
|
this.selectAddressPopupShow = false
|
|
return uni.showToast({icon: 'none',title: '选择的地址异常,请选择其他地址或重新添加'});
|
|
}
|
|
this.selectAddressPopupShow = false
|
|
this.address = item
|
|
this.calculatedDistance(); //计算两地距离
|
|
},
|
|
|
|
wxPay() {
|
|
this.$api('createOrderWXPay', {}, res => {
|
|
if (res.code == 200) {
|
|
this.$wxPay(res,this.paySusscess,this.paySusscess)
|
|
}
|
|
})
|
|
},
|
|
|
|
//获取配置信息
|
|
getConfig() {
|
|
this.$api('getConfig', {}, res => {
|
|
if (res.code == 200) {
|
|
this.config = res.result
|
|
res.result.forEach(item => {
|
|
if(item.keyValue == 'travel_money'){
|
|
this.travelMoney = item.content
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
//计算距离
|
|
calculatedDistance(){ //计算距离
|
|
// Position.getLocation(result => {
|
|
// this.distance = Position.calculateDistance(result.latitude, result.longitude, this.technicianDetail.latitude, this.technicianDetail.longitude)
|
|
// //计算路费
|
|
// if (this.distance < 2) {
|
|
// this.temp = 0
|
|
// }else{
|
|
// this.temp = Number((this.distance * this.travelMoney).toFixed(2));
|
|
// this.initPrice()
|
|
// }
|
|
// })
|
|
if(this.$route.query.setKmOpen=='Y'){ //是否打开了假距离
|
|
this.distance = this.$route.query.distance
|
|
}else{
|
|
this.distance = Position.calculateDistance(this.address.latitude, this.address.longitude, this.technicianDetail.latitude, this.technicianDetail.longitude)
|
|
}
|
|
//计算路费
|
|
if (this.distance < 2) {
|
|
this.temp = 0
|
|
}else{
|
|
this.temp = Number((this.distance * this.travelMoney).toFixed(2));
|
|
this.initPrice()
|
|
}
|
|
},
|
|
|
|
//初始化金额数据(用于前端计算)
|
|
initPrice(){
|
|
this.price = Number(this.order.money + this.temp).toFixed(2)
|
|
this.count = Number(this.order.money + this.temp).toFixed(2)
|
|
},
|
|
|
|
//支付成功(跳转订单)
|
|
paySusscess(){
|
|
uni.reLaunch({
|
|
url: '/pages/index/order?active=2'
|
|
})
|
|
},
|
|
|
|
//获取优惠券数量
|
|
countCouponNum(num){
|
|
this.couponNum = num
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
body {
|
|
background-color: #f3f3f3;
|
|
}
|
|
|
|
.payOrder {
|
|
.bac {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100px;
|
|
background: linear-gradient(to right, #4899a6, #6fc6ad);
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
width: calc(100% - 30px);
|
|
margin: 15px;
|
|
margin-top: 30rpx;
|
|
min-height: 500px;
|
|
border-radius: 10px;
|
|
padding-bottom: 80px;
|
|
|
|
.server-item {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
background: white;
|
|
border-radius: 15rpx;
|
|
box-sizing: border-box;
|
|
padding: 25rpx;
|
|
margin: 20rpx 0rpx;
|
|
|
|
.img-box {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
background: #ccc;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.server-info {
|
|
width: calc(100% - 150rpx);
|
|
box-sizing: border-box;
|
|
padding: 10rpx 15rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
|
|
.server-title {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.time-coupon,
|
|
.price {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.time-coupon {
|
|
margin: 10rpx 0rpx;
|
|
font-size: 26rpx;
|
|
|
|
image {
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
|
|
.time {
|
|
color: #B8B8B8;
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
|
|
.coupon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #F29E45;
|
|
color: white;
|
|
width: 140rpx;
|
|
height: 45rpx;
|
|
border-radius: 10rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
// .price {
|
|
// font-size: 26rpx;
|
|
// color: #B8B8B8;
|
|
// .current-price {
|
|
// font-size: 30rpx;
|
|
// font-weight: 600;
|
|
// color: #D34430;
|
|
// }
|
|
// .unit{
|
|
// font-size: 20rpx;
|
|
// }
|
|
// }
|
|
|
|
.sales-volume {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #B8B8B8;
|
|
font-size: 26rpx;
|
|
|
|
image {
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
vertical-align: middle;
|
|
padding: 6rpx;
|
|
}
|
|
|
|
.mileage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px;
|
|
|
|
.top {
|
|
padding: 5px 10px;
|
|
padding-left: 25px;
|
|
background-color: #A1D9CC99;
|
|
font-size: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.top::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #6fc6ad;
|
|
top: 50%;
|
|
left: 10px;
|
|
transform: translate(0, -40%);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.info {
|
|
padding: 10px;
|
|
background-color: #ECFFFB;
|
|
color: #888;
|
|
font-size: 11px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
.agreement {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
|
|
.van-checkbox{
|
|
margin-right: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.submit {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 60px;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.price {
|
|
color: #F39637;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.btn {
|
|
background: linear-gradient(178deg, #4FD3BC, #60C285);
|
|
color: white;
|
|
width: 120px;
|
|
height: 45px;
|
|
border-radius: 23px;
|
|
font-size: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|