335 lines
11 KiB
Vue
335 lines
11 KiB
Vue
<template>
|
||
<app-layout v-model="safePt" btnType="unset" headerBackgroundColor="unset" :showHeader="false">
|
||
<view class="member-container">
|
||
<view class="immerse-image">
|
||
<image class="image" :src="backgroundImage" mode="aspectFill" />
|
||
</view>
|
||
<view class="immerse-main" :style="{ paddingTop: safePt + utils.rpx2px(20) + 'px' }">
|
||
<view class="head">
|
||
<block v-if="isLogin">
|
||
<view class="headimg">
|
||
<image class="image" :src="userInfo.worker.avatar" mode="aspectFill" />
|
||
</view>
|
||
<view class="detail">
|
||
<view class="name">
|
||
<text>{{ userInfo.worker.name }}</text>
|
||
<text class="type" :style="{ color: typeTextColor }">{{ typeText }}</text>
|
||
</view>
|
||
<view class="line id">ID：{{ userInfo.worker.id }}</view>
|
||
<view class="line">注册时间：{{ userInfo.createTime }}</view>
|
||
</view>
|
||
<view class="accept-switch">
|
||
<widget-switch
|
||
v-model="acceptState"
|
||
:color="['#ffffff', '#ffffff']"
|
||
:size="54"
|
||
:open="acceptState"
|
||
@input="setServiceState"
|
||
/>
|
||
<text class="current-state">{{ acceptState ? "正在" : "暂停" }}接单</text>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="login-tips" @click="utils.toPage('/pages/auth/auth')">
|
||
<view class="title"> 立即登录 </view>
|
||
<view class="desc">需要登录后操作</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view v-if="isLogin" class="order-desc">
|
||
<view class="service-data">
|
||
<view class="section-text">
|
||
<text>服务：</text>
|
||
<text class="num">{{ serviceData.times }}</text>
|
||
<text>次</text>
|
||
</view>
|
||
<view class="section-text">
|
||
<text>好评率：</text>
|
||
<text class="num">{{ serviceData.favorableRate }}</text>
|
||
<text>%</text>
|
||
</view>
|
||
<view class="section-text">
|
||
<text>评分：</text>
|
||
<text class="num">{{ serviceData.grade }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="balance-box">
|
||
<view class="balance-section">
|
||
<text class="title">可提现余额（元）</text>
|
||
<text class="num">{{ utils.formatNumber(serviceData.disposableBalance, 2) }}</text>
|
||
</view>
|
||
<view class="balance-section">
|
||
<text class="title">反馈期余额（元）</text>
|
||
<text class="num">{{ utils.formatNumber(serviceData.FreezeBalance, 2) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="common-form-widget-group">
|
||
<view class="widget-item" @click="toPage('/pages/member/cash-withdraw')">
|
||
<text class="title limit-line clamp-1">我要提现</text>
|
||
<text class="iconfont icon-jinru"></text>
|
||
</view>
|
||
<view class="widget-item" @click="showCarefree">
|
||
<text class="title limit-line clamp-1">服务无忧保</text>
|
||
<text class="iconfont icon-jinru"></text>
|
||
</view>
|
||
<view class="widget-item">
|
||
<text class="title limit-line clamp-1">提现记录</text>
|
||
<text class="iconfont icon-jinru"></text>
|
||
</view>
|
||
<view class="widget-item">
|
||
<text class="title limit-line clamp-1">明细</text>
|
||
<text class="iconfont icon-jinru"></text>
|
||
</view>
|
||
</view>
|
||
<view class="common-form-widget-group">
|
||
<view class="widget-item" @click="toPage('/pages/member/service-info')">
|
||
<text class="title limit-line clamp-1">设置服务信息</text>
|
||
<text class="iconfont icon-jinru"></text>
|
||
</view>
|
||
<view class="widget-item">
|
||
<text class="title limit-line clamp-1">我的评价</text>
|
||
<text class="iconfont icon-jinru"></text>
|
||
</view>
|
||
<view class="widget-item" @click="showService = true">
|
||
<text class="title limit-line clamp-1">在线客服</text>
|
||
<text class="iconfont icon-jinru"></text>
|
||
</view>
|
||
<view class="widget-item" @click="toPage('/pages/member/setting')">
|
||
<text class="title limit-line clamp-1">设置</text>
|
||
<text class="iconfont icon-jinru"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<widget-modal v-show="showCarefreeModal" title="服务无忧保" @close="showCarefreeModal = false">
|
||
<view class="modal-content-box">
|
||
<rich-text :nodes="carefreeContent"></rich-text>
|
||
</view>
|
||
</widget-modal>
|
||
<widget-service :showService="showService" @close="showService = false" />
|
||
</app-layout>
|
||
</template>
|
||
|
||
<script>
|
||
import AppLayout from "@/components/layout/layout";
|
||
import WidgetSwitch from "@/components/widgets/switch";
|
||
import WidgetModal from "@/components/widgets/modal";
|
||
import WidgetService from "@/components/widgets/service";
|
||
import { mapGetters, mapState } from "vuex";
|
||
export default {
|
||
name: "member",
|
||
data() {
|
||
return {
|
||
utils: this.$utils,
|
||
models: this.$models,
|
||
timer: null,
|
||
safePt: 0,
|
||
backgroundImage: require("@/static/temp/1.png"),
|
||
acceptState: false,
|
||
typeText: "",
|
||
typeTextColor: "",
|
||
showService: false,
|
||
showCarefreeModal: false,
|
||
carefreeContent: "",
|
||
serviceData: {
|
||
times: 0,
|
||
favorableRate: "0",
|
||
grade: "0",
|
||
disposableBalance: 0,
|
||
FreezeBalance: 0,
|
||
},
|
||
};
|
||
},
|
||
components: {
|
||
AppLayout,
|
||
WidgetSwitch,
|
||
WidgetModal,
|
||
WidgetService,
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
isLogin: "user/isLogin",
|
||
acceptOrder: "user/acceptOrder",
|
||
}),
|
||
...mapState({
|
||
userInfo: (state) => state.user.info,
|
||
finishInfo: (state) => state.user.finishInfo,
|
||
}),
|
||
},
|
||
onLoad() {},
|
||
async onShow() {
|
||
await this.$store.dispatch("user/info");
|
||
if (this.isLogin) {
|
||
if (!this.finishInfo) {
|
||
this.$utils.toPage("/pages/member/service-info");
|
||
}
|
||
this.$models.user.serviceData().then((data) => {
|
||
this.serviceData = data;
|
||
});
|
||
let [typeText, typeTextColor] = this.$models.worker.worketTypeText(this.userInfo.worker.type);
|
||
this.typeText = typeText;
|
||
this.typeTextColor = typeTextColor;
|
||
this.acceptState = this.acceptOrder;
|
||
}
|
||
},
|
||
onReady() {},
|
||
onReachBottom() {},
|
||
onPullDownRefresh() {},
|
||
methods: {
|
||
toPage(url) {
|
||
if (!this.isLogin) {
|
||
return this.$store.commit("user/showLoginModal", true);
|
||
}
|
||
this.$utils.toPage(url);
|
||
},
|
||
showCarefree() {
|
||
// this.showCarefreeModal = true;
|
||
// this.$request({
|
||
// api: "system.carefree",
|
||
// }).then((response) => {
|
||
// this.carefreeContent = response.data.content;
|
||
// });
|
||
},
|
||
setServiceState(state) {
|
||
this.$models.user.setServiceState().then(() => {
|
||
this.$store.dispatch("user/info", true);
|
||
this.acceptState = this.acceptOrder;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.immerse-main {
|
||
padding: 0 20rpx 20rpx;
|
||
}
|
||
.member-container {
|
||
width: 100%;
|
||
}
|
||
.login-tips {
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
margin-bottom: 50rpx;
|
||
.title {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
.desc {
|
||
margin-top: 20rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
.head {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.headimg {
|
||
.image {
|
||
width: 132rpx;
|
||
height: 132rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.detail {
|
||
width: 380rpx;
|
||
color: #ffffff;
|
||
letter-spacing: 2rpx;
|
||
.name {
|
||
font-size: 36rpx;
|
||
line-height: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
.type {
|
||
display: inline-block;
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
margin-left: 30rpx;
|
||
}
|
||
.line {
|
||
font-size: 28rpx;
|
||
line-height: 28rpx;
|
||
}
|
||
.line.id {
|
||
margin: 12rpx 0 12rpx 0;
|
||
}
|
||
}
|
||
.accept-switch {
|
||
text-align: center;
|
||
.current-state {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
line-height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
.order-desc {
|
||
width: 100%;
|
||
margin-top: 90rpx;
|
||
background-color: #ffffff;
|
||
.service-data {
|
||
text-align: center;
|
||
padding: 40rpx 0;
|
||
box-sizing: border-box;
|
||
border-bottom: 3rpx solid #efefef;
|
||
.section-text {
|
||
display: inline-block;
|
||
margin: 0 22rpx;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
.num {
|
||
font-size: 36rpx;
|
||
color: #8b9aeb;
|
||
}
|
||
}
|
||
.balance-box {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.balance-section {
|
||
width: 50%;
|
||
text-align: center;
|
||
color: #333333;
|
||
}
|
||
.title {
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
}
|
||
.num {
|
||
display: block;
|
||
font-size: 36rpx;
|
||
line-height: 36rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
.common-form-widget-group {
|
||
padding: 14rpx 22rpx;
|
||
background-color: #ffffff;
|
||
margin-top: 22rpx;
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.title::before {
|
||
display: inline-block;
|
||
content: "";
|
||
width: 12rpx;
|
||
height: 27rpx;
|
||
background: #8b9aeb;
|
||
margin-right: 14rpx;
|
||
}
|
||
}
|
||
.modal-content-box {
|
||
max-height: 400rpx;
|
||
overflow-y: scroll;
|
||
}
|
||
</style> |