MP_XOIL_company_new/components/SwitchEnterprises.vue

<template>
	<view>
		<uni-popup :isMaskClick="false" ref="SwitchEnterprises">
			<view class="SwitchEnterprises_body">
				<view class="SwitchEnterprises_title">选择登录企业/油卡</view>
				<view class="card_container">
					<view @click="selectIndex=index" v-for="(item,index) in cardList" :key="index" class="card_item">
						<image :src="selectIndex==index? '../static/img/wx-bg.png ' : '../static/img/wx-bg@2x.png'">
						</image>
						<view class="card_item_container">
							<text class="card_item_text">{{item.name}}</text>
							<view class="card_item_label">{{item.companyNature==0?'外请':'自营'}}</view>
						</view>
						<view class="card_item_footer">
							<view class="card_item_footer_balance">
								<view v-if="item.shareCompanyQuota==1" class="isShared_tag">共享</view>
								<view>
									总余额：
									<text>￥{{item.balance}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="SwitchEnterprises_footer">
					<view @click="logOut" class="SwitchEnterprises_footer_button">退出</view>
					<view @click="submit" class="SwitchEnterprises_footer_button">确定登录</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import accountApi from '@/api/account.js'
	import finance from '@/api/oil-finance.js'
	export default {
		name: "SwitchEnterprises",
		props: {
			isShow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				cardList: [],
				selectIndex: 0
			};
		},
		watch: {
			isShow(n, o) {
				if (n) {
					this.init()
				} else {
					this.$refs.SwitchEnterprises.close()
				}
			}
		},
		created() {},
		methods: {
			async init() {
				let user = uni.getStorageSync('user');
				await this.getLoginCustomers(user.id);
				let companyCard = uni.getStorageSync('companyCard');
				if (companyCard) {
					try {
						companyCard = JSON.parse(companyCard);
						let isSelectCard = this.cardList.findIndex(item => item.id == companyCard.id);
						console.log(isSelectCard)
						this.selectIndex = isSelectCard;
					} catch (e) {
						//TODO handle the exception
					}

				};
				this.$refs.SwitchEnterprises.open('center')
			},
			logOut() {
				this.$emit('logout') 
			},
			closePopUp() {
				this.$emit('update:isShow', false)
			},
			submit() {
				let that = this
				let {
					companyId
				} = this.cardList[this.selectIndex];
				finance.chooseCompanyCard({
					companyId
				}).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: '登陆成功',
							icon: 'none',
							success() {
								uni.setStorageSync('companyCard', JSON.stringify(that.cardList[that.selectIndex]))
								that.closePopUp();
								that.$emit('submit');

							}
						})
					}
				}).catch(err => {
					this.logOut()
				})
			},
			async getLoginCustomers(id) {
				await finance.getLoginCustomerId(id).then(res => {
					this.cardList = res.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.isShared_tag {
		width: 62rpx;
		height: 30rpx;
		border-radius: 10rpx 3rpx 10rpx 3rpx;
		opacity: 1;
		border: 1rpx solid #FF6700;
		font-size: 22rpx;
		color: #FF6700;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
	}

	.SwitchEnterprises_footer_button {
		width: 200rpx;
		height: 67rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 1rpx solid #A4A4A4;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #262626;
		box-sizing: border-box;
	}

	.SwitchEnterprises_footer_button:nth-child(2) {
		background: #FF6700;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		color: #FFFFFF;
		border: 0px;
		margin-left: 40rpx;
	}

	.SwitchEnterprises_footer {
		display: flex;
		width: 100%;
		justify-content: center;
		margin-top: 35rpx;
	}

	.card_container {
		flex: 1;
		width: 100%;
		margin-top: 30rpx;
		overflow-y: auto;

		.card_item {
			.card_item_footer {
				position: relative;
				z-index: 1;
				width: 100%;
				margin-top: 20rpx;
				font-size: 22rpx;

				.card_item_footer_balance {
					display: flex;
					color: rgba(102, 102, 102, 1);

					text {
						color: rgba(0, 0, 0, 1);
					}
				}
			}

			.card_item_container {
				display: flex;
				z-index: 1;
				position: relative;
				overflow: hidden;

				.card_item_text {
					flex: 1;
					font-size: 28rpx;
					color: #000000;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.card_item_label {
					color: #FFFFFF;
					padding: 5rpx 10rpx;
					font-size: 22rpx;
					background: #FF6700;
					border-radius: 10rpx 3rpx 10rpx 3rpx;
					opacity: 1;
				}
			}

			image {
				width: 100%;
				height: 172rpx;
				position: absolute;
				z-index: 0;
				left: 0;
				top: 0;

			}

			box-sizing: border-box;
			padding: 40rpx 25rpx;
			width: 100%;
			height: 163rpx;
			position: relative;
			margin-bottom: 30rpx;
		}
	}

	.SwitchEnterprises_title {
		font-size: 28rpx;
		font-weight: 600;
		color: #000000;
		width: 100%;
		text-align: center;
		line-height: 39rpx;
	}

	.SwitchEnterprises_body {
		display: flex;
		flex-direction: column;
		width: 602rpx;
		height: 880rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		box-sizing: border-box;
		padding: 35rpx;
	}
</style>