134 lines
2.3 KiB
Vue
134 lines
2.3 KiB
Vue
|
<script>
|
|||
|
|
export default {
|
|||
|
|
components: {},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
rateValue1: 0,
|
|||
|
|
rateValue2: 0,
|
|||
|
|
rateValue3: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.rateValue = 3
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onChange1(e) {
|
|||
|
|
console.log('rate发生改变:' + JSON.stringify(e))
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onChange2(e) {
|
|||
|
|
console.log('rate发生改变:' + JSON.stringify(e))
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onChange3(e) {
|
|||
|
|
console.log('rate发生改变:' + JSON.stringify(e))
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view class="message">
|
|||
|
|
<view class="active">
|
|||
|
|
<image src="../../static/logo.png" mode="" class="img"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="aboutMessage">
|
|||
|
|
<p class="title">菜品名称</p>
|
|||
|
|
<p class="total">月售：8000</p>
|
|||
|
|
<p class="money">￥300</p>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="viewport">
|
|||
|
|
<view class="center">
|
|||
|
|
<p class="title">菜品口味</p>
|
|||
|
|
<uni-rate v-model="rateValue1" @change="onChange1" class="rate" />
|
|||
|
|
<p class="title">食材质量</p>
|
|||
|
|
<uni-rate v-model="rateValue2" @change="onChange2" class="rate" />
|
|||
|
|
<p class="title">配送速度</p>
|
|||
|
|
<uni-rate v-model="rateValue3" @change="onChange3" class="rate" />
|
|||
|
|
<textarea class="review-content" placeholder="评价内容"></textarea>
|
|||
|
|
<button class="submit-button">提交评价</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background-color: #4095e5;
|
|||
|
|
}
|
|||
|
|
.active {
|
|||
|
|
float: left;
|
|||
|
|
width: 30%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.img {
|
|||
|
|
margin: 15px;
|
|||
|
|
}
|
|||
|
|
.aboutMessage {
|
|||
|
|
float: right;
|
|||
|
|
width: 240px;
|
|||
|
|
height: 100%;
|
|||
|
|
.title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
.total {
|
|||
|
|
color: #999;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
}
|
|||
|
|
.money {
|
|||
|
|
color: #4095e5;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.message {
|
|||
|
|
width: 90%;
|
|||
|
|
height: 100px;
|
|||
|
|
border-radius: 25px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.viewport {
|
|||
|
|
width: 90%;
|
|||
|
|
height: 500px;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
.center {
|
|||
|
|
width: 80%;
|
|||
|
|
height: 450px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding-top: 20px;
|
|||
|
|
.title {
|
|||
|
|
font-size: 20px;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.review-content {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
resize: none;
|
|||
|
|
height: 100px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.submit-button {
|
|||
|
|
background-color: #4095e5;
|
|||
|
|
color: white;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
border: none;
|
|||
|
|
line-height: 30px;
|
|||
|
|
border-radius: 30px;
|
|||
|
|
}
|
|||
|
|
</style>
|