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

<template>
  <view :style="{background:'url('+'../../static/bbj1@3x.png'+')'}" class="main">
    <view class="title">寄存</view>
    <view class="order">
      <view class="order-item">
        <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" style="background:#76C458 ;">
        <image src="@/static/image/scan.png" mode="scaleToFill" style="width: 57rpx;height: 57rpx" />
        <view style="color: #fff;margin-top:10rpx" @click="scanOrder">扫码下单</view>
      </view>
    </view>
    <view class="list">
      <view style="color: #76C458">目前可用寄存仓库地址</view>
      <u-divider :dashed="true" lineColor="#4E964D"></u-divider>
      <view class="list-item">
        <view>目前可用地址某某某地区</view>
        <view>剩余200位置</view>
      </view>
      <u-divider :dashed="true" lineColor="#4E964D"></u-divider>
      <view class="list-item">
        <view>目前可用地址某某某地区</view>
        <view>剩余200位置</view>
      </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();
  },
  components: {
    tabbar
  },
  methods: {
    scanOrder() {
      uni.scanCode({
        onlyFromCamera: false,
        success: res => {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.main {
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx;
  .title {
    margin-top: 40rpx;
    color: #4e964d;
    font-size: 32rpx;
  }
  .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;
    }
  }
  .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>