变更：pinia导入方式

pages/index/canvas_edit.vue

@@ -0,0 +1,23 @@
+<template>
+	<view class="content">
+		<custom-layout ref="layout" :showBottom="true" title="编辑" v-model="dataList"
+			@layoutquery="onQueryList" @scroll="onScroll">
+			<template #content></template>
+		</custom-layout>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	import {
+		ref,
+		reactive
+	} from 'vue'
+	onLoad(() => {})
+</script>
+
+<style lang="scss" scoped>
+
+</style>

pages/index/components/fortuneInfo.vue

@@ -0,0 +1,225 @@
+<template>
+	<view class="fortune_info_box pt10">
+		<view class="fortune_info flx-justify-between  pl30 pr30">
+			<view class="fortune_info_left flx-align-center">
+				<view class="fortune_info_l_l">
+					<view class="fortune_info_l_l_image">
+						<up-avatar :src="iconAvatar" size="143.25rpx"></up-avatar>
+						<!-- <view class="info_l_l_image_icon"></view> -->
+					</view>
+					<view class="fortune_info_l_l_but">切换</view>
+				</view>
+				<view class="ml30 fortune_info_l_r">
+					<view class="fortune_info_l_r_t">天秤座</view>
+					<view class="fortune_info_l_r_b">9.23 - 10.23</view>
+				</view>
+			</view>
+			<view class="fortune_info_right">
+				<view class="fortune_info_r_t">今日运势</view>
+				<view class="fortune_info_r_b">76</view>
+			</view>
+		</view>
+		<view class="fortune_info_list pb10">
+			<view class="fortune_info_item">
+				<view class="fortune_info_item_box">
+					<text class="fortune_info_item_box_text">金星</text>
+				</view>
+				<text class="fortune_info_text">守护星系</text>
+			</view>
+			<view class="fortune_info_item">
+				<view class="fortune_info_item_box">
+					<text class="fortune_info_item_box_text">珊瑚<br/>琥珀</text>
+				</view>
+				<text class="fortune_info_text">适配珠宝</text>
+			</view>
+			<view class="fortune_info_item">
+				<view class="fortune_info_item_box">
+					<text class="fortune_info_item_box_text">5</text>
+				</view>
+				<text class="fortune_info_text">幸运数字</text>
+			</view>
+			<view class="fortune_info_item">
+				<view class="fortune_info_item_box">
+					<view class="item_box_icon"></view>
+					<text class="fortune_info_item_box_text">红色</text>
+				</view>
+				<text class="fortune_info_text">幸运颜色</text>
+			</view>
+			<view class="fortune_info_item">
+				<view class="fortune_info_item_box">
+					<text class="fortune_info_item_box_text">处女座</text>
+				</view>
+				<text class="fortune_info_text">速配星座</text>
+			</view>
+		</view>
+</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue';
+	import {
+		onShow
+	} from "@dcloudio/uni-app";
+	// 引入组件
+
+	const iconAvatar = 'https://img.js.design/assets/img/65b211c3cdb6ea326421fd30.png#1f90f33c2d7b53402d0afbebb090d9b4'
+
+	// 定义变量内容
+
+	// 生命中期
+	onMounted(() => {
+		console.log('onMounted生命周期')
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import '@/static/css/common.scss';
+	.fortune_info_box {
+		.fortune_info {
+			.fortune_info_left {
+				.fortune_info_l_l {
+					position: relative;
+
+					.fortune_info_l_l_image {
+						border-radius: 50%;
+						width: 143.25rpx;
+						height: 143.01rpx;
+						background-color: $active-color;
+						position: relative;
+
+						&::before,
+						&::after {
+							content: '';
+							position: absolute;
+							border-radius: 50%;
+						}
+
+						&::after {
+							top: -4rpx;
+							left: -4rpx;
+							border: 4rpx solid #6BA9FE;
+							width: 100%;
+							height: 100%;
+						}
+
+						&::before {
+							top: -8rpx;
+							left: -8rpx;
+							border: 4rpx solid #973BFE;
+							width: calc(100% + 8rpx);
+							height: calc(100% + 8rpx);
+						}
+
+						.info_l_l_image_icon {
+							background-size: 100% 100%;
+							position: absolute;
+							top: 50%;
+							left: 50%;
+							transform: translate(-50%, -50%);
+						}
+					}
+
+					.fortune_info_l_l_but {
+						position: absolute;
+						bottom: -15rpx;
+						left: 50%;
+						transform: translateX(-50%);
+						background-color: #000;
+						color: #fff;
+						border-radius: 50rpx;
+						width: 70rpx;
+						height: 40rpx;
+						line-height: 40rpx;
+						font-size: 22rpx;
+						text-align: center;
+					}
+				}
+
+				.fortune_info_l_r {
+					.fortune_info_l_r_t {
+						font-size: 32rpx;
+						font-weight: 600;
+						color: rgba(0, 0, 0, 1);
+					}
+
+					.fortune_info_l_r_b {
+						font-size: 24rpx;
+						color: rgba(0, 0, 0, 1);
+						margin-top: 10rpx;
+					}
+				}
+			}
+
+			.fortune_info_right {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				margin-right: 30rpx;
+
+				.fortune_info_r_t {
+					font-size: 20rpx;
+					color: rgba(0, 0, 0, 1);
+				}
+
+				.fortune_info_r_b {
+					font-size: 48rpx;
+					font-weight: 400;
+					letter-spacing: 0rpx;
+					line-height: 63.64rpx;
+					color: rgba(0, 0, 0, 1);
+				}
+			}
+		}
+		.fortune_info_list{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 60rpx;
+			box-sizing: border-box;
+			margin-top: 60rpx;
+			.fortune_info_item{
+				width: calc(100% / 5);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				.fortune_info_item_box{
+					width: 116rpx;
+					height: 116rpx;
+					border-radius: 40rpx;
+					background: rgba(255, 255, 255, 0.47);
+					border: 2rpx solid rgba(175, 242, 253, 1);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					flex-direction: column;
+					.item_box_icon{
+						width: 60%;
+						height: 10rpx;
+						border-radius: 50rpx;
+						background-color: red;
+						margin-bottom: 10rpx;
+					}
+					.fortune_info_item_box_text{
+						font-size: 28rpx;
+						font-weight: 500;
+						letter-spacing: 0rpx;
+						line-height: 37.12rpx;
+						color: rgba(122, 221, 230, 1);
+					}
+				}
+				.fortune_info_text{
+					width: 100%;
+					font-size: 24rpx;
+					margin-top: 4rpx;
+					text-align: center;
+					color: rgba(145, 145, 145, 1);
+				}
+			}
+		}
+	}
+</style>

pages/index/fortune.vue

@@ -0,0 +1,156 @@
+<template>
+	<view class="content">
+		<custom-layout ref="layout" :showBottom="true" title="启运" v-model="dataList"
+			@layoutquery="onQueryList" @scroll="onScroll">
+			<template #content>
+				<fortune-info />
+				<up-sticky offset-top="0" customNav-height="0" :bg-color="scrollTop > 170 ? bgColor:''">
+					<up-tabs :list="tabs" :line-height="0" :active-style="{'fontSize':'30rpx','fontWeight':'600'}"></up-tabs>
+				</up-sticky>
+				<view class="demo-uni-row">
+					<view class="demo-uni-col" v-for="(item,index) in dataList" :key="index"></view>
+				</view>
+			</template>
+		</custom-layout>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		computed,
+		onMounted
+	} from 'vue';
+	import {
+		onShow
+	} from "@dcloudio/uni-app";
+	import useSystemStore from "~@/store/system.js"
+	// 引入组件
+	import fortuneInfo from './components/fortuneInfo.vue'
+	// 引入状态管理参数
+	const {
+		bgColor
+	} = useSystemStore()
+	// 定义变量内容
+	const searchValue = ref(1)
+	const tabs = ref([{
+			state: -1,
+			name: '热门新款',
+		},
+		{
+			state: 1,
+			name: '简约'
+		},
+		{
+			state: 2,
+			name: '卡通'
+		},
+		{
+			state: 3,
+			name: '复古'
+		},
+		{
+			state: 4,
+			name: '运动'
+		},
+		{
+			state: 5,
+			name: '艺术'
+		}, {
+			state: 6,
+			name: '节日'
+		}
+	])
+	const activeIndex = ref(-1)
+	const tabClick = (index, name) => {
+		console.log(index, name);
+	}
+	
+	// 业务列表
+	const dataList = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, ])
+	const num = ref(1)
+	const layout = ref()
+	const onQueryList = (event) => {
+		const {
+			pageNo,
+			pageSize
+		} = event
+		if (pageNo > 1) {
+			if (num.value < 2) {
+				num.value++
+				layout.value.complete(dataList.value);
+			} else {
+				layout.value.complete([]);
+			}
+		} else {
+			num.value = 2
+			layout.value.complete(dataList.value);
+		}
+	}
+	
+	// 检测页面滚动
+	const scrollTop = ref(0)
+	const onScroll = (event) => {
+		scrollTop.value = event
+	}
+	// 生命中期
+	onMounted(() => {
+
+	})
+</script>
+
+<style lang="scss" scoped>
+	.fortune_list {
+		margin-top: 30rpx;
+		background-color: #fff;
+		border-radius: 40rpx 40rpx 0rpx 0rpx;
+	}
+
+	// ======导航标签right标签=======
+	.tabs_list_box {
+		padding: 0 26rpx;
+		width: 100vw;
+		box-sizing: border-box;
+		background: var(--bgColor);
+
+		.tabs-rigth-fixed {
+			background: rgba(149, 250, 213, 1);
+			border-radius: 50rpx;
+			height: 40rpx;
+			line-height: 40rpx;
+			display: flex;
+			align-items: center;
+			padding: 0 6rpx;
+			box-sizing: border-box;
+			font-size: 20rpx;
+			font-family: SmileySans-Oblique-2;
+
+			text {
+				font-weight: 600;
+			}
+		}
+	}
+
+	// ======liet样式=======
+	.demo-uni-row {
+		width: 100%;
+		padding: 0 26rpx;
+		margin-top: 20rpx;
+		box-sizing: border-box;
+		display: flex;
+		flex-wrap: wrap;
+
+		.demo-uni-col {
+			width: calc((100% / 3) - 8rpx);
+			height: 400rpx;
+			background-color: #ccc;
+			border-radius: 13px;
+			margin-bottom: 10rpx;
+
+			&:nth-child(3n - 1) {
+				margin-right: 10rpx;
+				margin-left: 10rpx;
+			}
+		}
+	}
+</style>

pages/index/index.vue

@@ -0,0 +1,356 @@
+<template>
+	<view class="content">
+		<!-- <img class="top_image_bg" :src="mine_bg1" /> -->
+		<custom-layout ref="layout" :showBottom="true" :back="{show:false,logoShow:true}" v-model="dataList"
+			@layoutquery="onQueryList" @scroll="onScroll">
+			<template #navBarLeft>
+				<text class="ml10 nav_bar_title">专属机壳 秀出好心情</text>
+			</template>
+			<template #content>
+				<!-- 头部样式 -->
+				<view class="top_card mt10">
+					<view class="top_card_l">
+						<view class="top_card_l_t">
+							<view class="top_card_l_t_l">
+								<image class="l_t_l_icon" mode="aspectFit" :src="qing"></image>
+								<text class="l_t_l_text">智能小印</text>
+							</view>
+							<view class="top_card_l_t_r"></view>
+						</view>
+						<view class="top_card_l_b">
+							<up-icon custom-prefix="iconfont" name="icon-icon_aifilter" size="30"></up-icon>
+							<view class="top_card_l_b_c">
+								AI漫画风
+							</view>
+							<view class="l_b_button">
+								一键生成
+							</view>
+						</view>
+					</view>
+					<view class="top_card_r">
+						<view class="top_card_r_t">
+							<view class="">
+								<up-icon custom-prefix="iconfont" name="icon-icon_picture" size="30"></up-icon>
+							</view>
+							<view class="top_card_r_i">
+								<view class="top_card_r_i_text">导入图片</view>
+								<up-icon custom-prefix="iconfont" name="icon-icon_next" size="50rpx"></up-icon>
+							</view>
+						</view>
+						<view class="top_card_r_b">
+							<view class="">
+								<up-icon custom-prefix="iconfont" name="icon-icon_cutout" size="30"></up-icon>
+							</view>
+							<view class="top_card_r_i">
+								<view class="top_card_r_i_text">背景分离</view>
+								<up-icon custom-prefix="iconfont" name="icon-icon_next" size="50rpx"></up-icon>
+							</view>
+						</view>
+					</view>
+				</view>
+				<up-sticky offset-top="0" customNav-height="0" :bg-color="scrollTop > 170 ? bgColor:''">
+					<view class="tabs_list_box">
+						<view class="tabs_list">
+							<up-tabs :list="tabs" :line-height="0"
+								:active-style="{'fontSize':'30rpx','fontWeight':'600'}"></up-tabs>
+						</view>
+						<view class="tabs-rigth-fixed" @click="onNavigateTo('/pages/index/fortune')">
+							<up-icon custom-prefix="iconfont" name="icon-huoyan" size="34rpx"
+								color="rgba(237, 100, 100, 1)"></up-icon>
+							<text>运势UP!</text>
+							<up-icon name="arrow-right" size="24rpx"></up-icon>
+						</view>
+					</view>
+				</up-sticky>
+				<view class="demo-uni-row">
+					<view class="demo-uni-col" v-for="(item,index) in dataList" :key="index"
+						@click="onNavigateTo('/pages/index/canvas_edit')"></view>
+				</view>
+			</template>
+		</custom-layout>
+	</view>
+</template>
+<script setup>
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	import {
+		ref,
+		reactive,
+		computed
+	} from 'vue'
+
+	import useSystemStore from "~@/store/system.js"
+	
+	import qing from '~@/static/images/qing.png'
+	import iconNext from '~@/static/images/icon_next.svg'
+	const {
+		bgColor
+	} = useSystemStore()
+	const tabs = ref([{
+			state: -1,
+			name: '热门新款',
+		},
+		{
+			state: 1,
+			name: '简约'
+		},
+		{
+			state: 2,
+			name: '卡通'
+		},
+		{
+			state: 3,
+			name: '复古'
+		},
+		{
+			state: 4,
+			name: '运动'
+		},
+		{
+			state: 5,
+			name: '艺术'
+		},
+		{
+			state: 6,
+			name: '运动'
+		},
+		{
+			state: 7,
+			name: '艺术'
+		},
+	])
+
+	const dataList = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, ])
+	const num = ref(1)
+	const layout = ref()
+	const onQueryList = (event) => {
+		const {
+			pageNo,
+			pageSize
+		} = event
+		if (pageNo > 1) {
+			if (num.value < 2) {
+				num.value++
+				layout.value.complete(dataList.value);
+			} else {
+				layout.value.complete([]);
+			}
+		} else {
+			num.value = 2
+			layout.value.complete(dataList.value);
+		}
+	}
+
+	// 页面跳转
+	const onNavigateTo = (event) => {
+		uni.navigateTo({
+			url: event,
+		})
+	}
+	// 检测页面滚动
+	const scrollTop = ref(0)
+	const onScroll = (event) => {
+		scrollTop.value = event
+	}
+</script>
+
+<style lang="scss" scoped>
+	.nav_bar_title {
+		font-family: SmileySans-Oblique-2;
+		color: rgba(128, 128, 128, 1);
+		font-size: 24rpx;
+	}
+
+	// ===头部卡片样式===
+	.top_card {
+		width: 100%;
+		height: 300rpx;
+		padding: 0 26rpx;
+		box-sizing: border-box;
+		display: flex;
+		align-items: flex-start;
+		.top_card_l {
+			width: 46%;
+			height: 100%;
+			z-index: -1;
+
+			.top_card_l_t {
+				height: 100rpx;
+				display: flex;
+				align-items: flex-start;
+				position: relative;
+
+				.top_card_l_t_l {
+					height: calc(100%);
+					width: calc(76%);
+					background: linear-gradient(153.36deg, rgba(144, 252, 205, 1) 0%, rgba(176, 242, 255, 1) 100%);
+					position: relative;
+					top: 20rpx;
+					bottom: 60rpx;
+					border-radius: 20rpx 0 0 0;
+					display: flex;
+
+					&::after {
+						position: absolute;
+						content: '';
+						width: 20rpx;
+						height: 20rpx;
+						background-image: radial-gradient(20rpx at 0rpx 0rpx, rgba(176, 242, 255, 1) 20rpx, #fff 20rpx);
+						bottom: 20rpx;
+						right: 0;
+					}
+
+					.l_t_l_icon {
+						position: absolute;
+						top: -42rpx;
+						left: -20rpx;
+						z-index: 20;
+						width: 160rpx;
+						height: 160rpx;
+					}
+
+					.l_t_l_text {
+						font-size: 24rpx;
+						font-weight: 500;
+						letter-spacing: 0rpx;
+						color: rgba(53, 161, 171, 1);
+						text-align: right;
+						vertical-align: top;
+						word-break: keep-all;
+						position: absolute;
+						top: 24rpx;
+						right: 16rpx;
+					}
+				}
+
+				.top_card_l_t_r {
+					background-color: #fff;
+					height: 100%;
+					width: 24%;
+					border-radius: 20rpx 0 0 0;
+					position: absolute;
+					right: 0;
+
+				}
+			}
+
+			.top_card_l_b {
+				background-color: #fff;
+				width: 100%;
+				height: calc(100% - 100rpx);
+				border-radius: 20rpx 0 0 20rpx;
+				position: relative;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+
+				.top_card_l_b_c {
+					font-size: 24rpx;
+					font-weight: bold;
+					color: rgba(11, 17, 23, 1);
+					margin: 4rpx 0 16rpx 0;
+				}
+
+				.l_b_button {
+					width: fit-content;
+					height: 34rpx;
+					border-radius: 160rpx;
+					background: rgba(17, 20, 7, 1);
+					color: #fff;
+					font-size: 18rpx;
+					line-height: 34rpx;
+					text-align: center;
+					padding: 0 10rpx;
+					box-sizing: border-box;
+				}
+
+			}
+		}
+
+		.top_card_r {
+			width: 57%;
+			border-left: 1rpx solid rgba(242, 245, 247, 1);
+			height: 100%;
+			background-color: #fff;
+			border-radius: 0 20rpx 20rpx 0;
+
+			.top_card_r_t {
+				border-bottom: 1rpx solid rgba(242, 245, 247, 1);
+			}
+
+			.top_card_r_t,
+			.top_card_r_b {
+				width: 100%;
+				height: 50%;
+				display: flex;
+				justify-content: space-between;
+				padding: 20rpx;
+				box-sizing: border-box;
+
+				.top_card_r_i {
+					display: flex;
+					flex-direction: column;
+					align-items: flex-end;
+
+					.top_card_r_i_text {
+						margin-bottom: 20rpx;
+						font-size: 28rpx;
+						font-weight: 600;
+					}
+				}
+			}
+		}
+	}
+
+	// ======导航标签right标签=======
+	.tabs_list_box {
+		display: flex;
+		align-items: center;
+
+		.tabs_list {
+			width: calc(100% - 160rpx);
+		}
+
+		.tabs-rigth-fixed {
+			background: rgba(149, 250, 213, 1);
+			border-radius: 50rpx;
+			height: 40rpx;
+			line-height: 40rpx;
+			display: flex;
+			align-items: center;
+			padding: 0 6rpx;
+			box-sizing: border-box;
+			font-size: 20rpx;
+			font-family: SmileySans-Oblique-2;
+
+			text {
+				font-weight: 600;
+			}
+		}
+	}
+
+	// ======liet样式=======
+	.demo-uni-row {
+		width: 100%;
+		padding: 0 26rpx;
+		margin-top: 20rpx;
+		box-sizing: border-box;
+		display: flex;
+		flex-wrap: wrap;
+
+		.demo-uni-col {
+			width: calc((100% / 3) - 8rpx);
+			height: 400rpx;
+			background-color: #ccc;
+			border-radius: 13px;
+			margin-bottom: 10rpx;
+
+			&:nth-child(3n - 1) {
+				margin-right: 10rpx;
+				margin-left: 10rpx;
+			}
+		}
+	}
+</style>

store/system.js

@@ -0,0 +1,33 @@
+import {
+	defineStore
+} from 'pinia';
+
+export default defineStore('system', {
+	state: () => {
+		return {
+			bgColor:'#a6f9f9',
+			systemInfo:{}
+		};
+	},
+
+	actions: {
+		/* 
+			系统信息
+		 */
+		setInfo(info) {
+			const value = uni.getStorageSync('systemInfo');
+			if(value){
+				this.systemInfo  = value
+			}else{
+				this.systemInfo = uni.getSystemInfoSync()
+				this.save(); //保存本地
+			}
+			
+		},
+		/* 本地保存 */
+		save() {
+			//保存本地存储凭证
+			uni.setStorageSync("systemInfo", this.systemInfo);
+		}
+	},
+});

store/user.js

@@ -0,0 +1,45 @@
+import {
+	defineStore
+} from 'pinia';
+
+export default defineStore('user', {
+	state: () => {
+		return {
+			token: null,
+			nickname: null,
+			avatar: null,
+			ad: null,
+			adUnitId: null
+		};
+	},
+
+	actions: {
+
+		/* 
+			记录token
+		 */
+		login(info) {
+
+			this.$state = info; //更新个人信息
+			this.save(); //保存
+
+		},
+		/* 
+			个人信息
+		 */
+		setInfo(info) {
+			this.nickname = info.nickname;
+			this.avatar = info.avatar;
+			//this.save(); //保存本地
+		},
+		/* 本地保存 */
+		save() {
+			//保存本地存储凭证
+			uni.setStorageSync("userInfo", {
+				token: this.token,
+				nickname: this.nickname,
+				avatar: this.avatar
+			});
+		}
+	},
+});