wangluohuoyun-huozhuapp/pages/mine/company/index.vue

<template>
	<view>
		<view v-if='company.length==0' style='text-align:center;transform: translateY(30%);'>
			<image class='image zanwu' :showLoading="true" src="../../../static/mine/company/zanwu.png"></image>
			<view style='font-size:13px;'>您还没有公司哦，快来添加吧~</view>
			<view @click="goDetailPage('/pages/mine/company/addcompany')" class='add'>去添加</view>
		</view>
		<view v-else class='content'>
			<!-- <view class='content1'>所属公司（{{company.length}}）</view> -->
			<view v-for='item in company' class='wrap'>
				<view class='flex flex-space-between'>
					<view>{{item.companyName}}</view>
					<view v-if='item.status=="已认证"' class='status passed'>{{item.status}}</view>
					<view v-if='item.status=="审核中"' class='status aduit'>{{item.status}}</view>
					<view v-if='item.status=="已驳回"' class='status reject'>{{item.status}}</view>
					<view v-if='item.status=="已过期"' class='status reject'>{{item.status}}</view>
				</view>
				<view class="flex">
					<view class="lookAccount" @click="seeAccount(item)">
						查看账户
					</view>
					<view class="row2">
						<image v-if='item.status!="审核中"' @click='edit(item)'
							style='width:17px;height:17px;margin:0 10px;' src="@/static/mine/company/edit.png"></image>
						<image @click='delbtnAClick(item)' style='width:17px;height:17px;margin:0 10px;'
							src="@/static/mine/company/del.png"></image>
					</view>
				</view>
			</view>
			<view class='footer'>
				<view @click="goDetailPage('/pages/mine/company/addcompany')" class='newlyIncreased'>新增</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {

		data() {
			return {
				company: []
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad() {
			var _this = this;
			if (!this.hasLogin) {
				uni.$u.route('/pages/public/login');
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			seeAccount(item){
				uni.$u.route("/pages/mine/myAccount/index?id=" + item.id + "&companyId=" + item.id)
			},
			goDetailPage(src) {
				var that=this
				if(src=='/pages/mine/company/addcompany'){
					this.$request.baseRequest('get', '/cargoOwnerInfo/firstAuthentication', {
						phone: this.userInfo.phone,
					}).then(res => {
						if (res.data.authenticationStatus == '已认证') {
							uni.$u.route(src);
						}else{
							that.$refs.uToast.show({
								type: 'error',
								message: "请先完成个人认证"
							})
						}
					})
				}else{
					uni.$u.route(src);
				}
			},
			edit(item) {
				this.goDetailPage('/pages/mine/company/editcompany?id=' + item.id)
			},
			delbtnAClick(val) {
				uni.$u.throttle(this.del(val), 1000)
			},
			del(item) {
				var _this = this
				uni.showModal({ title: '友情提示',
				    content: '确认删除公司吗？',
				    success: function (res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							
							_this.$request.baseRequest('post', '/companyInfo/api/deleteCompany', {
									id: item.id
								}).then(res => {
									uni.hideLoading()
									uni.$u.toast('删除成功')
									_this.getList()
								})
								.catch(res => {
									uni.hideLoading()
									uni.showToast({
										title: res.message,
										icon: 'none',
										duration: 2000
									})
								});
						} else if (res.cancel) { 
							
						}     
					} 
				});
			},
			goDetailPage(src) {
				uni.$u.route(src);
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				var _this = this
				this.$request.baseRequest('get', '/companyInfo/selectCompany', {
						commonId: this.userInfo.id
					}).then(res => {
						uni.hideLoading()
						this.company = res.data
					})
					.catch(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F5F6FA;
	}

	.zanwu {
		width: 235px;
		height: 235px;
	}

	.add {
		width: 106px;
		height: 42px;
		margin: 36px auto 0;
		color: #fff;
		// background: url(../../../static/mine/company/Mask@3x.png);
		background: #2772FB ;
		border-radius: 44rpx;
		background-size: 100%;
		line-height: 42px;
	}

	.wrap {
		background: #fff;
		border-radius: 10rpx;
		padding: 24rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.lookAccount {
			color: #2772FB;
			font-size: 26rpx;
			margin-top: 112rpx;
			width: 50%;
		}

		.row2 {
			margin-top: 112rpx;
			width: 50%;
			display: flex;
			justify-content: flex-end;
		}

	}

	.status {
		font-size: 26rpx;
		padding: 5rpx 18rpx;
		color: #fff;
		border-radius: 20rpx;
	}

	.status.passed {
		background: #25E491;
	}

	.status.aduit {
		background: #FE8031;
	}

	.status.reject {
		background: #FC5A51;
	}

	.content {
		padding: 20rpx;
	}

	.footer {
		position: fixed;
		background: #fff;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: 15px 15px 30px;
		box-sizing: border-box;
	}

	.newlyIncreased {
		width: 100%;
		height: 80rpx;
		margin: 0 auto;
		text-align: center;
		color: #fff;
		background: #2772FB;
		background-size: 100%;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>