121 lines
2.6 KiB
Vue
121 lines
2.6 KiB
Vue
<template>
|
|
<view class="page_padding">
|
|
<view class="repairCompleted">
|
|
<view class="item">
|
|
<view class="title">
|
|
<text>问题描述</text>
|
|
</view>
|
|
<view class="descrition">
|
|
<textarea value="" placeholder-style="color:#e8e8e8;" placeholder="请描述您的问题" />
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="title">
|
|
<text>问题照片</text>
|
|
</view>
|
|
<view class="">
|
|
<uni-file-picker v-model="form.images" file-mediatype="image">
|
|
<view class="addimages images flex flex-center">
|
|
<uni-icons type="plusempty" color="#a6a6a6" size="27"></uni-icons>
|
|
</view>
|
|
</uni-file-picker>
|
|
</view>
|
|
</view>
|
|
<view class="action_btn" @tap="handleSelecthouse">
|
|
<text>确 认</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
const form = ref({
|
|
descrition: '',
|
|
images: [
|
|
{
|
|
name: 'file1.png',
|
|
extname: 'png',
|
|
url: 'https://picsum.photos/80'
|
|
},
|
|
{
|
|
name: 'file2.png',
|
|
extname: 'png',
|
|
url: 'https://picsum.photos/80'
|
|
},
|
|
{
|
|
name: 'file3.png',
|
|
extname: 'png',
|
|
url: 'https://picsum.photos/80'
|
|
},
|
|
{
|
|
name: 'file4.png',
|
|
extname: 'png',
|
|
url: 'https://picsum.photos/80'
|
|
}
|
|
]
|
|
})
|
|
/** 返回上一页 */
|
|
function handleSelecthouse() {
|
|
uni.navigateBack()
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.repairCompleted {
|
|
padding: 20rpx 40rpx;
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
flex: 1;
|
|
|
|
.item {
|
|
margin-bottom: 28rpx;
|
|
.title {
|
|
padding-left: 16rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 36rpx;
|
|
}
|
|
.descrition {
|
|
height: 200rpx;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
border: 2rpx solid #ececec;
|
|
padding: 22rpx 18rpx;
|
|
}
|
|
.imageboxs {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20rpx;
|
|
.images {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 0rpx;
|
|
}
|
|
}
|
|
:deep(.file-picker__box-content.is-add) {
|
|
background-color: #f3f3f3 !important;
|
|
}
|
|
}
|
|
|
|
.action_btn {
|
|
width: 670rpx;
|
|
height: 80rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
background: #4d5dfa;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
</style>
|