xiao/six_uniapp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

six_uniapp_0005

Browse Source
This commit is contained in:
doudou201703
2026-08-21 23:47:28 +08:00
parent 205e074238
commit 830f6ca2a2
19 changed files with 755 additions and 805 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+9 -3
View File
@@ -9,12 +9,16 @@
积分_添加小程序分享积分, 积分_添加通知好友积分, 积分_统计查询, 订单_查询所有的订单
} from "@/hooks/接口API";
import {emitter, useGlobalSocket} from "@/hooks/useGlobalSocket";
import {checkUpdate更新小程序版本} from "@/hooks/更新小程序版本";
const getDeviceInfo = wx.getDeviceInfo();
type queryType类型 = {
superior_unionid: string,
shareType: "主页分享群好友" | "商品详情分享群好友" | "通知好友" | "好物推荐" | "小程序推荐",
goodID: string
}
const 现金券图片地址 = shallowRef("https://hudie.sixgou.com/six/aa35a95a5be61ba1bc38f856fabf3978.png");
let xiaoMain = useMainXiaoStore();
const 上级分享者的默认值 = "六果";
emitter.on("socket-message", (msg) => {
@@ -25,7 +29,9 @@
xiaoMain.mini_user_data = JSON.parse(msg.text);
}
});
onLaunch(() => {
checkUpdate更新小程序版本();
});
wx.onAppShow((options) => {
let queryData = options?.query as queryType类型 ?? {};
xiaoMain.superior_unionid = options?.query.superior_unionid ?? 上级分享者的默认值;
@@ -37,7 +43,7 @@
console.log("=======================", options, xiaoMain.superior_unionid);
// 如果值为null了 就需要 调用了
xiaoMain.wechatLogin(options?.scene, <string>xiaoMain.superior_unionid, options?.shareTicket).then((data) => {
xiaoMain.wechatLogin(options?.scene, <string>xiaoMain.superior_unionid, options?.shareTicket, getDeviceInfo).then((data) => {
const socked = useGlobalSocket(wss_uri + xiaoMain.mini_unionid + "/");
// 请求拿到当前用户注册过的用户地址
xiaoMain.请求拿到当前用户注册过的用户地址(地址_查询全部地址, <string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid);
@@ -92,7 +98,7 @@
src: "static/vite.png",
promise: new Promise((resolve) => {
wx.downloadFile({
url: "https://oss.xiao.band/backhome.png", // 必须：要下载的图片URL
url: 现金券图片地址.value, // 必须：要下载的图片URL
success: (result) => {
resolve({src: result.tempFilePath}); // 必须要返回一个对象{}同时,必须是一个临时的图片路径;
},
src/components/ChildComScroll.vue
+75 -20
View File
@@ -18,7 +18,6 @@
}
.status-bottom {
//background-color: green;
height: v-bind(statusTop高度差_rpx);
}
@@ -58,6 +57,7 @@
height: v-bind(statusHeight状态栏高度);
justify-content: center;
align-items: center;
line-height: v-bind(statusHeight状态栏高度);
.meun-widht-rightimage_item {
height: calc(v-bind(statusHeight状态栏高度) * 0.75);
@@ -67,6 +67,8 @@
}
.status-status-content {
font-size: 1rem;
line-height: v-bind(statusHeight状态栏高度);
height: v-bind(statusHeight状态栏高度);
display: flex;
justify-content: center;
@@ -118,7 +120,8 @@
modelValue: GlobelsChildPropsType;// 对象类型的 prop
statusHeight: string;
pxScreenHeight: string;
pxWindowHeight: string;//pxWindowHeight
pxWindowHeight: string;
info_scroll_height: number;
}
// 2. 使用 withDefaults 定义默认值
@@ -128,17 +131,23 @@
(eventName: "update:statusHeight", value: string): void
(eventName: "update:pxScreenHeight", value: string): void
(eventName: "update:pxWindowHeight", value: string): void
(eventName: "update:info_scroll_height", value: string): void
(eventName: "homeLeft",): void
(eventName: "homeRight",): void
}>();
const {modelValue, statusHeight, pxWindowHeight, pxScreenHeight} = useVModels(props, emit); // 这里是将整个全包在里面了
const {modelValue, statusHeight, pxWindowHeight, pxScreenHeight, info_scroll_height} = useVModels(props, emit); // 这里是将整个全包在里面了
const info_window = wx.getWindowInfo();
const pix = 750 / info_window.windowWidth;
const wifi_height高度 = computed(() => {
return wx.getWindowInfo().statusBarHeight * pix;
});
const pix = computed(() => 750 / wx.getWindowInfo().windowWidth);
const menuButton对象 = wx.getMenuButtonBoundingClientRect();
const statusTop高度差 = menuButton对象.top * pix - wifi_height高度.value;
const wifi_height高度 = computed(() => {
if (menuButton对象.top - info_window.statusBarHeight <= 0) {
return (info_window.statusBarHeight + (menuButton对象.top - info_window.statusBarHeight)) * pix.value;
} else {
return info_window.statusBarHeight * pix.value;
}
});
const statusTop高度差 = menuButton对象.top * pix.value - info_window.statusBarHeight * pix.value;
const wifi_height高度_rpx = computed(() => {
return wifi_height高度.value + "rpx";
});
@@ -153,9 +162,9 @@
const menu胶囊的高度 = computed(() => {
if (statusTop高度差 < 0) {
// return (menuButton对象.height * pix + statusTop高度差);
return (menuButton对象.height * pix + statusTop高度差 * 2);
return (menuButton对象.height * pix.value);
} else {
return (menuButton对象.height * pix);
return (menuButton对象.height * pix.value);
}
});
const statusHeight状态栏高度 = menu胶囊的高度.value + "rpx";
@@ -166,25 +175,71 @@
return wifi_height高度.value + menu胶囊的高度.value + statusTop高度差 * 2;
}
});
const window屏幕可用高度 = computed(() => {
if (info_window.screenHeight === info_window.windowHeight) {
return (info_window.screenHeight - (info_window.screenHeight - info_window.safeArea.bottom)) * pix.value;
} else {
return info_window.windowHeight * pix.value;
}
});
console.log("99999999999", info_window.screenHeight, info_window.safeArea.bottom);
const 整个高度_rpx = 整个高度.value + "rpx";
statusHeight.value = 整个高度_rpx;
if (modelValue.value.navIsShow === "none") {
info_scroll_height.value = Math.floor(window屏幕可用高度.value);
statusHeight.value = "0rpx";
}
if (modelValue.value.navIsShow === "default") {
info_scroll_height.value = Math.floor(window屏幕可用高度.value - 整个高度.value);
statusHeight.value = 整个高度_rpx;
}
const lef左侧的距离 = 750 - menuButton对象.right * pix + "rpx";
const menu胶囊宽度 = menuButton对象.width * pix + "rpx";
const content宽度 = 750 - (750 - menuButton对象.right * pix) * 2 - (menuButton对象.width * pix) * 2 + "rpx";
const window屏幕可用高度 = computed(() => {
if (info_window.screenHeight === info_window.windowHeight) {
return (info_window.screenHeight - (info_window.screenHeight - info_window.safeArea.bottom)) * pix;
} else {
return info_window.windowHeight * pix;
if (modelValue.value.navIsShow === "wifi") {
info_scroll_height.value = Math.floor(window屏幕可用高度.value - wifi_height高度.value);
statusHeight.value = wifi_height高度_rpx.value;
}
const lef左侧的距离 = 750 - menuButton对象.right * pix.value + "rpx";
const menu胶囊宽度 = menuButton对象.width * pix.value + "rpx";
const content宽度 = 750 - (750 - menuButton对象.right * pix.value) * 2 - (menuButton对象.width * pix.value) * 2 + "rpx";
pxScreenHeight.value = info_window.screenHeight * pix.value + "rpx";
pxWindowHeight.value = window屏幕可用高度.value + "rpx";
// 当阔折叠手机发生的时候需要重新计算当前的值
wx.onWindowResize((result) => {
const newInfo = wx.getWindowInfo();
const newPix = 750 / newInfo.windowWidth;
// 底部安全区域高度（px）
const bottomSafeHeight = newInfo.screenHeight - newInfo.safeArea.bottom;
// 内容可用高度（px），扣除底部安全区域
const contentHeight = result.size.windowHeight - bottomSafeHeight;
// 转成 rpx
pxWindowHeight.value = contentHeight * newPix + "rpx";
// 重新计算导航栏各段高度（全部用 newPix）
const newWifiHeight = newInfo.statusBarHeight * newPix;
const menuRect = wx.getMenuButtonBoundingClientRect();
const newMenuTop = menuRect.top * newPix;
const newMenuHeight = menuRect.height * newPix;
const newStatusTopGap = newMenuTop - newWifiHeight;
// 导航栏总高度
let navTotalHeight = newWifiHeight + newMenuHeight;
if (newStatusTopGap >= 0) {
navTotalHeight += newStatusTopGap * 2;
}
// 根据 navIsShow 更新内容区高度
if (modelValue.value.navIsShow === "default") {
info_scroll_height.value = Math.floor(contentHeight * newPix - navTotalHeight - 1);
statusHeight.value = navTotalHeight + "rpx";
} else if (modelValue.value.navIsShow === "none") {
info_scroll_height.value = Math.floor(contentHeight * newPix - 1);
statusHeight.value = "0rpx";
} else if (modelValue.value.navIsShow === "wifi") {
info_scroll_height.value = Math.floor(contentHeight * newPix - newWifiHeight - 1);
statusHeight.value = newWifiHeight + "rpx";
}
});
pxScreenHeight.value = info_window.screenHeight * pix + "rpx";
pxWindowHeight.value = window屏幕可用高度.value + "rpx";
</script>
src/hooks/更新小程序版本.ts
+22 -20
View File
@@ -1,23 +1,25 @@
const updateManager = wx.getUpdateManager();
export const checkUpdate更新小程序版本 = async (): Promise<void> => {
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.onCheckForUpdate(function (res) {
// 请求完新版本信息的回调
console.log(res.hasUpdate);
});
});
updateManager.onUpdateFailed(function () {
// 新版本下载失败
});
updateManager.onUpdateReady(function () {
wx.showModal({
title: "更新提示",
content: "新版本已经准备好，是否重启应用？",
success: function (res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate();
}
}
});
});
updateManager.onUpdateFailed(function () {
// 新版本下载失败
});
};
src/pageTabBar/Home/Home.vue
+85 -204
View File
@@ -1,40 +1,8 @@
<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-size: 28rpx;
font-family: "xiaoFont", sans-serif;
height: v-bind(pxScreenHeight);
//background-image: url("https://hudie.xiao.band/wechatbackimg.png");
@@ -74,70 +42,41 @@
/*状态栏的高度 这里的值不能动*/
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(pxWindowHeight) - v-bind(statusHeight));
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
.scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/
box-sizing: border-box;
//background-color: rgba(255, 255, 255, 0.05);
}
.scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/
box-sizing: border-box;
//background-color: rgba(255, 255, 255, 0.05);
}
.scrollViewHeigh {
/*滚动页面区域范围*/
box-sizing: border-box;
font-size: 1rem;
overflow: hidden;
height: v-bind(defaule滚动区域的高度);
.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%);
}
: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();
.page_1_title {
height: 382rpx;
}
.page_1_chao_hua_shuai {
height: 400rpx;
}
.page_1_chao_hong {
//height: v-bind(css红包高度);
//background-color: #40AE36;
}
}
@@ -150,160 +89,102 @@
<view class="root-container">
<view class="status-wifi-nav">
<ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
v-model:info_scroll_height="info_scroll_height"
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">
<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>
</view>
<!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<view class="page_1_title">
<home-com-image></home-com-image>
</view>
<view class="line-widht-number" style="height: 20rpx"></view>
<view class="page_1_chao_hua_shuai">
<home-com-chao-hua-shuai></home-com-chao-hua-shuai>
</view>
<view class="line-widht-number" style="height: 10rpx"></view>
<view class="page_1_chao_hong">
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
<home-com-hong-meng :hong-height="info_scroll_height"
:css_com_height="css_com_height"></home-com-hong-meng>
</view>
</scroll-view>
<view class="scrollBottomHeigh">
<!--底部预留区域-->
</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 {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 {GlobelsChildPropsType} from "@/types/通用类型";
import {onTabItemTap} from "@dcloudio/uni-app";
import {useMessage, useToast} from "wot-design-uni";
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
import HomeComImage from "@/pageTabBar/Home/首页组件图片.vue";
import HomeComChaoHuaShuai from "@/pageTabBar/Home/首页组件超划算.vue";
import HomeComHongMeng from "@/pageTabBar/Home/首页组件红包.vue";
let xiaoMain = useMainXiaoStore();
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 pxScreenHeight = ref("0rpx"); // 手机高度
let pxWindowHeight = ref("0rpx"); // 屏幕可视区高度
let statusHeight = ref(); // 固定的顶部
let meunHeight = ref();//插槽时要用的 高度
let info_scroll_height = ref(0);
const defaule滚动区域的高度 = computed(() => {
return info_scroll_height.value + "rpx";
});
const css红包高度 = computed(() => {
return info_scroll_height.value - 400 - 382 - 20 - 10 + "rpx";
});
const css_com_height = computed(() => {
return info_scroll_height.value - 400 - 382 - 20 - 10;
});
const xiao_six_img = "https://hudie.xiao.band/icon/six.png";
const modelValue: GlobelsChildPropsType = {
isShowLeft: {
showCom: "icon",
img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
img: {imgLeft: xiao_six_img},
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},
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 };
await wx.vibrateShort({type: "heavy"});//medium heavy light
console.log("搜索发起");
};
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(() => {
console.log("🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
wx.vibrateShort({type: "heavy"});//medium heavy light
});
</script>
</script>
src/pageTabBar/Home/home-com-title.vue → src/pageTabBar/Home/首页组件图片.vue
+2 -1
View File
@@ -1,6 +1,7 @@
<style scoped lang="scss">
.page-title {
width: 750rpx;
height: 100%;
.title {
width: 684rpx;
@@ -52,6 +53,6 @@
import {ref} from "vue";
let theme = ref(uni.getAppBaseInfo().theme); // 返回值为 dark or linght
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
defineOptions({options: {styleIsolation: "shared"}, name: "home-com-image"}); // 组件使用
</script>
src/pageTabBar/Home/home-com-hong-meng.vue → src/pageTabBar/Home/首页组件红包.vue
+325 -375
View File
@@ -1,23 +1,4 @@
<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% {
@@ -31,170 +12,119 @@
}
}
@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;
font-size: 1rem;
height: v-bind(组件高度);
.gird-root-div {
height: 100%;
margin: 0 auto;
width: 710rpx;
.xiaozizi {
display: grid;
grid-template-columns: 1fr 1fr; //分成多少列 每一列的宽度 相对于父容器总宽度
grid-template-rows: 460rpx; // 分多少行, 每一行的高度, 相对于父容器的总高度
gap: 0 10rpx;
height: v-bind(组件高度);
grid-template-columns: 1fr 1fr;
grid-auto-rows: v-bind(组件高度);
column-gap: 10rpx;
.root-div-left {
box-sizing: border-box;
height: 460rpx;
padding: 24rpx 24rpx 24rpx 24rpx;
.div-left {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 30% 70%;
height: v-bind(组件高度);
padding: 0 12rpx;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: minmax(v-bind(default图片的高度), 1fr) 1fr 1fr 1fr;
justify-content: space-between;
justify-items: center;
align-content: space-between;
column-gap: 10rpx;
row-gap: 10rpx;
box-sizing: border-box;
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 {
// 这里的图片的容器
.div-left-items {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
flex-direction: column;
position: relative;
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%);
background: rgba(255, 255, 255, 0.05);
.user-image {
.feature-item-cou {
position: absolute;
width: 100%;
height: 100%;
inset: 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
.feature-icon--cou {
margin: 0 auto;
font-size: v-bind(fontSize);
}
.feature-desc {
font-size: 0.9rem;
}
}
.div-left-items-icon {
font-size: v-bind(fontSize);
}
.div-left-items-text {
font-size: 0.9rem;
}
}
.div-left-items-1 {
grid-column: 1/3;
&.shake-element {
animation: shake 0.3s ease-in-out 1;
}
:deep(.custom-class-img) {
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) {
.custom-image {
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 {
.div-right {
height: v-bind(组件高度);
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;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto auto auto auto;
align-content: space-between;
.card-header {
//align-self: self-start;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 12rpx;
.title-group {
display: flex;
@@ -228,7 +158,8 @@
}
.card-content {
flex: 1;
box-sizing: border-box;
padding: 0 12rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -273,87 +204,89 @@
}
}
/* 核心卖点 */
.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%;
}
}
}
}
/* 核心卖点 */
.core-benefit {
padding: 15rpx 12rpx;
.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 12rpx;
display: grid;
box-sizing: border-box;
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;
align-self: flex-end;
box-sizing: border-box;
padding: 0 12rpx;
.action-button {
display: flex;
@@ -390,6 +323,7 @@
}
}
}
}
}
}
@@ -397,28 +331,26 @@
<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 class="xiaozizi">
<view class="div-left">
<view class="div-left-items div-left-items-1" :class="{'shake-element':shakeBoole}">
<!-- <view class="div-left-items-icon">🎁</view>-->
<!-- <view class="div-left-items-text">2</view>-->
<wd-img custom-class="custom-class-img" custom-image="custom-image" mode="heightFix"
: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 class="left-2">
<view class="div-left-items">
<view class="feature-item" @click="震动效果"
v-if="xiaoMain.mini_代金券数据?.stock券状态==='发放中'">
<view class="feature-icon">
@@ -444,43 +376,42 @@
</view>
</send-coupon>
</view>
<view class="feature-item" @click="已领取卡券"
<view class="feature-item-cou" @click="已领取卡券"
v-if="xiaoMain.mini_代金券数据?.stock券状态==='已领券'">
<view class="feature-icon">
<wd-loading :size="15" type="spinner" color="#fa34aa"/>
<view class="feature-icon--cou">
✅
<!-- <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="div-left-items" @click="送好友">
<!-- <view class="div-left-items-icon">🏀</view>-->
<!-- <view class="div-left-items-text">2</view>-->
<view class="div-left-items-icon">🔊</view>
<view class="div-left-items-text">给好友送券</view>
</view>
<view class="div-left-items" @click="每日签到弹出幕帘">
<view class="div-left-items-icon"> 🦶</view>
<view class="div-left-items-text">每日签到</view>
</view>
<view class="div-left-items" @click="新人红包事件">
<view class="div-left-items-icon">🧧</view>
<view class="div-left-items-text">新人大礼包</view>
</view>
<view class="div-left-items" @click="赢免单事件">
<view class="div-left-items-icon">🤝</view>
<view class="div-left-items-text">赢免单</view>
</view>
<view class="div-left-items" @click="新品通知事件">
<view class="div-left-items-icon">🔔</view>
<view class="div-left-items-text">新品通知</view>
</view>
</view>
<view class="div-right">
<view class="card-header">
<view class="title-group">
<text class="title">推广员</text>
@@ -488,8 +419,6 @@
</view>
<view class="badge">招募中</view>
</view>
<wd-gap bg-color="#348638" height="2rpx"></wd-gap>
<view class="card-content">
<!-- 佣金展示 -->
<view class="commission-showcase">
@@ -500,36 +429,36 @@
</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>
<!-- 核心卖点 -->
<view class="core-benefit">
<view class="benefit-content">
<text class="benefit-emoji">💰</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 class="feature-item" @click="收益透明事件">
<view class="feature-icon">📈</view>
<view class="feature-desc">收益透明</view>
</view>
</view>
<view class="card-footer" @click="加入联盟事件">
@@ -555,51 +484,48 @@
// 页面功能注释区域
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 {useRequest} from "@uni-helper/uni-use";
import {卡券_领券后更新当前券的状态, 商品_赢免单商品数据, 积分_每日签到奖励} from "@/hooks/接口API";
import {useToast} from "wot-design-uni";
import {卡券_领券, 卡券_领券后更新当前券的状态, 商品_赢免单商品数据, 积分_每日签到奖励} from "@/hooks/接口API";
import type {Send发放优惠类回调类型} from "@/hooks/发放优惠券的回调类型";
let xiaoMain = useMainXiaoStore();
defineOptions({options: {styleIsolation: "shared"}, name: "home-com-hong-meng"}); // 组件使用
let defautl_img = ref("https://hudie.xiao.band/default_img/96d41ae72ca64bb026ff13906ee7d6b8.webp");
const xiao_six_img = "https://hudie.xiao.band/icon/six.png";
const default图片的高度 = ref("70rpx");
const fontSize = ref("1.7rem");
const img = ref<string>("https://hudie.sixgou.com/six/f151306b164cb2e5ede53d1bb9a406cd.png");
const 现金券图片地址 = shallowRef("https://hudie.sixgou.com/six/aa35a95a5be61ba1bc38f856fabf3978.png");
// 1. 定义 props 类型
interface definePropsType {
hongHeight: number;
css_com_height: number;
}
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
};
// 2. 使用 withDefaults 定义默认值
const props = withDefaults(defineProps<definePropsType>(), {});
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 组件高度 = computed(() => {
return props.css_com_height + "rpx";
});
let theme = ref(uni.getAppBaseInfo().theme); // 返回值为 dark or linght
defineOptions({options: {styleIsolation: "shared"}, name: "home-com-hong-meng"}); // 组件使用
const sendcoupon = async (e: Send发放优惠类回调类型): Promise<void> => {
await wx.vibrateShort({type: xiaoMain.vibrateShort震动效果.heavy});
console.log("这里是事件点击领券时触发", e);
@@ -622,27 +548,78 @@
console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 onConfirmonConfirmonConfirmonConfirmonConfirmonConfirmonConfirm ",);
}
};
// 监听当前用户的领券的状态
// 领完卡券的查询提示
const 已领取卡券 = async (): Promise<void> => {
const 震动效果 = async (): Promise<void> => {
await wx.vibrateShort({type: "heavy"});//medium heavy light
};
const info = wx.getDeviceInfo();
wx.onWindowResize(res => {
const w = res.size.windowWidth;
console.log("-----------", w);
// 按窗口宽度切布局，而不是按 model
});
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"}));
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/用户积分页面/用户积分页面"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
};
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 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,
url: 现金券图片地址.value,
success: (res) => {
wx.showShareImageMenu({
needShowEntrance: true,// 带小程序的分享入口
path: res.tempFilePath,
entrancePath: "/pageTabBar/Home/Home?" + "superior_unionid=" + xiaoMain.mini_unionid + "&" + "shareType=通知好友"
});
}
});
};
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 新人红包事件 = useThrottleFn(async () => {
//执行时机: 点击后直接执行,但是在设置的时间范围内,不会再次执行
shakeBoole.value = true;
await uni.vibrateLong();
setTimeout(() => {
shakeBoole.value = false;
}, 1000);
}, 1000);
const 赢免单事件 = async (): Promise<void> => {
await wx.vibrateShort({type: "heavy"});//medium heavy light
try {
@@ -664,40 +641,13 @@
}
// uni.navigateTo({url: "/subPackages/homeSubPages/商城页面目录/PageShangCheng"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
};
const 每日签到弹出幕帘 = async (): Promise<void> => {
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"}));
};
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);
}
toast.warning({msg: "领取成功，已放入微信卡包"});
uni.navigateTo({url: "/subPackages/homeSubPages/商城页面目录/PageShangCheng"}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
};
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>
src/pageTabBar/Home/home-com-chao-hua-shuai.vue → src/pageTabBar/Home/首页组件超划算.vue
+37 -36
View File
@@ -1,7 +1,7 @@
<style scoped lang="scss">
.home-com-chao-hua-shuai {
width: 690rpx;
height: 394rpx;
height: 400rpx;
//background: rgba(255, 255, 255, 0.1);
border-radius: 12rpx;
margin: 0 auto;
@@ -10,21 +10,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;
}
height: 15%;
//padding-top: 30rpx;
.flex-container {
display: flex;
align-items: center;
height: 44rpx;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 24rpx;
@@ -71,28 +64,36 @@
.hua-shuai-goods {
display: grid;
height: 85%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100%;
.hua-shuai-goods-items {
box-sizing: border-box;
padding-left: 24rpx;
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 70% 13% 17%;
align-content: space-between;
.goods-items-img {
width: 176rpx;
height: 176rpx;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
&.theme-white {
border: #b9b9b9 dashed 1px; // 主题是亮色的时候
}
&.theme-dark {
border: #6e6d6d dashed 1px; // 主题是亮色的时候
}
//&.theme-white {
// border: #b9b9b9 dashed 1px; // 主题是亮色的时候
//}
//
//&.theme-dark {
// border: #6e6d6d dashed 1px; // 主题是亮色的时候
//}
:deep(.custom-class-img-title) {
width: 175rpx;
height: 175rpx;
width: 100%;
height: 100%;
display: flex;
box-sizing: border-box;
justify-content: center;
@@ -100,8 +101,8 @@
.custom-image-title {
width: 175rpx;
height: 175rpx;
width: 90%;
height: 90%;
}
}
@@ -109,17 +110,22 @@
}
.goods-items-name {
width: 184rpx;
height: 36rpx;
//width: 184rpx;
height: 100%;
box-sizing: border-box;
padding-left: 5%;
font-weight: 400;
font-size: 26rpx;
line-height: 36rpx;
text-align: left;
font-style: normal;
display: flex;
align-items: center;
}
.goods-items-price {
height: 44rpx;
padding-left: 5%;
height: 100%;
display: flex;
width: 100%;
align-items: center;
@@ -188,7 +194,6 @@
<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>
@@ -202,14 +207,12 @@
<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>
@@ -221,9 +224,7 @@
</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>
@@ -258,7 +259,7 @@
{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"}}); // 组件使用
defineOptions({options: {styleIsolation: "shared"}, name: "home-com-chao-hua-shuai"}); // 组件使用
const 进入商城页面 = async (): Promise<void> => {
await wx.vibrateShort({type: "heavy"});
uni.navigateTo({url: "/subPackages/homeSubPages/商城页面目录/PageShangCheng"}).then().catch(() => {
src/pageTabBar/Me/Me.vue
+4 -12
View File
@@ -189,20 +189,10 @@
<view class="status-wifi-nav">
<ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
v-model:pxWindowHeight="pxWindowHeight"
v-model:statusHeight="statusHeight"
v-model:statusHeight="statusHeight" v-model:info_scroll_height="info_scroll_height"
: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>
@@ -248,6 +238,8 @@
let pxScrollHeight = ref(); // 滚动区域高度
let statusHeight = ref(); // 固定的顶部
let meunHeight = ref();//插槽时要用的 高度
let info_scroll_height = ref(0);
const modelValue: GlobelsChildPropsType = {
isShowLeft: {
showCom: "icon",
src/stores/piniaPro/miniChatStore.ts
+3 -2
View File
@@ -46,7 +46,7 @@ export const useMainXiaoStore = defineStore("MainXiaoStore", () => {
return address.isDefaultAddress === "是默认地址";
});
});
const wechatLogin = async (scene: number | undefined, superior_unionid: string, shareTicket: string | undefined): Promise<void> => {
const wechatLogin = async (scene: number | undefined, superior_unionid: string, shareTicket: string | undefined, user_手机设备参数: any): Promise<void> => {
try {
// 1. 获取 code
let loginSuccessCallbackResult = await wx.login();
@@ -68,7 +68,7 @@ export const useMainXiaoStore = defineStore("MainXiaoStore", () => {
}
// let data = await instance.post<ApiAxiosResponse<Array<string>, UserType>>(用户_登陆, params);
let data = await useRequest<ApiAxiosResponse<Array<string>, miniUserInfo>>(用户_登陆, {
method: "POST", data: {...params}
method: "POST", data: {...params, user_手机设备参数: user_手机设备参数}
});
if (data.data.value?.resData.dictData.mini_openid && data.data.value.resData.dictData.unionid) {
// 判断值确实存在了, 就赋值
@@ -177,6 +177,7 @@ export const useMainXiaoStore = defineStore("MainXiaoStore", () => {
}
});
mini_代金券数据.value = data.data.value;
console.log(mini_代金券数据.value);
};
return {
zizi,
src/subPackages/homeSubPages/商品详情页面/商品详情页面.vue
+3
View File
@@ -140,6 +140,7 @@
<view class="root-container">
<view class="status-wifi-nav">
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
v-model:info_scroll_height="info_scroll_height"
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight"
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft"
@homeRight="homeRight">
@@ -214,6 +215,8 @@
let pxScrollHeight = ref(); // 滚动区域高度
let statusHeight = ref(); // 固定的顶部
let meunHeight = ref();//插槽时要用的 高度
let info_scroll_height = ref(0);
const modelValue: GlobelsChildPropsType = {
isShowLeft: {
showCom: "icon",
src/subPackages/homeSubPages/商城页面目录/PageShangCheng.vue
+3 -1
View File
@@ -331,7 +331,7 @@
<view class="status-wifi-nav">
<ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
v-model:pxWindowHeight="pxWindowHeight"
v-model:statusHeight="statusHeight"
v-model:statusHeight="statusHeight" v-model:info_scroll_height="info_scroll_height"
:modelValue="modelValue" @homeLeft="homeLeft"
@homeRight="homeRight">
<!-- <template v-slot:default>-->
@@ -450,6 +450,8 @@
let xiaoMain = useMainXiaoStore();
defineOptions({options: {styleIsolation: "shared"}});
let pxScreenHeight = ref(); // 手机高度
let info_scroll_height = ref(0);
let pxWindowHeight = ref(); // 屏幕可视区高度
let pxScrollHeight = ref(); // 滚动区域高度
let statusHeight = ref(); // 固定的顶部
src/subPackages/homeSubPages/物流追踪页面/物流追踪页面.vue
+3 -11
View File
@@ -579,20 +579,11 @@
<view class="root-container">
<view class="status-wifi-nav">
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
v-model:info_scroll_height="info_scroll_height"
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">
@@ -768,6 +759,7 @@
},
title_text: "物流信息", navIsShow: "default",
};
let info_scroll_height = ref(0);
let xiaoMain = useMainXiaoStore();
// 获取特定参数的值
src/subPackages/homeSubPages/用户积分页面/用户积分页面.vue
+4 -11
View File
@@ -133,20 +133,11 @@
<view class="root-container">
<view class="status-wifi-nav">
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
v-model:info_scroll_height="info_scroll_height"
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>
<!--分隔线,上面的是子组件-->
@@ -197,6 +188,8 @@
let pxWindowHeight = ref(); // 屏幕可视区高度
let pxScrollHeight = ref(); // 滚动区域高度
let statusHeight = ref(); // 固定的顶部
let info_scroll_height = ref(0);
let meunHeight = ref();//插槽时要用的 高度
const modelValue: GlobelsChildPropsType = {
isShowLeft: {
src/subPackages/homeSubPages/用户配送地址页面/用户配送地址页面.vue
+2 -11
View File
@@ -138,20 +138,10 @@
<view class="root-container">
<view class="status-wifi-nav">
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
v-model:info_scroll_height="info_scroll_height"
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">
@@ -191,6 +181,7 @@
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
let theme = ref(<ConfigProviderTheme>uni.getAppBaseInfo().theme); // 返回值为 dark or linght
let info_scroll_height = ref(0);
let pxScreenHeight = ref(); // 手机高度
let pxWindowHeight = ref(); // 屏幕可视区高度
src/subPackages/homeSubPages/订单数据页面/订单数据页面.vue
+3 -11
View File
@@ -169,20 +169,11 @@
<view class="root-container">
<view class="status-wifi-nav">
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
v-model:info_scroll_height="info_scroll_height"
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">
@@ -256,6 +247,7 @@
let pxScrollHeight = ref(); // 滚动区域高度
let statusHeight = ref(); // 固定的顶部
let meunHeight = ref();//插槽时要用的 高度
let info_scroll_height = ref(0);
const modelValue: GlobelsChildPropsType = {
src/subPackages/homeSubPages/购物车页面/购物车页面.vue
+4 -11
View File
@@ -132,20 +132,11 @@
<view class="root-container">
<view class="status-wifi-nav">
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight"
v-model:info_scroll_height="info_scroll_height"
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>
<!--分隔线,上面的是子组件-->
@@ -190,6 +181,8 @@
let pxScrollHeight = ref(); // 滚动区域高度
let statusHeight = ref(); // 固定的顶部
let meunHeight = ref();//插槽时要用的 高度
let info_scroll_height = ref(0);
const xiao_six_img = "https://hudie.xiao.band/icon/six.png";
const modelValue: GlobelsChildPropsType = {
isShowLeft: {