排队取号页面搭建
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"
|
||||
},
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/loading/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "云预约",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/home/home",
|
||||
"style": {
|
||||
"navigationBarTitleText": "云预约",
|
||||
"navigationBarTitleText": "自助取号机",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/reserve/index",
|
||||
"path": "pages/home/ticket",
|
||||
"style": {
|
||||
"navigationBarTitleText": "网上预约",
|
||||
"navigationBarTitleText": "自助取号机",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/reserve/notice",
|
||||
"path": "pages/home/theme",
|
||||
"style": {
|
||||
"navigationBarTitleText": "预约须知",
|
||||
"navigationBarTitleText": "自助取号机",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/reserve/timeSelect",
|
||||
"path": "pages/home/dept",
|
||||
"style": {
|
||||
"navigationBarTitleText": "预约时间",
|
||||
"navigationBarTitleText": "自助取号机",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/reserve/confirm",
|
||||
"path": "pages/home/businessList",
|
||||
"style": {
|
||||
"navigationBarTitleText": "预约确认",
|
||||
"navigationBarTitleText": "自助取号机",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/myReserve/index",
|
||||
"path": "pages/home/guide",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的预约",
|
||||
"navigationBarTitleText": "自助取号机",
|
||||
"enablePullDownRefresh": false,
|
||||
"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>
|
||||
<view class="container">
|
||||
<!-- 顶部标题栏 -->
|
||||
<view class="header">
|
||||
<text class="title">广西区直住房保障中心</text>
|
||||
</view>
|
||||
|
||||
<!-- 预约功能区 -->
|
||||
<view class="reserve-section">
|
||||
<view class="reserve-card" @click="handleOnlineReserve">
|
||||
<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 class="arrow"></view>
|
||||
<Container>
|
||||
<template #main>
|
||||
<view class="card" @click="goRoute">
|
||||
<!-- 身份证图标区域 -->
|
||||
<view class="id-card">
|
||||
</view>
|
||||
<!-- 提示文字 -->
|
||||
<text class="tip">请刷身份证取号</text>
|
||||
</view>
|
||||
</template>
|
||||
</Container>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
deptList,
|
||||
itemList
|
||||
} from '@/api/reserve.js'
|
||||
import {
|
||||
dictionary
|
||||
} from '@/api/system/dict.js'
|
||||
|
||||
import Container from '@/components/container/container.vue'
|
||||
export default {
|
||||
name: 'SelfServiceMachine',
|
||||
components: {
|
||||
Container
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 热门服务列表（和设计图完全一致）
|
||||
serviceList: [],
|
||||
statusList: []
|
||||
currentTime: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getItemList()
|
||||
this.getDictionary()
|
||||
mounted() {
|
||||
this.updateTime()
|
||||
setInterval(() => {
|
||||
this.updateTime()
|
||||
}, 1000)
|
||||
// APP端强制横屏
|
||||
// #ifdef APP-PLUS
|
||||
plus.screen.lockOrientation('landscape-primary')
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
getDictionary() {
|
||||
dictionary({
|
||||
code: 'booking_status'
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.statusList = res.data
|
||||
uni.setStorageSync('statusList', this.statusList);
|
||||
}
|
||||
})
|
||||
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}`
|
||||
},
|
||||
// 网上预约点击事件
|
||||
handleOnlineReserve() {
|
||||
goRoute(){
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 全局容器 */
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
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;
|
||||
<style scoped>
|
||||
/* 中间卡片 - 百分比宽高 */
|
||||
.card {
|
||||
background: #ffffff;
|
||||
width: 1200px;
|
||||
height: 740px;
|
||||
border-radius: 2.5%;
|
||||
box-shadow: 0 1vh 3vh rgba(0, 123, 255, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
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 {
|
||||
/* 身份证卡片 */
|
||||
.id-card {
|
||||
width: 511px;
|
||||
height: 307px;
|
||||
background: url('../../static/images/home/idcard_bg.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 16rpx;
|
||||
padding: 0 5%;
|
||||
margin-bottom: 5%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
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;
|
||||
/* 提示文字 */
|
||||
.tip {
|
||||
font-size: 5vh;
|
||||
color: #222;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-right: 4rpx solid #165dff;
|
||||
border-top: 4rpx solid #165dff;
|
||||
transform: rotate(45deg);
|
||||
letter-spacing: 0.2vh;
|
||||
}
|
||||
</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