caimei-authentic-manager/src/views/admin/member/handsel.vue

<template>
  <div class="app-container">
    <div class="section">
      <!-- 选择供应商 -->
      <div class="item">
        <div class="label"><span>*</span>供应商：</div>
        <el-button size="mini" type="primary" @click="handleChooseSupplier">选择供应商</el-button>
      </div>
      <!-- 选中的供应商列表 -->
      <el-table :data="currentSupplierList" class="table-cell" empty-text="请选择供应商">
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column property="name" label="供应商名称" />
        <el-table-column label="供应商类型" align="center" width="120">
          <template slot-scope="{ row }">
            <span v-if="row.shopType === 1">品牌方</span>
            <span v-else>代理商</span>
          </template>
        </el-table-column>
        <el-table-column label="登录账号" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.loginAccount">{{ row.loginAccount }}</span>
            <span v-else>未绑定</span>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" align="center" />
        <el-table-column prop="linkMan" label="联系人" align="center" />
        <el-table-column label="操作" align="center">
          <template>
            <el-button type="primary" size="mini" @click="removeSupplier">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 选择套餐 -->
      <div class="item">
        <div class="label"><span>*</span>套餐：</div>
        <el-select v-model="selected" placeholder="请选择" @change="handlePackageChange">
          <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <!-- 选中的套餐 -->
      <el-table :data="currentPackageList" class="table-cell" empty-text="请选择会员套餐">
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column prop="name" label="套餐名称" align="center" />
        <el-table-column label="会员期限" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.unit === 1">{{ row.duration }}月</span>
            <span v-if="row.unit === 2">{{ row.duration }}年</span>
          </template>
        </el-table-column>
        <el-table-column label="原价" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.originalPrice | formatPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="现价" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.price | formatPrice }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 确认 取消 -->
    <div class="control-box">
      <el-button type="warning" @click="navigateBack">返回</el-button>
      <el-button type="primary" @click="onSubmit">开通</el-button>
    </div>

    <!-- 选择供应商dialog -->
    <el-dialog title="选择供应商" :visible.sync="dialogTableVisible" width="66%" @closed="handleDialogClosed">
      <div>
        <div class="filter-container">
          <div class="filter-control">
            <div class="filter-control">
              <span>供应商名称:</span>
              <el-input
                v-model="listQuery.shopName"
                size="mini"
                placeholder="供应商名称"
                clearable
                @keyup.enter.native="fetchSupplierList"
              />
            </div>
            <div class="filter-control">
              <span>供应商类型:</span>
              <el-select
                v-model="listQuery.shopType"
                placeholder="供应商类型"
                size="mini"
                clearable
                @change="fetchSupplierList"
              >
                <el-option label="所有类型" value="" />
                <el-option label="代理商" :value="2" />
                <el-option label="品牌方" :value="1" />
              </el-select>
            </div>
            <div class="filter-control">
              <span>手机号:</span>
              <el-input
                v-model="listQuery.mobile"
                clearable
                size="mini"
                placeholder="手机号"
                @keyup.enter.native="fetchSupplierList"
              />
            </div>
            <div class="filter-control">
              <span>联系人:</span>
              <el-input
                v-model="listQuery.linkMan"
                clearable
                size="mini"
                placeholder="联系人"
                @keyup.enter.native="fetchSupplierList"
              />
            </div>
            <div class="filter-control">
              <el-button type="primary" size="mini" @click="filterSupplierList">查询</el-button>
            </div>
          </div>
        </div>
        <el-table
          v-infinite-scroll="onLoad"
          :data="supplierList"
          class="infinite-list hide-table-check-all"
          style="overflow: auto"
          :infinite-scroll-delay="300"
          :infinite-scroll-immediate="false"
          header-row-class-name="tableHeader"
          highlight-current-row
          @row-click="handleSelectSupplier"
        >
          >
          <el-table-column label="选择" width="55" align="center">
            <template slot-scope="{ row }">
              <el-radio v-model="selectedAuthUserId" :label="row.authUserId"><span v-show="false">1</span></el-radio>
            </template>
          </el-table-column>
          <el-table-column label="序号" type="index" width="80" align="center" />
          <el-table-column property="name" label="供应商名称" />
          <el-table-column label="供应商类型" align="center" width="120">
            <template slot-scope="{ row }">
              <span v-if="row.shopType === 1">品牌方</span>
              <span v-else>代理商</span>
            </template>
          </el-table-column>
          <el-table-column label="登录账号" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.loginAccount">{{ row.loginAccount }}</span>
              <span v-else>未绑定</span>
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" align="center" width="160" />
          <el-table-column prop="linkMan" label="联系人" align="center" />
        </el-table>
        <!-- <div class="loading">没有更多了</div> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitSupplier">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchSupplierList } from '@/api/supplier'
