tf-business-card/pages_module/establish/index.vue

<template>
  <view class="establish">
    <view class="establish-box">
      <cardCom
        :imgSerial="cardInfo.style"
        :isEdit="true"
        :cardData="cardInfo"
        @changeImg="changeImg"
      ></cardCom>
      <view class="business-style">
        <view class="business-title">名片样式</view>
        <view class="style-list">
          <view
            class="style-item"
            v-for="(item, index) in selectList"
            :key="item.title"
            @click="changeIdx(index)"
          >
            <view class="style-icon" v-if="index === cardInfo.style">
              <image class="" src="@/static/images/success.png" />
            </view>
            <image class="" :src="item.img" />
          </view>
        </view>
      </view>
      <tui-form ref="form">
        <view class="basic-info">
          <view class="info-title">基本信息</view>
          <view class="tui-form">
            <tui-form-item label="姓名" :asterisk="true" :labelSize="28">
              <tui-input
                v-model="cardInfo.name"
                padding="0"
                :borderBottom="false"
                :size="28"
                placeholder="请输入姓名"
              ></tui-input>
            </tui-form-item>
            <tui-form-item label="公司" :labelSize="28">
              <tui-input
                v-model="cardInfo.company"
                padding="0"
                :borderBottom="false"
                :size="28"
                placeholder="请输入公司名称"
              ></tui-input>
            </tui-form-item>
            <tui-form-item label="职位" :labelSize="28">
              <tui-input
                v-model="cardInfo.positions"
                padding="0"
                :borderBottom="false"
                :size="28"
                placeholder="请输入担任职位"
              ></tui-input>
            </tui-form-item>
          </view>
        </view>
        <view class="contact-mode">
          <view class="mode-title">联系方式</view>
          <tui-form-item label="手机" :asterisk="true" :labelSize="28">
            <tui-input
              v-model="cardInfo.mobile"
              padding="0"
              :borderBottom="false"
              :size="28"
              placeholder="请输入手机号"
            ></tui-input>
          </tui-form-item>
          <tui-form-item label="微信" :labelSize="28">
            <tui-input
              v-model="cardInfo.wechat"
              padding="0"
              :borderBottom="false"
              :size="28"
              placeholder="请输入微信号"
            ></tui-input>
          </tui-form-item>
          <tui-form-item label="地址" :labelSize="28">
            <tui-input
              v-model="cardInfo.address"
              padding="0"
              :borderBottom="false"
              :size="28"
              placeholder="请填写地址信息"
            ></tui-input>
          </tui-form-item>
        </view>
        <view class="personal-brief">
          <view class="brief-title">个人简介</view>
          <tui-textarea
            v-model="cardInfo.personalIntroduction"
            flexStart
            placeholder="请输入个人简介"
            min-height="100rpx"
            height="150rpx"
            :size="28"
            :isCounter="true"
            :maxlength="240"
          ></tui-textarea>
        </view>
        <view class="company-brief">
          <view class="company-title">公司简介</view>
          <tui-textarea
            v-model="cardInfo.companyIntroduction"
            flexStart
            placeholder="请填写公司简介"
            min-height="100rpx"
            height="105rpx"
            :size="28"
            :isCounter="true"
            :maxlength="240"
          ></tui-textarea>
        </view>
      </tui-form>
    </view>

    <view class="footer">
      <view class="btn-list">
        <view @click="previewCard">预览名片</view>
        <view @click="saveCard">保存名片</view>
      </view>
    </view>
  </view>
</template>

<script>
import cardCom from "@/components/cardCom/index.vue";
import { createCardApi, updateCardApi } from "@/api/index.js";
export default {
  components: {
    cardCom,
  },
  onLoad(option) {
    //   根据 id 获取详情
    if (option.id || option.id == 0) {
      this.isEdit = true;
      this.cardInfo = this.$cache.getCache("cardInfo");
    }
  },
  data() {
    return {
      selectList: [
        {
          title: "one",
          img: require("@/static/images/select_1.png"),
        },
        {
          title: "two",
          img: require("@/static/images/select_2.png"),
        },
        {
          title: "three",
          img: require("@/static/images/select_3.png"),
        },
      ],
      //  名片信息
      cardInfo: {
        name: "", //名字
        positions: "", //职位
        company: "", //公司名称
        head: "", //头像
        mobile: "", // 手机号码
        wechat: "", // 微信号
        address: "", // 地址
        personalIntroduction: "", // 个人简介
        companyIntroduction: "", // 公司简介
        style: 0, //样式
      },
      //  判断是不是编辑
      isEdit: false,
    };
  },
  methods: {
    //  预览名片
    previewCard(url) {
      //  存储数据到本地
      this.$cache.setCache("cardInfo", this.cardInfo);
      //  跳转预览页面
      uni.navigateTo({
        url: "/pages_module/previewCard/index",
      });
    },
    changeIdx(idx) {
      this.cardInfo.style = idx;
    },
    changeImg() {
      // 选择图片文件
      uni.chooseMedia({
        count: 1,
        mediaType: ["image"],
        sourceType: ["album", "camera"],
        sizeType: ["original", "compressed"],
        success: (res) => {
          this.getImage(res.tempFiles[0].tempFilePath);
        },
      });
    },
    async getImage(file) {
      //  加载状态
      this.$loading.show("上传中...");
      uni.uploadFile({
        url: `https://test.zhult.com/laoa-huozhu/api/hz/business-card/third/upload`, //仅为示例，非真实的接口地址
        filePath: file,
        header: {
          "Content-Type": "application/json; charset=UTF-8",
          "Auth-Token": uni.getStorageSync("token"),
        },
        name: "file",
        formData: {
          user: "head",
        },
        success: (uploadFileRes) => {
          this.cardInfo.head = JSON.parse(uploadFileRes.data).data;
        },
        complete: () => {
          this.$loading.hide();
        },
      });
    },
    //  保存名片
    async saveCard() {
      if (this.cardInfo.name === "") {
        this.$showToast("请输入姓名");
        return;
      }
      //  判断是不是电话号码 电话号码的话就用正则判断
      const phoneRule = /^1[3-9]\d{9}$/;
      if (!phoneRule.test(this.cardInfo.mobile)) {
        this.$showToast("请输入正确的手机号码");
        return;
      }
      let res = this.isEdit
        ? await updateCardApi(this.cardInfo)
        : await createCardApi(this.cardInfo);
      if (res.statusCode === 20000) {
        this.$showToast(this.isEdit ? "更新成功..." : "创建成功...",'success');
        setTimeout(() => {
          //  跳转我的卡片页面
          uni.reLaunch({
            url: `/pages_module/myCard/index?id=${res.data}`,
          });
        }, 1200);
      }
    },
  },
  //  页面卸载
  onUnload() {
    //  删除本地存储
    this.$cache.removeCache("cardInfo");
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>