mpvue小程序中评价页
Posted 尔嵘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mpvue小程序中评价页相关的知识，希望对你有一定的参考价值。
🧡💛💚----------------往期回顾----------------💙💜🖤
🧡uni-app用mpvue-echarts报this.echarts.setCanvasCreator is not a function的错误的解决🧡
💜Property or method “toJSON“ is not defined on the instance but referenced during render💜
1.路由配置（pages.json)可以卸载subPackages，请提前下载好iview-weapp的dist,iview详情
{
"path":"evaluation/index", //评价
"style": {
"usingComponents": {
"i-cell-group": "/static/iview/cell-group/index",
"i-cell": "/static/iview/cell/index",
"i-rate": "/static/iview/rate/index",
"i-input": "/static/iview/input/index",
"i-icon": "/static/iview/icon/index",
"i-button": "/static/iview/button/index"
}
}
}2.页面的代码包含四个文件：evaluation.css、main.js、index.vue、main.json
vue:
<template>
<div class="mine">
<div class="serry">
<span class="leftBorder">评分</span>
</div>
<div class="star">
<i-rate @change="onChange2" :value="starIndex2" size="32"></i-rate>
<div v-if="Number(starIndex2) === 5">非常满意,无可挑剔</div>
<div v-else-if="Number(starIndex2) === 4">比较满意</div>
<div v-else-if="Number(starIndex2) === 3">一般</div>
<div v-else-if="Number(starIndex2) === 2">较差</div>
<div v-else-if="Number(starIndex2) === 1">非常差</div>
</div>
<div class="modelRight">
<text @click='label' :class="attitude===true ? 'labelColor':''" :data-index="attitude">态度非常好</text>
<text @click='label1' :class="time===false? 'labelColor':''" :data-index="time">技术熟练</text>
<text @click='label2' :class="efficiency===false?'labelColor':''" :data-index="efficiency">响应迅速</text>
<text @click='label3' :class="environment===false?'labelColor':''" :data-index="environment">效率高</text>
<text @click='label4' :class="professional===false?'labelColor':''" :data-index="professional">故障排除彻底</text>
<text @click='label5' :class="intime===false?'labelColor':''" :data-index="intime">及时清理现场</text>
</div>
<div class="conts">
<i-input type="textarea" :value="valueArea" placeholder="更多评价请写在这里（最多50字）" maxlength="50" />
</div>
<!-- 添加图片 -->
<div class="third">
<div>
<span>照片</span>
<span class="description">（{{many}}/{{6}}）</span>
</div>
</div>
<div class="showimg_box">
<!-- 点击上传按钮 -->
<div class="show_img" @click="ChooseImage">
<i-icon type="camera" size="36"/>
</div>
<!-- 展示图片 -->
<div v-for="(item,index) in imgList" :key="index" class="imgarr">
<!-- 点击预览 -->
<image class="images" :src="item" @click="lookImg(index)"></image>
<!-- 关闭图片 -->
<span @click="delect(index)">
<i-icon type="delete" size="18" class="icon-cuo"/>
</span>
</div>
</div>
<div>
<i-button type="primary" shape="circle" @click="handleSubmit">提交</i-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
scale: 4,
tab: 1,
starIndex2: 5,
many: 0,
latitude: "",
longitude: "",
imgArr: "",
valueArea: "",
timer: null,
baseCount: null,
onlineCount: null,
offlineCount: null,
prjCount: null,
onlineRate: null,
programList: null,
attitude: true,
time: true,
efficiency: true,
environment: true,
professional: true,
intime: true,
imgList: [],
marker: []
};
},
methods: {
//选择星星数
onChange2(e) {
const index = e.target.index;
this.starIndex2 = index;
},
// 选择评价标签
label(e) {
var that = this;
that.attitude = !e.currentTarget.dataset.index;
},
label1(e) {
var that = this;
that.time = !e.currentTarget.dataset.index;
},
label2(e) {
var that = this;
that.efficiency = !e.currentTarget.dataset.index;
},
label3(e) {
var that = this;
that.environment = !e.currentTarget.dataset.index;
},
label4(e) {
var that = this;
that.professional = !e.currentTarget.dataset.index;
},
label5(e) {
var that = this;
that.intime = !e.currentTarget.dataset.index;
},
//选择上传图片
ChooseImage() {
var _this = this;
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择和拍照
success: (res) => {
var tempFilePaths = res.tempFilePaths;
if (_this.imgList.length + tempFilePaths.length > 4) {
uni.showToast({
title: '超过上传图片的最大数量',
icon: 'none'
})
} else {
if (_this.imgList.length != 0) {
_this.imgList = _this.imgList.concat(res.tempFilePaths);
} else {
_this.imgList = res.tempFilePaths;
}
for (var i = 0; i < tempFilePaths.length; i++) {
let timestamp = new Date().getTime();
// let enMsg = hex_md5('@' + hex_md5('@' + timestamp + '~') + '~');//加密
let enMsg = '@' + timestamp + '~';
uni.uploadFile({
url: '', //上传的服务器地址
filePath: tempFilePaths[i],
method: 'POST',
name: "file",
formData: {
timestamp: timestamp,
enMsg: enMsg
},
success: res => {
let img = JSON.parse(res.data).data
_this.imgArr += img + ","
console.log("上传图片", _this.imgArr);
}
});
}
this.many++;
}
}
});
},
//预览图片
lookImg(val) {
const urls = this.imgList
const current = val
uni.previewImage({
urls,
current
})
},
//删除图片
delect(index) {
uni.showModal({
title: "提示",
content: "是否删除已选择的照片？",
success: (res) => {
if (res.confirm) {
this.imgList.splice(index, 1)
this.many--;
}
},
fail:((error)=>{
console.log(error);
})
})
},
//提交成功之后跳转首页
handleSubmit() {
let queryParams = {
num: this.starIndex2,
attitude: this.attitude,
time: this.time,
efficiency: this.efficiency,
environment: this.environment,
professional: this.professional,
intime: this.intime,
valueArea: this.valueArea,
imgs: this.imgList
};
// uni.redirectTo("/pages/repair/repair-detail/index");
},
},
onShow() {
this.$setTitle("评价");
this.$setTitleColor('#ffffff', '#2d8cf0');
},
onHide() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
onUnload() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
}
};
</script>
<style src="../evaluation/evaluation.css"></style>
css:
.mine{
background: #fff;
padding: 0 16rpx;
font-size: 12px;
overflow: hidden;
}
.serry{
margin-top: 10px;
height: 30rpx;
line-height: 30rpx;
position: relative;
font-size: 32rpx;
color: #333;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
}
.serry span{
position: absolute;
left: 22rpx;
color: #ccc;
top: 0;
}
.leftBorder{
border-left: 6px solid #2D8CF0;
padding: 4rpx;
}
.star{
margin-top: 20rpx;
text-align: center;
vertical-align: middle;
padding: 10px;
}
.modelRight{
font-size: 24rpx;
float: left;
color: #888;
}
.modelRight text{
font-size: 24rpx;
padding: 13rpx 24rpx;
float: left;
border: 1px solid #888;
border-radius: 10rpx;
margin-right: 34rpx;
margin-top: 20rpx;
}
.labelColor {
color: #EE9900;
border: 1px solid #EE9900 !important;
background-color: #FAEDB7;
}
.conts{
margin-top: 100px;
border: 2rpx solid #C0C0C0;
width: 100%;
overflow: hidden;
padding:0 0 26rpx 0;
box-sizing: border-box;
}
.third{
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.description{
font-weight: bold;
}
/* 上传图片 */
.showimg_box{
display: flex;
align-items: center;
margin-top: 10px;
}
.show_img{
width: 140upx;
height: 140upx;
border: 2rpx dashed #000;
margin: 20rpx 0;
text-align: center;
}
.show_img i-icon{
width: 100%;
height: 100%;
padding: 10rpx;
margin-top: 30%;
align-items: center;
}
.images{
width: 140upx;
height: 140upx;
z-index: 999;
}
.imgarr{
display: flex;
align-items: center;
position: relative;
margin: 0 10upx;
}
.icon-cuo {
font-family: 'iconfont';
position: absolute;
right: 0;
top: 5upx;
background: linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
color: #FFFFFF;
z-index: 10009;
border-radius:50%;
} main.js:
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()以上是关于mpvue小程序中评价页的主要内容，如果未能解决你的问题，请参考以下文章