CouponDetails.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
  1. <template>
  2. <view class="page-home">
  3. <view class="page-home-bg">
  4. <image class="page-home-bg-img" src="./static/images/coupun-bg.png"></image>
  5. </view>
  6. <!-- 优惠券详情 -->
  7. <view style="height: 100rpx;"></view>
  8. <view class="get_bg">
  9. <image src="./static/images/getbg.png" mode=""></image>
  10. <view class="get_bg_content">
  11. <view class="flex-center get_bg_content_title">
  12. <view class="">
  13. <view class="ft48 get_bg_cut_price"> <text style="font-size: 30rpx;">¥</text>
  14. {{CouponLists.cut_price}}<text class="ft26">元</text>
  15. </view>
  16. <view class="get_bg_title text-2" style="padding: 0 30rpx;">{{CouponLists.title}}</view>
  17. <view class="get_bg_full_price">满{{CouponLists.full_price}}可用</view>
  18. </view>
  19. </view>
  20. <view style="margin-top: 40rpx;">
  21. <view class="DEtilename flex-y-center">
  22. <view class="DEtilenameL">优惠券标题:</view>
  23. <view class="DEtilenameR ">{{CouponLists.title}}</view>
  24. </view>
  25. <view class="DEtilename flex-y-center">
  26. <view class="DEtilenameL">剩余数量:</view>
  27. <view class="DEtilenameR">{{CouponLists.num}}</view>
  28. </view>
  29. <view class="DEtilename flex-y-center">
  30. <view class="DEtilenameL">已领取数量:</view>
  31. <view class="DEtilenameR">{{CouponLists.use_times}}</view>
  32. </view>
  33. <view class="DEtilename flex-y-center">
  34. <view class="DEtilenameL">可用时间:</view>
  35. <view class="DEtilenameR">{{CouponLists.start_time}}</view>
  36. </view>
  37. <view class="DEtilename flex-y-center">
  38. <view class="DEtilenameL">截止时间:</view>
  39. <view class="DEtilenameR">{{CouponLists.end_time}}</view>
  40. </view>
  41. </view>
  42. <!-- <view class="bottomButton flex-between">
  43. <view class="buttonL" @click="deletes">删除</view>
  44. <view class="buttons" style="background: #3387ff;" @click="amend">修改</view>
  45. </view> -->
  46. <!-- 领取优惠券 -->
  47. <view class="getcoupon" v-if="CouponLists.is_show == 1 && CouponLists.is_edit !=1" @click="getcoupon">
  48. 领取优惠券
  49. </view>
  50. <!-- 领取优惠券 -->
  51. <view class="getcoupon" style="background: #CCCCCC;"
  52. v-if="CouponLists.is_show == 3&& CouponLists.is_edit !=1">
  53. 优惠券已过期
  54. </view>
  55. <view class="Isgetcoupon" style="background: #CCCCCC;"
  56. v-if="CouponLists.is_show == 2&& CouponLists.is_edit !=1">
  57. 已领取
  58. </view>
  59. <view class="bottomButton flex-between" v-if="CouponLists.is_edit ==1">
  60. <view class="buttonL" @click="deletes">删除</view>
  61. <view class="buttons" style="background: #ffa000;" @click="amend">修改</view>
  62. </view>
  63. </view>
  64. <view class="getcoupon-rule">
  65. <view class="getcoupon-rule-title flex-center">
  66. <view class="line">
  67. </view>
  68. <text style="margin: 0 20rpx;"></text> 领取规则
  69. <view class="line">
  70. </view>
  71. </view>
  72. <view class="getcoupon-rule-content">
  73. <view class="">
  74. 1.优惠劵只可在线下核销使用
  75. </view>
  76. <view class="">
  77. 2.优惠劵在指定的日期使用,过期无法使用
  78. </view>
  79. <view class="">
  80. 3.平台对发放的优惠劵享有最终解释权
  81. </view>
  82. <!-- #ifdef H5 -->
  83. <view class="" @click="Copy">
  84. 4.复制此链接可发送给用户领取优惠劵 <text style="color:rgb(255, 160, 0);margin-left: 10px;">复制</text>
  85. </view>
  86. <!-- #endif -->
  87. </view>
  88. </view>
  89. </view>
  90. </view>
  91. </template>
  92. <script>
  93. // #ifdef H5
  94. import getWXSign from "@/static/js/config.js";
  95. // #endif
  96. export default {
  97. data() {
  98. return {
  99. id: '', //跳转接受的id
  100. token: '',
  101. CouponLists: [],
  102. URL: getApp().globalData.URL,
  103. }
  104. },
  105. onLoad(option) {
  106. this.id = option.id;
  107. this.token = option.token; //读取缓存手机号码
  108. },
  109. onShow() {
  110. this.is_web();
  111. },
  112. onShareAppMessage(option) {
  113. },
  114. methods: {
  115. //请求详情
  116. Coupons() {
  117. let that = this;
  118. let token = that.token;
  119. let id = that.id;
  120. this.request({
  121. url: "coupon/detail",
  122. data: {
  123. token: token ? token : "",
  124. coupon_id: id
  125. },
  126. }).then(res => {
  127. if (res.code == "200") {
  128. this.CouponLists = res.data.detail
  129. }
  130. }).catch((res) => {
  131. uni.showToast({
  132. title: res.message,
  133. icon: 'none'
  134. })
  135. });
  136. },
  137. // 修改
  138. amend() {
  139. let id = this.id;
  140. uni.navigateTo({
  141. url: './addCoupons?id=' + id
  142. })
  143. },
  144. // 删除
  145. deletes() {
  146. let that = this;
  147. let token = that.token;
  148. let coupon_id = that.id;
  149. uni.showModal({
  150. title: '提示',
  151. content: '确定删除吗?',
  152. confirmColor: "#000000",
  153. success: (res) => {
  154. if (res.confirm) {
  155. this.request({
  156. url: "coupon/delete",
  157. data: {
  158. token: token,
  159. coupon_id: coupon_id,
  160. },
  161. }).then(res => {
  162. console.log(res, "res")
  163. if (res.code == "200") {
  164. uni.showToast({
  165. title: "删除成功",
  166. icon: 'none'
  167. })
  168. setTimeout(() => {
  169. uni.navigateBack({
  170. delta: 1
  171. })
  172. }, 2000)
  173. }
  174. }).catch((res) => {
  175. uni.showToast({
  176. title: res.message,
  177. icon: 'none'
  178. })
  179. });
  180. } else if (res.cancel) {
  181. console.log('用户点击取消');
  182. }
  183. }
  184. });
  185. },
  186. //领取优惠券
  187. getcoupon() {
  188. let id = this.id,
  189. that = this;
  190. let TikTok = uni.getStorageSync('userToken');
  191. console.log(TikTok)
  192. // 判断用户是否授权
  193. if (TikTok) {
  194. console.log('当前授权了')
  195. this.request({
  196. url: "Coupon/draw",
  197. data: {
  198. coupon_id: id,
  199. token: TikTok
  200. },
  201. // is_agent: 'member',
  202. }).then(res => {
  203. if (res.code == "200") {
  204. uni.showModal({
  205. title: '温馨提示',
  206. content: '优惠劵领取成功',
  207. showCancel: false,
  208. confirmColor: "#000000",
  209. confirmText: '确定',
  210. success: (res) => {
  211. if (res.confirm) {
  212. uni.reLaunch({
  213. url: "../discountCouponIndex/discountCouponIndex"
  214. })
  215. }
  216. },
  217. fail: () => {},
  218. complete: () => {}
  219. });
  220. }
  221. }).catch((res) => {
  222. uni.showToast({
  223. title: res.message,
  224. icon: 'none'
  225. })
  226. });
  227. } else {
  228. console.log('当前没有授权了')
  229. this.gzhurl();
  230. }
  231. },
  232. gzhurl(e) {
  233. this.request({
  234. url: "user/gzhurl",
  235. data: {
  236. type: 4,
  237. id: this.id,
  238. },
  239. }).then(res => {
  240. if (res.data.url) {
  241. window.location.href = res.data.url
  242. }
  243. }).catch((res) => {
  244. console.log("message", res)
  245. });
  246. },
  247. is_web() {
  248. this.Coupons();
  249. function GetRequest() {
  250. var url = location.search; //获取url中"?"符后的字串
  251. var theRequest = new Object();
  252. if (url.indexOf("?") != -1) {
  253. //判断是否有参数
  254. var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
  255. var strs = str.split("&");
  256. console.log(strs)
  257. for (var i = 0; i < strs.length; i++) {
  258. theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
  259. }
  260. }
  261. return theRequest;
  262. }
  263. console.log(GetRequest().code,GetRequest().id)
  264. if (GetRequest().code) {
  265. //发起网络请求
  266. this.request({
  267. url: "user/gzh_login",
  268. data: {
  269. code: GetRequest().code,
  270. type:3,
  271. },
  272. }).then(res => {
  273. console.log(res, "res")
  274. uni.setStorageSync("userToken", res.data.token);
  275. this.getcoupon();
  276. }).catch((res) => {
  277. console.log("message", res)
  278. if (res.message == "获取openid失败") {
  279. return
  280. }
  281. uni.showToast({
  282. title: res.message,
  283. icon: 'none'
  284. })
  285. });
  286. }
  287. // else{
  288. // this.Coupons();
  289. // }
  290. },
  291. Copy(e) {
  292. // alert("Copy_nav_ali")
  293. let id=this.id;
  294. let content = this.URL+`/forward/#/merchant/CouponDetails?id=${id}`;
  295. if (!document.queryCommandSupported('copy')) {
  296. // 不支持
  297. return false
  298. }
  299. let textarea = document.createElement("textarea")
  300. textarea.value = content
  301. textarea.readOnly = "readOnly"
  302. document.body.appendChild(textarea)
  303. textarea.select() // 选择对象
  304. textarea.setSelectionRange(0, content.length) //核心
  305. let result = document.execCommand("copy") // 执行浏览器复制命令
  306. uni.showToast({
  307. title: "复制成功",
  308. icon: 'none'
  309. })
  310. textarea.remove();
  311. return result
  312. },
  313. }
  314. }
  315. </script>
  316. <style>
  317. page {
  318. height: 800rpx;
  319. width: 100%;
  320. }
  321. .page-home {
  322. width: 100%;
  323. height: 100%;
  324. }
  325. .page-home-bg {
  326. width: 100%;
  327. height: 100%;
  328. position: absolute;
  329. top: 0;
  330. left: 0;
  331. }
  332. .page-home-bg-img {
  333. display: block;
  334. width: 100%;
  335. height: 100%;
  336. }
  337. .get_bg {
  338. width: 650rpx;
  339. height: 800rpx;
  340. margin: 0 auto;
  341. position: relative;
  342. }
  343. .get_bg image {
  344. height: 100%;
  345. width: 100%;
  346. position: absolute;
  347. top: 0;
  348. left: 0;
  349. }
  350. .get_bg_content {
  351. position: relative;
  352. width: 100%;
  353. height: 100%;
  354. text-align: center;
  355. }
  356. .get_bg_content_title {
  357. height: 270rpx;
  358. }
  359. .get_bg_cut_price {
  360. font-size: 60rpx;
  361. color: #ffa024;
  362. }
  363. .get_bg_title {
  364. font-size: 35rpx;
  365. color: #000000;
  366. margin: 15rpx 0;
  367. padding: 0 15rpx;
  368. }
  369. .get_bg_full_price {
  370. font-size: 26rpx;
  371. color: #999
  372. }
  373. .getcoupon {
  374. width: 500rpx;
  375. background: rgba(255, 190, 44);
  376. height: 98rpx;
  377. line-height: 98rpx;
  378. text-align: center;
  379. border-radius: 8rpx;
  380. font-size: 30rpx;
  381. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  382. font-weight: 500;
  383. color: #fff;
  384. margin: 0 auto;
  385. margin-top: 80rpx;
  386. position: relative;
  387. }
  388. .Isgetcoupon {
  389. width: 640rpx;
  390. background: #f0f0f0;
  391. height: 98rpx;
  392. line-height: 98rpx;
  393. text-align: center;
  394. background: #ccc;
  395. border: 2rpx solid #f0f0f0;
  396. border-radius: 8rpx;
  397. font-size: 30rpx;
  398. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  399. font-weight: 500;
  400. color: #f4f4f4;
  401. margin-top: 80rpx;
  402. }
  403. page {
  404. background: #F5F7FA;
  405. }
  406. .flex-between {
  407. display: flex;
  408. flex-flow: row nowrap;
  409. justify-content: space-between;
  410. align-items: center;
  411. }
  412. .flex-y-center {
  413. display: -webkit-box;
  414. display: -webkit-flex;
  415. display: flex;
  416. -webkit-box-align: center;
  417. -webkit-align-items: center;
  418. -ms-flex-align: center;
  419. -ms-grid-row-align: center;
  420. align-items: center;
  421. }
  422. .DEtile {
  423. background: #Fff;
  424. position: relative;
  425. margin-top: 20rpx;
  426. }
  427. .DEtilename {
  428. margin-top: 20rpx;
  429. }
  430. .DEtilenameL {
  431. padding: 0 40rpx;
  432. font-size: 28rpx;
  433. font-family: PingFang SC, PingFang SC-Regular;
  434. font-weight: 400;
  435. color: #666666;
  436. min-width: 250rpx;
  437. }
  438. .DEtilenameR {
  439. font-size: 28rpx;
  440. font-family: PingFang SC, PingFang SC-Regular;
  441. font-weight: 400;
  442. color: #333333;
  443. padding-right: 40rpx;
  444. width: 400rpx;
  445. display: -webkit-box;
  446. -webkit-box-orient: vertical;
  447. -webkit-line-clamp: 1;
  448. overflow: hidden;
  449. }
  450. .bottomButton {
  451. position: relative;
  452. left: 0;
  453. width: 100%;
  454. margin-top: 62rpx;
  455. padding: 0 60rpx;
  456. }
  457. .buttonL {
  458. width: 300rpx;
  459. height: 98rpx;
  460. line-height: 98rpx;
  461. text-align: center;
  462. background: #ffffff;
  463. border: 2rpx solid #ccc;
  464. border-radius: 8rpx;
  465. font-size: 32rpx;
  466. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  467. font-weight: 500;
  468. color: #707070;
  469. margin-right: 40rpx;
  470. }
  471. .buttons {
  472. width: 300rpx;
  473. height: 98rpx;
  474. line-height: 98rpx;
  475. text-align: center;
  476. /* background: linear-gradient(180deg, rgba(255, 190, 44), rgba(255, 190, 44)); */
  477. border-radius: 8rpx;
  478. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  479. font-size: 32rpx;
  480. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  481. font-weight: 500;
  482. color: #ffffff;
  483. margin-left: 40rpx;
  484. }
  485. .getcoupon-rule {
  486. font-size: 24rpx;
  487. text-align: left;
  488. color: #FFFFFF;
  489. }
  490. .getcoupon-rule-title {
  491. text-align: center;
  492. margin-top: 50rpx;
  493. margin-bottom: 20rpx;
  494. font-size: 28rpx;
  495. }
  496. .getcoupon-rule-content {
  497. width: 550rpx;
  498. margin: 0 auto;
  499. line-height: 45rpx;
  500. }
  501. .line {
  502. width: 50rpx;
  503. height: 2rpx;
  504. background: #FFFFFF;
  505. }
  506. </style>