xthyg
/
jq_miniApp
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui修改

Browse Source
master
rose 2 years ago
parent 0b01a5abdb
commit a14471c713
8 changed files with 289 additions and 259 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 57
      components/evan-steps/evan-step.vue
  2. 4
      pages/login.vue
  3. 11
      static/scss/custom.scss
  4. 32
      subPackDeatil/touristPortrait/touristPortrait.vue
  5. 2
      subPackMine/info/edit.vue
  6. 25
      subPackMine/info/index.vue
  7. 2
      subPackWork/emergencyPlan/emergencyPlan.vue
  8. 111
      subPackWork/myReport/reportDetail.vue

57
components/evan-steps/evan-step.vue
Unescape View File

@ -4,11 +4,11 @@
<slot name="icon"></slot>
</view>
<view class="evan-step__icon-wrapper" :class="'evan-step__icon-wrapper--'+direction" v-else-if="icon">
<uni-icons :type="icon" size="22" :color="customIconColor" class="evan-step__custom-icon" :class="'evan-step__custom-icon--'+direction"></uni-icons>
<uni-icons :type="icon" size="22" :color="'#fff'" class="evan-step__custom-icon" :class="'evan-step__custom-icon--'+direction"></uni-icons>
</view>
<view v-else class="evan-step__circle" :class="['evan-step__circle--'+direction,'evan-step__circle--'+currentStatus]"
:style="{borderColor:circleStyle.borderColor,backgroundColor:circleStyle.backgroundColor}">
<uni-icons v-if="currentStatus==='finish'" type="checkmarkempty" :color="primaryColor" :size="circleIconSize"></uni-icons>
<uni-icons v-if="currentStatus==='finish'" type="checkmarkempty" :color="'rgba(255,255,255,.5)'" :size="circleIconSize"></uni-icons>
<uni-icons v-else-if="currentStatus==='error'" type="closeempty" color="#fff" :size="circleIconSize"></uni-icons>
<text class="evan-step__circle__text" :class="'evan-step__circle__text--'+currentStatus" :style="{color:circleStyle.color}"
v-else>{{index+1}}</text>
@ -111,21 +111,21 @@
switch (this.currentStatus) {
case 'finish':
return {
backgroundColor: '#fff',
borderColor: this.primaryColor,
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.1)',
color: this.primaryColor
}
case 'process':
return {
backgroundColor: this.primaryColor,
borderColor: this.primaryColor,
backgroundColor: 'rgba(255,255,255,.3)',
borderColor: 'rgba(255,255,255,1)',
color: '#fff'
}
case 'wait':
return {
backgroundColor: '#ccc',
borderColor: '#ccc',
color: '#fff'
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.1)',
color: 'rgba(255,255,255,.5)'
}
case 'error':
return {
@ -135,66 +135,66 @@
}
default:
return {
backgroundColor: '#fff',
borderColor: this.primaryColor,
color: this.primaryColor
backgroundColor: 'rgba(255,255,255,.1)',
borderColor: 'rgba(255,255,255,.1)',
color: '#fff'
}
}
},
titleColor() {
switch (this.currentStatus) {
case 'finish':
return 'rgba(0,0,0,0.65)'
return 'rgba(255,255,255,0.65)'
case 'process':
return 'rgba(0,0,0,0.85)'
return 'rgba(255,255,255,0.85)'
case 'wait':
return 'rgba(0,0,0,0.45)'
return 'rgba(255,255,255,0.45)'
case 'error':
return this.errorColor
default:
return 'rgba(0,0,0,0.85)'
return 'rgba(255,255,255,0.85)'
}
},
descriptionColor() {
switch (this.currentStatus) {
case 'finish':
return 'rgba(0,0,0,0.45)'
return 'rgba(255,255,255,0.45)'
case 'process':
return 'rgba(0,0,0,0.65)'
return 'rgba(255,255,255,0.65)'
case 'wait':
return 'rgba(0,0,0,0.45)'
return 'rgba(255,255,255,0.45)'
case 'error':
return this.errorColor
default:
return 'rgba(0,0,0,0.85)'
return 'rgba(255,255,255,0.85)'
}
},
customIconColor() {
switch (this.currentStatus) {
case 'finish':
return this.primaryColor
return 'rgba(255,255,255,0.85)'
case 'process':
return this.primaryColor
return 'rgba(255,255,255,0.85)'
case 'wait':
return '#ccc'
case 'error':
return this.errorColor
default:
return this.primaryColor
return 'rgba(255,255,255,0.85)'
}
},
lineColor() {
switch (this.nextStatus) {
case 'finish':
return this.primaryColor
return 'rgba(255,255,255,0.3)'
case 'process':
return this.primaryColor
return 'rgba(255,255,255,0.3)'
case 'wait':
return '#ddd'
return 'rgba(255,255,255,0.3)'
case 'error':
return this.errorColor
default:
return this.primaryColor
return 'rgba(255,255,255,0.3)'
}
},
contentHeight() {
@ -464,4 +464,7 @@
.evan-step__content__description--horizontal {
text-align: center;
}
.step-items:first-child {
margin-left: 400rpx;
}
</style>

4
pages/login.vue
Unescape View File

@ -21,8 +21,8 @@
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
</view >
</view>
<view class="action-btn">
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
<view class="v-m-t20">
<button @click="handleLogin" class="v-btn v-btn-large block">登录</button>
</view>
</view>

11
static/scss/custom.scss
Unescape View File

@ -15,6 +15,9 @@
}
.v-m-t10{
margin-top: 20rpx!important;
}
.v-m-t20{
margin-top: 40rpx!important;
}
.v-m-p10{
padding-top: 20rpx!important;
@ -119,7 +122,7 @@ top:0;left: 0; width: 100%;background: linear-gradient(to right,rgba(54,127,255,
background: #ffffff;
box-shadow: 0 6rpx 20rpx 0 rgba(0,0,0,.05);}
.v-card{
.uni-list--border-top{background-color: #fff!important;}
.v-card-item{padding: 10rpx 0;}
.v-card-content{overflow: hidden;}
@ -128,9 +131,11 @@ top:0;left: 0; width: 100%;background: linear-gradient(to right,rgba(54,127,255,
}
.v-card-image{
width: 120rpx;
height: 120rpx;
height: 120rpx;overflow: hidden;
border: 1px solid rgba(0,0,0,.05);
margin-right: 20px;
image{width: 120rpx;
height: 120rpx;}
}
.v-card-title{
font-size: 32rpx;
@ -325,8 +330,10 @@ button.v-btn-primary[disabled]{color: rgba(255,255,255,1)!important; opacity: .5
color: #fff;
background-color:#367FFF;
}
.v-form{
.tree-pick{width: 100%!important;}
.selected-area{display: inline-block!important;color: rgba(0, 0, 0, 0.3)!important; }
.selected-list{display: inline-block!important;}
.uni-date-x--border{border: none!important;}

32
subPackDeatil/touristPortrait/touristPortrait.vue
Unescape View File

@ -1,50 +1,50 @@
<template>
<view class="detail-container">
<view class="g-body">
<view class="v-page">
<view class="v-card contain">
<!-- 客源地分布统计 -->
<view class="body-item">
<view class="v-card-item"><view class="v-card-box">
<common-title :title="'客源地分布统计'" ></common-title>
<view class="charts-box">
<qiun-data-charts :chartData="chartData" :opts="chartOpts" type="bar" />
</view>
</view>
</view></view>
<!-- 年龄占比 -->
<view class="body-item">
<view class="v-card-item"><view class="v-card-box">
<common-title :title="'年龄占比'" ></common-title>
<view class="charts-box-pie">
<qiun-data-charts :chartData="chartData2" :opts="chartOpts2" type="pie" />
</view>
</view>
</view></view>
<!-- 游客偏好 -->
<view class="body-item">
<view class="v-card-item"><view class="v-card-box">
<common-title :title="'游客偏好'" ></common-title>
<view class="charts-box-pie">
<qiun-data-charts :chartData="chartData3" :opts="chartOpts3" type="pie" />
</view>
</view>
</view></view>
<!-- 职业占比 -->
<view class="body-item">
<view class="v-card-item"><view class="v-card-box">
<common-title :title="'职业占比'" ></common-title>
<view class="charts-box-pie">
<qiun-data-charts :chartData="chartData4" :opts="chartOpts4" type="pie" />
</view>
</view>
</view></view>
<!-- 停留时长 -->
<view class="body-item">
<view class="v-card-item"><view class="v-card-box">
<common-title :title="'停留时长'" ></common-title>
<view class="charts-box-pie">
<qiun-data-charts :chartData="chartData6" :opts="chartOpts6" type="column" />
</view>
</view>
</view></view>
<!-- 学历占比 -->
<view class="body-item">
<view class="v-card-item"><view class="v-card-box">
<common-title :title="'学历占比'" ></common-title>
<view class="charts-box-pie">
<qiun-data-charts :chartData="chartData5" :opts="chartOpts5" type="pie" />
</view>
</view>
</view> </view>
<!-- 出行方式 -->
<view class="body-item">
<view class="v-card-item"><view class="v-card-box">
<common-title :title="'出行方式'" ></common-title>
<view class="charts-box">
<qiun-data-charts
@ -54,7 +54,7 @@
:ontouch="true"
/>
</view>
</view>
</view> </view>
</view>
</view>
</template>

2
subPackMine/info/edit.vue
Unescape View File

@ -1,5 +1,6 @@
<template>
<view class="v-page">
<view class="v-card contain">
<uni-forms ref="form" :model="user" labelWidth="80px" class="v-form">
<uni-forms-item label="用户昵称" name="nickName">
<uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
@ -14,6 +15,7 @@
<uni-data-checkbox v-model="user.sex" :localdata="sexs" />
</uni-forms-item>
</uni-forms>
</view>
<view class="v-page-button contain">
<button class="v-btn-large" type="primary" @click="submit">提交</button>
</view>

25
subPackMine/info/index.vue
Unescape View File

@ -1,18 +1,24 @@
<template>
<view class="container">
<view class="v-page">
<view class="v-card contain">
<view class="v-card-box">
<uni-list>
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="user.phonenumber" />
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" />
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="postGroup" />
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="user.createTime" />
<uni-list-item showExtraIcon="true" title="昵称" :rightText="user.nickName" />
<uni-list-item showExtraIcon="true" title="手机号码" :rightText="user.phonenumber" />
<uni-list-item showExtraIcon="true" title="邮箱" :rightText="user.email" />
<uni-list-item showExtraIcon="true" title="岗位" :rightText="postGroup" />
<uni-list-item showExtraIcon="true" title="角色" :rightText="roleGroup" />
<uni-list-item showExtraIcon="true" title="创建日期" :rightText="user.createTime" />
</uni-list>
</view>
</view>
</view>
</template>
<script>
import { getUserProfile } from "@/api/system/user"
import {
getUserProfile
} from "@/api/system/user"
export default {
data() {
@ -38,7 +44,4 @@
</script>
<style lang="scss">
page {
background-color: #ffffff;
}
</style>

2
subPackWork/emergencyPlan/emergencyPlan.vue
Unescape View File

@ -37,7 +37,7 @@
</view>
<view class="v-card-detail v-m-t8">
<view class="v-ellipsis2"><text
class="v-card-detail-title">预案说明</text>{{ item.description || '-' }}
class="">预案说明：</text>{{ item.description || '-' }}
</view>
</view>
</view>

111
subPackWork/myReport/reportDetail.vue
Unescape View File

@ -1,15 +1,15 @@
<template>
<view class="v-page">
<view class="v-page-bg" style="height: 300rpx;"></view>
<view class="v-card contain">
<view class="v-card-item">
<view class="status-top">
<view>当前处理状态：</view>
<button class="rignt-button" size="mini" @click="goList">处理记录</button>
<button class="v-btn v-btn-primary-b" size="mini" @click="goList">处理记录</button>
</view>
<view class="status-bottom">
<evan-steps :active="datas.status-1" direction="horizontal">
<evan-step class="step-items" v-for="item in processState" :title="item.dictLabel"></evan-step>
<!-- <evan-step title="处警"></evan-step>
<!-- <evan-step title="处警"></evan-step>
<evan-step title="结警"></evan-step>
<evan-step title="归档"></evan-step> -->
</evan-steps>
@ -27,16 +27,21 @@
<uni-list-item title="联系人手机" :rightText="datas.phone || '/'" />
<uni-list-item title="标题" :rightText="datas.title" />
<uni-list-item title="事件位置" :rightText="'经度：'+datas.longitude+',纬度：'+datas.latitude " />
<map class="map" :markers="covers" :longitude="datas.longitude" :latitude="datas.latitude" name="" ></map>
<map class="map" :markers="covers" :longitude="datas.longitude" :latitude="datas.latitude"
name=""></map>
<uni-list-item title="描述" :rightText="datas.description" />
<uni-list-item>
<template v-slot:body>
<text class="slot-box slot-text">现场照片</text>
</template>
<template v-slot:footer>
<view class="image-box" v-if="datas.pathList">
<image class="iamges-list" mode="widthFix" v-for="(item, index) in datas.pathList" :key="index" :src="requestUrl+item" @click="preview(item)"></image>
<q-previewImage ref="previewImage" :urls="datas.pathList" @open="open" @close="close"></q-previewImage>
<view class="" v-if="datas.pathList">
<view class="v-card-image">
<image :mode="'widthFix'" v-for="(item, index) in datas.pathList"
:key="index" :src="requestUrl+item" @click="preview(item)"></image>
</view>
<q-previewImage ref="previewImage" :urls="datas.pathList" @open="open"
@close="close"></q-previewImage>
</view>
</template>
</uni-list-item>
@ -49,15 +54,19 @@
</template>
<script>
import EvanSteps from '@/components/evan-steps/evan-steps.vue';
import EvanStep from '@/components/evan-steps/evan-step.vue';
import UniIcons from '@/components/uni-icons/uni-icons.vue';
import {getEventReportDetail} from '@/api/word/myReport.js'
import {getDicts} from '@/api/system/dict/data.js'
import config from '@/config.js';
const baseUrl = config.baseUrl;
export default {
import EvanSteps from '@/components/evan-steps/evan-steps.vue';
import EvanStep from '@/components/evan-steps/evan-step.vue';
import UniIcons from '@/components/uni-icons/uni-icons.vue';
import {
getEventReportDetail
} from '@/api/word/myReport.js'
import {
getDicts
} from '@/api/system/dict/data.js'
import config from '@/config.js';
const baseUrl = config.baseUrl;
export default {
components: {
EvanSteps,
EvanStep,
@ -78,12 +87,14 @@ export default {
description: '应急演练',
pathList: null
},
processState:[], // 处理状态
processState: [], // 处理状态
id: 0,
covers: [],
videoShow: true, //video组件是否显示
requestUrl: baseUrl,
imgs: ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png', 'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png']
imgs: ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png',
'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png'
]
};
},
onLoad(option) {
@ -93,26 +104,28 @@ export default {
mounted() {
this.getReportType();
},
watch : {
datas:function(val) {
console.log(this.datas )
if(!val.longitude){
watch: {
datas: function(val) {
console.log(this.datas)
if (!val.longitude) {
this.datas.longitude = '/'
}
if(!val.latitude){
if (!val.latitude) {
this.datas.latitude = '/'
}
},
},
methods: {
goList(){
goList() {
uni.navigateTo({
url:'processingRecord?id='+this.id
url: 'processingRecord?id=' + this.id
})
},
preview(url) {
this.imgs = ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png', 'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png']; //设置图片数组
this.imgs = ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png',
'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png'
]; //设置图片数组
this.$nextTick(() => {
this.$refs.previewImage.open(url); // 传入当前选中的图片地址
});
@ -122,10 +135,10 @@ export default {
console.log('当前长按的图片是' + e);
uni.showActionSheet({
itemList: ['转发给朋友', '保存到手机'],
success: function (res) {
success: function(res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
},
fail: function (res) {
fail: function(res) {
console.log(res.errMsg);
}
});
@ -151,11 +164,11 @@ export default {
this.videoShow = true;
},
// 获取上报分类
getReportType(){
getDicts("alarm_status").then(res =>{
if(res.code === 200){
getReportType() {
getDicts("alarm_status").then(res => {
if (res.code === 200) {
let arr = []
res.data.forEach(item =>{
res.data.forEach(item => {
arr.push(item)
})
this.processState = arr
@ -164,9 +177,9 @@ export default {
})
},
// 获取数据详情
getEventReportDetail(id){
getEventReportDetail(id).then(res =>{
if(res.code === 200){
getEventReportDetail(id) {
getEventReportDetail(id).then(res => {
if (res.code === 200) {
this.datas = res.data
let obj = {
longitude: Number(this.datas.longitude),
@ -178,11 +191,11 @@ export default {
})
}
}
};
};
</script>
<style lang="scss" scoped>
.status-top {
.status-top {
display: flex;
align-items: center;
margin: 0 32rpx 20rpx;
@ -194,8 +207,9 @@ export default {
.rignt-button {
margin: 0;
}
}
.status-bottom {
}
.status-bottom {
::v-deep .evan-steps--horizontal {
justify-content: space-evenly;
@ -203,8 +217,9 @@ export default {
font-size: 24rpx;
}
}
}
.content-detail {
}
.content-detail {
.map {
width: 100%;
}
@ -214,17 +229,17 @@ export default {
font-size: 28rpx;
}
.image-box{
.image-box {
display: flex;
flex: 1;
justify-content: flex-end;
height: 120rpx;
.iamges-list{
.iamges-list {
width: 120rpx;
height: 120rpx;
}
}
}
}
.step-items:first-child{
margin-left: 300rpx;
}
</style>
Write Preview
Loading…
Cancel
Save