master/yanshouban/src/views/online/detailQuery/index.vue

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>交易联机</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">交易明细</span></div>
      </div>
      <div>
        <!-- 搜索 -->
        <div class="formSearch">
          <el-form
            :inline="true"
            :model="pageindex"
            label-position="left"
          >
            <el-form-item label="" v-if="concat.one">
              <el-input
                placeholder="请输入订单号"
                style="width: 168px"
                v-model="pageindex.orderFormId">
              </el-input>
            </el-form-item>
            <el-form-item label="账单金额"  v-if="concat.two">
                <div>
                  <el-input
                    placeholder="请输入"
                    style="width: 168px"
                    v-model="pageindex.minPrice">
                  </el-input>
                   至
                  <el-input
                    placeholder="请输入"
                    style="width:168px"
                    v-model="pageindex.maxPrice">
                  </el-input>
                </div>
            </el-form-item>
            <el-form-item label="支付记录查询"  v-if="concat.three">
             <el-select
               v-model="pageindex.paymentState"
               placeholder="请选择"
               style="width: 100px;"
             >
               <el-option label="未支付
" value="0" />
 <el-option label="已支付
" value="1" />
             </el-select>
            </el-form-item>
            <el-form-item label="退款记录查询"  v-if="concat.three">
                         <el-select
                           v-model="pageindex.paymentState"
                           placeholder="请选择"
            
                           style="width: 100px;"
                         >
            <el-option label="已退款
            " value="2" />
                         </el-select>
                        </el-form-item>
          </el-form>
		<div>
			<el-button
			  style="background-color: #3F9B6A;color: #fff;"
			  @click="onSubmit"
			  >查询
			</el-button>
			<el-button
			
			
			class="buttonHover"
			style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
			  @click="resetting"
			  >重置
			</el-button>
		</div>
        </div>
		<div style="margin-bottom:20px;">
			<el-button style="background-color: #3F9B6A;color: #fff;" @click="conShow=true">查询条件设置
			</el-button>
		</div>
        <!-- 表格 -->
        <el-table
          :data="tableData"
         :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
        >
          <el-table-column
            label="序号"
            min-width="4%"
          >
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
          </el-table-column>
          <el-table-column
            label="订单号"
            prop="orderFormId"
            min-width="12%"
          >
          </el-table-column>
          <el-table-column
            label="交易号"
            prop="payId"
            width="auto"
            min-width="12%"
			show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="账单金额"
            prop="price"
            width="auto"
            min-width="7%"
          >
          </el-table-column>
          <el-table-column
            label="支付方式"
            prop="paymentMode"
            width="auto"
            min-width="10%"
          >
		  <template slot-scope="scope">
		    {{scope.row.paymentMode=='1'?'微信':''}}
		  
		  </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="交易创建时间"
            width="auto"
            min-width="10%"
show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="payType"
            label="交易类型"
            width="auto"
            min-width="10%"
          >
<template slot-scope="scope">
		  {{scope.row.payType=='1'?'线上支付':''}}
		
		</template>
          </el-table-column>
<el-table-column
            prop="paymentState"
            label="交易状态"
            width="auto"
            min-width="10%"
          >
		<template slot-scope="scope">
				  {{scope.row.paymentState=='1'?'已支付':'未支付'}}
				
				</template>
          </el-table-column>
          
          <el-table-column
            label="操作"
            width="auto"
            min-width="5%">
            <template slot-scope="scope">
              <div @click="addbuss(scope.row)" class="tableBtn greens">查看</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
			<div>共{{total}}条</div>
          <el-pagination
            class="pagination"
            :hide-on-single-page="flag"
            background
            :current-page="pageindex.pageNumber+1"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageindex.pageSize"
            layout="prev, pager,next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <el-dialog title="详情"  :visible.sync="ggXin" custom-class="diaslog_zhong" style="padding: 0;" width="80%" class="dialog_css_Xq"  center :close-on-click-modal="false" :show-close="false"	>
                    <div >
                          <el-descriptions :column="2">
                              <el-descriptions-item label="用户名称">{{rules.shopName}}</el-descriptions-item>
                              <el-descriptions-item label="商户号">{{rules.shopCode}}</el-descriptions-item>
                              <el-descriptions-item label="交易类型">{{rules.payType=='1'?'线上支付':''}}</el-descriptions-item>
                              <el-descriptions-item label="交易状态">{{rules.payStatus}}</el-descriptions-item>
                              <el-descriptions-item label="订单金额(元)">{{rules.price}}</el-descriptions-item>
                              <el-descriptions-item label="交易金额(元)">{{rules.realPrice}}</el-descriptions-item>
                              <el-descriptions-item label="交易创建时间">{{rules.createTime}}</el-descriptions-item>
                              <el-descriptions-item label="交易完成时间">{{rules.payTime}}</el-descriptions-item>
                              <el-descriptions-item label="支付工具">{{rules.paymentMode=='1'?'微信':''}}</el-descriptions-item>
                              <el-descriptions-item label="商户订单号">{{rules.orderFormId}}</el-descriptions-item>
                              <el-descriptions-item label="系统交易订单号">{{rules.subOrderId}}</el-descriptions-item>
                          </el-descriptions>
                          <div style="display: flex;justify-content: flex-end;">
                            <el-button  @click="closeFn(1)"  style="background-color: #fff;color: #000;width: 70px;height: 30px;border-color: #B2B2B2;">返回</el-button>
                          <!-- <el-button  @click="addCheck(0)"  style="background-color: #3F9B6A;color: #fff;width: 70px;height: 30px;border-color: #3F9B6A;">发起退款</el-button> -->
                            </div>
                    </div>
        </el-dialog>
      </div>
    </div>
