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

six_uniapp_0003(更新通用的子组件语法)

Browse Source
This commit is contained in:
doudou201703
2026-08-17 23:35:30 +08:00
parent d14b70ad24
commit 205e074238
11 changed files with 954 additions and 1025 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChildComScroll.vue
+130 -296
View File
@@ -1,138 +1,87 @@
<style lang="scss" scoped> <style scoped lang="scss">
.child {
height: v-bind(整个高度_rpx);
.phoneCom {
position: fixed; position: fixed;
width: 750rpx; width: 750rpx;
top: 0; top: 0;
left: 0; left: 0;
background-color: transparent; background-color: transparent;
z-index: v-bind(zIndex); z-index: 100;
.phone-wifi {
height: v-bind(wifi_px);
} }
.phone-nav { .wifi-status {
height: v-bind(nav_px_height); height: v-bind(wifi_height高度_rpx);
box-sizing: border-box; }
display: flex;
.status-top {
height: v-bind(statusTop高度差_rpx);
}
.status-bottom {
//background-color: green;
height: v-bind(statusTop高度差_rpx);
}
.status-status {
height: v-bind(statusHeight状态栏高度);
display: grid;
grid-template-columns: v-bind(lef左侧的距离) v-bind(menu胶囊宽度) v-bind(content宽度);
.status-status-left {
width: v-bind(lef左侧的距离);
height: v-bind(statusHeight状态栏高度);
}
.status-status-menu {
// 胶囊
height: v-bind(statusHeight状态栏高度);
width: v-bind(menu胶囊宽度);
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: v-bind(statusHeight状态栏高度);
align-items: center; align-items: center;
.meun-height { .status-status-menu-left {
height: v-bind(meun_px_height); height: v-bind(statusHeight状态栏高度);
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; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
:deep(.customClass-icon) { .meun-widht-rightimage_item {
height: v-bind(meun_px_height); height: calc(v-bind(statusHeight状态栏高度) * 0.75);
text-align: center; width: calc(v-bind(statusHeight状态栏高度) * 0.75);
line-height: v-bind(meun_px_height);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
} }
}
.status-status-menu-right {
display: flex;
height: v-bind(statusHeight状态栏高度);
justify-content: center;
align-items: center;
.meun-widht-rightimage_item { .meun-widht-rightimage_item {
height: v-bind(imgWidthHeight); height: calc(v-bind(statusHeight状态栏高度) * 0.75);
width: v-bind(imgWidthHeight); width: calc(v-bind(statusHeight状态栏高度) * 0.75);
position: absolute; }
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
} }
} }
.FlexTitleWidth { .status-status-content {
width: v-bind(rpxFlexTitleWidth); height: v-bind(statusHeight状态栏高度);
text-align: center;
display: flex; display: flex;
justify-content: center;
align-items: center; 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> </style>
<template> <template>
<view class="phoneCom"> <view class="child">
<view class="phone-wifi"> <view class="wifi-status"></view>
<view class="status-wifi"></view> <view class="status-top"></view>
</view> <view class="status-status">
<view v-if="navShow" class="phone-nav"> <view class="status-status-left"></view>
<view class="meun-height"> <view class="status-status-menu">
<view class="uniui-left"></view> <view class="status-status-menu-left" @click="emit('homeLeft')">
<view class="meun-widht-left" @click="emit('homeLeft')">
<wd-icon v-if="modelValue?.isShowLeft.showCom==='icon'" <wd-icon v-if="modelValue?.isShowLeft.showCom==='icon'"
:classPrefix="modelValue?.isShowLeft.iconTextLeft.classPrefix" :classPrefix="modelValue?.isShowLeft.iconTextLeft.classPrefix"
:name="modelValue?.isShowLeft.iconTextLeft.name" :name="modelValue?.isShowLeft.iconTextLeft.name"
@@ -143,9 +92,7 @@
class="meun-widht-rightimage_item" class="meun-widht-rightimage_item"
mode="scaleToFill" webp></image> mode="scaleToFill" webp></image>
</view> </view>
<view class="meun-widht-middle" :class="{'light-background':theme==='light'}"></view> <view class="status-status-menu-right" @click="emit('homeRight')">
<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'" <wd-icon v-if="modelValue?.isShowRight.showCom==='icon'"
:classPrefix="modelValue?.isShowRight.iconTextRight.classPrefix" :classPrefix="modelValue?.isShowRight.iconTextRight.classPrefix"
:name="modelValue?.isShowRight.iconTextRight.name" :name="modelValue?.isShowRight.iconTextRight.name"
@@ -156,201 +103,88 @@
class="meun-widht-rightimage_item" class="meun-widht-rightimage_item"
mode="scaleToFill" webp></image> mode="scaleToFill" webp></image>
</view> </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 class="status-status-content">{{ modelValue.title_text }}</view>
</view> </view>
<view class="status-bottom"></view>
</view> </view>
</template> </template>
<script setup lang="ts">
<script lang="ts" setup> import {useVModels} from "@vueuse/core";
import {computed, ref, watchEffect} from "vue"; import {computed} from "vue";
import {onShow} from "@dcloudio/uni-app";
import type {GlobelsChildPropsType} from "@/types/通用类型"; 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 { interface definePropsType {
modelValue?: GlobelsChildPropsType, //跟v-model=值没有关系 modelValue: GlobelsChildPropsType;// 对象类型的 prop
zIndex?: number statusHeight: string;
pxScreenHeight: string;
pxWindowHeight: string;//pxWindowHeight
} }
// 2. 使用 withDefaults 定义默认值
const props = withDefaults(defineProps<definePropsType>(), {});
const emit = defineEmits<{
(eventName: "update:modelValue", value: string): void
(eventName: "update:statusHeight", value: string): void
(eventName: "update:pxScreenHeight", value: string): void
(eventName: "update:pxWindowHeight", value: string): void
(eventName: "homeLeft",): void
(eventName: "homeRight",): void
}>();
const {modelValue, statusHeight, pxWindowHeight, pxScreenHeight} = useVModels(props, emit); // 这里是将整个全包在里面了
const info_window = wx.getWindowInfo();
const pix = 750 / info_window.windowWidth;
const wifi_height高度 = computed(() => {
return wx.getWindowInfo().statusBarHeight * pix;
});
const menuButton对象 = wx.getMenuButtonBoundingClientRect();
const statusTop高度差 = menuButton对象.top * pix - wifi_height高度.value;
const wifi_height高度_rpx = computed(() => {
return wifi_height高度.value + "rpx";
});
const statusTop高度差_rpx = computed(() => {
if (statusTop高度差 < 0) {
return 0 + "rpx";
}
if (statusTop高度差 > 0) {
return statusTop高度差 + "rpx";
}
});
const menu胶囊的高度 = computed(() => {
if (statusTop高度差 < 0) {
// return (menuButton对象.height * pix + statusTop高度差);
return (menuButton对象.height * pix + statusTop高度差 * 2);
} else {
return (menuButton对象.height * pix);
}
});
const statusHeight状态栏高度 = menu胶囊的高度.value + "rpx";
const 整个高度 = computed(() => {
if (statusTop高度差 < 0) {
return wifi_height高度.value + menu胶囊的高度.value;
} else {
return wifi_height高度.value + menu胶囊的高度.value + statusTop高度差 * 2;
}
});
const 整个高度_rpx = 整个高度.value + "rpx";
statusHeight.value = 整个高度_rpx;
const props = withDefaults(defineProps<definePropsType>(), { if (modelValue.value.navIsShow === "none") {
zIndex: () => (100), statusHeight.value = "0rpx";
});
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; if (modelValue.value.navIsShow === "default") {
}); statusHeight.value = 整个高度_rpx;
// 默认的一些宽度
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) { const lef左侧的距离 = 750 - menuButton对象.right * pix + "rpx";
return meun.height + Math.abs(meun.top - info_window.statusBarHeight) * 2; const menu胶囊宽度 = menuButton对象.width * pix + "rpx";
} const content宽度 = 750 - (750 - menuButton对象.right * pix) * 2 - (menuButton对象.width * pix) * 2 + "rpx";
return meun.height + (meun.top - info_window.statusBarHeight) * 2; const window屏幕可用高度 = computed(() => {
}); if (info_window.screenHeight === info_window.windowHeight) {
let nav_px_height = computed(() => { return (info_window.screenHeight - (info_window.screenHeight - info_window.safeArea.bottom)) * pix;
return navHeight.value + "px"; } else {
}); return info_window.windowHeight * pix;
// 计算可视区域的高度
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);
} }
}); });
pxScreenHeight.value = info_window.screenHeight * pix + "rpx";
pxWindowHeight.value = window屏幕可用高度.value + "rpx";
</script> </script>
src/pageTabBar/Home/Home.vue
+18 -14
View File
@@ -107,20 +107,23 @@
} }
} }
.grit-content {
height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
box-sizing: border-box;
.scrollTopHeigh { .scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/ /*在滚动区域内的, 可以自定义的高度*/
box-sizing: border-box; box-sizing: border-box;
height: $defaultTopHeight; //background-color: rgba(255, 255, 255, 0.05);
background-color: rgba(255, 255, 255, 0.05);
} }
.scrollViewHeigh { .scrollViewHeigh {
/*滚动页面区域范围*/ /*滚动页面区域范围*/
box-sizing: border-box; box-sizing: border-box;
font-size: 1rem; font-size: 1rem;
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
overflow: hidden; overflow: hidden;
:deep() { :deep() {
@@ -129,20 +132,16 @@
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%); 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 { .scrollBottomHeigh {
box-sizing: border-box; box-sizing: border-box;
height: $xiaoBottomHeigh; height: 1px;
@include line-color(); @include line-color();
} }
.fixed-is-show {
transition: opacity 0.3s ease, transform 0.3s ease;
} }
} }
</style> </style>
<template> <template>
@@ -150,9 +149,10 @@
<wd-config-provider :theme="theme"> <wd-config-provider :theme="theme">
<view class="root-container"> <view class="root-container">
<view class="status-wifi-nav"> <view class="status-wifi-nav">
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight" <ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight" v-model:pxWindowHeight="pxWindowHeight"
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft" v-model:statusHeight="statusHeight"
:modelValue="modelValue" @homeLeft="homeLeft"
@homeRight="homeRight"> @homeRight="homeRight">
<template v-slot:default> <template v-slot:default>
<view class="default-view-slot" @click="defaultSearchChange"> <view class="default-view-slot" @click="defaultSearchChange">
@@ -166,8 +166,9 @@
</view> </view>
</template> </template>
</ChildComScroll> </ChildComScroll>
</view> </view>
<!--分隔线,上面的是子组件--> <view class="grit-content">
<view class="scrollTopHeigh"><!--预留的空间高度--></view> <view class="scrollTopHeigh"><!--预留的空间高度--></view>
<!-- 滚动区域开始--> <!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false" <scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
@@ -183,6 +184,9 @@
</scroll-view> </scroll-view>
<!--滚动区域结束--> <!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域--></view> <view class="scrollBottomHeigh"><!--底部预留区域--></view>
</view>
<!--分隔线,上面的是子组件-->
<wd-toast selector="default-toast"/> <wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/> <wd-message-box selector="default-message-box"/>
</view> </view>
src/pageTabBar/Me/Me.vue
+53 -14
View File
@@ -91,6 +91,39 @@
} }
} }
.grit-content {
height: calc(v-bind(pxWindowHeight) - 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();
}
}
.scrollTopHeigh { .scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/ /*在滚动区域内的, 可以自定义的高度*/
@@ -154,23 +187,26 @@
<wd-config-provider :theme="theme"> <wd-config-provider :theme="theme">
<view class="root-container"> <view class="root-container">
<view class="status-wifi-nav"> <view class="status-wifi-nav">
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight" <ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight" v-model:pxWindowHeight="pxWindowHeight"
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft" v-model:statusHeight="statusHeight"
:modelValue="modelValue" @homeLeft="homeLeft"
@homeRight="homeRight"> @homeRight="homeRight">
<template v-slot:default> <!-- <template v-slot:default>-->
<view class="default-view-slot" @click="defaultSearchChange"> <!-- <view class="default-view-slot" @click="defaultSearchChange">-->
<view class="default-view-slot-left"></view> <!-- <view class="default-view-slot-left"></view>-->
<view class="default-view-slot-right"> <!-- <view class="default-view-slot-right">-->
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill" <!-- <image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"-->
src="https://hudie.xiao.band/search.png" webp/> <!-- src="https://hudie.xiao.band/search.png" webp/>-->
<view class="default-view-slot-right-text">搜索</view> <!-- <view class="default-view-slot-right-text">搜索</view>-->
</view> <!-- </view>-->
<view class="line-widht-number" style="width: 30rpx"></view> <!-- <view class="line-widht-number" style="width: 30rpx"></view>-->
</view> <!-- </view>-->
</template> <!-- </template>-->
</ChildComScroll> </ChildComScroll>
</view> </view>
<view class="grit-content">
<!--分隔线,上面的是子组件--> <!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度--> <view class="scrollTopHeigh"><!--预留的空间高度-->
<view class="line-widht-number" style="height: 20rpx"></view> <view class="line-widht-number" style="height: 20rpx"></view>
@@ -188,6 +224,9 @@
<view class="scrollBottomHeigh"><!--底部预留区域--> <view class="scrollBottomHeigh"><!--底部预留区域-->
</view> </view>
</view> </view>
</view>
</wd-config-provider> </wd-config-provider>
</view> </view>
</template> </template>
src/pages/index.vue
+18 -3
View File
@@ -159,8 +159,8 @@
内容 内容
<view class=""> <view class="">
<wd-button type="primary" icon="phone" :block="true" <wd-button type="primary" icon="phone" :block="true"
@click="buttonClick" custom-class="custom-shadow"> @click="小程序发起支付" custom-class="custom-shadow">
信息按钮 小程序发起支付
</wd-button> </wd-button>
</view> </view>
</scroll-view> </scroll-view>
@@ -177,12 +177,13 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import ChildComScroll from "@/components/ChildComScroll.vue"; import ChildComScroll from "@/components/ChildComScroll.vue";
import type {GlobelsChildPropsType} from "@/types/通用类型"; import type {ApiAxiosResponse, GlobelsChildPropsType} from "@/types/通用类型";
import {onTabItemTap} from "@dcloudio/uni-app"; import {onTabItemTap} from "@dcloudio/uni-app";
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore"; import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
import {useMessage, useToast} from "wot-design-uni"; import {useMessage, useToast} from "wot-design-uni";
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types"; import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
import {ref} from "vue"; import {ref} from "vue";
import {useRequest} from "@uni-helper/uni-use";
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用 defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
let toast = useToast("default-toast"); let toast = useToast("default-toast");
@@ -232,5 +233,19 @@
await wx.vibrateShort({type: "heavy"});//medium heavy light await wx.vibrateShort({type: "heavy"});//medium heavy light
console.log("============="); console.log("=============");
}); });
const 小程序发起支付 = async (): Promise<void> => {
try {
let data = await useRequest<ApiAxiosResponse<Array<string>, WechatMiniprogram.RequestPaymentOption>>(
"https://xiao.sixgou.com/demopay/jsapi/", {
method: "POST",
data: {self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,}
});
await wx.requestPayment({...data.data.value!.resData.dictData});
} catch (e) {
console.log(e, "❌❌❌❌❌❌❌❌❌❌捕获支付错误");
toast.error({msg: "支付取消", position: "middle"});
}
};
</script> </script>
src/subPackages/homeSubPages/商品详情页面/goods-com-pay-card.vue
+1 -1
View File
@@ -730,7 +730,7 @@
async function 打开支付弹窗(): Promise<void> { async function 打开支付弹窗(): Promise<void> {
showRules.value = true; showRules.value = true;
await wx.vibrateShort({type: "medium"});//medium heavy light await wx.vibrateShort({type: "medium"}); //medium heavy light
} }
async function 关闭弹框(): Promise<void> { async function 关闭弹框(): Promise<void> {
src/subPackages/homeSubPages/商品详情页面/商品详情页面.vue
+11
View File
@@ -92,6 +92,12 @@
} }
} }
.grit-content {
height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
box-sizing: border-box;
.scrollTopHeigh { .scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/ /*在滚动区域内的, 可以自定义的高度*/
@@ -123,6 +129,9 @@
height: $xiaoBottomHeigh; height: $xiaoBottomHeigh;
//@include line-color(); //@include line-color();
} }
}
} }
</style> </style>
<template> <template>
@@ -147,6 +156,7 @@
</template> </template>
</ChildComScroll> </ChildComScroll>
</view> </view>
<view class="grit-content">
<!--分隔线,上面的是子组件--> <!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度--></view> <view class="scrollTopHeigh"><!--预留的空间高度--></view>
<!-- 滚动区域开始--> <!-- 滚动区域开始-->
@@ -168,6 +178,7 @@
</view> </view>
<wd-toast selector="default-toast"/> <wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/> <wd-message-box selector="default-message-box"/>
</view>
</view> </view>
</wd-config-provider> </wd-config-provider>
src/subPackages/homeSubPages/商城页面目录/PageShangCheng.vue
+16 -15
View File
@@ -91,7 +91,7 @@
.grit-content { .grit-content {
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight)); height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto; grid-auto-rows: auto 1fr auto;
@@ -329,21 +329,22 @@
<wd-config-provider :theme="theme"> <wd-config-provider :theme="theme">
<view class="root-container"> <view class="root-container">
<view class="status-wifi-nav"> <view class="status-wifi-nav">
<ChildComScroll v-model:meunHeight="meunHeight" v-model:pxScreenHeight="pxScreenHeight" <ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
v-model:pxScrollHeight="pxScrollHeight" v-model:pxWindowHeight="pxWindowHeight" v-model:pxWindowHeight="pxWindowHeight"
v-model:statusHeight="statusHeight" :modelValue="modelValue" @homeLeft="homeLeft" v-model:statusHeight="statusHeight"
:modelValue="modelValue" @homeLeft="homeLeft"
@homeRight="homeRight"> @homeRight="homeRight">
<template v-slot:default> <!-- <template v-slot:default>-->
<view class="default-view-slot" @click="defaultSearchChange"> <!-- <view class="default-view-slot" @click="defaultSearchChange">-->
<view class="default-view-slot-left"></view> <!-- <view class="default-view-slot-left"></view>-->
<view class="default-view-slot-right"> <!-- <view class="default-view-slot-right">-->
<image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill" <!-- <image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"-->
src="https://hudie.xiao.band/search.png" webp/> <!-- src="https://hudie.xiao.band/search.png" webp/>-->
<view class="default-view-slot-right-text">搜索</view> <!-- <view class="default-view-slot-right-text">搜索</view>-->
</view> <!-- </view>-->
<view class="line-widht-number" style="width: 30rpx"></view> <!-- <view class="line-widht-number" style="width: 30rpx"></view>-->
</view> <!-- </view>-->
</template> <!-- </template>-->
</ChildComScroll> </ChildComScroll>
</view> </view>
<!--分隔线,上面的是子组件--> <!--分隔线,上面的是子组件-->
src/subPackages/homeSubPages/物流追踪页面/物流追踪页面.vue
+25 -5
View File
@@ -138,6 +138,12 @@
} }
} }
.grit-content {
height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
box-sizing: border-box;
.scrollTopHeigh { .scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/ /*在滚动区域内的, 可以自定义的高度*/
@@ -561,6 +567,10 @@
height: $xiaoBottomHeigh; height: $xiaoBottomHeigh;
@include line-color(); @include line-color();
} }
}
} }
</style> </style>
<template> <template>
@@ -585,7 +595,7 @@
</template> </template>
</ChildComScroll> </ChildComScroll>
</view> </view>
<!--分隔线,上面的是子组件--> <view class="grit-content">
<view class="scrollTopHeigh"><!--预留的空间高度--></view> <view class="scrollTopHeigh"><!--预留的空间高度--></view>
<!-- 滚动区域开始--> <!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false" <scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
@@ -660,24 +670,31 @@
<!-- 物流追踪标题 --> <!-- 物流追踪标题 -->
<view class="tracking-header"> <view class="tracking-header">
<text class="tracking-title">物流追踪</text> <text class="tracking-title">物流追踪</text>
<text class="tracking-count">共 {{ xiaoMain.emsOrder订单?.order物流数据?.path_item_num }} <text class="tracking-count">共 {{
xiaoMain.emsOrder订单?.order物流数据?.path_item_num
}}
条记录 条记录
</text> </text>
</view> </view>
<!-- 物流时间轴 --> <!-- 物流时间轴 -->
<view class="timeline"> <view class="timeline">
<view class="timeline-item" v-for="(item, index) in 物流数据?.path_item_list" :key="index" <view class="timeline-item" v-for="(item, index) in 物流数据?.path_item_list"
:key="index"
:class="{ 'is-latest': index === 0 }"> :class="{ 'is-latest': index === 0 }">
<!-- 左侧时间轴 --> <!-- 左侧时间轴 -->
<view class="timeline-left"> <view class="timeline-left">
<view class="dot-wrap"> <view class="dot-wrap">
<view class="dot" <view class="dot"
:class="{ 'dot-waiting': index === 0 }"></view> :class="{ 'dot-waiting': index === 0 }"></view>
<view class="line" v-if="index !== 物流数据?.path_item_list.length! - 1"></view> <view class="line"
v-if="index !== 物流数据?.path_item_list.length! - 1"></view>
</view> </view>
<view class="time">{{ dayjs.unix(item.action_time).format("MM/DD") }}</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 class="time-hour">{{
dayjs.unix(item.action_time).format("HH:mm")
}}
</view>
</view> </view>
<!-- 右侧内容 --> <!-- 右侧内容 -->
@@ -711,6 +728,9 @@
<wd-toast selector="default-toast"/> <wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/> <wd-message-box selector="default-message-box"/>
</view> </view>
<!--分隔线,上面的是子组件-->
</view>
</wd-config-provider> </wd-config-provider>
</view> </view>
</template> </template>
src/subPackages/homeSubPages/用户积分页面/用户积分页面.vue
+1 -1
View File
@@ -91,7 +91,7 @@
.grit-content { .grit-content {
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight)); height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto; grid-auto-rows: auto 1fr auto;
src/subPackages/homeSubPages/用户配送地址页面/用户配送地址页面.vue
+10 -17
View File
@@ -3,21 +3,6 @@
$defaultTopHeight: 1px; // 滚动区域外 可以预留的高度 $defaultTopHeight: 1px; // 滚动区域外 可以预留的高度
$xiaoBottomHeigh: 100rpx; // 滚动区域外,可以预留的高度 $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 { @mixin line-color {
@keyframes gradientFlow { @keyframes gradientFlow {
@@ -115,6 +100,13 @@
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
} }
.grit-content {
height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
box-sizing: border-box;
}
.scrollViewHeigh { .scrollViewHeigh {
/*滚动页面区域范围*/ /*滚动页面区域范围*/
@@ -135,10 +127,8 @@
.scrollBottomHeigh { .scrollBottomHeigh {
box-sizing: border-box; box-sizing: border-box;
height: $xiaoBottomHeigh;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
//@include line-color();
} }
} }
</style> </style>
@@ -164,6 +154,7 @@
</template> </template>
</ChildComScroll> </ChildComScroll>
</view> </view>
<view class="grit-content">
<!--分隔线,上面的是子组件--> <!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度--></view> <view class="scrollTopHeigh"><!--预留的空间高度--></view>
<!-- 滚动区域开始--> <!-- 滚动区域开始-->
@@ -182,6 +173,8 @@
<wd-toast selector="default-toast"/> <wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/> <wd-message-box selector="default-message-box"/>
</view> </view>
</view>
</wd-config-provider> </wd-config-provider>
</view> </view>
</template> </template>
src/subPackages/homeSubPages/订单数据页面/订单数据页面.vue
+12
View File
@@ -105,6 +105,12 @@
} }
} }
.grit-content {
height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
box-sizing: border-box;
.scrollTopHeigh { .scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/ /*在滚动区域内的, 可以自定义的高度*/
@@ -152,6 +158,9 @@
height: $xiaoBottomHeigh; height: $xiaoBottomHeigh;
@include line-color(); @include line-color();
} }
}
} }
</style> </style>
<template> <template>
@@ -176,6 +185,7 @@
</template> </template>
</ChildComScroll> </ChildComScroll>
</view> </view>
<view class="grit-content">
<!--分隔线,上面的是子组件--> <!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度--> <view class="scrollTopHeigh"><!--预留的空间高度-->
<wd-tabbar v-model="tabbar" custom-class="custom-class-tabbar" shape="round" <wd-tabbar v-model="tabbar" custom-class="custom-class-tabbar" shape="round"
@@ -220,6 +230,8 @@
<wd-toast selector="default-toast"/> <wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/> <wd-message-box selector="default-message-box"/>
</view> </view>
</view>
</wd-config-provider> </wd-config-provider>
</view> </view>
</template> </template>