173 lines
4.5 KiB
Vue
173 lines
4.5 KiB
Vue
<template>
|
||
<app-layout title="评价师傅">
|
||
<view class="order-id">
|
||
<text class="title">订单编号：</text>
|
||
<text class="value">{{ orderId }}</text>
|
||
</view>
|
||
<view class="grade">
|
||
<text class="title">综合评分：</text>
|
||
<uni-rate v-model="grade" :allowHalf="false" :size="utils.rpx2px(45)" />
|
||
</view>
|
||
<view class="content">
|
||
<textarea
|
||
class="textarea"
|
||
v-model="content"
|
||
maxlength="300"
|
||
placeholder="输入描述您对师傅服务的感受"
|
||
placeholder-class="placeholder-style-3"
|
||
/>
|
||
<view class="tags-group">
|
||
<view
|
||
class="tags-item"
|
||
v-for="(item, index) in tags"
|
||
:key="index"
|
||
@click="chooseTag(item)"
|
||
:class="{ active: chooseTags.includes(item) }"
|
||
>
|
||
<text>{{ item }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="images">
|
||
<view class="form-container">
|
||
<view class="upload-item">
|
||
<block v-for="(item, index) in images" :key="index">
|
||
<view class="image-box">
|
||
<image class="image" :src="item.src" mode="aspectFill" />
|
||
</view>
|
||
</block>
|
||
<view class="image-box upload" @click="chooseImage">
|
||
<text class="iconfont icon-shangchuantupian"></text>
|
||
<text class="text">上传图片</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="save-form-btn">
|
||
<view class="btn" @click="save">提交</view>
|
||
</view>
|
||
</app-layout>
|
||
</template>
|
||
|
||
<script>
|
||
import AppLayout from "@/components/layout/layout";
|
||
import UniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue";
|
||
export default {
|
||
name: "worker-appraise",
|
||
data() {
|
||
return {
|
||
utils: this.$utils,
|
||
tags: ["技术专业", "礼貌热情", "认真负责", "快速完工", "按时上门"],
|
||
orderId: "xxgfdkgn1223",
|
||
grade: 0,
|
||
content: "",
|
||
chooseTags: [],
|
||
images: [],
|
||
|
||
state: false,
|
||
};
|
||
},
|
||
components: {
|
||
AppLayout,
|
||
UniRate,
|
||
},
|
||
onLoad() {},
|
||
onShow() {},
|
||
onReady() {},
|
||
onReachBottom() {},
|
||
onPullDownRefresh() {},
|
||
methods: {
|
||
chooseTag(tag) {
|
||
if (!this.chooseTags.includes(tag)) {
|
||
this.chooseTags.push(tag);
|
||
} else {
|
||
this.chooseTags = this.chooseTags.filter((item) => item != tag);
|
||
}
|
||
},
|
||
chooseImage() {
|
||
uni.chooseImage({
|
||
sizeType: ["compressed"],
|
||
sourceType: ["album"],
|
||
success(res) {
|
||
console.log(JSON.stringify(res.tempFilePaths));
|
||
},
|
||
});
|
||
},
|
||
save() {
|
||
console.log("提交表单");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.order-id,
|
||
.content,
|
||
.grade,
|
||
.images {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background-color: #ffffff;
|
||
.title {
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.order-id {
|
||
padding: 22rpx 40rpx;
|
||
margin-bottom: 18rpx;
|
||
.value {
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
.grade {
|
||
padding: 80rpx 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
.content {
|
||
width: 100%;
|
||
padding: 40rpx;
|
||
margin-bottom: 18rpx;
|
||
.textarea {
|
||
width: 100%;
|
||
height: 170rpx;
|
||
font-size: 26rpx;
|
||
color: #000000;
|
||
}
|
||
.tags-group {
|
||
width: 100%;
|
||
}
|
||
.tags-item {
|
||
display: inline-block;
|
||
padding: 10rpx 20rpx;
|
||
background-color: #ffffff;
|
||
border: 2rpx solid #999999;
|
||
border-radius: 22rpx;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
line-height: 26rpx;
|
||
margin-right: 24rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
.tags-item:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
.tags-item.active {
|
||
color: #8b9aeb;
|
||
background-color: #e4e8fa;
|
||
border: 2rpx solid #8b9aeb;
|
||
}
|
||
}
|
||
.images {
|
||
padding: 35rpx 40rpx;
|
||
.form-container {
|
||
margin-top: 0;
|
||
.upload-item {
|
||
padding: 0;
|
||
}
|
||
}
|
||
}
|
||
</style> |