Skip to content

Q
qsh-wc
Commit ed1c0ced authored by mahui's avatar mahui
Browse files
Options

init

parent 5be6e12e
Show whitespace changes
Inline Side-by-side
Showing with 668 additions and 2 deletions
web/src/components/input/formValid.js 0 → 100644
View file @ ed1c0ced
export default {
data() {
return {
isValid: true
}
},
methods: {
// 构造函数，变量为15位或者18位的身份证号码
clsIDCard() {
let Valid = false;
let ID15 = '';
let ID18 = '';
let Local = '';
let pattern;
const iDCard = {
// 设置身份证号码，15位或者18位
SetCardNo(CardNo) {
ID15 = '';
ID18 = '';
Local = '';
CardNo = CardNo.replace(" ", "");
let strCardNo;
if (CardNo.length == 18) {
pattern = /^\d{17}(\d|x|X)$/;
if (pattern.exec(CardNo) == null) return false;
strCardNo = CardNo.toUpperCase();
} else {
pattern = /^\d{15}$/;
if (pattern.exec(CardNo) == null) return false;
strCardNo = CardNo.substr(0, 6) + '19' + CardNo.substr(6, 9)
strCardNo += this.GetVCode(strCardNo);
}
Valid = this.CheckValid(strCardNo);
return Valid;
},
// 校验身份证有效性
IsValid() {
return Valid;
},
// 返回生日字符串，格式如下，1981-10-10
GetBirthDate(CardNo) {
let BirthDate = '';
if (Valid) BirthDate = this.GetBirthYear(CardNo) + '-' + this.GetBirthMonth(CardNo) + '-' + this.GetBirthDay(CardNo);
return BirthDate;
},
// 返回生日中的年，格式如下，1981
GetBirthYear(CardNo) {
let BirthYear = '';
if (Valid) BirthYear = CardNo.substr(6, 4);
return BirthYear;
},
// 返回生日中的月，格式如下，10
GetBirthMonth(CardNo) {
let BirthMonth = '';
if (Valid) BirthMonth = CardNo.substr(10, 2);
if (BirthMonth.charAt(0) == '0') BirthMonth = BirthMonth.charAt(1);
return BirthMonth;
},
// 返回生日中的日，格式如下，10
GetBirthDay(CardNo) {
let BirthDay = '';
if (Valid) BirthDay = CardNo.substr(12, 2);
return BirthDay;
},
// 返回性别，1：男，0：女
GetSex(CardNo) {
let Sex = '';
if (Valid) Sex = CardNo.charAt(16) % 2;
return Sex;
},
// 返回15位身份证号码
Get15() {
let ID15 = '';
if (Valid) ID15 = ID15;
return ID15;
},
// 返回18位身份证号码
Get18() {
let ID18 = '';
if (Valid) ID18 = ID18;
return ID18;
},
// 返回所在省，例如：上海市、浙江省
GetLocal() {
let Local = '';
if (Valid) Local = Local;
return Local;
},
GetVCode(CardNo17) {
let Wi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1);
let Ai = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
let cardNoSum = 0;
for (let i = 0; i < CardNo17.length; i++) cardNoSum += CardNo17.charAt(i) * Wi[i];
let seq = cardNoSum % 11;
return Ai[seq];
},
CheckValid(CardNo18) {
if (this.GetVCode(CardNo18.substr(0, 17)) != CardNo18.charAt(17)) return false;
if (!this.IsDate(CardNo18.substr(6, 8))) return false;
let aCity = {
11: "北京",
12: "天津",
13: "河北",
14: "山西",
15: "内蒙古",
21: "辽宁",
22: "吉林",
23: "黑龙江 ",
31: "上海",
32: "江苏",
33: "浙江",
34: "安徽",
35: "福建",
36: "江西",
37: "山东",
41: "河南",
42: "湖北 ",
43: "湖南",
44: "广东",
45: "广西",
46: "海南",
50: "重庆",
51: "四川",
52: "贵州",
53: "云南",
54: "西藏 ",
61: "陕西",
62: "甘肃",
63: "青海",
64: "宁夏",
65: "新疆",
71: "台湾",
81: "香港",
82: "澳门",
91: "国外"
};
if (aCity[parseInt(CardNo18.substr(0, 2))] == null) return false;
ID18 = CardNo18;
ID15 = CardNo18.substr(0, 6) + CardNo18.substr(8, 9);
Local = aCity[parseInt(CardNo18.substr(0, 2))];
return true;
},
IsDate(strDate) {
let r = strDate.match(/^(\d{1,4})(\d{1,2})(\d{1,2})$/);
if (r == null) return false;
let d = new Date(r[1], r[2] - 1, r[3]);
return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[2] && d.getDate() == r[3]);
}
}
return iDCard;
},
validCard(idCard) {
if (!this.clsIDCard().SetCardNo(idCard)) {
this.$message({message: "输入的身份证号无效,请输入真实的身份证号！", type: 'warning'});
this.isValid = false;
return false;
} else {
this.isValid = true;
return true;
}
},
validEmail(obj) {
//对电子邮件的验证
let myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if (!myreg.test(obj)) {
this.isValid = false;
this.$message({message: '请输入有效的邮箱！', type: 'warning'});
return false;
} else {
this.isValid = true;
return true;
}
},
validMobile(mobile) {
let myreg = /^(((13[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))+\d{8})$/;
if (!myreg.test(mobile)) {
this.isValid = false;
this.$message({message: '请输入有效的11位手机号码！', type: 'warning'});
return false;
} else {
this.isValid = true;
return true;
}
}
}
}
web/src/components/input/new-input.vue 0 → 100644
View file @ ed1c0ced
<template>
<div class="new-input">
<input @compositionstart="handleCompositionStart"
@compositionend="handleCompositionEnd" class="input" :readonly="disabled" ref="input" :class="{isValid:!isValid}" v-model="value" @input="input" :placeholder="placeholder" @change="change" @blur="change" :maxlength="maxLength"/>
<p v-show="!isValid" :class="type"></p>
</div>
</template>
<script>
import form_valid from './formValid'
export default {
name: "new-input",
emits:["update:modelValue","change","input"],
mixins: [form_valid],
props: {
placeholder: {
type: String,
default: '请输入内容'
},
modelValue: {
type: [String,Number]
},
type: {
type: String,
default: 'text'
},
disabled: {
type: Boolean,
default: false
},
maxLength: {
type: [Number],
default: 200
}
},
data(){
return {
value:'',
isComposing:false
}
},
watch:{
modelValue:{
handler(val){
this.value = val;
},
immediate:true
}
},
mounted() {
this.isValid = true;
},
methods: {
handleCompositionStart() {
this.isComposing = true;
},
handleCompositionEnd(event) {
this.isComposing = false;
this.input(event)
},
input(e) {
if(this.isComposing) return;
if (this.type == 'number') {
e.target.value = /^-?\d*|^\d*/.exec(e.target.value)[0];
e.target.value = e.target.value?Number(e.target.value):0;
}
this.$emit('update:modelValue',e.target.value);
},
change(e) {
if(this.isComposing) return;
let val = e.target.value;
if (this.type == 'email' && !this.validEmail(val)) {
return false;
} else if (this.type == 'telephone' && !this.validMobile(val)) {
return false;
} else if (this.type == 'IDCard' && !this.validCard(val)) {
return false;
}
this.input(e);
return true;
},
}
}
</script>
<style scoped lang="scss">
.new-input{
width: 100%;
display: flex;
flex-direction: column;
min-height: .36rem;
.input{
flex: 1;
position: relative;
display: block;
resize: vertical;
padding: 5px 11px;
line-height: 1.5;
box-sizing: border-box;
width: 100%;
font-family: inherit;
color: #606266;
background-color: #fff;
background-image: none;
-webkit-appearance: none;
box-shadow: 0 0 0 1px #dcdfe6 inset;
border-radius: 4px;
transition: color .2s cubic-bezier(0.645, 0.045, 0.355, 1);
border: none;
}
.input::placeholder{
color: #dad8d9;
}
.input:hover{
box-shadow: 0 0 0 1px #c0c4cc inset;
}
.input:focus{
outline: 0;
box-shadow: 0 0 0 1px #4d70ff inset;
}
.isValid{
box-shadow: 0 0 0 1px red inset !important;
}
.email::before{
content:'请输入有效的邮箱！';
position: absolute;
bottom: -25px;
color:red;
font-size: 12px;
}
.telephone::before{
content:'请输入有效的手机号！';
position: absolute;
bottom: -25px;
color:red;
font-size: 12px;
}
.IDCard::before{
content:'请输入有效的身份证号！';
position: absolute;
bottom: -25px;
color:red;
font-size: 12px;
}
}
</style>
web/src/components/upload.vue 0 → 100644
View file @ ed1c0ced
<template>
<div class="taxi-uploader">
<div class="img-box">
<photo-provider v-if="accept=='image/*'">
<photo-consumer v-for="(url,index) in fileList" :key="url" :src="url">
<p v-if="url" class="img-one view-box" :style="`background:url('${url}') center/80px no-repeat`">
<span class="img-delete el-icon-error" @click.stop="imgDelete(index)" v-show="!disabled"></span>
</p>
</photo-consumer>
</photo-provider>
<div class="video" v-if="accept=='video/mp4'">
<div class="video-one" v-for="(url,index) in fileList">
<video class="video" :src="url" controls @canplay="canplay"></video>
<span class="video-delete el-icon-error" @click.stop="imgDelete(index)" v-show="!disabled"></span>
</div>
</div>
<div class="upload-right" v-show="!disabled&&(fileList.length==0&&!multiply || multiply)">
<div class="upload-icon el-icon-plus" :class="{click:!disabled}">
<input :disabled="disabled" class="upload" type="file" :multiple="multiply" :accept="accept" @change="upload_file" />
</div>
<p class="tip" v-show="tip">{{tip}}</p>
</div>
</div>
</div>
</template>
<script>
import {defineComponent,onMounted,ref} from "vue"
import service from '@/utils/request'
import axios from 'axios'
import {useUserStore} from "@/pinia/modules/user"
import {ElMessage} from "element-plus"
export default defineComponent({
name: "taxi-upload",
emits: ["upload","duration"],
props: {
list: {
type: Array,
default() {
return []
}
},
disabled: {
type: Boolean,
default:false
},
multiply:{
type: Boolean,
default:false
},
limit:{
type: Number,
default:1
},
accept:{
type:String,
default:"image/*"
},
tip:{
type:String,
default:""
}
},
setup(props, {emit}) {
const fileList = ref([]);
const store = useUserStore();
function upload_file(e) {
if(fileList.value.length>=props.limit){
return ElMessage({
message:`超过上传限制${props.limit}个`
});
}
upload_file_opt(e.target.files, props,(data)=> {
if(props.multiply){
for (let i of data){
fileList.value.push(i.url);
}
}else{
fileList.value = [data[0].url];
}
emit('upload', fileList.value);
})
}
function imgDelete(index) {
fileList.value.splice(index,1);
emit('upload', fileList.value);
}
function canplay(e){
emit('duration',e.target.duration)
}
async function upload_file_opt(fileList,props,callBack){
let uploadList=[];
let len = props.multiply?props.limit-props.list.length:1;
for(let file of fileList){
if(len-uploadList.length>0){
let data = await dealFile(file,props);
if(data.url){
uploadList.push(data);
}
if(uploadList.length==fileList.length){
callBack(uploadList);
uploadList = [];
}
}
if(len-uploadList.length==0){
callBack(uploadList);
uploadList = [];
break;
}
}
}
async function dealFile(file,props){
if(file.type.indexOf('image')>=0&&props.accept=='image/*'||file.type.indexOf('video')>=0&&props.accept=='video/mp4'){
let expire = sessionStorage.getItem('oss-expire');
if(!store.ossInfo.dir||(Number(expire) < Date.now()/1000 + 3||!store.ossInfo.expire)){
await getOssConfig();
}
console.log('store.ossInfo',store.ossInfo)
let formData = new FormData();
let fileName = '',FILEURL='';
if (file.name != '') {
fileName = set_file_name(file.name);
}
FILEURL = store.ossInfo.dir + '/' + encodeURIComponent(fileName);
formData.append("key", FILEURL);
formData.append("policy", store.ossInfo.policy);
formData.append("OSSAccessKeyId", store.ossInfo.accessid);
formData.append("success_action_status", '200');
formData.append("signature", store.ossInfo.signature);
formData.append("file", file);
return axios({
method: "post",
url: store.ossInfo.host,
data: formData,
headers: {
"Content-Type": "multipart/form-data"
},
//原生获取上传进度的事件
onUploadProgress:(progressEvent)=>{
let complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%';
// console.log('上传 ' + complete);
ElMessage.closeAll();
ElMessage({
message:`上传中...${complete}`,
type:'info'
})
}
}).then((res)=>{
// console.log('res',res);
if (res.status == 200){
let type=''
if(file.type.indexOf('image')!=-1){
type=1
}else if(file.type.indexOf('application')!=-1||file.type.indexOf('text')!=-1){
type=3
}else{
type=100
}
let params={
name:fileName,
url:"https:"+store.ossInfo.host+"/"+FILEURL,
type:type,
size:file.size,
ext:fileName.substring(fileName.lastIndexOf('.')),
object_name:FILEURL
};
return new Promise((resolve, reject)=>{
resolve(params);
})
}
});
}else{
}
}
function set_file_name(filename) {
let pos = filename.lastIndexOf('.');
let suffix = '';
if (pos != -1) {
suffix = filename.substring(pos);
}
let random = Date.now() + "_" + random_string(10);
return random + suffix;
}
// 设置随机数
function random_string(len) {
let lens = len || 32;
let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
let maxPos = chars.length;
let pwd = '';
for (let i = 0; i < lens; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
async function getOssConfig() {
const res = await service({
url: '/web/oss/getOssConfig',
method: 'post',
data:{}
});
if(res.code==0){
store.setOssInfo(res.data);
sessionStorage.setItem('oss-expire',res.data.expire);
}
return new Promise(resolve => {
resolve(true);
})
}
onMounted(()=>{
props.list.forEach((url)=>{
if(url){
fileList.value.push(url);
}
});
});
return {
fileList,
imgDelete,
upload_file,
canplay
}
}
})
</script>
<style scoped lang="scss">
.taxi-uploader{
width: 100%;
min-height: 50px;
.img-box{
display: flex;
flex-wrap: wrap;
.img-one{
position: relative;
width:70px;
height:70px;
border:1px solid #f7f8fa;
margin-right: 8px;
margin-bottom: 16px;
cursor: pointer;
.img-delete{
position: absolute;
top: -7px;
right: -7px;
overflow: hidden;
cursor: pointer;
&:active{
opacity: .8;
}
}
}
.video-one{
position: relative;
cursor: pointer;
display: flex;
align-items: baseline;
margin-right: 20px;
.video{
width:300px;
height:200px;
}
.video-delete{
position: absolute;
top: -10px;
right: -10px;
overflow: hidden;
cursor: pointer;
&:active{
opacity: .8;
}
}
}
.click{
cursor: pointer;
}
.upload-right{
display: inline-flex;
align-items: center;
.upload-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width:70px;
height:70px;
color: #dcdee0;
background-color: #f7f8fa;
border-radius: 4px;
font-size: 24px;
margin-bottom: 16px;
&:active{
background-color: #f2f3f5;
}
.upload{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
}
.tip{
display: inline-flex;
align-items: center;
color: #aaa;
margin-left: 20px;
}
}
}
}
</style>
web/src/main.js
View file @ ed1c0ced
......@@ -11,6 +11,8 @@ import '@/permission'
import run from '@/core/gin-vue-admin.js'
import auth from '@/directive/auth'
import { store } from '@/pinia'
import upload from "@/components/upload.vue"
import newInput from "@/components/input/new-input.vue"
import App from './App.vue'
const app = createApp(App)
app.config.productionTip = false
......@@ -21,6 +23,8 @@ app
.use(auth)
.use(router)
.use(ElementPlus, { locale: zhCn })
.component('new-upload',upload)
.component('new-input',newInput)
.mount('#app')
export default app
web/src/pinia/modules/user.js
View file @ ed1c0ced
......@@ -8,7 +8,19 @@ import { useRouterStore } from './router'
export const useUserStore = defineStore('user', () => {
const loadingInstance = ref(null)
const ossInfo = ref({
"accessid": "",
"host": "",
"expire": Date.now(),
"signature": "",
"policy": "",
"dir": "",
"callback": ""
});
const app = ref({
firstGo:0,
message:'',
});
const userInfo = ref({
uuid: '',
nickName: '',
......@@ -22,7 +34,9 @@ export const useUserStore = defineStore('user', () => {
const setUserInfo = (val) => {
userInfo.value = val
}
const setOssInfo = (val) => {
ossInfo.value = val
}
const setToken = (val) => {
token.value = val
}
......@@ -134,6 +148,9 @@ export const useUserStore = defineStore('user', () => {
})
return {
ossInfo,
app,
setOssInfo,
userInfo,
token,
NeedInit,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment