jufubao-takeorder 1.0.2-beta1 → 1.0.2-beta3

package/src/components/{JfbTakeorderQuotedList/JfbTakeorderQuotedList.vue → JfbTakeorderOrderDetail/JfbTakeorderOrderDetail.vue}

@@ -1,21 +1,21 @@
 <template>
   <view
-    class="jfb-takeorder-quoted-list"
+    class="jfb-takeorder-order-detail"
     @click="handleEditxSelect"
     :class="{ editx : isEditx && active }"
   >
     <!--#ifdef H5-->
     <view
-      class="jfb-takeorder-quoted-list__edit"
+      class="jfb-takeorder-order-detail__edit"
       :class="{ editx : isEditx && active }"
       v-if="isEditx && active"
     >
-      <view class="jfb-takeorder-quoted-list__edit-icon" @click.stop="delEdit">
+      <view class="jfb-takeorder-order-detail__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-quoted-list__body">
+    <view class="jfb-takeorder-order-detail__body">
       <view>测试插件( {{containerId}} )</view>
     </view>
   </view>
@@ -24,17 +24,17 @@
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   import { jfbRootExec } from "@/utils/xd.event";
-  import JfbTakeorderQuotedListMixin from "./JfbTakeorderQuotedListMixin";
+  import JfbTakeorderOrderDetailMixin from "./JfbTakeorderOrderDetailMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
   export default {
-    name: "JfbTakeorderQuotedList",
+    name: "JfbTakeorderOrderDetail",
     components: {
       XdFontIcon
     },
     mixins: [
-      componentsMixins, extsMixins, JfbTakeorderQuotedListMixin
+      componentsMixins, extsMixins, JfbTakeorderOrderDetailMixin
     ],
     data() {
       return {
@@ -103,9 +103,9 @@
 </script>
 
 <style scoped lang="less">
-  @import "./JfbTakeorderQuotedListLess.less";
+  @import "./JfbTakeorderOrderDetailLess.less";
 
-  .jfb-takeorder-quoted-list {
+  .jfb-takeorder-order-detail {
     &__body{
 
     }

package/src/components/{JfbTakeorderUnquotedList/JfbTakeorderUnquotedListLess.less → JfbTakeorderOrderDetail/JfbTakeorderOrderDetailLess.less}

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

package/src/components/{JfbTakeorderQuotedDetail/JfbTakeorderQuotedDetailMixin.js → JfbTakeorderOrderDetail/JfbTakeorderOrderDetailMixin.js}

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

package/src/components/JfbTakeorderOrderDetail/Mock.js

@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+  
+  getOrderByIdFilmSquate:{},
+  
+  updateOrderFilmPaiqiDate:{},
+  
+  removeOrderFilmAddress:{},
+  
+  addOrderFilmcart:{},
+  
+}

package/src/components/{JfbTakeorderUnquotedDetail → JfbTakeorderOrderList}/Api.js

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

package/src/components/JfbTakeorderOrderList/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: [],
+}

package/src/components/JfbTakeorderOrderList/JfbTakeorderOrderList.vue

@@ -0,0 +1,168 @@
+<template>
+  <view
+    class="jfb-takeorder-order-list"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-takeorder-order-list__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-takeorder-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-order-list__body">
+      <view
+        v-if="showNew"
+        @click="handleRefresh"
+        :style="{ color: warningColor, background: newBackgroundColor }"
+        class="jfb-takeorder-quoted-list__body-new"
+        ><XdFontIcon size="24" icon="iconIM"></XdFontIcon>
+        <view>新的订单来了，点我立即刷新</view></view
+      >
+      <view v-for="(item, index) in orderList" :key="index">
+        <Order
+          :item="item"
+          :mainColor="mainColor"
+          @expire="handleOrderExpire"
+          @btnEvent="handleBtnEvent"
+        ></Order>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbTakeorderOrderListMixin from "./JfbTakeorderOrderListMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+  import Order from "./components/order.vue";
+const Color = require("color");
+  export default {
+    name: "JfbTakeorderOrderList",
+    components: {
+      XdFontIcon,
+      Order,
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbTakeorderOrderListMixin
+    ],
+    data() {
+      return {
+        newBackgroundColor: "",
+        showNew: false,
+        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,
+          },
+        ],
+      }
+    },
+    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) {
+
+        // jfbRootExec('baiduUserLogin', {
+
+        //   vm: this,//   data: {
+
+        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
+
+        //   }
+
+        // }).then().catch()
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.newBackgroundColor = Color(this.warningColor).alpha(0.15).toString();
+        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+
+        //this.height = getContainerPropsValue(container, 'content.height', 10);
+      },
+      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 "./JfbTakeorderOrderListLess.less";
+
+  .jfb-takeorder-order-list {
+    &__body{
+
+    }
+  }
+</style>

package/src/components/{JfbTakeorderQuotedList/JfbTakeorderQuotedListLess.less → JfbTakeorderOrderList/JfbTakeorderOrderListLess.less}

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

package/src/components/{JfbTakeorderQuotedList/JfbTakeorderQuotedListMixin.js → JfbTakeorderOrderList/JfbTakeorderOrderListMixin.js}

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

package/src/components/JfbTakeorderOrderList/Mock.js

@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+  
+  getOrderByIdFilmSquate:{},
+  
+  updateOrderFilmPaiqiDate:{},
+  
+  removeOrderFilmAddress:{},
+  
+  addOrderFilmcart:{},
+  
+}

package/src/components/JfbTakeorderOrderList/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/JfbTakeorderOrderList/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/JfbTakeorderOrderList/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)
+}
+