From b5eb99f9d8937b87f3b3ecb9f96166b54e602125 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Fri, 27 Oct 2023 17:51:46 +0800
Subject: [PATCH] 报事静态页面
---
mixin/uploadMixin.js | 97 ++++++++
subPackage/bs/components/rentList/index.vue | 88 ++++++++
subPackage/bs/views/zhsb.vue | 124 +++++++++++
pages.json | 33 +++
components/boxTitle/index.vue | 4
subPackage/bs/views/bsReport.vue | 138 ++++++++++++
subPackage/bs/views/index.vue | 163 ++++++++++++++
7 files changed, 645 insertions(+), 2 deletions(-)
diff --git a/components/boxTitle/index.vue b/components/boxTitle/index.vue
index 795a5af..d01cdf3 100644
--- a/components/boxTitle/index.vue
+++ b/components/boxTitle/index.vue
@@ -36,7 +36,7 @@
align-items: center;
position: relative;
height: 60rpx;
-
+
.title {
position: absolute;
z-index: 1;
@@ -48,7 +48,7 @@
left: 10rpx;
bottom: 0;
width: 96rpx;
- background: linear-gradient(to right, #407BE999, #73A2F900);
+ background: linear-gradient(to right, #2991faff, #73A2F900);
z-index: 0;
}
}
diff --git a/mixin/uploadMixin.js b/mixin/uploadMixin.js
new file mode 100644
index 0000000..c86afb4
--- /dev/null
+++ b/mixin/uploadMixin.js
@@ -0,0 +1,97 @@
+import {
+ devUrl,
+ clientId,
+ clientSecret
+} from '@/common/setting'
+
+export default {
+ data() {
+ return {
+ form: {
+ images: []
+ },
+
+ uploadConfig: {
+ acceptImg: "image",
+ acceptVideo: 'video',
+ capture: ['album', 'camera'],
+ multiple: true,
+ maxCount: "5",
+ previewFullImage: true,
+ uploadText: "上传中",
+ url: devUrl + "/blade-resource/oss/endpoint/put-file-attach",
+ header: {},
+ },
+ }
+ },
+
+ methods: {
+ //获取头部
+ getHeader() {
+ let accessToken = uni.getStorageSync('accessToken');
+ let myHeader = {}
+ if (accessToken) {
+ myHeader['Blade-Auth'] = 'bearer ' + accessToken;
+ }
+ // 客户端认证参数
+ myHeader['Authorization'] = 'Basic ' + Base64.encode(clientId + ':' + clientSecret);
+ this.uploadConfig.header = myHeader
+ },
+
+ //上传方法
+ uploadFilePromise(url) {
+ return new Promise((resolve, reject) => {
+ let a = uni.uploadFile({
+ url: this.uploadConfig.url, //接口地址
+ filePath: url,
+ name: 'file',
+ header: this.uploadConfig.header,
+ success: (res) => {
+ let data = JSON.parse(res.data)
+ setTimeout(() => {
+ resolve(data)
+ }, 1000)
+ }
+ });
+ })
+ },
+
+ //上传成功后对返回数据进行处理
+ async afterReadImg(event) {
+ this.showLoading()
+
+ // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
+ let lists = [].concat(event.file)
+ let fileListLen = this.form.images.length
+ lists.map((item) => {
+ this.form.images.push({
+ ...item,
+ status: 'uploading',
+ message: '上传中'
+ })
+ })
+ for (let i = 0; i < lists.length; i++) {
+ const result = await this.uploadFilePromise(lists[i].url)
+ this.form.images.splice(fileListLen, 1, Object.assign({}, {
+ url: result.data.link
+ }))
+ fileListLen++
+ }
+ this.loadingClose()
+ },
+
+ //删除图片
+ deletePic(event) {
+ this.form.images.splice(event.index, 1)
+ },
+ showLoading() {
+ uni.showLoading({
+ mask: true,
+ title: '上传中'
+ })
+ },
+ loadingClose() {
+ uni.hideLoading()
+ },
+ }
+}
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 4609b3a..3b90dc5 100644
--- a/pages.json
+++ b/pages.json
@@ -368,7 +368,40 @@
}
}
]
+ },
+
+ //报事
+ {
+ "root": "subPackage/bs",
+ "pages": [{
+ "path": "views/index",
+ "style": {
+ "navigationBarTitleText": "报事",
+ "enablePullDownRefresh": false
+ }
+ },
+ {
+ "path": "views/bsReport",
+ "style": {
+ "navigationBarTitleText": "报事",
+ "navigationBarBackgroundColor": "#4586fe",
+ "navigationBarTextStyle": "white",
+ "enablePullDownRefresh": false
+ }
+ },
+ {
+ "path": "views/zhsb",
+ "style": {
+ "navigationBarTitleText": "出租管理",
+ "navigationBarBackgroundColor": "#4586fe",
+ "navigationBarTextStyle": "white",
+ "enablePullDownRefresh": false
+ }
+ }
+
+ ]
}
+
],
"globalStyle": {
"navigationBarTextStyle": "black",
diff --git a/subPackage/bs/components/rentList/index.vue b/subPackage/bs/components/rentList/index.vue
new file mode 100644
index 0000000..512bd87
--- /dev/null
+++ b/subPackage/bs/components/rentList/index.vue
@@ -0,0 +1,88 @@
+<template>
+ <view class="list-container">
+
+ <view class="item" v-for="(item, index) in list" :key="index">
+ <view class="line">
+ <view class="l">租客：{{item.name}} {{`(共${item.num}人)`}}</view>
+ <view class="r">
+ <u-icon name="trash-fill" color="#ff0000" size="18"></u-icon>
+ </view>
+ </view>
+
+ <view class="line">
+ <view class="l">{{item.startTime}} - {{item.endTime}}</view>
+ <view class="r status">
+ {{item.status}}
+ </view>
+ </view>
+
+ <view class="btn">
+ <u-button :customStyle="btnCustomStyle" color="#cdf3df" type="primary" text="修改"></u-button>
+ </view>
+
+ </view>
+
+ <u-divider text="已经到底了"></u-divider>
+ </view>
+</template>
+
+<script>
+ export default {
+ props: {
+ list: {
+ type: Array,
+ default: () => []
+ }
+ },
+ data() {
+ return {
+ btnCustomStyle: {
+ color: "#6dc160",
+ fontWeight: "700"
+ }
+ }
+ },
+ created() {
+
+ },
+ mounted() {
+
+ },
+ onLoad(option) {
+
+ },
+ onShow() {
+
+ },
+ methods: {
+
+ }
+ }
+</script>
+
+<style scoped lang="scss">
+ .list-container {
+
+ .item {
+ background-color: #ffffff;
+ margin: 20rpx 0;
+
+ .line {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 14rpx;
+
+ .status {
+ color: #6dc160
+ }
+
+ }
+
+ .btn {
+ padding: 24rpx;
+ }
+ }
+
+ }
+</style>
\ No newline at end of file
diff --git a/subPackage/bs/views/bsReport.vue b/subPackage/bs/views/bsReport.vue
new file mode 100644
index 0000000..f089d21
--- /dev/null
+++ b/subPackage/bs/views/bsReport.vue
@@ -0,0 +1,138 @@
+<template>
+ <view class="container">
+
+ <u-form labelWidth="70" :model="form" :rules="rules" ref="form">
+ <view class="box-title">
+ <box-title title="基础信息"></box-title>
+ </view>
+ <view class="event-info">
+ <u-form-item class="form-item" labelWidth="100" label="当前位置:" required prop="location">
+ <u--input border="none" v-model="form.location" placeholder="请输入当前位置">
+ </u--input>
+ </u-form-item>
+
+ <u-form-item class="form-item" labelWidth="100" label="事件标题:" required prop="title">
+ <u--input border="none" v-model="form.title" placeholder="请输入事件标题">
+ </u--input>
+ </u-form-item>
+
+ <u-form-item @click="typeShow = true" class="form-item" labelWidth="100" label="事件类型:" required
+ prop="type">
+ <u--input border="none" v-model="typeName" disabled disabledColor="#ffffff" placeholder="请选择事件类型">
+ </u--input>
+ <u-icon slot="right" name="arrow-right"></u-icon>
+ </u-form-item>
+
+ <u-form-item class="form-item" labelWidth="100" label="事件描述:" required prop="description">
+ <u--input border="none" v-model="form.description" placeholder="请输入事件描述">
+ </u--input>
+ </u-form-item>
+ </view>
+
+ <view class="box-title">
+ <box-title title="事件照片"></box-title>
+ </view>
+
+ <view class="event-pic">
+
+ <u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
+ :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount"
+ :capture="uploadConfig.capture" @afterRead="afterReadImg" @delete="deletePic">
+ </u-upload>
+ </view>
+ </u-form>
+
+
+ <!-- 事件类型下拉框 -->
+ <my-select v-if="typeShow" :show="typeShow" v-model="form.type" type="radio" popupTitle="请选择事件类型"
+ :dataLists="typeList" @cancel="typeShow = false" @submit="typeSelect">
+ </my-select>
+
+ </view>
+</template>
+
+<script>
+ import mySelect from "@/components/my-components/my-select.vue"
+ import uploadMixin from "@/mixin/uploadMixin";
+ export default {
+ components: {
+ mySelect
+ },
+ mixins: [uploadMixin],
+ data() {
+ return {
+ typeName: "",
+ form: {
+ location: "",
+ title: "",
+ type: "",
+ description: "",
+ },
+ rules: {},
+
+ typeShow: false,
+ typeList: [{
+ value: "1",
+ name: "物业保修",
+ },
+ {
+ value: "2",
+ name: "矛盾纠纷",
+ }
+ ],
+ }
+ },
+ created() {
+ this.getHeader()
+ },
+ mounted() {
+
+ },
+ onLoad(option) {
+
+ },
+ onShow() {
+
+ },
+ methods: {
+ //类型选择确认
+ typeSelect(item) {
+ this.typeName = item.name
+ this.form.type = item.value
+ this.typeShow = !this.typeShow
+ },
+ }
+ }
+</script>
+
+<style scoped lang="scss">
+ .container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background: #F9F9FA;
+
+ .box-title {
+ padding: 10px 0;
+ }
+
+ .event-info {
+
+ .form-item {
+ background-color: #ffffff;
+ padding: 5px 10px;
+ border-bottom: 1px solid #eff1f3;
+ }
+
+ }
+
+ .event-pic {
+ background-color: #ffffff;
+ padding: 40rpx 30rpx;
+ }
+
+
+ }
+</style>
\ No newline at end of file
diff --git a/subPackage/bs/views/index.vue b/subPackage/bs/views/index.vue
new file mode 100644
index 0000000..a6e9514
--- /dev/null
+++ b/subPackage/bs/views/index.vue
@@ -0,0 +1,163 @@
+<template>
+ <view class="container">
+
+ <view class="main">
+
+ <view class="main-select">
+ <u-icon name="map" color="#6288fe"></u-icon>
+ <view class="address">
+ 江西省上饶市信州区西市街道
+ </view>
+ </view>
+
+ <view class="main-statistics">
+ <view v-for="(item,index) in statisticsList" :key="index" class="item">
+ <view class="value">{{item.num}}</view>
+ <view class="label">{{item.label}}</view>
+ </view>
+ </view>
+
+ <view class="box-title">
+ <box-title title="报事"></box-title>
+ </view>
+
+ <view class="main-service">
+ <view v-for="(item,index) in serviceList" :key="index" @click="navigator(item.url)" class="item">
+ <view class="value">
+ <u-icon :name="item.icon" :color="item.color" size="32"></u-icon>
+ </view>
+ <view class="label">{{item.label}}</view>
+ </view>
+ </view>
+
+
+ </view>
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ statisticsList: [{
+ num: "4",
+ label: "总数"
+ },
+ {
+ num: "2",
+ label: "已处理"
+ }
+ ],
+
+ serviceList: [{
+ icon: "bell",
+ color: "#6db665",
+ label: "报事",
+ url: "/subPackage/bs/views/bsReport"
+ },
+ {
+ icon: "home",
+ color: "#2979ff",
+ label: "租户上报",
+ url: "/subPackage/bs/views/zhsb",
+ }
+ ],
+
+
+ }
+ },
+ created() {
+
+ },
+ mounted() {
+
+ },
+ onLoad(option) {
+
+
+ },
+ onShow() {
+
+ },
+ methods: {
+ navigator(url) {
+ this.$u.func.globalNavigator(url)
+ }
+ }
+ }
+</script>
+
+<style scoped lang="scss">
+ .container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background: #F9F9FA;
+
+ .main-select {
+ display: flex;
+ padding: 52rpx 10rpx;
+
+ color: #4586fe;
+ }
+
+ .main-statistics {
+ display: flex;
+
+ .item {
+ display: flex;
+ width: 50%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #ffffff;
+ height: 130rpx;
+
+ .value {
+ color: #4586fe;
+ font-weight: 700;
+ }
+ }
+
+ .item:nth-child(2n+1) {
+ border-right: 1px solid #eff1f3;
+ }
+
+ }
+
+ .main-service {
+ display: flex;
+
+ .item {
+ display: flex;
+ width: 50%;
+ /* height: 97px; */
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #ffffff;
+ height: 90px;
+
+ .value {
+ color: #4586fe;
+ font-weight: 700;
+ }
+ }
+
+ .item:nth-child(2n+1) {
+ border-right: 1px solid #eff1f3;
+ }
+
+ }
+ }
+
+ .box-title {
+ padding: 40rpx 0;
+ }
+
+ view {
+ font-size: 32rpx;
+ }
+</style>
\ No newline at end of file
diff --git a/subPackage/bs/views/zhsb.vue b/subPackage/bs/views/zhsb.vue
new file mode 100644
index 0000000..44082f3
--- /dev/null
+++ b/subPackage/bs/views/zhsb.vue
@@ -0,0 +1,124 @@
+<template>
+ <view class="container">
+ <view class="info">
+ <view class="item location">
+ <u-icon name="map" color="#000000" size="16"></u-icon>
+ <view class="location">
+ {{location}}
+ </view>
+ </view>
+
+ <view class="item statistics">
+ <view class="room">{{room}}</view>
+ <view class="num">{{`(共${num}人)`}}</view>
+ </view>
+ </view>
+
+
+ <view class="box-title">
+ <box-title title="出租管理"></box-title>
+ </view>
+
+ <view class="list">
+ <rentList :list="rentList"></rentList>
+ </view>
+
+
+ <view class="btn">
+ <u-button type="primary" :plain="true" text="添加租赁信息"></u-button>
+ </view>
+
+
+ </view>
+</template>
+
+<script>
+ import rentList from "@/subPackage/bs/components/rentList/index.vue"
+ export default {
+ components: {
+ rentList
+ },
+ data() {
+ return {
+ location: "万达晶座：11栋楼",
+ room: "一单元303室",
+ num: "1",
+
+ //出租列表
+ rentList: [{
+ name: "张三",
+ num: "1",
+ startTime: "2022-01-01",
+ endTime: "2023-12-23",
+ status: "未到期"
+ },
+ {
+ name: "测试",
+ num: "2",
+ startTime: "2022-01-01",
+ endTime: "2023-12-23",
+ status: "未到期"
+ },
+ {
+ name: "张三",
+ num: "1",
+ startTime: "2022-01-01",
+ endTime: "2023-12-23",
+ status: "未到期"
+ }
+ ]
+ }
+ },
+ created() {
+
+ },
+ mounted() {
+
+ },
+ onLoad(option) {
+
+ },
+ onShow() {
+
+ },
+ methods: {
+
+ }
+ }
+</script>
+
+<style scoped lang="scss">
+ .container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background: #F9F9FA;
+
+ .item {
+ display: flex;
+ padding: 30rpx 20rpx;
+ background-color: #ffffff;
+ border-bottom: 1px solid #eff1f3;
+ }
+
+ .location {
+ font-weight: 700;
+ }
+
+ .room {
+ font-weight: 700;
+ }
+
+ .btn {}
+ }
+
+ .box-title {
+ padding: 40rpx 0;
+ }
+
+ view {
+ font-size: 32rpx;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3