renshou/card/create/create.vue

<template>
	<view>
		<view class="form">
			<view class="li ddflex">
				<view class="label">头像</view>
				<view class="photo ddflex flex" @tap="uploadImgs()">
					<image :src="avatar ? avatar : '../../static/images/userimg.png'" mode="aspectFill" class="userimg"></image>
					<image src="../../static/images/rico.png" class="rico"></image>
				</view>
			</view>
			<view class="li ddflex">
				<view class="label">姓名</view>
				<input v-model="realName" placeholder="请填写你的真实姓名" placeholder-class="placeholder" class="ipt flex" />
			</view>
			
			<view class="li ddflex">
				<view class="label">工号</view>
				<input v-model="jobNumber" placeholder="请输入工号" placeholder-class="placeholder" class="ipt flex" />
			</view>
			
			<view class="li ddflex">
				<view class="label">个人简介</view>
				<input v-if="!brief" @tap="jumpUrl('/card/editDesc/editDesc')" :disabled="true"  maxlength="11" type="number" placeholder="请作简单自我介绍" placeholder-class="placeholder" class="ipt flex" />
				<view class="fflex" v-else style="color: #47C776;" @tap="jumpUrl('/card/editDesc/editDesc')">已完善</view>
				<image src="../../static/images/rico.png" class="rico"></image>
			</view>
			
			<view class="li ddflex">
				<view class="label">执业证书</view>
				<input v-model="realName" placeholder="请输入执业证书编号" placeholder-class="placeholder" class="ipt flex" />
			</view>
		</view>
		
		<view class="form">
			<view class="tit ddflex"><view class="flex">联系信息</view></view>
			<view class="li ddflex">
				<view class="label">手机</view>
				<input v-model="phone" maxlength="11" type="number" placeholder="请填写手机号" placeholder-class="placeholder" class="ipt flex" />
				<view class="tong ddflex" @click="intWechatNumber"><image src="../static/images/wxth.png"></image>微信同号</view>
			</view>
			<view class="li ddflex">
				<view class="label">微信号</view>
				<input v-model="wechat" placeholder="请填写微信号" placeholder-class="placeholder" class="ipt flex" />
			</view>
			<!-- <view class="li ddflex">
				<view class="label">邮箱</view>
				<input v-model="email" placeholder="请填写邮箱地址" placeholder-class="placeholder" class="ipt flex" />
			</view> -->
			<view class="li dflex">
				<view class="label">微信二维码</view>
				<view v-if="!wechatCode" class="upload-box ddflex" @tap="uploadWechat()">
					<image src="../static/images/pic.png"></image>
					<view>点击上传</view>
				</view>
				<view v-else class="upload-box-image ddflex" @tap="uploadWechat()">
					<image class="upload-image" :src="wechatCode"></image>
					<image class="upload-close" src="../../static/pages/images/close3.png" @click.stop="wechatCode=''"></image>
				</view>
			</view>
		</view>
		
		<view class="form">
			<view class="li dflex">
				<view class="label">所获荣誉</view>
				<view class="ddflex upload-group flex">
					<view class="upload-box-image ddflex" v-for="item,index in honorImgUrls" @click="uploadHonor('change',index)">
						<image class="upload-image" :src="item"></image>
						<image class="upload-close" src="../../static/pages/images/close3.png" @click.stop="deleteHonor(index)"></image>
					</view>
					<view class="upload-box ddflex" @tap="uploadHonor()" v-if="honorImgUrls.length<9">
						<image src="../static/images/pic.png"></image>
						<view>点击上传</view>
					</view>
				</view>
			</view>
			<view class="li dflex">
				<view class="label">个人风采</view>
				<view class="ddflex upload-group flex">
					<view class="upload-box-image ddflex" v-for="item,index in styleImgUrls" @click="uploadStyle('change',index)">
						<image class="upload-image" :src="item"></image>
						<image class="upload-close" src="../../static/pages/images/close3.png" @click.stop="deleteStyle(index)"></image>
					</view>
					<view class="upload-box ddflex" @tap="uploadStyle()" v-if="styleImgUrls.length<9">
						<image src="../static/images/pic.png"></image>
						<view>点击上传</view>
					</view>
				</view>
			</view>
		</view>

		<view class="form">
			<view class="tit ddflex"><view class="flex">公司信息</view></view>
			<view class="li ddflex">
				<view class="label">公司</view>
				<input v-model="companyName" placeholder="请填写公司名称" placeholder-class="placeholder" class="ipt flex" />
			</view>
			<view class="li ddflex">
				<view class="label">职位</view>
				<input v-model="job" placeholder="请填写职位" placeholder-class="placeholder" class="ipt flex" />
			</view>
			<!-- <view class="li ddflex" @click="jumpUrl('/card/industry/industry?isPoistion=true')">
				<view class="label">行业</view>
				<view :class="'flex' + (industryName ? '' :' placeholder')">{{industryName ? industryName : '请填写行业'}}</view>
				<image src="../../static/images/rico.png" class="rico"></image>
			</view> -->
			<view class="li ddflex">
				<view class="label">所在地区</view>
				<view :class="['item flex', city ? 'active' : '']">
					<!-- #ifdef MP-WEIXIN -->
					<picker class="picker flex" mode="region" :value="morCity" @change="bindCity">
						<view :class="city?'':'placeholder'">{{ city ? city : '请选择地区' }}</view>
					</picker>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<pickerAddress class="picker flex" @change="bindAddressChange">
						<view :class="city?'':'placeholder'">{{ city ? city : '请选择地区' }}</view>
					</pickerAddress>
					<!-- #endif -->
				</view>
				<image src="../../static/images/rico.png" class="rico"></image>
				<!-- <picker class="picker flex">
					<view class="placeholder">请选择省份城市</view>
					<image src="../../static/images/rico.png" class="rico"></image>
				</picker> -->
			</view>
			<view class="li ddflex">
				<view class="label">地址</view>
				<input v-model="address" placeholder="填写街道地址" placeholder-class="placeholder" class="ipt flex" />
			</view>
		</view>
		<view class="bot">
			<view class="btn" @click="submitCard()">{{ isEdit ? '保存' : '确认创建' }}</view>
		</view>
	</view>
