1
0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

Merge branch 'main' into production

This commit is contained in:
2023-04-25 02:21:39 +08:00
90 changed files with 1735 additions and 541 deletions

View File

@@ -0,0 +1,63 @@
import send_request from '../utils/send_request';
/**
* 获取订单列表
* @returns
*/
export function getOrderList(params) {
return send_request({
url: '/shop/order/manage/getOrderList',
method: 'GET',
params: params,
});
};
/**
* 获取订单详情
* @returns
*/
export function getOrderDetail(params) {
return send_request({
url: '/shop/order/miniprogram/orderDetail',
method: 'GET',
params: params,
});
};
/**
* 订单发货
* @returns
*/
export function deliverOrder(params) {
return send_request({
url: '/shop/order/manage/deliverOrder',
method: 'POST',
useQS: true,
params: params,
});
};
/**
* 关闭订单
* @returns
*/
export function withdrawOrder(params) {
return send_request({
url: '/shop/order/manage/cancelOrder',
method: 'POST',
useQS: true,
params: params,
});
};
/**
* 导出订单列表
* @returns
*/
export function exportOrderList(params) {
return send_request({
url: '/shop/order/manage/exportOrderList',
method: 'GET',
params: params,
});
};

View File

@@ -24,6 +24,24 @@ export function userLogout() {
return null;
};
/**
* 修改密码
* @returns
*/
export function updatePwd({ oldpwd, newpwd }) {
let userId = localStorage.getItem("ms_user_id")
return send_request({
url: '/user/updatePwd',
method: 'POST',
useQS: true,
params: {
"userId": userId,
"oldpwd": oldpwd,
"newpwd": newpwd,
},
});
};
/**
* 获取用户列表
* @returns

View File

@@ -13,7 +13,7 @@
<div class="header-right">
<div class="header-user-con">
<!-- 消息中心 -->
<div class="btn-bell" @click="router.push('/tabs')">
<div class="btn-bell" @click="router.push('/tabs')" v-if="false">
<el-tooltip effect="dark" :content="message ? `有${message}条未读消息` : `消息中心`" placement="bottom">
<i class="el-icon-lx-notice"></i>
</el-tooltip>

View File

@@ -56,16 +56,27 @@
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="操作" width="220" align="center" v-if="props.editFunc || props.deleteFunc">
<el-table-column label="操作" width="220" align="center"
v-if="props.editFunc || props.deleteFunc || props.customEditHandle">
<template #default="scope">
<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)"
v-permiss="props.editPermiss" v-if="props.editFunc">
编辑
</el-button>
<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)"
v-permiss="props.editPermiss" v-if="props.deleteFunc">
删除
</el-button>
<template v-if="props.customEditHandle">
<el-button text :icon="List"
@click="props.customEditHandle((scope as any).$index, (scope as any).row, getData)"
v-permiss="props.editPermiss">
管理
</el-button>
</template>
<template v-else>
<el-button text :icon="Edit" @click="handleEdit((scope as any).$index, (scope as any).row)"
v-permiss="props.editPermiss" v-if="props.editFunc">
编辑
</el-button>
<el-button text :icon="Delete" class="red"
@click="handleDelete((scope as any).$index, (scope as any).row)"
v-permiss="props.editPermiss" v-if="props.deleteFunc">
删除
</el-button>
</template>
</template>
</el-table-column>
</el-table>
@@ -141,7 +152,7 @@
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus, Filter, Download } from '@element-plus/icons-vue';
import { Delete, Edit, Search, Plus, Filter, Download, List } from '@element-plus/icons-vue';
import * as xlsx from 'xlsx';
import Mock from 'mockjs';
import ImageUpload from './image-upload.vue';
@@ -176,6 +187,12 @@ const props = defineProps({
'editPermiss': {
type: String,
required: true,
},
// 自定义修改按钮点击事件
'customEditHandle': {
type: Function,
required: false,
}
})
@@ -431,10 +448,10 @@ const saveEdit = async (formEl: FormInstance | undefined) => {
var result;
if (formId > 0) {
// 修改记录
var result = await props.editFunc(form)
var result = await props.editFunc?.(form)
} else {
// 新增记录
var result = await props.addFunc(form)
var result = await props.addFunc?.(form)
query.pageIndex = Math.ceil((pageTotal.value + 1) / query.pageSize);
}
console.log("result", result)
@@ -460,7 +477,7 @@ const handleDelete = (index: number, row: any) => {
// 二次确认删除
ElMessageBox.confirm('确定要删除吗?', '提示', { type: 'warning' })
.then(async () => {
var result = await props.deleteFunc({
var result = await props.deleteFunc?.({
id: row[idFieldName],
})
if (result) {
@@ -540,7 +557,7 @@ const handleExport = async () => {
// 数据部分
let excelList = dataList.map((row: any) => {
// 通过翻译前的 key 拿数据
return fieldNameList.map((field: any) => String(row[field]))
return fieldNameList.map((field: any) => String(row[field] || ""))
})
excelList.unshift(firstRow) // 插入表头

View File

@@ -91,6 +91,11 @@ const items = [
title: '商品管理',
permiss: 'shop-good-setting',
},
{
index: '/shop-order-setting',
title: '订单管理',
permiss: 'shop-order-setting',
},
],
},
{

View File

@@ -84,6 +84,15 @@ const routes: RouteRecordRaw[] = [
},
component: () => import('../views/shop-good-setting.vue'),
},
{
path: '/shop-order-setting',
name: 'shop-order-setting',
meta: {
title: '订单管理',
permiss: 'shop-order-setting',
},
component: () => import('../views/shop-order-setting.vue'),
},
{

View File

@@ -25,6 +25,7 @@ export const usePermissStore = defineStore('permiss', {
"shop",
"shop-cate-setting",
"shop-good-setting",
"shop-order-setting",
"privilege",
"privilege-user-setting",
@@ -46,6 +47,7 @@ export const usePermissStore = defineStore('permiss', {
"shop",
"shop-cate-setting",
"shop-good-setting",
"shop-order-setting",
"privilege",
"privilege-user-setting",

View File

@@ -22,6 +22,12 @@ export default {
/**
* 后端接口请求地址
* (结尾加不加 / 都可)
*
* FIXME 环境配置
*
* backendHost
* - 线上环境:"https://epp.only4.work/"
* - 开发环境:"http://localhost/"
*/
backendHost: "https://epp-prod.only4.work/",
};

