jje_uniapp/storePages/useRights/index.vue

<template>
	<view class="page" :style="{'height':windowHeight}">
		<view class="flex-col" v-if="!equityList">
			<view class="flex-row justify-center">
				<image class="empty" src="/static/imageIcon/empty.png" mode="widthFix"></image>
			</view>
			<view class="emptyText flex-row justify-center">
				<text>暂无内容</text>
			</view>
		</view>
		<view v-else>
		<view class="flex-row">
			<view class="flex-col justify-center" @click="noUseChange">
				<u-icon v-if="noUse" name="checkmark-circle-fill" color="#38db38" size="25" ></u-icon>
				<u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
			</view>
			<view class="noUse">
				<text>不使用权益券</text>
			</view>
		</view>
		<view  :style="{'height':scrollViewHeight}">
			<scroll-view class="scroll " :style="{'height':scrollViewHeight}" scroll-y>
				<view  class="row-list flex-row justify-start" :class="{'grayscale' :item.serviceProjectId.indexOf(serviceProjectId) === -1 || serviceObjectId != item.serviceObjectId }" v-for="(item,index) in equityList" @click="clickCoupons(item,index)" :key="index">
					<view class="h-text flex-col justify-center ">
						<view class="money">
							<text>￥{{item.faceValue}}</text>
						</view>
<!--						<view class="desc">-->
<!--							<text>{{item.name}}</text>-->
<!--						</view>-->
					</view>

					<view class="h-center-content flex-col ">
						<view class="h-value">
							<text>{{item.title}}</text>
						</view>
						<view class="title">
							适用项目：{{item.serviceProjectName || ''}}
						</view>
						<view class="title">
							绑定对象：{{item.serviceObjectName}}
						</view>
						<view class="title">
							结束期限：{{item.effectiveEndTime.substring(0,10)}}
						</view>
					</view>

					<view class="h-right-content flex-col justify-center">

						<view class="flex-row justify-center" v-if="item.serviceProjectId.indexOf(serviceProjectId) === -1 || serviceObjectId != item.serviceObjectId ">

							<view class="h-btn-img">
								<image class="h-btn-img" src="/static/coupon/u2110.png" mode=""></image>
							</view>
						</view>

						<view class="flex-row justify-center" v-else>
							<u-icon v-if="item.isUse " name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
							<u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
						</view>


					</view>
				</view>
			</scroll-view>
		</view>
		<view>
			<view class="btn" @click="useCoupons">
				<text>确定</text>
			</view>
		</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				equityList:[],
				noUse:true,
				windowHeight:'',
				scrollViewHeight:'',
				serviceObjectId:'',
				serviceProjectId:'',
			};
		},
		onLoad(e) {
			this.serviceProjectId = e.serviceProjectId
			this.serviceObjectId = e.serviceObjectId
			let sysInfo = uni.getSystemInfoSync()
			this.windowHeight =sysInfo.windowHeight +'px'
			this.scrollViewHeight =sysInfo.windowHeight -(sysInfo.windowWidth/750)*252 +'px'
			this.myEquityCardList()
		},
		computed: {

		},
		methods: {

			useCoupons(){
				let  equitys = []
				for (const equity of this.equityList) {
					if (equity.isUse){
						equitys.push(equity)
					}
				}
				uni.$emit('getEquity',equitys)
				uni.navigateBack({
					data:1
				})
			},

			noUseChange(){
				this.noUse = !this.noUse
				if (this.noUse){
					this.equityList.forEach(item=>{
						item.isUse = false
					})
				}
			},
			clickCoupons(item,index){

				if (item.serviceProjectId.indexOf(this.serviceProjectId) === -1 || this.serviceObjectId != item.serviceObjectId){
					return
				}

				//关闭多选开始
				this.equityList.forEach(item=>{
					item.isUse = false
				})
				//关闭多选结束

				console.log(item)
				this.noUse = false
				item.isUse = !item.isUse
				this.$set(this.equityList,index,item)

				let flag = true
				this.equityList.forEach(item=>{
					if (item.isUse){
						flag = false
					}
				})
				this.noUse = flag

			},

			myEquityCardList(){
				this.$api.myEquityCardList().then(res=>{
					console.log(res)
					this.equityList = res.data.data
				})
			},

		},
	};
</script>
<style lang="scss" scoped>
	@import '/common/css/common.css';
	@import './index.rpx.scss';
</style>