Explorar el Código

礼品卡管理

chenrui hace 4 años
padre
commit
e960c05b25

+ 10 - 0
src/config/router.config.js

@@ -401,6 +401,16 @@ export const asyncRouterMap = [{
         icon: 'edit',
         permission: 'M_lottery_list'
       }
+    },
+    {
+      path: '/market/giftCard',
+      name: 'giftCardManage',
+      component: () => import(/* webpackChunkName: "market" */ '@/views/market/giftCard/giftCard.vue'),
+      meta: {
+        title: '礼品卡管理',
+        icon: 'credit-card'
+        // permission: 'M_lottery_list'
+      }
     }
     ]
   },

+ 134 - 0
src/views/market/giftCard/addCardModal.vue

@@ -0,0 +1,134 @@
+<template>
+  <a-modal
+    centered
+    class="add-card-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="新增礼品卡"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="600">
+    <a-form-model
+      id="add-card-form"
+      :model="formData"
+      :rules="rules"
+      ref="ruleForm"
+      :label-col="formItemLayout.labelCol"
+      :wrapper-col="formItemLayout.wrapperCol"
+      @submit="handleSubmit">
+      <a-form-model-item label="创建人">
+        <p class="creater">张先生</p><p class="telephone">15778785468</p>
+      </a-form-model-item>
+      <a-form-model-item label="礼品卡内容" prop="name">
+        <a-input-number
+          id="add-card-name"
+          v-model="formData.name"
+          :min="1"
+          :max="999999"
+          :precision="0"
+          style="width: 90%;margin-right: 5px;"
+          placeholder="请输入礼品卡内容(1~999999)"
+          allowClear /><span>乐豆</span>
+      </a-form-model-item>
+      <a-form-model-item label="礼品卡数量" prop="name">
+        <a-input-number
+          id="add-card-provinceCode"
+          v-model="formData.provinceCode"
+          :min="1"
+          :max="999999"
+          :precision="0"
+          style="width: 90%;margin-right: 5px;"
+          placeholder="请输入礼品卡数量(1~999999)"
+          allowClear /><span>张</span>
+      </a-form-model-item>
+      <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
+        <a-button type="primary" html-type="submit" id="add-card-submit" style="margin-right: 15px">保存</a-button>
+        <a-button @click="isShow=false" style="margin-left: 15px" id="add-card-close">取消</a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+// import { stationSave, stationFind } from '@/api/station'
+export default {
+  name: 'AddCardModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 16 }
+      },
+      formData: {
+        name: null, //  网点名称
+        provinceCode: null //  省
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入礼品卡内容', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    //  物流信息  保存
+    handleSubmit (e) {
+      e.preventDefault()
+      const _this = this
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const params = {
+      			  name: this.formData.name,
+      			  loginFlag: this.formData.loginFlag,
+      			  phone: this.formData.phone
+          }
+          // saveUserPower(params).then(res => {
+          //   if (res.status == 200) {
+          //     if (this.$hasPermissions('M_bundel_buyRecord')) {
+          //       this.$router.push({ path: '/SetmealSales/PurchasedSetmeal' })
+          //     } else {
+          //       this.cancel()
+          //     }
+          //   }
+          // })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$refs.ruleForm.resetFields()
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .add-card-modal{
+    .creater{
+      display: inline-block;
+      margin-right: 15px;
+    }
+    .telephone{
+      display: inline-block;
+    }
+  }
+</style>

+ 143 - 0
src/views/market/giftCard/editCardModal.vue

@@ -0,0 +1,143 @@
+<template>
+  <a-modal
+    centered
+    class="edit-card-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="编辑礼品卡"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="600">
+    <a-form-model
+      id="edit-card-form"
+      :model="formData"
+      :rules="rules"
+      ref="ruleForm"
+      :label-col="formItemLayout.labelCol"
+      :wrapper-col="formItemLayout.wrapperCol"
+      @submit="handleSubmit">
+      <a-form-model-item label="创建时间"> 2021/01/11 </a-form-model-item>
+      <a-form-model-item label="创建人">
+        <p class="creater">张先生</p><p class="telephone">15778785468</p>
+      </a-form-model-item>
+      <a-form-model-item label="礼品卡内容"> 100乐豆 </a-form-model-item>
+      <a-form-model-item ref="name" label="实体卡编号" prop="name">
+        <a-input id="edit-card-number" :maxLength="30" v-model="formData.name" placeholder="请输入实体卡编号(最多30个字符)" allowClear />
+      </a-form-model-item>
+      <a-form-model-item label="备注" prop="remarks">
+        <a-textarea id="edit-card-remarks" :maxLength="500" v-model="formData.remarks" placeholder="请输入备注(最多500个字符)" allowClear />
+      </a-form-model-item>
+      <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
+        <a-button type="primary" html-type="submit" id="edit-card-submit" style="margin-right: 15px">保存</a-button>
+        <a-button @click="isShow=false" style="margin-left: 15px" id="edit-card-close">取消</a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+// import { stationSave } from '@/api/station'
+export default {
+  name: 'EditCardModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    cardId: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 16 }
+      },
+      formData: {
+        name: '', //  实体卡编号
+        remarks: '' //  备注
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入实体卡编号', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    //  获取详情
+    getDetails () {
+      // stationFind({ id: this.cardId }).then(res => {
+      //   if (res.status == 200) {
+      //     //  省市区
+      //     this.form.setFieldsValue({ 'formData.lat': res.data.lat })
+      //     this.form.setFieldsValue({ 'formData.lng': res.data.lng })
+      //     this.form.setFieldsValue({ 'formData.goldExRuleNo': res.data.goldExRuleNo })
+      //     this.form.setFieldsValue({ 'formData.deliveryTimeRuleNo': res.data.deliveryTimeRuleNo })
+      //   }
+      // })
+    },
+    //  物流信息  保存
+    handleSubmit (e) {
+      e.preventDefault()
+      const _this = this
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const params = {
+      			  name: this.formData.name,
+      			  loginFlag: this.formData.loginFlag,
+      			  phone: this.formData.phone
+          }
+          // saveUserPower(params).then(res => {
+          //   if (res.status == 200) {
+          //     if (this.$hasPermissions('M_bundel_buyRecord')) {
+          //       this.$router.push({ path: '/SetmealSales/PurchasedSetmeal' })
+          //     } else {
+          //       this.cancel()
+          //     }
+          //   }
+          // })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$refs.ruleForm.resetFields()
+        this.$emit('close')
+      }
+    },
+    cardId (newValue, oldValue) {
+      if (this.isShow && newValue) {
+        this.getDetails()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .edit-card-modal{
+    .creater{
+      display: inline-block;
+      margin: 0;
+      margin-right: 15px;
+    }
+    .telephone{
+      display: inline-block;
+      margin: 0;
+    }
+  }
+</style>

+ 126 - 0
src/views/market/giftCard/getCodeModal.vue

@@ -0,0 +1,126 @@
+<template>
+  <a-modal
+    centered
+    class="getcode-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="获取充值码"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="600">
+    <!-- <div v-if="detailsData"> -->
+    <div>
+      <a-row :gutter="35">
+        <a-col :span="24" class="item-cont">
+          <p class="item-label">创建时间:</p>
+          <!-- <p class="item-main">{{ detailsData.name }}</p> -->
+          <p class="item-main">detailsData.name</p>
+        </a-col>
+        <a-col :span="24" class="item-cont">
+          <p class="item-label">创建人:</p>
+          <!-- <p class="item-main">{{ detailsData.provinceName }}</p> -->
+          <p class="item-main">detailsData.provinceName</p>
+        </a-col>
+        <a-col :span="24" class="item-cont">
+          <p class="item-label">礼品卡内容:</p>
+          <!-- <p class="item-main">{{ detailsData.lat }} 乐豆</p> -->
+          <p class="item-main">detailsData.lat 乐豆</p>
+        </a-col>
+        <a-col :span="24" class="item-cont">
+          <p class="item-label">充值码:</p>
+          <div class="item-main">
+            <!-- <span>{{ detailsData.lng }}</span> -->
+            <span style="margin-right: 15px;">detailsData.lng</span>
+            <a-button id="gift-card-copy" size="small" v-clipboard:copy="'detailsData'" v-clipboard:success="onCopy">复制</a-button>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+    <div class="btn-cont"><a-button id="network-detail-modal-back" @click="isShow=false">返回列表</a-button></div>
+  </a-modal>
+</template>
+
+<script>
+// import { stationFind } from '@/api/station'
+export default {
+  name: 'GetCodeModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    cardId: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      detailsData: null //  网点数据
+    }
+  },
+  methods: {
+    //  获取详情
+    getDetails () {
+      // stationFind({ id: this.cardId }).then(res => {
+      //   if (res.status == 200) {
+      //     this.detailsData = res.data
+      //   }else{
+      //     this.detailsData = null
+      //   }
+      // })
+    },
+    //  复制
+    onCopy () {
+      this.$message.success('复制成功')
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    },
+    cardId (newValue, oldValue) {
+      if (this.isShow && newValue) {
+        this.getDetails()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .getcode-modal{
+    .ant-modal-body {
+      padding: 40px 40px 24px;
+    }
+    .item-cont {
+      margin-bottom: 15px;
+      display: flex;
+      .item-label {
+        width: 115px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.85);
+        flex-shrink: 0;
+      }
+      .item-main {
+        flex-grow: 1;
+        word-break: break-all;
+        .wd-icon {
+          display: block;
+        }
+      }
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+  }
+</style>

+ 243 - 0
src/views/market/giftCard/giftCard.vue

@@ -0,0 +1,243 @@
+<template>
+  <a-card :bordered="false" class="gift-card-wrap">
+    <!-- 搜索框 -->
+    <div class="gift-card-search">
+      <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
+        <a-row :gutter="20">
+          <a-col :md="6" :sm="24">
+            <a-form-item label="创建时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-range-picker
+                id="winRecord-time"
+                v-model="time"
+                :format="dateFormat"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @change="onChange" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="礼品卡内容" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-input
+                allowClear
+                v-model="searchData.activeName"
+                :maxLength="30"
+                placeholder="请输入礼品卡内容"
+                suffix="乐豆"
+                id="gift-card-name" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="实体卡编号" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-input allowClear v-model="searchData.activeName" :maxLength="30" placeholder="请输入实体卡编号" id="gift-card-name" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="是否已充值" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <v-select code="FLAG" v-model="searchData.state" allowClear placeholder="请选择" id="gift-card-enable-state"></v-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="充值时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-range-picker
+                id="winRecord-time"
+                v-model="time"
+                :format="dateFormat"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @change="onChange" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="充值用户" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-input allowClear v-model="searchData.activeName" :maxLength="30" placeholder="请输入充值用户" id="gift-card-name" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="充值码" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-input allowClear v-model="searchData.activeName" :maxLength="30" placeholder="请输入充值码" id="gift-card-name" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-button class="handle-btn serach-btn" style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)" id="gift-card-refresh">查询</a-button>
+            <a-button class="handle-btn" @click="resetForm" id="gift-card-resetForm">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="add">
+      <a-button type="primary" icon="plus" class="addBtn" @click="handleAdd" id="gift-card-add">新增礼品卡</a-button>
+    </div>
+    <!-- table列表 -->
+    <s-table
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <span slot="action" slot-scope="text, record">
+        <a-button id="gift-card-getCode" class="blue" type="link" @click="getCode(record)">获取充值码</a-button>
+        <a-button id="gift-card-handleEdit" class="green" type="link" @click="handleEdit(record)">编辑</a-button>
+        <a-button id="gift-card-handleDel" class="red" type="link" @click="handleDel(record)">删除</a-button>
+      </span>
+    </s-table>
+    <!-- 新增礼品卡 -->
+    <add-card-modal :openModal="openAddCardModal" @close="closeModal" />
+    <!-- 编辑礼品卡 -->
+    <edit-card-modal :openModal="openEditCardModal" :cardId="cardId" @close="closeModal" />
+    <!-- 获取充值码 -->
+    <get-code-modal :openModal="openGetCodeModal" :cardId="cardId" @close="closeModal" />
+  </a-card>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import AddCardModal from './addCardModal.vue'
+import EditCardModal from './editCardModal.vue'
+import GetCodeModal from './getCodeModal.vue'
+import { getLuckyDrawList } from '@/api/luckyDraw.js'
+
+export default {
+  components: { STable, VSelect, GetCodeModal, AddCardModal, EditCardModal },
+  data () {
+    return {
+      formItemLayout: {
+        labelCol: { span: 9 },
+        wrapperCol: { span: 15 }
+      },
+      searchData: {
+        beginDate: null,
+        endDate: null,
+        activeName: '',
+        state: undefined
+      },
+      showEditModal: false, // 默认关闭弹窗
+      itemId: null, // 编辑行id
+      time: [],
+      dateFormat: 'YYYY-MM-DD',
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
+        { title: '创建时间', dataIndex: 'createDate', width: 100, align: 'center' },
+        { title: '活动名称', dataIndex: 'activeName', width: 100, align: 'center' },
+        { title: '活动时间', dataIndex: 'actime', width: 100, align: 'center' },
+        { title: '状态', dataIndex: 'state', width: 100, align: 'center' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center', width: 100 }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getLuckyDrawList(
+          Object.assign(parameter, this.searchData)
+        ).then(res => {
+          const no = (res.data.pageNo - 1) * res.data.pageSize
+          if (res.status == 200) {
+            for (let i = 0; i < res.data.list.length; i++) {
+              const _item = res.data.list[i]
+              _item.no = no + i + 1
+            }
+            return res.data
+          }
+        })
+      },
+      cardId: null, //  卡id
+      openGetCodeModal: false, //  获取充值码  弹框状态
+      openAddCardModal: false, //  新增礼品卡  弹框状态
+      openEditCardModal: false //  编辑礼品卡  弹框状态
+    }
+  },
+  methods: {
+    // 不可选日期
+    disabledDate (date, dateStrings) {
+      return date && date.valueOf() > Date.now()
+    },
+    // 创建时间change
+    onChange (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.searchData.beginDate = dateStrings[0]
+        this.searchData.endDate = dateStrings[1]
+      }
+    },
+    //  获取充值码
+    getCode (record) {
+      this.cardId = record.id
+      this.openGetCodeModal = true
+    },
+    // 新增
+    handleAdd () {
+      this.cardId = null
+      this.openAddCardModal = true
+    },
+    // 编辑
+    handleEdit (record) {
+      this.cardId = record.id
+      this.openEditCardModal = true
+    },
+    //  关闭弹框
+    closeModal () {
+      this.cardId = null
+      this.openAddCardModal = false
+      this.openEditCardModal = false
+      this.openGetCodeModal = false
+    },
+    // 删除
+    handleDel (record) {
+      this.$confirm({
+        title: '警告',
+        centered: true,
+        content: '删除后无法恢复,确认删除?',
+        okText: '确定',
+        cancelText: '取消',
+        onOk: () => {
+          // deleteLuckyDraw({
+          //   id: record.id
+          // }).then(res => {
+          //   if (res.status == 200) {
+          //     this.$message.success(res.message)
+          //     this.$refs.table.refresh()
+          //   }
+          // })
+        }
+      })
+    },
+    // 重置
+    resetForm () {
+      this.searchData.activeName = ''
+      this.searchData.state = ''
+      this.$refs.table.refresh(true)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+	.gift-card-wrap{
+		.gift-card-search{
+      .ant-form-inline .ant-form-item{
+        width: 100%;
+      }
+      // 搜索框的下间距
+      .ant-form-item {
+        margin-bottom: 10px;
+      }
+      .handle-btn{
+        margin-top: 4px;
+      }
+      .serach-btn{
+        margin-right: 10px;
+      }
+		}
+		.addBtn {
+			margin-bottom: 20px;
+		}
+    .blue {
+    	color: #1890fe;
+    }
+    .green {
+    	color: #16b50e;
+    }
+    .red {
+    	color: red;
+    }
+	}
+
+</style>