kuailelunwen_new_houtai/src/components/bindGoods.vue

<template>
    <GuipDialog :dialogVisible="showBind" :showFooterButton="list.length>0"
                title="搜索商品" @confirm="handleConfirm" @cancel="handleCancel" @close="handleCancel">
        <div class="domain-wrap">
            <el-form class="el-row demo-ruleForm" ref="formRef">
                <div class="flex flex-between">
                    <GuipInput width="420px" v-model="keywords">
                        <img class="flex" slot="suffix" src="@/assets/site/input_search.svg"/>
                    </GuipInput>
                    <GuipButton type="primary" @click="handleSearch()">搜索</GuipButton>
                </div>

                <template v-if="loading">
                    <div class="goods-list" v-if="list.length>0">
                        <div class="goods-item" v-for="(row) in list" :key="row.num_iid">
                            <img :src="row.pic_url" alt="">
                            <div class="goods-info">
                                <p>{{row.title}}</p>
                                <p>¥{{row.price}}</p>
                                <GuipSelect v-if="row.skus" v-model="row.skuid" width="200px" placeholder="选择SKU" :options="row.skus"  @change="handleSelectSku(row)"/>
                                <div v-else style="height: 40px"></div>
                            </div>
                            <el-checkbox v-model="row.selected" @change="handleSelectGood(row)"></el-checkbox>
                        </div>
                    </div>
                    <el-empty v-else :image="emptyImg" :description="empty_text"></el-empty>
                </template>
            </el-form>
        </div>
    </GuipDialog>
</template>
<script>
import GuipDialog from "@/components/GuipDialog.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipButton from "@/components/GuipButton.vue";
import GuipSelect from "@/components/GuipSelect.vue";

export default {
  name: '',
  props:['showBind','uid','type','pdd_pati','pdd_pagecode'],
  components: {
      GuipSelect,
      GuipButton,
      GuipInput,
      GuipDialog
  },
  data(){
    return {
        keywords: '',
        loading: false,
        list: [],
        emptyImg:require('@/assets/table_empty.png'),
        empty_text: '',
        bindData: {}
    }
  },
  methods:{
      handleConfirm(){
          const that = this
          this.$http('POST', '/agentnew/ajax_bind_service_goods', {
              uid: that.uid,
              type: that.type,
              bind_list: that.bindData,
          }, {
              headers: {
                  'Auth': this.token
              }
          }).then(response => {
              if(response.status){
                  that.$message.success('绑定成功');
                  this.$emit('handleBind', true)
                  return true;
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      handleCancel(){
          this.$emit('handleBind', false)
      },
      handleSearch(){
          const that = this
          that.list = []
          that.loading = false
          this.$http('POST', '/agentnew/ajax_get_goods_list', {
              uid: that.uid,
              type: that.type,
              keywords: that.keywords,
              pdd_pati: that.pdd_pati,
              pdd_pagecode: that.pdd_pagecode,
          }, {
              headers: {
                  'Auth': this.token
              }
          }).then(response => {
              that.loading = true
              if(response.status){
                  if(response.data.length>0){
                      response.data.forEach((item) => {
                          item.skuid = ''
                          item.selected = false
                          if(item.skus){
                              Object.entries(item.skus).forEach(([key, val]) => {
                                  item.skus[key] = val.title
                                  if(val.price) item.skus[key] = `${val.title} ￥${val.price}`;
                              });
                          }
                      });
                      that.$nextTick(() => {
                          that.list = response.data
                      })
                  } else {
                      that.empty_text = '未查询到相关商品'
                  }
                  return true
              }
              that.empty_text = response.info
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      handleSelectGood(row){
          if(row.selected) {
             if(row.skus && !row.skuid) {
                 this.$nextTick(() => {
                     row.selected = false;
                 });
                 this.$message.warning('请选择SKU');
                 return false
             }
             this.bindData[row.num_iid] = !row.skuid ? 0 : row.skuid
          }else{
             this.$delete(this.bindData, row.num_iid);
          }
      },
      handleSelectSku(row){
          if(row.selected) {
              this.bindData[row.num_iid] = row.skuid
          }
      },
  }
}
</script>
<style lang="scss">
.el-form-item{
    margin: 0;
}
.el-dialog{
  min-height: 0;
}
.el-empty{
  padding: 20px 0;
}
.goods-list{
  max-height: 400px;
  overflow-y: scroll;
  .goods-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    background: #FAFAFA;
    padding: 16px;
    margin-top: 16px;
    letter-spacing: 0.08em;

    img{
      width: 80px;
      height: 80px;
    }

    .goods-info{
      width: 100%;
      margin: 0 22px;

      p{
        font-size: 14px;
        color: #1E2226;
      }
      p:nth-child(2){
        margin: 12px 0;
        color: #626573;
      }
    }
  }
}
</style>