jobslink-user-clent/pageMy/my/resume/index.vue

<template>
	<view style="background-color: #fff;">
		<view class="head" @click="goUserBase">
			<image v-if="userInfo.avatar" :src="userInfo.avatar" mode=""></image>
			<image v-else src="../../../static/img/head.svg" mode=""></image>

			<view class="name">
				<view class="userName">
					{{ auth.authInfo.realName }}
				</view>
				<view class="userInfo">
					个人基本信息
				</view>
			</view>
			<image src="../../../static/img/right.svg" mode=""></image>
		</view>

		<view class="title">
			<view class="title_text">
				我的职业技能
			</view>
			<image v-if="mySkills.length < 10" src="../../../static/img/add.gray.svg" mode="" @click="goAdd"></image>
		</view>

		<view class="listBody">
			<m-slide-list @controller-reg="controller.reg" @controller-moving="controller.moving"
				@controller-opened="controller.opened" @controller-closed="controller.closed"
				@remove="removeSkills(item.id, index)" v-for="(item, index) in mySkills" :key="item.id"
				:button="buttonList">
				<view class="list">
					<view class="list_text">
						{{ item.trade }}·{{ item.worktypes }}·{{ item.skills }}
					</view>
				</view>
			</m-slide-list>
		</view>
		<view class="jobcontent" @click="goSetCity">
			<view class="jobinfo">
				<view class="jobAddress">
					您想工作的地点
				</view>
				<view v-bind:class="['jobText', { nochoose: !myResume.cityId }]">
					{{ myResume.cityId ? getCity(myResume.cityId) : '请选择' }}
				</view>
			</view>
			<image src="../../../static/img/right.svg" mode=""></image>
		</view>
		<view class="jobcontent" @click="showPickerFunc('education')">
			<view class="jobinfo">
				<view class="jobAddress">
					您的学历
				</view>
				<view v-bind:class="['jobText', { nochoose: !myResume.cityId }]">
					{{ myResume.education ? this.myResume.education : '请选择' }}
				</view>
			</view>
			<image src="../../../static/img/right.svg" mode=""></image>
		</view>
		<view class="jobcontent" @click="showPickerFunc('wage')">
			<view class="jobinfo">
				<view class="jobAddress">
					您的期望薪资
				</view>
				<view v-bind:class="['jobText', { nochoose: !myResume.cityId }]">
					{{ myResume.wage ? this.myResume.wage : '请选择' }}
				</view>
			</view>
			<image src="../../../static/img/right.svg" mode=""></image>
		</view>
		<!-- <view class="jobcontent" @click="goSetCity">
			<view class="jobinfo">
				<view class="jobAddress">
					您的期望薪资
				</view>
				<view v-bind:class="['jobText', { nochoose: !myResume.cityId }]">
					{{ myResume.cityId ? getCity(myResume.cityId) : '请选择' }}
				</view>
			</view>
			<image src="../../../static/img/right.svg" mode=""></image>
		</view>
		<view class="jobcontent" @click="goSetCity">
			<view class="jobinfo">
				<view class="jobAddress">
					您的联系方式
				</view>
				<view v-bind:class="['jobText', { nochoose: !myResume.cityId }]">
					{{ myResume.cityId ? getCity(myResume.cityId) : '请选择' }}
				</view>
			</view>
			<image src="../../../static/img/right.svg" mode=""></image>
		</view> -->
		<view class="border"></view>
		<!--<view class="jobcontent" @click="goWantSkill">
			<view class="jobinfo">
				<view class="jobAddress">
					我想学习的技能（选填）
				</view>
				<view class="jobText" v-bind:class="myResume.learnSkill?'':'nochoose'">
					{{myResume.learnSkill?myResume.learnSkill:'请填写'}}
				</view>
			</view>
			<image src="../../../static/img/right.svg" mode=""></image>
		</view>-->

		<u-picker @confirm="pickerButtonFunc" @cancel="showPicker = false" :show="showPicker" :columns="columns"></u-picker>
	</view>
</template>

<script>
import {
	mapGetters
} from 'vuex'
import {
	mySkills,
	myResume,
	removeSkills,
	setCity,
	setLearn
} from '@/api/resume.js';
import mSlideList from '@/components/mark-slide-list/mark-slide-list.vue';
import controller from '@/components/mark-slide-list/controller';

