baqing-shop/shop-app/subpackage/account/about-mall.vue

<template>
	<view class="about-mall-page">
		<view v-if="pageLoading" class="about-mall-state">
			<u-loading-icon mode="circle" />
		</view>

		<view v-else-if="pageError" class="about-mall-state">
			<u-empty mode="page" :text="pageError" icon-size="80" />
			<u-button type="primary" text="重试" size="small" custom-style="margin-top:24rpx" @click="loadConfig" />
		</view>

		<scroll-view v-else class="about-mall-scroll" scroll-y>
			<view class="about-hero">
				<image class="about-hero__logo" src="/static/logo.png" mode="aspectFit" />
				<text class="about-hero__name">巴青农资商城</text>
				<text class="about-hero__desc">专注农资供应，服务广大农户与经销商</text>
			</view>

			<view class="about-card">
				<text class="about-card__title">商城信息</text>
				<view class="about-row">
					<text class="about-row__label">货币符号</text>
					<text class="about-row__val">{{ about.currencySymbol }}</text>
				</view>
				<view class="about-row">
					<text class="about-row__label">商品销量展示</text>
					<text class="about-row__val">{{ about.showSales ? '展示' : '不展示' }}</text>
				</view>
			</view>

			<view v-if="about.hasFiling" class="about-card">
				<text class="about-card__title">备案信息</text>
				<view
					v-for="item in about.filings"
					:key="item.key"
					class="about-filing"
					@click="onFilingClick(item)"
				>
					<text class="about-filing__label">{{ item.label }}</text>
					<view class="about-filing__link">
						<text class="about-filing__no">{{ item.no }}</text>
						<u-icon name="arrow-right" color="#2e7d32" size="14" />
					</view>
				</view>
				<text class="about-card__tip">点击备案号可在浏览器查看主管机关公示页</text>
			</view>

			<view v-else class="about-card about-card--empty">
				<text class="about-card__title">备案信息</text>
				<text class="about-empty-text">暂无备案信息</text>
			</view>

			<view class="about-footer">
				<text class="about-footer__text">© 巴青农资商城</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getMallConfig } from '@/api/mallConfig'
import { mapMallAboutPage, openExternalLink } from '@/utils/mallConfigDisplay'

const pageLoading = ref(true)
const pageError = ref('')
const about = reactive({
	currencySymbol: '¥',
	showSales: true,
	filings: [],
	hasFiling: false
})

async function loadConfig() {
	pageLoading.value = true
	pageError.value = ''
	try {
		const res = await getMallConfig()
		const mapped = mapMallAboutPage(res.data)
		about.currencySymbol = mapped.currencySymbol
		about.showSales = mapped.showSales
		about.filings = mapped.filings
		about.hasFiling = mapped.hasFiling
	} catch (e) {
		pageError.value = (e && e.message) || '加载失败'
	} finally {
		pageLoading.value = false
	}
}

function onFilingClick(item) {
	if (!item || !item.link) return
	openExternalLink(item.link)
}

onShow(() => {
	loadConfig()
})
</script>

<style lang="scss" scoped>
.about-mall-page {
	min-height: 100vh;
	background: #f5f6f8;
}

.about-mall-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 48rpx;
}

.about-mall-scroll {
	height: 100vh;
	box-sizing: border-box;
}

.about-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 64rpx 32rpx 40rpx;
	background: linear-gradient(145deg, #3d9b6e 0%, #22c55e 55%, #86efac 100%);
}

.about-hero__logo {
	width: 120rpx;
	height: 120rpx;
	border-radius: 24rpx;
	background: rgba(255, 255, 255, 0.9);
}

.about-hero__name {
	margin-top: 24rpx;
	font-size: 36rpx;
	font-weight: 600;
	color: #fff;
}

.about-hero__desc {
	margin-top: 12rpx;
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
}

.about-card {
	margin: 24rpx 24rpx 0;
	padding: 28rpx 28rpx 20rpx;
	background: #fff;
	border-radius: 16rpx;
}

.about-card--empty {
	padding-bottom: 28rpx;
}

.about-card__title {
	display: block;
	margin-bottom: 20rpx;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
}

.about-card__tip {
	display: block;
	margin-top: 16rpx;
	font-size: 22rpx;
	color: #999;
	line-height: 1.5;
}

.about-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.about-row:last-child {
	border-bottom: none;
}

.about-row__label {
	font-size: 28rpx;
	color: #666;
}

.about-row__val {
	font-size: 28rpx;
	color: #333;
}

.about-filing {
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.about-filing:last-of-type {
	border-bottom: none;
}

.about-filing__label {
	display: block;
	font-size: 26rpx;
	color: #999;
	margin-bottom: 8rpx;
}

.about-filing__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.about-filing__no {
	flex: 1;
	font-size: 28rpx;
	color: #2e7d32;
	word-break: break-all;
}

.about-empty-text {
	font-size: 28rpx;
	color: #999;
}

.about-footer {
	padding: 48rpx 32rpx 64rpx;
	text-align: center;
}

.about-footer__text {
	font-size: 24rpx;
	color: #bbb;
}
</style>