五.留言：
作者：互联网
1.留言展示页面的数据渲染：
查询对应留言墙数据库中的全部内容，利用微信的wx.for()方法展示结果集中全部的数据以相同的样式呈现。
<view class="center_1"><button bindtap="LOVE">写下心里的声音</button></view>
<!--信息 -->
<van-swipe-cell
id="swipe-cell2"
right-width="{{ 80}}"
name="示例"
bind:open="onOpen"
wx:for="{{ne}}"
>
<view class="page" >
<view class="out_2" >
<view class="line_1">
<image src="{{item.image_url}}"
mode="widthFix"></image>
<view class="line_2">
<view ></view><view><text>{{item.name}}</text></view>
</view>
</view>
<view class="line_3">
<view>留言：<text class="text_1">{{item.message}}</text></view>
<view class="xian_1"></view>
</view>
</view>
</view>
<view slot="right" class="van-swipe-cell__right"><view class="font" bindtap="delete" data-id="{{item._id}}">接单</view></view>
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
//调用云数据库
const DB= wx.cloud.database()
//查询数据
DB.collection("liuYan").get({
success:res=>{
// console.log(res.data)
that.setData({
ne:res.data
})
},fail:err=>{
console.log("无法得到数据")
}
})
},
2.信息输入页面的快捷输入：
运用了微信的checkbox-group和form组件，每次改变的数据都直接改变传入的值。依据key判断是对应json中的value，最后将数据添加到对应的数据库中。
<!--pages/order/message/message.wxml-->
<view class='message_nav'>
<form bindsubmit='FormSubmit'>
<view class='section'>
<textarea class='message1' type='text' placeholder="请选择或者输入捎话(60字以内)" maxlength='60' style="word-wrap:break-word" bindinput='bindTextAreaChange' value="{{message}}"></textarea>
</view>
<view class='fast'>快速捎话：</view>
<checkbox-group class="checkboxChange">
<view wx:for="{{msgData}}" wx:key="{{index}}" data-index="{{index}}" data-id="{{item.child_id}}" data-checked='{{item.checked}}' bindtap='click' >
<checkbox value='{{item.msg}}' class='item' checked='{{item.checked}}' >{{item.msg}}</checkbox>
</view>
</checkbox-group>
<button class='submit' bindtap='submit' style="position: relative; left: -6rpx; top: 484rpx">留言</button>
</form>
<!-- 图片 -->
<view class='pages'>
<view class='top'><text class='top_name'>添加图片：</text></view>
<!-- 图片 -->
<view class="images_box">
<block wx:key="imgbox" wx:for="{{imgbox}}">
<view class='img-box'>
<image class='img' src='{{item}}'></image>
<view class='img-delect' data-deindex='{{index}}' bindtap='imgDelete1'>
<image class='img' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F02%2F01%2F41%2F599d0bcab8424_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649139697&t=8366789671e3a34ac41d31ddc946f425'></image>
</view>
</view>
</block>
<view class='img-box' bindtap='addPic1' wx:if="{{imgbox.length<9}}">
<image class='img' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs.aigei.com%2Fprevfiles%2F6438a654b8ff491c9e55197d45ac1324.png%3Fe%3D1735488000%26token%3DP7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL%3A9zu9bpfop56MJvvo_RkePYkcvvM%3D&refer=http%3A%2F%2Fs.aigei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649053262&t=267cd2ed64b5ba9f83ef5d2550bb0243'></image>
</view>
</view>
</view>
<view class="out">
<view class="log"><input placeholder="留下你的名字再走吧" placeholder-style="color:black" disabled/></view>
<view class="log"> <input placeholder="啊 ，不会不知道可以匿名吧！！" bindinput="onName"/></view>
</view>
</view>
// pages/liuyan/liuyan.js
let url = "/pages/index/index?id="
const DB= wx.cloud.database().collection('liuYan')
let name1=""
Page({
// 得到收件人数据
onName(e){
name1 = e.detail.value;
return name1
},
/**
* 页面的初始数据
*/
data: {
name1:"",
a:"",
imgbox: [],//选择图片
fileIDs: [],//上传云存储后的返回值
msgData:
[
{
child_id: 1,
msg:
"那样的柔软诵着手中月镜中花，然后守着一个人得天荒地老。",
checked:''
},//双引号
{
child_id: 2,
msg:
"爱与被爱的差别，大概就是玩捉迷藏的时候我找不到你，就会着急，而你找不到我，你就会回家。",
checked: ''
},
{
child_id: 3,
msg:
"如果爱情不是我们所能赋予的寄托，一早就应该拒绝彼此的要求。",
checked: ''
},
{
child_id: 4,
msg:
"我对这个小程序的意见有：",
checked: ''
},
{
child_id: 5,
msg:
"我想对他说",
checked: ''
},
{
child_id: 6,
msg:
"我想对她说：",
checked:''
}
],
message: '',
message_id:[],
},//图片
// 删除照片 &&
imgDelete1: function (e) {
let that = this;
let index = e.currentTarget.dataset.deindex;
let imgbox = this.data.imgbox;
imgbox.splice(index, 1)
that.setData({
imgbox: imgbox
});
},
// 选择图片 &&&
addPic1: function (e) {
var imgbox = this.data.imgbox;
console.log(imgbox)
var that = this;
var n = 5;
if (5 > imgbox.length > 0) {
n = 5 - imgbox.length;
} else if (imgbox.length == 5) {
n = 1;
}
wx.chooseImage({
count: n, // 默认9，设置图片张数
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// console.log(res.tempFilePaths)
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
if (imgbox.length == 0) {
imgbox = tempFilePaths
} else if (5 > imgbox.length) {
imgbox = imgbox.concat(tempFilePaths);
}
that.setData({
imgbox: imgbox
});
}
})
},
//图片
imgbox: function (e) {
this.setData({
imgbox: e.detail.value
})
},
// 留言
bindTextAreaChange: function(e){
var that = this
that.setData({
message:e.detail.value
})
},
click:function(e){
var that = this;
let id = e.currentTarget.dataset.id;
let index = e.currentTarget.dataset.index;
var value = [];
value = this.data.message_id;
var array_i = this.in_array(id, value);
var chekeds = that.data.msgData;
var msg = chekeds[index].msg;
var message = that.data.message;
if (!e.currentTarget.dataset.checked){
chekeds[index].checked = true
that.setData({
message: message + msg
})
}else{
chekeds[index].checked = false
that.setData({
message: message.replace(msg, '')
})
}
that.setData({
msgData: chekeds
})
if (array_i) {
value.splice(array_i, 1);
} else {
value.push(id);
}
this.setData({
message_id: value,
})
},
in_array: function (search, array) {
for (var i in array) {
if (array[i] == search) {
return i;
}
}
return false;
},
submit:function(e){
var value = [];
var message = this.data.message;
var msgData = this.data.msgData;
var a1 =""
if (message == '' && !value.length) {
wx.showToast({
title: '暂无选择项目',
icon:'none'
})
return;
}else if (!this.data.imgbox.length) {
wx.showToast({
icon: 'none',
title: '图片类容为空'
});
}else{
//message 这就是数据
a1 = message;
console.log(a1)
//上传图片到云存储
wx.showLoading({
title: '上传中',
})
let promiseArr = [];//图片传输问题只能有一张this.data.imgbox.length;
for (let i = 0; i < 1; i++) {
promiseArr.push(new Promise((reslove, reject) => {
let item = this.data.imgbox[i];
let suffix = /\.\w+$/.exec(item)[0];//正则表达式返回文件的扩展名
wx.cloud.uploadFile({
cloudPath: new Date().getTime() + suffix, // 上传至云端的路径
filePath: item, // 小程序临时文件路径
success: res => {
this.setData({
fileIDs: this.data.fileIDs.concat(res.fileID)
});
var a= res.fileID;
console.log(res.fileID)//输出上传后图片的返回地址
//添加数据
DB.add({
data:{
message:a1,
image_url: a,
name:name1
},success(res){
id=res._id
console.log(id)
url1= url+id_
console.log(url)
console.log("添加成功",res);
}
}),
wx.switchTab({
url: url,
})
reslove();
wx.hideLoading();
wx.showToast({
title: "上传成功",
})
},
fail: res=>{
wx.hideLoading();
wx.showToast({
title: "上传失败",
})
}
})
}));
}
Promise.all(promiseArr).then(res => {//等数组都做完后做then方法
console.log("图片上传完成后再执行")
this.setData({
imgbox:[]
})
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
/* pages/order/message/message.wxss */
/*捎话 */
.message_nav{
position: fixed;
width: 100%;
}
.section{
width:96%;
height:220rpx;
margin-left:5px;
}
.message1{
width:96%;
height:210rpx;
margin-top: 30rpx;
font-size: 68%;
margin-left:20px;
}
.circle{
height:35rpx;
width:35rpx;
border-radius: 50%;
border: 1rpx solid #ccc;
display:inline-block;
margin:28rpx 45rpx auto 50rpx;
}
.fast{
position:relative;
top:-50rpx;
font-size:90%;
background:#f4f4f4;
line-height:100rpx;
text-indent:2em;
}
.item{
position:relative;
border-bottom:1px solid #f4f4f4;
padding-bottom:10px;
top: -60rpx;
}
.item:hover{
background:pink;
color: #f4f4f4;
}
.message_font{
font-size:80%;
font-family:"微软雅黑";
font-weight:blod;
display:inline-block;
position:relative;
top:-5rpx;
}
.submit{
outline:none;
border:none;
list-style: none;
width:100%;
height: 100rpx;
background: #fed1d6;
position: relative;
top:160rpx;
line-height: 100rpx;
-webkit-border-radius: 1rpx;
-moz-border-radius: 1rpx;
border-radius: 1rpx;
-webkit-appearance : none ;
}
button::after{
border:none;
}
.item{
position:relative;
border-bottom:1px solid #f4f4f4;
padding-top:5px;
top: -60rpx;
width:100%;
padding-left: 45rpx;
}
.checkboxChange{
position:relative;
top:15rpx;
font-size: 68%;
border-radius: 50%;
}
/* .circle{
border-radius: 50%;
} */
/* 添加图片 */
/* 图片 */
.top_name{
padding: 20rpx 20rpx;
}
.images_box{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
background-color: white;
border-radius: 10rpx;
}
.img-box{
border: 5rpx;
border-style: solid;
border-color: rgba(163, 162, 162, 0.452);
width: 200rpx;
height: 200rpx;
margin-left: 35rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
position: relative;
border-radius: 10rpx;
}
/* 删除图片 */
.img-delect{
width:50rpx;
height:50rpx;
border-radius:50%;
position:absolute;
right:-20rpx;
top:-20rpx;
}
.img{
width: 100%;
height: 100%;
}
.jiage{
height: 60rpx;
width: 90%;
margin-left: 5%;
margin-right: 5%;
background-color: white;
display: flex;
justify-content: flex-start;
}
.rmb{
width: 280rpx;
border: 2rpx solid rgb(199, 197, 197);
}
button{
margin-top: 20rpx;
background-color: green;
}
.radio-group{
display: flex;
}
/* 名字 */
.out{
padding: 0rpx 20rpx;
box-sizing: border-box;
border: 1px solid rgb(216, 215, 215);
}
标签：function,imgbox,留言,var,message,border,id 来源： https://www.cnblogs.com/HJZ114152/p/16081245.html