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.
578 lines
16 KiB
578 lines
16 KiB
<template>
|
|
<view class="service-new container">
|
|
|
|
<view class="order-type-select" v-if="!buyInfo.teacher">
|
|
|
|
<view class="order-type-title">
|
|
<image style="width: 40rpx; height: 40rpx;margin-right: 10rpx;" slot='cover' src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/OrderIcon.png">
|
|
</image>
|
|
|
|
<!-- <image style="width: 32rpx; height: 32rpx; margin-right: 10rpx;" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/SystemOrderCircle.png"></image> -->
|
|
下单方式：系统派单 <text style="color: #999;font-size: 26rpx;">(需先选择伴宠师等级)</text>
|
|
</view>
|
|
|
|
<view class="order-type-options">
|
|
<view class="order-type-option" :class="{active: companionLevel === 'junior'}" @click="selectCompanionLevel('junior')">
|
|
<image style="width: 40rpx; height: 40rpx; margin-right: 10rpx;" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png"></image>
|
|
初级伴宠师
|
|
<view class="info-icon" @click.stop="showCompanionInfo('junior')">
|
|
<uni-icons type="info" size="20" color="#FFB13F"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="order-type-option" :class="{active: companionLevel === 'senior'}" @click="selectCompanionLevel('senior')">
|
|
<image style="width: 40rpx; height: 40rpx; margin-right: 10rpx;" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png"></image>
|
|
高级伴宠师
|
|
<view class="info-icon" @click.stop="showCompanionInfo('senior')">
|
|
<uni-icons type="info" size="20" color="#FFB13F"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<uni-popup ref="companionInfoPopup" type="center">
|
|
<view class="companion-info-popup">
|
|
<view class="companion-info-title">
|
|
<text>{{ popupTitle }}</text>
|
|
</view>
|
|
<view class="companion-info-content">
|
|
<view class="companion-info-item">
|
|
<text class="companion-info-label">等级:</text>
|
|
<text class="companion-info-value">{{ popupLevel }}</text>
|
|
</view>
|
|
<view class="companion-info-item">
|
|
<text class="companion-info-label">价格:</text>
|
|
<text class="companion-info-value">要根据规城市不同展示不同的价格</text>
|
|
</view>
|
|
<view class="companion-info-item">
|
|
<text class="companion-info-label">分类标准:</text>
|
|
<text class="companion-info-value">文字描述初级是什么类型的，高级是什么类型的 :)</text>
|
|
</view>
|
|
</view>
|
|
<view class="companion-info-close" @click="closeCompanionInfo">
|
|
<uni-icons type="close" size="24" color="#fff"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<view class="service-new-address">
|
|
<uni-card padding=0 :is-shadow="false">
|
|
<view class="service-new-title" slot="title">
|
|
<view class="service-new-title-left">
|
|
<view class="service-new-flag"></view>
|
|
<view>服务地址</view>
|
|
</view>
|
|
</view>
|
|
<view class="split-line"></view>
|
|
<view class="service-new-address-content">
|
|
|
|
<view v-if="isAddressSelected" class="service-new-address-selected" >
|
|
<view class="personal-address-info">
|
|
<view class="personal-address-text">
|
|
{{currentAddress.province}} {{currentAddress.city}} {{currentAddress.detailAddress}}
|
|
</view>
|
|
<view class="personal-address-people">
|
|
<view>
|
|
{{currentAddress.name}}
|
|
</view>
|
|
<view style="border: solid #7D8196 1px; margin: 0 10px; height: 12px;"> </view>
|
|
<view>
|
|
{{currentAddress.phone}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<uni-icons type="right" size="28rpx" color="#AAA" @click="selectAddress"></uni-icons>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view v-else class="service-new-unselect">
|
|
<view style="width: 50%;">
|
|
<u-button color="#FFBF60" icon="plus-circle-fill" text="添加地址" shape="circle" plain @click="selectAddress">
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-card>
|
|
</view>
|
|
<view class="service-new-pet">
|
|
<uni-card padding=0 :is-shadow="false">
|
|
<view class="service-new-title" slot="title">
|
|
<view class="service-new-title-left">
|
|
<view class="service-new-flag">
|
|
</view>
|
|
<view class="service-new-title-text">
|
|
服务宠物
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="isPetSelected" class="add-pet" @click="selectPet">
|
|
<u-icon name="plus-circle-fill" color="#FFBF60" size="28rpx" style="margin-right: 10rpx;"></u-icon>
|
|
添加宠物
|
|
</view>
|
|
</view>
|
|
<view class="split-line"></view>
|
|
<view class="service-new-pet-content">
|
|
<view v-if="isPetSelected" class="personal-pet-list">
|
|
<view v-for="(item,index) in currentPets" :key="index">
|
|
<view class="personal-pet-list-item">
|
|
<view class="personal-pet-info">
|
|
<!-- 左侧头像 -->
|
|
<view class="pet-avatar">
|
|
<u-avatar :src="item.photo?item.photo:defaultPhoto" size="60" shape="circle"></u-avatar>
|
|
</view>
|
|
|
|
<!-- 中间内容 -->
|
|
<view class="pet-info" style="flex: 1; margin: 0 20rpx; max-width: 50%;">
|
|
<view class="pet-name-gender" style="display: flex; align-items: center;">
|
|
<view>{{item.name}}</view>
|
|
<view class="pet-gender" style="margin-left: 10rpx; display: flex;align-items: center;">
|
|
<img :src="item.gender=='男生'?'../../static/images/details/boy.svg':'../../static/images/details/girl.svg'" alt="sex"
|
|
style="width: 16px;height: 16px;"/>
|
|
</view>
|
|
</view>
|
|
<view class="pet-dates ellipsis" >
|
|
{{ getSelectedDateString(item.selectedDate) }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 右侧天数统计 -->
|
|
<view class="date-total" style="margin-left: auto;width: 140rpx;text-align: end;">
|
|
共 {{item.selectedDate.length}} 天
|
|
<uni-icons type="right" size="28rpx" color="#AAA" @click="selectPet"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="service-new-unselect">
|
|
<view style="width: 50%;">
|
|
<u-button color="#FFBF60" icon="plus-circle-fill" text="添加宠物" shape="circle" plain @click="selectPet">
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-card>
|
|
</view>
|
|
<view class="service-new-pet">
|
|
<uni-card padding=0 :is-shadow="false">
|
|
<view class="service-new-title" slot="title">
|
|
<view class="service-new-title-left">
|
|
<view class="service-new-flag">
|
|
</view>
|
|
<view class="service-new-title-text">
|
|
服务细则
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="split-line"></view>
|
|
<view class="service-new-details-content">
|
|
<view style="margin: 30rpx 0;">
|
|
<u-checkbox-group
|
|
v-model="needPreFamiliarize"
|
|
iconPlacement="right"
|
|
placement="column">
|
|
<u-checkbox activeColor="#FFBF60" label="是否提前熟悉" name="是否提前熟悉" shape="circle"></u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
<view class="split-line"></view>
|
|
<view class="service-new-details-desc">
|
|
<view style="display: flex;">
|
|
<text style="width: 20rpx;">*</text>
|
|
<text style="flex: 1;">价格40元/次</text>
|
|
</view>
|
|
<view style="display: flex; margin: 20rpx 0;">
|
|
<text style="width: 20rpx;">*</text>
|
|
<text style="flex: 1;">服务内容: 购买此服务后，伴宠师将在您离家前，按照约定日期提前上门沟通，熟悉喂养要求及宠物</text>
|
|
</view>
|
|
<view style="display: flex;">
|
|
<text style="width: 20rpx;">*</text>
|
|
<text style="flex: 1;">服务保障: 购买此服务后，平台支持在提前熟悉后，上门服务第一天前，无理由免费更换伴宠师1次</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-card>
|
|
</view>
|
|
<view class="details-subscribe">
|
|
<button class="details-btn" @click="goNext">下一步</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import {
|
|
getProductList,
|
|
getOpenId
|
|
} from "@/api/system/user"
|
|
import { setToken,getToken,getOpenIdKey,setOpenIdKey } from '@/utils/auth'
|
|
export default {
|
|
data()
|
|
{
|
|
return {
|
|
isAddressSelected:false,
|
|
currentAddress:{},
|
|
isPetSelected:false,
|
|
currentPets:[],
|
|
needPreFamiliarize:[],
|
|
defaultPhoto:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png',
|
|
companionLevel: 'junior', // 默认选择初级伴宠师
|
|
popupTitle: '',
|
|
popupLevel: '',
|
|
}
|
|
},
|
|
onLoad: function(option) {
|
|
},
|
|
onShow() {
|
|
if (!getToken() || !getOpenIdKey()) {
|
|
this.login()
|
|
}
|
|
if(this.$globalData.mainSku.length < 1 || !this.$globalData.mainSku[0].price){
|
|
// 获取主产品
|
|
this.getProductList()
|
|
}
|
|
this.currentAddress = this.$globalData.newOrderData.currentAddress
|
|
if(this.currentAddress&&this.currentAddress.name){
|
|
this.isAddressSelected=true
|
|
}
|
|
this.currentPets = this.$globalData.newOrderData.currentPets
|
|
if(this.currentPets&&this.currentPets.length>0){
|
|
this.isPetSelected=true
|
|
}
|
|
this.needPreFamiliarize = this.$globalData.newOrderData.needPreFamiliarize
|
|
// 初始化伴宠师等级
|
|
if(this.$globalData.newOrderData.companionLevel) {
|
|
this.companionLevel = this.$globalData.newOrderData.companionLevel
|
|
}
|
|
},
|
|
methods:{
|
|
selectAddress(){
|
|
uni.navigateTo({
|
|
url: "/pages/newOrder/addressList"
|
|
});
|
|
},
|
|
selectPet(){
|
|
uni.navigateTo({
|
|
url: "/pages/newOrder/petList"
|
|
});
|
|
},
|
|
selectCompanionLevel(level) {
|
|
this.companionLevel = level;
|
|
// 将选择的伴宠师等级保存到全局数据
|
|
this.$globalData.newOrderData.companionLevel = level;
|
|
},
|
|
showCompanionInfo(level) {
|
|
if(level === 'junior') {
|
|
this.popupTitle = '初级伴宠师';
|
|
this.popupLevel = '初级伴宠师';
|
|
} else {
|
|
this.popupTitle = '高级伴宠师';
|
|
this.popupLevel = '高级伴宠师';
|
|
}
|
|
this.$refs.companionInfoPopup.open();
|
|
},
|
|
closeCompanionInfo() {
|
|
this.$refs.companionInfoPopup.close();
|
|
},
|
|
getProductList() {
|
|
getProductList({
|
|
"publishStatus": 1,
|
|
"categoryId": 76,
|
|
"needSku": true
|
|
}).then(response => {
|
|
if (response && response.content && response.content.length > 0) {
|
|
const skus = response && response.content[0].skus
|
|
if(skus && skus.length>0){
|
|
let productSku = {
|
|
"skuId": skus[0].id,
|
|
"price":skus[0].price,
|
|
"name":response.content[0].name,
|
|
"quantity": 1,
|
|
"isMainProduct":true
|
|
}
|
|
this.$globalData.mainSku = [productSku]
|
|
}
|
|
}else {
|
|
uni.showToast('获取主产品失败，请联系管理员')
|
|
}
|
|
console.log(response);
|
|
})
|
|
},
|
|
login() {
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: (loginRes) => {
|
|
this.getOpenId(loginRes.code)
|
|
},
|
|
fail: function(error) {
|
|
// 授权失败处理
|
|
uni.showToast('授权失败，请授权后再试')
|
|
}
|
|
});
|
|
},
|
|
getOpenId(code) {
|
|
getOpenId(code).then(res => {
|
|
if (res.code == 200 && res.data) {
|
|
let resData = JSON.parse(res.data)
|
|
let token = resData.token;
|
|
let openId = resData.openId;
|
|
setOpenIdKey(openId)
|
|
if(token){
|
|
setToken(token)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
goNext(){
|
|
console.log(this.needPreFamiliarize)
|
|
if(!this.isAddressSelected) {
|
|
this.$modal.showToast('请选择服务地址');
|
|
return;
|
|
}
|
|
if(!this.isPetSelected) {
|
|
this.$modal.showToast('请选择宠物');
|
|
return;
|
|
}
|
|
this.$globalData.newOrderData.needPreFamiliarize = this.needPreFamiliarize
|
|
uni.navigateTo({
|
|
url: "/pages/newOrder/serviceNew2"
|
|
});
|
|
console.log(this.$globalData.newOrderData)
|
|
},
|
|
getSelectedDateString(selectDate){
|
|
//显示日期为01/01;01/02;
|
|
if(!selectDate || selectDate.length === 0) return '';
|
|
return selectDate.map(date => {
|
|
// 从日期字符串中提取月和日
|
|
const [,month, day] = date.date.split('-');
|
|
return `${month}/${day}`;
|
|
}).join(';');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.container {
|
|
position: relative;
|
|
height: 100%;
|
|
padding-bottom: 78px;
|
|
|
|
.order-type-select {
|
|
padding: 20rpx 30rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.order-type-title {
|
|
background-color: #FFF9F0;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
padding: 20rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
.order-type-options {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 20rpx;
|
|
|
|
.order-type-option {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 48%;
|
|
height: 80rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 40rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
position: relative;
|
|
border: 2rpx solid transparent;
|
|
|
|
&.active {
|
|
border: 2rpx solid #FFB13F;
|
|
background-color: #FFF5E5;
|
|
}
|
|
|
|
.info-icon {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.companion-info-popup {
|
|
width: 600rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 40rpx;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0rpx;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background-color: #FFB13F;
|
|
}
|
|
|
|
.companion-info-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-bottom: 1rpx solid #EFEFEF;
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 100rpx;
|
|
}
|
|
|
|
.companion-info-content {
|
|
.companion-info-item {
|
|
margin-bottom: 40rpx;
|
|
|
|
.companion-info-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.companion-info-value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.companion-info-close {
|
|
position: absolute;
|
|
bottom: -80rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.details-subscribe {
|
|
background-color: #FFFFFF;
|
|
padding: 10px;
|
|
width: 100%;
|
|
height: 78px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
|
|
.details-btn {
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
background: #FFB13F;
|
|
font-size: 16px;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
.service-new{
|
|
.service-new-flag {
|
|
width: 8rpx;
|
|
height: 32rpx;
|
|
background: #FFBF60;
|
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
.split-line{
|
|
width: 100%;
|
|
height: 1rpx;
|
|
background: #EFEFEF;
|
|
}
|
|
.service-new-title{
|
|
display: flex;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 33rpx;
|
|
margin: 42rpx 0 30rpx;
|
|
justify-content: space-between;
|
|
.service-new-title-left{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.service-new-unselect{
|
|
height: 156rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.add-pet{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #FFAA48;
|
|
line-height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.service-new-details-desc{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #A94F20;
|
|
line-height: 28rpx;
|
|
text-align: left;
|
|
padding: 26rpx 0;
|
|
}
|
|
.personal-address-info{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
margin: 32rpx 0;
|
|
width: 80%;
|
|
.personal-address-text{
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
}
|
|
.personal-address-people{
|
|
color: #7D8196;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.service-new-address-selected{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.personal-pet-list {
|
|
margin-top: 20rpx;
|
|
|
|
.personal-pet-list-item {
|
|
margin-bottom: 20rpx;
|
|
background-color: #F9F9F9;
|
|
height: 172rpx;
|
|
border-radius: 8rpx;
|
|
|
|
.personal-pet-info {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|