equity.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. <template>
  2. <view class="page-equity">
  3. <view class="equity-header">
  4. <view class="header-caption">
  5. <block v-for="(item,index) in cateList">
  6. <view class="text" :class="index==cateIndex?'active':''" @click="onSetCate(index)">{{item.name}}</view>
  7. </block>
  8. </view>
  9. <view class="header-sub">
  10. <block v-for="(it,index) in statusList">
  11. <view class="text" :class="index==statusIndex?'active':''" @click="onSetStatus(index)">{{it.value}}</view>
  12. </block>
  13. </view>
  14. </view>
  15. <view class="ticket-list">
  16. <view class="list-item" >
  17. <block v-for="(it,index) in dataList" >
  18. <block v-if="queryForm.status==''">
  19. <view class="item" :class="'shadow'" >
  20. <view class="ticket-content" >
  21. <view class="content">
  22. <view class="ticket-img">
  23. <!-- 商品券 -->
  24. <image src="/static/images/cof_ico.png" v-if="it.ticket.type==1" class="img" mode="aspectFill"></image>
  25. <!-- 课程券 -->
  26. <image src="/static/images/fit_ico.png" v-if="it.ticket.type==2" class="img" mode="aspectFill"></image>
  27. <!-- 剧场活动,早鸟会员 -->
  28. <image src="/static/images/soci_ico.png" v-if="it.ticket.type==3||it.ticket.type==4" class="img" mode="aspectFill"></image>
  29. </view>
  30. <view class="ticket-info" @click="onViewTicketMore(it)">
  31. <view class="ticket-name">
  32. <block v-if="it.ticket.type==2 && it.ticket.limitCourse>0">{{it.ticket.course.name}}</block>
  33. <block v-else>{{it.ticket.name}}</block>
  34. </view>
  35. <block v-if="it.qty<=1 && it.list[0].fitnessReq">
  36. <view class="ticket-expire">预约课程:{{it.list[0].fitnessReq.course.name}}</view>
  37. <view class="ticket-expire">教练:{{it.list[0].fitnessReq.teacher.name}}</view>
  38. <view class="ticket-expire">预约时间:{{it.list[0].fitnessReq.startTime}}</view>
  39. </block>
  40. <block v-else>
  41. <view class="ticket-expire-rule">{{it.ticket.intro}}</view>
  42. <view class="ticket-expire">开始日期:{{it.list[0].startTime}}</view>
  43. <view class="ticket-expire">截止日期:{{it.list[0].endTime}}</view>
  44. </block>
  45. </view>
  46. <view class="ticket-status used">
  47. <view class="ticket-text" v-if="it.qty>1">
  48. {{it.qty}} 张
  49. </view>
  50. </view>
  51. <view class="ticket-status-st used" v-if="it.qty==1" >
  52. <view class="ticket-st" >
  53. {{it.list[0].status==5?"待使用":""}}
  54. {{it.list[0].status==6?"待核销":""}}
  55. {{it.list[0].status==7?"已核销":""}}
  56. {{it.list[0].status==8?"已取消":""}}
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <view class="ticket-splite">
  62. <view class="left"></view>
  63. <view class="mid"></view>
  64. <view class="right"></view>
  65. </view>
  66. <view class="ticket-other">
  67. <view class="other-txt">
  68. </view>
  69. </view>
  70. </view>
  71. </block>
  72. <block v-else>
  73. <view class="item" :class="'shadow'" >
  74. <view class="ticket-content" >
  75. <view class="content">
  76. <view class="ticket-img">
  77. <!-- 商品券 -->
  78. <image src="/static/images/cof_ico.png" v-if="it.ticket.type==1" class="img" mode="aspectFill"></image>
  79. <!-- 课程券 -->
  80. <image src="/static/images/fit_ico.png" v-if="it.ticket.type==2" class="img" mode="aspectFill"></image>
  81. <!-- 剧场活动,早鸟会员 -->
  82. <image src="/static/images/soci_ico.png" v-if="it.ticket.type==3||it.ticket.type==4" class="img" mode="aspectFill"></image>
  83. </view>
  84. <view class="ticket-info" @click="onViewTicketMore(it)">
  85. <view class="ticket-name">
  86. <block v-if="it.ticket.type==2 && it.ticket.limitCourse>0">{{it.ticket.course.name}}</block>
  87. <block v-else>{{it.ticket.name}}</block>
  88. </view>
  89. <view class="ticket-expire-rule">{{it.ticket.intro}}</view>
  90. <view class="ticket-expire">开始日期:{{it.userTicket.startTime}}</view>
  91. <view class="ticket-expire">截止日期:{{it.userTicket.endTime}}</view>
  92. </view>
  93. <view class="ticket-status-st used" >
  94. <view class="ticket-st" >
  95. {{it.userTicket.status==5?"待使用":""}}
  96. {{it.userTicket.status==6?"待核销":""}}
  97. {{it.userTicket.status==7?"已核销":""}}
  98. {{it.userTicket.status==8?"已取消":""}}
  99. </view>
  100. </view>
  101. </view>
  102. </view>
  103. <view class="ticket-splite">
  104. <view class="left"></view>
  105. <view class="mid"></view>
  106. <view class="right"></view>
  107. </view>
  108. <view class="ticket-other">
  109. <view class="other-txt">
  110. </view>
  111. </view>
  112. </view>
  113. </block>
  114. </block>
  115. </view>
  116. </view>
  117. <uni-popup ref="moreItemForm">
  118. <view class="more-ticket">
  119. <view class="more-ticket-title">优惠券查看</view>
  120. <view class="more-items" v-if="currentItem!=null">
  121. <block v-for="(it,index) in currentItem.list" >
  122. <view class="item shadow " >
  123. <view class="ticket-content" @click="onViewTicket(it.hxCode)">
  124. <view class="content">
  125. <view class="ticket-img">
  126. <!-- 商品券 -->
  127. <image src="/static/images/cof_ico.png" v-if="currentItem.ticket.type==1" class="img" mode="aspectFill"></image>
  128. <!-- 课程券 -->
  129. <image src="/static/images/fit_ico.png" v-if="currentItem.ticket.type==2" class="img" mode="aspectFill"></image>
  130. <!-- 剧场活动,早鸟会员 -->
  131. <image src="/static/images/soci_ico.png" v-if="currentItem.ticket.type==3||currentItem.ticket.type==4" class="img" mode="aspectFill"></image>
  132. </view>
  133. <view class="ticket-info">
  134. <view class="ticket-name">
  135. <block v-if="currentItem.ticket.type==2 && currentItem.ticket.limitCourse>0">{{currentItem.ticket.course.name}}</block>
  136. <block v-else>{{currentItem.ticket.name}}</block>
  137. </view>
  138. <block v-if="it.fitnessReq">
  139. <view class="ticket-expire">预约课程:{{it.fitnessReq.course.name}}</view>
  140. <view class="ticket-expire">教练:{{it.fitnessReq.teacher.name}}</view>
  141. <view class="ticket-expire">预约时间:{{it.fitnessReq.startTime}}</view> <view class="ticket-expire">截止时间:{{it.fitnessReq.endTime}}</view>
  142. </block>
  143. <block v-else>
  144. <view class="ticket-expire-rule">{{currentItem.ticket.intro}}</view><view class="ticket-expire">开始时间:{{currentItem.list[index].startTime}}</view>
  145. <view class="ticket-expire">截止时间:{{currentItem.list[index].endTime}}</view>
  146. </block>
  147. </view>
  148. <view class="ticket-status-st used" >
  149. <view class="ticket-st">
  150. {{it.status==5?"待使用":""}}
  151. {{it.status==6?"待核销":""}}
  152. {{it.status==7?"已核销":""}}
  153. {{it.status==8?"已取消":""}}
  154. </view>
  155. </view>
  156. </view>
  157. </view>
  158. <view class="ticket-splite">
  159. <view class="left"></view>
  160. <view class="mid"></view>
  161. <view class="right"></view>
  162. </view>
  163. <view class="ticket-other">
  164. <view class="other-txt">
  165. <!-- <view class="btn">
  166. <button @click="onViewTicket(it.hxCode)" v-if="it.type==2 || it.type==1 && it.status==6 " class="btn-user" >使用</button>
  167. </view> -->
  168. </view>
  169. </view>
  170. </view>
  171. </block>
  172. </view>
  173. </view>
  174. </uni-popup>
  175. <uni-popup ref="qrForm">
  176. <view class="qr-code" >
  177. <view class="qr-box">
  178. <view class="qrcode">
  179. <view v-for="(row, rowI) in modules" :key="rowI" style="display: flex;flex-direction: row;">
  180. <view v-for="(col, colI) in row" :key="colI">
  181. <view v-if="col.isBlack" style="width: 5px;height: 5px;background-color: black;">
  182. <!-- 黑色码点 -->
  183. </view>
  184. <view v-else style="width: 5px;height: 5px;background-color: white;">
  185. <!-- 白色码点 -->
  186. </view>
  187. </view>
  188. </view>
  189. </view>
  190. </view>
  191. <view class="qr-text">核销码:{{qrText}}</view>
  192. </view>
  193. </uni-popup>
  194. </view>
  195. </template>
  196. <script>
  197. import {
  198. mapState,
  199. mapMutations
  200. } from 'vuex'
  201. // import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
  202. import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
  203. export default {
  204. data() {
  205. return {
  206. it: {
  207. list: [
  208. { status: 5 },
  209. // 其他项
  210. ]
  211. },
  212. cateList:[
  213. {
  214. type:"",
  215. name:"全部"
  216. },
  217. {
  218. type:1,
  219. name:'咖啡屋',
  220. },
  221. {
  222. type:2,
  223. name:'健身房',
  224. },
  225. {
  226. type:3,
  227. name:'社区中心',
  228. }
  229. ],
  230. cateIndex:0,
  231. statusList:[
  232. {
  233. status:'',
  234. value:'全部',
  235. },
  236. {
  237. status:6,
  238. value:'待核销',
  239. },
  240. {
  241. status:7,
  242. value:'已核销',
  243. }
  244. ],
  245. statusIndex:0,
  246. queryForm:{
  247. page:0,
  248. pageSize:10,
  249. status:'',
  250. type:'',
  251. userId:0,
  252. },
  253. dataList:[],
  254. modules: [],
  255. currentItem:null,
  256. qrText:'二维码内容',
  257. };
  258. },
  259. onLoad(){
  260. let _this=this;
  261. _this.statusIndex=0;
  262. _this.cateIndex=0;
  263. _this.queryForm.status=_this.statusList[_this.statusIndex].status;
  264. _this.queryForm.type=_this.cateList[_this.cateIndex].type;
  265. _this.queryForm.userId=_this.userInfo.id;
  266. if(this.queryForm.status==''){
  267. this.onSearch();
  268. }else{
  269. this.onSearchStatus();
  270. }
  271. },
  272. onPullDownRefresh() {
  273. this.queryForm.page=0;
  274. uni.startPullDownRefresh();
  275. if(this.queryForm.status==''){
  276. this.onSearch();
  277. }else{
  278. this.onSearchStatus();
  279. }
  280. },
  281. onReachBottom() {
  282. if(this.queryForm.status==''){
  283. this.onSearch();
  284. }else{
  285. this.onSearchStatus();
  286. }
  287. },
  288. computed: {
  289. ...mapState(['userInfo']),
  290. },
  291. methods:{
  292. onViewTicketMore(item){
  293. this.currentItem=item;
  294. this.$refs.moreItemForm.open("bottom");
  295. },
  296. onViewTicket(e){
  297. let _this=this;
  298. _this.qrText=e;
  299. // 获取uQRCode实例
  300. const qr = new UQRCode();
  301. qr.data = _this.qrText+"&T";
  302. qr.make();
  303. _this.modules = qr.modules;
  304. _this.$refs.qrForm.open("center");
  305. },
  306. onSetCate(e){
  307. let _this=this;
  308. this.cateIndex=e;
  309. this.queryForm.type=_this.cateList[e].type;
  310. this.queryForm.page=0;
  311. if(this.queryForm.status==''){
  312. this.onSearch();
  313. }else{
  314. this.onSearchStatus();
  315. }
  316. },
  317. onSetStatus(e){
  318. let _this=this;
  319. this.statusIndex=e;
  320. this.queryForm.status=_this.statusList[_this.statusIndex].status;
  321. this.queryForm.page=0;
  322. if(this.queryForm.status==''){
  323. this.onSearch();
  324. }else{
  325. this.onSearchStatus();
  326. }
  327. },
  328. onSearch(){
  329. let _this=this;
  330. if(_this.queryForm.page<=0){
  331. _this.dataList=[];
  332. }
  333. _this.queryForm.page++;
  334. _this.$http.request('userticket/search', _this.queryForm, "", "", true).then(res => {
  335. uni.stopPullDownRefresh();
  336. _this.dataList=_this.dataList.concat(res.data.dataList);
  337. }).catch(err => {})
  338. },
  339. onSearchStatus(){
  340. let _this=this;
  341. if(_this.queryForm.page<=0){
  342. _this.dataList=[];
  343. }
  344. _this.queryForm.page++;
  345. _this.$http.request('userticket/searchstatus', _this.queryForm, "", "", true).then(res => {
  346. uni.stopPullDownRefresh();
  347. _this.dataList=_this.dataList.concat(res.data.dataList);
  348. }).catch(err => {})
  349. }
  350. },
  351. }
  352. </script>
  353. <style lang="scss">
  354. @import './equity.scss'
  355. </style>