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.
619 lines
15 KiB
619 lines
15 KiB
<template>
|
|
<view class="order">
|
|
<view class="order-hd" v-if="info.status <=4">
|
|
<view class="item" :class="info.status>=0?'item-on':''">
|
|
<view class="txt">待付款</view>
|
|
<image class="img1" src="@/static/pay-01.png"></image>
|
|
<image class="img2" src="@/static/pay-02.png"></image>
|
|
</view>
|
|
<view class="item" :class="info.status>=1?'item-on':''">
|
|
<view class="txt">待接单</view>
|
|
<image class="img1" src="@/static/pay-01.png"></image>
|
|
<image class="img2" src="@/static/pay-02.png"></image>
|
|
</view>
|
|
<view class="item" :class="info.status>=2?'item-on':''">
|
|
<view class="txt">已接单</view>
|
|
<image class="img1" src="@/static/pay-01.png"></image>
|
|
<image class="img2" src="@/static/pay-02.png"></image>
|
|
</view>
|
|
<view class="item" :class="info.status>=3?'item-on':''">
|
|
<view class="txt">服务中</view>
|
|
<image class="img1" src="@/static/pay-01.png"></image>
|
|
<image class="img2" src="@/static/pay-02.png"></image>
|
|
</view>
|
|
<view class="item" :class="info.status>=4?'item-on':''">
|
|
<view class="txt">已完成</view>
|
|
<image class="img1" src="@/static/pay-01.png"></image>
|
|
<image class="img2" src="@/static/pay-02.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="order-hd" v-if="info.status ==4">
|
|
<view class="item" :class="info.status>=0?'item-on':''">
|
|
<view class="txt">待付款</view>
|
|
<image class="img1" src="@/static/pay-01.png"></image>
|
|
<image class="img2" src="@/static/pay-02.png"></image>
|
|
</view>
|
|
<view class="item" :class="info.status>=1?'item-on':''">
|
|
<view class="txt">待接单</view>
|
|
<image class="img1" src="@/static/pay-01.png"></image>
|
|
<image class="img2" src="@/static/pay-02.png"></image>
|
|
</view>
|
|
<view class="item" :class="info.status>=5?'item-on':''">
|
|
<view class="txt">已取消</view>
|
|
<image class="img1" src="@/static/pay-01.png"></image>
|
|
<image class="img2" src="@/static/pay-02.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="order-bd">
|
|
<view class="tips" v-if="info.status==0">订单已创建，请完成支付，尽快享受搭子的乐趣吧！</view>
|
|
<view class="tips" v-if="info.status==1">请您稍等片刻，陪玩达人正在赶来接单中...</view>
|
|
<view class="tips" v-if="info.status==2">陪玩达人已接单，陪玩时将在马上和您联系，开启陪玩之旅！</view>
|
|
<view class="tips" v-if="info.status==3">陪玩达人为您服务中，享受陪玩之旅吧！</view>
|
|
<view class="tips" v-if="info.status==4">陪玩之旅已结束，期待和您再次相会！</view>
|
|
<view class="tips" v-if="info.status==5">订单已取消，期待您重新下单！</view>
|
|
<view class="info">
|
|
<image :src="info.img"></image>
|
|
<view class="b">
|
|
<view class="name">{{info.nickname}}陪玩师</view>
|
|
<view class="desc">约玩项目：{{info.playConfigName}}</view>
|
|
<view class="price">￥{{info.totalMoney-info.travelExpensesTotal}}元/{{info.duration}}小时</view>
|
|
</view>
|
|
</view>
|
|
<view class="title">服务信息</view>
|
|
<view class="content">
|
|
<view class="item">
|
|
<view class="fl">联系人</view>
|
|
<view class="fr">{{info.playConfigName}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="fl">见面位置</view>
|
|
<view class="fr">{{info.location}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="fl">详细地址</view>
|
|
<view class="fr">{{info.address}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="fl">见面时间</view>
|
|
<view class="fr">{{info.meettime}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="fl">联系电话</view>
|
|
<view class="fr">{{info.phone}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="fl">微信号</view>
|
|
<view class="fr">{{info.wxcode}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="fl">服务时长</view>
|
|
<view class="fr">{{info.duration}}小时</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="fl">距离陪玩师</view>
|
|
<view class="fr">{{info.travelExpenses}}KM</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="fl">路费</view>
|
|
<view class="fr">￥{{info.travelExpensesTotal}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="title">订单信息</view>
|
|
<view class="content">
|
|
<view class="item">
|
|
<view class="fl">订单编号</view>
|
|
<view class="fr">{{info.orderno}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="fl">下单时间</view>
|
|
<view class="fr">{{info.createTime}}</view>
|
|
</view>
|
|
<view class="item" v-if="info.payTime">
|
|
<view class="fl">支付时间</view>
|
|
<view class="fr">{{info.payTime}}</view>
|
|
</view>
|
|
<view class="item" v-if="info.status != 0">
|
|
<view class="fl">支付方式</view>
|
|
<view class="fr">{{info.payWay ==1?'微信支付':'支付宝'}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="fl">支付金额</view>
|
|
<view class="fr">￥{{info.totalMoney}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="title" v-if="info.status == 0">支付方式</view>
|
|
|
|
<view class="pay" v-if="info.status == 0">
|
|
<template v-for="(a,i) in payInfo">
|
|
<view class="item" v-if="a=='wx-1' || a=='ali-1'" :key="i" :class="payIndex == i?'item-on':''" @click="tabItem(i,a)">
|
|
<view class="a" v-if="a=='wx-1'"><image src="@/static/wxpay.png"></image>微信支付</view>
|
|
<view class="a" v-if="a=='ali-1'"><image src="@/static/zfb.png"></image>支付宝支付</view>
|
|
<view class="b">
|
|
<image class="img1" src="@/static/icon-check.png"></image>
|
|
<image class="img2" src="@/static/icon-check-on.png"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
<view class="order-fd" v-if="info.status == 0">
|
|
<view class="a">合计：￥{{info.totalMoney}}</view>
|
|
<view class="b">
|
|
<view class="btn" @click="toCancle()()">取消订单</view>
|
|
<view class="btn btn-on" @click="toPay()">立即支付</view>
|
|
</view>
|
|
</view>
|
|
<view class="order-fd" v-else>
|
|
<view class="b">
|
|
<view class="btn btn-01" v-if="info.status == 1" @click.stop="toShengqing()">申请退款</view>
|
|
<view class="btn btn-01" v-if="info.status == 3" @click.stop="toFuwu()">服务完成</view>
|
|
<view class="btn" v-if="info.status == 4">服务完成</view>
|
|
<view class="btn btn-01" v-if="info.status == 5" @click.stop="toDel()">删除订单</view>
|
|
<view class="btn" v-if="info.status == 5">已取消</view>
|
|
<view class="btn" v-if="info.status == 6">已退款</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
payIndex: -1,
|
|
tabIndex: 1,
|
|
info: {},
|
|
id: "",
|
|
userType: 1,
|
|
payInfo: {},
|
|
isClick: true
|
|
};
|
|
},
|
|
onLoad(o) {
|
|
this.id = o.id;
|
|
this.userType = o.type
|
|
this.getInfo();
|
|
this.getConfigData();
|
|
},
|
|
methods: {
|
|
//服务完成
|
|
toFuwu() {
|
|
const that = this;
|
|
uni.showModal({
|
|
title: "温馨提示",
|
|
content: "是否要完成该订单服务？",
|
|
async success(res) {
|
|
if(res.confirm){
|
|
const { code, data, msg } = await that.$api.serviceCompleteOrder({orderId: that.info.id,delType: 1, userId: uni.getStorageSync("userInfo").id});
|
|
if(code == 200){
|
|
uni.showToast({
|
|
title: "提交成功"
|
|
})
|
|
setTimeout(()=>{
|
|
that.getInfo();
|
|
},2000)
|
|
}else{
|
|
uni.showToast({
|
|
title: msg,
|
|
icon: "none",
|
|
position: "bottom"
|
|
})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//申请订单
|
|
toShengqing() {
|
|
const that = this;
|
|
uni.showModal({
|
|
title: "温馨提示",
|
|
content: "是否要申请退款？",
|
|
async success(res) {
|
|
if(res.confirm){
|
|
const { code, data, msg } = await that.$api.refundOrder({orderId: that.info.id,delType: 1, userId: uni.getStorageSync("userInfo").id});
|
|
if(code == 200){
|
|
uni.showToast({
|
|
title: "申请成功"
|
|
})
|
|
setTimeout(()=>{
|
|
that.getInfo();
|
|
},2000)
|
|
}else{
|
|
uni.showToast({
|
|
title: msg,
|
|
icon: "none",
|
|
position: "bottom"
|
|
})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//删除订单
|
|
toDel() {
|
|
const that = this;
|
|
uni.showModal({
|
|
title: "温馨提示",
|
|
content: "是否要删除该订单？",
|
|
async success(res) {
|
|
if(res.confirm){
|
|
const { code, data, msg } = await that.$api.deleteOrder({orderId: that.info.id,delType: 1, userId: uni.getStorageSync("userInfo").id});
|
|
if(code == 200){
|
|
uni.showToast({
|
|
title: "删除成功"
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},2000)
|
|
}else{
|
|
uni.showToast({
|
|
title: msg,
|
|
icon: "none",
|
|
position: "bottom"
|
|
})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//取消订单
|
|
toCancle() {
|
|
const that = this;
|
|
uni.showModal({
|
|
title: "温馨提示",
|
|
content: "是否要取消该订单？",
|
|
async success(res) {
|
|
if(res.confirm){
|
|
const { code, data, msg } = await that.$api.cancelOrder({orderId: that.info.id,userId: uni.getStorageSync("userInfo").id});
|
|
if(code == 200){
|
|
uni.showToast({
|
|
title: "取消成功"
|
|
})
|
|
setTimeout(()=>{
|
|
that.getInfo();
|
|
},2000)
|
|
}else{
|
|
uni.showToast({
|
|
title: msg,
|
|
icon: "none",
|
|
position: "bottom"
|
|
})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//字典查询
|
|
async getConfigData() {
|
|
const that = this;
|
|
let res1 = await that.$api.getConfigData({dictType: 'CONFIG_PAY_STATUS'});
|
|
if(res1.data.content){
|
|
this.payInfo = res1.data.content.split(",");
|
|
}
|
|
},
|
|
//支付
|
|
async toPay() {
|
|
const that = this;
|
|
if(that.payIndex == -1){
|
|
uni.showToast({
|
|
icon: "none",
|
|
position: "bottom",
|
|
title: "请选择支付方式"
|
|
})
|
|
return ;
|
|
}
|
|
if(that.isClick == false){
|
|
return ;
|
|
}
|
|
const {code, data, msg} = await that.$api.paymentOrder({
|
|
payType: that.payType =='wx-1'?1:2,
|
|
outTradeNo: that.info.orderno
|
|
})
|
|
if(code == 200){
|
|
that.isClick = true;
|
|
uni.hideLoading()
|
|
uni.requestPayment({
|
|
provider: that.payType == 'ali-1'?'alipay':'wxpay',
|
|
orderInfo: that.payType == 'ali-1'?data.orderInfo:JSON.parse(data.orderInfo), //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
|
|
success: function (res) {
|
|
uni.showToast({
|
|
title: "支付成功"
|
|
})
|
|
setTimeout(()=>{
|
|
that.getInfo();
|
|
},2000)
|
|
},
|
|
fail: function (err) {
|
|
console.log('fail:' + JSON.stringify(err));
|
|
uni.showToast({
|
|
icon: "error",
|
|
title: "支付失败"
|
|
})
|
|
}
|
|
});
|
|
}else{
|
|
that.isClick = true;
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
icon: "none",
|
|
position: "bottom",
|
|
title: msg
|
|
})
|
|
}
|
|
},
|
|
async getInfo() {
|
|
const { code, data } = await this.$api.orderDetail({
|
|
userId: uni.getStorageSync("userInfo").id,
|
|
queryType: 2,
|
|
id: this.id,
|
|
userType: this.userType
|
|
})
|
|
if(code == 200){
|
|
this.info = data;
|
|
}
|
|
},
|
|
tabItem(index,a){
|
|
this.payIndex = index;
|
|
this.payType = a
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.order{
|
|
padding-bottom: 120rpx;
|
|
overflow: hidden;
|
|
|
|
&-fd{
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background: #FFFFFF;
|
|
border: 1px solid #EAEAEA;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 21;
|
|
padding: 0 25rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.a{
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
}
|
|
.b{
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
.btn{
|
|
padding: 0 50rpx;
|
|
height: 68rpx;
|
|
border-radius: 68rpx;
|
|
text-align: center;
|
|
line-height: 68rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
background: #FFFFFF;
|
|
border: 1px solid #999999;
|
|
color: #666666;
|
|
margin-left: 20rpx;
|
|
&-on{
|
|
background: linear-gradient(0deg, #000000, #3D3B38);
|
|
box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-hd{
|
|
width: 100%;
|
|
background-color: #fff;
|
|
height: 120rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
.item{
|
|
width: 20%;
|
|
height: 120rpx;
|
|
padding-top: 30rpx;
|
|
box-sizing: border-box;
|
|
float: left;
|
|
text-align: center;
|
|
position: relative;
|
|
.txt{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
image{
|
|
margin: 0 auto;
|
|
position: relative;
|
|
&.img1{
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
display: block;
|
|
top: 20rpx;
|
|
}
|
|
&.img2{
|
|
display: none;
|
|
}
|
|
}
|
|
&::after{
|
|
content: "";
|
|
width: 110rpx;
|
|
height: 2rpx;
|
|
background-color: #CCCCCC;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: 20rpx;
|
|
bottom: 30rpx;
|
|
z-index: 2;
|
|
}
|
|
&:last-child::after{
|
|
content: "";
|
|
background-color: transparent;
|
|
}
|
|
&-on{
|
|
.txt{
|
|
color: #212121;
|
|
}
|
|
image{
|
|
&.img1{
|
|
display: none;
|
|
}
|
|
&.img2{
|
|
width: 23rpx;
|
|
height: 23rpx;
|
|
display: block;
|
|
top: 15rpx;
|
|
}
|
|
}
|
|
&::after{
|
|
content: "";
|
|
background-color: #000;
|
|
}
|
|
&:last-child::after{
|
|
content: "";
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-bd{
|
|
padding: 25rpx;
|
|
overflow: hidden;
|
|
.title{
|
|
margin-top: 35rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #222222;
|
|
}
|
|
.pay{
|
|
padding: 0 30rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin-top: 20rpx;
|
|
.item{
|
|
padding: 30rpx 0;
|
|
border-bottom: 1px solid #EAEAEA;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
.a{
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
.b{
|
|
image{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
.img1{
|
|
display: block;
|
|
}
|
|
.img2{
|
|
display: none;
|
|
}
|
|
}
|
|
&-on{
|
|
.b{
|
|
.img1{
|
|
display: none;
|
|
}
|
|
.img2{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content{
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin-top: 20rpx;
|
|
padding: 10rpx 30rpx;
|
|
box-sizing: border-box;
|
|
.item{
|
|
padding: 20rpx 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.fl{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
.fr{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
}
|
|
}
|
|
}
|
|
.tips{
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #222222;
|
|
}
|
|
.info{
|
|
height: 210rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx 25rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
margin-top: 25rpx;
|
|
image{
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.b{
|
|
flex: 1;
|
|
.name{
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
line-height: 46rpx;
|
|
}
|
|
.desc{
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
margin-top: 20rpx;
|
|
}
|
|
.price{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|