chen
/
flying-monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

完善设置页面、新增我的账户页面、完善我要评价页面

master
chen 2022-03-18 19:01:31 +08:00
parent 409e51a7dc
commit 4000806bdd
8 changed files with 495 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
commons/flying-monkey.css
View File

@ -279,5 +279,35 @@ uni-radio .uni-radio-input {border: 1rpx solid #444444;}
color: #FFFFFF;
}
/* 我要评价 */
.evaluate-addimg {}
.evaluate-addimg {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.evaluate-addimg::before,.evaluate-addimg::after{
content: '';
display: block;
width: 2rpx;
background-color: #959595;
height: 60rpx;
}
.evaluate-addimg::before{
transform: rotate(90deg);
}
/* 我的账户 */
.account-active {
position: relative;
color: #03affb;
}
.account-active::after{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
content: '';
display: block;
width: 60%;
height: 4rpx;
background-color: #03affb;
}

133
components/evan-switch/evan-switch.vue Normal file
View File

@ -0,0 +1,133 @@
<template>
<view @click="toggle" class="evan-switch" :class="{'evan-switch--disabled':disabled}" :style="{width:2*size+'px',height:switchHeight,borderRadius:size+'px',backgroundColor:currentValue===activeValue?activeColor:inactiveColor}">
<view class="evan-switch__circle" :style="{width:size+'px',height:size+'px',transform:currentValue===activeValue?`translateX(${size}px)`:`translateX(0)`}"></view>
</view>
</template>
<script>
export default {
name: 'EvanSwitch',
props: {
value: {
type: [String, Number, Boolean],
default: false
},
activeColor: {
type: String,
default: '#108ee9'
},
inactiveColor: {
type: String,
default: '#fff'
},
size: {
type: Number,
default: 30
},
disabled: {
type: Boolean,
default: false
},
activeValue: {
type: [String, Number, Boolean],
default: true
},
inactiveValue: {
type: [String, Number, Boolean],
default: false
},
beforeChange: {
type: Function,
default: null
},
extraData: null,
contextLevel: {
type: Number,
default: 1
}
},
computed: {
switchHeight() {
// #ifdef APP-NVUE
return this.size + 2 + 'px'
// #endif
// #ifndef APP-NVUE
return this.size + 'px'
// #endif
}
},
watch: {
value: {
immediate: true,
handler(value) {
this.currentValue = value
}
}
},
data() {
return {
currentValue: false
}
},
methods: {
toggle() {
if (!this.disabled) {
if (this.beforeChange && typeof this.beforeChange === 'function') {
let context = this
for (let i = 0; i < this.contextLevel; i++) {
context = context.$options.parent
}
const result = this.beforeChange(this.currentValue === this.activeValue ? this.inactiveValue : this.activeValue,
this.extraData, context)
if (typeof result === 'object') {
result.then(() => {
this.toggleValue()
}).catch(() => {})
} else if (typeof result === 'boolean' && result) {
this.toggleValue()
}
} else {
this.toggleValue()
}
}
},
toggleValue() {
this.currentValue = this.currentValue === this.activeValue ? this.inactiveValue : this.activeValue
this.$emit('input', this.currentValue)
this.$emit('change', this.currentValue)
}
}
}
</script>
<style lang="scss" scoped>
.evan-switch {
position: relative;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.1);
border-style: solid;
transition: background-color 0.3s;
/* #ifndef APP-NVUE */
box-sizing: content-box;
/* #endif */
}
.evan-switch--disabled {
opacity: 0.3;
}
.evan-switch__circle {
position: absolute;
left: 0;
top: 0;
background-color: #fff;
border-radius: 50%;
/* #ifndef APP-NVUE */
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
/* #endif */
/* #ifdef APP-NVUE */
box-shadow: 1px 0 0px 0 rgba(0, 0, 0, 0.05);
/* #endif */
transition: transform 0.3s;
}
</style>

