jufubao-takeorder 1.0.2-beta2 → 1.0.2-beta4

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

@@ -0,0 +1,299 @@
+<template>
+  <view class="wrap">
+    <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">
+        <!-- 城市列表 -->
+        <scroll-view
+          class="city-list"
+          scroll-y
+          :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 {
+  // 接收父组件传递的属性
+  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: {},
+    };
+  },
+  watch: {
+    // 当城市分组数据变化时，重新计算高度
+    cityGroups() {
+      this.$nextTick(() => {
+        this.calculateGroupHeights();
+      });
+    },
+  },
+  mounted() {
+    // 初始化时计算分组高度
+    this.$nextTick(() => {
+      this.calculateGroupHeights();
+    });
+  },
+  methods: {
+    // 计算每个字母分组的高度，用于滚动定位
+    calculateGroupHeights() {
+      this.groupHeights = {};
+      this.cityGroups.forEach((group) => {
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(`#group-${group.letter}`)
+          .boundingClientRect((data) => {
+            if (data) {
+              this.groupHeights[group.letter] = {
+                top: data.top,
+                bottom: data.bottom,
+              };
+            }
+          })
+          .exec();
+      });
+    },
+    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) {
+        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/components/order.vue

@@ -0,0 +1,273 @@
+<template>
+  <view class="order-wrap">
+    <view :style="{ background: mainColor }" class="order-time">
+      <XdFontIcon
+        style="margin: 0 24rpx 0 36rpx"
+        icon="iconshijian-01"
+        size="30"
+      ></XdFontIcon>
+      剩余报价时间：<text v-if="item.remainingTime > 0">{{
+        formatCountdown(item.remainingTime)
+      }}</text
+      >，参与报价<text style="color: #ffeb3b">{{ item.people }}</text
+      >人</view
+    >
+    <view class="order-title">
+      <view class="order-title-left">
+        <view>{{ item.shop_name }}</view>
+        <text>｜</text>
+        <view>{{ item.brand_name }}</view>
+      </view>
+      <view class="order-title-right">{{ item.city }}</view>
+    </view>
+    <view
+      v-for="(Pitem, Pindex) in item.products"
+      :key="Pindex"
+      class="order-product"
+    >
+      <image :src="Pitem.product_thumb"></image>
+      <view class="order-product-info">
+        <view class="order-product-info-name">{{ Pitem.product_name }}</view>
+        <view class="order-product-info-sku"
+          >规格：{{ Pitem.product_sku }}</view
+        >
+        <view class="order-product-info-price">
+          <view class="order-product-info-price-left"
+            ><text>¥ </text>{{ Pitem.minPrice }}<text class="range">～</text
+            ><text>¥ </text>{{ Pitem.maxPrice }}</view
+          >
+          <view class="order-product-info-price-right"
+            ><XdFontIcon
+              icon="icondanchuangguanbi_xian"
+              color="#999"
+              size="14"
+            ></XdFontIcon
+            ><view>{{ Pitem.num }}</view></view
+          >
+        </view>
+      </view>
+    </view>
+    <view class="order-price">
+      <view class="order-price-left">
+        <view class="order-price-left-market"
+          >市场原价：¥{{ item.market_price }}（仅供参考）</view
+        >
+        <view class="order-price-left-settle"
+          >结算价格：<view
+            ><text>¥ </text>{{ item.minPrice }}<text class="range">～</text
+            ><text>¥ </text>{{ item.maxPrice }}</view
+          ></view
+        >
+      </view>
+      <view>
+        <XdButton @click="handleClick" type="primary" size="small"
+          >报价</XdButton
+        >
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdButton from "@/components/XdButton/XdButton";
+
+export default {
+  name: "order",
+  components: {
+    XdFontIcon,
+    XdButton,
+  },
+  data() {
+    return {
+      isUpdating: false,
+      countdownTimer: null,
+    };
+  },
+  props: {
+    mainColor: {
+      type: String,
+      default: "",
+    },
+    item: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {},
+  watch: {
+    // 当父组件更新了 order.status 时，停止倒计时
+    'item.status'(newVal) {
+      if (newVal !== 'pending') {
+        this.clearCountdownTimer();
+        this.isUpdating = false; // 重置更新状态
+      }
+    },
+    // 当父组件更新了 order.remainingTime 时（例如页面重新显示时的校准），重启倒计时
+    'item.remainingTime'(newVal) {
+        if (this.item.status === 'pending' && newVal > 0) {
+            this.startCountdown();
+        }
+    }
+  },
+  created() {
+    // 组件创建时，如果是待支付状态，就启动倒计时
+    if (this.item.remainingTime > 0) {
+      this.startCountdown();
+    }
+  },
+  destroyed() {
+    // 组件销毁时，清理定时器
+    this.clearCountdownTimer();
+  },
+  methods: {
+    formatCountdown(seconds) {
+      const mins = Math.floor(seconds / 60);
+      const secs = seconds % 60;
+      return `${mins.toString().padStart(2, "0")}:${secs
+        .toString()
+        .padStart(2, "0")}`;
+    },
+    // 数字补零（小于10补前导零）
+    padZero(num) {
+      return num < 10 ? `0${num}` : num;
+    },
+    startCountdown() {
+      this.clearCountdownTimer();
+      this.countdownTimer = setInterval(() => {
+        // 这里我们不直接修改 props，而是在倒计时结束时通知父组件
+        if (this.item.remainingTime <= 1) {
+          // 当倒计时即将结束时
+          this.clearCountdownTimer();
+          this.isUpdating = true; // 显示“更新中”状态
+          this.$emit("expire", this.item.id); // 通知父组件：我过期了！
+        } else {
+          // 为了UI流畅，可以在这里更新本地倒计时显示，但最终数据以父组件为准
+          // 注意：这是一个小技巧，避免每秒都向父组件发送事件
+          this.$set(this.item, "remainingTime", this.item.remainingTime - 1);
+        }
+      }, 1000);
+    },
+    clearCountdownTimer() {
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+        this.countdownTimer = null;
+      }
+    },
+    handleClick() {
+      this.$emit("btnEvent", this.item);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.order {
+  &-wrap {
+    background: #fff;
+    color: #333;
+    margin: 16rpx;
+    border-radius: 20rpx;
+  }
+  &-time {
+    color: #fff;
+    font-size: 24rpx;
+    padding: 20rpx 0;
+    border-radius: 20rpx 20rpx 0 0;
+    display: flex;
+    align-items: center;
+  }
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    padding: 24rpx 32rpx;
+    border-bottom: 1px solid #f4f4f4;
+    &-left {
+      display: flex;
+      align-items: center;
+    }
+    &-right {
+      font-weight: 500;
+    }
+  }
+  &-product {
+    display: flex;
+    padding: 16rpx 32rpx;
+    border-bottom: 1px solid #f4f4f4;
+    & > image {
+      width: 180rpx;
+      height: 180rpx;
+      flex-shrink: 0;
+      border: 10rpx;
+    }
+    &-info {
+      margin-left: 24rpx;
+      &-name {
+        .uni-max-cut(2,80);
+        margin-bottom: 10rpx;
+      }
+      &-sku {
+        font-size: 24rpx;
+        color: #999;
+      }
+      &-price {
+        margin-top: 10rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        &-left {
+          color: #ff2c18;
+          font-size: 32rpx;
+          font-weight: 500;
+          & > text {
+            font-size: 24rpx;
+            margin-right: 10rpx;
+          }
+          .range {
+            margin: 0 10rpx;
+          }
+        }
+        &-right {
+          color: #999;
+          display: flex;
+          align-items: baseline;
+          & > view {
+            margin-left: 10rpx;
+          }
+        }
+      }
+    }
+  }
+  &-price {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx 32rpx;
+    border-radius: 0 0 20rpx 20rpx;
+    &-left {
+      &-market {
+        font-size: 24rpx;
+        color: #999;
+        margin-bottom: 10rpx;
+      }
+      &-settle {
+        font-size: 24rpx;
+        display: flex;
+        align-items: center;
+        & > view {
+          color: #ff2c18;
+          font-size: 32rpx;
+          font-weight: 500;
+          & > text {
+            font-size: 24rpx;
+            margin-right: 10rpx;
+          }
+          .range {
+            margin: 0 10rpx;
+          }
+        }
+      }
+    }
+  }
+}
+</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,23 @@
+'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,
+  },
+];

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: [],
+}