简单的绑定发布事件-编程知识

在绑定事情之前，我们需要对我们的需求进行分析；判断我们是否需要同时存在条件。

发布动态的时候，分为以下三种情况：

① 输入了标题，没有图片，可以发布动态
②输入了图片，没有标题，也可发布动态
③如果只输入图片，或者标题，无法发布，需要两者都同时具备，才可以发布动态

一、实现思路

二、实现步骤

①view部分展示

②JavaScript 内容

③css中样式展示

三、效果展示

四、小结 + 注意事项

一、实现思路

1、将标题内容布局完成，给div中的发布绑定事件

二、实现步骤

①view部分展示

<template><view class="public"><view class="upload-imgs"><view style="padding: 32rpx 0;color: #333;font-weight: bold;">内容</view><!-- 图片的数量--><!-- <view style="color: #999;">{{ fileList.length }}/6</view> --></view><view><view class="goods-desc"><!-- 文本域  articleContent：绑定--><u--textarea v-model="articleContent" placeholder="请输入我的想法..." border="none" height="100"maxlength="-1" fontSize="28rpx" class="u--textarea"></u--textarea></view></view><!-- 上传图片 fileList：图片列表 --><view class="imgs-list"><u-upload :fileList="fileList" name="1" :maxCount="9" previewImage width="70px" height="70px"@afterRead="afterRead" @delete="deletePic" multiple :capture="['album', 'camera']" accept="image":sizeType="['camera','album']"><image src="../../static/other/upload-default.png" mode="aspectFill"style="width: 70px;height: 70px"></image></u-upload></view></view><!-- 发布按钮--><view class="company-btn"><view class="talk-btn" @click="talk">发布</view></view>
</template>

②JavaScript 内容

此文件由于效果展示冲突的原因，部分内容已注释，如需看效果，则可取消注释观看！

<script>import {send} from '@/XXX/XXX/XXX.js'  //引入js的内容export default {data() {return {articleContent: '',fileList: [],}},methods: {// 输入内容 绑定了发布async talk() {/*无论是标题文字为空，还是图片数量为0，都不可执行*//* 标题内容为为空 则不执行*/// if (this.articleContent === '' || this.articleContent === null) {//if (this.articleContent == '') {// 	uni.showToast({// 		title: '请输入内容！',// 		icon: 'error',// 		duration: 2000,// 	});// 	return;// }/*如果没有图片，请上传图片 if (this.fileList.length <= 0) 图片数量为0或者小于0 都不可执行*/// if (this.fileList.length <= 0) {// 	uni.showToast({// 		title: '请上传图片！',// 		icon: 'error',// 		duration: 2000,// 	});// 	return;// }/* if (this.fileList.length > 0 || this.articleContent !== '')图片为0 或者 标题内容为空，都可以执行发布，但是必须有一方，有内容，负责展示错误*/if (this.fileList.length > 0 || this.articleContent !== '') {let arr = this.fileList.map(v => v.img);let data = {articleContent: this.articleContent,articleImg: arr}// console.log(this.articleContent);// console.log(this.fileList)let res = await send(data);console.log(res, 'res')// 发布的内容 // if (res.code === 200) {uni.showToast({//title:res.msg,title: '发布成功',icon: 'success',duration: 2000,});// 同步执行，提示框还没有弹出就跳转了setTimeout(() => {uni.switchTab({url: '/pages/circle/circle'})}, 2000)} else {uni.showToast({title: '出错了~',icon: 'error',duration: 2000,});}},async afterRead(event) {// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式let lists = [].concat(event.file)let swiperListLen = this.fileList.lengthlists.map((item) => {this.fileList.push({...item,status: 'uploading',message: '上传中',})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url)// console.log('result: ',result);let item = this.fileList[swiperListLen]this.fileList.splice(swiperListLen, 1, Object.assign(item, {status: 'success',message: '',url: result.urlTotal,img: result.urlImg}))swiperListLen++}// console.log(this.fileList,'fileList')},// 删除图片deletePic(event) {this.fileList.splice(event.index, 1)},uploadFilePromise(url) {let thta = thisreturn new Promise((resolve, reject) => {let a = uni.uploadFile({url: config.baseUrl + '/app/upload/image',  //上传图片的接口filePath: url,name: 'file',fileType: 'image',header: {'content-type': 'multipart/form-data'},success: (res) => {console.log('res: ', res);let data = JSON.parse(res.data)console.log('data: ', data);let urls = data.data.path //let img = data.data.urllet urlObj = {urlTotal: urls,urlImg: img}// console.log("dataxxx", url) console.log(thta.fileList, 'aaa');resolve(urlObj)},fail(err) {console.log(err);}});})},},}
</script>

③css中样式展示

由于效果展示，所以page背景颜色被修改了，方便查看效果

<style>page {background-color: #f5f5f5;}
</style>
<style lang="scss" scoped>.public {background-color: #fff;padding: 24rpx;margin: 24rpx;border-radius: 8rpx;.upload-imgs {display: flex;align-items: center;justify-content: space-between;}.imgs-list {padding-bottom: 32rpx;display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;margin: 0 auto;}}.company-btn {position: fixed;bottom: 0;left: 0;z-index: 100;right: 0;display: flex;align-items: center;justify-content: center;height: 55px;background-color: #fff;padding-bottom: env(safe-area-inset-bottom); //适配 iPhone X 以上的手机.talk-btn {width: 640rpx;height: 80rpx;line-height: 80rpx;text-align: center;background: #f51515;border-radius: 80rpx;color: #fff;letter-spacing: 2rpx;}}
</style>