main
limingtao
11 months ago
parent
21d60ea748
commit
63fcdd2a69
8 changed files with 1031 additions and 944 deletions
@ -1,459 +1,464 @@ |
||||
/** |
||||
* 请求封装 |
||||
*/ |
||||
import $ from "./globalJs"; |
||||
const tokenKey = "token"; |
||||
const tokenKeyValue = ""; |
||||
|
||||
class Request { |
||||
constructor(config = {}) { |
||||
this.config = {}; |
||||
this.config.baseUrl = config.baseUrl ? config.baseUrl : ""; |
||||
this.config.dataType = config.dataType ? config.dataType : "json"; |
||||
this.config.responseType = config.responseType |
||||
? config.responseType |
||||
: "text"; |
||||
this.config.header = config.header ? config.header : {}; |
||||
this.reqInterceptors = null; |
||||
this.resInterceptors = null; |
||||
this.interceptors = { |
||||
request: (fn) => { |
||||
this.reqInterceptors = fn; |
||||
}, |
||||
response: (fn) => { |
||||
this.resInterceptors = fn; |
||||
}, |
||||
}; |
||||
} |
||||
setConfig(config = {}) { |
||||
this.config = this._deepCopy(this._merge(this.config, config)); |
||||
} |
||||
// 请求封装
|
||||
globalRequest(url, config, method, isForm = "") { |
||||
const _this = this; |
||||
let newConfig = this._deepCopy(this._merge(this.config, config)); |
||||
let lastConfig = {}; |
||||
if (this.reqInterceptors && typeof this.reqInterceptors === "function") { |
||||
let reqInterceptors = this.reqInterceptors(newConfig); |
||||
if (!reqInterceptors && process.env.NODE_ENV === "development") { |
||||
console.log("请求被拦截，此消息仅在开发环境显示。"); |
||||
return false; |
||||
} else if ( |
||||
Object.prototype.toString.call(reqInterceptors) === "[object Promise]" |
||||
) { |
||||
return reqInterceptors; |
||||
} |
||||
lastConfig = this._deepCopy(reqInterceptors); |
||||
} else { |
||||
lastConfig = this._deepCopy(newConfig); |
||||
} |
||||
let header = {}; |
||||
let tokenData = $.getData("token"); |
||||
if (tokenData) { |
||||
header[tokenKey] = tokenKeyValue + tokenData; |
||||
} |
||||
if (isForm) { |
||||
header["content-type"] = "application/x-www-form-urlencoded"; |
||||
} |
||||
let fullUrl = this._formatUrl(lastConfig.baseUrl, url); |
||||
if (url.indexOf("http") != -1) { |
||||
fullUrl = url; |
||||
} |
||||
return new Promise((resolve, reject) => { |
||||
uni.request({ |
||||
url: fullUrl, |
||||
method: method, |
||||
data: config, |
||||
header: header, |
||||
async complete(response) { |
||||
let res = response; |
||||
if (response.statusCode == 404) { |
||||
$.toast("请求地址不存在"); |
||||
} else if (response.statusCode == 500) { |
||||
$.toast("服务器内部错误"); |
||||
} else { |
||||
console.log("response", response.statusCode); |
||||
let res = response; |
||||
if ( |
||||
_this.resInterceptors && |
||||
typeof _this.resInterceptors === "function" |
||||
) { |
||||
let resInterceptors = _this.resInterceptors(res); |
||||
// console.log('resInterceptors-----------------',resInterceptors)
|
||||
if ( |
||||
resInterceptors.statusCode == 401 || |
||||
resInterceptors.data.code == 403 |
||||
) { |
||||
$.toast("登录信息已过期，请重新登录"); |
||||
$.removeData("token"); |
||||
setTimeout(() => { |
||||
$.openNew("/pages/logIn/logIn"); |
||||
}, 1500); |
||||
return; |
||||
} else if (resInterceptors.statusCode != 200) { |
||||
$.toast(resInterceptors.data.message); |
||||
} |
||||
if (!resInterceptors && resInterceptors != "") { |
||||
reject("返回值已被您拦截！"); |
||||
return; |
||||
} else if ( |
||||
Object.prototype.toString.call(resInterceptors) === |
||||
"[object Promise]" |
||||
) { |
||||
try { |
||||
let promiseRes = await resInterceptors; |
||||
resolve(promiseRes); |
||||
} catch (error) { |
||||
reject(error); |
||||
} |
||||
} else { |
||||
res = resInterceptors; |
||||
} |
||||
} |
||||
} |
||||
resolve(res.data); |
||||
}, |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
addFile(file, success, progress) { |
||||
const _this = this; |
||||
let newConfig = this._deepCopy(this._merge(this.config, {})); |
||||
let lastConfig = {}; |
||||
if (this.reqInterceptors && typeof this.reqInterceptors === "function") { |
||||
let reqInterceptors = this.reqInterceptors(newConfig); |
||||
if (!reqInterceptors && process.env.NODE_ENV === "development") { |
||||
console.log("请求被拦截，此消息仅在开发环境显示。"); |
||||
return false; |
||||
} else if ( |
||||
Object.prototype.toString.call(reqInterceptors) === "[object Promise]" |
||||
) { |
||||
return reqInterceptors; |
||||
} |
||||
lastConfig = this._deepCopy(reqInterceptors); |
||||
} else { |
||||
lastConfig = this._deepCopy(newConfig); |
||||
} |
||||
let fullUrl = this._formatUrl(lastConfig.baseUrl, $.imgUrl); |
||||
let header = { |
||||
// 'content-Type':'multipart/form-data'
|
||||
}; |
||||
return new Promise((resolve, reject) => { |
||||
const UploadTask = uni.uploadFile({ |
||||
url: fullUrl, |
||||
filePath: file[0].path, |
||||
header: header, |
||||
name: $.fileImgKey, |
||||
formData: {}, |
||||
async complete(response) { |
||||
let res = response; |
||||
if ( |
||||
_this.resInterceptors && |
||||
typeof _this.resInterceptors === "function" |
||||
) { |
||||
let resInterceptors = _this.resInterceptors(res); |
||||
if (!resInterceptors && resInterceptors != "") { |
||||
reject("返回值已被您拦截！"); |
||||
return; |
||||
} else if ( |
||||
Object.prototype.toString.call(resInterceptors) === |
||||
"[object Promise]" |
||||
) { |
||||
try { |
||||
let promiseRes = await resInterceptors; |
||||
resolve(promiseRes); |
||||
} catch (error) { |
||||
reject(error); |
||||
} |
||||
} else { |
||||
res = resInterceptors; |
||||
} |
||||
} |
||||
success(JSON.parse(res.data)); |
||||
}, |
||||
}); |
||||
// 监听上传进度
|
||||
if (progress) { |
||||
UploadTask.onProgressUpdate((res) => { |
||||
progress(res.progress); |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
// 上传图片
|
||||
addImg(length = 1, success, progress, type = 1) { |
||||
// 获取本地图片的路径
|
||||
uni.chooseImage({ |
||||
count: length, |
||||
// original原图compressed压缩图
|
||||
sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
|
||||
// camera相机album相册
|
||||
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success: (res) => { |
||||
// 显示上传动画
|
||||
$.showLoading("图片上传中..."); |
||||
var imgs; |
||||
imgs = res.tempFilePaths; |
||||
// #ifdef H5
|
||||
// 调用上传图片的函数
|
||||
// 处理多选
|
||||
// if (imgs.length > length) {
|
||||
// imgs = imgs.slice(0, length);
|
||||
// }
|
||||
this.fileImg(imgs, 0, success, progress, type); |
||||
// #endif
|
||||
// #ifdef APP
|
||||
console.log("imgs", imgs); |
||||
// 将新添加的图片添加到imgs_arr中
|
||||
uni.compressImage({ |
||||
src: imgs[0], |
||||
quality: 60, // 仅对jpg有效
|
||||
success: (ress) => { |
||||
this.fileImg([ress.tempFilePath], 0, success, progress, type); |
||||
}, |
||||
fail: (err) => { |
||||
$.hideLoading("图片上传中..."); |
||||
}, |
||||
complete: (msg) => {}, |
||||
}); |
||||
// #endif
|
||||
}, |
||||
complete: (err) => {}, |
||||
}); |
||||
} |
||||
fileImg(imgs, index, success, progress, type) { |
||||
const _this = this; |
||||
let newConfig = this._deepCopy(this._merge(this.config, {})); |
||||
let lastConfig = {}; |
||||
if (this.reqInterceptors && typeof this.reqInterceptors === "function") { |
||||
let reqInterceptors = this.reqInterceptors(newConfig); |
||||
if (!reqInterceptors && process.env.NODE_ENV === "development") { |
||||
console.log("请求被拦截，此消息仅在开发环境显示。"); |
||||
return false; |
||||
} else if ( |
||||
Object.prototype.toString.call(reqInterceptors) === "[object Promise]" |
||||
) { |
||||
return reqInterceptors; |
||||
} |
||||
lastConfig = this._deepCopy(reqInterceptors); |
||||
} else { |
||||
lastConfig = this._deepCopy(newConfig); |
||||
} |
||||
let fullUrl = this._formatUrl(lastConfig.baseUrl, $.imgUrl); |
||||
if (type == 2) { |
||||
fullUrl = this._formatUrl(lastConfig.baseUrl, $.imgUserIdUrl); |
||||
} |
||||
let header = { |
||||
token: $.getData("token"), |
||||
}; |
||||
// 如果数组长度大于下标，说明没有上传完
|
||||
if (imgs.length > index) { |
||||
var src = imgs[index]; |
||||
return new Promise((resolve, reject) => { |
||||
const UploadTask = uni.uploadFile({ |
||||
url: fullUrl, |
||||
filePath: src, |
||||
header: header, |
||||
name: $.fileImgKey, |
||||
formData: {}, |
||||
async complete(response) { |
||||
let res = response; |
||||
if ( |
||||
_this.resInterceptors && |
||||
typeof _this.resInterceptors === "function" |
||||
) { |
||||
let resInterceptors = _this.resInterceptors(res); |
||||
// console.log('resInterceptors',resInterceptors)
|
||||
let datasJSON = JSON.parse(resInterceptors.data); |
||||
if (datasJSON.code == 1101) { |
||||
} |
||||
if (!resInterceptors && resInterceptors != "") { |
||||
reject("返回值已被您拦截！"); |
||||
return; |
||||
} else if ( |
||||
Object.prototype.toString.call(resInterceptors) === |
||||
"[object Promise]" |
||||
) { |
||||
try { |
||||
let promiseRes = await resInterceptors; |
||||
resolve(promiseRes); |
||||
} catch (error) { |
||||
reject(error); |
||||
} |
||||
} else { |
||||
res = resInterceptors; |
||||
} |
||||
} |
||||
success(JSON.parse(res.data)); |
||||
_this.fileImg(imgs, index + 1, progress); |
||||
}, |
||||
}); |
||||
// 监听上传进度
|
||||
if (progress) { |
||||
UploadTask.onProgressUpdate((res) => { |
||||
progress(res.progress); |
||||
}); |
||||
} |
||||
}); |
||||
// #ifdef H5
|
||||
// 压缩
|
||||
// lrz(src, {
|
||||
// quality: 0.7,
|
||||
// }).then((rst) => { // fieldName 为 formData 中多媒体的字段名
|
||||
|
||||
// })
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
// #endif
|
||||
} else { |
||||
$.hideLoading(); |
||||
} |
||||
} |
||||
|
||||
// 上传视频
|
||||
addVideo(url, success, progress) { |
||||
// 获取本地视频的路径
|
||||
uni.chooseVideo({ |
||||
sourceType: ["album", "camera"], // 选择方式
|
||||
success: (res) => { |
||||
if (res.size > $.videoSize) { |
||||
let size = parseInt($.videoSize / 1024000); |
||||
$.toast("上传视频过大，大小请不要超过" + size + "M"); |
||||
} else { |
||||
// 显示上传动画
|
||||
$.showLoading("视频上传中..."); |
||||
// 调用上传视频的函数
|
||||
this.fileVideo(res.tempFilePath, url, success, progress); |
||||
} |
||||
}, |
||||
fail: (res) => { |
||||
console.log(JSON.stringify(res)); |
||||
}, |
||||
}); |
||||
} |
||||
fileVideo(src, url, success, progress) { |
||||
const _this = this; |
||||
let newConfig = this._deepCopy(this._merge(this.config, {})); |
||||
let lastConfig = {}; |
||||
if (this.reqInterceptors && typeof this.reqInterceptors === "function") { |
||||
let reqInterceptors = this.reqInterceptors(newConfig); |
||||
if (!reqInterceptors && process.env.NODE_ENV === "development") { |
||||
console.log("请求被拦截，此消息仅在开发环境显示。"); |
||||
return false; |
||||
} else if ( |
||||
Object.prototype.toString.call(reqInterceptors) === "[object Promise]" |
||||
) { |
||||
return reqInterceptors; |
||||
} |
||||
lastConfig = this._deepCopy(reqInterceptors); |
||||
} else { |
||||
lastConfig = this._deepCopy(newConfig); |
||||
} |
||||
let fullUrl = this._formatUrl(lastConfig.baseUrl, $.imgUrl); |
||||
//上传视频
|
||||
return new Promise((resolve, reject) => { |
||||
const UploadTask = uni.uploadFile({ |
||||
url: fullUrl, |
||||
filePath: src, |
||||
name: $.fileVideoKey, |
||||
async complete(response) { |
||||
let res = response; |
||||
if ( |
||||
_this.resInterceptors && |
||||
typeof _this.resInterceptors === "function" |
||||
) { |
||||
let resInterceptors = _this.resInterceptors(res); |
||||
// console.log('resInterceptors',resInterceptors)
|
||||
if (!resInterceptors && resInterceptors != "") { |
||||
reject("返回值已被您拦截！"); |
||||
return; |
||||
} else if ( |
||||
Object.prototype.toString.call(resInterceptors) === |
||||
"[object Promise]" |
||||
) { |
||||
try { |
||||
let promiseRes = await resInterceptors; |
||||
resolve(promiseRes); |
||||
} catch (error) { |
||||
reject(error); |
||||
} |
||||
} else { |
||||
res = resInterceptors; |
||||
} |
||||
} |
||||
success(JSON.parse(res.data)); |
||||
$.hideLoading(); |
||||
}, |
||||
success: (res) => { |
||||
success(JSON.parse(res.data)); |
||||
// 关闭上传动画
|
||||
}, |
||||
fail: (e) => { |
||||
// 关闭上传动画
|
||||
$.hideLoading(); |
||||
$.toast("上传超时！"); |
||||
}, |
||||
}); |
||||
// 监听上传进度
|
||||
if (progress) { |
||||
UploadTask.onProgressUpdate((res) => { |
||||
progress(res.progress); |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_formatUrl(baseUrl, url) { |
||||
if (!baseUrl) return url; |
||||
let formatUrl = ""; |
||||
const baseUrlEndsWithSlash = baseUrl.endsWith("/"); |
||||
const urlStartsWithSlash = url.startsWith("/"); |
||||
if (baseUrlEndsWithSlash && urlStartsWithSlash) { |
||||
formatUrl = baseUrl + url.substring(1); |
||||
} else if (baseUrlEndsWithSlash || urlStartsWithSlash) { |
||||
formatUrl = baseUrl + url; |
||||
} else { |
||||
formatUrl = baseUrl + "/" + url; |
||||
} |
||||
return formatUrl; |
||||
} |
||||
_merge(oldConfig, newConfig) { |
||||
let mergeConfig = this._deepCopy(oldConfig); |
||||
if (!newConfig || !Object.keys(newConfig).length) return mergeConfig; |
||||
for (let key in newConfig) { |
||||
if (key !== "header") { |
||||
mergeConfig[key] = newConfig[key]; |
||||
} else { |
||||
if ( |
||||
Object.prototype.toString.call(newConfig[key]) === "[object Object]" |
||||
) { |
||||
for (let headerKey in newConfig[key]) { |
||||
mergeConfig[key][headerKey] = newConfig[key][headerKey]; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
return mergeConfig; |
||||
} |
||||
_deepCopy(obj) { |
||||
let result = Array.isArray(obj) ? [] : {}; |
||||
for (let key in obj) { |
||||
if (obj.hasOwnProperty(key)) { |
||||
if (typeof obj[key] === "object") { |
||||
result[key] = this._deepCopy(obj[key]); |
||||
} else { |
||||
result[key] = obj[key]; |
||||
} |
||||
} |
||||
} |
||||
return result; |
||||
} |
||||
} |
||||
|
||||
if (!global.$request) { |
||||
global.$request = new Request(); |
||||
} |
||||
|
||||
export default global.$request; |
||||
/** |
||||
* 请求封装 |
||||
*/ |
||||
import $ from "./globalJs"; |
||||
const tokenKey = "token"; |
||||
const tokenKeyValue = ""; |
||||
|
||||
class Request { |
||||
constructor(config = {}) { |
||||
this.config = {}; |
||||
this.config.baseUrl = config.baseUrl ? config.baseUrl : ""; |
||||
this.config.dataType = config.dataType ? config.dataType : "json"; |
||||
this.config.responseType = config.responseType ? |
||||
config.responseType : |
||||
"text"; |
||||
this.config.header = config.header ? config.header : {}; |
||||
this.reqInterceptors = null; |
||||
this.resInterceptors = null; |
||||
this.interceptors = { |
||||
request: (fn) => { |
||||
this.reqInterceptors = fn; |
||||
}, |
||||
response: (fn) => { |
||||
this.resInterceptors = fn; |
||||
}, |
||||
}; |
||||
} |
||||
setConfig(config = {}) { |
||||
this.config = this._deepCopy(this._merge(this.config, config)); |
||||
} |
||||
// 请求封装
|
||||
globalRequest(url, config, method, isForm = "") { |
||||
const _this = this; |
||||
let newConfig = this._deepCopy(this._merge(this.config, config)); |
||||
let lastConfig = {}; |
||||
if (this.reqInterceptors && typeof this.reqInterceptors === "function") { |
||||
let reqInterceptors = this.reqInterceptors(newConfig); |
||||
if (!reqInterceptors && process.env.NODE_ENV === "development") { |
||||
console.log("请求被拦截，此消息仅在开发环境显示。"); |
||||
return false; |
||||
} else if ( |
||||
Object.prototype.toString.call(reqInterceptors) === "[object Promise]" |
||||
) { |
||||
return reqInterceptors; |
||||
} |
||||
lastConfig = this._deepCopy(reqInterceptors); |
||||
} else { |
||||
lastConfig = this._deepCopy(newConfig); |
||||
} |
||||
let header = {}; |
||||
let tokenData = $.getData("token"); |
||||
if (tokenData) { |
||||
header[tokenKey] = tokenKeyValue + tokenData; |
||||
} |
||||
if (isForm) { |
||||
header["content-type"] = "application/x-www-form-urlencoded"; |
||||
} |
||||
let fullUrl = this._formatUrl(lastConfig.baseUrl, url); |
||||
if (url.indexOf("http") != -1) { |
||||
fullUrl = url; |
||||
} |
||||
return new Promise((resolve, reject) => { |
||||
uni.request({ |
||||
url: fullUrl, |
||||
method: method, |
||||
data: config, |
||||
header: header, |
||||
async complete(response) { |
||||
let res = response; |
||||
if ((response.errMsg == 'request:ok')) { |
||||
|
||||
if (response.statusCode == 404) { |
||||
$.toast("请求地址不存在"); |
||||
} else if (response.statusCode == 500) { |
||||
$.toast("服务器内部错误"); |
||||
} else { |
||||
// console.log("response", response.statusCode);
|
||||
let res = response; |
||||
if ( |
||||
_this.resInterceptors && |
||||
typeof _this.resInterceptors === "function" |
||||
) { |
||||
let resInterceptors = _this.resInterceptors(res); |
||||
// console.log('resInterceptors-----------------',resInterceptors)
|
||||
if ( |
||||
resInterceptors.statusCode == 401 || |
||||
resInterceptors.data.code == 403 |
||||
) { |
||||
$.toast("登录信息已过期，请重新登录"); |
||||
$.removeData("token"); |
||||
setTimeout(() => { |
||||
$.openNew("/pages/logIn/logIn"); |
||||
}, 1500); |
||||
return; |
||||
} else if (resInterceptors.statusCode != 200) { |
||||
$.toast(resInterceptors.data.message); |
||||
} |
||||
if (!resInterceptors && resInterceptors != "") { |
||||
reject("返回值已被您拦截！"); |
||||
return; |
||||
} else if ( |
||||
Object.prototype.toString.call(resInterceptors) === |
||||
"[object Promise]" |
||||
) { |
||||
try { |
||||
let promiseRes = await resInterceptors; |
||||
resolve(promiseRes); |
||||
} catch (error) { |
||||
reject(error); |
||||
} |
||||
} else { |
||||
res = resInterceptors; |
||||
} |
||||
} |
||||
} |
||||
resolve(res.data); |
||||
}else{ |
||||
reject() |
||||
} |
||||
|
||||
}, |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
addFile(file, success, progress) { |
||||
const _this = this; |
||||
let newConfig = this._deepCopy(this._merge(this.config, {})); |
||||
let lastConfig = {}; |
||||
if (this.reqInterceptors && typeof this.reqInterceptors === "function") { |
||||
let reqInterceptors = this.reqInterceptors(newConfig); |
||||
if (!reqInterceptors && process.env.NODE_ENV === "development") { |
||||
console.log("请求被拦截，此消息仅在开发环境显示。"); |
||||
return false; |
||||
} else if ( |
||||
Object.prototype.toString.call(reqInterceptors) === "[object Promise]" |
||||
) { |
||||
return reqInterceptors; |
||||
} |
||||
lastConfig = this._deepCopy(reqInterceptors); |
||||
} else { |
||||
lastConfig = this._deepCopy(newConfig); |
||||
} |
||||
let fullUrl = this._formatUrl(lastConfig.baseUrl, $.imgUrl); |
||||
let header = { |
||||
// 'content-Type':'multipart/form-data'
|
||||
}; |
||||
return new Promise((resolve, reject) => { |
||||
const UploadTask = uni.uploadFile({ |
||||
url: fullUrl, |
||||
filePath: file[0].path, |
||||
header: header, |
||||
name: $.fileImgKey, |
||||
formData: {}, |
||||
async complete(response) { |
||||
let res = response; |
||||
if ( |
||||
_this.resInterceptors && |
||||
typeof _this.resInterceptors === "function" |
||||
) { |
||||
let resInterceptors = _this.resInterceptors(res); |
||||
if (!resInterceptors && resInterceptors != "") { |
||||
reject("返回值已被您拦截！"); |
||||
return; |
||||
} else if ( |
||||
Object.prototype.toString.call(resInterceptors) === |
||||
"[object Promise]" |
||||
) { |
||||
try { |
||||
let promiseRes = await resInterceptors; |
||||
resolve(promiseRes); |
||||
} catch (error) { |
||||
reject(error); |
||||
} |
||||
} else { |
||||
res = resInterceptors; |
||||
} |
||||
} |
||||
success(JSON.parse(res.data)); |
||||
}, |
||||
}); |
||||
// 监听上传进度
|
||||
if (progress) { |
||||
UploadTask.onProgressUpdate((res) => { |
||||
progress(res.progress); |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
// 上传图片
|
||||
addImg(length = 1, success, progress, type = 1) { |
||||
// 获取本地图片的路径
|
||||
uni.chooseImage({ |
||||
count: length, |
||||
// original原图compressed压缩图
|
||||
sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
|
||||
// camera相机album相册
|
||||
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success: (res) => { |
||||
// 显示上传动画
|
||||
$.showLoading("图片上传中..."); |
||||
var imgs; |
||||
imgs = res.tempFilePaths; |
||||
// #ifdef H5
|
||||
// 调用上传图片的函数
|
||||
// 处理多选
|
||||
// if (imgs.length > length) {
|
||||
// imgs = imgs.slice(0, length);
|
||||
// }
|
||||
this.fileImg(imgs, 0, success, progress, type); |
||||
// #endif
|
||||
// #ifdef APP
|
||||
console.log("imgs", imgs); |
||||
// 将新添加的图片添加到imgs_arr中
|
||||
uni.compressImage({ |
||||
src: imgs[0], |
||||
quality: 60, // 仅对jpg有效
|
||||
success: (ress) => { |
||||
this.fileImg([ress.tempFilePath], 0, success, progress, type); |
||||
}, |
||||
fail: (err) => { |
||||
$.hideLoading("图片上传中..."); |
||||
}, |
||||
complete: (msg) => {}, |
||||
}); |
||||
// #endif
|
||||
}, |
||||
complete: (err) => {}, |
||||
}); |
||||
} |
||||
fileImg(imgs, index, success, progress, type) { |
||||
const _this = this; |
||||
let newConfig = this._deepCopy(this._merge(this.config, {})); |
||||
let lastConfig = {}; |
||||
if (this.reqInterceptors && typeof this.reqInterceptors === "function") { |
||||
let reqInterceptors = this.reqInterceptors(newConfig); |
||||
if (!reqInterceptors && process.env.NODE_ENV === "development") { |
||||
console.log("请求被拦截，此消息仅在开发环境显示。"); |
||||
return false; |
||||
} else if ( |
||||
Object.prototype.toString.call(reqInterceptors) === "[object Promise]" |
||||
) { |
||||
return reqInterceptors; |
||||
} |
||||
lastConfig = this._deepCopy(reqInterceptors); |
||||
} else { |
||||
lastConfig = this._deepCopy(newConfig); |
||||
} |
||||
let fullUrl = this._formatUrl(lastConfig.baseUrl, $.imgUrl); |
||||
if (type == 2) { |
||||
fullUrl = this._formatUrl(lastConfig.baseUrl, $.imgUserIdUrl); |
||||
} |
||||
let header = { |
||||
token: $.getData("token"), |
||||
}; |
||||
// 如果数组长度大于下标，说明没有上传完
|
||||
if (imgs.length > index) { |
||||
var src = imgs[index]; |
||||
return new Promise((resolve, reject) => { |
||||
const UploadTask = uni.uploadFile({ |
||||
url: fullUrl, |
||||
filePath: src, |
||||
header: header, |
||||
name: $.fileImgKey, |
||||
formData: {}, |
||||
async complete(response) { |
||||
let res = response; |
||||
if ( |
||||
_this.resInterceptors && |
||||
typeof _this.resInterceptors === "function" |
||||
) { |
||||
let resInterceptors = _this.resInterceptors(res); |
||||
// console.log('resInterceptors',resInterceptors)
|
||||
let datasJSON = JSON.parse(resInterceptors.data); |
||||
if (datasJSON.code == 1101) {} |
||||
if (!resInterceptors && resInterceptors != "") { |
||||
reject("返回值已被您拦截！"); |
||||
return; |
||||
} else if ( |
||||
Object.prototype.toString.call(resInterceptors) === |
||||
"[object Promise]" |
||||
) { |
||||
try { |
||||
let promiseRes = await resInterceptors; |
||||
resolve(promiseRes); |
||||
} catch (error) { |
||||
reject(error); |
||||
} |
||||
} else { |
||||
res = resInterceptors; |
||||
} |
||||
} |
||||
success(JSON.parse(res.data)); |
||||
_this.fileImg(imgs, index + 1, progress); |
||||
}, |
||||
}); |
||||
// 监听上传进度
|
||||
if (progress) { |
||||
UploadTask.onProgressUpdate((res) => { |
||||
progress(res.progress); |
||||
}); |
||||
} |
||||
}); |
||||
// #ifdef H5
|
||||
// 压缩
|
||||
// lrz(src, {
|
||||
// quality: 0.7,
|
||||
// }).then((rst) => { // fieldName 为 formData 中多媒体的字段名
|
||||
|
||||
// })
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
// #endif
|
||||
} else { |
||||
$.hideLoading(); |
||||
} |
||||
} |
||||
|
||||
// 上传视频
|
||||
addVideo(url, success, progress) { |
||||
// 获取本地视频的路径
|
||||
uni.chooseVideo({ |
||||
sourceType: ["album", "camera"], // 选择方式
|
||||
success: (res) => { |
||||
if (res.size > $.videoSize) { |
||||
let size = parseInt($.videoSize / 1024000); |
||||
$.toast("上传视频过大，大小请不要超过" + size + "M"); |
||||
} else { |
||||
// 显示上传动画
|
||||
$.showLoading("视频上传中..."); |
||||
// 调用上传视频的函数
|
||||
this.fileVideo(res.tempFilePath, url, success, progress); |
||||
} |
||||
}, |
||||
fail: (res) => { |
||||
console.log(JSON.stringify(res)); |
||||
}, |
||||
}); |
||||
} |
||||
fileVideo(src, url, success, progress) { |
||||
const _this = this; |
||||
let newConfig = this._deepCopy(this._merge(this.config, {})); |
||||
let lastConfig = {}; |
||||
if (this.reqInterceptors && typeof this.reqInterceptors === "function") { |
||||
let reqInterceptors = this.reqInterceptors(newConfig); |
||||
if (!reqInterceptors && process.env.NODE_ENV === "development") { |
||||
console.log("请求被拦截，此消息仅在开发环境显示。"); |
||||
return false; |
||||
} else if ( |
||||
Object.prototype.toString.call(reqInterceptors) === "[object Promise]" |
||||
) { |
||||
return reqInterceptors; |
||||
} |
||||
lastConfig = this._deepCopy(reqInterceptors); |
||||
} else { |
||||
lastConfig = this._deepCopy(newConfig); |
||||
} |
||||
let fullUrl = this._formatUrl(lastConfig.baseUrl, $.imgUrl); |
||||
//上传视频
|
||||
return new Promise((resolve, reject) => { |
||||
const UploadTask = uni.uploadFile({ |
||||
url: fullUrl, |
||||
filePath: src, |
||||
name: $.fileVideoKey, |
||||
async complete(response) { |
||||
let res = response; |
||||
if ( |
||||
_this.resInterceptors && |
||||
typeof _this.resInterceptors === "function" |
||||
) { |
||||
let resInterceptors = _this.resInterceptors(res); |
||||
// console.log('resInterceptors',resInterceptors)
|
||||
if (!resInterceptors && resInterceptors != "") { |
||||
reject("返回值已被您拦截！"); |
||||
return; |
||||
} else if ( |
||||
Object.prototype.toString.call(resInterceptors) === |
||||
"[object Promise]" |
||||
) { |
||||
try { |
||||
let promiseRes = await resInterceptors; |
||||
resolve(promiseRes); |
||||
} catch (error) { |
||||
reject(error); |
||||
} |
||||
} else { |
||||
res = resInterceptors; |
||||
} |
||||
} |
||||
success(JSON.parse(res.data)); |
||||
$.hideLoading(); |
||||
}, |
||||
success: (res) => { |
||||
success(JSON.parse(res.data)); |
||||
// 关闭上传动画
|
||||
}, |
||||
fail: (e) => { |
||||
// 关闭上传动画
|
||||
$.hideLoading(); |
||||
$.toast("上传超时！"); |
||||
}, |
||||
}); |
||||
// 监听上传进度
|
||||
if (progress) { |
||||
UploadTask.onProgressUpdate((res) => { |
||||
progress(res.progress); |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
_formatUrl(baseUrl, url) { |
||||
if (!baseUrl) return url; |
||||
let formatUrl = ""; |
||||
const baseUrlEndsWithSlash = baseUrl.endsWith("/"); |
||||
const urlStartsWithSlash = url.startsWith("/"); |
||||
if (baseUrlEndsWithSlash && urlStartsWithSlash) { |
||||
formatUrl = baseUrl + url.substring(1); |
||||
} else if (baseUrlEndsWithSlash || urlStartsWithSlash) { |
||||
formatUrl = baseUrl + url; |
||||
} else { |
||||
formatUrl = baseUrl + "/" + url; |
||||
} |
||||
return formatUrl; |
||||
} |
||||
_merge(oldConfig, newConfig) { |
||||
let mergeConfig = this._deepCopy(oldConfig); |
||||
if (!newConfig || !Object.keys(newConfig).length) return mergeConfig; |
||||
for (let key in newConfig) { |
||||
if (key !== "header") { |
||||
mergeConfig[key] = newConfig[key]; |
||||
} else { |
||||
if ( |
||||
Object.prototype.toString.call(newConfig[key]) === "[object Object]" |
||||
) { |
||||
for (let headerKey in newConfig[key]) { |
||||
mergeConfig[key][headerKey] = newConfig[key][headerKey]; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
return mergeConfig; |
||||
} |
||||
_deepCopy(obj) { |
||||
let result = Array.isArray(obj) ? [] : {}; |
||||
for (let key in obj) { |
||||
if (obj.hasOwnProperty(key)) { |
||||
if (typeof obj[key] === "object") { |
||||
result[key] = this._deepCopy(obj[key]); |
||||
} else { |
||||
result[key] = obj[key]; |
||||
} |
||||
} |
||||
} |
||||
return result; |
||||
} |
||||
} |
||||
|
||||
if (!global.$request) { |
||||
global.$request = new Request(); |
||||
} |
||||
|
||||
export default global.$request; |
||||
@ -1,307 +1,337 @@ |
||||
<template> |
||||
<view id="page"> |
||||
<view class="Width100 Box" :style="bgUrl1"> |
||||
<view class="Content MarginAuto"> |
||||
<image :src="$.imgSrc + '/scimg/logo1.png'" mode="aspectFit" class="Block Logo"></image> |
||||
<view class="NavBox Width100 MarginT_60rpx"> |
||||
<view class="Unit FloatL PositionR" v-for="(item,index) in navList" @click="chooseNav(item.type)"> |
||||
<text class="Block" :class="currNav == item.type ? 'FontS_46rpx Color_1A1F39 FontBold':'FontS_42rpx Color_B4BAC9'"> |
||||
{{ item.label }}</text> |
||||
<view class="Line BG_0064FF PositionA" v-show="currNav == item.type"></view> |
||||
</view> |
||||
<view class="ClearB"></view> |
||||
</view> |
||||
<!-- <view class="TypeBox MarginT_60rpx" v-if="currNav == 1"> |
||||
<view class="Unit FloatL" v-for="(item,index) in typeList" @click="chooseType(item.type)"> |
||||
<view class="Point FloatL" v-show="currType == item.type"> |
||||
<image :src="$.imgSrc + '/scimg/choose_y1.png'" mode="aspectFit" class="Block Width100 Height100"></image> |
||||
</view> |
||||
<view class="Point Border FloatL BorderR_50 InsideB" v-show="currType != item.type"></view> |
||||
<text class="Block MarginL_20rpx FontS_32rpx FloatL">{{item.label}}</text> |
||||
<view class="ClearB"></view> |
||||
</view> |
||||
<view class="ClearB"></view> |
||||
</view> --> |
||||
<view class="InputBox" :class="currNav == 1 ? 'MarginT_40rpx' : 'MarginT_80rpx'"> |
||||
<view class="Input MarginT_40rpx BG_F6F7FB"> |
||||
<!-- <view class="Num FloatL TextLeft MarginL_60rpx">--> |
||||
<!-- <text class="InlineBlock FontS_34rpx Color_1A1F39 FontBold">+86</text>--> |
||||
<!-- </view>--> |
||||
<input type="text" placeholder="请输入用户名" v-model="logInData.phone" class="Height100 Input1 FloatL MarginL_60rpx FontS_32rpx"> |
||||
<view class="ClearB"></view> |
||||
</view> |
||||
<view class="Input MarginT_40rpx BG_F6F7FB" v-if="currNav == 1"> |
||||
<input type="text" v-model="logInData.validateCode" placeholder="请输入验证码" class="Height100 Input1 FloatL MarginL_60rpx FontS_32rpx"> |
||||
<view class="CodeBox FloatR MarginR_60rpx" @click="getCode"> |
||||
<text class="Block FontS_28rpx" :class="isCodeDisabled ? 'Color_B4BAC9':'Color_0064FF'">{{ btnText }}</text> |
||||
</view> |
||||
<view class="ClearB"></view> |
||||
</view> |
||||
<view class="Input MarginT_40rpx BG_F6F7FB"> |
||||
<input type="password" v-model="logInData.password" placeholder="请输入您的密码" class="Height100 Input2 FloatL MarginL_60rpx FontS_32rpx"> |
||||
<view class="ClearB"></view> |
||||
</view> |
||||
</view> |
||||
<!-- <view class="Agree Width100 MarginT_60rpx" @click="chooseAgree"> |
||||
<view class="Point FloatL" v-if="isAgree"> |
||||
<image :src="$.imgSrc + '/scimg/choose_y1.png'" mode="aspectFit" class="Block Width100 Height100"></image> |
||||
</view> |
||||
<view class="Point Border FloatL BorderR_50 InsideB" v-else></view> |
||||
<text class="Block FloatL MarginL_20rpx Color_605F72 FontS_26rpx">本人已同意</text> |
||||
<text class="Block FloatL Color_0064FF FontS_26rpx" @click.stop="checkAgree(2)">《用户协议》</text> |
||||
<text class="Block FloatL Color_605F72 FontS_26rpx">与</text> |
||||
<text class="Block FloatL Color_0064FF FontS_26rpx" @click.stop="checkAgree(3)">《隐私协议》</text> |
||||
<view class="ClearB"></view> |
||||
</view> --> |
||||
<button type="button" :disabled="isDisabled" class="Btn Block Width100 Color_FFFFFF FontS_36rpx FontBold" @click="confirmSub">{{ currNav == 1 ? '注册':'登录' }}</button> |
||||
<text @click="findPsw" class="Block MarginT_40rpx TextCenter FontS_26rpx Color_0064FF" v-if="currNav == 2">找回密码？</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
// 组件 |
||||
components: {}, |
||||
data() { |
||||
return { |
||||
// 公用的js |
||||
$: this.$, |
||||
bgUrl1:'', // 登录信息背景图 |
||||
isAgree:false, |
||||
navList:[ |
||||
// {type:1,label:'注册'}, |
||||
{type:2,label:'登录'}, |
||||
], |
||||
currNav:2, |
||||
currType:1, |
||||
isDisabled:false, |
||||
logInData:{ |
||||
phone:'', // |
||||
validateCode:'', // |
||||
password:'', // |
||||
}, // |
||||
btnText:'获取验证码', |
||||
times:null, |
||||
seconds:60, |
||||
isCodeDisabled:false, |
||||
} |
||||
}, |
||||
// 页面加载 |
||||
onLoad(e) { |
||||
if(typeof(e.type) != 'undefined'){ |
||||
this.currNav = e.type |
||||
} |
||||
}, |
||||
// 页面显示 |
||||
onShow() { |
||||
// 顶部背景图 |
||||
this.bgUrl1 = "background-image:url('" + this.$.imgSrc + "/scimg/bg1.png');background-repeat: no-repeat;background-position: center top;background-size:100% 472rpx;" |
||||
}, |
||||
// 计算属性 |
||||
computed: {}, |
||||
// 方法 |
||||
methods: { |
||||
checkAgree(type){ |
||||
let urlKey = 'portalTextType' |
||||
this.$.open('/pages/logIn/agree?type=' + type) |
||||
}, |
||||
getCode(){ |
||||
if(!this.$.isEmpty(this.logInData.phone)){ |
||||
this.$.toast('请输入手机号') |
||||
return |
||||
} |
||||
let datas = { |
||||
phone:this.logInData.phone, |
||||
type:2 |
||||
} |
||||
this.isCodeDisabled = true |
||||
this.$request.globalRequest('/hyjg-admin/mapi/account/sendSmsCode', datas, 'POST').then(res => { |
||||
if(res.code == 0){ |
||||
this.timeDown() |
||||
}else{ |
||||
this.$.toast(res.msg) |
||||
this.isCodeDisabled = false |
||||
} |
||||
}) |
||||
}, |
||||
timeDown(){ |
||||
this.times = setInterval(() => { |
||||
if(this.seconds > 0){ |
||||
this.seconds -- |
||||
this.btnText = this.seconds + 'S' |
||||
}else { |
||||
this.seconds = 60 |
||||
this.isCodeDisabled = false |
||||
this.btnText = '获取验证码' |
||||
clearInterval(this.times) |
||||
} |
||||
},1000) |
||||
}, |
||||
// 提交 |
||||
confirmSub(){ |
||||
// this.$.setData('token','1') |
||||
// this.$.openTab('/pages/index/index') |
||||
// return |
||||
// this.$.open('/pages/logIn/userInfo') |
||||
let url = '/hyjg-admin/mapi/account/register' |
||||
if(!this.$.isEmpty(this.logInData.phone)){ |
||||
this.$.toast('请填写用户名') |
||||
return |
||||
} |
||||
if(!this.$.isEmpty(this.logInData.password)){ |
||||
this.$.toast('请填写密码') |
||||
return |
||||
} |
||||
// if(!this.isAgree){ |
||||
// this.$.toast('请勾选用户协议和隐私协议') |
||||
// return |
||||
// } |
||||
let datas = { |
||||
nuserid: this.logInData.phone, |
||||
cuserpwd: this.logInData.password, |
||||
} |
||||
url = '/hiddenDanger/auth/login' |
||||
this.$.showLoading('登录中...') |
||||
this.isDisabled = true |
||||
this.$request.globalRequest(url, datas, 'POST').then(res => { |
||||
if(res.code === 200){ |
||||
this.$.toast('登录成功') |
||||
this.$.setData('token',res.result.nuserid) |
||||
this.$.setData('userInfo', { username: res.result.nuserid,role:res.result.role }) |
||||
setTimeout(() => { |
||||
this.$.hideLoading('登录中...') |
||||
this.isDisabled = false |
||||
this.$.openTab('/pages/index/index') |
||||
},1500) |
||||
}else{ |
||||
this.$.toast(res.message) |
||||
this.isDisabled = false |
||||
} |
||||
}) |
||||
}, |
||||
// 找回密码 |
||||
findPsw(){ |
||||
this.$.open('/pages/logIn/findPsw') |
||||
}, |
||||
chooseAgree(){ |
||||
this.isAgree = !this.isAgree |
||||
}, |
||||
chooseNav(type){ |
||||
this.currNav = type |
||||
}, |
||||
chooseType(type){ |
||||
this.currType = type |
||||
}, |
||||
// 跳转页面 |
||||
skipPage(even){ |
||||
this.$.open(even) |
||||
}, |
||||
}, |
||||
onReady() { |
||||
}, |
||||
// 页面卸载 |
||||
onUnload() { |
||||
|
||||
}, |
||||
// 触发下拉刷新 |
||||
onPullDownRefresh() { |
||||
// 延迟关闭刷新动画 |
||||
setTimeout(() => { |
||||
uni.stopPullDownRefresh(); |
||||
}, 1500); |
||||
}, |
||||
// 页面上拉触底事件的处理函数 |
||||
onReachBottom() { |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
page { |
||||
background:#FFFFFF; |
||||
} |
||||
</style> |
||||
<style lang="scss" scoped> |
||||
|
||||
.Box{ |
||||
padding-top:var(--status-bar-height); |
||||
.Content{ |
||||
width: calc(100% - 176rpx); |
||||
padding: 132rpx 0rpx 180rpx 0rpx; |
||||
.Logo{ |
||||
width: 150rpx; |
||||
height: 150rpx; |
||||
} |
||||
.NavBox{ |
||||
.Unit{ |
||||
margin-right: 110rpx; |
||||
.Line{ |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
bottom: -26rpx; |
||||
width: 74rpx; |
||||
height: 10rpx; |
||||
border-radius: 6rpx; |
||||
} |
||||
} |
||||
} |
||||
.TypeBox{ |
||||
.Unit{ |
||||
margin-right: 108rpx; |
||||
.Point{ |
||||
width: 46rpx; |
||||
height: 46rpx; |
||||
} |
||||
.Border{ |
||||
width: 46rpx; |
||||
height: 46rpx; |
||||
border: 4rpx solid #B3BACB; |
||||
} |
||||
} |
||||
} |
||||
.InputBox{ |
||||
.Input{ |
||||
height: 110rpx; |
||||
border-radius: 56rpx; |
||||
.CodeBox{ |
||||
text{ |
||||
line-height: 110rpx; |
||||
} |
||||
} |
||||
.Num{ |
||||
width: 110rpx; |
||||
border-right: 4rpx solid #DADADA; |
||||
margin-top: 34rpx; |
||||
} |
||||
.Input1{ |
||||
width: calc(100% - 260rpx); |
||||
} |
||||
.Input2{ |
||||
width: calc(100% - 120rpx); |
||||
} |
||||
} |
||||
} |
||||
.Agree{ |
||||
.Point{ |
||||
width: 34rpx; |
||||
height: 34rpx; |
||||
} |
||||
.Border{ |
||||
width: 34rpx; |
||||
height: 34rpx; |
||||
border: 2rpx solid #B3BACB; |
||||
} |
||||
} |
||||
.Btn{ |
||||
margin-top: 196rpx; |
||||
height: 108rpx; |
||||
background: linear-gradient(90deg, #0064FF 0%, #2D99FD 100%); |
||||
box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(194,218,255,1); |
||||
border-radius: 54rpx; |
||||
line-height: 108rpx; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
<template> |
||||
<view id="page"> |
||||
<view class="Width100 Box" :style="bgUrl1"> |
||||
<view class="Content MarginAuto"> |
||||
<image :src="$.imgSrc + '/scimg/logo1.png'" mode="aspectFit" class="Block Logo"></image> |
||||
<view class="NavBox Width100 MarginT_60rpx"> |
||||
<view class="Unit FloatL PositionR" v-for="(item,index) in navList" @click="chooseNav(item.type)"> |
||||
<text class="Block" |
||||
:class="currNav == item.type ? 'FontS_46rpx Color_1A1F39 FontBold':'FontS_42rpx Color_B4BAC9'"> |
||||
{{ item.label }}</text> |
||||
<view class="Line BG_0064FF PositionA" v-show="currNav == item.type"></view> |
||||
</view> |
||||
<view class="ClearB"></view> |
||||
</view> |
||||
<!-- <view class="TypeBox MarginT_60rpx" v-if="currNav == 1"> |
||||
<view class="Unit FloatL" v-for="(item,index) in typeList" @click="chooseType(item.type)"> |
||||
<view class="Point FloatL" v-show="currType == item.type"> |
||||
<image :src="$.imgSrc + '/scimg/choose_y1.png'" mode="aspectFit" class="Block Width100 Height100"></image> |
||||
</view> |
||||
<view class="Point Border FloatL BorderR_50 InsideB" v-show="currType != item.type"></view> |
||||
<text class="Block MarginL_20rpx FontS_32rpx FloatL">{{item.label}}</text> |
||||
<view class="ClearB"></view> |
||||
</view> |
||||
<view class="ClearB"></view> |
||||
</view> --> |
||||
<view class="InputBox" :class="currNav == 1 ? 'MarginT_40rpx' : 'MarginT_80rpx'"> |
||||
<view class="Input MarginT_40rpx BG_F6F7FB"> |
||||
<!-- <view class="Num FloatL TextLeft MarginL_60rpx">--> |
||||
<!-- <text class="InlineBlock FontS_34rpx Color_1A1F39 FontBold">+86</text>--> |
||||
<!-- </view>--> |
||||
<input type="text" placeholder="请输入用户名" v-model="logInData.phone" |
||||
class="Height100 Input1 FloatL MarginL_60rpx FontS_32rpx"> |
||||
<view class="ClearB"></view> |
||||
</view> |
||||
<view class="Input MarginT_40rpx BG_F6F7FB" v-if="currNav == 1"> |
||||
<input type="text" v-model="logInData.validateCode" placeholder="请输入验证码" |
||||
class="Height100 Input1 FloatL MarginL_60rpx FontS_32rpx"> |
||||
<view class="CodeBox FloatR MarginR_60rpx" @click="getCode"> |
||||
<text class="Block FontS_28rpx" |
||||
:class="isCodeDisabled ? 'Color_B4BAC9':'Color_0064FF'">{{ btnText }}</text> |
||||
</view> |
||||
<view class="ClearB"></view> |
||||
</view> |
||||
<view class="Input MarginT_40rpx BG_F6F7FB"> |
||||
<input type="password" v-model="logInData.password" placeholder="请输入您的密码" |
||||
class="Height100 Input2 FloatL MarginL_60rpx FontS_32rpx"> |
||||
<view class="ClearB"></view> |
||||
</view> |
||||
</view> |
||||
<!-- <view class="Agree Width100 MarginT_60rpx" @click="chooseAgree"> |
||||
<view class="Point FloatL" v-if="isAgree"> |
||||
<image :src="$.imgSrc + '/scimg/choose_y1.png'" mode="aspectFit" class="Block Width100 Height100"></image> |
||||
</view> |
||||
<view class="Point Border FloatL BorderR_50 InsideB" v-else></view> |
||||
<text class="Block FloatL MarginL_20rpx Color_605F72 FontS_26rpx">本人已同意</text> |
||||
<text class="Block FloatL Color_0064FF FontS_26rpx" @click.stop="checkAgree(2)">《用户协议》</text> |
||||
<text class="Block FloatL Color_605F72 FontS_26rpx">与</text> |
||||
<text class="Block FloatL Color_0064FF FontS_26rpx" @click.stop="checkAgree(3)">《隐私协议》</text> |
||||
<view class="ClearB"></view> |
||||
</view> --> |
||||
<button type="button" :disabled="isDisabled" |
||||
class="Btn Block Width100 Color_FFFFFF FontS_36rpx FontBold" |
||||
@click="confirmSub">{{ currNav == 1 ? '注册':'登录' }}</button> |
||||
<text @click="findPsw" class="Block MarginT_40rpx TextCenter FontS_26rpx Color_0064FF" |
||||
v-if="currNav == 2">找回密码？</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
// 组件 |
||||
components: {}, |
||||
data() { |
||||
return { |
||||
// 公用的js |
||||
$: this.$, |
||||
bgUrl1: '', // 登录信息背景图 |
||||
isAgree: false, |
||||
navList: [ |
||||
// {type:1,label:'注册'}, |
||||
{ |
||||
type: 2, |
||||
label: '登录' |
||||
}, |
||||
], |
||||
currNav: 2, |
||||
currType: 1, |
||||
isDisabled: false, |
||||
logInData: { |
||||
phone: '', // |
||||
validateCode: '', // |
||||
password: '', // |
||||
}, // |
||||
btnText: '获取验证码', |
||||
times: null, |
||||
seconds: 60, |
||||
isCodeDisabled: false, |
||||
} |
||||
}, |
||||
// 页面加载 |
||||
onLoad(e) { |
||||
if (typeof(e.type) != 'undefined') { |
||||
this.currNav = e.type |
||||
} |
||||
}, |
||||
// 页面显示 |
||||
onShow() { |
||||
// 顶部背景图 |
||||
this.bgUrl1 = "background-image:url('" + this.$.imgSrc + |
||||
"/scimg/bg1.png');background-repeat: no-repeat;background-position: center top;background-size:100% 472rpx;" |
||||
}, |
||||
// 计算属性 |
||||
computed: {}, |
||||
// 方法 |
||||
methods: { |
||||
checkAgree(type) { |
||||
let urlKey = 'portalTextType' |
||||
this.$.open('/pages/logIn/agree?type=' + type) |
||||
}, |
||||
getCode() { |
||||
if (!this.$.isEmpty(this.logInData.phone)) { |
||||
this.$.toast('请输入手机号') |
||||
return |
||||
} |
||||
let datas = { |
||||
phone: this.logInData.phone, |
||||
type: 2 |
||||
} |
||||
this.isCodeDisabled = true |
||||
this.$request.globalRequest('/hyjg-admin/mapi/account/sendSmsCode', datas, 'POST').then(res => { |
||||
if (res.code == 0) { |
||||
this.timeDown() |
||||
} else { |
||||
this.$.toast(res.msg) |
||||
this.isCodeDisabled = false |
||||
} |
||||
}) |
||||
}, |
||||
timeDown() { |
||||
this.times = setInterval(() => { |
||||
if (this.seconds > 0) { |
||||
this.seconds-- |
||||
this.btnText = this.seconds + 'S' |
||||
} else { |
||||
this.seconds = 60 |
||||
this.isCodeDisabled = false |
||||
this.btnText = '获取验证码' |
||||
clearInterval(this.times) |
||||
} |
||||
}, 1000) |
||||
}, |
||||
// 提交 |
||||
confirmSub() { |
||||
// this.$.setData('token','1') |
||||
// this.$.openTab('/pages/index/index') |
||||
// return |
||||
// this.$.open('/pages/logIn/userInfo') |
||||
let url = '/hyjg-admin/mapi/account/register' |
||||
if (!this.$.isEmpty(this.logInData.phone)) { |
||||
this.$.toast('请填写用户名') |
||||
return |
||||
} |
||||
if (!this.$.isEmpty(this.logInData.password)) { |
||||
this.$.toast('请填写密码') |
||||
return |
||||
} |
||||
// if(!this.isAgree){ |
||||
// this.$.toast('请勾选用户协议和隐私协议') |
||||
// return |
||||
// } |
||||
let datas = { |
||||
nuserid: this.logInData.phone, |
||||
cuserpwd: this.logInData.password, |
||||
} |
||||
url = '/hiddenDanger/auth/login' |
||||
this.$.showLoading('登录中...') |
||||
this.isDisabled = true |
||||
this.$request.globalRequest(url, datas, 'POST').then(res => { |
||||
if (res.code === 200) { |
||||
this.$.toast('登录成功') |
||||
this.$.setData('token', res.result.nuserid) |
||||
this.$.setData('userInfo', { |
||||
username: res.result.nuserid, |
||||
role: res.result.role |
||||
}) |
||||
setTimeout(() => { |
||||
this.$.hideLoading('登录中...') |
||||
this.isDisabled = false |
||||
this.$.openTab('/pages/index/index') |
||||
}, 1500) |
||||
} else { |
||||
this.$.toast(res.message) |
||||
this.isDisabled = false |
||||
} |
||||
}).catch(() => { |
||||
this.isDisabled = false |
||||
this.$.toast('连接服务器失败') |
||||
}) |
||||
}, |
||||
// 找回密码 |
||||
findPsw() { |
||||
this.$.open('/pages/logIn/findPsw') |
||||
}, |
||||
chooseAgree() { |
||||
this.isAgree = !this.isAgree |
||||
}, |
||||
chooseNav(type) { |
||||
this.currNav = type |
||||
}, |
||||
chooseType(type) { |
||||
this.currType = type |
||||
}, |
||||
// 跳转页面 |
||||
skipPage(even) { |
||||
this.$.open(even) |
||||
}, |
||||
}, |
||||
onReady() {}, |
||||
// 页面卸载 |
||||
onUnload() { |
||||
|
||||
}, |
||||
// 触发下拉刷新 |
||||
onPullDownRefresh() { |
||||
// 延迟关闭刷新动画 |
||||
setTimeout(() => { |
||||
uni.stopPullDownRefresh(); |
||||
}, 1500); |
||||
}, |
||||
// 页面上拉触底事件的处理函数 |
||||
onReachBottom() {}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
page { |
||||
background: #FFFFFF; |
||||
} |
||||
</style> |
||||
<style lang="scss" scoped> |
||||
.Box { |
||||
padding-top: var(--status-bar-height); |
||||
|
||||
.Content { |
||||
width: calc(100% - 176rpx); |
||||
padding: 132rpx 0rpx 180rpx 0rpx; |
||||
|
||||
.Logo { |
||||
width: 150rpx; |
||||
height: 150rpx; |
||||
} |
||||
|
||||
.NavBox { |
||||
.Unit { |
||||
margin-right: 110rpx; |
||||
|
||||
.Line { |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
bottom: -26rpx; |
||||
width: 74rpx; |
||||
height: 10rpx; |
||||
border-radius: 6rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.TypeBox { |
||||
.Unit { |
||||
margin-right: 108rpx; |
||||
|
||||
.Point { |
||||
width: 46rpx; |
||||
height: 46rpx; |
||||
} |
||||
|
||||
.Border { |
||||
width: 46rpx; |
||||
height: 46rpx; |
||||
border: 4rpx solid #B3BACB; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.InputBox { |
||||
.Input { |
||||
height: 110rpx; |
||||
border-radius: 56rpx; |
||||
|
||||
.CodeBox { |
||||
text { |
||||
line-height: 110rpx; |
||||
} |
||||
} |
||||
|
||||
.Num { |
||||
width: 110rpx; |
||||
border-right: 4rpx solid #DADADA; |
||||
margin-top: 34rpx; |
||||
} |
||||
|
||||
.Input1 { |
||||
width: calc(100% - 260rpx); |
||||
} |
||||
|
||||
.Input2 { |
||||
width: calc(100% - 120rpx); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.Agree { |
||||
.Point { |
||||
width: 34rpx; |
||||
height: 34rpx; |
||||
} |
||||
|
||||
.Border { |
||||
width: 34rpx; |
||||
height: 34rpx; |
||||
border: 2rpx solid #B3BACB; |
||||
} |
||||
} |
||||
|
||||
.Btn { |
||||
margin-top: 196rpx; |
||||
height: 108rpx; |
||||
background: linear-gradient(90deg, #0064FF 0%, #2D99FD 100%); |
||||
box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(194, 218, 255, 1); |
||||
border-radius: 54rpx; |
||||
line-height: 108rpx; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,161 +1,196 @@ |
||||
<template> |
||||
<view id="page" class="password-box"> |
||||
<view class="Width100 Box BorderBox"> |
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" class="form" labelWidth="100"> |
||||
<!-- <u-form-item label="原密码" prop="password" borderBottom> |
||||
<u--input v-model="form.password" border="none"></u--input> |
||||
</u-form-item> --> |
||||
<u-form-item label="新密码" prop="password" borderBottom> |
||||
<u--input v-model="form.password" border="none"></u--input> |
||||
</u-form-item> |
||||
<u-form-item label="确认密码" prop="confirmPassword" borderBottom> |
||||
<u--input v-model="form.confirmPassword" border="none"></u--input> |
||||
</u-form-item> |
||||
</u--form> |
||||
<view @click="submit" class="Unit FontBold BorderBox TextCenter Width100 MarginT_30rpx BorderR_30rpx submit"> |
||||
提交 |
||||
</view> |
||||
<!-- <uni-forms :modelValue="formData" border> |
||||
<uni-forms-item label="道路类型"> |
||||
<input v-if="isEdit" type="text" class="BorderNone Height100" v-model="formData.roadType" |
||||
placeholder="请输入道路类型" /> |
||||
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ |
||||
formData.roadType |
||||
}}</text> |
||||
</uni-forms-item> |
||||
</uni-forms > --> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
// 公用的js |
||||
$: this.$, |
||||
rules: { |
||||
// 'password': { |
||||
// type: 'string', |
||||
// required: true, |
||||
// message: '请填写原密码', |
||||
// trigger: ['blur', 'change'] |
||||
// }, |
||||
|
||||
}, |
||||
form: { |
||||
confirmPassword: "", |
||||
password: "" |
||||
}, |
||||
} |
||||
}, |
||||
// 页面加载 |
||||
onLoad(e) { |
||||
|
||||
}, |
||||
// 页面显示 |
||||
onShow() { |
||||
}, |
||||
// 计算属性 |
||||
computed: {}, |
||||
// 方法 |
||||
methods: { |
||||
// sexSelect(e) { |
||||
// this.model1.userInfo.sex = e.name |
||||
// this.$refs.uForm.validateField('userInfo.sex') |
||||
// }, |
||||
}, |
||||
onReady() { |
||||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。 |
||||
this.$refs.uForm.setRules(this.rules) |
||||
}, |
||||
// 页面卸载 |
||||
onUnload() { |
||||
|
||||
}, |
||||
methods: { |
||||
//修改密码 |
||||
submit() { |
||||
if (!this.form.password) { |
||||
this.$.toast('请输入密码') |
||||
} |
||||
else if (this.form.password != this.form.confirmPassword) { |
||||
this.$.toast('两次密码不一致') |
||||
} else { |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/auth/updatePwd", |
||||
{ |
||||
cusername: this.$.getData('userInfo').username, |
||||
nuserid: this.$.getData("token"), |
||||
nuserpwd: this.form.password, |
||||
}, |
||||
"POST", |
||||
true |
||||
) |
||||
.then((res) => { |
||||
|
||||
if (res.code === 200) { |
||||
this.$.toast('密码修改成功~') |
||||
setTimeout(() => { |
||||
uni.navigateBack({ |
||||
delta: 1, |
||||
}); |
||||
}, 2000); |
||||
} else { |
||||
this.$.toast(res.message) |
||||
} |
||||
|
||||
}); |
||||
} |
||||
|
||||
}, |
||||
}, |
||||
// 触发下拉刷新 |
||||
onPullDownRefresh() { |
||||
|
||||
}, |
||||
// 页面上拉触底事件的处理函数 |
||||
onReachBottom() { |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
<style lang="scss" scoped> |
||||
page { |
||||
background: #F6F8FA; |
||||
} |
||||
|
||||
.password-box { |
||||
position: fixed; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #F6F8FA; |
||||
padding: 10rpx 30rpx; |
||||
|
||||
.form { |
||||
width: 690rpx; |
||||
} |
||||
|
||||
/deep/ .u-form-item__body { |
||||
padding: 30rpx 10rpx; |
||||
} |
||||
|
||||
.submit { |
||||
/* background: #E1EDFF; */ |
||||
background: linear-gradient(90deg, #0064FF 0%, #2D99FD 100%); |
||||
color: #ffffff; |
||||
width: 690rpx !important; |
||||
height: 94rpx; |
||||
line-height: 94rpx; |
||||
border-radius: 13rpx; |
||||
margin-top: 70rpx; |
||||
font-weight: 500; |
||||
margin-left: 0; |
||||
font-size: 32rpx; |
||||
letter-spacing: 4rpx; |
||||
} |
||||
} |
||||
<template> |
||||
<view id="page" class="password-box"> |
||||
<view class="Width100 Box BorderBox"> |
||||
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" class="form" labelWidth="100"> |
||||
<!-- <u-form-item label="原密码" prop="password" borderBottom> |
||||
<u--input v-model="form.password" border="none"></u--input> |
||||
</u-form-item> --> |
||||
<u-form-item label="新密码" prop="password" borderBottom> |
||||
<u--input v-model="form.password" border="none" :password="isPassword"> |
||||
<template slot="suffix"> |
||||
<u-icon name="eye-off" v-if="isPassword" @click="isPassword=!isPassword"></u-icon> |
||||
<u-icon name="eye-fill" v-else @click="isPassword=!isPassword"></u-icon> |
||||
</template> |
||||
</u--input> |
||||
</u-form-item> |
||||
<u-form-item label="确认密码" prop="confirmPassword" borderBottom> |
||||
<u--input v-model="form.confirmPassword" border="none" :password="isPassword"> |
||||
<template slot="suffix"> |
||||
<u-icon name="eye-off" v-if="isPassword" @click="isPassword=!isPassword"></u-icon> |
||||
<u-icon name="eye-fill" v-else @click="isPassword=!isPassword"></u-icon> |
||||
</template> |
||||
</u--input> |
||||
</u-form-item> |
||||
<text class="tip"> 密码需要包含数字、大小写字母、特殊符号中3种以上组合。</text> |
||||
</u--form> |
||||
|
||||
<view @click="submit" |
||||
class="Unit FontBold BorderBox TextCenter Width100 MarginT_30rpx BorderR_30rpx submit"> |
||||
提交 |
||||
</view> |
||||
<!-- <uni-forms :modelValue="formData" border> |
||||
<uni-forms-item label="道路类型"> |
||||
<input v-if="isEdit" type="text" class="BorderNone Height100" v-model="formData.roadType" |
||||
placeholder="请输入道路类型" /> |
||||
<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ |
||||
formData.roadType |
||||
}}</text> |
||||
</uni-forms-item> |
||||
</uni-forms > --> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
// 公用的js |
||||
$: this.$, |
||||
rules: { |
||||
// 'password': { |
||||
// type: 'string', |
||||
// required: true, |
||||
// message: '请填写原密码', |
||||
// trigger: ['blur', 'change'] |
||||
// }, |
||||
|
||||
}, |
||||
form: { |
||||
confirmPassword: "", |
||||
password: "" |
||||
}, |
||||
isPassword: true |
||||
} |
||||
}, |
||||
// 页面加载 |
||||
onLoad(e) { |
||||
|
||||
}, |
||||
// 页面显示 |
||||
onShow() {}, |
||||
// 计算属性 |
||||
computed: {}, |
||||
// 方法 |
||||
methods: { |
||||
// sexSelect(e) { |
||||
// this.model1.userInfo.sex = e.name |
||||
// this.$refs.uForm.validateField('userInfo.sex') |
||||
// }, |
||||
}, |
||||
onReady() { |
||||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。 |
||||
this.$refs.uForm.setRules(this.rules) |
||||
}, |
||||
// 页面卸载 |
||||
onUnload() { |
||||
|
||||
}, |
||||
methods: { |
||||
isValidPassword(password) { |
||||
// 定义正则表达式 |
||||
const hasDigit = /\d/.test(password); |
||||
const hasUpper = /[A-Z]/.test(password); |
||||
const hasLower = /[a-z]/.test(password); |
||||
const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password); // 示例特殊字符集 |
||||
|
||||
// 计算满足条件的类型数量 |
||||
let count = 0; |
||||
if (hasDigit) count++; |
||||
if (hasUpper) count++; |
||||
if (hasLower) count++; |
||||
if (hasSpecial) count++; |
||||
|
||||
// 返回是否满足至少3种组合 |
||||
return count >= 3; |
||||
}, |
||||
//修改密码 |
||||
submit() { |
||||
if (!this.form.password) { |
||||
this.$.toast('请输入密码') |
||||
} else if(!this.isValidPassword(this.form.password)){ |
||||
this.$.toast('密码格式不正确') |
||||
} else if (this.form.password != this.form.confirmPassword) { |
||||
this.$.toast('两次密码不一致') |
||||
} else { |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/auth/updatePwd", { |
||||
cusername: this.$.getData('userInfo').username, |
||||
nuserid: this.$.getData("token"), |
||||
nuserpwd: this.form.password, |
||||
}, |
||||
"POST", |
||||
true |
||||
) |
||||
.then((res) => { |
||||
|
||||
if (res.code === 200) { |
||||
this.$.toast('密码修改成功~') |
||||
setTimeout(() => { |
||||
uni.navigateBack({ |
||||
delta: 1, |
||||
}); |
||||
}, 2000); |
||||
} else { |
||||
this.$.toast(res.message) |
||||
} |
||||
|
||||
}); |
||||
} |
||||
|
||||
}, |
||||
}, |
||||
// 触发下拉刷新 |
||||
onPullDownRefresh() { |
||||
|
||||
}, |
||||
// 页面上拉触底事件的处理函数 |
||||
onReachBottom() {}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
<style lang="scss" scoped> |
||||
page { |
||||
background: #F6F8FA; |
||||
} |
||||
|
||||
.password-box { |
||||
position: fixed; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #F6F8FA; |
||||
padding: 10rpx 30rpx; |
||||
|
||||
.form { |
||||
width: 690rpx; |
||||
} |
||||
.tip{ |
||||
font-size:24rpx; |
||||
top:10rpx; |
||||
position:relative; |
||||
color:#e01515; |
||||
} |
||||
|
||||
/deep/ .u-form-item__body { |
||||
padding: 30rpx 10rpx; |
||||
} |
||||
|
||||
.submit { |
||||
/* background: #E1EDFF; */ |
||||
background: linear-gradient(90deg, #0064FF 0%, #2D99FD 100%); |
||||
color: #ffffff; |
||||
width: 690rpx !important; |
||||
height: 94rpx; |
||||
line-height: 94rpx; |
||||
border-radius: 13rpx; |
||||
margin-top: 70rpx; |
||||
font-weight: 500; |
||||
margin-left: 0; |
||||
font-size: 32rpx; |
||||
letter-spacing: 4rpx; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue