front-end/store/src/admin/adminShop/bind.vue

<template>
  <div class="app-content">
    <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>
          <input
            v-model="form.mobile"
            placeholder-class="phcolor"
            class="tui-input"
            name="mobile"
            placeholder="请输入"
            maxlength="50"
            type="number"
            style="width:400rpx;"
          />
          <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>
          <input
            v-model="form.realName"
            placeholder-class="phcolor"
            class="tui-input"
            name="nickname"
            placeholder="请输入"
            maxlength="40"
            type="text"
            style="width:400rpx;"
          />
          <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>
</template>

<script>
import { mapGetters } from "vuex";
import TuiListCell from "@/components/plugin/list-cell";
const form = require("@/utils/formValidation.js");
import { add } from "@/api/member";
import { getWxInfo, getWxPhone } from "@/api/mini";
export default {
  name: "bind",
  components: {
    TuiListCell
  },
  data() {
    return {
      form: {
        mobile: "",
        nickname: "",
        recommendAdminId: 0,
        shopId: 0
      },
      levelSelData: {}
    };
  },
  computed: {},
  onLoad(props) {
    //console.log(encodeURIComponent('adminId=18533&shopId=15680'))
    const scene = decodeURIComponent(props.scene);
    //console.log(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.recommendAdminId = sceneArray.adminId;
    this.shopId = sceneArray.shopId;
  },
  methods: {
    confirmFn() {
      add(this.form).then(res => {
        this.$msg("添加成功！");
        setTimeout(() => {
          this.$util.pageTo(1);
        }, 1000);
      });
    },
    // 表单验证
    formSubmit(e) {
      // 表单规则
      let rules = [
        {
          name: "mobile",
          rule: ["required"],
          msg: ["请输入手机号"]
        },
        {
          name: "nickname",
          rule: ["required"],
          msg: ["请输入密码"]
        }
      ];
      // 进行表单检查
      let formData = e.detail.value;
      let checkRes = form.validation(formData, rules);
      // 验证通过!
      if (!checkRes) {
        this.confirmFn();
      } else {
        this.$msg(checkRes);
      }
    },
    // 获取微信手机号
    getWxMobile(e) {
      console.log(e);
      if (e.detail.errMsg === "getPhoneNumber:ok") {
        getWxPhone({
          iv: e.detail.iv,
          encryptedData: e.detail.encryptedData
        }).then(res => {
          console.log("用户信息", res);
          uni.showToast({
            icon: "success"
          });

          setTimeout(() => {
            this.stepIndex = 2;
          }, 1000);
        });
      } else {
        this.$msg("获取信息失败！");
      }
    },
    // 获取微信信息
    getWxAvatar() {
      uni.getUserInfo({
        provider: "weixin",
        success: res => {
          console.log("res", res);
          // this.popupShow = true
          getWxInfo({ iv: res.iv, encryptedData: res.encryptedData }).then(
            subRes => {
              console.log("用户信息", subRes);
              uni.showToast({
                icon: "success"
              });
              this.wxInfo = subRes.data;
              // this.$msg('创建用户信息成功！')
              // this.popupShow = true
              setTimeout(() => {
                this.stepIndex = 1;
              }, 1000);
            }
          );
        },
        fail: () => {
          // this.loading = false
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>