|
@@ -1,50 +1,188 @@
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { StaticUrl } from '@/config'
|
|
import { StaticUrl } from '@/config'
|
|
|
|
|
|
|
|
|
|
+import selectAddressTemplate from '@/subPack-smqjh/components/selectAddress/index.vue?async'
|
|
|
|
|
+
|
|
|
definePage({
|
|
definePage({
|
|
|
name: 'smqjh-cart',
|
|
name: 'smqjh-cart',
|
|
|
layout: 'tabbar',
|
|
layout: 'tabbar',
|
|
|
|
|
+ islogin: false,
|
|
|
style: {
|
|
style: {
|
|
|
navigationBarTitleText: '购物车',
|
|
navigationBarTitleText: '购物车',
|
|
|
|
|
+ navigationStyle: 'custom',
|
|
|
|
|
+ disableScroll: true,
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
-})
|
|
|
|
|
-onMounted(() => {
|
|
|
|
|
- setNavBack()
|
|
|
|
|
-})
|
|
|
|
|
-onShow(() => {
|
|
|
|
|
- console.log('触发')
|
|
|
|
|
- nextTick(() => {
|
|
|
|
|
- setNavBack()
|
|
|
|
|
- })
|
|
|
|
|
})
|
|
})
|
|
|
-function setNavBack() {
|
|
|
|
|
- uni.setNavigationBarColor({
|
|
|
|
|
- backgroundColor: '#9ED605',
|
|
|
|
|
- frontColor: '#ffffff',
|
|
|
|
|
- fail: (e) => {
|
|
|
|
|
- console.log('fail', e)
|
|
|
|
|
- },
|
|
|
|
|
- success: (e) => {
|
|
|
|
|
- console.log('success', e)
|
|
|
|
|
- },
|
|
|
|
|
- })
|
|
|
|
|
-}
|
|
|
|
|
|
|
+const { name } = storeToRefs(useAddressStore())
|
|
|
|
|
+const isAll = ref(false)
|
|
|
|
|
+const selectCatrt = ref()
|
|
|
|
|
+const tab = ref(0)
|
|
|
|
|
+const selectAddress = ref(false)
|
|
|
|
|
+const navList = ref([
|
|
|
|
|
+ { title: '全部', id: 1 },
|
|
|
|
|
+ { title: '星闪豹', id: 2 },
|
|
|
|
|
+ { title: '电影演出', id: 3 },
|
|
|
|
|
+ { title: '视频权益', id: 4 },
|
|
|
|
|
+ { title: '大牌点餐', id: 5 },
|
|
|
|
|
+ { title: '加油', id: 6 },
|
|
|
|
|
+ { title: '酒店民宿', id: 7 },
|
|
|
|
|
+ { title: '代驾', id: 8 },
|
|
|
|
|
+])
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="box-border w-full flex items-center justify-center">
|
|
|
|
|
- <view class="mt220rpx flex flex-col items-center">
|
|
|
|
|
- <image
|
|
|
|
|
- :src="`${StaticUrl}/cart.png`"
|
|
|
|
|
- class="h110rpx w110rpx"
|
|
|
|
|
- />
|
|
|
|
|
- <view class="mb20rpx mt20rpx text-24rpx">
|
|
|
|
|
- 你还没有添加商品哦~
|
|
|
|
|
|
|
+ <view class="pages">
|
|
|
|
|
+ <wd-navbar
|
|
|
|
|
+ title="" custom-style="background-color:transparent !important" :bordered="false" :z-index="99"
|
|
|
|
|
+ safe-area-inset-top fixed
|
|
|
|
|
+ >
|
|
|
|
|
+ <template #left>
|
|
|
|
|
+ <view class="ml10rpx flex items-center" @click.stop="selectAddress = true">
|
|
|
|
|
+ <view class="mr20rpx text-36rpx font-semibold">
|
|
|
|
|
+ 购物车
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image :src="`${StaticUrl}/location-green.png`" class="h33.8rpx w29rpx" />
|
|
|
|
|
+ <view class="ml10rpx max-w-280rpx truncate text-32rpx text-#222 font-semibold">
|
|
|
|
|
+ {{ name }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </wd-navbar>
|
|
|
|
|
+ <view class="xsb-linear h406rpx" />
|
|
|
|
|
+ <view class="-mt220rpx">
|
|
|
|
|
+ <view class="flex items-center justify-between pb16rpx">
|
|
|
|
|
+ <view class="w85%">
|
|
|
|
|
+ <wd-tabs v-model="tab">
|
|
|
|
|
+ <block v-for="tabs in navList" :key="tabs.id">
|
|
|
|
|
+ <wd-tab :title="tabs.title" />
|
|
|
|
|
+ </block>
|
|
|
|
|
+ </wd-tabs>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="guanli h80rpx w104rpx flex flex-shrink-0 items-center justify-center text-28rpx font-semibold">
|
|
|
|
|
+ 管理
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <scroll-view scroll-y class="content box-border">
|
|
|
|
|
+ <view class="px24rpx">
|
|
|
|
|
+ <view v-for="store in 5" :key="store" class="mb24rpx rounded-16rpx bg-white px24rpx pb18rpx pt28rpx">
|
|
|
|
|
+ <wd-checkbox v-model="isAll" size="large">
|
|
|
|
|
+ <view class="text-28rpx font-semibold">
|
|
|
|
|
+ 市民请集合官方旗舰店
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </wd-checkbox>
|
|
|
|
|
+ <view class="mt20rpx h2rpx w-full bg-#F0F0F0" />
|
|
|
|
|
+ <wd-checkbox-group v-model="selectCatrt" size="large">
|
|
|
|
|
+ <view v-for="items in 10" :key="items" class="mt20rpx flex items-center">
|
|
|
|
|
+ <view class="mr20rpx h32rpx w32rpx">
|
|
|
|
|
+ <wd-checkbox model-value="jingmai" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="flex flex-1">
|
|
|
|
|
+ <image :src="`${StaticUrl}/shu.png`" class="h200rpx w200rpx flex-shrink-0" />
|
|
|
|
|
+ <view class="ml20rpx flex-1">
|
|
|
|
|
+ <view class="text-left text-32rpx font-semibold">
|
|
|
|
|
+ <view v-for="i in 2" :key="i" class="mr5px inline-block">
|
|
|
|
|
+ <wd-tag>
|
|
|
|
|
+ 惊喜回馈
|
|
|
|
|
+ </wd-tag>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ 秋季应季水果纯甜
|
|
|
|
|
+ 柿子
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt14rpx text-24rpx text-#AAAAAA">
|
|
|
|
|
+ 规格:5kg,盒
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt14rpx flex items-center justify-between">
|
|
|
|
|
+ <view class="text-36rpx text-#FF4A39 font-semibold">
|
|
|
|
|
+ ¥13.95
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- <wd-input-number v-model="tabs.id" /> -->
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </wd-checkbox-group>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="h150rpx" />
|
|
|
|
|
+
|
|
|
|
|
+ <view v-if="false" class="box-border w-full flex items-center justify-center">
|
|
|
|
|
+ <view class="mt220rpx flex flex-col items-center">
|
|
|
|
|
+ <image :src="`${StaticUrl}/cart.png`" class="h110rpx w110rpx" />
|
|
|
|
|
+ <view class="mb20rpx mt20rpx text-24rpx">
|
|
|
|
|
+ 你还没有添加商品哦~
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <wd-button plain>
|
|
|
|
|
+ 去逛逛
|
|
|
|
|
+ </wd-button>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="fixedShadow fixed bottom-80rpx left-0 z-99 box-border w-full flex items-center justify-between rounded-t-16rpx bg-white px24rpx pb60rpx pt10rpx"
|
|
|
|
|
+ >
|
|
|
|
|
+ <view class="ios w-full flex items-center justify-between">
|
|
|
|
|
+ <view class="flex items-center">
|
|
|
|
|
+ <image :src="`${StaticUrl}/cart-lanzi.png`" class="h100rpx w100rpx" />
|
|
|
|
|
+ <view class="ml16rpx flex items-center">
|
|
|
|
|
+ <wd-checkbox v-model="isAll" size="large">
|
|
|
|
|
+ 全选
|
|
|
|
|
+ </wd-checkbox>
|
|
|
|
|
+ <view class="ml10rpx text-24rpx text-#FF4A39">
|
|
|
|
|
+ 删除
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="flex items-center">
|
|
|
|
|
+ <view class="flex items-center font-semibold">
|
|
|
|
|
+ <view class="text-22rpx text-#222">
|
|
|
|
|
+ 总计:
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="flex items-baseline text-24rpx text-#FF4A39">
|
|
|
|
|
+ ¥
|
|
|
|
|
+ <text class="text-36rpx">
|
|
|
|
|
+ 8.9
|
|
|
|
|
+ </text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="ml20rpx w160rpx">
|
|
|
|
|
+ <wd-button block size="large">
|
|
|
|
|
+ 结算
|
|
|
|
|
+ </wd-button>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- <wd-button plain>
|
|
|
|
|
- 去逛逛
|
|
|
|
|
- </wd-button>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <selectAddressTemplate v-model="selectAddress" />
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
|
+.content {
|
|
|
|
|
+ height: calc(100vh - var(--window-top) - 380rpx);
|
|
|
|
|
+ height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom) - 380rpx);
|
|
|
|
|
+ height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom) - 380rpx);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.fixedShadow {
|
|
|
|
|
+ box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.pages {
|
|
|
|
|
+ :deep() {
|
|
|
|
|
+ .wd-tabs {
|
|
|
|
|
+ background: none !important;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .wd-tabs__nav {
|
|
|
|
|
+ background: none !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ .wd-tabs__nav-item-text{
|
|
|
|
|
+ font-size: 28rpx !important;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .guanli{
|
|
|
|
|
+ box-shadow: -10rpx 0rpx 12rpx 2rpx rgba(0,0,0,0.07);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|