uni-Identify-quality/pages/home/index.vue

<template>
  <view class="main">
    <title-block style="flex-shrink: 0; width: 100%" title="寄存"></title-block>
    <view class="order">
      <view
        :class="['order-item', isPass !== 2 ? 'disabled-div' : '']"
        @click.stop="goConsignmen"
      >
        <image
          src="@/static/image/write.png"
          mode="scaleToFill"
          style="width: 63rpx; height: 62rpx"
        />
        <view style="color: #fff; margin-top: 10rpx">填写下单</view>
      </view>
      <view
        :class="['order-item', isPass !== 2 ? 'disabled-div' : '']"
        style="background: #76c458"
        @click.stop="scanOrder"
      >
        <image
          src="@/static/image/scan.png"
          mode="scaleToFill"
          style="width: 57rpx; height: 57rpx"
        />
        <view style="color: #fff; margin-top: 10rpx">扫码下单</view>
      </view>
    </view>
    <view class="list">
      <view style="color: #76c458">目前可用寄存仓库地址</view>
      <u-divider :dashed="true" lineColor="#4E964D"></u-divider>
      <view v-for="(item, index) in addressList" :key="item.ID">
        <view class="list-item">
          <view>{{ item.address }}</view>
          <view>剩余{{ item.leftNum }}位置</view>
        </view>
        <u-divider
          :dashed="true"
          lineColor="#4E964D"
          v-if="index !== addressList.length - 1"
        ></u-divider>
      </view>
    </view>
    <tabbar :current="0"></tabbar>
  </view>
</template>
<script>
import tabbar from "../../components/uiq-tabbar/uiq-tabbar.vue";

export default {
  name: "index",
  onLoad() {
    uni.hideTabBar();
  },
  onShow() {
    this.getAddress();
    this.pddIsPass();
  },
  components: {
    tabbar,
  },
  data() {
    return {
      addressList: [],
      isPass: 0,
    };
  },
  methods: {
    scanOrder() {
      if (this.isPass !== 2) return this.$common.msgToast("护照资料还在审核中");
      uni.removeStorageSync("scanlist");
      uni.scanCode({
        onlyFromCamera: false,
        success: (res) => {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
          uni.navigateTo({
            url: "/pages/scanFeedback/index?url=" + res.result,
          });
        },
      });
    },
    async getAddress() {
      const res = await this.$api.deposit.address();
      console.log(res);
      if (res.status === 0) {
        this.addressList = res.data.data;
      } else {
        this.$common.msgToast(res.msg);
      }
    },
    goConsignmen() {
      if (this.isPass !== 2) return this.$common.msgToast("护照资料还在审核中");
      uni.navigateTo({
        url: "/pages/consignment-painting/index",
      });
    },
    async pddIsPass() {
      const res = await this.$api.deposit.fddIsPass();
      if (res.status === 0) {
        this.isPass = res.data.fdd.status;
      } else {
        this.$common.msgToast(res.msg);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.main {
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30rpx;
  background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png");

  .order {
    width: 100%;
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
    .order-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 330rpx;
      height: 208rpx;
      border-radius: 20rpx;
      background: #4e964d;
    }
    .disabled-div {
      opacity: 0.5; /* 降低透明度 */
    }
  }
  .list {
    margin-top: 40rpx;
    width: 100%;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 12rpx 20rpx;
    display: flex;
    flex-direction: column;
    background: #fff;
    font-size: 24rpx;
    .list-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      color: #939393;
    }
  }
}
</style>