|
|
@@ -41,15 +41,42 @@
|
|
|
</radio-group>
|
|
|
</view>
|
|
|
<button class="add-btn up" :class="{ 'active-bg': payLoding }" @click="!payLoding ? confirm() : ''">立即充值</button>
|
|
|
- <button class="card" @click="navTo('/pages/wallet/card')">充值卡兑换</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 } from '@/api/wallet.js';
|
|
|
import { mapState } from 'vuex';
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ uniPopup
|
|
|
+ },
|
|
|
filters: {
|
|
|
getMoneyStyle
|
|
|
},
|
|
|
@@ -71,7 +98,10 @@ export default {
|
|
|
// #ifdef APP-PLUS
|
|
|
weichatBsrowser: true
|
|
|
// #endif
|
|
|
- nowmoney:0
|
|
|
+ nowmoney:0,
|
|
|
+ card:'',
|
|
|
+ pwd:''
|
|
|
+
|
|
|
};
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
@@ -105,7 +135,7 @@ export default {
|
|
|
duration: 2000,
|
|
|
icon:'none'
|
|
|
});
|
|
|
- return
|
|
|
+ return
|
|
|
}
|
|
|
rechargeWechat({ price: this.money, from: this.type })
|
|
|
.then(e => {
|
|
|
@@ -150,6 +180,28 @@ export default {
|
|
|
console.log(e);
|
|
|
});
|
|
|
},
|
|
|
+ go(){
|
|
|
+ this.$refs.popup.open()
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.$refs.popup.close();
|
|
|
+ this.card = '';
|
|
|
+ this.pwd = '';
|
|
|
+ },
|
|
|
+ comfirm() {
|
|
|
+ verification({
|
|
|
+ card_number:this.card,
|
|
|
+ card_password:this.pwd,
|
|
|
+ type: 1,
|
|
|
+ }).then(e =>{
|
|
|
+ console.log(e)
|
|
|
+ this.card = '';
|
|
|
+ this.pwd = '';
|
|
|
+ }).catch(e =>{
|
|
|
+ console.log(e)
|
|
|
+ })
|
|
|
+ this.$refs.popup.close();
|
|
|
+ },
|
|
|
//获取订单列表
|
|
|
loadData(source) {
|
|
|
console.log(source);
|
|
|
@@ -204,7 +256,7 @@ page {
|
|
|
font-size: 30rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
- color: #FF6F0F;
|
|
|
+ color: #ff6f0f;
|
|
|
}
|
|
|
}
|
|
|
.add-btn {
|
|
|
@@ -227,7 +279,7 @@ page {
|
|
|
// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
|
|
}
|
|
|
.card {
|
|
|
- background: #FFFFFF;
|
|
|
+ background: #ffffff;
|
|
|
border: 1px solid $base-color;
|
|
|
color: $base-color;
|
|
|
display: flex;
|
|
|
@@ -338,7 +390,116 @@ page {
|
|
|
background-color: $color-gray !important;
|
|
|
}
|
|
|
.current {
|
|
|
- background: $base-color!important;
|
|
|
+ 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>
|
