Forráskód Böngészése

layer等组件层级修改

ming 3 éve
szülő
commit
3689682acc

+ 2 - 2
common/variable.scss

@@ -18,8 +18,8 @@ page {
 	--tighten-gutter: 20rpx;
 	--gutter-v: 			20rpx;
 
-	--title-size: 		17px;
-	--content-size: 	15px;
+	--title-size: 		16px;
+	--content-size: 	14px;
 	--sub-size: 			13px;
 
 	--radius: 				12rpx;

+ 2 - 2
components/fs-fab/fs-fab.vue

@@ -75,7 +75,7 @@ defineExpose({
 	&-btn{
 		position: fixed;
 		margin-bottom: var(--window-bottom);
-		z-index: 1000;
+		z-index: 900;
 	}
 	
 	&-plus{
@@ -101,7 +101,7 @@ defineExpose({
 	&-scale{
 		transform: translateY(0);
 		opacity: 1;
-		z-index: 1000;
+		z-index: 900;
 	}
 }
 </style>

+ 0 - 1
components/fs-icon/fs-icon.vue

@@ -66,7 +66,6 @@ const handleClick = () => {
 .fsfont{
   display: inline-block;
   vertical-align: middle;
-  line-height: 1;
 }
 </style>
 

+ 11 - 3
components/fs-icon/icon.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "fsfont"; /* Project id 2762084 */
-  src: url('//at.alicdn.com/t/font_2762084_ir6gm0rxcw.woff2?t=1641375683419') format('woff2'),
-       url('//at.alicdn.com/t/font_2762084_ir6gm0rxcw.woff?t=1641375683419') format('woff'),
-       url('//at.alicdn.com/t/font_2762084_ir6gm0rxcw.ttf?t=1641375683419') format('truetype');
+  src: url('//at.alicdn.com/t/font_2762084_8ff6u2lj5o.woff2?t=1641896275751') format('woff2'),
+       url('//at.alicdn.com/t/font_2762084_8ff6u2lj5o.woff?t=1641896275751') format('woff'),
+       url('//at.alicdn.com/t/font_2762084_8ff6u2lj5o.ttf?t=1641896275751') format('truetype');
 }
 
 .fsfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-setting:before {
+  content: "\e78e";
+}
+
+.icon-auth:before {
+  content: "\e636";
+}
+
 .icon-minus:before {
   content: "\e7fd";
 }

+ 1 - 1
components/fs-index-list/fs-index-list.vue

@@ -133,7 +133,7 @@ const handleRoute = (item) => {
 	top: 50%;
 	right: 0;
 	align-items: center;
-	z-index: 1000;
+	z-index: 900;
 	transform: translateY(-50%);
 	
 	&-item {

+ 1 - 2
components/fs-mask/fs-mask.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 	modelValue: Boolean,
 	zIndex: {
 		type: Number,
-		default: 999
+		default: 899
 	},
 	maskClickable: {
 		type: Boolean,
@@ -32,6 +32,5 @@ const handleMask = () => {
 	bottom: var(--window-bottom);
 	left: 0;
 	background-color: rgba(0, 0, 0, 0.5);
-	z-index: 999;
 }
 </style>

+ 1 - 1
components/fs-message/fs-message.vue

@@ -100,7 +100,7 @@ defineExpose({
 	transition: all .1s;
 	transform: translateY(-100%);
 	text-align: center;
-	z-index: 1000;
+	z-index: 900;
 }
 .show{
   transform: translateY(0);

+ 1 - 1
components/fs-modal/fs-modal.vue

@@ -116,7 +116,7 @@ const handleConfirm = () => {
 	&-box {
 		position: fixed;
 		background-color: #fff;
-		z-index: 1000;
+		z-index: 900;
 		transition: all .2s;
 		top: 50%;
 		left: 50%;

+ 1 - 1
components/fs-popup/fs-popup.vue

@@ -65,7 +65,7 @@ const handleClose = () => {
 	&-drawer{
 		position: fixed;
 		background-color: #fff;
-		z-index: 1000;
+		z-index: 900;
 		transition: all .3s;
 		overflow: auto;
 	}

+ 4 - 1
components/fs-switch/fs-switch.vue

@@ -13,7 +13,10 @@
 const props = defineProps({
 	checked: Boolean,
 	disabled: Boolean,
-	color: String,
+	color: {
+		type: String,
+		default: '#0063F5'
+	},
 	size: {
 		type: String,
 		validator(value) {

+ 1 - 1
modules/common/address/list.vue

@@ -11,7 +11,7 @@
 						<fs-radio-group v-model="item.default" v-if="item.default == 1">
 							<fs-radio label="默认地址" value="1" checked></fs-radio>
 						</fs-radio-group>
-						<fs-radio-group  v-else  @change="setDefaultAddress(item)">
+						<fs-radio-group v-else @change="setDefaultAddress(item)">
 							<fs-radio label="设为默认地址" value="1"></fs-radio>
 						</fs-radio-group>
 						<view class="flex align-center">

+ 59 - 17
modules/common/login/login.vue

@@ -1,25 +1,27 @@
 <template>
 	<view class="login-box">
-		<view class="text-center">
-			<image src="/modules/common/static/images/login/logo.png" mode="widthFix" style="width: 500rpx"></image>
-		</view>
+		<view class="login-bg"></view>
+		<view class="login-bg2"></view>
 		<view class="login-top">
-			<view>欢迎回来!</view>
+			<view>登录</view>
+			<view class="login-top-sub">欢迎再次回来~</view>
 		</view>
 		<fs-form ref="loginRef" :model="loginModel">
-			<fs-field class="radius" placeholder="请输入账号" v-model="loginModel.name">
+			<fs-field bgColor="#f8f8f8" round placeholder="请输入账号" v-model="loginModel.name">
 				<template #before>
 					<fs-icon type="icon-user" color="#666666"></fs-icon>
 				</template>
 			</fs-field>
-			<fs-gutter height="40rpx" bgColor="#F6F7FB"></fs-gutter>
-			<fs-field class="radius" placeholder="请输入密码" v-model="loginModel.password">
+			<fs-gutter height="40rpx" bgColor="#fff"></fs-gutter>
+			<fs-field bgColor="#f8f8f8" round placeholder="请输入密码" v-model="loginModel.password">
 				<template #before>
 					<fs-icon type="icon-password" color="#666666"></fs-icon>
 				</template>
 			</fs-field>
-			<fs-gutter height="100rpx" bgColor="#F6F7FB"></fs-gutter>
-			<fs-button full radius @click="handleLogin">登录</fs-button>
+			<fs-gutter height="100rpx" bgColor="#fff"></fs-gutter>
+			<fs-button full round @click="handleLogin" :customStyle="{background: 'linear-gradient(to right, #00c6fc, #9adcf1)'}">登录</fs-button>
+			<fs-gutter height="60rpx" bgColor="#fff"></fs-gutter>
+			<fs-button full round type="success"  @click="getUserProfile">微信登录</fs-button>
 		</fs-form>
 	</view>
 </template>
@@ -27,7 +29,9 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import useForm from '@/hooks/useForm'
+import { useStore } from 'vuex'
 
+const store = useStore()
 const loginRules = {
 	name: {
 		required: true,
@@ -47,29 +51,67 @@ const loginRef = ref(null)
 const loginForm = useForm(loginRules, 'loginRef')
 const handleLogin = () => {
 	loginForm.validate().then(() => {
-		console.log('success')
+		store.dispatch('login', {
+			...loginModel
+		}).then(res => {
+			uni.navigateBack()
+		})
+	})
+}
+
+const getUserProfile = () => {
+	wx.getUserProfile({
+		desc: '用于完善会员资料',
+		success: res => {
+			// store.dispatch('wxLogin').then(res => {
+				
+			// })
+		}
 	})
 }
 </script>
 
 <style>
 page{
-	background-color: #F6F7FB;
+	background-color: #fff;
 }
 </style>
 <style lang="scss" scoped>
+.login{
+	&-bg {
+		position: fixed;
+		top: -250rpx;
+		right: -250rpx;
+		width: 600rpx;
+		height: 600rpx;
+		border-radius: 100%;
+		background-color: #00baef;
+		z-index: 2
+	}
+	
+	&-bg2 {
+		position: fixed;
+		top: -150rpx;
+		right: -300rpx;
+		width: 600rpx;
+		height: 600rpx;
+		border-radius: 100%;
+		background-color: #ade8f9;
+		z-index: 1;
+	}
+}
 .login-box{
 	padding: 30rpx;
 }
 .login-top{
-	color: #041B3D;
-	font-size: 24px;
-	font-family: Source Han Sans SC;
-	margin: 50rpx 0;
+	color: #222222;
+	font-size: 30px;
+	font-weight: bold;
+	margin: 150rpx 0;
 	
 	&-sub{
-		font-size: 18px;
+		font-size: 16px;
 		color: #b0b0b1;
 	}
 }
-</style>
+</style>

+ 16 - 58
modules/common/login/login4.vue

@@ -1,27 +1,25 @@
 <template>
 	<view class="login-box">
-		<view class="login-bg"></view>
-		<view class="login-bg2"></view>
+		<view class="text-center">
+			<image src="/modules/common/static/images/login/logo.png" mode="widthFix" style="width: 500rpx"></image>
+		</view>
 		<view class="login-top">
-			<view>登录</view>
-			<view class="login-top-sub">欢迎再次回来~</view>
+			<view>欢迎回来!</view>
 		</view>
 		<fs-form ref="loginRef" :model="loginModel">
-			<fs-field bgColor="#f8f8f8" round placeholder="请输入账号" v-model="loginModel.name">
+			<fs-field class="radius" placeholder="请输入账号" v-model="loginModel.name">
 				<template #before>
 					<fs-icon type="icon-user" color="#666666"></fs-icon>
 				</template>
 			</fs-field>
-			<fs-gutter height="40rpx" bgColor="#fff"></fs-gutter>
-			<fs-field bgColor="#f8f8f8" round placeholder="请输入密码" v-model="loginModel.password">
+			<fs-gutter height="40rpx" bgColor="#F6F7FB"></fs-gutter>
+			<fs-field class="radius" placeholder="请输入密码" v-model="loginModel.password">
 				<template #before>
 					<fs-icon type="icon-password" color="#666666"></fs-icon>
 				</template>
 			</fs-field>
-			<fs-gutter height="100rpx" bgColor="#fff"></fs-gutter>
-			<fs-button full round @click="handleLogin" :customStyle="{background: 'linear-gradient(to right, #00c6fc, #9adcf1)'}">登录</fs-button>
-			<fs-gutter height="60rpx" bgColor="#fff"></fs-gutter>
-			<fs-button full round type="success"  @click="getUserProfile">微信登录</fs-button>
+			<fs-gutter height="100rpx" bgColor="#F6F7FB"></fs-gutter>
+			<fs-button full radius @click="handleLogin">登录</fs-button>
 		</fs-form>
 	</view>
 </template>
@@ -29,9 +27,7 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import useForm from '@/hooks/useForm'
-import { useStore } from 'vuex'
 
-const store = useStore()
 const loginRules = {
 	name: {
 		required: true,
@@ -51,66 +47,28 @@ const loginRef = ref(null)
 const loginForm = useForm(loginRules, 'loginRef')
 const handleLogin = () => {
 	loginForm.validate().then(() => {
-		store.dispatch('login', {
-			...loginModel
-		}).then(res => {
-			uni.navigateBack()
-		})
-	})
-}
-
-const getUserProfile = () => {
-	wx.getUserProfile({
-		desc: '用于完善会员资料',
-		success: res => {
-			// store.dispatch('wxLogin').then(res => {
-				
-			// })
-		}
+		console.log('success')
 	})
 }
 </script>
 
 <style>
 page{
-	background-color: #fff;
+	background-color: #F6F7FB;
 }
 </style>
 <style lang="scss" scoped>
-.login{
-	&-bg {
-		position: fixed;
-		top: -250rpx;
-		right: -250rpx;
-		width: 600rpx;
-		height: 600rpx;
-		border-radius: 100%;
-		background-color: #00baef;
-		z-index: 2
-	}
-	
-	&-bg2 {
-		position: fixed;
-		top: -150rpx;
-		right: -300rpx;
-		width: 600rpx;
-		height: 600rpx;
-		border-radius: 100%;
-		background-color: #ade8f9;
-		z-index: 1;
-	}
-}
 .login-box{
 	padding: 30rpx;
 }
 .login-top{
-	color: #222222;
-	font-size: 30px;
-	font-weight: bold;
-	margin: 150rpx 0;
+	color: #041B3D;
+	font-size: 24px;
+	font-family: Source Han Sans SC;
+	margin: 50rpx 0;
 	
 	&-sub{
-		font-size: 16px;
+		font-size: 18px;
 		color: #b0b0b1;
 	}
 }

+ 0 - 41
modules/common/login/wxLogin.vue

@@ -1,41 +0,0 @@
-<template>
-	<view class="">
-		<image src="/modules/common/static/images/login/login-bg.png" mode="widthFix" style="width: 100vw;"></image>
-		<view class="login-box">
-			<fs-button block type="success" radius @click="getUserProfile">微信登录</fs-button>
-		</view>
-	</view>
-</template>
-
-<script setup>
-import { useStore } from 'vuex'
-
-const store = useStore()
-
-const getUserProfile = () => {
-	wx.getUserProfile({
-		desc: '用于完善会员资料',
-		success: res => {
-			store.dispatch('wxLogin').then(res => {
-				
-			})
-		}
-	})
-}
-</script>
-
-<style>
-page{
-	background-color: #fff;
-	height: 100%;
-	overflow: hidden;
-}
-</style>
-<style lang="scss" scoped>
-.login-box{
-	position: fixed;
-	bottom: 100rpx;
-	left: 0;
-	right: 0;
-}
-</style>

+ 112 - 80
modules/common/org.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="container">
-		<view class="bg-white" style="padding: 10rpx 20rpx;">
+		<view class="bg-white" style="padding: 16rpx 20rpx;">
 			<scroll-view scroll-x :scroll-into-view="state.intoView" class="org-nav">
 				<view 
 					class="org-nav-item" 
@@ -56,14 +56,15 @@
 		<fs-popup v-model="orgState.showAddOrg" direction="right">
 			<view class="container">
 				<view class="main">
-					<fs-form>
-						<fs-form-item label="名称">
-							<fs-field required  placeholder="请输入组织名称" v-model="orgState.orgForm.name" border maxlength="10"></fs-field>
+					<fs-form ref="orgRef" :model="orgState.orgForm">
+						<fs-form-item label="名称" required>
+							<fs-field placeholder="请输入组织名称" v-model="orgState.orgForm.name" maxlength="10"></fs-field>
 						</fs-form-item>
 					</fs-form>
 				</view>
 				<view class="org-ft">
-					<fs-button block round @click="handleAddOrg">{{orgState.orgForm.id ? '修改组织' : '添加组织'}}</fs-button>
+					<!-- <fs-button block round @click="handleAddOrg">{{orgState.orgForm.id ? '修改组织' : '添加组织'}}</fs-button> -->
+					<fs-button block round @click="handleAddOrg">保存</fs-button>
 				</view>
 			</view>
 		</fs-popup>
@@ -71,20 +72,23 @@
 		<fs-popup v-model="staffState.showAddStaff" direction="right">
 			<view class="container">
 				<view class="main">
-					<fs-form>
+					<fs-form
+						ref="staffRef"
+						:model="staffState.staff"
+					>
 						<fs-form-item label="姓名" required>
-							<fs-field placeholder="请输入员工姓名" v-model="staffState.staff.name" border  maxlength="10"></fs-field>
+							<fs-field placeholder="请输入员工姓名" v-model="staffState.staff.name" maxlength="10"></fs-field>
 						</fs-form-item>
 						<fs-form-item label="手机号" required>
-							<fs-field placeholder="请输入员工手机号" v-model="staffState.staff.phone" border></fs-field>
+							<fs-field type="number" placeholder="请输入员工手机号" v-model="staffState.staff.phone"></fs-field>
 						</fs-form-item>
 						<fs-form-item label="职位">
-							<fs-field placeholder="请输入员工职位" v-model="staffState.staff.position" border></fs-field>
+							<fs-field placeholder="请输入员工职位" v-model="staffState.staff.position"></fs-field>
 						</fs-form-item>
 						<fs-form-item label="照片">
 							<fs-upload
 								action=""
-								size="200rpx"
+								size="180rpx"
 								v-model="staffState.staff.icon"
 								:count="1">
 							</fs-upload>
@@ -92,7 +96,8 @@
 					</fs-form>
 				</view>
 				<view class="org-ft">
-					<fs-button block round @click="handleAddStaff">{{staffState.staff.id ? '修改员工' : '添加员工'}}</fs-button>
+					<!-- <fs-button block round @click="handleAddStaff">{{staffState.staff.id ? '修改员工' : '添加员工'}}</fs-button> -->
+					<fs-button block round @click="handleAddStaff">保存</fs-button>
 				</view>
 			</view>
 		</fs-popup>
@@ -100,8 +105,12 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
 import { getOrgList, addOrg, delOrg, editOrg, addStaff, delStaff, editStaff } from '@/services/company'
+import useForm from '@/hooks/useForm'
+import useValidator from '@/hooks/useValidator'
+
+const validator = useValidator()
 
 const swipeOptions = [
 	{
@@ -170,6 +179,17 @@ fetchOrgList()
 
 
 // 添加组织相关逻辑
+const orgRef = ref(null)
+const formRules = {
+	name: {
+		required: true, 
+		message: '请输入组织名称',
+		transform(value) {
+			return value.trim()
+		}
+	},
+}
+const orgForm = useForm(formRules, 'orgRef')
 const orgState = reactive({
 	showAddOrg: false,
 	orgForm: {
@@ -177,48 +197,44 @@ const orgState = reactive({
 	},
 })
 const handleAddOrg = () => {
-	if(!orgState.orgForm.name) {
-		return uni.showToast({
-			title: '请输入组织名称',
-			icon: 'none'
-		})
-	}
-	if (orgState.orgForm.id) {
-		editOrg(orgState.orgForm).then(res => {
-			getOrgList().then(res => {
-				state.orgList = res.data.results || []
-				
-				uni.showToast({
-					title: '修改成功',
-					icon: 'none'
+	orgForm.validate(orgState.orgForm).then(res => {
+		if (orgState.orgForm.id) {
+			editOrg(orgState.orgForm).then(res => {
+				getOrgList().then(res => {
+					state.orgList = res.data.results || []
+					
+					uni.showToast({
+						title: '修改成功',
+						icon: 'none'
+					})
+					state.curOrgList.splice(orgState.orgForm.index, 1, orgState.orgForm)
+					orgState.orgForm = {
+						name: ''
+					}
+					orgState.showAddOrg = false
 				})
-				state.curOrgList.splice(orgState.orgForm.index, 1, orgState.orgForm)
-				orgState.orgForm = {
-					name: ''
-				}
-				orgState.showAddOrg = false
 			})
-		})
-	} else{
-		addOrg({
-			...orgState.orgForm,
-			parentId: orgState.curOrgId
-		}).then(res => {
-			getOrgList().then(data => {
-				orgState.orgList = data.data.results || []
-				
-				uni.showToast({
-					title: '添加成功',
-					icon: 'none'
+		} else{
+			addOrg({
+				...orgState.orgForm,
+				parentId: orgState.curOrgId
+			}).then(res => {
+				getOrgList().then(data => {
+					orgState.orgList = data.data.results || []
+					
+					uni.showToast({
+						title: '添加成功',
+						icon: 'none'
+					})
+					orgState.curOrgList.push(res.data)
+					orgState.orgForm = {
+						name: ''
+					}
+					orgState.showAddOrg = false
 				})
-				orgState.curOrgList.push(res.data)
-				orgState.orgForm = {
-					name: ''
-				}
-				orgState.showAddOrg = false
 			})
-		})
-	}
+		}
+	})
 }
 const handleOrgOption = ({option, data}) => {
 	if (option.type === 'del') {
@@ -243,6 +259,20 @@ const handleOrgOption = ({option, data}) => {
 
 
 // 添加员工相关逻辑
+const staffRef = ref(null)
+const staffFormRules = {
+	name: {
+		required: true, 
+		message: '请输入员工姓名',
+		transform(value) {
+			return value.trim()
+		}
+	},
+	phone: {
+		validator: validator.mobile,
+	},
+}
+const staffForm = useForm(staffFormRules, 'staffRef')
 const staff = {
 	name: '',
 	phone: '',
@@ -279,38 +309,40 @@ const handleStaffOption = ({option, data}) => {
 	}
 }
 const handleAddStaff = () => {
-	if (staffState.staff.id) {
-		editStaff({
-			...staffState.staff,
-			icon: staffState.staff.icon[0] || '',
-		}).then(res => {
-			uni.showToast({
-				title: '修改成功',
-				icon: 'none'
+	staffForm.validate(staffState.staff).then(() => {
+		if (staffState.staff.id) {
+			editStaff({
+				...staffState.staff,
+				icon: staffState.staff.icon[0] || '',
+			}).then(res => {
+				uni.showToast({
+					title: '修改成功',
+					icon: 'none'
+				})
+				staffState.curStaffList.splice(staffState.staff.index, 1, staffState.staff)
+				staffState.staff = {
+					...staff
+				}
+				staffState.showAddStaff = false
 			})
-			staffState.curStaffList.splice(staffState.staff.index, 1, staffState.staff)
-			staffState.staff = {
-				...staff
-			}
-			staffState.showAddStaff = false
-		})
-	} else{
-		addStaff({
-			...staffState.staff,
-			icon: staffState.staff.icon[0] || '',
-			orgId: staffState.curOrgId,
-		}).then(res => {
-			uni.showToast({
-				title: '添加成功',
-				icon: 'none'
+		} else{
+			addStaff({
+				...staffState.staff,
+				icon: staffState.staff.icon[0] || '',
+				orgId: staffState.curOrgId,
+			}).then(res => {
+				uni.showToast({
+					title: '添加成功',
+					icon: 'none'
+				})
+				staffState.curStaffList.push(res.data)
+				staffState.staff = {
+					...staff
+				}
+				staffState.showAddStaff = false
 			})
-			staffState.curStaffList.push(res.data)
-			staffState.staff = {
-				...staff
-			}
-			staffState.showAddStaff = false
-		})
-	}
+		}
+	})
 }
 </script>
 

+ 1 - 1
pages/index/index.vue

@@ -29,7 +29,7 @@
 			</fs-grid-item>
 		</fs-grid>
 		
-		<fs-cell border align="stretch" v-for="(item,index) in 3">
+		<fs-cell border align="stretch" v-for="(item,index) in 3" :key="index">
 			<template #title>
 				<fs-avatar shape="square" radius width="240rpx" height="180rpx" src="/static/images/banner.png"></fs-avatar>
 			</template>