sc

src/views/Customer/Vip/components/UserDiscount.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <el-form :model="searchForm" inline @submit.prevent>
+      <el-form-item>
+        <el-input v-model="searchForm.phone" placeholder="学员手机号" />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="searchList" v-hasPermi="['xj-applet:vip:user-discount:search']"
+          >查询</el-button
+        >
+        <el-button
+          type="primary"
+          @click="addVipUser"
+          v-hasPermi="['xj-applet:vip:user-discount:send']"
+          >赠送折扣</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="tableList">
+      <el-table-column type="index" width="55" align="center" />
+      <el-table-column label="手机号" align="left" prop="phone" width="140" />
+      <el-table-column label="折扣描述" align="left" prop="description" min-width="140" />
+      <el-table-column label="折后价格" align="center" prop="discount" width="100" />
+      <el-table-column
+        label="截止时间"
+        align="left"
+        prop="endTime"
+        :formatter="dateFormatter"
+        width="150"
+      />
+      <el-table-column label="操作人" align="left" prop="operUser" width="100" />
+      <el-table-column label="操作时间" align="left" prop="operTime" width="150" />
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="searchForm.pageNo"
+      v-model:limit="searchForm.pageSize"
+      @pagination="getList"
+    />
+
+    <el-dialog title="赠送折扣" v-model="showDialog" width="500px" :close-on-click-modal="false">
+      <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="form.phone" maxlength="11" />
+        </el-form-item>
+        <el-form-item label="折扣描述" prop="discountId">
+          <el-select v-model="form.discountId" clearable filterable style="width: 100%">
+            <el-option
+              v-for="item in discountOptions"
+              :key="item.id"
+              :label="item.description"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <span>
+          <el-button @click="showDialog = false">取消</el-button>
+          <el-button type="primary" @click="sureAdd">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="UserDiscount">
+import {
+  getUserDiscountList,
+  giveUserDiscount,
+  getVipDiscountOptions
+} from '@/api/xjapplet/discount'
+import { dateFormatter } from '@/utils/formatTime'
+
+const message = useMessage()
+
+const searchForm = ref({
+  phone: '',
+  pageNo: 1,
+  pageSize: 50
+})
+
+const loading = ref(false)
+const tableList = ref([])
+const total = ref(0)
+
+const discountOptions = ref([])
+
+onMounted(() => {
+  searchList()
+  getVipDiscountOptions().then((response) => {
+    discountOptions.value = response
+  })
+})
+function searchList() {
+  searchForm.value.pageNo = 1
+  getList()
+}
+
+function getList() {
+  loading.value = true
+  getUserDiscountList(searchForm.value).then((response) => {
+    tableList.value = response.list
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+const showDialog = ref(false)
+const form = ref({
+  phone: '',
+  discountId: ''
+})
+const rules = ref({
+  phone: [{ required: true, message: '请输入用户手机号', trigger: 'blur' }],
+  discountId: [{ required: true, message: '请选择会员类型', trigger: 'change' }]
+})
+
+function addVipUser() {
+  showDialog.value = true
+}
+
+const formRef = ref(null)
+async function sureAdd() {
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+
+  // 调用接口
+  giveUserDiscount(form.value).then((response) => {
+    if (response) {
+      message.success('赠送成功')
+      showDialog.value = false
+      searchList()
+    } else {
+      message.error('赠送失败')
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>