:sparkles: 搜索筛选

src/styles/deviceSearch/index.less

@@ -0,0 +1,23 @@
+.field .van-field__label {
+  width: auto;
+}
+
+.deviceSearch {
+  .clearBtn {
+    border-color: #39a6fe;
+    background-color: #fff;
+  }
+
+  .selectBtn {
+    background-color: #39a6fe;
+    border-color: #39a6fe;
+  }
+
+  .van-cascader__option--selected {
+    color: #39a6fe;
+  }
+
+  .van-tabs__line {
+    background-color: #39a6fe !important;
+  }
+}

src/views/position/PositionIndex.vue

@@ -84,45 +84,47 @@
                             <div v-else>
                                 <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                                     @load="onLoad"> -->
-                                    <div v-for="item in orderHisList" :key="item.id">
-                                        <van-card>
-                                            <template #title>
-                                                <span class="word13">挂单数量：{{ item.entrustNumber }} 股 &nbsp;&nbsp;&nbsp;&nbsp;</span>
-                                            </template>
-                                            <template #desc>
-                                                <span class="word11">&nbsp;&nbsp;&nbsp;&nbsp;创建时间：{{ item.createTime }}</span>
-                                            </template>
-                                            <template #tags>
-                                                <div v-if="item.type === '1'">交易类型：<van-tag type="success">买入</van-tag>
-                                                </div>
-                                                <div v-else>交易类型：<van-tag type="warning">卖出</van-tag></div>
-                                                <!-- <van-tag  type="danger">挂单失败</van-tag> -->
-                                            </template>
-                                            <template #price-top>
-                                                <!-- status 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
-                                                <!-- <div>
+                                <div v-for="item in orderHisList" :key="item.id">
+                                    <van-card>
+                                        <template #title>
+                                            <span class="word13">挂单数量：{{ item.entrustNumber }} 股
+                                                &nbsp;&nbsp;&nbsp;&nbsp;</span>
+                                        </template>
+                                        <template #desc>
+                                            <span class="word11">&nbsp;&nbsp;&nbsp;&nbsp;创建时间：{{ item.createTime
+                                                }}</span>
+                                        </template>
+                                        <template #tags>
+                                            <div v-if="item.type === '1'">交易类型：<van-tag type="success">买入</van-tag>
+                                            </div>
+                                            <div v-else>交易类型：<van-tag type="warning">卖出</van-tag></div>
+                                            <!-- <van-tag  type="danger">挂单失败</van-tag> -->
+                                        </template>
+                                        <template #price-top>
+                                            <!-- status 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
+                                            <!-- <div>
                   交易状态：<van-tag plain round type="danger">{{ showStatusText(item.status) }}</van-tag>
                 </div> -->
-                                                <div v-if="item.status === '0'">挂单状态：<van-tag plain round
-                                                        type="danger">过期</van-tag></div>
-                                                <div v-else-if="item.status === '1'">挂单状态：<van-tag plain round
-                                                        type="success">匹配中</van-tag></div>
-                                                <div v-else-if="item.status === '2'">挂单状态：<van-tag plain
-                                                        round>撤单</van-tag></div>
-                                                <div v-else-if="item.status === '3'">挂单状态：<van-tag plain round
-                                                        type="primary">匹配成功</van-tag></div>
-                                                <div v-else-if="item.status === '4'">挂单状态：<van-tag plain round
+                                            <div v-if="item.status === '0'">挂单状态：<van-tag plain round
+                                                    type="danger">过期</van-tag></div>
+                                            <div v-else-if="item.status === '1'">挂单状态：<van-tag plain round
+                                                    type="success">匹配中</van-tag></div>
+                                            <div v-else-if="item.status === '2'">挂单状态：<van-tag plain round>撤单</van-tag>
+                                            </div>
+                                            <div v-else-if="item.status === '3'">挂单状态：<van-tag plain round
+                                                    type="primary">匹配成功</van-tag></div>
+                                            <div v-else-if="item.status === '4'">挂单状态：<van-tag plain round
                                                     color="#7232dd">部分匹配成功</van-tag></div>
-                                                <div v-else>挂单状态：<van-tag plain round>未知状态</van-tag></div>
-                                            </template>
-                                            <template #price>
-                                                <span class="txt9">每股单价
-                                                    ：￥{{ item.price }}
-                                                </span>
-                                            </template>
-                                        </van-card>
-                                        <br>
-                                    </div>
+                                            <div v-else>挂单状态：<van-tag plain round>未知状态</van-tag></div>
+                                        </template>
+                                        <template #price>
+                                            <span class="txt9">每股单价
+                                                ：￥{{ item.price }}
+                                            </span>
+                                        </template>
+                                    </van-card>
+                                    <br>
+                                </div>
                                 <!-- </van-list> -->
                             </div>
                             <!-- <van-back-top @click="backTop" right="5vw" bottom="10vh" /> -->
