myjtp/pages/addTp/user.vue

<template>
	<view class="box">
		<view class="fromData">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名"><u-input placeholder="请输入姓名" v-model="form.name" /></u-form-item>
				<u-form-item label="电话"><u-input placeholder="请输入手机号码" v-model="form.phone" /></u-form-item>
				<u-form-item label="地址">
					<pickerAddress class="input" @change="onCityClick">{{addressDetail||'请选择地址'}}</pickerAddress>
				</u-form-item>
				<u-form-item label="门牌"><u-input placeholder="请输入详细地址"  v-model="form.address" /></u-form-item>
				<u-form-item label="职业"><u-input v-model="form.occupation" type="select" :select-open="showOccupation" @click="showOccupation = !showOccupation" /></u-form-item>
				<u-form-item label="简介"><u-input placeholder="请输入个人职业简介" maxlength="200" type="textarea" v-model="form.detail" /></u-form-item>
				<u-form-item label="头像"><u-upload max-count="1" :action="upUrl" :header="upHeader" @on-uploaded="setImg"></u-upload></u-form-item>
			</u-form>
		</view>
		<csmess></csmess>
		<u-action-sheet :list="occupationList" v-model="showOccupation" @click="changeOccupation"></u-action-sheet>
		<view class="upButtom" @click="submit">提交申请</view>
	</view>
</template>

<script>
import { pushJoin } from '@/api/tp.js';
import { mapState } from 'vuex';
import csmess from '@/components/csMessage.vue';
import  pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
export default {
	components: {
		csmess,
		pickerAddress
	},
	data() {
		return {
			form: {
				name: '', //姓名
				phone: '', //联系方式
				address: '', //地址
				occupation: '产康师', //职业
				upImg: '', //上传头像
				detail: '' //简介
			},
			addressDetail:'',//选择的省市区
			// 是否显示职业选择弹窗
			showOccupation: false,
			//职业类型选择
			occupationList: [
				{
					text: '产康师'
				},
				{
					text: '母乳喂养指导师'
				},
				{
					text: '母婴护理师'
				}
			],
			fileList: [
				{
					url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg'
				}
			]
		};
	},
	computed: {
		...mapState(['baseURL']),
		// 上传图片地址
		upUrl() {
			return this.baseURL + '/api/upload/image';
		},
		upHeader() {
			return {
				'Authori-zation': 'Bearer ' + uni.getStorageSync('token') || ''
			};
		}
	},
	onLoad() {},
	onShow() {},
	methods: {
		// 选中城市切换
		onCityClick({data}) {
			let address={};
			address.province = data[0];
			address.city = data[1];
			address.district = data[2];
			this.addressDetail = data.join('');
		},
		// 选中切换
		changeOccupation(e) {
			console.log(this.occupationList[e].text);
			this.form.occupation = this.occupationList[e].text;
			console.log(e);
		},
		submit() {
			uni.showLoading({
				title: '提交报名中...',
				mask: true
			});
			const data = this.form;
			pushJoin({
				type: 1,
				job: data.occupation,
				name: data.name,
				phone: data.phone,
				address:this.addressDetail+data.address ,
				avatar: data.upImg,
				detail: data.detail
			})
				.then(e => {
					uni.hideLoading();
					uni.showToast({
						title: '报名成功'
					});
					uni.showModal({
						title: '提示',
						content: '是否返回活动页？',
						success: res => {
							if (res.confirm) {
								uni.navigateBack();
							}
						}
					});
					console.log(e);
				})
				.catch(e => {
					uni.hideLoading();
					console.log(e);
				});
		},
		setImg(data, index, lists, name) {
			console.log(data);
			this.form.upImg = data[0].response.data.url;
			console.log(this.form.upImg);
		}
	}
};
</script>

<style lang="scss">
.box {
	padding-bottom: 70rpx;
}
.fromData {
	background-color: #ffffff;
	border-radius: 10rpx;
	margin: 30rpx;
	padding: 0 20rpx;
}
.upButtom {
	background: #d7272b;
	color: #ffffff;
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	padding: 20rpx 0;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
</style>