Skip to content

Commit fb6864c

Browse files
gitboyzcfgitboyzcf
committed
feat(custom): 添加vue路由、登录界面、以及权限相关（有瑕疵）
1 parent f14ea9f commit fb6864c

File tree

17 files changed

+311
-45
lines changed

17 files changed

+311
-45
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
- 🍍 [使用 Pinia 的状态管理](https://pinia.vuejs.org)
1414

15-
- 👇 内置 Z-Paging: 集成了高性能、易用的下拉分页组件，轻松实现下拉刷新和上拉加载更多等功能。
15+
- 👇 内置 [Z-Paging](https://github.com/SmileZXLee/uni-z-paging): 集成了高性能、易用的下拉分页组件，轻松实现下拉刷新和上拉加载更多等功能。
1616

1717
- 🎨 [UnoCSS](https://github.com/unocss/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎
1818

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@
8383
"@dcloudio/uni-cli-shared": "3.0.0-4060420250429001",
8484
"@dcloudio/uni-stacktracey": "3.0.0-4060420250429001",
8585
"@dcloudio/vite-plugin-uni": "3.0.0-4060420250429001",
86+
"@iconify-json/carbon": "^1.2.8",
8687
"@iconify-json/ep": "^1.1.15",
8788
"@uni-helper/vite-plugin-uni-components": "^0.1.0",
8889
"@uni-helper/vite-plugin-uni-layouts": "^0.1.10",

‎pnpm-lock.yaml‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414

1515
<style lang="scss">
1616
/*每个页面公共css */
17-
@import 'nutui-uniapp/styles/index.scss';
17+
@import './styles/index.scss';
18+
1819
page,
1920
html,
2021
body {

‎src/main.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import { createSSRApp } from 'vue'
22
import App from './App.vue'
33
import { setupStore } from './store'
44
import { setupRouter } from './router'
5-
import 'virtual:uno.css'
6-
import './styles/index.scss'
5+
import 'uno.css'
76
export function createApp() {
87
const app = createSSRApp(App)
98
setupStore(app)

‎src/pages.json‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"autoscan": true,
44
"custom": {
55
"^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue",
6-
"^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue"
6+
"^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue"
77
}
88
},
99
"pages": [
@@ -47,6 +47,25 @@
4747
}
4848
],
4949
"subPackages": [
50+
{
51+
"root": "pages/contact",
52+
"pages": [
53+
{
54+
"path": "index",
55+
"aliasPath": "/contact",
56+
"name": "contact",
57+
"style": {
58+
"navigationBarTitleText": "联系我们",
59+
"transparentTitle": "auto"
60+
},
61+
"meta": {
62+
"middleware": [
63+
"test"
64+
]
65+
}
66+
}
67+
]
68+
},
5069
{
5170
"root": "pages/common",
5271
"pages": [

‎src/pages/contact/index.vue‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<script setup>
2+
import wechatImage from '@/static/images/contact/image-wechat.png?url'
3+
4+
const userStore = useUserStore()
5+
const userInfo = computed(() => userStore.userInfo)
6+
const router = useRouter()
7+
8+
// 添加中间件拦截 (只有路由对象中 携带test的路由会走此部分)
9+
// /src/router/helper.js
10+
// defineMiddleware(
11+
// 'test',
12+
// function (router) {
13+
// router.beforeEach((to, from, next) => {
14+
// uni.showModal({
15+
// title: '提示',
16+
// content: '触发了路由中间件，是否允许通过?',
17+
// success: (res) => {
18+
// if (res.cancel) {
19+
// next(false)
20+
// } else {
21+
// next()
22+
// }
23+
// }
24+
// })
25+
// })
26+
27+
// router.afterEach(() => {})
28+
// },
29+
// { router }
30+
// )
31+
32+
// 复制文本到剪贴板
33+
function handleCopy(text) {
34+
uni.setClipboardData({
35+
data: text,
36+
success: () => {
37+
showToast('复制成功')
38+
}
39+
})
40+
}
41+
42+
// 拨打电话
43+
function handleCall(phone) {
44+
uni.makePhoneCall({
45+
phoneNumber: phone,
46+
fail: () => {
47+
showToast('拨打电话失败')
48+
}
49+
})
50+
}
51+
52+
// 预览图片
53+
function previewImage(url) {
54+
console.log('previewImage', url)
55+
uni.previewImage({
56+
urls: [url],
57+
current: url
58+
})
59+
}
60+
61+
// 保存二维码到相册
62+
function handleSaveQrCode() {
63+
uni.saveImageToPhotosAlbum({
64+
filePath: wechatImage,
65+
success: () => {
66+
showToast('保存成功')
67+
},
68+
fail: () => {
69+
showToast('保存失败，请检查权限设置', 'none')
70+
}
71+
})
72+
}
73+
74+
// 显示提示信息
75+
function showToast(title, icon = 'success') {
76+
uni.showToast({
77+
title,
78+
icon,
79+
duration: 2000000
80+
})
81+
}
82+
</script>
83+
84+
<template>
85+
<view class="contact-page h-full flex flex-col bg-gray-50">
86+
<view class="header-section relative">
87+
<image
88+
src="@/static/images/contact/image-banner.jpg"
89+
mode="aspectFill"
90+
class="h-50 w-full rounded-b-3xl object-cover shadow-md"
91+
/>
92+
93+
<view class="absolute inset-0 rounded-b-3xl from-black/0 to-black/60 bg-gradient-to-b"></view>
94+
95+
<view class="absolute bottom-4 left-0 w-full p-6 text-white">
96+
<view class="mb-1 text-2xl font-bold"> 联系我们 </view>
97+
<view class="text-sm text-white/80"> 为您提供有限的帮助与支持 </view>
98+
</view>
99+
</view>
100+
101+
<view class="contact-cards relative z-10 px-4 -mt-4">
102+
<view class="overflow-hidden rounded-xl bg-white shadow-lg">
103+
<view class="border-b border-gray-100 px-5 py-4">
104+
<view class="text-lg text-gray-800 font-bold"> 联系方式 </view>
105+
</view>
106+
107+
<view class="divide-y divide-gray-100">
108+
<view class="contact-item" @click="handleCopy(userInfo.email)">
109+
<view class="icon-container">
110+
<view class="i-carbon-email size-6 text-blue-500"></view>
111+
</view>
112+
<view class="info-container">
113+
<view class="label"> 电子邮箱 </view>
114+
<view class="value">
115+
{{ userInfo.email }}
116+
</view>
117+
</view>
118+
<view class="action-container">
119+
<view class="copy-button"> 复制 </view>
120+
</view>
121+
</view>
122+
123+
<view class="contact-item" @click="handleCopy(userInfo.wechat)">
124+
<view class="icon-container">
125+
<view class="i-carbon-logo-wechat size-6 text-blue-500"></view>
126+
</view>
127+
<view class="info-container">
128+
<view class="label"> 微信号 </view>
129+
<view class="value">
130+
{{ userInfo.wechat }}
131+
</view>
132+
</view>
133+
<view class="action-container">
134+
<view class="copy-button"> 复制 </view>
135+
</view>
136+
</view>
137+
</view>
138+
</view>
139+
140+
<view class="mt-4 overflow-hidden rounded-xl bg-white shadow-lg">
141+
<view class="border-b border-gray-100 px-5 py-4">
142+
<view class="text-lg text-gray-800 font-bold"> 微信二维码 </view>
143+
</view>
144+
<view class="flex flex-col items-center p-5">
145+
<image
146+
:src="wechatImage"
147+
mode="aspectFit"
148+
class="h-50 w-50 border border-gray-100 rounded-lg"
149+
@click="previewImage(wechatImage)"
150+
/>
151+
<view class="mt-3 text-sm text-gray-500"> 点击二维码可放大查看 </view>
152+
<button
153+
class="mt-4 w-full rounded-lg bg-blue-500 py-1 text-white font-medium transition-colors duration-200 active:bg-blue-600"
154+
hover-class="bg-blue-600"
155+
@click="handleSaveQrCode"
156+
>
157+
保存二维码到相册
158+
</button>
159+
</view>
160+
</view>
161+
</view>
162+
163+
<view class="footer-section mt-auto p-4 text-center text-xs text-gray-400">
164+
<view class="mt-1"> © {{ new Date().getFullYear() }} {{ userInfo.name }} 版权所有 </view>
165+
</view>
166+
</view>
167+
</template>
168+
169+
<style scoped>
170+
/* 联系方式项样式 */
171+
.contact-item {
172+
@apply flex items-center px-5 py-4 active:bg-gray-50 transition-colors duration-200;
173+
}
174+
175+
.icon-container {
176+
@apply flex-none w-10 flex items-center justify-center;
177+
}
178+
179+
.info-container {
180+
@apply flex-1 min-w-0;
181+
}
182+
183+
.label {
184+
@apply text-sm text-gray-500;
185+
}
186+
187+
.value {
188+
@apply text-gray-800 font-medium mt-0.5;
189+
}
190+
191+
.action-container {
192+
@apply flex-none ml-2;
193+
}
194+
195+
.copy-button {
196+
@apply flex items-center text-sm px-3 py-1.5 rounded-full bg-gray-100 text-gray-600 active:bg-gray-200 transition-colors duration-200;
197+
}
198+
199+
.call-button {
200+
@apply flex items-center text-sm px-3 py-1.5 rounded-full bg-blue-50 text-blue-600 active:bg-blue-100 transition-colors duration-200;
201+
}
202+
</style>

‎src/pages/index/user/index.vue‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -43,44 +43,49 @@
4343
window.open(userInfo.value.url)
4444
}
4545
46-
async function handleLogout() {
47-
const result = uni.showModal({
46+
function handleLogout() {
47+
uni.showModal({
4848
title: '提示',
4949
content: '确定要退出登录吗?',
5050
showCancel: true,
5151
confirmText: '确定',
52-
cancelText: '取消'
52+
cancelText: '取消',
53+
success: async function (res) {
54+
if (res.confirm) {
55+
await userStore.logout()
56+
uni.showToast({
57+
title: '退出登录成功',
58+
icon: 'success'
59+
})
60+
setTimeout(() => {
61+
router.replace({
62+
name: '/user'
63+
})
64+
}, 500)
65+
} else if (res.cancel) {
66+
console.log('用户点击取消')
67+
}
68+
}
5369
})
54-
55-
if (result.confirm) {
56-
await userStore.logout()
57-
58-
uni.showToast({
59-
title: '退出登录成功',
60-
icon: 'success'
61-
})
62-
63-
await sleep()
64-
65-
router.push({
66-
path: '/login'
67-
})
68-
}
6970
}
7071
</script>
7172

7273
<template>
7374
<view class="h-full flex flex-col">
7475
<view class="relative overflow-hidden">
75-
<view class="absolute inset-0 bg-primary-500"></view>
76+
<view class="absolute inset-0 bg-blue-500"></view>
7677

77-
<view class="absolute h-42 w-42 rounded-full bg-white opacity-10 -right-10 -top-10"></view>
78-
<view class="absolute bottom-0 right-20 h-20 w-20 rounded-full bg-white opacity-10"></view>
78+
<view
79+
class="absolute h-42 w-42 rounded-full bg-white opacity-10 -right-10 -top-10 z-1"
80+
></view>
81+
<view
82+
class="absolute bottom-0 right-20 h-20 w-20 rounded-full bg-white opacity-10 z-1"
83+
></view>
7984

8085
<view class="h-[--safe-top]"></view>
8186

8287
<view
83-
class="relative flex items-center px-6 pb-12 pt-12 bg-blue"
88+
class="relative flex items-center px-6 pb-12 pt-12 bg-blue-500"
8489
hover-class="opacity-90"
8590
@click="handleLogin"
8691
>
@@ -115,7 +120,7 @@
115120
@click="handleMenuItemClick(item)"
116121
>
117122
<view class="w-10 flex flex-none items-center justify-center text-gray-500">
118-
<view class="size-6 text-primary-500" :class="item.icon"></view>
123+
<view class="size-6 text-blue-500" :class="item.icon"></view>
119124
</view>
120125

121126
<view class="flex-1 text-gray-700 font-medium">
@@ -140,7 +145,7 @@
140145
<view v-else class="mb-6 mt-auto text-center text-xs text-gray-400">
141146
<view>
142147
Supported by
143-
<text class="text-primary-500 underline active:text-primary-700" @click="onEnterpriseClick">
148+
<text class="text-blue-500 underline active:text-blue-700" @click="onEnterpriseClick">
144149
{{ userInfo.name }}
145150
</text>
146151
v{{ version }}

0 commit comments

Comments
 (0)