lipengcheng
3 months ago
13 changed files with 614 additions and 76 deletions
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
@ -0,0 +1,174 @@ |
|||
// subpages/bsPage/bsPage/bsPage.js
|
|||
const options = [{ |
|||
text: '浙江省', |
|||
value: '330000', |
|||
}, |
|||
{ |
|||
text: '江苏省', |
|||
value: '320000', |
|||
}, |
|||
]; |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
show: false, |
|||
options, |
|||
fieldValue: '', |
|||
cascaderValue: '', |
|||
questionText: '', |
|||
fileList: [{ |
|||
url: 'https://img.yzcdn.cn/vant/leaf.jpg', |
|||
name: '图片1', |
|||
}, |
|||
// Uploader 根据文件后缀来判断是否为图片文件
|
|||
// 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
|
|||
{ |
|||
url: 'http://iph.href.lu/60x60?text=default', |
|||
name: '图片2', |
|||
isImage: true, |
|||
// deletable: true,
|
|||
}, |
|||
], |
|||
}, |
|||
|
|||
onButtonTap: function () { |
|||
wx.showToast({ |
|||
title: '按钮被点击了', |
|||
icon: 'none' |
|||
}); |
|||
}, |
|||
deleteData(event) { |
|||
// 删除
|
|||
console.log(event.detail.index) |
|||
let newFileList = this.data.fileList.slice(); |
|||
newFileList.splice(event.detail.index, 1); |
|||
this.setData({ |
|||
fileList: newFileList |
|||
}); |
|||
}, |
|||
afterRead(event) { |
|||
const { |
|||
file |
|||
} = event.detail; |
|||
console.log(file, 66) |
|||
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
|||
wx.uploadFile({ |
|||
url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
|
|||
filePath: file.url, |
|||
name: 'file', |
|||
formData: { |
|||
user: 'test' |
|||
}, |
|||
success(res) { |
|||
// 上传完成需要更新 fileList
|
|||
const { |
|||
fileList = [] |
|||
} = this.data; |
|||
fileList.push({ |
|||
...file, |
|||
url: res.data |
|||
}); |
|||
this.setData({ |
|||
fileList |
|||
}); |
|||
}, |
|||
}); |
|||
}, |
|||
beforeRead(event) { |
|||
const { |
|||
file, |
|||
callback |
|||
} = event.detail; |
|||
callback(file.type === 'image'); |
|||
}, |
|||
onInput(e) { |
|||
this.setData({ |
|||
questionText: e.detail.value, |
|||
}); |
|||
// console.log(this.data.questionText, 666)
|
|||
}, |
|||
onClick() { |
|||
this.setData({ |
|||
show: true, |
|||
}); |
|||
}, |
|||
onClose() { |
|||
this.setData({ |
|||
show: false, |
|||
}); |
|||
}, |
|||
|
|||
onFinish(e) { |
|||
const { |
|||
selectedOptions, |
|||
value |
|||
} = e.detail; |
|||
const fieldValue = selectedOptions |
|||
.map((option) => option.text || option.name) |
|||
.join('/'); |
|||
this.setData({ |
|||
fieldValue, |
|||
cascaderValue: value, |
|||
}) |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
wx.setNavigationBarTitle({ |
|||
title: '报事' |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,9 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"van-cell": "@vant/weapp/cell/index", |
|||
"van-cell-group": "@vant/weapp/cell-group/index", |
|||
"van-popup": "@vant/weapp/popup/index", |
|||
"van-cascader": "@vant/weapp/cascader/index", |
|||
"van-uploader": "@vant/weapp/uploader/index" |
|||
} |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
<!--subpages/bsPage/bsPage/bsPage.wxml--> |
|||
<view class="bsPageCont"> |
|||
<image class="bsImg" src="../../images/bsBac.png" /> |
|||
<view class="bsTitle"> |
|||
<van-cell-group class="bsCon"> |
|||
<van-cell title="反馈类型" value="{{fieldValue}}" is-link readonly bind:tap="onClick" /> |
|||
</van-cell-group> |
|||
<van-popup show="{{ show }}" round position="bottom"> |
|||
<van-cascader wx:if="{{ show }}" value="{{ cascaderValue }}" title="请选择类型" options="{{ options }}" bind:close="onClose" bind:finish="onFinish" /> |
|||
</van-popup> |
|||
</view> |
|||
<view class="bsCon2"> |
|||
<view class="bsSpan">问题描述</view> |
|||
<textarea class="question-input" placeholder="请输入内容" bindinput="onInput" value="{{questionText}}" maxlength="" /> |
|||
<view class="bsSpan" style="margin-top: 15rpx;">上传图片/视频</view> |
|||
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" bind:before-read="beforeRead" bind:delete="deleteData" max-count="3" /> |
|||
</view> |
|||
<view class="bsBtn" bindtap="onButtonTap">提交</view> |
|||
</view> |
|||
@ -0,0 +1,104 @@ |
|||
/* subpages/bsPage/bsPage/bsPage.wxss */ |
|||
.bsPageCont { |
|||
width: 100%; |
|||
height: 100vh; |
|||
position: relative; |
|||
background-color: rgba(248, 248, 248, 1); |
|||
} |
|||
|
|||
.bsImg { |
|||
width: 100%; |
|||
height: 280rpx; |
|||
position: absolute; |
|||
top: 0; |
|||
} |
|||
|
|||
.bsTitle { |
|||
border-radius: 10rpx; |
|||
height: 100rpx; |
|||
background-color: rgba(255, 255, 255, 1); |
|||
color: rgba(16, 16, 16, 1); |
|||
position: absolute; |
|||
width: 96%; |
|||
margin-left: 2%; |
|||
top: 4%; |
|||
/* display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; */ |
|||
} |
|||
|
|||
.bsCon { |
|||
width: 96%; |
|||
display: block; |
|||
margin-left: 2%; |
|||
} |
|||
|
|||
.bsCon ::v-deep .title-class { |
|||
color: rgba(104, 117, 139, 1); |
|||
font-size: 32rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
.bsCon2 { |
|||
border-radius: 10rpx; |
|||
height: 800rpx; |
|||
background-color: rgba(255, 255, 255, 1); |
|||
color: rgba(16, 16, 16, 1); |
|||
position: absolute; |
|||
width: 96%; |
|||
margin-left: 2%; |
|||
top: calc(6% + 100rpx); |
|||
padding: 2%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.bsCon2 .bsSpan { |
|||
color: rgba(104, 117, 139, 1); |
|||
font-size: 30rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
/* 输入框样式 */ |
|||
.question-input { |
|||
width: 98%; |
|||
margin-left: 1%; |
|||
margin-top: 2%; |
|||
height: 500rpx; |
|||
border-radius: 10rpx; |
|||
padding: 15rpx; |
|||
box-sizing: border-box; |
|||
background-color: rgba(246, 246, 246, 1); |
|||
color: rgba(203, 203, 203, 1); |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.van-uploader__preview { |
|||
/* width: 80px; */ |
|||
} |
|||
|
|||
van-uploader__upload { |
|||
width: 75px !important; |
|||
height: 75px !important; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
.van-uploader__preview-image { |
|||
width: 75px !important; |
|||
height: 75px !important; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
.bsBtn { |
|||
position: absolute; |
|||
width: 300rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
border-radius: 600rpx; |
|||
background: linear-gradient(86.25deg, rgba(13, 198, 198, 1) 3.03%, rgba(19, 194, 194, 1) 3.03%, rgba(70, 219, 213, 1) 96.43%); |
|||
color: rgba(255, 255, 255, 1); |
|||
font-size: 34rpx; |
|||
text-align: center; |
|||
bottom: 3%; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
} |
|||
@ -1,66 +1,130 @@ |
|||
// subpages/eventAdd/add/add.js
|
|||
const app = getApp() |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
title: '报修', |
|||
bxname: '', |
|||
questionText: '', |
|||
fileList: [{ |
|||
url: 'https://img.yzcdn.cn/vant/leaf.jpg', |
|||
name: '图片1', |
|||
}, |
|||
{ |
|||
url: 'http://iph.href.lu/60x60?text=default', |
|||
name: '图片2', |
|||
isImage: true, |
|||
}, |
|||
], |
|||
}, |
|||
deleteData(event) { |
|||
// 删除
|
|||
console.log(event.detail.index) |
|||
let newFileList = this.data.fileList.slice(); |
|||
newFileList.splice(event.detail.index, 1); |
|||
this.setData({ |
|||
fileList: newFileList |
|||
}); |
|||
}, |
|||
afterRead(event) { |
|||
const { |
|||
file |
|||
} = event.detail; |
|||
console.log(file, 66) |
|||
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
|||
wx.uploadFile({ |
|||
url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
|
|||
filePath: file.url, |
|||
name: 'file', |
|||
formData: { |
|||
user: 'test' |
|||
}, |
|||
success(res) { |
|||
// 上传完成需要更新 fileList
|
|||
const { |
|||
fileList = [] |
|||
} = this.data; |
|||
fileList.push({ |
|||
...file, |
|||
url: res.data |
|||
}); |
|||
this.setData({ |
|||
fileList |
|||
}); |
|||
}, |
|||
}); |
|||
}, |
|||
beforeRead(event) { |
|||
const { |
|||
file, |
|||
callback |
|||
} = event.detail; |
|||
callback(file.type === 'image'); |
|||
}, |
|||
onInput(e) { |
|||
this.setData({ |
|||
questionText: e.detail.value, |
|||
}); |
|||
// console.log(this.data.questionText, 666)
|
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
wx.setNavigationBarTitle({ |
|||
title: this.data.title |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
|||
@ -1,7 +1,10 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"van-cell": "@vant/weapp/cell/index", |
|||
"van-cell-group": "@vant/weapp/cell-group/index", |
|||
"van-popup": "@vant/weapp/popup/index" |
|||
"van-cell": "@vant/weapp/cell/index", |
|||
"van-cell-group": "@vant/weapp/cell-group/index", |
|||
"van-popup": "@vant/weapp/popup/index", |
|||
"van-cascader": "@vant/weapp/cascader/index", |
|||
"van-uploader": "@vant/weapp/uploader/index", |
|||
"van-field": "@vant/weapp/field/index" |
|||
} |
|||
} |
|||
@ -1,9 +1,22 @@ |
|||
<!--subpages/eventAdd/add/add.wxml--> |
|||
<view class="header"> |
|||
<view class="card"> |
|||
<van-cell title="单元格" value="内容" /> |
|||
</view> |
|||
<view class="card"> |
|||
|
|||
<view class="bsPageCont"> |
|||
<image class="bsImg" src="../../../images/bxBac.png" /> |
|||
<image class="bsImg1" src="../../../images/icon_1.png" /> |
|||
<view class="bxMessage"> |
|||
<text style="font-weight: bold;font-size: 40rpx;">填写信息</text> |
|||
<text style="color: rgba(102,102,102,1);font-size: 26rpx;">请您填写相关问题</text> |
|||
</view> |
|||
<view class="bsCon2"> |
|||
<view class="bxName"> |
|||
<view class="bsSpan1">报修物品</view> |
|||
<van-cell-group class="bxinput"> |
|||
<van-field value="{{ bxname }}" placeholder="请输入" border="{{ false }}" bind:change="onChange" /> |
|||
</van-cell-group> |
|||
</view> |
|||
<view class="bsSpan">故障说明</view> |
|||
<textarea class="question-input" placeholder="请输入内容" bindinput="onInput" value="{{questionText}}" maxlength="" /> |
|||
<view class="bsSpan" style="margin-top: 15rpx;">上传图片/视频</view> |
|||
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" bind:before-read="beforeRead" bind:delete="deleteData" max-count="3" /> |
|||
</view> |
|||
<view class="bsBtn" bindtap="onButtonTap">提交</view> |
|||
</view> |
|||
@ -1,4 +1,140 @@ |
|||
/* subpages/eventAdd/add/add.wxss */ |
|||
.header{ |
|||
background-color: linear-gradient(to right,#d2effd 50%,#e6e2fb); |
|||
/* subpages/bsPage/bsPage/bsPage.wxss */ |
|||
.bsPageCont { |
|||
width: 100%; |
|||
height: 100vh; |
|||
position: relative; |
|||
background-color: rgba(248, 248, 248, 1); |
|||
} |
|||
|
|||
.bsImg { |
|||
width: 100%; |
|||
height: 280rpx; |
|||
position: absolute; |
|||
top: 0; |
|||
} |
|||
|
|||
.bsImg { |
|||
width: 100%; |
|||
height: 280rpx; |
|||
position: absolute; |
|||
top: 0; |
|||
} |
|||
|
|||
.bsImg1 { |
|||
width: 144rpx; |
|||
height: 150rpx; |
|||
position: absolute; |
|||
top: 2%; |
|||
right: 5%; |
|||
} |
|||
|
|||
.bsCon { |
|||
width: 96%; |
|||
display: block; |
|||
margin-left: 2%; |
|||
} |
|||
|
|||
.bsCon ::v-deep .title-class { |
|||
color: rgba(104, 117, 139, 1); |
|||
font-size: 32rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
.bsCon2 { |
|||
border-radius: 10rpx; |
|||
height: 900rpx; |
|||
overflow-y: auto; |
|||
background-color: rgba(255, 255, 255, 1); |
|||
color: rgba(16, 16, 16, 1); |
|||
position: absolute; |
|||
width: 96%; |
|||
margin-left: 2%; |
|||
top: calc(6% + 100rpx); |
|||
padding: 2%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.bsCon2 .bsSpan { |
|||
color: rgba(104, 117, 139, 1); |
|||
font-size: 30rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
/* 输入框样式 */ |
|||
.question-input { |
|||
width: 98%; |
|||
margin-left: 1%; |
|||
margin-top: 2%; |
|||
height: 500rpx; |
|||
border-radius: 10rpx; |
|||
padding: 15rpx; |
|||
box-sizing: border-box; |
|||
background-color: rgba(246, 246, 246, 1); |
|||
color: rgba(203, 203, 203, 1); |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.van-uploader__preview { |
|||
/* width: 80px; */ |
|||
} |
|||
|
|||
van-uploader__upload { |
|||
width: 75px !important; |
|||
height: 75px !important; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
.van-uploader__preview-image { |
|||
width: 75px !important; |
|||
height: 75px !important; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
.bsBtn { |
|||
position: absolute; |
|||
width: 300rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
border-radius: 600rpx; |
|||
background: linear-gradient(86.25deg, rgba(13, 198, 198, 1) 3.03%, rgba(19, 194, 194, 1) 3.03%, rgba(70, 219, 213, 1) 96.43%); |
|||
color: rgba(255, 255, 255, 1); |
|||
font-size: 34rpx; |
|||
text-align: center; |
|||
bottom: 3%; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
} |
|||
|
|||
.bxMessage { |
|||
position: absolute; |
|||
top: 3%; |
|||
left: 5%; |
|||
} |
|||
|
|||
.bxMessage text { |
|||
color: rgba(16, 16, 16, 1); |
|||
display: block; |
|||
margin-bottom: 5rpx; |
|||
} |
|||
|
|||
.bsSpan1 { |
|||
color: rgba(104, 117, 139, 1); |
|||
font-size: 30rpx; |
|||
margin-left: 20rpx; |
|||
display: inline-block; |
|||
width: 20%; |
|||
} |
|||
|
|||
.bxinput { |
|||
display: inline-block; |
|||
width: 40%; |
|||
} |
|||
|
|||
.bxName { |
|||
width: 100%; |
|||
height: 100rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
After Width: | Height: | Size: 22 KiB |
Loading…
Reference in new issue