页面提交

src/components/cart/CartItem.vue

@@ -0,0 +1,173 @@
+<template>
+  <view class="cart-item">
+    <!-- 选中框 -->
+    <view class="checkbox" @click="handleToggle">
+      <text
+        class="icon"
+        :class="checked ? 'i-carbon-checkbox-checked' : 'i-carbon-checkbox'"
+      ></text>
+    </view>
+
+    <!-- 商品图片 -->
+    <image class="cover" :src="item.cover" mode="aspectFill" @click="goToDetail" />
+
+    <!-- 商品信息 -->
+    <view class="info">
+      <view class="name" @click="goToDetail">{{ item.goodsName }}</view>
+      <view class="specs" v-if="specText">
+        <text>{{ specText }}</text>
+      </view>
+      <view class="bottom">
+        <view class="price">¥{{ item.price }}</view>
+        <CounterInput
+          :model-value="item.quantity"
+          :max="item.stock"
+          @update:model-value="handleQuantityChange"
+        />
+      </view>
+    </view>
+
+    <!-- 删除按钮（滑动或长按显示，这里简化为右上角图标） -->
+    <view class="delete-btn" @click="handleDelete">
+      <text class="i-carbon-trash-can"></text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { CartItem } from '@/typings/mall'
+import CounterInput from '../common/CounterInput.vue'
+
+interface Props {
+  item: CartItem
+  checked?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  checked: false,
+})
+
+const emit = defineEmits<{
+  toggle: [id: string]
+  delete: [id: string]
+  updateQuantity: [id: string, quantity: number]
+}>()
+
+const specText = computed(() => {
+  return Object.values(props.item.selectedSpec).join('，')
+})
+
+function handleToggle() {
+  emit('toggle', props.item.id)
+}
+
+function handleDelete() {
+  uni.showModal({
+    title: '提示',
+    content: '确定要删除该商品吗？',
+    success: (res) => {
+      if (res.confirm) {
+        emit('delete', props.item.id)
+      }
+    },
+  })
+}
+
+function handleQuantityChange(val: number) {
+  emit('updateQuantity', props.item.id, val)
+}
+
+function goToDetail() {
+  uni.navigateTo({
+    url: `/pages/goods/detail?id=${props.item.goodsId}`,
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.cart-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 0;
+  // background: #fff; // 移除背景色，由父级控制
+  // border-radius: 16rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+  margin-bottom: 0;
+  
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+  position: relative;
+}
+
+.checkbox {
+  padding: 20rpx;
+  margin-left: -20rpx;
+  
+  .icon {
+    font-size: 40rpx;
+    color: #ccc;
+    
+    &.i-carbon-checkbox-checked {
+      color: #ff4d4f;
+    }
+  }
+}
+
+.cover {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 12rpx;
+  background: #f5f5f5;
+  margin-right: 20rpx;
+}
+
+.info {
+  flex: 1;
+  height: 160rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.name {
+  font-size: 28rpx;
+  color: #333;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.specs {
+  font-size: 24rpx;
+  color: #999;
+  background: #f5f5f5;
+  padding: 4rpx 12rpx;
+  border-radius: 8rpx;
+  align-self: flex-start;
+}
+
+.bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.price {
+  font-size: 32rpx;
+  color: #ff4d4f;
+  font-weight: 600;
+}
+
+.delete-btn {
+  position: absolute;
+  top: 24rpx;
+  right: 24rpx;
+  padding: 10rpx;
+  color: #999;
+  font-size: 32rpx;
+}
+</style>

src/components/cart/CartSummary.vue

@@ -0,0 +1,133 @@
+<template>
+  <view class="cart-summary">
+    <view class="left">
+      <view class="checkbox" @click="handleToggleAll">
+        <text
+          class="icon"
+          :class="allChecked ? 'i-carbon-checkbox-checked' : 'i-carbon-checkbox'"
+        ></text>
+        <text class="text">全选</text>
+      </view>
+    </view>
+    <view class="right">
+      <view class="total-info">
+        <text class="label">合计：</text>
+        <text class="price">¥{{ totalPrice.toFixed(2) }}</text>
+      </view>
+      <view
+        class="checkout-btn"
+        :class="{ disabled: totalCount === 0 }"
+        @click="handleCheckout"
+      >
+        结算({{ totalCount }})
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  allChecked: boolean
+  totalPrice: number
+  totalCount: number
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  toggleAll: []
+  checkout: []
+}>()
+
+function handleToggleAll() {
+  emit('toggleAll')
+}
+
+function handleCheckout() {
+  if (props.totalCount === 0) return
+  emit('checkout')
+}
+</script>
+
+<style lang="scss" scoped>
+.cart-summary {
+  position: fixed;
+  bottom: 0; // 如果有 tabbar，可能需要调整 bottom
+  /* #ifdef H5 */
+  bottom: 50px; // H5 tabbar 高度
+  /* #endif */
+  left: 0;
+  width: 100%;
+  height: 100rpx;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24rpx;
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+  z-index: 99;
+  box-sizing: border-box;
+}
+
+.left {
+  .checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    
+    .icon {
+      font-size: 40rpx;
+      color: #ccc;
+      
+      &.i-carbon-checkbox-checked {
+        color: #ff4d4f;
+      }
+    }
+    
+    .text {
+      font-size: 28rpx;
+      color: #333;
+    }
+  }
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+  
+  .total-info {
+    display: flex;
+    align-items: baseline;
+    
+    .label {
+      font-size: 28rpx;
+      color: #333;
+    }
+    
+    .price {
+      font-size: 36rpx;
+      color: #ff4d4f;
+      font-weight: 600;
+    }
+  }
+  
+  .checkout-btn {
+    width: 200rpx;
+    height: 72rpx;
+    background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4f 100%);
+    color: #fff;
+    font-size: 28rpx;
+    font-weight: 600;
+    border-radius: 36rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &.disabled {
+      background: #ccc;
+      color: #fff;
+    }
+  }
+}
+</style>

src/components/common/Banner.vue

@@ -0,0 +1,77 @@
+<template>
+  <view class="banner">
+    <swiper
+      class="swiper"
+      :indicator-dots="indicatorDots"
+      :autoplay="autoplay"
+      :interval="interval"
+      :duration="duration"
+      :circular="circular"
+      @change="onChange"
+    >
+      <swiper-item v-for="item in list" :key="item.id" @click="handleClick(item)">
+        <image class="banner-image" :src="item.image" mode="aspectFill" />
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { Banner } from '@/typings/mall'
+
+interface Props {
+  list: Banner[] // 轮播图列表
+  indicatorDots?: boolean // 是否显示指示点
+  autoplay?: boolean // 是否自动播放
+  interval?: number // 自动切换时间间隔
+  duration?: number // 滑动动画时长
+  circular?: boolean // 是否循环播放
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  indicatorDots: true,
+  autoplay: true,
+  interval: 3000,
+  duration: 500,
+  circular: true,
+})
+
+const emit = defineEmits<{
+  change: [index: number]
+  click: [item: Banner]
+}>()
+
+const currentIndex = ref(0)
+
+function onChange(e: any) {
+  currentIndex.value = e.detail.current
+  emit('change', e.detail.current)
+}
+
+function handleClick(item: Banner) {
+  emit('click', item)
+  // 如果有关联商品，跳转到商品详情
+  if (item.goodsId) {
+    uni.navigateTo({
+      url: `/pages/goods/detail?id=${item.goodsId}`,
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  width: 100%;
+  height: 400rpx;
+}
+
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.banner-image {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/common/CategoryGrid.vue

@@ -0,0 +1,79 @@
+<template>
+  <view class="category-grid">
+    <view
+      v-for="item in list"
+      :key="item.id"
+      class="category-item"
+      @click="handleClick(item)"
+    >
+      <view class="icon-wrapper">
+        <text class="icon" :class="item.icon"></text>
+      </view>
+      <text class="name">{{ item.name }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { Category } from '@/typings/mall'
+
+interface Props {
+  list: Category[] // 分类列表
+  columns?: number // 列数
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  columns: 4,
+})
+
+const emit = defineEmits<{
+  click: [item: Category]
+}>()
+
+function handleClick(item: Category) {
+  emit('click', item)
+  // 跳转到分类页面
+  uni.navigateTo({
+    url: `/pages/sort/index?categoryId=${item.id}`,
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.category-grid {
+  display: grid;
+  grid-template-columns: repeat(v-bind(columns), 1fr);
+  gap: 24rpx;
+  padding: 24rpx;
+  background: #fff;
+}
+
+.category-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.icon-wrapper {
+  width: 96rpx;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 24rpx;
+  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+
+  .icon {
+    font-size: 48rpx;
+    color: #fff;
+  }
+}
+
+.name {
+  font-size: 24rpx;
+  color: #333;
+  text-align: center;
+}
+</style>

src/components/common/CounterInput.vue

@@ -0,0 +1,124 @@
+<template>
+  <view class="counter-input">
+    <view
+      class="btn btn-minus"
+      :class="{ disabled: modelValue <= min }"
+      @click="decrease"
+    >
+      <text class="i-carbon-subtract"></text>
+    </view>
+    <input
+      v-model="displayValue"
+      class="input"
+      type="number"
+      :disabled="disabled"
+      @blur="handleBlur"
+    >
+    <view
+      class="btn btn-plus"
+      :class="{ disabled: modelValue >= max }"
+      @click="increase"
+    >
+      <text class="i-carbon-add"></text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue: number // 当前值
+  min?: number // 最小值
+  max?: number // 最大值
+  step?: number // 步长
+  disabled?: boolean // 是否禁用
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  min: 1,
+  max: 999,
+  step: 1,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+const displayValue = ref(props.modelValue.toString())
+
+// 监听 modelValue 变化
+watch(() => props.modelValue, (val) => {
+  displayValue.value = val.toString()
+})
+
+// 减少
+function decrease() {
+  if (props.modelValue <= props.min)
+    return
+  const newValue = Math.max(props.min, props.modelValue - props.step)
+  emit('update:modelValue', newValue)
+}
+
+// 增加
+function increase() {
+  if (props.modelValue >= props.max)
+    return
+  const newValue = Math.min(props.max, props.modelValue + props.step)
+  emit('update:modelValue', newValue)
+}
+
+// 输入框失焦
+function handleBlur() {
+  let value = Number.parseInt(displayValue.value, 10)
+  if (Number.isNaN(value) || value < props.min) {
+    value = props.min
+  }
+  else if (value > props.max) {
+    value = props.max
+  }
+  displayValue.value = value.toString()
+  emit('update:modelValue', value)
+}
+</script>
+
+<style lang="scss" scoped>
+.counter-input {
+  display: flex;
+  align-items: center;
+  background: #f7f8fa;
+  border-radius: 30rpx;
+  padding: 4rpx;
+}
+
+.btn {
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333;
+  font-size: 32rpx;
+  border-radius: 28rpx;
+  transition: all 0.3s;
+
+  &:active:not(.disabled) {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  &.disabled {
+    color: #ccc;
+  }
+}
+
+.input {
+  width: 80rpx;
+  height: 56rpx;
+  text-align: center;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #333;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+</style>

src/components/common/PriceTag.vue

@@ -0,0 +1,89 @@
+<template>
+  <view class="price-tag">
+    <view v-if="showOriginal && originalPrice && originalPrice > price" class="original-price">
+      ¥{{ formatPrice(originalPrice) }}
+    </view>
+    <view class="current-price" :class="{ large: size === 'large' }">
+      <text class="symbol">¥</text>
+      <text class="integer">{{ priceInteger }}</text>
+      <text class="decimal">.{{ priceDecimal }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  price: number // 当前价格
+  originalPrice?: number // 原价
+  showOriginal?: boolean // 是否显示原价
+  size?: 'normal' | 'large' // 尺寸
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showOriginal: true,
+  size: 'normal',
+})
+
+// 格式化价格
+function formatPrice(price: number) {
+  return price.toFixed(2)
+}
+
+// 价格整数部分
+const priceInteger = computed(() => {
+  return Math.floor(props.price).toString()
+})
+
+// 价格小数部分
+const priceDecimal = computed(() => {
+  const decimal = (props.price % 1).toFixed(2).slice(2)
+  return decimal
+})
+</script>
+
+<style lang="scss" scoped>
+.price-tag {
+  display: flex;
+  align-items: baseline;
+  gap: 8rpx;
+}
+
+.original-price {
+  font-size: 24rpx;
+  color: #999;
+  text-decoration: line-through;
+}
+
+.current-price {
+  color: #ff4d4f;
+  font-weight: 600;
+  display: flex;
+  align-items: baseline;
+
+  &.large {
+    .symbol {
+      font-size: 28rpx;
+    }
+
+    .integer {
+      font-size: 40rpx;
+    }
+
+    .decimal {
+      font-size: 28rpx;
+    }
+  }
+
+  .symbol {
+    font-size: 24rpx;
+  }
+
+  .integer {
+    font-size: 32rpx;
+  }
+
+  .decimal {
+    font-size: 24rpx;
+  }
+}
+</style>

src/components/common/SearchBar.vue

@@ -0,0 +1,137 @@
+<template>
+  <view class="search-bar" :class="{ focused: isFocused }">
+    <view class="search-input-wrapper">
+      <text class="icon i-carbon-search"></text>
+      <input
+        v-model="searchValue"
+        class="search-input"
+        type="text"
+        :placeholder="placeholder"
+        :placeholder-style="placeholderStyle"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @confirm="handleSearch"
+      >
+      <text v-if="searchValue" class="icon i-carbon-close" @click="handleClear"></text>
+    </view>
+    <view v-if="showCancel && isFocused" class="cancel-btn" @click="handleCancel">
+      取消
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue?: string // 搜索值
+  placeholder?: string // 占位符
+  showCancel?: boolean // 是否显示取消按钮
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: '搜索商品',
+  showCancel: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'search': [value: string]
+  'cancel': []
+  'clear': []
+}>()
+
+const searchValue = ref(props.modelValue)
+const isFocused = ref(false)
+
+const placeholderStyle = 'color: #999; font-size: 28rpx'
+
+// 监听 modelValue 变化
+watch(() => props.modelValue, (val) => {
+  searchValue.value = val
+})
+
+// 监听 searchValue 变化
+watch(searchValue, (val) => {
+  emit('update:modelValue', val)
+})
+
+function handleFocus() {
+  isFocused.value = true
+}
+
+function handleBlur() {
+  setTimeout(() => {
+    isFocused.value = false
+  }, 200)
+}
+
+function handleSearch() {
+  emit('search', searchValue.value)
+}
+
+function handleClear() {
+  searchValue.value = ''
+  emit('clear')
+}
+
+function handleCancel() {
+  searchValue.value = ''
+  isFocused.value = false
+  emit('cancel')
+}
+</script>
+
+<style lang="scss" scoped>
+.search-bar {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 24rpx;
+  background: #fff;
+  transition: all 0.3s;
+
+  &.focused {
+    .search-input-wrapper {
+      flex: 1;
+    }
+  }
+}
+
+.search-input-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 64rpx;
+  padding: 0 24rpx;
+  background: #f5f5f5;
+  border-radius: 32rpx;
+  transition: all 0.3s;
+
+  .icon {
+    font-size: 32rpx;
+    color: #999;
+
+    &.i-carbon-close {
+      margin-left: auto;
+      padding: 8rpx;
+    }
+  }
+
+  .search-input {
+    flex: 1;
+    height: 100%;
+    margin-left: 16rpx;
+    font-size: 28rpx;
+    border: none;
+    outline: none;
+    background: transparent;
+  }
+}
+
+.cancel-btn {
+  margin-left: 16rpx;
+  padding: 0 16rpx;
+  font-size: 28rpx;
+  color: #333;
+  white-space: nowrap;
+}
+</style>

src/components/finance/CreditCard.vue

@@ -0,0 +1,148 @@
+<template>
+  <view class="credit-card">
+    <view class="header">
+      <text class="title">{{ title }}</text>
+      <text class="date">更新于 {{ updateTime }}</text>
+    </view>
+    
+    <view class="content">
+      <view class="row">
+        <view class="item">
+          <text class="label">总额度</text>
+          <text class="value">¥{{ formatPrice(totalLimit) }}</text>
+        </view>
+        <view class="item">
+          <text class="label">可用额度</text>
+          <text class="value highlight">¥{{ formatPrice(availableLimit) }}</text>
+        </view>
+      </view>
+      
+      <!-- 进度条 -->
+      <view class="progress-wrapper">
+        <view class="progress-bg">
+          <view class="progress-bar" :style="{ width: percent + '%' }"></view>
+        </view>
+        <view class="progress-text">
+          <text>已用 {{ percent }}%</text>
+          <text>¥{{ formatPrice(usedLimit) }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title: string
+  totalLimit: number
+  usedLimit: number
+  availableLimit: number
+  updateTime: string
+}
+
+const props = defineProps<Props>()
+
+const percent = computed(() => {
+  if (props.totalLimit === 0) return 0
+  return Math.min(100, Math.round((props.usedLimit / props.totalLimit) * 100))
+})
+
+function formatPrice(price: number) {
+  return price.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+}
+</script>
+
+<style lang="scss" scoped>
+.credit-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  margin-bottom: 24rpx;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30rpx;
+  
+  .title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+    position: relative;
+    padding-left: 20rpx;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 8rpx;
+      height: 32rpx;
+      background: #ff4d4f;
+      border-radius: 4rpx;
+    }
+  }
+  
+  .date {
+    font-size: 24rpx;
+    color: #999;
+  }
+}
+
+.content {
+  .row {
+    display: flex;
+    margin-bottom: 30rpx;
+    
+    .item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      
+      .label {
+        font-size: 26rpx;
+        color: #666;
+      }
+      
+      .value {
+        font-size: 36rpx;
+        font-weight: 600;
+        color: #333;
+        
+        &.highlight {
+          color: #52c41a;
+        }
+      }
+    }
+  }
+  
+  .progress-wrapper {
+    .progress-bg {
+      height: 12rpx;
+      background: #f5f5f5;
+      border-radius: 6rpx;
+      overflow: hidden;
+      margin-bottom: 12rpx;
+    }
+    
+    .progress-bar {
+      height: 100%;
+      background: linear-gradient(90deg, #ff9c6e 0%, #ff4d4f 100%);
+      border-radius: 6rpx;
+      transition: width 0.3s ease;
+    }
+    
+    .progress-text {
+      display: flex;
+      justify-content: space-between;
+      font-size: 24rpx;
+      color: #999;
+    }
+  }
+}
+</style>

src/components/finance/SettlementItem.vue

@@ -0,0 +1,169 @@
+<template>
+  <view class="settlement-item">
+    <view class="header">
+      <text class="order-no">订单号：{{ item.orderNo }}</text>
+      <text class="status" :class="statusClass">{{ statusText }}</text>
+    </view>
+    
+    <view class="content">
+      <view class="row">
+        <text class="label">商户名称</text>
+        <text class="value">{{ item.merchantName }}</text>
+      </view>
+      <view class="row">
+        <text class="label">应结金额</text>
+        <text class="value price">¥{{ item.amount.toFixed(2) }}</text>
+      </view>
+      <view class="row">
+        <text class="label">到期日期</text>
+        <text class="value">{{ item.dueDate }}</text>
+      </view>
+      <view class="row" v-if="item.settlementDate">
+        <text class="label">结算日期</text>
+        <text class="value">{{ item.settlementDate }}</text>
+      </view>
+    </view>
+    
+    <view class="footer" v-if="showAction">
+      <view class="btn" @click="handleAction">申请消账</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { SettlementStatus } from '@/typings/mall'
+import type { Settlement } from '@/typings/mall'
+
+interface Props {
+  item: Settlement
+  showAction?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showAction: false,
+})
+
+const emit = defineEmits<{
+  action: [item: Settlement]
+}>()
+
+const statusText = computed(() => {
+  switch (props.item.status) {
+    case SettlementStatus.SETTLED:
+      return '已结'
+    case SettlementStatus.UNSETTLED:
+      return '未结'
+    case SettlementStatus.OVERDUE:
+      return '已逾期'
+    default:
+      return ''
+  }
+})
+
+const statusClass = computed(() => {
+  switch (props.item.status) {
+    case SettlementStatus.SETTLED:
+      return 'success'
+    case SettlementStatus.UNSETTLED:
+      return 'warning'
+    case SettlementStatus.OVERDUE:
+      return 'danger'
+    default:
+      return ''
+  }
+})
+
+function handleAction() {
+  emit('action', props.item)
+}
+</script>
+
+<style lang="scss" scoped>
+.settlement-item {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 20rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+  margin-bottom: 20rpx;
+  
+  .order-no {
+    font-size: 26rpx;
+    color: #666;
+  }
+  
+  .status {
+    font-size: 24rpx;
+    padding: 4rpx 12rpx;
+    border-radius: 4rpx;
+    
+    &.success {
+      color: #52c41a;
+      background: #f6ffed;
+      border: 1rpx solid #b7eb8f;
+    }
+    
+    &.warning {
+      color: #faad14;
+      background: #fffbe6;
+      border: 1rpx solid #ffe58f;
+    }
+    
+    &.danger {
+      color: #ff4d4f;
+      background: #fff1f0;
+      border: 1rpx solid #ffa39e;
+    }
+  }
+}
+
+.content {
+  .row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16rpx;
+    font-size: 28rpx;
+    
+    .label {
+      color: #666;
+    }
+    
+    .value {
+      color: #333;
+      
+      &.price {
+        font-weight: 600;
+        color: #ff4d4f;
+      }
+    }
+  }
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 20rpx;
+  border-top: 1rpx solid #f5f5f5;
+  margin-top: 20rpx;
+  
+  .btn {
+    padding: 12rpx 32rpx;
+    background: #1890ff;
+    color: #fff;
+    font-size: 26rpx;
+    border-radius: 30rpx;
+    
+    &:active {
+      opacity: 0.8;
+    }
+  }
+}
+</style>

src/components/finance/WriteOffForm.vue

@@ -0,0 +1,303 @@
+<template>
+  <view class="write-off-popup" :class="{ show: visible }">
+    <view class="mask" @click="handleClose"></view>
+    <view class="content">
+      <view class="header">
+        <text class="title">提交消账申请</text>
+        <text class="close-btn i-carbon-close" @click="handleClose"></text>
+      </view>
+      
+      <scroll-view scroll-y class="body">
+        <view class="form-item">
+          <view class="label">消账金额</view>
+          <input
+            v-model="formData.amount"
+            class="input"
+            type="digit"
+            placeholder="请输入金额"
+          />
+        </view>
+        
+        <view class="form-item">
+          <view class="label">备注说明</view>
+          <textarea
+            v-model="formData.remark"
+            class="textarea"
+            placeholder="请输入备注说明"
+          />
+        </view>
+        
+        <view class="form-item">
+          <view class="label">上传凭证</view>
+          <view class="upload-box" @click="handleUpload">
+            <text class="i-carbon-add icon"></text>
+            <text class="text">上传图片</text>
+          </view>
+          <view class="preview-list" v-if="formData.proof.length">
+            <view
+              v-for="(img, index) in formData.proof"
+              :key="index"
+              class="preview-item"
+            >
+              <image :src="img" mode="aspectFill" />
+              <view class="del-btn" @click="handleRemoveImg(index)">
+                <text class="i-carbon-close"></text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+      
+      <view class="footer">
+        <view class="btn submit-btn" @click="handleSubmit">提交申请</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  visible: boolean
+  defaultAmount?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultAmount: 0,
+})
+
+const emit = defineEmits<{
+  'update:visible': [visible: boolean]
+  'submit': [data: { amount: number, remark: string, proof: string[] }]
+}>()
+
+const formData = reactive({
+  amount: '',
+  remark: '',
+  proof: [] as string[],
+})
+
+watch(() => props.visible, (val) => {
+  if (val) {
+    formData.amount = props.defaultAmount.toString()
+    formData.remark = ''
+    formData.proof = []
+  }
+})
+
+function handleClose() {
+  emit('update:visible', false)
+}
+
+function handleUpload() {
+  // 模拟上传
+  uni.chooseImage({
+    count: 1,
+    success: (res) => {
+      // 实际开发中需要上传到服务器，这里直接使用本地路径模拟
+      formData.proof.push(res.tempFilePaths[0])
+    },
+  })
+}
+
+function handleRemoveImg(index: number) {
+  formData.proof.splice(index, 1)
+}
+
+function handleSubmit() {
+  const amount = Number.parseFloat(formData.amount)
+  if (!amount || amount <= 0) {
+    uni.showToast({ title: '请输入有效金额', icon: 'none' })
+    return
+  }
+  if (!formData.remark) {
+    uni.showToast({ title: '请输入备注', icon: 'none' })
+    return
+  }
+  
+  emit('submit', {
+    amount,
+    remark: formData.remark,
+    proof: [...formData.proof],
+  })
+  handleClose()
+}
+</script>
+
+<style lang="scss" scoped>
+.write-off-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  visibility: hidden;
+  transition: visibility 0.3s;
+
+  &.show {
+    visibility: visible;
+
+    .mask {
+      opacity: 1;
+    }
+
+    .content {
+      transform: translateY(0);
+    }
+  }
+}
+
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  transform: translateY(100%);
+  transition: transform 0.3s;
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+}
+
+.header {
+  padding: 30rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1rpx solid #f5f5f5;
+  
+  .title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+  }
+  
+  .close-btn {
+    font-size: 40rpx;
+    color: #999;
+  }
+}
+
+.body {
+  padding: 30rpx;
+  max-height: 600rpx;
+}
+
+.form-item {
+  margin-bottom: 30rpx;
+  
+  .label {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 16rpx;
+  }
+  
+  .input {
+    height: 80rpx;
+    background: #f5f5f5;
+    border-radius: 8rpx;
+    padding: 0 20rpx;
+    font-size: 28rpx;
+  }
+  
+  .textarea {
+    width: 100%;
+    height: 160rpx;
+    background: #f5f5f5;
+    border-radius: 8rpx;
+    padding: 20rpx;
+    font-size: 28rpx;
+    box-sizing: border-box;
+  }
+}
+
+.upload-box {
+  width: 160rpx;
+  height: 160rpx;
+  background: #f5f5f5;
+  border-radius: 8rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  
+  .icon {
+    font-size: 48rpx;
+    margin-bottom: 8rpx;
+  }
+  
+  .text {
+    font-size: 24rpx;
+  }
+}
+
+.preview-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
+  margin-top: 20rpx;
+  
+  .preview-item {
+    width: 160rpx;
+    height: 160rpx;
+    position: relative;
+    
+    image {
+      width: 100%;
+      height: 100%;
+      border-radius: 8rpx;
+    }
+    
+    .del-btn {
+      position: absolute;
+      top: -10rpx;
+      right: -10rpx;
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 24rpx;
+    }
+  }
+}
+
+.footer {
+  padding: 20rpx 30rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  border-top: 1rpx solid #f5f5f5;
+  
+  .submit-btn {
+    height: 88rpx;
+    background: #1890ff;
+    color: #fff;
+    font-size: 32rpx;
+    font-weight: 600;
+    border-radius: 44rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &:active {
+      opacity: 0.9;
+    }
+  }
+}
+</style>

