订单列表显示支付状态

components/order-item.vue

@@ -1,7 +1,7 @@
 // 可供选择的订单
 // 开票列表
 <template>
-	<view class="cu-item  radius shadow margin-bottom">
+	<view class="cu-item  radius shadow margin-bottom ">
 		<!-- <image class="pay-status" :src="baseURL+'static/img/oil-unfinished.png'" alt /> -->
 		<view class="cu-avatar text-sl" v-if="item.sourceType==='3'" :style="'background-image:url('+baseURL+'static/img/order-wjy.png)'"></view>
 		<view class="cu-avatar text-sl" v-if="item.sourceType==='4'||item.sourceType==='6'" :style="'background-image:url('+baseURL+'static/img/order-xy.png)'"></view>
@@ -49,11 +49,35 @@
 					</view>
 				</view>
 			</view>
-			<view class="margin-top-sm flex justify-between">
+			<view class="margin-top-sm  flex justify-between" @tap="toDetails(item.orderID)">
 				<view class="text-gray text-df">
 					{{item.createDatetime.substring(0,19)}}</view>
 				<view>
 					<text class="color-000 text-lg total-money">￥{{item.realamount|numberFilter}}</text>
+					<view class="round pay-state  light bg-olive bg-transparent text-center state-0" v-if="item.istate==0">
+						<text class="inner-istate  round">{{item.istate|formatStr}}</text>
+						<view class="inner-border">
+
+						</view>
+					</view>
+					<view class="round pay-state  light bg-orange bg-transparent text-center state-1" v-if="item.istate==1">
+						<text class="inner-istate  round">{{item.istate|formatStr}}</text>
+						<view class="inner-border">
+
+						</view>
+					</view>
+					<view class="round pay-state  light bg-oilve bg-transparent text-center state--1" v-if="item.istate==-1">
+						<text class="inner-istate  round">{{item.istate|formatStr}}</text>
+						<view class="inner-border">
+
+						</view>
+					</view>
+					<view class="round pay-state  light bg-gray bg-transparent text-center state--2" v-if="item.istate==-2">
+						<text class="inner-istate  round">{{item.istate|formatStr}}</text>
+						<view class="inner-border">
+
+						</view>
+					</view>
 					<!-- <text v-show="item.orderType!='9'&&item.orderType!='0'" class="text-sm text-orange">(分单)</text> -->
 				</view>
 			</view>
@@ -118,6 +142,20 @@
 			numberFilter(value) {
 				value = value - 1 + 1
 				return value.toFixed(2)
+			},
+			formatStr(value) {
+				switch (parseInt(value)) {
+					case 1:
+						return '已支付'
+					case -1:
+						return '支付失败'
+					case -2:
+						return '退款'
+					case 0:
+						return '待支付'
+					default:
+						return '待支付'
+				}
 			}
 		}
 	}
@@ -171,4 +209,56 @@
 		width: 120rpx;
 		height: 120rpx;
 	}
+
+	.pay-state {
+		position: absolute;
+		right: 2rem;
+		bottom: 1rem;
+		width: 172upx;
+		height: 172upx;
+		line-height: 172upx;
+		transform: rotate(-30deg);
+
+	}
+
+	.inner-border {
+		position: absolute;
+		width: 142upx;
+		height: 142upx;
+		left: 14upx;
+		border-radius: 800upx;
+		top: 14upx;
+	}
+
+	.state-0 {
+		border: 1px solid #8dc63f;
+	}
+
+	.state-1 {
+		border: 1px solid #f37b1d;
+	}
+
+	.state--1 {
+		border: 1px solid #f37b1d;
+	}
+
+	.state--2 {
+		border: 1px solid #666;
+	}
+
+	.state-0 .inner-border {
+		border: 1px dashed #8dc63f;
+	}
+
+	.state-1 .inner-border {
+		border: 1px dashed #f37b1d;
+	}
+
+	.state--1 .inner-border {
+		border: 1px dashed #f37b1d;
+	}
+
+	.state--2 .inner-border {
+		border: 1px dashed #666;
+	}
 </style>