YXGJ/cloud/businessCard/edit.vue

<template>
    <view style="background: #ffffff;">
        <my_form ref="form" :form="form" @isUncomplete="isUncomplete" @onUploading="onUploading" @isShowAll="isShowAll">
            <template v-if="isShow" slot="head">
                <view class="headportrait" hover-class="navigator-hover">
                    <view class="content">
                        <My_upload maxCount="1" ref="upload" @onLoading="imageOnLoading" @uploadCallback="uploadCallback">
                        </My_upload>
                        <button class="avatar-box" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                        </button>
                        <view style="display: flex;align-items: center;">
                            <view style="border-radius: 50%;width: 56px;height: 56px;border:2px solid #ffffff">
                                <u--image :width="56" :height="56" shape="circle" :src="headportrait">
                                    <template v-slot:loading>
                                        <u-loading-icon />
                                    </template>
                                </u--image>
                            </view>

                            <view :style="'width:' + tovw(255)" />
                            <view class="iconfont icon-a-wodetiaozhuan" />
                        </view>
                    </view>
                </view>
            </template>
        </my_form>

        <view v-if="!origin" style="height: 70px;" />
        <view class="footer">
            <view class="add" :class="uncomplete ? 'forbidden' : ''" hover-class="navigator-hover"
                @click="uncomplete || loading ? '' : submit()">
                <u-loading-icon v-if="loading" />
                <block v-else>
                    {{ origin == 'my' ? '保存' : '保存名片' }}
                </block>
            </view>
        </view>
    </view>
</template>

