detail.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  1. <template>
  2. <view v-if="!isLoading" class="container b-f p-b">
  3. <view class="base">
  4. <view class="coupon-main">
  5. <view class="left">
  6. <image class="image" :src="detail.image"></image>
  7. </view>
  8. <view class="right">
  9. <view class="item">
  10. <view class="name">{{ detail.name ? detail.name : '' }}</view>
  11. </view>
  12. <view v-if="detail.amount > 0" class="item">
  13. <view class="amount">¥<text class="num">{{ detail.amount }}</text></view>
  14. </view>
  15. </view>
  16. </view>
  17. <view v-if="detail.point > 0" class="item">
  18. <view class="label">兑换积分:</view>
  19. <view class="amount">{{ detail.point }}</view>
  20. </view>
  21. <view class="item">
  22. <view class="label">有效期至:</view>
  23. <view class="time">{{ detail.effectiveDate }}</view>
  24. </view>
  25. <view class="item">
  26. <view class="label">适用门店:</view>
  27. <view>{{ detail.storeNames ? detail.storeNames : '全部'}}</view>
  28. </view>
  29. <view v-if="detail.code && detail.status == 'A' && detail.isGive" class="gift" @click="give()"><text>转赠好友</text></view>
  30. </view>
  31. <view class="coupon-qr" v-if="detail.code">
  32. <view>
  33. <image class="image" :src="detail.qrCode"></image>
  34. </view>
  35. <view class="qr-code">
  36. <p class="code">核销码:{{ detail.code }}</p>
  37. <p class="tips">请出示以上券码给核销人员</p>
  38. </view>
  39. </view>
  40. <view class="coupon-content m-top20">
  41. <view class="title">使用须知</view>
  42. <view class="content"><jyf-parser :html="detail.description ? detail.description : '暂无...'"></jyf-parser></view>
  43. </view>
  44. <!-- 快捷导航 -->
  45. <shortcut/>
  46. <view class="give-popup" v-if="detail.qrCode">
  47. <uni-popup ref="givePopup" type="dialog">
  48. <uni-popup-dialog mode="input" focus="false" title="转赠给好友" type="info" placeholder="输入好友手机号码" :before-close="true" @close="cancelGive" @confirm="doGive"></uni-popup-dialog>
  49. </uni-popup>
  50. </view>
  51. <!-- 底部选项卡 -->
  52. <view v-if="!detail.code && !detail.isReceive" class="footer-fixed">
  53. <view class="footer-container">
  54. <!-- 操作按钮 -->
  55. <view class="foo-item-btn">
  56. <view class="btn-wrapper">
  57. <view class="btn-item btn-item-main" @click="receive(detail.id)">
  58. <text v-if="!detail.point || detail.point < 1">立即领取</text>
  59. <text v-if="detail.point && detail.point > 0">立即兑换</text>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </view>
  65. <view class="footer-fixed" v-if="userCouponId || detail.isReceive">
  66. <view class="footer-container">
  67. <!-- 操作按钮 -->
  68. <view class="foo-item-btn">
  69. <view class="btn-wrapper">
  70. <view v-if="detail.isReceive" class="btn-item btn-item-main state">
  71. <text v-if="!detail.point || detail.point < 1">您已领取</text>
  72. <text v-if="detail.point && detail.point > 0">您已兑换</text>
  73. </view>
  74. <view v-if="userCouponId && detail.status != 'D'" class="btn-item btn-item-main" @click="remove(userCouponId)">
  75. <text>删除卡券</text>
  76. </view>
  77. <view v-else class="btn-item btn-item-main state">
  78. <text>已删除</text>
  79. </view>
  80. </view>
  81. </view>
  82. </view>
  83. </view>
  84. <!--领取码 start-->
  85. <view class="receive-pop">
  86. <uni-popup ref="receiveCodePopup" type="dialog">
  87. <uni-popup-dialog mode="input" v-model="receiveCode" focus="false" title="领取码" type="info" placeholder="请输入领取码" :before-close="true" @close="cancelReceive" @confirm="doReceive"></uni-popup-dialog>
  88. </uni-popup>
  89. </view>
  90. <!--领取码 end-->
  91. </view>
  92. </template>
  93. <script>
  94. import jyfParser from '@/components/jyf-parser/jyf-parser'
  95. import Shortcut from '@/components/shortcut'
  96. import * as myCouponApi from '@/api/myCoupon'
  97. import * as giveApi from '@/api/give'
  98. import * as couponApi from '@/api/coupon'
  99. import * as MessageApi from '@/api/message'
  100. import config from '@/config'
  101. export default {
  102. components: {
  103. Shortcut
  104. },
  105. data() {
  106. return {
  107. // 当前会员卡券ID
  108. userCouponId: 0,
  109. // 卡券ID
  110. couponId: 0,
  111. // 加载中
  112. isLoading: true,
  113. // 当前卡券详情
  114. detail: null,
  115. qrCode: '',
  116. receiveCode: '' // 领取码
  117. }
  118. },
  119. /**
  120. * 生命周期函数--监听页面加载
  121. */
  122. onLoad(options) {
  123. this.userCouponId = options.userCouponId ? options.userCouponId : 0;
  124. this.couponId = options.couponId ? options.couponId : 0;
  125. this.getCouponDetail();
  126. },
  127. methods: {
  128. // 获取卡券详情
  129. getCouponDetail() {
  130. const app = this
  131. myCouponApi.detail(app.couponId, app.userCouponId, "")
  132. .then(result => {
  133. app.detail = result.data;
  134. if (!app.couponId || app.couponId < 1) {
  135. app.couponId = app.detail.couponId;
  136. }
  137. })
  138. .finally(() => app.isLoading = false)
  139. },
  140. // 转赠
  141. give() {
  142. this.$refs.givePopup.open('top');
  143. },
  144. cancelGive() {
  145. this.$refs.givePopup.close();
  146. },
  147. doGive(friendMobile) {
  148. const app = this
  149. if (friendMobile.length < 11) {
  150. app.$error("请先输入好友手机号码!")
  151. return false
  152. } else {
  153. app.$refs.givePopup.close()
  154. const param = {'mobile': friendMobile, 'couponId': this.userCouponId, 'message': '转赠一张优惠券给你'}
  155. giveApi.doGive(param)
  156. .then(result => {
  157. if (result.code == '200') {
  158. uni.showModal({
  159. title: '提示信息',
  160. content: '恭喜,转增成功!',
  161. showCancel: false,
  162. success(o) {
  163. if (o.confirm) {
  164. uni.navigateBack()
  165. }
  166. }
  167. })
  168. } else {
  169. app.$error(result.message)
  170. }
  171. })
  172. }
  173. },
  174. // 取消领取码
  175. cancelReceive() {
  176. this.receiveCode = '';
  177. this.$refs.receiveCodePopup.close();
  178. },
  179. // 确认领取码
  180. doReceive(vCode) {
  181. if (!vCode || vCode.length < 1) {
  182. this.$error("请先输入领取码!");
  183. return false;
  184. }
  185. this.receiveCode = vCode;
  186. this.$refs.receiveCodePopup.close();
  187. this.receive(this.couponId);
  188. },
  189. // 领取卡券
  190. receive(couponId) {
  191. const app = this
  192. if (app.detail.needReceiveCode && !app.receiveCode) {
  193. app.$refs.receiveCodePopup.open('top');
  194. return false;
  195. }
  196. if (app.detail.point) {
  197. uni.showModal({
  198. title: "提示信息",
  199. content: "需要"+app.detail.point+"积分兑换,您确定兑换吗?",
  200. success({ confirm }) {
  201. if (confirm) {
  202. couponApi.receive({ 'couponId': couponId, 'receiveCode': app.receiveCode })
  203. .then(result => {
  204. app.receiveCode = '';
  205. // 显示提示
  206. if (parseInt(result.code) === 200) {
  207. app.detail.isReceive = true
  208. app.$success("兑换成功!")
  209. // #ifdef MP-WEIXIN
  210. MessageApi.getSubTemplate({keys: "couponArrival,couponConfirm"}).then(result => {
  211. const templateIds = result.data
  212. wx.requestSubscribeMessage({tmplIds: templateIds,
  213. success(res) {
  214. console.log("调用成功!")
  215. }, fail(res) {
  216. console.log("调用失败:", res)
  217. }, complete() {
  218. // empty
  219. }
  220. })
  221. })
  222. // #endif
  223. } else {
  224. app.$error(result.message)
  225. }
  226. })
  227. }
  228. }
  229. });
  230. } else {
  231. couponApi.receive({ 'couponId': couponId, 'receiveCode': app.receiveCode })
  232. .then(result => {
  233. app.receiveCode = '';
  234. // 显示提示
  235. if (parseInt(result.code) === 200) {
  236. app.detail.isReceive = true
  237. app.$success("领取成功!")
  238. // #ifdef MP-WEIXIN
  239. MessageApi.getSubTemplate({keys: "couponArrival,couponConfirm"}).then(result => {
  240. const templateIds = result.data
  241. wx.requestSubscribeMessage({tmplIds: templateIds,
  242. success(res) {
  243. console.log("调用成功!")
  244. }, fail(res) {
  245. console.log("调用失败:", res)
  246. }, complete() {
  247. // empty
  248. }
  249. })
  250. })
  251. // #endif
  252. } else {
  253. app.$error(result.message)
  254. }
  255. })
  256. }
  257. },
  258. // 删除卡券
  259. remove() {
  260. const app = this;
  261. if (app.isLoading == true) {
  262. return false;
  263. }
  264. uni.showModal({
  265. title: "提示",
  266. content: "您确定要删除吗?",
  267. success({ confirm }) {
  268. if (confirm) {
  269. app.isLoading = true;
  270. myCouponApi.remove(app.userCouponId)
  271. .then(result => {
  272. app.getCouponDetail();
  273. app.isLoading = false;
  274. })
  275. .finally(() => app.isLoading = false)
  276. }
  277. }
  278. });
  279. }
  280. },
  281. /**
  282. * 分享当前页面
  283. */
  284. onShareAppMessage() {
  285. const app = this
  286. return {
  287. title: config.name + "卡券分享",
  288. path: "/pages/coupon/detail?couponId=" + app.couponId + "&" + app.$getShareUrlParams()
  289. }
  290. },
  291. /**
  292. * 分享到朋友圈
  293. * 本接口为 Beta 版本,暂只在 Android 平台支持,详见分享到朋友圈 (Beta)
  294. * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
  295. */
  296. onShareTimeline() {
  297. const app = this
  298. const { page } = app
  299. return {
  300. title: config.name + "卡券分享",
  301. path: "/pages/coupon/detail?couponId=" + app.couponId + "&" + app.$getShareUrlParams()
  302. }
  303. }
  304. }
  305. </script>
  306. <style lang="scss" scoped>
  307. .container {
  308. min-height: 100vh;
  309. padding: 20rpx;
  310. background: #fff;
  311. color:#666666;
  312. }
  313. .base {
  314. border: dashed 5rpx #cccccc;
  315. padding: 30rpx;
  316. border-radius: 10rpx;
  317. margin: 20rpx;
  318. display: block;
  319. height: auto;
  320. min-height: 420rpx;
  321. .coupon-main {
  322. clear: both;
  323. min-height: 164rpx;
  324. border: #ccc dashed 2rpx;
  325. border-radius: 5rpx;
  326. margin-bottom: 20rpx;
  327. .left {
  328. width: 215rpx;
  329. float: left;
  330. .image {
  331. width: 210rpx;
  332. height: 160rpx;
  333. border-radius: 8rpx;
  334. border-right: #cccccc dashed 2rpx;
  335. }
  336. }
  337. .right {
  338. width: 380rpx;
  339. float: left;
  340. overflow: hidden;
  341. .name {
  342. font-size: 38rpx;
  343. }
  344. .num {
  345. font-size: 58rpx;
  346. color: red;
  347. }
  348. }
  349. }
  350. .item {
  351. clear: both;
  352. margin-bottom: 10rpx;
  353. font-size: 30rpx;
  354. color: #666666;
  355. .label {
  356. float: left;
  357. }
  358. .amount {
  359. font-weight: bold;
  360. }
  361. .name {
  362. font-weight: bold;
  363. margin-left: 6rpx;
  364. }
  365. }
  366. }
  367. .coupon-qr {
  368. border: dashed 5rpx #cccccc;
  369. border-radius: 10rpx;
  370. margin: 20rpx;
  371. text-align: center;
  372. padding-top: 30rpx;
  373. padding-bottom: 30rpx;
  374. .image{
  375. width: 360rpx;
  376. height: 360rpx;
  377. margin: 0 auto;
  378. }
  379. .qr-code{
  380. .code{
  381. font-weight: bold;
  382. font-size: 30rpx;
  383. line-height: 50rpx;
  384. }
  385. .tips{
  386. font-size: 25rpx;
  387. color:#C0C4CC;
  388. }
  389. }
  390. }
  391. .coupon-content {
  392. padding: 30rpx;
  393. border: dashed 5rpx #cccccc;
  394. border-radius: 5rpx;
  395. margin: 20rpx 20rpx 200rpx 20rpx;
  396. min-height: 400rpx;
  397. .title {
  398. margin-bottom: 15rpx;
  399. font-weight: bold;
  400. }
  401. .content {
  402. color: #666666;
  403. font-size: 24rpx;
  404. }
  405. }
  406. .gift {
  407. height: 50rpx;
  408. width: 120rpx;
  409. margin-top: 20rpx;
  410. line-height: 50rpx;
  411. text-align: center;
  412. border: 1px solid #f8df00;
  413. border-radius: 6rpx;
  414. color: #f86d48;
  415. background: #f8df98;
  416. font-size: 22rpx;
  417. float: right;
  418. &.state {
  419. border: none;
  420. color: #F5F5F5;
  421. background: #888888;
  422. }
  423. }
  424. /* 底部操作栏 */
  425. .footer-fixed {
  426. position: fixed;
  427. bottom: var(--window-bottom);
  428. left: 0;
  429. right: 0;
  430. display: flex;
  431. height: 180rpx;
  432. z-index: 11;
  433. box-shadow: 0 -4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
  434. background: #fff;
  435. }
  436. .footer-container {
  437. width: 100%;
  438. display: flex;
  439. margin-bottom: 40rpx;
  440. }
  441. // 操作按钮
  442. .foo-item-btn {
  443. flex: 1;
  444. .btn-wrapper {
  445. height: 100%;
  446. display: flex;
  447. align-items: center;
  448. }
  449. .btn-item {
  450. flex: 1;
  451. font-size: 28rpx;
  452. height: 80rpx;
  453. line-height: 80rpx;
  454. margin-right: 16rpx;
  455. margin-left: 16rpx;
  456. text-align: center;
  457. color: #fff;
  458. border-radius: 40rpx;
  459. }
  460. // 立即领取按钮
  461. .btn-item-main {
  462. background: linear-gradient(to right, #f9211c, #ff6335);
  463. &.state {
  464. border: none;
  465. color: #cccccc;
  466. background: #F5F5F5;
  467. }
  468. }
  469. }
  470. </style>