Skip to content

T
tokcos-socket-web-ts-user
提交 3ed4e7f7 作者: Hao
操作

聊天修改

父级 9ce4221f
正在显示 包含 256 行增加 和 151 行删除
.env.development
NODE_ENV=development NODE_ENV=development
VITE_USER_APP_API_URL=192.168.31.135 VITE_USER_APP_API_URL=192.168.31.112
\ No newline at end of file \ No newline at end of file
.env.production
NODE_ENV=production NODE_ENV=production
VITE_USER_APP_API_URL=192.168.31.101 VITE_USER_APP_API_URL=192.168.31.112
\ No newline at end of file \ No newline at end of file
index.html
...@@ -9,12 +9,32 @@ ...@@ -9,12 +9,32 @@
</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 = 1600;
// 2.拿到当前设备（浏览器）的宽度
// document.documentElement 获取html的宽度
let currentWidth =
document.documentElement.clientWidth || document.body.clientWidth;
console.log(currentWidth)
// 3.计算缩放比率(屏幕过宽，根据高度计算缩放比例)
let scaleRatio = currentWidth / targetWidth;
let fontSize = (currentWidth / targetWidth) * 100;
// 4.开始缩放网页
console.log(scaleRatio,fontSize, 'scaleRatio')
// 4.开始缩放网页
console.log(scaleRatio,'scaleRatio')
document.body.style = `zoom:${scaleRatio}`;
console.log(document.body, ' document.body')
}
</script>
</body> </body>
</html> </html>
\ No newline at end of file
src/assets/up.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1714962974283" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2311" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M270.387 27.273l484.233 485.222-485.222 484.233z" fill="#1C2021" p-id="2312"></path></svg>
\ No newline at end of file
src/components/AutomaticPrompt.vue
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
style="display: none;" style="display: none;"
accept="image/bmp,image/jpeg,image/jpg,image/png" accept="image/bmp,image/jpeg,image/jpg,image/png"
type="file" type="file"
@change="fileChange" @change="fileImgChange"
/> />
</div> </div>
</template> </template>
...@@ -80,12 +80,18 @@ const upfile = () => { ...@@ -80,12 +80,18 @@ 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) => { console.log(oFile.type)
const { success, result }: any = ress if (oFile.type == 'image/png') {
await setfileEvent(e.target)
} else {
upLoadFilesHander(oFile).then((ress) => {
const { success, result }: any = ress;
console.log(result,)
}) })
}
const loading: any = ElLoading?.service({ const loading: any = ElLoading?.service({
lock: true, lock: true,
text: '上传中...', text: '上传中...',
...@@ -93,10 +99,27 @@ const fileChange = () => { ...@@ -93,10 +99,27 @@ const fileChange = () => {
}) })
loading.close() loading.close()
} }
const setfileEvent = async (clipboardData: any) => {
const img = getPasteImageFile(clipboardData.files)
if (!img) {
return
}
const uploadRes = await fileToBase64(img)
if (!uploadRes) {
return
}
const oImage = await getImageObject(
uploadRes,
imgShowWidth.value,
imgShowHeight.value,
)
console.log(oImage, 'oImage')
elAutocomplete.value.innerHTML += oImage.outerHTML
inputVal.value = oImage.outerHTML
elAutocomplete.value.focus()
}
const handleSelect = (value: any) => { const handleSelect = (value: any) => {
inputVal.value = value.target.innerHTML inputVal.value = value.target.innerHTML
console.log(inputVal.value,'打印一下')
} }
const emit = defineEmits(['updateState']) const emit = defineEmits(['updateState'])
...@@ -149,6 +172,7 @@ const handlePasteImageFile = async (clipboardData: any) => { ...@@ -149,6 +172,7 @@ const handlePasteImageFile = async (clipboardData: any) => {
) )
cursorInsert(oImage) cursorInsert(oImage)
inputVal.value = elAutocomplete.value.innerHTML inputVal.value = elAutocomplete.value.innerHTML
// elAutocomplete.value.innerHTML = inputVal.value;
} }
// 获取一个 image object // 获取一个 image object
......
src/minxins/UploadMixin.ts
...@@ -99,7 +99,6 @@ export const upLoadHander = async (obj: any) => { ...@@ -99,7 +99,6 @@ export const upLoadHander = async (obj: any) => {
uploadMixin.uploadMixinType = result.uploadType; uploadMixin.uploadMixinType = result.uploadType;
staticDomain = result.staticDomain || "https://cdn.tikcos.cn"; staticDomain = result.staticDomain || "https://cdn.tikcos.cn";
if (uploadMixin.uploadMixinType === "txcos") { if (uploadMixin.uploadMixinType === "txcos") {
console.log(result.response, " result.response");
const ress = res.result.response; const ress = res.result.response;
const credentials = ress.credentials; const credentials = ress.credentials;
uploadMixin.uploadMixinCredentials = { uploadMixin.uploadMixinCredentials = {
...@@ -109,11 +108,6 @@ export const upLoadHander = async (obj: any) => { ...@@ -109,11 +108,6 @@ export const upLoadHander = async (obj: any) => {
StartTime: ress?.startTime, StartTime: ress?.startTime,
ExpiredTime: ress?.expiredTime, ExpiredTime: ress?.expiredTime,
}; };
console.log(result, "result");
console.log(
uploadMixin.uploadMixinCredentials,
" uploadMixin.uploadMixinCredentials"
);
} }
} else { } else {
resResult = false; resResult = false;
...@@ -123,10 +117,7 @@ export const upLoadHander = async (obj: any) => { ...@@ -123,10 +117,7 @@ export const upLoadHander = async (obj: any) => {
if (resResult) { if (resResult) {
const query = {}; const query = {};
// const res: any = await getUploadConfigInfo(query); // const res: any = await getUploadConfigInfo(query);
console.log(
uploadMixin.uploadMixinCredentials,
" console.log(uploadMixin.uploadMixinCredentials)"
);
const result: any = uploadMixin.upLoadMixinResult; const result: any = uploadMixin.upLoadMixinResult;
if (uploadMixin.uploadMixinType === "txcos") { if (uploadMixin.uploadMixinType === "txcos") {
//走对象存储 //走对象存储
...@@ -147,17 +138,10 @@ export const upLoadHander = async (obj: any) => { ...@@ -147,17 +138,10 @@ export const upLoadHander = async (obj: any) => {
Key: uploadMixin.uploadMixinPath + tempFolder + folder, Key: uploadMixin.uploadMixinPath + tempFolder + folder,
Body: fileInfo.file, Body: fileInfo.file,
onProgress: function (progressData) { onProgress: function (progressData) {
console.log(progressData, "ada");
obj.onProgress(progressData); obj.onProgress(progressData);
}, },
}, },
(err, data) => { (err, data) => {
console.log(err, data, "打印一下");
console.log({ success: true });
console.log(
`${staticDomain}/${uploadMixin.uploadMixinPath}${tempFolder}${folder}`,
"打印一下,数据"
);
if (!err && data.statusCode === 200) { if (!err && data.statusCode === 200) {
const imgurl = `${staticDomain}/${uploadMixin.uploadMixinPath}${tempFolder}${folder}`; const imgurl = `${staticDomain}/${uploadMixin.uploadMixinPath}${tempFolder}${folder}`;
...@@ -178,7 +162,8 @@ export const upLoadHander = async (obj: any) => { ...@@ -178,7 +162,8 @@ export const upLoadHander = async (obj: any) => {
let formData = new FormData(); let formData = new FormData();
formData.append("biz", fileInfo.biz); formData.append("biz", fileInfo.biz);
formData.append("file", newFile); formData.append("file", newFile);
const uploadRes = await axios.post(`http://${VUE_APP_API_URL}:8080/sys/common/upload`, const uploadRes = await axios.post(
`http://${VUE_APP_API_URL}:8080/sys/common/upload`,
formData, formData,
{ {
headers: { ...obj.headers }, headers: { ...obj.headers },
...@@ -193,6 +178,7 @@ export const upLoadHander = async (obj: any) => { ...@@ -193,6 +178,7 @@ export const upLoadHander = async (obj: any) => {
url = uploadRes.message.replaceAll("//", "/"); url = uploadRes.message.replaceAll("//", "/");
const pre = url.startsWith("/") ? "" : "/"; const pre = url.startsWith("/") ? "" : "/";
url = `http://${VUE_APP_API_URL}/sys/common/static` + pre + 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({
......
src/router/index.ts
...@@ -5,6 +5,12 @@ const routes: Array<RouteRecordRaw> = [ ...@@ -5,6 +5,12 @@ const routes: Array<RouteRecordRaw> = [
name: "home", name: "home",
component: () => import(/* @vite-ignore */ `@/views/HomeView.vue`), component: () => import(/* @vite-ignore */ `@/views/HomeView.vue`),
}, },
{
path: "/loging",
name: "loging",
component: () =>
import(/* webpackChunkName: "about" */ `@/views/logingView.vue`),
},
]; ];
const router = createRouter({ const router = createRouter({
......
src/views/HomeView.vue
...@@ -228,132 +228,139 @@ ...@@ -228,132 +228,139 @@
</el-footer> </el-footer>
</el-container> </el-container>
<el-aside <el-aside
v-if="pageType == 1"
width="292px" width="292px"
class="shirnk-aside"
v-shrink="{ isShrink, width: '0px' }"
:style="{ :style="{
height: 'calc(100vh - 60px)', height: 'calc(100vh - 60px)',
}" }"
> >
<div class="recentlyViewd">Browsing history</div> <div class="shrink-text" @click="changeiShrink">
<div class="Recommended">Recommended products</div> <el-icon size="30">
<div <DArrowLeft v-if="isShrink" />
v-for="(item, index) in productList" <DArrowRight v-if="!isShrink" />
:key="index" </el-icon>
class="browse-glance" </div>
> <div v-if="pageType == 1" style="width: 292px;">
<img :src="item.productImg" class="browse-img" /> <div class="recentlyViewd" v-if="pageType == 2">
<div class="browse-glowup"> Browsing history
<div class="title">{{ item.productName }}</div> </div>
<div class="units"> <div class="recentlyViewd" v-if="pageType == 1">
<div class="price">{{ item.price }}</div> Recommended products
<div class="send" @click="toSendLink(item)"> </div>
{{ item.link }} <div
v-for="(item, index) in productList"
:key="index"
class="browse-glance"
>
<img :src="item.productImg" class="browse-img" />
<div class="browse-glowup">
<div class="title">{{ item.productName }}</div>
<div class="units">
<div class="price">{{ item.price }}</div>
<div class="send" @click="toSendLink(item)">
{{ item.link }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</el-aside> <div v-else style="width: 292px;">
<el-aside <div class="recentlyViewd">Request for Quotations</div>
width="292px" <div class="recently-input-box">
v-if="pageType == 2" <el-form
:style="{ label-position="top"
height: 'calc(100vh - 60px)', style="max-width: 600px;"
}" label-width="auto"
> class="demo-dynamic"
<div class="recentlyViewd">Request for Quotations</div> ref="ruleFormRef"
<div class="recently-input-box"> :rules="rules"
<el-form :model="ruleForm"
label-position="top"
style="max-width: 600px;"
label-width="auto"
class="demo-dynamic"
ref="ruleFormRef"
:rules="rules"
:model="ruleForm"
>
<el-form-item prop="ProductName" label="Product Name">
<el-input
v-model="ruleForm.ProductName"
style="height: 36px;"
placeholder="Enter a specific product name"
prop="Email"
/>
</el-form-item>
<el-form-item prop="Email" label="Product Category">
<el-select
placeholder="Select"
prop="Email"
style="height: 36px;"
v-model="ruleForm.Email"
>
<el-option label="Restaurant" value="1" />
<el-option label="Order No." value="2" />
<el-option label="Tel" value="3" />
</el-select>
</el-form-item>
<el-form-item prop="purchaseQuantity" label="Purchase Quantity">
<el-input
style="max-width: 600px; height: 36px;"
placeholder="Please enter"
v-model="ruleForm.purchaseQuantity"
class="input-with-select"
prop="Email"
>
<template #append>
<el-select
placeholder="China"
style="width: 96px;"
prop="China"
v-model="ruleForm.China"
>
<el-option label="Restaurant" value="1" />
<el-option label="Order No." value="2" />
<el-option label="Tel" value="3" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item
label="Other requirements explanation"
prop="otherRequirements"
> >
<el-input <el-form-item prop="ProductName" label="Product Name">
v-model="ruleForm.otherRequirements" <el-input
:autosize="{ minRows: 3, maxRows: 10 }" v-model="ruleForm.ProductName"
type="textarea" style="height: 36px;"
placeholder="Please enter" placeholder="Enter a specific product name"
/> prop="Email"
</el-form-item> />
<el-form-item> </el-form-item>
<div class="requirements-box" v-if="!isUpload"> <el-form-item prop="Email" label="Product Category">
<el-button icon="UploadFilled" class="uploadInfo" /> <el-select
<div class="upload"> placeholder="Select"
<div class="upload-name">Click to upload</div> prop="Email"
<div>or drag and drap</div> style="height: 36px;"
v-model="ruleForm.Email"
>
<el-option label="Restaurant" value="1" />
<el-option label="Order No." value="2" />
<el-option label="Tel" value="3" />
</el-select>
</el-form-item>
<el-form-item prop="purchaseQuantity" label="Purchase Quantity">
<el-input
style="max-width: 600px; height: 36px;"
placeholder="Please enter"
v-model="ruleForm.purchaseQuantity"
class="input-with-select"
prop="Email"
>
<template #append>
<el-select
placeholder="China"
style="width: 96px;"
prop="China"
v-model="ruleForm.China"
>
<el-option label="Restaurant" value="1" />
<el-option label="Order No." value="2" />
<el-option label="Tel" value="3" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item
label="Other requirements explanation"
prop="otherRequirements"
>
<el-input
v-model="ruleForm.otherRequirements"
:autosize="{ minRows: 3, maxRows: 10 }"
type="textarea"
placeholder="Please enter"
/>
</el-form-item>
<el-form-item>
<div class="requirements-box" v-if="!isUpload">
<el-button icon="UploadFilled" class="uploadInfo" />
<div class="upload">
<div class="upload-name">Click to upload</div>
<div>or drag and drap</div>
</div>
</div> </div>
</div> <div class="requirements-box1" v-if="isUpload">
<div class="requirements-box1" v-if="isUpload"> <div class="box">
<div class="box"> <div class="upload-name">{{ ruleForm.flieName }}</div>
<div class="upload-name">{{ ruleForm.flieName }}</div> <div class="upload-info">
<div class="upload-info"> <el-icon color="green"><CircleCheck /></el-icon>
<el-icon color="green"><CircleCheck /></el-icon> <span>200KB</span>
<span>200KB</span> </div>
</div> </div>
<el-icon :size="20"><Delete /></el-icon>
</div> </div>
<el-icon :size="20"><Delete /></el-icon> </el-form-item>
<el-form-item prop="EmailAddress" label="Email Address">
<el-input
style="height: 36px;"
placeholder="Please enter"
v-model="ruleForm.EmailAddress"
/>
</el-form-item>
<div class="footerSubmit" @click="submitForm(ruleForm)">
Submit
</div> </div>
</el-form-item> </el-form>
<el-form-item prop="EmailAddress" label="Email Address"> </div>
<el-input
style="height: 36px;"
placeholder="Please enter"
v-model="ruleForm.EmailAddress"
/>
</el-form-item>
<div class="footerSubmit" @click="submitForm(ruleForm)">
Submit
</div>
</el-form>
</div> </div>
</el-aside> </el-aside>
</el-container> </el-container>
...@@ -390,6 +397,60 @@ const ruleForm = ref({ ...@@ -390,6 +397,60 @@ const ruleForm = ref({
EmailAddress: 'from china', EmailAddress: 'from china',
}) })
let isShrink = ref('')
const changeiShrink = () => {
console.log(isShrink.value, 'value')
isShrink.value = !isShrink.value
}
//收缩
const vShrink: Directive<HTMLElement, boolean | Props> = {
mounted(el, binding) {
console.log(el, binding, '打印')
let { option } = formatCOlorOption(binding.value)
option.isUpdate && renderStyle(el, option)
},
updated(el: HTMLElement, binding, vnode) {
//修改之后
let { option } = formatCOlorOption(binding.value)
if (option.isShrink) {
renderStyle(el, option)
//此时此刻还需要添加一个p对象
// renderAddNodes(el, option)
} else {
let obj = {
...option,
width: '292px',
}
// for (let key in option) obj[key] = ''
renderStyle(el, obj)
//此时此刻需要清空对象p
// renderAddNodes(el, option)
}
},
}
//设置style的属性值
function renderStyle(el, option) {
for (let key in option) el.style[key] = option[key]
}
//合并指令传递的数据和默认配置的数据
function formatCOlorOption(val: string | Props) {
const option =
typeof val !== 'string'
? Object.assign(defaultStyle, val)
: {
val,
...defaultStyle,
}
return {
option,
}
}
//登录
const defaultStyle: {
transition?: string
} = {
transition: 'all 0.6s linear',
}
const rules = reactive({ const rules = reactive({
ProductName: [ ProductName: [
{ {
...@@ -430,15 +491,7 @@ const rules = reactive({ ...@@ -430,15 +491,7 @@ const rules = reactive({
const ruleFormRef = ref<FormInstance>() const ruleFormRef = ref<FormInstance>()
const customerInfo = ref({}) const customerInfo = ref({})
const messages = ref([]) const messages = ref([])
const isUpload = true const isUpload = true
// const staticList = ref([
// 'Login account',
// 'Forgot password',
// 'Free entry',
// 'Add/manage products',
// 'improve',
// ])
const productInfo = ref({ const productInfo = ref({
productImg: require('../assets/shop.jpg'), productImg: require('../assets/shop.jpg'),
productName: 'The secret to looking glowup nowadays', productName: 'The secret to looking glowup nowadays',
...@@ -479,7 +532,6 @@ onMounted(async () => { ...@@ -479,7 +532,6 @@ onMounted(async () => {
}) })
const connectMsg = () => { const connectMsg = () => {
return new Promise((resolve: any, reject: any) => { return new Promise((resolve: any, reject: any) => {
// console.log(import)
const useUser = useUserStore() const useUser = useUserStore()
useUser.setUserInfo({ useUser.setUserInfo({
username: Date.now(), username: Date.now(),
...@@ -642,6 +694,20 @@ const toSendLink = (e: any) => { ...@@ -642,6 +694,20 @@ const toSendLink = (e: any) => {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.shirnk-aside {
position: relative;
overflow: hidden;
overflow: initial;
.shrink-text {
position: absolute;
top: 50%;
transform: translate(-50%);
width: 20px;
height: 20px;
left: -20px;
font-size: 10px;
}
}
.inquiry-list { .inquiry-list {
display: flex; display: flex;
width: 360px; width: 360px;
......
src/views/loginView.vue
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
if (!formEl) return if (!formEl) return
formEl.resetFields() formEl.resetFields()
} }
//登录
const submitForm = (formEl: FormInstance | undefined) => { const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return if (!formEl) return
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论