takeout-wechat/src/pages/evaluate.vue

<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" v-for="(item, index) in lists" :key="index">
                <div class="text1">{{ item.name }}</div>
                <div class="text2">
                    <div class="text3">
                        <van-image
                            width="16"
                            height="16"
                            lazy-load
                            @click="stepFlag"
                            :src="
                                `https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${
                                    stepflag ? '2021-09-06-11-21-07FIiyRFOr.png' : '2021-09-06-11-18-56FYFucJaK.png'
                                }`
                            "
                        />
                        <div class="text4">踩</div>
                    </div>
                    <div class="text3">
                        <van-image
                            width="16"
                            height="16"
                            lazy-load
                            @click="fabulousFlag"
                            :src="
                                `https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/${
                                    fabulous ? '2021-09-06-11-19-33eTFCBfIW.png' : '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,
            stepflag: false,
            fabulous: false,
            img: [],
            lists: [{ name: '寿司' }],
            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;
            }
        },
        stepFlag() {
            if (this.stepflag === true) {
                this.stepflag = false;
                this.fabulous = false;
            } else {
                this.stepflag = true;
                this.fabulous = false;
            }
        },
        fabulousFlag() {
            if (this.fabulous === true) {
                this.stepflag = false;
                this.fabulous = false;
            } else {
                this.fabulous = true;
                this.stepflag = false;
            }
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    padding: 16px 12px 100px 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 {
                .span();
                &.text2 {
                    margin-left: 20px;
                }
            }
        }
    }
    .evaluate {
        width: 351px;
        height: 266px;
        background: #ffffff;
        border-radius: 12px;
        padding: 20px 0 20px 0;
        margin: 16px 0;
        .title {
            .span();
            margin: 0 0 6px 12px;
        }
        .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;
        padding: 20px 0;
        background: #ffffff;
        border-radius: 12px;
        .text {
            .flex();
            justify-content: space-between;
            margin: 0 12px;
            .text1 {
                .span();
            }
            .text2 {
                .flex();
                line-height: 6px;
                .text3 {
                    .flex();
                    margin-left: 16px;
                    .text4 {
                        .span();
                        font-weight: 400;
                        margin-left: 4px;
                    }
                }
            }
        }
    }
    .btn {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 6px 43px;
        background-color: #fff;
        .bottom(6px);
    }
}
</style>