edit.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <template>
  2. <div class="redPacketSetEidit-page">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="redPacketSetEidit-baseInfo">
  5. <template slot="subTitle">
  6. <a href="javascript:;" @click="handleBack" id="redPacketSetEidit-handleBack">
  7. <a-icon type="left"></a-icon> 返回列表
  8. </a>
  9. <span style="margin: 0 15px;color: #666;font-weight: bold;">新增红包活动</span>
  10. </template>
  11. </a-page-header>
  12. <a-card :bordered="false" size="small" class="pages-wrap">
  13. <div class="redPacketSetEidit-baseInfo">
  14. <a-form-model
  15. id="redPacketSetEidit-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :label-col="formItemLayout.labelCol"
  20. :wrapper-col="formItemLayout.wrapperCol"
  21. >
  22. <a-row :gutter="24">
  23. <a-row>
  24. <a-col :span="12">
  25. <a-form-model-item label="活动名称" prop="ruleName">
  26. <a-input id="redPacket-ruleName" allowClear :maxLength="30" v-model.trim="form.ruleName" placeholder="请输入活动名称(最多30个字符)"/>
  27. </a-form-model-item>
  28. </a-col>
  29. <!-- <a-col :span="12">
  30. <a-form-model-item label="活动截止时间" prop="activeTime" help="活动成发布后即刻开始,无需设置开始时间">
  31. <a-input id="redPacket-time" style="width: 70%;margin-right:10px;" allowClear v-model.trim="form.activeTime" placeholder="请输入活动截止时间(精确到小时)"/>
  32. <a-checkbox>永久</a-checkbox>
  33. </a-form-model-item>
  34. </a-col> -->
  35. </a-row>
  36. <a-row>
  37. <a-col :span="24">
  38. <a-form-model-item label="参与货架" prop="joinNum" :label-col="{span: 3}" :wrapper-col="{span: 20}">
  39. <span v-if="form.joinNum">已选{{ form.joinNum }}货架</span>
  40. <a-button type="link" class="button-info" @click="openModal=true">点击选择</a-button>
  41. </a-form-model-item>
  42. </a-col>
  43. </a-row>
  44. <!-- <a-row>
  45. <a-col :span="24">
  46. <a-form-model-item label="活动范围" prop="activeOrg" :label-col="{span: 3}" :wrapper-col="{span: 20}">
  47. <div style="color:#999">修配易码通用户下单后可获得红包奖励</div>
  48. <a-checkbox-group
  49. v-model="form.activeOrg"
  50. name="checkboxgroup"
  51. :options="plainOptions"
  52. />
  53. </a-form-model-item>
  54. </a-col>
  55. </a-row> -->
  56. <a-row>
  57. <a-col :span="24">
  58. <a-form-model-item label="客服微信" prop="serviceQrcode" :label-col="{span: 3}" :wrapper-col="{span: 20}">
  59. <Upload
  60. class="upload"
  61. v-model="form.serviceQrcode"
  62. ref="serviceQrcode"
  63. :fileSize="10"
  64. :maxNums="1"
  65. @remove="removeImage"
  66. @change="changeImage"
  67. listType="picture-card"></Upload>
  68. <div class="upload-desc" style="margin-left: 100px;color:#999">说明:单张大小小于10Mb,最多1张。</div>
  69. </a-form-model-item>
  70. </a-col>
  71. </a-row>
  72. <a-row>
  73. <a-col :span="24">
  74. <a-form-model-item label="备注" :label-col="{span: 3}" :wrapper-col="{span: 20}">
  75. <a-textarea :rows="4" v-model="form.remarks" :maxLength="150" placeholder="请输入备注(最多150字符)"></a-textarea>
  76. </a-form-model-item>
  77. </a-col>
  78. </a-row>
  79. </a-row>
  80. <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
  81. <a-button type="default" @click="handleBack" style="margin-right:20px;" id="redPacketSetEidit-cansel">取消</a-button>
  82. <a-button type="primary" @click="handleSubmit" id="redPacketSetEidit-handleSubmit">保存</a-button>
  83. </a-form-model-item>
  84. </a-form-model>
  85. </div>
  86. </a-card>
  87. <!-- 选择货架弹窗 -->
  88. <shelfModal ref="shelfModal" :checkedList="form.ruleStoreList" :visible="openModal" @close="openModal=false" @ok="chooseShelf"></shelfModal>
  89. </a-spin>
  90. </div>
  91. </template>
  92. <script>
  93. import { VSelect, Upload } from '@/components'
  94. import { rewardRuleDetail, rewardRuleCreate, rewardRuleModify } from '@/api/redPacket.js'
  95. import shelfModal from './shelfModal.vue'
  96. export default {
  97. components: { shelfModal, VSelect, Upload },
  98. data () {
  99. return {
  100. spinning: false,
  101. openModal: false, // 货位模板弹窗初始状态
  102. formItemLayout: {
  103. labelCol: { span: 6 },
  104. wrapperCol: { span: 14 }
  105. },
  106. plainOptions: [{ label: '货架订单', value: '1' }],
  107. pageInfo: null,
  108. form: {
  109. ruleName: '', // 活动名称
  110. joinNum: '', // 参与数
  111. ruleStoreList: [], // 参与门店
  112. serviceQrcode: '', // 客服二维码图片
  113. remarks: ''
  114. },
  115. rules: {
  116. ruleName: [ { required: true, message: '请输入活动名称', trigger: 'change' } ],
  117. joinNum: [ { required: true, message: '请选择参与货架', trigger: 'change' } ],
  118. serviceQrcode: [ { required: true, message: '请上传客服微信二维码图片', trigger: 'change' } ]
  119. }
  120. }
  121. },
  122. computed: {
  123. isEdit () {
  124. return this.$route.params.sn
  125. }
  126. },
  127. methods: {
  128. retForm () {
  129. this.form = {
  130. ruleName: '', // 活动名称
  131. joinNum: '', // 参与数
  132. ruleStoreList: [], // 参与门店
  133. serviceQrcode: '', // 客服二维码图片
  134. remarks: ''
  135. }
  136. this.$refs.ruleForm.resetFields()
  137. this.removeImage()
  138. },
  139. handleBack () {
  140. this.retForm()
  141. this.$router.push({ name: 'redPacketList' })
  142. },
  143. // 图片上传
  144. changeImage (file) {
  145. this.form.serviceQrcode = file
  146. },
  147. removeImage () {
  148. this.form.serviceQrcode = ''
  149. this.$refs.serviceQrcode.setFileList('')
  150. },
  151. chooseShelf (data) {
  152. this.form.ruleStoreList = data
  153. this.openModal = false
  154. this.form.joinNum = data.length
  155. this.$refs.ruleForm.validateField('joinNum')
  156. },
  157. // 活动详情
  158. getDetail () {
  159. this.spinning = true
  160. rewardRuleDetail({
  161. rewardRuleSn: this.$route.params.sn
  162. }).then(res => {
  163. if (res.status == 200) {
  164. const storeList = []
  165. res.data.rewardRuleStoreList.map(item => {
  166. storeList.push({
  167. shelfSn: item.shelfSn
  168. })
  169. })
  170. this.form = {
  171. ruleName: res.data.ruleName, // 活动名称
  172. joinNum: res.data.joinNum, // 参与数
  173. ruleStoreList: storeList, // 参与门店
  174. serviceQrcode: res.data.serviceQrcode, // 客服二维码图片
  175. remarks: res.data.remarks,
  176. rewardRuleSn: res.data.rewardRuleSn
  177. }
  178. this.$refs.serviceQrcode.setFileList(res.data.serviceQrcode)
  179. }
  180. this.spinning = false
  181. })
  182. },
  183. // 保存
  184. handleSubmit () {
  185. const _this = this
  186. this.$refs.ruleForm.validate(valid => {
  187. if (valid) {
  188. const params = Object.assign({}, _this.form)
  189. const fun = !this.isEdit ? rewardRuleCreate : rewardRuleModify
  190. _this.spinning = true
  191. fun(params).then(res => {
  192. if (res.status == 200) {
  193. _this.$message.success(res.message)
  194. setTimeout(function () {
  195. _this.isshow = false
  196. _this.spinning = false
  197. _this.handleBack()
  198. }, 300)
  199. } else {
  200. _this.spinning = false
  201. }
  202. })
  203. } else {
  204. return false
  205. }
  206. })
  207. }
  208. },
  209. beforeRouteEnter (to, from, next) {
  210. next(vm => {
  211. // 编辑
  212. if (vm.$route.params.sn) {
  213. vm.getDetail()
  214. } else {
  215. vm.retForm()
  216. }
  217. })
  218. }
  219. }
  220. </script>
  221. <style lang="less">
  222. .redPacketSetEidit-page{
  223. position: relative;
  224. height: 100%;
  225. padding-bottom: 51px;
  226. box-sizing: border-box;
  227. .redPacketSetEidit-baseInfo{
  228. margin-bottom: 10px;
  229. .ant-input-number-handler-wrap{
  230. display: none;
  231. }
  232. }
  233. .bzj-collapse{
  234. margin-top: 10px;
  235. .ant-collapse-content-box{
  236. padding: 10px !important;
  237. }
  238. }
  239. }
  240. </style>