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,9 +1,22 @@ |
|||||
<!--subpages/eventAdd/add/add.wxml--> |
<!--subpages/eventAdd/add/add.wxml--> |
||||
<view class="header"> |
<view class="bsPageCont"> |
||||
<view class="card"> |
<image class="bsImg" src="../../../images/bxBac.png" /> |
||||
<van-cell title="单元格" value="内容" /> |
<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> |
||||
<view class="card"> |
<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> |
||||
|
<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> |
</view> |
||||
@ -1,4 +1,140 @@ |
|||||
/* subpages/eventAdd/add/add.wxss */ |
/* subpages/eventAdd/add/add.wxss */ |
||||
.header{ |
/* subpages/bsPage/bsPage/bsPage.wxss */ |
||||
background-color: linear-gradient(to right,#d2effd 50%,#e6e2fb); |
.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