Commit b5050b9a authored by dusheng's avatar dusheng
Browse files

页面开发完成

parent c85dae88
<template>
<picker @change="bindPickerChange" :value="index" :range="range" range-key="label">
<view class="uni-input">{{showText}}</view>
</picker>
<view class="pubPicker">
<template v-if="type=='select'">
<picker @change="bindPickerChange" :value="index" :range="range" range-key="label">
<view class="flex flex-between">
<view class="uni-input">{{showText}}</view>
<uni-icons type="right" size="18" style="margin-left: 10rpx;"></uni-icons>
</view>
</picker>
</template>
<template v-if="type == 'date'">
<picker mode="date" :value="pickerValue" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="flex flex-between">
<view class="uni-input">{{showTextDate}}</view>
<uni-icons type="right" size="18" style="margin-left: 10rpx;"></uni-icons>
</view>
</picker>
</template>
<template v-if="type == 'tagSelect'">
<view class="tags">
<view class="tag flex-center" :class="item.value == pickerValue ? 'active' :''"
v-for="(item,index) in range" @click="selectTag(item)">{{item.label}}</view>
</view>
</template>
</view>
</template>
<script>
......@@ -20,6 +41,11 @@
type: String,
default: () => '请选择'
},
type: {
type: String,
default: () => 'select'
},
},
computed: {
pickerValue: {
......@@ -36,11 +62,16 @@
return findItem.label
}
return this.placeholder || ''
}
},
showTextDate() {
return this.pickerValue || '请选择日期'
},
},
data() {
return {
index: 0,
startDate: '',
endDate: ''
};
},
methods: {
......@@ -49,10 +80,48 @@
this.index = val.detail.value
this.pickerValue = this.range[this.index]?.value
},
bindDateChange(e) {
this.pickerValue = e.detail.value
},
selectTag(e) {
this.pickerValue = e.value
},
}
}
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.pubPicker {
display: inline-block;
}
.tags {
width: 100%;
display: flex;
flex-wrap: wrap;
.tag {
width: 182rpx;
height: 80rpx;
border-radius: 8rpx;
background: #FFFFFF;
border: 2rpx solid #E5E5E5;
margin-right: 20rpx;
margin-bottom: 23rpx;
&:nth-child(3n) {
margin-right: 0;
}
&.active {
border: 2rpx solid #32BAEC;
color: #32BAEC;
}
}
}
</style>
\ No newline at end of file
{
"name": "hehuangapp",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}
......@@ -9,7 +9,8 @@
{
"path": "pages/login/login/login",
"style": {
"navigationBarTitleText": "登陆"
"navigationBarTitleText": "登陆",
"navigationStyle": "custom"
}
},
{
......@@ -29,11 +30,77 @@
{
"path": "pages/user/user",
"style": {
"navigationBarTitleText": "我的"
"navigationBarTitleText": "我的",
"navigationStyle": "custom"
}
}
],
, {
"path": "pages/follow/followSuccess",
"style": {
"navigationBarTitleText": "提交成功",
"enablePullDownRefresh": false
}
}, {
"path": "pages/user/userInfo",
"style": {
"navigationBarTitleText": "个人资料",
"enablePullDownRefresh": false
}
}, {
"path": "pages/user/aboutUs",
"style": {
"navigationBarTitleText": "关于我们",
"enablePullDownRefresh": false
}
}, {
"path": "pages/user/agreement",
"style": {
"navigationBarTitleText": "用户协议",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/follow/followDetail",
"style" :
{
"navigationBarTitleText": "跟进详情",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/opinion/addNew",
"style" :
{
"navigationBarTitleText": "新增意见",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/opinion/opinionSuccess",
"style" :
{
"navigationBarTitleText": "提交成功",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/opinion/checkList",
"style" :
{
"navigationBarTitleText": "审批列表",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "hehuangApp",
......
<template>
<view class="page full">
<view class="header">
<view class="flex-between head">
<view class="code">參考編號:CPL202309250001</view>
<text class="status">待跟進</text>
</view>
<view class="flex level-line">
<view class="level pub-tag warning">紧急</view>
<view class="level pub-tag">一般</view>
<view class="level pub-tag success">不紧急</view>
<view class="pub-tag success">非住客投诉</view>
</view>
</view>
<view class="pub-card">
<view class="card-title">职员跟进</view>
<view class="step">
<view class="step-item" v-for="(item,index) in stepList" :key="index">
<view class="step-item-content">
<view class="">跟進時間:2023-05-23  30:53:34</view>
<view class="">跟進人:張三</view>
<view class="text-primary" v-if="index==0">審批狀態:待審批</view>
<view class="text-primary" v-if="index==1">審批狀態:审批通过</view>
<view class="text-danger" v-if="index==2">審批狀態:审批不通过</view>
<view class="text-danger" v-if="index==2">未通过原因:原因原因原因原因原因原因原因原因</view>
<view class="flex-between">
<text>跟進內容</text>
<view class="pub-btn" v-if="index == 0">修改跟进</view>
</view>
<view class="follow-content">
<view class="card-content">
<view class="label">意见类别:</view>
<view class="content">A清洁</view>
</view>
<view class="card-content">
<view class="label">內容:</view>
<view class="content">
文本內容内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本
</view>
</view>
<view class="card-content">
<view class="label">憑證:</view>
<view class="card-file">
<view class="left flex-items-center">
<image src="@/static/images/file.png" style="width: 69rpx;height: 57rpx"
mode=""></image>
<view class="msg">
<view class="name">意見圖片.png</view>
<view class="size">4.1M</view>
</view>
</view>
<view class="pre-view">预览</view>
</view>
</view>
<view class="card-content">
<view class="label">是否可見</view>
<view class="content"></view>
</view>
<view class="card-content">
<view class="label">建議回復日期</view>
<view class="content">2023-05-23  30:53:34</view>
</view>
<view class="card-content">
<view class="label">前台顯示</view>
<view class="content"></view>
</view>
<view class="card-content">
<view class="label">前台內容</view>
<view class="content">文本內容内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</view>
</view>
</view>
</view>
</view>
<!-- <view class="step-item"></view>
<view class="step-item"></view> -->
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
stepList: [{}, {}, {}]
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.page {
min-height: calc(100vh - 88rpx);
overflow-y: auto;
padding-bottom: 120rpx;
}
.header {
background-color: #fff;
padding: 26rpx 36rpx;
border-top: 1px solid @uni-border-color;
}
.head {
height: 40rpx;
.code {
font-size: 28rpx;
color: #333;
font-weight: bold;
}
.status {
font-size: 24rpx;
color: @uni-color-primary;
}
}
.level-line {
padding-top: 10rpx;
.level {
margin-right: 18rpx;
}
}
.step {
padding-left: 48rpx;
}
.step-item {
min-height: 200rpx;
border-left: 1px solid #32BAEC;
position: relative;
padding-left: 32rpx;
box-sizing: border-box;
padding-right: 22rpx;
.step-item-content {
// margin-top: -30rpx;
font-size: 28rpx;
line-height: 60rpx;
transform: translateY(-10px);
}
&:before {
content: '';
position: absolute;
display: block;
left: -8rpx;
top: 0;
width: 16rpx;
height: 16rpx;
background: #32BAEC;
border-radius: 50%;
}
&:last-child {
border-left: none;
}
}
.follow-content {
width: 100%;
padding-left: 28rpx;
border-radius: 16rpx;
background: #F7F7F7;
box-sizing: border-box;
margin-top: 12rpx;
padding-bottom: 12rpx;
.card-content {
padding-left: 0;
padding-top: 10rpx;
// flex-wrap: nowrap;
}
.label {
width: 200rpx;
flex-shrink: 0;
}
.content {
// width: 100%;
width: 370rpx;
}
}
</style>
\ No newline at end of file
<template>
<view class="page full">
<view class="top flex-col flex-items-center">
<image src="../../static/images/success.png" style="width: 154rpx; height: 154rpx;" mode=""></image>
<view class="top-title">跟進提交成功</view>
<view class="top-info">進提交成功,等待管理員審核!</view>
<view class="btns-box flex-between">
<view class="pub-btn plain info" @click="pageBack">返回</view>
<view class="pub-btn" @click="toFollorInfo">跟进详情</view>
</view>
</view>
<view class="pub-card">
<view class="card-title">跟进信息</view>
<view class="card-content">
<view class="label">意見類別</view>
<view class="content">公共設施</view>
</view>
<view class="card-content">
<view class="label">內容</view>
<view class="content">
文本內容内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
</view>
</view>
<view class="card-content">
<view class="label">意見憑證</view>
<view class="card-file">
<view class="left flex-items-center">
<image src="@/static/images/file.png" style="width: 69rpx;height: 57rpx" mode=""></image>
<view class="msg">
<view class="name">意見圖片.png</view>
<view class="size">4.1M</view>
</view>
</view>
<view class="pre-view">预览</view>
</view>
</view>
<view class="card-content">
<view class="label">是否可見</view>
<view class="content"></view>
</view>
<view class="card-content">
<view class="label">建議回復日期</view>
<view class="content">2023-05-23  30:53:34</view>
</view>
<view class="card-content">
<view class="label">前台顯示</view>
<view class="content"></view>
</view>
<view class="card-content">
<view class="label">前台內容</view>
<view class="content">文本內容内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
pageBack() {
uni.navigateBack()
},
toFollorInfo() {
uni.redirectTo({
url: '/pages/follow/followDetail'
})
},
}
}
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.page {
padding-bottom: 50rpx;
}
.top {
padding-top: 107rpx;
.top-title {
font-size: 32rpx;
padding-top: 29rpx;
}
.top-info {
font-size: 26rpx;
padding-top: 26rpx;
}
}
.btns-box {
width: 470rpx;
padding-top: 85rpx;
padding-bottom: 50rpx;
}
.pub-btn {
min-width: 190rpx;
}
// .pub-card .card-content{
// color: #999;
// }
// .pub-card .card-content .content {
// color: #999;
// }
</style>
\ No newline at end of file
<template>
<view class="flex-col flex-center">
<view class="logo">LOGO/和黄App</view>
<view class="login-form bd-card">
<view class="logo">
<image src="../../../static/images/logoback.png" class="logoback" style="width: 750rpx;height: 433rpx;"
mode=""></image>
<image src="../../../static/images/logo.png" class="logo-img" style="width: 114rpx;height: 114rpx;" mode="">
</image>
<text class="logo-text">
您好,<br />歡迎使用家利物業員工端
</text>
</view>
<view class="login-form">
<view class="flex inout-box bd-bt">
<view class="flex">
<uni-icons type="person" size="24" color="#999"></uni-icons>
<input type="text" placeholder="账号" />
</view>
<!-- <view class="flex"> -->
<!-- <uni-icons type="person" size="24" color="#999"></uni-icons> -->
<image src="../../../static/images/username.png" class="form-icon" mode=""></image>
<input type="text" placeholder="请输入账号" />
<!-- </view> -->
</view>
<view class="flex inout-box">
<view class="flex">
<uni-icons type="locked" size="24" color="#999"></uni-icons>
<!-- <view class="flex"> -->
<!-- <uni-icons type="locked" size="24" color="#999"></uni-icons> -->
<image src="../../../static/images/lock.png" class="form-icon" mode=""></image>
<input type="text" placeholder="请输入密码" />
</view>
<!-- </view> -->
</view>
</view>
<div class="btn page-btn" @click="login">登陆</div>
......@@ -31,9 +41,9 @@
}
},
methods: {
login(){
login() {
uni.switchTab({
url:'/pages/opinion/list'
url: '/pages/opinion/list'
})
},
}
......@@ -43,26 +53,80 @@
<style lang="less" scoped>
@import url('@/style/index.less');
.login-form{
width: 600rpx;
.login-form {
// width: 600rpx;
padding-top: 42rpx;
}
.logo{
.inout-box {
width: 670rpx;
height: 100rpx;
margin-bottom: 22rpx;
// padding: 20rpx 40rpx;
box-sizing: border-box;
border-radius: 8px;
// background: rgba(255, 255, 255, 1);
border: 1px solid rgba(229, 229, 229, 1);
margin: 160rpx 0;
}
.inout-box{
padding: 20rpx 40rpx;
input{
padding-left: 20rpx;
padding-left: 48rpx;
display: flex;
justify-content: flex-start;
align-items: center;
.form-icon{
width: 36rpx;
height: 36rpx;
}
input {
padding-left: 30rpx;
}
}
.page-btn{
margin-top: 160rpx;
width: 600rpx;
.page-btn {
width: 670rpx;
height: 100rpx;
opacity: 1;
border-radius: 50rpx;
background: rgba(50, 186, 236, 1);
}
.agreement {
width: 670rpx;
padding: 30rpx 28rpx;
box-sizing: border-box;
}
.agreement{
width: 600rpx;
padding: 30rpx 0;
.logo {
width: 100%;
position: relative;
}
.logoback {
position: relative;
z-index: 1;
}
.logo-text {
position: absolute;
z-index: 2;
left: 64rpx;
bottom: 34rpx;
font-size: 36rpx;
line-height: 50rpx;
color: #000;
}
.logo-img {
position: absolute;
z-index: 2;
left: 60rpx;
top: 166rpx;
}
</style>
\ No newline at end of file
<template>
<view class="page full">
<view class="pub-card">
<view class="pub-form card-form">
<view class="form-item flex-between bd-bt">
<view class="label">投诉人性质</view>
<view class="pub-form-content">
<label class="radio" @click="form.nature = 1">
<radio :checked="form.nature == 1" />住客
</label>
<label class="radio" @click="form.nature = 2">
<radio :checked="form.nature == 2" />非住客
</label>
</view>
</view>
<template v-if="form.nature == 1">
<view class="form-item flex-between bd-bt">
<view class="label">小区</view>
<view class="pub-form-content">
<input type="text" v-model="form.village" placeholder="请输入小区名称">
</view>
</view>
<view class="form-item flex-between bd-bt">
<view class="label">期数</view>
<view class="pub-form-content">
<PubPicker :range="periodsRange" v-model="form.periods" placeholder="请选择期数"></PubPicker>
</view>
</view>
<view class="form-item flex-between bd-bt">
<view class="label">具体位置</view>
<view class="pub-form-content">
<input type="text" v-model="form.address" placeholder="请输入具体位置">
</view>
</view>
</template>
<view class="form-item bd-bt">
<view class="label">意见内容</view>
<textarea v-model="form.content" placeholder="請輸入您的意見內容" cols="30" rows="10"></textarea>
</view>
<view class="form-item bd-bt">
<view class="label">上传凭证<text class="tip">(支持png、jpg、pdf格式,最多可傳9个)</text></view>
<FileUploader></FileUploader>
</view>
<view class="form-item flex-between bd-bt">
<view class="label">意见类别</view>
<view class="pub-form-content">
<PubPicker :range="typeRange" v-model="form.type"></PubPicker>
</view>
</view>
<view class="form-item bd-bt">
<view class="label">重要情况</view>
<view class="pub-form-content">
<PubPicker type="tagSelect" :range="importantRange" v-model="form.important"></PubPicker>
</view>
</view>
<view class="form-item flex-between bd-bt">
<view class="label">意见负责人</view>
<view class="pub-form-content">
<text>自动获取姓名</text>
</view>
</view>
<view class="form-item bd-bt">
<view class="label">意见来源</view>
<view class="pub-form-content">
<PubPicker type="tagSelect" :range="opinionFromRange" v-model="form.opinionFrom"></PubPicker>
</view>
</view>
<view class="form-item flex-between bd-bt">
<view class="label">投诉人</view>
<view class="pub-form-content">
<input type="text" v-model="form.user" placeholder="请输入姓名">
</view>
</view>
<view class="form-item flex-between bd-bt">
<view class="label">联系电话</view>
<view class="pub-form-content">
<input type="text" v-model="form.phone" placeholder="请输入电话">
</view>
</view>
<view class="form-item flex-between bd-bt">
<view class="label">电邮地址</view>
<view class="pub-form-content">
<input type="text" v-model="form.email" placeholder="请输入邮箱">
</view>
</view>
</view>
</view>
<view class="page-bottom-btns">
<view class="btn" style="width:710rpx" @click="toSuccess">提交</view>
</view>
</view>
</template>
<script>
import PubPicker from '@/components/PubPicker/PubPicker.vue'
import FileUploader from '@/components/FileUploader/FileUploader.vue'
export default {
components: {
PubPicker,
FileUploader
},
data() {
return {
isFollow: false,
form: {
nature: 1,
village: '',
periods: '',
address: '',
type: '',
content: '',
important: '',
opinionFrom: '',
user: '',
phone: '',
email: '',
},
periodsRange: [{
label: '一期',
value: 1
}, {
label: '二期',
value: 2
}],
importantRange: [{
label: '紧急',
value: 1
}, {
label: '一般',
value: 2
}, {
label: '不紧急',
value: 3
}],
typeRange: [{
label: 'A清洁',
value: 1
}, {
label: 'B保安',
value: 2
}],
opinionFromRange: [{
label: '电话',
value: 1
}, {
label: '电子邮件',
value: 2
}, {
label: '信函',
value: 3
}, {
label: '其他',
value: 4
}],
isseeRange: [{
label: '可见',
value: 1
}, {
label: '不可见',
value: 2
}],
inShowRange: [{
label: '可见',
value: 1
}, {
label: '不可见',
value: 2
}],
}
},
methods: {
toSuccess() {
uni.navigateTo({
url: '/pages/opinion/opinionSuccess'
})
},
}
}
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.page {
padding-top: 20rpx;
padding-bottom: 200rpx;
}
.page-bottom-btns {
height: 120rpx;
.btn {
height: 88rpx;
border-radius: 44rpx;
}
}
.radio {
margin-left: 20rpx;
}
</style>
\ No newline at end of file
<template>
<view class="page">
<view class="filters flex">
<view class="filter-item flex-items-center" :class="filterValue == item.value? 'active' :''"
v-for="(item,index) in filters" :key="index" @click="chaneSelect(item)">
<text>{{item.label}}</text>
</view>
</view>
<view class="list" ref="list">
<scroll-view :scroll-top="scrollTop" scroll-y class="scroll-Y" scroll-with-animation :style="'height:100%'">
<view class="opinion" v-for="(item,index) in 10" :key="index" :id="'index'+index"
@click="toDetail(item)">
<view class="flex-between head">
<view class="code">參考編號:CPL202309250001</view>
<view class="right flex-items-center">
<text class="status">待跟進</text>
<image src="../../static/images/back.png" style="width: 32rpx;height: 32rpx;" mode="">
</image>
</view>
</view>
<view class="flex level-line">
<view class="level pub-tag warning">紧急</view>
<view class="room" v-if="index == 0">一期-8幢2單元座 6樓XXXX</view>
<view class="pub-tag success" v-else>非住客投诉</view>
</view>
<view class="content">曬台不知道在做什麼,還打了洞,架了管道,馬服務業看架了管道···</view>
<view class="flex-between bottom">
<view class="pub-tag plain">公共设施</view>
<view class="time">2023-06-28 15:25:12</view>
</view>
</view>
<!-- <div class="bottom-block" style="width: 100%;height: 180rpx;"></div> -->
</scroll-view>
</view>
</view>
</template>
<script>
import MaskSelecter from '@/components/MaskSelecter/MaskSelecter.vue'
export default {
components: {
MaskSelecter
},
data() {
return {
value: '',
scrollTop: 0,
filterValue: 4,
list: []
}
},
computed: {
filters() {
return [{
label: '待审批',
value: 1,
}, {
label: '已通過',
value: 2,
}, {
label: '未通過',
value: 3,
}, {
label: '全部',
value: 4,
}]
},
},
onLoad() {
this.$nextTick(() => {
// console.log();
// this.listHeight = this.$refs.list?.$el.clientHeight || 573
})
},
methods: {
toDetail(item) {
uni.navigateTo({
url: `/pages/opinion/detail?id=${item.id || 1}`
})
},
chaneSelect(item) {
this.filterValue = item.value
}
}
}
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.page {
overflow: hidden;
width: 100%;
height: calc(100vh - 88rpx);
background-color: @uni-bg-color-grey;
display: flex;
flex-flow: column;
}
.filters {
justify-content: flex-start;
background-color: @uni-bg-color;
flex-shrink: 0;
height: 100rpx;
font-size: 24rpx;
.filter-item {
margin: 0 30rpx;
position: relative;
&.active {
color: @uni-color-primary;
&::after {
content: '';
width: 100%;
height: 8rpx;
opacity: 1;
border-radius: 4rpx;
background: #32BAEC;
position: absolute;
bottom: 20rpx;
}
}
text {
display: inline-block;
max-width: 110rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
image {
margin-left: 16rpx;
}
}
}
::v-deep {
.uni-select {
font-size: 24rpx;
border: none;
}
}
.list {
position: relative;
width: 100%;
height: calc(100vh - 200rpx);
// padding-bottom: 200rpx;
// .scroll-Y {}
}
.add-btn {
// position: fixed;
// left: 0;
// bottom: 106rpx;
width: 100%;
height: 182rpx;
background-color: @uni-bg-color-grey;
}
.opinion {
background-color: #fff;
width: 710rpx;
margin: 0 auto;
margin-top: 20rpx;
min-height: 260rpx;
border-radius: 10rpx;
box-sizing: border-box;
padding: 26rpx 30rpx;
padding-bottom: 38rpx;
font-size: 24rpx;
.head {
height: 40rpx;
.code {
font-size: 28rpx;
color: #333;
font-weight: bold;
}
.right {
display: flex;
justify-content: flex-end;
}
.status {
font-size: 24rpx;
color: @uni-color-primary;
}
}
.level-line {
padding-top: 10rpx;
padding-bottom: 18rpx;
.level {
margin-right: 18rpx;
}
font-size: 24rpx;
}
.content {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 34rpx;
}
.bottom {
padding-top: 16rpx;
height: 40rpx;
color: #A6A6A6;
}
}
// opinion head code right status
</style>
\ No newline at end of file
......@@ -98,6 +98,30 @@
<view class="content">張海</view>
</view>
</view>
<!-- 审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况审批情况 -->
<view class="pub-card">
<view class="card-title">审批情况</view>
<view class="step">
<view class="step-item">
<view class="step-item-content">
<view class="">2023-05-23  30:53:34</view>
<view class="">張三提交了跟進,待審批</view>
</view>
</view>
<view class="step-item">
<view class="step-item-content">
<view class="">2023-05-23  30:53:34</view>
<view class="">跟進審批未通過</view>
<view class="">操作人:李四</view>
<view class="">未通過原因:文字文字文字</view>
</view>
</view>
<!-- <view class="step-item"></view>
<view class="step-item"></view> -->
</view>
</view>
<view class="pub-card" v-if="isFollow">
<view class="card-title">职员跟进</view>
<view class="pub-form card-form">
......@@ -115,11 +139,38 @@
<view class="label">上传凭证<text class="tip">(支持png、jpg、pdf格式,最多可傳9个)</text></view>
<FileUploader></FileUploader>
</view>
<view class="form-item flex-between bd-bt">
<view class="label">是否可见</view>
<view class="pub-form-content">
<PubPicker :range="isseeRange" v-model="form.issee"></PubPicker>
</view>
</view>
<view class="form-item flex-between bd-bt">
<view class="label">建议回复日期</view>
<view class="pub-form-content">
<PubPicker type="date" v-model="form.callbackTime"></PubPicker>
</view>
</view>
<view class="form-item flex-between bd-bt">
<view class="label">前台展示</view>
<view class="pub-form-content">
<PubPicker :range="inShowRange" v-model="form.inShow"></PubPicker>
</view>
</view>
<view class="form-item bd-bt">
<view class="label">前台内容</view>
<textarea v-model="form.inContent" placeholder="請描述前台內容" cols="30" rows="10"></textarea>
</view>
</view>
</view>
<view class="page-bottom-btns">
<template v-if="isFollow">
<view class="btn" style="width:710rpx">提交</view>
<view class="btn" style="width:710rpx" @click="toSuccess">提交</view>
</template>
<template v-else>
......@@ -147,7 +198,11 @@
isFollow: false,
form: {
type: '',
content: ''
content: '',
issee: '',
callbackTime: '',
inShow: '',
inContent: ''
},
typeRange: [{
label: 'A清洁',
......@@ -155,13 +210,32 @@
}, {
label: 'B保安',
value: 2
}]
}],
isseeRange: [{
label: '可见',
value: 1
}, {
label: '不可见',
value: 2
}],
inShowRange: [{
label: '可见',
value: 1
}, {
label: '不可见',
value: 2
}],
}
},
methods: {
handleFollow() {
this.isFollow = true
},
toSuccess() {
uni.navigateTo({
url: '/pages/follow/followSuccess'
})
}
}
}
</script>
......@@ -203,4 +277,44 @@
margin-right: 18rpx;
}
}
.step {
padding-left: 48rpx;
}
.step-item {
min-height: 200rpx;
border-left: 1px solid #32BAEC;
position: relative;
padding-left: 32rpx;
box-sizing: border-box;
padding-right: 22rpx;
.step-item-content {
// margin-top: -30rpx;
font-size: 28rpx;
line-height: 60rpx;
transform: translateY(-10px);
}
&:before {
content: '';
position: absolute;
display: block;
left: -8rpx;
top: 0;
width: 16rpx;
height: 16rpx;
background: #32BAEC;
border-radius: 50%;
}
&:last-child {
border-left: none;
}
}
</style>
\ No newline at end of file
......@@ -11,8 +11,7 @@
</view>
</view>
<view class="list" ref="list">
<scroll-view :scroll-top="scrollTop" scroll-y class="scroll-Y" scroll-with-animation
:style="'height:'+listHeight+'px'">
<scroll-view :scroll-top="scrollTop" scroll-y class="scroll-Y" scroll-with-animation :style="'height:100%'">
<view class="opinion" v-for="(item,index) in 10" :key="index" :id="'index'+index"
@click="toDetail(item)">
<view class="flex-between head">
......@@ -34,15 +33,19 @@
<view class="time">2023-06-28 15:25:12</view>
</view>
</view>
<div class="bottom-block" style="width: 100%;height: 180rpx;"></div>
<!-- <div class="bottom-block" style="width: 100%;height: 180rpx;"></div> -->
</scroll-view>
<view class="add-btn flex-center">
<view class="page-btn">新增意见</view>
</view>
</view>
<view class="add-btn flex-center">
<view class="page-btn" @click="addNew">新增意见</view>
</view>
<MaskSelecter v-model="showSelect" :type="selectType" :options="options[selectKey]" @change="changeFilter">
</MaskSelecter>
<view class="check-list" @click="toCheckList">
<image src="../../static/images/check-list.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
<text>审批列表</text>
</view>
</view>
</template>
......@@ -56,7 +59,7 @@
return {
value: '',
scrollTop: 0,
listHeight: 573,
// listHeight: 573,
showSelect: false,
selectKey: '',
selectType: 'select',
......@@ -185,8 +188,8 @@
},
onLoad() {
this.$nextTick(() => {
console.log();
this.listHeight = this.$refs.list?.$el.clientHeight || 573
// console.log();
// this.listHeight = this.$refs.list?.$el.clientHeight || 573
})
},
methods: {
......@@ -208,6 +211,16 @@
this.filterNames[this.selectKey] = val.label
this.filterValues[this.selectKey] = val.value
},
addNew() {
uni.navigateTo({
url: '/pages/opinion/addNew'
})
},
toCheckList() {
uni.navigateTo({
url: '/pages/opinion/checkList'
})
},
}
}
</script>
......@@ -260,16 +273,21 @@
.list {
position: relative;
width: 100%;
height: 100%;
height: calc(100vh - 420rpx);
// padding-bottom: 200rpx;
// .scroll-Y {}
.add-btn {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 182rpx;
background-color: @uni-bg-color-grey;
}
}
.add-btn {
// position: fixed;
// left: 0;
// bottom: 106rpx;
width: 100%;
height: 182rpx;
background-color: @uni-bg-color-grey;
}
.opinion {
......@@ -331,5 +349,28 @@
}
}
.check-list {
width: 200rpx;
height: 200rpx;
opacity: 1;
background: #32BAEC;
border-radius: 50%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #fff;
position: fixed;
right: 50rpx;
bottom: 300rpx;
text {
padding-top: 5rpx;
}
}
// opinion head code right status
</style>
\ No newline at end of file
<template>
<view class="page full">
<view class="top flex-col flex-items-center">
<image src="../../static/images/success.png" style="width: 154rpx; height: 154rpx;" mode=""></image>
<view class="top-title">意見提交成功</view>
<view class="top-info">您的意見已提交,我們會盡快安排工作人員跟進,謝謝!</view>
<view class="btns-box flex-between">
<view class="pub-btn plain info" @click="pageBack">返回</view>
<view class="pub-btn" @click="toInfo">意见详情</view>
</view>
</view>
<view class="pub-card">
<view class="card-title">意见信息</view>
<view class="card-content">
<view class="label">投訴人性質:</view>
<view class="content">租客</view>
</view>
<view class="card-content">
<view class="label">小區:</view>
<view class="content">XXX小區</view>
</view>
<view class="card-content">
<view class="label">期數:</view>
<view class="content">一期</view>
</view>
<view class="card-content">
<view class="label">具體位置:</view>
<view class="content">詳情地址詳情地址詳情地址</view>
</view>
<view class="card-content">
<view class="label">意見內容:</view>
<view class="content">文字文字文字文字文字文字</view>
</view>
<view class="card-content">
<view class="label">意見類別:</view>
<view class="content">A清潔</view>
</view>
<view class="card-content">
<view class="label">重要程度:</view>
<view class="content">一般</view>
</view>
<view class="card-content">
<view class="label">意見負責人:</view>
<view class="content">張勝男</view>
</view>
<view class="card-content">
<view class="label">意見來源:</view>
<view class="content">電話</view>
</view>
<view class="card-content">
<view class="label">投訴人:</view>
<view class="content">劉元</view>
</view>
<view class="card-content">
<view class="label">聯絡電話:</view>
<view class="content">15874523697</view>
</view>
<view class="card-content">
<view class="label">電郵地址:</view>
<view class="content">5474112@dr.com</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
pageBack() {
uni.navigateBack()
},
toInfo() {
uni.redirectTo({
url: '/pages/opinion/detail'
})
},
}
}
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.page {
padding-bottom: 50rpx;
}
.top {
padding-top: 107rpx;
.top-title {
font-size: 32rpx;
padding-top: 29rpx;
}
.top-info {
font-size: 26rpx;
width: 470rpx;
text-align: center;
padding-top: 26rpx;
}
}
.btns-box {
width: 470rpx;
padding-top: 50rpx;
padding-bottom: 50rpx;
}
.pub-btn {
min-width: 190rpx;
}
// .pub-card .card-content{
// color: #999;
// }
// .pub-card .card-content .content {
// color: #999;
// }
</style>
\ No newline at end of file
<template>
<view class="page full">
<view class="top flex flex-col flex-items-center">
<image src="../../static/images/logo.png" style="width: 114rpx;height: 114rpx;" mode=""></image>
<view class="visin">員工端V1.0.0</view>
</view>
<view class="menu-list">
<view class="menu-item flex-between " @click="toAgreement">
<text class="text">用户协议</text>
<uni-icons type="right" size="18" style="margin-left: 10rpx;"></uni-icons>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
toAgreement() {
uni.navigateTo({
url: '/pages/user/agreement'
})
}
}
}
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.menu-list {
width: 100%;
margin-bottom: 20rpx;
.menu-item {
width: 100%;
min-height: 100rpx;
box-sizing: border-box;
padding-left: 35rpx;
padding-right: 27rpx;
background-color: #fff;
color: #666;
}
}
.visin {
padding-top: 16rpx;
}
.top {
padding: 66rpx 00 48rpx 0;
}
</style>
\ No newline at end of file
<template>
<view class="page full">
<view class="areement">
<view class="title">使用條款及用戶協議</view>
<view class="content">
詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字詳情文字
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.title {
padding: 50rpx 0;
font-weight: bold;
font-size: 28rpx;
}
.areement{
padding: 0 30rpx;
}
</style>
\ No newline at end of file
<template>
<view>
<view class="page full ">
<view class="header">
<view class="header-title">我的</view>
<view class="header-content flex-between">
<view class="content">
<view class="name">张海</view>
<view class="job">管理干事</view>
<view class="dept">客服部</view>
</view>
<view class="avatar flex-center">
<image src="../../static/images/avatar.png" style="width: 102rpx;height: 115rpx;" mode=""></image>
</view>
</view>
</view>
<view class="menu-list">
<view class="menu-item flex-between bd-bt" @click="toUserInfo">
<view class="menu-item-left flex-items-center">
<image src="../../static/images/userinfo.png" style="width:28rpx;height: 28rpx;" mode=""></image>
<text class="text">个人资料</text>
</view>
<uni-icons type="right" size="18" style="margin-left: 10rpx;"></uni-icons>
</view>
<view class="menu-item flex-between " @click="toAboutUs">
<view class="menu-item-left flex-items-center">
<image src="../../static/images/aboutus.png" style="width:28rpx;height: 28rpx;" mode=""></image>
<text class="text">关于我们</text>
</view>
<uni-icons type="right" size="18" style="margin-left: 10rpx;"></uni-icons>
</view>
</view>
<view class="menu-list">
<view class="menu-item flex-between bd-bt">
<view class="menu-item-left flex-items-center">
<image src="../../static/images/checkupdate.png" style="width:28rpx;height: 28rpx;" mode=""></image>
<text class="text">检查更新</text>
</view>
<view class="menu-item-right flex-items-center">
<text class="text">v1.0.0</text>
<uni-icons type="right" size="18" style="margin-left: 10rpx;"></uni-icons>
</view>
</view>
<view class="menu-item flex-between ">
<view class="menu-item-left flex-items-center">
<image src="../../static/images/clear.png" style="width:28rpx;height: 28rpx;" mode=""></image>
<text class="text">清除缓存</text>
</view>
<view class="menu-item-right flex-items-center">
<text class="text">2.3M</text>
<uni-icons type="right" size="18" style="margin-left: 10rpx;"></uni-icons>
</view>
</view>
</view>
<view class="out-login flex-center" @click="loginOut">退出登录</view>
</view>
</template>
......@@ -8,15 +59,118 @@
export default {
data() {
return {
}
},
methods: {
toUserInfo() {
uni.navigateTo({
url: '/pages/user/userInfo'
})
},
toAboutUs() {
uni.navigateTo({
url: '/pages/user/aboutUs'
})
},
loginOut() {
uni.redirectTo({
url: '/pages/login/login/login'
})
}
}
}
</script>
<style>
<style lang="less" scoped>
@import url('@/style/index.less');
.header {
width: 750rpx;
height: 440rpx;
opacity: 1;
background: linear-gradient(203.46deg, rgba(50, 186, 236, 1) 0%, rgba(181, 235, 255, 1) 100%);
padding: 0 50rpx;
padding-top: 108rpx;
box-sizing: border-box;
.header-title {
margin: 0 auto;
text-align: center;
font-size: 34rpx;
line-height: 46rpx;
color: #000;
}
.content {
color: #fff;
}
.header-content {
padding-top: 50rpx;
.name {
font-size: 32rpx;
font-weight: bold;
line-height: 45rpx;
}
.job {
font-size: 24rpx;
padding-top: 20rpx;
}
.dept {
font-size: 28rpx;
padding-top: 20rpx;
}
}
</style>
.avatar {
width: 172rpx;
height: 172rpx;
opacity: 1;
background: rgba(255, 255, 255, 1);
border-radius: 50%;
}
}
.menu-list {
width: 100%;
margin-bottom: 20rpx;
.menu-item {
width: 100%;
height: 100rpx;
box-sizing: border-box;
padding-left: 35rpx;
padding-right: 27rpx;
background-color: #fff;
color: #666;
.text {
padding-left: 20rpx;
}
}
}
.out-login {
margin: 200rpx auto;
width: 560rpx;
height: 88rpx;
border-radius: 8rpx;
background: #FFFFFF;
border: 2rpx solid #32BAEC;
font-size: 28rpx;
line-height: 39.2rpx;
color: rgba(50, 186, 236, 1);
}
</style>
\ No newline at end of file
<template>
<view class="page full">
<view class="menu-list">
<view class="menu-item flex-between bd-bt">
<view class="menu-item-left flex-items-center">
<text class="text">头像</text>
</view>
<view class="avatar flex-center">
<image src="../../static/images/avatar.png" style="width: 102rpx;height: 115rpx;" mode=""></image>
</view>
</view>
</view>
<view class="menu-list">
<view class="menu-item flex-between bd-bt">
<text class="text">姓名</text>
<text class="text">张海</text>
</view>
<view class="menu-item flex-between bd-bt">
<text class="text">手机号</text>
<text class="text">15278963254</text>
</view>
<view class="menu-item flex-between bd-bt">
<text class="text">部门</text>
<text class="text">客服部</text>
</view>
<view class="menu-item flex-between bd-bt">
<text class="text">岗位</text>
<text class="text">管理幹事</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
@import url('@/style/index.less');
.page {
padding-top: 20rpx;
}
.menu-list {
width: 100%;
margin-bottom: 20rpx;
.menu-item {
width: 100%;
min-height: 100rpx;
box-sizing: border-box;
padding-left: 35rpx;
padding-right: 27rpx;
background-color: #fff;
color: #666;
.text {
padding-left: 20rpx;
}
.avatar {
width: 146rpx;
height: 146rpx;
opacity: 1;
background: #EDEDED;
border-radius: 50%;
margin: 12rpx 0;
}
}
}
</style>
\ No newline at end of file
static/images/aboutus.png

547 Bytes

static/images/avatar.png

1.31 KB

static/images/check-list.png

898 Bytes

static/images/checkupdate.png

492 Bytes

static/images/clear.png

498 Bytes

Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment