six_uniapp_app/src/components/tong-yong-com-express-delivery.vue

<style scoped lang="scss">
    .root-demo {
        width: 100%;
        height: 88rpx;
        box-sizing: border-box;
        padding: 0 36rpx;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 48rpx;
        justify-items: center;
        align-content: center;
        align-items: center;
        border: red solid 1px;

        .items-1 {
            display: flex;
            align-items: center;


            .items-text {
                //width: 112rpx;
                height: 40rpx;
                font-weight: 400;
                font-size: 28rpx;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
            }

            .items-image {
                height: 44rpx;
                width: 44rpx;
                display: flex;
                justify-content: center;
                align-items: center;

                border-radius: 50%;

                &.theme-white {
                    border: #6e6d6d solid 1px; // 主题是亮色的时候
                }

                &.theme-dark {
                    border: #b9b9b9 solid 1px; // 主题是暗色的时候
                }

                &.select-statu {
                    //border: #b9b9b9 solid 1px;
                    border-radius: 0;
                }

                transition: all 1s;

                :deep(.custom-class-img) {
                    height: 44rpx;
                    width: 44rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .custom-image {
                        width: 100%;
                        height: 100%;
                    }
                }
            }


        }
    }
</style>

<template>
    <view class=root-demo>
        <view class="items-1" @click="选择配送方式事件('全国物流')">
            <view class="items-image"
                  :class="{'theme-white':theme==='light','theme-dark':theme==='dark','select-statu':选中时的状态==='全国物流'}">
                <wd-img custom-class="custom-class-img" v-if="选中时的状态==='全国物流'" custom-image="custom-image"
                        src="/static/正确.svg">
                    <template #error>
                        <view class="error-wrap">加载失败</view>
                    </template>
                    <template #loading>
                        <view class="loading-wrap">
                            <wd-loading/>
                        </view>
                    </template>
                </wd-img>

            </view>
            <view class="line-widht-number" style="width: 10rpx"></view>
            <view class="items-text">全国物流</view>
        </view>
        <view class="items-1" @click="选择配送方式事件('跑腿配送')">
            <view class="items-image"
                  :class="{'theme-white':theme==='light','theme-dark':theme==='dark','select-statu':选中时的状态==='跑腿配送'}">
                <wd-img custom-class="custom-class-img" v-if="选中时的状态==='跑腿配送'" custom-image="custom-image"
                        src="/static/正确.svg">
                    <template #error>
                        <view class="error-wrap">加载失败</view>
                    </template>
                    <template #loading>
                        <view class="loading-wrap">
                            <wd-loading/>
                        </view>
                    </template>
                </wd-img>
            </view>
            <view class="line-widht-number" style="width: 10rpx"></view>
            <view class="items-text">跑腿配送</view>
        </view>

        <view class="items-1" @click="选择配送方式事件('门店核销')">

            <view class="items-image"
                  :class="{'theme-white':theme==='light','theme-dark':theme==='dark','select-statu':选中时的状态==='门店核销'}">
                <wd-img custom-class="custom-class-img" v-if="选中时的状态==='门店核销'" custom-image="custom-image"
                        src="/static/正确.svg">
                    <template #error>
                        <view class="error-wrap">加载失败</view>
                    </template>
                    <template #loading>
                        <view class="loading-wrap">
                            <wd-loading/>
                        </view>
                    </template>
                </wd-img>

            </view>
            <view class="line-widht-number" style="width: 10rpx"></view>
            <view class="items-text">门店核销</view>

        </view>
    </view>
</template>

<script lang="ts" setup>
    // 页面功能注释区域
    import {ref} from "vue";
    import {useVModels} from "@vueuse/core";

    interface definePropsType {
        modelValue: number;// 对象类型的 prop
    }

    type 选中的类型 = "全国物流" | "跑腿配送" | "门店核销"
    const 选中时的状态 = ref<选中的类型>("全国物流");
    // 2. 使用 withDefaults 定义默认值
    const props = withDefaults(defineProps<definePropsType>(), {});
    const emit = defineEmits<{
        (eventName: "update:modelValue", value: string): void
    }>();

    const {modelValue,} = useVModels(props, emit);
    let theme = ref(uni.getAppBaseInfo().theme); // 返回值为 dark or linght
    // defineOptions({options: {styleIsolation: "shared",}, name: "ExpressDelivery"}); // 组件使用
    defineOptions({options: {styleIsolation: "shared",}, name: "tong-yong-com-express-delivery"}); // 组件使用
    const buttonClick = async (): Promise<void> => {
        console.log("子组件触发的事件");
    };
    const 选择配送方式事件 = async (item: "全国物流" | "跑腿配送" | "门店核销"): Promise<void> => {
        选中时的状态.value = item;
        wx.vibrateShort({type: "light"});
    };
</script>