123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243 |
- <template>
- <div class="redPacketSetEidit-page">
- <a-spin :spinning="spinning" tip="Loading...">
- <a-page-header :ghost="false" :backIcon="false" class="redPacketSetEidit-baseInfo">
- <template slot="subTitle">
- <a href="javascript:;" @click="handleBack" id="redPacketSetEidit-handleBack">
- <a-icon type="left"></a-icon> 返回列表
- </a>
- <span style="margin: 0 15px;color: #666;font-weight: bold;">新增红包活动</span>
- </template>
- </a-page-header>
- <a-card :bordered="false" size="small" class="pages-wrap">
- <div class="redPacketSetEidit-baseInfo">
- <a-form-model
- id="redPacketSetEidit-form"
- ref="ruleForm"
- :model="form"
- :rules="rules"
- :label-col="formItemLayout.labelCol"
- :wrapper-col="formItemLayout.wrapperCol"
- >
- <a-row :gutter="24">
- <a-row>
- <a-col :span="12">
- <a-form-model-item label="活动名称" prop="ruleName">
- <a-input id="redPacket-ruleName" allowClear :maxLength="30" v-model.trim="form.ruleName" placeholder="请输入活动名称(最多30个字符)"/>
- </a-form-model-item>
- </a-col>
- <!-- <a-col :span="12">
- <a-form-model-item label="活动截止时间" prop="activeTime" help="活动成发布后即刻开始,无需设置开始时间">
- <a-input id="redPacket-time" style="width: 70%;margin-right:10px;" allowClear v-model.trim="form.activeTime" placeholder="请输入活动截止时间(精确到小时)"/>
- <a-checkbox>永久</a-checkbox>
- </a-form-model-item>
- </a-col> -->
- </a-row>
- <a-row>
- <a-col :span="24">
- <a-form-model-item label="参与货架" prop="joinNum" :label-col="{span: 3}" :wrapper-col="{span: 20}">
- <span v-if="form.joinNum">已选{{ form.joinNum }}货架</span>
- <a-button type="link" class="button-info" @click="openModal=true">点击选择</a-button>
- </a-form-model-item>
- </a-col>
- </a-row>
- <!-- <a-row>
- <a-col :span="24">
- <a-form-model-item label="活动范围" prop="activeOrg" :label-col="{span: 3}" :wrapper-col="{span: 20}">
- <div style="color:#999">修配易码通用户下单后可获得红包奖励</div>
- <a-checkbox-group
- v-model="form.activeOrg"
- name="checkboxgroup"
- :options="plainOptions"
- />
- </a-form-model-item>
- </a-col>
- </a-row> -->
- <a-row>
- <a-col :span="24">
- <a-form-model-item label="客服微信" prop="serviceQrcode" :label-col="{span: 3}" :wrapper-col="{span: 20}">
- <Upload
- class="upload"
- v-model="form.serviceQrcode"
- ref="serviceQrcode"
- :fileSize="10"
- :maxNums="1"
- @remove="removeImage"
- @change="changeImage"
- listType="picture-card"></Upload>
- <div class="upload-desc" style="margin-left: 100px;color:#999">说明:单张大小小于10Mb,最多1张。</div>
- </a-form-model-item>
- </a-col>
- </a-row>
- <a-row>
- <a-col :span="24">
- <a-form-model-item label="备注" :label-col="{span: 3}" :wrapper-col="{span: 20}">
- <a-textarea :rows="4" v-model="form.remarks" :maxLength="150" placeholder="请输入备注(最多150字符)"></a-textarea>
- </a-form-model-item>
- </a-col>
- </a-row>
- </a-row>
- <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
- <a-button type="default" @click="handleBack" style="margin-right:20px;" id="redPacketSetEidit-cansel">取消</a-button>
- <a-button type="primary" @click="handleSubmit" id="redPacketSetEidit-handleSubmit">保存</a-button>
- </a-form-model-item>
- </a-form-model>
- </div>
- </a-card>
- <!-- 选择货架弹窗 -->
- <shelfModal ref="shelfModal" :checkedList="form.ruleStoreList" :visible="openModal" @close="openModal=false" @ok="chooseShelf"></shelfModal>
- </a-spin>
- </div>
- </template>
- <script>
- import { VSelect, Upload } from '@/components'
- import { rewardRuleDetail, rewardRuleCreate, rewardRuleModify } from '@/api/redPacket.js'
- import shelfModal from './shelfModal.vue'
- export default {
- components: { shelfModal, VSelect, Upload },
- data () {
- return {
- spinning: false,
- openModal: false, // 货位模板弹窗初始状态
- formItemLayout: {
- labelCol: { span: 6 },
- wrapperCol: { span: 14 }
- },
- plainOptions: [{ label: '货架订单', value: '1' }],
- pageInfo: null,
- form: {
- ruleName: '', // 活动名称
- joinNum: '', // 参与数
- ruleStoreList: [], // 参与门店
- serviceQrcode: '', // 客服二维码图片
- remarks: ''
- },
- rules: {
- ruleName: [ { required: true, message: '请输入活动名称', trigger: 'change' } ],
- joinNum: [ { required: true, message: '请选择参与货架', trigger: 'change' } ],
- serviceQrcode: [ { required: true, message: '请上传客服微信二维码图片', trigger: 'change' } ]
- }
- }
- },
- computed: {
- isEdit () {
- return this.$route.params.sn
- }
- },
- methods: {
- retForm () {
- this.form = {
- ruleName: '', // 活动名称
- joinNum: '', // 参与数
- ruleStoreList: [], // 参与门店
- serviceQrcode: '', // 客服二维码图片
- remarks: ''
- }
- this.$refs.ruleForm.resetFields()
- this.removeImage()
- },
- handleBack () {
- this.retForm()
- this.$router.push({ name: 'redPacketList' })
- },
- // 图片上传
- changeImage (file) {
- this.form.serviceQrcode = file
- },
- removeImage () {
- this.form.serviceQrcode = ''
- this.$refs.serviceQrcode.setFileList('')
- },
- chooseShelf (data) {
- this.form.ruleStoreList = data
- this.openModal = false
- this.form.joinNum = data.length
- this.$refs.ruleForm.validateField('joinNum')
- },
- // 活动详情
- getDetail () {
- this.spinning = true
- rewardRuleDetail({
- rewardRuleSn: this.$route.params.sn
- }).then(res => {
- if (res.status == 200) {
- const storeList = []
- res.data.rewardRuleStoreList.map(item => {
- storeList.push({
- shelfSn: item.shelfSn
- })
- })
- this.form = {
- ruleName: res.data.ruleName, // 活动名称
- joinNum: res.data.joinNum, // 参与数
- ruleStoreList: storeList, // 参与门店
- serviceQrcode: res.data.serviceQrcode, // 客服二维码图片
- remarks: res.data.remarks,
- rewardRuleSn: res.data.rewardRuleSn
- }
- this.$refs.serviceQrcode.setFileList(res.data.serviceQrcode)
- }
- this.spinning = false
- })
- },
- // 保存
- handleSubmit () {
- const _this = this
- this.$refs.ruleForm.validate(valid => {
- if (valid) {
- const params = Object.assign({}, _this.form)
- const fun = !this.isEdit ? rewardRuleCreate : rewardRuleModify
- _this.spinning = true
- fun(params).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- setTimeout(function () {
- _this.isshow = false
- _this.spinning = false
- _this.handleBack()
- }, 300)
- } else {
- _this.spinning = false
- }
- })
- } else {
- return false
- }
- })
- }
- },
- beforeRouteEnter (to, from, next) {
- next(vm => {
- // 编辑
- if (vm.$route.params.sn) {
- vm.getDetail()
- } else {
- vm.retForm()
- }
- })
- }
- }
- </script>
- <style lang="less">
- .redPacketSetEidit-page{
- position: relative;
- height: 100%;
- padding-bottom: 51px;
- box-sizing: border-box;
- .redPacketSetEidit-baseInfo{
- margin-bottom: 10px;
- .ant-input-number-handler-wrap{
- display: none;
- }
- }
- .bzj-collapse{
- margin-top: 10px;
- .ant-collapse-content-box{
- padding: 10px !important;
- }
- }
- }
- </style>
|