Skip to content

X
XiTianSenMall
Commit 4d7db6e8 authored by leiqingsong's avatar leiqingsong
Browse files
Options

Merge branch 'dev_lqs' into 'master' 

Dev lqs

See merge request !4
parents 54558feb 4622842d
Show whitespace changes
Inline Side-by-side
Showing with 720 additions and 315 deletions
H5/src/components/BaseDialog.vue 0 → 100644
View file @ 4d7db6e8
<template>
<div class="base-dialog">
<van-overlay :show="BaseDialogShow">
<div class="wrapper" @click.stop>
<div class="content">
<van-icon
v-if="BaseDialogShowClose"
class="close-icon"
name="close"
size="30"
@click="BaseDialogShow = false"
/>
<p v-if="BaseDialogTitle" class="title">{{ BaseDialogTitle }}</p>
<slot name="content" />
<div class="content-submit-btn">
<van-button round @click="onBtn">{{ BaseDialogBtn }}</van-button>
</div>
</div>
</div>
</van-overlay>
</div>
</template>
<script>
export default {
name: "BaseDialog",
props: {
BaseDialogShowClose: {
type: Boolean,
default: false
},
BaseDialogShow: {
type: Boolean,
default: false
},
BaseDialogTitle: {
type: String,
default: ""
},
BaseDialogBtn: {
type: String,
default: "确定"
}
},
methods: {
onBtn() {
this.$emit("onClick");
}
}
};
</script>
<style lang="scss" scoped>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.content {
position: relative;
box-sizing: border-box;
position: relative;
width: 315px;
height: 293px;
background: #ffffff;
border-radius: 4px;
p {
margin: 0;
}
.title {
margin: 29px 0;
text-align: center;
font-size: 20px;
color: #333333;
}
.close-icon {
position: absolute;
top: 0;
right: 0;
}
.content-submit-btn {
position: absolute;
bottom: 31px;
width: 100%;
text-align: center;
.van-button {
width: 160px;
color: #ffffff;
font-size: 16px;
background-color: #88c678;
}
}
}
</style>
H5/src/plugins/vant-ui.js
View file @ 4d7db6e8
...@@ -3,11 +3,15 @@ import { ...@@ -3,11 +3,15 @@ import {
Button, Button,
Cell, Cell,
CellGroup, CellGroup,
DatetimePicker,
Dialog, Dialog,
DropdownItem,
DropdownMenu,
Field, Field,
Icon, Icon,
NavBar, NavBar,
NoticeBar, NoticeBar,
Overlay,
Picker, Picker,
Popup, Popup,
Swipe, Swipe,
...@@ -23,10 +27,14 @@ Vue.use(Button) ...@@ -23,10 +27,14 @@ Vue.use(Button)
.use(Cell) .use(Cell)
.use(CellGroup) .use(CellGroup)
.use(Dialog) .use(Dialog)
.use(DropdownMenu)
.use(DropdownItem)
.use(DatetimePicker)
.use(Field) .use(Field)
.use(Icon) .use(Icon)
.use(NavBar) .use(NavBar)
.use(NoticeBar) .use(NoticeBar)
.use(Overlay)
.use(Popup) .use(Popup)
.use(Picker) .use(Picker)
.use(Swipe) .use(Swipe)
......
H5/src/router/index.js
View file @ 4d7db6e8
...@@ -19,9 +19,15 @@ const routes = [ ...@@ -19,9 +19,15 @@ const routes = [
{ {
path: "/cash-out", path: "/cash-out",
name: "CashOut", name: "CashOut",
component: () => import("@/views/cash-out"), component: () => import("@/views/cashOut/cash-out"),
meta: { title: "提现" } meta: { title: "提现" }
}, },
{
path: "/cash-out-record",
name: "CashOutRecord",
component: () => import("@/views/cashOut/cash-out-record"),
meta: { title: "提现记录" }
},
{ {
path: "/bank", path: "/bank",
name: "Bank", name: "Bank",
...@@ -76,6 +82,12 @@ const routes = [ ...@@ -76,6 +82,12 @@ const routes = [
component: () => import("@/views/settings"), component: () => import("@/views/settings"),
meta: { title: "设置" } meta: { title: "设置" }
}, },
{
path: "/modefy-avatar",
name: "ModefyAvatar",
component: () => import("@/views/modefyAvatar"),
meta: { title: "更换头像" }
},
{ {
path: "/grade", path: "/grade",
name: "Grade", name: "Grade",
......
H5/src/views/cashOut/cash-out-record.vue 0 → 100644
View file @ 4d7db6e8
<template>
<div class="cash-out-record">
<div id="top-month">
<span style="width: 80px; margin-right: 5px">{{ selected }}</span>
<van-icon name="arrow-down" @click="show = true" />
</div>
<div class="record-list">
<base-refresh-scroll @downLoad="onDownLoad" @upRefresh="onUpRefresh">
<div slot="content">
<div v-for="(item, index) in 20" :key="'record' + index">
<record-item />
</div>
</div>
</base-refresh-scroll>
</div>
<van-popup v-model="show" get-container="#top-month">
<van-datetime-picker
v-model="currentDate"
type="year-month"
@cancel="onPickerCancle"
@confirm="onPickerConfirm"
>
</van-datetime-picker>
</van-popup>
</div>
</template>
<script>
import RecordItem from "./components/recordItem.vue";
import BaseRefreshScroll from "../../components/BaseRefreshScroll.vue";
export default {
components: {
BaseRefreshScroll,
RecordItem
},
name: "CashOutRecord",
data() {
return {
show: false,
options: [{ text: "2021年3月", value: 0 }],
selected: "",
currentDate: new Date()
};
},
mounted() {
this.selected = `${this.currentDate.getFullYear()}年${this.currentDate.getMonth() +
1}月`;
},
methods: {
onUpRefresh() {
console.log("上拉刷新");
},
onDownLoad() {
console.log("下拉加载");
},
onPickerCancle() {
this.show = false;
},
onPickerConfirm(val) {
this.selected = `${val.getFullYear()}年${val.getMonth() + 1}月`;
this.show = false;
}
}
};
</script>
<style lang="scss" scoped>
#top-month {
position: relative;
display: flex;
align-items: center;
height: 44px;
margin-bottom: 10px;
padding-left: 15px;
font-size: 16px;
font-weight: bold;
background-color: #ffffff;
.van-popup {
position: absolute;
top: 145px;
left: 100px;
width: 200px;
max-height: 200px;
.van-picker {
height: 200px;
overflow: hidden;
}
}
::v-deep .van-picker__frame {
border: 1px solid;
}
}
.record-list {
position: relative;
height: calc(100vh - 100px);
}
</style>
H5/src/views/cash-out.vue → H5/src/views/cashOut/cash-out.vue
View file @ 4d7db6e8
...@@ -44,30 +44,59 @@ ...@@ -44,30 +44,59 @@
>提现</van-button >提现</van-button
> >
</div> </div>
<van-dialog v-model="validCodeDialogShow" title="提现" show-cancel-button> <base-dialog
<p style="text-align: center">请输入手机号135****1548的动态验证码</p> base-dialog-title="提现"
base-dialog-btn="提交"
:base-dialog-show="validCodeDialogShow"
:base-dialog-show-close="true"
@onClick="onSubmit"
>
<div slot="content">
<p class="content-text">请输入手机号135****1548的动态验证码</p>
<van-field <van-field
v-model="validCode" v-model="validCode"
type="number" type="number"
class="validCodeInput" class="validCodeInput"
placeholder="请输入" placeholder="请输入"
> >
<div slot="left-icon" class="valid-code"> <img
<img src="@/assets/images/验证码.png" /> slot="left-icon"
</div> class="valid-code"
src="@/assets/images/验证码.png"
/>
</van-field> </van-field>
</van-dialog> </div>
</base-dialog>
<base-dialog
:base-dialog-title="resultDialogTitle"
:base-dialog-show="resultDialog"
@onClick="onSuccess"
>
<div slot="content" style="text-align:center">
<img :src="resultDialogImg" style="width: 70px; height: 76px" alt />
<p style="margin:0;font-size:14px;color:#999999">
{{ resultDialogTip }}
</p>
</div>
<div></div>
</base-dialog>
</div> </div>
</template> </template>
<script> <script>
import BaseDialog from "@/components/BaseDialog.vue";
export default { export default {
components: { BaseDialog },
name: "CashOut", name: "CashOut",
data() { data() {
return { return {
bank: "", bank: "",
money: null, money: null,
remainMoney: 100, remainMoney: 100,
resultDialogTitle: "",
resultDialogTip: "",
resultDialogImg: "",
resultDialog: false,
validCodeDialogShow: false, validCodeDialogShow: false,
validCode: null validCode: null
}; };
...@@ -83,6 +112,21 @@ export default { ...@@ -83,6 +112,21 @@ export default {
} }
this.validCode = null; this.validCode = null;
this.validCodeDialogShow = true; this.validCodeDialogShow = true;
},
onSubmit() {
this.validCodeDialogShow = false;
this.resultDialog = true;
const res = "error";
this.resultDialogTitle = res === "success" ? "提现成功" : "提现失败";
this.resultDialogTip =
res === "success" ? "提现成功，请及时查收" : "提现失败，验证码错误";
this.resultDialogImg =
res === "success"
? require("@/assets/images/成功.png")
: require("@/assets/images/叉号.png");
},
onSuccess() {
this.resultDialog = false;
} }
} }
}; };
...@@ -157,19 +201,26 @@ export default { ...@@ -157,19 +201,26 @@ export default {
} }
} }
} }
.content-text {
width: 185px;
margin: 25px auto;
text-align: center;
font-family: "PingFang-SC-Medium";
font-size: 14px;
color: #333333;
}
.validCodeInput { .validCodeInput {
width: 245px; width: 245px;
margin: 10px auto; margin: 10px auto;
background-color: #f9f9f9; background-color: #f9f9f9;
border-radius: 20px; border-radius: 20px;
.van-field__left-icon {
display: flex;
align-items: center;
}
.valid-code { .valid-code {
width: 16px; width: 16px;
height: 18px; height: 18px;
img {
width: 100%;
height: 100%;
}
} }
} }
</style> </style>
H5/src/views/cashOut/components/recordItem.vue 0 → 100644
View file @ 4d7db6e8
<template>
<div class="record-item">
<img src="@/assets/images/收益.png" />
<div class="item" style="flex:2;margin-left:10px">
<span style="font-size:14px;color:#333333">提现</span>
<span style="font-size:12px;color:#999999">2021.1.14 10:02</span>
</div>
<div class="item" style="flex:1">
<span style="font-size:16px;font-weight:bold;#333333;">￥55</span>
<span :class="`status-process`" style="font-size:12px">银行处理中</span>
</div>
</div>
</template>
<style lang="scss" scoped>
.record-item {
display: flex;
align-items: center;
margin-bottom: 10px;
padding: 0 15px;
width: 100%;
height: 44px;
img {
width: 34px;
height: 34px;
}
.item {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
}
.status-process {
// 银行处理中
color: #88c678;
}
.status-success {
color: #999999;
}
}
</style>
H5/src/views/grade.vue
View file @ 4d7db6e8
...@@ -11,28 +11,22 @@ ...@@ -11,28 +11,22 @@
</div> </div>
<div class="forest-content"> <div class="forest-content">
<div class="forest-level"> <div class="forest-level">
{{level}} {{ level }}
</div>
<div class="nums">
距离下一级直推用户还需增加{{directpush}}
</div>
<div class="nums">
距离下一级团队用户还需增加{{team}}
</div> </div>
<div class="nums">距离下一级直推用户还需增加{{ directpush }}</div>
<div class="nums">距离下一级团队用户还需增加{{ team }}</div>
<div class="level-progress"> <div class="level-progress">
<div class="level-num">{{currentLevel}}</div> <div class="level-num">{{ currentLevel }}</div>
<van-progress :percentage="50" /> <van-progress :percentage="50" />
<div class="level-num">{{nextLevel}}</div> <div class="level-num">{{ nextLevel }}</div>
</div>
<div class="relegation">
保级还需增加￥{{relegationNum}} 业绩
</div> </div>
<div class="relegation">保级还需增加￥{{ relegationNum }} 业绩</div>
</div> </div>
<div class="forest-list"> <div class="forest-list">
<div class="forest-item" v-for="(item,index) in list" :key="index"> <div class="forest-item" v-for="(item, index) in list" :key="index">
<span class="forest-item-num">{{item.num}}</span> <span class="forest-item-num">{{ item.num }}</span>
<div class="forest-item-label"> <div class="forest-item-label">
<span >{{item.label}}</span> <span>{{ item.label }}</span>
<van-icon <van-icon
v-if="item.hasArrow" v-if="item.hasArrow"
name="arrow" name="arrow"
...@@ -47,53 +41,52 @@ ...@@ -47,53 +41,52 @@
</template> </template>
<script> <script>
export default { export default {
name: "grade", name: "grade",
data() { data() {
return { return {
level:'Lv.3白银树', level: "Lv.3白银树",
directpush:'XXX', directpush: "XXX",
team:"XXX", team: "XXX",
relegationNum:"21,141", relegationNum: "21,141",
currentLevel:'Lv.3', currentLevel: "Lv.3",
nextLevel:'Lv.4', nextLevel: "Lv.4",
list:[ list: [
{ {
num:14, num: 14,
label:"团队总人数", label: "团队总人数",
hasArrow:true, hasArrow: true,
urlName:'LeagueNums' urlName: "LeagueNums"
}, },
{ {
num:12, num: 12,
label:"我的直推", label: "我的直推",
hasArrow:true hasArrow: true
}, },
{ {
num:61859, num: 61859,
label:"团队累计总业绩", label: "团队累计总业绩",
hasArrow:false hasArrow: false
}, },
{ {
num:11256, num: 11256,
label:"团队当月新增业绩", label: "团队当月新增业绩",
hasArrow:false hasArrow: false
}, }
] ]
}; };
}, },
methods: { methods: {
handleUrl(urlName){ handleUrl(urlName) {
this.$router.push({name:urlName}) this.$router.push({ name: urlName });
} }
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$white:#ffffff; $white: #ffffff;
.grade-status{ .grade-status {
width: 100%; width: 100%;
height: 298px; height: 298px;
background-image: url("../assets/images/森林状态.png"); background-image: url("../assets/images/森林状态.png");
...@@ -120,23 +113,23 @@ $white:#ffffff; ...@@ -120,23 +113,23 @@ $white:#ffffff;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
} }
} }
.forest-content{ .forest-content {
text-align: center; text-align: center;
padding-top: 25px; padding-top: 25px;
.nums{ .nums {
font-size: 14px; font-size: 14px;
color: $white; color: $white;
line-height: 25px; line-height: 25px;
margin-bottom: 12px; margin-bottom: 12px;
} }
.relegation{ .relegation {
font-size: 16px; font-size: 16px;
color: $white; color: $white;
margin-top: 20px; margin-top: 20px;
} }
} }
.forest-level{ .forest-level {
height: 45px; height: 45px;
font-family: PingFang-SC-Bold; font-family: PingFang-SC-Bold;
font-size: 24px; font-size: 24px;
...@@ -145,12 +138,12 @@ $white:#ffffff; ...@@ -145,12 +138,12 @@ $white:#ffffff;
letter-spacing: 0px; letter-spacing: 0px;
color: #ffffff; color: #ffffff;
} }
.level-progress{ .level-progress {
width: 100%; width: 100%;
padding: 0 30px; padding: 0 30px;
display: flex; display: flex;
align-items: center; align-items: center;
.level-num{ .level-num {
width: 36px; width: 36px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
...@@ -162,18 +155,17 @@ $white:#ffffff; ...@@ -162,18 +155,17 @@ $white:#ffffff;
} }
} }
.forest-list{ .forest-list {
padding: 0 15px; padding: 0 15px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
margin-top: 20px; margin-top: 20px;
.forest-item{ .forest-item {
height: 98px; height: 98px;
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 6px 0px box-shadow: 0px 1px 6px 0px rgba(6, 0, 1, 0.04);
rgba(6, 0, 1, 0.04);
border-radius: 4px; border-radius: 4px;
width: calc(50% - 8px); width: calc(50% - 8px);
margin-bottom: 10px; margin-bottom: 10px;
...@@ -181,7 +173,7 @@ $white:#ffffff; ...@@ -181,7 +173,7 @@ $white:#ffffff;
padding-top: 15px; padding-top: 15px;
box-sizing: border-box; box-sizing: border-box;
} }
.forest-item-num{ .forest-item-num {
height: 19px; height: 19px;
font-family: DINCondensed-Bold; font-family: DINCondensed-Bold;
font-size: 26px; font-size: 26px;
...@@ -191,11 +183,11 @@ $white:#ffffff; ...@@ -191,11 +183,11 @@ $white:#ffffff;
letter-spacing: 0px; letter-spacing: 0px;
color: #333333; color: #333333;
} }
.forest-item-label{ .forest-item-label {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
span{ span {
font-family: PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
...@@ -203,25 +195,23 @@ $white:#ffffff; ...@@ -203,25 +195,23 @@ $white:#ffffff;
letter-spacing: 0px; letter-spacing: 0px;
color: #666666; color: #666666;
} }
.nav-left{ .nav-left {
color: #666; color: #666;
} }
} }
} }
} }
</style> </style>
<style lang=scss> <style lang="scss">
.van-progress{ .van-progress {
width: 250px; width: 250px;
height: 4px; height: 4px;
background-color: rgba(0,0,0,.2); background-color: rgba(0, 0, 0, 0.2);
.van-progress__portion{ .van-progress__portion {
background: #f9f9f9; background: #f9f9f9;
} }
.van-progress__pivot{ .van-progress__pivot {
display: none; display: none;
} }
} }
</style> </style>
H5/src/views/leagueNums.vue
View file @ 4d7db6e8
...@@ -10,10 +10,10 @@ ...@@ -10,10 +10,10 @@
<span class="nav-title">森林状态</span> <span class="nav-title">森林状态</span>
</div> </div>
<div class="panel-list"> <div class="panel-list">
<div class="panel-item" v-for="(item,index) in list" :key="index"> <div class="panel-item" v-for="(item, index) in list" :key="index">
<span class="panel-item-num">{{item.num}}</span> <span class="panel-item-num">{{ item.num }}</span>
<div class="panel-item-label"> <div class="panel-item-label">
<span >{{item.label}}</span> <span>{{ item.label }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -21,56 +21,53 @@ ...@@ -21,56 +21,53 @@
</template> </template>
<script> <script>
export default { export default {
name: "leagueNums", name: "leagueNums",
data() { data() {
return { return {
list:[ list: [
{ {
num:54, num: 54,
label:"普通用户", label: "普通用户"
}, },
{ {
num:34, num: 34,
label:"幼苗", label: "幼苗"
}, },
{ {
num:22, num: 22,
label:"青铜树", label: "青铜树"
}, },
{ {
num:12, num: 12,
label:"白银树", label: "白银树"
}, },
{ {
num:5, num: 5,
label:"黄金树", label: "黄金树"
}, },
{ {
num:1, num: 1,
label:"农场主", label: "农场主"
}, },
{ {
num:0, num: 0,
label:"森林之星", label: "森林之星"
}, },
{ {
num:0, num: 0,
label:"西田森合伙人", label: "西田森合伙人"
} }
] ]
}; };
}, },
methods: { methods: {}
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$white:#ffffff; $white: #ffffff;
.league-nums{ .league-nums {
width: 100%; width: 100%;
height: 298px; height: 298px;
background-image: url("../assets/images/森林状态.png"); background-image: url("../assets/images/森林状态.png");
...@@ -97,20 +94,19 @@ $white:#ffffff; ...@@ -97,20 +94,19 @@ $white:#ffffff;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
} }
}
} }
} .panel-list {
.panel-list{
padding: 0 15px; padding: 0 15px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
margin-top: 20px; margin-top: 20px;
.panel-item{ .panel-item {
height: 113px; height: 113px;
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 2px 12px 0px box-shadow: 0px 2px 12px 0px rgba(6, 0, 1, 0.04);
rgba(6, 0, 1, 0.04);
border-radius: 4px; border-radius: 4px;
width: calc(50% - 8px); width: calc(50% - 8px);
margin-bottom: 10px; margin-bottom: 10px;
...@@ -118,7 +114,7 @@ $white:#ffffff; ...@@ -118,7 +114,7 @@ $white:#ffffff;
padding-top: 15px; padding-top: 15px;
box-sizing: border-box; box-sizing: border-box;
} }
.panel-item-num{ .panel-item-num {
height: 19px; height: 19px;
font-family: DINCondensed-Bold; font-family: DINCondensed-Bold;
font-size: 26px; font-size: 26px;
...@@ -128,11 +124,11 @@ $white:#ffffff; ...@@ -128,11 +124,11 @@ $white:#ffffff;
letter-spacing: 0px; letter-spacing: 0px;
color: #333333; color: #333333;
} }
.panel-item-label{ .panel-item-label {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
span{ span {
font-family: PingFang-SC-Medium; font-family: PingFang-SC-Medium;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
...@@ -140,7 +136,7 @@ $white:#ffffff; ...@@ -140,7 +136,7 @@ $white:#ffffff;
letter-spacing: 0px; letter-spacing: 0px;
color: #666666; color: #666666;
} }
.nav-left{ .nav-left {
color: #666; color: #666;
} }
} }
......
H5/src/views/modefyAvatar.vue 0 → 100644
View file @ 4d7db6e8
<template>
<div class="modefy-avatar">
<img class="avatar" :src="avatar" alt />
<div class="btn">
<van-button type="primary" plain>确定</van-button>
<van-uploader
:max-count="1"
:before-delete="onDeleteAvatar"
:after-read="onRead"
>
<van-button type="primary">上传新头像</van-button>
</van-uploader>
</div>
</div>
</template>
<script>
export default {
name: "ModefyAvatar",
data() {
return {
avatar: ""
};
},
mounted() {
if (!this.avatar) {
this.avatar = require("@/assets/images/no_avatar.png");
}
},
methods: {
onRead(file) {
this.avatar = file.content;
console.log("file", file);
},
onDeleteAvatar(file, detail) {
return new Promise((resolve, reject) => {
this.$dialog
.confirm({
message: "确认删除图片？"
})
.then(() => {
this.fileList.splice(detail.index, 1);
this.$toast.success("删除成功");
resolve();
})
.catch(error => {
this.$toast.fail("已取消");
reject(error);
});
});
}
}
};
</script>
<style lang="scss" scoped>
.modefy-avatar {
box-sizing: border-box;
text-align: center;
padding-top: 115px;
}
.avatar {
width: 345px;
height: 345px;
margin-bottom: 52px;
border-radius: 4px;
}
.btn {
display: flex;
justify-content: space-around;
.van-button {
width: 165px;
}
}
</style>
H5/src/views/my/myStatus.vue
View file @ 4d7db6e8
...@@ -45,6 +45,10 @@ export default { ...@@ -45,6 +45,10 @@ export default {
return { return {
activeTab: "", activeTab: "",
Tabs: [ Tabs: [
{
id: 0,
name: "普通用户"
},
{ {
id: 1, id: 1,
name: "幼苗" name: "幼苗"
......
H5/src/views/rewards/fastest-progress.vue
View file @ 4d7db6e8
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div class="header rank-flex"> <div class="header rank-flex">
<span style="flex:1;text-align:center;">排名</span> <span style="flex:1;text-align:center;">排名</span>
<span style="flex:1"></span> <span style="flex:1"></span>
<span style="flex:2;text-align:center">微信名</span> <span style="flex:2;text-align:center">用户名</span>
<span style="flex:2">本月业绩增长率</span> <span style="flex:2">本月业绩增长率</span>
<span style="flex:1;text-align:center">奖金</span> <span style="flex:1;text-align:center">奖金</span>
</div> </div>
......
H5/src/views/settings.vue
View file @ 4d7db6e8
...@@ -2,48 +2,72 @@ ...@@ -2,48 +2,72 @@
<div class="settings"> <div class="settings">
<van-cell-group class="group-1"> <van-cell-group class="group-1">
<van-cell title="用户名" value="135****1234" /> <van-cell title="用户名" value="135****1234" />
<van-cell is-link center title="头像"> <van-cell is-link center title="头像" @click="onModefy">
<van-uploader <img
v-model="fileList" class="avatar-img"
:max-count="1" src="@/assets/images/no_avatar.png"
:before-delete="onDeleteAvatar" alt="头像"
/> />
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
<van-cell-group> <van-cell-group>
<van-field label="邀请人邀请码" /> <van-cell
is-link
title="邀请人邀请码"
:value="inviteeCode"
@click="fillInviterCode"
/>
<van-cell is-link title="软件更新" value="版本v1.2" /> <van-cell is-link title="软件更新" value="版本v1.2" />
<van-cell is-link title="用户协议" /> <van-cell is-link title="用户协议" />
</van-cell-group> </van-cell-group>
<van-button size="large" class="logout-btn">退出登录</van-button> <van-button size="large" class="logout-btn">退出登录</van-button>
<base-dialog
base-dialog-title="推荐人邀请码"
base-dialog-btn="提交"
:base-dialog-show="inviteeCodeDialog"
:base-dialog-show-close="true"
@onClick="onFillInviteeCode"
>
<div slot="content">
<p class="content-tip">请输入您的推荐人邀请码</p>
<van-field
v-model="fillCode"
type="number"
class="validCodeInput"
placeholder="请输入"
/>
</div>
</base-dialog>
</div> </div>
</template> </template>
<script> <script>
import BaseDialog from "../components/BaseDialog.vue";
export default { export default {
components: { BaseDialog },
name: "Settings", name: "Settings",
data() { data() {
return { return {
fileList: [] fileList: [],
fillCode: "",
inviteeCode: "未填写",
inviteeCodeDialog: false
}; };
}, },
methods: { methods: {
onDeleteAvatar(file, detail) { onModefy() {
return new Promise((resolve, reject) => { this.$router.push("/modefy-avatar");
this.$dialog },
.confirm({ onFillInviteeCode() {
message: "确认删除图片？" this.inviteeCodeDialog = false;
}) this.inviteeCode = this.fillCode;
.then(() => { },
this.fileList.splice(detail.index, 1); fillInviterCode() {
this.$toast.success("删除成功"); if (this.inviteeCode === "未填写") {
resolve(); this.inviteeCodeDialog = true;
}) this.fillCode = "";
.catch(error => { }
this.$toast.fail("已取消");
reject(error);
});
});
} }
} }
}; };
...@@ -56,8 +80,7 @@ export default { ...@@ -56,8 +80,7 @@ export default {
} }
.group-1 { .group-1 {
margin-bottom: 10px; margin-bottom: 10px;
::v-deep .van-uploader__upload, .avatar-img {
::v-deep .van-uploader__preview-image {
width: 37px; width: 37px;
height: 37px; height: 37px;
border-radius: 50%; border-radius: 50%;
...@@ -66,4 +89,15 @@ export default { ...@@ -66,4 +89,15 @@ export default {
.logout-btn { .logout-btn {
margin: 10px 0; margin: 10px 0;
} }
.content-tip {
text-align: center;
font-size: 14px;
color: #333333;
}
.validCodeInput {
width: 245px;
margin: 35px auto;
background-color: #f9f9f9;
border-radius: 20px;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment