Browse Source

学校详情/教育申请

yangzj 3 years ago
parent
commit
7e767cd85e

+ 15 - 15
h5_web/pages.json

@@ -87,7 +87,9 @@
 		}, {
 			"path": "pages/schools/schools",
 			"style": {
-				"navigationBarTitleText": "学院列表"
+				"navigationBarTitleText": "学院列表",
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
 			}
 		}, {
 			"path": "pages/skillsTraining/skillsTraining",
@@ -212,10 +214,9 @@
 		}, {
 			"path": "pages/businessDetails/businessDetails",
 			"style": {
-				"navigationBarTitleText": "",
+				"navigationBarTitleText": "企业详情",
 				"enablePullDownRefresh": false,
-				"navigationBarBackgroundColor": "#3D5D4C",
-				"navigationBarTextStyle": "white",
+				"navigationBarBackgroundColor": "#fff",
 				"backgroundColor": "#f2f2f2"
 			}
 		}, {
@@ -263,17 +264,16 @@
 				"navigationBarTextStyle": "white"
 			}
 
+		}, {
+			"path": "pages/schoolDetails/schoolDetails",
+			"style": {
+				"navigationBarTitleText": "学校详情",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#fff"
+			}
+
 		}
-	    ,{
-            "path" : "pages/schoolDetails/schoolDetails",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
-                "enablePullDownRefresh": false
-            }
-            
-        }
-    ],
+	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
@@ -302,4 +302,4 @@
 			"text": "我"
 		}]
 	}
-}
+}

+ 307 - 41
h5_web/pages/applyEducationCode/applyEducationCode.vue

@@ -2,57 +2,54 @@
 <template>
 	<view class="apply-code">
 		<u-form :model="form" ref="uForm" label-width="160" label-align="left">
-			<u-form-item label="姓名:" prop="name">
-				<u-input v-model="form.name" placeholder="请输入真实姓名"/>
+			<u-form-item label="姓名:" prop="veteName" :required="true">
+				<u-input v-model="form.veteName" placeholder="请输入真实姓名" />
 			</u-form-item>
-			<u-form-item label="身份证号:" prop="idNumber">
-				<u-input v-model="form.idNumber" placeholder="请输入身份证号"/>
+			<u-form-item label="身份证号:" prop="veteIdCard" :required="true">
+				<u-input v-model="form.veteIdCard" placeholder="请输入身份证号" @blur="idNumberChange" />
 			</u-form-item>
-			<u-form-item label="性别:" prop="sex">
-				<u-input v-model="form.sex" placeholder="请输入您的性别"/>
+			<u-form-item label="性别:" prop="veteSex" :required="true">
+				<u-input v-model="form.veteSex" placeholder="输入身份证自动获取" disabled />
 			</u-form-item>
-			<u-form-item label="民族:" prop="national">
-				<u-input v-model="form.national" placeholder="请选择您的民族" type="select"/>
+			<u-form-item label="民族:" prop="nation" :required="true">
+				<u-input v-model="form.nation" placeholder="请输入您的民族" />
 			</u-form-item>
-			<u-form-item label="联系电话:" prop="phoneNumber">
-				<u-input v-model="form.phoneNumber" placeholder="请输入您的联系电话" maxlength="11"/>
+			<u-form-item label="联系电话:" prop="vetePhone" :required="true">
+				<u-input v-model="form.vetePhone" placeholder="请输入您的联系电话" maxlength="11" />
 			</u-form-item>
-			<u-form-item label="QQ:" prop="qqNumber">
-				<u-input v-model="form.qqNumber" placeholder="请输入您的QQ"/>
+			<u-form-item label="QQ:" prop="qqNum">
+				<u-input v-model="form.qqNum" placeholder="请输入您的QQ" />
 			</u-form-item>
-			<u-form-item label="微信:" prop="wxNumber">
-				<u-input v-model="form.wxNumber" placeholder="请输入您的微信"/>
+			<u-form-item label="微信:" prop="wxNum">
+				<u-input v-model="form.wxNum" placeholder="请输入您的微信" />
 			</u-form-item>
-			<u-form-item label="文化程度:" prop="national">
-				<u-input v-model="form.national" placeholder="请选择您的文化程度" type="select"/>
+			<u-form-item label="文化程度:" prop="degrEduc" :required="true">
+				<u-input v-model="form.degrEduc" placeholder="请选择您的文化程度" type="select" @click="degrEducShow = true"/>
 			</u-form-item>
-			<u-form-item label="政治面貌:" prop="national">
-				<u-input v-model="form.national" placeholder="请选择您的政治面貌" type="select"/>
+			<u-form-item label="政治面貌:" prop="politOutlook" :required="true">
+				<u-input v-model="form.politOutlook" placeholder="请选择您的政治面貌" type="select" @click="politOutlookShow = true"/>
 			</u-form-item>
