express-order.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <view class="container">
  3. <!-- 底部按钮 -->
  4. <view class="footer">
  5. <!-- 查询区域 -->
  6. <view class="query-section">
  7. <u-radio-group v-model="queryType">
  8. <u-radio label="查订单" name="order" />
  9. <u-radio label="查物流" custom-style="margin-left:20px" name="logistics" />
  10. </u-radio-group>
  11. <view class="search-box">
  12. <u-input custom-style="width:100rpx" v-model="searchKeyword" placeholder="扫描/输入订单编号"
  13. border="surround" clearable>
  14. </u-input>
  15. <u-button color="#c8c8c8" text="查询" @click="handleSearch" />
  16. </view>
  17. </view>
  18. <u-divider></u-divider>
  19. <view style="display: flex;">
  20. <u-button size="large" type="success" text="扫码" @click="handleScan" />
  21. </view>
  22. </view>
  23. </view>
  24. </template>
  25. <script setup>
  26. import {
  27. ref
  28. } from 'vue';
  29. const queryType = ref('order');
  30. const searchKeyword = ref('');
  31. // 处理查询
  32. const handleSearch = () => {
  33. console.log('查询:', searchKeyword.value);
  34. };
  35. // 处理扫码
  36. const handleScan = () => {
  37. uni.scanCode({
  38. success: (res) => {
  39. searchKeyword.value = res.result;
  40. handleSearch();
  41. }
  42. });
  43. };
  44. </script>
  45. <style lang="scss" scoped>
  46. @import '../components/common.scss';
  47. </style>