<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="会员中心"></uni-nav-bar>
    <view class="flex-col group_4">
      <view class="flex-col">
        <view class="flex-col section_1">
          <text class="text_4">超级VIP</text>
          <view class="flex-col group_6">
            <text class="text_5">开通立即尊享</text>
            <text class="text_6">{{ money }} 元/年</text>
          </view>
        </view>
        <view class="flex-col group_7">
          <view class="flex-col">
            <text class="text_7">会员权益</text>
            <view class="flex-row equal-division">
              <view class="equal-division-item flex-col">
                <view class="top-image-wrapper flex-col items-center">
                  <image src="/static/imgs/vip-center/1.png" class="image_4" />
                </view>
                <text class="text_8">账期变现</text>
              </view>
              <view class="equal-division-item flex-col group_10">
                <view class="top-image-wrapper flex-col items-center">
                  <image src="/static/imgs/vip-center/2.png" class="image_4" />
                </view>
                <text class="text_8">电子签约</text>
              </view>
              <view class="equal-division-item_1 flex-col">
                <view class="flex-col items-center image-wrapper">
                  <image src="/static/imgs/vip-center/3.png" class="image_7" />
                </view>
                <text class="text_11">智能合同</text>
              </view>
              <view class="equal-division-item_1 flex-col">
                <view class="top-image-wrapper flex-col items-center">
                  <image src="/static/imgs/vip-center/4.png" class="image_4" />
                </view>
                <text class="text_11">征信管理</text>
              </view>
            </view>
          </view>
          <view class="flex-col group_13">
            <text class="text_14">服务说明</text>
            <text class="text_15">1.纸掌柜会员支付支持微信支付。</text>
            <text class="text_16">2.支付成功后会员权益立即生效。</text>
            <text class="text_17">3.会员权益最终解释权归千鸟互联电商科技有限公司所有。</text>
          </view>
        </view>
      </view>
      <view class="flex-col section_2">
        <view class="flex-col items-center button" @click="payForVip">
          <text>立即支付</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { back, go2 } from '@/utils/hook.js'
