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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 341
      src/views/rights/aliPayOrder/index.vue

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

@ -46,99 +46,56 @@
v-for="item in status" v-for="item in status"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"/>
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="支付时间">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <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-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </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 v-loading="loading" :data="aliPayOrderList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" /> <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="id" 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="mobile" prop="mobile" v-if="columns[1].visible" />
<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="orderTime" prop="orderTime" v-if="columns[2].visible">
<el-table-column label="来源平台" align="center" key="source" prop="source" v-if="columns[3].visible">
<template slot-scope="scope">
{{scope.row.source == '0' ? "通用" : scope.row.source == '1' ? "抖音": scope.row.source == '2' ? "快手": scope.row.source == '3' ? "微信": ''}}
</template>
</el-table-column>
<el-table-column label="banner图片" align="center" key="bannerImg" prop="bannerImg" v-if="columns[4].visible" width="120">
<template slot-scope="scope">
<el-image :src="scope.row.bannerImg" :preview-src-list="bigImgList" @click="getBigImg(scope.row)" style="width: 160px; height: 60px"/>
</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">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <span>{{ parseTime(scope.row.orderTime) }}</span>
v-model="scope.row.isShow"
active-value="1"
inactive-value="0"
@change="handleStatusChange(scope.row)"
></el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[7].visible" width="160"> <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"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.unsubTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" v-if="columns[8].visible" width="160"> <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"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.updateTime) }}</span> {{scope.row.status == '1' ? "权益类业务" :''}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="链接Id" align="center" key="linkId" prop="linkId" v-if="columns[9].visible" :show-overflow-tooltip="true" width="100"/>
label="操作" <el-table-column label="链接名字" align="center" key="linkName" prop="linkName" v-if="columns[10].visible" :show-overflow-tooltip="true" />
align="center" <el-table-column label="订单状态" align="center" key="status" prop="status" v-if="columns[11].visible" :show-overflow-tooltip="true">
width="160"
class-name="small-padding fixed-width"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button {{scope.row.status == '0' ? "失败" : scope.row.status == '1' ? "成功": scope.row.status == '2' ? "支付成功尚未回调":''}}
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>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -152,72 +109,11 @@
/> />
</el-col> </el-col>
</el-row> </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> </div>
</template> </template>
<script> <script>
import { listAliPayOrder } from "@/api/rights/aliPayOrder"; import { listAliPayOrder } from "@/api/rights/aliPayOrder";
import { getToken } from "@/utils/auth";
export default { export default {
name: "aliPayOrder", name: "aliPayOrder",
@ -235,48 +131,20 @@ export default {
showSearch: true, showSearch: true,
// 总条数 // 总条数
total: 0, total: 0,
// banner列表数据 // 阿里订单列表数据
aliPayOrderList: null, aliPayOrderList: null,
// 弹出层标题
title: "",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
// 日期范围 // 日期时间范围
dateRange: [], dateTimeRange: [],
//上传图片文件列表
fileList:[],
//大图列表
bigImgList:[],
//订单状态 //订单状态
status: [ status: [
{ value:'0',label:'失败'}, { value:'0',label:'失败'},
{ value:'1',label:'成功'}, { value:'1',label:'成功'},
{ value:'2',label:'支付成功尚未回调'}, { value:'2',label:'支付成功尚未回调'},
], ],
//是否显示
isShow: [
{ value: '0', label: `否`},
{ value: '1', label: `是`}
],
// 表单参数 // 表单参数
form: {}, 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: { queryParams: {
pageNum: 1, pageNum: 1,
@ -291,77 +159,35 @@ export default {
}, },
// 列信息 // 列信息
columns: [ columns: [
{ key: 0, label: `编号`, visible: true }, { key: 0, label: `id`, visible: true },
{ key: 1, label: `banner名称`, visible: true }, { key: 1, label: `手机号`, visible: true },
{ key: 2, label: `跳转地址`, visible: true }, { key: 2, label: `订单创建时间`, visible: true },
{ key: 3, label: `来源平台`, visible: true }, { key: 3, label: `支付宝签约号`, visible: true },
{ key: 4, label: `banner图片`, visible: true }, { key: 4, label: `支付价格`, visible: true },
{ key: 5, label: `序号`, visible: true }, { key: 5, label: `其他类型签约号`, visible: true },
{ key: 6, label: `是否显示`, visible: true }, { key: 6, label: `用户支付宝唯一id`, visible: true },
{ key: 7, label: `创建时间`, visible: true }, { key: 7, label: `退订时间`, visible: true },
{ key: 8, 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() { created() {
this.getList(); this.getList();
}, },
methods: { methods: {
/** 查询banner列表 */ /** 查询aliQPayOrder列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listAliPayOrder(this.queryParams).then(response => { listAliPayOrder(this.addDateRange(this.queryParams,this.dateTimeRange)).then(response => {
this.aliPayOrderList = response.rows; this.aliPayOrderList = response.records;
this.total = response.total; this.total = response.total;
this.loading = false; 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() { handleQuery() {
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
@ -369,7 +195,7 @@ export default {
}, },
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.dateRange = []; this.dateTimeRange = [];
this.resetForm("queryForm"); this.resetForm("queryForm");
this.handleQuery(); this.handleQuery();
}, },
@ -379,73 +205,6 @@ export default {
this.single = selection.length != 1; this.single = selection.length != 1;
this.multiple = !selection.length; 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> </script>
Write Preview
Loading…
Cancel
Save