lanan-repair-app/pages-order/reviewList/reviewList.vue

<template>
  <view class="container">
    <VNavigationBar background-color="#fff" title="选择人员" title-color="#333"></VNavigationBar>
    <view class="body">
      <div class="userList">
        <view v-for="item in list" :key="item.id" class="userItem">
          <view class="info">
            <text class="name">{{ item.name }}</text>
            <text class="num">x{{ item.num }}</text>
          </view>
          <view class="info2">
            <view class="info2-item">
              <text class="label">配件分类</text>
              <text class="value">{{ item.typeName }}</text>
            </view>
            <view class="info2-item">
              <text class="label">当前库存</text>
              <text class="value">{{ item.count }}</text>
            </view>
          </view>
        </view>
      </div>
      <u-popup bgColor="#fff" :show="show" mode="bottom" round @close="close" @open="open">
        <view class="pop">
          <view class="popHeader">
            <text class="btn1" @click="cancel">取消</text>
            <text class="popHeaderText">
              填写理由
            </text>
            <text class="btn2" @click="confirm">确定</text>
          </view>
          <view class="popContent">
            <textarea style="padding: 36rpx 32rpx" placeholder="填写审批未通过理由" v-model="argument"></textarea>
          </view>
        </view>
      </u-popup>
    </view>

    <view class="foot">
      <view class="btn1" @click="noFun">
        <image mode="aspectFit" src="/pages-order/static/dh.png" style="width: 32rpx;height: 32rpx"></image>
        取消审批
      </view>
      <view class="line"></view>
      <view class="btn2" @click="yesFun">
        <image mode="aspectFit" src="/pages-order/static/tg.png" style="width: 32rpx;height: 32rpx"></image>
        审批通过
      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue'

export default {
  components: {
    VNavigationBar,
  },
  data() {
    return {
      list: [
        {name: '7字小钩', id: 1, typeName: '机修', num: 3, count: 35},
        {name: '反光贴', id: 2, typeName: '机修', num: 3, count: 35},
        {name: '刹车油DOT4', id: 3, typeName: '喷漆', num: 3, count: 35},
      ],
      show: false,
      argument: ''
    }
  },
  onLoad(data) {
    console.log('data', data)
  },
  methods: {
    close() {
      this.show = false
    },
    open() {},
    noFun() {
      this.show = true
    },
    yesFun() {

    },
    confirm() {
      this.show = false
      uni.navigateBack()
    },
    cancel() {
      this.show = false
      this.argument = ''
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #F3F5F7;
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    height: 0;
    overflow: auto;
    padding: 20rpx 0;

    .userList {
      margin: 20rpx 32rpx 0;
      background-color: #fff;
      padding: 0 20rpx;

      .userItem {
        padding: 30rpx 0;
        border-bottom: 1rpx solid #DDDDDD;

        .info {
          margin-bottom: 30rpx;
          display: flex;
          align-items: flex-end;
          column-gap: 10rpx;
          row-gap: 20rpx;

          .name {
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;
          }

          .num {
            font-size: 28rpx;
            color: #0174F6;
          }
        }

        .info2 {
          display: flex;

          .info2-item {
            display: flex;
            flex-direction: column;
            flex: 1;
            width: 0;

            .label {
              font-size: 28rpx;
              color: #858BA0;
            }

            .value {
              font-size: 28rpx;
              color: #333333;
            }
          }
        }
      }

      .userItem:last-child {
        border-bottom: none;
      }
    }
  }

  .foot {
    background-color: #fff;
    padding: 30rpx;

    display: flex;
    align-items: center;

    .btn1, .btn2 {
      flex: 1;
      width: 0;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 10rpx;
    }

    .btn1 {
      color: #858BA0;
    }

    .btn2 {
      color: #0174F6;
    }

    .line {
      height: 32rpx;
      width: 1rpx;
      background-color: #ddd;
    }

  }

  .pop {
    //background-color: #fff;
    height: 60vh;
  }
  .popHeader {
    padding: 40rpx;

    display: flex;
    align-items: center;

    border-bottom: 1rpx solid #EEEEEE;

    .btn2 {
      color: #0174F6;
    }
    .btn1 {
      color: #999999;
    }

    .popHeaderText {
      flex: 1;
      width: 0;
      text-align: center;
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
    }
  }
  .popContent {

  }
}
</style>