jufubao-takeorder 1.0.2-beta2 → 1.0.2-beta4

package/package.json

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

package/src/components/{JfbTakeorderQuotedDetail → JfbTakeorderFilterOrderList}/Api.js

@@ -1,13 +1,13 @@
 'use strict';
 /**
  * @description  接口配置，
- * 在设置方法名字当时候，别忘记加上【模块名字】：Quoted
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Filter
  * @type {*[]}
  */
 module.exports = [
   {
-    //设置方法名字当别忘记加上【模块名字】：Quoted
-    mapFnName: 'getQuotedByIdFilmSquate',
+    //设置方法名字当别忘记加上【模块名字】：Filter
+    mapFnName: 'getFilterByIdFilmSquate',
     title: '获取电影广场列表',
     path: '/api/account/film/list-film-square',
     isRule: false,
@@ -19,8 +19,8 @@ module.exports = [
     disabled: true,
   },
   {
-    //设置方法名字当别忘记加上【模块名字】：Quoted
-    mapFnName: 'updateQuotedFilmPaiqiDate',
+    //设置方法名字当别忘记加上【模块名字】：Filter
+    mapFnName: 'updateFilterFilmPaiqiDate',
     title: '更新排期',
     path: '/api/account/film/paiqi-date',
     isRule: false,
@@ -32,8 +32,8 @@ module.exports = [
     disabled: true,
   },
   {
-    //设置方法名字当别忘记加上【模块名字】：Quoted
-    mapFnName: 'removeQuotedFilmAddress',
+    //设置方法名字当别忘记加上【模块名字】：Filter
+    mapFnName: 'removeFilterFilmAddress',
     title: '删除我的配送地址',
     path: '/api/account/film/paiqi-date',
     isRule: false,
@@ -44,8 +44,8 @@ module.exports = [
     disabled: true,
   },
   {
-    //设置方法名字当别忘记加上【模块名字】：Quoted
-    mapFnName: 'addQuotedFilmcart',
+    //设置方法名字当别忘记加上【模块名字】：Filter
+    mapFnName: 'addFilterFilmcart',
     title: '添加购物车',
     path: '/api/account/film/paiqi-date',
     isRule: false,

package/src/components/JfbTakeorderFilterOrderList/Attr.js

@@ -0,0 +1,12 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbTakeorderFilterOrderList/JfbTakeorderFilterOrderList.vue

@@ -0,0 +1,210 @@
+<template>
+  <view
+    class="jfb-takeorder-filter-order-list"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-takeorder-filter-order-list__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-takeorder-filter-order-list__edit-icon" @click.stop="delEdit">
+        <xd-font-icon icon="iconshanchu-01" color="#fff" size="30"></xd-font-icon>
+      </view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-takeorder-filter-order-list__body">
+      <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>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  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,
+      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
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+    },
+    created() {
+      this.init(this.container);
+
+      //todo
+    },
+    methods: {
+      onJfbLoad(options) {
+        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 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+
+        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+
+        //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)
+      },
+      onJfbReachBottom(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      onJfbShow(options) {
+        console.log('event.onJfbShow', options)
+      },
+      onJfbHide(options) {
+        console.log('event.onJfbHide', options)
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbTakeorderFilterOrderListLess.less";
+
+  .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/{JfbTakeorderUnquotedDetail/JfbTakeorderUnquotedDetailLess.less → JfbTakeorderFilterOrderList/JfbTakeorderFilterOrderListLess.less}

@@ -12,7 +12,7 @@
 }
 
 //start
-.jfb-takeorder-unquoted-detail {
+.jfb-takeorder-filter-order-list {
   box-sizing: border-box;
 
   &__body{
@@ -71,7 +71,7 @@
 
 
 /**notPreview**/
-.jfb-takeorder-unquoted-detail {
+.jfb-takeorder-filter-order-list {
   //&:before {
     //content: " ";
     //display: table;

package/src/components/{JfbTakeorderUnquotedDetail/JfbTakeorderUnquotedDetailMixin.js → JfbTakeorderFilterOrderList/JfbTakeorderFilterOrderListMixin.js}

@@ -16,7 +16,7 @@ export default {
       //@EndAttrData
       
       // #endif
-      cssRoot: 'jfb-takeorder-unquoted-detail'
+      cssRoot: 'jfb-takeorder-filter-order-list'
     }
   },
   created() {

package/src/components/JfbTakeorderFilterOrderList/Mock.js

@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+  
+  getFilterByIdFilmSquate:{},
+  
+  updateFilterFilmPaiqiDate:{},
+  
+  removeFilterFilmAddress:{},
+  
+  addFilterFilmcart:{},
+  
+}

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/JfbTakeorderIndex/Api.js

@@ -6,53 +6,21 @@
  */
 module.exports = [
   {
-    //设置方法名字当别忘记加上【模块名字】：Index
-    mapFnName: 'getIndexByIdFilmSquate',
-    title: '获取电影广场列表',
-    path: '/api/account/film/list-film-square',
+    mapFnName: 'getIndexAllMapCity',
+    title: '获取城市列表',
+    path: '/common/v1/region/city/all-map-city',
     isRule: false,
-    params: {
-      last_key: ['当前页', 'Number', '必选'],
-      page_size: ['每页数量', 'Number', '必选'],
-    },
+    params: {},
     isConsole: true,
     disabled: true,
   },
   {
-    //设置方法名字当别忘记加上【模块名字】：Index
-    mapFnName: 'updateIndexFilmPaiqiDate',
-    title: '更新排期',
-    path: '/api/account/film/paiqi-date',
+    mapFnName: 'getIndexProvince',
+    title: '获取省份列表',
+    path: '/common/v1/region/city/tree',
     isRule: false,
-    params: {
-      film_id: ['电影id', 'Number', '必选'],
-      cinema_id: ['影院id', 'Number', '必选'],
-    },
+    params: {},
     isConsole: true,
     disabled: true,
-  },
-  {
-    //设置方法名字当别忘记加上【模块名字】：Index
-    mapFnName: 'removeIndexFilmAddress',
-    title: '删除我的配送地址',
-    path: '/api/account/film/paiqi-date',
-    isRule: false,
-    params: {
-      film_id: ['电影id', 'Number', '必选'],
-    },
-    isConsole: true,
-    disabled: true,
-  },
-  {
-    //设置方法名字当别忘记加上【模块名字】：Index
-    mapFnName: 'addIndexFilmcart',
-    title: '添加购物车',
-    path: '/api/account/film/paiqi-date',
-    isRule: false,
-    params: {
-      film_id: ['电影id', 'Number', '必选'],
-    },
-    isConsole: true,
-    disabled: true,
-  },
+  }
 ];