detailModal.vue 16 KB

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