jufubao-base 1.0.232-beta5 → 1.0.232-beta6

package/src/components/JfbBaseSavingDetail/JfbBaseSavingDetail.vue

@@ -1,20 +1,78 @@
 <template>
-  <view
-    class="jfb-base-saving-detail"
-    @click="handleEditxSelect"
-    :class="{ editx : isEditx && active }"
-  >
+  <view class="jfb-base-saving-detail" @click="handleEditxSelect" :class="{ editx : isEditx && active }">
     <!--#ifdef H5-->
-    <view
-      class="jfb-base-saving-detail__edit"
-      :class="{ editx : isEditx && active }"
-      v-if="isEditx && active"
-    >
+    <view class="jfb-base-saving-detail__edit" :class="{ editx : isEditx && active }" v-if="isEditx && active">
       <view class="jfb-base-saving-detail__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
     <view class="jfb-base-saving-detail__body">
-      <view>测试插件( {{containerId}} )</view>
+      <scroll-view scroll-x="true">
+        <view class="tab_list" :style="[tabStyleComp]">
+          <view class="tab_item" v-for="(tab, i) in tabs" :key="tab.value" :style="{
+              color: i === tabIndex? titleActColor : titleColor,
+            }" @click="switchTab(i)">
+            {{tab.label}}
+            <view v-if="i === tabIndex" class="check" :style="{background: titleActColor
+            }"></view>
+            <view class="check" v-else></view>
+          </view>
+
+        </view>
+      </scroll-view>
+      <view v-if="tab==='month'">
+        <view style="width: 710rpx;margin: 0 auto;borderRadius: 20rpx;background:#FFF">
+          <view class="jfb-base-saving-detail__body-month">
+            <view @click="handleLastMonth">上一月</view>
+            <view>{{monthDateRange}}</view>
+            <view @click="handleNextMonth">下一月</view>
+          </view>
+          <view style="width: 710rpx;height: 480rpx">
+            <echarts ref="monthEcharts" :option="option" canvasId="monthEcharts"></echarts>
+          </view>
+          <view class="jfb-base-saving-detail__body-block"></view>
+        </view>
+      </view>
+      <view v-if="tab==='year'">
+        <view style="width: 710rpx;margin: 0 auto;borderRadius: 20rpx;background:#FFF">
+          <view class="jfb-base-saving-detail__body-cycle">{{yearDateRange}}</view>
+          <view style="width: 710rpx;height: 480rpx">
+            <echarts ref="yearEcharts" :option="option" canvasId="yearEcharts"></echarts>
+          </view>
+          <view class="jfb-base-saving-detail__body-block"></view>
+        </view>
+      </view>
+      <view v-if="tab==='total'">
+        <view style="width: 710rpx;margin: 0 auto;borderRadius: 20rpx;background:#FFF">
+          <view class="jfb-base-saving-detail__body-cycle">{{totalDateRange}}</view>
+          <view style="width: 710rpx;height: 480rpx">
+            <echarts ref="totalEcharts" :option="option" canvasId="totalEcharts"></echarts>
+          </view>
+          <view class="jfb-base-saving-detail__body-block"></view>
+        </view>
+      </view>
+      <view class="jfb-base-saving-detail__body-product">
+        <view class="jfb-base-saving-detail__body-product-title">
+          <view>购物</view>
+          <view>已省：{{saveAmount}}</view>
+        </view>
+        <view v-if="productList.length>0">
+          <view v-for="(item,index) in productList" :key="index" class="jfb-base-saving-detail__body-product-item">
+            <image :src="item.product_image">
+            </image>
+            <view class="jfb-base-saving-detail__body-product-item-info">
+              <view class="jfb-base-saving-detail__body-product-item-info-name">{{item.product_name}}</view>
+              <view class="jfb-base-saving-detail__body-product-item-info-time">
+                <view>{{item.order_time}}</view>
+                <view>{{item.product_num}}件</view>
+              </view>
+              <view class="jfb-base-saving-detail__body-product-item-info-price">
+                <view>合计节省</view>
+                <view :style="{color:mainColor}">{{item.saving_amount/100}}</view>
+              </view>
+            </view>
+          </view> 
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -24,61 +82,445 @@
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseSavingDetailMixin from "./JfbBaseSavingDetailMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
+  import echarts from './components/echarts.vue'
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
   export default {
     name: "JfbBaseSavingDetail",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      echarts
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseSavingDetailMixin
     ],
     data() {
       return {
-
-        //todo
+        tabs: [
+          {
+            label: '月度',
+            value: 'month'
+          },
+          {
+            label: '年度',
+            value: 'year'
+          },
+          {
+            label: '累计',
+            value: 'total'
+          }
+        ],
+        //标题
+        titleBgc: '',
+        titleColor: '',
+        titleActColor: '',
+        titlePadding: '',
+        tabPadding: '',
+        tabIndex: 0,
+        tab: 'month',
+        option: null,
+        monthDateRange: '',
+        yearDateRange: '',
+        totalDateRange: '',
+        saveAmount: 0, //节省金额
+        productList: [],
+        hasNext: true,
+        page_token: 1
       }
     },
