封装调用的js方法

// 防止处理多次点击
function noMultipleClicks(methods, info) {
?? ?// methods是需要点击后需要执行的函数， info是点击需要传的参数
?? ?let that = this;
?? ?if (that.noClick) {
?? ??? ?// 第一次点击
?? ??? ?that.noClick = false;
?? ??? ?if (info && info !== '') {
?? ??? ??? ?// info是执行函数需要传的参数
?? ??? ??? ?methods(info);
?? ??? ?} else {
?? ??? ??? ?methods();
?? ??? ?}
?? ??? ?setTimeout(() => {
?? ??? ??? ?that.noClick = true;
?? ??? ?}, 5000)
?? ?} else {
?? ??? ?// 这里是重复点击的判断
?? ??? ?uni.showToast({
?? ??? ??? ?icon: "none",
?? ??? ??? ?title: "点击太频繁啦，请稍后再试~"
?? ??? ?})
?? ?}
}

// 预览图片
function viewImg(url) {
?? ?// console.log(url, 'sdfkj');
?? ?uni.previewImage({
?? ??? ?urls: [url],
?? ??? ?longPressActions: {
?? ??? ??? ?itemList: ['发送给朋友', '保存图片', '收藏'],
?? ??? ??? ?success: function(data) {
?? ??? ??? ??? ?console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
?? ??? ??? ?},
?? ??? ??? ?fail: function(err) {
?? ??? ??? ??? ?console.log(err.errMsg);
?? ??? ??? ?}
?? ??? ?}
?? ?});
}

// 隐藏中间的姓名,身份证或者手机号变成星星
// frontLen 保留开始的几个
// endLen ? 保留结束的几个
function nameIdcard(str, frontLen, endLen) {
?? ?if (str) {
?? ??? ?if (str.length < 3) {
?? ??? ??? ?var len = str.length - frontLen - 0;
?? ??? ??? ?var xing = '';
?? ??? ??? ?for (var i = 0; i < len; i++) {
?? ??? ??? ??? ?xing += '*';
?? ??? ??? ?}
?? ??? ??? ?return str.substring(0, frontLen) + xing + str.substring(str.length - 0);
?? ??? ?} else {
?? ??? ??? ?var len = str.length - frontLen - endLen;
?? ??? ??? ?var xing = '';
?? ??? ??? ?for (var i = 0; i < len; i++) {
?? ??? ??? ??? ?xing += '*';
?? ??? ??? ?}
?? ??? ??? ?return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
?? ??? ?}

?? ?}

}

// 倒计时的方法
function countdown(targetDate, callback) {
?? ?const timer = setInterval(() => {
?? ??? ?const now = new Date().getTime();
?? ??? ?const distance = targetDate - now;
?? ??? ?if (distance <= 0) {
?? ??? ??? ?clearInterval(timer);
?? ??? ??? ?if (callback) {
?? ??? ??? ??? ?callback({
?? ??? ??? ??? ??? ?hours: 0,
?? ??? ??? ??? ??? ?minutes: 0,
?? ??? ??? ??? ??? ?seconds: 0,
?? ??? ??? ??? ??? ?ended: true
?? ??? ??? ??? ?});
?? ??? ??? ?}
?? ??? ?} else {
?? ??? ??? ?const days = Math.floor(distance / (24 * 60 * 60 * 1000));
?? ??? ??? ?const hours = Math.floor((distance % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
?? ??? ??? ?const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
?? ??? ??? ?const seconds = Math.floor((distance % (1000 * 60)) / 1000);
?? ??? ??? ?if (callback) {
?? ??? ??? ??? ?callback({
?? ??? ??? ??? ??? ?days,
?? ??? ??? ??? ??? ?hours,
?? ??? ??? ??? ??? ?minutes,
?? ??? ??? ??? ??? ?seconds,
?? ??? ??? ??? ??? ?ended: false
?? ??? ??? ??? ?});
?? ??? ??? ?}
?? ??? ?}
?? ?}, 1000);
}

// 经纬度计算距离
function getDistance(lat1, lng1, lat2, lng2) {
?? ?lat1 = lat1 || 0;
?? ?lng1 = lng1 || 0;
?? ?lat2 = lat2 || 0;
?? ?lng2 = lng2 || 0;

?? ?var rad1 = lat1 * Math.PI / 180.0;
?? ?var rad2 = lat2 * Math.PI / 180.0;
?? ?var a = rad1 - rad2;
?? ?var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
?? ?var r = 6378137;
?? ?// 计算出来的是米数
?? ?var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math
?? ??? ?.pow(Math.sin(b / 2), 2)));

?? ?return distance;
}

// base64图片转本地路径
function base64ImgtoFile(base64, callback) {

?? ?const fsm = wx.getFileSystemManager();
?? ?const FILE_BASE_NAME = new Date().getTime(); //自定义文件名(这里以时间戳为文件名)
?? ?const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
?? ?if (!format) {
?? ??? ?return (new Error('ERROR_BASE64SRC_PARSE'));
?? ?}
?? ?const imageUrl = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.png`;
?? ?const buffer = wx.base64ToArrayBuffer(bodyData);
?? ?fsm.writeFile({
?? ??? ?filePath: imageUrl,
?? ??? ?data: buffer,
?? ??? ?encoding: "binary", //二进制流文件必须是 binary
?? ??? ?success() {
?? ??? ??? ?console.log(imageUrl, 'imageUr啥地方囧');
?? ??? ??? ?callback(imageUrl); //返出图片url
?? ??? ?},
?? ??? ?fail() {
?? ??? ??? ?return (new Error('ERROR_BASE64SRC_WRITE'));
?? ??? ?},
?? ?});
}

//导出
export default {
?? ?viewImg,
?? ?nameIdcard,
?? ?countdown,
?? ?getDistance,
?? ?base64ImgtoFile,

? ??noMultipleClicks,
}

防止用户点击多次? 节流的方法在页面上使用时

<view class="join"? @click="$noMultipleClicks(confirmd)">提交</view>?

data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?noClick: true,

? ? ? ? ? ? }

},

methods:{

????????confirmd() {

? ? ? ? ? ? ? ? // 如果请求报错 那么就设置为true? 按钮则可以再点击? 否则没过五秒再点击的话 会提示点击太频繁啦

? ? ? ? ? ? ? ?this.noClick = true //按钮可以继续提交

? ? ? ? }

}