Skip to content

T
tokcos-socket-web-ts
提交 5d5d76fa 作者: Hao
操作

修改全球购下单

父级 f80d52cf
正在显示 包含 207 行增加 和 104 行删除
components.d.ts
...@@ -16,6 +16,7 @@ declare module 'vue' { ...@@ -16,6 +16,7 @@ declare module 'vue' {
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader'] ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage'] ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
...@@ -32,4 +33,7 @@ declare module 'vue' { ...@@ -32,4 +33,7 @@ declare module 'vue' {
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
ShopList: typeof import('./src/components/ShopList.vue')['default'] ShopList: typeof import('./src/components/ShopList.vue')['default']
} }
export interface ComponentCustomProperties {
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
}
} }
index.html
...@@ -9,12 +9,30 @@ ...@@ -9,12 +9,30 @@
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong> Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
<script>
window.onresize = () => {
let targetWidth = 1920;
// 2.拿到当前设备（浏览器）的宽度
// document.documentElement 获取html的宽度
let currentWidth =
document.documentElement.clientWidth || document.body.clientWidth;
console.log(currentWidth)
// 3.计算缩放比率(屏幕过宽，根据高度计算缩放比例)
let scaleRatio = currentWidth / targetWidth;
let fontSize = Math.floor((currentWidth / targetWidth) * 16);
// 4.开始缩放网页
console.log(scaleRatio, fontSize, 'scaleRatio')
document.body.style = `font-size:${fontSize}px`;
console.log(document.body, ' document.body')
}
</script>
</body> </body>
</html> </html>
\ No newline at end of file
src/components/AutomaticPrompt.vue
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
ref="elAutocomplete" ref="elAutocomplete"
placeholder="输入信息" placeholder="输入信息"
contenteditable="true" contenteditable="true"
style="outline: none; " style="outline: none;"
@paste.prevent="handlePaste" @paste.prevent="handlePaste"
@focus="removeDefaultContent" @focus="removeDefaultContent"
@input="handleSelect" @input="handleSelect"
...@@ -53,10 +53,17 @@ ...@@ -53,10 +53,17 @@
<input <input
ref="file" ref="file"
style="display: none;" style="display: none;"
accept="image/bmp,image/jpeg,image/jpg,image/png"
type="file" type="file"
@change="fileChange" @change="fileImgChange"
/> />
<!-- accept="image/*" -->
<!-- <input
ref="file"
style="display: none;"
type="file"
accept="image/*"
@change="fileImgChange"
/> -->
</div> </div>
</template> </template>
...@@ -81,20 +88,37 @@ const upfile = () => { ...@@ -81,20 +88,37 @@ const upfile = () => {
file.value.click() file.value.click()
} }
//上传的数据 //上传的数据
const fileChange = () => { const fileImgChange = async () => {
var e: any = window.event || event var e: any = window.event || event
var oFile = e.target.files[0] var oFile = e.target.files[0]
upLoadFilesHander(oFile).then((ress) => { await setfileEvent(oFile)
const { success, result }: any = ress const loading: any = ElLoading?.service({
})
const loading:any = ElLoading?.service({
lock: true, lock: true,
text: '上传中...', text: '上传中...',
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
}) })
loading.close() loading.close()
} }
const setfileEvent = async (file: any) => {
var html = ''
const { success, result }: any = await upLoadFilesHander(file)
const uploadRes = result
if (!uploadRes) return
console.log(file.type)
if (file.type.includes('image')) {
html = await getImageObject(
uploadRes,
imgShowWidth.value,
imgShowHeight.value,
)
} else {
html = await getFileObject(uploadRes, file)
}
elAutocomplete.value.innerHTML += html.outerHTML
inputVal.value += html.outerHTML
elAutocomplete.value.focus()
}
const handleSelect = (value: any) => { const handleSelect = (value: any) => {
inputVal.value = value.target.innerHTML inputVal.value = value.target.innerHTML
} }
...@@ -135,13 +159,9 @@ const cursorInsert = (node: any) => { ...@@ -135,13 +159,9 @@ const cursorInsert = (node: any) => {
//粘贴图片 //粘贴图片
const handlePasteImageFile = async (clipboardData: any) => { const handlePasteImageFile = async (clipboardData: any) => {
const img = getPasteImageFile(clipboardData.files) const img = getPasteImageFile(clipboardData.files)
if (!img) { if (!img) return
return
}
const uploadRes = await fileToBase64(img) const uploadRes = await fileToBase64(img)
if (!uploadRes) { if (!uploadRes) return
return
}
const oImage = await getImageObject( const oImage = await getImageObject(
uploadRes, uploadRes,
imgShowWidth.value, imgShowWidth.value,
...@@ -154,7 +174,6 @@ const handlePasteImageFile = async (clipboardData: any) => { ...@@ -154,7 +174,6 @@ const handlePasteImageFile = async (clipboardData: any) => {
// 获取一个 image object // 获取一个 image object
const getImageObject = (uploadRes: any, showWidth: any, showHeight: any) => { const getImageObject = (uploadRes: any, showWidth: any, showHeight: any) => {
const oImage = new Image(showWidth, showHeight) const oImage = new Image(showWidth, showHeight)
const datasetFields = ['width', 'height'] const datasetFields = ['width', 'height']
const datasetSizes: any = { const datasetSizes: any = {
width: '200', width: '200',
...@@ -166,10 +185,19 @@ const getImageObject = (uploadRes: any, showWidth: any, showHeight: any) => { ...@@ -166,10 +185,19 @@ const getImageObject = (uploadRes: any, showWidth: any, showHeight: any) => {
oImage.src = uploadRes oImage.src = uploadRes
return oImage return oImage
} }
const getFileObject = (url: any, oFile: any) => {
var aTag = document.createElement('a')
aTag.href = url
aTag.download = oFile.name
// aTag.setAttribute('href', url)
aTag.textContent = oFile.name
// aTag.setAttribute('download', oFile.name)
console.log(aTag, 'aTag')
return aTag
}
const getPasteImageFile = (clipboardDataFiles: any) => { const getPasteImageFile = (clipboardDataFiles: any) => {
if (!clipboardDataFiles.length) { if (!clipboardDataFiles.length) return null
return null
}
// 剪切版中选择的(用户第一个点的在尾)第一张图片 // 剪切版中选择的(用户第一个点的在尾)第一张图片
const clipboardDataFileList = Array.from(clipboardDataFiles || []) const clipboardDataFileList = Array.from(clipboardDataFiles || [])
let firstSelectedImage = null let firstSelectedImage = null
...@@ -246,7 +274,7 @@ defineExpose({ ...@@ -246,7 +274,7 @@ defineExpose({
} }
.el-autocomplete { .el-autocomplete {
width: 100%; width: 100%;
height: calc(100vh - 732px); height: calc(100vh - 732px);
max-width: 100%; max-width: 100%;
overflow: auto; overflow: auto;
} }
......
src/minxins/UploadMixin.ts
...@@ -172,18 +172,21 @@ export const upLoadHander = async (obj: any) => { ...@@ -172,18 +172,21 @@ export const upLoadHander = async (obj: any) => {
async: false, async: false,
} }
); );
if (uploadRes.success && uploadRes.message) { let data = uploadRes.data;
console.log(data,'uploadRes')
if (data.success && data.message) {
//保存绝对路径，不然小程序会有问题 //保存绝对路径，不然小程序会有问题
let url = uploadRes.message; let url = data.message;
url = uploadRes.message.replaceAll("//", "/"); // console.log(url,'url')
const pre = url.startsWith("/") ? "" : "/"; // url = data.message.replaceAll("//", "/");
url = `http://${VUE_APP_API_URL}/sys/common/static` + pre + url; // const pre = url.startsWith("/") ? "" : "/";
console.log(url, "图片上传失败"); // url = `http://${VUE_APP_API_URL}/sys/common/static` + pre + url;
// console.log(url, "图片上传成功");
obj.onSuccess({ success: true, message: url }); obj.onSuccess({ success: true, message: url });
} else { } else {
obj.onError({ obj.onError({
success: false, success: false,
message: uploadRes.message || "图片上传失败", message: data.message || "图片上传失败",
}); });
} }
} }
......
src/permission.ts
...@@ -3,7 +3,7 @@ import router from "../src/router"; ...@@ -3,7 +3,7 @@ import router from "../src/router";
import { useUserStore } from "./store/modules/user"; import { useUserStore } from "./store/modules/user";
router.beforeEach((to: any, from: any, next: any) => { router.beforeEach((to: any, from: any, next: any) => {
const store = useUserStore(); const store = useUserStore();
const whiteList = ["/login", "/register"]; const whiteList = ["/login", "/register","/loging",'/home'];
if (store.userInfo.token) { if (store.userInfo.token) {
next(); next();
} else { } else {
......
src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import HomeView from "../views/HomeView.vue";
const routes: Array<RouteRecordRaw> = [ const routes: Array<RouteRecordRaw> = [
{ {
path: "/", path: "/",
name: "home", name: "home",
component: HomeView, component: () =>
import(/* webpackChunkName: "about" */ "../views/HomeView.vue"),
}, },
{ {
path: "/login", path: "/login",
......
src/store/modules/index.ts
export type appType = { export type appType = {
sidebar:{ sidebar: {
opened:boolean; opened: boolean;
withoutAnimation: boolean; withoutAnimation: boolean;
isClickCollapse: boolean; isClickCollapse: boolean;
} };
} };
export type setType ={ export type setType = {
path:string, fontSzie: string;
name:string, width: string | number;
query?:object height?: string | number;
} };
\ No newline at end of file
export type multiType = {
path: string;
name: string;
meta: any;
query?: object;
params?: object;
};
export type userType = {
username?: string;
roles?: Array<string>;
verifyCode?: string;
currentPage?: number;
isRemmembered?: boolean;
loginDay?: number;
};
export type oderType = {
object?: string;
};
src/store/modules/user.ts
...@@ -32,7 +32,7 @@ export const useUserStore = defineStore("user", { ...@@ -32,7 +32,7 @@ export const useUserStore = defineStore("user", {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const query = { const query = {
code: this.userInfo.username, code: this.userInfo.username,
name:res.nickame name:res?.nickame
}; };
console.log(query) console.log(query)
getUserList(query).then(({ success, result, message }: any) => { getUserList(query).then(({ success, result, message }: any) => {
......
src/views/loginView.vue
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
placeholder="请输入密码" placeholder="请输入密码"
/> />
</el-form-item> </el-form-item>
<el-form-item style="margin: 0px;"> <el-form-item style="margin: 0px;justify-content: space-between;">
<el-button <el-button
class="login-submit" class="login-submit"
type="primary" type="primary"
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
> >
登录 登录
</el-button> </el-button>
<el-button class="login-reset" @click="resetForm(ruleFormRef)"> <el-button class="login-reset" type="primary" @click="resetForm(ruleFormRef)">
重置 重置
</el-button> </el-button>
</el-form-item> </el-form-item>
...@@ -140,22 +140,39 @@ export default { ...@@ -140,22 +140,39 @@ export default {
background: url('../assets/login.jpg') no-repeat; background: url('../assets/login.jpg') no-repeat;
background-size: 100%; background-size: 100%;
.form-box { .form-box {
background: #fff; color: #fff;
.el-input__inner { background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(16px);
.el-form-item{
display: flex;
align-items: center;
margin-bottom: 24px;
}
:deep(.el-form-item__label){
color: #fff;
}
:deep(.el-input__wrapper) {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
:deep(.el-input__inner) {
height: 40px; height: 40px;
color: #fff;
border-bottom: 2px solid #fff;
} }
h2 { h2 {
text-align: center; text-align: center;
margin-bottom: 40px; margin-bottom: 20px;
font-weight: bolder; font-weight: bolder;
font-size: 20px; font-size: 20px;
} }
margin: 0px auto; margin: 0px auto;
margin-top: 250px; margin-top: 250px;
width: 500px; width: 800px;
text-align: center; text-align: center;
border-radius: 20px; border-radius: 20px;
padding: 40px; padding:30px 40px 30px 40px;
box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 5px 0 rgba(0, 0, 0, 0.3);
.login-submit, .login-submit,
.login-reset { .login-reset {
......
src/views/logingView.vue
<script setup lang="ts"> <script setup lang="ts">
import { Directive, VNode, h, ref, render } from 'vue'; import { Directive, VNode, h, ref, render, functions } from 'vue'
import Loading from '@/components/loging/logingComponent.vue'; import { appType, setType, multiType, userType, oderType } from '@/store/index'
const defaultStyle: {
const defaultOption: {msg?: string | false} = { fontSzie?: string
msg: '努力加载中' width?: string | number
} height?: string | number
} = {
interface Props {loading: boolean, msg?: string | false} fontSzie: '24px',
width: '100px',
function formatOption (value: boolean | Props) { height: '100px',
const loading = typeof value === 'boolean'
? value
: value.loading
const option = typeof value !== 'boolean'
? Object.assign(defaultOption, value)
: {
loading,
...defaultOption
}
return { loading, option }
} }
interface Props {
function renderLoading (el: HTMLElement, option: Props) { loading: boolean
const vnode = h( msg?: string | false
Loading,
{ id: 'loading', ...option}
)
el.removeChild(el.children[0])
render(vnode, el)
}
function renderVNode (el: HTMLElement, vnode: VNode) {
el.querySelector('#loading')?.remove()
render(vnode, el)
} }
const vLoading: Directive<HTMLElement, boolean | Props> = { const isUpdate = ref(false)
console.log(isUpdate, '打印')
const vColor: Directive<HTMLElement, boolean | Props> = {
mounted(el, binding) { mounted(el, binding) {
let { option } = formatCOlorOption(binding.value)
const { loading, option } = formatOption(binding.value) option.isUpdate && renderStyle(el, option)
loading && renderLoading(el, option)
}, },
updated(el: HTMLElement, binding, vnode) { updated(el: HTMLElement, binding, vnode) {
//修改之后
const { loading, option } = formatOption(binding.value) let { option } = formatCOlorOption(binding.value)
if (option.isUpdate) {
if (loading) { renderStyle(el, option)
renderLoading(el, option) //此时此刻还需要添加一个p对象
renderAddNodes(el, option)
} else { } else {
renderVNode(el, vnode) let obj = {}
for (let key in option) obj[key] = ''
renderStyle(el, obj)
//此时此刻需要清空对象p
renderAddNodes(el, option)
} }
}, },
} }
const loading = ref(true) function renderStyle(el, option) {
for (let key in option) el.style[key] = option[key]
setTimeout(() => loading.value = false, 2000) }
function renderAddNodes(el, option) {
if (option.isUpdate) {
var node = h(
'p',
{ id: 'p1', style: option, class: 'my-p' },
'我是添加进来的p',
)
render(node, el)
} else {
el.removeChild(el.children[1])
}
}
function formatCOlorOption(val: string | Props) {
const option =
typeof val !== 'string'
? Object.assign(defaultStyle, val)
: {
val,
...defaultStyle,
}
return {
option,
}
}
function changeColor() {
isUpdate.value = isUpdate.value ? false : true
}
</script> </script>
<template> <template>
<div style="width: 300px" v-loading="{ loading, msg: '一大波僵尸来袭' }"> <div>
<h1>加载成功</h1> <div
style="width: 300px;"
v-color="{ isUpdate, color: 'blue', background: 'red' }"
>
<h1>这是一段考验direactive的描述</h1>
</div>
<el-button @click="changeColor">点击修改颜色</el-button>
</div> </div>
</template> </template>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论