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="80%" 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)" />
								<checkbox @click="checkbox" disabled v-if="item.usableMoney==0" color="#FFCC33" style="transform:scale(0.7)" />
							</label>
						</view>
					</view>
				</checkbox-group>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	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: {
			...mapMutations(["inStore"]),
			// 获取结算中心数据
			getData() {
				uni.showLoading({
					title: '加载中...'
				});
				request({
						url: '/myapp/storeSettlementCenter',
						method: 'post',
						data: {
							'storeId': this.$store.state.storeInfo.storeId,
							'userId': this.$store.state.storeInfo.userId
						}
					}).then(res => {
						if (res.data.code == 0) {
							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
							}
							this.inStore()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none",
								duration: _this.$store.state.showToastDuration
							});
						}

					}).catch(err => {
					})
					.finally(() => {
						setTimeout(() => {
							uni.hideLoading();
							this.loading = false;
						}, 1000)

					})
			},

			checkboxChange1() {

			},
			// 置灰选择框
			checkbox() {
				this.$u.toast('奖励金额不能为0！');
			},
			// 选中某个复选框时，由checkbox时触发
			// ,bollean,index
			checkboxChange(e, index, dataArr) {
				let newArr = []
				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
					}
					newArr.push(obj)
				})
				this.Arry[index] = 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) {
				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: 'none',
								duration: 2000
							});
						}

					}).catch(err => {
						console.log(err)
					})
					.finally(() => {
						setTimeout(() => {
							uni.hideLoading();
							this.loading = false;
						}, 1000)

					})
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {},
			// 全选
			checkedAll(index, e) {
				let newArr = []
				// 根据奖励金额是否为0判断全选取消全选
				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
				}



			}
		},
	}
</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: 15rpx;
		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: 70rpx;
		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: -100rpx;
	}
</style>