1.分销优化

2.新增添加编辑博文
master
sws 2023-11-17 16:46:18 +08:00
parent 892de10719
commit a4e37b33fe
12 changed files with 585 additions and 84 deletions

View File

@ -0,0 +1,352 @@
<template>
<view>
<view class="content">
<view class="detail" v-for="(item,index) in list" :key="index">
<view class="textarea" v-if="item.type==1">
<textarea maxlength="-1" placeholder="请输入内容" v-model="list[index].content"/>
</view>
<view class="image" v-else-if="item.type==2">
<image :src="item.content" mode="widthFix"></image>
</view>
<view class="video" v-else-if="item.type==3">
<video :src="item.content"></video>
</view>
<view class="btn-group">
<view :data-index="index" @tap="delItem">
<uni-icons type="trash" size="14"></uni-icons>
<text>删除</text>
</view>
<view v-if="index>0" :data-index="index" @tap="arrowthinup">
<uni-icons type="arrowthinup" size="14"></uni-icons>
<text>上移</text>
</view>
<view v-if="index<(list.length-1)" :data-index="index" @tap="arrowthindown">
<uni-icons type="arrowthindown" size="14"></uni-icons>
<text>下移</text>
</view>
</view>
</view>
<view class="footer-btn-group">
<view @tap="showShade">
<uni-icons type="plusempty" color="#197ae5" size="16"></uni-icons>
<text>添加</text>
</view>
<view @tap="preview" v-if="showPreview">
<uni-icons type="eye" color="#197ae5" size="16"></uni-icons>
<text>预览</text>
</view>
<view @tap="completed">
<uni-icons type="arrowthinright" color="#197ae5" size="16"></uni-icons>
<text>{{completedText}}</text>
</view>
</view>
</view>
<!-- 遮罩层 -->
<view class="shade" v-if="shade" @tap="closeShade">
<view class="shade-content" @tap.stop>
<view class="shade-content-item" @tap="addText">
<view class="shade-content-item-icon">
<uni-icons type="compose" size="30"></uni-icons>
</view>
<view>文字</view>
</view>
<view class="shade-content-item" @tap="addImage">
<view class="shade-content-item-icon">
<uni-icons type="image" size="30"></uni-icons>
</view>
<view>图片</view>
</view>
<view class="shade-content-item" @tap="addVideo">
<view class="shade-content-item-icon">
<uni-icons type="videocam" size="40"></uni-icons>
</view>
<view>视频</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'textImageVideoEditor',
props: {
completedText: {
type: String,
default: "完成"
},
showPreview: {
type: Boolean,
default: true
},
list2: {
type: Array,
default: function() {
return [
{
type: 1,
content: ""
},
]
}
},
},
data() {
return {
shade: false,
list: [
{
type: 1,
content: ""
}
],
form: {
image: "",
content: "",
}
};
},
mounted() {
this.list = this.list2;
},
methods:{
showShade(){
this.shade = true;
},
closeShade(){
this.shade = false;
},
addText(){
let addjson = {type: 1, content: ""}
this.list.push(addjson)
this.closeShade();
},
addImage(){
this.$emit("addImage")
},
addImageCompleted(imgurl){
let addjson = {type: 2, content: imgurl}
this.list.push(addjson)
this.closeShade();
},
addVideo(){
this.$emit("addVideo")
},
addVideoCompleted(videourl){
let addjson = {type: 3, content: videourl}
this.list.push(addjson)
this.closeShade();
},
delItem(e){
let index = e.currentTarget.dataset.index;
this.list.splice(index, 1)
},
arrowthinup(e){
let index = e.currentTarget.dataset.index;
let newList = [];
if(index>0){
for(let i in this.list){
if(index-i==1){
newList.push(this.list[index])
newList.push(this.list[i])
}else if(index==i){
continue;
}else{
newList.push(this.list[i])
}
}
this.list = newList
}
},
arrowthindown(e){
let index = e.currentTarget.dataset.index;
let newList = [];
if(index<(this.list.length-1)){
for(let i in this.list){
if(i==index){
newList.push(this.list[(parseInt(i)+1)])
newList.push(this.list[i])
}else if((index+1)==i){
continue;
}else{
newList.push(this.list[i])
}
}
this.list = newList
}
},
preview(){
let content = this.setContent();
if(content===false){
uni.showToast({
title: "你还没有添加内容哦",
icon:'none',
duration: 1000
});
}else{
this.$emit("preview", this.form.content)
}
},
completed(){
let content = this.setContent();
if(content===false){
uni.showToast({
title: "你还没有添加内容哦",
icon:'none',
duration: 1000
});
}else{
let data = this.form;
data.json = JSON.stringify(this.list)
this.$emit("completed", data)
}
},
setContent(){
let content = ""
for(let i in this.list){
if(this.list[i].content!=""){
if(this.list[i].type==1){
content += `<div style="width:100%;padding-top: 10px">${this.list[i].content}</div>`;
}
if(this.list[i].type==2){
content += `<div style="width:100%;padding-top: 10px">
<img src="${this.list[i].content}" style="width: 100%" />
</div>`;
//
if(this.form.image==""){
this.form.image = this.list[i].content;
}
}
if(this.list[i].type==3){
content += `<div style="width:100%;padding-top: 10px">
<video style="width: 100%" controls>
<source src="${this.list[i].content}">
</video>
</div>`;
}
}
}
if(content==""){
return false;
}
this.form.content = content;
},
}
};
</script>
<style lang="scss">
body{
background: #fff;
width: 700rpx;
margin: 0 auto;
}
.content{
margin-bottom: 200rpx;
.detail{
margin-top: 40rpx;
position: relative;
border: 1px solid #eeeeee;
.textarea{
padding-bottom: 66rpx;
textarea{
width: 96%;
padding: 2%;
}
}
.image{
padding-bottom: 56rpx;
image{
width: 100%;
}
}
.video{
padding-bottom: 56rpx;
video{
width: 100%;
};
}
}
}
.btn-group{
display: flex;
position: absolute;
right: 0;
bottom: 0;
view{
width: 140rpx;
height: 60rpx;
line-height: 56rpx;
text-align: center;
font-size: 28rpx;
background: #f5f5f5;
border-top: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
}
}
.footer-btn-group{
z-index: 9;
display: flex;
justify-content: space-between;
align-items: center;
width: 700rpx;
height: 150rpx;
margin: auto;
background: #fff;
position: fixed;
left: 0;
right: 0;
bottom: 0;
view{
width: 180rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
font-size: 32rpx;
color: #197ae5;
border: 1px solid #197ae5;
uni-icons{
position: relative;
left: -10rpx;
}
}
}
.shade{
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
z-index: 99999999;
background: rgba(12,12,12,.8);
.shade-content{
width: 70%;
padding: 100rpx 15%;
background: #fff;
position: absolute;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
.shade-content-item{
width: 120rpx;
text-align: center;
.shade-content-item-icon{
height: 120rpx;
line-height: 120rpx;
width: 120rpx;
border: 2px solid #ccc;
text-align: center;
}
}
}
}
</style>