View File

@@ -1,213 +1,34 @@
<template>
<div class="container">
<el-row :gutter="20">
<el-col :span="8">
<el-card shadow="hover" class="mgb20" style="height: 252px">
<div class="user-info">
<el-avatar :size="120" :src="imgurl" />
<div class="user-info-cont">
<div class="user-info-name">{{ name }}</div>
<div>{{ role }}</div>
</div>
</div>
<div class="user-info-list">
上次登录时间
<span>2022-10-01</span>
</div>
<div class="user-info-list">
上次登录地点
<span>东莞</span>
</div>
</el-card>
<el-card shadow="hover" style="height: 252px">
<template #header>
<div class="clearfix">
<span>语言详情</span>
</div>
</template>
Vue
<el-progress :percentage="79.4" color="#42b983"></el-progress>
TypeScript
<el-progress :percentage="14" color="#f1e05a"></el-progress>
CSS
<el-progress :percentage="5.6"></el-progress>
HTML
<el-progress :percentage="1" color="#f56c6c"></el-progress>
</el-card>
</el-col>
<el-col :span="16">
<el-row :gutter="20" class="mgb20">
<el-col :span="8">
<el-card shadow="hover" :body-style="{ padding: '0px' }">
<div class="grid-content grid-con-1">
<el-icon class="grid-con-icon"><User /></el-icon>
<div class="grid-cont-right">
<div class="grid-num">1234</div>
<div>用户访问量</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover" :body-style="{ padding: '0px' }">
<div class="grid-content grid-con-2">
<el-icon class="grid-con-icon"><ChatDotRound /></el-icon>
<div class="grid-cont-right">
<div class="grid-num">321</div>
<div>系统消息</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="hover" :body-style="{ padding: '0px' }">
<div class="grid-content grid-con-3">
<el-icon class="grid-con-icon"><Goods /></el-icon>
<div class="grid-cont-right">
<div class="grid-num">500</div>
<div>商品数量</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-card shadow="hover" style="height: 403px">
<template #header>
<div class="clearfix">
<span>预警列表</span>
<el-button style="float: right; padding: 3px 0" text>添加</el-button>
</div>
</template>
<el-table :show-header="false" :data="todoList" style="width: 100%">
<el-table-column width="40">
<template #default="scope">
<el-checkbox v-model="scope.row.status"></el-checkbox>
</template>
</el-table-column>
<el-table-column>
<template #default="scope">
<div
class="todo-item"
:class="{
'todo-item-del': scope.row.status
}"
>
{{ scope.row.title }}
</div>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</div>
<div class="container">
<el-card shadow="hover" class="mgb20" style="height: 252px">
<div class="user-info">
<el-avatar :size="120" :src="imgurl" />
<div class="user-info-cont">
<div class="user-info-name">{{ name }}</div>
<div>{{ role }}</div>
</div>
</div>
<div class="user-info-list">
上次登录时间
<span>2022-10-01</span>
</div>
<div class="user-info-list">
上次登录地点
<span>东莞</span>
</div>
</el-card>
</div>
</template>
<script setup lang="ts" name="dashboard">
import { ref, reactive } from 'vue';
import imgurl from '../assets/img/img.jpg';
const roleMap = {
}
const name = localStorage.getItem('ms_username');
const role: string = name === 'admin' ? '超级管理员' : '普通用户';
</script>
<style scoped>
.el-row {
margin-bottom: 20px;
}
.grid-content {
display: flex;
align-items: center;
height: 100px;
}
.grid-cont-right {
flex: 1;
text-align: center;
font-size: 14px;
color: #999;
}
.grid-num {
font-size: 30px;
font-weight: bold;
}
.grid-con-icon {
font-size: 50px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
color: #fff;
}
.grid-con-1 .grid-con-icon {
background: rgb(45, 140, 240);
}
.grid-con-1 .grid-num {
color: rgb(45, 140, 240);
}
.grid-con-2 .grid-con-icon {
background: rgb(100, 213, 114);
}
.grid-con-2 .grid-num {
color: rgb(100, 213, 114);
}
.grid-con-3 .grid-con-icon {
background: rgb(242, 94, 67);
}
.grid-con-3 .grid-num {
color: rgb(242, 94, 67);
}
.user-info {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 2px solid #ccc;
margin-bottom: 20px;
}
.user-info-cont {
padding-left: 50px;
flex: 1;
font-size: 14px;
color: #999;
}
.user-info-cont div:first-child {
font-size: 30px;
color: #222;
}
.user-info-list {
font-size: 14px;
color: #999;
line-height: 25px;
}
.user-info-list span {
margin-left: 70px;
}
.mgb20 {
margin-bottom: 20px;
}
.todo-item {
font-size: 14px;
}
.todo-item-del {
text-decoration: line-through;
color: #999;
}
</style>
<style scoped></style>

