tqApp-webView/components/tq-rate-popup/index.vue

<template>
    <u-popup :show="isShow" @close="close" @open="open">
        <view class="rate-con">
            <view class="title">{{ title }}</view>
            <view class="rate-item">
                <view>评分：</view>
                <u-rate :activeColor="activeColor" :count="count" v-model="rateNum"></u-rate>
            </view>
            <view class="textarea-box">
                <u--textarea v-model="textarea" :placeholder="placeholder"></u--textarea>
            </view>
            <view class="operate-box">
                <u-button text="取消" @click="close"></u-button>
                <u-button type="primary" @click="confirm" text="确定"></u-button>
            </view>
        </view>
    </u-popup>
</template>

<script>

export default {
    props: {
        title: { //标题
            type: String,
            default: '评语'
        },
        activeColor: { //星星颜色
            type: String,
            default: '#FA3534'
        },
        count: { //最多星星数
            type: String | Number,
            default: 5
        },
        rateNumProp: { //默认分数
            type: String | Number,
            default: 0
        },
        placeholder: {
            type: String,
            default: '请输入您的评价!'
        },
        columns: {
            type: Array,
            default: () => []
        },
    },

    data() {
        return {
            isShow: false,
            rateNum: 0,
            textarea: '',
            item: {}
        }
    },

    methods: {
        open() {
            console.log('open');
        },
        show(item) {
            this.rateNum = this.rateNumProp
            this.textarea = ''
            this.item = item
            this.isShow = true;
        },
        close() {
            this.isShow = false
        },
        confirm() {
            let { rateNum, textarea } = this
            this.$emit('confirm', {
                rateNum, textarea, item: this.item
            })
            this.close()
        }
    }
}
</script>

<style lang="scss" scoped>
.rate-con {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rpx 20rpx 20rpx 20rpx;

    .title {
        padding: 10rpx 0;
    }

    .rate-item {
        margin-top: 20rpx;
        width: 100%;
        padding-left: 20rpx;
        display: flex;
    }

    .textarea-box {
        width: 100%;
        margin-top: 10rpx;
        padding: 10rpx;
        box-sizing: border-box;
    }

    .operate-box {
        width: 100%;
        display: flex;
    }
}
</style>