src/components/goods/GoodsCard.vue

@@ -0,0 +1,130 @@
+<template>
+  <view class="goods-card" @click="handleClick">
+    <image class="cover" :src="goods.cover" mode="aspectFill" />
+    <view class="info">
+      <view class="shop-name" v-if="goods.shopName">
+        <text class="i-carbon-store icon"></text>
+        <text>{{ goods.shopName }}</text>
+      </view>
+      <view class="name">{{ goods.name }}</view>
+      <view class="tags" v-if="goods.tags && goods.tags.length">
+        <text v-for="tag in goods.tags" :key="tag" class="tag">{{ tag }}</text>
+      </view>
+      <view class="bottom">
+        <PriceTag :price="goods.price" :original-price="goods.originalPrice" size="normal" />
+        <view class="sales">已售{{ formatSales(goods.sales) }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { Goods } from '@/typings/mall'
+import PriceTag from '../common/PriceTag.vue'
+
+interface Props {
+  goods: Goods
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  click: [goods: Goods]
+}>()
+
+function handleClick() {
+  emit('click', props.goods)
+  uni.navigateTo({
+    url: `/pages/goods/detail?id=${props.goods.id}`,
+  })
+}
+
+function formatSales(sales: number) {
+  if (sales >= 10000) {
+    return `${(sales / 10000).toFixed(1)}万`
+  }
+  return sales.toString()
+}
+</script>
+
+<style lang="scss" scoped>
+.goods-card {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+  transition: all 0.3s;
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.cover {
+  width: 100%;
+  height: 340rpx;
+  background: #f5f5f5;
+}
+
+.info {
+  padding: 16rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.shop-name {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  font-size: 24rpx;
+  color: #666;
+  
+  .icon {
+    font-size: 28rpx;
+  }
+}
+
+.name {
+  font-size: 28rpx;
+  color: #333;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: 78rpx;
+}
+
+.tags {
+  display: flex;
+  gap: 8rpx;
+  flex-wrap: wrap;
+}
+
+.tag {
+  padding: 4rpx 12rpx;
+  font-size: 20rpx;
+  color: #ff4d4f;
+  background: #fff1f0;
+  border-radius: 4rpx;
+}
+
+.bottom {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-top: 8rpx;
+  flex-wrap: wrap; // 允许换行
+  gap: 8rpx; // 增加间距
+}
+
+.sales {
+  font-size: 24rpx;
+  color: #999;
+  white-space: nowrap; // 防止文字竖排
+}
+</style>

src/components/goods/SpecSelector.vue

@@ -0,0 +1,294 @@
+<template>
+  <view class="spec-selector-popup" :class="{ show: visible }">
+    <view class="mask" @click="handleClose"></view>
+    <view class="content">
+      <view class="header">
+        <image class="goods-img" :src="goods.cover" mode="aspectFill" />
+        <view class="info">
+          <view class="price-wrapper">
+            <text class="currency">¥</text>
+            <text class="price">{{ goods.price }}</text>
+          </view>
+          <view class="stock">库存 {{ goods.stock }} 件</view>
+          <view class="selected-text">
+            {{ selectedText }}
+          </view>
+        </view>
+        <view class="close-btn" @click="handleClose">
+          <text class="i-carbon-close"></text>
+        </view>
+      </view>
+
+      <scroll-view scroll-y class="body">
+        <view class="body-content">
+          <view v-for="(spec, index) in goods.specs" :key="index" class="spec-group">
+            <view class="spec-title">{{ spec.name }}</view>
+            <view class="spec-values">
+              <view
+                v-for="value in spec.values"
+                :key="value"
+                class="spec-item"
+                :class="{ active: selectedSpecs[spec.name] === value }"
+                @click="handleSelectSpec(spec.name, value)"
+              >
+                {{ value }}
+              </view>
+            </view>
+          </view>
+
+          <view class="quantity-group">
+            <view class="label">购买数量</view>
+            <CounterInput v-model="quantity" :max="goods.stock" />
+          </view>
+        </view>
+      </scroll-view>
+
+      <view class="footer">
+        <view class="btn cart-btn" @click="handleConfirm('cart')">加入购物车</view>
+        <view class="btn buy-btn" @click="handleConfirm('buy')">立即购买</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { Goods } from '@/typings/mall'
+import CounterInput from '../common/CounterInput.vue'
+
+interface Props {
+  visible: boolean
+  goods: Goods
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:visible': [visible: boolean]
+  'confirm': [data: { quantity: number, specs: Record<string, string>, type: 'cart' | 'buy' }]
+}>()
+
+const quantity = ref(1)
+const selectedSpecs = ref<Record<string, string>>({})
+
+// 初始化选中规格
+watch(() => props.goods, (newGoods) => {
+  if (newGoods && newGoods.specs) {
+    const specs: Record<string, string> = {}
+    newGoods.specs.forEach(spec => {
+      if (spec.values.length > 0) {
+        specs[spec.name] = spec.values[0]
+      }
+    })
+    selectedSpecs.value = specs
+  }
+}, { immediate: true })
+
+// 计算已选文案
+const selectedText = computed(() => {
+  const specs = Object.values(selectedSpecs.value).join('，')
+  return specs ? `已选：${specs}` : '请选择规格'
+})
+
+function handleClose() {
+  emit('update:visible', false)
+}
+
+function handleSelectSpec(name: string, value: string) {
+  selectedSpecs.value[name] = value
+}
+
+function handleConfirm(type: 'cart' | 'buy') {
+  emit('confirm', {
+    quantity: quantity.value,
+    specs: { ...selectedSpecs.value },
+    type,
+  })
+  handleClose()
+}
+</script>
+
+<style lang="scss" scoped>
+.spec-selector-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  visibility: hidden;
+  transition: visibility 0.3s;
+
+  &.show {
+    visibility: visible;
+
+    .mask {
+      opacity: 1;
+    }
+
+    .content {
+      transform: translateY(0);
+    }
+  }
+}
+
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  transform: translateY(100%);
+  transition: transform 0.3s;
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+}
+
+.header {
+  padding: 24rpx;
+  display: flex;
+  gap: 24rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+  position: relative;
+
+  .goods-img {
+    width: 180rpx;
+    height: 180rpx;
+    border-radius: 12rpx;
+    background: #f5f5f5;
+  }
+
+  .info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    gap: 8rpx;
+  }
+
+  .price-wrapper {
+    color: #ff4d4f;
+    font-weight: 600;
+    
+    .currency {
+      font-size: 24rpx;
+    }
+    
+    .price {
+      font-size: 40rpx;
+    }
+  }
+
+  .stock {
+    font-size: 24rpx;
+    color: #999;
+  }
+
+  .selected-text {
+    font-size: 26rpx;
+    color: #333;
+  }
+
+  .close-btn {
+    position: absolute;
+    top: 24rpx;
+    right: 24rpx;
+    padding: 10rpx;
+    color: #999;
+    font-size: 32rpx;
+  }
+}
+
+.body {
+  flex: 1;
+  max-height: 600rpx;
+}
+
+.body-content {
+  padding: 24rpx;
+}
+
+.spec-group {
+  margin-bottom: 32rpx;
+
+  .spec-title {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 16rpx;
+  }
+
+  .spec-values {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20rpx;
+  }
+
+  .spec-item {
+    padding: 10rpx 30rpx;
+    background: #f5f5f5;
+    border-radius: 30rpx;
+    font-size: 26rpx;
+    color: #333;
+    border: 1rpx solid transparent;
+
+    &.active {
+      background: #fff1f0;
+      color: #ff4d4f;
+      border-color: #ff4d4f;
+    }
+  }
+}
+
+.quantity-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 40rpx;
+  margin-bottom: 40rpx;
+
+  .label {
+    font-size: 28rpx;
+    color: #333;
+  }
+}
+
+.footer {
+  padding: 20rpx 24rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  display: flex;
+  gap: 20rpx;
+  border-top: 1rpx solid #f5f5f5;
+
+  .btn {
+    flex: 1;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 40rpx;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #fff;
+
+    &.cart-btn {
+      background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
+    }
+
+    &.buy-btn {
+      background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4f 100%);
+    }
+  }
+}
+</style>

