|
|
@@ -1,525 +1,608 @@
|
|
|
-<template>
|
|
|
- <view class="content">
|
|
|
- <view class="yue">
|
|
|
- <view class="font">当前余额</view>
|
|
|
- <view class="money">￥{{ nowmoney | getMoneyStyle }}</view>
|
|
|
- </view>
|
|
|
- <view class="row-box">
|
|
|
- <view class="title">充值金额</view>
|
|
|
- <view class="row">
|
|
|
- <text class="tit">￥</text>
|
|
|
- <input class="input" type="number" v-model="money" placeholder="请输入充值金额" placeholder-class="placeholder" />
|
|
|
- </view>
|
|
|
- <view class="xian"></view>
|
|
|
- <view class="moneyBtn-box">
|
|
|
- <view class="moneyBtn" v-for="(item, index) in moneyList" :class="{ current: choose == index }" :key="index" @click="changemoney(item, index)">{{ item }}元</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="list" v-if="!weichatBsrowser">
|
|
|
- <radio-group @change="tabRadio">
|
|
|
- <!-- #ifdef APP-PLUS -->
|
|
|
- <!-- <label>
|
|
|
- <view class="box">
|
|
|
- <view class="icon iconfont iconzhifubao"></view>
|
|
|
- <view class="title-box">
|
|
|
- <view class="title"><text>支付宝充值</text></view>
|
|
|
- </view>
|
|
|
- <view class="right"><radio value="alipay" color="#5dbc7c" :checked="type == 'alipay'" /></view>
|
|
|
- </view>
|
|
|
- </label> -->
|
|
|
- <!-- #endif -->
|
|
|
- <label>
|
|
|
- <view class="box">
|
|
|
- <view class="icon iconfont iconweixin1"></view>
|
|
|
- <view class="title-box">
|
|
|
- <view class="title"><text>微信充值</text></view>
|
|
|
- </view>
|
|
|
- <view class="right"><radio value="weixin" color=" #5dbc7c" :checked="type == 'weixin'" /></view>
|
|
|
- </view>
|
|
|
- </label>
|
|
|
- </radio-group>
|
|
|
- </view>
|
|
|
- <button class="add-btn up" :class="{ 'active-bg': payLoding }" @click="!payLoding ? confirm() : ''">立即充值</button>
|
|
|
- <button class="card" @click="go()">充值卡兑换</button>
|
|
|
- <uni-popup ref="popup" type="center">
|
|
|
- <view class="popup-box">
|
|
|
- <view class="img">
|
|
|
- <view class="img-font">兑换充值卡</view>
|
|
|
- <view class="img-bg"><image src="../../static/img/img009.png" mode=""></image></view>
|
|
|
- </view>
|
|
|
- <view class="mian">
|
|
|
- <view class="main-item">
|
|
|
- <view class="font">卡号</view>
|
|
|
- <input type="text" v-model="card" class="input" placeholder="请输入卡号" placeholder-class="input-font"/>
|
|
|
- </view>
|
|
|
- <view class="main-item" style="margin-top: 40rpx;">
|
|
|
- <view class="font">密码</view>
|
|
|
- <input type="password" v-model="pwd" placeholder="请输入密码" class="input" placeholder-class="input-font"/>
|
|
|
- </view>
|
|
|
- <view class="comfirm-box">
|
|
|
- <view class="cancel" @click="cancel">取消</view>
|
|
|
- <view class="comfirm" @click="comfirm()">确认兑换</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
|
-import { verification } from '@/api/merchant.js';
|
|
|
-import { getMoneyStyle } from '@/utils/rocessor.js';
|
|
|
-import { rechargeWechat, getRechargeList } from '@/api/wallet.js';
|
|
|
-import { mapState, mapMutations} from 'vuex';
|
|
|
-import { getUserInfo } from '@/api/login.js';
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- uniPopup
|
|
|
- },
|
|
|
- filters: {
|
|
|
- getMoneyStyle
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- moneyList: [],
|
|
|
- choose: -1,
|
|
|
- // #ifdef APP-PLUS
|
|
|
- type: 'weixinapp',
|
|
|
- // #endif
|
|
|
- // #ifdef H5
|
|
|
- type: 'weixin',
|
|
|
- // #endif
|
|
|
- money: '', //充值金额
|
|
|
- payLoding: false, //是否加载中
|
|
|
- // #ifdef H5
|
|
|
- weichatBsrowser: false,
|
|
|
- // #endif
|
|
|
- // #ifdef APP-PLUS
|
|
|
- weichatBsrowser: true,
|
|
|
- // #endif
|
|
|
- nowmoney:0,
|
|
|
- card:'',
|
|
|
- pwd:''
|
|
|
-
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- // #ifdef H5
|
|
|
- this.weichatBsrowser = uni.getStorageSync('weichatBrowser');
|
|
|
- // #endif
|
|
|
- this.getRechargeList()
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
|
|
|
- // #ifdef H5
|
|
|
- ...mapState(['weichatObj'])
|
|
|
- // #endif
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getRechargeList() {
|
|
|
- getRechargeList().then(({data}) => {
|
|
|
- console.log(data,'getRechargeList')
|
|
|
- data.recharge_quota.forEach(item => {
|
|
|
- this.moneyList.push(item.price*1)
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="yue">
|
|
|
+ <view class="font">当前余额</view>
|
|
|
+ <view class="money">￥{{ userInfo.now_money | getMoneyStyle }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row-box">
|
|
|
+ <view class="title">充值金额</view>
|
|
|
+ <view class="row">
|
|
|
+ <text class="tit">￥</text>
|
|
|
+ <input class="input" type="number" v-model="money" placeholder="请输入充值金额"
|
|
|
+ placeholder-class="placeholder" />
|
|
|
+ </view>
|
|
|
+ <view class="xian"></view>
|
|
|
+ <view class="moneyBtn-box">
|
|
|
+ <view class="moneyBtn" v-for="(item, index) in moneyList" :class="{ current: choose == index }"
|
|
|
+ :key="index" @click="changemoney(item, index)">{{ item }}元</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="list" v-if="!weichatBsrowser">
|
|
|
+ <radio-group @change="tabRadio">
|
|
|
+ <!-- #ifdef APP-PLUS -->
|
|
|
+ <!-- <label>
|
|
|
+ <view class="box">
|
|
|
+ <view class="icon iconfont iconzhifubao"></view>
|
|
|
+ <view class="title-box">
|
|
|
+ <view class="title"><text>支付宝充值</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="right"><radio value="alipay" color="#5dbc7c" :checked="type == 'alipay'" /></view>
|
|
|
+ </view>
|
|
|
+ </label> -->
|
|
|
+ <!-- #endif -->
|
|
|
+ <label>
|
|
|
+ <view class="box">
|
|
|
+ <view class="icon iconfont iconweixin1"></view>
|
|
|
+ <view class="title-box">
|
|
|
+ <view class="title"><text>微信充值</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <radio value="weixin" color=" #5dbc7c" :checked="type == 'weixin'" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </label>
|
|
|
+ </radio-group>
|
|
|
+ </view>
|
|
|
+ <button class="add-btn up" :class="{ 'active-bg': payLoding }"
|
|
|
+ @click="!payLoding ? confirm() : ''">立即充值</button>
|
|
|
+ <button class="card" @click="go()">充值卡兑换</button>
|
|
|
+ <uni-popup ref="popup" type="center">
|
|
|
+ <view class="popup-box">
|
|
|
+ <view class="img">
|
|
|
+ <view class="img-font">兑换充值卡</view>
|
|
|
+ <view class="img-bg">
|
|
|
+ <image src="../../static/img/img009.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mian">
|
|
|
+ <view class="main-item">
|
|
|
+ <view class="font">卡号</view>
|
|
|
+ <input type="text" v-model="card" class="input" placeholder="请输入卡号"
|
|
|
+ placeholder-class="input-font" />
|
|
|
+ </view>
|
|
|
+ <view class="main-item" style="margin-top: 40rpx;">
|
|
|
+ <view class="font">密码</view>
|
|
|
+ <input type="password" v-model="pwd" placeholder="请输入密码" class="input"
|
|
|
+ placeholder-class="input-font" />
|
|
|
+ </view>
|
|
|
+ <view class="comfirm-box">
|
|
|
+ <view class="cancel" @click="cancel">取消</view>
|
|
|
+ <view class="comfirm" @click="comfirm()">确认兑换</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
|
+ import {
|
|
|
+ verification
|
|
|
+ } from '@/api/merchant.js';
|
|
|
+ import {
|
|
|
+ getMoneyStyle
|
|
|
+ } from '@/utils/rocessor.js';
|
|
|
+ import {
|
|
|
+ rechargeWechat,
|
|
|
+ getRechargeList
|
|
|
+ } from '@/api/wallet.js';
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
+ import {
|
|
|
+ getUserInfo
|
|
|
+ } from '@/api/login.js';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ uniPopup
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ getMoneyStyle
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ moneyList: [],
|
|
|
+ choose: -1,
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ type: 'weixinapp',
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ type: 'weixin',
|
|
|
+ // #endif
|
|
|
+ money: '', //充值金额
|
|
|
+ payLoding: false, //是否加载中
|
|
|
+ // #ifdef H5
|
|
|
+ weichatBsrowser: false,
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ weichatBsrowser: true,
|
|
|
+ // #endif
|
|
|
+ nowmoney: 0,
|
|
|
+ card: '',
|
|
|
+ pwd: ''
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ // #ifdef H5
|
|
|
+ this.weichatBsrowser = uni.getStorageSync('weichatBrowser');
|
|
|
+ // #endif
|
|
|
+ this.getRechargeList()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ // #ifdef H5
|
|
|
+ ...mapState(['weichatObj']),
|
|
|
+ // #endif
|
|
|
+ ...mapState('user', ['userInfo'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
|
|
|
+ getRechargeList() {
|
|
|
+ getRechargeList().then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ console.log(data, 'getRechargeList')
|
|
|
+ data.recharge_quota.forEach(item => {
|
|
|
+ this.moneyList.push(item.price * 1)
|
|
|
+ })
|
|
|
})
|
|
|
- })
|
|
|
- },
|
|
|
- // 跳转
|
|
|
- navTo(url) {
|
|
|
- uni.navigateTo({
|
|
|
- url: url
|
|
|
- });
|
|
|
- },
|
|
|
- // 切换选中对象
|
|
|
- tabRadio(e) {
|
|
|
- this.type = e;
|
|
|
- },
|
|
|
- // 提交
|
|
|
- confirm() {
|
|
|
- let obj = this;
|
|
|
- obj.payLoding = true;
|
|
|
- if(this.money<=0){
|
|
|
- uni.showToast({
|
|
|
- title: '请输入金额',
|
|
|
- duration: 2000,
|
|
|
- icon:'none'
|
|
|
- });
|
|
|
- return
|
|
|
- }
|
|
|
- rechargeWechat({ price: this.money, from: this.type })
|
|
|
- .then(e => {
|
|
|
- console.log(e);
|
|
|
- // #ifdef H5
|
|
|
- let da = e.data.data;
|
|
|
- obj.weichatObj.chooseWXPay({
|
|
|
- timestamp: da.timestamp,
|
|
|
- nonceStr: da.nonceStr,
|
|
|
- package: da.package,
|
|
|
- signType: da.signType,
|
|
|
- paySign: da.paySign,
|
|
|
- success: function(res) {
|
|
|
- uni.showToast({
|
|
|
- title: '充值成功',
|
|
|
- duration: 2000,
|
|
|
- position: 'top'
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- // #endif
|
|
|
- // #ifdef APP-PLUS
|
|
|
- uni.requestPayment({
|
|
|
- provider: 'wxpay',
|
|
|
- orderInfo: e.data.data,
|
|
|
- success: function() {
|
|
|
- uni.showToast({
|
|
|
- title: '充值成功',
|
|
|
- duration: 2000,
|
|
|
- position: 'top'
|
|
|
- });
|
|
|
- },
|
|
|
- fail(e) {
|
|
|
- console.log(e);
|
|
|
- }
|
|
|
- });
|
|
|
- // #endif
|
|
|
- obj.payLoding = false;
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- obj.payLoding = false;
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- },
|
|
|
- go(){
|
|
|
- this.$refs.popup.open()
|
|
|
- },
|
|
|
- cancel() {
|
|
|
- this.$refs.popup.close();
|
|
|
- this.card = '';
|
|
|
- this.pwd = '';
|
|
|
- },
|
|
|
- comfirm() {
|
|
|
- let obj = this
|
|
|
- verification({
|
|
|
- card_number:this.card,
|
|
|
- card_password:this.pwd,
|
|
|
- is_confirm: 1,
|
|
|
- type: 1,
|
|
|
- }).then(e =>{
|
|
|
- console.log(e)
|
|
|
- this.card = '';
|
|
|
- this.pwd = '';
|
|
|
- getUserInfo()
|
|
|
- .then(({ data }) => {
|
|
|
- obj.setUserInfo(data);
|
|
|
+ },
|
|
|
+ // 跳转
|
|
|
+ navTo(url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 切换选中对象
|
|
|
+ tabRadio(e) {
|
|
|
+ this.type = e;
|
|
|
+ },
|
|
|
+ // 提交
|
|
|
+ confirm() {
|
|
|
+ let obj = this;
|
|
|
+ obj.payLoding = true;
|
|
|
+ if (this.money <= 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入金额',
|
|
|
+ duration: 2000,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ rechargeWechat({
|
|
|
+ price: this.money,
|
|
|
+ from: this.type
|
|
|
+ })
|
|
|
+ .then(e => {
|
|
|
+ console.log(e);
|
|
|
+ // #ifdef H5
|
|
|
+ let da = e.data.data;
|
|
|
+ obj.weichatObj.chooseWXPay({
|
|
|
+ timestamp: da.timestamp,
|
|
|
+ nonceStr: da.nonceStr,
|
|
|
+ package: da.package,
|
|
|
+ signType: da.signType,
|
|
|
+ paySign: da.paySign,
|
|
|
+ success: function(res) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '充值成功',
|
|
|
+ duration: 2000,
|
|
|
+ position: 'top'
|
|
|
+ });
|
|
|
+ getUserInfo()
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ obj.setUserInfo(data);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: 'wxpay',
|
|
|
+ orderInfo: e.data.data,
|
|
|
+ success: function() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '充值成功',
|
|
|
+ duration: 2000,
|
|
|
+ position: 'top'
|
|
|
+ });
|
|
|
+ getUserInfo()
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ obj.setUserInfo(data);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ obj.payLoding = false;
|
|
|
})
|
|
|
.catch(e => {
|
|
|
+ obj.payLoding = false;
|
|
|
console.log(e);
|
|
|
- });
|
|
|
- }).catch(e =>{
|
|
|
- console.log(e)
|
|
|
- })
|
|
|
- this.$refs.popup.close();
|
|
|
- },
|
|
|
- //获取订单列表
|
|
|
- loadData(source) {
|
|
|
- console.log(source);
|
|
|
- //这里是将订单挂载到tab列表下
|
|
|
- let index = this.tabCurrentIndex;
|
|
|
- let navItem = this.navList[index];
|
|
|
- let state = navItem.state;
|
|
|
- if (source === 'tabChange' && navItem.loaded === true) {
|
|
|
- //tab切换只有第一次需要加载数据
|
|
|
- return;
|
|
|
- }
|
|
|
- if (navItem.loadingType === 'loading') {
|
|
|
- //防止重复加载
|
|
|
- return;
|
|
|
- }
|
|
|
- navItem.loadingType = 'loading';
|
|
|
- setTimeout(() => {
|
|
|
- let orderList = [];
|
|
|
- orderList.forEach(item => {
|
|
|
- navItem.orderList.push(item);
|
|
|
- });
|
|
|
- //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
|
|
|
- this.$set(navItem, 'loaded', true);
|
|
|
- //判断是否还有数据， 有改为 more， 没有改为noMore
|
|
|
- navItem.loadingType = 'more';
|
|
|
- }, 600);
|
|
|
- },
|
|
|
- changemoney(item, index) {
|
|
|
- this.choose = index;
|
|
|
- this.money = item;
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-page {
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.yue {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 30rpx 48rpx 30rpx 26rpx;
|
|
|
- background: #ffffff;
|
|
|
- .font {
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .money {
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #ff6f0f;
|
|
|
- }
|
|
|
-}
|
|
|
-.add-btn {
|
|
|
- &.modified {
|
|
|
- color: $base-color;
|
|
|
- }
|
|
|
- &.up {
|
|
|
- background-color: $base-color;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 690rpx;
|
|
|
- height: 80rpx;
|
|
|
- margin: 0 auto;
|
|
|
- margin-top: 30rpx;
|
|
|
- font-size: $font-lg;
|
|
|
- border-radius: 10rpx;
|
|
|
- // box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
|
|
-}
|
|
|
-.card {
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid $base-color;
|
|
|
- color: $base-color;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 690rpx;
|
|
|
- height: 80rpx;
|
|
|
- margin: 30rpx auto 0;
|
|
|
- font-size: $font-lg;
|
|
|
- border-radius: 10rpx;
|
|
|
-}
|
|
|
-.row-box {
|
|
|
- margin-top: 30rpx;
|
|
|
- padding: 20rpx 0rpx 20rpx 30rpx;
|
|
|
- background: #fff;
|
|
|
- .title {
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: $font-color-dark;
|
|
|
- }
|
|
|
- .row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- height: 80rpx;
|
|
|
- .tit {
|
|
|
- flex-shrink: 0;
|
|
|
- width: 40rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- color: $font-color-dark;
|
|
|
- }
|
|
|
- .input {
|
|
|
- flex: 1;
|
|
|
- font-size: 30rpx;
|
|
|
- color: $font-color-dark;
|
|
|
- }
|
|
|
- .iconlocation {
|
|
|
- font-size: 36rpx;
|
|
|
- color: $font-color-light;
|
|
|
- }
|
|
|
-
|
|
|
- .buttom {
|
|
|
- color: $font-color;
|
|
|
- font-size: $font-base;
|
|
|
- }
|
|
|
- }
|
|
|
- .xian {
|
|
|
- width: 700rpx;
|
|
|
- height: 1rpx;
|
|
|
- background: #e6e6e6;
|
|
|
- margin-bottom: 16rpx;
|
|
|
- }
|
|
|
- .moneyBtn-box {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
- .moneyBtn {
|
|
|
- margin-right: 30rpx;
|
|
|
- width: 210rpx;
|
|
|
- height: 70rpx;
|
|
|
- background: #f0f0f0;
|
|
|
- border-radius: 4px;
|
|
|
- margin-top: 30rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 70rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.list {
|
|
|
- padding-left: 30rpx;
|
|
|
- margin-top: 30rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- .box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- height: 120rpx;
|
|
|
- border-bottom: 1px solid $border-color-light;
|
|
|
- .icon {
|
|
|
- font-size: 48rpx;
|
|
|
- padding-right: 20rpx;
|
|
|
- }
|
|
|
- .iconweixin1 {
|
|
|
- color: #18bf16;
|
|
|
- }
|
|
|
- .iconzhifubao {
|
|
|
- color: #08aaec;
|
|
|
- }
|
|
|
- .title-box {
|
|
|
- flex-grow: 1;
|
|
|
- text-align: left;
|
|
|
- .title {
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: $font-color-base;
|
|
|
- }
|
|
|
- .node {
|
|
|
- font-size: $font-sm;
|
|
|
- color: $font-color-light;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-/deep/ .uni-radio-input {
|
|
|
- width: 45rpx;
|
|
|
- height: 45rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.active-bg {
|
|
|
- background-color: $color-gray !important;
|
|
|
-}
|
|
|
-.current {
|
|
|
- background: $base-color !important;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-.popup-box {
|
|
|
- width: 650rpx;
|
|
|
- padding-bottom: 30rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 20rpx;
|
|
|
- position: relative;
|
|
|
- .img {
|
|
|
- position: relative;
|
|
|
- top: -56rpx;
|
|
|
- left: 0;
|
|
|
- width: 650rpx;
|
|
|
- height: 132rpx;
|
|
|
- z-index: 100;
|
|
|
- text-align: center;
|
|
|
- line-height: 132rpx;
|
|
|
- .img-bg {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 0;
|
|
|
- margin-left: -250rpx;
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- width: 500rpx;
|
|
|
- height: 132rpx;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .img-font {
|
|
|
- line-height: 120rpx;
|
|
|
- position: relative;
|
|
|
- z-index: 10;
|
|
|
- text-align: center;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #54300f;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .mian {
|
|
|
- margin-top: -10rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- // padding: 32rpx 32rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 0 0 20rpx 20rpx;
|
|
|
- text-align: center;
|
|
|
- padding: 20rpx;
|
|
|
- width: 100%;
|
|
|
- .main-item {
|
|
|
- display: flex;
|
|
|
- width: 580rpx;
|
|
|
- align-items: center;
|
|
|
- padding: 20rpx 40rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- background: #f5f2e5;
|
|
|
- height: 100rpx;
|
|
|
- .font{
|
|
|
- color: #623324;
|
|
|
- font-size: 30rpx;
|
|
|
- }
|
|
|
- .input {
|
|
|
- margin-left: 20rpx;
|
|
|
- text-align: left;
|
|
|
- color: #cdc0b3;
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
- .input-font {
|
|
|
- color: #cdc0b3;
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .comfirm-box {
|
|
|
- margin-top: 80rpx;
|
|
|
- display: flex;
|
|
|
- // margin-bottom: 32rpx;
|
|
|
-
|
|
|
- // justify-content: space-around;
|
|
|
- .cancel {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 260rpx;
|
|
|
- height: 100rpx;
|
|
|
- border: 1px solid #dcc786;
|
|
|
- border-radius: 10px;
|
|
|
-
|
|
|
- font-size: 32rpx;
|
|
|
- color: #605128;
|
|
|
- }
|
|
|
-
|
|
|
- .comfirm {
|
|
|
- margin-left: 60rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 260rpx;
|
|
|
- height: 100rpx;
|
|
|
- background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
|
|
|
- border-radius: 10px;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #605128;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ go() {
|
|
|
+ this.$refs.popup.open()
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.$refs.popup.close();
|
|
|
+ this.card = '';
|
|
|
+ this.pwd = '';
|
|
|
+ },
|
|
|
+ comfirm() {
|
|
|
+ let obj = this
|
|
|
+ verification({
|
|
|
+ card_number: this.card,
|
|
|
+ card_password: this.pwd,
|
|
|
+ is_confirm: 1,
|
|
|
+ type: 1,
|
|
|
+ }).then(e => {
|
|
|
+ console.log(e)
|
|
|
+ this.card = '';
|
|
|
+ this.pwd = '';
|
|
|
+ getUserInfo()
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ obj.setUserInfo(data);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ }).catch(e => {
|
|
|
+ console.log(e)
|
|
|
+ })
|
|
|
+ this.$refs.popup.close();
|
|
|
+ },
|
|
|
+ //获取订单列表
|
|
|
+ loadData(source) {
|
|
|
+ console.log(source);
|
|
|
+ //这里是将订单挂载到tab列表下
|
|
|
+ let index = this.tabCurrentIndex;
|
|
|
+ let navItem = this.navList[index];
|
|
|
+ let state = navItem.state;
|
|
|
+ if (source === 'tabChange' && navItem.loaded === true) {
|
|
|
+ //tab切换只有第一次需要加载数据
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (navItem.loadingType === 'loading') {
|
|
|
+ //防止重复加载
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ navItem.loadingType = 'loading';
|
|
|
+ setTimeout(() => {
|
|
|
+ let orderList = [];
|
|
|
+ orderList.forEach(item => {
|
|
|
+ navItem.orderList.push(item);
|
|
|
+ });
|
|
|
+ //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
|
|
|
+ this.$set(navItem, 'loaded', true);
|
|
|
+ //判断是否还有数据， 有改为 more， 没有改为noMore
|
|
|
+ navItem.loadingType = 'more';
|
|
|
+ }, 600);
|
|
|
+ },
|
|
|
+ changemoney(item, index) {
|
|
|
+ this.choose = index;
|
|
|
+ this.money = item;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yue {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 30rpx 48rpx 30rpx 26rpx;
|
|
|
+ background: #ffffff;
|
|
|
+
|
|
|
+ .font {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .money {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff6f0f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-btn {
|
|
|
+ &.modified {
|
|
|
+ color: $base-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.up {
|
|
|
+ background-color: $base-color;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ font-size: $font-lg;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ // box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid $base-color;
|
|
|
+ color: $base-color;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin: 30rpx auto 0;
|
|
|
+ font-size: $font-lg;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-box {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ padding: 20rpx 0rpx 20rpx 30rpx;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ height: 80rpx;
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 40rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconlocation {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttom {
|
|
|
+ color: $font-color;
|
|
|
+ font-size: $font-base;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .xian {
|
|
|
+ width: 700rpx;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #e6e6e6;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .moneyBtn-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .moneyBtn {
|
|
|
+ margin-right: 30rpx;
|
|
|
+ width: 210rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ padding-left: 30rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 120rpx;
|
|
|
+ border-bottom: 1px solid $border-color-light;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ font-size: 48rpx;
|
|
|
+ padding-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconweixin1 {
|
|
|
+ color: #18bf16;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconzhifubao {
|
|
|
+ color: #08aaec;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-box {
|
|
|
+ flex-grow: 1;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: $font-color-base;
|
|
|
+ }
|
|
|
+
|
|
|
+ .node {
|
|
|
+ font-size: $font-sm;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .uni-radio-input {
|
|
|
+ width: 45rpx;
|
|
|
+ height: 45rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active-bg {
|
|
|
+ background-color: $color-gray !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .current {
|
|
|
+ background: $base-color !important;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-box {
|
|
|
+ width: 650rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ position: relative;
|
|
|
+ top: -56rpx;
|
|
|
+ left: 0;
|
|
|
+ width: 650rpx;
|
|
|
+ height: 132rpx;
|
|
|
+ z-index: 100;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 132rpx;
|
|
|
+
|
|
|
+ .img-bg {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 0;
|
|
|
+ margin-left: -250rpx;
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ width: 500rpx;
|
|
|
+ height: 132rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-font {
|
|
|
+ line-height: 120rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #54300f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mian {
|
|
|
+ margin-top: -10rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ // padding: 32rpx 32rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 0 0 20rpx 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .main-item {
|
|
|
+ display: flex;
|
|
|
+ width: 580rpx;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background: #f5f2e5;
|
|
|
+ height: 100rpx;
|
|
|
+
|
|
|
+ .font {
|
|
|
+ color: #623324;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ text-align: left;
|
|
|
+ color: #cdc0b3;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-font {
|
|
|
+ color: #cdc0b3;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .comfirm-box {
|
|
|
+ margin-top: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ // margin-bottom: 32rpx;
|
|
|
+
|
|
|
+ // justify-content: space-around;
|
|
|
+ .cancel {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 260rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border: 1px solid #dcc786;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #605128;
|
|
|
+ }
|
|
|
+
|
|
|
+ .comfirm {
|
|
|
+ margin-left: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 260rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #605128;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
