jufubao-takeorder 1.0.2-beta3 → 1.0.2-beta4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-takeorder",
-  "version": "1.0.2-beta3",
+  "version": "1.0.2-beta4",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbTakeorderFilterOrderList/Attr.js

@@ -6,43 +6,7 @@
 export default {
   style: [],
   content: (data) => {
-    return [
-      {
-        label: '背景颜色:',
-        ele: 'xd-color',
-        valueKey: 'bgColor',
-        value: data.bgColor || '',
-        placeholder: '请输入占位框背景颜色',
-        groupKey:'content',
-      },
-      {
-        label: '选中路径:',
-        groupKey:'advanced',
-        className: 'input100',
-        ele: 'xd-select-pages-path',
-        valueKey: 'select-pages-path',
-        value: data['select-pages-path'] || null,
-        setting: {
-          router: XdBus.getParentApi('getPagesTree')
-        },
-      },
-      data.bgColor && {
-        label: '高度:',
-        ele: 'el-input',
-        groupKey:'style',
-        type: 'number',
-        valueKey: 'height',
-        value: data.height || 100,
-        placeholder: '请输入占位框高度，单位像素，默认：10px',
-        className: 'input60',
-      },
-      {
-        label: '', //label
-        groupKey:'advanced',
-        ele: 'slot', //package 名称
-        slot: 'is_reference',
-      },
-    ].filter(i=>i)
+    return [].filter(i=>i)
   },
   advanced: [],
 };

package/src/components/JfbTakeorderFilterOrderList/JfbTakeorderFilterOrderList.vue

@@ -16,7 +16,27 @@
     </view>
     <!-- #endif -->
     <view class="jfb-takeorder-filter-order-list__body">
-      <view>测试插件( {{containerId}} )</view>
+      <view class="fixed_top" :style="{top: (layoutInfo.top - 2)+'rpx'}">
+        <xd-tab
+          v-if="initStatus"
+          :tabIndex="tabIndex"
+          :list="tabList"
+          show-footer-line
+          fontSize="28"
+          actFontSize="28"
+          @onTab="handleChange"
+        ></xd-tab>
+      </view>
+      <view style="height: 100rpx;"></view>
+      <view v-for="(item, index) in orderList" :key="index">
+        <Order
+          :item="item"
+          :mainColor="mainColor"
+          :isNeedCutDown="false"
+          @expire="handleOrderExpire"
+          @btnEvent="handleBtnEvent"
+        ></Order>
+      </view>
     </view>
   </view>
 </template>
@@ -27,18 +47,70 @@
   import JfbTakeorderFilterOrderListMixin from "./JfbTakeorderFilterOrderListMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
+  import XdTab from "@/components/XdTab/XdTab";
   import extsMixins from "@/mixins/extsMixins";
+  import Order from "./components/order.vue";
   export default {
     name: "JfbTakeorderFilterOrderList",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdTab,
+      Order
     },
     mixins: [
       componentsMixins, extsMixins, JfbTakeorderFilterOrderListMixin
     ],
     data() {
       return {
-
+        initStatus: false,
+        tabIndex: 0,
+        tabList: [
+          {"name": "全部", "value": 'all'},
+          { "name": "待上报", "value": 'wait_report' },
+          { "name": "待结算", "value": 'wait_settle' },
+          {"name": "已完成", "value": 'com'},
+          { "name": "纠纷中", "value": 'dispute' },
+        ],
+        page_size: 10,
+        page_token: 1,
+        hasNext: true,
+        orderList: [
+          {
+            id: 1,
+            num: 15,
+            people: 30,
+            remainingTime: 10,
+            shop_name: "味多美(北京西单大悦城店)",
+            brand_name: "味多美",
+            city: "北京市",
+            products: [
+              {
+                product_thumb:
+                  "https://img.js.design/assets/img/68b554c9c3a1ea02642d7d2f.png#afa2b9b9d50bcd2f1394619ecc488a99",
+                product_name:
+                  "贝欧宝 BIOBOR贝欧宝维生素C+叶黄素酯软糖118g多重营养3D小熊造型糖果Q弹维生素C+叶黄素酯软糖",
+                product_sku: "118g",
+                minPrice: 132,
+                maxPrice: 1232,
+                num: 15,
+              },
+              {
+                product_thumb:
+                  "https://img.js.design/assets/img/68b554c9c3a1ea02642d7d2f.png#afa2b9b9d50bcd2f1394619ecc488a99",
+                product_name:
+                  "贝欧宝 BIOBOR贝欧宝维生素C+叶黄素酯软糖118g多重营养3D小熊造型糖果Q弹维生素C+叶黄素酯软糖",
+                product_sku: "450g",
+                minPrice: 456,
+                maxPrice: 1546,
+                num: 16,
+              },
+            ],
+            market_price: 4000,
+            minPrice: 456,
+            maxPrice: 1546,
+            order_status: 1,
+          },
+        ],
         //todo
       }
     },
