新增公司信息\签约公司信息\优化页面,将合同与公司信息拆分成组件
This commit is contained in:
weipengfei
parent
cddf90e912
commit
1817e314c9
16
api/company.js
Normal file
16
api/company.js
Normal file
@ -0,0 +1,16 @@
|
||||
import oahttp from "@/utils/oahttp.js";
|
||||
|
||||
/**
|
||||
* 我的公司
|
||||
*/
|
||||
export const companyMine = (data) => oahttp.get('/company/mine', data)
|
||||
|
||||
/**
|
||||
* 公司列表
|
||||
*/
|
||||
export const companyIndex = (data) => oahttp.get('/company/index', data)
|
||||
|
||||
/**
|
||||
* 公司详情
|
||||
*/
|
||||
export const companyView = (data) => oahttp.get('/company/view', data)
|
||||
@ -24,3 +24,8 @@ export const wechatJsConfig = (data) => oahttp.get('/wechat/jsConfig', data)
|
||||
* 支付状态
|
||||
*/
|
||||
export const payStatus = (data) => oahttp.get('/pay/payStatus', data)
|
||||
|
||||
/**
|
||||
* 充值记录
|
||||
*/
|
||||
export const rechargeLists = (data) => oahttp.get('/recharge/lists', data)
|
||||
358
components/company/company.vue
Normal file
358
components/company/company.vue
Normal file
@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="item">
|
||||
<view class="title">公司基本信息</view>
|
||||
<view class="card">
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
<image src="../../static/img/contract/company.png"></image>
|
||||
<view class="text">
|
||||
<view class="name">{{company.company_name}}</view>
|
||||
<view class="right">{{company.company_type_name||company.company_type}}</view>
|
||||
<view class="code">社会代码{{company.organization_code}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom"><uni-icons type="location"></uni-icons><text class="location">负责区域:</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">
|
||||
<text>联系人管理</text>
|
||||
<!-- <view>新增</view> -->
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="one">
|
||||
<view class="linkman">主要联系人</view>
|
||||
<view class="info">
|
||||
<view class="info_item">姓名：{{company.master_name}}</view>
|
||||
<view class="info_item">职位：{{company.master_position}}</view>
|
||||
<view class="info_item">联系电话：{{company.master_phone}}</view>
|
||||
<view class="info_item">邮箱：{{company.master_email}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 32rpx;"></view>
|
||||
<view class="one" v-for="(other, index) in company.other_contacts" :key="index">
|
||||
<view class="linkman">其他联系人</view>
|
||||
<view class="info">
|
||||
<view class="info_item">姓名：{{other.name}}</view>
|
||||
<view class="info_item">职位：{{company.position}}</view>
|
||||
<view class="info_item">联系电话：{{other.phone}}</view>
|
||||
<view class="info_item">邮箱：{{other.email}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">资质信息</view>
|
||||
<view class="image_box">
|
||||
<image class="top" @click="priview(company.qualification.bank_account)" :src="company.qualification.bank_account"></image>
|
||||
<image class="bottom" @click="priview(company.qualification.business_license)" :src="company.qualification.business_license"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">电子合同</view>
|
||||
<view class="card">
|
||||
<view class="one">
|
||||
<view class="linkman">{{contract.party_a_name}}</view>
|
||||
<view class="info">
|
||||
<view class="info_item">签约对象：{{contract.party_b_name}}</view>
|
||||
<view class="info_item">合同类型：{{contract.contract_type_name}}</view>
|
||||
<view class="info_item">合同编号：{{contract.contract_no}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-line color="#999999FF" style="margin: 31rpx 0;"></u-line>
|
||||
<view class="contract">
|
||||
<view class="left">
|
||||
<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
|
||||
<view class="text">
|
||||
<view class="name">合同</view>
|
||||
<view>
|
||||
<!-- <text class="nickname">张郭郭</text> -->
|
||||
<text>{{contract.create_time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right"
|
||||
@click="naviTo('/subpkg/pdfView/pdfView?url=' + contract.file)">
|
||||
<!-- <image class="icon"></image> -->
|
||||
<uni-icons type="paperclip" color="#3274F9"></uni-icons>
|
||||
<view>查看</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { contractView } from "@/api/contract.js"
|
||||
import { companyView } from "@/api/company.js"
|
||||
export default {
|
||||
name:"company",
|
||||
data() {
|
||||
return {
|
||||
company: {
|
||||
qualification: {
|
||||
bank_account:"",
|
||||
bank_accountB:"",
|
||||
business_license:"",
|
||||
business_licenseB:"",
|
||||
},
|
||||
},
|
||||
contract: {},
|
||||
users: [],
|
||||
current: 1
|
||||
}
|
||||
},
|
||||
props: ['id','type'],
|
||||
mounted() {
|
||||
console.log(this.$props.type, this.$props.id);
|
||||
this.initContract(this.$props.id, this.$props.type||null);
|
||||
},
|
||||
methods: {
|
||||
naviTo(url) {
|
||||
url ?
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
}) : Toast('暂未开放')
|
||||
},
|
||||
naviBack(){
|
||||
uni.navigateBack()
|
||||
},
|
||||
async initContract(id, type="contract") {
|
||||
let res;
|
||||
//判断是合同还是公司
|
||||
if(id&&(type=="contract"||type==null)) res = await contractView({ id });
|
||||
else res = await companyView();
|
||||
this.company = res.data.company;
|
||||
this.user = res.data.user;
|
||||
this.contract = res.data.contract;
|
||||
// console.log(res.data);
|
||||
},
|
||||
//查看图片
|
||||
priview(url){
|
||||
uni.previewImage({
|
||||
urls:[url],
|
||||
longPressActions: {
|
||||
itemList: ['保存图片'],
|
||||
success: function(data) {
|
||||
if (data.tapIndex === 0) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: url,
|
||||
success: function() {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: function() {
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
padding: 31.5rpx 28rpx;
|
||||
|
||||
.title {
|
||||
margin-bottom: 21rpx;
|
||||
font-size: 35rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 694rpx;
|
||||
// height: 231rpx;
|
||||
padding: 28rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 142rpx;
|
||||
height: 142rpx;
|
||||
margin-right: 28rpx;
|
||||
background: #CCCCCC;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.code {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #3274F9;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #666666FF;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.location {
|
||||
margin-left: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.one {
|
||||
.linkman {
|
||||
height: 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
line-height: 45rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.contract {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
|
||||
.contract_img {
|
||||
width: 102rpx;
|
||||
height: 102rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
margin-right: 21rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
line-height: 35rpx;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
margin-right: 35rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
height: 39rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
line-height: 35rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #3274F9;
|
||||
line-height: 35rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 35rpx;
|
||||
height: 39rpx;
|
||||
background-color: #3274F9;
|
||||
opacity: 1;
|
||||
margin-right: 10rpx
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
image{
|
||||
padding-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
width: 650rpx;
|
||||
height: 455rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back_btn {
|
||||
width: 694rpx;
|
||||
height: 84rpx;
|
||||
background: #3274F9;
|
||||
border-radius: 42rpx 42rpx 42rpx 42rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
margin: 30rpx auto;
|
||||
}
|
||||
|
||||
.stop_btn {
|
||||
width: 694rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 42rpx 42rpx 42rpx 42rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3274F9;
|
||||
background-color: transparent;
|
||||
margin: 30rpx auto;
|
||||
}
|
||||
</style>
|
||||
@ -36,7 +36,8 @@
|
||||
<view class="ass_cent flex_a_c_j_sb">
|
||||
<view class="cent_item" @click="naviTo('/subpkg/finance/finance')">
|
||||
<!-- <view class="num">{{ oaUserInfo.achievements_money }}</view> -->
|
||||
<view class="num">{{oaUserInfo.user_money||'0.00'}}</view>
|
||||
<view class="num" v-if="eyeType">{{oaUserInfo.user_money||'0.00'}}</view>
|
||||
<view class="num" v-if="!eyeType">****</view>
|
||||
<view class="name">账户余额(元)</view>
|
||||
</view>
|
||||
<!-- <view class="cent_item" @click="naviTo('/subpkg/finance/finance')">
|
||||
@ -45,7 +46,8 @@
|
||||
</view> -->
|
||||
<view class="cent_item" @click="naviTo('/subpkg/finance/finance')">
|
||||
<!-- <view class="num">{{ oaUserInfo.company_money }}</view> -->
|
||||
<view class="num">0.00</view>
|
||||
<view class="num" v-if="eyeType">{{oaUserInfo.income||'0.00'}}</view>
|
||||
<view class="num" v-if="!eyeType">****</view>
|
||||
<view class="name">收益金额(元)</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -97,6 +99,11 @@
|
||||
this.getOaUserInfo()
|
||||
},
|
||||
onShow() {},
|
||||
computed:{
|
||||
eyeType(){
|
||||
return this.$store.state.config.eyeType;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getWxLogin']),
|
||||
login() {
|
||||
|
||||
BIN
static/img/contract/company.png
Normal file
BIN
static/img/contract/company.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
static/img/contract/pdf.png
Normal file
BIN
static/img/contract/pdf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
@ -203,7 +203,7 @@ export const oaHomeData = [
|
||||
icon: prefix + 'oa/wcsq@2x.png'
|
||||
},
|
||||
{
|
||||
text: '合同签订',
|
||||
text: '合同管理',
|
||||
icon: prefix + 'oa/cgsq@2x.png',
|
||||
url: '/subpkg/contract/contract'
|
||||
},
|
||||
@ -217,7 +217,8 @@ export const oaHomeData = [
|
||||
},
|
||||
{
|
||||
text: '财务管理',
|
||||
icon: prefix + 'oa/gengduo@2x.png'
|
||||
icon: prefix + 'oa/gengduo@2x.png',
|
||||
url: '/subpkg/finance/finance'
|
||||
},
|
||||
// {
|
||||
// text: 'gong',
|
||||
|
||||
@ -2,6 +2,7 @@ export default {
|
||||
token: state => state.app.token,
|
||||
isLogin: state => !!state.app.token,
|
||||
userInfo: state => state.app.userInfo || {},
|
||||
eyeType: state => state.config.eyeType || true,
|
||||
};
|
||||
// export default {
|
||||
// token: state => 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJrYWlmYS5jcm1lYi5uZXQiLCJhdWQiOiJrYWlmYS5jcm1lYi5uZXQiLCJpYXQiOjE1NzcwODM1MzQsIm5iZiI6MTU3NzA4MzUzNCwiZXhwIjoxNTc3MDk0MzM0LCJqdGkiOnsiaWQiOjExMCwidHlwZSI6InVzZXIifX0.U-i1pbdRjyXI1gr79Uq2XBPZ89T8f5Ai9jwrR8woTwE',
|
||||
|
||||
21
store/modules/config.js
Normal file
21
store/modules/config.js
Normal file
@ -0,0 +1,21 @@
|
||||
import Cache from '@/utils/cache';
|
||||
const state = {
|
||||
eyeType: Cache.get('eyeType') || true,
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
SET_EYE_TYPE(state){
|
||||
state.eyeType=!state.eyeType;
|
||||
Cache.set('eyeType', state.eyeType);
|
||||
}
|
||||
};
|
||||
|
||||
const actions = {
|
||||
|
||||
};
|
||||
|
||||
export default {
|
||||
state,
|
||||
mutations,
|
||||
actions
|
||||
};
|
||||
@ -8,6 +8,8 @@
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import app from "./app";
|
||||
import config from "./config"
|
||||
export default {
|
||||
app
|
||||
app,
|
||||
config
|
||||
};
|
||||
|
||||
176
subpkg/companyInfo/companyInfo.vue
Normal file
176
subpkg/companyInfo/companyInfo.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="top_box">
|
||||
<view class="item" :class="current==0?'active':''" @click="current=0">我的公司</view>
|
||||
<view class="item" :class="current==1?'active':''" @click="current=1">签约公司</view>
|
||||
</view>
|
||||
<view class="company" v-show="current==0">
|
||||
<company></company>
|
||||
</view>
|
||||
<view class="company_list" v-show="current==1">
|
||||
<view class="info_card" v-for="item in companyList" :key="item.id">
|
||||
<view class="top">
|
||||
<view>
|
||||
<view class="info_name">{{item.company_name}}</view>
|
||||
<view class="info_type">{{item.company_type}}</view>
|
||||
</view>
|
||||
<view class="btn" @click="naviTo('/subpkg/companySign/companySign?id='+item.id)">详情<uni-icons type="forward" color="#666666"></uni-icons></view>
|
||||
</view>
|
||||
<u-line ></u-line>
|
||||
<view class="bottom">
|
||||
<image src="../../static/img/contract/company.png"></image>
|
||||
<view class="text">
|
||||
<view>主要联系人：{{item.master_name}}</view>
|
||||
<view>联系方式：{{item.master_phone}}</view>
|
||||
<view>区县乡镇：{{item.city+'/'+item.street}}</view>
|
||||
<!-- <view>片区经理：</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {companyIndex} from "@/api/company.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
loadConfig:{
|
||||
page: 1,
|
||||
limit: 15,
|
||||
lastpage: '',
|
||||
loadingText: '努力加载中',
|
||||
loadmoreText: '轻轻上拉',
|
||||
nomoreText: '我也是有底线的~~',
|
||||
status: 'loadmore'
|
||||
},
|
||||
companyList: []
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
this.loadCompanyList();
|
||||
},
|
||||
onReady() {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#3175f9'
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
this.loadCompanyList();
|
||||
},
|
||||
methods: {
|
||||
// 加载公司列表
|
||||
async loadCompanyList(){
|
||||
if(this.loadConfig.status=="nomore")return;
|
||||
this.loadConfig.status="loading"
|
||||
let res = await companyIndex({
|
||||
page: this.loadConfig.page,
|
||||
limit: this.loadConfig.limit
|
||||
})
|
||||
this.loadConfig.status="loadmore"
|
||||
if(res.data.data.length<this.loadConfig.limit){
|
||||
this.loadConfig.status="nomore"
|
||||
}else {
|
||||
this.loadConfig.page++;
|
||||
}
|
||||
this.companyList = [...this.companyList, ...res.data?.data]
|
||||
},
|
||||
naviTo(url) {
|
||||
url ?
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
}) : Toast('暂未开放')
|
||||
},
|
||||
naviBack(){
|
||||
uni.navigateBack()
|
||||
},
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.top_box{
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
|
||||
.item{
|
||||
width: 175rpx;
|
||||
height: 53rpx;
|
||||
background: #F5F5F5FF;
|
||||
color: #999999FF;
|
||||
border-radius: 35rpx 35rpx 35rpx 35rpx;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 28rpx;
|
||||
}
|
||||
.active{
|
||||
background: #3274F9;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.company{
|
||||
|
||||
}
|
||||
.company_list{
|
||||
padding-bottom: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.info_card{
|
||||
width: 694rpx;
|
||||
// height: 300rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 21rpx 21rpx 21rpx 21rpx;
|
||||
margin-top: 28rpx;
|
||||
padding: 24rpx;
|
||||
.top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 28rpx;
|
||||
.info_name{
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.info_type{
|
||||
font-size: 25rpx;
|
||||
font-weight: 500;
|
||||
color: #3274F9;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.btn{
|
||||
font-size: 25rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
display: flex;
|
||||
margin-top: 28rpx;
|
||||
image{
|
||||
height: 140rpx;
|
||||
width: 140rpx;
|
||||
margin-right: 28rpx;
|
||||
}
|
||||
.text{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
33
subpkg/companySign/companySign.vue
Normal file
33
subpkg/companySign/companySign.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<company :id="id" type="company"></company>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.id = options.id;
|
||||
},
|
||||
onShow() {},
|
||||
onReady() {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#3175f9'
|
||||
})
|
||||
},
|
||||
methods: {},
|
||||
onPullDownRefresh() {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@ -13,23 +13,27 @@
|
||||
</view>
|
||||
<view class="center">
|
||||
<view class="title">
|
||||
<text style="margin-right: 20rpx;">账户总金额(元)</text><uni-icons type="eye" color="#fff"></uni-icons>
|
||||
<text style="margin-right: 20rpx;">账户总金额(元)</text><uni-icons @click="updateEye()" :type="eyeType?'eye-filled':'eye-slash-filled'" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<view class="price">{{userInfo.user_money||0.00}}元</view>
|
||||
<view class="price" v-show="eyeType">{{userInfo.user_money||0.00}}元</view>
|
||||
<view class="price" v-show="!eyeType">****元</view>
|
||||
<view class="bubble">
|
||||
<!-- <image src="../../static/img/contract/bubble.png"></image> -->
|
||||
<view class="text">可提现金额0.00元</view>
|
||||
<view class="text" v-show="eyeType">可提现金额{{userInfo.user_money||0.00}}元</view>
|
||||
<view class="text" v-show="!eyeType">可提现金额****元</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="item">
|
||||
<view>账户余额(元)</view>
|
||||
<view class="num">0.00</view>
|
||||
<view class="num" v-show="eyeType">{{userInfo.user_money||0.00}}</view>
|
||||
<view class="num" v-show="!eyeType">****</view>
|
||||
</view>
|
||||
<u-line direction="col" length="40%" color="#999999FF"></u-line>
|
||||
<view class="item">
|
||||
<view>收益金额(元)</view>
|
||||
<view class="num">0.00</view>
|
||||
<view class="num" v-show="eyeType">{{userInfo.income||0.00}}</view>
|
||||
<view class="num" v-show="!eyeType">****</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -38,8 +42,8 @@
|
||||
<!-- <u-subsection :list="billTypeList" :current="current" mode="subsection"></u-subsection> -->
|
||||
<view class="type_box">
|
||||
<view class="type">
|
||||
<view class="active">日账单</view>
|
||||
<view>月账单</view>
|
||||
<view :class="current==0?'active':''" @click="changeBillType(0)">日账单</view>
|
||||
<view :class="current==1?'active':''" @click="changeBillType(1)">月账单</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card" v-for="item in 3" :key="item">
|
||||
@ -58,6 +62,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="btn">提现余额</button>
|
||||
</view>
|
||||
</view>
|
||||
@ -69,7 +74,7 @@ export default {
|
||||
return {
|
||||
userInfo:{},
|
||||
billTypeList:['日账单','月账单'],
|
||||
current: 0
|
||||
current: 0,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@ -81,6 +86,11 @@ export default {
|
||||
})
|
||||
},
|
||||
onShow() {},
|
||||
computed:{
|
||||
eyeType(){
|
||||
return this.$store.state.config.eyeType;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
naviTo(url) {
|
||||
url ?
|
||||
@ -88,6 +98,12 @@ export default {
|
||||
url: url
|
||||
}) : Toast('暂未开放')
|
||||
},
|
||||
updateEye(){
|
||||
this.$store.commit('SET_EYE_TYPE')
|
||||
},
|
||||
changeBillType(type){
|
||||
this.current = type;
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
uni.stopPullDownRefresh()
|
||||
|
||||
2
uni_modules/uni-section/changelog.md
Normal file
2
uni_modules/uni-section/changelog.md
Normal file
@ -0,0 +1,2 @@
|
||||
## 0.0.1（2022-07-22）
|
||||
- 初始化
|
||||
167
uni_modules/uni-section/components/uni-section/uni-section.vue
Normal file
167
uni_modules/uni-section/components/uni-section/uni-section.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<view class="uni-section">
|
||||
<view class="uni-section-header" @click="onClick">
|
||||
<view class="uni-section-header__decoration" v-if="type" :class="type" />
|
||||
<slot v-else name="decoration"></slot>
|
||||
|
||||
<view class="uni-section-header__content">
|
||||
<text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
|
||||
<text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
|
||||
</view>
|
||||
|
||||
<view class="uni-section-header__slot-right">
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-section-content" :style="{padding: _padding}">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* Section 标题栏
|
||||
* @description 标题栏
|
||||
* @property {String} type = [line|circle|square] 标题装饰类型
|
||||
* @value line 竖线
|
||||
* @value circle 圆形
|
||||
* @value square 正方形
|
||||
* @property {String} title 主标题
|
||||
* @property {String} titleFontSize 主标题字体大小
|
||||
* @property {String} titleColor 主标题字体颜色
|
||||
* @property {String} subTitle 副标题
|
||||
* @property {String} subTitleFontSize 副标题字体大小
|
||||
* @property {String} subTitleColor 副标题字体颜色
|
||||
* @property {String} padding 默认插槽 padding
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniSection',
|
||||
emits:['click'],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: ''
|
||||
},
|
||||
titleFontSize: {
|
||||
type: String,
|
||||
default: '14px'
|
||||
},
|
||||
titleColor:{
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
subTitleFontSize: {
|
||||
type: String,
|
||||
default: '12px'
|
||||
},
|
||||
subTitleColor: {
|
||||
type: String,
|
||||
default: '#999'
|
||||
},
|
||||
padding: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
_padding(){
|
||||
if(typeof this.padding === 'string'){
|
||||
return this.padding
|
||||
}
|
||||
|
||||
return this.padding?'10px':''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
title(newVal) {
|
||||
if (uni.report && newVal !== '') {
|
||||
uni.report('title', newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
$uni-primary: #2979ff !default;
|
||||
|
||||
.uni-section {
|
||||
background-color: #fff;
|
||||
.uni-section-header {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 12px 10px;
|
||||
font-weight: normal;
|
||||
|
||||
&__decoration{
|
||||
margin-right: 6px;
|
||||
background-color: $uni-primary;
|
||||
&.line {
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&.circle {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-top-right-radius: 50px;
|
||||
border-top-left-radius: 50px;
|
||||
border-bottom-left-radius: 50px;
|
||||
border-bottom-right-radius: 50px;
|
||||
}
|
||||
|
||||
&.square {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
color: #333;
|
||||
|
||||
.distraction {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
&-sub {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&__slot-right{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-section-content{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
87
uni_modules/uni-section/package.json
Normal file
87
uni_modules/uni-section/package.json
Normal file
@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uni-section",
|
||||
"displayName": "uni-section 标题栏",
|
||||
"version": "0.0.1",
|
||||
"description": "标题栏组件",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"标题栏"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
uni_modules/uni-section/readme.md
Normal file
8
uni_modules/uni-section/readme.md
Normal file
@ -0,0 +1,8 @@
|
||||
## Section 标题栏
|
||||
> **组件名：uni-section**
|
||||
> 代码块： `uSection`
|
||||
|
||||
uni-section 组件主要用于文章、列表详情等标题展示
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-section)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
Loading…
x
Reference in New Issue
Block a user