+    computed: {
+      tabStyleComp() {
+        return {
+          background: this.titleBgc,
+          marginBottom: this.titlePadding + 'rpx',
+          padding: this.getMarginAndPadding(this.tabPadding, { top: 40, right: 0, bottom: 40, left: 0 }),
+        }
+      },
+    },
     watch: {
       container(value, oldValue) {
         if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
         if (this.$configProject['isPreview']) this.init(value)
       },
+      tab(value, oldValue) {
+        //请求数据
+        if (value === 'month') {
+          this.getMonthData()
+        } else if (value === 'year') {
+          this.getYearData()
+        } else if (value === 'total') {
+          this.getTotalData()
+        }
+        this.hasNext = true;
+        this.page_token = 1
+        this.monthDateRange = ""
+      }
     },
     created() {
       this.init(this.container);
-
-      //todo
     },
     methods: {
       onJfbLoad(options) {
+        if (this.tab === 'month') {
+          this.getMonthData()
+        } else if (this.tab === 'year') {
+          this.getYearData()
+        } else if (this.tab === 'total') {
+          this.getTotalData()
+        }
+      },
+      getMonthData() {
+        let data = {}
+        if (this.monthDateRange) {
+          data.year = this.getYearAndMonth(this.monthDateRange).year
+          data.month = this.getYearAndMonth(this.monthDateRange).month
+        }
+        jfbRootExec('getMonthSavingDetail', {
+          vm: this,
+          data: data,
+        }).then(res => {
+          const textColor = '#999'
+          const seriesData = res.record_months.map(item => {
+            return item.value
+          })
+          const xAxisList = res.record_months.map(item => {
+            return item.label
+          })
+          this.option = {
 
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
+            tooltip: {
+              trigger: 'axis'
+            },
+            grid: {
+              top: '15%',
+              left: '15%',
+              right: '15%',
+              bottom: '15%',
+              containLabel: false
+            },
+            xAxis: {
+              type: 'category',
+              data: xAxisList,
+              axisLabel: {
+                // 坐标轴字体颜色
+                color: textColor,
+                fontSize: 10,
+              },
+              axisLine: {
+                show: false
+              },
+              axisLine: {
+                show: false,
+              },
+              axisTick: {       //y轴刻度线
+                show: false
+              },
+              splitLine: {
+                // 网格
+                show: false
+              },
+              boundaryGap: false
+            },
+            yAxis: {
+              type: 'value',
+              min: 0,
+              nameTextStyle: {
+                color: textColor,
+                fontSize: 10,
+                padding: [0, 0, 0, 80]
+              },
+              axisLabel: {
+                // 坐标轴字体颜色
+                color: textColor,
+                fontSize: 10
+              },
+              axisLine: {
+                show: false,
+              },
+              axisTick: {       //y轴刻度线
+                show: false
+              },
+              splitLine: {
+                // 网格
+                show: true,
+                lineStyle: {
+                  color: '#CCCCCC',
+                  type: 'dashed'
+                }
+              }
+            },
 
-        // }).then().catch()
+            series: [
+              {
+                name: '成绩（分）',
+                type: 'line',
+                symbol: 'circle',
+                symbolSize: 10,
+                smooth: true,
+                z: 1,
+                itemStyle: {
+                  color: '#5487FF'
+                },
+                lineStyle: {
+                  color: '#5487FF'
+                },
+                data: seriesData
+              }
+            ]
+          };
+          this.monthDateRange = res.date_range
+          this.saveAmount = res.save_amount
+          this.hasNext = res.next_page_token !== "";
+          if (this.page_token === 1) {
+            this.productList = res.list
+          } else {
+            this.productList = this.productList.concat(res.list);
+          }
+        })
+      },
+      getYearData() {
+        jfbRootExec('getYearSavingDetail', {
+          vm: this,
+          data: {},
+        }).then(res => {
+          // 最大值
+          let max = res.total_amount / 100;
+          // 数量
+          let value = res.save_amount / 100;
+          // 计算
+          let rate = Math.round((value * 1000) / max);
+          this.option = {
+            backgroundColor: '#fff', // 设置图表区域的背景颜色
+            borderRadius: 10, // 设置图表区域的圆角
+            title: [
+              {
+                text: '{a|周期已省}\n{b|' + rate + '}', // 显示标题
+                show: true, // 是否显示
+                x: 'center', // x轴位置
+                y: 'center', // y轴位置
+                textStyle: { // 样式配置
+                  rich: {
+                    a: {
+                      fontSize: 16,
+                      fontWeight: 'normal',
+                      color: '#666',
+                      padding: [0, 0, 10, 0], // 边距
+                    },
+                    b: {
+                      fontSize: 40,
+                      fontWeight: 700,
+                      color: '#000'
+                    },
+                  },
+                },
+              },
+            ],
+            polar: {
+              center: ['50%', '50%'],
+              radius: ['60%', '75%'],
+            },
+            angleAxis: {
+              max: max,
+              startAngle: 90, // 开始的角度  
+              show: false,
+            },
+            radiusAxis: {
+              type: 'category',
+              show: true,
+              axisLabel: {
+                show: false, // 是否显示标签
+              },
+              axisLine: {
+                show: false, // 是否显示轴线
+              },
+              axisTick: {
+                show: false, // 是否显示刻度
+              },
+            },
+            series: [
+              {
+                name: '',
+                type: 'bar',
+                roundCap: true,
+                showBackground: true,
+                backgroundStyle: {
+                  color: '#f5f5f5',
+                },
+                data: [value],
+                coordinateSystem: 'polar',
+                itemStyle: {
+                  normal: {
+                    color: this.mainColor,
+                  },
+                },
+              },
+            ],
+          };
+          this.yearDateRange = res.date_range
+          this.saveAmount = res.save_amount
+          this.hasNext = res.next_page_token !== "";
+          if (this.page_token === 1) {
+            this.productList = res.list
+          } else {
+            this.productList = this.productList.concat(res.list);
+          }
+        })
+      },
+      getTotalData() {
+        jfbRootExec('getTotalSavingDetail', {
+          vm: this,
+          data: {},
+        }).then(res => {
+          let max = res.total_amount / 100;
+          // 数量
+          let value = res.save_amount / 100;
+          // 计算
+          let rate = Math.round((value * 1000) / max);
+          this.option = {
+            backgroundColor: '#fff', // 设置图表区域的背景颜色
+            borderRadius: 10, // 设置图表区域的圆角
+            title: [
+              {
+                text: '{a|周期已省}\n{b|' + rate + '}', // 显示标题
+                show: true, // 是否显示
+                x: 'center', // x轴位置
+                y: 'center', // y轴位置
+                textStyle: { // 样式配置
+                  rich: {
+                    a: {
+                      fontSize: 16,
+                      fontWeight: 'normal',
+                      color: '#666',
+                      padding: [0, 0, 10, 0], // 边距
+                    },
+                    b: {
+                      fontSize: 40,
+                      fontWeight: 700,
+                      color: '#000'
+                    },
+                  },
+                },
+              },
+            ],
+            polar: {
+              center: ['50%', '50%'],
+              radius: ['60%', '75%'],
+            },
+            angleAxis: {
+              max: max,
+              startAngle: 90, // 开始的角度  
+              show: false,
+            },
+            radiusAxis: {
+              type: 'category',
+              show: true,
+              axisLabel: {
+                show: false, // 是否显示标签
+              },
+              axisLine: {
+                show: false, // 是否显示轴线
+              },
+              axisTick: {
+                show: false, // 是否显示刻度
+              },
+            },
+            series: [
+              {
+                name: '',
+                type: 'bar',
+                roundCap: true,
+                showBackground: true,
+                backgroundStyle: {
+                  color: '#f5f5f5',
+                },
+                data: [value],
+                coordinateSystem: 'polar',
+                itemStyle: {
+                  normal: {
+                    color: this.mainColor,
+                  },
+                },
+              },
+            ],
+          };
+          this.totalDateRange = res.date_range
+          this.saveAmount = res.save_amount
+          this.hasNext = res.next_page_token !== "";
+          if (this.page_token === 1) {
+            this.productList = res.list
+          } else {
+            this.productList = this.productList.concat(res.list);
+          }
+        })
       },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
+        //标题
+        this.titleBgc = getContainerPropsValue(container, 'content.titleBgc', '#ffff');
+        this.titlePadding = getContainerPropsValue(container, 'content.titlePadding', 20);
+        this.tabPadding = getContainerPropsValue(container, 'content.tabPadding', { top: 40, right: 0, bottom: 40, left: 0 });
+        this.titleColor = getContainerPropsValue(container, 'content.titleColor', '#666');
+        this.titleActColor = getContainerPropsValue(container, 'content.titleActColor', this.mainColor);
+      },
+      switchTab(i) {
+        this.tab = this.tabs[i].value;
+        this.tabIndex = i;
+      },
+      getYearAndMonth(dateStr) {
+        // 将输入的日期字符串转换为Date对象
+        const date = new Date(dateStr.replace("年", "-").replace("月", "-01"));
 
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+        // 获取年份和月份
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2);
 
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
+        return {
+          year: year,
+          month: month
+        };
+      },
+      formatDate(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2);
+        return `${year}年${month}月`;
+      },
+      handleLastMonth() {
+        const dateRange = new Date(this.monthDateRange.replace("年", "-").replace("月", "-01"));
+        // 获取上一个月的日期范围
+        const previousMonth = new Date(dateRange);
+        previousMonth.setMonth(dateRange.getMonth() - 1);
+        const previousMonthStart = new Date(previousMonth.getFullYear(), previousMonth.getMonth(), 1);
+        const previousMonthEnd = new Date(previousMonth.getFullYear(), previousMonth.getMonth() + 1, 0);
+        this.monthDateRange = this.formatDate(previousMonthStart)
+        this.getMonthData()
+      },
+      handleNextMonth() {
+        const dateRange = new Date(this.monthDateRange.replace("年", "-").replace("月", "-01"));
+        // 获取下一个月的日期范围
+        const nextMonth = new Date(dateRange);
+        nextMonth.setMonth(dateRange.getMonth() + 1);
+        const nextMonthStart = new Date(nextMonth.getFullYear(), nextMonth.getMonth(), 1);
+        const nextMonthEnd = new Date(nextMonth.getFullYear(), nextMonth.getMonth() + 1, 0);
+        this.monthDateRange = this.formatDate(nextMonthEnd)
+        this.getMonthData()
       },
       onJfbScroll(options) {
         console.log('event.onJfbScroll', options)
       },
       onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