View File

@ -0,0 +1,88 @@
###########说明
1. 图标使用uni-icons没有的请到插件市场自行安装。
2. 示例代码如下:
list2: 初始化数据(用于编辑)
addImage: 图片上传
addVideo: 视频上传
showPreview: 是否显示预览
preview: 返回预览的html文本
completedText: 按钮文字
completed: 编辑器返回数据json
3. 提示rich-text不能解析视频建议使用插件市场uparse。
4. 有问题微信同QQ736849829请备注。上传视频太大不会分片也可以v我。
###########示例代码
<template>
<view>
<textImageVideoEditor
ref="textImageVideoEditor"
:list2="initEditorList"
@addImage="addImage"
@addVideo="addVideo"
:showPreview="true"
@preview="preview"
completedText="下一步"
@completed="completed"
></textImageVideoEditor>
</view>
</template>
<script>
import textImageVideoEditor from '../../components/yyc-easy-editor/index.vue'
export default {
data() {
return {
initEditorList: [
{
type:1,
content:""
}
],
}
},
components: {
textImageVideoEditor
},
onLoad(options) {
},
methods: {
preview(data){
console.log("预览preview", data)
},
completed(data){
console.log("完成completed", data)
// data: {
// content: "富文本内容",
// image: "提取一张图片",
// json: "",
// }
},
addImage(){
console.log("上传图片")
let _this = this;
//这里是你上传的代码
//......
//得到imgurl
_this.$refs.textImageVideoEditor.addImageCompleted(imgurl);
},
addVideo(){
console.log("上传视频")
let _this = this;
//这里是你上传的代码
//......
//得到videourl
_this.$refs.textImageVideoEditor.addVideoCompleted(videourl);
},
}
}
</script>
<style lang="scss">
</style>

