lanan-repair/pages/orderDetail/evaluate.vue
2024-09-22 15:07:01 +08:00

116 lines
2.2 KiB
Vue

<template>
<view class="container">
<v-navigation-bar background-color="#fff" title-color="#333" title="服务评价"></v-navigation-bar>
<view class="body">
<view style="padding: 0 32rpx;">
<view class="shopInfo">
<image class="shopImg" src="" mode="aspectFill"></image>
<view class="shopInfo_content">
<view class="shopName">顺捷汽车维修搭电救援补胎中心</view>
<view class="shopAdress">济南市历下区福瑞达历下护理院东南门旁</view>
</view>
</view>
<view class="rate">
<text>服务评价</text>
<uni-rate allow-half="true" value=""></uni-rate>
</view>
<textarea class="message" value="" placeholder="可在此输入当前维修厂的服务评价" />
<view class="submit" @click="submit">提交评价</view>
</view>
</view>
</view>
</template>
<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
export default {
components: {
VNavigationBar
},
data() {
return {
};
},
methods: {
submit() {
uni.navigateBack()
}
}
}
</script>
<style lang="less" scoped>
.container {
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
.body {
flex: 1;
height: 0;
overflow: auto;
}
.shopInfo {
display: flex;
align-items: stretch;
column-gap: 20rpx;
margin: 30rpx 0;
.shopImg {
width: 160rpx;
height: 100rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
background-color: #efefef;
}
.shopInfo_content {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6rpx 0;
}
.shopName {
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
.shopAdress {
font-weight: 500;
font-size: 24rpx;
color: #666666;
}
}
.rate {
padding: 30rpx 0;
border-bottom: 1rpx solid #DDDDDD;
display: flex;
align-items: center;
column-gap: 28rpx;
}
.message {
padding: 30rpx 0;
height: 400rpx;
}
.submit {
width: 510rpx;
height: 76rpx;
margin: 0 auto;
background: #0174F6;
border-radius: 38rpx 38rpx 38rpx 38rpx;
font-size: 32rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>