<el-dialog title="查询条件设置" :visible.sync="conShow"  style="padding: 0;" width="30%" center
			:close-on-click-modal="false">
		 <div style="padding: 20px;">
			<div><el-checkbox v-model="concat.one" label="订单号"></el-checkbox></div> 
			<div><el-checkbox v-model="concat.two" label="账单金额"></el-checkbox></div>
			<div><el-checkbox v-model="concat.three" label="交易状态"></el-checkbox></div>
		 </div>
			<div style="display: flex;justify-content: flex-end;padding: 0px;">
				<el-button @click="close" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
				<el-button @click="Check" 
					style="background-color: #3F9B6A;color: #fff;padding:8px 15px;">确定</el-button>
			</div>
		</el-dialog>
  </div>
</template>
<script>
import {merchantQueries} from '../../../api/online.js'
export default {
  data () {
    return {
      rules: {},
      total: 0,
      flag: false,
      ggXin: false,
      pageindex: {
        orderFormId:'',
        paymentState:'',
        pageSize: 10,
         pageNumber: 0,
        minPrice:'',
        maxPrice:'',
      },
      tableData: [],
	  conShow:false,
	  concat:{
		  one:true,
		  two:true,
		  three:true
	  }
    }
  },
  computed: {},
  mounted(){
    this.getOrder()
  },
  methods: {
	  close(){
		  this.concat = {
		  one:true,
		  two:true,
		  three:true
	  }
		this.conShow = false
	  },
	  Check(){
		this.conShow = false
	  },
    async getOrder(){
     const res =   await merchantQueries(this.pageindex)
      this.tableData = res.data.content
    this.total = res.data.totalElements
      },
      getFirstDayOfYear() {
        const now = new Date();
        const year = now.getFullYear();
        const firstDay = new Date(year, 0, 1, 0, 0, 0, 0);
        this.pageindex.orderTimeStart = this.formatDate(firstDay);
      },
        getLastDayOfYear() {
          const now = new Date()
          const year = now.getFullYear()
          const lastDay = new Date(year, 11, 31, 23, 59, 59, 999)
          this.pageindex.orderTimeEnd = this.formatDate(lastDay)
        },
        formatDate(date) {
          const year = date.getFullYear()
          const month = String(date.getMonth() + 1).padStart(2, '0')
          const day = String(date.getDate()).padStart(2, '0')
          const hours = String(date.getHours()).padStart(2, '0')
          const minutes = String(date.getMinutes()).padStart(2, '0')
          const seconds = String(date.getSeconds()).padStart(2, '0')
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
        },
    addbuss (item) {
      this.ggXin = true
	  this.rules = item
    },
    onSubmit(){
	this.pageindex.pageNumber = 0
      this.getOrder()
        },
        resetting(){
          this.pageindex={
        orderFormId:'',
        paymentState:'',
        pageSize: 10,
         pageNumber: 0,
        minPrice:'',
        maxPrice:'',
      }
        this.getOrder()
        },
    handleSizeChange(val){
    },
    handleCurrentChange(val){
	this.pageindex.pageNumber = val-1
	this.getOrder()
    },
    closeFn () {
      this.ggXin = false
      this.index = 1
    }
  }
}
</script>
<style scoped >
.zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;
    position: relative;
  }
/deep/ .el-form-item__content {
  line-height: 0;
}
.tableBtn {
  display: inline-block;
  margin-right: 10px;
}
::v-deep .formSearch {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  width: 100%;
  height: 30px;
  font-size: 14px;
  justify-content: space-between;
  .el-form-item__label{
    line-height: 28px;
    font-size: 14px;
    color: #000;
    font-weight: 100;
  }
}
.greens {
  color: #3F9B6A;
}
/deep/ .el-table__row {
  font-size: 14px;
}
.fenye {
  margin-top: 20px;
  display: flex;
  justify-content:space-between;
  position: relative;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3F9B6A;
}
.el-row {
  margin-bottom: 20px;
}
:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/deep/ .bg-purple[data-v-0e3fe4ec] {
  background: #fff;
  height: 50px;
}
/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
}
.demo-input-suffix{
  display: flex;
  margin-right: 20px;
}
.pagination{
  text-align:right;
  line-height: 20px;
}
/deep/ .el-pagination__total{
  margin-top:4px;
}
::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
</style>