uview-plus组件库全面升级更新，订单结算判断支付方式是否可用代码调整，公众号关注二维码修改
This commit is contained in:
@@ -3,9 +3,9 @@
|
||||
* @Description :
|
||||
* @version : 1.0
|
||||
* @Date : 2021-08-20 16:44:21
|
||||
* @LastAuthor : LQ
|
||||
* @lastTime : 2021-08-20 16:47:24
|
||||
* @FilePath : /u-view2.0/uview-ui/libs/config/props/album.js
|
||||
* @LastAuthor : jry
|
||||
* @lastTime : 2025-08-16 16:32:24
|
||||
* @FilePath : /uview-plus/libs/config/props/album.js
|
||||
*/
|
||||
export default {
|
||||
// album 组件
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
/*
|
||||
* @Author : jry
|
||||
* @Description :
|
||||
* @version : 3.0
|
||||
* @LastAuthor : jry
|
||||
* @lastTime : 2025-08-16 16:35:24
|
||||
* @FilePath : /uview-plus/components/u-album/props.js
|
||||
*/
|
||||
import { defineMixin } from '../../libs/vue'
|
||||
import defProps from '../../libs/config/props.js'
|
||||
|
||||
export const props = defineMixin({
|
||||
props: {
|
||||
// 图片地址，Array<String>|Array<Object>形式
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<view class="u-album">
|
||||
<!-- 相册行容器，每行显示 rowCount 个图片 -->
|
||||
<view
|
||||
class="u-album__row"
|
||||
ref="u-album__row"
|
||||
@@ -8,13 +9,15 @@
|
||||
:key="index"
|
||||
:style="{flexWrap: autoWrap ? 'wrap' : 'nowrap'}"
|
||||
>
|
||||
<!-- 图片包装容器 -->
|
||||
<view
|
||||
class="u-album__row__wrapper"
|
||||
v-for="(item, index1) in arr"
|
||||
:key="index1"
|
||||
:style="[imageStyle(index + 1, index1 + 1)]"
|
||||
@tap="previewFullImage ? onPreviewTap($event, getSrc(item)) : ''"
|
||||
@tap="onPreviewTap($event, getSrc(item))"
|
||||
>
|
||||
<!-- 图片显示 -->
|
||||
<image
|
||||
:src="getSrc(item)"
|
||||
:mode="
|
||||
@@ -32,6 +35,7 @@
|
||||
}
|
||||
]"
|
||||
></image>
|
||||
<!-- 超出最大显示数量时的更多提示 -->
|
||||
<view
|
||||
v-if="
|
||||
showMore &&
|
||||
@@ -64,7 +68,7 @@ import { mixin } from '../../libs/mixin/mixin';
|
||||
import { addUnit, sleep } from '../../libs/function/index';
|
||||
import test from '../../libs/function/test';
|
||||
// #ifdef APP-NVUE
|
||||
// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
|
||||
// 不支持百分比单位，这里需要通过dom查询组件的宽度
|
||||
const dom = uni.requireNativePlugin('dom')
|
||||
// #endif
|
||||
|
||||
@@ -108,14 +112,20 @@ export default {
|
||||
urls: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
// 当只有一张图片时，获取图片尺寸信息
|
||||
if (newVal.length === 1) {
|
||||
this.getImageRect()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
emits: ["albumWidth"],
|
||||
computed: {
|
||||
/**
|
||||
* 计算图片样式
|
||||
* @param {Number} index1 - 行索引
|
||||
* @param {Number} index2 - 列索引
|
||||
* @returns {Object} 图片样式对象
|
||||
*/
|
||||
imageStyle() {
|
||||
return (index1, index2) => {
|
||||
const { space, rowCount, multipleSize, urls } = this,
|
||||
@@ -139,11 +149,16 @@ export default {
|
||||
return style
|
||||
}
|
||||
},
|
||||
// 将数组划分为二维数组
|
||||
/**
|
||||
* 将图片地址数组划分为二维数组，用于按行显示
|
||||
* @returns {Array} 二维数组，每个子数组代表一行图片
|
||||
*/
|
||||
showUrls() {
|
||||
if (this.autoWrap) {
|
||||
// 自动换行模式下，所有图片放在一行中显示
|
||||
return [ this.urls.slice(0, this.maxCount) ];
|
||||
} else {
|
||||
// 固定行数模式下，按 rowCount 分割图片
|
||||
const arr = []
|
||||
this.urls.map((item, index) => {
|
||||
// 限制最大展示数量
|
||||
@@ -160,18 +175,29 @@ export default {
|
||||
return arr
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 计算图片宽度
|
||||
* @returns {String} 图片宽度样式值
|
||||
*/
|
||||
imageWidth() {
|
||||
return addUnit(
|
||||
this.urls.length === 1 ? this.singleWidth : this.multipleSize, this.unit
|
||||
)
|
||||
},
|
||||
/**
|
||||
* 计算图片高度
|
||||
* @returns {String} 图片高度样式值
|
||||
*/
|
||||
imageHeight() {
|
||||
return addUnit(
|
||||
this.urls.length === 1 ? this.singleHeight : this.multipleSize, this.unit
|
||||
)
|
||||
},
|
||||
// 此变量无实际用途，仅仅是为了利用computed特性，让其在urls长度等变化时，重新计算图片的宽度
|
||||
// 因为用户在某些特殊的情况下，需要让文字与相册的宽度相等，所以这里事件的形式对外发送
|
||||
/**
|
||||
* 计算相册总宽度，用于外部组件对齐
|
||||
* 此变量无实际用途，仅仅是为了利用computed特性，让其在urls长度等变化时，重新计算图片的宽度
|
||||
* @returns {Number} 相册宽度
|
||||
*/
|
||||
albumWidth() {
|
||||
let width = 0
|
||||
if (this.urls.length === 1) {
|
||||
@@ -185,59 +211,100 @@ export default {
|
||||
return width
|
||||
}
|
||||
},
|
||||
emits: ['preview', 'albumWidth'],
|
||||
methods: {
|
||||
addUnit,
|
||||
// 预览图片
|
||||
/**
|
||||
* 点击图片预览
|
||||
* @param {Event} e - 点击事件对象
|
||||
* @param {String} url - 当前点击图片的地址
|
||||
*/
|
||||
onPreviewTap(e, url) {
|
||||
// 获取所有图片地址
|
||||
const urls = this.urls.map((item) => {
|
||||
return this.getSrc(item)
|
||||
})
|
||||
uni.previewImage({
|
||||
current: url,
|
||||
urls
|
||||
})
|
||||
// 是否阻止事件传播
|
||||
this.stop && this.preventEvent(e)
|
||||
if (this.previewFullImage) {
|
||||
// 使用系统默认预览图片功能
|
||||
uni.previewImage({
|
||||
current: url,
|
||||
urls
|
||||
})
|
||||
// 是否阻止事件传播
|
||||
this.stop && this.preventEvent(e)
|
||||
} else {
|
||||
// 发送自定义预览事件
|
||||
this.$emit('preview', {
|
||||
urls,
|
||||
currentIndex: urls.indexOf(url)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取图片的路径
|
||||
/**
|
||||
* 获取图片地址
|
||||
* @param {String|Object} item - 图片项，可以是字符串或对象
|
||||
* @returns {String} 图片地址
|
||||
*/
|
||||
getSrc(item) {
|
||||
return test.object(item)
|
||||
? (this.keyName && item[this.keyName]) || item.src
|
||||
: item
|
||||
},
|
||||
// 单图时，获取图片的尺寸
|
||||
// 在小程序中，需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸
|
||||
// 在没有添加的情况下，让单图宽度默认为盒子的一定宽度(singlePercent)
|
||||
/**
|
||||
* 单图时，获取图片的尺寸
|
||||
* 在小程序中，需要将网络图片的的域名添加到小程序的download域名才可能获取尺寸
|
||||
* 在没有添加的情况下，让单图宽度默认为盒子的一定宽度(singlePercent)
|
||||
*/
|
||||
getImageRect() {
|
||||
const src = this.getSrc(this.urls[0])
|
||||
uni.getImageInfo({
|
||||
src,
|
||||
success: (res) => {
|
||||
let singleSize = this.singleSize;
|
||||
// 单位
|
||||
let unit = '';
|
||||
if (Number.isNaN(Number(this.singleSize))) {
|
||||
// 大小中有字符 则记录字符
|
||||
unit = this.singleSize.replace(/\d+/g, ''); // 单位
|
||||
singleSize = Number(this.singleSize.replace(/\D+/g, ''), 10); // 具体值
|
||||
}
|
||||
|
||||
// 判断图片横向还是竖向展示方式
|
||||
const isHorizotal = res.width >= res.height
|
||||
this.singleWidth = isHorizotal
|
||||
? this.singleSize
|
||||
: (res.width / res.height) * this.singleSize
|
||||
? singleSize
|
||||
: (res.width / res.height) * singleSize
|
||||
this.singleHeight = !isHorizotal
|
||||
? this.singleSize
|
||||
? singleSize
|
||||
: (res.height / res.width) * this.singleWidth
|
||||
|
||||
// 如果有单位统一设置单位
|
||||
if(unit != null && unit !== ''){
|
||||
this.singleWidth = this.singleWidth + unit
|
||||
this.singleHeight = this.singleHeight + unit
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
// 获取图片信息失败时，通过组件宽度计算
|
||||
this.getComponentWidth()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取组件的宽度
|
||||
/**
|
||||
* 获取组件的宽度，用于计算单图显示尺寸
|
||||
*/
|
||||
async getComponentWidth() {
|
||||
// 延时一定时间，以获取dom尺寸
|
||||
await sleep(30)
|
||||
// #ifndef APP-NVUE
|
||||
// H5、小程序等平台通过 $uGetRect 获取组件宽度
|
||||
this.$uGetRect('.u-album__row').then((size) => {
|
||||
this.singleWidth = size.width * this.singlePercent
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
// NVUE 平台通过 dom 插件获取组件宽度
|
||||
// 这里ref="u-album__row"所在的标签为通过for循环出来，导致this.$refs['u-album__row']是一个数组
|
||||
const ref = this.$refs['u-album__row'][0]
|
||||
ref &&
|
||||
@@ -251,8 +318,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../libs/css/components.scss';
|
||||
|
||||
.u-album {
|
||||
@include flex(column);
|
||||
|
||||
@@ -276,4 +341,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user