besiweb/pages/index/index.vue

<template>
	<view>
		<view class="sticky-nav">
			<view class="nav-bar">
				<view class="left-nav">
					<ul>
						<li v-for="(item,index) in navList" :class="{active:!(index-menuIndex)}" :key=index>
							<view v-if="item.url">
								<navigator :url="item.url" v-text="item.name"></navigator>
							</view>
							<view v-else @click="menuShow(index)">
								<text v-text="item.name"></text>
							</view>
						</li>
					</ul>
				</view>
				<view class="right-nav">
					<image src="../../static/index/search_white_blod_big_icon.png" class="index_search"></image>
					<image src="../../static/index/notice_message_white_icon.png" class="index_info"></image>
				</view>
			</view>
		</view>
		<view>
			<view v-if="menuIndex===0" class="left-nav-title-box">
				<view class="left-nav-titles">
					<view v-for="(item,index) in leftNavList" :key="index">
						<view @click="navigate(item)">
							<image :src="item.imgurl" class="left-nav-title-img"></image>
							<text class="left-nav-title-content">{{item.content}}</text>
						</view>
					</view>
				</view>
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration" indicator-active-color="#FF713F"
						indicator-color="transparent">
						<swiper-item v-for="(item,index) in indexSwiperImgs">
							<view class="swiper-item">
								<image :src="item" style="width: 720rpx;height:320rpx;border-radius: 10rpx;"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>

				<view class="left-nav-center">
					<view class="left-nav-btns">
						<image src="../../static/index/index_jisi_icon.png" class="jisi-img">
						</image>
						<view class="left-nav-btnBox">
							<view class="left-nav-btn left-nav-btn1">
								<image src="../../static/index/peifu_icon.png" class="small-btn-img">
								</image>
								<text class="left-nav-btn-content">培福</text>
							</view>
							<view class="left-nav-btn">
								<image src="../../static/index/xixing_icon.png" class="small-btn-img">
								</image>
								<text class="left-nav-btn-content">西游</text>
							</view>
						</view>
					</view>
					<view>
						<view class="nav-left-date">
							<text class="nav-left-oldDate">{{oldDate}}</text>
							<text class="nav-left-today">{{today}}</text>
							<text class="nav-left-lunarDate">{{lunarDate}}</text>
						</view>
						<view class="foli-box">
							<text class="nav-left-suit">宜</text><text
								class="nav-left-thing">{{suit.substr(0,9)+"..."}}</text>
							<text class="nav-left-aviod">忌</text><text
								class="nav-left-thing">{{avoid.substr(0,9)+"..."}}</text>
							<image src="../../static/index/foli_jiaobiao.png" class="foli"></image>
						</view>
					</view>
					<view class="ad-box">
						<swiper class="adSwiper" circular :indicator-dots="adIndicatorDots" vertical="true"
							:autoplay="adAutoplay" :interval="adInterval" :duration="adDuration">
							<swiper-item v-for="(item,index) in adSwiperImgs">
								<view>
									<image :src="item" style="width: 720rpx;height:120rpx;border-radius: 10rpx;">
									</image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="left-nav-bottom">
					<view class="left-nav-headline-box">
						<text class="left-nav-headline">头条</text>
					</view>
					<view class="news-list-box" v-for="(item,index) in newsList">
						<view class="news-item">
							<navigator :url="'/pages/headlines/detail?id='+item.id">
								<view class="news-list-item">
									<view class="news-list-item-title">
										<text>{{item.title}}</text>
									</view>
									<view class="news-list-item-tag">
										<text class="item-tag">{{item.tag}}</text>
										<text>{{item.publish_at}}</text>
									</view>
								</view>
								<image :src="item.thumb" style="width: 215rpx;height: 192rpx;display: inline-block;
									vertical-align: top;"></image>
							</navigator>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="menuIndex===1" class="left-nav-title-box">
				<view class="left-nav-titles">
					<view v-for="(item,index) in rightNavList" :key="index">
						<view @click="rightNavigate(item)">
							<image :src="item.imgurl" class="left-nav-title-img"></image>
							<text class="left-nav-title-content">{{item.content}}</text>
						</view>
					</view>
				</view>
				<view>
					<view class="rank-box">
						<view class="week-rank-box">
							<view class="week-rank">周排名</view>
							<view class="rank">{{rank}}</view>
						</view>
						<view class="share-btn">分享</view>
						<image src="../../static/index/share_black_common.png" class="share-img"></image>
						<image src="../../static/index/merit_cneter2.png" class="merit-img"></image>
						<view class="merit-content">+{{meritNumber}}</view>
						<view class="qiandao-status">{{initialStatus}}</view>
					</view>
					<uni-swipe-action>
						<view v-for="(item,index) in items" :key="index">
							<uni-swipe-action-item :right-options="options2" :show="item.isOpened" :auto-close="false"
								@change="change(item)" @click="bindClick(item,index)">
								<view class="home-nav-box">
									<image :src="item.imgUrl" class="nav-img"></image>
									<view class="nav-name"
										:class="item.name == '修心日志'||item.name == '日行一善'? 'right-distance':' '">
										{{item.name}}
									</view>
									<image src="../../static/index/merit_cneter2.png" class="nav-merit"></image>
									<view class="nav-count">+{{item.meritCount}}</view>
									<view class="nav-status">{{item.status}}</view>
								</view>
							</uni-swipe-action-item>
						</view>
					</uni-swipe-action>
					<view style="height:100rpx"></view>
					<view class="uni-publish">
						<navigator
							:url="`/pages/index/xiuxing/xiuxingItem?deleteItems=${JSON.stringify(deleteItems)}&items=${JSON.stringify(items)}`">
							<image class="send" src="../../static/index/icon/gongxiu_notice_add.png"></image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				menuIndex: 0,
				navList: [{
						name: '祈福',
						url: ''
					},
					{
						name: '修行',
						url: ''
					},
					{
						name: '商城',
						url: '/pages/shop/index'
					}
				],
				activeColor: '#007aff',
				styleType: 'text',
				leftNavList: [{
						imgurl: "../../static/index/home_icon_wish.png",
						content: "祈福",
						page: '../index/qifu/index'
					},
					{
						imgurl: "../../static/index/home_icon_excess.png",
						content: "超度",
						page: '../index/chaodu/index'
					},
					{
						imgurl: "../../static/index/home_icon_release.png",
						content: "放生",
						page: '../index/fangsheng/index'
					},
					{
						imgurl: "../../static/index/home_icon_light.png",
						content: "供灯",
						page: '../index/gongdeng/index'

					},
					{
						imgurl: "../../static/index/home_icon_answer.png",
						content: "答疑",
						page: '../index/answer/index'
					}
				],

				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				adIndicatorDots: false,
				autoplay: true,
				adAutoplay: true,
				interval: 2000,
				adInterval: 4000,
				duration: 1000,
				adDuration: 500,
				indexSwiperImgs: [
					"../../static/index/seat_double.png",
					"../../static/index/seat_sat.png",
					"../../static/index/seat_single.png"
				],
				oldDate: "辛丑年壬辰月丙午日",
				today: "04月28日",
				lunarDate: "十七",
				suit: "出行 嫁娶 会亲友 开市",
				avoid: "入宅 作灶 安门 修造",
				adSwiperImgs: [
					"../../static/index/ad1.jpg",
					"../../static/index/ad2.jpg",
					"../../static/index/ad3.jpg"
				],
				newsList: [{
						id: 1,
						title: "宽运法师对话李家杰博士(下),如何做到自在生命",
						tag: "头条",
						publish_at: "2021-04-27 17:45:25",
						thumb: "../../static/index/news-img.png"
					},
					{
						id: 2,
						title: "宽运法师对话李家杰博士(下),如何做到自在生命",
						tag: "头条",
						publish_at: "2021-04-27 17:45:25",
						thumb: "../../static/index/news-img.png"
					}
				],
				form: {
					content: '',
					checked: false
				},
				rightNavList: [{
						imgurl: "../../static/index/home_icon_music.png",
						content: "佛音",
						page: '../index/music/index'
					},
					{
						imgurl: "../../static/index/home_icon_book.png",
						content: "佛经",
						page: '../index/book/index'
					},
					{
						imgurl: "../../static/index/home_icon_yufo.png",
						content: "行善",
						page: '../index/xingshan/index'
					},
					{
						imgurl: "../../static/index/home_icon_nianfo.png",
						content: "念佛",
						page: '../index/nianfo/index'

					},
					{
						imgurl: "../../static/index/home_icon_calendar.png",
						content: "佛历",
						page: '../index/calendar/index'
					}
				],
				rank: 50000, //排名
				meritNumber: 0, //周排名功绩数目
				initialStatus: '未签到',
				//修行项目
				items: [{
						index: 0,
						imgUrl: '../../static/index/home_gongxiu.png',
						name: '共修',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 1,
						imgUrl: '../../static/index/home_qifu.png',
						name: '祈福',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 2,
						imgUrl: '../../static/index/home_fojing.png',
						name: '佛经',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 3,
						imgUrl: '../../static/index/home_foyin.png',
						name: '佛音',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 4,
						imgUrl: '../../static/index/home_nianfo.png',
						name: '念佛',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 5,
						imgUrl: '../../static/index/home_yufo.png',
						name: '浴佛',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 6,
						imgUrl: '../../static/index/home_jisi.png',
						name: '祭祀',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 7,
						imgUrl: '../../static/index/home_xiyou.png',
						name: '西游',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 8,
						imgUrl: '../../static/index/home_peifu.png',
						name: '培福',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 9,
						imgUrl: '../../static/index/home_chaodu.png',
						name: '超度',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 10,
						imgUrl: '../../static/index/home_rizhi.png',
						name: '修心日志',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 11,
						imgUrl: '../../static/index/home_xingshan.png',
						name: '日行一善',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 12,
						imgUrl: '../../static/index/home_zuochan.png',
						name: '坐禅',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					},
					{
						index: 13,
						imgUrl: '../../static/index/home_fangsheng.png',
						name: '放生',
						meritCount: 0,
						status: '去完成',
						isOpened: 'none'
					}
				],
				options2: [{
					text: '删除',
					style: {
						backgroundColor: '#ff0000'
					}
				}],
				deleteItems: []
			}
		},
		onLoad(option) {
			this.$request.api('/api/test/', {}).then(res => {
				console.log(res)
			}).catch(parmas => {
				console.log(432142)
			})
			if(option.items){
				this.items = JSON.parse(option.items);
				console.log("indexLength:"+this.items.length);
			}	
		},
		onShow() {
			try {
				const value = uni.getStorageSync('items');
				if (value) {
					console.log(value);
					this.items = value;
					try {
						uni.removeStorageSync('items');
					} catch (e) {
						// error
					}
				}
			} catch (e) {
				// error
			}
		},
		methods: {
			menuShow(index) {
				this.menuIndex = index;
				console.log(index)
			},
			navigate(item) {
				if (item.page) {
					uni.navigateTo({
						url: item.page
					});
				}

			},
			rightNavigate(item) {

				if (item.page) {
					console.log("2222")
					uni.navigateTo({
						url: item.page
					});
				}
			},
			change(item) {
				item.isOpened = 'right';
				// console.log('返回：', e);
			},
			bindClick(item, index) {
				//删除该项目
				this.items.splice(index, 1);
				this.deleteItems.push(item);
				this.deleteItems = [...new Set(this.deleteItems)];
			},
		}
	}
</script>
<style>
	page {
		background-color: rgb(247, 246, 242);
	}
</style>
<style lang="less" scoped>
	.sticky-nav {
		position: sticky;
		width: 100%;
		top: 0;
		z-index: 1;
	}

	.nav-bar {
		padding-top: 70rpx;
		padding-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(rgb(255, 152, 101), rgb(255, 122, 85));
		height: 125rpx;
	}

	.left-nav {
		ul {
			padding: 0;
			margin-left: 20rpx;
		}

		ul li {
			list-style: none;
			display: inline-block;
			height: 30px;
			line-height: 30px;
			width: 50px;
			text-align: center;
			color: rgb(255, 214, 205);
			font-size: 18px;
		}

		.active {
			color: #fff;
			font-size: 22px;
			border-bottom: 2px solid #fff;
		}
	}

	.content-text {
		font-size: 20px;
		color: #333;
		margin-right: 5rpx;
	}

	.right-nav {
		margin-right: 15rpx;

		.index_search {
			width: 45rpx;
			height: 45rpx;
			margin-right: 15rpx;
		}

		.index_info {
			width: 45rpx;
			height: 45rpx;
		}
	}

	.left-nav-title-box {
		background: linear-gradient(rgb(255, 152, 101), rgb(255, 122, 85));
		border-radius: 0 0 180rpx 180rpx;
		height: 280rpx;
		padding: 30rpx 0;

		.left-nav-titles {
			padding-bottom: 30rpx;
			display: flex;
			justify-content: space-around;
			flex-direction: row;
			flex: 1 1 auto;

			.left-nav-title-img {
				width: 105rpx;
				height: 105rpx;
			}

			.left-nav-title-content {
				display: block;
				text-align: center;
				color: white;
			}
		}

		.left-nav-center {
			margin-top: 15rpx;
			background-color: #fff;
			padding: 0 18rpx;

			.left-nav-btns {
				display: flex;
				flex-direction: row;
				padding: 25rpx 0;

				.jisi-img {
					width: 340rpx;
					height: 240rpx;
				}

				.left-nav-btnBox {
					padding-left: 32rpx;

					.left-nav-btn {
						display: flex;
						justify-content: left;
						width: 348rpx;
						border: 1px solid rgb(247, 246, 242);
						border-radius: 10rpx;
						align-items: center;

						.small-btn-img {
							width: 100rpx;
							height: 100rpx;
							padding-right: 50rpx;
						}

						.left-nav-btn-content {
							font-size: 40rpx;
						}
					}

					.left-nav-btn1 {
						margin-bottom: 25rpx;
					}
				}
			}
		}

		.nav-left-oldDate {
			font-size: 42rpx;
			margin-right: 10rpx;
		}

		.nav-left-today {
			font-size: 32rpx;
			margin-right: 90rpx;
			color: rgb(170, 170, 170);
		}

		.nav-left-lunarDate {
			font-size: 40rpx;
			color: rgb(204, 173, 82);
		}

		.foli-box {
			position: relative;
			padding-bottom: 25rpx;

			.nav-left-suit {
				color: rgb(0, 128, 0);
				font-size: 40rpx;
				margin-right: 15rpx;
			}

			.nav-left-thing {
				margin-right: 30rpx;
				color: rgb(170, 170, 170);
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.nav-left-aviod {
				color: rgb(255, 0, 0);
				font-size: 40rpx;
				margin-right: 15rpx;
			}

			.foli {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				bottom: 17rpx;
				right: 0;
			}
		}

		.ad-box {
			padding-bottom: 25rpx;

			.adSwiper {
				height: 57px;
			}
		}

		.left-nav-bottom {
			background-color: #fff;
			margin-top: 30rpx;
			padding-bottom: 100rpx;

			.news-list-box {
				display: flex;
				align-items: center;
			}

			.left-nav-headline-box {
				font-size: 45rpx;
				padding: 15rpx 0 15rpx 15rpx;
			}

			.news-item {
				padding: 16rpx 0;
			}

			.news-list-item {
				display: inline-block;
				padding-right: 10rpx;

				.news-list-item-title {
					width: 495rpx;
					height: 133rpx;
					word-wrap: break-word;
					font-size: 40rpx;
					padding-left: 20rpx;
					display: table-cell;
					vertical-align: top;
				}

				.news-list-item-tag {
					height: 59rpx;
					line-height: 59rpx;
					padding-left: 20rpx;
					color: rgb(170, 170, 170);

					.item-tag {
						padding-right: 20rpx;
					}
				}
			}
		}
	}

	.uni-margin-wrap {
		// width: 690rpx;
		width: 100%;

		.swiper {
			height: 320rpx;

			.swiper-item {
				display: block;
				height: 320rpx;
				line-height: 320rpx;
				text-align: center;
			}

			/deep/.uni-swiper-dot {
				border: 1px solid #FF713F !important;
			}
		}
	}

	.rank-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		width: 95%;
		height: 130rpx;
		margin: 0 0 15rpx 20rpx;
		border-radius: 20rpx;

		.week-rank-box {
			width: 100rpx;
			height: 100rpx;
			background-color: rgb(251, 124, 89);
			border-radius: 50%;
			text-align: center;
			margin-right: 20rpx;
			margin-left: 20rpx;

			.week-rank {
				color: #fff;
				padding: 15rpx 0 10rpx 0;
			}

			.rank {
				color: #fff;
			}
		}

		.share-btn {
			color: #000;
			// font-weight: bold;
			font-size: 38rpx;
			margin-right: 15rpx;
		}

		.share-img {
			width: 35rpx;
			height: 30rpx;
			margin-right: 30rpx;
		}

		.merit-img {
			width: 45rpx;
			height: 45rpx;
			margin-right: 8rpx;
		}

		.merit-content {
			color: rgb(121, 121, 121);
			margin-right: 170rpx;
		}

		.qiandao-status {
			color: #fff;
			background-color: rgb(209, 177, 90);
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 60rpx;
		}
	}

	.home-nav-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		width: 95%;
		height: 130rpx;
		margin: 0 0 15rpx 20rpx;
		border-radius: 20rpx;

		.nav-img {
			width: 95rpx;
			height: 95rpx;
			margin: 0 20rpx;
		}

		.nav-name {
			font-size: 38rpx;
			margin-right: 85rpx;
		}

		.right-distance {
			margin-right: 9rpx;
		}

		.nav-merit {
			width: 45rpx;
			height: 45rpx;
			margin-right: 5rpx;
		}

		.nav-count {
			color: rgb(121, 121, 121);
			margin-right: 170rpx;
		}

		.nav-status {
			color: #fff;
			background-color: rgb(209, 177, 90);
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 60rpx;
		}
	}

	/deep/.uni-swipe_button-group {
		height: 130rpx !important;
	}

	.uni-publish {
		position: fixed;
		right: 40rpx;
		bottom: 8%;
		z-index: 3;
	}

	.uni-publish .send {
		width: 120rpx;
		height: 120rpx;
	}
</style>