signuptool-ui-xcx/pages/index/sponsorList.vue

<template>
	<view style="background: #F1F2F5;">

		<RefreshView @refresh="refresh" ref="mescrollRef" :pageBg="F1F2F5" :hasBack="true" text="赞助商"
			:useDownScroll="false" :useUpScroll="false" useTitleRightBtn="1" useTitleLeftBtn="1"
			titleRightBtnSource="确定" titleLeftBtnSource="新增" @rightBtn='rightBtnClick' @leftBtn='leftClick'>
			<view v-if="err" style="width: 100vw;height: 100vh;line-height: 100vh;text-align: center;"
				@click="refresh()">点击重试</view>
			<view v-if="!err">
				<view v-for="(item,index) in sponsorList " :key="index">
					<view
						style="display: flex;flex-direction: row; padding: 20rpx;background-color: #fff; margin: 20rpx;">
						<image style="width: 150rpx;height: 150rpx;" :src="item.logo" mode="aspectFill"
							@click="img(item.sid)"></image>

						<view
							style="display: flex;flex-direction: column;margin-left: 30rpx;flex: 1;margin-right: 30rpx;margin-top: 15rpx;">
							<text style="  display:-webkit-box;-webkit-line-clamp:1;
							overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;
							word-break:break-all;">{{item.name}}</text>
							<view style="display: flex;flex-direction: row;margin-top: 30rpx;">
								<text>{{item.linkerName}}</text>
								<text style="margin-left: 20rpx;">{{item.linkerPhone}}</text>
							</view>
						</view>

						<checkbox-group style="display: flex; align-items: center;"
							@change="checkboxChange($event, index)">

							<checkbox :checked="item.checked"></checkbox>

						</checkbox-group>

					</view>

				</view>
			</view>

		</RefreshView>
	</view>
</template>

<script>
	// 必须
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		// 使用mixin (在main.js注册全局组件) 必须
		mixins: [MescrollMixin],
		data() {
			return {
				err: false,
				sponsorList: [

				],
				info: {
					sidList: [],
					nameList: []
				}

			}

		},
		onShow() {
			let backResult = this.OnActivityResult();
			console.log("++++++++",backResult);
			if (backResult != undefined) {
				console.log("++++++++");
				this.refresh()
			}
		},
		methods: {
			refresh(page) {
				let _this = this

				this.Login()
					.then((res) => {
						this.HTTP({
							url: 'aos/v1/sponsorManagement/getSponsorListByUsersid/' + res,
							paramsType: "FORM",
							method: "GET",
							data: {

							},
							loading: true
						}).then((res) => {

							// 追加数据
							_this.sponsorList = res.data
							this.info.sidList = []
							this.info.nameList = []
							console.log("初始化=====>" + JSON.stringify(_this.sponsorList))

							_this.err = false
						});

					}).catch(function(err) {

						if (page == undefined || page.num == 1)
							_this.err = true
					})
			},
			rightBtnClick() {
				console.log("右=====>" + JSON.stringify(this.info.sidList))

				if (this.info.sidList.length == 0) {
					this.Toast("请选择赞助商")
					return
				}
				this.SetResult(this.info)
			},
			leftClick() {
				uni.navigateTo({
					url: 'addSponsor'
				})
			},

			img(sid) {
				uni.navigateTo({
					url: 'sponsorDetail?sponsorSid=' + sid
				})
			},

			checkboxChange(e, index) {
				console.log("index=====>" + index)
				this.sponsorList[index].checked = !this.sponsorList[index].checked

				if (this.sponsorList[index].checked) {
					this.info.sidList.push(this.sponsorList[index].sid)
					this.info.nameList.push(this.sponsorList[index].name)
				} else {
					this.info.sidList.splice(this.sponsorList.indexOf(index), 1)
					this.info.nameList.splice(this.sponsorList.indexOf(index), 1)
				}

				console.log("sidList=====>" + JSON.stringify(this.info.sidList))
				console.log("nameList=====>" + JSON.stringify(this.info.nameList))
			},


		}
	}
</script>

<style lang="scss">
	.top {

		display: flex;
		flex-direction: row;
		height: 100rpx;
		background: #FFFFFF;
		opacity: 0.8;
		align-items: center;
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;

		.unselected {

			text-align: center;
			font-size: 28rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #191919;
			line-height: 40rpx;

		}

		.selected {
			text-align: center;
			font-size: 28rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #2CAB69;
			line-height: 40rpx;
			border-bottom: 2rpx #2CAB69 solid;
			padding-bottom: 10rpx;
		}

	}

	.btn1 {
		background: #CCCCCC;
	}

	.btn2 {
		background: #09BE4F;
	}

	.btn3 {
		background: #FF2B2B;
	}

	.btn4 {
		background: #0081D5;
	}
</style>