Merge branch 'master' of http://139.186.142.91:10010/r/productDev/gtzxingli...

MrShi

3 天以前 eb7a808aaf7dd0a6dd2ff70f9ef3f8ce0b1e31d1

 admin/src/components/business/OperaMemberDetail.vue

@@ -2,7 +2,7 @@
  <GlobalWindow
    :title="title"
    :visible.sync="visible"
    width="600px"
    width="1000px"
    :withFooter="false"
  >
    <div class="detail-container">
@@ -17,25 +17,140 @@
        <div class="info-grid">
          <div class="info-item">
            <span class="label">微信openid：</span>
            <span class="value">{{ detailInfo.openId }}</span>
            <span class="value">{{ detailInfo.openid || '' }}</span>
          </div>
          <div class="info-item">
            <span class="label">用户昵称：</span>
            <span class="value">{{ detailInfo.nickName }}</span>
            <span class="value">{{ detailInfo.nickName  || ''}}</span>
          </div>
          <div class="info-item">
            <span class="label">会员姓名：</span>
            <span class="value">{{ detailInfo.name }}</span>
            <span class="value">{{ detailInfo.name  || ''}}</span>
          </div>
          <div class="info-item">
            <span class="label">授权手机号：</span>
            <span class="value">{{ detailInfo.telephone }}</span>
            <span class="value">{{ detailInfo.telephone||'' }}</span>
          </div>
          <div class="info-item">
            <span class="label">状态：</span>
            <span class="value">{{ detailInfo.status === 0 ? '正常' : detailInfo.status === 1 ? '停用' : '已注销' }}</span>
          </div>
        </div>
      </div>

      <!-- 开票历史 -->
      <div class="section">
        <div class="section-header">
          <span class="section-title">开票历史</span>
        </div>
        
        <!-- 查询表单 -->
        <el-form :inline="true" :model="invoiceQuery" class="query-form" style="margin-bottom: 20px;">
          <el-form-item label="开票编号">
            <el-input v-model="invoiceQuery.invoiceNo" placeholder="请输入开票编号" style="width: 180px;"></el-input>
          </el-form-item>
          <el-form-item label="发票类型">
            <el-select v-model="invoiceQuery.invoiceType" placeholder="请选择发票类型" style="width: 150px;">
              <el-option label="电子普通发票" value="0"></el-option>
              <el-option label="电子专用发票" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="抬头类型">
            <el-select v-model="invoiceQuery.orgType" placeholder="请选择抬头类型" style="width: 150px;">
              <el-option label="个人" value="1"></el-option>
              <el-option label="企业" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发票抬头">
            <el-input v-model="invoiceQuery.name" placeholder="请输入发票抬头" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="开票状态">
            <el-select v-model="invoiceQuery.status" placeholder="请选择开票状态" style="width: 150px;">
              <el-option label="申请中" value="0"></el-option>
              <el-option label="开具成功" value="1"></el-option>
              <el-option label="开具失败" value="99"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请时间">
            <el-date-picker
              v-model="invoiceQuery.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 250px;">
            </el-date-picker>
          </el-form-item>
          <section>
            <el-button type="primary" @click="queryInvoices">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </section>
        </el-form>
        
        <!-- 统计信息 -->
        <div class="stats-row" style="margin-bottom: 20px;">
          <div class="stat-item">
            <span class="stat-label">开票数：</span>
            <span class="stat-value">{{ invoicePage.total }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">开票总额：</span>
            <span class="stat-value amount">¥{{ invoiceSummary.totalAmount }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">已开票总额：</span>
            <span class="stat-value amount">¥{{ invoiceSummary.issuedAmount }}</span>
          </div>
        </div>
        
        <!-- 开票历史表格 -->
        <el-table :data="invoiceList" border style="width: 100%" :loading="invoiceLoading">
          <el-table-column prop="orderNo" label="订单编号" min-width="120">
            <template slot-scope="scope">
              <a href="javascript:void(0)" @click="openInvoiceDetail(scope.row)">{{ scope.row.orderNo }}</a>
            </template>
          </el-table-column>
          <el-table-column label="发票类型" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.invoiceType === 1 ? '增值税普通发票' : '增值税专用发票' }}
            </template>
          </el-table-column>
          <el-table-column prop="orgType" label="抬头类型" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.orgType === 0 ? '个人' : '企业' }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="发票抬头" min-width="150"></el-table-column>
          <el-table-column prop="taxId" label="发票税号" min-width="150"></el-table-column>
          <el-table-column label="开票金额（元）" min-width="120"> 
            <template slot-scope="scope">
              ¥{{ ((scope.row.invoiceAmount || 0) / 100).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="申请时间" min-width="150"></el-table-column>
          <el-table-column label="开票状态" min-width="120">
            <template slot-scope="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 开票详情弹窗 -->
        <OperaInvoiceDetail ref="operaInvoiceDetail" @close="handleClose" />
        
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="invoicePage.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="invoicePage.size"
          :total="invoicePage.total"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 20px; text-align: right;">
        </el-pagination>
      </div>
    </div>
  </GlobalWindow>
@@ -44,20 +159,34 @@
<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import { getById } from '@/api/business/memberManage'
import { fetchList, summary } from '@/api/business/invoiceRecord'
import BaseOpera from '@/components/base/BaseOpera'
import OperaInvoiceDetail from './OperaInvoiceDetail'
export default {
  name: 'OperaMemberDetail',
  extends: BaseOpera,
  components: { GlobalWindow, BaseOpera },
  components: { GlobalWindow, BaseOpera, OperaInvoiceDetail },
  data () {
    return {
      detailInfo: {
        id: null,
        openId: '',
        nickName: '',
        name: '',
        phone: '',
        status: 1
      detailInfo: {  },
      invoiceQuery: {
        invoiceNo: '',
        invoiceType: '',
        titleType: '',
        invoiceTitle: '',
        status: '',
        dateRange: []
      },
      invoiceList: [],
      invoiceLoading: false,
      invoicePage: {
        page: 1,
        size: 10,
        total: 10
      },
      invoiceSummary: {
        issuedAmount: 0,
        totalAmount: 0
      }
    }
  },
@@ -65,27 +194,111 @@
    open (title, row) {
      this.title = title
      getById(row.id).then(res => {
        this.detailInfo = {
          id: res.id,
          openId: res.openId,
          nickName: res.nickName,
          name: res.name,
          phone: res.phone,
          status: res.status
        }
        this.detailInfo = res
        this.visible = true
        // 初始化开票历史数据
        this.queryInvoices()
      }).catch(e => {
        this.$tip.apiFailed(e)
      })
    },
    // 查询开票历史
    async queryInvoices() {
      this.invoiceLoading = true
      try {
        // 构建查询参数
        const model = {
          invoiceNo: this.invoiceQuery.invoiceNo,
          invoiceType: this.invoiceQuery.invoiceType,
          titleType: this.invoiceQuery.titleType,
          invoiceTitle: this.invoiceQuery.invoiceTitle,
          status: this.invoiceQuery.status,
          memberId: this.detailInfo.id,
          startDate: this.invoiceQuery.dateRange[0] ? this.invoiceQuery.dateRange[0].format('YYYY-MM-DD') : null,
          endDate: this.invoiceQuery.dateRange[1] ? this.invoiceQuery.dateRange[1].format('YYYY-MM-DD') : null
        }
        // 同时查询列表数据和统计数据
        const [listRes, summaryRes] = await Promise.all([
          fetchList({
            capacity: this.invoicePage.size,
            page: this.invoicePage.page,
            model: model
          }),
          summary({
            capacity: this.invoicePage.size,
            page: this.invoicePage.page,
            model: model
          })
        ])
        this.invoiceList = listRes.records
        this.invoicePage.total = listRes.total
        this.invoiceSummary.issuedAmount = ((summaryRes.issuedAmount || 0) / 100).toFixed(2)
        this.invoiceSummary.totalAmount = ((summaryRes.totalAmount || 0) / 100).toFixed(2)
      } finally {
        this.invoiceLoading = false
      }
    },
    // 重置查询条件
    resetQuery() {
      this.invoiceQuery = {
        invoiceNo: '',
        invoiceType: '',
        orgType: '',
        invoiceTitle: '',
        status: '',
        dateRange: []
      }
      this.queryInvoices()
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.invoicePage.size = val
      this.queryInvoices()
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.invoicePage.page = val
      this.queryInvoices()
    },
    // 获取开票状态文本
    getStatusText(status) {
      switch(status) {
        case 0:
          return '申请中'
        case 1:
          return '开票成功'
        case 2:
          return '失败'
        default:
          return '未知'
      }
    },
    // 获取开票状态标签类型
    getStatusType(status) {
      switch(status) {
        case 0:
          return 'warning'
        case 1:
          return 'success'
        case 2:
          return 'danger'
        default:
          return 'info'
      }
    },
    // 打开开票详情
    openInvoiceDetail(row) {
      this.$refs.operaInvoiceDetail.open('开票详情', row)
    },
    // 关闭详情弹窗
    handleClose() {
      // 可以在这里添加关闭后的逻辑
    }
  }
}
</script>

<style scoped>
.detail-container {
  padding: 20px;
}
.section {
  margin-bottom: 30px;
}
@@ -126,7 +339,6 @@
  padding: 0 10px;
}
.info-item {
  display: flex;
  font-size: 14px;
}
.info-item .label {
@@ -140,6 +352,32 @@
  color: #f56c6c;
  font-weight: bold;
}
.query-form {
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
}
.stats-row {
  display: flex;
  gap: 30px;
  padding: 10px 15px;
  background: #f5f7fa;
  border-radius: 4px;
}
.stat-item {
  font-size: 14px;
}
.stat-label {
  color: #909399;
  margin-right: 5px;
}
.stat-value {
  color: #606266;
  font-weight: bold;
}
.stat-value.amount {
  color: #f56c6c;
}
.info-item.full-width {
  grid-column: span 2;
}