mirror of
https://github.com/talktao/Vue3-Vite-Vant-TS-H5.git
synced 2025-05-25 00:39:18 +08:00
remove
This commit is contained in:
talktao
parent
42e3db8e6a
commit
25dd21101c
@ -1 +0,0 @@
|
|||||||
VITE_BASE_URL = ''
|
|
||||||
@ -1 +0,0 @@
|
|||||||
VITE_BASE_URL = ''
|
|
||||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,3 +0,0 @@
|
|||||||
node_modules
|
|
||||||
*.local
|
|
||||||
*.sh
|
|
||||||
3
.vscode/extensions.json
vendored
3
.vscode/extensions.json
vendored
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"recommendations": ["johnsoncodehk.volar"]
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 509 KiB After Width: | Height: | Size: 509 KiB |
17
dist/index.html
vendored
17
dist/index.html
vendored
@ -1,17 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" href="favicon.ico" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Vite App</title>
|
|
||||||
<script type="module" crossorigin src="assets/index.19d4961f.js"></script>
|
|
||||||
<link rel="modulepreload" href="assets/vendor.17bdbd54.js">
|
|
||||||
<link rel="stylesheet" href="assets/vendor.7dd8395f.css">
|
|
||||||
<link rel="stylesheet" href="assets/index.b863cb84.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
@ -2,12 +2,16 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite App</title>
|
<title>Vite App</title>
|
||||||
|
<script type="module" crossorigin src="assets/index.19d4961f.js"></script>
|
||||||
|
<link rel="modulepreload" href="assets/vendor.17bdbd54.js">
|
||||||
|
<link rel="stylesheet" href="assets/vendor.7dd8395f.css">
|
||||||
|
<link rel="stylesheet" href="assets/index.b863cb84.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
11
src/App.vue
11
src/App.vue
@ -1,11 +0,0 @@
|
|||||||
<template>
|
|
||||||
<router-view/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
#app {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import axiosInstance, { AxiosResponseProps } from '@/uitls/request';
|
|
||||||
|
|
||||||
export const getList = (params?: any) => {
|
|
||||||
return axiosInstance.get("https://www.fastmock.site/mock/826b7b3ffc420fe885bdce88c8e6cdb7/test/api/list", { params: params || {} });
|
|
||||||
};
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import axiosInstance, { AxiosResponseProps } from '@/uitls/request'
|
|
||||||
|
|
||||||
export const getList = (params: any) => {
|
|
||||||
return axiosInstance.get("/common/code/logisticsInfo/getLogisticsByOrderId", { params: params || {} });
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 509 KiB |
@ -1,210 +0,0 @@
|
|||||||
@import './reset.scss';
|
|
||||||
@import './mixin.scss';
|
|
||||||
@import './variables.scss';
|
|
||||||
html {
|
|
||||||
@include root-font-size();
|
|
||||||
}
|
|
||||||
//@author TalkTao
|
|
||||||
|
|
||||||
.flex-shrink-0 {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.flex-grow-0 {
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
.flex-grow-1 {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
.flex-column {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.flex-wrap {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.object-fit-cover {
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.border-box {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.fw-bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.w-0 {
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
.w-100 {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.w-50{
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
.h-100 {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.text-ellipsis {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.text-again-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.flex-column{
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
@each $key, $val in $fontSizeS {
|
|
||||||
.fs-#{$key} {
|
|
||||||
font-size: #{$val};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//.d-flex {display: flex;}
|
|
||||||
@each $item in $displayList {
|
|
||||||
.d-#{$item} {
|
|
||||||
display: #{$item};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//.flex-center {justify-content: center;}
|
|
||||||
@each $commonKey, $commonVal in $flexCommonValues {
|
|
||||||
.flex-#{$commonKey} {
|
|
||||||
display: flex;
|
|
||||||
justify-content: #{$commonVal};
|
|
||||||
align-items: #{$commonVal};
|
|
||||||
}
|
|
||||||
.align-self-#{$commonKey} {
|
|
||||||
align-self: #{$commonVal};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//.justify-content-between {justify-content: sapce-between;}
|
|
||||||
@each $key, $val in $justify-content-values {
|
|
||||||
.justify-content-#{$key} {
|
|
||||||
justify-content: #{$val};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//.align-items-start {align-items-start: flex-start;}
|
|
||||||
@each $key, $val in $align-items-values {
|
|
||||||
.align-items-#{$key} {
|
|
||||||
align-items: #{$val};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//.postion-absolute {absolute;}
|
|
||||||
@each $pos in $positionList {
|
|
||||||
.position-#{$pos} {
|
|
||||||
position: #{$pos};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//.overflow-x-scroll {overflow-x:scroll}
|
|
||||||
@each $dir in $overflowDirs {
|
|
||||||
.#{$dir}-scroll {
|
|
||||||
#{$dir}: scroll;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//pt-5 {padding-top: 1vw}
|
|
||||||
.rounded-circle {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
@for $size from 1 through 50 {
|
|
||||||
.rounded-#{$size} {
|
|
||||||
border-radius: #{$size}vw;
|
|
||||||
}
|
|
||||||
@each $t_d_key, $t_d_val in $spaceTypes_Dirs {
|
|
||||||
.#{$t_d_key}-#{$size} {
|
|
||||||
#{$t_d_val}: #{$size}vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.mx-#{$size} {
|
|
||||||
margin-left: #{$size}vw;
|
|
||||||
margin-right: #{$size}vw;
|
|
||||||
}
|
|
||||||
.my-#{$size} {
|
|
||||||
margin-top: #{$size}vw;
|
|
||||||
margin-bottom: #{$size}vw;
|
|
||||||
}
|
|
||||||
.px-#{$size} {
|
|
||||||
padding-left: #{$size}vw;
|
|
||||||
padding-right: #{$size}vw;
|
|
||||||
}
|
|
||||||
.py-#{$size} {
|
|
||||||
padding-top: #{$size}vw;
|
|
||||||
padding-bottom: #{$size}vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//top-0 {top: 0;}
|
|
||||||
@each $type, $val in $positionTypes {
|
|
||||||
.#{$type}-0 {
|
|
||||||
#{$val}: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//bg-white {background-color: white;}
|
|
||||||
@each $key, $val in $colors {
|
|
||||||
.bg-#{"" + $key} {
|
|
||||||
background-color: #{$val};
|
|
||||||
}
|
|
||||||
.text-#{"" + $key} {
|
|
||||||
color: #{$val};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//.border-pill {border-radius: 50rem}
|
|
||||||
@each $key, $val in $radiusList {
|
|
||||||
.border-#{$key} {
|
|
||||||
border-radius: #{$val};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//.opacity-75 {opacity: 0.75}
|
|
||||||
@for $index from 0 through 4 {
|
|
||||||
.opacity-#{$index * 25} {
|
|
||||||
opacity: #{$index * 0.25};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//.text-center {text-align: center}
|
|
||||||
@each $var in $textAlignDirs {
|
|
||||||
.text-#{$var} {
|
|
||||||
text-align: #{$var};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//.border-bottom-1 {border-bottom: 1px} .border-bottom {border-bottom: 1px}
|
|
||||||
@for $size from 0 to 5 {
|
|
||||||
@each $posKey, $posVal in $positionTypes {
|
|
||||||
@if $size == 0 {
|
|
||||||
.border-#{$posKey} {
|
|
||||||
border-#{$posVal}: 1px solid #e6e6e6;
|
|
||||||
}
|
|
||||||
} @else {
|
|
||||||
.border-#{$posKey}-#{$size} {
|
|
||||||
border-#{$posVal}: #{$size}px solid #e6e6e6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@mixin placeholderColor($color) {
|
|
||||||
&::input-placeholder {
|
|
||||||
/*WebKit browsers*/
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
&::-webkit-input-placeholder {
|
|
||||||
/*WebKit browsers*/
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
&::-moz-input-placeholder {
|
|
||||||
/*Mozilla Firefox*/
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
&::-ms-input-placeholder {
|
|
||||||
/*Internet Explorer*/
|
|
||||||
color: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@mixin ellipsisRow($row: 1) {
|
|
||||||
@debug "$row is #{$row}";
|
|
||||||
@if $row == 1 {
|
|
||||||
// @debug "1行";
|
|
||||||
@extend .text-ellipsis;
|
|
||||||
} @else {
|
|
||||||
// @debug "多行";
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box; // 作为弹性伸缩盒子模型显示。
|
|
||||||
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
|
||||||
-webkit-line-clamp: #{$row}; // 显示的行
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,191 +0,0 @@
|
|||||||
// 清除浮动
|
|
||||||
@mixin clearfix {
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 多行隐藏
|
|
||||||
@mixin textoverflow($clamp:1) {
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
-o-text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: $clamp;
|
|
||||||
/*! autoprefixer: ignore next */
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
//flex box
|
|
||||||
@mixin flexbox($jc:space-between, $ai:center, $fd:row, $fw:nowrap) {
|
|
||||||
display: flex;
|
|
||||||
display: -webkit-flex;
|
|
||||||
flex: 1;
|
|
||||||
justify-content: $jc;
|
|
||||||
-webkit-justify-content: $jc;
|
|
||||||
align-items: $ai;
|
|
||||||
-webkit-align-items: $ai;
|
|
||||||
flex-direction: $fd;
|
|
||||||
-webkit-flex-direction: $fd;
|
|
||||||
flex-wrap: $fw;
|
|
||||||
-webkit-flex-wrap: $fw;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* 移动端页面设计稿宽度 */
|
|
||||||
$design-width: 750;
|
|
||||||
/* 移动端页面设计稿dpr基准值 */
|
|
||||||
$design-dpr: 2;
|
|
||||||
/* 将移动端页面分为10块 */
|
|
||||||
$blocks: 10;
|
|
||||||
/* 缩放所支持的设备最小宽度 */
|
|
||||||
$min-device-width: 320px;
|
|
||||||
/* 缩放所支持的设备最大宽度 */
|
|
||||||
$max-device-width: 750px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
rem与px对应关系，1rem代表html font-size值（为一块的宽度），$rem即为$px对应占多少块
|
|
||||||
|
|
||||||
$px $rem
|
|
||||||
------------- === ------------
|
|
||||||
$design-width $blocks
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* html根元素的font-size定义，简单地将页面分为$blocks块，方便计算 */
|
|
||||||
@mixin root-font-size() {
|
|
||||||
font-size: calc(100vw / $blocks);
|
|
||||||
|
|
||||||
body {
|
|
||||||
@include container-min-width();
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 最小宽度定义 */
|
|
||||||
@media screen and (max-width: $min-device-width) {
|
|
||||||
font-size: calc($min-device-width / $blocks);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 最大宽度定义 */
|
|
||||||
&[data-content-max] {
|
|
||||||
body[data-content-max] {
|
|
||||||
@include container-max-width();
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: $max-device-width) {
|
|
||||||
font-size: calc($max-device-width / $blocks);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 单位px转化为rem */
|
|
||||||
@function px2rem($px) {
|
|
||||||
@return #{$px / $design-width * $blocks}rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 单位rem转化为px，可用于根据rem单位快速计算原px */
|
|
||||||
@function rem2px($rem) {
|
|
||||||
@return #{$rem / $blocks * $design-width}px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 实现固定宽高比
|
|
||||||
* @param {string} $position: relative 定位方式
|
|
||||||
* @param {string} $width: 100% 容器宽度
|
|
||||||
* @param {string} $sub: null 容器的目标子元素
|
|
||||||
* @param {number} $aspectX: 1 容器宽
|
|
||||||
* @param {number} $aspectY: 1 容器高
|
|
||||||
*/
|
|
||||||
@mixin aspect-ratio($position: relative,
|
|
||||||
$width: 100%,
|
|
||||||
$sub: null,
|
|
||||||
$aspectX: 1,
|
|
||||||
$aspectY: 1) {
|
|
||||||
overflow: hidden;
|
|
||||||
position: $position;
|
|
||||||
padding-top: percentage($aspectY / $aspectX);
|
|
||||||
width: $width;
|
|
||||||
height: 0;
|
|
||||||
|
|
||||||
@if $sub==null {
|
|
||||||
$sub: "*";
|
|
||||||
}
|
|
||||||
|
|
||||||
&>#{$sub} {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 设置容器拉伸的最小宽度 */
|
|
||||||
@mixin container-min-width() {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
min-width: $min-device-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 设置容器拉伸的最大宽度 */
|
|
||||||
@mixin container-max-width() {
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
max-width: $max-device-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 设置字体大小，不使用rem单位， 根据dpr值分段调整 */
|
|
||||||
@mixin font-size($fontSize) {
|
|
||||||
font-size: $fontSize / $design-dpr;
|
|
||||||
|
|
||||||
[data-dpr="2"] & {
|
|
||||||
font-size: $fontSize / $design-dpr * 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-dpr="3"] & {
|
|
||||||
font-size: $fontSize / $design-dpr * 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 清除浮动 */
|
|
||||||
@mixin clearfix {
|
|
||||||
*zoom: 1;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
height: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
*$line:超出显示几行省略号
|
|
||||||
*$substract:预留区域百分比
|
|
||||||
*/
|
|
||||||
@mixin text-overflow($line:1, $substract:0) {
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
@if $line==1 {
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
width: 100% -$substract;
|
|
||||||
}
|
|
||||||
|
|
||||||
@else {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: $line;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@mixin WH($Width:100%, $Height:100%) {
|
|
||||||
width: $Width;
|
|
||||||
height: $Height;
|
|
||||||
}
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
/* http://meyerweb.com/eric/tools/css/reset/
|
|
||||||
v4.0 | 20180602
|
|
||||||
License: none (public domain)
|
|
||||||
*/
|
|
||||||
|
|
||||||
html, body, div, span, applet, object, iframe,
|
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
||||||
a, abbr, acronym, address, big, cite, code,
|
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
||||||
small, strike, strong, sub, sup, tt, var,
|
|
||||||
b, u, i, center,
|
|
||||||
dl, dt, dd, menu, ol, ul, li,
|
|
||||||
fieldset, form, label, legend,
|
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
||||||
article, aside, canvas, details, embed,
|
|
||||||
figure, figcaption, footer, header, hgroup,
|
|
||||||
main, menu, nav, output, ruby, section, summary,
|
|
||||||
time, mark, audio, video {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
font-size: 100%;
|
|
||||||
font: inherit;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
/* HTML5 display-role reset for older browsers */
|
|
||||||
article, aside, details, figcaption, figure,
|
|
||||||
footer, header, hgroup, main, menu, nav, section {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
/* HTML5 hidden-attribute fix for newer browsers */
|
|
||||||
*[hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
menu, ol, ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
blockquote, q {
|
|
||||||
quotes: none;
|
|
||||||
}
|
|
||||||
blockquote:before, blockquote:after,
|
|
||||||
q:before, q:after {
|
|
||||||
content: '';
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 去除iPhone中默认的input样式 */
|
|
||||||
input[type="submit"],input[type="reset"],input[type="button"],input:focus,button:focus,select:focus,textarea:focus{ outline: none;}
|
|
||||||
input{-webkit-appearance:none; resize: none; border-radius: 0;}
|
|
||||||
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
$background-color: #eeeeee;
|
|
||||||
$title: 18px;
|
|
||||||
$primary: #b42e46;
|
|
||||||
$positionList: (relative, absolute, fixed);
|
|
||||||
$displayList: (flex, block, inline-block, none);
|
|
||||||
$flexCommonValues: (
|
|
||||||
start: flex-start,
|
|
||||||
center: center,
|
|
||||||
end: flex-end,
|
|
||||||
);
|
|
||||||
$justify-content-values: (
|
|
||||||
start: flex-start,
|
|
||||||
center: center,
|
|
||||||
between: space-between,
|
|
||||||
around: space-around,
|
|
||||||
evenly: space-evenly,
|
|
||||||
end: flex-end,
|
|
||||||
);
|
|
||||||
$align-items-values: (
|
|
||||||
start: flex-start,
|
|
||||||
center: center,
|
|
||||||
end: flex-end,
|
|
||||||
);
|
|
||||||
$overflowDirs: (overflow, overflow-x, overflow-y);
|
|
||||||
$spaceTypes_Dirs: (
|
|
||||||
"p": padding,
|
|
||||||
"m": margin,
|
|
||||||
"ps": padding-left,
|
|
||||||
"pe": padding-right,
|
|
||||||
"pt": padding-top,
|
|
||||||
"pb": padding-bottom,
|
|
||||||
"ms": margin-left,
|
|
||||||
"me": margin-right,
|
|
||||||
"mt": margin-top,
|
|
||||||
"mb": margin-bottom,
|
|
||||||
);
|
|
||||||
$positionTypes: (
|
|
||||||
"top": top,
|
|
||||||
"bottom": bottom,
|
|
||||||
"left": left,
|
|
||||||
"right": right,
|
|
||||||
"start": left,
|
|
||||||
"end": right,
|
|
||||||
);
|
|
||||||
$colors: (
|
|
||||||
primary: $primary,
|
|
||||||
white: #ffffff,
|
|
||||||
muted: #6c757d,
|
|
||||||
black: #000,
|
|
||||||
dark: #333,
|
|
||||||
bgPrimary: "#303c5a",
|
|
||||||
red: red,
|
|
||||||
immediateColor: #94765c,
|
|
||||||
);
|
|
||||||
$radiusList: (
|
|
||||||
circle: 100%,
|
|
||||||
pill: 50rem,
|
|
||||||
);
|
|
||||||
$fontSizeS: (
|
|
||||||
6: 3.2vw,
|
|
||||||
5: calc(3.2vw * 1.1),
|
|
||||||
4: calc(3.2vw * 1.2),
|
|
||||||
3: calc(3.2vw * 1.3),
|
|
||||||
2: calc(3.2vw * 1.4),
|
|
||||||
1: calc(3.2vw * 2.3),
|
|
||||||
);
|
|
||||||
$textAlignDirs: (left, center, right);
|
|
||||||
//导出js变量
|
|
||||||
:export {
|
|
||||||
primary: $primary;
|
|
||||||
bgPrimary: "#303c5a";
|
|
||||||
muted: #6c757d;
|
|
||||||
}
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: "RequestLoading",
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { vuexStore } from "@/store";
|
|
||||||
import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
|
|
||||||
|
|
||||||
let timer = null;
|
|
||||||
|
|
||||||
const useLoading = () => {
|
|
||||||
const state = reactive({
|
|
||||||
loadedText: "加载中...",
|
|
||||||
isLoading: computed(() => vuexStore.state.isLoading),
|
|
||||||
});
|
|
||||||
return toRefs(state);
|
|
||||||
};
|
|
||||||
const { loadedText, isLoading } = useLoading() as any;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
v-if="isLoading"
|
|
||||||
class="requestLoading position-fixed start-0 top-0 w-100 h-100"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="position-absolute start-50 translate-middle loadingBox text-center"
|
|
||||||
>
|
|
||||||
<LoadingIcon width="86" height="86" class="loadingIcon" />
|
|
||||||
<div class="text-white text-center mt-2 fs-4 h-25">{{ loadedText }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.requestLoading {
|
|
||||||
z-index: 99999999;
|
|
||||||
background-color: rgba($color: #000000, $alpha: 0.8);
|
|
||||||
text-align: center;
|
|
||||||
.loadingBox {
|
|
||||||
top: 40%;
|
|
||||||
left: 40%;
|
|
||||||
.loadingIcon {
|
|
||||||
animation: rotateIcon 1s infinite;
|
|
||||||
}
|
|
||||||
@keyframes rotateIcon {
|
|
||||||
from {
|
|
||||||
transform: rotate(0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: "CustomHeader",
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
import { useRoute, useRouter } from "vue-router";
|
|
||||||
|
|
||||||
interface topTitleProps {
|
|
||||||
title?: string;
|
|
||||||
leftIcon?: string;
|
|
||||||
leftText?: string;
|
|
||||||
rightText?: string;
|
|
||||||
color?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 携带默认值的props
|
|
||||||
withDefaults(defineProps<topTitleProps>(), {
|
|
||||||
title: "",
|
|
||||||
leftIcon: "arrow-left",
|
|
||||||
leftText: "",
|
|
||||||
rightText: "",
|
|
||||||
color: "#333",
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(["clickLeft", "clickRight"]);
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const active = ref(0);
|
|
||||||
|
|
||||||
const clickLeft = () => {
|
|
||||||
if (window.history.length > 1) {
|
|
||||||
router.back();
|
|
||||||
} else {
|
|
||||||
router.push("/");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const clickRight = () => {
|
|
||||||
emit("clickRight");
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<van-sticky>
|
|
||||||
<van-nav-bar
|
|
||||||
:title="title"
|
|
||||||
@click-left="clickLeft"
|
|
||||||
@click-right="clickRight"
|
|
||||||
left-arrow
|
|
||||||
>
|
|
||||||
<template #left>
|
|
||||||
<van-icon :color="color" size="20" :name="leftIcon" /><span
|
|
||||||
:style="color"
|
|
||||||
>{{ leftText }}</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
<template @click-right="onClickRight" #right>
|
|
||||||
<span :style="color">{{ rightText }}</span>
|
|
||||||
</template>
|
|
||||||
</van-nav-bar>
|
|
||||||
</van-sticky>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
</style>
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
export default{
|
|
||||||
name: 'TabBar'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { reactive, ref } from 'vue'
|
|
||||||
|
|
||||||
interface tabProps {
|
|
||||||
data?: [
|
|
||||||
{
|
|
||||||
title: string
|
|
||||||
to: string
|
|
||||||
name: string
|
|
||||||
icon: string
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<tabProps>()
|
|
||||||
console.log(props.data,'props.data');
|
|
||||||
|
|
||||||
|
|
||||||
const emit = defineEmits(['chang'])
|
|
||||||
|
|
||||||
const active = ref('home')
|
|
||||||
|
|
||||||
const onChange = (value) => {
|
|
||||||
// console.log(value,'value');
|
|
||||||
|
|
||||||
emit('chang', value)
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<van-tabbar fixed route v-model="active" @change="onChange">
|
|
||||||
<van-tabbar-item v-for="(item, index) in props.data" :to="item.to" :name="item.name" :key="index" :icon="item.icon">{{item.title}}</van-tabbar-item>
|
|
||||||
</van-tabbar>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: "LoadingIcon",
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<svg
|
|
||||||
t="1619142908908"
|
|
||||||
class="icon"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
version="1.1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
p-id="2450"
|
|
||||||
width="200"
|
|
||||||
height="200"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M899.846 287.713c8.837 15.305 3.593 34.876-11.713 43.713l-152.42 88c-15.306 8.836-34.876 3.592-43.713-11.713-8.837-15.306-3.593-34.876 11.713-43.713l152.42-88c15.306-8.837 34.877-3.593 43.713 11.713zM512 64c17.673 0 32 14.327 32 32v176c0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32V96c0-17.673 14.327-32 32-32z m448 448c0 17.673-14.327 32-32 32H752c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h176c17.673 0 32 14.327 32 32zM736 899.98c-15.305 8.836-34.876 3.592-43.713-11.713-8.836-15.306-3.592-34.877 11.713-43.713 15.305-8.837 34.876-3.593 43.713 11.713 8.836 15.305 3.592 34.876-11.713 43.712zM408 331.866c-15.305 8.836-34.876 3.592-43.713-11.713l-88-152.42c-8.836-15.306-3.592-34.877 11.713-43.713 15.305-8.837 34.876-3.593 43.713 11.712l88 152.42c8.836 15.306 3.592 34.877-11.713 43.714zM305.886 393c-8.837 15.305-28.407 20.55-43.713 11.713l-126.44-73c-15.305-8.837-20.549-28.408-11.712-43.713 8.836-15.305 28.407-20.55 43.712-11.713l126.44 73c15.306 8.837 20.55 28.408 11.713 43.713zM244 512c0 17.673-14.327 32-32 32H96c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h116c17.673 0 32 14.327 32 32z m9.904 148.713c8.836 15.305 3.592 34.876-11.713 43.713l-74.478 43c-15.306 8.836-34.876 3.592-43.713-11.713-8.837-15.306-3.593-34.876 11.713-43.713l74.478-43c15.305-8.837 34.876-3.593 43.713 11.713zM735.713 124c15.305 8.837 20.55 28.407 11.713 43.713l-88 152.42c-8.837 15.306-28.408 20.55-43.713 11.713-15.306-8.836-20.55-28.407-11.713-43.713l88-152.42c8.837-15.306 28.407-20.55 43.713-11.713z m-387.75 671.349c15.305 8.837 20.55 28.407 11.713 43.713l-28 48.497c-8.837 15.306-28.408 20.55-43.713 11.713-15.306-8.836-20.55-28.407-11.713-43.713l28-48.497c8.837-15.306 28.407-20.55 43.713-11.713zM512 870c17.673 0 32 14.327 32 32v26c0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32v-26c0-17.673 14.327-32 32-32z"
|
|
||||||
p-id="2451"
|
|
||||||
fill="#ffffff"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
8
src/env.d.ts
vendored
8
src/env.d.ts
vendored
@ -1,8 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
|
|
||||||
declare module '*.vue' {
|
|
||||||
import type { DefineComponent } from 'vue'
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
|
||||||
const component: DefineComponent<{}, {}, any>
|
|
||||||
export default component
|
|
||||||
}
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, reactive, toRefs } from "vue";
|
|
||||||
|
|
||||||
//底部tab栏相关
|
|
||||||
const useTabBar = () => {
|
|
||||||
const state = reactive({
|
|
||||||
tabBar: [
|
|
||||||
{
|
|
||||||
title: "首页",
|
|
||||||
to: {
|
|
||||||
name: "Home",
|
|
||||||
},
|
|
||||||
icon: "home-o",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "我",
|
|
||||||
to: {
|
|
||||||
name: "About",
|
|
||||||
},
|
|
||||||
icon: "user-o",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
return toRefs(state);
|
|
||||||
};
|
|
||||||
const { tabBar } = useTabBar();
|
|
||||||
|
|
||||||
const handleChange = (value) => {
|
|
||||||
// console.log(value,'valueeeeeee');
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<div class="layout-content">
|
|
||||||
<keep-alive v-if="$route.meta.keepAlive">
|
|
||||||
<router-view></router-view>
|
|
||||||
</keep-alive>
|
|
||||||
<router-view v-else></router-view>
|
|
||||||
<RequestLoading></RequestLoading>
|
|
||||||
</div>
|
|
||||||
<div class="layout-footer">
|
|
||||||
<TabBar :data="tabBar" @chang="handleChange"></TabBar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
</style>
|
|
||||||
18
src/main.ts
18
src/main.ts
@ -1,18 +0,0 @@
|
|||||||
import { createApp } from 'vue';
|
|
||||||
import App from './App.vue';
|
|
||||||
import router from './router';
|
|
||||||
import { vuexStore, piniaStore } from './store';
|
|
||||||
|
|
||||||
// 移动端适配
|
|
||||||
import 'lib-flexible/flexible.js';
|
|
||||||
|
|
||||||
// 引入全局样式
|
|
||||||
import '@/assets/scss/index.scss';
|
|
||||||
|
|
||||||
// 全局引入按需引入UI库 vant
|
|
||||||
import { vantPlugins } from './plugins/vant.js';
|
|
||||||
|
|
||||||
//全局公共组件
|
|
||||||
import components from './plugins/components.js';
|
|
||||||
|
|
||||||
createApp(App).use(vuexStore).use(piniaStore).use(router).use(vantPlugins).use(components).mount('#app');
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
const modules = import.meta.globEager('../components/*/*.vue');
|
|
||||||
|
|
||||||
export default {
|
|
||||||
install(app) {
|
|
||||||
Object.keys(modules).forEach(componentPath => {
|
|
||||||
|
|
||||||
// 获取遍历的当前组件实例对象
|
|
||||||
let curComponent = modules[componentPath]?.default;
|
|
||||||
|
|
||||||
app.component(curComponent.name, curComponent);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
/**
|
|
||||||
* @author TalkTao
|
|
||||||
* @description 按需引入Vant
|
|
||||||
*/
|
|
||||||
import { Button, Tabbar, TabbarItem, Sticky, NavBar, Icon, Search, DropdownMenu, DropdownItem, Image, Lazyload, Tabs, Tab, Toast, Field, Cell, CellGroup, Form, List } from 'vant'
|
|
||||||
const pluginsVant = [
|
|
||||||
Button,
|
|
||||||
Tabbar,
|
|
||||||
TabbarItem,
|
|
||||||
Sticky,
|
|
||||||
NavBar,
|
|
||||||
Icon,
|
|
||||||
Search,
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownItem,
|
|
||||||
Image,
|
|
||||||
Lazyload,
|
|
||||||
Tabs,
|
|
||||||
Tab,
|
|
||||||
Toast,
|
|
||||||
Field,
|
|
||||||
Cell,
|
|
||||||
CellGroup,
|
|
||||||
Form,
|
|
||||||
List
|
|
||||||
]
|
|
||||||
export const vantPlugins = {
|
|
||||||
install: function(vm) {
|
|
||||||
pluginsVant.forEach((item:any) => {
|
|
||||||
vm.component(item.name, item);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
|
|
||||||
|
|
||||||
// 通过Vite的import.meta.glob()方法实现自动化导入路由
|
|
||||||
const mainRouterModules = import.meta.glob('../layout/*.vue')
|
|
||||||
const viewRouterModules = import.meta.glob('../views/**/*.vue')
|
|
||||||
|
|
||||||
// 子路由
|
|
||||||
const childRoutes = Object.keys(viewRouterModules).map((path)=>{
|
|
||||||
const childName = path.match(/\.\.\/views\/(.*)\.vue$/)[1].split('/')[1];
|
|
||||||
return {
|
|
||||||
path: `/${childName.toLowerCase()}`,
|
|
||||||
name: childName,
|
|
||||||
component: viewRouterModules[path]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 根路由
|
|
||||||
const rootRoutes = Object.keys(mainRouterModules).map((path) => {
|
|
||||||
const name = path.match(/\.\.\/layout\/(.*)\.vue$/)[1].toLowerCase();
|
|
||||||
const routePath = `/${name}`;
|
|
||||||
if (routePath === '/index') {
|
|
||||||
return {
|
|
||||||
path: '/',
|
|
||||||
name,
|
|
||||||
redirect: '/home',
|
|
||||||
component: mainRouterModules[path],
|
|
||||||
children: childRoutes
|
|
||||||
};
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const routes: Array<RouteRecordRaw> = rootRoutes
|
|
||||||
|
|
||||||
const router = createRouter({
|
|
||||||
history: createWebHashHistory(),
|
|
||||||
routes,
|
|
||||||
});
|
|
||||||
|
|
||||||
export default router
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
import { createStore } from "vuex";
|
|
||||||
import { createPinia } from "pinia";
|
|
||||||
|
|
||||||
export const vuexStore = createStore({
|
|
||||||
state: {
|
|
||||||
isLoading: false,
|
|
||||||
userName: ""
|
|
||||||
},
|
|
||||||
getters: {
|
|
||||||
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
changeIsLoading(state, val) {
|
|
||||||
state.isLoading = val;
|
|
||||||
},
|
|
||||||
|
|
||||||
getUserNmae(state, data) {
|
|
||||||
state.userName = data;
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
|
|
||||||
},
|
|
||||||
modules: {},
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
export const piniaStore = createPinia();
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import { ref } from 'vue'
|
|
||||||
import { defineStore } from "pinia"
|
|
||||||
export const usePiniaState = defineStore('pinia', ()=>{
|
|
||||||
const userName = ref('')
|
|
||||||
const getUserNmae = (data) => {
|
|
||||||
userName.value = data
|
|
||||||
}
|
|
||||||
return { userName, getUserNmae}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// export const usePiniaState = defineStore({
|
|
||||||
// id: 'textPinia',
|
|
||||||
// state: () => {
|
|
||||||
// return {
|
|
||||||
// userName: ''
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// getters: {
|
|
||||||
|
|
||||||
// },
|
|
||||||
// actions: {
|
|
||||||
// getUserNmae(data) {
|
|
||||||
// this.userName = data
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
/**
|
|
||||||
* @author TalkTao
|
|
||||||
* @description 接口封装
|
|
||||||
*/
|
|
||||||
import { vuexStore } from "@/store/index";
|
|
||||||
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, Method } from "axios";
|
|
||||||
export interface AxiosResponseProps {
|
|
||||||
code?: number;
|
|
||||||
status?: number;
|
|
||||||
data?: any;
|
|
||||||
datas?: any;
|
|
||||||
msg?: string | null;
|
|
||||||
}
|
|
||||||
class HttpRequest {
|
|
||||||
private readonly baseURL: string;
|
|
||||||
private readonly withCredentials: boolean;
|
|
||||||
private readonly timeout: number;
|
|
||||||
constructor() {
|
|
||||||
//获取当前环境的api地址
|
|
||||||
this.baseURL = import.meta.env.VITE_BASE_URL as string;
|
|
||||||
this.withCredentials = true;
|
|
||||||
this.timeout = 1000 * 60;
|
|
||||||
}
|
|
||||||
//初始化get请求
|
|
||||||
getInitConfig(): AxiosRequestConfig {
|
|
||||||
return {
|
|
||||||
baseURL: this.baseURL,
|
|
||||||
withCredentials: this.withCredentials,
|
|
||||||
timeout: this.timeout,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
interceptors(instance: AxiosInstance) {
|
|
||||||
let requestList = [];
|
|
||||||
const setLoadingToFalse = response => {
|
|
||||||
|
|
||||||
requestList
|
|
||||||
.filter(item => item.url == response.config.url && item.method == response.config.method)
|
|
||||||
.forEach(item => (item.isLoading = false));
|
|
||||||
|
|
||||||
//所有请求都加载完才让加载提示消失
|
|
||||||
if (requestList.every(item => !item.isLoading)) vuexStore.commit("changeIsLoading", false);
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
instance.interceptors.request.use(
|
|
||||||
(config: any) => {
|
|
||||||
|
|
||||||
let ignoreLoadingUrls = ["/login"];
|
|
||||||
|
|
||||||
if (!ignoreLoadingUrls.includes(config.url)) {
|
|
||||||
|
|
||||||
if (requestList.length < 10) {
|
|
||||||
requestList.unshift({ ...config, isLoading: true });
|
|
||||||
} else {
|
|
||||||
requestList = [...requestList.slice(0, 9), { ...config, isLoading: true }];
|
|
||||||
}
|
|
||||||
vuexStore.commit("changeIsLoading", true);
|
|
||||||
}
|
|
||||||
return config;
|
|
||||||
},
|
|
||||||
error => Promise.reject(error + '请求错误')
|
|
||||||
);
|
|
||||||
|
|
||||||
instance.interceptors.response.use(
|
|
||||||
response => {
|
|
||||||
setLoadingToFalse(response);
|
|
||||||
return response.data;
|
|
||||||
},
|
|
||||||
error => {
|
|
||||||
if (error.response.status == 301) {
|
|
||||||
vuexStore.commit("changeLoginModalVisible", true);
|
|
||||||
}
|
|
||||||
setLoadingToFalse(error);
|
|
||||||
return Promise.reject(error.response?.data);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
request(): AxiosInstance {
|
|
||||||
const instance = axios.create(this.getInitConfig());
|
|
||||||
this.interceptors(instance);
|
|
||||||
return instance;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const http = new HttpRequest();
|
|
||||||
export default http.request();
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { useStore } from 'vuex'
|
|
||||||
import { storeToRefs } from 'pinia'
|
|
||||||
import { usePiniaState } from '@/store/testPinia'
|
|
||||||
|
|
||||||
import logo from '@/assets/logo.png'
|
|
||||||
|
|
||||||
// vuex
|
|
||||||
// const vuexStore = useStore()
|
|
||||||
|
|
||||||
// pinia
|
|
||||||
const piniaStore = usePiniaState()
|
|
||||||
|
|
||||||
// vuex
|
|
||||||
// const userName = computed(() => vuexStore.state.userNmae)
|
|
||||||
|
|
||||||
// 通过storeToRefs方法将存储在pinia里的数据解构出来，保持state响应性
|
|
||||||
const { userName } = storeToRefs(piniaStore)
|
|
||||||
const { getUserNmae } = piniaStore
|
|
||||||
|
|
||||||
|
|
||||||
const handleBtn = () =>{
|
|
||||||
// vuex
|
|
||||||
// vuexStore.commit('userName','真乖，如果对您有帮助请在github上点个星星哦~')
|
|
||||||
|
|
||||||
// pinia
|
|
||||||
getUserNmae('真乖，如果对您有帮助请在github上点个星星哦~')
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="about">
|
|
||||||
<CustomHeader title="我的" />
|
|
||||||
<div class="wrapper">
|
|
||||||
<div class="list flex-center py-8 flex-column">
|
|
||||||
<span class="logo">
|
|
||||||
<van-image width="150" :src="logo" />
|
|
||||||
</span>
|
|
||||||
<span class="logo fs-1 py-3 opacity-75">VUE3 H5开发模板</span>
|
|
||||||
<span class="fs-6 py-3 opacity-75">
|
|
||||||
项目地址：
|
|
||||||
<a href="https://github.com/talktao/Vue3-Vite-Vant-TS-H5">https://github.com/talktao/Vue3-Vite-Vant-TS-H5</a>
|
|
||||||
</span>
|
|
||||||
<span class="fs-3 py-3 opacity-75">项目作者：talktao</span>
|
|
||||||
<span class="fs-3 py-3 opacity-75">
|
|
||||||
{{ userName }}
|
|
||||||
<van-button v-if="userName == ''" color="#f50" size="small" @click="handleBtn">点我有魔法~</van-button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { computed, onMounted, reactive, ref, toRefs } from "vue";
|
|
||||||
import { getList } from "@/api/home";
|
|
||||||
import logo from "@/assets/logo.png";
|
|
||||||
|
|
||||||
const useShowList = () => {
|
|
||||||
const state = reactive({
|
|
||||||
list: [
|
|
||||||
{ title: "vite" },
|
|
||||||
{ title: "rem移动端适配" },
|
|
||||||
{ title: "VantUI 组件按需加载" },
|
|
||||||
{ title: "Sass 全局样式" },
|
|
||||||
{ title: "Vuex 状态管理" },
|
|
||||||
{ title: "Pinia 状态管理" },
|
|
||||||
{ title: "Axios 封装及接口管理" },
|
|
||||||
{ title: "Vue-router" },
|
|
||||||
{ title: "vite.config.ts 基础配置" },
|
|
||||||
{ title: "检查文件中的env路径" },
|
|
||||||
{ title: "配置 proxy 跨域" },
|
|
||||||
{ title: "配置 alias 别名" },
|
|
||||||
{ title: "Eslint+Pettier 统一开发规范" },
|
|
||||||
{ title: "批量全局注册公共组件" },
|
|
||||||
],
|
|
||||||
});
|
|
||||||
return toRefs(state);
|
|
||||||
};
|
|
||||||
const { list } = useShowList();
|
|
||||||
|
|
||||||
// 请求真实数据
|
|
||||||
const get = async () => {
|
|
||||||
const result = await getList();
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
get();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<CustomHeader title="首页" />
|
|
||||||
<div class="py-3 px-3">
|
|
||||||
<div class="title py-2 flex-start align-items-center">
|
|
||||||
<van-image width="36" :src="logo" />
|
|
||||||
<span class="fs-1 px-5">Vue3+TS H5开发模板</span>
|
|
||||||
</div>
|
|
||||||
<div class="subTitle px-3 fs-3 opacity-50">
|
|
||||||
A Vue3 h5 template with Vant UI
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="py-5">
|
|
||||||
<van-list finished-text="没有更多了">
|
|
||||||
<van-cell
|
|
||||||
v-for="(item, index) in list"
|
|
||||||
:key="index"
|
|
||||||
:title="item.title"
|
|
||||||
icon="success"
|
|
||||||
/>
|
|
||||||
</van-list>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
h1 {
|
|
||||||
display: block;
|
|
||||||
font-size: 40px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
li {
|
|
||||||
display: block;
|
|
||||||
font-size: 20px;
|
|
||||||
padding: 20px 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,175 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, reactive, toRefs } from 'vue'
|
|
||||||
|
|
||||||
// 搜索相关
|
|
||||||
const searchState = () => {
|
|
||||||
const state = reactive({
|
|
||||||
value: '', // 搜索input框的值
|
|
||||||
isSearch: true, // 是否显示历史搜索
|
|
||||||
goodsList: [], // 根据搜索关键字返回的商品数据
|
|
||||||
titleText: '搜索',
|
|
||||||
scrollTop: 0 // 获取滚动高度
|
|
||||||
})
|
|
||||||
return toRefs(state)
|
|
||||||
}
|
|
||||||
const {value, isSearch, goodsList, titleText, scrollTop} = searchState()
|
|
||||||
|
|
||||||
const active = ref(0) // tab切换默认值
|
|
||||||
|
|
||||||
let testData = [
|
|
||||||
{id:1,title:'四件套', price: 999},
|
|
||||||
{id:2,title:'被子', price: 555},
|
|
||||||
{id:3,title:'枕头', price: 888},
|
|
||||||
]
|
|
||||||
|
|
||||||
// 获取搜索成功的数据
|
|
||||||
const getSearchResult = (params) => {
|
|
||||||
console.log(params,'params');
|
|
||||||
// 接口
|
|
||||||
}
|
|
||||||
|
|
||||||
// 点击搜索的回调
|
|
||||||
const handleSearch = (e) => {
|
|
||||||
getSearchResult(e)
|
|
||||||
console.log(e,'eeeeeehandleSearch');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 切换tab分类标签的回调
|
|
||||||
const handleTab = (e) => {
|
|
||||||
// getSearchResult({keywords:value.value,searchValue: e.name})
|
|
||||||
// console.log(e,'etabs');
|
|
||||||
switch (e.name) {
|
|
||||||
case 0:
|
|
||||||
testData = testData
|
|
||||||
console.log(testData,'000000000');
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
testData = testData
|
|
||||||
console.log(testData,'111111111');
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
testData = testData.sort((a,b) => a.price - b.price)
|
|
||||||
console.log(testData,'222222222');
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
testData = testData.sort((a,b) => b.price - a.price)
|
|
||||||
console.log(testData,'33333333333');
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="search d-flex flex-column justify-content-start">
|
|
||||||
<!-- 头部搜索 -->
|
|
||||||
<van-sticky>
|
|
||||||
<CustomHeader title="搜索" leftIcon="arrow-left" leftText=""/>
|
|
||||||
<form action="javascript:return true">
|
|
||||||
<van-search
|
|
||||||
ref="search"
|
|
||||||
@focus="isSearch = true"
|
|
||||||
placeholder="请输入搜索文字"
|
|
||||||
shape="round"
|
|
||||||
v-model="value"
|
|
||||||
show-action
|
|
||||||
@click="isSearch = true"
|
|
||||||
@search="handleSearch(value)"
|
|
||||||
:autofocus="false"
|
|
||||||
>
|
|
||||||
<template #action>
|
|
||||||
<div class="search_Btn" @click="handleSearch(value)">搜索</div>
|
|
||||||
</template>
|
|
||||||
</van-search>
|
|
||||||
</form>
|
|
||||||
<van-tabs v-model:active="active" @click-tab="handleTab">
|
|
||||||
<van-tab title="综合"></van-tab>
|
|
||||||
<van-tab title="销量"></van-tab>
|
|
||||||
<van-tab title="价格升序"></van-tab>
|
|
||||||
<van-tab title="价格降序"></van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
</van-sticky>
|
|
||||||
<!-- 商品列表展示 -->
|
|
||||||
<div class="card_Box mrn d-flex flex-column justify-content-start">
|
|
||||||
<div v-for="item in testData" :key="item.id">
|
|
||||||
<div class="list_content d-flex justify-content-between align-items-center">
|
|
||||||
<div class="left">
|
|
||||||
<van-image radius="14" width="130" height='120' fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" >
|
|
||||||
<template v-slot:loading>
|
|
||||||
<van-loading type="spinner" size="20" />
|
|
||||||
</template>
|
|
||||||
<template v-slot:error>
|
|
||||||
<van-image></van-image>
|
|
||||||
</template>
|
|
||||||
</van-image>
|
|
||||||
</div>
|
|
||||||
<div class="right d-flex flex-column justify-content-around w-100 h-100 ps-4 fs-4">
|
|
||||||
<div>{{item.title}}</div>
|
|
||||||
<div>副标题xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
|
|
||||||
<div class="price">价格：￥{{item.price}}</div>
|
|
||||||
<div>{{item.id}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.search {
|
|
||||||
overflow: hidden;
|
|
||||||
.search_Box {
|
|
||||||
padding: 4px 10px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
background-color: white;
|
|
||||||
>div:nth-child(1){
|
|
||||||
width: 1rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: #5f656b;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
>div:nth-child(2) {
|
|
||||||
width: calc(100% - 8vw);
|
|
||||||
.search_Btn {
|
|
||||||
color: #b91c3b;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.mrn {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
>div:nth-child(1){
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.list_content{
|
|
||||||
height: 32vw;
|
|
||||||
/* background-color: #f5f5f5; */
|
|
||||||
border-radius: 10px;
|
|
||||||
margin: 5px;
|
|
||||||
padding: 0 10px;
|
|
||||||
.left {
|
|
||||||
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
overflow: hidden;
|
|
||||||
>div{
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.price{
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user