yantai-app/yt_yishiting/pages/rate/rate.vue

<template>
    <view class="publish-evaluation">
        <view class="content">
            <view class="satisify">
                <view class="header">请对【{{ tit }}】的结果做出满意度评价</view>
                <view class="satisify-btn" v-if="!voted">
                    <view class="type">
                        <image onTap="chooseSatisifyType" data-type="bad" :src="satisifyType == 'bad' ? notSatisifySelected : notSatisify" @click
                        ="satisifyType = 'bad'"/>
                        <view :style="'color: ' + (satisifyType == 'bad' ? '#333' : '#999')">不满意</view>
                    </view>
                    <view class="type">
                        <image onTap="chooseSatisifyType" data-type="good" :src="satisifyType == 'good' ? normalSatisifySelected : normalSatisify" @click
                        ="satisifyType = 'good'"/>
                        <view :style="'color: ' + (satisifyType == 'good' ? '#333' : '#999')">基本满意</view>
                    </view>
                    <view class="type">
                        <image onTap="chooseSatisifyType" data-type="perfect" :src="satisifyType == 'perfect' ? verySatisifySelected : verySatisify" @click
                        ="satisifyType = 'perfect'" />
                        <view :style="'color: ' + (satisifyType == 'perfect' ? '#333' : '#999')">非常满意</view>
                    </view>
                </view>
                <view class="satisify-btn" v-else>
                    <view class="type">
                        <image :src="evaluateInfo.satisfaction == 'bad' ? notSatisifySelected : notSatisify" @click
                        ="evaluateInfo.satisfaction = 'bad'"/>
                        <view :style="'color: ' + (evaluateInfo.satisfaction == 'bad' ? '#333' : '#999')">不满意</view>
                    </view>
                    <view class="type">
                        <image :src="evaluateInfo.satisfaction == 'good' ? normalSatisifySelected : normalSatisify" @click
                        ="evaluateInfo.satisfaction = 'good'" />
                        <view :style="'color: ' + (evaluateInfo.satisfaction == 'good' ? '#333' : '#999')">基本满意</view>
                    </view>
                    <view class="type">
                        <image :src="evaluateInfo.satisfaction == 'perfect' ? verySatisifySelected : verySatisify" @click
                        ="evaluateInfo.satisfaction = 'perfect'" />
                        <view :style="'color: ' + (evaluateInfo.satisfaction == 'perfect' ? '#333' : '#999')">非常满意</view>
                    </view>
                </view>
            </view>
            <view class="satisify-content">
                <textarea
                    maxlength="99"
                    v-if="!voted"
                    :value="textareaValue"
                    v-model="textareaValue"
                    @change="bindTextareaValue"
                    placeholder="如有意见或建议请在此填写。"
                    placeholder-class="textarea-satisify"
                ></textarea>
                <view v-else class="cont">{{ evaluateInfo.evaluateContent }}</view>
                <view class="publish-evaluation-btn" v-if="!voted">
                    <view @click="publishEvaluation" class="submitbtn">发布评价</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { projectinitevaluation, evaluate, projectevaluate, initevaluation } from '../../utils/api/customerApi.js';
export default {
    data() {
        return {
            notSatisify: '/static/data/images/rate/face1.png',
            notSatisifySelected: '/static/data/images/rate/face1_light.png',
            normalSatisify: '/static/data/images/rate/face2.png',
            normalSatisifySelected: '/static/data/images/rate/face2_light.png',
            verySatisify: '/static/data/images/rate/face3.png',
            verySatisifySelected: '/static/data/images/rate/face3_light.png',
            textareaValue: '',
            evaluationCallbackVisible: false,
            satisifyType: '',
            issueId: '',
            //议题已关闭
            projectId: '',
            //话题转项目
            pageInit: '',
            voted: false,
            evaluateInfo: {
                satisfaction: '',
                evaluateContent: ''
            },
            tit: ''
        };
    },
    async onLoad(options) {
        let issueId = options.issueid;
        let projectId = options.projectid;
        let type = options.type;
        let tit = options.tit;
        this.setData({
            issueId: issueId,
            projectId: projectId,
            tit: tit
        });
        if (type == 'closed') {
            this.setData({
                pageInit: 'issue'
            });
            await this.issueInit();
        }
        if (type == 'shift_project') {
            this.setData({
                pageInit: 'project'
            });
            await this.projectInit();
        }
    },
    onShow() {},
    methods: {
        // textarea 双向绑定
        bindTextareaValue(e) {
            this.setData({
                textareaValue: e.detail.value
            });
        },

        // 发表评价
        async publishEvaluation() {
            if (!this.satisifyType) {
                uni.showToast({
                    title: '请进行满意度评价',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            } 
            if (!this.textareaValue) {
                uni.showToast({
                    title: '请填写评价内容',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            }
            if (this.pageInit == 'issue') {
                //议题已关闭
                await this.issuePublish();
            } else {
                //项目已结案
                await this.projectPublish();
            }
        },

        // 选择 满意度
        chooseSatisifyType(e) {
            let type = e.currentTarget.dataset.type;
            this.setData({
                satisifyType: type //e.currentTarget.dataset.type
            });
        },

        async issuePublish() {
            uni.showLoading({
                content: '正在审核中',
                mask: true
            });
            const { issueId } = this;
            const { code, data, msg } = await evaluate({
                issueId: issueId,
                satisfaction: this.satisifyType,
                comment: this.textareaValue
            });
            uni.hideLoading();
            if (msg === 'success' && code === 0) {
                uni.redirectTo({
                    url: `/pages/detail/detail?issueId=${this.issueId}`
                });
            }
        },

        async projectPublish() {
            uni.showLoading({
                content: '正在审核中',
                mask: true
            });
            const { projectId } = this;
            const { code, data, msg } = await projectevaluate({
                projectId: projectId,
                satisfaction: this.satisifyType,
                comment: this.textareaValue
            });
            uni.hideLoading();
            if (msg === 'success' && code === 0) {
                uni.redirectTo({
                    url: `/pages/detail/detail?issueId=${this.issueId}`
                });
            }
        },

        async issueInit() {
            const { issueId } = this;
            const { code, data, msg } = await initevaluation({
                issueId
            });
            if (msg === 'success' && code === 0) {
                this.setData({
                    voted: data.status,
                    evaluateInfo: data.evaluateInfo
                });
            }
        },

        async projectInit() {
            const { projectId } = this;
            const { code, data, msg } = await projectinitevaluation({
                projectId
            });
            if (msg === 'success' && code === 0) {
                this.setData({
                    voted: data.status,
                    evaluateInfo: data.evaluateInfo
                });
            }
        }
    }
};
</script>
<style>
page {
    width: 100%;
    height: 100vh;
}
.publish-evaluation {
    width: 100%;
    height: 100%;
    background: #f7f7f7;
    box-sizing: border-box;
    padding: 20rpx;
}
.publish-evaluation .content {
    width: 100%;
    height: 970rpx;
    background: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 0 25rpx;
}

.satisify {
    width: 100%;
}
.satisify .header {
    color: #333;
    font-size: 32rpx;
    padding: 20rpx 0 20rpx 0;
    line-height: 40rpx;
    display: table;
    border-bottom: 1px solid #e7eeee;
}
.cont {
    background: #f7f7f7;
    border-radius: 16rpx;
    font-size: 28rpx;
    padding: 20rpx;
    box-sizing: border-box;
    min-height: 300rpx;
}
.satisify .satisify-btn {
    width: 100%;
    height: 260rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.satisify .satisify-btn .type {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.satisify .satisify-btn .type image {
    width: 100rpx;
    height: 100rpx;
    object-fit: cover;
}
.satisify .satisify-btn .type view {
    font-size: 28rpx;
    color: #999;
    line-height: 90rpx;
    height: 90rpx;
}

.satisify-content {
    width: 100%;
    height: 600rpx;
    box-sizing: border-box;
    padding-top: 30rpx;
    padding-bottom: 40rpx;
    display: flex;
    flex-direction: column;
    /*align-content: center;*/
}
.satisify-content textarea {
    width: 600rpx;
    height: 460rpx;
    font-size: 32rpx;
    line-height: 46rpx;
    margin: 0 auto;
    background: #f7f7f7;
    padding: 20rpx;
    display: flex;
    box-sizing: border-box;
    border-radius: 16rpx;
    color: #333;
}
.satisify-content .textarea-satisify {
    font-size: 32rpx;
    line-height: 46rpx;
    color: #999;
}

.publish-evaluation-btn {
    width: 100%;
    height: 84rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60rpx;
}
.publish-evaluation-btn button {
    width: 560rpx;
    height: 80rpx;
    padding: 0;
    border-radius: 44rpx;
    /*background: linear-gradient(to right, #F40C0C, #FF4E4E);*/
    background: #e60000;
    color: #fff;
    font-size: 36rpx;
    line-height: 86rpx;
    text-align: center;
}
.submitbtn {
    width: 560rpx;
    height: 80rpx;
    padding: 0;
    border-radius: 40rpx;
    /*background: linear-gradient(to right, #F40C0C, #FF4E4E);*/
    background: #e60000;
    color: #fff;
    font-size: 36rpx;
    line-height: 80rpx;
    text-align: center;
}
.publish-evaluation-btn button::after {
    border: 0;
}
.publish-evaluation-btn .hover-btn {
    background: red;
}
</style>