ylrz_scrm_companyUI/src/views/crm/components/customerStoreOrderList.vue

<template>
    <div>
        <el-table border v-loading="loading" :data="list" >
            <el-table-column label="订单号" align="center" prop="orderCode" width="200px" />
            <el-table-column label="所属公司" align="center" prop="companyName" />
            <el-table-column label="所属员工" align="center" prop="companyUserNickName" />
            <el-table-column label="用户昵称" align="center" prop="nickname" width="150px" >
                <template slot-scope="scope">
                    <span>{{scope.row.nickname}} </span>
                </template>
            </el-table-column>
            <el-table-column label="收件人" align="center" prop="realName" width="150px" >
                <template slot-scope="scope">
                    <span>{{scope.row.realName}} </span>
                </template>
            </el-table-column>
            <el-table-column label="订单金额" align="center" prop="totalPrice" >
                <template slot-scope="scope">
                    <span v-if="scope.row.totalPrice!=null">{{scope.row.totalPrice.toFixed(2)}}</span>
                </template>
            </el-table-column>
            <el-table-column label="应付金额" align="center" prop="payPrice" >
                <template slot-scope="scope">
                    <span v-if="scope.row.payPrice!=null">{{scope.row.payPrice.toFixed(2)}}</span>
                </template>
            </el-table-column>
            <el-table-column label="下单时间" align="center" prop="createTime" />
            <!-- <el-table-column label="支付状态" align="center" prop="paid" /> -->
            <el-table-column label="支付时间" align="center" prop="payTime" width="180">
            </el-table-column>
            <el-table-column label="支付方式" align="center" prop="payType" >
                <template slot-scope="scope">
                    <el-tag prop="payType" v-for="(item, index) in payTypeOptions"    v-if="scope.row.payType==item.dictValue">{{item.dictLabel}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="订单类型" align="center" prop="orderType" >
                <template slot-scope="scope">
                    <el-tag prop="status" v-for="(item, index) in orderTypeOptions"    v-if="scope.row.orderType==item.dictValue">{{item.dictLabel}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status" >
                <template slot-scope="scope">
                    <el-tag prop="status" v-for="(item, index) in statusOptions"    v-if="scope.row.status==item.dictValue">{{item.dictLabel}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="物流状态" align="center" prop="deliveryStatus" >
                <template slot-scope="scope">
                    <el-tag prop="status" v-for="(item, index) in deliveryStatusOptions"    v-if="scope.row.deliveryStatus==item.dictValue">{{item.dictLabel}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="物流结算状态" align="center" prop="deliveryPayStatus" >
                <template slot-scope="scope">
                    <el-tag prop="status" v-for="(item, index) in deliveryPayStatusOptions"    v-if="scope.row.deliveryPayStatus==item.dictValue">{{item.dictLabel}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="80px" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    @click="handleDetails(scope.row)"
                    v-hasPermi="['store:storeOrder:query']"
                >查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        />
        <el-drawer
        z-index = "999"
        size="75%"
        :title="show.title" :visible.sync="show.open"
        >
        <productOrder  ref="order" />
        </el-drawer>
    </div>

</template>
  
<script>
import { getCustomerOrderList  } from "@/api/store/storeOrder";
import productOrder from "../../store/components/productOrder2.vue";
    export default {
        components: { productOrder  },
        name: "customerVisit",
        data() {
            return {
                deliveryPayStatusOptions:[],
                deliveryStatusOptions:[],
                orderTypeOptions:[],
                payTypeOptions:[],
                show:{
                    open:false,
                    title:"订单详情"
                },
                statusOptions:[],
                // 遮罩层
                loading: true,
                // 总条数
                total: 0,
                list: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    customerId: null,
                },
            };
        },
        created() {
            this.getDicts("store_order_type").then((response) => {
                this.orderTypeOptions = response.data;
            });
            this.getDicts("user_status").then((response) => {
                this.userStatusOptions = response.data;
            });
            this.getDicts("store_pay_type").then((response) => {
                this.payTypeOptions = response.data;
            });
            this.getDicts("store_order_status").then((response) => {
                this.statusOptions = response.data;
            });
            this.getDicts("store_order_delivery_status").then((response) => {
                this.deliveryStatusOptions = response.data;
            });
            this.getDicts("store_delivery_pay_status").then((response) => {
                this.deliveryPayStatusOptions = response.data;
            });
        },
        methods: {
            handleDetails(row){
                this.show.open=true;
                const orderId = row.id ;
                setTimeout(() => {
                    this.$refs.order.getOrder(orderId);
                }, 500);
            },
            getData(customerId){
                this.queryParams.customerId=customerId;
                this.queryParams.pageNum=1;
                this.getList();
            },
            getList() {
                this.loading = true;
                getCustomerOrderList(this.queryParams).then(response => {
                    this.list = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
        }
    };
</script>
<style lang="scss" scoped> 
</style>