View File

@@ -116,7 +116,10 @@ const submitForm = (formEl: FormInstance | undefined) => {
if (!data) return;
console.log("login data", data, data.userInfo);
if (![1, 2].includes(data.userInfo?.roleId)) {
ElMessage.error('您所在用户组无权登录当前系统');
return;
}
ElMessage.success('登录成功');
localStorage.setItem('ms_username', data.userInfo?.username);
localStorage.setItem('ms_realname', data.userInfo?.realname);

View File

@@ -0,0 +1,191 @@
<template>
<div class="container">
<manageList :list-func="shopOrderApi.getOrderList" :custom-edit-handle="editHandle"
:export-func="shopOrderApi.exportOrderList" edit-permiss="shop-order-setting" />
<!-- 新增 / 编辑弹出框 -->
<el-dialog title="管理订单" v-model="visible" style="width: 60%; min-width: 280px;">
<el-row>
<el-col :span="12">
<p class="line-height">
<span class="row-index">订单ID</span>
{{ orderDetail.id || "" }}
</p>
<p class="line-height">
<span class="row-index">订单状态</span>
<el-tag effect="plain" round>{{ orderDetail.orderStatus || "" }}</el-tag>
{{ orderDetail.orderStatusCode || "" }}
</p>
<p class="line-height">
<span class="row-index">下单用户ID</span>
{{ orderDetail.userId || "" }}
</p>
<p class="line-height">
<span class="row-index">订单价格</span>
{{ orderDetail.orderPrice ? ('¥' + orderDetail.orderPrice) : "-" }}
</p>
<p class="line-height">
<span class="row-index">下单时间</span>
{{ orderDetail.orderDate || "-" }}
</p>
<p class="line-height">
<span class="row-index">订单取消时间</span>
{{ orderDetail.cancelDate || "-" }}
</p>
<p class="line-height">
<span class="row-index">订单支付时间</span>
{{ orderDetail.payDate || "-" }}
</p>
<p class="line-height">
<span class="row-index">订单发货时间</span>
{{ orderDetail.shipDate || "-" }}
</p>
<p class="line-height">
<span class="row-index">订单送达时间</span>
{{ orderDetail.deliverDate || "-" }}
</p>
<p class="line-height">
<span class="row-index">运单号</span>
<template
v-if="orderDetail.orderStatusCode != 'Processing' && orderDetail.orderStatusCode != 'Shipped'">
{{ orderDetail.expressId || "-" }}
</template>
<el-input v-else v-model="shippingInfo.expressId" placeholder="Please input" />
</p>
<p class="line-height">
<span class="row-index">发货备注</span>
<template
v-if="orderDetail.orderStatusCode != 'Processing' && orderDetail.orderStatusCode != 'Shipped'">
{{ orderDetail.comment || "-" }}
</template>
<el-input v-else v-model="shippingInfo.comment" placeholder="Please input" />
</p>
</el-col>
<el-col :span="12">
<p style="margin-bottom: 20px;">该订单中包含如下商品</p>
<div style="max-height:50vh; overflow-y: scroll;">
<el-card class="box-card" v-for="i in orderItem" :key="i.goodId"
style="--el-card-padding: 10px; margin-bottom: 8px;">
<div style="display: grid; grid-template-columns: 50px 1fr 60px; gap: 15px;">
<img :src="i.good.picUrl" style="width: 60px; height: 60px;" />
<div style="place-self: center left;">
<p>{{ i.good.goodsName }}</p>
<p style="color: grey; font-size: 12px;">商品ID: {{ i.goodId }}</p>
</div>
<div style="place-self: center; font-size: 16px;">{{ i.goodCount }} {{ i.good.unit }}</div>
</div>
</el-card>
</div>
</el-col>
</el-row>
<!-- 订单状态PENDING("Pending", "等待确认"), -->
<!-- 订单状态PROCESSING("Processing", "已支付,等待发货中"), -->
<!-- 订单状态SHIPPED("Shipped", "已发货,等待确认收货"), -->
<!-- 订单状态DELIVERED("Delivered", "已送达"), -->
<!-- 订单状态CANCELLED("Cancelled", "已取消"); -->
<!-- 该订单已被取消 -->
<template #footer>
<span class="dialog-footer">
<el-button v-if="orderDetail.orderStatusCode == 'Processing'" type="danger"
@click="withdrawOrder">取消发货并退款</el-button>
<el-button
v-if="orderDetail.orderStatusCode == 'Processing' || orderDetail.orderStatusCode == 'Shipped'"
type="primary" @click="saveEdit">保存发货信息</el-button>
<el-button @click="visible = false"> </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import manageList from '../components/manage-list.vue';
import * as shopOrderApi from '../api/shop-order';
import { ref, reactive, onMounted, computed } from 'vue';
import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus, Filter, Download } from '@element-plus/icons-vue';
const visible: any = ref(false);
const orderDetail = ref({} as any);
const orderItem = ref([] as any);
const shippingInfo = ref({} as any); // 发货信息
let completeCallback: Function = () => { };
const editHandle = async function (tabIndex: number, row: any, refreshFunc: Function) {
console.log("tabIndex", tabIndex)
console.log("orderDetail", row)
orderDetail.value = row // 订单详情
shippingInfo.value.expressId = row.expressId
shippingInfo.value.comment = row.comment
completeCallback = refreshFunc
visible.value = true
shopOrderApi.getOrderDetail({
orderId: row.id
}).then(function (data) {
let orderGoods = {}
data.goods.forEach((good: any) => {
orderGoods[good.id] = good
});
orderItem.value = data.orderItem.map((item: any) => {
item.good = orderGoods[item.goodId]
return item
})
console.log("orderItem", orderItem.value)
})
}
const saveEdit = function () {
// 保存发货信息
ElMessageBox.confirm('确定要进行发货操作吗?发货后订单将不可撤销。(用户点击收货前仍可以修改发货信息)', '提示', { type: 'warning' })
.then(async () => {
shopOrderApi.deliverOrder({
orderId: orderDetail.value.id,
...shippingInfo.value
}).then(function (data) {
if (data) { // 如果出错则已经出提示了
ElMessage.success({ message: data })
visible.value = false
completeCallback()
}
})
})
.catch(() => { });
}
const withdrawOrder = function () {
// 取消订单
ElMessageBox.confirm('确定要取消此订单吗?该操作不可撤销。', '提示', { type: 'warning' })
.then(async () => {
shopOrderApi.withdrawOrder({
orderId: orderDetail.value.id,
...shippingInfo.value
}).then(function (data) {
if (data) { // 如果出错则已经出提示了
ElMessage.success({ message: data })
visible.value = false
completeCallback()
}
})
})
.catch(() => { });
}
</script>
<style>
.line-height {
line-height: 2.7em;
}
.row-index {
width: 110px;
display: inline-block;
}
</style>

