menduner-uniapp/components/payPopup/index.vue

<template>
  <view style="z-index: 999;">
    <uni-popup ref="popup" :is-mask-click="false" borderRadius="10px 10px 0 0" background-color="#eee">
      <view class="popup-content">
        <view class="popup-content-close">
          <view class="icon" @tap="handleClose">
            <uni-icons
              type="closeempty"
              color="#999"
              size="24"
            />
          </view>
        </view>
        <view class="popup-content-main">
          <view class="popup-content-main-count">
            <view class="title">{{ title }}</view>
            <view class="pay">
              <uni-icons color="#000" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
              <view>{{ amount }}</view>
            </view>
          </view>
          <view class="popup-content-main-type">
            <view v-if="payTypeList?.length" class="card">
              <radio-group @change="radioChange">
                <label class="card-label" v-for="item in payTypeList" :key="item.value">
                  <view class="name">
                    <uni-icons :color="item.color" class="mr-1" :type="item.icon" size="24" custom-prefix="iconfont"></uni-icons>
                    {{item.name}}
                  </view>
                  <view>
                    <radio :value="item.value" :disabled="item.disabled" :checked="item.value === channelValue" />
                  </view>
                </label>
              </radio-group>
            </view>
          </view>
        </view>
        <view class="popup-content-btn">
          <button class="popup-content-btn-s" @tap="handlePay">
            确认支付 
            <uni-icons color="#FFF" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
            {{ amount }}
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script setup>
import { ref } from 'vue'
import { getEnableCodeList } from '@/api/common'

const props = defineProps({
  title: { // 标题
    type: String,
    default: '支付'
  },
  amount: { // 支付金额
    type: [String, Number],
    default: '金额获取失败'
  },
})

const payType = [
  {
    name: '微信支付',
    value: 'wx_lite',
    icon: 'icon-weixinzhifu',
    color: '#1AAD19'
  },
  {
    name: '钱包支付',
    value: 'wallet',
    disabled: true,
    icon: 'icon-qianbao1',
    color: '#00B760'
  }
]

// 余额和其他还没有接暂时只支持微信支付
const payTypeList = ref([])
// 获取支付方式
const getPayMethodsList = async () => {
  payTypeList.value = []
  try {
    const res = await getEnableCodeList({appId: 14})
    if (!res?.data?.length) {
      return
    }
    payTypeList.value.push(...payType.filter(e => res.data.includes(e.value)))
    const result = payType.find(item => !item.disabled && item.value)
    if (result) channelValue.value = result.value
  } catch (error) {
    console.log(error)
  }
}
getPayMethodsList()

const channelValue = ref('')
const radioChange = (e) => {
  channelValue.value = e?.detail?.value || ''
}

const tabBarControl = (show = false) => { // 显示/隐藏TabBar
  const currentPage = getCurrentPages()
  if (!currentPage) return
  const currentTabBar = currentPage[0]?.getTabBar?.()
  currentTabBar?.setData({ show })
}

const popup = ref()
const handleClose = () => {
  tabBarControl(true)
  popup.value.close()
}
const handleOpen = () => {
  tabBarControl(false)
  popup.value.open('bottom')
}

// 支付
const handlePay = async () => {
}

defineExpose({
	handleOpen
})
</script>
<style lang="scss" scoped>
.pay {
  position: sticky;
  bottom: 0;
  padding: 0 40rpx 50rpx 40rpx;
  box-sizing: border-box;
  &-box {
    width: 100%;
    background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
    border-radius: 180rpx 0 180rpx 0;
    box-shadow: 3rpx 6rpx 10rpx 0rpx rgb(216 160 82);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    .price {
      padding: 0 40rpx;
      font-size: 40rpx;
      font-weight: 600;
      color: #e68735;
    }
    .btn {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 40rpx;
      border: 2rpx solid #00B760;
      background: #00B760;
      color: #FFF;
      border-radius: 180rpx 0 180rpx 0;
      position: relative;
      // &::after {
      //   content: '';
      //   position: absolute;
      //   width: 50rpx;
      //   height: 50rpx;
      //   background: radial-gradient(top right, transparent 50%, #00B760 50%);
      //   left: 0;
      //   top: 0;
      //   margin-left: -25rpx;
      //   border-radius: 180rpx;
      // }
    }
  }
}

.popup-content {
  z-index: 999;
  max-height: 500px;
  display: flex;
  flex-direction: column;
  &-close {
    display: flex;
    padding: 10px;
    justify-content: flex-end;
    .icon {
      width: 30px;
      height: 30px;
      background: #ccc;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  &-main {
    flex: 1;
    height: 0;
    overflow-y: auto;
    &-count {
      margin-bottom: 20px;
      text-align: center;
      .title {
        font-size: 28rpx;
        color: #666
      }
      .pay {
        font-size: 52rpx;
        color: #000;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
      }
    }
    &-type {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      .card {
        border-radius: 10px;
        margin: 0 auto;
        background: #FFF;
        padding: 10px;
        &-label {
          padding: 15px 0;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #eee;
          &:last-of-type {
            border-bottom: none;
          }
          .name {
            display: flex;
            align-items: center;
            color: #333;
          }
        }
      }
    }
  }
  &-btn {
    height: 70px;
    width: 100%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    &-s {
      height: 40px;
      width: 75%;
      line-height: 40px;
      color: #FFF;
      // color: #724d2b;
      background: #00B760;
      // background: linear-gradient(121deg,#fde2c2 29.02%,#c19164 104.03%);
      border-radius: 90px;
    }
  }
}
.mr-1 {
  margin-right: 10px;
}
</style>