|
|
@@ -0,0 +1,320 @@
|
|
|
+<config>
|
|
|
+{
|
|
|
+ "navigationBarTitleText": "评价",
|
|
|
+}
|
|
|
+</config>
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="top">
|
|
|
+ <div class="address">
|
|
|
+ <div class="text">
|
|
|
+ <van-image
|
|
|
+ width="18"
|
|
|
+ height="18"
|
|
|
+ style="margin-left:12px"
|
|
|
+ lazy-load
|
|
|
+ src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-06-14-32-43SJNYKNqV.png"
|
|
|
+ />
|
|
|
+ <div class="text1">益禾堂(一食堂)</div>
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <van-image
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ lazy-load
|
|
|
+ @click="choice"
|
|
|
+ :src="
|
|
|
+ `https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${
|
|
|
+ flag ? '2021-09-02-15-24-13nwVzJqXX.png' : '2021-09-02-14-49-00OrkCuHPB.png'
|
|
|
+ }`
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <div class="text1">匿名评价</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="text1">总体</div>
|
|
|
+ <van-rate
|
|
|
+ :value="value"
|
|
|
+ :size="16"
|
|
|
+ color="#159EFF"
|
|
|
+ void-icon="star"
|
|
|
+ void-color="#eee"
|
|
|
+ @change="onChange"
|
|
|
+ />
|
|
|
+ <div class="text1 text2">非常满意</div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="text1">口味</div>
|
|
|
+ <van-rate
|
|
|
+ :value="value"
|
|
|
+ :size="16"
|
|
|
+ color="#159EFF"
|
|
|
+ void-icon="star"
|
|
|
+ void-color="#eee"
|
|
|
+ @change="onChange2"
|
|
|
+ />
|
|
|
+ <div class="text1 text2">一般</div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="text1">配送</div>
|
|
|
+ <van-rate
|
|
|
+ :value="value"
|
|
|
+ :size="16"
|
|
|
+ color="#159EFF"
|
|
|
+ void-icon="star"
|
|
|
+ void-color="#eee"
|
|
|
+ @change="onChange3"
|
|
|
+ />
|
|
|
+ <div class="text1 text2">差</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="evaluate">
|
|
|
+ <div class="title">评价</div>
|
|
|
+ <van-field
|
|
|
+ :value="form.description"
|
|
|
+ @input="form.description = $event.detail"
|
|
|
+ :border="false"
|
|
|
+ rows="1"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请填写您的用餐评价，推荐给大家"
|
|
|
+ />
|
|
|
+ <van-uploader
|
|
|
+ class="uploader"
|
|
|
+ :max-count="3"
|
|
|
+ :file-list="images"
|
|
|
+ :after-read="afterRead"
|
|
|
+ @delete="deleteImg"
|
|
|
+ />
|
|
|
+ <div class="text1">最多上传三张</div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="text">
|
|
|
+ <div class="text1">鸡翅-对</div>
|
|
|
+ <div class="text2">
|
|
|
+ <div class="text3">
|
|
|
+ <van-image
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ lazy-load
|
|
|
+ src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-06-11-18-56FYFucJaK.png"
|
|
|
+ />
|
|
|
+ <div class="text4">踩</div>
|
|
|
+ </div>
|
|
|
+ <div class="text3">
|
|
|
+ <van-image
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ lazy-load
|
|
|
+ src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-06-11-19-33eTFCBfIW.png"
|
|
|
+ />
|
|
|
+ <div class="text4">赞</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <div class="text1">寿司</div>
|
|
|
+ <div class="text2">
|
|
|
+ <div class="text3">
|
|
|
+ <van-image
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ lazy-load
|
|
|
+ src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-06-11-21-07FIiyRFOr.png"
|
|
|
+ />
|
|
|
+ <div class="text4">踩</div>
|
|
|
+ </div>
|
|
|
+ <div class="text3">
|
|
|
+ <van-image
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ lazy-load
|
|
|
+ src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-06-11-21-26mmGMCJVF.png"
|
|
|
+ />
|
|
|
+ <div class="text4">赞</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn">
|
|
|
+ <van-button type="primary" block>确认</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {},
|
|
|
+ list: [],
|
|
|
+ flag: false,
|
|
|
+ img: [],
|
|
|
+ images: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onChange() {},
|
|
|
+ onChange2() {},
|
|
|
+ onChange3() {},
|
|
|
+ afterRead(file) {
|
|
|
+ this.showLoading();
|
|
|
+ this.$http
|
|
|
+ .uploadFile(file.path)
|
|
|
+ .then(res => {
|
|
|
+ this.hideLoading();
|
|
|
+ console.log(res);
|
|
|
+ // this.images = [
|
|
|
+ // {
|
|
|
+ // url: res
|
|
|
+ // }
|
|
|
+ // ];
|
|
|
+ return this.img.push(res).map(item => {
|
|
|
+ return (this.images = [{ url: item }]);
|
|
|
+ });
|
|
|
+ // console.log(this.images);
|
|
|
+ // console.log(this.images);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.hideLoading();
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: e.error
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deleteImg(e) {
|
|
|
+ let list = [...this.images];
|
|
|
+ list.splice(e.detail.index, 1);
|
|
|
+ this.images = list;
|
|
|
+ },
|
|
|
+ choice() {
|
|
|
+ if (this.flag === true) {
|
|
|
+ this.flag = false;
|
|
|
+ } else {
|
|
|
+ this.flag = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.container {
|
|
|
+ padding: 20px 12px 180px 12px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ /deep/ .van-rate__item {
|
|
|
+ padding-left: 20px !important;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ /deep/ .van-cell {
|
|
|
+ padding: var(--cell-vertical-padding, 10px) var(--cell-horizontal-padding, 12px);
|
|
|
+ }
|
|
|
+ /deep/ .van-cell__value {
|
|
|
+ height: 100px !important;
|
|
|
+ }
|
|
|
+ .top {
|
|
|
+ width: 351px;
|
|
|
+ height: 188px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ .address {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px 0;
|
|
|
+ .text {
|
|
|
+ .flex();
|
|
|
+ margin-right: 12px;
|
|
|
+ line-height: 10px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 18px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ .flex();
|
|
|
+ margin: 0 12px 18px 12px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ &.text2 {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .evaluate {
|
|
|
+ width: 351px;
|
|
|
+ height: 266px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 20px 0 20px 0;
|
|
|
+ margin: 20px 0;
|
|
|
+ .title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-left: 12px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ .uploader {
|
|
|
+ margin: 112px 0 0 12px;
|
|
|
+ }
|
|
|
+ .text1 {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #aaabad;
|
|
|
+ line-height: 18px;
|
|
|
+ margin: 8px 0 0 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ width: 351px;
|
|
|
+ height: 64px;
|
|
|
+ padding: 20px 0;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ .text {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 12px 16px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ .flex();
|
|
|
+ line-height: 6px;
|
|
|
+ .text3 {
|
|
|
+ .flex();
|
|
|
+ margin-left: 16px;
|
|
|
+ .text4 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 6px 43px;
|
|
|
+ background-color: #fff;
|
|
|
+ .bottom(6px);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xuqiang