update

src/components/newPersonalCenter/block/model/ScenOrder.vue

+<template>
+  <div class="CustomizedList">
+    <el-form class="choose_form" ref="form" :model="form" label-width="80px">
+                <el-form-item label="订单状态">
+                    <el-select style="width:150px" size="small" v-model="form.orderStatus" placeholder="请订单信息">
+                        <el-option label="不限" :value="-1"></el-option>
+                        <el-option label="正常" :value="1"></el-option>
+                        <el-option label="取消" :value="2"></el-option>
+                        <el-option label="待付款" :value="3"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="出发日期">
+                    <el-date-picker style="width:150px" size="small" type="date" v-model="form.startDate"
+                    value-format="yyyy-MM-dd" placeholder></el-date-picker> 
+                </el-form-item>
+                <el-form-item label="返回日期">
+                    <el-date-picker style="width:150px"  size="small" type="date" v-model="form.backDate"
+                    value-format="yyyy-MM-dd" placeholder></el-date-picker> 
+                </el-form-item>
+                <el-form-item>
+                    <el-button @click="getList" type="danger" size="small">查询</el-button>
+                </el-form-item>
+            </el-form>
+            <div>
+                 <el-table
+                    :data="tableData"
+                    border
+                    style="width: 100%">
+                    
+                    <el-table-column
+                    prop="couponsName"
+                    label="景区名称">
+                    </el-table-column>
+                    <el-table-column
+                    prop="ticketName"
+                    label="门票名">
+                    </el-table-column>
+                    
+                    <el-table-column
+                    label="优惠金额">
+                        <template slot-scope="scope">
+                            <p>{{scope.row.preferPrice}}</p>
+                            <p>优惠金额:{{scope.row.discountMoney}}</p>
+                        </template> 
+                    </el-table-column>
+                    <el-table-column width="170px"
+                    label="采购信息">
+                        <template slot-scope="scope">
+                            <p>数量：{{scope.row.purchaseQuantity}}</p>
+                            <p>使用日期:{{scope.row.useDate}}</p>
+                        </template> 
+                    </el-table-column>
+                    <el-table-column
+                    label="订单状态">
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.status==1">正常</span>
+                        <span v-if="scope.row.status==2">取消</span>
+                        <span v-if="scope.row.status==3">待付款</span>
+                    </template> 
+                    </el-table-column>
+                    <el-table-column
+                        fixed="right" width="180px"
+                        label="操作">
+                        <template slot-scope="scope">
+                            
+                            <el-button v-if="scope.row.status==3"
+                            size="mini"
+                            type="danger">付款</el-button>
+                            <el-button v-if="scope.row.status!=2"
+                            size="mini"
+                           >取消订单</el-button>
+                        </template>
+                         
+                        </el-table-column>
+                </el-table>
+                <el-row class="_pagination" v-if="totalCount > 1">
+                <el-pagination
+                    :page-size="form.pageSize"
+                    layout="total, prev, pager, next"
+                    :total="totalCount"
+                    @current-change="handleCurrentChange"
+                ></el-pagination>
+                </el-row>
+            </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+        totalCount:0,
+        provideItem:[],
+        form:{
+            pageIndex:1,
+            pageSize:10,
+            customerId:0,
+        },
+        tableData:[],
+    }
+  },
+  mounted() {
+      let userInfo=JSON.parse(localStorage.userInfo);
+      this.form.customerId=userInfo.customerId;
+    this.getList();
+    
+  },
+  methods: {
+      gourl(scope){
+           let path = 'CustomizedTourism'
+            this.$router.push({
+                    name:path,
+                    query: { 
+                        customId: scope.customId,
+                        blank: "y"
+                    }
+                });
+      },
+      getList(){
+          this.apiJavaPost('/api/b2b/scenic/getTicketCouponsOrder',this.form,res=>{
+        this.loading=false;
+        // console.log("景点门票",res);
+              this.tableData=res.data.pageData;
+              this.totalCount=res.data.count;
+      },null)
+      },
+    handleCurrentChange(val) {
+      // 翻页
+      this.form.pageIndex = parseInt(val);
+      this.getList();
+    }
+  }
+}
+</script>
+
+<style>
+.CustomizedList ._pagination{
+  height: 45px;
+  background-color: #EBEBEB;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.CustomizedList .el-pagination .btn-next,.CustomizedList .el-pagination .btn-prev{
+  width:40px !important;
+  height:20px !important;
+  border:1px solid rgba(238,68,84,1);
+  border-radius:10px;
+  color: #f56c6c;
+}
+.CustomizedList .el-form-item{
+    display: inline-block;
+}
+.CustomizedList .el-pagination{
+  display: flex;
+  align-items: center;
+}
+.CustomizedList .el-pager li{
+  background: transparent; 
+  font-weight: initial;
+}
+.CustomizedList .el-pager li:hover{
+  color: #f56c6c;
+}
+.CustomizedList .el-pager li.active{
+  color: #f56c6c;
+}
+.CustomizedList ._row_2{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+</style>