parent
a345bf1d92
commit
64da919969
@ -1,353 +1,380 @@
|
||||
<template>
|
||||
<view class="info">
|
||||
<u-navbar title="工单详情" :autoBack="true" :bgColor="background" titleStyle="color:#fff" leftIconColor="#fff"
|
||||
:placeholder="true">
|
||||
</u-navbar>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">工单状态:</view>
|
||||
<view class="cell-value state">
|
||||
<image v-if="info.case_state == 1 "
|
||||
src="http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_wtg@2x.png" mode="widthFix">
|
||||
</image>
|
||||
<image v-if="info.case_state == 2 "
|
||||
src="http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_ytg@2x.png" mode="widthFix">
|
||||
</image>
|
||||
<text :class="'caseState'+info.case_state">{{info.case_state == 1 ? '待处理' : '已处理' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规类型:</view>
|
||||
<view class="cell-value type">{{iconTitle[info.eventname]}}</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">所属单位:</view>
|
||||
<view class="cell-value">盛泽</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规图片:</view>
|
||||
</view>
|
||||
<view class="canvas-box">
|
||||
<image :src="Image" mode="aspectFit" @click="showIamge(info.photo)"></image>
|
||||
<div class="redBorder" v-show="imglabel.length>0"
|
||||
:style="{height:item.heightBox +'rpx',width:item.widthBox+'rpx',left:item.left+'rpx',top:item.top+'rpx'}"
|
||||
v-for="(item,i) in imglabel" :key="i">
|
||||
<div class="kexin">
|
||||
<span>{{item.kexin}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
<view v-show="info.case_state == 2">
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">处理图片:</view>
|
||||
</view>
|
||||
<view class="state2-img">
|
||||
<img :src="info.handlephoto" alt="" @click="showIamge(info.handlephoto)">
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">备注:</view>
|
||||
<view class="cell-value">
|
||||
{{info.detail}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规时间:</view>
|
||||
<view class="cell-value">
|
||||
{{info.create_time}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规地点:</view>
|
||||
<view class="cell-value address">
|
||||
{{info.address}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="map-box"> -->
|
||||
<map id="map" style="width: 750rpx; height: 260px;" :latitude="latitude" :longitude="longitude"
|
||||
subkey="TYBBZ-A2AKV-MLZPW-UFNQI-HKNVE-BEFZH" :markers="markers"></map>
|
||||
<!-- <cover-view>
|
||||
<view class="info">
|
||||
<u-navbar
|
||||
title="工单详情"
|
||||
:autoBack="true"
|
||||
:bgColor="background"
|
||||
titleStyle="color:#fff"
|
||||
leftIconColor="#fff"
|
||||
:placeholder="true"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">工单状态:</view>
|
||||
<view class="cell-value state">
|
||||
<image
|
||||
v-if="info.case_state == 1"
|
||||
src="http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_wtg@2x.png"
|
||||
mode="widthFix"
|
||||
>
|
||||
</image>
|
||||
<image
|
||||
v-if="info.case_state == 2"
|
||||
src="http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_ytg@2x.png"
|
||||
mode="widthFix"
|
||||
>
|
||||
</image>
|
||||
<text :class="'caseState' + info.case_state">{{
|
||||
info.case_state == 1 ? "待处理" : "已处理"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规类型:</view>
|
||||
<view class="cell-value type">{{ iconTitle[info.eventname] }}</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">所属单位:</view>
|
||||
<view class="cell-value">盛泽</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规图片:</view>
|
||||
</view>
|
||||
<view class="canvas-box">
|
||||
<image
|
||||
:src="Image"
|
||||
mode="aspectFit"
|
||||
@click="showIamge(info.photo)"
|
||||
></image>
|
||||
<div
|
||||
class="redBorder"
|
||||
v-show="imglabel.length > 0"
|
||||
:style="{
|
||||
height: item.heightBox + 'rpx',
|
||||
width: item.widthBox + 'rpx',
|
||||
left: item.left + 'rpx',
|
||||
top: item.top + 'rpx',
|
||||
}"
|
||||
v-for="(item, i) in imglabel"
|
||||
:key="i"
|
||||
>
|
||||
<div class="kexin">
|
||||
<span>{{ item.kexin }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
<view v-show="info.case_state == 2">
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">处理图片:</view>
|
||||
</view>
|
||||
<view class="state2-img">
|
||||
<img
|
||||
:src="info.handlephoto"
|
||||
alt=""
|
||||
@click="showIamge(info.handlephoto)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">备注:</view>
|
||||
<view class="cell-value">
|
||||
{{ info.detail }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规时间:</view>
|
||||
<view class="cell-value">
|
||||
{{ info.create_time }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-cell">
|
||||
<view class="cell-lable">违规地点:</view>
|
||||
<view class="cell-value address">
|
||||
{{ info.address }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="map-box"> -->
|
||||
<map
|
||||
id="map"
|
||||
style="width: 750rpx; height: 260px"
|
||||
:latitude="latitude"
|
||||
:longitude="longitude"
|
||||
subkey="TYBBZ-A2AKV-MLZPW-UFNQI-HKNVE-BEFZH"
|
||||
:markers="markers"
|
||||
></map>
|
||||
<!-- <cover-view>
|
||||
导航
|
||||
</cover-view> -->
|
||||
<!-- <view class="map_btn" @click="getLoaction()">
|
||||
<!-- <view class="map_btn" @click="getLoaction()">
|
||||
<button>导航</button>
|
||||
</view> -->
|
||||
<!-- </view> -->
|
||||
<cover-view class="submit" @click="clickForm()" v-show="info.case_state == 1 ">
|
||||
<!-- <submit title="提交整改" /> -->
|
||||
提交
|
||||
</cover-view>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
<cover-view
|
||||
class="submit"
|
||||
@click="clickForm()"
|
||||
v-show="info.case_state == 1"
|
||||
>
|
||||
<!-- <submit title="提交整改" /> -->
|
||||
提交
|
||||
</cover-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCaseInfo
|
||||
} from '@/api/work/index.js'
|
||||
import submit from '@/components/subBottom/subBottom.vue'
|
||||
import iconTitle from '@/utils/iconType.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
submit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
color: '#ffffff',
|
||||
backShow: true,
|
||||
background: 'url(http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/img@2x.png)',
|
||||
latitude: undefined,
|
||||
longitude: undefined,
|
||||
scale: 7,
|
||||
height: null,
|
||||
infoId: null,
|
||||
iconTitle: iconTitle,
|
||||
info: {},
|
||||
markers: [],
|
||||
Image: '',
|
||||
imglabel: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 阅览照片
|
||||
showIamge(url) {
|
||||
let list = []
|
||||
list[0] = url;
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: list,
|
||||
|
||||
})
|
||||
},
|
||||
clickForm() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/workForm/workForm?id=${this.info.id}`
|
||||
})
|
||||
},
|
||||
//获取详情
|
||||
getInfo() {
|
||||
getCaseInfo(this.infoId).then(res => {
|
||||
this.info = res.data
|
||||
// console.log('数据详情', this.info)
|
||||
this.latitude = this.info.lat,
|
||||
this.longitude = this.info.lng,
|
||||
this.Image = this.info.photo
|
||||
if (this.info.zb) {
|
||||
let zb = JSON.parse(this.info.zb)
|
||||
zb.forEach((item, index) => {
|
||||
this.imglabel[index] = {
|
||||
widthBox: (item[2] - item[0]) / 2.56,
|
||||
heightBox: (item[3] - item[1]) / 2.56,
|
||||
left: item[0] / 2.56,
|
||||
top: item[1] / 2.56,
|
||||
kexin: item[4]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.markers = [{
|
||||
id: this.info.id,
|
||||
latitude: this.info.lat,
|
||||
longitude: this.info.lng,
|
||||
width: 25,
|
||||
height: 30,
|
||||
iconPath: 'http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/map_location@2x.png'
|
||||
}]
|
||||
})
|
||||
},
|
||||
|
||||
//调用导航软件服务
|
||||
getLoaction() {
|
||||
uni.openLocation({
|
||||
latitude: parseInt(this.latitude),
|
||||
longitude: parseInt(this.longitude),
|
||||
name: this.info.address,
|
||||
address: this.info.address
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
onLoad(query) {
|
||||
this.infoId = query.id
|
||||
|
||||
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.imglabel = []
|
||||
this.getInfo()
|
||||
},
|
||||
|
||||
}
|
||||
import { getCaseInfo } from "@/api/work/index.js";
|
||||
import submit from "@/components/subBottom/subBottom.vue";
|
||||
import iconTitle from "@/utils/iconType.js";
|
||||
export default {
|
||||
components: {
|
||||
submit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
color: "#ffffff",
|
||||
backShow: true,
|
||||
background:
|
||||
"url(http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/img@2x.png)",
|
||||
latitude: undefined,
|
||||
longitude: undefined,
|
||||
scale: 7,
|
||||
height: null,
|
||||
infoId: null,
|
||||
iconTitle: iconTitle,
|
||||
info: {},
|
||||
markers: [],
|
||||
Image: "",
|
||||
imglabel: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 阅览照片
|
||||
showIamge(url) {
|
||||
let list = [];
|
||||
list[0] = url;
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: list,
|
||||
});
|
||||
},
|
||||
clickForm() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/workForm/workForm?id=${this.info.id}`,
|
||||
});
|
||||
},
|
||||
//获取详情
|
||||
getInfo() {
|
||||
getCaseInfo(this.infoId).then((res) => {
|
||||
this.info = res.data;
|
||||
// console.log('数据详情', this.info)
|
||||
(this.latitude = this.info.lat),
|
||||
(this.longitude = this.info.lng),
|
||||
(this.Image = this.info.photo);
|
||||
if (this.info.zb) {
|
||||
let zb = JSON.parse(this.info.zb);
|
||||
zb.forEach((item, index) => {
|
||||
this.imglabel[index] = {
|
||||
widthBox: (item[2] - item[0]) / 2.56,
|
||||
heightBox: (item[3] - item[1]) / 2.56,
|
||||
left: item[0] / 2.56,
|
||||
top: item[1] / 2.56,
|
||||
kexin: item[4],
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
this.markers = [
|
||||
{
|
||||
id: this.info.id,
|
||||
latitude: this.info.lat,
|
||||
longitude: this.info.lng,
|
||||
width: 25,
|
||||
height: 30,
|
||||
iconPath:
|
||||
"http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/map_location@2x.png",
|
||||
},
|
||||
];
|
||||
});
|
||||
},
|
||||
|
||||
//调用导航软件服务
|
||||
getLoaction() {
|
||||
uni.openLocation({
|
||||
latitude: parseInt(this.latitude),
|
||||
longitude: parseInt(this.longitude),
|
||||
name: this.info.address,
|
||||
address: this.info.address,
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
onLoad(query) {
|
||||
this.infoId = query.id;
|
||||
},
|
||||
onShow() {
|
||||
this.imglabel = [];
|
||||
this.getInfo();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120rpx;
|
||||
|
||||
}
|
||||
|
||||
.info-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item-cell {
|
||||
min-height: 134rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: 1rpx solid #ECECEC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding-left: 37rpx;
|
||||
|
||||
.cell-lable {
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #303234;
|
||||
width: 160rpx;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cell-value {
|
||||
flex: 1;
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #8B9097;
|
||||
}
|
||||
|
||||
.state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: block;
|
||||
margin-right: 14rpx;
|
||||
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: 500;
|
||||
color: #F98552;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.type {
|
||||
color: #3B76EE;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.beizhu {
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 10rpx;
|
||||
padding-right: 20rpx;
|
||||
line-height: 60rpx;
|
||||
min-height: 250rpx;
|
||||
}
|
||||
|
||||
.address {
|
||||
box-sizing: border-box;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.state2-img {
|
||||
height: 421rpx;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-box {
|
||||
// margin: 20rpx 0;
|
||||
height: 421rpx;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.redBorder {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
border: 2rpx solid red;
|
||||
|
||||
.kexin {
|
||||
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
background: black;
|
||||
color: red;
|
||||
position: absolute;
|
||||
top: -40rpx;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// map {
|
||||
// width: 750rpx !important;
|
||||
// height: 495rpx !important;
|
||||
// }
|
||||
|
||||
.map_btn {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
width: 140rpx;
|
||||
height: 68rpx;
|
||||
top: 40rpx;
|
||||
right: 40rpx;
|
||||
|
||||
button {
|
||||
font-size: 34rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 70rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 34rpx;
|
||||
background: linear-gradient(90deg, #36B751, #36B77F);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0%;
|
||||
z-index: 1000;
|
||||
border-top: 1rpx solid #ECECEC;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.caseState1 {
|
||||
color: #FF4E77 !important;
|
||||
}
|
||||
|
||||
.caseState2 {
|
||||
color: #57B800 !important;
|
||||
}
|
||||
page {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item-cell {
|
||||
min-height: 134rpx;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1rpx solid #ececec;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding-left: 37rpx;
|
||||
|
||||
.cell-lable {
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #303234;
|
||||
width: 160rpx;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
|
||||
.cell-value {
|
||||
flex: 1;
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #8b9097;
|
||||
}
|
||||
|
||||
.state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: block;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: 500;
|
||||
color: #f98552;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
color: #3b76ee;
|
||||
}
|
||||
|
||||
.beizhu {
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 10rpx;
|
||||
padding-right: 20rpx;
|
||||
line-height: 60rpx;
|
||||
min-height: 250rpx;
|
||||
}
|
||||
|
||||
.address {
|
||||
box-sizing: border-box;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.state2-img {
|
||||
height: 421rpx;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-box {
|
||||
// margin: 20rpx 0;
|
||||
height: 421rpx;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.redBorder {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
border: 2rpx solid red;
|
||||
|
||||
.kexin {
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
background: black;
|
||||
color: red;
|
||||
position: absolute;
|
||||
top: -40rpx;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// map {
|
||||
// width: 750rpx !important;
|
||||
// height: 495rpx !important;
|
||||
// }
|
||||
|
||||
.map_btn {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
width: 140rpx;
|
||||
height: 68rpx;
|
||||
top: 40rpx;
|
||||
right: 40rpx;
|
||||
|
||||
button {
|
||||
font-size: 34rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 70rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 34rpx;
|
||||
background: linear-gradient(90deg, #36b751, #36b77f);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0%;
|
||||
z-index: 1000;
|
||||
border-top: 1rpx solid #ececec;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.caseState1 {
|
||||
color: #ff4e77 !important;
|
||||
}
|
||||
|
||||
.caseState2 {
|
||||
color: #57b800 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,237 +1,237 @@
|
||||
<template>
|
||||
<view class="mine">
|
||||
<view class="logo-bg">
|
||||
<view class="user-box">
|
||||
<view class="user-icon">
|
||||
<image v-if="avatar" @click="handleToAvatar" :src="avatar" mode="widthFix">
|
||||
</image>
|
||||
</view>
|
||||
<view class="user-work">
|
||||
<view class="user-data">
|
||||
<view class="user-name">
|
||||
{{ name }}
|
||||
</view>
|
||||
<view class="user-zhiwu">网格员</view>
|
||||
</view>
|
||||
<view class="address">
|
||||
<view class="add-icon"></view>
|
||||
<view class="add-text">江苏省苏州市吴江区盛泽镇</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="info"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cell">
|
||||
<view class="cell-item" @click="handleToEditInfo">
|
||||
<view class="icon-left"></view>
|
||||
<view class="cell-title">修改密码</view>
|
||||
<view class="icon-r"></view>
|
||||
</view>
|
||||
<view class="cell-item">
|
||||
<view class="icon-left shouce"></view>
|
||||
<view class="cell-title">操作手册</view>
|
||||
<view class="icon-r"></view>
|
||||
</view>
|
||||
<view class="cell-item">
|
||||
<view class="icon-left systemicon"></view>
|
||||
<view class="cell-title">关于系统</view>
|
||||
<view class="icon-r"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="outlogo" @click="handleLogout">
|
||||
退出登录
|
||||
</view>
|
||||
</view>
|
||||
<view class="mine">
|
||||
<view class="logo-bg">
|
||||
<view class="user-box">
|
||||
<view class="user-icon">
|
||||
<image
|
||||
v-if="avatar"
|
||||
@click="handleToAvatar"
|
||||
:src="avatar"
|
||||
mode="widthFix"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
<view class="user-work">
|
||||
<view class="user-data">
|
||||
<view class="user-name">
|
||||
{{ name }}
|
||||
</view>
|
||||
<view class="user-zhiwu">网格员</view>
|
||||
</view>
|
||||
<view class="address">
|
||||
<view class="add-icon"></view>
|
||||
<view class="add-text">江苏省苏州市吴江区盛泽镇</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="info"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cell">
|
||||
<view class="cell-item" @click="handleToEditInfo">
|
||||
<view class="icon-left"></view>
|
||||
<view class="cell-title">修改密码</view>
|
||||
<view class="icon-r"></view>
|
||||
</view>
|
||||
<view class="cell-item">
|
||||
<view class="icon-left shouce"></view>
|
||||
<view class="cell-title">操作手册</view>
|
||||
<view class="icon-r"></view>
|
||||
</view>
|
||||
<view class="cell-item">
|
||||
<view class="icon-left systemicon"></view>
|
||||
<view class="cell-title">关于系统</view>
|
||||
<view class="icon-r"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="outlogo" @click="handleLogout"> 退出登录 </view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import storage from '@/utils/storage'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: this.$store.state.user.name,
|
||||
version: getApp().globalData.config.appInfo.version
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
avatar() {
|
||||
return this.$store.state.user.avatar
|
||||
},
|
||||
windowHeight() {
|
||||
return uni.getSystemInfoSync().windowHeight - 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToAvatar() {
|
||||
this.$tab.navigateTo('/pages/mine/avatar/index')
|
||||
},
|
||||
handleToEditInfo() {
|
||||
this.$tab.navigateTo('/pages/mine/info/edit')
|
||||
},
|
||||
handleLogout() {
|
||||
this.$modal.confirm('确定注销并退出系统吗？').then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
this.$tab.reLaunch('/pages/index')
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
import storage from "@/utils/storage";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: this.$store.state.user.name,
|
||||
version: getApp().globalData.config.appInfo.version,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
avatar() {
|
||||
return this.$store.state.user.avatar;
|
||||
},
|
||||
windowHeight() {
|
||||
return uni.getSystemInfoSync().windowHeight - 50;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleToAvatar() {
|
||||
this.$tab.navigateTo("/pages/mine/avatar/index");
|
||||
},
|
||||
handleToEditInfo() {
|
||||
this.$tab.navigateTo("/pages/mine/info/edit");
|
||||
},
|
||||
handleLogout() {
|
||||
this.$modal.confirm("确定注销并退出系统吗？").then(() => {
|
||||
this.$store.dispatch("LogOut").then(() => {
|
||||
this.$tab.reLaunch("/pages/index");
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.logo-bg {
|
||||
height: 600rpx;
|
||||
width: 100%;
|
||||
background-image: url("http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/img_pic@2x.png");
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.user-icon {
|
||||
width: 146rpx;
|
||||
height: 146rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
padding: 6rpx;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
border-radius: 50%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.user-work {
|
||||
box-sizing: border-box;
|
||||
padding-left: 48rpx;
|
||||
|
||||
.user-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.add-icon {
|
||||
height: 32rpx;
|
||||
width: 32rpx;
|
||||
background: url('http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_location@2x.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.add-text {
|
||||
width: 344rpx;
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #B7E0FF;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 44rpx;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.user-zhiwu {
|
||||
margin-left: 18rpx;
|
||||
width: 110rpx;
|
||||
height: 40rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
background: rgba(5, 37, 78, 0.6);
|
||||
border: 1rpx solid #51D7EB;
|
||||
border-radius: 4rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #BDD3F0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
height: 20rpx;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.cell {
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.cell-item {
|
||||
height: 124rpx;
|
||||
border-bottom: 1rpx solid #ECECEC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 46rpx;
|
||||
|
||||
.icon-left {
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
background: url('http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/cell1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.shouce {
|
||||
background: url('http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_2@2x.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.systemicon {
|
||||
background: url('http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_3@2x.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.cell-title {
|
||||
flex: 1;
|
||||
font-size: 35rpx;
|
||||
font-weight: 400;
|
||||
color: #303234;
|
||||
box-sizing: border-box;
|
||||
padding-left: 25rpx;
|
||||
}
|
||||
|
||||
.icon-r {
|
||||
width: 20rpx;
|
||||
height: 33rpx;
|
||||
background: url('http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/right.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outlogo {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
margin-top: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 400;
|
||||
color: #DA3135;
|
||||
}
|
||||
.logo-bg {
|
||||
height: 600rpx;
|
||||
width: 100%;
|
||||
background-image: url("http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/img_pic@2x.png");
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.user-icon {
|
||||
width: 146rpx;
|
||||
height: 146rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
padding: 6rpx;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
border-radius: 50%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.user-work {
|
||||
box-sizing: border-box;
|
||||
padding-left: 48rpx;
|
||||
|
||||
.user-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.add-icon {
|
||||
height: 32rpx;
|
||||
width: 32rpx;
|
||||
background: url("http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_location@2x.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.add-text {
|
||||
width: 344rpx;
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #b7e0ff;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 44rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.user-zhiwu {
|
||||
margin-left: 18rpx;
|
||||
width: 110rpx;
|
||||
height: 40rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
background: rgba(5, 37, 78, 0.6);
|
||||
border: 1rpx solid #51d7eb;
|
||||
border-radius: 4rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #bdd3f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
height: 20rpx;
|
||||
border: 1px solid red;
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.cell-item {
|
||||
height: 124rpx;
|
||||
border-bottom: 1rpx solid #ececec;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 46rpx;
|
||||
|
||||
.icon-left {
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
background: url("http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/cell1.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.shouce {
|
||||
background: url("http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_2@2x.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.systemicon {
|
||||
background: url("http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/icon_3@2x.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.cell-title {
|
||||
flex: 1;
|
||||
font-size: 35rpx;
|
||||
font-weight: 400;
|
||||
color: #303234;
|
||||
box-sizing: border-box;
|
||||
padding-left: 25rpx;
|
||||
}
|
||||
|
||||
.icon-r {
|
||||
width: 20rpx;
|
||||
height: 33rpx;
|
||||
background: url("http://www.jichuanglanhai.com/demo/wujiangtaishi-app-file/img/right.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outlogo {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
margin-top: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 400;
|
||||
color: #da3135;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
import Vue from "vue";
|
||||
import {
|
||||
CaseList
|
||||
} from '@/api/work/index.js';
|
||||
const mgsData = {
|
||||
state: {
|
||||
total: 0,
|
||||
|
||||
},
|
||||
mutations: {
|
||||
//修改list列表总数
|
||||
changeTotal(state, data) {
|
||||
state.total = data
|
||||
},
|
||||
|
||||
sumTotal(state, data) {
|
||||
if (data > state.total) {
|
||||
uni.showModal({
|
||||
title: '消息',
|
||||
content: '您有新的工单需要处理',
|
||||
showCancel: false,
|
||||
confirmText: '我知道了',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.switchTab({
|
||||
url: '/pages/work/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
export default mgsData
|
||||
Loading…
Reference in new issue