-			<u-form-item label="户籍地:" prop="national">
-				<u-input v-model="form.national" placeholder="请选择您的户籍地" type="select"/>
+			<u-form-item label="户籍类别:" prop="houseType" :required="true">
+				<u-input v-model="form.houseType" placeholder="请选择您的户籍类型" type="select" @click="houseTypeShow = true"/>
 			</u-form-item>
-			<u-form-item label="现家庭详细地址:" label-position="top" label-width="200" label-align="left" prop="national">
-				<u-input v-model="form.national" placeholder="请输入您的现家庭详细地址"/>
+			<u-form-item label="户籍地:" prop="veteHousehRegi" :required="true">
+				<u-input v-model="form.veteHousehRegi" placeholder="请选择您的户籍地" type="select" @click="regionShow = true"/>
+			</u-form-item>
+			<u-form-item label="现家庭详细地址:" label-position="top" label-width="200" label-align="left" prop="veteResiAddress" :required="true">
+				<u-input v-model="form.veteResiAddress" placeholder="请输入您的现家庭详细地址" />
 			</u-form-item>
 			<u-form-item label="近期1寸免冠照片:" label-position="top" label-width="200" label-align="left" prop="national">
 				<view class="pic">
-					<u-upload
-						ref="uUpload"
-						action="action"
-						:auto-upload="false"
-						:custom-btn="true"
-						:limitType="['png', 'jpg']"
-					>
-						<view class="pic-upload-box" slot="addBtn">
+					<u-upload ref="uUpload" :action="action" :auto-upload="true" :custom-btn="true" max-count="1" :limitType="['png', 'jpg']" @on-success="uploadSuccess">
+						<view class="pic-upload-box" v-if="form.files.length === 0" slot="addBtn">
 							<view class="pic-upload">
-								<image src="../../static/img/upload-add.png" mode=""></image>
+								<image src="../../static/img/upload-add.png" mode=""/>
 								<view class="font">上传照片</view>
 							</view>
 							<view class="tips">支持jpg.png格式</view>
 						</view>
 					</u-upload>
-					<view class="pic-photograph" @click="photograph">
+					<view class="pic-photograph" @click="photograph" v-if="form.files.length === 0">
 						<image src="../../static/img/paizhao.png" mode=""></image>
 						<view class="font">立即拍照</view>
 					</view>
@@ -62,6 +59,18 @@
 				<u-button type="primary" class="submit" @click="submit">提交简历</u-button>
 			</u-form-item>
 		</u-form>
+		
+		<!-- 文化程度下拉 -->
+		<u-select v-model="degrEducShow" :list="degrEducList" @confirm="degrEducChange"/>
+		
+		<!-- 政治面貌下拉 -->
+		<u-select v-model="politOutlookShow" :list="politOutlookList" @confirm="politOutlookChange"/>
+		
+		<!-- 户籍地 -->
+		<u-picker mode="region" v-model="regionShow" :default-region='["贵州省", "贵阳市", "南明区"]' @confirm="regionConfirm"/>
+		
+		<!-- 户籍类型下拉 -->
+		<u-select v-model="houseTypeShow" :list="houseTypeList" @confirm="houseTypeChange"/>
 	</view>
 </template>
 
@@ -69,18 +78,237 @@
 	export default {
 		data() {
 			return {
+				// 上传地址
+				action: this.config.uploadUrl,
 				form: {
-					name: '',
-					idNumber: '',
-					sex: '',
+					veteName: '',
+					veteIdCard: '',
+					veteSex: '',
 					national: '',
 					phoneNumber: '',
-					qqNumber: '',
-					wxNumber: ''
-				}
+					qqNum: '',
+					wxNum: '',
+					degrEduc: '',
+					degrEducId: '',
+					houseType: '',
+					houseTypeId:'',
+					politOutlook: '',
+					politOutlookId:'',
+					veteHousehRegi: '',
+					veteResiAddress: '',
+					veteDateBirth:'',
+					veteStatus: '1',
+					veteAttribute: '',
+					houseType: '',
+					houseTypeId: '',
+					veteDateBirth: '',
+					files: []
+				},
+				// 表单验证
+				rules: {
+					veteName: [
+						{ required: true, message: '请输入姓名', trigger: [ 'change', 'blur' ]}
+					],
+					veteIdCard: [
+						{ 
+							required: true,
+							pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
+							// 正则检验前先将值转为字符串
+							transform(value) {
+								return String(value);
+							},
+							message: '请正确输入身份证号',
+							trigger: ['change', 'blur']
+						}
+					],
+					vetePhone: [
+						{
+							pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+							message: '请正确输入手机号',
+							required: true,
+							trigger: ['change', 'blur'],
+						}
+					],
+					veteHousehRegi:[
+						{
+							required: true,
+							message: '请选择户籍',
+						}
+					],
+					veteResiAddress:[
+						{
+							required: true,
+							message: '请填写详细地址',
+						}
+					],
+					nation:[
+						{
+							required: true,
+							message: '请填写民族',
+						}
+					],
+					degrEduc:[
+						{
+							required: true,
+							message: '请选择文化程度',
+						}
+					],
+					politOutlook:[
+						{
+							required: true,
+							message: '请选择政治面貌',
+						}
+					],
+					houseType:[
+						{
+							required: true,
+							message: '请选择户籍类别',
+						}
+					]
+				},
+				// 文化程度
+				degrEducShow: false,
+				degrEducList: [],
+				// 政治面貌
+				politOutlookShow: false,
+				politOutlookList: [],
+				// 户籍地
+				regionShow: false,
+				// 户籍类型
+				houseTypeShow: false,
+				houseTypeList: []
 			}
 		},
