front-end/glhs/src/admin/shopAdmin/bind.vue

<template>
  <div class="app-content">
    <div v-if="showBindArea">
      <form @submit="formSubmit">
        <div class="module-com input-line-wrap">
          <div
            class="prompt-text"
            style="padding-top:20rpx;margin-bottom:20rpx;font-size:30rpx;"
          >请按以下操作完成绑定：</div>

          <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required" style="width:120rpx;">手机号</div>
            <view style="width:400rpx;">{{form.mobile}}</view>
            <button
              class="admin-button-com blue mini-btn"
              open-type="getPhoneNumber"
              @getphonenumber="getWxMobile"
            >帮我填</button>
          </tui-list-cell>
          <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required" style="width:120rpx;">昵称</div>
            <view style="width:400rpx;">{{form.nickName}}</view>
            <button
              class="admin-button-com blue mini-btn"
              open-type="getUserInfo"
              @getuserinfo="getWxAvatar"
            >帮我填</button>
          </tui-list-cell>

          <div
            class="prompt-text"
            style="margin-top:20rpx;margin-bottom:20rpx;font-size:30rpx;"
          >关注公众号，第一时间接收门店动态：</div>

          <tui-list-cell>
            <block>
              <official-account></official-account>
            </block>
          </tui-list-cell>
          <div class="btn-wrap">
            <button class="admin-button-com blue big" formType="submit">完成</button>
          </div>
        </div>
      </form>
    </div>
    <div v-if="showSuccessArea">
      <view style="text-align:center;padding-top:50rpx;">
        <img
          :src="`${constant.imgUrl}/retail/callback/success.png`"
          alt
          mode="widthFix"
          style="width:30vh;margin:0 auto;"
        />
      </view>
      <view style="text-align:center;font-size:40rpx;margin-top:30rpx;">绑定成功</view>
      <view style="text-align:center;margin-top:5vh">
        <button
          class="admin-button-com blue big"
          style="width:260rpx;"
          @click="redirectToCenter"
        >管理中心</button>
      </view>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TuiListCell from "@/components/plugin/list-cell";
const form = require("@/utils/formValidation.js");
import { generateAdmin } from "@/api/shop-admin";
import { getWxInfo, getWxPhone } from "@/api/mini";
export default {
  name: "bind",
  components: {
    TuiListCell
  },
  data() {
    return {
      form: {
        mobile: "",
        recommendAdminId: "",
        shopId: "",
        adminId: "",
        nickName: ""
      },
      levelSelData: {},
      showBindArea:true,
      showSuccessArea:false
    };
  },
  computed: {},
  onLoad(props) {
    const scene = decodeURIComponent(props.scene);
    var sceneItem = scene.split("&");
    var arr, name, value;
    var sceneArray = new Array();
    for (var i = 0, l = sceneItem.length; i < l; i++) {
      arr = sceneItem[i].split("=");
      name = arr[0];
      value = arr[1];
      sceneArray[name] = value;
    }
    this.form.recommendAdminId = sceneArray.adminId;
    this.form.shopId = sceneArray.shopId;
  },
  methods: {
    confirmFn() {
      generateAdmin(this.form).then(res => {
        this.showBindArea = false
        this.showSuccessArea = true
        uni.clearStorageSync();
      });
    },
    // 表单验证
    formSubmit(e) {
      // 表单规则
      let rules = [
        {
          name: "mobile",
          rule: ["required"],
          msg: ["请填写手机号"]
        },
        {
          name: "shopId",
          rule: ["required"],
          msg: ["系统错误(shopId)"]
        },
        {
          name: "recommendAdminId",
          rule: ["required"],
          msg: ["系统错误(recommendAdminId)"]
        },
        {
          name: "adminId",
          rule: ["required"],
          msg: ["请填写昵称"]
        }
      ];
      // 进行表单检查
      let formData = this.form;
      let checkRes = form.validation(formData, rules);
      // 验证通过!
      if (!checkRes) {
        this.confirmFn();
      } else {
        this.$msg(checkRes);
      }
    },
    // 获取微信手机号
    getWxMobile(e) {
      if (e.detail.errMsg === "getPhoneNumber:ok") {
        getWxPhone({
          iv: e.detail.iv,
          encryptedData: e.detail.encryptedData
        }).then(res => {
          this.form.mobile = res.data.mobile;
          uni.showToast({
            icon: "success"
          });
        });
      } else {
        this.$msg("获取信息失败！");
      }
    },
    // 获取微信信息
    getWxAvatar() {
      uni.getUserInfo({
        provider: "weixin",
        success: res => {
          getWxInfo({ iv: res.iv, encryptedData: res.encryptedData }).then(
            subRes => {
              this.form.adminId = subRes.data.id;
              this.form.nickName = subRes.data.nickName;
              uni.showToast({
                icon: "success"
              });
            }
          );
        },
        fail: () => {
          // this.loading = false
        }
      });
    },
    redirectToCenter() {
      this.$util.pageTo({
        url: "/admin/home/workbench",
        type: 3
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>