zhywpt-sp/issueActivation/car-submit-record.vue

<!-- 车辆提交记录 -->
<template>
  <view class="hint">电子标签请到线下网点领取</view>

  <view class="list">
    <view class="item" v-for="(item, index) in state.list">
      <view class="head">
        <view class="name">
          <image
            :src="`${$imgUrl}issueActivation/icon-car.png`"
            class="icon"
          ></image>
          <text class="title">{{ item.name }}</text>
        </view>
        <view class="status text-green">{{ item.statusTxt }}</view>
      </view>
      <view class="detail">
        <view class="orders">
          <view class="order-text">
            <text class="type">申请时间：</text>
            <text class="value">{{ item.time }}</text>
          </view>
        </view>
      </view>
      <view class="btns" v-if="item.status === 3 || item.status === 4">
        <view
          class="btn btn-primary as-gravity-center"
          @click="btnClick(item)"
          >{{ item.status === 3 ? "去支付" : "去激活" }}</view
        >
      </view>
    </view>
  </view>

  <!-- 支付承诺popup -->
  <u-popup v-model="state.showPayPopup" mode="center">
    <pay-undertake @paySuccess="state.showPayPopup = false"></pay-undertake>
  </u-popup>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { msg, navTo } from "@/utils/utils";
import payUndertake from "./components/popup-pay-undertake";

const state = reactive({
  //显示支付承诺弹窗
  showPayPopup: false,

  //记录列表 status: 1-审核中 2-制卡中 3-待支付 4-待激活 5-已完成
  list: [
    {
      name: "贵AJ1234",
      status: 1,
      statusTxt: "审核中",
      time: "2022-10-22 17:50:23",
    },
    {
      name: "贵FB1234",
      status: 2,
      statusTxt: "制卡中",
      time: "2022-11-20 17:50:23",
    },
    {
      name: "贵JC1234",
      status: 3,
      statusTxt: "待支付",
      time: "2022-12-12 17:50:23",
    },
    {
      name: "贵HD1234",
      status: 4,
      statusTxt: "待激活",
      time: "2022-02-08 17:50:23",
    },
    {
      name: "贵KE1234",
      status: 5,
      statusTxt: "已完成",
      time: "2022-09-06 17:50:23",
    },
  ],
});

const btnClick = (item) => {
  if (item.status === 3) {
    //去支付
    state.showPayPopup = true;
  } else if (item.status === 4) {
    //去激活
    navTo("/pages/bluetooth/bluetooth");
  }
};
</script>

<style>
page {
  background-color: #eef7f7;
}
:deep(.u-mode-center-box) {
  border-radius: 20rpx;
}
</style>
<style lang="scss" scoped>
.hint {
  font-size: 26rpx;
  color: #ff8000;
  padding: 37rpx 34rpx 8rpx;
}
.list {
  padding: 30rpx 30rpx 0rpx;
  display: flex;
  flex-direction: column;
}

.list .item {
  background: #ffffff;
  box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  border-radius: 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-bottom: 30rpx;
  min-height: 260rpx;
}

.list .item .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 28rpx;
  border-bottom: 1px solid #dcdcdc;
}

.list .item .head .icon {
  width: 48rpx;
  height: 48rpx;
}

.list .item .head .name {
  display: flex;
  align-items: center;
}

.list .text-green {
  font-size: 26rpx;
  color: #00b38b;
}

.list .text-orange {
  font-size: 26rpx;
  color: #ff8000;
}

.list .title {
  font-size: 30rpx;
  color: #333;
  padding-left: 13rpx;
}

.list .detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 32rpx;
}

.list .detail .type {
  font-size: 26rpx;
  color: #999;
}

.list .detail .value {
  font-size: 26rpx;
  color: #333;
}

.list .finished .detail .value {
  color: #999;
}

.list .detail .odd {
  margin: 20rpx 0;
}

.list .cny {
  font-size: 26rpx;
  color: #333;
}
.list .finished .cny {
  color: #999;
}
.list .amount {
  font-size: 40rpx;
  font-weight: bold;
}

.list .finished .amount {
  color: #999;
}

.list .btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #dcdcdc;
  margin: 0 30rpx;
  padding: 20rpx 0;
}

.list .btn {
  height: 60rpx;
  // line-height: 60rpx;
  border-radius: 30rpx;
  padding: 0 24rpx;
  font-size: 26rpx;
  box-sizing: border-box;
  margin-right: 20rpx;
}

.list .btns .btn:last-child {
  margin: 0;
}

.list .btn-primary {
  border: 1px solid #00b38b;
  color: #00b38b;
}

.list .btn-normal {
  border: 1px solid #dcdcdc;
  color: #333;
}
</style>