You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
573 lines
14 KiB
573 lines
14 KiB
<template>
|
|
<view class="user-stored-list">
|
|
<!-- #ifdef H5 -->
|
|
<view @tap="$util.goUrl({url:`/pages/service`,openType:`reLaunch`})" class="abs"
|
|
:class="[{'back-user-ios none': configInfo.isIos},{'back-user-android none': !configInfo.isIos}]"
|
|
style="z-index: 1;" v-if="options.pid">
|
|
<view class="iconshouye iconfont"></view>
|
|
<view class="back-user_text">回到首页</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<view class="stored-bg c-base abs" :style="{background:primaryColor}">
|
|
</view>
|
|
<view class="space-lg"></view>
|
|
<view class="record-info fill-base ml-md mr-md radius-32 rel">
|
|
<view class="flex-center flex-column pd-lg">
|
|
<view class="money">{{mineInfo.balance || 0}}</view>
|
|
<view class="f-caption c-caption mt-sm mb-sm">当前余额(元)</view>
|
|
</view>
|
|
<view class="record-list flex-x-center pb-lg f-paragraph c-title">
|
|
<view @tap.stop="$util.goUrl({url:`/user/pages/stored/commission`})" class="list-item flex-center">佣金流水
|
|
</view>
|
|
<view @tap.stop="$util.goUrl({url:`/user/pages/stored/record`})" class="list-item flex-center">
|
|
充值记录</view>
|
|
<view @tap.stop="$util.goUrl({url:`/user/pages/stored/consume`})" class="list-item flex-center">
|
|
消费明细</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fill-base mt-md ml-md mr-md pd-lg radius-24">
|
|
<view class="store-list flex-warp">
|
|
<view @tap.stop="toChangeItem('chooseInd',index)" class="list-item mb-md pd-lg fill-base radius-16"
|
|
:class="[{'mr-md':index%2==0}]" :style="{background:index==chooseInd?primaryColor:'#F7F8FA'}"
|
|
v-for="(item,index) in list.data" :key="index">
|
|
<view class="ellipsis" :class="[{'c-title':index!=chooseInd},{'c-base':index==chooseInd}]"
|
|
style="font-size: 50rpx;">
|
|
¥{{item.price}}</view>
|
|
<view class="f-caption ellipsis"
|
|
:style="{color:index==chooseInd?'rgba(255,255,255,0.5)':'#8D9092'}">
|
|
{{item.title}}
|
|
</view>
|
|
<view @tap.stop="toShare(index)" class="f-caption mt-sm"
|
|
:style="{color:index==chooseInd?'#FAFF5B':primaryColor}" v-if="mineInfo.coach_status === 2">邀请充值
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view @tap.stop="options.coach_id?'':$util.goUrl({url:`/user/pages/stored/choose-technician`})"
|
|
class="flex-between mt-md mb-md">
|
|
<view class="f-title text-bold">选择为{{$t('action.attendantName')}}充值</view>
|
|
<view class="flex-y-center f-title">
|
|
<view class="max-200 ellipsis" :style="{color:!coach_info.id ? '#4A4A4A':''}">
|
|
{{coach_info.id ? coach_info.coach_name : '去选择'}}
|
|
</view>
|
|
<i class="iconfont icon-right" v-if="!options.coach_id"></i>
|
|
</view>
|
|
</view>
|
|
<view @tap.stop="toChangeItem('payInd',index)" class="flex-between mt-lg" v-for="(item,index) in payList"
|
|
:key="index">
|
|
<view class="pay-item flex-y-center">
|
|
<view class="item-icon flex-center mr-md" :class="[{'wechat':item.id==1},{'alipay':item.id==3}]">
|
|
<i class="iconfont icon-font-color" :class="[item.icon]"></i>
|
|
</view>
|
|
<view class="flex-y-baseline item-title">{{item.title}}
|
|
</view>
|
|
</view>
|
|
<i class="pay-icon iconfont c-caption"
|
|
:class="[{'icon-xuanze':payInd != index},{'icon-radio-fill':payInd == index}]"
|
|
:style="{color:payInd==index?primaryColor:'#BEC3CE'}"></i>
|
|
</view>
|
|
<view class="mt-md pt-lg f-caption c-caption">
|
|
<view>1.充值的本金和赠送金额均不可提现、转移、转赠</view>
|
|
<view class="mt-sm">2.使用范围：本平台所有项目皆可购买，以及交通费支付</view>
|
|
</view>
|
|
</view>
|
|
<view class="space-max-footer"></view>
|
|
<fixed position="bottom" v-if="chooseInd!=-1">
|
|
<view class="pd-lg fill-base">
|
|
<view class="flex-between">
|
|
<view class="flex-y-center f-paragraph c-caption">充值金额：<view class="c-warning">
|
|
{{list.data[chooseInd].price}}元
|
|
</view>
|
|
</view>
|
|
<view @tap.stop="toPay" class="pay-btn flex-center f-title c-base radius"
|
|
:style="{background:primaryColor}">充值</view>
|
|
</view>
|
|
<view class="space-safe"></view>
|
|
</view>
|
|
</fixed>
|
|
|
|
<uni-popup ref="show_share_item" type="bottom" zIndex="1000">
|
|
<view class="popup-share pd-lg f-desc c-desc fill-base">
|
|
<view class="flex-center">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<button open-type="share" class="clear-btn list-item flex-center flex-column">
|
|
<image mode="aspectFill" class="item-image"
|
|
src="https://lbqny.migugu.com/admin/anmo/coupon/wechat.png"></image>
|
|
<view style="font-size: 26rpx;color:#666;">分享给好友</view>
|
|
</button>
|
|
<view @tap.stop="toPoster" class="list-item flex-center flex-column">
|
|
<image mode="aspectFill" class="item-image"
|
|
src="https://lbqny.migugu.com/admin/anmo/coupon/picture.png"></image>
|
|
<view>生成海报码</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<view @tap.stop="toAppShare" class="list-item flex-center flex-column">
|
|
<image mode="aspectFill" class="item-image"
|
|
src="https://lbqny.migugu.com/admin/anmo/coupon/wechat.png"></image>
|
|
<view style="font-size: 26rpx;color:#666;">分享给好友</view>
|
|
</view>
|
|
<view @tap.stop="toPoster" class="list-item flex-center flex-column">
|
|
<image mode="aspectFill" class="item-image"
|
|
src="https://lbqny.migugu.com/admin/anmo/coupon/picture.png"></image>
|
|
<view>生成海报码</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view @tap.stop="toAppShare(1)" class="list-item flex-center flex-column">
|
|
<image mode="aspectFill" class="item-image"
|
|
src="https://lbqny.migugu.com/admin/anmo/coupon/wechat.png"></image>
|
|
<view style="font-size: 26rpx;color:#666;">分享给好友</view>
|
|
</view>
|
|
<view @tap.stop="toAppShare(2)" class="list-item flex-center flex-column">
|
|
<image mode="aspectFill" class="item-image"
|
|
src="https://lbqny.migugu.com/admin/anmo/coupon/wechat-moments.png"></image>
|
|
<view>分享到朋友圈</view>
|
|
</view>
|
|
<view @tap.stop="toPoster" class="list-item flex-center flex-column">
|
|
<image mode="aspectFill" class="item-image"
|
|
src="https://lbqny.migugu.com/admin/anmo/coupon/picture.png"></image>
|
|
<view>生成海报码</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="space-footer"></view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapActions,
|
|
mapMutations
|
|
} from "vuex"
|
|
import siteInfo from '@/siteinfo.js';
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
options: {},
|
|
color: '#ffffff',
|
|
payList: [
|
|
// #ifdef MP-WEIXIN
|
|
{
|
|
id: 1,
|
|
icon: 'icon-weixin',
|
|
title: '微信支付',
|
|
|
|
},
|
|
// #endif
|
|
],
|
|
payInd: 0,
|
|
chooseInd: 0,
|
|
qr_code: '',
|
|
imageUrl: 'https://lbqny.migugu.com/admin/anmo/mine/balance-wechat-share.png',
|
|
coach_info: {},
|
|
param: {
|
|
page: 1,
|
|
limit: 10
|
|
},
|
|
list: {
|
|
data: []
|
|
},
|
|
loading: true,
|
|
lockTap: false,
|
|
shareInd: 0
|
|
}
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
configInfo: state => state.config.configInfo,
|
|
commonOptions: state => state.user.commonOptions,
|
|
userInfo: state => state.user.userInfo,
|
|
mineInfo: state => state.user.mineInfo,
|
|
isGzhLogin: state => state.user.isGzhLogin,
|
|
}),
|
|
async onLoad(options) {
|
|
this.$util.showLoading()
|
|
options = await this.updateCommonOptions(options)
|
|
this.options = options
|
|
// #ifdef MP-WEIXIN
|
|
uni.hideShareMenu()
|
|
// #endif
|
|
await this.initIndex()
|
|
},
|
|
onPullDownRefresh() {
|
|
// #ifndef APP-PLUS
|
|
uni.showNavigationBarLoading()
|
|
// #endif
|
|
this.initRefresh();
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
onReachBottom() {
|
|
if (this.list.current_page >= this.list.last_page || this.loading) return;
|
|
this.param.page = this.param.page + 1;
|
|
this.loading = true;
|
|
this.getList();
|
|
},
|
|
onShareAppMessage(e) {
|
|
if (e.from === 'button') {
|
|
let {
|
|
imageUrl
|
|
} = this
|
|
let {
|
|
id,
|
|
title,
|
|
} = this.list.data[0]
|
|
let {
|
|
id: pid = 0
|
|
} = this.userInfo
|
|
let {
|
|
coach_id
|
|
} = this.mineInfo
|
|
let path = `/user/pages/stored/list?id=${id}&pid=${pid}&coach_id=${coach_id}`
|
|
this.$util.log(path)
|
|
this.$refs.show_share_item.close()
|
|
return {
|
|
title,
|
|
imageUrl,
|
|
path,
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'updateCommonOptions']),
|
|
...mapMutations(['updateOrderItem']),
|
|
async initIndex(refresh = false) {
|
|
let {
|
|
isGzhLogin
|
|
} = this
|
|
let {
|
|
id: uid = 0
|
|
} = this.userInfo
|
|
if (!uid) {
|
|
// #ifdef H5
|
|
if (isGzhLogin) {
|
|
setTimeout(() => {
|
|
this.getUserInfo()
|
|
}, 1000)
|
|
} else {
|
|
this.getUserInfo()
|
|
}
|
|
// #endif
|
|
// #ifndef H5
|
|
await this.getUserInfo()
|
|
// #endif
|
|
}
|
|
await Promise.all([this.getConfigInfo(), this.getMineInfo(), this.getList()])
|
|
// #ifdef H5
|
|
if (!refresh && this.$jweixin.isWechat()) {
|
|
await this.$jweixin.initJssdk();
|
|
setTimeout(() => {
|
|
this.toAppShare()
|
|
}, 1200)
|
|
}
|
|
// #endif
|
|
|
|
let {
|
|
alipay_status = 0
|
|
} = this.configInfo
|
|
// if (alipay_status && this.payList.length == 1) {
|
|
if (alipay_status) {
|
|
// #ifndef MP-WEIXIN
|
|
this.payList.push({
|
|
id: 3,
|
|
icon: 'icon-alipay-fill',
|
|
title: '支付宝支付'
|
|
})
|
|
// #endif
|
|
}
|
|
this.$util.setNavigationBarColor({
|
|
bg: this.primaryColor
|
|
})
|
|
},
|
|
initRefresh() {
|
|
this.param.page = 1
|
|
this.initIndex(true)
|
|
},
|
|
async getList() {
|
|
let {
|
|
list: oldList,
|
|
param,
|
|
} = this
|
|
let {
|
|
coach_id = 0
|
|
} = this.commonOptions
|
|
param.coach_id = coach_id
|
|
let newList = await this.$api.mine.cardList(param);
|
|
if (coach_id) {
|
|
let {
|
|
coach_name = ''
|
|
} = newList
|
|
this.coach_info = {
|
|
id: coach_id,
|
|
coach_name
|
|
}
|
|
}
|
|
if (this.param.page == 1) {
|
|
this.list = newList
|
|
} else {
|
|
newList.data = oldList.data.concat(newList.data)
|
|
this.list = newList
|
|
}
|
|
this.loading = false
|
|
this.$util.hideAll()
|
|
if (this.list.data.length == 0) {
|
|
this.chooseInd = -1
|
|
}
|
|
},
|
|
toChangeItem(key, val) {
|
|
this[key] = val
|
|
this.lockTap = false
|
|
},
|
|
// 去支付
|
|
async toPay() {
|
|
let {
|
|
chooseInd,
|
|
payInd
|
|
} = this
|
|
let {
|
|
id: card_id,
|
|
true_price
|
|
} = this.list.data[chooseInd]
|
|
let {
|
|
id: coach_id = 0
|
|
} = this.coach_info
|
|
let {
|
|
id: pay_model
|
|
} = this.payList[payInd]
|
|
let param = {
|
|
card_id,
|
|
coach_id,
|
|
pay_model
|
|
}
|
|
|
|
// #ifdef H5
|
|
if (pay_model == 3) {
|
|
this.updateOrderItem({
|
|
key: 'alipayOrderParams',
|
|
val: {
|
|
order_id: '',
|
|
card_id,
|
|
coach_id,
|
|
orderInfo: ''
|
|
}
|
|
})
|
|
this.$util.goUrl({
|
|
url: `/user/pages/alipay-result`
|
|
})
|
|
setTimeout(() => {
|
|
this.getMineInfo()
|
|
this.$util.back()
|
|
}, 3000)
|
|
return
|
|
}
|
|
|
|
// #endif
|
|
|
|
if (this.lockTap) return;
|
|
this.lockTap = true;
|
|
this.$util.showLoading()
|
|
try {
|
|
let {
|
|
pay_list
|
|
} = await this.$api.mine.payBalanceOrder(param)
|
|
this.$util.hideAll()
|
|
if (pay_list) {
|
|
if (pay_model == 3) {
|
|
pay_list = {
|
|
orderInfo: pay_list,
|
|
provider: 'alipay'
|
|
}
|
|
}
|
|
try {
|
|
await this.$util.pay(pay_list)
|
|
this.$util.showToast({
|
|
title: `支付成功`
|
|
})
|
|
await this.getMineInfo()
|
|
setTimeout(() => {
|
|
this.lockTap = false;
|
|
this.$util.back()
|
|
}, 1000)
|
|
} catch (e) {
|
|
this.lockTap = false;
|
|
return;
|
|
}
|
|
}
|
|
} catch (e) {
|
|
this.$util.showToast({
|
|
title: `支付失败`
|
|
})
|
|
setTimeout(() => {
|
|
this.lockTap = false
|
|
this.$util.hideAll()
|
|
}, 1000)
|
|
}
|
|
},
|
|
async toShare(index) {
|
|
this.shareInd = index
|
|
if (!this.qr_code) {
|
|
this.$util.showLoading()
|
|
let qr_code = await this.$api.mine.coachBalanceQr()
|
|
this.$util.hideAll()
|
|
this.qr_code = qr_code
|
|
}
|
|
// #ifndef H5
|
|
this.$refs.show_share_item.open()
|
|
// #endif
|
|
// #ifdef H5
|
|
this.$util.goUrl({
|
|
url: `/user/pages/stored/poster`
|
|
})
|
|
// #endif
|
|
},
|
|
toPoster() {
|
|
this.$refs.show_share_item.close()
|
|
this.$util.goUrl({
|
|
url: `/user/pages/stored/poster`
|
|
})
|
|
},
|
|
toAppShare(type = 1) {
|
|
let {
|
|
shareInd = 0,
|
|
imageUrl
|
|
} = this
|
|
|
|
let {
|
|
id: pid = 0
|
|
} = this.userInfo
|
|
let {
|
|
coach_id = 0
|
|
} = this.mineInfo
|
|
|
|
let {
|
|
id,
|
|
title,
|
|
} = this.list.data[shareInd]
|
|
let summary = '邀请您充值有优惠～'
|
|
|
|
let {
|
|
siteroot
|
|
} = siteInfo
|
|
let url = siteroot.split('/index.php')[0]
|
|
let href = `${url}/h5/#/user/pages/stored/list?id=${id}&coach_id=${coach_id}&pid=${pid}`
|
|
|
|
// #ifdef H5
|
|
this.$jweixin.wxReady(() => {
|
|
this.$jweixin.showOptionMenu()
|
|
this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
|
|
this.$jweixin.shareTimelineMessage(title, href, imageUrl)
|
|
})
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
this.$refs.show_share_item.close()
|
|
let scene = type == 1 ? 'WXSceneSession' : 'WXSceneTimeline'
|
|
uni.share({
|
|
provider: "weixin",
|
|
scene,
|
|
type: 0,
|
|
href,
|
|
title,
|
|
summary,
|
|
imageUrl,
|
|
success: function(res) {
|
|
console.log("success:" + JSON.stringify(res));
|
|
},
|
|
fail: function(err) {
|
|
console.log("fail:" + JSON.stringify(err));
|
|
}
|
|
});
|
|
// #endif
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
.user-stored-list {
|
|
|
|
.stored-bg {
|
|
width: 100%;
|
|
height: 163rpx;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
top: 0;
|
|
}
|
|
|
|
.record-info {
|
|
.money {
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
.record-list {
|
|
.list-item {
|
|
width: 33.33%;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.store-list {
|
|
.list-item {
|
|
width: 305rpx;
|
|
}
|
|
}
|
|
|
|
.pay-item {
|
|
.item-icon {
|
|
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 35rpx;
|
|
|
|
.iconfont {
|
|
font-size: 44rpx;
|
|
}
|
|
}
|
|
|
|
.item-icon.wechat {
|
|
background: #E7F9EE;
|
|
|
|
.iconfont {
|
|
background-image: linear-gradient(180deg, #90EE90 0%, #32CD32 100%, #19c865 100%);
|
|
}
|
|
}
|
|
|
|
.item-icon.alipay {
|
|
background: #E9F5FE;
|
|
|
|
.iconfont {
|
|
background-image: linear-gradient(180deg, #46BCFF 0%, #2587FF 100%, #1976FF 100%);
|
|
}
|
|
}
|
|
|
|
.item-title {
|
|
color: #2E3541;
|
|
}
|
|
|
|
}
|
|
|
|
.pay-btn {
|
|
width: 283rpx;
|
|
height: 90rpx;
|
|
}
|
|
|
|
.popup-share {
|
|
.list-item {
|
|
width: 50%;
|
|
|
|
.item-image {
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|
|
|