import { fetchConfigureList, handselVip } from '@/api/member'
export default {
  name: 'Handsel',
  filters: {
    formatPrice(price) {
      return `￥${price.toFixed(2)}`
    }
  },
  data() {
    return {
      loading: false,
      dialogTableVisible: false,
      selected: '',
      listQuery: {
        shopName: '',
        shopType: '',
        mobile: '',
        state: '',
        linkMan: '',
        pageNum: 1,
        pageSize: 10
      },
      supplierList: [],
      hasNextPage: false,
      total: 0,
      // 选中的供应商id
      selectedAuthUserId: '',
      // 选中的供应商信息
      selectedSupplierInfo: {},
      // 选中的供应商
      currentSupplierList: [],
      // 选中的套餐
      currentPackageList: [],
      // 套餐列表
      packageList: []
    }
  },
  created() {
    this.fetchConfigureList()
  },
  methods: {
    // 提交赠送
    onSubmit() {
      handselVip({ authUserId: this.selectedAuthUserId, packageId: this.selected })
        .then((res) => {
          console.log(res)
          this.$message.success('赠送会员成功')
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.back()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 移除选中的供应商
    removeSupplier() {
      this.currentSupplierList = []
      this.selectedSupplierInfo = {}
    },
    // 确认选中的供应商
    handleSubmitSupplier() {
      this.dialogTableVisible = false
      this.currentSupplierList = [this.selectedSupplierInfo]
    },
    // 选择供应商
    handleSelectSupplier(e) {
      this.selectedAuthUserId = e.authUserId
      this.selectedSupplierInfo = e
    },
    // 选择供应商对话框关闭事件
    handleDialogClosed() {
      this.listQuery.pageNum = 1
      this.listQuery.shopName = ''
      this.listQuery.shopType = ''
      this.listQuery.mobile = ''
      this.listQuery.linkMan = ''
    },
    // 筛选供应商
    filterSupplierList() {
      this.pageNum = 1
      this.supplierList = []
      this.fetchSupplierList()
    },
    // 获取供应商列表
    fetchSupplierList() {
      fetchSupplierList(this.listQuery)
        .then((res) => {
          console.log(res)
          this.supplierList = [...this.supplierList, ...res.data.list]
          this.hasNextPage = res.data.hasNextPage
          this.total = res.data.total
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handlePackageChange(id) {
      console.log(id)
      const current = this.packageList.find((item) => item.id === id)
      this.currentPackageList = [current]
    },
    handleChooseSupplier() {
      this.filterSupplierList()
      this.dialogTableVisible = true
    },
    onLoad() {
      if (!this.hasNextPage) return
      this.listQuery.pageNum++
      this.fetchSupplierList()
    },
    // 获取套餐列表
    fetchConfigureList() {
      fetchConfigureList()
        .then((res) => {
          this.packageList = res.data.packageList.map((item, index) => {
            item.name = `套餐${index + 1}`
            // item.originalPrice = `${item.originalPrice.toFixed(2)}`
            // item.price = item.price.toFixed(2)
            return item
          })
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  max-width: 1000px;
  margin: 0 auto;
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 25px 0;

    .label {
      width: 80px;
      text-align: right;
    }
    span {
      color: #f56c6c;
    }
  }

  .infinite-list {
    height: 400px;
  }
  .loading {
    margin-top: 16px;
    text-align: center;
  }

  .section {
    min-height: 600px;
  }
}
</style>