distribution-uni/package1/billing/goodsOutInfo.vue

<template>
  <view>
    <view class="headerBox box">
      <view class="img">
        <image src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/c09dfa8c61c949f8b0dbb8f041d5a501.png" mode=""></image>
      </view>
      <view class="content">
        <view class="">
          商品name
        </view>
        <text>商品货号</text>
      </view>
    </view>
    <view class="formBox">
      <u-cell-group :border="false">
        <u-cell title="规格" label="先选中规格，再到下方对应的尺码中录入数量"></u-cell>
      </u-cell-group>
      <view class="tag-item-wrapper">
        <view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
          <u-tag :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index"
                 @click="radioClick">
          </u-tag>
        </view>
      </view>
    </view>
    <view class="inventory formBox">
      <view class="inventory-number">
        <u-row>
          <u-col :span="4">
            尺码
          </u-col>
          <u-col :span="4">
            当前库存
          </u-col>
          <u-col :span="4">

          </u-col>
        </u-row>
      </view>
      <view class="inventory-number">
        <u-row>
          <u-col :span="4">
            S
          </u-col>
          <u-col :span="4">
            1
          </u-col>
          <u-col :span="4">
            <u-number-box v-model="value" @change="valChange"></u-number-box>
          </u-col>
        </u-row>
      </view>
    </view>
    <view class="tui-tabbar">
      <u-button type="primary" :plain="true" shape="circle" @tap.stop="submit(ret)">确定</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radios: [{
        checked: true
      },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        }
      ],
      value:1
    }
  },
  onLoad() {
    this.getAttributeList()
  },
  methods: {
    radioClick(name) {
      this.radios.map((item, index) => {
        item.checked = index === name ? true : false
      })
    },
    async getAttributeList() {
      const res = await  this.tui.request('/app/attribute/list','get',{type:2,categoryId:2},false,false,false)
    }
}
}
</script>

<style lang="scss">
.formBox {
  margin: 20rpx;
  padding: 20rpx 26rpx;
  border-radius: 14rpx;
  box-shadow: 0px 1px 10px 2px #e2e2e2;
  background-color: #fff;

  .uni-data-select {
    width: 100%;
  }

  .tui-order-title {
    position: relative;
    font-size: 28upx;
    line-height: 28upx;
    padding-left: 16upx;
    box-sizing: border-box;
  }

  .tui-order-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border-left: 8upx solid $u-primary;
    height: 120%;
    border-radius: 4upx;
  }
  .u-cell {
    .u-cell__body {
      padding:10px 0;
      .u-input {
        flex:4;
      }
    }
  }
}

.tui-tabbar {
  width: 100%;
  height: 98rpx;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 26rpx;
  box-shadow: 0 0 1px rgba(0, 0, 0, .3);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 996;
}
.u-page__tag-item {
  margin-right: 20upx;
  margin-bottom: 20upx;
}
.tag-item-wrapper {
  margin-top: 20upx;
  display: flex;
  flex-flow: wrap;
}
.inventory-number {
  padding: 15upx 0;
}
.headerBox {

  display: flex;

  image {
    width: 150rpx;
    height: 150rpx;
  }

  .content {
    padding-left: 14rpx;

    view {
      line-height: 50rpx;
    }

    text {
      color: #909399;
    }
  }
}
.box {
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 14rpx;
  box-shadow: 0px 1px 10px 2px #e2e2e2;
  background-color: #fff;

  .redText {
    color: #f00;
  }
}
</style>