+        if (this.hasNext) {
+          this.page_token = this.next_page_token;
+          if (this.tab === 'month') {
+            this.getMonthData()
+          } else if (this.tab === 'year') {
+            this.getYearData()
+          } else if (this.tab === 'total') {
+            this.getTotalData()
+          }
+        }
       },
       onJfbShow(options) {
         console.log('event.onJfbShow', options)
@@ -104,8 +546,130 @@
   @import "./JfbBaseSavingDetailLess.less";
 
   .jfb-base-saving-detail {
-    &__body{
+    &__body {
+      .tab_list {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        white-space: nowrap;
+
+        .tab_item {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          color: #666666;
+          font-size: unit(32, rpx);
+          white-space: nowrap;
+        }
+
+        .check {
+          width: 60rpx;
+          height: 6rpx;
+          margin-top: 12rpx;
+        }
+      }
+
+      &-cycle {
+        font-size: 32rpx;
+        color: #999;
+        text-align: center;
+        padding-top: 40rpx;
+      }
+
+      &-block {
+        height: 40rpx;
+        width: 100%;
+      }
+
+      &-month {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        padding: 40rpx 24rpx 20rpx 24rpx;
+
+        &>view:first-child,
+        &>view:last-child {
+          font-size: 28rpx;
+          color: #999999;
+          padding: 12rpx 60rpx;
+          background: #F5F5F5;
+          border-radius: 40rpx;
+        }
+
+        &>view:nth-child(2) {
+          font-size: 32rpx;
+          color: #999;
+        }
+      }
+
+      &-product {
+        border-radius: 20rpx;
+        background: #fff;
+        margin: 20rpx;
 
+        &-title {
+          font-size: 28rpx;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 24rpx;
+          border-bottom: 2rpx solid #eee;
+
+          &>view:first-child {
+            color: #333;
+            font-weight: 500;
+          }
+
+          &>view:nth-child(2) {
+            color: #999999;
+            font-size: 24rpx;
+          }
+        }
+
+        &-item {
+          display: flex;
+          padding: 26rpx;
+          border-bottom: 2rpx solid #eee;
+
+          &>image {
+            width: 200rpx;
+            height: 200rpx;
+            margin-right: 32rpx;
+            flex-shrink: 0;
+
+          }
+
+          &-info {
+            &-name {
+              font-size: 28rpx;
+              color: #333333;
+              .uni-max-cut(2, 80);
+            }
+
+            &-time {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              font-size: 24rpx;
+              color: #999999;
+              margin: 40rpx 0 12rpx 0;
+            }
+
+            &-price {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              font-size: 24rpx;
+
+              &>view:nth-child(2) {
+                font-weight: 500;
+              }
+            }
+          }
+        }
+      }
     }
   }
-</style>
+</style>