MinNan/pages/jiyi/jiyi.vue

<template>
	<view class="">
		<view class="box">
			<view class="nabBar" style="background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/jiyi_zxc.png'); background-size: cover">
				<u-navbar title="记忆" bgColor="rgba(255,255,255,0)" :placeholder="true" :leftIconSize="0" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
			</view>

			<view class="box_15">
				<u-swiper previousMargin="40" nextMargin="40" :autoplay="true" showTitle :height="150" :list="bannerlist" :circular="true" radius="5" bgColor="#ffffff"></u-swiper>
			</view>
			<view class="box_1">
				<view class="box_20">
					<view class="block_9">
						<button bindtap="onClick" class="button_1">
							<text lines="1" class="text_1">城市记忆</text>
						</button>
						<button bindtap="onClick" class="button_2" @click="cunShiBtn">
							<text lines="1" class="text_2">村史馆</text>
						</button>
					</view>
					<view class="block_10">
						<button bindtap="onClick" class="button_3">
							<text lines="1" class="text_3">区史馆</text>
						</button>
						<button bindtap="onClick" class="button_5">
							<text lines="1" class="text_4">校史馆</text>
						</button>
						<button bindtap="onClick" class="button_4">
							<text lines="1" class="text_5">医史馆</text>
						</button>
					</view>

					<view class="text-wrapper_4">
						<text lines="1" class="text_6">经典推荐</text>

						<!-- <text lines="1" class="text_7">查看更多》</text> -->
					</view>
					<!-- 瀑布流 -->
					<uv-waterfall v-model="list" :add-time="10" left-gap="10" right-gap="10" :column-gap="columnGap" @changeList="changeList">
						<!-- 第一列数据 -->
						<template v-slot:list1>
							<!-- 为了磨平部分平台的BUG，必须套一层view -->
							<view>
								<view @click="waterfallDetails(index)" v-for="(item, index) in list1" :key="item.id" class="waterfall-item">
									<view class="waterfall-item__image" :style="[imageStyle(item)]">
										<image :src="item.image" mode="widthFix" style="border-radius: 25rpx 60rpx 0rpx 30rpx" :style="{ width: item.width + 'px' }"></image>
									</view>
									<view class="like_box" @click="likeBtn(index)">
										<uni-icons v-if="list1[index].is_like > 0" type="heart-filled" color="red" size="20"></uni-icons>
										<uni-icons v-else type="heart-filled" color="#f8f8f8" size="20"></uni-icons>
										<text style="font-size: 28rpx">{{ list1[index].likes }}</text>
									</view>
									<view class="waterfall-item__ft">
										<view class="waterfall-item__ft__title">
											<text class="value">{{ item.title }}</text>
										</view>
									</view>
								</view>
							</view>
						</template>
						<!-- 第二列数据 -->
						<template v-slot:list2>
							<!-- 为了磨平部分平台的BUG，必须套一层view -->
							<view>
								<view @click="waterfallDetails2(index)" v-for="(item, index) in list2" :key="item.id" class="waterfall-item">
									<view class="waterfall-item__image" :style="[imageStyle(item)]">
										<image :src="item.image" mode="widthFix" style="border-radius: 25rpx 60rpx 0rpx 30rpx" :style="{ width: item.width + 'px' }"></image>
									</view>
									<view class="like_box" style="" @click="likeBtn2(index)">
										<uni-icons v-if="list2[index].is_like > 0" type="heart-filled" color="red" size="20"></uni-icons>
										<uni-icons v-else type="heart-filled" color="#f8f8f8" size="20"></uni-icons>
										<text style="font-size: 28rpx">{{ list2[index].likes }}</text>
									</view>
									<view class="waterfall-item__ft">
										<view class="waterfall-item__ft__title">
											<text class="value">{{ item.title }}</text>
										</view>
									</view>
								</view>
							</view>
						</template>
					</uv-waterfall>
				</view>
			</view>
		</view>
		<mntabBar footerTab="1" :messageCount="0"></mntabBar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
let that;
export default {
	data() {
		return {
			main_body_id: '',

			bannerlist: [
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt2.png',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt1.png',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt3.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt4.jpg',
				'https://huli-app.wenlvti.net/app_static/minnanhun/image/sy_lbt5.png'
			],
			list: [],
			list1: [], // 瀑布流第一列数据
			list2: [], // 瀑布流第二列数据
			columnGap: 10
		};
	},
	onLoad(option) {
		that = this;
		this.main_body_id = this.$db.get('main_body_id');

		this.getContentList();
	},
	computed: {
		imageStyle(item) {
			return (item) => {
				const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
				const w = v / 2;
				const rate = w / item.w;
				const h = rate * item.h;
				return {
					width: w + 'px',
					height: h + 'px'
				};
			};
		}
	},
	methods: {
		imageClick(i) {
			console.log(i);
		},
		cunShiBtn() {
			uni.navigateTo({
				url: '/index_fenbao/cs_liebiao/cs_liebiao'
			});
		},

		// 瀑布流数据
		getContentList() {
			this.$api.getContentList({ main_body_id: 2, model_id: 8 }, function (res) {
				res.data.forEach((item) => {
					item.is_like = 0;
				});
				that.list = res.data;
			});
		},

		changeList(e) {
			// console.log(e, '瀑布流');
			this[e.name].push(e.value);
		},
		// 第一列详情
		waterfallDetails(i) {
			uni.navigateTo({
				url: '/jiyi_fenbao/recommendedDetails?id=' + this.list1[i].id
			});
			// console.log(this.list1[i].id, 888888888);
		},
		// 第二列详情
		waterfallDetails2(i) {
			// console.log(this.list2[i].id, 999999);
			uni.navigateTo({
				url: '/jiyi_fenbao/recommendedDetails?id=' + this.list2[i].id
			});
		},
		// 点赞
		likeBtn(i) {
			if (this.list1[i].is_like == 0) {
				this.$api.like(
					{
						main_body_id: this.main_body_id,
						content_id: this.list1[i].id
					},
					function (res) {
						that.list1[i].is_like = 1;
						that.list1[i].likes++;
						that.$common.successToShow('成功点赞');
					}
				);
			} else {
				that.$api.unLike(
					{
						main_body_id: that.main_body_id,
						content_ids: that.list1[i].id
					},
					function (res) {
						that.list1[i].is_like = 0;
						that.list1[i].likes--;
						that.$common.successToShow('取消点赞');
					}
				);
			}
		},
		// 点赞
		likeBtn2(i) {
			if (this.list2[i].is_like == 0) {
				this.$api.like(
					{
						main_body_id: this.main_body_id,
						content_id: this.list2[i].id
					},
					function (res) {
						that.list2[i].is_like = 1;
						that.list2[i].likes++;
						that.$common.successToShow('成功点赞');
					}
				);
			} else {
				that.$api.unLike(
					{
						main_body_id: that.main_body_id,
						content_ids: that.list2[i].id
					},
					function (res) {
						that.list2[i].is_like = 0;
						that.list2[i].likes--;
						that.$common.successToShow('取消点赞');
					}
				);
			}
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	/* background-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/shouhu/wyj-feiyi3-001.png'); */
	/* background-size: 100% 100%; */
	background-attachment: fixed;
	border-radius: 16px 16px 0 0;
	position: relative;
	display: flex;
	flex-direction: column;
}
.waterfall-item {
	margin-bottom: 20rpx;
}
.waterfall-item__ft {
	position: relative;
}
.waterfall-item__ft__title {
	width: 100%;
	height: 65rpx;
	position: absolute;
	bottom: 0;
	left: 0;
	line-height: 65rpx;
	background-color: #ca5642;
	font-size: 30rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 0 0 10rpx 10rpx;
}
.like_box {
	position: relative;
	top: -80rpx;
	left: 240rpx;
	display: flex;
	align-items: center;
	color: #ffffff;
	justify-content: space-evenly;
	height: 40rpx;
	width: 100rpx;
	border-radius: 30rpx;
}
.active {
	color: red;
}
.nabBar {
	height: 340rpx;
}
.u-swiper.data-v-6b019429 {
	background-color: rgba(0, 0, 0, 0) !important;
}
/deep/.column-value.data-v-ddfcbb1c {
	border-radius: 25rpx 60rpx 0rpx 30rpx !important;
}
.box_1 {
	position: relative;
	width: 750rpx;
	flex-direction: row;
	display: flex;
}
.title_pubu {
	width: 100%;
	height: 65rpx;
	line-height: 65rpx;
	background-color: #ca5642;
	font-size: 30rpx;
	display: flex;
	justify-content: space-around;
	color: #ffffff;
	position: absolute;
	bottom: 0;
	left: 0;
}
.box_20 {
	position: relative;
	width: 750rpx;

	display: flex;
	flex-direction: column;
}
.block_9 {
	width: 684rpx;
	height: 67rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: auto;
}
.button_1 {
	background-color: rgba(22, 69, 89, 1);
	border-radius: 33rpx;
	height: 67rpx;
	display: flex;
	flex-direction: column;
	width: 330rpx;
	position: relative;
}
.text_1 {
	color: rgba(255, 255, 255, 1);
	font-size: 28rpx;
	font-weight: 700;
	text-align: center;
	line-height: 60rpx;
}
.image_1 {
	position: absolute;
	left: 0rpx;
	top: 0rpx;
	width: 330rpx;
	height: 67rpx;
}
.button_2 {
	background-color: rgba(202, 86, 66, 1);
	border-radius: 33rpx;
	height: 67rpx;
	display: flex;
	flex-direction: column;
	width: 330rpx;
	position: relative;
}
.text_2 {
	color: rgba(255, 255, 255, 1);
	font-size: 28rpx;
	font-weight: 700;
	text-align: center;
	line-height: 60rpx;
}

.block_10 {
	width: 691rpx;
	height: 67rpx;
	flex-direction: row;
	display: flex;
	margin: 31rpx 0 0 32rpx;
}
.button_3 {
	background: #c3a07b;
	border-radius: 33rpx;
	height: 67rpx;
	display: flex;
	flex-direction: column;
	width: 212rpx;
	position: relative;
}
.button_5 {
	background: #5c987b;
	border-radius: 33rpx;
	height: 67rpx;
	display: flex;
	flex-direction: column;
	width: 212rpx;
	position: relative;
}
.text_3 {
	color: rgba(255, 255, 255, 1);
	font-size: 28rpx;
	font-weight: 700;
	text-align: center;
	line-height: 60rpx;
}

.text-wrapper_1 {
	background-color: rgba(197, 186, 165, 1);
	border-radius: 33rpx;
	height: 67rpx;
	margin-left: 24rpx;
	display: flex;
	flex-direction: column;
	width: 212rpx;
}
.text_4 {
	color: rgba(255, 255, 255, 1);
	font-size: 28rpx;
	font-weight: 700;
	text-align: center;
	line-height: 60rpx;
}
.button_4 {
	background-color: rgba(91, 84, 84, 1);
	border-radius: 33rpx;
	height: 67rpx;

	display: flex;
	flex-direction: column;
	width: 212rpx;
	position: relative;
}
.text_5 {
	color: rgba(255, 255, 255, 1);
	font-size: 28rpx;
	font-weight: 700;
	text-align: center;
	line-height: 60rpx;
}

.text-wrapper_4 {
	width: 668rpx;
	height: 34rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
	margin: 33rpx 0 25rpx 49rpx;
}
.text_6 {
	width: 144rpx;
	height: 34rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 36rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 36rpx;
}
.text_7 {
	width: 107rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin-top: 5rpx;
}

.box_15 {
	margin-top: -160rpx;
	margin-left: 32rpx;
	margin-right: 32rpx;
	border-radius: 20rpx;
	padding: 20rpx;
	height: 360rpx;
	background-color: #ffe4b0;
	display: flex;
	margin-bottom: 35rpx;
	box-sizing: border-box;
	flex-direction: column;
}
</style>