252 lines
10 KiB
Vue
252 lines
10 KiB
Vue
<style lang="scss" scoped>
|
|
//@import "@/assets/demo.scss";
|
|
.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);
|
|
}
|
|
}
|
|
|
|
|
|
.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滚动区域的高度);
|
|
|
|
: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%);
|
|
}
|
|
}
|
|
|
|
.page_1_title {
|
|
height: 382rpx;
|
|
}
|
|
|
|
.page_1_chao_hua_shuai {
|
|
height: 400rpx;
|
|
}
|
|
|
|
.page_1_chao_hong {
|
|
//height: v-bind(css红包高度);
|
|
//background-color: #40AE36;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|
|
<template>
|
|
<page-meta class="page-meta" rootFontSize="32rpx" :pageStyle="`height: ${pxScreenHeight};`">
|
|
<view class="phone-screen">
|
|
<wd-config-provider :theme="theme">
|
|
<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">
|
|
</ChildComScroll>
|
|
</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">
|
|
<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>
|
|
|
|
</page-meta>
|
|
</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 {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";
|
|
import {usePage, useRequest} from "@uni-helper/uni-use";
|
|
import {分享_HOME页面分享到朋友圈, 分享_HOME页面分享到群或者好友} from "@/hooks/接口API";
|
|
|
|
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("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: xiao_six_img},
|
|
iconTextLeft: {classPrefix: "wd-icon", name: "app", size: 20},
|
|
},
|
|
isShowRight: {
|
|
showCom: "icon",
|
|
img: {imgRight: xiao_six_img},
|
|
iconTextRight: {classPrefix: "wd-icon", name: "app1", size: 20},
|
|
},
|
|
title_text: "六果泡泡", navIsShow: "default",
|
|
};
|
|
const homeLeft = () => {
|
|
wx.vibrateShort({type: "heavy"});//medium heavy light
|
|
};
|
|
|
|
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
|
|
});
|
|
onLoad((query) => {
|
|
let page_path = usePage().value.route;
|
|
const instance = getCurrentInstance();
|
|
uni.showShareMenu({
|
|
withShareTicket: true,
|
|
menus: ["shareAppMessage", "shareTimeline"], // 关键！明确启用哪些功能 "shareTimeline"
|
|
});
|
|
|
|
onShareAppMessage((options: Page.ShareAppMessageOption) => {
|
|
return {
|
|
title: "",
|
|
path: page_path,
|
|
desc: "",
|
|
imageUrl: "",
|
|
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: "",//imageUrl:自定义图片路径，可以是本地文件或者网络图片
|
|
query: "",
|
|
path: page_path,
|
|
promise: new Promise<Page.ShareTimelineContent>(async (resolve, reject) => {
|
|
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}`};
|
|
return {query: "superior_unionid=" + xiaoMain.mini_unionid};
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|