Skip to content

I
integral-mall
Commit 6e2e11a4 by damodmg
Options

提交礼品的图文详情

parent 604bef98
Showing with 260 additions and 5 deletions
package-lock.json
......@@ -82,6 +82,14 @@
"watch-size": "2.0.0"
}
},
"@tinymce/tinymce-vue": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@tinymce/tinymce-vue/-/tinymce-vue-1.1.0.tgz",
"integrity": "sha512-v6qY9HfIi0XIDNtG/puCb7qbcnbBgquZAnYowzp4ZYyAELkYXcWzSYVfYcjPirwOb32NrpoY3inFkajG8MjLrQ==",
"requires": {
"vue": "2.5.17"
}
},
"abbrev": {
"version": "1.1.1",
"resolved": "http://registry.npm.taobao.org/abbrev/download/abbrev-1.1.1.tgz",
......@@ -10685,6 +10693,11 @@
"setimmediate": "1.0.5"
}
},
"tinymce": {
"version": "4.8.5",
"resolved": "http://registry.npm.taobao.org/tinymce/download/tinymce-4.8.5.tgz",
"integrity": "sha1-qA6mbE+QB4vZNiWw8JFKT3dOCvM="
},
"to-arraybuffer": {
"version": "1.0.1",
"resolved": "http://registry.npm.taobao.org/to-arraybuffer/download/to-arraybuffer-1.0.1.tgz",
......
package.json
......@@ -18,10 +18,12 @@
"@gic-test/vue-gic-store-new": "^1.0.5",
"@gic-test/vue-gic-upload-image": "^1.0.35",
"@riophae/vue-treeselect": "^0.0.36",
"@tinymce/tinymce-vue": "^1.1.0",
"axios": "^0.18.0",
"element-ui": "^2.4.1",
"packele": "^1.0.8",
"scriptjs": "^2.5.8",
"tinymce": "^4.8.5",
"vue": "^2.5.2",
"vue-axios": "^2.1.1",
"vue-router": "^3.0.1",
......
src/api/request.js 0 → 100644
import axios from 'axios'
import store from '../store/index'
// import router from '../router'
let adminUrl = process.env.NODE_ENV === 'production' ? '':'http://gicdev.demogic.com'
let request ;
request = axios.create({
baseURL: adminUrl,
withCredentials: true,//跨域凭证
timeout: 30000,
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
// },
});
// http request 拦截器
request.interceptors.request.use(
config => {
config.params={
requestProject:"mall",
...config.params
}
// if (store.state.token) {
// config.headers.Authorization = `token ${store.state.token}`;
// }
return config;
},
err => {
return Promise.reject(err);
});
// http response 拦截器
request.interceptors.response.use(
response => {
if(response.status == 200 && response.data.errorCode === 401) {
window.location.href = window.location.origin + ('/integral-mall')
// window.location.href = 'http://gicdev.com/gic-web'
}
return response;
},
error => {
console.log(error)
if (error.response) {
switch (error.response.status) {
case 401:
// 401 清除token信息并跳转到登录页面
store.commit(types.LOGOUT);
router.replace({
name: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
return Promise.reject(error.response.data)
});
export default request ;
src/assets/style/base/index.scss
......@@ -296,4 +296,7 @@
span {
color: #606266;
}
}
\ No newline at end of file
}
src/service/api/commonApi.js
......@@ -16,4 +16,6 @@ export const getCardList = (params) => requests(PLUG_PREFIX + 'get-coupon-list',
//所有门店分组
export const storeGroupList = (params) => requests(GOODS_PREFIX + 'store-group-list', params);
//上传图片
export const uploadImgText = (params) => requests(PLUG_PREFIX + 'upload-img', params);
src/views/mall/common/tinymce-edit.vue 0 → 100644
<!--
安装 tinymce
$ npm install @tinymce/tinymce-vue -S
npm install tinymce -S
安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下
文中所有 static 目录相关都这样处理
tinymce 默认是英文界面，所以还需要下载一个中文语言包：
中文：https://tinymce-services.azurewebsites.net/1/i18n/download?langs=zh_CN
然后将这个语言包放到 static 目录下，为了结构清晰，包一层 tinymce 目录
static
|____tinymce
|___skins
|___zh_CN.js
<tinymce-edit ref="tinymceWrap" :bodyHtml="ruleForm.gradeDescribe" :projectName="projectName"></tinymce-edit>
import tinymceEdit from 'components/memberShip/tinymce-edit'
公共上传图片请求方法
/*
* method: 'post'
* data: params
*
*/
export const postForm = (url, params) => {
params.requestProject = "gic-clique";
return Vue.axios({
method: 'post',
url: `${local}${url}`,
data: params,
headers: {}
});
}
引入路径修改成自己的路径
-->
<template>
<div class="tinymce-contain">
<editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
</div>
</template>
<script>
// import request from '../../api/request.js'
import request from '../../../api/request.js'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
name: "tinymce-edit",
props: ["bodyHtml",'projectName'],
data() {
return {
tinymceHtml: '请输入内容',
init: {
language_url: 'static/tinymce/zh_CN.js',
language: 'zh_CN',
skin_url: 'static/tinymce/skins/lightgray',
height: 300,
// 图片上传
// without images_upload_url set, Upload tab won't show up
// images_upload_url: '',
// images_upload_base_path: '/some/basepath',
images_upload_credentials: true, //是否应传递cookie等跨域的凭据
// images_upload_handler提供三个参数：blobInfo, success, failure
images_upload_handler: (blobInfo, success, failure)=>{
console.log(blobInfo)
this.handleImgUpload(blobInfo, success, failure)
},
// 添加插件
// plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
// toolbar:
// 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
plugins: 'image textcolor',
toolbar:
'fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | link unlink image code',
fontsize_formats: "8px 10px 12px 14px 18px 24px 36px",
branding: false,
menubar: false,
setup: function(editor) {
// 点击编辑框回调
editor.on('click', function(e) {
console.log('Editor was clicked');
});
}
}
}
},
methods: {
// 上传图片
handleImgUpload (blobInfo, success, failure) {
var that = this
let formdata = new FormData()
formdata.set('upload_file', blobInfo.blob())
formdata.set("requestProject",that.repProjectName);
console.log(formdata)
request.post('/api-plug/upload-img', formdata).then(res => {
success(res.data.result[0].qcloudImageUrl)
}).catch(res => {
console.log(res)
failure('error')
})
},
},
watch: {
projectName: function(newData,oldData){
var that = this;
// console.log("新数据:",newData,oldData)
that.repProjectName = newData || 'gic-web';
},
bodyHtml: function(newData,oldData){
var that = this;
// console.log("新数据:",newData,oldData)
that.tinymceHtml = newData;
},
},
components: {
Editor
},
mounted() {
var that = this
tinymce.init({
fontsize_formats: "8px 10px 12px 14px 18px 24px 36px",
});
that.tinymceHtml = that.bodyHtml;
}
}
</script>
<style scoped>
.tinymce-contain {
width: 900px
}
</style>
src/views/mall/gift/info.js
......@@ -2,9 +2,14 @@ import { getGradeList, getCategoryList, createIntegralProService, getIntegralMal
import cardTemp from '../common/card-temp.vue';
// import dmUploadAvatar from '@/components/upload/avatar';
import { formateDateTimeByType } from '@/utils/index.js';
import tinymceEdit from '../common/tinymce-edit.vue'
export default {
components: {
'card-temp': cardTemp,
tinymceEdit,
// dmUploadAvatar
},
data() {
......@@ -34,7 +39,8 @@ export default {
exchangeDateWeekArr: [],
limitTimeBegin: '',
virtualStock: 0,
weChatVirtualStock: 0
weChatVirtualStock: 0,
detailDescription:'',//图文详情
},
rules: {
proName: { required: true, message: '请输入礼品名称', trigger: 'blur' },
......@@ -68,6 +74,7 @@ export default {
maxlength: 5, // 图片数量 默认 5
imgSize: 1, // 图片大小限制 MB
imageList: [] // 是否显示已上传文件列表
}
},
watch: {
......@@ -171,7 +178,7 @@ export default {
this.form.exchangeDateWeekArr = result.exchangeDateWeek ? result.exchangeDateWeek.split(',').filter(v => v) : [];
this.form.limitTimeBegin = result.limitTimeBegin || '';
this.form.weChatVirtualStock = this.form.virtualStock = result.virtualStock || 0;
this.form.detailDescription=result.detailDescription//图文详情的数据
// result.showStore = 2;
this.sendChildData = {
......@@ -258,7 +265,7 @@ export default {
},
// 提交保存
submitService() {
this.form.detailDescription=this.$refs.tinymceWrap.tinymceHtml
if (this.form.costValue < this.form.cashCost) {
this.$tips({ type: 'warning', message: '现金费用不能大于礼品成本' });
return;
......@@ -296,6 +303,7 @@ export default {
storeIds: '', // 选中的门店信息，多个逗号拼接
virtualStock: this.form.changeType === 1 ? this.form.weChatVirtualStock : this.form.virtualStock, //库存
detailDescription:this.form.detailDescription,//图文详情
}
......
src/views/mall/gift/info.vue
......@@ -16,6 +16,7 @@
:limitW="limitW"
:limitH="limitH"
:imgSize="imgSize"
with-credentials
:maxImageLength="maxlength"
@uploadOnSuccess="uploadOnSuccess"
@sortImg="sortImg"
......@@ -54,6 +55,11 @@
<el-form-item label="展现门店" class="is-required">
<vue-gic-store-linkage :disabled="isInfo" :msg="sendChildData" ref="selectTree" @sendSelectGroupData="getSelectGroupData"></vue-gic-store-linkage>
</el-form-item>
<el-form-item label="图文详情">
<div class="tinymce-wrap">
<tinymce-edit ref="tinymceWrap" :bodyHtml="form.detailDescription" :projectName="projectName"></tinymce-edit>
</div>
</el-form-item>
</div>
<div class="dm-form__wrap">
<h3 class="dm-title__label">兑换条件</h3>
......
static/tinymce/skins/lightgray/content.inline.min.css 0 → 100644
.word-wrap{word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.mce-content-body .mce-reset{margin:0;padding:0;border:0;outline:0;vertical-align:top;background:transparent;text-decoration:none;color:black;font-family:Arial;font-size:11px;text-shadow:none;float:none;position:static;width:auto;height:auto;white-space:nowrap;cursor:inherit;line-height:normal;font-weight:normal;text-align:left;-webkit-tap-highlight-color:transparent;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;direction:ltr;max-width:none}.mce-object{border:1px dotted #3A3A3A;background:#D5D5D5 url(img/object.gif) no-repeat center}.mce-preview-object{display:inline-block;position:relative;margin:0 2px 0 2px;line-height:0;border:1px solid gray}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-preview-object .mce-shim{position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}figure.align-left{float:left}figure.align-right{float:right}figure.image.align-center{display:table;margin-left:auto;margin-right:auto}figure.image{display:inline-block;border:1px solid gray;margin:0 2px 0 1px;background:#f5f2f0}figure.image img{margin:8px 8px 0 8px}figure.image figcaption{margin:6px 8px 6px 8px;text-align:center}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-pagebreak{cursor:default;display:block;border:0;width:100%;height:5px;border:1px dashed #666;margin-top:15px;page-break-before:always}@media print{.mce-pagebreak{border:0}}.mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px !important;height:9px !important;border:1px dotted #3A3A3A;background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-nbsp,.mce-shy{background:#AAA}.mce-shy::after{content:'-'}.mce-match-marker{background:#AAA;color:#fff}.mce-match-marker-selected{background:#3399ff;color:#fff}.mce-spellchecker-word{border-bottom:2px solid rgba(208,2,27,0.5);cursor:default}.mce-spellchecker-grammar{border-bottom:2px solid #008000;cursor:default}.mce-item-table,.mce-item-table td,.mce-item-table th,.mce-item-table caption{border:1px dashed #BBB}td[data-mce-selected],th[data-mce-selected]{background-color:#2276d2 !important}.mce-edit-focus{outline:1px dotted #333}.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus{outline:2px solid #2276d2}.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover{outline:2px solid #2276d2}.mce-content-body *[contentEditable=false][data-mce-selected]{outline:2px solid #2276d2}.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,.mce-content-body.mce-content-readonly *[contentEditable=true]:hover{outline:none}.mce-content-body *[data-mce-selected="inline-boundary"]{background:#bfe6ff}.mce-content-body .mce-item-anchor[data-mce-selected]{background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-content-body hr{cursor:default}.mce-content-body table{-webkit-nbsp-mode:normal}.ephox-snooker-resizer-bar{background-color:#2276d2;opacity:0}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:.2}.mce-content-body{line-height:1.3}
\ No newline at end of file
static/tinymce/skins/lightgray/content.min.css 0 → 100644
body{background-color:#FFFFFF;color:#000000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;line-height:1.3;scrollbar-3dlight-color:#F0F0EE;scrollbar-arrow-color:#676662;scrollbar-base-color:#F0F0EE;scrollbar-darkshadow-color:#DDDDDD;scrollbar-face-color:#E0E0DD;scrollbar-highlight-color:#F0F0EE;scrollbar-shadow-color:#F0F0EE;scrollbar-track-color:#F5F5F5}td,th{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px}.word-wrap{word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.mce-content-body .mce-reset{margin:0;padding:0;border:0;outline:0;vertical-align:top;background:transparent;text-decoration:none;color:black;font-family:Arial;font-size:11px;text-shadow:none;float:none;position:static;width:auto;height:auto;white-space:nowrap;cursor:inherit;line-height:normal;font-weight:normal;text-align:left;-webkit-tap-highlight-color:transparent;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;direction:ltr;max-width:none}.mce-object{border:1px dotted #3A3A3A;background:#D5D5D5 url(img/object.gif) no-repeat center}.mce-preview-object{display:inline-block;position:relative;margin:0 2px 0 2px;line-height:0;border:1px solid gray}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-preview-object .mce-shim{position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}figure.align-left{float:left}figure.align-right{float:right}figure.image.align-center{display:table;margin-left:auto;margin-right:auto}figure.image{display:inline-block;border:1px solid gray;margin:0 2px 0 1px;background:#f5f2f0}figure.image img{margin:8px 8px 0 8px}figure.image figcaption{margin:6px 8px 6px 8px;text-align:center}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-pagebreak{cursor:default;display:block;border:0;width:100%;height:5px;border:1px dashed #666;margin-top:15px;page-break-before:always}@media print{.mce-pagebreak{border:0}}.mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px !important;height:9px !important;border:1px dotted #3A3A3A;background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-nbsp,.mce-shy{background:#AAA}.mce-shy::after{content:'-'}.mce-match-marker{background:#AAA;color:#fff}.mce-match-marker-selected{background:#3399ff;color:#fff}.mce-spellchecker-word{border-bottom:2px solid rgba(208,2,27,0.5);cursor:default}.mce-spellchecker-grammar{border-bottom:2px solid #008000;cursor:default}.mce-item-table,.mce-item-table td,.mce-item-table th,.mce-item-table caption{border:1px dashed #BBB}td[data-mce-selected],th[data-mce-selected]{background-color:#2276d2 !important}.mce-edit-focus{outline:1px dotted #333}.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus{outline:2px solid #2276d2}.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover{outline:2px solid #2276d2}.mce-content-body *[contentEditable=false][data-mce-selected]{outline:2px solid #2276d2}.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,.mce-content-body.mce-content-readonly *[contentEditable=true]:hover{outline:none}.mce-content-body *[data-mce-selected="inline-boundary"]{background:#bfe6ff}.mce-content-body .mce-item-anchor[data-mce-selected]{background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-content-body hr{cursor:default}.mce-content-body table{-webkit-nbsp-mode:normal}.ephox-snooker-resizer-bar{background-color:#2276d2;opacity:0}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:.2}
\ No newline at end of file
static/tinymce/skins/lightgray/content.mobile.min.css 0 → 100644
.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{position:absolute;display:inline-block;background-color:green;opacity:.5}body{-webkit-text-size-adjust:none}body img{max-width:96vw}body table img{max-width:95%}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment