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.
190 lines
6.0 KiB
190 lines
6.0 KiB
<template>
|
|
<uv-popup ref="popup" :round="10">
|
|
<view class="companion-popup" v-if="type == 0">
|
|
<view class="popup-header">
|
|
<text class="popup-title">是否指定之前服务过的伴宠师</text>
|
|
<view class="popup-close" @click="close">
|
|
<uni-icons type="close" size="20" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="popup-content">
|
|
<view class="option-item" @click="selectOption('yes')">
|
|
<text class="option-text">是</text>
|
|
<view class="option-circle" :class="{'selected': selectedOption === 'yes'}">
|
|
<view class="option-inner" v-if="selectedOption === 'yes'"></view>
|
|
</view>
|
|
</view>
|
|
<view class="option-item" @click="selectOption('no')">
|
|
<text class="option-text">否</text>
|
|
<view class="option-circle" :class="{'selected': selectedOption === 'no'}">
|
|
<view class="option-inner" v-if="selectedOption === 'no'"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="companion-popup" v-else>
|
|
<view class="popup-header">
|
|
<text class="popup-title">请选择您喜欢的下单方式</text>
|
|
<view class="popup-close" @click="close">
|
|
<uni-icons type="close" size="20" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="popup-content">
|
|
<view class="option-item" @click="selectOption('yes')">
|
|
<text class="option-text">系统下单</text>
|
|
<view class="option-circle" :class="{'selected': selectedOption === 'yes'}">
|
|
<view class="option-inner" v-if="selectedOption === 'yes'"></view>
|
|
</view>
|
|
</view>
|
|
<view class="option-item" @click="selectOption('no')">
|
|
<text class="option-text">指定伴宠师</text>
|
|
<view class="option-circle" :class="{'selected': selectedOption === 'no'}">
|
|
<view class="option-inner" v-if="selectedOption === 'no'"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedOption: '',
|
|
type : 0,
|
|
}
|
|
},
|
|
methods: {
|
|
// 打开弹窗
|
|
open() {
|
|
this.selectedOption = '';
|
|
this.type = 0;
|
|
this.$refs.popup.open('bottom');
|
|
},
|
|
|
|
// 关闭弹窗
|
|
close() {
|
|
this.$refs.popup.close();
|
|
},
|
|
// 选择选项
|
|
selectOption(option) {
|
|
this.selectedOption = option;
|
|
|
|
if(this.type == 1){
|
|
if (option === 'yes') {
|
|
this.close();
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages/newOrder/serviceNew'
|
|
});
|
|
}, 300);
|
|
} else if (option === 'no') {
|
|
this.close();
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages/companionPetList/companionPetList'
|
|
});
|
|
}, 300);
|
|
}
|
|
return
|
|
}
|
|
|
|
// 如果选择"是"，跳转到伴宠师选择页面
|
|
if (option === 'yes') {
|
|
this.close();
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages_order/order/companionSelect'
|
|
});
|
|
}, 300);
|
|
} else if (option === 'no') {
|
|
this.type = 1;
|
|
this.selectedOption = '';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.companion-popup {
|
|
position: relative;
|
|
background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 30rpx 20rpx;
|
|
position: relative;
|
|
|
|
.popup-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
|
|
.popup-close {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 30rpx;
|
|
}
|
|
}
|
|
|
|
.popup-content {
|
|
padding: 20rpx 30rpx 50rpx;
|
|
|
|
.option-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 100rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #F8F8F8;
|
|
margin-bottom: 20rpx;
|
|
padding: 0 30rpx;
|
|
|
|
// &:first-child {
|
|
// background-color: #FFF9E6;
|
|
|
|
// .option-text {
|
|
// color: #FFAA48;
|
|
// }
|
|
// }
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.option-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.option-circle {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #DDDDDD;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&.selected {
|
|
border-color: #FFAA48;
|
|
}
|
|
|
|
.option-inner {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
border-radius: 50%;
|
|
background-color: #FFAA48;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|