页面修改及其新增
This commit is contained in:
qiuyuan
parent
4c8d20898e
commit
cf568ba883
138
pages/helpInfo/index.vue
Normal file
138
pages/helpInfo/index.vue
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 引入头部组件 -->
|
||||||
|
<Header :title="'求助'"></Header>
|
||||||
|
<view class="content">
|
||||||
|
<view class="content_wapper">
|
||||||
|
<!-- 添加标题 -->
|
||||||
|
<view class="input-section" >
|
||||||
|
<u-input placeholder="添加标题" v-model="title" border></u-input>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 输入求助内容 -->
|
||||||
|
<view class="textarea-section">
|
||||||
|
<u--textarea placeholder="请输入求助内容..."
|
||||||
|
v-model="content"
|
||||||
|
border
|
||||||
|
height="300"
|
||||||
|
></u--textarea>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 图片上传 -->
|
||||||
|
<view class="upload-section">
|
||||||
|
<u-upload @afterRead="afterRead"
|
||||||
|
:fileList="fileList"
|
||||||
|
:maxCount="1"
|
||||||
|
:showUploadList="false"
|
||||||
|
width="550"
|
||||||
|
height="450"
|
||||||
|
>
|
||||||
|
<view class="upload-btn">
|
||||||
|
<u-icon name="plus" size="40" color="#666"></u-icon>
|
||||||
|
</view>
|
||||||
|
</u-upload>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 发布按钮 -->
|
||||||
|
<view class="publish-section">
|
||||||
|
<u-button type="primary" text="立即发布" @click="publish"></u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<Footer></Footer>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Header from '@/components/header_common.vue';
|
||||||
|
import Footer from '@/components/footer_common.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Header,Footer
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
fileList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleBack() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1 // 返回上一级页面
|
||||||
|
});
|
||||||
|
},
|
||||||
|
afterRead(event) {
|
||||||
|
// 读取完成后的回调函数
|
||||||
|
const {
|
||||||
|
file
|
||||||
|
} = event;
|
||||||
|
this.fileList.push(file);
|
||||||
|
},
|
||||||
|
publish() {
|
||||||
|
// 发布逻辑
|
||||||
|
console.log('发布:', this.title, this.content, this.fileList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
/* 占满整个视口高度 */
|
||||||
|
opacity: 1;
|
||||||
|
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
|
||||||
|
linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 300rpx;
|
||||||
|
border-top-left-radius: 30rpx;
|
||||||
|
border-top-right-radius: 30rpx;
|
||||||
|
background-color: rgba(255, 255, 255, 0.65);
|
||||||
|
padding-bottom: 60rpx;
|
||||||
|
|
||||||
|
.content_wapper{
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-section{
|
||||||
|
border-bottom: 2rpx solid #C3DCFA;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-section,
|
||||||
|
.textarea-section,
|
||||||
|
.upload-section {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-btn {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 220rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.publish-section {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -11,11 +11,11 @@
|
|||||||
<view class="body">
|
<view class="body">
|
||||||
<view class="text-with-block">
|
<view class="text-with-block">
|
||||||
<view class="left">
|
<view class="left">
|
||||||
<text class="text">社区服务</text>
|
<text class="text">邻里互助</text>
|
||||||
<view class="slanted-block"></view>
|
<view class="slanted-block"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="right">
|
<view class="right" @click="goPage('helpInfo')">
|
||||||
<view>+</view>
|
<view>+</view>
|
||||||
|
|
||||||
<!-- <u-icon name="plus-circle" color="#fff" size="24"></u-icon> -->
|
<!-- <u-icon name="plus-circle" color="#fff" size="24"></u-icon> -->
|
||||||
@ -78,7 +78,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view class="interact_more">
|
<view class="interact_more" @click="goPage('neighborList')">
|
||||||
查看更多
|
查看更多
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -269,8 +269,21 @@
|
|||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 跳转不同页面
|
||||||
|
goPage(page){
|
||||||
|
console.log("==进来",page)
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/${page}/index`,
|
||||||
|
// url: '/pages/helpInfo/index',
|
||||||
|
success: () => {
|
||||||
|
console.log('切换到tabBar页面成功');
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('切换到tabBar页面失败:', err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
282
pages/neighborDetail/index.vue
Normal file
282
pages/neighborDetail/index.vue
Normal file
@ -0,0 +1,282 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<Header :title="'邻里互助详情'"></Header>
|
||||||
|
<!-- 蓝色背景 -->
|
||||||
|
<view class="neighbor_head">
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 白色底部区域 -->
|
||||||
|
<view class="neighbor_body">
|
||||||
|
<!-- 正式页面内容，但是需要留到90%的页面内容和旁边的间隙 -->
|
||||||
|
<view class="body">
|
||||||
|
<view class="text-with-block">
|
||||||
|
<view class="left">
|
||||||
|
<text class="text">邻里互助</text>
|
||||||
|
<view class="slanted-block"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="right" @click="goPage('helpInfo')">
|
||||||
|
<view>+</view>
|
||||||
|
|
||||||
|
<!-- <u-icon name="plus-circle" color="#fff" size="24"></u-icon> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="interact_body">
|
||||||
|
<view class="body_item">
|
||||||
|
<view class="item_header">
|
||||||
|
<view class="left_section">
|
||||||
|
<image class="avatar" src="/static/imgs/index/nav.png"></image>
|
||||||
|
<view class="info">
|
||||||
|
<text class="name">樱桃小丸子</text>
|
||||||
|
<text class="date">03-24</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<button class="help_button">求助</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="body_content">
|
||||||
|
<h3>寻找拼车伙伴</h3>
|
||||||
|
<view class="content_font">
|
||||||
|
每天早晨7:30从社区出发前往政务中心上班，有同路的朋友可以拼车，分担车费。
|
||||||
|
</view>
|
||||||
|
<view class="content_img">
|
||||||
|
<image src="/static/imgs/index/swiper.png"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 引入底部 -->
|
||||||
|
<Footer></Footer>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Header from '@/components/header_common.vue';
|
||||||
|
import Footer from '@/components/footer_common.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Header,
|
||||||
|
Footer
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 跳转详情页面
|
||||||
|
goPage(page){
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/${page}/index`,
|
||||||
|
// url: '/pages/helpInfo/index',
|
||||||
|
success: () => {
|
||||||
|
console.log('切换到tabBar页面成功');
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('切换到tabBar页面失败:', err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
// justify-content: center;
|
||||||
|
// background: #f8faff;
|
||||||
|
background: #f8faff;
|
||||||
|
// height: 100vh;
|
||||||
|
// padding: 70rpx 0;
|
||||||
|
// margin-top: 90rpx;
|
||||||
|
padding-bottom: 400rpx;
|
||||||
|
|
||||||
|
.neighbor_head {
|
||||||
|
width: 100%;
|
||||||
|
height: 360rpx;
|
||||||
|
opacity: 1;
|
||||||
|
background: linear-gradient(270deg, rgba(146, 161, 252, 1) 0%, rgba(181, 229, 255, 1) 100%);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.neighbor_body {
|
||||||
|
width: 100%;
|
||||||
|
// height: 300rpx;
|
||||||
|
background: #fff;
|
||||||
|
height: 650rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 340rpx;
|
||||||
|
z-index: 9;
|
||||||
|
|
||||||
|
.body {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 5%;
|
||||||
|
position: absolute;
|
||||||
|
top: -150rpx;
|
||||||
|
z-index: 99;
|
||||||
|
|
||||||
|
.text-with-block {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
height: 50rpx;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
.text {
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
padding-left: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slanted-block {
|
||||||
|
position: absolute;
|
||||||
|
left: 120rpx;
|
||||||
|
top: 46rpx;
|
||||||
|
transform: translateX(-50%) skewX(-40deg);
|
||||||
|
width: 166rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
background-color: #80B3FF;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #3B8CFF;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
// margin-top: 20rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
|
||||||
|
view {
|
||||||
|
color: #fff;
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
line-height: 28rpx;
|
||||||
|
border: 4rpx solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 34rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interact_body {
|
||||||
|
// display:list-item;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-gap: 26rpx;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: -20rpx;
|
||||||
|
|
||||||
|
.body_item {
|
||||||
|
// width: 80%;
|
||||||
|
margin: 40rpx auto;
|
||||||
|
// height: 400rpx;
|
||||||
|
background: #E8F3FF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
// display: flex;
|
||||||
|
// align-items: flex-start;
|
||||||
|
// gap: 20rpx;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
.item_header{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
.left_section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 75%;
|
||||||
|
.avatar {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #2e2e2e;
|
||||||
|
}
|
||||||
|
.date {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #2e2e2e;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.help_button {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.body_content{
|
||||||
|
h3{
|
||||||
|
font-weight: 500;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
color:#000;
|
||||||
|
font-size:32rpx ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content_font{
|
||||||
|
font-weight: normal;
|
||||||
|
color: #3d3d3d;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 48rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content_img{
|
||||||
|
width: 100%;
|
||||||
|
height: 315rpx ;
|
||||||
|
margin: 40rpx 0;
|
||||||
|
|
||||||
|
image{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
342
pages/neighborList/index.vue
Normal file
342
pages/neighborList/index.vue
Normal file
@ -0,0 +1,342 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<Header :title="'邻里互助列表'"></Header>
|
||||||
|
<!-- 蓝色背景 -->
|
||||||
|
<view class="neighbor_head">
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 白色底部区域 -->
|
||||||
|
<view class="neighbor_body">
|
||||||
|
<!-- 正式页面内容，但是需要留到90%的页面内容和旁边的间隙 -->
|
||||||
|
<view class="body">
|
||||||
|
<view class="text-with-block">
|
||||||
|
<view class="left">
|
||||||
|
<text class="text">邻里互助</text>
|
||||||
|
<view class="slanted-block"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="right" @click="goPage('helpInfo')">
|
||||||
|
<view>+</view>
|
||||||
|
|
||||||
|
<!-- <u-icon name="plus-circle" color="#fff" size="24"></u-icon> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="interact_body">
|
||||||
|
<view class="body_item" @click="goPage('neighborDetail')">
|
||||||
|
<view class="item_left">
|
||||||
|
<view class="left_title">
|
||||||
|
寻找拼车伙伴
|
||||||
|
</view>
|
||||||
|
<view class="left_font">
|
||||||
|
每天早晨7:30从社区出发前往政务中心上班，有同路的朋友可以拼车，分担车费
|
||||||
|
</view>
|
||||||
|
<view class="left_botton">
|
||||||
|
未解决
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="item_right">
|
||||||
|
<view class="right_nav">
|
||||||
|
<image src="/static/imgs/index/nav.png" class="nav"></image>
|
||||||
|
<image src="/static/imgs/index/nav_bg.png" class="bg"></image>
|
||||||
|
</view>
|
||||||
|
<view class="right_name">
|
||||||
|
樱桃小丸子
|
||||||
|
</view>
|
||||||
|
<view class="right_date">
|
||||||
|
2025年3月24日
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="body_item">
|
||||||
|
<view class="item_left">
|
||||||
|
<view class="left_title">
|
||||||
|
寻找拼车伙伴
|
||||||
|
</view>
|
||||||
|
<view class="left_font">
|
||||||
|
每天早晨7:30从社区出发前往政务中心上班，有同路的朋友可以拼车，分担车费
|
||||||
|
</view>
|
||||||
|
<view class="left_botton">
|
||||||
|
未解决
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="item_right">
|
||||||
|
<view class="right_nav">
|
||||||
|
<image src="/static/imgs/index/nav.png" class="nav"></image>
|
||||||
|
<image src="/static/imgs/index/nav_bg.png" class="bg"></image>
|
||||||
|
</view>
|
||||||
|
<view class="right_name">
|
||||||
|
樱桃小丸子
|
||||||
|
</view>
|
||||||
|
<view class="right_date">
|
||||||
|
2025年3月24日
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 引入底部 -->
|
||||||
|
<Footer></Footer>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Header from '@/components/header_common.vue';
|
||||||
|
import Footer from '@/components/footer_common.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Header,Footer
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 跳转详情页面
|
||||||
|
goPage(page){
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/${page}/index`,
|
||||||
|
// url: '/pages/helpInfo/index',
|
||||||
|
success: () => {
|
||||||
|
console.log('切换到tabBar页面成功');
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('切换到tabBar页面失败:', err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
// justify-content: center;
|
||||||
|
// background: #f8faff;
|
||||||
|
background: #f8faff;
|
||||||
|
// height: 100vh;
|
||||||
|
// padding: 70rpx 0;
|
||||||
|
// margin-top: 90rpx;
|
||||||
|
padding-bottom: 400rpx;
|
||||||
|
|
||||||
|
.neighbor_head {
|
||||||
|
width: 100%;
|
||||||
|
height: 360rpx;
|
||||||
|
opacity: 1;
|
||||||
|
background: linear-gradient(270deg, rgba(146, 161, 252, 1) 0%, rgba(181, 229, 255, 1) 100%);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.neighbor_body {
|
||||||
|
width: 100%;
|
||||||
|
// height: 300rpx;
|
||||||
|
background: #fff;
|
||||||
|
height: 650rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 340rpx;
|
||||||
|
z-index: 9;
|
||||||
|
|
||||||
|
.body {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 5%;
|
||||||
|
position: absolute;
|
||||||
|
top: -150rpx;
|
||||||
|
z-index: 99;
|
||||||
|
|
||||||
|
.text-with-block {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
height: 50rpx;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
.text {
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
padding-left: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slanted-block {
|
||||||
|
position: absolute;
|
||||||
|
left: 120rpx;
|
||||||
|
top: 46rpx;
|
||||||
|
transform: translateX(-50%) skewX(-40deg);
|
||||||
|
width: 166rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
background-color: #80B3FF;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #3B8CFF;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
// margin-top: 20rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
|
||||||
|
view {
|
||||||
|
color: #fff;
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
line-height: 28rpx;
|
||||||
|
border: 4rpx solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 34rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interact_body {
|
||||||
|
// display:list-item;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-gap: 26rpx;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: -20rpx;
|
||||||
|
|
||||||
|
.body_item {
|
||||||
|
// width: 80%;
|
||||||
|
margin: 40rpx auto;
|
||||||
|
// height: 400rpx;
|
||||||
|
background: #E8F3FF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
// gap: 20rpx;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
|
||||||
|
.item_left {
|
||||||
|
// flex: 1;
|
||||||
|
// display: flex;
|
||||||
|
// flex-direction: column;
|
||||||
|
// justify-content: space-between;
|
||||||
|
// gap: 10rpx;
|
||||||
|
width: 70%;
|
||||||
|
margin-right: 10%;
|
||||||
|
|
||||||
|
.left_title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
line-height: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_font {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #3D3D3D;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_botton {
|
||||||
|
|
||||||
|
width: 134rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
opacity: 1;
|
||||||
|
line-height: 30rpx;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
background-color: #3881FF;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
// width: fit-content;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end {
|
||||||
|
background: #9FA3AB;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_right {
|
||||||
|
width: 100rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10rpx;
|
||||||
|
margin-top: 14rpx;
|
||||||
|
|
||||||
|
.right_nav {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
background-color: #ccc;
|
||||||
|
border-radius: 50%;
|
||||||
|
/* 圆形头像 */
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
z-index: 2
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 20rpx;
|
||||||
|
left: -118rpx;
|
||||||
|
width: 260rpx;
|
||||||
|
height: 260rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right_name {
|
||||||
|
width: 200rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
// padding-left: 62rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right_date {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
width: 270rpx;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 62rpx;
|
||||||
|
margin-top: 12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interact_more {
|
||||||
|
text-align: right;
|
||||||
|
color: #3B8CFF;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -14,7 +14,7 @@
|
|||||||
<view class="slanted-block"></view>
|
<view class="slanted-block"></view>
|
||||||
|
|
||||||
<view class="function-area">
|
<view class="function-area">
|
||||||
<view class="function-item">
|
<view class="function-item" @click="goPage('serviceTickets')">
|
||||||
<view class="icon">
|
<view class="icon">
|
||||||
<image src="/static/imgs/service/service_workorder.png"></image>
|
<image src="/static/imgs/service/service_workorder.png"></image>
|
||||||
</view>
|
</view>
|
||||||
@ -39,11 +39,11 @@
|
|||||||
<view class="content_wapper">
|
<view class="content_wapper">
|
||||||
<view class="text-with-block notice">
|
<view class="text-with-block notice">
|
||||||
<view class="left">
|
<view class="left">
|
||||||
<text class="text">社区公告</text>
|
<text class="text">社区通知</text>
|
||||||
<view class="slanted-block"></view>
|
<view class="slanted-block"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="right">
|
<view class="right" @click="goPage('serviceNoticeList')">
|
||||||
查看更多
|
查看更多
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -96,7 +96,21 @@
|
|||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 跳转页面
|
||||||
|
goPage(page){
|
||||||
|
console.log("==进来",page)
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/${page}/index`,
|
||||||
|
// url: '/pages/helpInfo/index',
|
||||||
|
success: () => {
|
||||||
|
console.log('切换到tabBar页面成功');
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('切换到tabBar页面失败:', err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
124
pages/serviceNoticeDetail/index.vue
Normal file
124
pages/serviceNoticeDetail/index.vue
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 引入头部组件 -->
|
||||||
|
<Header :title="'社区公告'"></Header>
|
||||||
|
<view class="content">
|
||||||
|
<view class="content_wapper">
|
||||||
|
<h3 class="content_title">
|
||||||
|
小区电梯维修通知<text>2025-03-29</text>
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view>
|
||||||
|
1232324435454545
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<Footer></Footer>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Header from '@/components/header_common.vue';
|
||||||
|
import Footer from '@/components/footer_common.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Header,
|
||||||
|
Footer
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
fileList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleBack() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1 // 返回上一级页面
|
||||||
|
});
|
||||||
|
},
|
||||||
|
afterRead(event) {
|
||||||
|
// 读取完成后的回调函数
|
||||||
|
const {
|
||||||
|
file
|
||||||
|
} = event;
|
||||||
|
this.fileList.push(file);
|
||||||
|
},
|
||||||
|
publish() {
|
||||||
|
// 发布逻辑
|
||||||
|
console.log('发布:', this.title, this.content, this.fileList);
|
||||||
|
},
|
||||||
|
// 跳转详情页面
|
||||||
|
goPage(page){
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/${page}/index`,
|
||||||
|
// url: '/pages/helpInfo/index',
|
||||||
|
success: () => {
|
||||||
|
console.log('切换到tabBar页面成功');
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('切换到tabBar页面失败:', err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
/* 占满整个视口高度 */
|
||||||
|
opacity: 1;
|
||||||
|
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
|
||||||
|
linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 200rpx;
|
||||||
|
border-top-left-radius: 30rpx;
|
||||||
|
border-top-right-radius: 30rpx;
|
||||||
|
background-color: rgba(255, 255, 255, 0.65);
|
||||||
|
padding-bottom: 200rpx;
|
||||||
|
.content_wapper{
|
||||||
|
width:100%;
|
||||||
|
background-color: rgba(128, 179, 237, 0.19);
|
||||||
|
border-top-left-radius: 30rpx;
|
||||||
|
border-top-right-radius: 30rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
line-height: 100rpx;
|
||||||
|
|
||||||
|
.content_title{
|
||||||
|
color:#3B8CFF;
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
font-size:28rpx ;
|
||||||
|
|
||||||
|
text{
|
||||||
|
display: inline-block;
|
||||||
|
color: #7D7D7D;
|
||||||
|
width: 40%;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
235
pages/serviceNoticeList/index.vue
Normal file
235
pages/serviceNoticeList/index.vue
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 引入头部组件 -->
|
||||||
|
<Header :title="'社区公告'"></Header>
|
||||||
|
<view class="content">
|
||||||
|
<view class="content_wapper">
|
||||||
|
<view class="notice-list">
|
||||||
|
<view class="notice_item" @click="goPage('serviceNoticeDetail')">
|
||||||
|
<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
|
||||||
|
<view class="notice-content">
|
||||||
|
<view class="notice-title">小区电梯维修通知</view>
|
||||||
|
<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
|
||||||
|
<view class="notice-date">2025-03-29</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="notice_item">
|
||||||
|
<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
|
||||||
|
<view class="notice-content">
|
||||||
|
<view class="notice-title">小区电梯维修通知</view>
|
||||||
|
<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
|
||||||
|
<view class="notice-date">2025-03-29</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="notice_item">
|
||||||
|
<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
|
||||||
|
<view class="notice-content">
|
||||||
|
<view class="notice-title">小区电梯维修通知</view>
|
||||||
|
<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
|
||||||
|
<view class="notice-date">2025-03-29</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="notice_item">
|
||||||
|
<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
|
||||||
|
<view class="notice-content">
|
||||||
|
<view class="notice-title">小区电梯维修通知</view>
|
||||||
|
<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
|
||||||
|
<view class="notice-date">2025-03-29</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="notice_item">
|
||||||
|
<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
|
||||||
|
<view class="notice-content">
|
||||||
|
<view class="notice-title">小区电梯维修通知</view>
|
||||||
|
<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
|
||||||
|
<view class="notice-date">2025-03-29</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="notice_item">
|
||||||
|
<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
|
||||||
|
<view class="notice-content">
|
||||||
|
<view class="notice-title">小区电梯维修通知</view>
|
||||||
|
<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
|
||||||
|
<view class="notice-date">2025-03-29</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="notice_item">
|
||||||
|
<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
|
||||||
|
<view class="notice-content">
|
||||||
|
<view class="notice-title">小区电梯维修通知</view>
|
||||||
|
<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
|
||||||
|
<view class="notice-date">2025-03-29</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="notice_item">
|
||||||
|
<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
|
||||||
|
<view class="notice-content">
|
||||||
|
<view class="notice-title">小区电梯维修通知</view>
|
||||||
|
<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
|
||||||
|
<view class="notice-date">2025-03-29</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="notice_item">
|
||||||
|
<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
|
||||||
|
<view class="notice-content">
|
||||||
|
<view class="notice-title">小区电梯维修通知</view>
|
||||||
|
<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
|
||||||
|
<view class="notice-date">2025-03-29</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="notice_item">
|
||||||
|
<image src="/static/imgs/service/service_test.png" class="notice-image"></image>
|
||||||
|
<view class="notice-content">
|
||||||
|
<view class="notice-title">小区电梯维修通知</view>
|
||||||
|
<view class="notice-description">3号楼电梯将于明日上午9:00-12:00进行例行维护，请居民提前安排出行，以免带来不便。</view>
|
||||||
|
<view class="notice-date">2025-03-29</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<Footer></Footer>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Header from '@/components/header_common.vue';
|
||||||
|
import Footer from '@/components/footer_common.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Header,
|
||||||
|
Footer
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: '',
|
||||||
|
content: '',
|
||||||
|
fileList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleBack() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1 // 返回上一级页面
|
||||||
|
});
|
||||||
|
},
|
||||||
|
afterRead(event) {
|
||||||
|
// 读取完成后的回调函数
|
||||||
|
const {
|
||||||
|
file
|
||||||
|
} = event;
|
||||||
|
this.fileList.push(file);
|
||||||
|
},
|
||||||
|
publish() {
|
||||||
|
// 发布逻辑
|
||||||
|
console.log('发布:', this.title, this.content, this.fileList);
|
||||||
|
},
|
||||||
|
// 跳转详情页面
|
||||||
|
goPage(page){
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/${page}/index`,
|
||||||
|
// url: '/pages/helpInfo/index',
|
||||||
|
success: () => {
|
||||||
|
console.log('切换到tabBar页面成功');
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('切换到tabBar页面失败:', err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
/* 占满整个视口高度 */
|
||||||
|
opacity: 1;
|
||||||
|
background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
|
||||||
|
linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 200rpx;
|
||||||
|
border-top-left-radius: 30rpx;
|
||||||
|
border-top-right-radius: 30rpx;
|
||||||
|
background-color: rgba(255, 255, 255, 0.65);
|
||||||
|
// padding-bottom: 60rpx;
|
||||||
|
padding-bottom: 200rpx;
|
||||||
|
.content_wapper{
|
||||||
|
margin-top:60rpx ;
|
||||||
|
.notice-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.notice_item {
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
border: 1rpx solid rgba(59, 140, 255, 1);
|
||||||
|
box-shadow: 2rpx 2rpx 4rpx rgba(59, 140, 255, 0.25);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.notice-image {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 178rpx;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-content {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.notice-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #4a90e2;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-description {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #7D7D7D;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-date {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #7D7D7D;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
216
pages/serviceTickets/index.vue
Normal file
216
pages/serviceTickets/index.vue
Normal file
@ -0,0 +1,216 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 引入头部组件 -->
|
||||||
|
<Header :title="'智能工单'"></Header>
|
||||||
|
<view class="conent">
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">
|
||||||
|
<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
|
||||||
|
工单内容
|
||||||
|
</view>
|
||||||
|
<textarea v-model="workOrderContent" placeholder="请输入..." style="width: 100%;" />
|
||||||
|
<view class="voice-icon">
|
||||||
|
<u-icon name="mic" color="#409EFF" size="36"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 上传照片/视频 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">
|
||||||
|
|
||||||
|
<u-icon name="photo" color="#3B8CFF" size="38"></u-icon>
|
||||||
|
上传照片/视频
|
||||||
|
</view>
|
||||||
|
<view class="upload-area">
|
||||||
|
<u-upload :action="uploadAction" :max-count="8" @on-success="handleUploadSuccess" width="200"
|
||||||
|
height="200"></u-upload>
|
||||||
|
</view>
|
||||||
|
<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 工单分类 -->
|
||||||
|
<view class="form-item" style="height: 60rpx;line-height: 50rpx;">
|
||||||
|
<view class="label" @click="showSelect = true">
|
||||||
|
工单类型
|
||||||
|
<view @click="showPicker = true" class="select-box">
|
||||||
|
{{ workOrderCategory || '请选择' }}
|
||||||
|
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<u-picker :show="showSelect" :columns="categoryList" @confirm="handleConfirm"
|
||||||
|
@cancel="handleCancel"></u-picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 工单地点 -->
|
||||||
|
<view class="form-item" style="margin-bottom: 30rpx;height: 200rpx;">
|
||||||
|
<view class="label">
|
||||||
|
<u-icon name="map" color="#3B8CFF" size="38"></u-icon>
|
||||||
|
工作地点
|
||||||
|
</view>
|
||||||
|
<textarea v-model="workOrderLocation" placeholder="请输入..." style="width: 100%;" />
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 预计上门时间 -->
|
||||||
|
<view class="form-item" style="height: 200rpx;">
|
||||||
|
<view class="label">
|
||||||
|
<u-icon name="clock" color="#3B8CFF" size="38"></u-icon>
|
||||||
|
期望上门时间
|
||||||
|
</view>
|
||||||
|
<textarea v-model="expectedTime" placeholder="请输入..." style="width: 100%;" />
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 提交按钮 -->
|
||||||
|
<view class="submit-button">
|
||||||
|
<u-button type="primary" @click="handleSubmit">提交</u-button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<!-- 工单内容 -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<Footer></Footer>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Header from '@/components/header_common.vue';
|
||||||
|
import Footer from '@/components/footer_common.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Header,
|
||||||
|
Footer
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
workOrderContent: '',
|
||||||
|
uploadAction: 'https://your-upload-api.com/upload', // 替换为你的上传接口地址
|
||||||
|
workOrderCategory: '',
|
||||||
|
showSelect: false, // 控制下拉框的显示状态
|
||||||
|
categoryList: [
|
||||||
|
['投诉', '维修']
|
||||||
|
],
|
||||||
|
workOrderLocation: '',
|
||||||
|
expectedTime: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleBack() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1 // 返回上一级页面
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleUploadSuccess(res) {
|
||||||
|
console.log('上传成功:', res);
|
||||||
|
},
|
||||||
|
handleSubmit() {
|
||||||
|
// 处理提交逻辑
|
||||||
|
console.log('提交数据:', this.workOrderContent, this.workOrderCategory, this.workOrderLocation, this
|
||||||
|
.expectedTime);
|
||||||
|
},
|
||||||
|
// 用户点击“确定”时触发
|
||||||
|
handleConfirm(e) {
|
||||||
|
// const selectedIndex = e[0]; // 获取选中的索引
|
||||||
|
// this.workOrderCategory = this.categoryList[selectedIndex].label;
|
||||||
|
this.showSelect = false; // 关闭选择器
|
||||||
|
},
|
||||||
|
// 用户点击“取消”时触发
|
||||||
|
handleCancel() {
|
||||||
|
this.showSelect = false; // 关闭选择器
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 130vh;
|
||||||
|
// padding-bottom: 400rpx;
|
||||||
|
// margin-bottom: 100rpx;
|
||||||
|
opacity: 1;
|
||||||
|
background: rgba(210, 227, 255, 1);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.conent {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 200rpx;
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
height: 400rpx;
|
||||||
|
width: 95%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
// align-items: center;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
display: flex;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// padding: 10rpx;
|
||||||
|
// border: 2rpx solid #ccc;
|
||||||
|
// border-radius: 8rpx;
|
||||||
|
// min-width: 400rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 30rpx;
|
||||||
|
bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-button {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user