bingyi/yshop-drink
1
1
Fork 0
mirror of https://gitee.com/guchengwuyue/yshop-drink.git synced 2026-06-05 18:25:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

所有页面css 规范

Browse Source
This commit is contained in:
hupeng
2026-05-22 10:46:55 +08:00
parent 50fbcfe27b
commit b168232fbb
30 changed files with 5026 additions and 3580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
yshop-drink-uniapp-vue3/App.vue
View File

@ -1,21 +1,21 @@
<script setup>
import { onHide,onLaunch,onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store/store'
const main = useMainStore()
import { isWeixin,parseQuery } from '@/utils/util'
import cookie from '@/utils/cookie'
import {
userAuthSession,
wechatAuth
wechatAuth
} from '@/api/auth'
import { APP_ID } from '@/config'
onLaunch(() => {
console.log('App Launch')
onLaunch(() => {
console.log('App Launch')
})
onShow(() => {
onShow(() => {
console.log('App Show')
// 检查用户登录情况
@ -28,11 +28,11 @@ onShow(() => {
// #endif
// #ifdef MP-WEIXIN
wechatMiniLogin();
// #endif
// #endif
})
onHide(() => {
console.log('App Hide')
onHide(() => {
console.log('App Hide')
})
@ -51,7 +51,7 @@ const wechatMiniLogin = () => {
main.SET_MEMBER(data.userInfo);
main.SET_TOKEN(data.accessToken);
}
}
}
});
}
@ -106,17 +106,9 @@ const auth = async(code) => {
}
</script>
</script>
<style lang="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>

395
yshop-drink-uniapp-vue3/package-lock.json generated
View File

@ -1,299 +1,412 @@
{
"name": "yshop-miniapp",
"version": "1.2.0",
"lockfileVersion": 1,
"lockfileVersion": 3,
"requires": true,
"dependencies": {
"@vant/area-data": {
"packages": {
"": {
"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",
"resolved": "https://registry.npmmirror.com/@vant/area-data/-/area-data-1.5.0.tgz",
"integrity": "sha512-SWmDhYmWiOgtAgtJqcW7N4XyGgrg/7l6t1+XSgt8BkPp2oOKO1ZUn8+46brLpT/gzRe/v8BtyTLmdBwMamrmQw=="
},
"@vant/popperjs": {
"node_modules/@vant/popperjs": {
"version": "1.3.0",
"resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
"integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
},
"@vant/use": {
"node_modules/@vant/use": {
"version": "1.5.2",
"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",
"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
"integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
},
"@vue/shared": {
"node_modules/@vue/shared": {
"version": "3.3.4",
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz",
"integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
},
"add": {
"node_modules/add": {
"version": "2.0.6",
"resolved": "https://registry.npmmirror.com/add/-/add-2.0.6.tgz",
"integrity": "sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q=="
},
"ajv": {
"node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"requires": {
"dependencies": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/epoberezkin"
}
},
"asn1": {
"node_modules/asn1": {
"version": "0.2.6",
"resolved": "https://registry.npmmirror.com/asn1/-/asn1-0.2.6.tgz",
"integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
"requires": {
"dependencies": {
"safer-buffer": "~2.1.0"
}
},
"assert-plus": {
"node_modules/assert-plus": {
"version": "1.0.0",
"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",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"aws-sign2": {
"node_modules/aws-sign2": {
"version": "0.7.0",
"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",
"resolved": "https://registry.npmmirror.com/aws4/-/aws4-1.12.0.tgz",
"integrity": "sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg=="
},
"bcrypt-pbkdf": {
"node_modules/bcrypt-pbkdf": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
"integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
"requires": {
"dependencies": {
"tweetnacl": "^0.14.3"
}
},
"caseless": {
"node_modules/caseless": {
"version": "0.12.0",
"resolved": "https://registry.npmmirror.com/caseless/-/caseless-0.12.0.tgz",
"integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
},
"combined-stream": {
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"core-util-is": {
"node_modules/core-util-is": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.2.tgz",
"integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
},
"dashdash": {
"node_modules/dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmmirror.com/dashdash/-/dashdash-1.14.1.tgz",
"integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
"requires": {
"dependencies": {
"assert-plus": "^1.0.0"
},
"engines": {
"node": ">=0.10"
}
},
"delayed-stream": {
"node_modules/delayed-stream": {
"version": "1.0.0",
"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",
"resolved": "https://registry.npmmirror.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
"integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
"requires": {
"dependencies": {
"jsbn": "~0.1.0",
"safer-buffer": "^2.1.0"
}
},
"extend": {
"node_modules/extend": {
"version": "3.0.2",
"resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz",
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
},
"extsprintf": {
"node_modules/extsprintf": {
"version": "1.3.0",
"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",
"resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"fast-json-stable-stringify": {
"node_modules/fast-json-stable-stringify": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
},
"flyio": {
"node_modules/flyio": {
"version": "0.6.14",
"resolved": "https://registry.npmmirror.com/flyio/-/flyio-0.6.14.tgz",
"integrity": "sha512-RE2OXE1ZZmcXOKb0jCtGyquHDxpAqHg17CZ8lmQKRfl3x1kP+NBpaQDx4WgN7DNpLJjFnspTzTEQpwRGg6/xaA==",
"requires": {
"dependencies": {
"request": "^2.85.0"
}
},
"forever-agent": {
"node_modules/forever-agent": {
"version": "0.6.1",
"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",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-2.3.3.tgz",
"integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
"requires": {
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.6",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 0.12"
}
},
"getpass": {
"node_modules/getpass": {
"version": "0.1.7",
"resolved": "https://registry.npmmirror.com/getpass/-/getpass-0.1.7.tgz",
"integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
"requires": {
"dependencies": {
"assert-plus": "^1.0.0"
}
},
"har-schema": {
"node_modules/har-schema": {
"version": "2.0.0",
"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",
"resolved": "https://registry.npmmirror.com/har-validator/-/har-validator-5.1.5.tgz",
"integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
"requires": {
"deprecated": "this library is no longer supported",
"dependencies": {
"ajv": "^6.12.3",
"har-schema": "^2.0.0"
},
"engines": {
"node": ">=6"
}
},
"http-signature": {
"node_modules/http-signature": {
"version": "1.2.0",
"resolved": "https://registry.npmmirror.com/http-signature/-/http-signature-1.2.0.tgz",
"integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
"requires": {
"dependencies": {
"assert-plus": "^1.0.0",
"jsprim": "^1.2.2",
"sshpk": "^1.7.0"
},
"engines": {
"node": ">=0.8",
"npm": ">=1.3.7"
}
},
"is-typedarray": {
"node_modules/is-typedarray": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/is-typedarray/-/is-typedarray-1.0.0.tgz",
"integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
},
"isstream": {
"node_modules/isstream": {
"version": "0.1.2",
"resolved": "https://registry.npmmirror.com/isstream/-/isstream-0.1.2.tgz",
"integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
},
"jsbn": {
"node_modules/jsbn": {
"version": "0.1.1",
"resolved": "https://registry.npmmirror.com/jsbn/-/jsbn-0.1.1.tgz",
"integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
},
"json-schema": {
"node_modules/json-schema": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/json-schema/-/json-schema-0.4.0.tgz",
"integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
},
"json-schema-traverse": {
"node_modules/json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
},
"json-stringify-safe": {
"node_modules/json-stringify-safe": {
"version": "5.0.1",
"resolved": "https://registry.npmmirror.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
"integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
},
"jsprim": {
"node_modules/jsprim": {
"version": "1.4.2",
"resolved": "https://registry.npmmirror.com/jsprim/-/jsprim-1.4.2.tgz",
"integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
"requires": {
"dependencies": {
"assert-plus": "1.0.0",
"extsprintf": "1.3.0",
"json-schema": "0.4.0",
"verror": "1.10.0"
},
"engines": {
"node": ">=0.6.0"
}
},
"jweixin-module": {
"node_modules/jweixin-module": {
"version": "1.6.0",
"resolved": "https://registry.npmmirror.com/jweixin-module/-/jweixin-module-1.6.0.tgz",
"integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
},
"mime-db": {
"node_modules/mime-db": {
"version": "1.52.0",
"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",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"requires": {
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"oauth-sign": {
"node_modules/oauth-sign": {
"version": "0.9.0",
"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",
"resolved": "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz",
"integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
},
"pinia": {
"node_modules/pinia": {
"version": "2.1.6",
"resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.6.tgz",
"integrity": "sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==",
"requires": {
"dependencies": {
"@vue/devtools-api": "^6.5.0",
"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",
"resolved": "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz",
"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
},
"punycode": {
"node_modules/punycode": {
"version": "2.3.0",
"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",
"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",
"resolved": "https://registry.npmmirror.com/request/-/request-2.88.2.tgz",
"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",
"aws4": "^1.8.0",
"caseless": "~0.12.0",
@ -314,23 +427,40 @@
"tough-cookie": "~2.5.0",
"tunnel-agent": "^0.6.0",
"uuid": "^3.3.2"
},
"engines": {
"node": ">= 6"
}
},
"safe-buffer": {
"node_modules/safe-buffer": {
"version": "5.2.1",
"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",
"resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"sshpk": {
"node_modules/sshpk": {
"version": "1.17.0",
"resolved": "https://registry.npmmirror.com/sshpk/-/sshpk-1.17.0.tgz",
"integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
"requires": {
"dependencies": {
"asn1": "~0.2.3",
"assert-plus": "^1.0.0",
"bcrypt-pbkdf": "^1.0.0",
@ -340,84 +470,137 @@
"jsbn": "~0.1.0",
"safer-buffer": "^2.0.2",
"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",
"resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-2.5.0.tgz",
"integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
"requires": {
"dependencies": {
"psl": "^1.1.28",
"punycode": "^2.1.1"
},
"engines": {
"node": ">=0.8"
}
},
"tunnel-agent": {
"node_modules/tunnel-agent": {
"version": "0.6.0",
"resolved": "https://registry.npmmirror.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
"integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
"requires": {
"dependencies": {
"safe-buffer": "^5.0.1"
},
"engines": {
"node": "*"
}
},
"tweetnacl": {
"node_modules/tweetnacl": {
"version": "0.14.5",
"resolved": "https://registry.npmmirror.com/tweetnacl/-/tweetnacl-0.14.5.tgz",
"integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
},
"uri-js": {
"node_modules/uri-js": {
"version": "4.4.1",
"resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
"requires": {
"dependencies": {
"punycode": "^2.1.0"
}
},
"uuid": {
"node_modules/uuid": {
"version": "3.4.0",
"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",
"resolved": "https://registry.npmmirror.com/vant/-/vant-4.6.2.tgz",
"integrity": "sha512-6EHCCAGM5a9VVzpBg/wZNPDFmJ8T1a4k29DPNcEMW3X670awW3rnD7+/x3dw+bE17JhhSg49V/+fQwBP2iQkAg==",
"requires": {
"dependencies": {
"@vant/popperjs": "^1.3.0",
"@vant/use": "^1.5.1",
"@vue/shared": "^3.0.0"
},
"peerDependencies": {
"vue": "^3.0.0"
}
},
"verror": {
"node_modules/verror": {
"version": "1.10.0",
"resolved": "https://registry.npmmirror.com/verror/-/verror-1.10.0.tgz",
"integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
"requires": {
"engines": [
"node >=0.6.0"
],
"dependencies": {
"assert-plus": "^1.0.0",
"core-util-is": "1.0.2",
"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": {
"extsprintf": {
"version": "1.4.1",
"resolved": "https://registry.npmmirror.com/extsprintf/-/extsprintf-1.4.1.tgz",
"integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA=="
"engines": {
"node": ">=12"
},
"funding": {
"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": {
"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": {
"node_modules/weixin-js-sdk": {
"version": "1.6.3",
"resolved": "https://registry.npmmirror.com/weixin-js-sdk/-/weixin-js-sdk-1.6.3.tgz",
"integrity": "sha512-5jYNtVcxWmgHNqCLSPoX6vXab9G4RPDZx0klX8IsVwGjDTwx/UDmgfF7fkRMGguRpuFv0O7tk1jb+Oay2QiV1w=="
},
"yarn": {
"node_modules/yarn": {
"version": "1.22.19",
"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"
}
}
}
}

1
yshop-drink-uniapp-vue3/package.json
View File

@ -13,6 +13,7 @@
"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",

231
yshop-drink-uniapp-vue3/pages/cart/cart.vue
View File

@ -5,40 +5,40 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view class="cart-popup">
<view class="top flex justify-between">
<view class="cart-page">
<view class="cart-page__header flex justify-between">
<text>已点{{ getCartGoodsNumber }}份</text>
<text @tap="handleCartClear">清空</text>
</view>
<scroll-view class="cart-list" scroll-y>
<view class="wrapper">
<scroll-view class="cart-page__list" scroll-y>
<view class="cart-page__list-inner">
<uv-empty mode="car" v-if="cart.length == 0"></uv-empty>
<view class="item" v-for="(item, index) in cart" :key="index">
<view class="left">
<view class="name">{{ item.name }}</view>
<view class="props">{{ item.valueStr }}</view>
<view class="cart-item" v-for="(item, index) in cart" :key="index">
<view class="cart-item__info">
<view class="cart-item__name">{{ item.name }}</view>
<view class="cart-item__props">{{ item.valueStr }}</view>
</view>
<view class="center">
<view class="cart-item__price">
<text>￥{{ item.price }}</text>
</view>
<view class="right">
<button type="default" plain size="mini" class="btn" hover-class="none"
<view class="cart-item__controls">
<button type="default" plain size="mini" class="cart-item__btn" hover-class="none"
@tap="handleCartItemReduce(index)">
<view class="iconfont iconsami-select"></view>
</button>
<view class="number">{{ item.number }}</view>
<button type="primary" class="btn" size="min" hover-class="none"
<view class="cart-item__qty">{{ item.number }}</view>
<button type="primary" class="cart-item__btn" size="min" hover-class="none"
@tap="handleCartItemAdd(index)">
<view class="iconfont iconadd-select"></view>
</button>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<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><uv-button type="warning" color="#09b4f1" :customStyle="customStyle" size="large" text="去结算" @click="toPay"></uv-button></view>
<view class="fixed-bottom flex justify-between align-center bg-white">
<view class="mx-2 font-weight-light">应付:<text class="text-danger">￥{{ getCartGoodsPrice }}</text></view>
<view><uv-button type="primary" :customStyle="customStyle" size="large" text="去结算" @click="toPay"></uv-button></view>
</view>
<uv-toast ref="uToast"></uv-toast>
</template>
@ -150,96 +150,111 @@ const toPay = () => {
</script>
<style lang="scss" scoped>
.cart-popup {
.top {
background-color: $bg-color-primary;
//color: $color-primary;
color: #5A5B5C;
padding: 10rpx 30rpx;
font-size: 24rpx;
text-align: right;
}
.cart-list {
background-color: #ffffff;
width: 100%;
overflow: hidden;
min-height: 1vh;
max-height: 60vh;
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
padding: 0 30rpx;
margin-bottom: 156rpx;
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx 0;
position: relative;
&::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;
}
}
}
}
}
// 购物车页局部 token（与 uni.scss 全局变量配合）
$cart-list-max-height: 60vh;
$cart-list-min-height: 1vh;
$cart-list-bottom-space: 156rpx;
$cart-price-offset: 120rpx;
$cart-control-size: 46rpx;
$cart-divider-height: 2rpx;
$cart-header-color: #5a5b5c;
$cart-gap-sm: 10rpx;
.cart-page {
--cart-control-size: #{$cart-control-size};
--cart-list-max-height: #{$cart-list-max-height};
&__header {
padding: $cart-gap-sm $spacing-row-lg;
font-size: $font-size-sm;
text-align: right;
color: $cart-header-color;
background-color: $bg-color-primary;
}
&__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>

200
yshop-drink-uniapp-vue3/pages/components/pages/address/add.vue
View File

@ -5,61 +5,57 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view class="container">
<view class="form-box">
<view class="form">
<list-cell :hover="false">
<view class="form-input">
<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 class="container address-form">
<list-cell :hover="false">
<view class="address-form__field">
<view class="address-form__label">收货人</view>
<input class="address-form__input" placeholder="请输入收货人" v-model="form.realName" placeholder-class="text-color-assist" />
</view>
<view class="btn-section">
<button type="primary" size="default" @tap="save">保存</button>
</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.phone" 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__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>
</template>
<script setup>
import {
import {
ref,
computed
computed
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { formatDateTime,prePage } from '@/utils/util'
import {
getAddressAddAndEdit
getAddressAddAndEdit
} from '@/api/address'
const main = useMainStore()
const { isLogin,addresses } = storeToRefs(main)
@ -116,67 +112,79 @@ const chooseLocation = async() => {
</script>
<style lang="scss" scoped>
.form-box {
width: 100%;
height: 100%;
padding: 30rpx;
$address-form-padding: $spacing-row-lg;
$address-form-label-width: 200rpx;
$address-form-radio-padding-y: 10rpx;
$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;
flex-direction: column;
color: $text-color-base;
align-items: center;
width: 100%;
}
.form-input {
display: flex;
align-items: center;
width: 100%;
}
&__label {
flex-shrink: 0;
width: var(--address-form-label-width);
font-size: $font-size-lg;
font-weight: 500;
}
.label {
width: 200rpx;
font-size: $font-size-lg;
color: $text-color-base;
font-weight: 500;
}
&__input {
flex: 1;
display: flex;
align-items: center;
}
.input {
flex: 1;
display: flex;
align-items: center;
}
&__radio-group {
display: flex;
gap: $address-form-radio-gap;
}
.radio-group {
display: flex;
justify-content: flex-start;
&__radio {
padding: $address-form-radio-padding-y $address-form-radio-padding-x;
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 {
padding: 10rpx 30rpx;
border-radius: 6rpx;
border: 2rpx solid $text-color-assist;
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;
}
&--checked {
border-color: $color-primary;
background-color: $color-primary;
color: $text-color-white;
}
}
&__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>

252
yshop-drink-uniapp-vue3/pages/components/pages/address/address.vue
View File

@ -1,76 +1,74 @@
<template>
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
<template>
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<view class="container">
<view class="main">
<view class="container address-page">
<view class="address-page__main">
<uv-empty v-if="addresses.length == 0" mode="address"></uv-empty>
<template v-else>
<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">
<view class="address" @tap="chooseAddress(address)">
<view class="left flex-fill overflow-hidden mr-20">
<view class="font-size-lg font-weight-bold text-truncate"
style="margin-bottom: 10rpx;white-space:normal;">
<view class="address-page__card" @tap="chooseAddress(address)">
<view class="flex-fill overflow-hidden mr-20">
<view class="address-page__detail font-size-lg font-weight-bold text-truncate">
{{ address.address + ' ' + address.detail }}
</view>
<view class="font-size-sm text-color-assist">
{{ address.realName }} {{ address.isDefault ? '默认' : '' }} {{ address.phone }}
</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>
</uv-swipe-action-item>
</uv-swipe-action>
</template>
</view>
<view class="btn-box">
<button type="primary" size="default" @tap="add">新增地址</button>
<view class="address-page__footer">
<button type="primary" size="default" class="rounded-pill address-page__btn" @tap="add">新增地址</button>
</view>
</view>
</template>
<script setup>
<script setup>
import {
ref,
ref,
computed
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { formatDateTime,prePage } from '@/utils/util'
import {
addressAll,
addressDelete,
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { formatDateTime,prePage } from '@/utils/util'
import {
addressAll,
addressDelete,
shopGetDistanceFromLocation
} from '@/api/address'
const main = useMainStore()
const { isLogin,addresses,store } = storeToRefs(main)
const title = ref('我的地址')
const scene = ref('menu')
const is_choose = ref(false)
const swipeOption = ref(
[{
} from '@/api/address'
const main = useMainStore()
const { isLogin,addresses,store } = storeToRefs(main)
const title = ref('我的地址')
const scene = ref('menu')
const is_choose = ref(false)
const swipeOption = ref([{
text: '删除',
style: {
backgroundColor: '#D12E32'
backgroundColor: '#D12E32' // $color-error
}
}])
onLoad((option) => {
console.log('option:',option)
is_choose.value = option.is_choose || false
scene.value = option.scene || 'menu'
})
onShow(() => {
init();
})
}])
onLoad((option) => {
console.log('option:',option)
is_choose.value = option.is_choose || false
scene.value = option.scene || 'menu'
})
onShow(() => {
init();
})
const init = async() => {
let data = await addressAll();
if (data) {
@ -90,25 +88,25 @@ const edit = (id) => {
const handleSwipeClick = async(id) => {
uni.showModal({
title: '提示',
content: '确定要删除？',
success: async function (res) {
if (res.confirm) {
let data = await addressDelete({
id: id
});
if (data) {
const index = addresses.value.findIndex(item => item.id == id)
const newaddresses = JSON.parse(JSON.stringify(addresses.value))
newaddresses.splice(index, 1)
main.SET_ADDRESSES(newaddresses)
uni.showToast({
title: '删除成功！',
icon: 'success'
})
}
} else if (res.cancel) {
console.log('用户点击取消');
}
content: '确定要删除？',
success: async function (res) {
if (res.confirm) {
let data = await addressDelete({
id: id
});
if (data) {
const index = addresses.value.findIndex(item => item.id == id)
const newaddresses = JSON.parse(JSON.stringify(addresses.value))
newaddresses.splice(index, 1)
main.SET_ADDRESSES(newaddresses)
uni.showToast({
title: '删除成功！',
icon: 'success'
})
}
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
// if (res && res.confirm) {
@ -118,8 +116,8 @@ const handleSwipeClick = async(id) => {
const chooseAddress = async(address) => {
if (!is_choose.value) {
return;
}
}
console.log('scene.value:',scene.value)
if (scene.value == 'menu' || scene.value == 'pay') {
@ -133,10 +131,10 @@ const chooseAddress = async(address) => {
return;
}
if (parseFloat(data) > store.value.distance) {
uni.showToast({
title: '不在配送范围！',
icon: 'error'
if (parseFloat(data) > store.value.distance) {
uni.showToast({
title: '不在配送范围！',
icon: 'error'
})
return;
}
@ -161,70 +159,80 @@ const chooseAddress = async(address) => {
main.SET_ADDRESS(address)
uni.navigateBack()
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 100%;
}
$address-padding: $spacing-row-lg;
$address-item-gap: $spacing-row-lg;
$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 {
width: 100%;
padding: 30rpx;
.address-page {
--address-edit-icon-size: #{$address-edit-icon-size};
--address-btn-height: #{$address-btn-height};
--address-btn-width: #{$address-btn-width};
&__main {
display: flex;
flex-direction: column;
padding-bottom: 100rpx;
.address-wrapper {
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;
}
}
width: 100%;
padding: $address-padding;
padding-bottom: $address-main-padding-bottom;
}
.btn-box {
height: 100rpx;
background-color: #FFFFFF;
box-shadow: 0 0 20rpx rgba($color: $text-color-assist, $alpha: 0.1);
&__item {
margin-bottom: $address-item-gap;
}
&__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;
right: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10rpx 0;
display: flex;
align-items: center;
justify-content: center;
button {
height: 80rpx;
width: 80%;
border-radius: 50rem !important;
display: flex;
align-items: center;
justify-content: center;
}
height: $address-footer-height;
padding: $address-footer-padding-y 0;
background-color: $text-color-white;
box-shadow: $address-footer-shadow;
}
&__btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--address-btn-width);
height: var(--address-btn-height);
}
}
</style>

196
yshop-drink-uniapp-vue3/pages/components/pages/balance/bill.vue
View File

@ -5,49 +5,44 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view>
<view class="wrap">
<view class="bill-page">
<view class="bill-page__body">
<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 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>
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item class="swiper-item" v-for="(item, index) in orderList" :key="index">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
<view class="page-box">
<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">
<scroll-view scroll-y class="bill-page__scroll" @scrolltolower="reachBottom">
<view class="bill-page__content">
<view v-if="item.length == 0">
<view class="centre" v-if="loadStatus[index] != 'loading'">
<view class="explain">
<view class="bill-empty" v-if="loadStatus[index] != 'loading'">
<view class="bill-empty__text">
您还没有相关的账单
<view class="tips">可以去看看有那些想买的</view>
<view class="bill-empty__tips">可以去看看有那些想买的</view>
</view>
<view class="btn">
<view class="bill-empty__btn">
<navigator open-type="switchTab" url="/pages/menu/menu">随便逛逛</navigator>
</view>
</view>
<view v-else>
<u-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></u-loadmore>
<u-loadmore :status="loadStatus[index]" :bgColor="balancePageBg"></u-loadmore>
</view>
</view>
<view v-else>
<view class="order" v-for="(res, resIndex) in orderList[index]" :key="resIndex">
<view class="type">
<view class="bill-item" v-for="(res, resIndex) in orderList[index]" :key="resIndex">
<view class="bill-item__meta">
<view>{{res.title}}</view>
<view>{{res.mark}}</view>
</view>
<view class="total">
<view>
{{res.pm == 0 ? '-':'＋'}}￥{{res.number}}元
</view>
<view>
{{formatDateTime(res.createTime)}}
</view>
<view class="bill-item__amount">
<view>{{res.pm == 0 ? '-':'＋'}}￥{{res.number}}元</view>
<view>{{formatDateTime(res.createTime)}}</view>
</view>
</view>
<u-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></u-loadmore>
<u-loadmore :status="loadStatus[index]" :bgColor="balancePageBg"></u-loadmore>
</view>
</view>
</scroll-view>
@ -58,16 +53,16 @@
</template>
<script setup>
import {
import {
ref,
watch
watch
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad,onShow} from '@dcloudio/uni-app'
import { formatDateTime } from '@/utils/util'
import {
balanceGetBillList
balanceGetBillList
} from '@/api/user'
const main = useMainStore()
const { isLogin } = storeToRefs(main)
@ -107,6 +102,10 @@ const pageSize = ref(20)
const tabs = ref()
const cate = ref(0)
// 与下方 SCSS token 保持一致，供模板组件颜色属性使用
const balanceTabActiveColor = '#f29100'
const balancePageBg = '#f2f2f2'
onLoad((option) => {
console.log('cate:',option.cate)
cate.value = option.cate
@ -154,76 +153,109 @@ const animationfinish = ({ detail }) => {
</script>
<style>
<style lang="scss">
$balance-page-bg: #f2f2f2;
/* #ifndef H5 */
page {
height: 100%;
background-color: #f2f2f2;
background-color: $balance-page-bg;
}
/* #endif */
</style>
<style lang="scss" scoped>
.order {
width: 710rpx;
background-color: #ffffff;
margin: 20rpx auto;
border-radius: 20rpx;
box-sizing: border-box;
padding: 20rpx;
font-size: 28rpx;
.total {
display: inline-block;
text-align: right;
.total-price {
font-size: 36rpx;
}
float: right;
// 账单页局部 token（与 uni.scss 全局变量配合；$balance-page-bg 与上方及 script 常量保持一致）
$balance-page-bg: #f2f2f2;
$balance-tab-active: #f29100;
$balance-card-width: 710rpx;
$balance-card-radius: 20rpx;
$balance-card-padding: $spacing-row-base;
$balance-card-gap: $spacing-row-base;
$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;
.bill-page {
--balance-page-bg: #{$balance-page-bg};
--balance-tab-active: #{$balance-tab-active};
&__body {
display: flex;
flex-direction: column;
width: 100%;
height: calc(100vh - var(--window-top));
}
.type {
display: inline-block;
&__swiper {
flex: 1;
}
}
.centre {
text-align: center;
margin: 200rpx auto;
font-size: 32rpx;
image {
width: 164rpx;
height: 164rpx;
border-radius: 50%;
margin-bottom: 20rpx;
&__swiper-item {
height: 100%;
}
.tips {
font-size: 24rpx;
color: #999999;
margin-top: 20rpx;
}
.btn {
margin: 80rpx auto;
width: 200rpx;
border-radius: 32rpx;
line-height: 64rpx;
color: #ffffff;
font-size: 26rpx;
background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
&__scroll {
width: 100%;
height: 100%;
}
}
.wrap {
.bill-item {
display: flex;
flex-direction: column;
height: calc(100vh - var(--window-top));
width: 100%;
align-items: flex-start;
justify-content: space-between;
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;
}
.swiper-item {
height: 100%;
.bill-empty {
margin: $balance-empty-margin-top auto;
font-size: $font-size-lg;
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>

440
yshop-drink-uniapp-vue3/pages/components/pages/coupons/coupons.vue
View File

@ -5,85 +5,89 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view class="container position-relative w-100 h-100 overflow-hidden">
<view class="exchange-box">
<view class="input-box">
<view class="container coupons-page position-relative w-100 h-100 overflow-hidden">
<view class="coupons-exchange">
<view class="coupons-exchange__input">
<uv-search placeholder="请输入兑换码" v-model="exchange_code" @click="exchange"></uv-search>
</view>
</view>
<view class="tabbar">
<view class="tab" :class="{active: activeTabIndex == index}"
v-for="(item, index) in tabs" :key="index" @tap="handleTab(index)">
<view class="title">{{ item.title }}</view>
<view class="coupons-tabbar">
<view
class="coupons-tab"
: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 class="flex-fill">
<scroll-view scroll-y class="coupon-list" @scrolltolower="getCoupons(activeTabIndex)">
<view class="wrapper" v-if="0 === activeTabIndex">
<scroll-view scroll-y class="coupons-list" @scrolltolower="getCoupons(activeTabIndex)">
<view class="coupons-list__wrapper" v-if="0 === activeTabIndex">
<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="taobao">
<view class="ticket">
<view class="left">
<view class="coupons-item" v-for="(item, index) in myCoupons" :key="index" @tap="openDetailModal(item,index)">
<view class="coupons-ticket">
<view class="coupons-ticket__body">
<view class="coupons-ticket__left">
<image
class="picture"
class="coupons-ticket__picture"
:src="item.image"
mode="aspectFill"
></image>
<view class="introduce">
<view class="top">
<view class="coupons-ticket__intro">
<view class="coupons-ticket__value">
￥
<text class="big">{{item.value}}</text>
<text class="coupons-ticket__amount">{{item.value}}</text>
<view>
满{{item.least}}减{{item.value}}
</view>
</view>
<view class="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__type">{{ item.title }}</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 class="right" @click.stop="" v-if="activeTabIndex == 1">
<view class="use immediate-use" :round="true" @tap="receive(item, index)" >立即领取</view>
<view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 1">
<view class="coupons-ticket__btn coupons-ticket__btn--use immediate-use" :round="true" @tap="receive(item, index)">立即领取</view>
</view>
<view class="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-else class="used">已使用</view>
<view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 0">
<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="coupons-ticket__btn coupons-ticket__btn--used">已使用</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>
<view class="coupon" v-for="(item, index) in notCoupons" :key="index" @tap="openDetailModal(item,index)">
<view class="taobao">
<view class="">
<view class="left">
<view class="coupons-item" v-for="(item, index) in notCoupons" :key="index" @tap="openDetailModal(item,index)">
<view class="coupons-ticket">
<view class="coupons-ticket__body">
<view class="coupons-ticket__left">
<image
class="picture"
class="coupons-ticket__picture"
:src="item.image"
mode="aspectFill"
></image>
<view class="introduce">
<view class="top">
<view class="coupons-ticket__intro">
<view class="coupons-ticket__value">
￥
<text class="big">{{item.value}}</text>
<text class="coupons-ticket__amount">{{item.value}}</text>
<view>
满{{item.least}}减{{item.value}}
</view>
</view>
<view class="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__type">{{ item.title }}</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 class="right" @click.stop="" v-if="activeTabIndex == 1">
<!-- <view class="use immediate-use" :round="true" @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="used immediate-use">已领取</view>
<view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 1">
<view class="coupons-ticket__btn coupons-ticket__btn--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>
<view class="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-else class="used">已使用</view>
<view class="coupons-ticket__right" @click.stop="" v-if="activeTabIndex == 0">
<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="coupons-ticket__btn coupons-ticket__btn--used">已使用</view>
</view>
</view>
</view>
@ -121,9 +125,9 @@
</template>
<script setup>
import {
import {
ref,
watch
watch
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
@ -132,7 +136,7 @@ import { formatDateTime,kmUnit } from '@/utils/util'
import {
couponReceive,
couponMine,
couponIndexApi
couponIndexApi
} from '@/api/coupon'
const main = useMainStore()
const { isLogin } = storeToRefs(main)
@ -269,216 +273,212 @@ const receive = async(coupon,index) => {
</script>
<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 */
page {
height: 100%;
}
/* #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;
flex-direction: column;
}
.exchange-box {
.coupons-exchange {
flex-shrink: 0;
height: 100rpx;
background-color: #ffffff;
display: flex;
display: flex;
align-items: center;
justify-content: center;
height: $coupons-exchange-height;
background-color: $text-color-white;
.input-box {
width: 70%;
&__input {
width: $coupons-exchange-input-width;
}
}
.tabbar {
.coupons-tabbar {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 80rpx;
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;
}
}
}
height: $coupons-tabbar-height;
}
.coupon-list {
height: calc(100vh - 120rpx - 200rpx);
/* #ifdef H5 */
height: calc(100vh - 120rpx - 200rpx - 44px);
/* #endif */
}
.wrapper {
padding: 0 20rpx;
.coupons-tab {
flex: 1;
display: flex;
flex-direction: column;
.coupon {
align-items: center;
justify-content: center;
height: 100%;
font-size: $font-size-base;
color: $text-color-base;
position: relative;
&__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;
flex-direction: column;
background-color: #FFFFFF;
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;
}
}
padding: 0 $coupons-list-padding-x;
}
}
.use-coupon-btn {
width: 95%;
border-radius: 50rem !important;
.coupons-item {
display: flex;
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 {
background-color: white;
.title {
&__body {
display: flex;
}
&__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;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
font-size: 30rpx;
.left {
display: flex;
align-items: center;
}
width: $coupons-ticket-right-width;
padding: $coupons-ticket-right-padding-y $coupons-ticket-padding;
background-color: $text-color-white;
border-radius: $coupons-ticket-radius;
}
.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;
}
}
&__btn {
height: auto;
margin-left: $coupons-btn-margin-left;
padding: 0 $coupons-btn-padding-x;
font-size: $font-size-sm;
line-height: $coupons-btn-line-height;
border-radius: $coupons-btn-radius;
color: $text-color-white !important;
&--use {
background-color: $uv-warning !important;
}
.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: $uv-info-dark!important;
line-height: 40rpx;
color: rgb(117, 142, 165);
margin-left: 20rpx;
}
&--used {
background-color: $uv-info-dark !important;
}
}
}

267
yshop-drink-uniapp-vue3/pages/components/pages/login/login.vue
View File

@ -6,49 +6,45 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view class="wrap">
<view class="top"></view>
<view class="content">
<view class="title">欢迎登录</view>
<view class="login-page">
<view class="login-page__form">
<view class="login-page__title">欢迎登录</view>
<input class="u-border-bottom" type="number" v-model="mobile" placeholder="请输入手机号" />
<view class="tips">未注册的手机号验证后自动创建账号</view>
<input class="login-page__input u-border-bottom" type="number" v-model="mobile" placeholder="请输入手机号" />
<view class="login-page__tips">未注册的手机号验证后自动创建账号</view>
<view style="display: flex;">
<view style="width: 50%;">
<input style="height: 100rpx;" class="u-border-bottom" type="number" v-model="captcha" placeholder="请输入验证码" />
<view class="login-page__captcha-row">
<view class="login-page__captcha-col">
<input class="login-page__input login-page__input--captcha u-border-bottom" type="number" v-model="captcha" placeholder="请输入验证码" />
</view>
<view style="width: 50%;">
<button style="height: 100rpx;" @tap="getCaptcha" :style="[captchaStyle]" class="getCaptcha">
<view class="login-page__captcha-col">
<button
class="login-page__btn login-page__btn--captcha"
:class="{ 'login-page__btn--active': isCaptchaBtnActive }"
@tap="getCaptcha"
>
{{captchaText}}
<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>
</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 class="buttom">
<view class="loginType">
<view class="login-page__footer">
<view class="login-page__oauth">
<!-- #ifdef MP-WEIXIN -->
<button type="primary" size="default" class="login-btn" open-type="getPhoneNumber" @getphonenumber="loginForWechatMini">
<!-- <image src="/static/images/mine/wechat.png"></image> -->
<button type="primary" size="default" class="login-page__wechat-btn" open-type="getPhoneNumber" @getphonenumber="loginForWechatMini">
手机号快捷登录
</button>
<!-- #endif -->
</view>
<view class="hint">
<!-- <label class="label"> -->
<view class="login-page__agreement">
<radio value="isChecked" @tap.stop="onChange" />
我已经阅读并遵守
<text class="link" @tap="serv(29,'用户协议')">《用户协议》</text>与
<text class="link" @tap="serv(30,'隐私政策')">《隐私政策》</text>
<!-- </label> -->
<text class="login-page__link" @tap="serv(29,'用户协议')">《用户协议》</text>与
<text class="login-page__link" @tap="serv(30,'隐私政策')">《隐私政策》</text>
</view>
</view>
<uv-toast ref="uToast"></uv-toast>
@ -57,10 +53,10 @@
</template>
<script setup>
import {
import {
ref,
computed
} from 'vue'
computed
} from 'vue'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import {
@ -73,7 +69,7 @@ import * as util from '@/utils/util'
import { mobile as testMobible } from '@/uni_modules/uv-ui-tools/libs/function/test'
const main = useMainStore()
const title = ref('登录')
const mobile = ref('')
const mobile = ref('')
const captcha = ref('')
const captchaText = ref('获取验证码')
const password = ref('')
@ -83,13 +79,8 @@ const openid = ref(main.openid)
const uToast = ref()
const uCode = ref()
const captchaStyle = computed(() => {
let style = {};
if(mobile.value && captchaText.value == '获取验证码') {
style.color = "#fff";
style.backgroundColor = '#f9ae3d';
}
return style;
const isCaptchaBtnActive = computed(() => {
return Boolean(mobile.value) && captchaText.value === '获取验证码';
});
onShow(() => {
@ -99,7 +90,7 @@ onShow(() => {
wechatMiniLogin();
}
// #endif
// #endif
})
@ -115,7 +106,7 @@ const wechatMiniLogin = () => {
console.log('data.openId001:',data.openId)
main.SET_OPENID(data.openId)
openid.value = data.openId
}
}
});
}
@ -255,101 +246,125 @@ const onChange = () => {
</script>
<style lang="scss" scoped>
.wrap {
background-color: #ffffff;
font-size: 28rpx;
$login-content-width: 600rpx;
$login-title-size: 60rpx;
$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;
height: 100%;
.content {
width: 600rpx;
margin: 0 auto;
.title {
text-align: left;
font-size: 60rpx;
font-weight: 500;
margin-bottom: 100rpx;
}
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 {
border: none;
}
}
.login {
background-color: rgb(253, 243, 208);
color: $uv-tips-color;
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;
&__form {
width: var(--login-content-width);
margin: 0 auto;
}
&__title {
text-align: left;
font-size: $login-title-size;
font-weight: 500;
margin-bottom: $login-title-margin-bottom;
}
&__input {
text-align: left;
margin-bottom: 10rpx;
padding-bottom: 6rpx;
&--captcha {
height: var(--login-input-height);
}
}
.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;
//display: flex;
//flex-direction: column;
//align-items: center;
//justify-content: center;
.loginType {
padding: 80rpx;
//justify-content:space-between;
.login-btn {
background-color: #1aad19!important;
width: 100%;
border-radius: 50rem !important;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx 0;
text-align: center;
image {
width: 36rpx;
height: 30rpx;
margin-right: 10rpx;
vertical-align: middle;
}
}
}
.hint {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 40rpx;
font-size: 20rpx;
color: $uv-tips-color;
.link {
color: $uv-warning;
}
}
&__oauth {
padding: $login-oauth-padding;
}
&__wechat-btn {
width: 100%;
border-radius: 50rem;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx 0;
text-align: center;
background-color: $login-wechat-btn-bg !important;
image {
width: $login-wechat-icon-width;
height: $login-wechat-icon-height;
margin-right: 10rpx;
vertical-align: middle;
}
}
&__agreement {
display: flex;
align-items: center;
justify-content: center;
padding: $login-agreement-padding-y $login-agreement-padding-x;
font-size: $login-agreement-font-size;
color: $uv-tips-color;
}
&__link {
color: $uv-warning;
}
}
</style>

18
yshop-drink-uniapp-vue3/pages/components/pages/login/logout.vue
View File

@ -6,8 +6,8 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view class="top">
<button type="primary" size="default" class="login-btn" @click="logout">
<view class="logout-page">
<button type="primary" size="default" class="logout-page__btn" @click="logout">
确定退出登录
</button>
<uv-toast ref="uToast"></uv-toast>
@ -45,12 +45,12 @@ const logout = () => {
</script>
<style lang="scss" scoped>
.top {
display: flex;
height: 100%;
}
button{
margin: auto;
.logout-page {
display: flex;
height: 100%;
&__btn {
margin: auto;
}
}
</style>

95
yshop-drink-uniapp-vue3/pages/components/pages/mine/content.vue
View File

@ -1,48 +1,53 @@
<template>
<layout>
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<view class="bg-white p-2">
<rich-text :nodes="content"></rich-text>
</view>
</layout>
</template>
<script setup>
<template>
<layout>
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<view class="mine-content">
<rich-text :nodes="content"></rich-text>
</view>
</layout>
</template>
<script setup>
import {
ref
} from 'vue'
import { onLoad,onShow} from '@dcloudio/uni-app'
import {
} from 'vue'
import { onLoad,onShow} from '@dcloudio/uni-app'
import {
mineServiceContent
} from '@/api/user'
const title = ref('内容')
const content = ref('')
onLoad((option) => {
if (option.name) {
title.value = option.name
}
if (option.id) {
getContent(option.id);
}
})
const getContent = async(id) => {
let data = await mineServiceContent({id:id});
if (data) {
content.value = data.content;
}
}
</script>
<style lang="scss" scoped>
</style>
} from '@/api/user'
const title = ref('内容')
const content = ref('')
onLoad((option) => {
if (option.name) {
title.value = option.name
}
if (option.id) {
getContent(option.id);
}
})
const getContent = async(id) => {
let data = await mineServiceContent({id:id});
if (data) {
content.value = data.content;
}
}
</script>
<style lang="scss" scoped>
$mine-content-padding: $spacing-row-base;
.mine-content {
padding: $mine-content-padding;
background-color: $text-color-white;
}
</style>

172
yshop-drink-uniapp-vue3/pages/components/pages/mine/userinfo.vue
View File

@ -5,19 +5,19 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view class="container d-flex flex-column">
<view class="flex-fill form">
<view class="userinfo-page d-flex flex-column">
<view class="flex-fill userinfo-page__form">
<list-cell :hover="false">
<view class="form-input w-100 d-flex align-items-center">
<view class="label">头像</view>
<view class="input flex-fill">
<view class="form-input w-100 d-flex align-items-center" style="position: relative;">
<view class="flex user-box align-items-center">
<view class="userinfo-page__field w-100 d-flex align-items-center">
<view class="userinfo-page__label">头像</view>
<view class="userinfo-page__input flex-fill">
<view class="userinfo-page__field userinfo-page__field--relative w-100 d-flex align-items-center">
<view class="userinfo-page__avatar-row d-flex align-items-center">
<view class="mr-1">
<uv-avatar :src="member.avatar" size="60"></uv-avatar>
</view>
<view v-if="!member.avatar" class="flex-1" style="right:0;height: 60rpx;">
<button style="background-color: #09b4f1;color:#fff;" size='mini' open-type="chooseAvatar" @chooseavatar="chooseavatar" type="success">更改头像</button>
<view v-if="!member.avatar" class="flex-1 userinfo-page__change-avatar">
<button size='mini' open-type="chooseAvatar" @chooseavatar="chooseavatar" type="success">更改头像</button>
</view>
</view>
</view>
@ -26,37 +26,45 @@
</list-cell>
<list-cell :hover="false">
<view class="form-input w-100 d-flex align-items-center">
<view class="label">昵称</view>
<view class="input flex-fill">
<view class="userinfo-page__field w-100 d-flex align-items-center">
<view class="userinfo-page__label">昵称</view>
<view class="userinfo-page__input flex-fill">
<input type="nickname" placeholder="请填写昵称" placeholder-class="text-color-assist font-size-base"
v-model="member.nickname">
</view>
</view>
</list-cell>
<list-cell :hover="false">
<view class="form-input w-100 d-flex align-items-center" style="position: relative;">
<view class="label">手机号码</view>
<view class="input flex-fill">
<view class="userinfo-page__field userinfo-page__field--relative w-100 d-flex align-items-center">
<view class="userinfo-page__label">手机号码</view>
<view class="userinfo-page__input flex-fill">
<input type="text" v-model="member.mobile" disabled>
</view>
</view>
</list-cell>
<list-cell :hover="false">
<view class="form-input w-100 d-flex align-items-center">
<view class="label">性别</view>
<view class="input flex-fill">
<view class="radio-group">
<view class="radio" :class="{'checked': member.gender == '0'}" style="margin-right: 10rpx;" @tap="member.gender=0">先生</view>
<view class="radio" :class="{'checked': member.gender == '1'}" @tap="member.gender=1">女士</view>
<view class="userinfo-page__field w-100 d-flex align-items-center">
<view class="userinfo-page__label">性别</view>
<view class="userinfo-page__input flex-fill">
<view class="userinfo-page__radio-group">
<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>
</list-cell>
<list-cell :hover="false" :arrow="!member.birthday">
<view class="form-input w-100 d-flex align-items-center">
<view class="label">生日</view>
<view class="input flex-fill">
<view class="userinfo-page__field w-100 d-flex align-items-center">
<view class="userinfo-page__label">生日</view>
<view class="userinfo-page__input flex-fill">
<picker mode="date" :value="member.birthday" :start="startDate" :end="endDate" @change="handleDateChange">
{{member.birthday ? member.birthday : '无'}}
</picker>
@ -64,16 +72,16 @@
</view>
</list-cell>
<list-cell :hover="false" last>
<view class="form-input w-100 d-flex align-items-center">
<view class="label">加入时间</view>
<view class="input flex-fill">
<view class="userinfo-page__field w-100 d-flex align-items-center">
<view class="userinfo-page__label">加入时间</view>
<view class="userinfo-page__input flex-fill">
<input type="text" v-model="member.createTime" disabled>
</view>
</view>
</list-cell>
</view>
<view class="btn-box d-flex align-items-center just-content-center">
<button type="primary" class="save-btn" @tap="save">保存</button>
<view class="userinfo-page__actions d-flex align-items-center just-content-center">
<button type="primary" class="userinfo-page__save-btn" @tap="save">保存</button>
</view>
</view>
@ -177,55 +185,87 @@ const save = async() => {
</script>
<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 {
height: 100%;
}
.container {
padding: 20rpx 30rpx;
}
.userinfo-page {
--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 {
border-radius: 8rpx;
}
padding: var(--userinfo-padding-y) var(--userinfo-padding-x);
.form-input {
.label {
width: 160rpx;
&__form {
border-radius: $userinfo-form-radius;
}
&__field {
&--relative {
position: relative;
}
}
&__label {
width: var(--userinfo-label-width);
font-size: $font-size-base;
color: $text-color-base;
}
.input {
}
.radio-group {
&__radio-group {
display: flex;
justify-content: flex-start;
.radio {
padding: 10rpx 30rpx;
border-radius: 6rpx;
border: 2rpx solid $text-color-assist;
color: $text-color-assist;
font-size: $font-size-base;
&.checked {
background-color: $color-primary;
color: $text-color-white;
border: 2rpx solid $color-primary;
}
gap: var(--userinfo-radio-gap);
}
&__radio {
padding: $userinfo-radio-padding-y $userinfo-radio-padding-x;
border-radius: $border-radius-base;
border: $userinfo-radio-border-width solid $text-color-assist;
color: $text-color-assist;
font-size: $font-size-base;
&--checked {
background-color: $color-primary;
color: $text-color-white;
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>

393
yshop-drink-uniapp-vue3/pages/components/pages/orders/detail.vue
View File

@ -5,10 +5,10 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view class="container" style="padding:20rpx;">
<view style="padding-bottom: 100rpx;">
<view class="container order-detail-page">
<view class="order-detail-page__body">
<view class="bg-white">
<view class="section">
<view class="order-detail-section">
<!-- store info begin -->
<list-cell :hover="false">
<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>
<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-location" @click="openLocation(order.shop)" style="font-size: 45rpx;"></view>
<view class="iconfont-yshop icon-mobile order-detail-page__shop-icon" @click="makePhoneCall(order.shop)"></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>
</list-cell>
@ -25,50 +25,50 @@
<list-cell :hover="false" padding="50rpx 30rpx">
<view class="w-100 d-flex flex-column">
<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>
<!-- steps begin -->
<view class="d-flex just-content-center">
<view class="steps d-flex flex-column w-80">
<view class="steps__img-column">
<view class="steps__img-column-item">
<view class="order-detail-steps d-flex flex-column w-80">
<view class="order-detail-steps__icons">
<view class="order-detail-steps__icon-item">
<view class="iconfont-yshop icon-lamp"></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 unactive" v-else></view>
<view class="iconfont-yshop icon-daojishi order-detail-steps__icon--inactive" v-else></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 unactive" v-else></view>
<view class="iconfont-yshop icon-takeout order-detail-steps__icon--inactive" v-else></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 unactive" v-else></view>
<view class="iconfont-yshop icon-doorbell order-detail-steps__icon--inactive" v-else></view>
</view>
</view>
<view class="steps__text-column">
<view class="steps__text-column-item active">
<view class="steps__column-item-line bg-transparent"></view>
<view class="steps__text-column-item-text">已下单</view>
<view class="steps__column-item-line"></view>
<view class="order-detail-steps__labels">
<view class="order-detail-steps__label order-detail-steps__label--active">
<view class="order-detail-steps__line order-detail-steps__line--transparent"></view>
<view class="order-detail-steps__text">已下单</view>
<view class="order-detail-steps__line"></view>
</view>
<view class="steps__text-column-item activ" :class="{active: order.paid == 1}">
<view class="steps__column-item-line"></view>
<view class="steps__text-column-item-text">制作中</view>
<view class="steps__column-item-line"></view>
<view class="order-detail-steps__label" :class="{'order-detail-steps__label--active': order.paid == 1}">
<view class="order-detail-steps__line"></view>
<view class="order-detail-steps__text">制作中</view>
<view class="order-detail-steps__line"></view>
</view>
<view class="steps__text-column-item" :class="{active: order.status == 1}" v-if="order.orderType == 'takeout'">
<view class="steps__column-item-line"></view>
<view class="steps__text-column-item-text">配送中</view>
<view class="steps__column-item-line bg-transparent"></view>
<view class="order-detail-steps__label" :class="{'order-detail-steps__label--active': order.status == 1}" v-if="order.orderType == 'takeout'">
<view class="order-detail-steps__line"></view>
<view class="order-detail-steps__text">配送中</view>
<view class="order-detail-steps__line order-detail-steps__line--transparent"></view>
</view>
<view class="steps__text-column-item" :class="{active: order.status >= 2}">
<view class="steps__column-item-line"></view>
<view class="steps__text-column-item-text">
<view class="order-detail-steps__label" :class="{'order-detail-steps__label--active': order.status >= 2}">
<view class="order-detail-steps__line"></view>
<view class="order-detail-steps__text">
{{ order.orderType == 'takeout' ? '已送达' : '请取餐' }}
</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>
@ -78,7 +78,7 @@
您前面还有 <text class="text-color-primary mr-10 ml-10">{{order.preNum}}</text> 单待制作
</view>
<!-- 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="d-flex flex-column w-60 overflow-hidden">
<view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.title }}</view>
@ -94,12 +94,12 @@
</view>
</list-cell>
</view>
<view class="section">
<view class="order-detail-section">
<!-- goods begin -->
<list-cell :hover="false" padding="30rpx 30rpx">
<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">
<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="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>
@ -115,23 +115,23 @@
<!-- payment and amount begin -->
<list-cell :hover="false" padding="50rpx 30rpx">
<view class="w-100 d-flex flex-column">
<view class="pay-cell">
<view class="order-detail-pay-cell">
<view>支付方式</view>
<view class="font-weight-bold">{{ order.statusDto.payType }}</view>
</view>
<view class="pay-cell">
<view class="order-detail-pay-cell">
<view>订单金额</view>
<view class="font-weight-bold">￥{{ order.totalPrice }}</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 class="font-weight-bold">￥{{ order.payPostage }}</view>
</view>
<view class="pay-cell">
<view class="order-detail-pay-cell">
<view>优惠金额</view>
<view class="font-weight-bold">￥{{ order.couponPrice }}</view>
</view>
<view class="pay-cell">
<view class="order-detail-pay-cell">
<view>实付金额</view>
<view class="font-weight-bold">￥{{ order.payPrice }}</view>
</view>
@ -139,42 +139,42 @@
</list-cell>
<!-- payment and amount end -->
</view>
<view class="section">
<view class="order-detail-section">
<!-- order info begin -->
<list-cell :hover="false" padding="50rpx 30rpx">
<view class="w-100 d-flex flex-column">
<view class="pay-cell">
<view class="order-detail-pay-cell">
<view>下单时间</view>
<view class="font-weight-bold">{{ formatDateTime(order.createTime )}}</view>
</view>
<view class="pay-cell">
<view class="order-detail-pay-cell">
<view>下单门店</view>
<view class="font-weight-bold">{{ order.shop.name }}</view>
</view>
<view class="pay-cell">
<view class="order-detail-pay-cell">
<view>订单号</view>
<view class="font-weight-bold">{{ order.id }}</view>
</view>
</view>
</list-cell>
<!-- order info end -->
<!-- order info end -->
</view>
<!-- order other info begin -->
<list-cell :hover="false" padding="50rpx 30rpx 20rpx" last>
<view class="w-100 d-flex flex-column">
<view class="pay-cell">
<view class="order-detail-pay-cell">
<view>享用方式</view>
<view class="font-weight-bold">{{order.orderType == 'takein' ? '自取' : '外卖'}}</view>
</view>
<view class="pay-cell">
<view class="order-detail-pay-cell">
<view>取餐时间</view>
<view class="font-weight-bold">{{order.getTime ? formatDateTime(order.getTime) : '立即取餐'}}</view>
</view>
<view class="pay-cell">
<view class="order-detail-pay-cell">
<view>制作完成时间</view>
<view class="font-weight-bold">{{ order.deliveryTime ? formatDateTime(order.deliveryTime) : '无' }}</view>
</view>
<view class="pay-cell">
<view class="order-detail-pay-cell">
<view>备注</view>
<view class="font-weight-bold">{{ order.remark ? order.remark : '无' }}</view>
</view>
@ -255,158 +255,179 @@ const refund = (order) => {
</script>
<style lang="scss" scoped>
.image {
width: 120rpx;
height: 120rpx;
margin-right: 30rpx;
border-radius: 8rpx;
}
$order-detail-padding: $spacing-row-base;
$order-detail-body-padding-bottom: 100rpx;
$order-detail-thumb-size: 120rpx;
$order-detail-thumb-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;
.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;
}
@mixin order-detail-section-notch {
content: '';
position: absolute;
bottom: calc(-1 * #{$order-detail-section-notch-offset});
z-index: 10;
width: $order-detail-section-notch;
height: $order-detail-section-notch;
background-color: $bg-color;
border-radius: $border-radius-circle;
}
/* #ifdef H5 */
page {
min-height: 100%;
background-color: $bg-color;
}
/* #endif */
.order-box {
padding: 20rpx;
/* #ifdef H5 */
margin-bottom: 100rpx;
/* #endif */
}
.drinks-img {
width: 260rpx;
height: 260rpx;
}
.tips {
margin: 60rpx 0 80rpx;
line-height: 48rpx;
page {
min-height: 100%;
background-color: $bg-color;
}
/* #endif */
.order-detail-page {
padding: $order-detail-padding;
--order-detail-thumb-size: #{$order-detail-thumb-size};
&__body {
padding-bottom: $order-detail-body-padding-bottom;
}
@mixin arch {
content: "";
position: absolute;
background-color: $bg-color;
width: 30rpx;
height: 30rpx;
bottom: -15rpx;
z-index: 10;
border-radius: 100%;
&__thumb {
flex-shrink: 0;
width: var(--order-detail-thumb-size);
height: var(--order-detail-thumb-size);
margin-right: $spacing-row-lg;
border-radius: $order-detail-thumb-radius;
}
.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;
&__sort-num {
font-size: $order-detail-sort-num-size;
font-weight: bold;
color: $text-color-base;
line-height: 2;
}
.steps__img-column {
display: flex;
margin: 30rpx 0;
.steps__img-column-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
image {
width: 80rpx;
height: 80rpx;
}
.unactive {
color: #919293;
}
&__shop-icon {
font-size: $order-detail-shop-icon-size;
color: $color-primary;
&--last {
margin-right: 0;
}
&:not(&--last) {
margin-right: $order-detail-shop-icon-gap;
}
}
.steps__text-column {
display: flex;
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;
&__goods-preview {
margin-bottom: $order-detail-goods-offset;
}
.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>

92
yshop-drink-uniapp-vue3/pages/components/pages/orders/orders.vue
View File

@ -5,16 +5,16 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view class="container">
<view class="container orders-page">
<view class="bg-white">
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
</view>
<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;" @tap="detail(item.orderId)">
<view class="orders-page__list d-flex flex-column w-100">
<view class="orders-item" v-for="(item, index) in orders" :key="index" @tap="detail(item.orderId)">
<list-cell :hover="false">
<view class="w-100 d-flex align-items-center">
<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 }}
</view>
<view class="font-size-sm text-color-assist">取餐号：{{ item.numberId }}</view>
@ -27,9 +27,9 @@
</list-cell>
<list-cell :hover="false" last>
<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="flex mb-2" v-for="(good,index) in item.cartInfo" :key="index">
<image :src="good.image" mode="aspectFill" class="image"></image>
<view class="w-100 text-truncate font-size-lg text-color-base orders-item__goods">
<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="orders-item__thumb"></image>
<view class="flex flex-column">
<view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view>
<view class="font-size-sm mt-1">{{ good.spec }}</view>
@ -37,20 +37,24 @@
</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">
{{formatDateTime(item.createTime) }}
</view>
<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>
</view>
<view class="d-flex align-items-center justify-content-end">
<view>
<button v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0" class="left-margin" plain size="mini" @tap.stop="receive(item)">确认收到餐</button>
<button class="left-margin" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
</view>
<view class="d-flex align-items-center justify-content-end orders-item__actions">
<button
v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0"
class="orders-item__btn"
plain
size="mini"
@tap.stop="receive(item)"
>确认收到餐</button>
<button class="orders-item__btn" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
</view>
</view>
</list-cell>
@ -62,9 +66,9 @@
<script setup>
import {
import {
ref,
computed
computed
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
@ -72,7 +76,7 @@ import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
import { formatDateTime,kmUnit } from '@/utils/util'
import {
orderGetOrders,
orderReceive
orderReceive
} from '@/api/order'
const main = useMainStore()
const { isLogin } = storeToRefs(main)
@ -161,13 +165,53 @@ const receive = async(order) => {
</script>
<style lang="scss" scoped>
.left-margin {
margin-left: 10rpx;
$orders-list-padding-x: $spacing-row-base;
$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;
margin-right: 30rpx;
border-radius: 8rpx;
}
.orders-item {
margin-bottom: $orders-item-gap;
&__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>

122
yshop-drink-uniapp-vue3/pages/components/pages/orders/refund.vue
View File

@ -1,59 +1,69 @@
<template>
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<view class="p-2">
<uv-list>
<uv-list-item title="订单金额" :rightText="'¥'+totalPrice"></uv-list-item>
<uv-list-item title="退款金额" :rightText="'¥'+payPrice"></uv-list-item>
<uv-list-item title="退款类型" rightText="整个订单"></uv-list-item>
<uv-list-item title="退款原因" rightText="协商一致"></uv-list-item>
<uv-list-item title="退款留言" >
<template #footer><uv-input placeholder="请输入内容" border="none" v-model="refundReasonWapExplain"></uv-input></template>
</uv-list-item>
</uv-list>
<view class="mt-2">
<uv-button shape="circle" type="warning" :plain="true" size="small" text="申请退款" @click="refund()"></uv-button>
</view>
<uv-toast ref="toast"></uv-toast>
</view>
</template>
<script setup>
<template>
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<view class="refund-page">
<uv-list>
<uv-list-item title="订单金额" :rightText="'¥'+totalPrice"></uv-list-item>
<uv-list-item title="退款金额" :rightText="'¥'+payPrice"></uv-list-item>
<uv-list-item title="退款类型" rightText="整个订单"></uv-list-item>
<uv-list-item title="退款原因" rightText="协商一致"></uv-list-item>
<uv-list-item title="退款留言" >
<template #footer><uv-input placeholder="请输入内容" border="none" v-model="refundReasonWapExplain"></uv-input></template>
</uv-list-item>
</uv-list>
<view class="refund-page__submit">
<uv-button shape="circle" type="warning" :plain="true" size="small" text="申请退款" @click="refund()"></uv-button>
</view>
<uv-toast ref="toast"></uv-toast>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
import { onLoad} from '@dcloudio/uni-app'
import {
} from 'vue'
import { onLoad} from '@dcloudio/uni-app'
import {
orderRefund
} from '@/api/order'
const title = ref('申请退款')
const orderId = ref('')
const payPrice = ref('')
const totalPrice = ref('')
const refundReasonWapExplain = ref('')
const toast = ref()
onLoad((option) => {
console.log('option:',option)
orderId.value = option.orderId
payPrice.value = option.payPrice
totalPrice.value = option.totalPrice
})
const refund = async() => {
let data = await orderRefund({refundReasonWapExplain:refundReasonWapExplain.value,uni:orderId.value,text:'协商一致'});
if (data) {
uni.showToast({
title: '提交成功',
icon: 'success'
})
}
}
</script>
<style>
</style>
} from '@/api/order'
const title = ref('申请退款')
const orderId = ref('')
const payPrice = ref('')
const totalPrice = ref('')
const refundReasonWapExplain = ref('')
const toast = ref()
onLoad((option) => {
console.log('option:',option)
orderId.value = option.orderId
payPrice.value = option.payPrice
totalPrice.value = option.totalPrice
})
const refund = async() => {
let data = await orderRefund({refundReasonWapExplain:refundReasonWapExplain.value,uni:orderId.value,text:'协商一致'});
if (data) {
uni.showToast({
title: '提交成功',
icon: 'success'
})
}
}
</script>
<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>

376
yshop-drink-uniapp-vue3/pages/components/pages/packages/index.vue
View File

@ -5,38 +5,62 @@
left-arrow
@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>
<scroll-view scroll-y class="coupon-list">
<view class="wrapper">
<view class="coupon" v-for="(item, index) in coupons" :key="index" @tap="openDetailModal(item, index)">
<view class="taobao">
<view class="ticket" :style="{border: item.id == coupon_id ? '1rpx solid red':''}">
<view class="left">
<image class="picture" :src="item.image" mode="aspectFill"></image>
<view class="introduce">
<view class="top">
<scroll-view scroll-y class="packages-list">
<view class="packages-list__wrapper">
<view
class="packages-item"
v-for="(item, index) in coupons"
:key="index"
@tap="openDetailModal(item, index)"
>
<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>
<view class="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__type">{{ item.title }}</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 class="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 v-else class="use immediate-use" :round="true" @tap="cancelCoupon(item)">取消使用</view>
<view class="packages-ticket__right" @click.stop="" v-if="activeTabIndex == 0">
<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>
</scroll-view>
<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-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>
@ -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">适用店铺：{{ coupon.shopName }}</view>
<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>
</modal>
@ -55,17 +79,17 @@
</template>
<script setup>
import {
import {
ref,
watch,
toRaw
toRaw
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad,onShow ,onPullDownRefresh,onHide} from '@dcloudio/uni-app'
import { formatDateTime,prePage } from '@/utils/util'
import {
couponMine
couponMine
} from '@/api/coupon'
const main = useMainStore()
const { isLogin } = storeToRefs(main)
@ -82,7 +106,7 @@ const shop_id = ref(0)
const type = ref(0)
const uToast = ref()
onLoad((options) => {
onLoad((options) => {
if (options.amount) {
amount.value = options.amount;
}
@ -176,198 +200,170 @@ const useCoupon = () => {
</script>
<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 */
page {
height: 100%;
}
/* #endif */
.container {
.packages-page {
--packages-picture-size: #{$packages-picture-size};
--packages-list-offset-nav: #{$packages-list-offset-nav};
display: flex;
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 */
// height: calc(100vh - 120rpx - 200rpx - 44px);
height: calc(100vh - var(--packages-list-offset-nav) - 44px);
/* #endif */
}
.wrapper {
padding: 0 20rpx;
display: flex;
flex-direction: column;
.coupon {
&__wrapper {
display: flex;
flex-direction: column;
background-color: #ffffff;
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;
}
}
padding: 0 $packages-list-padding-x;
}
}
.use-coupon-btn {
width: 95%;
border-radius: 50rem !important;
.packages-item {
display: flex;
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 {
background-color: white;
.title {
.packages-ticket {
background-color: $text-color-white;
&__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;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
font-size: 30rpx;
.left {
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;
}
width: $packages-ticket-right-width;
padding: $packages-ticket-right-padding-y $packages-ticket-padding;
background-color: $text-color-white;
border-radius: $packages-ticket-radius;
}
.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>

299
yshop-drink-uniapp-vue3/pages/components/pages/pay/pay.vue
View File

@ -5,11 +5,11 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view class="container position-relative">
<view style="margin-bottom: 130rpx;">
<view class="section-1">
<view class="pay-page container position-relative">
<view class="pay-page__content">
<view class="pay-page__section">
<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="store-name flex-fill">{{ orderType == 'takeout' ? '外卖配送' : '点餐自取' }}</view>
<uv-switch activeColor="#09b4f1" v-model="active" @change="takout">
@ -25,7 +25,7 @@
<view class="font-size-lg text-color-base">
{{ address.address + ' ' + address.detail }}
</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 class="d-flex text-color-assist font-size-sm align-items-center">
<view class="mr-10">{{ address.realName }}</view>
@ -34,24 +34,24 @@
</view>
<view v-else class="flex-fill d-flex justify-content-between align-items-center">
<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>
</list-cell>
</template>
</view>
<view class="section-1">
<view class="pay-page__section">
<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="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>
</list-cell>
</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"
@click="takeinTIme = !takeinTIme">
<view class="title">取餐时间</view>
@ -63,12 +63,12 @@
</view>
</view>
</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="title flex-fill">联系电话</view>
<view class="time"><input class="text-right" placeholder="请输入手机号码" :value="member.mobile" />
</view>
<button class="contact-tip font-size-sm">自动填写</button>
<button class="pay-page__contact-tip font-size-sm">自动填写</button>
</view>
</list-cell>
</template>
@ -88,17 +88,17 @@
</template>
</view>
<!-- 购物车列表 begin -->
<view class="section-2">
<view class="cart d-flex flex-column">
<view class="pay-page__section pay-page__section--cart">
<view class="pay-page__cart d-flex flex-column">
<list-cell last v-for="(item, index) in cart" :key="index">
<view class="w-100 d-flex flex-column">
<view class="d-flex align-items-center mb-10">
<view
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>
</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>
<view
@ -134,47 +134,46 @@
</list-cell>
</view>
<!-- 购物车列表 end -->
<view class="d-flex align-items-center justify-content-start font-size-sm text-color-warning"
style="padding: 20rpx 0;">
<view class="pay-page__notice d-flex align-items-center justify-content-start font-size-sm text-color-warning">
</view>
<!-- 支付方式 begin -->
<view class="payment">
<view class="pay-page__payment">
<list-cell last :hover="false"><text>支付方式</text></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')">
<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="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 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>
</list-cell>
<list-cell last>
<view class="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="pay-page__payment-row d-flex align-items-center justify-content-between w-100" @click="setPayType('weixin')">
<view class="iconfont iconwxpay line-height-100 pay-page__payment-icon pay-page__payment-icon--wechat"></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 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>
</list-cell>
<!-- #ifdef H5 -->
<list-cell>
<view class="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="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 pay-page__payment-icon pay-page__payment-icon--alipay"></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 checkbox iconradio-button-off" v-else ></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 pay-page__checkbox iconradio-button-off" v-else ></view>
</view>
</list-cell>
<!-- #endif -->
</view>
<!-- 支付方式 end -->
<!-- 备注 begin -->
<list-cell last @click="goToRemark">
<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden" style="margin-bottom: 110rpx;">
<list-cell last @click="goToRemark">
<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="text-color-primary flex-fill text-truncate text-right">{{ form.remark || '点击填写备注' }}
</view>
@ -183,21 +182,20 @@
<!-- 备注 end -->
</view>
<!-- 付款栏 begin -->
<view style="z-index: 1;"
class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
<view class="font-size-sm" style="margin-left: 20rpx;">合计：</view>
<view class="font-size-lg flex-fill">￥{{ amount }}</view>
<view class="bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base"
style="padding: 0 60rpx;" @tap="debounce(submit, 500)">付款</view>
<view class="pay-page__footer w-100 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="pay-page__footer-amount 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"
@tap="debounce(submit, 500)">付款</view>
</view>
<!-- 付款栏 end -->
<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">
<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>
</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>
<view
@ -206,11 +204,11 @@
<view>{{ address.phone }}</view>
</view>
<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>
<button type="primary" size="mini" plain class="change-address-btn" style="white-space: nowrap;"
<view class="pay-page__modal-address">{{ address.address + address.detail }}</view>
<button type="primary" size="mini" plain class="pay-page__modal-change-btn"
@click="chooseAddress">修改地址</button>
</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>
</modal>
<uv-toast ref="uToast"></uv-toast>
@ -706,125 +704,166 @@ const aliPay = async(order) => {
</script>
<style lang="scss" scoped>
.container {
padding: 30rpx;
// 支付页局部 token（与 uni.scss 全局变量配合）
$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 {
width: 50rpx;
height: 50rpx;
&__section {
margin-bottom: $pay-page-section-gap;
&--cart {
margin-bottom: 0;
}
}
&__arrow {
position: relative;
margin-right: -10rpx;
width: $pay-arrow-size;
height: $pay-arrow-size;
margin-right: $pay-arrow-offset-right;
}
.location {
&__cell--location {
.store-name {
font-size: $font-size-lg;
}
.iconfont {
font-size: 50rpx;
font-size: $pay-arrow-size;
line-height: 100%;
color: $color-primary;
}
}
.section-1 {
margin-bottom: 30rpx;
.contact {
.contact-tip {
margin-left: 10rpx;
border: 2rpx solid $color-primary;
padding: 6rpx 10rpx;
color: $color-primary;
}
}
&__contact-tip {
margin-left: $pay-contact-tip-margin-left;
padding: $pay-contact-tip-padding-y $pay-contact-tip-padding-x;
border: $pay-contact-tip-border-width solid $color-primary;
color: $color-primary;
}
.section-2 {
.name-and-props {
width: 65%;
}
&__cart-name {
width: $pay-cart-name-width;
}
.payment {
margin-bottom: 30rpx;
&__cart-thumb {
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;
}
}
.payment-icon {
font-size: 44rpx;
margin-right: 10rpx;
&__payment-icon {
margin-right: $pay-payment-gap;
font-size: $pay-payment-icon-size;
&--wechat {
color: $pay-wechat-color;
}
.checkbox {
font-size: 36rpx;
margin-left: 10rpx;
&--alipay {
color: $pay-alipay-color;
}
}
.checked {
&__checkbox {
margin-left: $pay-checkbox-gap;
font-size: $pay-checkbox-size;
&--checked {
color: $color-primary;
}
}
.pay-box {
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
height: 100rpx;
&__remark {
margin-bottom: $pay-remark-margin-bottom;
}
.modal-content {
.change-address-btn {
line-height: 2;
padding: 0 1em;
}
.pay_btn {
width: 100%;
border-radius: 50rem !important;
line-height: 3;
}
&__footer {
z-index: $pay-footer-z-index;
height: $pay-footer-height;
box-shadow: $pay-footer-shadow;
}
.choice {
background-color: $bg-color-grey;
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-label {
margin-left: $pay-footer-label-margin;
}
&__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>

197
yshop-drink-uniapp-vue3/pages/components/pages/remark/remark.vue
View File

@ -5,113 +5,184 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view class="container w-100 h-100 overflow-hidden">
<view class="textarea">
<textarea placeholder-class="text-color-assist font-size-base" v-model="remark"
class="bg-white w-100 border-box font-size-base remark"
:class="{'text-color-danger': remarkLength > 50, 'text-color-assist' : remarkLength <=50}"
placeholder="请填写备注信息" focus/>
<view class="tips" :class="{'text-color-danger': remarkLength > 50, 'text-color-assist' : remarkLength <=50}">
<view class="remark-page w-100 h-100 overflow-hidden">
<view class="remark-page__textarea">
<textarea
placeholder-class="text-color-assist font-size-base"
v-model="remark"
class="remark-page__input w-100 border-box font-size-base"
: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
</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 class="quick-inputs d-flex flex-wrap justify-content-start">
<view class="quick-input" v-for="(item, index) in quickInputs" :key="index" @tap="handleQuickInput(item)">
<view class="remark-page__quick-list">
<view
class="remark-page__quick-item"
v-for="(item, index) in quickInputs"
:key="index"
@tap="handleQuickInput(item)"
>
{{ item }}
</view>
</view>
<view class="d-flex just-content-center align-items-center" style="margin-top: 60rpx;">
<button type="primary" class="submit-btn font-size-base" @tap="submit">完成</button>
<view class="remark-page__actions">
<button type="primary" class="remark-page__submit-btn font-size-base" @tap="submit">完成</button>
</view>
<!--轻提示-->
<uv-toast ref="uToast"></uv-toast>
</view>
</template>
<script setup>
import {
import {
ref,
computed
computed
} from 'vue'
import { onLoad} from '@dcloudio/uni-app'
const title = ref('备注')
const remark = ref('')
const quickInputs = ref( ['请放门把手上', '请放门口', '请放前台桌上', '如地址封闭管理，请电话与我联系'])
const quickInputs = ref(['请放门把手上', '请放门口', '请放前台桌上', '如地址封闭管理，请电话与我联系'])
const uToast = ref()
onLoad((opt) => {
remark.value = opt.remark
})
})
const remarkLength = computed(() => {
const remarkLength = computed(() => {
return remark.value.length
})
const isDanger = computed(() => {
const isDanger = computed(() => {
return remark.value.length > 50
})
const handleQuickInput = (item) => {
remark.value = remark.value.concat(" ", item)
remark.value = remark.value.concat(' ', item)
}
const submit = () => {
if (remark.value.length > 50) {
uToast.value.show({
message: '不能超过50个字符',
type: 'error'
});
})
return
}
uni.navigateTo({
url: "/pages/components/pages/pay/pay?remark=" + remark.value
url: '/pages/components/pages/pay/pay?remark=' + remark.value
})
}
</script>
<style lang="scss" scoped>
.container {
padding: 30rpx 40rpx;
.textarea {
position: relative;
.remark {
border-radius: 8rpx;
padding: 30rpx 40rpx;
height: 320rpx;
color: $font-size-base;
}
.tips {
position: absolute;
bottom: 30rpx;
right: 40rpx;
}
$remark-page-padding-y: 30rpx;
$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;
.remark-page {
--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};
padding: var(--remark-page-padding-y) var(--remark-page-padding-x);
&__textarea {
position: relative;
}
&__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 {
padding-right: 20rpx;
.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;
&--assist {
color: $text-color-assist;
}
}
&__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>

222
yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/confirm.vue
View File

@ -1,97 +1,99 @@
<template>
<!-- #ifdef MP-WEIXIN -->
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<!-- #endif -->
<view class="px-2 mt-2">
<view class="bg-white p-2" >
<uv-form :model="form" ref="uForm" >
<uv-form-item>
<view v-if="address.realName">
<view>{{ address.address }} {{ address.detail }}</view>
<text>{{ address.realName }} {{ address.phone }}</text>
</view>
<view v-else>请选择收货地址</view>
<template #right>
<uv-icon name="arrow-right" @click="chooseAddress"></uv-icon>
</template>
</uv-form-item>
</uv-form>
</view>
<view class="bg-white p-2 mt-2">
<view class="mb-5">积分商城</view>
<view class="flex justify-between">
<view class="flex">
<image :src="product.image" mode="aspectFill" class="image"></image>
<text class="font-size-medium">{{ product.title }}</text>
</view>
<view class="flex flex-column">
<text class="font-size-medium">{{ product.score }}积分</text>
<text class="font-size-medium text-color-assist mt-2 text-right">×1</text>
</view>
</view>
<view class="flex justify-between mt-5">
<text class="font-size-medium">积分抵扣</text>
<text class="font-size-medium">{{ product.score }}</text>
</view>
<view class="text-right font-size-lg mt-5 text-color-assist">合计:<text class="font-size-medium text-color-base ">¥{{ product.score }}</text></view>
</view>
</view>
<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><uv-button type="warning" color="#ffcc00" :customStyle="customStyle" size="large" text="立即兑换" @click="submit"></uv-button></view>
</view>
<uv-toast ref="uToast" />
</template>
<script setup>
<template>
<!-- #ifdef MP-WEIXIN -->
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<!-- #endif -->
<view class="px-2 mt-2 score-product-confirm">
<view class="bg-white p-2" >
<uv-form :model="form" ref="uForm" >
<uv-form-item>
<view v-if="address.realName">
<view>{{ address.address }} {{ address.detail }}</view>
<text>{{ address.realName }} {{ address.phone }}</text>
</view>
<view v-else>请选择收货地址</view>
<template #right>
<uv-icon name="arrow-right" @click="chooseAddress"></uv-icon>
</template>
</uv-form-item>
</uv-form>
</view>
<view class="bg-white p-2 mt-2">
<view class="mb-5">积分商城</view>
<view class="flex justify-between">
<view class="flex">
<image :src="product.image" mode="aspectFill" class="score-product-confirm__thumb"></image>
<text class="font-size-medium">{{ product.title }}</text>
</view>
<view class="flex flex-column">
<text class="font-size-medium">{{ product.score }}积分</text>
<text class="font-size-medium text-color-assist mt-2 text-right">×1</text>
</view>
</view>
<view class="flex justify-between mt-5">
<text class="font-size-medium">积分抵扣</text>
<text class="font-size-medium">{{ product.score }}</text>
</view>
<view class="text-right font-size-lg mt-5 text-color-assist">合计:<text class="font-size-medium text-color-base ">¥{{ product.score }}</text></view>
</view>
</view>
<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><uv-button type="warning" :color="scoreProductAccent" :customStyle="customStyle" size="large" text="立即兑换" @click="submit"></uv-button></view>
</view>
<uv-toast ref="uToast" />
</template>
<script setup>
import {
ref,
computed,
ref,
computed,
getCurrentInstance
} from 'vue'
import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
import {
scoreShopExchange,
} from 'vue'
import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
import {
scoreShopExchange,
scoreShopDetail
} from '@/api/score'
import cookie from '@/utils/cookie'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
const { proxy } = getCurrentInstance();
const main = useMainStore()
const { address,isLogin} = storeToRefs(main)
const title = ref("确认订单")
const product = ref({})
const customStyle = computed(() =>{
return {
paddingLeft:'60rpx',
paddingRight:'60rpx'
}
})
onLoad(() => {
console.log('address:',address.value)
if(!isLogin.value) {
uni.navigateTo({url: '/pages/components/pages/login/login'})
}
product.value = cookie.get('score_product')
})
} from '@/api/score'
import cookie from '@/utils/cookie'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
const { proxy } = getCurrentInstance();
const main = useMainStore()
const { address,isLogin} = storeToRefs(main)
const title = ref("确认订单")
const product = ref({})
const scoreProductAccent = '#ffcc00'
const customStyle = computed(() => {
return {
paddingLeft: '60rpx',
paddingRight: '60rpx'
}
})
onLoad(() => {
console.log('address:',address.value)
if(!isLogin.value) {
uni.navigateTo({url: '/pages/components/pages/login/login'})
}
product.value = cookie.get('score_product')
})
// 选择地址
const chooseAddress = () => {
uni.navigateTo({
url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
const chooseAddress = () => {
uni.navigateTo({
url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
})
}
}
// 提交
const submit = async() => {
if (!address.value.id) {
@ -105,25 +107,35 @@ const submit = async() => {
productId: product.value.id,
addressId: address.value.id,
num: 1
})
})
if (data) {
if (data) {
cookie.remove('score_product')
setTimeout(function() {
uni.navigateTo({
url: '/pages/components/pages/scoreproduct/order'
setTimeout(function() {
uni.navigateTo({
url: '/pages/components/pages/scoreproduct/order'
})
}, 1000)
}
}
</script>
<style lang="scss" scoped>
.image {
width: 160rpx;
height: 160rpx;
margin-right: 30rpx;
border-radius: 8rpx;
}
}
</script>
<style lang="scss" scoped>
$score-product-accent: #ffcc00;
$score-product-confirm-thumb-size: 160rpx;
$score-product-confirm-thumb-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>

255
yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/detail.vue
View File

@ -1,64 +1,64 @@
<template>
<!-- #ifdef MP-WEIXIN -->
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<template>
<!-- #ifdef MP-WEIXIN -->
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<!-- #endif -->
<view class="container">
<view class="carousel">
<view class="container score-product-detail">
<view class="score-product-detail__carousel">
<swiper indicator-dots circular=true duration="400">
<swiper-item class="swiper-item" v-for="(item,index) in product.images" :key="index">
<view class="image-wrapper">
<swiper-item class="score-product-detail__swiper-item" v-for="(item,index) in product.images" :key="index">
<view class="score-product-detail__image-wrapper">
<image :src="item" class="loaded" @click="previewImage(index)" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
</view>
<view class="introduce-section" v-if="product.id">
<text class="title">{{product.title}}</text>
<view class="price-box bot-row">
<view class="score-product-detail__intro" v-if="product.id">
<text class="score-product-detail__title">{{product.title}}</text>
<view class="score-product-detail__meta">
<text>积分： {{product.score}}</text>
<text>销量: {{product.sales}}</text>
<text>库存: {{product.stock}}</text>
</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>
</view>
<!-- 底部操作菜单 -->
<view class="fixed-bottom px-2">
<button class="btn" @click="confirm">立即兑换</button>
<button class="score-product-detail__btn" @click="confirm">立即兑换</button>
</view>
<uv-toast ref="uToast" />
</view>
</template>
<script setup>
<script setup>
import {
ref,
computed,
ref,
computed,
getCurrentInstance
} from 'vue'
import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
import {
scoreShopExchange,
} from 'vue'
import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
import {
scoreShopExchange,
scoreShopDetail
} from '@/api/score'
import cookie from '@/utils/cookie'
const { proxy } = getCurrentInstance();
const buttonText = ref("立即兑换")
const specClass = ref('none')
const product = ref({})
const id = ref(false)
const form = ref(
} from '@/api/score'
import cookie from '@/utils/cookie'
const { proxy } = getCurrentInstance();
const buttonText = ref("立即兑换")
const specClass = ref('none')
const product = ref({})
const id = ref(false)
const form = ref(
{
address: {
id: 0,
@ -68,32 +68,32 @@ const form = ref(
mobile: "",
},
num: 1 // 兑换数量
}
)
const lock = ref(false)
onPullDownRefresh(() => {
getDetail(id.value);
})
}
)
const lock = ref(false)
onPullDownRefresh(() => {
getDetail(id.value);
})
onLoad((options) => {
id.value = options.id;
id.value = options.id;
getDetail(options.id);
})
})
// 选择地址
const chooseAddress = () => {
uni.navigateTo({
url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
const chooseAddress = () => {
uni.navigateTo({
url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
})
}
const confirm = () => {
cookie.set('score_product',product.value)
uni.navigateTo({
url: '/pages/components/pages/scoreproduct/confirm'
})
}
const confirm = () => {
cookie.set('score_product',product.value)
uni.navigateTo({
url: '/pages/components/pages/scoreproduct/confirm'
})
}
// 该表购买数量
const valChange = (e) => {
@ -127,101 +127,94 @@ const previewImage = (index) => {
indicator: "number",
loop: true
})
}
}
</script>
<style lang='scss'>
.icon-you {
color: #888;
}
<style lang="scss">
$score-product-accent: #ffcc00;
$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 {
height: 722upx;
.score-product-detail {
--score-product-accent: #{$score-product-accent};
&__carousel {
position: relative;
height: $score-product-detail-carousel-height;
swiper {
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%;
height: 100%;
}
.swiper-item {
display: flex;
justify-content: center;
align-content: center;
height: 750upx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
/* 标题简介 */
.introduce-section {
background: #fff;
padding: 20upx 30upx;
.title {
font-size: 32upx;
color: #555555;
height: 50upx;
line-height: 50upx;
}
.price-box {
display: flex;
align-items: baseline;
height: 64upx;
padding: 10upx 0;
font-size: 30rpx;
color: #5A5B5C;
}
.price {
font-size: 35rpx;
}
.bot-row {
display: flex;
align-items: center;
text {
flex: 1;
}
}
}
.btn {
height: 100rpx;
line-height: 100rpx;
border-radius: 100rpx;
background: #ffcc00;
font-size: 40rpx;
color: #fff;
margin: 30upx auto 20upx;
&__intro {
background-color: $text-color-white;
padding: $score-product-detail-intro-padding-y $score-product-detail-intro-padding-x;
}
/* 详情 */
.detail-desc {
background: #fff;
margin-top: 16upx;
margin-bottom: 200rpx;
padding: 20rpx;
&__title {
height: $score-product-detail-title-height;
line-height: $score-product-detail-title-height;
font-size: $font-size-lg;
color: $color-subtitle;
}
&__meta {
display: flex;
align-items: center;
height: $score-product-detail-meta-height;
padding: 10rpx 0;
font-size: $font-size-paragraph;
color: $text-color-black;
</style>
text {
flex: 1;
}
}
&__btn {
height: $score-product-detail-btn-height;
line-height: $score-product-detail-btn-height;
margin: 30rpx auto 20rpx;
border-radius: $score-product-detail-btn-height;
background-color: var(--score-product-accent);
font-size: $score-product-detail-btn-font-size;
color: $text-color-white;
}
&__desc {
margin-top: $spacing-col-base;
margin-bottom: $score-product-detail-desc-margin-bottom;
padding: $spacing-row-base;
background-color: $text-color-white;
}
}
</style>

290
yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/list.vue
View File

@ -1,35 +1,35 @@
<template>
<!-- #ifdef MP-WEIXIN -->
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<template>
<!-- #ifdef MP-WEIXIN -->
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<!-- #endif -->
<view>
<!--商品区-->
<uv-waterfall v-model="list" :add-time="0" ref="uWaterfall" @changeList="changeList" :left-gap="10"
:right-gap="10"
<uv-waterfall v-model="list" :add-time="0" ref="uWaterfall" @changeList="changeList" :left-gap="10"
:right-gap="10"
:column-gap="1">
<template v-slot:list1>
<view class="demo-warter" v-for="(item, index) in list1" :key="index" @click="goDetail(item)">
<image :src="item.image" mode="widthFix" style="width: 300rpx;"></image>
<view class="demo-title">
<view class="score-product-list__card" v-for="(item, index) in list1" :key="index" @click="goDetail(item)">
<image :src="item.image" mode="widthFix" class="score-product-list__image"></image>
<view class="score-product-list__title">
{{item.title}}
</view>
<view class="demo-price">
<view class="score-product-list__score">
消耗积分:{{item.score}}
</view>
</view>
</template>
<template v-slot:list2>
<view class="demo-warter" v-for="(item, index) in list2" :key="index" @click="goDetail(item)">
<image :src="item.image" mode="widthFix" style="width: 300rpx;"></image>
<view class="demo-title">
<view class="score-product-list__card" v-for="(item, index) in list2" :key="index" @click="goDetail(item)">
<image :src="item.image" mode="widthFix" class="score-product-list__image"></image>
<view class="score-product-list__title">
{{item.title}}
</view>
<view class="demo-price">
<view class="score-product-list__score">
消耗积分:{{item.score}}
</view>
</view>
@ -40,176 +40,134 @@
</view>
</template>
<script setup>
<script setup>
import {
ref,
computed,
ref,
computed,
getCurrentInstance
} from 'vue'
import { onReachBottom,onShow,onPullDownRefresh} from '@dcloudio/uni-app'
import {
} from 'vue'
import { onReachBottom,onShow,onPullDownRefresh} from '@dcloudio/uni-app'
import {
scoreShopIndex
} from '@/api/score'
const { proxy } = getCurrentInstance();
const title = ref('积分商品')
const list = ref([])
const page = ref(1)
const pagesize = ref(10)
const status = ref('loadmore')
const list1 = ref([])
const list2 = ref([])
const uWaterfall = ref()
let currentInstance = getCurrentInstance()
onShow(() => {
getProduct()
})
onReachBottom(async() => {
if (status.value == 'loading') {
return;
}
page.value++
status.value = 'loading';
let data = await scoreShopIndex({
page: page.value,
pagesize: pagesize.value
});
if (data) {
list.value = list.value.concat(data);
if (data.length == 0) {
page.value--;
status.value = 'nomore';
} else if (data.length < pagesize.value) {
status.value = 'nomore';
} else {
status.value = 'loadmore';
}
} else {
status.value = 'loadmore';
}
})
onPullDownRefresh(() => {
} from '@/api/score'
const { proxy } = getCurrentInstance();
const title = ref('积分商品')
const list = ref([])
const page = ref(1)
const pagesize = ref(10)
const status = ref('loadmore')
const list1 = ref([])
const list2 = ref([])
const uWaterfall = ref()
let currentInstance = getCurrentInstance()
onShow(() => {
getProduct()
})
onReachBottom(async() => {
if (status.value == 'loading') {
return;
}
page.value++
status.value = 'loading';
let data = await scoreShopIndex({
page: page.value,
pagesize: pagesize.value
});
if (data) {
list.value = list.value.concat(data);
if (data.length == 0) {
page.value--;
status.value = 'nomore';
} else if (data.length < pagesize.value) {
status.value = 'nomore';
} else {
status.value = 'loadmore';
}
} else {
status.value = 'loadmore';
}
})
onPullDownRefresh(() => {
page.value = 1;
getProduct()
})
const changeList = (e) => {
console.log('e:',e)
if(e.name == 'list1'){
list1.value.push(e.value)
}else{
list2.value.push(e.value)
}
}
const goDetail = (item) => {
uni.navigateTo({
url: '/pages/components/pages/scoreproduct/detail?id=' + item.id
getProduct()
})
const changeList = (e) => {
console.log('e:',e)
if(e.name == 'list1'){
list1.value.push(e.value)
}else{
list2.value.push(e.value)
}
}
const goDetail = (item) => {
uni.navigateTo({
url: '/pages/components/pages/scoreproduct/detail?id=' + item.id
})
}
const getProduct = async() => {
const getProduct = async() => {
status.value = 'loading';
//proxy.$refs.uWaterfall.clear();
//proxy.$refs.uWaterfall.clear();
let data = await scoreShopIndex({
page: page.value,
page: page.value,
pagesize: pagesize.value
});
});
console.log('data:',data)
uni.stopPullDownRefresh();
if (data) {
list.value = data;
console.log('data2:',list.value)
if (data.length < pagesize.value) {
status.value = 'nomore';
list.value = data;
console.log('data2:',list.value)
if (data.length < pagesize.value) {
status.value = 'nomore';
}
} else {
status.value = 'nomore';
} else {
status.value = 'nomore';
}
}
}
</script>
<style lang="scss">
.search {
margin: 10rpx !important;
}
$score-product-accent: #ffcc00;
$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 {
border-radius: 8px;
margin: 5px;
background-color: #ffcc00;
padding: 8px;
position: relative;
}
.score-product-list__card {
--score-product-accent: #{$score-product-accent};
--score-product-list-image-width: #{$score-product-list-image-width};
.demo-title {
font-size: 30rpx;
margin-top: 5px;
color: #ffffff;
}
position: relative;
margin: $score-product-list-card-gap;
padding: $score-product-list-card-padding;
border-radius: $score-product-list-card-radius;
background-color: var(--score-product-accent);
}
.demo-tag {
display: flex;
margin-top: 5px;
}
.score-product-list__image {
width: var(--score-product-list-image-width);
}
.demo-tag-owner {
background-color: $uv-error;
color: #FFFFFF;
display: flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 20rpx;
line-height: 1;
}
.score-product-list__title {
margin-top: $score-product-list-title-gap;
font-size: $font-size-paragraph;
color: $text-color-white;
}
.demo-tag-text {
border: 1px solid $uv-primary;
color: $uv-primary;
margin-left: 10px;
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>
.score-product-list__score {
margin-top: $score-product-list-title-gap;
font-size: $font-size-paragraph;
color: $bg-color;
}
</style>

234
yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/order.vue
View File

@ -1,18 +1,18 @@
<template>
<!-- #ifdef MP-WEIXIN -->
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<template>
<!-- #ifdef MP-WEIXIN -->
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<!-- #endif -->
<view class="container">
<view class="bg-white">
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
<view class="container score-product-orders">
<view class="bg-white">
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
</view>
<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;">
<view class="score-product-orders__list d-flex flex-column w-100">
<view class="score-product-orders-item" v-for="(item, index) in orders" :key="index">
<list-cell :hover="false">
<view class="w-100 d-flex align-items-center">
<view class="flex-fill d-flex flex-column">
@ -24,101 +24,101 @@
</view>
</list-cell>
<list-cell :hover="false" last>
<view class="w-100 d-flex flex-column">
<view class="flex ">
<image :src="item.product.image" mode="aspectFill" class="image"></image>
<view class="w-100 d-flex flex-column">
<view class="flex ">
<image :src="item.product.image" mode="aspectFill" class="score-product-orders-item__thumb"></image>
<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 }}
</view>
<view class="font-size-sm mt-2">×{{ item.product.number }} {{ item.product.score }}积分</view>
</view>
</view>
<view class="font-size-sm mt-2">×{{ item.product.number }} {{ item.product.score }}积分</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">
{{formatDateTime(item.createTime) }}
</view>
<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>
</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>
<button v-if="item.havePaid > 0 && item.haveDelivered == 1 && item.haveReceived == 0"
class="left-margin" type="primary" plain size="mini"
@tap.stop="receive(item)">确认收到货</button>
<button class="left-margin" plain size="mini" @tap="detail(item.id)">订单详情</button>
class="score-product-orders-item__btn" type="primary" plain size="mini"
@tap.stop="receive(item)">确认收到货</button>
<button class="score-product-orders-item__btn" plain size="mini" @tap="detail(item.id)">订单详情</button>
</view>
</view>
</view>
</list-cell>
</view>
</view>
</view>
<uv-empty v-if="orders.length == 0" mode="order"></uv-empty>
</view>
<uv-toast ref="uToast" />
<uv-toast ref="uToast" />
</template>
<script setup>
<script setup>
import {
ref,
computed,
ref,
computed,
getCurrentInstance
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
import { formatDateTime,kmUnit } from '@/utils/util'
import {
scoreShopOrder,
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
import { formatDateTime,kmUnit } from '@/utils/util'
import {
scoreShopOrder,
scoreShopReceive
} from '@/api/score'
const main = useMainStore()
const { proxy } = getCurrentInstance();
const { isLogin } = storeToRefs(main)
const title = ref('我的积分订单')
const type = ref(-1)
const page = ref(1)
const pageSize = ref(10)
const orders = ref([])
const tabList = ref([{
type: -1,
name: '全部',
}, {
type: 0,
name: '待发货',
}, {
type: 1,
name: '待收货'
}, {
type: 2,
name: '已完成'
}]
} from '@/api/score'
const main = useMainStore()
const { proxy } = getCurrentInstance();
const { isLogin } = storeToRefs(main)
const title = ref('我的积分订单')
const type = ref(-1)
const page = ref(1)
const pageSize = ref(10)
const orders = ref([])
const tabList = ref([{
type: -1,
name: '全部',
}, {
type: 0,
name: '待发货',
}, {
type: 1,
name: '待收货'
}, {
type: 2,
name: '已完成'
}]
)
onLoad(() => {
if (!isLogin.value) {
uni.navigateTo({
url: '/pages/components/pages/login/login'
})
}
getOrders(false)
})
onReachBottom(() => {
getOrders(false)
})
onPullDownRefresh(() => {
getOrders(false)
})
// tab栏切换
const change = (e) => {
type.value = e.type
getOrders(true)
}
onLoad(() => {
if (!isLogin.value) {
uni.navigateTo({
url: '/pages/components/pages/login/login'
})
}
getOrders(false)
})
onReachBottom(() => {
getOrders(false)
})
onPullDownRefresh(() => {
getOrders(false)
})
// tab栏切换
const change = (e) => {
type.value = e.type
getOrders(true)
}
const getOrders = async(isRefresh = false) => {
uni.showLoading({
title: '加载中'
@ -129,7 +129,7 @@ const getOrders = async(isRefresh = false) => {
}
let data = await scoreShopOrder({
page: page.value,
pagesize: pageSize.value,
pagesize: pageSize.value,
type: type.value
});
if (data.length > 0) {
@ -150,27 +150,67 @@ const receive = async(order) => {
id: order.id
});
if (data) {
proxy.$refs.uToast.show({
message: '已签收',
type: 'success',
proxy.$refs.uToast.show({
message: '已签收',
type: 'success',
})
setTimeout(function() {
getOrders(true)
}, 1000);
}
}
}
</script>
<style lang="scss" scoped>
.left-margin {
margin-left: 10rpx;
}
.image {
width: 160rpx;
height: 160rpx;
margin-right: 30rpx;
border-radius: 8rpx;
$score-product-orders-list-padding-x: $spacing-row-base;
$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;
}
</style>
}
.score-product-orders-item {
margin-bottom: $score-product-orders-item-gap;
&__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>

191
yshop-drink-uniapp-vue3/pages/components/pages/scoreproduct/orderDetail.vue
View File

@ -7,16 +7,16 @@
@leftClick="$onClickLeft"
/>
<!-- #endif -->
<view class="container" style="padding:20rpx;">
<view style="padding-bottom: 100rpx;">
<view class="container score-product-order-detail">
<view class="score-product-order-detail__body">
<view class="bg-white">
<view class="section">
<view class="score-product-order-detail__section">
<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="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 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>
@ -29,29 +29,29 @@
</view>
</list-cell>
</view>
<view class="section">
<view class="score-product-order-detail__section">
<list-cell :hover="false" padding="50rpx 30rpx">
<view class="w-100 d-flex flex-column">
<view class="pay-cell">
<view class="score-product-order-detail__cell">
<view>消耗积分</view>
<view class="font-weight-bold">{{ order.totalScore }}</view>
</view>
</view>
</list-cell>
</view>
<view class="section">
<view class="score-product-order-detail__section">
<list-cell :hover="false" padding="50rpx 30rpx">
<view class="w-100 d-flex flex-column">
<view class="pay-cell">
<view class="score-product-order-detail__cell">
<view>订单状态</view>
<view class="font-weight-bold">{{ order.statusText }}</view>
</view>
<view class="pay-cell">
<view class="score-product-order-detail__cell">
<view>下单时间</view>
<view class="font-weight-bold">{{ formatDateTime(order.createTime) }}</view>
</view>
<view class="pay-cell">
<view class="score-product-order-detail__cell">
<view>订单号</view>
<view class="font-weight-bold">{{ order.orderId }}</view>
</view>
@ -60,7 +60,7 @@
<list-cell :hover="false">
<view class="w-100 d-flex align-items-center">
<view class="pay-cell">
<view class="score-product-order-detail__cell">
<view>收货地址</view>
</view>
<view class="d-flex flex-column">
@ -73,13 +73,13 @@
<list-cell :hover="false" padding="50rpx 30rpx" v-if="order.expressCompany">
<view class="w-100 d-flex flex-column">
<view class="pay-cell">
<view class="score-product-order-detail__cell">
<view>快递公司</view>
<view class="font-weight-bold">{{order.expressCompany }}</view>
</view>
<view class="pay-cell">
<view class="score-product-order-detail__cell">
<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> -->
</view>
</view>
@ -102,10 +102,10 @@
</template>
<script setup>
import {
import {
ref,
computed,
getCurrentInstance
getCurrentInstance
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
@ -114,7 +114,7 @@ import { formatDateTime,kmUnit } from '@/utils/util'
import {
scoreShopOrderDetail,
scoreShopReceive,
getLogistic
getLogistic
} from '@/api/score'
const main = useMainStore()
const { proxy } = getCurrentInstance();
@ -169,20 +169,20 @@ const copy = () => {
})
}
// 确认收到货
const receive = async(order) => {
let data = await scoreShopReceive({
id: order.id
});
if (data) {
// 确认收到货
const receive = async(order) => {
let data = await scoreShopReceive({
id: order.id
});
if (data) {
proxy.$refs.uToast.show({
message: '已签收',
type: 'success',
})
setTimeout(function() {
detail(order.id)
}, 1000);
}
})
setTimeout(function() {
detail(order.id)
}, 1000);
}
}
@ -190,98 +190,83 @@ const receive = async(order) => {
</script>
<style lang="scss" scoped>
.copy {
color: #1296db;
margin-left: 10rpx;
}
@mixin arch {
content: "";
$score-product-order-detail-padding: $spacing-row-base;
$score-product-order-detail-body-padding-bottom: 100rpx;
$score-product-order-detail-thumb-size: 140rpx;
$score-product-order-detail-cell-gap: 40rpx;
$score-product-order-detail-section-notch: 30rpx;
$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;
background-color: $bg-color;
width: 30rpx;
height: 30rpx;
bottom: -15rpx;
bottom: calc(-1 * #{$score-product-order-detail-section-notch-offset});
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;
&::before {
@include arch;
left: -15rpx;
@include score-product-order-detail-section-notch;
left: calc(-1 * #{$score-product-order-detail-section-notch-offset});
}
&::after {
@include arch;
right: -15rpx;
@include score-product-order-detail-section-notch;
right: calc(-1 * #{$score-product-order-detail-section-notch-offset});
}
}
.pay-cell {
width: 100%;
.score-product-order-detail__cell {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: $score-product-order-detail-cell-gap;
font-size: $font-size-base;
color: $text-color-base;
margin-bottom: 40rpx;
&:nth-last-child(1) {
&:last-child {
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>

67
yshop-drink-uniapp-vue3/pages/components/pages/shop/shop.vue
View File

@ -5,21 +5,21 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view>
<view>
<uv-search margin="30rpx" v-model="keywork" @custom="search(keywork)"></uv-search>
<view class="shop-page">
<view class="shop-page__search">
<uv-search v-model="keywork" @custom="search(keywork)"></uv-search>
</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">
<view class="body">
<view class="body-left">
<view class="shop-page__body">
<view class="shop-page__info">
<view>距离您 {{kmUnit(item.dis)}}</view>
<view v-if="item.distance > 0">配送距离：{{item.distance + 'km '}} & 配送费：{{item.delivery_price}}</view>
<view v-else>外卖不配送</view>
<view>{{item.addressMap + ' ' + item.address}}</view>
<view>营业时间 {{formatDateTime(item.startTime,'hh:mm')}} - {{formatDateTime(item.endTime,'hh:mm')}}</view>
</view>
<view class="body-right">
<view class="shop-page__actions">
<uv-button @click="openLocation(item)">导航</uv-button>
<uv-button @click="call(item.mobile)">致电</uv-button>
</view>
@ -30,8 +30,8 @@
</template>
<script setup>
import {
ref
import {
ref
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
@ -39,10 +39,10 @@ import { onLoad,onShow ,onPullDownRefresh,onHide} from '@dcloudio/uni-app'
import { formatDateTime,kmUnit,prePage } from '@/utils/util'
import {
shopNearby,
menuGoods
menuGoods
} from '@/api/goods'
import {
shopGetList
shopGetList
} from '@/api/market'
const main = useMainStore()
const { store,location } = storeToRefs(main)
@ -116,18 +116,37 @@ const choice = (shop) => {
</script>
<style lang="scss">
.body {
.body-left {
display: inline-block;
width: 77%;
padding-left: 6rpx;
}
.body-right {
display: inline-block;
width: 20%;
}
}
$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;
.shop-page {
--shop-page-search-margin: #{$shop-page-search-margin};
--shop-page-info-padding-left: #{$shop-page-info-padding-left};
--shop-page-actions-width: #{$shop-page-actions-width};
--shop-page-actions-gap: #{$shop-page-actions-gap};
&__search {
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>

482
yshop-drink-uniapp-vue3/pages/index/index.vue
View File

@ -19,62 +19,58 @@
<blank size="5"></blank>
</uv-sticky>
<blank size="10"></blank>
<view class="container">
<view class="banner">
<uv-swiper class="bg" height="300" imgMode="aspectFill" keyName="image" :list="listAds" indicatorMode="dot" indicatorStyle="bottom"></uv-swiper>
<view class="intro">
<view class="greet">您好，{{ isLogin ? member.nickname : '游客' }}</view>
<view class="note">java-springboot-意向点餐外卖系统</view>
</view>
</view>
<view class="content">
<view class="flex justify-between yshop-menu">
<view class="flex flex-column align-center yshop-menu-item " @tap="takein">
<view><image src="/static/images/index002.png" mode="aspectFit" class="img-01"></image></view>
<view>自取</view>
<view class="font-small text-light-black">下单免排队</view>
</view>
<view class="flex flex-column align-center yshop-menu-item " @tap="takeout">
<view><image src="/static/images/index003.png" mode="aspectFit" class="img-01"></image></view>
<view>外卖</view>
<view class="font-small text-light-black">美食送到家</view>
</view>
</view>
<view class="info">
<view class="integral_section">
<view class="top">
<text class="title">我的卡券</text>
<text class="value">{{member.couponCount}}</text>
</view>
<view class="bottom">
可抵扣商品价格哦
</view>
</view>
<view class="qrcode_section" @tap="coupons">
去领个券
<!-- <view class="iconfont iconarrow-right"></view> -->
</view>
</view>
<view class="info">
<view class="integral_section" @tap="goScore">
<view class="top">
<text class="title">积分商城</text>
</view>
<view class="bottom">
进入积分商城兑换奈雪券及周边好礼
<!-- <view class="iconfont iconarrow-right"></view> -->
</view>
</view>
<view class="qrcode_section" @tap="goScore">
<image src="/static/images/jifen.png"></image>
<text>逛一逛</text>
</view>
</view>
</view>
</view>
<blank size="10"></blank>
<view class="container index-page">
<view class="index-banner">
<uv-swiper class="index-banner__swiper" height="300" imgMode="aspectFill" keyName="image" :list="listAds" indicatorMode="dot" indicatorStyle="bottom"></uv-swiper>
<view class="index-banner__intro">
<view class="index-banner__greet">您好，{{ isLogin ? member.nickname : '游客' }}</view>
<view class="index-banner__note">java-springboot-意向点餐外卖系统</view>
</view>
</view>
<view class="index-content">
<view class="flex justify-between index-menu">
<view class="flex flex-column align-center index-menu__item" @tap="takein">
<view><image src="/static/images/index002.png" mode="aspectFit" class="index-menu__icon"></image></view>
<view>自取</view>
<view class="font-small text-light-black">下单免排队</view>
</view>
<view class="flex flex-column align-center index-menu__item" @tap="takeout">
<view><image src="/static/images/index003.png" mode="aspectFit" class="index-menu__icon"></image></view>
<view>外卖</view>
<view class="font-small text-light-black">美食送到家</view>
</view>
</view>
<view class="index-card">
<view class="index-card__main">
<view class="index-card__header">
<text class="index-card__title">我的卡券</text>
<text class="index-card__value">{{member.couponCount}}</text>
</view>
<view class="index-card__desc">
可抵扣商品价格哦
</view>
</view>
<view class="index-card__action" @tap="coupons">
去领个券
</view>
</view>
<view class="index-card">
<view class="index-card__main" @tap="goScore">
<view class="index-card__header">
<text class="index-card__title">积分商城</text>
</view>
<view class="index-card__desc">
进入积分商城兑换奈雪券及周边好礼
</view>
</view>
<view class="index-card__action index-card__action--with-icon" @tap="goScore">
<image src="/static/images/jifen.png" class="index-card__action-icon"></image>
<text>逛一逛</text>
</view>
</view>
</view>
</view>
</layout>
</template>
@ -83,203 +79,209 @@ import {
ref
} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {
import {
menuAds
} from '@/api/market'
} from '@/api/market'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store/store'
import { useMainStore } from '@/store/store'
//
const main = useMainStore()
const { member,store, isLogin} = storeToRefs(main)
//const store = ref(main.store)
const listAds = ref([])
//const store = ref(main.store)
const listAds = ref([])
// const isLogin = ref(main.isLogin)
const handGetListAds = async () => {
let shop_id = store.id ? store.id : 0;
let data = await menuAds({
shop_id: shop_id
});
if (data) {
listAds.value = data.list;
console.log('listAds:',listAds.value)
uni.setStorage({
key: 'isActive',
data: data.isActive
});
if(data.list.length > 0){
uni.setStorage({
key: 'shopAd',
data: data.list[0].image
});
}
}
}
const takein = () => {
main.SET_ORDER_TYPE('takein')
uni.switchTab({
url: '/pages/menu/menu'
})
}
const takeout = () => {
main.SET_ORDER_TYPE('takeout')
uni.switchTab({
url: '/pages/menu/menu'
})
}
const coupons = () => {
console.log("--> % orderType:\n", main.orderType)
console.log("--> % isLogin:\n", main.isLogin)
if(!main.isLogin) {
uni.navigateTo({url: '/pages/components/pages/login/login'})
return
}
uni.navigateTo({
url: '/pages/components/pages/coupons/coupons'
})
}
const goScore = () => {
uni.navigateTo({
url: '/pages/components/pages/scoreproduct/list'
})
}
const handGetListAds = async () => {
let shop_id = store.id ? store.id : 0;
let data = await menuAds({
shop_id: shop_id
});
if (data) {
listAds.value = data.list;
console.log('listAds:',listAds.value)
uni.setStorage({
key: 'isActive',
data: data.isActive
});
if(data.list.length > 0){
uni.setStorage({
key: 'shopAd',
data: data.list[0].image
});
}
}
}
const takein = () => {
main.SET_ORDER_TYPE('takein')
uni.switchTab({
url: '/pages/menu/menu'
})
}
const takeout = () => {
main.SET_ORDER_TYPE('takeout')
uni.switchTab({
url: '/pages/menu/menu'
})
}
const coupons = () => {
console.log("--> % orderType:\n", main.orderType)
console.log("--> % isLogin:\n", main.isLogin)
if(!main.isLogin) {
uni.navigateTo({url: '/pages/components/pages/login/login'})
return
}
uni.navigateTo({
url: '/pages/components/pages/coupons/coupons'
})
}
const goScore = () => {
uni.navigateTo({
url: '/pages/components/pages/scoreproduct/list'
})
}
onLoad(() => {
// main.init()
// main.init()
handGetListAds()
})
</script>
<style lang="scss">
.yshop-menu {
//margin-bottom: 10rpx;
// position: relative;
margin-top: 20rpx;
}
.yshop-menu-item {
background-color: #ffffff;
width: 355rpx;
padding-bottom: 30rpx;
}
.img-01 {
width: 100px;
height: 100rpx;
margin-top: 30rpx;
}
.img-02 {
width: 110px;
height: 110rpx;
margin-top: 20rpx;
}
/* #ifdef H5 */
page {
height: auto;
min-height: 100%;
}
/* #endif */
page {
//background-color: #ffffff!important;
}
.banner {
position: relative;
width: 100%;
//height: 300rpx;
.bg {
width: 100%;
height: 300rpx;
}
.intro {
position: absolute;
top: calc(50rpx + var(--status-bar-height));
left: 40rpx;
color: #FFFFFF;
display: flex;
flex-direction: column;
.greet {
font-size: $font-size-lg;
margin-bottom: 10rpx;
}
.note {
font-size: $font-size-sm;
}
}
}
.content {
padding: 0 15rpx;
}
.info {
position: relative;
margin: 10rpx 0;
border-radius: 10rpx;
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 {
font-size: $font-size-sm;
color: $text-color-assist;
display: flex;
align-items: center;
}
}
.qrcode_section {
color: $color-primary;
display: flex;
//flex-direction: column;
align-items: center;
justify-content: center;
font-size: $font-size-sm;
image {
width: 40rpx;
height: 40rpx;
margin-bottom: 10rpx;
}
}
}
<style lang="scss">
// 首页局部尺寸 token（与 uni.scss 全局变量配合）
$index-banner-height: 300rpx;
$index-menu-item-width: 355rpx;
$index-card-radius: 10rpx;
$index-content-padding-x: 15rpx;
$index-intro-offset-x: 40rpx;
$index-intro-offset-y: 50rpx;
$index-value-font-size: 44rpx;
$index-gap-sm: 10rpx;
/* #ifdef H5 */
page {
height: auto;
min-height: 100%;
}
/* #endif */
.index-page {
--index-banner-height: #{$index-banner-height};
--index-menu-item-width: #{$index-menu-item-width};
.index-banner {
position: relative;
width: 100%;
&__swiper {
width: 100%;
height: var(--index-banner-height);
}
&__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;
margin-bottom: $index-gap-sm;
}
&__note {
font-size: $font-size-sm;
}
}
.index-content {
padding: 0 $index-content-padding-x;
}
.index-menu {
margin-top: $spacing-row-base;
&__item {
width: var(--index-menu-item-width);
padding-bottom: $spacing-row-lg;
background-color: $text-color-white;
}
&__icon {
width: 100rpx;
height: 100rpx;
margin-top: $spacing-row-lg;
}
}
.index-card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: $index-gap-sm 0;
padding: 25rpx;
border-radius: $index-card-radius;
background-color: $text-color-white;
box-shadow: $box-shadow;
&__main {
flex: 1;
display: flex;
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>

1297
yshop-drink-uniapp-vue3/pages/menu/menu.vue
View File

File diff suppressed because it is too large Load Diff

284
yshop-drink-uniapp-vue3/pages/mine/mine.vue
View File

@ -1,21 +1,21 @@
<template>
<layout>
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
<template>
<layout>
<uv-navbar
:fixed="false"
:title="title"
left-arrow
@leftClick="$onClickLeft"
/>
<view class="container">
<view style="padding: 0 30rpx;">
<view class="container mine-page">
<view class="mine-page__user-section">
<!-- 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="avatar rounded-circle">
<view class="mine-user__header d-flex align-items-center">
<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>
</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"
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'})">
@ -26,26 +26,26 @@
</view>
</view>
<!-- user grid begin -->
<view class="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__stats w-100 d-flex align-items-center just-content-center">
<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">
{{ isLogin ? member.couponCount : 0}}
</view>
<view class="font-size-sm text-color-assist">优惠券</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">
{{ isLogin ? member.integral : 0 }}
</view>
<view class="font-size-sm text-color-assist">积分</view>
</view>
<view class="user-grid">
<view class="mine-user__stat">
<view class="value font-size-extra-lg font-weight-bold text-color-base">
{{ isLogin ? member.nowMoney : 0 }}
</view>
<view class="font-size-sm text-color-assist">余额</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">
{{ isLogin ? member.sumMoney : 0 }}
</view>
@ -58,24 +58,24 @@
</view>
<!-- service box begin -->
<view class="service-box">
<view class="font-size-lg text-color-base font-weight-bold" style="margin-bottom: 20rpx;">我的服务</view>
<view class="mine-service">
<view class="mine-service__title font-size-lg text-color-base font-weight-bold">我的服务</view>
<view class="u-m-t-20">
<uv-cell-group>
<block v-for="(item, index) in services" :key='index'>
<uv-cell :title="item.name" v-if="item.type == 'contact'" :isLink="true">
<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>
</uv-cell>
<uv-cell :isLink="true" :title="item.name" v-else-if="item.type == 'call'" v-on:click="makePhoneCall(item.phone)">
<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>
</uv-cell>
<uv-cell :isLink="true" :title="item.name" v-else @tap="serv(item)">
<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>
</uv-cell>
</block>
@ -83,45 +83,45 @@
</view>
</view>
</view>
</layout>
</layout>
</template>
<script setup>
<script setup>
import {
ref,
ref,
computed
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad,onShow} from '@dcloudio/uni-app'
import { formatDateTime,kmUnit } from '@/utils/util'
import {
userGetUserInfo,
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad,onShow} from '@dcloudio/uni-app'
import { formatDateTime,kmUnit } from '@/utils/util'
import {
userGetUserInfo,
mineService
} from '@/api/user'
const main = useMainStore()
const { member,isLogin } = storeToRefs(main)
const title = ref('个人中心')
const services = ref([])
const growthValue = computed(() => {
if (!isLogin.value) return 0
const {
currentValue,
needValue
} = member.value
return currentValue / (currentValue + needValue) * 100
})
onLoad(() => {
getServices();
})
onShow(() => {
getUserInfo();
})
} from '@/api/user'
const main = useMainStore()
const { member,isLogin } = storeToRefs(main)
const title = ref('个人中心')
const services = ref([])
const growthValue = computed(() => {
if (!isLogin.value) return 0
const {
currentValue,
needValue
} = member.value
return currentValue / (currentValue + needValue) * 100
})
onLoad(() => {
getServices();
})
onShow(() => {
getUserInfo();
})
const getUserInfo = async() => {
if (isLogin.value) {
let data = await userGetUserInfo();
@ -182,121 +182,111 @@ const serv = (item) => {
})
break;
}
}
}
</script>
<style lang="scss" scoped>
page {
height: auto;
min-height: 100%;
// 个人中心页局部 token（与 uni.scss 全局变量配合）
$mine-section-padding-x: $spacing-row-lg;
$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;
}
.user-box {
&__avatar {
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;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);
flex-shrink: 0;
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 {
width: 140rpx;
height: 140rpx;
border-radius: 100%;
}
.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;
}
width: var(--mine-avatar-image-size);
height: var(--mine-avatar-image-size);
border-radius: $border-radius-circle;
}
}
.user-grid {
width: 25%;
padding: 30rpx;
&__stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: $mine-stat-width;
padding: $mine-stat-padding;
.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;
.service-box {
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;
}
}
&__title {
margin-bottom: $mine-service-title-gap;
}
&__icon {
width: var(--mine-service-icon-size);
height: var(--mine-service-icon-size);
flex-shrink: 0;
}
}
</style>

93
yshop-drink-uniapp-vue3/pages/order/order.vue
View File

@ -5,16 +5,16 @@
left-arrow
@leftClick="$onClickLeft"
/>
<view class="container">
<view class="container order-page">
<view class="bg-white">
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
</view>
<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;" >
<view class="order-page__list d-flex flex-column w-100">
<view class="order-item" v-for="(item, index) in orders" :key="index">
<list-cell :hover="false">
<view class="w-100 d-flex align-items-center">
<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 }}
</view>
<view class="font-size-sm text-color-assist">取餐号：{{ item.numberId }}</view>
@ -27,9 +27,9 @@
</list-cell>
<list-cell :hover="false" last>
<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="flex mb-2" v-for="(good,index) in item.cartInfo" :key="index">
<image :src="good.image" mode="aspectFill" class="image"></image>
<view class="w-100 text-truncate font-size-lg text-color-base order-item__goods">
<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="order-item__thumb"></image>
<view class="flex flex-column">
<view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view>
<view class="font-size-sm mt-1">{{ good.spec }}</view>
@ -37,20 +37,24 @@
</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">
{{formatDateTime(item.createTime) }}
</view>
<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>
</view>
<view class="d-flex align-items-center justify-content-end">
<view>
<button v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0" class="left-margin" plain size="mini" @tap.stop="receive(item)">确认收到餐</button>
<button class="left-margin" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
</view>
<view class="d-flex align-items-center justify-content-end order-item__actions">
<button
v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0"
class="order-item__btn"
plain
size="mini"
@tap.stop="receive(item)"
>确认收到餐</button>
<button class="order-item__btn" plain size="mini" @tap="detail(item.orderId)">订单详情</button>
</view>
</view>
</list-cell>
@ -62,9 +66,9 @@
<script setup>
import {
import {
ref,
computed
computed
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
@ -72,7 +76,7 @@ import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
import { formatDateTime,kmUnit } from '@/utils/util'
import {
orderGetOrders,
orderReceive
orderReceive
} from '@/api/order'
const main = useMainStore()
const { isLogin } = storeToRefs(main)
@ -163,13 +167,54 @@ const receive = async(order) => {
</script>
<style lang="scss" scoped>
.left-margin {
margin-left: 10rpx;
// 订单页局部 token（与 uni.scss 全局变量配合）
$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;
margin-right: 30rpx;
border-radius: 8rpx;
}
.order-item {
margin-bottom: $order-item-gap;
&__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>

1392
yshop-drink-uniapp-vue3/static/style/app.scss
View File

File diff suppressed because it is too large Load Diff

17
yshop-drink-uniapp-vue3/uni.scss
View File

@ -14,27 +14,30 @@
/* 颜色变量 */
/* 行为相关颜色 */
// $color-primary: #ADB838;
$color-primary: #09b4f1;
$color-success: #4cd964;
$color-warning: #FAB714;
$color-error: #D12E32;
/* 文字基本颜色 */
$text-color-base: #5A5B5C; //基本色
$text-color-assist: #919293; //辅助色
$text-color-base: #333333; //基本色(主要文字)
$text-color-assist: #999999; //辅助色(次要文字)
$text-color-black: #3B3C3E; //黑
$text-color-grey: #878889; //灰
$text-color-white: #ffffff; //白
$text-color-light-muted: #A9A5A0; //浅灰
/* 背景颜色 */
$bg-color: #F1F8FA;
$bg-color-grey: #F5F5F5;
//$bg-color-primary: #E8EACF;
$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; // 文章段落颜色
$font-size-paragraph:30rpx;
$box-shadow: 0 20rpx 20rpx -20rpx rgba($color: #333, $alpha: 0.1);
$uv-main-color: #333333;
$uv-content-color: #999999;