topnuomi
/
xx-worker-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加个人中心、提现、服务设置页面

This commit is contained in:
TOP糯米 2023-03-01 18:34:11 +08:00
parent 8f6a01a3b9
commit f64ddec11d
5 changed files with 453 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.vue
View File

@ -57,6 +57,9 @@ export default {
.placeholder-style-4 {
color: #999999;
}
.placeholder-style-5 {
color: #666666;
}
// 沉浸样式
.immerse-image {
width: 100%;
@ -95,4 +98,19 @@ export default {
}
}
}
.common-save-form-btn {
width: 100%;
padding: 60rpx 0;
.btn {
width: 570rpx;
height: 98rpx;
background: #8b9beb;
border-radius: 49rpx;
margin: 0 auto;
font-size: 36rpx;
text-align: center;
line-height: 98rpx;
color: #ffffff;
}
}
</style>

14
src/pages.json
View File

@ -13,6 +13,13 @@
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/member/service-info",
"style": {
"navigationBarTitleText": "服务信息",
"enablePullDownRefresh": true
}
},
{
"path": "pages/order/order",
"style": {
@ -40,6 +47,13 @@
"navigationBarTitleText": "我的",
"enablePullDownRefresh": true
}
},
{
"path": "pages/member/cash-withdraw",
"style": {
"navigationBarTitleText": "我要提现",
"enablePullDownRefresh": true
}
}
],
"globalStyle": {

102
src/pages/member/cash-withdraw.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<app-layout title="我要提现">
<view class="withdraw-section">
<view class="title">提现金额</view>
<view class="input-box">
<text class="icon">¥</text>
<input
class="input"
type="number"
v-model="money"
placeholder="请输入提现金额，不可低于20元"
placeholder-class="placeholder-style-4"
/>
</view>
<view class="total-box">
<text class="text">可提现金额：</text>
<text class="num">¥0.00</text>
</view>
</view>
<view class="withdraw-section withdraw-desc">
<view class="title">提现说明</view>
<view class="content">
1、提现周期为每周三提现一次，2小时内到账 2、请谨慎绑定微信号，信息错误将导致错误打款，责任由师傅自行承担
3、家居售后问题通常在用户试用中出现，如漏水、渗水、堵塞、固定松动等，因此平台对服务后订单设置7日反馈期，反馈期内若服务无售后问题，或非安装问题所造成售后，反馈期过后该笔订单金额自动转入可提现余额。
</view>
</view>
<view class="common-save-form-btn">
<view class="btn">确定提现</view>
</view>
</app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
export default {
name: "member-cash-withdraw",
data() {
return {};
},
components: {
AppLayout,
},
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {},
};
</script>
<style lang="less" scoped>
.withdraw-section {
width: 100%;
box-sizing: border-box;
padding: 38rpx 46rpx;
background-color: #ffffff;
.title {
font-size: 30rpx;
font-weight: bold;
color: #2d2d2d;
line-height: 30rpx;
}
.input-box {
display: flex;
align-items: center;
margin: 50rpx 0;
.icon {
font-size: 48rpx;
line-height: 48rpx;
font-weight: bold;
color: #f83232;
}
.input {
width: 500rpx;
font-size: 32rpx;
color: #666666;
margin-left: 36rpx;
}
}
.total-box {
line-height: 30rpx;
.text {
font-size: 30rpx;
color: #333333;
}
.num {
font-weight: bold;
color: #fb3636;
}
}
}
.withdraw-desc {
margin-top: 28rpx;
.content {
font-size: 26rpx;
color: #999999;
line-height: 40rpx;
padding: 50rpx 0 80rpx 0;
}
}
</style>

76
src/pages/member/member.vue
View File

@ -1,5 +1,5 @@
<template>
<app-layout v-model="safePt" btnType="unset" headerBackgroundColor="unset" :hasPaddingTop="false">
<app-layout v-model="safePt" btnType="unset" headerBackgroundColor="unset" :hasPaddingTop="false" :layoutPb="utils.rpx2px(40)">
<view class="member-container">
<view class="immerse-image">
<image class="image" :src="backgroundImage" mode="aspectFill" />
@ -57,6 +57,42 @@
</view>
</view>
</view>
<view class="member-section">
<view class="menu-item" @click="utils.toPage('/pages/member/cash-withdraw')">
<text class="title">我要提现</text>
<text class="iconfont icon-jinru"></text>
</view>
<view class="menu-item">
<text class="title">服务无忧保</text>
<text class="iconfont icon-jinru"></text>
</view>
<view class="menu-item">
<text class="title">提现记录</text>
<text class="iconfont icon-jinru"></text>
</view>
<view class="menu-item">
<text class="title">明细</text>
<text class="iconfont icon-jinru"></text>
</view>
</view>
<view class="member-section">
<view class="menu-item" @click="utils.toPage('/pages/member/service-info')">
<text class="title">设置服务信息</text>
<text class="iconfont icon-jinru"></text>
</view>
<view class="menu-item">
<text class="title">我的评价</text>
<text class="iconfont icon-jinru"></text>
</view>
<view class="menu-item">
<text class="title">在线客服</text>
<text class="iconfont icon-jinru"></text>
</view>
<view class="menu-item">
<text class="title">设置</text>
<text class="iconfont icon-jinru"></text>
</view>
</view>
</view>
</view>
</app-layout>
@ -191,4 +227,42 @@ export default {
}
}
}
.member-section {
width: 100%;
box-sizing: border-box;
padding: 15rpx 22rpx;
background-color: #ffffff;
margin-top: 22rpx;
}
.menu-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 36rpx 0;
border-bottom: 2rpx solid #efefef;
.title {
font-size: 30rpx;
color: #333333;
display: flex;
align-items: center;
line-height: 30rpx;
}
.title::before {
display: inline-block;
content: "";
width: 12rpx;
height: 27rpx;
background: #8b9aeb;
margin-right: 14rpx;
}
.iconfont {
font-size: 30rpx;
color: #666666;
line-height: 30rpx;
}
}
.menu-item:last-child {
border-bottom: 0;
}
</style>

