tmui-cli 2.0.0 → 2.0.2

package/data/examples/popover.vue

@@ -0,0 +1,130 @@
+<!--
+  - Copyright (c) 2025. tmzdy by @https://tmui.design
+  -->
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const show = ref(false)
+const dates = ref([])
+</script>
+
+<template>
+	<view>
+		<tm-sheet>
+			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">汽泡菜单 tmPopover</tm-text>
+			<tm-text class="" color="#999999">
+				多达8个位置可选，当显示位置不足时可以自动反转位置。
+			</tm-text>
+		</tm-sheet>
+
+		<tm-sheet class="flex flex-row gap-20 flex-row-center-between">
+			<tm-popover position="bl">
+				<tm-button :round="88" size="s" font-size="46" :btnIcon="true" icon='skip-right-fill'></tm-button>
+				<template v-slot:menu="{isShow}">
+					<tm-sheet  :margin="0" :padding="0" class="overflow" shadow="24">
+						<tm-cell :bottomBorderInsert="true" :card="false" url="/pages/index/button" icon="stack-line"
+								 desc="UTS版本tmui组件库,高质量库" title="常见组件库"></tm-cell>
+						<tm-cell title="程序设置" :bottomBorderInsert="true" :card="false" url="/pages/index/icon"
+								 icon="price-tag-3-line" label="+￥32" label-color="red" icon-color="red"></tm-cell>
+						<tm-cell title="美丽的国度" :bottomBorderInsert="true" :card="false" icon="chat-smile-2-line"
+								 url="/pages/index/tag" label="tmx测试" icon-color="orange"></tm-cell>
+						<tm-cell title="标签页面" :bottomBorderInsert="true" :card="false" :show-bottom-border="false"
+								 icon="calendar-schedule-line" url="/pages/index/tag" label="tmx测试" icon-color="orange"></tm-cell>
+					</tm-sheet>
+				</template>
+			</tm-popover>
+			<tm-popover v-model="show" :is-click-close="false" :show-mask="true" position="bc" triangle-color="primary">
+				<template v-slot:default="{isShow}">
+					<tm-button
+						:round="88" size="s" :btnIcon="true"
+						font-size="46"
+					   :skin="isShow?'normal':'outlined'"
+					   :icon="isShow?'arrow-up-s-fill':'arrow-down-s-fill'"
+					   ></tm-button>
+				</template>
+				<template v-slot:menu="{isShow}">
+					<tm-sheet  :margin="0" :padding="0" class="overflow" shadow="24" style="max-width:450px" width="90vw">
+						<tm-calendar-multiple
+							v-model="dates"
+							:multiple-max="1"
+							:show-footer="false" head-bg-color="primary" head-font-color="#fff" @click="show = false"></tm-calendar-multiple>
+					</tm-sheet>
+				</template>
+			</tm-popover>
+			<tm-popover position="br">
+				<tm-button :round="88" size="s" font-size="46" :btnIcon="true" icon='skip-left-fill'></tm-button>
+				<template v-slot:menu="{isShow}">
+					<tm-sheet  :margin="0" :padding="0" class="overflow" shadow="24">
+						<tm-cell :bottomBorderInsert="true" :card="false" url="/pages/index/button" icon="stack-line"
+								 desc="UTS版本tmui组件库,高质量库" title="常见组件库"></tm-cell>
+						<tm-cell title="程序设置" :bottomBorderInsert="true" :card="false" url="/pages/index/icon"
+								 icon="price-tag-3-line" label="+￥32" label-color="red" icon-color="red"></tm-cell>
+						<tm-cell title="美丽的国度" :bottomBorderInsert="true" :card="false" icon="chat-smile-2-line"
+								 url="/pages/index/tag" label="tmx测试" icon-color="orange"></tm-cell>
+						<tm-cell title="标签页面" :bottomBorderInsert="true" :card="false" :show-bottom-border="false"
+								 icon="calendar-schedule-line" url="/pages/index/tag" label="tmx测试" icon-color="orange"></tm-cell>
+					</tm-sheet>
+				</template>
+			</tm-popover>
+		</tm-sheet>
+
+		<tm-sheet class="flex flex-row gap-20 flex-row-center-between">
+			<tm-popover position="tl" triangle-color="#000">
+				<tm-button :btnIcon="true" :round="88" font-size="46" icon='skip-left-fill' size="s"></tm-button>
+				<template v-slot:menu="{isShow}">
+					<tm-sheet margin="0" shadow="24" color="#000">
+						<tm-button>自定义内容</tm-button>
+					</tm-sheet>
+				</template>
+			</tm-popover>
+			<tm-popover position="tc">
+				<tm-button
+					:btnIcon="true"
+					:round="88" color="error" font-size="46"
+					icon="arrow-up-s-fill"
+					size="s"
+				></tm-button>
+				<template v-slot:menu="{isShow}">
+					<tm-sheet margin="0" shadow="24">
+						<tm-button>自定义内容</tm-button>
+					</tm-sheet>
+				</template>
+			</tm-popover>
+			<tm-popover position="tr">
+				<tm-button :btnIcon="true" :round="88" font-size="46" icon='skip-right-fill' size="s"></tm-button>
+				<template v-slot:menu="{isShow}">
+					<tm-sheet margin="0" shadow="24">
+						<tm-button>自定义内容</tm-button>
+					</tm-sheet>
+				</template>
+			</tm-popover>
+		</tm-sheet>
+
+		<tm-sheet class="flex flex-row flex-row-center-center gap-5">
+			<tm-popover position="left" triangle-color="#000">
+				<tm-button :btnIcon="true" :round="88" font-size="46" icon='skip-left-fill' size="s"></tm-button>
+				<template v-slot:menu="{isShow}">
+					<tm-sheet margin="0" padding="5" shadow="24" color="#000">
+						<tm-button>向左显示</tm-button>
+					</tm-sheet>
+				</template>
+			</tm-popover>
+
+			<tm-popover position="right" triangle-color="#000">
+				<tm-button :btnIcon="true" :round="88" font-size="46" icon='skip-right-fill' size="s"></tm-button>
+				<template v-slot:menu="{isShow}">
+					<tm-sheet margin="0" padding="5" shadow="24" color="#000">
+						<tm-button>向右显示</tm-button>
+					</tm-sheet>
+				</template>
+			</tm-popover>
+		</tm-sheet>
+
+	</view>
+
+</template>
+
+<style scoped>
+
+</style>

package/data/examples/progress.vue

@@ -0,0 +1,57 @@
+<!--
+  - Copyright (c) 2025. tmzdy by @https://tmui.design
+  -->
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(10)
+</script>
+
+<template>
+	<view>
+		<tm-sheet>
+			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">进度条 tmProgress</tm-text>
+			<tm-text class="" color="#999999">
+				配置灵活，自由度高。
+			</tm-text>
+		</tm-sheet>
+
+		<tm-sheet>
+			<tm-progress :model-value="50"></tm-progress>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-progress :model-value="50" color="error" size="18" show-label label-inside></tm-progress>
+		</tm-sheet>
+
+		<tm-sheet>
+			<tm-text font-size="32" class=" text-weight-b d-block">受控及动画演示</tm-text>
+			<tm-text color="#999999" class=" mb-n8 ">
+				演示标签插槽，状态自定义，渐变，自定颜色等属性。
+			</tm-text>
+			<tm-progress v-model="value"></tm-progress>
+			<tm-progress v-model="value" :color="value > 50 ? 'success' : 'primary'" class="mt-n8"
+				show-label="true"></tm-progress>
+			<tm-progress v-model="value" color="warn" size="12" class="mt-n8" show-label>
+				<template v-slot:default="{ value, percentage }">
+					<tm-icon color="success" v-if="percentage > 80" name="checkbox-circle-line"></tm-icon>
+					<tm-icon color="warn" v-else name="close-circle-line"></tm-icon>
+				</template>
+			</tm-progress>
+			<tm-progress v-model="value" linear-color="linear-gradient(to right, #FFEB3A 0%, #4DEF8E 100%)" size="12"
+				class="mt-n8">
+			</tm-progress>
+
+			<view class="flex flex-row gap-10 mt-n8">
+				<tm-tag @click="value = 10">10</tm-tag>
+				<tm-tag @click="value = 50">50</tm-tag>
+				<tm-tag @click="value = 100">100</tm-tag>
+			</view>
+		</tm-sheet>
+
+
+	</view>
+
+</template>
+
+<style scoped></style>

package/data/examples/pull-refresh.vue

@@ -0,0 +1,41 @@
+<template>
+    <view style="height: calc(100vh - 44px);" class="flex flex-col">
+        <tm-pull-refresh :frist-load="false" style="height: 100%;"
+        :pull-refresh="handleRefresh" 
+        :bottom-refresh="bootmHandleRefresh" >
+            <tm-sheet>
+                <tm-text font-size="36" class="text-weight-b mb-n8 d-block">下拉刷新</tm-text>
+                <view>
+                    <tm-text>请拖拉下拉刷新</tm-text>
+                </view>
+            </tm-sheet>
+            <tm-sheet height="800px">
+                <tm-text font-size="36" class="text-weight-b mb-n8 d-block">触底刷新</tm-text>
+                <view>
+                    <tm-text>上拖触底刷新</tm-text>
+                </view>
+            </tm-sheet>
+        </tm-pull-refresh>
+    </view>
+</template>
+<script setup lang="ts">
+const handleRefresh = ():Promise<boolean> => {
+    console.log('刷新');
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            console.log('完成');
+            resolve(true);
+        }, 3*1000);
+    })
+}
+const bootmHandleRefresh = async ():Promise<boolean> => {
+    console.log('刷新');
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            console.log('完成');
+            resolve(true);
+        }, 3000);
+    })
+}
+</script>
+<style lang="scss"></style>

package/data/examples/radio.vue

@@ -0,0 +1,61 @@
+<template>
+	<view>
+		<tm-sheet>
+			<tm-text class=" text-weight-b mb-16 d-block" font-size="32">单选框组</tm-text>
+			<tm-text class="mb-n8" color="#999999">
+				可单单独使用,也可组合使用
+			</tm-text>
+		</tm-sheet>
+		
+		<tm-sheet :margin="['24']">
+			<tm-text font-size="32" class=" text-weight-b d-block mb-n8">单独使用</tm-text>
+			<view class="flex flex-row flex-row-center-start gap-10">
+				<tm-radio label="苹果"></tm-radio>
+				<tm-radio color="success" label="梨子"></tm-radio>
+				<tm-radio color="error" label="香蕉"></tm-radio>
+				<tm-radio color="warn" label="地瓜"></tm-radio>
+			</view>
+		</tm-sheet>
+		<tm-sheet :margin="['24']">
+			<tm-text font-size="32" class=" text-weight-b d-block mb-n8">联合Group使用</tm-text>
+			<tm-radio-group @change="onchange" v-model="radioValue">
+				<tm-radio v-for="(item, index) in ['苹果', '梨子', '香蕉', '地瓜', '花生']" :key="index" :value="item"
+					:label="item"></tm-radio>
+			</tm-radio-group>
+			<tm-sheet color="info" padding="24" :margin="[0, 24, 0, 0]"><tm-text>{{ radioValue || "未选择" }}</tm-text>
+			</tm-sheet>
+		</tm-sheet>
+
+		<tm-sheet :margin="['24']">
+			<tm-text font-size="32" class="text-weight-b d-block">竖向排列(并自定义样式)</tm-text>
+		</tm-sheet>
+		<tm-radio-group v-model="radioValue2" direction="column">
+			<tm-sheet :color="radioValue2 === item.id ? 'primary' : 'white'" v-for="(item, index) in listview"
+				:key="index" :margin="[24, 0]" padding="0" class="flex-1">
+				<tm-radio class="pa-20" :color="radioValue2 === item.id ? 'warn' : 'primary'" :value="item.id">
+					<template v-slot:label="{checked}">
+						<tm-text :color="radioValue2 === item.id ? '#fff' : '#333'">{{ item.text }}</tm-text>
+					</template>
+				</tm-radio>
+			</tm-sheet>
+		</tm-radio-group>
+		<view class="py-20"></view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const radioValue = ref("")
+const radioValue2 = ref("")
+const listview = ref<Array<Record<string, any>>>([
+	{ text: "科技创新引领制造业高质量发展", id: 1 },
+	{ text: "明确提出“建立保持制造业合理比重投入机制”。这些都为以科技创新引领制造业高质量发展指明了道路和方向。", id: 2 },
+	{ text: "改造提升传统产业，培育壮大新兴产业，布局建设未来产业，完善现代化产业体系", id: 3 },
+])
+const onchange = (val: any) => {
+	// console.log(val,'**')
+}
+</script>
+
+<style></style>

package/data/examples/rate.vue

@@ -0,0 +1,35 @@
+<template>
+	<view>
+		<tm-sheet>
+			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">评分 tmRate</tm-text>
+			<tm-text class="" color="#999999">
+				评分组件，只读和禁用等属性
+			</tm-text>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-rate></tm-rate>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="32" class=" text-weight-b mb-n8 d-block">半星</tm-text>
+			<tm-rate :half="true" :model-value="2.5" ></tm-rate>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="32" class=" text-weight-b mb-n8 d-block">只读</tm-text>
+			<tm-rate color="warn"  :half="true" :model-value="4.5" :readonly="true"></tm-rate>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="32" class=" text-weight-b mb-n8 d-block">禁用</tm-text>
+			<tm-rate color="success" :model-value="3" :disabled="true"></tm-rate>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="32" class=" text-weight-b mb-n8 d-block">显示分数</tm-text>
+			<tm-rate color="error" :model-value="3" :show-score="true"></tm-rate>
+		</tm-sheet>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+</script>
+
+<style></style>

package/data/examples/row.vue

@@ -0,0 +1,52 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b d-block">布局 TmRow TmCol</tm-text>
+            <view>
+                <tm-text>快速排版布局利器,内只能放置tmCol组件,默认是5列栅格,可以自行更改</tm-text>
+            </view>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-row>
+                <tm-col v-for="(index, item) in 5" :key="index"
+                    :style="{ backgroundColor: `rgb(21, ${135 - item * 20}, ${235 - item * 20})` }"
+                    class=" text-align-center py-24 text-white">{{ item }}</tm-col>
+            </tm-row>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b mb-n8 d-block">上下左右间隙</tm-text>
+            <tm-row gutter="2">
+                <tm-col v-for="item in 10" :key="item" :style="{ backgroundColor: `rgb(230, ${item * 20}, ${165 - item * 20})` }"
+                    class=" text-align-center py-24 text-white">{{ item % 5 == 0 ? 5 : item % 5 }}</tm-col>
+            </tm-row>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b mb-n8 d-block">设置各自的栅格</tm-text>
+            <tm-row>
+                <tm-col v-for="(item, index) in [2, 1, 2, 5]" :key="item" :span="item"
+                    :style="{ backgroundColor: `rgb(0, ${index * 20}, ${index * 20})` }"
+                    class=" text-align-center py-24 text-white">{{ item }}</tm-col>
+            </tm-row>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b mb-n8 d-block">改为10栅格</tm-text>
+            <tm-row column="10">
+                <tm-col v-for="(item, index) in [1, 3, 1, 5]" :key="item" :span="item"
+                    :style="{ backgroundColor: `rgb(${item * 20}, ${95 - item * 20}, ${165 - item * 10})` }"
+                    class=" text-align-center py-24 text-white">{{ item }}</tm-col>
+            </tm-row>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b mb-n8 d-block">向右对齐</tm-text>
+            <tm-row column="10" justify="flex-end">
+                <tm-col v-for="(item, index) in [2, 5, 3, 3, 2]" :key="item" :span="item"
+                    :style="{ backgroundColor: `rgb(0, ${index * 20}, ${index * 10})` }"
+                    class=" text-align-center py-24 text-white">{{ item }}</tm-col>
+            </tm-row>
+        </tm-sheet>
+    </view>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+</script>
+<style lang="scss" scoped></style>

package/data/examples/sheet.vue

