产品选择组件

src/components/MoneyManage/CurrencySelect.vue

@@ -18,7 +18,7 @@
       <div class="search">
         <input type="text" v-model="searchData" class="search-input" placeholder="查询" @focus="handleSearchFocus"
           @blur="handleSearchBlur">
-        <el-icon class="search-icon">
+        <el-icon v-show="!searchData" class="search-icon">
           <Search />
         </el-icon>
         <el-icon class="clear-icon" v-if="searchData" @click="clearSearch">
@@ -66,6 +66,7 @@ const emit = defineEmits(['update:modelValue', 'change'])
 // 切换下拉菜单
 const toggleMenu = () => {
   isOpen.value = !isOpen.value
+  searchData.value = ''
 }
 
 // 清除搜索
@@ -193,13 +194,15 @@ overflow: visible;
     background: #fff;
     clip-path: polygon(0 100%, 100% 100%, 50% 0);
     z-index: 1001;
-        border: none; /* 移除原来的边框 */
+    border: none;
+    /* 移除原来的边框 */
   }
 
   &::after {
     content: "";
     position: absolute;
-        top: -9px; /* 比 ::before 往下一点，制造边框效果 */
+    top: -9px;
+    /* 比 ::before 往下一点，制造边框效果 */
     left: 50%;
     transform: translateX(-50%) scaleY(0.5);
     width: 30px;
@@ -222,11 +225,11 @@ overflow: visible;
 // 搜索输入框：浅灰背景 + 图标定位
 .search-input {
   width: 100%;
-  height: 25px;
+  height: 27px;
   padding: 0 12px 0 5px;
   /* 左侧留出图标空间 */
   border: 1px solid #dcdfe6;
-  border-radius: 8px;
+  border-radius: 10px;
   box-sizing: border-box;
   background-color: #f8f9fa;
   /* 浅灰背景匹配参考图 */
@@ -260,7 +263,7 @@ overflow: visible;
 // 清除图标：右侧定位 + hover效果
 .clear-icon {
   position: absolute;
-  top: 50%;
+  top: 62%;
   right: 20px;
   transform: translateY(-50%);
   color: #909399;
@@ -284,14 +287,17 @@ overflow: visible;
 // 选项按钮：无边框 + hover/选中效果
 .dropdown-item {
   width: 100%;
-  height: 25px;
+  height: 27px;
   padding: 5px 12px 5px 5px;
   text-align: center;
   cursor: pointer;
   border: none;
-  border-radius: 8px;
+  border-radius: 10px;
   background-color: #fff;
   font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
   margin: 5px 0;
   color: #040A2D;
   transition: all 0.2s ease;

src/components/MoneyManage/ProductSelect.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="productContent">
+    <div class="selectBox" @click="handelMenu" :class="{ 'active': isOpen }">
+      <span class="placeholder" :style="{ color: selectedItem ? '#333' : '#A8ABB2' }">
+        {{ selectedItem || placeholder }}
+      </span>
+      <span class="arrow">
+        <el-icon>
+          <ArrowDown />
+        </el-icon>
+      </span>
+    </div>
+
+    <div class="menu" v-show="isOpen">
+      <div class="coin">
+        <div class="coinselect">
+          coin1
+          <span class="coin-arrow">
+            <el-icon>
+              <ArrowDown />
+            </el-icon>
+          </span>
+        </div>
+        <div class="coinoption">
+          coIn2
+        </div>
+      </div>
+      <div class="product">
+        22
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed, watchEffect, onMounted } from 'vue';
+const searchData = ref('')
+const isOpen = ref(false)
+const selectedItem = ref('')
+const dropdownRef = ref(null)
+const placeholder = ref('请选择产品')
+
+const handelMenu = () => {
+  isOpen.value = !isOpen.value
+}
+</script>
+<style scoped lang="scss">
+.productContent {
+  position: relative;
+  width: 268px;
+  font-family: 'Arial', sans-serif;
+}
+
+.selectBox {
+  border: 1px solid #e5e7eb;
+  padding: 4px 12px;
+  /* 调整内边距以匹配按钮高度 */
+  height: 23px;
+  /* 调整高度以匹配按钮 */
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+
+  .placeholder {
+    flex: 1;
+    font-size: 14px;
+    line-height: 18px;
+    color: #A8ABB2;
+  }
+}
+
+// 箭头图标：展开时旋转
+.arrow {
+  margin-left: 8px;
+  color: #999;
+  transition: transform 0.3s ease;
+}
+
+.selectBox.active .arrow {
+  transform: rotate(180deg);
+}
+
+.menu {
+  position: absolute;
+  top: 100%; // 紧贴触发器下方
+  left: 0;
+  width: 130%;
+  max-height: 600px;
+  display: flex;
+  padding: 10px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: #E4F0FC;
+  box-shadow: 0 0 4px 0 #00000040;
+  z-index: 100;
+
+
+  .coin {
+    width: 100%;
+
+    .coinselect {
+      width: 100px;
+      height: 30px;
+      border: 1px solid #175BE5;
+      padding: 5px 0 5px 12px;
+      display: flex;
+
+      .coin-arrow {
+        margin-top: 8px;
+        color: #111;
+      }
+    }
+  }
+}
+</style>

src/views/moneyManage/receiveDetail/receiveDetail.vue

@@ -220,8 +220,7 @@
                     <el-input v-model="addFormData.jwcode" placeholder="请输入活动名称" />
                 </el-form-item>
                 <el-form-item label="产品名称" required>
-                    <el-select placeholder="请选择产品名称" v-model="addFormData.rateName" clearable>
-                    </el-select>
+                   <ProductSelect></ProductSelect>
                 </el-form-item>
                 <el-form-item label="产品数量" required>
                     <div style="padding-right: 50px; display: flex;">
@@ -230,14 +229,19 @@
                     </div>
                 </el-form-item>
                 <el-form-item label="付款币种" required>
-                    <CurrencySelect v-model="selectedCurrency" :items="customOptions" placeholder="请选择付款币种"
+                    <CurrencySelect v-model="addFormData.moneytype" :items="customOptions" placeholder="请选择付款币种"
                         @change="handleCurrencyChange" />
                 </el-form-item>
                 <el-form-item label="付款金额" required>
                     <el-input v-model="addFormData.jwcode" placeholder="请输入付款金额" />
                 </el-form-item>
                 <el-form-item label="支付方式" required>
-                    <el-select placeholder="请选择支付方式" clearable></el-select>
+                    <CurrencySelect v-model="addFormData.paytype" :items="paytypeOptions" placeholder="请选择支付方式">
+                    </CurrencySelect>
+                </el-form-item>
+                <el-form-item label="到账地区" required>
+                    <CurrencySelect v-model="addFormData.MoneyAddress" :items="MoneyAddressOptions" placeholder="请选择支付方式">
+                    </CurrencySelect>
                 </el-form-item>
                 <el-form-item label="付款时间" required>
                     <el-date-picker type="datetime" placement="right" v-model="addFormData.time"
@@ -265,7 +269,7 @@
                 <span class="dialog-footer">
                     <el-button style="background-color: #7E91FF;" @click="closeAddForm">取消</el-button>
                     <el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary"
-                        @click="handleReject">确定</el-button>
+                        @click="handleAddForm">确定</el-button>
                 </span>
             </template>
         </el-dialog>
@@ -442,6 +446,7 @@ import API from '@/util/http.js'
 import { color } from 'echarts';
 import { template } from 'lodash';
 import CurrencySelect from '@/components/MoneyManage/CurrencySelect.vue'
+import ProductSelect from '@/components/MoneyManage/ProductSelect.vue'
 //====================   标签切换  =========================
 const activeTab = ref('wait')
 
@@ -486,10 +491,19 @@ const closeAddForm = () => {
     addFormData.value = {}
 }
 
+const handleAddForm = () => {
+    console.log('客服新增的数据', addFormData.value);
+
+}
+
 //付款币种
 const selectedCurrency = ref('');
 const customOptions = ref(['新币', '马币', '港币', '美元', '英镑', '越南盾']);
 
+
+//支付方式
+const paytypeOptions = ref(["银行转账", "刷卡", "现金", "支票", "Grabpay", "Nets", "E-Transfer", "Paypal", "Stripe-链接收款", "PaymentAsia-链接收款", "Ipay88-链接收款"])
+const MoneyAddressOptions = ref(['马来西亚','香港','新加坡'])
 const handleCurrencyChange = (option) => {
     console.log('选中的币种:', option);
 };