editCoupon.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. <template>
  2. <view class="container">
  3. <view class="page-block">
  4. <view class="page-title-block">
  5. <view class="title">基本信息</view>
  6. </view>
  7. <view class="content">
  8. <view class="cell flex flex-y-center">
  9. <view class="title-block required">
  10. <text>优惠券名称</text>
  11. </view>
  12. <view class="desc">
  13. <input type="text" class="input-box" v-model="info.name" placeholder="请输入优惠券名称"
  14. placeholder-class="desc-placeholder">
  15. </view>
  16. </view>
  17. <view class="cell flex flex-y-center arr-r">
  18. <view class="title-block required">
  19. <text>发放对象</text>
  20. </view>
  21. <view class="desc">
  22. <picker mode="selector" :range="objectList" range-key="name" @change="onObjectChange">
  23. <view :class="[objectActive == -1?'desc-placeholder':'','input-box']">
  24. <block v-if="objectActive>-1">
  25. {{objectList[objectActive].name}}
  26. </block>
  27. <block v-else>
  28. 请选择
  29. </block>
  30. </view>
  31. </picker>
  32. </view>
  33. </view>
  34. <view class="cell flex flex-y-center arr-r">
  35. <view class="title-block required">
  36. <text>推荐到支付成功领劵</text>
  37. </view>
  38. <view class="desc">
  39. <picker mode="selector" :range="typeList" range-key="name" @change="onTypeChange">
  40. <view :class="[typeActive == -1?'desc-placeholder':'','input-box']">
  41. <block v-if="typeActive>-1">
  42. {{typeList[typeActive].name}}
  43. </block>
  44. <block v-else>
  45. 请选择
  46. </block>
  47. </view>
  48. </picker>
  49. </view>
  50. </view>
  51. <view class="cell flex flex-y-center arr-r">
  52. <view class="title-block required">
  53. <text>首页弹窗</text>
  54. </view>
  55. <view class="desc">
  56. <picker mode="selector" :range="typeIndex" range-key="name" @change="onTypeIndexChange">
  57. <view :class="[typeActiveIndex == -1?'desc-placeholder':'','input-box']">
  58. <block v-if="typeActiveIndex>-1">
  59. {{typeIndex[typeActiveIndex].name}}
  60. </block>
  61. <block v-else>
  62. 请选择
  63. </block>
  64. </view>
  65. </picker>
  66. </view>
  67. </view>
  68. <view class="cell flex flex-y-center">
  69. <view class="title-block required">
  70. <text>优惠券数量</text>
  71. </view>
  72. <view class="desc">
  73. <input type="text" class="input-box" v-model="info.number" placeholder="请输入优惠券数量"
  74. placeholder-class="desc-placeholder">
  75. </view>
  76. </view>
  77. <view class="cell flex flex-y-center">
  78. <view class="title-block required">
  79. <text>优惠券剩余数量</text>
  80. </view>
  81. <view class="desc">
  82. <input type="text" class="input-box" v-model="info.stock" placeholder="请输入优惠券剩余数量"
  83. placeholder-class="desc-placeholder">
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. <view class="page-block">
  89. <view class="page-title-block">
  90. <view class="title">优惠信息</view>
  91. </view>
  92. <view class="content">
  93. <view class="cell flex flex-y-center">
  94. <view class="title-block required">
  95. <text>优惠金额</text>
  96. </view>
  97. <view class="desc">
  98. <input type="text" class="input-box" v-model="info.reduce" placeholder="请输入优惠金额"
  99. placeholder-class="desc-placeholder">
  100. </view>
  101. </view>
  102. <view class="cell flex flex-y-center">
  103. <view class="title-block required">
  104. <text>最低消费金额</text>
  105. </view>
  106. <view class="desc">
  107. <input type="text" class="input-box" v-model="info.full" placeholder="请输入满减金额"
  108. placeholder-class="desc-placeholder">
  109. </view>
  110. <view class="input-box" style="color:#333">元</view>
  111. </view>
  112. <view class="cell flex flex-y-center arr-r">
  113. <view class="title-block required">
  114. <text>开始时间</text>
  115. </view>
  116. <view class="desc">
  117. <picker mode="date" @change="onTimeChange" data-type="start_time">
  118. <view :class="[info.start_time?'':'desc-placeholder','input-box']">
  119. {{info.start_time || '请选择'}}
  120. </view>
  121. </picker>
  122. </view>
  123. </view>
  124. <view class="cell flex flex-y-center arr-r">
  125. <view class="title-block required">
  126. <text>结束时间</text>
  127. </view>
  128. <view class="desc">
  129. <picker mode="date" @change="onTimeChange" data-type="end_time">
  130. <view :class="[info.end_time?'':'desc-placeholder','input-box']">{{info.end_time || '请选择'}}
  131. </view>
  132. </picker>
  133. </view>
  134. </view>
  135. </view>
  136. </view>
  137. <!-- <view class="page-block" v-if="info.type == 2">
  138. <view class="page-title-block">
  139. <view class="title">指定商品</view>
  140. </view>
  141. <view class="content">
  142. <view class="cell flex flex-y-center goods-item arr-r">
  143. <image src="../static/images/avatar_def.png" mode="aspectFill" class="goods-img"></image>
  144. <view class="goods-info">
  145. <view class="name text-1">巨无霸汉堡</view>
  146. <view class="stock text-1">库存:100</view>
  147. <view class="price text-1">¥100.00</view>
  148. </view>
  149. </view>
  150. <view class="cell flex flex-y-center goods-item arr-r">
  151. <image src="../static/images/avatar_def.png" mode="aspectFill" class="goods-img"></image>
  152. <view class="goods-info">
  153. <view class="name text-1">巨无霸汉堡</view>
  154. <view class="stock text-1">库存:100</view>
  155. <view class="price text-1">¥100.00</view>
  156. </view>
  157. </view>
  158. </view>
  159. </view> -->
  160. <view style="height:25rpx;"></view>
  161. <view class="footer-bar">
  162. <view class="content flex flex-center" style="background: none;position: relative;">
  163. <view class="btn" @click="onSubmit">{{id?'保存':'立即添加'}}</view>
  164. </view>
  165. </view>
  166. </view>
  167. </template>
  168. <script>
  169. export default {
  170. data() {
  171. return {
  172. id: "",
  173. info: {
  174. id: '',
  175. name: '',
  176. start_time: '',
  177. end_time: '',
  178. full: '',
  179. reduce: '',
  180. store_id: '',
  181. type: '',
  182. goods_id: [],
  183. number: '',
  184. stock: '',
  185. status: '',
  186. },
  187. store_id: "",
  188. objectActive: -1,
  189. objectList: [{
  190. id: 1,
  191. name: "全平台"
  192. }, {
  193. id: 2,
  194. name: "新用户"
  195. }],
  196. typeActive: -1,
  197. typeList: [{
  198. id: 1,
  199. name: "是"
  200. },
  201. {
  202. id: 2,
  203. name: "否"
  204. }
  205. ],
  206. typeActiveIndex: -1,
  207. typeIndex: [{
  208. id: 1,
  209. name: "是"
  210. },
  211. {
  212. id: 0,
  213. name: "否"
  214. }
  215. ],
  216. }
  217. },
  218. onLoad(options) {
  219. if (options.id) {
  220. this.id = options.id
  221. this.getData()
  222. } else {
  223. this.store_id = options.store_id
  224. }
  225. },
  226. methods: {
  227. getData() {
  228. this.request({
  229. url: "Smdcshop/coupon_info",
  230. data: {
  231. id: this.id
  232. }
  233. }).then(res => {
  234. if (res.code == 200) {
  235. this.info = res.data
  236. this.store_id = res.data.store_id
  237. if (res.data.status == 1) {
  238. this.objectActive = 0
  239. } else if (res.data.status == 2) {
  240. this.objectActive = 1
  241. }
  242. if (res.data.is_index == 1) {
  243. this.typeActiveIndex = 0;
  244. } else {
  245. this.typeActiveIndex = 1;
  246. }
  247. if (res.data.is_pay == 1) {
  248. this.typeActive = 0
  249. } else if (res.data.is_pay == 2) {
  250. this.typeActive = 1
  251. }
  252. }
  253. }).catch(err => {
  254. console.log('err:', err)
  255. })
  256. },
  257. onObjectChange(e) {
  258. this.objectActive = e.detail.value
  259. this.info.status = this.objectList[e.detail.value].id
  260. },
  261. onTypeChange(e) {
  262. this.typeActive = e.detail.value
  263. this.info.type = this.typeList[e.detail.value].id
  264. },
  265. onTypeIndexChange(e) {
  266. this.typeActiveIndex = e.detail.value
  267. this.info.is_index = this.typeIndex[e.detail.value].id
  268. },
  269. onTimeChange(e) {
  270. console.log(e)
  271. this.info[e.currentTarget.dataset.type] = e.detail.value
  272. },
  273. onSubmit() {
  274. let params = {
  275. store_id: this.store_id, // 176 string 是 暂无描述
  276. name: this.info.name, //端午大礼包 string 是 优惠券名称
  277. status: this.info.status, //1 string 是 发放对象:1全平台,2新用户
  278. is_pay: this.info.type,
  279. is_index: this.info.is_index,
  280. full: this.info.full, //50 string 是 最低消费金额(元)
  281. reduce: this.info.reduce, //5 string 是 优惠金额(元)
  282. start_time: this.info.start_time, //2021-05-12 string 是 优惠券有效期 开始时间
  283. end_time: this.info.end_time, //2021-05-30 string 是 优惠券有效期 结束时间
  284. number: this.info.number, //10000 string 是 优惠券数量
  285. stock: this.info.stock, //剩余数量
  286. }
  287. if (this.id) {
  288. params.id = this.id
  289. }
  290. for (let key in params) {
  291. if (params[key] === '' || params[key] === undefined) {
  292. uni.showToast({
  293. title: "请完整填写",
  294. icon: 'none'
  295. })
  296. return false
  297. }
  298. }
  299. let start_time = Date.parse(params.start_time.replace(/-/g, '/'))
  300. let end_time = Date.parse(params.end_time.replace(/-/g, '/'))
  301. if (end_time < start_time) {
  302. uni.showToast({
  303. title: "结束时间不能小于开始时间",
  304. icon: 'none'
  305. })
  306. return false
  307. }
  308. this.request({
  309. url: this.id ? 'Smdcshop/coupon_update' : 'Smdcshop/coupon_add',
  310. data: params
  311. }).then(res => {
  312. uni.showModal({
  313. content: this.id ? '编辑成功' : '添加成功',
  314. showCancel: false,
  315. success: (r) => {
  316. let pages = getCurrentPages();
  317. let prevPage = pages[pages.length - 2];
  318. //
  319. // #ifdef H5
  320. prevPage.getData(1)
  321. // #endif
  322. // #ifndef H5
  323. prevPage.$vm.getData(1)
  324. // #endif
  325. uni.navigateBack()
  326. }
  327. })
  328. })
  329. }
  330. }
  331. }
  332. </script>
  333. <style>
  334. @import url("../static/css/common.css");
  335. page {
  336. background: #F4F5F7;
  337. }
  338. .goods-item {
  339. padding: 25rpx 0;
  340. }
  341. .goods-item .goods-img {
  342. display: block;
  343. width: 120rpx;
  344. height: 120rpx;
  345. border-radius: 8rpx;
  346. }
  347. .goods-item .goods-info {
  348. padding-left: 25rpx;
  349. }
  350. .goods-item .goods-info .name {
  351. font-size: 30rpx;
  352. font-weight: 600;
  353. color: #333;
  354. line-height: 1;
  355. }
  356. .goods-item .goods-info .stock {
  357. font-size: 24rpx;
  358. color: #999;
  359. margin-top: 16rpx;
  360. line-height: 1;
  361. }
  362. .goods-item .goods-info .price {
  363. font-size: 30rpx;
  364. color: #FD3939;
  365. margin-top: 20rpx;
  366. font-weight: 600;
  367. line-height: 1;
  368. }
  369. </style>