index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656
  1. <template>
  2. <view class="main">
  3. <navbar :config="config" backColor="#666"></navbar>
  4. <view class="list">
  5. <view class="item" @click="checkCoupon(item,index)" v-for="(item,index) in listData" :key="index">
  6. <view class="item_tig">
  7. {{modeList[item.mode].text}}
  8. </view>
  9. <view class="item_c">
  10. <view class="item_c_l">
  11. <view>¥
  12. <text>{{item.face_value}}</text>
  13. </view>
  14. </view>
  15. <view class="item_c_img">
  16. <image src="/static/czd/line2.png" mode=""></image>
  17. </view>
  18. <view class="item_c_r">
  19. <view class="item_c_r_t">{{item.name}}</view>
  20. <view class="item_c_r_b">
  21. <text class="item_c_r_b_date">
  22. <text v-if="item.threshold&&item.has_threshold" class="condition">满¥{{item.threshold}}可用</text>
  23. <text v-if="!item.has_threshold" class="condition">无门槛</text>
  24. <view v-if="isMyCoupon || isCheck" class="tip2">{{item.expire_time}}到期</view>
  25. <view v-else class="tip2">{{item.end_time}}到期</view>
  26. </text>
  27. <view class="item_c_r_b_btn" v-if="isMyCoupon" @click="useTickets()">去使用</view>
  28. <view class="item_c_r_b_btn" v-else-if="isCheck" v-show="checkIndex===index">已选择</view>
  29. <view class="item_c_r_b_btn" v-else @click="grabTickets(item.id)">立即抢</view>
  30. <!-- <button v-if="isMyCoupon" @click="useTickets()">去使用</button>
  31. <button v-else-if="isCheck" v-show="checkIndex===index" class="no-have">已选择</button>
  32. <button v-else @click="grabTickets(item.id)" class="no-have">立即抢</button> -->
  33. </view>
  34. </view>
  35. </view>
  36. <view class="item_line">
  37. <image src="/static/czd/line.png" mode=""></image>
  38. </view>
  39. <!-- <view class="item_b" @click="$set(item,'isOpen',!item.isOpen)">
  40. <view>仅产业园内食堂有效</view>
  41. <image :class="item.isOpen?'open':''" src="/static/czd/down.png" mode=""></image>
  42. </view> -->
  43. <view class="item_b" @click="$set(item,'isOpen',!item.isOpen)">
  44. <text class="time">领券后{{item.expired_day}}天有效,记得及时使用噢</text>
  45. <image :class="item.isOpen?'open':''" src="/static/czd/down.png" mode=""></image>
  46. </view>
  47. <view class="item_b" v-if="item.isOpen" >
  48. <text>{{item.content}}</text>
  49. </view>
  50. </view>
  51. <!-- <view @click="checkCoupon(item,index)" v-for="(item,index) in listData" :key="index" class="item"
  52. :class="checkIndex===index?'checked':''">
  53. <view class="top">
  54. <view class="left">
  55. <view class="tag">{{modeList[item.mode].text}}</view>
  56. <text class="face-price">¥<text class="num">{{item.face_value}}</text></text>
  57. </view>
  58. <view class="right">
  59. <view class="tip">{{item.name}}</view>
  60. <view class="flex-box">
  61. <view>
  62. <text v-if="item.threshold" class="condition">满¥{{item.threshold}}可用</text>
  63. <text v-else class="condition">无门槛</text>
  64. <view v-if="isMyCoupon || isCheck" class="tip2">{{item.expire_time}}到期</view>
  65. <view v-else class="tip2">{{item.end_time}}到期</view>
  66. </view>
  67. <button v-if="isMyCoupon" @click="useTickets()">去使用</button>
  68. <button v-else-if="isCheck" v-show="checkIndex===index" class="no-have">已选择</button>
  69. <button v-else @click="grabTickets(item.id)" class="no-have">立即抢</button>
  70. </view>
  71. </view>
  72. </view>
  73. <view class="bottom" @click="$set(item,'isOpen',!item.isOpen)">
  74. <text class="time">领券后{{item.expired_day}}天有效,记得及时使用噢</text>
  75. <text class="iconfont2" :class="item.isOpen?'open':''">&#xe6cc;</text>
  76. </view>
  77. <view v-if="item.isOpen" class="desc">
  78. <text>{{item.content}}</text>
  79. </view>
  80. </view> -->
  81. <view>
  82. <noData v-if="listData.length<=0"></noData>
  83. </view>
  84. </view>
  85. <view v-if="isMyCoupon && loadStatus=='nomore'" class="go-center">没有更多券了!<text class="light"
  86. @click="goCouponCenter()">去领券中心领取></text></view>
  87. <u-loadmore v-else :status="loadStatus" />
  88. </view>
  89. </template>
  90. <script>
  91. import noData from "@/components/noData/nodata.vue"
  92. export default {
  93. components: {
  94. noData
  95. },
  96. data() {
  97. return {
  98. config: {
  99. back: true,
  100. title: '',
  101. color: '#1a1a1a',
  102. backgroundColor: [1, '#fff'],
  103. statusBarFontColor: 'black'
  104. },
  105. // 优惠券类型
  106. modeList: [{
  107. text: '平台券'
  108. }, {
  109. text: '店铺券'
  110. }],
  111. // “我的优惠券”参数
  112. pageParams1: {
  113. page: 1,
  114. limit: 10,
  115. status: 0 // 0可以使用,1已使用,2,未使用已过期
  116. },
  117. // “领券中心”参数
  118. pageParams2: {
  119. page: 1,
  120. limit: 10,
  121. trait: 0
  122. },
  123. // “选择可使用的优惠券”参数
  124. pageParams3: {
  125. marketing_type: 0,
  126. total_amount_dec_shop_coupon: 0, // 支付总金额
  127. shop_order_list: [{
  128. total_amount_dec_shop_coupon: 0, //不含运费,扣出首单,扣除店铺优惠券的费用
  129. shop_id: '' // 店铺id
  130. },
  131. {
  132. total_amount_dec_shop_coupon: 0,
  133. shop_id: '',
  134. }
  135. ]
  136. },
  137. listData: [],
  138. loadStatus: 'loadmore', //loading / nomore
  139. isMyCoupon: false, // 是否为“我的优惠券”
  140. isCheck: false, // 是否为“选择可使用的优惠券”
  141. checkIndex: '',
  142. couponId: '' // 当前选择的优惠卷
  143. }
  144. },
  145. onLoad(option) {
  146. if (option.isMyCoupon) {
  147. this.isMyCoupon = true;
  148. this.config.title = '我的优惠券';
  149. this.getMyList(true);
  150. } else if (option.isCheck) {
  151. this.isCheck = true;
  152. this.couponId = option.couponId;
  153. this.config.title = '选择优惠券';
  154. this.pageParams3 = {
  155. ...this.pageParams3,
  156. ...JSON.parse(option.checkParams)
  157. }
  158. this.getMyCanUseList();
  159. } else {
  160. this.config.title = '领券中心'
  161. this.getList(true);
  162. }
  163. },
  164. onPullDownRefresh() {
  165. if (this.isMyCoupon) {
  166. this.getMyList(true);
  167. } else if (this.isCheck) {
  168. this.getMyCanUseList();
  169. } else {
  170. this.getList(true);
  171. }
  172. uni.stopPullDownRefresh();
  173. },
  174. methods: {
  175. // 我的优惠券列表
  176. getMyList(isRefresh, needLoading = false) {
  177. let that = this;
  178. if (!isRefresh && this.loadStatus == 'nomore') {
  179. return false;
  180. }
  181. this.pageParams1.page = isRefresh ? 1 : this.pageParams1.page + 1;
  182. this.listData = isRefresh ? [] : this.listData;
  183. if (needLoading) {
  184. uni.showLoading({
  185. title: '努力加载中...',
  186. mask: true
  187. });
  188. }
  189. this.loadStatus = 'loading';
  190. this.$http.get('/couponreceiverecord/page', this.pageParams1)
  191. .then(res => {
  192. if (res.code == 200) {
  193. let listData = that.listData;
  194. listData.push(...res.page.list);
  195. that.listData = listData;
  196. that.loadStatus = that.listData.length >= res.page.totalCount ? 'nomore' : 'loadmore';
  197. }
  198. })
  199. .finally(() => {
  200. if (needLoading) {
  201. uni.hideLoading();
  202. }
  203. })
  204. },
  205. // 领券中心列表
  206. getList(isRefresh, needLoading = false) {
  207. let that = this;
  208. if (!isRefresh && this.loadStatus == 'nomore') {
  209. return false;
  210. }
  211. this.pageParams2.page = isRefresh ? 1 : this.pageParams2.page + 1;
  212. this.listData = isRefresh ? [] : this.listData;
  213. if (needLoading) {
  214. uni.showLoading({
  215. title: '努力加载中...',
  216. mask: true
  217. });
  218. }
  219. this.loadStatus = 'loading';
  220. this.$http.get('/coupon/page', this.pageParams2)
  221. .then(res => {
  222. if (res.code == 200) {
  223. let listData = that.listData;
  224. listData.push(...res.page.list);
  225. that.listData = listData;
  226. that.loadStatus = that.listData.length >= res.page.totalCount ? 'nomore' : 'loadmore';
  227. }
  228. })
  229. .finally(() => {
  230. if (needLoading) {
  231. uni.hideLoading();
  232. }
  233. })
  234. },
  235. // 我可以使用的优惠券列表
  236. getMyCanUseList() {
  237. this.loadStatus = 'loading';
  238. this.$http.post('/select/platcoupon', this.pageParams3)
  239. .then(res => {
  240. if (res.code == 200) {
  241. this.listData = res.list;
  242. this.loadStatus = 'nomore';
  243. //显示默认使用的优惠券
  244. for (let i in res.list) {
  245. if (res.list[i].id == this.couponId) {
  246. this.checkIndex = i * 1;
  247. break;
  248. }
  249. }
  250. }
  251. })
  252. },
  253. //领券
  254. grabTickets(id) {
  255. uni.showLoading({
  256. title: '正在提交中...',
  257. mask: true
  258. });
  259. this.$http.post(`/couponreceiverecord/receive/${id}`, {})
  260. .then(res => {
  261. if (res.code == 200) {
  262. uni.showToast({
  263. icon: 'success',
  264. title: '领券成功'
  265. })
  266. //获取上一个页面
  267. var pages = getCurrentPages();
  268. if (pages.length > 1) {
  269. var beforePage = pages[pages.length - 2];
  270. if (beforePage.$vm.isMyCoupon) {
  271. beforePage.$vm.getMyList(true);
  272. }
  273. }
  274. }
  275. })
  276. .finally(() => {
  277. uni.hideLoading();
  278. })
  279. },
  280. goCouponCenter() {
  281. uni.navigateTo({
  282. url: '/pages/couponCenter/index'
  283. })
  284. },
  285. useTickets() {
  286. uni.redirectTo({
  287. url: '/pages/index/lidaPage'
  288. })
  289. },
  290. // 选择优惠券
  291. checkCoupon(item, index) {
  292. if (this.isCheck) {
  293. if (this.checkIndex === index) {
  294. this.checkIndex = '';
  295. } else {
  296. this.checkIndex = index;
  297. }
  298. }
  299. let params = {
  300. couponId: 0,
  301. }
  302. if (this.checkIndex !== '') {
  303. params = {
  304. my_coupon_id: item.id
  305. }
  306. }
  307. //获取上一个页面
  308. var pages = getCurrentPages();
  309. if (pages.length > 1) {
  310. var beforePage = pages[pages.length - 2];
  311. if (beforePage.$vm.changeCoupon) {
  312. beforePage.$vm.changeCoupon(params);
  313. }
  314. }
  315. }
  316. },
  317. onReachBottom() {
  318. if (this.isMyCoupon) {
  319. this.getMyList();
  320. } else if (this.isCheck) {
  321. } else {
  322. this.getList();
  323. }
  324. }
  325. }
  326. </script>
  327. <style lang="scss" scoped>
  328. .main {
  329. min-height: 100vh;
  330. background-color: rgba(253, 253, 253, 1);
  331. padding: 0 0 50rpx 0;
  332. .go-center {
  333. font-size: 26rpx;
  334. font-family: PingFang SC, PingFang SC-Regular;
  335. font-weight: 400;
  336. text-align: center;
  337. color: #808080;
  338. // margin-top: 60rpx;
  339. .light {
  340. color: #00A7E6;
  341. }
  342. }
  343. .list {
  344. padding: 30rpx 30rpx 0;
  345. .item {
  346. width: 100%;
  347. min-height: 300rpx;
  348. background: url("./../../static/ZW/BG_02.png") no-repeat center center;
  349. background-size: 100% 100%;
  350. position: relative;
  351. padding:40rpx 30rpx;
  352. margin-bottom: 30rpx;
  353. .item_tig {
  354. width: 129rpx;
  355. height: 44rpx;
  356. display: flex;
  357. align-items: center;
  358. justify-content: center;
  359. background: #fa6037;
  360. border-radius: 18rpx 0rpx 18rpx 0rpx;
  361. font-size: 24rpx;
  362. color: #FFFFFF;
  363. position: absolute;
  364. top: 0;
  365. left: 0;
  366. }
  367. .item_c {
  368. display: flex;
  369. justify-content: space-between;
  370. .item_c_l {
  371. width: 160rpx;
  372. color: #E2403E;
  373. font-weight: 700;
  374. // line-height: 136rpx;
  375. flex-shrink: 0;
  376. display: flex;
  377. align-items: center;
  378. text {
  379. font-size: 54rpx;
  380. }
  381. >view{
  382. font-size: 42rpx;
  383. }
  384. }
  385. .item_c_img {
  386. image {
  387. width: 2rpx;
  388. height: 136rpx;
  389. }
  390. }
  391. .item_c_r {
  392. .item_c_r_t {
  393. font-size: 28rpx;
  394. color: #333333;
  395. font-weight: 700;
  396. overflow: hidden;
  397. text-overflow: ellipsis;
  398. display: -webkit-box;
  399. -webkit-line-clamp: 2;
  400. -webkit-box-orient: vertical;
  401. padding:0rpx 0rpx 10rpx 30rpx;
  402. }
  403. .item_c_r_b {
  404. display: flex;
  405. justify-content: space-between;
  406. align-items: center;
  407. padding-left: 30rpx;
  408. .item_c_r_b_date {
  409. font-size: 24rpx;
  410. color: #808080;
  411. .condition {
  412. vertical-align: middle;
  413. font-size: 24rpx;
  414. font-family: PingFang SC, PingFang SC-Regular;
  415. font-weight: 400;
  416. text-align: left;
  417. color: #808080;
  418. line-height: 28rpx;
  419. }
  420. .tip {
  421. font-size: 28rpx;
  422. font-family: PingFang SC, PingFang SC-Regular;
  423. font-weight: 400;
  424. text-align: left;
  425. color: #333333;
  426. line-height: 28rpx;
  427. margin-top: 5rpx;
  428. }
  429. .tip2 {
  430. font-size: 24rpx;
  431. font-family: PingFang SC, PingFang SC-Regular;
  432. font-weight: 400;
  433. text-align: left;
  434. line-height: 28rpx;
  435. color: #666666;
  436. margin-top: 5rpx;
  437. }
  438. }
  439. .item_c_r_b_btn {
  440. width: 141rpx;
  441. height: 56rpx;
  442. border: 1rpx solid #fa6037;
  443. border-radius: 29rpx;
  444. font-size: 24rpx;
  445. color: #FA6037;
  446. display: flex;
  447. align-items: center;
  448. justify-content: center;
  449. }
  450. }
  451. }
  452. }
  453. .item_line{
  454. image{
  455. width: 100%;
  456. height: 2rpx;
  457. }
  458. }
  459. .item_b{
  460. display: flex;
  461. justify-content: space-between;
  462. align-items: center;
  463. font-size: 24rpx;
  464. color: #666666;
  465. margin-top: 10rpx;
  466. image{
  467. width: 26rpx;
  468. height: 14rpx;
  469. }
  470. .open {
  471. transform: rotate(180deg);
  472. }
  473. }
  474. }
  475. // .item {
  476. // position: relative;
  477. // width: 690rpx;
  478. // background: #ffffff;
  479. // border-radius: 16rpx;
  480. // margin: 40rpx auto 0 auto;
  481. // box-sizing: border-box;
  482. // // background-image: url('/static/couponCenter/card.png');
  483. // // background-size: 100% 100%;
  484. // // background-position: top;
  485. // // background-repeat: no-repeat;
  486. // padding-bottom: 19rpx;
  487. // filter: drop-shadow(1px 2px 4px rgba(26, 58, 70, 0.1));
  488. // &.checked {
  489. // background: #fff8e1;
  490. // button {
  491. // background: #ffb74d !important;
  492. // border-color: #ffb74d !important;
  493. // }
  494. // }
  495. // .top {
  496. // display: flex;
  497. // align-items: center;
  498. // justify-content: space-between;
  499. // border-bottom: 1px dashed #cccccc;
  500. // ;
  501. // padding: 63rpx 0 19rpx 0;
  502. // width: calc(100% - 60rpx);
  503. // margin: 0 30rpx;
  504. // }
  505. // .tag {
  506. // position: absolute;
  507. // top: 0;
  508. // left: 0;
  509. // height: 45rpx;
  510. // line-height: 45rpx;
  511. // padding: 0 30rpx;
  512. // background: #d9f9dd;
  513. // border-radius: 16rpx 0px 16rpx 0px;
  514. // font-size: 24rpx;
  515. // font-family: PingFang SC, PingFang SC-Regular;
  516. // font-weight: 400;
  517. // text-align: left;
  518. // color: #139145;
  519. // }
  520. // .left {
  521. // margin-right: 26rpx;
  522. // .face-price {
  523. // font-size: 42rpx;
  524. // font-family: PingFang SC, PingFang SC-Bold;
  525. // font-weight: 700;
  526. // text-align: left;
  527. // color: #0f8849;
  528. // .num {
  529. // font-size: 54rpx;
  530. // }
  531. // }
  532. // }
  533. // .right {
  534. // flex: 1;
  535. // .flex-box {
  536. // display: flex;
  537. // align-items: self-end;
  538. // justify-content: space-between;
  539. // button {
  540. // display: flex;
  541. // align-items: center;
  542. // width: fit-content;
  543. // height: 56rpx;
  544. // line-height: 56rpx;
  545. // padding: 0 28rpx;
  546. // border-radius: 28rpx;
  547. // font-size: 30rpx;
  548. // font-family: PingFang SC, PingFang SC-Regular;
  549. // font-weight: 400;
  550. // text-align: center;
  551. // color: #ffffff;
  552. // border: 1px solid #0f8849;
  553. // color: #0F8849;
  554. // white-space: nowrap;
  555. // &.no-have {
  556. // background: #0B844A;
  557. // color: white;
  558. // border: 1px solid #0B844A;
  559. // }
  560. // }
  561. // .condition {
  562. // vertical-align: middle;
  563. // font-size: 24rpx;
  564. // font-family: PingFang SC, PingFang SC-Regular;
  565. // font-weight: 400;
  566. // text-align: left;
  567. // color: #808080;
  568. // line-height: 28rpx;
  569. // }
  570. // .tip {
  571. // font-size: 28rpx;
  572. // font-family: PingFang SC, PingFang SC-Regular;
  573. // font-weight: 400;
  574. // text-align: left;
  575. // color: #333333;
  576. // line-height: 28rpx;
  577. // margin-top: 5rpx;
  578. // }
  579. // .tip2 {
  580. // font-size: 24rpx;
  581. // font-family: PingFang SC, PingFang SC-Regular;
  582. // font-weight: 400;
  583. // text-align: left;
  584. // line-height: 28rpx;
  585. // color: #666666;
  586. // margin-top: 5rpx;
  587. // }
  588. // }
  589. // }
  590. // .bottom {
  591. // padding: 17rpx 30rpx 0 30rpx;
  592. // display: flex;
  593. // align-items: center;
  594. // justify-content: space-between;
  595. // .time {
  596. // font-size: 24rpx;
  597. // font-family: PingFang SC, PingFang SC-Regular;
  598. // font-weight: 400;
  599. // text-align: left;
  600. // color: #666666;
  601. // }
  602. // .iconfont2 {
  603. // transition: all 0.3s;
  604. // &.open {
  605. // transform: rotate(180deg);
  606. // }
  607. // }
  608. // }
  609. // .desc {
  610. // padding: 10rpx 30rpx 0 30rpx;
  611. // font-size: 24rpx;
  612. // font-family: PingFang SC, PingFang SC-Regular;
  613. // font-weight: 400;
  614. // text-align: left;
  615. // color: #666666;
  616. // }
  617. // }
  618. }
  619. }
  620. </style>