splitItem.vue

<!--款式委托 拆弹-->
<template>
  <view>
    <!--navbar-->
    <u-navbar title="拆单"
              :border-bottom="false"
              :background="{backgroundColor: 'whitesmoke'}">
    </u-navbar>

    <view class="u-p-30 bg-fff">
      <hs-tip-title title="所选面料"></hs-tip-title>
      <view ></view>
    </view>
    <view class="u-p-30 bg-fff">
      <hs-tip-title title="风格款数要求"></hs-tip-title>
      <view v-for="(item,index) in brandList" :key="index" class="u-p-t-16 u-p-b-30 u-border-bottom">
        <view class="u-flex u-p-b-16">
          <view class="u-line-1 u-flex-1">
            {{item.name}}
          </view>
          <text class="del" @click="del">删除</text>
        </view>
        <u-number-box v-model="item.num"></u-number-box>
      </view>
      <u-button plain @click="addBrandList"  type="primary">+添加风格</u-button>
    </view>

    <u-select
        @confirm="brandSelectCallback"
        safe-area-inset-bottom v-model="brandSelectShow" :list="brandSelectList" mode="mutil-column-auto"></u-select>

    <view class="footer" id="footer">
      <view class="footer-btn">
        <view class="custom-style-round-circle custom-style-btn custom-style">
          <view class="custom-style-left save">保存</view>
          <view class="custom-style-right submit">
            <view class="title">立即发布</view>
            <view class="desc">将被拆分为<text class="color">2个委托</text></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import HsTipTitle from "../../components/hs-tip-title/hs-tip-title";
export default {
  name: "splitItem",
  components: {HsTipTitle},
  data(){
    return{
      brandList: [
        {name: '男装｜上装｜25～35岁｜时尚休闲', num: 12},
        {name: '男装｜上装｜15～25岁｜时尚休闲时尚休闲时', num: 12},
      ],
      brandSelectShow: false,
      timePickerShow: true,
      brandSelectList: [
        {
          value: 1,
          label: '男装',
          children: [
            {
              value: 11,
              label: '上装',
              children:[
                {
                  value: 21,
                  label: '18-25岁',
                  children:[
                    {
                      value: 31,
                      label: '时尚休闲',
                    },
                    {
                      value: 32,
                      label: '运动',
                    }
                  ]
                },
                {
                  value: 22,
                  label: '25-35岁',
                  children:[
                    {
                      value: 33,
                      label: '时尚休闲',
                    },
                    {
                      value: 34,
                      label: '运动',
                    }
                  ]
                },
              ]
            }
          ]
        }
      ],
    }
  },
  methods:{
    addBrandList(){
      this.brandSelectShow = true;
    },
    brandSelectCallback(e){
      this.brandList.push({
        num: 0,
        name: e.map((item) => {
          return item.label
        }).join("｜")
      })
    }

  }
}
</script>

<style scoped lang="scss">
@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.del{
  color: #FA5353;
}
.bg-fff{
  background: #fff;
}
.custom-style{
  color: #fff; height: 88rpx; line-height: 88rpx;
  @include vue-flex;
  &-btn{
    overflow: hidden;
  }
  &-round-circle{
    border-radius: 100rpx;
  }
  /*background: #000;*/
  .custom-style-left{ width: 240rpx; background: #d6d6d6; text-align: center }
  .custom-style-right{ flex: 1; background: rgba(0,0,0,0.80);text-align: center}
  .save{
    font-size: 34rpx;
    color: #000000;
  }
  .submit{
    font-weight: 500;
    font-size: 34rpx;
    line-height: 100%;
    .title{
      margin: 8rpx 0;
    }
    .desc{

      font-size: 20rpx;
      .color{
        color: #DDA973;
      }
    }
  }
}
.footer {
  position: fixed;
  width: 100%;
  bottom: 0;

  z-index: 998;
  background: #fff;
  box-shadow: 0px -4rpx 6rpx 0px rgba(178,182,214,0.10);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .footer-btn{
    padding: 20rpx 60rpx;
  }
}
</style>