@@ -136,7 +138,8 @@
 
         <!-- <deviceOper ref="oprRef" @operfinish="operFinish"></deviceOper> -->
         <!-- 搜索弹出框 -->
-        <!-- <deviceSearch ref="searchRef" @search="search($event)"></deviceSearch> -->
+        <deviceSearch ref="searchRef" @search="search($event)"></deviceSearch>
+
         <div style="height: 50px;"></div>
         <!-- <nav-bar></nav-bar> -->
     </div>
@@ -150,8 +153,9 @@ import { onMounted, reactive, ref } from "vue"
 // import SearchPop from './SearchPop.vue';
 // import TestComp from './TestComp.vue'
 import { listMyOrderHis, getMyStock } from "@/service/position";
+import deviceSearch from "./deviceSearch";
 
-const showSearchPop = ref(false);
+// const showSearchPop = ref(false);
 
 const orderHisList = ref([]);
 const error = ref(false);
@@ -182,36 +186,36 @@ function twoNumber(val) {
 }
 
 const onLoad = async () => {
-  if (!finished.value) {
-    loading.value = true
-    searchParams.current = searchParams.current + 1;
-    getList();
-    getMyStockFunc();
-  }
+    if (!finished.value) {
+        loading.value = true
+        searchParams.current = searchParams.current + 1;
+        getList();
+        getMyStockFunc();
+    }
 };
 
 let searchParams = reactive({
-  current: 1, // 当前页，默认1
-  size: 10, // 页大小，默认10条
+    current: 1, // 当前页，默认1
+    size: 10, // 页大小，默认10条
 })
 
 const getList = async () => {
-  finished.value = false;
-  const params = Object.assign({}, searchParams);
-  const { data } = await listMyOrderHis(params);
-  if (data.code === "00000") {
-    orderHisList.value = data.data.records
-    hisLength.value = orderHisList.value.length
-    if (orderHisList.value.length >= data.data.total) {
-      finished.value = true;
+    finished.value = false;
+    const params = Object.assign({}, searchParams);
+    const { data } = await listMyOrderHis(params);
+    if (data.code === "00000") {
+        orderHisList.value = data.data.records
+        hisLength.value = orderHisList.value.length
+        if (orderHisList.value.length >= data.data.total) {
+            finished.value = true;
+        }
     }
-  }
-  // 加载状态结束
-  loading.value = false;
+    // 加载状态结束
+    loading.value = false;
 }
 
 onMounted(
-  onLoad,
+    onLoad,
 );
 
 const buyPrice = ref()
@@ -220,19 +224,32 @@ const dailyDiff = ref()
 const totalDiff = ref()
 
 const getMyStockFunc = async () => {
-  const { data } = await getMyStock();
-  if (data.code === '00000') {
-    buyPrice.value = data.data.buyPrice
-    currentPrice.value = data.data.currentPrice
-    dailyDiff.value = data.data.dailyDiff
-    totalDiff.value = data.data.totalDiff
-  }
+    const { data } = await getMyStock();
+    if (data.code === '00000') {
+        buyPrice.value = data.data.buyPrice
+        currentPrice.value = data.data.currentPrice
+        dailyDiff.value = data.data.dailyDiff
+        totalDiff.value = data.data.totalDiff
+    }
 }
 
+const searchRef = ref(null);
+
+// 搜索点击
 const searchClick = () => {
-  console.log("点击搜索");
-  showSearchPop.value = true;
-}
+    console.log("点击搜索");
+    searchRef.value.showSearch();
+};
+
+// 搜索条件触发查询
+const search = (e) => {
+    orderHisList.value = [];
+    loading.value = true;
+    searchParams.current = 1;
+    searchParams = Object.assign(searchParams, e);
+    getList();
+};
+
 
 // 处理子组件传递回来的更新事件
 // const handleUpdateShowSearchPop = (val) => {

src/views/position/deviceSearch.vue

