H5_module/service/secondCardDetail/secondCardDetail.vue

<template>
	<view :style="[mainStyle]">
		<!-- 小卡 -->
		<view class="list" v-if="pageList&&pageList.length>0">
			<view class="detail-info" v-for="(item, index) in pageList" :key="index" @click="jumpUrl('/service/cardDetail/index?id=' + item.id)">
				<view class="info ddflex nopadding">
					<view class="detail-info-left">
						<view class="money">1<text>次</text></view>
						<view class="man">免费使用</view>
					</view>
					<view class="detail-info-content fflex" @click.stop="checks(item,index)">
						<view class="title">{{item.proudctName}}</view>
						<view class="time" v-if="item.expireTime"><block>{{item.expireTime}}</block>
							<image v-if="!item.isShow" src="../static/images/bico.png" ></image>
							<image v-else src="../static/images/bico_h.png" ></image>
						</view>
					</view>
					<view class="detail-info-btn">
						<!-- <image src="../static/images/ma_dark.png" class="ma"></image> -->
						<view class="yong dflex">去使用</view>
					</view>
				</view>
				<view class="infos" v-if="item.isShow">
					<view>使用范围：仅限{{item.proudctName}}使用1次</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss+'empty_dd.png'"></image>
			<text>暂无次卡</text>
		</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,
				orderProductId: '',
				currentTab: 1,
				form:{
					page: 1,
					limit: 10
				},
				pageList:[],
				isLoad: true,
			}
		},
		components: {},
		props: {},
		onLoad(options) {
			this.orderProductId = options.orderProductId
			this.getPageList()
		},
		onReachBottom() {
			this.form.page++
			this.getPageList()
		},
		methods:{
			getPageList(){
				if (!this.isLoad) return false;
				this.isLoad = false;
				let that = this;
				let form = that.form
				form.state = that.currentTab
				form.orderProductId = that.orderProductId
				if(form.page == 1){
					uni.showLoading()
				}
				req.getRequest(api.card_page,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))
				}
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

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