完善设置页面、新增我的账户页面、完善我要评价页面
parent
409e51a7dc
commit
4000806bdd
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue