Commit 5781e1cf authored by leiqingsong's avatar leiqingsong

Merge branch 'dev_lqs' into 'master'

Dev lqs

See merge request !2
parents 50aac32e 0f8a6854
{
"name": "h5",
"name": "sen_h5",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,
......@@ -1923,6 +1923,23 @@
}
}
},
"@vue/composition-api": {
"version": "1.0.0-rc.2",
"resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-rc.2.tgz",
"integrity": "sha512-R4XEvT+qXiT/lnsLzqhjkR/L/ALuNeeQPZqredpLduGKwZtmt2l5I3kT1W+c/157hrY732eFlsPUGz/q9vFaYg==",
"dev": true,
"requires": {
"tslib": "^2.1.0"
},
"dependencies": {
"tslib": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
"integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==",
"dev": true
}
}
},
"@vue/eslint-config-prettier": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz",
......@@ -4662,6 +4679,22 @@
"safer-buffer": "^2.1.0"
}
},
"echarts": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.0.2.tgz",
"integrity": "sha512-En0VYpc96nw2/2AZoBWPHsGi471zMublttj50kfFpYAeR4geup0Tj9iVgEXh7QYZFPnRiruDJEjcB5PXZ+BYzQ==",
"requires": {
"tslib": "2.0.3",
"zrender": "5.0.4"
},
"dependencies": {
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
}
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
......@@ -6884,6 +6917,11 @@
}
}
},
"js-cookie": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
"integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
},
"js-message": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
......@@ -9414,6 +9452,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-detector": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
"integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
},
"resolve": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
......@@ -11186,6 +11229,21 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
},
"vue-demi": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.6.1.tgz",
"integrity": "sha512-2DI0owOzgEDnEBoXpp0nTBquAWLZqVf/+AOJpPUnviT17unMELEPNy5BdSRnQEz+DA0STtqaz+MZtwhzlDHm5Q=="
},
"vue-echarts": {
"version": "6.0.0-alpha.5",
"resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.0-alpha.5.tgz",
"integrity": "sha512-5kWxvmXnWcrdG4bKGhUoPmQgLmHXNTmmLXpfwnkANcTspwW04ooi2DdzS8x1VSHCl7bMGDBoVzZtphN5iB7eMw==",
"requires": {
"core-js": "^3.6.5",
"resize-detector": "^0.3.0",
"vue-demi": "^0.6.0"
}
},
"vue-eslint-parser": {
"version": "7.5.0",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.5.0.tgz",
......@@ -12234,6 +12292,21 @@
"dev": true
}
}
},
"zrender": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.0.4.tgz",
"integrity": "sha512-DJpy0yrHYY5CuH6vhb9IINWbjvBUe/56J8aH86Jb7O8rRPAYZ3M2E469Qf5B3EOIfM3o3aUrO5edRQfLJ+l1Qw==",
"requires": {
"tslib": "2.0.3"
},
"dependencies": {
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
}
}
}
}
}
{
"name": "h5",
"name": "sen_h5",
"author": "lqs",
"version": "0.1.0",
"private": true,
"scripts": {
......@@ -12,10 +13,13 @@
"autoprefixer": "^8.0.0",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"echarts": "^5.0.2",
"js-cookie": "^2.2.1",
"minirefresh": "^2.0.2",
"postcss-loader": "^5.0.0",
"vant": "^2.12.6",
"vue": "^2.6.11",
"vue-echarts": "^6.0.0-alpha.5",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
......@@ -25,6 +29,7 @@
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/composition-api": "^1.0.0-rc.2",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.13.3",
......
<template>
<div id="app">
<base-nav-bar :navBarTitle="currentTitle" />
<base-nav-bar v-if="!$route.meta.noNav" :navBarTitle="currentTitle" />
<router-view />
</div>
</template>
......@@ -20,10 +20,6 @@ export default {
$route(val) {
this.currentTitle = val.meta.title;
}
},
created() {
console.log("router", this.$router);
// this.currentTitle = this.$router.currentRoute.meta.title;
}
};
</script>
......
import request from "@/utils/request";
/**
* 发布图文资讯
* @param {*} params
* @param {*} file 图片文件
*/
export function uploadImage(params, file) {
return request({
url: "/ZX/multipleImageUpload",
method: "post",
headers: { "Content-Type": "multipart/form-data" },
params,
data: file
});
}
import request from "@/utils/request";
// 获取token
export function getToken() {
// 登录
export function Login() {
return request({
url: "/user/login?id=1",
method: "get"
......
......@@ -22,6 +22,7 @@ export default {
const that = this;
this.miniRefresh = new window.MiniRefresh({
container: "#minirefresh",
isScrollBar: false,
down: {
offset: 50,
callback: function() {
......
......@@ -2,10 +2,11 @@ import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "amfe-flexible";
import "@/plugins/vant-ui.js";
import MiniRefreshTools from "minirefresh";
import "minirefresh/dist/debug/minirefresh.css";
import "amfe-flexible";
import "@/plugins/vant-ui.js";
import "@/plugins/echarts-plugins.js";
Vue.use(MiniRefreshTools);
Vue.config.productionTip = false;
......
import Vue from "vue";
import * as echarts from "echarts/core";
import ECharts from "vue-echarts";
// 手动引入 ECharts 各模块来减小打包体积
import {
GraphicComponent,
TooltipComponent,
LegendComponent
} from "echarts/components";
import { PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
TooltipComponent,
LegendComponent,
PieChart,
CanvasRenderer,
GraphicComponent
]);
// 全局注册组件(也可以使用局部注册)
Vue.component("v-chart", ECharts);
......@@ -7,8 +7,11 @@ import {
Field,
Icon,
NavBar,
NoticeBar,
Picker,
Popup,
Swipe,
SwipeItem,
Tab,
Tabs,
Toast,
......@@ -22,8 +25,11 @@ Vue.use(Button)
.use(Field)
.use(Icon)
.use(NavBar)
.use(NoticeBar)
.use(Popup)
.use(Picker)
.use(Swipe)
.use(SwipeItem)
.use(Tab)
.use(Tabs)
.use(Uploader)
......
......@@ -27,6 +27,54 @@ const routes = [
name: "Bank",
component: () => import("@/views/bank"),
meta: { title: "银行卡" }
},
{
path: "/income",
component: () => import("@/views/income/index"),
children: [
{
path: "detail",
name: "IncomeDetail",
component: () => import("@/views/income/income-detail"),
meta: { title: "收益明细查看" }
},
{
path: "wallet",
name: "Wallet",
component: () => import("@/views/income/wallet"),
meta: { title: "钱包" }
}
]
},
{
path: "/rewards",
component: () => import("@/views/rewards/index"),
children: [
{
path: "fastest-progress",
name: "FastestProgress",
component: () => import("@/views/rewards/fastest-progress"),
meta: { title: "进步奖", noNav: true }
},
{
path: "month-award",
name: "MonthAward",
component: () => import("@/views/rewards/month-award"),
meta: { title: "月度奖励", noNav: true }
}
]
},
{
path: "/instructions",
name: "Instructions",
component: () => import("@/views/instructions"),
meta: { title: "用户协议" }
},
{
path: "/settings",
name: "Settings",
component: () => import("@/views/settings"),
meta: { title: "设置" }
}
];
......
import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
import user from "./modules/user";
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
const store = new Vuex.Store({
modules: {
user
},
getters
});
export default store;
import { Login } from "@/api/user";
import { getToken, setToken } from "@/utils/auth";
const getDefaultState = () => {
return {
token: getToken()
};
};
const state = getDefaultState();
const mutations = {
RESET_STATE: state => {
Object.assign(state, getDefaultState());
},
SET_TOKEN: (state, token) => {
return (state.token = token);
}
};
const actions = {
login({ commit }) {
return new Promise((resolve, reject) => {
Login()
.then(res => {
if (res.code === 0) {
const token = res.data;
commit("SET_TOKEN", token);
setToken(token);
resolve();
} else {
reject(res);
}
})
.catch(error => {
reject(error);
});
});
}
};
export default {
namespaced: true,
state,
mutations,
actions
};
import Cookies from "js-cookie";
const TokenKey = "Sen_H5";
export function setToken(token) {
return Cookies.set(TokenKey, token);
}
export function getToken() {
return Cookies.get(TokenKey);
}
export function removeToken() {
return Cookies.remove(TokenKey);
}
......@@ -4,12 +4,14 @@ import { Toast } from "vant";
let loading = null;
const service = axios.create({
baseURL: "http://8b4afafedf25.ngrok.io",
baseURL: "http://192.168.204.152:8997",
timeout: 5000
});
service.interceptors.request.use(
config => {
config.headers["Authorization"] =
"eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ7XCJpZFwiOjEsXCJpbnZpdGVDb2RlXCI6XCIxXCIsXCJwYXNzd29yZFwiOlwiMTIzXCIsXCJ1c2VySWRcIjpcIjFcIixcInVzZXJMZXZlbFwiOjR9IiwiaWF0IjoxNjE0MzI3OTY0fQ.f9RPBOMo0BMMbWPnQIhvfLe535as60dk_SZoXMYOT3bHYjoYST-mivTcKC-u4grEpYZMax9RgyuHXCYydZPzQw";
if (!config.loading) {
loading = Toast.loading({
forbidClick: true,
......
<template>
<div class="income-detail">
<div class="chart-box">
<v-chart class="chart" :option="pieOption" />
</div>
<div class="detail">
<p style="font-size:14px;font-weight:bold;">收益明细</p>
<div class="detail-list">
<base-refresh-scroll @downLoad="onDownLoad" @upRefresh="onUpRefresh">
<div slot="content">
<div
v-for="(item, index) in 10"
:key="`income-detail-${index}`"
class="detail-list-item"
>
<span>工资收益</span>
<span>¥55</span>
<span class="time">2021/02/26 10:02</span>
</div>
</div>
</base-refresh-scroll>
</div>
</div>
</div>
</template>
<script>
import BaseRefreshScroll from "../../components/BaseRefreshScroll.vue";
export default {
components: { BaseRefreshScroll },
name: "IncomeDetail",
data() {
return {
pieOption: {
legend: [
{
selected: "false",
align: "left",
x: "1%",
y: "65%",
data: ["工资收益"]
},
{
selected: "false",
align: "left",
x: "28%",
y: "65%",
data: ["曾极差奖金"]
},
{
selected: "false",
align: "left",
x: "65%",
y: "65%",
data: ["自身消费返佣"]
},
{
selected: "false",
align: "left",
x: "1%",
y: "75%",
data: ["培育奖"]
},
{
selected: "false",
align: "left",
x: "28%",
y: "75%",
data: ["月度肥料池分红"]
},
{
selected: "false",
align: "left",
x: "65%",
y: "75%",
data: ["进步奖"]
},
{
selected: "false",
align: "left",
x: "1%",
y: "85%",
data: ["红包"]
},
{
selected: "false",
align: "left",
x: "28%",
y: "85%",
data: ["运营中心补贴"]
},
{
selected: "false",
align: "left",
x: "65%",
y: "85%",
data: ["其他收益"]
}
],
tooltip: {
trigger: "item"
},
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "70%"], // pie 内外环
width: "180",
height: "180",
left: "center",
avoidLabelOverlap: true,
label: {
// 标签
show: false,
position: "outside", // 饼图扇区外侧
overflow: "break"
},
emphasis: {
// 点击圆环上的每一项显示label
label: {
show: false
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: "工资收益" },
{ value: 735, name: "曾极差奖金" },
{ value: 580, name: "自身消费返佣" },
{ value: 484, name: "培育奖" },
{ value: 300, name: "月度肥料池分红" },
{ value: 300, name: "进步奖" },
{ value: 300, name: "红包" },
{ value: 300, name: "运营中心补贴" },
{ value: 300, name: "其他收益" }
]
}
],
graphic: {
type: "group",
top: "80",
left: "center",
height: 80,
children: [
{
type: "text",
top: "25%",
left: "center",
style: {
width: "80",
text: "",
textAlign: "center",
overflow: "truncate",
textVerticaAlign: "middle",
fill: "#3d383a",
fontSize: "16px",
fontWeight: "bold"
}
},
{
type: "text",
top: "50%",
left: "center",
style: {
text: "当前总收益",
textAlign: "center",
textVerticaAlign: "middle",
fill: "#333333",
fontSize: "12px"
}
}
]
}
}
};
},
mounted() {
this.pieOption.graphic.children[0].style.text = "123456";
},
methods: {
onDownLoad(val) {
console.log("下拉刷新", val);
},
onUpRefresh(val) {
console.log("上拉加载", val);
}
}
};
</script>
<style lang="scss" scoped>
.income-detail {
padding: 10px 16px;
}
.chart-box {
width: 345px;
height: 268px;
margin: 15px auto 12px;
background-color: #ffffff;
}
.detail {
box-sizing: border-box;
width: 345px;
margin: 0 auto;
padding: 10px 16px;
font-size: 14px;
background-color: #ffffff;
.detail-list {
position: relative;
height: 309px;
}
.detail-list-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
color: #333333;
.time {
color: #999999;
}
}
}
</style>
<template>
<router-view />
</template>
<template>
<div class="wallet">
<div class="content">
<img class="balance-img" src="@/assets/images/余额.png" alt />
<p
style="position:absolute;top:136px;width:100%;font-size:18px;color:#333333"
>
当月收益
</p>
<div style="position:absolute;top:178px;width:100%">
<span class="month-income">1,285.35</span>
<img
src="@/assets/images/右箭头.png"
alt
style="width:11px;height:18px"
/>
</div>
<div class="bottom-box">
<div class="income-item">
<img src="@/assets/images/待结算.png" alt />
<p>累计收益</p>
<div>
<span class="money">3525.35</span>
<img
src="@/assets/images/右箭头.png"
alt
style="width:8px;height:15px"
/>
</div>
</div>
<div class="income-item">
<img src="@/assets/images/累计收入.png" alt />
<p>可提现</p>
<div>
<span class="money">325.36</span>
<img
src="@/assets/images/右箭头.png"
alt
style="width:8px;height:15px"
/>
</div>
</div>
</div>
<van-button type="primary" class="cash-out-btn">提现</van-button>
</div>
</div>
</template>
<style lang="scss" scoped>
.wallet {
box-sizing: border-box;
height: 100vh;
padding: 10px 16px;
p {
margin: 0;
}
.content {
position: relative;
width: 345px;
height: 90%;
text-align: center;
background-color: #ffffff;
.balance-img {
position: absolute;
top: 72px;
left: 157px;
width: 34px;
height: 34px;
}
.month-income {
margin-right: 10px;
font-size: 28px;
color: #333333;
}
.bottom-box {
position: absolute;
top: 263px;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
font-size: 14px;
color: #666666;
img {
width: 30px;
height: 29px;
}
.income-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 120px;
}
.money {
font-size: 20px;
color: #333333;
margin-right: 10px;
}
}
.cash-out-btn {
position: absolute;
bottom: 96px;
left: 50%;
transform: translateX(-50%);
width: 160px;
}
}
}
</style>
<template>
<div class="instructions">
<div class="content">
<p class="title">西田森APP用户协议</p>
<p style="text-align: left; text-indent: 24px">
<span style="font-size: 12px"
>请您仔细阅读以下条款,并确认您已完全理解本协议之规定,尤其是免除及限制责任的条款、知识产权条款、法律适用及争议解决条款。请您仔细阅读以下条款,并确认您已完全理解本协议之规定,尤其是免除及限制责任的条款、知识产权条款、法律适用及争议解决条款。
</span>
</p>
<p style="text-align: left; text-indent: 24px">
<span style="font-size: 12px">
请您仔细阅读以下条款,并确认您已完全理解本协议之规定,尤其是免除及限制责任的条款、知识产权条款、法律适用及争议解决条款。请您仔细阅读以下条款,并确认您已完全理解本协议之规定,尤其是免除及限制责任的条款、知识产权条款、</span
>
</p>
<p style="text-align: left; text-indent: 24px">
<span style="font-size: 12px">
法律适用及争议解决条款。请您仔细阅读以下条款,并确认您已完全理解本协议之规定,尤其是免除及限制责任的条款、知识产权条款、法律适用及争议解决条款。</span
>
</p>
</div>
</div>
</template>
<script>
export default {
name: "instructions"
};
</script>
<style lang="scss" scoped>
.instructions {
box-sizing: border-box;
padding: 10px 16px;
p {
margin: 0;
}
.title {
margin: 10px auto;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.content {
box-sizing: border-box;
width: 345px;
min-height: 100vh;
padding: 10px 16px;
background-color: #ffffff;
}
}
</style>
......@@ -23,12 +23,16 @@
</van-uploader>
</van-cell-group>
<div class="btn">
<van-button type="primary" size="large">发布</van-button>
<van-button type="primary" size="large" @click="onPublish"
>发布</van-button
>
</div>
</div>
</template>
<script>
import { uploadImage } from "@/api/infomation";
export default {
name: "publish",
data() {
......@@ -39,6 +43,20 @@ export default {
};
},
methods: {
onPublish() {
console.log("发布===文字", this.message);
console.log("发布===文件", this.fileList);
const params = {
userId: "1",
zxField: this.message,
zxAddress: "北京海淀"
};
const fd = new FormData();
this.fileList.forEach(file => {
fd.append("files", file.file);
});
uploadImage(params, fd).then();
},
openPopup() {
this.fileShow = true;
},
......
<template>
<div class="rank-item">
<span :class="['item-flex-1', 'index', `color-rank-${RankIndex}`]">
{{ RankIndex > 9 ? RankIndex : "0" + RankIndex }}
</span>
<div style="flex:1">
<img class="avatar" src="@/assets/images/avatar.png" alt="用户头像" />
</div>
<span class="userName" style="flex:2;text-align:center">135****4857</span>
<span style="flex:2;text-align:center">25%</span>
<span class="item-flex-1" style="color:#fc5202">¥125</span>
</div>
</template>
<script>
export default {
name: "RankItem",
props: {
RankIndex: {
type: Number
}
}
};
</script>
<style lang="scss" scoped>
.rank-item {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
font-family: "PingFang-SC-Medium";
font-size: 14px;
.index {
font-family: "PingFang-SC-Bold";
}
.color-rank-1 {
color: #fe0000;
}
.color-rank-2 {
color: #fcb202;
}
.color-rank-3 {
color: #00a0e9;
}
}
.item-flex-1 {
flex: 1;
text-align: center;
}
.avatar {
width: 35px;
height: 35px;
border-radius: 50%;
}
</style>
<template>
<div class="fastest-progress">
<div class="bg">
<van-icon name="arrow-left" @click="$router.go(-1)" />
<span class="title">本月进步最大奖励池</span>
<span class="award">¥6000.00</span>
</div>
<div class="rank">
<div class="header rank-flex">
<span style="flex:1;text-align:center;">排名</span>
<span style="flex:1"></span>
<span style="flex:2;text-align:center">微信名</span>
<span style="flex:2">本月业绩增长率</span>
<span style="flex:1;text-align:center">奖金</span>
</div>
<div class="rank-flex rank-content">
<base-refresh-scroll>
<div slot="content">
<rank-item
v-for="(item, index) in 20"
:key="index"
:rank-index="index + 1"
/>
</div>
</base-refresh-scroll>
</div>
</div>
</div>
</template>
<script>
import BaseRefreshScroll from "../../components/BaseRefreshScroll.vue";
import RankItem from "./compoments/rankItem.vue";
export default {
name: "FastestProgress",
components: {
RankItem,
BaseRefreshScroll
}
};
</script>
<style lang="scss" scoped>
.fastest-progress {
position: relative;
height: 100vh;
}
.bg {
position: relative;
height: 178px;
color: #ffffff;
background-image: url("../../assets/images/进步奖背景图.png");
background-size: cover;
.van-icon {
position: absolute;
top: 0;
bottom: 0;
width: 52px;
height: 46px;
line-height: 46px;
text-align: center;
font-size: 16px;
color: #ffffff;
}
.title {
position: absolute;
top: 113px;
left: 35px;
font-size: 14px;
}
.award {
position: absolute;
top: 136px;
left: 35px;
font-size: 16px;
}
}
.rank {
position: absolute;
top: 168px;
box-sizing: border-box;
width: 100%;
height: calc(100% - 178px);
overflow: hidden;
padding: 10px;
background-color: #ffffff;
border-radius: 12px;
.header {
height: 36px;
font-size: 13px;
border-bottom: 1px solid #eeeeee;
}
.rank-content {
position: relative;
height: 100%;
overflow: hidden;
}
.rank-flex {
display: flex;
}
}
</style>
<template>
<div class="rewards">
<router-view />
</div>
</template>
<template>
<div class="month-award">
<div class="nav">
<van-icon
name="arrow-left"
size="20"
class="nav-left"
@click="$router.go(-1)"
/>
<span class="nav-title">月度奖励</span>
</div>
<div class="notice">
<van-notice-bar left-icon="volume-o" background="transparent">
<div slot="left-icon" style="margin-right: 10px">
<img class="notice-icon" src="@/assets/images/notice.png" alt />
</div>
<van-swipe
vertical
class="notice-swipe"
:autoplay="3000"
:show-indicators="false"
>
<van-swipe-item>
95.30元进入本月累计奖金池 1-13 14:52:01</van-swipe-item
>
<van-swipe-item>内容 2</van-swipe-item>
<van-swipe-item>内容 3</van-swipe-item>
</van-swipe>
</van-notice-bar>
</div>
<div class="content">
<p style="font-size: 16px; font-weight: bold">本月累计奖金</p>
<p style="font-weight: bold">193,49.00</p>
<p style="font-size: 14px">历史累计奖金:¥110000.00</p>
</div>
<div class="newAdd-my">
<div class="newAdd">
<p>¥9100.00</p>
<div class="bottom">
<img src="@/assets/images/本月新增.png" alt />
<span>本月新增</span>
</div>
</div>
<div class="my">
<p>¥999.00</p>
<div class="bottom">
<img src="@/assets/images/我的份额.png" alt />
<span>我的份额</span>
</div>
</div>
</div>
<div class="level-pool">
<p class="level-pool-title">各等级本月累计奖励池</p>
<p class="level-pool-item">
<span>黄金树等级</span>
<span> ¥1000.00</span>
</p>
<p class="level-pool-item">
<span>农场主等级</span>
<span> ¥1000.00</span>
</p>
<p class="level-pool-item">
<span>森林之星等级</span>
<span> ¥1000.00</span>
</p>
<p class="level-pool-item">
<span>森田合伙人等级</span>
<span> ¥1000.00</span>
</p>
</div>
</div>
</template>
<style lang="scss" scoped>
.month-award {
width: 100%;
height: 447px;
background-image: url("../../assets/images/月度奖励背景图.png");
background-size: cover;
}
.nav {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 46px;
.nav-left {
position: absolute;
top: 0;
bottom: 0;
width: 52px;
height: 100%;
line-height: 46px;
text-align: center;
}
.nav-title {
max-width: 60%;
margin: 0 auto;
color: #333333;
font-weight: bold;
font-size: 16px;
}
}
.notice {
box-sizing: border-box;
min-width: 345px;
height: 44px;
line-height: 44px;
margin: 28px auto 47px;
background-image: url("../../assets/images/公告.png");
background-size: cover;
.van-notice-bar {
height: 44px;
line-height: 0;
}
.notice-icon {
width: 16px;
height: 14px;
}
.notice-swipe {
height: 44px;
line-height: 44px;
}
}
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 120px;
margin-bottom: 90px;
font-family: "PingFang-SC";
p {
margin: 0;
}
}
.newAdd-my {
box-sizing: border-box;
display: flex;
justify-content: space-between;
width: 345px;
margin: 0 auto 15px;
p {
margin: 0;
}
.newAdd,
.my {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 169px;
height: 98px;
padding: 13px 20px 15px 17px;
font-size: 14px;
background-color: #ffffff;
p {
font-weight: bold;
}
img {
width: 24px;
height: 21px;
}
.bottom {
display: flex;
justify-content: space-between;
}
}
}
.level-pool {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 345px;
height: 170px;
margin: 0 auto;
padding: 18px 15px 19px;
font-family: "PingFang-SC-Medium";
background-color: #ffffff;
p {
margin: 0;
}
&-title {
font-size: 16px;
color: #333333;
}
&-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #666666;
}
}
</style>
<template>
<div class="settings">
<van-cell-group class="group-1">
<van-cell title="用户名" value="135****1234" />
<van-cell is-link center title="头像">
<van-uploader
v-model="fileList"
:max-count="1"
:before-delete="onDeleteAvatar"
/>
</van-cell>
</van-cell-group>
<van-cell-group>
<van-field label="邀请人邀请码" />
<van-cell is-link title="软件更新" value="版本v1.2" />
<van-cell is-link title="用户协议" />
</van-cell-group>
<van-button size="large" class="logout-btn">退出登录</van-button>
</div>
</template>
<script>
export default {
name: "Settings",
data() {
return {
fileList: []
};
},
methods: {
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>
.settings {
box-sizing: border-box;
padding: 10px 16px;
}
.group-1 {
margin-bottom: 10px;
::v-deep .van-uploader__upload,
::v-deep .van-uploader__preview-image {
width: 37px;
height: 37px;
border-radius: 50%;
}
}
.logout-btn {
margin: 10px 0;
}
</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