123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259 |
- <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'
- const dom = uni.requireNativePlugin('dom')
- 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
- )
- },
-
-
- 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
- },
-
-
-
- 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() {
-
- await uni.$u.sleep(30)
-
- this.$uGetRect('.u-album__row').then((size) => {
- this.singleWidth = size.width * this.singlePercent
- })
-
-
-
- const ref = this.$refs['u-album__row'][0]
- ref &&
- dom.getComponentRect(ref, (res) => {
- this.singleWidth = res.size.width * this.singlePercent
- })
-
- }
- }
- }
- </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>
|