jjx-wap/pages/goods/apply.vue

<template> <!-- 现货市场-申请合作（企业和个人可共用页面） -->
    <view class="wrap">
        <!-- 吸顶 -->
        <u-sticky offset-top="0" customNavHeight="0">
            <!-- 顶部 -->
            <uititle title="申请合作"></uititle>
        </u-sticky>
        <view class="layout layout-title m-top-20">填写合作信息</view>
        <view class="layout layout-apply m-top-10 bg-white">
            <view class="group flex align-center" v-if="userInfo.accountType === 2">
                <view class="lb need m-right-30">企业名称:</view>
                <view class="vl flex-1">
                    <input class="input" type="text" placeholder="请输入内容" v-model="formData.companyName"/>
                </view>
            </view>
            <view class="group flex align-center">
                <view class="lb need m-right-30">联系人姓名:</view>
                <view class="vl flex-1">
                    <input class="input" type="text" placeholder="请输入内容" v-model="formData.name"/>
                </view>
            </view>
            <view class="group flex align-center">
                <view class="lb need m-right-30">联系人电话:</view>
                <view class="vl flex-1">
                    <input class="input" type="text" placeholder="请输入内容" v-model="formData.mobile"/>
                </view>
            </view>
            <view class="group flex align-center">
                <view class="lb need m-right-30">合作留言:</view>
                <view class="vl flex-1">
                    <input class="input" type="text" placeholder="请输入内容" v-model="formData.remark"/>
                </view>
            </view>
            <!--            <view class="flex justify-between align-center m-top-20">-->
            <!--                <view class="before">是否对以上信息进行详细核实</view>-->
            <!--                <radio-group class="flex justify-between align-center" @change="radioChange">-->
            <!--                    <label class="m-left-30" v-for="(item, index) in radioEnum" :key="item.value">-->
            <!--                        <radio :value="item.value" color="#A92924" :checked="index === current"-->
            <!--                               style="transform:scale(0.7)"/>-->
            <!--                        <text class="before">{{ item.name }}</text>-->
            <!--                    </label>-->
            <!--                </radio-group>-->
            <!--            </view>-->
            <view class="group flex align-center">
                <view class="lb need m-right-30">附件:</view>
                <view class="flex-1">
                    <u-upload
                        :fileList="formData.files"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        accept="file"
                        :maxCount="10"
                        multiple
                    >
                    </u-upload>
                </view>
            </view>
            <u-button class="public-btn" text="提交" @click="addCoop"></u-button>
        </view>
    </view>
</template>

<script>
import uititle from '@/components/common/title'
import dayjs from "dayjs";
import md5 from "js-md5";

export default {
    components: {
        uititle,
    },
    data() {
        return {
            current: 0,
            radioEnum: [
                {value: 0, name: '是',},
                {value: 0, name: '否',}
            ],
            formData: {
                goodsId: null,
                goodsUserId: null,
                companyName: '',
                name: '',
                mobile: '',
                remark: '',
                files: []
            },
            userInfo: null
        };
    },
    methods: {
        afterRead({file}) {
            for (let i = 0; i < file.length; i++) {
                const item = file[i]
                const suffix = item.name.split('.').pop()
                uniCloud.uploadFile({
                    filePath: item.url,
                    cloudPath: dayjs().format('YYYY/MM/DD') + '/' + md5(item.name + Date.now().toString()) + `.${suffix}`,
                    success: ({fileID}) => {
                        uniCloud.getTempFileURL({
                            fileList: [fileID]
                        }).then(res => {
                            this.formData.files.push({url: res.fileList[0].tempFileURL})
                        })
                    }
                })
            }
        },
        deletePic({index}) {
            this.formData.files.splice(index, 1)
        },
        addCoop() {
            if (!this.formData.name) return this.$message.error('请填写联系人姓名')
            if (!this.formData.mobile) return this.$message.error('请填写联系方式')
            if (this.formData.files) this.formData.files = this.formData.files.map(item => item.url)
            vk.callFunction({
                url: 'client/spot/goods/kh/addCooperate',
                data: this.formData
            })
            this.$message.success('提交成功')
            setTimeout(() => {
                uni.navigateBack()
            }, 1500)
        },
    },
    onLoad({id, userId}) {
        this.formData.goodsId = id
        this.formData.goodsUserId = userId
        this.userInfo = vk.getStorageSync('uni_id_user_info')
        if (this.userInfo.accountType === 1) {
            this.formData.name = this.userInfo.person.personName
            this.formData.mobile = this.userInfo.person.mobile
        } else {
            this.formData.companyName = this.userInfo.company.companyName
            this.formData.mobile = this.userInfo.company.mobile
            if (this.userInfo.manager) this.formData.name = this.userInfo.manager.personName
        }
    }
}
</script>

<style lang="scss">
.public-btn {
    width: 95%;
    margin-top: 60rpx;
    color: #ffffff;
    background: #A92924;
}

.layout-title {
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    font-weight: 600;
    line-height: 44rpx;
    color: #A92924;
}

.layout-apply {
    margin: 20rpx 30rpx;
    padding: 50rpx 20rpx;
    border-radius: 18rpx;
}

.group {
    padding: 20rpx 0;
}

.lb {
    position: relative;
    width: 180rpx;
    font-size: 24rpx;
    line-height: 40rpx;
    color: #666666;
    text-align: right;
}

.vl {
    padding: 12rpx 20rpx;
    border: 1px solid #f2f2f2;
}

.input {
    font-size: 24rpx;
    line-height: 40rpx;
    color: #101010;
}

.before {
    font-size: 24rpx;
    line-height: 40rpx;
    color: #333333;
}
</style>