six_uniapp_0001
This commit is contained in:
doudou201703
@@ -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>
|
||||
Reference in New Issue
Block a user