Huiqitong/src/pages/index/shoppage/makeAssistance.vue

<template>
    <view class="boxhdzq">
        <view class="xzzq">
            <view class="left">
                <image style="width: 28rpx; height: 28rpx" src="@/static/img/xzzq.png" mode=""></image>
                <text class="txt">选择专区</text>
            </view>
            <view class="right">
                <input
                    style="text-align: end"
                    v-model="xzvalue"
                    type="text"
                    placeholder="请选择您要提问的专区"
                    placeholder-class="placlass"
                    disabled
                    @tap="showxz = true"
                />
                <u-action-sheet
                    :actions="list"
                    @select="selectClick"
                    @close="showxz = false"
                    :show="showxz"
                    close-on-click-overlay="true"
                ></u-action-sheet>
                <image style="width: 16rpx; height: 28rpx; margin-left: 8rpx" src="@/static/img/right.png" mode=""></image>
            </view>
        </view>
        <u-textarea v-model="nrvalue" placeholder="请输入您的内容...." count auto-height maxlength="200" height="266" border="none"></u-textarea>
        <view class="buts">
            <view
                class="button"
                @click="submit"
                :style="nrvalue === '' ? 'background: linear-gradient(90deg, rgba(0, 127, 255, 0.3) 0%, rgba(153, 204, 255, 0.3) 100%)' : ''"
            >
                发布
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { addPosts } from '@/api/shop'

const list = ref([
    {
        name: '开店帮',
        id: 1
    },
    {
        name: '金融帮',
        id: 2
    },
    {
        name: '媒体帮',
        id: 3
    },
    {
        name: '企业帮',
        id: 4
    },
    {
        name: '法律帮',
        id: 5
    }
])

const showxz = ref(false)
const xzvalue = ref('')
const xzid = ref(1)
const nrvalue = ref('')

const selectClick = (index) => {
    xzvalue.value = index.name
    xzid.value = index.id
    showxz.value = false
}

const submit = () => {
    if (nrvalue.value !== '') {
        let params = {
            type_id: xzid.value,
            content: nrvalue.value
        }
        addPosts(params).then((res) => {
            if (res.code === 1) {
                uni.showToast({
                    title: '发布成功',
                    duration: 1500,
                    success() {
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)
                    }
                })
            }
        })
    }
}

onLoad((e)=> {
	console.log(e);
	xzid.value = e.id
	xzvalue.value = e.name
})
</script>

<style lang="scss" scoped>
.boxhdzq {
    width: 100%;
    height: 100vh;
    background: #f1f3f9;

    .xzzq {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 28rpx 40rpx;
        background: #ffffff;
        border-bottom: 4rpx solid #f1f3f9;

        .left {
            display: flex;
            align-items: center;

            .txt {
                margin-left: 8rpx;
                font-family: Source Han Sans;
                font-size: 30rpx;
                font-weight: 500;
                line-height: normal;
                letter-spacing: normal;
                color: #273847;
            }
        }

        .right {
            display: flex;
            align-items: center;
        }
    }

    .buts {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;

        .button {
            margin-top: 108rpx;
            border-radius: 248rpx;
            background: linear-gradient(90deg, #007fff 0%, #99ccff 100%);
            width: 576rpx;
            height: 96rpx;
            font-family: Source Han Sans;
            font-size: 36rpx;
            font-weight: 500;
            line-height: 32rpx;
            text-align: justify;
            /* 浏览器可能不支持 */
            display: flex;
            align-items: center;
            letter-spacing: normal;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.placlass {
    font-family: Source Han Sans;
    font-size: 30rpx;
    font-weight: 350;
    line-height: 40rpx;
    display: flex;
    align-items: center;
    letter-spacing: normal;
    color: #d3d3d3;
}
</style>