six_uniapp_0001
This commit is contained in:
doudou201703
+21
@@ -0,0 +1,21 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
strict-peer-dependencies=false
|
||||||
|
auto-install-peers=true
|
||||||
|
shamefully-hoist=true
|
||||||
Vendored
+15
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"vue.volar",
|
||||||
|
"mrmaoddxxaa.create-uniapp-view",
|
||||||
|
"uni-helper.uni-helper-vscode",
|
||||||
|
"uni-helper.uni-app-schemas-vscode",
|
||||||
|
"uni-helper.uni-highlight-vscode",
|
||||||
|
"uni-helper.uni-ui-snippets-vscode",
|
||||||
|
"uni-helper.uni-app-snippets-vscode",
|
||||||
|
"uni-helper.uni-cloud-snippets-vscode",
|
||||||
|
"yoavbls.pretty-ts-errors",
|
||||||
|
"johnsoncodehk.vscode-tsconfig-helper",
|
||||||
|
"wot-ui.wot-ui-intellisense"
|
||||||
|
]
|
||||||
|
}
|
||||||
Vendored
+6
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"files.associations": {
|
||||||
|
"pages.json": "jsonc",
|
||||||
|
"manifest.json": "jsonc"
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
+78
@@ -0,0 +1,78 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
/* oxlint-disable */
|
||||||
|
/* oxfmt-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// noinspection JSUnusedGlobalSymbols
|
||||||
|
// Generated by unplugin-auto-import
|
||||||
|
// biome-ignore lint: disable
|
||||||
|
export {}
|
||||||
|
declare global {
|
||||||
|
const EffectScope: typeof import('vue').EffectScope
|
||||||
|
const computed: typeof import('vue').computed
|
||||||
|
const createApp: typeof import('vue').createApp
|
||||||
|
const customRef: typeof import('vue').customRef
|
||||||
|
const dash: typeof import('radashi')
|
||||||
|
const deep: typeof import('@vueuse/shared')
|
||||||
|
const defineAsyncComponent: typeof import('vue').defineAsyncComponent
|
||||||
|
const defineComponent: typeof import('vue').defineComponent
|
||||||
|
const effectScope: typeof import('vue').effectScope
|
||||||
|
const getCurrentInstance: typeof import('vue').getCurrentInstance
|
||||||
|
const getCurrentScope: typeof import('vue').getCurrentScope
|
||||||
|
const getCurrentWatcher: typeof import('vue').getCurrentWatcher
|
||||||
|
const h: typeof import('vue').h
|
||||||
|
const inject: typeof import('vue').inject
|
||||||
|
const isProxy: typeof import('vue').isProxy
|
||||||
|
const isReactive: typeof import('vue').isReactive
|
||||||
|
const isReadonly: typeof import('vue').isReadonly
|
||||||
|
const isRef: typeof import('vue').isRef
|
||||||
|
const isShallow: typeof import('vue').isShallow
|
||||||
|
const markRaw: typeof import('vue').markRaw
|
||||||
|
const nextTick: typeof import('vue').nextTick
|
||||||
|
const onActivated: typeof import('vue').onActivated
|
||||||
|
const onBeforeMount: typeof import('vue').onBeforeMount
|
||||||
|
const onBeforeUnmount: typeof import('vue').onBeforeUnmount
|
||||||
|
const onBeforeUpdate: typeof import('vue').onBeforeUpdate
|
||||||
|
const onDeactivated: typeof import('vue').onDeactivated
|
||||||
|
const onErrorCaptured: typeof import('vue').onErrorCaptured
|
||||||
|
const onMounted: typeof import('vue').onMounted
|
||||||
|
const onRenderTracked: typeof import('vue').onRenderTracked
|
||||||
|
const onRenderTriggered: typeof import('vue').onRenderTriggered
|
||||||
|
const onScopeDispose: typeof import('vue').onScopeDispose
|
||||||
|
const onServerPrefetch: typeof import('vue').onServerPrefetch
|
||||||
|
const onUnmounted: typeof import('vue').onUnmounted
|
||||||
|
const onUpdated: typeof import('vue').onUpdated
|
||||||
|
const onWatcherCleanup: typeof import('vue').onWatcherCleanup
|
||||||
|
const provide: typeof import('vue').provide
|
||||||
|
const reactive: typeof import('vue').reactive
|
||||||
|
const readonly: typeof import('vue').readonly
|
||||||
|
const ref: typeof import('vue').ref
|
||||||
|
const resolveComponent: typeof import('vue').resolveComponent
|
||||||
|
const shallowReactive: typeof import('vue').shallowReactive
|
||||||
|
const shallowReadonly: typeof import('vue').shallowReadonly
|
||||||
|
const shallowRef: typeof import('vue').shallowRef
|
||||||
|
const toRaw: typeof import('vue').toRaw
|
||||||
|
const toRef: typeof import('vue').toRef
|
||||||
|
const toRefs: typeof import('vue').toRefs
|
||||||
|
const toValue: typeof import('vue').toValue
|
||||||
|
const triggerRef: typeof import('vue').triggerRef
|
||||||
|
const uee: typeof import('@uni-helper/uni-use')
|
||||||
|
const unref: typeof import('vue').unref
|
||||||
|
const useAttrs: typeof import('vue').useAttrs
|
||||||
|
const useCssModule: typeof import('vue').useCssModule
|
||||||
|
const useCssVars: typeof import('vue').useCssVars
|
||||||
|
const useId: typeof import('vue').useId
|
||||||
|
const useModel: typeof import('vue').useModel
|
||||||
|
const useSlots: typeof import('vue').useSlots
|
||||||
|
const useTemplateRef: typeof import('vue').useTemplateRef
|
||||||
|
const watch: typeof import('vue').watch
|
||||||
|
const watchEffect: typeof import('vue').watchEffect
|
||||||
|
const watchPostEffect: typeof import('vue').watchPostEffect
|
||||||
|
const watchSyncEffect: typeof import('vue').watchSyncEffect
|
||||||
|
}
|
||||||
|
// for type re-export
|
||||||
|
declare global {
|
||||||
|
// @ts-ignore
|
||||||
|
export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||||
|
import('vue')
|
||||||
|
}
|
||||||
Vendored
+34
@@ -0,0 +1,34 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by vite-plugin-uni-components
|
||||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
|
export {}
|
||||||
|
|
||||||
|
declare module 'vue' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
ChildComScroll: typeof import('./src/components/ChildComScroll.vue')['default']
|
||||||
|
NutButton: typeof import('nutui-uniapp/components/button/button.vue')['default']
|
||||||
|
NutConfigProvider: typeof import('nutui-uniapp/components/configprovider/configprovider.vue')['default']
|
||||||
|
NutEmpty: typeof import('nutui-uniapp/components/empty/empty.vue')['default']
|
||||||
|
TongYongComEmpty: typeof import('./src/components/tong-yong-com-empty.vue')['default']
|
||||||
|
TongYongComExpressDelivery: typeof import('./src/components/tong-yong-com-express-delivery.vue')['default']
|
||||||
|
TongYongDemo: typeof import('./src/components/tong-yong-demo.vue')['default']
|
||||||
|
TongYongTitleDemo: typeof import('./src/components/tong-yong-title-demo.vue')['default']
|
||||||
|
WdActionSheet: typeof import('wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue')['default']
|
||||||
|
WdButton: typeof import('wot-design-uni/components/wd-button/wd-button.vue')['default']
|
||||||
|
WdCircle: typeof import('wot-design-uni/components/wd-circle/wd-circle.vue')['default']
|
||||||
|
WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default']
|
||||||
|
WdCurtain: typeof import('wot-design-uni/components/wd-curtain/wd-curtain.vue')['default']
|
||||||
|
WdDivider: typeof import('wot-design-uni/components/wd-divider/wd-divider.vue')['default']
|
||||||
|
WdGap: typeof import('wot-design-uni/components/wd-gap/wd-gap.vue')['default']
|
||||||
|
WdIcon: typeof import('wot-design-uni/components/wd-icon/wd-icon.vue')['default']
|
||||||
|
WdImg: typeof import('wot-design-uni/components/wd-img/wd-img.vue')['default']
|
||||||
|
WdLoading: typeof import('wot-design-uni/components/wd-loading/wd-loading.vue')['default']
|
||||||
|
WdMessageBox: typeof import('wot-design-uni/components/wd-message-box/wd-message-box.vue')['default']
|
||||||
|
WdTabbar: typeof import('wot-design-uni/components/wd-tabbar/wd-tabbar.vue')['default']
|
||||||
|
WdTabbarItem: typeof import('wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue')['default']
|
||||||
|
WdTag: typeof import('wot-design-uni/components/wd-tag/wd-tag.vue')['default']
|
||||||
|
WdToast: typeof import('wot-design-uni/components/wd-toast/wd-toast.vue')['default']
|
||||||
|
}
|
||||||
|
}
|
||||||
+21
@@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<link rel="icon" href="static/logo.svg">
|
||||||
|
<script>
|
||||||
|
const coverSupport = "CSS" in window && typeof CSS.supports === "function" && (CSS.supports("top: env(a)")
|
||||||
|
|| CSS.supports("top: constant(a)"));
|
||||||
|
document.write(
|
||||||
|
`<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0${
|
||||||
|
coverSupport ? ", viewport-fit=cover" : ""}" />`);
|
||||||
|
</script>
|
||||||
|
<title></title>
|
||||||
|
<!--preload-links-->
|
||||||
|
<!--app-context-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"><!--app-html--></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
{
|
||||||
|
"name": "demo_app",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "unh dev",
|
||||||
|
"build": "unh build",
|
||||||
|
"about": "unh info",
|
||||||
|
"type-check": "vue-tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@dcloudio/uni-app": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-app-harmony": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-app-plus": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-components": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-h5": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-mp-alipay": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-mp-baidu": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-mp-harmony": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-mp-jd": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-mp-kuaishou": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-mp-lark": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-mp-qq": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-mp-toutiao": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-mp-weixin": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-mp-xhs": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-quickapp-webview": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-ui": "^1.5.12",
|
||||||
|
"@uni-helper/axios-adapter": "^1.18.1",
|
||||||
|
"@uni-helper/uni-network": "^0.24.2",
|
||||||
|
"@uni-helper/uni-use": "^0.19.17",
|
||||||
|
"@vueuse/core": "9.13.0",
|
||||||
|
"@vueuse/shared": "^14.3.0",
|
||||||
|
"axios": "^1.18.1",
|
||||||
|
"core-js": "^3.49.0",
|
||||||
|
"dayjs": "^1.11.21",
|
||||||
|
"klona": "^2.0.6",
|
||||||
|
"nutui-uniapp": "^1.11.2",
|
||||||
|
"pinia": "^3.0.4",
|
||||||
|
"pinia-plugin-persistedstate": "^4.7.1",
|
||||||
|
"radashi": "^12.9.1",
|
||||||
|
"unplugin-auto-import": "^21.1.0",
|
||||||
|
"uview-pro": "^0.6.8",
|
||||||
|
"vue": "^3.4.21",
|
||||||
|
"vue-i18n": "^9.1.9",
|
||||||
|
"vue-router": "4.5.1",
|
||||||
|
"wot-design-uni": "^1.14.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@dcloudio/types": "^3.4.8",
|
||||||
|
"@dcloudio/uni-automator": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-cli-shared": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/uni-stacktracey": "3.0.0-5010520260709002",
|
||||||
|
"@dcloudio/vite-plugin-uni": "3.0.0-5010520260709002",
|
||||||
|
"@mini-types/alipay": "^3.0.14",
|
||||||
|
"@types/node": "^25.6.0",
|
||||||
|
"@uni-helper/plugin-uni": "0.1.0",
|
||||||
|
"@uni-helper/unh": "^0.3.1",
|
||||||
|
"@uni-helper/uni-app-types": "^1.1.0",
|
||||||
|
"@uni-helper/uni-types": "^1.0.0-alpha.8",
|
||||||
|
"@uni-helper/vite-plugin-uni-components": "^0.2.10",
|
||||||
|
"@vue/runtime-core": "^3.4.21",
|
||||||
|
"@vue/tsconfig": "^0.9.1",
|
||||||
|
"miniprogram-api-typings": "^5.1.2",
|
||||||
|
"rollup": "4.14.3",
|
||||||
|
"sass": "1.64.2",
|
||||||
|
"typescript": "5.9.3",
|
||||||
|
"vite": "5.2.8",
|
||||||
|
"vue-tsc": "^3.2.7"
|
||||||
|
}
|
||||||
|
}
|
||||||
+119
@@ -0,0 +1,119 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {onLaunch} from "@dcloudio/uni-app";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import {
|
||||||
|
wss_uri, 卡券_领券,
|
||||||
|
地址_IP转地址,
|
||||||
|
地址_查询全部地址,
|
||||||
|
积分_添加好物推荐积分,
|
||||||
|
积分_添加小程序分享积分, 积分_添加通知好友积分, 积分_统计查询, 订单_查询所有的订单
|
||||||
|
} from "@/hooks/接口API";
|
||||||
|
import {emitter, useGlobalSocket} from "@/hooks/useGlobalSocket";
|
||||||
|
|
||||||
|
type queryType类型 = {
|
||||||
|
superior_unionid: string,
|
||||||
|
shareType: "主页分享群好友" | "商品详情分享群好友" | "通知好友" | "好物推荐" | "小程序推荐",
|
||||||
|
goodID: string
|
||||||
|
}
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
const 上级分享者的默认值 = "六果";
|
||||||
|
emitter.on("socket-message", (msg) => {
|
||||||
|
if (msg.type === "监听心跳") {
|
||||||
|
}
|
||||||
|
if (msg.type === "update_更新用户头像") {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 ", JSON.parse(msg.text));
|
||||||
|
xiaoMain.mini_user_data = JSON.parse(msg.text);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
wx.onAppShow((options) => {
|
||||||
|
let queryData = options?.query as queryType类型 ?? {};
|
||||||
|
xiaoMain.superior_unionid = options?.query.superior_unionid ?? 上级分享者的默认值;
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 打印一下分享者的信息 ", xiaoMain.superior_unionid);
|
||||||
|
if (options?.scene === 1047) {
|
||||||
|
console.log("扫描小程序码", options);
|
||||||
|
xiaoMain.superior_unionid = options.query.scene ?? 上级分享者的默认值;
|
||||||
|
}
|
||||||
|
console.log("=======================", options, xiaoMain.superior_unionid);
|
||||||
|
|
||||||
|
// 如果值为null了 就需要 调用了
|
||||||
|
xiaoMain.wechatLogin(options?.scene, <string>xiaoMain.superior_unionid, options?.shareTicket).then((data) => {
|
||||||
|
const socked = useGlobalSocket(wss_uri + xiaoMain.mini_unionid + "/");
|
||||||
|
// 请求拿到当前用户注册过的用户地址
|
||||||
|
xiaoMain.请求拿到当前用户注册过的用户地址(地址_查询全部地址, <string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid);
|
||||||
|
|
||||||
|
if (queryData.shareType === "通知好友") {//这里对应的积分类型为:发券奖励
|
||||||
|
xiaoMain.add添加积分_通知好积分(积分_添加通知好友积分, <string>xiaoMain.mini_openid,
|
||||||
|
<string>xiaoMain.mini_unionid, <string>xiaoMain.superior_unionid);
|
||||||
|
}
|
||||||
|
if (queryData.shareType === "好物推荐") {
|
||||||
|
// 用户分享商品详情页面 对应的积分类型为:好物推荐, 同时会在请求时,带着当前的商品ID,积分值为10个积分;
|
||||||
|
xiaoMain.add添加好物推荐分享积分(积分_添加好物推荐积分, <string>xiaoMain.mini_openid,
|
||||||
|
<string>xiaoMain.mini_unionid, <string>xiaoMain.superior_unionid, queryData.goodID);
|
||||||
|
}
|
||||||
|
if (queryData.shareType === "小程序推荐") {
|
||||||
|
xiaoMain.add添加小程序分享积分(积分_添加小程序分享积分, <string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid, <string>xiaoMain.superior_unionid);
|
||||||
|
}
|
||||||
|
xiaoMain.订单_查询所有的订单列表数据(订单_查询所有的订单, <string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid);
|
||||||
|
xiaoMain.用户_IP地址转信息(地址_IP转地址, <string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid);
|
||||||
|
xiaoMain.query_积分统计查询(积分_统计查询, <string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid);
|
||||||
|
xiaoMain.代金券默认领券事件(卡券_领券, <string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid);
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
wx.checkIsAddedToMyMiniProgram({
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res, "添加到我的小程序了吗");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
wx.showShareMenu({
|
||||||
|
withShareTicket: true,
|
||||||
|
menus: ["shareAppMessage", "shareTimeline"],
|
||||||
|
success: (result) => {
|
||||||
|
},
|
||||||
|
fail: (error) => {
|
||||||
|
console.log("❌❌❌❌❌❌❌❌", error);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
wx.onUserCaptureScreen(() => {
|
||||||
|
console.log("=======================监听调用了吗", xiaoMain.mini_unionid);
|
||||||
|
return {
|
||||||
|
query: `superior_unionid=${xiaoMain.mini_unionid}`, // 通过截屏图片打开小程序的query参数
|
||||||
|
promise: new Promise((resolve) => { // 通过promise延时传递小程序的query参数
|
||||||
|
resolve({
|
||||||
|
query: `superior_unionid=${xiaoMain.mini_unionid}`,
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
wx.onGeneratePoster(() => {
|
||||||
|
console.log("监听用户截屏之后需要开发者生成自定义海报事件，在点击转发截图按钮时触发。只能注册一个监听函数，重复调用会覆盖上一个监听函数");
|
||||||
|
return {
|
||||||
|
src: "static/vite.png",
|
||||||
|
promise: new Promise((resolve) => {
|
||||||
|
wx.downloadFile({
|
||||||
|
url: "https://oss.xiao.band/backhome.png", // 必须：要下载的图片URL
|
||||||
|
success: (result) => {
|
||||||
|
resolve({src: result.tempFilePath}); // 必须要返回一个对象{}同时,必须是一个临时的图片路径;
|
||||||
|
},
|
||||||
|
fail: (res) => {
|
||||||
|
console.log("❌ 下载失败", res);
|
||||||
|
},
|
||||||
|
complete: (res) => {
|
||||||
|
console.log("下载操作完成", res);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import "@/assets/font.css";
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
// 1️⃣ 先引入 nutui 的变量和 mixins（必须在 nutui 样式之前）
|
||||||
|
@import "nutui-uniapp/styles/index.scss";
|
||||||
|
</style>
|
||||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,356 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
|
||||||
|
.phoneCom {
|
||||||
|
position: fixed;
|
||||||
|
width: 750rpx;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
z-index: v-bind(zIndex);
|
||||||
|
|
||||||
|
.phone-wifi {
|
||||||
|
height: v-bind(wifi_px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-nav {
|
||||||
|
height: v-bind(nav_px_height);
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.meun-height {
|
||||||
|
height: v-bind(meun_px_height);
|
||||||
|
width: 750rpx;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.uniui-left {
|
||||||
|
width: v-bind(rpxLeftWidth);
|
||||||
|
display: flex;
|
||||||
|
height: v-bind(meun_px_height);;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meun-widht-left {
|
||||||
|
width: v-bind(divMeunWidht);
|
||||||
|
height: v-bind(meun_px_height);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
:deep(.customClass-icon) {
|
||||||
|
height: v-bind(meun_px_height);
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
line-height: v-bind(meun_px_height);
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.meun-widht-rightimage_item {
|
||||||
|
height: v-bind(imgWidthHeight);
|
||||||
|
width: v-bind(imgWidthHeight);
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.meun-widht-middle {
|
||||||
|
width: v-bind(divMeunWidhtMiddle);
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
align-self: center;
|
||||||
|
height: calc(v-bind(flexMeunHeight) * 0.8);
|
||||||
|
|
||||||
|
&.light-background {
|
||||||
|
background-color: #555555;
|
||||||
|
height: calc(v-bind(flexMeunHeight) * 0.8);
|
||||||
|
align-self: center;
|
||||||
|
width: v-bind(divMeunWidhtMiddle);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.meun-widht-right {
|
||||||
|
width: v-bind(divMeunWidht);
|
||||||
|
height: v-bind(meun_px_height);;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
:deep(.customClass-icon) {
|
||||||
|
height: v-bind(meun_px_height);
|
||||||
|
text-align: center;
|
||||||
|
line-height: v-bind(meun_px_height);
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.meun-widht-rightimage_item {
|
||||||
|
height: v-bind(imgWidthHeight);
|
||||||
|
width: v-bind(imgWidthHeight);
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.FlexTitleWidth {
|
||||||
|
width: v-bind(rpxFlexTitleWidth);
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: v-bind(meun_px_height);
|
||||||
|
|
||||||
|
.flex-title-text {
|
||||||
|
width: v-bind(rpxFlexTitleWidth);
|
||||||
|
height: v-bind(meun_px_height);
|
||||||
|
line-height: v-bind(meun_px_height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-title-slot {
|
||||||
|
width: v-bind(rpxFlexTitleWidth);
|
||||||
|
height: v-bind(meun_px_height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="phoneCom">
|
||||||
|
<view class="phone-wifi">
|
||||||
|
<view class="status-wifi"></view>
|
||||||
|
</view>
|
||||||
|
<view v-if="navShow" class="phone-nav">
|
||||||
|
<view class="meun-height">
|
||||||
|
<view class="uniui-left"></view>
|
||||||
|
<view class="meun-widht-left" @click="emit('homeLeft')">
|
||||||
|
<wd-icon v-if="modelValue?.isShowLeft.showCom==='icon'"
|
||||||
|
:classPrefix="modelValue?.isShowLeft.iconTextLeft.classPrefix"
|
||||||
|
:name="modelValue?.isShowLeft.iconTextLeft.name"
|
||||||
|
:size="modelValue?.isShowLeft.iconTextLeft.size"
|
||||||
|
custom-class="customClass-icon"
|
||||||
|
></wd-icon>
|
||||||
|
<image v-if="modelValue?.isShowLeft.showCom==='img'" :src="modelValue.isShowLeft.img.imgLeft"
|
||||||
|
class="meun-widht-rightimage_item"
|
||||||
|
mode="scaleToFill" webp></image>
|
||||||
|
</view>
|
||||||
|
<view class="meun-widht-middle" :class="{'light-background':theme==='light'}"></view>
|
||||||
|
<view class="meun-widht-right" @click="emit('homeRight')">
|
||||||
|
<!-- <wd-icon custom-class="customClass-icon" name="thin-arrow-left" size="18px"></wd-icon>-->
|
||||||
|
<wd-icon v-if="modelValue?.isShowRight.showCom==='icon'"
|
||||||
|
:classPrefix="modelValue?.isShowRight.iconTextRight.classPrefix"
|
||||||
|
:name="modelValue?.isShowRight.iconTextRight.name"
|
||||||
|
:size="modelValue?.isShowRight.iconTextRight.size"
|
||||||
|
custom-class="customClass-icon"
|
||||||
|
></wd-icon>
|
||||||
|
<image v-if="modelValue?.isShowRight.showCom==='img'" :src="modelValue.isShowRight.img.imgRight"
|
||||||
|
class="meun-widht-rightimage_item"
|
||||||
|
mode="scaleToFill" webp></image>
|
||||||
|
</view>
|
||||||
|
<view class="FlexTitleWidth">
|
||||||
|
<view v-if="titleViewShow" class="flex-title-text">{{ modelValue?.title_text }}</view>
|
||||||
|
<view v-if="slotViewShow" class="flex-title-slot">
|
||||||
|
<slot name="default"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {computed, ref, watchEffect} from "vue";
|
||||||
|
import {onShow} from "@dcloudio/uni-app";
|
||||||
|
import type {GlobelsChildPropsType} from "@/types/通用类型";
|
||||||
|
|
||||||
|
let theme = ref(uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
defineOptions({
|
||||||
|
options: {
|
||||||
|
styleIsolation: "shared",
|
||||||
|
virtualHost: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(eventName: "update:pxWindowHeight", value: string): void
|
||||||
|
(eventName: "update:pxScrollHeight", value: string): void
|
||||||
|
(eventName: "update:pxScreenHeight", value: string): void
|
||||||
|
(eventName: "update:pxWifiNavHeight", value: string): void
|
||||||
|
(eventName: "update:statusHeight", value: string): void
|
||||||
|
(eventName: "update:meunHeight", value: string): void
|
||||||
|
(eventName: "homeRight"): void
|
||||||
|
(eventName: "homeLeft"): void
|
||||||
|
}>();
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
interface definePropsType {
|
||||||
|
modelValue?: GlobelsChildPropsType, //跟v-model=值没有关系
|
||||||
|
zIndex?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<definePropsType>(), {
|
||||||
|
zIndex: () => (100),
|
||||||
|
});
|
||||||
|
const info_window = uni.getWindowInfo();
|
||||||
|
let pxToRpxScale = 750 / info_window.windowWidth;
|
||||||
|
let meun = uni.getMenuButtonBoundingClientRect();
|
||||||
|
let meun_px_height = computed(() => {
|
||||||
|
return meun.height - 2 + "px";
|
||||||
|
});
|
||||||
|
// 计算当前 wifi的高度
|
||||||
|
let wifiHeing = computed(() => {
|
||||||
|
// 当前wifi的高度 也是分为两种情况下 为负数的时候 小于0 的时候我们就需要减少 wifi的高度,这样才能正确留空
|
||||||
|
if (meun.top - info_window.statusBarHeight < 0) {
|
||||||
|
let num = meun.top - info_window.statusBarHeight;
|
||||||
|
return info_window.statusBarHeight - Math.abs(num) * 2;
|
||||||
|
}
|
||||||
|
return info_window.statusBarHeight;
|
||||||
|
});
|
||||||
|
// 默认的一些宽度
|
||||||
|
let rpxLeftWidth = computed(() => {
|
||||||
|
return (info_window.windowWidth - meun.right) * pxToRpxScale + "rpx";
|
||||||
|
});
|
||||||
|
|
||||||
|
let pxMeunHeight = computed(() => {
|
||||||
|
return meun.height + "px";
|
||||||
|
});
|
||||||
|
let rpxFlexTitleWidth = computed(() => {
|
||||||
|
return (meun.left - meun.width - (info_window.windowWidth - meun.right)) * pxToRpxScale + "rpx";
|
||||||
|
});
|
||||||
|
let divMeunWidht = computed(() => {
|
||||||
|
// 胶囊的一半宽度
|
||||||
|
const halfWidth = Math.ceil(meun.width / 2) - 1;
|
||||||
|
return halfWidth * pxToRpxScale + "rpx";
|
||||||
|
});
|
||||||
|
|
||||||
|
let flexMeunHeight = computed(() => {
|
||||||
|
return Math.ceil(meun.height) * 0.6 + "px";
|
||||||
|
});
|
||||||
|
let divMeunWidhtMiddle = computed(() => {
|
||||||
|
return "1px";
|
||||||
|
// return 2 * pxToRpxScale + "rpx";
|
||||||
|
});
|
||||||
|
let imgWidthHeight = computed(() => {
|
||||||
|
return Math.ceil(meun.height * 0.7 * pxToRpxScale) + "rpx";
|
||||||
|
});
|
||||||
|
let wifi_px = computed(() => {
|
||||||
|
return wifiHeing.value + "px";
|
||||||
|
});
|
||||||
|
// 计算当前导航栏的高度
|
||||||
|
let navHeight = computed(() => {
|
||||||
|
// 导航栏高度 = 胶囊高度 + (胶囊顶部距离 - wifi高度)*2
|
||||||
|
// 这里逻辑也得分二种情况第一情况,减下来值小0 和大于0
|
||||||
|
if (meun.top - info_window.statusBarHeight > 0) {
|
||||||
|
return meun.height + (meun.top - info_window.statusBarHeight) * 2;
|
||||||
|
}
|
||||||
|
if (meun.top - info_window.statusBarHeight <= 0) {
|
||||||
|
return meun.height + Math.abs(meun.top - info_window.statusBarHeight) * 2;
|
||||||
|
}
|
||||||
|
return meun.height + (meun.top - info_window.statusBarHeight) * 2;
|
||||||
|
});
|
||||||
|
let nav_px_height = computed(() => {
|
||||||
|
return navHeight.value + "px";
|
||||||
|
});
|
||||||
|
// 计算可视区域的高度
|
||||||
|
let windowHeight = computed(() => {
|
||||||
|
// 可视区高度 = 屏幕高度 - 可视区域的高度 还需要判断 二 种情况, 一种是有tab, 一种是没有tab的情况
|
||||||
|
// 没有tab栏的情况
|
||||||
|
if (info_window.screenHeight - info_window.windowHeight === 0) {
|
||||||
|
if (info_window.safeAreaInsets.bottom > 0) {
|
||||||
|
// 这是苹果手机的状态(直接返回高度就可以了)
|
||||||
|
return info_window.screenHeight - info_window.safeAreaInsets.bottom;
|
||||||
|
}
|
||||||
|
if (info_window.safeAreaInsets.bottom === 0) {
|
||||||
|
// 这是没有底部安全栏高度时的(华为手机,苹果5678o)
|
||||||
|
return info_window.screenHeight - 34;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (info_window.screenHeight - info_window.windowHeight > 0) {
|
||||||
|
return info_window.windowHeight;
|
||||||
|
}
|
||||||
|
return info_window.windowHeight;
|
||||||
|
});
|
||||||
|
// 实时给出高度
|
||||||
|
let wifiShow = ref(true);
|
||||||
|
let navShow = ref(true);
|
||||||
|
let titleViewShow = ref(true);
|
||||||
|
let slotViewShow = ref(false);
|
||||||
|
onShow(() => {
|
||||||
|
emit("update:meunHeight", pxMeunHeight.value);
|
||||||
|
});
|
||||||
|
watchEffect(() => {
|
||||||
|
emit("update:pxScreenHeight", info_window.screenHeight + "px");
|
||||||
|
|
||||||
|
if (props.modelValue?.navIsShow === "default") {
|
||||||
|
// 此时的导航栏高度 = wifi+nav的高度
|
||||||
|
let staus = computed(() => {
|
||||||
|
return (wifiHeing.value + navHeight.value) + "px";
|
||||||
|
});
|
||||||
|
let pxScrollHeight = computed(() => {
|
||||||
|
return windowHeight.value + "px";
|
||||||
|
});
|
||||||
|
emit("update:statusHeight", staus.value);
|
||||||
|
emit("update:pxWindowHeight", staus.value);
|
||||||
|
emit("update:pxScrollHeight", pxScrollHeight.value);
|
||||||
|
emit("update:pxWindowHeight", pxScrollHeight.value);
|
||||||
|
}
|
||||||
|
if (props.modelValue?.navIsShow === "wifi") {
|
||||||
|
// 此时的导航栏高度 = wifi+nav的高度
|
||||||
|
navShow.value = false;
|
||||||
|
let staus = computed(() => {
|
||||||
|
return (wifiHeing.value) + "px";
|
||||||
|
});
|
||||||
|
let pxScrollHeight = computed(() => {
|
||||||
|
// 当值为wifi时,则表明,只想显示一个wifi的状态, 不想显示na的状态
|
||||||
|
return windowHeight.value + "px";
|
||||||
|
});
|
||||||
|
emit("update:statusHeight", staus.value);
|
||||||
|
emit("update:pxWindowHeight", staus.value);
|
||||||
|
emit("update:pxScrollHeight", pxScrollHeight.value);
|
||||||
|
emit("update:pxWindowHeight", pxScrollHeight.value);
|
||||||
|
}
|
||||||
|
if (props.modelValue?.navIsShow === "none") {
|
||||||
|
navShow.value = true;
|
||||||
|
wifiShow.value = false;
|
||||||
|
// 此时的导航栏高度 = wifi+nav的高度
|
||||||
|
let staus = computed(() => {
|
||||||
|
return "0px";
|
||||||
|
});
|
||||||
|
let pxScrollHeight = computed(() => {
|
||||||
|
// 当值为wifi时,则表明,只想显示一个wifi的状态, 不想显示na的状态
|
||||||
|
return windowHeight.value + "px";
|
||||||
|
});
|
||||||
|
emit("update:statusHeight", staus.value);
|
||||||
|
emit("update:pxWindowHeight", staus.value);
|
||||||
|
emit("update:pxScrollHeight", pxScrollHeight.value);
|
||||||
|
emit("update:pxWindowHeight", pxScrollHeight.value);
|
||||||
|
}
|
||||||
|
if (props.modelValue?.navIsShow === "slot") {
|
||||||
|
slotViewShow.value = true;
|
||||||
|
titleViewShow.value = false;
|
||||||
|
// 此时的导航栏高度 = wifi+nav的高度
|
||||||
|
let staus = computed(() => {
|
||||||
|
return (wifiHeing.value + navHeight.value) + "px";
|
||||||
|
});
|
||||||
|
|
||||||
|
let pxScrollHeight = computed(() => {
|
||||||
|
// 当值为wifi时,则表明,只想显示一个wifi的状态, 不想显示na的状态
|
||||||
|
return windowHeight.value + "px";
|
||||||
|
});
|
||||||
|
emit("update:statusHeight", staus.value);
|
||||||
|
emit("update:pxWindowHeight", staus.value);
|
||||||
|
emit("update:pxScrollHeight", pxScrollHeight.value);
|
||||||
|
emit("update:pxWindowHeight", pxScrollHeight.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
<style scoped lang="scss">
|
||||||
|
.root-demo {
|
||||||
|
height: 90%;
|
||||||
|
display: flex;
|
||||||
|
box-shadow: inset 0 0 0 1px red;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class=root-demo>
|
||||||
|
<view class="xiaozizi-demo">
|
||||||
|
<nut-empty :description="description">
|
||||||
|
<template #image>
|
||||||
|
<image src="https://hudie.xiao.band/%E6%9C%AA%E5%91%BD%E5%90%8D.png"></image>
|
||||||
|
</template>
|
||||||
|
<nut-button icon="refresh" type="warning" @click="去商城逛逛">去商城逛逛</nut-button>
|
||||||
|
</nut-empty>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// 页面功能注释区域
|
||||||
|
import {ref} from "vue";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "tong-yong-com-empty"});
|
||||||
|
let description = ref("默认文字");
|
||||||
|
const 去商城逛逛 = async (): Promise<void> => {
|
||||||
|
wx.vibrateShort({type: "light"});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,165 @@
|
|||||||
|
<style scoped lang="scss">
|
||||||
|
.root-demo {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 36rpx;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
grid-auto-rows: 48rpx;
|
||||||
|
justify-items: center;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: red solid 1px;
|
||||||
|
|
||||||
|
.items-1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
|
.items-text {
|
||||||
|
//width: 112rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-image {
|
||||||
|
height: 44rpx;
|
||||||
|
width: 44rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.theme-white {
|
||||||
|
border: #6e6d6d solid 1px; // 主题是亮色的时候
|
||||||
|
}
|
||||||
|
|
||||||
|
&.theme-dark {
|
||||||
|
border: #b9b9b9 solid 1px; // 主题是暗色的时候
|
||||||
|
}
|
||||||
|
|
||||||
|
&.select-statu {
|
||||||
|
//border: #b9b9b9 solid 1px;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
transition: all 1s;
|
||||||
|
|
||||||
|
:deep(.custom-class-img) {
|
||||||
|
height: 44rpx;
|
||||||
|
width: 44rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.custom-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class=root-demo>
|
||||||
|
<view class="items-1" @click="选择配送方式事件('全国物流')">
|
||||||
|
<view class="items-image"
|
||||||
|
:class="{'theme-white':theme==='light','theme-dark':theme==='dark','select-statu':选中时的状态==='全国物流'}">
|
||||||
|
<wd-img custom-class="custom-class-img" v-if="选中时的状态==='全国物流'" custom-image="custom-image"
|
||||||
|
src="/static/正确.svg">
|
||||||
|
<template #error>
|
||||||
|
<view class="error-wrap">加载失败</view>
|
||||||
|
</template>
|
||||||
|
<template #loading>
|
||||||
|
<view class="loading-wrap">
|
||||||
|
<wd-loading/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-img>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 10rpx"></view>
|
||||||
|
<view class="items-text">全国物流</view>
|
||||||
|
</view>
|
||||||
|
<view class="items-1" @click="选择配送方式事件('跑腿配送')">
|
||||||
|
<view class="items-image"
|
||||||
|
:class="{'theme-white':theme==='light','theme-dark':theme==='dark','select-statu':选中时的状态==='跑腿配送'}">
|
||||||
|
<wd-img custom-class="custom-class-img" v-if="选中时的状态==='跑腿配送'" custom-image="custom-image"
|
||||||
|
src="/static/正确.svg">
|
||||||
|
<template #error>
|
||||||
|
<view class="error-wrap">加载失败</view>
|
||||||
|
</template>
|
||||||
|
<template #loading>
|
||||||
|
<view class="loading-wrap">
|
||||||
|
<wd-loading/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-img>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 10rpx"></view>
|
||||||
|
<view class="items-text">跑腿配送</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="items-1" @click="选择配送方式事件('门店核销')">
|
||||||
|
|
||||||
|
<view class="items-image"
|
||||||
|
:class="{'theme-white':theme==='light','theme-dark':theme==='dark','select-statu':选中时的状态==='门店核销'}">
|
||||||
|
<wd-img custom-class="custom-class-img" v-if="选中时的状态==='门店核销'" custom-image="custom-image"
|
||||||
|
src="/static/正确.svg">
|
||||||
|
<template #error>
|
||||||
|
<view class="error-wrap">加载失败</view>
|
||||||
|
</template>
|
||||||
|
<template #loading>
|
||||||
|
<view class="loading-wrap">
|
||||||
|
<wd-loading/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-img>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 10rpx"></view>
|
||||||
|
<view class="items-text">门店核销</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// 页面功能注释区域
|
||||||
|
import {ref} from "vue";
|
||||||
|
import {useVModels} from "@vueuse/core";
|
||||||
|
|
||||||
|
interface definePropsType {
|
||||||
|
modelValue: number;// 对象类型的 prop
|
||||||
|
}
|
||||||
|
|
||||||
|
type 选中的类型 = "全国物流" | "跑腿配送" | "门店核销"
|
||||||
|
const 选中时的状态 = ref<选中的类型>("全国物流");
|
||||||
|
// 2. 使用 withDefaults 定义默认值
|
||||||
|
const props = withDefaults(defineProps<definePropsType>(), {});
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(eventName: "update:modelValue", value: string): void
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const {modelValue,} = useVModels(props, emit);
|
||||||
|
let theme = ref(uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
// defineOptions({options: {styleIsolation: "shared",}, name: "ExpressDelivery"}); // 组件使用
|
||||||
|
defineOptions({options: {styleIsolation: "shared",}, name: "tong-yong-com-express-delivery"}); // 组件使用
|
||||||
|
const buttonClick = async (): Promise<void> => {
|
||||||
|
console.log("子组件触发的事件");
|
||||||
|
};
|
||||||
|
const 选择配送方式事件 = async (item: "全国物流" | "跑腿配送" | "门店核销"): Promise<void> => {
|
||||||
|
选中时的状态.value = item;
|
||||||
|
wx.vibrateShort({type: "light"});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<style scoped lang="scss">
|
||||||
|
.root-demo {
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class=root-demo>
|
||||||
|
<wd-button type="primary" icon="phone" :block="true"
|
||||||
|
@click="throttledFn" custom-class="custom-shadow">
|
||||||
|
信息按钮
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// 页面功能注释区域
|
||||||
|
import {ref} from "vue";
|
||||||
|
import {useThrottleFn} from "@vueuse/shared";
|
||||||
|
import {usePage, useQuery} from "@uni-helper/uni-use";
|
||||||
|
|
||||||
|
let theme = ref(uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
const {value: userName} = useQuery("name");// 一定需要在生命函数中才获取到值
|
||||||
|
let page_path = usePage().value.route;
|
||||||
|
let reg = new RegExp(/(\d{3})(\d{4})(\d{4})/, "g");// 手机号正则的规则
|
||||||
|
|
||||||
|
const throttledFn = useThrottleFn(async () => {
|
||||||
|
// do something, it will be called at most 1 time per second
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 防抖函数 ", "13382551360".replace(reg, "$1****$3"));
|
||||||
|
}, 10);
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,202 @@
|
|||||||
|
<template>
|
||||||
|
<view class="guochang-container">
|
||||||
|
<!-- 左侧浮动小球 -->
|
||||||
|
<view class="balls balls-left">
|
||||||
|
<view class="ball ball-1"></view>
|
||||||
|
<view class="ball ball-2"></view>
|
||||||
|
<view class="ball ball-3"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 中间祝福语 -->
|
||||||
|
<view class="message-wrapper">
|
||||||
|
<text class="message">{{ 当前祝福语 }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 右侧浮动小球 -->
|
||||||
|
<view class="balls balls-right">
|
||||||
|
<view class="ball ball-4"></view>
|
||||||
|
<view class="ball ball-5"></view>
|
||||||
|
<view class="ball ball-6"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {ref, onMounted, computed, onUnmounted} from "vue";
|
||||||
|
|
||||||
|
const 祝福语列表 = [
|
||||||
|
"愿你生活如糖，甜而不腻 ✨",
|
||||||
|
"心想事成，万事胜意 🌟",
|
||||||
|
"所有美好如期而至 🎈"
|
||||||
|
];
|
||||||
|
|
||||||
|
const 当前索引 = ref(0);
|
||||||
|
const 当前祝福语 = computed(() => 祝福语列表[当前索引.value]);
|
||||||
|
|
||||||
|
let 定时器: ReturnType<typeof setInterval> | null = null;
|
||||||
|
|
||||||
|
const 开始轮播 = () => {
|
||||||
|
定时器 = setInterval(() => {
|
||||||
|
当前索引.value = (当前索引.value + 1) % 祝福语列表.length;
|
||||||
|
}, 3000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const 停止轮播 = () => {
|
||||||
|
if (定时器) {
|
||||||
|
clearInterval(定时器);
|
||||||
|
定时器 = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
开始轮播();
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
停止轮播();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.guochang-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 120rpx;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
margin: 20rpx 30rpx;
|
||||||
|
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
||||||
|
border-radius: 60rpx;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.4),
|
||||||
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
|
||||||
|
|
||||||
|
// 背景微光扫光效果
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 200%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
rgba(255, 255, 255, 0.05),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
animation: shimmer 4s infinite linear;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 小球容器
|
||||||
|
.balls {
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
&.balls-left {
|
||||||
|
left: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.balls-right {
|
||||||
|
right: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 小球基础样式
|
||||||
|
.ball {
|
||||||
|
width: 18rpx;
|
||||||
|
height: 18rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: float 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左侧三个球
|
||||||
|
.ball-1 {
|
||||||
|
background: #FF6B6B;
|
||||||
|
box-shadow: 0 0 12rpx #FF6B6B;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ball-2 {
|
||||||
|
background: #FFD700;
|
||||||
|
box-shadow: 0 0 12rpx #FFD700;
|
||||||
|
animation-delay: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ball-3 {
|
||||||
|
background: #4ECDC4;
|
||||||
|
box-shadow: 0 0 12rpx #4ECDC4;
|
||||||
|
animation-delay: 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右侧三个球
|
||||||
|
.ball-4 {
|
||||||
|
background: #FF9F43;
|
||||||
|
box-shadow: 0 0 12rpx #FF9F43;
|
||||||
|
animation-delay: 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ball-5 {
|
||||||
|
background: #54A0FF;
|
||||||
|
box-shadow: 0 0 12rpx #54A0FF;
|
||||||
|
animation-delay: 0.45s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ball-6 {
|
||||||
|
background: #A29BFE;
|
||||||
|
box-shadow: 0 0 12rpx #A29BFE;
|
||||||
|
animation-delay: 0.75s;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 中间文字容器
|
||||||
|
.message-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 2;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.6),
|
||||||
|
0 0 16rpx rgba(255, 215, 0, 0.3);
|
||||||
|
letter-spacing: 1rpx;
|
||||||
|
background: linear-gradient(90deg, #FFD700, #FFA500);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 动画定义
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-14rpx) scale(1.1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
// 用户信息接口
|
||||||
|
export interface miniUserInfo {
|
||||||
|
unionid: string;
|
||||||
|
/** 用户角色权限 */
|
||||||
|
user_角色权限: string;
|
||||||
|
/** 小程序 openid */
|
||||||
|
mini_openid: string;
|
||||||
|
/** 微信开放平台 openid */
|
||||||
|
wechat_openid: string | null;
|
||||||
|
/** 企业微信 openid */
|
||||||
|
wecom_openid: string | null;
|
||||||
|
/** 外部用户 ID */
|
||||||
|
external_userid: string | null;
|
||||||
|
/** 用户手机号码 */
|
||||||
|
uesr_手机号码: string | null;
|
||||||
|
/** 用户昵称 */
|
||||||
|
user_昵称: string;
|
||||||
|
/** 用户头像 URL */
|
||||||
|
user_头像: string;
|
||||||
|
/** 用户当前等级 */
|
||||||
|
user_用户当前的等级: number;
|
||||||
|
/** 配置 ID */
|
||||||
|
codeConfigId: string;
|
||||||
|
/** 二维码 URL */
|
||||||
|
codeQrCode: string;
|
||||||
|
/** 备注信息 */
|
||||||
|
codeRemark: string;
|
||||||
|
/** 上级/父级 */
|
||||||
|
parent: string;
|
||||||
|
/** 添加时间 */
|
||||||
|
add_time: string | null;
|
||||||
|
user_省份: string | null;
|
||||||
|
user_城市: string | null;
|
||||||
|
user_区县: string | null;
|
||||||
|
user_街道信息: string | null;
|
||||||
|
user_IP地址: string | null;
|
||||||
|
user_绑定用工关系: "用工关系已绑定" | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户所获取的积分,类型的定义
|
||||||
|
export type ShareData类型 = {
|
||||||
|
share分享者unionid: string;
|
||||||
|
share总积分: number;
|
||||||
|
share可提现积分: number;
|
||||||
|
share不可提现积分: number;
|
||||||
|
share已提现积分: number;
|
||||||
|
share点击次数: number
|
||||||
|
};
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
// hooks/useGlobalSocket.js
|
||||||
|
import {useSocket, type UseSocketReturn} from "@uni-helper/uni-use";
|
||||||
|
|
||||||
|
// 模块级变量，保证只 init 一次
|
||||||
|
let _instance: UseSocketReturn<any> | null = null;
|
||||||
|
import mitt from "mitt";
|
||||||
|
|
||||||
|
// 中央 Schema：事件名 -> payload 类型
|
||||||
|
type 消息类型 = "socket-message" | "socket-close" | "socket-open" | "socket" | "监听心跳" | "update_更新用户头像";
|
||||||
|
|
||||||
|
type Events = {
|
||||||
|
"socket-message": { type: 消息类型; text: string }
|
||||||
|
"socket-close": { code: string; reason?: string }
|
||||||
|
"user:login": { userId: string; timestamp: number }
|
||||||
|
"system:ready": undefined // 无 payload 的事件
|
||||||
|
// '*' 是通配符，能监听到所有事件
|
||||||
|
}
|
||||||
|
|
||||||
|
export const emitter = mitt<Events>();
|
||||||
|
|
||||||
|
|
||||||
|
// 缓存不同 URL 的 socket 实例
|
||||||
|
const socketInstances = new Map<string, UseSocketReturn<any>>();
|
||||||
|
|
||||||
|
export function useGlobalSocket(wsRef: string): UseSocketReturn<any> {
|
||||||
|
// 如果已有该 URL 的实例，直接复用
|
||||||
|
if (socketInstances.has(wsRef)) {
|
||||||
|
console.log("socket 连接的对象已经存在了啦 🚩 🚩 🚩 🚩 🚩 🚩 🚩 🚩 🚩 🚩 🚩 🚩 🚩 🚩 🚩");
|
||||||
|
return socketInstances.get(wsRef)!;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建新实例
|
||||||
|
const socket = useSocket(wsRef, {
|
||||||
|
onConnected(ws) {
|
||||||
|
console.log(`[${wsRef}] 连接成功`);
|
||||||
|
},
|
||||||
|
onError(ws, event) {
|
||||||
|
console.error(`[${wsRef}] Error:`, event);
|
||||||
|
},
|
||||||
|
onMessage(ws, event) {
|
||||||
|
// 全局消息派发
|
||||||
|
emitter.emit("socket-message", JSON.parse(event.data));
|
||||||
|
if (JSON.parse(event.data).type === "chat_msg") {
|
||||||
|
console.log("=================");
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClosed(ws, event) {
|
||||||
|
console.log(`[${wsRef}] 连接被关闭`, event, ws);
|
||||||
|
},
|
||||||
|
heartbeat: {message: "ping", interval: 3000},
|
||||||
|
autoReconnect: {
|
||||||
|
retries: 5,
|
||||||
|
delay: 2000,
|
||||||
|
onFailed: () => {
|
||||||
|
console.log(`[${wsRef}] WebSocket 重连失败`);
|
||||||
|
// 重连彻底失败，从缓存中移除实例
|
||||||
|
socketInstances.delete(wsRef);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 存入缓存
|
||||||
|
socketInstances.set(wsRef, socket);
|
||||||
|
return socket;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 可选：清除缓存中的实例，用于手动断开或页面卸载时释放资源
|
||||||
|
* @param wsRef 如果不传，则清除所有缓存
|
||||||
|
*/
|
||||||
|
export function clearGlobalSocket(wsRef?: string) {
|
||||||
|
if (wsRef) {
|
||||||
|
socketInstances.delete(wsRef);
|
||||||
|
} else {
|
||||||
|
socketInstances.clear();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
const socked = useGlobalSocket("ws://127.0.0.1:8000/web/xiaozizi/");
|
||||||
|
emitter.on("socket-message", (msg) => {
|
||||||
|
console.log("===========", msg);
|
||||||
|
});
|
||||||
|
* */
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
export interface Send发放优惠类回调类型 {
|
||||||
|
type: string;
|
||||||
|
timeStamp: number;
|
||||||
|
target: {
|
||||||
|
id: string;
|
||||||
|
dataset: Record<string, any>;
|
||||||
|
errcode: string;
|
||||||
|
msg: string;
|
||||||
|
send_coupon_result: Array<{
|
||||||
|
code: string;
|
||||||
|
coupon_code: string;
|
||||||
|
coupon_name: string;
|
||||||
|
discount: string;
|
||||||
|
end_time: string;
|
||||||
|
logo: string;
|
||||||
|
mch_simple_name: string;
|
||||||
|
message: string;
|
||||||
|
out_request_no: string;
|
||||||
|
stock_id: string;
|
||||||
|
use_condition: string;
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
currentTarget: {
|
||||||
|
id: string;
|
||||||
|
dataset: Record<string, any>;
|
||||||
|
};
|
||||||
|
mark: Record<string, any>;
|
||||||
|
detail: {
|
||||||
|
errcode: string;
|
||||||
|
msg: string;
|
||||||
|
send_coupon_result: Array<{
|
||||||
|
code: string;
|
||||||
|
coupon_code: string;
|
||||||
|
coupon_name: string;
|
||||||
|
discount: string;
|
||||||
|
end_time: string;
|
||||||
|
logo: string;
|
||||||
|
mch_simple_name: string;
|
||||||
|
message: string;
|
||||||
|
out_request_no: string;
|
||||||
|
stock_id: string;
|
||||||
|
use_condition: string;
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
touches: undefined;
|
||||||
|
changedTouches: undefined;
|
||||||
|
mut: boolean;
|
||||||
|
_requireActive: undefined;
|
||||||
|
preventDefault: Function;
|
||||||
|
stopPropagation: Function;
|
||||||
|
stopImmediatePropagation: Function;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface 发券接口返回数据类型 {
|
||||||
|
send_coupon_params: any; // 传给插件的参数串
|
||||||
|
sign: string; // 签名
|
||||||
|
send_coupon_merchant: string; // 商户号
|
||||||
|
suggest_immediate_use: boolean; // 是否建议立即使用
|
||||||
|
}
|
||||||
|
|
||||||
|
export type 代金券数据类型 = {
|
||||||
|
stock领券数据: 发券接口返回数据类型,
|
||||||
|
stock券状态: "待领券" | "已领券" | "发放中"
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
// 定义一个ts的用户地址数据类型
|
||||||
|
|
||||||
|
// 定义地址信息的TS类型
|
||||||
|
export interface typeAddressInfo {
|
||||||
|
errMsg: string;
|
||||||
|
cityName: string;
|
||||||
|
userName: string;
|
||||||
|
telNumber: string;
|
||||||
|
countyName: string;
|
||||||
|
detailInfo: string;
|
||||||
|
postalCode: string;
|
||||||
|
nationalCode: string;
|
||||||
|
provinceName: string;
|
||||||
|
self_mini_openid: string;
|
||||||
|
self_user_unionid: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface typeAddressData {
|
||||||
|
id_主键_配送地址: string; // 实际上是UUID类型，在TS中用string表示
|
||||||
|
id_str: string;
|
||||||
|
address: typeAddressInfo;
|
||||||
|
// key_weiuser: string;
|
||||||
|
isDefaultAddress: "是默认地址" | "不是默认地址";
|
||||||
|
mini_unionid: string;
|
||||||
|
mini_openid: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type typeAddressDataList = Array<typeAddressData>
|
||||||
|
// 示例数据
|
||||||
@@ -0,0 +1,161 @@
|
|||||||
|
// 订单商品规格类型
|
||||||
|
type Goods商品规格 = {
|
||||||
|
idKey?: string;
|
||||||
|
价格?: number;
|
||||||
|
会员价?: number;
|
||||||
|
净利润?: number;
|
||||||
|
成本价?: number;
|
||||||
|
订单数量?: number;
|
||||||
|
销售规格?: string;
|
||||||
|
订单总金额?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 订单商品数据类型
|
||||||
|
type Order购物车商品数据 = {
|
||||||
|
idKey?: string;
|
||||||
|
goods商品规格?: Goods商品规格;
|
||||||
|
goods商品订单总价?: number;
|
||||||
|
goods商品订单数量?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 支付数据类型
|
||||||
|
type Order支付数据 = {
|
||||||
|
appid?: string;
|
||||||
|
mchid?: string;
|
||||||
|
payer?: {
|
||||||
|
openid?: string;
|
||||||
|
};
|
||||||
|
amount?: {
|
||||||
|
total?: number;
|
||||||
|
currency?: string;
|
||||||
|
};
|
||||||
|
attach?: string;
|
||||||
|
notify_url?: string;
|
||||||
|
description?: string;
|
||||||
|
out_trade_no?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 用户配送地址类型
|
||||||
|
type Order用户配送地址 = {
|
||||||
|
id_str?: string;
|
||||||
|
address?: {
|
||||||
|
errMsg?: string;
|
||||||
|
cityName?: string;
|
||||||
|
userName?: string;
|
||||||
|
telNumber?: string;
|
||||||
|
countyName?: string;
|
||||||
|
detailInfo?: string;
|
||||||
|
postalCode?: string;
|
||||||
|
streetName?: string;
|
||||||
|
nationalCode?: string;
|
||||||
|
provinceName?: string;
|
||||||
|
detailInfoNew?: string;
|
||||||
|
nationalCodeFull?: string;
|
||||||
|
self_mini_openid?: string;
|
||||||
|
self_user_unionid?: string;
|
||||||
|
};
|
||||||
|
key_weiuser?: string;
|
||||||
|
isDefaultAddress?: string;
|
||||||
|
id_主键_配送地址?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 商品信息类型
|
||||||
|
type Order商品信息 = {
|
||||||
|
净重?: string;
|
||||||
|
品牌?: string;
|
||||||
|
洁净?: string;
|
||||||
|
除菌?: string;
|
||||||
|
香型?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 商品详情图片类型
|
||||||
|
type Order商品详情图片 = {
|
||||||
|
主图?: string[];
|
||||||
|
详情图?: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
// 商品销售规格类型
|
||||||
|
type Order商品销售规格 = {
|
||||||
|
价格?: number;
|
||||||
|
会员价?: number;
|
||||||
|
净利润?: number;
|
||||||
|
成本价?: number;
|
||||||
|
销售规格?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分享积分类型
|
||||||
|
type Order分享积分 = {
|
||||||
|
推广员?: number;
|
||||||
|
企微用户?: number;
|
||||||
|
普通会员?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 商品列表项类型
|
||||||
|
type 商品列表项 = {
|
||||||
|
order订单商品数_id?: string;
|
||||||
|
order_id_str?: string;
|
||||||
|
order_id商品?: string;
|
||||||
|
order_订单数量?: number;
|
||||||
|
order订单总金额?: number;
|
||||||
|
order_商品品牌?: string;
|
||||||
|
order_商品标题?: string;
|
||||||
|
order_商品信息?: Order商品信息;
|
||||||
|
order_商品标签?: string[];
|
||||||
|
order_商品详情图片?: Order商品详情图片;
|
||||||
|
order_商品销售规格?: Order商品销售规格;
|
||||||
|
order_商品销售场景?: string;
|
||||||
|
order_分享积分?: Order分享积分;
|
||||||
|
order_商品搜索标签?: string | null;
|
||||||
|
order_商家推荐标签?: string | null;
|
||||||
|
order_其它参数?: any;
|
||||||
|
wai_订单?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export type Order物流物流子元素类型 = Array<{
|
||||||
|
action_msg: string
|
||||||
|
action_time: number
|
||||||
|
action_type: number
|
||||||
|
}>
|
||||||
|
// 订单物流数据类型
|
||||||
|
export type Order物流数据类型 = {
|
||||||
|
openid: string
|
||||||
|
waybill_id: string
|
||||||
|
delivery_id: string
|
||||||
|
path_item_num: number
|
||||||
|
path_item_list: Array<{
|
||||||
|
action_msg: string
|
||||||
|
action_time: number
|
||||||
|
action_type: number
|
||||||
|
}>
|
||||||
|
};
|
||||||
|
|
||||||
|
// 完整的订单类型
|
||||||
|
export type Order订单 = {
|
||||||
|
id_主键_order订单?: string;
|
||||||
|
id_str?: string;
|
||||||
|
order支付订单号?: string;
|
||||||
|
order支付微信官方订单号?: string;
|
||||||
|
order支付者openid?: string;
|
||||||
|
order支付者unionid?: string;
|
||||||
|
order分享者unionid?: string;
|
||||||
|
wai外键lucky拼团表?: string | null;
|
||||||
|
order购物车商品数据?: Order购物车商品数据[];
|
||||||
|
order购物车商品总价?: number;
|
||||||
|
order购物车商品数量?: number;
|
||||||
|
order支付数据?: Order支付数据;
|
||||||
|
order支付状态?: "待发货" | "待收货" | "待评价";
|
||||||
|
order用户配送地址?: Order用户配送地址;
|
||||||
|
order物流状态?: "待发货" | "待收货" | "待评价" | "揽件阶段-揽件成功" | "揽件阶段-揽件失败" | "揽件阶段-分配业务员" | "运输阶段-更新运输轨迹" | "派送阶段-开始派送" | "派送阶段-签收成功" | "派送阶段-签收失败" | "异常阶段-订单取消" | "异常阶段-订单滞留";
|
||||||
|
order物流订单号?: string | null;
|
||||||
|
order物流数据?: Order物流数据类型;
|
||||||
|
order订单类型?: string;
|
||||||
|
order物流公司订单编号?: string | null;
|
||||||
|
dateAndTime: Date;
|
||||||
|
updateTime: Date;
|
||||||
|
商品列表?: 商品列表项[];
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// 如果需要数组类型
|
||||||
|
export type Order订单列表类型 = Order订单[];
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
export const 用户_登陆 = "https://wechat.sixgou.com/mini/mini_login/";
|
||||||
|
export const wss_uri = "wss://wechat.sixgou.com/room/";
|
||||||
|
|
||||||
|
export const 地址_添加新地址 = "https://wechat.sixgou.com/address/delivery/add/";
|
||||||
|
export const 地址_首次添加新地址 = "https://wechat.sixgou.com/address/delivery/first_add/";
|
||||||
|
export const 地址_删除当前地址 = "https://wechat.sixgou.com/address/delivery/delete/";
|
||||||
|
export const 地址_更新地址 = "https://wechat.sixgou.com/address/delivery/update/";
|
||||||
|
export const 地址_查询全部地址 = "https://wechat.sixgou.com/address/delivery/query_all/";
|
||||||
|
export const 地址_删除全部地址 = "https://wechat.sixgou.com/address/delivery/all_delete/";
|
||||||
|
export const 地址_IP转地址 = "https://wechat.sixgou.com/address/map/ip/"; // 将用户的IP地址转换为
|
||||||
|
export const 地址_设置当前地址为默认配送地址 = "https://wechat.sixgou.com/address/delivery/change_default/";
|
||||||
|
|
||||||
|
|
||||||
|
export const 商品_查询所有的商品 = "https://wechat.sixgou.com/goods/query/"; // 查询数据中所有的商品,用于在商城页面展示
|
||||||
|
export const 商品_赢免单商品数据 = "https://wechat.sixgou.com/goods/赢免单商品/";
|
||||||
|
|
||||||
|
export const 商城详情页_下单支付 = "https://wechat.sixgou.com/six/mall/";
|
||||||
|
|
||||||
|
|
||||||
|
// 订单相关接口
|
||||||
|
export const 订单_查询所有的订单 = "https://wechat.sixgou.com/order/query/";
|
||||||
|
|
||||||
|
|
||||||
|
// 获取用户定位的后的请求
|
||||||
|
export const 定位_请求存储 = "https://wechat.sixgou.com/address/map/locating/";
|
||||||
|
|
||||||
|
|
||||||
|
// 分享相关的接口
|
||||||
|
export const 分享_HOME页面分享到群或者好友 = "https://wechat.sixgou.com/share/home_page/onShareAppMessage/";
|
||||||
|
export const 分享_HOME页面分享到朋友圈 = "https://wechat.sixgou.com/share/home_page/onShareTimeline/";
|
||||||
|
export const 分享_商品详情页面群或者好友 = "https://wechat.sixgou.com/share/goods_page/goods_detaile/";
|
||||||
|
export const 分享_商品详情页面分享到朋友圈 = "https://wechat.sixgou.com/share/goods_page/timeline_goods_detaile/";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 用户评价接口: 更新用户待评价的状态
|
||||||
|
export const 用户_评价接口更新待评价状态 = "https://wechat.sixgou.com/wechat_mini/用户评价/用户发起评价/";
|
||||||
|
|
||||||
|
|
||||||
|
// 物流: 相关的管理接口
|
||||||
|
export const 物流_实时更物流数据 = "https://wechat.sixgou.com/wechat_mini/更新物流/实时更新物流数据/"; //物流追踪页面,左上角刷新的按钮
|
||||||
|
|
||||||
|
|
||||||
|
// 积分管理的相关接口
|
||||||
|
export const 积分_每日签到奖励 = "https://wechat.sixgou.com/wechat_mini/添加积分接口/添加每日签到奖励/";
|
||||||
|
export const 积分_添加通知好友积分 = "https://wechat.sixgou.com/wechat_mini/添加积分接口/通知好友积分添加/";
|
||||||
|
export const 积分_添加好物推荐积分 = "https://wechat.sixgou.com/wechat_mini/添加积分接口/添加好物推荐积分/";
|
||||||
|
export const 积分_添加小程序分享积分 = "https://wechat.sixgou.com/wechat_mini/添加积分接口/添加小程序分享积分/";
|
||||||
|
export const 积分_统计查询 = "https://wechat.sixgou.com/wechat_mini/积分查询/统计积分查询/";
|
||||||
|
export const 积分_当前用户积分列表详情数据 = "https://wechat.sixgou.com/wechat_mini/积分查询/查询当前用户积列详情列表数据/";
|
||||||
|
export const 积分_发起提现 = "https://wechat.sixgou.com/wechat_mini/积分提现/发起提现/";
|
||||||
|
|
||||||
|
|
||||||
|
// 用工关系
|
||||||
|
export const 用工关系_用户提交绑定成功后更新数据 = "https://wechat.sixgou.com/wechat_mini/用工关系/绑定用工关系/";
|
||||||
|
export const 用工关系_更新用工关系绑定关系数据 = "https://wechat.sixgou.com/wechat_mini/用工关系/更新用工关系/";
|
||||||
|
|
||||||
|
|
||||||
|
// 卡券: 前端用户领券时
|
||||||
|
export const 卡券_领券 = "https://wechat.sixgou.com/wechat_mini/优惠券/生成优惠券/";
|
||||||
|
export const 卡券_领券后更新当前券的状态 = "https://wechat.sixgou.com/wechat_mini/优惠券/领券后更新当前券的状态/";
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
const updateManager = wx.getUpdateManager();
|
||||||
|
|
||||||
|
updateManager.onCheckForUpdate(function (res) {
|
||||||
|
// 请求完新版本信息的回调
|
||||||
|
console.log(res.hasUpdate);
|
||||||
|
});
|
||||||
|
|
||||||
|
updateManager.onUpdateReady(function () {
|
||||||
|
wx.showModal({
|
||||||
|
title: "更新提示",
|
||||||
|
content: "新版本已经准备好，是否重启应用？",
|
||||||
|
success: function (res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
|
||||||
|
updateManager.applyUpdate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
updateManager.onUpdateFailed(function () {
|
||||||
|
// 新版本下载失败
|
||||||
|
});
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
// UUID 类型（Python 的 UUID 对应 TypeScript 的 string）
|
||||||
|
type UUID = string
|
||||||
|
|
||||||
|
// datetime 类型（Python 的 datetime 对应 TypeScript 的 Date 或 string）
|
||||||
|
type DateTime = Date | string
|
||||||
|
|
||||||
|
// 分享记录类型
|
||||||
|
export interface ShareRecord子元素类型 {
|
||||||
|
id_主键: UUID;
|
||||||
|
id_str: string;
|
||||||
|
share分享者unionid: string;
|
||||||
|
share分享者openid: string | null;
|
||||||
|
share分享者头像: string;
|
||||||
|
share分享类型: any | null;
|
||||||
|
share分享者昵称: string | null;
|
||||||
|
share点击者头像: string;
|
||||||
|
share分享者积分值: number;
|
||||||
|
share点击者unionid: string;
|
||||||
|
share点击者openid: string;
|
||||||
|
share点击者昵称: string;
|
||||||
|
share日期: DateTime | null;
|
||||||
|
share积分是否可以提现的状态: "可提现" | "不可提现" | "已提现";
|
||||||
|
share日期时间: DateTime | null;
|
||||||
|
dateAndTime: DateTime;
|
||||||
|
updateTime: DateTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分享记录列表类型
|
||||||
|
export type ShareRecordList积分列表类型 = ShareRecord子元素类型[]
|
||||||
@@ -0,0 +1,117 @@
|
|||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import {useRequest} from "@uni-helper/uni-use";
|
||||||
|
import {定位_请求存储} from "@/hooks/接口API";
|
||||||
|
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
|
||||||
|
export class get获取用户当前位置信息 {
|
||||||
|
private mini_openid: string;
|
||||||
|
private mini_unionid: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 核心入口：获取用户定位
|
||||||
|
* 对应原函数：获取用户定位
|
||||||
|
*/
|
||||||
|
constructor(mini_openid: string, mini_unionid: string) {
|
||||||
|
this.mini_openid = mini_openid;
|
||||||
|
this.mini_unionid = mini_unionid;
|
||||||
|
}
|
||||||
|
|
||||||
|
async getUserLocation(): Promise<void> {
|
||||||
|
try {
|
||||||
|
// 1. 检查当前授权状态
|
||||||
|
const getSettingResult = await wx.getSetting();
|
||||||
|
const authStatus = getSettingResult.authSetting["scope.userLocation"];
|
||||||
|
|
||||||
|
if (authStatus === undefined) {
|
||||||
|
// 情况 A：从未询问过授权 -> 直接尝试获取（会触发系统原生弹窗）
|
||||||
|
console.log("情况 A：从未询问过授权，直接获取位置");
|
||||||
|
await this.调用微信拿到用户位置的接口();
|
||||||
|
} else if (authStatus) {
|
||||||
|
// 情况 B：用户已授权 -> 直接获取
|
||||||
|
console.log("情况 B：用户已授权，直接获取位置");
|
||||||
|
await this.调用微信拿到用户位置的接口();
|
||||||
|
} else {
|
||||||
|
// 情况 C：用户之前已拒绝 (false) -> 引导去设置页
|
||||||
|
console.log("情况 C：用户之前已拒绝，引导手动开启");
|
||||||
|
await this.引导用户打开设置并同意();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("定位流程整体出错:", error);
|
||||||
|
// 兜底策略：任何未知错误都引导去设置页
|
||||||
|
await this.引导用户打开设置并同意();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行具体的位置获取和 API 上报
|
||||||
|
* 对应原函数：获取位置信息
|
||||||
|
*/
|
||||||
|
private async 调用微信拿到用户位置的接口(): Promise<void> {
|
||||||
|
try {
|
||||||
|
// 调用微信原生接口获取位置
|
||||||
|
const locationResult = await wx.getLocation({
|
||||||
|
type: "wgs84",
|
||||||
|
altitude: false,
|
||||||
|
geocode: true,
|
||||||
|
});
|
||||||
|
let data = await useRequest(定位_请求存储, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid,
|
||||||
|
self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
result: locationResult,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log("拿到当前用户的位置信息数据了", locationResult);
|
||||||
|
} catch (error) {
|
||||||
|
console.log("捕获错误❌：这是首次时，不允许授权时的报错♀️", error);
|
||||||
|
// 如果获取位置失败（通常是因为权限被拒），递归调用引导函数
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 引导用户去设置页开启权限
|
||||||
|
* 对应原函数：引导用户去设置页开启权限
|
||||||
|
*/
|
||||||
|
private async 引导用户打开设置并同意(): Promise<void> {
|
||||||
|
try {
|
||||||
|
// 1. 弹出自定义确认框（提示海陵区限制）
|
||||||
|
|
||||||
|
wx.showModal({
|
||||||
|
title: "温馨提示", // 标题
|
||||||
|
content: "待解锁积分,是服务同城用户时才可以使用", // 提示的内容
|
||||||
|
confirmText: "允许授权", // 确认按钮的文字
|
||||||
|
cancelText: "暂不授权", // 取消按钮的文字
|
||||||
|
confirmColor: "#ab2411", // 确认按钮的文字颜色
|
||||||
|
success: (modalRes) => {
|
||||||
|
if (modalRes.confirm) {
|
||||||
|
// 重新调绑定（必须在用户点击事件里）
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 点击了确认 ",);
|
||||||
|
wx.openSetting({
|
||||||
|
success: (result) => {
|
||||||
|
console.log(result);
|
||||||
|
if (result.authSetting["scope.userLocation"] === true) {
|
||||||
|
this.调用微信拿到用户位置的接口();
|
||||||
|
}
|
||||||
|
if (result.authSetting["scope.userLocation"] === false) {
|
||||||
|
console.log("拒绝授权了");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (modalRes.cancel) {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 点击了取消按钮 ",);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.log("捕获错误❌：这里没有同意时的报错提示️", error);
|
||||||
|
// 可选：在这里也可以再次尝试引导，或者给出一个最终的 Toast 提示
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出单例或供外部实例化
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import {createUniAppAxiosAdapter} from "@uni-helper/axios-adapter";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export const instance = axios.create({adapter: createUniAppAxiosAdapter(), baseURL: "https://six.sixgou.com/"});
|
||||||
|
|
||||||
+15
@@ -0,0 +1,15 @@
|
|||||||
|
import {createSSRApp} from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import {createPinia} from "pinia";
|
||||||
|
import {persistedState} from "@/stores/piniaPro";
|
||||||
|
|
||||||
|
const pinia = createPinia();
|
||||||
|
pinia.use(persistedState);
|
||||||
|
|
||||||
|
export function createApp() {
|
||||||
|
const app = createSSRApp(App);
|
||||||
|
app.use(pinia);
|
||||||
|
return {
|
||||||
|
app,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
{
|
||||||
|
"name": "",
|
||||||
|
"appid": "",
|
||||||
|
"description": "",
|
||||||
|
"versionName": "1.0.0",
|
||||||
|
"versionCode": "100",
|
||||||
|
"transformPx": false,
|
||||||
|
"uniStatistics": {
|
||||||
|
"enable": false
|
||||||
|
},
|
||||||
|
"app-plus": {
|
||||||
|
"usingComponents": true,
|
||||||
|
"nvueStyleCompiler": "uni-app",
|
||||||
|
"compilerVersion": 3,
|
||||||
|
"splashscreen": {
|
||||||
|
"alwaysShowBeforeRender": true,
|
||||||
|
"waiting": true,
|
||||||
|
"autoclose": true,
|
||||||
|
"delay": 0
|
||||||
|
},
|
||||||
|
"modules": {},
|
||||||
|
"distribute": {
|
||||||
|
"android": {
|
||||||
|
"permissions": [
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||||
|
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||||
|
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ios": {},
|
||||||
|
"sdkConfigs": {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"h5": {
|
||||||
|
"darkmode": true,
|
||||||
|
"themeLocation": "theme.json"
|
||||||
|
},
|
||||||
|
"quickapp": {},
|
||||||
|
"mp-alipay": {
|
||||||
|
"usingComponents": true
|
||||||
|
},
|
||||||
|
"mp-baidu": {
|
||||||
|
"usingComponents": true
|
||||||
|
},
|
||||||
|
"mp-toutiao": {
|
||||||
|
"usingComponents": true
|
||||||
|
},
|
||||||
|
"vueVersion": "3",
|
||||||
|
"mp-weixin": {
|
||||||
|
"appid": "wxf612e825377328f0",
|
||||||
|
"usingComponents": true,
|
||||||
|
"plugins": {
|
||||||
|
"sendCoupon": {
|
||||||
|
"provider": "wxf3f436ba9bd4be7b",
|
||||||
|
"version": "latest"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"setting": {
|
||||||
|
"urlCheck": false,
|
||||||
|
"condition": false,
|
||||||
|
"minifyWXML": true,
|
||||||
|
"minifyWXSS": true,
|
||||||
|
"enhance": false,
|
||||||
|
"ignoreDevUnusedFiles": true,
|
||||||
|
"minified": true,
|
||||||
|
"postcss": true,
|
||||||
|
"uglifyFileName": true,
|
||||||
|
"bigPackageSizeSupport": true,
|
||||||
|
"skylineRenderEnable": true,
|
||||||
|
"compileHotReLoad": true,
|
||||||
|
"es7": true
|
||||||
|
},
|
||||||
|
"lazyCodeLoading": "requiredComponents",
|
||||||
|
"permission": {
|
||||||
|
"scope.userLocation": {
|
||||||
|
"desc": "你的位置信息将用于小程序位置接口的效果展示"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"requiredPrivateInfos": [
|
||||||
|
"chooseAddress",
|
||||||
|
"getLocation"
|
||||||
|
],
|
||||||
|
"optimization": {
|
||||||
|
"subPackages": true
|
||||||
|
},
|
||||||
|
"darkmode": true,
|
||||||
|
"themeLocation": "theme.json",
|
||||||
|
"requiredBackgroundModes": [
|
||||||
|
"audio",
|
||||||
|
"location"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,305 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
//@import "@/assets/demo.scss";
|
||||||
|
$defaultTopHeight: 1px; // 滚动区域外 可以预留的高度
|
||||||
|
$xiaoBottomHeigh: 1px; // 滚动区域外,可以预留的高度
|
||||||
|
/* 浅色模式 */
|
||||||
|
//@media (prefers-color-scheme: light) {
|
||||||
|
// .phone-screen {
|
||||||
|
// color: whitegh;
|
||||||
|
// background: #181818;
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
///* 深色模式 */
|
||||||
|
//@media (prefers-color-scheme: dark) {
|
||||||
|
// .phone-screen {
|
||||||
|
// color: white;
|
||||||
|
// background: #1a1a1a;
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin line-color {
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0%, 100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
animation: gradientFlow 5s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-screen {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "xiaoFont", sans-serif;
|
||||||
|
height: v-bind(pxScreenHeight);
|
||||||
|
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||||||
|
background-size: 750rpx;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-container {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(pxWindowHeight);
|
||||||
|
|
||||||
|
.status-wifi-nav {
|
||||||
|
/*状态栏的高度 这里的值不能动*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(statusHeight);
|
||||||
|
|
||||||
|
:deep(.default-view-slot) {
|
||||||
|
line-height: v-bind(meunHeight);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: v-bind(meunHeight);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.default-view-slot-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||||||
|
border-radius: calc(v-bind(meunHeight) / 2);
|
||||||
|
|
||||||
|
.title-imgimage_item {
|
||||||
|
width: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
height: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right-text {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scrollTopHeigh {
|
||||||
|
/*在滚动区域内的, 可以自定义的高度*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: $defaultTopHeight;
|
||||||
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scrollViewHeigh {
|
||||||
|
/*滚动页面区域范围*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1rem;
|
||||||
|
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
/*button按钮的 阴影样式可以直接使用*/
|
||||||
|
.custom-class-button {
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollBottomHeigh {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: $xiaoBottomHeigh;
|
||||||
|
@include line-color();
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-is-show {
|
||||||
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="phone-screen">
|
||||||
|
<wd-config-provider :theme="theme">
|
||||||
|
<view class="root-container">
|
||||||
|
<view class="status-wifi-nav">
|
||||||
|
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||||||
|
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||||||
|
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||||||
|
@homeRight="homeRight">
|
||||||
|
<template v-slot:default>
|
||||||
|
<view class="default-view-slot" @click="defaultSearchChange">
|
||||||
|
<view class="default-view-slot-left"></view>
|
||||||
|
<view class="default-view-slot-right">
|
||||||
|
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||||||
|
src="https://hudie.xiao.band/search.png" webp/>
|
||||||
|
<view class="default-view-slot-right-text">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 30rpx"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</ChildComScroll>
|
||||||
|
</view>
|
||||||
|
<!--分隔线,上面的是子组件-->
|
||||||
|
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
|
||||||
|
<!-- 滚动区域开始-->
|
||||||
|
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
|
||||||
|
class="scrollViewHeigh">
|
||||||
|
<view class="page">
|
||||||
|
<view class="line-widht-number" style="height: 5rpx"></view>
|
||||||
|
<home-com-title></home-com-title>
|
||||||
|
<view class="line-widht-number" style="height: 15rpx"></view>
|
||||||
|
<home-com-chao-hua-shuai></home-com-chao-hua-shuai>
|
||||||
|
<view class="line-widht-number" style="height: 20rpx"></view>
|
||||||
|
<home-com-hong-meng></home-com-hong-meng>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!--滚动区域结束-->
|
||||||
|
<view class="scrollBottomHeigh"><!--底部预留区域--></view>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</wd-config-provider>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||||||
|
import {ref} from "vue";
|
||||||
|
import type {ApiAxiosResponse, GlobelsChildPropsType} from "@/types/通用类型";
|
||||||
|
import {onLoad, onShareAppMessage, onShareTimeline, onTabItemTap} from "@dcloudio/uni-app";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import HomeComTitle from "@/pageTabBar/Home/home-com-title.vue";
|
||||||
|
import HomeComChaoHuaShuai from "@/pageTabBar/Home/home-com-chao-hua-shuai.vue";
|
||||||
|
import {usePage, useRequest} from "@uni-helper/uni-use";
|
||||||
|
import {分享_HOME页面分享到朋友圈, 分享_HOME页面分享到群或者好友} from "@/hooks/接口API";
|
||||||
|
import HomeComHongMeng from "@/pageTabBar/Home/home-com-hong-meng.vue";
|
||||||
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
|
||||||
|
let pxScreenHeight = ref(); // 手机高度
|
||||||
|
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||||||
|
let pxScrollHeight = ref(); // 滚动区域高度
|
||||||
|
let statusHeight = ref(); // 固定的顶部
|
||||||
|
let meunHeight = ref();//插槽时要用的 高度
|
||||||
|
const modelValue: GlobelsChildPropsType = {
|
||||||
|
isShowLeft: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
|
||||||
|
iconTextLeft: {classPrefix: "wd-icon", name: "app", size: 20},
|
||||||
|
},
|
||||||
|
isShowRight: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
|
||||||
|
iconTextRight: {classPrefix: "wd-icon", name: "app1", size: 20},
|
||||||
|
},
|
||||||
|
title_text: "六果泡泡", navIsShow: "default",
|
||||||
|
};
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
const homeLeft = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
};
|
||||||
|
const homeRight = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
};
|
||||||
|
let defaultSearchChange = async () => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light };
|
||||||
|
};
|
||||||
|
onLoad(() => {
|
||||||
|
let page_path = usePage().value.route;
|
||||||
|
uni.showShareMenu({
|
||||||
|
withShareTicket: true,
|
||||||
|
menus: ["shareAppMessage", "shareTimeline"], // 关键！明确启用哪些功能 "shareTimeline"
|
||||||
|
});
|
||||||
|
|
||||||
|
onShareAppMessage((options: Page.ShareAppMessageOption) => {
|
||||||
|
return {
|
||||||
|
title: "群分享主题",
|
||||||
|
path: page_path,
|
||||||
|
desc: "描述",
|
||||||
|
imageUrl: "https://oss.xiao.band/backhome.png",
|
||||||
|
promise: new Promise<Page.CustomShareContent>(async (resolve) => {
|
||||||
|
try {
|
||||||
|
let dataPostData = await useRequest<ApiAxiosResponse<Array<string>, Page.CustomShareContent>>(分享_HOME页面分享到群或者好友, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
page_path: page_path,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
resolve(dataPostData.data.value?.resData.dictData ?? {});
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
onShareTimeline(() => {
|
||||||
|
return {
|
||||||
|
title: "朋友圈分享测试", //自定义标题，即朋友圈列表页上显示的标题默认值为小程序的名称
|
||||||
|
imageUrl: "https://oss.xiao.band/backhome.png",//imageUrl:自定义图片路径，可以是本地文件或者网络图片
|
||||||
|
query: "superior_unionid=shareTimeline",
|
||||||
|
path: page_path,
|
||||||
|
promise: new Promise<Page.ShareTimelineContent>(async (resolve,) => {
|
||||||
|
try {
|
||||||
|
let dataPostData = await useRequest<ApiAxiosResponse<Array<string>, Page.CustomShareContent>>(分享_HOME页面分享到朋友圈, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
page_path: page_path,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
resolve(dataPostData.data.value?.resData.dictData ?? {});
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
wx.onCopyUrl(() => {
|
||||||
|
// return {query: `superior_unionid=${xiao_main.self_user_unionid}`};
|
||||||
|
console.log("superior_unionid=" + xiaoMain.superior_unionid, "---------------");
|
||||||
|
return {query: "superior_unionid=" + xiaoMain.mini_unionid};
|
||||||
|
});
|
||||||
|
// 用户点击了收藏按钮
|
||||||
|
// onAddToFavorites((options: Page.AddToFavoritesOption) => {
|
||||||
|
// console.log("webViewUrl: ", options.webviewUrl);
|
||||||
|
// return {
|
||||||
|
// title: "收藏",
|
||||||
|
// imageUrl: "https://oss.xiao.band/backhome.png",
|
||||||
|
// query: "name=xxx&age=xxx",
|
||||||
|
// };
|
||||||
|
// });
|
||||||
|
});
|
||||||
|
onTabItemTap(() => {
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,269 @@
|
|||||||
|
<style scoped lang="scss">
|
||||||
|
.home-com-chao-hua-shuai {
|
||||||
|
width: 690rpx;
|
||||||
|
height: 394rpx;
|
||||||
|
//background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 12rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||||
|
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||||
|
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
|
.hua-shuai-title {
|
||||||
|
height: 92rpx;
|
||||||
|
|
||||||
|
|
||||||
|
.hua-shuai-1 {
|
||||||
|
height: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hua-shuai-3 {
|
||||||
|
height: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 44rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
|
||||||
|
.flex-container-item {
|
||||||
|
display: flex;
|
||||||
|
height: 44rpx;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.text-item-1 {
|
||||||
|
//width: 96rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
line-height: 44rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-item-2 {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20rpx;
|
||||||
|
line-height: 34rpx;
|
||||||
|
color: #efab6c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-item-3 {
|
||||||
|
width: 112rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 34rpx;
|
||||||
|
color: #40AE36;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hua-shuai-goods {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
|
||||||
|
.hua-shuai-goods-items {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 24rpx;
|
||||||
|
|
||||||
|
|
||||||
|
.goods-items-img {
|
||||||
|
width: 176rpx;
|
||||||
|
height: 176rpx;
|
||||||
|
|
||||||
|
&.theme-white {
|
||||||
|
border: #b9b9b9 dashed 1px; // 主题是亮色的时候
|
||||||
|
}
|
||||||
|
|
||||||
|
&.theme-dark {
|
||||||
|
border: #6e6d6d dashed 1px; // 主题是亮色的时候
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.custom-class-img-title) {
|
||||||
|
width: 175rpx;
|
||||||
|
height: 175rpx;
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
|
.custom-image-title {
|
||||||
|
width: 175rpx;
|
||||||
|
height: 175rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-items-name {
|
||||||
|
width: 184rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 36rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-items-price {
|
||||||
|
height: 44rpx;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-right: 26rpx;
|
||||||
|
|
||||||
|
.name-text-1 {
|
||||||
|
.text-1 {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #F55726;
|
||||||
|
line-height: 32rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-2 {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #F55726;
|
||||||
|
line-height: 32rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-text-card {
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
|
||||||
|
|
||||||
|
&.theme-white {
|
||||||
|
border: #b9b9b9 dashed 1px; // 主题是亮色的时候
|
||||||
|
}
|
||||||
|
|
||||||
|
&.theme-dark {
|
||||||
|
border: #6e6d6d dashed 1px; // 主题是亮色的时候
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.custom-class-img) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.custom-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class=home-com-chao-hua-shuai @click="进入商城页面">
|
||||||
|
<view class="hua-shuai-title">
|
||||||
|
<view class="hua-shuai-1"></view>
|
||||||
|
<view class="flex-container">
|
||||||
|
<view class="flex-container-item">
|
||||||
|
<text class="text-item-1" style="color: #46a44a">超划算</text>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 8rpx"></view>
|
||||||
|
<view class="flex-container-item">
|
||||||
|
<text class="text-item-2">最新优惠</text>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="flex: 1"></view>
|
||||||
|
<view class="flex-container-item">
|
||||||
|
<text class="text-item-3">查看全部</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="hua-shuai-3"></view>
|
||||||
|
</view>
|
||||||
|
<!-- 超划算图片区域-->
|
||||||
|
<view class="hua-shuai-goods">
|
||||||
|
<view class="hua-shuai-goods-items" v-for="(value,index) in goods_list" v-bind:key="index">
|
||||||
|
<view class="goods-items-img" :class="{'theme-white':theme==='light','theme-dark':theme==='dark'}">
|
||||||
|
<wd-img custom-class="custom-class-img-title" custom-image="custom-image-title"
|
||||||
|
|
||||||
|
:src="value.img_url">
|
||||||
|
<template #error>
|
||||||
|
<view class="error-wrap">加载失败</view>
|
||||||
|
</template>
|
||||||
|
<template #loading>
|
||||||
|
<view class="loading-wrap">
|
||||||
|
<wd-loading/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-img>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="height: 10rpx"></view>
|
||||||
|
<view class="goods-items-name">六果泡泡</view>
|
||||||
|
<view class="line-widht-number" style="height: 6rpx"></view>
|
||||||
|
<view class="goods-items-price">
|
||||||
|
<view class="name-text-1">
|
||||||
|
<text class="text-1">￥</text>
|
||||||
|
<text class="text-2">39.9</text>
|
||||||
|
</view>
|
||||||
|
<view class="name-text-card" :class="{'theme-white':theme==='light','theme-dark':theme==='dark'}">
|
||||||
|
<wd-img custom-class="custom-class-img" custom-image="custom-image"
|
||||||
|
src="/static/购物车.svg">
|
||||||
|
<template #error>
|
||||||
|
<view class="error-wrap">加载失败</view>
|
||||||
|
</template>
|
||||||
|
<template #loading>
|
||||||
|
<view class="loading-wrap">
|
||||||
|
<wd-loading/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-img>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// 页面功能注释区域
|
||||||
|
import {ref} from "vue";
|
||||||
|
|
||||||
|
const goods_list = ref([
|
||||||
|
{img_url: "https://hudie.sixgou.com/%E5%85%AD%E6%9E%9C%E4%BA%A7%E5%93%81%E5%9B%BE/sixcp.png"},
|
||||||
|
{img_url: "https://hudie.sixgou.com/%E5%85%AD%E6%9E%9C%E4%BA%A7%E5%93%81%E5%9B%BE/sixcp2.png"},
|
||||||
|
{img_url: "https://hudie.sixgou.com/%E5%85%AD%E6%9E%9C%E4%BA%A7%E5%93%81%E5%9B%BE/139bd00dec9c4e39d6c3cb17fc9a098a.jpg"},
|
||||||
|
]);
|
||||||
|
let theme = ref(uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
const 进入商城页面 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/商城页面目录/PageShangCheng"}).then().catch(() => {
|
||||||
|
wx.reLaunch({url: "/pageTabBar/Home/Home"});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
//在这个组件, 可以获取当前用户的配送地址,
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,703 @@
|
|||||||
|
<style scoped lang="scss">
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
.commission-showcase {
|
||||||
|
background-color: #f5f5f5 !important;
|
||||||
|
}
|
||||||
|
.feature-item {
|
||||||
|
// 经营优势类型的样式
|
||||||
|
background-color: #F5E8DE !important;
|
||||||
|
}
|
||||||
|
.left-1 {
|
||||||
|
background-color: #f5f5f5; // 浅奶黄白
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色模式 */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 来回抖抖动的动画效果
|
||||||
|
@keyframes shake {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
10%, 30%, 50%, 70%, 90% {
|
||||||
|
transform: translateX(-6px);
|
||||||
|
}
|
||||||
|
20%, 40%, 60%, 80% {
|
||||||
|
transform: translateX(6px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shakeLoop {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(-6px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(6px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(-6px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-demo {
|
||||||
|
width: 750rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 460rpx;
|
||||||
|
|
||||||
|
.gird-root-div {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 710rpx;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr; //分成多少列 每一列的宽度 相对于父容器总宽度
|
||||||
|
grid-template-rows: 460rpx; // 分多少行, 每一行的高度, 相对于父容器的总高度
|
||||||
|
gap: 0 10rpx;
|
||||||
|
|
||||||
|
.root-div-left {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 460rpx;
|
||||||
|
padding: 24rpx 24rpx 24rpx 24rpx;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 30% 70%;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2), inset 0 1rpx 0 rgba(255, 255, 255, 0.05);
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
|
||||||
|
.left-1 {
|
||||||
|
// 这里的图片的容器
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.user-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&.shake-element {
|
||||||
|
animation: shake 0.3s ease-in-out 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.custom-class-img) {
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.custom-image {
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain; // 保持比例，完整显示在容器内
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-add-kefu {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #4caf50; // 品牌绿色
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-2 {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 6rpx 0 10rpx 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: repeat(3, 1fr);
|
||||||
|
gap: 6rpx 12rpx;
|
||||||
|
|
||||||
|
.feature-item {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
border: 1rpx solid rgba(255, 255, 255, 0.05);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
position: relative; // 关键：父元素必须相对定位
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
padding-bottom: 6rpx;
|
||||||
|
|
||||||
|
.feature-item-cou {
|
||||||
|
inset: 0; // 等同于 top:0; right:0; bottom:0; left:0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
|
||||||
|
.feature-icon--cou {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-desc {
|
||||||
|
font-size: 20rpx;
|
||||||
|
//color: rgba(255, 255, 255, 0.8);
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-div-right {
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 24rpx;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2), inset 0 1rpx 0 rgba(255, 255, 255, 0.05);
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recruit-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.title-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #4caf50;
|
||||||
|
|
||||||
|
//color: rgba(255, 255, 255, 0.6);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
// 招募中的 字体 样式
|
||||||
|
background: linear-gradient(135deg, #4caf50, #2e7d32);
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 6rpx 16rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
/* 佣金展示区 */
|
||||||
|
.commission-showcase {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16rpx 0 0 0;
|
||||||
|
|
||||||
|
|
||||||
|
.commission-badge {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: #4caf50;
|
||||||
|
font-size: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
border: 1rpx solid rgba(76, 175, 80, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rate-display {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
|
||||||
|
|
||||||
|
.rate-number {
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #4caf50;
|
||||||
|
line-height: 1;
|
||||||
|
text-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rate-label {
|
||||||
|
font-size: 22rpx;
|
||||||
|
//color: rgba(255, 255, 255, 0.6);
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 核心卖点 */
|
||||||
|
.core-benefit {
|
||||||
|
//margin-bottom: 20rpx;
|
||||||
|
padding: 15rpx 0;
|
||||||
|
|
||||||
|
.benefit-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), transparent);
|
||||||
|
border-radius: 12rpx;
|
||||||
|
//padding: 14rpx 20rpx;
|
||||||
|
border: 1rpx solid rgba(76, 175, 80, 0.2);
|
||||||
|
|
||||||
|
.benefit-emoji {
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin: 0 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #4caf50;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-arrow {
|
||||||
|
margin: 0 16rpx;
|
||||||
|
//color: rgba(255, 255, 255, 0.4);
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 特性列表 */
|
||||||
|
.feature-list {
|
||||||
|
padding: 15rpx 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 12rpx;
|
||||||
|
|
||||||
|
|
||||||
|
.feature-item {
|
||||||
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||||
|
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||||
|
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
border: 1rpx solid rgba(255, 255, 255, 0.05);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
.feature-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-desc {
|
||||||
|
font-size: 20rpx;
|
||||||
|
//color: rgba(255, 255, 255, 0.8);
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 卡片底部 */
|
||||||
|
.card-footer {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
|
||||||
|
.action-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 18rpx 0;
|
||||||
|
background: linear-gradient(135deg, #4caf50, #2e7d32);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 6rpx 16rpx rgba(76, 175, 80, 0.3),
|
||||||
|
0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||||
|
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||||
|
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.9;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-text {
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-arrow {
|
||||||
|
font-weight: bold;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active .button-arrow {
|
||||||
|
transform: translateX(4rpx);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class=root-demo>
|
||||||
|
<view class="gird-root-div">
|
||||||
|
<view class="root-div-left">
|
||||||
|
<view class="left-1">
|
||||||
|
<view class="user-image" :class="{'shake-element':shakeBoole}">
|
||||||
|
<wd-img custom-class="custom-class-img" custom-image="custom-image" mode="aspectFit"
|
||||||
|
:showMenuByLongpress="true"
|
||||||
|
:src="xiaoMain.mini_user_data?.codeQrCode">
|
||||||
|
<template #error>
|
||||||
|
<view class="error-wrap">加载失败</view>
|
||||||
|
</template>
|
||||||
|
<template #loading>
|
||||||
|
<view class="loading-wrap">
|
||||||
|
<wd-loading/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-img>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="left-2">
|
||||||
|
|
||||||
|
<view class="feature-item" @click="震动效果"
|
||||||
|
v-if="xiaoMain.mini_代金券数据?.stock券状态==='发放中'">
|
||||||
|
<view class="feature-icon">
|
||||||
|
<wd-loading :size="15" type="spinner" color="#fa34aa"/>
|
||||||
|
</view>
|
||||||
|
<view class="feature-desc">券发放中</view>
|
||||||
|
</view>
|
||||||
|
<view class="feature-item" @click="震动效果"
|
||||||
|
v-if="xiaoMain.mini_代金券数据?.stock券状态==='待领券'">
|
||||||
|
<send-coupon
|
||||||
|
v-if="xiaoMain.mini_代金券数据"
|
||||||
|
:send_coupon_params="xiaoMain.mini_代金券数据?.stock领券数据.send_coupon_params"
|
||||||
|
:sign="xiaoMain.mini_代金券数据?.stock领券数据.sign"
|
||||||
|
:send_coupon_merchant="xiaoMain.mini_代金券数据?.stock领券数据.send_coupon_merchant"
|
||||||
|
:suggest_immediate_use="xiaoMain.mini_代金券数据?.stock领券数据.suggest_immediate_use"
|
||||||
|
data-com-type="wx"
|
||||||
|
@sendcoupon="sendcoupon"
|
||||||
|
@userconfirm="userconfirm"
|
||||||
|
>
|
||||||
|
<view class="feature-item-cou">
|
||||||
|
<view class="feature-icon--cou">🎁</view>
|
||||||
|
<view class="feature-desc">领券</view>
|
||||||
|
</view>
|
||||||
|
</send-coupon>
|
||||||
|
</view>
|
||||||
|
<view class="feature-item" @click="已领取卡券"
|
||||||
|
v-if="xiaoMain.mini_代金券数据?.stock券状态==='已领券'">
|
||||||
|
<view class="feature-icon">
|
||||||
|
<wd-loading :size="15" type="spinner" color="#fa34aa"/>
|
||||||
|
</view>
|
||||||
|
<view class="feature-desc">券已领取</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="feature-item" @click="送好友">
|
||||||
|
<view class="feature-icon">🔊</view>
|
||||||
|
<view class="feature-desc">给好友送券</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="feature-item" @click="每日签到弹出幕帘">
|
||||||
|
<view class="feature-icon"> 🦶</view>
|
||||||
|
<view class="feature-desc">每日签到</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="feature-item" @click="新人红包事件">
|
||||||
|
<view class="feature-icon">🧧</view>
|
||||||
|
<view class="feature-desc">新人大礼包</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="feature-item" @click="赢免单事件">
|
||||||
|
<view class="feature-icon">🤝</view>
|
||||||
|
<view class="feature-desc">赢免单</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="feature-item" @click="新品通知事件">
|
||||||
|
<view class="feature-icon">🔔</view>
|
||||||
|
<view class="feature-desc">新品通知</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="root-div-right recruit-card">
|
||||||
|
|
||||||
|
<view class="card-header">
|
||||||
|
<view class="title-group">
|
||||||
|
<text class="title">推广员</text>
|
||||||
|
<text class="subtitle">高额佣金 轻松赚</text>
|
||||||
|
</view>
|
||||||
|
<view class="badge">招募中</view>
|
||||||
|
</view>
|
||||||
|
<wd-gap bg-color="#348638" height="2rpx"></wd-gap>
|
||||||
|
|
||||||
|
<view class="card-content">
|
||||||
|
<!-- 佣金展示 -->
|
||||||
|
<view class="commission-showcase">
|
||||||
|
<view class="commission-badge">最高</view>
|
||||||
|
<view class="rate-display">
|
||||||
|
<text class="rate-number">30%</text>
|
||||||
|
<text class="rate-label"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 核心卖点 -->
|
||||||
|
<view class="core-benefit">
|
||||||
|
<view class="benefit-content">
|
||||||
|
<text class="benefit-emoji">💰</text>
|
||||||
|
<!-- <text class="benefit-title">推广员专属权益</text>-->
|
||||||
|
<text class="benefit-title">发福利</text>
|
||||||
|
<text class="benefit-arrow">→</text>
|
||||||
|
<text class="benefit-title">赚佣金</text>
|
||||||
|
<text class="benefit-emoji">💸</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 特性列表 -->
|
||||||
|
<view class="feature-list">
|
||||||
|
<label class="feature-item" @click="震动效果" for="button-share">
|
||||||
|
<view class="feature-icon">🚀</view>
|
||||||
|
<view class="feature-desc">一键分享</view>
|
||||||
|
<button openType="share" id="button-share" v-show="false"
|
||||||
|
style="height: 0;width: 0"></button>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<view class="feature-item" @click="进入积分页面展示即时结算的功能">
|
||||||
|
<view class="feature-icon">⚡</view>
|
||||||
|
<view class="feature-desc">即时结算</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="feature-item" @click="收益透明事件">
|
||||||
|
<view class="feature-icon">📈</view>
|
||||||
|
<view class="feature-desc">收益透明</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="card-footer" @click="加入联盟事件">
|
||||||
|
<view class="action-button">
|
||||||
|
<text class="button-text">立即加入</text>
|
||||||
|
<view class="button-arrow">→</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
<wd-curtain v-model="弹出幕帘" :src="img" :zIndex="199" closePosition="inset" :width="幕帘图片宽度"
|
||||||
|
:closeOnClick="true" @clickModal="点击幕帘事件" @close="点击幕帘关闭按钮"
|
||||||
|
@error="幕帘图片加载报错事件" :showMenuByLongpress="true"
|
||||||
|
to="/subPackages/homeSubPages/用户积分页面/用户积分页面"
|
||||||
|
:closeOnClickModal="true"></wd-curtain>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// 页面功能注释区域
|
||||||
|
import {ref} from "vue";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import type {Send发放优惠类回调类型, 发券接口返回数据类型} from "@/hooks/发放优惠券的回调类型";
|
||||||
|
import {useRequest} from "@uni-helper/uni-use";
|
||||||
|
import {useThrottleFn, watchDeep} from "@vueuse/shared";
|
||||||
|
import {useToast} from "wot-design-uni";
|
||||||
|
import {卡券_领券, 卡券_领券后更新当前券的状态, 商品_赢免单商品数据, 积分_每日签到奖励} from "@/hooks/接口API";
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "home-com-hong-meng"}); // 组件使用
|
||||||
|
let 弹出幕帘 = ref(false);
|
||||||
|
let 幕帘图片宽度 = Math.floor(wx.getWindowInfo().windowWidth * 0.7);
|
||||||
|
// const img = ref<string>("https://hudie.sixgou.com/six/9aa843c12e1a898159de3397f9ecb67f.jpg");
|
||||||
|
const img = ref<string>("https://hudie.sixgou.com/six/f151306b164cb2e5ede53d1bb9a406cd.png");
|
||||||
|
const shakeBoole = ref(false);
|
||||||
|
const 加入联盟事件 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.heavy});
|
||||||
|
wx.openCustomerServiceChat({
|
||||||
|
extInfo: {url: xiaoMain.extInfo_推广员账号服务}, corpId: "wwbe6369dc26a9d83a",
|
||||||
|
showMessageCard: true,
|
||||||
|
sendMessageTitle: "咨询推广员", // 气泡的标题名称
|
||||||
|
sendMessageImg: "https://hudie.sixgou.com/icon/six.png", // 弹出气泡时的图片
|
||||||
|
sendMessagePath: "/pageTabBar/Home/Home", // 点击时,打开的小程序的页面路径
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res.errMsg);
|
||||||
|
},
|
||||||
|
fail: (res) => {
|
||||||
|
console.log(res);
|
||||||
|
},
|
||||||
|
complete: (res) => {
|
||||||
|
console.log(res);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const 震动效果 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.medium});
|
||||||
|
};
|
||||||
|
const 进入积分页面展示即时结算的功能 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.medium});
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/用户积分页面/用户积分页面"}).then().catch(() => uni.navigateTo({url: ""}));
|
||||||
|
};
|
||||||
|
const 新品通知事件 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.medium});//medium heavy light
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/商城页面目录/PageShangCheng"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
};
|
||||||
|
let toast = useToast("default-toast");
|
||||||
|
const sendcoupon = async (e: Send发放优惠类回调类型): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.heavy});
|
||||||
|
console.log("这里是事件点击领券时触发", e);
|
||||||
|
if (e.target.send_coupon_result.at(0)?.code === "SUCCESS") {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 onSendonSendonSendonSendonSendonSendonSend ",);
|
||||||
|
let data = await useRequest(卡券_领券后更新当前券的状态, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
stock券状态: "已领券"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
xiaoMain.mini_代金券数据 = data.data.value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const userconfirm = async (params: Send发放优惠类回调类型): Promise<void> => {
|
||||||
|
// 这里的回调函数触发时机: 是用户点击确认收券后的 操作
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
console.log("放到卡包后触发", params);
|
||||||
|
if (params.target.send_coupon_result.at(0)?.code === "SUCCESS") {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 onConfirmonConfirmonConfirmonConfirmonConfirmonConfirmonConfirm ",);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 监听当前用户的领券的状态
|
||||||
|
|
||||||
|
// 领完卡券的查询提示
|
||||||
|
const 已领取卡券 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.medium});
|
||||||
|
toast.warning({msg: "领取成功，已放入微信卡包"});
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/商城页面目录/PageShangCheng"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
};
|
||||||
|
const xiao_six_img = "https://hudie.sixgou.com/six/aa35a95a5be61ba1bc38f856fabf3978.png";
|
||||||
|
const 送好友 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.medium});
|
||||||
|
wx.downloadFile({
|
||||||
|
url: xiao_six_img,
|
||||||
|
success: (res) => {
|
||||||
|
wx.showShareImageMenu({
|
||||||
|
path: res.tempFilePath,
|
||||||
|
entrancePath: "/pageTabBar/Home/Home?" + "superior_unionid=" + xiaoMain.mini_unionid + "&" + "shareType=通知好友"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const 赢免单事件 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
try {
|
||||||
|
if (xiaoMain.addressDataList.length <= 0) {
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/用户配送地址页面/用户配送地址页面"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
} else {
|
||||||
|
let data = await useRequest(商品_赢免单商品数据, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid, self_user_unionid: xiaoMain.mini_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
xiaoMain.six_good = data.data.value;
|
||||||
|
console.log(xiaoMain.six_good);
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/商品详情页面/商品详情页面"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
// uni.navigateTo({url: "/subPackages/homeSubPages/商城页面目录/PageShangCheng"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
};
|
||||||
|
const 每日签到弹出幕帘 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.medium});
|
||||||
|
弹出幕帘.value = true;
|
||||||
|
//发送请求添加积分
|
||||||
|
try {
|
||||||
|
await useRequest(积分_每日签到奖励, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const 幕帘图片加载报错事件 = async (e: any): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.medium});//medium heavy light
|
||||||
|
console.log(e);
|
||||||
|
};
|
||||||
|
const 点击幕帘事件 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.medium});//medium heavy light
|
||||||
|
};
|
||||||
|
const 点击幕帘关闭按钮 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.medium});//medium heavy light
|
||||||
|
};
|
||||||
|
const 收益透明事件 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.medium});//medium heavy light
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/用户积分页面/用户积分页面"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
};
|
||||||
|
const 新人红包事件 = useThrottleFn(async () => {
|
||||||
|
//执行时机: 点击后直接执行,但是在设置的时间范围内,不会再次执行
|
||||||
|
shakeBoole.value = true;
|
||||||
|
await uni.vibrateLong();
|
||||||
|
setTimeout(() => {
|
||||||
|
shakeBoole.value = false;
|
||||||
|
}, 1000);
|
||||||
|
}, 1000);
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
<style scoped lang="scss">
|
||||||
|
.page-title {
|
||||||
|
width: 750rpx;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 684rpx;
|
||||||
|
height: 382rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.6),
|
||||||
|
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||||
|
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
|
|
||||||
|
:deep(.custom-class-img) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.custom-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class=page-title>
|
||||||
|
<view class="title" :class="{'theme-white':theme==='light','theme-dark':theme==='dark'}">
|
||||||
|
<wd-img custom-class="custom-class-img" custom-image="custom-image"
|
||||||
|
src="https://hudie.sixgou.com/%E5%85%AD%E6%9E%9C%E6%B3%A1%E6%B3%A1.png">
|
||||||
|
<template #error>
|
||||||
|
<view class="error-wrap">加载失败</view>
|
||||||
|
</template>
|
||||||
|
<template #loading>
|
||||||
|
<view class="loading-wrap">
|
||||||
|
<wd-loading/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-img>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// 页面功能注释区域
|
||||||
|
import {ref} from "vue";
|
||||||
|
|
||||||
|
let theme = ref(uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,241 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
//@import "@/assets/demo.scss";
|
||||||
|
$defaultTopHeight: 1px; // 滚动区域外 可以预留的高度
|
||||||
|
$xiaoBottomHeigh: 1px; // 滚动区域外,可以预留的高度
|
||||||
|
|
||||||
|
@mixin line-color {
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0%, 100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
animation: gradientFlow 5s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-screen {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "xiaoFont", sans-serif;
|
||||||
|
height: v-bind(pxScreenHeight);
|
||||||
|
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||||||
|
background-size: 750rpx;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-container {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(pxWindowHeight);
|
||||||
|
|
||||||
|
.status-wifi-nav {
|
||||||
|
/*状态栏的高度 这里的值不能动*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(statusHeight);
|
||||||
|
|
||||||
|
:deep(.default-view-slot) {
|
||||||
|
line-height: v-bind(meunHeight);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: v-bind(meunHeight);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.default-view-slot-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||||||
|
border-radius: calc(v-bind(meunHeight) / 2);
|
||||||
|
|
||||||
|
.title-imgimage_item {
|
||||||
|
width: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
height: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right-text {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scrollTopHeigh {
|
||||||
|
/*在滚动区域内的, 可以自定义的高度*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: $defaultTopHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scrollViewHeigh {
|
||||||
|
/*滚动页面区域范围*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1rem;
|
||||||
|
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
/*button按钮的 阴影样式可以直接使用*/
|
||||||
|
.custom-shadow {
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.custom-class-divdivder) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-css {
|
||||||
|
position: relative;
|
||||||
|
height: 100rpx;
|
||||||
|
width: 100rpx;
|
||||||
|
box-shadow: inset 0 0 0 1px red;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.demo-css-1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
box-shadow: inset 0 0 0 1px red;
|
||||||
|
left: 50%;
|
||||||
|
//line-height: 100%;
|
||||||
|
//vertical-align: bottom;
|
||||||
|
line-height: 1;
|
||||||
|
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollBottomHeigh {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: $xiaoBottomHeigh;
|
||||||
|
@include line-color();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="phone-screen">
|
||||||
|
<wd-config-provider :theme="theme">
|
||||||
|
<view class="root-container">
|
||||||
|
<view class="status-wifi-nav">
|
||||||
|
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||||||
|
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||||||
|
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||||||
|
@homeRight="homeRight">
|
||||||
|
<template v-slot:default>
|
||||||
|
<view class="default-view-slot" @click="defaultSearchChange">
|
||||||
|
<view class="default-view-slot-left"></view>
|
||||||
|
<view class="default-view-slot-right">
|
||||||
|
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||||||
|
src="https://hudie.xiao.band/search.png" webp/>
|
||||||
|
<view class="default-view-slot-right-text">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 30rpx"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</ChildComScroll>
|
||||||
|
</view>
|
||||||
|
<!--分隔线,上面的是子组件-->
|
||||||
|
<view class="scrollTopHeigh"><!--预留的空间高度-->
|
||||||
|
<view class="line-widht-number" style="height: 20rpx"></view>
|
||||||
|
</view>
|
||||||
|
<!-- 滚动区域开始-->
|
||||||
|
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
|
||||||
|
class="scrollViewHeigh">
|
||||||
|
<view class="">
|
||||||
|
<me-com-user-info></me-com-user-info>
|
||||||
|
<view class="line-widht-number" style="height: 10rpx"></view>
|
||||||
|
<me-com-user-server></me-com-user-server>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!--滚动区域结束-->
|
||||||
|
<view class="scrollBottomHeigh"><!--底部预留区域-->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-config-provider>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||||||
|
import {ref} from "vue";
|
||||||
|
import type {GlobelsChildPropsType} from "@/types/通用类型";
|
||||||
|
import {onTabItemTap} from "@dcloudio/uni-app";
|
||||||
|
import MeComUserInfo from "@/pageTabBar/Me/me-com-user-info.vue";
|
||||||
|
import MeComUserServer from "@/pageTabBar/Me/me-com-user-server.vue";
|
||||||
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
|
||||||
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
|
||||||
|
let pxScreenHeight = ref(); // 手机高度
|
||||||
|
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||||||
|
let pxScrollHeight = ref(); // 滚动区域高度
|
||||||
|
let statusHeight = ref(); // 固定的顶部
|
||||||
|
let meunHeight = ref();//插槽时要用的 高度
|
||||||
|
const modelValue: GlobelsChildPropsType = {
|
||||||
|
isShowLeft: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
|
||||||
|
iconTextLeft: {classPrefix: "xiaozizi", name: "wo2", size: 20},
|
||||||
|
},
|
||||||
|
isShowRight: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
|
||||||
|
iconTextRight: {classPrefix: "xiaozizi", name: "a-wo1", size: 20},
|
||||||
|
},
|
||||||
|
title_text: "六果泡泡", navIsShow: "default",
|
||||||
|
};
|
||||||
|
const homeLeft = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
console.log("左键按键");
|
||||||
|
};
|
||||||
|
const homeRight = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
console.log("右键按键");
|
||||||
|
};
|
||||||
|
let defaultSearchChange = async () => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
};
|
||||||
|
onTabItemTap(async () => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
<template>
|
||||||
|
<view class="guochang-container" @click="震动效果">
|
||||||
|
<!-- 左侧浮动小球 -->
|
||||||
|
<view class="balls balls-left">
|
||||||
|
<view class="ball ball-1"></view>
|
||||||
|
<view class="ball ball-2"></view>
|
||||||
|
<view class="ball ball-3"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 中间祝福语 -->
|
||||||
|
<view class="message">所有美好如期而至</view>
|
||||||
|
|
||||||
|
<!-- 右侧浮动小球 -->
|
||||||
|
<view class="balls balls-right">
|
||||||
|
<view class="ball ball-4"></view>
|
||||||
|
<view class="ball ball-5"></view>
|
||||||
|
<view class="ball ball-6"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
|
||||||
|
const 震动效果 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.guochang-container {
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
//width: 698rpx;
|
||||||
|
padding: 0 36rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
height: 50rpx;
|
||||||
|
//padding: 0 30rpx;
|
||||||
|
//background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
||||||
|
border-radius: 60rpx;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 中间祝福语
|
||||||
|
.message {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
z-index: 2;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 小球容器
|
||||||
|
.balls {
|
||||||
|
display: flex;
|
||||||
|
gap: 12rpx;
|
||||||
|
//position: absolute;
|
||||||
|
//top: 50%;
|
||||||
|
//transform: translateY(-50%);
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 小球基础样式
|
||||||
|
.ball {
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: float 2s ease-in-out infinite;
|
||||||
|
|
||||||
|
// 左侧三个球
|
||||||
|
&.ball-1 {
|
||||||
|
background: #FF6B6B;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ball-2 {
|
||||||
|
background: #FFD700;
|
||||||
|
animation-delay: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ball-3 {
|
||||||
|
background: #4ECDC4;
|
||||||
|
animation-delay: 0.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右侧三个球
|
||||||
|
&.ball-4 {
|
||||||
|
background: #FF9F43;
|
||||||
|
animation-delay: 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ball-5 {
|
||||||
|
background: #54A0FF;
|
||||||
|
animation-delay: 0.45s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ball-6 {
|
||||||
|
background: #A29BFE;
|
||||||
|
animation-delay: 0.75s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上下浮动动画
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-12rpx);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,301 @@
|
|||||||
|
<template>
|
||||||
|
<view class="user-info-card">
|
||||||
|
<!-- 背景装饰 -->
|
||||||
|
<image class="bg-decoration" src="/static/logo.svg" mode="aspectFill"/>
|
||||||
|
|
||||||
|
<!-- 主要内容区域 -->
|
||||||
|
<view class="content-wrapper">
|
||||||
|
<!-- 头像和基本信息 -->
|
||||||
|
<view class="avatar-section" @tap="点击头像事件">
|
||||||
|
<image class="avatar" :src="xiaoMain.mini_user_data?.user_头像" mode="aspectFill"/>
|
||||||
|
<view class="info-group">
|
||||||
|
<view class="nickname">{{ xiaoMain.mini_user_data?.user_昵称 }}</view>
|
||||||
|
<view class="phone">{{ maskPhone(xiaoMain.mini_user_data?.uesr_手机号码) }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 会员等级标签 -->
|
||||||
|
<view class="vip-tag" :class="`vip-level-${userInfo.vipLevel}`" @click="点击用户等级事件">
|
||||||
|
<view class="vip-icon">👑</view>
|
||||||
|
<view class="line-widht-number" style="width: 1rpx"></view>
|
||||||
|
<!-- <view class="vip-text">{{ vipLabelMap[userInfo.vipLevel] }}</view>-->
|
||||||
|
<view class="vip-text">{{ xiaoMain.mini_user_data?.user_角色权限 }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 统计信息 -->
|
||||||
|
<view class="stats-row">
|
||||||
|
<view class="stat-item" v-for="item in statsList" :key="item.key" @click="选中的事件(item)">
|
||||||
|
<view class="stat-value">{{ item.value }}</view>
|
||||||
|
<view class="stat-label">{{ item.label }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 会员权益提示 -->
|
||||||
|
<view class="vip-benefits" v-if="userInfo.vipLevel > 0">
|
||||||
|
<!-- <text class="benefits-text">{{ getBenefitsText() }}</text>-->
|
||||||
|
<me-com-bottom-zhufu></me-com-bottom-zhufu>
|
||||||
|
</view>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {computed, reactive} from "vue";
|
||||||
|
import {useToast} from "wot-design-uni";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import MeComBottomZhufu from "@/pageTabBar/Me/me-com-bottom-zhufu.vue";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "me-com-user-info"});
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
let toast = useToast("default-toast");
|
||||||
|
let orders全部订单的数量 = computed(() => {
|
||||||
|
return xiaoMain.orderListData.length;
|
||||||
|
});
|
||||||
|
// 用户数据 - 写死
|
||||||
|
const userInfo = reactive({
|
||||||
|
// avatar: "https://picsum.photos/200/200?random=1",
|
||||||
|
avatar: "https://hudie.xiao.band/%E6%9C%AA%E5%91%BD%E5%90%8D.png",
|
||||||
|
nickname: "小明同学",
|
||||||
|
phone: "13812345678",
|
||||||
|
vipLevel: 5,
|
||||||
|
vipExpireDate: "2027-06-15",
|
||||||
|
points: 2680,
|
||||||
|
orders: orders全部订单的数量.value,
|
||||||
|
coupons: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// 统计数据
|
||||||
|
const statsList = computed(() => [
|
||||||
|
{key: "points", label: "积分", value: xiaoMain.mini_user_积分数据?.share总积分},
|
||||||
|
{key: "orders", label: "全部订单", value: xiaoMain.orderListData.length /* 直接引用响应式数据 */},
|
||||||
|
{key: "coupons", label: "优惠券", value: userInfo.coupons}
|
||||||
|
]);
|
||||||
|
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
const maskPhone = (phone: string | null | undefined): string | undefined => {
|
||||||
|
if (phone) {
|
||||||
|
return `${phone.slice(0, 3)}****${phone.slice(7)}`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const 点击头像事件 = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
};
|
||||||
|
|
||||||
|
const 点击用户等级事件 = async () => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
};
|
||||||
|
|
||||||
|
const 选中的事件 = async (item: { key: string; label: string; value: number | undefined }): Promise<void> => {
|
||||||
|
if (item.label === "积分") {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/用户积分页面/用户积分页面"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
}
|
||||||
|
if (item.label === "优惠券") {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
toast.info("暂无优惠券可以领取");
|
||||||
|
}
|
||||||
|
if (item.label === "全部订单") {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/订单数据页面/订单数据页面"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.user-info-card {
|
||||||
|
width: 686rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
//margin: 20rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
//background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
//box-sizing: border-box;
|
||||||
|
//padding: 20rpx 30rpx;
|
||||||
|
background: linear-gradient(135deg, #000000 0%, #331a00 50%, #000000 100%);
|
||||||
|
//border-radius: 20rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.5);
|
||||||
|
//position: relative;
|
||||||
|
//overflow: hidden;
|
||||||
|
|
||||||
|
.bg-decoration {
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
right: -30%;
|
||||||
|
width: 500rpx;
|
||||||
|
height: 350rpx;
|
||||||
|
opacity: 0.08;
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 44rpx;
|
||||||
|
|
||||||
|
.avatar-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
border-radius: 70rpx;
|
||||||
|
border: 4rpx solid rgba(255, 255, 255, 0.6);
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8rpx;
|
||||||
|
|
||||||
|
.nickname {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone {
|
||||||
|
font-size: 27rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.83);
|
||||||
|
letter-spacing: 3rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vip-tag {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
padding: 10rpx 22rpx;
|
||||||
|
border-radius: 31rpx;
|
||||||
|
background: rgba(246, 214, 48, 0.22);
|
||||||
|
backdrop-filter: blur(10rpx);
|
||||||
|
border: 2rpx solid rgba(252, 221, 56, 0.49);
|
||||||
|
|
||||||
|
&.vip-level-1 {
|
||||||
|
background: rgba(232, 155, 76, 0.32);
|
||||||
|
border-color: rgba(210, 137, 61, 0.57);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vip-level-2 {
|
||||||
|
background: rgba(201, 206, 213, 0.39);
|
||||||
|
border-color: rgba(188, 194, 203, 0.63);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vip-level-3 {
|
||||||
|
background: rgba(250, 196, 54, 0.44);
|
||||||
|
border-color: rgba(242, 184, 38, 0.68);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vip-level-4 {
|
||||||
|
background: linear-gradient(134deg, rgba(58, 211, 215, 0.59), rgba(62, 142, 228, 0.77));
|
||||||
|
border-color: rgba(72, 219, 204, 0.71);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vip-level-5 {
|
||||||
|
background: linear-gradient(136deg, rgba(236, 143, 221, 0.79), rgba(245, 209, 108, 0.93));
|
||||||
|
border-color: rgba(251, 214, 56, 0.91);
|
||||||
|
animation: shimmer 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vip-icon {
|
||||||
|
font-size: 34rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 100%;
|
||||||
|
transform: translateY(-7rpx); // 关键修正：将 emoji 向上偏移 2rpx
|
||||||
|
}
|
||||||
|
|
||||||
|
.vip-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ffffff;
|
||||||
|
letter-spacing: 3rpx;
|
||||||
|
line-height: 100%; // 关键：让图标和文字的行高一致
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 28rpx 0;
|
||||||
|
border-top: 2rpx solid rgba(254, 249, 241, 0.17);
|
||||||
|
border-bottom: 2rpx solid rgba(248, 244, 240, 0.19);
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:not(:last-child)::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 13%;
|
||||||
|
height: 74%;
|
||||||
|
width: 2rpx;
|
||||||
|
background: rgba(255, 243, 237, 0.21);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 25rpx;
|
||||||
|
color: rgba(239, 235, 231, 0.81);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vip-benefits {
|
||||||
|
margin-top: 24rpx;
|
||||||
|
padding: 16rpx 24rpx;
|
||||||
|
//background: rgba(69, 146, 229, 0.41);
|
||||||
|
border-radius: 43rpx;
|
||||||
|
backdrop-filter: blur(10rpx);
|
||||||
|
|
||||||
|
.benefits-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #f7edb2;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% {
|
||||||
|
opacity: 0.87;
|
||||||
|
}
|
||||||
|
51% {
|
||||||
|
opacity: 0.98;
|
||||||
|
}
|
||||||
|
76% {
|
||||||
|
opacity: 0.84;
|
||||||
|
}
|
||||||
|
99% {
|
||||||
|
opacity: 0.93;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,332 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
.root-com {
|
||||||
|
// 功能区样式
|
||||||
|
width: 750rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.function-section {
|
||||||
|
//background: #1a1a1a;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
margin: 0 32rpx 32rpx;
|
||||||
|
padding: 32rpx;
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.section-title-left {
|
||||||
|
width: 10rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
background-color: #ef8a01;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
//color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.function-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 40rpx;
|
||||||
|
justify-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
.function-item {
|
||||||
|
width: 90%;
|
||||||
|
|
||||||
|
//cursor: pointer;
|
||||||
|
|
||||||
|
.function-item-i {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.item-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
border: 2rpx solid #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-text {
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-title {
|
||||||
|
font-size: 24rpx;
|
||||||
|
//color: #ccc;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="root-com">
|
||||||
|
<view class="function-section">
|
||||||
|
<view class="section-title">
|
||||||
|
<view class="section-title-left"></view>
|
||||||
|
<view class="line-widht-number" style="width: 8rpx"></view>
|
||||||
|
<view class="title-text">我的服务</view>
|
||||||
|
</view>
|
||||||
|
<wd-divider></wd-divider>
|
||||||
|
<view class="function-grid">
|
||||||
|
<view v-for="item in functionList" :key="item.id" class="function-item"
|
||||||
|
@click="点击各项的服务(item)">
|
||||||
|
<view class="function-item-i" v-if="item.is_show">
|
||||||
|
<view class="item-icon">
|
||||||
|
<text class="icon-text">{{ item.icon }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="item-title">{{ item.title }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-divider></wd-divider>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {watchEffect, ref} from "vue";
|
||||||
|
import {useMessage, useToast} from "wot-design-uni";
|
||||||
|
import {useRequest} from "@uni-helper/uni-use";
|
||||||
|
import {用工关系_更新用工关系绑定关系数据, 用工关系_用户提交绑定成功后更新数据} from "@/hooks/接口API";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import type {miniUserInfo} from "@/hooks/mini用户类型";
|
||||||
|
import {get获取用户当前位置信息} from "@/hooks/获取用户定位信息";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "me-com-user-server"});
|
||||||
|
|
||||||
|
let toast = useToast("default-toast");
|
||||||
|
let message = useMessage("default-message-box");
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
const getUser用户位置 = new get获取用户当前位置信息(<string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid);
|
||||||
|
|
||||||
|
interface FunctionItem {
|
||||||
|
id: number;
|
||||||
|
title: "订单查询" | "我的收藏" | "收件地址" | "我的卡券" | "积分管理" | "投诉建议" | "同城服务" | "订阅消息" | "加入我们";
|
||||||
|
icon: string;
|
||||||
|
path?: string;
|
||||||
|
is_show: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function 发起订阅消息事件(): Promise<void> {
|
||||||
|
try {
|
||||||
|
let tempId = "RvGf7wyALX4djhBgeIp6jqlfAKNzd_weXRFEd1P54fk";
|
||||||
|
let requestSubscribeMessageSuccessCallbackResult = await wx.requestSubscribeMessage({tmplIds: ["RvGf7wyALX4djhBgeIp6jqlfAKNzd_weXRFEd1P54fk"]});
|
||||||
|
|
||||||
|
if (requestSubscribeMessageSuccessCallbackResult[tempId] === "accept") {
|
||||||
|
// 允许后的操作
|
||||||
|
toast.success({msg: "订阅成功", position: "middle"});
|
||||||
|
// 订阅成功后 的操作,需要往后台发送请求,来记录用户操作成功了次数
|
||||||
|
// let apiData = await instance.post<ApiAxiosResponse<Array<string>>>("/submsg/add_messages/", {
|
||||||
|
// self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
if (requestSubscribeMessageSuccessCallbackResult[tempId] === "reject") {
|
||||||
|
// 拒绝后的结果
|
||||||
|
// 引导用户再打开设置
|
||||||
|
let messages = await message.confirm({msg: "可以即时获得积分开团中奖信息", title: "订阅消息授权"});
|
||||||
|
console.log(messages.action);
|
||||||
|
if (messages.action === "confirm") {
|
||||||
|
console.log("点击了确认");
|
||||||
|
let openSettingSuccessCallbackResult = await wx.openSetting({withSubscriptions: true});
|
||||||
|
console.log(openSettingSuccessCallbackResult, "🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
|
||||||
|
if (openSettingSuccessCallbackResult.subscriptionsSetting.itemSettings?.[tempId] === "accept") {
|
||||||
|
// 发起订阅事件,一定要是点击的事件,这样调用是不起作用的
|
||||||
|
// let messageResult = await message.alert( { msg: "确认订阅", title: "授权成功" } );
|
||||||
|
// if ( messageResult.action === "confirm" ) {
|
||||||
|
// let requestSubscribeMessageSuccessCallbackResult = await wx.requestSubscribeMessage( { tmplIds: [ "RvGf7wyALX4djhBgeIp6jqlfAKNzd_weXRFEd1P54fk" ] } );
|
||||||
|
// console.log( "🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ", requestSubscribeMessageSuccessCallbackResult );
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
}
|
||||||
|
if (openSettingSuccessCallbackResult.subscriptionsSetting.itemSettings?.[tempId] === "reject") {
|
||||||
|
toast.error({msg: "授权已拒绝", position: "middle"});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
let getSettingSuccessCallbackResult = await wx.getSetting({withSubscriptions: true});
|
||||||
|
if (getSettingSuccessCallbackResult.subscriptionsSetting.mainSwitch) {
|
||||||
|
// 如里这里为真则表示用户是打开了订阅配置的
|
||||||
|
console.log("🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏总开关是打开的 ");
|
||||||
|
}
|
||||||
|
if (!getSettingSuccessCallbackResult.subscriptionsSetting.mainSwitch) {
|
||||||
|
// 在这里需要用户打开设置页面
|
||||||
|
let messages = await message.confirm({msg: "可以即时获得积分开团中奖信息", title: "订阅消息授权"});
|
||||||
|
if (messages.action === "confirm") {
|
||||||
|
console.log("点击了确认");
|
||||||
|
let openSettingSuccessCallbackResult = await wx.openSetting({withSubscriptions: true});
|
||||||
|
console.log(openSettingSuccessCallbackResult.subscriptionsSetting, "🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 为什么啊");
|
||||||
|
let getSettingSuccessCallbackResult = await wx.getSetting({withSubscriptions: true});
|
||||||
|
console.log(getSettingSuccessCallbackResult, "🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const functionList = ref<FunctionItem[]>([
|
||||||
|
{id: 1, title: "订单查询", icon: "📦", is_show: true},
|
||||||
|
{id: 6, title: "积分管理", icon: "💰", is_show: true},
|
||||||
|
{id: 3, title: "收件地址", icon: "📍", is_show: true},
|
||||||
|
{id: 7, title: "投诉建议", icon: "💬", is_show: true},
|
||||||
|
{id: 5, title: "加入我们", icon: "🤝", is_show: true},
|
||||||
|
{id: 2, title: "同城服务", icon: "🏛️", is_show: true},
|
||||||
|
{id: 4, title: "订阅消息", icon: "📪", is_show: false},
|
||||||
|
]);
|
||||||
|
// 监听绑定状态变化，动态更新“加入我们”的显示
|
||||||
|
watchEffect(() => {
|
||||||
|
|
||||||
|
for (let item of functionList.value) {
|
||||||
|
if (item.title === "同城服务") {
|
||||||
|
if (xiaoMain.mini_user_data?.user_区县) {
|
||||||
|
item.is_show = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (item.title === "加入我们") {
|
||||||
|
if (xiaoMain.mini_user_data?.user_绑定用工关系 === "用工关系已绑定") {
|
||||||
|
item.is_show = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function 点击各项的服务(item: FunctionItem): Promise<void> {
|
||||||
|
//
|
||||||
|
if (item.title === "收件地址") {
|
||||||
|
// 进入我的地址页面
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/用户配送地址页面/用户配送地址页面"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
}
|
||||||
|
if (item.title === "订单查询") {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/订单数据页面/订单数据页面"}).then(() => {
|
||||||
|
}).catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
}
|
||||||
|
if (item.title === "投诉建议") {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
wx.openCustomerServiceChat({
|
||||||
|
// 连接的 (投诉建议客服)
|
||||||
|
extInfo: {url: "https://work.weixin.qq.com/kfid/kfc1a1611bf703deccf"}, corpId: "wwbe6369dc26a9d83a",
|
||||||
|
success: (res) => {
|
||||||
|
|
||||||
|
},
|
||||||
|
fail: (res) => {
|
||||||
|
console.log(res);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (item.title === "加入我们") {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
wx.checkEmployeeRelation({
|
||||||
|
success(res) {
|
||||||
|
console.log("绑定状态:", res.bindingStatus);
|
||||||
|
if (res.bindingStatus === "accept") {
|
||||||
|
console.log("这里表示已经绑定成功了");
|
||||||
|
useRequest(用工关系_更新用工关系绑定关系数据, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
}
|
||||||
|
}).then((data) => {
|
||||||
|
console.log(data);
|
||||||
|
xiaoMain.mini_user_data = data.data.value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (res.bindingStatus === "reject") {
|
||||||
|
wx.showModal({
|
||||||
|
title: "温馨提示",
|
||||||
|
content: "您之前拒绝了员工绑定，重新绑定需要联系客服",
|
||||||
|
confirmText: "重新绑定",
|
||||||
|
cancelText: "暂不绑定",
|
||||||
|
success(modalRes) {
|
||||||
|
console.log(modalRes);
|
||||||
|
if (modalRes.confirm) {
|
||||||
|
// 重新调绑定（必须在用户点击事件里）
|
||||||
|
wx.bindEmployeeRelation({
|
||||||
|
tmplIds: ["SFFgGF1bN56_KNd_4HicCFBBfu2PCRwCyQ5upr-EVk9Vdyl4wyyQ7B1mJvjceR29"],
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res.errMsg);
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 ", res);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (modalRes.cancel) {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 用户拒绝了 ", modalRes.cancel);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (res.bindingStatus === "") {
|
||||||
|
// 这里表示用户,未绑定且未拒绝
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 当前的状态 这里表示用户,未绑定且未拒绝 ",);
|
||||||
|
wx.bindEmployeeRelation({
|
||||||
|
tmplIds: ["SFFgGF1bN56_KNd_4HicCFBBfu2PCRwCyQ5upr-EVk9Vdyl4wyyQ7B1mJvjceR29"],
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res.errMsg);
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏", res);
|
||||||
|
useRequest<miniUserInfo>(用工关系_用户提交绑定成功后更新数据, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid,
|
||||||
|
self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
xiaoMain.mini_user_data = res.data.value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (res) => {
|
||||||
|
console.log("捕获错误❌❌❌❌❌❌", res);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
if (item.title === "订阅消息") {
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
|
||||||
|
}
|
||||||
|
if (item.title === "同城服务") {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
// 在这里提醒用户发起位置授权
|
||||||
|
await getUser用户位置.getUserLocation();
|
||||||
|
|
||||||
|
}
|
||||||
|
if (item.title === "积分管理") {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/用户积分页面/用户积分页面"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
+162
@@ -0,0 +1,162 @@
|
|||||||
|
{
|
||||||
|
"easycom": {
|
||||||
|
"autoscan": true,
|
||||||
|
"custom": {
|
||||||
|
"^nut-(.*)?-(.*)": "nutui-uniapp/components/$1$2/$1$2.vue",
|
||||||
|
"^nut-(.*)": "nutui-uniapp/components/$1/$1.vue"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "pageTabBar/Home/Home",
|
||||||
|
"type": "home",
|
||||||
|
"style": {
|
||||||
|
"disableScroll": true,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
// "mp-weixin": {
|
||||||
|
// "usingComponents": {
|
||||||
|
// "send-coupon": "plugin://sendCoupon/send-coupon"
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pageTabBar/Me/Me",
|
||||||
|
"style": {
|
||||||
|
"disableScroll": true,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index",
|
||||||
|
"style": {
|
||||||
|
"disableScroll": true,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
// "mp-weixin": {
|
||||||
|
// "usingComponents": {
|
||||||
|
// "send-coupon": "plugin://sendCoupon/send-coupon"
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"globalStyle": {
|
||||||
|
"backgroundColor": "@bgColor",
|
||||||
|
"backgroundColorBottom": "@bgColorBottom",
|
||||||
|
"backgroundColorTop": "@bgColorTop",
|
||||||
|
"backgroundTextStyle": "@bgTxtStyle",
|
||||||
|
"navigationBarBackgroundColor": "#000000",
|
||||||
|
"navigationBarTextStyle": "@navTxtStyle",
|
||||||
|
"navigationBarTitleText": "Uni Creator",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"usingComponents": {
|
||||||
|
"send-coupon": "plugin://sendCoupon/send-coupon"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tabBar": {
|
||||||
|
"color": "@tabFontColor",
|
||||||
|
"selectedColor": "@tabSelectedColor",
|
||||||
|
"borderStyle": "@tabBorderStyle",
|
||||||
|
"backgroundColor": "@bgColor",
|
||||||
|
"list": [
|
||||||
|
{
|
||||||
|
"pagePath": "pageTabBar/Home/Home",
|
||||||
|
"text": "首页",
|
||||||
|
"iconPath": "static/vite.png",
|
||||||
|
"selectedIconPath": "static/vite.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"pagePath": "pageTabBar/Me/Me",
|
||||||
|
"text": "我的",
|
||||||
|
"iconPath": "static/vite.png",
|
||||||
|
"selectedIconPath": "static/vite.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"subPackages": [
|
||||||
|
{
|
||||||
|
"root": "subPackages/homeSubPages",
|
||||||
|
"name": "home",
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "购物车页面/购物车页面",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"disableScroll": true,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "用户配送地址页面/用户配送地址页面",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"disableScroll": true,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "订单数据页面/订单数据页面",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"disableScroll": true,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "商品详情页面/商品详情页面",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"disableScroll": true,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "商城页面目录/PageShangCheng",
|
||||||
|
"style": {
|
||||||
|
"disableScroll": true,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "用户积分页面/用户积分页面",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"disableScroll": true,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "物流追踪页面/物流追踪页面",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"disableScroll": true,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "demo测试页面/demo测试页面",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"disableScroll": true,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"preloadRule": {
|
||||||
|
"pageTabBar/Home/Home": {
|
||||||
|
"network": "all",
|
||||||
|
"packages": [
|
||||||
|
"home"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,253 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
//@import "@/assets/demo.scss";
|
||||||
|
|
||||||
|
@mixin line-color {
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0%, 100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
animation: gradientFlow 5s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-screen {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "xiaoFont", sans-serif;
|
||||||
|
height: v-bind(pxScreenHeight);
|
||||||
|
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||||||
|
background-size: 750rpx;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-container {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(pxWindowHeight);
|
||||||
|
|
||||||
|
.status-wifi-nav {
|
||||||
|
/*状态栏的高度 这里的值不能动*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(statusHeight);
|
||||||
|
|
||||||
|
:deep(.default-view-slot) {
|
||||||
|
line-height: v-bind(meunHeight);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: v-bind(meunHeight);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.default-view-slot-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||||||
|
border-radius: calc(v-bind(meunHeight) / 2);
|
||||||
|
|
||||||
|
.title-imgimage_item {
|
||||||
|
width: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
height: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right-text {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.grit-content {
|
||||||
|
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight));
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-auto-rows: auto 1fr auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.scrollTopHeigh {
|
||||||
|
/*在滚动区域内的, 可以自定义的高度*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
//background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollViewHeigh {
|
||||||
|
/*滚动页面区域范围*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
/*button按钮的 阴影样式可以直接使用*/
|
||||||
|
.custom-class-button {
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollBottomHeigh {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 1px;
|
||||||
|
@include line-color();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="phone-screen">
|
||||||
|
<wd-config-provider :theme="theme">
|
||||||
|
<view class="root-container">
|
||||||
|
<view class="status-wifi-nav">
|
||||||
|
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||||||
|
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||||||
|
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||||||
|
@homeRight="homeRight">
|
||||||
|
<template v-slot:default>
|
||||||
|
<view class="default-view-slot" @click="defaultSearchChange">
|
||||||
|
<view class="default-view-slot-left"></view>
|
||||||
|
<view class="default-view-slot-right">
|
||||||
|
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||||||
|
src="https://hudie.xiao.band/search.png" webp/>
|
||||||
|
<view class="default-view-slot-right-text">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 30rpx"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</ChildComScroll>
|
||||||
|
</view>
|
||||||
|
<!--分隔线,上面的是子组件-->
|
||||||
|
|
||||||
|
<!-- 滚动区域开始-->
|
||||||
|
<view class="grit-content">
|
||||||
|
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
|
||||||
|
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
|
||||||
|
class="scrollViewHeigh">
|
||||||
|
内容
|
||||||
|
<view class="">
|
||||||
|
<wd-button type="primary" icon="phone" :block="true"
|
||||||
|
@click="buttonClick" custom-class="custom-shadow">
|
||||||
|
信息按钮
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="scrollBottomHeigh">
|
||||||
|
<!--底部预留区域-->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--滚动区域结束-->
|
||||||
|
</view>
|
||||||
|
</wd-config-provider>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||||||
|
import type {GlobelsChildPropsType} from "@/types/通用类型";
|
||||||
|
import {onTabItemTap} from "@dcloudio/uni-app";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import {useMessage, useToast} from "wot-design-uni";
|
||||||
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||||
|
import {ref} from "vue";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
let toast = useToast("default-toast");
|
||||||
|
let message = useMessage("default-message-box");
|
||||||
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
let pxScreenHeight = ref(); // 手机高度
|
||||||
|
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||||||
|
let pxScrollHeight = ref(); // 滚动区域高度
|
||||||
|
let statusHeight = ref(); // 固定的顶部
|
||||||
|
let meunHeight = ref();//插槽时要用的 高度
|
||||||
|
|
||||||
|
const xiao_six_img = "https://hudie.xiao.band/icon/six.png";
|
||||||
|
const modelValue: GlobelsChildPropsType = {
|
||||||
|
isShowLeft: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgLeft: xiao_six_img},
|
||||||
|
iconTextLeft: {classPrefix: "wd-icon", name: "app", size: 20},
|
||||||
|
},
|
||||||
|
isShowRight: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgRight: xiao_six_img},
|
||||||
|
iconTextRight: {classPrefix: "wd-icon", name: "app", size: 20},
|
||||||
|
},
|
||||||
|
title_text: "六果泡泡", navIsShow: "default",
|
||||||
|
};
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
const homeLeft = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
uni.navigateBack({delta: 1}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const homeRight = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
console.log("右键按键");
|
||||||
|
};
|
||||||
|
let defaultSearchChange = async () => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
console.log("搜索发起");
|
||||||
|
};
|
||||||
|
onTabItemTap(() => {
|
||||||
|
console.log("🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
});
|
||||||
|
|
||||||
|
const ra = ref({
|
||||||
|
name: "ra",
|
||||||
|
power: 100,
|
||||||
|
friend: {
|
||||||
|
name: "loki",
|
||||||
|
power: 80,
|
||||||
|
},
|
||||||
|
enemies: [
|
||||||
|
{
|
||||||
|
name: "hathor",
|
||||||
|
power: 12,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const buttonClick = dash.throttle({interval: 330,}, async () => {
|
||||||
|
console.log("=============");
|
||||||
|
console.log(dash.keys(ra.value));
|
||||||
|
});
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
console.log("监听开始了啦");
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" fill-rule="evenodd" d="M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.71 3.71 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2"/></svg>
|
||||||
|
After Width: | Height: | Size: 614 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="512" height="512" viewBox="0 0 512 512"><defs><clipPath id="master_svg0_25_97"><rect x="0" y="0" width="512" height="512" rx="0"/></clipPath><clipPath id="master_svg1_25_11"><rect x="11" y="39" width="490" height="435" rx="0"/></clipPath></defs><g style="mix-blend-mode:passthrough" clip-path="url(#master_svg0_25_97)"><g clip-path="url(#master_svg1_25_11)"><g><path d="M51.4931,294.222767578125L205.214,437.551767578125C211.594,443.498767578125,220.016,446.812767578125,228.778,446.812767578125C237.54,446.812767578125,245.962,443.498767578125,252.342,437.551767578125L254.554,435.512767578125C238.306,411.638767578125,228.778,382.751767578125,228.778,351.655767578125C228.778,269.073767578125,295.812,202.124767578125,378.5,202.124767578125C402.575,202.124767578125,425.288,207.817767578125,445.45,217.842767578125C446.215,212.320767578125,446.556,206.797767578125,446.556,201.19076757812502L446.556,196.262767578125C446.556,136.874967578125,403.595,86.238267578125,344.983,76.467747578125C306.191,70.010717578125,266.719,82.669897578125,238.986,110.36716757812499L228.778,120.562467578125L218.569,110.36716757812499C190.837,82.669897578125,151.365,70.010717578125,112.573,76.467747578125C53.9601,86.238267578125,11,136.874967578125,11,196.262767578125L11,201.19076757812502C11,236.448767578125,25.6319,270.17876757812496,51.4931,294.222767578125ZM378.5,473.999767578125C446.13,473.999767578125,501,419.199767578125,501,351.655767578125C501,284.112767578125,446.13,229.312767578125,378.5,229.312767578125C310.87,229.312767578125,256,284.112767578125,256,351.655767578125C256,419.199767578125,310.87,473.999767578125,378.5,473.999767578125Z" fill="#2B9939" fill-opacity="1"/></g><g style="mix-blend-mode:passthrough"><path d="M322,415L441,415L441,293.5L419,293.5L419,393L344.5,393L344.5,293.5L322,293.5L322,415Z" fill="#FFFFFF" fill-opacity="1"/></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
@@ -0,0 +1,25 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1422 800" opacity="1">
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="oooscillate-grad">
|
||||||
|
<stop stop-color="hsl(206, 75%, 49%)" stop-opacity="1" offset="0%"></stop>
|
||||||
|
<stop stop-color="hsl(331, 90%, 56%)" stop-opacity="1" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g stroke-width="1" stroke="url(#oooscillate-grad)" fill="none" stroke-linecap="round">
|
||||||
|
<path d="M 0 448 Q 355.5 -100 711 400 Q 1066.5 900 1422 448" opacity="0.05"></path>
|
||||||
|
<path d="M 0 420 Q 355.5 -100 711 400 Q 1066.5 900 1422 420" opacity="0.11"></path>
|
||||||
|
<path d="M 0 392 Q 355.5 -100 711 400 Q 1066.5 900 1422 392" opacity="0.18"></path>
|
||||||
|
<path d="M 0 364 Q 355.5 -100 711 400 Q 1066.5 900 1422 364" opacity="0.24"></path>
|
||||||
|
<path d="M 0 336 Q 355.5 -100 711 400 Q 1066.5 900 1422 336" opacity="0.30"></path>
|
||||||
|
<path d="M 0 308 Q 355.5 -100 711 400 Q 1066.5 900 1422 308" opacity="0.37"></path>
|
||||||
|
<path d="M 0 280 Q 355.5 -100 711 400 Q 1066.5 900 1422 280" opacity="0.43"></path>
|
||||||
|
<path d="M 0 252 Q 355.5 -100 711 400 Q 1066.5 900 1422 252" opacity="0.49"></path>
|
||||||
|
<path d="M 0 224 Q 355.5 -100 711 400 Q 1066.5 900 1422 224" opacity="0.56"></path>
|
||||||
|
<path d="M 0 196 Q 355.5 -100 711 400 Q 1066.5 900 1422 196" opacity="0.62"></path>
|
||||||
|
<path d="M 0 168 Q 355.5 -100 711 400 Q 1066.5 900 1422 168" opacity="0.68"></path>
|
||||||
|
<path d="M 0 140 Q 355.5 -100 711 400 Q 1066.5 900 1422 140" opacity="0.75"></path>
|
||||||
|
<path d="M 0 112 Q 355.5 -100 711 400 Q 1066.5 900 1422 112" opacity="0.81"></path>
|
||||||
|
<path d="M 0 84 Q 355.5 -100 711 400 Q 1066.5 900 1422 84" opacity="0.87"></path>
|
||||||
|
<path d="M 0 56 Q 355.5 -100 711 400 Q 1066.5 900 1422 56" opacity="0.94"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" width="21px" height="21px" viewBox="0 0 21.0 21.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="i0"><path d="M375,0 L375,812 L0,812 L0,0 L375,0 Z"></path></clipPath><clipPath id="i1"><path d="M10.5,0 C16.2989899,0 21,4.70101013 21,10.5 C21,16.2989899 16.2989899,21 10.5,21 C4.70101013,21 0,16.2989899 0,10.5 C0,4.70101013 4.70101013,0 10.5,0 Z"></path></clipPath><clipPath id="i2"><path d="M1.1442189,0.196488581 L4.80352489,3.85741719 C5.0654917,4.11940196 5.0654917,4.5432412 4.80352489,4.80522598 C4.67185571,4.93553254 4.50041147,5 4.32896722,5 C4.15752297,5 3.98607873,4.93416089 3.8557811,4.80385433 L0.196475106,1.14429737 C-0.0654917021,0.882312599 -0.0654917021,0.458473356 0.196475106,0.196488581 C0.458441915,-0.0654961937 0.882252092,-0.0654961937 1.1442189,0.196488581 Z"></path></clipPath><clipPath id="i3"><path d="M8.79582706,0.204213361 C9.06805765,0.476497842 9.06805765,0.91699996 8.79582706,1.18928444 L1.18904901,8.79614303 C1.05222108,8.93299806 0.874059704,9 0.695898329,9 C0.517736955,9 0.33957558,8.93157249 0.204172935,8.79614303 C-0.0680576451,8.52385855 -0.0680576451,8.08335643 0.204172935,7.81107195 L7.81095099,0.204213361 C8.08318157,-0.0680711203 8.52359648,-0.0680711203 8.79582706,0.204213361 Z"></path></clipPath></defs><g transform="translate(-28.0 -103.0)"><g clip-path="url(#i0)"><g transform="translate(28.0 103.0)"><g clip-path="url(#i1)"><polygon points="0,0 21,0 21,21 0,21 0,0" stroke="none" fill="#3FAE36"></polygon></g><g transform="translate(4.0 6.0)"><g transform="translate(0.0 4.0)"><g clip-path="url(#i2)"><polygon points="2.77555756e-17,3.88578059e-16 5,3.88578059e-16 5,5 2.77555756e-17,5 2.77555756e-17,3.88578059e-16" stroke="none" fill="#FFFFFF"></polygon></g></g><g transform="translate(4.0 0.0)"><g clip-path="url(#i3)"><polygon points="-3.88578059e-16,-8.32667268e-17 9,-8.32667268e-17 9,9 -3.88578059e-16,9 -3.88578059e-16,-8.32667268e-17" stroke="none" fill="#FFFFFF"></polygon></g></g></g></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" width="22px" height="22px" viewBox="0 0 22.0 22.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="i0"><path d="M375,0 L375,1503 L0,1503 L0,0 L375,0 Z"></path></clipPath><clipPath id="i1"><path d="M11,0 C17.0751322,0 22,4.92486775 22,11 C22,17.0751322 17.0751322,22 11,22 C4.92486775,22 0,17.0751322 0,11 C0,4.92486775 4.92486775,0 11,0 Z"></path></clipPath><clipPath id="i2"><path d="M4.5,10.1000004 C4.99705627,10.1000004 5.4,10.5029442 5.4,11.0000004 C5.4,11.4970567 4.99705627,11.9000004 4.5,11.9000004 C4.00294373,11.9000004 3.6,11.4970567 3.6,11.0000004 C3.6,10.5029442 4.00294373,10.1000004 4.5,10.1000004 Z M10.5,10.1000004 C10.9970563,10.1000004 11.4,10.5029442 11.4,11.0000004 C11.4,11.4970567 10.9970563,11.9000004 10.5,11.9000004 C10.0029437,11.9000004 9.6,11.4970567 9.6,11.0000004 C9.6,10.5029442 10.0029437,10.1000004 10.5,10.1000004 Z M1.68941212,0.000170820357 C2.0907803,0.000229668162 2.43369115,0.28953039 2.50133343,0.685157657 L2.72049251,1.9669788 C2.75431749,2.16481493 2.92580664,2.30947223 3.12651355,2.30947223 L12.1761237,2.30947223 C12.63111,2.30947223 12.9999492,2.67831149 12.9999492,3.13329778 C12.9999492,3.17363213 12.9969871,3.21391202 12.9910867,3.25381247 L12.2152638,8.5002021 C12.1555146,8.90424784 11.8087404,9.20351297 11.4003008,9.20351297 L3.59144546,9.20351297 C3.19006214,9.20351297 2.84710056,8.91424124 2.77941697,8.51860567 L1.5600678,1.39105958 C1.52622601,1.19324179 1.35474522,1.04860593 1.15405356,1.04860593 L0.524341402,1.04860593 C0.234755642,1.04860593 0,0.813850283 0,0.524264524 C0,0.266892698 0.185458746,0.0528370824 0.430027317,0.00844659783 L0.524341396,0 L1.68941212,0.000170820357 Z M11.4401295,3.35815503 L3.44669425,3.35815503 C3.2192011,3.35815503 3.03478147,3.54257466 3.03478147,3.77006781 L3.04068108,3.83953325 L3.72040228,7.81238283 C3.75424674,8.01019771 3.9257262,8.15483017 4.12641545,8.15483017 L10.8534258,8.15483017 C11.0576761,8.15483017 11.2310794,8.00515413 11.2609191,7.8030953 L11.8476228,3.83024572 C11.8808581,3.60519341 11.7253597,3.39580989 11.5003074,3.36257455 L11.4401295,3.35815503 Z"></path></clipPath></defs><g transform="translate(-323.0 -549.0)"><g clip-path="url(#i0)"><g transform="translate(323.0 549.0)"><g clip-path="url(#i1)"><polygon points="0,0 22,0 22,22 0,22 0,0" stroke="none" fill="#3FAE36"></polygon></g><g transform="translate(4.000000000000005 5.300000000000055)"><g clip-path="url(#i2)"><polygon points="0,0 12.9999492,0 12.9999492,11.9000004 0,11.9000004 0,0" stroke="none" fill="#FFFFFF"></polygon></g></g></g></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,40 @@
|
|||||||
|
import {createPersistedState} from "pinia-plugin-persistedstate";
|
||||||
|
|
||||||
|
// 自定义存储适配器
|
||||||
|
|
||||||
|
// 先创建插件实例
|
||||||
|
export const persistedState = createPersistedState({
|
||||||
|
storage: {
|
||||||
|
setItem(key: string, value: any) {
|
||||||
|
try {
|
||||||
|
uni.setStorageSync(key, value);
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("存储数据失败:", error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getItem(key: string) {
|
||||||
|
try {
|
||||||
|
return uni.getStorageSync(key);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("获取数据失败:", error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
serializer: {
|
||||||
|
serialize: JSON.stringify,
|
||||||
|
deserialize: JSON.parse,
|
||||||
|
},
|
||||||
|
afterHydrate: (context) => {
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 创建 Pinia 实例并应用插件
|
||||||
|
// export const pinia = createPinia();
|
||||||
|
// pinia.use(persistedState);
|
||||||
|
|
||||||
@@ -0,0 +1,219 @@
|
|||||||
|
import {defineStore} from "pinia";
|
||||||
|
import {computed, ref} from "vue";
|
||||||
|
import {用户_登陆} from "@/hooks/接口API";
|
||||||
|
import {useRequest} from "@uni-helper/uni-use";
|
||||||
|
import type {ApiAxiosResponse} from "@/types/通用类型";
|
||||||
|
import type {typeAddressData, typeAddressDataList} from "@/hooks/商城类型文件";
|
||||||
|
import type {
|
||||||
|
card购物车商品类型,
|
||||||
|
six商品列表类型,
|
||||||
|
six商品类型
|
||||||
|
} from "@/subPackages/homeSubPages/商城页面目录/商城商品类型";
|
||||||
|
import type {miniUserInfo, ShareData类型} from "@/hooks/mini用户类型";
|
||||||
|
import type {ShareRecordList积分列表类型} from "@/hooks/用户的积分列表的类型";
|
||||||
|
import type {
|
||||||
|
OrderItemsListDataType,
|
||||||
|
OrderItemType
|
||||||
|
} from "@/subPackages/homeSubPages/订单数据页面/小程序商城订单列表类型";
|
||||||
|
import type {代金券数据类型, 发券接口返回数据类型} from "@/hooks/发放优惠券的回调类型";
|
||||||
|
|
||||||
|
export const useMainXiaoStore = defineStore("MainXiaoStore", () => {
|
||||||
|
const images_url_search = ref("https://hudie.xiao.band/search.png");
|
||||||
|
const vibrateShort震动效果 = ref({heavy: "vheavy", light: "light", medium: "medium"});
|
||||||
|
const extInfo_产品售后客服账号 = ref("https://work.weixin.qq.com/kfid/kfc6147d0c140c18671");
|
||||||
|
const extInfo_推广员账号服务 = ref("https://work.weixin.qq.com/kfid/kfcd5fba89a02d2ceb2");
|
||||||
|
let zizi = ref({height: "200rpx"});
|
||||||
|
const wecom_img = ref<string>();
|
||||||
|
// 业务请求的 相关数据,以及类型
|
||||||
|
let mini_openid = ref<null | string>(null); //用户的小程序openid
|
||||||
|
let mini_unionid = ref<null | string>(null); // 用户的小程序unioid
|
||||||
|
const mini_user_data = ref<miniUserInfo>();
|
||||||
|
const mini_代金券数据 = ref<代金券数据类型>();
|
||||||
|
let mini_user_积分数据 = ref<ShareData类型>();
|
||||||
|
let mini_积分列表数据 = ref<ShareRecordList积分列表类型>([]);
|
||||||
|
const 积分展示数据的列表 = ref<ShareRecordList积分列表类型>();
|
||||||
|
let superior_unionid = ref<null | string>(null);// 上级分享者的openid
|
||||||
|
let addressDataList = ref<typeAddressDataList>([]);
|
||||||
|
let six_goods_list_data = ref<six商品列表类型>([]);
|
||||||
|
let six_good = ref<six商品类型>(); // 单独的商品 数据
|
||||||
|
let orderListData = ref<OrderItemsListDataType>([]); // 订单列表类型
|
||||||
|
let emsOrder订单 = ref<OrderItemType>();// 这里拿到的是用户查询所有的订单时 也就是下完订单后生成的数据;
|
||||||
|
const card购物车列表数据 = ref<Array<card购物车商品类型>>([]);
|
||||||
|
|
||||||
|
// 当前用户使用的默认地址对象
|
||||||
|
let addressCurrent当前默认地址 = computed(() => {
|
||||||
|
return addressDataList.value.find((address,) => {
|
||||||
|
return address.isDefaultAddress === "是默认地址";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
const wechatLogin = async (scene: number | undefined, superior_unionid: string, shareTicket: string | undefined): Promise<void> => {
|
||||||
|
try {
|
||||||
|
// 1. 获取 code
|
||||||
|
let loginSuccessCallbackResult = await wx.login();
|
||||||
|
|
||||||
|
let code = loginSuccessCallbackResult.code;
|
||||||
|
// 2. 构造请求参数
|
||||||
|
const params: any = {code, shareTicket, scene, superior_unionid};
|
||||||
|
// 3. 如果是群场景，获取分享信息
|
||||||
|
if (scene === 1044 || shareTicket) {
|
||||||
|
const share = await new Promise<UniNamespace.GetGroupEnterInfoSuccessCallbackResult>((resolve) => {
|
||||||
|
uni.getGroupEnterInfo({
|
||||||
|
needGroupOpenID: true, success: (result) => {
|
||||||
|
resolve(result);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
params.iv = share.iv;
|
||||||
|
params.encryptedData = share.encryptedData;
|
||||||
|
}
|
||||||
|
// let data = await instance.post<ApiAxiosResponse<Array<string>, UserType>>(用户_登陆, params);
|
||||||
|
let data = await useRequest<ApiAxiosResponse<Array<string>, miniUserInfo>>(用户_登陆, {
|
||||||
|
method: "POST", data: {...params}
|
||||||
|
});
|
||||||
|
if (data.data.value?.resData.dictData.mini_openid && data.data.value.resData.dictData.unionid) {
|
||||||
|
// 判断值确实存在了, 就赋值
|
||||||
|
mini_openid.value = data.data.value?.resData.dictData.mini_openid;
|
||||||
|
mini_unionid.value = data.data.value?.resData.dictData.unionid;
|
||||||
|
mini_user_data.value = data.data.value?.resData.dictData ?? {};
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("微信登录失败:", err);
|
||||||
|
throw err; // 或返回默认值
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 常用的方法
|
||||||
|
const 请求拿到当前用户注册过的用户地址 = async (uri: string, self_mini_openid: string, self_mini_unionid: string): Promise<void> => {
|
||||||
|
useRequest<ApiAxiosResponse<Array<typeAddressData>>>(uri, {
|
||||||
|
method: "POST",
|
||||||
|
data: {self_mini_openid: self_mini_openid, self_mini_unionid: self_mini_unionid,}
|
||||||
|
}).then((data) => {
|
||||||
|
addressDataList.value = data.data.value?.resData.listData ?? [];
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const add添加积分_通知好积分 = async (uri: string, self_mini_openid: string, self_mini_unionid: string, share分享者_unionid: string) => {
|
||||||
|
// 请求积分,添加积分 还需要在app.vue中判断一下, 分享的类型
|
||||||
|
useRequest(uri, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: self_mini_openid,
|
||||||
|
self_mini_unionid: self_mini_unionid,
|
||||||
|
share分享者_unionid: share分享者_unionid
|
||||||
|
}
|
||||||
|
}).then(() => {
|
||||||
|
console.log("通知好友积分添加成功了");
|
||||||
|
}).catch((reason) => {
|
||||||
|
console.log(reason, "通知好友请求失败了");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const add添加好物推荐分享积分 = async (uri: string, self_mini_openid: string, self_mini_unionid: string, share分享者_unionid: string, share分享的商品ID: string) => {
|
||||||
|
try {
|
||||||
|
let data = await useRequest(uri, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: self_mini_openid, self_mini_unionid: self_mini_unionid,
|
||||||
|
share分享者_unionid: share分享者_unionid, share分享的商品ID: share分享的商品ID
|
||||||
|
}
|
||||||
|
});
|
||||||
|
six_good.value = data.data.value;
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e, "===================");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const add添加小程序分享积分 = async (uri: string, self_mini_openid: string, self_mini_unionid: string, share分享者_unionid: string,) => {
|
||||||
|
try {
|
||||||
|
let data = await useRequest(uri, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: self_mini_openid, self_mini_unionid: self_mini_unionid,
|
||||||
|
share分享者_unionid: share分享者_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
six_good.value = data.data.value;
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const query_积分统计查询 = async (uri: string, self_mini_openid: string, self_mini_unionid: string) => {
|
||||||
|
try {
|
||||||
|
let data = await useRequest(uri, {
|
||||||
|
method: "POST", data: {self_mini_openid: self_mini_openid, self_mini_unionid: self_mini_unionid,}
|
||||||
|
});
|
||||||
|
mini_user_积分数据.value = data.data.value;
|
||||||
|
console.log(data.data.value);
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const user_用户进入小程序立即调用请求将IP转换地址 = async (uri: string, self_mini_openid: string, self_mini_unionid: string) => {
|
||||||
|
await useRequest(uri, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: self_mini_openid, self_user_unionid: self_mini_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const 订单_查询所有的订单列表数据 = async (uri: string, self_mini_openid: string, self_mini_unionid: string) => {
|
||||||
|
|
||||||
|
try {
|
||||||
|
let data = await useRequest<ApiAxiosResponse<OrderItemsListDataType>>(uri, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: self_mini_openid, self_user_unionid: self_mini_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
orderListData.value = data.data.value?.resData.listData ?? [];
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
const 用户_IP地址转信息 = async (uri: string, self_mini_openid: string, self_mini_unionid: string) => {
|
||||||
|
await useRequest(uri, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: self_mini_openid, self_mini_unionid: self_mini_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const 代金券默认领券事件 = async (uri: string, self_mini_openid: string, self_mini_unionid: string) => {
|
||||||
|
//
|
||||||
|
let data = await useRequest(uri, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: self_mini_openid, self_mini_unionid: self_mini_unionid
|
||||||
|
}
|
||||||
|
});
|
||||||
|
mini_代金券数据.value = data.data.value;
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
zizi,
|
||||||
|
wechatLogin,
|
||||||
|
mini_openid,
|
||||||
|
mini_unionid,
|
||||||
|
superior_unionid,
|
||||||
|
vibrateShort震动效果,
|
||||||
|
extInfo_产品售后客服账号,
|
||||||
|
extInfo_推广员账号服务,
|
||||||
|
mini_user_积分数据,
|
||||||
|
addressDataList,
|
||||||
|
wecom_img,
|
||||||
|
six_goods_list_data,
|
||||||
|
addressCurrent当前默认地址,
|
||||||
|
six_good,
|
||||||
|
orderListData,
|
||||||
|
emsOrder订单, mini_代金券数据,
|
||||||
|
mini_user_data, card购物车列表数据,
|
||||||
|
mini_积分列表数据,
|
||||||
|
images_url_search, 积分展示数据的列表,
|
||||||
|
请求拿到当前用户注册过的用户地址,
|
||||||
|
user_用户进入小程序立即调用请求将IP转换地址,
|
||||||
|
add添加小程序分享积分,
|
||||||
|
add添加积分_通知好积分,
|
||||||
|
add添加好物推荐分享积分,
|
||||||
|
query_积分统计查询,
|
||||||
|
订单_查询所有的订单列表数据,
|
||||||
|
用户_IP地址转信息, 代金券默认领券事件
|
||||||
|
};
|
||||||
|
},
|
||||||
|
{
|
||||||
|
persist: {
|
||||||
|
pick: ["zizi", "mini_openid", "mini_unionid", "addressCurrent当前默认地址",
|
||||||
|
"mini_积分列表数据", "images_url_search", "mini_存储代金券的数据", "mini_代金券数据",
|
||||||
|
"superior_unionid", "addressDataList", "mini_user_data", "wecom_img", "mini_user_积分数据", "extInfo_产品售后客服账号", "vibrateShort震动效果",
|
||||||
|
"six_goods_list_data", "six_good", "emsOrder订单", "orderListData", "extInfo_推广员账号服务", "mini_user_用户领券的状态",],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
@@ -0,0 +1,236 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
//@import "@/assets/demo.scss";
|
||||||
|
|
||||||
|
@mixin line-color {
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0%, 100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
animation: gradientFlow 5s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-screen {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "xiaoFont", sans-serif;
|
||||||
|
height: v-bind(pxScreenHeight);
|
||||||
|
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||||||
|
background-size: 750rpx;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-container {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(pxWindowHeight);
|
||||||
|
|
||||||
|
.status-wifi-nav {
|
||||||
|
/*状态栏的高度 这里的值不能动*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(statusHeight);
|
||||||
|
|
||||||
|
:deep(.default-view-slot) {
|
||||||
|
line-height: v-bind(meunHeight);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: v-bind(meunHeight);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.default-view-slot-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||||||
|
border-radius: calc(v-bind(meunHeight) / 2);
|
||||||
|
|
||||||
|
.title-imgimage_item {
|
||||||
|
width: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
height: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right-text {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.grit-content {
|
||||||
|
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight));
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-auto-rows: auto 1fr auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.scrollTopHeigh {
|
||||||
|
/*在滚动区域内的, 可以自定义的高度*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
//background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollViewHeigh {
|
||||||
|
/*滚动页面区域范围*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
/*button按钮的 阴影样式可以直接使用*/
|
||||||
|
.custom-class-button {
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollBottomHeigh {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 1px;
|
||||||
|
@include line-color();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="phone-screen">
|
||||||
|
<wd-config-provider :theme="theme">
|
||||||
|
<view class="root-container">
|
||||||
|
<view class="status-wifi-nav">
|
||||||
|
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||||||
|
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||||||
|
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||||||
|
@homeRight="homeRight">
|
||||||
|
<template v-slot:default>
|
||||||
|
<view class="default-view-slot" @click="defaultSearchChange">
|
||||||
|
<view class="default-view-slot-left"></view>
|
||||||
|
<view class="default-view-slot-right">
|
||||||
|
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||||||
|
src="https://hudie.xiao.band/search.png" webp/>
|
||||||
|
<view class="default-view-slot-right-text">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 30rpx"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</ChildComScroll>
|
||||||
|
</view>
|
||||||
|
<!--分隔线,上面的是子组件-->
|
||||||
|
|
||||||
|
<!-- 滚动区域开始-->
|
||||||
|
<view class="grit-content">
|
||||||
|
<view class="scrollTopHeigh"><!--预留的空间高度-->
|
||||||
|
<user-component-points-card></user-component-points-card>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
|
||||||
|
class="scrollViewHeigh">
|
||||||
|
<view class="line-widht-number" style="height: 10rpx"></view>
|
||||||
|
<view class="line-widht-number" style="height: 10rpx"></view>
|
||||||
|
<user-com-servise></user-com-servise>
|
||||||
|
<user-com-points-list-data></user-com-points-list-data>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
<view class="scrollBottomHeigh">
|
||||||
|
<!--底部预留区域-->
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--滚动区域结束-->
|
||||||
|
</view>
|
||||||
|
</wd-config-provider>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||||||
|
import {ref} from "vue";
|
||||||
|
import type {GlobelsChildPropsType} from "@/types/通用类型";
|
||||||
|
import {onTabItemTap} from "@dcloudio/uni-app";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import {useMessage, useToast} from "wot-design-uni";
|
||||||
|
import UserComServise from "@/subPackages/homeSubPages/用户积分页面/user-com-servise.vue";
|
||||||
|
import UserComPointsListData from "@/subPackages/homeSubPages/用户积分页面/user-com-points-list-data.vue";
|
||||||
|
import UserComponentPointsCard from "@/subPackages/homeSubPages/用户积分页面/user-component-points-card.vue";
|
||||||
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
let toast = useToast("default-toast");
|
||||||
|
let message = useMessage("default-message-box");
|
||||||
|
let show = ref<boolean>(false);
|
||||||
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
let pxScreenHeight = ref(); // 手机高度
|
||||||
|
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||||||
|
let pxScrollHeight = ref(); // 滚动区域高度
|
||||||
|
let statusHeight = ref(); // 固定的顶部
|
||||||
|
let meunHeight = ref();//插槽时要用的 高度
|
||||||
|
const modelValue: GlobelsChildPropsType = {
|
||||||
|
isShowLeft: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
|
||||||
|
iconTextLeft: {classPrefix: "xiaozizi", name: "arrow-left-circle-line", size: 23},
|
||||||
|
},
|
||||||
|
isShowRight: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
|
||||||
|
iconTextRight: {classPrefix: "xiaozizi", name: "jifen3", size: 23},
|
||||||
|
},
|
||||||
|
title_text: "积分管理", navIsShow: "default",
|
||||||
|
};
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
const homeLeft = () => {
|
||||||
|
wx.vibrateShort({type: "light"});
|
||||||
|
uni.navigateBack({delta: 1}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const homeRight = () => {
|
||||||
|
wx.vibrateShort({type: "light"});
|
||||||
|
console.log("右键按键");
|
||||||
|
};
|
||||||
|
let defaultSearchChange = async () => {
|
||||||
|
wx.vibrateShort({type: "light"});
|
||||||
|
console.log("搜索发起");
|
||||||
|
};
|
||||||
|
onTabItemTap(() => {
|
||||||
|
console.log("🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
|
||||||
|
wx.vibrateShort({type: "light"});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
// 商品详情图片列表组件
|
||||||
|
.root-com {
|
||||||
|
width: 750rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.images-list {
|
||||||
|
width: 686rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
//background: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 22rpx 24rpx 26rpx 24rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
|
||||||
|
.images-item {
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
box-shadow: inset 0 0 0 1px red;
|
||||||
|
|
||||||
|
:deep(.customImage) {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
//border: 1px dashed rgba(255, 255, 255, 0.6);
|
||||||
|
|
||||||
|
.customIcon {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="root-com">
|
||||||
|
<view class="images-list">
|
||||||
|
<view
|
||||||
|
v-for="(value,key) in xiaoMain.six_good?.goods_商品销售规格?.goods_sku?.goods_sku_list.at(0)?.goods_sku_详情图"
|
||||||
|
:key="key" class="images-item">
|
||||||
|
<wd-img custom-class="customImage" custom-image="customIcon" mode="widthFix"
|
||||||
|
:src="value">
|
||||||
|
<template #error>
|
||||||
|
<view class="error-wrap">❌</view>
|
||||||
|
</template>
|
||||||
|
<template #loading>
|
||||||
|
<view class="loading-wrap">
|
||||||
|
<wd-loading :size="20" color="#fff" type="spinner"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-img>
|
||||||
|
<view class="line-widht-number" style="height: 10rpx"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-list-images"});
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
@@ -0,0 +1,194 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
// 多行文本溢出显示...
|
||||||
|
@mixin text-ellipsis-multi($line-clamp: 2) {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: $line-clamp;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.root-com {
|
||||||
|
width: 750rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.group_5 {
|
||||||
|
width: 686rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 270rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 22rpx;
|
||||||
|
//background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
|
||||||
|
.section_3 {
|
||||||
|
height: 88rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.section_3_height {
|
||||||
|
height: 58rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
|
||||||
|
.text-wrapper_2 {
|
||||||
|
.text_5 {
|
||||||
|
color: #F55726;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding-right: 3rpx;
|
||||||
|
padding-left: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_6 {
|
||||||
|
color: #F55726;
|
||||||
|
font-size: 42rpx;
|
||||||
|
padding-right: 25rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_6 {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_8 {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 58rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 22rpx;
|
||||||
|
//color: #CCCCCC;
|
||||||
|
line-height: 68rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_11 {
|
||||||
|
height: 88rpx;
|
||||||
|
//width: 686rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
//color: #FFFFFF;
|
||||||
|
line-height: 44rpx;
|
||||||
|
//text-align: justify;
|
||||||
|
@include text-ellipsis-multi;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section_4 {
|
||||||
|
display: flex;
|
||||||
|
height: 94rpx;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.text-wrapper_3 {
|
||||||
|
width: 108rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
background: #40AE36;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.text_12 {
|
||||||
|
width: 88rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 32rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
:deep(.text_13) {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="root-com">
|
||||||
|
<view class="group_5 flex-col">
|
||||||
|
<view class="section_3 flex-row">
|
||||||
|
<view class="section_3_height">
|
||||||
|
<view class="text-wrapper_2">
|
||||||
|
<text class="text_5">￥</text>
|
||||||
|
<text class="text_6">{{ 会员价 }}</text>
|
||||||
|
<text class="text_7"></text>
|
||||||
|
</view>
|
||||||
|
<view class="text_8">￥{{ 零售价 }}份</view>
|
||||||
|
<view class="group_6 flex-col"></view>
|
||||||
|
<wd-tag plain type="primary" v-if=" xiaoMain.six_good?.goods_商品标签.at(0) ">
|
||||||
|
{{ xiaoMain.six_good?.goods_商品标签.at(0) }}
|
||||||
|
</wd-tag>
|
||||||
|
<view class="group_7 flex-col" style="width: 22rpx"></view>
|
||||||
|
<wd-tag plain type="warning" v-if=" xiaoMain.six_good?.goods_商品标签.at(1) ">
|
||||||
|
{{ xiaoMain.six_good?.goods_商品标签.at(1) }}
|
||||||
|
</wd-tag>
|
||||||
|
<view class="group_7 flex-col" style="width: 22rpx"></view>
|
||||||
|
<wd-tag plain type="success" v-if=" xiaoMain.six_good?.goods_商品标签.at(2) ">
|
||||||
|
{{ xiaoMain.six_good?.goods_商品标签.at(2) }}
|
||||||
|
</wd-tag>
|
||||||
|
<view class="group_7 flex-col" style="width: 22rpx"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="text_11">
|
||||||
|
<!-- 首发抢鲜 🔥东北黑土地孕育➕一年一季自然熟➕非转基因 低脂低糖0️⃣钠➕-->
|
||||||
|
{{ xiaoMain.six_good?.goods_商品标题 }}
|
||||||
|
</view>
|
||||||
|
<view class="section_4 flex-row justify-between">
|
||||||
|
<view class="text-wrapper_3 flex-col">
|
||||||
|
<text class="text_12">{{ xiaoMain.six_good?.goods_商家推荐标签.at(0) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 10rpx"></view>
|
||||||
|
<wd-tag type="warning" custom-class="space text_13"
|
||||||
|
v-if="xiaoMain.six_good?.goods_商家推荐标签.at(1)">
|
||||||
|
{{ xiaoMain.six_good?.goods_商家推荐标签.at(1) }}
|
||||||
|
</wd-tag>
|
||||||
|
<wd-tag type="warning" custom-class="space text_13"
|
||||||
|
v-if=" xiaoMain.six_good?.goods_商家推荐标签.at(2) ">
|
||||||
|
{{ xiaoMain.six_good?.goods_商家推荐标签.at(2) }}
|
||||||
|
|
||||||
|
</wd-tag>
|
||||||
|
<wd-tag type="warning" custom-class="space text_13"
|
||||||
|
v-if=" xiaoMain.six_good?.goods_商家推荐标签.at(3) ">
|
||||||
|
{{ xiaoMain.six_good?.goods_商家推荐标签.at(3) }}
|
||||||
|
</wd-tag>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// Specs
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import {computed} from "vue";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-params"});
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
let 会员价 = computed(() => {
|
||||||
|
const rawPrice = xiaoMain.six_good?.goods_商品销售规格?.会员价 ?? 0;
|
||||||
|
|
||||||
|
// 2. 除以 100
|
||||||
|
// 3. (可选) 保留两位小数，例如 3.00
|
||||||
|
return rawPrice / 100;
|
||||||
|
});
|
||||||
|
let 零售价 = computed(() => {
|
||||||
|
const rawPrice = xiaoMain.six_good?.goods_商品销售规格?.零售价格 ?? 0;
|
||||||
|
|
||||||
|
// 2. 除以 100
|
||||||
|
// 3. (可选) 保留两位小数，例如 3.00
|
||||||
|
return rawPrice / 100;
|
||||||
|
});
|
||||||
|
console.log(xiaoMain.six_good?.goods_商品标题, "==============");
|
||||||
|
</script>
|
||||||
|
|
||||||
@@ -0,0 +1,796 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
.root-com {
|
||||||
|
width: 750rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.goods-nav {
|
||||||
|
width: 686rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.goods-left {
|
||||||
|
width: 240rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.left-item {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.item-top {
|
||||||
|
height: 50rpx;
|
||||||
|
width: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 35rpx;
|
||||||
|
|
||||||
|
.title-imgimage_item {
|
||||||
|
height: 40rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-bottom {
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
//background-color: violet;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-right {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.button-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.button-left) {
|
||||||
|
background: linear-gradient(90deg, #60F3FF, #088FEB);
|
||||||
|
//background: linear-gradient(90deg, #ffd8bb, #ef8a01);
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-top-right-radius: 80rpx;
|
||||||
|
border-bottom-right-radius: 80rpx;
|
||||||
|
flex: 1;
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
|
||||||
|
.xiaozizi {
|
||||||
|
//color: #ff934c;
|
||||||
|
font-size: 30rpx;
|
||||||
|
transform: translateY(-2rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.button-right) {
|
||||||
|
//border-top-right-radius: 80rpx;
|
||||||
|
//border-bottom-right-radius: 80rpx;
|
||||||
|
background: linear-gradient(90deg, #0053B8, #1E83FF,);
|
||||||
|
//background: linear-gradient(90deg, #1c8769, #f9e8fa,);
|
||||||
|
border-top-left-radius: 80rpx;
|
||||||
|
border-bottom-left-radius: 80rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
|
||||||
|
.xiaozizi {
|
||||||
|
color: #15ba11;
|
||||||
|
font-size: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
:deep(.action-sheet) {
|
||||||
|
min-height: 900rpx;
|
||||||
|
width: 720rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.product-header {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
//border-bottom: 1rpx solid #333;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.product-image {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
//background-color: #2a2a2a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
|
||||||
|
.product-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
//color: #ffffff;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-desc {
|
||||||
|
font-size: 28rpx;
|
||||||
|
//color: #aaa;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-display {
|
||||||
|
.current-price {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
|
||||||
|
.currency {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-number {
|
||||||
|
font-size: 48rpx;
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-price {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #888;
|
||||||
|
text-decoration: line-through;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-spec-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #4dabf7;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
background-color: rgba(77, 171, 247, 0.1);
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 规格选择区域 */
|
||||||
|
.spec-section {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
/* 通用标题样式 */
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
//color: #ffffff;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 1rpx solid #333;
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -8rpx;
|
||||||
|
left: 0;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 4rpx;
|
||||||
|
background: linear-gradient(90deg, #ff6b6b, #ff8e53);
|
||||||
|
border-radius: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: #ff6b6b;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec-options {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec-option {
|
||||||
|
padding: 12rpx 30rpx;
|
||||||
|
//background-color: #2a2a2a;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
border: 1rpx solid #444;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
|
||||||
|
&.spec-selected {
|
||||||
|
border-color: #1E83FF;
|
||||||
|
//background-color: #1E83FF;
|
||||||
|
position: relative;
|
||||||
|
//box-shadow: 0 4rpx 20rpx #1E83FF;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '✓';
|
||||||
|
position: absolute;
|
||||||
|
right: 20rpx;
|
||||||
|
top: 20rpx;
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
background-color: #1E83FF;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec-name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
//color: #ffffff;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec-price-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.spec-price {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
|
||||||
|
.currency {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-number {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-left: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-price-tag {
|
||||||
|
font-size: 24rpx;
|
||||||
|
//color: #888;
|
||||||
|
text-decoration: line-through;
|
||||||
|
padding: 6rpx 12rpx;
|
||||||
|
background-color: rgba(136, 136, 136, 0.1);
|
||||||
|
border-radius: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec-section-sku {
|
||||||
|
/*选择*/
|
||||||
|
/* 通用标题样式 */
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
//color: #ffffff;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 1rpx solid #333;
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -8rpx;
|
||||||
|
left: 0;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 4rpx;
|
||||||
|
background: linear-gradient(90deg, #ff6b6b, #ff8e53);
|
||||||
|
border-radius: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: #ff6b6b;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec-options-sku {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr; //分成多少列 每一列的宽度 相对于父容器总宽度
|
||||||
|
grid-template-rows: auto; // 分多少行, 每一行的高度, 相对于父容器的总高度
|
||||||
|
justify-items: center; // 子元素: 控制每个网格项在其格子内水平居中
|
||||||
|
align-items: center; // 子元素: 在每一行高度中的位置
|
||||||
|
.spec-options-sku-items {
|
||||||
|
padding: 13rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 购买数量 */
|
||||||
|
.quantity-section {
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
//color: #ffffff;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 1rpx solid #333;
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -8rpx;
|
||||||
|
left: 0;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 4rpx;
|
||||||
|
background: linear-gradient(90deg, #ff6b6b, #ff8e53);
|
||||||
|
border-radius: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: #ff6b6b;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 30rpx;
|
||||||
|
|
||||||
|
.quantity-btn {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
//background-color: #2a2a2a;
|
||||||
|
border: 2rpx solid #444;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover:not(.quantity-disabled) {
|
||||||
|
border-color: #ff6b6b;
|
||||||
|
background-color: rgba(255, 107, 107, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.quantity-disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-input {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
border: 2rpx solid #444;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
//color: #ffffff;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: #ff6b6b;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-inner-spin-button,
|
||||||
|
&::-webkit-outer-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部操作栏 */
|
||||||
|
.action-footer {
|
||||||
|
//background-color: #1a1a1a;
|
||||||
|
padding: 20rpx 30rpx 40rpx;
|
||||||
|
//border-top: 1rpx solid #333;
|
||||||
|
margin: 0 -30rpx -30rpx;
|
||||||
|
|
||||||
|
|
||||||
|
.total-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.total-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
//color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-amount {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
|
||||||
|
.currency {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-number {
|
||||||
|
font-size: 48rpx;
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-left: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.add-cart {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
margin-right: 12rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.buy-now {
|
||||||
|
background: linear-gradient(135deg, #ff6b6b, #ff8e53);
|
||||||
|
color: #ffffff;
|
||||||
|
box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.3);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 8rpx 25rpx rgba(255, 107, 107, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="root-com">
|
||||||
|
<view class="goods-nav">
|
||||||
|
<view class="goods-right">
|
||||||
|
|
||||||
|
<wd-button type="primary" icon="gouwuche" :block="true" classPrefix="xiaozizi"
|
||||||
|
@click="打开支付弹窗" custom-class="button-left">
|
||||||
|
加入购物车
|
||||||
|
</wd-button>
|
||||||
|
<wd-button icon="weixinzhifu" :block="true" classPrefix="xiaozizi"
|
||||||
|
@click="打开支付弹窗" custom-class="button-right">
|
||||||
|
立即购买
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-action-sheet v-model:modelValue="showRules" :lazyRender="true" :zIndex="99999" custom-class="action-sheet"
|
||||||
|
title="选择规格" @close="关闭弹框">
|
||||||
|
<view style="padding:15rpx">
|
||||||
|
<!-- 内容区域-->
|
||||||
|
<!-- 信息头部-->
|
||||||
|
<view class="product-header">
|
||||||
|
<image :src="goods_sku_list_item?.goods_sku_list.at(index_goods_sku_子元素)?.goods_sku_主图.at(0)"
|
||||||
|
class="product-image"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
<view class="header-info">
|
||||||
|
<view class="product-title">六果香洗衣液</view>
|
||||||
|
<view class="product-desc">源自天然酵素，深层洁净衣物</view>
|
||||||
|
<view class="price-display">
|
||||||
|
<view class="current-price">
|
||||||
|
<text class="currency">¥</text>
|
||||||
|
<!-- 当前商品的会员价格-->
|
||||||
|
<text class="price-number">
|
||||||
|
{{
|
||||||
|
(xiaoMain.six_good?.goods_商品销售规格?.会员价 ?? 0) / 100
|
||||||
|
}}
|
||||||
|
</text>
|
||||||
|
<!-- 当前商品的正常售价-->
|
||||||
|
<text
|
||||||
|
v-if=" xiaoMain.six_good?.goods_商品销售规格?.零售价格"
|
||||||
|
class="member-price">
|
||||||
|
¥{{
|
||||||
|
(xiaoMain.six_good?.goods_商品销售规格?.零售价格 ?? 0) / 100
|
||||||
|
}}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<!-- 已选中的规格-->
|
||||||
|
<view class="selected-spec-text">已选：{{
|
||||||
|
xiaoMain.six_good?.goods_商品销售规格?.销售规格
|
||||||
|
}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 选取规格-->
|
||||||
|
<view class="spec-section">
|
||||||
|
<view class="section-title">
|
||||||
|
<text class="title-text">选择规格</text>
|
||||||
|
<text class="required">*</text>
|
||||||
|
</view>
|
||||||
|
<view class="spec-options">
|
||||||
|
<view
|
||||||
|
:class="{ 'spec-selected': true}" class="spec-option">
|
||||||
|
<view class="spec-name">{{ xiaoMain.six_good?.goods_商品销售规格?.销售规格 }}</view>
|
||||||
|
<view class="spec-price-info">
|
||||||
|
<view class="spec-price">
|
||||||
|
<text class="currency">¥</text>
|
||||||
|
<text class="price-number">{{
|
||||||
|
(xiaoMain.six_good?.goods_商品销售规格?.会员价 ?? 0) / 100
|
||||||
|
}}
|
||||||
|
</text>
|
||||||
|
<!-- <text class="price-number">2222</text>-->
|
||||||
|
</view>
|
||||||
|
<view class="member-price-tag">
|
||||||
|
零售价 ¥{{
|
||||||
|
(xiaoMain.six_good?.goods_商品销售规格?.零售价格 ?? 0) / 100
|
||||||
|
}}
|
||||||
|
<!-- 零售价 ¥3333-->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="spec-section-sku">
|
||||||
|
<view class="section-title">
|
||||||
|
<text class="title-text">{{ goods_sku_list_item?.goods_select_title }}</text>
|
||||||
|
<text class="required">*</text>
|
||||||
|
</view>
|
||||||
|
<view class="spec-options-sku">
|
||||||
|
<!-- sku的选项,比如可以选择香型,-->
|
||||||
|
<view v-for="(spec, goods_sku_index) in goods_sku_list_item?.goods_sku_list"
|
||||||
|
:key="goods_sku_index"
|
||||||
|
:class="{ 'spec-selected': selectedSpecIndex === goods_sku_index }"
|
||||||
|
class="spec-options-sku-items"
|
||||||
|
@click="选取规则事件(goods_sku_index)">
|
||||||
|
<wd-button :plain="index_goods_sku_子元素!==goods_sku_index"
|
||||||
|
:type="index_goods_sku_子元素===goods_sku_index?'warning':'primary'"
|
||||||
|
custom-class="custom-shadow">
|
||||||
|
{{ spec.goods_sku_name }}
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 购买数量 -->
|
||||||
|
<view class="quantity-section">
|
||||||
|
<!-- 对购买的商品数量进行 加 和 减-->
|
||||||
|
<view class="section-title">购买数量</view>
|
||||||
|
<view class="quantity-control">
|
||||||
|
<view :class="{ 'quantity-disabled': 2 <= 1 }" class="quantity-btn" @click="商品数量减">
|
||||||
|
<text class="btn-icon">－</text>
|
||||||
|
</view>
|
||||||
|
<view class="quantity-input">{{ 当前选中商品的数量 }}</view>
|
||||||
|
<view class="quantity-btn" @click="商品数量加">
|
||||||
|
<text class="btn-icon">＋</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 内容区域-->
|
||||||
|
<!-- 底部操作栏 -->
|
||||||
|
<view class="action-footer">
|
||||||
|
<view class="total-section">
|
||||||
|
<view class="total-label">合计：</view>
|
||||||
|
<view class="total-amount">
|
||||||
|
<text class="currency">¥</text>
|
||||||
|
<text class="price-number">{{ 当前商品总金额 / 100 }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="action-buttons">
|
||||||
|
|
||||||
|
<view class="action-btn buy-now" @click="立即购买">
|
||||||
|
<wd-icon :size="20" classPrefix="wd-icon" name="qrcode"/>
|
||||||
|
<text class="btn-text">立即购买</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-action-sheet>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {computed, ref} from "vue";
|
||||||
|
import type {ApiAxiosResponse} from "@/types/通用类型";
|
||||||
|
import {useRequest} from "@uni-helper/uni-use";
|
||||||
|
import {商城详情页_下单支付} from "@/hooks/接口API";
|
||||||
|
import {useThrottleFn} from "@vueuse/shared";
|
||||||
|
import type {card购物车商品类型} from "@/subPackages/homeSubPages/商城页面目录/商城商品类型";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-pay-card"});
|
||||||
|
|
||||||
|
let showRules = ref(false);
|
||||||
|
const selectedSpecIndex = ref<number>(0);// 这是一个默认值: 选中商品销售规格列表的第一个商品
|
||||||
|
|
||||||
|
const 当前选中商品的数量 = ref(1);
|
||||||
|
const index_goods_sku_子元素 = ref(0);
|
||||||
|
const goods_sku_list_item = computed(() => {
|
||||||
|
return xiaoMain.six_good?.goods_商品销售规格?.goods_sku;
|
||||||
|
});
|
||||||
|
const goods_sku_current = computed(() => {
|
||||||
|
return goods_sku_list_item.value?.goods_sku_list.at(index_goods_sku_子元素.value);
|
||||||
|
});
|
||||||
|
const six_goods_下单商品 = computed<card购物车商品类型>(() => {
|
||||||
|
const spec = xiaoMain.six_good?.goods_商品销售规格;
|
||||||
|
const sku = goods_sku_current.value;
|
||||||
|
|
||||||
|
return {
|
||||||
|
goods_商品品牌: xiaoMain.six_good?.goods_商品品牌 ?? "",
|
||||||
|
goods_商品标题: spec?.goods_商品标题 ?? "",
|
||||||
|
零售价格: spec?.零售价格 ?? 0,
|
||||||
|
会员价: spec?.会员价 ?? 0,
|
||||||
|
销售规格: spec?.销售规格 ?? "",
|
||||||
|
单个商品实际支付价格: spec?.单个商品实际支付价格 ?? 0,
|
||||||
|
// ✅ 直接计算，不引用其他 computed
|
||||||
|
单个商品订单总金额: (spec?.会员价 ?? 0) * 当前选中商品的数量.value,
|
||||||
|
单个商品订单数量: 当前选中商品的数量.value,
|
||||||
|
推荐积分: spec?.推荐积分 ?? {},
|
||||||
|
// 商品条码: spec?.商品条码,
|
||||||
|
商品条码: sku?.goods_sku_条形码 ?? "",
|
||||||
|
商品ID: sku?.goods_sku_id ?? "",
|
||||||
|
goods_sku_name: sku?.goods_sku_name ?? "",
|
||||||
|
goods_sku_主图: sku?.goods_sku_主图?.at(0) ?? "",
|
||||||
|
goods_sku_详情图: sku?.goods_sku_详情图 ?? []
|
||||||
|
};
|
||||||
|
});
|
||||||
|
let 当前商品会员价 = computed<number>(() => {
|
||||||
|
return six_goods_下单商品.value?.会员价 ?? 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
let 当前商品总金额 = computed(() => {
|
||||||
|
return 当前商品会员价.value * 当前选中商品的数量.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
async function 打开支付弹窗(): Promise<void> {
|
||||||
|
showRules.value = true;
|
||||||
|
await wx.vibrateShort({type: "medium"});//medium heavy light
|
||||||
|
}
|
||||||
|
|
||||||
|
async function 关闭弹框(): Promise<void> {
|
||||||
|
showRules.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function 选取规则事件(goodsNumber: number,): Promise<void> {
|
||||||
|
await wx.vibrateShort({type: "medium"});//medium heavy light
|
||||||
|
当前选中商品的数量.value = 1; // 选完后需要恢默认值
|
||||||
|
index_goods_sku_子元素.value = goodsNumber;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function 商品数量减(): Promise<void> {
|
||||||
|
await wx.vibrateShort({type: "medium"});//medium heavy light
|
||||||
|
if (当前选中商品的数量.value <= 1) {
|
||||||
|
当前选中商品的数量.value = 1;
|
||||||
|
} else {
|
||||||
|
当前选中商品的数量.value--;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
async function 商品数量加(): Promise<void> {
|
||||||
|
await wx.vibrateShort({type: "medium"});//medium heavy light
|
||||||
|
当前选中商品的数量.value++;
|
||||||
|
six_goods_下单商品.value.单个商品订单数量 = 当前选中商品的数量.value;
|
||||||
|
six_goods_下单商品.value.单个商品订单总金额 = 当前商品总金额.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 不支持购物车的支付方式
|
||||||
|
|
||||||
|
const 立即购买 = useThrottleFn(async () => {
|
||||||
|
//执行时机: 点击后直接执行,但是在设置的时间范围内,不会再次执行
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
const order订单类型 = xiaoMain.six_good?.goods_商品销售场景 === "赢免单" ? "赢免单" : "商城订单";
|
||||||
|
xiaoMain.card购物车列表数据 = [];
|
||||||
|
xiaoMain.card购物车列表数据.push(six_goods_下单商品.value);
|
||||||
|
let orderData = {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid,
|
||||||
|
self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
order购物车商品数据: xiaoMain.card购物车列表数据, // 支付时商品
|
||||||
|
share订单分享者ID: xiaoMain.superior_unionid,
|
||||||
|
order订单类型: order订单类型,
|
||||||
|
order用户配送地址: xiaoMain.addressCurrent当前默认地址,
|
||||||
|
order购物车商品数量: 当前选中商品的数量.value,
|
||||||
|
order购物车商品总价: 当前商品总金额.value,
|
||||||
|
order商品ID: xiaoMain.six_good?.idKey,
|
||||||
|
};
|
||||||
|
try {
|
||||||
|
let data = await useRequest<ApiAxiosResponse<Array<string>, WechatMiniprogram.RequestPaymentOption>>(商城详情页_下单支付, {
|
||||||
|
method: "POST", data: orderData
|
||||||
|
});
|
||||||
|
await wx.requestPayment({...data.data.value!.resData.dictData});
|
||||||
|
showRules.value = false; // 支付成功后,隐藏弹窗
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
}, 1300);
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
@@ -0,0 +1,167 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
// 多行文本溢出显示...
|
||||||
|
@mixin text-ellipsis-multi($line-clamp: 1) {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: $line-clamp;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 浅色模式 */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
.spces-div {
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
border-left: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.div-items-left {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
//border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.div-items-right {
|
||||||
|
//
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色模式 */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.spces-div {
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-left: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
.div-items-left {
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
|
||||||
|
}
|
||||||
|
.div-items-right {
|
||||||
|
//
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-com {
|
||||||
|
width: 750rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.specs {
|
||||||
|
width: 686rpx;
|
||||||
|
//background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
|
||||||
|
.specs-title {
|
||||||
|
height: 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.specs-title-color {
|
||||||
|
background-color: #f0883a;
|
||||||
|
line-height: 100%;
|
||||||
|
width: 15rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.specs-title-text {
|
||||||
|
width: 112rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
//color: #FFFFFF;
|
||||||
|
line-height: 50rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spces-params {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.spces-div {
|
||||||
|
width: 648rpx;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
//border: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
.div-items {
|
||||||
|
|
||||||
|
height: 70rpx;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.div-items-left {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 28rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
//color: #FFFFFF;
|
||||||
|
line-height: 70rpx;
|
||||||
|
font-style: normal;
|
||||||
|
//border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
//border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
//border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
//border-right: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
width: 150rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-items-right {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 28rpx;
|
||||||
|
//border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
//border-bottom: 1px solid rgba(0, 0, 0, 0.5);
|
||||||
|
width: 498rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
//color: #999999;
|
||||||
|
line-height: 70rpx;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
@include text-ellipsis-multi();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="root-com">
|
||||||
|
<view class="specs">
|
||||||
|
<view class="specs-title">
|
||||||
|
<view class="line-widht-number" style="width: 18rpx"></view>
|
||||||
|
<view class="specs-title-color">1</view>
|
||||||
|
<view class="line-widht-number" style="width: 10rpx"></view>
|
||||||
|
<view class="specs-title-text">规格信息</view>
|
||||||
|
</view>
|
||||||
|
<view class="spces-params">
|
||||||
|
<view class="line-widht-number" style="width: 18rpx"></view>
|
||||||
|
<view class="spces-div">
|
||||||
|
<view v-for="(value,key) in xiaoMain.six_good?.goods_商品信息" :key="key"
|
||||||
|
class="div-items">
|
||||||
|
<view class="div-items-left">{{ key }}</view>
|
||||||
|
<view class="div-items-right">{{ value }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="height: 22rpx"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-product_sales_specifications"});
|
||||||
|
</script>
|
||||||
|
|
||||||
@@ -0,0 +1,80 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
// 商品服务的组件信息
|
||||||
|
.root-com {
|
||||||
|
width: 750rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.service {
|
||||||
|
width: 686rpx;
|
||||||
|
height: 190rpx;
|
||||||
|
padding: 20rpx 18rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.service-item {
|
||||||
|
height: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.service-left {
|
||||||
|
width: 48rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #F55726;
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-middle {
|
||||||
|
width: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-right {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="root-com">
|
||||||
|
<view class="service">
|
||||||
|
<view class="service-delivery service-item">
|
||||||
|
<view class="service-left">配送</view>
|
||||||
|
<view class="service-middle"></view>
|
||||||
|
<view class="service-right">24H发货，第三方物流配送，满¥30免运</view>
|
||||||
|
</view>
|
||||||
|
<view class="service-serve service-item">
|
||||||
|
<view class="service-left">服务</view>
|
||||||
|
<view class="service-middle"></view>
|
||||||
|
<view class="service-right">品质保证，损坏包赔</view>
|
||||||
|
</view>
|
||||||
|
<view class="service-preferential service-item">
|
||||||
|
<view class="service-left">优惠</view>
|
||||||
|
<view class="service-middle"></view>
|
||||||
|
<view class="service-right">当前已优惠{{ 优惠金额 }}元</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
import {computed} from "vue";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-service-params"});
|
||||||
|
let 优惠金额 = computed(() => {
|
||||||
|
const 价格 = xiaoMain.six_good?.goods_商品销售规格?.零售价格 ?? 0;
|
||||||
|
const 会员价 = xiaoMain.six_good?.goods_商品销售规格?.会员价 ?? 0;
|
||||||
|
return 价格 / 100 - 会员价 / 100;
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
@@ -0,0 +1,322 @@
|
|||||||
|
<template>
|
||||||
|
<view class="share-card">
|
||||||
|
<!-- 左侧：信息与数据展示 -->
|
||||||
|
<view class="card-left">
|
||||||
|
|
||||||
|
<!-- 核心卖点标签组 -->
|
||||||
|
<view class="tags-container">
|
||||||
|
<view class="highlight-tag">
|
||||||
|
<text class="tag-icon">🎁</text>
|
||||||
|
<text class="tag-text">无需下单</text>
|
||||||
|
</view>
|
||||||
|
<view class="sub-tag">
|
||||||
|
<text class="tag-text">分享即得</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="main-content">
|
||||||
|
<text class="title">推荐给好友</text>
|
||||||
|
<text class="subtitle">0门槛参与，好物积分</text>
|
||||||
|
|
||||||
|
<!-- 动态数据展示区 -->
|
||||||
|
<view class="stats-row">
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-num">{{ xiaoMain.mini_user_积分数据?.share点击次数 }}</text>
|
||||||
|
<text class="stat-label">累计点击</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-divider"></view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-num highlight">{{ xiaoMain.mini_user_积分数据?.share总积分 }}</text>
|
||||||
|
<text class="stat-label">累计获得积分</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tips-row">
|
||||||
|
<text class="tips-icon">💰</text>
|
||||||
|
<text class="tips-text">积分可直接在「我的 - 积分」提现</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 右侧：操作按钮 -->
|
||||||
|
<view class="card-right">
|
||||||
|
<button class="action-btn" openType="share" @click="分享事件">
|
||||||
|
<text class="btn-text">好物推荐</text>
|
||||||
|
<text class="btn-sub">赚积分</text>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<view class="wallet-link" @click="去兑换进入积分页面">
|
||||||
|
<text class="link-text">去兑换</text>
|
||||||
|
<text class="link-arrow">›</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-share"});
|
||||||
|
|
||||||
|
async function 分享事件(): Promise<void> {
|
||||||
|
await wx.vibrateShort({type: "light"});
|
||||||
|
}
|
||||||
|
|
||||||
|
const 去兑换进入积分页面 = () => {
|
||||||
|
wx.navigateTo({url: "/subPackages/homeSubPages/用户积分页面/用户积分页面"}).then().catch((error) => {
|
||||||
|
console.log("捕获错误❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅", error);
|
||||||
|
wx.reLaunch({url: "/pageTabBar/Home/Home"});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/* 变量定义 */
|
||||||
|
$primary-color: #FF9F43; // 橙色：收益
|
||||||
|
$accent-color: #1DD1A1; // 绿色：无门槛/免费
|
||||||
|
$text-main: #333333;
|
||||||
|
$text-sub: #666666;
|
||||||
|
$text-light: #999999;
|
||||||
|
$bg-gradient: linear-gradient(135deg, #FFF9F0 0%, #FFECD1 100%);
|
||||||
|
|
||||||
|
.share-card {
|
||||||
|
width: 686rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 300rpx;
|
||||||
|
background: $bg-gradient;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
display: flex;
|
||||||
|
padding: 32rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: 0 10rpx 30rpx rgba(255, 159, 67, 0.12);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
/* 背景装饰 */
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -80rpx;
|
||||||
|
right: -80rpx;
|
||||||
|
width: 240rpx;
|
||||||
|
height: 240rpx;
|
||||||
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-left {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
z-index: 1;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
|
||||||
|
.tags-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16rpx;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
.highlight-tag {
|
||||||
|
background: rgba(29, 209, 161, 0.15); // 绿色背景强调无门槛
|
||||||
|
border: 1rpx solid rgba(29, 209, 161, 0.3);
|
||||||
|
padding: 6rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tag-icon {
|
||||||
|
font-size: 20rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: $accent-color;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-tag {
|
||||||
|
background: rgba(255, 255, 255, 0.6);
|
||||||
|
padding: 6rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
|
||||||
|
.tag-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: $text-sub;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 800;
|
||||||
|
color: $text-main;
|
||||||
|
display: block;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: $text-sub;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
padding: 16rpx 24rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
border: 1rpx solid rgba(255, 255, 255, 0.8);
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.stat-num {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-main;
|
||||||
|
font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif;
|
||||||
|
|
||||||
|
&.highlight {
|
||||||
|
color: $primary-color;
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: $text-light;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-divider {
|
||||||
|
width: 1rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.08);
|
||||||
|
margin: 0 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tips-icon {
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: $text-sub;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-right {
|
||||||
|
width: 220rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1;
|
||||||
|
padding-left: 20rpx;
|
||||||
|
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background: linear-gradient(90deg, $primary-color, #FF6B6B);
|
||||||
|
padding-top: 20rpx;
|
||||||
|
border-radius: 88rpx;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.35);
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
/* 按钮高光效果 */
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 重置按钮默认样式 */
|
||||||
|
&::after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: 1rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sub {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
|
margin-top: 6rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wallet-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
transition: background 0.2s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: $text-sub;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-arrow {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: $primary-color;
|
||||||
|
margin-left: 4rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
.root-com {
|
||||||
|
width: 750rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
width: 750rpx;
|
||||||
|
//border-top: dashed 1px #828282;
|
||||||
|
//border-bottom: dashed 1px #828282;
|
||||||
|
height: 612rpx;
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
|
||||||
|
:deep(.customImage) {
|
||||||
|
width: 750rpx;
|
||||||
|
height: 612rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
|
||||||
|
.customIcon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<view class="root-com">
|
||||||
|
<view class="group_3 flex-col">
|
||||||
|
<wd-img custom-class="customImage" custom-image="custom-image"
|
||||||
|
:src="xiaoMain.six_good?.goods_商品销售规格?.goods_sku?.goods_sku_list.at(0)?.goods_sku_主图.at(0)">
|
||||||
|
<template #error>
|
||||||
|
<view class="error-wrap">❌</view>
|
||||||
|
</template>
|
||||||
|
<template #loading>
|
||||||
|
<view class="loading-wrap">
|
||||||
|
<wd-loading :size="20" color="#fff" type="spinner"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-img>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "goods-com-swiper-images"});
|
||||||
|
</script>
|
||||||
|
|
||||||
@@ -0,0 +1,308 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
//@import "@/assets/demo.scss";
|
||||||
|
$defaultTopHeight: 1px; // 滚动区域外 可以预留的高度
|
||||||
|
$xiaoBottomHeigh: 80rpx; // 滚动区域外,可以预留的高度
|
||||||
|
/* 浅色模式 */
|
||||||
|
|
||||||
|
@mixin line-color {
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0%, 100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
animation: gradientFlow 5s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-screen {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "xiaoFont", sans-serif;
|
||||||
|
height: v-bind(pxScreenHeight);
|
||||||
|
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||||||
|
background-size: 750rpx;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-container {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(pxWindowHeight);
|
||||||
|
|
||||||
|
.status-wifi-nav {
|
||||||
|
/*状态栏的高度 这里的值不能动*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(statusHeight);
|
||||||
|
|
||||||
|
:deep(.default-view-slot) {
|
||||||
|
line-height: v-bind(meunHeight);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: v-bind(meunHeight);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.default-view-slot-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||||||
|
border-radius: calc(v-bind(meunHeight) / 2);
|
||||||
|
|
||||||
|
.title-imgimage_item {
|
||||||
|
width: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
height: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right-text {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scrollTopHeigh {
|
||||||
|
/*在滚动区域内的, 可以自定义的高度*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: $defaultTopHeight;
|
||||||
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scrollViewHeigh {
|
||||||
|
/*滚动页面区域范围*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1rem;
|
||||||
|
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
/*button按钮的 阴影样式可以直接使用*/
|
||||||
|
.custom-shadow {
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollBottomHeigh {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: $xiaoBottomHeigh;
|
||||||
|
//@include line-color();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="phone-screen">
|
||||||
|
<wd-config-provider :theme="theme">
|
||||||
|
<view class="root-container">
|
||||||
|
<view class="status-wifi-nav">
|
||||||
|
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||||||
|
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||||||
|
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||||||
|
@homeRight="homeRight">
|
||||||
|
<template v-slot:default>
|
||||||
|
<view class="default-view-slot" @click="defaultSearchChange">
|
||||||
|
<view class="default-view-slot-left"></view>
|
||||||
|
<view class="default-view-slot-right">
|
||||||
|
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||||||
|
src="https://hudie.xiao.band/search.png" webp/>
|
||||||
|
<view class="default-view-slot-right-text">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 30rpx"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</ChildComScroll>
|
||||||
|
</view>
|
||||||
|
<!--分隔线,上面的是子组件-->
|
||||||
|
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
|
||||||
|
<!-- 滚动区域开始-->
|
||||||
|
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
|
||||||
|
class="scrollViewHeigh">
|
||||||
|
|
||||||
|
<goods-com-swiper-images></goods-com-swiper-images>
|
||||||
|
<goods-com-params></goods-com-params>
|
||||||
|
<goods-com-share></goods-com-share>
|
||||||
|
<view class="line-widht-number" style="height: 20rpx"></view>
|
||||||
|
<goods-com-service-params></goods-com-service-params>
|
||||||
|
<goods-com-product_sales_specifications></goods-com-product_sales_specifications>
|
||||||
|
<view class="line-widht-number" style="height: 10rpx"></view>
|
||||||
|
<goods-com-list-images></goods-com-list-images>
|
||||||
|
</scroll-view>
|
||||||
|
<!--滚动区域结束-->
|
||||||
|
<view class="scrollBottomHeigh"><!--底部预留区域-->
|
||||||
|
<goods-com-pay-card></goods-com-pay-card>
|
||||||
|
</view>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</wd-config-provider>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||||||
|
import {ref} from "vue";
|
||||||
|
import type {ApiAxiosResponse, GlobelsChildPropsType} from "@/types/通用类型";
|
||||||
|
import {onLoad, onShareAppMessage, onShareTimeline, onTabItemTap} from "@dcloudio/uni-app";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import GoodsComSwiperImages from "@/subPackages/homeSubPages/商品详情页面/goods-com-swiper-images.vue";
|
||||||
|
import GoodsComParams from "@/subPackages/homeSubPages/商品详情页面/goods-com-params.vue";
|
||||||
|
import GoodsComShare from "@/subPackages/homeSubPages/商品详情页面/goods-com-share.vue";
|
||||||
|
import GoodsComProduct_sales_specifications
|
||||||
|
from "@/subPackages/homeSubPages/商品详情页面/goods-com-product_sales_specifications.vue";
|
||||||
|
import GoodsComServiceParams from "@/subPackages/homeSubPages/商品详情页面/goods-com-service-params.vue";
|
||||||
|
import GoodsComListImages from "@/subPackages/homeSubPages/商品详情页面/goods-com-list-images.vue";
|
||||||
|
import GoodsComPayCard from "@/subPackages/homeSubPages/商品详情页面/goods-com-pay-card.vue";
|
||||||
|
import {usePage, useRequest} from "@uni-helper/uni-use";
|
||||||
|
import {
|
||||||
|
分享_HOME页面分享到朋友圈, 分享_商品详情页面分享到朋友圈,
|
||||||
|
分享_商品详情页面群或者好友, 积分_统计查询
|
||||||
|
} from "@/hooks/接口API";
|
||||||
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||||
|
import {whenever} from "@vueuse/shared";
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
let pxScreenHeight = ref(); // 手机高度
|
||||||
|
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||||||
|
let pxScrollHeight = ref(); // 滚动区域高度
|
||||||
|
let statusHeight = ref(); // 固定的顶部
|
||||||
|
let meunHeight = ref();//插槽时要用的 高度
|
||||||
|
const modelValue: GlobelsChildPropsType = {
|
||||||
|
isShowLeft: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
|
||||||
|
iconTextLeft: {classPrefix: "xiaozizi", name: "arrow-left-circle-line", size: 24},
|
||||||
|
},
|
||||||
|
isShowRight: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
|
||||||
|
iconTextRight: {classPrefix: "xiaozizi", name: "shangpinxiangqing", size: 19},
|
||||||
|
},
|
||||||
|
title_text: "六果泡泡", navIsShow: "default",
|
||||||
|
};
|
||||||
|
const homeLeft = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.navigateBack({delta: 1}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
const homeRight = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
console.log("右键按键");
|
||||||
|
};
|
||||||
|
let defaultSearchChange = async () => {
|
||||||
|
console.log("搜索发起");
|
||||||
|
};
|
||||||
|
onTabItemTap(() => {
|
||||||
|
console.log("🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
});
|
||||||
|
|
||||||
|
onLoad(() => {
|
||||||
|
|
||||||
|
let page_path = usePage().value.route;
|
||||||
|
uni.showShareMenu({
|
||||||
|
withShareTicket: true,
|
||||||
|
menus: ["shareAppMessage", "shareTimeline"], // 关键！明确启用哪些功能 "shareTimeline"
|
||||||
|
});
|
||||||
|
|
||||||
|
onShareAppMessage(() => {
|
||||||
|
return {
|
||||||
|
title: "群分享主题",
|
||||||
|
path: page_path,
|
||||||
|
desc: "描述",
|
||||||
|
imageUrl: "/static/vite.png",
|
||||||
|
promise: new Promise<Page.CustomShareContent>(async (resolve) => {
|
||||||
|
try {
|
||||||
|
let dataPostData = await useRequest<ApiAxiosResponse<Array<string>, Page.CustomShareContent>>(分享_商品详情页面群或者好友, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
page_path: page_path, idKey: xiaoMain.six_good?.idKey
|
||||||
|
}
|
||||||
|
});
|
||||||
|
resolve(dataPostData.data.value?.resData.dictData ?? {});
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
onShareTimeline(() => {
|
||||||
|
return {
|
||||||
|
title: "朋友圈分享测试", //自定义标题，即朋友圈列表页上显示的标题默认值为小程序的名称
|
||||||
|
imageUrl: "https://oss.xiao.band/backhome.png",//imageUrl:自定义图片路径，可以是本地文件或者网络图片
|
||||||
|
query: "superior_unionid=shareTimeline",
|
||||||
|
path: page_path,
|
||||||
|
promise: new Promise<Page.ShareTimelineContent>(async (resolve,) => {
|
||||||
|
try {
|
||||||
|
let dataPostData = await useRequest<ApiAxiosResponse<Array<string>, Page.CustomShareContent>>(分享_商品详情页面分享到朋友圈, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
page_path: page_path, idKey: xiaoMain.six_good?.idKey
|
||||||
|
}
|
||||||
|
});
|
||||||
|
resolve(dataPostData.data.value?.resData.dictData ?? {});
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
wx.onCopyUrl(() => {
|
||||||
|
// return {query: `superior_unionid=${xiao_main.self_user_unionid}`};
|
||||||
|
console.log("superior_unionid=" + xiaoMain.superior_unionid, "---------------");
|
||||||
|
return {query: "superior_unionid=" + xiaoMain.mini_unionid};
|
||||||
|
});
|
||||||
|
// 用户点击了收藏按钮
|
||||||
|
// onAddToFavorites((options: Page.AddToFavoritesOption) => {
|
||||||
|
// console.log("webViewUrl: ", options.webviewUrl);
|
||||||
|
// return {
|
||||||
|
// title: "收藏",
|
||||||
|
// imageUrl: "https://oss.xiao.band/backhome.png",
|
||||||
|
// query: "name=xxx&age=xxx",
|
||||||
|
// };
|
||||||
|
// });
|
||||||
|
});
|
||||||
|
whenever(() => xiaoMain.mini_unionid, () => {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 demo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_value ",);
|
||||||
|
xiaoMain.query_积分统计查询(积分_统计查询, <string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid);
|
||||||
|
}, {immediate: true});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,502 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
//@import "@/assets/demo.scss";
|
||||||
|
|
||||||
|
@mixin line-color {
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0%, 100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
animation: gradientFlow 5s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-screen {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "xiaoFont", sans-serif;
|
||||||
|
height: v-bind(pxScreenHeight);
|
||||||
|
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||||||
|
background-size: 750rpx;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-container {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(pxWindowHeight);
|
||||||
|
|
||||||
|
.status-wifi-nav {
|
||||||
|
/*状态栏的高度 这里的值不能动*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(statusHeight);
|
||||||
|
|
||||||
|
:deep(.default-view-slot) {
|
||||||
|
line-height: v-bind(meunHeight);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: v-bind(meunHeight);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.default-view-slot-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||||||
|
border-radius: calc(v-bind(meunHeight) / 2);
|
||||||
|
|
||||||
|
.title-imgimage_item {
|
||||||
|
width: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
height: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right-text {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.grit-content {
|
||||||
|
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight));
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-auto-rows: auto 1fr auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.scrollTopHeigh {
|
||||||
|
/*在滚动区域内的, 可以自定义的高度*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
//background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollViewHeigh {
|
||||||
|
/*滚动页面区域范围*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
/*button按钮的 阴影样式可以直接使用*/
|
||||||
|
.custom-class-button {
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 10rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10rpx 10rpx;
|
||||||
|
|
||||||
|
.goods-item {
|
||||||
|
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.6),
|
||||||
|
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||||
|
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 320rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
|
||||||
|
:deep(.customImage) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.customIcon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discount-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 10rpx;
|
||||||
|
left: 10rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 10rpx;
|
||||||
|
right: 10rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
// 商城商品的下半部分
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.brand-tag {
|
||||||
|
width: fit-content;
|
||||||
|
background-color: #e6f7ff;
|
||||||
|
color: #007AFF;
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 4rpx 20rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
//color: #333;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-desc {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
line-clamp: 1;;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 24rpx;
|
||||||
|
//color: #999;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
|
||||||
|
.spec-item {
|
||||||
|
font-size: 22rpx;
|
||||||
|
//color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec-divider {
|
||||||
|
margin: 0 10rpx;
|
||||||
|
//color: #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-section {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8rpx;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
.goods-tag {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #FF6B00;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
|
||||||
|
.current-price {
|
||||||
|
color: #FF4444;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
.price-symbol {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-number {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.original-price {
|
||||||
|
font-size: 24rpx;
|
||||||
|
//color: #999;
|
||||||
|
text-decoration: line-through;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sales-info {
|
||||||
|
font-size: 22rpx;
|
||||||
|
//color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.rating-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #FFB400;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollBottomHeigh {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 1px;
|
||||||
|
@include line-color();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="phone-screen">
|
||||||
|
<wd-config-provider :theme="theme">
|
||||||
|
<view class="root-container">
|
||||||
|
<view class="status-wifi-nav">
|
||||||
|
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||||||
|
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||||||
|
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||||||
|
@homeRight="homeRight">
|
||||||
|
<template v-slot:default>
|
||||||
|
<view class="default-view-slot" @click="defaultSearchChange">
|
||||||
|
<view class="default-view-slot-left"></view>
|
||||||
|
<view class="default-view-slot-right">
|
||||||
|
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||||||
|
src="https://hudie.xiao.band/search.png" webp/>
|
||||||
|
<view class="default-view-slot-right-text">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 30rpx"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</ChildComScroll>
|
||||||
|
</view>
|
||||||
|
<!--分隔线,上面的是子组件-->
|
||||||
|
|
||||||
|
<!-- 滚动区域开始-->
|
||||||
|
<view class="grit-content">
|
||||||
|
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
|
||||||
|
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
|
||||||
|
class="scrollViewHeigh">
|
||||||
|
<view class="page-xiao-page">
|
||||||
|
|
||||||
|
|
||||||
|
<view class="goods-grid">
|
||||||
|
<view v-for="(goods,index) in xiaoMain.six_goods_list_data" :key="index"
|
||||||
|
class="goods-item"
|
||||||
|
@click="选择商品(goods)">
|
||||||
|
<!-- 商品图片 -->
|
||||||
|
<view class="goods-image-wrapper">
|
||||||
|
|
||||||
|
<wd-img custom-class="customImage" custom-image="customIcon" mode="scaleToFill"
|
||||||
|
v-bind:src="goods.goods_商品销售规格?.goods_商品详情图片.主图.at(0)">
|
||||||
|
<template #error>
|
||||||
|
<view class="error-wrap">❌</view>
|
||||||
|
</template>
|
||||||
|
<template #loading>
|
||||||
|
<view class="loading-wrap">
|
||||||
|
<wd-loading :size="20" color="#fff" type="spinner"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-img>
|
||||||
|
<!-- 促销标签 -->
|
||||||
|
<view class="discount-badge">
|
||||||
|
<!-- 省 30%-->
|
||||||
|
</view>
|
||||||
|
<!-- 库存提示 -->
|
||||||
|
<view v-if="true" class="stock-badge">
|
||||||
|
<!-- 仅剩 10 件-->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品信息 -->
|
||||||
|
<view class="goods-info">
|
||||||
|
<!-- 品牌标签 -->
|
||||||
|
<view class="brand-tag">{{ goods.goods_商品品牌 }}</view>
|
||||||
|
|
||||||
|
<!-- 商品名称 -->
|
||||||
|
<text class="goods-name">{{ goods.goods_商品标题 }}</text>
|
||||||
|
|
||||||
|
<!-- 商品描述 -->
|
||||||
|
<text class="goods-desc">{{ goods.goods_商品销售规格?.销售规格 }}</text>
|
||||||
|
|
||||||
|
<!-- 标签 -->
|
||||||
|
<view class="tags-section">
|
||||||
|
<view v-for="(tag, index) in goods.goods_商品标签" :key="index"
|
||||||
|
class="goods-tag">
|
||||||
|
{{ tag }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 价格和销量 -->
|
||||||
|
<view class="price-section">
|
||||||
|
<view class="current-price">
|
||||||
|
<text class="price-symbol">¥</text>
|
||||||
|
<text class="price-number">{{
|
||||||
|
(goods.goods_商品销售规格?.会员价 ?? 0) / 100
|
||||||
|
}}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="true" class="original-price">
|
||||||
|
</view>
|
||||||
|
<view class="sales-info">已售 36200</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
<view class="scrollBottomHeigh">
|
||||||
|
<!--底部预留区域-->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--滚动区域结束-->
|
||||||
|
</view>
|
||||||
|
</wd-config-provider>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||||||
|
import {ref} from "vue";
|
||||||
|
import {onLoad} from "@dcloudio/uni-app";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import type {ApiAxiosResponse, GlobelsChildPropsType} from "@/types/通用类型";
|
||||||
|
import type {six商品列表类型, six商品类型} from "@/subPackages/homeSubPages/商城页面目录/商城商品类型";
|
||||||
|
import {useRequest} from "@uni-helper/uni-use";
|
||||||
|
import {商品_查询所有的商品} from "@/hooks/接口API";
|
||||||
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}});
|
||||||
|
let pxScreenHeight = ref(); // 手机高度
|
||||||
|
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||||||
|
let pxScrollHeight = ref(); // 滚动区域高度
|
||||||
|
let statusHeight = ref(); // 固定的顶部
|
||||||
|
let meunHeight = ref();//插槽时要用的 高度
|
||||||
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
|
||||||
|
const modelValue: GlobelsChildPropsType = {
|
||||||
|
isShowLeft: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
|
||||||
|
iconTextLeft: {classPrefix: "xiaozizi", name: "arrow-left-circle-line", size: 24},
|
||||||
|
|
||||||
|
},
|
||||||
|
isShowRight: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
|
||||||
|
iconTextRight: {classPrefix: "xiaozizi", name: "jifenshangcheng1", size: 19},
|
||||||
|
},
|
||||||
|
title_text: "商城", navIsShow: "default",
|
||||||
|
};
|
||||||
|
onLoad(async () => {
|
||||||
|
let data = await useRequest<ApiAxiosResponse<six商品列表类型>>(商品_查询所有的商品, {
|
||||||
|
method: "POST", data: {},
|
||||||
|
});
|
||||||
|
xiaoMain.six_goods_list_data = data.data.value?.resData.listData ?? [];
|
||||||
|
await wx.hideShareMenu();
|
||||||
|
wx.offCopyUrl();
|
||||||
|
});
|
||||||
|
const homeLeft = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
wx.navigateBack({delta: 1}).then().catch(() => {
|
||||||
|
wx.reLaunch({url: "/pageTabBar/Home/Home"});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const homeRight = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.switchTab({url: "/pageTabBar/Home/Home"}).then().catch(() => uni.navigateTo({url: ""}));
|
||||||
|
};
|
||||||
|
let defaultSearchChange = async () => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
};
|
||||||
|
|
||||||
|
async function 选择商品(goods: six商品类型): Promise<void> {
|
||||||
|
xiaoMain.six_good = goods;
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
await wx.navigateTo({url: "/subPackages/homeSubPages/商品详情页面/商品详情页面"}).then(() => {
|
||||||
|
}).catch((error) => {
|
||||||
|
console.log("捕获错误❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅❌ 🙅", error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
export interface six商品类型 {
|
||||||
|
idKey: string;
|
||||||
|
goods_id商品: string;
|
||||||
|
goods_商品品牌: string;
|
||||||
|
goods_商品标题: string;
|
||||||
|
|
||||||
|
goods_商品信息: {
|
||||||
|
// 用于页面展示给用户的可以查看的信息
|
||||||
|
净重?: string
|
||||||
|
品牌?: string
|
||||||
|
洁净?: string
|
||||||
|
除菌?: string
|
||||||
|
香型?: string
|
||||||
|
[key: string]: any
|
||||||
|
};
|
||||||
|
|
||||||
|
goods_商品标签: string[];
|
||||||
|
|
||||||
|
goods_商品销售规格: {
|
||||||
|
goods_商品品牌: string;
|
||||||
|
goods_商品标题: string;
|
||||||
|
会员价: number
|
||||||
|
零售价格: number
|
||||||
|
净利润: number
|
||||||
|
成本价: number
|
||||||
|
单个商品订单数量: number
|
||||||
|
单个商品订单总金额: number
|
||||||
|
单个商品实际支付价格: number
|
||||||
|
销售规格: string
|
||||||
|
商品ID: string
|
||||||
|
推荐积分: { 企微员工: number, 推广员: number },
|
||||||
|
商品条码: string
|
||||||
|
goods_商品详情图片: {
|
||||||
|
主图: Array<string>,
|
||||||
|
详情图: Array<string>,
|
||||||
|
};
|
||||||
|
goods_sku: {
|
||||||
|
goods_select_title: string,// 商品选择规格的 名称
|
||||||
|
goods_sku_list: Array<{
|
||||||
|
goods_sku_id: string,
|
||||||
|
goods_sku_条形码: string,
|
||||||
|
goods_sku_name: string, goods_是否默认选择: boolean,
|
||||||
|
goods_sku_主图: Array<string>, goods_sku_详情图: Array<string>
|
||||||
|
}>,
|
||||||
|
},
|
||||||
|
可选参数: Array<string>
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
goods_商品销售场景: string;
|
||||||
|
|
||||||
|
goods_分享积分: {
|
||||||
|
推广员: number
|
||||||
|
企微用户: number
|
||||||
|
普通会员: number
|
||||||
|
};
|
||||||
|
|
||||||
|
goods_商品搜索标签: string[];
|
||||||
|
goods_商家推荐标签: string[];
|
||||||
|
goods_其它参数: any | null;
|
||||||
|
|
||||||
|
dateAndTime: string; // ISO 8601
|
||||||
|
updateTime: string; // ISO 8601
|
||||||
|
}
|
||||||
|
|
||||||
|
export type six商品列表类型 = Array<six商品类型>
|
||||||
|
export type card购物车商品类型 = {
|
||||||
|
goods_商品品牌: string,
|
||||||
|
goods_商品标题: string,
|
||||||
|
零售价格: number,
|
||||||
|
会员价: number,
|
||||||
|
销售规格: string,
|
||||||
|
单个商品实际支付价格: number,
|
||||||
|
// ✅ 直接计算，不引用其他 computed
|
||||||
|
单个商品订单总金额: number,
|
||||||
|
单个商品订单数量: number,
|
||||||
|
推荐积分: {},
|
||||||
|
// 商品条码: spec?.商品条码,
|
||||||
|
商品条码: string,
|
||||||
|
商品ID: string,
|
||||||
|
goods_sku_name: string,
|
||||||
|
goods_sku_主图: string,
|
||||||
|
goods_sku_详情图: Array<string>
|
||||||
|
}
|
||||||
@@ -0,0 +1,961 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
//@import "@/assets/demo.scss";
|
||||||
|
$defaultTopHeight: 1px; // 滚动区域外 可以预留的高度
|
||||||
|
$xiaoBottomHeigh: 1px; // 滚动区域外,可以预留的高度
|
||||||
|
/* 浅色模式 */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
.status-notice {
|
||||||
|
&.status-waiting {
|
||||||
|
// 物流状态 不同状态的 背景颜色
|
||||||
|
background: rgba(255, 248, 235, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-transit {
|
||||||
|
background: rgba(230, 244, 253, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-delivering {
|
||||||
|
background: rgba(236, 250, 242, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-signed {
|
||||||
|
background: rgba(245, 247, 249, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色模式 */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.status-notice {
|
||||||
|
&.status-waiting {
|
||||||
|
// 等揽件 - 深琥珀色背景
|
||||||
|
background: rgba(255, 184, 77, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-transit {
|
||||||
|
// 运输中 - 深蓝色背景
|
||||||
|
background: rgba(69, 149, 251, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-delivering {
|
||||||
|
// 派送中 - 深绿色背景
|
||||||
|
background: rgba(61, 213, 152, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-signed {
|
||||||
|
// 已签收 - 深灰色背景
|
||||||
|
background: rgba(148, 163, 178, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin line-color {
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0%, 100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
animation: gradientFlow 5s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-screen {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "xiaoFont", sans-serif;
|
||||||
|
height: v-bind(pxScreenHeight);
|
||||||
|
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||||||
|
background-size: 750rpx;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-container {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(pxWindowHeight);
|
||||||
|
|
||||||
|
.status-wifi-nav {
|
||||||
|
/*状态栏的高度 这里的值不能动*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(statusHeight);
|
||||||
|
|
||||||
|
:deep(.default-view-slot) {
|
||||||
|
line-height: v-bind(meunHeight);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: v-bind(meunHeight);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.default-view-slot-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||||||
|
border-radius: calc(v-bind(meunHeight) / 2);
|
||||||
|
|
||||||
|
.title-imgimage_item {
|
||||||
|
width: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
height: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right-text {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scrollTopHeigh {
|
||||||
|
/*在滚动区域内的, 可以自定义的高度*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: $defaultTopHeight;
|
||||||
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scrollViewHeigh {
|
||||||
|
/*滚动页面区域范围*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1rem;
|
||||||
|
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
/*button按钮的 阴影样式可以直接使用*/
|
||||||
|
.custom-shadow {
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
padding: 0 24rpx 48rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部导航栏 */
|
||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 0 24rpx;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
backdrop-filter: blur(20rpx);
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
|
||||||
|
.navbar-back {
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: 300;
|
||||||
|
opacity: 0.7;
|
||||||
|
padding: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-share {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
opacity: 0.5;
|
||||||
|
padding: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 快递信息卡片 */
|
||||||
|
.express-card {
|
||||||
|
background: rgba(128, 128, 128, 0.05);
|
||||||
|
border-radius: 28rpx;
|
||||||
|
padding: 28rpx;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
.express-header {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.express-company {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
:deep(.custom-class-img) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 50%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.custom-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-name {
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: 630;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-status {
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 4rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
|
&.status-waiting {
|
||||||
|
background: rgba(255, 193, 67, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-transit {
|
||||||
|
background: rgba(33, 133, 243, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-delivering {
|
||||||
|
background: rgba(82, 196, 126, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-signed {
|
||||||
|
background: rgba(134, 142, 151, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-waybill {
|
||||||
|
display: flex;
|
||||||
|
//justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
opacity: 0.5;
|
||||||
|
|
||||||
|
.express-waybill-copy {
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 4rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-divider {
|
||||||
|
height: 1rpx;
|
||||||
|
background: rgba(128, 128, 128, 0.1);
|
||||||
|
margin: 16rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-contact {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6rpx;
|
||||||
|
|
||||||
|
.contact-label {
|
||||||
|
font-size: 22rpx;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-value {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 570;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-phone {
|
||||||
|
font-size: 26rpx;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-arrow {
|
||||||
|
font-size: 36rpx;
|
||||||
|
opacity: 0.3;
|
||||||
|
padding: 0 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-address {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10rpx;
|
||||||
|
padding-top: 12rpx;
|
||||||
|
border-top: 1rpx solid rgba(128, 128, 128, 0.06);
|
||||||
|
|
||||||
|
.address-icon {
|
||||||
|
font-size: 28rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transform: translateY(-10rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
opacity: 0.65;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 物流状态提示 */
|
||||||
|
.status-notice {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-bottom: 28rpx;
|
||||||
|
|
||||||
|
//&.status-waiting {
|
||||||
|
// // 物流状态 不同状态的 背景颜色
|
||||||
|
// background: rgba(255, 248, 235, 0.8);
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
//&.status-transit {
|
||||||
|
// background: rgba(230, 244, 253, 0.8);
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
//&.status-delivering {
|
||||||
|
// background: rgba(236, 250, 242, 0.8);
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
//&.status-signed {
|
||||||
|
// background: rgba(245, 247, 249, 0.8);
|
||||||
|
//}
|
||||||
|
|
||||||
|
.notice-icon {
|
||||||
|
font-size: 44rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-content {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.notice-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
opacity: 0.6;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 物流追踪标题 */
|
||||||
|
.tracking-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 16rpx;
|
||||||
|
margin-bottom: 28rpx;
|
||||||
|
padding: 0 8rpx;
|
||||||
|
|
||||||
|
.tracking-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 640;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tracking-count {
|
||||||
|
font-size: 24rpx;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间轴容器 */
|
||||||
|
.timeline {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 单个节点 */
|
||||||
|
.timeline-item {
|
||||||
|
// 物流状态的 每一行 盒子
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 32rpx;
|
||||||
|
/* 左侧时间轴区域 */
|
||||||
|
.timeline-left {
|
||||||
|
// 物流状态的左侧的盒子
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 130rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
|
||||||
|
.dot-wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
height: 58rpx;
|
||||||
|
//物流状态 上边的盒子,并且是 状态亮点盒子
|
||||||
|
.dot {
|
||||||
|
width: 18rpx;
|
||||||
|
height: 18rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #4cd964;
|
||||||
|
opacity: 0.3;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
|
||||||
|
&.dot-waiting {
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
//box-shadow: inset 0 0 0 1px red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 2rpx;
|
||||||
|
flex: 1;
|
||||||
|
background: currentColor;
|
||||||
|
opacity: 0.1;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 580;
|
||||||
|
opacity: 0.7;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-hour {
|
||||||
|
font-size: 20rpx;
|
||||||
|
opacity: 0.4;
|
||||||
|
margin-top: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 最新节点高亮 */
|
||||||
|
&.is-latest {
|
||||||
|
.timeline-left {
|
||||||
|
.dot {
|
||||||
|
opacity: 0.9;
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
opacity: 1;
|
||||||
|
font-weight: 670;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-right {
|
||||||
|
.msg {
|
||||||
|
font-weight: 610;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧内容 */
|
||||||
|
.timeline-right {
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 4rpx;
|
||||||
|
|
||||||
|
.msg {
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location {
|
||||||
|
font-size: 24rpx;
|
||||||
|
opacity: 0.45;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 等揽件状态专属提示 */
|
||||||
|
.waiting-tips {
|
||||||
|
margin-top: 32rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
background: rgba(128, 128, 128, 0.03);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
|
||||||
|
.tip-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
padding: 12rpx 0;
|
||||||
|
|
||||||
|
.tip-icon {
|
||||||
|
font-size: 28rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
opacity: 0.6;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 脉冲动画 */
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.5);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollBottomHeigh {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: $xiaoBottomHeigh;
|
||||||
|
@include line-color();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="phone-screen">
|
||||||
|
<wd-config-provider :theme="theme">
|
||||||
|
<view class="root-container">
|
||||||
|
<view class="status-wifi-nav">
|
||||||
|
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||||||
|
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||||||
|
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||||||
|
@homeRight="homeRight">
|
||||||
|
<template v-slot:default>
|
||||||
|
<view class="default-view-slot" @click="defaultSearchChange">
|
||||||
|
<view class="default-view-slot-left"></view>
|
||||||
|
<view class="default-view-slot-right">
|
||||||
|
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||||||
|
src="https://hudie.xiao.band/search.png" webp/>
|
||||||
|
<view class="default-view-slot-right-text">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 30rpx"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</ChildComScroll>
|
||||||
|
</view>
|
||||||
|
<!--分隔线,上面的是子组件-->
|
||||||
|
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
|
||||||
|
<!-- 滚动区域开始-->
|
||||||
|
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
|
||||||
|
class="scrollViewHeigh">
|
||||||
|
<view class="line-widht-number" style="height: 10rpx"></view>
|
||||||
|
<view class="page">
|
||||||
|
<!-- 快递基本信息卡片 -->
|
||||||
|
<view class="express-card">
|
||||||
|
<view class="express-header">
|
||||||
|
<view class="express-company">
|
||||||
|
<wd-img custom-class="custom-class-img" custom-image="custom-image" :width="20"
|
||||||
|
:round="true"
|
||||||
|
:height="20" :webp="true"
|
||||||
|
src="https://hudie.xiao.band/ims.webp">
|
||||||
|
<template #error>
|
||||||
|
<view class="error-wrap">加载失败</view>
|
||||||
|
</template>
|
||||||
|
<template #loading>
|
||||||
|
<view class="loading-wrap">
|
||||||
|
<wd-loading/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-img>
|
||||||
|
<text class="company-name">{{ logisticsInfo.deliveryName }}</text>
|
||||||
|
<view class="company-status" :class="getStatusClass">
|
||||||
|
{{ current当前物流数据?.text }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="express-waybill">
|
||||||
|
<view class="express-waybill-text"> 运单号：{{ logisticsInfo.waybillId }}</view>
|
||||||
|
<view class="express-waybill-copy" @click="复制物流运单号"> 复制</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--空格-->
|
||||||
|
<view class="express-divider"></view>
|
||||||
|
<!--寄件人,发件人的信息-->
|
||||||
|
<view class="express-contact">
|
||||||
|
<view class="contact-item">
|
||||||
|
<text class="contact-label">寄件人</text>
|
||||||
|
<text class="contact-value">{{ logisticsInfo.sender.name }}</text>
|
||||||
|
<text class="contact-phone">{{ logisticsInfo.sender.phone }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="contact-arrow">›</view>
|
||||||
|
<view class="contact-item">
|
||||||
|
<text class="contact-label">收件人</text>
|
||||||
|
<text class="contact-value">
|
||||||
|
{{ xiaoMain.emsOrder订单?.order用户配送地址?.address?.userName }}
|
||||||
|
</text>
|
||||||
|
<text class="contact-phone">
|
||||||
|
{{
|
||||||
|
xiaoMain.emsOrder订单?.order用户配送地址?.address?.telNumber?.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
|
||||||
|
}}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--收件人的地址详细信息-->
|
||||||
|
<view class="express-address">
|
||||||
|
<text class="address-icon">📍</text>
|
||||||
|
<text class="address-text">{{ logisticsInfo.receiver.address }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 物流状态提示 -->
|
||||||
|
<view class="status-notice" :class="getStatusClass">
|
||||||
|
<view class="notice-icon">{{ current当前物流数据?.icon }}</view>
|
||||||
|
<view class="notice-content">
|
||||||
|
<text class="notice-title">{{ current当前物流数据?.title }}</text>
|
||||||
|
<text class="notice-desc">{{ current当前物流数据?.desc }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 物流追踪标题 -->
|
||||||
|
<view class="tracking-header">
|
||||||
|
<text class="tracking-title">物流追踪</text>
|
||||||
|
<text class="tracking-count">共 {{ xiaoMain.emsOrder订单?.order物流数据?.path_item_num }}
|
||||||
|
条记录
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 物流时间轴 -->
|
||||||
|
<view class="timeline">
|
||||||
|
<view class="timeline-item" v-for="(item, index) in 物流数据?.path_item_list" :key="index"
|
||||||
|
:class="{ 'is-latest': index === 0 }">
|
||||||
|
<!-- 左侧时间轴 -->
|
||||||
|
<view class="timeline-left">
|
||||||
|
<view class="dot-wrap">
|
||||||
|
<view class="dot"
|
||||||
|
:class="{ 'dot-waiting': index === 0 }"></view>
|
||||||
|
<view class="line" v-if="index !== 物流数据?.path_item_list.length! - 1"></view>
|
||||||
|
</view>
|
||||||
|
<view class="time">{{ dayjs.unix(item.action_time).format("MM/DD") }}</view>
|
||||||
|
<view class="time-hour">{{ dayjs.unix(item.action_time).format("HH:mm") }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 右侧内容 -->
|
||||||
|
<view class="timeline-right">
|
||||||
|
<view class="msg">{{ item.action_msg }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 等揽件状态专属提示 -->
|
||||||
|
<view class="waiting-tips" v-if="isWaitingPickup">
|
||||||
|
<view class="tip-item">
|
||||||
|
<text class="tip-icon">⏰</text>
|
||||||
|
<text class="tip-text">商家正在准备商品，请耐心等待</text>
|
||||||
|
</view>
|
||||||
|
<view class="tip-item">
|
||||||
|
<text class="tip-icon">📞</text>
|
||||||
|
<text class="tip-text">如需催单请联系商家或快递公司</text>
|
||||||
|
</view>
|
||||||
|
<view class="tip-item">
|
||||||
|
<text class="tip-icon">🔄</text>
|
||||||
|
<text class="tip-text">页面将自动刷新最新物流状态</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!--滚动区域结束-->
|
||||||
|
<view class="scrollBottomHeigh"><!--底部预留区域--></view>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</wd-config-provider>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||||||
|
import {ref, computed, watchEffect} from "vue";
|
||||||
|
import type {ApiAxiosResponse, GlobelsChildPropsType} from "@/types/通用类型";
|
||||||
|
import {onTabItemTap} from "@dcloudio/uni-app";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import {useMessage, useToast} from "wot-design-uni";
|
||||||
|
import {tryOnLoad, useQuery, useRequest} from "@uni-helper/uni-use";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import type {OrderItemsListDataType} from "@/subPackages/homeSubPages/订单数据页面/小程序商城订单列表类型";
|
||||||
|
import {物流_实时更物流数据} from "@/hooks/接口API";
|
||||||
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
let toast = useToast("default-toast");
|
||||||
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
let pxScreenHeight = ref(); // 手机高度
|
||||||
|
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||||||
|
let pxScrollHeight = ref(); // 滚动区域高度
|
||||||
|
let statusHeight = ref(); // 固定的顶部
|
||||||
|
let meunHeight = ref();//插槽时要用的 高度
|
||||||
|
const modelValue: GlobelsChildPropsType = {
|
||||||
|
isShowLeft: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
|
||||||
|
iconTextLeft: {classPrefix: "xiaozizi", name: "arrow-left-circle-line", size: 23},
|
||||||
|
},
|
||||||
|
isShowRight: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
|
||||||
|
iconTextRight: {classPrefix: "xiaozizi", name: "shangpintongbu", size: 23},
|
||||||
|
},
|
||||||
|
title_text: "物流信息", navIsShow: "default",
|
||||||
|
};
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
// 获取特定参数的值
|
||||||
|
const {value: emsNumber} = useQuery("ems");
|
||||||
|
tryOnLoad(() => {
|
||||||
|
console.log(emsNumber.value);
|
||||||
|
logisticsInfo.value.waybillId = emsNumber.value;
|
||||||
|
});
|
||||||
|
const homeLeft = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.navigateBack({delta: 1}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
};
|
||||||
|
const 复制物流运单号 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
await wx.setClipboardData({data: xiaoMain.emsOrder订单?.order物流公司订单编号 ?? ""});
|
||||||
|
};
|
||||||
|
|
||||||
|
const homeRight = async () => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
console.log(Object.keys(xiaoMain.emsOrder订单?.order物流数据 ?? {}).length);
|
||||||
|
if (Object.keys(xiaoMain.emsOrder订单?.order物流数据 ?? {}).length <= 0) {
|
||||||
|
toast.warning({msg: "揽件中", position: "middle"});
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
let data = await useRequest<ApiAxiosResponse<OrderItemsListDataType>>(物流_实时更物流数据, {
|
||||||
|
method: "POST", data: {
|
||||||
|
order物流公司订单编号: xiaoMain.emsOrder订单?.order物流公司订单编号,
|
||||||
|
order物流订单号: xiaoMain.emsOrder订单?.order物流订单号
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log(data.data.value);
|
||||||
|
// xiaoMain.orderListData = data.data.value?.resData.listData ?? [];
|
||||||
|
toast.success({msg: "数据已刷新", position: "middle"});
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
let defaultSearchChange = async () => {
|
||||||
|
console.log("搜索发起");
|
||||||
|
};
|
||||||
|
onTabItemTap(() => {
|
||||||
|
console.log("🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 物流状态枚举
|
||||||
|
*/
|
||||||
|
enum LogisticsStatus {
|
||||||
|
WAITING_PICKUP = "waiting_pickup",
|
||||||
|
IN_TRANSIT = "in_transit",
|
||||||
|
DELIVERING = "delivering",
|
||||||
|
SIGNED = "signed"
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 当前物流状态（可切换测试）
|
||||||
|
*/
|
||||||
|
const currentLogisticsStatus = ref<LogisticsStatus>(LogisticsStatus.IN_TRANSIT);
|
||||||
|
const current当前物流数据 = ref<{
|
||||||
|
text: string,
|
||||||
|
icon: "✅" | "📋" | "🚚" | "🏃" | "🌷",
|
||||||
|
title: string,
|
||||||
|
desc: "感谢使用EMS，期待再次为您服务" | "商家已发货，快递员即将上门取件" | "您的包裹正在发往目的地" | "预计今日送达，请保持电话畅通"
|
||||||
|
}>();
|
||||||
|
watchEffect(() => {
|
||||||
|
const status = xiaoMain.emsOrder订单?.order物流状态 || "待揽件";
|
||||||
|
if (xiaoMain.emsOrder订单?.order物流状态 === "待揽件") {
|
||||||
|
currentLogisticsStatus.value = LogisticsStatus.WAITING_PICKUP;
|
||||||
|
current当前物流数据.value = {
|
||||||
|
text: "待揽件",
|
||||||
|
icon: "📋",
|
||||||
|
title: "等待快递员揽件",
|
||||||
|
desc: "商家已发货，快递员即将上门取件"
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (["揽件成功", "揽件失败", "分配业务员", "更新运输轨迹"].includes(status)) {
|
||||||
|
console.log("进入配送中状态:", status);
|
||||||
|
currentLogisticsStatus.value = LogisticsStatus.IN_TRANSIT;
|
||||||
|
current当前物流数据.value = {
|
||||||
|
text: xiaoMain.emsOrder订单?.order物流状态 ?? "运输中",
|
||||||
|
icon: "🚚",
|
||||||
|
title: "快件正在运输中",
|
||||||
|
desc: "您的包裹正在发往目的地"
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (xiaoMain.emsOrder订单?.order物流状态 === "开始派送") {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏签收成功签收成功签收成功签收成功 ", xiaoMain.emsOrder订单?.order物流状态);
|
||||||
|
currentLogisticsStatus.value = LogisticsStatus.DELIVERING;
|
||||||
|
current当前物流数据.value = {
|
||||||
|
text: xiaoMain.emsOrder订单?.order物流状态 ?? "派送中",
|
||||||
|
icon: "🏃",
|
||||||
|
title: "快递员正在派送",
|
||||||
|
desc: "预计今日送达，请保持电话畅通"
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (["签收成功", "已确认", "待用户确认收货"].includes(status)) {
|
||||||
|
currentLogisticsStatus.value = LogisticsStatus.SIGNED;
|
||||||
|
current当前物流数据.value = {
|
||||||
|
text: xiaoMain.emsOrder订单?.order物流状态 ?? "已签收",
|
||||||
|
icon: "✅",
|
||||||
|
title: "快件已签收",
|
||||||
|
desc: "感谢使用EMS，期待再次为您服务"
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (["已评价"].includes(status)) {
|
||||||
|
currentLogisticsStatus.value = LogisticsStatus.SIGNED;
|
||||||
|
current当前物流数据.value = {
|
||||||
|
text: xiaoMain.emsOrder订单?.order物流状态 ?? "已签收",
|
||||||
|
icon: "🌷",
|
||||||
|
title: "已评价",
|
||||||
|
desc: "感谢使用EMS，期待再次为您服务"
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
const current当前物流状态是否已揽件状态 = computed(() => {
|
||||||
|
const status = xiaoMain.emsOrder订单?.order物流状态 || "待揽件";
|
||||||
|
if (xiaoMain.emsOrder订单?.order物流状态 === "待揽件") {
|
||||||
|
return LogisticsStatus.WAITING_PICKUP; // 返回待揽件的状态
|
||||||
|
}
|
||||||
|
if (["揽件成功", "揽件失败", "分配业务员", "更新运输轨迹"].includes(status)) {
|
||||||
|
console.log("进入配送中状态:", status);
|
||||||
|
return LogisticsStatus.IN_TRANSIT;
|
||||||
|
}
|
||||||
|
if (["开始派送"].includes(status)) {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏签收成功签收成功签收成功签收成功 ", xiaoMain.emsOrder订单?.order物流状态);
|
||||||
|
return LogisticsStatus.DELIVERING; // 返回配送中的状态
|
||||||
|
}
|
||||||
|
|
||||||
|
if (["签收成功", "已确认", "待用户确认收货", "已评价"].includes(status)) {
|
||||||
|
console.log("进入配送中状态:", status);
|
||||||
|
return LogisticsStatus.SIGNED;
|
||||||
|
}
|
||||||
|
return LogisticsStatus.WAITING_PICKUP;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 是否显示最底部的 等待揽件的状态 这里的状态是 控制css样式的
|
||||||
|
const isWaitingPickup = computed(() => current当前物流状态是否已揽件状态.value === LogisticsStatus.WAITING_PICKUP);
|
||||||
|
//处于不同状态的时间段的 返回的类名
|
||||||
|
const getStatusClass = computed(() => {
|
||||||
|
switch (currentLogisticsStatus.value) {
|
||||||
|
case LogisticsStatus.WAITING_PICKUP:
|
||||||
|
return "status-waiting";
|
||||||
|
case LogisticsStatus.IN_TRANSIT:
|
||||||
|
return "status-transit";
|
||||||
|
case LogisticsStatus.DELIVERING:
|
||||||
|
return "status-delivering";
|
||||||
|
case LogisticsStatus.SIGNED:
|
||||||
|
return "status-signed";
|
||||||
|
default:
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 模拟微信 logistics.getPath 返回的数据
|
||||||
|
*/
|
||||||
|
const logisticsInfo = computed(() => {
|
||||||
|
return {
|
||||||
|
deliveryId: "EMS",
|
||||||
|
deliveryName: "中国邮政速递物流",
|
||||||
|
waybillId: xiaoMain.emsOrder订单?.order物流公司订单编号,
|
||||||
|
sender: {
|
||||||
|
// 寄件人信息
|
||||||
|
name: "六果泡泡",
|
||||||
|
phone: "***********",
|
||||||
|
address: "********"
|
||||||
|
},
|
||||||
|
receiver: {
|
||||||
|
// 收件人信息
|
||||||
|
name: xiaoMain.emsOrder订单?.order用户配送地址?.address?.userName ?? "",
|
||||||
|
phone: xiaoMain.emsOrder订单?.order用户配送地址?.address?.telNumber ?? "",
|
||||||
|
address: (xiaoMain.emsOrder订单?.order用户配送地址?.address?.provinceName ?? "") + (xiaoMain.emsOrder订单?.order用户配送地址?.address?.cityName ?? "") + (xiaoMain.emsOrder订单?.order用户配送地址?.address?.detailInfo ?? "")
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const 物流数据 = computed(() => {
|
||||||
|
const 订单 = xiaoMain.emsOrder订单;
|
||||||
|
if (Object.keys(xiaoMain.emsOrder订单?.order物流数据 ?? {}).length === 0) {
|
||||||
|
// 此时说明对象为空
|
||||||
|
return {
|
||||||
|
openid: 订单?.order支付者openid ?? "", // 兜底为空字符串
|
||||||
|
waybill_id: 订单?.order物流公司订单编号 ?? "", // 兜底为空字符串
|
||||||
|
delivery_id: "EMS",
|
||||||
|
path_item_num: 0, // 直接写死为 2，或者动态计算 [].length
|
||||||
|
path_item_list: [
|
||||||
|
{
|
||||||
|
action_time: Math.floor(Date.now() / 1000),
|
||||||
|
action_type: 106001,
|
||||||
|
action_msg: "订单已提交，等待快递员取件",
|
||||||
|
// location: "" // 现在有 location 字段了，不会报错
|
||||||
|
},
|
||||||
|
{
|
||||||
|
action_time: Math.floor(Date.now() / 1000),
|
||||||
|
action_type: 100000,
|
||||||
|
action_msg: "商家打包商品已完成",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
return xiaoMain.emsOrder订单?.order物流数据;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,393 @@
|
|||||||
|
<template>
|
||||||
|
<view class="points-record">
|
||||||
|
<!-- 顶部标题区 -->
|
||||||
|
<view class="header">
|
||||||
|
<view class="header-left">
|
||||||
|
<view class="header-icon">
|
||||||
|
<text class="header-icon-text">🏆</text>
|
||||||
|
</view>
|
||||||
|
<view class="header-title">
|
||||||
|
<text class="header-text">积分明细</text>
|
||||||
|
<text class="header-sub">共 {{ xiaoMain.mini_user_积分数据?.share点击次数 }} 条记录</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="header-right">
|
||||||
|
<text class="header-month">本月</text>
|
||||||
|
<text class="header-arrow">▸</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<view class="list">
|
||||||
|
<view
|
||||||
|
class="item"
|
||||||
|
v-for="(item, index) in xiaoMain.积分展示数据的列表"
|
||||||
|
:key="item.id_str"
|
||||||
|
:style="{ animationDelay: index * 0.08 + 's' }"
|
||||||
|
>
|
||||||
|
<!-- 分享者头像 -->
|
||||||
|
<view class="avatar-wrap">
|
||||||
|
<image class="avatar" :src="item.share点击者头像" mode="aspectFill"></image>
|
||||||
|
<view class="avatar-ring"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 中间信息 -->
|
||||||
|
<view class="info">
|
||||||
|
<view class="info-top">
|
||||||
|
<text class="nickname">{{ item.share点击者昵称 || "匿名用户" }}</text>
|
||||||
|
<view class="tag tag-blue">
|
||||||
|
<text class="tag-text" :style="{ color: getTagStyle(item.share分享类型).color }">
|
||||||
|
{{ item.share分享类型 }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info-middle">
|
||||||
|
<text class="clicker-label">经验值+：</text>
|
||||||
|
<image class="clicker-avatar" :src="item.share分享者头像" mode="aspectFill"></image>
|
||||||
|
<text class="clicker-name">{{ item.share分享者昵称 }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-bottom">
|
||||||
|
<text class="date">{{ dayjs(item.dateAndTime).format("MM-DD") }}</text>
|
||||||
|
<text class="dot">•</text>
|
||||||
|
<text class="way">{{ item.share积分是否可以提现的状态 }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 积分值 -->
|
||||||
|
<view class="score-wrap" @click="我的页面进入积分页面事件">
|
||||||
|
<text class="score-sign">+</text>
|
||||||
|
<text class="score-num">{{ item.share分享者积分值 }}</text>
|
||||||
|
<text class="score-unit">积分</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部 -->
|
||||||
|
<view class="footer">
|
||||||
|
<text class="footer-text">— 已经到底了 —</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
// 颜色配置集中管理
|
||||||
|
const tagColors = {
|
||||||
|
"商品推荐": {color: "#FF6B6B", bg: "rgba(255,107,107,0.1)"},
|
||||||
|
"好物推荐": {color: "#FF6B6B", bg: "rgba(255,107,107,0.1)"},
|
||||||
|
"发券奖励": {color: "#FF6B6B", bg: "rgba(255,107,107,0.1)"},
|
||||||
|
"每日签到": {color: "#4ECDC4", bg: "rgba(78,205,196,0.1)"},
|
||||||
|
"荐客积分": {color: "#4ECDC4", bg: "rgba(78,205,196,0.1)"},
|
||||||
|
"邀请好友": {color: "#45B7D1", bg: "rgba(69,183,209,0.1)"},
|
||||||
|
"好友下单": {color: "#45B7D1", bg: "rgba(69,183,209,0.1)"},
|
||||||
|
"浏览奖励": {color: "#96CEB4", bg: "rgba(150,206,180,0.1)"},
|
||||||
|
"小程序推荐": {color: "#96CEB4", bg: "rgba(150,206,180,0.1)"},
|
||||||
|
"新人红包": {color: "#96CEB4", bg: "rgba(150,206,180,0.1)"},
|
||||||
|
"下单返利": {color: "#FFEAA7", bg: "rgba(255,234,167,0.1)"},
|
||||||
|
"通知好友": {color: "#FFEAA7", bg: "rgba(255,234,167,0.1)"},
|
||||||
|
};
|
||||||
|
|
||||||
|
function getTagStyle(type: "商品推荐" | "每日签到" | "通知好友" | "下单返利" | "好物推荐" | "小程序推荐") {
|
||||||
|
return tagColors[type] || {color: "#999999", bg: "rgba(153,153,153,0.1)"};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const 我的页面进入积分页面事件 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.heavy});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/* ========== 基础容器 ========== */
|
||||||
|
.points-record {
|
||||||
|
width: 698rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 36rpx 32rpx 16rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 顶部标题 ========== */
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 36rpx;
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.header-icon {
|
||||||
|
width: 72rpx;
|
||||||
|
height: 72rpx;
|
||||||
|
background: linear-gradient(135deg, #ffd86b, #ff9f43);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
box-shadow: 0 6rpx 16rpx rgba(255, 159, 67, 0.35);
|
||||||
|
|
||||||
|
.header-icon-text {
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.header-text {
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a1a2e;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-sub {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #a0a0b0;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
background: #f0f0f5;
|
||||||
|
border-radius: 28rpx;
|
||||||
|
padding: 10rpx 24rpx;
|
||||||
|
|
||||||
|
.header-month {
|
||||||
|
font-size: 25rpx;
|
||||||
|
color: #555;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-arrow {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 列表 ========== */
|
||||||
|
.list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 28rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f3f3f7;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20rpx);
|
||||||
|
animation: fadeInUp 0.5s ease forwards;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分享者头像 */
|
||||||
|
.avatar-wrap {
|
||||||
|
position: relative;
|
||||||
|
width: 96rpx;
|
||||||
|
height: 96rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(135deg, #e8f4ff, #d6eaff);
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 82rpx;
|
||||||
|
height: 82rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-ring {
|
||||||
|
position: absolute;
|
||||||
|
top: -4rpx;
|
||||||
|
left: -4rpx;
|
||||||
|
right: -4rpx;
|
||||||
|
bottom: -4rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3rpx solid #4facfe;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 中间信息 */
|
||||||
|
.info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
.info-top {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
|
||||||
|
.nickname {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
//color: #2d2d3a;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
max-width: 160rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
padding: 4rpx 16rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.tag-text {
|
||||||
|
font-size: 21rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.tag-blue {
|
||||||
|
//background: #e8f4ff;
|
||||||
|
|
||||||
|
.tag-text {
|
||||||
|
color: #4facfe;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-middle {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
|
||||||
|
.clicker-label {
|
||||||
|
font-size: 23rpx;
|
||||||
|
//color: #b0b0b8;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clicker-avatar {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 6rpx;
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clicker-name {
|
||||||
|
font-size: 23rpx;
|
||||||
|
color: #888;
|
||||||
|
max-width: 140rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-bottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.date {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #b0b0b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #d0d0d8;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.way {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #b0b0b8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 积分值 */
|
||||||
|
.score-wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: baseline;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
padding: 12rpx 24rpx;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.35);
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.score-sign {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
margin-right: 2rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-num {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-unit {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
margin-left: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 底部 ========== */
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 24rpx 0 8rpx;
|
||||||
|
|
||||||
|
.footer-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #d0d0d8;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 动画 ========== */
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20rpx);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
<style scoped lang="scss">
|
||||||
|
.root-demo {
|
||||||
|
width: 750rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 36rpx;
|
||||||
|
/* 快捷入口 */
|
||||||
|
.quick-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 24rpx 0;
|
||||||
|
margin-bottom: 36rpx;
|
||||||
|
background: rgba(128, 128, 128, 0.04);
|
||||||
|
border-radius: 28rpx;
|
||||||
|
|
||||||
|
.click-action-item {
|
||||||
|
//opacity: 0.85;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
padding: 16rpx 24rpx;
|
||||||
|
|
||||||
|
.action-icon {
|
||||||
|
font-size: 52rpx;
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(128, 128, 128, 0.06);
|
||||||
|
border-radius: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-name {
|
||||||
|
font-size: 24rpx;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class=root-demo>
|
||||||
|
<!-- 快捷入口 -->
|
||||||
|
<view class="quick-actions">
|
||||||
|
<view class="action-item" v-for="(action, index) in quickActions"
|
||||||
|
:key="index" @click="选中的服务功能(action)">
|
||||||
|
<view class="action-icon" hover-class="click-action-item" :hover-stay-time="100">
|
||||||
|
{{ action.icon }}
|
||||||
|
</view>
|
||||||
|
<text class="action-name">{{ action.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// 页面功能注释区域
|
||||||
|
import {ref} from "vue";
|
||||||
|
import {useToast} from "wot-design-uni";
|
||||||
|
|
||||||
|
|
||||||
|
let toast = useToast("default-toast");
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "user-com-servise"}); // 组件使用
|
||||||
|
const quickActions = ref([
|
||||||
|
{icon: "📤", name: "分享赚分"},
|
||||||
|
{icon: "📝", name: "兑换记录"},
|
||||||
|
{icon: "🏆", name: "任务中心"},
|
||||||
|
{icon: "📍", name: "定位授权"},
|
||||||
|
]);
|
||||||
|
const 选中的服务功能 = async (action: {
|
||||||
|
icon: string,
|
||||||
|
name: string,
|
||||||
|
}): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
toast.success(action.name);
|
||||||
|
if (action.name === "分享赚分") {
|
||||||
|
toast.success("暂无分享");
|
||||||
|
}
|
||||||
|
if (action.name === "任务中心") {
|
||||||
|
toast.success("暂无任务");
|
||||||
|
}
|
||||||
|
if (action.name === "兑换记录") {
|
||||||
|
// toast.success("兑换记录未开放");
|
||||||
|
}
|
||||||
|
if (action.name === "定位授权") {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,397 @@
|
|||||||
|
<template>
|
||||||
|
<view class="rood-div">
|
||||||
|
<wd-config-provider :theme="theme">
|
||||||
|
<view class="finance-card">
|
||||||
|
<!-- 顶部用户信息区域 -->
|
||||||
|
<view class="card-header">
|
||||||
|
<view class="user-info">
|
||||||
|
<image class="avatar" :src="xiaoMain.mini_user_data?.user_头像" mode="aspectFill"></image>
|
||||||
|
<view class="user-text">
|
||||||
|
<text class="date-greeting">{{ 当天的日期 }}，{{ 问候语 }}</text>
|
||||||
|
<text class="username">{{ xiaoMain.mini_user_data?.user_昵称 }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="calendar-icon">
|
||||||
|
<text class="iconfont">📅</text> <!-- 可替换为 icon 组件或图片 -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="ring-card">
|
||||||
|
|
||||||
|
<view class="xiaozizi-gird">
|
||||||
|
<view class="xiaozizi-gird-item" @click="点击总积分事件">
|
||||||
|
<wd-circle v-model="全部值" :size="50" :color="gradientColor"
|
||||||
|
:text="`${xiaoMain.mini_user_积分数据?.share总积分?? 0}`" :strokeWidth="15"
|
||||||
|
custom-class="circle-xiaozizi-gird">
|
||||||
|
</wd-circle>
|
||||||
|
<view class="xiaozizi-gird-items-text">总积分</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="xiaozizi-gird-item" @click="可提现事件">
|
||||||
|
<wd-circle v-model="可提现值" :size="50" color="#05ce66"
|
||||||
|
:text="`${xiaoMain.mini_user_积分数据?.share可提现积分?? 0}`" :strokeWidth="15"
|
||||||
|
custom-class="circle-xiaozizi-gird">
|
||||||
|
</wd-circle>
|
||||||
|
<view class="xiaozizi-gird-items-text">可兑换</view>
|
||||||
|
</view>
|
||||||
|
<view class="xiaozizi-gird-item" @click="已兑换事件">
|
||||||
|
<wd-circle v-model="已提现值" :size="50" color="#007799"
|
||||||
|
:text="`${xiaoMain.mini_user_积分数据?.share已提现积分?? 0}`" :strokeWidth="15"
|
||||||
|
custom-class="circle-xiaozizi-gird">
|
||||||
|
</wd-circle>
|
||||||
|
<view class="xiaozizi-gird-items-text">已兑换</view>
|
||||||
|
</view>
|
||||||
|
<view class="xiaozizi-gird-item" @click="待解锁事件">
|
||||||
|
<wd-circle v-model="待解锁的值" :size="50" color="#A0AEC0"
|
||||||
|
:text="`${xiaoMain.mini_user_积分数据?.share不可提现积分?? 0}`"
|
||||||
|
:strokeWidth="15"
|
||||||
|
custom-class="circle-xiaozizi-gird">
|
||||||
|
</wd-circle>
|
||||||
|
<view class="xiaozizi-gird-items-text">待解锁</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="card-footer">
|
||||||
|
<wd-button :plain="true" size="small" type="info" @click="发起提现事件"
|
||||||
|
custom-class="custom-shadow">
|
||||||
|
提现
|
||||||
|
</wd-button>
|
||||||
|
<wd-button :plain="true" size="small" type="info" @click="解锁事件"
|
||||||
|
:disabled="!!xiaoMain.mini_user_data?.user_区县"
|
||||||
|
custom-class="custom-shadow">
|
||||||
|
解锁🔓
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</wd-config-provider>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
// 组件逻辑部分（本例数据写死，无需响应式）
|
||||||
|
// 如需动态数据，可从 props 传入或使用 store
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import {computed, ref} from "vue";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||||
|
import {useThrottleFn} from "@vueuse/shared";
|
||||||
|
import {get获取用户当前位置信息} from "@/hooks/获取用户定位信息";
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
|
||||||
|
const getUser位置实例对象 = new get获取用户当前位置信息(<string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid);
|
||||||
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
|
||||||
|
let 全部值 = ref(100);
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "tong-yong-title-demo"});
|
||||||
|
const gradientColor = {
|
||||||
|
"0%": "#ffd01e",
|
||||||
|
"100%": "#ee0a24"
|
||||||
|
};
|
||||||
|
let 当天的日期 = computed(() => {
|
||||||
|
return dayjs().format("MM-DD");
|
||||||
|
});
|
||||||
|
let 问候语 = computed(() => {
|
||||||
|
const hour = dayjs().hour();
|
||||||
|
if (hour >= 5 && hour < 12) return "早上好 " + "🌅";
|
||||||
|
if (hour >= 12 && hour < 14) return "中午好 " + "☀️";
|
||||||
|
if (hour >= 14 && hour < 18) return "下午好 " + "🌤️";
|
||||||
|
return "晚上好 " + "🌙";
|
||||||
|
});
|
||||||
|
// 千分位格式化
|
||||||
|
const 点击总积分事件 = useThrottleFn(async () => {
|
||||||
|
//执行时机: 点击后直接执行,但是在设置的时间范围内,不会再次执行
|
||||||
|
await wx.vibrateShort({type: "medium"});//medium heavy light
|
||||||
|
xiaoMain.积分展示数据的列表 = xiaoMain.mini_积分列表数据;
|
||||||
|
}, 500);
|
||||||
|
const 可提现值 = computed(() => {
|
||||||
|
return (xiaoMain.mini_user_积分数据?.share可提现积分 ?? 0) / (xiaoMain.mini_user_积分数据?.share总积分 ?? 0) * 100;
|
||||||
|
});
|
||||||
|
const 已提现值 = computed(() => {
|
||||||
|
return (xiaoMain.mini_user_积分数据?.share已提现积分 ?? 0) / (xiaoMain.mini_user_积分数据?.share总积分 ?? 0) * 100;
|
||||||
|
});
|
||||||
|
const 待解锁的值 = computed(() => {
|
||||||
|
return (xiaoMain.mini_user_积分数据?.share不可提现积分 ?? 0) / (xiaoMain.mini_user_积分数据?.share总积分 ?? 0) * 100;
|
||||||
|
});
|
||||||
|
const 可提现事件 = useThrottleFn(async () => {
|
||||||
|
//执行时机: 点击后直接执行,但是在设置的时间范围内,不会再次执行
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
xiaoMain.积分展示数据的列表 = xiaoMain.mini_积分列表数据.filter((item) => {
|
||||||
|
return item.share积分是否可以提现的状态 === "可提现";
|
||||||
|
});
|
||||||
|
|
||||||
|
}, 500);
|
||||||
|
const 待解锁事件 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
xiaoMain.积分展示数据的列表 = xiaoMain.mini_积分列表数据.filter((item) => {
|
||||||
|
return item.share积分是否可以提现的状态 === "不可提现";
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const 已兑换事件 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
xiaoMain.积分展示数据的列表 = xiaoMain.mini_积分列表数据.filter((item) => {
|
||||||
|
return item.share积分是否可以提现的状态 === "已提现";
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const 解锁事件 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "medium"});//medium heavy light
|
||||||
|
await getUser位置实例对象.getUserLocation();
|
||||||
|
};
|
||||||
|
|
||||||
|
const 发起提现事件 = useThrottleFn(async () => {
|
||||||
|
//执行时机: 点击后直接执行,但是在设置的时间范围内,不会再次执行
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
// let data = await useRequest<ApiAxiosResponse<Array<string>, UniNamespace.RequestMerchantTransferOption>>(积分_发起提现, {
|
||||||
|
// method: "POST", data: {
|
||||||
|
// self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// uni.requestMerchantTransfer({
|
||||||
|
// ...data.data.value!.resData.dictData,
|
||||||
|
// success: (res) => {
|
||||||
|
// console.log("✅✅✅✅✅✅✅✅✅✅✅", res);
|
||||||
|
// },
|
||||||
|
// fail: () => {
|
||||||
|
// console.log("❌❌❌❌❌❌报错了");
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// console.log(data.data.value);
|
||||||
|
}, 3000);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
/* 浅色模式 */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
.xiaozizi-gird {
|
||||||
|
:deep(.circle-xiaozizi-gird) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.wd-circle__text {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
///* 深色模式 */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
||||||
|
.xiaozizi-gird {
|
||||||
|
:deep(.circle-xiaozizi-gird) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.wd-circle__text {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.rood-div {
|
||||||
|
padding: 0 36rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
// 根容器：深色渐变背景 + 圆角 + 内边距
|
||||||
|
.finance-card {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
//background: linear-gradient(135deg, #000000 0%, #331a00 50%, #000000 100%);
|
||||||
|
background: linear-gradient(160deg, #000000 0%, #331a00 50%, #000000 100%);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.5);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// 模拟图片中的光晕效果（可选）
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: radial-gradient(circle at center, rgba(255, 120, 0, 0.1) 0%, transparent 70%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 顶部用户信息区域
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
background-color: #eee; // 占位色
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.date-greeting {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #cccccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-icon {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 月份选择器
|
||||||
|
.month-selector {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
.month-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
color: #cccccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主金额显示
|
||||||
|
.main-amount {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.currency {
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount {
|
||||||
|
font-size: 72rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部收入支出明细
|
||||||
|
.summary-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 24rpx;
|
||||||
|
|
||||||
|
.income {
|
||||||
|
color: #ffcc00; // 收入黄色
|
||||||
|
}
|
||||||
|
|
||||||
|
.expense {
|
||||||
|
color: #00ff7f; // 支出绿色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring-card {
|
||||||
|
//width: 670rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
//padding: 24rpx 20rpx 18rpx;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
backdrop-filter: blur(20rpx);
|
||||||
|
-webkit-backdrop-filter: blur(20rpx);
|
||||||
|
border: 1rpx solid rgba(255, 255, 255, 0.5);
|
||||||
|
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-height: 400rpx;
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
//background: rgba(40, 40, 43, 0.7);
|
||||||
|
border: 1rpx solid rgba(99, 102, 106, 0.3);
|
||||||
|
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
//
|
||||||
|
.xiaozizi-gird {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, auto);
|
||||||
|
grid-auto-rows: 74px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
justify-items: center;
|
||||||
|
|
||||||
|
.xiaozizi-gird-item {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 5rpx;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-auto-rows: auto auto;
|
||||||
|
height: 100%;
|
||||||
|
justify-items: center;
|
||||||
|
|
||||||
|
.xiaozizi-gird-items-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.circle-xiaozizi-gird) {
|
||||||
|
font-size: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-footer {
|
||||||
|
padding-top: 15rpx;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
justify-items: center;
|
||||||
|
|
||||||
|
:deep(.custom-shadow) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
<style scoped lang="scss">
|
||||||
|
.root-demo {
|
||||||
|
width: 750rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 36rpx;
|
||||||
|
/* 头部 */
|
||||||
|
.header-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx 0 36rpx;
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16rpx;
|
||||||
|
|
||||||
|
.header-back {
|
||||||
|
font-size: 54rpx;
|
||||||
|
font-weight: 300;
|
||||||
|
opacity: 0.6;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 46rpx;
|
||||||
|
font-weight: 750;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
.header-record {
|
||||||
|
font-size: 28rpx;
|
||||||
|
opacity: 0.5;
|
||||||
|
padding: 12rpx 24rpx;
|
||||||
|
background: rgba(128, 128, 128, 0.08);
|
||||||
|
border-radius: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class=root-demo>
|
||||||
|
<view class="header-row">
|
||||||
|
<view class="header-left">
|
||||||
|
<text class="header-back"></text>
|
||||||
|
<text class="header-title">我的积分</text>
|
||||||
|
</view>
|
||||||
|
<view class="header-right">
|
||||||
|
<text class="header-record">积分明细</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// 页面功能注释区域
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "user-component-points-header"}); // 组件使用
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,243 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
//@import "@/assets/demo.scss";
|
||||||
|
|
||||||
|
@mixin line-color {
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0%, 100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
animation: gradientFlow 5s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-screen {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "xiaoFont", sans-serif;
|
||||||
|
height: v-bind(pxScreenHeight);
|
||||||
|
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||||||
|
background-size: 750rpx;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-container {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(pxWindowHeight);
|
||||||
|
|
||||||
|
.status-wifi-nav {
|
||||||
|
/*状态栏的高度 这里的值不能动*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(statusHeight);
|
||||||
|
|
||||||
|
:deep(.default-view-slot) {
|
||||||
|
line-height: v-bind(meunHeight);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: v-bind(meunHeight);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.default-view-slot-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||||||
|
border-radius: calc(v-bind(meunHeight) / 2);
|
||||||
|
|
||||||
|
.title-imgimage_item {
|
||||||
|
width: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
height: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right-text {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.grit-content {
|
||||||
|
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight));
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-auto-rows: auto 1fr auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.scrollTopHeigh {
|
||||||
|
/*在滚动区域内的, 可以自定义的高度*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
//background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollViewHeigh {
|
||||||
|
/*滚动页面区域范围*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
/*button按钮的 阴影样式可以直接使用*/
|
||||||
|
.custom-class-button {
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollBottomHeigh {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 1px;
|
||||||
|
@include line-color();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="phone-screen">
|
||||||
|
<wd-config-provider :theme="theme">
|
||||||
|
<view class="root-container">
|
||||||
|
<view class="status-wifi-nav">
|
||||||
|
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||||||
|
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||||||
|
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||||||
|
@homeRight="homeRight">
|
||||||
|
<template v-slot:default>
|
||||||
|
<view class="default-view-slot" @click="defaultSearchChange">
|
||||||
|
<view class="default-view-slot-left"></view>
|
||||||
|
<view class="default-view-slot-right">
|
||||||
|
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||||||
|
src="https://hudie.xiao.band/search.png" webp/>
|
||||||
|
<view class="default-view-slot-right-text">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 30rpx"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</ChildComScroll>
|
||||||
|
</view>
|
||||||
|
<!--分隔线,上面的是子组件-->
|
||||||
|
|
||||||
|
<!-- 滚动区域开始-->
|
||||||
|
<view class="grit-content">
|
||||||
|
<view class="scrollTopHeigh"><!--预留的空间高度-->
|
||||||
|
<user-component-points-card></user-component-points-card>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
|
||||||
|
class="scrollViewHeigh">
|
||||||
|
<view class="line-widht-number" style="height: 10rpx"></view>
|
||||||
|
<view class="line-widht-number" style="height: 10rpx"></view>
|
||||||
|
<!-- <user-com-servise></user-com-servise>-->
|
||||||
|
<user-com-points-list-data></user-com-points-list-data>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
<view class="scrollBottomHeigh">
|
||||||
|
<!--底部预留区域-->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--滚动区域结束-->
|
||||||
|
</view>
|
||||||
|
</wd-config-provider>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||||||
|
import {ref} from "vue";
|
||||||
|
import type {GlobelsChildPropsType} from "@/types/通用类型";
|
||||||
|
import {onLoad, onTabItemTap} from "@dcloudio/uni-app";
|
||||||
|
import UserComPointsListData from "@/subPackages/homeSubPages/用户积分页面/user-com-points-list-data.vue";
|
||||||
|
import UserComponentPointsCard from "@/subPackages/homeSubPages/用户积分页面/user-component-points-card.vue";
|
||||||
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import {积分_当前用户积分列表详情数据, 积分_统计查询} from "@/hooks/接口API";
|
||||||
|
import {whenever} from "@vueuse/shared";
|
||||||
|
import {useRequest} from "@uni-helper/uni-use";
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
let pxScreenHeight = ref(); // 手机高度
|
||||||
|
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||||||
|
let pxScrollHeight = ref(); // 滚动区域高度
|
||||||
|
let statusHeight = ref(); // 固定的顶部
|
||||||
|
let meunHeight = ref();//插槽时要用的 高度
|
||||||
|
const modelValue: GlobelsChildPropsType = {
|
||||||
|
isShowLeft: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
|
||||||
|
iconTextLeft: {classPrefix: "xiaozizi", name: "arrow-left-circle-line", size: 23},
|
||||||
|
},
|
||||||
|
isShowRight: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
|
||||||
|
iconTextRight: {classPrefix: "xiaozizi", name: "jifen3", size: 23},
|
||||||
|
},
|
||||||
|
title_text: "积分管理", navIsShow: "default",
|
||||||
|
};
|
||||||
|
const homeLeft = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.navigateBack({delta: 1}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const homeRight = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
console.log("右键按键");
|
||||||
|
};
|
||||||
|
let defaultSearchChange = async () => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
console.log("搜索发起");
|
||||||
|
};
|
||||||
|
onTabItemTap(async () => {
|
||||||
|
await wx.vibrateShort({type: "heavy",});//medium heavy light
|
||||||
|
});
|
||||||
|
onLoad(async () => {
|
||||||
|
let data = await useRequest(积分_当前用户积分列表详情数据, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
xiaoMain.mini_积分列表数据 = data.data.value;
|
||||||
|
xiaoMain.积分展示数据的列表 = data.data.value;
|
||||||
|
});
|
||||||
|
whenever(() => xiaoMain.mini_unionid, () => {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 demo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_value ",);
|
||||||
|
xiaoMain.query_积分统计查询(积分_统计查询, <string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid);
|
||||||
|
}, {immediate: true});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
.root-com {
|
||||||
|
width: 750rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.bottom-bar {
|
||||||
|
width: 750rpx;
|
||||||
|
//background: rgba(42, 42, 42, 0.95);
|
||||||
|
backdrop-filter: blur(20rpx);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
:deep(.customButton) {
|
||||||
|
//background: linear-gradient(135deg, #00aaff 0%, #0088cc 100%);
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="root-com">
|
||||||
|
<!-- 底部操作栏 -->
|
||||||
|
<view class="bottom-bar">
|
||||||
|
<wd-button custom-class="customButton" type="warning" icon="location"
|
||||||
|
size="large" @click="添加新地址">添加新地址
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
<wd-toast selector="tip_demo"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import {useToast} from "wot-design-uni";
|
||||||
|
import {useRequest} from "@uni-helper/uni-use";
|
||||||
|
import {地址_添加新地址} from "@/hooks/接口API";
|
||||||
|
import type {typeAddressData} from "@/hooks/商城类型文件";
|
||||||
|
import type {ApiAxiosResponse} from "@/types/通用类型";
|
||||||
|
import {nextTick} from "vue";
|
||||||
|
|
||||||
|
const msgToast = useToast("tip_demo");
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "address-com-add-new-address"});
|
||||||
|
|
||||||
|
|
||||||
|
async function 添加新地址(): Promise<void> {
|
||||||
|
try {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
let chooseAddressSuccessCallbackResult = await wx.chooseAddress();
|
||||||
|
let addressData = Object.assign(chooseAddressSuccessCallbackResult, {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid, self_user_unionid: xiaoMain.mini_unionid,
|
||||||
|
});
|
||||||
|
|
||||||
|
let data = await useRequest<ApiAxiosResponse<Array<typeAddressData>>>(地址_添加新地址, {
|
||||||
|
method: "POST",
|
||||||
|
data: {
|
||||||
|
addressData: addressData,
|
||||||
|
self_mini_openid: xiaoMain.mini_openid,
|
||||||
|
self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
xiaoMain.addressDataList = data.data.value?.resData.listData ?? [];
|
||||||
|
await nextTick(() => {
|
||||||
|
console.log("DOM更新完成", xiaoMain.addressDataList);
|
||||||
|
});
|
||||||
|
if (data.data.value?.resData.dictData.demo === "地址相同") {
|
||||||
|
msgToast.info({msg: "地址已存在", position: "middle"});
|
||||||
|
} else {
|
||||||
|
// wx.showToast( { title: "地址添加成功", icon: "success" } );
|
||||||
|
msgToast.success({msg: "地址添加成功", position: "middle"});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
@@ -0,0 +1,275 @@
|
|||||||
|
<template>
|
||||||
|
<view class="address-empty-container">
|
||||||
|
<view class="empty-card">
|
||||||
|
<!-- 标题栏 -->
|
||||||
|
<view class="header">
|
||||||
|
<text class="address-count">共 0 个地址</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 图标区域 -->
|
||||||
|
<view class="icon-wrapper">
|
||||||
|
<view class="warning-icon">
|
||||||
|
<view class="circle-bg"></view>
|
||||||
|
<!-- <view class="exclamation-mark"></view>-->
|
||||||
|
<wd-icon classPrefix="xiaozizi" name="1890ff-copy" color="#f28b54" :size="30"
|
||||||
|
custom-class="exclamation-mark"/>
|
||||||
|
<view class="red-circle"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 提示信息 -->
|
||||||
|
<view class="text-content">
|
||||||
|
<text class="title">暂无收货地址</text>
|
||||||
|
<text class="subtitle">请添加地址以便我们为您服务</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<wd-button type="primary" icon="1890ff-copy" :block="true" classPrefix="xiaozizi"
|
||||||
|
@click="添加新地址" custom-class="custom-shadow">
|
||||||
|
添加新地址
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import {useRequest} from "@uni-helper/uni-use";
|
||||||
|
import {地址_首次添加新地址} from "@/hooks/接口API";
|
||||||
|
import type {ApiAxiosResponse} from "@/types/通用类型";
|
||||||
|
import type {typeAddressData} from "@/hooks/商城类型文件";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "address-com-empty"}); // 组件使用
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
|
||||||
|
async function 添加新地址(): Promise<void> {
|
||||||
|
try {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
let chooseAddressSuccessCallbackResult = await wx.chooseAddress({});
|
||||||
|
let addressData = Object.assign(chooseAddressSuccessCallbackResult, {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid,
|
||||||
|
self_user_unionid: xiaoMain.mini_unionid,
|
||||||
|
});
|
||||||
|
let data = await useRequest<ApiAxiosResponse<Array<typeAddressData>>>(地址_首次添加新地址, {
|
||||||
|
method: "POST",
|
||||||
|
data: {
|
||||||
|
addressData: addressData,
|
||||||
|
self_mini_openid: xiaoMain.mini_openid,
|
||||||
|
self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 打印地址结果 ", data.data.value?.resData.listData);
|
||||||
|
xiaoMain.addressDataList = data.data.value?.resData.listData ?? [];
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.address-empty-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 500rpx;
|
||||||
|
//padding: 40rpx;
|
||||||
|
padding-top: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600rpx;
|
||||||
|
padding: 40rpx 30rpx 50rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
//background: linear-gradient(145deg, #1a2332, #0f1622);
|
||||||
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.5),
|
||||||
|
0 2rpx 6rpx rgba(0, 0, 0, 0.3);
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 2rpx;
|
||||||
|
background: linear-gradient(90deg,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(0, 122, 255, 0.3) 50%,
|
||||||
|
transparent 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标题栏样式
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
|
||||||
|
|
||||||
|
.address-count {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #b0b0b0;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 警告图标样式 - 根据图片描述修改为红色感叹号
|
||||||
|
.icon-wrapper {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-icon {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.circle-bg {
|
||||||
|
position: absolute;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
//background: linear-gradient(135deg, #007AFF, #0056CC);
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3),
|
||||||
|
inset 0 1rpx 1rpx rgba(255, 255, 255, 0.1);
|
||||||
|
//animation: pulse 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.exclamation-mark) {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-circle {
|
||||||
|
position: absolute;
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
border: 3rpx solid #FF3B30;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.6;
|
||||||
|
animation: scalePulse 2s ease-out infinite;
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文字样式
|
||||||
|
.text-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16rpx;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 1rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #8E8E93;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮样式 - 微信小程序适配
|
||||||
|
.add-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background: linear-gradient(135deg, #007AFF, #0056CC);
|
||||||
|
border: none;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
color: white;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
box-shadow: 0 8rpx 20rpx rgba(0, 122, 255, 0.3),
|
||||||
|
0 2rpx 4rpx rgba(0, 122, 255, 0.2);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
/* 移除默认按钮样式 */
|
||||||
|
&::after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮点击效果 */
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.4),
|
||||||
|
0 1rpx 2rpx rgba(0, 122, 255, 0.3);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮流光效果 */
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
rgba(255, 255, 255, 0.1),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
transition: left 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active::before {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-text {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 动画定义
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.05);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scalePulse {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,356 @@
|
|||||||
|
<template>
|
||||||
|
<view class="root-com">
|
||||||
|
<address-com-title-label></address-com-title-label>
|
||||||
|
<view class="address-list">
|
||||||
|
<view v-for="item in xiaoMain.addressDataList" :key="item.id_主键_配送地址"
|
||||||
|
:class="{ 'active-card': item.isDefaultAddress==='是默认地址' }"
|
||||||
|
class="address-card">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 地址卡片顶部 -->
|
||||||
|
<view class="card-top">
|
||||||
|
<view class="card-title">
|
||||||
|
<text :class="{'active-name-color':item.isDefaultAddress==='是默认地址'}" class="name">
|
||||||
|
{{ item.address.userName }}
|
||||||
|
</text>
|
||||||
|
<text :class="{'active-phone-color':item.isDefaultAddress==='是默认地址'}" class="phone">☎️
|
||||||
|
{{ formatPhoneNumber(item.address.telNumber) }}
|
||||||
|
</text>
|
||||||
|
<view class="div"></view>
|
||||||
|
<view v-if="item.isDefaultAddress==='是默认地址'" class="default-tag">
|
||||||
|
<text class="default-tag-text">默认</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 地址详情 -->
|
||||||
|
<view class="card-content">
|
||||||
|
<view :class="{ 'address-detail-active': item.isDefaultAddress==='是默认地址' }"
|
||||||
|
class="address-detail">
|
||||||
|
<text>
|
||||||
|
{{ item.address.provinceName }} {{ item.address.cityName }} {{ item.address.countyName }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="address-tag">
|
||||||
|
<text :class="{'active-color':item.isDefaultAddress==='是默认地址'}" class="address-tag-text">
|
||||||
|
{{ item.address.detailInfo }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 默认地址选择 -->
|
||||||
|
<view class="card-bottom" @click="设为默认地址(item)">
|
||||||
|
<view class="default-select">
|
||||||
|
<view class="checkbox">
|
||||||
|
<view v-if="item.isDefaultAddress==='是默认地址'" class="checkbox-inner"></view>
|
||||||
|
</view>
|
||||||
|
<text class="checkbox-label">默认地址</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-actions">
|
||||||
|
<text class="icon-edit" @click.stop="更新当前地址(item )">编辑</text>
|
||||||
|
<text class="icon-delete" @click.stop="删除当前地址(item)">删除</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-toast selector="tip_demo"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import AddressComTitleLabel from "@/subPackages/homeSubPages/用户配送地址页面/address-com-title-label.vue";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "address-com-list"}); // 组件使用
|
||||||
|
|
||||||
|
import {nextTick, onMounted} from "vue";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
|
||||||
|
import {useToast} from "wot-design-uni";
|
||||||
|
import {useRequest} from "@uni-helper/uni-use";
|
||||||
|
import {
|
||||||
|
地址_删除当前地址,
|
||||||
|
地址_更新地址,
|
||||||
|
地址_查询全部地址,
|
||||||
|
地址_设置当前地址为默认配送地址
|
||||||
|
} from "@/hooks/接口API";
|
||||||
|
import type {ApiAxiosResponse} from "@/types/通用类型";
|
||||||
|
import type {typeAddressData} from "@/hooks/商城类型文件";
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
|
||||||
|
const msgToast = useToast("tip_demo");
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
let data = await useRequest<ApiAxiosResponse<Array<typeAddressData>>>(地址_查询全部地址, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
xiaoMain.addressDataList = data.data.value?.resData.listData ?? [];
|
||||||
|
console.log("请求为什么不发送了呢");
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const formatPhoneNumber = (phone?: string): string => {
|
||||||
|
if (!phone) return "";
|
||||||
|
if (phone.length !== 11) return phone;
|
||||||
|
return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
|
||||||
|
};
|
||||||
|
|
||||||
|
async function 更新当前地址(item: typeAddressData): Promise<void> {
|
||||||
|
try {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
let chooseAddressSuccessCallbackResult = await wx.chooseAddress({});
|
||||||
|
|
||||||
|
let addressData = Object.assign(chooseAddressSuccessCallbackResult, {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid,
|
||||||
|
self_user_unionid: xiaoMain.mini_unionid,
|
||||||
|
});
|
||||||
|
let data = await useRequest<ApiAxiosResponse<Array<typeAddressData>>>(地址_更新地址, {
|
||||||
|
method: "POST",
|
||||||
|
data: {
|
||||||
|
addressData: addressData,
|
||||||
|
idkey: item.id_主键_配送地址,
|
||||||
|
self_mini_openid: xiaoMain.mini_openid,
|
||||||
|
self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 赋值
|
||||||
|
xiaoMain.addressDataList = data.data.value?.resData.listData ?? [];
|
||||||
|
if (data.data.value?.resData.dictData.demo === "没有更新") {
|
||||||
|
msgToast.warning({msg: "地址已经存在", position: "middle"});
|
||||||
|
} else {
|
||||||
|
await wx.showToast({title: "地址更新成功", icon: "success"});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function 删除当前地址(item: typeAddressData): Promise<void> {
|
||||||
|
try {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
if (item.isDefaultAddress === "是默认地址") {
|
||||||
|
// wx.showToast( { title: "当前地址为默认地址", icon: "error" } );
|
||||||
|
msgToast.info({msg: "当前地址为默认地址", position: "middle"});
|
||||||
|
} else {
|
||||||
|
let data = await useRequest<ApiAxiosResponse<Array<typeAddressData>>>(地址_删除当前地址, {
|
||||||
|
method: "POST", data: {
|
||||||
|
idKey: item.id_主键_配送地址,
|
||||||
|
self_mini_openid: xiaoMain.mini_openid,
|
||||||
|
self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
xiaoMain.addressDataList = data.data.value?.resData.listData ?? [];
|
||||||
|
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function 设为默认地址(item: typeAddressData): Promise<void> {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
if (item.isDefaultAddress === "是默认地址") {
|
||||||
|
console.log("本选项是默认地址");
|
||||||
|
msgToast.success({msg: "当前地址已经是默认地址", position: "middle"});
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
// 取消所有地址的默认状态
|
||||||
|
xiaoMain.addressDataList.forEach((address) => {
|
||||||
|
address.isDefaultAddress = "不是默认地址";
|
||||||
|
});
|
||||||
|
item.isDefaultAddress = "是默认地址";
|
||||||
|
// 强制更新DOM
|
||||||
|
let data = await useRequest<ApiAxiosResponse<Array<typeAddressData>>>(地址_设置当前地址为默认配送地址, {
|
||||||
|
method: "POST", data: {
|
||||||
|
idKey: item.id_主键_配送地址,
|
||||||
|
self_mini_openid: xiaoMain.mini_openid,
|
||||||
|
self_mini_unionid: xiaoMain.mini_unionid,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
xiaoMain.addressDataList = data.data.value?.resData.listData ?? [];
|
||||||
|
|
||||||
|
await nextTick(() => {
|
||||||
|
console.log("DOM更新完成", xiaoMain.addressDataList);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
//$active-color: #ffaa00;
|
||||||
|
$active-color: white;
|
||||||
|
.root-com {
|
||||||
|
.address-list {
|
||||||
|
padding: 20rpx;
|
||||||
|
//background-color: #1a1a1a;
|
||||||
|
|
||||||
|
.address-card {
|
||||||
|
//background: #2a2a2a;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
||||||
|
border: 2rpx solid transparent; // 改为实线边框
|
||||||
|
|
||||||
|
&.active-card {
|
||||||
|
border-color: #00aaff;
|
||||||
|
//background: linear-gradient(145deg, #2a2a2a 0%, #323232 100%);
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 170, 255, 0.4); // 增强选中时的阴影效果
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
//color: #ffffff;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone {
|
||||||
|
font-size: 32rpx;
|
||||||
|
//color: #b0b0b0;
|
||||||
|
letter-spacing: 1rpx;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.default-tag {
|
||||||
|
background: linear-gradient(135deg, #00aaff 0%, #0088cc 100%);
|
||||||
|
padding: 4rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.default-tag-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
//color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
.address-detail {
|
||||||
|
font-size: 32rpx;
|
||||||
|
//color: #e0e0e0;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-tag {
|
||||||
|
background: rgba(255, 170, 0, 0.1);
|
||||||
|
padding: 4rpx 4rpx 4rpx 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
border: 1rpx solid rgba(255, 170, 0, 0.3);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.address-tag-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
border-top: 1rpx solid #404040;
|
||||||
|
|
||||||
|
.default-select {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16rpx;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.checkbox-radio {
|
||||||
|
border-color: #00aaff;
|
||||||
|
background: #00aaff;
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
//border: 2rpx solid #606060;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2rpx solid #606060;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.checkbox-inner {
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
//background-color: green;
|
||||||
|
background-color: #ff8100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.checkbox-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
//color: #b0b0b0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 30rpx;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.icon-edit {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #00aaff;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background: rgba(0, 170, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-delete {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff4444;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background: rgba(255, 68, 68, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
.root-com {
|
||||||
|
width: 750rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.title-com {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1rpx solid #404040;
|
||||||
|
padding: 40rpx 30rpx 30rpx;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
display: block;
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-count {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-delete {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="root-com">
|
||||||
|
<!-- 头部 -->
|
||||||
|
<view class="title-com ">
|
||||||
|
<view class="header">
|
||||||
|
<text class="header-title">收件地址管理</text>
|
||||||
|
<text class="header-count">共{{ xiaoMain.addressDataList.length }}个地址</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="xiaoMain.addressDataList.length>0" class="header-delete" @click="删除全部的用户收件地址">
|
||||||
|
<wd-tag round type="warning">全部删除</wd-tag>
|
||||||
|
<!-- <text>全部删除</text>-->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import {地址_删除全部地址} from "@/hooks/接口API";
|
||||||
|
import {useRequest} from "@uni-helper/uni-use";
|
||||||
|
import {useToast} from "wot-design-uni";
|
||||||
|
import type {ApiAxiosResponse} from "@/types/通用类型";
|
||||||
|
import type {typeAddressData} from "@/hooks/商城类型文件";
|
||||||
|
|
||||||
|
let toast = useToast("default-toast");
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "address-com-title-label"});
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
|
||||||
|
async function 删除全部的用户收件地址(): Promise<void> {
|
||||||
|
try {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
if (xiaoMain.addressDataList.length <= 0) {
|
||||||
|
await wx.showToast({title: "地址为空", icon: "success"});
|
||||||
|
} else {
|
||||||
|
|
||||||
|
let data = await useRequest<ApiAxiosResponse<Array<typeAddressData>>>(地址_删除全部地址, {
|
||||||
|
method: "POST",
|
||||||
|
data: {self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,}
|
||||||
|
});
|
||||||
|
xiaoMain.addressDataList = data.data.value?.resData.listData ?? [];
|
||||||
|
toast.success("已全部删除");
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log("捕获错误❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅❌🙅🙅♀️", e);
|
||||||
|
await wx.showToast({title: "删除出错了", icon: "error"});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
@@ -0,0 +1,239 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
//@import "@/assets/demo.scss";
|
||||||
|
$defaultTopHeight: 1px; // 滚动区域外 可以预留的高度
|
||||||
|
$xiaoBottomHeigh: 100rpx; // 滚动区域外,可以预留的高度
|
||||||
|
/* 浅色模式 */
|
||||||
|
//@media (prefers-color-scheme: light) {
|
||||||
|
// .phone-screen {
|
||||||
|
// color: white;
|
||||||
|
// background: #181818;
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
///* 深色模式 */
|
||||||
|
//@media (prefers-color-scheme: dark) {
|
||||||
|
// .phone-screen {
|
||||||
|
// color: white;
|
||||||
|
// background: #1a1a1a;
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin line-color {
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0%, 100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
animation: gradientFlow 5s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-screen {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "xiaoFont", sans-serif;
|
||||||
|
height: v-bind(pxScreenHeight);
|
||||||
|
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||||||
|
background-size: 750rpx;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-container {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(pxWindowHeight);
|
||||||
|
|
||||||
|
.status-wifi-nav {
|
||||||
|
/*状态栏的高度 这里的值不能动*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(statusHeight);
|
||||||
|
|
||||||
|
:deep(.default-view-slot) {
|
||||||
|
line-height: v-bind(meunHeight);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: v-bind(meunHeight);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.default-view-slot-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||||||
|
border-radius: calc(v-bind(meunHeight) / 2);
|
||||||
|
|
||||||
|
.title-imgimage_item {
|
||||||
|
width: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
height: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right-text {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scrollTopHeigh {
|
||||||
|
/*在滚动区域内的, 可以自定义的高度*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: $defaultTopHeight;
|
||||||
|
background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scrollViewHeigh {
|
||||||
|
/*滚动页面区域范围*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1rem;
|
||||||
|
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
/*button按钮的 阴影样式可以直接使用*/
|
||||||
|
.custom-shadow {
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollBottomHeigh {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: $xiaoBottomHeigh;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
//@include line-color();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="phone-screen">
|
||||||
|
<wd-config-provider :theme="theme">
|
||||||
|
<view class="root-container">
|
||||||
|
<view class="status-wifi-nav">
|
||||||
|
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||||||
|
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||||||
|
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||||||
|
@homeRight="homeRight">
|
||||||
|
<template v-slot:default>
|
||||||
|
<view class="default-view-slot" @click="defaultSearchChange">
|
||||||
|
<view class="default-view-slot-left"></view>
|
||||||
|
<view class="default-view-slot-right">
|
||||||
|
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||||||
|
src="https://hudie.xiao.band/search.png" webp/>
|
||||||
|
<view class="default-view-slot-right-text">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 30rpx"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</ChildComScroll>
|
||||||
|
</view>
|
||||||
|
<!--分隔线,上面的是子组件-->
|
||||||
|
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
|
||||||
|
<!-- 滚动区域开始-->
|
||||||
|
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
|
||||||
|
class="scrollViewHeigh">
|
||||||
|
<!-- 页面地址为空时显示的组件-->
|
||||||
|
<address-com-empty v-if="xiaoMain.addressDataList.length===0"></address-com-empty>
|
||||||
|
<address-com-list v-if="xiaoMain.addressDataList.length>0"></address-com-list>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
<!--滚动区域结束-->
|
||||||
|
<view class="scrollBottomHeigh"><!--底部预留区域-->
|
||||||
|
<address-com-add-new-address
|
||||||
|
v-if="xiaoMain.addressDataList.length!==0"></address-com-add-new-address>
|
||||||
|
</view>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</wd-config-provider>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||||||
|
import {ref} from "vue";
|
||||||
|
import type {GlobelsChildPropsType} from "@/types/通用类型";
|
||||||
|
import {onTabItemTap} from "@dcloudio/uni-app";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import AddressComEmpty from "@/subPackages/homeSubPages/用户配送地址页面/address-com-empty.vue";
|
||||||
|
import AddressComList from "@/subPackages/homeSubPages/用户配送地址页面/address-com-list.vue";
|
||||||
|
import AddressComAddNewAddress from "@/subPackages/homeSubPages/用户配送地址页面/address-com-add-new-address.vue";
|
||||||
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
|
||||||
|
let pxScreenHeight = ref(); // 手机高度
|
||||||
|
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||||||
|
let pxScrollHeight = ref(); // 滚动区域高度
|
||||||
|
let statusHeight = ref(); // 固定的顶部
|
||||||
|
let meunHeight = ref();//插槽时要用的 高度
|
||||||
|
const modelValue: GlobelsChildPropsType = {
|
||||||
|
isShowLeft: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
|
||||||
|
iconTextLeft: {classPrefix: "xiaozizi", name: "arrow-left-circle-line", size: 23},
|
||||||
|
},
|
||||||
|
isShowRight: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
|
||||||
|
iconTextRight: {classPrefix: "xiaozizi", name: "1890ff-copy", size: 22},
|
||||||
|
},
|
||||||
|
title_text: "收件地址管理", navIsShow: "default",
|
||||||
|
};
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
const homeLeft = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.navigateBack({delta: 1}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const homeRight = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
console.log("右键按键");
|
||||||
|
};
|
||||||
|
let defaultSearchChange = async () => {
|
||||||
|
console.log("搜索发起");
|
||||||
|
};
|
||||||
|
onTabItemTap(() => {
|
||||||
|
console.log("🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<style scoped lang="scss">
|
||||||
|
.root-demo {
|
||||||
|
height: 80%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class=root-demo>
|
||||||
|
<nut-config-provider>
|
||||||
|
<nut-empty description="没有订单">
|
||||||
|
<template #image>
|
||||||
|
<image src="https://hudie.xiao.band/%E6%9C%AA%E5%91%BD%E5%90%8D.png"></image>
|
||||||
|
</template>
|
||||||
|
<nut-button icon="refresh" type="warning" @click="去商城逛逛">去商城逛逛</nut-button>
|
||||||
|
</nut-empty>
|
||||||
|
</nut-config-provider>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// 页面功能注释区域
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "order-com-empty"}); // 组件使用
|
||||||
|
const 去商城逛逛 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
await wx.reLaunch({url: "/pageTabBar/Home/Home"});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,430 @@
|
|||||||
|
<!-- components/order-card-pdd.vue -->
|
||||||
|
<template>
|
||||||
|
<view class="order-card" v-for="(orderItems,index) in order_list_data" :key="index">
|
||||||
|
<!-- 店铺头部 -->
|
||||||
|
<view class="shop-header">
|
||||||
|
<view class="shop-info">
|
||||||
|
<!-- <image class="shop-logo" src="https://picsum.photos/60/60?random=1" mode="aspectFill"/>-->
|
||||||
|
<image class="shop-logo" src="https://hudie.xiao.band/icon/six.png" mode="aspectFill"/>
|
||||||
|
<view class="shop-name">六果泡泡专卖店</view>
|
||||||
|
<view class="shop-arrow">›</view>
|
||||||
|
</view>
|
||||||
|
<text class="order-status status-shipped">
|
||||||
|
{{ orderItems.order物流状态 }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 循环: 商品列表 -->
|
||||||
|
<view class="goods-list" v-for="(goods,index) in orderItems.order购物车商品数据" :key="index">
|
||||||
|
<view class="goods-item">
|
||||||
|
<image class="goods-image" :src="goods.goods_sku_主图" mode="aspectFill"/>
|
||||||
|
<view class="goods-info">
|
||||||
|
<text class="goods-name">{{ goods.goods_商品标题 }}</text>
|
||||||
|
<text class="goods-spec">{{ goods.销售规格 }}</text>
|
||||||
|
<text class="goods-spec">{{ goods.goods_sku_name }}</text>
|
||||||
|
<view class="goods-price-row">
|
||||||
|
<text class="goods-price">{{ goods.会员价 / 100 }}</text>
|
||||||
|
<text class="goods-count">×{{ goods.单个商品订单数量 }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单金额 -->
|
||||||
|
<view class="order-amount">
|
||||||
|
<text class="order-no">
|
||||||
|
{{ dayjs(orderItems.dateAndTime).format("MM月DD日 HH:mm") }}
|
||||||
|
</text>
|
||||||
|
<text style="flex: 1"></text>
|
||||||
|
<text class="amount-label">共{{ orderItems.order购物车商品数量 }}件商品 实付：</text>
|
||||||
|
<!-- <text class="amount-value">¥378.80</text>-->
|
||||||
|
<text class="amount-value">¥{{ orderItems.order购物车商品总价 / 100 }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="order-number" @click="复制订单号(orderItems.order物流公司订单编号??'')">
|
||||||
|
<!-- <view class="" style="flex: 1"></view>-->
|
||||||
|
<view class="">订单号：{{ orderItems.order物流订单号 }}</view>
|
||||||
|
</view>
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="action-bar">
|
||||||
|
<view class="action-left">
|
||||||
|
<wd-button type="info" size="small" @click="联系客服" classPrefix="xiaozizi" icon="kefu2"
|
||||||
|
custom-class="custom-shadow">
|
||||||
|
联系客服
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
<view class="action-right">
|
||||||
|
<wd-button :type="[0,1,2].includes(modelValue)?'warning':'info'" size="small"
|
||||||
|
@click="查看物流(orderItems)"
|
||||||
|
classPrefix="xiaozizi"
|
||||||
|
icon="peisongzhong1"
|
||||||
|
custom-class="custom-shadow">
|
||||||
|
查看物流
|
||||||
|
</wd-button>
|
||||||
|
|
||||||
|
<wd-button type="warning" v-if="modelValue===2" size="small" classPrefix="xiaozizi" icon="daipingjia1"
|
||||||
|
@click="待评价事件(orderItems)" custom-class="custom-shadow">
|
||||||
|
待评价
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-curtain v-model="弹出幕帘" :src="img幕帘用的图片" :zIndex="199" closePosition="inset" :width="幕帘图片宽度"
|
||||||
|
:closeOnClick="false" @clickModal="点击幕帘事件" @close="点击幕帘关闭按钮"
|
||||||
|
@click="点击了幕帘(订单元素)"
|
||||||
|
@error="幕帘图片加载报错事件" :showMenuByLongpress="true"
|
||||||
|
:closeOnClickModal="true"></wd-curtain>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// 数据全部写死在组件内部，无需外部传入
|
||||||
|
import {ref} from "vue";
|
||||||
|
import {useVModels} from "@vueuse/core";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import type {
|
||||||
|
OrderItemsListDataType,
|
||||||
|
OrderItemType
|
||||||
|
} from "@/subPackages/homeSubPages/订单数据页面/小程序商城订单列表类型";
|
||||||
|
import {useRequest} from "@uni-helper/uni-use";
|
||||||
|
import {用户_评价接口更新待评价状态} from "@/hooks/接口API";
|
||||||
|
|
||||||
|
let 幕帘图片宽度 = Math.floor(wx.getWindowInfo().windowWidth * 0.7);
|
||||||
|
let 弹出幕帘 = ref(false);
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
let img幕帘用的图片 = ref("https://hudie.sixgou.com/six/20dfcf10fc32c00fd6e2c8a166f0f43c.jpg");
|
||||||
|
|
||||||
|
interface definePropsType {
|
||||||
|
modelValue: number;// 对象类型的 prop
|
||||||
|
order_list_data: OrderItemsListDataType;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 使用 withDefaults 定义默认值
|
||||||
|
const props = withDefaults(defineProps<definePropsType>(), {});
|
||||||
|
const emit = defineEmits<{ (eventName: "update:modelValue", value: string): void }>();
|
||||||
|
|
||||||
|
const {modelValue,} = useVModels(props, emit);
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "order-com-list-data"});
|
||||||
|
|
||||||
|
const 复制订单号 = async (order支付订单号: string): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
await wx.setClipboardData({data: order支付订单号});
|
||||||
|
};
|
||||||
|
|
||||||
|
const 查看物流 = async (orderItems: OrderItemType): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.navigateTo({url: "/subPackages/homeSubPages/物流追踪页面/物流追踪页面"}).then(() => {
|
||||||
|
xiaoMain.emsOrder订单 = orderItems;
|
||||||
|
}).catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
};
|
||||||
|
const 联系客服 = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
wx.openCustomerServiceChat({
|
||||||
|
extInfo: {url: xiaoMain.extInfo_产品售后客服账号}, corpId: "wwbe6369dc26a9d83a",
|
||||||
|
showMessageCard: true,
|
||||||
|
sendMessageTitle: "产品售后", // 气泡的标题名称
|
||||||
|
sendMessageImg: "https://hudie.sixgou.com/icon/six.png", // 弹出气泡时的图片
|
||||||
|
sendMessagePath: "/subPackages/homeSubPages/物流追踪页面/物流追踪页面", // 点击时,打开的小程序的页面路径
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res.errMsg);
|
||||||
|
},
|
||||||
|
fail: (res) => {
|
||||||
|
console.log(res);
|
||||||
|
},
|
||||||
|
complete: (res) => {
|
||||||
|
console.log(res);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const 订单元素 = ref<OrderItemType>();
|
||||||
|
const 待评价事件 = async (orderItems: OrderItemType): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
弹出幕帘.value = true;
|
||||||
|
订单元素.value = orderItems;
|
||||||
|
};
|
||||||
|
const 点击幕帘事件 = async (): Promise<void> => {
|
||||||
|
console.log("点击幕帘事件");
|
||||||
|
};
|
||||||
|
const 点击幕帘关闭按钮 = async (): Promise<void> => {
|
||||||
|
console.log("点击幕帘关闭按钮");
|
||||||
|
|
||||||
|
};
|
||||||
|
const 幕帘图片加载报错事件 = async (): Promise<void> => {
|
||||||
|
console.log("幕帘图片加载报错事件");
|
||||||
|
};
|
||||||
|
const 点击了幕帘 = async (orderItems: OrderItemType | undefined): Promise<void> => {
|
||||||
|
console.log("点击了幕帘点击了幕帘点击了幕帘点击了幕帘点击了幕帘", orderItems);
|
||||||
|
let data = await useRequest(用户_评价接口更新待评价状态, {
|
||||||
|
method: "POST", data: {
|
||||||
|
self_mini_openid: xiaoMain.mini_openid, self_user_unionid: xiaoMain.mini_unionid,
|
||||||
|
order物流公司订单编号: orderItems?.order物流公司订单编号, order物流订单号: orderItems?.order物流订单号
|
||||||
|
}
|
||||||
|
});
|
||||||
|
xiaoMain.orderListData = data.data.value?.resData.listData ?? [];
|
||||||
|
弹出幕帘.value = false;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.order-card {
|
||||||
|
//background: #ffffff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
margin: 16rpx 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// 店铺头部
|
||||||
|
.shop-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 24rpx 28rpx 20rpx;
|
||||||
|
border-bottom: 2rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.shop-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
|
||||||
|
.shop-logo {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-name {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 550;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-arrow {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #ccc;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-date {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 550;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 450;
|
||||||
|
|
||||||
|
&.status-shipped {
|
||||||
|
color: #07c160;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 商品列表
|
||||||
|
.goods-list {
|
||||||
|
padding: 20rpx 28rpx;
|
||||||
|
|
||||||
|
.goods-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
//background: #f5f5f5;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1a1a1a;
|
||||||
|
line-height: 1.5;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
line-clamp: 2; /* 标准属性（加上这一行） */
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-spec {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999;
|
||||||
|
margin: 6rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-price-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.goods-price {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #f0883a;
|
||||||
|
font-weight: 650;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-count {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订单金额
|
||||||
|
.order-amount {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 16rpx 28rpx;
|
||||||
|
border-top: 2rpx solid #f5f5f5;
|
||||||
|
|
||||||
|
.order-no {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-label {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #f0883a;
|
||||||
|
font-weight: 750;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-number {
|
||||||
|
font-size: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
color: #666;
|
||||||
|
padding: 0 28rpx 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 操作按钮
|
||||||
|
.action-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 28rpx 24rpx;
|
||||||
|
border-top: 2rpx solid #f5f5f5;
|
||||||
|
|
||||||
|
.action-left {
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-right {
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 12rpx 28rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 460;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
height: auto;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
background: #ff4444;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.82;
|
||||||
|
transform: scale(0.97);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.secondary {
|
||||||
|
background: #ffffff;
|
||||||
|
color: #666;
|
||||||
|
border: 2rpx solid #d9d9d9;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暗黑模式适配
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.order-card {
|
||||||
|
background: #1c1c1e;
|
||||||
|
|
||||||
|
.shop-header {
|
||||||
|
border-bottom-color: #333;
|
||||||
|
|
||||||
|
.shop-info {
|
||||||
|
.shop-name {
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-list {
|
||||||
|
.goods-item {
|
||||||
|
.goods-info {
|
||||||
|
.goods-name {
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-amount {
|
||||||
|
border-top-color: #333;
|
||||||
|
|
||||||
|
.amount-label {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-bar {
|
||||||
|
border-top-color: #333;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
&.secondary {
|
||||||
|
background: #2c2c2e;
|
||||||
|
color: #ccc;
|
||||||
|
border-color: #555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,108 @@
|
|||||||
|
type Order物流数据类型 = {
|
||||||
|
openid: string
|
||||||
|
waybill_id: string
|
||||||
|
delivery_id: string
|
||||||
|
path_item_num: number
|
||||||
|
path_item_list: Array<{
|
||||||
|
action_msg: string
|
||||||
|
action_time: number
|
||||||
|
action_type: number
|
||||||
|
}>
|
||||||
|
}
|
||||||
|
export type 收件地址类型 = {
|
||||||
|
"id_str": string,
|
||||||
|
"address": {
|
||||||
|
"errMsg": string,
|
||||||
|
"cityName": string,
|
||||||
|
"userName": string,
|
||||||
|
"telNumber": string,
|
||||||
|
"countyName": string,
|
||||||
|
"detailInfo": string,
|
||||||
|
"postalCode": string,
|
||||||
|
"streetName": string,
|
||||||
|
"nationalCode": string,
|
||||||
|
"provinceName": string,
|
||||||
|
"detailInfoNew": string,
|
||||||
|
"nationalCodeFull": string,
|
||||||
|
"self_mini_openid": string,
|
||||||
|
"self_user_unionid": string
|
||||||
|
},
|
||||||
|
"mini_openid": string,
|
||||||
|
"mini_unionid": string,
|
||||||
|
"isDefaultAddress": "是默认地址" | "不是默认地址",
|
||||||
|
"id_主键_配送地址": string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OrderItemType {
|
||||||
|
id_主键_order订单: string;
|
||||||
|
id_str: string;
|
||||||
|
order支付商家侧订单号: string;
|
||||||
|
order支付微信官方订单号: string | null;
|
||||||
|
order支付者openid: string;
|
||||||
|
order支付者unionid: string;
|
||||||
|
order分享者unionid: string;
|
||||||
|
wai外键lucky拼团表_id: string | null;
|
||||||
|
order购物车商品数据: Array<
|
||||||
|
{
|
||||||
|
"商品ID": string,
|
||||||
|
"会员价": number,
|
||||||
|
"商品条码": string,
|
||||||
|
"推荐积分": {
|
||||||
|
"企微员工": number,
|
||||||
|
"商品详情页面分享": number
|
||||||
|
},
|
||||||
|
"销售规格": string,
|
||||||
|
"零售价格": number,
|
||||||
|
"goods_sku_name": string,
|
||||||
|
"goods_sku_主图": string,
|
||||||
|
"goods_商品品牌": string,
|
||||||
|
"goods_商品标题": string,
|
||||||
|
"goods_sku_详情图": string[],
|
||||||
|
"单个商品订单数量": number,
|
||||||
|
"单个商品订单总金额": number,
|
||||||
|
"单个商品实际支付价格": number
|
||||||
|
}
|
||||||
|
>;
|
||||||
|
order购物车商品总价: number;
|
||||||
|
order购物车商品数量: number;
|
||||||
|
order支付数据: {
|
||||||
|
appid: string;
|
||||||
|
mchid: string;
|
||||||
|
payer: { openid: string };
|
||||||
|
amount: { total: number; currency: string };
|
||||||
|
attach: string;
|
||||||
|
notify_url: string;
|
||||||
|
description: string;
|
||||||
|
out_trade_no: string;
|
||||||
|
};
|
||||||
|
order支付状态: "支付中" | "支付成功" | "已支付" | "已退款" | "支付失败";
|
||||||
|
order用户配送地址: 收件地址类型;
|
||||||
|
order物流状态: "待揽件" | "待发货" | "待收货" | "待评价" | "揽件成功" | "揽件失败" | "分配业务员" | "更新运输轨迹" | "开始派送" | "签收成功" | "待用户确认收货" | "签收失败" | "订单取消" | "订单滞留" | "已确认";
|
||||||
|
order物流订单号: string | null;
|
||||||
|
order物流数据: Order物流数据类型;
|
||||||
|
order订单类型: string;
|
||||||
|
order物流公司订单编号: string | null;
|
||||||
|
dateAndTime: string;
|
||||||
|
updateTime: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type OrderItemsListDataType = Array<OrderItemType>
|
||||||
|
export type ems物流状态的类型 = {
|
||||||
|
ToUserName: string;
|
||||||
|
FromUserName: string;
|
||||||
|
CreateTime: number;
|
||||||
|
MsgType: string;
|
||||||
|
Event: string;
|
||||||
|
DeliveryID: string;
|
||||||
|
WayBillId: string;
|
||||||
|
Version: number;
|
||||||
|
Count: number;
|
||||||
|
Actions: Array<{
|
||||||
|
ActionTime: number;
|
||||||
|
ActionType: number;
|
||||||
|
ActionMsg: string;
|
||||||
|
Lat: number;
|
||||||
|
Lng: number;
|
||||||
|
}>;
|
||||||
|
OrderId: string;
|
||||||
|
};
|
||||||
@@ -0,0 +1,387 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
//@import "@/assets/demo.scss";
|
||||||
|
$defaultTopHeight: 99rpx; // 滚动区域外 可以预留的高度
|
||||||
|
$xiaoBottomHeigh: 1px; // 滚动区域外,可以预留的高度
|
||||||
|
|
||||||
|
|
||||||
|
/* 深色模式 */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.phone-screen {
|
||||||
|
|
||||||
|
:deep(.custom-class-tabbar) {
|
||||||
|
box-shadow: inset 0 3px 2px -2px rgba(0, 0, 0, 0.4), /* 上 - 暗部 */
|
||||||
|
inset 0 -3px 2px -2px rgba(255, 255, 255, 0.2), /* 下 - 亮部 */
|
||||||
|
inset 3px 0 2px -2px rgba(0, 0, 0, 0.4), /* 左 - 暗部 */
|
||||||
|
inset -3px 0 2px -2px rgba(255, 255, 255, 0.2); /* 右 - 亮部 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin line-color {
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0%, 100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
animation: gradientFlow 5s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-screen {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "xiaoFont", sans-serif;
|
||||||
|
height: v-bind(pxScreenHeight);
|
||||||
|
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||||||
|
background-size: 750rpx;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-container {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(pxWindowHeight);
|
||||||
|
|
||||||
|
.status-wifi-nav {
|
||||||
|
/*状态栏的高度 这里的值不能动*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(statusHeight);
|
||||||
|
|
||||||
|
:deep(.default-view-slot) {
|
||||||
|
line-height: v-bind(meunHeight);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: v-bind(meunHeight);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.default-view-slot-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||||||
|
border-radius: calc(v-bind(meunHeight) / 2);
|
||||||
|
|
||||||
|
.title-imgimage_item {
|
||||||
|
width: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
height: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right-text {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scrollTopHeigh {
|
||||||
|
/*在滚动区域内的, 可以自定义的高度*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: $defaultTopHeight;
|
||||||
|
|
||||||
|
:deep(.custom-class-tabbar) {
|
||||||
|
//box-shadow:inset 0 3px 1px -2px rgb(0 0 0 / 20%) , 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
//box-shadow: inset 0 2px 1px -2px rgb(0 0 0 / 15%),
|
||||||
|
//inset 0 2px 2px 0 rgb(0 0 0 / 14%),
|
||||||
|
//inset 0 1px 5px 0 rgb(0 0 0 / 14%),
|
||||||
|
//inset 1px 1px 2px rgb(0 0 0 / 14%),
|
||||||
|
//inset -1px -1px 2px rgb(0 0 0 / 14%);
|
||||||
|
//box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
|
||||||
|
box-shadow: /* 上 - 向下凹 */
|
||||||
|
inset 0 3px 2px -2px rgba(0, 0, 0, 0.3), /* 上 */
|
||||||
|
inset 0 -3px 2px -2px rgba(0, 0, 0, 0.3), /* 下 */
|
||||||
|
inset 3px 0 2px -2px rgba(0, 0, 0, 0.3), /* 左 */
|
||||||
|
inset -3px 0 2px -2px rgba(0, 0, 0, 0.3); /* 右 */
|
||||||
|
// box-shadow: inset X Y blur spread color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scrollViewHeigh {
|
||||||
|
/*滚动页面区域范围*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1rem;
|
||||||
|
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
/*button按钮的 阴影样式可以直接使用*/
|
||||||
|
.custom-shadow {
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollBottomHeigh {
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: $xiaoBottomHeigh;
|
||||||
|
@include line-color();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="phone-screen">
|
||||||
|
<wd-config-provider :theme="theme">
|
||||||
|
<view class="root-container">
|
||||||
|
<view class="status-wifi-nav">
|
||||||
|
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||||||
|
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||||||
|
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||||||
|
@homeRight="homeRight">
|
||||||
|
<template v-slot:default>
|
||||||
|
<view class="default-view-slot" @click="defaultSearchChange">
|
||||||
|
<view class="default-view-slot-left"></view>
|
||||||
|
<view class="default-view-slot-right">
|
||||||
|
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||||||
|
src="https://hudie.xiao.band/search.png" webp/>
|
||||||
|
<view class="default-view-slot-right-text">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 30rpx"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</ChildComScroll>
|
||||||
|
</view>
|
||||||
|
<!--分隔线,上面的是子组件-->
|
||||||
|
<view class="scrollTopHeigh"><!--预留的空间高度-->
|
||||||
|
<wd-tabbar v-model="tabbar" custom-class="custom-class-tabbar" shape="round"
|
||||||
|
:bordered="true" activeColor="#f0883a" @change="选中的标签事件">
|
||||||
|
<wd-tabbar-item title="待揽件" :value="待揽件数量">
|
||||||
|
<template #icon>
|
||||||
|
<wd-icon classPrefix="xiaozizi" name="daiqueren" :size="22"
|
||||||
|
:color="tabbar===0?'#f0883a':''"/>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</wd-tabbar-item>
|
||||||
|
<wd-tabbar-item title="待收货" :value="待收货数量">
|
||||||
|
<template #icon>
|
||||||
|
<wd-icon classPrefix="xiaozizi" name="peisongzhong1" :size="22"
|
||||||
|
:color="tabbar===1?'#f0883a':''"/>
|
||||||
|
</template>
|
||||||
|
</wd-tabbar-item>
|
||||||
|
<wd-tabbar-item title="待评价" :value="待评价数量">
|
||||||
|
<template #icon>
|
||||||
|
<wd-icon classPrefix="xiaozizi" name="daipingjia1" :size="22"
|
||||||
|
:color="tabbar===2?'#f0883a':''"/>
|
||||||
|
</template>
|
||||||
|
</wd-tabbar-item>
|
||||||
|
<wd-tabbar-item title="全部订单">
|
||||||
|
<template #icon>
|
||||||
|
<wd-icon classPrefix="wd-icon" name="app" :size="22"
|
||||||
|
:color="tabbar===3?'#f0883a':''"/>
|
||||||
|
</template>
|
||||||
|
</wd-tabbar-item>
|
||||||
|
</wd-tabbar>
|
||||||
|
</view>
|
||||||
|
<!-- 滚动区域开始-->
|
||||||
|
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
|
||||||
|
class="scrollViewHeigh">
|
||||||
|
<view class="line-widht-number" style="height: 10rpx"></view>
|
||||||
|
<order-com-empty v-if="isEmpty===0"></order-com-empty>
|
||||||
|
<order-com-list-data v-model:modelValue="tabbar" v-if="isEmpty>0"
|
||||||
|
:order_list_data="order_list_data ?? []"></order-com-list-data>
|
||||||
|
</scroll-view>
|
||||||
|
<!--滚动区域结束-->
|
||||||
|
<view class="scrollBottomHeigh"><!--底部预留区域--></view>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</wd-config-provider>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||||||
|
import {ref, watchEffect, computed} from "vue";
|
||||||
|
import type {GlobelsChildPropsType} from "@/types/通用类型";
|
||||||
|
import {onTabItemTap} from "@dcloudio/uni-app";
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
import OrderComListData from "@/subPackages/homeSubPages/订单数据页面/order-com-list-data.vue";
|
||||||
|
import OrderComEmpty from "@/subPackages/homeSubPages/订单数据页面/order-com-empty.vue";
|
||||||
|
import {watchDeep} from "@vueuse/shared";
|
||||||
|
import type {OrderItemsListDataType} from "@/subPackages/homeSubPages/订单数据页面/小程序商城订单列表类型";
|
||||||
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||||
|
|
||||||
|
let tabbar = ref(0);
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
|
||||||
|
let pxScreenHeight = ref(); // 手机高度
|
||||||
|
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||||||
|
let pxScrollHeight = ref(); // 滚动区域高度
|
||||||
|
let statusHeight = ref(); // 固定的顶部
|
||||||
|
let meunHeight = ref();//插槽时要用的 高度
|
||||||
|
|
||||||
|
|
||||||
|
const modelValue: GlobelsChildPropsType = {
|
||||||
|
isShowLeft: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
|
||||||
|
iconTextLeft: {classPrefix: "xiaozizi", name: "arrow-left-circle-line", size: 23},
|
||||||
|
},
|
||||||
|
isShowRight: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
|
||||||
|
iconTextRight: {classPrefix: "xiaozizi", name: "dingdanshuju3", size: 15},
|
||||||
|
},
|
||||||
|
title_text: "六果泡泡", navIsShow: "default",
|
||||||
|
};
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
const homeLeft = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
uni.navigateBack({delta: 1}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const homeRight = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
console.log("右键按键");
|
||||||
|
};
|
||||||
|
let defaultSearchChange = async () => {
|
||||||
|
console.log("搜索发起");
|
||||||
|
};
|
||||||
|
onTabItemTap(() => {
|
||||||
|
console.log("🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
|
||||||
|
wx.vibrateShort({type: "heavy"});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const 选中的标签事件 = async (value: { value: number }): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});
|
||||||
|
tabbar.value = value.value;
|
||||||
|
console.log("当前的值是多少了呢", value);
|
||||||
|
if (tabbar.value === 0) {
|
||||||
|
//当前为待揽件的状态
|
||||||
|
isEmpty.value = 待揽件数量.value;
|
||||||
|
}
|
||||||
|
if (tabbar.value === 1) {
|
||||||
|
//当前为待揽件的状态
|
||||||
|
isEmpty.value = 待收货数量.value;
|
||||||
|
}
|
||||||
|
if (tabbar.value === 2) {
|
||||||
|
//当前为待揽件的状态
|
||||||
|
isEmpty.value = 待评价数量.value;
|
||||||
|
}
|
||||||
|
if (tabbar.value === 3) {
|
||||||
|
//当前为待揽件的状态
|
||||||
|
isEmpty.value = 全部订单数量.value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
let 待揽件数量 = computed(() => {
|
||||||
|
let data = xiaoMain.orderListData.filter((item) => {
|
||||||
|
return item.order物流状态 === "待揽件";
|
||||||
|
});
|
||||||
|
return data.length;
|
||||||
|
});
|
||||||
|
let 待收货数量 = computed(() => {
|
||||||
|
let data = xiaoMain.orderListData.filter((item) => {
|
||||||
|
// return item.order物流状态 === "揽件成功" || "揽件失败" || "分配业务员" || "更新运输轨迹" || "开始派送" || "签收成功";
|
||||||
|
return ["揽件成功", "揽件失败", "分配业务员", "更新运输轨迹", "开始派送",].includes(item.order物流状态);
|
||||||
|
});
|
||||||
|
return data.length;
|
||||||
|
});
|
||||||
|
let 待评价数量 = computed(() => {
|
||||||
|
let data = xiaoMain.orderListData.filter((item) => {
|
||||||
|
return ["签收成功", "待用户确认收货"].includes(item.order物流状态);
|
||||||
|
});
|
||||||
|
return data.length;
|
||||||
|
});
|
||||||
|
let 全部订单数量 = computed(() => {
|
||||||
|
|
||||||
|
return xiaoMain.orderListData.length;
|
||||||
|
});
|
||||||
|
// 监听 当前订单的数据
|
||||||
|
watchDeep(() => xiaoMain.orderListData, (updated) => {
|
||||||
|
// 这个对象,不管多少层,只要有一个值发生了变化就返回变化的完整的对象
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 updatedupdatedupdated ", updated);
|
||||||
|
// 第一种情况,订单为空的时候
|
||||||
|
if (updated.length === 0) {
|
||||||
|
tabbar.value = 3;
|
||||||
|
isEmpty.value = updated.length;
|
||||||
|
return; // 👈 加上这行，满足条件后就不再执行后面的判断
|
||||||
|
}
|
||||||
|
// 第二种情况
|
||||||
|
if (待揽件数量.value > 0) {
|
||||||
|
tabbar.value = 0;
|
||||||
|
isEmpty.value = updated.length;
|
||||||
|
return; // 👈 加上这行，满足条件后就不再执行后面的判断
|
||||||
|
}
|
||||||
|
if (待收货数量.value > 0) {
|
||||||
|
tabbar.value = 1;
|
||||||
|
isEmpty.value = updated.length;
|
||||||
|
return; // 👈 加上这行，满足条件后就不再执行后面的判断
|
||||||
|
}
|
||||||
|
if (待评价数量.value > 0) {
|
||||||
|
tabbar.value = 2;
|
||||||
|
isEmpty.value = updated.length;
|
||||||
|
return; // 👈 加上这行，满足条件后就不再执行后面的判断
|
||||||
|
}
|
||||||
|
if (全部订单数量.value > 0) {
|
||||||
|
tabbar.value = 3;
|
||||||
|
isEmpty.value = updated.length;
|
||||||
|
}
|
||||||
|
},);
|
||||||
|
const isEmpty = ref(待揽件数量.value);
|
||||||
|
const order_list_data = ref<OrderItemsListDataType>();
|
||||||
|
watchEffect(() => {
|
||||||
|
if (tabbar.value === 0) {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 监听发生了 ", tabbar.value);
|
||||||
|
order_list_data.value = xiaoMain.orderListData.filter((item,) => {
|
||||||
|
return item.order物流状态 === "待揽件";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (tabbar.value === 1) {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 监听发生了 ", tabbar.value);
|
||||||
|
|
||||||
|
order_list_data.value = xiaoMain.orderListData.filter((item,) => {
|
||||||
|
return ["揽件成功", "揽件失败", "分配业务员", "更新运输轨迹", "开始派送",].includes(item.order物流状态);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (tabbar.value === 2) {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 监听发生了 ", tabbar.value);
|
||||||
|
order_list_data.value = xiaoMain.orderListData.filter((item,) => {
|
||||||
|
return ["签收成功", "待用户确认收货"].includes(item.order物流状态);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (tabbar.value === 3) {
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 监听发生了 ", tabbar.value);
|
||||||
|
order_list_data.value = xiaoMain.orderListData;
|
||||||
|
console.log(order_list_data.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,324 @@
|
|||||||
|
<!-- components/order-card-pdd.vue -->
|
||||||
|
<template>
|
||||||
|
<view class="order-card">
|
||||||
|
<!-- 店铺头部 -->
|
||||||
|
<view class="shop-header">
|
||||||
|
<view class="shop-info">
|
||||||
|
<!-- <image class="shop-logo" src="https://picsum.photos/60/60?random=1" mode="aspectFill"/>-->
|
||||||
|
<image class="shop-logo" src="https://hudie.xiao.band/icon/six.png" mode="aspectFill"/>
|
||||||
|
<view class="shop-name">六果泡泡专卖店</view>
|
||||||
|
<view class="shop-arrow">›</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 循环: 商品列表 -->
|
||||||
|
<view class="goods-list" v-for="(goods,index) in xiaoMain.card购物车列表数据" :key="index">
|
||||||
|
<view class="goods-item">
|
||||||
|
<image class="goods-image" :src="goods.goods_sku_主图" mode="aspectFill"/>
|
||||||
|
<view class="goods-info">
|
||||||
|
<text class="goods-name">{{ goods.goods_商品标题 }}</text>
|
||||||
|
<text class="goods-spec">{{ goods.销售规格 }}</text>
|
||||||
|
<text class="goods-spec">{{ goods.goods_sku_name }}</text>
|
||||||
|
<view class="goods-price-row">
|
||||||
|
<text class="goods-price">¥{{ goods.会员价 / 100 }}</text>
|
||||||
|
<text class="goods-count">×{{ goods.单个商品订单数量 }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 订单金额 -->
|
||||||
|
<view class="order-amount">
|
||||||
|
<text class="order-no">
|
||||||
|
<!-- {{ dayjs(orderItems.dateAndTime).format("MM月DD日 HH:mm") }}-->
|
||||||
|
|
||||||
|
</text>
|
||||||
|
<text style="flex: 1"></text>
|
||||||
|
<!-- <text class="amount-label">共{{ orderItems.order购物车商品数量 }}件商品 实付：</text>-->
|
||||||
|
<text class="amount-label">共{{ 订单商品总数量 }}件商品 实付：</text>
|
||||||
|
<text class="amount-value">¥{{ 实付订单的总金额 / 100 }}</text>
|
||||||
|
<!-- <view class="order-number" @click="复制订单号(orderItems.order物流公司订单编号??'')">-->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// 数据全部写死在组件内部，无需外部传入
|
||||||
|
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
|
||||||
|
|
||||||
|
|
||||||
|
let xiaoMain = useMainXiaoStore();
|
||||||
|
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}, name: "card-list-data-item"});
|
||||||
|
|
||||||
|
|
||||||
|
const 订单商品总数量 = xiaoMain.card购物车列表数据.reduce((previousValue, currentValue,) => {
|
||||||
|
return previousValue + currentValue.单个商品订单数量;
|
||||||
|
}, 0);
|
||||||
|
const 实付订单的总金额 = xiaoMain.card购物车列表数据.reduce((previousValue, currentValue,) => {
|
||||||
|
return previousValue + currentValue.单个商品订单总金额;
|
||||||
|
}, 0);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.order-card {
|
||||||
|
//background: #ffffff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
margin: 0 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// 店铺头部
|
||||||
|
.shop-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 24rpx 28rpx 20rpx;
|
||||||
|
border-bottom: 2rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.shop-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
|
||||||
|
.shop-logo {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-name {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 550;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-arrow {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #ccc;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-date {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 550;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-status {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 450;
|
||||||
|
|
||||||
|
&.status-shipped {
|
||||||
|
color: #07c160;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 商品列表
|
||||||
|
.goods-list {
|
||||||
|
padding: 20rpx 28rpx;
|
||||||
|
|
||||||
|
.goods-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
//background: #f5f5f5;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1a1a1a;
|
||||||
|
line-height: 1.5;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-spec {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999;
|
||||||
|
margin: 6rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-price-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.goods-price {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #f0883a;
|
||||||
|
font-weight: 650;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-count {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 订单金额
|
||||||
|
.order-amount {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 16rpx 28rpx;
|
||||||
|
border-top: 2rpx solid #f5f5f5;
|
||||||
|
|
||||||
|
.order-no {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-label {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #f0883a;
|
||||||
|
font-weight: 750;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-number {
|
||||||
|
font-size: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
color: #666;
|
||||||
|
padding: 0 28rpx 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 操作按钮
|
||||||
|
.action-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 28rpx 24rpx;
|
||||||
|
border-top: 2rpx solid #f5f5f5;
|
||||||
|
|
||||||
|
.action-left {
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-right {
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 12rpx 28rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 460;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
height: auto;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
background: #ff4444;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.82;
|
||||||
|
transform: scale(0.97);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.secondary {
|
||||||
|
background: #ffffff;
|
||||||
|
color: #666;
|
||||||
|
border: 2rpx solid #d9d9d9;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暗黑模式适配
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.order-card {
|
||||||
|
background: #1c1c1e;
|
||||||
|
|
||||||
|
.shop-header {
|
||||||
|
border-bottom-color: #333;
|
||||||
|
|
||||||
|
.shop-info {
|
||||||
|
.shop-name {
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-list {
|
||||||
|
.goods-item {
|
||||||
|
.goods-info {
|
||||||
|
.goods-name {
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-amount {
|
||||||
|
border-top-color: #333;
|
||||||
|
|
||||||
|
.amount-label {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-bar {
|
||||||
|
border-top-color: #333;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
&.secondary {
|
||||||
|
background: #2c2c2e;
|
||||||
|
color: #ccc;
|
||||||
|
border-color: #555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,229 @@
|
|||||||
|
<style lang="scss" scoped>
|
||||||
|
//@import "@/assets/demo.scss";
|
||||||
|
|
||||||
|
@mixin line-color {
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0%, 100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
background: linear-gradient(to right, #FF6B6B 0%, #4ECDC4 20%, #FFD166 40%, #06D6A0 60%, #118AB2 80%, #EF476F 100%);
|
||||||
|
background-size: 400% 100%;
|
||||||
|
animation: gradientFlow 5s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-screen {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "xiaoFont", sans-serif;
|
||||||
|
height: v-bind(pxScreenHeight);
|
||||||
|
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
|
||||||
|
background-size: 750rpx;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root-container {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(pxWindowHeight);
|
||||||
|
|
||||||
|
.status-wifi-nav {
|
||||||
|
/*状态栏的高度 这里的值不能动*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: v-bind(statusHeight);
|
||||||
|
|
||||||
|
:deep(.default-view-slot) {
|
||||||
|
line-height: v-bind(meunHeight);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: v-bind(meunHeight);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.default-view-slot-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: solid rgba(255, 255, 255, 0.03) 1px;
|
||||||
|
border-radius: calc(v-bind(meunHeight) / 2);
|
||||||
|
|
||||||
|
.title-imgimage_item {
|
||||||
|
width: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
height: calc(v-bind(meunHeight) * 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-view-slot-right-text {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.grit-content {
|
||||||
|
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight));
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-auto-rows: auto 1fr auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.scrollTopHeigh {
|
||||||
|
/*在滚动区域内的, 可以自定义的高度*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
//background-color: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollViewHeigh {
|
||||||
|
/*滚动页面区域范围*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
/*button按钮的 阴影样式可以直接使用*/
|
||||||
|
.custom-class-button {
|
||||||
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollBottomHeigh {
|
||||||
|
box-sizing: border-box;
|
||||||
|
@include line-color();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<view class="phone-screen">
|
||||||
|
<wd-config-provider :theme="theme">
|
||||||
|
<view class="root-container">
|
||||||
|
<view class="status-wifi-nav">
|
||||||
|
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
|
||||||
|
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
|
||||||
|
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
|
||||||
|
@homeRight="homeRight">
|
||||||
|
<template v-slot:default>
|
||||||
|
<view class="default-view-slot" @click="defaultSearchChange">
|
||||||
|
<view class="default-view-slot-left"></view>
|
||||||
|
<view class="default-view-slot-right">
|
||||||
|
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"
|
||||||
|
src="https://hudie.xiao.band/search.png" webp/>
|
||||||
|
<view class="default-view-slot-right-text">搜索</view>
|
||||||
|
</view>
|
||||||
|
<view class="line-widht-number" style="width: 30rpx"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</ChildComScroll>
|
||||||
|
</view>
|
||||||
|
<!--分隔线,上面的是子组件-->
|
||||||
|
|
||||||
|
<!-- 滚动区域开始-->
|
||||||
|
<view class="grit-content">
|
||||||
|
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
|
||||||
|
<scroll-view :enableBackToTop="true" :enhanced="true" :scrollY="true" :showScrollbar="false"
|
||||||
|
class="scrollViewHeigh">
|
||||||
|
<view class="">
|
||||||
|
<card-list-data-item model-value="" order_list_data=""></card-list-data-item>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
<view class="scrollBottomHeigh">
|
||||||
|
<!--底部预留区域-->
|
||||||
|
<wd-button type="primary" icon="phone" :block="true"
|
||||||
|
@click="buttonClick" custom-class="custom-shadow">
|
||||||
|
信息按钮
|
||||||
|
</wd-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!--滚动区域结束-->
|
||||||
|
</view>
|
||||||
|
</wd-config-provider>
|
||||||
|
<wd-toast selector="default-toast"/>
|
||||||
|
<wd-message-box selector="default-message-box"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import ChildComScroll from "@/components/ChildComScroll.vue";
|
||||||
|
import {ref} from "vue";
|
||||||
|
import type {GlobelsChildPropsType} from "@/types/通用类型";
|
||||||
|
import {onTabItemTap} from "@dcloudio/uni-app";
|
||||||
|
import CardListDataItem from "@/subPackages/homeSubPages/购物车页面/购物车数据列表组件.vue";
|
||||||
|
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
|
||||||
|
|
||||||
|
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
|
||||||
|
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
|
||||||
|
let pxScreenHeight = ref(); // 手机高度
|
||||||
|
let pxWindowHeight = ref(); // 屏幕可视区高度
|
||||||
|
let pxScrollHeight = ref(); // 滚动区域高度
|
||||||
|
let statusHeight = ref(); // 固定的顶部
|
||||||
|
let meunHeight = ref();//插槽时要用的 高度
|
||||||
|
const xiao_six_img = "https://hudie.xiao.band/icon/six.png";
|
||||||
|
const modelValue: GlobelsChildPropsType = {
|
||||||
|
isShowLeft: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgLeft: xiao_six_img},
|
||||||
|
iconTextLeft: {classPrefix: "wd-icon", name: "app", size: 20},
|
||||||
|
},
|
||||||
|
isShowRight: {
|
||||||
|
showCom: "icon",
|
||||||
|
img: {imgRight: xiao_six_img},
|
||||||
|
iconTextRight: {classPrefix: "xiaozizi", name: "gouwuche3", size: 23},
|
||||||
|
},
|
||||||
|
title_text: "六果泡泡", navIsShow: "default",
|
||||||
|
};
|
||||||
|
const homeLeft = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
uni.navigateBack({delta: 1}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const homeRight = () => {
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
console.log("右键按键");
|
||||||
|
};
|
||||||
|
let defaultSearchChange = async () => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
console.log("搜索发起");
|
||||||
|
};
|
||||||
|
onTabItemTap(() => {
|
||||||
|
console.log("🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
|
||||||
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
});
|
||||||
|
const buttonClick = async (): Promise<void> => {
|
||||||
|
await wx.vibrateShort({type: "heavy"});//medium heavy light
|
||||||
|
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 ",);
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"light": {
|
||||||
|
"bgColor": "#fcfcfc", // 页面背景色（整体背景）
|
||||||
|
"bgColorBottom": "#fcfcfc", // 页面底部背景色
|
||||||
|
"bgColorTop": "#ff6b00", // 页面顶部背景色（导航栏区域）
|
||||||
|
"bgTxtStyle": "dark", // 状态栏文字颜色：dark=黑色 light=白色
|
||||||
|
"navBgColor": "#ff6b00", // 导航栏背景色
|
||||||
|
"navTxtStyle": "black", // 导航栏标题文字颜色：black=黑色 white=白色
|
||||||
|
"tabBgColor": "#fcfcfc", // 底部Tab栏背景色
|
||||||
|
"tabBorderStyle": "black", // 底部Tab栏分割线颜色：black=黑色 white=白色
|
||||||
|
"tabFontColor": "#1f2937", // 底部Tab栏未选中文字颜色
|
||||||
|
"tabSelectedColor": "#ff6b00" // 底部Tab栏选中文字颜色
|
||||||
|
},
|
||||||
|
"dark": {
|
||||||
|
"bgColor": "#181818", // 页面背景色（整体背景）
|
||||||
|
"bgColorBottom": "#181818", // 页面底部背景色
|
||||||
|
"bgColorTop": "#ff6b00", // 页面顶部背景色（导航栏区域）
|
||||||
|
"bgTxtStyle": "light", // 状态栏文字颜色：dark=黑色 light=白色
|
||||||
|
"navBgColor": "#ff6b00", // 导航栏背景色
|
||||||
|
"navTxtStyle": "white", // 导航栏标题文字颜色：black=黑色 white=白色
|
||||||
|
"tabBgColor": "#181818", // 底部Tab栏背景色
|
||||||
|
"tabBorderStyle": "white", // 底部Tab栏分割线颜色：black=黑色 white=白色
|
||||||
|
"tabFontColor": "#f3f4f6", // 底部Tab栏未选中文字颜色
|
||||||
|
"tabSelectedColor": "#ff6b00" // 底部Tab栏选中文字颜色
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
//返回的用户类型
|
||||||
|
export interface UserType {
|
||||||
|
self_mini_openid: string, // 用户openid
|
||||||
|
self_user_unionid: string, //全局唯一🆔
|
||||||
|
self_user_nick?: string, // 昵称
|
||||||
|
self_user_img?: string, // 头像
|
||||||
|
}
|
||||||
|
|
||||||
|
// 网络请求,返回类型的定义
|
||||||
|
export interface ApiAxiosResponse<typeListData, typeDictData = { demo: string }> {
|
||||||
|
"code": number,
|
||||||
|
describe: string,
|
||||||
|
"message": "success" | "error",
|
||||||
|
"resData": {
|
||||||
|
"listData": typeListData, "dictData": typeDictData, "total": number, "describe": string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通用组件的类型定义
|
||||||
|
interface IconConfig {
|
||||||
|
classPrefix: "wd-icon" | "fish" | "xiao" | "xiaozizi";
|
||||||
|
name: string;
|
||||||
|
size: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GlobelsChildPropsType {
|
||||||
|
isShowLeft: {
|
||||||
|
showCom: "icon" | "img"; iconTextLeft: IconConfig; img: { imgLeft: string };
|
||||||
|
};
|
||||||
|
isShowRight: {
|
||||||
|
showCom: "icon" | "img"; iconTextRight: IconConfig; img: { imgRight: string };
|
||||||
|
};
|
||||||
|
title_text: string;
|
||||||
|
navIsShow: "default" | "wifi" | "none" | "slot";
|
||||||
|
}
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
/**
|
||||||
|
* 这里是uni-app内置的常用样式变量
|
||||||
|
*
|
||||||
|
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||||
|
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||||
|
*
|
||||||
|
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* 颜色变量 */
|
||||||
|
@import "nutui-uniapp/styles/variables.scss";
|
||||||
|
/* 行为相关颜色 */
|
||||||
|
$uni-color-primary: #007aff;
|
||||||
|
$uni-color-success: #4cd964;
|
||||||
|
$uni-color-warning: #f0ad4e;
|
||||||
|
$uni-color-error: #dd524d;
|
||||||
|
|
||||||
|
/* 文字基本颜色 */
|
||||||
|
$uni-text-color: #333; // 基本色
|
||||||
|
$uni-text-color-inverse: #fff; // 反色
|
||||||
|
$uni-text-color-grey: #999; // 辅助灰色，如加载更多的提示信息
|
||||||
|
$uni-text-color-placeholder: #808080;
|
||||||
|
$uni-text-color-disable: #c0c0c0;
|
||||||
|
|
||||||
|
/* 背景颜色 */
|
||||||
|
$uni-bg-color: #fff;
|
||||||
|
$uni-bg-color-grey: #f8f8f8;
|
||||||
|
$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
|
||||||
|
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
|
||||||
|
|
||||||
|
/* 边框颜色 */
|
||||||
|
$uni-border-color: #c8c7cc;
|
||||||
|
|
||||||
|
/* 尺寸变量 */
|
||||||
|
|
||||||
|
/* 文字尺寸 */
|
||||||
|
$uni-font-size-sm: 12px;
|
||||||
|
$uni-font-size-base: 14px;
|
||||||
|
$uni-font-size-lg: 16px;
|
||||||
|
|
||||||
|
/* 图片尺寸 */
|
||||||
|
$uni-img-size-sm: 20px;
|
||||||
|
$uni-img-size-base: 26px;
|
||||||
|
$uni-img-size-lg: 40px;
|
||||||
|
|
||||||
|
/* Border Radius */
|
||||||
|
$uni-border-radius-sm: 2px;
|
||||||
|
$uni-border-radius-base: 3px;
|
||||||
|
$uni-border-radius-lg: 6px;
|
||||||
|
$uni-border-radius-circle: 50%;
|
||||||
|
|
||||||
|
/* 水平间距 */
|
||||||
|
$uni-spacing-row-sm: 5px;
|
||||||
|
$uni-spacing-row-base: 10px;
|
||||||
|
$uni-spacing-row-lg: 15px;
|
||||||
|
|
||||||
|
/* 垂直间距 */
|
||||||
|
$uni-spacing-col-sm: 4px;
|
||||||
|
$uni-spacing-col-base: 8px;
|
||||||
|
$uni-spacing-col-lg: 12px;
|
||||||
|
|
||||||
|
/* 透明度 */
|
||||||
|
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||||
|
|
||||||
|
/* 文章场景相关 */
|
||||||
|
$uni-color-title: #2c405a; // 文章标题颜色
|
||||||
|
$uni-font-size-title: 20px;
|
||||||
|
$uni-color-subtitle: #555; // 二级标题颜色
|
||||||
|
$uni-font-size-subtitle: 18px;
|
||||||
|
$uni-color-paragraph: #3f536e; // 文章段落颜色
|
||||||
|
$uni-font-size-paragraph: 15px;
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"types": [
|
||||||
|
"vite/client",
|
||||||
|
"@dcloudio/types",
|
||||||
|
"@mini-types/alipay",
|
||||||
|
"miniprogram-api-typings",
|
||||||
|
"@uni-helper/uni-types",
|
||||||
|
"wot-design-uni/global.d.ts",
|
||||||
|
"@uni-helper/uni-app-types",
|
||||||
|
"nutui-uniapp/global.d.ts",
|
||||||
|
"uview-pro/types"
|
||||||
|
],
|
||||||
|
"lib": [
|
||||||
|
"DOM",
|
||||||
|
"DOM.Iterable",
|
||||||
|
"ESNext"
|
||||||
|
],
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"jsxImportSource": "vue",
|
||||||
|
"noImplicitThis": true,
|
||||||
|
"strict": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"target": "ESNext",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"skipLibCheck": true
|
||||||
|
},
|
||||||
|
"vueCompilerOptions": {
|
||||||
|
"plugins": [
|
||||||
|
"@uni-helper/uni-types/volar-plugin",
|
||||||
|
"@uni-helper/uni-app-types/volar-plugin"
|
||||||
|
],
|
||||||
|
"nativeTags": [
|
||||||
|
"block",
|
||||||
|
"component",
|
||||||
|
"template",
|
||||||
|
"slot"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"includes": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.tsx",
|
||||||
|
"components.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import {defineConfig} from "@uni-helper/unh";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* unh 配置文件
|
||||||
|
* 更多配置请参考：https://uni-helper.js.org/unh/
|
||||||
|
*/
|
||||||
|
export default defineConfig({
|
||||||
|
platform: {
|
||||||
|
// 默认平台
|
||||||
|
default: "h5",
|
||||||
|
// 平台别名
|
||||||
|
alias: {
|
||||||
|
"h5": ["w", "h"],
|
||||||
|
"mp-weixin": "wx",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
import {fileURLToPath, URL} from "node:url";
|
||||||
|
|
||||||
|
import {defineConfig} from "vite";
|
||||||
|
import Components from "@uni-helper/vite-plugin-uni-components";
|
||||||
|
import {WotResolver, uViewProResolver} from "@uni-helper/vite-plugin-uni-components/resolvers";
|
||||||
|
import {NutResolver} from "nutui-uniapp";
|
||||||
|
import Uni from "@uni-helper/plugin-uni";
|
||||||
|
import AutoImport from "unplugin-auto-import/vite";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": fileURLToPath(new URL("./src", import.meta.url))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
// https://uni-helper.js.org/vite-plugin-uni-components
|
||||||
|
Components({
|
||||||
|
dts: true,
|
||||||
|
resolvers: [WotResolver(), NutResolver(), uViewProResolver()]
|
||||||
|
}),
|
||||||
|
// https://uni-helper.js.org/plugin-uni
|
||||||
|
Uni(),
|
||||||
|
AutoImport({
|
||||||
|
imports: [
|
||||||
|
"vue",
|
||||||
|
{
|
||||||
|
radashi: [["*", "dash"]],
|
||||||
|
"@vueuse/shared": [["*", "deep"]],
|
||||||
|
"@uni-helper/uni-use": [["*", "uee"]]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dts: "./auto-imports.d.ts",
|
||||||
|
})
|
||||||
|
],
|
||||||
|
build: {
|
||||||
|
target: "es6",
|
||||||
|
cssTarget: "chrome61"
|
||||||
|
},
|
||||||
|
optimizeDeps: {
|
||||||
|
exclude: [
|
||||||
|
"vue-demi"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user