@@ -0,0 +1,36 @@
+<template>
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b d-block">容器 TmSheet</tm-text>
+        <view>
+            <tm-text>非常方便快速布局，可全局配置间隙投影，圆角这些。</tm-text>
+        </view>
+    </tm-sheet>
+    <tm-sheet color="primary" :round="[0, 20,20,8]">
+        <tm-text color="white">更改圆角</tm-text>
+    </tm-sheet>
+    <tm-sheet borderWidth="4" :borderColor="['#8A88FB', '#D079EE']" :round="[0, 20]">
+        <tm-text>边线</tm-text>
+    </tm-sheet>
+    <tm-sheet :linear="['220.55deg', '#8A88FB', '#D079EE']" :round="[0, 20]">
+        <tm-text color="white">渐变</tm-text>
+    </tm-sheet>
+    <tm-sheet shadow="15" :linear="['220.55deg', '#8A88FB', '#D079EE']" round="20">
+        <tm-text color="white">渐变+投影</tm-text>
+    </tm-sheet>
+    
+    <tm-sheet shadow="15" color="#ff0074" round="20">
+        <tm-text color="white">纯色+投影</tm-text>
+    </tm-sheet>
+    <tm-sheet>
+        <tm-text font-size="36" class="text-weight-b ">允许让内容加载中...</tm-text>
+    </tm-sheet>
+    <tm-sheet :loading="true">
+        <tm-sheet color="warn" :round="[0, 20]">
+            <tm-text color="white">让内容处理加载中</tm-text>
+        </tm-sheet>
+    </tm-sheet>
+</template>
+<script lang="ts" setup>
+import {ref} from "vue"
+</script>
+<style lang="scss"></style>

package/data/examples/sign-board.vue

@@ -0,0 +1,43 @@
+<!--
+  - Copyright (c) 2025. tmzdy by @https://tmui.design
+  -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import TmSignBoard from "@/uni_modules/tm-ui/components/tm-sign-board/tm-sign-board.vue"
+const signBoardRef = ref<InstanceType<typeof TmSignBoard>|null>(null)
+const getimage = async ()=>{
+	let org = await signBoardRef.value?.getImage();
+	if(!org) return;
+	uni.previewImage({
+		urls:[org.src],
+		current:org.src
+	})
+}
+const clear = async ()=>{
+	await signBoardRef.value?.clear();
+}
+
+</script>
+
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="32" class="text-weight-b d-block ">签名版 TmSignBoard</tm-text>
+        </tm-sheet>
+
+        <tm-sheet >
+            <tm-sheet width="660" height="660" padding="0" margin="0" color="info">
+				<tm-sign-board ref="signBoardRef" width="660" height="660"></tm-sign-board>
+			</tm-sheet>
+			
+			<view class="pa-12 flex flex-row gap-10 mt-n8">
+				<tm-button @click="clear" class="flex-1">清空</tm-button>
+				<tm-button @click="getimage" class="flex-1">获取图片</tm-button>
+			</view>
+        </tm-sheet>
+
+    </view>
+
+</template>
+
+<style scoped></style>

package/data/examples/skeleton.vue

@@ -0,0 +1,45 @@
+<template>
+	<view>
+		<tm-sheet>
+			<tm-text font-size="36" class="text-weight-b mb-8">骨架屏 tmSkeleton</tm-text>
+			<tm-text class="mb-n8" color="#999999">骨架屏就是一个单view，允许你自由组合骨架效果，建议单独使用本组件自己封装一个想要的骨架效果。</tm-text>
+			<tm-text color="#999999">由于每个人的app占位样式不一样，我认为这种非常自由式的组合非常符合扩展。</tm-text>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-skeleton></tm-skeleton>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="36" class="text-weight-b ">动手组合一个骨架</tm-text>
+		</tm-sheet>
+		<tm-sheet>
+			<view class="flex flex-row">
+				<tm-skeleton width="90" height="90" round="90"></tm-skeleton>
+				<view class="flex-1 ml-8">
+					<tm-skeleton class="mb-8" v-for="item in 6" :key="item"></tm-skeleton>
+				</view>
+			</view>
+		</tm-sheet>
+		<tm-sheet>
+			<tm-text font-size="36" class="text-weight-b ">再组合一个吧</tm-text>
+		</tm-sheet>
+		<tm-sheet>
+			<view class="flex flex-row flex-row-center-between">
+				<view v-for="item1 in 3" :key="item1" style="width:30%">
+					<tm-skeleton height="90"></tm-skeleton>
+					<view class="mt-8">
+						<tm-skeleton height="20" class="mb-8" v-for="item in 3" :key="item"></tm-skeleton>
+					</view>
+				</view>
+			</view>
+		</tm-sheet>
+		<view style="height:50px"></view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import {ref} from "vue"
+</script>
+
+<style>
+
+</style>

