paySuccess.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619
  1. <template>
  2. <view class="container">
  3. <view class="bgc">
  4. <i class="iconfont icon-lujing success-icon" :style="{color:setColor}"></i>
  5. <view class="title">订单处理成功</view>
  6. <view class="desc">订单处理成功,预览获取更多优惠</view>
  7. <view class="btn-block">
  8. <view @click="lookOrder" class="btn" :style="{'background-color':setColor}">查看订单</view>
  9. </view>
  10. </view>
  11. <view class="swiper-content" v-if="banner.length>0">
  12. <swiper class="swiper" circular autoplay indicator-active-color="#fff"
  13. indicator-color="rgba(255,255,255,0.5)">
  14. <block v-for="(item,index) of banner" :key='index'>
  15. <swiper-item>
  16. <image @click="previewImage(item)" class="img" mode="aspectFit" :src="URL+item.thumb"></image>
  17. </swiper-item>
  18. </block>
  19. </swiper>
  20. </view>
  21. <view class="bgc" v-if="coupon_list.length>0">
  22. <view class="more-coupon-title">
  23. <image class="more-coupon" src="../../static/more-coupon.png"></image>
  24. </view>
  25. <view class="coupon_bg">
  26. <view v-for=" (item,index) in coupon_list" :key="index" class="Coupon">
  27. <view class="CouponListBg">
  28. <image src="../../static/coupon_bg_1.png" class="CouponListimg"></image>
  29. </view>
  30. <view class="CouponList flex" :data-id="item.id">
  31. <view class="CouponL flex-center">
  32. <view>
  33. <view class="CouponLmoney">
  34. <view>
  35. {{Number(item.reduce)}} <text class="ft24">元</text>
  36. </view>
  37. </view>
  38. <view class="CouponLmoneys ft24">
  39. 满{{ Number(item.full)}}可用
  40. </view>
  41. </view>
  42. </view>
  43. <view class="CouponContent flex-col box-pack-between">
  44. <view class="ft28 box-pack-between">
  45. <view class="text-2">
  46. {{item.name}}
  47. </view>
  48. <block v-if="item.state==1">
  49. <view class="getCoupon flex-center" @click="receive" :data-name="item.name" :data-index="index"
  50. :data-id="item.id">
  51. 领取
  52. </view>
  53. </block>
  54. <block v-if="item.state == 2">
  55. <view class="getCoupon flex-center" style="color:#999;border: 1rpx solid #ccc;">已领取
  56. </view>
  57. </block>
  58. </view>
  59. <view class="CouponContentLine">
  60. </view>
  61. <view class="CouponContentC ft24">
  62. <text>有效期:</text>
  63. <text>{{item.start_time}}-{{item.end_time}}</text>
  64. </view>
  65. </view>
  66. </view>
  67. </view>
  68. </view>
  69. </view>
  70. <!-- #ifdef MP-ALIPAY -->
  71. <!-- <subscribe-msg /> -->
  72. <!-- #endif -->
  73. <uni-popup ref="popup" type="center">
  74. <view class="get-phone-pop">
  75. <view class="content-block">
  76. <view class="content flex flex-y-center flex-x-center">提示</view>
  77. </view>
  78. <view class="flex-center content-tel">
  79. <text style="min-width: 130rpx;">积分领取成功</text>
  80. </view>
  81. <view @click="openUrl" class="btm-block flex flex-nowarp flex-x-between">
  82. <view form-type="submit" class="btn sub-btn">确定</view>
  83. </view>
  84. </view>
  85. </uni-popup>
  86. <model :obj="modelObj"></model>
  87. <Vphone :getPhonePop="getPhonePop" @close="setClose"></Vphone>
  88. </view>
  89. </template>
  90. <script>
  91. // import uniPopup from '@/components/uni-popup/uni-popup.vue'
  92. import Vphone from '@/components/v-phone/v-phone.vue';
  93. // #ifdef MP-ALIPAY
  94. // const {
  95. // requestSubscribeMessage
  96. // } = requirePlugin('subscribeMsg');
  97. // #endif
  98. import {
  99. mapState,
  100. mapMutations,
  101. mapGetters
  102. } from 'vuex'
  103. export default {
  104. components: {
  105. // uniPopup,
  106. Vphone
  107. },
  108. computed: {
  109. ...mapState(['store_id', 'userInfo', 'swiperList']),
  110. },
  111. data() {
  112. return {
  113. URL: getApp().globalData.URL,
  114. banner: [],
  115. coupon_list: [],
  116. setColor: "",
  117. systemInfo: {},
  118. order_id: '',
  119. getPhonePop: false,
  120. modelObj: null
  121. }
  122. },
  123. onLoad(e) {
  124. uni.setNavigationBarColor({
  125. frontColor: '#ffffff',
  126. backgroundColor: this.$store.state.color,
  127. })
  128. this.order_id = e.order_id || '';
  129. this.setColor = this.$store.state.color;
  130. this.systemInfo = uni.getStorageSync('systemInfo');
  131. this.banner_list();
  132. this.http();
  133. if (this.systemInfo.set.is_jf == 3 && e.order_id && this.systemInfo.set.integral) {
  134. uni.showModal({
  135. title: '提示',
  136. content: '积分领提醒',
  137. showCancel: true,
  138. cancelText: '取消',
  139. confirmText: '领取',
  140. success: res => {
  141. if (res.confirm) {
  142. this.jiFenS()
  143. }
  144. }
  145. });
  146. }
  147. },
  148. methods: {
  149. jiFenS() {
  150. this.$http.request('xcx/ManualAddIntegral', {
  151. order_id: this.order_id,
  152. }).then(res => {
  153. let obj = this.systemInfo.set,
  154. url, app_id, app_url, is_ambient;
  155. // #ifdef MP-WEIXIN
  156. url = obj.wx_url;
  157. app_id = obj.wx_app_id;
  158. app_url = obj.wx_app_url;
  159. is_ambient = obj.wx;
  160. // #endif
  161. // #ifdef MP-ALIPAY
  162. url = obj.zfb_url;
  163. app_id = obj.zfb_app_id;
  164. app_url = obj.zfb_app_url;
  165. is_ambient = obj.zfb;
  166. // #endif
  167. if (is_ambient == 1) {
  168. uni.showToast({
  169. title: '积分领取成功',
  170. icon: 'none',
  171. duration: 2000
  172. })
  173. setTimeout(() => {
  174. if (url == '/pages/index/index' || url == '/pages/home/home' || url ==
  175. '/pages/order/order' ||
  176. url == '/pages/my/my') {
  177. uni.switchTab({
  178. url: url,
  179. })
  180. } else {
  181. uni.redirectTo({
  182. url: url,
  183. })
  184. }
  185. }, 3000)
  186. }
  187. if (is_ambient == 2) {
  188. this.$refs.popup.open();
  189. }
  190. })
  191. },
  192. openUrl() {
  193. let obj = this.systemInfo.set,
  194. url, app_id, app_url, is_ambient;
  195. // #ifdef MP-WEIXIN
  196. url = obj.wx_url;
  197. app_id = obj.wx_app_id;
  198. app_url = obj.wx_app_url;
  199. is_ambient = obj.wx;
  200. // #endif
  201. // #ifdef MP-ALIPAY
  202. url = obj.zfb_url;
  203. app_id = obj.zfb_app_id;
  204. app_url = obj.zfb_app_url;
  205. is_ambient = obj.zfb;
  206. // #endif
  207. this.$refs.popup.close();
  208. if (is_ambient == 1) {
  209. if (url == '/pages/index/index' || url == '/pages/home/home' || url == '/pages/order/order' ||
  210. url == '/pages/my/my') {
  211. uni.switchTab({
  212. url: url,
  213. })
  214. } else {
  215. uni.redirectTo({
  216. url: url,
  217. })
  218. }
  219. }
  220. // console.log(is_ambient, obj.appId, app_url, "app_url")
  221. if (is_ambient == 2) {
  222. uni.navigateToMiniProgram({
  223. appId: app_id,
  224. path: app_url,
  225. success: (res) => {
  226. // this.$refs.popup.close();
  227. }
  228. })
  229. }
  230. },
  231. lookOrder(e) {
  232. this.$store.commit("SET_TABACTIVE", 1)
  233. uni.navigateTo({
  234. url: '/pages/myOrderList/myOrderList'
  235. })
  236. },
  237. // 开启会员弹窗
  238. onGetphone(e) {
  239. this.getPhonePop = true;
  240. },
  241. // 子组件传参
  242. setClose(e) {
  243. this.getPhonePop = e;
  244. },
  245. // 跳转小程序、内页面
  246. previewImage(info) {
  247. // console.log(info)
  248. if (info.type == 1 && info.appid) {
  249. uni.navigateToMiniProgram({
  250. appId: info.appid,
  251. success(res) {
  252. // 打开成功
  253. }
  254. })
  255. }
  256. else if (info.type == 2) {
  257. if (info.appid) {
  258. if ("/pages/index/index" == info.appid || "/pages/my/my" == info.appid ) {
  259. uni.switchTab({
  260. url: info.appid,
  261. })
  262. } else {
  263. uni.navigateTo({
  264. url: info.appid,
  265. })
  266. }
  267. } else {
  268. let url = this.URL + info.thumb;
  269. uni.previewImage({
  270. urls: [url],
  271. });
  272. }
  273. }else if (info.type == 3) {
  274. if (!this.userInfo.mobile) {
  275. // #ifdef MP-WEIXIN
  276. this.modelObj = {
  277. content: "完善资料才能享有领取权利,是否完善?",
  278. };
  279. this.$store.commit('showAttrPicker', true)
  280. // #endif
  281. // #ifdef MP-ALIPAY
  282. this.getPhonePop = true;
  283. // #endif
  284. return
  285. } else {
  286. uni.showToast({
  287. title: '您已经完善过会员信息了,无需重复操作!',
  288. icon: 'none'
  289. })
  290. }
  291. }else if(info.type == 4){
  292. uni.navigateTo({
  293. url:`/shop/richText/index?id=${info.is_article}`
  294. })
  295. }
  296. },
  297. banner_list() {
  298. this.$http.request('xcx/banner_list', {
  299. store_id: uni.getStorageSync('store_id'),
  300. type_id: 1,
  301. }).then(res => {
  302. console.log(res, "LqCoupons_lists")
  303. this.banner = res.data;
  304. })
  305. },
  306. http() {
  307. this.$http.request('xcx/pay_coupons', {
  308. user_id: uni.getStorageSync('user_id'),
  309. store_id: uni.getStorageSync('store_id'),
  310. }).then(res => {
  311. console.log(res, "LqCoupons_lists")
  312. for (let s of res.data) {
  313. s.checked = false;
  314. s.state = 1;
  315. };
  316. this.coupon_list = res.data;
  317. })
  318. },
  319. receive: function(t) {
  320. let subscribe = uni.getStorageSync('balance_subscribe');
  321. var that = this,name = t.target.dataset.name,
  322. id = t.target.dataset.id,
  323. index = t.target.dataset.index;
  324. // 调用方法,唤起订阅组件
  325. // #ifdef MP-ALIPAY
  326. my.requestSubscribeMessage({
  327. thirdTypeAppId: that.systemInfo.alipay_appid, // 可选,isv接入场景下必填
  328. entityIds: [subscribe.alipay_coupons], // 模板id列表,最多3个
  329. // 接收结果的回调方法
  330. complete: (res) => {
  331. console.log('订阅回调', r);
  332. that.$http.request('xcx/LqCoupons', {
  333. user_id: uni.getStorageSync('user_id'),
  334. store_id: uni.getStorageSync('store_id'),
  335. coupon_id: id,
  336. }, "", "", true).then(res => {
  337. that.coupon_list[index].state = 2;
  338. uni.showToast({
  339. title: '领取成功',
  340. icon: 'none'
  341. })
  342. })
  343. },
  344. });
  345. // #endif
  346. // #ifdef MP-WEIXIN
  347. uni.requestSubscribeMessage({
  348. tmplIds: [subscribe.card_tid],
  349. success: (r) => {
  350. that.CardMsgSubscribe(name);
  351. },
  352. complete: (r) => {
  353. that.$http.request('xcx/LqCoupons', {
  354. user_id: uni.getStorageSync('user_id'),
  355. store_id: uni.getStorageSync('store_id'),
  356. coupon_id: id,
  357. }, "", "", true).then(res => {
  358. that.coupon_list[index].state = 2;
  359. uni.showToast({
  360. title: '领取成功',
  361. icon: 'none'
  362. })
  363. })
  364. }
  365. })
  366. // #endif
  367. },
  368. CardMsgSubscribe(name){
  369. let that=this;
  370. that.$http.request('xcx/LqCoupons', {
  371. user_id: uni.getStorageSync('user_id'),
  372. store_id: uni.getStorageSync('store_id'),
  373. name: name,
  374. }, "", "", true).then(res => {
  375. })
  376. },
  377. }
  378. }
  379. </script>
  380. <style lang="scss">
  381. page {
  382. background: #F1F1F1;
  383. }
  384. .bgc {
  385. background: #FFFFFF;
  386. }
  387. .getCoupon {
  388. width: 100rpx;
  389. height: 45rpx;
  390. border-radius: 50px;
  391. border: 1rpx solid #FE821E;
  392. text-align: center;
  393. color: #FE821E;
  394. min-width: 115rpx;
  395. }
  396. .swiper-content {
  397. // padding: 0 30rpx;
  398. margin: 20rpx 0;
  399. }
  400. .swiper {
  401. width: 100%;
  402. height: 400rpx;
  403. margin: 0 auto;
  404. // border-radius: 10rpx;
  405. overflow: hidden;
  406. .img {
  407. display: block;
  408. width: 100%;
  409. height: 100%;
  410. }
  411. }
  412. .container {
  413. overflow: hidden;
  414. }
  415. .more-coupon-title {
  416. text-align: center;
  417. padding: 40rpx 0;
  418. }
  419. .more-coupon {
  420. width: 280rpx;
  421. height: 50rpx;
  422. }
  423. // .coupon_bg {
  424. // background: #F1F1F1;
  425. // }
  426. .success-icon {
  427. display: block;
  428. font-size: 100rpx;
  429. color: $theme-color;
  430. text-align: center;
  431. padding-top: 20rpx;
  432. }
  433. .title {
  434. font-size: 40rpx;
  435. font-weight: bold;
  436. text-align: center;
  437. margin-top: 40rpx;
  438. color: #555;
  439. }
  440. .desc {
  441. font-size: 32rpx;
  442. line-height: 50rpx;
  443. text-align: center;
  444. color: #666;
  445. }
  446. .btn-block {
  447. display: flex;
  448. flex-flow: row nowrap;
  449. justify-content: center;
  450. align-items: center;
  451. height: 150rpx;
  452. }
  453. .btn-block .btn {
  454. width: 260rpx;
  455. height: 80rpx;
  456. border-radius: 40rpx;
  457. text-align: center;
  458. line-height: 80rpx;
  459. font-size: 28rpx;
  460. background-color: $theme-color;
  461. color: #fff;
  462. }
  463. .ft24 {
  464. font-size: 24rpx;
  465. }
  466. .ft28 {
  467. font-size: 28rpx;
  468. }
  469. // page {
  470. // background: #F4F5F7;
  471. .container {
  472. .Coupon {
  473. position: relative;
  474. margin-top: 30rpx;
  475. color: #FFFFFF;
  476. }
  477. .CouponListBg {
  478. width: 100%;
  479. position: absolute;
  480. top: 0;
  481. left: 0;
  482. text-align: center;
  483. image {
  484. width: 690rpx;
  485. height: 180rpx;
  486. opacity: 1;
  487. margin: 0 auto;
  488. }
  489. }
  490. .CouponList {
  491. position: relative;
  492. width: 690rpx;
  493. height: 180rpx;
  494. margin: 0 auto;
  495. border-radius: 8rpx;
  496. box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(198, 198, 198, 0.5);
  497. border: 1rpx solid #f1f1f1;
  498. .CouponL {
  499. width: 202rpx;
  500. height: 100%;
  501. min-width: 202rpx;
  502. margin-right: 20rpx;
  503. .CouponLmoney {
  504. text-align: center;
  505. font-size: 58rpx;
  506. font-family: DIN, DIN-Medium;
  507. font-weight: 500;
  508. }
  509. }
  510. .CouponContent {
  511. color: #000000;
  512. padding: 33rpx 15rpx 20rpx 0;
  513. .CouponContentLine {
  514. width: 430rpx;
  515. height: 1rpx;
  516. opacity: 0.1;
  517. border: 1rpx dashed #000000;
  518. }
  519. .CouponContentC {
  520. color: #999999;
  521. }
  522. }
  523. }
  524. }
  525. .get-phone-pop {
  526. /* 成为会员 */
  527. width: 550rpx;
  528. background-color: #fff;
  529. border-radius: 14rpx;
  530. overflow: hidden;
  531. }
  532. .code-btn {
  533. flex: none;
  534. width: 170rpx;
  535. height: 60rpx;
  536. border-radius: 30rpx;
  537. background-color: #3387FF;
  538. text-align: center;
  539. line-height: 60rpx;
  540. color: #fff;
  541. font-size: 24rpx;
  542. }
  543. .get-phone-pop .content {
  544. // height: 180rpx;
  545. text-align: center;
  546. font-size: 35rpx;
  547. color: #000;
  548. // line-height: 60rpx;
  549. padding: 30rpx 0;
  550. padding-bottom: 0;
  551. }
  552. .content-tel {
  553. text-align: center;
  554. padding: 30rpx 0;
  555. }
  556. .get-phone-pop .btm-block {
  557. width: 100%;
  558. height: 100rpx;
  559. border-top: 1rpx solid #eef0ef;
  560. font-size: 28rpx;
  561. }
  562. .get-phone-pop .btm-block .btn {
  563. height: 100rpx;
  564. box-sizing: border-box;
  565. text-align: center;
  566. line-height: 100rpx;
  567. color: #010101;
  568. font-weight: bold;
  569. padding: 0;
  570. margin: 0;
  571. border: none;
  572. border-radius: 0;
  573. background-color: #fff;
  574. // font-size: 35rpx;
  575. margin: 0 auto;
  576. }
  577. // }
  578. </style>