|
|
@@ -0,0 +1,541 @@
|
|
|
+<template>
|
|
|
+ <view :style="colorStyle">
|
|
|
+ <!-- #ifdef MP -->
|
|
|
+ <view class="accountTitle">
|
|
|
+ <view :style="{height:getHeight.barTop+'px'}"></view>
|
|
|
+ <view class="sysTitle acea-row row-center-wrapper" :style="{height:getHeight.barHeight+'px'}">
|
|
|
+ <view>账户充值</view>
|
|
|
+ <text class="iconfont icon-ic_leftarrow" @click="goarrow"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view :style="{height:(getHeight.barTop+getHeight.barHeight)+'px'}"></view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <form @submit="submitSub">
|
|
|
+ <view class="paymentCon">
|
|
|
+ <view class="payment-top">
|
|
|
+ <span class="name">我的红积分</span>
|
|
|
+ <view class="money">{{ userinfo.red_integral || 0 }}</view>
|
|
|
+ <view class="pictrue">
|
|
|
+ <image src="../static/chongzhi.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="payment">
|
|
|
+ <view class="tip">
|
|
|
+ <view class="title">转到佣金</view>
|
|
|
+ <view class='input acea-row row-middle'><text>￥</text><input @input='inputNum'
|
|
|
+ :maxlength="moneyMaxLeng" placeholder="请输入转到佣金金额" type='digit'
|
|
|
+ placeholder-class='placeholder' v-model="number" name="number"></input></view>
|
|
|
+ </view>
|
|
|
+ <button class='but bg-color' formType="submit">立即转佣金</button>
|
|
|
+ </view>
|
|
|
+ </form>
|
|
|
+ <!-- 确认框 -->
|
|
|
+ <tuiModal :show="showModal" title="温馨提示" content="确认是否转到佣金？" :maskClosable="false" @click="handleClick">
|
|
|
+ </tuiModal>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getUserInfo,
|
|
|
+ setRedIntegralList,
|
|
|
+ getRechargeApi,
|
|
|
+ memberCardCreate
|
|
|
+ } from '@/api/user.js';
|
|
|
+ import tuiModal from "@/components/tui-modal/index.vue"
|
|
|
+ import {
|
|
|
+ toLogin
|
|
|
+ } from '@/libs/login.js';
|
|
|
+ import {
|
|
|
+ orderOfflinePayType
|
|
|
+ } from '@/api/order.js';
|
|
|
+ import {
|
|
|
+ mapGetters
|
|
|
+ } from "vuex";
|
|
|
+ import colors from "@/mixins/color";
|
|
|
+ import {
|
|
|
+ openPaySubscribe
|
|
|
+ } from '@/utils/SubscribeMessage.js';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ tuiModal
|
|
|
+ },
|
|
|
+ mixins: [colors],
|
|
|
+ data() {
|
|
|
+ let that = this;
|
|
|
+ return {
|
|
|
+ // #ifdef MP
|
|
|
+ getHeight: this.$util.getWXStatusHeight(),
|
|
|
+ // #endif
|
|
|
+ now_money: 0,
|
|
|
+ navRecharge: ['账户充值', '佣金转入'],
|
|
|
+ active: 0,
|
|
|
+ number: '',
|
|
|
+ userinfo: {},
|
|
|
+ placeholder: "0.00",
|
|
|
+ from: '',
|
|
|
+ isAuto: false, //没有授权的不会自动授权
|
|
|
+ isShowAuth: false, //是否隐藏授权
|
|
|
+ picList: [],
|
|
|
+ activePic: 0,
|
|
|
+ money: "",
|
|
|
+ numberPic: '',
|
|
|
+ rechar_id: 0,
|
|
|
+ password: '',
|
|
|
+ goodsList: [],
|
|
|
+ pay_order_id: '',
|
|
|
+ payType: '',
|
|
|
+ totalPrice: '0',
|
|
|
+ formContent: '',
|
|
|
+ // #ifdef H5
|
|
|
+ isWeixin: this.$wechat.isWeixin(),
|
|
|
+ // #endif
|
|
|
+ type: '',
|
|
|
+ rechargeAttention: [],
|
|
|
+ moneyMaxLeng: 8,
|
|
|
+ showModal: false,
|
|
|
+ balanceStatus: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: mapGetters(['isLogin']),
|
|
|
+ watch: {
|
|
|
+ isLogin: {
|
|
|
+ handler: function(newV, oldV) {
|
|
|
+ if (newV) {
|
|
|
+ //#ifndef MP
|
|
|
+ this.getUserInfo();
|
|
|
+ this.getRecharge();
|
|
|
+ //#endif
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ if (this.isLogin) {
|
|
|
+ this.getUserInfo();
|
|
|
+ this.getRecharge();
|
|
|
+ } else {
|
|
|
+ toLogin();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ uni.removeStorageSync('form_type_cart');
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ allChange() {
|
|
|
+ this.number = this.userinfo.commissionCount;
|
|
|
+ },
|
|
|
+ goarrow() {
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ let prevPage = pages[pages.length - 2];
|
|
|
+ if (prevPage) {
|
|
|
+ uni.navigateBack()
|
|
|
+ } else {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ inputNum: function(e) {
|
|
|
+ let val = e.detail.value;
|
|
|
+ let dot = val.indexOf('.');
|
|
|
+ if (dot > -1) {
|
|
|
+ this.moneyMaxLeng = dot + 3;
|
|
|
+ } else {
|
|
|
+ this.moneyMaxLeng = 8
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 选择金额
|
|
|
+ */
|
|
|
+ picCharge(idx, item) {
|
|
|
+ this.activePic = idx;
|
|
|
+ if (item === undefined) {
|
|
|
+ this.rechar_id = 0;
|
|
|
+ this.numberPic = "";
|
|
|
+ } else {
|
|
|
+ this.money = "";
|
|
|
+ this.rechar_id = item.id;
|
|
|
+ this.numberPic = item.price;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 充值额度选择
|
|
|
+ */
|
|
|
+ getRecharge() {
|
|
|
+ getRechargeApi().then(res => {
|
|
|
+ this.picList = res.data.recharge_quota;
|
|
|
+ if (this.picList[0]) {
|
|
|
+ this.rechar_id = this.picList[0].id;
|
|
|
+ this.numberPic = this.picList[0].price;
|
|
|
+ }
|
|
|
+ this.rechargeAttention = res.data.recharge_attention || [];
|
|
|
+ this.balanceStatus = res.data.user_extract_balance_status;
|
|
|
+ }).catch(res => {
|
|
|
+ this.$util.Tips({
|
|
|
+ title: res
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ navRecharges: function(index) {
|
|
|
+ this.active = index;
|
|
|
+ },
|
|
|
+ getUserInfo: function() {
|
|
|
+ let that = this;
|
|
|
+ getUserInfo().then(res => {
|
|
|
+ that.$set(that, 'userinfo', res.data);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClick(e) {
|
|
|
+ let data = {
|
|
|
+ money: this.number,
|
|
|
+ };
|
|
|
+ setRedIntegralList(data).then(res => {
|
|
|
+ this.$util.Tips({
|
|
|
+ title: res.msg
|
|
|
+ }, {
|
|
|
+ url: "/pages/users/user_integral/red"
|
|
|
+ })
|
|
|
+ }).catch(err => {
|
|
|
+ return this.$util.Tips({
|
|
|
+ title: err
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ this.showModal = false;
|
|
|
+ },
|
|
|
+ submitSub: function(e) {
|
|
|
+ let that = this
|
|
|
+ let value = e.detail.value.number;
|
|
|
+ // 转入余额
|
|
|
+ if (parseFloat(value) < 0 || parseFloat(value) == NaN || value == undefined || value == "") {
|
|
|
+ return that.$util.Tips({
|
|
|
+ title: '请输入金额'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.showModal = true;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .bgcolor {
|
|
|
+ background-color: var(--view-theme)
|
|
|
+ }
|
|
|
+
|
|
|
+ .accountTitle {
|
|
|
+ background-color: var(--view-minorColorT);
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 99;
|
|
|
+
|
|
|
+ .sysTitle {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30rpx;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 36rpx;
|
|
|
+ left: 11rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment {
|
|
|
+ position: relative;
|
|
|
+ width: 710rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ margin: -176rpx auto 0 auto;
|
|
|
+ padding-bottom: 64rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment .nav {
|
|
|
+ height: 96rpx;
|
|
|
+ line-height: 96rpx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-radius: 32rpx 32rpx 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment .nav .item {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333;
|
|
|
+ width: 280rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding-right: 40rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &.on1 {
|
|
|
+ padding-right: 62rpx;
|
|
|
+ background-image: url('../static/titleLeft.png');
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ margin-left: 150rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.on2 {
|
|
|
+ padding-left: 62rpx;
|
|
|
+ background-image: url('../static/titleRight.png');
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ margin-left: 192rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.on3 {
|
|
|
+ padding-left: 62rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment .nav .item.on {
|
|
|
+ font-weight: bold;
|
|
|
+ width: 407rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ width: 38rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ border: 2px solid var(--view-theme);
|
|
|
+ border-left: 2px solid transparent !important;
|
|
|
+ border-top: 2px solid transparent !important;
|
|
|
+ border-right: 2px solid transparent !important;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ content: ' ';
|
|
|
+ left: 0;
|
|
|
+ bottom: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment .input {
|
|
|
+ margin: 32rpx auto 0 auto;
|
|
|
+ font-size: 56rpx;
|
|
|
+ color: #333333;
|
|
|
+ background: #F5F5F5;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ height: 114rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment .input text {
|
|
|
+ padding-left: 26rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment .input input {
|
|
|
+ width: 520rpx;
|
|
|
+ height: 94rpx;
|
|
|
+ font-size: 60rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ font-family: 'SemiBold';
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment .input .placeholder {
|
|
|
+ font-weight: 400;
|
|
|
+ color: #DDDDDD;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 94rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment .tip {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #888888;
|
|
|
+ padding: 30rpx 33rpx 0 33rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment .but {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 646rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ margin: 50rpx auto 0 auto;
|
|
|
+ line-height: 88rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .paymentCon {
|
|
|
+ background: linear-gradient(180deg, var(--view-minorColorT) 0%, #f5f5f5 100%);
|
|
|
+ padding-top: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-top {
|
|
|
+ width: 710rpx;
|
|
|
+ height: 396rpx;
|
|
|
+ background: linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%);
|
|
|
+ margin: 0 auto;
|
|
|
+ border-radius: 32rpx 32rpx 0 0;
|
|
|
+ padding: 56rpx 60rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ }
|
|
|
+
|
|
|
+ .money {
|
|
|
+ font-size: 68rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-family: 'SemiBold';
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pictrue {
|
|
|
+ width: 186rpx;
|
|
|
+ height: 186rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 60rpx;
|
|
|
+ top: 66rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .picList {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .pic-box {
|
|
|
+ width: 204rpx;
|
|
|
+ height: 144rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 28rpx 0 26rpx 0;
|
|
|
+ margin: 16rpx 16rpx 0 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:nth-child(3n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ position: absolute;
|
|
|
+ left: -2rpx;
|
|
|
+ top: -18rpx;
|
|
|
+ width: 118rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: linear-gradient(270deg, #FAAD14 0%, #FF7D00 100%);
|
|
|
+ border-radius: 16rpx 0 16rpx 0;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 22rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pic-box-color {
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ color: #333;
|
|
|
+ border: 1px solid #F5F5F5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pic-number {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pic-number-pic {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .money {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pic-box-money {
|
|
|
+ height: 70rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 70rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .placeholders {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pic-box-color-active {
|
|
|
+ background-color: var(--view-minorColorT) !important;
|
|
|
+ color: var(--view-theme) !important;
|
|
|
+ border: 1px solid var(--view-theme);
|
|
|
+
|
|
|
+ .pic-number,
|
|
|
+ .placeholders {
|
|
|
+ color: var(--view-theme) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips-box {
|
|
|
+ margin-top: 48rpx;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips-samll {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .drop {
|
|
|
+ width: 10rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ background-color: var(--view-theme);
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ width: 620rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip-box {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips-title {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+</style>
|
