|
@@ -0,0 +1,183 @@
|
|
|
+<template>
|
|
|
+ <div class="redPacketSetDetail-page">
|
|
|
+ <a-spin :spinning="spinning" tip="Loading...">
|
|
|
+ <a-page-header :ghost="false" :backIcon="false" class="redPacketSetDetail-baseInfo">
|
|
|
+ <template slot="subTitle">
|
|
|
+ <a href="javascript:;" @click="handleBack" id="redPacketSetDetail-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="redPacketSetDetail-baseInfo">
|
|
|
+ <a-form-model
|
|
|
+ id="redPacketSetDetail-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="活动名称">
|
|
|
+ {{ form.ruleName }}
|
|
|
+ </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}">
|
|
|
+ <img :src="form.serviceQrcode" width="100px"></img>
|
|
|
+ </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}">
|
|
|
+ {{ form.remarks }}
|
|
|
+ </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="redPacketSetDetail-cansel">返回列表</a-button>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-form-model>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+ <!-- 选择货架弹窗 -->
|
|
|
+ <shelfDetail ref="shelfDetail" :itemData="form" :visible="openModal" @close="openModal=false"></shelfDetail>
|
|
|
+ </a-spin>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { VSelect, Upload } from '@/components'
|
|
|
+import { rewardRuleDetail } from '@/api/redPacket.js'
|
|
|
+import shelfDetail from './shelfDetail.vue'
|
|
|
+export default {
|
|
|
+ components: { shelfDetail, 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: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isEdit () {
|
|
|
+ return this.$route.params.sn
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleBack () {
|
|
|
+ this.form = {
|
|
|
+ ruleName: '', // 活动名称
|
|
|
+ joinNum: '', // 参与数
|
|
|
+ ruleStoreList: [], // 参与门店
|
|
|
+ serviceQrcode: '', // 客服二维码图片
|
|
|
+ remarks: ''
|
|
|
+ }
|
|
|
+ this.$refs.ruleForm.resetFields()
|
|
|
+ this.$router.push({ name: 'redPacketList' })
|
|
|
+ },
|
|
|
+ // 活动详情
|
|
|
+ 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.spinning = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeRouteEnter (to, from, next) {
|
|
|
+ next(vm => {
|
|
|
+ // 编辑
|
|
|
+ if (vm.$route.params.sn) {
|
|
|
+ vm.getDetail()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .redPacketSetDetail-page{
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ padding-bottom: 51px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .redPacketSetDetail-baseInfo{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .ant-input-number-handler-wrap{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bzj-collapse{
|
|
|
+ margin-top: 10px;
|
|
|
+ .ant-collapse-content-box{
|
|
|
+ padding: 10px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|