Skip to content

B
blindBox-vue
Commit 2699e4ab by haojie
Options

1

parent a06a490c
Showing with 1220 additions and 155 deletions
package-lock.json
...@@ -19,11 +19,14 @@ ...@@ -19,11 +19,14 @@
"@types/node": "^18.14.0", "@types/node": "^18.14.0",
"@vitejs/plugin-vue": "^4.0.0", "@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^3.0.0", "@vitejs/plugin-vue-jsx": "^3.0.0",
"axios": "^1.3.4",
"less": "^4.1.3", "less": "^4.1.3",
"terser": "^5.16.5",
"typescript": "^4.9.3", "typescript": "^4.9.3",
"vite": "^4.1.0", "vite": "^4.1.0",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-svg-loader": "^4.0.0", "vite-svg-loader": "^4.0.0",
"vue-clipboard3": "^2.0.0",
"vue-tsc": "^1.0.24" "vue-tsc": "^1.0.24"
} }
}, },
...@@ -937,6 +940,30 @@ ...@@ -937,6 +940,30 @@
"node": ">=6.0.0" "node": ">=6.0.0"
} }
}, },
"node_modules/@jridgewell/source-map": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
"integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
"dev": true,
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.0",
"@jridgewell/trace-mapping": "^0.3.9"
}
},
"node_modules/@jridgewell/source-map/node_modules/@jridgewell/gen-mapping": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
"integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
"dev": true,
"dependencies": {
"@jridgewell/set-array": "^1.0.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
"@jridgewell/trace-mapping": "^0.3.9"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/sourcemap-codec": { "node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.14", "version": "1.4.14",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
...@@ -1220,6 +1247,18 @@ ...@@ -1220,6 +1247,18 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
"integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==" "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
}, },
"node_modules/acorn": {
"version": "8.8.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
"integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
"dev": true,
"bin": {
"acorn": "bin/acorn"
},
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/ansi-styles": { "node_modules/ansi-styles": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
...@@ -1232,6 +1271,23 @@ ...@@ -1232,6 +1271,23 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"dev": true
},
"node_modules/axios": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
"dev": true,
"dependencies": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/balanced-match": { "node_modules/balanced-match": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
...@@ -1281,6 +1337,12 @@ ...@@ -1281,6 +1337,12 @@
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
} }
}, },
"node_modules/buffer-from": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
"dev": true
},
"node_modules/camelcase": { "node_modules/camelcase": {
"version": "6.3.0", "version": "6.3.0",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
...@@ -1323,6 +1385,17 @@ ...@@ -1323,6 +1385,17 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/clipboard": {
"version": "2.0.11",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
"dev": true,
"dependencies": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"node_modules/color-convert": { "node_modules/color-convert": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
...@@ -1338,6 +1411,18 @@ ...@@ -1338,6 +1411,18 @@
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
"dev": true "dev": true
}, },
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dev": true,
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": { "node_modules/commander": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
...@@ -1472,6 +1557,21 @@ ...@@ -1472,6 +1557,21 @@
} }
} }
}, },
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"dev": true,
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
"dev": true
},
"node_modules/dom-serializer": { "node_modules/dom-serializer": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
...@@ -1618,6 +1718,40 @@ ...@@ -1618,6 +1718,40 @@
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
}, },
"node_modules/follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
"dev": true,
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dev": true,
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fs-extra": { "node_modules/fs-extra": {
"version": "10.1.0", "version": "10.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
...@@ -1670,6 +1804,15 @@ ...@@ -1670,6 +1804,15 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
"dev": true,
"dependencies": {
"delegate": "^3.1.2"
}
},
"node_modules/graceful-fs": { "node_modules/graceful-fs": {
"version": "4.2.10", "version": "4.2.10",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
...@@ -1895,6 +2038,27 @@ ...@@ -1895,6 +2038,27 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true,
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/minimatch": { "node_modules/minimatch": {
"version": "6.2.0", "version": "6.2.0",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz",
...@@ -2087,6 +2251,12 @@ ...@@ -2087,6 +2251,12 @@
"node": "^10 || ^12 || >=14" "node": "^10 || ^12 || >=14"
} }
}, },
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"dev": true
},
"node_modules/prr": { "node_modules/prr": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
...@@ -2146,6 +2316,12 @@ ...@@ -2146,6 +2316,12 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"node_modules/select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==",
"dev": true
},
"node_modules/semver": { "node_modules/semver": {
"version": "6.3.0", "version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
...@@ -2176,6 +2352,16 @@ ...@@ -2176,6 +2352,16 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/source-map-support": {
"version": "0.5.21",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
"dev": true,
"dependencies": {
"buffer-from": "^1.0.0",
"source-map": "^0.6.0"
}
},
"node_modules/sourcemap-codec": { "node_modules/sourcemap-codec": {
"version": "1.4.8", "version": "1.4.8",
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
...@@ -2270,6 +2456,36 @@ ...@@ -2270,6 +2456,36 @@
"vue": ">=3.1.0" "vue": ">=3.1.0"
} }
}, },
"node_modules/terser": {
"version": "5.16.5",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.16.5.tgz",
"integrity": "sha512-qcwfg4+RZa3YvlFh0qjifnzBHjKGNbtDo9yivMqMFDy9Q6FSaQWSB/j1xKhsoUFJIqDOM3TsN6D5xbrMrFcHbg==",
"dev": true,
"dependencies": {
"@jridgewell/source-map": "^0.3.2",
"acorn": "^8.5.0",
"commander": "^2.20.0",
"source-map-support": "~0.5.20"
},
"bin": {
"terser": "bin/terser"
},
"engines": {
"node": ">=10"
}
},
"node_modules/terser/node_modules/commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
},
"node_modules/tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
"dev": true
},
"node_modules/tinycolor2": { "node_modules/tinycolor2": {
"version": "1.6.0", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
...@@ -2501,6 +2717,15 @@ ...@@ -2501,6 +2717,15 @@
"@vue/shared": "3.2.47" "@vue/shared": "3.2.47"
} }
}, },
"node_modules/vue-clipboard3": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz",
"integrity": "sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==",
"dev": true,
"dependencies": {
"clipboard": "^2.0.6"
}
},
"node_modules/vue-i18n": { "node_modules/vue-i18n": {
"version": "9.2.2", "version": "9.2.2",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz", "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
...@@ -3132,6 +3357,29 @@ ...@@ -3132,6 +3357,29 @@
"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
"dev": true "dev": true
}, },
"@jridgewell/source-map": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
"integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
"dev": true,
"requires": {
"@jridgewell/gen-mapping": "^0.3.0",
"@jridgewell/trace-mapping": "^0.3.9"
},
"dependencies": {
"@jridgewell/gen-mapping": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
"integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
"dev": true,
"requires": {
"@jridgewell/set-array": "^1.0.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
"@jridgewell/trace-mapping": "^0.3.9"
}
}
}
},
"@jridgewell/sourcemap-codec": { "@jridgewell/sourcemap-codec": {
"version": "1.4.14", "version": "1.4.14",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
...@@ -3389,6 +3637,12 @@ ...@@ -3389,6 +3637,12 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
"integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==" "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
}, },
"acorn": {
"version": "8.8.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
"integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
"dev": true
},
"ansi-styles": { "ansi-styles": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
...@@ -3398,6 +3652,23 @@ ...@@ -3398,6 +3652,23 @@
"color-convert": "^1.9.0" "color-convert": "^1.9.0"
} }
}, },
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"dev": true
},
"axios": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
"dev": true,
"requires": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"balanced-match": { "balanced-match": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
...@@ -3431,6 +3702,12 @@ ...@@ -3431,6 +3702,12 @@
"update-browserslist-db": "^1.0.10" "update-browserslist-db": "^1.0.10"
} }
}, },
"buffer-from": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
"dev": true
},
"camelcase": { "camelcase": {
"version": "6.3.0", "version": "6.3.0",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
...@@ -3454,6 +3731,17 @@ ...@@ -3454,6 +3731,17 @@
"supports-color": "^5.3.0" "supports-color": "^5.3.0"
} }
}, },
"clipboard": {
"version": "2.0.11",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
"dev": true,
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"color-convert": { "color-convert": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
...@@ -3469,6 +3757,15 @@ ...@@ -3469,6 +3757,15 @@
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
"dev": true "dev": true
}, },
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dev": true,
"requires": {
"delayed-stream": "~1.0.0"
}
},
"commander": { "commander": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
...@@ -3571,6 +3868,18 @@ ...@@ -3571,6 +3868,18 @@
"ms": "2.1.2" "ms": "2.1.2"
} }
}, },
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"dev": true
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
"dev": true
},
"dom-serializer": { "dom-serializer": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
...@@ -3677,6 +3986,23 @@ ...@@ -3677,6 +3986,23 @@
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
}, },
"follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
"dev": true
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dev": true,
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"fs-extra": { "fs-extra": {
"version": "10.1.0", "version": "10.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
...@@ -3713,6 +4039,15 @@ ...@@ -3713,6 +4039,15 @@
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
"dev": true "dev": true
}, },
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
"dev": true,
"requires": {
"delegate": "^3.1.2"
}
},
"graceful-fs": { "graceful-fs": {
"version": "4.2.10", "version": "4.2.10",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
...@@ -3879,6 +4214,21 @@ ...@@ -3879,6 +4214,21 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"requires": {
"mime-db": "1.52.0"
}
},
"minimatch": { "minimatch": {
"version": "6.2.0", "version": "6.2.0",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz",
...@@ -4000,6 +4350,12 @@ ...@@ -4000,6 +4350,12 @@
"source-map-js": "^1.0.2" "source-map-js": "^1.0.2"
} }
}, },
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"dev": true
},
"prr": { "prr": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
...@@ -4046,6 +4402,12 @@ ...@@ -4046,6 +4402,12 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==",
"dev": true
},
"semver": { "semver": {
"version": "6.3.0", "version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
...@@ -4067,6 +4429,16 @@ ...@@ -4067,6 +4429,16 @@
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
}, },
"source-map-support": {
"version": "0.5.21",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
"dev": true,
"requires": {
"buffer-from": "^1.0.0",
"source-map": "^0.6.0"
}
},
"sourcemap-codec": { "sourcemap-codec": {
"version": "1.4.8", "version": "1.4.8",
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
...@@ -4135,6 +4507,32 @@ ...@@ -4135,6 +4507,32 @@
"validator": "^13.5.1" "validator": "^13.5.1"
} }
}, },
"terser": {
"version": "5.16.5",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.16.5.tgz",
"integrity": "sha512-qcwfg4+RZa3YvlFh0qjifnzBHjKGNbtDo9yivMqMFDy9Q6FSaQWSB/j1xKhsoUFJIqDOM3TsN6D5xbrMrFcHbg==",
"dev": true,
"requires": {
"@jridgewell/source-map": "^0.3.2",
"acorn": "^8.5.0",
"commander": "^2.20.0",
"source-map-support": "~0.5.20"
},
"dependencies": {
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
}
}
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
"dev": true
},
"tinycolor2": { "tinycolor2": {
"version": "1.6.0", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
...@@ -4276,6 +4674,15 @@ ...@@ -4276,6 +4674,15 @@
"@vue/shared": "3.2.47" "@vue/shared": "3.2.47"
} }
}, },
"vue-clipboard3": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz",
"integrity": "sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==",
"dev": true,
"requires": {
"clipboard": "^2.0.6"
}
},
"vue-i18n": { "vue-i18n": {
"version": "9.2.2", "version": "9.2.2",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz", "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
......
package.json
...@@ -9,22 +9,25 @@ ...@@ -9,22 +9,25 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@metamask/detect-provider": "^1.2.0",
"pinia": "^2.0.32", "pinia": "^2.0.32",
"tdesign-vue-next": "^1.0.9", "tdesign-vue-next": "^1.0.9",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"@metamask/detect-provider": "^1.2.0",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^18.14.0", "@types/node": "^18.14.0",
"@vitejs/plugin-vue": "^4.0.0", "@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^3.0.0", "@vitejs/plugin-vue-jsx": "^3.0.0",
"axios": "^1.3.4",
"less": "^4.1.3", "less": "^4.1.3",
"terser": "^5.16.5",
"typescript": "^4.9.3", "typescript": "^4.9.3",
"vite": "^4.1.0", "vite": "^4.1.0",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-svg-loader": "^4.0.0", "vite-svg-loader": "^4.0.0",
"vue-clipboard3": "^2.0.0",
"vue-tsc": "^1.0.24" "vue-tsc": "^1.0.24"
} }
} }
src/components/Loading/index.less
...@@ -4,6 +4,12 @@ ...@@ -4,6 +4,12 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(240, 240, 240, 0.2);
.loader { .loader {
border-top: 0.3em solid rgba(0, 0, 0, 0.1); border-top: 0.3em solid rgba(0, 0, 0, 0.1);
border-right: 0.3em solid rgba(0, 0, 0, 0.1); border-right: 0.3em solid rgba(0, 0, 0, 0.1);
......
src/components/RadioGroup/index.tsx
...@@ -6,14 +6,17 @@ export default defineComponent({ ...@@ -6,14 +6,17 @@ export default defineComponent({
type: Array as PropType<any[]>, type: Array as PropType<any[]>,
default: [], default: [],
}, },
modelValue: String, modelValue: {
type: Number || String,
}, },
emits: ['update:modelValue'], },
emits: ['update:modelValue', 'change'],
setup(props, { emit }) { setup(props, { emit }) {
const curbtn = ref(props.modelValue); const curbtn = ref<string | number | undefined>(props.modelValue);
const CurrentChange = (value: string) => { const CurrentChange = (value: string | number) => {
curbtn.value = value; curbtn.value = value;
emit('update:modelValue', value); emit('change', value);
// emit('update:modelValue', value);
}; };
return () => ( return () => (
<div class="custom-radio-group"> <div class="custom-radio-group">
......
src/hook/useCopy.ts 0 → 100644
import { useI18n } from 'vue-i18n';
import useClipboard from 'vue-clipboard3';
import { MessagePlugin } from 'tdesign-vue-next';
export default function () {
const { t } = useI18n();
const doCopy = (keyword: string) => {
if (!keyword) {
return;
}
const { toClipboard } = useClipboard();
toClipboard(keyword)
.then(() => {
MessagePlugin.closeAll();
MessagePlugin.success('复制成功');
})
.catch((e) => {
MessagePlugin.closeAll();
MessagePlugin.error('复制失败');
});
};
return {
doCopy,
};
}
src/language/cn.ts
...@@ -12,7 +12,8 @@ const cn = { ...@@ -12,7 +12,8 @@ const cn = {
MyBlindBox: '我的盲盒', MyBlindBox: '我的盲盒',
BlindBoxactivity: '盲盒活动', BlindBoxactivity: '盲盒活动',
inprogress: '进行中', inprogress: '进行中',
unfinish: '未完成', unfinish: '未开始',
Unfinished: '未完成',
losingLottery: '未中奖', losingLottery: '未中奖',
Ballot: '中签', Ballot: '中签',
Finished: '已完成', Finished: '已完成',
...@@ -23,6 +24,8 @@ const cn = { ...@@ -23,6 +24,8 @@ const cn = {
second: '秒', second: '秒',
price: '价格', price: '价格',
NumberBuyers: '购买人数', NumberBuyers: '购买人数',
success: '成功',
Failed: '失败',
}, },
button: { button: {
back: '返回', back: '返回',
......
src/language/en.ts
...@@ -12,7 +12,8 @@ const en = { ...@@ -12,7 +12,8 @@ const en = {
MyBlindBox: 'My Blind Box', MyBlindBox: 'My Blind Box',
BlindBoxactivity: 'Blind box activity', BlindBoxactivity: 'Blind box activity',
inprogress: 'underway', inprogress: 'underway',
unfinish: 'Unfinish', unfinish: 'Not started',
Unfinished: 'Unfinished',
losingLottery: 'losing lottery', losingLottery: 'losing lottery',
Ballot: 'Winning Lottery', Ballot: 'Winning Lottery',
Finished: 'Finished', Finished: 'Finished',
...@@ -23,6 +24,8 @@ const en = { ...@@ -23,6 +24,8 @@ const en = {
second: 'Second', second: 'Second',
price: 'Price', price: 'Price',
NumberBuyers: 'Number of buyers', NumberBuyers: 'Number of buyers',
success: 'Success',
Failed: 'Failed',
}, },
button: { button: {
back: 'Back', back: 'Back',
......
src/layout/FoxWallet/index.tsx
...@@ -19,6 +19,9 @@ export default defineComponent({ ...@@ -19,6 +19,9 @@ export default defineComponent({
}; };
const { t } = useI18n(); const { t } = useI18n();
const openDialog = () => { const openDialog = () => {
if (userAddress.address) {
return;
}
foxDialog.dialog = !foxDialog.dialog; foxDialog.dialog = !foxDialog.dialog;
}; };
const getText = () => { const getText = () => {
......
src/layout/index.tsx
...@@ -82,6 +82,13 @@ export default defineComponent({ ...@@ -82,6 +82,13 @@ export default defineComponent({
navStatus.value = 'close'; navStatus.value = 'close';
navTextShow.value = false; navTextShow.value = false;
}; };
// 判断当前路由
const getCurRoute = (value: string) => {
if (value == '/raffle' && currentRoute.value.indexOf('/raffle') != -1) {
return 'nav-icon-active';
}
return currentRoute.value == value ? 'nav-icon-active' : '';
};
const NavChange = (item: any) => { const NavChange = (item: any) => {
if (item.disable) { if (item.disable) {
return; return;
...@@ -135,12 +142,7 @@ export default defineComponent({ ...@@ -135,12 +142,7 @@ export default defineComponent({
'default-line', 'default-line',
]} ]}
></div> ></div>
<div <div class={['nav-icon', getCurRoute(item.value)]}>
class={[
'nav-icon',
currentRoute.value == item.value ? 'nav-icon-active' : '',
]}
>
{item.icon} {item.icon}
<span <span
class="nav-text" class="nav-text"
......
src/main.ts
...@@ -5,6 +5,8 @@ import router from './router'; ...@@ -5,6 +5,8 @@ import router from './router';
import i18n from './language'; import i18n from './language';
import { createPinia } from 'pinia'; import { createPinia } from 'pinia';
import Tdesign from './utils/Tdesign'; import Tdesign from './utils/Tdesign';
// 引入组件库全局样式资源
import 'tdesign-vue-next/es/style/index.css';
let app = createApp(App); let app = createApp(App);
app.use(router); app.use(router);
app.use(i18n); app.use(i18n);
......
src/pages/raffle/components/Activity/index.less
.custom-activity-box { .custom-activity-box {
position: relative;
min-height: 600px;
.header { .header {
border-bottom: 2px solid #e9e9e9; border-bottom: 2px solid #e9e9e9;
transform: rotate(0.06deg); transform: rotate(0.06deg);
......
src/pages/raffle/components/Activity/index.tsx
import { computed, defineComponent, reactive, ref } from 'vue'; import {
computed,
defineComponent,
onMounted,
reactive,
ref,
watch,
} from 'vue';
import './index.less'; import './index.less';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import CustomButton from '@/components/button'; import CustomButton from '@/components/button';
import Card from '../card'; import Card from '../card';
import ActivityDetail from '../ActivityDetail'; import ActivityDetail from '../ActivityDetail';
import { getCurrentDevice } from '@/utils/tool'; import { getCurrentDevice } from '@/utils/tool';
import { getBlindBoxList } from '@/utils/api/BlindBox';
import Loading from '@/components/Loading';
export default defineComponent({ export default defineComponent({
props: { props: {
modelValue: String, modelValue: String,
...@@ -12,51 +21,15 @@ export default defineComponent({ ...@@ -12,51 +21,15 @@ export default defineComponent({
emits: ['update:modelValue'], emits: ['update:modelValue'],
setup(props, { emit }) { setup(props, { emit }) {
const { t } = useI18n(); const { t } = useI18n();
const loading = ref(false);
// 详情内容
const detailObj = ref({});
// 当前是否打开详情页面 // 当前是否打开详情页面
const isDetailPage = ref(false); const isDetailPage = ref(false);
const activityList = reactive({ const activityList = reactive<{
list: [ list: any[];
{ }>({
img: new URL('@/assets/img/test.png', import.meta.url).href, list: [],
introduction: '5人抽奖一人必中',
status: '1',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
countDown: 60000000,
index: 0,
},
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '2',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
countDown: 60000000,
index: 1,
},
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '3',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
countDown: 60000000,
index: 2,
},
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '4',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
countDown: 60000000,
index: 3,
},
],
}); });
const onBack = () => { const onBack = () => {
emit('update:modelValue', 'mybox'); emit('update:modelValue', 'mybox');
...@@ -64,6 +37,8 @@ export default defineComponent({ ...@@ -64,6 +37,8 @@ export default defineComponent({
const onCardClick = (value: number) => { const onCardClick = (value: number) => {
// 打开详情 // 打开详情
isDetailPage.value = true; isDetailPage.value = true;
// 详情内容
detailObj.value = activityList.list[value];
}; };
const backList = () => { const backList = () => {
isDetailPage.value = !isDetailPage.value; isDetailPage.value = !isDetailPage.value;
...@@ -75,6 +50,30 @@ export default defineComponent({ ...@@ -75,6 +50,30 @@ export default defineComponent({
} }
return true; return true;
}); });
const getList = async () => {
try {
loading.value = true;
let res: any = await getBlindBoxList();
res.data.forEach((item: any, index: number) => {
item.index = index;
});
activityList.list = res.data;
loading.value = false;
} catch (e) {
console.log(e);
loading.value = false;
}
};
onMounted(() => {
getList();
});
const onUpdateTime = (item: any) => {
/**
* value--倒计时
* index--数组下标
*/
activityList.list[item.index].countdown = item.value;
};
return () => ( return () => (
<div class="custom-activity-box"> <div class="custom-activity-box">
<div class="header"> <div class="header">
...@@ -100,14 +99,16 @@ export default defineComponent({ ...@@ -100,14 +99,16 @@ export default defineComponent({
<Card <Card
info={item} info={item}
Countdown={true} Countdown={true}
onUpdateTime={onUpdateTime}
onCardClick={onCardClick} onCardClick={onCardClick}
></Card> ></Card>
))} ))}
</div> </div>
<div v-show={isDetailPage.value}> <div v-show={isDetailPage.value}>
<ActivityDetail></ActivityDetail> <ActivityDetail info={detailObj.value}></ActivityDetail>
</div> </div>
</div> </div>
<Loading v-show={loading.value}></Loading>
</div> </div>
); );
}, },
......
src/pages/raffle/components/ActivityDetail/index.less
...@@ -105,6 +105,7 @@ ...@@ -105,6 +105,7 @@
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
color: #000000; color: #000000;
margin-bottom: 12px;
} }
} }
} }
src/pages/raffle/components/ActivityDetail/index.tsx
import { defineComponent } from 'vue'; import { defineComponent, PropType, ref } from 'vue';
import './index.less'; import './index.less';
import CustomCountDown from '../CountDown'; import CustomCountDown from '../CountDown';
import OpenSvg from '@/assets/svg/raffle/open.svg'; import OpenSvg from '@/assets/svg/raffle/open.svg';
import { useFoxDialog } from '@/store/dialog'; import { useFoxDialog } from '@/store/dialog';
import { useFoxWallet } from '@/store/FoxWallet';
import { MessagePlugin } from 'tdesign-vue-next';
import InviteDialog from '../InviteDialog';
import {
buy_blindBox,
IntervalCheckOrder,
useCanNotBuy,
} from '@/utils/api/BlindBox';
import { useRoute } from 'vue-router';
export default defineComponent({ export default defineComponent({
props: {
info: {
type: Object as PropType<any>,
default: {},
},
},
setup(props) { setup(props) {
// 收款地址--先写死，之后从接口获取
let MyAddress = '0x51eF357cf7204DB2a6e31750817F709a10c86f37';
const route = useRoute();
const RouteParams = route.params;
const testImg = new URL('@/assets/img/test.png', import.meta.url).href; const testImg = new URL('@/assets/img/test.png', import.meta.url).href;
const testTime = 60000000; // 邀请弹窗状态
const InviteVisible = ref(false);
let InterVal: any = null;
// 用户hash
const UserHash = ref('');
const { $state: foxDialog } = useFoxDialog(); const { $state: foxDialog } = useFoxDialog();
const { $state: FoxWallet } = useFoxWallet();
// 打开连接弹窗
const openDialog = () => {
foxDialog.dialog = true;
};
// 检测充值到账
const Check = async () => {
try {
let res: any = await IntervalCheckOrder({
hash: UserHash.value,
price: props.info.price,
form: FoxWallet.address,
});
if (res.data == true) {
closeInterval();
MessagePlugin.success('购买成功');
}
} catch (e) {
console.log(e);
}
};
// 开启轮询
const openCheckInterval = () => {
InterVal = window.setInterval(() => {
Check();
}, 3000);
};
// 关闭轮询
const closeInterval = () => {
if (InterVal) {
window.clearInterval(InterVal);
}
};
// 发起交易
const recharge = async (hash: string = '', price: number = 0) => {
let params: any = {
address: FoxWallet.address,
hash: hash,
id: props.info.id,
};
// 判断是否为分享的链接
if (
RouteParams.code &&
RouteParams.id &&
typeof RouteParams.id == 'string'
) {
params.invite_code = RouteParams.code;
params.Invitees_box_id = parseFloat(RouteParams.id);
}
let res: any = await buy_blindBox(params);
if (res.code == 0) {
// 开启轮询
MessagePlugin.success('充值记录检测中...');
if (UserHash.value) {
openCheckInterval();
}
}
};
// 支付
const Payment = () => {
let eth: any = window;
// 转换后的收款地址
let MyNewAddress = MyAddress.substring(2).padStart(64, '0');
// 实际价格--props.price
// 测试价格
// let price = 0.01;
// 转换后的数量
let newPrice = (parseInt(props.info.price) * Math.pow(10, 18))
.toString(16)
.padStart(64, '0');
// 小狐狸支付
eth.ethereum
.request({
method: 'eth_sendTransaction',
params: [
{
// 用户钱包地址
from: FoxWallet.address,
// 支付代币类型 BUSD
to: '0xCC88e86AA0E589e18ff03fB9b0449468A1EF1f4B',
// gas价格
// gasPrice: "0x12a05f200",
// gas: "0x16e360",
// 交易数据十六进制 交易0xa9059cbb 目标钱包地址(我们的钱包地址) 交易金额（十六转换）
data: '0xa9059cbb' + MyNewAddress + newPrice,
},
],
})
.then((hash: string) => {
// 交易hash
if (hash) {
UserHash.value = hash;
// 发送充值信息
recharge(hash, parseInt(props.info.price));
}
})
.catch((e: any) => {
console.log(e);
});
//
};
const getUserBuyStatus = async () => {
try {
let res: any = await useCanNotBuy({
address: FoxWallet.address,
id: props.info.id,
});
if (res.data === true) {
return true;
}
return false;
} catch (e) {
console.log(e);
return false;
}
};
// 打开邀请弹窗
const openInviteDialog = () => {
InviteVisible.value = true;
};
// 立即购买
const Buy_now = async () => {
const { info } = props;
// 地址
if (!FoxWallet.address) {
MessagePlugin.warning('请先连接钱包');
return;
}
if (info.countdown <= 0) {
MessagePlugin.warning('活动已结束');
return;
}
// 能否购买
let cannot = await getUserBuyStatus();
if (cannot) {
Payment();
} else {
MessagePlugin.closeAll();
MessagePlugin.warning('无法再购买');
}
};
return () => ( return () => (
<div class="custom-card-detail"> <div class="custom-card-detail">
<div class="detail-head"> <div class="detail-head">
<div class="detail-head-img"> <div class="detail-head-img">
<img src={testImg} alt="" /> <img src={props.info.project_icon} alt="" />
</div> </div>
<div class="detail-head-content"> <div class="detail-head-content">
<div class="title">5人抽奖一人必中</div> <div class="title">{props.info.projectName}</div>
<div class="count-down-box"> <div class="count-down-box">
<div class="label">购买倒计时</div> <div class="label">购买倒计时</div>
<div class="value"> <div class="value">
<CustomCountDown time={testTime}></CustomCountDown> <CustomCountDown time={props.info.countdown}></CustomCountDown>
</div> </div>
</div> </div>
<div class="price-and-buynum"> <div class="price-and-buynum">
<div class="price-box"> <div class="price-box">
<div class="label">价格</div> <div class="label">价格</div>
<div class="value">200 RESDAO</div> <div class="value">{props.info.price} RESDAO</div>
</div> </div>
<div class="price-box margin"> <div class="price-box margin">
<div class="label">当前购买人数</div> <div class="label">当前购买人数</div>
<div class="value">0/5</div> <div class="value">
{props.info.buy_num}/{props.info.max_participants_num}
</div>
</div> </div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="price-and-prize"> <div class="price-and-prize">
<div> <div>
<span>你将花费：</span> <span>你将花费：</span>
200 RESDAO {props.info.price} RESDAO
</div> </div>
<div> <div>
<span class="text2">中奖可获得：</span> <span class="text2">中奖可获得：</span>
600 RESDAO {props.info.price * 3} RESDAO
</div> </div>
</div> </div>
<div class="content-wallet-tooltip"> <div class="content-wallet-tooltip">
<button class="connect-wallet">连接钱包</button> {FoxWallet.address ? (
<button class="connect-wallet" onClick={Buy_now}>
立即购买
</button>
) : (
<button class="connect-wallet" onClick={openDialog}>
连接钱包
</button>
)}
<span class="text">提示：一次只能购买一次</span> <span class="text">提示：一次只能购买一次</span>
<div class="open-link"> <div class="open-link">
<span onClick={openInviteDialog}>
<OpenSvg></OpenSvg> <OpenSvg></OpenSvg>
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -55,8 +231,12 @@ export default defineComponent({ ...@@ -55,8 +231,12 @@ export default defineComponent({
<div class="content-line"></div> <div class="content-line"></div>
<div class="custom-Rules"> <div class="custom-Rules">
<div class="title">规则</div> <div class="title">规则</div>
<div class="value"></div> <div class="value" innerHTML={props.info.rules}></div>
</div> </div>
<InviteDialog
v-model={InviteVisible.value}
id={props.info.id}
></InviteDialog>
</div> </div>
); );
}, },
......
src/pages/raffle/components/CountDown/index.tsx
import { defineComponent, computed } from 'vue'; import {
defineComponent,
computed,
watch,
reactive,
onUnmounted,
ref,
} from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import './index.less'; import './index.less';
dayjs.extend(duration);
export default defineComponent({ export default defineComponent({
props: { props: {
time: { time: {
...@@ -8,11 +18,13 @@ export default defineComponent({ ...@@ -8,11 +18,13 @@ export default defineComponent({
default: 0, default: 0,
}, },
}, },
setup(props) { emits: ['updateTime'],
setup(props, { emit }) {
let Interval: any = null;
const { t } = useI18n(); const { t } = useI18n();
// 获取倒计时 const RemainingTime = ref(0);
const getCountDown = computed(() => { const countDownList = reactive({
let list: any = [ list: [
{ {
label: t('raffle.day'), label: t('raffle.day'),
value: '00', value: '00',
...@@ -29,8 +41,76 @@ export default defineComponent({ ...@@ -29,8 +41,76 @@ export default defineComponent({
label: t('raffle.second'), label: t('raffle.second'),
value: '00', value: '00',
}, },
]; ],
return list; });
// 获取倒计时
const getCountDown = computed(() => {
return countDownList.list;
});
const isMaxLength = (value: any) => {
return (value + '').length < 2;
};
// 获取当前币倒计时
const CountdownFun = (newTime: any) => {
let diffTime: any = dayjs.duration(newTime);
let day: any = diffTime.days(); //天
let hours: any = diffTime.hours(); //小时
let minutes: any = diffTime.minutes(); //分钟
let seconds: any = diffTime.seconds(); //秒
diffTime = null;
if (day < 10 && isMaxLength(day)) {
day = '0' + day + '';
}
if (hours < 10 && isMaxLength(hours)) {
hours = '0' + hours + '';
}
if (minutes < 10 && isMaxLength(minutes)) {
minutes = '0' + minutes + '';
}
if (seconds < 10 && isMaxLength(seconds)) {
seconds = '0' + seconds + '';
}
countDownList.list[0].value = day;
countDownList.list[1].value = hours;
countDownList.list[2].value = minutes;
countDownList.list[3].value = seconds;
};
// 关闭定时器
const closeInterval = () => {
if (Interval) {
window.clearInterval(Interval);
}
};
watch(
() => props.time,
(v) => {
if (v) {
// 开始倒计时
closeInterval();
RemainingTime.value = v;
CountdownFun(RemainingTime.value);
Interval = window.setInterval(() => {
if (RemainingTime.value <= 0) {
closeInterval();
return;
}
CountdownFun(RemainingTime.value);
RemainingTime.value -= 1000;
// 提交最新的倒计时
if (RemainingTime.value > 0) {
emit('updateTime', RemainingTime.value);
} else {
emit('updateTime', 0);
}
}, 1000);
}
},
{
immediate: true,
}
);
onUnmounted(() => {
closeInterval();
}); });
return () => ( return () => (
<div class="custom-countdown-box"> <div class="custom-countdown-box">
......
src/pages/raffle/components/InviteDialog/index.less 0 → 100644
.custom-invite-dialog {
.t-dialog__close {
display: flex;
align-items: center;
justify-content: center;
}
.t-dialog__body {
padding: 0;
overflow-y: hidden;
}
.invite-dialog-body {
.title {
font-weight: 400;
font-size: 18px;
color: #000000;
}
.invite-box {
width: 100%;
height: 39px;
border: 1px solid #544fa1;
border-radius: 10px;
box-sizing: border-box;
margin: 12px 0;
display: flex;
justify-content: space-between;
& > * {
height: 100%;
display: flex;
align-items: center;
padding: 0 12px;
}
.url {
font-weight: 500;
font-size: 16px;
color: #8c8c8c;
}
.copy-button {
cursor: pointer;
font-weight: 500;
font-size: 16px;
color: #000000;
border-left: 1px solid #544fa1;
user-select: none;
}
}
.current-invite-address {
font-weight: 400;
font-size: 18px;
display: flex;
flex-wrap: wrap;
.label {
color: #444444;
}
.value {
color: #000000;
}
}
.margin {
margin-top: 12px;
}
}
}
src/pages/raffle/components/InviteDialog/index.tsx 0 → 100644
import { defineComponent, ref, watch } from 'vue';
import CloseSvg from '@/assets/svg/dialog/close.svg';
import './index.less';
import { getUserInfo } from '@/utils/api/BlindBox';
import { useFoxWallet } from '@/store/FoxWallet';
import useCopy from '@/hook/useCopy';
export default defineComponent({
props: {
modelValue: Boolean,
id: Number,
},
emits: ['update:modelValue'],
setup(props, { emit }) {
const { doCopy } = useCopy();
const visible = ref(props.modelValue);
const resObj = ref<any>({});
const { $state: FoxWallet } = useFoxWallet();
const closeIcon = () => {
return <CloseSvg></CloseSvg>;
};
// 获取用户邀请码
const getUser = async () => {
try {
let res: any = await getUserInfo({
address: FoxWallet.address,
id: props.id,
});
resObj.value = res.data;
} catch (e) {
console.log(e);
}
};
watch(
() => props.modelValue,
(v) => {
visible.value = v;
if (v) {
getUser();
}
}
);
watch(
() => visible.value,
(v) => {
emit('update:modelValue', v);
}
);
return () => (
<t-dialog
v-model:visible={visible.value}
placement="center"
attach="body"
class="custom-invite-dialog"
footer={false}
header={false}
closeBtn={closeIcon}
>
<div class="invite-dialog-body">
<div class="title">你的邀请码</div>
<div class="invite-box">
<div class="url">{resObj.value.invitation_link}</div>
<div
class="copy-button"
onClick={doCopy.bind(this, resObj.value.invitation_link ?? '')}
>
复制
</div>
</div>
<div class="current-invite-address">
<div class="label">当前盲盒邀请：</div>
<div class="value">
{resObj.value.invite_list
? resObj.value.invite_list.map((item: any) => (
<span>{item}</span>
))
: ''}
</div>
</div>
<div class="current-invite-address margin">
<div class="label">提高成功概率：</div>
<div class="value">{resObj.value.rate}%</div>
</div>
</div>
</t-dialog>
);
},
});
src/pages/raffle/components/card/index.less
...@@ -13,8 +13,7 @@ ...@@ -13,8 +13,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 6px 0; margin-top: 6px;
margin: 6px 0;
white-space: nowrap; white-space: nowrap;
flex-wrap: wrap; flex-wrap: wrap;
row-gap: 6px; row-gap: 6px;
...@@ -33,7 +32,7 @@ ...@@ -33,7 +32,7 @@
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
} }
.status1 { .success {
background: rgba(18, 185, 129, 0.1); background: rgba(18, 185, 129, 0.1);
color: #12b981; color: #12b981;
} }
...@@ -41,11 +40,16 @@ ...@@ -41,11 +40,16 @@
background: rgba(126, 126, 126, 0.1); background: rgba(126, 126, 126, 0.1);
color: #7e7e7e; color: #7e7e7e;
} }
.status3 { .failed {
background: rgba(240, 84, 81, 0.08); background: rgba(240, 84, 81, 0.08);
color: #f05451; color: #f05451;
} }
} }
.box-id {
font-weight: 400;
font-size: 16px;
color: #747474;
}
.custom-card-countDown { .custom-card-countDown {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -62,7 +66,7 @@ ...@@ -62,7 +66,7 @@
.card-line-two { .card-line-two {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 6px; margin: 6px 0;
white-space: nowrap; white-space: nowrap;
flex-wrap: wrap; flex-wrap: wrap;
row-gap: 6px; row-gap: 6px;
......
src/pages/raffle/components/card/index.tsx
import { computed, defineComponent, PropType } from 'vue'; import { defineComponent, PropType } from 'vue';
import './index.less'; import './index.less';
import CustomCountDown from '../CountDown'; import CustomCountDown from '../CountDown';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
...@@ -16,38 +16,65 @@ export default defineComponent({ ...@@ -16,38 +16,65 @@ export default defineComponent({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
customStatus: {
type: Object as any,
default: {},
},
}, },
emits: ['CardClick'], /**
* 三个状态
* 未开始1
* 进行中2
* 已结束3
*/
emits: ['CardClick', 'updateTime'],
setup(props, { emit }) { setup(props, { emit }) {
const { t } = useI18n(); const { t } = useI18n();
const curStauts = () => { const curStauts = () => {
const { info } = props; const { info, customStatus } = props;
if (customStatus.title === 'true') {
if (info.is_sucess) {
// 中奖了
return t('raffle.success');
} else {
return t('raffle.Failed');
}
} else if (customStatus.title) {
// 存在自定义状态
return customStatus.title;
}
if (Object.keys(info).length) { if (Object.keys(info).length) {
switch (info.status) { if (info.status == 1) {
case '1':
return t('raffle.inprogress');
case '2':
return t('raffle.unfinish'); return t('raffle.unfinish');
case '3': } else if (info.status == 2) {
return t('raffle.losingLottery'); return t('raffle.inprogress');
case '4': } else if (info.status == 3) {
return t('raffle.Ballot'); return t('raffle.Finished');
} }
} }
}; };
const getClass = () => { const getClass = () => {
const { info } = props; const { info, customStatus } = props;
if (customStatus.title === 'true') {
if (info.is_sucess) {
// 中奖了
return 'success';
} else {
return 'failed';
}
} else if (customStatus.type) {
// 存在自定义状态
return customStatus.type;
}
if (Object.keys(info).length) { if (Object.keys(info).length) {
switch (info.status) { if (info.status == 1) {
case '1': return 'failed';
return 'status1'; } else if (info.status == 2) {
case '2': // 进行中
return 'success';
} else if (info.status == 3) {
return 'status2'; return 'status2';
case '3':
return 'status3';
case '4':
return 'status1';
} }
} }
}; };
...@@ -59,22 +86,36 @@ export default defineComponent({ ...@@ -59,22 +86,36 @@ export default defineComponent({
} }
emit('CardClick', info.index); emit('CardClick', info.index);
}; };
// 更新倒计时
const onUpdateTime = (value: number) => {
emit('updateTime', {
value: value,
index: props.info.index,
});
};
return () => ( return () => (
<div <div
class={['custom-raffle-card', props.Countdown ? 'pointer' : '']} class={[
'custom-raffle-card',
props.Countdown && props.info.status == 2 ? 'pointer' : '',
]}
onClick={CardClick} onClick={CardClick}
> >
<img class="img" src={props.info.img} alt="" /> <img class="img" src={props.info.project_icon} alt="" />
<div class="card-line-parent"> <div class="card-line-parent">
<div class="card-line-one"> <div class="card-line-one">
<span class="left-introduction">{props.info.introduction}</span> <span class="left-introduction">{props.info.projectName}</span>
<div class={['card-right-status', getClass()]}>{curStauts()}</div> <div class={['card-right-status', getClass()]}>{curStauts()}</div>
</div> </div>
<div class="box-id">#{props.info.id}</div>
{props.Countdown ? ( {props.Countdown ? (
<div class="custom-card-countDown"> <div class="custom-card-countDown">
<div class="label">{t('raffle.PurchaseCountdown')}</div> <div class="label">{t('raffle.PurchaseCountdown')}</div>
<div class="value"> <div class="value">
<CustomCountDown time={props.info.countDown}></CustomCountDown> <CustomCountDown
time={props.info.countdown}
onUpdateTime={onUpdateTime}
></CustomCountDown>
</div> </div>
</div> </div>
) : ( ) : (
...@@ -87,7 +128,9 @@ export default defineComponent({ ...@@ -87,7 +128,9 @@ export default defineComponent({
</div> </div>
<div class="price center"> <div class="price center">
<div class="label">{t('raffle.NumberBuyers')}</div> <div class="label">{t('raffle.NumberBuyers')}</div>
<div class="value">{props.info.buyersNum}</div> <div class="value">
{props.info.buy_num}/{props.info.max_participants_num}
</div>
</div> </div>
<div class="price end" v-show={props.showEnd}> <div class="price end" v-show={props.showEnd}>
<div class="label">中奖可得</div> <div class="label">中奖可得</div>
......
src/pages/raffle/components/myraffle/index.less
.custom-my-blind-box { .custom-my-blind-box {
min-height: 600px;
position: relative;
width: 100%;
.header { .header {
.blind-box-head { .blind-box-head {
font-weight: 500; font-weight: 500;
...@@ -9,7 +12,6 @@ ...@@ -9,7 +12,6 @@
} }
} }
.my-blind-box-content { .my-blind-box-content {
position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
......
src/pages/raffle/components/myraffle/index.tsx
import { computed, defineComponent, reactive, ref } from 'vue'; import {
computed,
defineComponent,
onMounted,
reactive,
ref,
watch,
} from 'vue';
import './index.less'; import './index.less';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import CustomButton from '@/components/button'; import CustomButton from '@/components/button';
import RadioGroup from '@/components/RadioGroup'; import RadioGroup from '@/components/RadioGroup';
import Loading from '@/components/Loading'; import Loading from '@/components/Loading';
import Card from '../card'; import Card from '../card';
import { UserOrder } from '@/utils/api/BlindBox';
import { useFoxWallet } from '@/store/FoxWallet';
export default defineComponent({ export default defineComponent({
props: { props: {
modelValue: String, modelValue: String,
...@@ -13,7 +22,8 @@ export default defineComponent({ ...@@ -13,7 +22,8 @@ export default defineComponent({
setup(props, { emit }) { setup(props, { emit }) {
const { t } = useI18n(); const { t } = useI18n();
// 当前展示的模块 // 当前展示的模块
const myboxType = ref('0'); const myboxType = ref(2);
const { $state: FoxWallet } = useFoxWallet();
// //
const loading = ref(false); const loading = ref(false);
/** /**
...@@ -23,60 +33,91 @@ export default defineComponent({ ...@@ -23,60 +33,91 @@ export default defineComponent({
* 中签4 * 中签4
*/ */
const myblindBoxList = reactive({ const myblindBoxList = reactive({
list: [ list: [],
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '1',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
},
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '2',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
},
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '3',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
},
{
img: new URL('@/assets/img/test.png', import.meta.url).href,
introduction: '5人抽奖一人必中',
status: '4',
price: '300',
buyersNum: '3/5',
canObtain: '1000',
},
],
}); });
// 是否显示可中签价值 // 是否显示可中签价值
const isShowEnd = ref(false); const isShowEnd = ref(false);
const pageNum = ref(1);
const pageSize = ref(10);
const btnOptions = computed(() => [ const btnOptions = computed(() => [
{ {
label: t('raffle.inprogress'), label: t('raffle.inprogress'),
value: '0', value: 2,
other: {
title: t('raffle.inprogress'),
type: 'success',
},
}, },
{ {
label: t('raffle.unfinish'), label: t('raffle.Unfinished'),
value: '1', value: 1,
other: {
title: t('raffle.Unfinished'),
type: 'failed',
},
}, },
{ {
label: t('raffle.Finished'), label: t('raffle.Finished'),
value: '2', value: 3,
other: {
title: 'true',
type: 'failed',
},
}, },
]); ]);
// 当前显示的标签内容
const CustomStatus = ref(btnOptions.value[0].other);
const onBack = () => { const onBack = () => {
emit('update:modelValue', 'activity'); emit('update:modelValue', 'activity');
}; };
const getList = async () => {
try {
loading.value = true;
let res: any = await UserOrder({
page: pageNum.value,
limit: pageSize.value,
status: myboxType.value,
address: FoxWallet.address,
});
myblindBoxList.list = res.data.data;
loading.value = false;
} catch (e) {
console.log(e);
loading.value = false;
}
};
watch(
() => loading.value,
(v) => {
if (!v) {
// 判断当前模块
if (myboxType.value == 1) {
CustomStatus.value = btnOptions.value[1].other;
} else if (myboxType.value == 2) {
CustomStatus.value = btnOptions.value[0].other;
} else {
CustomStatus.value = btnOptions.value[2].other;
}
if (myboxType.value == 3) {
isShowEnd.value = true;
} else {
isShowEnd.value = false;
}
}
}
);
// 条件改变
const onChange = (value: any) => {
if (myboxType.value == value) {
return;
}
myboxType.value = value;
getList();
};
onMounted(() => {
getList();
});
return () => ( return () => (
<div class="custom-my-blind-box"> <div class="custom-my-blind-box">
<div class="header"> <div class="header">
...@@ -90,14 +131,19 @@ export default defineComponent({ ...@@ -90,14 +131,19 @@ export default defineComponent({
<RadioGroup <RadioGroup
v-model={myboxType.value} v-model={myboxType.value}
options={btnOptions.value} options={btnOptions.value}
onChange={onChange}
></RadioGroup> ></RadioGroup>
</div> </div>
<div class="my-blind-box-content"> <div class="my-blind-box-content">
{myblindBoxList.list.map((item: any) => ( {myblindBoxList.list.map((item: any) => (
<Card info={item} showEnd={isShowEnd.value}></Card> <Card
info={item}
showEnd={isShowEnd.value}
customStatus={CustomStatus.value}
></Card>
))} ))}
<Loading v-show={loading.value}></Loading>
</div> </div>
<Loading v-show={loading.value}></Loading>
</div> </div>
); );
}, },
......
src/pages/raffle/index.vue
...@@ -3,17 +3,29 @@ ...@@ -3,17 +3,29 @@
<div v-show="current == 'activity'"> <div v-show="current == 'activity'">
<Activity v-model="current"></Activity> <Activity v-model="current"></Activity>
</div> </div>
<template v-if="isLoadMyBox">
<div v-show="current == 'mybox'"> <div v-show="current == 'mybox'">
<Myraffle v-model="current"></Myraffle> <Myraffle v-model="current"></Myraffle>
</div> </div>
</template>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Myraffle from './components/myraffle'; import Myraffle from './components/myraffle';
import Activity from './components/Activity'; import Activity from './components/Activity';
import { ref } from 'vue'; import { ref, watch } from 'vue';
const current = ref('activity'); const current = ref('activity');
// 是否加载我的盲盒
const isLoadMyBox = ref(false);
watch(
() => current.value,
(v) => {
if (v == 'mybox' && !isLoadMyBox.value) {
isLoadMyBox.value = true;
}
}
);
</script> </script>
<style lang="less"> <style lang="less">
......
src/router/index.ts
...@@ -16,7 +16,7 @@ const defaultRouterList: Array<RouteRecordRaw> = [ ...@@ -16,7 +16,7 @@ const defaultRouterList: Array<RouteRecordRaw> = [
}, },
// raffle - 抽奖 // raffle - 抽奖
{ {
path: '/raffle', path: '/raffle/:code?/:id?',
name: 'raffle', name: 'raffle',
component: () => import('@/pages/raffle/index.vue'), component: () => import('@/pages/raffle/index.vue'),
}, },
......
src/utils/api/BlindBox.ts 0 → 100644
import request from '@/utils/request';
// 获取用户邀请码
export const getUserInfo = (data: any) => {
return request.get('/api/user/info', {
params: data,
});
};
// 获取进行中的列表
export const getBlindBoxList = (address: string = '') => {
return request.get('/api/BlindBoxList', {
params: {
address: address ? address : undefined,
},
});
};
// 购买前判断用户能否购买盲盒
export const useCanNotBuy = (data: any) => {
return request.get('/api/CanNotBuy', {
params: data,
});
};
// 购买盲盒
export const buy_blindBox = (data: any) => {
return request.post('/api/BlindBox/buy', {
...data,
});
};
// 轮询检测是否购买成功
export const IntervalCheckOrder = (data: any) => {
return request.post('/api/BlindBox/buy/check', {
...data,
});
};
// 用户订单
export const UserOrder = (data: any) => {
return request.get('/api/order', {
params: data,
});
};
src/utils/request.ts 0 → 100644
import axios from 'axios';
import { MessagePlugin } from 'tdesign-vue-next';
const instance = axios.create({
timeout: 1000,
withCredentials: true,
});
instance.interceptors.request.use((config) => {
return config;
});
instance.defaults.timeout = 60000;
instance.interceptors.response.use(
(response) => {
const { data, headers, status } = response;
if (data.code === 200) {
return data.data;
} else if (data.code === 0) {
return data;
} else if (data.code === 2) {
MessagePlugin.closeAll();
MessagePlugin.warning('登录信息已过期');
return;
} else {
MessagePlugin.closeAll();
MessagePlugin.error(data.msg || '请求错误,请稍后重试');
return Promise.reject(data.msg);
}
},
(err) => {
const { config } = err;
if ('response' in err) {
const { message: msg } = err.response.data;
MessagePlugin.error(msg || '请求错误,请稍后重试');
}
if (!config || !config.retry) return Promise.reject(err);
}
);
export default instance;
vite.config.ts
...@@ -12,7 +12,7 @@ export default defineConfig(({ command, mode }) => { ...@@ -12,7 +12,7 @@ export default defineConfig(({ command, mode }) => {
let newDate = `${date.getFullYear()}-${ let newDate = `${date.getFullYear()}-${
date.getMonth() + 1 date.getMonth() + 1
}-${date.getDate()}--${date.getHours()}.${date.getMinutes()}`; }-${date.getDate()}--${date.getHours()}.${date.getMinutes()}`;
let api = 1 ? 'http://mxcus.net' : 'http://snow.test'; let api = 0 ? 'http://mxcus.net' : 'http://127.0.0.1:8000';
return { return {
base: '/', base: '/',
resolve: { resolve: {
...@@ -42,14 +42,15 @@ export default defineConfig(({ command, mode }) => { ...@@ -42,14 +42,15 @@ export default defineConfig(({ command, mode }) => {
}, },
output: { output: {
// 去掉注释内容 // 去掉注释内容
comments: true, comments: false,
}, },
}, },
rollupOptions: { rollupOptions: {
output: { output: {
manualChunks: { manualChunks: {
// 拆分代码，这个就是分包，配置完后自动按需加载，现在还比不上webpack的splitchunk，不过也能用了。 // 拆分代码，这个就是分包，配置完后自动按需加载，现在还比不上webpack的splitchunk，不过也能用了。
vue: ['vue', 'vue-router', 'vuex'], vue: ['vue', 'vue-router', 'pinia'],
Tdesign: ['tdesign-vue-next'],
// echarts: ['echarts'], // echarts: ['echarts'],
}, },
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment