XinLingKeJi/jdt-user
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i

Browse Source
This commit is contained in:
YuanHuakk
2023-10-08 22:53:08 +08:00
parent b6ca53f70e
commit b883b02fb9
13 changed files with 475 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/api/product.ts Normal file
View File

381
src/components/RichEditor.vue Normal file
View File

@@ -0,0 +1,381 @@
<template>
<view class="container">
<view class="page-body">
<view class="wrapper">
<view
class="toolbar"
@tap="format"
style="max-height: 240px; overflow-y: auto"
>
<!-- 字体 -->
<!-- <view
:class="data.formats.fontFamily ? 'ql-active' : ''"
class="iconfont icon-font"
data-name="fontFamily"
data-value="Pacifico"
></view> -->
<!-- 加粗 -->
<view
:class="data.formats.bold ? 'ql-active' : ''"
class="iconfont icon-zitijiacu"
data-name="bold"
></view>
<!-- 斜体 -->
<view
:class="data.formats.italic ? 'ql-active' : ''"
class="iconfont icon-zitixieti"
data-name="italic"
></view>
<!-- 下划线 -->
<view
:class="data.formats.underline ? 'ql-active' : ''"
class="iconfont icon-zitixiahuaxian"
data-name="underline"
></view>
<!-- 删除中划线 -->
<!-- <view
:class="data.formats.strike ? 'ql-active' : ''"
class="iconfont icon-zitishanchuxian"
data-name="strike"
></view> -->
<!-- 字号 -->
<!-- <view
:class="data.formats.fontSize === '24px' ? 'ql-active' : ''"
class="iconfont icon-font-size"
data-name="fontSize"
data-value="48px"
></view>-->
<!-- 字体颜色 -->
<!-- <view
:class="data.formats.color === '#0000ff' ? 'ql-active' : ''"
class="iconfont icon-font-colors"
data-name="color"
data-value="#0000ff"
></view> -->
<!-- 清除样式 -->
<!-- <view class="iconfont icon-clearformat" @tap="removeFormat"></view> -->
<!-- 对齐方式：左 -->
<view
:class="data.formats.align === 'left' ? 'ql-active' : ''"
class="iconfont icon-zuoduiqi"
data-name="align"
data-value="left"
></view>
<!-- 对齐方式：居中 -->
<view
:class="data.formats.align === 'center' ? 'ql-active' : ''"
class="iconfont icon-juzhongduiqi"
data-name="align"
data-value="center"
></view>
<!-- 对齐方式：右 -->
<view
:class="data.formats.align === 'right' ? 'ql-active' : ''"
class="iconfont icon-youduiqi"
data-name="align"
data-value="right"
></view>
<!-- 对齐方式：两侧 -->
<view
:class="data.formats.align === 'justify' ? 'ql-active' : ''"
class="iconfont icon-zuoyouduiqi"
data-name="align"
data-value="justify"
></view>
<!-- 行高 -->
<!-- <view
:class="data.formats.lineHeight ? 'ql-active' : ''"
class="iconfont icon-line-height"
data-name="lineHeight"
data-value="2"
></view>-->
<!-- 字间距 -->
<!-- <view
:class="data.formats.letterSpacing ? 'ql-active' : ''"
class="iconfont icon-Character-Spacing"
data-name="letterSpacing"
data-value="2em"
></view> -->
<!-- 上边距 -->
<!-- <view
:class="data.formats.marginTop ? 'ql-active' : ''"
class="iconfont icon-duanqianju"
data-name="marginTop"
data-value="40px"
></view> -->
<!-- 下边距 -->
<!-- <view
:class="data.formats.marginBottom ? 'ql-active' : ''"
class="iconfont icon-duanhouju"
data-name="marginBottom"
data-value="40px"
></view> -->
<!-- 日期 -->
<!-- <view class="iconfont icon-date" @tap="insertDate"></view> -->
<!-- 勾选 -->
<!-- <view
class="iconfont icon--checklist"
data-name="list"
data-value="check"
></view> -->
<!-- 有序排列 -->
<view
:class="data.formats.list === 'ordered' ? 'ql-active' : ''"
class="iconfont icon-youxupailie"
data-name="list"
data-value="ordered"
></view>
<!-- 无序排列 -->
<view
:class="data.formats.list === 'bullet' ? 'ql-active' : ''"
class="iconfont icon-wuxupailie"
data-name="list"
data-value="bullet"
></view>
<!-- 取消缩进 -->
<view
class="iconfont icon-outdent"
data-name="indent"
data-value="-1"
></view>
<!-- 缩进 -->
<view
class="iconfont icon-indent"
data-name="indent"
data-value="+1"
></view>
<!-- 添加分割线 -->
<view class="iconfont icon-fengexian" @click="insertDivider"></view>
<!-- 插入图片 -->
<view class="iconfont icon-image" @click="insertImage"></view>
<!-- 设置标题 -->
<view
:class="data.formats.header === 3 ? 'ql-active' : ''"
class="iconfont icon-H"
data-name="header"
:data-value="3"
></view>
<!-- 下标 -->
<view
:class="data.formats.script === 'sub' ? 'ql-active' : ''"
class="iconfont icon-zitixiabiao"
data-name="script"
data-value="sub"
></view>
<!-- 上标 -->
<view
:class="data.formats.script === 'super' ? 'ql-active' : ''"
class="iconfont icon-zitishangbiao"
data-name="script"
data-value="super"
></view>
<!-- 清空 -->
<!-- <view class="iconfont icon-shanchu" @tap="clear"></view> -->
<!-- <view
:class="data.formats.direction === 'rtl' ? 'ql-active' : ''"
class="iconfont icon-direction-rtl"
data-name="direction"
data-value="rtl"
></view> -->
<view class="iconfont icon-undo" @click="undo"></view>
<view class="iconfont icon-redo" @click="redo"></view>
</view>
<view class="editor-wrapper">
<editor
id="editor"
class="ql-container"
:placeholder="data.placeholder"
@statuschange="onStatusChange"
:show-img-resize="true"
@ready="onEditorReady"
@input="getCtx"
:content="content"/>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import {reactive} from 'vue'
import Taro from '@tarojs/taro'
const {content} = defineProps<{
content: string;
}>()
let emits = defineEmits(['input'])
const data = reactive<any>({
editorCtx: '',
readOnly: false,
placeholder: '开始输入...',
richText: '',
formats: {}
})
function onEditorReady() {
// 富文本节点渲染完成
Taro
.createSelectorQuery()
.select('#editor')
.context((res) => {
data.editorCtx = res.context
// 初始化数据
if (content) {
data.editorCtx.setContents({
html: content
})
}
})
.exec()
}
// 失去焦点时，获取富文本的内容
function getCtx(e: any) {
data.richText = e.detail.html
emits('input', e.detail.html)
}
// 撤销操作
function undo() {
data.editorCtx.undo()
}
// 复原操作
function redo() {
data.editorCtx.redo()
}
//修改样式
function format(e) {
// console.log("format", e.target.dataset);
let {name, value} = e.target.dataset
if (!name) return
data.editorCtx.format(name, value)
}
//通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
function onStatusChange(e) {
data.formats = e.detail
}
// 插入分割线
function insertDivider() {
data.editorCtx.insertDivider()
}
// 插入图片
function insertImage() {
Taro.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
// 上传图片的逻辑各有不同，自行调整即可
Taro.uploadFile({
url: `/system/v1/upload`,
name: 'file',
header: {Authorization: 'token'},
filePath: res.tempFilePaths[0],
success: (res) => {
const imgData = JSON.parse(res.data) as {
code: number;
msg: string;
success: boolean;
}
if (imgData.code === 200) {
// 将图片展示在编辑器中
data.editorCtx.insertImage({
width: '20%', //设置宽度为100%防止宽度溢出手机屏幕
height: 'auto',
src: imgData.msg,
alt: '图像',
success: function () {
console.log('insert image success')
}
})
} else {
console.log('上传失败')
}
},
fail: (err) => {
console.log(err)
}
})
}
})
}
// 清空编辑器内容
// function clear() {
// data.editorCtx.clear({
// success: function (res) {
// console.log("clear success");
// },
// });
// }
// 清除当前选区的样式
// function removeFormat() {
// data.editorCtx.removeFormat();
// }
// 选择日期
// function insertDate() {
// const date = new Date();
// const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
// data.editorCtx.insertText({
// text: formatDate
// });
// }
</script>
<style lang="scss" scoped>
@import "//at.alicdn.com/t/c/font_4211210_2x20brbrv94.css";
.page-body {
// height: calc(100vh - var(--window-top) - var(--status-bar-height));
}
.wrapper {
height: 100%;
}
.editor-wrapper {
height: calc(
100vh - var(--window-top) - var(--status-bar-height) - 280px - 650px
);
overflow: scroll;
background: rgba(153, 153, 153, 0.05);
border-radius: 20px;
margin: 20px 0;
}
.iconfont {
display: inline-block;
margin: 20px 20px;
width: 32px;
height: 32px;
cursor: pointer;
font-size: 32px;
}
.toolbar {
box-sizing: border-box;
border-bottom: 0;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.ql-container {
box-sizing: border-box;
padding: 24px 30px;
width: 100%;
min-height: 30vh;
height: 100%;
font-size: 28px;
line-height: 1.5;
}
.ql-active {
color: #f38e48;
}
</style>

15
src/components/UserModal.vue Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: "UserModal"
})
</script>
<template>
$END$
</template>
<style scoped lang="scss">
</style>

0
src/pages/admin/withdrawal/index.config.ts Normal file
View File

15
src/pages/admin/withdrawal/index.vue Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: "index"
})
</script>
<template>
$END$
</template>
<style scoped lang="scss">
</style>

0
src/pages/product/addGoods/index.config.ts Normal file
View File

15
src/pages/product/addGoods/index.vue Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: "index"
})
</script>
<template>
$END$
</template>
<style scoped lang="scss">
</style>

4
src/pages/product/list/index.config.ts Normal file
View File

@@ -0,0 +1,4 @@
export default definePageConfig({
navigationBarTitleText: '商品管理'
})

15
src/pages/product/list/index.vue Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: 'index'
})
</script>
<template>
</template>
<style lang="scss">
</style>

0
src/pages/users/bindPhone/index.config.ts Normal file
View File

15
src/pages/users/bindPhone/index.vue Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: "index"
})
</script>
<template>
$END$
</template>
<style scoped lang="scss">
</style>

0
src/pages/users/login/index.config.ts Normal file
View File

15
src/pages/users/login/index.vue Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: "index"
})
</script>
<template>
$END$
</template>
<style scoped lang="scss">
</style>