rongshu/pc/src/components/RongshuProductDialog.vue

<template>
  <el-dialog
    title="选择荣数商品"
    :visible.sync="dialogVisible"
    width="900px"
    @open="onOpen"
  >
    <el-form :model="filter" inline>
      <el-form-item label="商品名称">
        <el-input
          v-model="filter.name"
          placeholder="请输入"
          clearable
          style="width: 220px"
          @keyup.enter.native="handleSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="pagedData" border stripe size="small" style="width: 100%">
      <el-table-column prop="name" label="商品名称" min-width="180" show-overflow-tooltip />
      <el-table-column prop="merchant" label="商户名称" width="160" show-overflow-tooltip />
      <el-table-column label="银行结算价" width="120" align="right">
        <template slot-scope="{ row }">¥{{ row.settlePrice.toFixed(2) }}</template>
      </el-table-column>
      <el-table-column prop="stock" label="库存数" width="100" align="right" />
      <el-table-column label="操作" width="80" align="center" fixed="right">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="handleSelect(row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-bar">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :page-size="10"
        :current-page.sync="currentPage"
        :total="filteredData.length"
      />
    </div>
  </el-dialog>
</template>

<script>
const MOCK_PRODUCTS = [
  { name: '荣数机场贵宾厅', merchant: '环亚机场贵宾', settlePrice: 88, stock: 200, mainImage: [{ name: 'rongshu-a.png', url: 'https://placehold.co/200x200/4096ff/ffffff?text=A' }] },
  { name: '荣数高尔夫体验', merchant: '尊享高尔夫俱乐部', settlePrice: 388, stock: 50, mainImage: [{ name: 'rongshu-b.png', url: 'https://placehold.co/200x200/52c41a/ffffff?text=B' }] },
  { name: '荣数洗车服务', merchant: '车之家精洗', settlePrice: 48, stock: 800, mainImage: [{ name: 'rongshu-c.png', url: 'https://placehold.co/200x200/faad14/ffffff?text=C' }] },
  { name: '荣数体检套餐', merchant: '美年大健康', settlePrice: 988, stock: 120, mainImage: [{ name: 'rongshu-d.png', url: 'https://placehold.co/200x200/eb2f96/ffffff?text=D' }] },
  { name: '荣数咖啡券', merchant: 'Starbucks', settlePrice: 28, stock: 1000, mainImage: [] },
  { name: '荣数视频会员月卡', merchant: '腾讯视频', settlePrice: 25, stock: 500, mainImage: [] },
  { name: '荣数音乐会员季卡', merchant: 'QQ音乐', settlePrice: 45, stock: 600, mainImage: [] },
  { name: '荣数电影票券', merchant: '猫眼电影', settlePrice: 38, stock: 300, mainImage: [] },
  { name: '荣数家政服务券', merchant: '58到家', settlePrice: 158, stock: 200, mainImage: [] },
  { name: '荣数美甲服务券', merchant: '河狸家', settlePrice: 88, stock: 100, mainImage: [] },
  { name: '荣数车辆保养券', merchant: '途虎养车', settlePrice: 268, stock: 80, mainImage: [] },
  { name: '荣数读书会员', merchant: '微信读书', settlePrice: 18, stock: 600, mainImage: [] },
  { name: '荣数花艺礼盒', merchant: '花点时间', settlePrice: 199, stock: 50, mainImage: [] },
  { name: '荣数瑜伽课程券', merchant: 'Keep', settlePrice: 128, stock: 90, mainImage: [] },
  { name: '荣数智能家居体验', merchant: '小米之家', settlePrice: 358, stock: 30, mainImage: [] }
]

export default {
  name: 'RongshuProductDialog',
  props: {
    visible: { type: Boolean, default: false }
  },
  data() {
    return {
      filter: { name: '' },
      currentPage: 1,
      products: MOCK_PRODUCTS
    }
  },
  computed: {
    dialogVisible: {
      get() { return this.visible },
      set(v) { this.$emit('update:visible', v) }
    },
    filteredData() {
      if (!this.filter.name) return this.products
      const kw = this.filter.name.trim()
      return this.products.filter(p => p.name.includes(kw))
    },
    pagedData() {
      const start = (this.currentPage - 1) * 10
      return this.filteredData.slice(start, start + 10)
    }
  },
  methods: {
    onOpen() {
      this.filter = { name: '' }
      this.currentPage = 1
    },
    handleSearch() {
      this.currentPage = 1
    },
    handleReset() {
      this.filter = { name: '' }
      this.currentPage = 1
    },
    handleSelect(row) {
      this.$emit('select', { ...row })
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.pagination-bar {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
</style>