web-africa-h5/pages/user/makerSpace/detail.vue

<template>
	<view class="wrap">
        <view class="card">
            <view class="cardItem" v-for="(v,idx) in listData" :key="idx"  >
                <view class="imageList"  >
                    <view class="preIcon" @click="changPre(idx)">
                        <u-icon name="arrow-left" size="48rpx" color="#FB3024"></u-icon>
                    </view>
                    <swiper class="swiper" :current="v.currentSwiper" :interval="2000" :duration="500">
                        <swiper-item v-for="(img, imgIdx) in v.fileList" :key="imgIdx">
                            <view class="background-image" :style="{ backgroundImage: 'url(' + img + ')' }"></view>
                        </swiper-item>
                    </swiper>
                    <view class="nextIcon" @click="changNext(idx)">
                        <u-icon name="arrow-right" size="48rpx" color="#FB3024"></u-icon>
                    </view>
                </view>
                <view class="info">
                    <view class="desc">{{ v.storeName }}</view>
                    <view class="concat">
                        <view class="item">
                            <view class="pre">{{ $t('S_C_87') }}</view>
                            <text>:</text>
                            <view class="txt">{{ v.storePhone }}</view>
                        </view>
                        <view class="item">
                            <view class="pre">{{ $t('S_C_88') }}</view>
                            <text>:</text>
                            <view class="txt">{{ v.storeProvinceVal }}{{ v.storeCityVal }}{{ v.storeCountyVal }}{{ v.storeAddress }}</view>
                        </view>
                    </view>
                </view>
            </view>   
        </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
            loading: false,
            form: {
				pageNum: 1,
				pageSize: 10,
			},
            total: 0,
            no_more: false,
            listData: [],
            isDetail: false,
			detailModel: null
		};
	},
	onLoad() {
		this.getData();
	},
    onReachBottom() {
		let self = this;
		if (self.form.pageNum * self.form.pageSize < self.total - 1) {
			self.form.pageNum++;
			self.getData();
		}
		self.no_more = true;
	},
    computed: {
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.listData.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		},
	},
	methods: {
        closeDetail() {
			this.isDetail = false;
			this.detailModel = null;
		},
		openDetail(e) {
			this.detailModel = e;
			this.isDetail = true;
		},
        getData() {
            let self = this;
            self.loading = true;
            uni.showLoading({
                title: 'Loading...'
            });

            self._get('member/api/maker-space/list', self.form, res => {
                const { rows,total } = res;
                if(rows && rows.length > 0){
                    rows.forEach((v)=>{
                        v.currentSwiper = 0;
                    })
                }
                self.listData = rows;
                self.total = total;
                self.loading = false;
                uni.hideLoading();
            })
        },
        changPre(idx){
            let item = this.listData[idx];
            if(item.currentSwiper == 0){
                item.currentSwiper =  item.fileList.length - 1;
                return
            }
            item.currentSwiper = item.currentSwiper - 1;
        },
        changNext(idx){
            let item = this.listData[idx];
            if(item.currentSwiper == item.fileList.length - 1){
                item.currentSwiper = 0;
                return
            }
            item.currentSwiper = item.currentSwiper + 1;
        }
	}
};
</script>

<style lang="scss" scoped>
.wrap{
    padding: 20rpx;
    box-sizing: border-box;
    uni-swiper.swiper{
        height: 374rpx;
    }
	.background-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; /* 确保图像在其他内容之后 */
}
    .title{
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        height: 100rpx;
        line-height: 100rpx;
    }
    .card{
        margin-bottom: 23rpx;
    }
    .cardItem{
        background: #fff;
        padding: 29rpx 30rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        .imageList{
            position: relative;
        }
        .preIcon,.nextIcon{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }
        .preIcon{
            left: 0;
        }
        .nextIcon{
            right: 0;
        }
        .info{ 
            font-size: 24rpx;
            color: #666666;
        }
        .concat{
            .item{
                display: flex;
                &:last-child{
                    margin-bottom: 0;
                }
                .pre{
                    width: 80rpx;
                    text-align: justify;
                    font-weight: 500;
                    &::after{
                        width: 100%;
                        display: inline-block;
                        content: '';
                    }
                }
                .txt{
                    padding-left: 12rpx;   
                }
            }
        }
        .desc{
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
            padding: 30rpx 0;
        }
    }
}
</style>