143
components/rate.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<view class="htz-rate-main">
<template v-for="(item,index) in count">
<image @tap="checkItem((index+1))" class="htz-rate-image" :key="index"
:style="{'width':size+'rpx','height':size+'rpx','padding-right':gutter+'rpx'}"
:src="checkedVal<(index+1)?defImgSrc:selImgSrc"></image>
</template>
</view>
</template>
<script>
export default {
name: 'htz-rate',
props: {
curentClick:{//多个评分时当前点击第几个
type:Number,
default:0
},
value: { //受控分值
type: Number,
default: 0,
},
count: { //数量
type: Number,
default: 5,
},
size: { //图标大小
type: Number,
default: 42,
},
gutter: { //图标间距
type: Number,
default: 15,
},
type: { //内置类型
type: Number,
default: 0,
},
disHref: { //自定义默认图片
type: String,
default: '',
},
checkedHref: { //自定义选中图片
type: String,
default: '',
},
readonly: { //是否只读
type: Boolean,
default: false,
},
},
data() {
return {
ImgData: ['/static/rate/rate1_0.png', '/static/rate/rate1_1.png'],
defImgSrc: '',
selImgSrc: '',
checkedVal: 0,
}
},
mounted: function() {
this.$nextTick(function() {
this.checkedVal = this.value;
if (this.disHref != '') {
this.defImgSrc = this.disHref;
this.selImgSrc = this.checkedHref;
} else {
//if (this.type != undefined) {
this.defImgSrc = this.ImgData[this.type];
this.selImgSrc = this.ImgData[this.type].replace('_0', '_1');
//}
}
});
},
watch: {
value(val, oldVal) {
this.checkedVal = this.value;
},
},
methods: {
checkItem(index) {
if (!this.readonly) {
this.checkedVal = index;
this.$emit('input', [index,this.curentClick]);
this.$emit('change', [index,this.curentClick]);
}
},
}
}
</script>
<style>
.htz-rate-main {
display: inline-flex;
}
.htz-rate-image {
vertical-align: middle;
}
.htz-image-upload-list {
display: flex;
flex-wrap: wrap;
}
.htz-image-upload-Item {
width: 160rpx;
height: 160rpx;
margin: 13rpx;
border-radius: 10rpx;
position: relative;
}
.htz-image-upload-Item image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.htz-image-upload-Item-add {
font-size: 105rpx;
/* line-height: 160rpx; */
text-align: center;
border: 1px dashed #d9d9d9;
color: #d9d9d9;
}
.htz-image-upload-Item-del {
background-color: #f5222d;
font-size: 24rpx;
position: absolute;
width: 35rpx;
height: 35rpx;
line-height: 35rpx;
text-align: center;
top: 0;
right: 0;
z-index: 100;
color: #fff;
}
</style>

55
pagesB/i-want-evaluate/i-want-evaluate.vue
View File

