diff --git a/src/views/mp/components/wx-editor/WxEditor.vue b/src/views/mp/components/wx-editor/WxEditor.vue new file mode 100644 index 00000000..50c65c6e --- /dev/null +++ b/src/views/mp/components/wx-editor/WxEditor.vue @@ -0,0 +1,201 @@ + + + + + diff --git a/src/views/mp/components/wx-editor/quill-options.js b/src/views/mp/components/wx-editor/quill-options.js new file mode 100644 index 00000000..5ec211ae --- /dev/null +++ b/src/views/mp/components/wx-editor/quill-options.js @@ -0,0 +1,45 @@ +const toolbarOptions = [ + ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 + ['blockquote', 'code-block'], // 引用 代码块 + [{ header: 1 }, { header: 2 }], // 1、2 级标题 + [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表 + [{ script: 'sub' }, { script: 'super' }], // 上标/下标 + [{ indent: '-1' }, { indent: '+1' }], // 缩进 + // [{'direction': 'rtl'}], // 文本方向 + [{ size: ['small', false, 'large', 'huge'] }], // 字体大小 + [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 + [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 + [{ font: [] }], // 字体种类 + [{ align: [] }], // 对齐方式 + ['clean'], // 清除文本格式 + ['link', 'image', 'video'] // 链接、图片、视频 +] + +export default { + theme: 'snow', + placeholder: '请输入文章内容', + modules: { + toolbar: { + container: toolbarOptions, + // container: "#toolbar", + handlers: { + image: function (value) { + if (value) { + // 触发input框选择图片文件 + document.querySelector('.avatar-uploader input').click() + } else { + this.quill.format('image', false) + } + }, + link: function (value) { + if (value) { + const href = prompt('注意!只支持公众号图文链接') + this.quill.format('link', href) + } else { + this.quill.format('link', false) + } + } + } + } + } +} diff --git a/src/views/mp/components/wx-material-select/main.vue b/src/views/mp/components/wx-material-select/main.vue index b1bdd5aa..74e068a6 100644 --- a/src/views/mp/components/wx-material-select/main.vue +++ b/src/views/mp/components/wx-material-select/main.vue @@ -13,14 +13,15 @@

{{ item.name }}

- - 选择 + 选择 -
+ @@ -37,23 +39,27 @@ - - + + + + - + + + - + fixed="right" + class-name="small-padding fixed-width" + > - - 选择 + 选择
- + + + diff --git a/src/views/mp/draft/mock.js b/src/views/mp/draft/mock.js new file mode 100644 index 00000000..e8493f6c --- /dev/null +++ b/src/views/mp/draft/mock.js @@ -0,0 +1,151 @@ +export default { + list: [ + { + mediaId: 'r6ryvl6LrxBU0miaST4Y-q-G9pdsmZw0OYG4FzHQkKfpLfEwIH51wy2bxisx8PvW', + content: { + newsItem: [ + { + title: '我是标题(OOO)', + author: '我是作者', + digest: '我是摘要', + content: '我是内容', + contentSourceUrl: 'https://www.iocoder.cn', + thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn', + showCoverPic: 0, + needOpenComment: 0, + onlyFansCanComment: 0, + url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9XaFphcmtJVFh3VEc4Q1MxQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN2QxTE56SFBCYXc2RE9NcUxIeS1CQjJuUHhTWjBlN2VOeGRpRi1fZUhwN1FNQjdrQV9yRU9EU0hibHREZmZoVW5acnZrN3ZjaWsxejR3RGpKczBzTHFIM0dFNFZWVkpBc0dWWlAzUEhlVmpnfn4%3D&chksm=1f6354802814dd969ef83c0f3babe555c614270b30bc383beaf7ffd13b0257f0fe5ced9af694#rd', + thumbUrl: + 'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png' + }, + { + title: '我是标题(XXX)', + author: '我是作者', + digest: '我是摘要', + content: '我是内容', + contentSourceUrl: 'https://www.iocoder.cn', + thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn', + showCoverPic: 0, + needOpenComment: 0, + onlyFansCanComment: 0, + url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9yTlYwOEs1clpwcE5OUEhCQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN0NSMjFqN3N1aUZMbFNVLTZHN2ZDME9qOGp2THk2RFNlSTlKZ3Y1czFVZDdQQm5IeUg3dEppSUtpQUh5SExOOTRkT3dHNUdBdHdWSWlOendlREV3dS1jUEVQbFpiVTZmVW5iRWhZcGdkNTFRfn4%3D&chksm=1f6354802814dd96a403151cd44c7da4eecf0e475d25423e46ecd795b513bafd829a75daef9b#rd', + thumbUrl: + 'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png' + } + ] + }, + updateTime: 1673655730 + }, + { + mediaId: 'r6ryvl6LrxBU0miaST4Y-jGpXnO73ihN0lsNXknCRQHapp2xgHMRxHKG50LituFe', + content: { + newsItem: [ + { + title: '我是标题(修改)', + author: '我是作者', + digest: '我是摘要', + content: '我是内容', + contentSourceUrl: 'https://www.iocoder.cn', + thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn', + showCoverPic: 0, + needOpenComment: 0, + onlyFansCanComment: 0, + url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl95WVFXYndIZnZJd0t5cjgvQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN1dlNURPbWswbEF4RDd5dVJTdjQ4cm9Cc0Q1TWhpMUh6SE1hVEE3ZHljaHhlZjZYSGF5N2JNSHpDTlh6ajNZbkpGTGpTcUQ4M3NMdW41ZUpXNFZZQ1VKbVlaMVp5ekxEV1czREdsY1dOYTZnfn4%3D&chksm=1f6354be2814dda8e6238037c2ebd52b1c8e80e93249a861ad80e4d40e5ca7207233475ca689#rd', + thumbUrl: + 'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png' + } + ] + }, + updateTime: 1673655584 + }, + { + mediaId: 'r6ryvl6LrxBU0miaST4Y-v5SrbNCPpD6M_p3TmSrYwTjKogs-0DMJgmjMyNZPeMO', + content: { + newsItem: [ + { + title: '1321', + author: '3232', + digest: '1333', + content: '

444

', + contentSourceUrl: 'http://www.iocoder.cn', + thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-tlQmcl3RdC-Jcgns6IQtf7zenGy3b86WLT7GzUcrb1T', + showCoverPic: 0, + needOpenComment: 0, + onlyFansCanComment: 0, + url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9jelJiaDAzbmdpSkJOZ2M2QWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNDNXVVc2ZDRYeTY0Zm1weXR6dE9vQWh1TzEwbEpUVnRfVzJyaGFDNXBkZ0ZXM2JFOTNaRHNhOHRUeFdEanhMeS01X01kMUNWQ1BpRER3cjYwTl9pMnpFLUJhZXFucVVfM1pDUXlTUEl1S25nfn4%3D&chksm=1f6354bc2814ddaa56a90ad5bc3d078601c8d1589ba01827a8170587bc830ff9747b5f59c3a0#rd', + thumbUrl: + 'http://mmbiz.qpic.cn/mmbiz_png/btUmCVHwbJUoicwBiacjVeQbu6QxgBVrukfSJXz509boa21SpH8OVHAqXCJiaiaAaHQJNxwwsa0gHRXVr0G5EZYamw/0?wx_fmt=png' + } + ] + }, + updateTime: 1673628969 + }, + { + mediaId: 'r6ryvl6LrxBU0miaST4Y-vdWrisK5EZbk4Y3tzh8P0PG0eEUbnQrh0BcsEb3WNP0', + content: { + newsItem: [ + { + title: 'tudou', + author: 'haha', + digest: '312', + content: '

132312

', + contentSourceUrl: 'http://www.iocoder.cn', + thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG', + showCoverPic: 0, + needOpenComment: 0, + onlyFansCanComment: 0, + url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qdkJ1ZjBoUmg2Uk9TS3RlQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNVg2aTJsaC1fMkU2eXNacUplN3VDTTZFZkhtMjhuTUZvWkxsNDBRSXExY2tiVXRHb09TaHgtREhzY3doZ0JYeC1TSTZ5eWZldXJsOWtfbV8yMi1aYkcyZ2pOY0haM0Ntb3VSWEtxUGVFRlNBfn4%3D&chksm=1f6354ba2814ddacf0184b24d310483641ef190b1faac098c285eb416c70017e2f54decfa1af#rd', + thumbUrl: + 'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG.png' + } + ] + }, + updateTime: 1673628760 + }, + { + mediaId: 'r6ryvl6LrxBU0miaST4Y-u9kTIm1DhWZDdXyxsxUVv2Z5DAB99IPxkIRTUUD206k', + content: { + newsItem: [ + { + title: '12', + author: '333', + digest: '123', + content: '123', + contentSourceUrl: 'https://www.iocoder.cn', + thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8', + showCoverPic: 0, + needOpenComment: 0, + onlyFansCanComment: 0, + url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qVVhpSDZUaFJWTzBBWWRVQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNWRnTDJWYmF2NER0clV1bThmQ0xUR3hqQnJkZ3BJSUNmNDJmc0lCZ1dadkVnZ3Z5bkN4YWtVUjhoaWZWYzZURUR4NnpMd0Y4Z3U5aUdib0lkMzI4Rjg3SG9JX2FycTMxbUctOHplaTlQVVhnfn4%3D&chksm=1f6354b62814dda076c778af33f06580165d8aa81f7798d55cfabb1886b5c74d9b2124a3535c#rd', + thumbUrl: + 'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8.jpg' + } + ] + }, + updateTime: 1673626494 + }, + { + mediaId: 'r6ryvl6LrxBU0miaST4Y-sO24upobaENDmeByfBTfaozB3aOqSMAV0lGy-UkHXE7', + content: { + newsItem: [ + { + title: '我是标题', + author: '我是作者', + digest: '我是摘要', + content: '我是内容', + contentSourceUrl: 'https://www.iocoder.cn', + thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn', + showCoverPic: 0, + needOpenComment: 0, + onlyFansCanComment: 0, + url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9LT2dqRnpMNUpsR0hjYWtBQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNGNmazZTdlE5WkxvU0tfX2V5cjV2WjJiR0xjQUhyREFSZWo2eWNrUW9EYVh6ZkpWRXBLR3FmTEV6YldBMno3Q2ZvVXBSdzlaVDc3aFhndEpQWUwzWmFMUWt0YVVURE1VZ1FsQTdPMlRtc3JBfn4%3D&chksm=1f6354aa2814ddbcc2637382f963a8742993ac38ebcebe6e3411df5ac82ac7bbdb391be6494a#rd', + thumbUrl: + 'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png' + } + ] + }, + updateTime: 1673534279 + } + ], + total: 6 +} diff --git a/src/views/mp/menu/assets/iphone_backImg.png b/src/views/mp/menu/assets/iphone_backImg.png new file mode 100644 index 00000000..bb09591a Binary files /dev/null and b/src/views/mp/menu/assets/iphone_backImg.png differ diff --git a/src/views/mp/menu/assets/menu_foot.png b/src/views/mp/menu/assets/menu_foot.png new file mode 100644 index 00000000..4a89d4bd Binary files /dev/null and b/src/views/mp/menu/assets/menu_foot.png differ diff --git a/src/views/mp/menu/assets/menu_head.png b/src/views/mp/menu/assets/menu_head.png new file mode 100644 index 00000000..248cfb76 Binary files /dev/null and b/src/views/mp/menu/assets/menu_head.png differ diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue index 497f72ec..a8e3d880 100644 --- a/src/views/mp/menu/index.vue +++ b/src/views/mp/menu/index.vue @@ -1,3 +1,793 @@ + + + + + + diff --git a/src/views/mp/menu/menuOptions.js b/src/views/mp/menu/menuOptions.js new file mode 100644 index 00000000..d86dd789 --- /dev/null +++ b/src/views/mp/menu/menuOptions.js @@ -0,0 +1,42 @@ +export default [ + { + value: 'view', + label: '跳转网页' + }, + { + value: 'miniprogram', + label: '跳转小程序' + }, + { + value: 'click', + label: '点击回复' + }, + { + value: 'article_view_limited', + label: '跳转图文消息' + }, + { + value: 'scancode_push', + label: '扫码直接返回结果' + }, + { + value: 'scancode_waitmsg', + label: '扫码回复' + }, + { + value: 'pic_sysphoto', + label: '系统拍照发图' + }, + { + value: 'pic_photo_or_album', + label: '拍照或者相册' + }, + { + value: 'pic_weixin', + label: '微信相册' + }, + { + value: 'location_select', + label: '选择地理位置' + } +]