JING
1 year ago
commit
fee01f75c0
@ -0,0 +1,73 @@ |
|||||||
|
<style lang="scss"> |
||||||
|
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */ |
||||||
|
@import "@/uni_modules/uview-ui/index.scss"; |
||||||
|
@import "@/static/css/iconfont.css"; |
||||||
|
</style> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
onLaunch: function(options) { |
||||||
|
console.log('App Launch'); |
||||||
|
var _this =this; |
||||||
|
//系统信息 |
||||||
|
uni.getSystemInfo({ |
||||||
|
success:(res) => { |
||||||
|
console.log(res); |
||||||
|
_this.$user.session('app_system_info',res); |
||||||
|
//检测当前平台，如果是安卓则启动安卓更新 |
||||||
|
_this.$user.session('app_system',res.platform); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// #ifdef APP-PLUS |
||||||
|
// 锁定屏幕方向 |
||||||
|
plus.screen.lockOrientation('portrait-primary'); //锁定 |
||||||
|
// #endif |
||||||
|
}, |
||||||
|
onShow: function() { |
||||||
|
console.log('App Show') |
||||||
|
var _this =this; |
||||||
|
// #ifdef MP |
||||||
|
//这里目前微信小程序和抖音功能基本一样 |
||||||
|
uni.getProvider({ |
||||||
|
service: 'oauth', |
||||||
|
success: function (res) { |
||||||
|
console.log(res.provider) |
||||||
|
var provider = res.provider[0]; |
||||||
|
|
||||||
|
uni.login({ |
||||||
|
provider:provider, |
||||||
|
scopes:'auth_base', |
||||||
|
success: function (rs) { |
||||||
|
console.log(rs); |
||||||
|
//发起网络请求 |
||||||
|
var post = {loginCode: rs.code}; |
||||||
|
_this.$api.post('ycl/user/wx-login', post,function(res){ |
||||||
|
console.log(res); |
||||||
|
_this.$user.session('openid',res.wxOpenid); |
||||||
|
_this.$user.session('user_id',res.id); |
||||||
|
if(!_this.$com.isNull(res.token)) |
||||||
|
{ |
||||||
|
_this.$user.session('token',res.token); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
fail:function(rs){ |
||||||
|
console.log('登录失败'+rs.errMsg); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
// #endif |
||||||
|
}, |
||||||
|
onHide: function() { |
||||||
|
console.log('App Hide') |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
@ -0,0 +1,90 @@ |
|||||||
|
|
||||||
|
var access = { |
||||||
|
|
||||||
|
getAccess:function(k,userinfo){ |
||||||
|
if (userinfo && userinfo.access) { |
||||||
|
return userinfo.access.indexOf(k) != -1; |
||||||
|
} |
||||||
|
return false; |
||||||
|
}, |
||||||
|
|
||||||
|
hasAccess:function(arr,userinfo) { |
||||||
|
if (userinfo && userinfo.access) { |
||||||
|
return userinfo.access.some(_ => arr.indexOf(_) > -1); |
||||||
|
} |
||||||
|
return false; |
||||||
|
}, |
||||||
|
|
||||||
|
/** 是否一级商户 */ |
||||||
|
isSuperType:function(userinfo){ |
||||||
|
if (this.getAccess(1002,userinfo)) { |
||||||
|
return userinfo.userType == 2 |
||||||
|
} |
||||||
|
if (this.getAccess(1003,userinfo) || this.getAccess(1004,userinfo)) { |
||||||
|
return userinfo.userType == 1 |
||||||
|
} |
||||||
|
return false; |
||||||
|
}, |
||||||
|
/** 是否区级商户 */ |
||||||
|
isAreaType:function(userinfo){ |
||||||
|
if (this.getAccess(1002,userinfo)) { |
||||||
|
return userinfo.userType == 1 |
||||||
|
} |
||||||
|
if (this.getAccess(1003,userinfo) || this.getAccess(1004,userinfo)) { |
||||||
|
return userinfo.userType == 2 |
||||||
|
} |
||||||
|
return false; |
||||||
|
}, |
||||||
|
/** 是否员工 */ |
||||||
|
isYuangongType:function(userinfo){ |
||||||
|
if (this.getAccess(1002,userinfo)) { |
||||||
|
return userinfo.userType == 3 |
||||||
|
} |
||||||
|
if (this.getAccess(1004,userinfo)) { |
||||||
|
return userinfo.userType == 4 |
||||||
|
} |
||||||
|
return false; |
||||||
|
}, |
||||||
|
/** 是否三级 */ |
||||||
|
isThirdType:function(userinfo){ |
||||||
|
if (this.getAccess(1004,userinfo)) { |
||||||
|
return userinfo.userType == 3 |
||||||
|
} |
||||||
|
return false; |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
// 判断身份
|
||||||
|
checkidentity:function(userinfo) { |
||||||
|
var res = {} |
||||||
|
if (this.isSuperType(userinfo)) { |
||||||
|
res = { |
||||||
|
levelTxt: '一级', |
||||||
|
levelVal: 1 |
||||||
|
} |
||||||
|
} else if (this.isAreaType(userinfo)) { |
||||||
|
res = { |
||||||
|
levelTxt: '二级', |
||||||
|
levelVal: 2 |
||||||
|
} |
||||||
|
} else if (this.isThirdType(userinfo)) { |
||||||
|
res = { |
||||||
|
levelTxt: '店长', |
||||||
|
levelVal: 3 |
||||||
|
} |
||||||
|
/* } else if (this.isYuangongType(userinfo)) { |
||||||
|
res = { |
||||||
|
levelTxt: '员工', |
||||||
|
levelVal: 3 |
||||||
|
} */ |
||||||
|
} else { |
||||||
|
res = { |
||||||
|
levelTxt: '用户', |
||||||
|
levelVal: 4 |
||||||
|
} |
||||||
|
} |
||||||
|
return res |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = access |
||||||
@ -0,0 +1,200 @@ |
|||||||
|
const md5 = require('./md5.js'); |
||||||
|
const ENV = require('./env.js'); |
||||||
|
var api = { |
||||||
|
|
||||||
|
/** |
||||||
|
* post 请求数据
|
||||||
|
*
|
||||||
|
* @param string urlName url地址 |
||||||
|
* @param {object} data 数据对象 |
||||||
|
* @param function thenFun then回调 |
||||||
|
* @param function catchFun catch回调 |
||||||
|
*/ |
||||||
|
post:function(urlName, data, thenFun,catchFun) { |
||||||
|
//数据组合
|
||||||
|
var newData = Object.assign(api.setSign(data), ENV.appData()); |
||||||
|
uni.$u.http.post(urlName, newData).then(res => { |
||||||
|
if(thenFun) thenFun(res); |
||||||
|
}).catch((rs) =>{ |
||||||
|
if(catchFun) catchFun(rs); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* get 请求数据
|
||||||
|
*
|
||||||
|
* @param string urlName url地址 |
||||||
|
* @param {object} data 数据对象 |
||||||
|
* @param function thenFun then回调 |
||||||
|
* @param function catchFun catch回调 |
||||||
|
*/ |
||||||
|
get:function(urlName, data, thenFun,catchFun) { |
||||||
|
//数据组合
|
||||||
|
var newData = Object.assign(api.setSign(data), ENV.appData()); |
||||||
|
uni.$u.http.get(urlName,{params:newData}).then(res => { |
||||||
|
if(thenFun) thenFun(res); |
||||||
|
}).catch((rs) =>{ |
||||||
|
if(catchFun) catchFun(rs); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* put 请求数据
|
||||||
|
*
|
||||||
|
* @param string urlName url地址 |
||||||
|
* @param {object} data 数据对象 |
||||||
|
* @param function thenFun then回调 |
||||||
|
* @param function catchFun catch回调 |
||||||
|
*/ |
||||||
|
put:function(urlName, data, thenFun,catchFun) { |
||||||
|
//数据组合
|
||||||
|
var newData = Object.assign(api.setSign(data), ENV.appData()); |
||||||
|
uni.$u.http.put(urlName, newData).then(res => { |
||||||
|
if(thenFun) thenFun(res); |
||||||
|
}).catch((rs) =>{ |
||||||
|
if(catchFun) catchFun(rs); |
||||||
|
}); |
||||||
|
}, |
||||||
|
/** |
||||||
|
* delete 请求数据
|
||||||
|
*
|
||||||
|
* @param string urlName url地址 |
||||||
|
* @param {object} data 数据对象 |
||||||
|
* @param function thenFun then回调 |
||||||
|
* @param function catchFun catch回调 |
||||||
|
*/ |
||||||
|
delete:function(urlName, data, thenFun,catchFun) { |
||||||
|
//数据组合
|
||||||
|
var newData = Object.assign(api.setSign(data), ENV.appData()); |
||||||
|
uni.$u.http.delete(urlName, newData).then(res => { |
||||||
|
if(thenFun) thenFun(res); |
||||||
|
}).catch((rs) =>{ |
||||||
|
if(catchFun) catchFun(rs); |
||||||
|
}); |
||||||
|
}, |
||||||
|
/** |
||||||
|
* upload 请求数据
|
||||||
|
*
|
||||||
|
* @param string urlName url地址 |
||||||
|
* @param {object} data 数据对象 {filePath:'',fileType:'image'} |
||||||
|
* @param function thenFun then回调 |
||||||
|
* @param function catchFun catch回调 |
||||||
|
*/ |
||||||
|
upload:function(urlName, data, thenFun,catchFun){ |
||||||
|
var newData = data; |
||||||
|
uni.$u.http.upload(urlName, { |
||||||
|
params: {}, /* 会加在url上 */ |
||||||
|
// #ifdef MP-ALIPAY
|
||||||
|
fileType: newData.fileType, // 仅支付宝小程序，且必填。image/video/audio
|
||||||
|
// #endif
|
||||||
|
filePath: newData.filePath, // 要上传文件资源的路径。
|
||||||
|
// 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
|
||||||
|
custom: {auth:true,toast:true,}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
|
||||||
|
name: 'files', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
|
||||||
|
// #ifdef H5 || APP-PLUS
|
||||||
|
timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
|
||||||
|
// #endif
|
||||||
|
header: { |
||||||
|
"Content-Type": "multipart/form-data" |
||||||
|
}, /* 会与全局header合并，如有同名属性，局部覆盖全局 */ |
||||||
|
formData: {}, // HTTP 请求中其他额外的 form data
|
||||||
|
// 返回当前请求的task, options。请勿在此处修改options。非必填
|
||||||
|
getTask: (task, options) => { |
||||||
|
task.onProgressUpdate((res) => { |
||||||
|
console.log('上传进度' + res.progress); |
||||||
|
console.log('已经上传的数据长度' + res.totalBytesSent); |
||||||
|
console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend); |
||||||
|
}); |
||||||
|
}, |
||||||
|
}).then(res => { |
||||||
|
if(thenFun) thenFun(res); |
||||||
|
}).catch((rs) =>{ |
||||||
|
if(catchFun) catchFun(rs); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
setSign:function(data) { |
||||||
|
const date = parseInt(new Date().getTime() / 1000); |
||||||
|
const str = date + 'xingzhi&&2021'; |
||||||
|
data.i_app_timestamp = date; |
||||||
|
data.i_app_key = md5(str); |
||||||
|
//判断登录 openid 和 unionid 的来源
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
data.i_app_platform = 'APP-PLUS';
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef MP
|
||||||
|
//微信小程序
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
data.i_app_platform = 'MP-WEIXIN';
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
//支付宝小程序
|
||||||
|
// #ifdef MP-ALIPAY
|
||||||
|
data.i_app_platform = 'MP-ALIPAY';
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
//百度小程序
|
||||||
|
// #ifdef MP-BAIDU
|
||||||
|
data.i_app_platform = 'MP-BAIDU';
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
//头条小程序
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
data.i_app_platform = 'MP-TOUTIAO';
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
//QQ小程序
|
||||||
|
// #ifdef MP-QQ
|
||||||
|
data.i_app_platform = 'MP-QQ';
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
//360小程序
|
||||||
|
// #ifdef MP-360
|
||||||
|
data.i_app_platform = 'MP-360';
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
data.i_app_platform = 'H5';
|
||||||
|
// #endif
|
||||||
|
//语言包
|
||||||
|
data.i_app_lang ='zh'; |
||||||
|
//系统
|
||||||
|
data.i_app_system = uni.getStorageSync('app_system'); |
||||||
|
|
||||||
|
//这里是token 如果登录每个接口都需要这个
|
||||||
|
const token = uni.getStorageSync('token'); |
||||||
|
if(token.length > 0) |
||||||
|
{ |
||||||
|
data.token = token; |
||||||
|
}
|
||||||
|
return data; |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 返回域名 |
||||||
|
*
|
||||||
|
*/ |
||||||
|
domain:function() { |
||||||
|
return ENV.CdnUrl; |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 返回接口地址 |
||||||
|
*
|
||||||
|
*/ |
||||||
|
api:function() { |
||||||
|
return ENV.ApiUrl; |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 返回接口环境 |
||||||
|
*
|
||||||
|
*/ |
||||||
|
env:function(){ |
||||||
|
return ENV.EnvShow; |
||||||
|
}, |
||||||
|
} |
||||||
|
module.exports = api; |
||||||
@ -0,0 +1,268 @@ |
|||||||
|
const u_check = uni.$u.test; |
||||||
|
var com = { |
||||||
|
|
||||||
|
/**************uview集成********************************/ |
||||||
|
/** |
||||||
|
* 验证检测 |
||||||
|
*
|
||||||
|
* @param array || obj || ... value 需要验证的值(可以是 array || obj || ... ) |
||||||
|
* @param string type 需要验证的类型(可以是 array || obj || ...) |
||||||
|
*/ |
||||||
|
check:function(value,type) |
||||||
|
{ |
||||||
|
switch(type) { |
||||||
|
//数组
|
||||||
|
case 'array': |
||||||
|
return u_check.array(value); |
||||||
|
break; |
||||||
|
//json字符串
|
||||||
|
case 'json': |
||||||
|
return u_check.jsonString(value); |
||||||
|
break; |
||||||
|
//object对象
|
||||||
|
case 'object': |
||||||
|
return u_check.object(value); |
||||||
|
break;
|
||||||
|
//email 邮箱号
|
||||||
|
case 'email': |
||||||
|
return u_check.email(value); |
||||||
|
break;
|
||||||
|
//mobile 手机号
|
||||||
|
case 'mobile': |
||||||
|
return u_check.mobile(value); |
||||||
|
break; |
||||||
|
//url 地址
|
||||||
|
case 'url': |
||||||
|
return u_check.url(value); |
||||||
|
break;
|
||||||
|
//empty 是否为空
|
||||||
|
case 'empty': |
||||||
|
return u_check.isEmpty(value); |
||||||
|
break;
|
||||||
|
//注解
|
||||||
|
//总的来说，年月日之间可以用"/"或者"-"分隔(不能用中文分隔)，时分秒之间用":"分隔，数值不能超出范围，如月份不能为13，则检验成功，否则失败。
|
||||||
|
//date 日期时间
|
||||||
|
case 'date': |
||||||
|
return u_check.date(value); |
||||||
|
break; |
||||||
|
//number 是否十进制数值
|
||||||
|
case 'number': |
||||||
|
return u_check.number(value); |
||||||
|
break;
|
||||||
|
//digits 是否整数
|
||||||
|
case 'digits': |
||||||
|
return u_check.digits(value); |
||||||
|
break;
|
||||||
|
//idCard 是否身份证号
|
||||||
|
case 'id_card': |
||||||
|
return u_check.idCard(value); |
||||||
|
break;
|
||||||
|
//是否车牌号 (例:京A88888)
|
||||||
|
case 'car_no': |
||||||
|
return u_check.carNo(value); |
||||||
|
break;
|
||||||
|
//amount 金额字符串
|
||||||
|
case 'amount': |
||||||
|
return u_check.amount(value); |
||||||
|
break; |
||||||
|
//zh 是否汉字
|
||||||
|
case 'zh': |
||||||
|
return u_check.chinese(value); |
||||||
|
break; |
||||||
|
//en 是否字母 letter
|
||||||
|
case 'en': |
||||||
|
return u_check.letter(value); |
||||||
|
break; |
||||||
|
//str 是否字母或者数字
|
||||||
|
case 'str': |
||||||
|
return u_check.enOrNum(value); |
||||||
|
break; |
||||||
|
default: |
||||||
|
return false; |
||||||
|
}
|
||||||
|
}, |
||||||
|
//是否为空
|
||||||
|
isNull:function(value) |
||||||
|
{ |
||||||
|
if(value != null || value != 'null') |
||||||
|
{ |
||||||
|
return u_check.isEmpty(value); |
||||||
|
} |
||||||
|
else |
||||||
|
{ |
||||||
|
return true; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
/********************反馈信息****************************************************/ |
||||||
|
alert: function(info) { |
||||||
|
uni.showModal({ |
||||||
|
title: '提示', |
||||||
|
content: info, |
||||||
|
showCancel: false |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
alertDo: function(info, callback) { |
||||||
|
uni.showModal({ |
||||||
|
title: '提示', |
||||||
|
content: info, |
||||||
|
showCancel: false, |
||||||
|
success() { |
||||||
|
callback(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
confirm: function(info, callback, title) { |
||||||
|
uni.showModal({ |
||||||
|
title: title ? title : '提示', |
||||||
|
content: info, |
||||||
|
success: function(res) { |
||||||
|
if (res.confirm) { |
||||||
|
callback(); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
// 加载信息，带遮罩
|
||||||
|
showLoading: function(title = '', mask = true) { |
||||||
|
uni.showLoading({ |
||||||
|
title, |
||||||
|
mask |
||||||
|
}); |
||||||
|
},
|
||||||
|
|
||||||
|
// 隐藏遮罩
|
||||||
|
hideLoading:function () { |
||||||
|
uni.hideLoading(); |
||||||
|
},
|
||||||
|
|
||||||
|
showSuccess: function(info) { |
||||||
|
uni.showToast({ |
||||||
|
title: info, |
||||||
|
icon: 'success', |
||||||
|
duration: 3000 |
||||||
|
}); |
||||||
|
}, |
||||||
|
showError: function(info) { |
||||||
|
uni.showToast({ |
||||||
|
title: info, |
||||||
|
icon: 'none', |
||||||
|
duration: 3000 |
||||||
|
}); |
||||||
|
}, |
||||||
|
showSuccessDo: function(info, time, callback) { |
||||||
|
uni.showToast({ |
||||||
|
title: info, |
||||||
|
icon: 'success', |
||||||
|
duration: time, |
||||||
|
success: function() { |
||||||
|
callback(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
/******************加减乘除****************************************************/ |
||||||
|
/** |
||||||
|
* 加法精度计算 |
||||||
|
*
|
||||||
|
* @param {Object} number 数字 |
||||||
|
*/ |
||||||
|
bcadd: function(a, b){ |
||||||
|
var c, d, e; |
||||||
|
try { |
||||||
|
c = a.toString().split(".")[1].length |
||||||
|
} catch(f) { |
||||||
|
c = 0 |
||||||
|
} |
||||||
|
try { |
||||||
|
d = b.toString().split(".")[1].length |
||||||
|
} catch(f) { |
||||||
|
d = 0 |
||||||
|
} |
||||||
|
return e = Math.pow(10, Math.max(c, d)),(this.bcmul(a, e) + this.bcmul(b, e)) / e |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* 减法精度计算 |
||||||
|
*
|
||||||
|
* @param {Object} number 数字 |
||||||
|
*/ |
||||||
|
bcsub: function(a, b){ |
||||||
|
var c, d, e; |
||||||
|
try { |
||||||
|
c = a.toString().split(".")[1].length |
||||||
|
} catch(f) { |
||||||
|
c = 0 |
||||||
|
} |
||||||
|
try { |
||||||
|
d = b.toString().split(".")[1].length |
||||||
|
} catch(f) { |
||||||
|
d = 0 |
||||||
|
} |
||||||
|
return e = Math.pow(10, Math.max(c, d)),(this.bcmul(a, e) - this.bcmul(b, e)) / e |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* 乘法精度计算 |
||||||
|
*
|
||||||
|
* @param {Object} number 数字 |
||||||
|
*/ |
||||||
|
bcmul: function(a, b){ |
||||||
|
var c = 0, |
||||||
|
d = a.toString(), |
||||||
|
e = b.toString(); |
||||||
|
try { |
||||||
|
c += d.split(".")[1].length |
||||||
|
} catch(f) {} |
||||||
|
try { |
||||||
|
c += e.split(".")[1].length |
||||||
|
} catch(f) {} |
||||||
|
return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c) |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* 除法精度计算 |
||||||
|
*
|
||||||
|
* @param {Object} number 数字 |
||||||
|
*/ |
||||||
|
bcdiv: function(a, b){ |
||||||
|
var c, d, e = 0, |
||||||
|
f = 0; |
||||||
|
try { |
||||||
|
e = a.toString().split(".")[1].length |
||||||
|
} catch(g) {} |
||||||
|
try { |
||||||
|
f = b.toString().split(".")[1].length |
||||||
|
} catch(g) {} |
||||||
|
return c = Number(a.toString().replace(".", "")),d = Number(b.toString().replace(".", "")),this.bcmul(c / d, Math.pow(10, f - e)) |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* 隐藏手机号 |
||||||
|
* @param phone string 数值1 |
||||||
|
*/ |
||||||
|
hidephone:function (phone){ |
||||||
|
var reg = /^(\d{3})\d{4}(\d{4})$/;
|
||||||
|
return phone.replace(reg, "$1****$2") |
||||||
|
}, |
||||||
|
|
||||||
|
removeObserver(arr) { |
||||||
|
return arr.map((item) => { |
||||||
|
if (Array.isArray(item)) return removeObserver(item) |
||||||
|
else if (typeof item === 'object') { |
||||||
|
const target = {} |
||||||
|
for (let key in item) { |
||||||
|
if (key !== '__ob__') { |
||||||
|
target[key] = item[key] |
||||||
|
} |
||||||
|
} |
||||||
|
return target |
||||||
|
} |
||||||
|
return item |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
module.exports = com |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
//api接口环境配置
|
||||||
|
// production正式/development线上测试/local本地开发
|
||||||
|
var NowENV = 'development';
|
||||||
|
var ENV_API_URL = { |
||||||
|
production:'https://netcharge.spacechong.com/', //正式环境
|
||||||
|
development:'https://devnetcharge.spacechong.com/', //开发测试环境
|
||||||
|
local:'http://192.168.10.123:8901/',//本地调试环境
|
||||||
|
|
||||||
|
} |
||||||
|
//CdnUrl 环境配置[都默认为线上都行]
|
||||||
|
var ENV_BASE_URL = { |
||||||
|
production:'https://netcharge.spacechong.com', //正式环境
|
||||||
|
development:'https://netcharge.spacechong.com', //开发测试环境
|
||||||
|
local:'https://netcharge.spacechong.com',//本地调试环境
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var ENV = { |
||||||
|
EnvShow:NowENV,//当前环境
|
||||||
|
ApiUrl:ENV_API_URL[NowENV], //正式
|
||||||
|
CdnUrl:ENV_BASE_URL[NowENV], //正式
|
||||||
|
|
||||||
|
appData:function() { |
||||||
|
var data = {}; //版本号
|
||||||
|
data.i_app_version = '2.1.2'; |
||||||
|
return data; |
||||||
|
}, |
||||||
|
QQmapkey:'2EBBZ-RAL33-TLM3A-3KVVR-V2LMO-3TFQ4', |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
module.exports = ENV |
||||||
@ -0,0 +1,701 @@ |
|||||||
|
! function(e, n) { |
||||||
|
"function" == typeof define && (define.amd || define.cmd) ? define(function() { |
||||||
|
return n(e) |
||||||
|
}) : n(e, !0) |
||||||
|
}(window, function(o, e) { |
||||||
|
if (!o.jWeixin) { |
||||||
|
var n, c = { |
||||||
|
config: "preVerifyJSAPI", |
||||||
|
onMenuShareTimeline: "menu:share:timeline", |
||||||
|
onMenuShareAppMessage: "menu:share:appmessage", |
||||||
|
onMenuShareQQ: "menu:share:qq", |
||||||
|
onMenuShareWeibo: "menu:share:weiboApp", |
||||||
|
onMenuShareQZone: "menu:share:QZone", |
||||||
|
previewImage: "imagePreview", |
||||||
|
getLocation: "geoLocation", |
||||||
|
openProductSpecificView: "openProductViewWithPid", |
||||||
|
addCard: "batchAddCard", |
||||||
|
openCard: "batchViewCard", |
||||||
|
chooseWXPay: "getBrandWCPayRequest", |
||||||
|
openEnterpriseRedPacket: "getRecevieBizHongBaoRequest", |
||||||
|
startSearchBeacons: "startMonitoringBeacons", |
||||||
|
stopSearchBeacons: "stopMonitoringBeacons", |
||||||
|
onSearchBeacons: "onBeaconsInRange", |
||||||
|
consumeAndShareCard: "consumedShareCard", |
||||||
|
openAddress: "editAddress" |
||||||
|
}, |
||||||
|
a = function() { |
||||||
|
var e = {}; |
||||||
|
for (var n in c) e[c[n]] = n; |
||||||
|
return e |
||||||
|
}(), |
||||||
|
i = o.document, |
||||||
|
t = i.title, |
||||||
|
r = navigator.userAgent.toLowerCase(), |
||||||
|
s = navigator.platform.toLowerCase(), |
||||||
|
d = !(!s.match("mac") && !s.match("win")), |
||||||
|
u = -1 != r.indexOf("wxdebugger"), |
||||||
|
l = -1 != r.indexOf("micromessenger"), |
||||||
|
p = -1 != r.indexOf("android"), |
||||||
|
f = -1 != r.indexOf("iphone") || -1 != r.indexOf("ipad"), |
||||||
|
m = (n = r.match(/micromessenger\/(\d+\.\d+\.\d+)/) || r.match(/micromessenger\/(\d+\.\d+)/)) ? n[1] : "", |
||||||
|
g = { |
||||||
|
initStartTime: L(), |
||||||
|
initEndTime: 0, |
||||||
|
preVerifyStartTime: 0, |
||||||
|
preVerifyEndTime: 0 |
||||||
|
}, |
||||||
|
h = { |
||||||
|
version: 1, |
||||||
|
appId: "", |
||||||
|
initTime: 0, |
||||||
|
preVerifyTime: 0, |
||||||
|
networkType: "", |
||||||
|
isPreVerifyOk: 1, |
||||||
|
systemType: f ? 1 : p ? 2 : -1, |
||||||
|
clientVersion: m, |
||||||
|
url: encodeURIComponent(location.href) |
||||||
|
}, |
||||||
|
v = {}, |
||||||
|
S = { |
||||||
|
_completes: [] |
||||||
|
}, |
||||||
|
y = { |
||||||
|
state: 0, |
||||||
|
data: {} |
||||||
|
}; |
||||||
|
O(function() { |
||||||
|
g.initEndTime = L() |
||||||
|
}); |
||||||
|
var I = !1, |
||||||
|
_ = [], |
||||||
|
w = { |
||||||
|
config: function(e) { |
||||||
|
B("config", v = e); |
||||||
|
var t = !1 !== v.check; |
||||||
|
O(function() { |
||||||
|
if (t) M(c.config, { |
||||||
|
verifyJsApiList: C(v.jsApiList), |
||||||
|
verifyOpenTagList: C(v.openTagList) |
||||||
|
}, function() { |
||||||
|
S._complete = function(e) { |
||||||
|
g.preVerifyEndTime = L(), y.state = 1, y.data = e |
||||||
|
}, S.success = function(e) { |
||||||
|
h.isPreVerifyOk = 0 |
||||||
|
}, S.fail = function(e) { |
||||||
|
S._fail ? S._fail(e) : y.state = -1 |
||||||
|
}; |
||||||
|
var t = S._completes; |
||||||
|
return t.push(function() { |
||||||
|
! function() { |
||||||
|
if (!(d || u || v.debug || m < "6.0.2" || h.systemType < 0)) { |
||||||
|
var i = new Image; |
||||||
|
h.appId = v.appId, h.initTime = g.initEndTime - g.initStartTime, h.preVerifyTime = g.preVerifyEndTime - g.preVerifyStartTime, w.getNetworkType({ |
||||||
|
isInnerInvoke: !0, |
||||||
|
success: function(e) { |
||||||
|
h.networkType = e.networkType; |
||||||
|
var n = "https://open.weixin.qq.com/sdk/report?v=" + h.version + "&o=" + h.isPreVerifyOk + "&s=" + h.systemType + "&c=" + h.clientVersion + "&a=" + h.appId + "&n=" + h.networkType + "&i=" + h.initTime + "&p=" + h.preVerifyTime + "&u=" + h.url; |
||||||
|
i.src = n |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}() |
||||||
|
}), S.complete = function(e) { |
||||||
|
for (var n = 0, i = t.length; n < i; ++n) t[n](); |
||||||
|
S._completes = [] |
||||||
|
}, S |
||||||
|
}()), g.preVerifyStartTime = L(); |
||||||
|
else { |
||||||
|
y.state = 1; |
||||||
|
for (var e = S._completes, n = 0, i = e.length; n < i; ++n) e[n](); |
||||||
|
S._completes = [] |
||||||
|
} |
||||||
|
}), w.invoke || (w.invoke = function(e, n, i) { |
||||||
|
o.WeixinJSBridge && WeixinJSBridge.invoke(e, x(n), i) |
||||||
|
}, w.on = function(e, n) { |
||||||
|
o.WeixinJSBridge && WeixinJSBridge.on(e, n) |
||||||
|
}) |
||||||
|
}, |
||||||
|
ready: function(e) { |
||||||
|
0 != y.state ? e() : (S._completes.push(e), !l && v.debug && e()) |
||||||
|
}, |
||||||
|
error: function(e) { |
||||||
|
m < "6.0.2" || (-1 == y.state ? e(y.data) : S._fail = e) |
||||||
|
}, |
||||||
|
checkJsApi: function(e) { |
||||||
|
M("checkJsApi", { |
||||||
|
jsApiList: C(e.jsApiList) |
||||||
|
}, (e._complete = function(e) { |
||||||
|
if (p) { |
||||||
|
var n = e.checkResult; |
||||||
|
n && (e.checkResult = JSON.parse(n)) |
||||||
|
} |
||||||
|
e = function(e) { |
||||||
|
var n = e.checkResult; |
||||||
|
for (var i in n) { |
||||||
|
var t = a[i]; |
||||||
|
t && (n[t] = n[i], delete n[i]) |
||||||
|
} |
||||||
|
return e |
||||||
|
}(e) |
||||||
|
}, e)) |
||||||
|
}, |
||||||
|
onMenuShareTimeline: function(e) { |
||||||
|
P(c.onMenuShareTimeline, { |
||||||
|
complete: function() { |
||||||
|
M("shareTimeline", { |
||||||
|
title: e.title || t, |
||||||
|
desc: e.title || t, |
||||||
|
img_url: e.imgUrl || "", |
||||||
|
link: e.link || location.href, |
||||||
|
type: e.type || "link", |
||||||
|
data_url: e.dataUrl || "" |
||||||
|
}, e) |
||||||
|
} |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
onMenuShareAppMessage: function(n) { |
||||||
|
P(c.onMenuShareAppMessage, { |
||||||
|
complete: function(e) { |
||||||
|
"favorite" === e.scene ? M("sendAppMessage", { |
||||||
|
title: n.title || t, |
||||||
|
desc: n.desc || "", |
||||||
|
link: n.link || location.href, |
||||||
|
img_url: n.imgUrl || "", |
||||||
|
type: n.type || "link", |
||||||
|
data_url: n.dataUrl || "" |
||||||
|
}) : M("sendAppMessage", { |
||||||
|
title: n.title || t, |
||||||
|
desc: n.desc || "", |
||||||
|
link: n.link || location.href, |
||||||
|
img_url: n.imgUrl || "", |
||||||
|
type: n.type || "link", |
||||||
|
data_url: n.dataUrl || "" |
||||||
|
}, n) |
||||||
|
} |
||||||
|
}, n) |
||||||
|
}, |
||||||
|
onMenuShareQQ: function(e) { |
||||||
|
P(c.onMenuShareQQ, { |
||||||
|
complete: function() { |
||||||
|
M("shareQQ", { |
||||||
|
title: e.title || t, |
||||||
|
desc: e.desc || "", |
||||||
|
img_url: e.imgUrl || "", |
||||||
|
link: e.link || location.href |
||||||
|
}, e) |
||||||
|
} |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
onMenuShareWeibo: function(e) { |
||||||
|
P(c.onMenuShareWeibo, { |
||||||
|
complete: function() { |
||||||
|
M("shareWeiboApp", { |
||||||
|
title: e.title || t, |
||||||
|
desc: e.desc || "", |
||||||
|
img_url: e.imgUrl || "", |
||||||
|
link: e.link || location.href |
||||||
|
}, e) |
||||||
|
} |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
onMenuShareQZone: function(e) { |
||||||
|
P(c.onMenuShareQZone, { |
||||||
|
complete: function() { |
||||||
|
M("shareQZone", { |
||||||
|
title: e.title || t, |
||||||
|
desc: e.desc || "", |
||||||
|
img_url: e.imgUrl || "", |
||||||
|
link: e.link || location.href |
||||||
|
}, e) |
||||||
|
} |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
updateTimelineShareData: function(e) { |
||||||
|
M("updateTimelineShareData", { |
||||||
|
title: e.title, |
||||||
|
link: e.link, |
||||||
|
imgUrl: e.imgUrl |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
updateAppMessageShareData: function(e) { |
||||||
|
M("updateAppMessageShareData", { |
||||||
|
title: e.title, |
||||||
|
desc: e.desc, |
||||||
|
link: e.link, |
||||||
|
imgUrl: e.imgUrl |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
startRecord: function(e) { |
||||||
|
M("startRecord", {}, e) |
||||||
|
}, |
||||||
|
stopRecord: function(e) { |
||||||
|
M("stopRecord", {}, e) |
||||||
|
}, |
||||||
|
onVoiceRecordEnd: function(e) { |
||||||
|
P("onVoiceRecordEnd", e) |
||||||
|
}, |
||||||
|
playVoice: function(e) { |
||||||
|
M("playVoice", { |
||||||
|
localId: e.localId |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
pauseVoice: function(e) { |
||||||
|
M("pauseVoice", { |
||||||
|
localId: e.localId |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
stopVoice: function(e) { |
||||||
|
M("stopVoice", { |
||||||
|
localId: e.localId |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
onVoicePlayEnd: function(e) { |
||||||
|
P("onVoicePlayEnd", e) |
||||||
|
}, |
||||||
|
uploadVoice: function(e) { |
||||||
|
M("uploadVoice", { |
||||||
|
localId: e.localId, |
||||||
|
isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1 |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
downloadVoice: function(e) { |
||||||
|
M("downloadVoice", { |
||||||
|
serverId: e.serverId, |
||||||
|
isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1 |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
translateVoice: function(e) { |
||||||
|
M("translateVoice", { |
||||||
|
localId: e.localId, |
||||||
|
isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1 |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
chooseImage: function(e) { |
||||||
|
M("chooseImage", { |
||||||
|
scene: "1|2", |
||||||
|
count: e.count || 9, |
||||||
|
sizeType: e.sizeType || ["original", "compressed"], |
||||||
|
sourceType: e.sourceType || ["album", "camera"] |
||||||
|
}, (e._complete = function(e) { |
||||||
|
if (p) { |
||||||
|
var n = e.localIds; |
||||||
|
try { |
||||||
|
n && (e.localIds = JSON.parse(n)) |
||||||
|
} catch (e) {} |
||||||
|
} |
||||||
|
}, e)) |
||||||
|
}, |
||||||
|
getLocation: function(e) {}, |
||||||
|
previewImage: function(e) { |
||||||
|
M(c.previewImage, { |
||||||
|
current: e.current, |
||||||
|
urls: e.urls |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
uploadImage: function(e) { |
||||||
|
M("uploadImage", { |
||||||
|
localId: e.localId, |
||||||
|
isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1 |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
downloadImage: function(e) { |
||||||
|
M("downloadImage", { |
||||||
|
serverId: e.serverId, |
||||||
|
isShowProgressTips: 0 == e.isShowProgressTips ? 0 : 1 |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
getLocalImgData: function(e) { |
||||||
|
!1 === I ? (I = !0, M("getLocalImgData", { |
||||||
|
localId: e.localId |
||||||
|
}, (e._complete = function(e) { |
||||||
|
if (I = !1, 0 < _.length) { |
||||||
|
var n = _.shift(); |
||||||
|
wx.getLocalImgData(n) |
||||||
|
} |
||||||
|
}, e))) : _.push(e) |
||||||
|
}, |
||||||
|
getNetworkType: function(e) { |
||||||
|
M("getNetworkType", {}, (e._complete = function(e) { |
||||||
|
e = function(e) { |
||||||
|
var n = e.errMsg; |
||||||
|
e.errMsg = "getNetworkType:ok"; |
||||||
|
var i = e.subtype; |
||||||
|
if (delete e.subtype, i) e.networkType = i; |
||||||
|
else { |
||||||
|
var t = n.indexOf(":"), |
||||||
|
o = n.substring(t + 1); |
||||||
|
switch (o) { |
||||||
|
case "wifi": |
||||||
|
case "edge": |
||||||
|
case "wwan": |
||||||
|
e.networkType = o; |
||||||
|
break; |
||||||
|
default: |
||||||
|
e.errMsg = "getNetworkType:fail" |
||||||
|
} |
||||||
|
} |
||||||
|
return e |
||||||
|
}(e) |
||||||
|
}, e)) |
||||||
|
}, |
||||||
|
openLocation: function(e) { |
||||||
|
M("openLocation", { |
||||||
|
latitude: e.latitude, |
||||||
|
longitude: e.longitude, |
||||||
|
name: e.name || "", |
||||||
|
address: e.address || "", |
||||||
|
scale: e.scale || 28, |
||||||
|
infoUrl: e.infoUrl || "" |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
getLocation: function(e) { |
||||||
|
M(c.getLocation, { |
||||||
|
type: (e = e || {}).type || "wgs84" |
||||||
|
}, (e._complete = function(e) { |
||||||
|
delete e.type |
||||||
|
}, e)) |
||||||
|
}, |
||||||
|
hideOptionMenu: function(e) { |
||||||
|
M("hideOptionMenu", {}, e) |
||||||
|
}, |
||||||
|
showOptionMenu: function(e) { |
||||||
|
M("showOptionMenu", {}, e) |
||||||
|
}, |
||||||
|
closeWindow: function(e) { |
||||||
|
M("closeWindow", {}, e = e || {}) |
||||||
|
}, |
||||||
|
hideMenuItems: function(e) { |
||||||
|
M("hideMenuItems", { |
||||||
|
menuList: e.menuList |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
showMenuItems: function(e) { |
||||||
|
M("showMenuItems", { |
||||||
|
menuList: e.menuList |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
hideAllNonBaseMenuItem: function(e) { |
||||||
|
M("hideAllNonBaseMenuItem", {}, e) |
||||||
|
}, |
||||||
|
showAllNonBaseMenuItem: function(e) { |
||||||
|
M("showAllNonBaseMenuItem", {}, e) |
||||||
|
}, |
||||||
|
scanQRCode: function(e) { |
||||||
|
M("scanQRCode", { |
||||||
|
needResult: (e = e || {}).needResult || 0, |
||||||
|
scanType: e.scanType || ["qrCode", "barCode"] |
||||||
|
}, (e._complete = function(e) { |
||||||
|
if (f) { |
||||||
|
var n = e.resultStr; |
||||||
|
if (n) { |
||||||
|
var i = JSON.parse(n); |
||||||
|
e.resultStr = i && i.scan_code && i.scan_code.scan_result |
||||||
|
} |
||||||
|
} |
||||||
|
}, e)) |
||||||
|
}, |
||||||
|
openAddress: function(e) { |
||||||
|
M(c.openAddress, {}, (e._complete = function(e) { |
||||||
|
e = function(e) { |
||||||
|
return e.postalCode = e.addressPostalCode, delete e.addressPostalCode, e.provinceName = e.proviceFirstStageName, delete e.proviceFirstStageName, e.cityName = e.addressCitySecondStageName, delete e.addressCitySecondStageName, e.countryName = e.addressCountiesThirdStageName, delete e.addressCountiesThirdStageName, e.detailInfo = e.addressDetailInfo, delete e.addressDetailInfo, e |
||||||
|
}(e) |
||||||
|
}, e)) |
||||||
|
}, |
||||||
|
openProductSpecificView: function(e) { |
||||||
|
M(c.openProductSpecificView, { |
||||||
|
pid: e.productId, |
||||||
|
view_type: e.viewType || 0, |
||||||
|
ext_info: e.extInfo |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
addCard: function(e) { |
||||||
|
for (var n = e.cardList, i = [], t = 0, o = n.length; t < o; ++t) { |
||||||
|
var r = n[t], |
||||||
|
a = { |
||||||
|
card_id: r.cardId, |
||||||
|
card_ext: r.cardExt |
||||||
|
}; |
||||||
|
i.push(a) |
||||||
|
} |
||||||
|
M(c.addCard, { |
||||||
|
card_list: i |
||||||
|
}, (e._complete = function(e) { |
||||||
|
var n = e.card_list; |
||||||
|
if (n) { |
||||||
|
for (var i = 0, t = (n = JSON.parse(n)).length; i < t; ++i) { |
||||||
|
var o = n[i]; |
||||||
|
o.cardId = o.card_id, o.cardExt = o.card_ext, o.isSuccess = !!o.is_succ, delete o.card_id, delete o.card_ext, delete o.is_succ |
||||||
|
} |
||||||
|
e.cardList = n, delete e.card_list |
||||||
|
} |
||||||
|
}, e)) |
||||||
|
}, |
||||||
|
chooseCard: function(e) { |
||||||
|
M("chooseCard", { |
||||||
|
app_id: v.appId, |
||||||
|
location_id: e.shopId || "", |
||||||
|
sign_type: e.signType || "SHA1", |
||||||
|
card_id: e.cardId || "", |
||||||
|
card_type: e.cardType || "", |
||||||
|
card_sign: e.cardSign, |
||||||
|
time_stamp: e.timestamp + "", |
||||||
|
nonce_str: e.nonceStr |
||||||
|
}, (e._complete = function(e) { |
||||||
|
e.cardList = e.choose_card_info, delete e.choose_card_info |
||||||
|
}, e)) |
||||||
|
}, |
||||||
|
openCard: function(e) { |
||||||
|
for (var n = e.cardList, i = [], t = 0, o = n.length; t < o; ++t) { |
||||||
|
var r = n[t], |
||||||
|
a = { |
||||||
|
card_id: r.cardId, |
||||||
|
code: r.code |
||||||
|
}; |
||||||
|
i.push(a) |
||||||
|
} |
||||||
|
M(c.openCard, { |
||||||
|
card_list: i |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
consumeAndShareCard: function(e) { |
||||||
|
M(c.consumeAndShareCard, { |
||||||
|
consumedCardId: e.cardId, |
||||||
|
consumedCode: e.code |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
chooseWXPay: function(e) { |
||||||
|
M(c.chooseWXPay, V(e), e) |
||||||
|
}, |
||||||
|
openEnterpriseRedPacket: function(e) { |
||||||
|
M(c.openEnterpriseRedPacket, V(e), e) |
||||||
|
}, |
||||||
|
startSearchBeacons: function(e) { |
||||||
|
M(c.startSearchBeacons, { |
||||||
|
ticket: e.ticket |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
stopSearchBeacons: function(e) { |
||||||
|
M(c.stopSearchBeacons, {}, e) |
||||||
|
}, |
||||||
|
onSearchBeacons: function(e) { |
||||||
|
P(c.onSearchBeacons, e) |
||||||
|
}, |
||||||
|
openEnterpriseChat: function(e) { |
||||||
|
M("openEnterpriseChat", { |
||||||
|
useridlist: e.userIds, |
||||||
|
chatname: e.groupName |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
launchMiniProgram: function(e) { |
||||||
|
M("launchMiniProgram", { |
||||||
|
targetAppId: e.targetAppId, |
||||||
|
path: function(e) { |
||||||
|
if ("string" == typeof e && 0 < e.length) { |
||||||
|
var n = e.split("?")[0], |
||||||
|
i = e.split("?")[1]; |
||||||
|
return n += ".html", void 0 !== i ? n + "?" + i : n |
||||||
|
} |
||||||
|
}(e.path), |
||||||
|
envVersion: e.envVersion |
||||||
|
}, e) |
||||||
|
}, |
||||||
|
openBusinessView: function(e) { |
||||||
|
M("openBusinessView", { |
||||||
|
businessType: e.businessType, |
||||||
|
queryString: e.queryString || "", |
||||||
|
envVersion: e.envVersion |
||||||
|
}, (e._complete = function(n) { |
||||||
|
if (p) { |
||||||
|
var e = n.extraData; |
||||||
|
if (e) try { |
||||||
|
n.extraData = JSON.parse(e) |
||||||
|
} catch (e) { |
||||||
|
n.extraData = {} |
||||||
|
} |
||||||
|
} |
||||||
|
}, e)) |
||||||
|
}, |
||||||
|
miniProgram: { |
||||||
|
navigateBack: function(e) { |
||||||
|
e = e || {}, O(function() { |
||||||
|
M("invokeMiniProgramAPI", { |
||||||
|
name: "navigateBack", |
||||||
|
arg: { |
||||||
|
delta: e.delta || 1 |
||||||
|
} |
||||||
|
}, e) |
||||||
|
}) |
||||||
|
}, |
||||||
|
navigateTo: function(e) { |
||||||
|
O(function() { |
||||||
|
M("invokeMiniProgramAPI", { |
||||||
|
name: "navigateTo", |
||||||
|
arg: { |
||||||
|
url: e.url |
||||||
|
} |
||||||
|
}, e) |
||||||
|
}) |
||||||
|
}, |
||||||
|
redirectTo: function(e) { |
||||||
|
O(function() { |
||||||
|
M("invokeMiniProgramAPI", { |
||||||
|
name: "redirectTo", |
||||||
|
arg: { |
||||||
|
url: e.url |
||||||
|
} |
||||||
|
}, e) |
||||||
|
}) |
||||||
|
}, |
||||||
|
switchTab: function(e) { |
||||||
|
O(function() { |
||||||
|
M("invokeMiniProgramAPI", { |
||||||
|
name: "switchTab", |
||||||
|
arg: { |
||||||
|
url: e.url |
||||||
|
} |
||||||
|
}, e) |
||||||
|
}) |
||||||
|
}, |
||||||
|
reLaunch: function(e) { |
||||||
|
O(function() { |
||||||
|
M("invokeMiniProgramAPI", { |
||||||
|
name: "reLaunch", |
||||||
|
arg: { |
||||||
|
url: e.url |
||||||
|
} |
||||||
|
}, e) |
||||||
|
}) |
||||||
|
}, |
||||||
|
postMessage: function(e) { |
||||||
|
O(function() { |
||||||
|
M("invokeMiniProgramAPI", { |
||||||
|
name: "postMessage", |
||||||
|
arg: e.data || {} |
||||||
|
}, e) |
||||||
|
}) |
||||||
|
}, |
||||||
|
getEnv: function(e) { |
||||||
|
O(function() { |
||||||
|
e({ |
||||||
|
miniprogram: "miniprogram" === o.__wxjs_environment |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
T = 1, |
||||||
|
k = {}; |
||||||
|
return i.addEventListener("error", function(e) { |
||||||
|
if (!p) { |
||||||
|
var n = e.target, |
||||||
|
i = n.tagName, |
||||||
|
t = n.src; |
||||||
|
if ("IMG" == i || "VIDEO" == i || "AUDIO" == i || "SOURCE" == i) |
||||||
|
if (-1 != t.indexOf("wxlocalresource://")) { |
||||||
|
e.preventDefault(), e.stopPropagation(); |
||||||
|
var o = n["wx-id"]; |
||||||
|
if (o || (o = T++, n["wx-id"] = o), k[o]) return; |
||||||
|
k[o] = !0, wx.ready(function() { |
||||||
|
wx.getLocalImgData({ |
||||||
|
localId: t, |
||||||
|
success: function(e) { |
||||||
|
n.src = e.localData |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}, !0), i.addEventListener("load", function(e) { |
||||||
|
if (!p) { |
||||||
|
var n = e.target, |
||||||
|
i = n.tagName; |
||||||
|
n.src; |
||||||
|
if ("IMG" == i || "VIDEO" == i || "AUDIO" == i || "SOURCE" == i) { |
||||||
|
var t = n["wx-id"]; |
||||||
|
t && (k[t] = !1) |
||||||
|
} |
||||||
|
} |
||||||
|
}, !0), e && (o.wx = o.jWeixin = w), w |
||||||
|
} |
||||||
|
|
||||||
|
function M(n, e, i) { |
||||||
|
o.WeixinJSBridge ? WeixinJSBridge.invoke(n, x(e), function(e) { |
||||||
|
A(n, e, i) |
||||||
|
}) : B(n, i) |
||||||
|
} |
||||||
|
|
||||||
|
function P(n, i, t) { |
||||||
|
o.WeixinJSBridge ? WeixinJSBridge.on(n, function(e) { |
||||||
|
t && t.trigger && t.trigger(e), A(n, e, i) |
||||||
|
}) : B(n, t || i) |
||||||
|
} |
||||||
|
|
||||||
|
function x(e) { |
||||||
|
return (e = e || {}).appId = v.appId, e.verifyAppId = v.appId, e.verifySignType = "sha1", e.verifyTimestamp = v.timestamp + "", e.verifyNonceStr = v.nonceStr, e.verifySignature = v.signature, e |
||||||
|
} |
||||||
|
|
||||||
|
function V(e) { |
||||||
|
return { |
||||||
|
timeStamp: e.timestamp + "", |
||||||
|
nonceStr: e.nonceStr, |
||||||
|
package: e.package, |
||||||
|
paySign: e.paySign, |
||||||
|
signType: e.signType || "SHA1" |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function A(e, n, i) { |
||||||
|
"openEnterpriseChat" != e && "openBusinessView" !== e || (n.errCode = n.err_code), delete n.err_code, delete n.err_desc, delete n.err_detail; |
||||||
|
var t = n.errMsg; |
||||||
|
t || (t = n.err_msg, delete n.err_msg, t = function(e, n) { |
||||||
|
var i = e, |
||||||
|
t = a[i]; |
||||||
|
t && (i = t); |
||||||
|
var o = "ok"; |
||||||
|
if (n) { |
||||||
|
var r = n.indexOf(":"); |
||||||
|
"confirm" == (o = n.substring(r + 1)) && (o = "ok"), "failed" == o && (o = "fail"), -1 != o.indexOf("failed_") && (o = o.substring(7)), -1 != o.indexOf("fail_") && (o = o.substring(5)), "access denied" != (o = (o = o.replace(/_/g, " ")).toLowerCase()) && "no permission to execute" != o || (o = "permission denied"), "config" == i && "function not exist" == o && (o = "ok"), "" == o && (o = "fail") |
||||||
|
} |
||||||
|
return n = i + ":" + o |
||||||
|
}(e, t), n.errMsg = t), (i = i || {})._complete && (i._complete(n), delete i._complete), t = n.errMsg || "", v.debug && !i.isInnerInvoke && alert(JSON.stringify(n)); |
||||||
|
var o = t.indexOf(":"); |
||||||
|
switch (t.substring(o + 1)) { |
||||||
|
case "ok": |
||||||
|
i.success && i.success(n); |
||||||
|
break; |
||||||
|
case "cancel": |
||||||
|
i.cancel && i.cancel(n); |
||||||
|
break; |
||||||
|
default: |
||||||
|
i.fail && i.fail(n) |
||||||
|
} |
||||||
|
i.complete && i.complete(n) |
||||||
|
} |
||||||
|
|
||||||
|
function C(e) { |
||||||
|
if (e) { |
||||||
|
for (var n = 0, i = e.length; n < i; ++n) { |
||||||
|
var t = e[n], |
||||||
|
o = c[t]; |
||||||
|
o && (e[n] = o) |
||||||
|
} |
||||||
|
return e |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function B(e, n) { |
||||||
|
if (!(!v.debug || n && n.isInnerInvoke)) { |
||||||
|
var i = a[e]; |
||||||
|
i && (e = i), n && n._complete && delete n._complete, console.log('"' + e + '",', n || "") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function L() { |
||||||
|
return (new Date).getTime() |
||||||
|
} |
||||||
|
|
||||||
|
function O(e) { |
||||||
|
l && (o.WeixinJSBridge ? e() : i.addEventListener && i.addEventListener("WeixinJSBridgeReady", e, !1)) |
||||||
|
} |
||||||
|
}); |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
function AMapWX(a){this.key=a.key;this.requestConfig={key:a.key,s:"rsx",platform:"WXJS",appname:a.key,sdkversion:"1.2.0",logversion:"2.0"};this.MeRequestConfig={key:a.key,serviceName:"https://restapi.amap.com/rest/me"}} |
||||||
|
AMapWX.prototype.getWxLocation=function(a,b){wx.getLocation({type:"gcj02",success:function(c){c=c.longitude+","+c.latitude;wx.setStorage({key:"userLocation",data:c});b(c)},fail:function(c){wx.getStorage({key:"userLocation",success:function(d){d.data&&b(d.data)}});a.fail({errCode:"0",errMsg:c.errMsg||""})}})}; |
||||||
|
AMapWX.prototype.getMEKeywordsSearch=function(a){if(!a.options)return a.fail({errCode:"0",errMsg:"\u7f3a\u5c11\u5fc5\u8981\u53c2\u6570"});var b=a.options,c=this.MeRequestConfig,d={key:c.key,s:"rsx",platform:"WXJS",appname:a.key,sdkversion:"1.2.0",logversion:"2.0"};b.layerId&&(d.layerId=b.layerId);b.keywords&&(d.keywords=b.keywords);b.city&&(d.city=b.city);b.filter&&(d.filter=b.filter);b.sortrule&&(d.sortrule=b.sortrule);b.pageNum&&(d.pageNum=b.pageNum);b.pageSize&&(d.pageSize=b.pageSize);b.sig&&(d.sig= |
||||||
|
b.sig);wx.request({url:c.serviceName+"/cpoint/datasearch/local",data:d,method:"GET",header:{"content-type":"application/json"},success:function(e){(e=e.data)&&e.status&&"1"===e.status&&0===e.code?a.success(e.data):a.fail({errCode:"0",errMsg:e})},fail:function(e){a.fail({errCode:"0",errMsg:e.errMsg||""})}})}; |
||||||
|
AMapWX.prototype.getMEIdSearch=function(a){if(!a.options)return a.fail({errCode:"0",errMsg:"\u7f3a\u5c11\u5fc5\u8981\u53c2\u6570"});var b=a.options,c=this.MeRequestConfig,d={key:c.key,s:"rsx",platform:"WXJS",appname:a.key,sdkversion:"1.2.0",logversion:"2.0"};b.layerId&&(d.layerId=b.layerId);b.id&&(d.id=b.id);b.sig&&(d.sig=b.sig);wx.request({url:c.serviceName+"/cpoint/datasearch/id",data:d,method:"GET",header:{"content-type":"application/json"},success:function(e){(e=e.data)&&e.status&&"1"===e.status&& |
||||||
|
0===e.code?a.success(e.data):a.fail({errCode:"0",errMsg:e})},fail:function(e){a.fail({errCode:"0",errMsg:e.errMsg||""})}})}; |
||||||
|
AMapWX.prototype.getMEPolygonSearch=function(a){if(!a.options)return a.fail({errCode:"0",errMsg:"\u7f3a\u5c11\u5fc5\u8981\u53c2\u6570"});var b=a.options,c=this.MeRequestConfig,d={key:c.key,s:"rsx",platform:"WXJS",appname:a.key,sdkversion:"1.2.0",logversion:"2.0"};b.layerId&&(d.layerId=b.layerId);b.keywords&&(d.keywords=b.keywords);b.polygon&&(d.polygon=b.polygon);b.filter&&(d.filter=b.filter);b.sortrule&&(d.sortrule=b.sortrule);b.pageNum&&(d.pageNum=b.pageNum);b.pageSize&&(d.pageSize=b.pageSize); |
||||||
|
b.sig&&(d.sig=b.sig);wx.request({url:c.serviceName+"/cpoint/datasearch/polygon",data:d,method:"GET",header:{"content-type":"application/json"},success:function(e){(e=e.data)&&e.status&&"1"===e.status&&0===e.code?a.success(e.data):a.fail({errCode:"0",errMsg:e})},fail:function(e){a.fail({errCode:"0",errMsg:e.errMsg||""})}})}; |
||||||
|
AMapWX.prototype.getMEaroundSearch=function(a){if(!a.options)return a.fail({errCode:"0",errMsg:"\u7f3a\u5c11\u5fc5\u8981\u53c2\u6570"});var b=a.options,c=this.MeRequestConfig,d={key:c.key,s:"rsx",platform:"WXJS",appname:a.key,sdkversion:"1.2.0",logversion:"2.0"};b.layerId&&(d.layerId=b.layerId);b.keywords&&(d.keywords=b.keywords);b.center&&(d.center=b.center);b.radius&&(d.radius=b.radius);b.filter&&(d.filter=b.filter);b.sortrule&&(d.sortrule=b.sortrule);b.pageNum&&(d.pageNum=b.pageNum);b.pageSize&& |
||||||
|
(d.pageSize=b.pageSize);b.sig&&(d.sig=b.sig);wx.request({url:c.serviceName+"/cpoint/datasearch/around",data:d,method:"GET",header:{"content-type":"application/json"},success:function(e){(e=e.data)&&e.status&&"1"===e.status&&0===e.code?a.success(e.data):a.fail({errCode:"0",errMsg:e})},fail:function(e){a.fail({errCode:"0",errMsg:e.errMsg||""})}})}; |
||||||
|
AMapWX.prototype.getGeo=function(a){var b=this.requestConfig,c=a.options;b={key:this.key,extensions:"all",s:b.s,platform:b.platform,appname:this.key,sdkversion:b.sdkversion,logversion:b.logversion};c.address&&(b.address=c.address);c.city&&(b.city=c.city);c.batch&&(b.batch=c.batch);c.sig&&(b.sig=c.sig);wx.request({url:"https://restapi.amap.com/v3/geocode/geo",data:b,method:"GET",header:{"content-type":"application/json"},success:function(d){(d=d.data)&&d.status&&"1"===d.status?a.success(d):a.fail({errCode:"0", |
||||||
|
errMsg:d})},fail:function(d){a.fail({errCode:"0",errMsg:d.errMsg||""})}})}; |
||||||
|
AMapWX.prototype.getRegeo=function(a){function b(d){var e=c.requestConfig;wx.request({url:"https://restapi.amap.com/v3/geocode/regeo",data:{key:c.key,location:d,extensions:"all",s:e.s,platform:e.platform,appname:c.key,sdkversion:e.sdkversion,logversion:e.logversion},method:"GET",header:{"content-type":"application/json"},success:function(g){if(g.data.status&&"1"==g.data.status){g=g.data.regeocode;var h=g.addressComponent,f=[],k=g.roads[0].name+"\u9644\u8fd1",m=d.split(",")[0],n=d.split(",")[1];if(g.pois&& |
||||||
|
g.pois[0]){k=g.pois[0].name+"\u9644\u8fd1";var l=g.pois[0].location;l&&(m=parseFloat(l.split(",")[0]),n=parseFloat(l.split(",")[1]))}h.provice&&f.push(h.provice);h.city&&f.push(h.city);h.district&&f.push(h.district);h.streetNumber&&h.streetNumber.street&&h.streetNumber.number?(f.push(h.streetNumber.street),f.push(h.streetNumber.number)):f.push(g.roads[0].name);f=f.join("");a.success([{iconPath:a.iconPath,width:a.iconWidth,height:a.iconHeight,name:f,desc:k,longitude:m,latitude:n,id:0,regeocodeData:g}])}else a.fail({errCode:g.data.infocode, |
||||||
|
errMsg:g.data.info})},fail:function(g){a.fail({errCode:"0",errMsg:g.errMsg||""})}})}var c=this;a.location?b(a.location):c.getWxLocation(a,function(d){b(d)})}; |
||||||
|
AMapWX.prototype.getWeather=function(a){function b(g){var h="base";a.type&&"forecast"==a.type&&(h="all");wx.request({url:"https://restapi.amap.com/v3/weather/weatherInfo",data:{key:d.key,city:g,extensions:h,s:e.s,platform:e.platform,appname:d.key,sdkversion:e.sdkversion,logversion:e.logversion},method:"GET",header:{"content-type":"application/json"},success:function(f){if(f.data.status&&"1"==f.data.status)if(f.data.lives){if((f=f.data.lives)&&0<f.length){f=f[0];var k={city:{text:"\u57ce\u5e02",data:f.city}, |
||||||
|
weather:{text:"\u5929\u6c14",data:f.weather},temperature:{text:"\u6e29\u5ea6",data:f.temperature},winddirection:{text:"\u98ce\u5411",data:f.winddirection+"\u98ce"},windpower:{text:"\u98ce\u529b",data:f.windpower+"\u7ea7"},humidity:{text:"\u6e7f\u5ea6",data:f.humidity+"%"}};k.liveData=f;a.success(k)}}else f.data.forecasts&&f.data.forecasts[0]&&a.success({forecast:f.data.forecasts[0]});else a.fail({errCode:f.data.infocode,errMsg:f.data.info})},fail:function(f){a.fail({errCode:"0",errMsg:f.errMsg||""})}})} |
||||||
|
function c(g){wx.request({url:"https://restapi.amap.com/v3/geocode/regeo",data:{key:d.key,location:g,extensions:"all",s:e.s,platform:e.platform,appname:d.key,sdkversion:e.sdkversion,logversion:e.logversion},method:"GET",header:{"content-type":"application/json"},success:function(h){if(h.data.status&&"1"==h.data.status){h=h.data.regeocode;if(h.addressComponent)var f=h.addressComponent.adcode;else h.aois&&0<h.aois.length&&(f=h.aois[0].adcode);b(f)}else a.fail({errCode:h.data.infocode,errMsg:h.data.info})}, |
||||||
|
fail:function(h){a.fail({errCode:"0",errMsg:h.errMsg||""})}})}var d=this,e=d.requestConfig;a.city?b(a.city):d.getWxLocation(a,function(g){c(g)})}; |
||||||
|
AMapWX.prototype.getPoiAround=function(a){function b(e){e={key:c.key,location:e,s:d.s,platform:d.platform,appname:c.key,sdkversion:d.sdkversion,logversion:d.logversion};a.querytypes&&(e.types=a.querytypes);a.querykeywords&&(e.keywords=a.querykeywords);wx.request({url:"https://restapi.amap.com/v3/place/around",data:e,method:"GET",header:{"content-type":"application/json"},success:function(g){if(g.data.status&&"1"==g.data.status){if((g=g.data)&&g.pois){for(var h=[],f=0;f<g.pois.length;f++){var k=0== |
||||||
|
f?a.iconPathSelected:a.iconPath;h.push({latitude:parseFloat(g.pois[f].location.split(",")[1]),longitude:parseFloat(g.pois[f].location.split(",")[0]),iconPath:k,width:22,height:32,id:f,name:g.pois[f].name,address:g.pois[f].address})}a.success({markers:h,poisData:g.pois})}}else a.fail({errCode:g.data.infocode,errMsg:g.data.info})},fail:function(g){a.fail({errCode:"0",errMsg:g.errMsg||""})}})}var c=this,d=c.requestConfig;a.location?b(a.location):c.getWxLocation(a,function(e){b(e)})}; |
||||||
|
AMapWX.prototype.getStaticmap=function(a){function b(e){c.push("location="+e);a.zoom&&c.push("zoom="+a.zoom);a.size&&c.push("size="+a.size);a.scale&&c.push("scale="+a.scale);a.markers&&c.push("markers="+a.markers);a.labels&&c.push("labels="+a.labels);a.paths&&c.push("paths="+a.paths);a.traffic&&c.push("traffic="+a.traffic);e="https://restapi.amap.com/v3/staticmap?"+c.join("&");a.success({url:e})}var c=[];c.push("key="+this.key);var d=this.requestConfig;c.push("s="+d.s);c.push("platform="+d.platform); |
||||||
|
c.push("appname="+d.appname);c.push("sdkversion="+d.sdkversion);c.push("logversion="+d.logversion);a.location?b(a.location):this.getWxLocation(a,function(e){b(e)})}; |
||||||
|
AMapWX.prototype.getInputtips=function(a){var b=Object.assign({},this.requestConfig);a.location&&(b.location=a.location);a.keywords&&(b.keywords=a.keywords);a.type&&(b.type=a.type);a.city&&(b.city=a.city);a.citylimit&&(b.citylimit=a.citylimit);wx.request({url:"https://restapi.amap.com/v3/assistant/inputtips",data:b,method:"GET",header:{"content-type":"application/json"},success:function(c){c&&c.data&&c.data.tips&&a.success({tips:c.data.tips})},fail:function(c){a.fail({errCode:"0",errMsg:c.errMsg|| |
||||||
|
""})}})}; |
||||||
|
AMapWX.prototype.getDrivingRoute=function(a){var b=Object.assign({},this.requestConfig);a.origin&&(b.origin=a.origin);a.destination&&(b.destination=a.destination);a.strategy&&(b.strategy=a.strategy);a.waypoints&&(b.waypoints=a.waypoints);a.avoidpolygons&&(b.avoidpolygons=a.avoidpolygons);a.avoidroad&&(b.avoidroad=a.avoidroad);wx.request({url:"https://restapi.amap.com/v3/direction/driving",data:b,method:"GET",header:{"content-type":"application/json"},success:function(c){c&&c.data&&c.data.route&&a.success({paths:c.data.route.paths, |
||||||
|
taxi_cost:c.data.route.taxi_cost||""})},fail:function(c){a.fail({errCode:"0",errMsg:c.errMsg||""})}})}; |
||||||
|
AMapWX.prototype.getWalkingRoute=function(a){var b=Object.assign({},this.requestConfig);a.origin&&(b.origin=a.origin);a.destination&&(b.destination=a.destination);wx.request({url:"https://restapi.amap.com/v3/direction/walking",data:b,method:"GET",header:{"content-type":"application/json"},success:function(c){c&&c.data&&c.data.route&&a.success({paths:c.data.route.paths})},fail:function(c){a.fail({errCode:"0",errMsg:c.errMsg||""})}})}; |
||||||
|
AMapWX.prototype.getTransitRoute=function(a){var b=Object.assign({},this.requestConfig);a.origin&&(b.origin=a.origin);a.destination&&(b.destination=a.destination);a.strategy&&(b.strategy=a.strategy);a.city&&(b.city=a.city);a.cityd&&(b.cityd=a.cityd);wx.request({url:"https://restapi.amap.com/v3/direction/transit/integrated",data:b,method:"GET",header:{"content-type":"application/json"},success:function(c){c&&c.data&&c.data.route&&(c=c.data.route,a.success({distance:c.distance||"",taxi_cost:c.taxi_cost|| |
||||||
|
"",transits:c.transits}))},fail:function(c){a.fail({errCode:"0",errMsg:c.errMsg||""})}})}; |
||||||
|
AMapWX.prototype.getRidingRoute=function(a){var b=Object.assign({},this.requestConfig);a.origin&&(b.origin=a.origin);a.destination&&(b.destination=a.destination);wx.request({url:"https://restapi.amap.com/v3/direction/riding",data:b,method:"GET",header:{"content-type":"application/json"},success:function(c){c&&c.data&&c.data.route&&a.success({paths:c.data.route.paths})},fail:function(c){a.fail({errCode:"0",errMsg:c.errMsg||""})}})};module.exports.AMapWX=AMapWX; |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,257 @@ |
|||||||
|
/* |
||||||
|
* A JavaScript implementation of the RSA Data Security, Inc. MD5 Message |
||||||
|
* Digest Algorithm, as defined in RFC 1321. |
||||||
|
* Version 2.1 Copyright (C) Paul Johnston 1999 - 2002. |
||||||
|
* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet |
||||||
|
* Distributed under the BSD License |
||||||
|
* See http://pajhome.org.uk/crypt/md5 for more info.
|
||||||
|
*/ |
||||||
|
|
||||||
|
/* |
||||||
|
* Configurable variables. You may need to tweak these to be compatible with |
||||||
|
* the server-side, but the defaults work in most cases. |
||||||
|
*/ |
||||||
|
var hexcase = 0; /* hex output format. 0 - lowercase; 1 - uppercase */ |
||||||
|
var b64pad = ""; /* base-64 pad character. "=" for strict RFC compliance */ |
||||||
|
var chrsz = 8; /* bits per input character. 8 - ASCII; 16 - Unicode */ |
||||||
|
|
||||||
|
/* |
||||||
|
* These are the functions you'll usually want to call |
||||||
|
* They take string arguments and return either hex or base-64 encoded strings |
||||||
|
*/ |
||||||
|
function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));} |
||||||
|
function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));} |
||||||
|
function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));} |
||||||
|
function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); } |
||||||
|
function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); } |
||||||
|
function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); } |
||||||
|
|
||||||
|
/* |
||||||
|
* Perform a simple self-test to see if the VM is working |
||||||
|
*/ |
||||||
|
function md5_vm_test() |
||||||
|
{ |
||||||
|
return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72"; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Calculate the MD5 of an array of little-endian words, and a bit length |
||||||
|
*/ |
||||||
|
function core_md5(x, len) |
||||||
|
{ |
||||||
|
/* append padding */ |
||||||
|
x[len >> 5] |= 0x80 << ((len) % 32); |
||||||
|
x[(((len + 64) >>> 9) << 4) + 14] = len; |
||||||
|
|
||||||
|
var a = 1732584193; |
||||||
|
var b = -271733879; |
||||||
|
var c = -1732584194; |
||||||
|
var d = 271733878; |
||||||
|
|
||||||
|
for(var i = 0; i < x.length; i += 16) |
||||||
|
{ |
||||||
|
var olda = a; |
||||||
|
var oldb = b; |
||||||
|
var oldc = c; |
||||||
|
var oldd = d; |
||||||
|
|
||||||
|
a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936); |
||||||
|
d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586); |
||||||
|
c = md5_ff(c, d, a, b, x[i+ 2], 17, 606105819); |
||||||
|
b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330); |
||||||
|
a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897); |
||||||
|
d = md5_ff(d, a, b, c, x[i+ 5], 12, 1200080426); |
||||||
|
c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341); |
||||||
|
b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983); |
||||||
|
a = md5_ff(a, b, c, d, x[i+ 8], 7 , 1770035416); |
||||||
|
d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417); |
||||||
|
c = md5_ff(c, d, a, b, x[i+10], 17, -42063); |
||||||
|
b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162); |
||||||
|
a = md5_ff(a, b, c, d, x[i+12], 7 , 1804603682); |
||||||
|
d = md5_ff(d, a, b, c, x[i+13], 12, -40341101); |
||||||
|
c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290); |
||||||
|
b = md5_ff(b, c, d, a, x[i+15], 22, 1236535329); |
||||||
|
|
||||||
|
a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510); |
||||||
|
d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632); |
||||||
|
c = md5_gg(c, d, a, b, x[i+11], 14, 643717713); |
||||||
|
b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302); |
||||||
|
a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691); |
||||||
|
d = md5_gg(d, a, b, c, x[i+10], 9 , 38016083); |
||||||
|
c = md5_gg(c, d, a, b, x[i+15], 14, -660478335); |
||||||
|
b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848); |
||||||
|
a = md5_gg(a, b, c, d, x[i+ 9], 5 , 568446438); |
||||||
|
d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690); |
||||||
|
c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961); |
||||||
|
b = md5_gg(b, c, d, a, x[i+ 8], 20, 1163531501); |
||||||
|
a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467); |
||||||
|
d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784); |
||||||
|
c = md5_gg(c, d, a, b, x[i+ 7], 14, 1735328473); |
||||||
|
b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734); |
||||||
|
|
||||||
|
a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558); |
||||||
|
d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463); |
||||||
|
c = md5_hh(c, d, a, b, x[i+11], 16, 1839030562); |
||||||
|
b = md5_hh(b, c, d, a, x[i+14], 23, -35309556); |
||||||
|
a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060); |
||||||
|
d = md5_hh(d, a, b, c, x[i+ 4], 11, 1272893353); |
||||||
|
c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632); |
||||||
|
b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640); |
||||||
|
a = md5_hh(a, b, c, d, x[i+13], 4 , 681279174); |
||||||
|
d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222); |
||||||
|
c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979); |
||||||
|
b = md5_hh(b, c, d, a, x[i+ 6], 23, 76029189); |
||||||
|
a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487); |
||||||
|
d = md5_hh(d, a, b, c, x[i+12], 11, -421815835); |
||||||
|
c = md5_hh(c, d, a, b, x[i+15], 16, 530742520); |
||||||
|
b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651); |
||||||
|
|
||||||
|
a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844); |
||||||
|
d = md5_ii(d, a, b, c, x[i+ 7], 10, 1126891415); |
||||||
|
c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905); |
||||||
|
b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055); |
||||||
|
a = md5_ii(a, b, c, d, x[i+12], 6 , 1700485571); |
||||||
|
d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606); |
||||||
|
c = md5_ii(c, d, a, b, x[i+10], 15, -1051523); |
||||||
|
b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799); |
||||||
|
a = md5_ii(a, b, c, d, x[i+ 8], 6 , 1873313359); |
||||||
|
d = md5_ii(d, a, b, c, x[i+15], 10, -30611744); |
||||||
|
c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380); |
||||||
|
b = md5_ii(b, c, d, a, x[i+13], 21, 1309151649); |
||||||
|
a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070); |
||||||
|
d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379); |
||||||
|
c = md5_ii(c, d, a, b, x[i+ 2], 15, 718787259); |
||||||
|
b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551); |
||||||
|
|
||||||
|
a = safe_add(a, olda); |
||||||
|
b = safe_add(b, oldb); |
||||||
|
c = safe_add(c, oldc); |
||||||
|
d = safe_add(d, oldd); |
||||||
|
} |
||||||
|
return Array(a, b, c, d); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* These functions implement the four basic operations the algorithm uses. |
||||||
|
*/ |
||||||
|
function md5_cmn(q, a, b, x, s, t) |
||||||
|
{ |
||||||
|
return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b); |
||||||
|
} |
||||||
|
function md5_ff(a, b, c, d, x, s, t) |
||||||
|
{ |
||||||
|
return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t); |
||||||
|
} |
||||||
|
function md5_gg(a, b, c, d, x, s, t) |
||||||
|
{ |
||||||
|
return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t); |
||||||
|
} |
||||||
|
function md5_hh(a, b, c, d, x, s, t) |
||||||
|
{ |
||||||
|
return md5_cmn(b ^ c ^ d, a, b, x, s, t); |
||||||
|
} |
||||||
|
function md5_ii(a, b, c, d, x, s, t) |
||||||
|
{ |
||||||
|
return md5_cmn(c ^ (b | (~d)), a, b, x, s, t); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Calculate the HMAC-MD5, of a key and some data |
||||||
|
*/ |
||||||
|
function core_hmac_md5(key, data) |
||||||
|
{ |
||||||
|
var bkey = str2binl(key); |
||||||
|
if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz); |
||||||
|
|
||||||
|
var ipad = Array(16), opad = Array(16); |
||||||
|
for(var i = 0; i < 16; i++) |
||||||
|
{ |
||||||
|
ipad[i] = bkey[i] ^ 0x36363636; |
||||||
|
opad[i] = bkey[i] ^ 0x5C5C5C5C; |
||||||
|
} |
||||||
|
|
||||||
|
var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz); |
||||||
|
return core_md5(opad.concat(hash), 512 + 128); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Add integers, wrapping at 2^32. This uses 16-bit operations internally |
||||||
|
* to work around bugs in some JS interpreters. |
||||||
|
*/ |
||||||
|
function safe_add(x, y) |
||||||
|
{ |
||||||
|
var lsw = (x & 0xFFFF) + (y & 0xFFFF); |
||||||
|
var msw = (x >> 16) + (y >> 16) + (lsw >> 16); |
||||||
|
return (msw << 16) | (lsw & 0xFFFF); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Bitwise rotate a 32-bit number to the left. |
||||||
|
*/ |
||||||
|
function bit_rol(num, cnt) |
||||||
|
{ |
||||||
|
return (num << cnt) | (num >>> (32 - cnt)); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Convert a string to an array of little-endian words |
||||||
|
* If chrsz is ASCII, characters >255 have their hi-byte silently ignored. |
||||||
|
*/ |
||||||
|
function str2binl(str) |
||||||
|
{ |
||||||
|
var bin = Array(); |
||||||
|
var mask = (1 << chrsz) - 1; |
||||||
|
for(var i = 0; i < str.length * chrsz; i += chrsz) |
||||||
|
bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32); |
||||||
|
return bin; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Convert an array of little-endian words to a string |
||||||
|
*/ |
||||||
|
function binl2str(bin) |
||||||
|
{ |
||||||
|
var str = ""; |
||||||
|
var mask = (1 << chrsz) - 1; |
||||||
|
for(var i = 0; i < bin.length * 32; i += chrsz) |
||||||
|
str += String.fromCharCode((bin[i>>5] >>> (i % 32)) & mask); |
||||||
|
return str; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Convert an array of little-endian words to a hex string. |
||||||
|
*/ |
||||||
|
function binl2hex(binarray) |
||||||
|
{ |
||||||
|
var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef"; |
||||||
|
var str = ""; |
||||||
|
for(var i = 0; i < binarray.length * 4; i++) |
||||||
|
{ |
||||||
|
str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) + |
||||||
|
hex_tab.charAt((binarray[i>>2] >> ((i%4)*8 )) & 0xF); |
||||||
|
} |
||||||
|
return str; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Convert an array of little-endian words to a base-64 string |
||||||
|
*/ |
||||||
|
function binl2b64(binarray) |
||||||
|
{ |
||||||
|
var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; |
||||||
|
var str = ""; |
||||||
|
for(var i = 0; i < binarray.length * 4; i += 3) |
||||||
|
{ |
||||||
|
var triplet = (((binarray[i >> 2] >> 8 * ( i %4)) & 0xFF) << 16) |
||||||
|
| (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 ) |
||||||
|
| ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF); |
||||||
|
for(var j = 0; j < 4; j++) |
||||||
|
{ |
||||||
|
if(i * 8 + j * 6 > binarray.length * 32) str += b64pad; |
||||||
|
else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F); |
||||||
|
} |
||||||
|
} |
||||||
|
return str; |
||||||
|
} |
||||||
|
module.exports = hex_md5; |
||||||
@ -0,0 +1,114 @@ |
|||||||
|
const ENV = require('./env.js'); |
||||||
|
/* |
||||||
|
{ |
||||||
|
baseUrl: '', |
||||||
|
header: {}, |
||||||
|
method: 'GET', |
||||||
|
dataType: 'json', |
||||||
|
// #ifndef MP-ALIPAY || APP-PLUS
|
||||||
|
responseType: 'text', |
||||||
|
// #endif
|
||||||
|
// 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
|
||||||
|
custom: {}, // 全局自定义参数默认值
|
||||||
|
// #ifdef MP-ALIPAY || MP-WEIXIN
|
||||||
|
timeout: 30000, |
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
sslVerify: true, |
||||||
|
// #endif
|
||||||
|
// #ifdef H5
|
||||||
|
// 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
|
||||||
|
withCredentials: false, |
||||||
|
// #endif
|
||||||
|
// 局部优先级高于全局，返回当前请求的task,options。请勿在此处修改options。非必填
|
||||||
|
// getTask: (task, options) => {
|
||||||
|
// 相当于设置了请求超时时间500ms
|
||||||
|
// setTimeout(() => {
|
||||||
|
// task.abort()
|
||||||
|
// }, 500)
|
||||||
|
// }
|
||||||
|
}*/ |
||||||
|
// 此vm参数为页面的实例，可以通过它引用vuex中的变量
|
||||||
|
module.exports = (vm) => { |
||||||
|
|
||||||
|
// 初始化请求配置
|
||||||
|
uni.$u.http.setConfig((config) => { |
||||||
|
|
||||||
|
//console.log(config);
|
||||||
|
/* config 为默认全局配置*/ |
||||||
|
config.baseURL = ENV.ApiUrl; /* 根域名 */ |
||||||
|
config.custom = { |
||||||
|
auth:true, |
||||||
|
toast:true, |
||||||
|
}; |
||||||
|
return config |
||||||
|
}) |
||||||
|
|
||||||
|
// 请求拦截
|
||||||
|
uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
|
||||||
|
// 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
|
||||||
|
config.data = config.data || {} |
||||||
|
// 根据custom参数中配置的是否需要token，添加对应的请求头
|
||||||
|
if(config?.custom?.auth) { |
||||||
|
const token = uni.getStorageSync('token'); |
||||||
|
if(token.length > 0) |
||||||
|
{ |
||||||
|
config.header.token = token; |
||||||
|
} |
||||||
|
} |
||||||
|
return config
|
||||||
|
}, config => { // 可使用async await 做异步操作
|
||||||
|
return Promise.reject(config) |
||||||
|
}) |
||||||
|
|
||||||
|
// 响应拦截
|
||||||
|
uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/ |
||||||
|
const data = response.data |
||||||
|
|
||||||
|
// 自定义参数
|
||||||
|
const custom = response.config?.custom |
||||||
|
if (data.result !== 1) {
|
||||||
|
// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
|
||||||
|
if (custom.toast !== false) { |
||||||
|
uni.$u.toast(data.msg) |
||||||
|
} |
||||||
|
|
||||||
|
// 如果需要catch返回，则进行reject
|
||||||
|
if (custom?.catch) { |
||||||
|
return Promise.reject(data) |
||||||
|
} else { |
||||||
|
// 否则返回一个pending中的promise，请求不会进入catch中
|
||||||
|
return new Promise(() => { }) |
||||||
|
} |
||||||
|
} |
||||||
|
return data.data === undefined ? {} : data.data |
||||||
|
}, (response) => {
|
||||||
|
//console.log(response);
|
||||||
|
// 对响应错误做点什么 （statusCode !== 200）
|
||||||
|
if(response.statusCode == 401) |
||||||
|
{ |
||||||
|
// 假设201为token失效，这里跳转登录
|
||||||
|
uni.$u.toast('用户信息验证失败，请重新登录'); |
||||||
|
setTimeout(() => { |
||||||
|
// 此为uView的方法，详见路由相关文档
|
||||||
|
//uni.$u.route('/pages/user/auth/login')
|
||||||
|
}, 1500) |
||||||
|
|
||||||
|
} |
||||||
|
else if(response.statusCode == 500) |
||||||
|
{ |
||||||
|
// 假设201为token失效，这里跳转登录
|
||||||
|
uni.$u.toast('当前接口出错'); |
||||||
|
|
||||||
|
} |
||||||
|
else |
||||||
|
{ |
||||||
|
|
||||||
|
// 如果返回false，则会调用Promise的reject回调，
|
||||||
|
// 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
|
||||||
|
uni.$u.toast('当前接口状态码'+response.statusCode); |
||||||
|
|
||||||
|
} |
||||||
|
return Promise.reject(response) |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,88 @@ |
|||||||
|
var user = { |
||||||
|
|
||||||
|
/** |
||||||
|
* 本算法来源于简书开源代码，详见：https://www.jianshu.com/p/fdbf293d0a85
|
||||||
|
* 全局唯一标识符（uuid，Globally Unique Identifier）,也称作 uuid(Universally Unique IDentifier)
|
||||||
|
* 一般用于多个组件之间,给它一个唯一的标识符,或者v-for循环的时候,如果使用数组的index可能会导致更新列表出现问题 |
||||||
|
* 最可能的情况是左滑删除item或者对某条信息流"不喜欢"并去掉它的时候,会导致组件内的数据可能出现错乱 |
||||||
|
* v-for的时候,推荐使用后端返回的id而不是循环的index |
||||||
|
* @param {Number} len uuid的长度 |
||||||
|
* @param {Boolean} firstU 将返回的首字母置为"u" |
||||||
|
* @param {Nubmer} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制 |
||||||
|
*/ |
||||||
|
guid:function (len = 32, firstU = true, radix = null) { |
||||||
|
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split(''); |
||||||
|
let uuid = []; |
||||||
|
radix = radix || chars.length; |
||||||
|
|
||||||
|
if (len) { |
||||||
|
// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
|
||||||
|
for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]; |
||||||
|
} else { |
||||||
|
let r; |
||||||
|
// rfc4122标准要求返回的uuid中,某些位为固定的字符
|
||||||
|
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'; |
||||||
|
uuid[14] = '4'; |
||||||
|
|
||||||
|
for (let i = 0; i < 36; i++) { |
||||||
|
if (!uuid[i]) { |
||||||
|
r = 0 | Math.random() * 16; |
||||||
|
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
// 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
|
||||||
|
if (firstU) { |
||||||
|
uuid.shift(); |
||||||
|
return 'u' + uuid.join(''); |
||||||
|
} else { |
||||||
|
return uuid.join(''); |
||||||
|
} |
||||||
|
}, |
||||||
|
//设置用户本地信息
|
||||||
|
|
||||||
|
session: function(key, val) { |
||||||
|
if (typeof(val) == 'undefined') { |
||||||
|
var res = uni.getStorageSync(key); |
||||||
|
return res; |
||||||
|
} else { |
||||||
|
uni.setStorageSync(key, val); |
||||||
|
} |
||||||
|
}, |
||||||
|
//删除用户本地所有信息
|
||||||
|
clearSession: function() { |
||||||
|
var keys = uni.getStorageInfoSync().keys; |
||||||
|
var session_id = uni.getStorageSync('session_id'); |
||||||
|
for (var key in keys) { |
||||||
|
uni.removeStorageSync(keys[key]); |
||||||
|
} |
||||||
|
uni.setStorageSync('session_id', session_id); |
||||||
|
}, |
||||||
|
|
||||||
|
isLogin: function() { |
||||||
|
var res = uni.getStorageSync('token'); |
||||||
|
if (typeof(res) == 'undefined' || res == '') { |
||||||
|
return false; |
||||||
|
} else { |
||||||
|
return res; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
getUserInfo: function() { |
||||||
|
var res = uni.getStorageSync('token'); |
||||||
|
if (typeof(res) == 'undefined' || res == '') { |
||||||
|
return false; |
||||||
|
} else { |
||||||
|
var userInfo = {}; |
||||||
|
userInfo.nickName = uni.getStorageSync('nickName'); |
||||||
|
userInfo.phone = uni.getStorageSync('phone'); |
||||||
|
userInfo.userId = uni.getStorageSync('userId'); |
||||||
|
userInfo.token = uni.getStorageSync('token'); |
||||||
|
userInfo.avatar = uni.getStorageSync('avatar'); |
||||||
|
userInfo.realName = uni.getStorageSync('realName'); |
||||||
|
return userInfo; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = user |
||||||
@ -0,0 +1,228 @@ |
|||||||
|
// /common/wechat.js
|
||||||
|
//https://zhuanlan.zhihu.com/p/512790783?utm_id=0
|
||||||
|
import Vue from "vue" |
||||||
|
var jweixin = require('./jssdk.js') |
||||||
|
export default { |
||||||
|
// 调试模式
|
||||||
|
debug: false, |
||||||
|
// api列表
|
||||||
|
jsApiList: [ |
||||||
|
'updateAppMessageShareData', |
||||||
|
'updateTimelineShareData', |
||||||
|
'closeWindow', |
||||||
|
'getLocation', |
||||||
|
'openLocation', |
||||||
|
'openAddress', |
||||||
|
'scanQRCode', |
||||||
|
'chooseImage', |
||||||
|
'chooseWXPay' |
||||||
|
], |
||||||
|
// 判断是否在微信中
|
||||||
|
isWechat: function() { |
||||||
|
var ua = window.navigator.userAgent.toLowerCase() |
||||||
|
return ua.match(/micromessenger/i) == 'micromessenger' ? true : false |
||||||
|
}, |
||||||
|
// 初始化sdk配置
|
||||||
|
initJssdk: function(callback) { |
||||||
|
var url = window.location.href; |
||||||
|
var post = {url:url}; |
||||||
|
if (this.isWechat()) { |
||||||
|
Vue.prototype.$u.post('login/getApi', post).then(res => { |
||||||
|
console.log('getApi : '); |
||||||
|
console.log(res); |
||||||
|
var share = JSON.parse(res.data); |
||||||
|
console.log('getApi-share : '); |
||||||
|
console.log(share); |
||||||
|
jweixin.config({ |
||||||
|
debug: share.debug || this.debug, |
||||||
|
appId: share.appId, |
||||||
|
timestamp:share.timestamp, |
||||||
|
nonceStr: share.nonceStr, |
||||||
|
signature: share.signature, |
||||||
|
jsApiList: share.jsApiList || this.jsApiList |
||||||
|
}) |
||||||
|
if (typeof callback === 'function') { |
||||||
|
console.log('getApi-callback : '); |
||||||
|
console.log(share); |
||||||
|
callback(share); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 关闭页面事件
|
||||||
|
closeWindow: function(callback) { |
||||||
|
if (this.isWechat()) { |
||||||
|
this.initJssdk(function(init) { |
||||||
|
jweixin.ready(function(wx) { |
||||||
|
wx.closeWindow() |
||||||
|
if (typeof callback === 'function') { |
||||||
|
callback(jweixin) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 微信分享
|
||||||
|
share: function(data, callback) { |
||||||
|
if (this.isWechat()) { |
||||||
|
this.initJssdk(function(init) { |
||||||
|
|
||||||
|
jweixin.ready(function() { |
||||||
|
|
||||||
|
var shareData = { |
||||||
|
title: data.title, |
||||||
|
desc: data.desc, |
||||||
|
link: window.location.href, |
||||||
|
imgUrl: data.image, |
||||||
|
success: function(res) { |
||||||
|
callback(res) |
||||||
|
|
||||||
|
}, |
||||||
|
cancel: function(res) { |
||||||
|
callback(res) |
||||||
|
} |
||||||
|
} |
||||||
|
jweixin.updateAppMessageShareData(shareData) |
||||||
|
jweixin.updateTimelineShareData(shareData) |
||||||
|
|
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 获取位置信息
|
||||||
|
getLocation: function(callback) { |
||||||
|
if (this.isWechat()) { |
||||||
|
this.initJssdk(function(init) { |
||||||
|
jweixin.ready(function() { |
||||||
|
jweixin.getLocation({ |
||||||
|
type: 'gcj02', |
||||||
|
success: function(res) { |
||||||
|
callback(res) |
||||||
|
}, |
||||||
|
fail: function(err) { |
||||||
|
callback(err) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 查看位置信息
|
||||||
|
openLocation: function(data, callback) { |
||||||
|
if (this.isWechat()) { |
||||||
|
this.initJssdk(function(init) { |
||||||
|
jweixin.ready(function() { |
||||||
|
jweixin.openLocation({ |
||||||
|
latitude: data.latitude, |
||||||
|
longitude: data.longitude |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 获取微信收货地址
|
||||||
|
openAddress: function(callback) { |
||||||
|
if (this.isWechat()) { |
||||||
|
this.initJssdk(function(init) { |
||||||
|
jweixin.ready(function() { |
||||||
|
jweixin.openAddress({ |
||||||
|
success: function(res) { |
||||||
|
callback(res) |
||||||
|
}, |
||||||
|
fail: function(err) { |
||||||
|
callback(err) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 微信扫码
|
||||||
|
scanQRCode: function(callback) { |
||||||
|
if (this.isWechat()) { |
||||||
|
this.initJssdk(function(init) { |
||||||
|
jweixin.ready(function() { |
||||||
|
jweixin.scanQRCode({ |
||||||
|
needResult: 1, // 0:微信处理|1:返回扫描结果
|
||||||
|
scanType: ["qrCode", "barCode"], |
||||||
|
success: function(res) { |
||||||
|
let durl = /https:\/\/([^\/]+)\//i |
||||||
|
let domain |
||||||
|
res.resultStr.replace(durl, (e) => { |
||||||
|
domain = e |
||||||
|
}) |
||||||
|
callback(res) |
||||||
|
}, |
||||||
|
fail: function(err) { |
||||||
|
callback(err) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 选择图片
|
||||||
|
chooseImage: function(callback) { |
||||||
|
if (this.isWechat()) { |
||||||
|
this.initJssdk(function(init) { |
||||||
|
jweixin.ready(function() { |
||||||
|
jweixin.chooseImage({ |
||||||
|
count: 1, |
||||||
|
sizeType: ['compressed'], |
||||||
|
sourceType: ['album'], |
||||||
|
success: function(res) { |
||||||
|
callback(res) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 微信支付
|
||||||
|
wxpay: function(data, callback) { |
||||||
|
if (this.isWechat()) { |
||||||
|
this.initJssdk(function(init) { |
||||||
|
jweixin.ready(function() { |
||||||
|
jweixin.chooseWXPay({ |
||||||
|
timestamp: data.timeStamp, |
||||||
|
nonceStr: data.nonceStr, |
||||||
|
package: data.package, |
||||||
|
signType: data.signType, |
||||||
|
paySign: data.paySign, |
||||||
|
success: function(res) { |
||||||
|
callback(res) |
||||||
|
}, |
||||||
|
cancel: function(res) { |
||||||
|
callback(res) |
||||||
|
}, |
||||||
|
fail: function(err) { |
||||||
|
callback(err) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 微信支付 另一种方式
|
||||||
|
wxpayBridge: function(data, callback) { |
||||||
|
if (this.isWechat()) { |
||||||
|
this.initJssdk(function(init) { |
||||||
|
jweixin.ready(function() { |
||||||
|
WeixinJSBridge.invoke( |
||||||
|
'getBrandWCPayRequest', { |
||||||
|
"appId": data.appId, |
||||||
|
"timeStamp": data.timeStamp, |
||||||
|
"nonceStr": data.nonceStr, |
||||||
|
"package": data.package, |
||||||
|
"signType": "MD5", |
||||||
|
"paySign": data.paySign |
||||||
|
}, |
||||||
|
function(res) { |
||||||
|
callback(res) |
||||||
|
} |
||||||
|
) |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<script> |
||||||
|
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || |
||||||
|
CSS.supports('top: constant(a)')) |
||||||
|
document.write( |
||||||
|
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + |
||||||
|
(coverSupport ? ', viewport-fit=cover' : '') + '" />') |
||||||
|
</script> |
||||||
|
<title></title> |
||||||
|
<!--preload-links--> |
||||||
|
<!--app-context--> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="app"><!--app-html--></div> |
||||||
|
<script type="module" src="/main.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
{ |
||||||
|
"app.name": "空间充", |
||||||
|
"tabbar.home": "HOME", |
||||||
|
"tabbar.list": "NEARBY", |
||||||
|
"tabbar.user": "USER", |
||||||
|
"page.list.index.title": "NEARBY", |
||||||
|
|
||||||
|
"page.user.index.title": "User Center", |
||||||
|
"pages.user.setting.index.title":"Setting", |
||||||
|
"pages.user.setting.index.setLang":"Language", |
||||||
|
|
||||||
|
|
||||||
|
"locale.auto": "System", |
||||||
|
"locale.en": "English", |
||||||
|
"locale.zh-hans": "简体中文", |
||||||
|
"locale.zh-hant": "繁体中文", |
||||||
|
"locale.language-change-confirm": "Applying this setting will restart the app" |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
import zhHans from './zh-Hans.json' |
||||||
|
import zhHant from './zh-Hant.json' |
||||||
|
import en from './en.json' |
||||||
|
export default { |
||||||
|
'zh-Hans': zhHans, |
||||||
|
'zh-Hant': zhHant, |
||||||
|
en |
||||||
|
} |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
{ |
||||||
|
"common": { |
||||||
|
"uni.app.quit": "Press again to quit the app", |
||||||
|
"uni.async.error": "The connection to the server timed out, click the screen to retry", |
||||||
|
"uni.showActionSheet.cancel": "Cancel", |
||||||
|
"uni.showToast.unpaired": "Please note that showToast and hideToast must be paired", |
||||||
|
"uni.showLoading.unpaired": "Please note that showLoading and hideLoading must be paired", |
||||||
|
"uni.showModal.cancel": "Cancel", |
||||||
|
"uni.showModal.confirm": "OK", |
||||||
|
"uni.chooseImage.cancel": "Cancel", |
||||||
|
"uni.chooseImage.sourceType.album": "Choose from Album", |
||||||
|
"uni.chooseImage.sourceType.camera": "shoot", |
||||||
|
"uni.chooseVideo.cancel": "Cancel", |
||||||
|
"uni.chooseVideo.sourceType.album": "Choose from Album", |
||||||
|
"uni.chooseVideo.sourceType.camera": "Camera", |
||||||
|
"uni.previewImage.cancel": "Cancel", |
||||||
|
"uni.previewImage.button.save": "Save Image", |
||||||
|
"uni.previewImage.save.success": "Successful saving image to album", |
||||||
|
"uni.previewImage.save.fail": "Failed to save image to album", |
||||||
|
"uni.setClipboardData.success": "Content copied", |
||||||
|
"uni.scanCode.title": "scan", |
||||||
|
"uni.scanCode.album": "Album", |
||||||
|
"uni.scanCode.fail": "Recognition failed", |
||||||
|
"uni.scanCode.flash.on": "Light touch to light", |
||||||
|
"uni.scanCode.flash.off": "Flick Off", |
||||||
|
"uni.startSoterAuthentication.authContent": "Fingerprint identification...", |
||||||
|
"uni.picker.done": "Done", |
||||||
|
"uni.picker.cancel": "Cancel", |
||||||
|
"uni.video.danmu": "Barrage", |
||||||
|
"uni.video.volume": "Volume", |
||||||
|
"uni.button.feedback.title": "Problem Feedback", |
||||||
|
"uni.button.feedback.send": "send" |
||||||
|
}, |
||||||
|
"ios": {}, |
||||||
|
"android": {} |
||||||
|
} |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
{ |
||||||
|
"common": { |
||||||
|
"uni.app.quit": "再按一次退出应用", |
||||||
|
"uni.async.error": "连接服务器超时，点击屏幕重试", |
||||||
|
"uni.showActionSheet.cancel": "取消", |
||||||
|
"uni.showToast.unpaired": "请注意 showToast 与 hideToast 必须配对使用", |
||||||
|
"uni.showLoading.unpaired": "请注意 showLoading 与 hideLoading 必须配对使用", |
||||||
|
"uni.showModal.cancel": "取消", |
||||||
|
"uni.showModal.confirm": "确定", |
||||||
|
"uni.chooseImage.cancel": "取消", |
||||||
|
"uni.chooseImage.sourceType.album": "从相册选择", |
||||||
|
"uni.chooseImage.sourceType.camera": "拍摄", |
||||||
|
"uni.chooseVideo.cancel": "取消", |
||||||
|
"uni.chooseVideo.sourceType.album": "从相册选择", |
||||||
|
"uni.chooseVideo.sourceType.camera": "拍摄", |
||||||
|
"uni.previewImage.cancel": "取消", |
||||||
|
"uni.previewImage.button.save": "保存图像", |
||||||
|
"uni.previewImage.save.success": "保存图像到相册成功", |
||||||
|
"uni.previewImage.save.fail": "保存图像到相册失败", |
||||||
|
"uni.setClipboardData.success": "内容已复制", |
||||||
|
"uni.scanCode.title": "扫码", |
||||||
|
"uni.scanCode.album": "相册", |
||||||
|
"uni.scanCode.fail": "识别失败", |
||||||
|
"uni.scanCode.flash.on": "轻触照亮", |
||||||
|
"uni.scanCode.flash.off": "轻触关闭", |
||||||
|
"uni.startSoterAuthentication.authContent": "指纹识别中...", |
||||||
|
"uni.picker.done": "完成", |
||||||
|
"uni.picker.cancel": "取消", |
||||||
|
"uni.video.danmu": "弹幕", |
||||||
|
"uni.video.volume": "音量", |
||||||
|
"uni.button.feedback.title": "问题反馈", |
||||||
|
"uni.button.feedback.send": "发送" |
||||||
|
}, |
||||||
|
"ios": {}, |
||||||
|
"android": {} |
||||||
|
} |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
{ |
||||||
|
"common": { |
||||||
|
"uni.app.quit": "再按一次退出應用", |
||||||
|
"uni.async.error": "連接服務器超時，點擊屏幕重試", |
||||||
|
"uni.showActionSheet.cancel": "取消", |
||||||
|
"uni.showToast.unpaired": "請註意 showToast 與 hideToast 必須配對使用", |
||||||
|
"uni.showLoading.unpaired": "請註意 showLoading 與 hideLoading 必須配對使用", |
||||||
|
"uni.showModal.cancel": "取消", |
||||||
|
"uni.showModal.confirm": "確定", |
||||||
|
"uni.chooseImage.cancel": "取消", |
||||||
|
"uni.chooseImage.sourceType.album": "從相冊選擇", |
||||||
|
"uni.chooseImage.sourceType.camera": "拍攝", |
||||||
|
"uni.chooseVideo.cancel": "取消", |
||||||
|
"uni.chooseVideo.sourceType.album": "從相冊選擇", |
||||||
|
"uni.chooseVideo.sourceType.camera": "拍攝", |
||||||
|
"uni.previewImage.cancel": "取消", |
||||||
|
"uni.previewImage.button.save": "保存圖像", |
||||||
|
"uni.previewImage.save.success": "保存圖像到相冊成功", |
||||||
|
"uni.previewImage.save.fail": "保存圖像到相冊失敗", |
||||||
|
"uni.setClipboardData.success": "內容已復製", |
||||||
|
"uni.scanCode.title": "掃碼", |
||||||
|
"uni.scanCode.album": "相冊", |
||||||
|
"uni.scanCode.fail": "識別失敗", |
||||||
|
"uni.scanCode.flash.on": "輕觸照亮", |
||||||
|
"uni.scanCode.flash.off": "輕觸關閉", |
||||||
|
"uni.startSoterAuthentication.authContent": "指紋識別中...", |
||||||
|
"uni.picker.done": "完成", |
||||||
|
"uni.picker.cancel": "取消", |
||||||
|
"uni.video.danmu": "彈幕", |
||||||
|
"uni.video.volume": "音量", |
||||||
|
"uni.button.feedback.title": "問題反饋", |
||||||
|
"uni.button.feedback.send": "發送" |
||||||
|
}, |
||||||
|
"ios": {}, |
||||||
|
"android": {} |
||||||
|
} |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
{ |
||||||
|
"app.name": "合成照相馆", |
||||||
|
"tabbar.home": "首页", |
||||||
|
"tabbar.list": "附近", |
||||||
|
"tabbar.user": "我的", |
||||||
|
"page.list.index.title": "附近", |
||||||
|
|
||||||
|
"page.user.index.title": "用户中心", |
||||||
|
"pages.user.setting.index.title":"设置", |
||||||
|
"pages.user.setting.index.setLang":"多语言", |
||||||
|
|
||||||
|
"locale.auto": "系统", |
||||||
|
"locale.en": "English", |
||||||
|
"locale.zh-hans": "简体中文", |
||||||
|
"locale.zh-hant": "繁体中文", |
||||||
|
"locale.language-change-confirm": "应用此设置将重启App", |
||||||
|
"locale.tips": "提示", |
||||||
|
|
||||||
|
"locale.login": "登录账号", |
||||||
|
"locale.regist": "账号注册", |
||||||
|
"locale.logout": "退出登录", |
||||||
|
|
||||||
|
"pages.user.auth.login.login":"登录页面", |
||||||
|
"pages.user.auth.login.mobile":"手机号码", |
||||||
|
"pages.user.auth.login.input_mobile":"请输入手机号码", |
||||||
|
"pages.user.auth.login.mobile_must":"手机号码格式不正确", |
||||||
|
|
||||||
|
"pages.user.auth.login.email":"邮箱地址", |
||||||
|
"pages.user.auth.login.input_email":"请输入Email地址", |
||||||
|
"pages.user.auth.login.email_must":"Email格式不正确", |
||||||
|
|
||||||
|
"pages.user.auth.login.password":"账号密码", |
||||||
|
"pages.user.auth.login.input_password":"请输入账号密码", |
||||||
|
"pages.user.auth.login.password_must":"密码不小于6位", |
||||||
|
|
||||||
|
"pages.user.auth.regist.regist":"注册页面", |
||||||
|
"pages.user.auth.regist.regist_success":"注册成功" |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
{ |
||||||
|
"app.name": "空间充", |
||||||
|
"tabbar.home": "首頁", |
||||||
|
"tabbar.list": "附近", |
||||||
|
"tabbar.user": "我的", |
||||||
|
"page.list.index.title": "附近", |
||||||
|
|
||||||
|
"page.user.index.title": "用戶中心", |
||||||
|
"pages.user.setting.index.title":"設置", |
||||||
|
"pages.user.setting.index.setLang":"多語言", |
||||||
|
|
||||||
|
"locale.auto": "系統", |
||||||
|
"locale.en": "English", |
||||||
|
"locale.zh-hans": "简体中文", |
||||||
|
"locale.zh-hant": "繁體中文", |
||||||
|
"locale.language-change-confirm": "應用此設置將重啟App" |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
import App from './App' |
||||||
|
import messages from './locale/index' |
||||||
|
// main.js
|
||||||
|
import uView from '@/uni_modules/uview-ui'; |
||||||
|
Vue.use(uView); |
||||||
|
|
||||||
|
|
||||||
|
let i18nConfig = { |
||||||
|
locale: uni.getLocale(), |
||||||
|
messages |
||||||
|
} |
||||||
|
// 引入请求封装，将app参数传递到配置中
|
||||||
|
require('@/config/request.js')(app); //uview js
|
||||||
|
//自己封装的部分
|
||||||
|
import api from '@/config/api.js'; |
||||||
|
Vue.prototype.$api = api; |
||||||
|
import user from '@/config/user.js'; |
||||||
|
Vue.prototype.$user = user; |
||||||
|
import com from '@/config/com.js'; |
||||||
|
Vue.prototype.$com = com; |
||||||
|
|
||||||
|
import access from '@/config/access/index.js'; |
||||||
|
Vue.prototype.$access = access; |
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
import wechat from '@/config/wechat.js'
|
||||||
|
Vue.prototype.$wechat =wechat;
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// #ifndef VUE3
|
||||||
|
import Vue from 'vue' |
||||||
|
import VueI18n from 'vue-i18n' |
||||||
|
Vue.use(VueI18n) |
||||||
|
const i18n = new VueI18n(i18nConfig) |
||||||
|
Vue.config.productionTip = false |
||||||
|
App.mpType = 'app' |
||||||
|
const app = new Vue({ |
||||||
|
i18n, |
||||||
|
...App |
||||||
|
}) |
||||||
|
app.$mount(); |
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef VUE3
|
||||||
|
import { createSSRApp } from 'vue' |
||||||
|
import { createI18n } from 'vue-i18n' |
||||||
|
const i18n = createI18n(i18nConfig) |
||||||
|
export function createApp() { |
||||||
|
const app = createSSRApp(App) |
||||||
|
app.use(i18n) |
||||||
|
return { |
||||||
|
app |
||||||
|
} |
||||||
|
} |
||||||
|
// #endif
|
||||||
@ -0,0 +1,100 @@ |
|||||||
|
{ |
||||||
|
"name" : "合成照相馆", |
||||||
|
"appid" : "__UNI__304D8B8", |
||||||
|
"description" : "", |
||||||
|
"versionName" : "2.1.2", |
||||||
|
"versionCode" : 212, |
||||||
|
"transformPx" : false, |
||||||
|
/* 5+App特有相关 */ |
||||||
|
"app-plus" : { |
||||||
|
"usingComponents" : true, |
||||||
|
"nvueStyleCompiler" : "uni-app", |
||||||
|
"compilerVersion" : 3, |
||||||
|
"splashscreen" : { |
||||||
|
"alwaysShowBeforeRender" : true, |
||||||
|
"waiting" : true, |
||||||
|
"autoclose" : true, |
||||||
|
"delay" : 0 |
||||||
|
}, |
||||||
|
/* 模块配置 */ |
||||||
|
"modules" : {}, |
||||||
|
/* 应用发布信息 */ |
||||||
|
"distribute" : { |
||||||
|
/* android打包配置 */ |
||||||
|
"android" : { |
||||||
|
"permissions" : [ |
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", |
||||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", |
||||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
||||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>", |
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", |
||||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", |
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>", |
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", |
||||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", |
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", |
||||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", |
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>", |
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" |
||||||
|
] |
||||||
|
}, |
||||||
|
/* ios打包配置 */ |
||||||
|
"ios" : {}, |
||||||
|
/* SDK配置 */ |
||||||
|
"sdkConfigs" : {} |
||||||
|
} |
||||||
|
}, |
||||||
|
/* 快应用特有相关 */ |
||||||
|
"quickapp" : {}, |
||||||
|
/* 小程序特有相关 */ |
||||||
|
"mp-weixin" : { |
||||||
|
"appid" : "wx19306460077082e9", |
||||||
|
"setting" : { |
||||||
|
"urlCheck" : false, |
||||||
|
"es6" : true, |
||||||
|
"postcss" : true, |
||||||
|
"minified" : true |
||||||
|
}, |
||||||
|
"usingComponents" : true, |
||||||
|
"permission" : { |
||||||
|
"scope.userLocation" : { |
||||||
|
"desc" : "你的位置信息将用于小程序位置接口的效果展示" |
||||||
|
} |
||||||
|
}, |
||||||
|
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ], |
||||||
|
"libVersion" : "latest" |
||||||
|
}, |
||||||
|
"mp-alipay" : { |
||||||
|
"usingComponents" : true |
||||||
|
}, |
||||||
|
"mp-baidu" : { |
||||||
|
"usingComponents" : true |
||||||
|
}, |
||||||
|
"mp-toutiao" : { |
||||||
|
"usingComponents" : true |
||||||
|
}, |
||||||
|
"uniStatistics" : { |
||||||
|
"enable" : false |
||||||
|
}, |
||||||
|
"vueVersion" : "2", |
||||||
|
"locale" : "zh-Hans", |
||||||
|
"fallbackLocale" : "zh-Hans", |
||||||
|
"h5" : { |
||||||
|
"title" : "空间充", |
||||||
|
"router" : { |
||||||
|
"mode" : "history", |
||||||
|
"base" : "/h5/" |
||||||
|
}, |
||||||
|
"template" : "", |
||||||
|
"devServer" : { |
||||||
|
"https" : false |
||||||
|
}, |
||||||
|
"optimization" : { |
||||||
|
"treeShaking" : { |
||||||
|
"enable" : false |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
{ |
||||||
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages |
||||||
|
{ |
||||||
|
"path": "pages/index/index", |
||||||
|
"style": { |
||||||
|
"navigationBarTitleText": "%app.name%", |
||||||
|
"navigationStyle": "custom" |
||||||
|
} |
||||||
|
} |
||||||
|
,{ |
||||||
|
"path" : "pages/user/index", |
||||||
|
"style" : |
||||||
|
{ |
||||||
|
"navigationBarTitleText": "%page.user.index.title%", |
||||||
|
"enablePullDownRefresh": false |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
,{ |
||||||
|
"path" : "pages/user/setting/index", |
||||||
|
"style" : |
||||||
|
{ |
||||||
|
"navigationBarTitleText": "%pages.user.setting.index.setLang%", |
||||||
|
"enablePullDownRefresh": false |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
{ |
||||||
|
"path" : "pages/user/account/index", |
||||||
|
"style" : |
||||||
|
{ |
||||||
|
"navigationBarTitleText" : "账户设置", |
||||||
|
"enablePullDownRefresh" : false |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
"path" : "pages/web/index", |
||||||
|
"style" : |
||||||
|
{ |
||||||
|
"navigationBarTitleText" : "外部页面", |
||||||
|
"enablePullDownRefresh" : false |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
"path" : "pages/web/video", |
||||||
|
"style" : |
||||||
|
{ |
||||||
|
"navigationBarTitleText" : "视频", |
||||||
|
"enablePullDownRefresh" : false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
], |
||||||
|
"subPackages": [], |
||||||
|
"globalStyle": { |
||||||
|
"navigationBarTextStyle": "black", |
||||||
|
"navigationBarTitleText": "%app.name%", |
||||||
|
"navigationBarBackgroundColor": "#FFFFFF", |
||||||
|
"backgroundColor": "#FFFFFF" |
||||||
|
}, |
||||||
|
"tabBar": { |
||||||
|
"color": "#AFB1DB", |
||||||
|
"selectedColor": "#7A74F0", |
||||||
|
"borderStyle": "black", |
||||||
|
"backgroundColor": "#FFFFFF", |
||||||
|
"list": [{ |
||||||
|
"pagePath": "pages/index/index", |
||||||
|
"iconPath": "static/img/common/home.png", |
||||||
|
"selectedIconPath": "static/img/common/home_HL.png", |
||||||
|
"text": "%tabbar.home%" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"pagePath": "pages/user/index", |
||||||
|
"iconPath": "static/img/common/user.png", |
||||||
|
"selectedIconPath": "static/img/common/user_HL.png", |
||||||
|
"text": "%tabbar.user%" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
"uniIdRouter": {} |
||||||
|
} |
||||||
@ -0,0 +1,482 @@ |
|||||||
|
<template> |
||||||
|
<view class="container"> |
||||||
|
|
||||||
|
<view class="bannerBox"> |
||||||
|
<u-swiper |
||||||
|
:list="banner" |
||||||
|
keyName="adImg" |
||||||
|
:showTitle="false" |
||||||
|
:autoplay="true" |
||||||
|
circular |
||||||
|
height="280" |
||||||
|
radius="0" |
||||||
|
@click="openAd" |
||||||
|
></u-swiper> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
<view class="contentBox"> |
||||||
|
|
||||||
|
<view class="navBox"> |
||||||
|
<view class="navItem"> |
||||||
|
<image src="/static/img/index/zjhc.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="navItem"> |
||||||
|
<image src="/static/img/index/zjgs.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="navItem"> |
||||||
|
<image src="/static/img/index/aixz.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="navItem"> |
||||||
|
<image src="/static/img/index/kthf.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="indexTitle"> |
||||||
|
<image src="/static/img/index/title_zj.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="listBox"> |
||||||
|
<view class="photoBox"> |
||||||
|
<view class="photoTop"> |
||||||
|
<view class="topLeft"> |
||||||
|
<image src="/static/img/index/zj_icon.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="topCenter"> |
||||||
|
<view class="title">一寸照</view> |
||||||
|
<view class="desc">25×35mm | 413×579px</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="topRight"> |
||||||
|
<view class="distance"> |
||||||
|
<image src="/static/img/index/right.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="photoBox"> |
||||||
|
<view class="photoTop"> |
||||||
|
<view class="topLeft"> |
||||||
|
<image src="/static/img/index/zj_icon.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="topCenter"> |
||||||
|
<view class="title">二寸照</view> |
||||||
|
<view class="desc">25×35mm | 413×579px</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="topRight"> |
||||||
|
<view class="distance"> |
||||||
|
<image src="/static/img/index/right.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
<view class="photoBox"> |
||||||
|
<view class="photoTop"> |
||||||
|
<view class="topLeft"> |
||||||
|
<image src="/static/img/index/zj_icon.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="topCenter"> |
||||||
|
<view class="title">大一寸照</view> |
||||||
|
<view class="desc">25×35mm | 413×579px</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="topRight"> |
||||||
|
<view class="distance"> |
||||||
|
<image src="/static/img/index/right.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="photoBox"> |
||||||
|
<view class="photoTop"> |
||||||
|
<view class="topLeft"> |
||||||
|
<image src="/static/img/index/zj_icon.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="topCenter"> |
||||||
|
<view class="title">小一寸照</view> |
||||||
|
<view class="desc">25×35mm | 413×579px</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="topRight"> |
||||||
|
<view class="distance"> |
||||||
|
<image src="/static/img/index/right.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="indexTitle"> |
||||||
|
<image src="/static/img/index/title_xz.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="picList"> |
||||||
|
<scroll-view class="scrollBox" scroll-x="true" @scroll="scroll1" scroll-left="0"> |
||||||
|
<view class="picBox"> |
||||||
|
<view class="pic"> |
||||||
|
<image src="/static/img/index/pic.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="pic_title">风格名称</view> |
||||||
|
</view> |
||||||
|
<view class="picBox"> |
||||||
|
<view class="pic"> |
||||||
|
<image src="/static/img/index/pic.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="pic_title">风格名称</view> |
||||||
|
</view> |
||||||
|
<view class="picBox"> |
||||||
|
<view class="pic"> |
||||||
|
<image src="/static/img/index/pic.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="pic_title">风格名称</view> |
||||||
|
</view> |
||||||
|
<view class="picBox"> |
||||||
|
<view class="pic"> |
||||||
|
<image src="/static/img/index/pic.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="pic_title">风格名称</view> |
||||||
|
</view> |
||||||
|
</scroll-view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="indexTitle"> |
||||||
|
<image src="/static/img/index/title_kt.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="picList"> |
||||||
|
<scroll-view class="scrollBox" scroll-x="true" @scroll="scroll2" scroll-left="0"> |
||||||
|
<view class="picBox"> |
||||||
|
<view class="pic"> |
||||||
|
<image src="/static/img/index/pic.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="pic_title">风格名称</view> |
||||||
|
</view> |
||||||
|
<view class="picBox"> |
||||||
|
<view class="pic"> |
||||||
|
<image src="/static/img/index/pic.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="pic_title">风格名称</view> |
||||||
|
</view> |
||||||
|
<view class="picBox"> |
||||||
|
<view class="pic"> |
||||||
|
<image src="/static/img/index/pic.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="pic_title">风格名称</view> |
||||||
|
</view> |
||||||
|
<view class="picBox"> |
||||||
|
<view class="pic"> |
||||||
|
<image src="/static/img/index/pic.png" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="pic_title">风格名称</view> |
||||||
|
</view> |
||||||
|
</scroll-view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
banner: [ |
||||||
|
{ |
||||||
|
adImg:'/static/img/index/banner.png', |
||||||
|
} |
||||||
|
], |
||||||
|
notice:'', |
||||||
|
} |
||||||
|
}, |
||||||
|
computed:{ |
||||||
|
|
||||||
|
}, |
||||||
|
onLoad() { |
||||||
|
|
||||||
|
this.getHomeInfo(); |
||||||
|
|
||||||
|
}, |
||||||
|
onShareAppMessage() { |
||||||
|
return { |
||||||
|
title: '空间充-首页', |
||||||
|
path: uni.$u.page(), |
||||||
|
} |
||||||
|
}, |
||||||
|
onShareTimeline() { |
||||||
|
return { |
||||||
|
title: '空间充-首页', |
||||||
|
path: uni.$u.page(), |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//获取门店信息 |
||||||
|
getHomeInfo(){ |
||||||
|
var _this =this; |
||||||
|
//post 请求例子 |
||||||
|
_this.$api.post('ycl/home', {},function(res){ |
||||||
|
console.log(res); |
||||||
|
var d = res; |
||||||
|
var banner = d.adList |
||||||
|
banner.forEach((item, index) => { |
||||||
|
item.title = item.adName; |
||||||
|
}) |
||||||
|
//_this.banner = banner; |
||||||
|
//_this.notice = d.notice; |
||||||
|
//_this.$user.session('servicePhone',d.servicePhone); |
||||||
|
}); |
||||||
|
}, |
||||||
|
//滚动监控 |
||||||
|
scroll1(e) { |
||||||
|
console.log(e); |
||||||
|
}, |
||||||
|
scroll2(e) { |
||||||
|
console.log(e); |
||||||
|
}, |
||||||
|
//扫码 |
||||||
|
scanQrcode() |
||||||
|
{ |
||||||
|
var _this =this; |
||||||
|
_this.$com.showLoading('识别中...'); |
||||||
|
uni.scanCode({ |
||||||
|
onlyFromCamera: false, |
||||||
|
success: function (res) { |
||||||
|
console.log(res); |
||||||
|
console.log('条码类型：' + res.scanType); |
||||||
|
console.log('条码内容：' + res.result); |
||||||
|
if (res.scanType == 'QR_CODE') |
||||||
|
{ |
||||||
|
var url = res.result; |
||||||
|
var codeTypeArr = ['deviceKey', 'deviceCode', 'qrcode', 'code']; //支持的条码参数 |
||||||
|
var url_str = ''; |
||||||
|
codeTypeArr.forEach(function(item) { |
||||||
|
if(url.indexOf(item) != -1 ) |
||||||
|
{ |
||||||
|
var keyindex = item; |
||||||
|
var deviceKey = _this.getParameterByName(url,item); |
||||||
|
if(!_this.$com.isNull(deviceKey)) |
||||||
|
{ |
||||||
|
if(['qrcode', 'code'].includes(item)) { |
||||||
|
keyindex = 'deviceCode'; |
||||||
|
} |
||||||
|
console.log(keyindex+'='+deviceKey); |
||||||
|
url_str = `${keyindex}=${deviceKey}`; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
if(!_this.$com.isNull(url_str)) |
||||||
|
{ |
||||||
|
uni.$u.route({ |
||||||
|
url: '/pages/order/order?'+url_str, |
||||||
|
}); |
||||||
|
} |
||||||
|
else |
||||||
|
{ |
||||||
|
|
||||||
|
_this.$com.alert('二维码格式有误'); |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
else |
||||||
|
{ |
||||||
|
_this.$com.alert('暂不支持此种条码类型'); |
||||||
|
} |
||||||
|
}, |
||||||
|
fail:function(err){ |
||||||
|
_this.$com.alert('扫码失败,请重试'); |
||||||
|
}, |
||||||
|
complete:function(end){ |
||||||
|
_this.$com.hideLoading(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//获取url中是否有某个参数的值 |
||||||
|
getParameterByName(url,name) { |
||||||
|
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); |
||||||
|
var regexS = "[\\?&]" + name + "=([^&#]*)"; |
||||||
|
var regex = new RegExp(regexS); |
||||||
|
var results = regex.exec(url); |
||||||
|
|
||||||
|
if (results == null) return ""; |
||||||
|
else return decodeURIComponent(results[1].replace(/\+/g, " ")); |
||||||
|
}, |
||||||
|
openAd(index) |
||||||
|
{ |
||||||
|
var _this =this; |
||||||
|
var item = _this.banner[index]; |
||||||
|
console.log(item); |
||||||
|
if(!_this.$com.isNull(item.jumpUrl)) |
||||||
|
{ |
||||||
|
console.log(item.jumpUrl); |
||||||
|
var url = ''; |
||||||
|
switch(item.jumpType) |
||||||
|
{ |
||||||
|
case 0: |
||||||
|
url=item.jumpUrl; |
||||||
|
break; |
||||||
|
|
||||||
|
case 1: |
||||||
|
url='/pages/web/index?title='+item.adName+'&url='+encodeURIComponent(item.jumpUrl); |
||||||
|
break; |
||||||
|
|
||||||
|
case 2: |
||||||
|
url='/pages/web/video?title='+item.adName+'&url='+encodeURIComponent(item.jumpUrl); |
||||||
|
break; |
||||||
|
|
||||||
|
default: |
||||||
|
url = ''; |
||||||
|
} |
||||||
|
if(!_this.$com.isNull(url)) |
||||||
|
{ |
||||||
|
uni.navigateTo({ |
||||||
|
url:url, |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.container{width: 100%;} |
||||||
|
|
||||||
|
.bannerBox{ |
||||||
|
width: 100%; |
||||||
|
background: #082436; |
||||||
|
height: auto; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
::v-deep .u-swiper{background-color: inherit !important;} |
||||||
|
|
||||||
|
.contentBox{ |
||||||
|
width:746rpx; |
||||||
|
height: 500rpx; |
||||||
|
background: linear-gradient( 180deg, #DBD9FF 0%, #F5F6FB 100%); |
||||||
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
||||||
|
border: 2rpx solid #FFFFFF; |
||||||
|
margin-top: -80rpx; |
||||||
|
position: relative; |
||||||
|
z-index: 2; |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.navBox{ width: 100%; height: auto; display: flex;} |
||||||
|
.navBox .navItem{ width: 164rpx; height: 140rpx; margin: 40rpx 20rpx 20rpx 20rpx;} |
||||||
|
.navBox .navItem image{ width: 100%; height: auto;} |
||||||
|
.indexTitle {width: 730rpx; height: auto; margin: 20rpx auto; padding-left: 20rpx; } |
||||||
|
.indexTitle image{ width: 226rpx; height: auto;} |
||||||
|
|
||||||
|
|
||||||
|
.listBox{ width: 100%; height: auto;} |
||||||
|
.photoBox{ |
||||||
|
padding:20rpx 10rpx 10rpx 10rpx; |
||||||
|
height: auto; |
||||||
|
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||||
|
opacity: 1; |
||||||
|
background: #FFFFFF; |
||||||
|
width: 670rpx; |
||||||
|
margin: 15rpx auto; |
||||||
|
} |
||||||
|
.photoTop{width: 100%; height: auto; display: flex; |
||||||
|
|
||||||
|
} |
||||||
|
.photoTop .topLeft{ |
||||||
|
width: 100rpx; |
||||||
|
height: 88rpx; |
||||||
|
|
||||||
|
} |
||||||
|
.topLeft image{ width: 60rpx; height: auto; margin-left: 14rpx;} |
||||||
|
.photoTop .topCenter{ |
||||||
|
width: 400rpx; |
||||||
|
height: auto; |
||||||
|
padding-left: 18rpx; |
||||||
|
|
||||||
|
} |
||||||
|
.topCenter .title{ |
||||||
|
font-size: 30rpx; |
||||||
|
font-weight: 400; |
||||||
|
color:#333333; |
||||||
|
line-height: 50rpx; |
||||||
|
width: 100%; |
||||||
|
overflow: hidden; //超出文本隐藏 |
||||||
|
white-space: nowrap; //不换行，只显示一行 |
||||||
|
text-overflow: ellipsis; //超出部分省略号显示 |
||||||
|
} |
||||||
|
.topCenter .desc{ |
||||||
|
font-size: 24rpx; |
||||||
|
color:#999999; |
||||||
|
line-height: 30rpx; |
||||||
|
width: 100%; |
||||||
|
overflow: hidden; //超出文本隐藏 |
||||||
|
white-space: nowrap; //不换行，只显示一行 |
||||||
|
text-overflow: ellipsis; //超 |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.photoTop .topRight{ |
||||||
|
width: 160rpx; |
||||||
|
height: auto; |
||||||
|
text-align: right; |
||||||
|
|
||||||
|
} |
||||||
|
.topRight .distance{ color: #90A1AA; font-size: 24rpx; font-family: PingFang SC-Regular; padding-top: 20rpx;} |
||||||
|
.topRight .distance image{ width: 32rpx; height: 32rpx; margin-right: 24rpx;} |
||||||
|
|
||||||
|
|
||||||
|
.picList{ width: 100%; height: 360rpx;} |
||||||
|
|
||||||
|
.scrollBox { |
||||||
|
margin-top: 20rpx; |
||||||
|
width: 100%; |
||||||
|
height: 360rpx; |
||||||
|
white-space: nowrap; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.picBox { |
||||||
|
display: inline-block; |
||||||
|
width:260rpx; |
||||||
|
height: 360rpx; |
||||||
|
text-align: center; |
||||||
|
position: relative; |
||||||
|
margin-left: 20rpx; |
||||||
|
|
||||||
|
} |
||||||
|
.picBox .pic{ |
||||||
|
position: absolute; |
||||||
|
width:100%; |
||||||
|
height: 360rpx; |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
.picBox .pic image{ |
||||||
|
width:260rpx; |
||||||
|
height: 360rpx; |
||||||
|
border-radius:24rpx; |
||||||
|
} |
||||||
|
.picBox .pic_title{ |
||||||
|
position: absolute; |
||||||
|
width:240rpx; |
||||||
|
height: 72rpx; |
||||||
|
bottom: 0; |
||||||
|
z-index: 2; |
||||||
|
font-size: 24rpx; line-height: 72rpx; |
||||||
|
padding-left: 20rpx; |
||||||
|
color: #FFFFFF; |
||||||
|
text-align: left; |
||||||
|
overflow: hidden; //超出文本隐藏 |
||||||
|
white-space: nowrap; //不换行，只显示一行 |
||||||
|
text-overflow: ellipsis; //超 |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,275 @@ |
|||||||
|
<template> |
||||||
|
<view class="container"> |
||||||
|
|
||||||
|
|
||||||
|
<view class="form"> |
||||||
|
<!--input box start--> |
||||||
|
<view class='input_box'> |
||||||
|
<view class='i_box_1'>头像</view> |
||||||
|
<view class='i_box_2'></view> |
||||||
|
<view class='i_box_3'> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class='i_box_4'></view> |
||||||
|
<view class='i_box_5'> |
||||||
|
<view class="up"> |
||||||
|
<view class="img"> |
||||||
|
<u-upload |
||||||
|
|
||||||
|
:fileList="wxAvatar" |
||||||
|
@afterRead="afterRead" |
||||||
|
@delete="deletePic" |
||||||
|
name="avatar" |
||||||
|
width="26" |
||||||
|
height="26" |
||||||
|
:sizeType="['compressed']" |
||||||
|
:deletable="true" |
||||||
|
:maxCount="1" |
||||||
|
:previewFullImage="false" |
||||||
|
> |
||||||
|
|
||||||
|
</u-upload> |
||||||
|
</view> |
||||||
|
<view class="icon" @click="clearImg"> |
||||||
|
<u-icon name="arrow-right" top="5"></u-icon> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<!--input box end--> |
||||||
|
|
||||||
|
|
||||||
|
<!--input box start--> |
||||||
|
<view class='input_box'> |
||||||
|
<view class='i_box_1'>昵称</view> |
||||||
|
<view class='i_box_2'></view> |
||||||
|
<view class='i_box_3x'> |
||||||
|
<u--input |
||||||
|
placeholder="请输入昵称" |
||||||
|
inputAlign="right" |
||||||
|
border="none" |
||||||
|
color="#FFFFFF" |
||||||
|
maxlength="10" |
||||||
|
v-model="info.wxName" |
||||||
|
></u--input> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<!--input box end--> |
||||||
|
|
||||||
|
<!--input box start--> |
||||||
|
<view class='input_box'> |
||||||
|
<view class='i_box_1'>手机号</view> |
||||||
|
<view class='i_box_2'></view> |
||||||
|
<view class='i_box_3x'> |
||||||
|
<u--input |
||||||
|
v-if="!this.$com.isNull(info.phoneNumber)" |
||||||
|
inputAlign="right" |
||||||
|
border="none" |
||||||
|
color="#FFFFFF" |
||||||
|
maxlength="11" |
||||||
|
v-model="info.phoneNumber" |
||||||
|
:readonly="true" |
||||||
|
></u--input> |
||||||
|
<u-button v-else :text="info.phoneNumber || '点击获取手机号'" openType="getPhoneNumber" @getphonenumber="getPhoneNumber"></u-button> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<!--input box end--> |
||||||
|
|
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="btn-big"><u-button type="info" :loading="btn_loading" loadingText="加载中" :disabled="btn_disabled" text="保存" @click="add"></u-button></view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
//form框 |
||||||
|
info: { |
||||||
|
wxName:'', |
||||||
|
wxAvatar:'', |
||||||
|
phoneNumber:'点击获取手机号', |
||||||
|
|
||||||
|
}, |
||||||
|
wxAvatar: [], |
||||||
|
//按钮设置 |
||||||
|
btn_loading:false, |
||||||
|
btn_disabled:false, |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(option) { |
||||||
|
var _this = this; |
||||||
|
_this.getUserInfo(); |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
//获取用户信息 |
||||||
|
getUserInfo() |
||||||
|
{ |
||||||
|
var _this =this; |
||||||
|
var post ={}; |
||||||
|
_this.$api.post('ycl/user/wx-info',post,function(rs){ |
||||||
|
console.log(rs); |
||||||
|
_this.info = rs; |
||||||
|
_this.wxAvatar =[{url:rs.wxAvatar}]; |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 删除图片 |
||||||
|
deletePic(event) { |
||||||
|
var _this = this; |
||||||
|
_this.wxAvatar = []; |
||||||
|
}, |
||||||
|
// 新增图片 |
||||||
|
afterRead(event) { |
||||||
|
|
||||||
|
var _this = this |
||||||
|
console.log('event',event); |
||||||
|
var edetail = event.file.thumb; |
||||||
|
if (edetail.indexOf('http://tmp') != -1 || edetail.indexOf('wxfile://tmp') != -1) |
||||||
|
{ |
||||||
|
var FSM = uni.getFileSystemManager(); |
||||||
|
FSM.readFile({ |
||||||
|
filePath: edetail, |
||||||
|
encoding: "base64", |
||||||
|
success: function(data) { |
||||||
|
_this.info.imgBase64 = "data:image/png;base64," + data.data |
||||||
|
_this.wxAvatar = [{url:edetail}]; |
||||||
|
}, |
||||||
|
fail: function(err){ |
||||||
|
console.log('http://tmp',err) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
uploadFilePromise(url) { |
||||||
|
|
||||||
|
}, |
||||||
|
loadData(){ |
||||||
|
|
||||||
|
}, |
||||||
|
getPhoneNumber(e){ |
||||||
|
var _this =this; |
||||||
|
var detail = e.detail; |
||||||
|
console.log(detail); |
||||||
|
if (detail.errMsg === 'getPhoneNumber:ok') { |
||||||
|
|
||||||
|
_this.getPhoneApi(detail); |
||||||
|
} else { |
||||||
|
_this.$com.alert('授权失败') |
||||||
|
} |
||||||
|
}, |
||||||
|
getPhoneApi(detail){ |
||||||
|
var _this = this; |
||||||
|
|
||||||
|
var post ={ |
||||||
|
|
||||||
|
code: detail.code, |
||||||
|
}; |
||||||
|
_this.$api.post('ycl/user/wx-phone',post,function(rs){ |
||||||
|
console.log(rs); |
||||||
|
_this.info.phoneNumber = rs; |
||||||
|
},function(err){ |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
//提交表单 |
||||||
|
add(){ |
||||||
|
var _this =this; |
||||||
|
var info = _this.info; |
||||||
|
|
||||||
|
if(_this.$com.isNull(info.wxName)) |
||||||
|
{ |
||||||
|
_this.$com.showError('请输入昵称'); |
||||||
|
return; |
||||||
|
} |
||||||
|
if(_this.$com.isNull(info.wxAvatar) && _this.$com.isNull(info.imgBase64)) |
||||||
|
{ |
||||||
|
_this.$com.showError('请上传头像'); |
||||||
|
return; |
||||||
|
} |
||||||
|
if(_this.$com.isNull(info.phoneNumber)) |
||||||
|
{ |
||||||
|
_this.$com.showError('手机号必须'); |
||||||
|
return; |
||||||
|
} |
||||||
|
_this.btn_loading = true; |
||||||
|
_this.btn_disabled = true; |
||||||
|
var post = info; |
||||||
|
_this.$api.put('ycl/user/wx-update',post,function(rs){ |
||||||
|
console.log('更新token'); |
||||||
|
_this.$user.session('token',rs.token); |
||||||
|
_this.$com.alert('更新成功'); |
||||||
|
setTimeout(function(){ |
||||||
|
uni.$u.route({ |
||||||
|
type:'navigateBack', |
||||||
|
delta:1, |
||||||
|
}); |
||||||
|
},1000); |
||||||
|
}); |
||||||
|
//按钮还原 |
||||||
|
_this.btn_loading = false; |
||||||
|
_this.btn_disabled = false; |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.container{padding:10rpx 20rpx;} |
||||||
|
.form{ padding: 20rpx; |
||||||
|
background: #082436; |
||||||
|
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||||
|
} |
||||||
|
/*form基本元素*/ |
||||||
|
/*input_box*/ |
||||||
|
.input_box{ display: flex;flex-direction:row; height: 100rpx; line-height: 100rpx; |
||||||
|
border-radius: 15rpx;box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.05); margin: 20rpx auto; color:#FFFFFF;} |
||||||
|
|
||||||
|
.i_box_1{ width: 25%;height: 100rpx; font-size: 28rpx; text-align: left; } |
||||||
|
.i_box_2{width: 0.3%;height: 80rpx; margin-top: 10rpx;} |
||||||
|
.i_box_3{ height: 100rpx;min-width: 49.4%; width: auto;font-size: 26rpx;} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*特殊的 改变部分*/ |
||||||
|
.i_box_3x{height: 100rpx;min-width: 74.7%; width: auto;font-size: 26rpx;} |
||||||
|
::v-deep .u-input{ border:none !important; color:#FFFFFF !important; margin-top: 10rpx;} |
||||||
|
.up{ width: 100%; height: auto; display: flex; margin-top: 20rpx;} |
||||||
|
.up .img{width:80%; } |
||||||
|
.up .img .u-upload{ margin-left: 80rpx;} |
||||||
|
.up .icon{ width:20%;} |
||||||
|
::v-deep .i_box_3x .u-button--info{ background-color: transparent !important; border: none !important; color: #FFFFFF !important; text-align: right !important;} |
||||||
|
::v-deep .i_box_3x .u-button{display: block !important; padding:0rpx !important;} |
||||||
|
::v-deep .u-upload__button{border-radius: 50% !important;} |
||||||
|
::v-deep .u-upload__wrap__preview{border-radius: 50% !important;} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.btn-big{ width:100%; |
||||||
|
height: 92rpx; |
||||||
|
line-height: 92rpx; |
||||||
|
margin:30rpx auto; |
||||||
|
display:block; |
||||||
|
border-radius:56rpx; |
||||||
|
background:#00F0E2; |
||||||
|
font-size:28rpx; |
||||||
|
color:#fff;text-align: center;} |
||||||
|
|
||||||
|
::v-deep .btn-big .u-button--info{ background-color: transparent !important; border: none !important; color: #FFFFFF !important; } |
||||||
|
|
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,176 @@ |
|||||||
|
<template> |
||||||
|
<view class="container"> |
||||||
|
|
||||||
|
<view class="input_box"> |
||||||
|
<text class="input_title">{{$t('pages.user.auth.login.mobile')}}</text> |
||||||
|
<view class="input_content"> |
||||||
|
<u--input |
||||||
|
:placeholder="$t('pages.user.auth.login.input_mobile')" |
||||||
|
prefixIcon="phone" |
||||||
|
prefixIconStyle="font-size: 24rpx;color: #909399" |
||||||
|
v-model="form.mobile" |
||||||
|
@change="mobileChange" |
||||||
|
></u--input> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<view class="input_box"> |
||||||
|
<text class="input_title">{{$t('pages.user.auth.login.password')}}</text> |
||||||
|
<view class="input_content"> |
||||||
|
<u--input |
||||||
|
:placeholder="$t('pages.user.auth.login.input_password')" |
||||||
|
prefixIcon="lock" |
||||||
|
prefixIconStyle="font-size: 24rpx;color: #909399" |
||||||
|
border="surround" |
||||||
|
password |
||||||
|
clearable |
||||||
|
v-model="form.password" |
||||||
|
@change="pwdChange" |
||||||
|
></u--input> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<view class="button_box"> |
||||||
|
<view class="submit"> |
||||||
|
<u-button type="primary" :plain="true" :hairline="true" :text="$t('locale.login')" size="normal" @click="login"></u-button> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="footer"> |
||||||
|
<!-- <text class="footer-text">找回密码</text> --> |
||||||
|
<text class="footer-text" @click="regist">{{$t('locale.regist')}}</text> |
||||||
|
<!-- <text class="footer-text">投诉建议</text> --> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
form:{ |
||||||
|
mobile:'', |
||||||
|
password:'', |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
var _this =this; |
||||||
|
|
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
//跳转到注册 |
||||||
|
regist(){ |
||||||
|
uni.$u.route({ |
||||||
|
type:'redirectTo', |
||||||
|
url: 'pages/user/auth/regist', |
||||||
|
params: {} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//手机号 |
||||||
|
mobileChange(e) |
||||||
|
{ |
||||||
|
var _this = this; |
||||||
|
_this.form['mobile'] = e; |
||||||
|
|
||||||
|
}, |
||||||
|
//密码 |
||||||
|
pwdChange(e) |
||||||
|
{ |
||||||
|
var _this = this; |
||||||
|
_this.form['password'] = e; |
||||||
|
}, |
||||||
|
login(){ |
||||||
|
var _this =this; |
||||||
|
var form = _this.form; |
||||||
|
if(!_this.$com.check(form.mobile,'mobile')) |
||||||
|
{ |
||||||
|
uni.$u.toast(_this.$t('pages.user.auth.login.mobile_must')); |
||||||
|
return false; |
||||||
|
} |
||||||
|
if(form.password.length < 6) |
||||||
|
{ |
||||||
|
uni.$u.toast(_this.$t('pages.user.auth.login.password_must')); |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
var post = form; |
||||||
|
_this.$api.post('user/log',post,function(rs){ |
||||||
|
console.log(rs); |
||||||
|
_this.$user.session('userInfo',rs.userinfo); |
||||||
|
_this.$user.session('token',rs.token); |
||||||
|
uni.$u.route({ |
||||||
|
type:'navigateBack', |
||||||
|
delta:2, |
||||||
|
params: {} |
||||||
|
}); |
||||||
|
},function(err){ |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
/*输入框*/ |
||||||
|
.input_box{ |
||||||
|
width: 90%; |
||||||
|
margin: 40rpx auto 40rpx auto; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.input_title{ |
||||||
|
font-size: 30rpx; |
||||||
|
color: #ABABAB; |
||||||
|
height: 50rpx; |
||||||
|
line-height: 50rpx; |
||||||
|
margin: 10rpx auto; |
||||||
|
display: block; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.button_box { |
||||||
|
width: 90%; |
||||||
|
margin: 40rpx auto 20rpx auto; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.submit { |
||||||
|
width: 100%; |
||||||
|
background-color: #4CAF50; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
border-radius: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.submit-text { |
||||||
|
color: white; |
||||||
|
padding: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.submit:active { |
||||||
|
background-color: green; |
||||||
|
opacity: 0.5; |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
flex-direction: row; |
||||||
|
justify-content: center; |
||||||
|
text-align: center; |
||||||
|
align-items: center; |
||||||
|
margin-top: 100rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-text { |
||||||
|
font-size: 28rpx; |
||||||
|
color: #296db5; |
||||||
|
padding: 30rpx; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,205 @@ |
|||||||
|
<template> |
||||||
|
<view class="container"> |
||||||
|
|
||||||
|
<view class="input_box"> |
||||||
|
<text class="input_title">{{$t('pages.user.auth.login.mobile')}}</text> |
||||||
|
<view class="input_content"> |
||||||
|
<u--input |
||||||
|
:placeholder="$t('pages.user.auth.login.input_mobile')" |
||||||
|
prefixIcon="phone" |
||||||
|
prefixIconStyle="font-size: 24rpx;color: #909399" |
||||||
|
type="number" |
||||||
|
v-model="form.mobile" |
||||||
|
@change="mobileChange" |
||||||
|
></u--input> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<view class="input_box"> |
||||||
|
<text class="input_title">{{$t('pages.user.auth.login.password')}}</text> |
||||||
|
<view class="input_content"> |
||||||
|
<u--input |
||||||
|
:placeholder="$t('pages.user.auth.login.input_password')" |
||||||
|
prefixIcon="lock" |
||||||
|
prefixIconStyle="font-size: 24rpx;color: #909399" |
||||||
|
border="surround" |
||||||
|
password |
||||||
|
clearable |
||||||
|
v-model="form.password" |
||||||
|
@change="pwdChange" |
||||||
|
></u--input> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="input_box"> |
||||||
|
<text class="input_title">{{$t('pages.user.auth.login.email')}}</text> |
||||||
|
<view class="input_content"> |
||||||
|
<u--input |
||||||
|
:placeholder="$t('pages.user.auth.login.input_email')" |
||||||
|
prefixIcon="email" |
||||||
|
prefixIconStyle="font-size: 24rpx;color: #909399" |
||||||
|
v-model="form.email" |
||||||
|
@change="emailChange" |
||||||
|
></u--input> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="button_box"> |
||||||
|
<view class="submit"> |
||||||
|
<u-button type="primary" :plain="true" :hairline="true" :text="$t('locale.regist')" size="normal" @click="regist"></u-button> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="footer"> |
||||||
|
<!-- <text class="footer-text">找回密码</text> --> |
||||||
|
<text class="footer-text" @click="login">{{$t('locale.login')}}</text> |
||||||
|
<!-- <text class="footer-text">投诉建议</text> --> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form:{ |
||||||
|
mobile:'', |
||||||
|
password:'', |
||||||
|
email:'', |
||||||
|
}, |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
var _this =this; |
||||||
|
|
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
//跳转到登录 |
||||||
|
login(){ |
||||||
|
uni.$u.route({ |
||||||
|
type:'redirectTo', |
||||||
|
url: 'pages/user/auth/login', |
||||||
|
params: {} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//手机号 |
||||||
|
mobileChange(e) |
||||||
|
{ |
||||||
|
var _this = this; |
||||||
|
_this.form['mobile'] = e; |
||||||
|
|
||||||
|
}, |
||||||
|
//密码 |
||||||
|
pwdChange(e) |
||||||
|
{ |
||||||
|
var _this = this; |
||||||
|
_this.form['password'] = e; |
||||||
|
}, |
||||||
|
//email |
||||||
|
emailChange(e) |
||||||
|
{ |
||||||
|
var _this = this; |
||||||
|
_this.form['email'] = e; |
||||||
|
}, |
||||||
|
regist() |
||||||
|
{ |
||||||
|
var _this =this; |
||||||
|
var form = _this.form; |
||||||
|
if(!_this.$com.check(form.mobile,'mobile')) |
||||||
|
{ |
||||||
|
uni.$u.toast(_this.$t('pages.user.auth.login.mobile_must')); |
||||||
|
return false; |
||||||
|
} |
||||||
|
if(form.password.length < 6) |
||||||
|
{ |
||||||
|
uni.$u.toast(_this.$t('pages.user.auth.login.password_must')); |
||||||
|
return false; |
||||||
|
} |
||||||
|
if(!_this.$com.check(form.email,'email')) |
||||||
|
{ |
||||||
|
uni.$u.toast(_this.$t('pages.user.auth.login.email_must')); |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
var post = form; |
||||||
|
_this.$api.post('user/reg',post,function(rs){ |
||||||
|
console.log(rs); |
||||||
|
uni.showModal({ |
||||||
|
title: _this.$t('locale.tips'), |
||||||
|
content: _this.$t('pages.user.auth.regist.regist_success'), |
||||||
|
success: function (res) { |
||||||
|
if (res.confirm) { |
||||||
|
console.log('用户点击确定'); |
||||||
|
_this.login(); |
||||||
|
} else if (res.cancel) { |
||||||
|
console.log('用户点击取消'); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
},function(err){ |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
/*输入框*/ |
||||||
|
.input_box{ |
||||||
|
width: 90%; |
||||||
|
margin: 40rpx auto 40rpx auto; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.input_title{ |
||||||
|
font-size: 30rpx; |
||||||
|
color: #ABABAB; |
||||||
|
height: 50rpx; |
||||||
|
line-height: 50rpx; |
||||||
|
margin: 10rpx auto; |
||||||
|
display: block; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.button_box { |
||||||
|
width: 90%; |
||||||
|
margin: 40rpx auto 20rpx auto; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.submit { |
||||||
|
width: 100%; |
||||||
|
background-color: #4CAF50; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
border-radius: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.submit-text { |
||||||
|
color: white; |
||||||
|
padding: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.submit:active { |
||||||
|
background-color: green; |
||||||
|
opacity: 0.5; |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
flex-direction: row; |
||||||
|
justify-content: center; |
||||||
|
text-align: center; |
||||||
|
align-items: center; |
||||||
|
margin-top: 100rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-text { |
||||||
|
font-size: 28rpx; |
||||||
|
color: #296db5; |
||||||
|
padding: 30rpx; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,536 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
|
||||||
|
<view class="header"> |
||||||
|
<image class='background' src="/static/img/user/topbg.png" mode="aspectFill"></image> |
||||||
|
<view class="userInfo"> |
||||||
|
<view class="uleft"> |
||||||
|
<u-image :src="userInfo.wxAvatar" width="60px" height="60px" radius="30px" @error="imgErr"></u-image> |
||||||
|
</view> |
||||||
|
<view class="ucenter"> |
||||||
|
<view class="name"><text class="username">{{userInfo.wxName}}</text><text class="level">{{identityinfo.levelTxt}}</text></view> |
||||||
|
</view> |
||||||
|
<view class="uright"> |
||||||
|
<view class="change" v-if="!this.$com.isNull(userInfo.phoneNumber)"> |
||||||
|
<u-button text="切换" openType="getPhoneNumber" @getphonenumber="getPhoneNumber"></u-button> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="userItem"> |
||||||
|
<view class="uItemBox"> |
||||||
|
<view class="num">{{userInfo.totalAmount > 0 ? userInfo.totalAmount / 100 : '0.00'}}</view> |
||||||
|
<view class="text">消费金额(元)</view> |
||||||
|
</view> |
||||||
|
<view class="uItemBox"> |
||||||
|
<view class="num">{{userInfo.totalDur > 0 ? userInfo.totalDur : 0}}</view> |
||||||
|
<view class="text">使用时长(分)</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="orderBox"> |
||||||
|
<view class="orderBoxTitle">我的订单</view> |
||||||
|
<view class="orderItem"> |
||||||
|
<view class="oItemBox" v-for="(item,key) in ordermenu" :key="key" @click="goTo(item.url)"> |
||||||
|
<view class="image"> |
||||||
|
<image :src="item.icon" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="order_text">{{item.label}}</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="moneyBox" v-if="identityinfo.levelVal < 4"> |
||||||
|
<view class="moneyBoxTitle">收入抽成</view> |
||||||
|
<view class="moneyBoxItem"> |
||||||
|
<view class="mItemBox"> |
||||||
|
<view class="money"> |
||||||
|
<text class="unit">￥</text><text class="num">{{userInfo.todayIncome > 0 ? userInfo.todayIncome / 100 :'0.00'}}</text> |
||||||
|
</view> |
||||||
|
<view class="order_text">今日收入</view> |
||||||
|
</view> |
||||||
|
<view class="mItemBox"> |
||||||
|
<view class="money"> |
||||||
|
<text class="unit">￥</text><text class="num">{{userInfo.totalIncome > 0 ? userInfo.totalIncome / 100 :'0.00'}}</text> |
||||||
|
</view> |
||||||
|
<view class="order_text">总收入</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="mItemBox"> |
||||||
|
<view class="money"> |
||||||
|
<text class="unit">￥</text><text class="num">{{userInfo.todayLevelIncome > 0 ? userInfo.todayLevelIncome / 100 :'0.00'}}</text> |
||||||
|
</view> |
||||||
|
<view class="order_text">今日抽成</view> |
||||||
|
</view> |
||||||
|
<view class="mItemBox"> |
||||||
|
<view class="money"> |
||||||
|
<text class="unit">￥</text><text class="num">{{userInfo.totalLevelIncome > 0 ? userInfo.totalLevelIncome / 100 :'0.00'}}</text> |
||||||
|
</view> |
||||||
|
<view class="order_text">总抽成</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
<view class="serviceBox"> |
||||||
|
<view class="serviceBoxTitle">我的服务</view> |
||||||
|
<view class="serviceItem"> |
||||||
|
<view class="sItemBox" v-for="(item,key) in shopmenu" :key="key" v-if="item.level >= identityinfo.levelVal" @click="goTo(item.url)"> |
||||||
|
<view class="image"> |
||||||
|
<image :src="item.icon" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="order_text">{{item.label}}</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="ad"> |
||||||
|
<image src="@/static/img/user/banner.jpg" mode="widthFix" @click="openVideo"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="serviceBox"> |
||||||
|
<view class="serviceBoxTitle">我的工具</view> |
||||||
|
<view class="serviceItem"> |
||||||
|
<view class="sItemBox" v-for="(item,key) in setmenu" :key="key" @click="tools(item)"> |
||||||
|
<view class="image"> |
||||||
|
<image :src="item.icon" mode="widthFix"></image> |
||||||
|
</view> |
||||||
|
<view class="order_text">{{item.label}}</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="nowENV" v-if="this.$api.env() == 'development' || this.$api.env() == 'local'"> |
||||||
|
<u-tag v-if="this.$api.env() == 'development'" text="线上测试环境" type="warning" plain plainFill></u-tag> |
||||||
|
<u-tag v-if="this.$api.env() == 'local'" text="本地开发环境" type="error" plain plainFill></u-tag> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="empty"> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
<u-popup :show="video_show" :round="10" mode="center" :closeable="true" customStyle="{width:750rpx,height:auto}" @close="closeVideo"> |
||||||
|
<view class="videoBox"> |
||||||
|
<video id="myVideo" :src="video_src" @error="videoErrorCallback" :autoplay="false" controls></video> |
||||||
|
</view> |
||||||
|
</u-popup> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
isLogin:false, //登录 |
||||||
|
userInfo:{ |
||||||
|
wxAvatar:'/static/img/user/avatar.png', |
||||||
|
wxName:'点击登录', |
||||||
|
totalAmount:0.00, |
||||||
|
totalDur:0, |
||||||
|
}, |
||||||
|
isShop:false, //店铺 |
||||||
|
ordermenu: [ |
||||||
|
{ label: '全部', icon: '/static/img/user/order_all.png', url: '/pages/order/list?tab=0'}, |
||||||
|
{ label: '进行中', icon: '/static/img/user/order_ing.png', url: '/pages/order/list?tab=1'}, |
||||||
|
{ label: '已完成', icon: '/static/img/user/order_finish.png', url: '/pages/order/list?tab=2'}, |
||||||
|
], |
||||||
|
shopmenu: [ |
||||||
|
{ label: '店铺管理', icon: '/static/img/order/store.png', url: '/pages/user/shop/shopmanage', level: 3}, |
||||||
|
{ label: '收入记录', icon: '/static/img/user/money_log.png', url: '/pages/user/mine/income', level: 3}, |
||||||
|
{ label: '提现申请', icon: '/static/img/user/withdraw.png', url: '/pages/user/mine/withdraw', level: 3}, |
||||||
|
{ label: '我的下级', icon: '/static/img/user/link.png', url: '/pages/user/mine/leveluser', level: 2}, |
||||||
|
{ label: '查看码值', icon: '/static/img/user/code.png', url: '/pages/user/shop/lookcode', level: 3}, |
||||||
|
{ label: '提现记录', icon: '/static/img/user/withdraw_log.png', url: '/pages/user/mine/withdrawrecord', level: 3}, |
||||||
|
|
||||||
|
], |
||||||
|
setmenu: [ |
||||||
|
{ label: '账户设置', icon: '/static/img/user/account.png', type: 'normal',url: '/pages/user/account/index'}, |
||||||
|
{ label: '联系客服', icon: '/static/img/user/chat.png', type: 'service',url:''}, |
||||||
|
{ label: '代理入驻', icon: '/static/img/user/settled.png', type: 'normal',url: '/pages/user/mine/settled'} |
||||||
|
], |
||||||
|
//等级 |
||||||
|
identityinfo:'', |
||||||
|
|
||||||
|
//视频显示 |
||||||
|
video_show:false, |
||||||
|
video_src:'https://kjc.oss-cn-shenzhen.aliyuncs.com/video/demo.mp4', |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
onReady: function (res) { |
||||||
|
this.videoContext = uni.createVideoContext('myVideo') |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
var _this =this; |
||||||
|
var openid = _this.$user.session('openid'); |
||||||
|
if(!_this.$com.isNull(openid)) |
||||||
|
{ |
||||||
|
_this.isLogin = true; |
||||||
|
_this.getUserInfo(); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
onShareAppMessage() { |
||||||
|
return { |
||||||
|
title: '空间充-我的', |
||||||
|
path: uni.$u.page(), |
||||||
|
} |
||||||
|
}, |
||||||
|
onShareTimeline() { |
||||||
|
return { |
||||||
|
title: '空间充-我的', |
||||||
|
path: uni.$u.page(), |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
//头像加载失败 |
||||||
|
imgErr(){ |
||||||
|
this.userInfo.wxAvatar = '/static/img/user/avatar.png'; |
||||||
|
}, |
||||||
|
//获取用户信息 |
||||||
|
getUserInfo() |
||||||
|
{ |
||||||
|
var _this =this; |
||||||
|
var post ={}; |
||||||
|
_this.$api.post('ycl/user/wx-info',post,function(rs){ |
||||||
|
console.log(rs); |
||||||
|
_this.userInfo = rs; |
||||||
|
_this.$user.session('lifeData',rs); |
||||||
|
var identityinfo = _this.$access.checkidentity(rs); |
||||||
|
console.log(identityinfo); |
||||||
|
_this.identityinfo = identityinfo; |
||||||
|
_this.$user.session('identityinfo',identityinfo); |
||||||
|
if(identityinfo.levelVal != 4) |
||||||
|
{ |
||||||
|
var setmenu = _this.setmenu; |
||||||
|
var updatedSetmenu = setmenu.filter(item => item.label !== '代理入驻'); |
||||||
|
_this.setmenu = updatedSetmenu; |
||||||
|
} |
||||||
|
|
||||||
|
},function(err){ |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}, |
||||||
|
goTo(url) |
||||||
|
{ |
||||||
|
uni.$u.route({ |
||||||
|
type:'navigateTo', |
||||||
|
url: url, |
||||||
|
}); |
||||||
|
}, |
||||||
|
tools(item) |
||||||
|
{ |
||||||
|
var _this =this; |
||||||
|
if(item.type == 'service') |
||||||
|
{ |
||||||
|
var phone = _this.$user.session('servicePhone'); |
||||||
|
uni.makePhoneCall({ |
||||||
|
phoneNumber: phone, |
||||||
|
success(res) { |
||||||
|
console.log(res); |
||||||
|
}, |
||||||
|
fail(err) { |
||||||
|
console.log(err); |
||||||
|
}, |
||||||
|
}); |
||||||
|
} |
||||||
|
else |
||||||
|
{ |
||||||
|
uni.$u.route({ |
||||||
|
type:'navigateTo', |
||||||
|
url: item.url, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
//打开视频 |
||||||
|
openVideo(){ |
||||||
|
var _this =this; |
||||||
|
_this.video_show = true; |
||||||
|
}, |
||||||
|
videoErrorCallback(e) |
||||||
|
{ |
||||||
|
console.log(e); |
||||||
|
}, |
||||||
|
closeVideo(){ |
||||||
|
var _this =this; |
||||||
|
_this.video_show = false; |
||||||
|
_this.videoContext.pause = true; |
||||||
|
}, |
||||||
|
|
||||||
|
getPhoneNumber(e){ |
||||||
|
var _this =this; |
||||||
|
var detail = e.detail; |
||||||
|
console.log(detail); |
||||||
|
if (detail.errMsg === 'getPhoneNumber:ok') { |
||||||
|
|
||||||
|
_this.getPhoneApi(detail); |
||||||
|
} else { |
||||||
|
_this.$com.alert('授权失败') |
||||||
|
} |
||||||
|
}, |
||||||
|
getPhoneApi(detail){ |
||||||
|
var _this = this; |
||||||
|
var openid = _this.$user.session('openid'); |
||||||
|
var post ={ |
||||||
|
|
||||||
|
code: detail.code, |
||||||
|
}; |
||||||
|
_this.$api.post('ycl/user/wx-phone',post,function(rs){ |
||||||
|
console.log(rs); |
||||||
|
var phoneNumber = rs; |
||||||
|
_this.userInfo.phoneNumber = phoneNumber; |
||||||
|
if(_this.$com.isNull(openid)) |
||||||
|
{ |
||||||
|
_this.$com.alert('切换失败,请退出并重新进入小程序重试'); |
||||||
|
} |
||||||
|
// #ifdef MP |
||||||
|
//这里目前微信小程序和抖音功能基本一样 |
||||||
|
uni.getProvider({ |
||||||
|
service: 'oauth', |
||||||
|
success: function (res) { |
||||||
|
console.log(res.provider) |
||||||
|
var provider = res.provider[0]; |
||||||
|
|
||||||
|
uni.login({ |
||||||
|
provider:provider, |
||||||
|
scopes:'auth_base', |
||||||
|
success: function (login) { |
||||||
|
console.log(login); |
||||||
|
//发起网络请求 |
||||||
|
var xpost = { |
||||||
|
loginCode: login.code, |
||||||
|
phoneNumber:phoneNumber, |
||||||
|
}; |
||||||
|
_this.$api.post('ycl/user/wx-login', xpost,function(resx){ |
||||||
|
console.log(resx); |
||||||
|
_this.$user.session('openid',resx.wxOpenid); |
||||||
|
_this.$user.session('user_id',resx.id); |
||||||
|
if(!_this.$com.isNull(resx.token)) |
||||||
|
{ |
||||||
|
_this.$user.session('token',resx.token); |
||||||
|
} |
||||||
|
_this.isLogin = true; |
||||||
|
_this.getUserInfo(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
fail:function(rs){ |
||||||
|
console.log('登录失败'+rs.errMsg); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
// #endif |
||||||
|
},function(err){ |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
page{ height:100%; width: 100%;} |
||||||
|
.container{padding:10rpx 20rpx;} |
||||||
|
.header{ width: 100%; height: 500rpx; overflow: hidden; position: relative;} |
||||||
|
.background { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position:absolute; |
||||||
|
background-size:100% 100%; |
||||||
|
z-index: -1; |
||||||
|
} |
||||||
|
.userInfo{ width: 670rpx; height: auto; display: flex; margin: 100rpx auto 50rpx auto;} |
||||||
|
.userInfo .uleft{ width: 120rpx; height: 120rpx;} |
||||||
|
|
||||||
|
.userInfo .ucenter{ width: 430rpx; height: 120rpx; line-height: 120rpx;} |
||||||
|
.userInfo .ucenter .name{ width: 100%; height: 120rpx;} |
||||||
|
.userInfo .ucenter .name .username{font-size: 36rpx; color:#FFFFFF; margin-left:20rpx;} |
||||||
|
.userInfo .ucenter .name .level{width: auto; padding: 2rpx 10rpx; |
||||||
|
height: 44rpx; |
||||||
|
background: #095E59; text-align: center; font-size: 24rpx;color: #FFFFFF; |
||||||
|
border-radius: 42rpx 42rpx 42rpx 42rpx; |
||||||
|
border: 1rpx solid #00F0E2; margin-left: 20rpx;} |
||||||
|
.userInfo .uright{ width: 120rpx; height: 120rpx;} |
||||||
|
.userInfo .uright .change{width: 104rpx; |
||||||
|
height: 50rpx; |
||||||
|
background: #00F0E2; |
||||||
|
border-radius: 42rpx 42rpx 42rpx 42rpx; color: #1E2629; font-size: 28rpx; line-height: 50rpx; text-align: center;} |
||||||
|
::v-deep .change .u-button{display: block !important; padding:0rpx !important; background-color: inherit !important; height:auto !important; border: none !important; border-radius: 42rpx !important;} |
||||||
|
.userItem{ |
||||||
|
color: #FFFFFF; |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
.uItemBox{ width:50%; text-align: center;} |
||||||
|
.uItemBox .num{ |
||||||
|
font-size: 40rpx; |
||||||
|
font-family: DIN, DIN; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.uItemBox .text{ |
||||||
|
font-size: 24rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: 400; |
||||||
|
line-height: 28rpx; |
||||||
|
} |
||||||
|
|
||||||
|
/*订单部分*/ |
||||||
|
|
||||||
|
.orderBox{ |
||||||
|
width: 670rpx; |
||||||
|
height: auto; |
||||||
|
background: #082436; |
||||||
|
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||||
|
opacity: 1; |
||||||
|
margin: 0rpx auto; |
||||||
|
padding: 20rpx; |
||||||
|
} |
||||||
|
.orderBoxTitle{ |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: bold; |
||||||
|
color:#FFFFFF; |
||||||
|
line-height: 60rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.orderItem{ |
||||||
|
width: 100%; height: auto; |
||||||
|
display: flex; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.oItemBox{ |
||||||
|
width: 33.33%; |
||||||
|
|
||||||
|
} |
||||||
|
.oItemBox .image{ width: 100%; text-align: center; margin-top: 20rpx;} |
||||||
|
.oItemBox .image image{width: 64rpx; height: auto; margin: 0rpx auto; } |
||||||
|
.oItemBox .order_text{ |
||||||
|
text-align: center; |
||||||
|
font-size: 24rpx; |
||||||
|
font-weight: 400; |
||||||
|
line-height: 30rpx; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/*收入部分*/ |
||||||
|
|
||||||
|
.moneyBox{ |
||||||
|
width: 670rpx; |
||||||
|
height: auto; |
||||||
|
background: #082436; |
||||||
|
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||||
|
opacity: 1; |
||||||
|
margin: 20rpx auto; |
||||||
|
padding: 20rpx; |
||||||
|
} |
||||||
|
.moneyBoxTitle{ |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: bold; |
||||||
|
color:#FFFFFF; |
||||||
|
line-height: 40rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.moneyBoxItem{ |
||||||
|
margin-top: 20rpx; |
||||||
|
width: 100%; height: auto; |
||||||
|
display: flex; |
||||||
|
text-align: center; |
||||||
|
gap:20rpx; |
||||||
|
} |
||||||
|
.mItemBox{ |
||||||
|
width: 152rpx; |
||||||
|
height: 128rpx; |
||||||
|
background: linear-gradient(180deg, rgba(49,156,255,0) 0%, rgba(0,255,240,0.5) 100%); |
||||||
|
border-radius: 16rpx 16rpx 16rpx 16rpx; |
||||||
|
opacity: 1; |
||||||
|
border: 1rpx solid #00F0E2; |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
.mItemBox .money{ width: 100%; text-align: center; color: #FFFFFF; line-height: 80rpx;} |
||||||
|
.mItemBox .money .unit{ font-size: 24rpx; |
||||||
|
font-family: PingFang SC, PingFang SC; |
||||||
|
font-weight: bold;} |
||||||
|
.mItemBox .money .num{ font-size: 30rpx; |
||||||
|
font-family: DIN, DIN; |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
.mItemBox .order_text{ |
||||||
|
text-align: center; |
||||||
|
font-size: 24rpx; |
||||||
|
font-weight: 400; |
||||||
|
line-height: 30rpx; |
||||||
|
color: #FFECAA; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*服务*/ |
||||||
|
|
||||||
|
.serviceBox{ |
||||||
|
width: 670rpx; |
||||||
|
height: auto; |
||||||
|
background: #082436; |
||||||
|
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||||
|
opacity: 1; |
||||||
|
margin: 20rpx auto; |
||||||
|
padding: 20rpx; |
||||||
|
} |
||||||
|
.serviceBoxTitle{ |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: bold; |
||||||
|
color:#FFFFFF; |
||||||
|
line-height: 60rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.serviceItem{ |
||||||
|
width: 100%; height: auto; |
||||||
|
display: flex; |
||||||
|
text-align: center; |
||||||
|
flex-wrap:wrap; |
||||||
|
} |
||||||
|
.sItemBox{ |
||||||
|
width: 25%; |
||||||
|
|
||||||
|
} |
||||||
|
.sItemBox .image{ width: 100%; text-align: center; margin-top: 20rpx;} |
||||||
|
.sItemBox .image image{width: 48rpx; height: auto; margin: 0rpx auto; } |
||||||
|
.sItemBox .order_text{ |
||||||
|
text-align: center; |
||||||
|
font-size: 24rpx; |
||||||
|
font-weight: 400; |
||||||
|
line-height: 30rpx; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
.nowENV{ width: 200rpx; height: 60rpx; margin: 10rpx auto; text-align: center;} |
||||||
|
.empty{width: 100%; height: 20rpx;} |
||||||
|
|
||||||
|
|
||||||
|
.ad{ width: 100%; height: auto; text-align: center; margin:0rpx auto;} |
||||||
|
.ad image{ width:100%; margin-top:20rpx;border-radius: 30rpx;} |
||||||
|
.videoBox{ width: 750rpx; height: 900rpx;} |
||||||
|
.videoBox video{ width: 100%; height: 100%;} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,220 @@ |
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<template> |
||||||
|
<view class="u-page"> |
||||||
|
|
||||||
|
<view class="empty-select"> |
||||||
|
<u-cell |
||||||
|
:titleStyle="{fontWeight: 500}" |
||||||
|
@click="changeLang" |
||||||
|
:title="$t('pages.user.setting.index.setLang')" |
||||||
|
:value="nowLang" |
||||||
|
isLink |
||||||
|
> |
||||||
|
<image |
||||||
|
slot="icon" |
||||||
|
class="u-cell-icon" |
||||||
|
src="@/static/img/common/lang.png" |
||||||
|
mode="widthFix" |
||||||
|
></image> |
||||||
|
</u-cell> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="btn_box"> |
||||||
|
<u-button type="primary" :plain="true" :hairline="true" :text="$t('locale.logout')" size="normal" @click="logout"></u-button> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
<u-action-sheet |
||||||
|
:show="changeLangShow" |
||||||
|
@close="changeLangShow = false" |
||||||
|
:actions="langList" |
||||||
|
@select="confirmLang" |
||||||
|
cancelText="取消" |
||||||
|
> |
||||||
|
</u-action-sheet> |
||||||
|
|
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
|
||||||
|
return { |
||||||
|
systemLocale: '', |
||||||
|
applicationLocale: '', |
||||||
|
nowLang:'',//当前语言 |
||||||
|
// list: [{ |
||||||
|
// imgName: 'lang', |
||||||
|
// title: this.$t('pages.user.setting.index.setLang'), |
||||||
|
// iconUrl: '/static/img/common/lang.png', |
||||||
|
// }, |
||||||
|
// ], |
||||||
|
changeLangShow:false, |
||||||
|
langList: [ |
||||||
|
{ |
||||||
|
name: this.$t('locale.zh-hans'), |
||||||
|
val:'zh-Hans', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: this.$t('locale.zh-hant'), |
||||||
|
val:'zh-Hant', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: this.$t('locale.en'), |
||||||
|
val:'en' |
||||||
|
}], |
||||||
|
langListVal:['zh-Hans','zh-Hant','en'], |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad() { |
||||||
|
var _this =this; |
||||||
|
_this.loadData(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
loadData(){ |
||||||
|
var _this =this; |
||||||
|
let systemInfo = uni.getSystemInfoSync(); |
||||||
|
_this.systemLocale = systemInfo.language; |
||||||
|
var lang = uni.getLocale(); |
||||||
|
console.log('lang：'+lang); |
||||||
|
_this.applicationLocale =lang; |
||||||
|
_this.returnLang(lang); |
||||||
|
_this.isAndroid = systemInfo.platform.toLowerCase() === 'android'; |
||||||
|
uni.onLocaleChange((e) => { |
||||||
|
_this.applicationLocale = e.locale; |
||||||
|
_this.returnLang(e.locale); |
||||||
|
}) |
||||||
|
}, |
||||||
|
returnLang(code) |
||||||
|
{ |
||||||
|
var _this =this; |
||||||
|
var list = _this.langListVal; |
||||||
|
list.forEach((item, $index, arr) => { |
||||||
|
//console.log(`${item} => ${$index} => ${arr}`); |
||||||
|
if(item == code) |
||||||
|
{ |
||||||
|
console.log(_this.langList[$index].name); |
||||||
|
_this.nowLang = _this.langList[$index].name; |
||||||
|
return; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
//改变当前语言 |
||||||
|
changeLang() { |
||||||
|
//this[`show${index}`] = true |
||||||
|
this[`changeLangShow`] = true; |
||||||
|
}, |
||||||
|
confirmLang(e){ |
||||||
|
console.log(e); |
||||||
|
var _this =this; |
||||||
|
_this.onLocaleChange(e.val); |
||||||
|
}, |
||||||
|
|
||||||
|
onLocaleChange(code) { |
||||||
|
var _this =this; |
||||||
|
_this[`changeLangShow`] = false; |
||||||
|
uni.showModal({ |
||||||
|
content: _this.$t('locale.language-change-confirm'), |
||||||
|
success: (res) => { |
||||||
|
if (res.confirm) { |
||||||
|
uni.setLocale(code); |
||||||
|
_this.$i18n.locale = code; |
||||||
|
_this.returnLang(code); |
||||||
|
uni.switchTab({ |
||||||
|
url:'pages/index/index' |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
//退出登录 |
||||||
|
logout(){ |
||||||
|
var _this =this; |
||||||
|
var post = {}; |
||||||
|
_this.$api.post('user/logout',post,function(rs){ |
||||||
|
console.log(rs); |
||||||
|
uni.removeStorageSync('userInfo'); |
||||||
|
uni.removeStorageSync('token'); |
||||||
|
uni.$u.route({ |
||||||
|
type:'switchTab', |
||||||
|
url:'pages/index/index', |
||||||
|
params: {} |
||||||
|
}); |
||||||
|
},function(err){ |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
uni.$u.toast(_this.$t('locale.logout')); |
||||||
|
|
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.u-block{ |
||||||
|
padding: 14px; |
||||||
|
&__section{ |
||||||
|
margin-bottom:10px; |
||||||
|
} |
||||||
|
&__title { |
||||||
|
margin-top:10px; |
||||||
|
font-size: 15px; |
||||||
|
color: $u-content-color; |
||||||
|
margin-bottom:10px; |
||||||
|
} |
||||||
|
&__flex{ |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: flex; |
||||||
|
/* #endif */ |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 使用了cell组件的icon图片样式 |
||||||
|
.u-cell-icon { |
||||||
|
width: 36rpx; |
||||||
|
height: 36rpx; |
||||||
|
margin-right: 8rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.u-page { |
||||||
|
padding: 15px 15px 40px 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.u-demo-block { |
||||||
|
flex: 1; |
||||||
|
margin-bottom: 23px; |
||||||
|
|
||||||
|
&__content { |
||||||
|
@include flex(column); |
||||||
|
} |
||||||
|
|
||||||
|
&__title { |
||||||
|
font-size: 14px; |
||||||
|
color: rgb(143, 156, 162); |
||||||
|
margin-bottom: 8px; |
||||||
|
@include flex; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.u-page { |
||||||
|
padding: 40rpx 0px; |
||||||
|
|
||||||
|
&__top-box { |
||||||
|
padding-left: 40rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.empty-select { |
||||||
|
margin-top: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
.btn_box{ width: 80%; margin: 120rpx auto 20rpx auto;} |
||||||
|
</style> |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<web-view ref="webview" :src="xurl" :update-title="true" :webview-styles="webviewStyles" @message="getMessage"></web-view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
|
||||||
|
<script> |
||||||
|
var wv;//计划创建的webview |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
xurl: '', |
||||||
|
old_url:'', |
||||||
|
webviewStyles: { |
||||||
|
progress: { |
||||||
|
color: '#FF3333' |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
onReady() { |
||||||
|
|
||||||
|
}, |
||||||
|
onLoad(option) { |
||||||
|
//数据 |
||||||
|
var _this =this; |
||||||
|
var url = option.url; |
||||||
|
var title = option.title; |
||||||
|
if(_this.$com.isNull(url)) |
||||||
|
{ |
||||||
|
uni.navigateBack({ |
||||||
|
delta:1, |
||||||
|
}) |
||||||
|
} |
||||||
|
_this.old_url = url; |
||||||
|
_this.xurl = decodeURIComponent(url); |
||||||
|
if(!_this.$com.isNull(title)) |
||||||
|
{ |
||||||
|
var pageTitle = title; |
||||||
|
} |
||||||
|
else |
||||||
|
{ |
||||||
|
var pages = getCurrentPages(); |
||||||
|
var page = pages[pages.length - 1]; |
||||||
|
// #ifndef APP-PLUS |
||||||
|
var pageTitle = page.$page.meta.navigationBar.titleText; |
||||||
|
// #endif |
||||||
|
|
||||||
|
// #ifdef APP-PLUS |
||||||
|
var webView = currentPage.$getAppWebview(); |
||||||
|
var pageTitle = webView.getStyle().name; |
||||||
|
// #endif |
||||||
|
|
||||||
|
if(_this.$com.isNull(pageTitle)) |
||||||
|
{ |
||||||
|
pageTitle = 'webview'; |
||||||
|
} |
||||||
|
} |
||||||
|
uni.setNavigationBarTitle({ |
||||||
|
title:pageTitle, |
||||||
|
}) |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getMessage(event) { |
||||||
|
// #ifdef APP-PLUS |
||||||
|
console.log('event', event); |
||||||
|
// #endif |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
<template> |
||||||
|
<view class="container"> |
||||||
|
<view class="videoBox"> |
||||||
|
<video id="myVideo" :style="{width: '100%', height: '100%'}" |
||||||
|
:src="video_src" @error="videoErrorCallback" :autoplay="false" controls></video> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
old_url:'', |
||||||
|
video_src:'', |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(option) { |
||||||
|
//数据 |
||||||
|
var _this =this; |
||||||
|
var url = option.url; |
||||||
|
var title = option.title; |
||||||
|
if(_this.$com.isNull(url)) |
||||||
|
{ |
||||||
|
uni.navigateBack({ |
||||||
|
delta:1, |
||||||
|
}) |
||||||
|
} |
||||||
|
_this.old_url = url; |
||||||
|
_this.video_src = decodeURIComponent(url); |
||||||
|
if(!_this.$com.isNull(title)) |
||||||
|
{ |
||||||
|
var pageTitle = title; |
||||||
|
uni.setNavigationBarTitle({ |
||||||
|
title:pageTitle, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
videoErrorCallback(e) |
||||||
|
{ |
||||||
|
console.log(e); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
page{ height:100%; width: 100%;} |
||||||
|
.container{width: 100%; height: 100%;} |
||||||
|
.videoBox{ width: 100%; height: 100%;} |
||||||
|
</style> |
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 865 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 866 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 211 B |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 805 B |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 108 KiB |
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,78 @@ |
|||||||
|
/** |
||||||
|
* 这里是uni-app内置的常用样式变量 |
||||||
|
* |
||||||
|
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 |
||||||
|
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App |
||||||
|
* |
||||||
|
*/ |
||||||
|
@import '@/uni_modules/uview-ui/theme.scss'; |
||||||
|
/** |
||||||
|
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 |
||||||
|
* |
||||||
|
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 |
||||||
|
*/ |
||||||
|
|
||||||
|
/* 颜色变量 */ |
||||||
|
|
||||||
|
/* 行为相关颜色 */ |
||||||
|
$uni-color-primary: #007aff; |
||||||
|
$uni-color-success: #4cd964; |
||||||
|
$uni-color-warning: #f0ad4e; |
||||||
|
$uni-color-error: #dd524d; |
||||||
|
|
||||||
|
/* 文字基本颜色 */ |
||||||
|
$uni-text-color:#333;//基本色 |
||||||
|
$uni-text-color-inverse:#fff;//反色 |
||||||
|
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息 |
||||||
|
$uni-text-color-placeholder: #808080; |
||||||
|
$uni-text-color-disable:#c0c0c0; |
||||||
|
|
||||||
|
/* 背景颜色 */ |
||||||
|
$uni-bg-color:#ffffff; |
||||||
|
$uni-bg-color-grey:#f8f8f8; |
||||||
|
$uni-bg-color-hover:#f1f1f1;//点击状态颜色 |
||||||
|
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 |
||||||
|
|
||||||
|
/* 边框颜色 */ |
||||||
|
$uni-border-color:#c8c7cc; |
||||||
|
|
||||||
|
/* 尺寸变量 */ |
||||||
|
|
||||||
|
/* 文字尺寸 */ |
||||||
|
$uni-font-size-sm:12px; |
||||||
|
$uni-font-size-base:14px; |
||||||
|
$uni-font-size-lg:16; |
||||||
|
|
||||||
|
/* 图片尺寸 */ |
||||||
|
$uni-img-size-sm:20px; |
||||||
|
$uni-img-size-base:26px; |
||||||
|
$uni-img-size-lg:40px; |
||||||
|
|
||||||
|
/* Border Radius */ |
||||||
|
$uni-border-radius-sm: 2px; |
||||||
|
$uni-border-radius-base: 3px; |
||||||
|
$uni-border-radius-lg: 6px; |
||||||
|
$uni-border-radius-circle: 50%; |
||||||
|
|
||||||
|
/* 水平间距 */ |
||||||
|
$uni-spacing-row-sm: 5px; |
||||||
|
$uni-spacing-row-base: 10px; |
||||||
|
$uni-spacing-row-lg: 15px; |
||||||
|
|
||||||
|
/* 垂直间距 */ |
||||||
|
$uni-spacing-col-sm: 4px; |
||||||
|
$uni-spacing-col-base: 8px; |
||||||
|
$uni-spacing-col-lg: 12px; |
||||||
|
|
||||||
|
/* 透明度 */ |
||||||
|
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 |
||||||
|
|
||||||
|
/* 文章场景相关 */ |
||||||
|
$uni-color-title: #2C405A; // 文章标题颜色 |
||||||
|
$uni-font-size-title:20px; |
||||||
|
$uni-color-subtitle: #555555; // 二级标题颜色 |
||||||
|
$uni-font-size-subtitle:26px; |
||||||
|
$uni-color-paragraph: #3F536E; // 文章段落颜色 |
||||||
|
$uni-font-size-paragraph:15px; |
||||||
|
|
||||||
|
page{background-color: #F5F6FB;} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
MIT License |
||||||
|
|
||||||
|
Copyright (c) 2020 www.uviewui.com |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||||
|
SOFTWARE. |
||||||
@ -0,0 +1,66 @@ |
|||||||
|
<p align="center"> |
||||||
|
<img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;"> |
||||||
|
</p> |
||||||
|
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView 2.0</h3> |
||||||
|
<h3 align="center">多平台快速开发的UI框架</h3> |
||||||
|
|
||||||
|
[](https://github.com/umicro/uView2.0) |
||||||
|
[](https://github.com/umicro/uView2.0) |
||||||
|
[](https://github.com/umicro/uView2.0/issues) |
||||||
|
[](https://uviewui.com) |
||||||
|
[](https://gitee.com/umicro/uView2.0/releases) |
||||||
|
[](https://en.wikipedia.org/wiki/MIT_License) |
||||||
|
|
||||||
|
## 说明 |
||||||
|
|
||||||
|
uView UI，是[uni-app](https://uniapp.dcloud.io/)全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水 |
||||||
|
|
||||||
|
## [官方文档：https://uviewui.com](https://uviewui.com) |
||||||
|
|
||||||
|
|
||||||
|
## 预览 |
||||||
|
|
||||||
|
您可以通过**微信**扫码，查看最佳的演示效果。 |
||||||
|
<br> |
||||||
|
<br> |
||||||
|
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" > |
||||||
|
|
||||||
|
|
||||||
|
## 链接 |
||||||
|
|
||||||
|
- [官方文档](https://www.uviewui.com/) |
||||||
|
- [更新日志](https://www.uviewui.com/components/changelog.html) |
||||||
|
- [升级指南](https://www.uviewui.com/components/changeGuide.html) |
||||||
|
- [关于我们](https://www.uviewui.com/cooperation/about.html) |
||||||
|
|
||||||
|
## 交流反馈 |
||||||
|
|
||||||
|
欢迎加入我们的QQ群交流反馈：[点此跳转](https://www.uviewui.com/components/addQQGroup.html) |
||||||
|
|
||||||
|
## 关于PR |
||||||
|
|
||||||
|
> 我们非常乐意接受各位的优质PR，但在此之前我希望您了解uView2.0是一个需要兼容多个平台的（小程序、h5、ios app、android app）包括nvue页面、vue页面。 |
||||||
|
> 所以希望在您修复bug并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！ |
||||||
|
|
||||||
|
## 安装 |
||||||
|
|
||||||
|
#### **uni-app插件市场链接** —— [https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593) |
||||||
|
|
||||||
|
请通过[官网安装文档](https://www.uviewui.com/components/install.html)了解更详细的内容 |
||||||
|
|
||||||
|
## 快速上手 |
||||||
|
|
||||||
|
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容 |
||||||
|
|
||||||
|
## 使用方法 |
||||||
|
配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。 |
||||||
|
|
||||||
|
```html |
||||||
|
<template> |
||||||
|
<u-button text="按钮"></u-button> |
||||||
|
</template> |
||||||
|
``` |
||||||
|
|
||||||
|
## 版权信息 |
||||||
|
uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。 |
||||||
|
|
||||||
@ -0,0 +1,344 @@ |
|||||||
|
## 2.0.33（2022-06-17） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复`loadmore`组件`lineColor`类型错误问题 |
||||||
|
2. 修复`u-parse`组件`imgtap`、`linktap`不生效问题 |
||||||
|
## 2.0.32（2022-06-16） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
1. `u-loadmore`新增自定义颜色、虚/实线 |
||||||
|
2. 修复`u-swiper-action`组件部分平台不能上下滑动的问题 |
||||||
|
3. 修复`u-list`回弹问题 |
||||||
|
4. 修复`notice-bar`组件动画在低端安卓机可能会抖动的问题 |
||||||
|
5. `u-loading-page`添加控制图标大小的属性`iconSize` |
||||||
|
6. 修复`u-tooltip`组件`color`参数不生效的问题 |
||||||
|
7. 修复`u--input`组件使用`blur`事件输出为`undefined`的bug |
||||||
|
8. `u-code-input`组件新增键盘弹起时，是否自动上推页面参数`adjustPosition` |
||||||
|
9. 修复`image`组件`load`事件无回调对象问题 |
||||||
|
10. 修复`button`组件`loadingSize`设置无效问题 |
||||||
|
10. 其他修复 |
||||||
|
## 2.0.31（2022-04-19） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复`upload`在`vue`页面上传成功后没有成功标志的问题 |
||||||
|
2. 解决演示项目中微信小程序模拟上传图片一直出于上传中问题 |
||||||
|
3. 修复`u-code-input`组件在`nvue`页面编译到`app`平台上光标异常问题（`app`去除此功能） |
||||||
|
4. 修复`actionSheet`组件标题关闭按钮点击事件名称错误的问题 |
||||||
|
5. 其他修复 |
||||||
|
## 2.0.30（2022-04-04） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. `u-rate`增加`readonly`属性 |
||||||
|
2. `tabs`滑块支持设置背景图片 |
||||||
|
3. 修复`u-subsection` `mode`为`subsection`时，滑块样式不正确的问题 |
||||||
|
4. `u-code-input`添加光标效果动画 |
||||||
|
5. 修复`popup`的`open`事件不触发 |
||||||
|
6. 修复`u-flex-column`无效的问题 |
||||||
|
7. 修复`u-datetime-picker`索引在特定场合异常问题 |
||||||
|
8. 修复`u-datetime-picker`最小时间字符串模板错误问题 |
||||||
|
9. `u-swiper`添加`m3u8`验证 |
||||||
|
10. `u-swiper`修改判断image和video逻辑 |
||||||
|
11. 修复`swiper`无法使用本地图片问题，增加`type`参数 |
||||||
|
12. 修复`u-row-notice`格式错误问题 |
||||||
|
13. 修复`u-switch`组件当`unit`为`rpx`时,`nodeStyle`消失的问题 |
||||||
|
14. 修复`datetime-picker`组件`showToolbar`与`visibleItemCount`属性无效的问题 |
||||||
|
15. 修复`upload`组件条件编译位置判断错误，导致`previewImage`属性设置为`false`时，整个组件都会被隐藏的问题 |
||||||
|
16. 修复`u-checkbox-group`设置`shape`属性无效的问题 |
||||||
|
17. 修复`u-upload`的`capture`传入字符串的时候不生效的问题 |
||||||
|
18. 修复`u-action-sheet`组件，关闭事件逻辑错误的问题 |
||||||
|
19. 修复`u-list`触顶事件的触发错误的问题 |
||||||
|
20. 修复`u-text`只有手机号可拨打的问题 |
||||||
|
21. 修复`u-textarea`不能换行的问题 |
||||||
|
22. 其他修复 |
||||||
|
## 2.0.29（2022-03-13） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复`u--text`组件设置`decoration`属性未生效的问题 |
||||||
|
2. 修复`u-datetime-picker`使用`formatter`后返回值不正确 |
||||||
|
3. 修复`u-datetime-picker` `intercept` 可能为undefined |
||||||
|
4. 修复已设置单位 uni..config.unit = 'rpx'时，线型指示器 `transform` 的位置翻倍，导致指示器超出宽度 |
||||||
|
5. 修复mixin中bem方法生成的类名在支付宝和字节小程序中失效 |
||||||
|
6. 修复默认值传值为空的时候，打开`u-datetime-picker`报错，不能选中第一列时间的bug |
||||||
|
7. 修复`u-datetime-picker`使用`formatter`后返回值不正确 |
||||||
|
8. 修复`u-image`组件`loading`无效果的问题 |
||||||
|
9. 修复`config.unit`属性设为`rpx`时，导航栏占用高度不足导致塌陷的问题 |
||||||
|
10. 修复`u-datetime-picker`组件`itemHeight`无效问题 |
||||||
|
11. 其他修复 |
||||||
|
## 2.0.28（2022-02-22） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. search组件新增searchIconSize属性 |
||||||
|
2. 兼容Safari/Webkit中传入时间格式如2022-02-17 12:00:56 |
||||||
|
3. 修复text value.js 判断日期出format错误问题 |
||||||
|
4. priceFormat格式化金额出现精度错误 |
||||||
|
5. priceFormat在部分情况下出现精度损失问题 |
||||||
|
6. 优化表单rules提示 |
||||||
|
7. 修复avatar组件src为空时，展示状态不对 |
||||||
|
8. 其他修复 |
||||||
|
## 2.0.27（2022-01-28） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1.样式修复 |
||||||
|
## 2.0.26（2022-01-28） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1.样式修复 |
||||||
|
## 2.0.25（2022-01-27） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复text组件mode=price时，可能会导致精度错误的问题 |
||||||
|
2. 添加$u.setConfig()方法，可设置uView内置的config, props, zIndex, color属性，详见：[修改uView内置配置方案](https://uviewui.com/components/setting.html#%E9%BB%98%E8%AE%A4%E5%8D%95%E4%BD%8D%E9%85%8D%E7%BD%AE) |
||||||
|
3. 优化form组件在errorType=toast时，如果输入错误页面会有抖动的问题 |
||||||
|
4. 修复$u.addUnit()对配置默认单位可能无效的问题 |
||||||
|
## 2.0.24（2022-01-25） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复swiper在current指定非0时缩放有误 |
||||||
|
2. 修复u-icon添加stop属性的时候报错 |
||||||
|
3. 优化遗留的通过正则判断rpx单位的问题 |
||||||
|
4. 优化Layout布局 vue使用gutter时，会超出固定区域 |
||||||
|
5. 优化search组件高度单位问题（rpx -> px） |
||||||
|
6. 修复u-image slot 加载和错误的图片失去了高度 |
||||||
|
7. 修复u-index-list中footer插槽与header插槽存在性判断错误 |
||||||
|
8. 修复部分机型下u-popup关闭时会闪烁 |
||||||
|
9. 修复u-image在nvue-app下失去宽高 |
||||||
|
10. 修复u-popup运行报错 |
||||||
|
11. 修复u-tooltip报错 |
||||||
|
12. 修复box-sizing在app下的警告 |
||||||
|
13. 修复u-navbar在小程序中报运行时错误 |
||||||
|
14. 其他修复 |
||||||
|
## 2.0.23（2022-01-24） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复image组件在hx3.3.9的nvue下可能会显示异常的问题 |
||||||
|
2. 修复col组件gutter参数带rpx单位处理不正确的问题 |
||||||
|
3. 修复text组件单行时无法显示省略号的问题 |
||||||
|
4. navbar添加titleStyle参数 |
||||||
|
5. 升级到hx3.3.9可消除nvue下控制台样式警告的问题 |
||||||
|
## 2.0.22（2022-01-19） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. $u.page()方法优化，避免在特殊场景可能报错的问题 |
||||||
|
2. picker组件添加immediateChange参数 |
||||||
|
3. 新增$u.pages()方法 |
||||||
|
## 2.0.21（2022-01-19） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 优化：form组件在用户设置rules的时候提示用户model必传 |
||||||
|
2. 优化遗留的通过正则判断rpx单位的问题 |
||||||
|
3. 修复微信小程序环境中tabbar组件开启safeAreaInsetBottom属性后，placeholder高度填充不正确 |
||||||
|
4. 修复swiper在current指定非0时缩放有误 |
||||||
|
5. 修复u-icon添加stop属性的时候报错 |
||||||
|
6. 修复upload组件在accept=all的时候没有作用 |
||||||
|
7. 修复在text组件mode为phone时call属性无效的问题 |
||||||
|
8. 处理u-form clearValidate方法 |
||||||
|
9. 其他修复 |
||||||
|
## 2.0.20（2022-01-14） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复calendar默认会选择一个日期，如果直接点确定的话，无法取到值的问题 |
||||||
|
2. 修复Slider缺少disabled props 还有注释 |
||||||
|
3. 修复u-notice-bar点击事件无法拿到index索引值的问题 |
||||||
|
4. 修复u-collapse-item在vue文件下，app端自定义插槽不生效的问题 |
||||||
|
5. 优化头像为空时显示默认头像 |
||||||
|
6. 修复图片地址赋值后判断加载状态为完成问题 |
||||||
|
7. 修复日历滚动到默认日期月份区域 |
||||||
|
8. search组件暴露点击左边icon事件 |
||||||
|
9. 修复u-form clearValidate方法不生效 |
||||||
|
10. upload h5端增加返回文件参数（文件的name参数） |
||||||
|
11. 处理upload选择文件后url为blob类型无法预览的问题 |
||||||
|
12. u-code-input 修复输入框没有往左移出一半屏幕 |
||||||
|
13. 修复Upload上传 disabled为true时，控制台报hoverClass类型错误 |
||||||
|
14. 临时处理ios app下grid点击坍塌问题 |
||||||
|
15. 其他修复 |
||||||
|
## 2.0.19（2021-12-29） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 优化微信小程序包体积可在微信中预览，请升级HbuilderX3.3.4，同时在“运行->运行到小程序模拟器”中勾选“运行时是否压缩代码” |
||||||
|
2. 优化微信小程序setData性能，处理某些方法如$u.route()无法在模板中使用的问题 |
||||||
|
3. navbar添加autoBack参数 |
||||||
|
4. 允许avatar组件的事件冒泡 |
||||||
|
5. 修复cell组件报错问题 |
||||||
|
6. 其他修复 |
||||||
|
## 2.0.18（2021-12-28） |
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复app端编译报错问题 |
||||||
|
2. 重新处理微信小程序端setData过大的性能问题 |
||||||
|
3. 修复边框问题 |
||||||
|
4. 修复最大最小月份不大于0则没有数据出现的问题 |
||||||
|
5. 修复SwipeAction微信小程序端无法上下滑动问题 |
||||||
|
6. 修复input的placeholder在小程序端默认显示为true问题 |
||||||
|
7. 修复divider组件click事件无效问题 |
||||||
|
8. 修复u-code-input maxlength 属性值为 String 类型时显示异常 |
||||||
|
9. 修复当 grid只有 1到2时 在小程序端algin设置无效的问题 |
||||||
|
10. 处理form-item的label为top时，取消错误提示的左边距 |
||||||
|
11. 其他修复 |
||||||
|
## 2.0.17（2021-12-26） |
||||||
|
## uView正在参与开源中国的“年度最佳项目”评选，之前投过票的现在也可以投票，恳请同学们投一票，[点此帮助uView](https://www.oschina.net/project/top_cn_2021/?id=583) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 解决HBuilderX3.3.3.20211225版本导致的样式问题 |
||||||
|
2. calendar日历添加monthNum参数 |
||||||
|
3. navbar添加center slot |
||||||
|
## 2.0.16（2021-12-25） |
||||||
|
## uView正在参与开源中国的“年度最佳项目”评选，之前投过票的现在也可以投票，恳请同学们投一票，[点此帮助uView](https://www.oschina.net/project/top_cn_2021/?id=583) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 解决微信小程序setData性能问题 |
||||||
|
2. 修复count-down组件change事件不触发问题 |
||||||
|
## 2.0.15（2021-12-21） |
||||||
|
## uView正在参与开源中国的“年度最佳项目”评选，之前投过票的现在也可以投票，恳请同学们投一票，[点此帮助uView](https://www.oschina.net/project/top_cn_2021/?id=583) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复Cell单元格titleWidth无效 |
||||||
|
2. 修复cheakbox组件ischecked不更新 |
||||||
|
3. 修复keyboard是否显示"."按键默认值问题 |
||||||
|
4. 修复number-keyboard是否显示键盘的"."符号问题 |
||||||
|
5. 修复Input输入框 readonly无效 |
||||||
|
6. 修复u-avatar 导致打包app、H5时候报错问题 |
||||||
|
7. 修复Upload上传deletable无效 |
||||||
|
8. 修复upload当设置maxSize时无效的问题 |
||||||
|
9. 修复tabs lineWidth传入带单位的字符串的时候偏移量计算错误问题 |
||||||
|
10. 修复rate组件在有padding的view内，显示的星星位置和可触摸区域不匹配，无法正常选中星星 |
||||||
|
## 2.0.13（2021-12-14） |
||||||
|
## [点击加群交流反馈：364463526](https://jq.qq.com/?_chanwv=1027&k=mCxS3TGY) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复配置默认单位为rpx可能会导致自定义导航栏高度异常的问题 |
||||||
|
## 2.0.12（2021-12-14） |
||||||
|
## [点击加群交流反馈：364463526](https://jq.qq.com/?_chanwv=1027&k=mCxS3TGY) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复tabs组件在vue环境下划线消失的问题 |
||||||
|
2. 修复upload组件在安卓小程序无法选择视频的问题 |
||||||
|
3. 添加uni.$u.config.unit配置，用于配置参数默认单位，详见：[默认单位配置](https://www.uviewui.com/components/setting.html#%E9%BB%98%E8%AE%A4%E5%8D%95%E4%BD%8D%E9%85%8D%E7%BD%AE) |
||||||
|
4. 修复textarea组件在没绑定v-model时，字符统计不生效问题 |
||||||
|
5. 修复nvue下控制是否出现滚动条失效问题 |
||||||
|
## 2.0.11（2021-12-13） |
||||||
|
## [点击加群交流反馈：364463526](https://jq.qq.com/?_chanwv=1027&k=mCxS3TGY) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. text组件align参数无效的问题 |
||||||
|
2. subsection组件添加keyName参数 |
||||||
|
3. upload组件无法判断[Object file]类型的问题 |
||||||
|
4. 处理notify层级过低问题 |
||||||
|
5. codeInput组件添加disabledDot参数 |
||||||
|
6. 处理actionSheet组件round参数无效的问题 |
||||||
|
7. calendar组件添加round参数用于控制圆角值 |
||||||
|
8. 处理swipeAction组件在vue环境下默认被打开的问题 |
||||||
|
9. button组件的throttleTime节流参数无效的问题 |
||||||
|
10. 解决u-notify手动关闭方法close()无效的问题 |
||||||
|
11. input组件readonly不生效问题 |
||||||
|
12. tag组件type参数为info不生效问题 |
||||||
|
## 2.0.10（2021-12-08） |
||||||
|
## [点击加群交流反馈：364463526](https://jq.qq.com/?_chanwv=1027&k=mCxS3TGY) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复button sendMessagePath属性不生效 |
||||||
|
2. 修复DatetimePicker选择器title无效 |
||||||
|
3. 修复u-toast设置loading=true不生效 |
||||||
|
4. 修复u-text金额模式传0报错 |
||||||
|
5. 修复u-toast组件的icon属性配置不生效 |
||||||
|
6. button的icon在特殊场景下的颜色优化 |
||||||
|
7. IndexList优化，增加# |
||||||
|
## 2.0.9（2021-12-01） |
||||||
|
## [点击加群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 优化swiper的height支持100%值(仅vue有效)，修复嵌入视频时click事件无法触发的问题 |
||||||
|
2. 优化tabs组件对list值为空的判断，或者动态变化list时重新计算相关尺寸的问题 |
||||||
|
3. 优化datetime-picker组件逻辑，让其后续打开的默认值为上一次的选中值，需要通过v-model绑定值才有效 |
||||||
|
4. 修复upload内嵌在其他组件中，选择图片可能不会换行的问题 |
||||||
|
## 2.0.8（2021-12-01） |
||||||
|
## [点击加群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复toast的position参数无效问题 |
||||||
|
2. 处理input在ios nvue上无法获得焦点的问题 |
||||||
|
3. avatar-group组件添加extraValue参数，让剩余展示数量可手动控制 |
||||||
|
4. tabs组件添加keyName参数用于配置从对象中读取的键名 |
||||||
|
5. 处理text组件名字脱敏默认配置无效的问题 |
||||||
|
6. 处理picker组件item文本太长换行问题 |
||||||
|
## 2.0.7（2021-11-30） |
||||||
|
## [点击加群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 修复radio和checkbox动态改变v-model无效的问题。 |
||||||
|
2. 优化form规则validator在微信小程序用法 |
||||||
|
3. 修复backtop组件mode参数在微信小程序无效的问题 |
||||||
|
4. 处理Album的previewFullImage属性无效的问题 |
||||||
|
5. 处理u-datetime-picker组件mode='time'在选择改变时间时，控制台报错的问题 |
||||||
|
## 2.0.6（2021-11-27） |
||||||
|
## [点击加群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. 处理tag组件在vue下边框无效的问题。 |
||||||
|
2. 处理popup组件圆角参数可能无效的问题。 |
||||||
|
3. 处理tabs组件lineColor参数可能无效的问题。 |
||||||
|
4. propgress组件在值很小时，显示异常的问题。 |
||||||
|
## 2.0.5（2021-11-25） |
||||||
|
## [点击加群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. calendar在vue下显示异常问题。 |
||||||
|
2. form组件labelPosition和errorType参数无效的问题 |
||||||
|
3. input组件inputAlign无效的问题 |
||||||
|
4. 其他一些修复 |
||||||
|
## 2.0.4（2021-11-23） |
||||||
|
## [点击加群交流反馈：232041042](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
0. input组件缺失@confirm事件，以及subfix和prefix无效问题 |
||||||
|
1. component.scss文件样式在vue下干扰全局布局问题 |
||||||
|
2. 修复subsection在vue环境下表现异常的问题 |
||||||
|
3. tag组件的bgColor等参数无效的问题 |
||||||
|
4. upload组件不换行的问题 |
||||||
|
5. 其他的一些修复处理 |
||||||
|
## 2.0.3（2021-11-16） |
||||||
|
## [点击加群交流反馈：1129077272](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. uView2.0已实现全面兼容nvue |
||||||
|
2. uView2.0对1.x进行了架构重构，细节和性能都有极大提升 |
||||||
|
3. 目前uView2.0为公测阶段，相关细节可能会有变动 |
||||||
|
4. 我们写了一份与1.x的对比指南，详见[对比1.x](https://www.uviewui.com/components/diff1.x.html) |
||||||
|
5. 处理modal的confirm回调事件拼写错误问题 |
||||||
|
6. 处理input组件@input事件参数错误问题 |
||||||
|
7. 其他一些修复 |
||||||
|
## 2.0.2（2021-11-16） |
||||||
|
## [点击加群交流反馈：1129077272](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. uView2.0已实现全面兼容nvue |
||||||
|
2. uView2.0对1.x进行了架构重构，细节和性能都有极大提升 |
||||||
|
3. 目前uView2.0为公测阶段，相关细节可能会有变动 |
||||||
|
4. 我们写了一份与1.x的对比指南，详见[对比1.x](https://www.uviewui.com/components/diff1.x.html) |
||||||
|
5. 修复input组件formatter参数缺失问题 |
||||||
|
6. 优化loading-icon组件的scss写法问题，防止不兼容新版本scss |
||||||
|
## 2.0.0(2020-11-15) |
||||||
|
## [点击加群交流反馈：1129077272](https://jq.qq.com/?_wv=1027&k=KnbeceDU) |
||||||
|
|
||||||
|
# uView2.0重磅发布，利剑出鞘，一统江湖 |
||||||
|
|
||||||
|
1. uView2.0已实现全面兼容nvue |
||||||
|
2. uView2.0对1.x进行了架构重构，细节和性能都有极大提升 |
||||||
|
3. 目前uView2.0为公测阶段，相关细节可能会有变动 |
||||||
|
4. 我们写了一份与1.x的对比指南，详见[对比1.x](https://www.uviewui.com/components/diff1.x.html) |
||||||
|
5. 修复input组件formatter参数缺失问题 |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,78 @@ |
|||||||
|
<template> |
||||||
|
<uvForm |
||||||
|
ref="uForm" |
||||||
|
:model="model" |
||||||
|
:rules="rules" |
||||||
|
:errorType="errorType" |
||||||
|
:borderBottom="borderBottom" |
||||||
|
:labelPosition="labelPosition" |
||||||
|
:labelWidth="labelWidth" |
||||||
|
:labelAlign="labelAlign" |
||||||
|
:labelStyle="labelStyle" |
||||||
|
:customStyle="customStyle" |
||||||
|
> |
||||||
|
<slot /> |
||||||
|
</uvForm> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
/** |
||||||
|
* 此组件存在的理由是，在nvue下，u-form被uni-app官方占用了，u-form在nvue中相当于form组件 |
||||||
|
* 所以在nvue下，取名为u--form，内部其实还是u-form.vue，只不过做一层中转 |
||||||
|
*/ |
||||||
|
import uvForm from '../u-form/u-form.vue'; |
||||||
|
import props from '../u-form/props.js' |
||||||
|
export default { |
||||||
|
// #ifdef MP-WEIXIN |
||||||
|
name: 'u-form', |
||||||
|
// #endif |
||||||
|
// #ifndef MP-WEIXIN |
||||||
|
name: 'u--form', |
||||||
|
// #endif |
||||||
|
mixins: [uni.$u.mpMixin, props, uni.$u.mixin], |
||||||
|
components: { |
||||||
|
uvForm |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.children = [] |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 手动设置校验的规则，如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则 |
||||||
|
setRules(rules) { |
||||||
|
this.$refs.uForm.setRules(rules) |
||||||
|
}, |
||||||
|
validate() { |
||||||
|
/** |
||||||
|
* 在微信小程序中，通过this.$parent拿到的父组件是u--form，而不是其内嵌的u-form |
||||||
|
* 导致在u-form组件中，拿不到对应的children数组，从而校验无效，所以这里每次调用u-form组件中的 |
||||||
|
* 对应方法的时候，在小程序中都先将u--form的children赋值给u-form中的children |
||||||
|
*/ |
||||||
|
// #ifdef MP-WEIXIN |
||||||
|
this.setMpData() |
||||||
|
// #endif |
||||||
|
return this.$refs.uForm.validate() |
||||||
|
}, |
||||||
|
validateField(value, callback) { |
||||||
|
// #ifdef MP-WEIXIN |
||||||
|
this.setMpData() |
||||||
|
// #endif |
||||||
|
return this.$refs.uForm.validateField(value, callback) |
||||||
|
}, |
||||||
|
resetFields() { |
||||||
|
// #ifdef MP-WEIXIN |
||||||
|
this.setMpData() |
||||||
|
// #endif |
||||||
|
return this.$refs.uForm.resetFields() |
||||||
|
}, |
||||||
|
clearValidate(props) { |
||||||
|
// #ifdef MP-WEIXIN |
||||||
|
this.setMpData() |
||||||
|
// #endif |
||||||
|
return this.$refs.uForm.clearValidate(props) |
||||||
|
}, |
||||||
|
setMpData() { |
||||||
|
this.$refs.uForm.children = this.children |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
<template> |
||||||
|
<uvImage |
||||||
|
:src="src" |
||||||
|
:mode="mode" |
||||||
|
:width="width" |
||||||
|
:height="height" |
||||||
|
:shape="shape" |
||||||
|
:radius="radius" |
||||||
|
:lazyLoad="lazyLoad" |
||||||
|
:showMenuByLongpress="showMenuByLongpress" |
||||||
|
:loadingIcon="loadingIcon" |
||||||
|
:errorIcon="errorIcon" |
||||||
|
:showLoading="showLoading" |
||||||
|
:showError="showError" |
||||||
|
:fade="fade" |
||||||
|
:webp="webp" |
||||||
|
:duration="duration" |
||||||
|
:bgColor="bgColor" |
||||||
|
:customStyle="customStyle" |
||||||
|
@click="$emit('click')" |
||||||
|
@error="$emit('error')" |
||||||
|
@load="$emit('load')" |
||||||
|
> |
||||||
|
<template v-slot:loading> |
||||||
|
<slot name="loading"></slot> |
||||||
|
</template> |
||||||
|
<template v-slot:error> |
||||||
|
<slot name="error"></slot> |
||||||
|
</template> |
||||||
|
</uvImage> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
/** |
||||||
|
* 此组件存在的理由是，在nvue下，u-image被uni-app官方占用了，u-image在nvue中相当于image组件 |
||||||
|
* 所以在nvue下，取名为u--image，内部其实还是u-iamge.vue，只不过做一层中转 |
||||||
|
*/ |
||||||
|
import uvImage from '../u-image/u-image.vue'; |
||||||
|
import props from '../u-image/props.js'; |
||||||
|
export default { |
||||||
|
name: 'u--image', |
||||||
|
mixins: [uni.$u.mpMixin, props, uni.$u.mixin], |
||||||
|
components: { |
||||||
|
uvImage |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
<template> |
||||||
|
<uvInput |
||||||
|
:value="value" |
||||||
|
:type="type" |
||||||
|
:fixed="fixed" |
||||||
|
:disabled="disabled" |
||||||
|
:disabledColor="disabledColor" |
||||||
|
:clearable="clearable" |
||||||
|
:password="password" |
||||||
|
:maxlength="maxlength" |
||||||
|
:placeholder="placeholder" |
||||||
|
:placeholderClass="placeholderClass" |
||||||
|
:placeholderStyle="placeholderStyle" |
||||||
|
:showWordLimit="showWordLimit" |
||||||
|
:confirmType="confirmType" |
||||||
|
:confirmHold="confirmHold" |
||||||
|
:holdKeyboard="holdKeyboard" |
||||||
|
:focus="focus" |
||||||
|
:autoBlur="autoBlur" |
||||||
|
:disableDefaultPadding="disableDefaultPadding" |
||||||
|
:cursor="cursor" |
||||||
|
:cursorSpacing="cursorSpacing" |
||||||
|
:selectionStart="selectionStart" |
||||||
|
:selectionEnd="selectionEnd" |
||||||
|
:adjustPosition="adjustPosition" |
||||||
|
:inputAlign="inputAlign" |
||||||
|
:fontSize="fontSize" |
||||||
|
:color="color" |
||||||
|
:prefixIcon="prefixIcon" |
||||||
|
:suffixIcon="suffixIcon" |
||||||
|
:suffixIconStyle="suffixIconStyle" |
||||||
|
:prefixIconStyle="prefixIconStyle" |
||||||
|
:border="border" |
||||||
|
:readonly="readonly" |
||||||
|
:shape="shape" |
||||||
|
:customStyle="customStyle" |
||||||
|
:formatter="formatter" |
||||||
|
@focus="$emit('focus')" |
||||||
|
@blur="e => $emit('blur', e)" |
||||||
|
@keyboardheightchange="$emit('keyboardheightchange')" |
||||||
|
@change="e => $emit('change', e)" |
||||||
|
@input="e => $emit('input', e)" |
||||||
|
@confirm="e => $emit('confirm', e)" |
||||||
|
@clear="$emit('clear')" |
||||||
|
@click="$emit('click')" |
||||||
|
> |
||||||
|
<!-- #ifdef MP --> |
||||||
|
<slot name="prefix"></slot> |
||||||
|
<slot name="suffix"></slot> |
||||||
|
<!-- #endif --> |
||||||
|
<!-- #ifndef MP --> |
||||||
|
<slot name="prefix" slot="prefix"></slot> |
||||||
|
<slot name="suffix" slot="suffix"></slot> |
||||||
|
<!-- #endif --> |
||||||
|
</uvInput> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
/** |
||||||
|
* 此组件存在的理由是，在nvue下，u-input被uni-app官方占用了，u-input在nvue中相当于input组件 |
||||||
|
* 所以在nvue下，取名为u--input，内部其实还是u-input.vue，只不过做一层中转 |
||||||
|
*/ |
||||||
|
import uvInput from '../u-input/u-input.vue'; |
||||||
|
import props from '../u-input/props.js' |
||||||
|
export default { |
||||||
|
name: 'u--input', |
||||||
|
mixins: [uni.$u.mpMixin, props, uni.$u.mixin], |
||||||
|
components: { |
||||||
|
uvInput |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
<template> |
||||||
|
<uvText |
||||||
|
:type="type" |
||||||
|
:show="show" |
||||||
|
:text="text" |
||||||
|
:prefixIcon="prefixIcon" |
||||||
|
:suffixIcon="suffixIcon" |
||||||
|
:mode="mode" |
||||||
|
:href="href" |
||||||
|
:format="format" |
||||||
|
:call="call" |
||||||
|
:openType="openType" |
||||||
|
:bold="bold" |
||||||
|
:block="block" |
||||||
|
:lines="lines" |
||||||
|
:color="color" |
||||||
|
:decoration="decoration" |
||||||
|
:size="size" |
||||||
|
:iconStyle="iconStyle" |
||||||
|
:margin="margin" |
||||||
|
:lineHeight="lineHeight" |
||||||
|
:align="align" |
||||||
|
:wordWrap="wordWrap" |
||||||
|
:customStyle="customStyle" |
||||||
|
@click="$emit('click')" |
||||||
|
></uvText> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
/** |
||||||
|
* 此组件存在的理由是，在nvue下，u-text被uni-app官方占用了，u-text在nvue中相当于input组件 |
||||||
|
* 所以在nvue下，取名为u--input，内部其实还是u-text.vue，只不过做一层中转 |
||||||
|
* 不使用v-bind="$attrs"，而是分开独立写传参，是因为微信小程序不支持此写法 |
||||||
|
*/ |
||||||
|
import uvText from "../u-text/u-text.vue"; |
||||||
|
import props from "../u-text/props.js"; |
||||||
|
export default { |
||||||
|
name: "u--text", |
||||||
|
mixins: [uni.$u.mpMixin, props, uni.$u.mixin], |
||||||
|
components: { |
||||||
|
uvText, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
<template> |
||||||
|
<uvTextarea |
||||||
|
:value="value" |
||||||
|
:placeholder="placeholder" |
||||||
|
:height="height" |
||||||
|
:confirmType="confirmType" |
||||||
|
:disabled="disabled" |
||||||
|
:count="count" |
||||||
|
:focus="focus" |
||||||
|
:autoHeight="autoHeight" |
||||||
|
:fixed="fixed" |
||||||
|
:cursorSpacing="cursorSpacing" |
||||||
|
:cursor="cursor" |
||||||
|
:showConfirmBar="showConfirmBar" |
||||||
|
:selectionStart="selectionStart" |
||||||
|
:selectionEnd="selectionEnd" |
||||||
|
:adjustPosition="adjustPosition" |
||||||
|
:disableDefaultPadding="disableDefaultPadding" |
||||||
|
:holdKeyboard="holdKeyboard" |
||||||
|
:maxlength="maxlength" |
||||||
|
:border="border" |
||||||
|
:customStyle="customStyle" |
||||||
|
:formatter="formatter" |
||||||
|
@focus="e => $emit('focus')" |
||||||
|
@blur="e => $emit('blur')" |
||||||
|
@linechange="e => $emit('linechange', e)" |
||||||
|
@confirm="e => $emit('confirm')" |
||||||
|
@input="e => $emit('input', e)" |
||||||
|
@keyboardheightchange="e => $emit('keyboardheightchange')" |
||||||
|
></uvTextarea> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
/** |
||||||
|
* 此组件存在的理由是，在nvue下，u--textarea被uni-app官方占用了，u-textarea在nvue中相当于textarea组件 |
||||||
|
* 所以在nvue下，取名为u--textarea，内部其实还是u-textarea.vue，只不过做一层中转 |
||||||
|
*/ |
||||||
|
import uvTextarea from '../u-textarea/u-textarea.vue'; |
||||||
|
import props from '../u-textarea/props.js' |
||||||
|
export default { |
||||||
|
name: 'u--textarea', |
||||||
|
mixins: [uni.$u.mpMixin, props, uni.$u.mixin], |
||||||
|
components: { |
||||||
|
uvTextarea |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
export default { |
||||||
|
props: { |
||||||
|
// 操作菜单是否展示 （默认false）
|
||||||
|
show: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.actionSheet.show |
||||||
|
}, |
||||||
|
// 标题
|
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.actionSheet.title |
||||||
|
}, |
||||||
|
// 选项上方的描述信息
|
||||||
|
description: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.actionSheet.description |
||||||
|
}, |
||||||
|
// 数据
|
||||||
|
actions: { |
||||||
|
type: Array, |
||||||
|
default: uni.$u.props.actionSheet.actions |
||||||
|
}, |
||||||
|
// 取消按钮的文字，不为空时显示按钮
|
||||||
|
cancelText: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.actionSheet.cancelText |
||||||
|
}, |
||||||
|
// 点击某个菜单项时是否关闭弹窗
|
||||||
|
closeOnClickAction: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.actionSheet.closeOnClickAction |
||||||
|
}, |
||||||
|
// 处理底部安全区（默认true）
|
||||||
|
safeAreaInsetBottom: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.actionSheet.safeAreaInsetBottom |
||||||
|
}, |
||||||
|
// 小程序的打开方式
|
||||||
|
openType: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.actionSheet.openType |
||||||
|
}, |
||||||
|
// 点击遮罩是否允许关闭 (默认true)
|
||||||
|
closeOnClickOverlay: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.actionSheet.closeOnClickOverlay |
||||||
|
}, |
||||||
|
// 圆角值
|
||||||
|
round: { |
||||||
|
type: [Boolean, String, Number], |
||||||
|
default: uni.$u.props.actionSheet.round |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,278 @@ |
|||||||
|
|
||||||
|
<template> |
||||||
|
<u-popup |
||||||
|
:show="show" |
||||||
|
mode="bottom" |
||||||
|
@close="closeHandler" |
||||||
|
:safeAreaInsetBottom="safeAreaInsetBottom" |
||||||
|
:round="round" |
||||||
|
> |
||||||
|
<view class="u-action-sheet"> |
||||||
|
<view |
||||||
|
class="u-action-sheet__header" |
||||||
|
v-if="title" |
||||||
|
> |
||||||
|
<text class="u-action-sheet__header__title u-line-1">{{title}}</text> |
||||||
|
<view |
||||||
|
class="u-action-sheet__header__icon-wrap" |
||||||
|
@tap.stop="cancel" |
||||||
|
> |
||||||
|
<u-icon |
||||||
|
name="close" |
||||||
|
size="17" |
||||||
|
color="#c8c9cc" |
||||||
|
bold |
||||||
|
></u-icon> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<text |
||||||
|
class="u-action-sheet__description" |
||||||
|
:style="[{ |
||||||
|
marginTop: `${title && description ? 0 : '18px'}` |
||||||
|
}]" |
||||||
|
v-if="description" |
||||||
|
>{{description}}</text> |
||||||
|
<slot> |
||||||
|
<u-line v-if="description"></u-line> |
||||||
|
<view class="u-action-sheet__item-wrap"> |
||||||
|
<template v-for="(item, index) in actions"> |
||||||
|
<!-- #ifdef MP --> |
||||||
|
<button |
||||||
|
:key="index" |
||||||
|
class="u-reset-button" |
||||||
|
:openType="item.openType" |
||||||
|
@getuserinfo="onGetUserInfo" |
||||||
|
@contact="onContact" |
||||||
|
@getphonenumber="onGetPhoneNumber" |
||||||
|
@error="onError" |
||||||
|
@launchapp="onLaunchApp" |
||||||
|
@opensetting="onOpenSetting" |
||||||
|
:lang="lang" |
||||||
|
:session-from="sessionFrom" |
||||||
|
:send-message-title="sendMessageTitle" |
||||||
|
:send-message-path="sendMessagePath" |
||||||
|
:send-message-img="sendMessageImg" |
||||||
|
:show-message-card="showMessageCard" |
||||||
|
:app-parameter="appParameter" |
||||||
|
@tap="selectHandler(index)" |
||||||
|
:hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''" |
||||||
|
> |
||||||
|
<!-- #endif --> |
||||||
|
<view |
||||||
|
class="u-action-sheet__item-wrap__item" |
||||||
|
@tap.stop="selectHandler(index)" |
||||||
|
:hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''" |
||||||
|
:hover-stay-time="150" |
||||||
|
> |
||||||
|
<template v-if="!item.loading"> |
||||||
|
<text |
||||||
|
class="u-action-sheet__item-wrap__item__name" |
||||||
|
:style="[itemStyle(index)]" |
||||||
|
>{{ item.name }}</text> |
||||||
|
<text |
||||||
|
v-if="item.subname" |
||||||
|
class="u-action-sheet__item-wrap__item__subname" |
||||||
|
>{{ item.subname }}</text> |
||||||
|
</template> |
||||||
|
<u-loading-icon |
||||||
|
v-else |
||||||
|
custom-class="van-action-sheet__loading" |
||||||
|
size="18" |
||||||
|
mode="circle" |
||||||
|
/> |
||||||
|
</view> |
||||||
|
<!-- #ifdef MP --> |
||||||
|
</button> |
||||||
|
<!-- #endif --> |
||||||
|
<u-line v-if="index !== actions.length - 1"></u-line> |
||||||
|
</template> |
||||||
|
</view> |
||||||
|
</slot> |
||||||
|
<u-gap |
||||||
|
bgColor="#eaeaec" |
||||||
|
height="6" |
||||||
|
v-if="cancelText" |
||||||
|
></u-gap> |
||||||
|
<view hover-class="u-action-sheet--hover"> |
||||||
|
<text |
||||||
|
@touchmove.stop.prevent |
||||||
|
:hover-stay-time="150" |
||||||
|
v-if="cancelText" |
||||||
|
class="u-action-sheet__cancel-text" |
||||||
|
@tap="cancel" |
||||||
|
>{{cancelText}}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</u-popup> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import openType from '../../libs/mixin/openType' |
||||||
|
import button from '../../libs/mixin/button' |
||||||
|
import props from './props.js'; |
||||||
|
/** |
||||||
|
* ActionSheet 操作菜单 |
||||||
|
* @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。 |
||||||
|
* @tutorial https://www.uviewui.com/components/actionSheet.html |
||||||
|
* |
||||||
|
* @property {Boolean} show 操作菜单是否展示 （默认 false ） |
||||||
|
* @property {String} title 操作菜单标题 |
||||||
|
* @property {String} description 选项上方的描述信息 |
||||||
|
* @property {Array<Object>} actions 按钮的文字数组，见官方文档示例 |
||||||
|
* @property {String} cancelText 取消按钮的提示文字,不为空时显示按钮 |
||||||
|
* @property {Boolean} closeOnClickAction 点击某个菜单项时是否关闭弹窗 （默认 true ） |
||||||
|
* @property {Boolean} safeAreaInsetBottom 处理底部安全区 （默认 true ） |
||||||
|
* @property {String} openType 小程序的打开方式 (contact | launchApp | getUserInfo | openSetting ｜getPhoneNumber ｜error ) |
||||||
|
* @property {Boolean} closeOnClickOverlay 点击遮罩是否允许关闭 (默认 true ) |
||||||
|
* @property {Number|String} round 圆角值，默认无圆角 (默认 0 ) |
||||||
|
* @property {String} lang 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 |
||||||
|
* @property {String} sessionFrom 会话来源，openType="contact"时有效 |
||||||
|
* @property {String} sendMessageTitle 会话内消息卡片标题，openType="contact"时有效 |
||||||
|
* @property {String} sendMessagePath 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 |
||||||
|
* @property {String} sendMessageImg 会话内消息卡片图片，openType="contact"时有效 |
||||||
|
* @property {Boolean} showMessageCard 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 （默认 false ） |
||||||
|
* @property {String} appParameter 打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效 |
||||||
|
* |
||||||
|
* @event {Function} select 点击ActionSheet列表项时触发 |
||||||
|
* @event {Function} close 点击取消按钮时触发 |
||||||
|
* @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效 |
||||||
|
* @event {Function} contact 客服消息回调，openType="contact"时有效 |
||||||
|
* @event {Function} getphonenumber 获取用户手机号回调，openType="getPhoneNumber"时有效 |
||||||
|
* @event {Function} error 当使用开放能力时，发生错误的回调，openType="error"时有效 |
||||||
|
* @event {Function} launchapp 打开 APP 成功的回调，openType="launchApp"时有效 |
||||||
|
* @event {Function} opensetting 在打开授权设置页后回调，openType="openSetting"时有效 |
||||||
|
* @example <u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet> |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
name: "u-action-sheet", |
||||||
|
// 一些props参数和methods方法，通过mixin混入，因为其他文件也会用到 |
||||||
|
mixins: [openType, button, uni.$u.mixin, props], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 操作项目的样式 |
||||||
|
itemStyle() { |
||||||
|
return (index) => { |
||||||
|
let style = {}; |
||||||
|
if (this.actions[index].color) style.color = this.actions[index].color |
||||||
|
if (this.actions[index].fontSize) style.fontSize = uni.$u.addUnit(this.actions[index].fontSize) |
||||||
|
// 选项被禁用的样式 |
||||||
|
if (this.actions[index].disabled) style.color = '#c0c4cc' |
||||||
|
return style; |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
closeHandler() { |
||||||
|
// 允许点击遮罩关闭时，才发出close事件 |
||||||
|
if(this.closeOnClickOverlay) { |
||||||
|
this.$emit('close') |
||||||
|
} |
||||||
|
}, |
||||||
|
// 点击取消按钮 |
||||||
|
cancel() { |
||||||
|
this.$emit('close') |
||||||
|
}, |
||||||
|
selectHandler(index) { |
||||||
|
const item = this.actions[index] |
||||||
|
if (item && !item.disabled && !item.loading) { |
||||||
|
this.$emit('select', item) |
||||||
|
if (this.closeOnClickAction) { |
||||||
|
this.$emit('close') |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "../../libs/css/components.scss"; |
||||||
|
$u-action-sheet-reset-button-width:100% !default; |
||||||
|
$u-action-sheet-title-font-size: 16px !default; |
||||||
|
$u-action-sheet-title-padding: 12px 30px !default; |
||||||
|
$u-action-sheet-title-color: $u-main-color !default; |
||||||
|
$u-action-sheet-header-icon-wrap-right:15px !default; |
||||||
|
$u-action-sheet-header-icon-wrap-top:15px !default; |
||||||
|
$u-action-sheet-description-font-size:13px !default; |
||||||
|
$u-action-sheet-description-color:14px !default; |
||||||
|
$u-action-sheet-description-margin: 18px 15px !default; |
||||||
|
$u-action-sheet-item-wrap-item-padding:15px !default; |
||||||
|
$u-action-sheet-item-wrap-name-font-size:16px !default; |
||||||
|
$u-action-sheet-item-wrap-subname-font-size:13px !default; |
||||||
|
$u-action-sheet-item-wrap-subname-color: #c0c4cc !default; |
||||||
|
$u-action-sheet-item-wrap-subname-margin-top:10px !default; |
||||||
|
$u-action-sheet-cancel-text-font-size:16px !default; |
||||||
|
$u-action-sheet-cancel-text-color:$u-content-color !default; |
||||||
|
$u-action-sheet-cancel-text-font-size:15px !default; |
||||||
|
$u-action-sheet-cancel-text-hover-background-color:rgb(242, 243, 245) !default; |
||||||
|
|
||||||
|
.u-reset-button { |
||||||
|
width: $u-action-sheet-reset-button-width; |
||||||
|
} |
||||||
|
|
||||||
|
.u-action-sheet { |
||||||
|
text-align: center; |
||||||
|
&__header { |
||||||
|
position: relative; |
||||||
|
padding: $u-action-sheet-title-padding; |
||||||
|
&__title { |
||||||
|
font-size: $u-action-sheet-title-font-size; |
||||||
|
color: $u-action-sheet-title-color; |
||||||
|
font-weight: bold; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
&__icon-wrap { |
||||||
|
position: absolute; |
||||||
|
right: $u-action-sheet-header-icon-wrap-right; |
||||||
|
top: $u-action-sheet-header-icon-wrap-top; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__description { |
||||||
|
font-size: $u-action-sheet-description-font-size; |
||||||
|
color: $u-tips-color; |
||||||
|
margin: $u-action-sheet-description-margin; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
&__item-wrap { |
||||||
|
|
||||||
|
&__item { |
||||||
|
padding: $u-action-sheet-item-wrap-item-padding; |
||||||
|
@include flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
&__name { |
||||||
|
font-size: $u-action-sheet-item-wrap-name-font-size; |
||||||
|
color: $u-main-color; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
&__subname { |
||||||
|
font-size: $u-action-sheet-item-wrap-subname-font-size; |
||||||
|
color: $u-action-sheet-item-wrap-subname-color; |
||||||
|
margin-top: $u-action-sheet-item-wrap-subname-margin-top; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__cancel-text { |
||||||
|
font-size: $u-action-sheet-cancel-text-font-size; |
||||||
|
color: $u-action-sheet-cancel-text-color; |
||||||
|
text-align: center; |
||||||
|
padding: $u-action-sheet-cancel-text-font-size; |
||||||
|
} |
||||||
|
|
||||||
|
&--hover { |
||||||
|
background-color: $u-action-sheet-cancel-text-hover-background-color; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,59 @@ |
|||||||
|
export default { |
||||||
|
props: { |
||||||
|
// 图片地址，Array<String>|Array<Object>形式
|
||||||
|
urls: { |
||||||
|
type: Array, |
||||||
|
default: uni.$u.props.album.urls |
||||||
|
}, |
||||||
|
// 指定从数组的对象元素中读取哪个属性作为图片地址
|
||||||
|
keyName: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.album.keyName |
||||||
|
}, |
||||||
|
// 单图时，图片长边的长度
|
||||||
|
singleSize: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.album.singleSize |
||||||
|
}, |
||||||
|
// 多图时，图片边长
|
||||||
|
multipleSize: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.album.multipleSize |
||||||
|
}, |
||||||
|
// 多图时，图片水平和垂直之间的间隔
|
||||||
|
space: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.album.space |
||||||
|
}, |
||||||
|
// 单图时，图片缩放裁剪的模式
|
||||||
|
singleMode: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.album.singleMode |
||||||
|
}, |
||||||
|
// 多图时，图片缩放裁剪的模式
|
||||||
|
multipleMode: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.album.multipleMode |
||||||
|
}, |
||||||
|
// 最多展示的图片数量，超出时最后一个位置将会显示剩余图片数量
|
||||||
|
maxCount: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.album.maxCount |
||||||
|
}, |
||||||
|
// 是否可以预览图片
|
||||||
|
previewFullImage: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.album.previewFullImage |
||||||
|
}, |
||||||
|
// 每行展示图片数量，如设置，singleSize和multipleSize将会无效
|
||||||
|
rowCount: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.album.rowCount |
||||||
|
}, |
||||||
|
// 超出maxCount时是否显示查看更多的提示
|
||||||
|
showMore: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.album.showMore |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,259 @@ |
|||||||
|
<template> |
||||||
|
<view class="u-album"> |
||||||
|
<view |
||||||
|
class="u-album__row" |
||||||
|
ref="u-album__row" |
||||||
|
v-for="(arr, index) in showUrls" |
||||||
|
:forComputedUse="albumWidth" |
||||||
|
:key="index" |
||||||
|
> |
||||||
|
<view |
||||||
|
class="u-album__row__wrapper" |
||||||
|
v-for="(item, index1) in arr" |
||||||
|
:key="index1" |
||||||
|
:style="[imageStyle(index + 1, index1 + 1)]" |
||||||
|
@tap="previewFullImage ? onPreviewTap(getSrc(item)) : ''" |
||||||
|
> |
||||||
|
<image |
||||||
|
:src="getSrc(item)" |
||||||
|
:mode=" |
||||||
|
urls.length === 1 |
||||||
|
? imageHeight > 0 |
||||||
|
? singleMode |
||||||
|
: 'widthFix' |
||||||
|
: multipleMode |
||||||
|
" |
||||||
|
:style="[ |
||||||
|
{ |
||||||
|
width: imageWidth, |
||||||
|
height: imageHeight |
||||||
|
} |
||||||
|
]" |
||||||
|
></image> |
||||||
|
<view |
||||||
|
v-if=" |
||||||
|
showMore && |
||||||
|
urls.length > rowCount * showUrls.length && |
||||||
|
index === showUrls.length - 1 && |
||||||
|
index1 === showUrls[showUrls.length - 1].length - 1 |
||||||
|
" |
||||||
|
class="u-album__row__wrapper__text" |
||||||
|
> |
||||||
|
<u--text |
||||||
|
:text="`+${urls.length - maxCount}`" |
||||||
|
color="#fff" |
||||||
|
:size="multipleSize * 0.3" |
||||||
|
align="center" |
||||||
|
customStyle="justify-content: center" |
||||||
|
></u--text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import props from './props.js' |
||||||
|
// #ifdef APP-NVUE |
||||||
|
// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度 |
||||||
|
const dom = uni.requireNativePlugin('dom') |
||||||
|
// #endif |
||||||
|
|
||||||
|
/** |
||||||
|
* Album 相册 |
||||||
|
* @description 本组件提供一个类似相册的功能，让开发者开发起来更加得心应手。减少重复的模板代码 |
||||||
|
* @tutorial https://www.uviewui.com/components/album.html |
||||||
|
* |
||||||
|
* @property {Array} urls 图片地址列表 Array<String>|Array<Object>形式 |
||||||
|
* @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址 |
||||||
|
* @property {String | Number} singleSize 单图时，图片长边的长度 （默认 180 ） |
||||||
|
* @property {String | Number} multipleSize 多图时，图片边长 （默认 70 ） |
||||||
|
* @property {String | Number} space 多图时，图片水平和垂直之间的间隔 （默认 6 ） |
||||||
|
* @property {String} singleMode 单图时，图片缩放裁剪的模式 （默认 'scaleToFill' ） |
||||||
|
* @property {String} multipleMode 多图时，图片缩放裁剪的模式 （默认 'aspectFill' ） |
||||||
|
* @property {String | Number} maxCount 取消按钮的提示文字 （默认 9 ） |
||||||
|
* @property {Boolean} previewFullImage 是否可以预览图片 （默认 true ） |
||||||
|
* @property {String | Number} rowCount 每行展示图片数量，如设置，singleSize和multipleSize将会无效 （默认 3 ） |
||||||
|
* @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 （默认 true ） |
||||||
|
* |
||||||
|
* @event {Function} albumWidth 某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送 （回调参数 width ） |
||||||
|
* @example <u-album :urls="urls2" @albumWidth="width => albumWidth = width" multipleSize="68" ></u-album> |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
name: 'u-album', |
||||||
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 单图的宽度 |
||||||
|
singleWidth: 0, |
||||||
|
// 单图的高度 |
||||||
|
singleHeight: 0, |
||||||
|
// 单图时，如果无法获取图片的尺寸信息，让图片宽度默认为容器的一定百分比 |
||||||
|
singlePercent: 0.6 |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
urls: { |
||||||
|
immediate: true, |
||||||
|
handler(newVal) { |
||||||
|
if (newVal.length === 1) { |
||||||
|
this.getImageRect() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
imageStyle() { |
||||||
|
return (index1, index2) => { |
||||||
|
const { space, rowCount, multipleSize, urls } = this, |
||||||
|
{ addUnit, addStyle } = uni.$u, |
||||||
|
rowLen = this.showUrls.length, |
||||||
|
allLen = this.urls.length |
||||||
|
const style = { |
||||||
|
marginRight: addUnit(space), |
||||||
|
marginBottom: addUnit(space) |
||||||
|
} |
||||||
|
// 如果为最后一行，则每个图片都无需下边框 |
||||||
|
if (index1 === rowLen) style.marginBottom = 0 |
||||||
|
// 每行的最右边一张和总长度的最后一张无需右边框 |
||||||
|
if ( |
||||||
|
index2 === rowCount || |
||||||
|
(index1 === rowLen && |
||||||
|
index2 === this.showUrls[index1 - 1].length) |
||||||
|
) |
||||||
|
style.marginRight = 0 |
||||||
|
return style |
||||||
|
} |
||||||
|
}, |
||||||
|
// 将数组划分为二维数组 |
||||||
|
showUrls() { |
||||||
|
const arr = [] |
||||||
|
this.urls.map((item, index) => { |
||||||
|
// 限制最大展示数量 |
||||||
|
if (index + 1 <= this.maxCount) { |
||||||
|
// 计算该元素为第几个素组内 |
||||||
|
const itemIndex = Math.floor(index / this.rowCount) |
||||||
|
// 判断对应的索引是否存在 |
||||||
|
if (!arr[itemIndex]) { |
||||||
|
arr[itemIndex] = [] |
||||||
|
} |
||||||
|
arr[itemIndex].push(item) |
||||||
|
} |
||||||
|
}) |
||||||
|
return arr |
||||||
|
}, |
||||||
|
imageWidth() { |
||||||
|
return uni.$u.addUnit( |
||||||
|
this.urls.length === 1 ? this.singleWidth : this.multipleSize |
||||||
|
) |
||||||
|
}, |
||||||
|
imageHeight() { |
||||||
|
return uni.$u.addUnit( |
||||||
|
this.urls.length === 1 ? this.singleHeight : this.multipleSize |
||||||
|
) |
||||||
|
}, |
||||||
|
// 此变量无实际用途，仅仅是为了利用computed特性，让其在urls长度等变化时，重新计算图片的宽度 |
||||||
|
// 因为用户在某些特殊的情况下，需要让文字与相册的宽度相等，所以这里事件的形式对外发送 |
||||||
|
albumWidth() { |
||||||
|
let width = 0 |
||||||
|
if (this.urls.length === 1) { |
||||||
|
width = this.singleWidth |
||||||
|
} else { |
||||||
|
width = |
||||||
|
this.showUrls[0].length * this.multipleSize + |
||||||
|
this.space * (this.showUrls[0].length - 1) |
||||||
|
} |
||||||
|
this.$emit('albumWidth', width) |
||||||
|
return width |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 预览图片 |
||||||
|
onPreviewTap(url) { |
||||||
|
const urls = this.urls.map((item) => { |
||||||
|
return this.getSrc(item) |
||||||
|
}) |
||||||
|
uni.previewImage({ |
||||||
|
current: url, |
||||||
|
urls |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 获取图片的路径 |
||||||
|
getSrc(item) { |
||||||
|
return uni.$u.test.object(item) |
||||||
|
? (this.keyName && item[this.keyName]) || item.src |
||||||
|
: item |
||||||
|
}, |
||||||
|
// 单图时，获取图片的尺寸 |
||||||
|
// 在小程序中，需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸 |
||||||
|
// 在没有添加的情况下，让单图宽度默认为盒子的一定宽度(singlePercent) |
||||||
|
getImageRect() { |
||||||
|
const src = this.getSrc(this.urls[0]) |
||||||
|
uni.getImageInfo({ |
||||||
|
src, |
||||||
|
success: (res) => { |
||||||
|
// 判断图片横向还是竖向展示方式 |
||||||
|
const isHorizotal = res.width >= res.height |
||||||
|
this.singleWidth = isHorizotal |
||||||
|
? this.singleSize |
||||||
|
: (res.width / res.height) * this.singleSize |
||||||
|
this.singleHeight = !isHorizotal |
||||||
|
? this.singleSize |
||||||
|
: (res.height / res.width) * this.singleWidth |
||||||
|
}, |
||||||
|
fail: () => { |
||||||
|
this.getComponentWidth() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 获取组件的宽度 |
||||||
|
async getComponentWidth() { |
||||||
|
// 延时一定时间，以获取dom尺寸 |
||||||
|
await uni.$u.sleep(30) |
||||||
|
// #ifndef APP-NVUE |
||||||
|
this.$uGetRect('.u-album__row').then((size) => { |
||||||
|
this.singleWidth = size.width * this.singlePercent |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
|
||||||
|
// #ifdef APP-NVUE |
||||||
|
// 这里ref="u-album__row"所在的标签为通过for循环出来，导致this.$refs['u-album__row']是一个数组 |
||||||
|
const ref = this.$refs['u-album__row'][0] |
||||||
|
ref && |
||||||
|
dom.getComponentRect(ref, (res) => { |
||||||
|
this.singleWidth = res.size.width * this.singlePercent |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import '../../libs/css/components.scss'; |
||||||
|
|
||||||
|
.u-album { |
||||||
|
@include flex(column); |
||||||
|
|
||||||
|
&__row { |
||||||
|
@include flex(row); |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
&__wrapper { |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&__text { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
background-color: rgba(0, 0, 0, 0.3); |
||||||
|
@include flex(row); |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
export default { |
||||||
|
props: { |
||||||
|
// 显示文字
|
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.alert.title |
||||||
|
}, |
||||||
|
// 主题，success/warning/info/error
|
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.alert.type |
||||||
|
}, |
||||||
|
// 辅助性文字
|
||||||
|
description: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.alert.description |
||||||
|
}, |
||||||
|
// 是否可关闭
|
||||||
|
closable: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.alert.closable |
||||||
|
}, |
||||||
|
// 是否显示图标
|
||||||
|
showIcon: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.alert.showIcon |
||||||
|
}, |
||||||
|
// 浅或深色调，light-浅色，dark-深色
|
||||||
|
effect: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.alert.effect |
||||||
|
}, |
||||||
|
// 文字是否居中
|
||||||
|
center: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.alert.center |
||||||
|
}, |
||||||
|
// 字体大小
|
||||||
|
fontSize: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.alert.fontSize |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,243 @@ |
|||||||
|
<template> |
||||||
|
<u-transition |
||||||
|
mode="fade" |
||||||
|
:show="show" |
||||||
|
> |
||||||
|
<view |
||||||
|
class="u-alert" |
||||||
|
:class="[`u-alert--${type}--${effect}`]" |
||||||
|
@tap.stop="clickHandler" |
||||||
|
:style="[$u.addStyle(customStyle)]" |
||||||
|
> |
||||||
|
<view |
||||||
|
class="u-alert__icon" |
||||||
|
v-if="showIcon" |
||||||
|
> |
||||||
|
<u-icon |
||||||
|
:name="iconName" |
||||||
|
size="18" |
||||||
|
:color="iconColor" |
||||||
|
></u-icon> |
||||||
|
</view> |
||||||
|
<view |
||||||
|
class="u-alert__content" |
||||||
|
:style="[{ |
||||||
|
paddingRight: closable ? '20px' : 0 |
||||||
|
}]" |
||||||
|
> |
||||||
|
<text |
||||||
|
class="u-alert__content__title" |
||||||
|
v-if="title" |
||||||
|
:style="[{ |
||||||
|
fontSize: $u.addUnit(fontSize), |
||||||
|
textAlign: center ? 'center' : 'left' |
||||||
|
}]" |
||||||
|
:class="[effect === 'dark' ? 'u-alert__text--dark' : `u-alert__text--${type}--light`]" |
||||||
|
>{{ title }}</text> |
||||||
|
<text |
||||||
|
class="u-alert__content__desc" |
||||||
|
v-if="description" |
||||||
|
:style="[{ |
||||||
|
fontSize: $u.addUnit(fontSize), |
||||||
|
textAlign: center ? 'center' : 'left' |
||||||
|
}]" |
||||||
|
:class="[effect === 'dark' ? 'u-alert__text--dark' : `u-alert__text--${type}--light`]" |
||||||
|
>{{ description }}</text> |
||||||
|
</view> |
||||||
|
<view |
||||||
|
class="u-alert__close" |
||||||
|
v-if="closable" |
||||||
|
@tap.stop="closeHandler" |
||||||
|
> |
||||||
|
<u-icon |
||||||
|
name="close" |
||||||
|
:color="iconColor" |
||||||
|
size="15" |
||||||
|
></u-icon> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</u-transition> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import props from './props.js'; |
||||||
|
/** |
||||||
|
* Alert 警告提示 |
||||||
|
* @description 警告提示，展现需要关注的信息。 |
||||||
|
* @tutorial https://www.uviewui.com/components/alertTips.html |
||||||
|
* |
||||||
|
* @property {String} title 显示的文字 |
||||||
|
* @property {String} type 使用预设的颜色 （默认 'warning' ） |
||||||
|
* @property {String} description 辅助性文字，颜色比title浅一点，字号也小一点，可选 |
||||||
|
* @property {Boolean} closable 关闭按钮(默认为叉号icon图标) （默认 false ） |
||||||
|
* @property {Boolean} showIcon 是否显示左边的辅助图标 （ 默认 false ） |
||||||
|
* @property {String} effect 多图时，图片缩放裁剪的模式 （默认 'light' ） |
||||||
|
* @property {Boolean} center 文字是否居中 （默认 false ） |
||||||
|
* @property {String | Number} fontSize 字体大小 （默认 14 ） |
||||||
|
* @property {Object} customStyle 定义需要用到的外部样式 |
||||||
|
* @event {Function} click 点击组件时触发 |
||||||
|
* @example <u-alert :title="title" type = "warning" :closable="closable" :description = "description"></u-alert> |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
name: 'u-alert', |
||||||
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
show: true |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
iconColor() { |
||||||
|
return this.effect === 'light' ? this.type : '#fff' |
||||||
|
}, |
||||||
|
// 不同主题对应不同的图标 |
||||||
|
iconName() { |
||||||
|
switch (this.type) { |
||||||
|
case 'success': |
||||||
|
return 'checkmark-circle-fill'; |
||||||
|
break; |
||||||
|
case 'error': |
||||||
|
return 'close-circle-fill'; |
||||||
|
break; |
||||||
|
case 'warning': |
||||||
|
return 'error-circle-fill'; |
||||||
|
break; |
||||||
|
case 'info': |
||||||
|
return 'info-circle-fill'; |
||||||
|
break; |
||||||
|
case 'primary': |
||||||
|
return 'more-circle-fill'; |
||||||
|
break; |
||||||
|
default: |
||||||
|
return 'error-circle-fill'; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 点击内容 |
||||||
|
clickHandler() { |
||||||
|
this.$emit('click') |
||||||
|
}, |
||||||
|
// 点击关闭按钮 |
||||||
|
closeHandler() { |
||||||
|
this.show = false |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "../../libs/css/components.scss"; |
||||||
|
|
||||||
|
.u-alert { |
||||||
|
position: relative; |
||||||
|
background-color: $u-primary; |
||||||
|
padding: 8px 10px; |
||||||
|
@include flex(row); |
||||||
|
align-items: center; |
||||||
|
border-top-left-radius: 4px; |
||||||
|
border-top-right-radius: 4px; |
||||||
|
border-bottom-left-radius: 4px; |
||||||
|
border-bottom-right-radius: 4px; |
||||||
|
|
||||||
|
&--primary--dark { |
||||||
|
background-color: $u-primary; |
||||||
|
} |
||||||
|
|
||||||
|
&--primary--light { |
||||||
|
background-color: #ecf5ff; |
||||||
|
} |
||||||
|
|
||||||
|
&--error--dark { |
||||||
|
background-color: $u-error; |
||||||
|
} |
||||||
|
|
||||||
|
&--error--light { |
||||||
|
background-color: #FEF0F0; |
||||||
|
} |
||||||
|
|
||||||
|
&--success--dark { |
||||||
|
background-color: $u-success; |
||||||
|
} |
||||||
|
|
||||||
|
&--success--light { |
||||||
|
background-color: #f5fff0; |
||||||
|
} |
||||||
|
|
||||||
|
&--warning--dark { |
||||||
|
background-color: $u-warning; |
||||||
|
} |
||||||
|
|
||||||
|
&--warning--light { |
||||||
|
background-color: #FDF6EC; |
||||||
|
} |
||||||
|
|
||||||
|
&--info--dark { |
||||||
|
background-color: $u-info; |
||||||
|
} |
||||||
|
|
||||||
|
&--info--light { |
||||||
|
background-color: #f4f4f5; |
||||||
|
} |
||||||
|
|
||||||
|
&__icon { |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
&__content { |
||||||
|
@include flex(column); |
||||||
|
flex: 1; |
||||||
|
|
||||||
|
&__title { |
||||||
|
color: $u-main-color; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: bold; |
||||||
|
color: #fff; |
||||||
|
margin-bottom: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
&__desc { |
||||||
|
color: $u-main-color; |
||||||
|
font-size: 14px; |
||||||
|
flex-wrap: wrap; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__title--dark, |
||||||
|
&__desc--dark { |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
&__text--primary--light, |
||||||
|
&__text--primary--light { |
||||||
|
color: $u-primary; |
||||||
|
} |
||||||
|
|
||||||
|
&__text--success--light, |
||||||
|
&__text--success--light { |
||||||
|
color: $u-success; |
||||||
|
} |
||||||
|
|
||||||
|
&__text--warning--light, |
||||||
|
&__text--warning--light { |
||||||
|
color: $u-warning; |
||||||
|
} |
||||||
|
|
||||||
|
&__text--error--light, |
||||||
|
&__text--error--light { |
||||||
|
color: $u-error; |
||||||
|
} |
||||||
|
|
||||||
|
&__text--info--light, |
||||||
|
&__text--info--light { |
||||||
|
color: $u-info; |
||||||
|
} |
||||||
|
|
||||||
|
&__close { |
||||||
|
position: absolute; |
||||||
|
top: 11px; |
||||||
|
right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
export default { |
||||||
|
props: { |
||||||
|
// 头像图片组
|
||||||
|
urls: { |
||||||
|
type: Array, |
||||||
|
default: uni.$u.props.avatarGroup.urls |
||||||
|
}, |
||||||
|
// 最多展示的头像数量
|
||||||
|
maxCount: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.avatarGroup.maxCount |
||||||
|
}, |
||||||
|
// 头像形状
|
||||||
|
shape: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.avatarGroup.shape |
||||||
|
}, |
||||||
|
// 图片裁剪模式
|
||||||
|
mode: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.avatarGroup.mode |
||||||
|
}, |
||||||
|
// 超出maxCount时是否显示查看更多的提示
|
||||||
|
showMore: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.avatarGroup.showMore |
||||||
|
}, |
||||||
|
// 头像大小
|
||||||
|
size: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.avatarGroup.size |
||||||
|
}, |
||||||
|
// 指定从数组的对象元素中读取哪个属性作为图片地址
|
||||||
|
keyName: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.avatarGroup.keyName |
||||||
|
}, |
||||||
|
// 头像之间的遮挡比例
|
||||||
|
gap: { |
||||||
|
type: [String, Number], |
||||||
|
validator(value) { |
||||||
|
return value >= 0 && value <= 1 |
||||||
|
}, |
||||||
|
default: uni.$u.props.avatarGroup.gap |
||||||
|
}, |
||||||
|
// 需额外显示的值
|
||||||
|
extraValue: { |
||||||
|
type: [Number, String], |
||||||
|
default: uni.$u.props.avatarGroup.extraValue |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
<template> |
||||||
|
<view class="u-avatar-group"> |
||||||
|
<view |
||||||
|
class="u-avatar-group__item" |
||||||
|
v-for="(item, index) in showUrl" |
||||||
|
:key="index" |
||||||
|
:style="{ |
||||||
|
marginLeft: index === 0 ? 0 : $u.addUnit(-size * gap) |
||||||
|
}" |
||||||
|
> |
||||||
|
<u-avatar |
||||||
|
:size="size" |
||||||
|
:shape="shape" |
||||||
|
:mode="mode" |
||||||
|
:src="$u.test.object(item) ? keyName && item[keyName] || item.url : item" |
||||||
|
></u-avatar> |
||||||
|
<view |
||||||
|
class="u-avatar-group__item__show-more" |
||||||
|
v-if="showMore && index === showUrl.length - 1 && (urls.length > maxCount || extraValue > 0)" |
||||||
|
@tap="clickHandler" |
||||||
|
> |
||||||
|
<u--text |
||||||
|
color="#ffffff" |
||||||
|
:size="size * 0.4" |
||||||
|
:text="`+${extraValue || urls.length - showUrl.length}`" |
||||||
|
align="center" |
||||||
|
customStyle="justify-content: center" |
||||||
|
></u--text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import props from './props.js'; |
||||||
|
/** |
||||||
|
* AvatarGroup 头像组 |
||||||
|
* @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。 |
||||||
|
* @tutorial https://www.uviewui.com/components/avatar.html |
||||||
|
* |
||||||
|
* @property {Array} urls 头像图片组 （默认 [] ） |
||||||
|
* @property {String | Number} maxCount 最多展示的头像数量 （ 默认 5 ） |
||||||
|
* @property {String} shape 头像形状（ 'circle' (默认) | 'square' ） |
||||||
|
* @property {String} mode 图片裁剪模式（默认 'scaleToFill' ） |
||||||
|
* @property {Boolean} showMore 超出maxCount时是否显示查看更多的提示 （默认 true ） |
||||||
|
* @property {String | Number} size 头像大小 （默认 40 ） |
||||||
|
* @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址 |
||||||
|
* @property {String | Number} gap 头像之间的遮挡比例（0.4代表遮挡40%） （默认 0.5 ） |
||||||
|
* @property {String | Number} extraValue 需额外显示的值 |
||||||
|
* @event {Function} showMore 头像组更多点击 |
||||||
|
* @example <u-avatar-group:urls="urls" size="35" gap="0.4" ></u-avatar-group:urls=> |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
name: 'u-avatar-group', |
||||||
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
showUrl() { |
||||||
|
return this.urls.slice(0, this.maxCount) |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
clickHandler() { |
||||||
|
this.$emit('showMore') |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "../../libs/css/components.scss"; |
||||||
|
|
||||||
|
.u-avatar-group { |
||||||
|
@include flex; |
||||||
|
|
||||||
|
&__item { |
||||||
|
margin-left: -10px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&--no-indent { |
||||||
|
// 如果你想质疑作者不会使用:first-child，说明你太年轻，因为nvue不支持 |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&__show-more { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
background-color: rgba(0, 0, 0, 0.3); |
||||||
|
@include flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border-radius: 100px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,78 @@ |
|||||||
|
export default { |
||||||
|
props: { |
||||||
|
// 头像图片路径(不能为相对路径)
|
||||||
|
src: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.avatar.src |
||||||
|
}, |
||||||
|
// 头像形状，circle-圆形，square-方形
|
||||||
|
shape: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.avatar.shape |
||||||
|
}, |
||||||
|
// 头像尺寸
|
||||||
|
size: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.avatar.size |
||||||
|
}, |
||||||
|
// 裁剪模式
|
||||||
|
mode: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.avatar.mode |
||||||
|
}, |
||||||
|
// 显示的文字
|
||||||
|
text: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.avatar.text |
||||||
|
}, |
||||||
|
// 背景色
|
||||||
|
bgColor: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.avatar.bgColor |
||||||
|
}, |
||||||
|
// 文字颜色
|
||||||
|
color: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.avatar.color |
||||||
|
}, |
||||||
|
// 文字大小
|
||||||
|
fontSize: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.avatar.fontSize |
||||||
|
}, |
||||||
|
// 显示的图标
|
||||||
|
icon: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.avatar.icon |
||||||
|
}, |
||||||
|
// 显示小程序头像，只对百度，微信，QQ小程序有效
|
||||||
|
mpAvatar: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.avatar.mpAvatar |
||||||
|
}, |
||||||
|
// 是否使用随机背景色
|
||||||
|
randomBgColor: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.avatar.randomBgColor |
||||||
|
}, |
||||||
|
// 加载失败的默认头像(组件有内置默认图片)
|
||||||
|
defaultUrl: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.avatar.defaultUrl |
||||||
|
}, |
||||||
|
// 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
|
||||||
|
colorIndex: { |
||||||
|
type: [String, Number], |
||||||
|
// 校验参数规则，索引在0-19之间
|
||||||
|
validator(n) { |
||||||
|
return uni.$u.test.range(n, [0, 19]) || n === '' |
||||||
|
}, |
||||||
|
default: uni.$u.props.avatar.colorIndex |
||||||
|
}, |
||||||
|
// 组件标识符
|
||||||
|
name: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.avatar.name |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,172 @@ |
|||||||
|
<template> |
||||||
|
<view |
||||||
|
class="u-avatar" |
||||||
|
:class="[`u-avatar--${shape}`]" |
||||||
|
:style="[{ |
||||||
|
backgroundColor: (text || icon) ? (randomBgColor ? colors[colorIndex !== '' ? colorIndex : $u.random(0, 19)] : bgColor) : 'transparent', |
||||||
|
width: $u.addUnit(size), |
||||||
|
height: $u.addUnit(size), |
||||||
|
}, $u.addStyle(customStyle)]" |
||||||
|
@tap="clickHandler" |
||||||
|
> |
||||||
|
<slot> |
||||||
|
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU --> |
||||||
|
<open-data |
||||||
|
v-if="mpAvatar && allowMp" |
||||||
|
type="userAvatarUrl" |
||||||
|
:style="[{ |
||||||
|
width: $u.addUnit(size), |
||||||
|
height: $u.addUnit(size) |
||||||
|
}]" |
||||||
|
/> |
||||||
|
<!-- #endif --> |
||||||
|
<!-- #ifndef MP-WEIXIN && MP-QQ && MP-BAIDU --> |
||||||
|
<template v-if="mpAvatar && allowMp"></template> |
||||||
|
<!-- #endif --> |
||||||
|
<u-icon |
||||||
|
v-else-if="icon" |
||||||
|
:name="icon" |
||||||
|
:size="fontSize" |
||||||
|
:color="color" |
||||||
|
></u-icon> |
||||||
|
<u--text |
||||||
|
v-else-if="text" |
||||||
|
:text="text" |
||||||
|
:size="fontSize" |
||||||
|
:color="color" |
||||||
|
align="center" |
||||||
|
customStyle="justify-content: center" |
||||||
|
></u--text> |
||||||
|
<image |
||||||
|
class="u-avatar__image" |
||||||
|
v-else |
||||||
|
:class="[`u-avatar__image--${shape}`]" |
||||||
|
:src="avatarUrl || defaultUrl" |
||||||
|
:mode="mode" |
||||||
|
@error="errorHandler" |
||||||
|
:style="[{ |
||||||
|
width: $u.addUnit(size), |
||||||
|
height: $u.addUnit(size) |
||||||
|
}]" |
||||||
|
></image> |
||||||
|
</slot> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import props from './props.js'; |
||||||
|
const base64Avatar = |
||||||
|
"data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCADIAMgDAREAAhEBAxEB/8QAcQABAQEAAwEBAAAAAAAAAAAAAAUEAQMGAgcBAQAAAAAAAAAAAAAAAAAAAAAQAAIBAwICBgkDBQAAAAAAAAABAhEDBCEFMVFBYXGREiKBscHRMkJSEyOh4XLxYjNDFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A/fAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHbHFyZ/Dam+yLA+Z2L0Pjtyj2poD4AAAAAAAAAAAAAAAAAAAAAAAAKWFs9y6lcvvwQeqj8z9wFaziY1n/HbUX9XF97A7QAGXI23EvJ1goyfzR0YEfN269jeZ+a03pNe0DIAAAAAAAAAAAAAAAAAAAACvtO3RcVkXlWutuL9YFYAAAAAOJRjKLjJVi9GmB5/csH/mu1h/in8PU+QGMAAAAAAAAAAAAAAAAAAaMDG/6MmMH8C80+xAelSSVFolwQAAAAAAAHVlWI37ErUulaPk+hgeYnCUJuElSUXRrrQHAAAAAAAAAAAAAAAAABa2Oz4bM7r4zdF2ICmAAAAAAAAAg7zZ8GX41wuJP0rRgYAAAAAAAAAAAAAAAAAD0m2R8ODaXU33tsDSAAAAAAAAAlb9HyWZcnJd9PcBHAAAAAAAAAAAAAAAAAPS7e64Vn+KA0AAAAAAAAAJm+v8Ftf3ewCKAAAAAAAAAAAAAAAAAX9muqeGo9NttP06+0DcAAAAAAAAAjb7dTu2ra+VOT9P8AQCWAAAAAAAAAAAAAAAAAUNmyPt5Ltv4bui/kuAF0AAAAAAADiUlGLlJ0SVW+oDzOXfd/Ind6JPRdS0QHSAAAAAAAAAAAAAAAAAE2nVaNcGB6Lbs6OTao9LsF51z60BrAAAAAABJ3jOVHjW3r/sa9QEgAAAAAAAAAAAAAAAAAAAPu1duWriuW34ZR4MC9hbnZyEoy8l36XwfYBsAAADaSq9EuLAlZ+7xSdrGdW9Hc5dgEdtt1erfFgAAAAAAAAAAAAAAAAADVjbblX6NR8MH80tEBRs7HYivyzlN8lovaBPzduvY0m6eK10TXtAyAarO55lpJK54orolr+4GqO/Xaea1FvqbXvA+Z77kNeW3GPbV+4DJfzcm/pcm3H6Vou5AdAFLC2ed2Pjv1txa8sV8T6wOL+yZEKu1JXFy4MDBOE4ScZxcZLinoB8gAAAAAAAAAAAB242LeyJ+C3GvN9C7QLmJtePYpKS+5c+p8F2IDYAANJqj1T4oCfk7Nj3G5Wn9qXJax7gJ93Z82D8sVNc4v30A6Xg5i42Z+iLfqARwcyT0sz9MWvWBps7LlTf5Grce9/oBTxdtxseklHxT+uWr9AGoAB138ezfj4bsFJdD6V2MCPm7RdtJzs1uW1xXzL3gTgAAAAAAAAADRhYc8q74I6RWs5ckB6GxYtWLat21SK731sDsAAAAAAAAAAAAAAAASt021NO/YjrxuQXT1oCOAAAAAAABzGLlJRSq26JAelwsWONYjbXxcZvmwO8AAAAAAAAAAAAAAAAAAef3TEWPkVivx3NY9T6UBiAAAAAABo2+VmGXblddIJ8eivRUD0oAAAAAAAAAAAAAAAAAAAYt4tKeFKVNYNSXfRgefAAAAAAAAr7VuSSWPedKaW5v1MCsAAAAAAAAAAAAAAAAAAIe6bj96Ts2n+JPzSXzP3ATgAAAAAAAAFbbt1UUrOQ9FpC4/UwK6aaqtU+DAAAAAAAAAAAAAAA4lKMIuUmoxWrb4ARNx3R3q2rLpa4Sl0y/YCcAAAAAAAAAAANmFud7G8r89r6X0dgFvGzLGRGtuWvTF6NAdwAAAAAAAAAAAy5W442PVN+K59EePp5ARMvOv5MvO6QXCC4AZwAAAAAAAAAAAAAcxlKLUotprg1owN+PvORborq+7Hnwl3gUbO74VzRydt8pKn68ANcJwmqwkpLmnUDkAAAAfNy9atqtyagut0AxXt5xIV8Fbj6lRd7Am5G65V6qUvtwfyx94GMAAAAAAAAAAAAAAAAAAAOU2nVOj5gdsc3LiqRvTpyqwOxbnnrhdfpSfrQB7pnv/AGvuS9gHXPMy5/Fem1yq0v0A6W29XqwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf//Z"; |
||||||
|
/** |
||||||
|
* Avatar 头像 |
||||||
|
* @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。 |
||||||
|
* @tutorial https://www.uviewui.com/components/avatar.html |
||||||
|
* |
||||||
|
* @property {String} src 头像路径，如加载失败，将会显示默认头像(不能为相对路径) |
||||||
|
* @property {String} shape 头像形状 （ circle (默认) | square） |
||||||
|
* @property {String | Number} size 头像尺寸，可以为指定字符串(large, default, mini)，或者数值 （默认 40 ） |
||||||
|
* @property {String} mode 头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值 （默认 'scaleToFill' ） |
||||||
|
* @property {String} text 用文字替代图片，级别优先于src |
||||||
|
* @property {String} bgColor 背景颜色，一般显示文字时用 （默认 '#c0c4cc' ） |
||||||
|
* @property {String} color 文字颜色 （默认 '#ffffff' ） |
||||||
|
* @property {String | Number} fontSize 文字大小 （默认 18 ） |
||||||
|
* @property {String} icon 显示的图标 |
||||||
|
* @property {Boolean} mpAvatar 显示小程序头像，只对百度，微信，QQ小程序有效 （默认 false ） |
||||||
|
* @property {Boolean} randomBgColor 是否使用随机背景色 （默认 false ） |
||||||
|
* @property {String} defaultUrl 加载失败的默认头像(组件有内置默认图片) |
||||||
|
* @property {String | Number} colorIndex 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间 |
||||||
|
* @property {String} name 组件标识符 （默认 'level' ） |
||||||
|
* @property {Object} customStyle 定义需要用到的外部样式 |
||||||
|
* |
||||||
|
* @event {Function} click 点击组件时触发 index: 用户传递的标识符 |
||||||
|
* @example <u-avatar :src="src" mode="square"></u-avatar> |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
name: 'u-avatar', |
||||||
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 如果配置randomBgColor参数为true，在图标或者文字的模式下，会随机从中取出一个颜色值当做背景色 |
||||||
|
colors: ['#ffb34b', '#f2bba9', '#f7a196', '#f18080', '#88a867', '#bfbf39', '#89c152', '#94d554', '#f19ec2', |
||||||
|
'#afaae4', '#e1b0df', '#c38cc1', '#72dcdc', '#9acdcb', '#77b1cc', '#448aca', '#86cefa', '#98d1ee', |
||||||
|
'#73d1f1', |
||||||
|
'#80a7dc' |
||||||
|
], |
||||||
|
avatarUrl: this.src, |
||||||
|
allowMp: false |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
// 监听头像src的变化，赋值给内部的avatarUrl变量，因为图片加载失败时，需要修改图片的src为默认值 |
||||||
|
// 而组件内部不能直接修改props的值，所以需要一个中间变量 |
||||||
|
src: { |
||||||
|
immediate: true, |
||||||
|
handler(newVal) { |
||||||
|
this.avatarUrl = newVal |
||||||
|
// 如果没有传src，则主动触发error事件，用于显示默认的头像，否则src为''空字符等的时候，会无内容展示 |
||||||
|
if(!newVal) { |
||||||
|
this.errorHandler() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
imageStyle() { |
||||||
|
const style = {} |
||||||
|
return style |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.init() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
init() { |
||||||
|
// 目前只有这几个小程序平台具有open-data标签 |
||||||
|
// 其他平台可以通过uni.getUserInfo类似接口获取信息，但是需要弹窗授权(首次)，不合符组件逻辑 |
||||||
|
// 故目前自动获取小程序头像只支持这几个平台 |
||||||
|
// #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU |
||||||
|
this.allowMp = true |
||||||
|
// #endif |
||||||
|
}, |
||||||
|
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式 |
||||||
|
isImg() { |
||||||
|
return this.src.indexOf('/') !== -1 |
||||||
|
}, |
||||||
|
// 图片加载时失败时触发 |
||||||
|
errorHandler() { |
||||||
|
this.avatarUrl = this.defaultUrl || base64Avatar |
||||||
|
}, |
||||||
|
clickHandler() { |
||||||
|
this.$emit('click', this.name) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "../../libs/css/components.scss"; |
||||||
|
|
||||||
|
.u-avatar { |
||||||
|
@include flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
&--circle { |
||||||
|
border-radius: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
&--square { |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
&__image { |
||||||
|
&--circle { |
||||||
|
border-radius: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
&--square { |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
export default { |
||||||
|
props: { |
||||||
|
// 返回顶部的形状，circle-圆形，square-方形
|
||||||
|
mode: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.backtop.mode |
||||||
|
}, |
||||||
|
// 自定义图标
|
||||||
|
icon: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.backtop.icon |
||||||
|
}, |
||||||
|
// 提示文字
|
||||||
|
text: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.backtop.text |
||||||
|
}, |
||||||
|
// 返回顶部滚动时间
|
||||||
|
duration: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.backtop.duration |
||||||
|
}, |
||||||
|
// 滚动距离
|
||||||
|
scrollTop: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.backtop.scrollTop |
||||||
|
}, |
||||||
|
// 距离顶部多少距离显示，单位px
|
||||||
|
top: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.backtop.top |
||||||
|
}, |
||||||
|
// 返回顶部按钮到底部的距离，单位px
|
||||||
|
bottom: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.backtop.bottom |
||||||
|
}, |
||||||
|
// 返回顶部按钮到右边的距离，单位px
|
||||||
|
right: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.backtop.right |
||||||
|
}, |
||||||
|
// 层级
|
||||||
|
zIndex: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.backtop.zIndex |
||||||
|
}, |
||||||
|
// 图标的样式，对象形式
|
||||||
|
iconStyle: { |
||||||
|
type: Object, |
||||||
|
default: uni.$u.props.backtop.iconStyle |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,129 @@ |
|||||||
|
<template> |
||||||
|
<u-transition |
||||||
|
mode="fade" |
||||||
|
:customStyle="backTopStyle" |
||||||
|
:show="show" |
||||||
|
> |
||||||
|
<view |
||||||
|
class="u-back-top" |
||||||
|
:style="[contentStyle]" |
||||||
|
v-if="!$slots.default && !$slots.$default" |
||||||
|
@click="backToTop" |
||||||
|
> |
||||||
|
<u-icon |
||||||
|
:name="icon" |
||||||
|
:custom-style="iconStyle" |
||||||
|
></u-icon> |
||||||
|
<text |
||||||
|
v-if="text" |
||||||
|
class="u-back-top__text" |
||||||
|
>{{text}}</text> |
||||||
|
</view> |
||||||
|
<slot v-else /> |
||||||
|
</u-transition> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import props from './props.js'; |
||||||
|
// #ifdef APP-NVUE |
||||||
|
const dom = weex.requireModule('dom') |
||||||
|
// #endif |
||||||
|
/** |
||||||
|
* backTop 返回顶部 |
||||||
|
* @description 本组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。 |
||||||
|
* @tutorial https://uviewui.com/components/backTop.html |
||||||
|
* |
||||||
|
* @property {String} mode 返回顶部的形状，circle-圆形，square-方形 （默认 'circle' ） |
||||||
|
* @property {String} icon 自定义图标 （默认 'arrow-upward' ） 见官方文档示例 |
||||||
|
* @property {String} text 提示文字 |
||||||
|
* @property {String | Number} duration 返回顶部滚动时间 （默认 100） |
||||||
|
* @property {String | Number} scrollTop 滚动距离 （默认 0 ） |
||||||
|
* @property {String | Number} top 距离顶部多少距离显示，单位px （默认 400 ） |
||||||
|
* @property {String | Number} bottom 返回顶部按钮到底部的距离，单位px （默认 100 ） |
||||||
|
* @property {String | Number} right 返回顶部按钮到右边的距离，单位px （默认 20 ） |
||||||
|
* @property {String | Number} zIndex 层级 （默认 9 ） |
||||||
|
* @property {Object<Object>} iconStyle 图标的样式，对象形式 （默认 {color: '#909399',fontSize: '19px'}） |
||||||
|
* @property {Object} customStyle 定义需要用到的外部样式 |
||||||
|
* |
||||||
|
* @example <u-back-top :scrollTop="scrollTop"></u-back-top> |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
name: 'u-back-top', |
||||||
|
mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
||||||
|
computed: { |
||||||
|
backTopStyle() { |
||||||
|
// 动画组件样式 |
||||||
|
const style = { |
||||||
|
bottom: uni.$u.addUnit(this.bottom), |
||||||
|
right: uni.$u.addUnit(this.right), |
||||||
|
width: '40px', |
||||||
|
height: '40px', |
||||||
|
position: 'fixed', |
||||||
|
zIndex: 10, |
||||||
|
} |
||||||
|
return style |
||||||
|
}, |
||||||
|
show() { |
||||||
|
return uni.$u.getPx(this.scrollTop) > uni.$u.getPx(this.top) |
||||||
|
}, |
||||||
|
contentStyle() { |
||||||
|
const style = {} |
||||||
|
let radius = 0 |
||||||
|
// 是否圆形 |
||||||
|
if(this.mode === 'circle') { |
||||||
|
radius = '100px' |
||||||
|
} else { |
||||||
|
radius = '4px' |
||||||
|
} |
||||||
|
// 为了兼容安卓nvue，只能这么分开写 |
||||||
|
style.borderTopLeftRadius = radius |
||||||
|
style.borderTopRightRadius = radius |
||||||
|
style.borderBottomLeftRadius = radius |
||||||
|
style.borderBottomRightRadius = radius |
||||||
|
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
backToTop() { |
||||||
|
// #ifdef APP-NVUE |
||||||
|
if (!this.$parent.$refs['u-back-top']) { |
||||||
|
uni.$u.error(`nvue页面需要给页面最外层元素设置"ref='u-back-top'`) |
||||||
|
} |
||||||
|
dom.scrollToElement(this.$parent.$refs['u-back-top'], { |
||||||
|
offset: 0 |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
|
||||||
|
// #ifndef APP-NVUE |
||||||
|
uni.pageScrollTo({ |
||||||
|
scrollTop: 0, |
||||||
|
duration: this.duration |
||||||
|
}); |
||||||
|
// #endif |
||||||
|
this.$emit('click') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import '../../libs/css/components.scss'; |
||||||
|
$u-back-top-flex:1 !default; |
||||||
|
$u-back-top-height:100% !default; |
||||||
|
$u-back-top-background-color:#E1E1E1 !default; |
||||||
|
$u-back-top-tips-font-size:12px !default; |
||||||
|
.u-back-top { |
||||||
|
@include flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
flex:$u-back-top-flex; |
||||||
|
height: $u-back-top-height; |
||||||
|
justify-content: center; |
||||||
|
background-color: $u-back-top-background-color; |
||||||
|
|
||||||
|
&__tips { |
||||||
|
font-size:$u-back-top-tips-font-size; |
||||||
|
transform: scale(0.8); |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
export default { |
||||||
|
props: { |
||||||
|
// 是否显示圆点
|
||||||
|
isDot: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.badge.isDot |
||||||
|
}, |
||||||
|
// 显示的内容
|
||||||
|
value: { |
||||||
|
type: [Number, String], |
||||||
|
default: uni.$u.props.badge.value |
||||||
|
}, |
||||||
|
// 是否显示
|
||||||
|
show: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.badge.show |
||||||
|
}, |
||||||
|
// 最大值，超过最大值会显示 '{max}+'
|
||||||
|
max: { |
||||||
|
type: [Number, String], |
||||||
|
default: uni.$u.props.badge.max |
||||||
|
}, |
||||||
|
// 主题类型，error|warning|success|primary
|
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.badge.type |
||||||
|
}, |
||||||
|
// 当数值为 0 时，是否展示 Badge
|
||||||
|
showZero: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.badge.showZero |
||||||
|
}, |
||||||
|
// 背景颜色，优先级比type高，如设置，type参数会失效
|
||||||
|
bgColor: { |
||||||
|
type: [String, null], |
||||||
|
default: uni.$u.props.badge.bgColor |
||||||
|
}, |
||||||
|
// 字体颜色
|
||||||
|
color: { |
||||||
|
type: [String, null], |
||||||
|
default: uni.$u.props.badge.color |
||||||
|
}, |
||||||
|
// 徽标形状，circle-四角均为圆角，horn-左下角为直角
|
||||||
|
shape: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.badge.shape |
||||||
|
}, |
||||||
|
// 设置数字的显示方式，overflow|ellipsis|limit
|
||||||
|
// overflow会根据max字段判断，超出显示`${max}+`
|
||||||
|
// ellipsis会根据max判断，超出显示`${max}...`
|
||||||
|
// limit会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数
|
||||||
|
numberType: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.badge.numberType |
||||||
|
}, |
||||||
|
// 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
|
||||||
|
offset: { |
||||||
|
type: Array, |
||||||
|
default: uni.$u.props.badge.offset |
||||||
|
}, |
||||||
|
// 是否反转背景和字体颜色
|
||||||
|
inverted: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.badge.inverted |
||||||
|
}, |
||||||
|
// 是否绝对定位
|
||||||
|
absolute: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.badge.absolute |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,171 @@ |
|||||||
|
<template> |
||||||
|
<text |
||||||
|
v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)" |
||||||
|
:class="[isDot ? 'u-badge--dot' : 'u-badge--not-dot', inverted && 'u-badge--inverted', shape === 'horn' && 'u-badge--horn', `u-badge--${type}${inverted ? '--inverted' : ''}`]" |
||||||
|
:style="[$u.addStyle(customStyle), badgeStyle]" |
||||||
|
class="u-badge" |
||||||
|
>{{ isDot ? '' :showValue }}</text> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import props from './props.js'; |
||||||
|
/** |
||||||
|
* badge 徽标数 |
||||||
|
* @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。 |
||||||
|
* @tutorial https://uviewui.com/components/badge.html |
||||||
|
* |
||||||
|
* @property {Boolean} isDot 是否显示圆点 （默认 false ） |
||||||
|
* @property {String | Number} value 显示的内容 |
||||||
|
* @property {Boolean} show 是否显示 （默认 true ） |
||||||
|
* @property {String | Number} max 最大值，超过最大值会显示 '{max}+' （默认999） |
||||||
|
* @property {String} type 主题类型，error|warning|success|primary （默认 'error' ） |
||||||
|
* @property {Boolean} showZero 当数值为 0 时，是否展示 Badge （默认 false ） |
||||||
|
* @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效 |
||||||
|
* @property {String} color 字体颜色 （默认 '#ffffff' ） |
||||||
|
* @property {String} shape 徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ） |
||||||
|
* @property {String} numberType 设置数字的显示方式，overflow|ellipsis|limit （默认 'overflow' ） |
||||||
|
* @property {Array}} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效 |
||||||
|
* @property {Boolean} inverted 是否反转背景和字体颜色（默认 false ） |
||||||
|
* @property {Boolean} absolute 是否绝对定位（默认 false ） |
||||||
|
* @property {Object} customStyle 定义需要用到的外部样式 |
||||||
|
* @example <u-badge :type="type" :count="count"></u-badge> |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
name: 'u-badge', |
||||||
|
mixins: [uni.$u.mpMixin, props, uni.$u.mixin], |
||||||
|
computed: { |
||||||
|
// 是否将badge中心与父组件右上角重合 |
||||||
|
boxStyle() { |
||||||
|
let style = {}; |
||||||
|
return style; |
||||||
|
}, |
||||||
|
// 整个组件的样式 |
||||||
|
badgeStyle() { |
||||||
|
const style = {} |
||||||
|
if(this.color) { |
||||||
|
style.color = this.color |
||||||
|
} |
||||||
|
if (this.bgColor && !this.inverted) { |
||||||
|
style.backgroundColor = this.bgColor |
||||||
|
} |
||||||
|
if (this.absolute) { |
||||||
|
style.position = 'absolute' |
||||||
|
// 如果有设置offset参数 |
||||||
|
if(this.offset.length) { |
||||||
|
// top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top |
||||||
|
const top = this.offset[0] |
||||||
|
const right = this.offset[1] || top |
||||||
|
style.top = uni.$u.addUnit(top) |
||||||
|
style.right = uni.$u.addUnit(right) |
||||||
|
} |
||||||
|
} |
||||||
|
return style |
||||||
|
}, |
||||||
|
showValue() { |
||||||
|
switch (this.numberType) { |
||||||
|
case "overflow": |
||||||
|
return Number(this.value) > Number(this.max) ? this.max + "+" : this.value |
||||||
|
break; |
||||||
|
case "ellipsis": |
||||||
|
return Number(this.value) > Number(this.max) ? "..." : this.value |
||||||
|
break; |
||||||
|
case "limit": |
||||||
|
return Number(this.value) > 999 ? Number(this.value) >= 9999 ? |
||||||
|
Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value / |
||||||
|
1e3 * 100) / 100 + "k" : this.value |
||||||
|
break; |
||||||
|
default: |
||||||
|
return Number(this.value) |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "../../libs/css/components.scss"; |
||||||
|
|
||||||
|
$u-badge-primary: $u-primary !default; |
||||||
|
$u-badge-error: $u-error !default; |
||||||
|
$u-badge-success: $u-success !default; |
||||||
|
$u-badge-info: $u-info !default; |
||||||
|
$u-badge-warning: $u-warning !default; |
||||||
|
$u-badge-dot-radius: 100px !default; |
||||||
|
$u-badge-dot-size: 8px !default; |
||||||
|
$u-badge-dot-right: 4px !default; |
||||||
|
$u-badge-dot-top: 0 !default; |
||||||
|
$u-badge-text-font-size: 11px !default; |
||||||
|
$u-badge-text-right: 10px !default; |
||||||
|
$u-badge-text-padding: 2px 5px !default; |
||||||
|
$u-badge-text-align: center !default; |
||||||
|
$u-badge-text-color: #FFFFFF !default; |
||||||
|
|
||||||
|
.u-badge { |
||||||
|
border-top-right-radius: $u-badge-dot-radius; |
||||||
|
border-top-left-radius: $u-badge-dot-radius; |
||||||
|
border-bottom-left-radius: $u-badge-dot-radius; |
||||||
|
border-bottom-right-radius: $u-badge-dot-radius; |
||||||
|
@include flex; |
||||||
|
line-height: $u-badge-text-font-size; |
||||||
|
text-align: $u-badge-text-align; |
||||||
|
font-size: $u-badge-text-font-size; |
||||||
|
color: $u-badge-text-color; |
||||||
|
|
||||||
|
&--dot { |
||||||
|
height: $u-badge-dot-size; |
||||||
|
width: $u-badge-dot-size; |
||||||
|
} |
||||||
|
|
||||||
|
&--inverted { |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
&--not-dot { |
||||||
|
padding: $u-badge-text-padding; |
||||||
|
} |
||||||
|
|
||||||
|
&--horn { |
||||||
|
border-bottom-left-radius: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&--primary { |
||||||
|
background-color: $u-badge-primary; |
||||||
|
} |
||||||
|
|
||||||
|
&--primary--inverted { |
||||||
|
color: $u-badge-primary; |
||||||
|
} |
||||||
|
|
||||||
|
&--error { |
||||||
|
background-color: $u-badge-error; |
||||||
|
} |
||||||
|
|
||||||
|
&--error--inverted { |
||||||
|
color: $u-badge-error; |
||||||
|
} |
||||||
|
|
||||||
|
&--success { |
||||||
|
background-color: $u-badge-success; |
||||||
|
} |
||||||
|
|
||||||
|
&--success--inverted { |
||||||
|
color: $u-badge-success; |
||||||
|
} |
||||||
|
|
||||||
|
&--info { |
||||||
|
background-color: $u-badge-info; |
||||||
|
} |
||||||
|
|
||||||
|
&--info--inverted { |
||||||
|
color: $u-badge-info; |
||||||
|
} |
||||||
|
|
||||||
|
&--warning { |
||||||
|
background-color: $u-badge-warning; |
||||||
|
} |
||||||
|
|
||||||
|
&--warning--inverted { |
||||||
|
color: $u-badge-warning; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
$u-button-active-opacity:0.75 !default; |
||||||
|
$u-button-loading-text-margin-left:4px !default; |
||||||
|
$u-button-text-color: #FFFFFF !default; |
||||||
|
$u-button-text-plain-error-color:$u-error !default; |
||||||
|
$u-button-text-plain-warning-color:$u-warning !default; |
||||||
|
$u-button-text-plain-success-color:$u-success !default; |
||||||
|
$u-button-text-plain-info-color:$u-info !default; |
||||||
|
$u-button-text-plain-primary-color:$u-primary !default; |
||||||
|
.u-button { |
||||||
|
&--active { |
||||||
|
opacity: $u-button-active-opacity; |
||||||
|
} |
||||||
|
|
||||||
|
&--active--plain { |
||||||
|
background-color: rgb(217, 217, 217); |
||||||
|
} |
||||||
|
|
||||||
|
&__loading-text { |
||||||
|
margin-left:$u-button-loading-text-margin-left; |
||||||
|
} |
||||||
|
|
||||||
|
&__text, |
||||||
|
&__loading-text { |
||||||
|
color:$u-button-text-color; |
||||||
|
} |
||||||
|
|
||||||
|
&__text--plain--error { |
||||||
|
color:$u-button-text-plain-error-color; |
||||||
|
} |
||||||
|
|
||||||
|
&__text--plain--warning { |
||||||
|
color:$u-button-text-plain-warning-color; |
||||||
|
} |
||||||
|
|
||||||
|
&__text--plain--success{ |
||||||
|
color:$u-button-text-plain-success-color; |
||||||
|
} |
||||||
|
|
||||||
|
&__text--plain--info { |
||||||
|
color:$u-button-text-plain-info-color; |
||||||
|
} |
||||||
|
|
||||||
|
&__text--plain--primary { |
||||||
|
color:$u-button-text-plain-primary-color; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,161 @@ |
|||||||
|
/* |
||||||
|
* @Author : LQ |
||||||
|
* @Description : |
||||||
|
* @version : 1.0 |
||||||
|
* @Date : 2021-08-16 10:04:04 |
||||||
|
* @LastAuthor : LQ |
||||||
|
* @lastTime : 2021-08-16 10:04:24 |
||||||
|
* @FilePath : /u-view2.0/uview-ui/components/u-button/props.js |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
// 是否细边框
|
||||||
|
hairline: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.button.hairline |
||||||
|
}, |
||||||
|
// 按钮的预置样式，info，primary，error，warning，success
|
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.type |
||||||
|
}, |
||||||
|
// 按钮尺寸，large，normal，small，mini
|
||||||
|
size: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.size |
||||||
|
}, |
||||||
|
// 按钮形状，circle（两边为半圆），square（带圆角）
|
||||||
|
shape: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.shape |
||||||
|
}, |
||||||
|
// 按钮是否镂空
|
||||||
|
plain: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.button.plain |
||||||
|
}, |
||||||
|
// 是否禁止状态
|
||||||
|
disabled: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.button.disabled |
||||||
|
}, |
||||||
|
// 是否加载中
|
||||||
|
loading: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.button.loading |
||||||
|
}, |
||||||
|
// 加载中提示文字
|
||||||
|
loadingText: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.button.loadingText |
||||||
|
}, |
||||||
|
// 加载状态图标类型
|
||||||
|
loadingMode: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.loadingMode |
||||||
|
}, |
||||||
|
// 加载图标大小
|
||||||
|
loadingSize: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.button.loadingSize |
||||||
|
}, |
||||||
|
// 开放能力，具体请看uniapp稳定关于button组件部分说明
|
||||||
|
// https://uniapp.dcloud.io/component/button
|
||||||
|
openType: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.openType |
||||||
|
}, |
||||||
|
// 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
|
||||||
|
// 取值为submit（提交表单），reset（重置表单）
|
||||||
|
formType: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.formType |
||||||
|
}, |
||||||
|
// 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
|
||||||
|
// 只微信小程序、QQ小程序有效
|
||||||
|
appParameter: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.appParameter |
||||||
|
}, |
||||||
|
// 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
|
||||||
|
hoverStopPropagation: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.button.hoverStopPropagation |
||||||
|
}, |
||||||
|
// 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
|
||||||
|
lang: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.lang |
||||||
|
}, |
||||||
|
// 会话来源，open-type="contact"时有效。只微信小程序有效
|
||||||
|
sessionFrom: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.sessionFrom |
||||||
|
}, |
||||||
|
// 会话内消息卡片标题，open-type="contact"时有效
|
||||||
|
// 默认当前标题，只微信小程序有效
|
||||||
|
sendMessageTitle: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.sendMessageTitle |
||||||
|
}, |
||||||
|
// 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
|
||||||
|
// 默认当前分享路径，只微信小程序有效
|
||||||
|
sendMessagePath: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.sendMessagePath |
||||||
|
}, |
||||||
|
// 会话内消息卡片图片，open-type="contact"时有效
|
||||||
|
// 默认当前页面截图，只微信小程序有效
|
||||||
|
sendMessageImg: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.sendMessageImg |
||||||
|
}, |
||||||
|
// 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
|
||||||
|
// 用户点击后可以快速发送小程序消息，open-type="contact"时有效
|
||||||
|
showMessageCard: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.button.showMessageCard |
||||||
|
}, |
||||||
|
// 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
|
||||||
|
dataName: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.dataName |
||||||
|
}, |
||||||
|
// 节流，一定时间内只能触发一次
|
||||||
|
throttleTime: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.button.throttleTime |
||||||
|
}, |
||||||
|
// 按住后多久出现点击态，单位毫秒
|
||||||
|
hoverStartTime: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.button.hoverStartTime |
||||||
|
}, |
||||||
|
// 手指松开后点击态保留时间，单位毫秒
|
||||||
|
hoverStayTime: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.button.hoverStayTime |
||||||
|
}, |
||||||
|
// 按钮文字，之所以通过props传入，是因为slot传入的话
|
||||||
|
// nvue中无法控制文字的样式
|
||||||
|
text: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.button.text |
||||||
|
}, |
||||||
|
// 按钮图标
|
||||||
|
icon: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.icon |
||||||
|
}, |
||||||
|
// 按钮图标
|
||||||
|
iconColor: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.icon |
||||||
|
}, |
||||||
|
// 按钮颜色，支持传入linear-gradient渐变色
|
||||||
|
color: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.button.color |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,490 @@ |
|||||||
|
<template> |
||||||
|
<!-- #ifndef APP-NVUE --> |
||||||
|
<button |
||||||
|
:hover-start-time="Number(hoverStartTime)" |
||||||
|
:hover-stay-time="Number(hoverStayTime)" |
||||||
|
:form-type="formType" |
||||||
|
:open-type="openType" |
||||||
|
:app-parameter="appParameter" |
||||||
|
:hover-stop-propagation="hoverStopPropagation" |
||||||
|
:send-message-title="sendMessageTitle" |
||||||
|
:send-message-path="sendMessagePath" |
||||||
|
:lang="lang" |
||||||
|
:data-name="dataName" |
||||||
|
:session-from="sessionFrom" |
||||||
|
:send-message-img="sendMessageImg" |
||||||
|
:show-message-card="showMessageCard" |
||||||
|
@getphonenumber="getphonenumber" |
||||||
|
@getuserinfo="getuserinfo" |
||||||
|
@error="error" |
||||||
|
@opensetting="opensetting" |
||||||
|
@launchapp="launchapp" |
||||||
|
:hover-class="!disabled && !loading ? 'u-button--active' : ''" |
||||||
|
class="u-button u-reset-button" |
||||||
|
:style="[baseColor, $u.addStyle(customStyle)]" |
||||||
|
@tap="clickHandler" |
||||||
|
:class="bemClass" |
||||||
|
> |
||||||
|
<template v-if="loading"> |
||||||
|
<u-loading-icon |
||||||
|
:mode="loadingMode" |
||||||
|
:size="loadingSize * 1.15" |
||||||
|
:color="loadingColor" |
||||||
|
></u-loading-icon> |
||||||
|
<text |
||||||
|
class="u-button__loading-text" |
||||||
|
:style="[{ fontSize: textSize + 'px' }]" |
||||||
|
>{{ loadingText || text }}</text |
||||||
|
> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<u-icon |
||||||
|
v-if="icon" |
||||||
|
:name="icon" |
||||||
|
:color="iconColorCom" |
||||||
|
:size="textSize * 1.35" |
||||||
|
:customStyle="{ marginRight: '2px' }" |
||||||
|
></u-icon> |
||||||
|
<slot> |
||||||
|
<text |
||||||
|
class="u-button__text" |
||||||
|
:style="[{ fontSize: textSize + 'px' }]" |
||||||
|
>{{ text }}</text |
||||||
|
> |
||||||
|
</slot> |
||||||
|
</template> |
||||||
|
</button> |
||||||
|
<!-- #endif --> |
||||||
|
|
||||||
|
<!-- #ifdef APP-NVUE --> |
||||||
|
<view |
||||||
|
:hover-start-time="Number(hoverStartTime)" |
||||||
|
:hover-stay-time="Number(hoverStayTime)" |
||||||
|
class="u-button" |
||||||
|
:hover-class=" |
||||||
|
!disabled && !loading && !color && (plain || type === 'info') |
||||||
|
? 'u-button--active--plain' |
||||||
|
: !disabled && !loading && !plain |
||||||
|
? 'u-button--active' |
||||||
|
: '' |
||||||
|
" |
||||||
|
@tap="clickHandler" |
||||||
|
:class="bemClass" |
||||||
|
:style="[baseColor, $u.addStyle(customStyle)]" |
||||||
|
> |
||||||
|
<template v-if="loading"> |
||||||
|
<u-loading-icon |
||||||
|
:mode="loadingMode" |
||||||
|
:size="loadingSize * 1.15" |
||||||
|
:color="loadingColor" |
||||||
|
></u-loading-icon> |
||||||
|
<text |
||||||
|
class="u-button__loading-text" |
||||||
|
:style="[nvueTextStyle]" |
||||||
|
:class="[plain && `u-button__text--plain--${type}`]" |
||||||
|
>{{ loadingText || text }}</text |
||||||
|
> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<u-icon |
||||||
|
v-if="icon" |
||||||
|
:name="icon" |
||||||
|
:color="iconColorCom" |
||||||
|
:size="textSize * 1.35" |
||||||
|
></u-icon> |
||||||
|
<text |
||||||
|
class="u-button__text" |
||||||
|
:style="[ |
||||||
|
{ |
||||||
|
marginLeft: icon ? '2px' : 0, |
||||||
|
}, |
||||||
|
nvueTextStyle, |
||||||
|
]" |
||||||
|
:class="[plain && `u-button__text--plain--${type}`]" |
||||||
|
>{{ text }}</text |
||||||
|
> |
||||||
|
</template> |
||||||
|
</view> |
||||||
|
<!-- #endif --> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import button from "../../libs/mixin/button.js"; |
||||||
|
import openType from "../../libs/mixin/openType.js"; |
||||||
|
import props from "./props.js"; |
||||||
|
/** |
||||||
|
* button 按钮 |
||||||
|
* @description Button 按钮 |
||||||
|
* @tutorial https://www.uviewui.com/components/button.html |
||||||
|
* |
||||||
|
* @property {Boolean} hairline 是否显示按钮的细边框 (默认 true ) |
||||||
|
* @property {String} type 按钮的预置样式，info，primary，error，warning，success (默认 'info' ) |
||||||
|
* @property {String} size 按钮尺寸，large，normal，mini （默认 normal） |
||||||
|
* @property {String} shape 按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ） |
||||||
|
* @property {Boolean} plain 按钮是否镂空，背景色透明 （默认 false） |
||||||
|
* @property {Boolean} disabled 是否禁用 （默认 false） |
||||||
|
* @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) （默认 false） |
||||||
|
* @property {String | Number} loadingText 加载中提示文字 |
||||||
|
* @property {String} loadingMode 加载状态图标类型 （默认 'spinner' ） |
||||||
|
* @property {String | Number} loadingSize 加载图标大小 （默认 15 ） |
||||||
|
* @property {String} openType 开放能力，具体请看uniapp稳定关于button组件部分说明 |
||||||
|
* @property {String} formType 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 |
||||||
|
* @property {String} appParameter 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效） |
||||||
|
* @property {Boolean} hoverStopPropagation 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true ） |
||||||
|
* @property {String} lang 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ） |
||||||
|
* @property {String} sessionFrom 会话来源，openType="contact"时有效 |
||||||
|
* @property {String} sendMessageTitle 会话内消息卡片标题，openType="contact"时有效 |
||||||
|
* @property {String} sendMessagePath 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 |
||||||
|
* @property {String} sendMessageImg 会话内消息卡片图片，openType="contact"时有效 |
||||||
|
* @property {Boolean} showMessageCard 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认false） |
||||||
|
* @property {String} dataName 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 |
||||||
|
* @property {String | Number} throttleTime 节流，一定时间内只能触发一次 （默认 0 ) |
||||||
|
* @property {String | Number} hoverStartTime 按住后多久出现点击态，单位毫秒 （默认 0 ) |
||||||
|
* @property {String | Number} hoverStayTime 手指松开后点击态保留时间，单位毫秒 （默认 200 ) |
||||||
|
* @property {String | Number} text 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式） |
||||||
|
* @property {String} icon 按钮图标 |
||||||
|
* @property {String} iconColor 按钮图标颜色 |
||||||
|
* @property {String} color 按钮颜色，支持传入linear-gradient渐变色 |
||||||
|
* @property {Object} customStyle 定义需要用到的外部样式 |
||||||
|
* |
||||||
|
* @event {Function} click 非禁止并且非加载中，才能点击 |
||||||
|
* @event {Function} getphonenumber open-type="getPhoneNumber"时有效 |
||||||
|
* @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo |
||||||
|
* @event {Function} error 当使用开放能力时，发生错误的回调 |
||||||
|
* @event {Function} opensetting 在打开授权设置页并关闭后回调 |
||||||
|
* @event {Function} launchapp 打开 APP 成功的回调 |
||||||
|
* @example <u-button>月落</u-button> |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
name: "u-button", |
||||||
|
// #ifdef MP |
||||||
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, button, openType, props], |
||||||
|
// #endif |
||||||
|
// #ifndef MP |
||||||
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
||||||
|
// #endif |
||||||
|
data() { |
||||||
|
return {}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 生成bem风格的类名 |
||||||
|
bemClass() { |
||||||
|
// this.bem为一个computed变量，在mixin中 |
||||||
|
if (!this.color) { |
||||||
|
return this.bem( |
||||||
|
"button", |
||||||
|
["type", "shape", "size"], |
||||||
|
["disabled", "plain", "hairline"] |
||||||
|
); |
||||||
|
} else { |
||||||
|
// 由于nvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式 |
||||||
|
return this.bem( |
||||||
|
"button", |
||||||
|
["shape", "size"], |
||||||
|
["disabled", "plain", "hairline"] |
||||||
|
); |
||||||
|
} |
||||||
|
}, |
||||||
|
loadingColor() { |
||||||
|
if (this.plain) { |
||||||
|
// 如果有设置color值，则用color值，否则使用type主题颜色 |
||||||
|
return this.color |
||||||
|
? this.color |
||||||
|
: uni.$u.config.color[`u-${this.type}`]; |
||||||
|
} |
||||||
|
if (this.type === "info") { |
||||||
|
return "#c9c9c9"; |
||||||
|
} |
||||||
|
return "rgb(200, 200, 200)"; |
||||||
|
}, |
||||||
|
iconColorCom() { |
||||||
|
// 如果是镂空状态，设置了color就用color值，否则使用主题颜色， |
||||||
|
// u-icon的color能接受一个主题颜色的值 |
||||||
|
if (this.iconColor) return this.iconColor; |
||||||
|
if (this.plain) { |
||||||
|
return this.color ? this.color : this.type; |
||||||
|
} else { |
||||||
|
return this.type === "info" ? "#000000" : "#ffffff"; |
||||||
|
} |
||||||
|
}, |
||||||
|
baseColor() { |
||||||
|
let style = {}; |
||||||
|
if (this.color) { |
||||||
|
// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色 |
||||||
|
style.color = this.plain ? this.color : "white"; |
||||||
|
if (!this.plain) { |
||||||
|
// 非镂空，背景色使用自定义的颜色 |
||||||
|
style["background-color"] = this.color; |
||||||
|
} |
||||||
|
if (this.color.indexOf("gradient") !== -1) { |
||||||
|
// 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色 |
||||||
|
// weex文档说明可以写borderWidth的形式，为什么这里需要分开写？ |
||||||
|
// 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效 |
||||||
|
style.borderTopWidth = 0; |
||||||
|
style.borderRightWidth = 0; |
||||||
|
style.borderBottomWidth = 0; |
||||||
|
style.borderLeftWidth = 0; |
||||||
|
if (!this.plain) { |
||||||
|
style.backgroundImage = this.color; |
||||||
|
} |
||||||
|
} else { |
||||||
|
// 非渐变色，则设置边框相关的属性 |
||||||
|
style.borderColor = this.color; |
||||||
|
style.borderWidth = "1px"; |
||||||
|
style.borderStyle = "solid"; |
||||||
|
} |
||||||
|
} |
||||||
|
return style; |
||||||
|
}, |
||||||
|
// nvue版本按钮的字体不会继承父组件的颜色，需要对每一个text组件进行单独的设置 |
||||||
|
nvueTextStyle() { |
||||||
|
let style = {}; |
||||||
|
// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色 |
||||||
|
if (this.type === "info") { |
||||||
|
style.color = "#323233"; |
||||||
|
} |
||||||
|
if (this.color) { |
||||||
|
style.color = this.plain ? this.color : "white"; |
||||||
|
} |
||||||
|
style.fontSize = this.textSize + "px"; |
||||||
|
return style; |
||||||
|
}, |
||||||
|
// 字体大小 |
||||||
|
textSize() { |
||||||
|
let fontSize = 14, |
||||||
|
{ size } = this; |
||||||
|
if (size === "large") fontSize = 16; |
||||||
|
if (size === "normal") fontSize = 14; |
||||||
|
if (size === "small") fontSize = 12; |
||||||
|
if (size === "mini") fontSize = 10; |
||||||
|
return fontSize; |
||||||
|
}, |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
clickHandler() { |
||||||
|
// 非禁止并且非加载中，才能点击 |
||||||
|
if (!this.disabled && !this.loading) { |
||||||
|
// 进行节流控制，每this.throttle毫秒内，只在开始处执行 |
||||||
|
uni.$u.throttle(() => { |
||||||
|
this.$emit("click"); |
||||||
|
}, this.throttleTime); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 下面为对接uniapp官方按钮开放能力事件回调的对接 |
||||||
|
getphonenumber(res) { |
||||||
|
this.$emit("getphonenumber", res); |
||||||
|
}, |
||||||
|
getuserinfo(res) { |
||||||
|
this.$emit("getuserinfo", res); |
||||||
|
}, |
||||||
|
error(res) { |
||||||
|
this.$emit("error", res); |
||||||
|
}, |
||||||
|
opensetting(res) { |
||||||
|
this.$emit("opensetting", res); |
||||||
|
}, |
||||||
|
launchapp(res) { |
||||||
|
this.$emit("launchapp", res); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "../../libs/css/components.scss"; |
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
@import "./vue.scss"; |
||||||
|
/* #endif */ |
||||||
|
|
||||||
|
/* #ifdef APP-NVUE */ |
||||||
|
@import "./nvue.scss"; |
||||||
|
/* #endif */ |
||||||
|
|
||||||
|
$u-button-u-button-height: 40px !default; |
||||||
|
$u-button-text-font-size: 15px !default; |
||||||
|
$u-button-loading-text-font-size: 15px !default; |
||||||
|
$u-button-loading-text-margin-left: 4px !default; |
||||||
|
$u-button-large-width: 100% !default; |
||||||
|
$u-button-large-height: 50px !default; |
||||||
|
$u-button-normal-padding: 0 12px !default; |
||||||
|
$u-button-large-padding: 0 15px !default; |
||||||
|
$u-button-normal-font-size: 14px !default; |
||||||
|
$u-button-small-min-width: 60px !default; |
||||||
|
$u-button-small-height: 30px !default; |
||||||
|
$u-button-small-padding: 0px 8px !default; |
||||||
|
$u-button-mini-padding: 0px 8px !default; |
||||||
|
$u-button-small-font-size: 12px !default; |
||||||
|
$u-button-mini-height: 22px !default; |
||||||
|
$u-button-mini-font-size: 10px !default; |
||||||
|
$u-button-mini-min-width: 50px !default; |
||||||
|
$u-button-disabled-opacity: 0.5 !default; |
||||||
|
$u-button-info-color: #323233 !default; |
||||||
|
$u-button-info-background-color: #fff !default; |
||||||
|
$u-button-info-border-color: #ebedf0 !default; |
||||||
|
$u-button-info-border-width: 1px !default; |
||||||
|
$u-button-info-border-style: solid !default; |
||||||
|
$u-button-success-color: #fff !default; |
||||||
|
$u-button-success-background-color: $u-success !default; |
||||||
|
$u-button-success-border-color: $u-button-success-background-color !default; |
||||||
|
$u-button-success-border-width: 1px !default; |
||||||
|
$u-button-success-border-style: solid !default; |
||||||
|
$u-button-primary-color: #fff !default; |
||||||
|
$u-button-primary-background-color: $u-primary !default; |
||||||
|
$u-button-primary-border-color: $u-button-primary-background-color !default; |
||||||
|
$u-button-primary-border-width: 1px !default; |
||||||
|
$u-button-primary-border-style: solid !default; |
||||||
|
$u-button-error-color: #fff !default; |
||||||
|
$u-button-error-background-color: $u-error !default; |
||||||
|
$u-button-error-border-color: $u-button-error-background-color !default; |
||||||
|
$u-button-error-border-width: 1px !default; |
||||||
|
$u-button-error-border-style: solid !default; |
||||||
|
$u-button-warning-color: #fff !default; |
||||||
|
$u-button-warning-background-color: $u-warning !default; |
||||||
|
$u-button-warning-border-color: $u-button-warning-background-color !default; |
||||||
|
$u-button-warning-border-width: 1px !default; |
||||||
|
$u-button-warning-border-style: solid !default; |
||||||
|
$u-button-block-width: 100% !default; |
||||||
|
$u-button-circle-border-top-right-radius: 100px !default; |
||||||
|
$u-button-circle-border-top-left-radius: 100px !default; |
||||||
|
$u-button-circle-border-bottom-left-radius: 100px !default; |
||||||
|
$u-button-circle-border-bottom-right-radius: 100px !default; |
||||||
|
$u-button-square-border-top-right-radius: 3px !default; |
||||||
|
$u-button-square-border-top-left-radius: 3px !default; |
||||||
|
$u-button-square-border-bottom-left-radius: 3px !default; |
||||||
|
$u-button-square-border-bottom-right-radius: 3px !default; |
||||||
|
$u-button-icon-min-width: 1em !default; |
||||||
|
$u-button-plain-background-color: #fff !default; |
||||||
|
$u-button-hairline-border-width: 0.5px !default; |
||||||
|
|
||||||
|
.u-button { |
||||||
|
height: $u-button-u-button-height; |
||||||
|
position: relative; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
@include flex; |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
box-sizing: border-box; |
||||||
|
/* #endif */ |
||||||
|
flex-direction: row; |
||||||
|
|
||||||
|
&__text { |
||||||
|
font-size: $u-button-text-font-size; |
||||||
|
} |
||||||
|
|
||||||
|
&__loading-text { |
||||||
|
font-size: $u-button-loading-text-font-size; |
||||||
|
margin-left: $u-button-loading-text-margin-left; |
||||||
|
} |
||||||
|
|
||||||
|
&--large { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
width: $u-button-large-width; |
||||||
|
/* #endif */ |
||||||
|
height: $u-button-large-height; |
||||||
|
padding: $u-button-large-padding; |
||||||
|
} |
||||||
|
|
||||||
|
&--normal { |
||||||
|
padding: $u-button-normal-padding; |
||||||
|
font-size: $u-button-normal-font-size; |
||||||
|
} |
||||||
|
|
||||||
|
&--small { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
min-width: $u-button-small-min-width; |
||||||
|
/* #endif */ |
||||||
|
height: $u-button-small-height; |
||||||
|
padding: $u-button-small-padding; |
||||||
|
font-size: $u-button-small-font-size; |
||||||
|
} |
||||||
|
|
||||||
|
&--mini { |
||||||
|
height: $u-button-mini-height; |
||||||
|
font-size: $u-button-mini-font-size; |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
min-width: $u-button-mini-min-width; |
||||||
|
/* #endif */ |
||||||
|
padding: $u-button-mini-padding; |
||||||
|
} |
||||||
|
|
||||||
|
&--disabled { |
||||||
|
opacity: $u-button-disabled-opacity; |
||||||
|
} |
||||||
|
|
||||||
|
&--info { |
||||||
|
color: $u-button-info-color; |
||||||
|
background-color: $u-button-info-background-color; |
||||||
|
border-color: $u-button-info-border-color; |
||||||
|
border-width: $u-button-info-border-width; |
||||||
|
border-style: $u-button-info-border-style; |
||||||
|
} |
||||||
|
|
||||||
|
&--success { |
||||||
|
color: $u-button-success-color; |
||||||
|
background-color: $u-button-success-background-color; |
||||||
|
border-color: $u-button-success-border-color; |
||||||
|
border-width: $u-button-success-border-width; |
||||||
|
border-style: $u-button-success-border-style; |
||||||
|
} |
||||||
|
|
||||||
|
&--primary { |
||||||
|
color: $u-button-primary-color; |
||||||
|
background-color: $u-button-primary-background-color; |
||||||
|
border-color: $u-button-primary-border-color; |
||||||
|
border-width: $u-button-primary-border-width; |
||||||
|
border-style: $u-button-primary-border-style; |
||||||
|
} |
||||||
|
|
||||||
|
&--error { |
||||||
|
color: $u-button-error-color; |
||||||
|
background-color: $u-button-error-background-color; |
||||||
|
border-color: $u-button-error-border-color; |
||||||
|
border-width: $u-button-error-border-width; |
||||||
|
border-style: $u-button-error-border-style; |
||||||
|
} |
||||||
|
|
||||||
|
&--warning { |
||||||
|
color: $u-button-warning-color; |
||||||
|
background-color: $u-button-warning-background-color; |
||||||
|
border-color: $u-button-warning-border-color; |
||||||
|
border-width: $u-button-warning-border-width; |
||||||
|
border-style: $u-button-warning-border-style; |
||||||
|
} |
||||||
|
|
||||||
|
&--block { |
||||||
|
@include flex; |
||||||
|
width: $u-button-block-width; |
||||||
|
} |
||||||
|
|
||||||
|
&--circle { |
||||||
|
border-top-right-radius: $u-button-circle-border-top-right-radius; |
||||||
|
border-top-left-radius: $u-button-circle-border-top-left-radius; |
||||||
|
border-bottom-left-radius: $u-button-circle-border-bottom-left-radius; |
||||||
|
border-bottom-right-radius: $u-button-circle-border-bottom-right-radius; |
||||||
|
} |
||||||
|
|
||||||
|
&--square { |
||||||
|
border-bottom-left-radius: $u-button-square-border-top-right-radius; |
||||||
|
border-bottom-right-radius: $u-button-square-border-top-left-radius; |
||||||
|
border-top-left-radius: $u-button-square-border-bottom-left-radius; |
||||||
|
border-top-right-radius: $u-button-square-border-bottom-right-radius; |
||||||
|
} |
||||||
|
|
||||||
|
&__icon { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
min-width: $u-button-icon-min-width; |
||||||
|
line-height: inherit !important; |
||||||
|
vertical-align: top; |
||||||
|
/* #endif */ |
||||||
|
} |
||||||
|
|
||||||
|
&--plain { |
||||||
|
background-color: $u-button-plain-background-color; |
||||||
|
} |
||||||
|
|
||||||
|
&--hairline { |
||||||
|
border-width: $u-button-hairline-border-width !important; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
// nvue下hover-class无效 |
||||||
|
$u-button-before-top:50% !default; |
||||||
|
$u-button-before-left:50% !default; |
||||||
|
$u-button-before-width:100% !default; |
||||||
|
$u-button-before-height:100% !default; |
||||||
|
$u-button-before-transform:translate(-50%, -50%) !default; |
||||||
|
$u-button-before-opacity:0 !default; |
||||||
|
$u-button-before-background-color:#000 !default; |
||||||
|
$u-button-before-border-color:#000 !default; |
||||||
|
$u-button-active-before-opacity:.15 !default; |
||||||
|
$u-button-icon-margin-left:4px !default; |
||||||
|
$u-button-plain-u-button-info-color:$u-info; |
||||||
|
$u-button-plain-u-button-success-color:$u-success; |
||||||
|
$u-button-plain-u-button-error-color:$u-error; |
||||||
|
$u-button-plain-u-button-warning-color:$u-error; |
||||||
|
|
||||||
|
.u-button { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
&__text { |
||||||
|
white-space: nowrap; |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
|
||||||
|
&:before { |
||||||
|
position: absolute; |
||||||
|
top:$u-button-before-top; |
||||||
|
left:$u-button-before-left; |
||||||
|
width:$u-button-before-width; |
||||||
|
height:$u-button-before-height; |
||||||
|
border: inherit; |
||||||
|
border-radius: inherit; |
||||||
|
transform:$u-button-before-transform; |
||||||
|
opacity:$u-button-before-opacity; |
||||||
|
content: " "; |
||||||
|
background-color:$u-button-before-background-color; |
||||||
|
border-color:$u-button-before-border-color; |
||||||
|
} |
||||||
|
|
||||||
|
&--active { |
||||||
|
&:before { |
||||||
|
opacity: .15 |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__icon+&__text:not(:empty), |
||||||
|
&__loading-text { |
||||||
|
margin-left:$u-button-icon-margin-left; |
||||||
|
} |
||||||
|
|
||||||
|
&--plain { |
||||||
|
&.u-button--primary { |
||||||
|
color: $u-primary; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&--plain { |
||||||
|
&.u-button--info { |
||||||
|
color:$u-button-plain-u-button-info-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&--plain { |
||||||
|
&.u-button--success { |
||||||
|
color:$u-button-plain-u-button-success-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&--plain { |
||||||
|
&.u-button--error { |
||||||
|
color:$u-button-plain-u-button-error-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&--plain { |
||||||
|
&.u-button--warning { |
||||||
|
color:$u-button-plain-u-button-warning-color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
<template> |
||||||
|
<view class="u-calendar-header u-border-bottom"> |
||||||
|
<text |
||||||
|
class="u-calendar-header__title" |
||||||
|
v-if="showTitle" |
||||||
|
>{{ title }}</text> |
||||||
|
<text |
||||||
|
class="u-calendar-header__subtitle" |
||||||
|
v-if="showSubtitle" |
||||||
|
>{{ subtitle }}</text> |
||||||
|
<view class="u-calendar-header__weekdays"> |
||||||
|
<text class="u-calendar-header__weekdays__weekday">一</text> |
||||||
|
<text class="u-calendar-header__weekdays__weekday">二</text> |
||||||
|
<text class="u-calendar-header__weekdays__weekday">三</text> |
||||||
|
<text class="u-calendar-header__weekdays__weekday">四</text> |
||||||
|
<text class="u-calendar-header__weekdays__weekday">五</text> |
||||||
|
<text class="u-calendar-header__weekdays__weekday">六</text> |
||||||
|
<text class="u-calendar-header__weekdays__weekday">日</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'u-calendar-header', |
||||||
|
mixins: [uni.$u.mpMixin, uni.$u.mixin], |
||||||
|
props: { |
||||||
|
// 标题 |
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 副标题 |
||||||
|
subtitle: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 是否显示标题 |
||||||
|
showTitle: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
// 是否显示副标题 |
||||||
|
showSubtitle: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
name() { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "../../libs/css/components.scss"; |
||||||
|
|
||||||
|
.u-calendar-header { |
||||||
|
padding-bottom: 4px; |
||||||
|
|
||||||
|
&__title { |
||||||
|
font-size: 16px; |
||||||
|
color: $u-main-color; |
||||||
|
text-align: center; |
||||||
|
height: 42px; |
||||||
|
line-height: 42px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
&__subtitle { |
||||||
|
font-size: 14px; |
||||||
|
color: $u-main-color; |
||||||
|
height: 40px; |
||||||
|
text-align: center; |
||||||
|
line-height: 40px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
&__weekdays { |
||||||
|
@include flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
&__weekday { |
||||||
|
font-size: 13px; |
||||||
|
color: $u-main-color; |
||||||
|
line-height: 30px; |
||||||
|
flex: 1; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,579 @@ |
|||||||
|
<template> |
||||||
|
<view class="u-calendar-month-wrapper" ref="u-calendar-month-wrapper"> |
||||||
|
<view v-for="(item, index) in months" :key="index" :class="[`u-calendar-month-${index}`]" |
||||||
|
:ref="`u-calendar-month-${index}`" :id="`month-${index}`"> |
||||||
|
<text v-if="index !== 0" class="u-calendar-month__title">{{ item.year }}年{{ item.month }}月</text> |
||||||
|
<view class="u-calendar-month__days"> |
||||||
|
<view v-if="showMark" class="u-calendar-month__days__month-mark-wrapper"> |
||||||
|
<text class="u-calendar-month__days__month-mark-wrapper__text">{{ item.month }}</text> |
||||||
|
</view> |
||||||
|
<view class="u-calendar-month__days__day" v-for="(item1, index1) in item.date" :key="index1" |
||||||
|
:style="[dayStyle(index, index1, item1)]" @tap="clickHandler(index, index1, item1)" |
||||||
|
:class="[item1.selected && 'u-calendar-month__days__day__select--selected']"> |
||||||
|
<view class="u-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]"> |
||||||
|
<text class="u-calendar-month__days__day__select__info" |
||||||
|
:class="[item1.disabled && 'u-calendar-month__days__day__select__info--disabled']" |
||||||
|
:style="[textStyle(item1)]">{{ item1.day }}</text> |
||||||
|
<text v-if="getBottomInfo(index, index1, item1)" |
||||||
|
class="u-calendar-month__days__day__select__buttom-info" |
||||||
|
:class="[item1.disabled && 'u-calendar-month__days__day__select__buttom-info--disabled']" |
||||||
|
:style="[textStyle(item1)]">{{ getBottomInfo(index, index1, item1) }}</text> |
||||||
|
<text v-if="item1.dot" class="u-calendar-month__days__day__select__dot"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
// #ifdef APP-NVUE |
||||||
|
// 由于nvue不支持百分比单位，需要查询宽度来计算每个日期的宽度 |
||||||
|
const dom = uni.requireNativePlugin('dom') |
||||||
|
// #endif |
||||||
|
import dayjs from '../../libs/util/dayjs.js'; |
||||||
|
export default { |
||||||
|
name: 'u-calendar-month', |
||||||
|
mixins: [uni.$u.mpMixin, uni.$u.mixin], |
||||||
|
props: { |
||||||
|
// 是否显示月份背景色 |
||||||
|
showMark: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
// 主题色，对底部按钮和选中日期有效 |
||||||
|
color: { |
||||||
|
type: String, |
||||||
|
default: '#3c9cff' |
||||||
|
}, |
||||||
|
// 月份数据 |
||||||
|
months: { |
||||||
|
type: Array, |
||||||
|
default: () => [] |
||||||
|
}, |
||||||
|
// 日期选择类型 |
||||||
|
mode: { |
||||||
|
type: String, |
||||||
|
default: 'single' |
||||||
|
}, |
||||||
|
// 日期行高 |
||||||
|
rowHeight: { |
||||||
|
type: [String, Number], |
||||||
|
default: 58 |
||||||
|
}, |
||||||
|
// mode=multiple时，最多可选多少个日期 |
||||||
|
maxCount: { |
||||||
|
type: [String, Number], |
||||||
|
default: Infinity |
||||||
|
}, |
||||||
|
// mode=range时，第一个日期底部的提示文字 |
||||||
|
startText: { |
||||||
|
type: String, |
||||||
|
default: '开始' |
||||||
|
}, |
||||||
|
// mode=range时，最后一个日期底部的提示文字 |
||||||
|
endText: { |
||||||
|
type: String, |
||||||
|
default: '结束' |
||||||
|
}, |
||||||
|
// 默认选中的日期，mode为multiple或range是必须为数组格式 |
||||||
|
defaultDate: { |
||||||
|
type: [Array, String, Date], |
||||||
|
default: null |
||||||
|
}, |
||||||
|
// 最小的可选日期 |
||||||
|
minDate: { |
||||||
|
type: [String, Number], |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
// 最大可选日期 |
||||||
|
maxDate: { |
||||||
|
type: [String, Number], |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
// 如果没有设置maxDate，则往后推多少个月 |
||||||
|
maxMonth: { |
||||||
|
type: [String, Number], |
||||||
|
default: 2 |
||||||
|
}, |
||||||
|
// 是否为只读状态，只读状态下禁止选择日期 |
||||||
|
readonly: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.calendar.readonly |
||||||
|
}, |
||||||
|
// 日期区间最多可选天数，默认无限制，mode = range时有效 |
||||||
|
maxRange: { |
||||||
|
type: [Number, String], |
||||||
|
default: Infinity |
||||||
|
}, |
||||||
|
// 范围选择超过最多可选天数时的提示文案，mode = range时有效 |
||||||
|
rangePrompt: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
// 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 |
||||||
|
showRangePrompt: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
// 是否允许日期范围的起止时间为同一天，mode = range时有效 |
||||||
|
allowSameDay: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 每个日期的宽度 |
||||||
|
width: 0, |
||||||
|
// 当前选中的日期item |
||||||
|
item: {}, |
||||||
|
selected: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
selectedChange: { |
||||||
|
immediate: true, |
||||||
|
handler(n) { |
||||||
|
this.setDefaultDate() |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 多个条件的变化，会引起选中日期的变化，这里统一管理监听 |
||||||
|
selectedChange() { |
||||||
|
return [this.minDate, this.maxDate, this.defaultDate] |
||||||
|
}, |
||||||
|
dayStyle(index1, index2, item) { |
||||||
|
return (index1, index2, item) => { |
||||||
|
const style = {} |
||||||
|
let week = item.week |
||||||
|
// 不进行四舍五入的形式保留2位小数 |
||||||
|
const dayWidth = Number(parseFloat(this.width / 7).toFixed(3).slice(0, -1)) |
||||||
|
// 得出每个日期的宽度 |
||||||
|
// #ifdef APP-NVUE |
||||||
|
style.width = uni.$u.addUnit(dayWidth) |
||||||
|
// #endif |
||||||
|
style.height = uni.$u.addUnit(this.rowHeight) |
||||||
|
if (index2 === 0) { |
||||||
|
// 获取当前为星期几，如果为0，则为星期天，减一为每月第一天时，需要向左偏移的item个数 |
||||||
|
week = (week === 0 ? 7 : week) - 1 |
||||||
|
style.marginLeft = uni.$u.addUnit(week * dayWidth) |
||||||
|
} |
||||||
|
if (this.mode === 'range') { |
||||||
|
// 之所以需要这么写，是因为DCloud公司的iOS客户端的开发者能力有限导致的bug |
||||||
|
style.paddingLeft = 0 |
||||||
|
style.paddingRight = 0 |
||||||
|
style.paddingBottom = 0 |
||||||
|
style.paddingTop = 0 |
||||||
|
} |
||||||
|
return style |
||||||
|
} |
||||||
|
}, |
||||||
|
daySelectStyle() { |
||||||
|
return (index1, index2, item) => { |
||||||
|
let date = dayjs(item.date).format("YYYY-MM-DD"), |
||||||
|
style = {} |
||||||
|
// 判断date是否在selected数组中，因为月份可能会需要补0，所以使用dateSame判断，而不用数组的includes判断 |
||||||
|
if (this.selected.some(item => this.dateSame(item, date))) { |
||||||
|
style.backgroundColor = this.color |
||||||
|
} |
||||||
|
if (this.mode === 'single') { |
||||||
|
if (date === this.selected[0]) { |
||||||
|
// 因为需要对nvue的兼容，只能这么写，无法缩写，也无法通过类名控制等等 |
||||||
|
style.borderTopLeftRadius = '3px' |
||||||
|
style.borderBottomLeftRadius = '3px' |
||||||
|
style.borderTopRightRadius = '3px' |
||||||
|
style.borderBottomRightRadius = '3px' |
||||||
|
} |
||||||
|
} else if (this.mode === 'range') { |
||||||
|
if (this.selected.length >= 2) { |
||||||
|
const len = this.selected.length - 1 |
||||||
|
// 第一个日期设置左上角和左下角的圆角 |
||||||
|
if (this.dateSame(date, this.selected[0])) { |
||||||
|
style.borderTopLeftRadius = '3px' |
||||||
|
style.borderBottomLeftRadius = '3px' |
||||||
|
} |
||||||
|
// 最后一个日期设置右上角和右下角的圆角 |
||||||
|
if (this.dateSame(date, this.selected[len])) { |
||||||
|
style.borderTopRightRadius = '3px' |
||||||
|
style.borderBottomRightRadius = '3px' |
||||||
|
} |
||||||
|
// 处于第一和最后一个之间的日期，背景色设置为浅色，通过将对应颜色进行等分，再取其尾部的颜色值 |
||||||
|
if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this |
||||||
|
.selected[len]))) { |
||||||
|
style.backgroundColor = uni.$u.colorGradient(this.color, '#ffffff', 100)[90] |
||||||
|
// 增加一个透明度，让范围区间的背景色也能看到底部的mark水印字符 |
||||||
|
style.opacity = 0.7 |
||||||
|
} |
||||||
|
} else if (this.selected.length === 1) { |
||||||
|
// 之所以需要这么写，是因为DCloud公司的iOS客户端的开发者能力有限导致的bug |
||||||
|
// 进行还原操作，否则在nvue的iOS，uni-app有bug，会导致诡异的表现 |
||||||
|
style.borderTopLeftRadius = '3px' |
||||||
|
style.borderBottomLeftRadius = '3px' |
||||||
|
} |
||||||
|
} else { |
||||||
|
if (this.selected.some(item => this.dateSame(item, date))) { |
||||||
|
style.borderTopLeftRadius = '3px' |
||||||
|
style.borderBottomLeftRadius = '3px' |
||||||
|
style.borderTopRightRadius = '3px' |
||||||
|
style.borderBottomRightRadius = '3px' |
||||||
|
} |
||||||
|
} |
||||||
|
return style |
||||||
|
} |
||||||
|
}, |
||||||
|
// 某个日期是否被选中 |
||||||
|
textStyle() { |
||||||
|
return (item) => { |
||||||
|
const date = dayjs(item.date).format("YYYY-MM-DD"), |
||||||
|
style = {} |
||||||
|
// 选中的日期，提示文字设置白色 |
||||||
|
if (this.selected.some(item => this.dateSame(item, date))) { |
||||||
|
style.color = '#ffffff' |
||||||
|
} |
||||||
|
if (this.mode === 'range') { |
||||||
|
const len = this.selected.length - 1 |
||||||
|
// 如果是范围选择模式，第一个和最后一个之间的日期，文字颜色设置为高亮的主题色 |
||||||
|
if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this |
||||||
|
.selected[len]))) { |
||||||
|
style.color = this.color |
||||||
|
} |
||||||
|
} |
||||||
|
return style |
||||||
|
} |
||||||
|
}, |
||||||
|
// 获取底部的提示文字 |
||||||
|
getBottomInfo() { |
||||||
|
return (index1, index2, item) => { |
||||||
|
const date = dayjs(item.date).format("YYYY-MM-DD") |
||||||
|
const bottomInfo = item.bottomInfo |
||||||
|
// 当为日期范围模式时，且选择的日期个数大于0时 |
||||||
|
if (this.mode === 'range' && this.selected.length > 0) { |
||||||
|
if (this.selected.length === 1) { |
||||||
|
// 选择了一个日期时，如果当前日期为数组中的第一个日期，则显示底部文字为“开始” |
||||||
|
if (this.dateSame(date, this.selected[0])) return this.startText |
||||||
|
else return bottomInfo |
||||||
|
} else { |
||||||
|
const len = this.selected.length - 1 |
||||||
|
// 如果数组中的日期大于2个时，第一个和最后一个显示为开始和结束日期 |
||||||
|
if (this.dateSame(date, this.selected[0]) && this.dateSame(date, this.selected[1]) && |
||||||
|
len === 1) { |
||||||
|
// 如果长度为2，且第一个等于第二个日期，则提示语放在同一个item中 |
||||||
|
return `${this.startText}/${this.endText}` |
||||||
|
} else if (this.dateSame(date, this.selected[0])) { |
||||||
|
return this.startText |
||||||
|
} else if (this.dateSame(date, this.selected[len])) { |
||||||
|
return this.endText |
||||||
|
} else { |
||||||
|
return bottomInfo |
||||||
|
} |
||||||
|
} |
||||||
|
} else { |
||||||
|
return bottomInfo |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.init() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
init() { |
||||||
|
// 初始化默认选中 |
||||||
|
this.$emit('monthSelected', this.selected) |
||||||
|
this.$nextTick(() => { |
||||||
|
// 这里需要另一个延时，因为获取宽度后，会进行月份数据渲染，只有渲染完成之后，才有真正的高度 |
||||||
|
// 因为nvue下，$nextTick并不是100%可靠的 |
||||||
|
uni.$u.sleep(10).then(() => { |
||||||
|
this.getWrapperWidth() |
||||||
|
this.getMonthRect() |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 判断两个日期是否相等 |
||||||
|
dateSame(date1, date2) { |
||||||
|
return dayjs(date1).isSame(dayjs(date2)) |
||||||
|
}, |
||||||
|
// 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度 |
||||||
|
getWrapperWidth() { |
||||||
|
// #ifdef APP-NVUE |
||||||
|
dom.getComponentRect(this.$refs['u-calendar-month-wrapper'], res => { |
||||||
|
this.width = res.size.width |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
// #ifndef APP-NVUE |
||||||
|
this.$uGetRect('.u-calendar-month-wrapper').then(size => { |
||||||
|
this.width = size.width |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
}, |
||||||
|
getMonthRect() { |
||||||
|
// 获取每个月份数据的尺寸，用于父组件在scroll-view滚动事件中，监听当前滚动到了第几个月份 |
||||||
|
const promiseAllArr = this.months.map((item, index) => this.getMonthRectByPromise( |
||||||
|
`u-calendar-month-${index}`)) |
||||||
|
// 一次性返回 |
||||||
|
Promise.all(promiseAllArr).then( |
||||||
|
sizes => { |
||||||
|
let height = 1 |
||||||
|
const topArr = [] |
||||||
|
for (let i = 0; i < this.months.length; i++) { |
||||||
|
// 添加到months数组中，供scroll-view滚动事件中，判断当前滚动到哪个月份 |
||||||
|
topArr[i] = height |
||||||
|
height += sizes[i].height |
||||||
|
} |
||||||
|
// 由于微信下，无法通过this.months[i].top的形式(引用类型)去修改父组件的month的top值，所以使用事件形式对外发出 |
||||||
|
this.$emit('updateMonthTop', topArr) |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 获取每个月份区域的尺寸 |
||||||
|
getMonthRectByPromise(el) { |
||||||
|
// #ifndef APP-NVUE |
||||||
|
// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html |
||||||
|
// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同 |
||||||
|
return new Promise(resolve => { |
||||||
|
this.$uGetRect(`.${el}`).then(size => { |
||||||
|
resolve(size) |
||||||
|
}) |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
|
||||||
|
// #ifdef APP-NVUE |
||||||
|
// nvue下，使用dom模块查询元素高度 |
||||||
|
// 返回一个promise，让调用此方法的主体能使用then回调 |
||||||
|
return new Promise(resolve => { |
||||||
|
dom.getComponentRect(this.$refs[el][0], res => { |
||||||
|
resolve(res.size) |
||||||
|
}) |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
}, |
||||||
|
// 点击某一个日期 |
||||||
|
clickHandler(index1, index2, item) { |
||||||
|
if (this.readonly) { |
||||||
|
return; |
||||||
|
} |
||||||
|
this.item = item |
||||||
|
const date = dayjs(item.date).format("YYYY-MM-DD") |
||||||
|
if (item.disabled) return |
||||||
|
// 对上一次选择的日期数组进行深度克隆 |
||||||
|
let selected = uni.$u.deepClone(this.selected) |
||||||
|
if (this.mode === 'single') { |
||||||
|
// 单选情况下，让数组中的元素为当前点击的日期 |
||||||
|
selected = [date] |
||||||
|
} else if (this.mode === 'multiple') { |
||||||
|
if (selected.some(item => this.dateSame(item, date))) { |
||||||
|
// 如果点击的日期已在数组中，则进行移除操作，也就是达到反选的效果 |
||||||
|
const itemIndex = selected.findIndex(item => item === date) |
||||||
|
selected.splice(itemIndex, 1) |
||||||
|
} else { |
||||||
|
// 如果点击的日期不在数组中，且已有的长度小于总可选长度时，则添加到数组中去 |
||||||
|
if (selected.length < this.maxCount) selected.push(date) |
||||||
|
} |
||||||
|
} else { |
||||||
|
// 选择区间形式 |
||||||
|
if (selected.length === 0 || selected.length >= 2) { |
||||||
|
// 如果原来就为0或者大于2的长度，则当前点击的日期，就是开始日期 |
||||||
|
selected = [date] |
||||||
|
} else if (selected.length === 1) { |
||||||
|
// 如果已经选择了开始日期 |
||||||
|
const existsDate = selected[0] |
||||||
|
// 如果当前选择的日期小于上一次选择的日期，则当前的日期定为开始日期 |
||||||
|
if (dayjs(date).isBefore(existsDate)) { |
||||||
|
selected = [date] |
||||||
|
} else if (dayjs(date).isAfter(existsDate)) { |
||||||
|
// 当前日期减去最大可选的日期天数，如果大于起始时间，则进行提示 |
||||||
|
if(dayjs(dayjs(date).subtract(this.maxRange, 'day')).isAfter(dayjs(selected[0])) && this.showRangePrompt) { |
||||||
|
if(this.rangePrompt) { |
||||||
|
uni.$u.toast(this.rangePrompt) |
||||||
|
} else { |
||||||
|
uni.$u.toast(`选择天数不能超过 ${this.maxRange} 天`) |
||||||
|
} |
||||||
|
return |
||||||
|
} |
||||||
|
// 如果当前日期大于已有日期，将当前的添加到数组尾部 |
||||||
|
selected.push(date) |
||||||
|
const startDate = selected[0] |
||||||
|
const endDate = selected[1] |
||||||
|
const arr = [] |
||||||
|
let i = 0 |
||||||
|
do { |
||||||
|
// 将开始和结束日期之间的日期添加到数组中 |
||||||
|
arr.push(dayjs(startDate).add(i, 'day').format("YYYY-MM-DD")) |
||||||
|
i++ |
||||||
|
// 累加的日期小于结束日期时，继续下一次的循环 |
||||||
|
} while (dayjs(startDate).add(i, 'day').isBefore(dayjs(endDate))) |
||||||
|
// 为了一次性修改数组，避免computed中多次触发，这里才用arr变量一次性赋值的方式，同时将最后一个日期添加近来 |
||||||
|
arr.push(endDate) |
||||||
|
selected = arr |
||||||
|
} else { |
||||||
|
// 选择区间时，只有一个日期的情况下，且不允许选择起止为同一天的话，不允许选择自己 |
||||||
|
if (selected[0] === date && !this.allowSameDay) return |
||||||
|
selected.push(date) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
this.setSelected(selected) |
||||||
|
}, |
||||||
|
// 设置默认日期 |
||||||
|
setDefaultDate() { |
||||||
|
if (!this.defaultDate) { |
||||||
|
// 如果没有设置默认日期，则将当天日期设置为默认选中的日期 |
||||||
|
const selected = [dayjs().format("YYYY-MM-DD")] |
||||||
|
return this.setSelected(selected, false) |
||||||
|
} |
||||||
|
let defaultDate = [] |
||||||
|
const minDate = this.minDate || dayjs().format("YYYY-MM-DD") |
||||||
|
const maxDate = this.maxDate || dayjs(minDate).add(this.maxMonth - 1, 'month').format("YYYY-MM-DD") |
||||||
|
if (this.mode === 'single') { |
||||||
|
// 单选模式，可以是字符串或数组，Date对象等 |
||||||
|
if (!uni.$u.test.array(this.defaultDate)) { |
||||||
|
defaultDate = [dayjs(this.defaultDate).format("YYYY-MM-DD")] |
||||||
|
} else { |
||||||
|
defaultDate = [this.defaultDate[0]] |
||||||
|
} |
||||||
|
} else { |
||||||
|
// 如果为非数组，则不执行 |
||||||
|
if (!uni.$u.test.array(this.defaultDate)) return |
||||||
|
defaultDate = this.defaultDate |
||||||
|
} |
||||||
|
// 过滤用户传递的默认数组，取出只在可允许最大值与最小值之间的元素 |
||||||
|
defaultDate = defaultDate.filter(item => { |
||||||
|
return dayjs(item).isAfter(dayjs(minDate).subtract(1, 'day')) && dayjs(item).isBefore(dayjs( |
||||||
|
maxDate).add(1, 'day')) |
||||||
|
}) |
||||||
|
this.setSelected(defaultDate, false) |
||||||
|
}, |
||||||
|
setSelected(selected, event = true) { |
||||||
|
this.selected = selected |
||||||
|
event && this.$emit('monthSelected', this.selected) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "../../libs/css/components.scss"; |
||||||
|
|
||||||
|
.u-calendar-month-wrapper { |
||||||
|
margin-top: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.u-calendar-month { |
||||||
|
|
||||||
|
&__title { |
||||||
|
font-size: 14px; |
||||||
|
line-height: 42px; |
||||||
|
height: 42px; |
||||||
|
color: $u-main-color; |
||||||
|
text-align: center; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
&__days { |
||||||
|
position: relative; |
||||||
|
@include flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
&__month-mark-wrapper { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
@include flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
&__text { |
||||||
|
font-size: 155px; |
||||||
|
color: rgba(231, 232, 234, 0.83); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__day { |
||||||
|
@include flex; |
||||||
|
padding: 2px; |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
// vue下使用css进行宽度计算，因为某些安卓机会无法进行js获取父元素宽度进行计算得出，会有偏移 |
||||||
|
width: calc(100% / 7); |
||||||
|
box-sizing: border-box; |
||||||
|
/* #endif */ |
||||||
|
|
||||||
|
&__select { |
||||||
|
flex: 1; |
||||||
|
@include flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&__dot { |
||||||
|
width: 7px; |
||||||
|
height: 7px; |
||||||
|
border-radius: 100px; |
||||||
|
background-color: $u-error; |
||||||
|
position: absolute; |
||||||
|
top: 12px; |
||||||
|
right: 7px; |
||||||
|
} |
||||||
|
|
||||||
|
&__buttom-info { |
||||||
|
color: $u-content-color; |
||||||
|
text-align: center; |
||||||
|
position: absolute; |
||||||
|
bottom: 5px; |
||||||
|
font-size: 10px; |
||||||
|
text-align: center; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
|
||||||
|
&--selected { |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
&--disabled { |
||||||
|
color: #cacbcd; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__info { |
||||||
|
text-align: center; |
||||||
|
font-size: 16px; |
||||||
|
|
||||||
|
&--selected { |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
&--disabled { |
||||||
|
color: #cacbcd; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&--selected { |
||||||
|
background-color: $u-primary; |
||||||
|
@include flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
flex: 1; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
&--range-selected { |
||||||
|
opacity: 0.3; |
||||||
|
border-radius: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&--range-start-selected { |
||||||
|
border-top-right-radius: 0; |
||||||
|
border-bottom-right-radius: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&--range-end-selected { |
||||||
|
border-top-left-radius: 0; |
||||||
|
border-bottom-left-radius: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,144 @@ |
|||||||
|
export default { |
||||||
|
props: { |
||||||
|
// 日历顶部标题
|
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.calendar.title |
||||||
|
}, |
||||||
|
// 是否显示标题
|
||||||
|
showTitle: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.calendar.showTitle |
||||||
|
}, |
||||||
|
// 是否显示副标题
|
||||||
|
showSubtitle: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.calendar.showSubtitle |
||||||
|
}, |
||||||
|
// 日期类型选择，single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围
|
||||||
|
mode: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.calendar.mode |
||||||
|
}, |
||||||
|
// mode=range时，第一个日期底部的提示文字
|
||||||
|
startText: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.calendar.startText |
||||||
|
}, |
||||||
|
// mode=range时，最后一个日期底部的提示文字
|
||||||
|
endText: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.calendar.endText |
||||||
|
}, |
||||||
|
// 自定义列表
|
||||||
|
customList: { |
||||||
|
type: Array, |
||||||
|
default: uni.$u.props.calendar.customList |
||||||
|
}, |
||||||
|
// 主题色，对底部按钮和选中日期有效
|
||||||
|
color: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.calendar.color |
||||||
|
}, |
||||||
|
// 最小的可选日期
|
||||||
|
minDate: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.calendar.minDate |
||||||
|
}, |
||||||
|
// 最大可选日期
|
||||||
|
maxDate: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.calendar.maxDate |
||||||
|
}, |
||||||
|
// 默认选中的日期，mode为multiple或range是必须为数组格式
|
||||||
|
defaultDate: { |
||||||
|
type: [Array, String, Date, null], |
||||||
|
default: uni.$u.props.calendar.defaultDate |
||||||
|
}, |
||||||
|
// mode=multiple时，最多可选多少个日期
|
||||||
|
maxCount: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.calendar.maxCount |
||||||
|
}, |
||||||
|
// 日期行高
|
||||||
|
rowHeight: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.calendar.rowHeight |
||||||
|
}, |
||||||
|
// 日期格式化函数
|
||||||
|
formatter: { |
||||||
|
type: [Function, null], |
||||||
|
default: uni.$u.props.calendar.formatter |
||||||
|
}, |
||||||
|
// 是否显示农历
|
||||||
|
showLunar: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.calendar.showLunar |
||||||
|
}, |
||||||
|
// 是否显示月份背景色
|
||||||
|
showMark: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.calendar.showMark |
||||||
|
}, |
||||||
|
// 确定按钮的文字
|
||||||
|
confirmText: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.calendar.confirmText |
||||||
|
}, |
||||||
|
// 确认按钮处于禁用状态时的文字
|
||||||
|
confirmDisabledText: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.calendar.confirmDisabledText |
||||||
|
}, |
||||||
|
// 是否显示日历弹窗
|
||||||
|
show: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.calendar.show |
||||||
|
}, |
||||||
|
// 是否允许点击遮罩关闭日历
|
||||||
|
closeOnClickOverlay: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.calendar.closeOnClickOverlay |
||||||
|
}, |
||||||
|
// 是否为只读状态，只读状态下禁止选择日期
|
||||||
|
readonly: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.calendar.readonly |
||||||
|
}, |
||||||
|
// 是否展示确认按钮
|
||||||
|
showConfirm: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.calendar.showConfirm |
||||||
|
}, |
||||||
|
// 日期区间最多可选天数，默认无限制，mode = range时有效
|
||||||
|
maxRange: { |
||||||
|
type: [Number, String], |
||||||
|
default: uni.$u.props.calendar.maxRange |
||||||
|
}, |
||||||
|
// 范围选择超过最多可选天数时的提示文案，mode = range时有效
|
||||||
|
rangePrompt: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.calendar.rangePrompt |
||||||
|
}, |
||||||
|
// 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
|
||||||
|
showRangePrompt: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.calendar.showRangePrompt |
||||||
|
}, |
||||||
|
// 是否允许日期范围的起止时间为同一天，mode = range时有效
|
||||||
|
allowSameDay: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.calendar.allowSameDay |
||||||
|
}, |
||||||
|
// 圆角值
|
||||||
|
round: { |
||||||
|
type: [Boolean, String, Number], |
||||||
|
default: uni.$u.props.calendar.round |
||||||
|
}, |
||||||
|
// 最多展示月份数量
|
||||||
|
monthNum: { |
||||||
|
type: [Number, String], |
||||||
|
default: 3 |
||||||
|
}
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,383 @@ |
|||||||
|
<template> |
||||||
|
<u-popup |
||||||
|
:show="show" |
||||||
|
mode="bottom" |
||||||
|
closeable |
||||||
|
@close="close" |
||||||
|
:round="round" |
||||||
|
:closeOnClickOverlay="closeOnClickOverlay" |
||||||
|
> |
||||||
|
<view class="u-calendar"> |
||||||
|
<uHeader |
||||||
|
:title="title" |
||||||
|
:subtitle="subtitle" |
||||||
|
:showSubtitle="showSubtitle" |
||||||
|
:showTitle="showTitle" |
||||||
|
></uHeader> |
||||||
|
<scroll-view |
||||||
|
:style="{ |
||||||
|
height: $u.addUnit(listHeight) |
||||||
|
}" |
||||||
|
scroll-y |
||||||
|
@scroll="onScroll" |
||||||
|
:scroll-top="scrollTop" |
||||||
|
:scrollIntoView="scrollIntoView" |
||||||
|
> |
||||||
|
<uMonth |
||||||
|
:color="color" |
||||||
|
:rowHeight="rowHeight" |
||||||
|
:showMark="showMark" |
||||||
|
:months="months" |
||||||
|
:mode="mode" |
||||||
|
:maxCount="maxCount" |
||||||
|
:startText="startText" |
||||||
|
:endText="endText" |
||||||
|
:defaultDate="defaultDate" |
||||||
|
:minDate="innerMinDate" |
||||||
|
:maxDate="innerMaxDate" |
||||||
|
:maxMonth="monthNum" |
||||||
|
:readonly="readonly" |
||||||
|
:maxRange="maxRange" |
||||||
|
:rangePrompt="rangePrompt" |
||||||
|
:showRangePrompt="showRangePrompt" |
||||||
|
:allowSameDay="allowSameDay" |
||||||
|
ref="month" |
||||||
|
@monthSelected="monthSelected" |
||||||
|
@updateMonthTop="updateMonthTop" |
||||||
|
></uMonth> |
||||||
|
</scroll-view> |
||||||
|
<slot name="footer" v-if="showConfirm"> |
||||||
|
<view class="u-calendar__confirm"> |
||||||
|
<u-button |
||||||
|
shape="circle" |
||||||
|
:text=" |
||||||
|
buttonDisabled ? confirmDisabledText : confirmText |
||||||
|
" |
||||||
|
:color="color" |
||||||
|
@click="confirm" |
||||||
|
:disabled="buttonDisabled" |
||||||
|
></u-button> |
||||||
|
</view> |
||||||
|
</slot> |
||||||
|
</view> |
||||||
|
</u-popup> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import uHeader from './header.vue' |
||||||
|
import uMonth from './month.vue' |
||||||
|
import props from './props.js' |
||||||
|
import util from './util.js' |
||||||
|
import dayjs from '../../libs/util/dayjs.js' |
||||||
|
import Calendar from '../../libs/util/calendar.js' |
||||||
|
/** |
||||||
|
* Calendar 日历 |
||||||
|
* @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中. |
||||||
|
* @tutorial https://www.uviewui.com/components/calendar.html |
||||||
|
* |
||||||
|
* @property {String} title 标题内容 (默认 日期选择 ) |
||||||
|
* @property {Boolean} showTitle 是否显示标题 (默认 true ) |
||||||
|
* @property {Boolean} showSubtitle 是否显示副标题 (默认 true ) |
||||||
|
* @property {String} mode 日期类型选择 single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围 （ 默认 'single' ) |
||||||
|
* @property {String} startText mode=range时，第一个日期底部的提示文字 (默认 '开始' ) |
||||||
|
* @property {String} endText mode=range时，最后一个日期底部的提示文字 (默认 '结束' ) |
||||||
|
* @property {Array} customList 自定义列表 |
||||||
|
* @property {String} color 主题色，对底部按钮和选中日期有效 (默认 ‘#3c9cff' ) |
||||||
|
* @property {String | Number} minDate 最小的可选日期 (默认 0 ) |
||||||
|
* @property {String | Number} maxDate 最大可选日期 (默认 0 ) |
||||||
|
* @property {Array | String| Date} defaultDate 默认选中的日期，mode为multiple或range是必须为数组格式 |
||||||
|
* @property {String | Number} maxCount mode=multiple时，最多可选多少个日期 (默认 Number.MAX_SAFE_INTEGER ) |
||||||
|
* @property {String | Number} rowHeight 日期行高 (默认 56 ) |
||||||
|
* @property {Function} formatter 日期格式化函数 |
||||||
|
* @property {Boolean} showLunar 是否显示农历 (默认 false ) |
||||||
|
* @property {Boolean} showMark 是否显示月份背景色 (默认 true ) |
||||||
|
* @property {String} confirmText 确定按钮的文字 (默认 '确定' ) |
||||||
|
* @property {String} confirmDisabledText 确认按钮处于禁用状态时的文字 (默认 '确定' ) |
||||||
|
* @property {Boolean} show 是否显示日历弹窗 (默认 false ) |
||||||
|
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭日历 (默认 false ) |
||||||
|
* @property {Boolean} readonly 是否为只读状态，只读状态下禁止选择日期 (默认 false ) |
||||||
|
* @property {String | Number} maxRange 日期区间最多可选天数，默认无限制，mode = range时有效 |
||||||
|
* @property {String} rangePrompt 范围选择超过最多可选天数时的提示文案，mode = range时有效 |
||||||
|
* @property {Boolean} showRangePrompt 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 (默认 true ) |
||||||
|
* @property {Boolean} allowSameDay 是否允许日期范围的起止时间为同一天，mode = range时有效 (默认 false ) |
||||||
|
* @property {Number|String} round 圆角值，默认无圆角 (默认 0 ) |
||||||
|
* @property {Number|String} monthNum 最多展示的月份数量 (默认 3 ) |
||||||
|
* |
||||||
|
* @event {Function()} confirm 点击确定按钮时触发 选择日期相关的返回参数 |
||||||
|
* @event {Function()} close 日历关闭时触发 可定义页面关闭时的回调事件 |
||||||
|
* @example <u-calendar :defaultDate="defaultDateMultiple" :show="show" mode="multiple" @confirm="confirm"> |
||||||
|
</u-calendar> |
||||||
|
* */ |
||||||
|
export default { |
||||||
|
name: 'u-calendar', |
||||||
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
||||||
|
components: { |
||||||
|
uHeader, |
||||||
|
uMonth |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 需要显示的月份的数组 |
||||||
|
months: [], |
||||||
|
// 在月份滚动区域中，当前视图中月份的index索引 |
||||||
|
monthIndex: 0, |
||||||
|
// 月份滚动区域的高度 |
||||||
|
listHeight: 0, |
||||||
|
// month组件中选择的日期数组 |
||||||
|
selected: [], |
||||||
|
scrollIntoView: '', |
||||||
|
scrollTop:0, |
||||||
|
// 过滤处理方法 |
||||||
|
innerFormatter: (value) => value |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
selectedChange: { |
||||||
|
immediate: true, |
||||||
|
handler(n) { |
||||||
|
this.setMonth() |
||||||
|
} |
||||||
|
}, |
||||||
|
// 打开弹窗时，设置月份数据 |
||||||
|
show: { |
||||||
|
immediate: true, |
||||||
|
handler(n) { |
||||||
|
this.setMonth() |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 由于maxDate和minDate可以为字符串(2021-10-10)，或者数值(时间戳)，但是dayjs如果接受字符串形式的时间戳会有问题，这里进行处理 |
||||||
|
innerMaxDate() { |
||||||
|
return uni.$u.test.number(this.maxDate) |
||||||
|
? Number(this.maxDate) |
||||||
|
: this.maxDate |
||||||
|
}, |
||||||
|
innerMinDate() { |
||||||
|
return uni.$u.test.number(this.minDate) |
||||||
|
? Number(this.minDate) |
||||||
|
: this.minDate |
||||||
|
}, |
||||||
|
// 多个条件的变化，会引起选中日期的变化，这里统一管理监听 |
||||||
|
selectedChange() { |
||||||
|
return [this.innerMinDate, this.innerMaxDate, this.defaultDate] |
||||||
|
}, |
||||||
|
subtitle() { |
||||||
|
// 初始化时，this.months为空数组，所以需要特别判断处理 |
||||||
|
if (this.months.length) { |
||||||
|
return `${this.months[this.monthIndex].year}年${ |
||||||
|
this.months[this.monthIndex].month |
||||||
|
}月` |
||||||
|
} else { |
||||||
|
return '' |
||||||
|
} |
||||||
|
}, |
||||||
|
buttonDisabled() { |
||||||
|
// 如果为range类型，且选择的日期个数不足1个时，让底部的按钮出于disabled状态 |
||||||
|
if (this.mode === 'range') { |
||||||
|
if (this.selected.length <= 1) { |
||||||
|
return true |
||||||
|
} else { |
||||||
|
return false |
||||||
|
} |
||||||
|
} else { |
||||||
|
return false |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.start = Date.now() |
||||||
|
this.init() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用 |
||||||
|
setFormatter(e) { |
||||||
|
this.innerFormatter = e |
||||||
|
}, |
||||||
|
// month组件内部选择日期后，通过事件通知给父组件 |
||||||
|
monthSelected(e) { |
||||||
|
this.selected = e |
||||||
|
if (!this.showConfirm) { |
||||||
|
// 在不需要确认按钮的情况下，如果为单选，或者范围多选且已选长度大于2，则直接进行返还 |
||||||
|
if ( |
||||||
|
this.mode === 'multiple' || |
||||||
|
this.mode === 'single' || |
||||||
|
(this.mode === 'range' && this.selected.length >= 2) |
||||||
|
) { |
||||||
|
this.$emit('confirm', this.selected) |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
init() { |
||||||
|
// 校验maxDate，不能小于当前时间 |
||||||
|
if ( |
||||||
|
this.innerMaxDate && |
||||||
|
new Date(this.innerMaxDate).getTime() <= Date.now() |
||||||
|
) { |
||||||
|
return uni.$u.error('maxDate不能小于当前时间') |
||||||
|
} |
||||||
|
// 滚动区域的高度 |
||||||
|
this.listHeight = this.rowHeight * 5 + 30 |
||||||
|
this.setMonth() |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.$emit('close') |
||||||
|
}, |
||||||
|
// 点击确定按钮 |
||||||
|
confirm() { |
||||||
|
if (!this.buttonDisabled) { |
||||||
|
this.$emit('confirm', this.selected) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 获得两个日期之间的月份数 |
||||||
|
getMonths(minDate, maxDate) { |
||||||
|
const minYear = dayjs(minDate).year() |
||||||
|
const minMonth = dayjs(minDate).month() + 1 |
||||||
|
const maxYear = dayjs(maxDate).year() |
||||||
|
const maxMonth = dayjs(maxDate).month() + 1 |
||||||
|
return (maxYear - minYear) * 12 + (maxMonth - minMonth) + 1 |
||||||
|
}, |
||||||
|
// 设置月份数据 |
||||||
|
setMonth() { |
||||||
|
// 最小日期的毫秒数 |
||||||
|
const minDate = this.innerMinDate || dayjs().valueOf() |
||||||
|
// 如果没有指定最大日期，则往后推3个月 |
||||||
|
const maxDate = |
||||||
|
this.innerMaxDate || |
||||||
|
dayjs(minDate) |
||||||
|
.add(this.monthNum - 1, 'month') |
||||||
|
.valueOf() |
||||||
|
// 最大最小月份之间的共有多少个月份， |
||||||
|
const months = uni.$u.range( |
||||||
|
1, |
||||||
|
this.monthNum, |
||||||
|
this.getMonths(minDate, maxDate) |
||||||
|
) |
||||||
|
// 先清空数组 |
||||||
|
this.months = [] |
||||||
|
for (let i = 0; i < months; i++) { |
||||||
|
this.months.push({ |
||||||
|
date: new Array( |
||||||
|
dayjs(minDate).add(i, 'month').daysInMonth() |
||||||
|
) |
||||||
|
.fill(1) |
||||||
|
.map((item, index) => { |
||||||
|
// 日期，取值1-31 |
||||||
|
let day = index + 1 |
||||||
|
// 星期，0-6，0为周日 |
||||||
|
const week = dayjs(minDate) |
||||||
|
.add(i, 'month') |
||||||
|
.date(day) |
||||||
|
.day() |
||||||
|
const date = dayjs(minDate) |
||||||
|
.add(i, 'month') |
||||||
|
.date(day) |
||||||
|
.format('YYYY-MM-DD') |
||||||
|
let bottomInfo = '' |
||||||
|
if (this.showLunar) { |
||||||
|
// 将日期转为农历格式 |
||||||
|
const lunar = Calendar.solar2lunar( |
||||||
|
dayjs(date).year(), |
||||||
|
dayjs(date).month() + 1, |
||||||
|
dayjs(date).date() |
||||||
|
) |
||||||
|
bottomInfo = lunar.IDayCn |
||||||
|
} |
||||||
|
let config = { |
||||||
|
day, |
||||||
|
week, |
||||||
|
// 小于最小允许的日期，或者大于最大的日期，则设置为disabled状态 |
||||||
|
disabled: |
||||||
|
dayjs(date).isBefore( |
||||||
|
dayjs(minDate).format('YYYY-MM-DD') |
||||||
|
) || |
||||||
|
dayjs(date).isAfter( |
||||||
|
dayjs(maxDate).format('YYYY-MM-DD') |
||||||
|
), |
||||||
|
// 返回一个日期对象，供外部的formatter获取当前日期的年月日等信息，进行加工处理 |
||||||
|
date: new Date(date), |
||||||
|
bottomInfo, |
||||||
|
dot: false, |
||||||
|
month: |
||||||
|
dayjs(minDate).add(i, 'month').month() + 1 |
||||||
|
} |
||||||
|
const formatter = |
||||||
|
this.formatter || this.innerFormatter |
||||||
|
return formatter(config) |
||||||
|
}), |
||||||
|
// 当前所属的月份 |
||||||
|
month: dayjs(minDate).add(i, 'month').month() + 1, |
||||||
|
// 当前年份 |
||||||
|
year: dayjs(minDate).add(i, 'month').year() |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
// 滚动到默认设置的月份 |
||||||
|
scrollIntoDefaultMonth(selected) { |
||||||
|
// 查询默认日期在可选列表的下标 |
||||||
|
const _index = this.months.findIndex(({ |
||||||
|
year, |
||||||
|
month |
||||||
|
}) => { |
||||||
|
month = uni.$u.padZero(month) |
||||||
|
return `${year}-${month}` === selected |
||||||
|
}) |
||||||
|
if (_index !== -1) { |
||||||
|
// #ifndef MP-WEIXIN |
||||||
|
this.$nextTick(() => { |
||||||
|
this.scrollIntoView = `month-${_index}` |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
// #ifdef MP-WEIXIN |
||||||
|
this.scrollTop = this.months[_index].top || 0; |
||||||
|
// #endif |
||||||
|
} |
||||||
|
}, |
||||||
|
// scroll-view滚动监听 |
||||||
|
onScroll(event) { |
||||||
|
// 不允许小于0的滚动值，如果scroll-view到顶了，继续下拉，会出现负数值 |
||||||
|
const scrollTop = Math.max(0, event.detail.scrollTop) |
||||||
|
// 将当前滚动条数值，除以滚动区域的高度，可以得出当前滚动到了哪一个月份的索引 |
||||||
|
for (let i = 0; i < this.months.length; i++) { |
||||||
|
if (scrollTop >= (this.months[i].top || this.listHeight)) { |
||||||
|
this.monthIndex = i |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 更新月份的top值 |
||||||
|
updateMonthTop(topArr = []) { |
||||||
|
// 设置对应月份的top值，用于onScroll方法更新月份 |
||||||
|
topArr.map((item, index) => { |
||||||
|
this.months[index].top = item |
||||||
|
}) |
||||||
|
|
||||||
|
// 获取默认日期的下标 |
||||||
|
if (!this.defaultDate) { |
||||||
|
// 如果没有设置默认日期，则将当天日期设置为默认选中的日期 |
||||||
|
const selected = dayjs().format("YYYY-MM") |
||||||
|
this.scrollIntoDefaultMonth(selected) |
||||||
|
return |
||||||
|
} |
||||||
|
let selected = dayjs().format("YYYY-MM"); |
||||||
|
// 单选模式，可以是字符串或数组，Date对象等 |
||||||
|
if (!uni.$u.test.array(this.defaultDate)) { |
||||||
|
selected = dayjs(this.defaultDate).format("YYYY-MM") |
||||||
|
} else { |
||||||
|
selected = dayjs(this.defaultDate[0]).format("YYYY-MM"); |
||||||
|
} |
||||||
|
this.scrollIntoDefaultMonth(selected) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import '../../libs/css/components.scss'; |
||||||
|
|
||||||
|
.u-calendar { |
||||||
|
&__confirm { |
||||||
|
padding: 7px 18px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
export default { |
||||||
|
methods: { |
||||||
|
// 设置月份数据
|
||||||
|
setMonth() { |
||||||
|
// 月初是周几
|
||||||
|
const day = dayjs(this.date).date(1).day() |
||||||
|
const start = day == 0 ? 6 : day - 1 |
||||||
|
|
||||||
|
// 本月天数
|
||||||
|
const days = dayjs(this.date).endOf('month').format('D') |
||||||
|
|
||||||
|
// 上个月天数
|
||||||
|
const prevDays = dayjs(this.date).endOf('month').subtract(1, 'month').format('D') |
||||||
|
|
||||||
|
// 日期数据
|
||||||
|
const arr = [] |
||||||
|
// 清空表格
|
||||||
|
this.month = [] |
||||||
|
|
||||||
|
// 添加上月数据
|
||||||
|
arr.push( |
||||||
|
...new Array(start).fill(1).map((e, i) => { |
||||||
|
const day = prevDays - start + i + 1 |
||||||
|
|
||||||
|
return { |
||||||
|
value: day, |
||||||
|
disabled: true, |
||||||
|
date: dayjs(this.date).subtract(1, 'month').date(day).format('YYYY-MM-DD') |
||||||
|
} |
||||||
|
}) |
||||||
|
) |
||||||
|
|
||||||
|
// 添加本月数据
|
||||||
|
arr.push( |
||||||
|
...new Array(days - 0).fill(1).map((e, i) => { |
||||||
|
const day = i + 1 |
||||||
|
|
||||||
|
return { |
||||||
|
value: day, |
||||||
|
date: dayjs(this.date).date(day).format('YYYY-MM-DD') |
||||||
|
} |
||||||
|
}) |
||||||
|
) |
||||||
|
|
||||||
|
// 添加下个月
|
||||||
|
arr.push( |
||||||
|
...new Array(42 - days - start).fill(1).map((e, i) => { |
||||||
|
const day = i + 1 |
||||||
|
|
||||||
|
return { |
||||||
|
value: day, |
||||||
|
disabled: true, |
||||||
|
date: dayjs(this.date).add(1, 'month').date(day).format('YYYY-MM-DD') |
||||||
|
} |
||||||
|
}) |
||||||
|
) |
||||||
|
|
||||||
|
// 分割数组
|
||||||
|
for (let n = 0; n < arr.length; n += 7) { |
||||||
|
this.month.push( |
||||||
|
arr.slice(n, n + 7).map((e, i) => { |
||||||
|
e.index = i + n |
||||||
|
|
||||||
|
// 自定义信息
|
||||||
|
const custom = this.customList.find((c) => c.date == e.date) |
||||||
|
|
||||||
|
// 农历
|
||||||
|
if (this.lunar) { |
||||||
|
const { |
||||||
|
IDayCn, |
||||||
|
IMonthCn |
||||||
|
} = this.getLunar(e.date) |
||||||
|
e.lunar = IDayCn == '初一' ? IMonthCn : IDayCn |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
...e, |
||||||
|
...custom |
||||||
|
} |
||||||
|
}) |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue