cfc/cfc-frontend/components/RepurchaseReminder.vue

<template>
  <view class="repurchase-container" v-if="reminders.length > 0">
    <view class="rr-header">
      <text class="rr-title">复购提醒</text>
    </view>
    <view
      class="rr-item"
      v-for="item in reminders"
      :key="item.id"
      @click="goProduct(item)">
      <image class="rr-image" :src="item.coverImage" mode="aspectFill" />
      <view class="rr-info">
        <text class="rr-name">{{ item.productName }}</text>
        <text class="rr-price" v-if="item.price">¥{{ (item.price / 100).toFixed(2) }}</text>
        <text class="rr-hint">上次购买已过 {{ item.reminderDays }} 天，需要补货吗？</text>
      </view>
      <view class="rr-action">
        <text class="rr-btn">去看看</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getRepurchaseReminders, clickRepurchaseReminder } from '../utils/api.js'

export default {
  data() {
    return {
      reminders: []
    }
  },
  mounted() {
    this.loadReminders()
  },
  methods: {
    loadReminders: function() {
      var self = this
      getRepurchaseReminders().then(function(res) {
        if (res.code === 200 && res.data) {
          self.reminders = res.data
        }
      }).catch(function() {})
    },
    goProduct: function(item) {
      clickRepurchaseReminder({ id: item.id })
      uni.navigateTo({
        url: '/pages/shop/detail?id=' + item.productId + '&from=repurchase'
      })
    }
  }
}
</script>

<style scoped>
.repurchase-container {
  background: #fff;
  border-radius: 20rpx;
  margin: 20rpx 30rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.rr-header {
  margin-bottom: 16rpx;
}
.rr-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #333;
}
.rr-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-top: 1rpx solid #f5f5f5;
}
.rr-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}
.rr-info {
  flex: 1;
  margin-left: 16rpx;
  min-width: 0;
}
.rr-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rr-price {
  font-size: 24rpx;
  color: #F97316;
  margin-top: 4rpx;
  display: block;
}
.rr-hint {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
  display: block;
}
.rr-action {
  flex-shrink: 0;
  margin-left: 12rpx;
}
.rr-btn {
  background: #F97316;
  color: #fff;
  font-size: 22rpx;
  padding: 8rpx 20rpx;
  border-radius: 24rpx;
}
</style>