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
+137 -303
View File
@@ -1,138 +1,87 @@
<style lang="scss" scoped>
.phoneCom {
<style scoped lang="scss">
.child {
height: v-bind(整个高度_rpx);
position: fixed;
width: 750rpx;
top: 0;
left: 0;
background-color: transparent;
z-index: v-bind(zIndex);
z-index: 100;
}
.phone-wifi {
height: v-bind(wifi_px);
.wifi-status {
height: v-bind(wifi_height高度_rpx);
}
.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状态栏高度);
}
.phone-nav {
height: v-bind(nav_px_height);
box-sizing: border-box;
display: flex;
.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;
.meun-height {
height: v-bind(meun_px_height);
width: 750rpx;
.status-status-menu-left {
height: v-bind(statusHeight状态栏高度);
display: flex;
justify-content: center;
align-items: center;
.uniui-left {
width: v-bind(rpxLeftWidth);
display: flex;
height: v-bind(meun_px_height);;
.meun-widht-rightimage_item {
height: calc(v-bind(statusHeight状态栏高度) * 0.75);
width: calc(v-bind(statusHeight状态栏高度) * 0.75);
}
}
.meun-widht-left {
width: v-bind(divMeunWidht);
height: v-bind(meun_px_height);
display: flex;
justify-content: center;
align-items: center;
position: relative;
.status-status-menu-right {
display: flex;
height: v-bind(statusHeight状态栏高度);
justify-content: center;
align-items: center;
:deep(.customClass-icon) {
height: v-bind(meun_px_height);
text-align: center;
line-height: v-bind(meun_px_height);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
}
.meun-widht-rightimage_item {
height: v-bind(imgWidthHeight);
width: v-bind(imgWidthHeight);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
}
}
.meun-widht-middle {
width: v-bind(divMeunWidhtMiddle);
background-color: rgba(255, 255, 255, 0.1);
align-self: center;
height: calc(v-bind(flexMeunHeight) * 0.8);
&.light-background {
background-color: #555555;
height: calc(v-bind(flexMeunHeight) * 0.8);
align-self: center;
width: v-bind(divMeunWidhtMiddle);
}
}
.meun-widht-right {
width: v-bind(divMeunWidht);
height: v-bind(meun_px_height);;
position: relative;
display: flex;
justify-content: center;
align-items: center;
:deep(.customClass-icon) {
height: v-bind(meun_px_height);
text-align: center;
line-height: v-bind(meun_px_height);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
}
.meun-widht-rightimage_item {
height: v-bind(imgWidthHeight);
width: v-bind(imgWidthHeight);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 关键：自身偏移回中心 */
}
}
.FlexTitleWidth {
width: v-bind(rpxFlexTitleWidth);
text-align: center;
display: flex;
align-items: center;
height: v-bind(meun_px_height);
.flex-title-text {
width: v-bind(rpxFlexTitleWidth);
height: v-bind(meun_px_height);
line-height: v-bind(meun_px_height);
}
.flex-title-slot {
width: v-bind(rpxFlexTitleWidth);
height: v-bind(meun_px_height);
}
.meun-widht-rightimage_item {
height: calc(v-bind(statusHeight状态栏高度) * 0.75);
width: calc(v-bind(statusHeight状态栏高度) * 0.75);
}
}
}
}
.status-status-content {
height: v-bind(statusHeight状态栏高度);
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
<template>
<view class="phoneCom">
<view class="phone-wifi">
<view class="status-wifi"></view>
</view>
<view v-if="navShow" class="phone-nav">
<view class="meun-height">
<view class="uniui-left"></view>
<view class="meun-widht-left" @click="emit('homeLeft')">
<view class="child">
<view class="wifi-status"></view>
<view class="status-top"></view>
<view class="status-status">
<view class="status-status-left"></view>
<view class="status-status-menu">
<view class="status-status-menu-left" @click="emit('homeLeft')">
<wd-icon v-if="modelValue?.isShowLeft.showCom==='icon'"
:classPrefix="modelValue?.isShowLeft.iconTextLeft.classPrefix"
:name="modelValue?.isShowLeft.iconTextLeft.name"
@@ -143,9 +92,7 @@
class="meun-widht-rightimage_item"
mode="scaleToFill" webp></image>
</view>
<view class="meun-widht-middle" :class="{'light-background':theme==='light'}"></view>
<view class="meun-widht-right" @click="emit('homeRight')">
<!-- <wd-icon custom-class="customClass-icon" name="thin-arrow-left" size="18px"></wd-icon>-->
<view class="status-status-menu-right" @click="emit('homeRight')">
<wd-icon v-if="modelValue?.isShowRight.showCom==='icon'"
:classPrefix="modelValue?.isShowRight.iconTextRight.classPrefix"
:name="modelValue?.isShowRight.iconTextRight.name"
@@ -156,201 +103,88 @@
class="meun-widht-rightimage_item"
mode="scaleToFill" webp></image>
</view>
<view class="FlexTitleWidth">
<view v-if="titleViewShow" class="flex-title-text">{{ modelValue?.title_text }}</view>
<view v-if="slotViewShow" class="flex-title-slot">
<slot name="default"></slot>
</view>
</view>
</view>
<view class="status-status-content">{{ modelValue.title_text }}</view>
</view>
<view class="status-bottom"></view>
</view>
</template>
<script lang="ts" setup>
import {computed, ref, watchEffect} from "vue";
import {onShow} from "@dcloudio/uni-app";
<script setup lang="ts">
import {useVModels} from "@vueuse/core";
import {computed} from "vue";
import type {GlobelsChildPropsType} from "@/types/通用类型";
let theme = ref(uni.getAppBaseInfo().theme); // 返回值为 dark or linght
defineOptions({
options: {
styleIsolation: "shared",
virtualHost: true,
},
});
const emit = defineEmits<{
(eventName: "update:pxWindowHeight", value: string): void
(eventName: "update:pxScrollHeight", value: string): void
(eventName: "update:pxScreenHeight", value: string): void
(eventName: "update:pxWifiNavHeight", value: string): void
(eventName: "update:statusHeight", value: string): void
(eventName: "update:meunHeight", value: string): void
(eventName: "homeRight"): void
(eventName: "homeLeft"): void
}>();
//
interface definePropsType {
modelValue?: GlobelsChildPropsType, //跟v-model=值没有关系
zIndex?: number
modelValue: GlobelsChildPropsType;// 对象类型的 prop
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>(), {
zIndex: () => (100),
});
const info_window = uni.getWindowInfo();
let pxToRpxScale = 750 / info_window.windowWidth;
let meun = uni.getMenuButtonBoundingClientRect();
let meun_px_height = computed(() => {
return meun.height - 2 + "px";
});
// 计算当前 wifi的高度
let wifiHeing = computed(() => {
// 当前wifi的高度 也是分为两种情况下 为负数的时候 小于0 的时候我们就需要减少 wifi的高度,这样才能正确留空
if (meun.top - info_window.statusBarHeight < 0) {
let num = meun.top - info_window.statusBarHeight;
return info_window.statusBarHeight - Math.abs(num) * 2;
}
return info_window.statusBarHeight;
});
// 默认的一些宽度
let rpxLeftWidth = computed(() => {
return (info_window.windowWidth - meun.right) * pxToRpxScale + "rpx";
});
let pxMeunHeight = computed(() => {
return meun.height + "px";
});
let rpxFlexTitleWidth = computed(() => {
return (meun.left - meun.width - (info_window.windowWidth - meun.right)) * pxToRpxScale + "rpx";
});
let divMeunWidht = computed(() => {
// 胶囊的一半宽度
const halfWidth = Math.ceil(meun.width / 2) - 1;
return halfWidth * pxToRpxScale + "rpx";
});
let flexMeunHeight = computed(() => {
return Math.ceil(meun.height) * 0.6 + "px";
});
let divMeunWidhtMiddle = computed(() => {
return "1px";
// return 2 * pxToRpxScale + "rpx";
});
let imgWidthHeight = computed(() => {
return Math.ceil(meun.height * 0.7 * pxToRpxScale) + "rpx";
});
let wifi_px = computed(() => {
return wifiHeing.value + "px";
});
// 计算当前导航栏的高度
let navHeight = computed(() => {
// 导航栏高度 = 胶囊高度 + (胶囊顶部距离 - wifi高度)*2
// 这里逻辑也得分二种情况第一情况,减下来值小0 和大于0
if (meun.top - info_window.statusBarHeight > 0) {
return meun.height + (meun.top - info_window.statusBarHeight) * 2;
}
if (meun.top - info_window.statusBarHeight <= 0) {
return meun.height + Math.abs(meun.top - info_window.statusBarHeight) * 2;
}
return meun.height + (meun.top - info_window.statusBarHeight) * 2;
});
let nav_px_height = computed(() => {
return navHeight.value + "px";
});
// 计算可视区域的高度
let windowHeight = computed(() => {
// 可视区高度 = 屏幕高度 - 可视区域的高度 还需要判断 二 种情况, 一种是有tab, 一种是没有tab的情况
// 没有tab栏的情况
if (info_window.screenHeight - info_window.windowHeight === 0) {
if (info_window.safeAreaInsets.bottom > 0) {
// 这是苹果手机的状态(直接返回高度就可以了)
return info_window.screenHeight - info_window.safeAreaInsets.bottom;
}
if (info_window.safeAreaInsets.bottom === 0) {
// 这是没有底部安全栏高度时的(华为手机,苹果5678o)
return info_window.screenHeight - 34;
}
}
if (info_window.screenHeight - info_window.windowHeight > 0) {
return info_window.windowHeight;
}
return info_window.windowHeight;
});
// 实时给出高度
let wifiShow = ref(true);
let navShow = ref(true);
let titleViewShow = ref(true);
let slotViewShow = ref(false);
onShow(() => {
emit("update:meunHeight", pxMeunHeight.value);
});
watchEffect(() => {
emit("update:pxScreenHeight", info_window.screenHeight + "px");
if (props.modelValue?.navIsShow === "default") {
// 此时的导航栏高度 = wifi+nav的高度
let staus = computed(() => {
return (wifiHeing.value + navHeight.value) + "px";
});
let pxScrollHeight = computed(() => {
return windowHeight.value + "px";
});
emit("update:statusHeight", staus.value);
emit("update:pxWindowHeight", staus.value);
emit("update:pxScrollHeight", pxScrollHeight.value);
emit("update:pxWindowHeight", pxScrollHeight.value);
}
if (props.modelValue?.navIsShow === "wifi") {
// 此时的导航栏高度 = wifi+nav的高度
navShow.value = false;
let staus = computed(() => {
return (wifiHeing.value) + "px";
});
let pxScrollHeight = computed(() => {
// 当值为wifi时,则表明,只想显示一个wifi的状态, 不想显示na的状态
return windowHeight.value + "px";
});
emit("update:statusHeight", staus.value);
emit("update:pxWindowHeight", staus.value);
emit("update:pxScrollHeight", pxScrollHeight.value);
emit("update:pxWindowHeight", pxScrollHeight.value);
}
if (props.modelValue?.navIsShow === "none") {
navShow.value = true;
wifiShow.value = false;
// 此时的导航栏高度 = wifi+nav的高度
let staus = computed(() => {
return "0px";
});
let pxScrollHeight = computed(() => {
// 当值为wifi时,则表明,只想显示一个wifi的状态, 不想显示na的状态
return windowHeight.value + "px";
});
emit("update:statusHeight", staus.value);
emit("update:pxWindowHeight", staus.value);
emit("update:pxScrollHeight", pxScrollHeight.value);
emit("update:pxWindowHeight", pxScrollHeight.value);
}
if (props.modelValue?.navIsShow === "slot") {
slotViewShow.value = true;
titleViewShow.value = false;
// 此时的导航栏高度 = wifi+nav的高度
let staus = computed(() => {
return (wifiHeing.value + navHeight.value) + "px";
});
let pxScrollHeight = computed(() => {
// 当值为wifi时,则表明,只想显示一个wifi的状态, 不想显示na的状态
return windowHeight.value + "px";
});
emit("update:statusHeight", staus.value);
emit("update:pxWindowHeight", staus.value);
emit("update:pxScrollHeight", pxScrollHeight.value);
emit("update:pxWindowHeight", pxScrollHeight.value);
if (modelValue.value.navIsShow === "none") {
statusHeight.value = "0rpx";
}
if (modelValue.value.navIsShow === "default") {
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;
}
});
</script>
pxScreenHeight.value = info_window.screenHeight * pix + "rpx";
pxWindowHeight.value = window屏幕可用高度.value + "rpx";
</script>
src/pageTabBar/Home/Home.vue
+48 -44
View File
@@ -107,41 +107,40 @@
}
}
.scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/
.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;
height: $defaultTopHeight;
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;
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
overflow: hidden;
.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();
}
}
.scrollBottomHeigh {
box-sizing: border-box;
height: $xiaoBottomHeigh;
@include line-color();
}
.fixed-is-show {
transition: opacity 0.3s ease, transform 0.3s ease;
}
}
</style>
@@ -150,9 +149,10 @@
<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"
<ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
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">
@@ -166,23 +166,27 @@
</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">
<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>
src/pageTabBar/Me/Me.vue
+67 -28
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 {
/*在滚动区域内的, 可以自定义的高度*/
@@ -154,39 +187,45 @@
<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"
<ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
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>
<!-- <template v-slot:default>-->
<!-- <view class="default-view-slot" @click="defaultSearchChange">-->
<!-- <view class="default-view-slot-left"></view>-->
<!-- <view class="default-view-slot-right">-->
<!-- <image :lazy-load="true" class="title-imgimage_item" mode="scaleToFill"-->
<!-- src="https://hudie.xiao.band/search.png" webp/>-->
<!-- <view class="default-view-slot-right-text">搜索</view>-->
<!-- </view>-->
<!-- <view class="line-widht-number" style="width: 30rpx"></view>-->
<!-- </view>-->
<!-- </template>-->
</ChildComScroll>
</view>
<!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度-->
<view class="line-widht-number" style="height: 20rpx"></view>
</view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<view class="">
<me-com-user-info></me-com-user-info>
<view class="line-widht-number" style="height: 10rpx"></view>
<me-com-user-server></me-com-user-server>
<view class="grit-content">
<!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度-->
<view class="line-widht-number" style="height: 20rpx"></view>
</view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<view class="">
<me-com-user-info></me-com-user-info>
<view class="line-widht-number" style="height: 10rpx"></view>
<me-com-user-server></me-com-user-server>
</view>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域-->
</view>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域-->
</view>
</view>
</wd-config-provider>
</view>
src/pages/index.vue
+18 -3
View File
@@ -159,8 +159,8 @@
内容
<view class="">
<wd-button type="primary" icon="phone" :block="true"
@click="buttonClick" custom-class="custom-shadow">
信息按钮
@click="小程序发起支付" custom-class="custom-shadow">
小程序发起支付
</wd-button>
</view>
</scroll-view>
@@ -177,12 +177,13 @@
</template>
<script lang="ts" setup>
import ChildComScroll from "@/components/ChildComScroll.vue";
import type {GlobelsChildPropsType} from "@/types/通用类型";
import type {ApiAxiosResponse, GlobelsChildPropsType} from "@/types/通用类型";
import {onTabItemTap} from "@dcloudio/uni-app";
import {useMainXiaoStore} from "@/stores/piniaPro/miniChatStore";
import {useMessage, useToast} from "wot-design-uni";
import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
import {ref} from "vue";
import {useRequest} from "@uni-helper/uni-use";
defineOptions({options: {styleIsolation: "shared"}}); // 组件使用
let toast = useToast("default-toast");
@@ -232,5 +233,19 @@
await wx.vibrateShort({type: "heavy"});//medium heavy light
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>
src/subPackages/homeSubPages/商品详情页面/goods-com-pay-card.vue
+1 -1
View File
@@ -730,7 +730,7 @@
async function 打开支付弹窗(): Promise<void> {
showRules.value = true;
await wx.vibrateShort({type: "medium"});//medium heavy light
await wx.vibrateShort({type: "medium"}); //medium heavy light
}
async function 关闭弹框(): Promise<void> {
src/subPackages/homeSubPages/商品详情页面/商品详情页面.vue
+54 -43
View File
@@ -92,37 +92,46 @@
}
}
.scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/
.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;
height: $defaultTopHeight;
background-color: rgba(255, 255, 255, 0.05);
}
.scrollViewHeigh {
/*滚动页面区域范围*/
box-sizing: border-box;
font-size: 1rem;
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
overflow: hidden;
:deep() {
/*button按钮的 阴影样式可以直接使用*/
.custom-shadow {
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}
.scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/
box-sizing: border-box;
height: $defaultTopHeight;
background-color: rgba(255, 255, 255, 0.05);
}
.scrollViewHeigh {
/*滚动页面区域范围*/
box-sizing: border-box;
font-size: 1rem;
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
overflow: hidden;
:deep() {
/*button按钮的 阴影样式可以直接使用*/
.custom-shadow {
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}
}
}
.scrollBottomHeigh {
box-sizing: border-box;
height: $xiaoBottomHeigh;
//@include line-color();
}
}
.scrollBottomHeigh {
box-sizing: border-box;
height: $xiaoBottomHeigh;
//@include line-color();
}
}
</style>
<template>
@@ -147,27 +156,29 @@
</template>
</ChildComScroll>
</view>
<!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<view class="grit-content">
<!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<goods-com-swiper-images></goods-com-swiper-images>
<goods-com-params></goods-com-params>
<goods-com-share></goods-com-share>
<view class="line-widht-number" style="height: 20rpx"></view>
<goods-com-service-params></goods-com-service-params>
<goods-com-product_sales_specifications></goods-com-product_sales_specifications>
<view class="line-widht-number" style="height: 10rpx"></view>
<goods-com-list-images></goods-com-list-images>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域-->
<goods-com-pay-card></goods-com-pay-card>
<goods-com-swiper-images></goods-com-swiper-images>
<goods-com-params></goods-com-params>
<goods-com-share></goods-com-share>
<view class="line-widht-number" style="height: 20rpx"></view>
<goods-com-service-params></goods-com-service-params>
<goods-com-product_sales_specifications></goods-com-product_sales_specifications>
<view class="line-widht-number" style="height: 10rpx"></view>
<goods-com-list-images></goods-com-list-images>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域-->
<goods-com-pay-card></goods-com-pay-card>
</view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view>
</wd-config-provider>
src/subPackages/homeSubPages/商城页面目录/PageShangCheng.vue
+16 -15
View File
@@ -91,7 +91,7 @@
.grit-content {
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight));
height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
@@ -329,21 +329,22 @@
<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"
<ChildComScroll v-model:pxScreenHeight="pxScreenHeight"
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>
<!-- <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>
<!--分隔线,上面的是子组件-->
src/subPackages/homeSubPages/物流追踪页面/物流追踪页面.vue
+496 -476
View File
File diff suppressed because it is too large Load Diff
src/subPackages/homeSubPages/用户积分页面/用户积分页面.vue
+1 -1
View File
@@ -91,7 +91,7 @@
.grit-content {
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight));
height: calc(v-bind(pxWindowHeight) - v-bind(statusHeight));
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto 1fr auto;
src/subPackages/homeSubPages/用户配送地址页面/用户配送地址页面.vue
+25 -32
View File
@@ -3,21 +3,6 @@
$defaultTopHeight: 1px; // 滚动区域外 可以预留的高度
$xiaoBottomHeigh: 100rpx; // 滚动区域外,可以预留的高度
/* 浅色模式 */
//@media (prefers-color-scheme: light) {
// .phone-screen {
// color: white;
// background: #181818;
// }
//}
//
///* 深色模式 */
//@media (prefers-color-scheme: dark) {
// .phone-screen {
// color: white;
// background: #1a1a1a;
// }
//}
@mixin line-color {
@keyframes gradientFlow {
@@ -115,6 +100,13 @@
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 {
/*滚动页面区域范围*/
@@ -135,10 +127,8 @@
.scrollBottomHeigh {
box-sizing: border-box;
height: $xiaoBottomHeigh;
display: flex;
align-items: flex-end;
//@include line-color();
}
}
</style>
@@ -164,23 +154,26 @@
</template>
</ChildComScroll>
</view>
<!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<!-- 页面地址为空时显示的组件-->
<address-com-empty v-if="xiaoMain.addressDataList.length===0"></address-com-empty>
<address-com-list v-if="xiaoMain.addressDataList.length>0"></address-com-list>
<view class="grit-content">
<!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度--></view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<!-- 页面地址为空时显示的组件-->
<address-com-empty v-if="xiaoMain.addressDataList.length===0"></address-com-empty>
<address-com-list v-if="xiaoMain.addressDataList.length>0"></address-com-list>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域-->
<address-com-add-new-address
v-if="xiaoMain.addressDataList.length!==0"></address-com-add-new-address>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域-->
<address-com-add-new-address
v-if="xiaoMain.addressDataList.length!==0"></address-com-add-new-address>
</view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view>
</wd-config-provider>
</view>
src/subPackages/homeSubPages/订单数据页面/订单数据页面.vue
+91 -79
View File
@@ -105,53 +105,62 @@
}
}
.scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/
.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;
height: $defaultTopHeight;
:deep(.custom-class-tabbar) {
//box-shadow:inset 0 3px 1px -2px rgb(0 0 0 / 20%) , 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
//box-shadow: inset 0 2px 1px -2px rgb(0 0 0 / 15%),
//inset 0 2px 2px 0 rgb(0 0 0 / 14%),
//inset 0 1px 5px 0 rgb(0 0 0 / 14%),
//inset 1px 1px 2px rgb(0 0 0 / 14%),
//inset -1px -1px 2px rgb(0 0 0 / 14%);
//box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
box-shadow: /* 上 - 向下凹 */
inset 0 3px 2px -2px rgba(0, 0, 0, 0.3), /* 上 */
inset 0 -3px 2px -2px rgba(0, 0, 0, 0.3), /* 下 */
inset 3px 0 2px -2px rgba(0, 0, 0, 0.3), /* 左 */
inset -3px 0 2px -2px rgba(0, 0, 0, 0.3); /* 右 */
// box-shadow: inset X Y blur spread color
}
}
.scrollTopHeigh {
/*在滚动区域内的, 可以自定义的高度*/
box-sizing: border-box;
height: $defaultTopHeight;
.scrollViewHeigh {
/*滚动页面区域范围*/
box-sizing: border-box;
font-size: 1rem;
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
overflow: hidden;
:deep() {
/*button按钮的 阴影样式可以直接使用*/
.custom-shadow {
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
:deep(.custom-class-tabbar) {
//box-shadow:inset 0 3px 1px -2px rgb(0 0 0 / 20%) , 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
//box-shadow: inset 0 2px 1px -2px rgb(0 0 0 / 15%),
//inset 0 2px 2px 0 rgb(0 0 0 / 14%),
//inset 0 1px 5px 0 rgb(0 0 0 / 14%),
//inset 1px 1px 2px rgb(0 0 0 / 14%),
//inset -1px -1px 2px rgb(0 0 0 / 14%);
//box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
box-shadow: /* 上 - 向下凹 */
inset 0 3px 2px -2px rgba(0, 0, 0, 0.3), /* 上 */
inset 0 -3px 2px -2px rgba(0, 0, 0, 0.3), /* 下 */
inset 3px 0 2px -2px rgba(0, 0, 0, 0.3), /* 左 */
inset -3px 0 2px -2px rgba(0, 0, 0, 0.3); /* 右 */
// box-shadow: inset X Y blur spread color
}
}
.scrollViewHeigh {
/*滚动页面区域范围*/
box-sizing: border-box;
font-size: 1rem;
height: calc(v-bind(pxScrollHeight) - v-bind(statusHeight) - #{$defaultTopHeight} - #{$xiaoBottomHeigh});
overflow: hidden;
:deep() {
/*button按钮的 阴影样式可以直接使用*/
.custom-shadow {
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}
}
}
.scrollBottomHeigh {
box-sizing: border-box;
height: $xiaoBottomHeigh;
@include line-color();
}
}
.scrollBottomHeigh {
box-sizing: border-box;
height: $xiaoBottomHeigh;
@include line-color();
}
}
</style>
<template>
@@ -176,49 +185,52 @@
</template>
</ChildComScroll>
</view>
<!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度-->
<wd-tabbar v-model="tabbar" custom-class="custom-class-tabbar" shape="round"
:bordered="true" activeColor="#f0883a" @change="选中的标签事件">
<wd-tabbar-item title="待揽件" :value="待揽件数量">
<template #icon>
<wd-icon classPrefix="xiaozizi" name="daiqueren" :size="22"
:color="tabbar===0?'#f0883a':''"/>
<view class="grit-content">
<!--分隔线,上面的是子组件-->
<view class="scrollTopHeigh"><!--预留的空间高度-->
<wd-tabbar v-model="tabbar" custom-class="custom-class-tabbar" shape="round"
:bordered="true" activeColor="#f0883a" @change="选中的标签事件">
<wd-tabbar-item title="待揽件" :value="待揽件数量">
<template #icon>
<wd-icon classPrefix="xiaozizi" name="daiqueren" :size="22"
:color="tabbar===0?'#f0883a':''"/>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="待收货" :value="待收货数量">
<template #icon>
<wd-icon classPrefix="xiaozizi" name="peisongzhong1" :size="22"
:color="tabbar===1?'#f0883a':''"/>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="待评价" :value="待评价数量">
<template #icon>
<wd-icon classPrefix="xiaozizi" name="daipingjia1" :size="22"
:color="tabbar===2?'#f0883a':''"/>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="全部订单">
<template #icon>
<wd-icon classPrefix="wd-icon" name="app" :size="22"
:color="tabbar===3?'#f0883a':''"/>
</template>
</wd-tabbar-item>
</wd-tabbar>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="待收货" :value="待收货数量">
<template #icon>
<wd-icon classPrefix="xiaozizi" name="peisongzhong1" :size="22"
:color="tabbar===1?'#f0883a':''"/>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="待评价" :value="待评价数量">
<template #icon>
<wd-icon classPrefix="xiaozizi" name="daipingjia1" :size="22"
:color="tabbar===2?'#f0883a':''"/>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="全部订单">
<template #icon>
<wd-icon classPrefix="wd-icon" name="app" :size="22"
:color="tabbar===3?'#f0883a':''"/>
</template>
</wd-tabbar-item>
</wd-tabbar>
</view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<view class="line-widht-number" style="height: 10rpx"></view>
<order-com-empty v-if="isEmpty===0"></order-com-empty>
<order-com-list-data v-model:modelValue="tabbar" v-if="isEmpty>0"
:order_list_data="order_list_data ?? []"></order-com-list-data>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域--></view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view>
<!-- 滚动区域开始-->
<scroll-view :enableBackToTop="true" :enhanced="true" :scroll-y="true" :showScrollbar="false"
class="scrollViewHeigh">
<view class="line-widht-number" style="height: 10rpx"></view>
<order-com-empty v-if="isEmpty===0"></order-com-empty>
<order-com-list-data v-model:modelValue="tabbar" v-if="isEmpty>0"
:order_list_data="order_list_data ?? []"></order-com-list-data>
</scroll-view>
<!--滚动区域结束-->
<view class="scrollBottomHeigh"><!--底部预留区域--></view>
<wd-toast selector="default-toast"/>
<wd-message-box selector="default-message-box"/>
</view>
</wd-config-provider>
</view>