839 lines
20 KiB
Plaintext
839 lines
20 KiB
Plaintext
<template>
|
|
<view class="footprint-page">
|
|
<view v-if="footprints.length > 0" class="top-bar">
|
|
<text class="top-tip">为您展示最多 200 个足迹商品哦</text>
|
|
<view class="top-actions">
|
|
<text v-if="isEditMode" class="action-text action-done" @click="toggleEditMode">完成</text>
|
|
<view v-else class="action-row">
|
|
<text class="action-text action-muted" @click="clearAll">清空</text>
|
|
<text class="action-text action-edit" @click="toggleEditMode">编辑</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view
|
|
:class="['footprint-content', { 'footprint-content-editing': isEditMode }]"
|
|
direction="vertical"
|
|
>
|
|
<view v-if="footprints.length === 0 && !isLoading" class="empty-footprints">
|
|
<text class="empty-icon">足迹</text>
|
|
<text class="empty-text">暂无浏览记录</text>
|
|
<text class="empty-subtext">快去浏览喜欢的商品吧</text>
|
|
<button class="go-shopping-btn" @click="goShopping">去逛逛</button>
|
|
</view>
|
|
|
|
<view v-for="(group, index) in groupedFootprints" :key="group.dateKey + '-' + index" class="date-group">
|
|
<view class="group-header">
|
|
<text class="group-date">{{ group.dateLabel }}</text>
|
|
</view>
|
|
|
|
<view class="group-items">
|
|
<view
|
|
v-for="(item, itemIndex) in group.items"
|
|
:key="item.footprintId + '-' + item.productId"
|
|
:class="['footprint-item', { 'row-third-item': (itemIndex + 1) % 3 === 0 }]"
|
|
@click="viewProduct(item)"
|
|
>
|
|
<view class="item-image-wrap">
|
|
<image class="product-image" :src="item.image" mode="aspectFill" @error="handleImageError(item)" />
|
|
<view v-if="item.isOffShelf" class="sold-out-mask">
|
|
<view class="sold-out-badge">
|
|
<text class="sold-out-cn">已下架</text>
|
|
<text class="sold-out-en">sold out</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item-info">
|
|
<text class="product-name" :lines="2">{{ item.name }}</text>
|
|
<view class="product-bottom">
|
|
<text class="product-price">¥{{ formatPrice(item.price) }}</text>
|
|
<view v-if="isEditMode" class="bottom-selector" @click.stop="toggleSelect(item)">
|
|
<view :class="['select-icon', { selected: item.selected === true }]">
|
|
<text v-if="item.selected === true" class="icon-text">✓</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="footprints.length > 0 && !isLoading" class="no-more-box">
|
|
<view class="no-more-line"></view>
|
|
<text class="no-more-text">没有更多了</text>
|
|
<view class="no-more-line"></view>
|
|
</view>
|
|
|
|
<view v-if="isLoading" class="loading-box">
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view v-if="isEditMode && footprints.length > 0" class="edit-bar">
|
|
<view class="select-all" @click="toggleSelectAll">
|
|
<view :class="['all-select-icon', { selected: isAllSelected }]">
|
|
<text v-if="isAllSelected" class="icon-text">✓</text>
|
|
</view>
|
|
<text class="select-all-text">全选</text>
|
|
</view>
|
|
<view class="delete-btn" @click="deleteSelected">
|
|
<text class="delete-text">{{ getDeleteButtonText() }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { supabaseService } from '@/utils/supabaseService.uts'
|
|
|
|
type FootprintType = {
|
|
footprintId: string
|
|
productId: string
|
|
name: string
|
|
price: number
|
|
originalPrice: number
|
|
image: string
|
|
sales: number
|
|
shopId: string
|
|
shopName: string
|
|
viewTime: number
|
|
selected: boolean
|
|
merchantId: string
|
|
saleStatus: number
|
|
hasRealStatus: boolean
|
|
isOffShelf: boolean
|
|
}
|
|
|
|
type FootprintGroup = {
|
|
dateLabel: string
|
|
dateKey: string
|
|
items: FootprintType[]
|
|
}
|
|
|
|
type FootprintSaveType = {
|
|
footprintId: string
|
|
productId: string
|
|
name: string
|
|
price: number
|
|
originalPrice: number
|
|
image: string
|
|
merchantId: string
|
|
viewTime: number
|
|
saleStatus: number
|
|
hasRealStatus: boolean
|
|
isOffShelf: boolean
|
|
}
|
|
|
|
const STORAGE_KEY = 'footprints_v2'
|
|
const LEGACY_STORAGE_KEY = 'footprints'
|
|
const DEFAULT_PRODUCT_IMAGE = '/static/images/default.png'
|
|
|
|
const footprints = ref<Array<FootprintType>>([])
|
|
const isEditMode = ref(false)
|
|
const isLoading = ref(false)
|
|
|
|
const selectedCount = computed((): number => {
|
|
return footprints.value.filter((item): boolean => item.selected === true).length
|
|
})
|
|
|
|
const isAllSelected = computed((): boolean => {
|
|
return footprints.value.length > 0 && footprints.value.every((item): boolean => item.selected === true)
|
|
})
|
|
|
|
function pad2(value: number): string {
|
|
return value < 10 ? `0${value}` : `${value}`
|
|
}
|
|
|
|
function buildDateKey(timestamp: number): string {
|
|
const date = new Date(timestamp)
|
|
return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`
|
|
}
|
|
|
|
function isSameDay(left: Date, right: Date): boolean {
|
|
return left.getFullYear() === right.getFullYear()
|
|
&& left.getMonth() === right.getMonth()
|
|
&& left.getDate() === right.getDate()
|
|
}
|
|
|
|
function formatGroupDate(timestamp: number): string {
|
|
const date = new Date(timestamp)
|
|
const today = new Date()
|
|
const yesterday = new Date()
|
|
yesterday.setDate(today.getDate() - 1)
|
|
|
|
if (isSameDay(date, today)) {
|
|
return '今天'
|
|
}
|
|
|
|
if (isSameDay(date, yesterday)) {
|
|
return '昨天'
|
|
}
|
|
|
|
return `${date.getMonth() + 1}月${date.getDate()}日`
|
|
}
|
|
|
|
const groupedFootprints = computed((): Array<FootprintGroup> => {
|
|
const result = [] as Array<FootprintGroup>
|
|
|
|
for (let i = 0; i < footprints.value.length; i++) {
|
|
const item = footprints.value[i]
|
|
const dateKey = buildDateKey(item.viewTime)
|
|
|
|
let foundGroup: FootprintGroup | null = null
|
|
for (let j = 0; j < result.length; j++) {
|
|
if (result[j].dateKey === dateKey) {
|
|
foundGroup = result[j]
|
|
break
|
|
}
|
|
}
|
|
|
|
if (foundGroup != null) {
|
|
foundGroup.items.push(item)
|
|
} else {
|
|
result.push({
|
|
dateLabel: formatGroupDate(item.viewTime),
|
|
dateKey,
|
|
items: [item]
|
|
} as FootprintGroup)
|
|
}
|
|
}
|
|
|
|
return result
|
|
})
|
|
|
|
function readStringField(itemObj: UTSJSONObject, key: string): string {
|
|
const value = itemObj.getString(key)
|
|
return value != null ? value : ''
|
|
}
|
|
|
|
function readNumberField(itemObj: UTSJSONObject, key: string): number {
|
|
const value = itemObj.getNumber(key)
|
|
return value != null ? value : 0
|
|
}
|
|
|
|
function readBooleanField(itemObj: UTSJSONObject, key: string): boolean {
|
|
const value = itemObj.getBoolean(key)
|
|
return value != null ? value : false
|
|
}
|
|
|
|
function normalizeItem(item: any): UTSJSONObject {
|
|
if (item instanceof UTSJSONObject) {
|
|
return item as UTSJSONObject
|
|
}
|
|
return JSON.parse(JSON.stringify(item)) as UTSJSONObject
|
|
}
|
|
|
|
function sanitizeImage(image: string): string {
|
|
const trimmed = image.trim()
|
|
if (trimmed === '') return DEFAULT_PRODUCT_IMAGE
|
|
if (trimmed.indexOf('/static/service/') === 0) return DEFAULT_PRODUCT_IMAGE
|
|
if (trimmed.indexOf('/static/images/product/') === 0) return DEFAULT_PRODUCT_IMAGE
|
|
if (trimmed.indexOf('__tmp__/') >= 0) return DEFAULT_PRODUCT_IMAGE
|
|
if (trimmed.indexOf('blob:') === 0) return DEFAULT_PRODUCT_IMAGE
|
|
if (trimmed.indexOf('http://') === 0) return DEFAULT_PRODUCT_IMAGE
|
|
return trimmed
|
|
}
|
|
|
|
function buildCachePayload(items: Array<FootprintType>): Array<FootprintSaveType> {
|
|
const result = [] as Array<FootprintSaveType>
|
|
for (let i = 0; i < items.length; i++) {
|
|
const item = items[i]
|
|
result.push({
|
|
footprintId: item.footprintId,
|
|
productId: item.productId,
|
|
name: item.name,
|
|
price: item.price,
|
|
originalPrice: item.originalPrice,
|
|
image: item.image,
|
|
merchantId: item.merchantId,
|
|
viewTime: item.viewTime,
|
|
saleStatus: item.saleStatus,
|
|
hasRealStatus: item.hasRealStatus,
|
|
isOffShelf: item.isOffShelf
|
|
} as FootprintSaveType)
|
|
}
|
|
return result
|
|
}
|
|
|
|
function persistFootprints(items: Array<FootprintType>): void {
|
|
uni.setStorageSync(STORAGE_KEY, JSON.stringify(buildCachePayload(items)))
|
|
}
|
|
|
|
function clearLocalFootprints(): void {
|
|
uni.removeStorageSync(STORAGE_KEY)
|
|
uni.removeStorageSync(LEGACY_STORAGE_KEY)
|
|
}
|
|
|
|
function sortFootprints(items: Array<FootprintType>): Array<FootprintType> {
|
|
return items.slice().sort((a: FootprintType, b: FootprintType): number => {
|
|
return b.viewTime - a.viewTime
|
|
})
|
|
}
|
|
|
|
const parseFootprintItem = (item: any): FootprintType => {
|
|
const itemObj = normalizeItem(item)
|
|
const footprintId = readStringField(itemObj, 'footprintId') !== '' ? readStringField(itemObj, 'footprintId') : readStringField(itemObj, 'id')
|
|
const productId = readStringField(itemObj, 'productId') !== '' ? readStringField(itemObj, 'productId') : readStringField(itemObj, 'id')
|
|
const merchantId = readStringField(itemObj, 'merchantId') !== '' ? readStringField(itemObj, 'merchantId') : readStringField(itemObj, 'merchant_id')
|
|
let saleStatus = readNumberField(itemObj, 'saleStatus')
|
|
if (saleStatus <= 0) {
|
|
saleStatus = readNumberField(itemObj, 'status')
|
|
}
|
|
const originalPrice = readNumberField(itemObj, 'originalPrice') > 0 ? readNumberField(itemObj, 'originalPrice') : readNumberField(itemObj, 'original_price')
|
|
const hasRealStatus = readBooleanField(itemObj, 'hasRealStatus') || saleStatus > 0
|
|
const isOffShelf = hasRealStatus && saleStatus !== 1
|
|
|
|
return {
|
|
footprintId,
|
|
productId,
|
|
name: readStringField(itemObj, 'name'),
|
|
price: readNumberField(itemObj, 'price'),
|
|
originalPrice,
|
|
image: sanitizeImage(readStringField(itemObj, 'image')),
|
|
sales: readNumberField(itemObj, 'sales'),
|
|
shopId: readStringField(itemObj, 'shopId'),
|
|
shopName: readStringField(itemObj, 'shopName'),
|
|
viewTime: readNumberField(itemObj, 'viewTime'),
|
|
selected: false,
|
|
merchantId,
|
|
saleStatus,
|
|
hasRealStatus,
|
|
isOffShelf
|
|
} as FootprintType
|
|
}
|
|
|
|
function getDeleteButtonText(): string {
|
|
return selectedCount.value > 0 ? `删除(${selectedCount.value})` : '删除'
|
|
}
|
|
|
|
function formatPrice(price: number): string {
|
|
return price.toFixed(2)
|
|
}
|
|
|
|
function handleImageError(item: FootprintType): void {
|
|
if (item.image === DEFAULT_PRODUCT_IMAGE) return
|
|
item.image = DEFAULT_PRODUCT_IMAGE
|
|
footprints.value = [...footprints.value]
|
|
}
|
|
|
|
const toggleEditMode = (): void => {
|
|
isEditMode.value = !isEditMode.value
|
|
for (let i = 0; i < footprints.value.length; i++) {
|
|
footprints.value[i].selected = false
|
|
}
|
|
footprints.value = [...footprints.value]
|
|
}
|
|
|
|
const toggleSelect = (item: FootprintType): void => {
|
|
item.selected = item.selected !== true
|
|
footprints.value = [...footprints.value]
|
|
}
|
|
|
|
const toggleSelectAll = (): void => {
|
|
const nextSelected = !isAllSelected.value
|
|
for (let i = 0; i < footprints.value.length; i++) {
|
|
footprints.value[i].selected = nextSelected
|
|
}
|
|
footprints.value = [...footprints.value]
|
|
}
|
|
|
|
async function executeClearAll(): Promise<void> {
|
|
uni.showLoading({ title: '清空中...' })
|
|
const success = await supabaseService.clearFootprints()
|
|
uni.hideLoading()
|
|
|
|
if (success) {
|
|
footprints.value = []
|
|
isEditMode.value = false
|
|
clearLocalFootprints()
|
|
uni.showToast({
|
|
title: '已清空',
|
|
icon: 'success'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.showToast({
|
|
title: '清空失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
function clearAll(): void {
|
|
if (footprints.value.length === 0) return
|
|
|
|
uni.showModal({
|
|
title: '',
|
|
content: '确定清空浏览记录？',
|
|
cancelText: '取消',
|
|
confirmText: '确认',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
executeClearAll()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
async function executeDeleteSelected(selectedItems: Array<FootprintType>): Promise<void> {
|
|
const footprintIds = [] as Array<string>
|
|
for (let i = 0; i < selectedItems.length; i++) {
|
|
if (selectedItems[i].footprintId !== '') {
|
|
footprintIds.push(selectedItems[i].footprintId)
|
|
}
|
|
}
|
|
|
|
if (footprintIds.length === 0) {
|
|
uni.showToast({
|
|
title: '记录ID缺失',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.showLoading({ title: '删除中...' })
|
|
const success = await supabaseService.deleteFootprints(footprintIds)
|
|
uni.hideLoading()
|
|
|
|
if (success) {
|
|
const remained = footprints.value.filter((item): boolean => item.selected !== true)
|
|
footprints.value = sortFootprints(remained)
|
|
if (footprints.value.length > 0) {
|
|
persistFootprints(footprints.value)
|
|
} else {
|
|
isEditMode.value = false
|
|
clearLocalFootprints()
|
|
}
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'success'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.showToast({
|
|
title: '删除失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
function deleteSelected(): void {
|
|
const selectedItems = footprints.value.filter((item): boolean => item.selected === true)
|
|
if (selectedItems.length === 0) {
|
|
uni.showToast({
|
|
title: '请选择要删除的记录',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.showModal({
|
|
title: '',
|
|
content: `确定删除选中的 ${selectedItems.length} 条浏览记录？`,
|
|
cancelText: '取消',
|
|
confirmText: '确认',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
executeDeleteSelected(selectedItems)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const viewProduct = (item: FootprintType): void => {
|
|
if (isEditMode.value) return
|
|
if (item.isOffShelf) {
|
|
uni.showToast({
|
|
title: '该商品已下架',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.navigateTo({
|
|
url: `/pages/mall/consumer/product-detail?productId=${item.productId}`
|
|
})
|
|
}
|
|
|
|
const goShopping = (): void => {
|
|
uni.switchTab({
|
|
url: '/pages/main/index'
|
|
})
|
|
}
|
|
|
|
function parseStoredFootprints(storedValue: string): Array<FootprintType> {
|
|
const data = JSON.parse(storedValue) as Array<any>
|
|
const newFootprints = [] as Array<FootprintType>
|
|
for (let i = 0; i < data.length; i++) {
|
|
newFootprints.push(parseFootprintItem(data[i]))
|
|
}
|
|
return sortFootprints(newFootprints)
|
|
}
|
|
|
|
function loadLocalFootprints(): void {
|
|
const storedFootprints = uni.getStorageSync(STORAGE_KEY)
|
|
const legacyFootprints = uni.getStorageSync(LEGACY_STORAGE_KEY)
|
|
const source = storedFootprints != null && storedFootprints !== '' ? storedFootprints as string : legacyFootprints as string
|
|
if (source == null || source === '') {
|
|
footprints.value = []
|
|
return
|
|
}
|
|
|
|
try {
|
|
footprints.value = parseStoredFootprints(source)
|
|
if (source === legacyFootprints && footprints.value.length > 0) {
|
|
persistFootprints(footprints.value)
|
|
uni.removeStorageSync(LEGACY_STORAGE_KEY)
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to parse footprints', e)
|
|
footprints.value = []
|
|
}
|
|
}
|
|
|
|
const loadFootprints = async (): Promise<void> => {
|
|
isLoading.value = true
|
|
|
|
try {
|
|
const remoteData = await supabaseService.getFootprints()
|
|
const remoteFootprints = [] as Array<FootprintType>
|
|
for (let i = 0; i < remoteData.length; i++) {
|
|
remoteFootprints.push(parseFootprintItem(remoteData[i]))
|
|
}
|
|
footprints.value = sortFootprints(remoteFootprints)
|
|
|
|
if (footprints.value.length > 0) {
|
|
persistFootprints(footprints.value)
|
|
} else {
|
|
clearLocalFootprints()
|
|
}
|
|
} catch (e) {
|
|
console.error('加载足迹失败', e)
|
|
loadLocalFootprints()
|
|
}
|
|
|
|
isLoading.value = false
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadFootprints()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.footprint-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.top-bar {
|
|
background-color: #f5f5f5;
|
|
padding: 18px 16px 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.top-tip {
|
|
flex: 1;
|
|
font-size: 12px;
|
|
color: #a0a0a0;
|
|
}
|
|
|
|
.top-actions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.action-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.action-text {
|
|
font-size: 14px;
|
|
padding: 6px 0;
|
|
margin-left: 18px;
|
|
}
|
|
|
|
.action-muted {
|
|
color: #666666;
|
|
}
|
|
|
|
.action-edit,
|
|
.action-done {
|
|
color: #e1251b;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.footprint-content {
|
|
flex: 1;
|
|
height: 0px;
|
|
padding: 0 12px calc(12px + env(safe-area-inset-bottom));
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.footprint-content-editing {
|
|
padding-bottom: calc(88px + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.empty-footprints {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 88px 24px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 28px;
|
|
color: #d0d0d0;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 16px;
|
|
color: #666666;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.empty-subtext {
|
|
font-size: 13px;
|
|
color: #999999;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.go-shopping-btn {
|
|
background-color: #e1251b;
|
|
color: #ffffff;
|
|
padding: 10px 36px;
|
|
border-radius: 22px;
|
|
font-size: 14px;
|
|
border: none;
|
|
}
|
|
|
|
.date-group {
|
|
background-color: #ffffff;
|
|
border-radius: 16px;
|
|
padding: 14px 12px 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.group-header {
|
|
padding: 0 2px 12px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.group-date {
|
|
font-size: 15px;
|
|
color: #222222;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.group-items {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.footprint-item {
|
|
width: 31.6%;
|
|
margin-right: 2.6%;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.footprint-item.row-third-item {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.item-image-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 104px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.product-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.sold-out-mask {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.36);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sold-out-badge {
|
|
min-width: 76px;
|
|
padding: 6px 8px;
|
|
border-radius: 22px;
|
|
background-color: rgba(80, 80, 80, 0.88);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sold-out-cn {
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sold-out-en {
|
|
font-size: 9px;
|
|
color: #d7d7d7;
|
|
margin-top: 2px;
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.item-info {
|
|
padding: 8px 2px 0;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 12px;
|
|
color: #222222;
|
|
line-height: 1.45;
|
|
height: 34px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.product-bottom {
|
|
margin-top: 6px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.product-price {
|
|
font-size: 14px;
|
|
color: #e1251b;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.bottom-selector {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.select-icon,
|
|
.all-select-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #cfcfcf;
|
|
border-radius: 10px;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.select-icon.selected,
|
|
.all-select-icon.selected {
|
|
background-color: #e1251b;
|
|
border-color: #e1251b;
|
|
}
|
|
|
|
.icon-text {
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.loading-box {
|
|
padding: 24px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.no-more-box {
|
|
padding: 6px 0 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.no-more-line {
|
|
width: 48px;
|
|
height: 1px;
|
|
background-color: #dddddd;
|
|
}
|
|
|
|
.no-more-text {
|
|
margin: 0 12px;
|
|
font-size: 12px;
|
|
color: #a6a6a6;
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 13px;
|
|
color: #9a9a9a;
|
|
}
|
|
|
|
.edit-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ffffff;
|
|
border-top: 1px solid #ececec;
|
|
padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.select-all {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.select-all-text {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.delete-btn {
|
|
background-color: #e1251b;
|
|
border-radius: 18px;
|
|
padding: 10px 24px;
|
|
}
|
|
|
|
.delete-text {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|