View File

@ -1,5 +1,10 @@
{
"dependencies": {
"jweixin-module": "^1.6.0"
}
}
"id": "yyc-easy-editor",
"name": "超简洁 图文视频编辑器 文章发布",
"version": "1.01",
"description": "适合手机端,小程序的编辑器,支持文字,图片,视频,没有太多复杂臃肿的功能,容易操作。安装更简单,为你省去时间。",
"keywords": [
"编辑器",
"图文视频编辑"
]
}

View File

@ -897,6 +897,13 @@
"enablePullDownRefresh": true,
"navigationBarTitleText": "评论列表"
}
},
{
"path": "form/form",
"style": {
"enablePullDownRefresh": true,
"navigationBarTitleText": "添加/编辑博文"
}
}
]
},

View File

@ -99,24 +99,9 @@
<!-- 三级导航 -->
<view v-if="(data_three_content || null) != null && (data_three_content.items || null) != null && data_three_content.items.length > 0" class="word-list scroll-view-horizontal">
<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'three-nav-item-' + nav_active_item_three_index">
<view
:class="'word-icon dis-inline-block text-size-xs round padding-top-xs padding-bottom-xs padding-left padding-right ' + (nav_active_item_three_index == -1 ? 'bg-main-light br-main-light cr-main' : 'br-grey cr-grey')"
:data-index="nav_active_index"
:data-itemtwoindex="nav_active_item_two_index"
:data-itemthreeindex="-1"
@tap="nav_event"
>全部</view
>
<view :class="'word-icon dis-inline-block text-size-xs round padding-top-xs padding-bottom-xs padding-left padding-right ' + (nav_active_item_three_index == -1 ? 'bg-main-light br-main-light cr-main' : 'br-grey cr-grey')" :data-index="nav_active_index" :data-itemtwoindex="nav_active_item_two_index" :data-itemthreeindex="-1" @tap="nav_event"></view>
<block v-for="(item, index) in data_three_content.items" :key="index">
<view
:class="'word-icon dis-inline-block text-size-xs round padding-top-xs padding-bottom-xs padding-left padding-right ' + (nav_active_item_three_index == index ? 'bg-main-light br-main-light cr-main' : 'br-grey cr-grey')"
:id="'three-nav-item-' + index"
:data-index="nav_active_index"
:data-itemtwoindex="nav_active_item_two_index"
:data-itemthreeindex="index"
@tap="nav_event"
>{{ item.name }}</view
>
<view :class="'word-icon dis-inline-block text-size-xs round padding-top-xs padding-bottom-xs padding-left padding-right ' + (nav_active_item_three_index == index ? 'bg-main-light br-main-light cr-main' : 'br-grey cr-grey')" :id="'three-nav-item-' + index" :data-index="nav_active_index" :data-itemtwoindex="nav_active_item_two_index" :data-itemthreeindex="index" @tap="nav_event">{{ item.name }}</view>
</block>
</scroll-view>
</view>
@ -158,17 +143,10 @@
</view>
</view>
<!-- 标签插件 -->
<view
v-if="(plugins_label_data || null) != null && plugins_label_data.data.length > 0"
:class="'plugins-label oh pa plugins-label-' + ((plugins_label_data.base.is_user_goods_label_icon || 0) == 0 ? 'text' : 'img') + ' plugins-label-' + (plugins_label_data.base.user_goods_show_style || 'top-left')"
>
<view v-if="(plugins_label_data || null) != null && plugins_label_data.data.length > 0" :class="'plugins-label oh pa plugins-label-' + ((plugins_label_data.base.is_user_goods_label_icon || 0) == 0 ? 'text' : 'img') + ' plugins-label-' + (plugins_label_data.base.user_goods_show_style || 'top-left')">
<block v-for="(lv, li) in plugins_label_data.data" :key="li">
<view v-if="(lv.goods_ids || null) != null && lv.goods_ids.indexOf(item.id) != -1" class="lv dis-inline-block va-m" :data-value="(plugins_label_data.base.is_user_goods_label_url || 0) == 1 ? lv.url || '' : ''" @tap="url_event">
<view
v-if="(plugins_label_data.base.is_user_goods_label_icon || 0) == 0"
class="round cr-white bg-main text-size-xs fl"
:style="((lv.bg_color || null) != null ? 'background-color:' + lv.bg_color + ' !important;' : '') + ((lv.text_color || null) != null ? 'color:' + lv.text_color + ' !important;' : '')"
>
<view v-if="(plugins_label_data.base.is_user_goods_label_icon || 0) == 0" class="round cr-white bg-main text-size-xs fl" :style="((lv.bg_color || null) != null ? 'background-color:' + lv.bg_color + ' !important;' : '') + ((lv.text_color || null) != null ? 'color:' + lv.text_color + ' !important;' : '')">
{{ lv.name }}
</view>
<image v-else class="dis-block" :src="lv.icon" mode="scaleToFill"></image>
@ -588,10 +566,10 @@
}
//
if(this.is_first == 1) {
if (this.is_first == 1) {
var self = this;
var timer = setInterval(function() {
if(self.search_height == 0) {
var timer = setInterval(function () {
if (self.search_height == 0) {
self.search_height_computer();
} else {
clearInterval(timer);
@ -1258,14 +1236,17 @@
//
search_height_computer() {
const query = uni.createSelectorQuery();
query.select('.nav-search').boundingClientRect((res) => {
if ((res || null) != null) {
//
this.setData({
search_height: res.height,
});
}
}).exec();
query
.select('.nav-search')
.boundingClientRect((res) => {
if ((res || null) != null) {
//
this.setData({
search_height: res.height,
});
}
})
.exec();
},
},
};

View File

View File

@ -0,0 +1,57 @@
<template>
<view>
<textImageVideoEditor ref="textImageVideoEditor" :list2="initEditorList" @addImage="addImage" @addVideo="addVideo" :showPreview="true" @preview="preview" completedText="下一步" @completed="completed"></textImageVideoEditor>
</view>
</template>
<script>
const app = getApp();
import textImageVideoEditor from '@/components/yyc-easy-editor/index.vue';
export default {
data() {
return {
initEditorList: [
{
type: 1,
content: '',
},
],
};
},
components: {
textImageVideoEditor,
},
onLoad(options) {},
methods: {
preview(data) {
console.log('预览preview', data);
},
completed(data) {
console.log('完成completed', data);
// data: {
// content: "",
// image: "",
// json: "",
// }
},
addImage() {
console.log('上传图片');
let _this = this;
//
//......
//imgurl
_this.$refs.textImageVideoEditor.addImageCompleted(imgurl);
},
addVideo() {
console.log('上传视频');
let _this = this;
//
//......
//videourl
_this.$refs.textImageVideoEditor.addVideoCompleted(videourl);
},
},
};
</script>
<style>
@import './form.css';
</style>

View File

@ -3,7 +3,7 @@
<!-- 导航 -->
<view class="nav-base bg-white">
<block v-for="(item, index) in nav_status_list" :key="index">
<view :class="'item fl tc cr-grey ' + (nav_status_index == index ? 'cr-main' : '')" :data-index="index" @tap="nav_event">{{ item.name }}</view>
<view :class="'item fl tc cr-grey ' + (nav_status_index == index ? 'cr-main nav-active-line' : '')" :data-index="index" @tap="nav_event">{{ item.name }}</view>
</block>
</view>

View File

@ -3,7 +3,7 @@
<!-- 导航 -->
<view class="nav-base bg-white">
<block v-for="(item, index) in nav_status_list" :key="index">
<view :class="'item fl tc cr-grey ' + (nav_status_index == index ? 'cr-main' : '')" :data-index="index" @tap="nav_event">{{ item.name }}</view>
<view :class="'item fl tc cr-grey ' + (nav_status_index == index ? 'cr-main nav-active-line' : '')" :data-index="index" @tap="nav_event">{{ item.name }}</view>
</block>
</view>

View File

@ -3,7 +3,7 @@
<!-- 导航 -->
<view class="nav-base bg-white">
<block v-for="(item, index) in nav_type_list" :key="index">
<view :class="'item fl tc ' + (nav_type_index == index ? 'cr-main' : 'cr-grey')" :data-index="index" @tap="nav_event">{{ item.name }}</view>
<view :class="'item fl tc ' + (nav_type_index == index ? 'cr-main nav-active-line' : 'cr-grey')" :data-index="index" @tap="nav_event">{{ item.name }}</view>
</block>
</view>

View File

@ -4,4 +4,14 @@
.data-list .item .base .avatar {
width: 40rpx;
height: 40rpx !important;
}
/*
*
*/
scroll-view ::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}

View File

@ -1,13 +1,13 @@
<template>
<view :class="theme_view">
<!-- 导航 -->
<view class="nav-base bg-white scroll-view-horizontal padding-horizontal-main">
<scroll-view :scroll-x="true">
<block v-for="(item, index) in nav_type_list" :key="index">
<view :class="'item dis-inline-block margin-right-lg ' + (nav_type_index == index ? 'cr-main' : 'cr-grey')" :data-index="index" @tap="nav_event">{{ item.name }}</view>
</block>
</scroll-view>
</view>
<!-- 导航 -->
<view class="nav-base bg-white scroll-view-horizontal padding-horizontal-main">
<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + nav_type_index" class="top-nav-scroll">
<block v-for="(item, index) in nav_type_list" :key="index">
<view :class="'item dis-inline-block margin-right-lg ' + (nav_type_index == index ? 'cr-main nav-active-line' : 'cr-grey')" :id="'one-nav-item-' + index" :data-index="index" @tap="nav_event">{{ item.name }}</view>
</block>
</scroll-view>
</view>
<!-- 数据列表 -->
<scroll-view :scroll-y="true" class="scroll-box scroll-box-ece-nav" @scrolltolower="scroll_lower" lower-threshold="60">
@ -60,15 +60,16 @@ export default {
data_list_loding_status: 1,
data_bottom_line_status: false,
data_is_loading: 0,
params: null,
nav_type_list: [
{ name: "推广用户", value: 0 },
{ name: "已消费用户", value: 1 },
{ name: "未消费用户", value: 2 },
{ name: "新增客户", value: 3 },
{ name: "新增客户(有效)", value: 4 },
{ name: "新增客户(需复购)", value: 5 },
],
params: null,
nav_type_list: [
{ name: "推广用户", value: 0 },
{ name: "已消费用户", value: 1 },
{ name: "未消费用户", value: 2 },
{ name: "新增客户", value: 3 },
{ name: "新增客户(有效)", value: 4 },
{ name: "新增客户(需复购)", value: 5 },
],
//
nav_type_index: 0,
content_list: [
{ name: "消费订单", field: "order_count", unit: "", default: 0 },
@ -103,20 +104,20 @@ export default {
props: {},
onLoad(params) {
//
var nav_type_index = 0;
if (params.type != undefined) {
for (var i in this.nav_type_list) {
if (this.nav_type_list[i]["value"] == params.type) {
nav_type_index = i;
break;
}
}
}
this.setData({
params: params,
nav_type_index: nav_type_index,
});
//
var nav_type_index = 0;
if (params.type != undefined) {
for (var i in this.nav_type_list) {
if (this.nav_type_list[i]["value"] == params.type) {
nav_type_index = i;
break;
}
}
}
this.setData({
params: params,
nav_type_index: nav_type_index,
});
this.init();
},
@ -179,10 +180,10 @@ export default {
title: "加载中...",
});
//
//
var type = (this.nav_type_list[this.nav_type_index] || null) == null ? 0 : this.nav_type_list[this.nav_type_index]["value"];
var data = {
page: this.data_page,
page: this.data_page,
type: type,
};
@ -276,13 +277,13 @@ export default {
});
},
//
nav_event(e) {
this.setData({
nav_type_index: e.currentTarget.dataset.index || 0,
data_page: 1,
});
this.get_data_list(1);
//
nav_event(e) {
this.setData({
nav_type_index: e.currentTarget.dataset.index || 0,
data_page: 1,
});
this.get_data_list(1);
},
},
};