vue 封装全局filter(过滤时间图片方法)详解

import Vue from 'vue'
import areaData from '@/assets/data/pcas-code'
import { fillZero, formatLargeNumber, formatTimeUntilNow, parseTime } from '@/utils/common'

// 阿里云oss图片缩放，将图片等比宽度缩放到200
Vue.filter('cdnImageResize200', function (url) {
	return `${url}?x-oss-process=image/resize,w_200`
})

// 阿里云oss图片缩放，将图片等比宽度缩放到400
Vue.filter('cdnImageResize400', function (url) {
	return `${url}?x-oss-process=image/resize,w_400`
})

// 阿里云oss图片缩放，将图片等比宽度缩放到600
Vue.filter('cdnImageResize600', function (url) {
	return `${url}?x-oss-process=image/resize,w_600`
})

// 转换价格展现方式
Vue.filter('formatPrice', function (stockKeepingUnits) {
	if (stockKeepingUnits.discountedPrice === 0) return '免费'
	if (stockKeepingUnits.discountedPrice !== 0) return `<span style="font-size:.75em">￥</span>${stockKeepingUnits.discountedPrice}`
	return '暂不售卖'
})

// 转换划线价格展现方式
Vue.filter('formatDeletePrice', function (stockKeepingUnits) {
	if (stockKeepingUnits.price === 0) return ''
	if (stockKeepingUnits.price !== 0) return `￥${stockKeepingUnits.price}`
	return ''
})

// 将时间分割到分钟 2021-01-01 12:12:12 ---> 2021-01-01 12:12
Vue.filter('timeFormatMinite', function (time) {
	if (time) {
		return timeFormatMinute(time)
	}
	return ''
})

const timeFormatMinute = (time) => {
	return time.substring(0, 16)
}

// 从地区代码提取出省份
Vue.filter('addressFiltersProvince', function (val) {
	if (val) {
		const code = val.toString().substring(0, 2)
		let province = ''
		areaData.forEach(item => {
			if (Number(code) === Number(item.code)) {
				province = item.name
			}
		})
		return province
	}
	return ''
})

// 将地区代码转为中文地区
Vue.filter('addressFilters', function (val) {
	if (val) {
		const code = val.toString().substring(0, 2)
		let province = ''
		areaData.forEach(item => {
			if (Number(code) === Number(item.code)) {
				province = item.name
				const citys = item.children
				const code = val.toString().substring(0, 4)
				citys.forEach(city => {
					if (Number(code) === Number(city.code)) {
						province += ' ' + city.name
						const areas = city.children
						const code = val.toString().substring(0, 6)
						areas.forEach(area => {
							if (Number(code) === Number(area.code)) {
								province += ' ' + area.name
								return province
							}
						})
						return province
					}
				})
				return province
			}
		})
		return province
	}
})

// 将秒转为时间
Vue.filter('secondsToTime', function (val) {
	val = parseInt(val)
	const hour = parseInt(val / 3600)
	const minute = parseInt(val % 3600 / 60)
	const second = parseInt(val % 60)
	if (val > 3600) {
		return `${hour}小时${minute}分${second}秒`
	} else if (val > 60) {
		return `${minute}分${second}秒`
	} else {
		return `${second}秒`
	}
})

// 不带中文的时间
Vue.filter('secondsToTimeSimple', function (val) {
	val = parseInt(val)
	const hour = fillZero(parseInt(val / 3600))
	const minute = fillZero(parseInt(val % 3600 / 60))
	const second = fillZero(parseInt(val % 60))
	if (val > 3600) {
		return `${hour}:${minute}:${second}`
	} else if (val > 60) {
		return `${minute}:${second}`
	} else {
		return `${minute}:${second}`
	}
})

Vue.filter('secondsFormatToHour', function (val) {
	if (!val || isNaN(val)) return 0
	const hour = (val / 3600).toFixed(1)
	return hour
})

// 不满两位补零
Vue.filter('padStart', function (val) {
	return fillZero(val)
})

// 将时间截止到月份
Vue.filter('timeSplitToMonth', function (time) {
	return parseTime(time, '{y}{m}')
})

// 将时间截止到日
Vue.filter('timeSplitToDate', function (time) {
	return parseTime(time, '{y}{m}{d}')
})

// 从0开始返回从A到Z的字符
Vue.filter('indexToLetter', function (index) {
	return String.fromCharCode(index + 65)
})

// 获取人气
Vue.filter('salesCount', function (detail) {
	if (!Array.isArray(detail.stockKeepingUnits)) {
		return 0
	} else {
		const soldCount = detail.stockKeepingUnits.reduce((pre, next, index, arr) => {
			pre += next.soldCount
			return pre
		}, 0)
		return soldCount
	}
})

// 格式化比较大的数
Vue.filter('formatLargeNumber', function (number) {
	return formatLargeNumber(number)
})

/**
 * 获取过去时间到现在的时间差，小于一小时显示分钟，超过一小时小于24小时，显示小时，超过一天，显示日期
 * @param {String} time 时间戳（精确到毫秒）或者时间（2020-01-02 12:12:12）
 */
Vue.filter('formatTimeUntilNow', function (time) {
	return formatTimeUntilNow(time)
})

Vue.filter('fillZero', function (number) {
	return fillZero(number)
})