jeecg/jeecg-uniapp
1
0
Fork 0
mirror of https://github.com/jeecgboot/jeecg-uniapp.git synced 2025-10-14 14:20:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI样式大优化

Browse Source
This commit is contained in:
JEECG
2025-03-10 21:42:13 +08:00
parent ae358f8572
commit 7427898c42
37 changed files with 1347 additions and 908 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
env/.env vendored
View File

@@ -22,7 +22,7 @@ VITE_UPLOAD_BASEURL__WEIXIN_TRIAL = ''
VITE_UPLOAD_BASEURL__WEIXIN_RELEASE = ''
# h5是否需要配置代理
VITE_APP_PROXY=true
VITE_APP_PROXY= true
VITE_APP_PROXY_PREFIX = '/api'
# 是否启用mock (1.仅支持h5 2.启用必须要开启代理，否则生效。)

9
src/common/uitls.ts
View File

@@ -320,3 +320,12 @@ export function getRandomColor() {
let randomColorType = colorType[randomIndex];
return colorPanel['natural'][getRandomIntBetweenOneAndTen()] || '#00bcd4';
}
// 消除后缀：
export const getPlaceholder = (attrs: any = {}) => {
let label = attrs.label
if (label.endsWith('：') || label.endsWith(':')) {
label = label.substr(0, label.length - 1)
}
return `请选择${label}`
}

2
src/common/work.ts
View File

@@ -18,7 +18,7 @@ export const us = {
enabled: true,
},
{
title: 'demo',
title: '组件示例',
icon: icon_prefix + 'chuchai.png',
description: '出差申请',
useCount: 10000,

15
src/components/CategorySelect/CategorySelect.vue
View File

@@ -12,7 +12,7 @@
<view class="content">
<view class="operation">
<view class="cancel text-gray-5" @click.stop="cancel">取消</view>
<view class="confrim text-blue-5" @click.stop="confirm">确定</view>
<view class="confrim" @click.stop="confirm">确定</view>
</view>
<scroll-view class="flex-1" scroll-y>
<DaTree
@@ -228,6 +228,16 @@ watch(
justify-content: space-between;
line-height: 40px;
padding: 0 5px;
position: relative;
&::before {
content: ' ';
position: absolute;
bottom: 0;
left: 8px;
right: 8px;
height: 1px;
background-color: #e5e5e5;
}
.cancel,
.confrim {
font-size: 15px;
@@ -235,6 +245,9 @@ watch(
min-width: 40px;
text-align: center;
}
.confrim {
color: var(--wot-color-theme);
}
}
:deep(.da-tree) {
.da-tree-item__checkbox {

100
src/components/Grid/Grid.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<view
class="wrap"
:style="{
'--borderColor': borderColor,
'--imgWidth': imgWidth,
'--imgHeight': imgHeight,
}"
>
<wd-grid :clickable="clickable" :column="column">
<template v-for="(item, index) in modelValue" :key="item[itemKey]">
<wd-grid-item
:custom-class="getClass(index)"
use-icon-slot
:text="item.text"
@itemclick="handleClik(item, index)"
>
<template #icon>
<wd-img :width="imgWidth" :height="imgHeight" :src="item.img"></wd-img>
</template>
</wd-grid-item>
</template>
</wd-grid>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
defineOptions({
name: 'Grid',
options: {
styleIsolation: 'shared',
},
})
const props = defineProps({
modelValue: {
type: Array,
default: () => [],
},
column: {
type: Number,
default: 4,
},
itemKey: {
type: String,
default: 'id',
},
imgWidth: {
type: String,
default: '28px',
},
imgHeight: {
type: String,
default: '28px',
},
clickable: {
type: Boolean,
default: true,
},
borderColor: {
type: String,
default: 'rgba(165, 165, 165, 0.1)',
},
})
const emit = defineEmits(['itemClik'])
const getClass = (index) => {
let className = ''
if (index < props.column) {
className = 'first-row'
}
if ((index + 1) % props.column == 0) {
className += ` lastCol`
}
return className
}
const handleClik = (item, index) => {
emit('itemClik', item, index)
}
</script>
<style lang="scss" scoped>
:deep(.wd-grid-item) {
box-sizing: border-box;
border-right: 1px solid var(--borderColor, rgba(165, 165, 165, 0.1));
border-bottom: 1px solid var(--borderColor, rgba(165, 165, 165, 0.1));
&.first-row {
border-top: 1px solid var(--borderColor, rgba(165, 165, 165, 0.1));
}
&.lastCol {
border-right: none;
}
.wd-grid-item__text {
margin-top: 10px;
}
.wd-grid-item__wrapper {
width: var(--imgWidth, 28px) !important;
height: var(--imgHeight, 28px) !important;
}
}
</style>

9
src/components/PageLayout/PageLayout.vue
View File

@@ -24,6 +24,7 @@
<view class="pageContent">
<slot></slot>
</view>
<view class="tabbar"></view>
<wd-toast></wd-toast>
<wd-message-box></wd-message-box>
<wd-notify></wd-notify>
@@ -170,9 +171,10 @@ console.log('props:', props)
}
:deep(.wd-navbar) {
background-color: transparent;
--wot-navbar-title-font-weight: 400;
--wot-navbar-arrow-size: 18px;
--wot-navbar-desc-font-size: 14px;
--wot-navbar-title-font-size: 14px;
--wot-navbar-title-font-size: 16px;
}
}
.pageContent {
@@ -182,5 +184,10 @@ console.log('props:', props)
flex-direction: column;
background-color: #f1f1f1;
}
.tabbar {
/* #ifdef H5 */
height: var(--window-bottom);
/* #endif */
}
}
</style>

22
src/components/SelectDept/SelectDept.vue
View File

