deming/pageE/tool/WashOrder.vue
2020-07-27 17:59:47 +08:00

557 lines
12 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="wash-order">
<view>
<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="32" :show-bar="false" @change="tabsChange" height="88" ></u-tabs-swiper>
</view>
<swiper :current="swiperCurrent" @animationfinish="animationfinish">
<swiper-item class="swiper-item">
<view class="order-info">
<view class="order-name" @click="order()">
<view class="title titles" >
<text>选择订单</text>
<image src="../../static/image/shop/2.png" mode=""></image>
</view>
<u-icon name="arrow-dwon" color="#2979ff" size="28"></u-icon>
</view>
<view class="choose-info" v-if="choose">
<view class="store">
<view>
<image src="../../static/image/mine/23.png" mode=""></image>胖胖的店
</view>
<view>
订单编号2222222222222
</view>
</view>
<view class="store_info">
<view class="info_img">
<image src="../../static/image/mine/23.png" mode="">
</view>
<view class="info_txt">
<view class="content">
木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子
</view>
<view class="much">
<text>¥99</text>
<text>x1</text>
</view>
</view>
</view>
</view>
<view class="order-name">
<view class="title">送洗人:</view>
<input type="text" v-model="name" />
</view>
<view class="order-phone">
<view class="title">手机号:</view>
<input type="text" v-model="phone" />
</view>
<view class="order-area">
<view class="title">省市区:</view>
<input type="text" v-model="area" />
<view class="location">
<image src="../static/mine/28.png"></image>
<view>定位</view>
</view>
</view>
<view class="order-address">
<view class="title">详细地址:</view>
<input type="text" v-model="address" />
</view>
</view>
<view class="upload-image">
<view class="title">上传商品图片</view>
<u-upload
ref="uUpload"
@on-uploaded="onUploaded"
:custom-btn="true"
:max-count="count"
:auto-upload="false"
>
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<img src="../static/mine/27.png" />
</view>
</u-upload>
</view>
<view class="wash-btn" @click="reset()">确认送洗</view>
</swiper-item>
<swiper-item class="swiper-item">
<view class="order-info">
<view class="order-name">
<view class="title">商品名称:</view>
<input type="text" v-model="name" />
</view>
<view class="order-phone">
<view class="title">商品类型:</view>
<input type="text" v-model="name" />
</view>
<view class="order-phone">
<view class="title">衣服状况:</view>
<input type="text" v-model="name" />
</view>
<view class="order-name">
<view class="title">送洗人:</view>
<input type="text" v-model="name" />
</view>
<view class="order-area">
<view class="title">省市区:</view>
<input type="text" v-model="area" />
<view class="location">
<image src="../static/mine/28.png"></image>
<view>定位</view>
</view>
</view>
<view class="order-address">
<view class="title">详细地址:</view>
<input type="text" v-model="address" />
</view>
</view>
<view class="upload-image">
<view class="title">上传商品图片</view>
<u-upload
ref="uUpload"
@on-uploaded="onUploaded"
:custom-btn="true"
:max-count="count"
:auto-upload="false"
>
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<img src="../static/mine/27.png" />
</view>
</u-upload>
</view>
<view class="wash-btn">确认送洗</view>
</swiper-item>
</swiper>
<view class="popup" v-if="showPopup">
<view class="popup_cont" >
<view class="check">
<text>选择订单</text>
<image src="../../static/image/common/17.png" @click="close()"></image>
</view>
<swiper style="height: 1000px;" vertical="true">
<swiper-item class="swiper-item">
<scroll-view scroll-y class="order-list">
<view v-for="(items, index) in 3" :key="index">
<view class="store">
<view>
<image src="../../static/image/mine/23.png" mode=""></image>胖胖的店
</view>
<view>
订单编号2222222222222
</view>
</view>
<view class="checkd">
<radio-group @change="er">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in checkLidt" :key="index">
<view class="radio">
<radio color="#F0AD4E" :value="item.id" :checked="a==item.id"/>
</view>
<view class="store_info">
<view class="info_img">
<image src="../../static/image/mine/23.png" mode="">
</view>
<view class="info_txt">
<view class="content">
木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子
</view>
<view class="much">
<text>99</text>
<text>x1</text>
</view>
</view>
</view>
</label>
</radio-group>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
<view class="bottom_btn" style="width: 100%;background-color: #fff;">
<view class="wash-btn" @click="confirm()">确认</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: [],
count: 4, // 最大图片数量
name: '',
phone: '',
area: '',
address: '',
list: [{
name: '平台历史订单'
}, {
name: '实体店历史订单'
}],
current: 0,
swiperCurrent: 0,
showPopup : false,
a:"",
checkLidt:[
{id:'1'},
{id:'2'},
{id:'3'}
]
}
},
methods: {
onShow() {
this.current = 0;
this.swiperCurrent = 0;
this.showPopup = false;
this.choose = false
},
submit() {
this.$refs.uUpload.upload();
},
onUploaded(list) {
console.log(list)
},tabsChange(index) {
this.swiperCurrent = index;
},
er(e){
console.log(e)
this.a =e.detail.value;
console.log(this.a)
},
animationfinish(e) {
let current = e.detail.current;
this.swiperCurrent = current;
this.current = current;
this.toApplyPage(current);
},
order(){
this.showPopup = true;
},
toApplyPage(index) {
console.log(index)
if(index == 1) {
this.showPopup = false;
this.choose = false
}
},
// replaces(){
// if(this.list[0].name=='实体店历史订单'){
// this.$set(this.list,0,{name: '平台历史订单'} )
// }else{
// this.$set(this.list,0,{name: '实体店历史订单'} )
// }
// },
confirm(){
this.showPopup = false;
if(this.a ==''){
this.choose =false
}else{
this.choose = true
}
},
close(){
this.showPopup = false
},
reset(){
this.choose = false
},
radioChange: function(evt) {
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].value === evt.target.value) {
this.current = i;
}
}
}
},
};
</script>
<style lang="scss" scoped>
.wash-order {
border-top: 1rpx solid #ECECEC;
> uni-swiper {
flex: 1;
height: 95vh;
}
.order-info {
.choose-info{
display: flex;flex-wrap: wrap;
height: 335rpx;
.store{
>view{
>image{
width:60rpx;
height:60rpx;
border-radius:50%;
vertical-align: middle;
padding-right:13rpx
}
}
font-size:28rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
line-height: 60rpx;
}
.store_info{
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 150rpx;
.info_img{
>image{
width: 180rpx;
height: 160rpx;
}
}
.info_txt{
padding-left: 30rpx;
padding-right: 30rpx;
display: flex;
flex-wrap: wrap;
width: 100%;
.content{
line-height: 44rpx;
font-size: 30rpx;
color:rgba(51,51,51,1);
}
.much{
display: flex;
justify-content: space-between;
width: 100%;
}
}
}
}
> view {
width: 750rpx;
height: 98rpx;
background: rgba(255,255,255,1);
padding: 35rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2rpx;
background-color: #ECECEC;
}
.title {
font-size: 30rpx;
color: rgba(51,51,51,1);
margin-right: 10rpx;
}
.titles {
font-size: 30rpx;
color: rgba(51,51,51,1);
margin-right: 10rpx;
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
>image{
width: 27rpx;
height: 12rpx;
}
}
> input {
flex: 1;
text-align: right;
}
}
.order-area {
.location {
margin-left: 20rpx;
text-align: center;
font-size: 22rpx;
color: rgba(255,120,15,1);
> image {
width: 26rpx;
height: 32rpx;
margin-bottom: 10rpx;
}
}
}
}
.upload-image {
padding: 35rpx 30rpx;
.title {
font-size: 30rpx;
color: rgba(51,51,51,1);
margin-bottom: 34rpx;
}
.slot-btn {
width: 140rpx;
height: 140rpx;
background: rgba(236,236,236,1);
border-radius: 10rpx;
text-align: center;
> img {
width: 54rpx;
height: 49rpx;
margin-top: 48rpx;
}
}
}
.bottom_btn{
position: fixed;
width: 100%;
height: 100rpx;
bottom: 0;
}
.wash-btn {
width: 690rpx;
height: 98rpx;
background: rgba(255,120,15,1);
border-radius: 49rpx;
position: absolute;
bottom: 40rpx;
left: 50%;
transform: translate(-50%, 0);
font-size: 36rpx;
color:rgba(255,255,255,1);
text-align: center;
line-height: 98rpx;
}
.popup{
width: 100%;
height: 100%;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
background-color: rgba(0, 0, 0, 0.4);
transform: scale(1);
align-items: center;
transition-duration: 0.3s;
.popup_cont{
border-top: 1px solid RGBA(239, 236, 240, 1);
background-color: #fff;
width: 100%;
height: 1072rpx;
line-height: 80rpx;
font-size:28rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(102,102,102,1);
transform: scale(1);
position: fixed;
display: flex;
flex-direction: column;
bottom: 0px;
left: 0px;
right: 0px;
/* top: 0px; */
transition-duration: 0.3s;
border-radius:20px 20px 0px 0px;
> uni-swiper {
flex: 1;
height: 100vh;
.order-list{
height: 60vh;
padding-bottom: 140rpx;
}
}
.check{
font-size:30rpx;
font-family:PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
height:88rpx;
width: 100%;
padding-left: 30rpx;
border-bottom: 1px solid rgba(236, 236, 236, 1);
>image{
width: 32rpx;
height: 32rpx;
vertical-align: middle;
float: right;
padding-top: 30rpx;
padding-right:30rpx
}
}
.store{
>view{
padding-left: 30rpx;
padding-top: 30rpx;
>image{
width:60rpx;
height:60rpx;
border-radius:50%;
vertical-align: middle;
padding-right:13rpx
}
}
font-size:28rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
line-height: 60rpx;
}
.checkd{
>radio-group .uni-list-cell{
display: flex;
flex-wrap: nowrap;
width: 100%;
}
.radio{
display: flex;
align-items: center;
padding-left: 30rpx;
}
.store_info{
display: flex;
flex-wrap: nowrap;
width: 100%;
.info_img{
>image{
width: 180rpx;
height: 160rpx;
}
}
.info_txt{
padding-left: 30rpx;
padding-right: 30rpx;
display: flex;
flex-wrap: wrap;
width: 100%;
.content{
line-height: 44rpx;
font-size: 30rpx;
color:rgba(51,51,51,1);
}
.much{
display: flex;
justify-content: space-between;
width: 100%;
}
}
}
}
}
}
}
</style>