hemall.terabimsoft.com.cn/plugins/phone-bill-pro/views/backend/widget/base/phoneBillPro.js

define({
  template: `
  <div>
    <el-form ref="auth">
      <div class="vue-main-title">
        <div class="vue-main-title-left"></div>
        <div class="vue-main-title-content">话费充值</div>
      </div>
      <div style="margin:0 auto;width:80%;">  
        <el-form-item label="话费充值">
          <el-radio v-model="form.phone_bill_pro_goods.is_open" :label="1">开启</el-radio>
          <el-radio v-model="form.phone_bill_pro_goods.is_open" :label="0">关闭</el-radio>
          <div class="form-item_tips">首次发布商品，先点击发布商品，再重新编辑商品，设置话费充值规格！</div>
        </el-form-item >     
        <el-form-item label=" ">
          <el-table :data="list" border style="width: 100%">
            <el-table-column prop="spec" label="类型" width='120' ></el-table-column>
            <el-table-column prop="charge_type" label="话费类型"  width='240' >
              <template slot-scope="scope">
                <el-select v-model="scope.row.charge_type" placeholder="请选择">
                  <el-option
                    v-for="item in chargeTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="desc" label="自定义文案"  width='240' >
              <template slot-scope="scope">
                <el-input v-model="scope.row.desc" type="textarea" style="padding-right:10px"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="面值">
              <!-- 分行显示 -->
              <template slot-scope="scope">
                <div class="moreCol">
                  <el-table border :data='scope.row.specValueList' > 
                    <el-table-column prop='spec_value' label="名称" >
                      <template slot-scope="scope">
                        <span>{{scope.row.spec_value}}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <!-- 分行显示 -->
              <template slot-scope="scope">
                <div class="moreCol">
                  <el-table border :data='scope.row.statusList'> 
                    <el-table-column prop='status' >
                      <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>

            <el-table-column  label="关联话费面值">
              <!-- 分行显示 -->
              <template slot-scope="scope">
                <div class="moreCol">
                  <el-table border :data='scope.row.typeList' > 
                    <el-table-column prop='type' label="名称" >
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.type" placeholder="请选择">
                          <el-option
                            v-for="item in typeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>
            
            <el-table-column v-if="channel == 'aggregation-cps'" label="关联商品ID">
              <!-- 分行显示 -->
              <template slot-scope="scope">
                <div class="moreCol">
                  <el-table border :data='scope.row.typeList' > 
                    <el-table-column prop='type' label="名称" >
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.bingbird_goods_id" placeholder="请输入内容"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="form-item_tips">如果您修改了商品规格，需要手动设置关联!</div>
        </el-form-item>
        <el-form-item label="顶部banner图片" label-width="113px">
          <el-input v-model="form.phone_bill_pro_goods.banner" style="width: 60%;">
            <template slot="append"><span @click="displaySelectMaterialPopup('thumb')">选择图片</span></template>
          </el-input>
        </el-form-item>
        <el-form-item label=" " label-width="113px">
          <div style="position: relative;">
            <img :src="form.phone_bill_pro_goods.banner" style="width: 150px; height: 150px; border-radius: 5px; cursor: pointer;object-fit:cover;" />
            <i class="el-icon-close" style="position: absolute;margin-left: 10px;" @click="btnDelete"></i>
          </div>
          <div class="form-item_tips">建议尺寸: 640 * 640 ，或正方型图片</div>
        </el-form-item>
      </div>
    </el-form>
    <upload-multimedia-img
      :upload-show="showSelectMaterialPopup"
      :type="materialType"
      :name="formFieldName"
      selNum="one"
      @replace="showSelectMaterialPopup = !showSelectMaterialPopup"
      @sure="selectedMaterial"
    ></upload-multimedia-img>
  </div>
  `,
  style: `
  .moreCol .el-table thead{
    display:none
  }
  .moreCol .el-table--border, .el-table--group{
    border: none;
  }
  .el-table .cell{
    padding-right:0 !important;
  }
  .el-table th > .cell {
    text-align: center;
  }
  .el-table .cell {
    text-align: center;
  }   
  `,
  props: {
    form: {
      default() {
        return {};
      },
    },
    formKey: {
      type: String,
    },
  },
  data() {
    return {
      showSelectMaterialPopup: false,
      materialType: "1",
      formFieldName: "",
      channel: '',
      list: [
        {
          spec: '',
          status:"",
          desc:"",
          charge_type:"",
          specValueList:[
            {
              spec_value:''
            },
            {
              spec_value:''
            },
            {
              spec_value:''
            }
          ],
          typeList:[
            {
              type:'',
              bingbird_goods_id:0
            },
            {
              type:'',
              bingbird_goods_id:0
            },
            {
              type:'',
              bingbird_goods_id:0
            }
          ],
          statusList: [
            {status: 0},
            {status: 0},
            {status: 0},
          ]
        },
        {
          spec: '',
          status:"",
          desc:"",
          charge_type:"",
          specValueList:[
            {
              spec_value:''
            },
            {
              spec_value:''
            },
            {
              spec_value:''
            }
          ],
          typeList:[
            {
              type:'',
              bingbird_goods_id:0
            },
            {
              type:'',
              bingbird_goods_id:0
            },
            {
              type:'',
              bingbird_goods_id:0
            }
          ],
          statusList: [
            {status: 0},
            {status: 0},
            {status: 0},
          ]
        }
      ],
      typeList: [{
        value: 1,
        label: '50'
      }, {
        value: 2,
        label: '100'
      }, {
        value: 3,
        label: '200'
      }],
      chargeTypeList: [{
        value: 0,
        label: '慢充'
      }, {
        value: 1,
        label: '快充'
      }],
    }
  },
  created() {
    // console.log(this.form,115);
    // this.form.options =  [
    //   {
    //       "goods_option_id": 79,
    //       "desc": "",
    //       "status": 0,
    //       "charge_type": "1",
    //       "type": "1",
    //       "spec": "蓝色",
    //       "spec_value": "规格1"
    //   },
    //   {
    //       "goods_option_id": 80,
    //       "desc": "",
    //       "status": 0,
    //       "charge_type": "0",
    //       "type": "2",
    //       "spec": "蓝色",
    //       "spec_value": "规格2"
    //   },
    //   {
    //       "goods_option_id": 81,
    //       "desc": "",
    //       "status": 0,
    //       "charge_type": "1",
    //       "type": "3",
    //       "spec": "绿色",
    //       "spec_value": "规格1"
    //   },
    //   {
    //       "goods_option_id": 82,
    //       "desc": "",
    //       "status": 0,
    //       "charge_type": "0",
    //       "type": "1",
    //       "spec": "绿色",
    //       "spec_value": "规格2"
    //   },
    //   {
    //       "goods_option_id": 110,
    //       "desc": "",
    //       "status": 0,
    //       "charge_type": "1",
    //       "type": "2",
    //       "spec": "蓝色",
    //       "spec_value": "规格3"
    //   },
    //   {
    //       "goods_option_id": 111,
    //       "desc": "1",
    //       "status": 0,
    //       "charge_type": "0",
    //       "type": "1",
    //       "spec": "绿色",
    //       "spec_value": "规格3"
    //   }
    // ]
    this.channel = this.form.channel;
    if(this.form.options.length == 0){
      this.list = []
      return
    }
    let itemList = []
    let chargeTypeList = []
    let descList = []
    console.log(this.form.options)
    for(let item of this.form.options){
      itemList.push(item.spec)
      chargeTypeList.push(item.charge_type)
      descList.push(item.desc)
    }
    itemList = Array.from(new Set(itemList))
    chargeTypeList = Array.from(new Set(chargeTypeList))
    descList = Array.from(new Set(descList))
    this.list[0].spec = itemList[0]
    this.list[1].spec = itemList[1]
    this.list[0].charge_type = chargeTypeList[0]
    this.list[1].charge_type = chargeTypeList[1]
    this.list[0].desc = descList[0]
    this.list[1].desc = descList[1]

    this.form.options.slice(0,3).forEach((item,index) => {
      this.list[0].typeList[index].type = item.type
      this.list[0].typeList[index].bingbird_goods_id = item.bingbird_goods_id
      this.list[0].specValueList[index].spec_value = item.spec_value
      this.list[0].statusList[index].status = item.status;
    })
    this.form.options.slice(3,6).forEach((item,index) => {
      this.list[1].typeList[index].type = item.type
      this.list[1].typeList[index].bingbird_goods_id = item.bingbird_goods_id
      this.list[1].specValueList[index].spec_value = item.spec_value
      this.list[1].statusList[index].status = item.status;
    })
    console.log(itemList,this.list,'itemList');
  },
  methods: {
    validate() {
      this.form.options.forEach((item,index) => {
        if(index < 3){
          item.desc = this.list[0].desc
          item.charge_type =  this.list[0].charge_type
          item.spec = this.list[0].spec
          item.spec_value = this.list[0].specValueList[index].spec_value
          item.type = this.list[0].typeList[index].type
          item.bingbird_goods_id = this.list[0].typeList[index].bingbird_goods_id
          item.status = this.list[0].statusList[index].status;
        }else{
          item.desc = this.list[1].desc
          item.charge_type =  this.list[1].charge_type
          item.spec = this.list[1].spec
          item.spec_value = this.list[1].specValueList[index - 3].spec_value
          item.type = this.list[1].typeList[index - 3].type
          item.bingbird_goods_id = this.list[1].typeList[index - 3].bingbird_goods_id
          item.status = this.list[1].statusList[index - 3].status;
        }
      })
      // this.form.options.forEach(item => {
      //   item.status = this.form.phone_bill_pro_goods.is_open
      // })
      return {
        status:this.form.phone_bill_pro_goods.is_open,
        banner:this.form.phone_bill_pro_goods.banner,
        options:this.form.options
      }
    },
    displaySelectMaterialPopup(fieldName = "thumb", type = 1) {
      this.formFieldName = fieldName;
      this.showSelectMaterialPopup = !this.showSelectMaterialPopup;
      this.materialType = String(type);
    },
    selectedMaterial(name, image, imageUrl) {
      this.form.phone_bill_pro_goods.banner = imageUrl[0].url
    },
    btnDelete(){
      this.form.phone_bill_pro_goods.banner  = ""
    }
  },
});