From b883b02fb9743c0b447bef3a363b513c11359a05 Mon Sep 17 00:00:00 2001
From: YuanHuakk <1751826683@qq.com>
Date: Sun, 8 Oct 2023 22:53:08 +0800
Subject: [PATCH] i

---
 src/api/product.ts                         |   0
 src/components/RichEditor.vue              | 381 +++++++++++++++++++++
 src/components/UserModal.vue               |  15 +
 src/pages/admin/withdrawal/index.config.ts |   0
 src/pages/admin/withdrawal/index.vue       |  15 +
 src/pages/product/addGoods/index.config.ts |   0
 src/pages/product/addGoods/index.vue       |  15 +
 src/pages/product/list/index.config.ts     |   4 +
 src/pages/product/list/index.vue           |  15 +
 src/pages/users/bindPhone/index.config.ts  |   0
 src/pages/users/bindPhone/index.vue        |  15 +
 src/pages/users/login/index.config.ts      |   0
 src/pages/users/login/index.vue            |  15 +
 13 files changed, 475 insertions(+)
 create mode 100644 src/api/product.ts
 create mode 100644 src/components/RichEditor.vue
 create mode 100644 src/components/UserModal.vue
 create mode 100644 src/pages/admin/withdrawal/index.config.ts
 create mode 100644 src/pages/admin/withdrawal/index.vue
 create mode 100644 src/pages/product/addGoods/index.config.ts
 create mode 100644 src/pages/product/addGoods/index.vue
 create mode 100644 src/pages/product/list/index.config.ts
 create mode 100644 src/pages/product/list/index.vue
 create mode 100644 src/pages/users/bindPhone/index.config.ts
 create mode 100644 src/pages/users/bindPhone/index.vue
 create mode 100644 src/pages/users/login/index.config.ts
 create mode 100644 src/pages/users/login/index.vue

diff --git a/src/api/product.ts b/src/api/product.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/RichEditor.vue b/src/components/RichEditor.vue
new file mode 100644
index 0000000..c624a7e
--- /dev/null
+++ b/src/components/RichEditor.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/UserModal.vue b/src/components/UserModal.vue
new file mode 100644
index 0000000..80105b5
--- /dev/null
+++ b/src/components/UserModal.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/admin/withdrawal/index.config.ts b/src/pages/admin/withdrawal/index.config.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/admin/withdrawal/index.vue b/src/pages/admin/withdrawal/index.vue
new file mode 100644
index 0000000..60e543d
--- /dev/null
+++ b/src/pages/admin/withdrawal/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/product/addGoods/index.config.ts b/src/pages/product/addGoods/index.config.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/product/addGoods/index.vue b/src/pages/product/addGoods/index.vue
new file mode 100644
index 0000000..60e543d
--- /dev/null
+++ b/src/pages/product/addGoods/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/product/list/index.config.ts b/src/pages/product/list/index.config.ts
new file mode 100644
index 0000000..d9b95e3
--- /dev/null
+++ b/src/pages/product/list/index.config.ts
@@ -0,0 +1,4 @@
+export default definePageConfig({
+    navigationBarTitleText: '商品管理'
+})
+  
\ No newline at end of file
diff --git a/src/pages/product/list/index.vue b/src/pages/product/list/index.vue
new file mode 100644
index 0000000..3b6abe2
--- /dev/null
+++ b/src/pages/product/list/index.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+    name: 'index'
+})
+</script>
+
+<template>
+
+</template>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/pages/users/bindPhone/index.config.ts b/src/pages/users/bindPhone/index.config.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/users/bindPhone/index.vue b/src/pages/users/bindPhone/index.vue
new file mode 100644
index 0000000..60e543d
--- /dev/null
+++ b/src/pages/users/bindPhone/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/users/login/index.config.ts b/src/pages/users/login/index.config.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/users/login/index.vue b/src/pages/users/login/index.vue
new file mode 100644
index 0000000..60e543d
--- /dev/null
+++ b/src/pages/users/login/index.vue
@@ -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>
\ No newline at end of file