View File

@@ -1,67 +1,63 @@
<template>
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-card shadow="hover">
<template #header>
<div class="clearfix">
<span>基础信息</span>
</div>
</template>
<div class="info">
<div class="info-image" @click="showDialog">
<el-avatar :size="100" :src="avatarImg" />
<span class="info-edit">
<i class="el-icon-lx-camerafill"></i>
</span>
</div>
<div class="info-name">{{ name }}</div>
<!-- <div class="info-desc">不可能我的代码怎么可能会有bug</div> -->
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover">
<template #header>
<div class="clearfix">
<span>账户编辑</span>
</div>
</template>
<el-form label-width="90px">
<el-form-item label="用户名"> {{ name }} </el-form-item>
<el-form-item label="旧密码:">
<el-input type="password" v-model="form.old"></el-input>
</el-form-item>
<el-form-item label="新密码:">
<el-input type="password" v-model="form.new"></el-input>
</el-form-item>
<el-form-item label="确认密码:">
<el-input type="password" v-model="form.new1"></el-input>
</el-form-item>
<!-- <el-form-item label="个人简介:">
<el-input v-model="form.desc"></el-input>
</el-form-item> -->
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
</el-form>
</el-card>
</el-col>
</el-row>
<el-dialog title="裁剪图片" v-model="dialogVisible" width="600px">
<vue-cropper ref="cropper" :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage"
style="width: 100%; height: 400px"></vue-cropper>
<div>
<el-row :gutter="20">
<el-col :span="12">
<el-card shadow="hover">
<template #header>
<div class="clearfix">
<span>基础信息</span>
</div>
</template>
<div class="info">
<div class="info-image" @click="showDialog">
<el-avatar :size="100" :src="avatarImg" />
<span class="info-edit">
<i class="el-icon-lx-camerafill"></i>
</span>
</div>
<div class="info-name">{{ name }}</div>
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover">
<template #header>
<div class="clearfix">
<span>账户编辑</span>
</div>
</template>
<el-form label-width="90px">
<el-form-item label="用户名:"> {{ name }} </el-form-item>
<el-form-item label="旧密码">
<el-input type="password" v-model="form.old"></el-input>
</el-form-item>
<el-form-item label="新密码:">
<el-input type="password" v-model="form.new"></el-input>
</el-form-item>
<el-form-item label="确认密码:">
<el-input type="password" v-model="form.new1"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
</el-form>
</el-card>
</el-col>
</el-row>
<el-dialog title="裁剪图片" v-model="dialogVisible" width="600px">
<vue-cropper ref="cropper" :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage"
style="width: 100%; height: 400px"></vue-cropper>
<template #footer>
<span class="dialog-footer">
<el-button class="crop-demo-btn" type="primary">选择图片
<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
</el-button>
<el-button type="primary" @click="saveAvatar">上传并保存</el-button>
</span>
</template>
</el-dialog>
</div>
<template #footer>
<span class="dialog-footer">
<el-button class="crop-demo-btn" type="primary">选择图片
<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
</el-button>
<el-button type="primary" @click="saveAvatar">上传并保存</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts" name="user">
@@ -70,65 +66,52 @@ import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import avatar from '../assets/img/img.jpg';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import send_request from '../utils/send_request';
import * as userApi from '../api/user';
const name = localStorage.getItem('ms_username');
const user_id = localStorage.getItem('ms_user_id');
const form = reactive({
user_id: user_id,
old: '',
new: '',
new1: '',
desc: ''
user_id: user_id,
old: '',
new: '',
new1: '',
desc: ''
});
const onSubmit = async () => {
if (form.old == '' || form.new == '' || form.new1 == '') {
// 弹窗
ElMessageBox.confirm('输入为空,请检查', '提示', {
type: 'warning'
})
return
} else if (form.new != form.new1) {
// 弹窗
ElMessageBox.confirm('新密码2次输入的不相同', '提示', {
type: 'warning'
})
return
} else if (form.new == form.old) {
// 弹窗
ElMessageBox.confirm('新、旧密码相同', '提示', {
type: 'warning'
})
return
}
if (form.old == '' || form.new == '' || form.new1 == '') {
// 弹窗
ElMessageBox.confirm('输入为空,请检查', '提示', {
type: 'warning'
})
return
} else if (form.new != form.new1) {
// 弹窗
ElMessageBox.confirm('新密码2次输入的不相同', '提示', {
type: 'warning'
})
return
} else if (form.new == form.old) {
// 弹窗
ElMessageBox.confirm('新、旧密码相同', '提示', {
type: 'warning'
})
return
}
ElMessageBox.confirm('确认要修改密码吗?', '提示', {
type: 'warning'
})
.then(async () => {
console.log("send_request v1/user/alterPSW")
const loading = ElLoading.service({
lock: true,
text: '请稍候',
background: 'rgba(0, 0, 0, 0.7)',
});
await send_request('v1/user/alterPSW', "POST", {
"userId": form.user_id,
"oldPSW": form.old,
"newPSW": form.new
}, (data: any) => {
console.log(data);
ElMessage.success('删除成功');
// tableData.value.splice(index, 1);
})
loading.close();
})
.catch(() => {
ElMessage.success('删除失败');
});
return;
ElMessageBox.confirm('确认要修改密码吗?', '提示', {
type: 'warning'
}).then(async () => {
userApi.updatePwd({
oldpwd: form.old,
newpwd: form.new,
}).then((data) => {
data && ElMessage.success(data);
})
}).catch((err) => {
ElMessage.success('删除失败');
console.log("err", err)
});
return;
};
@@ -139,92 +122,92 @@ const dialogVisible = ref(false);
const cropper: any = ref();
const showDialog = () => {
dialogVisible.value = true;
imgSrc.value = avatarImg.value;
dialogVisible.value = true;
imgSrc.value = avatarImg.value;
};
const setImage = (e: any) => {
const file = e.target.files[0];
if (!file.type.includes('image/')) {
return;
}
const reader = new FileReader();
reader.onload = (event: any) => {
dialogVisible.value = true;
imgSrc.value = event.target.result;
cropper.value && cropper.value.replace(event.target.result);
};
reader.readAsDataURL(file);
const file = e.target.files[0];
if (!file.type.includes('image/')) {
return;
}
const reader = new FileReader();
reader.onload = (event: any) => {
dialogVisible.value = true;
imgSrc.value = event.target.result;
cropper.value && cropper.value.replace(event.target.result);
};
reader.readAsDataURL(file);
};
const cropImage = () => {
cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
cropImg.value = cropper.value.getCroppedCanvas().toDataURL();
};
const saveAvatar = () => {
avatarImg.value = cropImg.value;
dialogVisible.value = false;
avatarImg.value = cropImg.value;
dialogVisible.value = false;
};
</script>
<style scoped>
.info {
text-align: center;
padding: 35px 0;
text-align: center;
padding: 35px 0;
}
.info-image {
position: relative;
margin: auto;
width: 100px;
height: 100px;
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 50px;
overflow: hidden;
position: relative;
margin: auto;
width: 100px;
height: 100px;
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 50px;
overflow: hidden;
}
.info-edit {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.info-edit i {
color: #eee;
font-size: 25px;
color: #eee;
font-size: 25px;
}
.info-image:hover .info-edit {
opacity: 1;
opacity: 1;
}
.info-name {
margin: 15px 0 10px;
font-size: 24px;
font-weight: 500;
color: #262626;
margin: 15px 0 10px;
font-size: 24px;
font-weight: 500;
color: #262626;
}
.crop-demo-btn {
position: relative;
position: relative;
}
.crop-input {
position: absolute;
width: 100px;
height: 40px;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
position: absolute;
width: 100px;
height: 40px;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
</style>