mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-04-20 02:55:04 +08:00
463 lines
18 KiB
Vue
463 lines
18 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-row type="flex" justify="space-between">
|
|
<!-- 左侧内容 -->
|
|
<el-col :span="5">
|
|
<!-- 充电设备 -->
|
|
<div class="advContent">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>会员信息</span>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<div style="margin-bottom: 10px">
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item
|
|
label="会员ID"
|
|
labelStyle="width: 80px"
|
|
contentStyle="width: 150px">
|
|
{{ memberInfo.memberId }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="手机号">
|
|
{{memberInfo.mobileNumber}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="昵称">
|
|
{{memberInfo.nickName}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="已绑车牌" v-for="(item,index) in plateNumberList" :key="index">
|
|
{{item}}
|
|
<el-button
|
|
v-hasPermi="['pile:model:edit']"
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
@click="handleUpdate(item)"
|
|
>修改</el-button>
|
|
<el-button
|
|
v-hasPermi="['member:info:remove']"
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-delete"
|
|
@click="handleDelete(item)"
|
|
>删除</el-button>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="本金余额">
|
|
{{memberInfo.principalBalance}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="赠送余额">
|
|
{{memberInfo.giftBalance}}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
|
|
<div class="advContent" >
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span>个人桩信息</span>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<div style="margin-bottom: 10px" v-for="personalPileInfo in personalPileInfoList">
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item
|
|
label="桩编码"
|
|
labelStyle="width: 80px"
|
|
contentStyle="width: 150px">
|
|
{{personalPileInfo.pileSn }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="桩型号">
|
|
{{personalPileInfo.modelName}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="充电桩类型">
|
|
{{personalPileInfo.speedType}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="枪口数量">
|
|
{{personalPileInfo.connectorNum}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="身份类型">
|
|
{{personalPileInfo.type}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="状态">
|
|
<dict-tag
|
|
:options="dict.type.pile_status"
|
|
:value="personalPileInfo.pileStatus"
|
|
/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="额定功率">
|
|
{{personalPileInfo.ratedPower}} KW
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="额定电流">
|
|
{{personalPileInfo.ratedCurrent}} A
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
|
|
</el-col>
|
|
<!-- 右侧内容 -->
|
|
<el-col :span="19" style="margin-left: 15px">
|
|
<el-card class="box-card" shadow="hover">
|
|
<div style="margin: 12px 0">会员充电订单</div>
|
|
<div style="margin-top: 20px">
|
|
<!-- 刷新按钮 -->
|
|
<el-button size="medium" type="primary" @click="refreshOrderList">
|
|
刷新
|
|
</el-button>
|
|
</div>
|
|
<div class="sideNav" id="app">
|
|
<!-- 接口列表表单 -->
|
|
<el-table :data="orderList" style="width: 100%" v-loading="orderListLoading">
|
|
<el-table-column label="订单编号" align="center" prop="orderCode" width="280px">
|
|
<template slot-scope="scope">
|
|
<router-link
|
|
:to="'/order/index/orderDetail/'+scope.row.orderCode"
|
|
class="link-type"
|
|
>
|
|
<span>{{ scope.row.orderCode }}</span>
|
|
</router-link>
|
|
</template>
|
|
</el-table-column>
|
|
<!--<el-table-column label="订单状态" align="center" prop="orderStatus">
|
|
<template slot-scope="scope">
|
|
<dict-tag
|
|
:options="dict.type.order_status"
|
|
:value="scope.row.orderStatus"
|
|
/>
|
|
</template>
|
|
</el-table-column>-->
|
|
<el-table-column label="订单状态描述" align="center" prop="orderStatusDescribe"/>
|
|
<el-table-column label="会员昵称" align="center" prop="nickName" width="120px"/>
|
|
<el-table-column label="电话号码" align="center" prop="mobileNumber" width="120px"/>
|
|
<el-table-column label="站点" align="center" prop="stationName"/>
|
|
<el-table-column label="充电桩枪口号" align="center" prop="pileConnectorCode" width="200px"/>
|
|
<el-table-column label="微信商户订单号" align="center" prop="outTradeNo" width="165px">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.payMode === '1' ? '一' : scope.row.outTradeNo === null ? '一' : scope.row.outTradeNo}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="启动方式" align="center" prop="startMode" width="100px">
|
|
<template slot-scope="scope">
|
|
<dict-tag
|
|
:options="dict.type.start_mode"
|
|
:value="scope.row.startMode"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="支付方式" align="center" prop="payMode">
|
|
<template slot-scope="scope">
|
|
<dict-tag
|
|
:options="dict.type.pay_mode"
|
|
:value="scope.row.payMode"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="支付状态" align="center" prop="payStatus">
|
|
<template slot-scope="scope">
|
|
<dict-tag
|
|
:options="dict.type.pay_status"
|
|
:value="scope.row.payStatus"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="支付金额" align="center" prop="payAmount" >
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.payAmount === null ? '一' : scope.row.payAmount}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="充电度数" align="center" prop="chargingDegree" width="100px">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.chargingDegree === null ? '一' : scope.row.chargingDegree}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="起始soc" align="center" prop="startSoc" >
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.startSoc === null ? '一' : scope.row.startSoc}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="终止soc" align="center" prop="endSoc" >
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.endSoc === null ? '一' : scope.row.endSoc}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="开始充电时间" align="center" prop="chargeStartTime" width="180">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.chargeStartTime === null ? '一' : scope.row.chargeStartTime}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="结束充电时间" align="center" prop="chargeEndTime" width="180">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.chargeEndTime === null ? '一' : scope.row.chargeEndTime}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="订单总金额" align="center" prop="orderAmount" width="100px">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.orderAmount === '0.00' ? '一' : scope.row.orderAmount}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="orderTotal>0"
|
|
:total="orderTotal"
|
|
:page.sync="queryOrderParams.pageNum"
|
|
:limit.sync="queryOrderParams.pageSize"
|
|
@pagination="getOrderList"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
<!--<el-card style="margin-top: 20px">
|
|
<div style="margin: 12px 0">会员余额变动记录</div>
|
|
<el-table :data="memberBalanceChanges" stripe style="width: 100%">
|
|
<el-table-column prop="subType" label="描述" align="center" width="200"/>
|
|
<el-table-column prop="amount" label="金额" align="center" width="200"/>
|
|
<el-table-column prop="transactionTime" label="时间" align="center" width="200"/>
|
|
</el-table>
|
|
<!–分页–>
|
|
<pagination
|
|
v-show="memberBalanceChangesTotal > 0"
|
|
:total="memberBalanceChangesTotal"
|
|
:page.sync="queryMemberBalanceParams.pageNum"
|
|
:limit.sync="queryMemberBalanceParams.pageSize"
|
|
@pagination="getMemberBalanceChanges"
|
|
style="margin-bottom: 20px"
|
|
/>
|
|
</el-card>-->
|
|
|
|
<el-card style="margin-top: 20px">
|
|
<div style="margin: 12px 0">会员交易记录</div>
|
|
<el-table :data="memberTransactionList" stripe style="width: 100%">
|
|
<el-table-column prop="scenarioType" label="场景类型" align="center" width="200"/>
|
|
<el-table-column prop="actionType" label="操作类型" align="center" width="200"/>
|
|
<el-table-column prop="payMode" label="支付类型" align="center" width="200"/>
|
|
<el-table-column prop="amount" label="金额" align="center" width="200"/>
|
|
<el-table-column prop="orderCode" label="充电订单号" align="center" width="200"/>
|
|
<el-table-column prop="outTradeNo" label="外部商户订单号" align="center" width="200"/>
|
|
<el-table-column prop="transactionId" label="外部支付订单号" align="center" width="200"/>
|
|
<el-table-column prop="outRefundNo" label="外部退款单号" align="center" width="200"/>
|
|
<el-table-column prop="refundId" label="外部支付退款单号" align="center" width="200"/>
|
|
</el-table>
|
|
<!--分页-->
|
|
<pagination
|
|
v-show="memberTransactionTotal > 0"
|
|
:total="memberTransactionTotal"
|
|
:page.sync="queryMemberTransactionParams.pageNum"
|
|
:limit.sync="queryMemberTransactionParams.pageSize"
|
|
@pagination="getMemberTransactionRecordList"
|
|
style="margin-bottom: 20px"
|
|
/>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-dialog :title="title" :visible.sync="open" width="30%" append-to-body>
|
|
<el-form ref="form" :model="form" label-width="150px" label-position="right">
|
|
<!-- <el-form-item label="会员id" prop="memberId" >-->
|
|
<!-- <el-input v-model="form.memberId" placeholder="memberId" />-->
|
|
<!-- </el-form-item>-->
|
|
<el-form-item label="车牌号" prop="toUpdatePlateNumber">
|
|
<el-input v-model="form.plateNumber" placeholder="请输入车牌号" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getInfo,
|
|
getMemberBalanceChanges,
|
|
getMemberPersonPileInfo,
|
|
getMemberTransactionRecordList,
|
|
deletePlateNumber, updatePlateNumber
|
|
} from "@/api/member/info";
|
|
import {listOrder} from "@/api/order/order";
|
|
import Template from "@/views/billing/template";
|
|
|
|
export default {
|
|
name: "memberDetail",
|
|
components: {Template},
|
|
dicts: ['order_status', 'start_mode', 'pay_mode', 'pay_status', 'pile_status'],
|
|
data() {
|
|
return {
|
|
memberId: this.$route.params.memberId,
|
|
// 会员信息
|
|
memberInfo: {},
|
|
plateNumberList: [],
|
|
// 会员个人桩列表
|
|
personalPileInfoList: [],
|
|
personalPileTotal: 0,
|
|
// 会员充电订单
|
|
orderList: [],
|
|
orderTotal: 0,
|
|
// 弹出层
|
|
title: '',
|
|
open: false,
|
|
// 表单参数
|
|
form: {},
|
|
// 查询订单列表参数
|
|
queryOrderParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
memberId: this.memberId,
|
|
},
|
|
orderListLoading: false,
|
|
// 查询账户数据参数
|
|
queryMemberBalanceParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
memberId: this.memberId,
|
|
},
|
|
// 会员余额变动记录
|
|
memberBalanceChanges: [],
|
|
memberBalanceChangesTotal: 0,
|
|
|
|
// 查询账户数据参数
|
|
queryMemberTransactionParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
memberId: this.memberId,
|
|
},
|
|
memberTransactionList: [],
|
|
memberTransactionTotal: 0,
|
|
};
|
|
},
|
|
created() {
|
|
console.log("created memberId==", this.memberId);
|
|
this.getMemberInfo();
|
|
|
|
this.getOrderList();
|
|
|
|
this.getMemberPersonPileInfo();
|
|
|
|
// this.getMemberBalanceChanges();
|
|
this.getMemberTransactionRecordList();
|
|
},
|
|
methods: {
|
|
// 查询会员信息
|
|
getMemberInfo() {
|
|
getInfo(this.memberId).then(response => {
|
|
console.log("getMemberInfo==", response);
|
|
this.memberInfo = response.data;
|
|
this.plateNumberList = response.data.plateNumberList;
|
|
});
|
|
},
|
|
// 查询会员个人桩列表
|
|
getMemberPersonPileInfo(){
|
|
getMemberPersonPileInfo(this.memberId).then(response => {
|
|
this.personalPileInfoList = response.data;
|
|
console.log("personalPileInfoList==", response);
|
|
});
|
|
},
|
|
// 修改车牌号
|
|
handleUpdate(plateNumber){
|
|
this.reset()
|
|
this.title = '修改车牌号信息'
|
|
this.open = true;
|
|
// this.form.plateNumber = plateNumber;
|
|
this.$set(this.form,'plateNumber',plateNumber)
|
|
},
|
|
/** 提交按钮 */
|
|
submitForm() {
|
|
if (!this.checkPlateNumber(this.form.plateNumber)) {
|
|
this.$message('请输入正确的车牌号码');
|
|
return;
|
|
}
|
|
const param = {
|
|
memberId: this.memberId,
|
|
licensePlateNumber: this.form.plateNumber
|
|
}
|
|
console.log("form:", this.form);
|
|
this.$refs['form'].validate((valid) => {
|
|
updatePlateNumber(param).then((response) => {
|
|
this.$modal.msgSuccess('修改成功')
|
|
this.reset()
|
|
this.open = false
|
|
this.getMemberInfo()
|
|
})
|
|
})
|
|
},
|
|
// 取消按钮
|
|
cancel() {
|
|
this.open = false
|
|
this.reset()
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {
|
|
memberId: null,
|
|
tpUpdatePlateNumber: null
|
|
}
|
|
this.resetForm('form')
|
|
},
|
|
/** 删除车牌号信息按钮操作 */
|
|
handleDelete(plateNumber) {
|
|
// console.log("licensePlateNumber:" + plateNumber);
|
|
const param = {
|
|
memberId: this.memberId,
|
|
licensePlateNumber: plateNumber
|
|
};
|
|
console.log("memberId:" + this.memberId);
|
|
console.log("licensePlateNumber:" + plateNumber);
|
|
this.$modal
|
|
.confirm('是否确认删除车牌号"' + plateNumber + '"').then(function() {
|
|
return deletePlateNumber(param);
|
|
}).then(() => {
|
|
this.getMemberInfo();
|
|
this.$modal.msgSuccess("删除成功");
|
|
}).catch(() => {});
|
|
},
|
|
// 查询会员充电订单
|
|
getOrderList() {
|
|
// this.orderListLoading = true;
|
|
this.queryOrderParams.memberId = this.memberId;
|
|
console.log("getOrderList param===", this.queryOrderParams)
|
|
listOrder(this.queryOrderParams).then(response => {
|
|
this.orderList = response.rows;
|
|
this.orderTotal = response.total;
|
|
// this.orderListLoading = false;
|
|
});
|
|
},
|
|
// 刷新按钮
|
|
refreshOrderList() {
|
|
this.orderListLoading = true;
|
|
setTimeout(() => {
|
|
this.getOrderList();
|
|
this.orderListLoading = false;
|
|
}, 500);
|
|
},
|
|
// 查询账户变动记录
|
|
getMemberBalanceChanges() {
|
|
this.queryMemberBalanceParams.memberId = this.memberId;
|
|
console.log("查询账户变动记录 param:", this.queryMemberBalanceParams);
|
|
getMemberBalanceChanges(this.queryMemberBalanceParams).then(response => {
|
|
console.log("查询账户变动记录 result:", response);
|
|
this.memberBalanceChanges = response.rows;
|
|
this.memberBalanceChangesTotal = response.total;
|
|
})
|
|
},
|
|
|
|
// 查询账户变动记录
|
|
getMemberTransactionRecordList() {
|
|
this.queryMemberTransactionParams.memberId = this.memberId;
|
|
console.log("查询账户变动记录 param:", this.queryMemberTransactionParams);
|
|
getMemberTransactionRecordList(this.queryMemberTransactionParams).then(response => {
|
|
console.log("查询账户变动记录 result:", response);
|
|
this.memberTransactionList = response.rows;
|
|
this.memberTransactionTotal = response.total;
|
|
})
|
|
},
|
|
// 车牌号校验
|
|
checkPlateNumber (plateNumber) {
|
|
const re = /[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/;
|
|
return plateNumber.search(re) !== -1;
|
|
},
|
|
}
|
|
};
|
|
</script>
|