From eb218e9855eb25e3fc397ade1ef3926955413909 Mon Sep 17 00:00:00 2001
From: pfvgt5yqb <pfvgt5yqb@noreply.example.org>
Date: Fri, 28 Jun 2024 21:34:30 +0800
Subject: [PATCH] ADD file via upload

---
 add.html | 466 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 466 insertions(+)
 create mode 100644 add.html
diff --git a/add.html b/add.html
new file mode 100644
index 0000000..5909a90
--- /dev/null
+++ b/add.html
@@ -0,0 +1,466 @@
+
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+		<title>注册</title>
+		<!-- bootstrap样式，地图插件使用 -->
+		<link rel="stylesheet" href="../../css/bootstrap.min.css" />
+		<link rel="stylesheet" href="../../layui/css/layui.css">
+		<!-- 样式 -->
+		<link rel="stylesheet" href="../../css/style.css" />
+		<!-- 主题（主要颜色设置） -->
+		<link rel="stylesheet" href="../../css/theme.css" />
+		<!-- 通用的css -->
+		<link rel="stylesheet" href="../../css/common.css" />
+	</head>
+	<style>
+		html::after {
+			position: fixed;
+			top: 0;
+			right: 0;
+			left: 0;
+			bottom: 0;
+			content: '';
+			display: block;
+			background-attachment: fixed;
+			background-size: cover;
+			background-position: center;
+						z-index: -1;
+		}
+		#swiper {
+			overflow: hidden;
+			margin: 0 auto;
+		}
+		#swiper .layui-carousel-ind li {
+			width: 16px;
+			height: 16px;
+			border-width: 1px;
+			border-style: solid;
+			border-color: rgba(254, 190, 0, 1);
+			border-radius: 100px;
+			background-color: $template2.front.base.swiper.indicatorStyle.backgroundColor;
+			box-shadow: ;
+		}
+		#swiper .layui-carousel-ind li.layui-this {
+			width: 16px;
+			height: 16px;
+			border-width: 0;
+			border-style: ;
+			border-color: rgba(254, 190, 0, 1);
+			border-radius: 100px;
+			background-color: rgba(254, 190, 0, 1);
+			box-shadow: ;
+		}
+		
+		button, button:focus {
+			outline: none;
+		}
+		
+		.data-add-container .add .layui-select-title .layui-unselect {
+			padding: 0 12px;
+			height: 40px;
+			font-size: 14px;
+			color: #333;
+			border-radius: 4px;
+			border-width: 1px;
+			border-style: ;
+			border-color: $template2.front.add.select.borderColor;
+			background-color: #fff;
+			box-shadow: ;
+			text-align: left;
+		}
+		.data-add-container .add .layui-form-item {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.data-add-container .layui-form-pane .layui-form-item[pane] .layui-form-label {
+			margin: 0;
+			position: inherit;
+			background: transparent;
+			border: 0;
+		}
+		.data-add-container .add .layui-input-block {
+			margin: 0;
+			flex: 1;
+		}
+		.data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline {
+			margin: 0;
+			flex: 1;
+			display: flex;
+		}
+	</style>
+	<body style="background: #EEEEEE; ">
+
+
+		<div id="app">
+
+			<!--
+			<div class="layui-carousel" id="swiper">
+				<div carousel-item id="swiper-item">
+					<div v-for="(item,index) in swiperList" v-bind:key="index">
+						<img class="swiper-item" :src="item.img">
+					</div>
+				</div>
+			</div> -->
+			<div class="layui-carousel" id="swiper" :style='{"boxShadow":"","margin":"0 auto","borderColor":"rgba(0, 0, 0, 0.99)","borderRadius":"","borderWidth":"1","width":"100%","borderStyle":""}'>
+			  <div carousel-item id="swiper-item">
+				<div v-for="(item,index) in swiperList" :key="index">
+					<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
+				</div>
+			  </div>
+			</div>
+			<!-- 轮播图 -->
+
+			<div class="data-add-container" :style='{"padding":"20px","boxShadow":"","margin":"30px auto","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"0","borderStyle":""}'>
+
+				<form class="layui-form layui-form-pane add" lay-filter="myForm">
+					
+                                                            <div  :style='{"padding":"10px","boxShadow":"0 0 4px #febe00","margin":"0 0 10px 0","borderColor":"rgba(9, 249, 13, 0.99)","backgroundColor":"rgba(255, 255, 255, 255)","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":""}' class="layui-form-item" pane>
+						<label  :style='{"width":"100px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"center"}' class="layui-form-label">账号：</label>
+						<div class="layui-input-block">
+							<input :style='{"padding":"0 12px","boxShadow":"","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"","height":"40px"}' v-model="detail.zhanghao" type="text" :readonly="ro.zhanghao" name="zhanghao" id="zhanghao" autocomplete="off" class="layui-input">
+						</div>
+					</div>
+                                                                                <div  :style='{"padding":"10px","boxShadow":"0 0 4px #febe00","margin":"0 0 10px 0","borderColor":"rgba(9, 249, 13, 0.99)","backgroundColor":"rgba(255, 255, 255, 255)","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":""}' class="layui-form-item" pane>
+						<label  :style='{"width":"100px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"center"}' class="layui-form-label">密码：</label>
+						<div class="layui-input-block">
+							<input :style='{"padding":"0 12px","boxShadow":"","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"","height":"40px"}' v-model="detail.mima" type="text" :readonly="ro.mima" name="mima" id="mima" autocomplete="off" class="layui-input">
+						</div>
+					</div>
+                                                                                <div  :style='{"padding":"10px","boxShadow":"0 0 4px #febe00","margin":"0 0 10px 0","borderColor":"rgba(9, 249, 13, 0.99)","backgroundColor":"rgba(255, 255, 255, 255)","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":""}' class="layui-form-item" pane>
+						<label  :style='{"width":"100px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"center"}' class="layui-form-label">姓名：</label>
+						<div class="layui-input-block">
+							<input :style='{"padding":"0 12px","boxShadow":"","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"","height":"40px"}' v-model="detail.xingming" type="text" :readonly="ro.xingming" name="xingming" id="xingming" autocomplete="off" class="layui-input">
+						</div>
+					</div>
+                                                                                <div  :style='{"padding":"10px","boxShadow":"0 0 4px #febe00","margin":"0 0 10px 0","borderColor":"rgba(9, 249, 13, 0.99)","backgroundColor":"rgba(255, 255, 255, 255)","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":""}' class="layui-form-item" pane>
+						<label  :style='{"width":"100px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"center"}' class="layui-form-label">年龄：</label>
+						<div class="layui-input-block">
+							<input :style='{"padding":"0 12px","boxShadow":"","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"","height":"40px"}' v-model="detail.nianling" type="text" :readonly="ro.nianling" name="nianling" id="nianling" autocomplete="off" class="layui-input">
+						</div>
+					</div>
+                                                                                <div  :style='{"padding":"10px","boxShadow":"0 0 4px #febe00","margin":"0 0 10px 0","borderColor":"rgba(9, 249, 13, 0.99)","backgroundColor":"rgba(255, 255, 255, 255)","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":""}' class="layui-form-item" pane>
+                        <label  :style='{"width":"100px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"center"}' class="layui-form-label">性别：</label>
+                        <div class="layui-input-block">
+                            <select name="xingbie" id="xingbie" lay-filter="xingbie">
+                                <option value="">请选择</option>
+                                <option v-for="(item,index) in xingbie" v-bind:key="index" :value="item">{{item}}</option>
+                            </select>
+                        </div>
+                    </div>
+                                                                                <div  :style='{"padding":"10px","boxShadow":"0 0 4px #febe00","margin":"0 0 10px 0","borderColor":"rgba(9, 249, 13, 0.99)","backgroundColor":"rgba(255, 255, 255, 255)","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":""}' class="layui-form-item" pane>
+						<label  :style='{"width":"100px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"center"}' class="layui-form-label">手机：</label>
+						<div class="layui-input-block">
+							<input :style='{"padding":"0 12px","boxShadow":"","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"","height":"40px"}' v-model="detail.shouji" type="text" :readonly="ro.shouji" name="shouji" id="shouji" autocomplete="off" class="layui-input">
+						</div>
+					</div>
+                                                                                <div  :style='{"padding":"10px","boxShadow":"0 0 4px #febe00","margin":"0 0 10px 0","borderColor":"rgba(9, 249, 13, 0.99)","backgroundColor":"rgba(255, 255, 255, 255)","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":""}' class="layui-form-item" pane>
+						<label  :style='{"width":"100px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"center"}' class="layui-form-label">邮箱：</label>
+						<div class="layui-input-block">
+							<input :style='{"padding":"0 12px","boxShadow":"","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"14px","borderStyle":"","height":"40px"}' v-model="detail.youxiang" type="text" :readonly="ro.youxiang" name="youxiang" id="youxiang" autocomplete="off" class="layui-input">
+						</div>
+					</div>
+                                                                                <div :style='{"padding":"10px","boxShadow":"0 0 4px #febe00","margin":"0 0 10px 0","borderColor":"rgba(9, 249, 13, 0.99)","backgroundColor":"rgba(255, 255, 255, 255)","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":""}' class="layui-form-item" pane>
+						<label :style='{"width":"100px","padding":"0 12px 0 0","fontSize":"14px","color":"#333","textAlign":"center"}' class="layui-form-label">照片：</label>
+						<div class="layui-input-block">
+							<div v-if="detail.zhaopian" style="display:inline-block;margin-right:10px;">
+								<img id="zhaopianImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :src="detail.zhaopian">
+								<input type="hidden" :value="detail.zhaopian" id="zhaopian" name="zhaopian" />
+							</div>
+							<button v-if="!ro.zhaopian" :style='{"padding":"0 10px","boxShadow":"","margin":"0 10px 0 0","borderColor":"#ccc","backgroundColor":"rgba(0, 206, 209, 1)","color":"rgba(17, 1, 1, 1)","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"","height":"44px"}' type="button" class="layui-btn btn-theme" id="zhaopianUpload">
+								<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"15px"}' class="layui-icon">&#xe67c;</i>上传照片
+							</button>
+						</div>
+					</div>
+                                                            
+                                                                                                                                                                                                                                                                                                                                                    
+					<div  :style='{"padding":"10px","boxShadow":"0 0 4px #febe00","margin":"0 0 10px 0","borderColor":"rgba(9, 249, 13, 0.99)","backgroundColor":"rgba(255, 255, 255, 255)","borderRadius":"4px","borderWidth":"0 0 1px 0","borderStyle":""}' class="layui-form-item">
+						<div class="layui-input-block" style="text-align: right;">
+							<button :style='{"padding":"0 10px","boxShadow":"","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(254, 190, 0, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"15%","fontSize":"15px","borderStyle":"","height":"44px"}' class="layui-btn btn-submit" lay-submit lay-filter="*">提交</button>
+							<button :style='{"padding":"0 10px","boxShadow":"","margin":"0 10px","borderColor":"rgba(118, 67, 6, 1)","backgroundColor":"#fff","color":"rgba(118, 67, 6, 1)","borderRadius":"8px","borderWidth":"1px","width":"15%","fontSize":"15px","borderStyle":"","height":"44px"}' type="reset" class="layui-btn layui-btn-primary">重置</button>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+
+		<script src="../../layui/layui.js"></script>
+		<script src="../../js/vue.js"></script>
+		<!-- 组件配置信息 -->
+		<script src="../../js/config.js"></script>
+		<!-- 扩展插件配置信息 -->
+		<script src="../../modules/config.js"></script>
+		<!-- 工具方法 -->
+		<script src="../../js/utils.js"></script>
+		<!-- 校验格式工具类 -->
+		<script src="../../js/validate.js"></script>
+		<!-- 地图 -->
+		<script type="text/javascript" src="../../js/jquery.js"></script>
+		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
+		<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
+		<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>
+
+		<script>
+			var jquery = $;
+			
+			var vue = new Vue({
+				el: '#app',
+				data: {
+					// 轮播图
+					swiperList: [{
+						img: '../../img/banner.jpg'
+					}],
+					dataList: [],
+      					ro:{
+				        zhanghao : false,
+				        mima : false,
+				        xingming : false,
+				        nianling : false,
+				        xingbie : false,
+				        shouji : false,
+				        youxiang : false,
+				        zhaopian : false,
+              				},
+                    detail: {
+                                                                        zhanghao: '',
+                                                                                                mima: '',
+                                                                                                xingming: '',
+                                                                                                nianling: '',
+                                                                                                xingbie: '',
+                                                                                                shouji: '',
+                                                                                                youxiang: '',
+                                                                                                zhaopian: '',
+                                                                    },
+                    																																																		xingbie: [],
+																																													centerMenu: centerMenu
+				},
+				updated: function() {
+					layui.form.render('select', 'myForm');
+				},
+                computed: {
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    },
+				methods: {
+					jump(url) {
+						jump(url)
+					}
+				}
+			})
+
+			
+			layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate','tinymce'], function() {
+				var layer = layui.layer;
+				var element = layui.element;
+				var carousel = layui.carousel;
+				var http = layui.http;
+				var jquery = layui.jquery;
+				var form = layui.form;
+				var upload = layui.upload;
+				var laydate = layui.laydate;
+                var tinymce = layui.tinymce
+
+				// 获取轮播图 数据
+				http.request('config/list', 'get', {
+					page: 1,
+					limit: 5
+				}, function(res) {
+					if (res.data.list.length > 0) {
+						var swiperItemHtml = '';
+						for (let item of res.data.list) {
+							if (item.name.indexOf('picture') >= 0 && item.value && item.value != "" && item.value != null) {
+								swiperItemHtml +=
+									'<div>' +
+									'<img style="width: 100%;height: 100%;object-fit:cover;" class="swiper-item" src="' + item.value + '">' +
+									'</div>';
+							}
+						}
+						jquery('#swiper-item').html(swiperItemHtml);
+						// 轮播图
+						vue.$nextTick(() => {
+						  carousel.render({
+						  	elem: '#swiper',
+							width: '100%',
+						  	height: '500px',
+						  	arrow: 'hover',
+						  	anim: 'default',
+						  	autoplay: 'true',
+						  	interval: '3000',
+						  	indicator: 'inside'
+						  });
+						
+						})
+						// carousel.render({
+						// 	elem: '#swiper',
+						// 	width: swiper.width,height:swiper.height,
+						// 	arrow: swiper.arrow,
+						// 	anim: swiper.anim,
+						// 	interval: swiper.interval,
+						// 	indicator: "none"
+						// });
+					}
+				});
+
+                																																								vue.xingbie = '男,女'.split(',')
+																																// 上传图片
+				var zhaopianUpload = upload.render({
+					//绑定元素
+					elem: '#zhaopianUpload',
+					//上传接口
+					url: http.baseurl + 'file/upload',
+					// 请求头
+					headers: {
+						Token: localStorage.getItem('Token')
+					},
+					// 允许上传时校验的文件类型
+					accept: 'images',
+					before: function() {
+						//loading层
+						var index = layer.load(1, {
+							shade: [0.1, '#fff'] //0.1透明度的白色背景
+						});
+					},
+					// 上传成功
+					done: function(res) {
+						console.log(res);
+						layer.closeAll();
+						if (res.code == 0) {
+							layer.msg("上传成功", {
+								time: 2000,
+								icon: 6
+							})
+							var url = http.baseurl + 'upload/' + res.file;
+							jquery('#zhaopian').val(url);
+							jquery('#zhaopianImg').attr('src', url)
+                            vue.detail.zhaopian = url;
+						} else {
+							layer.msg(res.msg, {
+								time: 2000,
+								icon: 5
+							})
+						}
+					},
+					//请求异常回调
+					error: function() {
+						layer.closeAll();
+						layer.msg("请求接口异常", {
+							time: 2000,
+							icon: 5
+						})
+					}
+				});
+												
+                // session独取
+				let table = localStorage.getItem("userTable");
+				http.request(`${table}/session`, 'get', {}, function(data) {
+					// 表单赋值
+					//form.val("myForm", data.data);
+					data = data.data
+					for (var key in data){
+                                        }
+				});
+
+                // 跨表
+                if(http.getParam('corss')){
+					var obj = JSON.parse(localStorage.getItem('crossObj'));
+					for (var o in obj){
+					if(o=='zhanghao'){
+          	                                vue.detail[o] = obj[o];
+						vue.ro.zhanghao = true;
+						continue;
+                                        }
+					if(o=='mima'){
+          	                                vue.detail[o] = obj[o];
+						vue.ro.mima = true;
+						continue;
+                                        }
+					if(o=='xingming'){
+          	                                vue.detail[o] = obj[o];
+						vue.ro.xingming = true;
+						continue;
+                                        }
+					if(o=='nianling'){
+          	                                vue.detail[o] = obj[o];
+						vue.ro.nianling = true;
+						continue;
+                                        }
+					if(o=='xingbie'){
+          	                                vue.detail[o] = obj[o];
+						vue.ro.xingbie = true;
+						continue;
+                                        }
+					if(o=='shouji'){
+          	                                vue.detail[o] = obj[o];
+						vue.ro.shouji = true;
+						continue;
+                                        }
+					if(o=='youxiang'){
+          	                                vue.detail[o] = obj[o];
+						vue.ro.youxiang = true;
+						continue;
+                                        }
+					if(o=='zhaopian'){
+          	                                vue.detail[o] = obj[o];
+						vue.ro.zhaopian = true;
+						continue;
+                                        }
+                                        }
+				}
+				
+
+				// 提交
+				form.on('submit(*)', function(data) {
+					data = data.field;
+					
+                    // 数据校验
+                    if(!data.zhanghao){
+                        layer.msg('账号不能为空', {
+							time: 2000,
+							icon: 5
+						});
+                        return false
+                    }
+                                                                                                                                                                                                        if(!data.mima){
+                        layer.msg('密码不能为空', {
+							time: 2000,
+							icon: 5
+						});
+                        return false
+                    }
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    if(!isMobile(data.shouji)){
+                        layer.msg('手机应输入手机格式', {
+							time: 2000,
+							icon: 5
+						});
+                        return false
+                    }
+                                                                                                                                                                                                                                                if(!isEmail(data.youxiang)){
+                        layer.msg('邮箱应输入邮箱格式', {
+							time: 2000,
+							icon: 5
+						});
+                        return false
+                    }
+                                                                                                                                                                                                                                                
+					// 跨表计算
+					                                                                                                                                                                                                                                                                                                                                					
+                    // 比较大小
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            					
+					// 提交数据
+					http.requestJson('caipanyuan' + '/add', 'post', data, function(res) {
+					 	layer.msg('提交成功', {
+					 		time: 2000,
+					 		icon: 6
+					 	}, function() {
+					 		back();
+						});
+					 });
+
+					return false
+				});
+
+			});
+		</script>
+	</body>
+</html>
