Browse Source

bug 修复

lilei 4 years ago
parent
commit
36282ae584
2 changed files with 594 additions and 2 deletions
  1. 336 0
      src/views/market/addlotterySetModal.vue
  2. 258 2
      src/views/market/lotterySettings.vue

+ 336 - 0
src/views/market/addlotterySetModal.vue

@@ -0,0 +1,336 @@
+<template>
+  <div>
+    <a-modal
+      v-model="isShow"
+      @cancle="isShow = false"
+      :footer="null"
+      width="80%"
+      :centered="true"
+      wrapClassName="addLottery-modal"
+      :title="titleText">
+      <a-form-model
+        ref="ruleForm"
+        :model="form"
+        :layout="formLayout"
+        :rules="rules"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <h3 class="form-titles">基础设置</h3>
+        <a-row :gutter="48">
+          <a-col :span="6">
+            <a-form-model-item ref="name" label="活动名称" prop="name">
+              <a-input id="addLottery-time" v-model="form.name" placeholder="15个字以内"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-model-item ref="time" label="活动时间" prop="time">
+              <a-range-picker
+                id="addLottery-time"
+                v-model="time"
+                format="YYYY-MM-DD"
+                :placeholder="['开始时间','结束时间']"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-model-item ref="name" label="抽奖人次" prop="name">
+              <a-input-number
+                id="addLottery-cjRc"
+                style="width: 50%;margin-right: 20px;"
+                :min="0"
+                :max="999999"
+                :precision="0"
+                placeholder="请输入抽奖人次(0~999999)"
+                allowClear />
+              <a-checkbox>
+                不限
+              </a-checkbox>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-model-item ref="name" label="付费抽奖规则" prop="name">
+              每次抽奖需要支付
+              <a-input-number
+                id="addLottery-cjgz"
+                style="width: 30%;margin-right: 5px;"
+                :min="0"
+                :max="999999"
+                :precision="0"
+                placeholder="请输入乐豆数(0~999999)"
+                allowClear />
+              乐豆
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="48">
+          <a-col :span="8">
+            <a-form-model-item ref="name" label="奖品说明" prop="name">
+              <a-input v-model="form.desc" type="textarea" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item ref="name" label="抽奖条件" prop="name">
+              <a-input v-model="form.desc" type="textarea" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item ref="name" label="抽奖说明" prop="name">
+              <a-input v-model="form.desc" type="textarea" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+
+        <h3 class="form-titles">奖品设置</h3>
+        <a-row :gutter="48">
+          <a-col :span="24">
+            <div class="form-item">
+              <div style="margin-right: 10px;"><span class="red">*</span>请选择转盘类型</div>
+              <a-select style="width: 300px;" v-model="form.region" placeholder="请选择类型">
+                <a-select-option value="5">
+                  五等分
+                </a-select-option>
+                <a-select-option value="6">
+                  六等分
+                </a-select-option>
+              </a-select>
+            </div>
+            <div class="form-item" v-for="(item, index) in 6" :key="index">
+              <div style="margin-right: 10px;"><span class="red">*</span> 奖品{{ index }}</div>
+              <a-select style="width: 120px;margin-right: 5px;" placeholder="请选择类型">
+                <a-select-option value="0">
+                  送实物
+                </a-select-option>
+                <a-select-option value="1">
+                  送乐豆
+                </a-select-option>
+                <a-select-option value="2">
+                  未中奖
+                </a-select-option>
+              </a-select>
+              <a-input style="width: 200px;margin-right: 5px;" placeholder="请输入奖品名称,10个字以内"/>
+              <a-select style="width: 120px;margin-right: 5px;" placeholder="是否中奖">
+                <a-select-option value="1">
+                  是
+                </a-select-option>
+                <a-select-option value="0">
+                  否
+                </a-select-option>
+              </a-select>
+              <a-input-number
+                style="width: 150px;margin-right: 5px;"
+                :min="0"
+                :max="100"
+                :precision="2"
+                placeholder="请输入中奖概率(%)"
+                allowClear />
+              <a-input-number
+                style="width: 150px;margin-right: 5px;"
+                :min="0"
+                :max="999999"
+                :precision="0"
+                placeholder="请输入奖品数量"
+                allowClear />
+              <Upload
+                class="upload"
+                ref="homeImage"
+                :fileSize="0.25"
+                listType="picture-card">
+              </Upload>
+              <span class="upload-desc">请上传奖品图片,300*300px,0.25MB 以内。</span>
+            </div>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="48">
+          <a-col :span="12">
+            <div class="form-item">
+              <div style="margin-right: 10px;"><span class="red">*</span>中奖限制:</div>
+              <a-select mode="multiple" style="width: 300px;" v-model="form.region" placeholder="请选择">
+                <a-select-option value="5">
+                  中奖后抽奖XXX次内不能再次中奖
+                </a-select-option>
+                <a-select-option value="6">
+                  每天最多可中奖XXX次
+                </a-select-option>
+                <a-select-option value="6">
+                  每人最多可中奖XXX次
+                </a-select-option>
+              </a-select>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="form-item">
+              <div style="margin-right: 10px;"><span class="red">*</span>赠送抽奖次数规则:</div>
+              <a-select mode="multiple" style="width: 300px;" v-model="form.region" placeholder="请选择">
+                <a-select-option value="5">
+                  新用户登录送抽奖
+                </a-select-option>
+                <a-select-option value="6">
+                  用户首次投递送抽奖
+                </a-select-option>
+                <a-select-option value="6">
+                  分享给好友或朋友圈送抽奖
+                </a-select-option>
+                <a-select-option value="6">
+                  3个月内无投递记录送抽奖
+                </a-select-option>
+              </a-select>
+            </div>
+          </a-col>
+        </a-row>
+
+        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+          <a-button type="primary" @click="onSubmit">
+            保存
+          </a-button>
+          <a-button style="margin-left: 10px;" @click="resetForm">
+            重置
+          </a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { VSelect, Upload } from '@/components'
+import { goodsClassDetails, saveGoodsClass } from '@/api/shopSetting.js'
+export default {
+  name: 'AddlotterySetModal',
+  components: {
+    VSelect,
+    Upload
+  },
+  props: {
+    showEditModal: {
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: String,
+      default: ''
+    },
+    itemData: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      isShow: this.showEditModal,
+      titleText: '新增活动',
+      formLayout: 'vertical',
+      labelCol: {},
+      wrapperCol: {},
+      form: {
+        name: '',
+        region: undefined,
+        date1: undefined,
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: 'Please input Activity name', trigger: 'blur' },
+          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
+        ],
+        region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+        date1: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
+        type: [
+          {
+            type: 'array',
+            required: true,
+            message: 'Please select at least one activity type',
+            trigger: 'change'
+          }
+        ],
+        resource: [
+          { required: true, message: 'Please select activity resource', trigger: 'change' }
+        ],
+        desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    // 查看详情
+    getPageInfo () {
+      const _this = this
+      goodsClassDetails({
+        id: _this.itemId
+      }).then(res => {
+        if (res.status == 200) {
+          this.form.setFieldsValue({ formData: res.data })
+        }
+      })
+    },
+    // 点击保存;
+    handleSubmit (e) {
+      e.preventDefault()
+      const _this = this
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          const formData = Object.assign({}, this.itemData, this.formData, values.formData)
+          formData.id = _this.itemId
+          saveGoodsClass(formData).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$emit('refresh')
+              setTimeout(function () {
+                _this.isShow = false
+              }, 300)
+            }
+          })
+        }
+      })
+    }
+  },
+  watch: {
+    showEditModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    isShow (val) {
+      if (!val) {
+        this.$emit('close')
+      } else {
+        this.form.resetFields()
+      }
+    },
+    itemId (newValue, oldValue) {
+      if (newValue && this.isShow) {
+        this.titleText = '编辑'
+        this.getPageInfo(newValue)
+      } else {
+        this.titleText = '新增'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .addLottery-modal{
+    .form-titles{
+      border-bottom: 1px solid #eee;
+      padding-bottom: 10px;
+      margin-bottom: 20px;
+    }
+    .form-item{
+      display: flex;
+      align-items: center;
+      padding: 5px;
+    }
+    .upload-desc{
+      font-size: 12px;
+      margin-left: 10px;
+    }
+    .red{
+      color: red;
+    }
+  }
+</style>

+ 258 - 2
src/views/market/lotterySettings.vue

@@ -1,9 +1,265 @@
 <template>
 <template>
-  <div>sdfsdf</div>
+  <a-card :bordered="false" class="lotterySet-page-info">
+    <!-- 搜索框 -->
+    <div class="lotterySet-search">
+      <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
+        <a-row :gutter="20">
+          <a-col :span="6">
+            <a-form-item label="活动名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-input
+                allowClear
+                v-model="searchData.name"
+                :maxLength="30"
+                placeholder="请输入活动名称"
+                id="lotterySet-name" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="4">
+            <a-form-item label="状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <v-select
+                code="ENABLE_FLAG"
+                v-model="searchData.state"
+                allowClear
+                placeholder="请选择状态"
+                id="lotterySet-enable-state"></v-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-button class="handle-btn serach-btn" style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)" id="lotterySet-refresh">查询</a-button>
+            <a-button class="handle-btn" @click="resetForm" id="lotterySet-resetForm">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="add">
+      <a-button
+        type="primary"
+        icon="plus"
+        class="addBtn"
+        @click="showModal"
+        id="lotterySet-showModal"
+      >新增</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-icon
+          type="edit"
+          id="lotterySet-handleEdit"
+          title="编辑"
+          class="actionBtn icon-blues"
+          @click="handleEdit(record)" />
+      </span>
+      <span slot="state" slot-scope="text, record">
+        <a-switch
+          checkedChildren="启用"
+          unCheckedChildren="禁用"
+          id="lotterySet-changeFlagHandle"
+          :checked="record.state == 1 ? true : false"
+          @change="changeFlagHandle(text, record)" />
+        <!-- <span v-if="!$hasPermissions('B_lotterySet_enable')">--</span> -->
+      </span>
+      </span>
+    </s-table>
+    <addlotterySetModal
+      :itemId="itemId"
+      :itemData="itemData"
+      :showEditModal="showEditModal"
+      @refresh="$refs.table.refresh(true)"
+      @close="cancel"></addlotterySetModal>
+  </a-card>
 </template>
 </template>
 
 
 <script>
 <script>
+import {
+  Upload,
+  STable,
+  VSelect
+} from '@/components'
+import addlotterySetModal from './addlotterySetModal.vue'
+import {
+  getGoodsClassList,
+  changeGoodsStatus
+} from '@/api/shopSetting.js'
+
+export default {
+  components: {
+    STable,
+    Upload,
+    VSelect,
+    addlotterySetModal
+  },
+  data () {
+    return {
+      formItemLayout: {
+        labelCol: { span: 7 },
+        wrapperCol: { span: 17 }
+      },
+      searchData: {
+        name: ''
+      },
+      showEditModal: false, // 默认关闭弹窗
+      itemId: null, // 编辑行id
+	    itemData: {}, // 编辑行数据
+      formLayout: 'horizontal',
+      form: this.$form.createForm(this),
+      // 表头
+      columns: [{
+        title: '序号',
+        dataIndex: 'no',
+        width: 60,
+        align: 'center'
+      },
+      {
+        title: '创建时间',
+        width: 100,
+        dataIndex: 'creatDate',
+        align: 'center'
+      },
+      {
+        title: '活动名称',
+        width: 100,
+        dataIndex: 'name',
+        align: 'center'
+      },
+      {
+        title: '活动时间',
+        width: 100,
+        dataIndex: 'goldLimit',
+        align: 'center'
+      },
+      {
+        title: '状态',
+        width: 100,
+        dataIndex: 'state',
+        align: 'center',
+        scopedSlots: {
+          customRender: 'state'
+        }
+      },
+      {
+        title: '操作',
+        align: 'center',
+        width: 100,
+        scopedSlots: {
+          customRender: 'action'
+        }
+      }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getGoodsClassList(
+          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
+          }
+        })
+      }
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this, {
+      name: 'validate_other'
+    })
+  },
+  methods: {
+    showModal () {
+      this.itemId = null
+	    this.itemData = {}
+      this.showEditModal = true
+    },
+    // 编辑
+    handleEdit (record) {
+      this.itemId = record.id
+	    this.itemData = record
+      this.showEditModal = true
+    },
+    // 重置
+    resetForm () {
+      this.searchData.name = ''
+      this.$refs.table.refresh(true)
+    },
+    //
+    cancel () {
+      this.itemId = null
+      this.showEditModal = false
+    },
+    // 更改启用禁用状态
+    changeFlagHandle (text, record) {
+      console.log(text)
+      const _this = this
+      const _data = {
+        id: record.id,
+        flag: record.state == 1 ? '0' : '1'
+      }
+      if (record.state == 1) {
+        this.$confirm({
+          title: '提示',
+          centered: true,
+          content: '商品分类被禁用后,该分类将不在显示给用户,确定禁用吗?',
+          okText: '确定',
+          cancelText: '取消',
+          onOk () {
+            changeGoodsStatus(_data).then(res => {
+              if (res.status == 200) {
+                _this.$message.success(res.message)
+                _this.$refs.table.refresh()
+              }
+            })
+          }
+        })
+      } else {
+        changeGoodsStatus(_data).then(res => {
+          if (res.status == 200) {
+            _this.$message.success(res.message)
+            _this.$refs.table.refresh()
+          } else {
+            record.state = !record.state
+          }
+        })
+      }
+    },
+    beforeRouteEnter (to, from, next) {
+      next(vm => {
+        vm.resetForm()
+      })
+    }
+  }
+}
 </script>
 </script>
 
 
-<style>
+<style lang="less">
+	.lotterySet-page-info{
+		.lotterySet-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;
+		}
+	}
+
 </style>
 </style>