mdyxgj/cloud/businessCard/edit.vue

<template>
  <view style="background: #ffffff;padding-bottom: 10px;">
    <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 class="enter-into">
      <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 class="agreement-box">
      <u-checkbox label="已阅读并同意" name="agree" :checked="isAgreement"
        @change="e => isAgreement = e" />
      <view class="agreement-link" @click="checkTheAgreement">
        《隐私协议》
      </view>
    </view>

    <view v-if="!origin" style="height: 70px" />

    <u-modal negativeTop="100" asyncClose :show="showModal" confirmColor=" #C30D23" showCancelButton
      confirmText="阅读并获取" @confirm="onConfirmAgreement" @cancel="showModal = false">
      <view class="modal-content">请阅读并同意<text class="agreement-link" @click="checkTheAgreement">《隐私协议》</text>
      </view>
    </u-modal>
    <view class="footer" v-if="origin == 'my'">
      <view class="add" :class="uncomplete ? 'forbidden' : ''" hover-class="navigator-hover" @click="toEnterStore"
        style="opacity: .8;">
        进入门店
      </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/202406011717209838416B6150695f.webp",
      userid: 0,
      isShow: true,
      isSubmit: false,
      origin: "",
      isAgreement: false,
      showModal: false,
    };
  },
  onLoad(options) {
    this.userid = options.id;
    this.origin = options.origin;
    this.init();
    uni.setNavigationBarTitle({
      title: "修改名片",
    });
  },
  onUnload() {
    if (!this.isSubmit) this.$refs.form.deleteFiles();
  },
  methods: {
    toEnterStore() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    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")],
          getPhoneNumber: true,
        },
        {
          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,
            maxlength: 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() {
      if (this.isAgreement == false) return this.showModal = true;
      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;
            }
          });
      });
    },
    checkTheAgreement() {
      uni.showLoading({
        title: "加载中...",
      });
      uni.downloadFile({
        url: 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202603171773727185157B6376a6ca.doc',
        success: (res) => {
          uni.openDocument({
            filePath: res.tempFilePath,
            fileType: "doc",
            success: (s) => {
              uni.hideLoading();
            },
            fail: (err) => {
              console.log("openDocument", err);
              uni.hideLoading();
              uni.showToast({
                title: "读取失败,请稍后再试",
                icon: "none",
              });
            },
          });
        },
        fail: (err) => {
          console.log("downloadFile", err);
          uni.hideLoading();
          uni.showToast({
            title: "读取失败,请稍后再试",
            icon: "none",
          });
        },
      });
    },
    onConfirmAgreement() {
      this.showModal = false;
      this.isAgreement = true;
      this.submit();
    },
  },
};
</script>

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

  .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;


}

.enter-into {
  width: 80vw;
  margin: 80rpx auto 0;
}

.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: 0.6;
}

.agreement-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
  padding-bottom: 40rpx;

  up-checkbox {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
  }
}

.agreement-link {
  color: #409EFF;
  text-decoration: underline;
}

.modal-content {
  padding: 20px;
  font-size: 16px;
  text-align: center;
}
</style>