package/data/examples/sku.vue

@@ -0,0 +1,106 @@
+<template>
+	<tm-sheet>
+		<tm-text class="text-weight-b d-block" font-size="36">规格选择器 TmSku</tm-text>
+		<view>
+			<tm-text>支持多规格单规格模式,快速的商品规格选择.</tm-text>
+		</view>
+	</tm-sheet>
+	<tm-sheet>
+		<tm-button block @click="openSku">打开sku</tm-button>
+	</tm-sheet>
+	<tm-sku :show-add-store="true" v-model="selectedVal" v-model:model-show="show" :data="product"></tm-sku>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const show = ref(false)
+	const selectedVal = ref('b-2')
+	const product : TM.SKU_DATA = {
+		data: [
+			{
+				id: 'color',
+				title: '颜色外观',
+				children: [
+					{ id: 'a', title: '沙漠色' },
+					{ id: 'b', title: '原色钛' }
+				]
+			},
+			{
+				id: 'size',
+				title: '容量',
+				children: [
+					{ id: '1', title: '256GB' },
+					{ id: '2', title: '512GB', inventory_quantity: 0 },
+					{ id: '3', title: '1TB' }
+				]
+			}
+		],
+		product: [
+			{
+				title: '沙漠色-256GB',
+				id: 'a-1',
+				inventory_quantity: 50,
+				max_buy_quantity: 1,
+				min_buy_quantity: 1,
+				original_price: 5999,
+				price: 4999,
+				img: 'https://img10.360buyimg.com/n1/s800x800_jfs/t1/264648/17/5056/33086/67715a61Ff394bd13/fc6bec790465ee36.png'
+			},
+			{
+				title: '沙漠色-512GB',
+				id: 'a-2',
+				inventory_quantity: 0,
+				max_buy_quantity: 2,
+				min_buy_quantity: 1,
+				original_price: 6999,
+				price: 5999,
+				img: 'https://img10.360buyimg.com/n1/s800x800_jfs/t1/264648/17/5056/33086/67715a61Ff394bd13/fc6bec790465ee36.png'
+			},
+			{
+				title: '沙漠色-1TB',
+				id: 'a-3',
+				inventory_quantity: 20,
+				max_buy_quantity: 1,
+				min_buy_quantity: 1,
+				original_price: 9999,
+				price: 8999,
+				img: 'https://img10.360buyimg.com/n1/s800x800_jfs/t1/264648/17/5056/33086/67715a61Ff394bd13/fc6bec790465ee36.png'
+			},
+			{
+				title: '原色钛-256GB',
+				id: 'b-1',
+				inventory_quantity: 50,
+				max_buy_quantity: 3,
+				min_buy_quantity: 1,
+				original_price: 5999,
+				price: 4999,
+				img: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/260596/18/5137/32821/67715a71F1daf206d/103e0ea83209d416.png'
+			},
+			{
+				title: '原色钛-512GB',
+				id: 'b-2',
+				inventory_quantity: 0,
+				max_buy_quantity: 1,
+				min_buy_quantity: 1,
+				original_price: 6999,
+				price: 5999,
+				img: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/260596/18/5137/32821/67715a71F1daf206d/103e0ea83209d416.png'
+			},
+			{
+				title: '原色钛-1TB',
+				id: 'b-3',
+				inventory_quantity: 50,
+				max_buy_quantity: 2,
+				min_buy_quantity: 1,
+				original_price: 9999,
+				price: 8999,
+				img: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/260596/18/5137/32821/67715a71F1daf206d/103e0ea83209d416.png'
+			}
+
+		]
+	}
+	const openSku = () => {
+		show.value = true
+	}
+</script>
+<style lang="scss"></style>