Kroytz/yshop-drink
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

所有页面css 规范

Browse Source
This commit is contained in:
hupeng committed 2026-05-22 10:46:55 +08:00
1 parent 50fbcfe27b
commit b168232fbb
30 files changed
+4244 -2798
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

yshop-drink-uniapp-vue3/App.vue
-8
View File
@@ -111,12 +111,4 @@ const auth = async(code) => {
<style lang="scss"> <style lang="scss">
@import '~@/static/style/app.scss'; @import '~@/static/style/app.scss';
//@import 'static/iconfont/iconfont.scss';
//@import url('./static/style/style.less');
@import 'static/style/yshop.css';
// /*每个页面公共css */
// page {
// background-color: #f5f5f5;
// }
</style> </style>
yshop-drink-uniapp-vue3/package-lock.json
Generated
+289 -106
View File
@@ -1,299 +1,412 @@
{ {
"name": "yshop-miniapp", "name": "yshop-miniapp",
"version": "1.2.0", "version": "1.2.0",
"lockfileVersion": 1, "lockfileVersion": 3,
"requires": true, "requires": true,
"dependencies": { "packages": {
"@vant/area-data": { "": {
"name": "yshop-miniapp",
"version": "1.2.0",
"license": "ISC",
"dependencies": {
"@vant/area-data": "^1.5.0",
"add": "^2.0.6",
"flyio": "^0.6.14",
"jweixin-module": "^1.6.0",
"openai": "^6.38.0",
"pinia": "^2.1.6",
"vant": "^4.6.2",
"weixin-js-sdk": "^1.6.3",
"yarn": "^1.22.19"
}
},
"node_modules/@vant/area-data": {
"version": "1.5.0", "version": "1.5.0",
"resolved": "https://registry.npmmirror.com/@vant/area-data/-/area-data-1.5.0.tgz", "resolved": "https://registry.npmmirror.com/@vant/area-data/-/area-data-1.5.0.tgz",
"integrity": "sha512-SWmDhYmWiOgtAgtJqcW7N4XyGgrg/7l6t1+XSgt8BkPp2oOKO1ZUn8+46brLpT/gzRe/v8BtyTLmdBwMamrmQw==" "integrity": "sha512-SWmDhYmWiOgtAgtJqcW7N4XyGgrg/7l6t1+XSgt8BkPp2oOKO1ZUn8+46brLpT/gzRe/v8BtyTLmdBwMamrmQw=="
}, },
"@vant/popperjs": { "node_modules/@vant/popperjs": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz", "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
"integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==" "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
}, },
"@vant/use": { "node_modules/@vant/use": {
"version": "1.5.2", "version": "1.5.2",
"resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.2.tgz", "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.5.2.tgz",
"integrity": "sha512-CBK61iT568dCHUwFFsErGbW6/5tmrPnZJKGtcSy7Tjcrmws8Ku+YZo7IUFD9Xkj9MfSJ4pfhQ7pU2KouP5Cojg==" "integrity": "sha512-CBK61iT568dCHUwFFsErGbW6/5tmrPnZJKGtcSy7Tjcrmws8Ku+YZo7IUFD9Xkj9MfSJ4pfhQ7pU2KouP5Cojg==",
"peerDependencies": {
"vue": "^3.0.0"
}
}, },
"@vue/devtools-api": { "node_modules/@vue/devtools-api": {
"version": "6.5.0", "version": "6.5.0",
"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz", "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
"integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==" "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
}, },
"@vue/shared": { "node_modules/@vue/shared": {
"version": "3.3.4", "version": "3.3.4",
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz", "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz",
"integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==" "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
}, },
"add": { "node_modules/add": {
"version": "2.0.6", "version": "2.0.6",
"resolved": "https://registry.npmmirror.com/add/-/add-2.0.6.tgz", "resolved": "https://registry.npmmirror.com/add/-/add-2.0.6.tgz",
"integrity": "sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==" "integrity": "sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q=="
}, },
"ajv": { "node_modules/ajv": {
"version": "6.12.6", "version": "6.12.6",
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz", "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"requires": { "dependencies": {
"fast-deep-equal": "^3.1.1", "fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0", "fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1", "json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2" "uri-js": "^4.2.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/epoberezkin"
} }
}, },
"asn1": { "node_modules/asn1": {
"version": "0.2.6", "version": "0.2.6",
"resolved": "https://registry.npmmirror.com/asn1/-/asn1-0.2.6.tgz", "resolved": "https://registry.npmmirror.com/asn1/-/asn1-0.2.6.tgz",
"integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==", "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
"requires": { "dependencies": {
"safer-buffer": "~2.1.0" "safer-buffer": "~2.1.0"
} }
}, },
"assert-plus": { "node_modules/assert-plus": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmmirror.com/assert-plus/-/assert-plus-1.0.0.tgz", "resolved": "https://registry.npmmirror.com/assert-plus/-/assert-plus-1.0.0.tgz",
"integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==" "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
"engines": {
"node": ">=0.8"
}
}, },
"asynckit": { "node_modules/asynckit": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz", "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
}, },
"aws-sign2": { "node_modules/aws-sign2": {
"version": "0.7.0", "version": "0.7.0",
"resolved": "https://registry.npmmirror.com/aws-sign2/-/aws-sign2-0.7.0.tgz", "resolved": "https://registry.npmmirror.com/aws-sign2/-/aws-sign2-0.7.0.tgz",
"integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==" "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
"engines": {
"node": "*"
}
}, },
"aws4": { "node_modules/aws4": {
"version": "1.12.0", "version": "1.12.0",
"resolved": "https://registry.npmmirror.com/aws4/-/aws4-1.12.0.tgz", "resolved": "https://registry.npmmirror.com/aws4/-/aws4-1.12.0.tgz",
"integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==" "integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg=="
}, },
"bcrypt-pbkdf": { "node_modules/bcrypt-pbkdf": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmmirror.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", "resolved": "https://registry.npmmirror.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
"integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==", "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
"requires": { "dependencies": {
"tweetnacl": "^0.14.3" "tweetnacl": "^0.14.3"
} }
}, },
"caseless": { "node_modules/caseless": {
"version": "0.12.0", "version": "0.12.0",
"resolved": "https://registry.npmmirror.com/caseless/-/caseless-0.12.0.tgz", "resolved": "https://registry.npmmirror.com/caseless/-/caseless-0.12.0.tgz",
"integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==" "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
}, },
"combined-stream": { "node_modules/combined-stream": {
"version": "1.0.8", "version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz", "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": { "dependencies": {
"delayed-stream": "~1.0.0" "delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
} }
}, },
"core-util-is": { "node_modules/core-util-is": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.2.tgz", "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.2.tgz",
"integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==" "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
}, },
"dashdash": { "node_modules/dashdash": {
"version": "1.14.1", "version": "1.14.1",
"resolved": "https://registry.npmmirror.com/dashdash/-/dashdash-1.14.1.tgz", "resolved": "https://registry.npmmirror.com/dashdash/-/dashdash-1.14.1.tgz",
"integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==", "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
"requires": { "dependencies": {
"assert-plus": "^1.0.0" "assert-plus": "^1.0.0"
},
"engines": {
"node": ">=0.10"
} }
}, },
"delayed-stream": { "node_modules/delayed-stream": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz", "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
}, },
"ecc-jsbn": { "node_modules/ecc-jsbn": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmmirror.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", "resolved": "https://registry.npmmirror.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
"integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==", "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
"requires": { "dependencies": {
"jsbn": "~0.1.0", "jsbn": "~0.1.0",
"safer-buffer": "^2.1.0" "safer-buffer": "^2.1.0"
} }
}, },
"extend": { "node_modules/extend": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz", "resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz",
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
}, },
"extsprintf": { "node_modules/extsprintf": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmmirror.com/extsprintf/-/extsprintf-1.3.0.tgz", "resolved": "https://registry.npmmirror.com/extsprintf/-/extsprintf-1.3.0.tgz",
"integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==" "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==",
"engines": [
"node >=0.6.0"
]
}, },
"fast-deep-equal": { "node_modules/fast-deep-equal": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
}, },
"fast-json-stable-stringify": { "node_modules/fast-json-stable-stringify": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", "resolved": "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
}, },
"flyio": { "node_modules/flyio": {
"version": "0.6.14", "version": "0.6.14",
"resolved": "https://registry.npmmirror.com/flyio/-/flyio-0.6.14.tgz", "resolved": "https://registry.npmmirror.com/flyio/-/flyio-0.6.14.tgz",
"integrity": "sha512-RE2OXE1ZZmcXOKb0jCtGyquHDxpAqHg17CZ8lmQKRfl3x1kP+NBpaQDx4WgN7DNpLJjFnspTzTEQpwRGg6/xaA==", "integrity": "sha512-RE2OXE1ZZmcXOKb0jCtGyquHDxpAqHg17CZ8lmQKRfl3x1kP+NBpaQDx4WgN7DNpLJjFnspTzTEQpwRGg6/xaA==",
"requires": { "dependencies": {
"request": "^2.85.0" "request": "^2.85.0"
} }
}, },
"forever-agent": { "node_modules/forever-agent": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmmirror.com/forever-agent/-/forever-agent-0.6.1.tgz", "resolved": "https://registry.npmmirror.com/forever-agent/-/forever-agent-0.6.1.tgz",
"integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==" "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
"engines": {
"node": "*"
}
}, },
"form-data": { "node_modules/form-data": {
"version": "2.3.3", "version": "2.3.3",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-2.3.3.tgz", "resolved": "https://registry.npmmirror.com/form-data/-/form-data-2.3.3.tgz",
"integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==", "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
"requires": { "dependencies": {
"asynckit": "^0.4.0", "asynckit": "^0.4.0",
"combined-stream": "^1.0.6", "combined-stream": "^1.0.6",
"mime-types": "^2.1.12" "mime-types": "^2.1.12"
},
"engines": {
"node": ">= 0.12"
} }
}, },
"getpass": { "node_modules/getpass": {
"version": "0.1.7", "version": "0.1.7",
"resolved": "https://registry.npmmirror.com/getpass/-/getpass-0.1.7.tgz", "resolved": "https://registry.npmmirror.com/getpass/-/getpass-0.1.7.tgz",
"integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==", "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
"requires": { "dependencies": {
"assert-plus": "^1.0.0" "assert-plus": "^1.0.0"
} }
}, },
"har-schema": { "node_modules/har-schema": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmmirror.com/har-schema/-/har-schema-2.0.0.tgz", "resolved": "https://registry.npmmirror.com/har-schema/-/har-schema-2.0.0.tgz",
"integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==" "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
"engines": {
"node": ">=4"
}
}, },
"har-validator": { "node_modules/har-validator": {
"version": "5.1.5", "version": "5.1.5",
"resolved": "https://registry.npmmirror.com/har-validator/-/har-validator-5.1.5.tgz", "resolved": "https://registry.npmmirror.com/har-validator/-/har-validator-5.1.5.tgz",
"integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==", "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
"requires": { "deprecated": "this library is no longer supported",
"dependencies": {
"ajv": "^6.12.3", "ajv": "^6.12.3",
"har-schema": "^2.0.0" "har-schema": "^2.0.0"
},
"engines": {
"node": ">=6"
} }
}, },
"http-signature": { "node_modules/http-signature": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmmirror.com/http-signature/-/http-signature-1.2.0.tgz", "resolved": "https://registry.npmmirror.com/http-signature/-/http-signature-1.2.0.tgz",
"integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==", "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
"requires": { "dependencies": {
"assert-plus": "^1.0.0", "assert-plus": "^1.0.0",
"jsprim": "^1.2.2", "jsprim": "^1.2.2",
"sshpk": "^1.7.0" "sshpk": "^1.7.0"
},
"engines": {
"node": ">=0.8",
"npm": ">=1.3.7"
} }
}, },
"is-typedarray": { "node_modules/is-typedarray": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmmirror.com/is-typedarray/-/is-typedarray-1.0.0.tgz", "resolved": "https://registry.npmmirror.com/is-typedarray/-/is-typedarray-1.0.0.tgz",
"integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==" "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
}, },
"isstream": { "node_modules/isstream": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmmirror.com/isstream/-/isstream-0.1.2.tgz", "resolved": "https://registry.npmmirror.com/isstream/-/isstream-0.1.2.tgz",
"integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==" "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
}, },
"jsbn": { "node_modules/jsbn": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmmirror.com/jsbn/-/jsbn-0.1.1.tgz", "resolved": "https://registry.npmmirror.com/jsbn/-/jsbn-0.1.1.tgz",
"integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==" "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
}, },
"json-schema": { "node_modules/json-schema": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmmirror.com/json-schema/-/json-schema-0.4.0.tgz", "resolved": "https://registry.npmmirror.com/json-schema/-/json-schema-0.4.0.tgz",
"integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==" "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
}, },
"json-schema-traverse": { "node_modules/json-schema-traverse": {
"version": "0.4.1", "version": "0.4.1",
"resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
}, },
"json-stringify-safe": { "node_modules/json-stringify-safe": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmmirror.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", "resolved": "https://registry.npmmirror.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
"integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==" "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
}, },
"jsprim": { "node_modules/jsprim": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.npmmirror.com/jsprim/-/jsprim-1.4.2.tgz", "resolved": "https://registry.npmmirror.com/jsprim/-/jsprim-1.4.2.tgz",
"integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==", "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
"requires": { "dependencies": {
"assert-plus": "1.0.0", "assert-plus": "1.0.0",
"extsprintf": "1.3.0", "extsprintf": "1.3.0",
"json-schema": "0.4.0", "json-schema": "0.4.0",
"verror": "1.10.0" "verror": "1.10.0"
},
"engines": {
"node": ">=0.6.0"
} }
}, },
"jweixin-module": { "node_modules/jweixin-module": {
"version": "1.6.0", "version": "1.6.0",
"resolved": "https://registry.npmmirror.com/jweixin-module/-/jweixin-module-1.6.0.tgz", "resolved": "https://registry.npmmirror.com/jweixin-module/-/jweixin-module-1.6.0.tgz",
"integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w==" "integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
}, },
"mime-db": { "node_modules/mime-db": {
"version": "1.52.0", "version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz", "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==" "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
}, },
"mime-types": { "node_modules/mime-types": {
"version": "2.1.35", "version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz", "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"requires": { "dependencies": {
"mime-db": "1.52.0" "mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
} }
}, },
"oauth-sign": { "node_modules/oauth-sign": {
"version": "0.9.0", "version": "0.9.0",
"resolved": "https://registry.npmmirror.com/oauth-sign/-/oauth-sign-0.9.0.tgz", "resolved": "https://registry.npmmirror.com/oauth-sign/-/oauth-sign-0.9.0.tgz",
"integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==" "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
"engines": {
"node": "*"
}
}, },
"performance-now": { "node_modules/openai": {
"version": "6.38.0",
"resolved": "https://registry.npmmirror.com/openai/-/openai-6.38.0.tgz",
"integrity": "sha512-AoMplt2UalrpgUDMh3L09QWjNRlgJPipclQvA6sYAaeF6nHNBMgmikAZGmcYLn8on4d9sQY9Q8bOLfrBS7Lc8g==",
"bin": {
"openai": "bin/cli"
},
"peerDependencies": {
"ws": "^8.18.0",
"zod": "^3.25 || ^4.0"
},
"peerDependenciesMeta": {
"ws": {
"optional": true
},
"zod": {
"optional": true
}
}
},
"node_modules/performance-now": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz", "resolved": "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz",
"integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==" "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
}, },
"pinia": { "node_modules/pinia": {
"version": "2.1.6", "version": "2.1.6",
"resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.6.tgz", "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.6.tgz",
"integrity": "sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==", "integrity": "sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==",
"requires": { "dependencies": {
"@vue/devtools-api": "^6.5.0", "@vue/devtools-api": "^6.5.0",
"vue-demi": ">=0.14.5" "vue-demi": ">=0.14.5"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"@vue/composition-api": "^1.4.0",
"typescript": ">=4.4.4",
"vue": "^2.6.14 || ^3.3.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
},
"typescript": {
"optional": true
}
} }
}, },
"psl": { "node_modules/psl": {
"version": "1.9.0", "version": "1.9.0",
"resolved": "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz", "resolved": "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz",
"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==" "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
}, },
"punycode": { "node_modules/punycode": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.0.tgz", "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.0.tgz",
"integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==" "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
"engines": {
"node": ">=6"
}
}, },
"qs": { "node_modules/qs": {
"version": "6.5.3", "version": "6.5.3",
"resolved": "https://registry.npmmirror.com/qs/-/qs-6.5.3.tgz", "resolved": "https://registry.npmmirror.com/qs/-/qs-6.5.3.tgz",
"integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==" "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
"engines": {
"node": ">=0.6"
}
}, },
"request": { "node_modules/request": {
"version": "2.88.2", "version": "2.88.2",
"resolved": "https://registry.npmmirror.com/request/-/request-2.88.2.tgz", "resolved": "https://registry.npmmirror.com/request/-/request-2.88.2.tgz",
"integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==", "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
"requires": { "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
"dependencies": {
"aws-sign2": "~0.7.0", "aws-sign2": "~0.7.0",
"aws4": "^1.8.0", "aws4": "^1.8.0",
"caseless": "~0.12.0", "caseless": "~0.12.0",
@@ -314,23 +427,40 @@
"tough-cookie": "~2.5.0", "tough-cookie": "~2.5.0",
"tunnel-agent": "^0.6.0", "tunnel-agent": "^0.6.0",
"uuid": "^3.3.2" "uuid": "^3.3.2"
},
"engines": {
"node": ">= 6"
} }
}, },
"safe-buffer": { "node_modules/safe-buffer": {
"version": "5.2.1", "version": "5.2.1",
"resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz", "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
]
}, },
"safer-buffer": { "node_modules/safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz", "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
}, },
"sshpk": { "node_modules/sshpk": {
"version": "1.17.0", "version": "1.17.0",
"resolved": "https://registry.npmmirror.com/sshpk/-/sshpk-1.17.0.tgz", "resolved": "https://registry.npmmirror.com/sshpk/-/sshpk-1.17.0.tgz",
"integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==", "integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
"requires": { "dependencies": {
"asn1": "~0.2.3", "asn1": "~0.2.3",
"assert-plus": "^1.0.0", "assert-plus": "^1.0.0",
"bcrypt-pbkdf": "^1.0.0", "bcrypt-pbkdf": "^1.0.0",
@@ -340,84 +470,137 @@
"jsbn": "~0.1.0", "jsbn": "~0.1.0",
"safer-buffer": "^2.0.2", "safer-buffer": "^2.0.2",
"tweetnacl": "~0.14.0" "tweetnacl": "~0.14.0"
},
"bin": {
"sshpk-conv": "bin/sshpk-conv",
"sshpk-sign": "bin/sshpk-sign",
"sshpk-verify": "bin/sshpk-verify"
},
"engines": {
"node": ">=0.10.0"
} }
}, },
"tough-cookie": { "node_modules/tough-cookie": {
"version": "2.5.0", "version": "2.5.0",
"resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-2.5.0.tgz", "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-2.5.0.tgz",
"integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==", "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
"requires": { "dependencies": {
"psl": "^1.1.28", "psl": "^1.1.28",
"punycode": "^2.1.1" "punycode": "^2.1.1"
},
"engines": {
"node": ">=0.8"
} }
}, },
"tunnel-agent": { "node_modules/tunnel-agent": {
"version": "0.6.0", "version": "0.6.0",
"resolved": "https://registry.npmmirror.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz", "resolved": "https://registry.npmmirror.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
"integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==", "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
"requires": { "dependencies": {
"safe-buffer": "^5.0.1" "safe-buffer": "^5.0.1"
},
"engines": {
"node": "*"
} }
}, },
"tweetnacl": { "node_modules/tweetnacl": {
"version": "0.14.5", "version": "0.14.5",
"resolved": "https://registry.npmmirror.com/tweetnacl/-/tweetnacl-0.14.5.tgz", "resolved": "https://registry.npmmirror.com/tweetnacl/-/tweetnacl-0.14.5.tgz",
"integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==" "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
}, },
"uri-js": { "node_modules/uri-js": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz", "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
"requires": { "dependencies": {
"punycode": "^2.1.0" "punycode": "^2.1.0"
} }
}, },
"uuid": { "node_modules/uuid": {
"version": "3.4.0", "version": "3.4.0",
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-3.4.0.tgz", "resolved": "https://registry.npmmirror.com/uuid/-/uuid-3.4.0.tgz",
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==" "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
"deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.",
"bin": {
"uuid": "bin/uuid"
}
}, },
"vant": { "node_modules/vant": {
"version": "4.6.2", "version": "4.6.2",
"resolved": "https://registry.npmmirror.com/vant/-/vant-4.6.2.tgz", "resolved": "https://registry.npmmirror.com/vant/-/vant-4.6.2.tgz",
"integrity": "sha512-6EHCCAGM5a9VVzpBg/wZNPDFmJ8T1a4k29DPNcEMW3X670awW3rnD7+/x3dw+bE17JhhSg49V/+fQwBP2iQkAg==", "integrity": "sha512-6EHCCAGM5a9VVzpBg/wZNPDFmJ8T1a4k29DPNcEMW3X670awW3rnD7+/x3dw+bE17JhhSg49V/+fQwBP2iQkAg==",
"requires": { "dependencies": {
"@vant/popperjs": "^1.3.0", "@vant/popperjs": "^1.3.0",
"@vant/use": "^1.5.1", "@vant/use": "^1.5.1",
"@vue/shared": "^3.0.0" "@vue/shared": "^3.0.0"
},
"peerDependencies": {
"vue": "^3.0.0"
} }
}, },
"verror": { "node_modules/verror": {
"version": "1.10.0", "version": "1.10.0",
"resolved": "https://registry.npmmirror.com/verror/-/verror-1.10.0.tgz", "resolved": "https://registry.npmmirror.com/verror/-/verror-1.10.0.tgz",
"integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==", "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
"requires": { "engines": [
"node >=0.6.0"
],
"dependencies": {
"assert-plus": "^1.0.0", "assert-plus": "^1.0.0",
"core-util-is": "1.0.2", "core-util-is": "1.0.2",
"extsprintf": "^1.2.0" "extsprintf": "^1.2.0"
}
},
"node_modules/verror/node_modules/extsprintf": {
"version": "1.4.1",
"resolved": "https://registry.npmmirror.com/extsprintf/-/extsprintf-1.4.1.tgz",
"integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==",
"engines": [
"node >=0.6.0"
]
},
"node_modules/vue-demi": {
"version": "0.14.5",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz",
"integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
}, },
"dependencies": { "engines": {
"extsprintf": { "node": ">=12"
"version": "1.4.1", },
"resolved": "https://registry.npmmirror.com/extsprintf/-/extsprintf-1.4.1.tgz", "funding": {
"integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==" "url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
} }
} }
}, },
"vue-demi": { "node_modules/weixin-js-sdk": {
"version": "0.14.5",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz",
"integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA=="
},
"weixin-js-sdk": {
"version": "1.6.3", "version": "1.6.3",
"resolved": "https://registry.npmmirror.com/weixin-js-sdk/-/weixin-js-sdk-1.6.3.tgz", "resolved": "https://registry.npmmirror.com/weixin-js-sdk/-/weixin-js-sdk-1.6.3.tgz",
"integrity": "sha512-5jYNtVcxWmgHNqCLSPoX6vXab9G4RPDZx0klX8IsVwGjDTwx/UDmgfF7fkRMGguRpuFv0O7tk1jb+Oay2QiV1w==" "integrity": "sha512-5jYNtVcxWmgHNqCLSPoX6vXab9G4RPDZx0klX8IsVwGjDTwx/UDmgfF7fkRMGguRpuFv0O7tk1jb+Oay2QiV1w=="
}, },
"yarn": { "node_modules/yarn": {
"version": "1.22.19", "version": "1.22.19",
"resolved": "https://registry.npmmirror.com/yarn/-/yarn-1.22.19.tgz", "resolved": "https://registry.npmmirror.com/yarn/-/yarn-1.22.19.tgz",
"integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==" "integrity": "sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==",
"hasInstallScript": true,
"bin": {
"yarn": "bin/yarn.js",
"yarnpkg": "bin/yarn.js"
},
"engines": {
"node": ">=4.0.0"
}
} }
} }
} }
yshop-drink-uniapp-vue3/package.json
+1
View File
@@ -13,6 +13,7 @@
"add": "^2.0.6", "add": "^2.0.6",
"flyio": "^0.6.14", "flyio": "^0.6.14",
"jweixin-module": "^1.6.0", "jweixin-module": "^1.6.0",
"openai": "^6.38.0",
"pinia": "^2.1.6", "pinia": "^2.1.6",
"vant": "^4.6.2", "vant": "^4.6.2",
"weixin-js-sdk": "^1.6.3", "weixin-js-sdk": "^1.6.3",
yshop-drink-uniapp-vue3/pages/cart/cart.vue
+120 -105
View File
@@ -5,29 +5,29 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="cart-popup"> <view class="cart-page">
<view class="top flex justify-between"> <view class="cart-page__header flex justify-between">
<text>已点{{ getCartGoodsNumber }}份</text> <text>已点{{ getCartGoodsNumber }}份</text>
<text @tap="handleCartClear">清空</text> <text @tap="handleCartClear">清空</text>
</view> </view>
<scroll-view class="cart-list" scroll-y> <scroll-view class="cart-page__list" scroll-y>
<view class="wrapper"> <view class="cart-page__list-inner">
<uv-empty mode="car" v-if="cart.length == 0"></uv-empty> <uv-empty mode="car" v-if="cart.length == 0"></uv-empty>
<view class="item" v-for="(item, index) in cart" :key="index"> <view class="cart-item" v-for="(item, index) in cart" :key="index">
<view class="left"> <view class="cart-item__info">
<view class="name">{{ item.name }}</view> <view class="cart-item__name">{{ item.name }}</view>
<view class="props">{{ item.valueStr }}</view> <view class="cart-item__props">{{ item.valueStr }}</view>
</view> </view>
<view class="center"> <view class="cart-item__price">
<text>￥{{ item.price }}</text> <text>￥{{ item.price }}</text>
</view> </view>
<view class="right"> <view class="cart-item__controls">
<button type="default" plain size="mini" class="btn" hover-class="none" <button type="default" plain size="mini" class="cart-item__btn" hover-class="none"
@tap="handleCartItemReduce(index)"> @tap="handleCartItemReduce(index)">
<view class="iconfont iconsami-select"></view> <view class="iconfont iconsami-select"></view>
</button> </button>
<view class="number">{{ item.number }}</view> <view class="cart-item__qty">{{ item.number }}</view>
<button type="primary" class="btn" size="min" hover-class="none" <button type="primary" class="cart-item__btn" size="min" hover-class="none"
@tap="handleCartItemAdd(index)"> @tap="handleCartItemAdd(index)">
<view class="iconfont iconadd-select"></view> <view class="iconfont iconadd-select"></view>
</button> </button>
@@ -36,9 +36,9 @@
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<view class="fixed-bottom flex justify-between align-center bg-white "> <view class="fixed-bottom flex justify-between align-center bg-white">
<view class="mx-2 ont-weight-light">应付:<text class="text-danger">￥{{ getCartGoodsPrice }}</text></view> <view class="mx-2 font-weight-light">应付:<text class="text-danger">￥{{ getCartGoodsPrice }}</text></view>
<view><uv-button type="warning" color="#09b4f1" :customStyle="customStyle" size="large" text="去结算" @click="toPay"></uv-button></view> <view><uv-button type="primary" :customStyle="customStyle" size="large" text="去结算" @click="toPay"></uv-button></view>
</view> </view>
<uv-toast ref="uToast"></uv-toast> <uv-toast ref="uToast"></uv-toast>
</template> </template>
@@ -150,96 +150,111 @@ const toPay = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.cart-popup { // 购物车页局部 token（与 uni.scss 全局变量配合）
.top { $cart-list-max-height: 60vh;
background-color: $bg-color-primary; $cart-list-min-height: 1vh;
//color: $color-primary; $cart-list-bottom-space: 156rpx;
color: #5A5B5C; $cart-price-offset: 120rpx;
padding: 10rpx 30rpx; $cart-control-size: 46rpx;
font-size: 24rpx; $cart-divider-height: 2rpx;
text-align: right; $cart-header-color: #5a5b5c;
} $cart-gap-sm: 10rpx;
.cart-list {
background-color: #ffffff;
width: 100%;
overflow: hidden;
min-height: 1vh;
max-height: 60vh;
.wrapper { .cart-page {
height: 100%; --cart-control-size: #{$cart-control-size};
display: flex; --cart-list-max-height: #{$cart-list-max-height};
flex-direction: column;
padding: 0 30rpx;
margin-bottom: 156rpx;
.item { &__header {
display: flex; padding: $cart-gap-sm $spacing-row-lg;
justify-content: space-between; font-size: $font-size-sm;
align-items: center; text-align: right;
padding: 30rpx 0; color: $cart-header-color;
position: relative; background-color: $bg-color-primary;
&::after {
content: ' ';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: $border-color;
height: 2rpx;
transform: scaleY(0.6);
}
.left {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
margin-right: 30rpx;
.name {
font-size: $font-size-sm;
color: $text-color-base;
}
.props {
color: $text-color-assist;
font-size: 24rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.center {
margin-right: 120rpx;
font-size: $font-size-base;
}
.right {
display: flex;
align-items: center;
justify-content: space-between;
.btn {
width: 46rpx;
height: 46rpx;
border-radius: 100%;
padding: 0;
text-align: center;
line-height: 46rpx;
}
.number {
font-size: $font-size-base;
width: 46rpx;
height: 46rpx;
text-align: center;
line-height: 46rpx;
}
}
}
}
}
} }
&__list {
width: 100%;
overflow: hidden;
min-height: $cart-list-min-height;
max-height: var(--cart-list-max-height);
background-color: $text-color-white;
}
&__list-inner {
display: flex;
flex-direction: column;
height: 100%;
padding: 0 $spacing-row-lg;
margin-bottom: $cart-list-bottom-space;
}
}
.cart-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: $spacing-row-lg 0;
position: relative;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: $cart-divider-height;
background-color: $border-color;
transform: scaleY(0.6);
}
&__info {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
margin-right: $spacing-row-lg;
}
&__name {
font-size: $font-size-sm;
color: $text-color-base;
}
&__props {
font-size: $font-size-sm;
color: $text-color-assist;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&__price {
margin-right: $cart-price-offset;
font-size: $font-size-base;
}
&__controls {
display: flex;
align-items: center;
justify-content: space-between;
}
&__btn,
&__qty {
width: var(--cart-control-size);
height: var(--cart-control-size);
line-height: var(--cart-control-size);
text-align: center;
}
&__btn {
padding: 0;
border-radius: $border-radius-circle;
}
&__qty {
font-size: $font-size-base;
}
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/address/add.vue
+101 -93
View File
@@ -5,46 +5,42 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="container"> <view class="container address-form">
<view class="form-box"> <list-cell :hover="false">
<view class="form"> <view class="address-form__field">
<list-cell :hover="false"> <view class="address-form__label">收货人</view>
<view class="form-input"> <input class="address-form__input" placeholder="请输入收货人" v-model="form.realName" placeholder-class="text-color-assist" />
<view class="label">收货人</view>
<input class="input" placeholder="请输入收货人" v-model="form.realName" placeholder-class="text-color-assist" />
</view>
</list-cell>
<list-cell :hover="false">
<view class="form-input">
<view class="label">联系方式</view>
<input class="input" placeholder="请输入收货人联系方式" v-model="form.phone" placeholder-class="text-color-assist" />
</view>
</list-cell>
<list-cell :hover="false">
<view class="form-input">
<view class="label">收货地址</view>
<view class="input" @click="chooseLocation">{{form.address ? form.address : '请选择收货地址'}}</view>
</view>
</list-cell>
<list-cell :hover="false">
<view class="form-input">
<view class="label">详细地址</view>
<input class="input" placeholder="请输入收货人详细地址" v-model="form.detail" placeholder-class="text-color-assist" />
</view>
</list-cell>
<list-cell :hover="false">
<view class="form-input">
<view class="label">默认地址</view>
<view class="radio-group">
<view class="radio" :class="{'checked': !form.isDefault}" style="margin-right: 10rpx;" @tap="form.isDefault=0">否</view>
<view class="radio" :class="{'checked': form.isDefault}" @tap="form.isDefault=1">是</view>
</view>
</view>
</list-cell>
</view> </view>
<view class="btn-section"> </list-cell>
<button type="primary" size="default" @tap="save">保存</button> <list-cell :hover="false">
<view class="address-form__field">
<view class="address-form__label">联系方式</view>
<input class="address-form__input" placeholder="请输入收货人联系方式" v-model="form.phone" placeholder-class="text-color-assist" />
</view> </view>
</list-cell>
<list-cell :hover="false">
<view class="address-form__field">
<view class="address-form__label">收货地址</view>
<view class="address-form__input" @click="chooseLocation">{{ form.address ? form.address : '请选择收货地址' }}</view>
</view>
</list-cell>
<list-cell :hover="false">
<view class="address-form__field">
<view class="address-form__label">详细地址</view>
<input class="address-form__input" placeholder="请输入收货人详细地址" v-model="form.detail" placeholder-class="text-color-assist" />
</view>
</list-cell>
<list-cell :hover="false">
<view class="address-form__field">
<view class="address-form__label">默认地址</view>
<view class="address-form__radio-group">
<view class="address-form__radio" :class="{ 'address-form__radio--checked': !form.isDefault }" @tap="form.isDefault = 0">否</view>
<view class="address-form__radio" :class="{ 'address-form__radio--checked': form.isDefault }" @tap="form.isDefault = 1">是</view>
</view>
</view>
</list-cell>
<view class="address-form__actions">
<button type="primary" size="default" class="rounded-pill address-form__btn" @tap="save">保存</button>
</view> </view>
</view> </view>
</template> </template>
@@ -116,67 +112,79 @@ const chooseLocation = async() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.form-box { $address-form-padding: $spacing-row-lg;
width: 100%; $address-form-label-width: 200rpx;
height: 100%; $address-form-radio-padding-y: 10rpx;
padding: 30rpx; $address-form-radio-padding-x: $spacing-row-lg;
$address-form-radio-gap: 10rpx;
$address-form-radio-border-width: 2rpx;
$address-form-btn-height: 90rpx;
$address-form-btn-width: 85%;
.address-form {
--address-form-label-width: #{$address-form-label-width};
--address-form-btn-height: #{$address-form-btn-height};
--address-form-btn-width: #{$address-form-btn-width};
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: $address-form-padding;
color: $text-color-base;
&__field {
display: flex; display: flex;
flex-direction: column; align-items: center;
color: $text-color-base; width: 100%;
}
.form-input { &__label {
display: flex; flex-shrink: 0;
align-items: center; width: var(--address-form-label-width);
width: 100%; font-size: $font-size-lg;
} font-weight: 500;
}
.label { &__input {
width: 200rpx; flex: 1;
font-size: $font-size-lg; display: flex;
color: $text-color-base; align-items: center;
font-weight: 500; }
}
.input { &__radio-group {
flex: 1; display: flex;
display: flex; gap: $address-form-radio-gap;
align-items: center; }
}
.radio-group { &__radio {
display: flex; padding: $address-form-radio-padding-y $address-form-radio-padding-x;
justify-content: flex-start; border: $address-form-radio-border-width solid $text-color-assist;
border-radius: $border-radius-base;
color: $text-color-assist;
font-size: $font-size-base;
.radio { &--checked {
padding: 10rpx 30rpx; border-color: $color-primary;
border-radius: 6rpx; background-color: $color-primary;
border: 2rpx solid $text-color-assist; color: $text-color-white;
color: $text-color-assist;
font-size: $font-size-base;
&.checked {
background-color: $color-primary;
color: $text-color-white;
border: 2rpx solid $color-primary;
}
}
}
.btn-section {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
button {
font-size: $font-size-base;
height: 90rpx;
border-radius: 50rem !important;
width: 85%;
display: flex;
align-items: center;
justify-content: center;
}
} }
} }
&__actions {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
&__btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--address-form-btn-width);
height: var(--address-form-btn-height);
font-size: $font-size-base;
}
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/address/address.vue
+70 -62
View File
@@ -5,31 +5,30 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="container"> <view class="container address-page">
<view class="main"> <view class="address-page__main">
<uv-empty v-if="addresses.length == 0" mode="address"></uv-empty> <uv-empty v-if="addresses.length == 0" mode="address"></uv-empty>
<template v-else> <template v-else>
<uv-swipe-action> <uv-swipe-action>
<uv-swipe-action-item class="address-wrapper" :options="swipeOption" <uv-swipe-action-item class="address-page__item" :options="swipeOption"
@click="handleSwipeClick(address.id)" v-for="(address, index) in addresses" :key="index"> @click="handleSwipeClick(address.id)" v-for="(address, index) in addresses" :key="index">
<view class="address" @tap="chooseAddress(address)"> <view class="address-page__card" @tap="chooseAddress(address)">
<view class="left flex-fill overflow-hidden mr-20"> <view class="flex-fill overflow-hidden mr-20">
<view class="font-size-lg font-weight-bold text-truncate" <view class="address-page__detail font-size-lg font-weight-bold text-truncate">
style="margin-bottom: 10rpx;white-space:normal;">
{{ address.address + ' ' + address.detail }} {{ address.address + ' ' + address.detail }}
</view> </view>
<view class="font-size-sm text-color-assist"> <view class="font-size-sm text-color-assist">
{{ address.realName }} {{ address.isDefault ? '默认' : '' }} {{ address.phone }} {{ address.realName }} {{ address.isDefault ? '默认' : '' }} {{ address.phone }}
</view> </view>
</view> </view>
<image src="/static/images/edit.png" class="edit-icon" @tap.stop="edit(address.id)"></image> <image src="/static/images/edit.png" class="address-page__edit-icon" @tap.stop="edit(address.id)"></image>
</view> </view>
</uv-swipe-action-item> </uv-swipe-action-item>
</uv-swipe-action> </uv-swipe-action>
</template> </template>
</view> </view>
<view class="btn-box"> <view class="address-page__footer">
<button type="primary" size="default" @tap="add">新增地址</button> <button type="primary" size="default" class="rounded-pill address-page__btn" @tap="add">新增地址</button>
</view> </view>
</view> </view>
</template> </template>
@@ -54,11 +53,10 @@ const title = ref('我的地址')
const scene = ref('menu') const scene = ref('menu')
const is_choose = ref(false) const is_choose = ref(false)
const swipeOption = ref( const swipeOption = ref([{
[{
text: '删除', text: '删除',
style: { style: {
backgroundColor: '#D12E32' backgroundColor: '#D12E32' // $color-error
} }
}]) }])
@@ -166,65 +164,75 @@ const chooseAddress = async(address) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { $address-padding: $spacing-row-lg;
width: 100%; $address-item-gap: $spacing-row-lg;
height: 100%; $address-card-padding-y: 40rpx;
} $address-main-padding-bottom: 100rpx;
$address-footer-height: 100rpx;
$address-footer-padding-y: 10rpx;
$address-btn-height: 80rpx;
$address-btn-width: 80%;
$address-edit-icon-size: 50rpx;
$address-detail-gap: 10rpx;
$address-footer-shadow: 0 0 20rpx rgba($text-color-assist, 0.1);
.main { .address-page {
width: 100%; --address-edit-icon-size: #{$address-edit-icon-size};
padding: 30rpx; --address-btn-height: #{$address-btn-height};
--address-btn-width: #{$address-btn-width};
&__main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: 100rpx; width: 100%;
padding: $address-padding;
.address-wrapper { padding-bottom: $address-main-padding-bottom;
margin-bottom: 30rpx;
}
.address {
width: 100%;
padding: 40rpx 30rpx;
background-color: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
.right {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.edit-icon {
width: 50rpx;
height: 50rpx;
flex-shrink: 0;
}
}
} }
.btn-box { &__item {
height: 100rpx; margin-bottom: $address-item-gap;
background-color: #FFFFFF; }
box-shadow: 0 0 20rpx rgba($color: $text-color-assist, $alpha: 0.1);
&__card {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: $address-card-padding-y $address-padding;
background-color: $text-color-white;
}
&__detail {
margin-bottom: $address-detail-gap;
white-space: normal;
}
&__edit-icon {
flex-shrink: 0;
width: var(--address-edit-icon-size);
height: var(--address-edit-icon-size);
}
&__footer {
position: fixed; position: fixed;
right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0;
padding: 10rpx 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: $address-footer-height;
button { padding: $address-footer-padding-y 0;
height: 80rpx; background-color: $text-color-white;
width: 80%; box-shadow: $address-footer-shadow;
border-radius: 50rem !important;
display: flex;
align-items: center;
justify-content: center;
}
} }
&__btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--address-btn-width);
height: var(--address-btn-height);
}
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/balance/bill.vue
+108 -76
View File
@@ -5,49 +5,44 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view> <view class="bill-page">
<view class="wrap"> <view class="bill-page__body">
<view class="bg-white" v-if="cate == 0"> <view class="bg-white" v-if="cate == 0">
<uv-tabs activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :scrollable="false" swiperWidth="750"></uv-tabs> <uv-tabs :activeColor="balanceTabActiveColor" ref="tabs" :list="list" :current="current" @change="change" :scrollable="false" swiperWidth="750"></uv-tabs>
</view> </view>
<view class="bg-white" v-else> <view class="bg-white" v-else>
<uv-tabs activeColor="#f29100" ref="tabs" :list="list1" :current="current" @change="change" :scrollable="false" swiperWidth="750"></uv-tabs> <uv-tabs :activeColor="balanceTabActiveColor" ref="tabs" :list="list1" :current="current" @change="change" :scrollable="false" swiperWidth="750"></uv-tabs>
</view> </view>
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"> <swiper class="bill-page__swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item class="bill-page__swiper-item" v-for="(item, index) in orderList" :key="index">
<swiper-item class="swiper-item" v-for="(item, index) in orderList" :key="index"> <scroll-view scroll-y class="bill-page__scroll" @scrolltolower="reachBottom">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom"> <view class="bill-page__content">
<view class="page-box">
<view v-if="item.length == 0"> <view v-if="item.length == 0">
<view class="centre" v-if="loadStatus[index] != 'loading'"> <view class="bill-empty" v-if="loadStatus[index] != 'loading'">
<view class="explain"> <view class="bill-empty__text">
您还没有相关的账单 您还没有相关的账单
<view class="tips">可以去看看有那些想买的</view> <view class="bill-empty__tips">可以去看看有那些想买的</view>
</view> </view>
<view class="btn"> <view class="bill-empty__btn">
<navigator open-type="switchTab" url="/pages/menu/menu">随便逛逛</navigator> <navigator open-type="switchTab" url="/pages/menu/menu">随便逛逛</navigator>
</view> </view>
</view> </view>
<view v-else> <view v-else>
<u-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></u-loadmore> <u-loadmore :status="loadStatus[index]" :bgColor="balancePageBg"></u-loadmore>
</view> </view>
</view> </view>
<view v-else> <view v-else>
<view class="order" v-for="(res, resIndex) in orderList[index]" :key="resIndex"> <view class="bill-item" v-for="(res, resIndex) in orderList[index]" :key="resIndex">
<view class="type"> <view class="bill-item__meta">
<view>{{res.title}}</view> <view>{{res.title}}</view>
<view>{{res.mark}}</view> <view>{{res.mark}}</view>
</view> </view>
<view class="total"> <view class="bill-item__amount">
<view> <view>{{res.pm == 0 ? '-':'＋'}}￥{{res.number}}元</view>
{{res.pm == 0 ? '-':'＋'}}￥{{res.number}}元 <view>{{formatDateTime(res.createTime)}}</view>
</view>
<view>
{{formatDateTime(res.createTime)}}
</view>
</view> </view>
</view> </view>
<u-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></u-loadmore> <u-loadmore :status="loadStatus[index]" :bgColor="balancePageBg"></u-loadmore>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
@@ -107,6 +102,10 @@ const pageSize = ref(20)
const tabs = ref() const tabs = ref()
const cate = ref(0) const cate = ref(0)
// 与下方 SCSS token 保持一致，供模板组件颜色属性使用
const balanceTabActiveColor = '#f29100'
const balancePageBg = '#f2f2f2'
onLoad((option) => { onLoad((option) => {
console.log('cate:',option.cate) console.log('cate:',option.cate)
cate.value = option.cate cate.value = option.cate
@@ -154,76 +153,109 @@ const animationfinish = ({ detail }) => {
</script> </script>
<style> <style lang="scss">
$balance-page-bg: #f2f2f2;
/* #ifndef H5 */ /* #ifndef H5 */
page { page {
height: 100%; height: 100%;
background-color: #f2f2f2; background-color: $balance-page-bg;
} }
/* #endif */ /* #endif */
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.order { // 账单页局部 token（与 uni.scss 全局变量配合；$balance-page-bg 与上方及 script 常量保持一致）
width: 710rpx; $balance-page-bg: #f2f2f2;
background-color: #ffffff; $balance-tab-active: #f29100;
margin: 20rpx auto; $balance-card-width: 710rpx;
border-radius: 20rpx; $balance-card-radius: 20rpx;
box-sizing: border-box; $balance-card-padding: $spacing-row-base;
padding: 20rpx; $balance-card-gap: $spacing-row-base;
font-size: 28rpx; $balance-empty-margin-top: 200rpx;
$balance-empty-btn-width: 200rpx;
$balance-empty-btn-radius: 32rpx;
$balance-empty-btn-height: 64rpx;
$balance-empty-image-size: 164rpx;
$balance-gradient-start: #f9745a;
$balance-gradient-end: #ff9e01;
.total { .bill-page {
display: inline-block; --balance-page-bg: #{$balance-page-bg};
text-align: right; --balance-tab-active: #{$balance-tab-active};
.total-price {
font-size: 36rpx;
}
float: right;
}
.type {
display: inline-block;
&__body {
display: flex;
flex-direction: column;
width: 100%;
height: calc(100vh - var(--window-top));
} }
} &__swiper {
.centre { flex: 1;
text-align: center;
margin: 200rpx auto;
font-size: 32rpx;
image {
width: 164rpx;
height: 164rpx;
border-radius: 50%;
margin-bottom: 20rpx;
} }
.tips {
font-size: 24rpx; &__swiper-item {
color: #999999; height: 100%;
margin-top: 20rpx;
} }
.btn {
margin: 80rpx auto; &__scroll {
width: 200rpx; width: 100%;
border-radius: 32rpx; height: 100%;
line-height: 64rpx;
color: #ffffff;
font-size: 26rpx;
background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
} }
} }
.wrap {
.bill-item {
display: flex; display: flex;
flex-direction: column; align-items: flex-start;
height: calc(100vh - var(--window-top)); justify-content: space-between;
width: 100%; box-sizing: border-box;
width: $balance-card-width;
margin: $balance-card-gap auto;
padding: $balance-card-padding;
font-size: $font-size-base;
background-color: $text-color-white;
border-radius: $balance-card-radius;
&__meta,
&__amount {
display: flex;
flex-direction: column;
}
&__amount {
flex-shrink: 0;
text-align: right;
}
} }
.swiper-box {
flex: 1; .bill-empty {
} margin: $balance-empty-margin-top auto;
.swiper-item { font-size: $font-size-lg;
height: 100%; text-align: center;
image {
width: $balance-empty-image-size;
height: $balance-empty-image-size;
margin-bottom: $balance-card-gap;
border-radius: $border-radius-circle;
}
&__tips {
margin-top: $balance-card-gap;
font-size: $font-size-sm;
color: $text-color-assist;
}
&__btn {
width: $balance-empty-btn-width;
margin: 80rpx auto;
font-size: 26rpx;
line-height: $balance-empty-btn-height;
color: $text-color-white;
border-radius: $balance-empty-btn-radius;
background: linear-gradient(270deg, $balance-gradient-start 0%, $balance-gradient-end 100%);
}
} }
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/coupons/coupons.vue
+216 -216
View File
@@ -5,85 +5,89 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="container position-relative w-100 h-100 overflow-hidden"> <view class="container coupons-page position-relative w-100 h-100 overflow-hidden">
<view class="exchange-box"> <view class="coupons-exchange">
<view class="input-box"> <view class="coupons-exchange__input">
<uv-search placeholder="请输入兑换码" v-model="exchange_code" @click="exchange"></uv-search> <uv-search placeholder="请输入兑换码" v-model="exchange_code" @click="exchange"></uv-search>
</view> </view>
</view> </view>
<view class="tabbar"> <view class="coupons-tabbar">
<view class="tab" :class="{active: activeTabIndex == index}" <view
v-for="(item, index) in tabs" :key="index" @tap="handleTab(index)"> class="coupons-tab"
<view class="title">{{ item.title }}</view> :class="{ 'coupons-tab--active': activeTabIndex == index }"
v-for="(item, index) in tabs"
:key="index"
@tap="handleTab(index)"
>
<view class="coupons-tab__title">{{ item.title }}</view>
</view> </view>
</view> </view>
<view class="flex-fill"> <view class="flex-fill">
<scroll-view scroll-y class="coupon-list" @scrolltolower="getCoupons(activeTabIndex)"> <scroll-view scroll-y class="coupons-list" @scrolltolower="getCoupons(activeTabIndex)">
<view class="wrapper" v-if="0 === activeTabIndex"> <view class="coupons-list__wrapper" v-if="0 === activeTabIndex">
<uv-empty v-if="myCoupons.length == 0" mode="list"></uv-empty> <uv-empty v-if="myCoupons.length == 0" mode="list"></uv-empty>
<view class="coupon" v-for="(item, index) in myCoupons" :key="index" @tap="openDetailModal(item,index)"> <view class="coupons-item" v-for="(item, index) in myCoupons" :key="index" @tap="openDetailModal(item,index)">
<view class="taobao"> <view class="coupons-ticket">
<view class="ticket"> <view class="coupons-ticket__body">
<view class="left"> <view class="coupons-ticket__left">
<image <image
class="picture" class="coupons-ticket__picture"
:src="item.image" :src="item.image"
mode="aspectFill" mode="aspectFill"
></image> ></image>
<view class="introduce"> <view class="coupons-ticket__intro">
<view class="top"> <view class="coupons-ticket__value">
￥ ￥
<text class="big">{{item.value}}</text> <text class="coupons-ticket__amount">{{item.value}}</text>
<view> <view>
满{{item.least}}减{{item.value}} 满{{item.least}}减{{item.value}}
</view> </view>
</view> </view>
<view class="type">{{ item.title }}</view> <view class="coupons-ticket__type">{{ item.title }}</view>
<view class="date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view> <view class="coupons-ticket__date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view>
</view> </view>
</view> </view>
<view class="right" @click.stop="" v-if="activeTabIndex == 1"> <view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 1">
<view class="use immediate-use" :round="true" @tap="receive(item, index)" >立即领取</view> <view class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" @tap="receive(item, index)">立即领取</view>
</view> </view>
<view class="right" @click.stop="" v-if="activeTabIndex == 0"> <view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 0">
<view v-if="item.status == 0" class="use immediate-use" :round="true" @tap="useCouponWith(item)" >立即使用</view> <view v-if="item.status == 0" class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" @tap="useCouponWith(item)">立即使用</view>
<view v-else class="used">已使用</view> <view v-else class="coupons-ticket__btn coupons-ticket__btn--used">已使用</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="wrapper" v-if="1 === activeTabIndex"> <view class="coupons-list__wrapper" v-if="1 === activeTabIndex">
<uv-empty v-if="notCoupons.length == 0" mode="list"></uv-empty> <uv-empty v-if="notCoupons.length == 0" mode="list"></uv-empty>
<view class="coupon" v-for="(item, index) in notCoupons" :key="index" @tap="openDetailModal(item,index)"> <view class="coupons-item" v-for="(item, index) in notCoupons" :key="index" @tap="openDetailModal(item,index)">
<view class="taobao"> <view class="coupons-ticket">
<view class=""> <view class="coupons-ticket__body">
<view class="left"> <view class="coupons-ticket__left">
<image <image
class="picture" class="coupons-ticket__picture"
:src="item.image" :src="item.image"
mode="aspectFill" mode="aspectFill"
></image> ></image>
<view class="introduce"> <view class="coupons-ticket__intro">
<view class="top"> <view class="coupons-ticket__value">
￥ ￥
<text class="big">{{item.value}}</text> <text class="coupons-ticket__amount">{{item.value}}</text>
<view> <view>
满{{item.least}}减{{item.value}} 满{{item.least}}减{{item.value}}
</view> </view>
</view> </view>
<view class="type">{{ item.title }}</view> <view class="coupons-ticket__type">{{ item.title }}</view>
<view class="date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view> <view class="coupons-ticket__date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view>
</view> </view>
</view> </view>
<view class="right" @click.stop="" v-if="activeTabIndex == 1"> <view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 1">
<!-- <view class="use immediate-use" :round="true" @tap="receive(item, index)" >立即领取</view> --> <view class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" v-if="item.isReceive == 0" @tap="receive(item, index)">立即领取</view>
<view class="use immediate-use" :round="true" v-if="item.isReceive == 0" @tap="receive(item, index)" >立即领取</view> <view v-else class="coupons-ticket__btn coupons-ticket__btn--used immediate-use">已领取</view>
<view v-else class="used immediate-use">已领取</view>
</view> </view>
<view class="right" @click.stop="" v-if="activeTabIndex == 0"> <view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 0">
<view v-if="item.status == 0" class="use immediate-use" :round="true" @tap="useCouponWith(item)" >立即使用</view> <view v-if="item.status == 0" class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" @tap="useCouponWith(item)">立即使用</view>
<view v-else class="used">已使用</view> <view v-else class="coupons-ticket__btn coupons-ticket__btn--used">已使用</view>
</view> </view>
</view> </view>
</view> </view>
@@ -269,216 +273,212 @@ const receive = async(coupon,index) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 优惠券页局部 token（与 uni.scss 全局变量配合）
$coupons-exchange-height: 100rpx;
$coupons-exchange-input-width: 70%;
$coupons-tabbar-height: 80rpx;
$coupons-tab-indicator-height: 5rpx;
$coupons-tab-title-padding-y: 15rpx;
$coupons-list-offset-nav: 120rpx;
$coupons-list-offset-header: 200rpx;
$coupons-list-padding-x: $spacing-row-base;
$coupons-item-gap: $spacing-row-lg;
$coupons-item-radius: $border-radius-base;
$coupons-notch-size: 30rpx;
$coupons-notch-offset: 65rpx;
$coupons-ticket-radius: 20rpx;
$coupons-ticket-divider: $border-color-light;
$coupons-ticket-left-width: 70%;
$coupons-ticket-right-width: 30%;
$coupons-ticket-padding: $spacing-row-base;
$coupons-ticket-right-padding-y: 40rpx;
$coupons-picture-size: 190rpx;
$coupons-amount-font-size: 60rpx;
$coupons-date-font-size: 20rpx;
$coupons-intro-gap: 10rpx;
$coupons-btn-radius: 40rpx;
$coupons-btn-padding-x: 20rpx;
$coupons-btn-line-height: 40rpx;
$coupons-btn-margin-left: 20rpx;
/* #ifdef H5 */ /* #ifdef H5 */
page { page {
height: 100%; height: 100%;
} }
/* #endif */ /* #endif */
.container { .coupons-page {
--coupons-picture-size: #{$coupons-picture-size};
--coupons-list-offset-nav: #{$coupons-list-offset-nav};
--coupons-list-offset-header: #{$coupons-list-offset-header};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.exchange-box { .coupons-exchange {
flex-shrink: 0; flex-shrink: 0;
height: 100rpx; display: flex;
background-color: #ffffff;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: $coupons-exchange-height;
background-color: $text-color-white;
.input-box { &__input {
width: 70%; width: $coupons-exchange-input-width;
} }
} }
.tabbar { .coupons-tabbar {
flex-shrink: 0; flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%; width: 100%;
height: 80rpx; height: $coupons-tabbar-height;
display: flex;
align-items: center;
justify-content: center;
.tab {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: $font-size-base;
color: $text-color-base;
position: relative;
.title {
padding: 15rpx 0;
}
&.active {
color: $color-primary;
.title {
border-bottom: 5rpx solid $color-primary;
}
}
}
} }
.coupons-tab {
.coupon-list { flex: 1;
height: calc(100vh - 120rpx - 200rpx);
/* #ifdef H5 */
height: calc(100vh - 120rpx - 200rpx - 44px);
/* #endif */
}
.wrapper {
padding: 0 20rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
font-size: $font-size-base;
color: $text-color-base;
position: relative;
.coupon { &__title {
padding: $coupons-tab-title-padding-y 0;
}
&--active {
color: $color-primary;
.coupons-tab__title {
border-bottom: $coupons-tab-indicator-height solid $color-primary;
}
}
}
.coupons-list {
height: calc(100vh - var(--coupons-list-offset-nav) - var(--coupons-list-offset-header));
/* #ifdef H5 */
height: calc(100vh - var(--coupons-list-offset-nav) - var(--coupons-list-offset-header) - 44px);
/* #endif */
&__wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #FFFFFF; padding: 0 $coupons-list-padding-x;
margin-bottom: 30rpx;
//padding: 0 30rpx;
border-radius: 6rpx;
box-shadow: 0 10rpx 10rpx -10rpx rgba(15, 15, 15, 0.1);
position: relative;
&::before {
content: "";
position: absolute;
background-color: $bg-color;
width: 30rpx;
height: 30rpx;
bottom: 65rpx;
left: -15rpx;
border-radius: 100%;
}
&::after {
content: "";
position: absolute;
background-color: $bg-color;
width: 30rpx;
height: 30rpx;
bottom: 65rpx;
right: -15rpx;
border-radius: 100%;
}
.detail {
padding: 20rpx 0;
position: relative;
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 1rpx dashed #c6c6c6;
transform: scaleY(0.5);
}
.coupon-img {
width: 150rpx;
height: 150rpx;
margin-right: 40rpx;
}
}
} }
} }
.use-coupon-btn { .coupons-item {
width: 95%; display: flex;
border-radius: 50rem !important; flex-direction: column;
position: relative;
margin-bottom: $coupons-item-gap;
background-color: $text-color-white;
border-radius: $coupons-item-radius;
box-shadow: $box-shadow;
&::before,
&::after {
content: '';
position: absolute;
bottom: $coupons-notch-offset;
width: $coupons-notch-size;
height: $coupons-notch-size;
background-color: $bg-color;
border-radius: $border-radius-circle;
}
&::before {
left: calc(-1 * #{$coupons-notch-size} / 2);
}
&::after {
right: calc(-1 * #{$coupons-notch-size} / 2);
}
} }
.coupons-ticket {
background-color: $text-color-white;
.taobao { &__body {
background-color: white; display: flex;
.title { }
&__left {
display: flex;
width: $coupons-ticket-left-width;
padding: $coupons-ticket-padding;
background-color: $text-color-white;
border-radius: $coupons-ticket-radius;
border-right: dashed 2rpx $coupons-ticket-divider;
}
&__picture {
flex-shrink: 0;
width: var(--coupons-picture-size);
height: var(--coupons-picture-size);
border-radius: $coupons-ticket-radius;
}
&__intro {
margin-left: $coupons-intro-gap;
min-width: 0;
}
&__value {
font-size: $font-size-base;
color: $uv-warning;
.coupons-ticket__amount {
margin-right: $coupons-intro-gap;
font-size: $coupons-amount-font-size;
font-weight: bold;
}
}
&__type {
font-size: $font-size-base;
color: $uv-info-dark;
}
&__date {
margin-top: $coupons-intro-gap;
font-size: $coupons-date-font-size;
color: $uv-info-dark;
}
&__right {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; width: $coupons-ticket-right-width;
margin-bottom: 20rpx; padding: $coupons-ticket-right-padding-y $coupons-ticket-padding;
font-size: 30rpx; background-color: $text-color-white;
.left { border-radius: $coupons-ticket-radius;
display: flex;
align-items: center;
}
} }
.ticket {
display: flex; &__btn {
.left { height: auto;
width: 70%; margin-left: $coupons-btn-margin-left;
padding: 20rpx; padding: 0 $coupons-btn-padding-x;
background-color: white;//rgb(255, 245, 244); font-size: $font-size-sm;
border-radius: 20rpx; line-height: $coupons-btn-line-height;
border-right: dashed 2rpx rgb(224, 215, 211); border-radius: $coupons-btn-radius;
display: flex; color: $text-color-white !important;
.picture {
//width: 172rpx; &--use {
border-radius: 20rpx; background-color: $uv-warning !important;
width: 190rpx;
height: 190rpx;
}
.introduce {
margin-left: 10rpx;
.top{
color:$uv-warning;
font-size: 28rpx;
.big{
font-size: 60rpx;
font-weight: bold;
margin-right: 10rpx;
}
}
.type{
font-size: 28rpx;
color: $uv-info-dark;
}
.date{
margin-top: 10rpx;
font-size: 20rpx;
color: $uv-info-dark;
}
}
} }
.right {
width: 30%; &--used {
padding: 40rpx 20rpx; background-color: $uv-info-dark !important;
background-color: white;//rgb(255, 245, 244);
border-radius: 20rpx;
display: flex;
align-items: center;
.use {
height: auto;
padding: 0 20rpx;
font-size: 24rpx;
border-radius: 40rpx;
color: #ffffff!important;
background-color: $uv-warning!important;
line-height: 40rpx;
color: rgb(117, 142, 165);
margin-left: 20rpx;
}
.used {
height: auto;
padding: 0 20rpx;
font-size: 24rpx;
border-radius: 40rpx;
color: #ffffff!important;
background-color: $uv-info-dark!important;
line-height: 40rpx;
color: rgb(117, 142, 165);
margin-left: 20rpx;
}
} }
} }
} }
yshop-drink-uniapp-vue3/pages/components/pages/login/login.vue
+130 -115
View File
@@ -6,49 +6,45 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="wrap"> <view class="login-page">
<view class="top"></view> <view class="login-page__form">
<view class="content"> <view class="login-page__title">欢迎登录</view>
<view class="title">欢迎登录</view>
<input class="u-border-bottom" type="number" v-model="mobile" placeholder="请输入手机号" /> <input class="login-page__input u-border-bottom" type="number" v-model="mobile" placeholder="请输入手机号" />
<view class="tips">未注册的手机号验证后自动创建账号</view> <view class="login-page__tips">未注册的手机号验证后自动创建账号</view>
<view class="login-page__captcha-row">
<view style="display: flex;"> <view class="login-page__captcha-col">
<view style="width: 50%;"> <input class="login-page__input login-page__input--captcha u-border-bottom" type="number" v-model="captcha" placeholder="请输入验证码" />
<input style="height: 100rpx;" class="u-border-bottom" type="number" v-model="captcha" placeholder="请输入验证码" />
</view> </view>
<view style="width: 50%;"> <view class="login-page__captcha-col">
<button style="height: 100rpx;" @tap="getCaptcha" :style="[captchaStyle]" class="getCaptcha"> <button
class="login-page__btn login-page__btn--captcha"
:class="{ 'login-page__btn--active': isCaptchaBtnActive }"
@tap="getCaptcha"
>
{{captchaText}} {{captchaText}}
<uv-code :seconds="seconds" @end="endCaptcha" @start="startCaptcha" ref="uCode" @change="changeCapcha"></uv-code> <uv-code :seconds="seconds" @end="endCaptcha" @start="startCaptcha" ref="uCode" @change="changeCapcha"></uv-code>
<!-- <u-verification-code :seconds="seconds" @end="endCaptcha" @change="changeCapcha" @start="startCaptcha" ref="uCode" >
</u-verification-code> -->
</button> </button>
</view> </view>
</view> </view>
<button @tap="submit" style="color:#fff;background-color: #f9ae3d;" type="primary" class="login">登录</button> <button @tap="submit" type="primary" class="login-page__btn login-page__btn--submit login-page__btn--active">登录</button>
</view> </view>
<view class="buttom"> <view class="login-page__footer">
<view class="loginType"> <view class="login-page__oauth">
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<button type="primary" size="default" class="login-btn" open-type="getPhoneNumber" @getphonenumber="loginForWechatMini"> <button type="primary" size="default" class="login-page__wechat-btn" open-type="getPhoneNumber" @getphonenumber="loginForWechatMini">
<!-- <image src="/static/images/mine/wechat.png"></image> -->
手机号快捷登录 手机号快捷登录
</button> </button>
<!-- #endif --> <!-- #endif -->
</view> </view>
<view class="hint"> <view class="login-page__agreement">
<!-- <label class="label"> -->
<radio value="isChecked" @tap.stop="onChange" /> <radio value="isChecked" @tap.stop="onChange" />
我已经阅读并遵守 我已经阅读并遵守
<text class="link" @tap="serv(29,'用户协议')">《用户协议》</text>与 <text class="login-page__link" @tap="serv(29,'用户协议')">《用户协议》</text>与
<text class="link" @tap="serv(30,'隐私政策')">《隐私政策》</text> <text class="login-page__link" @tap="serv(30,'隐私政策')">《隐私政策》</text>
<!-- </label> -->
</view> </view>
</view> </view>
<uv-toast ref="uToast"></uv-toast> <uv-toast ref="uToast"></uv-toast>
@@ -83,13 +79,8 @@ const openid = ref(main.openid)
const uToast = ref() const uToast = ref()
const uCode = ref() const uCode = ref()
const captchaStyle = computed(() => { const isCaptchaBtnActive = computed(() => {
let style = {}; return Boolean(mobile.value) && captchaText.value === '获取验证码';
if(mobile.value && captchaText.value == '获取验证码') {
style.color = "#fff";
style.backgroundColor = '#f9ae3d';
}
return style;
}); });
onShow(() => { onShow(() => {
@@ -255,101 +246,125 @@ const onChange = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { $login-content-width: 600rpx;
background-color: #ffffff; $login-title-size: 60rpx;
font-size: 28rpx; $login-title-margin-bottom: 100rpx;
$login-input-height: 100rpx;
$login-btn-font-size: 30rpx;
$login-btn-padding-y: 12rpx;
$login-submit-margin-top: 40rpx;
$login-oauth-padding: 80rpx;
$login-wechat-btn-bg: #1aad19;
$login-wechat-icon-width: 36rpx;
$login-wechat-icon-height: 30rpx;
$login-agreement-font-size: 20rpx;
$login-agreement-padding-y: 20rpx;
$login-agreement-padding-x: 40rpx;
.login-page {
--login-content-width: #{$login-content-width};
--login-input-height: #{$login-input-height};
--login-btn-font-size: #{$login-btn-font-size};
background-color: $text-color-white;
font-size: $font-size-base;
position: relative; position: relative;
height: 100%; height: 100%;
.content {
width: 600rpx; &__form {
width: var(--login-content-width);
margin: 0 auto; margin: 0 auto;
}
.title { &__title {
text-align: left; text-align: left;
font-size: 60rpx; font-size: $login-title-size;
font-weight: 500; font-weight: 500;
margin-bottom: 100rpx; margin-bottom: $login-title-margin-bottom;
} }
input {
text-align: left;
margin-bottom: 10rpx;
padding-bottom: 6rpx;
}
.tips {
color: $uv-info;
margin-bottom: 60rpx;
margin-top: 8rpx;
}
.getCaptcha {
background-color: rgb(253, 243, 208);
color: $uv-tips-color;
border: none;
font-size: 30rpx;
padding: 12rpx 0;
&::after { &__input {
border: none; text-align: left;
} margin-bottom: 10rpx;
} padding-bottom: 6rpx;
.login {
background-color: rgb(253, 243, 208); &--captcha {
color: $uv-tips-color; height: var(--login-input-height);
border: none;
font-size: 30rpx;
padding: 12rpx 0;
margin-top: 40rpx;
&::after {
border: none;
}
}
.alternative {
color: $uv-tips-color;
display: flex;
justify-content: space-between;
margin-top: 30rpx;
} }
} }
.buttom {
//position: absolute; &__tips {
color: $uv-info;
margin: 8rpx 0 60rpx;
}
&__captcha-row {
display: flex;
}
&__captcha-col {
width: 50%;
}
&__btn {
height: var(--login-input-height);
border: none;
font-size: var(--login-btn-font-size);
padding: $login-btn-padding-y 0;
background-color: $uv-warning-light;
color: $uv-tips-color;
&::after {
border: none;
}
&--active {
background-color: $uv-warning;
color: $text-color-white;
}
&--submit {
margin-top: $login-submit-margin-top;
}
}
&__footer {
bottom: 0; bottom: 0;
//display: flex; }
//flex-direction: column;
//align-items: center;
//justify-content: center;
.loginType {
padding: 80rpx;
//justify-content:space-between;
.login-btn { &__oauth {
background-color: #1aad19!important; padding: $login-oauth-padding;
width: 100%; }
border-radius: 50rem !important;
display: flex; &__wechat-btn {
align-items: center; width: 100%;
justify-content: center; border-radius: 50rem;
padding: 10rpx 0; display: flex;
text-align: center; align-items: center;
image { justify-content: center;
width: 36rpx; padding: 10rpx 0;
height: 30rpx; text-align: center;
margin-right: 10rpx; background-color: $login-wechat-btn-bg !important;
vertical-align: middle;
} image {
} width: $login-wechat-icon-width;
height: $login-wechat-icon-height;
margin-right: 10rpx;
vertical-align: middle;
} }
}
.hint { &__agreement {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 20rpx 40rpx; padding: $login-agreement-padding-y $login-agreement-padding-x;
font-size: 20rpx; font-size: $login-agreement-font-size;
color: $uv-tips-color; color: $uv-tips-color;
}
.link { &__link {
color: $uv-warning; color: $uv-warning;
}
}
} }
} }
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/login/logout.vue
+8 -8
View File
@@ -6,8 +6,8 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="top"> <view class="logout-page">
<button type="primary" size="default" class="login-btn" @click="logout"> <button type="primary" size="default" class="logout-page__btn" @click="logout">
确定退出登录 确定退出登录
</button> </button>
<uv-toast ref="uToast"></uv-toast> <uv-toast ref="uToast"></uv-toast>
@@ -45,12 +45,12 @@ const logout = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.logout-page {
display: flex;
height: 100%;
.top { &__btn {
display: flex; margin: auto;
height: 100%;
}
button{
margin: auto;
} }
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/mine/content.vue
+6 -1
View File
@@ -6,7 +6,7 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="bg-white p-2"> <view class="mine-content">
<rich-text :nodes="content"></rich-text> <rich-text :nodes="content"></rich-text>
</view> </view>
</layout> </layout>
@@ -44,5 +44,10 @@ const getContent = async(id) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$mine-content-padding: $spacing-row-base;
.mine-content {
padding: $mine-content-padding;
background-color: $text-color-white;
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/mine/userinfo.vue
+103 -63
View File
@@ -5,19 +5,19 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="container d-flex flex-column"> <view class="userinfo-page d-flex flex-column">
<view class="flex-fill form"> <view class="flex-fill userinfo-page__form">
<list-cell :hover="false"> <list-cell :hover="false">
<view class="form-input w-100 d-flex align-items-center"> <view class="userinfo-page__field w-100 d-flex align-items-center">
<view class="label">头像</view> <view class="userinfo-page__label">头像</view>
<view class="input flex-fill"> <view class="userinfo-page__input flex-fill">
<view class="form-input w-100 d-flex align-items-center" style="position: relative;"> <view class="userinfo-page__field userinfo-page__field--relative w-100 d-flex align-items-center">
<view class="flex user-box align-items-center"> <view class="userinfo-page__avatar-row d-flex align-items-center">
<view class="mr-1"> <view class="mr-1">
<uv-avatar :src="member.avatar" size="60"></uv-avatar> <uv-avatar :src="member.avatar" size="60"></uv-avatar>
</view> </view>
<view v-if="!member.avatar" class="flex-1" style="right:0;height: 60rpx;"> <view v-if="!member.avatar" class="flex-1 userinfo-page__change-avatar">
<button style="background-color: #09b4f1;color:#fff;" size='mini' open-type="chooseAvatar" @chooseavatar="chooseavatar" type="success">更改头像</button> <button size='mini' open-type="chooseAvatar" @chooseavatar="chooseavatar" type="success">更改头像</button>
</view> </view>
</view> </view>
</view> </view>
@@ -26,37 +26,45 @@
</list-cell> </list-cell>
<list-cell :hover="false"> <list-cell :hover="false">
<view class="form-input w-100 d-flex align-items-center"> <view class="userinfo-page__field w-100 d-flex align-items-center">
<view class="label">昵称</view> <view class="userinfo-page__label">昵称</view>
<view class="input flex-fill"> <view class="userinfo-page__input flex-fill">
<input type="nickname" placeholder="请填写昵称" placeholder-class="text-color-assist font-size-base" <input type="nickname" placeholder="请填写昵称" placeholder-class="text-color-assist font-size-base"
v-model="member.nickname"> v-model="member.nickname">
</view> </view>
</view> </view>
</list-cell> </list-cell>
<list-cell :hover="false"> <list-cell :hover="false">
<view class="form-input w-100 d-flex align-items-center" style="position: relative;"> <view class="userinfo-page__field userinfo-page__field--relative w-100 d-flex align-items-center">
<view class="label">手机号码</view> <view class="userinfo-page__label">手机号码</view>
<view class="input flex-fill"> <view class="userinfo-page__input flex-fill">
<input type="text" v-model="member.mobile" disabled> <input type="text" v-model="member.mobile" disabled>
</view> </view>
</view> </view>
</list-cell> </list-cell>
<list-cell :hover="false"> <list-cell :hover="false">
<view class="form-input w-100 d-flex align-items-center"> <view class="userinfo-page__field w-100 d-flex align-items-center">
<view class="label">性别</view> <view class="userinfo-page__label">性别</view>
<view class="input flex-fill"> <view class="userinfo-page__input flex-fill">
<view class="radio-group"> <view class="userinfo-page__radio-group">
<view class="radio" :class="{'checked': member.gender == '0'}" style="margin-right: 10rpx;" @tap="member.gender=0">先生</view> <view
<view class="radio" :class="{'checked': member.gender == '1'}" @tap="member.gender=1">女士</view> class="userinfo-page__radio"
:class="{ 'userinfo-page__radio--checked': member.gender == '0' }"
@tap="member.gender=0"
>先生</view>
<view
class="userinfo-page__radio"
:class="{ 'userinfo-page__radio--checked': member.gender == '1' }"
@tap="member.gender=1"
>女士</view>
</view> </view>
</view> </view>
</view> </view>
</list-cell> </list-cell>
<list-cell :hover="false" :arrow="!member.birthday"> <list-cell :hover="false" :arrow="!member.birthday">
<view class="form-input w-100 d-flex align-items-center"> <view class="userinfo-page__field w-100 d-flex align-items-center">
<view class="label">生日</view> <view class="userinfo-page__label">生日</view>
<view class="input flex-fill"> <view class="userinfo-page__input flex-fill">
<picker mode="date" :value="member.birthday" :start="startDate" :end="endDate" @change="handleDateChange"> <picker mode="date" :value="member.birthday" :start="startDate" :end="endDate" @change="handleDateChange">
{{member.birthday ? member.birthday : '无'}} {{member.birthday ? member.birthday : '无'}}
</picker> </picker>
@@ -64,16 +72,16 @@
</view> </view>
</list-cell> </list-cell>
<list-cell :hover="false" last> <list-cell :hover="false" last>
<view class="form-input w-100 d-flex align-items-center"> <view class="userinfo-page__field w-100 d-flex align-items-center">
<view class="label">加入时间</view> <view class="userinfo-page__label">加入时间</view>
<view class="input flex-fill"> <view class="userinfo-page__input flex-fill">
<input type="text" v-model="member.createTime" disabled> <input type="text" v-model="member.createTime" disabled>
</view> </view>
</view> </view>
</list-cell> </list-cell>
</view> </view>
<view class="btn-box d-flex align-items-center just-content-center"> <view class="userinfo-page__actions d-flex align-items-center just-content-center">
<button type="primary" class="save-btn" @tap="save">保存</button> <button type="primary" class="userinfo-page__save-btn" @tap="save">保存</button>
</view> </view>
</view> </view>
@@ -177,55 +185,87 @@ const save = async() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 用户设置页局部 token（与 uni.scss 全局变量配合）
$userinfo-padding-y: 20rpx;
$userinfo-padding-x: $spacing-row-lg;
$userinfo-form-radius: 8rpx;
$userinfo-label-width: 160rpx;
$userinfo-radio-gap: 10rpx;
$userinfo-radio-padding-y: 10rpx;
$userinfo-radio-padding-x: 30rpx;
$userinfo-radio-border-width: 2rpx;
$userinfo-avatar-btn-height: 60rpx;
$userinfo-save-btn-width: 90%;
$userinfo-save-btn-radius: 50rem;
page { page {
height: 100%; height: 100%;
} }
.container { .userinfo-page {
padding: 20rpx 30rpx; --userinfo-padding-y: #{$userinfo-padding-y};
} --userinfo-padding-x: #{$userinfo-padding-x};
--userinfo-label-width: #{$userinfo-label-width};
--userinfo-radio-gap: #{$userinfo-radio-gap};
--userinfo-avatar-btn-height: #{$userinfo-avatar-btn-height};
--userinfo-save-btn-width: #{$userinfo-save-btn-width};
.form { padding: var(--userinfo-padding-y) var(--userinfo-padding-x);
border-radius: 8rpx;
}
.form-input { &__form {
.label { border-radius: $userinfo-form-radius;
width: 160rpx; }
&__field {
&--relative {
position: relative;
}
}
&__label {
width: var(--userinfo-label-width);
font-size: $font-size-base; font-size: $font-size-base;
color: $text-color-base; color: $text-color-base;
} }
.input { &__radio-group {
}
.radio-group {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
gap: var(--userinfo-radio-gap);
}
.radio { &__radio {
padding: 10rpx 30rpx; padding: $userinfo-radio-padding-y $userinfo-radio-padding-x;
border-radius: 6rpx; border-radius: $border-radius-base;
border: 2rpx solid $text-color-assist; border: $userinfo-radio-border-width solid $text-color-assist;
color: $text-color-assist; color: $text-color-assist;
font-size: $font-size-base; font-size: $font-size-base;
&.checked { &--checked {
background-color: $color-primary; background-color: $color-primary;
color: $text-color-white; color: $text-color-white;
border: 2rpx solid $color-primary; border-color: $color-primary;
} }
}
&__actions {
height: calc((100vh - var(--userinfo-padding-y) * 2) / 2);
}
&__save-btn {
width: var(--userinfo-save-btn-width);
border-radius: $userinfo-save-btn-radius !important;
font-size: $font-size-lg;
}
&__change-avatar {
right: 0;
height: var(--userinfo-avatar-btn-height);
button {
background-color: $color-primary;
color: $text-color-white;
} }
} }
} }
.btn-box {
height: calc((100vh - 40rpx) / 2);
}
.save-btn {
width: 90%;
border-radius: 50rem !important;
font-size: $font-size-lg;
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/orders/detail.vue
+202 -181
View File
@@ -5,10 +5,10 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="container" style="padding:20rpx;"> <view class="container order-detail-page">
<view style="padding-bottom: 100rpx;"> <view class="order-detail-page__body">
<view class="bg-white"> <view class="bg-white">
<view class="section"> <view class="order-detail-section">
<!-- store info begin --> <!-- store info begin -->
<list-cell :hover="false"> <list-cell :hover="false">
<view class="w-100 d-flex align-items-center"> <view class="w-100 d-flex align-items-center">
@@ -16,8 +16,8 @@
<view class="w-100 font-size-lg text-color-base text-truncate">{{ order.shop.name }}</view> <view class="w-100 font-size-lg text-color-base text-truncate">{{ order.shop.name }}</view>
</view> </view>
<view class="d-flex justify-content-end align-items-center w-40"> <view class="d-flex justify-content-end align-items-center w-40">
<view class="iconfont-yshop icon-mobile" @click="makePhoneCall(order.shop)" style="font-size: 45rpx;margin-right: 40rpx;"></view> <view class="iconfont-yshop icon-mobile order-detail-page__shop-icon" @click="makePhoneCall(order.shop)"></view>
<view class="iconfont-yshop icon-location" @click="openLocation(order.shop)" style="font-size: 45rpx;"></view> <view class="iconfont-yshop icon-location order-detail-page__shop-icon order-detail-page__shop-icon--last" @click="openLocation(order.shop)"></view>
</view> </view>
</view> </view>
</list-cell> </list-cell>
@@ -25,50 +25,50 @@
<list-cell :hover="false" padding="50rpx 30rpx"> <list-cell :hover="false" padding="50rpx 30rpx">
<view class="w-100 d-flex flex-column"> <view class="w-100 d-flex flex-column">
<view class="d-flex align-items-center just-content-center"> <view class="d-flex align-items-center just-content-center">
<view class="sort-num">{{ order.paid == 1 ? order.numberId : '--' }}</view> <view class="order-detail-page__sort-num">{{ order.paid == 1 ? order.numberId : '--' }}</view>
</view> </view>
<!-- steps begin --> <!-- steps begin -->
<view class="d-flex just-content-center"> <view class="d-flex just-content-center">
<view class="steps d-flex flex-column w-80"> <view class="order-detail-steps d-flex flex-column w-80">
<view class="steps__img-column"> <view class="order-detail-steps__icons">
<view class="steps__img-column-item"> <view class="order-detail-steps__icon-item">
<view class="iconfont-yshop icon-lamp"></view> <view class="iconfont-yshop icon-lamp"></view>
</view> </view>
<view class="steps__img-column-item"> <view class="order-detail-steps__icon-item">
<view class="iconfont-yshop icon-daojishi" v-if="{active: order.paid == 1 && order.status == 0}"></view> <view class="iconfont-yshop icon-daojishi" v-if="{active: order.paid == 1 && order.status == 0}"></view>
<view class="iconfont-yshop icon-daojishi unactive" v-else></view> <view class="iconfont-yshop icon-daojishi order-detail-steps__icon--inactive" v-else></view>
</view> </view>
<view class="steps__img-column-item" v-if="order.orderType == 'takeout'"> <view class="order-detail-steps__icon-item" v-if="order.orderType == 'takeout'">
<view class="iconfont-yshop icon-takeout" v-if="order.status == 1"></view> <view class="iconfont-yshop icon-takeout" v-if="order.status == 1"></view>
<view class="iconfont-yshop icon-takeout unactive" v-else></view> <view class="iconfont-yshop icon-takeout order-detail-steps__icon--inactive" v-else></view>
</view> </view>
<view class="steps__img-column-item" > <view class="order-detail-steps__icon-item">
<view class="iconfont-yshop icon-doorbell" v-if="order.status >= 2"></view> <view class="iconfont-yshop icon-doorbell" v-if="order.status >= 2"></view>
<view class="iconfont-yshop icon-doorbell unactive" v-else></view> <view class="iconfont-yshop icon-doorbell order-detail-steps__icon--inactive" v-else></view>
</view> </view>
</view> </view>
<view class="steps__text-column"> <view class="order-detail-steps__labels">
<view class="steps__text-column-item active"> <view class="order-detail-steps__label order-detail-steps__label--active">
<view class="steps__column-item-line bg-transparent"></view> <view class="order-detail-steps__line order-detail-steps__line--transparent"></view>
<view class="steps__text-column-item-text">已下单</view> <view class="order-detail-steps__text">已下单</view>
<view class="steps__column-item-line"></view> <view class="order-detail-steps__line"></view>
</view> </view>
<view class="steps__text-column-item activ" :class="{active: order.paid == 1}"> <view class="order-detail-steps__label" :class="{'order-detail-steps__label--active': order.paid == 1}">
<view class="steps__column-item-line"></view> <view class="order-detail-steps__line"></view>
<view class="steps__text-column-item-text">制作中</view> <view class="order-detail-steps__text">制作中</view>
<view class="steps__column-item-line"></view> <view class="order-detail-steps__line"></view>
</view> </view>
<view class="steps__text-column-item" :class="{active: order.status == 1}" v-if="order.orderType == 'takeout'"> <view class="order-detail-steps__label" :class="{'order-detail-steps__label--active': order.status == 1}" v-if="order.orderType == 'takeout'">
<view class="steps__column-item-line"></view> <view class="order-detail-steps__line"></view>
<view class="steps__text-column-item-text">配送中</view> <view class="order-detail-steps__text">配送中</view>
<view class="steps__column-item-line bg-transparent"></view> <view class="order-detail-steps__line order-detail-steps__line--transparent"></view>
</view> </view>
<view class="steps__text-column-item" :class="{active: order.status >= 2}"> <view class="order-detail-steps__label" :class="{'order-detail-steps__label--active': order.status >= 2}">
<view class="steps__column-item-line"></view> <view class="order-detail-steps__line"></view>
<view class="steps__text-column-item-text"> <view class="order-detail-steps__text">
{{ order.orderType == 'takeout' ? '已送达' : '请取餐' }} {{ order.orderType == 'takeout' ? '已送达' : '请取餐' }}
</view> </view>
<view class="steps__column-item-line bg-transparent"></view> <view class="order-detail-steps__line order-detail-steps__line--transparent"></view>
</view> </view>
</view> </view>
</view> </view>
@@ -78,7 +78,7 @@
您前面还有 <text class="text-color-primary mr-10 ml-10">{{order.preNum}}</text> 单待制作 您前面还有 <text class="text-color-primary mr-10 ml-10">{{order.preNum}}</text> 单待制作
</view> </view>
<!-- goods begin --> <!-- goods begin -->
<view class="w-100 d-flex flex-column position-relative mt-30" style="margin-bottom: -40rpx;"> <view class="w-100 d-flex flex-column position-relative mt-30 order-detail-page__goods-preview">
<view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in order.products" :key="index"> <view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in order.products" :key="index">
<view class="d-flex flex-column w-60 overflow-hidden"> <view class="d-flex flex-column w-60 overflow-hidden">
<view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.title }}</view> <view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.title }}</view>
@@ -94,12 +94,12 @@
</view> </view>
</list-cell> </list-cell>
</view> </view>
<view class="section"> <view class="order-detail-section">
<!-- goods begin --> <!-- goods begin -->
<list-cell :hover="false" padding="30rpx 30rpx"> <list-cell :hover="false" padding="30rpx 30rpx">
<view class="w-100 d-flex flex-column position-relative"> <view class="w-100 d-flex flex-column position-relative">
<view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in order.cartInfo" :key="index"> <view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in order.cartInfo" :key="index">
<image :src="good.image" mode="aspectFill" class="image"></image> <image :src="good.image" mode="aspectFill" class="order-detail-page__thumb"></image>
<view class="d-flex flex-column w-60 overflow-hidden"> <view class="d-flex flex-column w-60 overflow-hidden">
<view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.title }}</view> <view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.title }}</view>
<view class="font-size-sm text-color-assist text-truncate">{{ good.spec }}</view> <view class="font-size-sm text-color-assist text-truncate">{{ good.spec }}</view>
@@ -115,23 +115,23 @@
<!-- payment and amount begin --> <!-- payment and amount begin -->
<list-cell :hover="false" padding="50rpx 30rpx"> <list-cell :hover="false" padding="50rpx 30rpx">
<view class="w-100 d-flex flex-column"> <view class="w-100 d-flex flex-column">
<view class="pay-cell"> <view class="order-detail-pay-cell">
<view>支付方式</view> <view>支付方式</view>
<view class="font-weight-bold">{{ order.statusDto.payType }}</view> <view class="font-weight-bold">{{ order.statusDto.payType }}</view>
</view> </view>
<view class="pay-cell"> <view class="order-detail-pay-cell">
<view>订单金额</view> <view>订单金额</view>
<view class="font-weight-bold">￥{{ order.totalPrice }}</view> <view class="font-weight-bold">￥{{ order.totalPrice }}</view>
</view> </view>
<view class="pay-cell" v-if="order.orderType == 'takeout'"> <view class="order-detail-pay-cell" v-if="order.orderType == 'takeout'">
<view>配送费</view> <view>配送费</view>
<view class="font-weight-bold">￥{{ order.payPostage }}</view> <view class="font-weight-bold">￥{{ order.payPostage }}</view>
</view> </view>
<view class="pay-cell"> <view class="order-detail-pay-cell">
<view>优惠金额</view> <view>优惠金额</view>
<view class="font-weight-bold">￥{{ order.couponPrice }}</view> <view class="font-weight-bold">￥{{ order.couponPrice }}</view>
</view> </view>
<view class="pay-cell"> <view class="order-detail-pay-cell">
<view>实付金额</view> <view>实付金额</view>
<view class="font-weight-bold">￥{{ order.payPrice }}</view> <view class="font-weight-bold">￥{{ order.payPrice }}</view>
</view> </view>
@@ -139,19 +139,19 @@
</list-cell> </list-cell>
<!-- payment and amount end --> <!-- payment and amount end -->
</view> </view>
<view class="section"> <view class="order-detail-section">
<!-- order info begin --> <!-- order info begin -->
<list-cell :hover="false" padding="50rpx 30rpx"> <list-cell :hover="false" padding="50rpx 30rpx">
<view class="w-100 d-flex flex-column"> <view class="w-100 d-flex flex-column">
<view class="pay-cell"> <view class="order-detail-pay-cell">
<view>下单时间</view> <view>下单时间</view>
<view class="font-weight-bold">{{ formatDateTime(order.createTime )}}</view> <view class="font-weight-bold">{{ formatDateTime(order.createTime )}}</view>
</view> </view>
<view class="pay-cell"> <view class="order-detail-pay-cell">
<view>下单门店</view> <view>下单门店</view>
<view class="font-weight-bold">{{ order.shop.name }}</view> <view class="font-weight-bold">{{ order.shop.name }}</view>
</view> </view>
<view class="pay-cell"> <view class="order-detail-pay-cell">
<view>订单号</view> <view>订单号</view>
<view class="font-weight-bold">{{ order.id }}</view> <view class="font-weight-bold">{{ order.id }}</view>
</view> </view>
@@ -162,19 +162,19 @@
<!-- order other info begin --> <!-- order other info begin -->
<list-cell :hover="false" padding="50rpx 30rpx 20rpx" last> <list-cell :hover="false" padding="50rpx 30rpx 20rpx" last>
<view class="w-100 d-flex flex-column"> <view class="w-100 d-flex flex-column">
<view class="pay-cell"> <view class="order-detail-pay-cell">
<view>享用方式</view> <view>享用方式</view>
<view class="font-weight-bold">{{order.orderType == 'takein' ? '自取' : '外卖'}}</view> <view class="font-weight-bold">{{order.orderType == 'takein' ? '自取' : '外卖'}}</view>
</view> </view>
<view class="pay-cell"> <view class="order-detail-pay-cell">
<view>取餐时间</view> <view>取餐时间</view>
<view class="font-weight-bold">{{order.getTime ? formatDateTime(order.getTime) : '立即取餐'}}</view> <view class="font-weight-bold">{{order.getTime ? formatDateTime(order.getTime) : '立即取餐'}}</view>
</view> </view>
<view class="pay-cell"> <view class="order-detail-pay-cell">
<view>制作完成时间</view> <view>制作完成时间</view>
<view class="font-weight-bold">{{ order.deliveryTime ? formatDateTime(order.deliveryTime) : '无' }}</view> <view class="font-weight-bold">{{ order.deliveryTime ? formatDateTime(order.deliveryTime) : '无' }}</view>
</view> </view>
<view class="pay-cell"> <view class="order-detail-pay-cell">
<view>备注</view> <view>备注</view>
<view class="font-weight-bold">{{ order.remark ? order.remark : '无' }}</view> <view class="font-weight-bold">{{ order.remark ? order.remark : '无' }}</view>
</view> </view>
@@ -255,158 +255,179 @@ const refund = (order) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.image { $order-detail-padding: $spacing-row-base;
width: 120rpx; $order-detail-body-padding-bottom: 100rpx;
height: 120rpx; $order-detail-thumb-size: 120rpx;
margin-right: 30rpx; $order-detail-thumb-radius: 8rpx;
border-radius: 8rpx; $order-detail-pay-cell-gap: 40rpx;
} $order-detail-sort-num-size: 64rpx;
$order-detail-section-notch: 30rpx;
$order-detail-section-notch-offset: 15rpx;
$order-detail-steps-icon-size: 60rpx;
$order-detail-steps-img-size: 80rpx;
$order-detail-steps-margin-y: 30rpx;
$order-detail-steps-label-gap: $spacing-col-sm;
$order-detail-shop-icon-size: 45rpx;
$order-detail-shop-icon-gap: 40rpx;
$order-detail-goods-offset: -40rpx;
$order-detail-steps-line-height: 2rpx;
@mixin order-detail-section-notch {
.pay-cell { content: '';
width: 100%; position: absolute;
display: flex; bottom: calc(-1 * #{$order-detail-section-notch-offset});
align-items: center; z-index: 10;
justify-content: space-between; width: $order-detail-section-notch;
font-size: $font-size-base; height: $order-detail-section-notch;
color: $text-color-base; background-color: $bg-color;
margin-bottom: 40rpx; border-radius: $border-radius-circle;
&:nth-last-child(1) {
margin-bottom: 0;
}
} }
/* #ifdef H5 */ /* #ifdef H5 */
page { page {
min-height: 100%; min-height: 100%;
background-color: $bg-color; background-color: $bg-color;
} }
/* #endif */ /* #endif */
.order-box {
padding: 20rpx; .order-detail-page {
/* #ifdef H5 */ padding: $order-detail-padding;
margin-bottom: 100rpx; --order-detail-thumb-size: #{$order-detail-thumb-size};
/* #endif */
&__body {
padding-bottom: $order-detail-body-padding-bottom;
} }
.drinks-img { &__thumb {
width: 260rpx; flex-shrink: 0;
height: 260rpx; width: var(--order-detail-thumb-size);
height: var(--order-detail-thumb-size);
margin-right: $spacing-row-lg;
border-radius: $order-detail-thumb-radius;
} }
.tips { &__sort-num {
margin: 60rpx 0 80rpx; font-size: $order-detail-sort-num-size;
line-height: 48rpx;
}
@mixin arch {
content: "";
position: absolute;
background-color: $bg-color;
width: 30rpx;
height: 30rpx;
bottom: -15rpx;
z-index: 10;
border-radius: 100%;
}
.section {
position: relative;
&::before {
@include arch;
left: -15rpx;
}
&::after {
@include arch;
right: -15rpx;
}
}
.pay-cell {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: $font-size-base;
color: $text-color-base;
margin-bottom: 40rpx;
&:nth-last-child(1) {
margin-bottom: 0;
}
}
.sort-num {
font-size: 64rpx;
font-weight: bold; font-weight: bold;
color: $text-color-base; color: $text-color-base;
line-height: 2; line-height: 2;
} }
.steps__img-column { &__shop-icon {
display: flex; font-size: $order-detail-shop-icon-size;
margin: 30rpx 0; color: $color-primary;
.steps__img-column-item { &--last {
flex: 1; margin-right: 0;
display: flex; }
align-items: center;
justify-content: center;
image { &:not(&--last) {
width: 80rpx; margin-right: $order-detail-shop-icon-gap;
height: 80rpx;
}
.unactive {
color: #919293;
}
} }
} }
.steps__text-column { &__goods-preview {
display: flex; margin-bottom: $order-detail-goods-offset;
margin-bottom: 40rpx;
.steps__text-column-item {
flex: 1;
display: inline-flex;
display: flex;
align-items: center;
justify-content: center;
font-size: $font-size-base;
color: $text-color-assist;
&.active {
color: $text-color-base;
font-weight: bold;
.steps__column-item-line {
background-color: $text-color-base;
}
}
.steps__column-item-line{
flex: 1;
height: 2rpx;
background-color: #919293;
transform: scaleY(0.5);
}
.steps__text-column-item-text {
margin: 0 8px;
}
}
}
.icon-lamp, .icon-daojishi, .icon-takeout, .icon-doorbell{
font-size: 60rpx;
} }
.iconfont-yshop { .iconfont-yshop {
color: #09b4f1; color: $color-primary;
} }
}
.order-detail-section {
position: relative;
&::before {
@include order-detail-section-notch;
left: calc(-1 * #{$order-detail-section-notch-offset});
}
&::after {
@include order-detail-section-notch;
right: calc(-1 * #{$order-detail-section-notch-offset});
}
}
.order-detail-pay-cell {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: $order-detail-pay-cell-gap;
font-size: $font-size-base;
color: $text-color-base;
&:last-child {
margin-bottom: 0;
}
}
.order-detail-steps {
&__icons {
display: flex;
margin: $order-detail-steps-margin-y 0;
}
&__icon-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
image {
width: $order-detail-steps-img-size;
height: $order-detail-steps-img-size;
}
}
&__icon--inactive {
color: $text-color-assist;
}
&__labels {
display: flex;
margin-bottom: $order-detail-pay-cell-gap;
}
&__label {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: $font-size-base;
color: $text-color-assist;
&--active {
font-weight: bold;
color: $text-color-base;
.order-detail-steps__line {
background-color: $text-color-base;
}
}
}
&__line {
flex: 1;
height: $order-detail-steps-line-height;
background-color: $text-color-assist;
transform: scaleY(0.5);
&--transparent {
background-color: transparent;
}
}
&__text {
margin: 0 $order-detail-steps-label-gap;
}
.icon-lamp,
.icon-daojishi,
.icon-takeout,
.icon-doorbell {
font-size: $order-detail-steps-icon-size;
}
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/orders/orders.vue
+65 -21
View File
@@ -5,16 +5,16 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="container"> <view class="container orders-page">
<view class="bg-white"> <view class="bg-white">
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs> <uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
</view> </view>
<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;"> <view class="orders-page__list d-flex flex-column w-100">
<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;" @tap="detail(item.orderId)"> <view class="orders-item" v-for="(item, index) in orders" :key="index" @tap="detail(item.orderId)">
<list-cell :hover="false"> <list-cell :hover="false">
<view class="w-100 d-flex align-items-center"> <view class="w-100 d-flex align-items-center">
<view class="flex-fill d-flex flex-column"> <view class="flex-fill d-flex flex-column">
<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;"> <view class="font-size-lg text-color-base orders-item__shop">
{{ item.shop.name }} {{ item.shop.name }}
</view> </view>
<view class="font-size-sm text-color-assist">取餐号：{{ item.numberId }}</view> <view class="font-size-sm text-color-assist">取餐号：{{ item.numberId }}</view>
@@ -27,9 +27,9 @@
</list-cell> </list-cell>
<list-cell :hover="false" last> <list-cell :hover="false" last>
<view class="w-100 d-flex flex-column"> <view class="w-100 d-flex flex-column">
<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;"> <view class="w-100 text-truncate font-size-lg text-color-base orders-item__goods">
<view class="flex mb-2" v-for="(good,index) in item.cartInfo" :key="index"> <view class="flex orders-item__goods-row mb-2" v-for="(good,index) in item.cartInfo" :key="index">
<image :src="good.image" mode="aspectFill" class="image"></image> <image :src="good.image" mode="aspectFill" class="orders-item__thumb"></image>
<view class="flex flex-column"> <view class="flex flex-column">
<view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view> <view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view>
<view class="font-size-sm mt-1">{{ good.spec }}</view> <view class="font-size-sm mt-1">{{ good.spec }}</view>
@@ -37,20 +37,24 @@
</view> </view>
</view> </view>
</view> </view>
<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;"> <view class="d-flex justify-content-between align-items-center orders-item__meta">
<view class="font-size-sm text-color-assist"> <view class="font-size-sm text-color-assist">
{{formatDateTime(item.createTime) }} {{formatDateTime(item.createTime) }}
</view> </view>
<view class="d-flex font-size-sm text-color-base align-items-center"> <view class="d-flex font-size-sm text-color-base align-items-center">
<view style="margin-right: 10rpx;">共{{ goodsNum(item.cartInfo) }}件商品，实付</view> <view class="orders-item__summary">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
<view class="font-size-lg">￥{{ item.payPrice }}</view> <view class="font-size-lg">￥{{ item.payPrice }}</view>
</view> </view>
</view> </view>
<view class="d-flex align-items-center justify-content-end"> <view class="d-flex align-items-center justify-content-end orders-item__actions">
<view> <button
<button v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0" class="left-margin" plain size="mini" @tap.stop="receive(item)">确认收到餐</button> v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0"
<button class="left-margin" plain size="mini" @tap="detail(item.orderId)">订单详情</button> class="orders-item__btn"
</view> plain
size="mini"
@tap.stop="receive(item)"
>确认收到餐</button>
<button class="orders-item__btn" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
</view> </view>
</view> </view>
</list-cell> </list-cell>
@@ -161,13 +165,53 @@ const receive = async(order) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.left-margin { $orders-list-padding-x: $spacing-row-base;
margin-left: 10rpx; $orders-list-padding-bottom: 0;
$orders-item-gap: $spacing-row-lg;
$orders-section-gap: $spacing-row-base;
$orders-btn-gap: $spacing-row-base;
$orders-summary-gap: $spacing-row-base;
$orders-thumb-size: 160rpx;
$orders-thumb-radius: 8rpx;
.orders-page {
--orders-thumb-size: #{$orders-thumb-size};
&__list {
padding: $orders-list-padding-x;
padding-bottom: $orders-list-padding-bottom;
} }
.image { }
width: 160rpx;
height: 160rpx; .orders-item {
margin-right: 30rpx; margin-bottom: $orders-item-gap;
border-radius: 8rpx;
&__shop {
margin-bottom: $orders-section-gap;
} }
&__goods {
margin-bottom: $orders-section-gap;
}
&__thumb {
flex-shrink: 0;
width: var(--orders-thumb-size);
height: var(--orders-thumb-size);
margin-right: $spacing-row-lg;
border-radius: $orders-thumb-radius;
}
&__meta {
margin-bottom: $orders-item-gap;
}
&__summary {
margin-right: $orders-summary-gap;
}
&__btn + &__btn {
margin-left: $orders-btn-gap;
}
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/orders/refund.vue
+13 -3
View File
@@ -5,7 +5,7 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="p-2"> <view class="refund-page">
<uv-list> <uv-list>
<uv-list-item title="订单金额" :rightText="'¥'+totalPrice"></uv-list-item> <uv-list-item title="订单金额" :rightText="'¥'+totalPrice"></uv-list-item>
<uv-list-item title="退款金额" :rightText="'¥'+payPrice"></uv-list-item> <uv-list-item title="退款金额" :rightText="'¥'+payPrice"></uv-list-item>
@@ -15,7 +15,7 @@
<template #footer><uv-input placeholder="请输入内容" border="none" v-model="refundReasonWapExplain"></uv-input></template> <template #footer><uv-input placeholder="请输入内容" border="none" v-model="refundReasonWapExplain"></uv-input></template>
</uv-list-item> </uv-list-item>
</uv-list> </uv-list>
<view class="mt-2"> <view class="refund-page__submit">
<uv-button shape="circle" type="warning" :plain="true" size="small" text="申请退款" @click="refund()"></uv-button> <uv-button shape="circle" type="warning" :plain="true" size="small" text="申请退款" @click="refund()"></uv-button>
</view> </view>
<uv-toast ref="toast"></uv-toast> <uv-toast ref="toast"></uv-toast>
@@ -55,5 +55,15 @@ const refund = async() => {
</script> </script>
<style> <style lang="scss" scoped>
$refund-padding: $spacing-row-base;
$refund-submit-gap: $spacing-row-base;
.refund-page {
padding: $refund-padding;
&__submit {
margin-top: $refund-submit-gap;
}
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/packages/index.vue
+180 -184
View File
@@ -5,29 +5,53 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="container position-relative w-100 h-100 overflow-hidden"> <view class="container packages-page position-relative w-100 h-100 overflow-hidden">
<uv-empty v-if="coupons.length == 0" mode="coupon"></uv-empty> <uv-empty v-if="coupons.length == 0" mode="coupon"></uv-empty>
<scroll-view scroll-y class="coupon-list"> <scroll-view scroll-y class="packages-list">
<view class="wrapper"> <view class="packages-list__wrapper">
<view class="coupon" v-for="(item, index) in coupons" :key="index" @tap="openDetailModal(item, index)"> <view
<view class="taobao"> class="packages-item"
<view class="ticket" :style="{border: item.id == coupon_id ? '1rpx solid red':''}"> v-for="(item, index) in coupons"
<view class="left"> :key="index"
<image class="picture" :src="item.image" mode="aspectFill"></image> @tap="openDetailModal(item, index)"
<view class="introduce"> >
<view class="top"> <view class="packages-ticket">
<view
class="packages-ticket__body"
:class="{ 'packages-ticket__body--selected': item.id == coupon_id }"
>
<view class="packages-ticket__left">
<image
class="packages-ticket__picture"
:src="item.image"
mode="aspectFill"
></image>
<view class="packages-ticket__intro">
<view class="packages-ticket__value">
￥ ￥
<text class="big">{{ item.value }}</text> <text class="packages-ticket__amount">{{ item.value }}</text>
<view>满{{ item.least }}减{{ item.value }}</view> <view>满{{ item.least }}减{{ item.value }}</view>
</view> </view>
<view class="type">{{ item.title }}</view> <view class="packages-ticket__type">{{ item.title }}</view>
<view class="date u-line-1">{{formatDateTime(item.startTime, 'yyyy-MM-dd')}}-{{formatDateTime(item.endTime, 'yyyy-MM-dd')}}</view> <view class="packages-ticket__date u-line-1">
{{ formatDateTime(item.startTime, 'yyyy-MM-dd') }}-{{ formatDateTime(item.endTime, 'yyyy-MM-dd') }}
</view>
</view> </view>
</view> </view>
<view class="right" @click.stop="" v-if="activeTabIndex == 0"> <view class="packages-ticket__right" @click.stop="" v-if="activeTabIndex == 0">
<view v-if="item.id != coupon_id" class="use immediate-use" :round="true" @tap="useCouponWith(item)">立即使用</view> <view
<view v-else class="use immediate-use" :round="true" @tap="cancelCoupon(item)">取消使用</view> v-if="item.id != coupon_id"
class="packages-ticket__btn packages-ticket__btn--use immediate-use"
:round="true"
@tap="useCouponWith(item)"
>立即使用</view>
<view
v-else
class="packages-ticket__btn packages-ticket__btn--use immediate-use"
:round="true"
@tap="cancelCoupon(item)"
>取消使用</view>
</view> </view>
</view> </view>
</view> </view>
@@ -36,7 +60,7 @@
</scroll-view> </scroll-view>
<modal custom :show="detailModalVisible" @cancel="closeDetailModal" width="90%"> <modal custom :show="detailModalVisible" @cancel="closeDetailModal" width="90%">
<view class="modal-content"> <view class="packages-modal">
<view class="d-flex font-size-extra-lg text-color-base just-content-center mb-20">{{ coupon.title }}</view> <view class="d-flex font-size-extra-lg text-color-base just-content-center mb-20">{{ coupon.title }}</view>
<view class="d-flex font-size-sm text-color-base mb-20">有效期：{{formatDateTime(coupon.startTime, 'yyyy-MM-dd')}}至{{formatDateTime(coupon.endTime, 'yyyy-MM-dd')}}</view> <view class="d-flex font-size-sm text-color-base mb-20">有效期：{{formatDateTime(coupon.startTime, 'yyyy-MM-dd')}}至{{formatDateTime(coupon.endTime, 'yyyy-MM-dd')}}</view>
<view class="d-flex font-size-sm text-color-base mb-20">领取时间：{{ coupon.createtime_text }}</view> <view class="d-flex font-size-sm text-color-base mb-20">领取时间：{{ coupon.createtime_text }}</view>
@@ -44,7 +68,7 @@
<view class="d-flex font-size-sm text-color-base mb-20">适用范围：{{ typeInfo(coupon.type) }}</view> <view class="d-flex font-size-sm text-color-base mb-20">适用范围：{{ typeInfo(coupon.type) }}</view>
<view class="d-flex font-size-sm text-color-base mb-20">适用店铺：{{ coupon.shopName }}</view> <view class="d-flex font-size-sm text-color-base mb-20">适用店铺：{{ coupon.shopName }}</view>
<view class="d-flex align-items-center just-content-center" v-if="activeTabIndex == 0"> <view class="d-flex align-items-center just-content-center" v-if="activeTabIndex == 0">
<button type="primary" @tap="useCoupon" class="use-coupon-btn">立即使用</button> <button type="primary" @tap="useCoupon" class="packages-modal__btn">立即使用</button>
</view> </view>
</view> </view>
</modal> </modal>
@@ -176,198 +200,170 @@ const useCoupon = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 选券页局部 token（与 uni.scss 全局变量配合）
$packages-list-offset-nav: 120rpx;
$packages-list-margin-top: $spacing-row-lg;
$packages-list-padding-x: $spacing-row-base;
$packages-item-gap: $spacing-row-lg;
$packages-item-radius: $border-radius-base;
$packages-notch-size: 30rpx;
$packages-notch-offset: 65rpx;
$packages-ticket-radius: 20rpx;
$packages-ticket-divider: $border-color-light;
$packages-ticket-left-width: 70%;
$packages-ticket-right-width: 30%;
$packages-ticket-padding: $spacing-row-base;
$packages-ticket-right-padding-y: 40rpx;
$packages-picture-size: 190rpx;
$packages-amount-font-size: 60rpx;
$packages-date-font-size: 20rpx;
$packages-intro-gap: 10rpx;
$packages-btn-radius: 40rpx;
$packages-btn-padding-x: 20rpx;
$packages-btn-line-height: 40rpx;
$packages-btn-margin-left: 20rpx;
$packages-selected-border-width: 1rpx;
$packages-modal-btn-width: 95%;
/* #ifdef H5 */ /* #ifdef H5 */
page { page {
height: 100%; height: 100%;
} }
/* #endif */ /* #endif */
.container { .packages-page {
--packages-picture-size: #{$packages-picture-size};
--packages-list-offset-nav: #{$packages-list-offset-nav};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.packages-list {
margin-top: $packages-list-margin-top;
height: calc(100vh - var(--packages-list-offset-nav));
.coupon-list {
margin-top: 30rpx;
height:calc(100vh - 120rpx);
// height: calc(100vh - 120rpx - 200rpx);
/* #ifdef H5 */ /* #ifdef H5 */
// height: calc(100vh - 120rpx - 200rpx - 44px); height: calc(100vh - var(--packages-list-offset-nav) - 44px);
/* #endif */ /* #endif */
}
.wrapper { &__wrapper {
padding: 0 20rpx;
display: flex;
flex-direction: column;
.coupon {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #ffffff; padding: 0 $packages-list-padding-x;
margin-bottom: 30rpx;
//padding: 0 30rpx;
border-radius: 6rpx;
box-shadow: 0 10rpx 10rpx -10rpx rgba(15, 15, 15, 0.1);
position: relative;
&::before {
content: '';
position: absolute;
background-color: $bg-color;
width: 30rpx;
height: 30rpx;
bottom: 65rpx;
left: -15rpx;
border-radius: 100%;
}
&::after {
content: '';
position: absolute;
background-color: $bg-color;
width: 30rpx;
height: 30rpx;
bottom: 65rpx;
right: -15rpx;
border-radius: 100%;
}
.detail {
padding: 20rpx 0;
position: relative;
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 1rpx dashed #c6c6c6;
transform: scaleY(0.5);
}
.coupon-img {
width: 150rpx;
height: 150rpx;
margin-right: 40rpx;
}
}
} }
} }
.use-coupon-btn { .packages-item {
width: 95%; display: flex;
border-radius: 50rem !important; flex-direction: column;
position: relative;
margin-bottom: $packages-item-gap;
background-color: $text-color-white;
border-radius: $packages-item-radius;
box-shadow: $box-shadow;
&::before,
&::after {
content: '';
position: absolute;
bottom: $packages-notch-offset;
width: $packages-notch-size;
height: $packages-notch-size;
background-color: $bg-color;
border-radius: $border-radius-circle;
}
&::before {
left: calc(-1 * #{$packages-notch-size} / 2);
}
&::after {
right: calc(-1 * #{$packages-notch-size} / 2);
}
} }
.taobao { .packages-ticket {
background-color: white; background-color: $text-color-white;
.title {
&__body {
display: flex;
&--selected {
border: $packages-selected-border-width solid $color-error;
border-radius: $packages-ticket-radius;
}
}
&__left {
display: flex;
width: $packages-ticket-left-width;
padding: $packages-ticket-padding;
background-color: $text-color-white;
border-radius: $packages-ticket-radius;
border-right: dashed 2rpx $packages-ticket-divider;
}
&__picture {
flex-shrink: 0;
width: var(--packages-picture-size);
height: var(--packages-picture-size);
border-radius: $packages-ticket-radius;
}
&__intro {
margin-left: $packages-intro-gap;
min-width: 0;
}
&__value {
font-size: $font-size-base;
color: $uv-warning;
.packages-ticket__amount {
margin-right: $packages-intro-gap;
font-size: $packages-amount-font-size;
font-weight: bold;
}
}
&__type {
font-size: $font-size-base;
color: $uv-info-dark;
}
&__date {
margin-top: $packages-intro-gap;
font-size: $packages-date-font-size;
color: $uv-info-dark;
}
&__right {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; width: $packages-ticket-right-width;
margin-bottom: 20rpx; padding: $packages-ticket-right-padding-y $packages-ticket-padding;
font-size: 30rpx; background-color: $text-color-white;
.left { border-radius: $packages-ticket-radius;
display: flex;
align-items: center;
}
.store {
font-weight: 500;
}
.buddha {
width: 70rpx;
height: 70rpx;
border-radius: 10rpx;
margin-right: 10rpx;
}
.entrance {
color: $uv-info;
border: solid 2rpx $uv-info;
line-height: 48rpx;
padding: 0 30rpx;
background: none;
border-radius: 15px;
}
} }
.ticket {
display: flex;
.left {
width: 70%;
padding: 20rpx;
background-color: white; //rgb(255, 245, 244);
border-radius: 20rpx;
border-right: dashed 2rpx rgb(224, 215, 211);
display: flex;
.picture {
//width: 172rpx;
border-radius: 20rpx;
width: 190rpx;
height: 190rpx;
}
.introduce {
margin-left: 10rpx;
.top {
color: $uv-warning;
font-size: 28rpx;
.big {
font-size: 60rpx;
font-weight: bold;
margin-right: 10rpx;
}
}
.type {
font-size: 28rpx;
color: $uv-info-dark;
}
.date {
margin-top: 10rpx;
font-size: 20rpx;
color: $uv-info-dark;
}
}
}
.right {
width: 30%;
padding: 40rpx 20rpx;
background-color: white; //rgb(255, 245, 244);
border-radius: 20rpx;
display: flex;
align-items: center;
.use {
height: auto;
padding: 0 20rpx;
font-size: 24rpx;
border-radius: 40rpx;
color: #ffffff !important;
background-color: $uv-warning !important;
line-height: 40rpx;
color: rgb(117, 142, 165);
margin-left: 20rpx;
}
.used {
height: auto;
padding: 0 20rpx;
font-size: 24rpx;
border-radius: 40rpx;
//color: #ffffff!important;
//background-color: $u-type-warning!important;
line-height: 40rpx;
//color: rgb(117, 142, 165);
margin-left: 20rpx;
}
}
.right_log {
text-align: center;
width: 30%;
padding: 80rpx 0rpx;
background-color: white; //rgb(255, 245, 244);
border-radius: 20rpx;
align-items: center; &__btn {
height: auto;
margin-left: $packages-btn-margin-left;
padding: 0 $packages-btn-padding-x;
font-size: $font-size-sm;
line-height: $packages-btn-line-height;
border-radius: $packages-btn-radius;
color: $text-color-white !important;
&--use {
background-color: $uv-warning !important;
} }
} }
} }
.packages-modal__btn {
width: $packages-modal-btn-width;
border-radius: 50rem !important;
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/pay/pay.vue
+169 -130
View File
@@ -5,11 +5,11 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="container position-relative"> <view class="pay-page container position-relative">
<view style="margin-bottom: 130rpx;"> <view class="pay-page__content">
<view class="section-1"> <view class="pay-page__section">
<template v-if="store.distance > 0"> <template v-if="store.distance > 0">
<list-cell class="location"> <list-cell class="pay-page__cell pay-page__cell--location">
<view class="flex-fill d-flex justify-content-between align-items-center"> <view class="flex-fill d-flex justify-content-between align-items-center">
<view class="store-name flex-fill">{{ orderType == 'takeout' ? '外卖配送' : '点餐自取' }}</view> <view class="store-name flex-fill">{{ orderType == 'takeout' ? '外卖配送' : '点餐自取' }}</view>
<uv-switch activeColor="#09b4f1" v-model="active" @change="takout"> <uv-switch activeColor="#09b4f1" v-model="active" @change="takout">
@@ -25,7 +25,7 @@
<view class="font-size-lg text-color-base"> <view class="font-size-lg text-color-base">
{{ address.address + ' ' + address.detail }} {{ address.address + ' ' + address.detail }}
</view> </view>
<image src="/static/images/navigator-1.png" class="arrow"></image> <image src="/static/images/navigator-1.png" class="pay-page__arrow"></image>
</view> </view>
<view class="d-flex text-color-assist font-size-sm align-items-center"> <view class="d-flex text-color-assist font-size-sm align-items-center">
<view class="mr-10">{{ address.realName }}</view> <view class="mr-10">{{ address.realName }}</view>
@@ -34,24 +34,24 @@
</view> </view>
<view v-else class="flex-fill d-flex justify-content-between align-items-center"> <view v-else class="flex-fill d-flex justify-content-between align-items-center">
<view class="store-name flex-fill">选择收货地址</view> <view class="store-name flex-fill">选择收货地址</view>
<image src="/static/images/navigator-1.png" class="arrow"></image> <image src="/static/images/navigator-1.png" class="pay-page__arrow"></image>
</view> </view>
</list-cell> </list-cell>
</template> </template>
</view> </view>
<view class="section-1"> <view class="pay-page__section">
<template> <template>
<list-cell class="location" @click="goToShop"> <list-cell class="pay-page__cell pay-page__cell--location" @click="goToShop">
<view class="flex-fill d-flex justify-content-between align-items-center"> <view class="flex-fill d-flex justify-content-between align-items-center">
<view class="store-name flex-fill">{{ store.name }}</view> <view class="store-name flex-fill">{{ store.name }}</view>
<image src="/static/images/navigator-1.png" class="arrow"></image> <image src="/static/images/navigator-1.png" class="pay-page__arrow"></image>
</view> </view>
</list-cell> </list-cell>
</template> </template>
<template> <template>
<list-cell arrow class="meal-time" v-if="orderType == 'takein'"> <list-cell arrow class="pay-page__cell pay-page__cell--meal-time" v-if="orderType == 'takein'">
<view class="flex-fill d-flex justify-content-between align-items-center" <view class="flex-fill d-flex justify-content-between align-items-center"
@click="takeinTIme = !takeinTIme"> @click="takeinTIme = !takeinTIme">
<view class="title">取餐时间</view> <view class="title">取餐时间</view>
@@ -63,12 +63,12 @@
</view> </view>
</view> </view>
</list-cell> </list-cell>
<list-cell class="contact" last :hover="false" v-if="orderType == 'takein'"> <list-cell class="pay-page__cell pay-page__cell--contact" last :hover="false" v-if="orderType == 'takein'">
<view class="flex-fill d-flex justify-content-between align-items-center"> <view class="flex-fill d-flex justify-content-between align-items-center">
<view class="title flex-fill">联系电话</view> <view class="title flex-fill">联系电话</view>
<view class="time"><input class="text-right" placeholder="请输入手机号码" :value="member.mobile" /> <view class="time"><input class="text-right" placeholder="请输入手机号码" :value="member.mobile" />
</view> </view>
<button class="contact-tip font-size-sm">自动填写</button> <button class="pay-page__contact-tip font-size-sm">自动填写</button>
</view> </view>
</list-cell> </list-cell>
</template> </template>
@@ -88,17 +88,17 @@
</template> </template>
</view> </view>
<!-- 购物车列表 begin --> <!-- 购物车列表 begin -->
<view class="section-2"> <view class="pay-page__section pay-page__section--cart">
<view class="cart d-flex flex-column"> <view class="pay-page__cart d-flex flex-column">
<list-cell last v-for="(item, index) in cart" :key="index"> <list-cell last v-for="(item, index) in cart" :key="index">
<view class="w-100 d-flex flex-column"> <view class="w-100 d-flex flex-column">
<view class="d-flex align-items-center mb-10"> <view class="d-flex align-items-center mb-10">
<view <view
class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg"> class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg">
<image style="width: 80rpx;height: 80rpx;" mode="aspectFill" :src="item.image"> <image class="pay-page__cart-thumb" mode="aspectFill" :src="item.image">
</image> </image>
</view> </view>
<view class="name-and-props overflow-hidden"> <view class="pay-page__cart-name overflow-hidden">
<view class="text-color-base font-size-lg">{{ item.name }}</view> <view class="text-color-base font-size-lg">{{ item.name }}</view>
</view> </view>
<view <view
@@ -134,47 +134,46 @@
</list-cell> </list-cell>
</view> </view>
<!-- 购物车列表 end --> <!-- 购物车列表 end -->
<view class="d-flex align-items-center justify-content-start font-size-sm text-color-warning" <view class="pay-page__notice d-flex align-items-center justify-content-start font-size-sm text-color-warning">
style="padding: 20rpx 0;">
</view> </view>
<!-- 支付方式 begin --> <!-- 支付方式 begin -->
<view class="payment"> <view class="pay-page__payment">
<list-cell last :hover="false"><text>支付方式</text></list-cell> <list-cell last :hover="false"><text>支付方式</text></list-cell>
<list-cell> <list-cell>
<view class="d-flex align-items-center justify-content-between w-100 disabled" <view class="pay-page__payment-row pay-page__payment-row--disabled d-flex align-items-center justify-content-between w-100"
@click="setPayType('yue')"> @click="setPayType('yue')">
<view class="iconfont iconbalance line-height-100 payment-icon"></view> <view class="iconfont iconbalance line-height-100 pay-page__payment-icon"></view>
<view class="flex-fill">余额支付（余额￥{{ member.nowMoney }}）</view> <view class="flex-fill">余额支付（余额￥{{ member.nowMoney }}）</view>
<view class="font-size-sm" v-if="member.nowMoney == 0">余额不足</view> <view class="font-size-sm" v-if="member.nowMoney == 0">余额不足</view>
<view class="iconfont line-height-100 checkbox checked iconradio-button-on" v-if="payType == 'yue'"> <view class="iconfont line-height-100 pay-page__checkbox pay-page__checkbox--checked iconradio-button-on" v-if="payType == 'yue'">
</view> </view>
<view class="iconfont line-height-100 checkbox iconradio-button-off" v-else></view> <view class="iconfont line-height-100 pay-page__checkbox iconradio-button-off" v-else></view>
</view> </view>
</list-cell> </list-cell>
<list-cell last> <list-cell last>
<view class="d-flex align-items-center justify-content-between w-100" @click="setPayType('weixin')"> <view class="pay-page__payment-row d-flex align-items-center justify-content-between w-100" @click="setPayType('weixin')">
<view class="iconfont iconwxpay line-height-100 payment-icon" style="color: #7EB73A"></view> <view class="iconfont iconwxpay line-height-100 pay-page__payment-icon pay-page__payment-icon--wechat"></view>
<view class="flex-fill">微信支付</view> <view class="flex-fill">微信支付</view>
<view class="iconfont line-height-100 checkbox checked iconradio-button-on" v-if="payType == 'weixin'"> <view class="iconfont line-height-100 pay-page__checkbox pay-page__checkbox--checked iconradio-button-on" v-if="payType == 'weixin'">
</view> </view>
<view class="iconfont line-height-100 checkbox iconradio-button-off" v-else></view> <view class="iconfont line-height-100 pay-page__checkbox iconradio-button-off" v-else></view>
</view> </view>
</list-cell> </list-cell>
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<list-cell> <list-cell>
<view class="d-flex align-items-center justify-content-between w-100" @click="setPayType('alipay')"> <view class="pay-page__payment-row d-flex align-items-center justify-content-between w-100" @click="setPayType('alipay')">
<view class="iconfont-yshop icon-alipay line-height-100 payment-icon" style="color:#07b4fd" ></view> <view class="iconfont-yshop icon-alipay line-height-100 pay-page__payment-icon pay-page__payment-icon--alipay"></view>
<view class="flex-fill">支付宝</view> <view class="flex-fill">支付宝</view>
<view class="iconfont line-height-100 checkbox checked iconradio-button-on" v-if="payType == 'alipay'" ></view> <view class="iconfont line-height-100 pay-page__checkbox pay-page__checkbox--checked iconradio-button-on" v-if="payType == 'alipay'" ></view>
<view class="iconfont line-height-100 checkbox iconradio-button-off" v-else ></view> <view class="iconfont line-height-100 pay-page__checkbox iconradio-button-off" v-else ></view>
</view> </view>
</list-cell> </list-cell>
<!-- #endif --> <!-- #endif -->
</view> </view>
<!-- 支付方式 end --> <!-- 支付方式 end -->
<!-- 备注 begin --> <!-- 备注 begin -->
<list-cell last @click="goToRemark"> <list-cell last @click="goToRemark">
<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden" style="margin-bottom: 110rpx;"> <view class="pay-page__remark d-flex flex-fill align-items-center justify-content-between overflow-hidden">
<view class="flex-shrink-0 mr-20">备注</view> <view class="flex-shrink-0 mr-20">备注</view>
<view class="text-color-primary flex-fill text-truncate text-right">{{ form.remark || '点击填写备注' }} <view class="text-color-primary flex-fill text-truncate text-right">{{ form.remark || '点击填写备注' }}
</view> </view>
@@ -183,21 +182,20 @@
<!-- 备注 end --> <!-- 备注 end -->
</view> </view>
<!-- 付款栏 begin --> <!-- 付款栏 begin -->
<view style="z-index: 1;" <view class="pay-page__footer w-100 position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white"> <view class="pay-page__footer-label font-size-sm">合计：</view>
<view class="font-size-sm" style="margin-left: 20rpx;">合计：</view> <view class="pay-page__footer-amount font-size-lg flex-fill">￥{{ amount }}</view>
<view class="font-size-lg flex-fill">￥{{ amount }}</view> <view class="pay-page__footer-btn bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base"
<view class="bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base" @tap="debounce(submit, 500)">付款</view>
style="padding: 0 60rpx;" @tap="debounce(submit, 500)">付款</view>
</view> </view>
<!-- 付款栏 end --> <!-- 付款栏 end -->
<modal :show="ensureAddressModalVisible" custom :mask-closable="false" :radius="'0rpx'" width="90%"> <modal :show="ensureAddressModalVisible" custom :mask-closable="false" :radius="'0rpx'" width="90%">
<view class="modal-content"> <view class="pay-page__modal">
<view class="d-flex justify-content-end"> <view class="d-flex justify-content-end">
<image src="/static/images/pay/close.png" style="width: 40rpx; height: 40rpx;" <image src="/static/images/pay/close.png" class="pay-page__modal-close"
@tap="ensureAddressModalVisible = false"></image> @tap="ensureAddressModalVisible = false"></image>
</view> </view>
<view class="d-flex just-content-center align-items-center" style="margin-bottom: 40px;"> <view class="pay-page__modal-title d-flex just-content-center align-items-center">
<view class="font-size-extra-lg text-color-base">请再次确认下单地址</view> <view class="font-size-extra-lg text-color-base">请再次确认下单地址</view>
</view> </view>
<view <view
@@ -206,11 +204,11 @@
<view>{{ address.phone }}</view> <view>{{ address.phone }}</view>
</view> </view>
<view class="d-flex font-size-sm text-color-assist align-items-center justify-content-between mb-40"> <view class="d-flex font-size-sm text-color-assist align-items-center justify-content-between mb-40">
<view style="max-width: 60%;">{{ address.address + address.detail }}</view> <view class="pay-page__modal-address">{{ address.address + address.detail }}</view>
<button type="primary" size="mini" plain class="change-address-btn" style="white-space: nowrap;" <button type="primary" size="mini" plain class="pay-page__modal-change-btn"
@click="chooseAddress">修改地址</button> @click="chooseAddress">修改地址</button>
</view> </view>
<button type="primary" class="pay_btn" @tap="debounce(pay, 500)">确认并付款</button> <button type="primary" class="pay-page__modal-submit" @tap="debounce(pay, 500)">确认并付款</button>
</view> </view>
</modal> </modal>
<uv-toast ref="uToast"></uv-toast> <uv-toast ref="uToast"></uv-toast>
@@ -706,125 +704,166 @@ const aliPay = async(order) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { // 支付页局部 token（与 uni.scss 全局变量配合）
padding: 30rpx; $pay-page-padding: $spacing-row-lg;
$pay-page-section-gap: $spacing-row-lg;
$pay-page-content-offset: 130rpx;
$pay-arrow-size: 50rpx;
$pay-arrow-offset-right: -10rpx;
$pay-cart-name-width: 65%;
$pay-payment-icon-size: 44rpx;
$pay-checkbox-size: 36rpx;
$pay-checkbox-gap: 10rpx;
$pay-payment-gap: 10rpx;
$pay-footer-height: 100rpx;
$pay-footer-shadow: 0 0 20rpx rgba($color: #000, $alpha: 0.1);
$pay-footer-z-index: 1;
$pay-footer-label-margin: $spacing-row-base;
$pay-footer-btn-padding-x: 60rpx;
$pay-remark-margin-bottom: 110rpx;
$pay-notice-padding-y: $spacing-row-base;
$pay-wechat-color: #7eb73a;
$pay-alipay-color: #07b4fd;
$pay-modal-close-size: 40rpx;
$pay-modal-title-margin-bottom: 40px;
$pay-modal-address-max-width: 60%;
$pay-contact-tip-border-width: 2rpx;
$pay-contact-tip-padding-y: 6rpx;
$pay-contact-tip-padding-x: 10rpx;
$pay-contact-tip-margin-left: 10rpx;
$pay-modal-btn-radius: 50rem;
$pay-modal-btn-line-height: 3;
$pay-modal-change-btn-line-height: 2;
.pay-page {
padding: $pay-page-padding;
--pay-cart-thumb-size: #{$img-size-lg};
&__content {
margin-bottom: $pay-page-content-offset;
} }
.arrow { &__section {
width: 50rpx; margin-bottom: $pay-page-section-gap;
height: 50rpx;
&--cart {
margin-bottom: 0;
}
}
&__arrow {
position: relative; position: relative;
margin-right: -10rpx; width: $pay-arrow-size;
height: $pay-arrow-size;
margin-right: $pay-arrow-offset-right;
} }
.location { &__cell--location {
.store-name { .store-name {
font-size: $font-size-lg; font-size: $font-size-lg;
} }
.iconfont { .iconfont {
font-size: 50rpx; font-size: $pay-arrow-size;
line-height: 100%; line-height: 100%;
color: $color-primary; color: $color-primary;
} }
} }
.section-1 { &__contact-tip {
margin-bottom: 30rpx; margin-left: $pay-contact-tip-margin-left;
padding: $pay-contact-tip-padding-y $pay-contact-tip-padding-x;
.contact { border: $pay-contact-tip-border-width solid $color-primary;
.contact-tip { color: $color-primary;
margin-left: 10rpx;
border: 2rpx solid $color-primary;
padding: 6rpx 10rpx;
color: $color-primary;
}
}
} }
.section-2 { &__cart-name {
.name-and-props { width: $pay-cart-name-width;
width: 65%;
}
} }
.payment { &__cart-thumb {
margin-bottom: 30rpx; flex-shrink: 0;
width: var(--pay-cart-thumb-size);
height: var(--pay-cart-thumb-size);
}
.disabled { &__notice {
padding: $pay-notice-padding-y 0;
}
&__payment {
margin-bottom: $pay-page-section-gap;
}
&__payment-row {
&--disabled {
color: $text-color-grey; color: $text-color-grey;
} }
}
.payment-icon { &__payment-icon {
font-size: 44rpx; margin-right: $pay-payment-gap;
margin-right: 10rpx; font-size: $pay-payment-icon-size;
&--wechat {
color: $pay-wechat-color;
} }
.checkbox { &--alipay {
font-size: 36rpx; color: $pay-alipay-color;
margin-left: 10rpx;
} }
}
.checked { &__checkbox {
margin-left: $pay-checkbox-gap;
font-size: $pay-checkbox-size;
&--checked {
color: $color-primary; color: $color-primary;
} }
} }
.pay-box { &__remark {
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1); margin-bottom: $pay-remark-margin-bottom;
height: 100rpx;
} }
.modal-content { &__footer {
.change-address-btn { z-index: $pay-footer-z-index;
line-height: 2; height: $pay-footer-height;
padding: 0 1em; box-shadow: $pay-footer-shadow;
}
.pay_btn {
width: 100%;
border-radius: 50rem !important;
line-height: 3;
}
} }
.choice { &__footer-label {
background-color: $bg-color-grey; margin-left: $pay-footer-label-margin;
border-radius: 38rpx;
display: flex;
align-items: center;
font-size: $font-size-sm;
padding: 0 38rpx;
color: $text-color-assist;
.dinein,
.takeout {
width: 50%;
position: relative;
display: flex;
align-items: center;
&.active {
padding: 14rpx 38rpx;
color: #ffffff;
background-color: $color-primary;
border-radius: 38rpx;
}
}
.takeout {
margin-left: 20rpx;
height: 100%;
flex: 1;
padding: 14rpx 0;
}
.dinein.active {
//margin-left: -38rpx;
}
.takeout.active {
//margin-right: -38rpx;
}
} }
&__footer-btn {
padding: 0 $pay-footer-btn-padding-x;
}
&__modal-close {
width: $pay-modal-close-size;
height: $pay-modal-close-size;
}
&__modal-title {
margin-bottom: $pay-modal-title-margin-bottom;
}
&__modal-address {
max-width: $pay-modal-address-max-width;
}
&__modal-change-btn {
line-height: $pay-modal-change-btn-line-height;
padding: 0 1em;
white-space: nowrap;
}
&__modal-submit {
width: 100%;
line-height: $pay-modal-btn-line-height;
border-radius: $pay-modal-btn-radius !important;
}
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/remark/remark.vue
+124 -53
View File
@@ -5,28 +5,39 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="container w-100 h-100 overflow-hidden"> <view class="remark-page w-100 h-100 overflow-hidden">
<view class="textarea"> <view class="remark-page__textarea">
<textarea placeholder-class="text-color-assist font-size-base" v-model="remark" <textarea
class="bg-white w-100 border-box font-size-base remark" placeholder-class="text-color-assist font-size-base"
:class="{'text-color-danger': remarkLength > 50, 'text-color-assist' : remarkLength <=50}" v-model="remark"
placeholder="请填写备注信息" focus/> class="remark-page__input w-100 border-box font-size-base"
<view class="tips" :class="{'text-color-danger': remarkLength > 50, 'text-color-assist' : remarkLength <=50}"> :class="isDanger ? 'remark-page__input--danger' : 'remark-page__input--assist'"
placeholder="请填写备注信息"
focus
/>
<view
class="remark-page__counter"
:class="isDanger ? 'remark-page__counter--danger' : 'remark-page__counter--assist'"
>
{{ remarkLength }}/50 {{ remarkLength }}/50
</view> </view>
</view> </view>
<view class="d-flex font-size-base text-color-assist" style="margin: 40rpx 0;"> <view class="remark-page__label font-size-base text-color-assist">
快捷输入 快捷输入
</view> </view>
<view class="quick-inputs d-flex flex-wrap justify-content-start"> <view class="remark-page__quick-list">
<view class="quick-input" v-for="(item, index) in quickInputs" :key="index" @tap="handleQuickInput(item)"> <view
class="remark-page__quick-item"
v-for="(item, index) in quickInputs"
:key="index"
@tap="handleQuickInput(item)"
>
{{ item }} {{ item }}
</view> </view>
</view> </view>
<view class="d-flex just-content-center align-items-center" style="margin-top: 60rpx;"> <view class="remark-page__actions">
<button type="primary" class="submit-btn font-size-base" @tap="submit">完成</button> <button type="primary" class="remark-page__submit-btn font-size-base" @tap="submit">完成</button>
</view> </view>
<!--轻提示-->
<uv-toast ref="uToast"></uv-toast> <uv-toast ref="uToast"></uv-toast>
</view> </view>
</template> </template>
@@ -38,8 +49,9 @@ import {
} from 'vue' } from 'vue'
import { onLoad} from '@dcloudio/uni-app' import { onLoad} from '@dcloudio/uni-app'
const title = ref('备注')
const remark = ref('') const remark = ref('')
const quickInputs = ref( ['请放门把手上', '请放门口', '请放前台桌上', '如地址封闭管理，请电话与我联系']) const quickInputs = ref(['请放门把手上', '请放门口', '请放前台桌上', '如地址封闭管理，请电话与我联系'])
const uToast = ref() const uToast = ref()
onLoad((opt) => { onLoad((opt) => {
@@ -54,64 +66,123 @@ const isDanger = computed(() => {
}) })
const handleQuickInput = (item) => { const handleQuickInput = (item) => {
remark.value = remark.value.concat(" ", item) remark.value = remark.value.concat(' ', item)
} }
const submit = () => { const submit = () => {
if (remark.value.length > 50) { if (remark.value.length > 50) {
uToast.value.show({ uToast.value.show({
message: '不能超过50个字符', message: '不能超过50个字符',
type: 'error' type: 'error'
}); })
return return
} }
uni.navigateTo({ uni.navigateTo({
url: "/pages/components/pages/pay/pay?remark=" + remark.value url: '/pages/components/pages/pay/pay?remark=' + remark.value
}) })
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { $remark-page-padding-y: 30rpx;
padding: 30rpx 40rpx; $remark-page-padding-x: 40rpx;
$remark-textarea-radius: 8rpx;
$remark-textarea-padding-y: 30rpx;
$remark-textarea-padding-x: 40rpx;
$remark-textarea-height: 320rpx;
$remark-counter-offset-y: 30rpx;
$remark-counter-offset-x: 40rpx;
$remark-label-margin-y: 40rpx;
$remark-quick-list-padding-right: 20rpx;
$remark-quick-item-padding-y: 16rpx;
$remark-quick-item-padding-x: 26rpx;
$remark-quick-item-gap: 20rpx;
$remark-quick-item-border-width: 2rpx;
$remark-actions-margin-top: 60rpx;
$remark-submit-btn-width: 90%;
$remark-submit-btn-height: 80rpx;
$remark-submit-btn-radius: 40rpx;
.textarea { .remark-page {
position: relative; --remark-page-padding-y: #{$remark-page-padding-y};
--remark-page-padding-x: #{$remark-page-padding-x};
--remark-textarea-padding-y: #{$remark-textarea-padding-y};
--remark-textarea-padding-x: #{$remark-textarea-padding-x};
--remark-textarea-height: #{$remark-textarea-height};
--remark-counter-offset-y: #{$remark-counter-offset-y};
--remark-counter-offset-x: #{$remark-counter-offset-x};
--remark-submit-btn-width: #{$remark-submit-btn-width};
--remark-submit-btn-height: #{$remark-submit-btn-height};
.remark { padding: var(--remark-page-padding-y) var(--remark-page-padding-x);
border-radius: 8rpx;
padding: 30rpx 40rpx;
height: 320rpx;
color: $font-size-base;
}
.tips { &__textarea {
position: absolute; position: relative;
bottom: 30rpx; }
right: 40rpx;
} &__input {
border-radius: $remark-textarea-radius;
padding: var(--remark-textarea-padding-y) var(--remark-textarea-padding-x);
height: var(--remark-textarea-height);
background-color: $text-color-white;
color: $text-color-base;
&--danger {
color: $color-error;
} }
.quick-inputs { &--assist {
padding-right: 20rpx; color: $text-color-assist;
.quick-input {
background-color: #FFFFFF;
border: 2rpx solid $color-primary;
color: $color-primary;
font-size: $font-size-base;
padding: 16rpx 26rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
}
.submit-btn {
width: 90%;
height: 80rpx;
border-radius: 40rpx;
line-height: 80rpx;
} }
} }
&__counter {
position: absolute;
bottom: var(--remark-counter-offset-y);
right: var(--remark-counter-offset-x);
font-size: $font-size-base;
&--danger {
color: $color-error;
}
&--assist {
color: $text-color-assist;
}
}
&__label {
margin: $remark-label-margin-y 0;
}
&__quick-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding-right: $remark-quick-list-padding-right;
}
&__quick-item {
background-color: $text-color-white;
border: $remark-quick-item-border-width solid $color-primary;
color: $color-primary;
font-size: $font-size-base;
padding: $remark-quick-item-padding-y $remark-quick-item-padding-x;
margin-right: $remark-quick-item-gap;
margin-bottom: $remark-quick-item-gap;
}
&__actions {
display: flex;
justify-content: center;
align-items: center;
margin-top: $remark-actions-margin-top;
}
&__submit-btn {
width: var(--remark-submit-btn-width);
height: var(--remark-submit-btn-height);
border-radius: $remark-submit-btn-radius;
line-height: var(--remark-submit-btn-height);
}
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/confirm.vue
+24 -12
View File
@@ -7,7 +7,7 @@
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<!-- #endif --> <!-- #endif -->
<view class="px-2 mt-2"> <view class="px-2 mt-2 score-product-confirm">
<view class="bg-white p-2" > <view class="bg-white p-2" >
<uv-form :model="form" ref="uForm" > <uv-form :model="form" ref="uForm" >
<uv-form-item> <uv-form-item>
@@ -26,7 +26,7 @@
<view class="mb-5">积分商城</view> <view class="mb-5">积分商城</view>
<view class="flex justify-between"> <view class="flex justify-between">
<view class="flex"> <view class="flex">
<image :src="product.image" mode="aspectFill" class="image"></image> <image :src="product.image" mode="aspectFill" class="score-product-confirm__thumb"></image>
<text class="font-size-medium">{{ product.title }}</text> <text class="font-size-medium">{{ product.title }}</text>
</view> </view>
<view class="flex flex-column"> <view class="flex flex-column">
@@ -43,7 +43,7 @@
</view> </view>
<view class="fixed-bottom flex justify-between align-center bg-white "> <view class="fixed-bottom flex justify-between align-center bg-white ">
<view class="mx-2 ont-weight-light">合计:<text class="text-danger">￥{{ product.score }}积分</text></view> <view class="mx-2 ont-weight-light">合计:<text class="text-danger">￥{{ product.score }}积分</text></view>
<view><uv-button type="warning" color="#ffcc00" :customStyle="customStyle" size="large" text="立即兑换" @click="submit"></uv-button></view> <view><uv-button type="warning" :color="scoreProductAccent" :customStyle="customStyle" size="large" text="立即兑换" @click="submit"></uv-button></view>
</view> </view>
<uv-toast ref="uToast" /> <uv-toast ref="uToast" />
</template> </template>
@@ -69,11 +69,13 @@ const { address,isLogin} = storeToRefs(main)
const title = ref("确认订单") const title = ref("确认订单")
const product = ref({}) const product = ref({})
const customStyle = computed(() =>{ const scoreProductAccent = '#ffcc00'
const customStyle = computed(() => {
return { return {
paddingLeft:'60rpx', paddingLeft: '60rpx',
paddingRight:'60rpx' paddingRight: '60rpx'
} }
}) })
onLoad(() => { onLoad(() => {
@@ -120,10 +122,20 @@ const submit = async() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.image { $score-product-accent: #ffcc00;
width: 160rpx; $score-product-confirm-thumb-size: 160rpx;
height: 160rpx; $score-product-confirm-thumb-radius: 8rpx;
margin-right: 30rpx;
border-radius: 8rpx; .score-product-confirm {
--score-product-accent: #{$score-product-accent};
--score-product-confirm-thumb-size: #{$score-product-confirm-thumb-size};
&__thumb {
flex-shrink: 0;
width: var(--score-product-confirm-thumb-size);
height: var(--score-product-confirm-thumb-size);
margin-right: $spacing-row-lg;
border-radius: $score-product-confirm-thumb-radius;
} }
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/detail.vue
+72 -79
View File
@@ -7,33 +7,33 @@
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<!-- #endif --> <!-- #endif -->
<view class="container"> <view class="container score-product-detail">
<view class="carousel"> <view class="score-product-detail__carousel">
<swiper indicator-dots circular=true duration="400"> <swiper indicator-dots circular=true duration="400">
<swiper-item class="swiper-item" v-for="(item,index) in product.images" :key="index"> <swiper-item class="score-product-detail__swiper-item" v-for="(item,index) in product.images" :key="index">
<view class="image-wrapper"> <view class="score-product-detail__image-wrapper">
<image :src="item" class="loaded" @click="previewImage(index)" mode="aspectFill"></image> <image :src="item" class="loaded" @click="previewImage(index)" mode="aspectFill"></image>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
<view class="introduce-section" v-if="product.id"> <view class="score-product-detail__intro" v-if="product.id">
<text class="title">{{product.title}}</text> <text class="score-product-detail__title">{{product.title}}</text>
<view class="price-box bot-row"> <view class="score-product-detail__meta">
<text>积分： {{product.score}}</text> <text>积分： {{product.score}}</text>
<text>销量: {{product.sales}}</text> <text>销量: {{product.sales}}</text>
<text>库存: {{product.stock}}</text> <text>库存: {{product.stock}}</text>
</view> </view>
</view> </view>
<view class="detail-desc" v-if="product.desc"> <view class="score-product-detail__desc" v-if="product.desc">
<rich-text :nodes="product.desc"></rich-text> <rich-text :nodes="product.desc"></rich-text>
</view> </view>
<!-- 底部操作菜单 --> <!-- 底部操作菜单 -->
<view class="fixed-bottom px-2"> <view class="fixed-bottom px-2">
<button class="btn" @click="confirm">立即兑换</button> <button class="score-product-detail__btn" @click="confirm">立即兑换</button>
</view> </view>
<uv-toast ref="uToast" /> <uv-toast ref="uToast" />
@@ -133,95 +133,88 @@ const previewImage = (index) => {
</script> </script>
<style lang='scss'> <style lang="scss">
.icon-you { $score-product-accent: #ffcc00;
color: #888; $score-product-detail-carousel-height: 722rpx;
} $score-product-detail-swiper-height: 750rpx;
$score-product-detail-intro-padding-y: 20rpx;
$score-product-detail-intro-padding-x: 30rpx;
$score-product-detail-title-height: 50rpx;
$score-product-detail-meta-height: 64rpx;
$score-product-detail-btn-height: 100rpx;
$score-product-detail-btn-font-size: 40rpx;
$score-product-detail-desc-margin-bottom: 200rpx;
.carousel { .score-product-detail {
height: 722upx; --score-product-accent: #{$score-product-accent};
&__carousel {
position: relative; position: relative;
height: $score-product-detail-carousel-height;
swiper { swiper {
height: 100%; height: 100%;
} }
}
.image-wrapper { &__image-wrapper {
width: 100%;
height: 100%;
}
&__swiper-item {
display: flex;
justify-content: center;
align-content: center;
height: $score-product-detail-swiper-height;
overflow: hidden;
image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.swiper-item {
display: flex;
justify-content: center;
align-content: center;
height: 750upx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
} }
/* 标题简介 */ &__intro {
.introduce-section { background-color: $text-color-white;
background: #fff; padding: $score-product-detail-intro-padding-y $score-product-detail-intro-padding-x;
padding: 20upx 30upx; }
.title { &__title {
font-size: 32upx; height: $score-product-detail-title-height;
color: #555555; line-height: $score-product-detail-title-height;
height: 50upx; font-size: $font-size-lg;
line-height: 50upx; color: $color-subtitle;
} }
.price-box { &__meta {
display: flex; display: flex;
align-items: baseline; align-items: center;
height: 64upx; height: $score-product-detail-meta-height;
padding: 10upx 0; padding: 10rpx 0;
font-size: 30rpx; font-size: $font-size-paragraph;
color: #5A5B5C; color: $text-color-black;
}
.price { text {
font-size: 35rpx; flex: 1;
}
.bot-row {
display: flex;
align-items: center;
text {
flex: 1;
}
} }
} }
.btn { &__btn {
height: 100rpx; height: $score-product-detail-btn-height;
line-height: 100rpx; line-height: $score-product-detail-btn-height;
border-radius: 100rpx; margin: 30rpx auto 20rpx;
background: #ffcc00; border-radius: $score-product-detail-btn-height;
font-size: 40rpx; background-color: var(--score-product-accent);
color: #fff; font-size: $score-product-detail-btn-font-size;
margin: 30upx auto 20upx; color: $text-color-white;
} }
/* 详情 */ &__desc {
.detail-desc { margin-top: $spacing-col-base;
background: #fff; margin-bottom: $score-product-detail-desc-margin-bottom;
margin-top: 16upx; padding: $spacing-row-base;
margin-bottom: 200rpx; background-color: $text-color-white;
padding: 20rpx;
} }
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/list.vue
+36 -78
View File
@@ -13,23 +13,23 @@
:right-gap="10" :right-gap="10"
:column-gap="1"> :column-gap="1">
<template v-slot:list1> <template v-slot:list1>
<view class="demo-warter" v-for="(item, index) in list1" :key="index" @click="goDetail(item)"> <view class="score-product-list__card" v-for="(item, index) in list1" :key="index" @click="goDetail(item)">
<image :src="item.image" mode="widthFix" style="width: 300rpx;"></image> <image :src="item.image" mode="widthFix" class="score-product-list__image"></image>
<view class="demo-title"> <view class="score-product-list__title">
{{item.title}} {{item.title}}
</view> </view>
<view class="demo-price"> <view class="score-product-list__score">
消耗积分:{{item.score}} 消耗积分:{{item.score}}
</view> </view>
</view> </view>
</template> </template>
<template v-slot:list2> <template v-slot:list2>
<view class="demo-warter" v-for="(item, index) in list2" :key="index" @click="goDetail(item)"> <view class="score-product-list__card" v-for="(item, index) in list2" :key="index" @click="goDetail(item)">
<image :src="item.image" mode="widthFix" style="width: 300rpx;"></image> <image :src="item.image" mode="widthFix" class="score-product-list__image"></image>
<view class="demo-title"> <view class="score-product-list__title">
{{item.title}} {{item.title}}
</view> </view>
<view class="demo-price"> <view class="score-product-list__score">
消耗积分:{{item.score}} 消耗积分:{{item.score}}
</view> </view>
</view> </view>
@@ -137,79 +137,37 @@ const getProduct = async() => {
</script> </script>
<style lang="scss"> <style lang="scss">
.search { $score-product-accent: #ffcc00;
margin: 10rpx !important; $score-product-list-card-radius: 8px;
} $score-product-list-card-gap: 5px;
$score-product-list-card-padding: 8px;
$score-product-list-image-width: 300rpx;
$score-product-list-title-gap: 5px;
.demo-warter { .score-product-list__card {
border-radius: 8px; --score-product-accent: #{$score-product-accent};
margin: 5px; --score-product-list-image-width: #{$score-product-list-image-width};
background-color: #ffcc00;
padding: 8px;
position: relative;
}
.demo-title { position: relative;
font-size: 30rpx; margin: $score-product-list-card-gap;
margin-top: 5px; padding: $score-product-list-card-padding;
color: #ffffff; border-radius: $score-product-list-card-radius;
} background-color: var(--score-product-accent);
}
.demo-tag { .score-product-list__image {
display: flex; width: var(--score-product-list-image-width);
margin-top: 5px; }
}
.demo-tag-owner { .score-product-list__title {
background-color: $uv-error; margin-top: $score-product-list-title-gap;
color: #FFFFFF; font-size: $font-size-paragraph;
display: flex; color: $text-color-white;
align-items: center; }
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 20rpx;
line-height: 1;
}
.demo-tag-text { .score-product-list__score {
border: 1px solid $uv-primary; margin-top: $score-product-list-title-gap;
color: $uv-primary; font-size: $font-size-paragraph;
margin-left: 10px; color: $bg-color;
border-radius: 50rpx; }
line-height: 1;
padding: 4rpx 14rpx;
display: flex;
align-items: center;
border-radius: 50rpx;
font-size: 20rpx;
}
.demo-price {
font-size: 30rpx;
color: $bg-color;
margin-top: 5px;
}
.demo-shop {
font-size: 32rpx;
color: #cdad73;
margin-top: 5px;
}
.page {
padding: 10px 0;
.demo-layout {
text-align: center;
background-color: #c6caca;
border-radius: 20rpx;
margin: 5px 0;
padding: 3px;
}
.select {
background-color: #eea13c;
color: #ffffff;
}
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/order.vue
+57 -17
View File
@@ -7,12 +7,12 @@
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<!-- #endif --> <!-- #endif -->
<view class="container"> <view class="container score-product-orders">
<view class="bg-white"> <view class="bg-white">
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs> <uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
</view> </view>
<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;"> <view class="score-product-orders__list d-flex flex-column w-100">
<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;"> <view class="score-product-orders-item" v-for="(item, index) in orders" :key="index">
<list-cell :hover="false"> <list-cell :hover="false">
<view class="w-100 d-flex align-items-center"> <view class="w-100 d-flex align-items-center">
<view class="flex-fill d-flex flex-column"> <view class="flex-fill d-flex flex-column">
@@ -26,29 +26,29 @@
<list-cell :hover="false" last> <list-cell :hover="false" last>
<view class="w-100 d-flex flex-column"> <view class="w-100 d-flex flex-column">
<view class="flex "> <view class="flex ">
<image :src="item.product.image" mode="aspectFill" class="image"></image> <image :src="item.product.image" mode="aspectFill" class="score-product-orders-item__thumb"></image>
<view> <view>
<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;"> <view class="w-100 text-truncate font-size-lg text-color-base score-product-orders-item__title">
{{ item.product.title }} {{ item.product.title }}
</view> </view>
<view class="font-size-sm mt-2">×{{ item.product.number }} {{ item.product.score }}积分</view> <view class="font-size-sm mt-2">×{{ item.product.number }} {{ item.product.score }}积分</view>
</view> </view>
</view> </view>
<view class="d-flex justify-content-between align-items-center mt-3" > <view class="d-flex justify-content-between align-items-center score-product-orders-item__meta">
<view class="font-size-sm text-color-assist"> <view class="font-size-sm text-color-assist">
{{formatDateTime(item.createTime) }} {{formatDateTime(item.createTime) }}
</view> </view>
<view class="d-flex font-size-sm text-color-base align-items-center"> <view class="d-flex font-size-sm text-color-base align-items-center">
<view style="margin-right: 10rpx;">共{{item.number }}件商品，消耗积分</view> <view class="score-product-orders-item__summary">共{{item.number }}件商品，消耗积分</view>
<view class="font-size-lg"> {{ item.totalScore }}</view> <view class="font-size-lg"> {{ item.totalScore }}</view>
</view> </view>
</view> </view>
<view class="d-flex align-items-center justify-content-end mt-3"> <view class="d-flex align-items-center justify-content-end score-product-orders-item__actions">
<view> <view>
<button v-if="item.havePaid > 0 && item.haveDelivered == 1 && item.haveReceived == 0" <button v-if="item.havePaid > 0 && item.haveDelivered == 1 && item.haveReceived == 0"
class="left-margin" type="primary" plain size="mini" class="score-product-orders-item__btn" type="primary" plain size="mini"
@tap.stop="receive(item)">确认收到货</button> @tap.stop="receive(item)">确认收到货</button>
<button class="left-margin" plain size="mini" @tap="detail(item.id)">订单详情</button> <button class="score-product-orders-item__btn" plain size="mini" @tap="detail(item.id)">订单详情</button>
</view> </view>
</view> </view>
</view> </view>
@@ -164,13 +164,53 @@ const receive = async(order) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.left-margin { $score-product-orders-list-padding-x: $spacing-row-base;
margin-left: 10rpx; $score-product-orders-list-padding-bottom: 0;
$score-product-orders-item-gap: $spacing-row-lg;
$score-product-orders-section-gap: $spacing-row-base;
$score-product-orders-btn-gap: $spacing-row-base;
$score-product-orders-summary-gap: $spacing-row-base;
$score-product-orders-thumb-size: 160rpx;
$score-product-orders-thumb-radius: 8rpx;
.score-product-orders {
--score-product-orders-thumb-size: #{$score-product-orders-thumb-size};
&__list {
padding: $score-product-orders-list-padding-x;
padding-bottom: $score-product-orders-list-padding-bottom;
} }
.image { }
width: 160rpx;
height: 160rpx; .score-product-orders-item {
margin-right: 30rpx; margin-bottom: $score-product-orders-item-gap;
border-radius: 8rpx;
&__title {
margin-bottom: $score-product-orders-section-gap;
} }
&__thumb {
flex-shrink: 0;
width: var(--score-product-orders-thumb-size);
height: var(--score-product-orders-thumb-size);
margin-right: $spacing-row-lg;
border-radius: $score-product-orders-thumb-radius;
}
&__meta {
margin-top: $score-product-orders-section-gap;
}
&__summary {
margin-right: $score-product-orders-summary-gap;
}
&__actions {
margin-top: $score-product-orders-section-gap;
}
&__btn + &__btn {
margin-left: $score-product-orders-btn-gap;
}
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/orderDetail.vue
+72 -87
View File
@@ -7,16 +7,16 @@
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<!-- #endif --> <!-- #endif -->
<view class="container" style="padding:20rpx;"> <view class="container score-product-order-detail">
<view style="padding-bottom: 100rpx;"> <view class="score-product-order-detail__body">
<view class="bg-white"> <view class="bg-white">
<view class="section"> <view class="score-product-order-detail__section">
<list-cell :hover="false" padding="50rpx 30rpx"> <list-cell :hover="false" padding="50rpx 30rpx">
<view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;"> <view class="w-100 d-flex flex-column position-relative score-product-order-detail__goods-preview">
<view class="w-100 d-flex align-items-center mb-40"> <view class="w-100 d-flex align-items-center mb-40">
<view class="d-flex flex-column w-60 overflow-hidden"> <view class="d-flex flex-column w-60 overflow-hidden">
<image class="product-image" :src="order.product.image" mode="aspectFill"></image> <image class="score-product-order-detail__thumb" :src="order.product.image" mode="aspectFill"></image>
</view> </view>
<view class="d-flex flex-column w-60 overflow-hidden"> <view class="d-flex flex-column w-60 overflow-hidden">
<view class="font-size-lg text-color-base mb-10 text-truncate">{{ order.product.title }}</view> <view class="font-size-lg text-color-base mb-10 text-truncate">{{ order.product.title }}</view>
@@ -29,29 +29,29 @@
</view> </view>
</list-cell> </list-cell>
</view> </view>
<view class="section"> <view class="score-product-order-detail__section">
<list-cell :hover="false" padding="50rpx 30rpx"> <list-cell :hover="false" padding="50rpx 30rpx">
<view class="w-100 d-flex flex-column"> <view class="w-100 d-flex flex-column">
<view class="pay-cell"> <view class="score-product-order-detail__cell">
<view>消耗积分</view> <view>消耗积分</view>
<view class="font-weight-bold">{{ order.totalScore }}</view> <view class="font-weight-bold">{{ order.totalScore }}</view>
</view> </view>
</view> </view>
</list-cell> </list-cell>
</view> </view>
<view class="section"> <view class="score-product-order-detail__section">
<list-cell :hover="false" padding="50rpx 30rpx"> <list-cell :hover="false" padding="50rpx 30rpx">
<view class="w-100 d-flex flex-column"> <view class="w-100 d-flex flex-column">
<view class="pay-cell"> <view class="score-product-order-detail__cell">
<view>订单状态</view> <view>订单状态</view>
<view class="font-weight-bold">{{ order.statusText }}</view> <view class="font-weight-bold">{{ order.statusText }}</view>
</view> </view>
<view class="pay-cell"> <view class="score-product-order-detail__cell">
<view>下单时间</view> <view>下单时间</view>
<view class="font-weight-bold">{{ formatDateTime(order.createTime) }}</view> <view class="font-weight-bold">{{ formatDateTime(order.createTime) }}</view>
</view> </view>
<view class="pay-cell"> <view class="score-product-order-detail__cell">
<view>订单号</view> <view>订单号</view>
<view class="font-weight-bold">{{ order.orderId }}</view> <view class="font-weight-bold">{{ order.orderId }}</view>
</view> </view>
@@ -60,7 +60,7 @@
<list-cell :hover="false"> <list-cell :hover="false">
<view class="w-100 d-flex align-items-center"> <view class="w-100 d-flex align-items-center">
<view class="pay-cell"> <view class="score-product-order-detail__cell">
<view>收货地址</view> <view>收货地址</view>
</view> </view>
<view class="d-flex flex-column"> <view class="d-flex flex-column">
@@ -73,13 +73,13 @@
<list-cell :hover="false" padding="50rpx 30rpx" v-if="order.expressCompany"> <list-cell :hover="false" padding="50rpx 30rpx" v-if="order.expressCompany">
<view class="w-100 d-flex flex-column"> <view class="w-100 d-flex flex-column">
<view class="pay-cell"> <view class="score-product-order-detail__cell">
<view>快递公司</view> <view>快递公司</view>
<view class="font-weight-bold">{{order.expressCompany }}</view> <view class="font-weight-bold">{{order.expressCompany }}</view>
</view> </view>
<view class="pay-cell"> <view class="score-product-order-detail__cell">
<view>快递单号</view> <view>快递单号</view>
<view class="font-weight-bold">{{order.expressNumber }}<text class="copy" @click="copy()">复制</text></view> <view class="font-weight-bold">{{order.expressNumber }}<text class="score-product-order-detail__copy" @click="copy()">复制</text></view>
<!-- <text class="copy" @click="copy()">复制</text> --> <!-- <text class="copy" @click="copy()">复制</text> -->
</view> </view>
</view> </view>
@@ -190,98 +190,83 @@ const receive = async(order) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.copy { $score-product-order-detail-padding: $spacing-row-base;
color: #1296db; $score-product-order-detail-body-padding-bottom: 100rpx;
margin-left: 10rpx; $score-product-order-detail-thumb-size: 140rpx;
} $score-product-order-detail-cell-gap: 40rpx;
@mixin arch { $score-product-order-detail-section-notch: 30rpx;
content: ""; $score-product-order-detail-section-notch-offset: 15rpx;
$score-product-order-detail-goods-offset: -40rpx;
$score-product-order-detail-copy-color: #1296db;
$score-product-order-detail-copy-gap: $spacing-row-base;
@mixin score-product-order-detail-section-notch {
content: '';
position: absolute; position: absolute;
background-color: $bg-color; bottom: calc(-1 * #{$score-product-order-detail-section-notch-offset});
width: 30rpx;
height: 30rpx;
bottom: -15rpx;
z-index: 10; z-index: 10;
border-radius: 100%; width: $score-product-order-detail-section-notch;
height: $score-product-order-detail-section-notch;
background-color: $bg-color;
border-radius: $border-radius-circle;
} }
.section { /* #ifdef H5 */
page {
min-height: 100%;
background-color: $bg-color;
}
/* #endif */
.score-product-order-detail {
padding: $score-product-order-detail-padding;
--score-product-order-detail-thumb-size: #{$score-product-order-detail-thumb-size};
&__body {
padding-bottom: $score-product-order-detail-body-padding-bottom;
}
&__goods-preview {
margin-bottom: $score-product-order-detail-goods-offset;
}
&__thumb {
flex-shrink: 0;
width: var(--score-product-order-detail-thumb-size);
height: var(--score-product-order-detail-thumb-size);
}
&__copy {
margin-left: $score-product-order-detail-copy-gap;
color: $score-product-order-detail-copy-color;
}
}
.score-product-order-detail__section {
position: relative; position: relative;
&::before { &::before {
@include arch; @include score-product-order-detail-section-notch;
left: -15rpx; left: calc(-1 * #{$score-product-order-detail-section-notch-offset});
} }
&::after { &::after {
@include arch; @include score-product-order-detail-section-notch;
right: -15rpx; right: calc(-1 * #{$score-product-order-detail-section-notch-offset});
} }
} }
.pay-cell { .score-product-order-detail__cell {
width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%;
margin-bottom: $score-product-order-detail-cell-gap;
font-size: $font-size-base; font-size: $font-size-base;
color: $text-color-base; color: $text-color-base;
margin-bottom: 40rpx;
&:nth-last-child(1) { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.invote-box {
position: absolute;
width: 100%;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
image {
width: 30rpx;
height: 30rpx;
}
}
.btn-box {
background-color: #ffffff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 120rpx;
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
display: flex;
align-items: center;
justify-content: space-evenly;
z-index: 11;
.item {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 10rpx;
flex: 1;
flex-shrink: 0;
button {
width: 100%;
border-radius: 50rem !important;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
}
}
.product-image {
width: 140rpx;
height: 140rpx;
}
</style> </style>
yshop-drink-uniapp-vue3/pages/components/pages/shop/shop.vue
+36 -17
View File
@@ -5,21 +5,21 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view> <view class="shop-page">
<view> <view class="shop-page__search">
<uv-search margin="30rpx" v-model="keywork" @custom="search(keywork)"></uv-search> <uv-search v-model="keywork" @custom="search(keywork)"></uv-search>
</view> </view>
<view v-for="(item,index) in list" :key="index"> <view v-for="(item,index) in list" :key="index" class="shop-page__item">
<uni-card @click="choice(item)" :border="item.id == store.id" :title="item.name" :thumbnail="item.image" :thumb-width="80" :sub-title="item.status_text"> <uni-card @click="choice(item)" :border="item.id == store.id" :title="item.name" :thumbnail="item.image" :thumb-width="80" :sub-title="item.status_text">
<view class="body"> <view class="shop-page__body">
<view class="body-left"> <view class="shop-page__info">
<view>距离您 {{kmUnit(item.dis)}}</view> <view>距离您 {{kmUnit(item.dis)}}</view>
<view v-if="item.distance > 0">配送距离：{{item.distance + 'km '}} & 配送费：{{item.delivery_price}}</view> <view v-if="item.distance > 0">配送距离：{{item.distance + 'km '}} & 配送费：{{item.delivery_price}}</view>
<view v-else>外卖不配送</view> <view v-else>外卖不配送</view>
<view>{{item.addressMap + ' ' + item.address}}</view> <view>{{item.addressMap + ' ' + item.address}}</view>
<view>营业时间 {{formatDateTime(item.startTime,'hh:mm')}} - {{formatDateTime(item.endTime,'hh:mm')}}</view> <view>营业时间 {{formatDateTime(item.startTime,'hh:mm')}} - {{formatDateTime(item.endTime,'hh:mm')}}</view>
</view> </view>
<view class="body-right"> <view class="shop-page__actions">
<uv-button @click="openLocation(item)">导航</uv-button> <uv-button @click="openLocation(item)">导航</uv-button>
<uv-button @click="call(item.mobile)">致电</uv-button> <uv-button @click="call(item.mobile)">致电</uv-button>
</view> </view>
@@ -116,18 +116,37 @@ const choice = (shop) => {
</script> </script>
<style lang="scss"> <style lang="scss">
.body { $shop-page-search-margin: $spacing-row-lg;
$shop-page-info-padding-left: 6rpx;
$shop-page-actions-width: 20%;
$shop-page-actions-gap: $spacing-col-sm;
.body-left { .shop-page {
display: inline-block; --shop-page-search-margin: #{$shop-page-search-margin};
width: 77%; --shop-page-info-padding-left: #{$shop-page-info-padding-left};
padding-left: 6rpx; --shop-page-actions-width: #{$shop-page-actions-width};
} --shop-page-actions-gap: #{$shop-page-actions-gap};
.body-right {
display: inline-block; &__search {
width: 20%; margin: var(--shop-page-search-margin);
}
} }
&__body {
display: flex;
align-items: flex-start;
}
&__info {
flex: 1;
min-width: 0;
padding-left: var(--shop-page-info-padding-left);
}
&__actions {
flex: 0 0 var(--shop-page-actions-width);
display: flex;
flex-direction: column;
gap: var(--shop-page-actions-gap);
}
}
</style> </style>
yshop-drink-uniapp-vue3/pages/index/index.vue
+123 -121
View File
@@ -20,59 +20,55 @@
</uv-sticky> </uv-sticky>
<blank size="10"></blank> <blank size="10"></blank>
<view class="container"> <view class="container index-page">
<view class="banner"> <view class="index-banner">
<uv-swiper class="bg" height="300" imgMode="aspectFill" keyName="image" :list="listAds" indicatorMode="dot" indicatorStyle="bottom"></uv-swiper> <uv-swiper class="index-banner__swiper" height="300" imgMode="aspectFill" keyName="image" :list="listAds" indicatorMode="dot" indicatorStyle="bottom"></uv-swiper>
<view class="intro"> <view class="index-banner__intro">
<view class="greet">您好，{{ isLogin ? member.nickname : '游客' }}</view> <view class="index-banner__greet">您好，{{ isLogin ? member.nickname : '游客' }}</view>
<view class="note">java-springboot-意向点餐外卖系统</view> <view class="index-banner__note">java-springboot-意向点餐外卖系统</view>
</view> </view>
</view> </view>
<view class="content"> <view class="index-content">
<view class="flex justify-between yshop-menu"> <view class="flex justify-between index-menu">
<view class="flex flex-column align-center yshop-menu-item " @tap="takein"> <view class="flex flex-column align-center index-menu__item" @tap="takein">
<view><image src="/static/images/index002.png" mode="aspectFit" class="img-01"></image></view> <view><image src="/static/images/index002.png" mode="aspectFit" class="index-menu__icon"></image></view>
<view>自取</view> <view>自取</view>
<view class="font-small text-light-black">下单免排队</view> <view class="font-small text-light-black">下单免排队</view>
</view> </view>
<view class="flex flex-column align-center yshop-menu-item " @tap="takeout"> <view class="flex flex-column align-center index-menu__item" @tap="takeout">
<view><image src="/static/images/index003.png" mode="aspectFit" class="img-01"></image></view> <view><image src="/static/images/index003.png" mode="aspectFit" class="index-menu__icon"></image></view>
<view>外卖</view> <view>外卖</view>
<view class="font-small text-light-black">美食送到家</view> <view class="font-small text-light-black">美食送到家</view>
</view> </view>
</view> </view>
<view class="info"> <view class="index-card">
<view class="integral_section"> <view class="index-card__main">
<view class="top"> <view class="index-card__header">
<text class="title">我的卡券</text> <text class="index-card__title">我的卡券</text>
<text class="value">{{member.couponCount}}</text> <text class="index-card__value">{{member.couponCount}}</text>
</view> </view>
<view class="bottom"> <view class="index-card__desc">
可抵扣商品价格哦 可抵扣商品价格哦
</view> </view>
</view> </view>
<view class="qrcode_section" @tap="coupons"> <view class="index-card__action" @tap="coupons">
去领个券 去领个券
<!-- <view class="iconfont iconarrow-right"></view> -->
</view> </view>
</view> </view>
<view class="info"> <view class="index-card">
<view class="integral_section" @tap="goScore"> <view class="index-card__main" @tap="goScore">
<view class="top"> <view class="index-card__header">
<text class="title">积分商城</text> <text class="index-card__title">积分商城</text>
</view> </view>
<view class="bottom"> <view class="index-card__desc">
进入积分商城兑换奈雪券及周边好礼 进入积分商城兑换奈雪券及周边好礼
<!-- <view class="iconfont iconarrow-right"></view> -->
</view> </view>
</view> </view>
<view class="qrcode_section" @tap="goScore"> <view class="index-card__action index-card__action--with-icon" @tap="goScore">
<image src="/static/images/jifen.png"></image> <image src="/static/images/jifen.png" class="index-card__action-icon"></image>
<text>逛一逛</text> <text>逛一逛</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</layout> </layout>
@@ -159,28 +155,15 @@ onLoad(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
.yshop-menu { // 首页局部尺寸 token（与 uni.scss 全局变量配合）
//margin-bottom: 10rpx; $index-banner-height: 300rpx;
// position: relative; $index-menu-item-width: 355rpx;
margin-top: 20rpx; $index-card-radius: 10rpx;
} $index-content-padding-x: 15rpx;
.yshop-menu-item { $index-intro-offset-x: 40rpx;
background-color: #ffffff; $index-intro-offset-y: 50rpx;
width: 355rpx; $index-value-font-size: 44rpx;
padding-bottom: 30rpx; $index-gap-sm: 10rpx;
}
.img-01 {
width: 100px;
height: 100rpx;
margin-top: 30rpx;
}
.img-02 {
width: 110px;
height: 110rpx;
margin-top: 20rpx;
}
/* #ifdef H5 */ /* #ifdef H5 */
page { page {
@@ -188,98 +171,117 @@ page {
min-height: 100%; min-height: 100%;
} }
/* #endif */ /* #endif */
page {
//background-color: #ffffff!important;
}
.banner {
position: relative;
width: 100%;
//height: 300rpx;
.bg { .index-page {
--index-banner-height: #{$index-banner-height};
--index-menu-item-width: #{$index-menu-item-width};
.index-banner {
position: relative;
width: 100%; width: 100%;
height: 300rpx;
}
.intro { &__swiper {
position: absolute; width: 100%;
top: calc(50rpx + var(--status-bar-height)); height: var(--index-banner-height);
left: 40rpx; }
color: #FFFFFF;
display: flex;
flex-direction: column;
.greet { &__intro {
position: absolute;
top: calc(#{$index-intro-offset-y} + var(--status-bar-height));
left: $index-intro-offset-x;
color: $text-color-white;
display: flex;
flex-direction: column;
}
&__greet {
font-size: $font-size-lg; font-size: $font-size-lg;
margin-bottom: 10rpx; margin-bottom: $index-gap-sm;
} }
.note { &__note {
font-size: $font-size-sm; font-size: $font-size-sm;
} }
} }
}
.content { .index-content {
padding: 0 15rpx; padding: 0 $index-content-padding-x;
} }
.index-menu {
margin-top: $spacing-row-base;
.info { &__item {
position: relative; width: var(--index-menu-item-width);
margin: 10rpx 0; padding-bottom: $spacing-row-lg;
border-radius: 10rpx; background-color: $text-color-white;
background-color: #ffffff;
box-shadow: $box-shadow;
//padding: 30rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 25rpx;
.integral_section {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.top {
display: flex;
align-items: center;
.title {
color: $text-color-base;
font-size: $font-size-base;
margin-right: 10rpx;
}
.value {
font-size: 44rpx;
font-weight: bold;
}
} }
.bottom { &__icon {
font-size: $font-size-sm; width: 100rpx;
color: $text-color-assist; height: 100rpx;
display: flex; margin-top: $spacing-row-lg;
align-items: center;
} }
} }
.qrcode_section { .index-card {
color: $color-primary; position: relative;
display: flex; display: flex;
//flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: $font-size-sm; margin: $index-gap-sm 0;
padding: 25rpx;
border-radius: $index-card-radius;
background-color: $text-color-white;
box-shadow: $box-shadow;
image { &__main {
width: 40rpx; flex: 1;
height: 40rpx; display: flex;
margin-bottom: 10rpx; flex-direction: column;
justify-content: center;
}
&__header {
display: flex;
align-items: center;
}
&__title {
margin-right: $index-gap-sm;
font-size: $font-size-base;
color: $text-color-base;
}
&__value {
font-size: $index-value-font-size;
font-weight: bold;
}
&__desc {
display: flex;
align-items: center;
font-size: $font-size-sm;
color: $text-color-assist;
}
&__action {
display: flex;
align-items: center;
justify-content: center;
font-size: $font-size-sm;
color: $color-primary;
&--with-icon {
flex-direction: column;
}
}
&__action-icon {
width: $img-size-sm;
height: $img-size-sm;
margin-bottom: $index-gap-sm;
} }
} }
} }
</style> </style>
yshop-drink-uniapp-vue3/pages/menu/menu.vue
+647 -546
View File
File diff suppressed because it is too large. Load diff
yshop-drink-uniapp-vue3/pages/mine/mine.vue
+94 -104
View File
@@ -6,16 +6,16 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="container"> <view class="container mine-page">
<view style="padding: 0 30rpx;"> <view class="mine-page__user-section">
<!-- user box begin --> <!-- user box begin -->
<view class="d-flex flex-column bg-white user-box"> <view class="mine-user d-flex flex-column bg-white">
<view class="d-flex align-items-center"> <view class="mine-user__header d-flex align-items-center">
<view class="avatar rounded-circle"> <view class="mine-user__avatar rounded-circle">
<image :src="isLogin ? member.avatar ? member.avatar : '/static/images/mine/default.png' : '/static/images/mine/default.png'"></image> <image :src="isLogin ? member.avatar ? member.avatar : '/static/images/mine/default.png' : '/static/images/mine/default.png'"></image>
</view> </view>
<view class="d-flex flex-column flex-fill overflow-hidden" style="margin-top: 20rpx;"> <view class="mine-user__info d-flex flex-column flex-fill overflow-hidden">
<view v-if="isLogin" <view v-if="isLogin"
class="font-size-lg font-weight-bold d-flex justify-content-start align-items-center" class="font-size-lg font-weight-bold d-flex justify-content-start align-items-center"
@tap="serv({type:'pages',pages:'/pages/components/pages/mine/userinfo'})"> @tap="serv({type:'pages',pages:'/pages/components/pages/mine/userinfo'})">
@@ -26,26 +26,26 @@
</view> </view>
</view> </view>
<!-- user grid begin --> <!-- user grid begin -->
<view class="w-100 d-flex align-items-center just-content-center"> <view class="mine-user__stats w-100 d-flex align-items-center just-content-center">
<view class="user-grid" @tap="serv({type:'pages',pages:'/pages/components/pages/coupons/coupons'})"> <view class="mine-user__stat" @tap="serv({type:'pages',pages:'/pages/components/pages/coupons/coupons'})">
<view class="value font-size-extra-lg font-weight-bold text-color-base"> <view class="value font-size-extra-lg font-weight-bold text-color-base">
{{ isLogin ? member.couponCount : 0}} {{ isLogin ? member.couponCount : 0}}
</view> </view>
<view class="font-size-sm text-color-assist">优惠券</view> <view class="font-size-sm text-color-assist">优惠券</view>
</view> </view>
<view class="user-grid" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=1'})"> <view class="mine-user__stat" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=1'})">
<view class="value font-size-extra-lg font-weight-bold text-color-base"> <view class="value font-size-extra-lg font-weight-bold text-color-base">
{{ isLogin ? member.integral : 0 }} {{ isLogin ? member.integral : 0 }}
</view> </view>
<view class="font-size-sm text-color-assist">积分</view> <view class="font-size-sm text-color-assist">积分</view>
</view> </view>
<view class="user-grid"> <view class="mine-user__stat">
<view class="value font-size-extra-lg font-weight-bold text-color-base"> <view class="value font-size-extra-lg font-weight-bold text-color-base">
{{ isLogin ? member.nowMoney : 0 }} {{ isLogin ? member.nowMoney : 0 }}
</view> </view>
<view class="font-size-sm text-color-assist">余额</view> <view class="font-size-sm text-color-assist">余额</view>
</view> </view>
<view class="user-grid" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=0'})"> <view class="mine-user__stat" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=0'})">
<view class="value font-size-extra-lg font-weight-bold text-color-base"> <view class="value font-size-extra-lg font-weight-bold text-color-base">
{{ isLogin ? member.sumMoney : 0 }} {{ isLogin ? member.sumMoney : 0 }}
</view> </view>
@@ -58,24 +58,24 @@
</view> </view>
<!-- service box begin --> <!-- service box begin -->
<view class="service-box"> <view class="mine-service">
<view class="font-size-lg text-color-base font-weight-bold" style="margin-bottom: 20rpx;">我的服务</view> <view class="mine-service__title font-size-lg text-color-base font-weight-bold">我的服务</view>
<view class="u-m-t-20"> <view class="u-m-t-20">
<uv-cell-group> <uv-cell-group>
<block v-for="(item, index) in services" :key='index'> <block v-for="(item, index) in services" :key='index'>
<uv-cell :title="item.name" v-if="item.type == 'contact'" :isLink="true"> <uv-cell :title="item.name" v-if="item.type == 'contact'" :isLink="true">
<template #icon> <template #icon>
<image :src="item.image" style="width: 40rpx;height: 40rpx;" class="mr-1"></image> <image :src="item.image" class="mine-service__icon mr-1"></image>
</template> </template>
</uv-cell> </uv-cell>
<uv-cell :isLink="true" :title="item.name" v-else-if="item.type == 'call'" v-on:click="makePhoneCall(item.phone)"> <uv-cell :isLink="true" :title="item.name" v-else-if="item.type == 'call'" v-on:click="makePhoneCall(item.phone)">
<template #icon> <template #icon>
<image :src="item.image" style="width: 40rpx;height: 40rpx;" class="mr-1"></image> <image :src="item.image" class="mine-service__icon mr-1"></image>
</template> </template>
</uv-cell> </uv-cell>
<uv-cell :isLink="true" :title="item.name" v-else @tap="serv(item)"> <uv-cell :isLink="true" :title="item.name" v-else @tap="serv(item)">
<template #icon> <template #icon>
<image :src="item.image" style="width: 40rpx;height: 40rpx;" class="mr-1"></image> <image :src="item.image" class="mine-service__icon mr-1"></image>
</template> </template>
</uv-cell> </uv-cell>
</block> </block>
@@ -189,114 +189,104 @@ const serv = (item) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
page { // 个人中心页局部 token（与 uni.scss 全局变量配合）
height: auto; $mine-section-padding-x: $spacing-row-lg;
min-height: 100%; $mine-user-box-radius: $border-radius-lg;
$mine-user-box-margin-top: 70rpx;
$mine-user-box-margin-bottom: $spacing-row-lg;
$mine-avatar-size: 160rpx;
$mine-avatar-image-size: 140rpx;
$mine-avatar-offset-top: -35rpx;
$mine-avatar-margin-x: 35rpx;
$mine-avatar-radius: 20rpx;
$mine-avatar-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
$mine-stat-width: 25%;
$mine-stat-padding: $spacing-row-lg;
$mine-stat-value-gap: $spacing-row-base;
$mine-info-margin-top: $spacing-row-base;
$mine-service-padding-y: 32rpx;
$mine-service-padding-bottom: 10rpx;
$mine-service-icon-size: $img-size-sm;
$mine-service-title-gap: $spacing-row-base;
/* #ifdef H5 */
page {
height: auto;
min-height: 100%;
}
/* #endif */
.mine-page {
--mine-avatar-size: #{$mine-avatar-size};
--mine-avatar-image-size: #{$mine-avatar-image-size};
--mine-service-icon-size: #{$mine-service-icon-size};
&__user-section {
padding: 0 $mine-section-padding-x;
}
}
.mine-user {
position: relative;
margin-top: $mine-user-box-margin-top;
margin-bottom: $mine-user-box-margin-bottom;
border-radius: $mine-user-box-radius;
box-shadow: $box-shadow;
&__info {
margin-top: $mine-info-margin-top;
} }
&__avatar {
.user-box {
position: relative; position: relative;
border-radius: 8rpx;
margin-bottom: 30rpx;
margin-top: 70rpx;
box-shadow: $box-shadow;
}
.avatar {
position: relative;
margin-top: -35rpx;
margin-left: 35rpx;
margin-right: 35rpx;
width: 160rpx;
height: 160rpx;
border-radius: 20rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #FFFFFF; flex-shrink: 0;
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2); width: var(--mine-avatar-size);
height: var(--mine-avatar-size);
margin-top: $mine-avatar-offset-top;
margin-left: $mine-avatar-margin-x;
margin-right: $mine-avatar-margin-x;
border-radius: $mine-avatar-radius;
background-color: $text-color-white;
box-shadow: $mine-avatar-shadow;
image { image {
width: 140rpx; width: var(--mine-avatar-image-size);
height: 140rpx; height: var(--mine-avatar-image-size);
border-radius: 100%; border-radius: $border-radius-circle;
}
.badge {
position: absolute;
right: -10rpx;
bottom: -10rpx;
background-color: #FFFFFF;
border-radius: 50rem;
display: flex;
align-items: center;
justify-content: center;
color: $color-warning;
font-size: 24rpx;
padding: 8rpx 16rpx;
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
image {
width: 30rpx;
height: 30rpx;
}
} }
} }
&__stat {
.user-grid {
width: 25%;
padding: 30rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: $mine-stat-width;
padding: $mine-stat-padding;
.value { .value {
margin-bottom: 20rpx; margin-bottom: $mine-stat-value-gap;
} }
} }
}
.mine-service {
width: 100%;
padding: $mine-service-padding-y $mine-section-padding-x $mine-service-padding-bottom;
background-color: $text-color-white;
box-shadow: $box-shadow;
&__title {
.service-box { margin-bottom: $mine-service-title-gap;
width: 100%;
background-color: #FFFFFF;
padding: 32rpx 30rpx 10rpx;
box-shadow: $box-shadow;
.row {
display: flex;
flex-wrap: wrap;
color: $text-color-assist;
font-size: $font-size-sm;
padding-bottom: -40rpx;
.grid {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 40rpx;
width: 25%;
position: relative;
image {
width: 80rpx;
height: 80rpx;
margin-bottom: 20rpx;
}
}
.opacity-0 {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 10;
}
}
} }
&__icon {
width: var(--mine-service-icon-size);
height: var(--mine-service-icon-size);
flex-shrink: 0;
}
}
</style> </style>
yshop-drink-uniapp-vue3/pages/order/order.vue
+66 -21
View File
@@ -5,16 +5,16 @@
left-arrow left-arrow
@leftClick="$onClickLeft" @leftClick="$onClickLeft"
/> />
<view class="container"> <view class="container order-page">
<view class="bg-white"> <view class="bg-white">
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs> <uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
</view> </view>
<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;"> <view class="order-page__list d-flex flex-column w-100">
<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;" > <view class="order-item" v-for="(item, index) in orders" :key="index">
<list-cell :hover="false"> <list-cell :hover="false">
<view class="w-100 d-flex align-items-center"> <view class="w-100 d-flex align-items-center">
<view class="flex-fill d-flex flex-column"> <view class="flex-fill d-flex flex-column">
<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;"> <view class="font-size-lg text-color-base order-item__shop">
{{ item.shop.name }} {{ item.shop.name }}
</view> </view>
<view class="font-size-sm text-color-assist">取餐号：{{ item.numberId }}</view> <view class="font-size-sm text-color-assist">取餐号：{{ item.numberId }}</view>
@@ -27,9 +27,9 @@
</list-cell> </list-cell>
<list-cell :hover="false" last> <list-cell :hover="false" last>
<view class="w-100 d-flex flex-column"> <view class="w-100 d-flex flex-column">
<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;"> <view class="w-100 text-truncate font-size-lg text-color-base order-item__goods">
<view class="flex mb-2" v-for="(good,index) in item.cartInfo" :key="index"> <view class="flex order-item__goods-row mb-2" v-for="(good,index) in item.cartInfo" :key="index">
<image :src="good.image" mode="aspectFill" class="image"></image> <image :src="good.image" mode="aspectFill" class="order-item__thumb"></image>
<view class="flex flex-column"> <view class="flex flex-column">
<view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view> <view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view>
<view class="font-size-sm mt-1">{{ good.spec }}</view> <view class="font-size-sm mt-1">{{ good.spec }}</view>
@@ -37,20 +37,24 @@
</view> </view>
</view> </view>
</view> </view>
<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;"> <view class="d-flex justify-content-between align-items-center order-item__meta">
<view class="font-size-sm text-color-assist"> <view class="font-size-sm text-color-assist">
{{formatDateTime(item.createTime) }} {{formatDateTime(item.createTime) }}
</view> </view>
<view class="d-flex font-size-sm text-color-base align-items-center"> <view class="d-flex font-size-sm text-color-base align-items-center">
<view style="margin-right: 10rpx;">共{{ goodsNum(item.cartInfo) }}件商品，实付</view> <view class="order-item__summary">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
<view class="font-size-lg">￥{{ item.payPrice }}</view> <view class="font-size-lg">￥{{ item.payPrice }}</view>
</view> </view>
</view> </view>
<view class="d-flex align-items-center justify-content-end"> <view class="d-flex align-items-center justify-content-end order-item__actions">
<view> <button
<button v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0" class="left-margin" plain size="mini" @tap.stop="receive(item)">确认收到餐</button> v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0"
<button class="left-margin" plain size="mini" @tap="detail(item.orderId)">订单详情</button> class="order-item__btn"
</view> plain
size="mini"
@tap.stop="receive(item)"
>确认收到餐</button>
<button class="order-item__btn" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
</view> </view>
</view> </view>
</list-cell> </list-cell>
@@ -163,13 +167,54 @@ const receive = async(order) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.left-margin { // 订单页局部 token（与 uni.scss 全局变量配合）
margin-left: 10rpx; $order-list-padding-x: $spacing-row-base;
$order-list-padding-bottom: 0;
$order-item-gap: $spacing-row-lg;
$order-section-gap: $spacing-row-base;
$order-btn-gap: $spacing-row-base;
$order-summary-gap: $spacing-row-base;
$order-thumb-size: 160rpx;
$order-thumb-radius: 8rpx;
.order-page {
--order-thumb-size: #{$order-thumb-size};
&__list {
padding: $order-list-padding-x;
padding-bottom: $order-list-padding-bottom;
} }
.image { }
width: 160rpx;
height: 160rpx; .order-item {
margin-right: 30rpx; margin-bottom: $order-item-gap;
border-radius: 8rpx;
&__shop {
margin-bottom: $order-section-gap;
} }
&__goods {
margin-bottom: $order-section-gap;
}
&__thumb {
flex-shrink: 0;
width: var(--order-thumb-size);
height: var(--order-thumb-size);
margin-right: $spacing-row-lg;
border-radius: $order-thumb-radius;
}
&__meta {
margin-bottom: $order-item-gap;
}
&__summary {
margin-right: $order-summary-gap;
}
&__btn + &__btn {
margin-left: $order-btn-gap;
}
}
</style> </style>
yshop-drink-uniapp-vue3/static/style/app.scss
+1104 -282
View File
File diff suppressed because it is too large. Load diff
yshop-drink-uniapp-vue3/uni.scss
+8 -9
View File
@@ -14,27 +14,30 @@
/* 颜色变量 */ /* 颜色变量 */
/* 行为相关颜色 */ /* 行为相关颜色 */
// $color-primary: #ADB838;
$color-primary: #09b4f1; $color-primary: #09b4f1;
$color-success: #4cd964; $color-success: #4cd964;
$color-warning: #FAB714; $color-warning: #FAB714;
$color-error: #D12E32; $color-error: #D12E32;
/* 文字基本颜色 */ /* 文字基本颜色 */
$text-color-base: #5A5B5C; //基本色 $text-color-base: #333333; //基本色(主要文字)
$text-color-assist: #919293; //辅助色 $text-color-assist: #999999; //辅助色(次要文字)
$text-color-black: #3B3C3E; //黑 $text-color-black: #3B3C3E; //黑
$text-color-grey: #878889; //灰 $text-color-grey: #878889; //灰
$text-color-white: #ffffff; //白 $text-color-white: #ffffff; //白
$text-color-light-muted: #A9A5A0; //浅灰
/* 背景颜色 */ /* 背景颜色 */
$bg-color: #F1F8FA; $bg-color: #F1F8FA;
$bg-color-grey: #F5F5F5; $bg-color-grey: #F5F5F5;
//$bg-color-primary: #E8EACF;
$bg-color-primary: #dbe7ea; $bg-color-primary: #dbe7ea;
/* 边框颜色 */ /* 边框颜色 */
$border-color:#e2e2e2; $border-color: #e6e6e6;
$border-color-light: #E9E8E5;
/* 阴影 */
$box-shadow: 0 20rpx 20rpx -20rpx rgba($color: #333, $alpha: 0.1);
/* 尺寸变量 */ /* 尺寸变量 */
@@ -75,10 +78,6 @@ $font-size-subtitle:36rpx;
$color-paragraph: #3F536E; // 文章段落颜色 $color-paragraph: #3F536E; // 文章段落颜色
$font-size-paragraph:30rpx; $font-size-paragraph:30rpx;
$box-shadow: 0 20rpx 20rpx -20rpx rgba($color: #333, $alpha: 0.1);
$uv-main-color: #333333; $uv-main-color: #333333;
$uv-content-color: #999999; $uv-content-color: #999999;