popularize-front/pages_order/orderEvaluation.vue

<template>
    <view class="orderEvaluation">
        <Navbar
            title="活动评价"
            :autoBack="true"
            :bgColor="bgColor"
            leftIconSize="18px"
            height="100rpx"
            :leftIconColor="leftIconColor"
            :titleStyle="{ color: fontColor }"
        />
        <view class="content">
            <view class="baseInfo cardBackground_">
                <view class="statusBox">
                    <i></i>
                    <view class="status">主理人评价</view>
                </view>
                <view class="info grayBg">
                    <view class="score">
                        <uv-rate count="5" size="48" v-model="num"></uv-rate>
                    </view>
                    <uv-textarea
                        height="376rpx"
                        :textStyle="{ color: fontColor }"
                        border="none"
                        v-model="evaluate"
                        :maxlength="-1"
                        placeholder="请输入内容"
                    ></uv-textarea>
                </view>
            </view>
            <view class="baseInfo cardBackground_" style="margin-top: 32rpx">
                <view class="statusBox">
                    <i></i>
                    <view class="status">活动评价</view>
                </view>
                <view class="info grayBg">
                    <view class="score">
                        <uv-rate
                            count="5"
                            size="48"
                            v-model="userNum"
                        ></uv-rate>
                    </view>
                    <uv-textarea
                        height="376rpx"
                        :textStyle="{ color: fontColor }"
                        border="none"
                        v-model="userEvaluate"
                        :maxlength="-1"
                        placeholder="请输入内容"
                    ></uv-textarea>
                </view>
            </view>
        </view>
        <view style="padding: 65rpx 35rpx">
            <uv-button
                :custom-style="customStyle"
                @click="submit"
                type="primary"
                shape="circle"
                color="#381615"
                text="提交评论"
            ></uv-button>
        </view>
        <uv-toast ref="toast"></uv-toast>
    </view>
</template>

<script>
import Navbar from '@/pages/components/Navbar.vue'
import { globalMixin } from '../pages/mixins/globalMixin';

export default {
    mixins: [globalMixin],
    components: {
        Navbar
    },
    data() {
        return {
            orderId: '',
            evaluate: '',
            num: 0,
            userEvaluate: '',
            userNum: 0,
        }
    },
    onLoad({ activityId }) {
        this.orderId = activityId;
    },
    methods: {
        submit() {
            if (!this.num && !this.userNum) {
                this.$refs.toast.show({
                    type: 'error',
                    icon: false,
                    message: '请评分之后再提交！'
                })
                return;
            }
            const params = {
                orderId: this.orderId,
                evaluate: this.evaluate,
                num: this.num,
                userEvaluate: this.userEvaluate,
                userNum: this.userNum

            }
            this.$api('evaluate', params, res => {
                if (res.code == 200) {
                    const params = {
                        type: 'success',
                        message: res.result
                    }
                    this.$refs.toast.show({
                        ...params,
                        complete() {
                            uni.switchTab({
								url:'/pages/index/cart'
							})
                        }
                    })
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
/deep/.uv-rate__content__item {
    padding-right: 10rpx;
}
/deep/.uv-icon__icon--success {
    font-size: 32rpx !important;
    line-height: 32rpx !important;
}
.orderEvaluation {
    margin-top: 40rpx;
    .content {
        padding: 0 35rpx;
        color: #fff;
        padding-top: calc(var(--status-bar-height) + 100rpx);
        .baseInfo {
            .statusBox {
                display: flex;
                align-items: center;
                padding: 33rpx 47rpx 24rpx;
                i {
                    background: url('@/static/image/cart/evaluateIcon.png')
                        no-repeat;
                    background-size: 100% 100%;
                    display: block;
                    width: 33rpx;
                    height: 29rpx;
                    margin-right: 15rpx;
                }
            }
            .info {
                .score {
                    padding: 20rpx 0 35rpx;
                }
                /deep/.uv-textarea {
                    background: #493734;
                }
                .aa {
                    color: #fff !important;
                }
            }
        }
    }
}
</style>