244
src/pages/member/service-info.vue Normal file
View File

@ -0,0 +1,244 @@
<template>
<app-layout title="设置服务信息">
<view class="service-info-container">
<view class="tips-box">
<widget-tips text="完成入驻后，平台将会根据您所设置的服务信息推送消息" textColor="#ffa800" />
</view>
<view class="service-form-container">
<view class="input-item">
<text class="title">*我的头像</text>
<view class="headimg-box" @click="uploadHeadImg">
<image class="image" :src="headimg" mode="aspectFill" />
</view>
<text class="iconfont icon-jinru"></text>
</view>
<view class="input-item">
<text class="title">*服务区域</text>
<picker mode="selector" :range="areaList" range-key="name" @change="changeArea" class="select-widget">
<text class="limit-line clamp-1">
{{ areaText ? areaText : "请选择服务区域" }}
</text>
</picker>
<text class="iconfont icon-jinru"></text>
</view>
<view class="input-item">
<text class="title">*服务分类</text>
<picker mode="selector" :range="cateList" range-key="name" @change="changeCate" class="select-widget">
<text class="limit-line clamp-1">
{{ cateText ? cateText : "请选择服务分类" }}
</text>
</picker>
<text class="iconfont icon-jinru"></text>
</view>
<view class="input-item">
<text class="title">车辆类型</text>
<picker mode="selector" :range="carTypeList" range-key="name" @change="changeCarType" class="select-widget">
<text class="limit-line clamp-1">
{{ carTypeText ? carTypeText : "请选择车辆类型" }}
</text>
</picker>
<text class="iconfont icon-jinru"></text>
</view>
<view class="input-item">
<text class="title">*服务类型</text>
<picker
mode="selector"
:range="serviceTypeList"
range-key="name"
@change="changeServiceType"
class="select-widget"
>
<text class="limit-line clamp-1">
{{ serviceTypeText ? serviceTypeText : "请选择服务类型" }}
</text>
</picker>
<text class="iconfont icon-jinru"></text>
</view>
<view class="input-item-section">
<text class="title">*认证资料<text class="desc">请录入身份资料</text></text>
<view class="profile-box">
<input
class="username"
v-model="username"
placeholder="请输入您的姓名"
placeholder-class="placeholder-style-6"
/>
</view>
</view>
</view>
<view class="common-save-form-btn">
<view class="btn">提交审核</view>
</view>
</view>
</app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
import WidgetTips from "@/components/widgets/tips";
export default {
name: "member-service-info",
data() {
return {
headimg: require("@/static/temp/member/2.png"),
areaList: [
{
name: "绵阳",
},
{
name: "成都",
},
],
cateList: [
{
name: "空调安装",
},
{
name: "装修服务",
},
],
carTypeList: [
{
name: "大巴",
},
{
name: "轿车",
},
],
serviceTypeList: [
{
name: "全职",
},
{
name: "兼职",
},
],
areaId: 0,
areaText: "",
cateId: 0,
cateText: "",
carTypeId: 0,
carTypeText: "",
serviceTypeId: 0,
serviceTypeText: "",
};
},
components: {
AppLayout,
WidgetTips,
},
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {
uploadHeadImg() {
uni.chooseImage({});
},
changeArea(e) {
this.areaText = this.areaList[e.detail.value].name;
},
changeCate(e) {
this.cateText = this.cateList[e.detail.value].name;
},
changeCarType(e) {
this.carTypeText = this.carTypeList[e.detail.value].name;
},
changeServiceType(e) {
this.serviceTypeText = this.serviceTypeList[e.detail.value].name;
},
},
};
</script>
<style lang="less" scoped>
.service-info-container {
width: 710rpx;
margin: 0 auto;
}
.service-form-container {
width: 100%;
margin-top: 14rpx;
box-sizing: border-box;
padding: 0 16rpx;
background-color: #ffffff;
.input-item:last-child {
border-bottom: 0;
}
.input-item {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 44rpx 0;
border-bottom: 2rpx solid #e8e7e7;
.title {
font-size: 30rpx;
color: #2d2d2d;
}
.iconfont {
color: #a7a7a7;
}
}
.select-widget {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding-left: 190rpx;
display: flex;
align-items: center;
font-size: 28rpx;
color: #c9c9c9;
}
.headimg-box {
position: absolute;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
box-sizing: border-box;
padding-right: 60rpx;
.image {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
overflow: hidden;
}
}
.input-item-section {
padding: 44rpx 0;
.title {
position: relative;
display: block;
font-size: 30rpx;
color: #2d2d2d;
}
.desc {
position: absolute;
top: 0;
left: 0;
font-size: 28rpx;
color: #c9c9c9;
box-sizing: border-box;
padding-left: 190rpx;
}
}
.profile-box {
width: 100%;
box-sizing: border-box;
padding: 34rpx 10rpx;
.username {
width: 100%;
padding: 32rpx 0;
font-size: 30rpx;
color: #666666;
line-height: 30rpx;
border-bottom: 2rpx solid #e8e7e7;
}
}
}
</style>