|
|
<template>
|
|
|
<view class="content">
|
|
|
<view class="orderBox">
|
|
|
<view class="serviceBtn disabled">已服务</view>
|
|
|
<view class="seeMap">查看地图<text class="iconfont icon-right"></text></view>
|
|
|
<view class="title">时光印记孕妈妈摄影套餐</view>
|
|
|
<view class="p">有效期至：2021-02-10 14:00</view>
|
|
|
<view class="p">预约时间：<text class="font_red">2021-02-10 12:30</text></view>
|
|
|
<view class="qr_box">
|
|
|
<image mode="widthFix" src="../../static/300_qr.png"></image>
|
|
|
</view>
|
|
|
<view class="ticketNum">票号：1234 5678 90</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">王大宝</view>
|
|
|
</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_left">手<text class="halfWords"></text>机<text class="halfWords"></text>号:</view>
|
|
|
<view class="p_right">13844345606</view>
|
|
|
</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_left">预产期/宝宝生日:</view>
|
|
|
<view class="p_right">2020-12-11</view>
|
|
|
</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_left">地<text class="twoWords"></text>址:</view>
|
|
|
<view class="p_right">江苏省苏州市工业园区湖海小区5栋102</view>
|
|
|
</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_left">金<text class="twoWords"></text>额:</view>
|
|
|
<view class="p_right">¥100</view>
|
|
|
</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_left">实付金额:</view>
|
|
|
<view class="p_right">¥100</view>
|
|
|
</view>
|
|
|
<view class="hasTwo">
|
|
|
<view class="p_left">状<text class="twoWords"></text>态:</view>
|
|
|
<view class="p_right"><text class="font_red">已使用</text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="orderBox">
|
|
|
<view class="title">订单评价</view>
|
|
|
<view class="discuss">
|
|
|
<view class="dis_l">评分:</view>
|
|
|
<view class="starBox">
|
|
|
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png"></image>
|
|
|
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png"></image>
|
|
|
<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png"></image>
|
|
|
<image mode="heightFix" src="../../static/icon_detail_star_nor@2x.png"></image>
|
|
|
<image mode="heightFix" src="../../static/icon_detail_star_nor@2x.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="discuss">
|
|
|
<view class="dis_l">评价:</view>
|
|
|
<view class="areaOuter">
|
|
|
<textarea placeholder-style="color:#CCCCCC" placeholder="请填写评价" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="subBtn">提交</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
info: {},
|
|
|
id: "",
|
|
|
|
|
|
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": "已取消"
|
|
|
},
|
|
|
user_info: {},
|
|
|
openid: ""
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
this.id = options.id;
|
|
|
this.getOrder();
|
|
|
|
|
|
weixin.getOpenidInfo(info => {
|
|
|
that.user_info = info.user_info
|
|
|
that.openid = that.user_info.openid;
|
|
|
}, true)
|
|
|
},
|
|
|
onShow: function() {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
getOrder: function() {
|
|
|
var that = this;
|
|
|
weixin.request({
|
|
|
api: '/api/member/get-order-info',
|
|
|
method: 'GET',
|
|
|
data: {
|
|
|
id: this.id
|
|
|
},
|
|
|
utilSuccess: r => {
|
|
|
this.info = r.data;
|
|
|
var mod = this.statusLabels.filter((p) => {
|
|
|
return p.state == this.info.state;
|
|
|
})[0];
|
|
|
if (mod)
|
|
|
this.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>
|
|
|
.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>
|
