业务需求:
点击右侧橙色背景 ‘身份切换’圆形后,显示弹框,同时橙色圆形1s钟侧滑显示
选择身份后弹窗消失,同时橙色圆形回到原位
<!-- 切换身份圆圈 -->
<view class="changeIdentities" :class="{ active : active }" @tap="showChangeIdentitiesBox">
<view class="">身份</view>
<view class="">切换</view>
</view>
<!-- 身份切换选框 -->
<view class="cu-modal" :class="{ show: active }" @tap="hideModal">
<view class="cu-dialog" @tap.stop style="background: none;width: auto;">
<view class="changeIdentitiesBox">
<view class="title">身份切换</view>
<view class="content">
<view class="service" @tap="changeIdentities('服务商')">
<image class="identitiesImg" src="http://10.100.0.120/temp/imgs/serviceIdentities.png" mode=""></image>
<view class="identitiesText">服务商</view>
</view>
<view class="customer" @tap="changeIdentities('消费者')">
<image class="identitiesImg" src="http://10.100.0.120/temp/imgs/customerIdentities.png" mode=""></image>
<view class="identitiesText">消费者</view>
</view>
</view>
</view>
</view>
</view>
.changeIdentities {
position: fixed;
z-index: 400;
right: -55rpx;
bottom: 370rpx;
width: 110rpx;
height: 110rpx;
line-height: 55rpx;
color: rgba(255, 255, 255, 1);
background-color: rgba(255, 141, 26, 1);
border-radius: 50%;
font-size: 30rpx;
text-align: center;
transition: all 1s linear;
}
.active {
transform: translateX(-55rpx);
}
.changeIdentitiesBox {
width: 520rpx;
height: 372rpx;
background-color: white;
.title {
padding: 16rpx 0;
text-align: center;
color: rgba(0, 0, 0, 1);
font-size: 34rpx;
font-weight: bold;
border-bottom: 2rpx solid rgba(229, 229, 229, 1);
}
.content {
display: flex;
padding: 34rpx 0;
.service {
flex: 1;
}
.customer {
flex: 1;
}
.identitiesImg {
width: 160rpx;
height: 160rpx;
}
.identitiesText {
margin-top: 20rpx;
color: rgba(80, 80, 80, 1);
font-size: 32rpx;
font-weight: bold;
}
}
}
// 切换身份 服务商 <-> 消费者
showChangeIdentitiesBox() {
this.active = !this.active;
},
changeIdentities(identities) {
this.identities = identities;
this.getServiceOrderNav();
this.getServiceOrder();
this.active = false;
},
//点击蒙层关闭
hideModal() {
this.active = false;
},