@@ -55,16 +127,15 @@
     },
     methods: {
       onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
+        let status = options.status || options.type;
+        //地址栏设置值
+        if (status) {
+          this.tabIndex = this.tabList.findIndex((item) => {
+            return item.status === status;
+          });
+        }
+        this.initStatus = true;
+        this.getList(status);
       },
       /**
        * @description 监听事件变化
@@ -76,6 +147,25 @@
 
         //this.height = getContainerPropsValue(container, 'content.height', 10);
       },
+      getList(status) {
+        
+      },
+      handleChange(item, index) {
+        if (index === this.tabIndex) return;
+        this.tabIndex = index;
+        this.page_token = 1;
+        this.hasNext = true;
+        this.getList(item);
+        // #ifdef H5
+        let params = this.$xdUniHelper.parseURL().params;
+        params["type"] = item.status;
+        history.replaceState(
+          null,
+          null,
+          `?${this.$xdUniHelper.jsonToParams(params)}`
+        );
+        // #endif
+      },
       onJfbScroll(options) {
         console.log('event.onJfbScroll', options)
       },
@@ -107,7 +197,14 @@
 
   .jfb-takeorder-filter-order-list {
     &__body{
-
+      .fixed_top{
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background: #FFFFFF;
+        z-index: 999;
+      }
     }
   }
 </style>

package/src/components/JfbTakeorderFilterOrderList/components/order.vue

@@ -0,0 +1,277 @@
+<template>
+  <view class="order-wrap">
+    <view  v-if="isNeedCutDown" :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: () => {},
+    },
+    isNeedCutDown: {
+      type: Boolean,
+      default: true,
+    }
+  },
+  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.isNeedCutDown) {
+      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/JfbTakeorderOrderDetail/Api.js

@@ -6,51 +6,16 @@
  */
 module.exports = [
   {
-    //设置方法名字当别忘记加上【模块名字】：Order
-    mapFnName: 'getOrderByIdFilmSquate',
-    title: '获取电影广场列表',
-    path: '/api/account/film/list-film-square',
+    mapFnName: 'getListOrderNewsContent', //自定义方法名字（必选）
+    title: '获取内容',
+    path: '/cms/v1/news-content',
     isRule: false,
     params: {
-      last_key: ['当前页', 'Number', '必选'],
-      page_size: ['每页数量', 'Number', '必选'],
-    },
-    isConsole: true,
-    disabled: true,
-  },
-  {
-    //设置方法名字当别忘记加上【模块名字】：Order
-    mapFnName: 'updateOrderFilmPaiqiDate',
-    title: '更新排期',
-    path: '/api/account/film/paiqi-date',
-    isRule: false,
-    params: {
-      film_id: ['电影id', 'Number', '必选'],
-      cinema_id: ['影院id', 'Number', '必选'],
-    },
-    isConsole: true,
-    disabled: true,
-  },
-  {
-    //设置方法名字当别忘记加上【模块名字】：Order
-    mapFnName: 'removeOrderFilmAddress',
-    title: '删除我的配送地址',
-    path: '/api/account/film/paiqi-date',
-    isRule: false,
-    params: {
-      film_id: ['电影id', 'Number', '必选'],
-    },
-    isConsole: true,
-    disabled: true,
-  },
-  {
-    //设置方法名字当别忘记加上【模块名字】：Order
-    mapFnName: 'addOrderFilmcart',
-    title: '添加购物车',
-    path: '/api/account/film/paiqi-date',
-    isRule: false,
-    params: {
-      film_id: ['电影id', 'Number', '必选'],
+      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

@@ -1,48 +1,16 @@
 'use strict';
+import Style from './cusAttr/style'
+import Advanced from './cusAttr/advanced'
+import Content from './cusAttr/content'
 
-/**
- * @description 当表单组件中有联动操作时候，使用方法进行返回
- */
 export default {
   style: [],
-  content: (data) => {
+  content: (data, gValue, gColor, oldData) => {
     return [
-      {
-        label: '背景颜色:',
-        ele: 'xd-color',
-        valueKey: 'bgColor',
-        value: data.bgColor || '',
-        placeholder: '请输入占位框背景颜色',
-        groupKey:'content',
-      },
-      {
-        label: '选中路径:',
-        groupKey:'advanced',
-        className: 'input100',
-        ele: 'xd-select-pages-path',
-        valueKey: 'select-pages-path',
-        value: data['select-pages-path'] || null,
-        setting: {
-          router: XdBus.getParentApi('getPagesTree')
-        },
-      },
-      data.bgColor && {
-        label: '高度:',
-        ele: 'el-input',
-        groupKey:'style',
-        type: 'number',
-        valueKey: 'height',
-        value: data.height || 100,
-        placeholder: '请输入占位框高度，单位像素，默认：10px',
-        className: 'input60',
-      },
-      {
-        label: '', //label
-        groupKey:'advanced',
-        ele: 'slot', //package 名称
-        slot: 'is_reference',
-      },
-    ].filter(i=>i)
+      ...Content(data, gValue, gColor, oldData),
+      ...Style(data, gValue, gColor, oldData),
+      ...Advanced(data, gValue, gColor, oldData),
+    ].filter(i => i)
   },
   advanced: [],
-};
+}