Skip to content

L
lumastoreapp
Commit d0bf68b1 authored by xieyishang's avatar xieyishang
Browse files
Options

~~

parent d46555f3
Hide whitespace changes
Inline Side-by-side
Showing with 534 additions and 10 deletions
components/jinedit/jin-icons.vue 0 → 100644
View file @ d0bf68b1
<template>
<view class="content">
<view class="icon" :style="{color: color, fontSize: fontSize}" v-html="type" @click="toclick"></view>
</view>
</template>
<script>
export default {
props: {
type: {
type: String,
default: '&#xe644;'
},
color: {
type: String,
default: '#666666'
},
fontSize: {
type: String,
default: '34rpx'
}
},
methods: {
toclick() {
this.$emit('click');
}
}
}
</script>
<style scoped>
.content{
display: flex;
align-items: center;
justify-content: center;
}
@font-face {
font-family: 'jin';
/** 阿里巴巴矢量图标库的字体库地址，可以替换自己的字体库地址 **/
src: url('https://at.alicdn.com/t/font_1491431_6m7ltjo8wi.ttf') format('truetype');
}
.icon {
font-family: jin !important;
font-size: 34rpx;
}
</style>
components/jinedit/jinedit.vue 0 → 100644
View file @ d0bf68b1
<template>
<view class="container" :style="{
paddingBottom: showMoreTool ? '220upx' : '120upx'
}">
<!-- 操作工具 -->
<view class="tool-view" >
<view class="tool">
<jinIcon class="single" type="&#xe6f3;" font-size="44upx" title="插入图片" @click="insertImage"></jinIcon>
<jinIcon class="single" type="&#xe6f9;" font-size="44upx" title="修改文字样式" @click="showMore" :color="showMoreTool ? activeColor : '#666666'"></jinIcon>
<jinIcon class="single" type="&#xe6eb;" font-size="44upx" title="分割线" @click="insertDivider"></jinIcon>
<jinIcon class="single" type="&#xe6e8;" font-size="44upx" title="撤销" @click="undo"></jinIcon>
<jinIcon class="single" type="&#xe705;" font-size="44upx" title="重做" @click="redo"></jinIcon>
<jinIcon class="single" type="&#xeb8a;" font-size="44upx" title="设置" @click="showSetting"></jinIcon>
</view>
<!-- 文字相关操作 -->
<view class="font-more" :style="{ height: showMoreTool ? '100upx' : 0 }">
<jinIcon class="single" type="&#xe6e7;" font-size="44upx" title="加粗" @click="setBold" :color="showBold ? activeColor : '#666666'"></jinIcon>
<jinIcon class="single" type="&#xe6fe;" font-size="44upx" title="斜体" @click="setItalic" :color="showItalic ? activeColor : '#666666'"></jinIcon>
<jinIcon class="single" type="&#xe6f8;" font-size="44upx" title="分割线" @click="setIns" :color="showIns ? activeColor : '#666666'"></jinIcon>
<jinIcon class="single" type="&#xe6e3;" font-size="44upx" title="标题" @click="setHeader" :color="showHeader ? activeColor : '#666666'"></jinIcon>
<jinIcon class="single" type="&#xe6f1;" font-size="44upx" title="居中" @click="setCenter" :color="showCenter ? activeColor : '#666666'"></jinIcon>
<jinIcon class="single" type="&#xe6ed;" font-size="44upx" title="居右" @click="setRight" :color="showRight ? activeColor : '#666666'"></jinIcon>
</view>
<view class="setting-layer-mask" v-if="showSettingLayer" @click="showSetting"></view>
<view class="setting-layer" v-if="showSettingLayer">
<view class="single" @click="release(true)">
<jinIcon class="icon" type="&#xe639;" ></jinIcon>
<view>公开发布</view>
</view>
<view class="single" @click="release(false)">
<jinIcon class="icon" type="&#xe655;" ></jinIcon>
<view>私密保存</view>
</view>
</view>
</view>
<editor
class="ql-container"
:placeholder="placeholder"
:show-img-size="true"
:show-img-toolbar="true"
:show-img-resize="true"
@ready="onEditorReady"
id="editor"
@statuschange="statuschange"
@focus="editFocus"
@blur="editBlur"
@input="changecontent"
ref="editot"
></editor>
</view>
</template>
<script>
import jinIcon from './jin-icons.vue';
export default {
name:"jinedit",
props: {
// 点击图片时显示图片大小控件
showImgSize: {
type: Boolean,
default: false
},
// 点击图片时显示工具栏控件
showImgToolbar: {
type: Boolean,
default: false
},
// 点击图片时显示修改尺寸控件
showImgResize: {
type: Boolean,
default: false
},
// 占位符
placeholder: {
type: String,
default: '开始输入...'
},
// 图片上传的地址
uploadFileUrl: {
type: String,
default: '#'
},
// 上传文件时的name
fileKeyName: {
type: String,
default: 'img'
},
// 上传图片时，http请求的header
header: {
type: Object
},
// 初始化html
html: {
type: String
}
},
//计算属性
computed:{
staticUrl(){
return this.$store.state.staticUrl1;
},
uploaddata(){
//goods
return {model:"eleproduct",user_token:this.$store.state.token,shop_id:this.$store.state.userInfo.shop_id}
}
},
data() {
return {
showMoreTool: false,
showBold: false,
showItalic: false,
showIns: false,
showHeader: false,
showCenter: false,
showRight: false,
showSettingLayer: false,
activeColor: '#F56C6C'
};
},
components: {
jinIcon
},
created() {
},
methods: {
onEditorReady(e) {
uni.createSelectorQuery()
.in(this)
.select('.ql-container')
.fields({
size: true,
context: true
},res => {
this.editorCtx = res.context;
this.editorCtx.setContents({
html: this.html
})
})
.exec();
},
undo() {
this.editorCtx.undo();
},
// 插入图片
insertImage() {
uni.chooseImage({
count: 9, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: async(res) => {
var tempFilePaths = res.tempFilePaths;
uni.showLoading({
title: '正在上传中...'
})
for (let temp of tempFilePaths) {
// 图片上传服务器
await uni.uploadFile({
url: this.uploadFileUrl,
filePath: temp,
name: this.fileKeyName,
header:{
token:uni.getStorageSync("token")
},
formData: this.uploaddata,
success: uploadFileRes => {
// 上传完成后处理
console.log(uploadFileRes.data,"上传成功后~");
let resdata = JSON.parse(uploadFileRes.data);
console.info(resdata,"resdata");
let srcimgs = resdata.data;
srcimgs =this.staticUrl+ srcimgs;
// let htaltag = srcimgs;
// let newStr = htaltag.replace(new RegExp(/\"/g), "\'");
// console.log(newStr);
this.editorCtx.insertImage({
src: srcimgs, // 此处需要将图片地址切换成服务器返回的真实图片地址
alt: '',
success: (e)=> {}
});
uni.hideLoading()
},
fail:(e)=>{
uni.hideLoading()
}
});
}
}
});
},
insertDivider() {
this.editorCtx.insertDivider();
},
redo() {
this.editorCtx.redo();
},
showMore() {
this.showMoreTool = !this.showMoreTool;
this.editorCtx.setContents()
},
setBold() {
this.showBold = !this.showBold;
this.editorCtx.format('bold');
},
setItalic() {
this.showItalic = !this.showItalic;
this.editorCtx.format('italic');
},
checkStatus(name, detail, obj) {
if (detail.hasOwnProperty(name)) {
this[obj] = true;
} else {
this[obj] = false;
}
},
statuschange(e) {
console.info(e,"通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式");
var detail = e.detail;
this.checkStatus('bold', detail, 'showBold');
this.checkStatus('italic', detail, 'showItalic');
this.checkStatus('ins', detail, 'showIns');
this.checkStatus('header', detail, 'showHeader');
if (detail.hasOwnProperty('align')) {
if (detail.align == 'center') {
this.showCenter = true;
this.showRight = false;
} else if (detail.align == 'right') {
this.showCenter = false;
this.showRight = true;
} else {
this.showCenter = false;
this.showRight = false;
}
} else {
this.showCenter = false;
this.showRight = false;
}
},
setIns() {
this.showIns = !this.showIns;
this.editorCtx.format('ins');
},
setHeader() {
this.showHeader = !this.showHeader;
this.editorCtx.format('header', this.showHeader ? 'H2' : false);
},
setCenter() {
this.showCenter = !this.showCenter;
this.editorCtx.format('align', this.showCenter ? 'center' : false);
},
setRight() {
this.showRight = !this.showRight;
this.editorCtx.format('align', this.showRight ? 'right' : false);
},
showSetting() {
this.showSettingLayer = !this.showSettingLayer;
},
//编辑器聚焦时触发
async editFocus() {
},
//编辑器失去焦点时触发
editBlur() {
},
// 编辑器内容改变时触发
changecontent(e){
console.info(e,"编辑器内容改变时触发");
},
//保存数据到父组件方法
release(isPublic) {
this.showSettingLayer = false;
this.editorCtx.getContents({
success: res => {
Object.assign(res, {
isPublic: isPublic
})
this.$emit('editOk', res);
}
})
},
}
};
</script>
<style scoped>
.container {
padding: 30upx 0;
padding-top: 0;
box-sizing: border-box;
padding-bottom: 120upx;
}
.ql-container {
line-height: 160%;
font-size: 34upx;
width: calc(100% - 60upx);
height: auto;
margin: 0 auto;
margin-top: 20upx;
}
.tool-view{
position: relative;
width: auto;
/* width: 100vw; */
/* position: fixed;
bottom: 0;
left: 0; */
}
.tool {
height: 100upx;
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
background: #eee;
}
.font-more {
/* position: absolute;
left: 0;
bottom: 100upx; */
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
background: rgb(235, 235, 235);
overflow: hidden;
transition: all 0.15s;
}
.setting-layer {
/* position: absolute;
bottom: 100upx; */
position: absolute;
right: 10px;
z-index: 999;
background: #fff;
width: 250upx;
right: 20upx;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 8upx;
}
.setting-layer .single {
height: 80upx;
font-size: 32upx;
padding: 0 30upx;
display: flex;
align-items: center;
line-height: 80upx;
flex-direction: row;
color: #666;
}
.setting-layer .single .icon {
margin-right: 20upx;
}
.setting-layer-mask{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: transparent;
}
</style>
components/jinedit/readme.md 0 → 100644
View file @ d0bf68b1
## jin-edit 基于editor的富文本编辑器
### 兼容性
这是一个uni-app的通用组件，兼容微信小程序端、安卓端、ios端（未测试）、H5端。作者因没有ios设备无法对ios端进行测试，其他端测试无问题。
微信小程序 | APP | H5
:--: | :--: | :--:
√ | √ | √
我的HbuilderX版本2.6.7，不同的版本可能会造成不兼容的问题。
### 使用方式
1. 将此组件进入你的项目中的 /components/ 目录中
2. 在某个页面中使用该插件
- 在 `script` 中引用组件
```javascript
import jinEdit from '../../components/jin-edit/jin-edit.vue';
export default {
data() {
return {
}
},
components: {
jinEdit
},
methods: {
// 点击发布
editOk(res) {
console.log(res);
}
}
}
```
- 在 `template` 中使用组件
```html
<jinEdit placeholder="请输入内容" @editOk="editOk" uploadFileUrl="/#"></jinEdit>
```
### Demo
[uni-jin（一个uni-app组件集合）](https://github.com/wangjinxin613/uni-jin)
### 参数
属性 | 类型 | 默认值 | 说明
:--: | :--: | :--: | :--:
showImgSize | Boolean | false | 点击图片时显示图片大小控件
showImgToolbar | Boolean | false | 点击图片时显示工具栏控件
showImgResize | Boolean | false | 点击图片时显示修改尺寸控件
placeholder | String | '' | 编辑器占位符
uploadFileUrl | String | '#' | 图片上传的服务器地址
fileKeyName | String | 'file' | 图片上传时的name
header | Object | - | 图片上传http请求的header
html | String | - | 初始化的html
### 方法
方法名 | 参数 | 说明
:--: | :--: | :--:
editOk | e={html,text,delta,isPublic} | 点击发布按钮触发
以上
\ No newline at end of file
manifest.json
View file @ d0bf68b1
......@@ -3,8 +3,8 @@
//"appid" : "__UNI__FC9419E",
"appid" : "__UNI__1EA80F1", //这个是 web 的
"description" : "",
"versionName" : "1.0.34",
"versionCode" : 134,
"versionName" : "1.0.35",
"versionCode" : 135,
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
......
pages/edit/product/addProjuct.scss
View file @ d0bf68b1
......@@ -318,4 +318,8 @@
}
}
}
}
.pt0s{
padding: 0 !important;
}
\ No newline at end of file
pages/edit/product/addshop.vue
View file @ d0bf68b1
......@@ -99,8 +99,8 @@
<!-- photos 更多详情图 -->
<!-- 添加产品图 -->
<view class="addmigs">
<view class="titlehe">更多详情图</view>
<view class="addmigs ">
<view class="titlehe">商品图册</view>
<robby-image-upload fileKeyName="img" :value="c_picsTwo" :server-url="uploadurl1+'/merchant.php/FileUpload/uploadify'" :form-data="c_formData" :server-url-delete-image="uploadurl1"
@delete="c_delImagetwo" @add="c_onImgtwo" @move="onMove_ctwo" :limit="9"></robby-image-upload>
</view>
......@@ -115,6 +115,14 @@
<textarea class="textarea" v-model="canform.details" placeholder="请输入商品详情"/>
</view> -->
<!-- <jinedit ref="jinedit" placeholder="请输入内容" @editOk="editOk" uploadFileUrl="/#" ></jinedit> -->
<view class="addmigs pt0s">
<jinedit ref="jinedit" placeholder="请输入商品详情内容" @editOk="editOk" fileKeyName="img" :uploadFileUrl="uploadurl1+'/merchant.php/FileUpload/uploadify'" ></jinedit>
</view>
<!-- 富文本 -->
<!-- 多选列表 勾选的位置 -->
<view class="checkboxs">
......@@ -134,7 +142,8 @@
<!-- 多选end -->
<view class="submits active" @tap="create_goods">发布商品</view>
<view class="submits active" @tap="geteditOk">发布商品</view>
<!-- create_goods -->
</view>
</template>
......@@ -147,9 +156,11 @@
import {getGoodsCate,addEditGoods,goodsDetails} from "@/utils/api/api.js";
import jinedit from "@/components/jinedit/jinedit.vue";
export default {
components:{
jinedit,
robbyImageUpload
},
computed: {
......@@ -199,7 +210,7 @@
is_agent_price:"",//代理价
instructions:"",//购买须知
photos:"",//更多详情图
details:"",///商品详情（编辑器插件）
details:'',///商品详情（编辑器插件）
is_new:"0",//0 1 是否新产品
is_hot:"0",//0 1 是否热卖产品
action:"add",//方式（添加：add，修改:edit）
......@@ -359,8 +370,28 @@
}
},
geteditOk(){//1.xxx
this.$refs.jinedit.release(true);
},
//富文本处理完毕 事件 获取最后的html 数据 子组件调用的
editOk(e){//2.xxxx
console.info("col",e.html);
//调用完毕 调用 create_goods
let htaltag = e.html
let newStr = htaltag.replace(new RegExp(/\"/g), "");
console.log(newStr);
this.canform.details = newStr;//e.html
this.create_goods();
},
//添加商品事件
async create_goods(){
async create_goods(){//3.xxxx
//首先先把富文本组件的数据同步到父组件
//this.$refs.jinedit.release(true);
if(this.issubmit==true){
this.issubmit = false;
......@@ -481,6 +512,7 @@
this.c_photosTwo[index] = id
}
},
}
}
</script>
......
utils/debug.js
View file @ d0bf68b1
......@@ -2,8 +2,8 @@
//环境变量 这个是 鹿马商家助手的 商家助手的~~~~
module.exports = {
//是否为开发调试环境 true为本地环境 false 为正式环境
// isdebug:true,//测试
isdebug:false,//正式
isdebug:true,//测试
// isdebug:false,//正式
xqdebug:false,//正式权限
// xqdebug:true,//发布审核权限 也是测试环境的 主要用于ios
......
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