<script>
import { formattedFiles } from '../../utils/settleFiles.js'
export default {
    data() {
        return {
            sys_enterpriseid: 0,
            form: [],
            attachmentids: [],
            uncomplete: true,
            onUpload: false,
            loading: false,
            headportrait: "https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404231713854678447B26b4363.svg",
            userid: 0,
            isShow: true,
            isSubmit: false,
            origin: ''
        }
    },
    onLoad(options) {
        this.userid = options.id
        this.origin = options.origin
        this.init()
        uni.setNavigationBarTitle({
            title: '修改名片'
        });
    },
    onUnload() {
        if (!this.isSubmit) this.$refs.form.deleteFiles()
    },
    methods: {
        onChooseAvatar(e) {
            let ext = e.detail.avatarUrl.substr(e.detail.avatarUrl.lastIndexOf('.') + 1)
            let name = `${Date.now()}.${ext}`
            let temp = {
                name: name,
                type: 'image',
                url: e.detail.avatarUrl
            }
            this.afterRead({ file: [temp] })
        },

        afterRead({ file }) {
            const that = this;
            file.forEach(v => {
                // #ifdef H5
                this.getArrayBuffer(v).then(data => that.handleUploadFile(this.requestType(v), data))
                // #endif
                // #ifndef H5
                uni.getFileSystemManager().readFile({
                    filePath: v.url,
                    success: data => that.handleUploadFile(this.requestType(v), data.data),
                    fail: console.error
                })
                // #endif
            });
        },
        /* 请求类型 */
        requestType(file) {
            // #ifdef H5
            var ext = file.name.substr(file.name.lastIndexOf(".") + 1);
            // #endif
            // #ifndef H5
            var ext = file.type.split("/")[1] || file.url.substr(file.url.lastIndexOf(".") + 1) || file.name.substr(file.name.lastIndexOf(".") + 1);
            // #endif
            //文件名称
            return {
                "classname": "system.attachment.huawei.OBS",
                "method": "getFileName",
                "content": {
                    "filename": `${Date.now()}.${ext}`,
                    "filetype": ext,
                    "parentid": uni.getStorageSync('siteP').appfolderid
                }
            }
        },
        handleUploadFile(file, data) {
            this.loading = true;
            this.$Http.basic(file).then(res => {
                if (res.msg == "成功") {
                    this.uploadFile(res.data, data)
                } else {
                    uni.showToast({
                        title: `${data.filename}.${data.serialfilename}`,
                        icon: "none"
                    })
                }
            })
        },
        getArrayBuffer(file) {
            return new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest()
                xhr.open('GET', file.url, true)
                xhr.responseType = 'blob'
                xhr.onload = function () {
                    if (this.status == 200) {
                        let myBlob = this.response
                        let files = new window.File([myBlob], file.name, { type: file.url.substr(file.url.lastIndexOf(".") + 1) }) // myBlob.type 自定义文件名
                        const reader = new FileReader();
                        reader.readAsArrayBuffer(files);
                        reader.onload = () => resolve(reader.result);
                        reader.onerror = (error) => reject(error);
                    } else {
                        reject(false)
                    }
                }
                xhr.send()
            })
        },
        /* 上传成功反馈 */
        uploadFile(res, data) {
            var that = this;
            that.loading = true;
            uni.request({
                url: res.uploadurl,
                method: "PUT",
                data,
                header: {
                    'content-type': 'application/octet-stream'
                },
                success() {
                    that.$Http.basic({
                        "classname": "system.attachment.huawei.OBS",
                        "method": "uploadSuccess",
                        "content": {
                            "serialfilename": res.serialfilename
                        }
                    }).then(s => {
                        console.log("文件上传反馈", s)
                        that.loading = false;
                        if (!that.cutoff(s.msg)) that.uploadCallback(s.data.attachmentids, "sys_users", that.userid)
                    }).catch(err => {
                        that.loading = false;
                        console.error(err)
                    })
                },
                fail(err) {
                    that.loading = false;
                    console.log(err)
                }
            })
        },


        init() {
            let form = [{
                key: "name",
                type: "text",
                label: "姓名",
                isMust: true,//是否必填
                value: "",
            }, {
                key: "phonenumber",
                type: "text",
                label: "手机号",
                isMust: true,//是否必填
                value: "",
                placeholder: "请输入手机号",
                inputmode: 'number',
                verify: [this.getReg("phonenumber")]
            }, {
                key: "email",
                type: "text",
                label: "邮箱",
                isMust: false,//是否必填
                value: "",
                verify: [this.getReg("email")]
            }, {
                key: "address",
                type: "text",
                label: "地址",
                isMust: false,//是否必填
                value: "",
            },];
            if (!this.origin) {
                form.push({
                    key: "remarks",
                    type: "textarea",
                    label: "自我介紹",
                    isMust: false,//是否必填
                    value: '',
                }, {
                    key: "tag",
                    type: "tag",
                    label: "印象标签",
                    isMust: false,//是否必填
                    marginTop: 10,
                    placeholder: '请填写，最多十个字',
                    verify: [{
                        reg: '^.{1,10}$',
                        errText: "限制1-10字!"
                    }],
                    value: [],
                }, {
                    key: "attachmentids",
                    type: "upload",
                    label: "图片",
                    placeholder: "可上传多个图片",
                    accept: "image*/",
                    ownertable: "temporary",
                    ownerid: 999,
                    usetype: 'default',
                    allowUpload: true,
                    allowDelete: true,
                    value: [],
                    marginTop: 10
                })
            }
            this.$Http.basic({
                "id": 20240514161502,
                "content": {
                    userid: this.userid
                },
            }).then(res => {
                console.log("获取个人信息", res)
                if (this.cutoff(res.msg)) return;
                if (res.msg == '成功') {
                    this.headportraits = res.data.attinfos;
                    this.headportrait = this.headportraits.find(v => v.usetype == "headportrait") && this.headportraits.find(v => v.usetype == "headportrait").url || this.headportrait;
                    form = form.map(v => {
                        if (v.key == 'attachmentids') {
                            v.value = formattedFiles(res.data.attinfos.filter(item => item.usetype != 'headportrait'))
                        } else {
                            v.value = res.data[v.key] || v.value
                        }
                        return v
                    })

                }
                this.form = form;
            })

        },
        onUploading(ing) {
            this.onUpload = ing;
        },
        isUncomplete(uncomplete) {
            console.log(uncomplete);
            this.uncomplete = uncomplete;
        },
        submit() {
            this.loading = true;
            let that = this;
            this.$refs.form.submit().then(data => {
                this.$Http.basic({
                    "id": 20220929090901,
                    "content": {
                        "ownertable": "sys_users",
                        "ownerid": this.userid,
                        "datatag": data.tag
                    },
                })
                this.$Http.basic({
                    "id": 20240511151602,
                    "content": {
                        ...data
                    }
                }).then(async res => {
                    this.loading = false;
                    console.log("修改信息", res)
                    if (this.cutoff(res.msg)) return;
                    if (!this.origin && data.files.temporarys.length) {
                        this.onUpload = true;
                        await this.$Http.basic({
                            "classname": "system.attachment.Attachment",
                            "method": "createFileLink",
                            "content": {
                                ownertable: 'sys_users',
                                ownerid: res.data.userid,
                                usetype: 'default',
                                attachmentids: data.files.temporarys
                            }
                        }).then(async s => {
                            this.isSubmit = true;
                            this.onUpload = false;
                            console.log("绑定附加", s)
                            if (this.cutoff(s.msg)) return;
                        })
                    };
                    this.loading = true;

                    if (!this.origin && data.files.linksids.length) {
                        await this.$Http.basic({
                            "classname": "system.attachment.Attachment",
                            "method": "deleteFileLink",
                            "content": {
                                linksids: data.files.linksids
                            }
                        })
                    }

                    if (this.attachmentids.length) {
                        this.uploadCallback(this.attachmentids, "sys_users", this.userid).then(s => {
                            if (s) getUserMsg()
                        });
                        if (this.headportraits.length) this.$Http.basic({
                            "classname": "system.attachment.Attachment",
                            "method": "deleteFileLink",
                            "content": {
                                linksids: this.headportraits.map(v => v.linksid)
                            }
                        })

                    } else {
                        this.$Http.editUser(res.data.userid)
                        uni.navigateBack()

                    }
                    //刷新首页用户信息
                    this.$Http.refreshUserInfoData && this.$Http.refreshUserInfoData()
                })
            })
        },
        isShowAll(e) {
            this.isShow = !e;
        },
        imageOnLoading(e) {
            if (e) {
                this.uncomplete = true;
            } else {
                this.$refs.form.verify();
            }
        },
        uploadCallback(attachmentids, ownertable = 'temporary', ownerid = '99999999') {
            if (ownertable == 'temporary') this.imageOnLoading(true)
            return new Promise((resolve, reject) => {
                this.$Http.basic({
                    "classname": "system.attachment.Attachment",
                    "method": "createFileLink",
                    "content": {
                        "usetype": "headportrait",
                        ownertable,
                        ownerid,
                        attachmentids
                    },
                }).then(res => {
                    console.log('绑定附件', res)
                    if (ownertable == 'temporary') this.imageOnLoading(false)
                    if (this.cutoff(res.msg)) return resolve(false);
                    this.headportrait = res.data[0].url;
                    resolve(true)
                    if (ownertable == 'temporary' && this.linksid) this.$Http.basic({
                        "classname": "system.attachment.Attachment",
                        "method": "deleteFileLink",
                        "content": {
                            linksids: [this.linksid]
                        }
                    }).then(res => {
                        console.log("处理删除附件", res)
                        if (this.cutoff(res.msg)) return;
                    });
                    if (ownertable == 'temporary') {
                        this.attachmentids = attachmentids;
                        console.log(res.data[0], '结果');
                        this.headportrait = res.data[0].url;
                        this.linksid = res.data[0].linksid;
                    }
                })
            })

        },
    },
}
</script>

<style lang="scss" scoped>
.headportrait {
    width: 100vw;
    padding-left: 10px;
    background: #fff;

    .content {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #DDDDDD;
        box-sizing: border-box;
        height: 76px;
        padding: 10px;
        padding-left: 0;
        position: relative;

        .avatar-box {
            width: 100%;
            height: 76px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

        .label {
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 14px;
            color: #666666;
            width: 110px;
        }

    }
}

.upload-type {
    display: flex;
    flex-direction: column;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 16px;
    color: #333333;

    .type-line {
        padding: 12px 0;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        border-bottom: 1px #DDDDDD solid;

        .line-1 {
            display: flex;
            align-items: center;
            align-content: center;

            text {
                margin-right: 10px;
            }

            image {
                width: 24px !important;
                height: 24px !important;
            }
        }

        text {}

    }
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 65px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    padding: 5px 10px;
    display: flex;

    .add {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 45px;
        background: #C30D23;
        border-radius: 5px;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        color: #FFFFFF;
    }

    .forbidden {
        opacity: .6;
    }
}</style>