H5_module/card/create/create.vue

<template>
	<view>
		<view class="form">
			<view class="li ddflex">
				<view class="label">头像</view>
				<view class="photo ddflex flex" @tap="uploadImgs(1)">
					<image :src="avatar ? avatar : '../../static/pages/images/userimg.png'" mode="aspectFill" class="userimg"></image>
					<image src="../../static/pages/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="msg" 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/pages/images/rico.png" class="rico"></image>
			</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="email" placeholder="请填写邮箱地址" placeholder-class="placeholder" class="ipt flex" />
			</view>
			<view class="li ddflex">
				<view class="label">微信号</view>
				<input v-model="wechat" 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="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 class="ddflex" style="padding: 30rpx 0 30rpx 90rpx;"
					@click="jumpUrl('/card/industry/industry?isPoistion=true')">
					<view class="tong ddflex" style="margin-right: 10rpx;">
						常用职位
					</view>
					<image src="../../static/pages/images/rico.png" class="rico"></image>
				</view>
			</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/pages/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/pages/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 class="li ddflex">
				<view class="label">公司LOGO</view>
				<view class="photo ddflex flex" @tap="uploadImgs(2)">
					<image :src="companyLogo ? companyLogo : ''" mode="aspectFit" class="userimg"></image>
					<image src="../../static/pages/images/rico.png" class="rico"></image>
				</view>
			</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: '',
			wechat: '',
			email: '',
			companyName: '',
			job:'',//职业
			industryName: '',//行业
			tradeId: '',//行业id
			message: '',
			isEdit: false,
			id: '' ,//名片id
			nums: 0,
			msg: '',
			brief:'',//简介
			address:'',//详细地址
			companyLogo: '',
			
			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.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.msg = res.msg;
					this.brief = res.brief;
					this.phone = res.phone;
					this.wechat = res.wechat;
					this.email = res.email;
					this.companyName = res.companyName;
					this.industryName = res.industryName;
					this.tradeId = res.tradeId;
					this.address = res.address;
					this.companyLogo = res.companyLogo;
					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(type) {
			let that = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: function({ tempFilePaths }) {
					uni.showLoading({
						title: '正在上传'
					})
					var promise = Promise.all(
						tempFilePaths.map(tempFilePath => {
							return new Promise(function(resolve, reject) {
								req.uploadFile('/api/upload', tempFilePath, res => {
									if(type == 1){
										that.avatar = res.src;
									}else{
										that.companyLogo = res.src;
									}
									uni.hideLoading();
								});
							});
						})
					);
					promise
						.then(function(results) {
							console.log(results);
						})
						.catch(function(err) {
							console.log(err);
						});
				}
			});
		},
		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.msg) return req.msg('请填写你的服务寄语');
			// if (!this.brief) return req.msg('请填写个人简介');
			if (!this.phone) return req.msg('请填写手机号');
			if (!this.wechat) return req.msg('请填写微信号');
			if (!this.email) return req.msg('请填写邮箱地址');
			if (!this.companyName) return req.msg('请填写公司名称');
			if (!this.job) return req.msg('请填写职位')
			// if (!this.industryName) return req.msg('请填写行业');
			if (!this.areaCode) return req.msg('请选择所在地区');
			if (!this.address) return req.msg('请填写详细地址');
			// if (!this.companyLogo) return req.msg('请上传公司LOGO');
			var dataP = {};
			dataP.avatar = this.avatar;
			dataP.realName = this.realName;
			dataP.msg = this.msg;
			// dataP.brief = this.brief;
			dataP.phone = this.phone;
			dataP.wechat = this.wechat;
			dataP.email = this.email;
			dataP.companyName = this.companyName;
			dataP.job = this.job;
			// dataP.industryName = this.industryName;
			// dataP.tradeId = this.tradeId;
			dataP.areaCode = {
				id:this.areaCode,
				name :this.city
			};
			dataP.areaCode = JSON.stringify(dataP.areaCode)
			dataP.address = this.address;
			// dataP.companyLogo = this.companyLogo;
			var url = '';
			if (this.id) {
				dataP.id = this.id;
			} 

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

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