parent
3ab836e5e6
commit
087440ba61
@ -0,0 +1,484 @@ |
||||
<template> |
||||
<view class="QS-tabs" :style="{ |
||||
'z-index': zIndex, |
||||
'font-size': getFontSize + 'rpx', |
||||
'background-color': getBgColor, |
||||
'transition-duration': getDuration + 's' |
||||
}"> |
||||
<scroll-view scroll-x class="QS-tabs-scroll" :scroll-left="left" scroll-with-animation :style="{ |
||||
'z-index': (Number(zIndex) + 1) |
||||
}"> |
||||
<view class="QS-tabs-scroll-box"> |
||||
<!-- 循环tabs --> |
||||
<view class="QS-tabs-scroll-item" :style="{ |
||||
'height':'100rpx', |
||||
'line-height': getHeight + 'rpx', |
||||
'min-width': getWidth + 'rpx', |
||||
'padding': '0 ' + space + 'rpx', |
||||
'color': index===getCurrent?getActiveColor:getDefaultColor, |
||||
'font-weight': activeBold&&index===getCurrent?'bold':'', |
||||
'transition-duration': getDuration + 's', |
||||
'z-index': (Number(zIndex) + 2) |
||||
}" |
||||
v-for="(item, index) in getTabs" :key="index" @tap="emit(index)" :id="preId + index"> |
||||
<!-- line1 --> |
||||
<view v-if="animationMode==='line1'" class="boxStyle" :style="getDurationStyle +( index===getCurrent?getActiveStyle:getDefaultStyle)"></view> |
||||
{{item.name || item}} |
||||
</view> |
||||
<!-- itemBackground --> |
||||
<view v-if="hasItemBackground" class="itemBackgroundBox" :style="{ |
||||
'height': getHeight + 'rpx', |
||||
'width': (isLine3&&tabsInfo[animationFinishCurrent]?tabsInfo[animationFinishCurrent].width:tabsInfo[getCurrent].width) + 'px', |
||||
'z-index': Number(zIndex) + 1, |
||||
'transition-duration': getDuration + 's', |
||||
'left': (tabsInfo[getCurrent]?tabsInfo[getCurrent].left:0) + 'px' |
||||
}"> |
||||
<view class="itemBackground" :style="'transition-duration:' + getDuration + 's;' + |
||||
'background-color:' + getItemBackgroundColor + ';' + |
||||
'box-shadow: 0 0 5rpx 5rpx ' + getItemBackgroundColor + ';' + |
||||
itemBackgroundStyle + ';'" /> |
||||
</view> |
||||
<!-- line2 --> |
||||
<view v-if="animationMode==='line2'" class="boxStyle2" :style="getLinezIndex + getDurationStyle + |
||||
'width:' + lW + 'px;' + |
||||
'background-color:' + (lineColor||getActiveColor) + ';' + |
||||
line2Style + ';' + |
||||
'left:' + line2Dx + 'px;'" /> |
||||
|
||||
<view v-if="animationMode==='line3'" class="boxStyle2" :style="getLinezIndex + |
||||
'width:' + lW + 'px;' + |
||||
'background-color:' + (lineColor||getActiveColor) + ';' + |
||||
line2Style + ';' + |
||||
'left:' + getLine3Dx + 'px'" /> |
||||
|
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
const { |
||||
windowWidth |
||||
} = uni.getSystemInfoSync(); |
||||
const preId = 'QSTabsID_'; |
||||
export default { |
||||
props: { |
||||
tabs: { //需循环的标签列表 |
||||
type: Array, |
||||
default () { |
||||
return []; |
||||
} |
||||
}, |
||||
current: { //当前所在滑块的 index |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
height: { //QS-tabs的高度和行高 |
||||
type: [String, Number], |
||||
default: 80 |
||||
}, |
||||
minWidth: { //单个tab的最小宽度 //v1.4修改 |
||||
type: [String, Number], |
||||
default: 250 |
||||
}, |
||||
fontSize: { //字体大小 |
||||
type: [String, Number], |
||||
default: 30 |
||||
}, |
||||
duration: { //过渡动画时长, 单位 s |
||||
type: [String, Number], |
||||
default: .5 |
||||
}, |
||||
activeColor: { //选中项的主题颜色 |
||||
type: String, |
||||
default: '#33cc33' |
||||
}, |
||||
defaultColor: { //未选中项的主题颜色 |
||||
type: String, |
||||
default: '#888' |
||||
}, |
||||
animationLineWidth: { //动画线条的宽度 |
||||
type: [String, Number], |
||||
default: 20 |
||||
}, |
||||
line2Style: { //line2线条的样式 |
||||
type: String, |
||||
default: 'height: 8rpx;border-radius: 4rpx;' |
||||
}, |
||||
animationMode: { //动画类型 |
||||
type: String, |
||||
default: 'line1' |
||||
}, |
||||
autoCenter: { //是否自动滚动至中心目标 |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
autoCenterMode: { //滚动至中心目标类型 |
||||
type: String, |
||||
default: 'component' |
||||
}, |
||||
activeStyle: { //line1模式选中项的样式 |
||||
type: String, |
||||
default: 'bottom:0;left:50%;transform: translate(-50%,-100%);height: 8rpx;border-radius:4rpx;' |
||||
}, |
||||
defaultStyle: { //line1模式未选中项的样式 |
||||
type: String, |
||||
default: 'bottom:0;left:50%;transform: translate(-50%,-100%);height: 8rpx;border-radius:4rpx;' |
||||
}, |
||||
backgroundColor: { //统一背景颜色 |
||||
type: String, |
||||
default: 'rgba(255,255,255,0)' |
||||
}, |
||||
hasItemBackground: { //是否开启背景追光 |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
itemBackgroundColor: { //统一追光背景颜色 |
||||
type: String, |
||||
default: 'rgba(255,255,255,0)' |
||||
}, |
||||
itemBackgroundStyle: { //追光样式 |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
zIndex: { //css的z-index属性值 |
||||
type: [String, Number], |
||||
default: 99 |
||||
}, |
||||
swiperWidth: { //line3生效, 外部swiper的宽度, 单位rpx |
||||
type: [String, Number], |
||||
default: 750 |
||||
}, |
||||
space: { //tab间距 |
||||
type: [String, Number], |
||||
default: '0' |
||||
}, |
||||
activeBold: { //当前tab字体是否加粗 |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
lineColor: { //line颜色 |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}, |
||||
computed: { |
||||
isLine3() { |
||||
return this.animationMode === 'line3'; |
||||
}, |
||||
getCurrent() { |
||||
const current = Number(this.current); |
||||
if (current > (this.getTabs.length - 1)) { |
||||
return (this.getTabs.length - 1) |
||||
} |
||||
return current; |
||||
}, |
||||
getTabs() { |
||||
return this.tabs; |
||||
}, |
||||
getHeight() { |
||||
return Number(this.height); |
||||
}, |
||||
getWidth() { |
||||
return Number(this.minWidth); |
||||
}, |
||||
getFontSize() { |
||||
return this.fontSize; |
||||
}, |
||||
getDuration() { |
||||
return Number(this.duration); |
||||
}, |
||||
getBgColor() { |
||||
const defaultColor = this.backgroundColor || 'rgba(255,255,255,0)'; |
||||
if (this.getTabs[this.getCurrent] instanceof Object) { |
||||
return this.getTabs[this.getCurrent].backgroundColor || defaultColor; |
||||
} else { |
||||
return defaultColor; |
||||
} |
||||
}, |
||||
getItemBackgroundColor() { |
||||
const defaultColor = this.itemBackgroundColor || 'rgba(255,255,255,0)'; |
||||
if (this.getTabs[this.getCurrent] instanceof Object) { |
||||
return this.getTabs[this.getCurrent].itemBackgroundColor || defaultColor; |
||||
} else { |
||||
return defaultColor; |
||||
} |
||||
}, |
||||
getDurationStyle() { |
||||
return `transition-duration: ${this.getDuration}s;` |
||||
}, |
||||
getActiveColor() { |
||||
let activeColor; |
||||
if (this.getTabs[this.getCurrent] instanceof Object) { |
||||
if (this.getTabs[this.getCurrent].activeColor) { |
||||
activeColor = this.getTabs[this.getCurrent].activeColor; |
||||
} else { |
||||
activeColor = this.activeColor; |
||||
} |
||||
} else { |
||||
activeColor = this.activeColor; |
||||
} |
||||
return activeColor; |
||||
}, |
||||
getDefaultColor() { |
||||
let defaultColor; |
||||
if (this.getTabs[this.getCurrent] instanceof Object) { |
||||
if (this.getTabs[this.getCurrent].defaultColor) { |
||||
defaultColor = this.getTabs[this.getCurrent].defaultColor; |
||||
} else { |
||||
defaultColor = this.defaultColor; |
||||
} |
||||
} else { |
||||
defaultColor = this.defaultColor; |
||||
} |
||||
return defaultColor; |
||||
}, |
||||
getActiveStyle() { |
||||
return `width:${this.animationLineWidth}%;background-color:${this.getActiveColor};${this.activeStyle};`; |
||||
}, |
||||
getDefaultStyle() { |
||||
return `width:0;background-color:${this.getActiveColor};${this.defaultStyle};`; |
||||
}, |
||||
getLinezIndexNum() { |
||||
return Number(this.zIndex) + 2; |
||||
}, |
||||
getLinezIndex() { |
||||
return `z-index: ${this.getLinezIndexNum};`; |
||||
}, |
||||
getLine3Dx() { |
||||
return Number(this.line3Dx) + Number(this.line3AddDx); |
||||
} |
||||
}, |
||||
watch: { |
||||
current(n, o) { |
||||
this.change(n); |
||||
}, |
||||
tabs() { |
||||
this.init(); |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
left: 0, |
||||
tabsInfo: [], |
||||
line2Width: Number(this.animationLineWidth), |
||||
setTimeoutFc: null, |
||||
componentsWidth: 0, |
||||
animationFinishCurrent: this.current, |
||||
pxWidth: 0, |
||||
lW: 0, |
||||
sW: 0, |
||||
preId, |
||||
line3Dx: 0, |
||||
line3AddDx: 0, |
||||
line2Dx: 0 |
||||
} |
||||
}, |
||||
// #ifndef H5 |
||||
onReady() { |
||||
this.init(); |
||||
}, |
||||
// #endif |
||||
// #ifdef H5 |
||||
mounted() { |
||||
this.init(); |
||||
}, |
||||
// #endif |
||||
methods: { |
||||
init() { |
||||
this.countPx(); |
||||
let view = uni.createSelectorQuery().in(this); |
||||
for (let i = 0; i < this.tabs.length; i++) { |
||||
view.select('#' + preId + i).boundingClientRect(); |
||||
} |
||||
view.exec((res) => { |
||||
const arr = []; |
||||
for (let i = 0; i < res.length; i++) { |
||||
arr.push(res[i]); |
||||
} |
||||
this.tabsInfo = arr; |
||||
this.countLine2Dx(); |
||||
this.countLine3Dx(); |
||||
let _this = this; |
||||
_this.getQuery(() => { |
||||
_this.countScrollX(); |
||||
}); |
||||
}) |
||||
}, |
||||
countLine2Dx() { |
||||
if (this.animationMode === 'line2') { |
||||
const tab = this.tabsInfo[this.getCurrent]; |
||||
if(tab) this.line2Dx = tab.left + tab.width / 2 - this.lW / 2; |
||||
} |
||||
}, |
||||
countLine3Dx() { |
||||
if (this.animationMode === 'line3') { |
||||
const tab = this.tabsInfo[this.animationFinishCurrent]; |
||||
if(tab) this.line3Dx = tab.left + tab.width / 2 - this.lW / 2; |
||||
} |
||||
}, |
||||
countPx() { |
||||
const w = uni.upx2px(this.getWidth); |
||||
this.pxWidth = w; |
||||
this.lW = (w * (Number(this.animationLineWidth) / 100))+72.5; |
||||
this.sW = uni.upx2px(Number(this.swiperWidth)); |
||||
}, |
||||
emit(index) { |
||||
this.$emit('change', index); |
||||
}, |
||||
change() { |
||||
this.countScrollX(); |
||||
if (this.animationMode === 'line2') { |
||||
this.line2Width = 2; |
||||
if (this.setTimeoutFc) clearTimeout(this.setTimeoutFc); |
||||
this.setTimeoutFc = setTimeout(() => { |
||||
this.line2Width = this.animationLineWidth; |
||||
}, this.getDuration * 1000 * 3 / 5); |
||||
this.countLine2Dx(); |
||||
} |
||||
}, |
||||
getQuery(cb) { |
||||
try { |
||||
let view = uni.createSelectorQuery().in(this).select('.QS-tabs'); |
||||
view.fields({ |
||||
size: true |
||||
}, data => { |
||||
if (data) { |
||||
this.componentsWidth = data.width; |
||||
if (cb && typeof cb === 'function') cb(data); |
||||
} else { |
||||
this.retryGetQuery(cb); |
||||
} |
||||
}).exec(); |
||||
} catch (e) { |
||||
//TODO handle the exception |
||||
this.componentsWidth = windowWidth; |
||||
} |
||||
}, |
||||
retryGetQuery(cb) { |
||||
try { |
||||
let view = uni.createSelectorQuery().select('.QS-tabs'); |
||||
view.fields({ |
||||
size: true |
||||
}, data => { |
||||
if (data) { |
||||
this.componentsWidth = data.width; |
||||
} else { |
||||
this.componentsWidth = windowWidth; |
||||
} |
||||
if (cb && typeof cb === 'function') cb(data); |
||||
}).exec(); |
||||
} catch (e) { |
||||
//TODO handle the exception |
||||
this.componentsWidth = windowWidth; |
||||
} |
||||
}, |
||||
countScrollX() { |
||||
if (this.autoCenter) { |
||||
let tab; |
||||
if(this.isLine3) { |
||||
tab = this.tabsInfo[this.animationFinishCurrent]; |
||||
}else{ |
||||
tab = this.tabsInfo[this.getCurrent]; |
||||
} |
||||
if(tab) { |
||||
let tabCenter = tab.left + tab.width/2; |
||||
let fatherWidth; |
||||
if (this.autoCenterMode === 'window') { |
||||
fatherWidth = windowWidth; |
||||
} else { |
||||
fatherWidth = this.componentsWidth; |
||||
} |
||||
this.left = tabCenter - fatherWidth / 2; |
||||
} |
||||
} |
||||
}, |
||||
setDx(dx) { |
||||
const tab = this.tabsInfo[dx>0?(this.animationFinishCurrent + 1):(this.animationFinishCurrent - 1)]; |
||||
this.line3AddDx = dx / this.sW * (tab?tab.width:this.pxWidth); |
||||
}, |
||||
setFinishCurrent(current) { |
||||
this.line3AddDx = 0; |
||||
this.animationFinishCurrent = current; |
||||
this.countLine3Dx(); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
view, |
||||
scroll-view { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.QS-tabs { |
||||
width: 100%; |
||||
transition-property: background-color, color; |
||||
} |
||||
|
||||
.QS-tabs::-webkit-scrollbar { |
||||
display: none; |
||||
width: 0 !important; |
||||
height: 0 !important; |
||||
-webkit-appearance: none; |
||||
background: transparent; |
||||
} |
||||
|
||||
.QS-tabs-scroll { |
||||
width: 100%; |
||||
white-space: nowrap; |
||||
position: relative; |
||||
} |
||||
|
||||
.QS-tabs-scroll-box { |
||||
position: relative; |
||||
display: flex; |
||||
white-space: nowrap !important; |
||||
display: block !important; |
||||
} |
||||
|
||||
.QS-tabs-scroll-item { |
||||
position: relative; |
||||
display: inline-block; |
||||
text-align: center; |
||||
transition-property: background-color, color, font-weight; |
||||
} |
||||
|
||||
.content { |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
.boxStyle { |
||||
pointer-events: none; |
||||
position: absolute; |
||||
transition-property: all; |
||||
} |
||||
|
||||
.boxStyle2 { |
||||
pointer-events: none; |
||||
position: absolute; |
||||
bottom: 0; |
||||
transition-property: all; |
||||
transform: translateY(-100%); |
||||
} |
||||
|
||||
.itemBackgroundBox { |
||||
pointer-events: none; |
||||
position: absolute; |
||||
top: 0; |
||||
transition-property: left, background-color; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.itemBackground { |
||||
height: 100%; |
||||
width: 100%; |
||||
transition-property: all; |
||||
} |
||||
</style> |
||||
@ -1,121 +1,129 @@ |
||||
<template> |
||||
<view> |
||||
<view class="width90 mart20 fotct" v-if="user.hltCardNo.cardNo"> |
||||
<image :src="imagewxUrl+imgadres" mode="widthFix" class="cardImg"></image> |
||||
<view class="cardlabel font18 fcorfff fontwig6" style="top: 50px;">卡号 : {{user.hltCardNo.cardNo}}</view> |
||||
<view class="cardlabel font18 fcorfff fontwig6" style="top: 80px;">余额 : {{tongCardPrice}}￥</view> |
||||
</view> |
||||
<view class="btnw50 font20 fontlet" @click="selectCards()">查询明细</view> |
||||
<view class="btnw50 font20 fontlet" @click="delUserCard()" v-if="user.hltCardNo">解绑</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
delUserCard, |
||||
getHuiLianTongCardBalance |
||||
} from '../../../Utils/Api.js'; |
||||
let app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
user: '', |
||||
tongCardPrice:0, |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres: 'cards.jpg', |
||||
} |
||||
}, |
||||
onShow() { |
||||
this.user = app.globalData.userInfo; |
||||
if (!this.user.isSetHltCard) { |
||||
uni.showToast({ |
||||
icon: 'none', |
||||
title: '当前账号还未绑定,前往绑定', |
||||
duration: 2000, |
||||
success() { |
||||
setTimeout(() => { |
||||
uni.navigateTo({ |
||||
url: '../bindingCard/bindingCard' |
||||
}) |
||||
}, 1000) |
||||
} |
||||
}); |
||||
return; |
||||
} |
||||
this.getHuiLianTongCardBalance(); |
||||
}, |
||||
methods: { |
||||
//跳转明细 |
||||
selectCards() { |
||||
uni.navigateTo({ |
||||
url: '../unionCard/unionCard' |
||||
}) |
||||
}, |
||||
//解除绑定我的卡号列表 |
||||
delUserCard() { |
||||
let that = this; |
||||
uni.showModal({ |
||||
content: '是否确定解除当前绑定卡号?', |
||||
success: (res) => { |
||||
if (res.confirm) { |
||||
let params = { |
||||
cardNo: that.user.hltCardNo.cardNo |
||||
} |
||||
delUserCard(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: '解除成功', |
||||
duration: 2000, |
||||
icon: 'success', |
||||
success() { |
||||
setTimeout(() => { |
||||
uni.navigateBack({}) |
||||
}, 1000) |
||||
} |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}); |
||||
} else if (res.cancel) { |
||||
console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
//查询详情 |
||||
getHuiLianTongCardBalance() { |
||||
let params = { |
||||
cardNo: this.user.hltCardNo.cardNo |
||||
} |
||||
getHuiLianTongCardBalance(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.tongCardPrice = res.return_data.balance; |
||||
} |
||||
|
||||
}); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
page { |
||||
background-color: #f8f8f8; |
||||
} |
||||
|
||||
.cardImg { |
||||
position: relative; |
||||
margin-top: 5px; |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.cardlabel { |
||||
position: absolute; |
||||
left: 13%; |
||||
} |
||||
<template> |
||||
<view> |
||||
<view class="width90 mart20 fotct" v-if="user.hltCardNo.cardNo"> |
||||
<image :src="imagewxUrl+imgadres" mode="widthFix" class="cardImg"></image> |
||||
<view class="cardlabel font18 fcorfff fontwig6" style="top: 50px;">卡号 : {{user.hltCardNo.cardNo}}</view> |
||||
<view class="cardlabel font18 fcorfff fontwig6" style="top: 80px;">余额 : {{tongCardPrice}}￥</view> |
||||
</view> |
||||
<view class="btnw50 font20 fontlet" @click="selectCards()">查询明细</view> |
||||
<view class="btnw50 font20 fontlet" @click="unionCardPay()">充值余额</view> |
||||
<view class="btnw50 font20 fontlet" @click="delUserCard()" v-if="user.hltCardNo">解绑</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
delUserCard, |
||||
getHuiLianTongCardBalance |
||||
} from '../../../Utils/Api.js'; |
||||
let app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
user: '', |
||||
tongCardPrice: 0, |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres: 'cards.jpg', |
||||
} |
||||
}, |
||||
onShow() { |
||||
this.user = app.globalData.userInfo; |
||||
if (!this.user.isSetHltCard) { |
||||
uni.showToast({ |
||||
icon: 'none', |
||||
title: '当前账号还未绑定,前往绑定', |
||||
duration: 2000, |
||||
success() { |
||||
setTimeout(() => { |
||||
uni.navigateTo({ |
||||
url: '../bindingCard/bindingCard' |
||||
}) |
||||
}, 1000) |
||||
} |
||||
}); |
||||
return; |
||||
} |
||||
this.getHuiLianTongCardBalance(); |
||||
}, |
||||
methods: { |
||||
//跳转明细 |
||||
selectCards() { |
||||
uni.navigateTo({ |
||||
url: '../unionCard/unionCard' |
||||
}) |
||||
}, |
||||
//解除绑定我的卡号列表 |
||||
delUserCard() { |
||||
let that = this; |
||||
uni.showModal({ |
||||
content: '是否确定解除当前绑定卡号?', |
||||
success: (res) => { |
||||
if (res.confirm) { |
||||
let params = { |
||||
cardNo: that.user.hltCardNo.cardNo |
||||
} |
||||
delUserCard(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: '解除成功', |
||||
duration: 2000, |
||||
icon: 'success', |
||||
success() { |
||||
setTimeout(() => { |
||||
uni.navigateBack({}) |
||||
}, 1000) |
||||
} |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}); |
||||
} else if (res.cancel) { |
||||
console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
//查询详情 |
||||
getHuiLianTongCardBalance() { |
||||
let params = { |
||||
cardNo: this.user.hltCardNo.cardNo |
||||
} |
||||
getHuiLianTongCardBalance(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.tongCardPrice = res.return_data.balance; |
||||
} |
||||
|
||||
}); |
||||
}, |
||||
//跳转充值 |
||||
unionCardPay() { |
||||
uni.navigateTo({ |
||||
url: '../../../subPages/trade-union-recharge/trade-union-recharge?cardId=' + this.user |
||||
.hltCardNo.cardNo |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
page { |
||||
background-color: #f8f8f8; |
||||
} |
||||
|
||||
.cardImg { |
||||
position: relative; |
||||
margin-top: 5px; |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.cardlabel { |
||||
position: absolute; |
||||
left: 13%; |
||||
} |
||||
</style> |
||||
|
||||
@ -1,143 +1,171 @@ |
||||
<template> |
||||
<view> |
||||
<image mode="widthFix" class="width90 mart20" v-if="user && user.infoCompleteStatus == 1" :src="imagewxUrl+imgadres"></image> |
||||
<image mode="widthFix" class="width90 mart20" v-if="!user" :src="imagewxUrl+imgadres1"></image> |
||||
<!-- #ifdef MP --> |
||||
<view class="mart30 width90 height50 fcorfff backcor008 fotct btns font16 fontlet" v-if="user && user.infoCompleteStatus == 1" @click="getuserinfo"> |
||||
授权并登录</view> |
||||
<button class="mart30 width90 height50 fcorfff backcor008 fotct btns font16 fontlet" v-if="!user" |
||||
open-type="getPhoneNumber" @getphonenumber="loginByPhone">授权手机号</button> |
||||
<!-- <button class="mart30 width90 height50 fcorfff backcor008 fotct btns font16" v-if="user.phone && user" |
||||
@click="reqmessage">授权获取消息通知</button> --> |
||||
<!-- #endif --> |
||||
<!-- #ifdef H5 --> |
||||
<button class="mart30 width90 height50 fcorfff backcor008 fotct btns font16" |
||||
@click="getH5userinfo">授权并登录</button> |
||||
<!-- #endif --> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
const app = getApp(); |
||||
import { |
||||
getUserInfo, |
||||
loginByPhone |
||||
} from "../../Utils/Api.js" |
||||
export default { |
||||
data() { |
||||
return { |
||||
user: '', |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres: 'login.png', |
||||
imgadres1: 'loginphone.png', |
||||
} |
||||
}, |
||||
onLoad() { |
||||
this.user = app.globalData.userInfo; |
||||
}, |
||||
methods: { |
||||
getuserinfo() { |
||||
let that = this; |
||||
uni.getUserProfile({ |
||||
desc: '登录中...', |
||||
success: function(res) { |
||||
let params = { |
||||
openId: app.globalData.openId, |
||||
iv: res.iv, |
||||
encryptedData: res.encryptedData |
||||
} |
||||
getUserInfo(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
app.globalData.userInfo = res.return_data |
||||
.object |
||||
.highUser; |
||||
that.user = res.return_data.object.highUser; |
||||
app.globalData.token = res.return_data.uniqueCode; |
||||
that.isShowAuth = false |
||||
uni.setStorage({ |
||||
key: "user", |
||||
data: res.return_data |
||||
.object |
||||
.highUser |
||||
}) |
||||
uni.setStorage({ |
||||
key: "token", |
||||
data: res.return_data.uniqueCode |
||||
}) |
||||
if (res.return_data.object.highUser.infoCompleteStatus == 0) { |
||||
uni.navigateBack({ |
||||
}) |
||||
} |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg |
||||
}) |
||||
} |
||||
}); |
||||
}, |
||||
fail: res => { |
||||
uni.showToast({ |
||||
title: "微信登录授权失败", |
||||
icon: "none" |
||||
}); |
||||
} |
||||
}) |
||||
that.isShowAuth = false |
||||
}, |
||||
// 微信获取手机号 |
||||
loginByPhone(PhoneNumber) { |
||||
if(PhoneNumber.detail.iv == undefined){ |
||||
uni.showToast({ |
||||
title: "用户取消授权", |
||||
icon: "none" |
||||
}); |
||||
return; |
||||
} |
||||
let params = { |
||||
openId: app.globalData.openId, |
||||
iv: PhoneNumber.detail.iv, |
||||
encryptedData: PhoneNumber.detail.encryptedData |
||||
} |
||||
loginByPhone(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: '手机号授权成功', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
this.user = res.return_data.object.highUser; |
||||
app.globalData.token = res.return_data.uniqueCode; |
||||
app.globalData.userInfo = res.return_data |
||||
.object |
||||
.highUser; |
||||
uni.setStorage({ |
||||
key: "user", |
||||
data: res.return_data |
||||
.object |
||||
.highUser |
||||
}) |
||||
uni.setStorage({ |
||||
key: "token", |
||||
data: res.return_data.uniqueCode |
||||
}) |
||||
if(res.return_data.object.highUser.infoCompleteStatus == 0){ |
||||
uni.navigateBack({ |
||||
}) |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
getH5userinfo() { |
||||
uni.navigateTo({ |
||||
url: '/pages/login/register' |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.btns { |
||||
border-radius: 6px; |
||||
} |
||||
<template> |
||||
<view> |
||||
<image mode="widthFix" class="width90 mart20" v-if="user && user.infoCompleteStatus == 1" |
||||
:src="imagewxUrl+imgadres"></image> |
||||
<image mode="widthFix" class="width90 mart20" v-if="!user" :src="imagewxUrl+imgadres1"></image> |
||||
<!-- #ifdef MP --> |
||||
<view class="mart30 width90 height50 fcorfff backcor008 fotct btns font16 fontlet" |
||||
v-if="user && user.infoCompleteStatus == 1" @click="getuserinfo"> |
||||
授权并登录</view> |
||||
<button class="mart30 width90 height50 fcorfff backcor008 fotct btns font16 fontlet" v-if="!user" |
||||
open-type="getPhoneNumber" @getphonenumber="loginByPhone">授权手机号</button> |
||||
<!-- <button class="mart30 width90 height50 fcorfff backcor008 fotct btns font16" v-if="user.phone && user" |
||||
@click="reqmessage">授权获取消息通知</button> --> |
||||
<!-- #endif --> |
||||
<!-- #ifdef H5 --> |
||||
<button class="mart30 width90 height50 fcorfff backcor008 fotct btns font16" |
||||
@click="getH5userinfo">授权并登录</button> |
||||
<!-- #endif --> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
const app = getApp(); |
||||
import { |
||||
getUserInfo, |
||||
loginByPhone, |
||||
HandleCode |
||||
} from "../../Utils/Api.js" |
||||
export default { |
||||
data() { |
||||
return { |
||||
user: '', |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres: 'login.png', |
||||
imgadres1: 'loginphone.png', |
||||
} |
||||
}, |
||||
onLoad() { |
||||
// #ifdef MP |
||||
if (!app.globalData.openId) { |
||||
uni.login({ |
||||
provider: 'weixin', |
||||
success: function(loginRes) { |
||||
app.globalData.code = loginRes.code; |
||||
// 请求接口 |
||||
let params = { |
||||
code: app.globalData.code |
||||
} |
||||
HandleCode(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
app.globalData.openId = res.return_data.openId; |
||||
} |
||||
}) |
||||
}, |
||||
}) |
||||
} |
||||
// #endif |
||||
this.user = app.globalData.userInfo; |
||||
}, |
||||
methods: { |
||||
getuserinfo() { |
||||
let that = this; |
||||
uni.getUserProfile({ |
||||
desc: '登录中...', |
||||
success: function(res) { |
||||
let params = { |
||||
openId: app.globalData.openId, |
||||
iv: res.iv, |
||||
encryptedData: res.encryptedData |
||||
} |
||||
getUserInfo(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
app.globalData.userInfo = res.return_data |
||||
.object |
||||
.highUser; |
||||
that.user = res.return_data.object.highUser; |
||||
app.globalData.token = res.return_data.uniqueCode; |
||||
that.isShowAuth = false |
||||
uni.setStorage({ |
||||
key: "user", |
||||
data: res.return_data |
||||
.object |
||||
.highUser |
||||
}) |
||||
uni.setStorage({ |
||||
key: "token", |
||||
data: res.return_data.uniqueCode |
||||
}) |
||||
if (res.return_data.object.highUser.infoCompleteStatus == 0) { |
||||
uni.navigateBack({}) |
||||
} |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}); |
||||
}, |
||||
fail: res => { |
||||
uni.showToast({ |
||||
title: "微信登录授权失败", |
||||
icon: "none" |
||||
}); |
||||
} |
||||
}) |
||||
that.isShowAuth = false |
||||
}, |
||||
// 微信获取手机号 |
||||
loginByPhone(PhoneNumber) { |
||||
if (PhoneNumber.detail.iv == undefined) { |
||||
uni.showToast({ |
||||
title: "用户取消授权", |
||||
icon: "none" |
||||
}); |
||||
return; |
||||
} |
||||
let params = { |
||||
openId: app.globalData.openId, |
||||
iv: PhoneNumber.detail.iv, |
||||
encryptedData: PhoneNumber.detail.encryptedData |
||||
} |
||||
loginByPhone(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
uni.showToast({ |
||||
title: '手机号授权成功', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
this.user = res.return_data.object.highUser; |
||||
app.globalData.token = res.return_data.uniqueCode; |
||||
app.globalData.userInfo = res.return_data |
||||
.object |
||||
.highUser; |
||||
uni.setStorage({ |
||||
key: "user", |
||||
data: res.return_data |
||||
.object |
||||
.highUser |
||||
}) |
||||
uni.setStorage({ |
||||
key: "token", |
||||
data: res.return_data.uniqueCode |
||||
}) |
||||
if (res.return_data.object.highUser.infoCompleteStatus == 0) { |
||||
uni.navigateBack({}) |
||||
} |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
icon: "none", |
||||
duration: 2000 |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
getH5userinfo() { |
||||
uni.navigateTo({ |
||||
url: '/pages/login/register' |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.btns { |
||||
border-radius: 6px; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue