zhishifufei_uniapp/pages/customer/feedback.vue

<template>
    <BaseContainer class="feedback-wrapper">
        <NavBar />
        <view class="head">
            <view class="left-wrapper">
                <view class="title">商城客服已离线</view>
                <view class="txt">尊敬的用户，客服当前不在线，有问题请留言，我们会第一时间进行处理！</view>
            </view>
            <view class="img-box">
                <image src="@/static/icon/feed-icon.png" mode=""></image>
            </view>
        </view>
        <view class="main">
            <view class="title">我要反馈</view>
            <view class="input-box">
                <input type="text" placeholder="请输入您的姓名" v-model="name">
            </view>
            <view class="input-box">
                <input type="text" placeholder="请输入您的联系电话" v-model="phone">
            </view>
            <view class="input-box">
                <textarea type="text" placeholder="请填写内容" v-model="con" />
            </view>
            <view class="sub_btn" @click="subMit">提交</view>
        </view>
    </BaseContainer>
</template>

<script>
import { feedBackPost } from '@/api/kefu.js'
export default {
    name: 'feedback',
    data() {
        return {
            name: '',
            phone: '',
            con: '',
            mer_id:0
        }
    },
    onLoad({mer_id = 0}){
        this.mer_id = mer_id
    },
    methods: {
        subMit() {
            if (!this.name) {
                return this.$util.showMsg('请填写姓名');
            }
            if (!this.phone || !(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.phone))) {
                return this.$util.showMsg('请填写正确的手机号码');
            }
            if (!this.con) {
                return this.$util.showMsg('请填写内容')
            }
            feedBackPost({
                real_name: this.name,
                phone: this.phone,
                content: this.con,
                mer_id:this.mer_id
            }).then(res => {
                this.$util.showMsg(res.msg);
            }).catch(function (res) {
                that.$util.showMsg(res.msg);
            });
        }
    }
}
</script>

<style lang="scss">
.feedback-wrapper {
    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 215rpx;
        padding: 0rpx 30rpx;
        background-color: #3a3a3a;

        .left-wrapper {
            width: 456rpx;
            color: #ffffff;
            font-size: 24rpx;

            .title {
                margin-bottom: 15rpx;
                font-size: 32rpx;
            }
        }

        .img-box {
            image {
                width: 173rpx;
                height: 156rpx;
            }
        }
    }

    .info {
        display: flex;
        background-color: #ffffff;

        .info-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 138rpx;
            border-right: 1px solid #f0f1f2;

            &:last-child {
                border: none;
            }

            .big-txt {
                font-size: 32rpx;
                font-weight: bold;
                color: #282828;
            }

            .small {
                margin-top: 10rpx;
                font-size: 24rpx;
                color: #9f9f9f;
            }
        }
    }

    .main {
        margin-top: 16rpx;
        padding: 30rpx 30rpx 68rpx;
        background-color: #ffffff;

        .title {
            font-size: 30rpx;
            font-weight: bold;
        }

        .input-box {
            margin-top: 20rpx;

            input {
                display: block;
                width: 100%;
                height: 78rpx;
                background: #f5f5f5;
                font-size: 28rpx;
                padding-left: 20rpx;
            }

            textarea {
                display: block;
                width: 100%;
                height: 260rpx;
                padding: 20rpx;
                background: #f5f5f5;
                font-size: 28rpx;
            }
        }

        .sub_btn {
            margin-top: 130rpx;
            width: 100%;
            height: 86rpx;
            line-height: 86rpx;
            font-size: 30rpx;
            text-align: center;
            color: #ffffff;
            border-radius: 43rpx;
            background-color: #3875ea;
        }
    }
}
</style>