feat: 初始化魔兽世界金币价格查询小程序项目
添加基础项目结构，包括页面、组件和配置文件 实现金币价格展示和价格走势图功能 添加筛选功能支持按区服和阵营筛选
This commit is contained in:
+2
-1
@@ -19,7 +19,8 @@ dmypy.json
|
|||||||
.pyre/
|
.pyre/
|
||||||
.pytype/
|
.pytype/
|
||||||
*.so
|
*.so
|
||||||
|
node_modules/
|
||||||
|
weixin/node_modules
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
.vscode/
|
.vscode/
|
||||||
.idea/
|
.idea/
|
||||||
|
|||||||
+27
@@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
onLaunch: function() {
|
||||||
|
console.log('App Launch')
|
||||||
|
},
|
||||||
|
onShow: function() {
|
||||||
|
console.log('App Show')
|
||||||
|
},
|
||||||
|
onHide: function() {
|
||||||
|
console.log('App Hide')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 全局样式 */
|
||||||
|
page {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+11
@@ -0,0 +1,11 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App'
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
App.mpType = 'app'
|
||||||
|
|
||||||
|
const app = new Vue({
|
||||||
|
...App
|
||||||
|
})
|
||||||
|
app.$mount()
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
{
|
||||||
|
"name": "魔兽世界金币价格查询",
|
||||||
|
"appid": "",
|
||||||
|
"description": "魔兽世界各区金币价格查询小程序",
|
||||||
|
"versionName": "1.0.0",
|
||||||
|
"versionCode": 1,
|
||||||
|
"transformPx": true,
|
||||||
|
"mp-weixin": {
|
||||||
|
"appid": "",
|
||||||
|
"setting": {
|
||||||
|
"urlCheck": false,
|
||||||
|
"es6": true,
|
||||||
|
"enhance": true,
|
||||||
|
"postcss": true,
|
||||||
|
"preloadBackgroundData": false,
|
||||||
|
"minified": true,
|
||||||
|
"newFeature": false,
|
||||||
|
"coverView": true,
|
||||||
|
"nodeModules": false,
|
||||||
|
"autoAudits": false,
|
||||||
|
"showShadowRootInWxmlPanel": true,
|
||||||
|
"scopeDataCheck": false,
|
||||||
|
"uglifyFileName": true,
|
||||||
|
"checkInvalidKey": true,
|
||||||
|
"checkSiteMap": true,
|
||||||
|
"uploadWithSourceMap": true,
|
||||||
|
"compileHotReLoad": false,
|
||||||
|
"lazyloadPlaceholderEnable": false,
|
||||||
|
"useMultiFrameRuntime": true,
|
||||||
|
"useApiHook": true,
|
||||||
|
"useApiHostProcess": true,
|
||||||
|
"babelSetting": {
|
||||||
|
"ignore": [],
|
||||||
|
"disablePlugins": [],
|
||||||
|
"outputPath": ""
|
||||||
|
},
|
||||||
|
"enableEngineNative": false,
|
||||||
|
"packNpmManually": false,
|
||||||
|
"packNpmRelationList": [],
|
||||||
|
"minifyWXSS": true,
|
||||||
|
"minifyWXML": true,
|
||||||
|
"showES6CompileOption": false,
|
||||||
|
"useIsolateContext": true,
|
||||||
|
"useCompilerV2": true,
|
||||||
|
"userConfirmedUseCompilerV2": true
|
||||||
|
},
|
||||||
|
"usingComponents": true,
|
||||||
|
"permission": {
|
||||||
|
"scope.userLocation": {
|
||||||
|
"desc": "你的位置信息将用于获取附近的金币价格"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"quickapp": {},
|
||||||
|
"h5": {
|
||||||
|
"devServer": {
|
||||||
|
"port": 8080,
|
||||||
|
"disableHostCheck": true
|
||||||
|
},
|
||||||
|
"title": "魔兽世界金币价格查询",
|
||||||
|
"domain": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "pages/gold-price/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "魔兽世界金币价格查询",
|
||||||
|
"navigationBarBackgroundColor": "#1989fa",
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"globalStyle": {
|
||||||
|
"navigationBarBackgroundColor": "#1989fa",
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"navigationBarTitleText": "魔兽世界金币价格查询",
|
||||||
|
"backgroundColor": "#F8F8F8"
|
||||||
|
},
|
||||||
|
"uniIdRouter": {},
|
||||||
|
"tabBar": {
|
||||||
|
"color": "#7A7E83",
|
||||||
|
"selectedColor": "#3cc51f",
|
||||||
|
"borderStyle": "black",
|
||||||
|
"backgroundColor": "#ffffff",
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"pagePath": "pages/gold-price/index",
|
||||||
|
"iconPath": "static/icon_home.png",
|
||||||
|
"selectedIconPath": "static/icon_home_selected.png",
|
||||||
|
"text": "金币价格"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,215 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="header">
|
||||||
|
<text class="title">魔兽世界金币价格查询</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="content">
|
||||||
|
<!-- 铁血1区 -->
|
||||||
|
<view class="server-section">
|
||||||
|
<view class="server-title">
|
||||||
|
<text>铁血1区</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="faction-section">
|
||||||
|
<view class="faction-title">
|
||||||
|
<text>联盟</text>
|
||||||
|
</view>
|
||||||
|
<view class="price-table">
|
||||||
|
<view class="table-header">
|
||||||
|
<view class="table-cell">排名</view>
|
||||||
|
<view class="table-cell">价格</view>
|
||||||
|
<view class="table-cell">数量</view>
|
||||||
|
</view>
|
||||||
|
<view class="table-row" v-for="(price, index) in alliancePrices1" :key="index">
|
||||||
|
<view class="table-cell">{{ index + 1 }}</view>
|
||||||
|
<view class="table-cell">{{ price.price }}</view>
|
||||||
|
<view class="table-cell">{{ price.amount }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="faction-section">
|
||||||
|
<view class="faction-title">
|
||||||
|
<text>部落</text>
|
||||||
|
</view>
|
||||||
|
<view class="price-table">
|
||||||
|
<view class="table-header">
|
||||||
|
<view class="table-cell">排名</view>
|
||||||
|
<view class="table-cell">价格</view>
|
||||||
|
<view class="table-cell">数量</view>
|
||||||
|
</view>
|
||||||
|
<view class="table-row" v-for="(price, index) in hordePrices1" :key="index">
|
||||||
|
<view class="table-cell">{{ index + 1 }}</view>
|
||||||
|
<view class="table-cell">{{ price.price }}</view>
|
||||||
|
<view class="table-cell">{{ price.amount }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 铁血2区 -->
|
||||||
|
<view class="server-section">
|
||||||
|
<view class="server-title">
|
||||||
|
<text>铁血2区</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="faction-section">
|
||||||
|
<view class="faction-title">
|
||||||
|
<text>联盟</text>
|
||||||
|
</view>
|
||||||
|
<view class="price-table">
|
||||||
|
<view class="table-header">
|
||||||
|
<view class="table-cell">排名</view>
|
||||||
|
<view class="table-cell">价格</view>
|
||||||
|
<view class="table-cell">数量</view>
|
||||||
|
</view>
|
||||||
|
<view class="table-row" v-for="(price, index) in alliancePrices2" :key="index">
|
||||||
|
<view class="table-cell">{{ index + 1 }}</view>
|
||||||
|
<view class="table-cell">{{ price.price }}</view>
|
||||||
|
<view class="table-cell">{{ price.amount }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="faction-section">
|
||||||
|
<view class="faction-title">
|
||||||
|
<text>部落</text>
|
||||||
|
</view>
|
||||||
|
<view class="price-table">
|
||||||
|
<view class="table-header">
|
||||||
|
<view class="table-cell">排名</view>
|
||||||
|
<view class="table-cell">价格</view>
|
||||||
|
<view class="table-cell">数量</view>
|
||||||
|
</view>
|
||||||
|
<view class="table-row" v-for="(price, index) in hordePrices2" :key="index">
|
||||||
|
<view class="table-cell">{{ index + 1 }}</view>
|
||||||
|
<view class="table-cell">{{ price.price }}</view>
|
||||||
|
<view class="table-cell">{{ price.amount }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 模拟数据，后期从后端获取
|
||||||
|
alliancePrices1: [
|
||||||
|
{ price: '0.012元/金', amount: '100,000' },
|
||||||
|
{ price: '0.013元/金', amount: '50,000' },
|
||||||
|
{ price: '0.014元/金', amount: '20,000' }
|
||||||
|
],
|
||||||
|
hordePrices1: [
|
||||||
|
{ price: '0.011元/金', amount: '150,000' },
|
||||||
|
{ price: '0.012元/金', amount: '80,000' },
|
||||||
|
{ price: '0.013元/金', amount: '30,000' }
|
||||||
|
],
|
||||||
|
alliancePrices2: [
|
||||||
|
{ price: '0.015元/金', amount: '70,000' },
|
||||||
|
{ price: '0.016元/金', amount: '40,000' },
|
||||||
|
{ price: '0.017元/金', amount: '15,000' }
|
||||||
|
],
|
||||||
|
hordePrices2: [
|
||||||
|
{ price: '0.014元/金', amount: '90,000' },
|
||||||
|
{ price: '0.015元/金', amount: '50,000' },
|
||||||
|
{ price: '0.016元/金', amount: '25,000' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// 页面加载时从后端获取数据
|
||||||
|
this.loadPriceData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadPriceData() {
|
||||||
|
// 后期从后端获取数据的方法
|
||||||
|
console.log('加载价格数据...')
|
||||||
|
// 这里可以添加axios请求或者uni.request请求
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background-color: #1989fa;
|
||||||
|
color: white;
|
||||||
|
padding: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-section {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 2rpx solid #eee;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faction-section {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faction-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-table {
|
||||||
|
border-radius: 5rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-header {
|
||||||
|
display: flex;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 2rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell {
|
||||||
|
flex: 1;
|
||||||
|
padding: 15rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules/
|
||||||
|
unpackage/
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.project
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw*
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
# weixin
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
const webpack = require('webpack')
|
||||||
|
const plugins = []
|
||||||
|
|
||||||
|
if (process.env.UNI_OPT_TREESHAKINGNG) {
|
||||||
|
plugins.push(require('@dcloudio/vue-cli-plugin-uni-optimize/packages/babel-plugin-uni-api/index.js'))
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
(
|
||||||
|
process.env.UNI_PLATFORM === 'app-plus' &&
|
||||||
|
process.env.UNI_USING_V8
|
||||||
|
) ||
|
||||||
|
(
|
||||||
|
process.env.UNI_PLATFORM === 'h5' &&
|
||||||
|
process.env.UNI_H5_BROWSER === 'builtin'
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
const path = require('path')
|
||||||
|
|
||||||
|
const isWin = /^win/.test(process.platform)
|
||||||
|
|
||||||
|
const normalizePath = path => (isWin ? path.replace(/\\/g, '/') : path)
|
||||||
|
|
||||||
|
const input = normalizePath(process.env.UNI_INPUT_DIR)
|
||||||
|
try {
|
||||||
|
plugins.push([
|
||||||
|
require('@dcloudio/vue-cli-plugin-hbuilderx/packages/babel-plugin-console'),
|
||||||
|
{
|
||||||
|
file (file) {
|
||||||
|
file = normalizePath(file)
|
||||||
|
if (file.indexOf(input) === 0) {
|
||||||
|
return path.relative(input, file)
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
])
|
||||||
|
} catch (e) { }
|
||||||
|
}
|
||||||
|
|
||||||
|
process.UNI_LIBRARIES = process.UNI_LIBRARIES || ['@dcloudio/uni-ui']
|
||||||
|
process.UNI_LIBRARIES.forEach(libraryName => {
|
||||||
|
plugins.push([
|
||||||
|
'import',
|
||||||
|
{
|
||||||
|
'libraryName': libraryName,
|
||||||
|
'customName': (name) => {
|
||||||
|
return `${libraryName}/lib/${name}/${name}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
])
|
||||||
|
})
|
||||||
|
|
||||||
|
if (process.env.UNI_PLATFORM !== 'h5') {
|
||||||
|
plugins.push('@babel/plugin-transform-runtime')
|
||||||
|
}
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
presets: [
|
||||||
|
[
|
||||||
|
'@vue/app',
|
||||||
|
{
|
||||||
|
modules: webpack.version[0] > 4 ? 'auto' : 'commonjs',
|
||||||
|
useBuiltIns: process.env.UNI_PLATFORM === 'h5' ? 'usage' : 'entry'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
plugins
|
||||||
|
}
|
||||||
|
|
||||||
|
const UNI_H5_TEST = '**/@dcloudio/uni-h5/dist/index.umd.min.js'
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
config.overrides = [{
|
||||||
|
test: UNI_H5_TEST,
|
||||||
|
compact: true,
|
||||||
|
}]
|
||||||
|
} else {
|
||||||
|
config.ignore = [UNI_H5_TEST]
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = config
|
||||||
Generated
+37369
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,107 @@
|
|||||||
|
{
|
||||||
|
"name": "weixin",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "npm run dev:h5",
|
||||||
|
"build": "npm run build:h5",
|
||||||
|
"build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
|
||||||
|
"build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
|
||||||
|
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
|
||||||
|
"build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
|
||||||
|
"build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
|
||||||
|
"build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
|
||||||
|
"build:mp-harmony": "cross-env NODE_ENV=production UNI_PLATFORM=mp-harmony vue-cli-service uni-build",
|
||||||
|
"build:mp-jd": "cross-env NODE_ENV=production UNI_PLATFORM=mp-jd vue-cli-service uni-build",
|
||||||
|
"build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
|
||||||
|
"build:mp-lark": "cross-env NODE_ENV=production UNI_PLATFORM=mp-lark vue-cli-service uni-build",
|
||||||
|
"build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
|
||||||
|
"build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
|
||||||
|
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
|
||||||
|
"build:mp-xhs": "cross-env NODE_ENV=production UNI_PLATFORM=mp-xhs vue-cli-service uni-build",
|
||||||
|
"build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
|
||||||
|
"build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
|
||||||
|
"build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
|
||||||
|
"build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
|
||||||
|
"dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
|
||||||
|
"dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
|
||||||
|
"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
|
||||||
|
"dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
|
||||||
|
"dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
|
||||||
|
"dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
|
||||||
|
"dev:mp-harmony": "cross-env NODE_ENV=development UNI_PLATFORM=mp-harmony vue-cli-service uni-build --watch",
|
||||||
|
"dev:mp-jd": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jd vue-cli-service uni-build --watch",
|
||||||
|
"dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
|
||||||
|
"dev:mp-lark": "cross-env NODE_ENV=development UNI_PLATFORM=mp-lark vue-cli-service uni-build --watch",
|
||||||
|
"dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
|
||||||
|
"dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
|
||||||
|
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
|
||||||
|
"dev:mp-xhs": "cross-env NODE_ENV=development UNI_PLATFORM=mp-xhs vue-cli-service uni-build --watch",
|
||||||
|
"dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
|
||||||
|
"dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
|
||||||
|
"dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
|
||||||
|
"dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
|
||||||
|
"info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
|
||||||
|
"serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
|
||||||
|
"test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
|
||||||
|
"test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
|
||||||
|
"test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
|
||||||
|
"test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
|
||||||
|
"test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@dcloudio/uni-app": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-app-plus": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-h5": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-i18n": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-mp-360": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-mp-alipay": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-mp-baidu": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-mp-harmony": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-mp-jd": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-mp-kuaishou": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-mp-lark": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-mp-qq": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-mp-toutiao": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-mp-vue": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-mp-weixin": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-mp-xhs": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-quickapp-native": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-quickapp-webview": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-stacktracey": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-stat": "^2.0.2-4080720251210002",
|
||||||
|
"@vue/shared": "^3.0.0",
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"flyio": "^0.6.2",
|
||||||
|
"vue": ">= 2.6.14 < 2.7",
|
||||||
|
"vuex": "^3.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@dcloudio/types": "^3.3.2",
|
||||||
|
"@dcloudio/uni-automator": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-cli-i18n": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-cli-shared": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-helper-json": "*",
|
||||||
|
"@dcloudio/uni-migration": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/uni-template-compiler": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/vue-cli-plugin-uni": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/webpack-uni-mp-loader": "^2.0.2-4080720251210002",
|
||||||
|
"@dcloudio/webpack-uni-pages-loader": "^2.0.2-4080720251210002",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"babel-plugin-import": "^1.11.0",
|
||||||
|
"cross-env": "^7.0.2",
|
||||||
|
"jest": "^25.4.0",
|
||||||
|
"postcss-comment": "^2.0.0",
|
||||||
|
"vue-template-compiler": ">= 2.6.14 < 2.7"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"Android >= 4.4",
|
||||||
|
"ios >= 9"
|
||||||
|
],
|
||||||
|
"uni-app": {
|
||||||
|
"scripts": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
const path = require('path')
|
||||||
|
const webpack = require('webpack')
|
||||||
|
const config = {
|
||||||
|
parser: require('postcss-comment'),
|
||||||
|
plugins: [
|
||||||
|
require('postcss-import')({
|
||||||
|
resolve (id, basedir, importOptions) {
|
||||||
|
if (id.startsWith('~@/')) {
|
||||||
|
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
|
||||||
|
} else if (id.startsWith('@/')) {
|
||||||
|
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
|
||||||
|
} else if (id.startsWith('/') && !id.startsWith('//')) {
|
||||||
|
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
|
||||||
|
}
|
||||||
|
return id
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
require('autoprefixer')({
|
||||||
|
remove: process.env.UNI_PLATFORM !== 'h5'
|
||||||
|
}),
|
||||||
|
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
|
||||||
|
]
|
||||||
|
}
|
||||||
|
if (webpack.version[0] > 4) {
|
||||||
|
delete config.parser
|
||||||
|
}
|
||||||
|
module.exports = config
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title>
|
||||||
|
<%= htmlWebpackPlugin.options.title %>
|
||||||
|
</title>
|
||||||
|
<script>
|
||||||
|
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
|
||||||
|
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||||
|
</script>
|
||||||
|
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>Please enable JavaScript to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Vendored
+11
@@ -0,0 +1,11 @@
|
|||||||
|
/// <reference types='@dcloudio/types' />
|
||||||
|
import Vue from 'vue'
|
||||||
|
declare module "vue/types/options" {
|
||||||
|
type Hooks = App.AppInstance & Page.PageInstance;
|
||||||
|
interface ComponentOptions<V extends Vue> extends Hooks {
|
||||||
|
/**
|
||||||
|
* 组件类型
|
||||||
|
*/
|
||||||
|
mpType?: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
+4
@@ -0,0 +1,4 @@
|
|||||||
|
declare module "*.vue" {
|
||||||
|
import Vue from 'vue'
|
||||||
|
export default Vue
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
onLaunch: function() {
|
||||||
|
console.log('App Launch')
|
||||||
|
},
|
||||||
|
onShow: function() {
|
||||||
|
console.log('App Show')
|
||||||
|
},
|
||||||
|
onHide: function() {
|
||||||
|
console.log('App Hide')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/*每个页面公共css */
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App'
|
||||||
|
import './uni.promisify.adaptor'
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
App.mpType = 'app'
|
||||||
|
|
||||||
|
const app = new Vue({
|
||||||
|
...App
|
||||||
|
})
|
||||||
|
app.$mount()
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
{
|
||||||
|
"name": "魔兽世界金币价格查询",
|
||||||
|
"appid": "",
|
||||||
|
"description": "魔兽世界金币价格查询小程序",
|
||||||
|
"versionName": "1.0.0",
|
||||||
|
"versionCode": "100",
|
||||||
|
"transformPx": false,
|
||||||
|
"app-plus": { /* 5+App特有相关 */
|
||||||
|
"usingComponents": true,
|
||||||
|
"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.READ_CONTACTS\"/>",
|
||||||
|
"<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.WRITE_CONTACTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||||
|
"<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.CALL_PHONE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ios": { /* ios打包配置 */
|
||||||
|
|
||||||
|
},
|
||||||
|
"sdkConfigs": { /* SDK配置 */
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"quickapp": { /* 快应用特有相关 */
|
||||||
|
|
||||||
|
},
|
||||||
|
"mp-weixin": { /* 微信小程序特有相关 */
|
||||||
|
"appid": "",
|
||||||
|
"setting": {
|
||||||
|
"urlCheck": false
|
||||||
|
},
|
||||||
|
"usingComponents": true
|
||||||
|
},
|
||||||
|
"mp-alipay" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-baidu" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-toutiao" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
},
|
||||||
|
"mp-qq" : {
|
||||||
|
"usingComponents" : true
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||||
|
{
|
||||||
|
"path": "pages/index/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "当前金价"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/chart/chart",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "价格走势图"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"globalStyle": {
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarTitleText": "魔兽世界金币价格查询",
|
||||||
|
"navigationBarBackgroundColor": "#F8F8F8",
|
||||||
|
"backgroundColor": "#F8F8F8"
|
||||||
|
},
|
||||||
|
"tabBar": {
|
||||||
|
"color": "#666666",
|
||||||
|
"selectedColor": "#1989fa",
|
||||||
|
"backgroundColor": "#ffffff",
|
||||||
|
"borderStyle": "black",
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"pagePath": "pages/index/index",
|
||||||
|
"text": "当前金价"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pages/chart/chart",
|
||||||
|
"text": "价格走势图"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,623 @@
|
|||||||
|
<template>
|
||||||
|
<view class="chart-container">
|
||||||
|
<text class="title">价格走势图</text>
|
||||||
|
<!-- 悬浮筛选按钮 -->
|
||||||
|
<view class="floating-filter-btn" @click="showFilter = true">
|
||||||
|
<text>筛选</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 筛选面板 -->
|
||||||
|
<view class="filter-panel" v-if="showFilter">
|
||||||
|
<view class="filter-header">
|
||||||
|
<text class="filter-title">选择关注的区服和阵营</text>
|
||||||
|
<view class="close-btn" @click="showFilter = false">关闭</view>
|
||||||
|
</view>
|
||||||
|
<view class="filter-content">
|
||||||
|
<checkbox-group @change="handleCheckboxChange">
|
||||||
|
<view class="server-group" v-for="server in allServers" :key="server.id">
|
||||||
|
<view class="server-title">{{ server.name }}</view>
|
||||||
|
<view class="faction-items">
|
||||||
|
<view class="filter-item" v-for="faction in server.factions" :key="faction.id">
|
||||||
|
<checkbox :value="faction.id" :checked="selectedFactions.includes(faction.id)">
|
||||||
|
{{ faction.name }}
|
||||||
|
</checkbox>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</checkbox-group>
|
||||||
|
</view>
|
||||||
|
<view class="filter-footer">
|
||||||
|
<view class="cancel-btn" @click="showFilter = false">取消</view>
|
||||||
|
<view class="save-btn" @click="saveFilter">保存</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="chart-header">
|
||||||
|
<!-- 时间筛选 -->
|
||||||
|
<view class="time-filter">
|
||||||
|
<view class="filter-item" :class="{ active: timeFilter === 'day' }" @click="timeFilter = 'day'">
|
||||||
|
<text>天</text>
|
||||||
|
</view>
|
||||||
|
<view class="filter-item" :class="{ active: timeFilter === 'hour' }" @click="timeFilter = 'hour'">
|
||||||
|
<text>时</text>
|
||||||
|
</view>
|
||||||
|
<view class="filter-item" :class="{ active: timeFilter === 'week' }" @click="timeFilter = 'week'">
|
||||||
|
<text>周</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="chart-content">
|
||||||
|
<!-- 价格走势图区域 -->
|
||||||
|
<!-- 铁血1区 -->
|
||||||
|
<view v-if="isServerSelected('tx1')">
|
||||||
|
<view class="chart-item" v-if="isFactionSelected('tx1-alliance')">
|
||||||
|
<text class="chart-title">铁血1区 - 联盟</text>
|
||||||
|
<canvas canvas-id="tx1AllianceChart" class="chart-canvas"></canvas>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="chart-item" v-if="isFactionSelected('tx1-horde')">
|
||||||
|
<text class="chart-title">铁血1区 - 部落</text>
|
||||||
|
<canvas canvas-id="tx1HordeChart" class="chart-canvas"></canvas>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 铁血2区 -->
|
||||||
|
<view v-if="isServerSelected('tx2')">
|
||||||
|
<view class="chart-item" v-if="isFactionSelected('tx2-alliance')">
|
||||||
|
<text class="chart-title">铁血2区 - 联盟</text>
|
||||||
|
<canvas canvas-id="tx2AllianceChart" class="chart-canvas"></canvas>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="chart-item" v-if="isFactionSelected('tx2-horde')">
|
||||||
|
<text class="chart-title">铁血2区 - 部落</text>
|
||||||
|
<canvas canvas-id="tx2HordeChart" class="chart-canvas"></canvas>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 时光1区 -->
|
||||||
|
<view v-if="isServerSelected('sg1')">
|
||||||
|
<view class="chart-item" v-if="isFactionSelected('sg1-alliance')">
|
||||||
|
<text class="chart-title">时光1区 - 联盟</text>
|
||||||
|
<canvas canvas-id="sg1AllianceChart" class="chart-canvas"></canvas>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="chart-item" v-if="isFactionSelected('sg1-horde')">
|
||||||
|
<text class="chart-title">时光1区 - 部落</text>
|
||||||
|
<canvas canvas-id="sg1HordeChart" class="chart-canvas"></canvas>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
timeFilter: 'day', // day, hour, week
|
||||||
|
showFilter: false,
|
||||||
|
// 修改数据结构，支持服务器和阵营的两级筛选
|
||||||
|
allServers: [
|
||||||
|
{
|
||||||
|
id: 'tx1',
|
||||||
|
name: '铁血1区',
|
||||||
|
factions: [
|
||||||
|
{ id: 'tx1-alliance', name: '联盟', serverId: 'tx1' },
|
||||||
|
{ id: 'tx1-horde', name: '部落', serverId: 'tx1' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'tx2',
|
||||||
|
name: '铁血2区',
|
||||||
|
factions: [
|
||||||
|
{ id: 'tx2-alliance', name: '联盟', serverId: 'tx2' },
|
||||||
|
{ id: 'tx2-horde', name: '部落', serverId: 'tx2' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'sg1',
|
||||||
|
name: '时光1区',
|
||||||
|
factions: [
|
||||||
|
{ id: 'sg1-alliance', name: '联盟', serverId: 'sg1' },
|
||||||
|
{ id: 'sg1-horde', name: '部落', serverId: 'sg1' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
selectedFactions: [],
|
||||||
|
// 模拟价格历史数据（元/1000金）
|
||||||
|
chartData: {
|
||||||
|
tx1Alliance: [],
|
||||||
|
tx1Horde: [],
|
||||||
|
tx2Alliance: [],
|
||||||
|
tx2Horde: [],
|
||||||
|
sg1Alliance: [],
|
||||||
|
sg1Horde: []
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// 页面加载时从缓存中读取用户选择的阵营
|
||||||
|
this.loadSelectedFactions();
|
||||||
|
// 加载走势图数据
|
||||||
|
this.generateMockData();
|
||||||
|
// 初始绘制图表
|
||||||
|
// 注意：需要等待DOM渲染完成后才能获取canvas尺寸
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
// 确保DOM渲染完成后绘制图表
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.drawCharts();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 监听时间筛选变化，重新绘制图表
|
||||||
|
timeFilter: function() {
|
||||||
|
this.generateMockData();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.drawCharts();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 加载用户选择的阵营
|
||||||
|
loadSelectedFactions() {
|
||||||
|
const selected = uni.getStorageSync('selectedFactions');
|
||||||
|
if (selected && selected.length > 0) {
|
||||||
|
this.selectedFactions = selected;
|
||||||
|
} else {
|
||||||
|
// 默认全部选中
|
||||||
|
this.selectedFactions = [];
|
||||||
|
this.allServers.forEach(server => {
|
||||||
|
server.factions.forEach(faction => {
|
||||||
|
this.selectedFactions.push(faction.id);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 保存到缓存
|
||||||
|
uni.setStorageSync('selectedFactions', this.selectedFactions);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理checkbox变化
|
||||||
|
handleCheckboxChange(e) {
|
||||||
|
this.selectedFactions = e.detail.value;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 保存筛选结果
|
||||||
|
saveFilter() {
|
||||||
|
// 确保至少选择一个阵营
|
||||||
|
if (this.selectedFactions.length === 0) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请至少选择一个阵营',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存到缓存
|
||||||
|
uni.setStorageSync('selectedFactions', this.selectedFactions);
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
this.showFilter = false;
|
||||||
|
// 重新绘制图表
|
||||||
|
this.drawCharts();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 检查阵营是否被选中
|
||||||
|
isFactionSelected(factionId) {
|
||||||
|
return this.selectedFactions.includes(factionId);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 检查服务器是否有任何阵营被选中
|
||||||
|
isServerSelected(serverId) {
|
||||||
|
return this.allServers.some(server =>
|
||||||
|
server.id === serverId &&
|
||||||
|
server.factions.some(faction =>
|
||||||
|
this.selectedFactions.includes(faction.id)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 生成模拟数据
|
||||||
|
generateMockData() {
|
||||||
|
const basePrice = 10;
|
||||||
|
const fluctuation = 2;
|
||||||
|
let dataCount = 24; // 默认按小时
|
||||||
|
let timeStep = 1; // 默认按小时
|
||||||
|
|
||||||
|
if (this.timeFilter === 'day') {
|
||||||
|
dataCount = 30; // 30天
|
||||||
|
timeStep = 24; // 按天
|
||||||
|
} else if (this.timeFilter === 'hour') {
|
||||||
|
dataCount = 24; // 24小时
|
||||||
|
timeStep = 1; // 按小时
|
||||||
|
} else if (this.timeFilter === 'week') {
|
||||||
|
dataCount = 12; // 12周
|
||||||
|
timeStep = 168; // 按周
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成所有区服的模拟数据
|
||||||
|
this.chartData = {
|
||||||
|
tx1Alliance: this.generatePriceData(basePrice + 1, fluctuation, dataCount, timeStep),
|
||||||
|
tx1Horde: this.generatePriceData(basePrice + 0.5, fluctuation, dataCount, timeStep),
|
||||||
|
tx2Alliance: this.generatePriceData(basePrice + 2, fluctuation, dataCount, timeStep),
|
||||||
|
tx2Horde: this.generatePriceData(basePrice + 1.5, fluctuation, dataCount, timeStep),
|
||||||
|
sg1Alliance: this.generatePriceData(basePrice + 3, fluctuation, dataCount, timeStep),
|
||||||
|
sg1Horde: this.generatePriceData(basePrice + 2.5, fluctuation, dataCount, timeStep)
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('Generated mock data:', this.chartData);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 生成单个区服的价格数据
|
||||||
|
generatePriceData(base, fluctuation, count, timeStep) {
|
||||||
|
const data = [];
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
for (let i = count - 1; i >= 0; i--) {
|
||||||
|
const time = new Date(now.getTime() - i * timeStep * 60 * 60 * 1000);
|
||||||
|
// 生成有波动的价格
|
||||||
|
const price = base + (Math.random() - 0.5) * fluctuation;
|
||||||
|
data.push({
|
||||||
|
time: time,
|
||||||
|
price: parseFloat(price.toFixed(2))
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 绘制所有图表
|
||||||
|
drawCharts() {
|
||||||
|
// 只绘制用户选择的阵营的图表
|
||||||
|
if (this.isFactionSelected('tx1-alliance')) {
|
||||||
|
this.drawChart('tx1AllianceChart', this.chartData.tx1Alliance);
|
||||||
|
}
|
||||||
|
if (this.isFactionSelected('tx1-horde')) {
|
||||||
|
this.drawChart('tx1HordeChart', this.chartData.tx1Horde);
|
||||||
|
}
|
||||||
|
if (this.isFactionSelected('tx2-alliance')) {
|
||||||
|
this.drawChart('tx2AllianceChart', this.chartData.tx2Alliance);
|
||||||
|
}
|
||||||
|
if (this.isFactionSelected('tx2-horde')) {
|
||||||
|
this.drawChart('tx2HordeChart', this.chartData.tx2Horde);
|
||||||
|
}
|
||||||
|
if (this.isFactionSelected('sg1-alliance')) {
|
||||||
|
this.drawChart('sg1AllianceChart', this.chartData.sg1Alliance);
|
||||||
|
}
|
||||||
|
if (this.isFactionSelected('sg1-horde')) {
|
||||||
|
this.drawChart('sg1HordeChart', this.chartData.sg1Horde);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 绘制单个图表
|
||||||
|
drawChart(canvasId, data) {
|
||||||
|
if (!data || data.length === 0) return;
|
||||||
|
|
||||||
|
const ctx = uni.createCanvasContext(canvasId, this);
|
||||||
|
|
||||||
|
// 使用像素单位而不是rpx
|
||||||
|
const canvasWidth = 350; // 画布宽度（像素）
|
||||||
|
const canvasHeight = 150; // 画布高度（像素）
|
||||||
|
const padding = 25; // 边距（像素）
|
||||||
|
|
||||||
|
// 计算图表区域
|
||||||
|
const chartWidth = canvasWidth - 2 * padding;
|
||||||
|
const chartHeight = canvasHeight - 2 * padding;
|
||||||
|
|
||||||
|
// 计算价格范围
|
||||||
|
const prices = data.map(item => item.price);
|
||||||
|
const minPrice = Math.min(...prices) - 0.5;
|
||||||
|
const maxPrice = Math.max(...prices) + 0.5;
|
||||||
|
const priceRange = maxPrice - minPrice;
|
||||||
|
|
||||||
|
// 计算时间范围
|
||||||
|
const times = data.map(item => item.time);
|
||||||
|
const minTime = times[0];
|
||||||
|
const maxTime = times[times.length - 1];
|
||||||
|
const timeRange = maxTime - minTime;
|
||||||
|
|
||||||
|
// 绘制坐标轴
|
||||||
|
this.drawAxes(ctx, padding, chartWidth, chartHeight, minPrice, maxPrice, data);
|
||||||
|
|
||||||
|
// 绘制价格曲线
|
||||||
|
this.drawPriceLine(ctx, padding, chartWidth, chartHeight, data, minPrice, maxPrice, minTime, maxTime);
|
||||||
|
|
||||||
|
// 绘制价格点
|
||||||
|
this.drawPricePoints(ctx, padding, chartWidth, chartHeight, data, minPrice, maxPrice, minTime, maxTime);
|
||||||
|
|
||||||
|
// 绘制完成
|
||||||
|
ctx.draw();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 绘制坐标轴
|
||||||
|
drawAxes(ctx, padding, chartWidth, chartHeight, minPrice, maxPrice, data) {
|
||||||
|
ctx.setStrokeStyle('#ccc');
|
||||||
|
ctx.setLineWidth(1);
|
||||||
|
|
||||||
|
// X轴
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(padding, padding + chartHeight);
|
||||||
|
ctx.lineTo(padding + chartWidth, padding + chartHeight);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// Y轴
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(padding, padding);
|
||||||
|
ctx.lineTo(padding, padding + chartHeight);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// 绘制Y轴刻度和标签
|
||||||
|
const yTicks = 5;
|
||||||
|
for (let i = 0; i <= yTicks; i++) {
|
||||||
|
const y = padding + (chartHeight / yTicks) * i;
|
||||||
|
const price = maxPrice - (maxPrice - minPrice) * (i / yTicks);
|
||||||
|
|
||||||
|
// 绘制刻度线
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(padding - 3, y);
|
||||||
|
ctx.lineTo(padding, y);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// 绘制价格标签
|
||||||
|
ctx.setFontSize(10);
|
||||||
|
ctx.setFillStyle('#666');
|
||||||
|
ctx.setTextAlign('right');
|
||||||
|
ctx.fillText(price.toFixed(1), padding - 5, y + 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绘制X轴刻度和标签
|
||||||
|
const xTicks = this.timeFilter === 'day' ? 6 : 5;
|
||||||
|
for (let i = 0; i <= xTicks; i++) {
|
||||||
|
const x = padding + (chartWidth / xTicks) * i;
|
||||||
|
const index = Math.round((data.length - 1) * (i / xTicks));
|
||||||
|
const time = data[index].time;
|
||||||
|
|
||||||
|
// 绘制刻度线
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x, padding + chartHeight);
|
||||||
|
ctx.lineTo(x, padding + chartHeight + 3);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// 格式化时间标签
|
||||||
|
let timeLabel = '';
|
||||||
|
if (this.timeFilter === 'day') {
|
||||||
|
timeLabel = time.getDate() + '日';
|
||||||
|
} else if (this.timeFilter === 'hour') {
|
||||||
|
timeLabel = time.getHours() + '时';
|
||||||
|
} else if (this.timeFilter === 'week') {
|
||||||
|
timeLabel = '第' + Math.ceil((time.getDate() + time.getDay()) / 7) + '周';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绘制时间标签
|
||||||
|
ctx.setFontSize(10);
|
||||||
|
ctx.setFillStyle('#666');
|
||||||
|
ctx.setTextAlign('center');
|
||||||
|
ctx.fillText(timeLabel, x, padding + chartHeight + 15);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绘制单位标签
|
||||||
|
ctx.setFontSize(12);
|
||||||
|
ctx.setFillStyle('#333');
|
||||||
|
ctx.setTextAlign('center');
|
||||||
|
ctx.fillText('时间', padding + chartWidth / 2, padding + chartHeight + 30);
|
||||||
|
ctx.setTextAlign('right');
|
||||||
|
ctx.fillText('价格 (元/1000金)', padding - 20, padding + chartHeight / 2);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 绘制价格曲线
|
||||||
|
drawPriceLine(ctx, padding, chartWidth, chartHeight, data, minPrice, maxPrice, minTime, maxTime) {
|
||||||
|
ctx.setStrokeStyle('#1989fa');
|
||||||
|
ctx.setLineWidth(2);
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
// 计算坐标
|
||||||
|
const x = padding + (chartWidth * (item.time - minTime)) / (maxTime - minTime);
|
||||||
|
const y = padding + chartHeight - (chartHeight * (item.price - minPrice)) / (maxPrice - minPrice);
|
||||||
|
|
||||||
|
if (index === 0) {
|
||||||
|
ctx.moveTo(x, y);
|
||||||
|
} else {
|
||||||
|
ctx.lineTo(x, y);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
ctx.stroke();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 绘制价格点
|
||||||
|
drawPricePoints(ctx, padding, chartWidth, chartHeight, data, minPrice, maxPrice, minTime, maxTime) {
|
||||||
|
ctx.setFillStyle('#1989fa');
|
||||||
|
|
||||||
|
data.forEach(item => {
|
||||||
|
// 计算坐标
|
||||||
|
const x = padding + (chartWidth * (item.time - minTime)) / (maxTime - minTime);
|
||||||
|
const y = padding + chartHeight - (chartHeight * (item.price - minPrice)) / (maxPrice - minPrice);
|
||||||
|
|
||||||
|
// 绘制圆点
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, 3, 0, 2 * Math.PI);
|
||||||
|
ctx.fill();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.chart-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬浮筛选按钮样式 */
|
||||||
|
.floating-filter-btn {
|
||||||
|
position: fixed;
|
||||||
|
right: 30rpx;
|
||||||
|
top: 30rpx;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #1989fa;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
box-shadow: 0 4rpx 10rpx rgba(25, 137, 250, 0.3);
|
||||||
|
z-index: 998;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 筛选面板样式 */
|
||||||
|
.filter-panel {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 999;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-header {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-content {
|
||||||
|
background-color: #fff;
|
||||||
|
flex: 1;
|
||||||
|
padding: 20rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-group {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faction-items {
|
||||||
|
padding-left: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-item {
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-footer {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
border-top: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 10rpx 40rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
background-color: #1989fa;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 10rpx 40rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间筛选样式 */
|
||||||
|
.time-filter {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-item {
|
||||||
|
padding: 10rpx 30rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-item.active {
|
||||||
|
background-color: #1989fa;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图表画布样式 */
|
||||||
|
.chart-canvas {
|
||||||
|
width: 700rpx;
|
||||||
|
height: 300rpx;
|
||||||
|
background-color: #fafafa;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,587 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<text class="title">魔兽世界金币价格查询</text>
|
||||||
|
<!-- 悬浮筛选按钮 -->
|
||||||
|
<view class="floating-filter-btn" @click="showFilter = true">
|
||||||
|
<text>筛选</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 筛选面板 -->
|
||||||
|
<view class="filter-panel" v-if="showFilter">
|
||||||
|
<view class="filter-header">
|
||||||
|
<text class="filter-title">选择关注的区服和阵营</text>
|
||||||
|
<button class="close-btn" @click="showFilter = false">关闭</button>
|
||||||
|
</view>
|
||||||
|
<view class="filter-content">
|
||||||
|
<checkbox-group @change="handleCheckboxChange">
|
||||||
|
<view class="server-group" v-for="server in allServers" :key="server.id">
|
||||||
|
<view class="server-title">{{ server.name }}</view>
|
||||||
|
<view class="faction-items">
|
||||||
|
<view class="filter-item" v-for="faction in server.factions" :key="faction.id">
|
||||||
|
<checkbox :value="faction.id" :checked="selectedFactions.includes(faction.id)">
|
||||||
|
{{ faction.name }}
|
||||||
|
</checkbox>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</checkbox-group>
|
||||||
|
</view>
|
||||||
|
<view class="filter-footer">
|
||||||
|
<button class="cancel-btn" @click="showFilter = false">取消</button>
|
||||||
|
<button class="save-btn" @click="saveFilter">保存</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="content">
|
||||||
|
<!-- 铁血1区 -->
|
||||||
|
<view class="server-section" v-if="isServerSelected('tx1')">
|
||||||
|
<view class="server-title">
|
||||||
|
<text>铁血1区</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="faction-section" v-if="isFactionSelected('tx1-alliance')">
|
||||||
|
<view class="faction-title">
|
||||||
|
<text>联盟</text>
|
||||||
|
</view>
|
||||||
|
<view class="price-table">
|
||||||
|
<view class="table-header">
|
||||||
|
<view class="table-cell">排名</view>
|
||||||
|
<view class="table-cell">价格</view>
|
||||||
|
<view class="table-cell">数量</view>
|
||||||
|
</view>
|
||||||
|
<view class="table-row" v-for="(price, index) in getDisplayPrices(alliancePrices1, 'tx1')" :key="index">
|
||||||
|
<view class="table-cell">{{ index + 1 }}</view>
|
||||||
|
<view class="table-cell">{{ price.price }}</view>
|
||||||
|
<view class="table-cell">{{ price.amount }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="expand-btn" v-if="alliancePrices1.length > 3" @click="toggleExpand('tx1')">
|
||||||
|
{{ expandedServers['tx1'] ? '收起' : '展开更多' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="faction-section" v-if="isFactionSelected('tx1-horde')">
|
||||||
|
<view class="faction-title">
|
||||||
|
<text>部落</text>
|
||||||
|
</view>
|
||||||
|
<view class="price-table">
|
||||||
|
<view class="table-header">
|
||||||
|
<view class="table-cell">排名</view>
|
||||||
|
<view class="table-cell">价格</view>
|
||||||
|
<view class="table-cell">数量</view>
|
||||||
|
</view>
|
||||||
|
<view class="table-row" v-for="(price, index) in getDisplayPrices(hordePrices1, 'tx1')" :key="index">
|
||||||
|
<view class="table-cell">{{ index + 1 }}</view>
|
||||||
|
<view class="table-cell">{{ price.price }}</view>
|
||||||
|
<view class="table-cell">{{ price.amount }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="expand-btn" v-if="hordePrices1.length > 3" @click="toggleExpand('tx1')">
|
||||||
|
{{ expandedServers['tx1'] ? '收起' : '展开更多' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 铁血2区 -->
|
||||||
|
<view class="server-section" v-if="isServerSelected('tx2')">
|
||||||
|
<view class="server-title">
|
||||||
|
<text>铁血2区</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="faction-section" v-if="isFactionSelected('tx2-alliance')">
|
||||||
|
<view class="faction-title">
|
||||||
|
<text>联盟</text>
|
||||||
|
</view>
|
||||||
|
<view class="price-table">
|
||||||
|
<view class="table-header">
|
||||||
|
<view class="table-cell">排名</view>
|
||||||
|
<view class="table-cell">价格</view>
|
||||||
|
<view class="table-cell">数量</view>
|
||||||
|
</view>
|
||||||
|
<view class="table-row" v-for="(price, index) in getDisplayPrices(alliancePrices2, 'tx2')" :key="index">
|
||||||
|
<view class="table-cell">{{ index + 1 }}</view>
|
||||||
|
<view class="table-cell">{{ price.price }}</view>
|
||||||
|
<view class="table-cell">{{ price.amount }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="expand-btn" v-if="alliancePrices2.length > 3" @click="toggleExpand('tx2')">
|
||||||
|
{{ expandedServers['tx2'] ? '收起' : '展开更多' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="faction-section" v-if="isFactionSelected('tx2-horde')">
|
||||||
|
<view class="faction-title">
|
||||||
|
<text>部落</text>
|
||||||
|
</view>
|
||||||
|
<view class="price-table">
|
||||||
|
<view class="table-header">
|
||||||
|
<view class="table-cell">排名</view>
|
||||||
|
<view class="table-cell">价格</view>
|
||||||
|
<view class="table-cell">数量</view>
|
||||||
|
</view>
|
||||||
|
<view class="table-row" v-for="(price, index) in getDisplayPrices(hordePrices2, 'tx2')" :key="index">
|
||||||
|
<view class="table-cell">{{ index + 1 }}</view>
|
||||||
|
<view class="table-cell">{{ price.price }}</view>
|
||||||
|
<view class="table-cell">{{ price.amount }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="expand-btn" v-if="hordePrices2.length > 3" @click="toggleExpand('tx2')">
|
||||||
|
{{ expandedServers['tx2'] ? '收起' : '展开更多' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 时光1区 -->
|
||||||
|
<view class="server-section" v-if="isServerSelected('sg1')">
|
||||||
|
<view class="server-title">
|
||||||
|
<text>时光1区</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="faction-section" v-if="isFactionSelected('sg1-alliance')">
|
||||||
|
<view class="faction-title">
|
||||||
|
<text>联盟</text>
|
||||||
|
</view>
|
||||||
|
<view class="price-table">
|
||||||
|
<view class="table-header">
|
||||||
|
<view class="table-cell">排名</view>
|
||||||
|
<view class="table-cell">价格</view>
|
||||||
|
<view class="table-cell">数量</view>
|
||||||
|
</view>
|
||||||
|
<view class="table-row" v-for="(price, index) in getDisplayPrices(alliancePricesSg, 'sg1')" :key="index">
|
||||||
|
<view class="table-cell">{{ index + 1 }}</view>
|
||||||
|
<view class="table-cell">{{ price.price }}</view>
|
||||||
|
<view class="table-cell">{{ price.amount }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="expand-btn" v-if="alliancePricesSg.length > 3" @click="toggleExpand('sg1')">
|
||||||
|
{{ expandedServers['sg1'] ? '收起' : '展开更多' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="faction-section" v-if="isFactionSelected('sg1-horde')">
|
||||||
|
<view class="faction-title">
|
||||||
|
<text>部落</text>
|
||||||
|
</view>
|
||||||
|
<view class="price-table">
|
||||||
|
<view class="table-header">
|
||||||
|
<view class="table-cell">排名</view>
|
||||||
|
<view class="table-cell">价格</view>
|
||||||
|
<view class="table-cell">数量</view>
|
||||||
|
</view>
|
||||||
|
<view class="table-row" v-for="(price, index) in getDisplayPrices(hordePricesSg, 'sg1')" :key="index">
|
||||||
|
<view class="table-cell">{{ index + 1 }}</view>
|
||||||
|
<view class="table-cell">{{ price.price }}</view>
|
||||||
|
<view class="table-cell">{{ price.amount }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="expand-btn" v-if="hordePricesSg.length > 3" @click="toggleExpand('sg1')">
|
||||||
|
{{ expandedServers['sg1'] ? '收起' : '展开更多' }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showFilter: false,
|
||||||
|
// 修改数据结构，支持服务器和阵营的两级筛选
|
||||||
|
allServers: [
|
||||||
|
{
|
||||||
|
id: 'tx1',
|
||||||
|
name: '铁血1区',
|
||||||
|
factions: [
|
||||||
|
{ id: 'tx1-alliance', name: '联盟', serverId: 'tx1' },
|
||||||
|
{ id: 'tx1-horde', name: '部落', serverId: 'tx1' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'tx2',
|
||||||
|
name: '铁血2区',
|
||||||
|
factions: [
|
||||||
|
{ id: 'tx2-alliance', name: '联盟', serverId: 'tx2' },
|
||||||
|
{ id: 'tx2-horde', name: '部落', serverId: 'tx2' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'sg1',
|
||||||
|
name: '时光1区',
|
||||||
|
factions: [
|
||||||
|
{ id: 'sg1-alliance', name: '联盟', serverId: 'sg1' },
|
||||||
|
{ id: 'sg1-horde', name: '部落', serverId: 'sg1' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
selectedFactions: [],
|
||||||
|
expandedServers: {}, // 记录每个服务器的展开状态
|
||||||
|
// 模拟数据，后期从后端获取
|
||||||
|
alliancePrices1: [
|
||||||
|
{ price: '0.022', amount: '1000000' },
|
||||||
|
{ price: '0.022', amount: '500000' },
|
||||||
|
{ price: '0.023', amount: '300000' },
|
||||||
|
{ price: '0.023', amount: '200000' },
|
||||||
|
{ price: '0.023', amount: '100000' },
|
||||||
|
{ price: '0.024', amount: '50000' },
|
||||||
|
{ price: '0.024', amount: '50000' },
|
||||||
|
{ price: '0.025', amount: '20000' },
|
||||||
|
{ price: '0.025', amount: '20000' },
|
||||||
|
{ price: '0.025', amount: '20000' }
|
||||||
|
],
|
||||||
|
hordePrices1: [
|
||||||
|
{ price: '0.021', amount: '2000000' },
|
||||||
|
{ price: '0.021', amount: '1000000' },
|
||||||
|
{ price: '0.021', amount: '500000' },
|
||||||
|
{ price: '0.022', amount: '300000' },
|
||||||
|
{ price: '0.022', amount: '200000' },
|
||||||
|
{ price: '0.022', amount: '100000' },
|
||||||
|
{ price: '0.023', amount: '50000' },
|
||||||
|
{ price: '0.023', amount: '50000' },
|
||||||
|
{ price: '0.023', amount: '50000' },
|
||||||
|
{ price: '0.024', amount: '20000' }
|
||||||
|
],
|
||||||
|
alliancePrices2: [
|
||||||
|
{ price: '0.020', amount: '1500000' },
|
||||||
|
{ price: '0.020', amount: '800000' },
|
||||||
|
{ price: '0.021', amount: '500000' },
|
||||||
|
{ price: '0.021', amount: '300000' },
|
||||||
|
{ price: '0.021', amount: '200000' },
|
||||||
|
{ price: '0.022', amount: '100000' },
|
||||||
|
{ price: '0.022', amount: '100000' },
|
||||||
|
{ price: '0.023', amount: '50000' },
|
||||||
|
{ price: '0.023', amount: '50000' },
|
||||||
|
{ price: '0.023', amount: '30000' }
|
||||||
|
],
|
||||||
|
hordePrices2: [
|
||||||
|
{ price: '0.019', amount: '2000000' },
|
||||||
|
{ price: '0.019', amount: '1000000' },
|
||||||
|
{ price: '0.020', amount: '500000' },
|
||||||
|
{ price: '0.020', amount: '300000' },
|
||||||
|
{ price: '0.020', amount: '200000' },
|
||||||
|
{ price: '0.021', amount: '100000' },
|
||||||
|
{ price: '0.021', amount: '80000' },
|
||||||
|
{ price: '0.021', amount: '50000' },
|
||||||
|
{ price: '0.022', amount: '50000' },
|
||||||
|
{ price: '0.022', amount: '30000' }
|
||||||
|
],
|
||||||
|
// 时光1区数据
|
||||||
|
alliancePricesSg: [
|
||||||
|
{ price: '0.025', amount: '1200000' },
|
||||||
|
{ price: '0.025', amount: '600000' },
|
||||||
|
{ price: '0.026', amount: '400000' },
|
||||||
|
{ price: '0.026', amount: '300000' },
|
||||||
|
{ price: '0.026', amount: '200000' },
|
||||||
|
{ price: '0.027', amount: '150000' },
|
||||||
|
{ price: '0.027', amount: '100000' },
|
||||||
|
{ price: '0.027', amount: '80000' },
|
||||||
|
{ price: '0.028', amount: '50000' },
|
||||||
|
{ price: '0.028', amount: '50000' }
|
||||||
|
],
|
||||||
|
hordePricesSg: [
|
||||||
|
{ price: '0.023', amount: '1500000' },
|
||||||
|
{ price: '0.023', amount: '800000' },
|
||||||
|
{ price: '0.024', amount: '500000' },
|
||||||
|
{ price: '0.024', amount: '400000' },
|
||||||
|
{ price: '0.024', amount: '300000' },
|
||||||
|
{ price: '0.025', amount: '200000' },
|
||||||
|
{ price: '0.025', amount: '150000' },
|
||||||
|
{ price: '0.025', amount: '100000' },
|
||||||
|
{ price: '0.026', amount: '80000' },
|
||||||
|
{ price: '0.026', amount: '50000' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// 页面加载时从缓存中读取用户选择的阵营
|
||||||
|
this.loadSelectedFactions()
|
||||||
|
// 页面加载时从后端获取数据
|
||||||
|
this.loadPriceData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadPriceData() {
|
||||||
|
// 后期从后端获取数据的方法
|
||||||
|
console.log('加载价格数据...')
|
||||||
|
// 这里可以添加axios请求或者uni.request请求
|
||||||
|
},
|
||||||
|
|
||||||
|
// 加载用户选择的阵营
|
||||||
|
loadSelectedFactions() {
|
||||||
|
const selected = uni.getStorageSync('selectedFactions')
|
||||||
|
if (selected && selected.length > 0) {
|
||||||
|
this.selectedFactions = selected
|
||||||
|
} else {
|
||||||
|
// 默认全部选中
|
||||||
|
this.selectedFactions = []
|
||||||
|
this.allServers.forEach(server => {
|
||||||
|
server.factions.forEach(faction => {
|
||||||
|
this.selectedFactions.push(faction.id)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// 保存到缓存
|
||||||
|
uni.setStorageSync('selectedFactions', this.selectedFactions)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理checkbox变化
|
||||||
|
handleCheckboxChange(e) {
|
||||||
|
this.selectedFactions = e.detail.value
|
||||||
|
},
|
||||||
|
|
||||||
|
// 保存筛选结果
|
||||||
|
saveFilter() {
|
||||||
|
// 确保至少选择一个阵营
|
||||||
|
if (this.selectedFactions.length === 0) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请至少选择一个阵营',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存到缓存
|
||||||
|
uni.setStorageSync('selectedFactions', this.selectedFactions)
|
||||||
|
|
||||||
|
// 筛选后自动展开所有服务器到5行
|
||||||
|
this.selectedFactions.forEach(factionId => {
|
||||||
|
// 提取服务器ID
|
||||||
|
const serverId = factionId.split('-')[0]
|
||||||
|
// 使用$set确保Vue能检测到对象属性的变化
|
||||||
|
this.$set(this.expandedServers, serverId, true)
|
||||||
|
})
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
this.showFilter = false
|
||||||
|
},
|
||||||
|
|
||||||
|
// 切换服务器展开状态
|
||||||
|
toggleExpand(serverId) {
|
||||||
|
// 使用$set确保Vue能检测到对象属性的变化
|
||||||
|
this.$set(this.expandedServers, serverId, !this.expandedServers[serverId])
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取要显示的价格行数
|
||||||
|
getDisplayPrices(prices, serverId) {
|
||||||
|
const isExpanded = this.expandedServers[serverId] || false
|
||||||
|
return isExpanded ? prices.slice(0, 5) : prices.slice(0, 3)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 检查阵营是否被选中
|
||||||
|
isFactionSelected(factionId) {
|
||||||
|
return this.selectedFactions.includes(factionId)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 检查服务器是否有任何阵营被选中
|
||||||
|
isServerSelected(serverId) {
|
||||||
|
return this.allServers.some(server =>
|
||||||
|
server.id === serverId &&
|
||||||
|
server.factions.some(faction =>
|
||||||
|
this.selectedFactions.includes(faction.id)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬浮筛选按钮样式 */
|
||||||
|
.floating-filter-btn {
|
||||||
|
position: fixed;
|
||||||
|
right: 30rpx;
|
||||||
|
top: 30rpx;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #1989fa;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
box-shadow: 0 4rpx 10rpx rgba(25, 137, 250, 0.3);
|
||||||
|
z-index: 998;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 筛选面板样式 */
|
||||||
|
.filter-panel {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 999;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-header {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-content {
|
||||||
|
background-color: #fff;
|
||||||
|
flex: 1;
|
||||||
|
padding: 20rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-group {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faction-items {
|
||||||
|
padding-left: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-item {
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-footer {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
border-top: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 10rpx 40rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
background-color: #1989fa;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 10rpx 40rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-section {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.server-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 2rpx solid #eee;
|
||||||
|
padding-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faction-section {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faction-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-table {
|
||||||
|
border-radius: 5rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-header {
|
||||||
|
display: flex;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
font-weight: bold;
|
||||||
|
border-bottom: 2rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell {
|
||||||
|
flex: 1;
|
||||||
|
padding: 15rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 展开按钮样式 */
|
||||||
|
.expand-btn {
|
||||||
|
text-align: center;
|
||||||
|
color: #1989fa;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 10rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@@ -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) => {
|
||||||
|
if (!res) {
|
||||||
|
return resolve(res)
|
||||||
|
}
|
||||||
|
res.then((res) => res[0] ? reject(res[0]) : resolve(res[1]));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
/**
|
||||||
|
* 这里是uni-app内置的常用样式变量
|
||||||
|
*
|
||||||
|
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||||
|
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||||
|
*
|
||||||
|
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* 颜色变量 */
|
||||||
|
|
||||||
|
/* 行为相关颜色 */
|
||||||
|
$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: #fff;
|
||||||
|
$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: #555; // 二级标题颜色
|
||||||
|
$uni-font-size-subtitle: 18px;
|
||||||
|
$uni-color-paragraph: #3f536e; // 文章段落颜色
|
||||||
|
$uni-font-size-paragraph: 15px;
|
||||||
Reference in New Issue
Block a user