</template>

<script>
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
var app = getApp();
import pickerAddress from '../components/wangding-pickerAddress/wangding-pickerAddress.vue';
export default {
	components: { pickerAddress },
	data() {
		return {
			avatar: '',
			realName: '',
			phone: '',
			jobNumber:'',
			wechat: '',
			wechatCode:'',
			email: '',
			companyName: '',
			job:'',//职业
			industryName: '',//行业
			tradeId: '',//行业id
			message: '',
			isEdit: false,
			id: '' ,//名片id
			nums: 0,
			brief:'',//简介
			address:'',//详细地址
			
			honorImgUrls:[],//荣誉
			
			styleImgUrls:[],//风采
			
			city: '',
			areaCode: '',
			morCity: [],
			
			userCard:null,//用户IP名片
		};
	},
	onLoad(opt) {
		this.isEdit = opt.isEdit;
		this.id = opt.id;
		console.log('getUserCard')
		this.getUserCard()
	},

	methods: {
		getUserInfo(){
			return new Promise((resolve,reject)=>{
				req.getRequest('/api/user/info',{},res=>{
					this.avatar = res.avatar;
					this.realName = res.realName ? res.realName : res.nickName;
					this.phone = res.mobile;
					resolve();
				})
			})
		},
		// 用户名片信息
		getUserCard(){
			req.getRequest('/api/visiting/card/userInfo', {}, res => {
				console.log('getUserCard',res)
				this.userCard = res
				if(!res){
					// this.getCompanyData()
					this.getUserInfo()
				}else{
					this.id = res.id
					this.avatar = res.avatar;
					this.realName = res.realName;
					this.jobNumber = res.jobNumber;
					this.brief = res.brief;
					this.phone = res.phone;
					this.wechat = res.wechat;
					this.wechatCode = res.wechatCode;
					this.email = res.email;
					this.companyName = res.companyName;
					this.industryName = res.industryName;
					this.tradeId = res.tradeId;
					this.address = res.address;
					this.job = res.job;
					res.areaCode = JSON.parse(res.areaCode)
					this.morCity = [res.areaCode.id.substring(0,2)+'0000',res.areaCode.id.substring(0,4)+'00',res.areaCode.id]
					this.city = res.areaCode.name
					this.areaCode = this.morCity[2];
				}
			});
		},
		getCompanyData(){
			req.getRequest('/api/CKBCompany/info',{},res=>{
				if(res){
					this.companyName = res.title
					this.industryName = res.trade
					this.tradeId = res.industryId
					this.address = res.address
					this.morCity = JSON.parse(res.areaCode).map(item=>{return item.id})
					this.areaCode = JSON.parse(res.areaCode).map(item=>{return item.id})[2]
					this.city = JSON.parse(res.areaCode).map(item=>{return item.name}).join('')
				}
			})
		},
		jumpUrl(url) {
			uni.navigateTo({
				url: url
			});
		},
		uploadImgs() {
			let that = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: function({ tempFilePaths }) {
					var promise = Promise.all(
						tempFilePaths.map(tempFilePath => {
							return new Promise(function(resolve, reject) {
								req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
									that.avatar = res.src;
								});
							});
						})
					);
					promise
						.then(function(results) {
							console.log(results);
						})
						.catch(function(err) {
							console.log(err);
						});
				}
			});
		},
		uploadWechat() {
			let that = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: function({ tempFilePaths }) {
					var promise = Promise.all(
						tempFilePaths.map(tempFilePath => {
							return new Promise(function(resolve, reject) {
								req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
									that.wechatCode = res.src;
								});
							});
						})
					);
					promise
						.then(function(results) {
							console.log(results);
						})
						.catch(function(err) {
							console.log(err);
						});
				}
			});
		},
		
		uploadHonor(type,index){
			let that = this;
			uni.chooseImage({
				count: type=='change'?1:(9-that.honorImgUrls.length),
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: function({ tempFilePaths }) {
					var promise = Promise.all(
						tempFilePaths.map(tempFilePath => {
							return new Promise(function(resolve, reject) {
								req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
									if(type=='change'){
										that.honorImgUrls[index] = res.src
										that.honorImgUrls = JSON.parse(JSON.stringify(that.honorImgUrls))
									}else{
										that.honorImgUrls = that.honorImgUrls.concat(res.src)
									}
								});
							});
						})
					);
					promise
						.then(function(results) {
							console.log(results);
						})
						.catch(function(err) {
							console.log(err);
						});
				}
			});
		},
		deleteHonor(index){
			this.honorImgUrls.splice(index,1)
		},
		
		// 个人风采
		uploadStyle(type,index){
			let that = this;
			uni.chooseImage({
				count: type=='change'?1:(9-that.styleImgUrls.length),
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: function({ tempFilePaths }) {
					var promise = Promise.all(
						tempFilePaths.map(tempFilePath => {
							return new Promise(function(resolve, reject) {
								req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
									if(type=='change'){
										that.styleImgUrls[index] = res.src
										that.styleImgUrls = JSON.parse(JSON.stringify(that.styleImgUrls))
									}else{
										that.styleImgUrls = that.styleImgUrls.concat(res.src)
									}
								});
							});
						})
					);
					promise
						.then(function(results) {
							console.log(results);
						})
						.catch(function(err) {
							console.log(err);
						});
				}
			});
		},
		deleteStyle(index){
			this.styleImgUrls.splice(index,1)
		},
		
		intMessage(e){
			this.nums = e.detail.value.length
		},
		intWechatNumber(){
			this.wechat = this.phone
		},
		
		bindCity: function(e) {
			this.morCity = e.detail.code;
			this.city = e.detail.value.join().replace(/[,]/g, '');
			this.areaCode = e.detail.code[2];
		},
		
		bindAddressChange(data) {
			this.morCity = data.ids;
			this.city = data.data[0] + data.data[1] + data.data[2];
			this.areaCode = data.ids[2];
		},

		/**
		 * 提交名片
		 */
		submitCard() {
			let that = this;
			if (!this.avatar) return req.msg('请上传头像');
			if (!this.realName) return req.msg('请填写你的真实姓名');
			if (!this.jobNumber) return req.msg('请填写你的工号');
			if (!this.brief) return req.msg('请填写个人简介');
			if (!this.phone) return req.msg('请填写手机号');
			if (!this.wechat) return req.msg('请填写微信号');
			if (!this.wechatCode) return req.msg('请上传微信二维码');
			if (!this.companyName) return req.msg('请填写公司名称');
			if (!this.job) return req.msg('请填写职位')
			if (!this.areaCode) return req.msg('请选择所在地区');
			if (!this.address) return req.msg('请填写详细地址');
			var dataP = {};
			dataP.avatar = this.avatar;
			dataP.realName = this.realName;
			dataP.brief = this.brief;
			dataP.phone = this.phone;
			dataP.wechat = this.wechat;
			dataP.wechatCode = this.wechatCode;
			dataP.companyName = this.companyName;
			dataP.job = this.job;
			dataP.areaCode = {
				id:this.areaCode,
				name :this.city
			};
			dataP.areaCode = JSON.stringify(dataP.areaCode)
			dataP.address = this.address;
			dataP.jobNumber = this.jobNumber;
			dataP.honorImg = this.honorImgUrls.join(',');
			dataP.styleImg = this.styleImgUrls.join(',');
			var url = '';
			if (this.id) {
				dataP.id = this.id;
			} 

			req.postRequest(
				'/api/visiting/card/saveOrUpdate',
				dataP,
				json => {
					if (that.id) {
						req.msg('保存成功');
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					} else {
						req.msg('名片创建成功');
						setTimeout(function() {
							that.jumpUrl('/card/index/index');
						}, 1500);
					}
				},
				true
			);
		}
	}
};
</script>

<style>
@import './create.css';
</style>