export default {
	components: {
		mSlideList
	},
	data() {
		return {
			controller: new controller(),
			myResume: {},
			mySkills: [],
			id: '',
			buttonList: [{
				title: '删除',
				background: '#ff3b32',
				clickName: 'remove'
			}],
			showPicker: false,
			showType: "",
			columns: [
				['MBA/EMBA', '博士', '硕士', '本科', '大专', '高中', '中专/中技'
					, '初中及以下', '不限'
				]
			],
		}
	},
	onShow() {
		this.getResume()
		this.getSkill()
	},
	computed: {
		...mapGetters(['userInfo', 'auth'])
	},
	methods: {
		getResume() {
			myResume().then(res => {
				const data = res.data.data
				this.myResume = data
				if (data && data.id) {
					this.id = data.id
				}
			});
		},
		getSkill() {
			mySkills().then(res => {
				this.mySkills = res.data.data;
			})
		},
		goWantSkill: function () {
			uni.$off('getWantSkill')
			uni.$once('getWantSkill', (cb) => {
				cb(this.myResume.learnSkill)
			})
			uni.$off('setWantSkill')
			uni.$once('setWantSkill', ({
				skill,
				done
			}) => {
				setLearn(this.id, skill).then(res => {
					uni.navigateBack()
				}).catch(() => {
					done && done()
				})
				this.getResume()
			})
			uni.navigateTo({
				url: './setWskill?id=' + this.id
			})
		},
		goSetCity: function () {
			uni.$off('setCity')
			uni.$on('setCity', ({ detail }) => {
				console.log(detail, '---------------');

				setCity(this.id, detail.parentLabel + '-' + detail.label).then(res => {
					this.myResume.cityId = detail.id
					this.getResume()
				})
			})
			uni.navigateTo({
				url: `/pages/setCity/setCity?maxLayer=2`
			})
		},
		goAdd: function () {
			uni.navigateTo({
				url: './addSkill'
			})
		},
		goUserBase: function () {
			uni.navigateTo({
				url: '../userBase'
			})
		},
		getCity: function (val) {
			if (val) {
				let areas = this.$store.getters.getAreaParents(val)
				if (areas.length) {
					return areas[0].label + '-' + areas[1].label
				}
			}
		},
		removeSkills: function (id, index) {
			removeSkills(id).then(res => {
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				});
				this.mySkills.splice(index, 1)
			})
		},
		showPickerFunc(type) {
			this.showType = type;
			switch (type) {
				case "education":
					this.columns =
						[['MBA/EMBA', '博士', '硕士', '本科', '大专', '高中', '中专/中技'
							, '初中及以下', '不限'
						]]
					break;
				case "wage":
					this.columns =[['10-15元/小时', '16-20元/小时', '21-25元/小时', '26-30元/小时', '30元/小时以上', '100-150元/天', '151-200元/天'
							, '201-250元/天', '251-300元/天',"300元/天以上","2000元（含）以下/月","2000-5000元（含）/月","5000-8000元（含）/月",
							"8000-10000元（含）/月","10000-15000元（含）/月","15000-20000元（含）/月","20000-25000元（含）/月","25000-30000元（含）/月","30000元以上/月","面议、暂无要求"
						]]
						
					
					break;

				default:
					
					break;
			}
			this.showPicker = true;
		},
		pickerButtonFunc(e) {
			console.log(e, this.myResume, this.myResume[this.showType]);
			this.myResume[this.showType] = e.value[0];
			this.showPicker = false;
		}
	}
}
</script>

<style>
.border {
	margin-left: 30rpx;
	width: 720rpx;
	border: 1rpx solid #f2f2f2;

	/* 	height: 1rpx;
		background-color: #ddd; */
}

.jobText {
	font-family: PingFangSC-Regular;
	font-size: 32rpx;
	color: #666666;
}

.jobAddress {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #999999;
}

.nochoose {
	color: #ccc;
}

.jobcontent {
	padding: 30rpx;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 63rpx;
}

.jobcontent image {
	width: 40rpx;
	height: 40rpx;
}

.listBody {}

.list_text {
	font-family: PingFangSC-Regular;
	font-size: 32rpx;
	color: #666666;
	background: #ffffff;
	overflow-y: auto;
	white-space: nowrap;
}

.list image {
	width: 40rpx;
	height: 40rpx;
	margin-left: auto;
}

.list {
	padding: 0 15px 0 30rpx;
	height: 126rpx;
	line-height: 126rpx;
	background: #fff;
	border-bottom: 1px solid #f2f2f2;
}

.title image {
	width: 40rpx;
	height: 40rpx;
}

.title {
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #999999;
	display: flex;
	padding: 25rpx 30rpx;
	/* 		padding-top: 30rpx; */
	background-color: #fff;
	align-items: center;
	justify-content: space-between;
	border: 1rpx solid #f2f2f2;
}

.userInfo {
	font-family: PingFangSC-Regular;
	font-size: 24rpx;
	color: #999999;
}

.name {
	margin-left: 20rpx;
	font-family: PingFangSC-Medium;
	font-size: 36rpx;
	color: #333333;
	line-height: 50rpx;
}

.head image:last-child {
	width: 40rpx;
	height: 40rpx;
	margin-left: auto;
}

.head image {
	width: 100rpx;
	height: 100rpx;
}

page {
	background-color: #f6f6f6;
}

.head {
	padding: 30rpx;
	width: 690rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
</style>