|
@@ -1,57 +1,67 @@
|
|
|
<template>
|
|
|
<view class="order-pages">
|
|
|
<view class="order-info">
|
|
|
- <u-cell-group>
|
|
|
- <u-cell-item title="订单状态" :arrow="false">
|
|
|
- <view slot="right-icon">
|
|
|
- <text :class="orderInfo.orderStatus">{{getOptionName(orderStatusList,orderInfo?orderInfo.orderStatus:'')}}</text>
|
|
|
+ <!-- 订单状态 -->
|
|
|
+ <view class="order-status">
|
|
|
+ <view class="status-title">{{orderInfo.orderFlag}}</view>
|
|
|
+ <view v-if="orderInfo.orderFlag=='待支付'" class="status-care">
|
|
|
+ 请在 <text>2020-10-30</text>前付款,过期系统将自动取消订单
|
|
|
+ </view>
|
|
|
+ <view v-if="orderInfo.orderFlag=='已取消'" class="status-care">
|
|
|
+ 超时未支付,系统已自动取消订单
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-gap height="10" bg-color="#f8f8f8"></u-gap>
|
|
|
+ <!-- 地址 -->
|
|
|
+ <view class="order-address">
|
|
|
+ <view>
|
|
|
+ <text class="address-title">{{orderInfo.address}}</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text style="margin-right: 30upx;">{{orderInfo.userName}}</text>
|
|
|
+ <text>{{orderInfo.phone}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-gap height="10" bg-color="#f8f8f8"></u-gap>
|
|
|
+ <!-- 商品列表 -->
|
|
|
+ <view class="bundle-list" v-for="item in orderInfo.itemList" :key="item.id">
|
|
|
+ <view class="img-cont">
|
|
|
+ <image :src="item.icon?item.icon:'../../static/tabbar/user.png'"></image>
|
|
|
+ </view>
|
|
|
+ <view >
|
|
|
+ <view class="ellipsis-two">{{item.name}}</view>
|
|
|
+ <view class="bundle-num">
|
|
|
+ <view ><b class="price-num">{{item.price}}</b> <text class="price-text">乐豆</text></view>
|
|
|
+ <view >X {{item.number}}</view>
|
|
|
</view>
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item title="订单编号" :arrow="false" >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-gap height="10" bg-color="#f8f8f8"></u-gap>
|
|
|
+ <!-- 订单信息 -->
|
|
|
+ <u-cell-group>
|
|
|
+ <u-cell-item title="订单编号" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false" >
|
|
|
{{orderInfo.orderNo}}
|
|
|
</u-cell-item>
|
|
|
- <u-cell-item title="创建时间" :arrow="false" >
|
|
|
+ <u-cell-item title="下单时间" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false" >
|
|
|
{{orderInfo.orderTime}}
|
|
|
</u-cell-item>
|
|
|
- <u-cell-item title="服务网点" :arrow="false">
|
|
|
- {{orderInfo.storeName}}
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item title="服务项目" :arrow="false">
|
|
|
- {{orderInfo.itemName}}
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item title="手机号" :arrow="false">
|
|
|
- {{orderInfo.customerMobile}}
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item v-if="orderInfo.payType" title="支付方式" :arrow="false">
|
|
|
- {{orderInfo.payType}}
|
|
|
+ <u-cell-item v-if="orderInfo.payTime" title="支付时间" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
|
|
|
+ {{orderInfo.payTime}}
|
|
|
</u-cell-item>
|
|
|
- <u-cell-item title="应付金额" :arrow="false">
|
|
|
- ¥{{orderInfo.payableAmount}}
|
|
|
+ <u-gap height="10" bg-color="#f8f8f8"></u-gap>
|
|
|
+ <u-cell-item title="商品合计" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
|
|
|
+ <text class="price-num">{{orderInfo.amount}}</text> <text class="price-text">乐豆</text>
|
|
|
</u-cell-item>
|
|
|
- <!-- 已取消订单优惠金额显示0 -->
|
|
|
- <u-cell-item title="优惠金额" :arrow="false">
|
|
|
- {{(orderInfo.couponAmount && orderInfo.orderStatus!='CANCELED')?orderInfo.couponAmount:0}}
|
|
|
+ <u-cell-item title="运费" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
|
|
|
+ 免运费
|
|
|
</u-cell-item>
|
|
|
- <u-cell-item v-if="orderInfo.orderCoupons && orderInfo.orderCoupons.length" title="优惠券" :arrow="false">
|
|
|
- {{orderInfo.orderCoupons[0].couponTitle}}
|
|
|
- </u-cell-item>
|
|
|
- <u-cell-item title="实付金额" :arrow="false">
|
|
|
- <text class="order-price">¥{{orderInfo.payStatus=='PAID' ? orderInfo.paymentAmount : 0}}</text>
|
|
|
+ <u-cell-item :title="(orderInfo.orderFlag=='待支付'||orderInfo.orderFlag=='已取消') ? '待支付':'实际支付'" :value-style="{color: '#000',fontSize: '28upx'}" :arrow="false">
|
|
|
+ <b class="price-num">{{orderInfo.amount}}</b> <text class="price-text">乐豆</text>
|
|
|
</u-cell-item>
|
|
|
</u-cell-group>
|
|
|
- <view class="order-photo">
|
|
|
- <view v-if="orderInfo.beginImage">
|
|
|
- <view>洗车前</view>
|
|
|
- <u-image @click="showImage(orderInfo.beginImage)" width="100%" height="400rpx" mode="aspectFit" :src="orderInfo.beginImage"></u-image>
|
|
|
- </view>
|
|
|
- <view v-if="orderInfo.endImage">
|
|
|
- <view>洗车后</view>
|
|
|
- <u-image @click="showImage(orderInfo.endImage)" width="100%" height="400rpx" mode="aspectFit" :src="orderInfo.endImage"></u-image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
</view>
|
|
|
- <view v-if="orderInfo.orderStatus=='UN_PAY'" class="footer">
|
|
|
- <u-button @click="cancleOrder" type="error" plain>取消订单</u-button>
|
|
|
+ <view v-if="orderInfo.orderFlag=='待支付'" class="footer">
|
|
|
+ <u-button @click="cancleOrder" type="warning" >去支付</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -62,7 +72,34 @@
|
|
|
export default{
|
|
|
data() {
|
|
|
return {
|
|
|
- orderInfo: null,
|
|
|
+ orderInfo: {
|
|
|
+ address: '陕西省西安市未央区常青二路大明宫小区',
|
|
|
+ userName: '王明',
|
|
|
+ phone: '18792701023',
|
|
|
+ orderTime: "2020-10-28 11:15:59",
|
|
|
+ orderFlag: "待支付",
|
|
|
+ orderNo: 121245465748,
|
|
|
+ payedAmount: 0,
|
|
|
+ id: 11,
|
|
|
+ amount: 450,
|
|
|
+ totalNum: 3,
|
|
|
+ itemList: [
|
|
|
+ {
|
|
|
+ name: "八九箭冠",
|
|
|
+ id: 76435,
|
|
|
+ number: 1,
|
|
|
+ price: 150,
|
|
|
+ icon: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "数据库的合法身份觉得很附近发生纠纷解决",
|
|
|
+ id: 76436,
|
|
|
+ number: 2,
|
|
|
+ price: 150,
|
|
|
+ icon: ''
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
src: '',
|
|
|
orderStatusList: []
|
|
|
}
|
|
@@ -128,47 +165,85 @@
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
|
.order-pages{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ padding: 0 24upx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.order-info{
|
|
|
width: 100%;
|
|
|
flex: 1;
|
|
|
overflow-y: scroll;
|
|
|
- .u-cell{
|
|
|
- padding:10rpx 32rpx;
|
|
|
- }
|
|
|
- .order-photo{
|
|
|
- padding:0 30rpx;
|
|
|
- >view{
|
|
|
- text-align: center;
|
|
|
- padding: 20rpx;
|
|
|
+ // 状态
|
|
|
+ .order-status{
|
|
|
+ padding: 30upx 0;
|
|
|
+ text-align: center;
|
|
|
+ .status-title{
|
|
|
+ font-size: 36upx;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .status-care{
|
|
|
+ font-size: 24upx;
|
|
|
+ margin-top: 10upx;
|
|
|
+ color: #a9aaac;
|
|
|
+ >text {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .FINISHED{
|
|
|
- color: #00aa00;
|
|
|
- }
|
|
|
- .UN_PAY{
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
- .CANCELED{
|
|
|
- color: #7e7b88;
|
|
|
+ // 地址
|
|
|
+ .order-address {
|
|
|
+ font-size: 32upx;
|
|
|
+ padding: 20upx 0;
|
|
|
+ >view {
|
|
|
+ line-height: 60upx;
|
|
|
+ }
|
|
|
+ .address-title {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
}
|
|
|
- .PAID{
|
|
|
- color: #00aaff;
|
|
|
+ // 订单中商品列表
|
|
|
+ .bundle-list {
|
|
|
+ display: flex;
|
|
|
+ padding: 20upx 10upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ border-bottom: 1px solid #F8F8F8;
|
|
|
+ .img-cont {
|
|
|
+ width: 160upx;
|
|
|
+ height: 160upx;
|
|
|
+ >image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >view {
|
|
|
+ &:last-child {
|
|
|
+ padding: 10upx 0;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 20upx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bundle-num {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
}
|
|
|
- .REFUNDING{
|
|
|
- color: #00557f;
|
|
|
+ .price-text{
|
|
|
+ font-size: 20upx;
|
|
|
+ margin-left: 10upx;
|
|
|
}
|
|
|
- .REFUNDED{
|
|
|
- color: #005500;
|
|
|
+ .price-num{
|
|
|
+ font-size: 32upx;
|
|
|
}
|
|
|
- .order-price{
|
|
|
- font-size: 36rpx;
|
|
|
- color: red;
|
|
|
+ .u-cell{
|
|
|
+ padding:10rpx 32rpx;
|
|
|
}
|
|
|
}
|
|
|
.footer{
|