<template> <view class="content"> <image class="logo" src="/static//icon/sytb.png"></image> <view :style="{ height: `calc(${globalData.statusBarHeight}rpx + 158rpx)` }"></view> <view class="content-swiper"> <u-swiper :list="swiperList" keyName="img" @change="e => (current = e.current)" :autoplay="true" height="300rpx"> <view slot="indicator" class="indicator"> <view class="indicator__dot" v-for="(item, index) in swiperList" :key="index" :class="[index === current && 'indicator__dot--active']"></view> </view> </u-swiper> </view> <view class="content-matter"> <view class="content-matter-market"> <view></view> <view>用户需求广场</view> </view> <view class="" v-if="userNeedList && userNeedList.length"> <view class="content-matter-marketplace" v-for="(v , index) in userNeedList" @click="clickJump(v)" :key="index"> <image :src="v.fileVos[0].url" mode=""></image> <view class="content-matter-marketplace-bazaar d-flex flex-column j-center"> <view class=""> {{v.title}} </view> <view class=""> 说明:{{v.remark}} </view> <view class=""> <text>维修时间:</text> <text>{{v.repairTime}}</text> </view> </view> </view> </view> <view v-else class="diagram"> <image src="@/static/icon/qst.png" mode=""></image> <view class=""> 暂无数据 </view> </view> </view> <com-navbar :leftIcon="false" :homeShow="false" bgColor="transparent" title="首页" :titleStyle="{ color: '#FFFFFF', fontSize: '32rpx',scrollTopHeader: scrollTopHeader }" /> <com-tabbar :list="tabBarList"></com-tabbar> </view> </template> <script> import { userNeedSquare } from '@/api/system/index.js' export default { data() { return { title: 'Hello', globalData: getApp().globalData, scrollTopHeader: 0, tabBarList: [{ name: "首页", // name icon: "/static/tabbar/tb1.png", // 图标 selectIcon: "/static/tabbar/td1.png", // 选中图标 url: "/pages/home/index", // 页面路径 type: 'home' }, { name: "我的需求", // name icon: "/static/tabbar/tb2.png", // 图标 selectIcon: "/static/tabbar/td2.png", // 选中图标 url: "/pages/demand/index", // 页面路径 type: 'type' }, { name: "发布", // name icon: "/static/tabbar/fb.png", // 图标 selectIcon: "/static/tabbar/fb.png", // 选中图标 url: "/pages/release/index", // 页面路径 type: 'type' }, { name: "动态", icon: "/static/tabbar/tb3.png", // 图标 selectIcon: "/static/tabbar/td3.png", // 选中图标 url: "/pages/order/index", type: 'type' }, { name: "我的", icon: "/static/tabbar/tb4.png", // 图标 selectIcon: "/static/tabbar/td4.png", // 选中图标 url: "/pages/my/index", type: 'type' }], userNeedList:[],//需求广场列表 } }, onLoad() { this.getSquare() }, onPageScroll(res) { // console.log('页面滚动了onPageScroll-app', res.scrollTop); this.scrollTopHeader = res.scrollTop; }, methods: { getSquare(){ userNeedSquare().then(res=>{ console.log(res,'需求广场') if(res.code == 200){ if(res.total > 0){ this.userNeedList = res.rows } } }) }, clickJump(info) { this.$uniGo.navigateTo({ url: `/home/index/index?id=${info.id}` }); }, } } </script> <style> page { background-color: #f3f4f6; } </style> <style lang="scss" scoped> .content { display: flex; flex-direction: column; justify-content: center; &-swiper { height: 280rpx; background: #d8d8d8; border-radius: 10rpx; overflow: hidden; width: calc(100% - 20rpx * 2); margin: 0rpx 20rpx 0rpx; } &-matter { margin: 28rpx 20rpx 50rpx; &-market { display: flex; align-items: center; margin-bottom: 20rpx; >view:nth-child(1) { width: 6rpx; height: 36rpx; background: linear-gradient(180deg, #2C66FF 0%, #579FFF 100%); border-radius: 3rpx; margin-right: 14rpx; } >view:nth-child(2) { font-size: 28rpx; font-weight: 500; color: #333333; } } &-marketplace { display: flex; background-color: #ffffff; border-radius: 8rpx; padding: 20rpx; margin-bottom: 20rpx; >image { width: 170rpx; height: 170rpx; margin-right: 20rpx; } &-bazaar { width: 460rpx; >view:nth-child(1) { font-size: 28rpx; font-weight: 700; color: #333333; margin-top: 8rpx; } >view:nth-child(2) { margin-top: 6rpx; font-size: 24rpx; font-weight: 400; color: #444444; } >view:nth-child(3) { margin-top: 9rpx; font-size: 20rpx; font-weight: 400; color: #5281FF; } } } } } .logo { width: 100%; height: 340rpx; position: absolute; z-index: -1; top: 0%; left: 0%; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } .diagram { text-align: center; margin-top: 335rpx; >image { width: 396rpx; height: 243rpx; } >view { margin-top: 20rpx; font-size: 24rpx; font-weight: 400; color: #444444; } } </style>