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