2023-4-25

api/model.js

@@ -54,6 +54,14 @@ export function getShowTemplateList(data) {
 	return request({
 		url: '/api/pub/getShowTemplateList',
 		method: 'post',
+})
+}
+
+
+export function getUserCardInfo(data, id) {
+	return request({
+		url: '/api/user/getUserCardInfo',
+		method: 'get',
 		data
 	});
 }

pages/user/model/model.vue

@@ -1,8 +1,598 @@
-<template>
-</template>
-
-<script>
-</script>
-
-<style>
+<template>
+	<view class="content" :class="mtype==1?'mone':'mbase'" v-if="baseURL">
+		<view class="m-top">
+			<image :src="baseURL + '/resource/icon/model1/top-base.png'" mode="" class="top-bg"></image>
+			<image :src="baseURL + '/resource/icon/model1/resume.png'" mode="" class="readme"></image>
+			<view class="top-user flex">
+				<image :src="cardInfo.avatar" mode="" class="user-logo"></image>
+				<image :src="baseURL + '/resource/icon/model1/jpfw.png'" mode="" class="gp"></image>
+			</view>
+			<view class="user-name">
+				{{cardInfo.name || '詹继红'}}
+			</view>
+			<button type="default" class="fx-btn">
+				<image :src="baseURL + '/resource/icon/model1/fx.png'" mode=""></image>
+			</button>
+		</view>
+		<view class="m-body gr">
+			<!-- 个人信息 -->
+			<view class="hua2">
+				<view class="m-card">
+					<image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
+					<view class="card-tit flex">
+						<image :src="baseURL + '/resource/icon/model1/m1.png'" mode="" class="tit-logo"></image>个人信息
+					</view>
+					<view class="card-content">
+
+						<view class="user-info flex">
+							<view class="info-item-b">
+								年<text class="qianger"></text>龄： {{cardInfo.age|| '暂无'}}
+							</view>
+							<view class="info-item-b">
+								属<text class="qianger"></text>相： {{cardInfo.twelve|| '暂无'}}
+							</view>
+							<view class="info-item-b">
+								从<text class="qianger"></text>业： {{(cardInfo.work_year + '年')|| '暂无'}}
+							</view>
+							<view class="info-item-b">
+								星<text class="qianger"></text>座： {{cardInfo.constellation || '暂无'}}
+							</view>
+							<view class="info-item-b">
+								籍<text class="qianger"></text>贯： {{cardInfo.ancestral_place || '暂无'}}
+							</view>
+							<view class="info-item-b">
+								民<text class="qianger"></text>族： {{cardInfo.minority || '暂无'}}
+							</view>
+							<view class="info-item-b">
+								学<text class="qianger"></text>历： {{cardInfo.education || '暂无'}}
+							</view>
+							<!-- <view class="info-item-b">
+								综 <text class="laner"></text> 合<text class="laner"></text>分： 50
+							</view> -->
+							<view class="info-item-q flex" style="align-items: flex-start;">
+								<text style="flex-shrink: 0;">服务地区： </text><text>椒江区、黄岩区、路桥区</text>
+							</view>
+							<view class="info-item-q flex" style="align-items: flex-start;">
+								<text style="flex-shrink: 0;">服务价格： </text>
+								<view class="gzt">
+									<image :src="baseURL + '/resource/icon/model1/tiao.png'" mode=""></image>
+									<view class="gzt-price">
+										<text>{{cardInfo.service_min_price}}</text>元/{{cardInfo.service_time_type_title.replace('每','')}}
+									</view>
+									<view class=" gzt-price-b">
+										<text>{{cardInfo.service_max_price}}</text>元/{{cardInfo.service_time_type_title.replace('每','')}}
+									</view>
+								</view>
+								<image :src="baseURL + '/resource/icon/model1/yrz.png'" mode="" class="rz"></image>
+							</view>
+						</view>
+					</view>
+					<view class="" style="height: 80rpx;"></view>
+
+				</view>
+			</view>
+			<!-- 自我评价 -->
+			<view class="hua4">
+				<view class="hua3">
+					<view class="m-card">
+						<image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
+						<view class="card-tit flex">
+							<image :src="baseURL + '/resource/icon/model1/m2.png'" mode="" class="tit-logo"></image>自我评价
+						</view>
+						<view class="card-content">
+							{{cardInfo.service_intro_content}}
+						</view>
+						<view class="img-list flex" style="padding-top: 0;">
+							<image :src="siiitem" mode="" v-for="siiitem in cardInfo.service_intro_imgs"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 我的证书 -->
+			<view class="hua5" v-if="cardInfo.service_audit_imgs && cardInfo.service_audit_imgs.length > 0">
+				<view class="m-card">
+					<image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
+					<view class="card-tit flex">
+						<image :src="baseURL + '/resource/icon/model1/m3.png'" mode="" class="tit-logo"></image>我的证书
+					</view>
+					<view class="img-list flex">
+						<image :src="saiitem" mode="" v-for="saiitem in cardInfo.service_audit_imgs"></image>
+					</view>
+				</view>
+			</view>
+			<!-- 服务内容 -->
+			<view class="hua6">
+				<view class="m-card">
+					<image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
+					<view class="card-tit flex">
+						<image :src="baseURL + '/resource/icon/model1/m4.png'" mode="" class="tit-logo"></image>服务内容
+					</view>
+					<view class="card-content">
+						<view class="fw" v-for="spaitem in cardInfo.service_project_ar">
+							<view class="fw-tit">
+								<text class="yg"></text>{{spaitem.title}}
+							</view>
+							<view class="fw-content">
+								{{spaitem.content}}
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 服务照片 -->
+			<view class="m-card" v-if="cardInfo.service_imgs && cardInfo.service_imgs.length > 0">
+				<image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
+				<view class="card-tit flex">
+					<image :src="baseURL + '/resource/icon/model1/m5.png'" mode="" class="tit-logo"></image>服务照片
+				</view>
+				<view class="img-list flex">
+					<image :src="siitem" mode="" v-for="siitem in cardInfo.service_imgs"></image>
+				</view>
+			</view>
+			<!-- 底部图片 -->
+			<image :src="baseURL + '/resource/icon/model1/m-btm.png'" mode="" class="m-btm"></image>
+		</view>
+		<view class="create-model-ts">
+		</view>
+		<view class="create-model">
+			生成我的专属简历
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+
+	import {
+		getUserCardInfo
+	} from '@/api/model.js'
+	export default {
+		data() {
+			return {
+				mtype: 1,
+				cardInfo: {}
+			}
+		},
+		computed: {
+			...mapState(['baseURL'])
+		},
+		onLoad() {
+			console.log(this.$store.state.baseURL)
+			this.getUserCardInfo()
+		},
+		onShow() {
+
+		},
+		methods: {
+			getUserCardInfo() {
+				let that = this
+				getUserCardInfo().then(res => {
+					console.log(res)
+					that.cardInfo = res.data
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.mone {
+		background-color: #f8e1df;
+
+		.m-top {
+			width: 750rpx;
+			position: relative;
+			width: 750rpx;
+			height: 370rpx;
+
+			.top-bg {
+				position: relative;
+				width: 750rpx;
+				height: 370rpx;
+			}
+
+			.readme {
+				width: 534rpx;
+				height: 83rpx;
+				position: absolute;
+				top: 172rpx;
+				left: 0;
+				right: 0;
+				margin: auto;
+			}
+
+			.top-user {
+				width: 222rpx;
+				height: 222rpx;
+				background: #FEFEFE;
+				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
+				border-radius: 50%;
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 80rpx;
+				justify-content: center;
+				align-items: center;
+				margin: auto;
+
+				.user-logo {
+					width: 200rpx;
+					height: 200rpx;
+					border-radius: 50%;
+					background-color: #fff;
+				}
+
+				.gp {
+					width: 133rpx;
+					height: 38rpx;
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					margin: auto;
+				}
+			}
+
+			.user-name {
+				width: 750rpx;
+				font-size: 38rpx;
+				font-weight: bold;
+				color: #000000;
+				text-align: center;
+				position: absolute;
+				top: 318rpx;
+			}
+
+			.fx-btn {
+				width: 150rpx;
+				height: 48rpx;
+				padding: 0;
+
+				&::after {
+					border: none;
+				}
+
+				position: absolute;
+				top: 70rpx;
+				right: 0;
+				border-radius: 24rpx 0 0 24rpx;
+
+				image {
+					width: 150rpx;
+					height: 48rpx;
+					display: block;
+				}
+			}
+		}
+	}
+
+	.m-body {
+
+		width: 705rpx;
+		margin: auto;
+		margin-top: 20rpx;
+		background-color: #fff;
+		border-left: 8rpx solid #efa0ab;
+		border-right: 8rpx solid #efa0ab;
+		padding: 45rpx 0;
+	}
+
+	.gr {
+		position: relative;
+
+		&::before {
+			content: '';
+			position: absolute;
+			// left: 75px;
+			right: 0;
+			top: -30rpx;
+			width: 120px;
+			height: 174px;
+			background: url('https://api.myjie.cn/resource/icon/model1/hua1.png') no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+
+	.m-card {
+		width: 640rpx;
+		background: #fcf4f1;
+		border-radius: 20rpx;
+		position: relative;
+		// min-height: 270rpx;
+		margin: 0 auto 46rpx;
+
+		.card-tit {
+			width: 219rpx;
+			height: 57rpx;
+			background: #F46C85;
+			border-radius: 20rpx 28rpx 29rpx 0rpx;
+			justify-content: flex-start;
+			align-items: center;
+			padding: 0 20rpx;
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #FFFFFF;
+
+			.tit-logo {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 18rpx;
+			}
+		}
+
+		.card-bg {
+			width: 100%;
+			height: 270rpx;
+			position: absolute;
+			bottom: 0rpx;
+		}
+
+		.card-content {
+			padding: 25rpx 35rpx;
+			font-size: 26rpx;
+			font-weight: 500;
+			color: #2C2E35;
+			position: relative;
+		}
+
+		.img-list {
+			justify-content: space-between;
+			flex-wrap: wrap;
+			margin: auto;
+			padding: 30rpx 30rpx 0;
+			position: relative;
+
+			image {
+				width: 270rpx;
+				height: 270rpx;
+				background-color: #fff;
+				margin-bottom: 30rpx;
+			}
+
+
+		}
+
+		.fw {
+			font-size: 26rpx;
+			font-weight: 500;
+			color: #2C2E35;
+			padding: 10rpx 0;
+
+			.fw-tit {
+				color: #F46C85;
+				display: flex;
+				align-items: center;
+
+				.yg {
+					background-color: #F46C85;
+					display: inline-block;
+					width: 10rpx;
+					height: 10rpx;
+					border-radius: 50%;
+					margin-right: 10rpx;
+				}
+			}
+
+			.fw-content {
+				padding-top: 10rpx;
+				padding-left: 18rpx;
+				text-align: justify;
+			}
+
+		}
+
+		.user-info {
+			flex-wrap: wrap;
+			font-size: 26rpx;
+			font-weight: 500;
+			color: #000000;
+			position: relative;
+
+			.info-item-b,
+			.info-item-q {
+				padding: 10rpx 0;
+				color: #000000;
+				position: relative;
+
+				padding-left: 20rpx;
+
+				&::before {
+					display: inline-block;
+					content: '';
+					width: 10rpx;
+					height: 10rpx;
+					border-radius: 50%;
+					background-color: #F46C85;
+					position: absolute;
+					top: 22rpx;
+					left: 0;
+				}
+
+				.qianger {
+					width: 2em;
+					display: inline-block;
+				}
+
+				.laner {
+					width: 0.5em;
+					display: inline-block;
+				}
+			}
+
+			.info-item-b {
+				width: 50%;
+			}
+
+			.info-item-q {
+				width: 100%;
+				display: flex;
+				align-items: flex-start;
+				justify-content: start;
+
+				.gzt {
+					width: 312rpx;
+					height: 24rpx;
+					padding-top: 10rpx;
+					position: relative;
+
+					image {
+						width: 312rpx;
+						height: 24rpx;
+						position: relative;
+					}
+
+					.gzt-price,
+					.gzt-price-b {
+						width: 200rpx;
+						text-align: center;
+						position: absolute;
+						padding-top: 20rpx;
+
+						&::after {
+							content: '';
+							width: 0px;
+							height: 0rpx;
+							// background: #FEB8C6;
+							border: 14rpx solid;
+							border-color: transparent transparent #FEB8C6;
+							// border-top:transparent;
+							// border-left: transparent;
+							// border-right: transparent;
+							position: absolute;
+							top: -14rpx;
+							left: 0;
+							right: 0;
+							margin: auto;
+						}
+
+						text {
+							color: #F46C85;
+						}
+					}
+
+					.gzt-price {
+						left: -100rpx;
+					}
+
+					.gzt-price-b {
+						right: -100rpx;
+					}
+				}
+
+				.rz {
+					margin-top: 10rpx;
+					margin-left: 10rpx;
+					width: 87rpx;
+					height: 26rpx;
+				}
+			}
+		}
+	}
+
+	.m-btm {
+		width: 660rpx;
+		height: 384rpx;
+	}
+
+	.hua2 {
+		position: relative;
+
+		&::before {
+			content: '';
+			width: 199rpx;
+			height: 298rpx;
+			background: url('https://api.myjie.cn/resource/icon/model1/hua2.png') no-repeat;
+			position: absolute;
+			bottom: -100rpx;
+			right: 0;
+			background-size: 100% 100%;
+		}
+	}
+
+	.hua3 {
+		position: relative;
+
+		&::before {
+			content: '';
+			width: 192rpx;
+			height: 223rpx;
+			background: url('https://api.myjie.cn/resource/icon/model1/hua3.png') no-repeat;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			margin: auto;
+			background-size: 100% 100%;
+		}
+	}
+
+	.hua4 {
+		position: relative;
+
+		&::before {
+			content: '';
+			width: 128rpx;
+			height: 145rpx;
+			background: url('https://api.myjie.cn/resource/icon/model1/hua4.png') no-repeat;
+			position: absolute;
+			bottom: -70rpx;
+			right: 0;
+			background-size: 100% 100%;
+		}
+	}
+
+	.hua5 {
+		position: relative;
+
+		&::before {
+			content: '';
+			width: 199rpx;
+			height: 298rpx;
+			background: url('https://api.myjie.cn/resource/icon/model1/hua2.png') no-repeat;
+			position: absolute;
+			bottom: -100rpx;
+			left: 0;
+			background-size: 100% 100%;
+			transform: rotateY(180deg);
+		}
+	}
+
+	.hua6 {
+		position: relative;
+
+		&::before {
+			content: '';
+			width: 192rpx;
+			height: 223rpx;
+			background: url('https://api.myjie.cn/resource/icon/model1/hua3.png') no-repeat;
+			position: absolute;
+			bottom: -110rpx;
+			right: 0;
+			background-size: 100% 100%;
+			transform: rotateY(180deg);
+		}
+	}
+
+	.create-model-ts {
+		width: 750rpx;
+		height: 30rpx;
+	}
+
+	.create-model {
+		width: 750rpx;
+		height: 78rpx;
+		background: #f65486;
+		border-radius: 5rpx;
+		font-size: 30rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+		text-align: center;
+		line-height: 78rpx;
+
+		position: fixed;
+		bottom: 0;
+	}
 </style>