From 627c3e0a6920131d75eafa4646db373ccc936546 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:52:07 +0800
Subject: [PATCH] 小程序diamante
---
minipro_standard/uni_modules/uview-ui/components/u-album/u-album.vue | 259 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 259 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-album/u-album.vue b/minipro_standard/uni_modules/uview-ui/components/u-album/u-album.vue
new file mode 100644
index 0000000..687e2d5
--- /dev/null
+++ b/minipro_standard/uni_modules/uview-ui/components/u-album/u-album.vue
@@ -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 姣忚灞曠ず鍥剧墖鏁伴噺锛屽璁剧疆锛宻ingleSize鍜宮ultipleSize灏嗕細鏃犳晥 锛堥粯璁� 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
+ )
+ },
+ // 姝ゅ彉閲忔棤瀹為檯鐢ㄩ�旓紝浠呬粎鏄负浜嗗埄鐢╟omputed鐗规�э紝璁╁叾鍦╱rls闀垮害绛夊彉鍖栨椂锛岄噸鏂拌绠楀浘鐗囩殑瀹藉害
+ // 鍥犱负鐢ㄦ埛鍦ㄦ煇浜涚壒娈婄殑鎯呭喌涓嬶紝闇�瑕佽鏂囧瓧涓庣浉鍐岀殑瀹藉害鐩哥瓑锛屾墍浠ヨ繖閲屼簨浠剁殑褰㈠紡瀵瑰鍙戦��
+ 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
+ },
+ // 鍗曞浘鏃讹紝鑾峰彇鍥剧墖鐨勫昂瀵�
+ // 鍦ㄥ皬绋嬪簭涓紝闇�瑕佸皢缃戠粶鍥剧墖鐨勭殑鍩熷悕娣诲姞鍒板皬绋嬪簭鐨刣ownload鍩熷悕鎵嶅彲鑳借幏鍙栧昂瀵�
+ // 鍦ㄦ病鏈夋坊鍔犵殑鎯呭喌涓嬶紝璁╁崟鍥惧搴﹂粯璁や负鐩掑瓙鐨勪竴瀹氬搴�(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() {
+ // 寤舵椂涓�瀹氭椂闂达紝浠ヨ幏鍙杁om灏哄
+ 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寰幆鍑烘潵锛屽鑷磘his.$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>
\ No newline at end of file
--
Gitblit v1.9.3