jufubao-takeorder 1.0.1 → 1.0.2-beta10

package/src/components/JfbTakeorderIndex/components/cityPicker.vue

@@ -0,0 +1,307 @@
+<template>
+  <view class="wrap">
+    <!-- <xd-city
+        :top="80"
+        city-location-type="baidu"
+        @getCityList="handleGetCityList"
+      ></xd-city> -->
+    <view class="city-picker">
+      <!-- 热门城市 -->
+      <view class="hot-cities" v-if="hotCities.length > 0">
+        <view class="city-grid">
+          <view
+            class="city-item"
+            v-for="city in hotCities"
+            :key="city.city_code"
+            :style="{
+              color: isOptionSelected(city) ? mainColor : '',
+              border: isOptionSelected(city)
+                ? `1px solid ${filterBorderColor}`
+                : '',
+              backgroundColor: isOptionSelected(city) ? filterBackground : '',
+            }"
+            @click="handleCityClick(city)"
+          >
+            {{ city.city_name }}
+          </view>
+        </view>
+      </view>
+
+      <!-- 主要内容区：城市列表和字母索引 -->
+      <view class="content" v-if="scrollHeight !== null">
+        <!-- 城市列表 -->
+        <scroll-view
+          class="city-list"
+          scroll-y
+          :style="scrollHeight"
+          :scroll-with-animation="true"
+          :scroll-into-view="scrollToView"
+          @scroll="onScroll"
+        >
+          <view
+            v-for="group in cityGroups"
+            :key="group.letter"
+            :id="'group-' + group.letter"
+            class="city-group"
+          >
+            <view class="group-letter">{{ group.letter }}</view>
+            <view class="city-items">
+              <view
+                class="city-item"
+                v-for="city in group.cities"
+                :key="city.city_code"
+                :style="{
+                  color: isOptionSelected(city) ? mainColor : '',
+                  border: isOptionSelected(city)
+                    ? `1px solid ${filterBorderColor}`
+                    : '',
+                  backgroundColor: isOptionSelected(city)
+                    ? filterBackground
+                    : '',
+                }"
+                @click="handleCityClick(city)"
+              >
+                {{ city.city_name }}
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+
+    <!-- 右侧字母索引 -->
+    <view class="letter-index">
+      <view
+        class="letter-item"
+        v-for="letter in letters"
+        :key="letter"
+        @click="scrollToLetter(letter)"
+        :style="{
+          background: currentLetter === letter ? mainColor : '',
+          color: currentLetter === letter ? '#fff' : '',
+        }"
+      >
+        {{ letter }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+export default {
+  components: {
+  },
+  // 接收父组件传递的属性
+  props: {
+    // 热门城市数据
+    hotCities: {
+      type: Array,
+      default: () => [],
+    },
+    // 按字母分组的城市数据
+    cityGroups: {
+      type: Array,
+      default: () => [],
+    },
+    // 字母列表
+    letters: {
+      type: Array,
+      default: () => [],
+    },
+    // 当前选中的城市，由父组件控制
+    selectedCity: {
+      type: Array,
+      default: [],
+    },
+    // 主色调
+    mainColor: {
+      type: String,
+      default: "#ff6600",
+    },
+    // 过滤框边框颜色
+    filterBorderColor: {
+      type: String,
+      default: "#ff6600",
+    },
+    // 过滤框背景颜色
+    filterBackground: {
+      type: String,
+      default: "#ff6600",
+    },
+  },
+  data() {
+    return {
+      // 滚动相关
+      scrollToView: "",
+      currentLetter: "",
+      // 用于计算滚动位置的分组高度
+      groupHeights: {},
+      scrollHeight: ""
+    };
+  },
+  watch: {
+    // 当城市分组数据变化时，重新计算高度
+    cityGroups() {
+      this.$nextTick(() => {
+        this.calculateGroupHeights();
+      });
+    },
+  },
+  mounted() {
+    // 初始化时计算分组高度
+    this.$nextTick(() => {
+      this.calculateGroupHeights();
+    });
+  },
+  methods: {
+    // 计算每个字母分组的高度，用于滚动定位
+    calculateGroupHeights() {
+      this.scrollHeight = `height:calc(100vh - ${
+        100 * this.$rpxNum
+      }px);`;
+    },
+    isOptionSelected(city) {
+      return this.selectedCity && this.selectedCity.includes(city.city_code);
+    },
+    // 处理城市点击事件
+    handleCityClick(city) {
+      // 向父组件发射城市选中事件
+      this.$emit("citySelect", city);
+    },
+
+    // 滚动到指定字母分组
+    scrollToLetter(letter) {
+      // 检查是否存在该字母的城市分组
+      const hasGroup = this.cityGroups.some((group) => group.letter === letter);
+      if (!hasGroup) return;
+
+      // 关键：先清空 scrollToView，再设置目标值，确保触发滚动
+      // 因为 uni-app 的 scroll-into-view 只有在值变化时才会触发滚动
+      this.scrollToView = "";
+
+      // 使用 $nextTick 确保 DOM 更新后再设置新值
+      this.$nextTick(() => {
+        this.scrollToView = `group-${letter}`;
+        this.currentLetter = letter;
+      });
+    },
+
+    // 监听滚动事件，更新当前字母
+    onScroll(e) {
+      const scrollTop = e.detail.scrollTop + 100; // 加一个偏移量
+
+      // 遍历所有分组高度，找到当前可见的分组
+      for (const letter in this.groupHeights) {
+        const { top, bottom } = this.groupHeights[letter];
+        if (scrollTop >= top && scrollTop < bottom) {
+          this.currentLetter = letter;
+          break;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.city-picker {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #fff;
+  padding-right: 40rpx;
+}
+
+.wrap {
+  display: flex;
+}
+
+.hot-cities {
+  background-color: #fff;
+}
+
+.section-title {
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 24rpx;
+}
+
+.city-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24rpx;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  position: relative;
+  // overflow: hidden;
+}
+
+.city-list {
+  flex: 1;
+  height: 100%;
+}
+
+.city-group {
+  padding: 0;
+}
+
+.group-letter {
+  font-size: 28rpx;
+  color: #999999;
+  background-color: #fff;
+  padding-left: 20rpx;
+}
+
+.city-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24rpx;
+  padding: 24rpx 0 0 0;
+  background-color: #fff;
+}
+
+.city-item {
+  border-radius: 4rpx;
+  background: #fafafa;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16rpx 0;
+  color: #666666;
+  font-size: 24rpx;
+  flex: 0 0 calc((100% - 3 * 24rpx) / 4); /* flex-grow: 0, flex-shrink: 0, flex-basis: ... */
+  box-sizing: border-box;
+  /* 强制文本在一行内显示 */
+  white-space: nowrap;
+  /* 超出容器部分隐藏 */
+  overflow: hidden;
+  /* 用省略号表示超出部分 */
+  text-overflow: ellipsis;
+}
+
+.letter-index {
+  width: 60rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  justify-content: flex-start;
+  background-color: transparent;
+  padding-right: 10rpx;
+  position: fixed;
+  right: -20rpx;
+}
+
+.letter-item {
+  width: 35rpx;
+  height: 35rpx;
+  line-height: 35rpx;
+  text-align: center;
+  font-size: 20rpx;
+  color: #333;
+  border-radius: 50%;
+}
+</style>

package/src/components/JfbTakeorderIndex/cusAttr/advanced.js

@@ -0,0 +1,26 @@
+'use strict';
+import {
+  dataVal,
+  statusDataVal,
+  statusShow
+} from "@/utils/AttrTools";
+export default (data, gValue, gColor, oldData = {}) => {
+  return [
+    {
+      label: '订单详情',
+      ele: 'xd-select-pages-path',
+      labelInline: true,
+      valueKey: 'order_detail_path',
+      placeholder: '请选择订单详情页面',
+      className: 'input100',
+      value: dataVal({ data, key: 'order_detail_path', dValue: null, gValue }),
+      groupKey: 'advanced',
+      inline: false,
+      setting: {
+        mode: 'new',
+        router: XdBus.getParentApi('getPagesTree'),
+      },
+    },
+  ].filter(i => i)
+}
+

package/src/components/JfbTakeorderIndex/cusAttr/content.js

@@ -0,0 +1,9 @@
+'use strict';
+
+import { customVal, dataVal } from "@/utils/AttrTools";
+
+export default (data, gValue, gColor, oldData = {}) => {
+  return [
+  ].filter(i => i)
+}
+

package/src/components/JfbTakeorderIndex/cusAttr/style.js

@@ -0,0 +1,11 @@
+'use strict';
+import {
+  dataVal,
+  statusShow,
+  statusDataVal,
+} from "@/utils/AttrTools";
+
+export default function (data, gValue, gColor, oldData) {
+  return [].filter(i => i)
+}
+

package/src/components/JfbTakeorderOrderDetail/Api.js

@@ -0,0 +1,125 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Order
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'getListOrderNewsContent', //自定义方法名字（必选）
+    title: '获取内容',
+    path: '/cms/v1/news-content',
+    isRule: false,
+    params: {
+      scene: ['使用场景', 'String', '选填'],
+      container_id: ['插件ID', 'String', '必填'],
+      page_id: ['页面ID', 'String', '必填'],
+      page_size: ['记录条数', 'Number', '必填', 1],
+      code: ['业务线id', 'String', '选填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'getTakeorderOrderDetail', //自定义方法名字（必选）
+    title: '获取内容',
+    path: '/takeorder/v1/order/:order_id',
+    isRule: false,
+    params: {
+      order_id: ['订单ID', 'String', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'createQuotation', //自定义方法名字（必选）
+    title: '报价创建',
+    path: '/takeorder/v1/quotation/:order_id/create',
+    isRule: false,
+    data: {
+      order_id: ['订单ID', 'String', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'cancelQuotation', //自定义方法名字（必选）
+    title: '报价取消',
+    path: '/takeorder/v1/quotation/:order_id/cancel',
+    isRule: false,
+    data: {
+      order_id: ['订单ID', 'String', '必填'],
+      amount: ['报价金额', 'Number', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'updateQuotation', //自定义方法名字（必选）
+    title: '报价修改',
+    path: '/takeorder/v1/quotation/:order_id/update',
+    isRule: false,
+    data: {
+      order_id: ['订单ID', 'String', '必填'],
+      amount: ['报价金额', 'Number', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'discardOrder', //自定义方法名字（必选）
+    title: '放弃订单',
+    path: '/takeorder/v1/order/:order_id/discard',
+    isRule: false,
+    data: {
+      order_id: ['订单ID', 'String', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'acceptOrder', //自定义方法名字（必选）
+    title: '接受订单',
+    path: '/takeorder/v1/order/:order_id/receive',
+    isRule: false,
+    data: {
+      order_id: ['订单ID', 'String', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'reportOrder', //自定义方法名字（必选）
+    title: '上报订单',
+    path: '/takeorder/v1/order/:order_id/report',
+    isRule: false,
+    data: {
+      order_id: ['订单ID', 'String', '必填'],
+      report_voucher_list: ['上报凭证列表', 'Array', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'imageRecognition', //自定义方法名字（必选）
+    title: '图像识别',
+    path: '/takeorder/v1/image/recognition',
+    isRule: false,
+    data: {
+      image_url: ['图片URL', 'String', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'getImagePreview', //自定义方法名字（必选）
+    title: '获取图片预览',
+    path: '/takeorder/v1/image/preview',
+    isRule: false,
+    data: {
+      image_url: ['图片URL', 'String', '必填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbTakeorderOrderDetail/Attr.js

@@ -0,0 +1,16 @@
+'use strict';
+import Style from './cusAttr/style'
+import Advanced from './cusAttr/advanced'
+import Content from './cusAttr/content'
+
+export default {
+  style: [],
+  content: (data, gValue, gColor, oldData) => {
+    return [
+      ...Content(data, gValue, gColor, oldData),
+      ...Style(data, gValue, gColor, oldData),
+      ...Advanced(data, gValue, gColor, oldData),
+    ].filter(i => i)
+  },
+  advanced: [],
+}