xinjiangMiniProgram/pages/tabbar/index/comp/notice.vue

<template>
	<view class="ul">
		<view class="li flex-b" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
			<view class="leftTxt">
				<view class="tit towRowText">
					{{ item.title }}
				</view>
				<view class="date">{{item.timeDesc }}</view>
			</view>
			<view class="cover">
				<image :src="item.picture" mode=""></image>
			</view>
		</view>
		
		<up-popup :show="showPop" @close="showPop=false" mode="center" :round="10" :customStyle="{width: '90%'}" closeable>
			<view class="popCon">
				<view class="hello">你好：</view>
				<view class="p">
					欢迎来到 <text>“新疆首府公馆”</text>，为了更好的为您提供服务，请您选择房屋信息，进行业主身份认证。
				</view>
				<oneBtn text="点击认证业主" @oneBtnClick="oneBtnClickFn"></oneBtn>
			</view>
		</up-popup>
		
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import {
		userStore
	} from '@/store/index.js';
	const counterStore = userStore();
	
	import {
		getHouses,
	} from '@/config/api.js'
	
	defineProps({
		list: {
			type: Array,
			default: []
		}
	})
	const showPop = ref(false)
	function goDetail(item) {
		if(!counterStore.userInfo.myHouse) {
			getHousesFn()
		}
		uni.navigateTo({
			url: '/pages/subPage/notice/noticeDetail?id='+item.id
		})
	}
	function oneBtnClickFn () {
		showPop.value = false
		uni.navigateTo({
			url: '/pages/subPage/authentication/authentication'
		})
	}
	
	// 我的房子
	async function getHousesFn() {
		if (!counterStore.token) {
			uni.navigateTo({
				url: '/pages/subPage/login/login'
			})
			return
		} 
		const {
			data: res
		} = await getHouses()
		if(!res.length) {
			return showPop.value = true
		}
		counterStore.upDateUseInfo('myHouse', res)
	}
</script>

<style lang="scss" scoped>
	.ul {
		width: 100%;
	  .li {
		  width: 100%;
		  padding: 30rpx 0;
		  border-bottom: 1px solid #EFEFEF;
		  &:last-child {
			  border-bottom: none;
		  }
	    .leftTxt {
			padding-right: 80rpx;
			width: 0;
			flex: 1;
	      .tit.towRowText {
			font-size: 28rpx;
			color: #343434;
			font-weight: bold;
	      }
	
	      .date {
			font-size: 28rpx;
			color: #999999;
			margin-top: 40rpx;
	      }
	    }
	
	    .cover {
			width: 210rpx;
			height: 150rpx;
			background: #EFEFEF;
			border-radius: 12rpx;
			overflow: hidden;
	      image {
			display: block;
			width: 100%;
			height: 100%;
	      }
	    }
	  }
	}
	
	.popCon {
		padding: 60rpx 40rpx;
		color: #333;
	
		.hello {
			font-size: 36rpx;
			font-weight: 700;
		}
	
		.p {
			font-size: 28rpx;
			padding: 30rpx 0 60rpx 0;
	
			text {
				color: $themC;
			}
		}
	}
</style>