意见反馈

master
tangyi 2022-03-17 16:19:01 +08:00
commit df78a7b946
28 changed files with 882 additions and 19 deletions

View File

@ -41,5 +41,5 @@
@import url("./commons/animate.min.css"); @import url("./commons/animate.min.css");
/* 动画样式 end */ /* 动画样式 end */
page {background-color: rgba(255, 255, 255, 1);} page {background-color: #f7f7f7;}
</style> </style>

View File

@ -210,4 +210,14 @@ uni-radio .uni-radio-input {border: 1rpx solid #444444;}
transform: scale(.8); transform: scale(.8);
} }
/* 我的页面 */
.my-exit-btn{
height: 88rpx;
line-height: 88rpx;
text-align: center;
border-radius: 88rpx;
background-color: #03affb;
color: #FFFFFF;
margin-top: 40rpx;
}

View File

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3180711 */ font-family: "iconfont"; /* Project id 3180711 */
src: url('https://at.alicdn.com/t/font_3180711_10x4pseyz93d.woff2?t=1647086207249') format('woff2'), src: url('https://at.alicdn.com/t/font_3180711_7fx7wl7itar.woff2?t=1647479558213') format('woff2'),
url('https://at.alicdn.com/t/font_3180711_10x4pseyz93d.woff?t=1647086207249') format('woff'), url('https://at.alicdn.com/t/font_3180711_7fx7wl7itar.woff?t=1647479558213') format('woff'),
url('https://at.alicdn.com/t/font_3180711_10x4pseyz93d.ttf?t=1647086207249') format('truetype'); url('https://at.alicdn.com/t/font_3180711_7fx7wl7itar.ttf?t=1647479558213') format('truetype');
} }
.icon { .icon {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-sandian:before {
content: "\e769";
}
.icon-nothing-collection:before { .icon-nothing-collection:before {
content: "\e610"; content: "\e610";
} }

View File

@ -0,0 +1,566 @@
<template>
<view class="cmd-progress cmd-progress-default" :class="setStatusClass">
<block v-if="type == 'circle' || type == 'dashboard'">
<view class="cmd-progress cmd-progress-default" :class="setStatusClass">
<view class="cmd-progress-inner" :style="setCircleStyle">
<!-- 绘制圈 start -->
<!-- #ifdef H5 -->
<svg viewBox="0 0 100 100" class="cmd-progress-circle">
<path :d="setCirclePath" stroke="#f3f3f3" :stroke-linecap="strokeShape" :stroke-width="strokeWidth"
fill-opacity="0" class="cmd-progress-circle-trail" :style="setCircleTrailStyle"></path>
<path :d="setCirclePath" :stroke-linecap="strokeShape" :stroke-width="strokeWidth" fill-opacity="0" class="cmd-progress-circle-path"
:style="setCirclePathStyle"></path>
</svg>
<!-- #endif -->
<!-- #ifndef H5 -->
<text :style="setCircle"></text>
<!-- #endif -->
<!-- 绘制圈 end -->
<!-- 状态文本 start -->
<block v-if="showInfo">
<text class="cmd-progress-text" :title="setFormat">
<block v-if="status != 'success' && status != 'exception' && setProgress < 100">{{setFormat}}</block>
<!-- #ifdef H5 -->
<svg v-if="status == 'exception'" viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor"
aria-hidden="true">
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
</svg>
<svg v-if="status == 'success' || setProgress == 100" viewBox="64 64 896 896" data-icon="check" width="1em"
height="1em" fill="currentColor" aria-hidden="true" :style="{'color': strokeColor ? strokeColor : ''}">
<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path>
</svg>
<!-- #endif -->
<!-- #ifndef H5 -->
<text v-if="status == 'exception' || status == 'success' || setProgress == 100" :style="setCircleIcon"></text>
<!-- #endif -->
</text>
</block>
<!-- 状态文本 end -->
</view>
</view>
</block>
<block v-if="type == 'line'">
<!-- 进度条 start -->
<view class="cmd-progress-outer">
<view class="cmd-progress-inner" :style="{'border-radius': strokeShape == 'square' ? 0 : '100px'}">
<view class="cmd-progress-bg" :style="setLineStyle"></view>
<view v-if="successPercent" class="cmd-progress-success-bg" :style="setLineSuccessStyle"></view>
</view>
</view>
<!-- 进度条 end -->
<!-- 进度条是否显示信息 start -->
<block v-if="showInfo">
<text class="cmd-progress-text" :title="setFormat">
<block v-if="status != 'success' && status != 'exception' && setProgress < 100">{{setFormat}}</block>
<!-- #ifdef H5 -->
<svg v-if="status == 'exception'" viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em"
fill="currentColor" aria-hidden="true">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
</svg>
<svg v-if="status == 'success' || setProgress == 100" viewBox="64 64 896 896" data-icon="check-circle" width="1em"
height="1em" fill="currentColor" aria-hidden="true" :style="{'color': strokeColor ? strokeColor : ''}">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
</svg>
<!-- #endif -->
<!-- #ifndef H5 -->
<text v-if="status == 'exception' || status == 'success' || setProgress == 100" :style="setLineStatusIcon"></text>
<!-- #endif -->
</text>
</block>
<!-- 进度条是否显示信息 end -->
</block>
</view>
</template>
<script>
/**
* 进度条组件
* @description 显示一个操作完成的百分比时为用户显示该操作的当前进度和状态
* @tutorial https://ext.dcloud.net.cn/plugin?id=259
* @property {String} type 进度类型 - 线型line圆圈形circle仪表盘dashboard默认线型line
* @property {Number} percent 进度百分比值 - 显示范围0-100 可能数比较大就需要自己转成百分比的值
* @property {Number} success-percent 进度已完成的百分几 - 仅支持进度线型line
* @property {String} status 进度状态 - 涌动active仅支持线型line正常normal完成success失败exception默认正常normal
* @property {Boolean} show-info 进度状态信息 - 是否显示进度数值或状态图标默认true
* @property {Number} stroke-width 进度线条的宽度 - 建议在条线的宽度范围1-50与进度条显示宽度有关默认8
* @property {String} stroke-color 进度线条的颜色 - 渐变色仅支持线型line
* @property {String} stroke-shape 进度线条两端的形状 - round方块直角square默认圆round
* @property {Number} width 进度画布宽度 - 仅支持圆圈形circle仪表盘dashboard默认80
* @property {String} gap-degree 进度圆形缺口角度 - 可取值 0 ~ 360,仅支持圆圈形circle仪表盘dashboard
* @property {String} gap-position 进度圆形缺口位置 - 可取值'top', 'bottom', 'left', 'right',仅支持圆圈形circle仪表盘dashboard
* @example <cmd-progress :percent="30"></cmd-progress>
*/
export default {
name: 'cmd-progress',
props: {
/**
* 类型默认line可选 line circle dashboard
*/
type: {
validator: val => {
return ['line', 'circle', 'dashboard'].includes(val);
},
default: 'line'
},
/**
* 百分比
*/
percent: {
type: Number,
default: 0
},
/**
* 已完成的分段百分仅支持类型line
*/
successPercent: {
type: Number,
default: 0
},
/**
* 是否显示进度数值或状态图标
*/
showInfo: {
type: Boolean,
default: true
},
/**
* 进度状态可选normal success exception active仅支持类型line
*/
status: {
validator: val => {
return ['normal', 'success', 'exception', 'active'].includes(val);
},
default: 'normal'
},
/**
* 条线的宽度1-50与width有关
*/
strokeWidth: {
type: Number,
default: 6
},
/**
* 条线的颜色渐变色仅支持类型line
*/
strokeColor: {
type: String,
default: ''
},
/**
* 线圈底色
*/
circleStrokeColor:{
type:String,
default:''
},
/**
* 条线两端的形状 可选'round', 'square'
*/
strokeShape: {
validator: val => {
return ['round', 'square'].includes(val);
},
default: 'round'
},
/**
* 圆形进度条画布宽度,支持类型circle dashboard
*/
width: {
type: Number,
default: 80
},
/**
* 圆形进度条缺口角度可取值 0 ~ 360,支持类型circle dashboard
*/
gapDegree: {
type: Number,
default: 0
},
/**
* 圆形进度条缺口位置,可取值'top', 'bottom', 'left', 'right' ,支持类型circle dashboard
*/
gapPosition: {
validator: val => {
return ['top', 'bottom', 'left', 'right'].includes(val);
},
default: 'top'
}
},
computed: {
/**
* 如果需要自定义格式就在这改
*/
setFormat() {
return `${this.setProgress}%`;
},
/**
* 设置显示进度值禁止小于0和超过100
*/
setProgress() {
let percent = this.percent;
if (!this.percent || this.percent < 0) {
percent = 0;
} else if (this.percent >= 100) {
percent = 100;
}
return percent;
},
/**
* 进度圈svg大小
*/
setCircleStyle() {
return `width: ${this.width}px;
height: ${this.width}px;
fontSize: ${this.width * 0.15 + 6}px;`
},
/**
* 圈底色
*/
setCircleTrailStyle() {
const radius = 50 - this.strokeWidth / 2;
const len = Math.PI * 2 * radius;
const gapDeg = this.gapDegree || (this.type === 'dashboard' && 75);
return `stroke-dasharray: ${len - (gapDeg||0)}px, ${len}px;
stroke-dashoffset: -${(gapDeg||0) / 2}px;
stroke: ${this.circleStrokeColor};
transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s;`
},
/**
* 圈进度
*/
setCirclePathStyle() {
const radius = 50 - this.strokeWidth / 2;
const len = Math.PI * 2 * radius;
const gapDeg = this.gapDegree || (this.type === 'dashboard' && 75);
return `stroke: ${this.strokeColor};
stroke-dasharray: ${(this.setProgress / 100) * (len - (gapDeg||0))}px, ${len}px;
stroke-dashoffset: -${(gapDeg||0) / 2}px;
transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s, stroke-width 0.06s ease 0.3s;`
},
/**
* 绘制圈
*/
setCirclePath() {
const radius = 50 - this.strokeWidth / 2;
let beginPositionX = 0;
let beginPositionY = -radius;
let endPositionX = 0;
let endPositionY = -2 * radius;
const gapPos = (this.type === 'dashboard' && 'bottom') || this.gapPosition || 'top';
switch (gapPos) {
case 'left':
beginPositionX = -radius;
beginPositionY = 0;
endPositionX = 2 * radius;
endPositionY = 0;
break;
case 'right':
beginPositionX = radius;
beginPositionY = 0;
endPositionX = -2 * radius;
endPositionY = 0;
break;
case 'bottom':
beginPositionY = radius;
endPositionY = 2 * radius;
break;
default:
break;
}
return `M 50,50 m ${beginPositionX},${beginPositionY} a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY} a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
},
// #ifndef H5
/**
* 非H5端绘制进度圈svg转base URL
*/
setCircle() {
const radius = 50 - this.strokeWidth / 2;
const len = Math.PI * 2 * radius;
const gapDeg = this.gapDegree || (this.type === 'dashboard' && 75);
let currentColor = '#108ee9'
//
if (this.status == 'exception') {
currentColor = '#f5222d'
}
//
if (this.status == 'success' || this.setProgress >= 100 || this.strokeColor) {
currentColor = this.strokeColor || '#52c41a'
}
let svgToBase =
`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' class='cmd-progress-circle'%3E%3Cpath d='${this.setCirclePath}' stroke='%23f3f3f3' stroke-linecap='${this.strokeShape}' stroke-width='${this.strokeWidth}' fill-opacity='0' class='cmd-progress-circle-trail' style='stroke-dasharray: ${len - (gapDeg||0)}px, ${len}px;stroke-dashoffset: -${(gapDeg||0) / 2}px;transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s;'%3E%3C/path%3E%3Cpath d='${this.setCirclePath}' stroke-linecap='${this.strokeShape}' stroke-width='${this.strokeWidth}' fill-opacity='0' class='cmd-progress-circle-path' style='stroke: ${escape(currentColor)};stroke-dasharray: ${(this.setProgress / 100) * (len - (gapDeg||0))}px, ${len}px;stroke-dashoffset: -${(gapDeg||0) / 2}px;transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s, stroke-width 0.06s ease 0.3s;'%3E%3C/path%3E%3C/svg%3E`
return `background-image: url("${svgToBase}");
background-size: cover;
display: inline-block;
${this.setCircleStyle}`;
},
/**
* 设置进度圈状态图标
*/
setCircleIcon() {
let currentColor = '#108ee9'
let svgToBase = ''
//
if (this.status == 'exception') {
currentColor = '#f5222d'
svgToBase =
`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' data-icon='close' width='1em' height='1em' fill='${escape(currentColor)}' aria-hidden='true'%3E %3Cpath d='M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z'%3E%3C/path%3E %3C/svg%3E`;
}
//
if (this.status == 'success' || this.setProgress >= 100) {
currentColor = this.strokeColor || '#52c41a'
svgToBase =
`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' data-icon='check' width='1em' height='1em' fill='${escape(currentColor)}' aria-hidden='true'%3E %3Cpath d='M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z'%3E%3C/path%3E %3C/svg%3E`;
}
return `background-image: url("${svgToBase}");
background-size: cover;
display: inline-block;
width: 1em;
height: 1em;`;
},
// #endif
/**
* 设置进度条样式
*/
setLineStyle() {
return `width: ${this.setProgress}%;
height: ${this.strokeWidth}px;
background: ${this.strokeColor};
border-radius: ${this.strokeShape === 'square' ? 0 : '100px'};`;
},
/**
* 设置已完成分段进度
*/
setLineSuccessStyle() {
let successPercent = this.successPercent;
if (!this.successPercent || this.successPercent < 0 || this.setProgress < this.successPercent) {
successPercent = 0;
} else if (this.successPercent >= 100) {
successPercent = 100;
}
return `width: ${successPercent}%;
height: ${this.strokeWidth}px;
border-radius: ${this.strokeShape === 'square' ? 0 : '100px'};`;
},
// #ifndef H5
/**
* 设置进度条状态图标
*/
setLineStatusIcon() {
let currentColor = '#108ee9'
let svgToBase = ''
//
if (this.status == 'exception') {
currentColor = '#f5222d'
svgToBase =
`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' data-icon='close-circle' width='1em' height='1em' fill='${escape(currentColor)}' aria-hidden='true'%3E %3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z'%3E%3C/path%3E %3C/svg%3E`;
}
//
if (this.status == 'success' || this.setProgress >= 100) {
currentColor = this.strokeColor || '#52c41a'
svgToBase =
`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' data-icon='check-circle' width='1em' height='1em' fill='${escape(currentColor)}' aria-hidden='true'%3E %3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z'%3E%3C/path%3E %3C/svg%3E`;
}
return `background-image: url("${svgToBase}");
background-size: cover;
display: inline-block;
width: 1em;
height: 1em;`;
},
// #endif
/**
* 状态样式
*/
setStatusClass() {
let statusClass = [];
//
if (this.status == 'exception') {
statusClass.push('cmd-progress-status-exception')
}
//
if (this.status == 'success' || this.setProgress >= 100) {
statusClass.push('cmd-progress-status-success')
}
//
if (this.status == 'active') {
statusClass.push('cmd-progress-status-active')
}
//
if (this.showInfo) {
statusClass.push('cmd-progress-show-info')
}
//
if (this.type === 'line') {
statusClass.push('cmd-progress-line')
}
//
if (this.type === 'circle' || this.type === 'dashboard') {
statusClass.push('cmd-progress-circle')
}
statusClass.push('cmd-progress-status-normal')
return statusClass;
}
}
}
</script>
<style>
.cmd-progress {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
.cmd-progress-line {
width: 100%;
font-size: 28upx;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.cmd-progress-outer {
display: inline-block;
width: 100%;
margin-right: 0;
padding-right: 0;
}
.cmd-progress-show-info .cmd-progress-outer {
flex: 1;
}
.cmd-progress-inner {
display: inline-block;
width: 100%;
background-color: #f5f5f5;
border-radius: 200upx;
vertical-align: middle;
position: relative;
}
.cmd-progress-circle-trail {
stroke: #f5f5f5;
}
.cmd-progress-circle-path {
stroke: #1890ff;
animation: appear 0.3s;
}
.cmd-progress-success-bg,
.cmd-progress-bg {
background-color: #1890ff;
transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
position: relative;
}
.cmd-progress-success-bg {
background-color: #52c41a;
position: absolute;
top: 0;
left: 0;
}
.cmd-progress-text {
word-break: normal;
width: 60upx;
text-align: left;
margin-left: 16upx;
vertical-align: middle;
display: inline-block;
white-space: nowrap;
color: rgba(0, 0, 0, 0.45);
line-height: 1;
}
.cmd-progress-status-active .cmd-progress-bg:before {
content: "";
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-radius: 20upx;
-webkit-animation: cmd-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
animation: cmd-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
.cmd-progress-status-exception .cmd-progress-bg {
background-color: #f5222d;
}
.cmd-progress-status-exception .cmd-progress-text {
color: #f5222d;
}
.cmd-progress-status-exception .cmd-progress-circle-path {
stroke: #f5222d;
}
.cmd-progress-status-success .cmd-progress-bg {
background-color: #52c41a;
}
.cmd-progress-status-success .cmd-progress-text {
color: #52c41a;
}
.cmd-progress-status-success .cmd-progress-circle-path {
stroke: #52c41a;
}
.cmd-progress-circle .cmd-progress-inner {
position: relative;
line-height: 1;
background-color: transparent;
}
.cmd-progress-circle .cmd-progress-text {
display: block;
position: absolute;
width: 100%;
text-align: center;
line-height: 1;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
margin: 0;
color: rgba(0, 0, 0, 0.65);
white-space: normal;
}
.cmd-progress-circle .cmd-progress-status-exception .cmd-progress-text {
color: #f5222d;
}
.cmd-progress-circle .cmd-progress-status-success .cmd-progress-text {
color: #52c41a;
}
@keyframes cmd-progress-active {
0% {
opacity: 0.1;
width: 0;
}
20% {
opacity: 0.5;
width: 0;
}
100% {
opacity: 0;
width: 100%;
}
}
</style>

View File

@ -93,7 +93,7 @@
}, },
{ {
iconPath: "/static/tabbar/icon-mo-news.png", iconPath: "/static/tabbar/icon-mo-news.png",
selectedIconPath: "/static/tabbar/icon-mo-news.png", selectedIconPath: "/static/tabbar/icon-select-news.png",
title:'意见反馈' title:'意见反馈'
}, },
{ {

View File

@ -32,7 +32,8 @@
}, { }, {
"path": "pages/tabbar/my/my", "path": "pages/tabbar/my/my",
"style": { "style": {
"navigationBarTitleText": "个人中心" "navigationBarTitleText": "个人中心",
"navigationStyle": "custom" //
} }
}, { }, {
"path": "pages/login/agreement", "path": "pages/login/agreement",
@ -97,10 +98,10 @@
} }
} }
,{
"path" : "pages/feedback/feedback", , {
"style" : "path": "pages/feedback/feedback",
{ "style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
@ -117,6 +118,64 @@
} }
}] }]
}], }],
"subPackages": [{ //A
"root": "pagesA",
"pages": [{
"path": "test/test",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}]
},
{ //B
"root": "pagesB",
"pages": [{
"path": "personal-information/personal-information",
"style": {
"navigationBarTitleText": "个人信息",
"enablePullDownRefresh": false
}
}, {
"path": "electronic-certificate/electronic-certificate",
"style": {
"navigationBarTitleText": "电子证件",
"enablePullDownRefresh": false
}
}, {
"path": "service-range/service-range",
"style": {
"navigationBarTitleText": "服务范围",
"enablePullDownRefresh": false
}
}, {
"path": "i-want-evaluate/i-want-evaluate",
"style": {
"navigationBarTitleText": "我要评价",
"enablePullDownRefresh": false
}
}, {
"path": "my-account/my-account",
"style": {
"navigationBarTitleText": "我的账户",
"enablePullDownRefresh": false
}
}, {
"path": "set-up/set-up",
"style": {
"navigationBarTitleText": "设置",
"enablePullDownRefresh": false
}
}]
}
],
"preloadRule": { "preloadRule": {
"pages/tabbar/pagehome/pagehome": { "pages/tabbar/pagehome/pagehome": {
"network": "all", "network": "all",

View File

@ -1,24 +1,102 @@
<template> <template>
<view> <view class="pad-x180">
<status-nav-slot :backgroudColor="backgroudColor" >
<view slot="leftContent"><i class="icon icon-return fon40" :style="{color:newColor}"></i></view>
<view slot="centerContent"><view :style="{color:newColor}">个人中心</view></view>
<view slot="rightContent"><i class="icon icon-sandian fon40" :style="{color:newColor}"></i></view>
</status-nav-slot>
<view class="posir" style="background: url(/static/public/icon-my-logo.png) no-repeat;background-size: 100% auto;">
<!-- <image src="/static/public/icon-my-logo.png" class="width100" mode="widthFix" lazy-load></image> -->
<view class="mar-zy40" style="padding-top: 50px;">
<view style="background: url(../../../static/public/icon-my-head.png) no-repeat;height: 400rpx;background-size: 100% 100%;">
<view class="disjbac" style="padding: 60rpx 80rpx 60rpx 60rpx;">
<view class="disac">
<image class="flexs mar-y10" src="/static/public/icon-my-headimg.png" mode="aspectFill" style="width: 91rpx;height: 91rpx;" lazy-load></image>
<view class="disjb fc" style="height: 91rpx;">
<view class="fon34 bold">156****0510</view>
<view class="fon22" style="color: #717171;">未实名认证</view>
</view>
</view>
<image src="/static/public/icon-my-level.png" mode="aspectFill" style="width: 49rpx;height: 76rpx;" lazy-load></image>
</view>
<!-- 信用分项目数量未评价 -->
<view class="disja pad-zy40">
<view v-for="(item,index) in headList" :key="index" class="disjcac fc">
<view style="height: 50rpx;" class="disjcac">
<image :src="item.imgsrc" :style="{width: [49,49,46][index] + 'rpx',height: [50,50,42][index] + 'rpx'}" mode="widthFix" lazy-load></image>
</view>
<view class="fon24 col9 mar-sx10">{{item.title}}</view>
<view class="fon36 bold">{{item.num}}</view>
</view>
</view>
</view>
<!-- 预约及时率上门准时率项目报修率 -->
<view class="disja mar-s20">
<view v-for="(item,index) in percentageList" :key="index" class="disjcac fc col3">
<cmd-progress type="circle" :percent="item.num" :width="60" :stroke-color="['#00a2e9','#e87c00','#0b56ec'][index]" :circleStrokeColor="['rgba(0, 162, 233, 0.2)','rgba(232, 124, 0, 0.2)','rgba(11, 86, 236, 0.2)'][index]" :strokeShape="'square'"></cmd-progress>
<view class="fon24 mar-s20">{{item.title}}</view>
</view>
</view>
<!-- 六宫格 -->
<view class="disjbac fw bacf" style="margin: 30rpx -20rpx 0rpx -20rpx;">
<view @tap="chooseGridEv(index)" class="disjcac fc width50 pad-sx40" v-for="(item,index) in gridList" :key="index" :class="`${(index%2!=0) ? 'bleft' : ''} ${(index < gridList.length-2) ? 'bbot' : ''}`" style="box-sizing: border-box;">
<image :src="item.imgsrc" mode="widthFix" lazy-load :style="{width: [52,52,46,50,46,52][index] + 'rpx',height: [48,45,52,52,53,52][index] + 'rpx'}"></image>
<view class="fon26 col3 mar-s20">{{item.title}}</view>
</view>
</view>
<!-- 退出登录 -->
<view class="my-exit-btn">退出登录</view>
</view>
</view>
<!-- 底部tab --> <!-- 底部tab -->
<foot-tab :current='4'></foot-tab> <foot-tab :current='4'></foot-tab>
</view> </view>
</template> </template>
<script> <script>
import functionList from '@/components/function-list/function-list.vue'; import statusNavSlot from '@/components/status-navs/status-nav-slot.vue';
//
import cmdProgress from '@/components/cmd-progress/cmd-progress.vue';
// //
export default { export default {
components:{functionList}, components:{statusNavSlot,cmdProgress},
data() { data() {
return { return {
backgroudColor:'rgba(255,255,255,0)',
newColor:'rgba(255,255,255,1)',
headList:[
{imgsrc:'/static/public/icon-my-creditScore.png',title:'信用分',num:0},
{imgsrc:'/static/public/icon-my-projectNum.png',title:'项目数量',num:0},
{imgsrc:'/static/public/icon-my-notEvaluated.png',title:'未评价',num:0},
],
percentageList:[
{title:'预约及时率',num:89},
{title:'上门准时率',num:60},
{title:'项目报修率',num:40},
],
gridList:[
{imgsrc:'/static/public/icon-my-information.png',title:'个人信息'},
{imgsrc:'/static/public/icon-my-certificates.png',title:'电子证件'},
{imgsrc:'/static/public/icon-my-service.png',title:'服务范围'},
{imgsrc:'/static/public/icon-my-evaluate.png',title:'我要评价'},
{imgsrc:'/static/public/icon-my-account.png',title:'我的账户'},
{imgsrc:'/static/public/icon-my-set.png',title:'设置'},
]
} }
}, },
onShow() { onShow() {
// //
// this.checkInfo(); // this.checkInfo();
}, },
onPageScroll(e) {
let navHeight = uni.getSystemInfoSync().statusBarHeight + 50;
this.backgroudColor = `rgba(255,255,255,${e.scrollTop/navHeight})`;
if(e.scrollTop/navHeight < 0.5) {
this.newColor = `#FFFFFF`;
} else {
this.newColor = `#000000`;
}
},
onLoad() { onLoad() {
// //
this.$toolAll.tools.disableShareEv(); this.$toolAll.tools.disableShareEv();
@ -34,11 +112,25 @@
this.orderStatus[2].num = this.userInfo.order_count.shipped;// this.orderStatus[2].num = this.userInfo.order_count.shipped;//
} }
}) })
},
//
chooseGridEv(index){
let urls = [
'/pagesB/personal-information/personal-information',
'/pagesB/electronic-certificate/electronic-certificate',
'/pagesB/service-range/service-range',
'/pagesB/i-want-evaluate/i-want-evaluate',
'/pagesB/my-account/my-account',
'/pagesB/set-up/set-up',
];
uni.navigateTo({
url:urls[index]
})
} }
} }
} }
</script> </script>
<style> <style>
page {background-color: #f7f7f7;}
</style> </style>

View File

@ -318,8 +318,8 @@
this.$toolAll.tools.obtainUrl(); this.$toolAll.tools.obtainUrl();
}, },
methods: { methods: {
goNoticeDetail(){ goNoticeDetail(e){
console.log(e);
} }
} }
} }

View File

@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

22
pagesB/set-up/set-up.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 740 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB