sailun-tbr-web/pages/me/Settlement-center/index.vue

<template>
	<!-- 结算中心页面 -->
	<view>
		<view class="top">
			<view class="content" v-for="(item,index) in datalist" :key="index">
				<view class="content-one">
				</view>
				<view style="display: flex;justify-content: space-between;">
					<text class="content-two">{{item.agentName}}</text>
					<text class="content-three" @click="button(index)">核销返利</text>
				</view>
				
				<view class="content-four">
					<text>品牌</text>
					<text>奖励</text>
					<text @click="checkedAll(index,item)" :key='index'>全选</text>
				</view>
				<checkbox-group @change="checkboxChange($event,index,item.storegentBrandList)">
				<view class="content-five" v-for="(item,brandIndex) in item.storegentBrandList" :key="brandIndex">
					<view class="content-five-img">
						<u-image width="100%" height="65%" scaleType="matrix" :src="item.logoUrl"></u-image>
					</view>
					<view class="content-five-view">
						{{item.usableMoney}}元
					</view>
					<view>						
							<label>
								<checkbox v-model="JSON.stringify(item)" :value="JSON.stringify(item)" :checked="checkboxList[index]" :disabled="item.usableMoney==0" v-if="item.usableMoney!=0" color="#FFCC33" style="transform:scale(0.7)"/>
							</label>
					</view>

				</view>
				</checkbox-group>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from '../../../common/request/request'
	require("promise.prototype.finally").shim()
	export default {
		data() {
			return {
				datalist: [],
				agentId: '',
				Arry: [],
				brandCodeCheckList:[],
				amount: '',
				choice: 0,
				kunnr: '',
				brandCode: '',
				agentOpDate: '',
				src: 'https://b2bcnfile.sailuntire.com/upload//sailun-allsteel-admin/2020110616154607343814..jpg',
				storegentBrandList: [],
				checked: true,
				list: [{}],
				checkboxList: [],
				idList:[],
				listaa:['a','b','c'],
				checkedAllList:[],
				// isCheckedAll:false
			};
		},
		created() {
			this.getData()
		},
		computed:{
			ckeck(){
				return this.checkboxList
			}
		},
		methods: {
			// 获取结算中心数据
			getData() {
				request({
						url: '/myapp/storeSettlementCenter',
						method: 'post',
						data: {
							'storeId':this.$store.state.storeInfo.storeId,
							'userId':this.$store.state.storeInfo.userId
						}
					}).then(res => {
						console.log(res.data)
						this.datalist = res.data.data
						this.Arry.length = this.datalist.length
						// 每个新建数组长度为空,全选为false
						for(var i=0;i<this.datalist.length;i++){
							this.Arry[i] = []
							this.checkboxList[i] = false
						}
					}).catch(err => {
						console.log(err + "")
					})
					.finally(() => {
						setTimeout(() => {
							uni.hideLoading();
							this.loading = false;
						}, 1000)

					})
			},

			checkboxChange1() {
			
			},
			// 选中某个复选框时，由checkbox时触发
			// ,bollean,index
			checkboxChange(e,index,dataArr){
				console.log(index)
				console.log(e)
				let newArr = []
				console.log(this.Arry)
				e.detail.value.forEach((item) =>{
					var obj = {
						"storeId":this.$store.state.storeInfo.storeId,
						"amount": JSON.parse(item).usableMoney,
						"brandCode": JSON.parse(item).brandCode,
						"kunnr": JSON.parse(item).kunnr,
						'userId':this.$store.state.storeInfo.userId
					}
					console.log(obj)
					newArr.push(obj)
				})
				this.Arry[index] = newArr
				console.log(newArr)
				if(this.Arry[index].length == dataArr.filter((item)=>{
					return item.usableMoney != 0
				}).length ){
					this.$set(this.checkboxList, index, true);
					}else{
					this.$set(this.checkboxList, index, false);
					}
			},
				// 核销返利
				button(index) {
					console.log(index)
					console.log(this.Arry[index])
					request({
							url: '/myapp/storeCancel',
							method: 'post',
							data: this.Arry[index]
						}).then(res => {
							console.log(res)
							if(res.data.msg=="success") {
								uni.showToast({
								    title: '核销返利成功',
								    duration: 2000
								});
								this.getData()
								
							}else {
								uni.showToast({
								    title: '核销返利失败',
									icon: false,
								    duration: 2000
								});
							}
							
						}).catch(err => {
							console.log(err)
						})
						.finally(() => {
							setTimeout(() => {
								uni.hideLoading();
								this.loading = false;
							}, 1000)
					
						})
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
			},
			// 全选
			checkedAll(index,e) {
				console.log(index,e)
				let newArr=[]
				if(this.Arry[index].length == e.storegentBrandList.filter((item)=>{
					return item.usableMoney != 0
				}).length ){
					this.$set(this.checkboxList, index, false);
					this.Arry[index] = []
				}else{
					this.$set(this.checkboxList, index, true);
					for(var i=0;i<e.storegentBrandList.length;i++){
						if( e.storegentBrandList[i].usableMoney !=0){
							var obj = {
								"storeId": this.$store.state.storeInfo.storeId,
								"amount": e.storegentBrandList[i].usableMoney,
								"brandCode": e.storegentBrandList[i].brandCode,
								"kunnr": e.storegentBrandList[i].agentId
							}
							newArr.push(obj)
						}
						
					}
					this.Arry[index] = newArr
				}
				
				console.log(this.Arry,this.checkboxList)
				
				
			}
		},
	}
</script>

<style>
	.top {
		width: 750rpx;
		height: 331rpx;
		background: url(../../../static/sailun/background.png) no-repeat;
		background-size: 750rpx 331rpx;
	}

	.content {
		width: 712rpx;
		/* height: 445rpx; */
		margin: 0 auto;
		margin-bottom: 30rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 24px 0px rgba(101, 176, 249, 0.41);
		border-radius: 18px;
		position: relative;
		top: 30rpx;
		margin-bottom: 50rpx;
	}

	.content2 {
		width: 712rpx;
		height: 351rpx;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 24px 0px rgba(101, 176, 249, 0.41);
		border-radius: 18px;
		position: relative;
		top: 170rpx;
	}

	.content-one {
		width: 6rpx;
		height: 30rpx;
		background-color: #0589F8;
		position: relative;
		top: 20rpx;
		left: 30rpx;

	}

	.content-two {
		font: 26rpx;
		font-weight: bolder;
		position: relative;
		top: -14rpx;
		left: 60rpx;
	}

	.content-three {
		width: 114rpx;
		height: 40rpx;
		display: inline-block;
		background-color: #3A9FF2;
		margin-top: -20rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		line-height: 40rpx;
	}

	.content-four {
		display: flex;
		justify-content: space-between;
		font-weight: bolder;
		font-size: 26rpx;
		margin-top: 40rpx;
		margin-left: 80rpx;
		margin-right: 50rpx;
	}

	.content-five {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		margin-top: 40rpx;
		margin-left: 100rpx;
		font-weight: bolder;
		margin-right: 30rpx;
		padding-bottom: 20rpx;
	}

	.content-five-img {
		width: 164rpx;
		height: 50rpx;
		margin-left: -50rpx;
	}

	.content-five-view {
		margin-left: -150rpx;
	}
</style>