zhywpt-sp/subpackage/personal-center/official-car-issue-result.vue

<!-- 公务车发行-订单查询结果 -->
<template>
  <view class="list">
    <view class="item">
      <view class="head">
        <view class="name">
          <image
            :src="`${$imgUrl}issueActivation/icon-numberplate.png`"
            class="icon"
          ></image>
          <text class="title">{{ state.numberplate }}</text>
        </view>
      </view>
      <view class="detail">
        <view class="orders">
          <view class="order-text">
            <text class="type">车牌颜色：</text>
            <text class="value">{{ state.numberplateColor }}</text>
          </view>
          <view class="order-text odd">
            <text class="type">订单进度：</text>
            <text class="value">{{ state.orderProgress }}</text>
          </view>
          <view class="order-text">
            <text class="type">订单状态：</text>
            <text class="value">{{
              state.orderStatus === 1 ? "待发货" : "待激活"
            }}</text>
          </view>
        </view>
      </view>
      <view class="btns" v-if="state.orderStatus === 2">
        <view
          class="btn btn-primary as-gravity-center"
          @click="$util.navTo('/pages/bluetooth/bluetooth')"
          >去激活</view
        >
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { msg } from "@/utils/utils";

const state = reactive({
  numberplate: "贵A1236",
  numberplateColor: "白色",
  orderProgress: "省中心已制卡",
  orderStatus: 2, //1-待发货 2-待激活
});
</script>

<style>
page {
  background-color: #eef7f7;
}
</style>
<style lang="scss" scoped>
.list {
  padding: 30rpx 30rpx 140rpx;
  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;
}

.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: 38rpx;
  height: 38rpx;
  margin-right: 20rpx;
}

.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;
}

.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;
  text-align: center;
  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>