six_uniapp_app/src/subPackages/homeSubPages/商品详情页面/商品详情页面.vue

<style lang="scss" scoped>
    //@import "@/assets/demo.scss";
    $defaultTopHeight: 1px; // 滚动区域外 可以预留的高度
    $xiaoBottomHeigh: 80rpx; // 滚动区域外,可以预留的高度
    /* 浅色模式 */

    @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;
                    }

                }
            }
        }

        .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;
                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();
            }

        }

    }
</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: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">
                    <!--分隔线,上面的是子组件-->
                    <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>
                    </view>
                    <wd-toast selector="default-toast"/>
                    <wd-message-box selector="default-message-box"/>
                </view>

            </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 GoodsComSwiperImages from "@/subPackages/homeSubPages/商品详情页面/goods-com-swiper-images.vue";
    import GoodsComParams from "@/subPackages/homeSubPages/商品详情页面/goods-com-params.vue";
    import GoodsComShare from "@/subPackages/homeSubPages/商品详情页面/goods-com-share.vue";
    import GoodsComProduct_sales_specifications
        from "@/subPackages/homeSubPages/商品详情页面/goods-com-product_sales_specifications.vue";
    import GoodsComServiceParams from "@/subPackages/homeSubPages/商品详情页面/goods-com-service-params.vue";
    import GoodsComListImages from "@/subPackages/homeSubPages/商品详情页面/goods-com-list-images.vue";
    import GoodsComPayCard from "@/subPackages/homeSubPages/商品详情页面/goods-com-pay-card.vue";
    import {usePage, useRequest} from "@uni-helper/uni-use";
    import {
        分享_HOME页面分享到朋友圈, 分享_商品详情页面分享到朋友圈,
        分享_商品详情页面群或者好友, 积分_统计查询
    } from "@/hooks/接口API";
    import type {ConfigProviderTheme} from "wot-design-uni/components/wd-config-provider/types";
    import {whenever} from "@vueuse/shared";

    let xiaoMain = useMainXiaoStore();
    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();//插槽时要用的 高度
    let info_scroll_height = ref(0);

    const modelValue: GlobelsChildPropsType = {
        isShowLeft: {
            showCom: "icon",
            img: {imgLeft: "https://oss.xiao.band/icon/left.png"},
            iconTextLeft: {classPrefix: "xiaozizi", name: "arrow-left-circle-line", size: 24},
        },
        isShowRight: {
            showCom: "icon",
            img: {imgRight: "https://oss.xiao.band/icon/%E9%99%8D%E8%90%BD%E4%BC%9E_parachute.png"},
            iconTextRight: {classPrefix: "xiaozizi", name: "shangpinxiangqing", size: 19},
        },
        title_text: "六果泡泡", navIsShow: "default",
    };
    const homeLeft = () => {
        wx.vibrateShort({type: "heavy"});
        uni.navigateBack({delta: 1}).then().catch(() => wx.reLaunch({url: "/pageTabBar/Home/Home"}));
    };

    const homeRight = () => {
        wx.vibrateShort({type: "heavy"});
        console.log("右键按键");
    };
    let defaultSearchChange = async () => {
        console.log("搜索发起");
    };
    onTabItemTap(() => {
        console.log("🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 🍊 🍎 🍏 ");
        wx.vibrateShort({type: "heavy"});//medium heavy light
    });

    onLoad(() => {

        let page_path = usePage().value.route;
        uni.showShareMenu({
            withShareTicket: true,
            menus: ["shareAppMessage", "shareTimeline"], // 关键！明确启用哪些功能 "shareTimeline"
        });

        onShareAppMessage(() => {
            return {
                title: "群分享主题",
                path: page_path,
                desc: "描述",
                imageUrl: "/static/vite.png",
                promise: new Promise<Page.CustomShareContent>(async (resolve) => {
                    try {
                        let dataPostData = await useRequest<ApiAxiosResponse<Array<string>, Page.CustomShareContent>>(分享_商品详情页面群或者好友, {
                            method: "POST", data: {
                                self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
                                page_path: page_path, idKey: xiaoMain.six_good?.idKey
                            }
                        });
                        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>>(分享_商品详情页面分享到朋友圈, {
                            method: "POST", data: {
                                self_mini_openid: xiaoMain.mini_openid, self_mini_unionid: xiaoMain.mini_unionid,
                                page_path: page_path, idKey: xiaoMain.six_good?.idKey
                            }
                        });
                        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};
        });
    });
    whenever(() => xiaoMain.mini_unionid, () => {
        // 首次进入页面, 监听一下当前用户的openid, 当值发生变化的时候,就需要去请求后端数据接口,同时拿到 当前用户的积分统计的数据
        console.log("🍎 🍏 🍎 🍏 🍎 🍏 🍎 🍏 demo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_valuedemo_value ",);
        xiaoMain.query_积分统计查询(积分_统计查询, <string>xiaoMain.mini_openid, <string>xiaoMain.mini_unionid);
    }, {immediate: true});
</script>