yicangzongtai_app_240321/components/donation-news/index.vue

<template>
	<!--
		@copyright CYZ
		@time 2022/8/5
		捐赠消息（首页、公益专区等页面）
	 -->
	<view class="main">
		<view class="list">
			<view class="item" v-for="(item, index) in listData" :key="index" @click="item.type == 0?goDonation(item):goBuy(item)">
				<template v-if="item.msg_body.welfare_type != null">
					<!-- 公益捐赠（捐款） -->
					<image v-if="item.type == 0 && item.msg_body.model_type == 2 && item.msg_body.welfare_type == 0" mode="aspectFill" class="cover-2" src="/static/common/msg-type1.png"></image>
					<!-- 公益捐赠（捐物） -->
					<image v-else-if="item.type == 0 && item.msg_body.model_type == 2 && item.msg_body.welfare_type == 1" mode="aspectFill" class="cover-2" src="/static/common/msg-type3.png"></image>
				<!-- 官方捐赠 -->
				<image v-else-if="item.type == 0 && item.msg_body.model_type == 0" mode="aspectFill" class="cover-2" src="/static/common/msg-type1.png"></image>
				<!-- 积分捐赠 -->
				<image v-else-if="item.type == 0 && item.msg_body.model_type == 1" mode="aspectFill" class="cover-2" src="/static/common/msg-type2.png"></image>
				</template>
				<image v-else-if="item.type == 1" mode="aspectFill" class="cover" :src="item.msg_body.goods_cover"></image>
				<view class="right-2" v-if="item.type == 0">
					<view class="title">{{item.content}}</view>
					<view class="buy-box">
						<view class="desc">绿马爱心公益助残基金</view>
						<button @click="goDonation(item)">去捐赠</button>
						</view>
				</view>
				<view class="right" v-if="item.type == 1">
					<view class="title">{{ item.content }}</view>
					<view class="desc">绿马爱心公益助残基金</view>
					<view class="buy-box">
						<view class="num-box">
							<text class="company">¥</text>
							<text class="num">125.</text>
							<text class="float-num">05</text>
						</view>
						<button @click="goBuy(item)">{{item.msg_body.model_type == 0?'去购买':'去领取'}}</button>
					</view>
				</view>
			</view>
		</view>
		<uni-popup class="tip-popup" ref="donationPopup" type="center" :mask-click="false">
			<view class="content-box">
				<view class="title">官方捐赠渠道</view>
				<view class="content">
					<view class="tip">
						感谢您对绿马助残公益基金会支持，即将跳转到官方捐款渠道链接在线捐款。
					</view>
					<button class="btn donation">去捐赠</button>
					<view class="tip" style="color: #999999;">
						注意：官方渠道捐赠完成之后需要在本平台申领公益积分
					</view>
					<view class="btn-box">
						<button @click="closePublicDonation()">知道了</button>
						<button @click="goApplyPointsPage()">去申领</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	props: {
		listData: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	data() {
		return {
			//枚举的消息类型
			typeList: [
				{ text: '去捐赠',
					children: [
						{
							icon: '/static/common/msg-type1.png',
							text: '官方捐赠' //做公益-官方捐赠渠道
						},
						{
							icon: '/static/common/msg-type2.png',
							text: '公益捐赠' //做公益-积分捐赠
						},
						{
							icon: '/static/common/msg-type3.png',
							text: '公益捐赠', //做公益-公益捐赠
							welfareTypeList:[{
								// 捐款
								icon: '/static/common/msg-type1.png'
							},{
								// 捐物
								icon: '/static/common/msg-type3.png'
							}]
					}],
				},
				{
					text: '去购买'
				}
			]
		}
	},
	methods: {
		goDonation(item){
			// 官方捐赠
			if(item.msg_body.model_type == 0){
				this.publicDonation();
			// 积分捐赠
			}else if(item.msg_body.model_type == 1){
				uni.navigateTo({
					url: '/pages/publicWelfare/index'
				})
			// 公益捐赠
			}else if(item.msg_body.model_type == 2){
				let token = uni.getStorageSync("apiToken")
				if (!token) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return ;
				}
				uni.navigateTo({
					url: '/pages/publicDonation/index'
				})
			}
		},
		goBuy(item){
      uni.navigateTo({
      	url: `/pages/product/goods/goods?id=${item.msg_body.goods_id}`
      })
			// 普通商品
			// if(item.msg_body.model_type == 0){
			// 	uni.navigateTo({
			// 		url: `/pages/product/goods/goods?id=${item.msg_body.goods_id}`
			// 	})
			// // 免费商品
			// }else if(item.msg_body.model_type == 1){
			// 	uni.navigateTo({
			// 		url: `/pages/product/goods/freeGoods?id=${item.msg_body.goods_id}`
			// 	})
			// }
		},
		//官方捐赠
		publicDonation(){
			this.$refs.donationPopup.open();
		},
		closePublicDonation(){
			this.$refs.donationPopup.close();
		},
		goApplyPointsPage(){
			let token = uni.getStorageSync("apiToken")
			if (!token) {
				uni.navigateTo({
					url: "/pages/login/index"
				})
				return ;
			}
			uni.navigateTo({
				url: '/pages/applyPoints/index'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	padding-bottom: 50rpx;
	.list {
		width: 690rpx;
		margin: 0 30rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		filter: drop-shadow(1px 2px 4px rgba(26, 58, 70, 0.1));
		.item,
		.item-2 {
			&:nth-child(1) {
				border-top: none;
			}
			border-top: 1px solid #e6e6e6;
			padding: 40rpx 0;
			display: flex;
			.cover {
				width: 226rpx;
				height: 226rpx;
				border-radius: 10rpx;
				margin-right: 25rpx;
				vertical-align: top;
				&-2 {
					width: 91rpx;
					height: 91rpx;
					border-radius: 10rpx;
					margin-right: 41rpx;
					vertical-align: top;
				}
			}
			.right,
			.right-2 {
				display: inline-block;
				flex: 1;
				//width: 400rpx;
				.title {
					// overflow: hidden;
					// text-overflow: ellipsis;
					// display: -webkit-box;
					// -webkit-line-clamp: 2;
					// -webkit-box-orient: vertical;

					font-size: 28rpx;
					line-height: calc(28rpx * 1.414);
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #181818;
					margin-top: 10rpx;
					text-align: justify;
					word-break: break-word;
				}
				.desc {
					flex: 1;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #808080;
					line-height: 24rpx;
					margin-top: 10rpx;
					padding-right: 20rpx;
					box-sizing: border-box;
					
					// overflow: hidden;
					// white-space: nowrap;
					// text-overflow: ellipsis;
				}
				.buy-box {
					margin-top: 35rpx;
					display: flex;
					justify-content: space-between;
					.num-box {
						margin-top: 15rpx;
						.company,
						.float-num {
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #00bf5a;
							line-height: 24rpx;
						}
						.num {
							font-size: 36rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: bold;
							text-align: left;
							color: #00bf5a;
							line-height: 24rpx;
						}
					}
					.desc{
						line-height: 63rpx;
						margin-top: 0;
					}
					button {
						width: 138rpx;
						height: 63rpx;
						background: linear-gradient(180deg, #2eb82a, #027956);
						border-radius: 32rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #ffffff;
						line-height: 63rpx;
						text-align: center;
					}
				}
			}
			.right{
				.buy-box {
					margin-top: 50rpx
				}
			}
		}
		.item-2 {
			padding: 40rpx 0 50rpx 0;
		}
	}
}
</style>