lxp_Maxcess/pages/main/myOrder/factoryList.vue

<template>
  <view class="item-box" v-for="(item,index) of props.dataList">
    <view class="time-state">
      <view style="color: #666666;">下单时间：{{ item.time }}</view>
      <view v-if="item.state === 0" style="color: #0129D3">等待接单</view>
      <view v-if="item.state === 1" style="color: #0129D3">已接单</view>
      <view v-if="item.state === 2" style="color: #0129D3">待发货</view>
      <view v-if="item.state === 3" style="color: #0129D3">待支付</view>
      <view v-if="item.state === 4" style="color: #0129D3">待收货</view>
      <view v-if="item.state === 5" style="color: #0129D3">已完成</view>
    </view>
    <view class="tit-tip multi-line-omit">{{ item.text }}</view>
    <view style="color: #F22727;margin-top: 20rpx">
      <span style="font-size: 28rpx;font-weight: 600;">￥</span>
      <span style="font-family: Bebas;font-weight: 400;font-size: 42rpx;">{{ item.q }}</span>
    </view>
    <view v-if="item.state === 0" class="item-btn">
      <up-button class="btn" size="small" color="#0129D3" shape="circle" type="primary" text="取消订单"></up-button>
    </view>
    <view v-if="item.state === 1" class="item-btn">
      <up-button class="btn" size="small" color="#0129D3" shape="circle" :plain="true" type="primary" text="联系商家"></up-button>
      <up-button class="btn" size="small" color="#0129D3" shape="circle" :plain="true" type="primary" text="取消订单"></up-button>
      <up-button class="btn" size="small" color="#0129D3" shape="circle" type="primary" text="修改价格"></up-button>
      <up-button class="btn" size="small" color="#0129D3" shape="circle" type="primary" text="签约"></up-button>
    </view>
    <view v-if="item.state === 2" class="item-btn">
      <up-button class="btn" size="small" color="#0129D3" shape="circle" :plain="true" type="primary" text="联系商家"></up-button>
      <up-button class="btn" size="small" color="#0129D3" shape="circle" :plain="true" type="primary" text="催发货"></up-button>
      <up-button class="btn" size="small" color="#0129D3" shape="circle" type="primary" text="取消订单"></up-button>
    </view>
    <view v-if="item.state === 3" class="item-btn">
      <up-button class="btn" size="small" color="#0129D3" shape="circle" :plain="true" type="primary" text="联系商家"></up-button>
      <up-button class="btn" size="small" color="#0129D3" shape="circle" type="primary" text="支付订单"></up-button>
    </view>
    <view v-if="item.state === 4" class="item-btn">
      <up-button class="btn" size="small" color="#0129D3" shape="circle" :plain="true" type="primary" text="查看物流"></up-button>
      <up-button class="btn" size="small" color="#0129D3" shape="circle" type="primary" text="签名收货"></up-button>
    </view>
    <view v-if="item.state === 5" class="item-btn">
      <up-button class="btn" size="small" color="#0129D3" shape="circle" :plain="true" type="primary" text="再来一单"></up-button>
      <up-button class="btn" size="small" color="#0129D3" shape="circle" :plain="true" type="primary" text="申请售后"></up-button>
      <up-button class="btn" size="small" color="#0129D3" shape="circle" type="primary" text="评价"></up-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import {reactive,ref,defineProps} from 'vue';
import {onLoad, onShow} from '@dcloudio/uni-app'
const props = defineProps({
  dataList:{
    type:Array,
    default:()=>[
      {
        time: '2023/09/02 12:00',
        state: 0,
        text:'专版单张： -210*285-双铜纸[157克]-彩色-双面印-1000(张)-单面覆亮膜',
        q:'88.00'
      },
      {
        time: '2023/09/02 12:00',
        state: 1,
        text:'专版单张： -210*285-双铜纸[157克]-彩色-双面印-1000(张)-单面覆亮膜',
        q:'888.00'
      },
      {
        time: '2023/09/02 12:00',
        state: 2,
        text:'专版单张： -210*285-双铜纸[157克]-彩色-双面印-1000(张)-单面覆亮膜',
        q:'8888.00'
      },
      {
        time: '2023/09/02 12:00',
        state: 3,
        text:'专版单张： -210*285-双铜纸[157克]-彩色-双面印-1000(张)-单面覆亮膜',
        q:'8.00'
      },
      {
        time: '2023/09/02 12:00',
        state: 4,
        text:'专版单张： -210*285-双铜纸[157克]-彩色-双面印-1000(张)-单面覆亮膜',
        q:'88.00'
      },
      {
        time: '2023/09/02 12:00',
        state: 5,
        text:'专版单张： -210*285-双铜纸[157克]-彩色-双面印-1000(张)-单面覆亮膜',
        q:'88.00'
      }
    ]
  }
})
</script>

<style scoped lang="scss">
.item-box{
  width: 100%;
  padding: 32rpx;
  background-color: white;
  border-radius: 24rpx;
  margin-bottom: 32rpx;
  .time-state{
    font-weight: 400;
    font-size: 24rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18rpx;
  }
  .tit-tip {
    text-align: justify;
    font-size: 30rpx;
    font-weight: 400;
    color: #353635;
    //font-family: PingFang SC;
  }
  .item-btn{
    margin-top: 20rpx;
    display: flex;
    justify-content: flex-end;
    .btn{
      width: 25%;
      //margin: 0!important;
      margin: 0 0 0 18rpx !important;
    }
  }
}
</style>