merchant_feedov_web/src/views/tariffManagement/SetMeal/index.vue

<template>
  <div>
    <div class="search">
      <Search :SearchForm="SetMealSearchForm"></Search>
    </div>

    <div class="addSetMeal">
      <a-button type="primary" @click="visibleSetMeal = true">新增套餐计划</a-button>
    </div>

    <div class="table">
      <a-table row-key="id" :data="data" :columns="columnsSetMeal" :pagination="pagination" :scroll="{ x: 'auto' }"
        @page-change="evChangePage">
        <template #Controls="{ record }">
          <a-space>
            <a-button type="text">设置套餐</a-button>
            <a-button type="text" @click="visibleQrCode = true">充值二维码</a-button>
            <a-button type="text">下架</a-button>
          </a-space>
        </template>
      </a-table>
    </div>

    <a-modal v-model:visible="visibleQrCode" width="700px" @cancel="visibleQrCode = false" title="充值二维码">
      <div class="code">
        <qrcode-vue :value="codeUrl" size="150" level="H"></qrcode-vue>
      </div>
      <template #footer>
        <a-button @click="visibleQrCode = false">关闭</a-button>
      </template>
    </a-modal>

    <a-modal v-model:visible="visibleSetMeal" width="600px" @cancel="visibleSetMeal = false" title="新增套餐计划">
      <div class="Form">
        <a-form ref="formRef" :rules="rules" :model="Form" @submit="handleSubmit">
          <a-form-item label="套餐计划名称" field="source">
            <a-input placeholder="请输入套餐计划名称"></a-input>
          </a-form-item>
          <a-form-item label="选择所属客户" field="source">
            <a-select :style="{ width: '320px' }" placeholder="请选择所属客户">
              <a-option v-for="(item,index) in userList" :value="item.id">{{ item.name}}</a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-button @click="visibleSetMeal = false">取消</a-button>
        <a-button type="primary" @click="visibleSetMeal = false">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted, toRefs } from 'vue';
import Search from '@/components/Search/index.vue'
import { SetMealSearchForm, columnsSetMeal } from '../config.js'
import { getMessUserList } from '@/api/customer.js';
import QrcodeVue from 'qrcode.vue'
const state = ref({
  data: [{ labelName: '666', ID: '4884', userName: '张总', time: '2024', status: '正常' }],
  pagination: {
    total: 0,
    pageSize: 10,
    current: 1,
  },
  visibleQrCode: false,
  codeUrl: 'https://baidu.com',
  visibleSetMeal: false,
  Form: {

  },
  userList:[]
})
const { data, pagination, visibleQrCode, codeUrl, visibleSetMeal ,userList} = toRefs(state.value)

const fetchCustomerList = async (item) => {
    const response = await getMessUserList({
      current: 1, 
      pageSize: 99999,
    });
    if (response.code === 200 && response.data) {
      userList.value = response.data.records
    }
};

onMounted(()=>{
  fetchCustomerList()
})
</script>
<style lang="less" scoped>
.search,
.table {
  margin-top: 1rem;
}

.code {
  justify-content: center;
  display: flex;
}
</style>