You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
6.8 KiB
315 lines
6.8 KiB
<template> |
|
<u-navbar title="增值服务" |
|
bgColor='#D3832A' leftIconColor='#ffffff' |
|
titleStyle='color:#ffffff' placeholder |
|
:autoBack="true" leftIconSize='35'></u-navbar> |
|
<view class="select_top"> |
|
<view class="selectlist"> |
|
<view>增值服务类型</view> |
|
<view @click="showlist"> |
|
<view>{{priceType[checkserveindex].typename}}</view> |
|
<image src="/static/rigthview.png"></image> |
|
</view> |
|
</view> |
|
<view class="inputtext" v-if="checkserve==2"> |
|
<view>超区公里数(KM)</view> |
|
<view> |
|
<input placeholder="请输入"/> |
|
</view> |
|
</view> |
|
<view class="inputtext" v-if="checkserve==1"> |
|
<view>上楼层数</view> |
|
<view> |
|
<input placeholder="请输入"/> |
|
</view> |
|
</view> |
|
<view class="inputtext" v-if="checkserve==6"> |
|
<view>平移距离(米)</view> |
|
<view> |
|
<input placeholder="请输入"/> |
|
</view> |
|
</view> |
|
<!-- <view class="selectlist"> |
|
<view>楼层</view> |
|
<view> |
|
<view>请选择</view> |
|
<image src="/static/rigthview.png"></image> |
|
</view> |
|
</view> --> |
|
|
|
<view class="checktype"> |
|
<view>包件类型</view> |
|
<view> |
|
<view @click="setdetails('typestate',1)" :class="typestate==1?'xz':''"> |
|
<image :src="typestate==1?'/pagesHome/static/yescheckblue.png':'/pagesHome/static/nocheckblue.png'"></image> |
|
<view>全部</view> |
|
</view> |
|
<view @click="setdetails('typestate',2)" :class="typestate==2?'xz':''"> |
|
<image :src="typestate==2?'/pagesHome/static/yescheckblue.png':'/pagesHome/static/nocheckblue.png'"></image> |
|
<view>部分</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<scroll-view scroll-y="true" class="scvbo"> |
|
<view class="itemscbox" v-for="item in 5"> |
|
<view class="types1"> |
|
<view>8</view> |
|
<view>移除</view> |
|
</view> |
|
<view class="types2"> |
|
<image src="/pagesHome/static/scanicon1.png"></image> |
|
<view>订单编号：DS258932</view> |
|
</view> |
|
<view class="types2"> |
|
<image src="/pagesHome/static/scanicon1.png"></image> |
|
<view>包件码：DF25642332563</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
<view class="submitqrs">确定</view> |
|
<tiplist ref="tiplists"></tiplist> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { |
|
onLoad, |
|
onShow, |
|
onHide, |
|
onUnload |
|
} from '@dcloudio/uni-app'; |
|
import { reactive, ref, toRefs, watchEffect } from "vue"; |
|
const tiplists=ref(null) |
|
let details=reactive({ |
|
typestate:1, |
|
priceType:[ |
|
{typename:'上楼',type:1}, |
|
{typename:'超区',type:2}, |
|
{typename:'拆样',type:3}, |
|
{typename:'返货',type:4}, |
|
{typename:'搬运',type:5}, |
|
{typename:'平移',type:6}, |
|
{typename:'分拣入户',type:7}, |
|
], |
|
checkserveindex:0, |
|
checkserve:1, |
|
}) |
|
watchEffect(()=>{ |
|
details.checkserve=details.priceType[details.checkserveindex].type |
|
}) |
|
function setdetails<T>(uname: string, value: T): void { |
|
details[uname]=value |
|
} |
|
function showlist(){ |
|
let list=[] |
|
details.priceType.map(item=>{ |
|
list.push(item.typename) |
|
}) |
|
tiplists.value.setdetails({ |
|
title:'请选择增值服务类型', |
|
isshow:true, |
|
tipstate:2, |
|
list, |
|
checklist:[details.checkserveindex], |
|
inputtext:'', |
|
confirmTxt:'确认选择', |
|
isonecheck:true, |
|
success:(deta)=>{ |
|
if(deta.checklist.length==0){ |
|
uni.showToast({ |
|
title:'请选择增值服务类型', |
|
icon:'none' |
|
}) |
|
return |
|
} |
|
details.checkserveindex=deta.checklist[0] |
|
tiplists.value.setdetails({isshow:false}) |
|
}, |
|
cancel:(details)=>{ |
|
tiplists.value.setdetails({isshow:false}) |
|
}, |
|
close:(details)=>{ |
|
tiplists.value.setdetails({isshow:false}) |
|
} |
|
}) |
|
} |
|
const { |
|
typestate, |
|
priceType, |
|
checkserveindex, |
|
checkserve |
|
}=toRefs(details) |
|
</script> |
|
|
|
<style lang="scss"> |
|
|
|
.submitqrs{ |
|
width: 686upx; |
|
height: 100upx; |
|
background: #D3832A; |
|
border-radius: 16upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin: auto; |
|
color: #FFFFFF; |
|
font-size: 32upx; |
|
font-weight: 400; |
|
} |
|
.scvbo{ |
|
width: 100%; |
|
height: 58vh; |
|
margin-top: 15upx; |
|
margin-bottom: 15upx; |
|
.itemscbox{ |
|
width: 686upx; |
|
background: #FFFFFF; |
|
border-radius: 16upx; |
|
margin: auto; |
|
margin-bottom: 16upx; |
|
padding:0 30upx; |
|
box-sizing: border-box; |
|
.types2{ |
|
display: flex; |
|
align-items: center; |
|
padding: 25upx 0; |
|
border-bottom: 1upx solid #EEEEEE; |
|
&:nth-last-child(1){ |
|
border-bottom: none; |
|
} |
|
>image{ |
|
width: 64upx; |
|
height: 64upx; |
|
margin-right: 14upx; |
|
} |
|
>view{ |
|
font-size: 28rpx; |
|
font-weight: 400; |
|
color: #020B18; |
|
} |
|
} |
|
.types1{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
padding: 25upx 0; |
|
border-bottom: 1upx solid #EEEEEE; |
|
>view:nth-of-type(1){ |
|
width: 48upx; |
|
height: 48upx; |
|
background-color: #e7f3fd; |
|
color: #178AF2; |
|
border-radius: 50%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
>view:nth-of-type(2){ |
|
width: 84upx; |
|
height: 64upx; |
|
background: rgba(248,84,75,0.102); |
|
border-radius: 4upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 28upx; |
|
font-weight: 400; |
|
color: #F8544B; |
|
} |
|
} |
|
} |
|
} |
|
.select_top{ |
|
width: 750upx; |
|
// height: 420upx; |
|
background: #FFFFFF; |
|
padding: 20upx 46upx; |
|
box-sizing: border-box; |
|
>.checktype{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
box-sizing: border-box; |
|
padding: 20upx 0; |
|
padding-bottom: 10upx; |
|
padding-top: 25upx; |
|
>view:nth-of-type(1){ |
|
font-size: 32upx; |
|
font-weight: 400; |
|
color: #092C4D; |
|
} |
|
>view:nth-of-type(2){ |
|
display: flex; |
|
align-items: center; |
|
.xz{ |
|
>view{ |
|
color: #0086F1 !important; |
|
} |
|
} |
|
>view{ |
|
font-size: 28upx; |
|
font-weight: 400; |
|
color: #AFB5BE; |
|
display: flex; |
|
align-items: center; |
|
margin-right: 20upx; |
|
&:nth-last-child(1){ |
|
margin-right: 0 !important; |
|
} |
|
>image{ |
|
width: 32upx; |
|
height: 32upx; |
|
margin-right: 10upx; |
|
} |
|
>view{ |
|
font-size: 32upx; |
|
font-weight: 400; |
|
color: #020B18; |
|
} |
|
} |
|
} |
|
} |
|
>.inputtext{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
box-sizing: border-box; |
|
padding: 20upx 0; |
|
border-bottom: 1upx solid #EEEEEE; |
|
>view:nth-of-type(1){ |
|
font-size: 32upx; |
|
font-weight: 400; |
|
color: #092C4D; |
|
} |
|
>view:nth-of-type(2){ |
|
text-align: right; |
|
} |
|
} |
|
>.selectlist{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
box-sizing: border-box; |
|
padding: 20upx 0; |
|
border-bottom: 1upx solid #EEEEEE; |
|
>view:nth-of-type(1){ |
|
font-size: 32upx; |
|
font-weight: 400; |
|
color: #092C4D; |
|
} |
|
>view:nth-of-type(2){ |
|
display: flex; |
|
align-items: center; |
|
>view{ |
|
font-size: 28upx; |
|
font-weight: 400; |
|
color: #AFB5BE; |
|
} |
|
>image{ |
|
width: 24upx; |
|
height: 32upx; |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|