<template>
  <view class="">
	<view class="info">
		<view class="bg"></view>
	  <view class="card">
	    <view class="title">店铺保证金信息</view>
		<view class="item">
		  <text>已缴纳保证金</text>
		  <text>{{merchant_Data.margin}}</text>
		</view>
	    <view class="item">
	      <text>缴纳店铺账户</text>
	      <text>{{merchant_Data.mer_name}}</text>
	    </view>
	  </view>
	</view>
    <view class="price">
      <view class="title">缴纳金额</view>
      <view class="tab">
        <view class="item active" style="margin: 0;">{{merchant_Data.recharge_margin}}元</view>
      </view>
      <button class="btn" @click="paydecimal">缴纳</button>
    </view>
<!--    <view class="tip">
      <view class="title">注意事项</view>
      <view class="text">充值后帐户的金额不能提现，可用于商城消费使用佣金导入账户之后不能再次导出、不可提现账户充值出现问题可联系商城客服，也可拨打商城客服热线<text @click="copyPhone('4008888888')">4008888888</text>
      </view>
    </view> -->
  </view>
</template>

<script>
	import {
		merchant,
		paymerchant
	} from '@/api/api.js'
	export default {
		data() {
			return {
				mer_id:0,
				merchant_Data: {},
			}
		},
		onLoad(e) {
			this.mer_id = e.mer_id
			this.decimal()

		},
		methods: {
			//获取保证金信息
			decimal() {
				merchant({
					id: this.mer_id
				}).then((res) => {
					this.merchant_Data = res.data
				});
			},
			//缴纳保证金
			paydecimal() {
				if (this.merchant_Data.is_margin != 1) {
					this.$util.Tips({
						title: '暂时无需缴纳保证金'
					});
				} else {
			
					uni.showModal({
						title: '提示',
						content: '商户' + this.merchant_Data.mer_name + '是否同意缴纳保证金',
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								paymerchant().then((res) => {
									console.log(res.data)
									uni.requestPayment({
										provider: 'wxpay',
										orderInfo: res.data
											.config, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
										success: function(res) {
											console.log('success:' + JSON.stringify(res));
										},
										fail: function(err) {
											console.log('fail:' + JSON.stringify(err));
										}
									});
								}).catch((err) => {
									console.log(err)
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
			
				}
			
			},
		}
	}
</script>

<style>

</style>
<style lang="scss">
  page {
    background-color: #fff;
  }

  .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 250rpx;

    .bg {
      background-color: #FF5C2D;
      height: 170rpx;
      width: 100vw;
      border-radius: 0rpx 0rpx 28rpx 28rpx;
      position: absolute;
      top: 0;
      left: 0;
    }

    .card {
      width: 694rpx;
      min-height: 180rpx;
      background: #FFFFFF;
      margin-top: 38.55rpx;
      box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(50, 116, 249, 0.1);
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      opacity: 1;
      padding: 31.5rpx 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      position: absolute;
      top: 0;

      .title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        padding-bottom: 10rpx;
      }

      .item {
        display: flex;
        justify-content: space-between;
        font-size: 32rpx;
        font-weight: 400;
        color: #333333;
		margin-bottom: 10rpx;
        text:nth-child(1){
          flex-shrink: 0;
          margin-right: 18rpx;
        }
      }
    }
  }

  .price {
    display: flex;
    flex-direction: column;
    padding: 0 28rpx;
    margin-top: 50rpx;

    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      line-height: 39rpx;
      margin-bottom: 42rpx;
    }

    .tab {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      width: 694rpx;

      .item {
        width: 217rpx;
        height: 131rpx;
        margin: 0 auto;
        margin-bottom: 20rpx;
        border-radius: 7rpx 7rpx 7rpx 7rpx;
        border: 2rpx solid #F5F5F5;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        font-weight: 500;
        line-height: 32rpx;
      }

      .active {
        border: 2rpx solid #FF5C2D;
        color: #FF5C2D;
      }
    }

    .input {
      width: 100%;
      height: 112rpx;
      background: #F5F5F5;
      border-radius: 56rpx 56rpx 56rpx 56rpx;
      opacity: 1;
      padding: 0 45.56rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      font-weight: 400;
      color: #333;
      line-height: 35rpx;
    }

    .btn {
      width: 694rpx;
      height: 84rpx;
      margin-top: 73.6rpx;
      background: #FF5C2D;
      box-shadow: 0rpx 14rpx 44rpx 2rpx #E9EFF5;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-weight: 400;
      color: #FFFFFF;
    }
  }

  .tip {
    display: flex;
    flex-direction: column;
    padding: 0 28rpx;
    margin-top: 84rpx;

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: #FF5C2D;
      line-height: 32rpx;
      margin-bottom: 21rpx;
    }

    .text {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
      line-height: 42rpx;
      -webkit-background-clip: text;
    }
  }
</style>