|
@@ -33,13 +33,6 @@ const changeNavbarThreshold = 300 // 滚动到这个高度时改变导航栏颜
|
|
|
|
|
|
const showTip = ref(false)
|
|
|
|
|
|
-// 添加通知轮播数据
|
|
|
-const notifications = ref([
|
|
|
- { id: 1, name: 'Aamir Khan', time: '10s' },
|
|
|
- { id: 2, name: 'John Smith', time: '30s' },
|
|
|
- { id: 3, name: 'Maria Garcia', time: '1m' },
|
|
|
-])
|
|
|
-
|
|
|
onPageScroll((e) => {
|
|
|
// 根据滚动高度改变导航栏背景色
|
|
|
if (e.scrollTop > changeNavbarThreshold) {
|
|
@@ -49,6 +42,13 @@ onPageScroll((e) => {
|
|
|
navBgColor.value = 'transparent'
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
+// 添加通知轮播数据
|
|
|
+const notifications = ref([
|
|
|
+ { id: 1, name: 'Aamir Khan', time: '10s' },
|
|
|
+ { id: 2, name: 'John Smith', time: '30s' },
|
|
|
+ { id: 3, name: 'Maria Garcia', time: '1m' },
|
|
|
+])
|
|
|
// 点击页面任意地方隐藏提示
|
|
|
function handlePageClick() {
|
|
|
if (showTip.value) {
|
|
@@ -88,6 +88,14 @@ const avatarList = ref([
|
|
|
'/static/images/avatar.jpg',
|
|
|
])
|
|
|
|
|
|
+// sku 逻辑
|
|
|
+const showSku = ref(false)
|
|
|
+
|
|
|
+const formData = ref({
|
|
|
+ colorSelect: 1,
|
|
|
+ num: 1,
|
|
|
+})
|
|
|
+
|
|
|
const dataList = ref([])
|
|
|
function queryList(pageNo, pageSize) {
|
|
|
// 此处请求仅为演示,请替换为自己项目中的请求
|
|
@@ -129,7 +137,7 @@ function queryList(pageNo, pageSize) {
|
|
|
class="flex items-center justify-between rounded-t-24rpx from-[#FF3779] to-[#FF334A] bg-gradient-to-br px-24rpx pb-24rpx pt-18rpx text-white"
|
|
|
>
|
|
|
<view>
|
|
|
- <view class="mb-12rpx flex items-center">
|
|
|
+ <view class="mb-12rpx flex items-baseline">
|
|
|
<text class="text-28rpx">
|
|
|
Price
|
|
|
</text>
|
|
@@ -259,7 +267,7 @@ function queryList(pageNo, pageSize) {
|
|
|
</view>
|
|
|
<view class="flex flex-1 items-center justify-end text-32rpx">
|
|
|
<view class="relative">
|
|
|
- <view class="rounded-l-full bg-#2F2D31 px-34rpx py-18rpx text-white">
|
|
|
+ <view class="rounded-l-full bg-#2F2D31 px-34rpx py-18rpx text-white" @click="showSku = true">
|
|
|
Open Group
|
|
|
</view>
|
|
|
<CustomTooltip
|
|
@@ -275,6 +283,62 @@ function queryList(pageNo, pageSize) {
|
|
|
</view>
|
|
|
</template>
|
|
|
</z-paging>
|
|
|
+ <wd-action-sheet v-model="showSku" :z-index="9999">
|
|
|
+ <view class="px-24rpx">
|
|
|
+ <view class="mb-16rpx flex items-center gap-24rpx border-b-1 border-b-color-#E1E1E1 border-b-solid py-24rpx">
|
|
|
+ <image
|
|
|
+ src="/static/images/avatar.jpg"
|
|
|
+ class="h-160rpx w-160rpx shrink-0"
|
|
|
+ />
|
|
|
+ <view class="flex-1">
|
|
|
+ <view class="line-clamp-2 mb-32rpx text-28rpx">
|
|
|
+ SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]
|
|
|
+ </view>
|
|
|
+ <view class="flex items-baseline">
|
|
|
+ <view class="text-#FF0010">
|
|
|
+ <text class="text-28rpx">
|
|
|
+ ৳
|
|
|
+ </text>
|
|
|
+ <text class="text-48rpx">
|
|
|
+ 1000
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="ml-20rpx text-28rpx text-#787878 line-through">
|
|
|
+ ৳1999
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mb-24rpx border-b-1 border-b-color-#E1E1E1 border-b-solid pb-40rpx">
|
|
|
+ <view class="mb-12rpx text-32rpx">
|
|
|
+ Color
|
|
|
+ </view>
|
|
|
+ <view class="grid grid-cols-4 gap-20rpx">
|
|
|
+ <view v-for="i in 5" :key="i" class="box-border flex flex-col border-1 border-transparent border-dashed bg-#F5F5F7 text-center" :style="{ borderColor: formData.colorSelect === i ? 'var(--wot-color-theme)' : '' }">
|
|
|
+ <view class="h-160rpx w-full">
|
|
|
+ <image
|
|
|
+ src="/static/images/avatar.jpg"
|
|
|
+ class="h-full w-full"
|
|
|
+ mode="aspectFit"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="text-22rpx text-#757575">
|
|
|
+ Black
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mb-100rpx flex items-center justify-between text-32rpx">
|
|
|
+ <view>Quantity</view>
|
|
|
+ <wd-input-number v-model="formData.num" />
|
|
|
+ </view>
|
|
|
+ <view class="py-24rpx">
|
|
|
+ <wd-button block>
|
|
|
+ Join Group
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </wd-action-sheet>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|