payLottery.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
  1. <template>
  2. <view>
  3. <view class="header" v-show="lotteryShow">
  4. <view class="pay-status">
  5. <text class="iconfont icon-gou"></text>
  6. <view class="pay-status-r">
  7. <text class="pay-status-text">
  8. 支付成功
  9. </text>
  10. <text>
  11. 支付金额:¥{{totalPrice}}
  12. </text>
  13. </view>
  14. </view>
  15. <view class="jump">
  16. <view class="jump-det" @click="orderDetails">
  17. 查看订单
  18. </view>
  19. <view v-if="orderInfo.pink_id" class="jump-index" @click="goPink(orderInfo.pink_id)">
  20. {{orderInfo.pinkStatus==2?'查看拼团':'邀请参团'}}
  21. </view>
  22. <view v-else class="jump-index" @click="goIndex">
  23. 返回首页
  24. </view>
  25. </view>
  26. </view>
  27. <view class="grids-top" v-show="lotteryShow">
  28. <image src="../static/pay-lottery-l.png" mode=""></image>
  29. <view class="grids-title">
  30. <view>恭喜您,</view>
  31. <view class="grids-frequency">获得{{lottery_num}}</view>
  32. <view>抽奖机会</view>
  33. </view>
  34. <image src="../static/pay-lottery-r.png" mode=""></image>
  35. </view>
  36. <view class='termValidity acea-row row-center-wrapper' v-show="lotteryShow">
  37. <view class='timeItem acea-row row-center-wrapper'>
  38. <view>距有效期仅剩</view>
  39. <countDown :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' : '"
  40. :minute-text="' : '" :second-text="' '" :datatime="datatime"
  41. style="margin-top: 4rpx;"></countDown>
  42. </view>
  43. </view>
  44. <view class="grids" v-show="lotteryShow">
  45. <image class="grids-bag" :src="imgHost + '/statics/images/pay-lottery-bag.png'" mode=""></image>
  46. <view class="grids-box">
  47. <gridsLottery class="" :prizeData="prize" :userCount='userCount' @get_winingIndex='getWiningIndex'
  48. @luck_draw_finish='luck_draw_finish' :lotteryType='1' :datatime="datatime">
  49. </gridsLottery>
  50. </view>
  51. </view>
  52. <lotteryAleart :aleartStatus="aleartStatus" @close="closeLottery" :alData="alData" :aleartType="aleartType">
  53. </lotteryAleart>
  54. <view class="mask" v-if="aleartStatus || addressModel"></view>
  55. <userAddress v-if="addressModel" :aleartStatus="addressModel" @getAddress="getAddress" @close="()=>{addressModel = false}">
  56. </userAddress>
  57. <!-- #ifdef MP -->
  58. <!-- <authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize> -->
  59. <!-- #endif -->
  60. </view>
  61. </template>
  62. <script>
  63. import countDown from '@/components/countDown';
  64. import gridsLottery from '../components/lottery/index.vue'
  65. import lotteryAleart from '../components/lotteryAleart/index.vue'
  66. import userAddress from '../components/userAddress/index.vue'
  67. import {getOrderDetail} from '@/api/order.js';
  68. import {openOrderSubscribe} from '@/utils/SubscribeMessage.js';
  69. import {toLogin} from '@/libs/login.js';
  70. import {
  71. getLotteryData,
  72. startLottery,
  73. receiveLottery
  74. } from '@/api/lottery.js'
  75. import {
  76. mapGetters
  77. } from "vuex";
  78. import {HTTP_REQUEST_URL} from '@/config/app';
  79. import { postCartAdd } from '@/api/store.js';
  80. export default {
  81. components: {
  82. gridsLottery,
  83. lotteryAleart,
  84. userAddress,
  85. countDown
  86. },
  87. props: {
  88. options: {
  89. type: Object
  90. },
  91. orderPayInfo: {
  92. type: Object
  93. }
  94. },
  95. data() {
  96. return {
  97. lotteryShow: false,
  98. addressModel: false,
  99. lottery_num: 0,
  100. aleartType: 0,
  101. aleartStatus: false,
  102. lottery_draw_param: {
  103. startIndex: 3, //开始抽奖位置,从0开始
  104. totalCount: 3, //一共要转的圈数
  105. winingIndex: 1, //中奖的位置,从0开始
  106. speed: 100 //抽奖动画的速度 [数字越大越慢,默认100]
  107. },
  108. alData: {},
  109. type: '',
  110. prize: [],
  111. orderId: '',
  112. order_pay_info: {
  113. paid: 1,
  114. _status: {}
  115. },
  116. isAuto: false, //没有授权的不会自动授权
  117. isShowAuth: false, //是否隐藏授权
  118. couponsHidden: true,
  119. couponList: [],
  120. totalPrice: 0,
  121. datatime:0,
  122. orderInfo:{},
  123. imgHost:HTTP_REQUEST_URL,
  124. userCount:{
  125. total:0,
  126. today:0
  127. }
  128. };
  129. },
  130. computed: mapGetters(['isLogin']),
  131. watch: {
  132. isLogin: {
  133. handler: function(newV, oldV) {
  134. if (newV) {}
  135. },
  136. deep: true
  137. },
  138. options: {
  139. handler: function(newV, oldV) {
  140. if (newV) {
  141. this.orderId = newV.order_id;
  142. this.totalPrice = newV.totalPrice;
  143. this.type = newV.type
  144. if(this.isLogin){
  145. this.getLotteryData(newV.type)
  146. }else{
  147. toLogin();
  148. }
  149. }
  150. },
  151. deep: true
  152. },
  153. orderPayInfo: {
  154. handler: function(newV, oldV) {
  155. if (newV) {
  156. this.orderInfo = newV
  157. }
  158. },
  159. deep: true
  160. },
  161. },
  162. created(options) {
  163. // #ifdef H5 || APP-PLUS
  164. this.orderId = this.options.order_id;
  165. this.totalPrice = this.options.totalPrice;
  166. this.type = this.options.type;
  167. // #endif
  168. },
  169. mounted(){
  170. // #ifdef H5 || APP-PLUS
  171. if (this.isLogin) {
  172. this.getLotteryData(this.type)
  173. } else {
  174. toLogin();
  175. }
  176. // #endif
  177. },
  178. methods: {
  179. onLoadFun(){
  180. this.getLotteryData(this.type)
  181. this.isShowAuth = false;
  182. },
  183. // 授权关闭
  184. authColse: function(e) {
  185. this.isShowAuth = e
  186. },
  187. // 去参团页面;
  188. goPink: function(id) {
  189. uni.navigateTo({
  190. url: '/pages/activity/goods_combination_status/index?id=' + id
  191. });
  192. },
  193. openTap() {
  194. this.$set(this, 'couponsHidden', !this.couponsHidden);
  195. },
  196. orderDetails() {
  197. this.$emit('orderDetails')
  198. },
  199. getWiningIndex(callback) {
  200. this.aleartType = 0
  201. startLottery({
  202. id: this.id
  203. }).then(res => {
  204. this.prize.forEach((item, index) => {
  205. if (res.data.id === item.id) {
  206. this.alData = res.data
  207. this.lottery_draw_param.winingIndex = index;
  208. callback(this.lottery_draw_param);
  209. }
  210. })
  211. }).catch(err => {
  212. this.$util.Tips({
  213. title: err
  214. });
  215. })
  216. // //props修改在小程序和APP端不成功,所以在这里使用回调函数传参,
  217. },
  218. /**
  219. * 去首页关闭当前所有页面
  220. */
  221. goIndex: function(e) {
  222. uni.switchTab({
  223. url: '/pages/index/index'
  224. });
  225. },
  226. /**
  227. *
  228. * 去订单详情页面
  229. */
  230. goOrderDetails: function(e) {
  231. // #ifdef MP
  232. uni.showLoading({
  233. title: '正在加载',
  234. })
  235. openOrderSubscribe().then(res => {
  236. uni.hideLoading();
  237. uni.navigateTo({
  238. url: '/pages/goods/order_details/index?order_id=' + this.orderId
  239. });
  240. }).catch(() => {
  241. nui.hideLoading();
  242. });
  243. // #endif
  244. },
  245. getLotteryData(type) {
  246. getLotteryData(type).then(res => {
  247. this.factor_num = res.data.lottery.factor_num
  248. this.id = res.data.lottery.id
  249. this.prize = res.data.lottery.prize
  250. this.lottery_num = res.data.lottery_num
  251. this.userCount.today = res.data.todayCount
  252. this.userCount.total = res.data.totalCount
  253. this.prize.push({
  254. a: 1
  255. })
  256. this.$emit('lotteryShow', true)
  257. this.lotteryShow = true
  258. this.datatime = parseInt(res.data.cache_time);
  259. }).catch(err => {
  260. this.$emit('lotteryShow', false)
  261. this.lotteryShow = false
  262. })
  263. },
  264. closeLottery(status) {
  265. this.aleartStatus = false
  266. this.getLotteryData(this.type)
  267. if (this.alData.type === 6) {
  268. // this.addressModel = true
  269. postCartAdd({
  270. cartNum: 1,
  271. new: 1,
  272. is_new: 1,
  273. productId: this.alData.product_id,
  274. uniqueId: this.alData.unique,
  275. luckRecordId: this.alData.lottery_record_id,
  276. }).then(({ data }) => {
  277. uni.navigateTo({
  278. url: `/pages/goods/lottery/grids/order?luckRecordId=${this.alData.lottery_record_id}&cartId=${data.cartId}`
  279. });
  280. }).catch(err => {
  281. this.$util.Tips({
  282. title: `${err},请联系客服`
  283. });
  284. });
  285. }
  286. },
  287. getAddress(data) {
  288. let addData = data
  289. addData.id = this.alData.lottery_record_id
  290. addData.address = data.address.province + data.address.city + data.address.district + data.detail
  291. receiveLottery(addData).then(res => {
  292. this.$util.Tips({
  293. title: '领取成功'
  294. });
  295. this.addressModel = false
  296. }).catch(err => {
  297. this.$util.Tips({
  298. title: err
  299. });
  300. })
  301. },
  302. getWiningIndex(callback) {
  303. this.aleartType = 0
  304. startLottery({
  305. id: this.id
  306. }).then(res => {
  307. this.prize.forEach((item, index) => {
  308. if (res.data.id === item.id) {
  309. this.alData = res.data
  310. this.lottery_draw_param.winingIndex = index;
  311. callback(this.lottery_draw_param);
  312. }
  313. })
  314. }).catch(err => {
  315. this.$util.Tips({
  316. title: err
  317. });
  318. })
  319. // //props修改在小程序和APP端不成功,所以在这里使用回调函数传参,
  320. },
  321. // 抽奖完成
  322. luck_draw_finish(param) {
  323. this.aleartType = 2
  324. this.aleartStatus = true
  325. },
  326. }
  327. }
  328. </script>
  329. <style lang="scss" scoped>
  330. /deep/.timeItem .time .styleAll{
  331. padding: 0 4rpx;
  332. font-size: 26rpx;
  333. color: #fff;
  334. background-color: var(--view-theme);
  335. }
  336. /deep/.timeItem .time .red{
  337. color: var(--view-theme);
  338. }
  339. .termValidity{
  340. margin-top: 10rpx;
  341. }
  342. .header {
  343. color: #fff;
  344. background-color: var(--view-theme);
  345. display: flex;
  346. align-items: center;
  347. justify-content: center;
  348. flex-direction: column;
  349. padding: 80rpx 0;
  350. .pay-status {
  351. display: flex;
  352. align-items: center;
  353. .iconfont {
  354. font-size: 74rpx;
  355. background: rgba(#000, 0.08);
  356. border-radius: 50%;
  357. margin-right: 30rpx;
  358. padding: 9rpx;
  359. }
  360. .pay-status-r {
  361. display: flex;
  362. flex-direction: column;
  363. .pay-status-text {
  364. font-size: 38rpx;
  365. font-weight: bold;
  366. padding-bottom: 10rpx;
  367. }
  368. }
  369. }
  370. .grids /deep/ .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(9) {
  371. background: rgba(#fff, 0.2) !important;
  372. }
  373. .jump {
  374. display: flex;
  375. padding-top: 40rpx;
  376. .jump-det {
  377. background: #FFFFFF;
  378. opacity: 1;
  379. border-radius: 22px;
  380. color: var(--view-theme);
  381. padding: 10rpx 38rpx;
  382. margin-right: 30rpx;
  383. }
  384. .jump-index {
  385. border: 1px solid #FEFFFF;
  386. opacity: 1;
  387. padding: 10rpx 38rpx;
  388. border-radius: 22px;
  389. }
  390. }
  391. }
  392. .grids-top {
  393. display: flex;
  394. justify-content: center;
  395. padding: 30rpx 0 0 0;
  396. image {
  397. width: 40rpx;
  398. height: 40rpx;
  399. }
  400. .grids-title {
  401. display: flex;
  402. justify-content: center;
  403. font-size: 20px;
  404. color: var(--view-theme);
  405. z-index: 999;
  406. padding: 0 14rpx;
  407. font-weight: bold;
  408. .grids-frequency {}
  409. }
  410. }
  411. /deep/ .lottery_grid {
  412. background-color: var(--view-theme);
  413. border-radius: 12rpx;
  414. }
  415. .grids {
  416. width: 100%;
  417. // height: 800rpx;
  418. display: flex;
  419. flex-direction: column;
  420. justify-content: center;
  421. align-items: center;
  422. margin-top: 20rpx;
  423. position: relative;
  424. padding: 30rpx;
  425. .grids-bag {
  426. position: absolute;
  427. top: 0;
  428. left: 0;
  429. // #ifdef MP
  430. width: 710rpx;
  431. height: 718rpx;
  432. // #endif
  433. // #ifdef H5 || APP-PLUS
  434. width: 750rpx;
  435. height: 758rpx;
  436. // #endif
  437. padding: 20rpx;
  438. display: flex;
  439. justify-content: center;
  440. align-items: center;
  441. }
  442. .grids-box {
  443. width: 700rpx;
  444. height: 700rpx;
  445. // z-index: 10000;
  446. padding: 20rpx;
  447. background-color: #E74435;
  448. }
  449. .winning-tips-list {
  450. display: flex;
  451. align-items: center;
  452. justify-content: center;
  453. width: 50%;
  454. font-size: 20rpx;
  455. line-height: 40rpx;
  456. height: 40rpx;
  457. font-weight: 400;
  458. color: #FFF8F8;
  459. margin: 30rpx 0;
  460. z-index: 999;
  461. background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 51%, rgba(255, 255, 255, 0) 100%);
  462. .iconfont {
  463. font-size: 20rpx;
  464. margin-right: 10rpx;
  465. }
  466. }
  467. }
  468. .mask {
  469. position: fixed;
  470. top: 0;
  471. left: 0;
  472. right: 0;
  473. bottom: 0;
  474. background-color: rgba(0, 0, 0, 0.8);
  475. z-index: 9;
  476. }
  477. </style>