寫作頁面布局
~~~
<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 多版本控制