src/components/member/MemberBenefits.vue

@@ -0,0 +1,61 @@
+<template>
+  <view class="benefits-grid">
+    <view
+      v-for="(item, index) in list"
+      :key="index"
+      class="benefit-item"
+    >
+      <view class="icon-wrapper">
+        <text class="i-carbon-star icon"></text>
+      </view>
+      <text class="name">{{ item }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  list: string[]
+}
+
+defineProps<Props>()
+</script>
+
+<style lang="scss" scoped>
+.benefits-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24rpx;
+  padding: 24rpx;
+  background: #fff;
+  border-radius: 16rpx;
+}
+
+.benefit-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.icon-wrapper {
+  width: 88rpx;
+  height: 88rpx;
+  background: #fff7e6;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  .icon {
+    font-size: 40rpx;
+    color: #fa8c16;
+  }
+}
+
+.name {
+  font-size: 24rpx;
+  color: #333;
+  text-align: center;
+}
+</style>

src/components/member/MemberCard.vue

@@ -0,0 +1,116 @@
+<template>
+  <view class="member-card" :style="{ background: config?.color || '#333' }">
+    <view class="header">
+      <view class="info">
+        <view class="level-name">{{ config?.name || '普通会员' }}</view>
+        <view class="expire" v-if="member">有效期至 {{ member.expireDate }}</view>
+      </view>
+      <view class="icon-wrapper">
+        <text class="i-carbon-crown icon"></text>
+      </view>
+    </view>
+    
+    <view class="footer">
+      <view class="points">
+        <text class="label">当前积分</text>
+        <text class="value">{{ member?.points || 0 }}</text>
+      </view>
+      <view class="btn">会员中心</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { Member } from '@/typings/mall'
+
+interface Props {
+  member: Member | null
+  config: any
+}
+
+defineProps<Props>()
+</script>
+
+<style lang="scss" scoped>
+.member-card {
+  border-radius: 20rpx;
+  padding: 40rpx;
+  color: #fff;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -20%;
+    width: 400rpx;
+    height: 400rpx;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 60rpx;
+  
+  .level-name {
+    font-size: 40rpx;
+    font-weight: 600;
+    margin-bottom: 12rpx;
+  }
+  
+  .expire {
+    font-size: 24rpx;
+    opacity: 0.8;
+  }
+  
+  .icon-wrapper {
+    width: 80rpx;
+    height: 80rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    .icon {
+      font-size: 40rpx;
+    }
+  }
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  
+  .points {
+    display: flex;
+    flex-direction: column;
+    
+    .label {
+      font-size: 24rpx;
+      opacity: 0.8;
+      margin-bottom: 8rpx;
+    }
+    
+    .value {
+      font-size: 48rpx;
+      font-weight: 600;
+    }
+  }
+  
+  .btn {
+    padding: 12rpx 32rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 30rpx;
+    font-size: 24rpx;
+    backdrop-filter: blur(10px);
+  }
+}
+</style>