@@ -2,7 +2,7 @@
<view class="CategorySelect">
<view @click="handleClick">
<wd-input
:placeholder="`请选择${$attrs.label}`"
:placeholder="getPlaceholder($attrs)"
v-bind="$attrs"
v-model="showText"
clearable
@@ -13,7 +13,7 @@
<view class="content">
<view class="operation">
<view class="cancel text-gray-5" @click.stop="cancel">取消</view>
<view class="confrim text-blue-5" @click.stop="confirm">确定</view>
<view class="confrim" @click.stop="confirm">确定</view>
</view>
<scroll-view class="flex-1" scroll-y>
<DaTree
@@ -39,6 +39,7 @@ import { useToast, useMessage, useNotify, dayjs } from 'wot-design-uni'
import { http } from '@/utils/http'
import DaTree from '@/uni_modules/da-tree/index.vue'
import { isArray } from '@/utils/is'
import { getPlaceholder } from '@/common/uitls'
defineOptions({
name: 'SelectDept',
})
@@ -166,10 +167,10 @@ function loadRoot() {
// 翻译input内的值
function loadItemByCode() {
let value = props.modelValue
console.log("部门组件翻译props.modelValue",props.modelValue)
console.log('部门组件翻译props.modelValue', props.modelValue)
if (isArray(props.modelValue)) {
// @ts-ignore
value = value.join(",")
value = value.join(',')
}
if (value === treeData.value.map((item) => item.key).join(',')) {
// 说明是刚选完，内部已有翻译。不需要再请求
@@ -220,6 +221,16 @@ watch(
justify-content: space-between;
line-height: 40px;
padding: 0 5px;
position: relative;
&::before {
content: ' ';
position: absolute;
bottom: 0;
left: 8px;
right: 8px;
height: 1px;
background-color: #e5e5e5;
}
.cancel,
.confrim {
font-size: 15px;
@@ -227,6 +238,9 @@ watch(
min-width: 40px;
text-align: center;
}
.confrim {
color: var(--wot-color-theme);
}
}
:deep(.da-tree) {
.da-tree-item__checkbox {

10
src/components/SelectUser/SelectUser.vue
View File

@@ -2,7 +2,7 @@
<view class="SelectUser">
<view @click.stop="handleClick">
<wd-input
:placeholder="`请选择${$attrs.label}`"
:placeholder="getPlaceholder($attrs)"
v-bind="$attrs"
readonly
v-model="showText"
@@ -27,11 +27,12 @@ import { http } from '@/utils/http'
import DaTree from '@/uni_modules/da-tree/index.vue'
import { isArray, isString } from '@/utils/is'
import SelectUserModal from './components/SelectUserModal.vue'
import { getPlaceholder } from '@/common/uitls'
defineOptions({
name: 'SelectUser',
options: {
styleIsolation: 'shared'
}
styleIsolation: 'shared',
},
})
const props = defineProps({
modelValue: {
@@ -52,7 +53,7 @@ const props = defineProps({
},
modalTitle: {
type: String,
default: '',
default: '选择用户',
},
maxSelectCount: {
type: Number,
@@ -103,6 +104,7 @@ const handleChange = (data) => {
emit('update:modelValue', rowkey)
emit('change', rowkey)
}
watch(
() => props.modelValue,
() => {

7
src/components/SelectUser/components/SelectUserModal.vue
View File

@@ -100,7 +100,7 @@ const props = defineProps({
},
modalTitle: {
type: String,
default: '',
default: '选择用户',
},
maxSelectCount: {
type: Number,
@@ -274,4 +274,9 @@ init()
.wrap {
height: 100%;
}
:deep(.wd-popup-wrapper) {
.wd-popup {
top: 100px;
}
}
</style>

19
src/components/TreeSelect/TreeSelect.vue
View File

@@ -12,7 +12,7 @@
<view class="content">
<view class="operation">
<view class="cancel text-gray-5" @click.stop="cancel">取消</view>
<view class="confrim text-blue-5" @click.stop="confirm">确定</view>
<view class="confrim" @click.stop="confirm">确定</view>
</view>
<scroll-view class="flex-1" scroll-y>
<DaTree
@@ -41,8 +41,8 @@ import { isArray } from '@/utils/is'
defineOptions({
name: 'TreeSelect',
options: {
styleIsolation: 'shared'
}
styleIsolation: 'shared',
},
})
const props = defineProps({
modelValue: {
@@ -316,6 +316,16 @@ validateProp().then(() => {
justify-content: space-between;
line-height: 40px;
padding: 0 5px;
position: relative;
&::before {
content: ' ';
position: absolute;
bottom: 0;
left: 8px;
right: 8px;
height: 1px;
background-color: #e5e5e5;
}
.cancel,
.confrim {
font-size: 15px;
@@ -323,6 +333,9 @@ validateProp().then(() => {
min-width: 40px;
text-align: center;
}
.confrim {
color: var(--wot-color-theme);
}
}
:deep(.da-tree) {
.da-tree-item__checkbox {

216
src/components/online/online-loader.vue
View File

@@ -3,13 +3,18 @@
<view class="form-container">
<wd-form ref="form" :model="formData">
<wd-cell-group border>
<template v-for="(item, index) in rootProperties" :key="index">
<view
class="onlineLoader-form"
v-for="(item, index) in rootProperties"
:key="index"
:class="{ 'mt-14px': index % 2 == 0 }"
>
<!-- 图片 -->
<wd-cell
v-if="item.type == 'image'"
:name="item.key"
:title="item.label"
title-width="80px"
:title="get4Label(item.label)"
:title-width="labelWidth"
:required="fieldRequired(item)"
>
<online-image
@@ -24,8 +29,8 @@
<wd-cell
v-else-if="item.type == 'file'"
:name="item.key"
:title="item.label"
title-width="80px"
:title="get4Label(item.label)"
:title-width="labelWidth"
:required="fieldRequired(item)"
>
<online-image
@@ -40,7 +45,8 @@
<!-- 日期时间 -->
<online-datetime
v-else-if="item.type === 'datetime'"
:label="item.label"
:label="get4Label(item.label)"
:labelWidth="labelWidth"
:name="item.key"
:disabled="componentDisabled(item)"
v-model:value="formData[item.key]"
@@ -50,7 +56,8 @@
<!-- 日期 -->
<online-date
v-else-if="item.type === 'date'"
:label="item.label"
:label="get4Label(item.label)"
:labelWidth="labelWidth"
:name="item.key"
:type="getDateExtendType(item.formSchema)"
:disabled="componentDisabled(item)"
@@ -61,7 +68,8 @@
<!-- 时间 -->
<online-time
v-else-if="item.type === 'time'"
:label="item.label"
:label="get4Label(item.label)"
:labelWidth="labelWidth"
:name="item.key"
:disabled="componentDisabled(item)"
v-model:value="formData[item.key]"
@@ -71,7 +79,8 @@
<!-- 下拉选择 -->
<online-select
v-else-if="item.type === 'list' || item.type === 'sel_search'"
:label="item.label"
:label="get4Label(item.label)"
:labelWidth="labelWidth"
:name="item.key"
:type="item.type"
:dict="item.listSource"
@@ -86,7 +95,8 @@
v-else-if="item.type === 'checkbox'"
:name="item.key"
:type="item.type"
:label="item.label"
:label="get4Label(item.label)"
:labelWidth="labelWidth"
:dict="item.listSource"
:disabled="componentDisabled(item)"
:required="fieldRequired(item)"
@@ -97,7 +107,8 @@
<online-radio
v-else-if="item.type === 'radio'"
:name="item.key"
:label="item.label"
:label="get4Label(item.label)"
:labelWidth="labelWidth"
:type="item.type"
:dict="item.listSource"
:disabled="componentDisabled(item)"
@@ -108,7 +119,8 @@
<!-- 下拉多选 -->
<online-multi
v-else-if="item.type === 'list_multi'"
:label="item.label"
:label="get4Label(item.label)"
:labelWidth="labelWidth"
:name="item.key"
:dict="item.listSource"
:disabled="componentDisabled(item)"
@@ -118,20 +130,21 @@
<!-- 省市区 -->
<online-pca
v-else-if="item.type==='pca'"
v-else-if="item.type === 'pca'"
:name="item.key"
:label="item.label"
:label="get4Label(item.label)"
:labelWidth="labelWidth"
:disabled="componentDisabled(item)"
:required="fieldRequired(item)"
v-model:value="formData[item.key]">
</online-pca>
v-model:value="formData[item.key]"
></online-pca>
<!-- 数字框 小数 -->
<wd-input
v-else-if="item.type === 'number' && (!item.onlyInteger || item.onlyInteger == false)"
label-width="80px"
:label-width="labelWidth"
v-model="formData[item.key]"
:label="item.label"
:label="get4Label(item.label)"
:name="item.key"
inputMode="decimal"
:disabled="componentDisabled(item)"
@@ -142,8 +155,8 @@
<!-- 数字框 整数 -->
<wd-input
v-else-if="item.type === 'number' && item.onlyInteger === true"
label-width="80px"
:label="item.label"
:label-width="labelWidth"
:label="get4Label(item.label)"
:name="item.key"
v-model="formData[item.key]"
inputMode="numeric"
@@ -156,15 +169,16 @@
<wd-cell
v-else-if="item.type == 'switch'"
:name="item.key"
:title="item.label"
title-width="80px"
:title="get4Label(item.label)"
:title-width="labelWidth"
center
:required="fieldRequired(item)"
>
<view style="text-align: left">
<wd-switch
:label="item.label"
:label="get4Label(item.label)"
:name="item.key"
size="18px"
:disabled="componentDisabled(item)"
v-model="formData[item.key]"
:active-value="switchOpt(item.formSchema?.extendOption, 0)"
@@ -176,12 +190,12 @@
<!-- 多行文本 -->
<wd-textarea
v-else-if="['textarea', 'markdown', 'umeditor'].includes(item.type)"
label-width="80px"
:label="item.label"
:label-width="labelWidth"
:label="get4Label(item.label)"
:name="item.key"
v-model="formData[item.key]"
auto-height
:maxlength="500"
clearable
:maxlength="300"
:disabled="componentDisabled(item)"
:placeholder="item.placeholder"
:rules="item.rules"
@@ -189,21 +203,20 @@
<!-- 密码输入框 -->
<wd-input
v-else-if="item.type === 'password'"
label-width="80px"
:label-width="labelWidth"
v-model="formData[item.key]"
:disabled="componentDisabled(item)"
:label="item.label"
:label="get4Label(item.label)"
:name="item.key"
:placeholder="item.placeholder"
:rules="item.rules"
clearable
show-password
/>
<!-- popup字典 -->
<PopupDict
v-else-if="item.type === 'popup_dict'"
label-width="80px"
:label="item.label"
:label-width="labelWidth"
:label="get4Label(item.label)"
:disabled="componentDisabled(item)"
:required="fieldRequired(item)"
v-model="formData[item.key]"
@@ -213,8 +226,8 @@
<!-- popup -->
<Popup
v-else-if="item.type === 'popup'"
label-width="80px"
:label="item.label"
:label-width="labelWidth"
:label="get4Label(item.label)"
:disabled="componentDisabled(item)"
:required="fieldRequired(item)"
v-model="formData[item.key]"
@@ -225,53 +238,52 @@
></Popup>
<!-- 关联记录 -->
<online-popup-link-record
v-else-if="item.type==='link_table'"
label-width="80px"
:label="item.label"
v-else-if="item.type === 'link_table'"
:label-width="labelWidth"
:label="get4Label(item.label)"
:name="item.key"
v-model:formSchema="item.formSchema"
:disabled="componentDisabled(item)"
:required="fieldRequired(item)"
v-model:value="formData[item.key]"
@selected="linkRecordChange"
>
</online-popup-link-record>
></online-popup-link-record>
<!-- 他表字段 -->
<wd-input
v-else-if="item.type==='link_table_field'"
label-width="80px"
v-else-if="item.type === 'link_table_field'"
:label-width="labelWidth"
v-model="formData[item.key]"
:disabled="true"
:label="item.label"
:label="get4Label(item.label)"
:name="item.key"
/>
<!-- 用户选择 -->
<select-user
v-else-if="item.type==='sel_user'"
label-width="80px"
v-else-if="item.type === 'sel_user'"
:label-width="labelWidth"
:name="item.key"
:label="item.label"
:label="get4Label(item.label)"
:disabled="componentDisabled(item)"
:required="fieldRequired(item)"
v-model="formData[item.key]">
</select-user>
v-model="formData[item.key]"
></select-user>
<!-- 部门选择 -->
<select-dept
v-else-if="item.type==='sel_depart'"
label-width="80px"
v-else-if="item.type === 'sel_depart'"
:label-width="labelWidth"
:name="item.key"
:label="item.label"
:label="get4Label(item.label)"
labelKey="departName"
:disabled="componentDisabled(item)"
:required="fieldRequired(item)"
v-model="formData[item.key]">
</select-dept>
v-model="formData[item.key]"
></select-dept>
<!-- 分类字典树 -->
<CategorySelect
v-else-if="item.type === 'cat_tree'"
label-width="80px"
:label="item.label"
:label-width="labelWidth"
:label="get4Label(item.label)"
:disabled="componentDisabled(item)"
:required="fieldRequired(item)"
v-model="formData[item.key]"
@@ -280,8 +292,8 @@
<!-- 自定义树 -->
<TreeSelect
v-else-if="item.type === 'sel_tree'"
label-width="80px"
:label="item.label"
:label-width="labelWidth"
:label="get4Label(item.label)"
:disabled="componentDisabled(item)"
:required="fieldRequired(item)"
v-model="formData[item.key]"
@@ -293,16 +305,16 @@
<!-- 普通输入框 -->
<wd-input
v-else
label-width="80px"
:label-width="labelWidth"
v-model="formData[item.key]"
:disabled="componentDisabled(item)"
:label="item.label"
:label="get4Label(item.label)"
:name="item.key"
:placeholder="item.placeholder"
:rules="item.rules"
clearable
/>
</template>
</view>
</wd-cell-group>
</wd-form>
</view>
@@ -435,6 +447,16 @@ const navTitle = computed(() => {
return props.title
}
})
// 标题宽度
const labelWidth = computed(() => {
return '100px'
})
// 导航标题
const get4Label = computed(() => {
return (lable) => {
return `${lable && lable.length > 4 ? lable.substring(0, 4) : lable}：`
}
})
onMounted(() => {
console.log('开始渲染online表单')
@@ -478,7 +500,7 @@ const isChecked = (opts: any, value: any) => {
*/
const switchOpt = (opts: any, index: any) => {
const options = Array.isArray(opts) && opts.length > 0 ? opts : ['Y', 'N']
return options[index]+''
return options[index] + ''
}
/**
*
@@ -505,12 +527,14 @@ const fieldRequired = (item: any) => {
* @param linkRecord
* @param key
*/
const linkRecordChange = (linkRecord,key) =>{
let linkFieldArr = rootProperties.value.filter(item=>item.type==='link_table_field' && item?.formSchema?.dictTable == key);
linkFieldArr.forEach(field=>{
let value = linkRecord.map(record=>record[field.formSchema.dictText]).join(",");
nextTick(()=>{
formData.value[field.key] = value;
const linkRecordChange = (linkRecord, key) => {
let linkFieldArr = rootProperties.value.filter(
(item) => item.type === 'link_table_field' && item?.formSchema?.dictTable == key,
)
linkFieldArr.forEach((field) => {
let value = linkRecord.map((record) => record[field.formSchema.dictText]).join(',')
nextTick(() => {
formData.value[field.key] = value
})
})
}
@@ -526,17 +550,19 @@ const backRoute = () => {
* @param value
*/
function handleMultiOrDateField() {
let finalData = deepClone(formData.value);
let finalData = deepClone(formData.value)
//日期字段
let dateFieldArr = rootProperties.value.filter((item) => item.type === 'date' || item.type === 'datetime')
let dateFieldArr = rootProperties.value.filter(
(item) => item.type === 'date' || item.type === 'datetime',
)
//省市区字段
let pcaArr = rootProperties.value.filter((item) => item.type === 'pca')
finalData = Object.keys(finalData).reduce((acc, key) => {
let value = finalData[key]
//省市区获取最后一位
if (value && pcaArr.length > 0 && pcaArr.map(item=>item.key).includes(key)) {
console.log("省市区获取最后一位value",value)
value = isArray(value)?value[2]:value.split(",")[2];
if (value && pcaArr.length > 0 && pcaArr.map((item) => item.key).includes(key)) {
console.log('省市区获取最后一位value', value)
value = isArray(value) ? value[2] : value.split(',')[2]
}
//是数组的就转换成字符串
if (value && isArray(value)) {
@@ -842,19 +868,47 @@ defineExpose({
<style lang="scss" scoped>
.onlineLoader-container {
.form-container {
:deep(.wd-cell-group__body){
background: #F1F1F1;
}
.onlineLoader-form{
:deep(.wd-input__label-inner){
font-size: 16px;
}
:deep(.wd-picker__label){
font-size: 16px;
}
:deep(.wd-select-picker__label){
font-size: 16px;
}
:deep(.wd-cell__title){
font-size: 16px;
}
:deep(.wd-textarea__label-inner){
font-size: 16px;
}
:deep(.wd-input__label.is-required){
padding-left: 0px;
}
:deep(.wd-input__label.is-required::after){
left: -10px;
}
:deep(.wd-textarea__clear){
color: #bfbfbf;
}
:deep(.wd-select-picker__clear){
color: #bfbfbf;
}
:deep(.wd-input__clear){
color: #bfbfbf;
}
:deep(.wd-upload__close){
color: #bfbfbf;
}
}
}
.footer {
padding: 12px;
//position: fixed;
//bottom: 0;
//width: 100%;
}
:deep(.label-class) {
color: #999 !important;
font-size: 12px !important;
}
:deep(.uni-input-input:disabled) {
-webkit-text-fill-color: #000 !important;
}
}
</style>

1
src/components/online/view/online-time.vue
View File

@@ -39,7 +39,6 @@ const props = defineProps({
// 定义 emits
const emit = defineEmits(['input', 'change', 'update:value'])
// 定义响应式数据;
const visible = ref(false)
const currentTime = ref('')
// 监听 value 的变化

1
src/pages-message/contacts/contacts.vue
View File

@@ -230,6 +230,7 @@ onLoad(() => {
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
background-color: #eee;
}
.content {
display: flex;

14
src/pages-sub/online/online.vue
View File

@@ -31,7 +31,10 @@
<template v-if="item.tableType != 3">
<wd-swipe-action>
<view class="list" @click="handleGo(item)">
<view class="cIcon" :style="{ 'background-color': getRandomColor() }">
<view
class="cIcon"
:style="{ 'background-color': getBackgroundColor(item, index) }"
>
<view class="u-iconfont u-icon-table"></view>
</view>
<view class="tableTxt ellipsis">{{ item.tableTxt }}</view>
@@ -73,6 +76,7 @@ const paramsStore = useParamsStore()
const paging = ref(null)
const dataList: any = ref([])
const keyword = ref('')
const itemBgColor = []
// 接口拿到的数据处理之后的
const handleGo = (item) => {
@@ -168,6 +172,12 @@ const getType = (record) => {
// }
return tbTypeText
}
const getBackgroundColor = (item, index) => {
return itemBgColor[index % itemBgColor.length]
}
for (let i = 0; i < 50; i++) {
itemBgColor.push(getRandomColor())
}
</script>
<style lang="scss" scoped>
@@ -207,7 +217,7 @@ const getType = (record) => {
}
.createTime {
text-align: right;
width: 70px;
width: 75px;
font-size: 12px;
color: #919191;
}

8
src/pages-sub/online/onlineCard.vue
View File

@@ -22,8 +22,8 @@
<view class="list" @click="handleEdit(item)">
<template v-for="(cItem, cIndex) in columns" :key="index">
<view v-if="cIndex < 3" class="box" :style="getBoxStyle">
<view class="field">{{ cItem['title'] }}</view>
<view class="value">
<view class="field ellipsis">{{ cItem['title'] }}</view>
<view class="value text-grey">
<onlineTableCell
:columnsInfo="columnsInfo"
:record="item"
@@ -152,7 +152,7 @@ const getData = () => {
}
const handleAction = (val, item) => {
if (val == 'del') {
http.get(`/online/cgform/api/form/${pageParams.id}/${item.id}`).then((res) => {
http.delete(`/online/cgform/api/form/${pageParams.id}/${item.id}`).then((res) => {
toast.success('删除成功~')
paging.value.reload()
})
@@ -219,6 +219,7 @@ onMounted(() => {
width: 33%;
.field {
margin-bottom: 10px;
line-height: 20px;
}
}
}
@@ -255,6 +256,7 @@ onMounted(() => {
bottom: 80upx;
right: 30upx;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
color: #666;
}
.goTable {
bottom: 180upx;

13
src/pages-sub/online/onlineTable.vue
View File

@@ -186,7 +186,6 @@ const handleChange = ({ option, data }) => {
if (option.key === 'edit') {
handleEdit(data)
} else if (option.key === 'delete') {
uni.showModal({
title: '提示',
content: '确定要删除吗？',
@@ -194,7 +193,7 @@ const handleChange = ({ option, data }) => {
confirmText: '确定',
success: (res) => {
if (res.confirm) {
http.get(`/online/cgform/api/form/${pageParams.id}/${data.id}`).then((res) => {
http.delete(`/online/cgform/api/form/${pageParams.id}/${data.id}`).then((res) => {
toast.success('删除成功~')
getData()
})
@@ -204,7 +203,7 @@ const handleChange = ({ option, data }) => {
console.log(err)
},
})
}else if (option.key === 'detail') {
} else if (option.key === 'detail') {
handleView(data)
}
}
@@ -240,6 +239,7 @@ onMounted(() => {
bottom: 80upx;
right: 30upx;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
color: #666;
}
:deep(.wd-table__content) {
.wot-theme-light {
@@ -247,4 +247,11 @@ onMounted(() => {
// height: 100%;
}
}
:deep(.wd-table) {
--wot-table-font-size: 14px;
.wd-table__body {
--wot-table-color: var(--color-gray);
}
}
</style>

9
src/pages-work/components/hooks/useEchart.ts
View File

@@ -76,6 +76,7 @@ export default function useChartHook(props, initOption?, echarts?) {
if (config.dataSetId && config.dataSetType == 'api' && config.dataSetIzAgent !== '1') {
//不走代理直接请求接口 url参数处理
let { url, dataMap } = handleParam(config)
//TODO 联动钻取处理
let linkParams = {}
queryParams = Object.assign({}, dataMap, queryParams, linkParams)
if (url.startsWith('#{api_base_path}') || url.startsWith('{{ domainURL }}')) {
@@ -96,6 +97,14 @@ export default function useChartHook(props, initOption?, echarts?) {
getDataCallBack()
})
}
}else if (config.dataSetType == 'websocket'){
}else {
let { dataMap } = handleParam(config)
//TODO 联动钻取处理
let linkParams = {}
queryParams = Object.assign({}, dataMap, queryParams, linkParams)
getAgentData(queryParams,config);
}
} else if (config.dataType == 4) {
//查询配置

2
src/pages-work/dragPage/index.vue
View File

@@ -12,7 +12,7 @@
<PageLayout :navTitle="title">
<scroll-view class="scroll-area" :scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView">
<view v-for="(item,index) in dragData.compsData" :key="index">
<view class="mt-4 " :class="[dragData.style=='bigScreen'?'bg-black':'bg-white']" :id="'drag'+item.i" :style="[getStyle(item.component)]">
<view class="mt-4 " :class="[dragData.style=='bigScreen'?'bg-white':'bg-white']" :id="'drag'+item.i" :style="[getStyle(item.component)]">
<template v-if="compList.includes(item.component)">
<!-- #ifdef APP-PLUS || H5 -->
<component

61
src/pages-work/static/echarts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

17
src/pages/annotation/annotationDetail.vue
View File

@@ -23,11 +23,11 @@
</view>
<view class="flex">
<wd-text
custom-class="icon cuIcon-attentionfill mr-10px"
custom-class="cIcon cuIcon-attentionfill mr-10px"
text="10"
@click="numberPlus"
></wd-text>
<wd-text class="icon cuIcon-appreciatefill" text="20" @click="numberPlus"></wd-text>
<wd-text class="cIcon cuIcon-appreciatefill" text="20" @click="numberPlus"></wd-text>
</view>
</view>
</PageLayout>
@@ -79,15 +79,16 @@ onLoad((option) => {
<style lang="scss" scoped>
//
.title {
--wot-text-info-color: #333;
margin-bottom: 10px;
}
.wd-text {
&.icon {
:deep(.wd-text) {
--wot-text-info-color: var(--color-grey);
&.cIcon {
&::before {
margin-right: 4px;
}
}
}
.title {
--wot-text-info-color: #333;
margin-bottom: 10px;
}
</style>

169
src/pages/demo/demo.vue
View File

@@ -9,28 +9,28 @@
</route>
<template>
<PageLayout backRouteName="index" routeMethod="pushTab">
<PageLayout backRouteName="index" navTitle="组件示例" routeMethod="pushTab">
<scroll-view scroll-y>
<view class="box">
<view class="box shadow-warp">
<div class="content">
<SelectUser label="用户" :required="true" v-model="user"></SelectUser>
<SelectUser label="用户：" :required="true" v-model="user"></SelectUser>
</div>
</view>
<view class="box">
<view class="box shadow-warp">
<div class="content">
<SelectDept label="部门" :required="true" v-model="dept"></SelectDept>
<SelectDept label="部门：" :required="true" v-model="dept"></SelectDept>
</div>
</view>
<view class="box">
<view class="box shadow-warp">
<div class="content">
<view class="title mb-2">流程进度图组件</view>
<!-- <view class="title mb-2">流程进度图组件</view> -->
<ProgressMap title="流程历史跟踪" :dataSource="proDataSource"></ProgressMap>
</div>
</view>
<view class="box" v-for="(item, index) in dataSource">
<view class="box shadow-warp" v-for="(item, index) in dataSource">
<view class="content">
<template v-if="index === 0">
<view class="title">万年历组件</view>
<!-- <view class="title">万年历组件</view> -->
<uni-calendar
:showMonth="true"
@change="change"
@@ -42,6 +42,7 @@
<view class="title">{{ item.title }}</view>
<template v-if="['图片预览'].includes(item.title)">
<wd-img
custom-class="imgView"
:width="220"
:height="120"
src="https://jeecgos.oss-cn-beijing.aliyuncs.com/files/site/projectCase/mini/banner/10bdc1.jpg"
@@ -57,42 +58,39 @@
</template>
</view>
</view>
<view class="box gridBox">
<view class="box router shadow-warp">
<wd-button @click="handleSkip('/pages/demo/tree')">树组件</wd-button>
<wd-button @click="handleSkip('/pages/demo/indexBar')">通讯录</wd-button>
<wd-button @click="handleSkip('/pages/demo/selectPicker')">单选多选</wd-button>
<wd-button @click="handleSkip('/pages/demo/form')">表单</wd-button>
</view>
<view class="box gridBox shadow-warp">
<view class="content">
<view class="title">九宫格</view>
<wd-grid :column="3">
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
<wd-grid-item icon="picture" text="文字" />
</wd-grid>
<!-- <view class="title">九宫格</view> -->
<Grid
v-model="gridData"
:column="3"
@itemClik="(item) => toast.info(`点击了${item.text}`)"
></Grid>
</view>
</view>
<view class="box">
<view class="content">
<view class="title">列表</view>
<wd-cell-group border clickable>
<wd-cell-group border clickable custom-class="shadow-warp">
<wd-cell title="组织管理" is-link icon="computer"></wd-cell>
<wd-cell title="安全设置" is-link icon="setting"></wd-cell>
<wd-cell title="个人设置" is-link icon="user"></wd-cell>
<wd-cell title="退出登录" is-link icon="email"></wd-cell>
<wd-cell title="退出登录" is-link icon="login"></wd-cell>
</wd-cell-group>
</view>
</view>
<view class="box">
<view class="box shadow-warp p-3">
<view class="content">
<view class="title">提示</view>
<!-- <view class="title">提示</view> -->
<view class="flex flex-col">
<wd-button custom-class="mb-2" @click="handleToast(0)">常规</wd-button>
<wd-button custom-class="mb-2" @click="handleToast(1)">警告</wd-button>
<wd-button custom-class="mb-2" @click="handleToast(2)">成功</wd-button>
<wd-button custom-class="mb-2" @click="handleToast(3)">错误</wd-button>
<wd-button custom-class="mb-2" @click="handleToast(4)">错误</wd-button>
<wd-button custom-class="mb-2 info" @click="handleToast(0)">常规</wd-button>
<wd-button custom-class="mb-2 warning" @click="handleToast(1)">警告</wd-button>
<wd-button custom-class="mb-2 success" @click="handleToast(2)">成功</wd-button>
<wd-button custom-class="mb-2 error" @click="handleToast(3)">错误</wd-button>
<wd-button custom-class="mb-2 basic" @click="handleToast(4)">
基本用法(无icon)
</wd-button>
<wd-button @click="handleConfirm">确认提示</wd-button>
</view>
</view>
@@ -106,6 +104,8 @@
import { ref } from 'vue'
import { useRouter } from '@/plugin/uni-mini-router'
import { useToast, useMessage, useNotify } from 'wot-design-uni'
import { us, os } from '@/common/work'
import Grid from '@/components/Grid/Grid.vue'
const toast = useToast()
const user = ref('')
@@ -115,6 +115,12 @@ const { showNotify, closeNotify } = useNotify()
const router = useRouter()
const selected = ref([])
const gridData = ref([])
us.data.forEach((item: any, index) => {
if (index < 9) {
gridData.value.push({ text: item.title, img: item.icon, itemKey: index })
}
})
// 图片预览
const imgPreview = ref({
show: false,
@@ -154,11 +160,15 @@ const proDataSource = [
]
const dataSource = ref([
{ title: '万年历组件' },
{ title: '树示例', path: '/pages/demo/tree' },
{ title: '通讯录', path: '/pages/demo/indexBar' },
{ title: '图片预览' },
{ title: '单选多选', path: '/pages/demo/selectPicker' },
{ title: '表单', path: '/pages/demo/form' },
// {
// group: [
// { title: '树组件', path: '/pages/demo/tree' },
// { title: '通讯录', path: '/pages/demo/indexBar' },
// { title: '单选多选', path: '/pages/demo/selectPicker' },
// { title: '表单', path: '/pages/demo/form' },
// ],
// },
])
const handleSkip = (path) => {
router.push({ path: path })
@@ -166,19 +176,23 @@ const handleSkip = (path) => {
const handleToast = (value) => {
switch (value) {
case 0:
toast.info('常规提示信息')
// 909cb8
toast.info({ msg: '常规提示信息', duration: 10000 })
break
case 1:
toast.warning('提示信息')
// f0863b
toast.warning({ msg: '提示信息', duration: 10000 })
break
case 2:
toast.success('操作成功')
// 33d19d
toast.success({ msg: '操作成功', duration: 10000 })
break
case 3:
toast.error('手机验证码输入错误，请重新输入')
// f04550
toast.error({ msg: '手机验证码输入错误，请重新输入', duration: 10000 })
break
case 4:
toast.show('普通提示信息')
toast.show({ msg: '手机验证码输入错误，请重新输入', duration: 10000 })
break
}
}
@@ -205,32 +219,63 @@ const handleConfirm = (params) => {
.box {
background-color: #fff;
margin: 16px;
margin: 25px 16px;
.title {
padding: 10px;
padding-bottom: 0;
font-size: 30upx;
font-weight: bolder;
color: #e4680a;
font-size: 15;
color: #666666;
margin-bottom: 20upx;
}
.wd-grid-item {
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
&:nth-child(1),
&:nth-child(2),
&:nth-child(3) {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
&:nth-child(3n) {
border-right: none;
}
}
.content {
:deep(.wd-button),
:deep(.wd-img) {
:deep(.imgView) {
margin: 10px;
}
:deep(.wd-button) {
&.info {
background-color: #909cb8;
}
&.warning {
background-color: #f0863b;
}
&.success {
background-color: #33d19d;
}
&.error {
background-color: #f04550;
}
}
}
}
.router {
padding: 30px 15px;
display: flex;
flex-wrap: wrap;
.wd-button {
margin-bottom: 15px;
&:nth-child(3),
&:nth-child(4) {
margin-bottom: 0;
}
}
}
:deep(.wd-cell-group) {
margin: 0 26upx;
border-radius: 18upx;
overflow: hidden;
--wot-cell-line-height: 32px;
.wd-icon {
margin-right: 10px;
}
.wd-cell {
--wot-cell-title-fs: 15px;
--wot-cell-title-color: var(--color-gray);
.wd-cell__left {
font-size: 15px;
font-weight: 300;
}
}
}
</style>

34
src/pages/demo/form.vue
View File

@@ -11,19 +11,29 @@
<template>
<PageLayout navTitle="表单">
<wd-form ref="form" :model="model">
<wd-cell-group border>
<wd-cell-group border class="mt-10px mb-10px">
<wd-input
label="姓名"
label-width="100px"
label-width="80px"
prop="value1"
clearable
v-model="model.value1"
placeholder="姓名"
:rules="[{ required: true, message: '请填写姓名' }]"
/>
<wd-picker
label="性别"
label-width="80px"
prop="value3"
:columns="columns"
v-model="model.value3"
:rules="[{ required: true, message: '请选择性别' }]"
/>
</wd-cell-group>
<wd-cell-group border class="mb-10px">
<wd-input
label="密码"
label-width="100px"
label-width="80px"
prop="value2"
show-password
clearable
@@ -31,21 +41,19 @@
placeholder="请输入密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<wd-picker
label="性别"
prop="value3"
:columns="columns"
v-model="model.value3"
:rules="[{ required: true, message: '请选择性别' }]"
/>
<wd-select-picker
label="爱好"
label-width="80px"
prop="value4"
v-model="model.value4"
:columns="selectColumns"
:rules="[{ required: true, message: '请选择爱好' }]"
></wd-select-picker>
<wd-calendar prop="value5" v-model="model.value5" label="出生" />
</wd-cell-group class="mb-10px">
<wd-cell-group border>
<wd-calendar label-width="80px" prop="value5" v-model="model.value5" label="&nbsp;&nbsp;&nbsp;出生" />
</wd-cell-group>
<view class="footer">
<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
@@ -109,5 +117,7 @@ function handleSubmit() {
</script>
<style lang="scss" scoped>
//
.footer{
margin: 10px;
}
</style>

23
src/pages/demo/tree.vue
View File

@@ -28,9 +28,9 @@
<wd-button @click="doCheckedTree(['211', '222'], false)">取消选中指定节点</wd-button>
</view>
</view>
<scroll-view scroll-y>
<view class="content p-2">
<view>多选</view>
<scroll-view class="bg-gray-1" scroll-y>
<view class="content p-2 mt-14px">
<view class="title mt-5">多选</view>
<DaTree
ref="DaTreeRef"
:data="roomTreeData"
@@ -42,7 +42,9 @@
@change="handleTreeChange"
@expand="handleExpandChange"
></DaTree>
<view>单选</view>
</view>
<view class="content p-2 mt-14px">
<view class="title mt-5">单选</view>
<DaTree
:data="roomTreeData"
labelField="name"
@@ -52,7 +54,9 @@
@change="handleTreeChange"
@expand="handleExpandChange"
></DaTree>
<view>默认展开指定节点</view>
</view>
<view class="content p-2 mt-14px">
<view class="title mt-5">默认展开指定节点</view>
<DaTree
:data="roomTreeData"
labelField="name"
@@ -62,7 +66,9 @@
@change="handleTreeChange"
@expand="handleExpandChange"
></DaTree>
<view>异步加载数据</view>
</view>
<view class="content p-2 mt-14px mb-14px">
<view class="title mt-5">异步加载数据</view>
<DaTree
:data="roomTreeData"
labelField="name"
@@ -180,7 +186,7 @@ const roomTreeData = ref([
{
id: '232',
name: '人力二部',
append: '更多示例，请下载示例项目查看',
// append: '更多示例，请下载示例项目查看',
},
],
},
@@ -223,5 +229,8 @@ function handleExpandChange(expand, currentItem) {
}
.content {
background-color: #fff;
.title {
font-size: 15px;
}
}
</style>

120
src/pages/index/index.vue
View File

@@ -25,45 +25,22 @@
</swiper>
<scroll-view class="scrollView" :scroll-y="true" scroll-with-animation>
<!--流程服务-->
<!-- <wd-row>-->
<!-- <wd-col :span="12" v-for="(item, index) in middleApps" :key="index">-->
<!-- <wd-img :width="50" :height="50" :src="getFileAccessHttpUrl(item.icon)"></wd-img>-->
<!-- <view class="textBox">-->
<!-- <wd-text :text="item.title"></wd-text>-->
<!-- <wd-text :text="item.subTitle"></wd-text>-->
<!-- </view>-->
<!-- </wd-col>-->
<!-- </wd-row>-->
<!-- <wd-row>-->
<!-- <wd-col :span="12" v-for="(item, index) in middleApps" :key="index">-->
<!-- <wd-img :width="50" :height="50" :src="getFileAccessHttpUrl(item.icon)"></wd-img>-->
<!-- <view class="textBox">-->
<!-- <wd-text :text="item.title"></wd-text>-->
<!-- <wd-text :text="item.subTitle"></wd-text>-->
<!-- </view>-->
<!-- </wd-col>-->
<!-- </wd-row>-->
<!--常用服务-->
<view class="serveBox">
<view class="title">
<view class="dot"></view>
<wd-text text="常用服务"></wd-text>
</view>
<wd-grid :column="4" clickable>
<template v-for="(item, index) in usList" :key="index">
<wd-grid-item
:custom-class="item.enabled && 'enabled'"
:text="item.title"
use-icon-slot
@itemclick="goPage(item)"
>
<template #icon>
<image class="slot-img" :src="item.icon" />
</template>
</wd-grid-item>
</template>
<wd-grid-item
custom-class="enabled"
text="更多"
use-icon-slot
@itemclick="goPageMore('common')"
>
<template #icon>
<image class="slot-img" src="/static/index/128/more.png" />
</template>
</wd-grid-item>
</wd-grid>
<Grid :column="4" v-model="usList" @itemClik="goPage"></Grid>
</view>
<!--其他服务-->
<view class="serveBox">
@@ -71,25 +48,7 @@
<view class="dot"></view>
<wd-text text="其他服务"></wd-text>
</view>
<wd-grid :column="4" clickable>
<template v-for="(item, index) in osList" :key="index">
<wd-grid-item :text="item.title" use-icon-slot>
<template #icon>
<image class="slot-img" :src="item.icon" />
</template>
</wd-grid-item>
</template>
<wd-grid-item
custom-class="enabled"
text="更多"
use-icon-slot
@itemclick="goPageMore('other')"
>
<template #icon>
<image class="slot-img" src="/static/index/128/more.png" />
</template>
</wd-grid-item>
</wd-grid>
<Grid :column="4" v-model="osList" @itemClik="goPage"></Grid>
</view>
</scroll-view>
</PageLayout>
@@ -105,6 +64,8 @@ import { cache, getFileAccessHttpUrl, hasRoute } from '@/common/uitls'
import { onLaunch, onShow, onHide, onLoad, onReady } from '@dcloudio/uni-app'
import { useToast, useMessage, useNotify } from 'wot-design-uni'
import { useRouter } from '@/plugin/uni-mini-router'
import Grid from '@/components/Grid/Grid.vue'
import {
ACCESS_TOKEN,
USER_NAME,
@@ -120,7 +81,7 @@ defineOptions({
options: {
// apply-shared‌：当前页面样式会影响到子组件样式.(小程序)
// shared‌：当前页面样式影响到子组件，子组件样式也会影响到当前页面.(小程序)
styleIsolation: '‌apply-shared‌',
styleIsolation: 'shared',
},
})
const toast = useToast()
@@ -141,6 +102,10 @@ const goPage = (item) => {
if (!page) {
toast.info('该功能暂未实现')
} else {
if (['other', 'common'].includes(page)) {
goPageMore(page)
return
}
if (page === 'annotationList') {
msgCount.value = 0
}
@@ -206,8 +171,30 @@ onReady(() => {
})
if (isLocalConfig) {
usList.value = us.data
osList.value = os.data
usList.value = us.data.map((item) => ({
...item,
text: item.title,
img: item.icon,
itemKey: item.routeIndex,
}))
osList.value = os.data.map((item) => ({
...item,
text: item.title,
img: item.icon,
itemKey: item.routeIndex,
}))
usList.value.push({
text: '更多',
img: '/static/index/128/more.png',
routeIndex: 'other',
itemKey: 'other',
})
osList.value.push({
text: '更多',
img: '/static/index/128/more.png',
routeIndex: 'common',
itemKey: 'common',
})
middleApps.value = [
{
icon: 'https://static.jeecg.com/upload/test/line2_icon1_1595818065964.png',
@@ -291,7 +278,7 @@ if (isLocalConfig) {
align-items: center;
justify-content: center;
&:first-child {
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(165, 165, 165, 0.1);
}
.wd-img {
margin: 20upx;
@@ -329,7 +316,7 @@ if (isLocalConfig) {
display: flex;
align-items: center;
padding-left: 30upx;
height: 90upx;
height: 52px;
.dot {
width: 14upx;
height: 14upx;
@@ -339,24 +326,7 @@ if (isLocalConfig) {
}
.wd-text {
color: #666;
font-size: 30upx;
}
}
:deep(.wd-grid-item) {
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
&:nth-child(1),
&:nth-child(2),
&:nth-child(3),
&:nth-child(4) {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
&:nth-child(4n) {
border-right: none;
}
.slot-img {
height: 28px;
width: 28px;
font-size: 15px;
}
}
}

32
src/pages/login/login.vue
View File

@@ -8,6 +8,7 @@
</route>
<template>
<PageLayout :navbarShow="false">
<view class="page-container">
<view class="text-center">
<image :src="compLogo" mode="aspectFit" class="logo"></image>
@@ -16,12 +17,12 @@
<view v-if="loginWay == 1" class="account-login-area">
<view class="box account">
<wd-icon name="user" size="15px"></wd-icon>
<wd-text text="账号：" color="#000"></wd-text>
<wd-text text="账号："></wd-text>
<wd-input placeholder="请输入账号" v-model.trim="userName"></wd-input>
</view>
<view class="box password">
<wd-icon name="lock-on" size="15px"></wd-icon>
<wd-text text="密码：" color="#000"></wd-text>
<wd-text text="密码："></wd-text>
<input
class="uni-input"
placeholder="请输入密码"
@@ -64,7 +65,7 @@
</view>
</view>
<view class="btn-area text-center">
<wd-button custom-class="mr-5 align-top" :loading="loading" @click="hanldeLogin">
<wd-button custom-class="mr-30px align-top" :loading="loading" @click="hanldeLogin">
{{ loading ? '登录...' : '登录' }}
</wd-button>
<wd-button v-if="loginWay == 2" plain hairline @click="toggleLoginWay(1)">
@@ -77,6 +78,7 @@
</view>
<wd-notify />
</view>
</PageLayout>
</template>
<script lang="ts" setup>
@@ -90,7 +92,8 @@ import {
USER_INFO,
APP_ROUTE,
APP_CONFIG,
HOME_CONFIG_EXPIRED_TIME, HOME_PAGE,
HOME_CONFIG_EXPIRED_TIME,
HOME_PAGE,
} from '@/common/constants'
import { cache, getFileAccessHttpUrl } from '@/common/uitls'
@@ -311,7 +314,7 @@ const checkToken = () => {
// 超过2小时过期
clearUserInfo()
} else {
router.pushTab({ path: HOME_PAGE})
router.pushTab({ path: HOME_PAGE })
}
} else {
clearUserInfo()
@@ -335,6 +338,8 @@ if (isLocalConfig === false) {
padding: 0 20upx;
padding-top: 100upx;
position: relative;
font-size: 15px;
color: var(--UI-FG-0);
.logo {
width: 200upx;
height: 150px;
@@ -343,8 +348,8 @@ if (isLocalConfig === false) {
font-size: 58upx;
}
.enter-area {
padding-top: 100upx;
width: 90%;
padding-top: 75px;
width: 87%;
margin: 0 auto 60upx;
.box {
display: flex;
@@ -379,6 +384,19 @@ if (isLocalConfig === false) {
:deep(.sendSMSBtn) {
margin-left: 20upx;
}
:deep(.wd-icon-view),
:deep(.wd-icon-eye-close) {
color: #555;
}
}
.btn-area {
:deep(.wd-button) {
--wot-button-medium-height: 41px;
--wot-button-medium-fs: 16px;
--wot-button-plain-bg-color: transparent;
min-width: 100px;
box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2);
}
}
}
</style>

6
src/pages/message/components/chatList.vue
View File

@@ -229,6 +229,12 @@ const handleGo = (item) => {
.uni-list-chat__content-title {
color: #9ca3af;
}
.uni-list-chat__content-title {
font-size: 15px;
}
.uni-list-chat__header {
background-color: #eee;
}
}
:deep(.wd-popup) {
&.wd-popup--bottom {

15
src/pages/user/people.vue
View File

@@ -272,9 +272,12 @@ onLoad(() => {
}
.info-area {
display: flex;
padding: 20upx;
padding: 30upx;
background-color: #fff;
color: #8799a3;
:deep(.wd-text) {
color: var(--color-gray);
}
.user,
.job {
flex: 1;
@@ -303,9 +306,17 @@ onLoad(() => {
}
}
}
.wd-cell-group {
:deep(.wd-cell-group) {
margin: 0 26upx;
border-radius: 18upx;
overflow: hidden;
--wot-cell-line-height: 32px;
.wd-cell {
--wot-cell-title-fs: 15px;
--wot-cell-title-color: var(--color-gray);
.wd-cell__left {
font-size: 15px;
}
}
}
</style>

BIN
src/static/tabbar/tabbar-home-2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 995 B

BIN
src/static/tabbar/tabbar-home.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/static/tabbar/tabbar-message-2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/static/tabbar/tabbar-message.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/static/tabbar/tabbar-user-2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/static/tabbar/tabbar-user.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/static/tabbar/tabbar-workHome-2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/static/tabbar/tabbar-workHome.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

67
src/style/index.scss
View File

@@ -11,17 +11,49 @@
:root,
page {
// 修改按主题色
// --wot-color-theme: #37c2bc;
// 修改按钮背景色
// --wot-button-primary-bg-color: green;
.uni-tabbar__label {
margin-top: 1px !important;
}
background-color: #f1f1f1;
--UI-BG: #fff;
--UI-BG-1: #f7f7f7;
--UI-BG-2: #fff;
--UI-BG-3: #f7f7f7;
--UI-BG-4: #4c4c4c;
--UI-BG-5: #fff;
--UI-FG: #000;
--UI-FG-0: rgba(0, 0, 0, 0.9);
--UI-FG-HALF: rgba(0, 0, 0, 0.9);
--UI-FG-1: rgba(0, 0, 0, 0.5);
--UI-FG-2: rgba(0, 0, 0, 0.3);
--UI-FG-3: rgba(0, 0, 0, 0.1);
--color-gray: #8799a3;
.text-grey,
.line-grey,
.lines-grey {
color: var(--color-gray);
}
// 主题色
--wot-color-theme: #0081ff;
// 导航
--wot-navbar-color: #fff;
--wot-navbar-desc-font-color: #fff;
// 重置wot-design-uni
.wd-button.is-round {
border-radius: 6px !important;
// 文字
--wot-text-info-color: var(--UI-FG-0);
// 输入框
--wot-input-color: #555;
// cell
// 重置 wot-design-uni
.wd-button {
&.is-round {
border-radius: 4px !important;
}
&.is-plain {
overflow: visible;
}
}
.wd-cell__left {
align-items: center;
@@ -33,4 +65,23 @@ page {
height: calc(100vh - 44px);
}
}
.wd-input {
&.is-cell {
--wot-cell-title-color: var(--UI-FG-0);
--wot-input-cell-padding: 14px;
--wot-input-fs: 15px;
.wd-input__label.is-required::after {
top: 6px;
}
}
}
// 万年历组件
.uni-calendar {
.uni-calendar__header-text {
text-align: center;
width: 100px;
font-size: 24px;
color: #333;
}
}
}

270
src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue
View File

@@ -1,13 +1,22 @@
<template>
<view class="uni-calendar">
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean"></view>
<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
<view
v-if="!insert && show"
class="uni-calendar__mask"
:class="{ 'uni-calendar--mask-show': aniMaskShow }"
@click="clean"
></view>
<view
v-if="insert || show"
class="uni-calendar__content"
:class="{ 'uni-calendar--fixed': !insert, 'uni-calendar--ani-show': aniMaskShow }"
>
<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
<view class="uni-calendar__header-btn-box" @click="close">
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{cancelText}}</text>
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{ cancelText }}</text>
</view>
<view class="uni-calendar__header-btn-box" @click="confirm">
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{okText}}</text>
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{ okText }}</text>
</view>
</view>
<view class="uni-calendar__header">
@@ -15,44 +24,56 @@
<view class="uni-calendar__header-btn uni-calendar--left"></view>
</view>
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
<text class="uni-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
<text class="uni-calendar__header-text">
{{ (nowDate.year || '') + '年' + (nowDate.month || '') + '月' }}
</text>
</picker>
<view class="uni-calendar__header-btn-box" @click.stop="next">
<view class="uni-calendar__header-btn uni-calendar--right"></view>
</view>
<text class="uni-calendar__backtoday" @click="backToday">{{todayText}}</text>
<text class="uni-calendar__backtoday" @click="backToday">{{ todayText }}</text>
</view>
<view class="uni-calendar__box">
<view v-if="showMonth" class="uni-calendar__box-bg">
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
<text class="uni-calendar__box-bg-text">{{ nowDate.month }}</text>
</view>
<view class="uni-calendar__weeks">
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
<text class="uni-calendar__weeks-day-text">{{ SUNText }}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{monText}}</text>
<text class="uni-calendar__weeks-day-text">{{ monText }}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
<text class="uni-calendar__weeks-day-text">{{ TUEText }}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
<text class="uni-calendar__weeks-day-text">{{ WEDText }}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{THUText}}</text>
<text class="uni-calendar__weeks-day-text">{{ THUText }}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
<text class="uni-calendar__weeks-day-text">{{ FRIText }}</text>
</view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SATText}}</text>
<text class="uni-calendar__weeks-day-text">{{ SATText }}</text>
</view>
</view>
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item>
<view class="uni-calendar__weeks" v-for="(item, weekIndex) in weeks" :key="weekIndex">
<view
class="uni-calendar__weeks-item"
v-for="(weeks, weeksIndex) in item"
:key="weeksIndex"
>
<calendar-item
class="uni-calendar-item--hook"
:weeks="weeks"
:calendar="calendar"
:selected="selected"
:lunar="lunar"
@change="choiceDate"
></calendar-item>
</view>
</view>
</view>
@@ -61,14 +82,14 @@
</template>
<script>
import Calendar from './util.js';
import CalendarItem from './uni-calendar-item.vue'
import Calendar from './util.js'
import CalendarItem from './uni-calendar-item.vue'
import { initVueI18n } from '@dcloudio/uni-i18n'
import i18nMessages from './i18n/index.js'
const { t } = initVueI18n(i18nMessages)
import { initVueI18n } from '@dcloudio/uni-i18n'
import i18nMessages from './i18n/index.js'
const { t } = initVueI18n(i18nMessages)
/**
/**
* Calendar 日历
* @description 日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
@@ -88,50 +109,50 @@
* @event {Function} monthSwitch 切换月份时触发
* @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
*/
export default {
export default {
components: {
CalendarItem
CalendarItem,
},
emits:['close','confirm','change','monthSwitch'],
emits: ['close', 'confirm', 'change', 'monthSwitch'],
props: {
date: {
type: String,
default: ''
default: '',
},
selected: {
type: Array,
default () {
default() {
return []
}
},
},
lunar: {
type: Boolean,
default: false
default: false,
},
startDate: {
type: String,
default: ''
default: '',
},
endDate: {
type: String,
default: ''
default: '',
},
range: {
type: Boolean,
default: false
default: false,
},
insert: {
type: Boolean,
default: true
default: true,
},
showMonth: {
type: Boolean,
default: true
default: true,
},
clearDate: {
type: Boolean,
default: true
}
default: true,
},
},
data() {
return {
@@ -139,43 +160,43 @@
weeks: [],
calendar: {},
nowDate: '',
aniMaskShow: false
aniMaskShow: false,
}
},
computed:{
computed: {
/**
* for i18n
*/
okText() {
return t("uni-calender.ok")
return t('uni-calender.ok')
},
cancelText() {
return t("uni-calender.cancel")
return t('uni-calender.cancel')
},
todayText() {
return t("uni-calender.today")
return t('uni-calender.today')
},
monText() {
return t("uni-calender.MON")
return t('uni-calender.MON')
},
TUEText() {
return t("uni-calender.TUE")
return t('uni-calender.TUE')
},
WEDText() {
return t("uni-calender.WED")
return t('uni-calender.WED')
},
THUText() {
return t("uni-calender.THU")
return t('uni-calender.THU')
},
FRIText() {
return t("uni-calender.FRI")
return t('uni-calender.FRI')
},
SATText() {
return t("uni-calender.SAT")
return t('uni-calender.SAT')
},
SUNText() {
return t("uni-calender.SUN")
return t('uni-calender.SUN')
},
},
watch: {
@@ -183,12 +204,12 @@
// this.cale.setDate(newVal)
this.init(newVal)
},
startDate(val){
startDate(val) {
this.cale.resetSatrtDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
endDate(val){
endDate(val) {
this.cale.resetEndDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
@@ -196,7 +217,7 @@
selected(newVal) {
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
this.weeks = this.cale.weeks
}
},
},
created() {
this.cale = new Calendar({
@@ -214,10 +235,10 @@
const value = e.detail.value + '-1'
this.setDate(value)
const { year,month } = this.cale.getDate(value)
const { year, month } = this.cale.getDate(value)
this.$emit('monthSwitch', {
year,
month
month,
})
},
/**
@@ -276,13 +297,10 @@
* 选择月份触发
*/
monthSwitch() {
let {
year,
month
} = this.nowDate
let { year, month } = this.nowDate
this.$emit('monthSwitch', {
year,
month: Number(month)
month: Number(month),
})
},
/**
@@ -290,14 +308,7 @@
* @param {Object} name
*/
setEmit(name) {
let {
year,
month,
date,
fullDate,
lunar,
extraInfo
} = this.calendar
let { year, month, date, fullDate, lunar, extraInfo } = this.calendar
this.$emit(name, {
range: this.cale.multipleStatus,
year,
@@ -305,7 +316,7 @@
date,
fulldate: fullDate,
lunar,
extraInfo: extraInfo || {}
extraInfo: extraInfo || {},
})
},
/**
@@ -330,7 +341,7 @@
this.init(date.fullDate)
if(nowYearMonth !== todayYearMonth) {
if (nowYearMonth !== todayYearMonth) {
this.monthSwitch()
}
@@ -343,7 +354,6 @@
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
this.setDate(preDate)
this.monthSwitch()
},
/**
* 下个月
@@ -361,28 +371,31 @@
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.nowDate = this.cale.getInfo(date)
}
}
}
},
},
}
</script>
<style lang="scss" scoped>
$uni-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
$uni-border-color: #EDEDED;
$uni-text-color: #333;
$uni-bg-color-hover:#f1f1f1;
$uni-font-size-base:14px;
$uni-text-color-placeholder: #808080;
$uni-color-subtitle: #555555;
$uni-text-color-grey:#999;
.uni-calendar {
$uni-bg-color-mask: rgba(
$color: #000000,
$alpha: 0.4,
);
$uni-border-color: #ededed;
$uni-text-color: #333;
$uni-bg-color-hover: #f1f1f1;
$uni-font-size-base: 14px;
$uni-text-color-placeholder: #808080;
$uni-color-subtitle: #555555;
$uni-text-color-grey: #999;
.uni-calendar {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
}
.uni-calendar__mask {
.uni-calendar__mask {
position: fixed;
bottom: 0;
top: 0;
@@ -395,13 +408,13 @@
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
}
.uni-calendar--mask-show {
opacity: 1
}
.uni-calendar--mask-show {
opacity: 1;
}
.uni-calendar--fixed {
.uni-calendar--fixed {
position: fixed;
/* #ifdef APP-NVUE */
bottom: 0;
@@ -415,17 +428,17 @@
bottom: calc(var(--window-bottom));
z-index: 99;
/* #endif */
}
}
.uni-calendar--ani-show {
.uni-calendar--ani-show {
transform: translateY(0);
}
}
.uni-calendar__content {
.uni-calendar__content {
background-color: #fff;
}
}
.uni-calendar__header {
.uni-calendar__header {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
@@ -437,9 +450,9 @@
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 1px;
}
}
.uni-calendar--fixed-top {
.uni-calendar--fixed-top {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
@@ -448,13 +461,13 @@
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 1px;
}
}
.uni-calendar--fixed-width {
.uni-calendar--fixed-width {
width: 50px;
}
}
.uni-calendar__backtoday {
.uni-calendar__backtoday {
position: absolute;
right: 0;
top: 25rpx;
@@ -467,16 +480,16 @@
border-bottom-left-radius: 25px;
color: $uni-text-color;
background-color: $uni-bg-color-hover;
}
}
.uni-calendar__header-text {
.uni-calendar__header-text {
text-align: center;
width: 100px;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
}
.uni-calendar__header-btn-box {
.uni-calendar__header-btn-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
@@ -485,9 +498,9 @@
justify-content: center;
width: 50px;
height: 50px;
}
}
.uni-calendar__header-btn {
.uni-calendar__header-btn {
width: 10px;
height: 10px;
border-left-color: $uni-text-color-placeholder;
@@ -496,30 +509,29 @@
border-top-color: $uni-color-subtitle;
border-top-style: solid;
border-top-width: 2px;
}
}
.uni-calendar--left {
.uni-calendar--left {
transform: rotate(-45deg);
}
}
.uni-calendar--right {
.uni-calendar--right {
transform: rotate(135deg);
}
}
.uni-calendar__weeks {
.uni-calendar__weeks {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
}
.uni-calendar__weeks-item {
.uni-calendar__weeks-item {
flex: 1;
}
}
.uni-calendar__weeks-day {
.uni-calendar__weeks-day {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
@@ -528,20 +540,20 @@
justify-content: center;
align-items: center;
height: 45px;
border-bottom-color: #F5F5F5;
border-bottom-color: #f5f5f5;
border-bottom-style: solid;
border-bottom-width: 1px;
}
}
.uni-calendar__weeks-day-text {
.uni-calendar__weeks-day-text {
font-size: 14px;
}
}
.uni-calendar__box {
.uni-calendar__box {
position: relative;
}
}
.uni-calendar__box-bg {
.uni-calendar__box-bg {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
@@ -552,9 +564,9 @@
left: 0;
right: 0;
bottom: 0;
}
}
.uni-calendar__box-bg-text {
.uni-calendar__box-bg-text {
font-size: 200px;
font-weight: bold;
color: $uni-text-color-grey;
@@ -563,5 +575,5 @@
/* #ifndef APP-NVUE */
line-height: 1;
/* #endif */
}
}
</style>