wangluohuoyun-huozhuapp/pages/mine/agentCargoOwner.vue

<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="good-list content">
			<view class="good-li" v-for="(good,index) in goods" :key="index">
				<view class="row flex">
					<image :src="good.avatarUrl" mode="" class="avatar-img"></image>
					<view class="content-text">
						<view class="left flex">
							<view class="name">{{good.name}}</view>
							<view class="phone">{{good.phone}}</view>
						</view>
						<view class="company">{{good.company}}</view>
					</view>
					<view class="right-status number-color" v-if="good.status=='待审核'">{{good.status}}</view>
					<view class="right-status wtg-color" v-if="good.status=='已驳回'">{{good.status}}</view>
					<view class="right-status wtg-color" v-if="good.status=='平台已驳回'">{{good.status}}</view>
					<view class="right-status wtg-color" v-if="good.status=='已撤销授权'">{{good.status}}</view>
					<view class="right-status ygq-color" v-if="good.status=='代理终止'">{{good.status}}</view>
					<view class="right-status ytg-color" v-if="good.status=='已授权'">{{good.status}}</view>
				</view>
				<view class="row flex sqs flex-space-between" @click="previewImage(good)">
					<view class="right">授权书</view>
					<u-icon name="attach" color="#2979ff" size="24"></u-icon>
					
				</view>
				<view class="row flex flex-end row-btn">
					<view class="btn sq-btn" @click="configAuthorize(good,1)" v-if="good.status=='待审核'">授权</view>
					<view class="btn bh-btn" @click="configAuthorize(good,2)" v-if="good.status=='待审核'">驳回</view>
					<view class="btn sc-btn" @click="del(good)"
						v-if="good.status=='已驳回'||good.status=='已撤销授权'||good.status=='代理终止'">删除</view>
					<view class="btn cxsq-btn" @click="configAuthorize(good,3)" v-if="good.status=='已授权'">撤销授权</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :closeOnClickOverlay='true'
			:showCancelButton='true' confirmColor='#2772FB' @confirm="confirmClick" @close="cancelClick"
			@cancel="cancelClick"></u-modal>
	</mescroll-body>
</template>

<script>
	var that;
	import {
		mapState
	} from 'vuex';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiGoods
	} from "@/api/mock.js"

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				isShowAlert: false,
				alertTitle: '',
				alertContent: '',
				goods: [], // 数据列表，
				type: '',
				selectVal: null
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			that = this
		},
		methods: {
			previewImage(good){
				uni.previewImage({
							urls: [good.certificateAddressUrl],
							longPressActions: {
								// itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
			},
			confirmClick() {
				if (this.type == 4) {
					this.$request.baseRequest('post', '/agentCargoOwnerInfo/api/deleteAgentCargoOwner', {
							id: this.selectVal.id,
						}).then(res => {
							this.isShowAlert = false
							that.$refs.uToast.show({
								type: 'success',
								message: "刪除成功！",
								complete() {
									that.mescroll.resetUpScroll()
								}
							})
						})
						.catch(res => {
							uni.hideLoading()
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
							this.mescroll.endErr();
						});
				} else {
					this.$request.baseRequest('post', '/agentCargoOwnerInfo/api/editAgentCargoOwner', {
							id: this.selectVal.id,
							grantFlag: this.type,
						}).then(res => {
							if (res.code == 200) {
								this.isShowAlert = false
								that.$refs.uToast.show({
									type: 'success',
									message: "操作成功！",
									complete() {
										that.mescroll.resetUpScroll()
									}
								})
							}
						})
						.catch(res => {
							uni.hideLoading()
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
							this.mescroll.endErr();
						});
				}

			},
			cancelClick() {
				this.isShowAlert = false
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			configAuthorize(val, type) {
				this.type = type
				this.selectVal = val
				if (type == 1) {
					this.alertTitle = '确定授权？'
				} else if (type == 2) {
					this.alertTitle = '确定驳回？'
				} else {
					this.alertTitle = '确定撤销授权？'
				}
				this.isShowAlert = true
			},
			del(val) {
				this.alertTitle = '确定删除？'
				this.selectVal = val
				this.type = 4
				this.isShowAlert = true

			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.$request.baseRequest('get', '/agentCargoOwnerInfo/selectAgentCargoOwner', {
						commonId: this.userInfo.id,
						pageSize: page.size,
						currentPage: page.num,
					}).then(res => {
						debugger
						this.mescroll.endBySize(res.data.records.length, res.data.total);
						if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
						this.goods = this.goods.concat(res.data.records); //追加新数据
					})
					.catch(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
						this.mescroll.endErr();
					});
			}
		}
	}
</script>

<style scoped lang="scss">
	.good-li {
		background: white;
		margin: 20rpx;
		border-radius: 15rpx;
		padding: 40rpx;
		position: relative;

		.row {
			align-items: center;
		}
	}

	.avatar-img {
		width: 104rpx;
		height: 104rpx;
	}

	.right-status {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.content-text {
		margin-left: 30rpx;

		.name {
			font-size: 36rpx;
			font-weight: 700;
			color: #333333;
			margin-right: 20rpx;
		}

		.company {
			color: #333333;
		}

		.left {
			align-items: baseline;

			.phone {
				font-size: 28rpx;
			}
		}
	}

	.sqs {
		background: #F3F8FF;
		margin-top: 40rpx;
		color: #2772FB;
		padding: 20rpx;
		border-radius: 15rpx;
	}

	.row-btn {
		margin-top: 40rpx;
	}

	.sq-btn {
		background: #2772FB;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}

	.bh-btn,
	.sc-btn,
	.cxsq-btn {
		background: #F8F8F8;
		font-size: 28rpx;
		color: #333333;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
	}
</style>