@ -4,41 +4,78 @@
<container-subgroup>
<view slot="content" style="margin: 0 -30rpx;">
<view class="bacf fon28 pad-sx30 pad-zy40">
<view class=" bold disjbac fw">
<view>长沙XXXXXXXXXXXX项目名称</view>
<view class=" bold disjbac fw line-h50">
<view class="mar-y20">长沙XXXXXXXXX项目名称</view>
<view>GD20220108-1002</view>
</view>
<view class="mar-sx20" style="color: #6b6a6a;">服务时间：2022-01-11 15 : 27</view>
<view class="mar-s10 mar-x30" style="color: #6b6a6a;">服务时间：2022-01-11 15 : 27</view>
<view class="radius20 pad30 dis" style="border: 2rpx solid #dcdcdc;">
<image src="/static/public/icon-evaluate-pen.png" mode="widthFix" lazy-load style="width: 25rpx;height: 30rpx;"></image>
<textarea class="fon24 mar-z20" style="height: 200rpx;" placeholder="写下您的服务体验，帮助我们更好的管理提升" placeholder-style="font-size:24rpx;color: #aaaaaa;" />
<textarea v-model="serviceExperience" class="fon24 mar-z20 width100" style="height: 200rpx;" placeholder="写下您的服务体验，帮助我们更好的管理提升" placeholder-style="font-size:24rpx;color: #aaaaaa;" />
</view>
<view class="fon30 bold mar-sx30">上传图片</view>
<view class="disac">
<view class="mar-y20" v-for="(item,index) in imgList" :key="index" style="background-color: #dcdcdc;">
<view @tap="chooseImg(index)" class="mar-y20" v-for="(item,index) in imgList" :key="index" style="background-color: #dcdcdc;">
<view v-if="item.imgsrc==''" class="evaluate-addimg" style="width: 142rpx;height: 142rpx;"></view>
<image v-else :src="item.imgsrc" mode="aspectFill" lazy-load style="width: 142rpx;height: 142rpx;"></image>
<image v-else :src="item.imgsrc" mode="aspectFill" lazy-load style="width: 142rpx;height: 142rpx;vertical-align: middle;"></image>
</view>
</view>
</view>
<view class="bacf fon28 pad-sx30 pad-zy40 mar-s20">
<view class="fon30 bold mar-sx30">您的评价</view>
<view class="mar-s40 mar-x50" style="color: #545454;">
<view class="mar-x40 disac"><text class="mar-y40">技术服务</text><rate :size="42" :gutter="40" :curentClick="0" v-model="rateNum" @change="chooseRate"></rate></view>
<view class="disac"><text class="mar-y40">客服态度</text><rate :size="42" :gutter="40" :curentClick="1" v-model="attitudeNum" @change="chooseRate"></rate></view>
</view>
</view>
<!-- 提交保存 -->
<view class="person-btn" style="margin-top: 50rpx;">提交保存</view>
</view>
</container-subgroup>
</view>
</template>
<script>
import rate from '@/components/rate.vue';
export default {
components:{
rate
},
data() {
return {
imgList:[
imgList:[//上传图片数组
{imgsrc:''},
{imgsrc:''},
{imgsrc:''}
]
],
rateNum:5,//技术服务评分
attitudeNum:5,//客服态度评分
serviceExperience:''//服务体验
}
},
methods: {
// 选择图片
chooseImg(index){
uni.chooseImage({
count:1,
sourceType:['album','camera'],
sizeType:['compressed'],
success: (res) => {
this.imgList[index].imgsrc = res.tempFilePaths[0];
}
})
},
chooseRate(arr){
switch (arr[1]){
case 0:
this.rateNum = arr[0];
break;
case 1:
this.attitudeNum = arr[0];
break;
}
},
}
}
</script>

29
pagesB/my-account/my-account.vue
View File

@ -1,6 +1,26 @@
<template>
<view>
<status-nav navBarTitle="我的账户" returnColor="#c2c2c2"></status-nav>
<container-subgroup>
<view slot="content" style="margin: 0 -30rpx;">
<view class="disja tcenter bbot fon32">
<view @tap="switchStatus(true)" class="width50 pad-x30" :class="current ? 'account-active' : ''">我的账户</view>
<view @tap="switchStatus(false)" class="width50 pad-x30" :class="!current ? 'account-active' : ''">未结算工单</view>
</view>
<view class="bacf pad-sx30 mar-s20 mar-zy20 radius10">
<view class="bbot mar-zy20 disjbac">
<view class="disjcac fc">
<view class="fon22 col9">账户总额(元)</view>
<view class="fon42 bold">￥266.00</view>
</view>
<view class="disjcac fc">
<view class="fon22 col9">联系客服?</view>
<view class="fon42 bold"></view>
</view>
</view>
</view>
</view>
</container-subgroup>
</view>
</template>
@ -8,11 +28,14 @@
export default {
data() {
return {
current:true
}
},
methods: {
// 切换状态
switchStatus(status){
this.current = status;
}
}
}
</script>

118
pagesB/set-up/set-up.vue
View File

