prize.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. <template>
  2. <view>
  3. <!-- tab切换 -->
  4. <view class="recently flex-between">
  5. <!-- <van-tab @click="onTab" /> -->
  6. <liuyuno-tabs :tabData="tabs" @tabClick='onTab' />
  7. </view>
  8. <view class="" style="height: 80rpx;"></view>
  9. <no-none v-if='CouponList.length<=0'></no-none>
  10. <block v-else>
  11. <block v-for=" (item,index) in CouponList" :key="index">
  12. <view class="CouponList" @click="CouponUse" :data-id="item.id">
  13. <image src="../../static/images/discount-Couponimg.png" mode="" class="CouponListimg"></image>
  14. <view class="CouponL">
  15. <view class="CouponLmoney">¥{{ Number(item.cut_price) }}</view>
  16. <view class="CouponLmoneys">满{{ Number(item.full_price)}}可用</view>
  17. </view>
  18. <view class="CouponContent">
  19. <view class="CouponContenttitle text-1">{{item.title}}</view>
  20. <view class="CouponContentC">
  21. <text>有效期:</text>
  22. <text>{{item.start_time}}-{{item.end_time}}</text>
  23. </view>
  24. </view>
  25. <view class="CouponR" @click="open(item.code,item.qrcode)">
  26. <view class="CouponRtext">立即使用</view>
  27. </view>
  28. </view>
  29. </block>
  30. <view class="" style="height: 10rpx;"></view>
  31. <block v-if="isCoupon">
  32. <view class="no-more">
  33. ---没有更多了---
  34. </view>
  35. </block>
  36. </block>
  37. <uni-popup ref="popup" type="center">
  38. <view class="pop">
  39. <view style="text-align: center;padding: 40rpx 0 30rpx 0;">
  40. <view class="flex-center">
  41. <view class="pop-title">
  42. <view class="pop-color left">
  43. </view>
  44. <view class="">
  45. 核销码
  46. </view>
  47. <view class="pop-color right">
  48. </view>
  49. </view>
  50. </view>
  51. <view>
  52. {{code}}
  53. </view>
  54. </view>
  55. <view class="pop-code">
  56. <image class="pop-code-img" :src="qrcode" mode=""></image>
  57. </view>
  58. <!--<view class="box-pack-between pop-shop flex-y-center">
  59. <text @click="merchant"data-index="1">商户位置</text>
  60. <view class="line"></view>
  61. <text @click="merchant" data-index="2">前往商户</text>
  62. <view class="line"></view>
  63. <text @click="close">关闭窗口</text>
  64. </view> -->
  65. </view>
  66. </uni-popup>
  67. </view>
  68. </template>
  69. <script>
  70. import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
  71. export default {
  72. components: {
  73. liuyunoTabs
  74. },
  75. data() {
  76. return {
  77. tabs: ["未使用", "已使用", "已过期"],
  78. page: 1,
  79. limit: 10,
  80. type: 1,
  81. token: '', //获取用户的token
  82. power_id: '',
  83. CouponList: [], //优惠券列表
  84. isCoupon: false,
  85. code: "",
  86. qrcode: '',
  87. }
  88. },
  89. onLoad(e) {
  90. this.token = e.token, this.power_id = e.power_id; //读取缓存手机号码
  91. this.Coupon();
  92. },
  93. onReachBottom() {
  94. this.Coupon();
  95. },
  96. methods: { // 使用优惠券
  97. onTab(e) {
  98. console.log(e, "e")
  99. this.activeindexs = e + 1;
  100. this.type = this.activeindexs;
  101. this.CouponList = [];
  102. this.page = 1;
  103. this.Coupon();
  104. },
  105. open(code, qrcode) {
  106. this.code = code;
  107. this.qrcode = getApp().globalData.URL + qrcode;
  108. this.$refs.popup.open();
  109. },
  110. CouponUse(e) {
  111. console.log(e.currentTarget.dataset.id)
  112. let id = e.currentTarget.dataset.id;
  113. uni.navigateTo({
  114. url: './CouponDetails?id=' + id
  115. })
  116. },
  117. // 请求优惠券
  118. Coupon() {
  119. this.request({
  120. url: "game/memberPrizeList",
  121. data: {
  122. token: this.token,
  123. power_id: this.power_id,
  124. page: this.page,
  125. limit: 10,
  126. status: Number(this.type) - 1,
  127. },
  128. is_agent:'member',
  129. }).then(res => {
  130. console.log(res, "res")
  131. if (res.code === '200') {
  132. // this.CouponList = res.data;
  133. if (res.code == "200" && res.data.length > 0) {
  134. this.CouponList = this.CouponList.concat(res.data);
  135. this.page = this.page + 1;
  136. this.isCoupon = false;
  137. } else {
  138. this.isCoupon = true;
  139. }
  140. }
  141. }).catch((res) => {
  142. uni.showToast({
  143. title: res.message,
  144. icon: 'none'
  145. })
  146. });
  147. },
  148. }
  149. }
  150. </script>
  151. <style lang="scss">
  152. /* 优惠券列表 */
  153. page {
  154. background: #fff;
  155. }
  156. .recently {
  157. position: fixed;
  158. top: 0;
  159. width: 100%;
  160. background: #FFFFFF;
  161. z-index: 99;
  162. }
  163. .flex-between {
  164. display: flex;
  165. flex-flow: row nowrap;
  166. justify-content: space-between;
  167. align-items: center;
  168. }
  169. .flex-y-center {
  170. display: -webkit-box;
  171. display: -webkit-flex;
  172. display: flex;
  173. -webkit-box-align: center;
  174. -webkit-align-items: center;
  175. -ms-flex-align: center;
  176. -ms-grid-row-align: center;
  177. align-items: center;
  178. }
  179. .CouponList {
  180. position: relative;
  181. width: 750rpx;
  182. height: 170rpx;
  183. margin-bottom: 20rpx;
  184. }
  185. .CouponListimg {
  186. margin: 30rpx 32rpx;
  187. width: 686rpx;
  188. height: 165rpx;
  189. /* border: 1px solid #f1f1f1; */
  190. /* font-family: -webkit-body; */
  191. /* border-radius: 10px; */
  192. }
  193. .CouponL {
  194. position: absolute;
  195. left: 60rpx;
  196. top: 60rpx;
  197. text-align: center;
  198. width: 150rpx;
  199. overflow: hidden;
  200. text-overflow: ellipsis;
  201. white-space: nowrap;
  202. }
  203. .CouponLmoney {
  204. font-size: 47rpx;
  205. font-family: PingFangSC-Medium;
  206. color: #FF5722;
  207. width: 150rpx;
  208. overflow: hidden;
  209. text-overflow: ellipsis;
  210. white-space: nowrap;
  211. }
  212. .CouponLmoneys {
  213. font-size: 24rpx;
  214. font-family: PingFang SC, PingFang SC-Medium;
  215. font-weight: 500;
  216. color: #FF5722;
  217. width: 150rpx;
  218. overflow: hidden;
  219. text-overflow: ellipsis;
  220. white-space: nowrap;
  221. }
  222. /* 已过期状态 */
  223. .pastDue {
  224. position: absolute;
  225. left: 90rpx;
  226. top: 70rpx;
  227. text-align: center;
  228. }
  229. .pastDueMoney {
  230. font-size: 47rpx;
  231. font-family: PingFangSC-Medium;
  232. color: #c9c9c9;
  233. }
  234. .pastDueMoneys {
  235. font-size: 24rpx;
  236. font-family: PingFang SC, PingFang SC-Medium;
  237. font-weight: 500;
  238. color: #c9c9c9;
  239. }
  240. /* 已过期状态 end*/
  241. .CouponContent {
  242. position: absolute;
  243. left: 220rpx;
  244. top: 65rpx;
  245. width: 400rpx;
  246. }
  247. .CouponContenttitle {
  248. font-size: 31rpx;
  249. font-family: PingFangSC-Medium;
  250. color: #514f50;
  251. font-weight: 700;
  252. }
  253. .CouponContentB {
  254. font-size: 24rpx;
  255. font-family: PingFangSC-Regular;
  256. color: #99a0ad;
  257. padding: 9rpx 0;
  258. }
  259. .CouponContentC {
  260. font-size: 24rpx;
  261. font-family: PingFangSC-Regular;
  262. color: #99a0ad;
  263. padding-top: 20rpx;
  264. }
  265. .CouponR {
  266. -webkit-writing-mode: vertical-rl;
  267. writing-mode: vertical-rl;
  268. position: absolute;
  269. right: 62rpx;
  270. top: 52rpx;
  271. }
  272. .CouponRtext {
  273. font-size: 28rpx;
  274. font-family: PingFangSC-Medium;
  275. color: #fff;
  276. }
  277. /* 已使用或者已过期 */
  278. .haveExpired {
  279. -webkit-writing-mode: vertical-rl;
  280. writing-mode: vertical-rl;
  281. position: absolute;
  282. right: 62rpx;
  283. top: 75rpx;
  284. letter-spacing: 4rpx
  285. }
  286. .haveExpiredtext {
  287. font-size: 28rpx;
  288. font-family: PingFangSC-Medium;
  289. color: #fff;
  290. }
  291. /* 底部按钮 */
  292. .bottomButton {
  293. position: fixed;
  294. left: 0;
  295. bottom: 40rpx;
  296. width: 750rpx;
  297. }
  298. .bottomButtonL {
  299. margin-left: 40rpx;
  300. background: #F0F2F5;
  301. width: 320rpx;
  302. height: 98rpx;
  303. line-height: 98rpx;
  304. text-align: center;
  305. border: 2rpx solid #fff;
  306. border-radius: 8rpx;
  307. font-size: 32rpx;
  308. font-family: PingFangSC-Medium;
  309. color: #141F33;
  310. opacity: 1;
  311. }
  312. .bottomButtonR {
  313. margin-right: 40rpx;
  314. width: 320rpx;
  315. height: 98rpx;
  316. line-height: 98rpx;
  317. text-align: center;
  318. border-radius: 8rpx;
  319. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  320. background: linear-gradient(180deg, #6fa5ff, #438aff);
  321. font-size: 32rpx;
  322. font-family: PingFangSC-Medium;
  323. color: #FFFFFF;
  324. opacity: 1;
  325. }
  326. .bottomButtonB {
  327. width: 670rpx;
  328. height: 98rpx;
  329. border-radius: 8rpx;
  330. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  331. color: #FFFFFF;
  332. background: linear-gradient(180deg, #6fa5ff, #438aff);
  333. margin: 0 auto;
  334. margin-top: 20rpx;
  335. }
  336. .pop {
  337. width: 600rpx;
  338. height: 600rpx;
  339. background: #ffffff;
  340. border-radius: 16rpx;
  341. .flex-center {
  342. font-size: 36rpx;
  343. .pop-title {
  344. font-size: 36rpx;
  345. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  346. font-weight: 500;
  347. text-align: center;
  348. color: #ff2d5a;
  349. position: relative;
  350. display: inline-block;
  351. .pop-color {
  352. width: 41rpx;
  353. height: 41rpx;
  354. opacity: 0.3;
  355. background: linear-gradient(150deg, #ff2d5a 13%, rgba(251, 45, 89, 0.00) 87%);
  356. border-radius: 50%;
  357. }
  358. .left {
  359. position: absolute;
  360. left: -28rpx;
  361. top: 36rpx;
  362. }
  363. .right {
  364. position: absolute;
  365. right: -28rpx;
  366. bottom: 36rpx;
  367. }
  368. }
  369. }
  370. .pop-code {
  371. margin: 0 auto;
  372. text-align: center;
  373. .pop-code-img {
  374. width: 337rpx;
  375. height: 337rpx;
  376. background: rgba(0, 0, 0, 0.00);
  377. }
  378. }
  379. .pop-shop {
  380. font-size: 30rpx;
  381. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  382. font-weight: 500;
  383. text-align: center;
  384. color: #ff2d5a;
  385. padding: 0 48rpx;
  386. margin-top: 48rpx;
  387. .line {
  388. width: 2rpx;
  389. height: 24rpx;
  390. opacity: 0.4;
  391. background: #ff2d5a;
  392. border-radius: 1rpx;
  393. }
  394. }
  395. }
  396. </style>