|
|
@@ -1,149 +1,155 @@
|
|
|
<template>
|
|
|
- <view class="order-item-view">
|
|
|
- <view class="item-header">
|
|
|
- <view class="title">
|
|
|
- <image class="icon" :src="info.avatar" alt="商品图" />
|
|
|
- <text class="name">
|
|
|
- {{ info.nickName }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="status">{{ getStatusName }} </view>
|
|
|
- </view>
|
|
|
- <view class="item-main" @click="clickItemEvent">
|
|
|
- <view class="item-info">
|
|
|
- <view class="info-row">
|
|
|
- <text class="info-label"> 日期:</text>
|
|
|
- <text class="info-value">{{ info.addTime }} </text>
|
|
|
- </view>
|
|
|
- <view class="info-row">
|
|
|
- <text class="info-label"> 单号:</text>
|
|
|
- <text class="info-value">{{ info.orderSn }} </text>
|
|
|
- </view>
|
|
|
- <view class="info-row">
|
|
|
- <text class="info-label"> 人员:</text>
|
|
|
- <text class="info-value">{{ info.adminName }} </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item-price"
|
|
|
- >¥{{ info.orderPrice }} <text class="iconfont iconxiangyou"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="order-item-view">
|
|
|
+ <view class="item-header">
|
|
|
+ <view class="title">
|
|
|
+ <image
|
|
|
+ class="icon"
|
|
|
+ :src="info.supplierAvatar"
|
|
|
+ alt="商品图"
|
|
|
+ />
|
|
|
+ <text class="name">
|
|
|
+ {{ info.supplierName }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="status">{{ getStatusName }} </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="item-main"
|
|
|
+ @click="clickItemEvent"
|
|
|
+ >
|
|
|
+ <view class="item-info">
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="info-label"> 日期:</text>
|
|
|
+ <text class="info-value">{{ info.addTime }} </text>
|
|
|
+ </view>
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="info-label"> 单号:</text>
|
|
|
+ <text class="info-value">{{ info.orderSn }} </text>
|
|
|
+ </view>
|
|
|
+ <view class="info-row">
|
|
|
+ <text class="info-label"> 人员:</text>
|
|
|
+ <text class="info-value">{{ info.adminName }} </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-price">¥{{ info.actPrice }} <text class="iconfont iconxiangyou"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { PURCHASE_ORDER_STATUS } from "@/utils/declare";
|
|
|
|
|
|
export default {
|
|
|
- props: {
|
|
|
- info: {
|
|
|
- required: true
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- PURCHASE_ORDER_STATUS
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- getStatusName() {
|
|
|
- let statusName = "";
|
|
|
+ props: {
|
|
|
+ info: {
|
|
|
+ required: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ PURCHASE_ORDER_STATUS
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getStatusName () {
|
|
|
+ let statusName = "";
|
|
|
|
|
|
- switch (this.info.status) {
|
|
|
- case PURCHASE_ORDER_STATUS.CONFIRM:
|
|
|
- statusName = "待确认";
|
|
|
- break;
|
|
|
- case PURCHASE_ORDER_STATUS.UNDIS:
|
|
|
- statusName = "待配送";
|
|
|
- break;
|
|
|
- case PURCHASE_ORDER_STATUS.DIS:
|
|
|
- statusName = "配送中";
|
|
|
- break;
|
|
|
- case PURCHASE_ORDER_STATUS.DONE:
|
|
|
- statusName = "已完成";
|
|
|
- break;
|
|
|
+ switch (this.info.status) {
|
|
|
+ case 1:
|
|
|
+ statusName = "待付款";
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ statusName = "待配送";
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ statusName = "配送中";
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ statusName = "已完成";
|
|
|
+ break;
|
|
|
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- return statusName;
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- clickItemEvent() {
|
|
|
- this.$emit("click", this.info);
|
|
|
- }
|
|
|
- }
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return statusName;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clickItemEvent () {
|
|
|
+ this.$emit("click", this.info);
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.order-item-view {
|
|
|
- padding: 30upx;
|
|
|
- margin-bottom: 20upx;
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- .item-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20upx;
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex: 1;
|
|
|
+ padding: 30upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ .item-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
|
|
|
- .icon {
|
|
|
- margin-right: 20upx;
|
|
|
- width: 50upx;
|
|
|
- height: 50upx;
|
|
|
- border-radius: 25upx;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- .name {
|
|
|
- font-size: 32upx;
|
|
|
- font-weight: 600;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
- .status {
|
|
|
- flex-shrink: 0;
|
|
|
- color: $mainColor;
|
|
|
- }
|
|
|
- }
|
|
|
- .item-main {
|
|
|
- display: flex;
|
|
|
+ .icon {
|
|
|
+ margin-right: 20upx;
|
|
|
+ width: 50upx;
|
|
|
+ height: 50upx;
|
|
|
+ border-radius: 25upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ flex-shrink: 0;
|
|
|
+ color: $mainColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-main {
|
|
|
+ display: flex;
|
|
|
|
|
|
- align-items: flex-end;
|
|
|
- .item-info {
|
|
|
- flex: 1;
|
|
|
+ align-items: flex-end;
|
|
|
+ .item-info {
|
|
|
+ flex: 1;
|
|
|
|
|
|
- font-size: 26upx;
|
|
|
- .info-row {
|
|
|
- margin-top: 12upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .info-label {
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .info-value {
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
- .item-price {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-shrink: 0;
|
|
|
+ font-size: 26upx;
|
|
|
+ .info-row {
|
|
|
+ margin-top: 12upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .info-label {
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .info-value {
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: 600;
|
|
|
- color: #333333;
|
|
|
- .iconfont {
|
|
|
- font-size: 28upx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|