jufubao-takeorder 1.0.2-beta4 → 1.0.2-beta6

package/src/components/JfbTakeorderIndex/components/order.vue

@@ -1,273 +0,0 @@
-<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/JfbTakeorderOrderList/components/order.vue

@@ -1,273 +0,0 @@
-<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>