health-front/pages_order/applyService/serviceSelectPopup.vue

<template>
  <view>
    <uv-popup ref="popup" mode="bottom" bgColor="none" >
      <view class="popup__view">
        <view class="flex header">
          <view class="title">选择售后类型</view>
          <button class="btn" @click="close">关闭</button>
        </view>
        <view class="form">
          <uv-form 
            ref="form"
            :model="form"
            :rules="rules"
            errorType="toast"
          >
            <view class="form-item">
              <uv-form-item prop="type" :customStyle="formItemStyle">
                <view class="form-item-label">请选择售后类型</view>
                <view class="form-item-content flex tags">
                  <view 
                    v-for="item in typeOptions" 
                    :key="item.id"
                    :class="['flex', 'tag', item.value === form.type ? 'is-active' : '']"
                    @click="onSelectType(item.value)"
                  >
                    {{ item.label }}
                  </view>
                </view>
              </uv-form-item>
            </view>
            <view class="form-item">
              <uv-form-item prop="appletOrderProductList" :customStyle="formItemStyle">
                <view class="form-item-label">选择需要售后的商品</view>
                <view class="form-item-content products">
                  <view class="product" v-for="(item, index) in appletOrderProductList" :key="item.id">
                    <productCard 
                      mode="edit"
                      :data="item" 
                      @select="onSelectProduct(index, $event)" 
                    ></productCard>
                  </view>
                </view>
              </uv-form-item>
            </view>
          </uv-form>
        </view>
        <view class="footer">
          <button class="flex btn" @click="onNext">下一步</button>
        </view>
      </view>
		</uv-popup>
  </view>
</template>

<script>
  import productCard from './productCard.vue'

  export default {
    components: {
      productCard,
    },
    data() {
      return {
        id: null,
        appletOrderProductList: [],
        typeOptions: [
          {
            id: '001',
            label: '退货退款',
            value: 0,
          },
          {
            id: '002',
            label: '换货',
            value: 1,
          },
          {
            id: '003',
            label: '其他',
            value: 2,
          },
        ],
        form: {
          type: null,
          appletOrderProductList: [],
        },
        rules: {
          'type': {
            type: 'number',
            required: true,
            message: '请选择售后类型',
          },
          'appletOrderProductList': {
            type: 'array',
            required: true,
            message: '请选择售后商品',
          },
        },
        formItemStyle: { padding: 0 },
      }
    },
    methods: {
      open(data) {

        const {
          id,
          appletOrderProductList,
        } = data

        this.id = id
        this.appletOrderProductList = appletOrderProductList.map(item => ({ ...item, selected: false }))

        this.$refs.popup.open()
      },
      close() {
        this.$refs.popup.close()
      },
      onSelectType(type) {
        this.form.type = type
      },
      onSelectProduct(index, selected) {
        console.log('onSelectProduct', index, selected)

        this.appletOrderProductList[index].selected = selected

				this.form.appletOrderProductList = this.appletOrderProductList.filter(item => item.selected)
      },
      async onNext() {

        try {
          const res = await this.$refs.form.validate()

          console.log('onNext res', res)

          const {
            type,
            appletOrderProductList,
          } = this.form

				  this.$store.commit('setApplyServiceProduct', appletOrderProductList)

          this.$utils.navigateTo(`/pages_order/applyService/index?id=${this.id}&type=${type}`)

          this.close()

        } catch (err) {
          console.log('onNext err', err)
        }

      },
    },
  }
</script>

<style scoped lang="scss">

  .popup__view {
    width: 100vw;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #FFFFFF;
    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;
  }

  .header {
    position: relative;
    width: 100%;
    padding: 24rpx 0;
    box-sizing: border-box;
    border-bottom: 2rpx solid #EEEEEE;

    .title {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      line-height: 1.4;
      color: #181818;
    }

    .btn {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      line-height: 1.4;
      color: #8B8B8B;
      position: absolute;
      top: 26rpx;
      left: 40rpx;
    }

  }

  .form {
    &-item {
      & + & {
        border-top: 2rpx solid #EEEEEE;
      }

      &-label {
        padding: 24rpx 40rpx;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 1.4;
        color: #181818;
      }
    }
  }

  .tags {
    padding: 12rpx 44rpx 44rpx 44rpx;
    column-gap: 24rpx;

    .tag {
      flex: 1;
      padding: 18rpx 0;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 1.4;
      color: #181818;
      background: #F9F9F9;
      border: 2rpx solid #F9F9F9;
      border-radius: 16rpx;
      box-sizing: border-box;

      &.is-active {
        color: #7451DE;
        background: #F2EEFF;
        border-color: #7451DE;
      }
    }
  }

  .products {
    padding: 0 32rpx;
  }

  .product {
    & + & {
      margin-top: 32rpx;
    }
  }

  .footer {
    width: 100%;
    padding: 32rpx 40rpx;
    box-sizing: border-box;
    border-top: 2rpx solid #F1F1F1;

    .btn {
      width: 100%;
      padding: 16rpx 0;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      line-height: 1.4;
      color: #FFFFFF;
      background-image: linear-gradient(to right, #4B348F, #845CFA);
      border-radius: 41rpx;
    }
  }

</style>