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.
316 lines
6.8 KiB
316 lines
6.8 KiB
1 year ago
|
<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>
|