first commit
This commit is contained in:
sexygoat
9
.claude/settings.local.json
Normal file
9
.claude/settings.local.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(git add:*)"
|
||||||
|
],
|
||||||
|
"deny": [],
|
||||||
|
"ask": []
|
||||||
|
}
|
||||||
|
}
|
||||||
94
.gitignore
vendored
Normal file
94
.gitignore
vendored
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage/
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# next.js build output
|
||||||
|
.next
|
||||||
|
|
||||||
|
# nuxt.js build output
|
||||||
|
.nuxt
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# uni-app
|
||||||
|
unpackage/
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# VS Code
|
||||||
|
.vscode/
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
354
App.vue
Normal file
354
App.vue
Normal file
@@ -0,0 +1,354 @@
|
|||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "uview-plus/index.scss";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* 主色 */
|
||||||
|
--primary: #0A84FF;
|
||||||
|
--primary-light: #5AC8FA;
|
||||||
|
--primary-dark: #0066CC;
|
||||||
|
|
||||||
|
/* 辅助色 */
|
||||||
|
--success: #30D158;
|
||||||
|
--success-light: rgba(48, 209, 88, 0.12);
|
||||||
|
--warning: #FF9F0A;
|
||||||
|
--warning-light: rgba(255, 159, 10, 0.12);
|
||||||
|
--danger: #FF453A;
|
||||||
|
--danger-light: rgba(255, 69, 58, 0.12);
|
||||||
|
--info: #5E5CE6;
|
||||||
|
|
||||||
|
/* 扩展色 */
|
||||||
|
--purple: #BF5AF2;
|
||||||
|
--pink: #FF375F;
|
||||||
|
--teal: #64D2FF;
|
||||||
|
--indigo: #5E5CE6;
|
||||||
|
|
||||||
|
/* 中性色 - 灰阶 */
|
||||||
|
--gray-100: #F2F2F7;
|
||||||
|
--gray-200: #E5E5EA;
|
||||||
|
--gray-300: #D1D1D6;
|
||||||
|
--gray-400: #C7C7CC;
|
||||||
|
--gray-500: #AEAEB2;
|
||||||
|
--gray-600: #8E8E93;
|
||||||
|
--gray-700: #636366;
|
||||||
|
--gray-800: #3C3C43;
|
||||||
|
--gray-900: #000000;
|
||||||
|
|
||||||
|
/* 背景色 */
|
||||||
|
--bg-primary: #FFFFFF;
|
||||||
|
--bg-secondary: #F2F2F7;
|
||||||
|
--bg-tertiary: #FFFFFF;
|
||||||
|
--bg-grouped: #F2F2F7;
|
||||||
|
|
||||||
|
/* 文字色 */
|
||||||
|
--text-primary: #000000;
|
||||||
|
--text-secondary: #3C3C43;
|
||||||
|
--text-tertiary: rgba(60, 60, 67, 0.6);
|
||||||
|
--text-quaternary: rgba(60, 60, 67, 0.3);
|
||||||
|
--text-inverse: #FFFFFF;
|
||||||
|
|
||||||
|
/* 阴影 */
|
||||||
|
--shadow-small: 0 2rpx 4rpx rgba(0, 0, 0, 0.06);
|
||||||
|
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||||
|
--shadow-large: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
|
||||||
|
--shadow-extra-large: 0 16rpx 48rpx rgba(0, 0, 0, 0.16);
|
||||||
|
|
||||||
|
/* 圆角 */
|
||||||
|
--radius-small: 8rpx;
|
||||||
|
--radius-medium: 16rpx;
|
||||||
|
--radius-large: 24rpx;
|
||||||
|
--radius-extra-large: 32rpx;
|
||||||
|
--radius-full: 9999rpx;
|
||||||
|
|
||||||
|
/* 间距 */
|
||||||
|
--space-xs: 8rpx;
|
||||||
|
--space-sm: 16rpx;
|
||||||
|
--space-md: 24rpx;
|
||||||
|
--space-lg: 32rpx;
|
||||||
|
--space-xl: 40rpx;
|
||||||
|
--space-2xl: 48rpx;
|
||||||
|
|
||||||
|
/* 过渡 */
|
||||||
|
--transition-fast: 0.2s ease-out;
|
||||||
|
--transition-normal: 0.3s ease-out;
|
||||||
|
--transition-slow: 0.5s ease-out;
|
||||||
|
|
||||||
|
/* 边框色 */
|
||||||
|
--border-color: var(--gray-200);
|
||||||
|
--border-light: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "MiSans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
page {
|
||||||
|
color: var(--text-primary);
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
max-width: 750rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border-radius: var(--radius-medium);
|
||||||
|
padding: var(--space-md);
|
||||||
|
border: 1rpx solid var(--border-color);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-elevated {
|
||||||
|
box-shadow: var(--shadow-large);
|
||||||
|
transform: translateY(-4rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-interactive {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 34rpx;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--text-primary);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.caption {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-xs { margin-top: var(--space-xs); }
|
||||||
|
.mt-sm { margin-top: var(--space-sm); }
|
||||||
|
.mt-md { margin-top: var(--space-md); }
|
||||||
|
.mt-lg { margin-top: var(--space-lg); }
|
||||||
|
.mt-xl { margin-top: var(--space-xl); }
|
||||||
|
.mt-30 { margin-top: 30rpx; }
|
||||||
|
.mt-20 { margin-top: 20rpx; }
|
||||||
|
|
||||||
|
.mb-xs { margin-bottom: var(--space-xs); }
|
||||||
|
.mb-sm { margin-bottom: var(--space-sm); }
|
||||||
|
.mb-md { margin-bottom: var(--space-md); }
|
||||||
|
.mb-lg { margin-bottom: var(--space-lg); }
|
||||||
|
.mb-xl { margin-bottom: var(--space-xl); }
|
||||||
|
|
||||||
|
.p-xs { padding: var(--space-xs); }
|
||||||
|
.p-sm { padding: var(--space-sm); }
|
||||||
|
.p-md { padding: var(--space-md); }
|
||||||
|
.p-lg { padding: var(--space-lg); }
|
||||||
|
.p-xl { padding: var(--space-xl); }
|
||||||
|
|
||||||
|
.flex-row { display: flex; align-items: center; }
|
||||||
|
.flex-row-g8 { display: flex; align-items: center; gap: var(--space-xs); }
|
||||||
|
.flex-row-g16 { display: flex; align-items: center; gap: var(--space-sm); }
|
||||||
|
.flex-row-g20 { display: flex; align-items: center; gap: 20rpx; }
|
||||||
|
.flex-row-g24 { display: flex; align-items: center; gap: var(--space-md); }
|
||||||
|
.flex-row-sb { display: flex; align-items: center; justify-content: space-between; }
|
||||||
|
.flex-row-center { display: flex; align-items: center; justify-content: center; }
|
||||||
|
|
||||||
|
.flex-col { display: flex; flex-direction: column; }
|
||||||
|
.flex-col-g8 { display: flex; flex-direction: column; gap: var(--space-xs); }
|
||||||
|
.flex-col-g16 { display: flex; flex-direction: column; gap: var(--space-sm); }
|
||||||
|
.flex-col-g20 { display: flex; flex-direction: column; gap: 20rpx; }
|
||||||
|
.flex-col-g24 { display: flex; flex-direction: column; gap: var(--space-md); }
|
||||||
|
.flex-col-center-g20 { display: flex; flex-direction: column; gap: 20rpx; align-items: center; justify-content: center; }
|
||||||
|
.flex-col-center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||||
|
|
||||||
|
.w-100 { width: 100%; }
|
||||||
|
.h-100 { height: 100%; }
|
||||||
|
|
||||||
|
.interactive {
|
||||||
|
transition: all var(--transition-normal);
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-apple {
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-medium);
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 28rpx;
|
||||||
|
transition: all var(--transition-normal);
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-apple {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-xs) var(--space-sm);
|
||||||
|
background: var(--gray-100);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
|
||||||
|
&.tag-success {
|
||||||
|
background: var(--success-light);
|
||||||
|
color: var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tag-primary {
|
||||||
|
background: rgba(10, 132, 255, 0.12);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tag-warning {
|
||||||
|
background: var(--warning-light);
|
||||||
|
color: var(--warning);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tag-danger {
|
||||||
|
background: var(--danger-light);
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-apple {
|
||||||
|
width: 100%;
|
||||||
|
height: 8rpx;
|
||||||
|
background: var(--gray-200);
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, var(--primary), var(--primary-light));
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
transition: width var(--transition-normal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-apple {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
padding: 20rpx;
|
||||||
|
background: var(--gray-100);
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
&.btn-primary {
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-success {
|
||||||
|
background: var(--success);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-warning {
|
||||||
|
background: var(--warning);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-danger {
|
||||||
|
background: var(--danger);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-secondary {
|
||||||
|
background: var(--gray-300);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-mini {
|
||||||
|
min-height: 40rpx;
|
||||||
|
padding: 0 16rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-large {
|
||||||
|
min-height: 64rpx;
|
||||||
|
padding: 0 32rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: var(--radius-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 12rpx;
|
||||||
|
|
||||||
|
.btn-apple {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-group-vertical {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 通用背景色 */
|
||||||
|
.bg-primary { background-color: var(--bg-primary); }
|
||||||
|
.bg-secondary { background-color: var(--bg-secondary); }
|
||||||
|
.bg-success { background-color: var(--success); }
|
||||||
|
.bg-warning { background-color: var(--warning); }
|
||||||
|
.bg-danger { background-color: var(--danger); }
|
||||||
|
|
||||||
|
/* 通用文字色 */
|
||||||
|
.text-primary { color: var(--text-primary); }
|
||||||
|
.text-secondary { color: var(--text-secondary); }
|
||||||
|
.text-tertiary { color: var(--text-tertiary); }
|
||||||
|
.text-inverse { color: var(--text-inverse); }
|
||||||
|
.text-success { color: var(--success); }
|
||||||
|
.text-warning { color: var(--warning); }
|
||||||
|
.text-danger { color: var(--danger); }
|
||||||
|
</style>
|
||||||
7
api/index.js
Normal file
7
api/index.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export { authApi } from './modules/auth.js';
|
||||||
|
export { assetApi } from './modules/asset.js';
|
||||||
|
export { deviceApi } from './modules/device.js';
|
||||||
|
export { exchangeApi } from './modules/exchange.js';
|
||||||
|
export { orderApi } from './modules/order.js';
|
||||||
|
export { realnameApi } from './modules/realname.js';
|
||||||
|
export { walletApi } from './modules/wallet.js';
|
||||||
35
api/modules/asset.js
Normal file
35
api/modules/asset.js
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import request from '@/utils/request.js';
|
||||||
|
|
||||||
|
export const assetApi = {
|
||||||
|
getInfo(identifier) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/asset/info',
|
||||||
|
method: 'GET',
|
||||||
|
data: { identifier }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getPackageHistory(identifier, page, page_size, params = {}) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/asset/package-history',
|
||||||
|
method: 'GET',
|
||||||
|
data: { identifier, page, page_size, ...params }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getPackages(identifier) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/asset/packages',
|
||||||
|
method: 'GET',
|
||||||
|
data: { identifier }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
refresh(identifier) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/asset/refresh',
|
||||||
|
method: 'POST',
|
||||||
|
data: { identifier }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
50
api/modules/auth.js
Normal file
50
api/modules/auth.js
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import request from '@/utils/request.js';
|
||||||
|
|
||||||
|
export const authApi = {
|
||||||
|
verifyAsset(identifier) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/auth/verify-asset',
|
||||||
|
method: 'POST',
|
||||||
|
data: { identifier }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
wechatLogin(asset_token, code) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/auth/wechat-login',
|
||||||
|
method: 'POST',
|
||||||
|
data: { asset_token, code }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
sendCode(phone, scene) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/auth/send-code',
|
||||||
|
method: 'POST',
|
||||||
|
data: { phone, scene }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
bindPhone(phone, code) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/auth/bind-phone',
|
||||||
|
method: 'POST',
|
||||||
|
data: { phone, code }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
changePhone(old_phone, old_code, new_phone, new_code) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/auth/change-phone',
|
||||||
|
method: 'POST',
|
||||||
|
data: { old_phone, old_code, new_phone, new_code }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
logout() {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/auth/logout',
|
||||||
|
method: 'POST'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
43
api/modules/device.js
Normal file
43
api/modules/device.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import request from '@/utils/request.js';
|
||||||
|
|
||||||
|
export const deviceApi = {
|
||||||
|
getCards(identifier) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/device/cards',
|
||||||
|
method: 'GET',
|
||||||
|
data: { identifier }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
factoryReset(identifier) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/device/factory-reset',
|
||||||
|
method: 'POST',
|
||||||
|
data: { identifier }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
reboot(identifier) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/device/reboot',
|
||||||
|
method: 'POST',
|
||||||
|
data: { identifier }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
switchCard(identifier, target_iccid) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/device/switch-card',
|
||||||
|
method: 'POST',
|
||||||
|
data: { identifier, target_iccid }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
setWifi(identifier, ssid, password, enabled = true) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/device/wifi',
|
||||||
|
method: 'POST',
|
||||||
|
data: { identifier, ssid, password, enabled }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
19
api/modules/exchange.js
Normal file
19
api/modules/exchange.js
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import request from '@/utils/request.js';
|
||||||
|
|
||||||
|
export const exchangeApi = {
|
||||||
|
getPending(identifier) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/exchange/pending',
|
||||||
|
method: 'GET',
|
||||||
|
data: { identifier }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
submitShippingInfo(id, recipient_name, recipient_phone, recipient_address) {
|
||||||
|
return request({
|
||||||
|
url: `/api/c/v1/exchange/${id}/shipping-info`,
|
||||||
|
method: 'POST',
|
||||||
|
data: { recipient_name, recipient_phone, recipient_address }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
27
api/modules/order.js
Normal file
27
api/modules/order.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import request from '@/utils/request.js';
|
||||||
|
import { APP_TYPE } from '@/utils/env.js';
|
||||||
|
|
||||||
|
export const orderApi = {
|
||||||
|
getList(identifier, page, page_size, payment_status) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/orders',
|
||||||
|
method: 'GET',
|
||||||
|
data: { identifier, page, page_size, payment_status }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getDetail(id) {
|
||||||
|
return request({
|
||||||
|
url: `/api/c/v1/orders/${id}`,
|
||||||
|
method: 'GET'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
create(identifier, package_ids) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/orders/create',
|
||||||
|
method: 'POST',
|
||||||
|
data: { identifier, package_ids, app_type: APP_TYPE }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
11
api/modules/realname.js
Normal file
11
api/modules/realname.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import request from '@/utils/request.js';
|
||||||
|
|
||||||
|
export const realnameApi = {
|
||||||
|
getLink(identifier, iccid) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/realname/link',
|
||||||
|
method: 'GET',
|
||||||
|
data: { identifier, iccid }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
44
api/modules/wallet.js
Normal file
44
api/modules/wallet.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import request from '@/utils/request.js';
|
||||||
|
import { APP_TYPE } from '@/utils/env.js';
|
||||||
|
|
||||||
|
export const walletApi = {
|
||||||
|
getDetail(identifier) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/wallet/detail',
|
||||||
|
method: 'GET',
|
||||||
|
data: { identifier }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
recharge(identifier, amount, payment_method) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/wallet/recharge',
|
||||||
|
method: 'POST',
|
||||||
|
data: { identifier, amount, payment_method, app_type: APP_TYPE }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
rechargeCheck(identifier) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/wallet/recharge-check',
|
||||||
|
method: 'GET',
|
||||||
|
data: { identifier }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getRecharges(identifier, page, page_size, status) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/wallet/recharges',
|
||||||
|
method: 'GET',
|
||||||
|
data: { identifier, page, page_size, status }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getTransactions(identifier, page, page_size, params = {}) {
|
||||||
|
return request({
|
||||||
|
url: '/api/c/v1/wallet/transactions',
|
||||||
|
method: 'GET',
|
||||||
|
data: { identifier, page, page_size, ...params }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
76
components/DeviceStatusCard.vue
Normal file
76
components/DeviceStatusCard.vue
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
<template>
|
||||||
|
<view class="card device-status-card">
|
||||||
|
<view class="card-header mb-md flex-row-sb">
|
||||||
|
<view class="title">设备信息</view>
|
||||||
|
<view class="tag-apple tag-success">{{ getOperator(deviceInfo.currentIccid) }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="device-info flex-col-g16">
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">
|
||||||
|
<view class="subtitle">当前卡: {{ deviceInfo.currentIccid }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-values flex-row-g20" @tap="$emit('authentication')">
|
||||||
|
<view class="tag-apple" :class="isRealName ? 'tag-success' : 'tag-warning'">
|
||||||
|
{{ isRealName ? "已实名" : "未实名" }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">
|
||||||
|
<view class="subtitle">到期时间：{{ deviceInfo.expireDate }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-values flex-row-g20">
|
||||||
|
<view class="tag-apple tag-primary">{{ deviceInfo.statusStr }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="device-metrics flex-row-sb mt-md">
|
||||||
|
<view class="metric-item flex-col-center">
|
||||||
|
<view class="caption mb-xs">信号强度</view>
|
||||||
|
<view class="metric-value">{{ getSignalText(deviceInfo.rssi) }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="metric-item flex-col-center">
|
||||||
|
<view class="caption mb-xs">设备电量</view>
|
||||||
|
<view class="metric-value">{{ deviceInfo.battery }} %</view>
|
||||||
|
</view>
|
||||||
|
<view class="metric-item flex-col-center">
|
||||||
|
<view class="caption mb-xs">连接数量</view>
|
||||||
|
<view class="metric-value">{{ deviceInfo.connCnt }} 台</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
deviceInfo: { type: Object, default: () => ({}) },
|
||||||
|
isRealName: { type: Boolean, default: false },
|
||||||
|
opratorList: { type: Array, default: () => [] }
|
||||||
|
});
|
||||||
|
|
||||||
|
defineEmits(['authentication']);
|
||||||
|
|
||||||
|
const getOperator = (iccid) => {
|
||||||
|
return '中国电信';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSignalText = (rssi) => rssi || '强';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.device-status-card {
|
||||||
|
.info-row {
|
||||||
|
padding: var(--space-sm) 0;
|
||||||
|
border-bottom: 1rpx solid var(--gray-200);
|
||||||
|
&:last-child { border-bottom: none; }
|
||||||
|
.info-label { min-width: 200rpx; }
|
||||||
|
.info-values { flex: 1; justify-content: flex-end; }
|
||||||
|
}
|
||||||
|
.device-metrics {
|
||||||
|
background: var(--gray-100);
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
padding: 20rpx;
|
||||||
|
.metric-item { flex: 1; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
75
components/FloatingButton.vue
Normal file
75
components/FloatingButton.vue
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<view class="floating-service-card" @click="handleClick">
|
||||||
|
<view class="service-left">
|
||||||
|
<image class="service-icon" src="/static/link.png" mode="aspectFit"></image>
|
||||||
|
<view class="service-content">
|
||||||
|
<text class="service-title">需要帮助？</text>
|
||||||
|
<text class="service-desc">专属客服在线解答</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="service-btn">立即联系</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const emit = defineEmits(['tap']);
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
emit('tap');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.floating-service-card {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 20rpx;
|
||||||
|
left: 20rpx;
|
||||||
|
right: 20rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 60rpx;
|
||||||
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 24rpx 0 24rpx;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.service-icon {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4rpx;
|
||||||
|
|
||||||
|
.service-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-desc {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-btn {
|
||||||
|
padding: 16rpx 32rpx;
|
||||||
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
143
components/FunctionCard.vue
Normal file
143
components/FunctionCard.vue
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
<template>
|
||||||
|
<view class="card function-card">
|
||||||
|
<view class="card-header">
|
||||||
|
<view class="title">功能菜单</view>
|
||||||
|
<view class="header-actions">
|
||||||
|
<button class="btn-apple btn-primary btn-mini" @tap="$emit('sync')">运营商数据同步</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-grid">
|
||||||
|
<view class="function-item interactive card-interactive" @tap="$emit('enter', 'authentication')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/authentication.png" mode="aspectFit" alt="实名认证"></image>
|
||||||
|
</view>
|
||||||
|
<view :class="['function-name', realNameStatus === '已实名' ? 'text-primary' : '']">
|
||||||
|
{{ realNameStatus || '实名认证' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-item interactive card-interactive" @tap="$emit('enter', 'package-order')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/shop.png" mode="aspectFit" alt="套餐订购"></image>
|
||||||
|
</view>
|
||||||
|
<view class="function-name">套餐订购</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-item interactive card-interactive" @tap="$emit('enter', 'order-list')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/order.png" mode="aspectFit" alt="我的订单"></image>
|
||||||
|
</view>
|
||||||
|
<view class="function-name">我的订单</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'back')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/back.png" mode="aspectFit" alt="后台管理"></image>
|
||||||
|
</view>
|
||||||
|
<view class="function-name">后台管理</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'switch')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/change.png" mode="aspectFit" alt="切换运营商"></image>
|
||||||
|
</view>
|
||||||
|
<view class="function-name">切换运营商</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'asset-package')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/shop.png" mode="aspectFit" alt="资产套餐历史"></image>
|
||||||
|
</view>
|
||||||
|
<view class="function-name">资产套餐历史</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-item interactive card-interactive" @tap="$emit('enter', 'bind')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/bind-phone.png" mode="aspectFit" alt="绑定手机号"></image>
|
||||||
|
</view>
|
||||||
|
<view class="function-name">绑定手机号</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'change-phone')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/change-phone.png" mode="aspectFit" alt="更换手机号"></image>
|
||||||
|
</view>
|
||||||
|
<view class="function-name">更换手机号</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'device-exchange')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/change.png" mode="aspectFit" alt="设备换货"></image>
|
||||||
|
</view>
|
||||||
|
<view class="function-name">设备换货</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'wallet')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/wallet.png" mode="aspectFit" alt="我的钱包"></image>
|
||||||
|
</view>
|
||||||
|
<view class="function-name">我的钱包</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'recover')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/recover.png" mode="aspectFit" alt="重启设备"></image>
|
||||||
|
</view>
|
||||||
|
<view class="function-name">重启设备</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'restart')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/restart.png" mode="aspectFit" alt="恢复出厂"></image>
|
||||||
|
</view>
|
||||||
|
<view class="function-name">恢复出厂</view>
|
||||||
|
</view>
|
||||||
|
<view class="function-item interactive card-interactive" @tap="$emit('enter', 'out')" role="button" tabindex="0">
|
||||||
|
<view class="function-icon">
|
||||||
|
<image src="/static/out.png" mode="aspectFit" alt="退出登录"></image>
|
||||||
|
</view>
|
||||||
|
<view class="function-name">退出登录</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
realNameStatus: { type: String, default: '' },
|
||||||
|
alreadyBindPhone: { type: Boolean, default: false },
|
||||||
|
isDevice: { type: Boolean, default: true }
|
||||||
|
});
|
||||||
|
|
||||||
|
defineEmits(['enter', 'sync']);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.function-card {
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.function-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 16rpx;
|
||||||
|
width: 100%;
|
||||||
|
.function-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
.function-icon {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
image { width: 100%; height: 100%; }
|
||||||
|
}
|
||||||
|
.function-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-primary { color: var(--primary) !important; }
|
||||||
|
</style>
|
||||||
80
components/TrafficCard.vue
Normal file
80
components/TrafficCard.vue
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
<template>
|
||||||
|
<view class="card traffic-card">
|
||||||
|
<view class="card-header flex-row-sb mb-lg">
|
||||||
|
<view class="title">本月流量</view>
|
||||||
|
<view class="usage-percent">
|
||||||
|
<text class="title">{{ usedFlowPercent }}</text>
|
||||||
|
<text class="caption">%</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="progress-section mb-lg">
|
||||||
|
<view class="progress-apple">
|
||||||
|
<view class="progress-fill" :style="{width: usedFlowPercent + '%'}"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="traffic-stats flex-row-sb">
|
||||||
|
<view class="stat-item flex-col-center">
|
||||||
|
<view class="caption mb-xs">已使用</view>
|
||||||
|
<view class="stat-value-container">
|
||||||
|
<text class="stat-value">{{ formatDataSize(deviceInfo.totalBytesCnt) }}</text>
|
||||||
|
<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item flex-col-center">
|
||||||
|
<view class="caption mb-xs">总流量</view>
|
||||||
|
<view class="stat-value-container">
|
||||||
|
<text class="stat-value">{{ formatDataSize(deviceInfo.flowSize) }}</text>
|
||||||
|
<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item flex-col-center">
|
||||||
|
<view class="caption mb-xs">剩余</view>
|
||||||
|
<view class="stat-value-container">
|
||||||
|
<text class="stat-value">{{ formatDataSize(deviceInfo.flowSize - deviceInfo.totalBytesCnt) }}</text>
|
||||||
|
<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
deviceInfo: { type: Object, default: () => ({}) },
|
||||||
|
isDevice: { type: Boolean, default: true }
|
||||||
|
});
|
||||||
|
|
||||||
|
const usedFlowPercent = computed(() => {
|
||||||
|
if (props.deviceInfo.flowSize && props.deviceInfo.totalBytesCnt) {
|
||||||
|
return (props.deviceInfo.totalBytesCnt / props.deviceInfo.flowSize * 100).toFixed(2);
|
||||||
|
}
|
||||||
|
return '0';
|
||||||
|
});
|
||||||
|
|
||||||
|
const formatDataSize = (size) => {
|
||||||
|
if (!size) return '0';
|
||||||
|
const num = parseFloat(size);
|
||||||
|
if (num < 0.01) return '0';
|
||||||
|
return num.toFixed(2);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.traffic-card {
|
||||||
|
.usage-percent {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 4rpx;
|
||||||
|
.title { font-size: 35rpx; font-weight: 700; margin-right: 5rpx; }
|
||||||
|
}
|
||||||
|
.traffic-stats {
|
||||||
|
background: var(--gray-100);
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
.stat-item { flex: 1; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
41
components/UserInfoCard.vue
Normal file
41
components/UserInfoCard.vue
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
<template>
|
||||||
|
<view class="card user-info-card interactive">
|
||||||
|
<view class="flex-row-g20">
|
||||||
|
<view class="user-avatar">
|
||||||
|
<image src="https://img1.baidu.com/it/u=2462918877,1866131262&fm=253&fmt=auto&app=138&f=JPEG?w=506&h=500" mode="aspectFill" alt="用户头像" />
|
||||||
|
</view>
|
||||||
|
<view class="user-details flex-col-g8">
|
||||||
|
<view class="flex-row-g20">
|
||||||
|
<view class="title">{{ currentCardNo }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="caption">到期时间：{{ deviceInfo.expireDate }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="tag-apple" :class="onlineStatus === '在线' ? 'tag-success' : 'tag-warning'">
|
||||||
|
{{ onlineStatus }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
currentCardNo: { type: String, default: '' },
|
||||||
|
deviceInfo: { type: Object, default: () => ({}) },
|
||||||
|
onlineStatus: { type: String, default: '离线' }
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.user-info-card {
|
||||||
|
color: var(--text-primary);
|
||||||
|
.user-avatar {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: var(--radius-medium);
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2rpx solid var(--border-light);
|
||||||
|
image { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
}
|
||||||
|
.user-details { flex: 1; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
70
components/VoiceCard.vue
Normal file
70
components/VoiceCard.vue
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
<template>
|
||||||
|
<view class="card voice-card">
|
||||||
|
<view class="card-header flex-row-sb mb-lg">
|
||||||
|
<view class="title">通话使用</view>
|
||||||
|
<view class="date-range-selector" @tap="$emit('openDatePicker')">
|
||||||
|
<text>{{ dateRangeText }}</text>
|
||||||
|
<text class="ml-10">▼</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="voice-stats flex-row-sb">
|
||||||
|
<view class="stat-item flex-col-center">
|
||||||
|
<view class="caption mb-xs">总通话</view>
|
||||||
|
<view class="stat-value-container">
|
||||||
|
<text class="stat-value">{{ voiceStats.totalVoice }}</text>
|
||||||
|
<text class="stat-unit">分钟</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item flex-col-center">
|
||||||
|
<view class="caption mb-xs">已使用</view>
|
||||||
|
<view class="stat-value-container">
|
||||||
|
<text class="stat-value">{{ voiceStats.usedVoice }}</text>
|
||||||
|
<text class="stat-unit">分钟</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item flex-col-center">
|
||||||
|
<view class="caption mb-xs">剩余</view>
|
||||||
|
<view class="stat-value-container">
|
||||||
|
<text class="stat-value">{{ voiceStats.remainingVoice }}</text>
|
||||||
|
<text class="stat-unit">分钟</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
voiceStats: { type: Object, default: () => ({ totalVoice: 0, usedVoice: 0, remainingVoice: 0 }) },
|
||||||
|
dateRangeText: { type: String, default: '' }
|
||||||
|
});
|
||||||
|
|
||||||
|
defineEmits(['openDatePicker']);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.voice-card {
|
||||||
|
.date-range-selector {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
background: var(--gray-100);
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: var(--text-primary);
|
||||||
|
max-width: 360rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
&:active { opacity: 0.7; }
|
||||||
|
}
|
||||||
|
.voice-stats {
|
||||||
|
background: var(--gray-100);
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
padding: 20rpx;
|
||||||
|
.stat-item { flex: 1; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ml-10 { margin-left: 10rpx; }
|
||||||
|
</style>
|
||||||
63
components/WhitelistCard.vue
Normal file
63
components/WhitelistCard.vue
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<view class="card whitelist-card">
|
||||||
|
<view class="card-header flex-row-sb mb-lg">
|
||||||
|
<view class="title">语音白名单</view>
|
||||||
|
<view class="flex-row-g20">
|
||||||
|
<button class="btn-apple btn-secondary btn-mini" @tap="$emit('refresh')">刷新</button>
|
||||||
|
<button class="btn-apple btn-primary btn-mini" @tap="$emit('add')">添加白名单</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="whitelistData.length === 0" class="empty-whitelist">
|
||||||
|
<text class="caption">暂无白名单</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-else class="whitelist-list">
|
||||||
|
<view class="whitelist-item" v-for="(item, index) in whitelistData" :key="index">
|
||||||
|
<view class="whitelist-info flex-col-g8">
|
||||||
|
<view class="flex-row-sb">
|
||||||
|
<text class="subtitle">{{ item.name }}</text>
|
||||||
|
<view class="tag-apple" :class="getStateClass(item.state)">
|
||||||
|
{{ getStateText(item.state) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="caption">{{ item.phone }}</text>
|
||||||
|
<text class="caption caption-sm">{{ item.createTime }}</text>
|
||||||
|
<button v-if="item.state === '5' || item.state === '3'"
|
||||||
|
class="btn-apple btn-warning btn-mini mt-10"
|
||||||
|
@tap="$emit('showSms', item.phone, item.state)">
|
||||||
|
上传短信码
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
whitelistData: { type: Array, default: () => [] }
|
||||||
|
});
|
||||||
|
|
||||||
|
defineEmits(['refresh', 'add', 'showSms']);
|
||||||
|
|
||||||
|
const getStateText = (state) => ({ '1': '添加中', '2': '已添加', '3': '添加失败', '5': '短信确认中' })[state] || '未知';
|
||||||
|
const getStateClass = (state) => ({ '1': 'tag-warning', '2': 'tag-success', '3': 'tag-danger', '5': 'tag-primary' })[state] || '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.whitelist-card {
|
||||||
|
.empty-whitelist { padding: 40rpx; text-align: center; }
|
||||||
|
.whitelist-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16rpx;
|
||||||
|
.whitelist-item {
|
||||||
|
padding: 20rpx;
|
||||||
|
background: var(--gray-100);
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
.caption-sm { font-size: 20rpx; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
47
components/WifiCard.vue
Normal file
47
components/WifiCard.vue
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
<template>
|
||||||
|
<view class="card wifi-card">
|
||||||
|
<view class="card-header flex-row-sb">
|
||||||
|
<view class="title">WiFi配置</view>
|
||||||
|
<view class="btn-group">
|
||||||
|
<button class="btn-apple btn-primary btn-mini" @tap="$emit('modify')">修改</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="wifi-info flex-col-g16 mt-30">
|
||||||
|
<view class="wifi-item flex-row-sb">
|
||||||
|
<view class="wifi-details flex-col-g8">
|
||||||
|
<view class="caption">网络名称</view>
|
||||||
|
<view class="subtitle">{{ deviceInfo.ssidName }}</view>
|
||||||
|
</view>
|
||||||
|
<button class="btn-apple btn-primary btn-mini" @tap="$emit('copy', deviceInfo.ssidName)">复制</button>
|
||||||
|
</view>
|
||||||
|
<view class="wifi-item flex-row-sb">
|
||||||
|
<view class="wifi-details flex-col-g8">
|
||||||
|
<view class="caption">连接密码</view>
|
||||||
|
<view class="subtitle">{{ deviceInfo.ssidPwd }}</view>
|
||||||
|
</view>
|
||||||
|
<button class="btn-apple btn-primary btn-mini" @tap="$emit('copy', deviceInfo.ssidPwd)">复制</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
deviceInfo: { type: Object, default: () => ({}) }
|
||||||
|
});
|
||||||
|
|
||||||
|
defineEmits(['modify', 'copy']);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.wifi-card {
|
||||||
|
.wifi-item {
|
||||||
|
padding: var(--space-md);
|
||||||
|
background: var(--gray-100);
|
||||||
|
border-radius: var(--radius-medium);
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
&:last-child { margin-bottom: 0; }
|
||||||
|
.wifi-details { flex: 1; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1352
docs/API.md
Normal file
1352
docs/API.md
Normal file
File diff suppressed because it is too large
Load Diff
192
docs/微信网页授权-OAuth2.md
Normal file
192
docs/微信网页授权-OAuth2.md
Normal file
@@ -0,0 +1,192 @@
|
|||||||
|
# 微信 H5 获取用户头像昵称（前端接入指南）
|
||||||
|
|
||||||
|
## 一、目标
|
||||||
|
在微信内打开 H5 页面，获取用户：
|
||||||
|
- 昵称（nickname）
|
||||||
|
- 头像（headimgurl）
|
||||||
|
- openid
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 二、核心方案
|
||||||
|
使用微信网页授权（OAuth2）：
|
||||||
|
|
||||||
|
- 必须使用：`snsapi_userinfo`
|
||||||
|
- 才能获取头像 + 昵称
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 三、整体流程
|
||||||
|
|
||||||
|
```
|
||||||
|
用户进入页面
|
||||||
|
↓
|
||||||
|
判断是否有 code
|
||||||
|
↓
|
||||||
|
没有 → 跳微信授权
|
||||||
|
↓
|
||||||
|
用户同意授权
|
||||||
|
↓
|
||||||
|
微信回调（带 code）
|
||||||
|
↓
|
||||||
|
前端把 code 传给后端
|
||||||
|
↓
|
||||||
|
后端换 token + 获取用户信息
|
||||||
|
↓
|
||||||
|
返回前端
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 四、前端代码（可直接用）
|
||||||
|
|
||||||
|
### 1️⃣ 获取 code 并跳授权
|
||||||
|
|
||||||
|
```js
|
||||||
|
const getCode = () => {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
return params.get("code");
|
||||||
|
};
|
||||||
|
|
||||||
|
const redirectToWxAuth = () => {
|
||||||
|
const appid = "你的appid";
|
||||||
|
const redirectUri = encodeURIComponent(window.location.href);
|
||||||
|
|
||||||
|
const url = `https://open.weixin.qq.com/connect/oauth2/authorize
|
||||||
|
?appid=${appid}
|
||||||
|
&redirect_uri=${redirectUri}
|
||||||
|
&response_type=code
|
||||||
|
&scope=snsapi_userinfo
|
||||||
|
&state=123#wechat_redirect`;
|
||||||
|
|
||||||
|
window.location.href = url;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 执行
|
||||||
|
const code = getCode();
|
||||||
|
|
||||||
|
if (!code) {
|
||||||
|
redirectToWxAuth();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2️⃣ 拿 code 调后端
|
||||||
|
|
||||||
|
```js
|
||||||
|
const code = new URLSearchParams(location.search).get("code");
|
||||||
|
|
||||||
|
if (code) {
|
||||||
|
fetch(`/api/wx/userinfo?code=${code}`)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
console.log("用户信息", data);
|
||||||
|
// data.nickname
|
||||||
|
// data.headimgurl
|
||||||
|
});
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 五、后端要做什么（你只需要对接）
|
||||||
|
|
||||||
|
前端只需要知道：
|
||||||
|
|
||||||
|
```http
|
||||||
|
GET /api/wx/userinfo?code=xxx
|
||||||
|
```
|
||||||
|
|
||||||
|
后端返回：
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"openid": "xxx",
|
||||||
|
"nickname": "张三",
|
||||||
|
"headimgurl": "https://xxx.jpg"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 六、重要配置（必须）
|
||||||
|
|
||||||
|
### 1️⃣ 微信后台配置
|
||||||
|
在公众号后台：
|
||||||
|
|
||||||
|
- 设置 → 开发 → 网页授权域名
|
||||||
|
- 填你的 H5 域名（必须）
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2️⃣ 必须在微信内打开
|
||||||
|
|
||||||
|
```js
|
||||||
|
const isWechat = /micromessenger/i.test(navigator.userAgent);
|
||||||
|
|
||||||
|
if (!isWechat) {
|
||||||
|
alert("请在微信中打开");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 七、常见坑
|
||||||
|
|
||||||
|
### ❗1. redirect_uri 报错
|
||||||
|
原因：域名没配置
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### ❗2. 一直循环授权
|
||||||
|
原因：没有正确判断 code
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### ❗3. 拿不到头像昵称
|
||||||
|
原因：用了 `snsapi_base`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### ❗4. 页面刷新重复授权
|
||||||
|
解决：拿到 code 后清掉
|
||||||
|
|
||||||
|
```js
|
||||||
|
window.history.replaceState({}, "", location.pathname);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 八、优化建议（推荐）
|
||||||
|
|
||||||
|
### ✔️ 第一次
|
||||||
|
- 用 `snsapi_userinfo`
|
||||||
|
- 获取完整用户信息
|
||||||
|
|
||||||
|
### ✔️ 后续
|
||||||
|
- 用 `snsapi_base`
|
||||||
|
- 用 openid 换你自己的用户数据
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 九、适用范围
|
||||||
|
|
||||||
|
| 场景 | 是否可用 |
|
||||||
|
|------|----------|
|
||||||
|
| 微信内 H5 | ✅ |
|
||||||
|
| 小程序 | ❌ |
|
||||||
|
| 浏览器打开 | ❌ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 十、一句话总结
|
||||||
|
|
||||||
|
👉 想拿头像昵称：
|
||||||
|
|
||||||
|
必须走
|
||||||
|
**微信授权 + snsapi_userinfo + 后端换数据**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 完
|
||||||
0
docs/首页数据来源改动.md
Normal file
0
docs/首页数据来源改动.md
Normal file
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
|
||||||
|
<title></title>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/misans@4.1.0/lib/Normal/MiSans-Regular.min.css"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"><!--app-html--></div>
|
||||||
|
<script type="module" src="/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
main.js
Normal file
24
main.js
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import App from './App'
|
||||||
|
import uviewPlus from 'uview-plus'
|
||||||
|
|
||||||
|
// #ifndef VUE3
|
||||||
|
import Vue from 'vue'
|
||||||
|
import './uni.promisify.adaptor'
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
App.mpType = 'app'
|
||||||
|
const app = new Vue({
|
||||||
|
...App
|
||||||
|
})
|
||||||
|
app.$mount()
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef VUE3
|
||||||
|
import { createSSRApp } from 'vue'
|
||||||
|
export function createApp() {
|
||||||
|
const app = createSSRApp(App)
|
||||||
|
app.use(uviewPlus)
|
||||||
|
return {
|
||||||
|
app
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
100
manifest.json
Normal file
100
manifest.json
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
{
|
||||||
|
"name" : "device-voice-h5",
|
||||||
|
"appid" : "__UNI__45F0251",
|
||||||
|
"description" : "",
|
||||||
|
"versionName" : "1.0.0",
|
||||||
|
"versionCode" : "100",
|
||||||
|
"transformPx" : false,
|
||||||
|
/* 5+App特有相关 */
|
||||||
|
"app-plus" : {
|
||||||
|
"usingComponents" : true,
|
||||||
|
"nvueStyleCompiler" : "uni-app",
|
||||||
|
"compilerVersion" : 3,
|
||||||
|
"splashscreen" : {
|
||||||
|
"alwaysShowBeforeRender" : true,
|
||||||
|
"waiting" : true,
|
||||||
|
"autoclose" : true,
|
||||||
|
"delay" : 0
|
||||||
|
},
|
||||||
|
/* 模块配置 */
|
||||||
|
"modules" : {},
|
||||||
|
/* 应用发布信息 */
|
||||||
|
"distribute" : {
|
||||||
|
/* android打包配置 */
|
||||||
|
"android" : {
|
||||||
|
"permissions" : [
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* ios打包配置 */
|
||||||
|
"ios" : {},
|
||||||
|
/* SDK配置 */
|
||||||
|
"sdkConfigs" : {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/* 快应用特有相关 */
|
||||||
|
"quickapp" : {},
|
||||||
|
/* 小程序特有相关 */
|
||||||
|
"mp-weixin" : {
|
||||||
|
"appid" : "",
|
||||||
|
"setting" : {
|
||||||
|
"urlCheck" : false
|
||||||
|
},
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-alipay" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-baidu" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-toutiao" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"uniStatistics" : {
|
||||||
|
"enable" : false
|
||||||
|
},
|
||||||
|
"vueVersion" : "3",
|
||||||
|
"h5" : {
|
||||||
|
"title" : "信息查询",
|
||||||
|
"template" : "index.html",
|
||||||
|
"router" : {
|
||||||
|
"mode" : "history"
|
||||||
|
},
|
||||||
|
"optimization" : {
|
||||||
|
"treeShaking" : {
|
||||||
|
"enable" : true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"publicPath" : "./",
|
||||||
|
"devServer" : {
|
||||||
|
"proxy" : {
|
||||||
|
"/kyhl-weixin-1.0" : {
|
||||||
|
"target" : "http://jhwl.whjhft.com",
|
||||||
|
"changeOrigin" : true,
|
||||||
|
"secure" : false
|
||||||
|
},
|
||||||
|
"/cm-api" : {
|
||||||
|
"target" : "http://report.whjhft.com",
|
||||||
|
"changeOrigin" : true,
|
||||||
|
"secure" : false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"sdkConfigs" : {}
|
||||||
|
}
|
||||||
|
}
|
||||||
1621
package-lock.json
generated
Normal file
1621
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
11
package.json
Normal file
11
package.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"devDependencies": {
|
||||||
|
"sass": "^1.63.2",
|
||||||
|
"sass-loader": "^10.4.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"clipboard": "^2.0.11",
|
||||||
|
"dayjs": "^1.11.19",
|
||||||
|
"uview-plus": "^3.6.29"
|
||||||
|
}
|
||||||
|
}
|
||||||
91
pages.json
Normal file
91
pages.json
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
{
|
||||||
|
"easycom": {
|
||||||
|
"autoscan": true,
|
||||||
|
// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
|
||||||
|
"custom": {
|
||||||
|
"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
|
||||||
|
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
|
||||||
|
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"pages": [{
|
||||||
|
"path": "pages/login/login",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index/index",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/package-order/package-order",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "套餐列表"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/switch/switch",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "切换运营商"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/asset-package-history/asset-package-history",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "资产套餐历史"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/order-list/order-list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的订单"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/bind/bind",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "绑定手机号"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/change-phone/change-phone",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "更换手机号"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/device-exchange/device-exchange",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "设备换货"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/auth/auth",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "实名认证"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/my-wallet/my-wallet",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的钱包"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/error/error",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"globalStyle": {
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarTitleText": "信息查询",
|
||||||
|
"navigationBarBackgroundColor": "#F8F8F8",
|
||||||
|
"backgroundColor": "#F8F8F8"
|
||||||
|
},
|
||||||
|
"uniIdRouter": {}
|
||||||
|
}
|
||||||
240
pages/asset-package-history/asset-package-history.vue
Normal file
240
pages/asset-package-history/asset-package-history.vue
Normal file
@@ -0,0 +1,240 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 空状态提示 -->
|
||||||
|
<view v-if="packageList.length === 0 && !loading" class="empty-state">
|
||||||
|
<view class="empty-icon">📦</view>
|
||||||
|
<view class="empty-title">暂无套餐记录</view>
|
||||||
|
<view class="empty-desc">当前账号下暂无套餐历史信息</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 套餐列表 -->
|
||||||
|
<view v-else class="card package-card" v-for="(item, index) in packageList" :key="index">
|
||||||
|
<view class="package-header flex-row-sb">
|
||||||
|
<view class="package-name">{{ item.package_name }}</view>
|
||||||
|
<view class="tag-apple" :class="getStatusClass(item.status)">{{ item.status_name }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="package-info">
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">套餐类型</view>
|
||||||
|
<view class="info-value">{{ item.package_type === 'formal' ? '普通套餐' : '加油包' }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">使用类型</view>
|
||||||
|
<view class="info-value">{{ item.usage_type === 'single_card' ? '单卡' : '设备' }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">激活时间</view>
|
||||||
|
<view class="info-value">{{ item.activated_at || '-' }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">创建时间</view>
|
||||||
|
<view class="info-value">{{ item.created_at }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">到期时间</view>
|
||||||
|
<view class="info-value">{{ item.expires_at || '-' }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">优先级</view>
|
||||||
|
<view class="info-value">{{ item.priority }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="divider"></view>
|
||||||
|
|
||||||
|
<view class="flow-info">
|
||||||
|
<view class="flow-title">流量信息</view>
|
||||||
|
<view class="flow-stats">
|
||||||
|
<view class="flow-item">
|
||||||
|
<view class="flow-label">已用真流量</view>
|
||||||
|
<view class="flow-value">{{ formatMB(item.data_usage_mb) }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="flow-item">
|
||||||
|
<view class="flow-label">总量真流量</view>
|
||||||
|
<view class="flow-value">{{ formatMB(item.data_limit_mb) }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="flow-item">
|
||||||
|
<view class="flow-label">剩余虚流量</view>
|
||||||
|
<view class="flow-value">{{ formatMB(item.virtual_remain_mb) }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="progress-section">
|
||||||
|
<view class="progress-apple">
|
||||||
|
<view class="progress-fill" :style="{width: getUsagePercent(item) + '%'}"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载更多 -->
|
||||||
|
<view class="load-more" v-if="packageList.length > 0">
|
||||||
|
<text v-if="loading">加载中...</text>
|
||||||
|
<text v-else-if="noMore">没有更多了</text>
|
||||||
|
<text v-else @tap="loadMore">点击加载更多</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import { assetApi } from '@/api/index.js';
|
||||||
|
import { useUserStore } from '@/store/index.js';
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
let packageList = reactive([]);
|
||||||
|
let loading = ref(false);
|
||||||
|
let noMore = ref(false);
|
||||||
|
let page = ref(1);
|
||||||
|
const pageSize = 10;
|
||||||
|
|
||||||
|
const getStatusClass = (status) => {
|
||||||
|
const classMap = {
|
||||||
|
'0': 'tag-warning',
|
||||||
|
'1': 'tag-success',
|
||||||
|
'2': 'tag-primary',
|
||||||
|
'3': 'tag-secondary',
|
||||||
|
'4': 'tag-danger'
|
||||||
|
};
|
||||||
|
return classMap[status] || '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatMB = (mb) => {
|
||||||
|
if (!mb) return '0';
|
||||||
|
if (mb >= 1024) {
|
||||||
|
return (mb / 1024).toFixed(2) + ' GB';
|
||||||
|
}
|
||||||
|
return mb + ' MB';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getUsagePercent = (item) => {
|
||||||
|
if (!item.data_limit_mb) return 0;
|
||||||
|
return Math.min((item.data_usage_mb / item.data_limit_mb) * 100, 100).toFixed(2);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDate = (dateStr) => {
|
||||||
|
if (!dateStr) return '-';
|
||||||
|
return dateStr.split('T').join(' ').slice(0, 19);
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadPackageList = async (append = false) => {
|
||||||
|
if (loading.value || noMore.value) return;
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await assetApi.getPackageHistory(
|
||||||
|
userStore.state.identifier,
|
||||||
|
page.value,
|
||||||
|
pageSize
|
||||||
|
);
|
||||||
|
|
||||||
|
const newData = (data.items || []).map(item => ({
|
||||||
|
...item,
|
||||||
|
activated_at: item.activated_at ? formatDate(item.activated_at) : '',
|
||||||
|
created_at: formatDate(item.created_at),
|
||||||
|
expires_at: item.expires_at ? formatDate(item.expires_at) : ''
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (append) {
|
||||||
|
packageList.push(...newData);
|
||||||
|
} else {
|
||||||
|
packageList.splice(0, packageList.length, ...newData);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newData.length < pageSize) {
|
||||||
|
noMore.value = true;
|
||||||
|
} else {
|
||||||
|
page.value++;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载套餐历史失败', e);
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMore = () => {
|
||||||
|
if (!noMore.value) {
|
||||||
|
loadPackageList(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadPackageList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 120rpx 40rpx;
|
||||||
|
min-height: 400rpx;
|
||||||
|
.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
|
||||||
|
.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
|
||||||
|
.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-card {
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
.package-header {
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
.package-name { font-size: 32rpx; font-weight: 600; color: var(--text-primary); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-info {
|
||||||
|
.info-row {
|
||||||
|
padding: var(--space-xs) 0;
|
||||||
|
.info-label { font-size: 24rpx; color: var(--text-tertiary); }
|
||||||
|
.info-value { font-size: 24rpx; color: var(--text-primary); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 1rpx;
|
||||||
|
background: var(--gray-200);
|
||||||
|
margin: var(--space-md) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-info {
|
||||||
|
.flow-title { font-size: 26rpx; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); }
|
||||||
|
.flow-stats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
.flow-item {
|
||||||
|
text-align: center;
|
||||||
|
.flow-label { font-size: 20rpx; color: var(--text-tertiary); margin-bottom: 4rpx; }
|
||||||
|
.flow-value { font-size: 26rpx; font-weight: 600; color: var(--text-primary); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.progress-section {
|
||||||
|
.progress-apple {
|
||||||
|
width: 100%;
|
||||||
|
height: 8rpx;
|
||||||
|
background: var(--gray-200);
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
overflow: hidden;
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, var(--primary), var(--primary-light));
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--space-lg);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-secondary { background: var(--gray-200) !important; color: var(--gray-600) !important; }
|
||||||
|
</style>
|
||||||
203
pages/auth/auth.vue
Normal file
203
pages/auth/auth.vue
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="card" v-for="item in list" :key="item.iccid">
|
||||||
|
<view class="flex-row-g20">
|
||||||
|
<view class="logo">
|
||||||
|
<image :src="getLogo(item.category).logo" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col-g20">
|
||||||
|
<view class="iccid">ICCID: {{ item.iccid }}</view>
|
||||||
|
<view class="operator">运营商: {{ getLogo(item.category).name }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btn mt-30 flex-col-g20">
|
||||||
|
<up-button class="btn-apple btn-primary" v-if="item.isRealName" type="primary">已实名</up-button>
|
||||||
|
<up-button class="btn-apple btn-success" v-else type="success" @tap="toReal(item)">去实名</up-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="modal-overlay" v-if="showIccidModal" @tap="closeModal">
|
||||||
|
<view class="modal-content" @tap.stop>
|
||||||
|
<view class="modal-close" @tap="closeModal">✕</view>
|
||||||
|
<view class="modal-body">
|
||||||
|
<view class="modal-title">实名认证</view>
|
||||||
|
<view class="iccid-value">{{ currentModalIccid }}</view>
|
||||||
|
<view class="modal-button" @tap="doRealName">点击复制ICCID并跳转实名</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import { assetApi, realnameApi } from '@/api/index.js';
|
||||||
|
import { useUserStore } from '@/store/index.js';
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
let list = reactive([]);
|
||||||
|
let showIccidModal = ref(false);
|
||||||
|
let currentModalIccid = ref('');
|
||||||
|
let currentCard = ref(null);
|
||||||
|
|
||||||
|
let opratorList = reactive([
|
||||||
|
{ category: '124', logo: 'https://img2.baidu.com/it/u=139558247,3893370039&fm=253&fmt=auto?w=529&h=500', name: '中国电信' },
|
||||||
|
{ category: '125', logo: 'https://img1.baidu.com/it/u=2816777816,1756344384&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500', name: '中国联通' },
|
||||||
|
{ category: '126', logo: 'https://img2.baidu.com/it/u=915783975,1594870591&fm=253&fmt=auto&app=120&f=PNG?w=182&h=182', name: '中国移动' }
|
||||||
|
]);
|
||||||
|
|
||||||
|
const getLogo = (category) => {
|
||||||
|
const operator = opratorList.find(item => item.category === category);
|
||||||
|
return operator || opratorList[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadCards = async () => {
|
||||||
|
try {
|
||||||
|
const data = await assetApi.getInfo(userStore.state.identifier);
|
||||||
|
if (data.cards && data.cards.length > 0) {
|
||||||
|
list.splice(0, list.length, ...data.cards.map(card => ({
|
||||||
|
iccid: card.iccid,
|
||||||
|
category: card.carrier_name.includes('电信') ? '124' : card.carrier_name.includes('联通') ? '125' : '126',
|
||||||
|
isRealName: card.real_name_status === 1
|
||||||
|
})));
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载卡列表失败', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toReal = async (card) => {
|
||||||
|
currentCard.value = card;
|
||||||
|
currentModalIccid.value = card.iccid;
|
||||||
|
showIccidModal.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
showIccidModal.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const doRealName = async () => {
|
||||||
|
try {
|
||||||
|
const data = await realnameApi.getLink(userStore.state.identifier, currentModalIccid.value);
|
||||||
|
if (data.realname_url) {
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: currentModalIccid.value,
|
||||||
|
success: () => {
|
||||||
|
uni.showToast({ title: 'ICCID已复制', icon: 'success' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
closeModal();
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = data.realname_url;
|
||||||
|
}, 1500);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('获取实名链接失败', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadCards();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
.card {
|
||||||
|
.logo {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 120rpx;
|
||||||
|
border: 1rpx solid var(--primary);
|
||||||
|
overflow: hidden;
|
||||||
|
image { width: 100%; height: 100%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-apple {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 20rpx;
|
||||||
|
background: var(--gray-100);
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
&.btn-primary { background: var(--primary); color: var(--text-inverse); }
|
||||||
|
&.btn-success { background: var(--success); color: var(--text-inverse); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0; left: 0; right: 0; bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
border-radius: var(--radius-large);
|
||||||
|
width: 620rpx;
|
||||||
|
max-width: 90%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 24rpx; left: 24rpx;
|
||||||
|
width: 48rpx; height: 48rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: var(--gray-600);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
padding: 60rpx 32rpx 32rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iccid-value {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--primary);
|
||||||
|
text-align: center;
|
||||||
|
word-break: break-all;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-button {
|
||||||
|
padding: 24rpx 32rpx;
|
||||||
|
background: var(--success);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
89
pages/bind/bind.vue
Normal file
89
pages/bind/bind.vue
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="card flex-col-g20">
|
||||||
|
<view class="flex-row-g20">
|
||||||
|
<label for="">手机号:</label>
|
||||||
|
<up-input placeholder="请输入绑定的手机号" border="surround" v-model="bind.phone" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="flex-row-g20">
|
||||||
|
<label for="">验证码:</label>
|
||||||
|
<up-input placeholder="验证码" v-model="bind.code">
|
||||||
|
<template #suffix>
|
||||||
|
<up-button @tap="getCode" :text="codeText" type="success" :disabled="cooldown > 0"></up-button>
|
||||||
|
</template>
|
||||||
|
</up-input>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btn">
|
||||||
|
<up-button type="primary" @tap="bindPhone">绑定手机号</up-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue';
|
||||||
|
import { authApi } from '@/api/index.js';
|
||||||
|
|
||||||
|
let bind = reactive({
|
||||||
|
phone: '',
|
||||||
|
code: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
let cooldown = ref(0);
|
||||||
|
let codeText = ref('获取验证码');
|
||||||
|
let timer = null;
|
||||||
|
|
||||||
|
const getCode = async () => {
|
||||||
|
if (!bind.phone) {
|
||||||
|
uni.showToast({ title: '请输入手机号', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/^1[3-9]\d{9}$/.test(bind.phone)) {
|
||||||
|
uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await authApi.sendCode(bind.phone, 'bind_phone');
|
||||||
|
cooldown.value = data.cooldown_seconds || 60;
|
||||||
|
codeText.value = `${cooldown.value}s`;
|
||||||
|
|
||||||
|
timer = setInterval(() => {
|
||||||
|
cooldown.value--;
|
||||||
|
if (cooldown.value <= 0) {
|
||||||
|
clearInterval(timer);
|
||||||
|
codeText.value = '获取验证码';
|
||||||
|
} else {
|
||||||
|
codeText.value = `${cooldown.value}s`;
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
uni.showToast({ title: '验证码已发送', icon: 'success' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('发送验证码失败', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const bindPhone = async () => {
|
||||||
|
if (!bind.phone || !bind.code) {
|
||||||
|
uni.showToast({ title: '手机号和验证码都不能为空', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await authApi.bindPhone(bind.phone, bind.code);
|
||||||
|
uni.showToast({ title: '绑定成功', icon: 'success' });
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack();
|
||||||
|
}, 1500);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('绑定手机号失败', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
152
pages/change-phone/change-phone.vue
Normal file
152
pages/change-phone/change-phone.vue
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="card">
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">原手机号</view>
|
||||||
|
<up-input placeholder="请输入原手机号" border="surround" v-model="form.oldPhone" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">验证码</view>
|
||||||
|
<up-input placeholder="请输入原手机号验证码" border="surround" v-model="form.oldCode">
|
||||||
|
<template #suffix>
|
||||||
|
<up-button @tap="sendOldCode" :text="oldCodeText" type="success" size="small" :disabled="oldCooldown > 0"></up-button>
|
||||||
|
</template>
|
||||||
|
</up-input>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">新手机号</view>
|
||||||
|
<up-input placeholder="请输入新手机号" border="surround" v-model="form.newPhone" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">验证码</view>
|
||||||
|
<up-input placeholder="请输入新手机号验证码" border="surround" v-model="form.newCode">
|
||||||
|
<template #suffix>
|
||||||
|
<up-button @tap="sendNewCode" :text="newCodeText" type="success" size="small" :disabled="newCooldown > 0"></up-button>
|
||||||
|
</template>
|
||||||
|
</up-input>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btn-wrapper">
|
||||||
|
<up-button type="primary" @click="submit">确认更换</up-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
import { authApi } from '@/api/index.js';
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
oldPhone: '',
|
||||||
|
oldCode: '',
|
||||||
|
newPhone: '',
|
||||||
|
newCode: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
let oldCooldown = ref(0);
|
||||||
|
let newCooldown = ref(0);
|
||||||
|
let oldCodeText = ref('获取验证码');
|
||||||
|
let newCodeText = ref('获取验证码');
|
||||||
|
let oldTimer = null;
|
||||||
|
let newTimer = null;
|
||||||
|
|
||||||
|
const sendOldCode = async () => {
|
||||||
|
if (oldCooldown.value > 0) return;
|
||||||
|
if (!form.oldPhone) {
|
||||||
|
uni.showToast({ title: '请输入原手机号', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await authApi.sendCode(form.oldPhone, 'change_phone_old');
|
||||||
|
oldCooldown.value = data.cooldown_seconds || 60;
|
||||||
|
oldCodeText.value = `${oldCooldown.value}s`;
|
||||||
|
|
||||||
|
oldTimer = setInterval(() => {
|
||||||
|
oldCooldown.value--;
|
||||||
|
if (oldCooldown.value <= 0) {
|
||||||
|
clearInterval(oldTimer);
|
||||||
|
oldCodeText.value = '获取验证码';
|
||||||
|
} else {
|
||||||
|
oldCodeText.value = `${oldCooldown.value}s`;
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
uni.showToast({ title: '验证码已发送', icon: 'success' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('发送验证码失败', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendNewCode = async () => {
|
||||||
|
if (newCooldown.value > 0) return;
|
||||||
|
if (!form.newPhone) {
|
||||||
|
uni.showToast({ title: '请输入新手机号', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await authApi.sendCode(form.newPhone, 'change_phone_new');
|
||||||
|
newCooldown.value = data.cooldown_seconds || 60;
|
||||||
|
newCodeText.value = `${newCooldown.value}s`;
|
||||||
|
|
||||||
|
newTimer = setInterval(() => {
|
||||||
|
newCooldown.value--;
|
||||||
|
if (newCooldown.value <= 0) {
|
||||||
|
clearInterval(newTimer);
|
||||||
|
newCodeText.value = '获取验证码';
|
||||||
|
} else {
|
||||||
|
newCodeText.value = `${newCooldown.value}s`;
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
uni.showToast({ title: '验证码已发送', icon: 'success' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('发送验证码失败', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
if (!form.oldPhone || !form.oldCode) {
|
||||||
|
uni.showToast({ title: '请填写原手机号信息', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!form.newPhone || !form.newCode) {
|
||||||
|
uni.showToast({ title: '请填写新手机号信息', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await authApi.changePhone(form.oldPhone, form.oldCode, form.newPhone, form.newCode);
|
||||||
|
uni.showToast({ title: '更换成功', icon: 'success' });
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack();
|
||||||
|
}, 1500);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('更换手机号失败', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
.card {
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
.label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-wrapper {
|
||||||
|
margin-top: var(--space-xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
217
pages/device-exchange/device-exchange.vue
Normal file
217
pages/device-exchange/device-exchange.vue
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view v-if="!exchangeData && !loading" class="empty-state">
|
||||||
|
<view class="empty-icon">🔄</view>
|
||||||
|
<view class="empty-title">暂无换货记录</view>
|
||||||
|
<view class="empty-desc">当前账号下暂无设备换货记录</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-else-if="exchangeData" class="card exchange-card">
|
||||||
|
<view class="exchange-header flex-row-sb">
|
||||||
|
<view class="exchange-no">{{ exchangeData.exchange_no }}</view>
|
||||||
|
<view class="tag-apple" :class="getStatusClass(exchangeData.status)">{{ exchangeData.status_text }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="exchange-info">
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">换货原因</view>
|
||||||
|
<view class="info-value">{{ exchangeData.exchange_reason }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">申请时间</view>
|
||||||
|
<view class="info-value">{{ formatTime(exchangeData.created_at) }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb" v-if="exchangeData.recipient_name">
|
||||||
|
<view class="info-label">收件人</view>
|
||||||
|
<view class="info-value">{{ exchangeData.recipient_name }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb" v-if="exchangeData.recipient_phone">
|
||||||
|
<view class="info-label">联系电话</view>
|
||||||
|
<view class="info-value">{{ exchangeData.recipient_phone }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb" v-if="exchangeData.recipient_address">
|
||||||
|
<view class="info-label">收货地址</view>
|
||||||
|
<view class="info-value address-value">{{ exchangeData.recipient_address }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="exchange-actions" v-if="exchangeData.status === 1">
|
||||||
|
<button class="btn-apple btn-primary" @tap="openPopup">填写信息</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<up-popup :show="showPopup" mode="center" @close="showPopup=false">
|
||||||
|
<view class="popup-content">
|
||||||
|
<view class="popup-title">填写换货信息</view>
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">收件人姓名</view>
|
||||||
|
<up-input placeholder="请输入收件人姓名" border="surround" v-model="form.recipient_name" />
|
||||||
|
</view>
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">收件人电话</view>
|
||||||
|
<up-input placeholder="请输入收件人电话" border="surround" v-model="form.recipient_phone" />
|
||||||
|
</view>
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">收货地址</view>
|
||||||
|
<up-input placeholder="请输入详细收货地址" border="surround" v-model="form.recipient_address" />
|
||||||
|
</view>
|
||||||
|
<view class="popup-btn-group">
|
||||||
|
<button class="btn-apple btn-secondary" @tap="showPopup=false">取消</button>
|
||||||
|
<button class="btn-apple btn-primary" @tap="submitExchange">提交</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</up-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import { exchangeApi } from '@/api/index.js';
|
||||||
|
import { useUserStore } from '@/store/index.js';
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
let exchangeData = reactive(null);
|
||||||
|
let loading = ref(false);
|
||||||
|
let showPopup = ref(false);
|
||||||
|
let form = reactive({
|
||||||
|
recipient_name: '',
|
||||||
|
recipient_phone: '',
|
||||||
|
recipient_address: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const getStatusClass = (status) => {
|
||||||
|
const classMap = {
|
||||||
|
1: 'tag-warning',
|
||||||
|
2: 'tag-primary',
|
||||||
|
3: 'tag-success',
|
||||||
|
4: 'tag-success',
|
||||||
|
5: 'tag-danger'
|
||||||
|
};
|
||||||
|
return classMap[status] || '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatTime = (time) => {
|
||||||
|
if (!time) return '-';
|
||||||
|
return time.split('T').join(' ').slice(0, 19);
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadExchange = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const data = await exchangeApi.getPending(userStore.state.identifier);
|
||||||
|
if (data) {
|
||||||
|
exchangeData.splice(0, exchangeData.length, data);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载换货记录失败', e);
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const openPopup = () => {
|
||||||
|
form.recipient_name = exchangeData?.recipient_name || '';
|
||||||
|
form.recipient_phone = exchangeData?.recipient_phone || '';
|
||||||
|
form.recipient_address = exchangeData?.recipient_address || '';
|
||||||
|
showPopup.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const submitExchange = async () => {
|
||||||
|
if (!form.recipient_name) {
|
||||||
|
uni.showToast({ title: '请输入收件人姓名', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!form.recipient_phone) {
|
||||||
|
uni.showToast({ title: '请输入收件人电话', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!form.recipient_address) {
|
||||||
|
uni.showToast({ title: '请输入收货地址', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await exchangeApi.submitShippingInfo(
|
||||||
|
exchangeData.id,
|
||||||
|
form.recipient_name,
|
||||||
|
form.recipient_phone,
|
||||||
|
form.recipient_address
|
||||||
|
);
|
||||||
|
uni.showToast({ title: '提交成功', icon: 'success' });
|
||||||
|
showPopup.value = false;
|
||||||
|
loadExchange();
|
||||||
|
} catch (e) {
|
||||||
|
console.error('提交换货信息失败', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadExchange();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 120rpx 40rpx;
|
||||||
|
min-height: 60vh;
|
||||||
|
.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
|
||||||
|
.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
|
||||||
|
.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; margin-bottom: 40rpx; }
|
||||||
|
.empty-btn { width: 100%; max-width: 400rpx; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.exchange-card {
|
||||||
|
.exchange-header {
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
.exchange-no { font-size: 28rpx; font-weight: 600; color: var(--text-primary); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.exchange-info {
|
||||||
|
.info-row {
|
||||||
|
padding: var(--space-xs) 0;
|
||||||
|
.info-label { font-size: 24rpx; color: var(--text-tertiary); }
|
||||||
|
.info-value { font-size: 24rpx; color: var(--text-primary); }
|
||||||
|
.address-value { max-width: 400rpx; text-align: right; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.exchange-actions {
|
||||||
|
margin-top: var(--space-lg);
|
||||||
|
padding-top: var(--space-md);
|
||||||
|
border-top: 1rpx solid var(--gray-200);
|
||||||
|
.btn-apple { width: 100%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-content {
|
||||||
|
width: 600rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
.popup-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
.form-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.popup-btn-group {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-md);
|
||||||
|
margin-top: var(--space-lg);
|
||||||
|
.btn-apple { flex: 1; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
21
pages/error/error.vue
Normal file
21
pages/error/error.vue
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<template>
|
||||||
|
<view class="error">
|
||||||
|
请在微信中打开...
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.error{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
515
pages/index/index.vue
Normal file
515
pages/index/index.vue
Normal file
@@ -0,0 +1,515 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<UserInfoCard :currentCardNo="currentCardNo" :deviceInfo="deviceInfo" :onlineStatus="onlineStatus" />
|
||||||
|
|
||||||
|
<DeviceStatusCard v-if="userInfo.isDevice" :deviceInfo="deviceInfo" :isRealName="isRealName"
|
||||||
|
@authentication="enterDetail('authentication')" />
|
||||||
|
|
||||||
|
<VoiceCard v-if="!userInfo.isDevice" :voiceStats="voiceStats" :dateRangeText="dateRangeText"
|
||||||
|
@openDatePicker="openDateRangePicker" />
|
||||||
|
|
||||||
|
<TrafficCard :deviceInfo="deviceInfo" :isDevice="userInfo.isDevice" />
|
||||||
|
|
||||||
|
<WhitelistCard v-if="!userInfo.isDevice" :whitelistData="whitelistData" @refresh="refreshWhitelist"
|
||||||
|
@add="showAddWhitelistDialog" @showSms="showSmsCodeDialog" />
|
||||||
|
|
||||||
|
<WifiCard v-if="userInfo.isDevice" :deviceInfo="deviceInfo" @modify="modifyWifi" @copy="copy" />
|
||||||
|
|
||||||
|
<FunctionCard :realNameStatus="realNameStatus" :alreadyBindPhone="alreadyBindPhone"
|
||||||
|
:isDevice="userInfo.isDevice" @enter="enterDetail" @sync="onSync">
|
||||||
|
<!-- 修改WIFI弹窗 -->
|
||||||
|
<up-popup :show="showModifyWifi" mode="center" @close="showModifyWifi=false">
|
||||||
|
<view class="wifi-popup">
|
||||||
|
<view class="title mb-md">修改WIFI</view>
|
||||||
|
<view class="flex-col-g20">
|
||||||
|
<view class="flex-col-g8">
|
||||||
|
<label class="caption">名称:</label>
|
||||||
|
<up-input placeholder="WIFI名称" border="surround" v-model="wifi_info.ssid" />
|
||||||
|
</view>
|
||||||
|
<view class="flex-col-g8">
|
||||||
|
<label class="caption">密码:</label>
|
||||||
|
<up-input placeholder="WIFI密码" border="surround" v-model="wifi_info.pwd" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-group mt-20">
|
||||||
|
<button class="btn-apple btn-secondary" @tap="showModifyWifi=false">取消</button>
|
||||||
|
<button class="btn-apple btn-primary" @tap="confirmModify">确定</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</up-popup>
|
||||||
|
|
||||||
|
<!-- 重启设备 -->
|
||||||
|
<up-modal title="您确定要重启设备吗？" :show="restartShow" showCancelButton @confirm="YesRestart"
|
||||||
|
@cancel="restartShow=false" />
|
||||||
|
|
||||||
|
<!-- 恢复出厂设置 -->
|
||||||
|
<up-modal title="您确定要恢复出厂设置吗？" :show="recoverShow" showCancelButton @confirm="YesRecover"
|
||||||
|
@cancel="recoverShow=false" />
|
||||||
|
|
||||||
|
<!-- 退出登录 -->
|
||||||
|
<up-modal title="您确定要退出登录吗？" :show="logoutShow" showCancelButton @confirm="YesLogout"
|
||||||
|
@cancel="logoutShow=false" />
|
||||||
|
|
||||||
|
<!-- 添加白名单弹窗 -->
|
||||||
|
<up-popup :show="showAddWhitelist" mode="center" @close="showAddWhitelist=false">
|
||||||
|
<view class="wifi-popup">
|
||||||
|
<view class="title mb-md">添加白名单</view>
|
||||||
|
<view class="flex-col-g20">
|
||||||
|
<view class="flex-col-g8">
|
||||||
|
<label class="caption">姓名:</label>
|
||||||
|
<up-input placeholder="请输入姓名" border="surround" v-model="whitelistForm.name" />
|
||||||
|
</view>
|
||||||
|
<view class="flex-col-g8">
|
||||||
|
<label class="caption">手机号:</label>
|
||||||
|
<up-input placeholder="请输入手机号" border="surround" v-model="whitelistForm.phone" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-group mt-20">
|
||||||
|
<button class="btn-apple btn-secondary" @tap="showAddWhitelist=false">取消</button>
|
||||||
|
<button class="btn-apple btn-primary" @tap="confirmAddWhitelist">确定</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</up-popup>
|
||||||
|
<!-- 上传短信码弹窗 -->
|
||||||
|
<up-popup :show="showSmsCode" mode="center" @close="showSmsCode=false">
|
||||||
|
<view class="wifi-popup">
|
||||||
|
<view class="title mb-md">上传短信验证码</view>
|
||||||
|
<view class="flex-col-g20">
|
||||||
|
<view class="flex-col-g8">
|
||||||
|
<label class="caption">手机号: {{smsCodePhone}}</label>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col-g8">
|
||||||
|
<label class="caption">验证码:</label>
|
||||||
|
<up-input placeholder="请输入短信验证码" border="surround" v-model="smsCode" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-group mt-20">
|
||||||
|
<button class="btn-apple btn-secondary" @tap="showSmsCode=false">取消</button>
|
||||||
|
<button class="btn-apple btn-primary" @tap="confirmUploadSmsCode">确定</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</up-popup>
|
||||||
|
</FunctionCard>
|
||||||
|
|
||||||
|
<view class="bottom-spacer"></view>
|
||||||
|
|
||||||
|
<!-- 日期选择器弹窗 -->
|
||||||
|
<up-datetime-picker v-if="!userInfo.isDevice" :show="showStartDatePicker" v-model="startDateTimestamp"
|
||||||
|
mode="date" @confirm="onStartDateConfirm" @cancel="showStartDatePicker=false"
|
||||||
|
@close="showStartDatePicker=false"></up-datetime-picker>
|
||||||
|
<up-datetime-picker v-if="!userInfo.isDevice" :show="showEndDatePicker" v-model="endDateTimestamp" mode="date"
|
||||||
|
@confirm="onEndDateConfirm" @cancel="showEndDatePicker=false"
|
||||||
|
@close="showEndDatePicker=false"></up-datetime-picker>
|
||||||
|
|
||||||
|
<FloatingButton @tap="connectKF" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
onMounted,
|
||||||
|
computed
|
||||||
|
} from 'vue';
|
||||||
|
import UserInfoCard from '@/components/UserInfoCard.vue';
|
||||||
|
import DeviceStatusCard from '@/components/DeviceStatusCard.vue';
|
||||||
|
import VoiceCard from '@/components/VoiceCard.vue';
|
||||||
|
import TrafficCard from '@/components/TrafficCard.vue';
|
||||||
|
import WhitelistCard from '@/components/WhitelistCard.vue';
|
||||||
|
import WifiCard from '@/components/WifiCard.vue';
|
||||||
|
import FunctionCard from '@/components/FunctionCard.vue';
|
||||||
|
import FloatingButton from '@/components/FloatingButton.vue';
|
||||||
|
import { assetApi, deviceApi } from '@/api/index.js';
|
||||||
|
import { useUserStore } from '@/store/index.js';
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
let showModifyWifi = ref(false);
|
||||||
|
let restartShow = ref(false);
|
||||||
|
let recoverShow = ref(false);
|
||||||
|
let logoutShow = ref(false);
|
||||||
|
let loading = ref(false);
|
||||||
|
|
||||||
|
let userInfo = reactive({
|
||||||
|
isDevice: true,
|
||||||
|
avatar: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
let deviceInfo = reactive({
|
||||||
|
battery: 100,
|
||||||
|
connect: 0,
|
||||||
|
statusStr: '正常',
|
||||||
|
expireDate: '',
|
||||||
|
currentIccid: '',
|
||||||
|
category: '',
|
||||||
|
phone: '',
|
||||||
|
flowSize: 0,
|
||||||
|
totalBytesCnt: 0,
|
||||||
|
ssidName: '',
|
||||||
|
ssidPwd: '',
|
||||||
|
rssi: '强',
|
||||||
|
onlineStatus: '0',
|
||||||
|
connCnt: 0,
|
||||||
|
run_time: 0,
|
||||||
|
last_online_time: '',
|
||||||
|
lan_ip: '',
|
||||||
|
kf_url: '',
|
||||||
|
mchList: []
|
||||||
|
});
|
||||||
|
|
||||||
|
let isRealName = ref(false);
|
||||||
|
let alreadyBindPhone = ref(false);
|
||||||
|
let realNameStatus = ref('');
|
||||||
|
let wifi_info = reactive({
|
||||||
|
ssid: '',
|
||||||
|
pwd: ''
|
||||||
|
});
|
||||||
|
let currentCardNo = ref('');
|
||||||
|
let accountName = ref('');
|
||||||
|
let voiceCardStatus = reactive({
|
||||||
|
cardStatus: '',
|
||||||
|
online: '离线'
|
||||||
|
});
|
||||||
|
let voiceStats = reactive({
|
||||||
|
totalVoice: 0,
|
||||||
|
usedVoice: 0,
|
||||||
|
remainingVoice: 0
|
||||||
|
});
|
||||||
|
let showStartDatePicker = ref(false);
|
||||||
|
let showEndDatePicker = ref(false);
|
||||||
|
let startDate = ref('');
|
||||||
|
let endDate = ref('');
|
||||||
|
let startDateTimestamp = ref(Date.now());
|
||||||
|
let endDateTimestamp = ref(Date.now());
|
||||||
|
let dateRangeText = ref('');
|
||||||
|
let whitelistData = reactive([]);
|
||||||
|
let showAddWhitelist = ref(false);
|
||||||
|
let whitelistForm = reactive({
|
||||||
|
name: '',
|
||||||
|
phone: ''
|
||||||
|
});
|
||||||
|
let showSmsCode = ref(false);
|
||||||
|
let smsCodePhone = ref('');
|
||||||
|
let smsCode = ref('');
|
||||||
|
|
||||||
|
const loadAssetInfo = async () => {
|
||||||
|
const identifier = userStore.state.identifier;
|
||||||
|
if (!identifier) return;
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const data = await assetApi.getInfo(identifier);
|
||||||
|
userInfo.isDevice = data.asset_type === 'device';
|
||||||
|
currentCardNo.value = data.identifier;
|
||||||
|
deviceInfo.statusStr = data.status === 1 ? '正常' : '禁用';
|
||||||
|
isRealName.value = data.real_name_status === 1;
|
||||||
|
realNameStatus.value = data.real_name_status === 1 ? '已实名' : '未实名';
|
||||||
|
deviceInfo.flowSize = data.package_remain_mb || 0;
|
||||||
|
deviceInfo.totalBytesCnt = data.package_total_mb || 0;
|
||||||
|
deviceInfo.currentIccid = data.identifier;
|
||||||
|
|
||||||
|
if (data.device_realtime) {
|
||||||
|
const rt = data.device_realtime;
|
||||||
|
deviceInfo.onlineStatus = rt.online_status === 1 ? '1' : '0';
|
||||||
|
deviceInfo.battery = rt.battery_level || 100;
|
||||||
|
deviceInfo.ssidName = rt.ssid || '';
|
||||||
|
deviceInfo.ssidPwd = rt.wifi_password || '';
|
||||||
|
deviceInfo.lan_ip = rt.lan_ip || '';
|
||||||
|
deviceInfo.connCnt = rt.client_number || 0;
|
||||||
|
deviceInfo.run_time = rt.run_time || 0;
|
||||||
|
deviceInfo.rssi = rt.rssi || '强';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.cards && data.cards.length > 0) {
|
||||||
|
deviceInfo.mchList = data.cards.map(card => ({
|
||||||
|
iccidMark: card.iccid,
|
||||||
|
category: card.slot_position
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载资产信息失败', e);
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const modifyWifi = () => {
|
||||||
|
wifi_info.ssid = deviceInfo.ssidName;
|
||||||
|
wifi_info.pwd = deviceInfo.ssidPwd;
|
||||||
|
showModifyWifi.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmModify = async () => {
|
||||||
|
try {
|
||||||
|
await deviceApi.setWifi(
|
||||||
|
userStore.state.identifier,
|
||||||
|
wifi_info.ssid,
|
||||||
|
wifi_info.pwd,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
deviceInfo.ssidName = wifi_info.ssid;
|
||||||
|
deviceInfo.ssidPwd = wifi_info.pwd;
|
||||||
|
uni.showToast({ title: '修改成功', icon: 'success' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('修改WiFi失败', e);
|
||||||
|
}
|
||||||
|
showModifyWifi.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const connectKF = () => uni.showToast({
|
||||||
|
title: '正在跳转客服',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
const enterBack = () => uni.showToast({
|
||||||
|
title: '正在跳转后台',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
|
||||||
|
const YesRestart = async () => {
|
||||||
|
try {
|
||||||
|
await deviceApi.reboot(userStore.state.identifier);
|
||||||
|
uni.showToast({ title: '重启指令已发送', icon: 'success' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('重启设备失败', e);
|
||||||
|
}
|
||||||
|
restartShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const copy = (content) => {
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: content,
|
||||||
|
success: () => uni.showToast({
|
||||||
|
title: '复制成功',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const YesRecover = async () => {
|
||||||
|
try {
|
||||||
|
await deviceApi.factoryReset(userStore.state.identifier);
|
||||||
|
uni.showToast({ title: '恢复出厂设置指令已发送', icon: 'success' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('恢复出厂设置失败', e);
|
||||||
|
}
|
||||||
|
recoverShow.value = false;
|
||||||
|
};
|
||||||
|
const YesLogout = () => {
|
||||||
|
uni.clearStorageSync();
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/login/login'
|
||||||
|
});
|
||||||
|
logoutShow.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onlineStatus = computed(() => {
|
||||||
|
if (!userInfo.isDevice) return voiceCardStatus.online || '离线';
|
||||||
|
return deviceInfo.onlineStatus === '1' ? '在线' : '离线';
|
||||||
|
});
|
||||||
|
|
||||||
|
const initCurrentMonth = () => {
|
||||||
|
const now = new Date();
|
||||||
|
const year = now.getFullYear();
|
||||||
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||||
|
startDate.value = `${year}-${month}-01`;
|
||||||
|
const lastDay = new Date(year, parseInt(month), 0).getDate();
|
||||||
|
endDate.value = `${year}-${month}-${String(lastDay).padStart(2, '0')}`;
|
||||||
|
updateDateRangeText();
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateDateRangeText = () => {
|
||||||
|
if (startDate.value && endDate.value) {
|
||||||
|
const [sYear, sMonth, sDay] = startDate.value.split('-');
|
||||||
|
const [eYear, eMonth, eDay] = endDate.value.split('-');
|
||||||
|
dateRangeText.value = `${sYear}-${sMonth}-${sDay} 至 ${eYear}-${eMonth}-${eDay}`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openDateRangePicker = () => {
|
||||||
|
if (startDate.value) startDateTimestamp.value = new Date(startDate.value).getTime();
|
||||||
|
showStartDatePicker.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onStartDateConfirm = (e) => {
|
||||||
|
const date = new Date(e.value);
|
||||||
|
startDate.value =
|
||||||
|
`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||||
|
showStartDatePicker.value = false;
|
||||||
|
setTimeout(() => {
|
||||||
|
if (endDate.value) endDateTimestamp.value = new Date(endDate.value).getTime();
|
||||||
|
else endDateTimestamp.value = e.value;
|
||||||
|
showEndDatePicker.value = true;
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onEndDateConfirm = (e) => {
|
||||||
|
const date = new Date(e.value);
|
||||||
|
endDate.value =
|
||||||
|
`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||||
|
showEndDatePicker.value = false;
|
||||||
|
if (new Date(startDate.value) > new Date(endDate.value)) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '开始日期不能大于结束日期',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
updateDateRangeText();
|
||||||
|
};
|
||||||
|
|
||||||
|
const refreshWhitelist = () => uni.showToast({
|
||||||
|
title: '刷新成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
|
||||||
|
const showAddWhitelistDialog = () => {
|
||||||
|
whitelistForm.name = '';
|
||||||
|
whitelistForm.phone = '';
|
||||||
|
showAddWhitelist.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmAddWhitelist = () => {
|
||||||
|
if (!whitelistForm.name || !whitelistForm.phone) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入姓名和手机号',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const phoneReg = /^1[3-9]\d{9}$/;
|
||||||
|
if (!phoneReg.test(whitelistForm.phone)) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入正确的手机号',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
whitelistData.push({
|
||||||
|
name: whitelistForm.name,
|
||||||
|
phone: whitelistForm.phone,
|
||||||
|
state: '1',
|
||||||
|
createTime: new Date().toISOString().split('T')[0]
|
||||||
|
});
|
||||||
|
uni.showToast({
|
||||||
|
title: '添加成功',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
showAddWhitelist.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const showSmsCodeDialog = (phone, state) => {
|
||||||
|
if (state !== '5' && state !== '3') {
|
||||||
|
uni.showToast({
|
||||||
|
title: '当前状态无需上传短信验证码',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
smsCodePhone.value = phone;
|
||||||
|
smsCode.value = '';
|
||||||
|
showSmsCode.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmUploadSmsCode = () => {
|
||||||
|
if (!smsCode.value) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入短信验证码',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
uni.showToast({
|
||||||
|
title: '操作成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
showSmsCode.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSync = () => {
|
||||||
|
uni.showToast({ title: '同步成功', icon: 'success' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const enterDetail = (name) => {
|
||||||
|
switch (name) {
|
||||||
|
case 'package-order':
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/package-order/package-order'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'order-list':
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/order-list/order-list'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'back':
|
||||||
|
enterBack();
|
||||||
|
break;
|
||||||
|
case 'switch':
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/switch/switch'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'asset-package':
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/asset-package-history/asset-package-history'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'bind':
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/bind/bind'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'change-phone':
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/change-phone/change-phone'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'device-exchange':
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/device-exchange/device-exchange'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'wallet':
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/my-wallet/my-wallet'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'authentication':
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/auth/auth'
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'recover':
|
||||||
|
restartShow.value = true;
|
||||||
|
break;
|
||||||
|
case 'restart':
|
||||||
|
restartShow.value = true;
|
||||||
|
break;
|
||||||
|
case 'out':
|
||||||
|
logoutShow.value = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initCurrentMonth();
|
||||||
|
loadAssetInfo();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.wifi-popup {
|
||||||
|
width: 600rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-spacer {
|
||||||
|
height: 120rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
116
pages/login/login.vue
Normal file
116
pages/login/login.vue
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="card">
|
||||||
|
<view class="title-login">
|
||||||
|
登录
|
||||||
|
</view>
|
||||||
|
<view class="input">
|
||||||
|
<up-input class="mt-30" v-model="identifier" placeholder="请输入SN/IMEI/虚拟号/ICCID/MSISDN"></up-input>
|
||||||
|
</view>
|
||||||
|
<view class="button">
|
||||||
|
<up-button class="mt-30 btn-apple btn-primary" type="primary" :loading="loading" @click="login">立即登录</up-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { authApi } from '@/api/index.js';
|
||||||
|
import { useUserStore } from '@/store/index.js';
|
||||||
|
import { APP_ID } from '@/utils/env.js';
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
const identifier = ref('');
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const isWechat = /micromessenger/i.test(navigator.userAgent);
|
||||||
|
|
||||||
|
const getCode = () => {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
return params.get('code');
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearCode = () => {
|
||||||
|
window.history.replaceState({}, '', window.location.pathname);
|
||||||
|
};
|
||||||
|
|
||||||
|
const redirectToWxAuth = (assetToken) => {
|
||||||
|
const redirectUri = encodeURIComponent(window.location.href.split('?')[0]);
|
||||||
|
const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APP_ID}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=${assetToken}#wechat_redirect`;
|
||||||
|
window.location.href = url;
|
||||||
|
};
|
||||||
|
|
||||||
|
const login = async () => {
|
||||||
|
if (!identifier.value) {
|
||||||
|
uni.showToast({ title: '请输入SN/IMEI/虚拟号/ICCID/MSISDN', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const verifyData = await authApi.verifyAsset(identifier.value);
|
||||||
|
userStore.setAssetToken(verifyData.asset_token);
|
||||||
|
userStore.setIdentifier(identifier.value);
|
||||||
|
|
||||||
|
// if (!isWechat) {
|
||||||
|
// uni.showToast({ title: '请在微信中打开', icon: 'none' });
|
||||||
|
// loading.value = false;
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
redirectToWxAuth(verifyData.asset_token);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('登录失败', e);
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleWechatCallback = async () => {
|
||||||
|
const code = getCode();
|
||||||
|
const assetToken = userStore.state.assetToken;
|
||||||
|
|
||||||
|
if (!code || !assetToken) return;
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
clearCode();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const loginData = await authApi.wechatLogin(assetToken, code);
|
||||||
|
userStore.setToken(loginData.token);
|
||||||
|
|
||||||
|
uni.setStorageSync('identifier', userStore.state.identifier);
|
||||||
|
uni.redirectTo({ url: '/pages/index/index' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('微信登录失败', e);
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
handleWechatCallback();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
padding-top: 30vh;
|
||||||
|
|
||||||
|
.title-login {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
margin: 70rpx 0 50rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
397
pages/my-wallet/my-wallet.vue
Normal file
397
pages/my-wallet/my-wallet.vue
Normal file
@@ -0,0 +1,397 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="wallet-card">
|
||||||
|
<view class="balance-section">
|
||||||
|
<view class="balance-label">账户余额(元)</view>
|
||||||
|
<view class="balance-amount">{{ formatMoney(walletDetail.balance) }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="wallet-footer">
|
||||||
|
<view class="footer-item">
|
||||||
|
<view class="footer-label">冻结金额</view>
|
||||||
|
<view class="footer-value">{{ formatMoney(walletDetail.frozen_balance) }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="footer-divider"></view>
|
||||||
|
<view class="footer-item">
|
||||||
|
<view class="footer-label">更新时间</view>
|
||||||
|
<view class="footer-value">{{ walletDetail.updated_at }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tab-section">
|
||||||
|
<view class="tab-header">
|
||||||
|
<view class="tab-indicator" :style="{ left: currentTab === 0 ? '8rpx' : '50%' }"></view>
|
||||||
|
<view class="tab-item" :class="{ active: currentTab === 0 }" @tap="onTabTap(0)">
|
||||||
|
<text>充值记录</text>
|
||||||
|
</view>
|
||||||
|
<view class="tab-item" :class="{ active: currentTab === 1 }" @tap="onTabTap(1)">
|
||||||
|
<text>钱包流水</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<swiper class="tab-swiper" :current="currentTab" @change="onSwiperChange" :circular="false" :acceleration="true">
|
||||||
|
<swiper-item class="swiper-item-content">
|
||||||
|
<scroll-view scroll-y class="list-content">
|
||||||
|
<view v-if="rechargeList.length === 0 && !rechargeLoading" class="empty-state">
|
||||||
|
<view class="empty-icon">📋</view>
|
||||||
|
<view class="empty-title">暂无充值记录</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-else>
|
||||||
|
<view class="card record-card" v-for="(item, index) in rechargeList" :key="index">
|
||||||
|
<view class="record-header flex-row-sb">
|
||||||
|
<view class="record-no">{{ item.recharge_no }}</view>
|
||||||
|
<view class="tag-apple" :class="getRechargeStatusClass(item.status)">{{ item.status_name }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="record-info">
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">充值金额</view>
|
||||||
|
<view class="info-value text-danger">+¥{{ formatMoney(item.amount) }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">支付方式</view>
|
||||||
|
<view class="info-value">{{ item.payment_method || '-' }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">自动购包</view>
|
||||||
|
<view class="info-value">{{ item.auto_purchase_status === '1' ? '已开启' : '未开启' }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">创建时间</view>
|
||||||
|
<view class="info-value">{{ item.created_at }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="load-more" v-if="rechargeList.length > 0">
|
||||||
|
<text v-if="rechargeLoading">加载中...</text>
|
||||||
|
<text v-else-if="rechargeNoMore">— 没有更多了 —</text>
|
||||||
|
<text v-else @tap="loadMoreRecharge">点击加载更多</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</swiper-item>
|
||||||
|
|
||||||
|
<swiper-item class="swiper-item-content">
|
||||||
|
<scroll-view scroll-y class="list-content">
|
||||||
|
<view v-if="transactionList.length === 0 && !transactionLoading" class="empty-state">
|
||||||
|
<view class="empty-icon">💰</view>
|
||||||
|
<view class="empty-title">暂无钱包流水</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-else>
|
||||||
|
<view class="card record-card" v-for="(item, index) in transactionList" :key="index">
|
||||||
|
<view class="record-header flex-row-sb">
|
||||||
|
<view class="record-type">{{ item.type_name }}</view>
|
||||||
|
<view class="record-amount" :class="item.amount >= 0 ? 'text-success' : 'text-danger'">
|
||||||
|
{{ item.amount >= 0 ? '+' : '' }}{{ formatMoney(item.amount) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="record-info">
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">流水ID</view>
|
||||||
|
<view class="info-value text-ellipsis">{{ item.transaction_id }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">变动后余额</view>
|
||||||
|
<view class="info-value">¥{{ formatMoney(item.balance_after) }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb" v-if="item.remark">
|
||||||
|
<view class="info-label">备注</view>
|
||||||
|
<view class="info-value">{{ item.remark }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">创建时间</view>
|
||||||
|
<view class="info-value">{{ item.created_at }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="load-more" v-if="transactionList.length > 0">
|
||||||
|
<text v-if="transactionLoading">加载中...</text>
|
||||||
|
<text v-else-if="transactionNoMore">— 没有更多了 —</text>
|
||||||
|
<text v-else @tap="loadMoreTransaction">点击加载更多</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import { walletApi } from '@/api/index.js';
|
||||||
|
import { useUserStore } from '@/store/index.js';
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
let currentTab = ref(0);
|
||||||
|
|
||||||
|
const onTabTap = (index) => {
|
||||||
|
currentTab.value = index;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSwiperChange = (e) => {
|
||||||
|
currentTab.value = e.detail.current;
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatMoney = (amount) => {
|
||||||
|
if (!amount && amount !== 0) return '0.00';
|
||||||
|
return (amount / 100).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||||
|
};
|
||||||
|
|
||||||
|
let walletDetail = reactive({
|
||||||
|
balance: 0,
|
||||||
|
frozen_balance: 0,
|
||||||
|
updated_at: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
let rechargeList = reactive([]);
|
||||||
|
let rechargeLoading = ref(false);
|
||||||
|
let rechargeNoMore = ref(false);
|
||||||
|
let rechargePage = ref(1);
|
||||||
|
const rechargePageSize = 5;
|
||||||
|
|
||||||
|
let transactionList = reactive([]);
|
||||||
|
let transactionLoading = ref(false);
|
||||||
|
let transactionNoMore = ref(false);
|
||||||
|
let transactionPage = ref(1);
|
||||||
|
const transactionPageSize = 5;
|
||||||
|
|
||||||
|
const getRechargeStatusClass = (status) => {
|
||||||
|
const classMap = {
|
||||||
|
'0': 'tag-warning',
|
||||||
|
'1': 'tag-success',
|
||||||
|
'2': 'tag-danger'
|
||||||
|
};
|
||||||
|
return classMap[status] || '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadWalletDetail = async () => {
|
||||||
|
try {
|
||||||
|
const data = await walletApi.getDetail(userStore.state.identifier);
|
||||||
|
walletDetail.balance = data.balance || 0;
|
||||||
|
walletDetail.frozen_balance = data.frozen_balance || 0;
|
||||||
|
walletDetail.updated_at = data.updated_at || '';
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载钱包详情失败', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadRechargeList = async (append = false) => {
|
||||||
|
if (rechargeLoading.value || rechargeNoMore.value) return;
|
||||||
|
rechargeLoading.value = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await walletApi.getRecharges(
|
||||||
|
userStore.state.identifier,
|
||||||
|
rechargePage.value,
|
||||||
|
rechargePageSize
|
||||||
|
);
|
||||||
|
|
||||||
|
const newData = (data.items || []).map(item => ({
|
||||||
|
...item,
|
||||||
|
status_name: item.status === 1 ? '已支付' : item.status === 0 ? '待支付' : '已关闭'
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (append) {
|
||||||
|
rechargeList.push(...newData);
|
||||||
|
} else {
|
||||||
|
rechargeList.splice(0, rechargeList.length, ...newData);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newData.length < rechargePageSize) {
|
||||||
|
rechargeNoMore.value = true;
|
||||||
|
} else {
|
||||||
|
rechargePage.value++;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载充值记录失败', e);
|
||||||
|
}
|
||||||
|
rechargeLoading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadTransactionList = async (append = false) => {
|
||||||
|
if (transactionLoading.value || transactionNoMore.value) return;
|
||||||
|
transactionLoading.value = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await walletApi.getTransactions(
|
||||||
|
userStore.state.identifier,
|
||||||
|
transactionPage.value,
|
||||||
|
transactionPageSize
|
||||||
|
);
|
||||||
|
|
||||||
|
const newData = (data.items || []).map(item => ({
|
||||||
|
...item,
|
||||||
|
type_name: item.type === 'recharge' ? '充值' : item.type === 'purchase' ? '消费' : '其他'
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (append) {
|
||||||
|
transactionList.push(...newData);
|
||||||
|
} else {
|
||||||
|
transactionList.splice(0, transactionList.length, ...newData);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newData.length < transactionPageSize) {
|
||||||
|
transactionNoMore.value = true;
|
||||||
|
} else {
|
||||||
|
transactionPage.value++;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载钱包流水失败', e);
|
||||||
|
}
|
||||||
|
transactionLoading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMoreRecharge = () => {
|
||||||
|
if (!rechargeNoMore.value) {
|
||||||
|
loadRechargeList(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMoreTransaction = () => {
|
||||||
|
if (!transactionNoMore.value) {
|
||||||
|
loadTransactionList(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadWalletDetail();
|
||||||
|
loadRechargeList();
|
||||||
|
loadTransactionList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wallet-card {
|
||||||
|
background: linear-gradient(135deg, #0A84FF 0%, #5AC8FA 50%, #64D2FF 100%);
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 36rpx;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 8rpx 32rpx rgba(10, 132, 255, 0.3);
|
||||||
|
|
||||||
|
.balance-section {
|
||||||
|
margin-bottom: 28rpx;
|
||||||
|
.balance-label { font-size: 24rpx; opacity: 0.75; margin-bottom: 8rpx; }
|
||||||
|
.balance-amount { font-size: 72rpx; font-weight: 700; letter-spacing: -2rpx; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.wallet-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 24rpx;
|
||||||
|
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||||
|
.footer-divider { width: 1rpx; height: 40rpx; background: rgba(255, 255, 255, 0.3); margin: 0 32rpx; }
|
||||||
|
.footer-item {
|
||||||
|
flex: 1;
|
||||||
|
.footer-label { font-size: 22rpx; opacity: 0.7; margin-bottom: 6rpx; }
|
||||||
|
.footer-value { font-size: 26rpx; font-weight: 600; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-section {
|
||||||
|
margin-top: 32rpx;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.tab-header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 8rpx;
|
||||||
|
.tab-indicator {
|
||||||
|
position: absolute;
|
||||||
|
top: 8rpx;
|
||||||
|
width: calc(50% - 16rpx);
|
||||||
|
height: calc(100% - 16rpx);
|
||||||
|
background: var(--primary);
|
||||||
|
border-radius: 12rpx;
|
||||||
|
transition: left 0.3s ease;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.tab-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
transition: color 0.3s;
|
||||||
|
&.active {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-swiper {
|
||||||
|
flex: 1;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-item-content {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-content {
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 16rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.record-card {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
.record-header {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
.record-no { font-size: 28rpx; font-weight: 600; color: var(--text-primary); }
|
||||||
|
.record-type { font-size: 28rpx; font-weight: 600; color: var(--text-primary); }
|
||||||
|
.record-amount { font-size: 32rpx; font-weight: 700; }
|
||||||
|
}
|
||||||
|
.record-info {
|
||||||
|
.info-row {
|
||||||
|
padding: 10rpx 0;
|
||||||
|
.info-label { font-size: 24rpx; color: var(--text-tertiary); }
|
||||||
|
.info-value { font-size: 24rpx; color: var(--text-primary); max-width: 380rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 120rpx 40rpx;
|
||||||
|
.empty-icon { font-size: 100rpx; margin-bottom: 24rpx; opacity: 0.5; }
|
||||||
|
.empty-title { font-size: 28rpx; font-weight: 600; color: var(--text-secondary); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
text-align: center;
|
||||||
|
padding: 32rpx;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
176
pages/order-list/order-list.vue
Normal file
176
pages/order-list/order-list.vue
Normal file
@@ -0,0 +1,176 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view v-if="orderList.length === 0 && !loading" class="empty-state">
|
||||||
|
<view class="empty-icon">📋</view>
|
||||||
|
<view class="empty-title">暂无订单</view>
|
||||||
|
<view class="empty-desc">当前账号下暂无订单信息</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-else class="card order-card" v-for="(item, index) in orderList" :key="index">
|
||||||
|
<view class="order-header flex-row-sb">
|
||||||
|
<view class="order-no">{{ item.order_no }}</view>
|
||||||
|
<view class="tag-apple" :class="getStatusClass(item.payment_status)">{{ item.payment_status_name }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="order-info">
|
||||||
|
<view class="info-row flex-row-sb">
|
||||||
|
<view class="info-label">下单时间</view>
|
||||||
|
<view class="info-value">{{ item.created_at }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="divider"></view>
|
||||||
|
|
||||||
|
<view class="package-list">
|
||||||
|
<view class="package-item" v-for="(pkgName, pIndex) in item.package_names" :key="pIndex">
|
||||||
|
<view class="package-name">{{ pkgName }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="order-footer flex-row-sb">
|
||||||
|
<view class="total-label">合计</view>
|
||||||
|
<view class="total-amount">¥{{ formatMoney(item.total_amount) }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="load-more" v-if="orderList.length > 0">
|
||||||
|
<text v-if="loading">加载中...</text>
|
||||||
|
<text v-else-if="noMore">没有更多了</text>
|
||||||
|
<text v-else @tap="loadMore">点击加载更多</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import { orderApi } from '@/api/index.js';
|
||||||
|
import { useUserStore } from '@/store/index.js';
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
let orderList = reactive([]);
|
||||||
|
let loading = ref(false);
|
||||||
|
let noMore = ref(false);
|
||||||
|
let page = ref(1);
|
||||||
|
const pageSize = 10;
|
||||||
|
|
||||||
|
const formatMoney = (amount) => {
|
||||||
|
if (!amount && amount !== 0) return '0.00';
|
||||||
|
return (amount / 100).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusClass = (status) => {
|
||||||
|
const classMap = {
|
||||||
|
'0': 'tag-warning',
|
||||||
|
'1': 'tag-success',
|
||||||
|
'2': 'tag-danger'
|
||||||
|
};
|
||||||
|
return classMap[status] || '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadOrderList = async (append = false) => {
|
||||||
|
if (loading.value || noMore.value) return;
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await orderApi.getList(
|
||||||
|
userStore.state.identifier,
|
||||||
|
page.value,
|
||||||
|
pageSize
|
||||||
|
);
|
||||||
|
|
||||||
|
const newData = (data.items || []).map(item => ({
|
||||||
|
...item,
|
||||||
|
payment_status_name: item.payment_status === 1 ? '已支付' : item.payment_status === 0 ? '待支付' : '已取消',
|
||||||
|
created_at: item.created_at ? item.created_at.split('T').join(' ').slice(0, 19) : ''
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (append) {
|
||||||
|
orderList.push(...newData);
|
||||||
|
} else {
|
||||||
|
orderList.splice(0, orderList.length, ...newData);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newData.length < pageSize) {
|
||||||
|
noMore.value = true;
|
||||||
|
} else {
|
||||||
|
page.value++;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载订单列表失败', e);
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMore = () => {
|
||||||
|
if (!noMore.value) {
|
||||||
|
loadOrderList(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadOrderList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 120rpx 40rpx;
|
||||||
|
min-height: 400rpx;
|
||||||
|
.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
|
||||||
|
.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
|
||||||
|
.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-card {
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
.order-header {
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
.order-no { font-size: 28rpx; font-weight: 600; color: var(--text-primary); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-info {
|
||||||
|
.info-row {
|
||||||
|
padding: var(--space-xs) 0;
|
||||||
|
.info-label { font-size: 24rpx; color: var(--text-tertiary); }
|
||||||
|
.info-value { font-size: 24rpx; color: var(--text-primary); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 1rpx;
|
||||||
|
background: var(--gray-200);
|
||||||
|
margin: var(--space-md) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-list {
|
||||||
|
.package-item {
|
||||||
|
padding: var(--space-sm) 0;
|
||||||
|
border-bottom: 1rpx solid var(--gray-100);
|
||||||
|
&:last-child { border-bottom: none; }
|
||||||
|
.package-name { font-size: 26rpx; color: var(--text-primary); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-footer {
|
||||||
|
margin-top: var(--space-md);
|
||||||
|
padding-top: var(--space-md);
|
||||||
|
border-top: 1rpx solid var(--gray-200);
|
||||||
|
.total-label { font-size: 26rpx; color: var(--text-secondary); }
|
||||||
|
.total-amount { font-size: 32rpx; font-weight: 700; color: var(--danger); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--space-lg);
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
131
pages/package-order/package-order.vue
Normal file
131
pages/package-order/package-order.vue
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view v-if="packageList.length === 0 && !loading" class="empty-state">
|
||||||
|
<view class="empty-icon">📦</view>
|
||||||
|
<view class="empty-title">暂无可购套餐</view>
|
||||||
|
<view class="empty-desc">当前资产暂无适用的套餐</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="card package-card" v-for="item in packageList" :key="item.package_id">
|
||||||
|
<view class="package-header flex-row-sb">
|
||||||
|
<view class="package-name">{{ item.package_name }}</view>
|
||||||
|
<view class="tag-apple" :class="item.is_addon ? 'tag-warning' : 'tag-primary'">
|
||||||
|
{{ item.is_addon ? '加油包' : '正式套餐' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="package-price">¥{{ formatMoney(item.retail_price) }}</view>
|
||||||
|
<view class="package-desc">{{ item.description }}</view>
|
||||||
|
<view class="package-info">
|
||||||
|
<view class="info-item">流量: {{ formatData(item.data_allowance, item.data_unit) }}</view>
|
||||||
|
<view class="info-item">有效: {{ item.validity_days }}天</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn">
|
||||||
|
<up-button type="primary" @click="buyPackage(item)">立即订购</up-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<up-modal title="确认购买" :show="showModal" showCancelButton @confirm="confirmBuy" @cancel="showModal=false">
|
||||||
|
<view style="padding: 40rpx; text-align: center;">
|
||||||
|
<view>套餐名称：{{ currentPackage?.package_name }}</view>
|
||||||
|
<view class="mt-20">价格：¥{{ formatMoney(currentPackage?.retail_price) }}</view>
|
||||||
|
</view>
|
||||||
|
</up-modal>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import { assetApi, orderApi } from '@/api/index.js';
|
||||||
|
import { useUserStore } from '@/store/index.js';
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
let showModal = ref(false);
|
||||||
|
let currentPackage = ref(null);
|
||||||
|
let packageList = reactive([]);
|
||||||
|
let loading = ref(false);
|
||||||
|
|
||||||
|
const formatMoney = (amount) => {
|
||||||
|
if (!amount && amount !== 0) return '0.00';
|
||||||
|
return (amount / 100).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatData = (allowance, unit) => {
|
||||||
|
if (unit === 'MB') {
|
||||||
|
return allowance >= 1024 ? (allowance / 1024).toFixed(0) + ' GB' : allowance + ' MB';
|
||||||
|
}
|
||||||
|
return allowance + ' ' + unit;
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadPackages = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const data = await assetApi.getPackages(userStore.state.identifier);
|
||||||
|
packageList.splice(0, packageList.length, ...(data.packages || []));
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载套餐列表失败', e);
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const buyPackage = (item) => {
|
||||||
|
currentPackage.value = item;
|
||||||
|
showModal.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmBuy = async () => {
|
||||||
|
try {
|
||||||
|
await orderApi.create(userStore.state.identifier, [currentPackage.value.package_id]);
|
||||||
|
uni.showToast({ title: '购买成功', icon: 'success' });
|
||||||
|
} catch (e) {
|
||||||
|
console.error('购买套餐失败', e);
|
||||||
|
}
|
||||||
|
showModal.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadPackages();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 120rpx 40rpx;
|
||||||
|
min-height: 400rpx;
|
||||||
|
.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
|
||||||
|
.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
|
||||||
|
.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-card {
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
.package-header {
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
.package-name { font-size: 32rpx; font-weight: 600; color: var(--text-primary); }
|
||||||
|
}
|
||||||
|
.package-price {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--warning);
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
.package-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
.package-info {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
.info-item { font-size: 24rpx; color: var(--text-tertiary); }
|
||||||
|
}
|
||||||
|
.btn { margin-top: var(--space-sm); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
121
pages/switch/switch.vue
Normal file
121
pages/switch/switch.vue
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="card" v-for="item in mchList" :key="item.iccid">
|
||||||
|
<view class="flex-row-sb mt-30">
|
||||||
|
<view class="flex-row-g20">
|
||||||
|
<view class="logo">
|
||||||
|
<image :src="getLogo(item.category).logo" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col-g20">
|
||||||
|
<view class="flex-row-g20">
|
||||||
|
<view class="iccid">{{ item.iccid }}</view>
|
||||||
|
<view class="operator">
|
||||||
|
<up-tag type="success" size="mini">{{ getLogo(item.category).name }}</up-tag>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-row-g20">
|
||||||
|
<view class="operator">
|
||||||
|
<up-tag type="primary" size="mini" v-if="item.is_current">当前使用</up-tag>
|
||||||
|
</view>
|
||||||
|
<view class="operator">
|
||||||
|
<up-tag :type="item.real_name_status === 1 ? 'primary' : 'success'" size="mini">{{ item.real_name_status === 1 ? '已实名' : '未实名' }}</up-tag>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn flex-row-g20 mt-30">
|
||||||
|
<up-button class="btn-apple btn-success" v-if="!item.is_current" type="success" @tap="switchOperator(item)" :loading="switching">
|
||||||
|
切换此运营商
|
||||||
|
</up-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref, onMounted } from 'vue';
|
||||||
|
import { deviceApi, assetApi } from '@/api/index.js';
|
||||||
|
import { useUserStore } from '@/store/index.js';
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
let mchList = reactive([]);
|
||||||
|
let switching = ref(false);
|
||||||
|
|
||||||
|
let opratorList = reactive([
|
||||||
|
{ category: '124', logo: 'https://img2.baidu.com/it/u=139558247,3893370039&fm=253&fmt=auto?w=529&h=500', name: '中国电信' },
|
||||||
|
{ category: '125', logo: 'https://img1.baidu.com/it/u=2816777816,1756344384&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500', name: '中国联通' },
|
||||||
|
{ category: '126', logo: 'https://img2.baidu.com/it/u=915783975,1594870591&fm=253&fmt=auto&app=120&f=PNG?w=182&h=182', name: '中国移动' }
|
||||||
|
]);
|
||||||
|
|
||||||
|
const getLogo = (category) => {
|
||||||
|
const operator = opratorList.find(item => item.category === category);
|
||||||
|
return operator || opratorList[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadCards = async () => {
|
||||||
|
try {
|
||||||
|
const data = await assetApi.getInfo(userStore.state.identifier);
|
||||||
|
if (data.cards && data.cards.length > 0) {
|
||||||
|
mchList.splice(0, mchList.length, ...data.cards.map(card => ({
|
||||||
|
...card,
|
||||||
|
category: card.carrier_name.includes('电信') ? '124' : card.carrier_name.includes('联通') ? '125' : '126'
|
||||||
|
})));
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载卡列表失败', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const switchOperator = async (item) => {
|
||||||
|
switching.value = true;
|
||||||
|
try {
|
||||||
|
await deviceApi.switchCard(userStore.state.identifier, item.iccid);
|
||||||
|
uni.showToast({ title: '切换成功，3-5分钟后生效', icon: 'success' });
|
||||||
|
loadCards();
|
||||||
|
} catch (e) {
|
||||||
|
console.error('切换运营商失败', e);
|
||||||
|
}
|
||||||
|
switching.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadCards();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
.card {
|
||||||
|
.logo {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 120rpx;
|
||||||
|
border: 1rpx solid var(--primary);
|
||||||
|
overflow: hidden;
|
||||||
|
image { width: 100%; height: 100%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-apple {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-small);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 20rpx;
|
||||||
|
background: var(--gray-100);
|
||||||
|
color: var(--text-primary);
|
||||||
|
|
||||||
|
&.btn-success {
|
||||||
|
background: var(--success);
|
||||||
|
color: var(--text-inverse);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
static/asset-package-history.png
Normal file
BIN
static/asset-package-history.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
static/authentication.png
Normal file
BIN
static/authentication.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
static/back.png
Normal file
BIN
static/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
BIN
static/bind-phone.png
Normal file
BIN
static/bind-phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
static/change-phone.png
Normal file
BIN
static/change-phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
static/change.png
Normal file
BIN
static/change.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
static/link.png
Normal file
BIN
static/link.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
static/login.png
Normal file
BIN
static/login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
BIN
static/order.png
Normal file
BIN
static/order.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
static/out.png
Normal file
BIN
static/out.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
static/recover.png
Normal file
BIN
static/recover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
static/restart.png
Normal file
BIN
static/restart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
BIN
static/shop.png
Normal file
BIN
static/shop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
BIN
static/wallet.png
Normal file
BIN
static/wallet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
35
store/asset.js
Normal file
35
store/asset.js
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
assetInfo: null,
|
||||||
|
deviceRealtime: null,
|
||||||
|
currentPackage: null
|
||||||
|
});
|
||||||
|
|
||||||
|
export const useAssetStore = () => {
|
||||||
|
const setAssetInfo = (info) => {
|
||||||
|
state.assetInfo = info;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setDeviceRealtime = (realtime) => {
|
||||||
|
state.deviceRealtime = realtime;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setCurrentPackage = (pkg) => {
|
||||||
|
state.currentPackage = pkg;
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearAsset = () => {
|
||||||
|
state.assetInfo = null;
|
||||||
|
state.deviceRealtime = null;
|
||||||
|
state.currentPackage = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
state,
|
||||||
|
setAssetInfo,
|
||||||
|
setDeviceRealtime,
|
||||||
|
setCurrentPackage,
|
||||||
|
clearAsset
|
||||||
|
};
|
||||||
|
};
|
||||||
2
store/index.js
Normal file
2
store/index.js
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export { useUserStore } from './user.js';
|
||||||
|
export { useAssetStore } from './asset.js';
|
||||||
50
store/user.js
Normal file
50
store/user.js
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
token: uni.getStorageSync('token') || '',
|
||||||
|
assetToken: '',
|
||||||
|
identifier: uni.getStorageSync('identifier') || '',
|
||||||
|
isDevice: false,
|
||||||
|
realNameStatus: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
export const useUserStore = () => {
|
||||||
|
const setToken = (token) => {
|
||||||
|
state.token = token;
|
||||||
|
uni.setStorageSync('token', token);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setAssetToken = (assetToken) => {
|
||||||
|
state.assetToken = assetToken;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setIdentifier = (identifier) => {
|
||||||
|
state.identifier = identifier;
|
||||||
|
uni.setStorageSync('identifier', identifier);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setIsDevice = (isDevice) => {
|
||||||
|
state.isDevice = isDevice;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setRealNameStatus = (status) => {
|
||||||
|
state.realNameStatus = status;
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearUser = () => {
|
||||||
|
state.token = '';
|
||||||
|
state.assetToken = '';
|
||||||
|
uni.removeStorageSync('token');
|
||||||
|
uni.removeStorageSync('identifier');
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
state,
|
||||||
|
setToken,
|
||||||
|
setAssetToken,
|
||||||
|
setIdentifier,
|
||||||
|
setIsDevice,
|
||||||
|
setRealNameStatus,
|
||||||
|
clearUser
|
||||||
|
};
|
||||||
|
};
|
||||||
15
tsconfig.json
Normal file
15
tsconfig.json
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"sourceMap": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
"lib": ["esnext", "dom"],
|
||||||
|
"types": [
|
||||||
|
"@dcloudio/types",
|
||||||
|
"uview-plus/types"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
13
uni.promisify.adaptor.js
Normal file
13
uni.promisify.adaptor.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
uni.addInterceptor({
|
||||||
|
returnValue (res) {
|
||||||
|
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
res.then((res) => {
|
||||||
|
if (!res) return resolve(res)
|
||||||
|
return res[0] ? reject(res[0]) : resolve(res[1])
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
76
uni.scss
Normal file
76
uni.scss
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
/**
|
||||||
|
* 这里是uni-app内置的常用样式变量
|
||||||
|
*
|
||||||
|
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||||
|
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||||
|
*
|
||||||
|
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* 颜色变量 */
|
||||||
|
@import 'uview-plus/theme.scss';
|
||||||
|
/* 行为相关颜色 */
|
||||||
|
$uni-color-primary: #007aff;
|
||||||
|
$uni-color-success: #4cd964;
|
||||||
|
$uni-color-warning: #f0ad4e;
|
||||||
|
$uni-color-error: #dd524d;
|
||||||
|
|
||||||
|
/* 文字基本颜色 */
|
||||||
|
$uni-text-color:#333;//基本色
|
||||||
|
$uni-text-color-inverse:#fff;//反色
|
||||||
|
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||||
|
$uni-text-color-placeholder: #808080;
|
||||||
|
$uni-text-color-disable:#c0c0c0;
|
||||||
|
|
||||||
|
/* 背景颜色 */
|
||||||
|
$uni-bg-color:#ffffff;
|
||||||
|
$uni-bg-color-grey:#f8f8f8;
|
||||||
|
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||||
|
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||||
|
|
||||||
|
/* 边框颜色 */
|
||||||
|
$uni-border-color:#c8c7cc;
|
||||||
|
|
||||||
|
/* 尺寸变量 */
|
||||||
|
|
||||||
|
/* 文字尺寸 */
|
||||||
|
$uni-font-size-sm:12px;
|
||||||
|
$uni-font-size-base:14px;
|
||||||
|
$uni-font-size-lg:16px;
|
||||||
|
|
||||||
|
/* 图片尺寸 */
|
||||||
|
$uni-img-size-sm:20px;
|
||||||
|
$uni-img-size-base:26px;
|
||||||
|
$uni-img-size-lg:40px;
|
||||||
|
|
||||||
|
/* Border Radius */
|
||||||
|
$uni-border-radius-sm: 2px;
|
||||||
|
$uni-border-radius-base: 3px;
|
||||||
|
$uni-border-radius-lg: 6px;
|
||||||
|
$uni-border-radius-circle: 50%;
|
||||||
|
|
||||||
|
/* 水平间距 */
|
||||||
|
$uni-spacing-row-sm: 5px;
|
||||||
|
$uni-spacing-row-base: 10px;
|
||||||
|
$uni-spacing-row-lg: 15px;
|
||||||
|
|
||||||
|
/* 垂直间距 */
|
||||||
|
$uni-spacing-col-sm: 4px;
|
||||||
|
$uni-spacing-col-base: 8px;
|
||||||
|
$uni-spacing-col-lg: 12px;
|
||||||
|
|
||||||
|
/* 透明度 */
|
||||||
|
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||||
|
|
||||||
|
/* 文章场景相关 */
|
||||||
|
$uni-color-title: #2C405A; // 文章标题颜色
|
||||||
|
$uni-font-size-title:20px;
|
||||||
|
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||||
|
$uni-font-size-subtitle:26px;
|
||||||
|
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||||
|
$uni-font-size-paragraph:15px;
|
||||||
5
utils/env.js
Normal file
5
utils/env.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export const BASE_URL = 'https://cmp-api.boss160.cn';
|
||||||
|
|
||||||
|
export const APP_TYPE = 'miniapp';
|
||||||
|
|
||||||
|
export const APP_ID = 'wxea8c599fe100ce8a';
|
||||||
57
utils/request.js
Normal file
57
utils/request.js
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import { BASE_URL } from './env.js';
|
||||||
|
|
||||||
|
const request = (options) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const token = uni.getStorageSync('token') || '';
|
||||||
|
|
||||||
|
uni.request({
|
||||||
|
url: BASE_URL + options.url,
|
||||||
|
method: options.method || 'GET',
|
||||||
|
data: options.data || {},
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': token ? `Bearer ${token}` : '',
|
||||||
|
...options.header
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
if (res.statusCode === 401) {
|
||||||
|
uni.removeStorageSync('token');
|
||||||
|
uni.removeStorageSync('identifier');
|
||||||
|
uni.showToast({
|
||||||
|
title: '登录已过期，请重新登录',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.reLaunch({ url: '/pages/login/login' });
|
||||||
|
}, 2000);
|
||||||
|
reject(res.data);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { code, msg, data } = res.data;
|
||||||
|
|
||||||
|
if (code === 0 || code === 200) {
|
||||||
|
resolve(data);
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: msg || '请求失败',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
reject(res.data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '网络请求失败',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
reject(err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export default request;
|
||||||
Reference in New Issue
Block a user