import { openVip, openVipPay } from '@/apis/commonApi.js'
export default {
  data() {
    return {
      money: 10000
    }
  },
  methods: {
    back,
    payForVip() {
      openVip({
        mallSupplierId: this.$store.state.supplierInfo.supplierId,
        type: 1 // 年费
      }).then((res) => {
        if (res) {
          openVipPay({
            tradeOrderId: res.orderId,
            channelId: res.channelId
          }).then((info) => {
            if (info) {
              console.log('info', info)
              uni.requestPayment({
                provider: 'wxpay',
                orderInfo: info.extra,
                success: (res) => {
                  uni.showToast({
                    title: '支付成功',
                    icon: 'none',
                    duration: 1500
                  })
                  setTimeout(() => {
                    go2('mine', {}, true)
                  }, 1500)
                },
                fail: (err) => {
                  console.log('err', err)
                  uni.showToast({
                    title: '支付失败',
                    icon: 'none',
                    duration: 1500
                  })
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
}
.group_4 {
  flex: 1 1 auto;
  overflow-y: auto;
  .section_2 {
    margin-top: 329rpx;
    padding: 28rpx 0 30rpx;
    color: rgb(126, 86, 28);
    font-size: 36rpx;
    font-weight: 500;
    line-height: 50rpx;
    white-space: nowrap;
    background-image: linear-gradient(180deg, rgb(43, 41, 44) 0%, rgb(43, 41, 44) 0%, rgb(60, 58, 52) 100%, rgb(60, 58, 52) 100%);
    .button {
      margin: 0 32rpx;
      padding: 23rpx 0;
      background-image: linear-gradient(90deg, rgb(255, 234, 208) 0%, rgb(255, 234, 208) 0%, rgb(255, 206, 144) 100%, rgb(255, 206, 144) 100%);
      border-radius: 48rpx;
    }
  }
  .section_1 {
    padding: 86rpx 72rpx 63rpx;
    background-image: url('https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16456699151285633679.png');
    background-position: 0px 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .text_4 {
      color: rgb(237, 221, 187);
      font-size: 68rpx;
      font-weight: 500;
      line-height: 95rpx;
      letter-spacing: 3rpx;
      white-space: nowrap;
    }
    .group_6 {
      margin-top: 110rpx;
      .text_5 {
        color: rgb(247, 251, 255);
        font-size: 24rpx;
        font-weight: 500;
        line-height: 33rpx;
        white-space: nowrap;
      }
      .text_6 {
        margin-top: 9rpx;
        color: rgb(247, 251, 255);
        font-size: 60rpx;
        font-weight: 500;
        line-height: 84rpx;
        white-space: nowrap;
      }
    }
  }
  .group_7 {
    padding-top: 20rpx;
    .group_13 {
      margin-top: 65rpx;
      padding: 0 32rpx;
      .text_14 {
        color: rgb(51, 51, 51);
        font-size: 32rpx;
        font-weight: 600;
        line-height: 45rpx;
        white-space: nowrap;
      }
      .text_15 {
        margin-top: 25rpx;
        color: rgb(136, 136, 136);
        font-size: 26rpx;
        font-weight: 500;
        line-height: 37rpx;
        letter-spacing: 4rpx;
        white-space: nowrap;
      }
      .text_16 {
        margin-top: 17rpx;
        color: rgb(136, 136, 136);
        font-size: 26rpx;
        font-weight: 500;
        line-height: 37rpx;
        letter-spacing: 4rpx;
        white-space: nowrap;
      }
      .text_17 {
        margin-right: 25rpx;
        margin-top: 17rpx;
        color: rgb(136, 136, 136);
        font-size: 26rpx;
        font-weight: 500;
        line-height: 37rpx;
        letter-spacing: 4rpx;
        text-align: left;
      }
    }
    .text_7 {
      margin-left: 32rpx;
      color: rgb(51, 51, 51);
      font-size: 40rpx;
      font-weight: 500;
      line-height: 56rpx;
      white-space: nowrap;
    }
    .equal-division {
      margin-top: 32rpx;
      color: rgb(85, 85, 85);
      font-size: 26rpx;
      font-weight: 500;
      line-height: 37rpx;
      letter-spacing: 4rpx;
      white-space: nowrap;
      .equal-division-item {
        flex: 1 1 168rpx;
        padding-left: 28rpx;
        padding-right: 20rpx;
        .text_8 {
          margin-top: 8rpx;
        }
      }
      .group_10 {
        margin-left: 26rpx;
      }
      .equal-division-item_1 {
        margin-left: 26rpx;
        flex: 1 1 168rpx;
        padding-left: 27rpx;
        padding-right: 21rpx;
        .image-wrapper {
          margin: 0 4rpx;
          padding: 30rpx 0;
          background-image: linear-gradient(
            90deg,
            rgba(255, 224, 192, 0.6) 0%,
            rgba(255, 224, 192, 0.6) 0%,
            rgba(243, 193, 130, 0.6) 100%,
            rgba(243, 193, 130, 0.6) 100%
          );
          box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.1);
          border-radius: 50%;
          .image_7 {
            width: 52rpx;
            height: 52rpx;
          }
        }
        .text_11 {
          margin-top: 8rpx;
        }
      }
      .top-image-wrapper {
        margin: 0 4rpx;
        padding: 26rpx 0;
        background-image: linear-gradient(
          90deg,
          rgba(255, 224, 192, 0.6) 0%,
          rgba(255, 224, 192, 0.6) 0%,
          rgba(243, 193, 130, 0.6) 100%,
          rgba(243, 193, 130, 0.6) 100%
        );
        box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        .image_4 {
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
  }
}
</style>
