h-view title

packages/components/HView/index.vue

@@ -20,12 +20,21 @@ export default {
       type: Boolean,
       default: true,
     },
+    title: {
+      type: String,
+      default: '',
+    },
   },
   data () {
     return {
       isIos: false,
     }
   },
+  mounted () {
+    if (this.title) {
+      document.title = this.title
+    }
+  },
   created () {
     this.fullScreen && detectOS() === 'ios' && (this.isIos = true)
   },

src/main.js

@@ -9,8 +9,14 @@ import router from './router/index'
 
 import flexible from './common/ydui.flexible'
 
-import {componentInstall, appStyle, hlsUtil, get, post, hlsPopup, directives, filter} from '../packages/index'
+import {componentInstall, appStyle} from '../packages/index'
 
+/**
+ * 指令
+ */
+import directives from './scripts/directives'
+
+import filter from './scripts/filter'
 /**
  * 组件
  */
@@ -27,6 +33,20 @@ import {
 import './scripts/prototype'
 import './scripts/vuePlatform'
 
+/**
+ * 弹框组件
+ */
+import hlsPopup from './scripts/hlsPopup'
+
+/**
+ * http
+ */
+import {post, get} from './scripts/hlsHttp'
+
+/** 全局函数hlsUtil**/
+
+import hlsUtil from './scripts/hlsUtil'
+
 /** end**/
 
 if (process.env.CONFIG_ENV === 'uat') {

src/pages/hlsPopup.vue

 <template>
-  <h-view class="public-style hls-popup" style="height: 100%">
+  <h-view class="public-style hls-popup" style="height: 100%" title="封装测试">
     <h-header class="bar-custom">
       <div slot="left" class="h-header-btn" @click="$routeGo()">
         <i class="ion-ios-arrow-back"/>

src/pages/home.vue

 <template>
-  <h-view id="home" class="public-style">
+  <h-view id="home" class="public-style" title="小易">
     <h-header :has-border="false" class="bar-custom">
       <div slot="left" class="h-header-btn" @click="$hlsExit()">
         <i class="ion-ios-arrow-back"/>

src/scripts/filter.js

+export default (Vue) => {
+  Vue.filter('currency', function (val) {
+    if (!val) return '0.00'
+
+    var intPart = Number(val).toFixed(0) // 获取整数部分
+    var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
+
+    var floatPart = '.00' // 预定义小数部分
+    var value2Array = (val + '').split('.')
+
+    // =2表示数据有小数位
+    if (value2Array.length === 2) {
+      floatPart = value2Array[1].toString() // 拿到小数部分
+
+      if (floatPart.length === 1) { // 补0,实际上用不着
+        return intPartFormat + '.' + floatPart + '0'
+      } else {
+        return intPartFormat + '.' + floatPart
+      }
+    } else {
+      return intPartFormat + floatPart
+    }
+  })
+  Vue.filter('datetime', timestamp => {
+    function format (number) {
+      return number.toString().padStart(2, '0')
+    }
+    const date = new Date(Number.parseInt(timestamp, 10))
+    const YYYY = date.getFullYear()
+    const MM = date.getMonth() + 1
+    const DD = date.getDate()
+    const hh = date.getHours()
+    const mm = date.getMinutes()
+    const ss = date.getSeconds()
+    return `${YYYY}-${format(MM)}-${format(DD)} ${format(hh)}:${format(mm)}:${format(ss)}`
+  })
+}

src/scripts/hlsHttp.js

+// 引入axios
+import axios from 'axios'
+import hlsPopup from './hlsPopup'
+let promiseArr = {}
+let cancel = {}
+const CancelToken = axios.CancelToken
+// 请求拦截器
+axios.interceptors.request.use(config => {
+  // 发起请求时，取消掉当前正在进行的相同请求
+  config.cancelToken = new CancelToken(c => {
+    cancel = c
+  })
+  if (promiseArr[config.url]) {
+    promiseArr[config.url]('操作取消')
+    promiseArr[config.url] = cancel
+  } else {
+    promiseArr[config.url] = cancel
+  }
+  return config
+}, error => {
+  return Promise.reject(error)
+})
+// 响应拦截器即异常处理
+axios.interceptors.response.use(response => {
+  if ($config.debug) {
+    let postName = 'post'
+    console.log(postName + ' success')
+    console.log(postName + ' response ' + JSON.stringify(response.data, '', 2))
+    console.log(postName + ' End!')
+  }
+  if (response.data.result === 'E' || response.data.code === 'E') {
+    hlsPopup.hideLoading()
+    const err = {}
+    err.message = response.data.message
+    hlsPopup.showError(err.message)
+    return Promise.resolve(err)
+  } else {
+    return response.data
+  }
+}, err => {
+  if (err && err.response) {
+    switch (err.response.status) {
+      case 400:
+        err.message = '错误请求'
+        break
+      case 401:
+        err.message = '登录已失效，请重新登录'
+        break
+      case 403:
+        err.message = '拒绝访问'
+        break
+      case 404:
+        err.message = '请求错误,未找到该资源'
+        break
+      case 405:
+        err.message = '不支持的请求类型'
+        break
+      case 408:
+        err.message = '请求超时'
+        break
+      case 500:
+        err.message = '服务器端出错'
+        break
+      case 501:
+        err.message = '网络未实现'
+        break
+      case 502:
+        err.message = '网络错误'
+        break
+      case 503:
+        err.message = '服务不可用'
+        break
+      case 504:
+        err.message = '网络超时'
+        break
+      case 505:
+        err.message = 'http版本不支持该请求'
+        break
+      default:
+        err.message = `连接错误${err.response.status}`
+    }
+  } else {
+    err.message = '连接到服务器失败'
+  }
+  if (err.response && err.response.status === 401) {
+    hlsPopup.hideLoading()
+    hlsPopup.showPopup({
+      title: '登录失效，重新登录',
+      onConfirm: () => {
+
+      },
+    })
+  } else {
+    hlsPopup.hideLoading()
+    hlsPopup.showError(err.message)
+  }
+  return Promise.resolve(err)
+})
+axios.defaults.baseURL = ''
+axios.defaults.timeout = 10000
+// get请求
+export function get (url) {
+  let param = {}
+  let headers = {}
+  if (window.localStorage.access_token) {
+    headers = {
+      'Content-Type': 'application/json',
+      'Authorization': 'Bearer ' + window.localStorage.access_token,
+    }
+  } else {
+    headers = {
+      'Content-Type': 'application/json',
+    }
+  }
+  if ($config.debug) {
+    let postName = 'GET'
+    console.log(postName + ' Start!')
+    console.log(postName + ' url ' + url)
+  }
+  return new Promise((resolve, reject) => {
+    axios({
+      method: 'get',
+      url,
+      headers: headers,
+      params: param,
+    }).then(res => {
+      resolve(res)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
+// post请求
+export function post (url, param) {
+  param.user_id = window.localStorage.user_id
+  param.access_token = window.localStorage.access_token
+  let headers = {}
+  if (window.localStorage.access_token) {
+    headers = {
+      'Content-Type': 'application/json',
+      'Authorization': 'Bearer ' + window.localStorage.access_token,
+    }
+  } else {
+    headers = {
+      'Content-Type': 'application/json',
+    }
+  }
+  if ($config.debug) {
+    let postName = 'POST'
+    console.log(postName + ' Start!')
+    console.log(postName + ' url ' + url)
+    console.log(postName + ' parameter ' + JSON.stringify(param, '', 2))
+  }
+  return new Promise((resolve, reject) => {
+    axios({
+      method: 'post',
+      headers: headers,
+      url,
+      data: param,
+    }).then(res => {
+      resolve(res)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}

src/scripts/login.js

+/**
+ * hmap子应用登录逻辑
+ * @author momoko 2018/05/08
+ */
+
+import axios from 'axios'
+import { getUrlParam } from './utils'
+
+// 模拟登录
+export function analogLogin () {
+  return new Promise((resolve, reject) => {
+    const url = `${$config.hmapUrl}/oauth/token?client_id=18f58010-2831-11e8-b467-0ed5f89f718b&client_secret=2fe58f36-2831-11e8-b467-0ed5f89f718b&grant_type=password&username=%2B8618325379820&password=jingchaowu520&authType=TEL`
+    axios.post(url).then(res => {
+      window.localStorage.setItem('token', res.access_token)
+      resolve({
+        token: res.access_token,
+        tokenType: res.token_type,
+        expires: res.expires_in,
+        userId: res.userId,
+        organizationId: res.organizationId,
+      })
+    })
+  })
+}
+
+// 授权码登录
+export async function authorizedLogin () {
+  return new Promise((resolve, reject) => {
+    const code = getUrlParam('code')
+    const url = `${$config.hmapUrl}/oauth/token?client_id=18f58010-2831-11e8-b467-0ed5f89f718b&client_secret=2fe58f36-2831-11e8-b467-0ed5f89f718b&grant_type=authorization_code&code=${encodeURIComponent(code)}`
+    axios.post(url).then(res => {
+      window.localStorage.setItem('token', res.access_token)
+      resolve({
+        token: res.access_token,
+        tokenType: res.token_type,
+        expires: res.expires_in,
+        userId: res.userId,
+        organizationId: res.organizationId,
+        account: res.account,
+        mobile: res.phoneNumber,
+      })
+    })
+  })
+}
+
+// 桥登录
+export function bridgeLogin () {
+  return new Promise((resolve, reject) => {
+    // 登录成功回调
+    window.bridgeLoginSuccess = function (str) {
+      const res = JSON.parse(str)
+      window.localStorage.setItem('token', res.token)
+      const data = {
+        token: res.token,
+        tokenType: res.tokenType,
+        expires: res.expiresIn,
+        userId: res.userId,
+        organizationId: res.organizationId,
+        account: res.account,
+        mobile: res.phoneNumber,
+      }
+      resolve(data)
+    }
+    // 登录失败回调
+    window.bridgeLoginFailure = function (res) {
+      console.error(res)
+      reject(res)
+    }
+    const dict = {
+      'className': 'BaseBridge',
+      'function': 'getBaseInfo',
+      'successCallBack': 'bridgeLoginSuccess',
+      'failureCallBack': 'bridgeLoginFailure',
+    }
+    HandBridge.postMessage(JSON.stringify(dict))
+  })
+}
+
+// 获取用户详细信息
+export function getUserInfo (userId) {
+  const url = `${$config.hmapUrl}/i/api/staff/customDetail`
+  const data = {
+    userId,
+  }
+  const options = {
+    headers: {
+      Authorization: `Bearer ${window.localStorage.token}`,
+    },
+  }
+  return new Promise((resolve, reject) => {
+    axios.post(url, data, options).then(res => {
+      resolve({
+        account: res.accountNumber,
+        mobile: res.mobile,
+        userId: res.userId,
+        organizationId: res.organizationId,
+        email: res.email,
+      })
+    })
+  })
+}
+
+/**
+ * 获取中台的token
+ * @returns {Promise<*>}
+ */
+export async function getSupportToken () {
+  const url = `${$config.loginPath}appadmin`
+  const res = await axios.post(url)
+  return res
+}
+
+/**
+ * 获取业务系统个人信息
+ * @returns {Promise<*>}
+ */
+export async function getLeasingUserInfo (account, mobile) {
+  window.localStorage.setItem('account', account)
+  const url = `${$config.basePath}hmap_app_login`
+  const data = {
+    'user_name': account,
+    'mobile': mobile,
+  }
+  const options = {
+    headers: {
+      Authorization: `Bearer ${window.localStorage.access_token}`,
+    },
+  }
+  return new Promise((resolve, reject) => {
+    axios.post(url, data, options).then(res => {
+      //  console.log('leasingInfo:' + JSON.stringify(res))
+      if (res.result === 'S') {
+        resolve(res.user_info[0])
+      }
+    })
+  })
+}
+
+/**
+ * 登录总成
+ * @param  {String}  [type] 可选:'online''local'
+ * @param  {Boolean} [needInfo] 是否需要获取用户详细信息
+ * @return {Object.Promise} 若登录成功PromiseValue为数据对象/登录失败PromiseValue 为 false
+ */
+export async function login (type = 'online', needInfo = true) { // 登录
+  const env = process.env.CONFIG_ENV // 环境
+  try {
+    let result = {}
+    let tokenInfo = {}
+    tokenInfo = await getSupportToken()
+    window.localStorage.setItem('access_token', tokenInfo.access_token)
+
+    if (env === 'prod' || env === 'uat') { // 真机
+      if (type === 'online') result = await authorizedLogin() // 在线子应用
+      if (type === 'local') result = await bridgeLogin() // 本地子应用
+      window.localStorage.setItem('mobile', result.mobile)
+      result.userInfo = await getLeasingUserInfo(result.account, result.mobile)
+    } else {
+      result = await analogLogin()
+      result.hmapUserInfo = await getUserInfo(result.userId)
+      window.localStorage.setItem('mobile', result.hmapUserInfo.mobile)
+      result.userInfo = await getLeasingUserInfo(result.hmapUserInfo.account, result.hmapUserInfo.mobile)
+    }
+
+    window.localStorage.setItem('user_id', result.userInfo.user_id)
+    return result
+  } catch (e) {
+    // console.error(e)
+    return false
+  }
+}
+
+/**
+ * 海马汇业务系统集成登录
+ * @param type
+ * @param needInfo
+ * @returns {Promise<any>}
+ */
+export default function hmapLogin (type = 'local', needInfo = true) {
+  const env = process.env.CONFIG_ENV // 环境
+  return new Promise((resolve, reject) => {
+    try {
+      let result = {}
+      if (env === 'prod' || env === 'uat') { // 真机
+        if (type === 'online') {
+          authorizedLogin().then(res => {
+            result = res
+            window.localStorage.setItem('mobile', res.mobile)
+          })
+        }// 在线子应用
+        if (type === 'local') {
+          result = bridgeLogin().then(res => {
+            result = res
+            window.localStorage.setItem('mobile', res.mobile)
+          })
+        }
+        getSupportToken().then(res => {
+          window.localStorage.setItem('access_token', res.access_token)
+          getLeasingUserInfo(result.account, result.mobile).then(res => {
+            result.userInfo = res
+            window.localStorage.setItem('user_id', res.user_id)
+            resolve(result)
+          })
+        })
+      } else {
+        analogLogin().then(res => {
+          result = res
+          getUserInfo(res.userId).then(info => {
+            result.hmapUserInfo = info
+            window.localStorage.setItem('mobile', info.mobile)
+            getSupportToken().then(support => {
+              window.localStorage.setItem('access_token', support.access_token)
+              getLeasingUserInfo(info.account, info.mobile).then(res => {
+                result.userInfo = res
+                window.localStorage.setItem('user_id', res.user_id)
+                resolve(result)
+              })
+            })
+          })
+        })
+      }
+    } catch (e) {
+      reject(e)
+    }
+  })
+}

src/scripts/utils.js

+/**
+ * 一些帮助函数
+ * @author momoko
+ */
+
+/**
+ * 取URL上的参数
+ * @param  {String} param 参数名
+ * @return {String}
+ */
+export function getUrlParam (param) {
+  const result = window.location.href.match(new RegExp('(\\?|&)' + param + '(\\[\\])?=([^&#]*)'))
+  return result ? result[3] : undefined
+}
+
+/**
+ * 动态插入 script to html
+ * @param url
+ * @param callback
+ */
+export function createScript (url, callback) {
+  const oScript = document.createElement('script')
+  oScript.type = 'text/javascript'
+  oScript.async = true
+  oScript.src = url
+
+  /**
+   * IE6/7/8                -- onreadystatechange
+   * IE9/10                 -- onreadystatechange, onload
+   * Firefox/Chrome/Opera   -- onload
+   */
+
+  const isIE = !-[1,] // eslint-disable-line
+  if (isIE) {
+    // 判断IE8及以下浏览器
+    oScript.onreadystatechange = function () {
+      if (this.readyState === 'loaded' || this.readyState === 'complete') {
+        callback && callback()
+      }
+    }
+  } else {
+    // IE9及以上浏览器，Firefox，Chrome，Opera
+    oScript.onload = function () {
+      callback && callback()
+    }
+  }
+
+  document.body.appendChild(oScript)
+}
+
+/**
+ * 判断平台
+ * @return {String} 平台
+ */
+export function detectOS () {
+  const ua = navigator.userAgent.toLowerCase()
+
+  if (/MicroMessenger/i.test(ua)) {
+    return 'weixin'
+  } else if (/iPhone|iPad|iPod|iOS/i.test(ua)) {
+    return 'ios'
+  } else if (/Android/i.test(ua)) {
+    return 'android'
+  } else {
+    return 'other'
+  }
+}