mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-11 22:36:43 +08:00
接口联调完成
This commit is contained in:
liyuetong
@@ -1,86 +1,73 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="sale-list-container box">
|
<div class="sale-list-container box">
|
||||||
<!-- <div class="div100"> -->
|
<img class="backImg" src="@/assets/images/laurelClub/background.png" alt="" />
|
||||||
<img class="backImg" src="@/assets/images/laurelClub/background.png" alt="">
|
<!-- 内勤 1 外勤 0（区部组） -->
|
||||||
<!-- <van-sticky>
|
<div class="fs12 bntTab" v-if="branchType == '0'">
|
||||||
<van-tabs type="card" v-model="active" @change="tabChange" sticky>
|
<span :class="[active == 'GGrade' ? 'tabLeft mr2' : 'unTabLeft mr2']" @click="tabChange('GGrade')">{{ prevDate }}月桂冠名单</span>
|
||||||
<van-tab name="GGrade" :title="prevDate+'月桂冠名单'"></van-tab>
|
<span :class="[active == 'SGrade' ? 'tabMiddle mr2' : 'unTabMiddle mr2']" @click="tabChange('SGrade')">{{ prevDate }}月双冠名单</span>
|
||||||
<van-tab name="SGrade" :title="prevDate+'月双冠名单'"></van-tab>
|
<span :class="[active == 'Team' ? 'tabRight' : 'unTabRight']" @click="tabChange('Team')">我的团队</span>
|
||||||
<van-tab name="Team" title="我的团队"></van-tab>
|
</div>
|
||||||
</van-tabs>
|
<div class="fs12 bntTab" v-else-if="branchType == '1'">
|
||||||
</van-sticky> -->
|
<span :class="[active == 'GGrade' ? 'tabLeft mr2' : 'unTabLeft mr2']" @click="tabChange('GGrade')">{{ prevDate }}月桂冠名单</span>
|
||||||
<!-- 内勤 1 外勤 0 -->
|
<span :class="[active == 'SGrade' ? 'tabRight mr2' : 'unTabRight mr2']" @click="tabChange('SGrade')">{{ prevDate }}月双冠名单</span>
|
||||||
<div class="fs12 bntTab" v-if="branchType == '1'">
|
</div>
|
||||||
<span :class="[active=='GGrade'?'tabLeft mr2':'unTabLeft mr2']" @click="tabChange('GGrade')">{{prevDate}}月桂冠名单</span>
|
<div class="fs12 mt20 mr20 bntCheck" v-if="active == 'Team'">
|
||||||
<span :class="[active=='SGrade'?'tabMiddle mr2':'unTabMiddle mr2']" @click="tabChange('SGrade')">{{prevDate}}月桂冠名单</span>
|
<span :class="[plainStatus == 'GGrade' ? 'checkedLeft mr2' : 'unCheckedLeft mr2']" @click="approvalRecordSwitch('GGrade')">桂冠</span>
|
||||||
<span :class="[active=='Team'?'tabRight':'unTabRight']" @click="tabChange('Team')">我的团队</span>
|
<span :class="[plainStatus == 'SGrade' ? 'checkedRight' : 'unCheckedRight']" @click="approvalRecordSwitch('SGrade')">双冠</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="fs12 bntTab" v-else-if="branchType == '0'">
|
<div class="section" v-if="isSuccess">
|
||||||
<span :class="[active=='GGrade'?'tabLeft mr2':'unTabLeft mr2']" @click="tabChange('GGrade')">{{prevDate}}月桂冠名单</span>
|
<div v-if="list.length > 0">
|
||||||
<span :class="[active=='SGrade'?'tabRight mr2':'unTabRight mr2']" @click="tabChange('SGrade')">{{prevDate}}月桂冠名单</span>
|
<div>
|
||||||
</div>
|
<div class="pv15 pr15 pl15 mt15">
|
||||||
<div class="fs12 mt20 mr20 bntCheck" v-if="active == 'Team'">
|
<van-collapse v-model="activeNames" :border="false" @change="collapseChange">
|
||||||
<span :class="[plainStatus=='1'?'unCheckedLeft mr2':'checkedLeft mr2']" @click="approvalRecordSwitch('1')">桂冠</span>
|
<van-collapse-item :class="[item.status == '0' ? 'mb20' : 'mb45']" :name="index" v-for="(item, index) in list" :key="index" :border="false">
|
||||||
<span :class="[plainStatus=='0'?'unCheckedRight':'checkedRight']" @click="approvalRecordSwitch('0')">双冠</span>
|
<template #title>
|
||||||
</div>
|
<!-- 会员等级 01-正式会员 02-铜牌会员 03-银牌会员 04-金牌会员 05-白金会员 06-终身会员 -->
|
||||||
<div class="section" v-if="isSuccess">
|
<img v-if="item.level == '01'" class="iconGrade" src="@/assets/images/laurelClub/grade01.png" alt="" />
|
||||||
<div v-if="claimApprovalList.length > 0">
|
<img v-else-if="item.level == '02'" class="iconGrade" src="@/assets/images/laurelClub/grade02.png" alt="" />
|
||||||
<div>
|
<img v-else-if="item.level == '03'" class="iconGrade" src="@/assets/images/laurelClub/grade03.png" alt="" />
|
||||||
<div class="pv15 pr15 pl15 mt15">
|
<img v-else-if="item.level == '04'" class="iconGrade" src="@/assets/images/laurelClub/grade04.png" alt="" />
|
||||||
<van-collapse v-model="activeNames" :border='false'>
|
<img v-else-if="item.level == '05'" class="iconGrade" src="@/assets/images/laurelClub/grade05.png" alt="" />
|
||||||
<van-collapse-item :name="index" v-for="(item, index) in claimApprovalList" :key="index" :border='false'>
|
<img v-else-if="item.level == '06'" class="iconGrade" src="@/assets/images/laurelClub/grade06.png" alt="" />
|
||||||
<template #title>
|
<span class="ml20 mr10 fwb w80 inline-b v-middle" style="word-break: break-all">{{ item.level | statusFormat }}</span>
|
||||||
<!-- 会员等级 01-正式会员 02-铜牌会员 03-银牌会员 04-金牌会员 05-白金会员 06-终身会员 -->
|
<span class="ml100 fwb">{{ item.count }}人</span>
|
||||||
<img v-if="item.grade == '01'" class="iconGrade" src="@/assets/images/laurelClub/grade01.png" alt="">
|
</template>
|
||||||
<img v-else-if="item.grade == '02'" class="iconGrade" src="@/assets/images/laurelClub/grade02.png" alt="">
|
<div class="pb10 pt10 border-tb" v-for="(item01, index01) in item.queryLaureMemberList" :key="index01">
|
||||||
<img v-else-if="item.grade == '03'" class="iconGrade" src="@/assets/images/laurelClub/grade03.png" alt="">
|
<img class="iconGrade mr30" :src="item01.agentHeadImgUrl" alt="" />
|
||||||
<img v-else-if="item.grade == '04'" class="iconGrade" src="@/assets/images/laurelClub/grade04.png" alt="">
|
<div class="w100 inline-b v-middle">
|
||||||
<img v-else-if="item.grade == '05'" class="iconGrade" src="@/assets/images/laurelClub/grade05.png" alt="">
|
{{ item01.managerComName }}<br />
|
||||||
<img v-else-if="item.grade == '06'" class="iconGrade" src="@/assets/images/laurelClub/grade06.png" alt="">
|
{{ item01.name }}
|
||||||
<span class="ml20 mr10 fwb w80 inline-b v-middle" style="word-break: break-all;">{{item.grade | statusFormat}}</span>
|
</div>
|
||||||
<span class="ml100 fwb">{{item.number}}人</span>
|
<span class="fs14 c-gray-dark ml80">{{ item01.crownLevel }}冠</span>
|
||||||
</template>
|
</div>
|
||||||
<div class="pb10 pt10 border-t border-gb">
|
<div v-if="item.status == '1'" @click="putAwayFunc(index)" class="m-bottom white">
|
||||||
<img class="iconGrade mr30" src="@/assets/images/laurelClub/touxiang.png" alt="">
|
收起<img class="w20 h20" src="@/assets/images/laurelClub/putAway.png" alt="" />
|
||||||
<div class="w100 inline-b v-middle">南宁青秀<br> 王婷婷</div>
|
</div>
|
||||||
<span class="fs14 c-gray-dark ml80">62 冠</span>
|
</van-collapse-item>
|
||||||
</div>
|
</van-collapse>
|
||||||
<div class="pb10 pt10 border-gb">
|
|
||||||
<img class="iconGrade mr30" src="@/assets/images/laurelClub/touxiang.png" alt="">
|
|
||||||
<div class="w100 inline-b v-middle">南宁青秀<br> 王婷婷</div>
|
|
||||||
<span class="fs14 c-gray-dark ml80">62 冠</span>
|
|
||||||
</div>
|
|
||||||
<div class="pb10 pt10 border-gb">
|
|
||||||
<img class="iconGrade mr30" src="@/assets/images/laurelClub/touxiang.png" alt="">
|
|
||||||
<div class="w100 inline-b v-middle">南宁青秀<br> 王婷婷</div>
|
|
||||||
<span class="fs14 c-gray-dark ml80">62 冠</span>
|
|
||||||
</div>
|
|
||||||
<div @click="putAwayFunc(index)" class="m-bottom white">收起<img class="w20 h20" src="@/assets/images/laurelClub/putAway.png" alt=""></div>
|
|
||||||
</van-collapse-item>
|
|
||||||
</van-collapse>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="text-center bg-white m20 borderYellow p20">
|
|
||||||
<img class="w300 inline-b" src="@/assets/images/laurelClub/pic_page-non.png" />
|
|
||||||
</div>
|
|
||||||
<van-popup v-model="show">
|
|
||||||
<img class="w12 h12 inline-b btnClose" @click="closeFunc" src="@/assets/images/laurelClub/close.png" />
|
|
||||||
<img src="@/assets/images/laurelClub/ruleBack.png" alt="">
|
|
||||||
</van-popup>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else class="text-center bg-white m20 borderYellow p20">
|
||||||
|
<img class="w300 inline-b" src="@/assets/images/laurelClub/pic_page-non.png" />
|
||||||
|
</div>
|
||||||
|
<van-popup v-model="show">
|
||||||
|
<img class="w12 h12 inline-b btnClose" @click="closeFunc" src="@/assets/images/laurelClub/close.png" />
|
||||||
|
<img src="@/assets/images/laurelClub/ruleBack.png" alt="" />
|
||||||
|
</van-popup>
|
||||||
|
</div>
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Tab, Tabs, Collapse, CollapseItem,Checkbox, CheckboxGroup,Dialog,Popup } from 'vant'
|
import { Tab, Tabs, Collapse, CollapseItem, Checkbox, CheckboxGroup, Dialog, Popup } from 'vant'
|
||||||
import { getAgentInfo } from '@/api/ebiz/my/my'
|
// import { getAgentInfo } from '@/api/ebiz/my/my'
|
||||||
import { queryLaureList,queryLaureMemberList,getBranchByUser } from '@/api/ebiz/laurelClub/laurelClub'
|
import { queryLaureList, queryLaureMemberList, getBranchByUser } from '@/api/ebiz/laurelClub/laurelClub'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'claimApprovalList',
|
name: 'list',
|
||||||
components: {
|
components: {
|
||||||
[Tab.name]: Tab,
|
[Tab.name]: Tab,
|
||||||
[Tabs.name]: Tabs,
|
[Tabs.name]: Tabs,
|
||||||
@@ -93,86 +80,120 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
prevDate:new Date().getMonth(), //上月月份
|
prevDate: new Date().getMonth(), //上月月份
|
||||||
branchType: null, // 1内勤 0外勤
|
branchType: null, // 1内勤 0外勤
|
||||||
show: false, //弹框是否显示
|
show: false, //弹框是否显示
|
||||||
active: 'GGrade', // GGrade(桂冠) SGrade(双冠) Team(团队)
|
active: 'GGrade', // GGrade(桂冠) SGrade(双冠) Team(团队)
|
||||||
claimApprovalList: [
|
list: [], //接口数据
|
||||||
{
|
|
||||||
grade: '01',
|
|
||||||
number:33
|
|
||||||
},
|
|
||||||
{
|
|
||||||
grade: '02',
|
|
||||||
number:34
|
|
||||||
},
|
|
||||||
{
|
|
||||||
grade: '03',
|
|
||||||
number:35
|
|
||||||
},
|
|
||||||
{
|
|
||||||
grade: '04',
|
|
||||||
number:34
|
|
||||||
},
|
|
||||||
{
|
|
||||||
grade: '05',
|
|
||||||
number:35
|
|
||||||
},
|
|
||||||
{
|
|
||||||
grade: '06',
|
|
||||||
number:36
|
|
||||||
},
|
|
||||||
], //接口数据
|
|
||||||
isSuccess: false, //有无数据显示
|
isSuccess: false, //有无数据显示
|
||||||
plainStatus:'1', //审批记录--1已通过，0未通过按钮状态
|
plainStatus: 'GGrade', //我的团队--切换GGrade(桂冠) SGrade(双冠)
|
||||||
activeNames:[],//控制展开的面板列表
|
activeNames: [], //控制展开的面板列表
|
||||||
|
qubranchattr: '', //总监区的编码
|
||||||
|
bubranchattr: '', //营业部的编码
|
||||||
|
zubranchattr: '' //营业组的编码
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created(){
|
created() {},
|
||||||
this.getList()
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.checkBtn() // 初始化显示按钮
|
this.checkBtn() // 初始化显示按钮
|
||||||
window.appCallBack = this.appCallBack
|
window.appCallBack = this.appCallBack
|
||||||
this.initThisPage()
|
// this.initThisPage()
|
||||||
|
this.getBranchByUserFunc()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//获取当前人是否内外勤接口
|
//获取当前登录人机构信息
|
||||||
async initThisPage() {
|
async getBranchByUserFunc() {
|
||||||
const res = await getAgentInfo({})
|
const res = await getBranchByUser({})
|
||||||
if (res.result == 0) {
|
if (res.result == 0) {
|
||||||
// res.branchType 以N打头的是内勤 其他是外勤
|
// 机构等级(06-区 07-部 08-组 只有这三个显示'我的团队' )
|
||||||
this.branchType = /^N{1}/.test(res.branchType) ? '1' : '0'
|
let level = res.content.level
|
||||||
|
if (level == '06') {
|
||||||
|
this.qubranchattr = res.content.code
|
||||||
|
} else if (level == '07') {
|
||||||
|
this.bubranchattr = res.content.code
|
||||||
|
} else if (level == '08') {
|
||||||
|
this.zubranchattr = res.content.code
|
||||||
|
}
|
||||||
|
if (level == '06' || level == '07' || level == '08') {
|
||||||
|
this.branchType = 0
|
||||||
|
} else {
|
||||||
|
this.branchType = 1
|
||||||
|
}
|
||||||
|
this.getList()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//tab按钮切换
|
//获取当前人是否内外勤接口
|
||||||
tabChange(active) {
|
// async initThisPage() {
|
||||||
|
// const res = await getAgentInfo({})
|
||||||
|
// if (res.result == 0) {
|
||||||
|
// // res.branchType 以N打头的是内勤 其他是外勤
|
||||||
|
// this.branchType = /^N{1}/.test(res.branchType) ? '1' : '0'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
//折叠面板
|
||||||
|
collapseChange(activeNames) {
|
||||||
let that = this
|
let that = this
|
||||||
this.active = active
|
//0 收起 1 展开
|
||||||
if(active == 'GGrade'){
|
//重置每条数据为收起状态
|
||||||
|
this.list.forEach(function (item) {
|
||||||
|
item.status = '0'
|
||||||
|
})
|
||||||
|
//数据展开
|
||||||
|
if (activeNames.length) {
|
||||||
|
activeNames.forEach(function (item) {
|
||||||
|
that.list[item].status = '1'
|
||||||
|
})
|
||||||
}
|
}
|
||||||
//切换tab时，需要重置右上角的按钮状态--全部展开
|
//展开状态的数据，会员名单取值
|
||||||
that.activeNames = []
|
this.list.forEach(function (item) {
|
||||||
|
if (item.queryLaureMemberList.length == 0 && item.status == '1') {
|
||||||
|
//返回值从Promise中取值PromiseValue
|
||||||
// this.claimApprovalList = []
|
var a = Promise.resolve(that.getQueryLaureMemberListFunc(item))
|
||||||
// if(this.active == 'approvalRecord'){
|
// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "xx"}
|
||||||
// //当为审批记录时，重置状态为1已通过
|
a.then(function (result) {
|
||||||
// this.plainStatus = 1
|
item.queryLaureMemberList = result
|
||||||
// this.getList(1)
|
})
|
||||||
// }else{
|
}
|
||||||
// this.getList()
|
})
|
||||||
// }
|
setTimeout(() => {
|
||||||
|
this.$forceUpdate()
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
//获取会员名单列表接口
|
||||||
|
async getQueryLaureMemberListFunc(item) {
|
||||||
|
let data = {
|
||||||
|
type: '',
|
||||||
|
monthStr: item.monthStr,
|
||||||
|
level: item.level,
|
||||||
|
qubranchattr: '',
|
||||||
|
bubranchattr: '',
|
||||||
|
zubranchattr: ''
|
||||||
|
}
|
||||||
|
if (this.active == 'Team') {
|
||||||
|
data.type = this.plainStatus
|
||||||
|
data.qubranchattr = this.qubranchattr
|
||||||
|
data.bubranchattr = this.bubranchattr
|
||||||
|
data.zubranchattr = this.zubranchattr
|
||||||
|
} else {
|
||||||
|
data.type = this.active
|
||||||
|
}
|
||||||
|
let content = []
|
||||||
|
const res = await queryLaureMemberList(data)
|
||||||
|
if (res.result == 0) {
|
||||||
|
content = res.content
|
||||||
|
}
|
||||||
|
return content
|
||||||
},
|
},
|
||||||
//底部收起按钮
|
//底部收起按钮
|
||||||
putAwayFunc(id){
|
putAwayFunc(id) {
|
||||||
var index = this.activeNames.findIndex(item =>{
|
var index = this.activeNames.findIndex((item) => {
|
||||||
if(item == id){
|
if (item == id) {
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.activeNames.splice(index,1)
|
this.activeNames.splice(index, 1)
|
||||||
|
//控制展开的面板列表数据变化时，重新定义展开收起时的margin-bottom值
|
||||||
|
this.collapseChange(this.activeNames)
|
||||||
},
|
},
|
||||||
// 右上角按钮
|
// 右上角按钮
|
||||||
checkBtn() {
|
checkBtn() {
|
||||||
@@ -193,33 +214,51 @@ export default {
|
|||||||
},
|
},
|
||||||
appCallBack(data) {
|
appCallBack(data) {
|
||||||
if (data.trigger == 'right_button_click') {
|
if (data.trigger == 'right_button_click') {
|
||||||
this.show = true
|
this.show = true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//关闭方法会员规则弹层
|
//关闭方法会员规则弹层
|
||||||
closeFunc(){
|
closeFunc() {
|
||||||
this.show = false
|
this.show = false
|
||||||
},
|
},
|
||||||
//审批记录--切换1已通过，0未通过按钮状态
|
//我的团队--切换GGrade(桂冠) SGrade(双冠)
|
||||||
approvalRecordSwitch(plainStatus){
|
approvalRecordSwitch(plainStatus) {
|
||||||
this.getList(plainStatus)
|
if (this.plainStatus != plainStatus) {
|
||||||
this.plainStatus = plainStatus
|
this.plainStatus = plainStatus
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//tab按钮切换
|
||||||
|
tabChange(active) {
|
||||||
|
let that = this
|
||||||
|
if (this.active != active) {
|
||||||
|
this.active = active
|
||||||
|
this.getList()
|
||||||
|
//切换tab时，需要重置右上角的按钮状态--全部展开
|
||||||
|
that.activeNames = []
|
||||||
|
}
|
||||||
},
|
},
|
||||||
//初始化列表
|
//初始化列表
|
||||||
async getList(plainStatus) {
|
async getList() {
|
||||||
let that = this
|
let that = this
|
||||||
that.total = 0
|
that.total = 0
|
||||||
let status
|
let data = {
|
||||||
that.claimApprovalIds = []
|
type: '',
|
||||||
//审批记录切换按钮时，1已通过，0未通过按钮状态
|
qubranchattr: '',
|
||||||
if(plainStatus){
|
bubranchattr: '',
|
||||||
status = plainStatus
|
zubranchattr: ''
|
||||||
}else{
|
|
||||||
status = this.active == 'notApproved'?'2':'1'
|
|
||||||
}
|
}
|
||||||
// let data = {
|
that.activeNames = []
|
||||||
// status: status
|
//我的团队--切换GGrade(桂冠) SGrade(双冠)
|
||||||
// }
|
if (this.active == 'Team') {
|
||||||
|
data.type = this.plainStatus
|
||||||
|
data.qubranchattr = this.qubranchattr
|
||||||
|
data.bubranchattr = this.bubranchattr
|
||||||
|
data.zubranchattr = this.zubranchattr
|
||||||
|
} else {
|
||||||
|
data.type = this.active
|
||||||
|
}
|
||||||
|
|
||||||
this.$toast.loading({
|
this.$toast.loading({
|
||||||
duration: 0, // 持续展示 toast
|
duration: 0, // 持续展示 toast
|
||||||
forbidClick: true, // 禁用背景点击
|
forbidClick: true, // 禁用背景点击
|
||||||
@@ -227,31 +266,35 @@ export default {
|
|||||||
message: '加载中……'
|
message: '加载中……'
|
||||||
})
|
})
|
||||||
|
|
||||||
// let res = await queryClaimData(data)
|
let res = await queryLaureList(data)
|
||||||
this.$toast.clear()
|
this.$toast.clear()
|
||||||
// if (res.result == '0') {
|
if (res.result == '0') {
|
||||||
|
this.list = []
|
||||||
this.isSuccess = true
|
this.isSuccess = true
|
||||||
// if (res.content.length) {
|
if (res.content.length) {
|
||||||
// this.claimApprovalList = res.content
|
this.list = res.content
|
||||||
// this.claimApprovalList.forEach(function(item) {
|
this.list.forEach(function (item) {
|
||||||
// item.claimApprovalSearchLst.forEach(function(item01) {
|
item.status = '0' //0 收起 1 展开
|
||||||
// that.total++ //统计list中有多少条子数据
|
item.queryLaureMemberList = []
|
||||||
// that.claimApprovalIds.push(item01.id)
|
//返回值从Promise中取值PromiseValue
|
||||||
// item01.isChecked = '0'
|
//用async/await来发送异步请求，从服务端获取数据，它的调用会返回一个promise对象
|
||||||
// })
|
var a = Promise.resolve(that.getQueryLaureMemberListFunc(item))
|
||||||
// })
|
a.then(function (result) {
|
||||||
// that.$forceUpdate();
|
item.queryLaureMemberList = result
|
||||||
// }
|
})
|
||||||
// if (this.claimApprovalList.length == 0) {
|
})
|
||||||
// this.isSuccess = false
|
that.$forceUpdate()
|
||||||
// }
|
}
|
||||||
// } else {
|
if (this.list.length == 0) {
|
||||||
// this.$toast(res.resultMessage)
|
this.isSuccess = false
|
||||||
// }
|
}
|
||||||
}
|
} else {
|
||||||
|
this.$toast(res.resultMessage)
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
filters: {
|
filters: {
|
||||||
statusFormat: function(status) {
|
statusFormat: function (status) {
|
||||||
let text
|
let text
|
||||||
switch (status) {
|
switch (status) {
|
||||||
case '01':
|
case '01':
|
||||||
@@ -279,230 +322,197 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box{
|
.box {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color:#142162
|
background-color: #142162;
|
||||||
}
|
}
|
||||||
// 顶部背景图
|
// 顶部背景图
|
||||||
.backImg{
|
.backImg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 317px;
|
height: 317px;
|
||||||
}
|
}
|
||||||
// 顶部tab按钮
|
// 顶部tab按钮
|
||||||
.bntTab{
|
.bntTab {
|
||||||
margin-top: -25px;
|
margin-top: -25px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.unTabLeft{
|
.unTabLeft {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
border-radius: 10px 0 0 10px;
|
border-radius: 10px 0 0 10px;
|
||||||
width: 114px;
|
width: 114px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.tabLeft{
|
.tabLeft {
|
||||||
background: linear-gradient(135deg, #30339A 0%, #181935 100%);
|
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||||
color: #FFCB6B;
|
color: #ffcb6b;
|
||||||
border: 1px solid rgba(222, 144, 34, 1);
|
border: 1px solid rgba(222, 144, 34, 1);
|
||||||
border-radius: 10px 0 0 10px;
|
border-radius: 10px 0 0 10px;
|
||||||
width: 114px;
|
width: 114px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.unTabMiddle{
|
.unTabMiddle {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
// border-radius: 8px 0 0 8px;
|
width: 114px;
|
||||||
width: 114px;
|
height: 40px;
|
||||||
height: 40px;
|
line-height: 40px;
|
||||||
line-height: 40px;
|
display: inline-block;
|
||||||
display: inline-block;
|
text-align: center;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
.tabMiddle{
|
.tabMiddle {
|
||||||
background: linear-gradient(135deg, #30339A 0%, #181935 100%);
|
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||||
color: #FFCB6B;
|
color: #ffcb6b;
|
||||||
border: 1px solid rgba(222, 144, 34, 1);
|
border: 1px solid rgba(222, 144, 34, 1);
|
||||||
// border-radius: 8px 0 0 8px;
|
width: 114px;
|
||||||
width: 114px;
|
height: 40px;
|
||||||
height: 40px;
|
line-height: 40px;
|
||||||
line-height: 40px;
|
display: inline-block;
|
||||||
display: inline-block;
|
text-align: center;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
.unTabRight{
|
.unTabRight {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
border-radius: 0 10px 10px 0;
|
border-radius: 0 10px 10px 0;
|
||||||
width: 114px;
|
width: 114px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.tabRight{
|
.tabRight {
|
||||||
background: linear-gradient(135deg, #30339A 0%, #181935 100%);
|
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||||
color: #FFCB6B;
|
color: #ffcb6b;
|
||||||
border: 1px solid rgba(222, 144, 34, 1);
|
border: 1px solid rgba(222, 144, 34, 1);
|
||||||
border-radius: 0 10px 10px 0;
|
border-radius: 0 10px 10px 0;
|
||||||
width: 114px;
|
width: 114px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/.van-tabs{
|
|
||||||
padding-top:0;
|
|
||||||
.van-tabs__nav--card{
|
|
||||||
box-shadow: 0 0 0 1px rgba(222, 144, 34, 1);
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(222, 144, 34, 1);
|
|
||||||
height:40px;
|
|
||||||
background-color: transparent;
|
|
||||||
.van-tab{
|
|
||||||
color: #333333;
|
|
||||||
border-right: 1px solid rgba(222, 144, 34, 1);
|
|
||||||
line-height: 10.66667vw;
|
|
||||||
// margin-right: 5px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.van-tab:last-child {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.van-tab--active{
|
|
||||||
background: linear-gradient(135deg, #30339A 0%, #181935 100%);
|
|
||||||
color: #FFCB6B !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//桂冠，双冠按钮
|
//桂冠，双冠按钮
|
||||||
.bntCheck{
|
.bntCheck {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
.unCheckedLeft{
|
.unCheckedLeft {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
border-radius: 10px 0 0 10px;
|
border-radius: 10px 0 0 10px;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.checkedLeft{
|
.checkedLeft {
|
||||||
background: linear-gradient(135deg, #30339A 0%, #181935 100%);
|
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||||
color: #FFCB6B;
|
color: #ffcb6b;
|
||||||
border: 1px solid rgba(222, 144, 34, 1);
|
border: 1px solid rgba(222, 144, 34, 1);
|
||||||
border-radius: 10px 0 0 10px;
|
border-radius: 10px 0 0 10px;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.unCheckedRight{
|
.unCheckedRight {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
border-radius: 0 10px 10px 0;
|
border-radius: 0 10px 10px 0;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.checkedRight{
|
.checkedRight {
|
||||||
background: linear-gradient(135deg, #30339A 0%, #181935 100%);
|
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||||
color: #FFCB6B;
|
color: #ffcb6b;
|
||||||
border: 1px solid rgba(222, 144, 34, 1);
|
border: 1px solid rgba(222, 144, 34, 1);
|
||||||
border-radius: 0 10px 10px 0;
|
border-radius: 0 10px 10px 0;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.borderYellow{
|
.borderYellow {
|
||||||
border: 2px solid rgba(222, 144, 34, 1);
|
border: 2px solid rgba(222, 144, 34, 1);
|
||||||
border-radius:4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
//折叠面板样式
|
//折叠面板样式
|
||||||
/deep/.van-collapse{
|
/deep/.van-collapse {
|
||||||
.van-collapse-item{
|
.van-collapse-item {
|
||||||
border: 2px solid rgba(222, 144, 34, 1);
|
border: 2px solid rgba(222, 144, 34, 1);
|
||||||
border-radius:10px;
|
border-radius: 10px;
|
||||||
margin-bottom: 30px;
|
// margin-bottom: 30px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
.van-cell{
|
.van-cell {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: 13px 15px;
|
padding: 13px 15px;
|
||||||
}
|
}
|
||||||
.van-collapse-item__content{
|
.van-collapse-item__content {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
.m-bottom{
|
.m-bottom {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -23px;
|
bottom: -30px;
|
||||||
left: 150px;
|
left: 150px;
|
||||||
img{
|
img {
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//隐藏顶部线条
|
//隐藏顶部线条
|
||||||
.van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after,.van-hairline--top::after{
|
.van-hairline--top-bottom::after,
|
||||||
|
.van-hairline-unset--top-bottom::after,
|
||||||
|
.van-hairline--top::after {
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
}
|
}
|
||||||
.border-t{
|
.border-tb {
|
||||||
border-top: 1px solid #dadada;
|
border-top: 1px solid #dadada;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/#app .van-cell:not(:last-child)::after {
|
/deep/#app .van-cell:not(:last-child)::after {
|
||||||
border-bottom: 1px solid red !important;
|
border-bottom: 1px solid red !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconGrade{
|
.iconGrade {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
//会员规则弹层
|
//会员规则弹层
|
||||||
/deep/.van-popup--center{
|
/deep/.van-popup--center {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: #142162;
|
background-color: #142162;
|
||||||
border: 2px solid rgba(222, 144, 34, 1);
|
border: 2px solid rgba(222, 144, 34, 1);
|
||||||
img{
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.btnClose{
|
.btnClose {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 12px;
|
right: 12px;
|
||||||
top: 13px;
|
top: 13px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// .div100{
|
|
||||||
// height: 100%;
|
|
||||||
// }
|
|
||||||
// .section{
|
|
||||||
// height: 100%;
|
|
||||||
// overflow-x: hidden;
|
|
||||||
// overflow-y: scroll;
|
|
||||||
// -webkit-overflow-scrolling: touch;
|
|
||||||
// }
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user