小程序初始提交

cool-unix/pages/template/shop/goods-detail/index.uvue

@@ -0,0 +1,116 @@
+<template>
+	<cl-page>
+		<Topbar />
+
+		<cl-banner
+			:list="bannerList"
+			:height="800"
+			:pt="{
+				className: '!rounded-none',
+				image: {
+					className: '!rounded-none'
+				}
+			}"
+		/>
+
+		<view class="card dark:!bg-surface-700" id="info">
+			<Info />
+		</view>
+
+		<view class="card !py-1 dark:!bg-surface-700">
+			<view class="row is-border dark:!border-surface-600">
+				<cl-icon name="apps-line"></cl-icon>
+
+				<view class="flex-1 ml-3">
+					<cl-text>已选：黑色 128GB + 碎屏险</cl-text>
+				</view>
+
+				<cl-icon name="arrow-right-s-line"></cl-icon>
+			</view>
+
+			<view class="row is-border !items-start dark:!border-surface-600">
+				<cl-icon name="truck-line" :pt="{ className: '!mt-1' }"></cl-icon>
+
+				<view class="flex-1 ml-3">
+					<cl-text color="info">预计11月1日 周三 送达</cl-text>
+					<cl-text color="info" :pt="{ className: '!mt-1' }">深圳益田假日广场</cl-text>
+				</view>
+			</view>
+
+			<view class="row">
+				<cl-icon name="shield-check-line"></cl-icon>
+
+				<view class="flex-1 ml-3">
+					<cl-text color="info">7天无理由退货 · 正品保证 · 极速发货 · 无忧售后</cl-text>
+				</view>
+			</view>
+		</view>
+
+		<view class="card dark:!bg-surface-700" id="comment">
+			<Comment />
+		</view>
+
+		<view class="card !p-0 dark:!bg-surface-700" id="desc">
+			<Desc />
+		</view>
+
+		<cl-footer>
+			<view class="flex flex-row overflow-visible">
+				<view class="flex flex-row mr-auto overflow-visible">
+					<view class="flex justify-center items-center px-4">
+						<cl-icon name="heart-line" :size="42"></cl-icon>
+						<cl-text :pt="{ className: 'text-xs mt-1' }">收藏</cl-text>
+					</view>
+
+					<view
+						class="flex justify-center items-center px-4 overflow-visible"
+						@tap="router.to('/pages/template/shop/shopping-cart')"
+					>
+						<cl-icon name="shopping-cart-line" :size="42"></cl-icon>
+						<cl-text :pt="{ className: 'text-xs mt-1' }">购物车</cl-text>
+
+						<cl-badge
+							type="error"
+							:value="3"
+							position
+							:pt="{ className: '!right-[24rpx] !top-[-10rpx] !scale-80' }"
+						></cl-badge>
+					</view>
+				</view>
+
+				<cl-button text border :pt="{ className: '!w-[220rpx]' }">加入购物车</cl-button>
+				<cl-button :pt="{ className: '!w-[220rpx]' }">立即购买</cl-button>
+			</view>
+		</cl-footer>
+	</cl-page>
+</template>
+
+<script setup lang="ts">
+import { router } from "@/cool";
+import { ref } from "vue";
+import Comment from "./comment.uvue";
+import Info from "./info.uvue";
+import Desc from "./desc.uvue";
+import Topbar from "./topbar.uvue";
+
+const bannerList = ref<string[]>([
+	"https://unix.cool-js.com/images/demo/goods/banner-1.jpg",
+	"https://unix.cool-js.com/images/demo/goods/banner-2.jpg",
+	"https://unix.cool-js.com/images/demo/goods/banner-3.jpg",
+	"https://unix.cool-js.com/images/demo/goods/banner-4.jpg"
+]);
+</script>
+
+<style lang="scss" scoped>
+.card {
+	@apply p-4 bg-white mb-3;
+
+	.row {
+		@apply flex flex-row items-center py-4;
+
+		&.is-border {
+			@apply border-b border-t-0 border-l-0 border-r-0 border-solid border-surface-100;
+		}
+	}
+}
+</style>