Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
金诚优选前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 Commits
1 Branch
0 Tags
5.0 MiB
Tree: 0075171313
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '0075171313'
${ noResults }
ec.uniapp-master/pages/coupon/index/index1.vue

445 lines
17 KiB
Raw Normal View History

文章详情 优惠券首页 商品详情 海报生成 购物车
4 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <template>
  2. <view id="coupon-index">
  4. <view class="navbar mx-1px-top">
  5. <block v-for="(item, index) in tabList" :key="index">
  6. <view :id="index" class="navbar-item activity" :hidden="activeIndex != index"
  7. :style="'color: ' + config.mainColor" @tap="tabClick">
  8. <view class="navbar-title">{{item.title}}</view>
  9. </view>
  11. <view :id="index" :hidden="activeIndex == index" class="navbar-item" @tap="tabClick">
  12. <view class="navbar-title">{{item.title}}</view>
  13. </view>
  14. </block>
  16. <view class="navbar-slider"
  17. :style="'width: ' + width + 'px; transform: translateX(' + sliderOffset + 'px); -webkit-transform: translateX(' + sliderOffset + 'px); background: ' + config.mainColor"></view>
  18. </view>
  20. <view class="tab-panel">
  21. <view class="tab-content" :hidden="activeIndex != 0">
  23. <view class="no-list" v-if="(!dataList[0].length || !dataList[0][0].length) && tabList[0].init">
  24. <i class="iconfont icon-youhuiquan"></i>
  25. <view>报告主人，您暂无
  26. <span v-if="is_coupon == 1">优惠券~</span>
  27. <span v-else>促销活动</span>
  28. </view>
  29. </view>
  31. <view v-for="(items, idx) in dataList[0]" :key="idx">
  32. <view class="coupon" :data-id="item.discount.id" @tap="jumpDetailOn"
  33. v-for="(item, index) in dataList[0][idx]" :key="index">
  34. <view class="coupon-left" :class="is_coupon != 1 ? 'discount' : ''"
  35. :style="'background: ' + config.mainColor">
  36. <view class="text-wrap">
  37. <view class="text-box">
  38. <view class="text">
  39. <text class="money" v-if="item.discount.action_type.type == 'cash'">￥</text>
  40. <span>{{ item.discount.action_type.value }}</span>
  42. <text class="money" v-if="item.discount.action_type.type == 'discount'">折</text>
  43. </view>
  44. <text class="label text">{{ item.discount.label }}</text>
  45. </view>
  47. </view>
  48. <view class="dot-wrap">
  49. <view class="dot-item">
  51. </view>
  52. <view class="dot-item">
  54. </view>
  55. <view class="dot-item">
  57. </view>
  58. <view class="dot-item">
  60. </view>
  61. <view class="dot-item">
  63. </view>
  64. <view class="dot-item">
  66. </view>
  67. </view>
  68. </view>
  70. <view class="coupon-right">
  71. <view class="top">
  72. <span class="type">
  73. <span v-if="item.discount.channel == 'ec'">商城</span>
  74. <span v-else>门店</span>
  75. </span>
  76. <text class="info">{{item.discount.title}}</text>
  77. </view>
  79. <view class="bottom">
  80. <view class="bottom-use">
  81. <view class="tiem-box">
  82. <text>{{item.discount.use_start_time}}至{{item.discount.use_end_time}}</text>
  83. </view>
  84. <view v-if="is_coupon == 1">
  86. <!--<view class="btn use" data-code="item.discount.code" data-index="idx"-->
  87. <!--data-findex="index" v-if="!item.discount.has_get" @tap.stop="getCoupon">-->
  88. <!--点击领取-->
  89. <!--</view>-->
  90. <!---->
  91. <view class="btn already"
  92. :style="'color: ' + config.mainColor + '; border-color: ' + config.mainColor"
  93. :data-id="item.id" @tap.stop="jumpList">
  94. 去使用
  95. </view>
  96. </view>
  99. </view>
  100. </view>
  101. </view>
  105. </view>
  106. </view>
  107. </view>
  108. <view class="tab-content" :hidden="activeIndex != 1">
  109. <view class="no-list" v-if="(!dataList[1].length || !dataList[1][0].length) && tabList[1].init">
  110. <i class="iconfont icon-youhuiquan"></i>
  111. <view>报告主人，您暂无
  112. <span v-if="is_coupon == 1">优惠券~</span>
  113. <span v-else>促销活动</span>
  114. </view>
  115. </view>
  116. <view v-for="(items, idx) in dataList[1]" :key="idx">
  117. <view class="coupon" :data-id="item.discount.id" :data-coupon="item.id" @tap="jumpDetail"
  118. v-for="(item, index) in dataList[1][idx]" :key="index">
  119. <view class="coupon-left" :class="is_coupon != 1 ? 'discount' : ''"
  120. :style="'background: ' + config.mainColor">
  121. <view class="text-wrap">
  122. <view class="text-box">
  123. <view class="text">
  124. <text class="money" v-if="item.discount.action_type.type == 'cash'">￥</text>
  125. <span>{{ item.discount.action_type.value }}</span>
  127. <text class="money" v-if="item.discount.action_type.type == 'discount'">折</text>
  128. </view>
  129. <text class="label text">{{ item.discount.label }}</text>
  130. </view>
  132. </view>
  133. <view class="dot-wrap">
  134. <view class="dot-item">
  136. </view>
  137. <view class="dot-item">
  139. </view>
  140. <view class="dot-item">
  142. </view>
  143. <view class="dot-item">
  145. </view>
  146. <view class="dot-item">
  148. </view>
  149. <view class="dot-item">
  151. </view>
  152. </view>
  153. </view>
  154. <view class="coupon-right">
  155. <view class="top">
  156. <span class="type">
  157. <span v-if="item.discount.channel == 'ec'">商城</span>
  158. <span v-else>门店</span>
  159. </span>
  160. <text class="info">{{item.discount.title}}</text>
  161. </view>
  162. <view class="bottom">
  163. <view class="bottom-use">
  164. <view class="tiem-box">
  165. <text>{{item.discount.use_start_time}}至{{item.discount.use_end_time}}</text>
  166. </view>
  167. <view v-if="is_coupon == 1">
  168. <!--<view class="btn use" :data-code="item.discount.code"
  169. :data-index="idx" :data-findex="index"
  170. v-if="!item.discount.has_get" @tap.stop="getCoupon">
  171. 点击领取
  172. </view>-->
  173. <view class="btn already"
  174. :style="'color: ' + config.mainColor + '; border-color: ' + config.mainColor"
  175. :data-id="item.discount.id" :data-coupon="item.id" @tap.stop="jumpDetail">
  176. 去使用
  177. </view>
  178. </view>
  180. </view>
  181. </view>
  182. </view>
  183. </view>
  184. </view>
  185. </view>
  186. </view>
  187. <view class="see-over" @tap="toast">
  188. 查看已失效优惠券
  189. </view>
  190. </view>
  192. </template>
  193. <script>
  194. import {pageLogin, getUrl, config} from '@/common/js/utils.js';
  196. export default {
  197. data() {
  198. return {
  199. activeIndex: 0,
  200. sliderOffset: 0,
  201. width: 0,
  202. tabList: [{
  203. title: '线上',
  204. init: false,
  205. page: 0,
  206. more: true
  207. }, {
  208. title: '线下',
  209. init: false,
  210. page: 0,
  211. more: true
  212. }],
  213. dataList: {
  214. 0: [],
  215. 1: []
  216. },
  217. is_coupon: 1,
  218. // 用于判断是否为优惠券 1：优惠券 0：促销折扣
  219. gbConfig: '',
  220. };
  221. },
  223. onReachBottom(e) {
  224. var status = this.activeIndex;
  225. var page = this.tabList[status].page + 1;
  226. var tabList = `tabList[${status}]`;
  228. if (this.tabList[status].more) {
  229. this.queryCouponList(status, page);
  230. } else {
  231. wx.showToast({
  232. image: '../../../static/error.png',
  233. title: '再拉也没有啦'
  234. });
  235. }
  236. },
  238. onShow(e) {
  239. wx.getSystemInfo({
  240. success: res => {
  241. this.setData({
  242. width: res.windowWidth / this.tabList.length,
  243. sliderOffset: res.windowWidth / this.tabList.length * this.activeIndex
  244. });
  245. }
  246. });
  247. },
  249. onLoad(e) {
  250. // 第三方平台配置颜色
  251. var gbConfig = this.$cookieStorage.get('globalConfig') || '';
  252. // this.setData({
  253. // config: gbConfig
  254. // });
  255. //
  256. this.config = gbConfig;
  258. if (e.type) {
  259. this.setData({
  260. activeIndex: e.type
  261. });
  262. }
  264. ;
  265. this.queryCouponList();
  266. },
  268. components: {},
  269. props: {},
  270. methods: {
  271. tabClick(e) {
  272. var status = e.currentTarget.id;
  273. this.setData({
  274. sliderOffset: e.currentTarget.offsetLeft,
  275. activeIndex: status
  276. });
  278. if (!this.tabList[status].init) {
  279. this.queryCouponList(status);
  280. }
  281. },
  283. jumpOff() {
  284. wx.navigateTo({
  285. url: '/pages/coupon/over/over'
  286. });
  287. },
  289. jumpDetailOn(e) {
  290. var id = e.currentTarget.dataset.id;
  291. wx.navigateTo({
  292. url: '/pages/coupon/onDetail/onDetail?id=' + id + '&is_coupon=' + this.is_coupon
  293. });
  294. },
  296. jumpDetail(e) {
  297. var id = e.currentTarget.dataset.id;
  298. var coupon_id = e.currentTarget.dataset.coupon;
  299. wx.navigateTo({
  300. url: '/pages/coupon/offDetail/offDetail?id=' + id + '&is_coupon=' + this.is_coupon + '&coupon_id=' + coupon_id
  301. });
  302. },
  304. jumpList(e) {
  305. var id = e.currentTarget.dataset.id;
  306. wx.navigateTo({
  307. url: '/pages/coupon/goods/goods?id=' + id
  308. });
  309. },
  311. convert() {
  312. var code = this.code;
  314. if (code == '') {
  315. wx.showModal({
  316. title: '',
  317. content: "请输入兑换码",
  318. showCancel: false
  319. });
  320. } else {
  321. this.convertCoupon(code);
  322. }
  323. },
  325. input(e) {
  326. var vlaue = e.detail.value;
  327. this.setData({
  328. code: vlaue
  329. });
  330. },
  332. viewDetail(e) {
  333. var type = e.currentTarget.dataset.info.discount.type;
  334. var id = e.currentTarget.dataset.info.id;
  336. if (type == 0) {
  337. wx.navigateTo({
  338. url: '/pages/coupon/onDetail/onDetail?id=' + id
  339. });
  340. } else {
  341. wx.navigateTo({
  342. url: '/pages/coupon/offDetail/offDetail?id=' + id
  343. });
  344. }
  345. },
  347. // 查询优惠券列表
  348. queryCouponList(type = 0, page = 1) {
  349. wx.showLoading({
  350. title: "加载中",
  351. mask: true
  352. });
  353. var token = this.$cookieStorage.get('user_token') || '';
  354. this.$http.get({
  355. api: 'api/coupon',
  356. header: {
  357. Authorization: token
  358. },
  359. data: {
  360. page,
  361. channel: type ? 'shop' : 'ec',
  362. is_active: 1
  363. }
  364. }).then(res => {
  365. if (res.statusCode == 200) {
  366. res = res.data;
  368. if (res.status) {
  369. var pages = res.meta.pagination;
  370. var current_page = pages.current_page;
  371. var total_pages = pages.total_pages;
  374. // var tabList = `tabList[${type}]`;
  375. // this.setData({
  376. // [`dataList.${type}[${page - 1}]`]: res.data,
  377. // [`${tabList}.init`]: true,
  378. // [`${tabList}.page`]: current_page,
  379. // [`${tabList}.more`]: current_page < total_pages
  380. // });
  382. this.dataList[type][page - 1] = res.data;
  383. this.tabList[type].init = true;
  384. this.tabList[type].page = current_page;
  385. this.tabList[type].more = current_page < total_pages;
  388. } else {
  389. wx.showModal({
  390. content: res.message || '请求失败',
  391. showCancel: false
  392. });
  393. }
  394. } else {
  395. wx.showModal({
  396. content: res.message || '请求失败',
  397. showCancel: false
  398. });
  399. }
  401. wx.hideLoading();
  402. }).catch(rej => {
  403. wx.hideLoading();
  404. wx.showModal({
  405. content: res.message || '请求失败',
  406. showCancel: false
  407. });
  408. });
  409. },
  411. toast() {
  412. wx.navigateTo({
  413. url: '/pages/coupon/over/over'
  414. });
  415. },
  417. setData: function (obj) {
  418. let that = this;
  419. let keys = [];
  420. let val, data;
  421. Object.keys(obj).forEach(function (key) {
  422. keys = key.split('.');
  423. val = obj[key];
  424. data = that.$data;
  425. keys.forEach(function (key2, index) {
  426. if (index + 1 == keys.length) {
  427. that.$set(data, key2, val);
  428. } else {
  429. if (!data[key2]) {
  430. that.$set(data, key2, {});
  431. }
  432. }
  434. data = data[key2];
  435. });
  436. });
  437. }
  438. },
  439. computed: {},
  440. watch: {}
  441. };
  442. </script>
  443. <style rel="stylesheet/less" lang="less">
  444. @import "index";
  445. </style>