rongshu/pc-v3/src/components/RongshuProductDialog.vue

<template>
  <el-dialog
    title="选择荣数商品"
    v-model="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="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 #default="{ 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 #default="{ 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"
        v-model:current-page="currentPage"
        :total="filteredData.length"
      />
    </div>
  </el-dialog>
</template>

<script>
const MOCK_PRODUCTS = [
  { name: '微信立减金 5元（满10减5）', merchant: '微信支付', settlePrice: 5, stock: 2000, mainImage: [{ name: 'wx-5.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A55' }] },
  { name: '微信立减金 8元（满30减8）', merchant: '微信支付', settlePrice: 8, stock: 1500, mainImage: [{ name: 'wx-8.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A58' }] },
  { name: '微信立减金 10元（满50减10）', merchant: '微信支付', settlePrice: 10, stock: 1200, mainImage: [{ name: 'wx-10.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A510' }] },
  { name: '微信立减金 18元（满88减18）', merchant: '微信支付', settlePrice: 18, stock: 1000, mainImage: [{ name: 'wx-18.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A518' }] },
  { name: '微信立减金 20元（满100减20）', merchant: '微信支付', settlePrice: 20, stock: 800, mainImage: [{ name: 'wx-20.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A520' }] },
  { name: '微信立减金 30元（满150减30）', merchant: '微信支付', settlePrice: 30, stock: 600, mainImage: [{ name: 'wx-30.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A530' }] },
  { name: '微信立减金 50元（满200减50）', merchant: '微信支付', settlePrice: 50, stock: 400, mainImage: [{ name: 'wx-50.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A550' }] },
  { name: '微信立减金 66元（满300减66）', merchant: '微信支付', settlePrice: 66, stock: 300, mainImage: [{ name: 'wx-66.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A566' }] },
  { name: '微信立减金 88元（满388减88）', merchant: '微信支付', settlePrice: 88, stock: 200, mainImage: [{ name: 'wx-88.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A588' }] },
  { name: '微信立减金 100元（满500减100）', merchant: '微信支付', settlePrice: 100, stock: 150, mainImage: [{ name: 'wx-100.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A5100' }] },
  { name: '微信立减金 128元（满600减128）', merchant: '微信支付', settlePrice: 128, stock: 100, mainImage: [{ name: 'wx-128.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A5128' }] },
  { name: '微信立减金 200元（满800减200）', merchant: '微信支付', settlePrice: 200, stock: 80, mainImage: [{ name: 'wx-200.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A5200' }] }
]

export default {
  name: 'RongshuProductDialog',
  props: {
    modelValue: { type: Boolean, default: false }
  },
  emits: ['update:modelValue', 'select'],
  data() {
    return {
      filter: { name: '' },
      currentPage: 1,
      products: MOCK_PRODUCTS
    }
  },
  computed: {
    dialogVisible: {
      get() { return this.modelValue },
      set(v) { this.$emit('update:modelValue', 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>