+		onLoad() {
+			this.getVeteEducData();
+			this.getVeteDegrEduc();
+			this.getVetePolitOutlook();
+			this.getVeteHouseType();
+		},
+		onReady() {
+			this.$refs.uForm.setRules(this.rules);
+			this.form.vetePhone = this.vuex_user.mobile;
+		},
 		methods: {
+			/**
+			 * 获取已经提交的数据
+			 */
+			getVeteEducData(){
+				this.$u.api.getVeteEducData().then(res => {
+					if(res.code == 200){
+						for(let key  in res.data.veteEduc) {
+							if(key !== 'files'){
+								this.form[key] = res.data.veteEduc[key];
+							}
+						};
+						this.form.files = res.data.files;
+					}
+				});
+			},
+			/**
+			 * 获取文化程度类别
+			 */
+			getVeteDegrEduc(){
+				this.$u.api.getDictdataUrl({key:'degr_educ'}).then(res=>{
+					if(res.code == 200){						
+						this.degrEducList = res.data.map(item => {
+							return {
+								...item,
+								value: item.text
+							}
+						});
+					}
+				});
+			},
+			/**
+			 * 文化程度下拉变化
+			 */
+			degrEducChange(item) {
+				this.form.degrEduc = item[0].label
+				this.form.degrEducId = item[0].value
+			},
+			/**
+			 * 获取政治面貌类别
+			 */
+			getVetePolitOutlook(){
+				this.$u.api.getDictdataUrl({ key: 'polit_outlook' }).then(res => {
+					if(res.code == 200){						
+						this.politOutlookList = res.data;
+					}
+				});
+			},
+			/**
+			 * 政治面貌下拉改变
+			 */
+			politOutlookChange(item) {
+				this.form.politOutlook = item[0].label
+				this.form.politOutlookId = item[0].value
+			},
+			/**
+			 * 户籍地
+			 */
+			regionConfirm(e){
+				this.form.veteHousehRegi = `${e.province.label}-${e.city.label}-${e.area.label}`
+			},
+			/**
+			 * 获取户籍类别
+			 */
+			getVeteHouseType(){
+				this.$u.api.getDictdataUrl({ key:'house_type' }).then(res => {
+					if(res.code === 200){						
+						this.houseTypeList = res.data.map(item => {
+							return {
+								...item,
+								value: item.text
+							}
+						});
+					}
+				});
+			},
+			/**
+			 * 户籍类别下拉变化
+			 */
+			houseTypeChange(e){
+				this.form.houseType = e[0].label;
+				this.form.houseTypeId = e[0].value;
+			},
+			/**
+			 * @param { String } val
+			 */
+			idNumberChange(val) {
+				const reg =
+					/^\d{6}((?:19|20)((?:\d{2}(?:0[13578]|1[02])(?:0[1-9]|[12]\d|3[01]))|(?:\d{2}(?:0[13456789]|1[012])(?:0[1-9]|[12]\d|30))|(?:\d{2}02(?:0[1-9]|1\d|2[0-8]))|(?:(?:0[48]|[2468][048]|[13579][26])0229)))\d{2}(\d)[xX\d]$/
+				if (!reg.test(val)) {
+					return
+				}
+				// 根据身份证得出性别
+				this.form.veteSex = (parseInt(val.substr(16, 1)) % 2 === 1 ? '男' : '女');
+				// 设置出生日期
+				this.form.veteDateBirth = val.substring(6, 10) + "-" + val.substring(10, 12) + "-" + val.substring(12, 14) + ' 00:00:00';
+				// 根据身份证号获取基本信息
+				this.$u.api.getIdInfo({ id: this.form.veteIdCard }).then(res=>{
+					if (res.code === 200) {
+					  if (res.data) {
+					  	this.form.nation = res.data.nation;
+					  	this.form.veteName = res.data.veteName;
+					  	this.form.vetePhone = res.data.vetePhone;
+					  	this.form.veteResiAddress = res.data.veteResiAddress;
+					  }
+					} else{
+						uni.showToast({
+							icon: 'none',
+							title: res.msg
+						})
+					}
+				})
+			},
+			/**
+			 * 图片上传成功
+			 */
+			uploadSuccess(e) {
+				this.form.files = []
+				this.form.files.push({ filesType: 6, filesUrl: e.data.url})
+			},
 			/**
 			 * 拍照
 			 */
@@ -90,17 +318,55 @@
 					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
 					sourceType: ['camera'], //从相册选择
 					success: (res) => {
-							console.log(res);
+						console.log(res);
 					}
 				})
 			},
 			submit() {
-				this.$u.route('/pages/applyEducationCode/applyEducationSuccess')
+				this.$refs.uForm.validate(valid => {
+					if (valid) {
+						if (this.form.files.length < 1){
+							uni.showToast({
+							    title: '请上传所需图片',
+									icon:'none',
+							    duration: 2000
+							});
+						} else {
+							let params = {
+								veteEduc: {}
+							};
+							params.files = this.form.files
+							for(let key  in this.form) {
+								if (key !== 'files') {
+									params.veteEduc[key] = this.form[key];
+								}
+							};
+							params.veteEduc.veteSex = params.veteEduc.veteSex === '男' ? 1 : 0
+							this.$u.api.veteEduc(params).then(res => {
+								if (res.code === 200 ) {
+									uni.showToast({
+									    title: '提交成功,等待审核!',
+									    duration: 2000,
+											success: () => {
+												this.$u.route('/pages/applyEducationCode/applyEducationSuccess')
+											}
+									});
+								} else {
+									uni.showToast({
+									    title: res.msg,
+											icon:'none',
+									    duration: 2000
+									});
+								}
+							})
+						}
+					}
+				});
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-@import './applyEducationCode.scss';
+	@import './applyEducationCode.scss';
 </style>

+ 7 - 5
h5_web/pages/authentication/authentication.vue

@@ -314,11 +314,13 @@
 			  });
 			  this.$u.api.getIdInfo({id:this.form.veteIdCard}).then(res=>{
 				  uni.hideLoading();
-				  if(res.code==200){
-					  this.form.nation = res.data.nation;
-					  this.form.veteName = res.data.veteName;
-					  this.form.vetePhone = res.data.vetePhone;
-					  this.form.veteResiAddress = res.data.veteResiAddress;
+				  if(res.code === 200){
+					  if (res.data) {
+							this.form.nation = res.data.nation;
+							this.form.veteName = res.data.veteName;
+							this.form.vetePhone = res.data.vetePhone;
+							this.form.veteResiAddress = res.data.veteResiAddress;
+						}
 				  }else{
 					uni.showToast({
 						icon:'none',

+ 2 - 1
h5_web/pages/basicTraining/myBasicTraining/myBasicTraining.vue

@@ -11,7 +11,8 @@
 		</view>
 		<view class="course">
 			<view class="course-item u-flex u-row-between" 
-			v-for="(item,index) in onlineData" 
+			v-for="(item,index) in onlineData"
+			 :key="index"
 			:class="{ 'unstudy':item.flag == 0, 'studying':item.flag == 1, 'studyed':item.flag == 2 }"
 			@click="courseClick(item)">
 				<view class="left">

+ 10 - 5
h5_web/pages/businessDetails/businessDetails.scss

@@ -3,10 +3,16 @@
 	position: relative;
 	font-family: 'PingFangSC-Regular, PingFang SC';
 	background-color: #f2f2f2;
-	min-height: calc(190vh - 44px);
+	min-height: calc(100vh - 44px);
+	padding-bottom: 100rpx;
 	/* 背景 */
 	&-bg {
-		position: relative;
+		// position: relative;
+		height: 606rpx;
+		background-image: url(../../static/img/details-bg.png);
+		background-repeat: no-repeat;
+		background-position: center center;
+		background-size: cover;
 		&-1 {
 			height: 400rpx;
 			background: linear-gradient(#456553, #3D5D4C);
@@ -28,9 +34,7 @@
 	/* 内容 */
 	&-content {
 		width: 100%;
-		position: absolute;
-		top: 0;
-		left: 0;
+		margin-top: -606rpx;
 		text-align: center;
 		&-logo {
 			background-color: rgba(255, 255, 255, 0.3);
@@ -65,6 +69,7 @@
 			justify-content: space-between;
 			.left {
 				display: flex;
+				align-items: center;
 				.evaluate {
 					font-size: 26rpx;
 					color: #EF651F;

+ 2 - 2
h5_web/pages/businessDetails/businessDetails.vue

@@ -3,9 +3,9 @@
 	<view class="business-details">
 		<!-- 背景 -->
 		<view class="business-details-bg">
-			<view class="business-details-bg-1"></view>
+			<!-- <view class="business-details-bg-1"></view>
 			<view class="business-details-bg-2"></view>
-			<image src="../../static/img/company-details-bg-1.png" mode=""></image>
+			<image src="../../static/img/company-details-bg-1.png" mode=""></image> -->
 		</view>
 		
 		<!-- 内容 -->

+ 1 - 1
h5_web/pages/mine/mine.vue

@@ -9,7 +9,7 @@
 					<view class="user-info-left">
 						<view class="user-info-left-avatar" @click="jumpPage('/pages/personalModify/personalModify')">
 							<u-avatar :src="vuex_user.avatar" mode="square" size="111"></u-avatar>
-							<view class="name">{{ vuex_user.userName }}</view>
+							<view class="name">{{ vuex_user.name }}</view>
 						</view>
 						<view class="user-info-left-attribute">
 							<view class="veterans">

+ 1 - 1
h5_web/pages/phoneLogin/phoneLogin.vue

@@ -52,6 +52,7 @@ export default {
 	onLoad(page) {},
 	onShow() {
 		// 判断是否登录 已登录直接跳转首页
+		console.log(this.vuex_hasLogin)
 		if(this.vuex_hasLogin){
 			uni.switchTab({
 				url: '../index/index'
@@ -161,7 +162,6 @@ export default {
 		},
 		veteEducCheck(){
 			this.$u.api.getVeteEducCheck().then(res=>{
-				console.log('res',res);
 				if(res.data!=9){
 					this.jumpIndex();
 				}else{

+ 195 - 0
h5_web/pages/schoolDetails/schoolDetails.scss

@@ -0,0 +1,195 @@
+/* 学校详情 */
+.school-details {
+	min-height: calc(100vh - 88rpx);
+	background-color: #f2f2f2;
+	padding-bottom: 50rpx;
+	&-bg {
+		height: 606rpx;
+		background-image: url(../../static/img/details-bg.png);
+		background-repeat: no-repeat;
+		background-position: center center;
+		background-size: cover;
+	}
+	&-content {
+		margin: -606rpx auto 0;
+		text-align: center;
+		&-logo {
+			background-color: rgba(255, 255, 255, 0.3);
+			width: 156rpx;
+			height: 156rpx;
+			border-radius: 50%;
+			margin: 45rpx auto 25rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			image {
+				width: 139rpx;
+				height: 139rpx;
+				border-radius: 50%;
+			}
+		}
+		&-name {
+			font-family: 'PingFangSC-Heavy, PingFang SC';
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #fff;
+		}
+		&-evaluate {
+			width: calc(100% - 60rpx);
+			height: 64rpx;
+			line-height: 64rpx;
+			margin: 36rpx auto 63rpx;
+			background-color: rgba($color: #fff, $alpha: 0.8);
+			border-radius: 32rpx;
+			padding: 0 31rpx;
+			display: flex;
+			justify-content: space-between;
+			.left {
+				display: flex;
+				align-items: center;
+				.evaluate {
+					font-size: 26rpx;
+					color: #EF651F;
+					margin-right: 19rpx;
+				}
+				.describe {
+					font-size: 24rpx;
+					color: #000;
+					font-weight: 400;
+					margin-right: 14rpx;
+				}
+				.grade {
+					color: #EF651F;
+					margin-left: 14rpx;
+					font-weight: 400;
+				}
+			}
+			.right {
+				color: #666;
+				font-size: 24rpx;
+				.icon {
+					margin-left: 9rpx;
+				}
+			}
+		}
+		/* 学校信息 */
+		&-survey {
+			width: calc(100% - 60rpx);
+			margin: 0 auto;
+			background-color: #fff;
+			border-radius: 10rpx;
+			padding: 28rpx 33rpx;
+			text-align: left;
+			.title {
+				color: #000;
+				font-size: 32rpx;
+				font-weight: 400;
+				margin-bottom: 10rpx;
+			}
+			.item {
+				color: #545454;
+				font-size: 24rpx;
+				line-height: 48rpx;
+				.home {
+					display: flex;
+					justify-content: space-between;
+					text {
+						color: #EF651F;
+					}
+				}
+				.address {
+					display: flex;
+					justify-content: space-between;
+					image {
+						width: 20rpx;
+						height: 26rpx;
+						vertical-align: middle;
+						margin-right: 10rpx;
+					}
+					view:last-child {
+						color: #058fff;
+						margin-left: 60rpx;
+					}
+				}
+			}
+		}
+		
+		/* 公司介绍 */
+		&-introduce {
+			width: calc(100% - 60rpx);
+			margin: 20rpx auto 0;
+			background-color: #fff;
+			border-radius: 10rpx;
+			padding: 28rpx 33rpx;
+			text-align: left;
+			.title {
+				color: #000;
+				font-size: 32rpx;
+				font-weight: 400;
+				margin-bottom: 10rpx;
+			}
+			.content {
+				font-size: 24rpx;
+				color: #545454;
+				line-height: 40rpx;
+			}
+		}
+		
+		/* 公司相册 */
+		&-album {
+			width: calc(100% - 60rpx);
+			margin: 20rpx auto 0;
+			background-color: #fff;
+			border-radius: 10rpx;
+			padding: 28rpx 33rpx;
+			text-align: left;
+			.title {
+				color: #000;
+				font-size: 32rpx;
+				font-weight: 400;
+				margin-bottom: 20rpx;
+			}
+			.pic-list {
+				display: flex;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				&-item {
+					width: calc(50% - 8rpx);
+					margin-bottom: 8rpx;
+					image {
+						width: 100%;
+						height: 206rpx;
+						border-radius: 5rpx;
+					}
+				}
+			}
+		}
+		
+		/* 特色专业 */
+		&-major {
+			width: calc(100% - 60rpx);
+			margin: 20rpx auto 0;
+			background-color: #fff;
+			border-radius: 10rpx;
+			padding: 28rpx 33rpx;
+			text-align: left;
+			.title {
+				color: #000;
+				font-size: 32rpx;
+				font-weight: 400;
+				margin-bottom: 20rpx;
+			}
+			.major-list {
+				&-item {
+					display: flex;
+					justify-content: space-between;
+					border-bottom: dashed 1px #DBDBDB;
+					padding: 20rpx 0;
+					color: #545454;
+					font-size: 24rpx;
+					font-family: 'PingFangSC-Regular, PingFang SC';
+				}
+			}
+		}
+	}
+}

+ 106 - 5
h5_web/pages/schoolDetails/schoolDetails.vue

@@ -1,6 +1,99 @@
+<!-- 学校详情 -->
 <template>
-	<view>
-		
+	<view class="school-details">
+		<view class="school-details-bg"></view>
+		<view class="school-details-content">
+			<view class="school-details-content-logo">
+				<image src="../../static/img/avatar.jpg" mode=""></image>
+			</view>
+			<view class="school-details-content-name">贵州电子科技职业学院</view>
+			<view class="school-details-content-evaluate">
+				<view class="left">
+					<view class="evaluate">优秀</view>
+					<view class="describe">综合评分</view>
+					<view class="star">
+						<u-icon name="star-fill" color="#EF651F"></u-icon>
+						<u-icon name="star-fill" color="#EF651F"></u-icon>
+						<u-icon name="star-fill" color="#EF651F"></u-icon>
+						<u-icon name="star-fill" color="#EF651F"></u-icon>
+						<u-icon name="star-fill" color="#EF651F"></u-icon>
+					</view>
+					<view class="grade">4.8</view>
+				</view>
+				<view class="right">
+					详情
+					<u-icon class="icon" name="arrow-right" color="#666666"></u-icon>
+				</view>
+			</view>
+			<!-- 学校概况 -->
+			<view class="school-details-content-survey">
+				<view class="title">学校概况</view>
+				<view class="item">
+					<view>学校名称:贵州电子科技职业学院</view>
+					<view>学校性质:公办</view>
+					<view>培养方式:分段贯通、分类培养</view>
+					<view class="home">
+						<view>
+							学校主页:<text>http://www.gzdzxy.cn</text>
+						</view>
+						<view>
+							<u-icon name="arrow-right" color="#EF651F" size="24"/>
+						</view>
+					</view>
+					<view>招生邮箱:722899999@qq.com</view>
+					<view>联系人:陈老师、宁老师</view>
+					<view>联系电话:0851-8493208</view>
+					<view>地址:贵州省贵州贵安新区马场科技新城龙潭路1号</view>
+					<view class="address">
+						<view>
+							<image src="../../static/img/dingwei.png"/>
+							查看位置
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 学校信息 -->
+			<view class="school-details-content-introduce">
+				<view class="title">学校信息</view>
+				<view class="content">
+					贵州电子科技职业学院2016年3月经贵州省人民政府批准成立,隶属贵州贵安新区管委会,为全日制公办普通高职院校,以全日制高等教育为主,中等职业教育为辅,同时举办非学历教育。学院的前身是贵州省电子工业学校,始建于1979年,是一所以培养电子信息技术、机械加工和电气控制技术为主的国家级重点中等职业学校、国家中等职业教育改革发展示范学校。 学校位于国家级新区贵安新区马场科技新城,占地面积870亩,投资21.6亿元,建筑面积40万平方米,办学规模10000人。学校校园环境优美,生活便利,东邻“七星湖湿地公园”,南邻青山,西邻“富士康小镇”,北邻“011基地302医院”,隔路相邻“贵安新区电子信息产业园”、“贵安新区高端制造产业园”等西南地区产业企业集中的园区,是职业院校学习、实习及就业的典型优化模式。 学校首批开设 “电子信息工程技术”、“电气自动化技术”、“计算机网络技术”、“电信服务与管理”、“数控技术”、“汽车电子技术”、“软件技术”、“电子商务”等8个专业。现有贵安财政支持建设的020电商人才孵化基地,大数据实训室、计算机云计算实训室、虚拟现实体验中心。校内建设实训基地有:电工电子与自动化技术实训基地、电子技术应用实训基地、网络实训基地、广告制作实训基地等。实训仪器、设备台套数和设施工位充足、技术先进,能够满足目前开设的各专业实训教学计划培养目标的需求。
+				</view>
+			</view>
+			
+			<!-- 学校相册 -->
+			<view class="school-details-content-album">
+				<view class="title">学校相册</view>
+				<view class="pic-list">
+					<view
+						class="pic-list-item"
+						v-for="(item, index) in picList"
+						:key="index"
+					>
+						<image :src="item.url" mode=""></image>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 特色专业 -->
+			<view class="school-details-content-major">
+				<view class="title">特色专业</view>
+				<view class="major-list">
+					<view class="major-list-item">
+						<view>应用化工技术(专业代码:570201)</view>
+						<view>
+							<u-icon name="arrow-right"/>
+						</view>
+					</view>
+					<view class="major-list-item">
+						<view>应用化工技术(专业代码:570201)</view>
+						<view>
+							<u-icon name="arrow-right"/>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -8,7 +101,15 @@
 	export default {
 		data() {
 			return {
-				
+				// 学校相册
+				picList: [
+					{
+						url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5883681.s21i.faiusr.com%2F2%2FABUIABACGAAgpdOXrQUo6bG5wgYw9AM4uwI.jpg&refer=http%3A%2F%2F5883681.s21i.faiusr.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637389823&t=ae7d50157800667800f24911b60c4a3b'
+					},
+					{
+						url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg105.job1001.com%2Fupload%2Falbum%2F2015-01-09%2F1420776447-A8AMV7X_960_600.JPG&refer=http%3A%2F%2Fimg105.job1001.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637389823&t=b67bd35034b7a1f74dd4d453ecc24e4a'
+					}
+				],
 			}
 		},
 		methods: {
@@ -17,6 +118,6 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+@import './schoolDetails.scss';
 </style>

+ 63 - 0
h5_web/pages/schools/schools.scss

@@ -0,0 +1,63 @@
+/* 学院列表 */
+.school {
+	background-color: #f2f2f2;
+	min-height: calc(100vh - 44px);
+	
+	/* 搜索 */
+	&-search {
+		width: calc(100% - 60rpx);
+		margin: 0 auto;
+		padding: 29rpx 0;
+	}
+	
+	/* 列表 */
+	&-list {
+		&-item {
+			margin-bottom: 20rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			background-color: #fff;
+			border-radius: 10rpx;
+			padding: 40rpx 30rpx;
+			&-left {
+				display: flex;
+				align-items: center;
+				.image {
+					width: 98rpx;
+					height: 98rpx;
+					border: solid 1px #E0E0E0;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					margin-right: 22rpx;
+					image {
+						width: 78rpx;
+						height: 78rpx;
+					}
+				}
+				.title {
+					font-size: 22rpx;
+					color: #9B9B9B;
+					.name {
+						font-size: 32rpx;
+						color: #000;
+						margin-bottom: 18rpx;
+					}
+					.grade {
+						display: flex;
+						.icon {
+							margin-right: 84rpx;
+							.icon-img {
+								margin-right: 8rpx;
+							}
+						}
+					}
+				}
+			}
+			&-right {
+				color: #000000;
+			}
+		}
+	}
+}

+ 63 - 8
h5_web/pages/schools/schools.vue

@@ -1,13 +1,32 @@
 <!-- 学院列表 -->
 <template>
 	<view class="school">
-		<z-paging
-			ref="paging"
-			v-model="schoolList"
-			@query="queryList"
-		>
+		<z-paging ref="paging" v-model="schoolList" @query="queryList">
+			<!-- 搜索 -->
+			<view class="school-search" slot="top">
+				<u-search class="school-search-input" placeholder="请输入关键词" v-model="keyword" shape="square"
+					input-align="center" :show-action="false" bg-color="#ffffff" height="70" />
+			</view>
 			<view class="school-list">
-				
+				<view class="school-list-item" v-for="(item, index) in schoolList" :key="index" @click="jumpPage('/pages/schoolDetails/schoolDetails')">
+					<view class="school-list-item-left">
+						<view class="image">
+							<image :src="item.logo" mode=""></image>
+						</view>
+						<view class="title">
+							<view class="name">{{ item.schoolName }}</view>
+							<view class="grade">
+								<view class="icon">
+									<u-icon class="icon-img" name="star-fill" color="#EF651F" /> {{item.grade}}
+								</view>
+								<view>{{ item.content }}</view>
+							</view>
+						</view>
+					</view>
+					<view class="school-list-item-right">
+						<u-icon name="arrow-right" />
+					</view>
+				</view>
 			</view>
 		</z-paging>
 	</view>
@@ -18,6 +37,8 @@
 		name: 'Schools',
 		data() {
 			return {
+				// 搜索关键词
+				keyword: '',
 				// 学校列表
 				schoolList: []
 			}
@@ -28,8 +49,42 @@
 			 * @param { Number } pageSize
 			 */
 			queryList(pageNo, pageSize) {
-				
+				this.$refs.paging.complete([{
+						logo: require('../../static/img/avatar.jpg'),
+						schoolName: '贵阳护理职业学院',
+						grade: 3.5,
+						content: '20个专业 · 公办'
+					},
+					{
+						logo: require('../../static/img/avatar.jpg'),
+						schoolName: '贵阳护理职业学院',
+						grade: 3.5,
+						content: '20个专业 · 公办'
+					},
+					{
+						logo: require('../../static/img/avatar.jpg'),
+						schoolName: '贵阳护理职业学院',
+						grade: 3.5,
+						content: '20个专业 · 公办'
+					},
+					{
+						logo: require('../../static/img/avatar.jpg'),
+						schoolName: '贵阳护理职业学院',
+						grade: 3.5,
+						content: '20个专业 · 公办'
+					}
+				])
+			},
+			/**
+			 * @param { String } url
+			 */
+			jumpPage(url) {
+				this.$u.route(url)
 			}
 		}
 	}
-</script>
+</script>
+
+<style lang="scss" scoped>
+	@import './schools.scss';
+</style>

BIN
h5_web/static/img/details-bg.png


+ 25 - 0
h5_web/static/svg/details-bg.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="751px" height="606px" viewBox="0 0 751 606" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 5</title>
+    <defs>
+        <path d="M751,0 L751,567 L748.308,567 L750.012809,567.232059 C685.218336,589.868034 542.150292,605.681237 375.555473,605.995238 L370.5,606 C209.115998,606 69.170026,588.455102 0.01819265,567.186443 L0.01819265,567.186443 L0.369,567 L0,567 L0.0159621195,0 L751,0 Z" id="path-1"></path>
+        <linearGradient x1="76.8366238%" y1="12.5958034%" x2="19.3289804%" y2="86.9699101%" id="linearGradient-3">
+            <stop stop-color="#9AB29E" offset="0%"></stop>
+            <stop stop-color="#3D5D4C" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="76.8366238%" y1="20.154219%" x2="19.3289804%" y2="79.4992525%" id="linearGradient-4">
+            <stop stop-color="#9AB29E" offset="0%"></stop>
+            <stop stop-color="#3D5D4C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-5">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="形状结合" fill="#3D5D4C" xlink:href="#path-1"></use>
+            <path d="M448.033218,0.00543529365 C434.544519,28.5079481 427,60.3729157 427,94 C427,215.502645 525.497355,314 647,314 C684.188679,314 719.222206,304.772701 749.935989,288.482696 L751,0 L448.033218,0.00543529365 Z" id="路径" fill="url(#linearGradient-3)" opacity="0.200000003" mask="url(#mask-2)"></path>
+            <path d="M0.109392476,498.500273 C47.9709126,585.648583 126.815319,552.794508 236,552.794508 C349.076959,552.794508 462.772998,581.341572 508.828592,489.075591 C526.881582,452.908936 537,412.346722 537,369.5 C537,217.345551 409.401154,94 252,94 C142.744227,94 47.8474094,153.428731 0.0159621195,240.669993 L0.109392476,498.500273 Z" id="路径" fill="url(#linearGradient-4)" opacity="0.100000001" mask="url(#mask-2)"></path>
+        </g>
+    </g>
+</svg>