parent
892de10719
commit
a4e37b33fe
|
|
@ -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>
|
||||
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
|
||||
###########说明
|
||||
1. 图标使用uni-icons,没有的请到插件市场自行安装。
|
||||
|
||||
2. 示例代码如下:
|
||||
list2: 初始化数据(用于编辑)
|
||||
addImage: 图片上传
|
||||
addVideo: 视频上传
|
||||
showPreview: 是否显示预览
|
||||
preview: 返回预览的html文本
|
||||
completedText: 按钮文字
|
||||
completed: 编辑器返回数据json
|
||||
|
||||
3. 提示:rich-text不能解析视频,建议使用插件市场uparse。
|
||||
|
||||
4. 有问题,微信同QQ:736849829(请备注)。上传视频太大,不会分片,也可以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>
|
||||
|
||||
13
package.json
13
package.json
|
|
@ -1,5 +1,10 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"jweixin-module": "^1.6.0"
|
||||
}
|
||||
}
|
||||
"id": "yyc-easy-editor",
|
||||
"name": "超简洁 图文视频编辑器 文章发布",
|
||||
"version": "1.01",
|
||||
"description": "适合手机端,小程序的编辑器,支持文字,图片,视频,没有太多复杂臃肿的功能,容易操作。安装更简单,为你省去时间。",
|
||||
"keywords": [
|
||||
"编辑器",
|
||||
"图文视频编辑"
|
||||
]
|
||||
}
|
||||
|
|
@ -897,6 +897,13 @@
|
|||
"enablePullDownRefresh": true,
|
||||
"navigationBarTitleText": "评论列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "form/form",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTitleText": "添加/编辑博文"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue