订单完成

This commit is contained in:
2020-06-12 14:46:46 +08:00
parent ce92a35e28
commit cdd5c3e8e5
7 changed files with 292 additions and 25 deletions

View File

@@ -30,7 +30,24 @@
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
{{ current }}
<view class="complaint">
<view class="select-container">
<view class="title">选择骑手</view>
<view class="worker" v-if="JSON.stringify(worker) != '{}'">
<view>{{ worker.company + " " + worker.name }}</view>
<u-icon name="edit-pen" @click="worker={}"></u-icon>
</view>
<view v-else class="select" @click="showSelect=true">
<view>请选择</view>
<image src="/static/image/home/5.png"></image>
</view>
</view>
<view class="textarea">
<view class="title">投诉简介</view>
<textarea placeholder-style="color:#999999" placeholder="请输入内容" />
</view>
<view class="btn" @click="showComplaint=true">确定</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
@@ -52,6 +69,16 @@
<image src="/static/home/1.png"></image>
<view class="text">发布</view>
</view>
<u-select v-model="showSelect" mode="mutil-column-auto" :list="workerList" @confirm="setWorker"></u-select>
<u-popup v-model="showComplaint" mode="center" border-radius="10">
<view class="confirm-complaint">
<view class="text">
<view>投诉成功</view>
<view>请等待审核结果</view>
</view>
<view class="btn">确认</view>
</view>
</u-popup>
</view>
</template>
@@ -76,8 +103,40 @@ export default {
imageList: [
{}, {}, {}
],
showSelect: false,
current: 0,
swiperCurrent: 0,
showComplaint: false,
worker: {},
workerList: [
{
label: '百世快递公司',
children: [
{
label: '小米'
},
{
label: '小亮'
}
]
},
{
label: '中通快递公司',
children: [
{
label: '小红'
}
]
},
{
label: '申通快递公司',
children: [
{
label: '小蓝'
}
]
}
]
}
},
components: {
@@ -87,6 +146,13 @@ export default {
},
methods: {
setWorker(e) {
// console.log(e);
this.worker = {
company: e[0].label,
name: e[1].label
}
},
tabsChange(index) {
this.swiperCurrent = index;
},
@@ -105,6 +171,7 @@ export default {
background-color: #ECECEC;
display: flex;
flex-direction: column;
// padding-bottom: 100rpx;
> uni-swiper {
flex: 1;
}
@@ -115,6 +182,77 @@ export default {
.tab-swiper {
margin: 2rpx 0 20rpx 0;
}
.swiper-item {
.complaint {
margin: 0 30rpx;
padding: 75rpx 30rpx;
background-color: #ffffff;
.select-container {
display: flex;
align-items: center;
margin-bottom: 60rpx;
.title {
font-size: 30rpx;
color: rgba(51,51,51,1);
margin-right: 20rpx;
}
.select {
padding: 18rpx 20rpx;
width: 490rpx;
height: 60rpx;
background: rgba(236,236,236,1);
border-radius: 6rpx;
display: flex;
align-items: center;
justify-content: space-between;
> view {
font-size: 26rpx;
color: #999999;
}
> image {
width: 24rpx;
height: 13rpx;
}
}
.worker {
display: flex;
align-items: center;
> view {
font-size: 30rpx;
color: rgba(51,51,51,1);
margin-right: 20rpx;
}
}
}
.textarea {
box-sizing: border-box;
display: flex;
.title {
font-size: 30rpx;
color: rgba(51,51,51,1);
margin-right: 20rpx;
}
> textarea {
padding: 20rpx;
width: 430rpx;
height: 220rpx;
border: 1rpx solid #999999;
font-size: 26rpx;
}
}
.btn {
margin: 90rpx auto 0;
width: 630rpx;
height: 88rpx;
background: rgba(255,120,15,1);
border-radius: 44rpx;
font-size: 36rpx;
color: rgba(255,255,255,1);
line-height: 88rpx;
text-align: center;
}
}
}
.release-btn {
position: fixed;
bottom: 475rpx;
@@ -140,5 +278,31 @@ export default {
color: rgba(255,255,255,1);
}
}
.confirm-complaint {
text-align: center;
padding-bottom: 20rpx;
.text {
text-align: center;
width: 420rpx;
padding: 55rpx 112rpx;
font-size: 28rpx;
color: rgba(51,51,51,1);
line-height: 4r2px;
> view:first-child {
margin-bottom: 20rpx;
}
}
.btn {
width: 200rpx;
height: 60rpx;
background: rgba(255,120,15,1);
border-radius: 30rpx;
text-align: center;
line-height: 60rpx;
font-size: 28rpx;
color: rgba(255,255,255,1);
margin: 0 auto;
}
}
}
</style>