juliancheng/pages/index/qiyexiufu.vue

<template>
	<view class="main" v-if="isshow!='0'">
		<view class="flex align-center margin-bottom-sm callback" style="color: #fff;" @click="callback">
			<image style="width: 50rpx;height: 50rpx;margin-right: 10rpx;" src="../../static/index/callback_white.png"
				mode=""></image>返回首页
		</view>
		<image class="topbg" :src="imgHost+'/static/index/top.png'"></image>
		<!-- 	<view class="top">
			<image src="../../static/index/r2-2x.png" mode=""></image>
    	</view> -->
		<view class="" style="position: relative;z-index: 1;margin-top: 96px;">
			<view class="flex flex-direction justify-center align-center">
				<image src="/static/index/3166d3d1d9b79004291261c7e8357a3.jpg" style="width: 200rpx;height: 200rpx;"
					mode=""></image>
				<view class="text-bold text-black margin-top-xs">
					企业信用征信评估
				</view>
			</view>
			<view class="title">
				请上传您的企业征信信用报告：
			</view>
			<view class="title-item">
				温馨提示：请按照信用报告的顺序上传
			</view>
			<view class="upload">
				<view class="cu-bar bg-white border-bottom">
					<view class="action">图片上传</view>
					<view class="action">{{ imgList.length }}/100</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage"
							:data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text
									class="cuIcon-close"></text></view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length < 100"><text
								class="cuIcon-cameraadd"></text></view>
					</view>
				</view>
			</view>
			<view class="title">
				请上传您的企业营业执照：
			</view>
			<view class="title-item">
				温馨提示：请按照营业执照的顺序上传
			</view>
			<view class="upload">
				<view class="cu-bar bg-white border-bottom">
					<view class="action">图片上传</view>
					<view class="action">{{ license_image_url == ''? '0':'1' }}/1</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" :data-url="license_image_url" v-if="license_image_url !== ''">
							<image :src="license_image_url" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImgs" :data-index="index">
								<text class="cuIcon-close"></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseLicenseImage" v-if="license_image_url.length < 1">
							<text class="cuIcon-cameraadd"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="title">
				企业负责人相关信息：
			</view>
			<view class="input-container">
				<view class="input-border round">
					<text class="label">真实姓名:</text>
					<input type="text" v-model="realName" placeholder="请输入您的真实姓名" class="input-item" />
				</view>
			</view>
			<view class="input-container">
				<view class="input-border round">
					<text class="label">联系方式:</text>
					<input type="text" v-model="realPhone" placeholder="请输入您的联系方式" class="input-item" />
				</view>
			</view>
			<!-- 		<view class="upl" @click="ChooseLicenseImage">
					+
				</view> -->
			<!-- <image :src="license_image_url" style="width: 200rpx;height: 200rpx;"></image> -->
			<view class="sub" @click="submit">
				提交
			</view>
			<!-- 提示框 -->
			<view class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
				<view class="cu-dialog top">
					<view class="cu-bar bg-white justify-end">
						<view class="content">提示</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close yellow" />
						</view>
					</view>
					<view class="padding-xl">
						您已提交成功，后台审核评估后会在一个工作日左右与您联系，请耐心等待。
					</view>
				</view>
			</view>
			<!-- 未登录 -->
			<view class="cu-modal" :class="modalName == 'WxModal' ? 'show' : ''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">您还未登录</view>
						<view class="action" @tap="modalName = ''">
							<text class="cuIcon-close yellow" />
						</view>
					</view>
					<view class="padding-xl">
						<view class="top-title" style="">
							<!-- <text class="top-title1">您还未登录</text></br> -->
							<text class="top-title1">请先登录再进行操作</text>
						</view>
						<view class="flex justify-around">
							<button type="primary" @tap="modalName = ''" class="cu-btn round greyBg lg">暂不登录</button>
							<button type="primary" @click="gotologin" class="cu-btn round yellowBg lg"
								hover-class="btn-hover">立刻登录</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
			...mapState(['user'])
		},
		onLoad(op) {
			console.log(op)
			let obj = uni.getStorageSync("configDatas")
			this.isshow = obj.is_show
			this.imgHost = this.$imgHost
			// //#ifdef H5
			// if (window.location.href.split("?")[1] != undefined) {
			// 	let id = window.location.href.split("?")[1].split("=")[1]
			// 	console.log(parseInt(id))
			// 	uni.setStorageSync('up_id', id)
			// }
			// //#endif
		},
		onShow() {
			// this.sharefun(this.user.id)
			// console.log(this.user.id)
			// console.log(window.location.href)
		},
		data() {
			return {
				percent: 0,
				imgList: [],
				license_image_url: '',
				modalName: '',
				isshow: "",
				imgHost: '',
				index: "",
				realName: "",
				realPhone: ""
			}
		},
		methods: {
			...mapActions({
				getUser: 'getUser' // 将 `this.getUser()` 映射为 `this.$store.dispatch('getUser')`
			}),
			...mapMutations({
				setJwt: 'setJwt',
				login: 'login'
			}),
			callback() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			gotologin() {
				this.modalName = '';
				uni.navigateTo({
					url: "../login/login",
					fail: (err) => {
						console.log(err)
					}
				})
			},
			sharefun(id) {
				if (!this.hasLogin) {
					return false;
				}
				if (this.$wechat.is_weixin()) {
					this.$wechat.share({
						title: '聚联诚集团信用评估系统V3.0评估入口',
						desc: '点击链接，开始您的个人信用评估',
						imgUrl: "https://zhengda.oss-cn-chengdu.aliyuncs.com/juyin/static/index/20201222144549.png",
					}, window.location.href, id, true)
				}
			},
			async submit() {
				if (!this.hasLogin) {
					this.modalName = 'WxModal';
					return false;
				}
				if (this.realName == '') {
					uni.showToast({
						title: "请输入真实姓名",
						icon: "none"
					})
					return false
				}
				if (this.realPhone == '') {
					uni.showToast({
						title: "请输入联系方式",
						icon: "none"
					})
					return false
				}
				if ( this.license_image_url !== '') {
					let imgs = [];
					for (let img of this.imgList) {
						var data = await this.$request.upload('/api/common/uploadImg', img, {});
						if (data.code != 200) {
							uni.showModal({
								title: '错误信息',
								content: data.message,
								showCancel: false
							});
							return;
						}
						imgs.push(data.data.file_url);
					}
					var data = await this.$request.upload('/api/common/uploadImg', this.license_image_url, {});
					if (data.code != 200) {
						uni.showModal({
							title: '错误信息',
							content: data.message,
							showCancel: false
						});
						return;
					}
					this.license_image_url = data.data.file_url;
					let param = {
						type: 2,
						license_image_url: this.license_image_url,
						'credit_image_urls': JSON.stringify(imgs),
						contact_name: this.realName,
						contact_phone: this.realPhone
					};
					uni.navigateTo({
						url: "agreement?data=" + JSON.stringify(param)
					})
					// let res = await this.$request.post('/api/order/sumbitOrder', param, true);
					// if (res.code != 200) {
					// 	uni.showModal({
					// 		title: '错误信息',
					// 		content: res.message,
					// 		showCancel: false
					// 	});
					// 	return;
					// }
					// uni.showToast({
					// 	icon: 'success',
					// 	title: '提交成功'
					// });
					// this.modalName = 'Modal'
					// setTimeout(function() {
					// 	this.modalName = ''
					// 	uni.navigateBack();
					// }, 3500);
				} else {
					uni.showToast({
						title: '图片必须选择',
						icon:"none"
					});
				}
			},
			ChooseLicenseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						this.license_image_url = res.tempFilePaths[0];
					}
				});
			},
			ChooseImage() {
				uni.chooseImage({
					count: 100, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths);
						} else {
							this.imgList = res.tempFilePaths;
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1);
			},
			DelImgs: function() {
				this.license_image_url = ''
			},
			hideModal: function() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	page {
		margin: 0;
		padding: 0;
		background: #f5f5f5;
	}

	.callback {
		position: absolute;
		z-index: 11111;
		top: 30rpx;
		left: 15rpx;
	}

	.input-container {
		width: 100%;
		padding: 0 30rpx;
		margin: 15px 0;
	}

	.input-border {
		width: 100%;
		height: 90rpx;
		padding: 0 30rpx 0 40rpx;
		box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
		display: flex;
		align-items: center;
		background-color: #fff;
	}

	.label {
		width: 30%;
		font-size: 30rpx;
	}

	.input-item {
		width: 100%;
		height: 100%;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, sans-serif;
		font-weight: 300;
		color: rgba(143, 143, 144, 1);
	}

	.main {
		width: 100%;
		height: auto;
		position: relative;
		overflow: hidden;
		/* margin-bottom: 55px; */
	}

	.main .topbg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		height: 36vw;
		/* z-index: -1; */
	}

	.yellowBg {
		background: #f5cc57 !important;
	}

	.greyBg {
		background: grey !important;
	}

	/* 	.top{
		width: 100vw;
		height: 42vw;
	}
	.top image{
		width: 100%;
		height: 100%;
		padding: 10px;
		background-repeat: no-repeat;
		background: cover;
	} */
	/* 	.upload{
		width: 100%;
		height: auto;
		background: #fff;
		padding: 15px;
	} */
	.upload {
		width: 90vw;
		height: auto;
		background: #fff;
		margin: 0 5vw;
	}

	/* .upload .title{
		width: 100%;
		height: 40px;
		line-height: 40px;
	} */
	.title {
		width: 90vw;
		/* height: 45px; */
		/* line-height: 45px; */
		font-size: 32rpx;
		font-weight: 400;
		margin: 5vw 5vw 2vw 5vw;
	}

	.title-item {
		color: #F5CC57;
		margin: 0 5vw;
		margin-bottom: 20rpx;
	}

	.upload .upl {
		width: 100px;
		height: 100px;
		border: 1px solid #8799a3;
		color: #8799a3;
		border-radius: 5px;
		line-height: 100px;
		text-align: center;
		font-size: 30px;
		margin: 10px calc(50% - 57px);
	}

	/* 	.upload .sub{
		width: 80px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #fff;
		background: #F1C554;
		border-radius: 30px;
		margin: 50px calc( 50% - 47px ) 10px calc( 50% - 47px );
	} */
	.sub {
		width: 90vw;
		height: 80rpx;
		line-height: 80rpx;
		margin: 5vw;
		text-align: center;
		color: #fff;
		background: #f1c554;
		border-radius: 100rpx;
	}

	.border-bottom {
		border-bottom: 1px solid #D8D8D8;
	}

	.cu-form-group {
		padding-top: 15px;
	}

	.yellow {
		color: #f5cc57;
	}
</style>