连云港陪玩陪聊
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.
 
 
 
 
 
 
chunwan/pages/peiwan/apply.vue

314 lines
6.8 KiB

<template>
<view class="apply">
<view class="apply-hd">
<view class="a">接单状态</view>
<view class="b">
<view class="item" v-if="userInfo.role == 1" :class="tabIndex == 0?'item-on':''" @click="tabItem(0)">
<image class="img1" src="@/static/icon-check.png"></image>
<image class="img2" src="@/static/icon-check-on.png"></image>空闲
</view>
<view class="item" :class="tabIndex == 1?'item-on':''" @click="tabItem(1)">
<image class="img1" src="@/static/icon-check.png"></image>
<image class="img2" src="@/static/icon-check-on.png"></image>接单中
</view>
<view class="item" :class="tabIndex == 2?'item-on':''" @click="tabItem(2)">
<image class="img1" src="@/static/icon-check.png"></image>
<image class="img2" src="@/static/icon-check-on.png"></image>忙碌中
</view>
</view>
</view>
<view class="apply-bd">
<view class="title">服务内容</view>
<view class="list">
<view class="item" v-for="(a,idx) in list" :class="a.select?(a.type==1?'item-on item-active':'item-active1'):(a.type==1?'item-on':'')" :key="idx" @click="selectItem(idx)">
<view class="name">{{a.name}}</view>
<view class="price">{{a.price}}元</view>
</view>
</view>
</view>
<view class="apply-fd">
<view class="btn" v-if="userInfo.role == 1" @click="toReg(1)">成为陪玩师</view>
<view class="btn" v-else @click="toReg(2)">保存</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabIndex: -1,
id: "",
list: [],
clickIndex: -1,
userInfo: {}
};
},
onLoad(o) {
this.id = o.id;
this.getUserInfo();
},
methods: {
//获取用户信息
async getUserInfo() {
const { code, data , msg } = await this.$api.findUserInfo({userId: uni.getStorageSync("userInfo").id});
if(code == 200){
this.userInfo = data;
this.tabIndex = data.acceptStatus == 1?1:(data.acceptStatus == 2?2:-1)
this.sitterList();
uni.setStorageSync("userInfo",data);
uni.setNavigationBarTitle({
title: this.userInfo.role == 2?"陪玩设置":"陪玩申请"
})
}else{
uni.showToast({
title: msg,
position: "bottom",
icon: "none",
})
}
},
async toReg(type) {
if(type==1){
if(this.tabIndex == -1){
uni.showToast({
title: "请选接单状态",
position: "bottom",
icon: "none",
})
return ;
}
let arr = [];
this.list.map(a=>{
if(a.select){
arr.push(a.id)
}
})
if(arr.length == 0){
uni.showToast({
title: "请选择服务",
position: "bottom",
icon: "none",
})
return ;
}
const {code,data} = await this.$api.sitterRegister({
userId: uni.getStorageSync("userInfo").id,
configId: arr.join(","),
acceptStatus: this.tabIndex
})
if(code == 200){
uni.showToast({
title: "提交成功"
})
setTimeout(()=>{
uni.redirectTo({
url: "/pages/peiwan/success"
})
},2000)
}else{
uni.showToast({
title: msg,
position: "bottom",
icon: "none",
})
}
}else{
let arr = [];
this.list.map(a=>{
if(a.select){
arr.push(a.id)
}
})
if(arr.length == 0){
uni.showToast({
title: "请选择服务",
position: "bottom",
icon: "none",
})
return ;
}
const {code,data} = await this.$api.editSitter({
userId: uni.getStorageSync("userInfo").id,
configId: arr.join(","),
acceptStatus: this.tabIndex
})
if(code == 200){
uni.showToast({
title: "提交成功"
})
}else{
uni.showToast({
title: msg,
position: "bottom",
icon: "none",
})
}
}
},
tabItem(index) {
this.tabIndex = index;
},
selectItem(index) {
this.clickIndex = index;
this.list[index].select = !this.list[index].select
},
//获取服务列表
async sitterList() {
const that = this;
let {code,data} = await this.$api.sitterList({
userId: uni.getStorageSync("userInfo").id,
page: 1,
limit: 20
})
if(code == 200){
if(data.total>=1){
data.list.map(a=>{
a.select = false;
if(that.userInfo.sitterServiceList && that.userInfo.sitterServiceList.length > 0){
that.userInfo.sitterServiceList.map(b=>{
if(a.id == b.id){
a.select = true
}
})
}
})
}
this.list = data.list;
}else{
uni.showToast({
title: msg,
position: "bottom",
icon: "none",
})
}
},
}
}
</script>
<style scoped lang="scss">
.apply{
padding: 0 25rpx;
overflow: hidden;
&-fd{
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 21;
padding: 30rpx 25rpx;
box-sizing: border-box;
.btn{
width: 100%;
height: 98rpx;
background: linear-gradient(0deg, #000000, #3D3B38);
box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
border-radius: 98rpx;
font-weight: 400;
font-size: 30rpx;
color: #FFFFFF;
text-align: center;
line-height: 98rpx;
}
}
&-bd{
margin-top: 20rpx;
.list{
width: 110%;
overflow: hidden;
box-sizing: border-box;
margin-top: 20rpx;
.item{
width: 220rpx;
background: url(@/static/icon-xianxia.png) center -2px no-repeat;
background-size: cover;
height: 120rpx;
float: left;
text-align: left;
padding: 30rpx;
box-sizing: border-box;
border: 1px solid #F3F4F5;
margin-right: 20rpx;
margin-bottom: 20rpx;
overflow: hidden;
border-radius: 20rpx;
&-on{
background: url(@/static/icon-xianshang.png) center top no-repeat;
background-size: cover;
}
&-active{
border: 1px solid #27d4c1;
}
&-active1{
border: 1px solid #f35d4c;
}
.name{
font-weight: 500;
font-size: 28rpx;
color: #222222;
white-space: nowrap;
overflow: hidden;
}
.price{
font-weight: 500;
font-size: 24rpx;
color: #E70C0C;
margin-top: 10rpx;
}
}
}
}
&-hd{
height: 110rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding: 0 40rpx;
display: flex;
align-items: center;
box-sizing: border-box;
margin: 0 auto;
margin-top: 20rpx;
.a{
font-weight: 500;
font-size: 30rpx;
color: #999999;
}
.b{
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.item{
flex: 1;
display: flex;
align-items: center;
font-weight: 500;
font-size: 30rpx;
color: #222222;
justify-content: center;
image{
width: 32rpx;
height: 32rpx;
margin-right: 20rpx;
}
.img1{
display: block;
}
.img2{
display: none;
}
&-on{
.img2{
display: block;
}
.img1{
display: none;
}
}
}
}
}
}
</style>