|
|
<template>
|
|
|
<view class="content">
|
|
|
|
|
|
<view class="orderBox">
|
|
|
<view class="title">{{info.order_name}}</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="orderBox">
|
|
|
<view class="p">
|
|
|
下单日期：<text class="font_red">{{$u.timeFormat(info.created_at, 'yyyy年mm月dd日 hh:MM')}}</text>
|
|
|
</view>
|
|
|
<view class="p">
|
|
|
订单编号：<text class="font_red">{{info.serial}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="orderBox">
|
|
|
<view class="title">订单信息</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_left">姓<text class="twoWords"></text>名:</view>
|
|
|
<view class="p_right">{{info.member.name}}</view>
|
|
|
</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_left">手<text class="halfWords"></text>机<text class="halfWords"></text>号:</view>
|
|
|
<view class="p_right">{{info.member.phone}}</view>
|
|
|
</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_left">预产期/宝宝生日:</view>
|
|
|
<view class="p_right">{{info.member.due_date}}</view>
|
|
|
</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_left">金<text class="twoWords"></text>额:</view>
|
|
|
<view class="p_right">¥{{info.total}}</view>
|
|
|
</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_left">实付金额:</view>
|
|
|
<view class="p_right">¥{{info.total}}</view>
|
|
|
</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_left">状<text class="twoWords"></text>态:</view>
|
|
|
<view class="p_right"><text class="font_red">{{info.statusName}}</text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="orderBox" v-if="info.member_comment">
|
|
|
<view class="title">备注</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_right"><text>{{info.member_comment}}</text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<view class=" memberCon" v-if="info.items.length>0">
|
|
|
|
|
|
<view class="title flex_center">
|
|
|
<view class="i_left">
|
|
|
<image src="../../../../static/i_left.png"></image>
|
|
|
</view>
|
|
|
<view class="tit_center">项目</view>
|
|
|
<view class="i_right">
|
|
|
<image src="../../../../static/i_right.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="mealCol flex_start flex_wrap">
|
|
|
|
|
|
<block v-for="(mod, i) in info.items">
|
|
|
<view class="colInfo flex_between">
|
|
|
<view class="flex_between">
|
|
|
<text>{{mod.product_type.name}}</text>
|
|
|
<text class="f_black">1次</text>
|
|
|
</view>
|
|
|
<view class="flex_between">
|
|
|
<text>{{mod.statusName}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="bottom">
|
|
|
<view class="subBtn view" v-if="info.state=='unpaid'" @click="tocancel(info.id)">取消</view>
|
|
|
<view class="subBtn pay" v-if="info.state=='unpaid'" @click="topay(info.id)">付款</view>
|
|
|
<view class="subBtn cancel"
|
|
|
v-if="info.state!='unpaid'&&info.bookable_type=='product'&&info.items.state=='pending'"
|
|
|
@click="tocancelApply(info.items.id)">退单</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
weixin
|
|
|
} from '../../../../utils/weixin.js';
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
info: {},
|
|
|
id: "",
|
|
|
|
|
|
user_info: {},
|
|
|
openid: "",
|
|
|
statusLabels: [{
|
|
|
state: "",
|
|
|
txt: "全部"
|
|
|
}, {
|
|
|
state: "unpaid",
|
|
|
txt: "待支付"
|
|
|
}, {
|
|
|
state: "ongoing",
|
|
|
txt: "进行中"
|
|
|
}, {
|
|
|
state: "finished",
|
|
|
txt: "已完成"
|
|
|
}],
|
|
|
|
|
|
corderstatusLabels: {
|
|
|
"pending": "待处理",
|
|
|
"assigned": "已分发",
|
|
|
"returned": "已退回",
|
|
|
"accepted": "已接收",
|
|
|
"confirmed": "确认有效",
|
|
|
"canceled_by_user": "用户申请取消",
|
|
|
"canceled_by_merchant": "商家标注无效单",
|
|
|
"finished": "已核销",
|
|
|
"canceled": "已取消"
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
var that = this;
|
|
|
this.id = options.id;
|
|
|
this.getOrder();
|
|
|
weixin.getOpenidInfo(info => {
|
|
|
that.user_info = info.user_info
|
|
|
}, false)
|
|
|
this.openid = that.user_info.openid;
|
|
|
},
|
|
|
onShow: function() {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
topay(id) {
|
|
|
var that = this;
|
|
|
weixin.request({
|
|
|
api: '/api/member/order-payment',
|
|
|
method: 'GET',
|
|
|
data: {
|
|
|
order_id: id,
|
|
|
openid: this.openid
|
|
|
},
|
|
|
utilSuccess: res => {
|
|
|
|
|
|
weixin.getOpenidInfo(() => {}, true);
|
|
|
setTimeout(function() {
|
|
|
uni.hideLoading();
|
|
|
that.showPop = false;
|
|
|
}, 100);
|
|
|
try {
|
|
|
let payParams = JSON.parse(res.jsApiParameters)
|
|
|
payParams.provider = 'wxpay'
|
|
|
payParams.success = result => {
|
|
|
that.status = "ongoing";
|
|
|
that.loadData(that.currentPage);
|
|
|
}
|
|
|
payParams.fail = result => {
|
|
|
console.log(result);
|
|
|
}
|
|
|
wx.requestPayment(payParams);
|
|
|
|
|
|
} catch (err) {
|
|
|
console.log(err)
|
|
|
} finally {
|
|
|
// finallyCode - 无论 try / catch 结果如何都会执行的代码块
|
|
|
}
|
|
|
},
|
|
|
utilFail: res => {
|
|
|
uni.showToast({
|
|
|
title: res
|
|
|
})
|
|
|
console.log(res);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
tocancelApply(id) {
|
|
|
var that = this;
|
|
|
uni.showModal({
|
|
|
title: "确认申请退单？",
|
|
|
success: (res) => {
|
|
|
if (res.confirm) {
|
|
|
weixin.request({
|
|
|
api: '/api/member/order-item-cancel',
|
|
|
method: 'POST',
|
|
|
data: {
|
|
|
id: id
|
|
|
},
|
|
|
utilSuccess: res => {
|
|
|
console.log(res)
|
|
|
if (res.status == 1) {
|
|
|
uni.showModal({
|
|
|
title: "已经申请退款",
|
|
|
success: (res) => {
|
|
|
if (res.confirm) {
|
|
|
that.getOrder();
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
utilFail: res => {
|
|
|
uni.showToast({
|
|
|
title: res
|
|
|
})
|
|
|
console.log(res);
|
|
|
}
|
|
|
})
|
|
|
} else if (res.cancel) {
|
|
|
console.log('用户点击取消');
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
tocancel(id) {
|
|
|
var that = this;
|
|
|
uni.showModal({
|
|
|
title: "确认取消订单？",
|
|
|
success: (res) => {
|
|
|
if (res.confirm) {
|
|
|
weixin.request({
|
|
|
api: '/api/member/order-cancel',
|
|
|
method: 'POST',
|
|
|
data: {
|
|
|
id: id
|
|
|
},
|
|
|
utilSuccess: res => {
|
|
|
console.log(res)
|
|
|
if (res.status == 1) {
|
|
|
uni.showModal({
|
|
|
title: "订单已经删除!",
|
|
|
success: (res) => {
|
|
|
if (res.confirm) {
|
|
|
uni.navigateTo({
|
|
|
url: "../myOrder/myOrder"
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
utilFail: res => {
|
|
|
uni.showToast({
|
|
|
title: res
|
|
|
})
|
|
|
console.log(res);
|
|
|
}
|
|
|
})
|
|
|
} else if (res.cancel) {
|
|
|
console.log('用户点击取消');
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
},
|
|
|
getOrder: function() {
|
|
|
var that = this;
|
|
|
weixin.request({
|
|
|
api: '/api/member/get-order-info/' + that.id,
|
|
|
method: 'GET',
|
|
|
data: {
|
|
|
id: that.id
|
|
|
},
|
|
|
utilSuccess: r => {
|
|
|
that.info = r.data;
|
|
|
var mod = that.statusLabels.filter((p) => {
|
|
|
return p.state == that.info.state;
|
|
|
})[0];
|
|
|
if (mod)
|
|
|
that.info.statusName = mod.txt;
|
|
|
if (r.data.items) {
|
|
|
for (var m of r.data.items) {
|
|
|
m.statusName = that.corderstatusLabels[m.state]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
utilFail: r => {
|
|
|
console.log(r);
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.bottom {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: 100%;
|
|
|
padding: 30rpx;
|
|
|
|
|
|
.subBtn {
|
|
|
height: 80rpx;
|
|
|
border-radius: 40rpx;
|
|
|
color: #fff;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
text-align: center;
|
|
|
line-height: 80rpx;
|
|
|
margin: 40rpx auto 0 auto;
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.pay {
|
|
|
|
|
|
background: #FF578A;
|
|
|
border-top-left-radius: 0;
|
|
|
border-bottom-left-radius: 0;
|
|
|
}
|
|
|
|
|
|
.view {
|
|
|
border-top-right-radius: 0;
|
|
|
border-bottom-right-radius: 0;
|
|
|
background: #808080;
|
|
|
}
|
|
|
|
|
|
.cancel {
|
|
|
background: #FF578A;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
.memberCon {
|
|
|
width: 690rpx;
|
|
|
background: #fff;
|
|
|
border-radius: 8rpx;
|
|
|
padding: 30rpx 0;
|
|
|
box-sizing: border-box;
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
.topTit {
|
|
|
font-size: 33rpx;
|
|
|
color: #302c2f;
|
|
|
font-weight: 700;
|
|
|
padding: 0 30rpx;
|
|
|
|
|
|
.titInner {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.titCon {
|
|
|
position: relative;
|
|
|
z-index: 3;
|
|
|
}
|
|
|
|
|
|
.line {
|
|
|
display: inline-block;
|
|
|
height: 30rpx;
|
|
|
width: 110%;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
background: linear-gradient(to bottom, #FDFEFD 0%, #91E4C1 100%);
|
|
|
z-index: 1;
|
|
|
}
|
|
|
|
|
|
.f_blue {
|
|
|
color: #0079b8;
|
|
|
}
|
|
|
|
|
|
.f_big {
|
|
|
font-size: 43rpx;
|
|
|
padding: 0 5rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
padding: 20rpx 30rpx;
|
|
|
|
|
|
.i_left {
|
|
|
image {
|
|
|
display: block;
|
|
|
width: 23rpx;
|
|
|
height: 23rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.i_right {
|
|
|
image {
|
|
|
display: block;
|
|
|
width: 23rpx;
|
|
|
height: 23rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.tit_center {
|
|
|
font-size: 28rpx;
|
|
|
color: #0c967f;
|
|
|
font-weight: bold;
|
|
|
min-width: 250rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.mealCol {
|
|
|
padding: 0 20rpx;
|
|
|
|
|
|
.width_453 {
|
|
|
width: 480rpx !important;
|
|
|
}
|
|
|
|
|
|
.colInfo {
|
|
|
width: 100%;
|
|
|
margin: 10rpx;
|
|
|
background: #def6eb;
|
|
|
height: 50rpx;
|
|
|
border-radius: 25rpx;
|
|
|
padding: 0 30rpx;
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 700;
|
|
|
line-height: 50rpx;
|
|
|
box-sizing: border-box;
|
|
|
color: #079683;
|
|
|
|
|
|
.f_black {
|
|
|
color: #044238;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.colInfo:nth-child(even) {
|
|
|
margin: 10rpx 0 10rpx 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
padding-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.orderBox {
|
|
|
width: 710rpx;
|
|
|
margin: 0 auto 20rpx auto;
|
|
|
padding: 30rpx;
|
|
|
box-sizing: border-box;
|
|
|
background: #fff;
|
|
|
border-radius: 16rpx;
|
|
|
position: relative;
|
|
|
|
|
|
.serviceBtn {
|
|
|
width: 160rpx;
|
|
|
height: 56rpx;
|
|
|
background: #FF578A;
|
|
|
border-radius: 28rpx;
|
|
|
color: #fff;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
text-align: center;
|
|
|
line-height: 56rpx;
|
|
|
position: absolute;
|
|
|
right: 30rpx;
|
|
|
top: 30rpx;
|
|
|
}
|
|
|
|
|
|
.serviceBtn.disabled {
|
|
|
background: #CCCCCC;
|
|
|
}
|
|
|
|
|
|
.subBtn {
|
|
|
width: 160rpx;
|
|
|
height: 56rpx;
|
|
|
background: #FF578A;
|
|
|
border-radius: 28rpx;
|
|
|
color: #fff;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
text-align: center;
|
|
|
line-height: 56rpx;
|
|
|
margin: 40rpx auto 0 auto;
|
|
|
}
|
|
|
|
|
|
.seeMap {
|
|
|
position: absolute;
|
|
|
right: 30rpx;
|
|
|
top: 116rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
|
|
|
.iconfont {
|
|
|
color: #BBBBBB;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ticketNum {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
margin-top: 24rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.qr_box {
|
|
|
width: 300rpx;
|
|
|
height: 300rpx;
|
|
|
margin: 45rpx auto 0 auto;
|
|
|
|
|
|
image {}
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
}
|
|
|
|
|
|
.p {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
color: #999999;
|
|
|
margin-top: 5rpx;
|
|
|
}
|
|
|
|
|
|
.hasTwo {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
font-size: 28rpx;
|
|
|
color: #333;
|
|
|
margin-top: 30rpx;
|
|
|
|
|
|
.p_left {
|
|
|
margin-right: 30rpx;
|
|
|
color: #999;
|
|
|
min-width: 120rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.discuss {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
margin-top: 32rpx;
|
|
|
|
|
|
.dis_l {
|
|
|
font-size: 28rpx;
|
|
|
color: #999;
|
|
|
padding-top: 10rpx;
|
|
|
}
|
|
|
|
|
|
.starBox {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
margin-left: 32rpx;
|
|
|
|
|
|
image {
|
|
|
display: block;
|
|
|
width: 48rpx;
|
|
|
height: 48rpx;
|
|
|
margin-right: 32rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.areaOuter {
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 7rpx;
|
|
|
border: 1rpx solid #DEDEDE;
|
|
|
width: 530rpx;
|
|
|
margin-left: 32rpx;
|
|
|
|
|
|
textarea {
|
|
|
height: 150rpx;
|
|
|
font-size: 28rpx;
|
|
|
padding: 20rpx;
|
|
|
box-sizing: border-box;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
