xuechunyuan
3 years ago
parent
674729c9bc
commit
bcf4b19d27
4 changed files with 2169 additions and 1681 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,354 @@ |
||||
<template> |
||||
<basic-container> |
||||
<avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" v-model="form" |
||||
:permission="permissionList" :before-open="beforeOpen" @search-change="searchChange" @search-reset="searchReset" |
||||
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" |
||||
@refresh-change="refreshChange"> |
||||
<template slot-scope="{ row }" slot="menu"> |
||||
<el-button type="text" icon="el-icon-shopping-cart-1" size="small" @click="handleDetail(row)" |
||||
:disabled="row.neckLength < 1">购买记录</el-button> |
||||
<el-button type="text" icon="el-icon-delete" size="small" @click="handleDelete(row)">删除</el-button> |
||||
</template> |
||||
<template slot-scope="scope" slot="menuLeft"> |
||||
<el-button icon="el-icon-delete" type="danger" size="small" @click="deleteItem" plain>删除</el-button> |
||||
<el-button icon="el-icon-download" type="warning" size="small" @click="exportData" plain>导出</el-button> |
||||
</template> |
||||
</avue-crud> |
||||
<el-dialog :visible.sync="dialogVisible" width="60%" title="购买记录" :append-to-body="true" center> |
||||
<el-descriptions :column="2" border> |
||||
<el-descriptions-item label="昵称">kooriookami</el-descriptions-item> |
||||
<el-descriptions-item label="手机号">18100000000</el-descriptions-item> |
||||
<template v-for="(item, index) in recordData"> |
||||
<el-descriptions-item label="下单时间">{{item.createTime}}</el-descriptions-item> |
||||
<el-descriptions-item label="下单编号">{{item.orderNo}}</el-descriptions-item> |
||||
</template> |
||||
</el-descriptions> |
||||
<div style="margin: 20px 0 0; text-align:center;"> |
||||
<el-pagination |
||||
background |
||||
layout="total, prev, pager, next" |
||||
@current-change="currentRecordChange" |
||||
:total="recordPage.total"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-dialog> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
// import {getBaseList,getTypeList} from "@/api/base" |
||||
import { |
||||
getList, |
||||
exportList, |
||||
deleteList, |
||||
detailList, |
||||
} from "@/api/statistics/statistics"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
form: {}, |
||||
dialogVisible: false, |
||||
query: {}, |
||||
loading: true, |
||||
page: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 0, |
||||
}, |
||||
selectionList: [], |
||||
option: { |
||||
selection: true, |
||||
searchShowBtn: false, |
||||
refreshBtn: false, |
||||
columnBtn: false, |
||||
height: "auto", |
||||
calcHeight: 30, |
||||
tip: false, |
||||
searchShow: true, |
||||
searchMenuSpan: 4, |
||||
searchSpan: 6, |
||||
border: false, |
||||
addBtn: false, |
||||
viewBtn: false, |
||||
editBtn: false, |
||||
delBtn: false, |
||||
column: [ |
||||
{ |
||||
label: "微信昵称", |
||||
prop: "nickname", |
||||
search: true, |
||||
}, |
||||
{ |
||||
label: "手机号", |
||||
prop: "phonenumber", |
||||
search: true, |
||||
}, |
||||
{ |
||||
label: "购买次数", |
||||
prop: "neckLength", |
||||
html: true, |
||||
formatter: (data) => { |
||||
return '<span style="' + (data.neckLength > 0 ? '' : 'color:red;') + '">' + data.neckLength + '</span>' |
||||
} |
||||
}, |
||||
], |
||||
}, |
||||
data: [], |
||||
//购买记录 |
||||
recordPage: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 1 |
||||
}, |
||||
recordRow: {}, |
||||
recordData: [], |
||||
|
||||
}; |
||||
}, |
||||
computed: { |
||||
ids() { |
||||
let ids = []; |
||||
this.selectionList.forEach((ele) => { |
||||
ids.push(ele.id); |
||||
}); |
||||
return ids.join(","); |
||||
}, |
||||
}, |
||||
created() { |
||||
this.onLoad(); |
||||
}, |
||||
methods: { |
||||
sizeChange(pageSize) { |
||||
this.page.pageSize = pageSize; |
||||
this.onLoad(); |
||||
}, |
||||
//购买记录 |
||||
handleDetail(row) { |
||||
this.recordRow = row; |
||||
this.recordData = [ |
||||
{ createTime: '2023-07-21 21:12:53', orderNo: '14426859489451654' } |
||||
]; |
||||
this.recordPage.total = 20; |
||||
this.dialogVisible = true; |
||||
}, |
||||
//购买记录页码切换 |
||||
currentRecordChange(currentPage) { |
||||
console.log(currentPage) |
||||
this.recordPage.currentPage = currentPage; |
||||
// this.recordData = [ |
||||
// { createTime: '2023-07-21 21:12:53', orderNo: '14426859489451654' }, |
||||
// { createTime: '2023-07-21 21:12:53', orderNo: '14426859489451654' }, |
||||
// { createTime: '2023-07-21 21:12:53', orderNo: '14426859489451654' } |
||||
// ]; |
||||
this.handleDetail(); |
||||
}, |
||||
selectionChange(data) { |
||||
this.selectionList = data; |
||||
}, |
||||
currentChange(currentPage) { |
||||
this.page.currentPage = currentPage; |
||||
this.onLoad(); |
||||
}, |
||||
getWinData() { |
||||
getBaseList().then((res) => { |
||||
this.winData = res.data.data; |
||||
let tmp = this.winData.find((item) => item.id == this.userInfo.user_id); |
||||
if (tmp) { |
||||
this.form.windows = tmp.id; |
||||
this.isWinDis = true; |
||||
} |
||||
}); |
||||
}, |
||||
getTypeData() { |
||||
getTypeList().then((res) => { |
||||
this.typeData = res.data.data; |
||||
}); |
||||
}, |
||||
handleList(row) { |
||||
console.log(row); |
||||
this.dialogVisible = true; |
||||
getResolveList({ appealId: row.id }).then((res) => { |
||||
console.log("res", res); |
||||
this.listData = res.data.data; |
||||
}); |
||||
}, |
||||
searchReset() { |
||||
this.query = {}; |
||||
this.form = {}; |
||||
this.onLoad(this.page); |
||||
}, |
||||
searchChange(params, done) { |
||||
console.log(params) |
||||
this.form = params |
||||
console.log(this.form); |
||||
|
||||
this.query = this.form; |
||||
this.page.currentPage = 1; |
||||
this.onLoad(this.page, this.form); |
||||
done(); |
||||
}, |
||||
handleSuccess(res) { |
||||
console.log(res); |
||||
if (res.code == 200) { |
||||
this.$message.success("上传成功"); |
||||
} |
||||
}, |
||||
fn(str) { |
||||
let num = null; |
||||
str >= 10 ? (num = str) : (num = "0" + str); |
||||
return num; |
||||
}, |
||||
getTime() { |
||||
//获取当前时间 |
||||
var date = new Date(); |
||||
var year = date.getFullYear(); //当前年份 |
||||
var month = date.getMonth(); //当前月份 |
||||
var data = date.getDate(); //天 |
||||
var hours = date.getHours(); //小时 |
||||
var minute = date.getMinutes(); //分 |
||||
var second = date.getSeconds(); //秒 |
||||
this.day = date.getDay(); //获取当前星期几 |
||||
// this.getWeek(this.day); |
||||
this.time = this.fn(hours) + ":" + this.fn(minute); |
||||
this.date = year + "-" + (month + 1) + "-" + data; |
||||
}, |
||||
onLoad() { |
||||
let params = {}; |
||||
// params = { |
||||
// username:this.form.name ? this.form.name : '', |
||||
// phone:this.form.phonenumber ? this.form.phonenumber : '', |
||||
// pillowHardness:this.form.hardness ? this.form.hardness : '', |
||||
// pillowMaterial:this.form.material ? this.form.material : '' |
||||
// } |
||||
|
||||
if (!this.form.timeArr) { |
||||
params = { |
||||
username: this.form.username ? this.form.username : "", |
||||
phone: this.form.phonenumber ? this.form.phonenumber : "", |
||||
pillowHardness: this.form.hardness ? this.form.hardness : "", |
||||
pillowMaterial: this.form.material ? this.form.material : "", |
||||
ageRange: this.form.ageRange ? this.form.ageRange : "", |
||||
}; |
||||
} else { |
||||
params = { |
||||
username: this.form.username ? this.form.username : "", |
||||
phone: this.form.phonenumber ? this.form.phonenumber : "", |
||||
pillowHardness: this.form.hardness ? this.form.hardness : "", |
||||
pillowMaterial: this.form.material ? this.form.material : "", |
||||
ageRange: this.form.ageRange ? this.form.ageRange : "", |
||||
startTime: this.form.timeArr[0], |
||||
endTime: this.form.timeArr[1], |
||||
}; |
||||
} |
||||
console.log("par", params); |
||||
|
||||
getList({ |
||||
current: this.page.currentPage, |
||||
size: this.page.pageSize, |
||||
...params, |
||||
}).then((res) => { |
||||
console.log("res==>", res); |
||||
this.loading = false; |
||||
this.data = res.data.data.records; |
||||
this.page.total = res.data.data.total; |
||||
}); |
||||
}, |
||||
addRegister() { |
||||
this.$router.push({ path: "/register/add", query: { type: "add" } }); |
||||
}, |
||||
exportData() { |
||||
let params = {}; |
||||
if (!this.form.timeArr) { |
||||
params = { |
||||
username: this.form.name ? this.form.name : "", |
||||
phone: this.form.phonenumber ? this.form.phonenumber : "", |
||||
pillowHardness: this.form.hardness ? this.form.hardness : "", |
||||
pillowMaterial: this.form.material ? this.form.material : "", |
||||
ageRange: this.form.age ? this.form.age : "", |
||||
}; |
||||
} else { |
||||
params = { |
||||
username: this.form.name ? this.form.name : "", |
||||
phone: this.form.phonenumber ? this.form.phonenumber : "", |
||||
pillowHardness: this.form.hardness ? this.form.hardness : "", |
||||
pillowMaterial: this.form.material ? this.form.material : "", |
||||
ageRange: this.form.age ? this.form.age : "", |
||||
startTime: this.form.timeArr[0], |
||||
endTime: this.form.timeArr[1], |
||||
}; |
||||
} |
||||
exportList(params).then((res) => { |
||||
console.log(res); |
||||
if (!res || !res.data) { |
||||
this.$message({ |
||||
type: "error", |
||||
message: "导出失败！", |
||||
}); |
||||
return; |
||||
} |
||||
let blob = new Blob([res.data]); //response.data为后端传的流文件 |
||||
let downloadFilename = "统计" + ".xlsx"; //设置导出的文件名 |
||||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
||||
//兼容ie浏览器 |
||||
window.navigator.msSaveOrOpenBlob(blob, downloadFilename); |
||||
} else { |
||||
//谷歌,火狐等浏览器 |
||||
let url = window.URL.createObjectURL(blob); |
||||
let downloadElement = document.createElement("a"); |
||||
downloadElement.style.display = "none"; |
||||
downloadElement.href = url; |
||||
downloadElement.download = downloadFilename; |
||||
document.body.appendChild(downloadElement); |
||||
downloadElement.click(); |
||||
document.body.removeChild(downloadElement); |
||||
window.URL.revokeObjectURL(url); |
||||
} |
||||
this.$message({ type: "success", message: "导出成功！" }); |
||||
}); |
||||
}, |
||||
deleteItem() { |
||||
if (this.selectionList.length == 0) { |
||||
this.$message.warning("请至少选择一条数据"); |
||||
return; |
||||
} |
||||
this.$confirm(`确认删除当前数据吗？`, { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
}).then(() => { |
||||
deleteList(this.ids).then((res) => { |
||||
console.log(res); |
||||
if (res.data.code == 200) { |
||||
this.$message.success("删除成功"); |
||||
this.page.pageSize = 1; |
||||
this.onLoad(); |
||||
} |
||||
}); |
||||
}); |
||||
}, |
||||
importRegister() { }, |
||||
handleEdit() { |
||||
this.$router.push({ path: "/request/add" }); |
||||
}, |
||||
handleDelete(row) { |
||||
this.$confirm(`确认删除当前数据吗？`, { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
}).then(() => { |
||||
deleteList(row.id).then((res) => { |
||||
console.log(res); |
||||
if (res.data.code == 200) { |
||||
this.$message.success("删除成功"); |
||||
this.page.currentPage = 1; |
||||
this.onLoad(); |
||||
} |
||||
}); |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
</style> |
||||
@ -0,0 +1,140 @@ |
||||
<template> |
||||
<basic-container> |
||||
<el-form :inline="true"> |
||||
<el-form-item label="商品介绍详情图片："> |
||||
<div style="width: 360px; height: calc(100vh - 280px); overflow: auto;"> |
||||
<img :src="productDetail.src" style="width: 100%; height: auto;" /> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label-width="0"> |
||||
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" |
||||
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> |
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar"> |
||||
<template v-else> |
||||
<i class="el-icon-plus avatar-uploader-icon"></i> |
||||
<div class="tip">图片宽度：750 高度：不限 文件大小：≤5M</div> |
||||
</template> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<div style="text-align:right;padding: 20px 0;"> |
||||
<el-button type="success" size="small" @click="doSave">重新上传</el-button> |
||||
<el-button type="info" size="small" @click="cancelPublish" v-if="productDetail.status == 2">取消发布</el-button> |
||||
<el-button type="primary" size="small" @click="doPublish" v-if="productDetail.status == 1">发 布</el-button> |
||||
</div> |
||||
</el-form> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
// import {getBaseList,getTypeList} from "@/api/base" |
||||
import { |
||||
getList, |
||||
exportList, |
||||
deleteList, |
||||
detailList, |
||||
} from "@/api/statistics/statistics"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
productDetail: { |
||||
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', |
||||
status: 1 |
||||
}, |
||||
imageUrl: '' |
||||
|
||||
}; |
||||
}, |
||||
created() { |
||||
}, |
||||
methods: { |
||||
//商品详情 |
||||
queryProduct() { |
||||
|
||||
}, |
||||
//重新上传 |
||||
doSave() { |
||||
if(this.imageUrl == '') { |
||||
this.$message.warning("请先上传图片"); |
||||
return; |
||||
} |
||||
this.$confirm(`确认重新上传当前商品图片吗？`, { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
}).then(() => { |
||||
this.$message.success("重新上传成功"); |
||||
this.imageUrl = ""; |
||||
this.productDetail.src = "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"; |
||||
}); |
||||
}, |
||||
//取消发布 |
||||
cancelPublish() { |
||||
this.$confirm(`确认取消发布当前商品吗？`, { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
}).then(() => { |
||||
this.$message.success("取消发布成功"); |
||||
}); |
||||
}, |
||||
//发布 |
||||
doPublish() { |
||||
this.$confirm(`确认发布当前商品吗？`, { |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
}).then(() => { |
||||
this.$message.success("发布成功"); |
||||
this.imageUrl = ""; |
||||
}); |
||||
}, |
||||
handleAvatarSuccess(res, file) { |
||||
this.imageUrl = URL.createObjectURL(file.raw); |
||||
}, |
||||
beforeAvatarUpload(file) { |
||||
const isJPG = file.type === 'image/jpeg'; |
||||
const isLt2M = file.size / 1024 / 1024 < 5; |
||||
|
||||
if (!isJPG) { |
||||
this.$message.error('上传头像图片只能是 JPG 格式!'); |
||||
} |
||||
if (!isLt2M) { |
||||
this.$message.error('上传头像图片大小不能超过 5MB!'); |
||||
} |
||||
return isJPG && isLt2M; |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss"> |
||||
.avatar-uploader .el-upload { |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 6px; |
||||
cursor: pointer; |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.avatar-uploader .el-upload:hover { |
||||
border-color: #409EFF; |
||||
} |
||||
|
||||
.avatar-uploader-icon { |
||||
font-size: 28px; |
||||
color: #409EFF; |
||||
width: 368px; |
||||
text-align: center; |
||||
margin-top: 100px; |
||||
} |
||||
|
||||
.tip { |
||||
line-height: 78px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.avatar { |
||||
width: 368px; |
||||
height: 368px; |
||||
display: block; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue