Skip to content

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

提现&银行卡&发布资讯&我的状态页面

parent 68df2f0d
Show whitespace changes
Inline Side-by-side
Showing with 536 additions and 36 deletions
H5/babel.config.js
View file @ ff47d268
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
[
"import",
{
libraryName: "vant",
libraryDirectory: "es",
style: true
}, 'vant']
},
"vant"
]
]
};
H5/package.json
View file @ ff47d268
{
"name": "sen_h5",
"name": "h5",
"version": "0.1.0",
"private": true,
"scripts": {
......
H5/public/index.html
View file @ ff47d268
......@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0 maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
......
H5/src/App.vue
View file @ ff47d268
<template>
<div id="app">
<base-nav-bar :navBarTitle="currentTitle" />
<router-view />
</div>
</template>
<script>
import BaseNavBar from "./components/BaseNavBar.vue";
export default {
components: {
BaseNavBar
},
data() {
return {
currentTitle: ""
};
},
watch: {
$route(val) {
this.currentTitle = val.meta.title;
}
},
created() {
console.log("router", this.$router);
// this.currentTitle = this.$router.currentRoute.meta.title;
}
};
</script>
<style lang="scss">
body {
font-size: 16px;
font-family: "PingFang-SC-Medium";
background: #f8f8f8;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
......
H5/src/components/BaseNavBar.vue 0 → 100644
View file @ ff47d268
<template>
<div class="base-nav-bar">
<van-nav-bar
:title="navBarTitle"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
</div>
</template>
<script>
export default {
name: "BaseNavBar",
props: {
navBarTitle: {
type: String,
default: "标题"
}
},
methods: {
onClickLeft() {
this.$router.go(-1);
},
onClickRight() {
console.log("right");
}
}
};
</script>
H5/src/plugins/vant-ui.js
View file @ ff47d268
import Vue from "vue";
import { Button, Toast } from "vant";
import {
Button,
Cell,
CellGroup,
Field,
Icon,
NavBar,
Picker,
Popup,
Tab,
Tabs,
Toast,
Uploader
} from "vant";
Vue.use(Button).use(Toast);
Vue.use(Button)
.use(Cell)
.use(CellGroup)
.use(Field)
.use(Icon)
.use(NavBar)
.use(Popup)
.use(Picker)
.use(Tab)
.use(Tabs)
.use(Uploader)
.use(Toast);
H5/src/router/index.js
View file @ ff47d268
......@@ -7,7 +7,26 @@ const routes = [
{
path: "/my-status",
name: "MyStatus",
component: () => import("../views/MyStatus.vue")
component: () => import("../views/my/myStatus.vue"),
meta: { title: "我的状态" }
},
{
path: "/publish",
name: "Publish",
component: () => import("@/views/publish"),
meta: { title: "发布资讯" }
},
{
path: "/cash-out",
name: "CashOut",
component: () => import("@/views/cash-out"),
meta: { title: "提现" }
},
{
path: "/bank",
name: "Bank",
component: () => import("@/views/bank"),
meta: { title: "银行卡" }
}
];
......
H5/src/utils/request.js
View file @ ff47d268
......@@ -4,13 +4,13 @@ import { Toast } from "vant";
let loading = null;
const service = axios.create({
baseURL: '',
baseURL: "",
timeout: 5000
})
});
service.interceptors.request.use(
config => {
if(!config.loading) {
if (!config.loading) {
loading = Toast.loading({
forbidClick: true,
message: "加载中..."
......@@ -20,9 +20,9 @@ service.interceptors.request.use(
},
error => {
if (loading) Toast.clear();
console.log('rqquest====错误', error);
console.log("rqquest====错误", error);
}
)
);
service.interceptors.response.use(
response => {
......@@ -31,7 +31,7 @@ service.interceptors.response.use(
return res;
},
error => {
if(loading) Toast.clear();
console.log('response===错误', error);
if (loading) Toast.clear();
console.log("response===错误", error);
}
)
);
H5/src/views/MyStatus.vue deleted 100644 → 0
View file @ 68df2f0d
<template>
<div class="my-status">
我的状态
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</div>
</template>
<script>
export default {
name: "MyStatus"
};
</script>
H5/src/views/bank.vue 0 → 100644
View file @ ff47d268
<template>
<div class="bank">
<van-cell-group>
<van-field
v-model="form.bank"
label="所属银行"
right-icon="arrow"
placeholder="请选择"
size="large"
readonly
/>
<van-field
v-model="form.bankCardId"
type="number"
label="银行卡卡号"
placeholder="请输入"
size="large"
/>
<van-field
v-model="form.name"
label="姓名"
placeholder="请输入"
size="large"
/>
</van-cell-group>
<van-button type="primary" block class="btn" size="large">编辑</van-button>
</div>
</template>
<script>
export default {
name: "Bank",
data() {
return {
form: {
bank: "",
bankCardId: "",
name: ""
}
};
}
};
</script>
<style lang="scss" scoped>
.bank {
padding: 10px 16px;
}
.van-cell-group {
border-radius: 4px;
}
.btn {
margin-top: 20px;
}
::v-deep .van-field__control {
text-align: right;
}
</style>
H5/src/views/cash-out.vue 0 → 100644
View file @ ff47d268
<template>
<div class="cash-out">
<van-cell-group style="margin-bottom: 10px;">
<van-field
v-model="bank"
label="所属银行"
right-icon="arrow"
placeholder="请选择"
size="large"
class="bank"
readonly
/>
</van-cell-group>
<div class="detail">
<p style="font-size: 24px">提现金额</p>
<van-field v-model="money" type="number" label="￥" class="money" />
<div class="remain">
<span style="color: #666666"
>可提现金额{{ remainMoney.toFixed(2) }}元</span
>
<span class="all" @click="allIn">全部提现</span>
</div>
<div class="real">
<p class="real-item">
<span>实际到账</span>
<span>94.19</span>
</p>
<p class="real-item">
<span>税款</span>
<span>6.34</span>
</p>
<p class="explain">
<span>扣税说明</span>
<img
class="explain-img"
src="@/assets/images/explain.png"
alt="解释"
/>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CashOut",
data() {
return {
bank: "",
money: 100,
remainMoney: 100
};
},
methods: {
allIn() {
this.money = this.remainMoney;
}
}
};
</script>
<style lang="scss" scoped>
.cash-out {
padding: 10px 0;
font-family: "PingFang-SC-Medium";
.bank {
::v-deep .van-field__control {
text-align: right;
}
}
.detail {
height: 380px;
padding: 10px 16px;
background-color: #ffffff;
.money {
box-sizing: border-box;
margin: 0 0 10px;
border-bottom: 1px solid #eeeeee;
::v-deep .van-field__label {
width: 16px;
height: 21px;
font-size: 28px;
line-height: 20px;
color: #333333;
}
::v-deep .van-field__control {
font-size: 23px;
color: #333333;
}
}
.remain {
padding: 10px 16px;
font-size: 12px;
.all {
padding-left: 20px;
color: #88c678;
}
}
.real {
padding: 10px 16px;
font-size: 14px;
background-color: #f9f9f9;
.real-item {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.explain {
position: relative;
span {
color: #999999;
}
.explain-img {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
margin-left: 8px;
}
}
}
}
}
</style>
H5/src/views/my/components/invitee.vue 0 → 100644
View file @ ff47d268
<template>
<div class="invitee">
<div class="baseInfo">
<img class="avatar" src="@/assets/logo.png" alt="用户头像" />
<span class="userName">丁晓霞</span>
<span style="font-size: 12px">西天森合伙人</span>
</div>
<div class="detail">
<p>
<span>客户来源</span>
<span>直推</span>
</p>
<p>
<span>累计消费金额</span>
<span>￥1020</span>
</p>
<p>
<span>当月消费金额</span>
<span>￥360</span>
</p>
</div>
</div>
</template>
<style lang="scss" scoped>
.invitee {
height: 130px;
margin-top: 10px;
font-size: 16px;
background-color: #eeeeee;
p {
margin: 10px;
}
}
.baseInfo {
display: flex;
align-items: center;
padding-left: 10px;
padding-top: 10px;
.avatar {
width: 25px;
height: 25px;
border-radius: 50%;
}
.userName {
margin: 0 10px;
font-size: 16px;
font-weight: bold;
}
}
.detail {
padding-left: 35px;
padding-right: 10px;
font-size: 14px;
p {
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>
\ No newline at end of file
H5/src/views/my/myStatus.vue 0 → 100644
View file @ ff47d268
<template>
<div class="my-status">
<div class="userInfo"></div>
<div class="status">
<van-tabs
v-model="activeTab"
swipeable
sticky
color="#28b537"
>
<van-tab v-for="item in Tabs" :key="`tba-${item.id}`" :title="item.name">
<invitee-item></invitee-item>
</van-tab>
</van-tabs>
</div>
</div>
</template>
<script>
import InviteeItem from './components/invitee'
export default {
name: "MyStatus",
components: {
InviteeItem
},
data() {
return {
activeTab: "",
Tabs: [
{
id: 1,
name: "幼苗"
},
{
id: 2,
name: "青铜树"
},
{
id: 3,
name: "白银树"
},
{
id: 4,
name: "黄金树"
},
{
id: 5,
name: "农场主"
},
{
id: 6,
name: "森林之星"
},
{
id: 7,
name: "西田森合伙人"
}
]
};
}
};
</script>
<style lang="scss" scoped>
.userInfo {
height: 120px;
background-color: #ffffff;
border-radius: 4px;
margin-bottom: 20px;
}
::v-deep .van-tabs__content {
height: 100vh;
background-color: #ffffff;
}
</style>
H5/src/views/publish.vue 0 → 100644
View file @ ff47d268
<template>
<div class="publish">
<van-cell-group class="content">
<van-field
v-model="message"
autosize
type="textarea"
maxlength="200"
placeholder="这一刻的想法..."
show-word-limit
/>
<van-uploader
class="add"
multiple
v-model="fileList"
:after-read="afterRead"
>
<img
class="add-img"
src="@/assets/images/editAdd.png"
alt="添加图片和视频"
/>
</van-uploader>
</van-cell-group>
<div class="btn">
<van-button type="primary" size="large">发布</van-button>
</div>
</div>
</template>
<script>
export default {
name: "publish",
data() {
return {
message: "",
fileShow: false,
fileList: []
};
},
methods: {
openPopup() {
this.fileShow = true;
},
afterRead(file) {
console.log(file);
}
}
};
</script>
<style lang="scss" scoped>
.content {
position: relative;
height: 350px;
margin-top: 10px;
background-color: #fff;
.van-field {
height: 230px;
}
::v-deep .van-field__word-limit {
position: absolute;
right: 0;
bottom: 0;
}
.add {
position: absolute;
left: 10px;
bottom: 20px;
.add-img {
width: 88px;
height: 88px;
}
}
}
.btn {
padding: 10px 16px;
}
</style>
H5/vue.config.js
View file @ ff47d268
const name = "西田森App";
module.exports = {
css: {
loaderOptions: {
......@@ -6,10 +8,13 @@ module.exports = {
require("autoprefixer"),
require("postcss-pxtorem")({
rootValue: 37.5, // 换算基数，设计稿整宽=750 => 75
propList: ['*']
propList: ["*"]
})
]
}
}
},
configureWebpack: {
name: name
}
}
\ No newline at end of file
};
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