dz-app/pages/personal-center/pay/pay.vue

<template>
  <view class="page-content">
    <uv-navbar title="收银台" :placeholder="true" titleStyle="font-weight: bold" :fixed="true" @leftClick="handleBack" />
    <view class="content">
      <view class="money-info flex flex-col align-center justify-center">
        <view class="">
          <text class="unit">¥</text>
          <text class="money">{{ price }}</text>
        </view>
        <view class="tip">待支付金额</view>
      </view>
      <view class="goods-info">
        <view class="goods-info-item flex justify-between">
          <text class="tip">商品名称</text>
          <text>会员卡</text>
        </view>
        <view class="goods-info-item flex justify-between">
          <text class="tip">商品金额</text>
          <text>¥{{ price }}</text>
        </view>
      </view>
      <view v-if="!isIOS" class="tip">选择支付方式</view>
    </view>
    <view v-if="!isIOS" class="channel-list">
      <uv-radio-group v-model="payType" placement="column" iconPlacement="right" shape="square" size="24" iconSize="18">
        <uv-radio v-if="isAndroid" :name="1">
          <view class="flex align-center" slot="label">
            <image class="channel-icon" mode="widthFix" src="@/static/wechat-pay.png" />
            <text>微信支付</text>
          </view>
        </uv-radio>
        <uv-radio v-if="isIOS" :name="2">
          <view class="flex align-center" slot="label">
            <image class="channel-icon" mode="widthFix" src="@/static/apple-pay.png" />
            <text>苹果支付</text>
          </view>
        </uv-radio>
      </uv-radio-group>
    </view>
    <view class="btn-wrap">
      <uv-button type="primary" size="large" @click="handlePay">确认支付 ¥{{ price }}</uv-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import config from '@/config';
import { usePayment } from '@/hooks/usePayment.js';
import { useEnvStore } from '@/hooks/useEnvStore';

const {isAndroid, isIOS, isWap2App, isH5} = useEnvStore();
const { price, payment, iosPayment, onOrderSucceed, onOrderFailed, onOrderTimeout } = usePayment();
const payType = ref(1);
const dividerStyle = {
  "margin": "10px 0"
};

function handlePay() {
  if (isAndroid.value) {
    payment();
  } else {
    iosPayment();
  }
}
function handleBack() {
  uni.navigateBack();
}
</script>

<style lang="scss">
.page-content {
  background-color: #f6f5f5;
}

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.content {
  padding: 0 28px;
}

.money-info {
  padding: 30px 0;
}

.unit {
  font-size: 20px;
}

.money {
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 2px;
}

.tip {
  color: #7c7c7c;
  font-size: 15px;
}

.goods-info {
  margin-bottom: 26px;
}

.goods-info-item {
  &+& {
    margin-top: 10px;
  }
}

.channel-list {
  margin: 10px 18px 0 18px;
  border-radius: 12px;
  background-color: #ffffff;
  padding: 12px;
}

.u-radio+.u-radio {
  margin-top: 10px;
}

.u-radio:last-child {
  border-bottom: none !important;
}

.channel-icon {
  width: 40px;
  height: 40px;
  margin-right: 8px;
}

.btn-wrap {
  margin-top: 36px;
  padding: 0 24px;
}
</style>