detailModal.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. <template>
  2. <a-modal
  3. centered
  4. class="promotion-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="详情"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. width="70%">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div class="detailModal-con">
  13. <a-form-model
  14. id="promotion-basicInfo-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol" >
  20. <a-form-model-item label="标题" prop="title">
  21. {{ form.title }}
  22. </a-form-model-item>
  23. <a-form-model-item label="排序" prop="sort">
  24. {{ form.sort }}
  25. </a-form-model-item>
  26. <a-form-model-item label="封面图片" prop="imageSet">
  27. <img
  28. :src="con"
  29. alt="图片走丢了"
  30. width="80"
  31. height="80"
  32. v-for="(con,i) in imageSet"
  33. style="margin-right:10px;object-fit: cover;"
  34. :key="i"/>
  35. <div class="upload-desc">说明:单张大小小于10Mb,最多10张;建议尺寸:宽(420px)*高(230px)</div>
  36. </a-form-model-item>
  37. <a-form-model-item label="内容类型" prop="contentType">
  38. {{ form.contentType==='IMAGE_CONTENT'?'图文展示':form.contentType==='VIDEO'?'视频展示':'跳转链接' }}
  39. </a-form-model-item>
  40. <div v-if="form.contentType==='IMAGE_CONTENT'">
  41. <a-form-model-item label="内容" prop="content" >
  42. <div class="box" v-html="form.content"></div>
  43. </a-form-model-item>
  44. <a-form-model-item label="是否发布" prop="publishFlag" >
  45. {{ form.publishFlag?form.publishFlag==='1'?'是':'否':'--' }}
  46. </a-form-model-item>
  47. </div>
  48. <div v-if="form.contentType==='VIDEO'">
  49. <a-form-model-item label="内容" prop="content" >
  50. <video
  51. ref="videoPlayer"
  52. width="230"
  53. height="150"
  54. controls
  55. loop
  56. controlsList="nodownload">
  57. <source :src="form.content" type="video/mp4">
  58. </video>
  59. </a-form-model-item>
  60. <a-form-model-item label="是否发布" prop="publishFlag" >
  61. {{ form.publishFlag?form.publishFlag==='1'?'是':'否':'--' }}
  62. </a-form-model-item>
  63. </div>
  64. <div v-if="form.contentType==='LINK'">
  65. <a-form-model-item label="内容" prop="ruleType">
  66. {{ form.content }}
  67. </a-form-model-item>
  68. </div>
  69. <div v-show="form.contentType==='LINK'&&form.content === '/pagesB/promoDetail'">
  70. <a-form-model-item label="基本规则" prop="ruleType">
  71. {{ form.promoRule&&form.promoRule.ruleType?form.promoRule.ruleType==='ticket'?'指定产品返代金券':'--':'--' }}
  72. </a-form-model-item>
  73. <a-form-model-item label="券名称" prop="ruleName">
  74. {{ form.promoRule&&form.promoRule.ruleName?form.promoRule.ruleName:'--' }}
  75. </a-form-model-item>
  76. <a-form-model-item label="券副标题" prop="ruleTitle">
  77. {{ form.promoRule&&form.promoRule.ruleTitle?form.promoRule.ruleTitle:'--' }}
  78. </a-form-model-item>
  79. <a-form-model-item label="生成方式" prop="ruleBaseType">
  80. {{ form.promoRule&&form.promoRule.ruleBaseType?form.promoRule.ruleBaseType==='bill'?'按订单生成券':'按订单产品款数生成券':'--' }}
  81. </a-form-model-item>
  82. <a-form-model-item label="券有效期" prop="validType" >
  83. <span>
  84. {{ form.promoRule&&form.promoRule.validType?form.promoRule.validType==='FIXED'?'固定日期':'领取后,立即生效,':'--' }}
  85. </span>
  86. <span class="timeBox" v-if="form.promoRule.validType==='FIXED'">{{ form.promoRule.validStartDate }}~{{ form.promoRule.validEndDate }}</span>
  87. <span class="timeBox" v-else>有效期{{ form.promoRule.validDays }}天</span>
  88. </a-form-model-item>
  89. <a-form-model-item label="券适用范围" prop="range" >
  90. 全部产品
  91. </a-form-model-item>
  92. <a-form-model-item label="使用说明" prop="ruleExplain" >
  93. {{ form.promoRule&&form.promoRule.ruleExplain?form.promoRule.ruleExplain:'--' }}
  94. </a-form-model-item>
  95. <a-form-model-item label="加盟商编辑" prop="dealerEditFlag" >
  96. {{ form.dealerEditFlag?form.dealerEditFlag==='1'?'是':'否':'--' }}
  97. </a-form-model-item>
  98. <a-form-model-item label="是否发布" prop="publishFlag" >
  99. {{ form.publishFlag?form.publishFlag==='1'?'是':'否':'--' }}
  100. </a-form-model-item>
  101. <a-form-model-item label="产品范围" prop="productRangeList" >
  102. <div v-if="productRangeList&&productRangeList.length>0">
  103. <a-tree-select
  104. v-model="productRangeList"
  105. :maxTagCount="12"
  106. :tree-data="productTypeList"
  107. tree-checkable
  108. :disabled="true"
  109. :getPopupContainer="triggerNode => triggerNode.parentNode"
  110. :replaceFields="{children:'children',title: 'productTypeName',key: 'productTypeSn',value: 'productTypeSn'}"
  111. placeholder="请选择产品范围" />
  112. </div>
  113. <div v-else>--</div>
  114. </a-form-model-item>
  115. <a-form-model-item label="返券产品" prop="publishFlag" >
  116. <div class="productTable">
  117. <s-table
  118. class="sTable"
  119. ref="table"
  120. size="small"
  121. :rowKey="(record) => record.id"
  122. :columns="columns"
  123. :data="loadData"
  124. :defaultLoadData="false"
  125. :style="{ maxHeight: 300+'px' }"
  126. :scroll="{ y:230 }"
  127. bordered>
  128. </s-table>
  129. </div>
  130. </a-form-model-item>
  131. </div>
  132. </a-form-model>
  133. <div class="btn-cont">
  134. <a-button id="promotion-basicInfo-modal-back" @click="isShow = false">关闭</a-button>
  135. </div>
  136. </div>
  137. </a-spin>
  138. </a-modal>
  139. </template>
  140. <script>
  141. import { commonMixin } from '@/utils/mixin'
  142. import { STable } from '@/components'
  143. import { productTypeQuery } from '@/api/productType'
  144. import { promoActiveDetail, promoRuleProductList } from '@/api/promoActive'
  145. export default {
  146. name: 'DetailModal',
  147. mixins: [commonMixin],
  148. components: { STable },
  149. props: {
  150. openModal: { // 弹框显示状态
  151. type: Boolean,
  152. default: false
  153. },
  154. itemSn: {
  155. type: String,
  156. default: ''
  157. }
  158. },
  159. data () {
  160. return {
  161. isShow: this.openModal, // 是否打开弹框
  162. spinning: false,
  163. formItemLayout: {
  164. labelCol: { span: 4 },
  165. wrapperCol: { span: 18 }
  166. },
  167. productTypeList: [],
  168. productRangeList: [],
  169. form: {
  170. promoActiveSn: undefined, // 促销活动sn
  171. title: '', // 标题
  172. imageSet: '', // 图片
  173. contentType: 'IMAGE_CONTENT', // 内容类型
  174. content: '', // 内容
  175. contentLink: '', // 链接内容
  176. sort: undefined, // 排序
  177. ruleEnableFlag: '1', // 参数配置 1勾选配置 0不能配置
  178. publishFlag: '0',
  179. dealerEditFlag: '0', // 加盟商编辑 1是 0否
  180. promoRule: {
  181. ruleType: 'ticket', // 基本规则类型
  182. productRangeFlag: '', // 产品范围标记 0无 1有产品范围
  183. productRangeList: [], // 产品范围列表
  184. ruleName: '', // 券名称
  185. ruleTitle: '', // 副标题
  186. ruleBaseType: 'category', // 券生成方式
  187. ruleExplain: '', // 使用说明
  188. validType: undefined, // 券有效期类型
  189. validStartDate: undefined, // 券生效时间
  190. validEndDate: undefined, // 券失效时间
  191. validDays: undefined, // 券有效期天数
  192. range: '1'
  193. }
  194. },
  195. imageSet: [],
  196. columns: [
  197. { title: '序号', dataIndex: 'no', width: '4%', align: 'center', customRender: function (text) { return text || '--' } },
  198. { title: '产品编码', dataIndex: 'productCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
  199. { title: '产品名称', dataIndex: 'productName', width: '20%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  200. { title: '原厂编码', dataIndex: 'origCode', width: '12%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
  201. { title: '活动价', dataIndex: 'price', width: '12%', align: 'center', customRender: text => { return ((text || text == 0) ? this.toThousands(text) : '--') } },
  202. { title: '返券金额', dataIndex: 'ruleValue', width: '12%', align: 'center', customRender: text => { return ((text || text == 0) ? this.toThousands(text) : '--') } },
  203. { title: '参考终端价', dataIndex: 'terminalPrice', width: '12%', align: 'center', customRender: text => { return ((text || text == 0) ? this.toThousands(text) : '--') } }
  204. ],
  205. rules: {
  206. title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
  207. imageSet: [{ required: true, message: '请选择要上传的封面图片', trigger: 'change' }],
  208. sort: [{ required: true, message: '请输入排序数字', trigger: 'blur' }],
  209. contentType: [{ required: true, message: '请选择内容类型', trigger: 'change' }],
  210. content: [{ required: true, message: '请输入对应内容', trigger: ['blur', 'change'] }],
  211. contentLink: [{ required: true, message: '请输入对应内容', trigger: 'blur' }],
  212. publishFlag: [{ required: true, message: '请选择是否发布', trigger: 'change' }],
  213. range: [{ required: true, message: '请选择券适用范围', trigger: 'change' }],
  214. ruleType: [{ required: true, message: '请选择基本规则', trigger: 'change' }],
  215. ruleName: [{ required: true, message: '请输入券名称', trigger: ['change', 'blur'] }],
  216. ruleBaseType: [{ required: true, message: '请选择生成方式', trigger: 'change' }],
  217. validType: [{ required: true, message: '请选择券有效期类型', trigger: 'change' }],
  218. ruleDetailList: [{ type: 'array', required: true, message: '请选择券内容', trigger: 'blur' }]
  219. },
  220. // 加载数据方法 必须为 Promise 对象
  221. loadData: parameter => {
  222. this.disabled = true
  223. this.spinning = true
  224. const params = Object.assign(parameter, this.queryParam)
  225. params.promoActiveSn = this.itemSn
  226. return promoRuleProductList(params).then(res => {
  227. let data
  228. if (res.status == 200) {
  229. data = res.data
  230. const no = (data.pageNo - 1) * data.pageSize
  231. for (var i = 0; i < data.list.length; i++) {
  232. data.list[i].no = no + i + 1
  233. }
  234. this.disabled = false
  235. }
  236. this.spinning = false
  237. return data
  238. })
  239. }
  240. }
  241. },
  242. methods: {
  243. // 重置
  244. resetSearchForm () {
  245. this.form = {
  246. promoActiveSn: undefined, // 促销活动sn
  247. title: '', // 标题
  248. imageSet: '', // 图片
  249. contentType: 'IMAGE_CONTENT', // 内容类型
  250. content: '', // 内容
  251. contentLink: '', // 链接内容
  252. sort: undefined, // 排序
  253. ruleEnableFlag: '1', // 参数配置 1勾选配置 0不能配置
  254. publishFlag: '0',
  255. dealerEditFlag: '0', // 加盟商编辑 1是 0否
  256. promoRule: {
  257. ruleType: 'ticket', // 基本规则类型
  258. productRangeFlag: '', // 产品范围标记 0无 1有产品范围
  259. productRangeList: [], // 产品范围列表
  260. ruleName: '', // 券名称
  261. ruleTitle: '', // 副标题
  262. ruleBaseType: 'category', // 券生成方式
  263. ruleExplain: '', // 使用说明
  264. validType: undefined, // 券有效期类型
  265. validStartDate: undefined, // 券生效时间
  266. validEndDate: undefined, // 券失效时间
  267. validDays: undefined, // 券有效期天数
  268. range: '1'
  269. }
  270. }
  271. this.imageSet = []
  272. this.productRangeList = []
  273. },
  274. // 获取列表详情
  275. getDetail () {
  276. promoActiveDetail({ sn: this.itemSn }).then(res => {
  277. if (res.status == 200) {
  278. if (res.data.contentType === 'LINK') {
  279. console.log('加载产品范围')
  280. this.$nextTick(() => {
  281. this.getTreeData()
  282. })
  283. if (res.data.promoRule && res.data.promoRule.productRangeList && res.data.promoRule.productRangeList.length > 0) {
  284. this.productRangeList = res.data.promoRule.productRangeList.map(item => { return item.productTypeSn })
  285. } else {
  286. this.productRangeList = []
  287. }
  288. }
  289. if (res.data.images) {
  290. this.form.imageSet = res.data.images
  291. this.imageSet = res.data.images.split(',')
  292. }
  293. this.form = res.data
  294. }
  295. })
  296. },
  297. // 获取产品范围数据
  298. getTreeData () {
  299. productTypeQuery({}).then(res => {
  300. if (res.status == 200) {
  301. this.productTypeList = res.data
  302. } else {
  303. this.productTypeList = []
  304. }
  305. })
  306. }
  307. },
  308. watch: {
  309. // 父页面传过来的弹框状态
  310. openModal (newValue, oldValue) {
  311. this.isShow = newValue
  312. },
  313. // 重定义的弹框状态
  314. isShow (newValue, oldValue) {
  315. if (!newValue) {
  316. this.$emit('close')
  317. this.resetSearchForm()
  318. } else {
  319. this.getDetail()
  320. this.$nextTick(() => {
  321. this.$refs.table.refresh(true)
  322. })
  323. }
  324. }
  325. }
  326. }
  327. </script>
  328. <style lang="less" scoped>
  329. .promotion-basicInfo-modal{
  330. .detailModal-con{
  331. max-height: 600px;
  332. overflow-y: scroll;
  333. }
  334. .timeBox{
  335. color:#ed1c24;
  336. opacity: .7;
  337. }
  338. .ant-modal-body {
  339. padding: 40px 40px 24px;
  340. }
  341. .promotion-basicInfo-con{
  342. margin-top:10px;
  343. }
  344. .ant-form-item{
  345. margin-bottom:0 !important;
  346. }
  347. .buyerBox{
  348. border:1px solid #d9d9d9;margin-top:10px;border-radius:4px;padding:4px 10px;background:#f2f2f2;max-height:130px;overflow-y:scroll;
  349. }
  350. .btn-cont {
  351. text-align: center;
  352. margin: 35px 0 10px;
  353. }
  354. //处理滚动条不显示
  355. .tabBox{
  356. max-height:100px;
  357. overflow-y:scroll;
  358. }
  359. .tabBox::-webkit-scrollbar {
  360. width: 0px;
  361. }
  362. .tabBox::-webkit-scrollbar-track {
  363. background: transparent;
  364. }
  365. .tabBox::-webkit-scrollbar-thumb {
  366. background: transparent;
  367. }
  368. .tabBox::-webkit-scrollbar-button {
  369. display: none;
  370. }
  371. // 设置input 禁用颜色
  372. .ant-form-item-control .ant-input[disabled]{
  373. color:#333333;
  374. background:#ffffff;
  375. }
  376. .ant-radio-button-wrapper-disabled{
  377. color:#333333;
  378. padding:0 16px;
  379. }
  380. .ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked{
  381. background-color: #ed1c24 !important;
  382. color:#ffffff;
  383. padding:0 16px;
  384. }
  385. /deep/.ant-select-disabled .ant-select-selection, .ant-cascader-picker-disabled{
  386. color:#333 !important;
  387. background:#fff;
  388. }
  389. .productTable{
  390. width:100%;
  391. }
  392. /deep/.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice{
  393. color:#333;
  394. }
  395. }
  396. </style>