doConfirm.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. <template>
  2. <view v-if="!isLoading" class="container b-f p-b">
  3. <view class="base">
  4. <view class="coupon-image">
  5. <image class="image" :src="detail.image"></image>
  6. </view>
  7. <view class="coupon-title">
  8. <view class="name">{{ detail.name }}</view>
  9. <view v-if="detail.amount > 0" class="price"><span class="label">面额:</span>¥{{ detail.amount }}</view>
  10. <view v-if="detail.type == 'P'" class="balance"><span class="label">余额:</span>¥{{ detail.balance }}</view>
  11. <view v-if="detail.tips" class="tips">{{ detail.tips }}</view>
  12. <view class="time">有效期:{{ detail.effectiveDate }}</view>
  13. </view>
  14. <view v-if="detail.status=='B'" class="icon-can"></view>
  15. <view v-else-if="detail.status=='C'" class="icon-cannot"></view>
  16. </view>
  17. <view class="confirm-form">
  18. <u-form :model="form" label-width="140rpx">
  19. <u-form-item class="input" v-if="detail.type === 'P'" label="金额:">
  20. <u-input v-model="form.amount" placeholder="核销金额" />
  21. </u-form-item>
  22. <view v-if="detail.type === 'T'" class="coupon-timer">
  23. <view class="tips">完成情况({{detail.confirmCount}}/{{detail.useRule}})</view>
  24. <uni-row class="time-row" v-for="row in dataList" :key="row.id">
  25. <uni-col :span="rowCount" v-for="item in row.data" :key="item.isActive" class="time-item">
  26. <view v-if="item.isActive == true" class="time active"></view>
  27. <view v-else class="time"></view>
  28. </uni-col>
  29. </uni-row>
  30. </view>
  31. <u-form-item class="input" label="备注:" :border-bottom="false">
  32. <u-input v-model="form.remark" placeholder="核销备注" />
  33. </u-form-item>
  34. </u-form>
  35. </view>
  36. <view class="coupon-content m-top20">
  37. <view class="title">使用须知</view>
  38. <view class="content"><jyf-parser :html="detail.description"></jyf-parser></view>
  39. </view>
  40. <view class="footer-fixed">
  41. <view v-if="detail.status == 'A'" class="btn-wrapper">
  42. <view class="btn-item btn-item-main" @click="doConfirm()">确定核销</view>
  43. </view>
  44. <view v-else-if="detail.status == 'B'" class="btn-wrapper">
  45. <view class="btn-item cannot">已经核销</view>
  46. </view>
  47. <view v-else class="btn-wrapper">
  48. <view class="btn-item cannot">不可核销</view>
  49. </view>
  50. </view>
  51. <!-- 快捷导航 -->
  52. <shortcut/>
  53. </view>
  54. </template>
  55. <script>
  56. import * as myCouponApi from '@/api/myCoupon'
  57. import * as confirmApi from '@/api/confirm'
  58. import Shortcut from '@/components/merchant-shortcut'
  59. export default {
  60. components: {
  61. Shortcut
  62. },
  63. data() {
  64. return {
  65. // 会员会员卡券编码
  66. code: null,
  67. userCouponId: null,
  68. userCouponCode: null,
  69. // 加载中
  70. isLoading: true,
  71. // 当前卡券详情
  72. detail: null,
  73. rowCount: 0,
  74. dataList: [],
  75. // 核销结果
  76. result: false,
  77. form: {'code': '', 'amount': '', 'remark': ''}
  78. }
  79. },
  80. /**
  81. * 生命周期函数--监听页面加载
  82. */
  83. onLoad(options) {
  84. // 记录ID
  85. this.userCouponId = options.id
  86. // 核销二维码
  87. this.userCouponCode = options.code
  88. // 获取卡券详情
  89. this.getCouponDetail()
  90. },
  91. methods: {
  92. // 获取卡券详情
  93. getCouponDetail() {
  94. const app = this
  95. myCouponApi.detail(0, app.userCouponId, app.userCouponCode)
  96. .then(result => {
  97. app.detail = result.data
  98. app.getRowCount(app.detail.useRule)
  99. app.getDataList(app.detail.useRule, app.detail.confirmCount)
  100. })
  101. .finally(() => app.isLoading = false)
  102. },
  103. doConfirm() {
  104. const app = this
  105. // 储值卡核销金额
  106. if (app.detail.type == 'P') {
  107. if (app.form.amount <= 0) {
  108. app.$error("核销金额不能小于0,请输入");
  109. return false
  110. } else if (app.form.amount > app.detail.amount) {
  111. app.$error("核销金额不能大于" + app.detail.amount + ",请重新输入");
  112. return false
  113. }
  114. }
  115. if (app.isLoading) {
  116. return false;
  117. }
  118. app.isLoading = true;
  119. confirmApi.doConfirm(app.detail.code, app.form.amount, app.form.remark)
  120. .then(result => {
  121. if (result.data) {
  122. app.getCouponDetail()
  123. this.$success("核销成功")
  124. app.detail.status = result.data.status
  125. app.detail.balance = result.data.balance
  126. app.form.amount = ""
  127. app.form.remark = ""
  128. app.getCouponDetail()
  129. } else {
  130. this.$error(result.message)
  131. }
  132. app.isLoading = false
  133. resolve(result)
  134. });
  135. },
  136. // 组织数据
  137. getDataList(num, use) {
  138. const app = this
  139. if (num <= 4 && num > 0) {
  140. app.dataList = [{"data": []}]
  141. for (let i = 1; i <= num; i++) {
  142. app.dataList[0].data.push({"isActive": (i <= use ? true : false)})
  143. }
  144. } else {
  145. let rowCount = Math.ceil(num / 4)
  146. let c = 1;
  147. for (let i = 0; i < rowCount; i++) {
  148. app.dataList[i] = {"data": []}
  149. for (let j = 1; j <= 4; j++) {
  150. if (c <= num) {
  151. app.dataList[i].data.push({"isActive": (c <= use ? true : false)})
  152. c++
  153. }
  154. }
  155. }
  156. }
  157. },
  158. // 计算行数
  159. getRowCount(num) {
  160. if (num < 4 && num > 0) {
  161. this.rowCount = 24 / num
  162. } else if (num >= 4) {
  163. this.rowCount = 6
  164. }
  165. }
  166. }
  167. }
  168. </script>
  169. <style lang="scss" scoped>
  170. .container {
  171. min-height: 100vh;
  172. background: #fff;
  173. color:#666666;
  174. }
  175. .base {
  176. border: dashed 5rpx #cccccc;
  177. padding: 30rpx;
  178. border-radius: 10rpx;
  179. margin: 20rpx;
  180. height: 270rpx;
  181. .coupon-image {
  182. float: left;
  183. margin-top: 10rpx;
  184. .image {
  185. width: 200rpx;
  186. height: 158rpx;
  187. border-radius: 8rpx;
  188. }
  189. width: 30%;
  190. }
  191. .coupon-title {
  192. float: left;
  193. margin-left: 30rpx;
  194. overflow: hidden;
  195. width: 65%;
  196. .name {
  197. font-weight: bold;
  198. }
  199. .price {
  200. margin-top:20rpx;
  201. color:#666;
  202. font-size: 20rpx;
  203. .label {
  204. font-size:20rpx;
  205. }
  206. }
  207. .balance {
  208. margin-top:20rpx;
  209. color:#f9211c;
  210. font-size:20rpx;
  211. }
  212. .tips {
  213. margin-top:20rpx;
  214. font-size: 20rpx;
  215. }
  216. .time {
  217. margin-top: 10rpx;
  218. font-size: 20rpx;
  219. color: #666666;
  220. }
  221. }
  222. }
  223. .confirm-form {
  224. border: dashed 5rpx #cccccc;
  225. padding: 30rpx;
  226. border-radius: 10rpx;
  227. margin: 20rpx;
  228. .input {
  229. border: solid 1px #ccc;
  230. padding-left: 20rpx;
  231. margin-bottom: 10rpx;
  232. border-radius: 10rpx;
  233. width: 98%;
  234. display: inline-flex;
  235. }
  236. .coupon-timer {
  237. border-radius: 10rpx;
  238. clear: both;
  239. overflow: hidden;
  240. margin-bottom: 10rpx;
  241. height: 100%;
  242. .tips {
  243. margin-bottom: 60rpx;
  244. }
  245. .time-row {
  246. margin-bottom: 10rpx;
  247. height: 100rpx;
  248. display: flex;
  249. }
  250. .time-item {
  251. padding-top: 10rpx;
  252. text-align: center;
  253. align-items: center;
  254. justify-content: center;
  255. }
  256. .time {
  257. height: 80rpx;
  258. margin-bottom: 30rpx;
  259. text-align: center;
  260. padding-top: 20rpx;
  261. border-radius: 40rpx;
  262. color: #ffffff;
  263. font-weight: bold;
  264. background: url('~@/static/confirm/undo.png') no-repeat center center;
  265. background-size: contain;
  266. }
  267. .active {
  268. background: url('~@/static/confirm/do.png') no-repeat center center;
  269. background-size: contain;
  270. border: solid 1px #ffffff;
  271. }
  272. min-height: 160rpx;
  273. }
  274. }
  275. .coupon-content {
  276. font-size: 28rpx;
  277. padding: 15rpx;
  278. border: dashed 5rpx #cccccc;
  279. border-radius: 5rpx;
  280. margin: 20rpx;
  281. min-height: 400rpx;
  282. .title {
  283. margin-bottom: 15rpx;
  284. }
  285. }
  286. .footer-fixed {
  287. position: fixed;
  288. width: 100%;
  289. bottom: var(--window-bottom);
  290. height: 180rpx;
  291. padding-bottom: 30rpx;
  292. z-index: 11;
  293. margin-top: 20rpx;
  294. .btn-wrapper {
  295. height: 100%;
  296. display: flex;
  297. align-items: center;
  298. padding: 0 20rpx;
  299. .cannot {
  300. border-radius: 38rpx;
  301. color: #fff;
  302. line-height: 80rpx;
  303. text-align: center;
  304. font-weight: 500;
  305. font-size: 28rpx;
  306. background:linear-gradient(to right, #cccccc, #cccccc)
  307. }
  308. }
  309. .btn-item {
  310. flex: 1;
  311. font-size: 28rpx;
  312. height: 80rpx;
  313. line-height: 80rpx;
  314. text-align: center;
  315. color: #ffffff;
  316. border-radius: 40rpx;
  317. }
  318. .btn-item-main {
  319. background: linear-gradient(to right, #f9211c, #ff6335);
  320. }
  321. }
  322. </style>