样式更改

src/assets/svg/wallet.svg

@@ -0,0 +1 @@
+<svg t="1723174978956" class="icon" viewBox="0 0 1385 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8230" width="200" height="200"><path d="M1198.95955854 669.63235285h-259.08088212c-57.17647073 0-103.58272073-47.15073496-103.58272074-105.22058781 0-58.21875 46.40625-105.36948496 103.63235286-105.36948577h259.03125c28.58823496 0 51.76654432 23.57536789 51.7665443 52.65992641v105.31985285c0 29.08455854-23.17830853 52.61029432-51.7665443 52.61029431z m-259.08088212-157.93014717c-28.58823496 0-51.76654432 23.57536789-51.76654431 52.65992643s23.17830853 52.61029432 51.81617643 52.61029431c28.58823496 0 51.76654432-23.52573496 51.7665443-52.61029431 0-29.08455854-23.17830853-52.61029432-51.7665443-52.61029349z m-155.34926504 52.65992643c0 87.20404432 69.58455854 157.93014715 155.34926504 157.93014716h181.35661789v105.31985284c0 58.16911789-46.40625 105.27022073-103.63235284 105.27022073H214.65073496C157.42463211 932.88235285 111.11764715 885.73161789 111.11764715 827.66176504V195.79227927C111.06801504 137.72242642 157.42463211 90.62132358 214.65073496 90.62132358h802.9522065c57.22610285 0 103.63235285 47.10110285 103.63235285 105.2205878v210.63970651h-181.30698578c-85.86397073 0-155.39889716 70.72610285-155.39889715 157.93014715zM1043.56066137 169.53676504a26.15625 26.15625 0 0 0-25.9577199-26.30514715H214.65073496a26.10661789 26.10661789 0 0 0-25.8584557 26.30514715c0 14.54227927 11.56433862 26.30514715 25.8584557 26.30514634h802.9522065a26.15625 26.15625 0 0 0 25.95771992-26.30514634z" fill="#d4237a" p-id="8231"></path></svg>

src/components/pay/index.vue

@@ -16,11 +16,12 @@
       <span class="font-size-13">￥</span>
       <span class="font-size-30">{{ cost }}</span>
     </div>
-    <radioGroupUI
-      :modelValue="payType"
-      :item="payTypeItem"
-      @change="val => payTypeChange(val)"
-    ></radioGroupUI>
+    <v-chip-group v-model="payType" selected-class="text-primary" mandatory @update:modelValue="payTypeChange">
+      <v-chip filter v-for="k in payTypeList" :key="k.code" :value="k.code" class="mr-3" label>
+        {{ k.name }}
+        <svg-icon v-if="k.icon" class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
+      </v-chip>
+    </v-chip-group>
     <div class="pa-5">
       <!-- 支付 -->
       <div v-if="isWalletPay">
@@ -56,7 +57,6 @@
 <script setup>
 defineOptions({ name: 'pay-index'})
 import { computed, onUnmounted, ref } from 'vue'
-import radioGroupUI from '@/components/FormUI/radioGroup'
 import QrCode from '@/components/QrCode'
 import { definePayTypeList, qrCodePay, walletPay } from './until/payType'
 import { getEnableCodeList, getUnpaidOrder, payOrderSubmit, getOrderPayStatus } from '@/api/common'
@@ -99,12 +99,12 @@ const balanceNotEnough = computed(() => {
 // 支付方式
 const isWalletPay = ref(true)
 const isQrCodePay = ref(false)
-const payTypeChange = (val) => {
-  payType.value = val
+const payTypeChange = (value) => {
+  payType.value = value
   isQrCodePay.value = qrCodePay.includes(payType.value)
   isWalletPay.value = walletPay.includes(payType.value)
   if (isQrCodePay.value) initPayQrCode() // 生成二维码内容
-  emit('payTypeChange', val, balanceNotEnough)
+  emit('payTypeChange', value, balanceNotEnough)
 }
 // 支付方式
 const payType = ref('')
@@ -174,15 +174,6 @@ getUnpaidOrderList() // getUnpaidOrder
 const payLoading = ref(false)
 const payQrCodeTet = ref('')
 
-const payTypeItem = {
-  label: '',
-  width: 1,
-  hideDetails: true,
-  itemText: 'name',
-  itemValue: 'code',
-  items: payTypeList.value
-}
-
 // 钱包支付（余额支付）
 const walletPaySubmit = () => {
   // emit('paySubmit', payType.value)

src/components/pay/until/payType.js

@@ -17,7 +17,9 @@ const channelsAlipay = [
   },
   {
     name: '支付宝扫码支付',
-    // icon: svg_alipay_qr,
+    icon: 'alipay',
+    size: 23,
+    color: '#3383c6',
     type: 'qrCode',
     code: 'alipay_qr'
   },
@@ -45,7 +47,9 @@ const channelsWechat = [
   },
   {
     name: '微信扫码支付',
-    // icon: svg_wx_native,
+    icon: 'weChat',
+    size: 21,
+    color: 'success',
     type: 'qrCode',
     code: 'wx_native'
   },
@@ -58,26 +62,21 @@ const channelsWechat = [
 const channelsMock = [
   {
     name: '钱包支付',
-    // icon: svg_mock,
+    icon: 'wallet',
+    size: 26,
+    color: 'success',
+    type: 'qrCode',
     code: 'wallet'
   },
   {
     name: '模拟支付',
-    // icon: svg_mock,
+    icon: 'wallet',
+    size: 26,
+    color: 'success',
     code: 'mock'
   }
 ]
 
-// export const isQrCodePay = (code) => {
-//   const arr = ['wx_native', 'alipay_qr']
-//   return arr.includes(code)
-// }
-
-// export const isWalletPay = (code) => {
-//   const arr = ['wallet', 'mock']
-//   return arr.includes(code)
-// }
-
 export const definePayTypeList = [
   ...channelsAlipay,
   ...channelsWechat,