H5_module/service/secondCard/secondCard.vue

<template>
	<view :style="[mainStyle]">
		<view class="tab bgfff dflex">
			<view :class="'li ' + (currentTab == 1 ? 'active' : '')" @tap="tab(1)">未使用({{total}})</view>
			<view :class="'li ' + (currentTab == 2 ? 'active' : '')" @tap="tab(2)">已使用({{useTotal}})</view>
			<view :class="'li ' + (currentTab == 3 ? 'active' : '')" @tap="tab(3)">已失效({{loseTotal}})</view>
		</view>
		<!-- 卡 -->
		<view class="list" v-if="pageList&&pageList.length>0">
			<view :class="'li' + (currentTab == 1 ? '' : ' hui')" v-for="(item, index) in pageList" :key="index">
				<view class="info dflex" @tap="currentTab == 1 ? jumpUrl('/service/secondCardDetail/secondCardDetail?orderProductId=' + item.orderProductId) : ''">
					<view class="left-pic">
						<image :src="item.productPic"></image>
					</view>
					<view class="flex">
						<view class="title">{{item.proudctName}}</view>
						<view class="time" v-if="item.expireTime">{{item.expireTime}}</view>
					</view>
					<view class="info-r">
						<view class="money">{{item.quantity}}<text>次</text></view>
						<view class="man">免费使用</view>
					</view>
				</view>
				<view class="li-bot dflex">
					<view class="check dflex flex" @click.stop="checks(item,index)">查看详情
						<image v-if="!item.isShow" src="../static/images/bico.png" ></image>
						<image v-else src="../static/images/bico_h.png" ></image>
					</view>
					<!-- <image src="../static/images/ma_dark.png" class="ma" @click="createCode(item)"></image> -->
					<view class="yong dflex" @tap="currentTab == 1 ? jumpUrl('/service/secondCardDetail/secondCardDetail?orderProductId=' + item.orderProductId) : ''" v-if="currentTab == 1">去使用</view>
					<view class="yi" v-else>
						<image src="../static/images/yishiyong.png" class="yipic" v-if="currentTab == 2"></image>
						<image src="../static/images/yishixiao.png" class="yipic" v-else></image>
					</view>
				</view>
				<view class="infos" v-if="item.isShow">
					<view>使用范围：仅限“{{item.proudctName}}”使用{{item.quantity}}次</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss+'empty_dd.png'"></image>
			<text>暂无次卡</text>
		</view>
		<view class="ceng" v-if="isShowCard" @click="hideCardPop"></view>
		<view class="qrcode" v-if="isShowCard">
			<view class="qr-code ddflex">
				<u-qrcode ref="qrcode" canvas-id="qrcode" :value="currentCard.code" size="200"></u-qrcode>
			</view>
			<view class="code ddflex"><text>{{currentCard.code}}</text><view class="copy" @click="copyCode">复制</view></view>
			<!-- <view @click="scanCode">扫码</view> -->
			<image src="../../static/pages/images/close2.png" class="close" @click="hideCardPop"></image>
		</view>
	</view>
</template>

<script>
	const req = require("../../utils/request.js");
	const api = require("../../utils/api.js");
	const app = getApp();
	
	export default {
		data() {
			return {
				mainStyle: app.globalData.mainStyle,
				picUrlss: req.public.picUrls,
				currentTab: 1,
				form:{
					page: 1,
					limit: 10
				},
				pageList:[],
				isLoad: true,
				total: 0,
				currentCard: {},
				isShowCard: false,
				useTotal: 0,
				loseTotal: 0
			}
		},
		components: {},
		props: {},
		onLoad() {
			this.getPageList()
			this.getCount(1,suc=>{
				this.total = suc;
			});
			this.getCount(2,suc=>{
				this.useTotal = suc;
			});
			this.getCount(3,suc=>{
				this.loseTotal = suc;
			});
		},
		onReachBottom() {
			this.form.page++
			this.getPageList()
		},
		methods:{
			getCount(state,success){
				req.getRequest('/api/v3/secondary/card/count',{state: state},data=>{//状态 1、未使用 2、已使用 3、已失效
					success.call(this,data)
				})
			},
			tab(index) {
				if (this.currentTab === index) return false;
				this.currentTab = index
				this.form.page = 1
				this.isLoad = true
				this.getPageList()
			},
			getPageList(){
				if (!this.isLoad) return false;
				this.isLoad = false;
				let that = this;
				let form = that.form
				form.state = that.currentTab
				if(form.page == 1){
					uni.showLoading()
				}
				req.getRequest(api.card_polymerization,form,data=>{
					if (data.list && data.list.length >= 10) that.isLoad = true;
					if (that.form.page > 1) data.list = that.pageList.concat(data.list);
					data.list.map(it=>{
						it.isShow = false;
						return it;
					})
					that.pageList = data.list
					uni.hideLoading();
				})
			},
			checks(item,index){
				let pageList = this.pageList;
				if(pageList[index].isShow){
					pageList[index].isShow = false;
					this.pageList=JSON.parse(JSON.stringify(pageList))
				}else{
					pageList.map((it,dx)=>{
						if(dx==index) it.isShow = true;
						else it.isShow = false;
						return it;
					});
					this.pageList=JSON.parse(JSON.stringify(pageList))
				}
			},
			createCode(item){
				this.currentCard = item;
				this.isShowCard = true
			},
			hideCardPop(){
				this.isShowCard = false
			},
			copyCode(){
				uni.setClipboardData({
					data: this.currentCard.code,
					success() {
						req.msg('复制成功')
					}
				})
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			scanCode(){
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: '/mine/secondCard/secondCard?code=' + res.result
						})
					}
				})
			}
		}
	}
</script>

<style>
	@import "./secondCard.css"
</style>