页面修改及其新增
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="text-with-block">
|
||||
<view class="left">
|
||||
<text class="text">社区服务</text>
|
||||
<text class="text">邻里互助</text>
|
||||
<view class="slanted-block"></view>
|
||||
</view>
|
||||
|
||||
<view class="right">
|
||||
<view class="right" @click="goPage('helpInfo')">
|
||||
<view>+</view>
|
||||
|
||||
<!-- <u-icon name="plus-circle" color="#fff" size="24"></u-icon> -->
|
||||
@ -78,7 +78,7 @@
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="interact_more">
|
||||
<view class="interact_more" @click="goPage('neighborList')">
|
||||
查看更多
|
||||
</view>
|
||||
|
||||
@ -269,8 +269,21 @@
|
||||
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>
|
||||
|
||||
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="function-area">
|
||||
<view class="function-item">
|
||||
<view class="function-item" @click="goPage('serviceTickets')">
|
||||
<view class="icon">
|
||||
<image src="/static/imgs/service/service_workorder.png"></image>
|
||||
</view>
|
||||
@ -39,11 +39,11 @@
|
||||
<view class="content_wapper">
|
||||
<view class="text-with-block notice">
|
||||
<view class="left">
|
||||
<text class="text">社区公告</text>
|
||||
<text class="text">社区通知</text>
|
||||
<view class="slanted-block"></view>
|
||||
</view>
|
||||
|
||||
<view class="right">
|
||||
<view class="right" @click="goPage('serviceNoticeList')">
|
||||
查看更多
|
||||
</view>
|
||||
</view>
|
||||
@ -96,7 +96,21 @@
|
||||
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