mall-app-t/pages/user/point/buy.vue

<template>
  <pb-layout
    navbar="inner"
    iconColor="#fff"
    class="buy-point-wrap"
    leftIcon="leftIcon"
    color="#fff"
    title="购买积分"
    :bgStyle="bgStyle"
  >
    <view class="title ss-m-t-80">
      <view class="main">购买商城积分</view>
      <view class="sub ss-flex ss-row-center ss-m-t-55"
        ><text style="color: #f3d3bf" class="cicon-safe"></text>订单多多·出单多多<text
          style="color: #f3d3bf"
          class="cicon-safe"
        ></text
      ></view>
    </view>

    <view class="middle ss-m-t-150 ss-flex-col ss-row-center ss-col-center ss-gap-40">
      <view class="title">积分额度选择</view>
      <view class="sub">专属您的积分</view>
    </view>

    <view class="combo ss-m-t-90 ss-m-b-50 ss-p-x-40">
      <template v-for="(item, index) in state.pointList">
        <button
          :class="['ss-reset-button', state.currentIndex === index ? 'draw-btn' : 'draw-btn-raw', 'ui-Shadow-Main']"
          @click="chooseItemClick(index)"
        >
          {{ `购买${item.point}积分/${item.price}元` }}
        </button>
      </template>
    </view>

    <view class="agreement-box ss-flex ss-row-center" :class="{ shake: state.isShaking }">
      <label class="radio ss-flex" @tap="onChange">
        <radio
          :checked="state.agreeStatus"
          color="rgba(243, 192, 156, 1)"
          style="transform: scale(0.8)"
          @tap.stop="onChange"
        />
        <view class="agreement-text ss-flex ss-m-l-8">
          我已阅读并遵守
          <view class="tcp-text" @tap.stop="onProtocol('积分须知')"> 《积分须知》 </view>
        </view>
      </label>
    </view>
  </pb-layout>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import PointApi from '@/peach/api/pay/point'
import peach from '@/peach'

const state = ref({
  isShaking: false,
  agreeStatus: false,
  pointList: [],
  currentIndex: -1,
})

const bgStyle = {
  backgroundImage: '/static/point.png',
  imageType: 'local',
  backgroundColor: '#fff',
  description: '',
  height: '100%',
}

function onProtocol() {
  peach.$router.go('/pages/public/richtext?title=积分须知')
}

function getPointConfig() {
  PointApi.getPointConfig().then((res) => {
    if (res.data.packagePoint) state.value.pointList = JSON.parse(res.data.packagePoint)
  })
}

function onChange() {
  state.value.agreeStatus = !state.value.agreeStatus
}

function chooseItemClick(index) {
  if (!state.value.agreeStatus) {
    state.value.isShaking = true
    setTimeout(() => {
      state.value.isShaking = false
    }, 1000)
    peach.$helper.toast('请勾选同意积分须知')
    return
  }

  state.value.currentIndex = index
  uni.showModal({
    title: '提示',
    content: '确认购买该积分额度？',
    success: async function (res) {
      if (res.confirm) {
        let data = await PointApi.buyIntegral({
          point: state.value.pointList[index].point,
          price: state.value.pointList[index].price * 100,
        })

        uni.requestPayment({
          provider: 'wxpay',
          orderInfo: data.data,
          success: (res) => {
            payResult('success')
          },
          fail: (err) => {
            err.errMsg !== 'requestPayment:fail cancel' && payResult('fail')
          },
        })
      }
    },
  })
}

// 支付结果跳转,success:成功，fail:失败
function payResult(resultType) {
  // peach.$router.redirect('/pages/pay/result', {
  //   payState: resultType,
  // })
}

onShow(() => {
  getPointConfig()
})
</script>

<style lang="scss" scoped>
.buy-point-wrap {
  .title {
    .main {
      font-size: 80rpx;
      color: rgba(232, 181, 150, 1);
      letter-spacing: 20px;
      position: relative;
      left: 20px;
    }

    .sub {
      font-size: 32rpx;
      color: #f3d3bf;
      letter-spacing: 4px;
    }
  }

  .middle {
    .title {
      font-size: 39rpx;
      color: #fccdb1;
    }

    .title::before {
      content: '';
      display: block;
      width: 80px;
      position: relative;
      left: -100px;
      top: 14px;
      border-bottom: 1px dotted #e7b493;
    }

    .title::after {
      content: '';
      display: block;
      width: 80px;
      position: relative;
      left: 130px;
      top: -12px;
      border-bottom: 1px dotted #e7b493;
    }

    .sub {
      background-color: #e7b493;
      border-radius: 18rpx;
      border: 1px solid #979797;
      letter-spacing: 5px;
      padding: 0 10rpx 0 18rpx;
      font-size: 24rpx;
    }
  }

  .combo {
    .draw-btn {
      height: 82rpx;
      line-height: normal;
      background: linear-gradient(-90deg, rgba(230, 179, 147, 1), rgba(250, 232, 218, 1));
      border-radius: 28rpx;
      font-size: 32rpx;
      font-weight: 500;
      margin-top: 20px;
    }

    .draw-btn-raw {
      height: 82rpx;
      line-height: normal;
      background: transparent;
      border-radius: 28rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #e7b493;
      border: 1px solid #e7b493;
      margin-top: 20px;
    }
  }

  .agreement-box {
    width: 100%;

    .protocol-check {
      transform: scale(0.7);
    }

    .agreement-text {
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;

      .tcp-text {
        color: rgba(243, 192, 156, 1);
      }
    }
  }

  .shake {
    animation: shake 0.05s linear 4 alternate;
  }

  @keyframes shake {
    from {
      transform: translateX(-5rpx);
    }

    to {
      transform: translateX(5rpx);
    }
  }
}
</style>