besiweb/pages/index/xiuxing/xiuxingItem.vue

<template>
	<view>
		<view class="sticky-nav">
			<view class="nav-box">
				<image src="../../../static/index/answer/trun_left_black.png" class="answer_back" @click="backHome">
				</image>
				<text class="answer-text">修行项目</text>
			</view>
		</view>
		<view v-for="(item,index) in deleteItems" :key="index" 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>
			<view class="nav-status" @tap="addItem(item,index)">添加</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [],
				deleteItems:[]
			}
		},
		onLoad(option) {
			this.deleteItems = JSON.parse(option.deleteItems);
			this.items = JSON.parse(option.items);
			console.log(this.items.length);
			for (let i = 0; i < this.deleteItems.length; i++) {
				this.deleteItems[i].imgUrl = "../" + this.deleteItems[i].imgUrl;
			}
		},
		methods: {
			backHome() {
				uni.navigateBack({
					delta: 1
				});
			},
			addItem(item,index) {
				//删除此项,添加到首页的数组里并跳转到首页
				this.deleteItems.splice(index,1);
				console.log("deleteLength:"+this.deleteItems.length);
				//获取此项目的index
				let itemIndex = item.index;
				//处理图片路径
				item.imgUrl = item.imgUrl.substring(3);
				//添加此项到首页
				this.items.splice(itemIndex,1,item);
				this.items = [...new Set(this.items)];
				uni.setStorageSync('items', this.items);
				//跳转到首页
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
</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-box {
		width: 100%;

		display: flex;
		align-items: center;
		background: #fff;
		height: 95rpx;

		.answer_back {
			width: 45rpx;
			height: 45rpx;
			padding-left: 20rpx;
			padding-right: 215rpx;
		}

		.answer-text {
			font-size: 38rpx;
			color: #000;
		}
	}

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

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

		.nav-name {
			font-size: 30rpx;
			margin-right: 355rpx;
			font-weight: bold;
		}

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

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