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> |
<template> |
||||||
<view> |
<view> |
||||||
<view class="width90 mart20 fotct" v-if="user.hltCardNo.cardNo"> |
<view class="width90 mart20 fotct" v-if="user.hltCardNo.cardNo"> |
||||||
<image :src="imagewxUrl+imgadres" mode="widthFix" class="cardImg"></image> |
<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: 50px;">卡号 : {{user.hltCardNo.cardNo}}</view> |
||||||
<view class="cardlabel font18 fcorfff fontwig6" style="top: 80px;">余额 : {{tongCardPrice}}￥</view> |
<view class="cardlabel font18 fcorfff fontwig6" style="top: 80px;">余额 : {{tongCardPrice}}￥</view> |
||||||
</view> |
</view> |
||||||
<view class="btnw50 font20 fontlet" @click="selectCards()">查询明细</view> |
<view class="btnw50 font20 fontlet" @click="selectCards()">查询明细</view> |
||||||
<view class="btnw50 font20 fontlet" @click="delUserCard()" v-if="user.hltCardNo">解绑</view> |
<view class="btnw50 font20 fontlet" @click="unionCardPay()">充值余额</view> |
||||||
</view> |
<view class="btnw50 font20 fontlet" @click="delUserCard()" v-if="user.hltCardNo">解绑</view> |
||||||
</template> |
</view> |
||||||
|
</template> |
||||||
<script> |
|
||||||
import { |
<script> |
||||||
delUserCard, |
import { |
||||||
getHuiLianTongCardBalance |
delUserCard, |
||||||
} from '../../../Utils/Api.js'; |
getHuiLianTongCardBalance |
||||||
let app = getApp(); |
} from '../../../Utils/Api.js'; |
||||||
export default { |
let app = getApp(); |
||||||
data() { |
export default { |
||||||
return { |
data() { |
||||||
user: '', |
return { |
||||||
tongCardPrice:0, |
user: '', |
||||||
imagewxUrl: app.globalData.imageWxImg, |
tongCardPrice: 0, |
||||||
imgadres: 'cards.jpg', |
imagewxUrl: app.globalData.imageWxImg, |
||||||
} |
imgadres: 'cards.jpg', |
||||||
}, |
} |
||||||
onShow() { |
}, |
||||||
this.user = app.globalData.userInfo; |
onShow() { |
||||||
if (!this.user.isSetHltCard) { |
this.user = app.globalData.userInfo; |
||||||
uni.showToast({ |
if (!this.user.isSetHltCard) { |
||||||
icon: 'none', |
uni.showToast({ |
||||||
title: '当前账号还未绑定,前往绑定', |
icon: 'none', |
||||||
duration: 2000, |
title: '当前账号还未绑定,前往绑定', |
||||||
success() { |
duration: 2000, |
||||||
setTimeout(() => { |
success() { |
||||||
uni.navigateTo({ |
setTimeout(() => { |
||||||
url: '../bindingCard/bindingCard' |
uni.navigateTo({ |
||||||
}) |
url: '../bindingCard/bindingCard' |
||||||
}, 1000) |
}) |
||||||
} |
}, 1000) |
||||||
}); |
} |
||||||
return; |
}); |
||||||
} |
return; |
||||||
this.getHuiLianTongCardBalance(); |
} |
||||||
}, |
this.getHuiLianTongCardBalance(); |
||||||
methods: { |
}, |
||||||
//跳转明细 |
methods: { |
||||||
selectCards() { |
//跳转明细 |
||||||
uni.navigateTo({ |
selectCards() { |
||||||
url: '../unionCard/unionCard' |
uni.navigateTo({ |
||||||
}) |
url: '../unionCard/unionCard' |
||||||
}, |
}) |
||||||
//解除绑定我的卡号列表 |
}, |
||||||
delUserCard() { |
//解除绑定我的卡号列表 |
||||||
let that = this; |
delUserCard() { |
||||||
uni.showModal({ |
let that = this; |
||||||
content: '是否确定解除当前绑定卡号?', |
uni.showModal({ |
||||||
success: (res) => { |
content: '是否确定解除当前绑定卡号?', |
||||||
if (res.confirm) { |
success: (res) => { |
||||||
let params = { |
if (res.confirm) { |
||||||
cardNo: that.user.hltCardNo.cardNo |
let params = { |
||||||
} |
cardNo: that.user.hltCardNo.cardNo |
||||||
delUserCard(params).then(res => { |
} |
||||||
if (res.return_code == '000000') { |
delUserCard(params).then(res => { |
||||||
uni.showToast({ |
if (res.return_code == '000000') { |
||||||
title: '解除成功', |
uni.showToast({ |
||||||
duration: 2000, |
title: '解除成功', |
||||||
icon: 'success', |
duration: 2000, |
||||||
success() { |
icon: 'success', |
||||||
setTimeout(() => { |
success() { |
||||||
uni.navigateBack({}) |
setTimeout(() => { |
||||||
}, 1000) |
uni.navigateBack({}) |
||||||
} |
}, 1000) |
||||||
}) |
} |
||||||
} else { |
}) |
||||||
uni.showToast({ |
} else { |
||||||
title: res.return_msg, |
uni.showToast({ |
||||||
duration: 2000, |
title: res.return_msg, |
||||||
icon: 'none' |
duration: 2000, |
||||||
}) |
icon: 'none' |
||||||
} |
}) |
||||||
}); |
} |
||||||
} else if (res.cancel) { |
}); |
||||||
console.log('用户点击取消'); |
} else if (res.cancel) { |
||||||
} |
console.log('用户点击取消'); |
||||||
} |
} |
||||||
}); |
} |
||||||
}, |
}); |
||||||
//查询详情 |
}, |
||||||
getHuiLianTongCardBalance() { |
//查询详情 |
||||||
let params = { |
getHuiLianTongCardBalance() { |
||||||
cardNo: this.user.hltCardNo.cardNo |
let params = { |
||||||
} |
cardNo: this.user.hltCardNo.cardNo |
||||||
getHuiLianTongCardBalance(params).then(res => { |
} |
||||||
if (res.return_code == '000000') { |
getHuiLianTongCardBalance(params).then(res => { |
||||||
this.tongCardPrice = res.return_data.balance; |
if (res.return_code == '000000') { |
||||||
} |
this.tongCardPrice = res.return_data.balance; |
||||||
|
} |
||||||
}); |
|
||||||
}, |
}); |
||||||
} |
}, |
||||||
} |
//跳转充值 |
||||||
</script> |
unionCardPay() { |
||||||
|
uni.navigateTo({ |
||||||
<style lang="scss"> |
url: '../../../subPages/trade-union-recharge/trade-union-recharge?cardId=' + this.user |
||||||
page { |
.hltCardNo.cardNo |
||||||
background-color: #f8f8f8; |
}) |
||||||
} |
} |
||||||
|
} |
||||||
.cardImg { |
} |
||||||
position: relative; |
</script> |
||||||
margin-top: 5px; |
|
||||||
margin-bottom: 5px; |
<style lang="scss"> |
||||||
} |
page { |
||||||
|
background-color: #f8f8f8; |
||||||
.cardlabel { |
} |
||||||
position: absolute; |
|
||||||
left: 13%; |
.cardImg { |
||||||
} |
position: relative; |
||||||
|
margin-top: 5px; |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.cardlabel { |
||||||
|
position: absolute; |
||||||
|
left: 13%; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -1,143 +1,171 @@ |
|||||||
<template> |
<template> |
||||||
<view> |
<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 && user.infoCompleteStatus == 1" |
||||||
<image mode="widthFix" class="width90 mart20" v-if="!user" :src="imagewxUrl+imgadres1"></image> |
:src="imagewxUrl+imgadres"></image> |
||||||
<!-- #ifdef MP --> |
<image mode="widthFix" class="width90 mart20" v-if="!user" :src="imagewxUrl+imgadres1"></image> |
||||||
<view class="mart30 width90 height50 fcorfff backcor008 fotct btns font16 fontlet" v-if="user && user.infoCompleteStatus == 1" @click="getuserinfo"> |
<!-- #ifdef MP --> |
||||||
授权并登录</view> |
<view class="mart30 width90 height50 fcorfff backcor008 fotct btns font16 fontlet" |
||||||
<button class="mart30 width90 height50 fcorfff backcor008 fotct btns font16 fontlet" v-if="!user" |
v-if="user && user.infoCompleteStatus == 1" @click="getuserinfo"> |
||||||
open-type="getPhoneNumber" @getphonenumber="loginByPhone">授权手机号</button> |
授权并登录</view> |
||||||
<!-- <button class="mart30 width90 height50 fcorfff backcor008 fotct btns font16" v-if="user.phone && user" |
<button class="mart30 width90 height50 fcorfff backcor008 fotct btns font16 fontlet" v-if="!user" |
||||||
@click="reqmessage">授权获取消息通知</button> --> |
open-type="getPhoneNumber" @getphonenumber="loginByPhone">授权手机号</button> |
||||||
<!-- #endif --> |
<!-- <button class="mart30 width90 height50 fcorfff backcor008 fotct btns font16" v-if="user.phone && user" |
||||||
<!-- #ifdef H5 --> |
@click="reqmessage">授权获取消息通知</button> --> |
||||||
<button class="mart30 width90 height50 fcorfff backcor008 fotct btns font16" |
<!-- #endif --> |
||||||
@click="getH5userinfo">授权并登录</button> |
<!-- #ifdef H5 --> |
||||||
<!-- #endif --> |
<button class="mart30 width90 height50 fcorfff backcor008 fotct btns font16" |
||||||
</view> |
@click="getH5userinfo">授权并登录</button> |
||||||
</template> |
<!-- #endif --> |
||||||
|
</view> |
||||||
<script> |
</template> |
||||||
const app = getApp(); |
|
||||||
import { |
<script> |
||||||
getUserInfo, |
const app = getApp(); |
||||||
loginByPhone |
import { |
||||||
} from "../../Utils/Api.js" |
getUserInfo, |
||||||
export default { |
loginByPhone, |
||||||
data() { |
HandleCode |
||||||
return { |
} from "../../Utils/Api.js" |
||||||
user: '', |
export default { |
||||||
imagewxUrl: app.globalData.imageWxImg, |
data() { |
||||||
imgadres: 'login.png', |
return { |
||||||
imgadres1: 'loginphone.png', |
user: '', |
||||||
} |
imagewxUrl: app.globalData.imageWxImg, |
||||||
}, |
imgadres: 'login.png', |
||||||
onLoad() { |
imgadres1: 'loginphone.png', |
||||||
this.user = app.globalData.userInfo; |
} |
||||||
}, |
}, |
||||||
methods: { |
onLoad() { |
||||||
getuserinfo() { |
// #ifdef MP |
||||||
let that = this; |
if (!app.globalData.openId) { |
||||||
uni.getUserProfile({ |
uni.login({ |
||||||
desc: '登录中...', |
provider: 'weixin', |
||||||
success: function(res) { |
success: function(loginRes) { |
||||||
let params = { |
app.globalData.code = loginRes.code; |
||||||
openId: app.globalData.openId, |
// 请求接口 |
||||||
iv: res.iv, |
let params = { |
||||||
encryptedData: res.encryptedData |
code: app.globalData.code |
||||||
} |
} |
||||||
getUserInfo(params).then(res => { |
HandleCode(params).then(res => { |
||||||
if (res.return_code == '000000') { |
if (res.return_code == '000000') { |
||||||
app.globalData.userInfo = res.return_data |
app.globalData.openId = res.return_data.openId; |
||||||
.object |
} |
||||||
.highUser; |
}) |
||||||
that.user = res.return_data.object.highUser; |
}, |
||||||
app.globalData.token = res.return_data.uniqueCode; |
}) |
||||||
that.isShowAuth = false |
} |
||||||
uni.setStorage({ |
// #endif |
||||||
key: "user", |
this.user = app.globalData.userInfo; |
||||||
data: res.return_data |
}, |
||||||
.object |
methods: { |
||||||
.highUser |
getuserinfo() { |
||||||
}) |
let that = this; |
||||||
uni.setStorage({ |
uni.getUserProfile({ |
||||||
key: "token", |
desc: '登录中...', |
||||||
data: res.return_data.uniqueCode |
success: function(res) { |
||||||
}) |
let params = { |
||||||
if (res.return_data.object.highUser.infoCompleteStatus == 0) { |
openId: app.globalData.openId, |
||||||
uni.navigateBack({ |
iv: res.iv, |
||||||
}) |
encryptedData: res.encryptedData |
||||||
} |
} |
||||||
} else { |
getUserInfo(params).then(res => { |
||||||
uni.showToast({ |
if (res.return_code == '000000') { |
||||||
title: res.return_msg |
app.globalData.userInfo = res.return_data |
||||||
}) |
.object |
||||||
} |
.highUser; |
||||||
}); |
that.user = res.return_data.object.highUser; |
||||||
}, |
app.globalData.token = res.return_data.uniqueCode; |
||||||
fail: res => { |
that.isShowAuth = false |
||||||
uni.showToast({ |
uni.setStorage({ |
||||||
title: "微信登录授权失败", |
key: "user", |
||||||
icon: "none" |
data: res.return_data |
||||||
}); |
.object |
||||||
} |
.highUser |
||||||
}) |
}) |
||||||
that.isShowAuth = false |
uni.setStorage({ |
||||||
}, |
key: "token", |
||||||
// 微信获取手机号 |
data: res.return_data.uniqueCode |
||||||
loginByPhone(PhoneNumber) { |
}) |
||||||
if(PhoneNumber.detail.iv == undefined){ |
if (res.return_data.object.highUser.infoCompleteStatus == 0) { |
||||||
uni.showToast({ |
uni.navigateBack({}) |
||||||
title: "用户取消授权", |
} |
||||||
icon: "none" |
} else { |
||||||
}); |
uni.showToast({ |
||||||
return; |
title: res.return_msg, |
||||||
} |
duration: 2000, |
||||||
let params = { |
icon: 'none' |
||||||
openId: app.globalData.openId, |
}) |
||||||
iv: PhoneNumber.detail.iv, |
} |
||||||
encryptedData: PhoneNumber.detail.encryptedData |
}); |
||||||
} |
}, |
||||||
loginByPhone(params).then(res => { |
fail: res => { |
||||||
if (res.return_code == '000000') { |
uni.showToast({ |
||||||
uni.showToast({ |
title: "微信登录授权失败", |
||||||
title: '手机号授权成功', |
icon: "none" |
||||||
icon: 'none', |
}); |
||||||
duration: 2000 |
} |
||||||
}) |
}) |
||||||
this.user = res.return_data.object.highUser; |
that.isShowAuth = false |
||||||
app.globalData.token = res.return_data.uniqueCode; |
}, |
||||||
app.globalData.userInfo = res.return_data |
// 微信获取手机号 |
||||||
.object |
loginByPhone(PhoneNumber) { |
||||||
.highUser; |
if (PhoneNumber.detail.iv == undefined) { |
||||||
uni.setStorage({ |
uni.showToast({ |
||||||
key: "user", |
title: "用户取消授权", |
||||||
data: res.return_data |
icon: "none" |
||||||
.object |
}); |
||||||
.highUser |
return; |
||||||
}) |
} |
||||||
uni.setStorage({ |
let params = { |
||||||
key: "token", |
openId: app.globalData.openId, |
||||||
data: res.return_data.uniqueCode |
iv: PhoneNumber.detail.iv, |
||||||
}) |
encryptedData: PhoneNumber.detail.encryptedData |
||||||
if(res.return_data.object.highUser.infoCompleteStatus == 0){ |
} |
||||||
uni.navigateBack({ |
loginByPhone(params).then(res => { |
||||||
}) |
if (res.return_code == '000000') { |
||||||
} |
uni.showToast({ |
||||||
} |
title: '手机号授权成功', |
||||||
}); |
icon: 'none', |
||||||
}, |
duration: 2000 |
||||||
getH5userinfo() { |
}) |
||||||
uni.navigateTo({ |
this.user = res.return_data.object.highUser; |
||||||
url: '/pages/login/register' |
app.globalData.token = res.return_data.uniqueCode; |
||||||
}) |
app.globalData.userInfo = res.return_data |
||||||
}, |
.object |
||||||
} |
.highUser; |
||||||
} |
uni.setStorage({ |
||||||
</script> |
key: "user", |
||||||
|
data: res.return_data |
||||||
<style lang="scss"> |
.object |
||||||
.btns { |
.highUser |
||||||
border-radius: 6px; |
}) |
||||||
} |
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> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue