写作页面布局
~~~
<template>
<view class="wrap">
<view class="write_title">
<input type="text" v-model="title" placeholder="请输入标题" />
</view>
<!-- 内容展示区 -->
<view class="artList">
<block v-for="(item, index) in artList" :key="index">
<view class="item" v-if="item.type == 'image'"><image :src="item.content" :data-index="index" mode="widthFix" @tap="removeImg" /></view>
<view class="item" v-if="item.type == 'text'">
<textarea :value="item.content" placeholder="" v-model="artList[index].content" />
<view :data-index="index" class="deleteText" @tap="deleteText">删除</view>
</view>
</block>
</view>
<!-- 输入区 -->
<form @submit="submit">
<view class="inputArea">
<view class="addImg" @tap="addImg">+图片</view>
<view class="addText">
<textarea name="artText" maxlength="-1" v-model="inputContent" placeholder="请输入文本" />
<button type="primary" form-type="submit">添加</button>
</view>
</view>
</form>
<!-- 选择分类 -->
<view class="art-cate">
<view>文章分类</view>
<view class="">
<picker mode="selector" :range="caties" @change="cateChange">
<view>{{caties[currentCateIndex]}}</view>
</picker>
</view>
</view>
<!-- 提交按钮 -->
<view class="submitNow" v-if="artList.length > 0" @tap="submitNow">发布文章</view>
</view>
</template>
<script>
var _self, loginRes;
var signModel = require('../../commons/sign.js');
export default {
data() {
return {
title : '',
artList : [],
inputContent : "",
needUploadImg : [],
uploadIndex : 0,
//分类
caties : ['点击选择'],
currentCateIndex : 0,
catiesFromApi : [],
// 记录真实选择的api接口数据的分类id
sedCateIndex : 0
};
},
onLoad : function() {
_self = this;
signModel.sign(this.apiServer);
loginRes = this.checkLogin('../write/write', '2');
if(!loginRes){return false;}
// 加载文章分类
uni.request({
url: this.apiServer+'category&m=index',
method: 'GET',
success: res => {
if(res.data.status == 'ok'){
// 把数据格式整理为 picker 支持的格式 ['分类名', ...]
var categories = res.data.data;
for(var k in categories){
_self.caties.push(categories[k]);
}
// 记录分类信息
_self.catiesFromApi = categories;
}
}
});
},
methods:{
cateChange : function(e){
var sedIndex = e.detail.value;
this.currentCateIndex = sedIndex;
// 获取选择的分类名称
if(sedIndex < 1){return ;}
var cateName = this.caties[sedIndex];
for(var k in this.catiesFromApi){
if(cateName == this.catiesFromApi[k]){
this.sedCateIndex = k;
break;
}
}
this.currentCateIndex = sedIndex;
},
removeImg : function(e){
var index = e.currentTarget.dataset.index;
uni.showModal({
content:"确定要删除此图片吗",
title:'提示',
success(e) {
if (e.confirm) {
_self.artList.splice(index, 1);
}
}
});
},
deleteText : function(e){
var index = e.currentTarget.dataset.index;
uni.showModal({
content:"确定要删除吗",
title:'提示',
success(e) {
if (e.confirm) {
_self.artList.splice(index, 1);
}
}
});
},
submitNow : function(){
// 数据验证
if(this.title.length < 2){uni.showToast({title:'请输入标题', icon:"none"}); return ;}
if(this.artList.length < 1){uni.showToast({title:'请填写文章内容', icon:"none"}); return ;}
if(this.sedCateIndex < 1){uni.showToast({title:'请选择分类', icon:"none"}); return ;}
// 上传图片 一次一个多次上传 [ 递归函数 ]
// 上传完成后整体提交数据
// 首先整理一下需要上传的图片
// this.needUploadImg = [{tmpurl : 临时地址, index : 数据索引}]
this.needUploadImg = [];
for(var i = 0; i < this.artList.length; i++){
if(this.artList[i].type == 'image'){
this.needUploadImg.push({"tmpurl" : this.artList[i].content , "indexID" : i});
}
}
this.uploadImg();
},
uploadImg : function(){
// 如果没有图片 或者已经上传完成 则执行提交
if(this.needUploadImg.length < 1 || this.uploadIndex >= this.needUploadImg.length){
uni.showLoading({title:"正在提交"});
// 将信息整合后提交到服务器
var sign = uni.getStorageSync('sign');
uni.request({
url: this.apiServer + 'art&m=add',
method: 'POST',
header: {'content-type' : "application/x-www-form-urlencoded"},
data: {
title : _self.title,
content : JSON.stringify(_self.artList),
uid : loginRes[0],
random : loginRes[1],
cate : _self.sedCateIndex,
sign : sign
},
success: res => {
console.log(res);
if(res.data.status == 'ok'){
uni.showToast({title:"提交成功", icon:"none"});
_self.artList = [];
// 清空数据
signModel.sign(_self.apiServer);
// 防止数据缓存
_self.currentCateIndex = 0;
_self.sedCateIndex = 0;
_self.needUploadImg = [];
_self.title = '';
setTimeout(function(){
uni.switchTab({
url:'../my/my'
})
}, 1000);
}else{
uni.showToast({title:res.data.data, icon:"none"});
}
},
fail: (res) => {
},
complete: () => {
}
});
return ;
}
// 上传图片
uni.showLoading({title:"上传图片"});
var uploader = uni.uploadFile({
url : _self.apiServer+'uploadImg&m=index',
filePath : _self.needUploadImg[_self.uploadIndex].tmpurl,
name : 'file',
success: (uploadFileRes) => {
uploadFileRes = JSON.parse(uploadFileRes.data);
if(uploadFileRes.status != 'ok'){
console.log(uploadFileRes);
uni.showToast({title:"上传图片失败,请重试!", icon:"none"});
return false;
}
// 将已经上传的文件地址赋值给文章数据
var index = _self.needUploadImg[_self.uploadIndex].indexID;
_self.artList[index].content = _self.staticServer + uploadFileRes.data;
console.log(_self.artList);
_self.uploadIndex ++;
// 递归上传
setTimeout(function(){_self.uploadImg();}, 1000);
},
fail: () => {
uni.showToast({title:"上传图片失败,请重试!", icon:"none"});
}
})
},
submit : function(res){
var content = res.detail.value.artText;
if(content.length < 1){uni.showToast({title:"请输入内容",icon:'none'}); return ;}
this.artList.push({"type":"text", "content" : content});
this.inputContent = '';
},
addImg : function(){
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
success: function(res) {
_self.artList.push({"type":"image", "content" : res.tempFilePaths[0]})
}
})
}
}
}
</script>
<style></style>
~~~
**editArt.vue 代码**
~~~
<template>
<view class="wrap">
<view class="write_title">
<input type="text" v-model="title" placeholder="请输入标题" />
</view>
<!-- 内容展示区 -->
<view class="artList">
<block v-for="(item, index) in artList" :key="index">
<view class="item" v-if="item.type == 'image'"><image :src="item.content" :data-index="index" mode="widthFix" @tap="removeImg" /></view>
<view class="item" v-if="item.type == 'text'">
<textarea :value="item.content" placeholder="" v-model="artList[index].content" />
<view :data-index="index" class="deleteText" @tap="deleteText">删除</view>
</view>
</block>
</view>
<!-- 输入区 -->
<form @submit="submit">
<view class="inputArea">
<view class="addImg" @tap="addImg">+图片</view>
<view class="addText">
<textarea name="artText" maxlength="-1" v-model="inputContent" placeholder="请输入文本" />
<button type="primary" form-type="submit">添加</button>
</view>
</view>
</form>
<!-- 选择分类 -->
<view class="art-cate">
<view>文章分类</view>
<view class="">
<picker mode="selector" :range="caties" @change="cateChange">
<view>{{caties[currentCateIndex]}}</view>
</picker>
</view>
</view>
<!-- 提交按钮 -->
<view class="submitNow" v-if="artList.length > 0" @tap="submitNow">编辑文章</view>
</view>
</template>
<script>
var artId, loginRes, _self;
var signModel = require('../../commons/sign.js');
export default {
data() {
return {
title : '',
artList : [],
inputContent : "",
needUploadImg : [],
uploadIndex : 0,
//分类
caties : ['点击选择'],
currentCateIndex : 0,
catiesFromApi : [],
// 记录真实选择的api接口数据的分类id
sedCateIndex : 0
};
},
onLoad :function(options){
artId = options.artId;
_self = this;
signModel.sign(this.apiServer);
loginRes = this.checkLogin('../my/my', '2');
if(!loginRes){return false;}
// 加载文章默认值
uni.request({
url: this.apiServer+'art&m=info&artid='+artId,
method: 'GET',
data: {},
success: res => {
var art = res.data.data;
// 文章内容转换并展示
var artContent = art.art_content;
artContent = JSON.parse(artContent);
_self.artList = artContent;
// 默认值赋值
this.title = art.art_title;
// 加载文章分类并设置默认值
uni.request({
url: _self.apiServer+'category&m=index',
method: 'GET',
success: res => {
if(res.data.status == 'ok'){
// 把数据格式整理为 picker 支持的格式 ['分类名', ...]
var categories = res.data.data;
for(var k in categories){
_self.caties.push(categories[k]);
}
// 记录分类信息
_self.catiesFromApi = categories;
// 获取当前分类的默认值
_self.sedCateIndex = art.art_cate;
// 对应的查找picker的默认值
var cateName = categories[art.art_cate];
for(var i = 0; i < _self.caties.length; i++){
if(cateName == _self.caties[i]){
_self.currentCateIndex = i;
break;
}
}
console.log(_self.currentCateIndex);
}
}
});
}
});
},
methods:{
submitNow : function(){
// 数据验证
if(this.title.length < 2){uni.showToast({title:'请输入标题', icon:"none"}); return ;}
if(this.artList.length < 1){uni.showToast({title:'请填写文章内容', icon:"none"}); return ;}
if(this.sedCateIndex < 1){uni.showToast({title:'请选择分类', icon:"none"}); return ;}
// 上传图片 一次一个多次上传 [ 递归函数 ]
// 上传完成后整体提交数据
// 首先整理一下需要上传的图片
// this.needUploadImg = [{tmpurl : 临时地址, index : 数据索引}]
this.needUploadImg = [];
for(var i = 0; i < this.artList.length; i++){
if(this.artList[i].type == 'image'){
if(this.artList[i].content.indexOf('192.168.31.') == -1){
this.needUploadImg.push({"tmpurl" : this.artList[i].content , "indexID" : i});
}
}
}
this.uploadImg();
},
uploadImg : function(){
// 如果没有图片 或者已经上传完成 则执行提交
if(this.needUploadImg.length < 1 || this.uploadIndex >= this.needUploadImg.length){
uni.showLoading({title:"正在提交"});
// 将信息整合后提交到服务器
var sign = uni.getStorageSync('sign');
uni.request({
url: this.apiServer + 'art&m=edit&artid='+artId,
method: 'POST',
header: {'content-type' : "application/x-www-form-urlencoded"},
data: {
title : _self.title,
content : JSON.stringify(_self.artList),
uid : loginRes[0],
random : loginRes[1],
cate : _self.sedCateIndex,
sign : sign
},
success: res => {
if(res.data.status == 'ok'){
uni.showToast({title:"提交成功", icon:"none"});
setTimeout(function(){
uni.switchTab({
url:'../my/my'
})
}, 1000);
}else{
uni.showToast({title:res.data.data, icon:"none"});
}
}
});
return ;
}
// 上传图片
uni.showLoading({title:"上传图片"});
var uploader = uni.uploadFile({
url : _self.apiServer+'uploadImg&m=index',
filePath : _self.needUploadImg[_self.uploadIndex].tmpurl,
name : 'file',
success: (uploadFileRes) => {
uploadFileRes = JSON.parse(uploadFileRes.data);
if(uploadFileRes.status != 'ok'){
console.log(uploadFileRes);
uni.showToast({title:"上传图片失败,请重试!", icon:"none"});
return false;
}
// 将已经上传的文件地址赋值给文章数据
var index = _self.needUploadImg[_self.uploadIndex].indexID;
_self.artList[index].content = _self.staticServer + uploadFileRes.data;
console.log(_self.artList);
_self.uploadIndex ++;
// 递归上传
setTimeout(function(){_self.uploadImg();}, 1000);
},
fail: () => {
uni.showToast({title:"上传图片失败,请重试!", icon:"none"});
}
})
},
cateChange : function(e){
var sedIndex = e.detail.value;
this.currentCateIndex = sedIndex;
// 获取选择的分类名称
if(sedIndex < 1){return ;}
var cateName = this.caties[sedIndex];
for(var i = 0; i < this.catiesFromApi.length; i++){
if(cateName == this.catiesFromApi[i].cate_name){
this.sedCateIndex = this.catiesFromApi[i].cate_id;
break;
}
}
this.currentCateIndex = sedIndex;
console.log(this.sedCateIndex);
},
removeImg : function(e){
console.log(e);
var index = e.currentTarget.dataset.index;
uni.showModal({
content:"确定要删除此图片吗",
title:'提示',
success(e) {
if (e.confirm) {
_self.artList.splice(index, 1);
}
}
});
},
deleteText : function(e){
var index = e.currentTarget.dataset.index;
uni.showModal({
content:"确定要删除吗",
title:'提示',
success(e) {
if (e.confirm) {
_self.artList.splice(index, 1);
}
}
});
},
submit : function(res){
var content = res.detail.value.artText;
if(content.length < 1){uni.showToast({title:"请输入内容",icon:'none'}); return ;}
this.artList.push({"type":"text", "content" : content});
this.inputContent = '';
},
addImg : function(){
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
success: function(res) {
_self.artList.push({"type":"image", "content" : res.tempFilePaths[0]})
}
});
}
}
}
</script>
<style>
</style>
~~~
- 空白目录
- thinkcmf的权限管理
- thinkcmf+unicmf添加页面
- Thinkphp5做后台 Uni-app做前台解决跨域问题
- 组件
- h5跨域-uniapp
- thinkphp5 auth 教程
- thinkphp5Auth类
- uniapp添加与编辑的差别
- 常见的请求方式
- uni 单选回显数据_uniapp 页面跳转传值和接收
- uni-app 单选/多选/滑动 demo
- 关于uniapp checkbox多选框如何传值传数据
- uniApp 多选框checkbox ，判断是否选中
- uniapp添加复选框和获取复选框的值
- uni-app中全选多选单选
- uniapp多选框CheckBox 数据接收
- uniapp下拉列表单选框复选框实战demo(编辑或详情页)
- uni-data-CheckBox-OK
- js 字符串数组转换成数字数组
- js把字符串转为数组对象
- js中数组对象字符串的相互转换
- JS怎么把字符串数组转换成整型数组
- 小程序开发
- tp5.1跨域请求
- uniapp-h5跨域
- 新增
- order
- uni-app中调取接口的三种方式与封装uni.request()
- uView-checkbox
- 给u-view的u-select赋值
- uView-下拉框、复选框、单选框 数据发送及接收
- CURD操作
- thinkphp5.1增删改查
- TP5.1添加数据成功之后返回自增主键id
- Thinkphp实战之Request默认值except only 以及过滤参
- uni-app跨域解决方案
- thinkphp5.1+uni-app接口开发中跨域问题解决方案
- tp6 + uniapp 前后端跨域解决方案
- uniapp-token相关
- uniapp request请求封装包含token兼容多端，简单易用
- CORS.php
- ThinkPHP6 API开发前后端分离用户信息保存在后端的方法
- thinkphp的jwt（JSON Web Token）身份验证
- thinkphp6增删改查
- PHP模拟GET,POST请求
- php模拟get、post发送请求的6种方法
- thinkphp6
- uniapp封装网络请求
- thinkphp6搭建后端api接口jwt-auth
- uniapp实现APP微信登录流程
- [uni-app] 中保持用户登录状态
- 详解vue中localStorage的使用方法
- vue 实现通过vuex 存储值 在不同界面使用
- dispatch：异步操作，数据提交至 actions ，可用于向后台提交数据
- ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作
- tp6错误集
- TP6 模型插入/添加数据，自动插入时间(自动时间戳)
- 手机不开机维修思路
- thinkphp6解决vue跨域问题
- 从0基础获取短视频去水印解析接口制作
- thinkphp5 删除缓存
- thinkPHP，怎么把json文件里面的数据导入数据库
- 数字转字符php
- php – 直接用curl下载远程文件
- thinkphp – 直接用curl下载远程文件
- apiAdmin安装
- echart
- thinkphp开发小程序推广分享带参数二维码生成
- php同比增加函数
- PHP获取同比上周、上一个月，上一个季度，去年时间区间
- “前3秒”金句100例，赶紧收藏起来！
- PHP配合微信公众号生成推广二维码
- thinkphp5+php微信公众号二维码扫码关注推广二维码事件实现
- 获取当前时间上一周的开始时间和结束时间
- TP6 查找指定工作日
- PHP 获取当天、近一周、本周、上月、本月、本季度、上季度时间方法大全
- php获取今日、昨日、本周、本月 日期方法
- Tp5+mysql按年季度月周日小时查询时无数据的时间段补0方法
- mysql按天统计的时候,该天没有数据也要统计为0
- 列出一星期的日期 无数据补0
- thinkphp6本周 上周 周一 周末日期
- 补全日期 无数据补0
- php+pv统计代码实现,Laravel 10 行代码实现简单的网站 pv uv 统计
- 通过API获取ip地址以及城市和运营商
- 获取访客信息
- 13行代码实现微信小程序设置概率触发激励视频阅读文章
- uniapp 微信小程序 获取场景值和场景值个性化参数
- 微信小程序分享小程序码的生成（带参数）以及参数的获取
- 小程序推广分享带参数二维码生成
- uniapp微信小程序生成对应页面二维码
- uniapp获取当前页面url
- uniapp微信小程序--微信登录
- 微信小程序，生成小程序码中scene参数的存放和获取问题
- uni-app 微信小程序生成二维码带参数
- uni-app 微信小程序如何把图片保存到本地相册？
- thinkPHP5使用assign（）传递富文本，前端解析成HTML标签
- tp6解析编辑器里面的html标签原样输出
- PHP判断url链接是否被百度收录
- 微擎安装模块时提示 Failed to connect to we7.rewlkj.com port 80: Timed out
- 小程序码生成
- thinkphp开发小程序推广分享带参数二维码生成0
- tp3.2伪静态
- apiadmin安装教程-2022.8更新
- autojs事件代码
- uuuu
- thinkphp6: API 多版本控制