|
|
@@ -0,0 +1,338 @@
|
|
|
+<template>
|
|
|
+ <div id="bindAccount"
|
|
|
+ v-loading.fullscreen.lock="!loading">
|
|
|
+ <div v-if="loading"
|
|
|
+ class="h-body">
|
|
|
+ <div v-if="info.fdkkUser"
|
|
|
+ class="bindBox formBox">
|
|
|
+ <el-form label-width="80px">
|
|
|
+ <el-form-item label="手机号码">
|
|
|
+ <el-input disabled
|
|
|
+ v-model="show_fdkkUser"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span class="unBond"
|
|
|
+ @click="unBind">解绑账号</span>
|
|
|
+ </div>
|
|
|
+ <div v-else
|
|
|
+ class="formBox">
|
|
|
+ <el-form ref="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ :model="form"
|
|
|
+ label-width="80px">
|
|
|
+ <el-form-item label="手机号码"
|
|
|
+ prop="fdkkUser">
|
|
|
+ <el-input v-model="form.fdkkUser"
|
|
|
+ placeholder="请输入手机号码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码"
|
|
|
+ prop="fdkkPassword">
|
|
|
+ <el-input v-model="form.fdkkPassword"
|
|
|
+ placeholder="请输入密码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <p>温馨提示:</p>
|
|
|
+ <p>1、绑定的账号是四维看看pro相机的账号信息。</p>
|
|
|
+ <p>2、绑定后,编辑该相机拍摄的场景可进行自动登录,不需要重复登录。</p>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="!info.fdkkUser"
|
|
|
+ class="btn">
|
|
|
+ <el-button type="warning"
|
|
|
+ @click="handleReset('ruleForm')">重置</el-button>
|
|
|
+ <el-button type="primary"
|
|
|
+ @click="handleSubmit('ruleForm')">提交</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+const validatePhoneCheck = async function (rule, value, callback) {
|
|
|
+ if (value === '' || !value) {
|
|
|
+ callback(new Error('手机号不能为空'))
|
|
|
+ } else if (!/^1[3456789]\d{9}$/.test(value)) {
|
|
|
+ callback(new Error('手机号不正确'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleSubmitValidate = function (vue, name, callback) {
|
|
|
+ vue.$refs[name].validate(function (valid) {
|
|
|
+ if (valid) {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ vue.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: '请填写完整信息!',
|
|
|
+ })
|
|
|
+ // iview.Message.error('请填写完整信息!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const encodeStr = function (str, strv = '') {
|
|
|
+ const NUM = 2
|
|
|
+ const front = randomWord(false, 8)
|
|
|
+ const middle = randomWord(false, 8)
|
|
|
+ const end = randomWord(false, 8)
|
|
|
+
|
|
|
+ let str1 = str.substring(0, NUM)
|
|
|
+ let str2 = str.substring(NUM)
|
|
|
+
|
|
|
+ if (strv) {
|
|
|
+ let strv1 = strv.substring(0, NUM)
|
|
|
+ let strv2 = strv.substring(NUM)
|
|
|
+ return [
|
|
|
+ front + str2 + middle + str1 + end,
|
|
|
+ front + strv2 + middle + strv1 + end,
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ return front + str2 + middle + str1 + end
|
|
|
+}
|
|
|
+const randomWord = function (randomFlag, min, max) {
|
|
|
+ let str = ''
|
|
|
+ let range = min
|
|
|
+ let arr = [
|
|
|
+ '0',
|
|
|
+ '1',
|
|
|
+ '2',
|
|
|
+ '3',
|
|
|
+ '4',
|
|
|
+ '5',
|
|
|
+ '6',
|
|
|
+ '7',
|
|
|
+ '8',
|
|
|
+ '9',
|
|
|
+ 'a',
|
|
|
+ 'b',
|
|
|
+ 'c',
|
|
|
+ 'd',
|
|
|
+ 'e',
|
|
|
+ 'f',
|
|
|
+ 'g',
|
|
|
+ 'h',
|
|
|
+ 'i',
|
|
|
+ 'j',
|
|
|
+ 'k',
|
|
|
+ 'l',
|
|
|
+ 'm',
|
|
|
+ 'n',
|
|
|
+ 'o',
|
|
|
+ 'p',
|
|
|
+ 'q',
|
|
|
+ 'r',
|
|
|
+ 's',
|
|
|
+ 't',
|
|
|
+ 'u',
|
|
|
+ 'v',
|
|
|
+ 'w',
|
|
|
+ 'x',
|
|
|
+ 'y',
|
|
|
+ 'z',
|
|
|
+ 'A',
|
|
|
+ 'B',
|
|
|
+ 'C',
|
|
|
+ 'D',
|
|
|
+ 'E',
|
|
|
+ 'F',
|
|
|
+ 'G',
|
|
|
+ 'H',
|
|
|
+ 'I',
|
|
|
+ 'J',
|
|
|
+ 'K',
|
|
|
+ 'L',
|
|
|
+ 'M',
|
|
|
+ 'N',
|
|
|
+ 'O',
|
|
|
+ 'P',
|
|
|
+ 'Q',
|
|
|
+ 'R',
|
|
|
+ 'S',
|
|
|
+ 'T',
|
|
|
+ 'U',
|
|
|
+ 'V',
|
|
|
+ 'W',
|
|
|
+ 'X',
|
|
|
+ 'Y',
|
|
|
+ 'Z',
|
|
|
+ ]
|
|
|
+ // 随机产生
|
|
|
+ if (randomFlag) {
|
|
|
+ range = Math.round(Math.random() * (max - min)) + min
|
|
|
+ }
|
|
|
+ for (var i = 0; i < range; i++) {
|
|
|
+ let pos = Math.round(Math.random() * (arr.length - 1))
|
|
|
+ str += arr[pos]
|
|
|
+ }
|
|
|
+ return str
|
|
|
+}
|
|
|
+import { Base64 } from 'js-base64'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ show_fdkkUser: null,
|
|
|
+ info: {
|
|
|
+ fdkkUser: null,
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ fdkkUser: '',
|
|
|
+ fdkkPassword: '',
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ fdkkUser: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ validator: validatePhoneCheck,
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ fdkkPassword: [
|
|
|
+ { required: true, message: '密码不能为空', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ created() {
|
|
|
+ this.getBindInfo()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleSubmit(name) {
|
|
|
+ handleSubmitValidate(this, name, () => {
|
|
|
+ var data = {
|
|
|
+ // fdkkPassword: encodeStr(Base64.encode(this.form.fdkkPassword)),
|
|
|
+ fdkkPassword: this.form.fdkkPassword,
|
|
|
+ fdkkUser: this.form.fdkkUser,
|
|
|
+ }
|
|
|
+ this.$http({
|
|
|
+ method: 'post',
|
|
|
+ url: 'user/bind4dkkUser',
|
|
|
+ data: data,
|
|
|
+ headers: {
|
|
|
+ token: window.localStorage.getItem('zfb_token'),
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '绑定成功!',
|
|
|
+ })
|
|
|
+ this.getBindInfo()
|
|
|
+ this.form = {
|
|
|
+ fdkkUser: '',
|
|
|
+ fdkkPassword: '',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {})
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleReset(name) {
|
|
|
+ this.$refs[name].resetFields()
|
|
|
+ this.form = {
|
|
|
+ fdkkUser: '',
|
|
|
+ fdkkPassword: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getBindInfo() {
|
|
|
+ // var userId = JSON.parse(localStorage.getItem('userInfo')).userId || 1
|
|
|
+ var userId = 1
|
|
|
+
|
|
|
+ this.$http({
|
|
|
+ method: 'post',
|
|
|
+ url: `/user/getInfo`,
|
|
|
+ // data: params,
|
|
|
+ headers: {
|
|
|
+ token: window.localStorage.getItem('zfb_token'),
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ this.loading = true
|
|
|
+ this.info = res.message
|
|
|
+ if (res.message.fdkkUser) {
|
|
|
+ this.show_fdkkUser =
|
|
|
+ res.message.fdkkUser.substring(0, 4) +
|
|
|
+ '****' +
|
|
|
+ res.message.fdkkUser.substring(8, res.message.fdkkUser.length - 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ unBind() {
|
|
|
+ this.$confirm(
|
|
|
+ '解绑后,编辑当前账号下的八目相机需进行手动登录,是否确定解绑?',
|
|
|
+ '提示'
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ this.$http({
|
|
|
+ method: 'post',
|
|
|
+ url: 'user/unBind4dkkUser',
|
|
|
+ data: { fdkkUser: this.info.fdkkUser },
|
|
|
+ headers: {
|
|
|
+ token: window.localStorage.getItem('zfb_token'),
|
|
|
+ },
|
|
|
+ }).then((res) => {
|
|
|
+ this.info.fdkkUser = null
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '解绑成功!',
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch((_) => {})
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+#bindAccount {
|
|
|
+ .h-body {
|
|
|
+ width: 100%;
|
|
|
+ margin: 30px 0 0;
|
|
|
+ padding: 20px;
|
|
|
+ -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 3px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .text {
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .formBox {
|
|
|
+ width: 600px;
|
|
|
+ position: relative;
|
|
|
+ .unBond {
|
|
|
+ position: absolute;
|
|
|
+ color: #02a7f0;
|
|
|
+ top: 50%;
|
|
|
+ right: -65px;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|