yicangzongtai_app_240321/pages/publicWelfareZone/index.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="swiper">
			<view class="uni-margin-wrap">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
					circular=false>
					<swiper-item v-for="item in bannerList" :key="item.id">
						<view class="swiper-item" @click="
		            imgLink(item.model_type, item.model_id, item.url, item.shop_id)
		          ">
							<image class="cover" :src="item.cover" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<image @click="goAboutMe()" class="cover2" src="/static/publicWelfareZone/cover2.png"></image>
		<view v-if="list.length>0">
			<view class="block" v-if="list.length>0">
				<image class="img" src="/static/publicWelfareZone/block1.png"></image>
				<view class="desc">
					<view class="title">{{list[0].title}}</view>
					<view class="tip">{{list[0].intro}}</view>
				</view>
			</view>
			<view class="block" v-if="list.length>1">
				<view class="desc">
					<view class="title">{{list[1].title}}</view>
					<view class="tip">{{list[1].intro}}</view>
				</view>
				<image class="img" src="/static/publicWelfareZone/block2.png"></image>
			</view>
			<view class="block" v-if="list.length>2">
				<image class="img" src="/static/publicWelfareZone/block3.png"></image>
				<view class="desc">
					<view class="title">{{list[2].title}}</view>
					<view class="tip">{{list[2].intro}}</view>
				</view>
			</view>
		</view>
		<image class="cover3" src="/static/publicWelfareZone/cover3.png"></image>
		<view class="moudle-title">公益记录</view>
		<donation-news :listData="historyList"></donation-news>
		<view class="seat"></view>
		<view class="bottom-box">
			<button @click="goPhone()">
				<text class="iconfont2">&#xe638;</text>
				电话咨询
				</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				config: {
					back: true,
					title: '关于绿马助残公益基金',
					color: '#1a1a1a',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				bannerList: [],
				list: [],
				historyList: []
			}
		},
		onLoad() {
			this.getBanner();
			this.getList();
			this.getList2();
		},
		onPullDownRefresh() {
			this.getBanner();
			this.getList();
			this.getList2();
			uni.stopPullDownRefresh();
		},
		methods: {
			getBanner() {
				this.$http.get(`/ad/ad/getShopAdByAdL/0/publicwelfarezone-banner`, {}, false)
				.then((res) => {
					this.loading = false;
					if (res && res.code == 200) {
						this.bannerList = res.list;
					}
				})
			},
			goAboutMe(){
				uni.navigateTo({
					url: '/pages/protocol/index?code=about-us'
				})
			},
			getList(){
				this.$http.get('/about/us/list',{limit: 3})
				.then(res => {
					if(res.code==200){
						this.list = res.list
					}
				})
			},
			getList2() {
				let that = this;
				this.$http.get('/donation/msg/list',{
					limit: 6,
					type: 0 //0 捐赠类型
				})
				.then(res=>{
					if (res.code == 200) {
						that.historyList = res.list;
					}
				})
			},
			goPhone(){
				this.$http.get('/system/info/info', {}).then(res => {
					if (res && res.code == 200) {
						if(res.data.hotline){
							uni.makePhoneCall({
							  phoneNumber: res.data.hotline
							});
						}
					}})
			},
			/**轮播图跳转 */
			imgLink(type, id, url, shopid) {
				if (type == "goods") {
					uni.navigateTo({
						url: "/pages/product/goods/goods?id=" + id + "&shopid=" + shopid,
					});
				} else if (type == "service") {
					// uni.navigateTo({
					// 	url: "/pages/product/goods/serviceGood?id=" + id
					// });
				} else if (type == "point_goods") {
					// uni.navigateTo({
					// 	url: "/pages/product/goods/IntegralGood?id=" + id
					// });
				} else if (type == "url") {
					if(/^http/.test(url)){
						uni.navigateTo({
							url: "/pages/index/webView?linkUrl=" + url,
						});
					}else{
						uni.navigateTo({
							url
						});
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main{
		.cover{
			width: 100%;
			height: 450rpx;
		}
		.cover2{
			display: block;
			width: 690rpx;
			height: 156rpx;
			margin: 40rpx auto;
		}
		.block{
			width: 690rpx;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 50rpx 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 16rpx;
			&:nth-child(2){
				background-color: #20a634;
				color: white;
				.desc{
					.tip{
						color: white;
					}
				}
			}
			.img{
				width: 120rpx;
				height: 120rpx;
			}
			.desc{
				width: 350rpx;
				.title{
					font-size: 38rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					margin-bottom: 16rpx;
				}
				.tip{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #999999;
				}
			}
		}
		.cover3{
			width: 690rpx;
			height: 472rpx;
			margin: 40rpx 30rpx;
			background-color: #f2f2f2;
			border-radius: 16rpx;
		}
		.moudle-title{
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
			margin: 0 0 26rpx 30rpx;
		}
		.seat{
			height: 148rpx;
			width: 100%;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
		.bottom-box {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 100;
			display: flex;
			align-items: center;
			padding: 30rpx;
			box-sizing: border-box;
			width: 100%;
			height: 148rpx;
			padding: 0 30rpx 0 36rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			background-color: white;
			border-top: 1px solid #f5f5f5;
			button{
				width: 690rpx;
				height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				padding: 0 30rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
				line-height: 80rpx;
				background-color: #0b844a;
				color: white;
				.iconfont2{
					font-size: 35rpx;
					margin-right: 15rpx;
				}
			}
		}
	}
</style>