cashier_wx/components/paymentMethod.vue

<template>
  <!-- 支付方式 -->
  <view class="paymentMethod">
    <view class="paymentMethod_content">
      <view class="paymentMethod_title">支付方式</view>
      <up-radio-group
        v-model="radiovalue.type"
        iconPlacement="right"
        @change="groupChanges"
        :size="28"
        placement="column"
      >
        <block v-for="(item, index) in paymentMethodList" :key="index">
          <view
            class="method_list"
            @click="groupChanges(item.type)"
            :class="{ disabled: returnDisabled(item) }"
          >
            <view class="method_list_top">
              <view class="method_list_top_left">
                <image class="icon" :src="item.url" mode="aspectFill" />
                <view class="method_list_top_cen">
                  <view class="name"> {{ item.name }} </view>
                  <view class="method_list_bom" v-if="item.name == '余额支付'">
                    <text class="balance">
                      当前余额￥{{ orderVIP ? orderVIP.amount || 0 : 0 }}</text
                    >
                    <text class="topUpNow" @click="goRecharge">去充值</text>
                  </view>
                </view>
              </view>
              <up-radio
                :disabled="returnDisabled(item)"
                activeColor="#E8AD7B"
                icon-size="18"
                size="18"
                :name="item.type"
              >
              </up-radio>
            </view>
          </view>
        </block>
      </up-radio-group>
    </view>
    <slot name="bottom"></slot>
  </view>
</template>

<script setup>
import {
  ref,
  reactive,
  defineProps,
  computed,
  defineEmits,
  watch,
  watchEffect,
  defineExpose,
} from "vue";

const props = defineProps({
  rechargeFreeChecked: {
    type: Boolean,
    default: false,
  },
  payAmount: {
    type: Number,
    default: 0,
  },
  freeCheck: {
    type: Boolean,
    default: false,
  },
  changeFreeenable: {
    type: Boolean,
    default: false,
  },
  disablePayType: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

function returnDisabled(item) {
  if (props.disablePayType.includes(item.name)) {
    return true;
  } else {
    return false;
  }
}

const orderVIP = ref(null);
const emits = defineEmits(["customevent", "groupChange"]);
watchEffect(() => {
  orderVIP.value = uni.cache.get("orderVIP");
});

const orderVIPfun = (data) => {
  orderVIP.value = data;
};

const paymentMethodList = ref([
  // #ifdef MP-WEIXIN
  {
    name: "微信支付",
    type: 2,
    url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
    payType: "wechatPay",
  },
  // #endif
  // #ifdef MP-ALIPAY
  {
    name: "支付宝支付",
    type: 3,
    url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
    payType: "aliPay",
  },
  // #endif
  {
    name: "余额支付",
    type: 1,
    url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
    payType: "accountPay",
  },
]);

const paymentMethodName = ref([
  {
    name: "余额支付",
    type: 1,
    url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
    payType: "accountPay",
  },
  {
    name: "微信支付",
    type: 2,
    url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
    payType: "wechatPay",
  },
  {
    name: "支付宝支付",
    type: 3,
    url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
    payType: "aliPay",
  },
]);

// const radiovalue = ref(2); // 支付方式
const radiovalue = defineModel({
  type: Object,
  default: () => {
    return {
      name: "微信支付",
      type: 2,
      url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
      payType: "wechatPay",
    };
  },
});

watch(
  () => props.disablePayType,
  (newval) => {
	console.log('props.disablePayType',newval)
    const canUsePayType = paymentMethodList.value.filter((item) => {
      return  !newval.includes(item.name);
    });
    if (canUsePayType.find((v) => v.type == radiovalue.value.type)) {
      return;
    }
    radiovalue.value = canUsePayType[0];
  },
  {
    immediate: true,
  }
);

// * 监听支付方式切换
const groupChanges = (type) => {
  if (props.freeCheck && type == 1) {
    return;
  }
  const item = paymentMethodList.value.find((v) => v.type == type);

  if (item && returnDisabled(item)) {
    uni.showToast({
      title: "当前支付方式不可用",
      icon: "none",
    });
    return;
  }
  // if (props.payAmount <= 0 && type != 1) {
  // 	return;
  // }
  radiovalue.value = item;
};

watch(()=> radiovalue.value.type,(newval)=>{
	emits("groupChange", radiovalue.value);
})

// 去充值
const goRecharge = () => {
  if (props.disablePayType.includes("余额支付")) {
    return;
  }
  uni.navigateTo({
    url: "/pages/user/member/czzx?shopId=" + orderVIP.value.shopId,
  });
  // if (orderVIP.value.isVip) {
  //   uni.navigateTo({
  //     url: "/pages/user/member/czzx?shopId=" + orderVIP.value.shopId,
  //   });
  //   return;
  // }
  // uni.navigateTo({
  //   url: "/user/vip/buy-vip?shopId=" + orderVIP.value.shopId,
  // });

  // uni.pro.navigateTo('user/member/index', {
  // 	shopId: orderVIP.value.shopId
  // })
};
// 将方法暴露给父组件
defineExpose({
  groupChanges,
  orderVIPfun,
});
</script>

<style lang="scss">
.paymentMethod {
  box-sizing: border-box;
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;


  .paymentMethod_content {
    padding: 30rpx 30rpx 0 30rpx;
    box-sizing: border-box;

    .paymentMethod_title {
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      box-sizing: border-box;
    }

    .method_list {
      padding: 40rpx 0;
      box-sizing: border-box;
      &.disabled {
        opacity: 0.6;
      }
      .method_list_top {
        display: flex;
        justify-content: space-between;

        .method_list_top_left {
          display: flex;
          align-items: center;

          .icon {
            width: 54.67rpx !important;
            height: 48rpx !important;
            margin-right: 22rpx;
          }

          .name {
            font-size: 32rpx;
            font-weight: 500;
            color: #333;
          }

          .method_list_top_cen {
            display: flex;
            flex-direction: column;
          }
        }
      }

      .method_list_bom {
        display: flex;
        align-items: center;

        .balance {
          margin-right: 20rpx;
          font-size: 24rpx;
        }

        .topUpNow {
          color: #ff803d;
          font-size: 28rpx;
        }
      }
    }

    .method_list:nth-child(odd) {
      border-bottom: 2rpx solid #e5e5e5;
    }
    .method_list:nth-child(2) {
      padding-bottom: 22rpx;
    }
  }
}
</style>