排队取号页面搭建
This commit is contained in:
parent
169ae83a66
commit
a061d464c7
|
|
@ -0,0 +1,195 @@
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 顶部标题栏 -->
|
||||||
|
<view class="header">
|
||||||
|
<text class="header-left">环江毛南族自治县政务服务中心</text>
|
||||||
|
<text class="header-center">自助取号机</text>
|
||||||
|
<view class="btn-group">
|
||||||
|
<view class="btn" v-if="backBtn" @click="back">
|
||||||
|
<img src="../../static/images/home/back_icon.png" alt="" />
|
||||||
|
<text class="btn-text">返回</text>
|
||||||
|
</view>
|
||||||
|
<view class="btn" v-if="logoutBtn" @click="logout">
|
||||||
|
<img src="../../static/images/home/logout_icon.png" alt="" />
|
||||||
|
<text class="btn-text">退出</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 主体内容区 -->
|
||||||
|
<view class="main">
|
||||||
|
<slot name="main"></slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部状态栏 -->
|
||||||
|
<view class="footer">
|
||||||
|
<text class="footer-left">本机编号: YJS0001</text>
|
||||||
|
<text class="footer-right">{{ currentTime }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
backBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
logoutBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentTime: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.updateTime()
|
||||||
|
setInterval(() => {
|
||||||
|
this.updateTime()
|
||||||
|
}, 1000)
|
||||||
|
// APP端强制横屏
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
plus.screen.lockOrientation('landscape-primary')
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateTime() {
|
||||||
|
const now = new Date()
|
||||||
|
const year = now.getFullYear()
|
||||||
|
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(now.getDate()).padStart(2, '0')
|
||||||
|
const hours = String(now.getHours()).padStart(2, '0')
|
||||||
|
const minutes = String(now.getMinutes()).padStart(2, '0')
|
||||||
|
const seconds = String(now.getSeconds()).padStart(2, '0')
|
||||||
|
this.currentTime = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
|
||||||
|
},
|
||||||
|
back() {
|
||||||
|
this.$emit('handleBack')
|
||||||
|
},
|
||||||
|
logout() {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '确定要退出吗？',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/home/home'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 全屏自适应容器 - 百分比布局 */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部标题栏 - 百分比高度 */
|
||||||
|
.header {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 22%;
|
||||||
|
background: url('../../static/images/home/top_bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
padding: 35px 4% 0;
|
||||||
|
border-radius: 0 0 2% 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-center {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 35px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
position: absolute;
|
||||||
|
right: 4%;
|
||||||
|
top: 35px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 160px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 30px;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 30px;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-right: 15px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 主体内容区 - 自动占满剩余空间 */
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: url('../../static/images/home/bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 底部状态栏 - 百分比高度 */
|
||||||
|
.footer {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
background: url('../../static/images/home/footer_bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 3%;
|
||||||
|
border-radius: 2% 2% 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-left,
|
||||||
|
.footer-right {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 3vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
40
pages.json
40
pages.json
|
|
@ -4,71 +4,55 @@
|
||||||
"^wf-(.*)": "@/components/wf-ui/components/wf-$1/wf-$1.vue"
|
"^wf-(.*)": "@/components/wf-ui/components/wf-$1/wf-$1.vue"
|
||||||
},
|
},
|
||||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||||
{
|
|
||||||
"path": "pages/loading/index",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "云预约",
|
|
||||||
"enablePullDownRefresh": false,
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/home/home",
|
"path": "pages/home/home",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "云预约",
|
"navigationBarTitleText": "自助取号机",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/reserve/index",
|
"path": "pages/home/ticket",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "网上预约",
|
"navigationBarTitleText": "自助取号机",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/reserve/notice",
|
"path": "pages/home/theme",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "预约须知",
|
"navigationBarTitleText": "自助取号机",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/reserve/timeSelect",
|
"path": "pages/home/dept",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "预约时间",
|
"navigationBarTitleText": "自助取号机",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/reserve/confirm",
|
"path": "pages/home/businessList",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "预约确认",
|
"navigationBarTitleText": "自助取号机",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/myReserve/index",
|
"path": "pages/home/guide",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "我的预约",
|
"navigationBarTitleText": "自助取号机",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/myReserve/detail",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "预约详情",
|
|
||||||
"enablePullDownRefresh": false,
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
|
|
||||||
back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="CRUD 操作"
|
|
||||||
title-color="#fff">
|
|
||||||
</u-navbar>
|
|
||||||
<view class="u-demo">
|
|
||||||
<view class="u-demo-wrap">
|
|
||||||
<view class="u-demo-title">很快到来</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data: {}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,441 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<view class="safe-area-inset-bottom">
|
|
||||||
<rider-curd
|
|
||||||
v-model="form"
|
|
||||||
:option="option"
|
|
||||||
:data="list"
|
|
||||||
:rules="rules"
|
|
||||||
:readonly.sync="readonly"
|
|
||||||
formType="uniForm"
|
|
||||||
@search="onSearch"
|
|
||||||
@action-click="onActionClick"
|
|
||||||
@submit="onSubmit"
|
|
||||||
@del="onRemove"
|
|
||||||
ref="crud"
|
|
||||||
>
|
|
||||||
<template #form>
|
|
||||||
<view class="uni-form">
|
|
||||||
<view class="uni-form-item">
|
|
||||||
<view class="uni-form-item-label uni-form-item-required">通知标题</view>
|
|
||||||
<view class="uni-form-item-input">
|
|
||||||
<input
|
|
||||||
class="uni-input"
|
|
||||||
v-model="form.title"
|
|
||||||
placeholder="通知标题"
|
|
||||||
:placeholder-style="placeholderStyle"
|
|
||||||
:disabled="readonly"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="uni-form-item">
|
|
||||||
<view class="uni-form-item-label uni-form-item-required">通知类型</view>
|
|
||||||
<view class="uni-form-item-input">
|
|
||||||
<picker
|
|
||||||
@change="e => onConfirm(e, 'category')"
|
|
||||||
:range="categoryList"
|
|
||||||
range-key="dictValue"
|
|
||||||
class="curdPicker"
|
|
||||||
:disabled="readonly"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
class="uni-input"
|
|
||||||
v-model="formLabel.category"
|
|
||||||
disabled
|
|
||||||
placeholder="通知类型"
|
|
||||||
:placeholder-style="placeholderStyle"
|
|
||||||
/>
|
|
||||||
</picker>
|
|
||||||
</view>
|
|
||||||
<view class="uni-form-item-icon"><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
|
|
||||||
</view>
|
|
||||||
<view class="uni-form-item">
|
|
||||||
<view class="uni-form-item-label uni-form-item-required">通知日期</view>
|
|
||||||
<view class="uni-form-item-input">
|
|
||||||
<picker
|
|
||||||
@change="e => onConfirm(e, 'releaseTime')"
|
|
||||||
mode="date"
|
|
||||||
:value="form.releaseTime"
|
|
||||||
:start="startDate"
|
|
||||||
:end="endDate"
|
|
||||||
class="curdPicker"
|
|
||||||
:disabled="readonly"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
class="uni-input"
|
|
||||||
v-model="form.releaseTime"
|
|
||||||
disabled
|
|
||||||
placeholder="通知日期"
|
|
||||||
:placeholder-style="placeholderStyle"
|
|
||||||
/>
|
|
||||||
</picker>
|
|
||||||
</view>
|
|
||||||
<view class="uni-form-item-icon"><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
|
|
||||||
</view>
|
|
||||||
<view class="uni-form-item">
|
|
||||||
<view class="uni-form-item-label">通知内容</view>
|
|
||||||
<view v-if="!readonly" class="uni-form-item-btn" @click="onRichEdit(form.content)">去编辑</view>
|
|
||||||
</view>
|
|
||||||
<mp-html :content="form.content"></mp-html>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
<template #loadmore>
|
|
||||||
<u-loadmore :status="loadStatus" @loadmore="getList()" />
|
|
||||||
</template>
|
|
||||||
</rider-curd>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import riderCurd from '@/components/rider-crud/index'
|
|
||||||
import mpHtml from '@/components/rider-crud/components/mp-html/mp-html'
|
|
||||||
import { getList, add, update, remove } from '@/api/notice.js'
|
|
||||||
import { dictionary } from '@/api/system/dict.js'
|
|
||||||
import { logo } from '../../common/setting'
|
|
||||||
import { getDicLabel } from '@/components/rider-crud/util/tool.js'
|
|
||||||
export default {
|
|
||||||
components: { riderCurd, mpHtml },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
form: {
|
|
||||||
content: ''
|
|
||||||
},
|
|
||||||
formLabel: {
|
|
||||||
category: '' ,
|
|
||||||
},
|
|
||||||
list: [],
|
|
||||||
params: {
|
|
||||||
current: 1,
|
|
||||||
size: 10
|
|
||||||
},
|
|
||||||
readonly: false, // 查看时控制表单只读
|
|
||||||
labelWidth: 160,
|
|
||||||
placeholderStyle: 'color:rgb(192, 196, 204); font-size:14px',
|
|
||||||
option: {
|
|
||||||
navTitle: 'CRUD 操作', //标题
|
|
||||||
manageBtn: true, // 右上角管理按钮，默认不显示
|
|
||||||
searchShow: true, //是否显示搜索，默认不显示
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '通知标题',
|
|
||||||
prop: 'title'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '通知类型',
|
|
||||||
prop: 'categoryName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '通知日期',
|
|
||||||
prop: 'releaseTime'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
actions: [
|
|
||||||
{
|
|
||||||
name: '编辑', // 操作名称
|
|
||||||
icon: 'edit-pen', //操作图标，有图标文字不显示
|
|
||||||
color: '#333', // 字体颜色
|
|
||||||
fontsize: 30, //字体大小，单位rpx
|
|
||||||
width: 40, // 宽度，单位px
|
|
||||||
background: '#fff' // 菜单按钮背景色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '删除',
|
|
||||||
icon: 'trash',
|
|
||||||
color: '#333',
|
|
||||||
fontsize: 30,
|
|
||||||
width: 40,
|
|
||||||
background: '#fff'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
|
|
||||||
category: [{ required: true, message: '请选择通知类型', trigger: 'change', type: 'number' }],
|
|
||||||
releaseTime: [{ required: true, message: '请选择通知日期', trigger: 'change' }]
|
|
||||||
},
|
|
||||||
loadStatus: 'loadmore', // 列表加载状态
|
|
||||||
checkedSwitch: false,
|
|
||||||
timeShow: false,
|
|
||||||
timeParams: {
|
|
||||||
year: true,
|
|
||||||
month: true,
|
|
||||||
day: true,
|
|
||||||
hour: true,
|
|
||||||
minute: true,
|
|
||||||
second: true
|
|
||||||
},
|
|
||||||
categoryShow: false,
|
|
||||||
categoryList: [], //类型
|
|
||||||
category: '',
|
|
||||||
pagesTotal: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
startDate() {
|
|
||||||
return this.getDate('start')
|
|
||||||
},
|
|
||||||
endDate() {
|
|
||||||
return this.getDate('end')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onShow() {
|
|
||||||
let that = this
|
|
||||||
uni.$on('richBack', function(data) {
|
|
||||||
that.$set(that.form, 'content', data)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onReady() {
|
|
||||||
this.getList(true)
|
|
||||||
this.getCategoryList()
|
|
||||||
},
|
|
||||||
onPullDownRefresh() {
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
onReachBottom() {
|
|
||||||
if (this.loadStatus == 'nomore') return
|
|
||||||
this.getList()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getDate(type) {
|
|
||||||
const date = new Date()
|
|
||||||
let year = date.getFullYear()
|
|
||||||
let month = date.getMonth() + 1
|
|
||||||
let day = date.getDate()
|
|
||||||
if (type === 'start') {
|
|
||||||
year = year - 60
|
|
||||||
} else {
|
|
||||||
year = year + 2
|
|
||||||
}
|
|
||||||
month = month > 9 ? month : '0' + month
|
|
||||||
day = day > 9 ? day : '0' + day
|
|
||||||
return `${year}-${month}-${day}`
|
|
||||||
},
|
|
||||||
// 获取列表
|
|
||||||
getList(override = false) {
|
|
||||||
if (override) {
|
|
||||||
this.params.current = 1
|
|
||||||
}
|
|
||||||
const { size } = this.params
|
|
||||||
getList(this.params)
|
|
||||||
.then(res => {
|
|
||||||
const { records, current } = res.data
|
|
||||||
if (records.length < size) this.loadStatus = 'nomore'
|
|
||||||
else this.loadStatus = 'loadmore'
|
|
||||||
if (override) {
|
|
||||||
this.list = records
|
|
||||||
} else {
|
|
||||||
this.list = this.list.concat(records)
|
|
||||||
}
|
|
||||||
this.params.current++
|
|
||||||
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 通知类型
|
|
||||||
getCategoryList() {
|
|
||||||
dictionary({ code: 'notice' }).then(res => {
|
|
||||||
this.categoryList = res.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// picker确定
|
|
||||||
onConfirm(e, type) {
|
|
||||||
if (type == 'category') {
|
|
||||||
const i = this.categoryList[e.detail.value]
|
|
||||||
this.$set(this.formLabel, type, i.dictValue)
|
|
||||||
this.$set(this.form, type, Number(i.dictKey))
|
|
||||||
} else {
|
|
||||||
this.$set(this.form, type, `${e.detail.value} 12:00:00`)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 编辑富文本
|
|
||||||
onRichEdit(e) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/pages/rich/index?data=${e}`
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 搜索 (自行配置搜索内容)
|
|
||||||
onSearch(val) {
|
|
||||||
this.params = {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
title: val
|
|
||||||
}
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
// 左滑按钮点击
|
|
||||||
onActionClick({ index, data, action, done }) {
|
|
||||||
const { name } = action
|
|
||||||
switch (name) {
|
|
||||||
case '新增':
|
|
||||||
this.formLabel = { category: '' }
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
case '删除':
|
|
||||||
this.onRemove(data.id)
|
|
||||||
break
|
|
||||||
case '查看':
|
|
||||||
this.readonly = true
|
|
||||||
case '编辑':
|
|
||||||
this.formLabel.category = getDicLabel(data.category, this.categoryList)
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 删除
|
|
||||||
onRemove(id) {
|
|
||||||
uni.showModal({
|
|
||||||
title: '确定要删除吗？',
|
|
||||||
success: action => {
|
|
||||||
if (action.confirm) {
|
|
||||||
remove(id).then(() => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '删除成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$refs['crud'].allCheckHide(false)
|
|
||||||
}, 100)
|
|
||||||
// #ifdef APP
|
|
||||||
this.getList(true)
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
// #endif
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 表单提交
|
|
||||||
onSubmit(form, action, unloading, done) {
|
|
||||||
if (action == '新增') {
|
|
||||||
add(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '新增成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
this.formLabel = { category: '' }
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
} else if (action == '编辑') {
|
|
||||||
update(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '编辑成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
this.formLabel = { category: '' }
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
page {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-picker-container {
|
|
||||||
z-index: 99999 !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.nav-right {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: normal;
|
|
||||||
padding-right: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form {
|
|
||||||
&-item {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 20rpx 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #303133;
|
|
||||||
line-height: 70rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&-label {
|
|
||||||
width: 160rpx;
|
|
||||||
|
|
||||||
.required {
|
|
||||||
color: #fa3534;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-required {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: '*';
|
|
||||||
position: absolute;
|
|
||||||
left: -8px;
|
|
||||||
color: #fa3534;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-input {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
.uni-input {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #303133;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-btn {
|
|
||||||
color: #fff;
|
|
||||||
width: auto;
|
|
||||||
font-size: 22rpx;
|
|
||||||
line-height: 50rpx;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
background: linear-gradient(rgb(95, 136, 255), rgb(105, 176, 255));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-item:after {
|
|
||||||
content: ' ';
|
|
||||||
border-bottom-width: 2rpx;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-transform-origin: 0 0;
|
|
||||||
transform-origin: 0 0;
|
|
||||||
width: 199.8%;
|
|
||||||
height: 199.7%;
|
|
||||||
-webkit-transform: scale(0.5, 0.5);
|
|
||||||
transform: scale(0.5, 0.5);
|
|
||||||
border: 0 solid #e4e7ed;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-item:after {
|
|
||||||
border-bottom-width: 2rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,326 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<view class="safe-area-inset-bottom">
|
|
||||||
<rider-curd
|
|
||||||
v-model="form"
|
|
||||||
:option="option"
|
|
||||||
:data="list"
|
|
||||||
:rules="rules"
|
|
||||||
:readonly.sync="readonly"
|
|
||||||
@search="onSearch"
|
|
||||||
@action-click="onActionClick"
|
|
||||||
@submit="onSubmit"
|
|
||||||
@del="onRemove"
|
|
||||||
ref="crud"
|
|
||||||
>
|
|
||||||
<view slot="form">
|
|
||||||
<u-form-item label="通知标题" prop="title" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input v-model="form.title" :disabled="readonly" placeholder="通知标题" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="通知类型" prop="category" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input
|
|
||||||
v-model="formLabel.category"
|
|
||||||
:disabled="readonly"
|
|
||||||
placeholder="通知类型"
|
|
||||||
type="select"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
if (!readonly) categoryShow = true
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="通知日期" prop="releaseTime" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input
|
|
||||||
v-model="form.releaseTime"
|
|
||||||
:disabled="readonly"
|
|
||||||
placeholder="通知日期"
|
|
||||||
type="select"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
if (!readonly) timeShow = true
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="通知内容" :label-width="option.labelWidth || 160" :border-bottom="false">
|
|
||||||
<template #right v-if="!readonly">
|
|
||||||
<u-button
|
|
||||||
@click="onRichEdit(form.content)"
|
|
||||||
ripple
|
|
||||||
:custom-style="{ background: '#FFF6E9', color: '#FAA646' }"
|
|
||||||
size="mini"
|
|
||||||
>
|
|
||||||
去编辑
|
|
||||||
</u-button>
|
|
||||||
</template>
|
|
||||||
</u-form-item>
|
|
||||||
<mp-html :content="form.content"></mp-html>
|
|
||||||
</view>
|
|
||||||
<template #loadmore>
|
|
||||||
<u-loadmore :status="loadStatus" @loadmore="getList()" />
|
|
||||||
</template>
|
|
||||||
</rider-curd>
|
|
||||||
</view>
|
|
||||||
<!-- 通知类型 -->
|
|
||||||
<u-select
|
|
||||||
v-model="categoryShow"
|
|
||||||
:list="categoryList"
|
|
||||||
value-name="dictKey"
|
|
||||||
label-name="dictValue"
|
|
||||||
@confirm="e => onConfirm(e, 'category')"
|
|
||||||
safe-area-inset-bottom
|
|
||||||
></u-select>
|
|
||||||
<!-- 通知日期 -->
|
|
||||||
<u-picker
|
|
||||||
mode="time"
|
|
||||||
v-model="timeShow"
|
|
||||||
:params="timeParams"
|
|
||||||
start-year="2000"
|
|
||||||
end-year="2050"
|
|
||||||
@confirm="e => onConfirm(e, 'releaseTime')"
|
|
||||||
safe-area-inset-bottom
|
|
||||||
></u-picker>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import riderCurd from '@/components/rider-crud/index'
|
|
||||||
import mpHtml from '@/components/rider-crud/components/mp-html/mp-html'
|
|
||||||
import { getList, add, update, remove } from '@/api/notice.js'
|
|
||||||
import { dictionary } from '@/api/system/dict.js'
|
|
||||||
import { logo } from '../../common/setting'
|
|
||||||
import { getDicLabel } from '@/components/rider-crud/util/tool.js'
|
|
||||||
export default {
|
|
||||||
components: { riderCurd, mpHtml },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
loadStatus: 'loadmore', // 列表加载状态
|
|
||||||
checkedSwitch: false, // 默认打开管理
|
|
||||||
form: { content: '' }, // 表单
|
|
||||||
formLabel: {}, // 表单label
|
|
||||||
list: [], // 列表数据
|
|
||||||
params: {
|
|
||||||
// 分页
|
|
||||||
current: 1,
|
|
||||||
size: 10
|
|
||||||
},
|
|
||||||
readonly: false, // 查看时控制表单只读
|
|
||||||
option: {
|
|
||||||
// 组件选项
|
|
||||||
navTitle: '通知公告', //标题
|
|
||||||
manageBtn: true, // 右上角管理按钮，默认不显示
|
|
||||||
searchShow: true, //是否显示搜索，默认不显示
|
|
||||||
searchShow: true, //是否显示搜索，默认不显示
|
|
||||||
labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '通知标题',
|
|
||||||
prop: 'title'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '通知类型',
|
|
||||||
prop: 'categoryName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '通知日期',
|
|
||||||
prop: 'releaseTime'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
actions: [
|
|
||||||
// 左滑操作按钮
|
|
||||||
{
|
|
||||||
name: '编辑', // 操作名称
|
|
||||||
icon: 'edit-pen', //操作图标，有图标文字不显示
|
|
||||||
color: '#333', // 字体颜色
|
|
||||||
fontsize: 30, //字体大小，单位rpx
|
|
||||||
width: 40, // 宽度，单位px
|
|
||||||
background: '#fff' // 菜单按钮背景色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '删除',
|
|
||||||
icon: 'trash',
|
|
||||||
color: '#333',
|
|
||||||
fontsize: 30,
|
|
||||||
width: 40,
|
|
||||||
background: '#fff'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
// 表单校验规则
|
|
||||||
title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
|
|
||||||
category: [{ required: true, message: '请选择通知类型', trigger: 'change', type: 'number' }],
|
|
||||||
releaseTime: [{ required: true, message: '请选择通知日期', trigger: 'change' }]
|
|
||||||
},
|
|
||||||
timeShow: false,
|
|
||||||
timeParams: {
|
|
||||||
year: true,
|
|
||||||
month: true,
|
|
||||||
day: true,
|
|
||||||
hour: true,
|
|
||||||
minute: true,
|
|
||||||
second: true
|
|
||||||
},
|
|
||||||
categoryShow: false,
|
|
||||||
categoryList: [] //类型
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onShow() {
|
|
||||||
let that = this
|
|
||||||
uni.$on('richBack', function(data) {
|
|
||||||
that.$set(that.form, 'content', data)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onReady() {
|
|
||||||
this.getList(true)
|
|
||||||
this.getCategoryList()
|
|
||||||
},
|
|
||||||
onPullDownRefresh() {
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
onReachBottom() {
|
|
||||||
if (this.loadStatus == 'nomore') return
|
|
||||||
this.getList()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 获取列表
|
|
||||||
getList(override = false) {
|
|
||||||
if (override) {
|
|
||||||
this.params.current = 1
|
|
||||||
}
|
|
||||||
const { size } = this.params
|
|
||||||
getList(this.params)
|
|
||||||
.then(res => {
|
|
||||||
const { records, current } = res.data
|
|
||||||
if (records.length < size) this.loadStatus = 'nomore'
|
|
||||||
else this.loadStatus = 'loadmore'
|
|
||||||
if (override) {
|
|
||||||
this.list = records
|
|
||||||
} else {
|
|
||||||
this.list = this.list.concat(records)
|
|
||||||
}
|
|
||||||
this.params.current++
|
|
||||||
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 通知类型
|
|
||||||
getCategoryList() {
|
|
||||||
dictionary({ code: 'notice' }).then(res => {
|
|
||||||
this.categoryList = res.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 类型回调
|
|
||||||
onConfirm(e, type) {
|
|
||||||
if (type == 'category') {
|
|
||||||
this.formLabel[type] = e[0].label
|
|
||||||
this.form.category = Number(e[0].value)
|
|
||||||
} else {
|
|
||||||
this.$set(this.form, 'releaseTime', e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 编辑富文本
|
|
||||||
onRichEdit(e) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/pages/rich/index?data=${e}`
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 搜索 (自行配置搜索内容)
|
|
||||||
onSearch(val) {
|
|
||||||
this.params = {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
title: val
|
|
||||||
}
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
// 左滑按钮点击
|
|
||||||
onActionClick({ index, data, action, done }) {
|
|
||||||
const { name } = action
|
|
||||||
switch (name) {
|
|
||||||
case '新增':
|
|
||||||
this.formLabel = {}
|
|
||||||
this.form = { content: '' }
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
case '删除':
|
|
||||||
this.onRemove(data.id)
|
|
||||||
break
|
|
||||||
case '查看':
|
|
||||||
this.readonly = true
|
|
||||||
case '编辑':
|
|
||||||
this.formLabel.category = getDicLabel(data.category, this.categoryList)
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 删除
|
|
||||||
onRemove(id) {
|
|
||||||
uni.showModal({
|
|
||||||
title: '确定要删除吗？',
|
|
||||||
success: action => {
|
|
||||||
if (action.confirm) {
|
|
||||||
remove(id).then(() => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '删除成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$refs['crud'].allCheckHide(false)
|
|
||||||
}, 100)
|
|
||||||
// #ifdef APP
|
|
||||||
this.getList(true)
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
// #endif
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 表单提交
|
|
||||||
onSubmit(form, action, unloading, done) {
|
|
||||||
if (action == '新增') {
|
|
||||||
add(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '新增成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
this.formLabel = {}
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
} else if (action == '编辑') {
|
|
||||||
update(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '编辑成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
this.formLabel = {}
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
page {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
export default [{
|
|
||||||
groupName: '基础功能',
|
|
||||||
list: [{
|
|
||||||
path: '/pages/demo/storage',
|
|
||||||
icon: 'cell',
|
|
||||||
title: 'Storage 操作',
|
|
||||||
}, {
|
|
||||||
path: '/pages/demo/vuex',
|
|
||||||
icon: 'sticky',
|
|
||||||
title: 'Vuex 操作',
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
groupName: '网络功能',
|
|
||||||
list: [{
|
|
||||||
path: '/pages/demo/mock',
|
|
||||||
icon: 'layout',
|
|
||||||
title: 'Mock 调用',
|
|
||||||
}, {
|
|
||||||
path: '/pages/demo/request',
|
|
||||||
icon: 'tabbar',
|
|
||||||
title: 'API 调用',
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
groupName: '业务功能',
|
|
||||||
list: [{
|
|
||||||
path: '/pages/demo/crud1',
|
|
||||||
icon: 'tag',
|
|
||||||
title: 'CRUD 操作（基于Uniapp）',
|
|
||||||
},{
|
|
||||||
path: '/pages/demo/crud2',
|
|
||||||
icon: 'tag',
|
|
||||||
title: 'CRUD 操作（基于Uview）',
|
|
||||||
},{
|
|
||||||
path: '/pages/componentsA/parse/index',
|
|
||||||
icon: 'loading',
|
|
||||||
title: '未完待续',
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="wrap">
|
|
||||||
<page-nav :desc="desc" :title="title"></page-nav>
|
|
||||||
<view class="list-wrap">
|
|
||||||
<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list"
|
|
||||||
:key="index">
|
|
||||||
<u-cell-item :titleStyle="{fontWeight: 500}" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
|
|
||||||
v-for="(item1, index1) in item.list" :key="index1">
|
|
||||||
<image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
|
|
||||||
</u-cell-item>
|
|
||||||
</u-cell-group>
|
|
||||||
</view>
|
|
||||||
<u-gap height="70"></u-gap>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import pageNav from '@/components/page-nav/page-nav.vue';
|
|
||||||
import list from "./demo.config.js";
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
pageNav
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
list: list,
|
|
||||||
title: '基础功能示例合集',
|
|
||||||
desc: '众多示例覆盖开发过程的各个需求，正在不断完善中。可让您快速集成，开箱即用。'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
getIcon() {
|
|
||||||
return path => {
|
|
||||||
return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
onShow() {
|
|
||||||
uni.setNavigationBarTitle({
|
|
||||||
title: "233"
|
|
||||||
});
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
openPage(path) {
|
|
||||||
this.$u.route({
|
|
||||||
url: path
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getGroupTitle(item) {
|
|
||||||
return item.groupName
|
|
||||||
},
|
|
||||||
getFieldTitle(item) {
|
|
||||||
return item.title
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* page {
|
|
||||||
background-color: rgb(240, 242, 244);
|
|
||||||
} */
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.u-cell-icon {
|
|
||||||
width: 36rpx;
|
|
||||||
height: 36rpx;
|
|
||||||
margin-right: 8rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
|
|
||||||
back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="Mock 调用"
|
|
||||||
title-color="#fff">
|
|
||||||
</u-navbar>
|
|
||||||
<view class="u-demo">
|
|
||||||
<view class="u-demo-wrap">
|
|
||||||
<view class="u-demo-title">演示效果</view>
|
|
||||||
<view class="u-demo-area u-flex u-row-center">
|
|
||||||
数据为：{{data}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="u-config-wrap">
|
|
||||||
<view class="u-config-title u-border-bottom">参数操作</view>
|
|
||||||
<view class="u-config-item">
|
|
||||||
<view class="u-item-title">按钮点击</view>
|
|
||||||
<u-button @click="doRequest">获取数据</u-button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
fakeBannerList
|
|
||||||
} from "@/api/mock/home.js";
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data: {}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
doRequest() {
|
|
||||||
let keyword = "";
|
|
||||||
fakeBannerList().then(data => {
|
|
||||||
this.data = data;
|
|
||||||
this.$u.func.showToast({
|
|
||||||
title: '数据获取成功',
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
|
|
||||||
back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="API 请求"
|
|
||||||
title-color="#fff">
|
|
||||||
</u-navbar>
|
|
||||||
<view class="u-demo">
|
|
||||||
<view class="u-demo-wrap">
|
|
||||||
<view class="u-demo-title">演示效果</view>
|
|
||||||
<view class="u-demo-area u-flex u-row-center">
|
|
||||||
<u-image width="300rpx" height="100rpx" :src="url"></u-image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="u-config-wßrap">
|
|
||||||
<view class="u-config-title u-border-bottom">参数操作</view>
|
|
||||||
<view class="u-config-item">
|
|
||||||
<view class="u-item-title">按钮点击</view>
|
|
||||||
<u-button @click="doRequest">刷新验证码</u-button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
url: ''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
doRequest() {
|
|
||||||
let keyword = "";
|
|
||||||
// 自动挂载至this.$u.api,无需引入
|
|
||||||
// captcha 在 /api/demo.js 内定义
|
|
||||||
this.$u.api.captcha().then(data => {
|
|
||||||
this.url = data.image;
|
|
||||||
this.$u.func.showToast({
|
|
||||||
title: '数据获取成功',
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
|
|
||||||
back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="Storage 操作"
|
|
||||||
title-color="#fff">
|
|
||||||
</u-navbar>
|
|
||||||
<view class="u-demo">
|
|
||||||
<view class="u-demo-wrap">
|
|
||||||
<view class="u-demo-title">演示效果</view>
|
|
||||||
<view class="u-demo-area u-flex u-row-center">
|
|
||||||
[ BladeX ] 的官网为：{{domain}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="u-config-wrap">
|
|
||||||
<view class="u-config-title u-border-bottom">参数操作</view>
|
|
||||||
<view class="u-config-item">
|
|
||||||
<view class="u-item-title">按钮点击</view>
|
|
||||||
<u-button @click="modifyStorage">修改变量</u-button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
domain: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onLoad() {
|
|
||||||
this.domain = uni.getStorageSync('domain');
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
modifyStorage() {
|
|
||||||
uni.setStorageSync('domain', 'https://bladex.vip');
|
|
||||||
this.domain = uni.getStorageSync('domain');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
|
|
||||||
back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="Vuex 操作"
|
|
||||||
title-color="#fff">
|
|
||||||
</u-navbar>
|
|
||||||
<view class="u-demo">
|
|
||||||
<view class="u-demo-wrap">
|
|
||||||
<view class="u-demo-title">演示效果</view>
|
|
||||||
<view class="u-demo-area u-flex u-row-center">
|
|
||||||
<!-- vuex已做过封装，可以直接使用state内的变量 -->
|
|
||||||
版本号为：{{version}}
|
|
||||||
</view>
|
|
||||||
<view class="u-demo-area u-flex u-row-center">
|
|
||||||
[ BladeX ] 的作者为：{{userInfo.nickName}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="u-config-wrap">
|
|
||||||
<view class="u-config-title u-border-bottom">参数操作</view>
|
|
||||||
<view class="u-config-item">
|
|
||||||
<view class="u-item-title">按钮点击</view>
|
|
||||||
<u-button @click="modifyVuex">修改变量</u-button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
// vuex已做过封装，可以直接this.$u.vuex(key, value)修改，无需引入
|
|
||||||
modifyVuex() {
|
|
||||||
// version不在lifeData，每次刷新会丢失
|
|
||||||
this.$u.vuex('version', '1.0.1');
|
|
||||||
// userInfo在lifeData，刷新重启会保留
|
|
||||||
this.$u.vuex('userInfo.nickName', '翼');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,152 @@
|
||||||
|
<template>
|
||||||
|
<!-- backBtn+logoutBtn 开启顶部两个按钮 -->
|
||||||
|
<Container backBtn logoutBtn @handleBack="goBack">
|
||||||
|
<template #main>
|
||||||
|
<view class="wrap">
|
||||||
|
<view class="list-card">
|
||||||
|
<view class="item" v-for="(item,idx) in businessList" :key="idx">
|
||||||
|
<view class="left">
|
||||||
|
<text class="dot">◆</text>
|
||||||
|
<text class="title-text">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="btn-guide" @click="openGuide(item)">办事指南</view>
|
||||||
|
<view class="btn-take" @click="toTakeNum(item)">取号</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</Container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Container from '@/components/container/container.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Container
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
businessList: [{
|
||||||
|
name: '个人社保参保证明查询打印'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '城镇职工基本养老保险关系转移接续申请'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '住房公积金个人住房贷款购房"一件事"'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '租赁非公共租赁住房提取'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '租赁公共租赁住房提取'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '住房档案变更（房屋坐落变更）'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 返回上一页
|
||||||
|
goBack() {
|
||||||
|
uni.navigateBack()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点击取号：跳转刷身份证页面
|
||||||
|
toTakeNum(row) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '取号成功',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 办事指南（可弹窗/新页面）
|
||||||
|
openGuide(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/home/guide?theme=${item}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 200px 60px 150px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-card {
|
||||||
|
width: 100%;
|
||||||
|
height: 740px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 60px;
|
||||||
|
padding: 30px 80px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px;
|
||||||
|
border-bottom: 1px solid rgba(188, 200, 209, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:first-child {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:last-child {
|
||||||
|
padding-bottom: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 68%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
color: #3688ff;
|
||||||
|
font-size: 30px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 30px;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-guide {
|
||||||
|
background: #28c068;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30px;
|
||||||
|
padding: 1.2vh 3vw;
|
||||||
|
border-radius: 99px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-take {
|
||||||
|
background: #367bfa;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30px;
|
||||||
|
padding: 1.2vh 3vw;
|
||||||
|
border-radius: 99px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
<template>
|
||||||
|
<Container backBtn logoutBtn @handleBack="handleBack" >
|
||||||
|
<template #main>
|
||||||
|
<view class="theme-page">
|
||||||
|
<view class="card">
|
||||||
|
<view class="title">部门取号</view>
|
||||||
|
<view class="btn-group">
|
||||||
|
<view class="btn-item" v-for="(item, index) in themeList" :key="index"
|
||||||
|
@click="handleSelect(item)">
|
||||||
|
{{ item }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</Container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Container from '@/components/container/container.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Container
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
themeList: [
|
||||||
|
'住房城乡建设厅',
|
||||||
|
'直属单位住房保障中心',
|
||||||
|
'公积金',
|
||||||
|
'职业资格',
|
||||||
|
'教育服务',
|
||||||
|
'婚姻生育',
|
||||||
|
'户籍户政',
|
||||||
|
'医疗医保'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleBack() {
|
||||||
|
uni.navigateBack()
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelect(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/home/businessList?theme=${item}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.theme-page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 200px 60px 150px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 100%;
|
||||||
|
height: 740px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 60px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: flex-start;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-item {
|
||||||
|
padding: 17px 25px;
|
||||||
|
width: 400px;
|
||||||
|
height: 140px;
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(236, 243, 255, 1);
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 40px;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
<template>
|
||||||
|
<Container backBtn logoutBtn @handleBack="backPrev">
|
||||||
|
<template #main>
|
||||||
|
<view class="page-wrap">
|
||||||
|
<view class="content-card">
|
||||||
|
<!-- 标题+右上角按钮 -->
|
||||||
|
<view class="top-row">
|
||||||
|
<view class="title">{{ info.title }}</view>
|
||||||
|
<view class="btn-take" @click="goScanCard">立即取号</view>
|
||||||
|
</view>
|
||||||
|
<!-- 部门信息 -->
|
||||||
|
<view class="dept-text">部门：{{ info.dept }}</view>
|
||||||
|
<!-- 办事详情正文 -->
|
||||||
|
<view class="desc-text">{{ info.content }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</Container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Container from '@/components/container/container.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Container
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 接收上一页传过来的业务参数，没有则默认示例数据
|
||||||
|
info: {
|
||||||
|
title: '城镇职工基本养老保险关系转移接续申请',
|
||||||
|
dept: '公积金',
|
||||||
|
content: '《住房公积金管理条例》(1999年4月3日中华人民共和国国务院令第262号发布 根据2002年3月24日《国务院关于修改<住房公积金管理条例>的决定》和2019年3月24日《国务院关于修改部分行政法规的决定》修订)： 第二十四条 职工有下列情形之一的，可以提取职工住房公积金账户内的存储余额： (一)购买、建造、翻建、大修自住住房的; (二)离休、退休的; (三)完全丧失劳动能力，并与单位终止劳动关系的;(四)出境定居的; (五)偿还购房贷款本息的; (六)房租超出家庭工资收入的规定比例的。'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
// 接收业务列表页传参，动态赋值标题和内容
|
||||||
|
if (options.businessName) {
|
||||||
|
this.info.title = decodeURIComponent(options.businessName)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 返回上一页
|
||||||
|
backPrev() {
|
||||||
|
uni.navigateBack()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 立即取号→跳转刷身份证页面
|
||||||
|
goScanCard() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '取号成功',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 200px 60px 150px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-card {
|
||||||
|
width: 100%;
|
||||||
|
height: 740px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 60px;
|
||||||
|
padding: 30px 80px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-take {
|
||||||
|
background-color: #367bfa;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 40px;
|
||||||
|
padding: 2vh 5vw;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dept-text {
|
||||||
|
font-size: 36px;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
margin-bottom: 3vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-text {
|
||||||
|
font-size: 36px;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,253 +1,94 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<!-- 顶部标题栏 -->
|
<Container>
|
||||||
<view class="header">
|
<template #main>
|
||||||
<text class="title">广西区直住房保障中心</text>
|
<view class="card" @click="goRoute">
|
||||||
</view>
|
<!-- 身份证图标区域 -->
|
||||||
|
<view class="id-card">
|
||||||
<!-- 预约功能区 -->
|
</view>
|
||||||
<view class="reserve-section">
|
<!-- 提示文字 -->
|
||||||
<view class="reserve-card" @click="handleOnlineReserve">
|
<text class="tip">请刷身份证取号</text>
|
||||||
<view class="icon online-icon"></view>
|
|
||||||
<text class="card-text">网上预约</text>
|
|
||||||
</view>
|
|
||||||
<view class="reserve-card" @click="handleMyReserve">
|
|
||||||
<view class="icon my-icon"></view>
|
|
||||||
<text class="card-text">我的预约</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 热门服务区 -->
|
|
||||||
<view class="service-section">
|
|
||||||
<text class="section-title">热门服务</text>
|
|
||||||
|
|
||||||
<view class="service-item" v-for="(item, index) in serviceList" :key="index"
|
|
||||||
@click="handleServiceClick(item)">
|
|
||||||
<view class="item-left">
|
|
||||||
<view class="dot"></view>
|
|
||||||
<text class="item-text">{{ item.name }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="arrow"></view>
|
</template>
|
||||||
</view>
|
</Container>
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import Container from '@/components/container/container.vue'
|
||||||
deptList,
|
|
||||||
itemList
|
|
||||||
} from '@/api/reserve.js'
|
|
||||||
import {
|
|
||||||
dictionary
|
|
||||||
} from '@/api/system/dict.js'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: 'SelfServiceMachine',
|
||||||
|
components: {
|
||||||
|
Container
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 热门服务列表（和设计图完全一致）
|
currentTime: ''
|
||||||
serviceList: [],
|
|
||||||
statusList: []
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
mounted() {
|
||||||
this.getItemList()
|
this.updateTime()
|
||||||
this.getDictionary()
|
setInterval(() => {
|
||||||
|
this.updateTime()
|
||||||
|
}, 1000)
|
||||||
|
// APP端强制横屏
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
plus.screen.lockOrientation('landscape-primary')
|
||||||
|
// #endif
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getDictionary() {
|
updateTime() {
|
||||||
dictionary({
|
const now = new Date()
|
||||||
code: 'booking_status'
|
const year = now.getFullYear()
|
||||||
}).then(res => {
|
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||||
if (res.code === 200) {
|
const day = String(now.getDate()).padStart(2, '0')
|
||||||
this.statusList = res.data
|
const hours = String(now.getHours()).padStart(2, '0')
|
||||||
uni.setStorageSync('statusList', this.statusList);
|
const minutes = String(now.getMinutes()).padStart(2, '0')
|
||||||
}
|
const seconds = String(now.getSeconds()).padStart(2, '0')
|
||||||
})
|
this.currentTime = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
|
||||||
},
|
},
|
||||||
// 网上预约点击事件
|
goRoute(){
|
||||||
handleOnlineReserve() {
|
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/reserve/index'
|
url: '/pages/home/ticket'
|
||||||
})
|
})
|
||||||
},
|
}
|
||||||
// 我的预约点击事件
|
|
||||||
handleMyReserve() {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/myReserve/index'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getItemList() {
|
|
||||||
let params = {
|
|
||||||
size: 5,
|
|
||||||
current: 1,
|
|
||||||
status: 1,
|
|
||||||
}
|
|
||||||
itemList(params).then(res => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
this.serviceList = res.data.records
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 服务项点击事件
|
|
||||||
handleServiceClick(item) {
|
|
||||||
const data = JSON.stringify(item)
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/pages/reserve/notice?data=${encodeURIComponent(data)}`
|
|
||||||
})
|
|
||||||
// uni.navigateTo({
|
|
||||||
// url: `/pages/reserve/index?id=${item.id}`
|
|
||||||
// })
|
|
||||||
},
|
|
||||||
// // 获取部门列表
|
|
||||||
// getDeptList() {
|
|
||||||
// let params = {
|
|
||||||
// size: 10,
|
|
||||||
// current: 1
|
|
||||||
// }
|
|
||||||
// deptList(params).then(res => {
|
|
||||||
// if (res.code === 200) {
|
|
||||||
// this.serviceList = res.data.records.filter(item => item.parentId != 0)
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped>
|
||||||
* {
|
/* 中间卡片 - 百分比宽高 */
|
||||||
box-sizing: border-box;
|
.card {
|
||||||
}
|
background: #ffffff;
|
||||||
|
width: 1200px;
|
||||||
/* 全局容器 */
|
height: 740px;
|
||||||
.container {
|
border-radius: 2.5%;
|
||||||
min-height: 100vh;
|
box-shadow: 0 1vh 3vh rgba(0, 123, 255, 0.15);
|
||||||
background-color: #f5f5f5;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 顶部标题栏 */
|
|
||||||
.header {
|
|
||||||
width: 100%;
|
|
||||||
height: 200rpx;
|
|
||||||
background: linear-gradient(to bottom, #e8f3ff 0%, #f5f5f5 100%);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url('/static/images/newImg/home_bg.png');
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 40rpx;
|
|
||||||
font-weight: 700;
|
|
||||||
color: rgba(49, 134, 255, 1);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 预约功能区 */
|
|
||||||
.reserve-section {
|
|
||||||
display: flex;
|
|
||||||
padding: 0 30rpx 30rpx;
|
|
||||||
gap: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reserve-card {
|
|
||||||
flex: 1;
|
|
||||||
background-color: #ffffff;
|
|
||||||
border-radius: 32rpx;
|
|
||||||
padding: 40rpx 20rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
/* 身份证卡片 */
|
||||||
width: 80rpx;
|
.id-card {
|
||||||
height: 80rpx;
|
width: 511px;
|
||||||
margin-bottom: 20rpx;
|
height: 307px;
|
||||||
background-size: contain;
|
background: url('../../static/images/home/idcard_bg.png');
|
||||||
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.online-icon {
|
|
||||||
background-image: url('@/static/images/newImg/online_icon.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-icon {
|
|
||||||
background-image: url('@/static/images/newImg/my_icon.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-text {
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #333333;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 热门服务区 */
|
|
||||||
.service-section {
|
|
||||||
padding: 0 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
display: block;
|
|
||||||
font-size: 34rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333333;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-item {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
padding: 0 5%;
|
||||||
background-color: #ffffff;
|
margin-bottom: 5%;
|
||||||
border-radius: 24rpx;
|
box-sizing: border-box;
|
||||||
padding: 30rpx;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot {
|
/* 提示文字 */
|
||||||
width: 16rpx;
|
.tip {
|
||||||
height: 16rpx;
|
font-size: 5vh;
|
||||||
border-radius: 50%;
|
color: #222;
|
||||||
background: linear-gradient(to bottom, rgba(49, 134, 255, 1), rgba(21, 167, 255, 1));
|
|
||||||
margin-right: 16rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-text {
|
|
||||||
font-size: 34rpx;
|
|
||||||
color: #333333;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
letter-spacing: 0.2vh;
|
||||||
|
|
||||||
.arrow {
|
|
||||||
width: 16rpx;
|
|
||||||
height: 16rpx;
|
|
||||||
border-right: 4rpx solid #165dff;
|
|
||||||
border-top: 4rpx solid #165dff;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
<template>
|
||||||
|
<Container backBtn logoutBtn @handleBack="handleBack">
|
||||||
|
<template #main>
|
||||||
|
<view class="theme-page">
|
||||||
|
<view class="card">
|
||||||
|
<view class="title">主题取号</view>
|
||||||
|
<view class="btn-group">
|
||||||
|
<view class="btn-item" v-for="(item, index) in themeList" :key="index"
|
||||||
|
@click="handleSelect(item)">
|
||||||
|
{{ item }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</Container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Container from '@/components/container/container.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Container
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
themeList: [
|
||||||
|
'就业创业',
|
||||||
|
'社会保障',
|
||||||
|
'公积金',
|
||||||
|
'职业资格',
|
||||||
|
'教育服务',
|
||||||
|
'婚姻生育',
|
||||||
|
'户籍户政',
|
||||||
|
'医疗医保'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleBack() {
|
||||||
|
uni.navigateBack()
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelect(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/home/businessList?theme=${item}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.theme-page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 200px 60px 150px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 100%;
|
||||||
|
height: 740px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 60px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: flex-start;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-item {
|
||||||
|
padding: 17px 25px;
|
||||||
|
width: 400px;
|
||||||
|
height: 140px;
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(236, 243, 255, 1);
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 40px;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
<template>
|
||||||
|
<Container logoutBtn>
|
||||||
|
<template #main>
|
||||||
|
<view class="home-page">
|
||||||
|
<!-- 左侧四大功能按钮 -->
|
||||||
|
<view class="btn-group">
|
||||||
|
<view class="btn-item blue" @click="goTheme"> </view>
|
||||||
|
<view class="btn-item green" @click="goDept"> </view>
|
||||||
|
<view class="btn-item orange" @click="goHistory"> </view>
|
||||||
|
<view class="btn-item red" @click="goBusiness"> </view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 右侧热门推荐 -->
|
||||||
|
<view class="hot-recommend">
|
||||||
|
<view class="recommend-title">热门推荐</view>
|
||||||
|
<view class="recommend-list">
|
||||||
|
<view class="recommend-item" v-for="(item, index) in recommendList" :key="index">
|
||||||
|
<text class="dot">◆</text>
|
||||||
|
<text class="text">{{ item }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</Container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Container from '@/components/container/container.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Container
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
recommendList: [
|
||||||
|
'公有住房、全额集资建房退房',
|
||||||
|
'职务(职称)晋升后住房面积未达标户住房补贴业务',
|
||||||
|
'公有住房、全额集资建房退房',
|
||||||
|
'公有住房、全额集资建房退房',
|
||||||
|
'公有住房、全额集资建房退房',
|
||||||
|
'职务(职称)晋升后住房面积未达标户住房补贴业务'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 主题取号
|
||||||
|
goTheme() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/home/theme'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 部门取号
|
||||||
|
goDept() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/home/dept'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 历史取号
|
||||||
|
goHistory() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/home/businessList`
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 业务取号
|
||||||
|
goBusiness() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/home/businessList`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 0 5%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧按钮组 */
|
||||||
|
.btn-group {
|
||||||
|
/* width: 60%; */
|
||||||
|
/* height: 85%; */
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
/* justify-content: space-between; */
|
||||||
|
align-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-item {
|
||||||
|
width: 500px;
|
||||||
|
height: 340px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-item.blue {
|
||||||
|
margin-right: 60px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
background: url('../../static/images/ticket/theme_bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-item.green {
|
||||||
|
background: url('../../static/images/ticket/dept_bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-item.orange {
|
||||||
|
margin-right: 60px;
|
||||||
|
background: url('../../static/images/ticket/history_bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-item.red {
|
||||||
|
background: url('../../static/images/ticket/business_bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 右侧热门推荐 */
|
||||||
|
.hot-recommend {
|
||||||
|
width: 55%;
|
||||||
|
height: 740px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
padding: 40px 40px 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommend-title {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommend-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
color: #4080ff;
|
||||||
|
font-size: 30px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 30px;
|
||||||
|
color: rgba(51, 51, 51, 1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,377 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<view class="safe-area-inset-bottom">
|
|
||||||
<rider-curd
|
|
||||||
v-model="form"
|
|
||||||
:option="option"
|
|
||||||
:data="list"
|
|
||||||
:rules="rules"
|
|
||||||
:readonly.sync="readonly"
|
|
||||||
@search="onSearch"
|
|
||||||
@child="onChildren"
|
|
||||||
@action-click="onActionClick"
|
|
||||||
@submit="onSubmit"
|
|
||||||
@del="onRemove"
|
|
||||||
ref="crud"
|
|
||||||
>
|
|
||||||
<template #form>
|
|
||||||
<u-form-item label="机构名称" prop="deptName" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input v-model="form.deptName" :disabled="readonly" placeholder="机构名称" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="机构全称" prop="fullName" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input v-model="form.fullName" :disabled="readonly" placeholder="机构全称" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="上级机构" prop="parentId" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input
|
|
||||||
v-if="!isAddChild"
|
|
||||||
v-model="formLabel.parentName"
|
|
||||||
placeholder="机构全称"
|
|
||||||
type="select"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
if (!readonly) $refs.treePicker._show()
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<u-input v-else v-model="formLabel.parentName" placeholder="机构全称" disabled />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="机构类型" prop="deptCategory" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input
|
|
||||||
v-model="formLabel.category"
|
|
||||||
placeholder="机构类型"
|
|
||||||
type="select"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
if (!readonly) categoryShow = true
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="排序" prop="sort" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input v-model="form.sort" :disabled="readonly" type="number" placeholder="排序" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="描述" :label-width="option.labelWidth || 160" prop="remark">
|
|
||||||
<u-input v-model="form.remark" :disabled="readonly" type="textarea" :maxlength="-1" :height="35" placeholder="描述" />
|
|
||||||
</u-form-item>
|
|
||||||
</template>
|
|
||||||
<template #loadmore>
|
|
||||||
<u-loadmore :status="loadStatus" @loadmore="getList()" />
|
|
||||||
</template>
|
|
||||||
</rider-curd>
|
|
||||||
</view>
|
|
||||||
<u-select
|
|
||||||
v-model="categoryShow"
|
|
||||||
:list="categoryList"
|
|
||||||
value-name="dictKey"
|
|
||||||
label-name="dictValue"
|
|
||||||
@confirm="onConfirm"
|
|
||||||
safe-area-inset-bottom
|
|
||||||
></u-select>
|
|
||||||
<!-- 上级机构tree -->
|
|
||||||
<rider-tree
|
|
||||||
ref="treePicker"
|
|
||||||
:range="deptTreeList"
|
|
||||||
idKey="id"
|
|
||||||
nameKey="title"
|
|
||||||
:multiple="false"
|
|
||||||
:cascade="false"
|
|
||||||
:foldAll="false"
|
|
||||||
confirmColor="#4E7FF9"
|
|
||||||
cancelColor="#757575"
|
|
||||||
title="上级机构"
|
|
||||||
titleColor="#757575"
|
|
||||||
@cancel="$refs.treePicker._hide()"
|
|
||||||
@confirm="onTreeConfirm"
|
|
||||||
></rider-tree>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import riderCurd from '@/components/rider-crud/index'
|
|
||||||
import riderTree from '@/components/rider-crud/components/tree-picker'
|
|
||||||
import { getList, add, update, remove, deptTree } from '@/api/system/dept.js'
|
|
||||||
import { tenantSelect } from '@/api/system/tenant.js'
|
|
||||||
import { dictionary } from '@/api/system/dict.js'
|
|
||||||
import { getDicLabel } from '@/components/rider-crud/util/tool.js'
|
|
||||||
export default {
|
|
||||||
components: { riderCurd, riderTree },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
checkedSwitch: false,
|
|
||||||
form: {},
|
|
||||||
formLabel: {},
|
|
||||||
list: [],
|
|
||||||
params: {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
parentId: 0
|
|
||||||
},
|
|
||||||
loadStatus: 'loadmore', // 列表加载状态
|
|
||||||
readonly: false, // 查看时控制表单只读
|
|
||||||
option: {
|
|
||||||
navTitle: '部门管理', //标题
|
|
||||||
manageBtn: true, // 右上角管理按钮，默认不显示
|
|
||||||
searchShow: true, //是否显示搜索，默认不显示
|
|
||||||
labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '机构名称',
|
|
||||||
prop: 'deptName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '所属租户',
|
|
||||||
prop: 'tenantName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '机构全称',
|
|
||||||
prop: 'fullName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '机构类型',
|
|
||||||
prop: 'deptCategoryName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '排序',
|
|
||||||
prop: 'sort'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '描述',
|
|
||||||
prop: 'remark'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
actions: [
|
|
||||||
{
|
|
||||||
name: '编辑', // 操作名称
|
|
||||||
icon: 'edit-pen', //操作图标，有图标文字不显示
|
|
||||||
color: '#333', // 字体颜色
|
|
||||||
fontsize: 30, //字体大小，单位rpx
|
|
||||||
width: 40, // 宽度，单位px
|
|
||||||
background: '#fff' // 菜单按钮背景色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '删除',
|
|
||||||
icon: 'trash',
|
|
||||||
color: '#333',
|
|
||||||
fontsize: 30,
|
|
||||||
width: 40,
|
|
||||||
background: '#fff'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '新增子项',
|
|
||||||
icon: 'plus',
|
|
||||||
color: '#333',
|
|
||||||
fontsize: 30,
|
|
||||||
width: 40,
|
|
||||||
background: '#fff'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
deptCategory: [{ required: true, message: '请选择机构类型', trigger: 'change', type: 'number' }],
|
|
||||||
deptName: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
|
|
||||||
fullName: [{ required: true, message: '请输入机构全称', trigger: 'blur' }],
|
|
||||||
sort: [{ required: true, message: '请输入排序', trigger: 'blur', type: 'number' }]
|
|
||||||
},
|
|
||||||
categoryShow: false,
|
|
||||||
categoryList: [],
|
|
||||||
tenantList: [],
|
|
||||||
deptTreeList: [],
|
|
||||||
isAddChild: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onReady() {
|
|
||||||
this.getList(true)
|
|
||||||
this.getTenant().then(() => {
|
|
||||||
this.getList(true)
|
|
||||||
})
|
|
||||||
this.getCategoryList()
|
|
||||||
},
|
|
||||||
onPullDownRefresh() {
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
onReachBottom() {
|
|
||||||
if (this.loadStatus == 'nomore') return
|
|
||||||
this.getList()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 获取列表
|
|
||||||
getList(override = false) {
|
|
||||||
if (override) {
|
|
||||||
this.params.current = 1
|
|
||||||
}
|
|
||||||
const { size } = this.params
|
|
||||||
getList(this.params)
|
|
||||||
.then(res => {
|
|
||||||
const records = res.data
|
|
||||||
if (records.length < size) this.loadStatus = 'nomore'
|
|
||||||
else this.loadStatus = 'loadmore'
|
|
||||||
if (override) this.list = records
|
|
||||||
else this.list = this.list.concat(records)
|
|
||||||
if (this.list && this.list.length > 0) {
|
|
||||||
this.list.map(e => {
|
|
||||||
e.tenantName = getDicLabel(e.tenantId, this.tenantList, { label: 'tenantName', value: 'tenantId' })
|
|
||||||
e.children = []
|
|
||||||
})
|
|
||||||
this.$refs.crud.setLazyLoad((item, index, cb) => {
|
|
||||||
getList({ parentId: item.id }).then(res => {
|
|
||||||
res.data.map(e => {
|
|
||||||
e.tenantName = getDicLabel(e.tenantId, this.tenantList, { label: 'tenantName', value: 'tenantId' })
|
|
||||||
})
|
|
||||||
cb(res.data)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.params.current++
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取类型
|
|
||||||
getCategoryList() {
|
|
||||||
dictionary({ code: 'org_category' }).then(res => {
|
|
||||||
this.categoryList = res.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 租户类型
|
|
||||||
getTenant() {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
deptTree().then(res => {
|
|
||||||
this.deptTreeList = res.data
|
|
||||||
})
|
|
||||||
tenantSelect().then(res => {
|
|
||||||
this.tenantList = res.data
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 类型回调
|
|
||||||
onConfirm(e) {
|
|
||||||
this.$set(this.formLabel, 'category', e[0].label)
|
|
||||||
this.$set(this.form, 'deptCategory', Number(e[0].value))
|
|
||||||
},
|
|
||||||
//上级机构选择回调
|
|
||||||
onTreeConfirm(e) {
|
|
||||||
this.$set(this.form, 'parentId', e[0].id)
|
|
||||||
this.$set(this.formLabel, 'parentName', e[0].name)
|
|
||||||
},
|
|
||||||
// 搜索 (自行配置搜索内容)
|
|
||||||
onSearch(val) {
|
|
||||||
this.params = {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
deptName: val
|
|
||||||
}
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
// 左滑按钮点击
|
|
||||||
onActionClick({ index, data, action, done }) {
|
|
||||||
const { name } = action
|
|
||||||
switch (name) {
|
|
||||||
case '新增':
|
|
||||||
this.form = {}
|
|
||||||
this.formLabel = {}
|
|
||||||
this.isAddChild = false
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
case '删除':
|
|
||||||
this.onRemove(data.id)
|
|
||||||
break
|
|
||||||
case '查看':
|
|
||||||
this.readonly = true
|
|
||||||
case '编辑':
|
|
||||||
this.isAddChild = false
|
|
||||||
this.formLabel = {
|
|
||||||
category: getDicLabel(data.deptCategory, this.categoryList),
|
|
||||||
parentName: getDicLabel(data.parentId, this.deptTreeList, { label: 'title', value: 'id' })
|
|
||||||
}
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
case '新增子项':
|
|
||||||
this.isAddChild = true
|
|
||||||
this.form = {}
|
|
||||||
this.formLabel = {
|
|
||||||
parentName: getDicLabel(data.id, this.deptTreeList, { label: 'title', value: 'id' })
|
|
||||||
}
|
|
||||||
this.$set(this.form, 'parentId', data.id)
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
}
|
|
||||||
if (['删除', '编辑', '新增子项'].includes(name)) this.$refs['crud'].hideChildren()
|
|
||||||
},
|
|
||||||
// 删除
|
|
||||||
onRemove(id) {
|
|
||||||
uni.showModal({
|
|
||||||
title: '确定要删除吗？',
|
|
||||||
success: action => {
|
|
||||||
if (action.confirm) {
|
|
||||||
remove(id).then(() => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '删除成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$refs['crud'].allCheckHide(false)
|
|
||||||
}, 100)
|
|
||||||
// #ifdef APP
|
|
||||||
this.getList(true)
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
// #endif
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 表单提交
|
|
||||||
onSubmit(form, action, unloading, done) {
|
|
||||||
if (action == '新增' || action == '新增子项') {
|
|
||||||
add(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '新增成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
} else if (action == '编辑') {
|
|
||||||
update(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '编辑成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
page {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.nav-right {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: normal;
|
|
||||||
padding-right: 24rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,489 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<view class="safe-area-inset-bottom">
|
|
||||||
<rider-curd
|
|
||||||
v-model="form"
|
|
||||||
:option="option"
|
|
||||||
:data="list"
|
|
||||||
:rules="rules"
|
|
||||||
:readonly.sync="readonly"
|
|
||||||
@search="onSearch"
|
|
||||||
@action-click="onActionClick"
|
|
||||||
@submit="onSubmit"
|
|
||||||
@del="onRemove"
|
|
||||||
ref="crud"
|
|
||||||
>
|
|
||||||
<template #form>
|
|
||||||
<u-form-item label="字典编号" prop="code" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input v-model="form.code" :disabled="readonly" placeholder="字典编号" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="字典名称" prop="dictValue" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input v-model="form.dictValue" :disabled="readonly" placeholder="字典名称" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="字典排序" prop="sort" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input v-model="form.sort" :disabled="readonly" type="number" placeholder="字典排序" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="封存" prop="isSealed" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-radio-group v-model="form.isSealed" :disabled="readonly">
|
|
||||||
<u-radio shape="circle" :name="1" active-color="#4E7FF9">是</u-radio>
|
|
||||||
<u-radio shape="circle" :name="0" active-color="#4E7FF9">否</u-radio>
|
|
||||||
</u-radio-group>
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="字典备注" :label-width="option.labelWidth || 160" prop="remark">
|
|
||||||
<u-input
|
|
||||||
v-model="form.remark"
|
|
||||||
:disabled="readonly"
|
|
||||||
type="textarea"
|
|
||||||
:maxlength="-1"
|
|
||||||
:height="35"
|
|
||||||
placeholder="字典备注"
|
|
||||||
/>
|
|
||||||
</u-form-item>
|
|
||||||
</template>
|
|
||||||
<template #loadmore>
|
|
||||||
<u-loadmore :status="loadStatus" @loadmore="getList()" />
|
|
||||||
</template>
|
|
||||||
</rider-curd>
|
|
||||||
</view>
|
|
||||||
<!-- 字典配置 -->
|
|
||||||
<u-popup v-model="configShow" mode="bottom" height="100vh" @close="onConfigClose" :mask-close-able="false">
|
|
||||||
<scroll-view scroll-y="true" style="height: 100vh; background: #f5f5f5">
|
|
||||||
<rider-curd
|
|
||||||
ref="childCrud"
|
|
||||||
v-model="childForm"
|
|
||||||
:navBack="onConfigClose"
|
|
||||||
@search="onChildSearch"
|
|
||||||
:option="{ ...configOption, navTitle: `${configName} - 字典配置` }"
|
|
||||||
:data="childList"
|
|
||||||
:rules="rules"
|
|
||||||
:readonly.sync="readonly"
|
|
||||||
@action-click="onActionClick"
|
|
||||||
@submit="onSubmit"
|
|
||||||
@del="onRemove"
|
|
||||||
>
|
|
||||||
<template #form>
|
|
||||||
<u-form-item label="字典编号" prop="code" :label-width="configOption.labelWidth || 160" required>
|
|
||||||
<u-input v-model="childForm.code" disabled placeholder="字典编号" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="字典名称" prop="dictValue" :label-width="configOption.labelWidth || 160" required>
|
|
||||||
<u-input v-model="childForm.dictValue" :disabled="readonly" placeholder="字典名称" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="上级字典" :label-width="configOption.labelWidth || 160">
|
|
||||||
<u-input v-model="parentData.dictValue" disabled placeholder="上级字典" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="字典键值" prop="dictKey" :label-width="configOption.labelWidth || 160" required>
|
|
||||||
<u-input v-model="childForm.dictKey" :disabled="readonly" placeholder="字典键值" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="字典排序" prop="sort" :label-width="configOption.labelWidth || 160" required>
|
|
||||||
<u-input v-model="childForm.sort" :disabled="readonly" type="number" placeholder="字典排序" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="封存" prop="isSealed" :label-width="configOption.labelWidth || 160" required>
|
|
||||||
<u-radio-group v-model="childForm.isSealed" :disabled="readonly">
|
|
||||||
<u-radio shape="circle" :name="1" active-color="#4E7FF9">是</u-radio>
|
|
||||||
<u-radio shape="circle" :name="0" active-color="#4E7FF9">否</u-radio>
|
|
||||||
</u-radio-group>
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="字典备注" prop="remark" :label-width="configOption.labelWidth || 160">
|
|
||||||
<u-input
|
|
||||||
v-model="childForm.remark"
|
|
||||||
:disabled="readonly"
|
|
||||||
type="textarea"
|
|
||||||
:maxlength="-1"
|
|
||||||
:height="35"
|
|
||||||
placeholder="字典备注"
|
|
||||||
/>
|
|
||||||
</u-form-item>
|
|
||||||
</template>
|
|
||||||
<template #loadmore>
|
|
||||||
<u-loadmore :status="childLoadStatus" @loadmore="getChild()" />
|
|
||||||
</template>
|
|
||||||
</rider-curd>
|
|
||||||
</scroll-view>
|
|
||||||
</u-popup>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import riderCurd from '@/components/rider-crud/index'
|
|
||||||
import { parentList, add, update, remove, dictionary, child, dictTree } from '@/api/system/dict.js'
|
|
||||||
import { getDicLabel } from '@/components/rider-crud/util/tool.js'
|
|
||||||
export default {
|
|
||||||
components: { riderCurd },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
configShow: false, //字典管理弹窗
|
|
||||||
form: {
|
|
||||||
isSealed: 0
|
|
||||||
},
|
|
||||||
list: [],
|
|
||||||
params: {
|
|
||||||
current: 1,
|
|
||||||
size: 10
|
|
||||||
},
|
|
||||||
readonly: false, // 查看时控制表单只读
|
|
||||||
parentData: {}, // 上级数据信息
|
|
||||||
childList: [],
|
|
||||||
childForm: {
|
|
||||||
isSealed: 0
|
|
||||||
},
|
|
||||||
childParams: {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
parentId: null
|
|
||||||
},
|
|
||||||
loadStatus: 'loadmore', // 列表加载状态
|
|
||||||
childLoadStatus: 'loadmore', // 列表加载状态
|
|
||||||
option: {
|
|
||||||
navTitle: '字典管理', //标题
|
|
||||||
manageBtn: true, // 右上角管理按钮，默认不显示
|
|
||||||
searchShow: true, //是否显示搜索，默认不显示
|
|
||||||
labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '字典编号',
|
|
||||||
prop: 'code'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '字典名称',
|
|
||||||
prop: 'dictValue'
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
label: '字典排序',
|
|
||||||
prop: 'sort'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '封存',
|
|
||||||
prop: 'sealedName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '字典备注',
|
|
||||||
prop: 'remark'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
actions: [
|
|
||||||
{
|
|
||||||
name: '编辑', // 操作名称
|
|
||||||
icon: 'edit-pen', //操作图标，有图标文字不显示
|
|
||||||
color: '#333', // 字体颜色
|
|
||||||
fontsize: 30, //字体大小，单位rpx
|
|
||||||
width: 40, // 宽度，单位px
|
|
||||||
background: '#fff' // 菜单按钮背景色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '删除',
|
|
||||||
icon: 'trash',
|
|
||||||
color: '#333',
|
|
||||||
fontsize: 30,
|
|
||||||
width: 40,
|
|
||||||
background: '#fff'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '设置',
|
|
||||||
icon: 'setting',
|
|
||||||
color: '#333',
|
|
||||||
fontsize: 30,
|
|
||||||
width: 40,
|
|
||||||
background: '#fff'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
configName: '',
|
|
||||||
configOption: {
|
|
||||||
navBackIcon: 'close', //导航栏左上角icon
|
|
||||||
manageBtn: true, // 右上角管理按钮，默认不显示
|
|
||||||
searchShow: true, //是否显示搜索，默认不显示
|
|
||||||
labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '字典编号',
|
|
||||||
prop: 'code'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '字典名称',
|
|
||||||
prop: 'dictValue'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '字典键值',
|
|
||||||
prop: 'dictKey'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '字典排序',
|
|
||||||
prop: 'sort'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '封存',
|
|
||||||
prop: 'sealedName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '字典备注',
|
|
||||||
prop: 'remark'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
actions: [
|
|
||||||
{
|
|
||||||
name: '编辑', // 操作名称
|
|
||||||
icon: 'edit-pen', //操作图标，有图标文字不显示
|
|
||||||
color: '#333', // 字体颜色
|
|
||||||
fontsize: 30, //字体大小，单位rpx
|
|
||||||
width: 40, // 宽度，单位px
|
|
||||||
background: '#fff' // 菜单按钮背景色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '删除',
|
|
||||||
icon: 'trash',
|
|
||||||
color: '#333',
|
|
||||||
fontsize: 30,
|
|
||||||
width: 40,
|
|
||||||
background: '#fff'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '新增子项',
|
|
||||||
icon: 'plus',
|
|
||||||
color: '#333',
|
|
||||||
fontsize: 30,
|
|
||||||
width: 40,
|
|
||||||
background: '#fff'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
code: [{ required: true, message: '请输入字典编号', trigger: 'blur' }],
|
|
||||||
dictValue: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
|
|
||||||
sort: [{ required: true, message: '请输入字典排序', trigger: 'blur', type: 'number' }],
|
|
||||||
isSealed: [{ required: true, message: '请选择是否封存', trigger: 'blur', type: 'number' }],
|
|
||||||
dictKey: [{ required: true, message: '请输入字典键值', trigger: 'blur' }]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onReady() {
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
onPullDownRefresh() {
|
|
||||||
this.getList(true)
|
|
||||||
this.getChild(true)
|
|
||||||
},
|
|
||||||
onReachBottom() {
|
|
||||||
if (this.loadStatus == 'nomore') return
|
|
||||||
this.getList()
|
|
||||||
|
|
||||||
if (this.childLoadStatus == 'nomore') return
|
|
||||||
this.getChild()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 获取列表
|
|
||||||
getList(override = false) {
|
|
||||||
if (override) {
|
|
||||||
this.params.current = 1
|
|
||||||
}
|
|
||||||
const { size } = this.params
|
|
||||||
parentList(this.params)
|
|
||||||
.then(res => {
|
|
||||||
const { records } = res.data
|
|
||||||
if (records.length < size) this.loadStatus = 'nomore'
|
|
||||||
else this.loadStatus = 'loadmore'
|
|
||||||
if (override) {
|
|
||||||
this.list = records
|
|
||||||
} else {
|
|
||||||
this.list = this.list.concat(records)
|
|
||||||
}
|
|
||||||
if (this.list && this.list.length > 0) {
|
|
||||||
this.list.map(e => {
|
|
||||||
e.sealedName = e.isSealed ? '是' : '否'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.params.current++
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 获取子类列表
|
|
||||||
getChild(override = false) {
|
|
||||||
if (override) {
|
|
||||||
this.childParams.current = 1
|
|
||||||
}
|
|
||||||
const { size } = this.childParams
|
|
||||||
child(this.childParams)
|
|
||||||
.then(res => {
|
|
||||||
const records = res.data
|
|
||||||
if (records.length < size) this.childLoadStatus = 'nomore'
|
|
||||||
else this.childLoadStatus = 'loadmore'
|
|
||||||
if (override) {
|
|
||||||
this.childList = records
|
|
||||||
} else {
|
|
||||||
this.childList = this.childList.concat(records)
|
|
||||||
}
|
|
||||||
if (this.childList && this.childList.length > 0) {
|
|
||||||
this.childList.map(e => {
|
|
||||||
e.sealedName = e.isSealed ? '是' : '否'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.childParams.current++
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 左滑按钮点击
|
|
||||||
onActionClick({ index, data, action, done }) {
|
|
||||||
const { name } = action
|
|
||||||
switch (name) {
|
|
||||||
case '新增':
|
|
||||||
if (this.parentData.code) {
|
|
||||||
this.$set(this.childForm, 'code', this.parentData.code)
|
|
||||||
this.$set(this.childForm, 'parentId', this.parentData.id)
|
|
||||||
this.$set(this.childParams, 'parentId', this.parentData.id)
|
|
||||||
}
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
case '删除':
|
|
||||||
this.onRemove(data.id)
|
|
||||||
break
|
|
||||||
case '查看':
|
|
||||||
this.readonly = true
|
|
||||||
case '编辑':
|
|
||||||
if (data.id) done()
|
|
||||||
break
|
|
||||||
case '设置':
|
|
||||||
this.childForm = {}
|
|
||||||
this.parentData = data
|
|
||||||
this.configName = data.dictValue
|
|
||||||
this.$set(this.childParams, 'parentId', data.id)
|
|
||||||
this.getChild(true)
|
|
||||||
setTimeout(() => {
|
|
||||||
this.configShow = true
|
|
||||||
}, 100)
|
|
||||||
break
|
|
||||||
case '新增子项':
|
|
||||||
this.childForm = {}
|
|
||||||
this.parentData = data
|
|
||||||
this.$set(this.childForm, 'code', data.code)
|
|
||||||
this.$set(this.childForm, 'parentId', data.id)
|
|
||||||
this.$set(this.childParams, 'parentId', data.id)
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
}
|
|
||||||
if (['删除', '编辑', '新增子项'].includes(name)) {
|
|
||||||
this.$refs['crud'].hideChildren()
|
|
||||||
this.$refs['childCrud'].hideChildren()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 删除
|
|
||||||
onRemove(id) {
|
|
||||||
uni.showModal({
|
|
||||||
title: '确定要删除吗？',
|
|
||||||
success: action => {
|
|
||||||
if (action.confirm) {
|
|
||||||
remove(id).then(() => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '删除成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$refs['crud'].allCheckHide(false)
|
|
||||||
}, 100)
|
|
||||||
// #ifdef APP
|
|
||||||
this.getList(true)
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
// #endif
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 表单提交
|
|
||||||
onSubmit(form, action, unloading, done) {
|
|
||||||
if (action == '新增' || action == '新增子项') {
|
|
||||||
add(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '新增成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
} else if (action == '编辑') {
|
|
||||||
update(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '编辑成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//字典配置关闭
|
|
||||||
onConfigClose() {
|
|
||||||
this.configShow = false
|
|
||||||
this.childParams = {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
parentId: null
|
|
||||||
}
|
|
||||||
this.parentData = {}
|
|
||||||
this.form = { isSealed: 0 }
|
|
||||||
this.childForm = { isSealed: 0 }
|
|
||||||
setTimeout(() => {
|
|
||||||
this.getChild(true)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 搜索 (自行配置搜索内容)
|
|
||||||
onSearch(val) {
|
|
||||||
this.params = {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
dictValue: val
|
|
||||||
}
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
// 子级搜索
|
|
||||||
onChildSearch(val) {
|
|
||||||
this.childForm = {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
dictValue: val
|
|
||||||
}
|
|
||||||
this.getChild(true)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
page {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.nav-right {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: normal;
|
|
||||||
padding-right: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-title {
|
|
||||||
padding: 30rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: 20rpx solid #f5f5f5;
|
|
||||||
color: #fff;
|
|
||||||
background: linear-gradient(45deg, #4e7ff9 0%, #59a5fb 100%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,166 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<u-navbar
|
|
||||||
:is-fixed="false"
|
|
||||||
:border-bottom="false"
|
|
||||||
:is-back="false"
|
|
||||||
title="管理"
|
|
||||||
:background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }"
|
|
||||||
title-color="#fff"
|
|
||||||
>
|
|
||||||
<image slot="right" src="/static/images/home/message.png" class="message-icon" mode="widthFix"></image>
|
|
||||||
</u-navbar>
|
|
||||||
|
|
||||||
<view class="tab">
|
|
||||||
<u-tabs
|
|
||||||
:list="list"
|
|
||||||
:is-scroll="false"
|
|
||||||
:current="current"
|
|
||||||
active-color="#5f88ff"
|
|
||||||
inactive-color="#595959"
|
|
||||||
height="100"
|
|
||||||
@change="change"
|
|
||||||
></u-tabs>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<swiper id="swiperBox" :style="{ height: swiperHeight + 'px' }" :current="current" @change="tabsChange">
|
|
||||||
|
|
||||||
<swiper-item class="swiper-item" key="0">
|
|
||||||
<scroll-view scroll-y style="width: 100%;height: 100%;" @scrolltolower="onreachBottom">
|
|
||||||
<view class="content">
|
|
||||||
<u-grid :col="3">
|
|
||||||
<u-grid-item v-for="(_item, _index) in deskList" :key="_index">
|
|
||||||
<navigator :url="_item.path" hover-class="none" class="gitem">
|
|
||||||
<image :src="require(`@/static/images/manage/${_item.type}.png`)" class="img" mode="widthFix"></image>
|
|
||||||
<view class="name">{{ _item.name }}</view>
|
|
||||||
</navigator>
|
|
||||||
</u-grid-item>
|
|
||||||
</u-grid>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</swiper-item>
|
|
||||||
|
|
||||||
<swiper-item class="swiper-item" key="1">
|
|
||||||
<scroll-view scroll-y style="width: 100%;height: 100%;" @scrolltolower="onreachBottom">
|
|
||||||
<view class="content">
|
|
||||||
<u-grid :col="3">
|
|
||||||
<u-grid-item v-for="(_item, _index) in systemList" :key="_index">
|
|
||||||
<navigator :url="_item.path" hover-class="none" class="gitem">
|
|
||||||
<image :src="require(`@/static/images/manage/${_item.type}.png`)" class="img" mode="widthFix"></image>
|
|
||||||
<view class="name">{{ _item.name }}</view>
|
|
||||||
</navigator>
|
|
||||||
</u-grid-item>
|
|
||||||
</u-grid>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
current: 0,
|
|
||||||
swiperHeight: 0,
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
name: '工作台'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '系统'
|
|
||||||
},
|
|
||||||
],
|
|
||||||
deskList: [
|
|
||||||
{
|
|
||||||
name: '公告',
|
|
||||||
type: 'notice',
|
|
||||||
path: '/pages/manage/notice'
|
|
||||||
},
|
|
||||||
],
|
|
||||||
systemList: [
|
|
||||||
{
|
|
||||||
name: '角色',
|
|
||||||
type: 'role',
|
|
||||||
path: '/pages/manage/role'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '部门',
|
|
||||||
type: 'dept',
|
|
||||||
path: '/pages/manage/dept'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '字典',
|
|
||||||
type: 'dict',
|
|
||||||
path: '/pages/manage/dict'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '岗位',
|
|
||||||
type: 'post',
|
|
||||||
path: '/pages/manage/post'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onReady() {
|
|
||||||
let that = this
|
|
||||||
uni.getSystemInfo({
|
|
||||||
success(e) {
|
|
||||||
console.log(e)
|
|
||||||
let { windowWidth, windowHeight, safeArea } = e
|
|
||||||
const query = uni.createSelectorQuery().in(that)
|
|
||||||
query
|
|
||||||
.select('#swiperBox')
|
|
||||||
.boundingClientRect(data => {
|
|
||||||
that.swiperHeight = safeArea.bottom - data.top
|
|
||||||
})
|
|
||||||
.exec()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
tabsChange(e) {
|
|
||||||
this.current = e.detail.current
|
|
||||||
},
|
|
||||||
change(index) {
|
|
||||||
this.current = index
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.swiper-box {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-icon {
|
|
||||||
width: 32rpx;
|
|
||||||
height: auto;
|
|
||||||
margin-right: 27rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gitem {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.img {
|
|
||||||
width: 54rpx;
|
|
||||||
height: auto;
|
|
||||||
margin-bottom: 26rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #030305;
|
|
||||||
line-height: 36rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,326 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<view class="safe-area-inset-bottom">
|
|
||||||
<rider-curd
|
|
||||||
v-model="form"
|
|
||||||
:option="option"
|
|
||||||
:data="list"
|
|
||||||
:rules="rules"
|
|
||||||
:readonly.sync="readonly"
|
|
||||||
@search="onSearch"
|
|
||||||
@action-click="onActionClick"
|
|
||||||
@submit="onSubmit"
|
|
||||||
@del="onRemove"
|
|
||||||
ref="crud"
|
|
||||||
>
|
|
||||||
<view slot="form">
|
|
||||||
<u-form-item label="通知标题" prop="title" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input v-model="form.title" :disabled="readonly" placeholder="通知标题" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="通知类型" prop="category" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input
|
|
||||||
v-model="formLabel.category"
|
|
||||||
:disabled="readonly"
|
|
||||||
placeholder="通知类型"
|
|
||||||
type="select"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
if (!readonly) categoryShow = true
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="通知日期" prop="releaseTime" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input
|
|
||||||
v-model="form.releaseTime"
|
|
||||||
:disabled="readonly"
|
|
||||||
placeholder="通知日期"
|
|
||||||
type="select"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
if (!readonly) timeShow = true
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="通知内容" :label-width="option.labelWidth || 160" :border-bottom="false">
|
|
||||||
<template #right v-if="!readonly">
|
|
||||||
<u-button
|
|
||||||
@click="onRichEdit(form.content)"
|
|
||||||
ripple
|
|
||||||
:custom-style="{ background: '#FFF6E9', color: '#FAA646' }"
|
|
||||||
size="mini"
|
|
||||||
>
|
|
||||||
去编辑
|
|
||||||
</u-button>
|
|
||||||
</template>
|
|
||||||
</u-form-item>
|
|
||||||
<mp-html :content="form.content"></mp-html>
|
|
||||||
</view>
|
|
||||||
<template #loadmore>
|
|
||||||
<u-loadmore :status="loadStatus" @loadmore="getList()" />
|
|
||||||
</template>
|
|
||||||
</rider-curd>
|
|
||||||
</view>
|
|
||||||
<!-- 通知类型 -->
|
|
||||||
<u-select
|
|
||||||
v-model="categoryShow"
|
|
||||||
:list="categoryList"
|
|
||||||
value-name="dictKey"
|
|
||||||
label-name="dictValue"
|
|
||||||
@confirm="e => onConfirm(e, 'category')"
|
|
||||||
safe-area-inset-bottom
|
|
||||||
></u-select>
|
|
||||||
<!-- 通知日期 -->
|
|
||||||
<u-picker
|
|
||||||
mode="time"
|
|
||||||
v-model="timeShow"
|
|
||||||
:params="timeParams"
|
|
||||||
start-year="2000"
|
|
||||||
end-year="2050"
|
|
||||||
@confirm="e => onConfirm(e, 'releaseTime')"
|
|
||||||
safe-area-inset-bottom
|
|
||||||
></u-picker>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import riderCurd from '@/components/rider-crud/index'
|
|
||||||
import mpHtml from '@/components/rider-crud/components/mp-html/mp-html'
|
|
||||||
import { getList, add, update, remove } from '@/api/notice.js'
|
|
||||||
import { dictionary } from '@/api/system/dict.js'
|
|
||||||
import { logo } from '../../common/setting'
|
|
||||||
import { getDicLabel } from '@/components/rider-crud/util/tool.js'
|
|
||||||
export default {
|
|
||||||
components: { riderCurd, mpHtml },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
loadStatus: 'loadmore', // 列表加载状态
|
|
||||||
checkedSwitch: false, // 默认打开管理
|
|
||||||
form: { content: '' }, // 表单
|
|
||||||
formLabel: {}, // 表单label
|
|
||||||
list: [], // 列表数据
|
|
||||||
params: {
|
|
||||||
// 分页
|
|
||||||
current: 1,
|
|
||||||
size: 10
|
|
||||||
},
|
|
||||||
readonly: false, // 查看时控制表单只读
|
|
||||||
option: {
|
|
||||||
// 组件选项
|
|
||||||
navTitle: '通知公告', //标题
|
|
||||||
manageBtn: true, // 右上角管理按钮，默认不显示
|
|
||||||
searchShow: true, //是否显示搜索，默认不显示
|
|
||||||
searchShow: true, //是否显示搜索，默认不显示
|
|
||||||
labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '通知标题',
|
|
||||||
prop: 'title'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '通知类型',
|
|
||||||
prop: 'categoryName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '通知日期',
|
|
||||||
prop: 'releaseTime'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
actions: [
|
|
||||||
// 左滑操作按钮
|
|
||||||
{
|
|
||||||
name: '编辑', // 操作名称
|
|
||||||
icon: 'edit-pen', //操作图标，有图标文字不显示
|
|
||||||
color: '#333', // 字体颜色
|
|
||||||
fontsize: 30, //字体大小，单位rpx
|
|
||||||
width: 40, // 宽度，单位px
|
|
||||||
background: '#fff' // 菜单按钮背景色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '删除',
|
|
||||||
icon: 'trash',
|
|
||||||
color: '#333',
|
|
||||||
fontsize: 30,
|
|
||||||
width: 40,
|
|
||||||
background: '#fff'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
// 表单校验规则
|
|
||||||
title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
|
|
||||||
category: [{ required: true, message: '请选择通知类型', trigger: 'change', type: 'number' }],
|
|
||||||
releaseTime: [{ required: true, message: '请选择通知日期', trigger: 'change' }]
|
|
||||||
},
|
|
||||||
timeShow: false,
|
|
||||||
timeParams: {
|
|
||||||
year: true,
|
|
||||||
month: true,
|
|
||||||
day: true,
|
|
||||||
hour: true,
|
|
||||||
minute: true,
|
|
||||||
second: true
|
|
||||||
},
|
|
||||||
categoryShow: false,
|
|
||||||
categoryList: [] //类型
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onShow() {
|
|
||||||
let that = this
|
|
||||||
uni.$on('richBack', function(data) {
|
|
||||||
that.$set(that.form, 'content', data)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onReady() {
|
|
||||||
this.getList(true)
|
|
||||||
this.getCategoryList()
|
|
||||||
},
|
|
||||||
onPullDownRefresh() {
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
onReachBottom() {
|
|
||||||
if (this.loadStatus == 'nomore') return
|
|
||||||
this.getList()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 获取列表
|
|
||||||
getList(override = false) {
|
|
||||||
if (override) {
|
|
||||||
this.params.current = 1
|
|
||||||
}
|
|
||||||
const { size } = this.params
|
|
||||||
getList(this.params)
|
|
||||||
.then(res => {
|
|
||||||
const { records, current } = res.data
|
|
||||||
if (records.length < size) this.loadStatus = 'nomore'
|
|
||||||
else this.loadStatus = 'loadmore'
|
|
||||||
if (override) {
|
|
||||||
this.list = records
|
|
||||||
} else {
|
|
||||||
this.list = this.list.concat(records)
|
|
||||||
}
|
|
||||||
this.params.current++
|
|
||||||
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 通知类型
|
|
||||||
getCategoryList() {
|
|
||||||
dictionary({ code: 'notice' }).then(res => {
|
|
||||||
this.categoryList = res.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 类型回调
|
|
||||||
onConfirm(e, type) {
|
|
||||||
if (type == 'category') {
|
|
||||||
this.formLabel[type] = e[0].label
|
|
||||||
this.form.category = Number(e[0].value)
|
|
||||||
} else {
|
|
||||||
this.$set(this.form, 'releaseTime', e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 编辑富文本
|
|
||||||
onRichEdit(e) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/pages/rich/index?data=${e}`
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 搜索 (自行配置搜索内容)
|
|
||||||
onSearch(val) {
|
|
||||||
this.params = {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
title: val
|
|
||||||
}
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
// 左滑按钮点击
|
|
||||||
onActionClick({ index, data, action, done }) {
|
|
||||||
const { name } = action
|
|
||||||
switch (name) {
|
|
||||||
case '新增':
|
|
||||||
this.formLabel = {}
|
|
||||||
this.form = { content: '' }
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
case '删除':
|
|
||||||
this.onRemove(data.id)
|
|
||||||
break
|
|
||||||
case '查看':
|
|
||||||
this.readonly = true
|
|
||||||
case '编辑':
|
|
||||||
this.formLabel.category = getDicLabel(data.category, this.categoryList)
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 删除
|
|
||||||
onRemove(id) {
|
|
||||||
uni.showModal({
|
|
||||||
title: '确定要删除吗？',
|
|
||||||
success: action => {
|
|
||||||
if (action.confirm) {
|
|
||||||
remove(id).then(() => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '删除成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$refs['crud'].allCheckHide(false)
|
|
||||||
}, 100)
|
|
||||||
// #ifdef APP
|
|
||||||
this.getList(true)
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
// #endif
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 表单提交
|
|
||||||
onSubmit(form, action, unloading, done) {
|
|
||||||
if (action == '新增') {
|
|
||||||
add(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '新增成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
this.formLabel = {}
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
} else if (action == '编辑') {
|
|
||||||
update(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '编辑成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
this.formLabel = {}
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
page {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,311 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<view class="safe-area-inset-bottom">
|
|
||||||
<rider-curd
|
|
||||||
v-model="form"
|
|
||||||
:option="option"
|
|
||||||
:data="list"
|
|
||||||
:rules="rules"
|
|
||||||
:readonly.sync="readonly"
|
|
||||||
@search="onSearch"
|
|
||||||
@action-click="onActionClick"
|
|
||||||
@submit="onSubmit"
|
|
||||||
@del="onRemove"
|
|
||||||
ref="crud"
|
|
||||||
>
|
|
||||||
<template #form>
|
|
||||||
<u-form-item label="岗位类型" prop="category" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input
|
|
||||||
v-model="formLabel.category"
|
|
||||||
placeholder="角色名称"
|
|
||||||
type="select"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
if (!readonly) categoryShow = true
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="岗位编号" prop="postCode" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input v-model="form.postCode" :disabled="readonly" placeholder="岗位编号" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="岗位名称" prop="postName" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input v-model="form.postName" :disabled="readonly" placeholder="岗位名称" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="岗位排序" prop="sort" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input v-model="form.sort" :disabled="readonly" type="number" placeholder="岗位排序" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="岗位描述" prop="remark" :label-width="option.labelWidth || 160">
|
|
||||||
<u-input
|
|
||||||
v-model="form.remark"
|
|
||||||
:disabled="readonly"
|
|
||||||
type="textarea"
|
|
||||||
:maxlength="-1"
|
|
||||||
:height="35"
|
|
||||||
placeholder="岗位描述"
|
|
||||||
/>
|
|
||||||
</u-form-item>
|
|
||||||
</template>
|
|
||||||
<template #loadmore>
|
|
||||||
<u-loadmore :status="loadStatus" @loadmore="getList()" />
|
|
||||||
</template>
|
|
||||||
</rider-curd>
|
|
||||||
</view>
|
|
||||||
<u-select
|
|
||||||
v-model="categoryShow"
|
|
||||||
:list="categoryList"
|
|
||||||
value-name="dictKey"
|
|
||||||
label-name="dictValue"
|
|
||||||
@confirm="onConfirm"
|
|
||||||
safe-area-inset-bottom
|
|
||||||
></u-select>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import riderCurd from '@/components/rider-crud/index'
|
|
||||||
import { getList, add, update, remove } from '@/api/system/post.js'
|
|
||||||
import { tenantSelect } from '@/api/system/tenant.js'
|
|
||||||
import { dictionary } from '@/api/system/dict.js'
|
|
||||||
import { getDicLabel } from '@/components/rider-crud/util/tool.js'
|
|
||||||
export default {
|
|
||||||
components: { riderCurd },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
checkedSwitch: false,
|
|
||||||
form: {},
|
|
||||||
formLabel: {},
|
|
||||||
list: [],
|
|
||||||
params: {
|
|
||||||
current: 1,
|
|
||||||
size: 10
|
|
||||||
},
|
|
||||||
readonly: false, // 查看时控制表单只读
|
|
||||||
loadStatus: 'loadmore', // 列表加载状态
|
|
||||||
option: {
|
|
||||||
navTitle: '岗位管理', //标题
|
|
||||||
manageBtn: true, // 右上角管理按钮，默认不显示
|
|
||||||
searchShow: true, //是否显示搜索，默认不显示
|
|
||||||
labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '岗位名称',
|
|
||||||
prop: 'postName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '岗位编号',
|
|
||||||
prop: 'postCode'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '所属租户',
|
|
||||||
prop: 'tenantName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '岗位类型',
|
|
||||||
prop: 'categoryName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '岗位排序',
|
|
||||||
prop: 'sort'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '岗位描述',
|
|
||||||
prop: 'remark'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
actions: [
|
|
||||||
{
|
|
||||||
name: '编辑', // 操作名称
|
|
||||||
icon: 'edit-pen', //操作图标，有图标文字不显示
|
|
||||||
color: '#333', // 字体颜色
|
|
||||||
fontsize: 30, //字体大小，单位rpx
|
|
||||||
width: 40, // 宽度，单位px
|
|
||||||
background: '#fff' // 菜单按钮背景色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '删除',
|
|
||||||
icon: 'trash',
|
|
||||||
color: '#333',
|
|
||||||
fontsize: 30,
|
|
||||||
width: 40,
|
|
||||||
background: '#fff'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
category: [{ required: true, message: '请选择岗位类型', trigger: 'change', type: 'number' }],
|
|
||||||
postCode: [{ required: true, message: '请输入岗位编号', trigger: 'blur' }],
|
|
||||||
postName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
|
|
||||||
sort: [{ required: true, message: '请输入岗位排序', trigger: 'blur', type: 'number' }]
|
|
||||||
},
|
|
||||||
categoryShow: false,
|
|
||||||
categoryList: [],
|
|
||||||
category: '',
|
|
||||||
tenantList: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onReady() {
|
|
||||||
this.getTenant().then(() => {
|
|
||||||
this.getList(true)
|
|
||||||
})
|
|
||||||
this.getCategoryList()
|
|
||||||
},
|
|
||||||
onPullDownRefresh() {
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
onReachBottom() {
|
|
||||||
if (this.loadStatus == 'nomore') return
|
|
||||||
this.getList()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 获取列表
|
|
||||||
getList(override = false) {
|
|
||||||
if (override) {
|
|
||||||
this.params.current = 1
|
|
||||||
}
|
|
||||||
const { size } = this.params
|
|
||||||
getList(this.params)
|
|
||||||
.then(res => {
|
|
||||||
const { records, current } = res.data
|
|
||||||
if (records.length < size) this.loadStatus = 'nomore'
|
|
||||||
else this.loadStatus = 'loadmore'
|
|
||||||
if (override) {
|
|
||||||
this.list = records
|
|
||||||
} else {
|
|
||||||
this.list = this.list.concat(records)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.list && this.list.length > 0) {
|
|
||||||
this.list.map(e => {
|
|
||||||
e.tenantName = getDicLabel(e.tenantId, this.tenantList, { label: 'tenantName', value: 'tenantId' })
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.params.current++
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 获取类型
|
|
||||||
getCategoryList() {
|
|
||||||
dictionary({ code: 'post_category' }).then(res => {
|
|
||||||
this.categoryList = res.data
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 租户类型
|
|
||||||
getTenant() {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
tenantSelect().then(res => {
|
|
||||||
this.tenantList = res.data
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 类型回调
|
|
||||||
onConfirm(e) {
|
|
||||||
this.$set(this.form, 'category', Number(e[0].value))
|
|
||||||
this.$set(this.formLabel, 'category', e[0].label)
|
|
||||||
},
|
|
||||||
// 搜索 (自行配置搜索内容)
|
|
||||||
onSearch(val) {
|
|
||||||
this.params = {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
postName: val
|
|
||||||
}
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
// 左滑按钮点击
|
|
||||||
onActionClick({ index, data, action, done }) {
|
|
||||||
const { name } = action
|
|
||||||
console.log(name, index)
|
|
||||||
switch (name) {
|
|
||||||
case '新增':
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
case '删除':
|
|
||||||
this.onRemove(data.id)
|
|
||||||
break
|
|
||||||
case '查看':
|
|
||||||
this.readonly = true
|
|
||||||
case '编辑':
|
|
||||||
this.formLabel.category = getDicLabel(data.category, this.categoryList)
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 删除
|
|
||||||
onRemove(id) {
|
|
||||||
uni.showModal({
|
|
||||||
title: '确定要删除吗？',
|
|
||||||
success: action => {
|
|
||||||
if (action.confirm) {
|
|
||||||
remove(id).then(() => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '删除成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$refs['crud'].allCheckHide(false)
|
|
||||||
}, 100)
|
|
||||||
// #ifdef APP
|
|
||||||
this.getList(true)
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
// #endif
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 表单提交
|
|
||||||
onSubmit(form, action, unloading, done) {
|
|
||||||
if (action == '新增') {
|
|
||||||
add(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '新增成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
this.formLabel = {}
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
} else if (action == '编辑') {
|
|
||||||
update(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '编辑成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
this.formLabel = {}
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
page {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.nav-right {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: normal;
|
|
||||||
padding-right: 24rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,372 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<view class="safe-area-inset-bottom">
|
|
||||||
<rider-curd
|
|
||||||
v-model="form"
|
|
||||||
:option="option"
|
|
||||||
:data="list"
|
|
||||||
:rules="rules"
|
|
||||||
:readonly.sync="readonly"
|
|
||||||
@search="onSearch"
|
|
||||||
@action-click="onActionClick"
|
|
||||||
@submit="onSubmit"
|
|
||||||
@del="onRemove"
|
|
||||||
ref="crud"
|
|
||||||
>
|
|
||||||
<template #form>
|
|
||||||
<u-form-item label="角色名称" prop="roleName" :label-width="option.labelWidth || 160" required>
|
|
||||||
<u-input v-model="form.roleName" :disabled="readonly" placeholder="角色名称" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="上级角色" prop="parentId" :label-width="option.labelWidth || 160">
|
|
||||||
<u-input
|
|
||||||
v-model="formLabel.parentName"
|
|
||||||
placeholder="上级角色"
|
|
||||||
type="select"
|
|
||||||
@click="
|
|
||||||
() => {
|
|
||||||
if (!readonly) $refs.treePicker._show()
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="角色别名" prop="roleAlias" required :label-width="option.labelWidth || 160">
|
|
||||||
<u-input v-model="form.roleAlias" :disabled="readonly" placeholder="角色别名" />
|
|
||||||
</u-form-item>
|
|
||||||
<u-form-item label="角色排序" prop="sort" required :label-width="option.labelWidth || 160">
|
|
||||||
<u-input v-model="form.sort" :disabled="readonly" type="number" placeholder="角色排序" />
|
|
||||||
</u-form-item>
|
|
||||||
</template>
|
|
||||||
<template #loadmore>
|
|
||||||
<u-loadmore :status="loadStatus" @loadmore="getList()" />
|
|
||||||
</template>
|
|
||||||
</rider-curd>
|
|
||||||
</view>
|
|
||||||
<!-- 上级角色tree -->
|
|
||||||
<rider-tree
|
|
||||||
ref="treePicker"
|
|
||||||
:range="roleTreeList"
|
|
||||||
@cancel="$refs.treePicker._hide()"
|
|
||||||
@confirm="onTreeConfirm"
|
|
||||||
idKey="id"
|
|
||||||
nameKey="title"
|
|
||||||
:multiple="false"
|
|
||||||
:cascade="false"
|
|
||||||
:foldAll="false"
|
|
||||||
confirmColor="#4E7FF9"
|
|
||||||
cancelColor="#757575"
|
|
||||||
title="上级角色"
|
|
||||||
titleColor="#757575"
|
|
||||||
></rider-tree>
|
|
||||||
<!-- 菜单权限 -->
|
|
||||||
<rider-tree
|
|
||||||
ref="menuPicker"
|
|
||||||
:range="menuTreeList"
|
|
||||||
@cancel="$refs.menuPicker._hide()"
|
|
||||||
@confirm="onMenuConfirm"
|
|
||||||
idKey="id"
|
|
||||||
nameKey="title"
|
|
||||||
:multiple="true"
|
|
||||||
:cascade="true"
|
|
||||||
:foldAll="true"
|
|
||||||
confirmColor="#4E7FF9"
|
|
||||||
cancelColor="#757575"
|
|
||||||
title="菜单权限"
|
|
||||||
titleColor="#757575"
|
|
||||||
></rider-tree>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import riderCurd from '@/components/rider-crud/index'
|
|
||||||
import riderTree from '@/components/rider-crud/components/tree-picker'
|
|
||||||
import { getList, add, update, remove, roleTree, menuTree, menuTreeKey, grant } from '@/api/system/role.js'
|
|
||||||
import { tenantSelect } from '@/api/system/tenant.js'
|
|
||||||
import { getDicLabel } from '@/components/rider-crud/util/tool.js'
|
|
||||||
export default {
|
|
||||||
components: { riderCurd, riderTree },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
checkedSwitch: false,
|
|
||||||
form: {},
|
|
||||||
formLabel: {},
|
|
||||||
list: [],
|
|
||||||
params: {
|
|
||||||
current: 1,
|
|
||||||
size: 10
|
|
||||||
},
|
|
||||||
readonly: false, // 查看时控制表单只读
|
|
||||||
loadStatus: 'loadmore', // 列表加载状态
|
|
||||||
option: {
|
|
||||||
navTitle: '角色管理', //标题
|
|
||||||
manageBtn: true, // 右上角管理按钮，默认不显示
|
|
||||||
searchShow: true, //是否显示搜索，默认不显示
|
|
||||||
labelWidth: 160, //form表单lable宽度， 默认160，单位rpx
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '角色名称',
|
|
||||||
prop: 'roleName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '所属租户',
|
|
||||||
prop: 'tenantName'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '角色别名',
|
|
||||||
prop: 'roleAlias'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '角色排序',
|
|
||||||
prop: 'sort'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
actions: [
|
|
||||||
{
|
|
||||||
name: '编辑', // 操作名称
|
|
||||||
icon: 'edit-pen', //操作图标，有图标文字不显示
|
|
||||||
color: '#333', // 字体颜色
|
|
||||||
fontsize: 30, //字体大小，单位rpx
|
|
||||||
width: 40, // 宽度，单位px
|
|
||||||
background: '#fff' // 菜单按钮背景色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '删除',
|
|
||||||
icon: 'trash',
|
|
||||||
color: '#333',
|
|
||||||
fontsize: 30,
|
|
||||||
width: 40,
|
|
||||||
background: '#fff'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '菜单权限',
|
|
||||||
icon: 'setting',
|
|
||||||
color: '#333',
|
|
||||||
fontsize: 30,
|
|
||||||
width: 40,
|
|
||||||
background: '#fff'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
|
||||||
roleAlias: [{ required: true, message: '请输入角色别名', trigger: 'blur' }],
|
|
||||||
sort: [{ required: true, message: '请输入角色排序', trigger: 'blur', type: 'number' }]
|
|
||||||
},
|
|
||||||
tenantList: [],
|
|
||||||
roleTreeList: [],
|
|
||||||
menuTreeList: [],
|
|
||||||
menuCheckIds: [],
|
|
||||||
roleIds: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onReady() {
|
|
||||||
this.getTenant().then(() => {
|
|
||||||
this.getList(true)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onPullDownRefresh() {
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
onReachBottom() {
|
|
||||||
if (this.loadStatus == 'nomore') return
|
|
||||||
this.getList()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 获取列表
|
|
||||||
getList(override = false) {
|
|
||||||
if (override) {
|
|
||||||
this.params.current = 1
|
|
||||||
}
|
|
||||||
const { size } = this.params
|
|
||||||
getList(this.params)
|
|
||||||
.then(res => {
|
|
||||||
const records = res.data
|
|
||||||
if (records.length < size) this.loadStatus = 'nomore'
|
|
||||||
else this.loadStatus = 'loadmore'
|
|
||||||
if (override) {
|
|
||||||
this.list = records
|
|
||||||
} else {
|
|
||||||
this.list = this.list.concat(records)
|
|
||||||
}
|
|
||||||
if (this.list && this.list.length > 0) {
|
|
||||||
this.list = this.filterList(this.list)
|
|
||||||
}
|
|
||||||
this.params.current++
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
uni.stopPullDownRefresh()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
filterList(list) {
|
|
||||||
if (!list || list.length == 0) return list
|
|
||||||
list.forEach(e => {
|
|
||||||
e.tenantName = getDicLabel(e.tenantId, this.tenantList, { label: 'tenantName', value: 'tenantId' })
|
|
||||||
if (e.children) this.filterList(e.children)
|
|
||||||
})
|
|
||||||
return list
|
|
||||||
},
|
|
||||||
// 租户类型
|
|
||||||
getTenant() {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
roleTree().then(res => {
|
|
||||||
this.roleTreeList = res.data
|
|
||||||
})
|
|
||||||
tenantSelect().then(res => {
|
|
||||||
this.tenantList = res.data
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 获取菜单权限内容
|
|
||||||
getMenu(roleIds) {
|
|
||||||
menuTreeKey({ roleIds }).then(res => {
|
|
||||||
this.menuCheckIds = res.data.menu
|
|
||||||
})
|
|
||||||
menuTree().then(res => {
|
|
||||||
this.recursion(this.menuCheckIds, res.data.menu)
|
|
||||||
this.menuTreeList = res.data.menu
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$refs.menuPicker._show()
|
|
||||||
}, 10)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 递归
|
|
||||||
recursion(arr, menu) {
|
|
||||||
menu.forEach(e => {
|
|
||||||
if (arr.includes(e.id)) e.checked = true
|
|
||||||
if (e.hasChildren || (e.children && e.children.length > 0)) {
|
|
||||||
this.recursion(arr, e.children)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 菜单权限勾选回调
|
|
||||||
onMenuConfirm(e) {
|
|
||||||
let arr = []
|
|
||||||
e.forEach(e => {
|
|
||||||
arr.push(e.id)
|
|
||||||
})
|
|
||||||
const params = {
|
|
||||||
apiScopeIds: [],
|
|
||||||
dataScopeIds: [],
|
|
||||||
roleIds: [this.roleIds],
|
|
||||||
menuIds: arr
|
|
||||||
}
|
|
||||||
grant(params).then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
icon: 'none',
|
|
||||||
title: '操作成功'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//机构选择回调
|
|
||||||
onTreeConfirm(e) {
|
|
||||||
this.$set(this.form, 'parentId', e[0].id)
|
|
||||||
this.$set(this.formLabel, 'parentName', e[0].name)
|
|
||||||
},
|
|
||||||
// 搜索 (自行配置搜索内容)
|
|
||||||
onSearch(val) {
|
|
||||||
this.params = {
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
roleName: val
|
|
||||||
}
|
|
||||||
this.getList(true)
|
|
||||||
},
|
|
||||||
// 左滑按钮点击
|
|
||||||
onActionClick({ index, data, action, done }) {
|
|
||||||
const { name } = action
|
|
||||||
console.log(name, index)
|
|
||||||
switch (name) {
|
|
||||||
case '新增':
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
case '删除':
|
|
||||||
this.onRemove(data.id)
|
|
||||||
break
|
|
||||||
case '查看':
|
|
||||||
this.readonly = true
|
|
||||||
case '编辑':
|
|
||||||
this.$set(this.formLabel, 'parentName', data.parentName)
|
|
||||||
done()
|
|
||||||
break
|
|
||||||
case '菜单权限':
|
|
||||||
this.roleIds = data.id
|
|
||||||
this.getMenu(data.id)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
if (['删除', '编辑'].includes(name)) this.$refs['crud'].hideChildren()
|
|
||||||
},
|
|
||||||
// 删除
|
|
||||||
onRemove(id) {
|
|
||||||
uni.showModal({
|
|
||||||
title: '确定要删除吗？',
|
|
||||||
success: action => {
|
|
||||||
if (action.confirm) {
|
|
||||||
remove(id).then(() => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '删除成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$refs['crud'].allCheckHide(false)
|
|
||||||
}, 100)
|
|
||||||
// #ifdef APP
|
|
||||||
this.getList(true)
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
// #endif
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 表单提交
|
|
||||||
onSubmit(form, action, unloading, done) {
|
|
||||||
if (action == '新增') {
|
|
||||||
add(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '新增成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
// this.category = ''
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
} else if (action == '编辑') {
|
|
||||||
update(form)
|
|
||||||
.then(res => {
|
|
||||||
uni.showToast({
|
|
||||||
title: '编辑成功',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
// this.category = ''
|
|
||||||
done()
|
|
||||||
uni.startPullDownRefresh({})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
unloading()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
page {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.nav-right {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: normal;
|
|
||||||
padding-right: 24rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,290 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward" title="新闻详情页"
|
|
||||||
:background="{ background: '#fff' }" title-color="#000000">
|
|
||||||
<view class="right-nav" slot="right">
|
|
||||||
<image src="/static/images/news/search.png" class="icon icon-search" mode="widthFix"></image>
|
|
||||||
<image src="/static/images/news/menu.png" class="icon icon-menu" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</u-navbar>
|
|
||||||
|
|
||||||
<view class="header">
|
|
||||||
<image src="" class="avatar" mode=""></image>
|
|
||||||
<view class="info">
|
|
||||||
<view class="name">
|
|
||||||
中国空间站
|
|
||||||
<text class="tag">专栏作家</text>
|
|
||||||
</view>
|
|
||||||
<view class="date">11-12</view>
|
|
||||||
</view>
|
|
||||||
<view class="btn">+关注</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="content">
|
|
||||||
<view class="title">
|
|
||||||
天舟五号创造多个航天新纪录
|
|
||||||
</view>
|
|
||||||
<view class="static">
|
|
||||||
<view class="left">
|
|
||||||
<view class="block">
|
|
||||||
<image src="/static/images/news/gf.png" class="gf"></image>
|
|
||||||
官方
|
|
||||||
</view>
|
|
||||||
<view class="block">
|
|
||||||
<image src="/static/images/news/x.png" class="gf"></image>
|
|
||||||
焦点新闻
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="right">
|
|
||||||
<image src="/static/images/news/l.png" class="l" mode="widthFix"></image>
|
|
||||||
66666
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="detail">
|
|
||||||
<u-parse :html="content"></u-parse>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="footer">
|
|
||||||
<input type="text" value="" placeholder="说点什么..." class="ipt" />
|
|
||||||
<view class="control">
|
|
||||||
<view class="block">
|
|
||||||
<image src="/static/images/news/c.png" class="icon c" mode="widthFix"></image>
|
|
||||||
458
|
|
||||||
</view>
|
|
||||||
<view class="block">
|
|
||||||
<image src="/static/images/news/s.png" class="icon s" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="block">
|
|
||||||
<image src="/static/images/news/t.png" class="icon t" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
content: `<p>在北京航天飞行控制中心拍摄的天舟五号货运飞船与空间站组合体完成自主快速交会对接示意图。孙丰晓摄（新华社发）</p>
|
|
||||||
<p>北京时间2022年11月12日10时03分，在文昌航天发射场，搭载天舟五号货运飞船的长征七号遥六运载火箭点火发射，将天舟五号货运飞船送入预定轨道。随后，天舟五号货运飞船与在轨运行的空间站组合体进行自主快速交会对接，中国航天员首次在空间站迎接货运飞船来访。</p>
|
|
||||||
<p>朝着在距离地面约400公里轨道上运行的中国空间站组合体，天舟五号首次实现2小时自主快速交会对接，创造世界纪录。这一技术突破对于提升我国空间交会对接水平，提升空间站任务应急物资补给能力具有重要意义。</p>
|
|
||||||
<p>空间站阶段最快交会对接，让人类航天器交会对接用时进入“2小时”时代。</p>
|
|
||||||
<p>此次任务是中国空间站“T”字基本构型在轨组装完成后，“太空快递”首次送达，执行运输任务的仍是长七火箭。</p>`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.container {
|
|
||||||
padding: 0 0 150rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-nav {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-right: 40rpx;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
height: auto;
|
|
||||||
|
|
||||||
&-search {
|
|
||||||
width: 40rpx;
|
|
||||||
margin-right: 40rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-menu {
|
|
||||||
width: 40rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 44rpx;
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 69rpx;
|
|
||||||
height: 69rpx;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 1px solid #69b0ff;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 14rpx;
|
|
||||||
|
|
||||||
.name {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #000000;
|
|
||||||
line-height: 36rpx;
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
margin-left: 10rpx;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 8rpx 10rpx;
|
|
||||||
font-size: 14rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #4cbeca;
|
|
||||||
line-height: 21rpx;
|
|
||||||
border: 1px solid #0bb9c8;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date {
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #a3a3a3;
|
|
||||||
line-height: 36rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 8rpx 19rpx;
|
|
||||||
background: #e6e6e6;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
font-size: 20rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #4cbeca;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 0 44rpx;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 40rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #000000;
|
|
||||||
line-height: 47rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.static {
|
|
||||||
margin-top: 34rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.left,
|
|
||||||
.right {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.block {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
font-size: 20rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #787878;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
.gf {
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
margin-right: 8rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
font-size: 20rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #787878;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
.l {
|
|
||||||
width: 25rpx;
|
|
||||||
height: auto;
|
|
||||||
margin-right: 6rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail {
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #000000;
|
|
||||||
line-height: 47rpx;
|
|
||||||
margin-top: 50rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 999;
|
|
||||||
height: 100rpx;
|
|
||||||
padding: 20rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #ffffff;
|
|
||||||
|
|
||||||
.ipt {
|
|
||||||
width: 380rpx;
|
|
||||||
height: 77rpx;
|
|
||||||
background: #f7f7f7;
|
|
||||||
border-radius: 38px;
|
|
||||||
padding: 0 37rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
.block {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c {
|
|
||||||
width: 41rpx;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.s {
|
|
||||||
width: 36rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.t {
|
|
||||||
width: 31rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,259 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
|
|
||||||
back-icon-color="#fff" back-icon-size="35" title="新闻动态" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }"
|
|
||||||
title-color="#fff">
|
|
||||||
<image slot="right" src="/static/images/home/message.png" class="message-icon" mode="widthFix"></image>
|
|
||||||
</u-navbar>
|
|
||||||
|
|
||||||
<view class="tab">
|
|
||||||
<u-tabs :list="tabs" :is-scroll="false" :current="current" active-color="#69b0ff" inactive-color="#595959"
|
|
||||||
height="100" @change="change"></u-tabs>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<swiper id="swiperBox" :style="{ height: swiperHeight + 'px' }" :current="current" @change="tabsChange">
|
|
||||||
<swiper-item class="swiper-item" v-for="(pitem, pindex) in tabs" :key="pindex">
|
|
||||||
<scroll-view scroll-y style="width: 100%;height: 100%;" refresher-enabled
|
|
||||||
:refresher-triggered="pitem.triggered" @scrolltolower="onreachBottom"
|
|
||||||
@refresherrefresh="refresherrefresh(pindex)" @refresherrestore="refresherrestore(pindex)"
|
|
||||||
@refresherabort="refresherabort(pindex)">
|
|
||||||
<view class="content">
|
|
||||||
<navigator class="news" v-for="(item, index) in contentList[pindex].list" :key="index"
|
|
||||||
url="/pages/news/detail" hover-class="none">
|
|
||||||
<view class="head">
|
|
||||||
<image src="" class="avatar" mode=""></image>
|
|
||||||
<view class="info">
|
|
||||||
<view class="name">
|
|
||||||
中国空间站
|
|
||||||
<text class="tag">专栏作家</text>
|
|
||||||
</view>
|
|
||||||
<view class="date">11-12</view>
|
|
||||||
</view>
|
|
||||||
<u-icon name="arrow-right" size="35" color="#C5C5C5"></u-icon>
|
|
||||||
</view>
|
|
||||||
<view class="des">
|
|
||||||
天舟五号创造多个航天新纪录。
|
|
||||||
</view>
|
|
||||||
</navigator>
|
|
||||||
<view class="nomore">
|
|
||||||
<u-loadmore :status="contentList[pindex].status" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
swiperHeight: 0,
|
|
||||||
tabs: [{
|
|
||||||
name: '互动',
|
|
||||||
triggered: false,
|
|
||||||
_triggered: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '动态',
|
|
||||||
triggered: false,
|
|
||||||
_triggered: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '通知',
|
|
||||||
triggered: false,
|
|
||||||
_triggered: false
|
|
||||||
}
|
|
||||||
],
|
|
||||||
contentList: [{
|
|
||||||
list: 8,
|
|
||||||
page: 1,
|
|
||||||
status: 'loadmore'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
list: 8,
|
|
||||||
page: 1,
|
|
||||||
status: 'loadmore'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
list: 8,
|
|
||||||
page: 1,
|
|
||||||
status: 'loadmore'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
current: 0
|
|
||||||
};
|
|
||||||
},
|
|
||||||
onLoad() {},
|
|
||||||
onReady() {
|
|
||||||
let that = this;
|
|
||||||
uni.getSystemInfo({
|
|
||||||
success(e) {
|
|
||||||
console.log(e);
|
|
||||||
let {
|
|
||||||
windowWidth,
|
|
||||||
windowHeight,
|
|
||||||
safeArea
|
|
||||||
} = e;
|
|
||||||
const query = uni.createSelectorQuery().in(that);
|
|
||||||
query
|
|
||||||
.select('#swiperBox')
|
|
||||||
.boundingClientRect(data => {
|
|
||||||
that.swiperHeight = safeArea.bottom - data.top;
|
|
||||||
})
|
|
||||||
.exec();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onPullDownRefresh() {
|
|
||||||
setTimeout(() => {
|
|
||||||
uni.stopPullDownRefresh();
|
|
||||||
}, 1500);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
tabsChange(e) {
|
|
||||||
this.current = e.detail.current;
|
|
||||||
},
|
|
||||||
refresherrefresh(index) {
|
|
||||||
console.log('自定义下拉刷新被触发');
|
|
||||||
let _this = this;
|
|
||||||
if (_this.tabs[index]._triggered) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
_this.tabs[index]._triggered = true;
|
|
||||||
//界面下拉触发，triggered可能不是true，要设为true
|
|
||||||
if (!_this.tabs[index].triggered) {
|
|
||||||
_this.tabs[index].triggered = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
_this.tabs[index].triggered = false; //触发onRestore，并关闭刷新图标
|
|
||||||
_this.tabs[index]._triggered = false;
|
|
||||||
}, 10);
|
|
||||||
},
|
|
||||||
refresherrestore(index) {
|
|
||||||
console.log('自定义下拉刷新被复位');
|
|
||||||
let _this = this;
|
|
||||||
_this.tabs[index].triggered = false;
|
|
||||||
_this.tabs[index]._triggered = false;
|
|
||||||
},
|
|
||||||
refresherabort(index) {
|
|
||||||
console.log('自定义下拉刷新被中止 ');
|
|
||||||
let _this = this;
|
|
||||||
_this.tabs[index].triggered = false;
|
|
||||||
_this.tabs[index]._triggered = false;
|
|
||||||
},
|
|
||||||
// scroll-view到底部加载更多
|
|
||||||
onreachBottom() {
|
|
||||||
let current = this.current;
|
|
||||||
if (this.contentList[current].page >= 3) return;
|
|
||||||
this.contentList[current].status = 'loading';
|
|
||||||
setTimeout(() => {
|
|
||||||
this.contentList[current].page = ++this.contentList[current].page;
|
|
||||||
this.contentList[current].list += 10;
|
|
||||||
if (this.contentList[current].page >= 3)
|
|
||||||
this.contentList[current].status = 'nomore';
|
|
||||||
else this.contentList[current].status = 'loading';
|
|
||||||
}, 2000);
|
|
||||||
},
|
|
||||||
change(index) {
|
|
||||||
this.current = index;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.message-icon {
|
|
||||||
width: 32rpx;
|
|
||||||
height: auto;
|
|
||||||
margin-right: 27rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
margin: 0 0 10rpx;
|
|
||||||
border-bottom: 1px solid #e4e7ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 0 0 150rpx;
|
|
||||||
|
|
||||||
.news {
|
|
||||||
&:not(:last-of-type) {
|
|
||||||
border-bottom: 2rpx solid #e4e7ed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nomore {
|
|
||||||
padding: 30rpx 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news {
|
|
||||||
margin: 30rpx 30rpx 0;
|
|
||||||
padding: 0 0 30rpx;
|
|
||||||
|
|
||||||
.head {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 69rpx;
|
|
||||||
height: 69rpx;
|
|
||||||
background: #ffffff;
|
|
||||||
// border: 1px solid #14b9c8;
|
|
||||||
border: 1px solid #5f88ff;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 14rpx;
|
|
||||||
|
|
||||||
.name {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #000000;
|
|
||||||
line-height: 36rpx;
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
margin-left: 15rpx;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 8rpx 10rpx;
|
|
||||||
font-size: 14rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #69b0ff;
|
|
||||||
line-height: 21rpx;
|
|
||||||
border: 1px solid #69b0ff;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.date {
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #a3a3a3;
|
|
||||||
line-height: 36rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.des {
|
|
||||||
margin-top: 40rpx;
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
color: #000000;
|
|
||||||
line-height: 47rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-box {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,357 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view class="editor_toolbox" :style="{ top: `${statusBarHeight}px` }">
|
|
||||||
<u-icon name="arrow-leftward" size="40rpx" color="#303133" @click="onSave"></u-icon>
|
|
||||||
<!-- <i class="iconfont icon-save" @tap="onSave" /> -->
|
|
||||||
<i class="iconfont icon-undo" data-method="undo" @tap="edit" />
|
|
||||||
<i class="iconfont icon-redo" data-method="redo" @tap="edit" />
|
|
||||||
<i class="iconfont icon-img" data-method="insertImg" @tap="edit" />
|
|
||||||
<i class="iconfont icon-video" data-method="insertVideo" @tap="edit" />
|
|
||||||
<i class="iconfont icon-link" data-method="insertLink" @tap="edit" />
|
|
||||||
<i class="iconfont icon-text" data-method="insertText" @tap="edit" />
|
|
||||||
<i class="iconfont icon-clear" @tap="clear" />
|
|
||||||
</view>
|
|
||||||
<view :style="{ paddingTop: `${statusBarHeight + 50}px` }">
|
|
||||||
<mp-html ref="article" container-style="padding:20px" :content="content" domain="" :editable="editable" @remove="remove" />
|
|
||||||
</view>
|
|
||||||
<block v-if="modal">
|
|
||||||
<view class="mask" />
|
|
||||||
<view class="modal">
|
|
||||||
<view class="modal_title">{{ modal.title }}</view>
|
|
||||||
<input class="modal_input" :value="modal.value" maxlength="-1" auto-focus @input="modalInput" />
|
|
||||||
<view class="modal_foot">
|
|
||||||
<view class="modal_button" @tap="modalCancel">取消</view>
|
|
||||||
<view class="modal_button" style="color:#576b95;border-left:1px solid rgba(0,0,0,.1)" @tap="modalConfirm">确定</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</block>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import mpHtml from '@/components/rider-crud/components/mp-html/mp-html'
|
|
||||||
import http from '@/http/api.js'
|
|
||||||
// 上传图片方法
|
|
||||||
function upload(src, type) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
console.log('上传', type === 'img' ? '图片' : '视频', '：', src)
|
|
||||||
// resolve(src)
|
|
||||||
const params = {
|
|
||||||
// #ifdef MP-ALIPAY
|
|
||||||
fileType: 'image/video/audio', // 仅支付宝小程序，且必填。
|
|
||||||
// #endif
|
|
||||||
filePath: src,
|
|
||||||
name: 'file'
|
|
||||||
}
|
|
||||||
http.upload('/api/blade-resource/oss/endpoint/put-file', params).then(res => {
|
|
||||||
resolve(res.data.link)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 删除图片方法
|
|
||||||
function remove(src) {
|
|
||||||
console.log('删除图片：', src)
|
|
||||||
// 实际使用时，删除线上资源
|
|
||||||
}
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
content: null,
|
|
||||||
modal: null,
|
|
||||||
editable: true,
|
|
||||||
statusBarHeight: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
mpHtml
|
|
||||||
},
|
|
||||||
onReady() {
|
|
||||||
/**
|
|
||||||
* @description 设置获取链接的方法
|
|
||||||
* @param {String} type 链接的类型（img/video/audio/link）
|
|
||||||
* @param {String} value 修改链接时，这里会传入旧值
|
|
||||||
* @returns {Promise} 返回线上地址
|
|
||||||
* type 为音视频时可以返回一个数组作为源地址
|
|
||||||
* type 为 audio 时，可以返回一个 object，包含 src、name、author、poster 等字段
|
|
||||||
*/
|
|
||||||
this.$refs.article.getSrc = (type, value) => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (type === 'img' || type === 'video') {
|
|
||||||
uni.showActionSheet({
|
|
||||||
itemList: ['本地选取', '远程链接'],
|
|
||||||
success: res => {
|
|
||||||
if (res.tapIndex === 0) {
|
|
||||||
// 本地选取
|
|
||||||
if (type === 'img') {
|
|
||||||
uni.chooseImage({
|
|
||||||
count: value === undefined ? 9 : 1, // 2.2.0 版本起插入图片时支持多张（修改图片链接时仅限一张）
|
|
||||||
success: res => {
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
if (res.tempFilePaths.length == 1 && wx.editImage) {
|
|
||||||
// 单张图片时进行编辑
|
|
||||||
wx.editImage({
|
|
||||||
src: res.tempFilePaths[0],
|
|
||||||
complete: res2 => {
|
|
||||||
uni.showLoading({
|
|
||||||
title: '上传中'
|
|
||||||
})
|
|
||||||
upload(res2.tempFilePath || res.tempFilePaths[0], type).then(res => {
|
|
||||||
uni.hideLoading()
|
|
||||||
resolve(res)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
// #endif
|
|
||||||
uni.showLoading({
|
|
||||||
title: '上传中'
|
|
||||||
})
|
|
||||||
;(async () => {
|
|
||||||
const arr = []
|
|
||||||
for (let item of res.tempFilePaths) {
|
|
||||||
// 依次上传
|
|
||||||
const src = await upload(item, type)
|
|
||||||
arr.push(src)
|
|
||||||
}
|
|
||||||
return arr
|
|
||||||
})().then(res => {
|
|
||||||
uni.hideLoading()
|
|
||||||
resolve(res)
|
|
||||||
})
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
fail: reject
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
uni.chooseVideo({
|
|
||||||
success: res => {
|
|
||||||
uni.showLoading({
|
|
||||||
title: '上传中'
|
|
||||||
})
|
|
||||||
upload(res.tempFilePath, type).then(res => {
|
|
||||||
uni.hideLoading()
|
|
||||||
resolve(res)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
fail: reject
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 远程链接
|
|
||||||
this.callback = {
|
|
||||||
resolve,
|
|
||||||
reject
|
|
||||||
}
|
|
||||||
this.$set(this, 'modal', {
|
|
||||||
title: (type === 'img' ? '图片' : '视频') + '链接',
|
|
||||||
value
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.callback = {
|
|
||||||
resolve,
|
|
||||||
reject
|
|
||||||
}
|
|
||||||
let title
|
|
||||||
if (type === 'audio') {
|
|
||||||
title = '音频链接'
|
|
||||||
} else if (type === 'link') {
|
|
||||||
title = '链接地址'
|
|
||||||
}
|
|
||||||
this.$set(this, 'modal', {
|
|
||||||
title,
|
|
||||||
value
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onLoad(option) {
|
|
||||||
let that = this
|
|
||||||
that.content = option.data
|
|
||||||
// 获取高度 - 小程序设配
|
|
||||||
uni.getSystemInfo({
|
|
||||||
success: function(res) {
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
that.statusBarHeight = Number(res.statusBarHeight) + Number(res.platform == 'ios' ? 44 : 48)
|
|
||||||
// #endif
|
|
||||||
// #ifdef APP-PLUS
|
|
||||||
that.statusBarHeight = Number(res.statusBarHeight)
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 删除图片/视频/音频标签事件
|
|
||||||
remove(e) {
|
|
||||||
// 删除线上资源
|
|
||||||
remove(e.src)
|
|
||||||
},
|
|
||||||
// 处理模态框
|
|
||||||
modalInput(e) {
|
|
||||||
this.value = e.detail.value
|
|
||||||
},
|
|
||||||
modalConfirm() {
|
|
||||||
this.callback.resolve(this.value || this.modal.value || '')
|
|
||||||
this.$set(this, 'modal', null)
|
|
||||||
},
|
|
||||||
modalCancel() {
|
|
||||||
this.callback.reject()
|
|
||||||
this.$set(this, 'modal', null)
|
|
||||||
},
|
|
||||||
// 调用编辑器接口
|
|
||||||
edit(e) {
|
|
||||||
this.$refs.article[e.currentTarget.dataset.method]()
|
|
||||||
},
|
|
||||||
// 清空编辑器内容
|
|
||||||
clear() {
|
|
||||||
uni.showModal({
|
|
||||||
title: '确认',
|
|
||||||
content: '确定清空内容吗？',
|
|
||||||
success: res => {
|
|
||||||
if (res.confirm) this.$refs.article.clear()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 保存编辑器内容
|
|
||||||
onSave() {
|
|
||||||
setTimeout(() => {
|
|
||||||
var content = this.$refs.article.getContent()
|
|
||||||
uni.showModal({
|
|
||||||
title: '提示',
|
|
||||||
content: '是否保存当前内容返回上一级？',
|
|
||||||
confirmText: '保存',
|
|
||||||
cancelText: '不保存',
|
|
||||||
success: res => {
|
|
||||||
if (res.confirm) {
|
|
||||||
uni.$emit('richBack', content)
|
|
||||||
}
|
|
||||||
this.editable = false
|
|
||||||
uni.navigateBack({
|
|
||||||
delta: 1
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}, 50)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.editor_toolbox {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 999;
|
|
||||||
background-color: #ededed;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'iconfont';
|
|
||||||
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAeYAAsAAAAADlAAAAdLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEAgqOYItrATYCJAMkCxQABCAFhG0HcBv/CzOjdoNyEiD7nwnxpstuRCLrGmPTaffv/hnWZJHUNtWZeOD/3t03mks73vmC/3jA8SRom0aatimgfv7d9M8lBEJCIHRBKua0E7EEOqedMBEJm8N7js0MWpgq9PlMkGcTsS8NgH3X/AEbFaFGZNFvH+xR2uYofWlu9NO9ypmTgvNlW8CitMbdT7rHpgAXaKxBOfzWBdQCFgyrMV3kKtMLUFGd7GEC0JSkACq79OKAIMbDAW2W48z1QESSiQsUARGRZFyYAZ0AR8Q1ogsAjs7vhy+UBQIgwhPwR83HdB4F7R6gR25M+CrAUEwAobtM6LuBBBRA1qlLZvYO80KFg8isxmImAH1xHwzc0UPpQ/ph9cNLD+8+cn/9mnAgGQwUGkVj0B1kUhL4EP94IgQIVeCoDc62pg7uyLCRwUMCauARlsQ0ElWAq5EoAV9CogB8FzYieLq7qQM0rM5DYAriAik/Li6hNpHBj2knBBuokIJWymUizhppEknSNKNTIHnPfnR5WRIjFnmB0MgyTh9CFr9W5WgCNNfq00hdfi0KEVVL7I0kQvMYjy8OUbDAQIFwzDiGGzMKX+/PVu1sih2FbLk8PneQ0e84zT9a9GckbXu06x/h1C0hw45Twmlb0BLgUtCw7qqMfsqCGhV6bZl8tzTOhwXIwI1ZQCJLIIvccUoHE88h4XC2eGu4M/1XNB3fedRypMHlpyhbEwA5zn0qQ+4JIFxpmvQRIqHR6kOYxT8yRF6DufwjDl1JEG+8Wqk8ej0Z33StarLSdvb0fhAL+06dIRXWc4EDCLccDJ7nRTRGNUgi5S3sUk8hG4BAIuuqdJzCcXaWtWpZK0O7I0Mqs9SeBk6HJs+pMZ3cqWSo18Up8nh2vcql1drvYnRZfFaWawwlbAjnNuUeD0fz47f2GNsa/fF7o5EiX96JqiMhfWMOZ3c32aoWarUuu1GgZb3ZijxTszPBoebYYVU51WtjNSTXad3ekZzB2YUmmynf7Frv87CjOrjBApsDIHqPD//DhUKGSMSAEKRwBgqH+XDUGI0YIlaOKiYk2EnSqUEWF7XAageI3OVCf/PhsDEaNSKnhrSzKBTiQlVdDbJsPEl0ONSUS4ssTnLO4dOJ8O/y7lwLIsG9w6MxwIZTFYojgSR8c7B6ksJqZ8UOB6W0ubb0SifPuQb42mUpNFyJuQI0OLvELTPRSN5ODs3CBUKIBoDa1xrz1K/SNy3fVPVDMKK2XqdM6a9QLFycnZWRVUJ89QUvJOjZoAOfr7zKhGDrb79CEfP5M8/DTEvPngRh8AWBr9OZ66+89rX3tVtZ8tVf0r2fhur6+fMn0ALooJU7KIuS79+fpFNWX018UNVONCAU6vv7QGWHX5rbxpdvCW5JI9sFt9aUVW1pjXfr1K+5X6dOeOsts8vm/p1Iq+glCpUiObh4EVm2JbClPL5V603DrqjoTQomnlFsolUURBISwDpcroJ7b0oA02NQonc6VOv1iZVzBiYiduCcysTgHXF6OAN6GftRd0b3kZV9q0+AxEQ+IRESEvhEqIl262o2d+ZSUQfnmQcNY2dMXbp06rKxDTkJDJeW6vN3QmnfdO+etSJLmp0tSazIHjphQaZo7r6Dq2MZ3eom36nkLlp5St+X1jcrBkv4xK/79qbGfer3tXOWL0+NzJUNjuev1m2r8TwarGszs8uaVXMJRufavYvjGRWXNvLMw4a6hqnTp+OWddN3rFg+ixl4/IR5XXolag7ZzhxpDtvDmd17wTeo3HzocG+79mhzQ6GYS6SY3AUFNu1aUC5jsE6YcVIdLZk+YIqhI161tOWSVwtt2jUJey9Kv5VI+tWYJCCe8U3j1Nhp6t/ry8zF48oidd2GdLkxpPOAeiG9UXgmkpyh9YWSltIkJvUm3/2XckNk/emn1TPGhuRv5ddp5qpQ5XLRDWCzQqyzQ4tWrMxPsIRfxsInjYr7g9evq5O7w5KQAvAPYk1YW0p4kkSoGpozaS3WThNOfixfE8B+wzrpbqcdWAzzu1akq+jGw+IgeIpNPUYoW30gqPdHzI3c6qeif0AMzVuoE4HK3keDt+KE/PXzUOM3K4anQW5D40VTGYGmWAAeCflDN7ulJpW9TyBKHUAklQgJIYOROQVQQamAKkJbaMrX9fKWFqYDBmUZgJkVDBDGXhBRCAKGcdEJJzg3AKfxAiSYgAHJgFrckJIVVqPJSTBWzCD5AKVcG5mmE7ftHW1TxhL2O+o/lEBlsJjO43U3rFG6OCU87VLVgBGu4Moeh2XJ4IVzTHXqVP1xNjNZp05TrlqTVkfBWC3zDJKPPaVcm611kvj5O9qmjKVgyI/9H0qg7cNiOq/AuKG60pBT6RyedqmUacDoLVzBlTKxFNUMPnu/HFOdugaV/jijqUxVNB2eqs41gtM3LCcta4sQhsQIRxIkRQSSIRLEim8daOMprvsqcXCDRdX2cFgMy8TbcsJh6vBNMY++jmv7bXgQHHmqWy0A')
|
|
||||||
format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconfont {
|
|
||||||
color: #303133;
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'iconfont' !important;
|
|
||||||
font-size: 22px;
|
|
||||||
font-style: normal;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-undo:before {
|
|
||||||
content: '\e607';
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-redo:before {
|
|
||||||
content: '\e606';
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-img:before {
|
|
||||||
content: '\e6e2';
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-video:before {
|
|
||||||
content: '\e798';
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-link:before {
|
|
||||||
content: '\e60d';
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-text:before {
|
|
||||||
content: '\e6ce';
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-clear:before {
|
|
||||||
content: '\e637';
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-save:before {
|
|
||||||
content: '\e501';
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 模态框 */
|
|
||||||
.modal {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 16px;
|
|
||||||
right: 16px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal_title {
|
|
||||||
padding: 32px 24px 16px;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 700;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal_input {
|
|
||||||
display: block;
|
|
||||||
padding: 5px;
|
|
||||||
margin: 0 24px 32px 24px;
|
|
||||||
font-size: 14px;
|
|
||||||
border: 1px solid #dfe2e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal_foot {
|
|
||||||
display: flex;
|
|
||||||
line-height: 56px;
|
|
||||||
font-weight: 700;
|
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal_button {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 蒙版 */
|
|
||||||
.mask {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: black;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,188 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<view class="head">
|
|
||||||
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
|
|
||||||
back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="服务"
|
|
||||||
title-color="#fff"></u-navbar>
|
|
||||||
<view class="head-bg"></view>
|
|
||||||
<!-- 我的订阅 start -->
|
|
||||||
<view class="card sub">
|
|
||||||
<view class="title">我的订阅</view>
|
|
||||||
<view class="list">
|
|
||||||
<u-grid :col="4" :border="false">
|
|
||||||
<u-grid-item bg-color="transparent" v-for="(item, index) in subscribeList" :key="index">
|
|
||||||
<navigator url="" hover-class="none" class="nav-item">
|
|
||||||
<image :src="item.img" mode="widthFix" class="nav-item-img"></image>
|
|
||||||
<view class="nav-item-name">{{ item.name }}</view>
|
|
||||||
</navigator>
|
|
||||||
</u-grid-item>
|
|
||||||
</u-grid>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 我的订阅 end -->
|
|
||||||
|
|
||||||
<!-- 服务列表 start -->
|
|
||||||
<view class="card wrap" v-for="(item, index) in serviceList" :key="index">
|
|
||||||
<view class="title">{{item.name}}</view>
|
|
||||||
<view class="list">
|
|
||||||
<u-grid :col="4" :border="false">
|
|
||||||
<u-grid-item bg-color="transparent" v-for="(_item, _index) in item.list" :key="_index">
|
|
||||||
<navigator url="" hover-class="none" class="nav-item">
|
|
||||||
<image :src="_item.img" mode="widthFix" class="nav-item-img"></image>
|
|
||||||
<view class="nav-item-name">{{ _item.name }}</view>
|
|
||||||
</navigator>
|
|
||||||
</u-grid-item>
|
|
||||||
</u-grid>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 服务列表 end -->
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
fakeSubscribeList,
|
|
||||||
fakeServiceList,
|
|
||||||
} from "@/api/mock/service.js";
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 我的订阅
|
|
||||||
subscribeList: [],
|
|
||||||
// 服务列表
|
|
||||||
serviceList: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
onLoad() {
|
|
||||||
// 后续将改为与后端联动
|
|
||||||
// 加载我的订阅数据
|
|
||||||
fakeSubscribeList().then(data => {
|
|
||||||
this.subscribeList = data;
|
|
||||||
})
|
|
||||||
// 加载服务集合数据
|
|
||||||
fakeServiceList().then(data => {
|
|
||||||
this.serviceList = data;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.container {
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
min-height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head {
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head-bg {
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
z-index: -1;
|
|
||||||
width: 750rpx;
|
|
||||||
height: 270rpx;
|
|
||||||
background: linear-gradient(90deg, #69b0ff, #5f88ff);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
margin: 30rpx;
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
margin-top: 36rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub {
|
|
||||||
.title {
|
|
||||||
padding-top: 36rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #000000;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: 135rpx;
|
|
||||||
height: 1rpx;
|
|
||||||
background: #e4e7ed;
|
|
||||||
margin: 0 17rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: 135rpx;
|
|
||||||
height: 1rpx;
|
|
||||||
background: #e4e7ed;
|
|
||||||
margin: 0 17rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 0 0 30rpx;
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #131313;
|
|
||||||
line-height: 48rpx;
|
|
||||||
opacity: 0.77;
|
|
||||||
|
|
||||||
&-img {
|
|
||||||
width: 54rpx;
|
|
||||||
height: 54rpx;
|
|
||||||
margin-bottom: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-name {
|
|
||||||
font-size: 26rpx;
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #585b61;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap {
|
|
||||||
.title {
|
|
||||||
padding: 36rpx 16rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #000000;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
width: 5rpx;
|
|
||||||
height: 36rpx;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
background: #3ac4d1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
|
|
||||||
back-icon-size="35" :background="{ background: '#fff' }" title="设置" title-color="#000">
|
|
||||||
</u-navbar>
|
|
||||||
<view class="u-demo">
|
|
||||||
<view class="u-demo-wrap">
|
|
||||||
<view class="u-demo-title">很快到来</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
data: {}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,252 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<view class="head" :style="{height: `${headHeight}rpx`}">
|
|
||||||
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title="个人中心" :background="{ background: 'transprent' }" title-color="#FFFFFF">
|
|
||||||
<view @click="$u.func.route('/pages/system/setting')" slot="right">
|
|
||||||
<image src="/static/images/user/setting.png" class="set-icon" mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
</u-navbar>
|
|
||||||
<image src="/static/images/user/bg.png" class="head-bg" :style="{height: `${headHeight}rpx`}" />
|
|
||||||
|
|
||||||
<!-- 用户信息 -->
|
|
||||||
<view class="user-box">
|
|
||||||
<view class="left">
|
|
||||||
<image :src="userInfo.avatar" class="avatar" mode=""></image>
|
|
||||||
<view class="user-name">{{ userInfo.nick_name }}</view>
|
|
||||||
<view class="tag">{{ userInfo.tenant_id }}</view>
|
|
||||||
</view>
|
|
||||||
<view @click="$u.func.route('/pages/user/profile')" class="edit-btn">编辑资料</view>
|
|
||||||
</view>
|
|
||||||
<!-- 操作按钮 -->
|
|
||||||
<view class="nav">
|
|
||||||
<navigator url="" hover-class="none" class="nav-item">
|
|
||||||
<image src="/static/images/user/n1.png" class="icon" mode=""></image>
|
|
||||||
<view class="name">我的消息</view>
|
|
||||||
</navigator>
|
|
||||||
<navigator url="" hover-class="none" class="nav-item">
|
|
||||||
<image src="/static/images/user/n2.png" class="icon" mode=""></image>
|
|
||||||
<view class="name">我的待办</view>
|
|
||||||
</navigator>
|
|
||||||
<navigator url="" hover-class="none" class="nav-item">
|
|
||||||
<image src="/static/images/user/n3.png" class="icon" mode=""></image>
|
|
||||||
<view class="name">我的地址</view>
|
|
||||||
</navigator>
|
|
||||||
<navigator url="" hover-class="none" class="nav-item">
|
|
||||||
<image src="/static/images/user/n4.png" class="icon" mode=""></image>
|
|
||||||
<view class="name">我的收藏</view>
|
|
||||||
</navigator>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 功能列表 -->
|
|
||||||
<view class="cell-box">
|
|
||||||
<u-cell-group :border="false">
|
|
||||||
<u-cell-item title="我的评价">
|
|
||||||
<image slot="icon" src="/static/images/user/c1.png" class="icon" mode=""></image>
|
|
||||||
</u-cell-item>
|
|
||||||
<u-cell-item title="常见问题">
|
|
||||||
<image slot="icon" src="/static/images/user/c2.png" class="icon" mode=""></image>
|
|
||||||
</u-cell-item>
|
|
||||||
<u-cell-item title="客服中心" :border-bottom="false">
|
|
||||||
<image slot="icon" src="/static/images/user/c3.png" class="icon" mode=""></image>
|
|
||||||
</u-cell-item>
|
|
||||||
</u-cell-group>
|
|
||||||
</view>
|
|
||||||
<view class="cell-box">
|
|
||||||
<u-cell-group :border="false">
|
|
||||||
<u-cell-item title="推荐">
|
|
||||||
<image slot="icon" src="/static/images/user/c4.png" class="icon" mode=""></image>
|
|
||||||
</u-cell-item>
|
|
||||||
<u-cell-item title="评分">
|
|
||||||
<image slot="icon" src="/static/images/user/c5.png" class="icon" mode=""></image>
|
|
||||||
</u-cell-item>
|
|
||||||
<u-cell-item title="反馈">
|
|
||||||
<image slot="icon" src="/static/images/user/c6.png" class="icon" mode=""></image>
|
|
||||||
</u-cell-item>
|
|
||||||
<u-cell-item title="关于" :border-bottom="false">
|
|
||||||
<image slot="icon" src="/static/images/user/c7.png" class="icon" mode=""></image>
|
|
||||||
</u-cell-item>
|
|
||||||
</u-cell-group>
|
|
||||||
</view>
|
|
||||||
<view class="cell-box">
|
|
||||||
<u-cell-group :border="false">
|
|
||||||
<u-cell-item title="设置" :border-bottom="false" @click="$u.func.route('/pages/system/setting')">
|
|
||||||
<image slot="icon" src="/static/images/user/c8.png" class="icon" mode=""></image>
|
|
||||||
</u-cell-item>
|
|
||||||
</u-cell-group>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
headHeight: 582
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.setHeadHeight()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setHeadHeight() {
|
|
||||||
const that = this
|
|
||||||
// #ifndef H5
|
|
||||||
uni.getSystemInfo({
|
|
||||||
success: function(res) {
|
|
||||||
that.headHeight = Number(res.statusBarHeight) + Number(res.platform == 'ios' ? 44 : 48) + 582
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.container {
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
min-height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head {
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1;
|
|
||||||
min-height: 582rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
background: #55A2F9;
|
|
||||||
|
|
||||||
.set-icon {
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 41rpx;
|
|
||||||
height: auto;
|
|
||||||
margin-right: 35rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head-bg {
|
|
||||||
position: absolute;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
z-index: -1;
|
|
||||||
width: 750rpx;
|
|
||||||
height: 582rpx;
|
|
||||||
background: #55A2F9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 20rpx 0 64rpx;
|
|
||||||
margin-top: 36rpx;
|
|
||||||
|
|
||||||
.left {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 128rpx;
|
|
||||||
height: 128rpx;
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 5rpx 16rpx;
|
|
||||||
border: 1px solid #f5f5f5;
|
|
||||||
border-radius: 7rpx;
|
|
||||||
|
|
||||||
font-size: 19rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: 300;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-btn {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
width: 165rpx;
|
|
||||||
height: 54rpx;
|
|
||||||
border: 2rpx solid #f5f5f5;
|
|
||||||
border-radius: 11rpx;
|
|
||||||
|
|
||||||
font-size: 27rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
display: flex;
|
|
||||||
//border-top: 2rpx solid #7dcdd6;
|
|
||||||
margin: 36rpx 38rpx 0;
|
|
||||||
padding: 36rpx 0 42rpx;
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
width: calc(100% / 4);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
font-size: 25rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
|
|
||||||
&:not(:last-of-type) {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: 2rpx;
|
|
||||||
background-color: #fff;
|
|
||||||
height: 30rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 48rpx;
|
|
||||||
height: 48rpx;
|
|
||||||
margin-bottom: 6rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell-box {
|
|
||||||
background: #ffffff;
|
|
||||||
margin: 18rpx;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 32rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
margin-right: 22rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,213 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward" title="个人资料"
|
|
||||||
back-icon-size="35" :background="{ background: '#fff' }" title-color="#000">
|
|
||||||
<view class="complie" slot="right" @click="submit">完成</view>
|
|
||||||
</u-navbar>
|
|
||||||
|
|
||||||
<view class="content">
|
|
||||||
<view class="avatar">
|
|
||||||
<image :src="userInfo.avatar" class="avatar-image" mode=""></image>
|
|
||||||
<view class="a" @click="handleChooseImg">更换头像</view>
|
|
||||||
</view>
|
|
||||||
<view class="form">
|
|
||||||
<view class="cell">
|
|
||||||
<view class="name">昵称</view>
|
|
||||||
<input type="text" placeholder="请输入昵称" v-model="userInfo.nick_name" class="ipt"
|
|
||||||
placeholder-class="hold" />
|
|
||||||
</view>
|
|
||||||
<view class="cell">
|
|
||||||
<view class="name">生日</view>
|
|
||||||
<picker mode="date" class="ipt" :class="{ hold: !detail.birthday }"
|
|
||||||
@change="changeDefaultPicker('birthday', $event)">
|
|
||||||
<view>{{ detail.birthday || '请选择生日' }}</view>
|
|
||||||
</picker>
|
|
||||||
</view>
|
|
||||||
<view class="cell">
|
|
||||||
<view class="name">性别</view>
|
|
||||||
<picker mode="selector" :range="sexPicker" range-key="name" class="ipt"
|
|
||||||
:class="{ hold: !detail.sex }" @change="changePicker('sex', $event)">
|
|
||||||
<view>{{ detail.sex === 1?'男':'女' || '请选择性别' }}</view>
|
|
||||||
</picker>
|
|
||||||
</view>
|
|
||||||
<view class="cell">
|
|
||||||
<view class="name">手机号</view>
|
|
||||||
<input type="number" placeholder="请填写手机号" v-model="detail.phone" class="ipt"
|
|
||||||
placeholder-class="hold" />
|
|
||||||
</view>
|
|
||||||
<view class="cell">
|
|
||||||
<view class="name">邮箱</view>
|
|
||||||
<input v-model="detail.email" class="ipt" placeholder-class="hold" />
|
|
||||||
</view>
|
|
||||||
<!--<view class="cell">
|
|
||||||
<view class="name">国家/地区</view>
|
|
||||||
<pickRegions :defaultRegion="detail.region" v-model="detail.region"
|
|
||||||
:class="{ hold: !detail.region, ipt: true }">
|
|
||||||
<view>{{ detail.region || '请选择国家/地区' }}</view>
|
|
||||||
</pickRegions>
|
|
||||||
</view>-->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- -->
|
|
||||||
<view class="back" @click="logout">退出登录</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import pickRegions from '@/components/pick-regions/pick-regions.vue';
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
pickRegions
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
sexPicker: [{
|
|
||||||
name: '男'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '女'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
detail: {}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
onLoad() {
|
|
||||||
this.$u.api.userInfo().then(data => {
|
|
||||||
console.log(data);
|
|
||||||
if (data.success) {
|
|
||||||
this.detail = data.data;
|
|
||||||
}
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err)
|
|
||||||
this.$u.func.showToast({
|
|
||||||
title: err,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
logout() {
|
|
||||||
this.$u.func.logout();
|
|
||||||
},
|
|
||||||
submit() {
|
|
||||||
let detail = this.detail
|
|
||||||
if (!detail.phone && !/^1\d{10}$/.test(detail.phone)) {
|
|
||||||
return uni.showToast({
|
|
||||||
title: '请输入正确的手机号',
|
|
||||||
duration: 2000,
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
console.log(JSON.stringify(detail));
|
|
||||||
},
|
|
||||||
changeDefaultPicker(name, e) {
|
|
||||||
this.detail[name] = e.detail.value;
|
|
||||||
},
|
|
||||||
changePicker(name, e) {
|
|
||||||
this.detail[name] = this[`${name}Picker`][e.detail.value].name;
|
|
||||||
},
|
|
||||||
handleChooseImg() {
|
|
||||||
let that = this;
|
|
||||||
uni.chooseImage({
|
|
||||||
count: 1,
|
|
||||||
success(e) {
|
|
||||||
that.detail.avatar = e.tempFilePaths[0];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.container {
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 0 0 200rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.complie {
|
|
||||||
vertical-align: middle;
|
|
||||||
padding: 10rpx 20rpx;
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #5f88ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
background-color: #ffffff;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
margin-top: 30rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #5f88ff;
|
|
||||||
.avatar-image {
|
|
||||||
width: 162rpx;
|
|
||||||
height: 162rpx;
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #82848a;
|
|
||||||
margin-bottom: 15rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form {
|
|
||||||
padding: 0 36rpx;
|
|
||||||
|
|
||||||
.cell {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 40rpx 0;
|
|
||||||
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #666666;
|
|
||||||
|
|
||||||
&:not(:last-of-type) {
|
|
||||||
border-bottom: 2rpx solid #efefef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ipt {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 40rpx;
|
|
||||||
text-align: right;
|
|
||||||
font-size: 23rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hold {
|
|
||||||
font-size: 27rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #c8c8ce;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.back {
|
|
||||||
margin-top: 40rpx;
|
|
||||||
text-align: center;
|
|
||||||
height: 109rpx;
|
|
||||||
background: #ffffff;
|
|
||||||
|
|
||||||
font-size: 34rpx;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #141414;
|
|
||||||
line-height: 109rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 607 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 538 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 915 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 662 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue