|
@@ -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>
|