bnyer
/
bnyer-cloud-page
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feature:完善支付订单页面

master
Penny 2 years ago
parent
c45531365e
commit
76467d164d
1 changed files with 50 additions and 291 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 337
      src/views/rights/aliPayOrder/index.vue

337
src/views/rights/aliPayOrder/index.vue
View File

@ -46,99 +46,56 @@
v-for="item in status"
:key="item.value"
:label="item.label"
:value="item.value"
/>
:value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="支付时间">
<el-date-picker
v-model="dateTimeRange"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['img:banner:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['img:banner:delete']"
>删除</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="aliPayOrderList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="编号" align="center" key="id" prop="id" v-if="columns[0].visible" />
<el-table-column label="banner名称" align="center" key="bannerName" prop="bannerName" v-if="columns[1].visible" :show-overflow-tooltip="true" width="150"/>
<el-table-column label="跳转地址" align="center" key="bannerUrl" prop="bannerUrl" v-if="columns[2].visible" :show-overflow-tooltip="true" />
<el-table-column label="来源平台" align="center" key="source" prop="source" v-if="columns[3].visible">
<el-table-column label="id" align="center" key="id" prop="id" v-if="columns[0].visible" />
<el-table-column label="手机号" align="center" key="mobile" prop="mobile" v-if="columns[1].visible" />
<el-table-column label="订单创建时间" align="center" key="orderTime" prop="orderTime" v-if="columns[2].visible">
<template slot-scope="scope">
{{scope.row.source == '0' ? "通用" : scope.row.source == '1' ? "抖音": scope.row.source == '2' ? "快手": scope.row.source == '3' ? "微信": ''}}
<span>{{ parseTime(scope.row.orderTime) }}</span>
</template>
</el-table-column>
<el-table-column label="banner图片" align="center" key="bannerImg" prop="bannerImg" v-if="columns[4].visible" width="120">
<el-table-column label="支付宝签约号" align="center" key="signCode" prop="signCode" v-if="columns[3].visible" width="180"/>
<el-table-column label="支付价格" align="center" key="price" prop="price" v-if="columns[4].visible" width="80"/>
<el-table-column label="其他类型签约号" align="center" key="otherOrderId" prop="otherOrderId" v-if="columns[5].visible" width="210"/>
<el-table-column label="用户支付宝唯一id" align="center" key="aliUserId" prop="aliUserId" v-if="columns[6].visible" width="150"/>
<el-table-column label="退订时间" align="center" key="unsubTime" prop="unsubTime" v-if="columns[7].visible">
<template slot-scope="scope">
<el-image :src="scope.row.bannerImg" :preview-src-list="bigImgList" @click="getBigImg(scope.row)" style="width: 160px; height: 60px"/>
<span>{{ parseTime(scope.row.unsubTime) }}</span>
</template>
</el-table-column>
<el-table-column label="序号" align="center" key="sort" prop="sort" v-if="columns[5].visible"/>
<el-table-column label="是否显示" align="center" key="isShow" v-if="columns[6].visible">
<el-table-column label="业务类型" align="center" key="businessType" prop="businessType" v-if="columns[8].visible" :show-overflow-tooltip="true" width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isShow"
active-value="1"
inactive-value="0"
@change="handleStatusChange(scope.row)"
></el-switch>
{{scope.row.status == '1' ? "权益类业务" :''}}
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[7].visible" width="160">
<el-table-column label="链接Id" align="center" key="linkId" prop="linkId" v-if="columns[9].visible" :show-overflow-tooltip="true" width="100"/>
<el-table-column label="链接名字" align="center" key="linkName" prop="linkName" v-if="columns[10].visible" :show-overflow-tooltip="true" />
<el-table-column label="订单状态" align="center" key="status" prop="status" v-if="columns[11].visible" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" v-if="columns[8].visible" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updateTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="160"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['img:banner:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['img:banner:delete']"
>删除</el-button>
{{scope.row.status == '0' ? "失败" : scope.row.status == '1' ? "成功": scope.row.status == '2' ? "支付成功尚未回调":''}}
</template>
</el-table-column>
</el-table>
@ -152,72 +109,11 @@
/>
</el-col>
</el-row>
<!-- 添加或修改banner对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="banner名称" prop="bannerName">
<el-input v-model="form.bannerName" placeholder="请输入banner名称" maxlength="30" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="跳转地址" prop="bannerUrl">
<el-input v-model="form.bannerUrl" placeholder="请输入跳转地址" maxlength="100" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="来源平台" prop="source" label-width="80px">
<el-select v-model="form.source" placeholder="来源平台" clearable>
<el-option
v-for="item in source"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="15">
<el-form-item label="banner上传" prop="bannerImg">
<el-upload
ref="upload"
:action="upload.url"
:limit="1"
accept=".jpg, .jpeg, .png"
:headers="upload.headers"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:file-list="fileList"
:auto-upload="true"
list-type="picture"
drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许上传jpg,jpeg,png格式图片。</span>
</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</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 { listAliPayOrder } from "@/api/rights/aliPayOrder";
import { getToken } from "@/utils/auth";
export default {
name: "aliPayOrder",
@ -235,48 +131,20 @@ export default {
showSearch: true,
// 总条数
total: 0,
// banner列表数据
// 阿里订单列表数据
aliPayOrderList: null,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 日期范围
dateRange: [],
//上传图片文件列表
fileList:[],
//大图列表
bigImgList:[],
// 日期时间范围
dateTimeRange: [],
//订单状态
status: [
{ value:'0',label:'失败'},
{ value:'1',label:'成功'},
{ value:'2',label:'支付成功尚未回调'},
],
//是否显示
isShow: [
{ value: '0', label: `否`},
{ value: '1', label: `是`}
],
// 表单参数
form: {},
defaultProps: {
children: "children",
label: "label"
},
// 图片上传参数
upload: {
// 是否显示弹出层
open: false,
// 弹出层标题
title: "",
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/file/upload" //http://localhost:7010/file/upload
},
// 查询参数
queryParams: {
pageNum: 1,
@ -291,77 +159,35 @@ export default {
},
// 列信息
columns: [
{ key: 0, label: `编号`, visible: true },
{ key: 1, label: `banner名称`, visible: true },
{ key: 2, label: `跳转地址`, visible: true },
{ key: 3, label: `来源平台`, visible: true },
{ key: 4, label: `banner图片`, visible: true },
{ key: 5, label: `序号`, visible: true },
{ key: 6, label: `是否显示`, visible: true },
{ key: 7, label: `创建时间`, visible: true },
{ key: 8, label: `更新时间`, visible: true }
{ key: 0, label: `id`, visible: true },
{ key: 1, label: `手机号`, visible: true },
{ key: 2, label: `订单创建时间`, visible: true },
{ key: 3, label: `支付宝签约号`, visible: true },
{ key: 4, label: `支付价格`, visible: true },
{ key: 5, label: `其他类型签约号`, visible: true },
{ key: 6, label: `用户支付宝唯一id`, visible: true },
{ key: 7, label: `退订时间`, visible: true },
{ key: 8, label: `业务类型`, visible: true },
{ key: 9, label: `链接Id`, visible: true },
{ key: 10, label: `链接名称`, visible: true },
{ key: 11, label: `订单状态`, visible: true }
],
// 表单校验
rules: {
bannerName: [
{ required: true, message: "banner名称不能为空", trigger: "blur" },
{ min: 2, max: 20, message: 'banner名称长度必须介于 2 和 20 之间', trigger: 'blur' }
],
bannerUrl: [
{ required: true, message: "bannerUrl不能为空", trigger: "blur" },
],
}
};
},
created() {
this.getList();
},
methods: {
/** 查询banner列表 */
/** 查询aliQPayOrder列表 */
getList() {
this.loading = true;
listAliPayOrder(this.queryParams).then(response => {
this.aliPayOrderList = response.rows;
listAliPayOrder(this.addDateRange(this.queryParams,this.dateTimeRange)).then(response => {
this.aliPayOrderList = response.records;
this.total = response.total;
this.loading = false;
}
);
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 用户状态修改
handleStatusChange(row) {
let text = row.isShow === "1" ? "启用" : "停用";
this.$modal.confirm('确认要' + text + 'id为' + row.id + '的banner吗？').then(function() {
let data = {
id: row.id,
status: row.isShow
}
return changeStatus(data);
}).then(() => {
this.$modal.msgSuccess(text + "成功");
}).catch(function() {
row.isShow = row.isShow === "0" ? "1" : "0";
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
bannerName: undefined,
bannerUrl: undefined,
bannerImg: undefined,
source: undefined,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
@ -369,7 +195,7 @@ export default {
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.dateTimeRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
@ -379,73 +205,6 @@ export default {
this.single = selection.length != 1;
this.multiple = !selection.length;
},
/** 查看大图 */
getBigImg(row){
this.bigImgList.push(row.bannerImg)
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加banner";
this.fileList = []
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getBannerDetails(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改banner";
this.fileList = []
});
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != undefined) {
editBanner(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addBanner(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const id = row.id || this.ids;
this.$modal.confirm('是否确认删除编号为"' + id + '"的banner？').then(function() {
return delBanner(id);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.form.bannerImg = response.data
this.fileList.url = response.data
this.fileList.name = '图片上传结果'
this.upload.open = false;
this.upload.isUploading = false;
//this.$refs.upload.clearFiles();
//this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.data + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
//this.getList();
}
}
};
</script>
Write Preview
Loading…
Cancel
Save