@ -1,18 +1,130 @@
<template>
<view>
<status-nav navBarTitle="设置" returnColor="#c2c2c2"></status-nav>
<container-subgroup>
<view slot="content" style="margin: 0 -30rpx;" class="fon28">
<view class="bacf pad30 disjbac bbot">
<view>开启语音提醒</view>
<view><evan-switch v-model="voiceStatus" @change="voiceEv" :size="18" inactive-color="#b3b3b3" active-color="#fd8956"></evan-switch></view>
</view>
<view class="bacf pad30 disjbac">
<view>接受新消息通知</view>
<view><evan-switch v-model="newsStatus" @change="newsEv" :size="18" inactive-color="#b3b3b3" active-color="#fd8956"></evan-switch></view>
</view>
<view @tap="updatePassword" class="bacf pad30 disjbac mar-s20 bbot">
<view>修改登录密码</view>
<i class="icon icon-next col9" style="font-size: 26rpx;"></i>
</view>
<view @tap="cleanEv" class="bacf pad30 disjbac">
<view>清除缓存</view>
<view class="col9">{{cacheSize}} KB</view>
</view>
<view class="bacf pad30 disjbac mar-s20 bbot">
<view>上门服务条款</view>
<view class="disac col9">
V3.0<i class="icon icon-next col9 mar-z20" style="font-size: 26rpx;"></i>
</view>
</view>
<view class="bacf pad30 disjbac bbot">
<view>用户服务协议</view>
<view class="disac col9">
V1.1<i class="icon icon-next col9 mar-z20" style="font-size: 26rpx;"></i>
</view>
</view>
<view class="bacf pad30 disjbac bbot">
<view>飞猴云服务隐私政策</view>
<view class="disac col9">
V1.2<i class="icon icon-next col9 mar-z20" style="font-size: 26rpx;"></i>
</view>
</view>
<view class="bacf pad30 disjbac bbot">
<view>技术服务合作协议</view>
<view class="disac col9">
V1.1<i class="icon icon-next col9 mar-z20" style="font-size: 26rpx;"></i>
</view>
</view>
<view class="bacf pad30 disjbac bbot">
<view>关于飞猴云服务</view>
<view class="disac col9">
V1.1<i class="icon icon-next col9 mar-z20" style="font-size: 26rpx;"></i>
</view>
</view>
<view @tap="checkEdition" class="bacf pad30 disjbac">
<view>版本更新</view>
<view class="col9">当前版本 5.1.4</view>
</view>
</view>
</container-subgroup>
</view>
</template>
<script>
import evanSwitch from '@/components/evan-switch/evan-switch.vue';
export default {
components:{
evanSwitch
},
data() {
return {
voiceStatus:false,//是否开启语音提醒
newsStatus:false,//是否开启接受新消息通知
cacheSize:'754.72',//缓存数据大小
}
},
onLoad() {
// 调用获取缓存数据的大小
this.getStorageDataNum();
},
methods: {
// 获取缓存数据的大小
getStorageDataNum(){
// #ifdef APP-PLUS
var self = this;
plus.cache.calculate(function(size) { //size是多少个字节单位是b
//做下面相应的处理
if (size < 1024) {
self.cacheSize = size + 'B';
} else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
self.cacheSize = Math.floor(size / 1024 * 100) / 100 + 'KB';
} else if (size / 1024 / 1024 >= 1) {
self.cacheSize = Math.floor(size / 1024 / 1024 * 100) / 100 + 'M';
}
});
// #endif
},
// 语音提醒事件
voiceEv(status){
console.log(status);
},
// 新消息通知事件
newsEv(status){
console.log(status);
},
// 修改登录密码
updatePassword(){
console.log('修改登录密码');
},
// 清除缓存事件
cleanEv(){
console.log('清除缓存事件');
// #ifdef APP-PLUS
var self = this;
//使用plus.cache.clear 清除应用中的缓存数据
plus.cache.clear(function() {
uni.showToast({
title: '清除成功!',
icon: 'none',
success() {
self.cacheSize = '0B'
}
})
});
// #endif
},
// 检测版本事件
checkEdition(){
console.log('检测版本事件');
}
}
}
</script>

BIN
static/rate/rate1_0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/rate/rate1_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB