purchase-let/pagesOrder/store/index.vue

<template>
	<view
		style="--view-theme: rgb(32, 177, 40);--view-priceColor:#FF7600;--view-minorColor:rgba(108, 198, 94, 0.5);--view-minorColorT:rgba(66, 202, 77, 0.1);--view-bntColor:#FE960F;--view-gradient:#4DEA4D">
		<view class='cash-withdrawal'>
			<!-- #ifdef MP -->
			<view class="accountTitle">
				<view :style="{height:getHeight.barTop+'px'}"></view>
				<view class="sysTitle acea-row row-center-wrapper" :style="{height:getHeight.barHeight+'px'}">
					<text class="iconfont icon-ic_leftarrow" @click="goarrow"></text>
				</view>
			</view>
			<view :style="{height:(getHeight.barTop+getHeight.barHeight)+'px'}"></view>
			<!-- #endif -->
			<view class="header">
				<view class="headerCon">
					<view class="money">000</view>
					<view>可提现金额</view>
				</view>
			</view>
		</view>
		<view class="content">

			<up-transition :show="true" mode="slide-left">
				<view v-if="goodsList1.length>0">
						<navigator :url="item.url" hover-class="navigator-hover" class="card" v-for="(item,index) in goodsList1" :key='index'>
							<view class="card-content">
								<view class="card-content-r">
									<view class="title ellipsis">
										{{item.name}}
									</view>
								</view>
							</view>
						</navigator>
				</view>
				<up-empty @click='test2' v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</up-empty>
			</up-transition>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		menuList
	} from "@/api/store"
	const goodsList1 = ref([])
	const getGoodsList = async () => {
		let res = await menuList({})
		goodsList1.value = res.data.menu
	}
	getGoodsList()
</script>

<style lang="scss">
	.cash-withdrawal {
		.accountTitle {
			background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 99;

			.sysTitle {
				width: 100%;
				position: relative;
				font-weight: 500;
				color: #fff;
				font-size: 30rpx;

				.iconfont {
					position: absolute;
					font-size: 36rpx;
					left: 11rpx;
					width: 60rpx;
				}
			}
		}

		.header {
			width: 100%;
			height: 310rpx;
			background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
			font-size: 30rpx;
			font-weight: 400;
			color: #F5F5F5;
			text-align: center;
			padding-top: 88rpx;
			position: relative;



			.headerCon {
				background-image: url('../static/cashBg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 100%;
				height: 278rpx;
			}

			.money {
				font-size: 76rpx;
				font-weight: 600;
				color: #FFFFFF;
				font-family: 'Regular';
				margin-bottom: 16rpx;
			}
		}
	}

	.content {
		padding: 20rpx;
		padding-bottom: 150rpx;

		.card {
			width: 350rpx;
			margin: 2rpx;
			padding: 92rpx;
			box-sizing: border-box;
			background-color: white;
			display: inline-block;



			.card-content {
				display: flex;
				position: relative;

				.card-content-l {
					margin-right: 20rpx;
					position: relative;

					.status {
						width: 152rpx;
						height: 40rpx;
						background-color: rgba(0, 0, 0, .3);
						text-align: center;
						color: white;
						font-size: 24rpx;
						line-height: 40rpx;
						position: absolute;
						bottom: 0;
					}
				}

				.card-content-r {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 30rpx;
						width: 500rpx;
					}

					.need {
						color: #777777;
						font-size: 24rpx;
					}

					.ipt {
						display: flex;
						height: 56rpx;

					}
				}
			}
		}
	}
</style>