123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402 |
- <template>
- <view class="page-equity">
- <view class="equity-header">
- <view class="header-caption">
- <block v-for="(item,index) in cateList">
- <view class="text" :class="index==cateIndex?'active':''" @click="onSetCate(index)">{{item.name}}</view>
- </block>
- </view>
- <view class="header-sub">
- <block v-for="(it,index) in statusList">
- <view class="text" :class="index==statusIndex?'active':''" @click="onSetStatus(index)">{{it.value}}</view>
- </block>
- </view>
- </view>
-
- <view class="ticket-list">
- <view class="list-item" >
-
- <block v-for="(it,index) in dataList" >
- <block v-if="queryForm.status==''">
- <view class="item" :class="'shadow'" >
- <view class="ticket-content" >
- <view class="content">
- <view class="ticket-img">
- <!-- 商品券 -->
- <image src="/static/images/cof_ico.png" v-if="it.ticket.type==1" class="img" mode="aspectFill"></image>
- <!-- 课程券 -->
- <image src="/static/images/fit_ico.png" v-if="it.ticket.type==2" class="img" mode="aspectFill"></image>
- <!-- 剧场活动,早鸟会员 -->
- <image src="/static/images/soci_ico.png" v-if="it.ticket.type==3||it.ticket.type==4" class="img" mode="aspectFill"></image>
- </view>
- <view class="ticket-info" @click="onViewTicketMore(it)">
-
- <view class="ticket-name">
- <block v-if="it.ticket.type==2 && it.ticket.limitCourse>0">{{it.ticket.course.name}}</block>
- <block v-else>{{it.ticket.name}}</block>
- </view>
- <block v-if="it.qty<=1 && it.list[0].fitnessReq">
- <view class="ticket-expire">预约课程:{{it.list[0].fitnessReq.course.name}}</view>
- <view class="ticket-expire">教练:{{it.list[0].fitnessReq.teacher.name}}</view>
- <view class="ticket-expire">预约时间:{{it.list[0].fitnessReq.startTime}}</view>
- </block>
- <block v-else>
-
- <view class="ticket-expire-rule">{{it.ticket.intro}}</view>
- <view class="ticket-expire">开始日期:{{it.list[0].startTime}}</view>
- <view class="ticket-expire">截止日期:{{it.list[0].endTime}}</view>
- </block>
-
-
- </view>
- <view class="ticket-status used">
- <view class="ticket-text" v-if="it.qty>1">
- {{it.qty}} 张
- </view>
-
- </view>
- <view class="ticket-status-st used" v-if="it.qty==1" >
-
- <view class="ticket-st" >
- {{it.list[0].status==5?"待使用":""}}
- {{it.list[0].status==6?"待核销":""}}
- {{it.list[0].status==7?"已核销":""}}
- {{it.list[0].status==8?"已取消":""}}
-
-
- </view>
- </view>
- </view>
- </view>
- <view class="ticket-splite">
- <view class="left"></view>
- <view class="mid"></view>
- <view class="right"></view>
- </view>
- <view class="ticket-other">
- <view class="other-txt">
-
-
- </view>
- </view>
- </view>
- </block>
-
- <block v-else>
-
-
- <view class="item" :class="'shadow'" >
- <view class="ticket-content" >
- <view class="content">
- <view class="ticket-img">
- <!-- 商品券 -->
- <image src="/static/images/cof_ico.png" v-if="it.ticket.type==1" class="img" mode="aspectFill"></image>
- <!-- 课程券 -->
- <image src="/static/images/fit_ico.png" v-if="it.ticket.type==2" class="img" mode="aspectFill"></image>
- <!-- 剧场活动,早鸟会员 -->
- <image src="/static/images/soci_ico.png" v-if="it.ticket.type==3||it.ticket.type==4" class="img" mode="aspectFill"></image>
- </view>
- <view class="ticket-info" @click="onViewTicketMore(it)">
- <view class="ticket-name">
- <block v-if="it.ticket.type==2 && it.ticket.limitCourse>0">{{it.ticket.course.name}}</block>
- <block v-else>{{it.ticket.name}}</block>
- </view>
- <view class="ticket-expire-rule">{{it.ticket.intro}}</view>
- <view class="ticket-expire">开始日期:{{it.userTicket.startTime}}</view>
- <view class="ticket-expire">截止日期:{{it.userTicket.endTime}}</view>
- </view>
-
- <view class="ticket-status-st used" >
- <view class="ticket-st" >
- {{it.userTicket.status==5?"待使用":""}}
- {{it.userTicket.status==6?"待核销":""}}
- {{it.userTicket.status==7?"已核销":""}}
- {{it.userTicket.status==8?"已取消":""}}
- </view>
- </view>
- </view>
- </view>
- <view class="ticket-splite">
- <view class="left"></view>
- <view class="mid"></view>
- <view class="right"></view>
- </view>
- <view class="ticket-other">
- <view class="other-txt">
-
-
- </view>
- </view>
- </view>
-
-
-
- </block>
-
-
-
-
- </block>
-
- </view>
- </view>
-
-
- <uni-popup ref="moreItemForm">
- <view class="more-ticket">
- <view class="more-ticket-title">优惠券查看</view>
- <view class="more-items" v-if="currentItem!=null">
- <block v-for="(it,index) in currentItem.list" >
- <view class="item shadow " >
- <view class="ticket-content" @click="onViewTicket(it.hxCode)">
- <view class="content">
- <view class="ticket-img">
- <!-- 商品券 -->
- <image src="/static/images/cof_ico.png" v-if="currentItem.ticket.type==1" class="img" mode="aspectFill"></image>
- <!-- 课程券 -->
- <image src="/static/images/fit_ico.png" v-if="currentItem.ticket.type==2" class="img" mode="aspectFill"></image>
- <!-- 剧场活动,早鸟会员 -->
- <image src="/static/images/soci_ico.png" v-if="currentItem.ticket.type==3||currentItem.ticket.type==4" class="img" mode="aspectFill"></image>
- </view>
- <view class="ticket-info">
- <view class="ticket-name">
- <block v-if="currentItem.ticket.type==2 && currentItem.ticket.limitCourse>0">{{currentItem.ticket.course.name}}</block>
- <block v-else>{{currentItem.ticket.name}}</block>
- </view>
- <block v-if="it.fitnessReq">
- <view class="ticket-expire">预约课程:{{it.fitnessReq.course.name}}</view>
- <view class="ticket-expire">教练:{{it.fitnessReq.teacher.name}}</view>
- <view class="ticket-expire">预约时间:{{it.fitnessReq.startTime}}</view> <view class="ticket-expire">截止时间:{{it.fitnessReq.endTime}}</view>
- </block>
- <block v-else>
-
- <view class="ticket-expire-rule">{{currentItem.ticket.intro}}</view><view class="ticket-expire">开始时间:{{currentItem.list[index].startTime}}</view>
- <view class="ticket-expire">截止时间:{{currentItem.list[index].endTime}}</view>
- </block>
- </view>
- <view class="ticket-status-st used" >
- <view class="ticket-st">
- {{it.status==5?"待使用":""}}
- {{it.status==6?"待核销":""}}
- {{it.status==7?"已核销":""}}
- {{it.status==8?"已取消":""}}
- </view>
- </view>
- </view>
- </view>
- <view class="ticket-splite">
- <view class="left"></view>
- <view class="mid"></view>
- <view class="right"></view>
- </view>
- <view class="ticket-other">
- <view class="other-txt">
-
- <!-- <view class="btn">
- <button @click="onViewTicket(it.hxCode)" v-if="it.type==2 || it.type==1 && it.status==6 " class="btn-user" >使用</button>
- </view> -->
- </view>
- </view>
- </view>
- </block>
- </view>
- </view>
- </uni-popup>
-
-
-
- <uni-popup ref="qrForm">
- <view class="qr-code" >
-
- <view class="qr-box">
- <view class="qrcode">
- <view v-for="(row, rowI) in modules" :key="rowI" style="display: flex;flex-direction: row;">
- <view v-for="(col, colI) in row" :key="colI">
- <view v-if="col.isBlack" style="width: 5px;height: 5px;background-color: black;">
- <!-- 黑色码点 -->
- </view>
- <view v-else style="width: 5px;height: 5px;background-color: white;">
- <!-- 白色码点 -->
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="qr-text">核销码:{{qrText}}</view>
- </view>
- </uni-popup>
- </view>
- </template>
- <script>
- import {
- mapState,
- mapMutations
- } from 'vuex'
-
- // import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
- import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
- export default {
-
- data() {
- return {
- it: {
- list: [
- { status: 5 },
- // 其他项
- ]
- },
- cateList:[
- {
- type:"",
- name:"全部"
- },
- {
- type:1,
- name:'咖啡屋',
- },
- {
- type:2,
- name:'健身房',
- },
- {
- type:3,
- name:'社区中心',
- }
- ],
- cateIndex:0,
- statusList:[
- {
- status:'',
- value:'全部',
- },
- {
- status:6,
- value:'待核销',
- },
- {
- status:7,
- value:'已核销',
- }
-
- ],
- statusIndex:0,
- queryForm:{
- page:0,
- pageSize:10,
- status:'',
- type:'',
- userId:0,
- },
- dataList:[],
- modules: [],
- currentItem:null,
- qrText:'二维码内容',
- };
- },
- onLoad(){
- let _this=this;
- _this.statusIndex=0;
- _this.cateIndex=0;
- _this.queryForm.status=_this.statusList[_this.statusIndex].status;
- _this.queryForm.type=_this.cateList[_this.cateIndex].type;
- _this.queryForm.userId=_this.userInfo.id;
- if(this.queryForm.status==''){
- this.onSearch();
- }else{
- this.onSearchStatus();
- }
- },
-
- onPullDownRefresh() {
- this.queryForm.page=0;
- uni.startPullDownRefresh();
- if(this.queryForm.status==''){
- this.onSearch();
- }else{
- this.onSearchStatus();
- }
- },
- onReachBottom() {
- if(this.queryForm.status==''){
- this.onSearch();
- }else{
- this.onSearchStatus();
- }
- },
- computed: {
- ...mapState(['userInfo']),
- },
-
- methods:{
-
-
- onViewTicketMore(item){
- this.currentItem=item;
- this.$refs.moreItemForm.open("bottom");
- },
-
- onViewTicket(e){
- let _this=this;
- _this.qrText=e;
- // 获取uQRCode实例
- const qr = new UQRCode();
- qr.data = _this.qrText+"&T";
- qr.make();
- _this.modules = qr.modules;
- _this.$refs.qrForm.open("center");
- },
-
- onSetCate(e){
- let _this=this;
- this.cateIndex=e;
- this.queryForm.type=_this.cateList[e].type;
- this.queryForm.page=0;
- if(this.queryForm.status==''){
- this.onSearch();
- }else{
- this.onSearchStatus();
- }
- },
- onSetStatus(e){
- let _this=this;
- this.statusIndex=e;
- this.queryForm.status=_this.statusList[_this.statusIndex].status;
- this.queryForm.page=0;
- if(this.queryForm.status==''){
- this.onSearch();
- }else{
- this.onSearchStatus();
- }
- },
-
- onSearch(){
- let _this=this;
- if(_this.queryForm.page<=0){
- _this.dataList=[];
- }
- _this.queryForm.page++;
- _this.$http.request('userticket/search', _this.queryForm, "", "", true).then(res => {
- uni.stopPullDownRefresh();
- _this.dataList=_this.dataList.concat(res.data.dataList);
- }).catch(err => {})
- },
- onSearchStatus(){
- let _this=this;
- if(_this.queryForm.page<=0){
- _this.dataList=[];
- }
- _this.queryForm.page++;
- _this.$http.request('userticket/searchstatus', _this.queryForm, "", "", true).then(res => {
- uni.stopPullDownRefresh();
- _this.dataList=_this.dataList.concat(res.data.dataList);
- }).catch(err => {})
- }
- },
- }
- </script>
- <style lang="scss">
- @import './equity.scss'
- </style>
|