Skip to content

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

收益明细&用户协议界面&钱包&设置界面

parent 17196cc4
Show whitespace changes
Inline Side-by-side
Showing with 708 additions and 13 deletions
H5/package-lock.json
View file @ 5eef482c
{
"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=="
}
}
}
}
}
H5/package.json
View file @ 5eef482c
{
"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",
......
H5/src/api/infomation.js 0 → 100644
View file @ 5eef482c
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
});
}
H5/src/api/user.js
View file @ 5eef482c
import request from "@/utils/request";
// 获取token
export function getToken() {
// 登录
export function Login() {
return request({
url: "/user/login?id=1",
method: "get"
......
H5/src/main.js
View file @ 5eef482c
......@@ -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;
......
H5/src/plugins/echarts-plugins.js 0 → 100644
View file @ 5eef482c
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);
H5/src/router/index.js
View file @ 5eef482c
......@@ -27,6 +27,36 @@ 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: "/instructions",
name: "Instructions",
component: () => import("@/views/instructions"),
meta: { title: "用户协议" }
},
{
path: "/settings",
name: "Settings",
component: () => import("@/views/settings"),
meta: { title: "设置" }
}
];
......
H5/src/store/index.js
View file @ 5eef482c
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;
H5/src/store/modules/user.js 0 → 100644
View file @ 5eef482c
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
};
H5/src/utils/auth.js 0 → 100644
View file @ 5eef482c
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);
}
H5/src/utils/request.js
View file @ 5eef482c
......@@ -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,
......
H5/src/views/income/income-detail.vue 0 → 100644
View file @ 5eef482c
<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>
H5/src/views/income/index.vue 0 → 100644
View file @ 5eef482c
<template>
<router-view />
</template>
H5/src/views/income/wallet.vue 0 → 100644
View file @ 5eef482c
<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>
H5/src/views/instructions.vue 0 → 100644
View file @ 5eef482c
<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>
H5/src/views/publish.vue
View file @ 5eef482c
......@@ -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,19 @@ export default {
};
},
methods: {
onPublish() {
console.log("发布===文字", this.message);
console.log("发布===文件", this.fileList);
const params = {
userId: "1",
zxField: this.message
};
const fd = new FormData();
this.fileList.forEach(file => {
fd.append("file", file.file);
});
uploadImage(params, fd).then();
},
openPopup() {
this.fileShow = true;
},
......
H5/src/views/settings.vue 0 → 100644
View file @ 5eef482c
<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