@@ -0,0 +1,156 @@
+<template>
+  <!-- 设备列表 - 搜索弹窗 -->
+  <div class="deviceSearch flex-col" v-ref:searchRef>
+    <van-action-sheet v-model:show="sheetShow" :closeable='false' title="输入以下任意信息进行搜索">
+
+      <div class="content">
+        <van-form @submit="onSubmit">
+          <!-- 订单编号 -->
+          <van-field v-model="orderId" name="orderId" label="订单编号" placeholder="订单编号" />
+
+          <!-- 创建时间 -->
+
+          <!-- 挂单类型、挂单状态 -->
+          <van-row>
+            <!-- 挂单类型 type：1买，2卖-->
+            <van-col span="12">
+              <van-field label-width="66" v-model="orderTypeText" is-link readonly label="挂单类型" placeholder="请选择挂单类型"
+                @click="orderTypeShow = true" class="field" />
+              <van-popup v-model:show="orderTypeShow" round position="bottom">
+                <van-cascader v-model="orderType" title="请选择挂单类型" :options="orderTypeOptions"
+                  @close="orderTypeShow = false" @finish="orderTypeFinish" />
+              </van-popup>
+            </van-col>
+
+            <van-col span="12">
+              <van-field label-width="66" v-model="orderStatusText" is-link readonly label="挂单状态" placeholder="请选择挂单状态"
+                @click="orderStatusShow = true" class="field" />
+              <van-popup v-model:show="orderStatusShow" round position="bottom">
+                <van-cascader v-model="orderStatus" title="请选择挂单状态" :options="orderStatusOptions"
+                  @close="orderStatusShow = false" @finish="orderStatusFinish" />
+              </van-popup>
+            </van-col>
+          </van-row>
+
+          <van-row justify="space-around" style="padding: 2em;">
+            <van-button class="clearBtn" span="5" round plain type="primary" style="height: 2em; padding: 0 2em;"
+              @click="registerClick">清空条件</van-button>
+            <van-button class="selectBtn" span="5" round type="primary" style="height: 2em; padding: 0 2em;"
+              native-type="submit">点击搜索</van-button>
+          </van-row>
+        </van-form>
+      </div>
+    </van-action-sheet>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import { styleUrl } from "../../common/js/utils";
+
+export default {
+  setup(prop, context) {
+
+    const sheetShow = ref(false);
+
+    const orderId = ref('');
+
+    const orderType = ref(''); // 挂单类型
+    const orderTypeText = ref(''); // 挂单类型 - 页面显示
+    const orderTypeShow = ref(false); // 挂单类型级联状态
+    const orderTypeOptions = ref([ // 挂单类型级联选项，挂单类型：1买，2卖
+      {
+        text: '买',
+        value: '1',
+      }, {
+        text: '卖',
+        value: '2',
+      }
+    ]);
+    const orderTypeFinish = ({ selectedOptions }) => { // 挂单类型级联选择
+      orderTypeShow.value = false;
+      orderTypeText.value = selectedOptions.map((option) => option.text).join('/');
+    };
+
+    const orderStatus = ref(''); // 挂单状态
+    const orderStatusText = ref(''); // 挂单状态 - 页面显示
+    const orderStatusShow = ref(false); // 挂单状态级联状态
+    const orderStatusOptions = ref([ // 挂单状态级联选项：0过期，1生效，2撤单，3全部成交，4部分成交
+      {
+        text: '过期',
+        value: '0',
+      }, {
+        text: '匹配中',
+        value: '1',
+      }, {
+        text: '撤单',
+        value: '2',
+      }, {
+        text: '匹配成功',
+        value: '3',
+      }, {
+        text: '部分匹配成功',
+        value: '4',
+      }
+    ]);
+    const orderStatusFinish = ({ selectedOptions }) => { // 挂单类型级联选择
+      orderStatusShow.value = false;
+      orderStatusText.value = selectedOptions.map((option) => option.text).join('/');
+    };
+
+
+    // 父组件页面触发展示及初始化
+    const showSearch = () => { sheetShow.value = true; };
+
+    // 提交搜索表单触发搜索
+    const onSubmit = () => {
+      const searchParam = {
+        orderId: orderId.value,
+
+        orderType: orderType.value,
+        orderStatus: orderStatus.value,
+      };
+      context.emit('search', searchParam);
+      sheetShow.value = false;
+    }
+    // 清空条件
+    const registerClick = () => {
+      orderId.value = '',
+      orderType.value = '';
+      orderTypeText.value = '';
+      orderStatus.value = '';
+      orderStatusText.value = '';
+    };
+
+    onMounted(() => {
+
+    });
+
+    // 加载样式
+    styleUrl('deviceSearch');
+    return {
+      orderId,
+      sheetShow,
+
+      orderType,
+      orderTypeText,
+      orderTypeShow,
+      orderTypeOptions,
+      orderTypeFinish,
+
+      orderStatus,
+      orderStatusText,
+      orderStatusShow,
+      orderStatusOptions,
+      orderStatusFinish,
+
+      showSearch,
+      registerClick,
+      onSubmit,
+    };
+  },
+  components: {},
+};
+</script>
+
+<style lang="less" scoped></style>