|
|
@@ -8,6 +8,7 @@
|
|
|
}
|
|
|
</route>
|
|
|
<script setup lang="ts">
|
|
|
+ import { t } from '@/locale'
|
|
|
const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
|
</script>
|
|
|
<template>
|
|
|
@@ -15,6 +16,175 @@
|
|
|
class="pb-tab bg-white overflow-hidden box-border"
|
|
|
:style="{ marginTop: safeAreaInsets?.top + 'px' }"
|
|
|
>
|
|
|
- 购物车
|
|
|
+ <wd-sticky>
|
|
|
+ <view class="nav-bar bg-white w-100vw">
|
|
|
+ <view class="cart-pos">
|
|
|
+ <view class="text">{{ t('tabbar.cart') }}</view>
|
|
|
+ <view class="pos">
|
|
|
+ <image class="w-36rpx" src="@/static/images/cart/pos.svg" mode="widthFix"></image>
|
|
|
+ <view class="address-name">{{ t('cart.homeName') }}</view>
|
|
|
+ <image class="w-36rpx" src="@/static/images/cart/right.svg" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="manage-cart">{{ t('cart.manageCart') }}</view>
|
|
|
+ </view>
|
|
|
+ </wd-sticky>
|
|
|
+
|
|
|
+ <view class="cart-list"></view>
|
|
|
+ <view class="cart-bottom-area pb-tab">
|
|
|
+ <view class="cart-control">
|
|
|
+ <view class="icon"></view>
|
|
|
+ <view class="text">{{ t('cart.selectAll') }}</view>
|
|
|
+ <view class="price">
|
|
|
+ {{ t('cart.totalPrice') }}
|
|
|
+ <view class="price-text flex">
|
|
|
+ {{ t('cart.priceUint') }}
|
|
|
+ <view v-format.price class="price-num">83.97</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button">{{ t('cart.settlement') }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ :deep(.wd-sticky__container) {
|
|
|
+ top: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cart-list {
|
|
|
+ height: 100vh;
|
|
|
+ margin-bottom: 130rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cart-bottom-area {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 750rpx;
|
|
|
+ background: $shop-white;
|
|
|
+
|
|
|
+ .cart-control {
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ border-bottom: 2rpx solid var(--f-2-f-2-f-2, $shop-bg-line);
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 42rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ border: 4rpx solid $shop-bg-line;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin-right: 96rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: $shop-text-6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ width: 142rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: var(--666, $shop-text-6);
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .price-text {
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 44rpx; /* 157.143% */
|
|
|
+ color: var(--ff-4-c-1-b, $shop-primary);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 260rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 48rpx; /* 150% */
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ text-transform: capitalize;
|
|
|
+ background: linear-gradient(270deg, $shop-primary 0%, $shop-help 100%);
|
|
|
+ border-radius: 42rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-bar {
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 88rpx;
|
|
|
+ padding: 18rpx 32rpx;
|
|
|
+
|
|
|
+ .manage-cart {
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 44rpx; /* 157.143% */
|
|
|
+ color: var(--666, $shop-text-6);
|
|
|
+ text-align: right;
|
|
|
+ text-transform: capitalize;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cart-pos {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 26rpx;
|
|
|
+ color: var($shop-text-3, #333333);
|
|
|
+ }
|
|
|
+
|
|
|
+ .pos {
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ gap: 8rpx;
|
|
|
+ align-items: center;
|
|
|
+ align-self: stretch;
|
|
|
+ height: 52rpx;
|
|
|
+ padding: 10rpx 16rpx;
|
|
|
+ margin-left: 32rpx;
|
|
|
+ font-family: 'PingFang SC';
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40rpx; /* 166.667% */
|
|
|
+ color: var(--666, $shop-text-6);
|
|
|
+ background: var(--f-2-f-2-f-2, $shop-bg-line);
|
|
|
+ border-radius: 200rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
