jufubao-base 1.0.243-beta201 → 1.0.243-beta202

package/src/components/JfbBaseSavingDetail/JfbBaseSavingDetail.vue

@@ -0,0 +1,724 @@
+<template>
+  <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-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-saving-detail__body">
+      <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 class="monthDisabled" v-if="disabledMonth">下一月</view>
+            <view v-else @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> {{tab==='month'? `${getYearAndMonth(monthDateRange).month}月结算明细` :'购物'}}</view>
+          <view>已省：{{getAmout(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}">{{getAmout(item.saving_amount)}}</view>
+              </view>
+            </view>
+          </view> 
+        </view>
+        <XdNoData v-else></XdNoData>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdNoData from "@/components/XdNoData/XdNoData";
+  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";
+  import getServiceUrl from "@/common/getServiceUrl";
+
+  export default {
+    name: "JfbBaseSavingDetail",
+    components: {
+      XdFontIcon,
+      echarts,
+      XdNoData
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBaseSavingDetailMixin
+    ],
+    data() {
+      return {
+        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 }),
+        }
+      },
+      disabledMonth() {
+        let month = new Date().getMonth() + 1
+        return this.getYearAndMonth(this.monthDateRange).month == month
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+      tab(value, oldValue) {
+        //请求数据
+        this.hasNext = true;
+        this.page_token = 1
+        if (value === 'month') {
+          this.getMonthData()
+        } else if (value === 'year') {
+          this.getYearData()
+        } else if (value === 'total') {
+          this.getTotalData()
+        }
+        this.monthDateRange = ""
+      }
+    },
+    created() {
+      this.init(this.container);
+    },
+    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 = {
+          page_size: 10,
+          page_token: this.page_token,
+        }
+        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 => {
+          let list = res.list.map(item => {
+            item["order_time"] = this.$xdUniHelper.getDate(
+              item["order_time"] * 1000
+            ).fullTime;
+            item.product_image = getServiceUrl(item.product_image)
+            return item;
+          })
+          const textColor = '#999'
+          const seriesData = res.record_months.map(item => {
+            return this.getAmout(item.value)
+          })
+          const xAxisList = res.record_months.map(item => {
+            return item.label
+          })
+          this.option = {
+
+            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'
+                }
+              }
+            },
+
+            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
+          if (this.page_token === 1) {
+            this.productList = list
+          } else {
+            this.productList = this.productList.concat(list);
+          }
+          this.next_page_token = res.next_page_token
+          this.hasNext = res.next_page_token !== "";
+        })
+      },
+      getYearData() {
+        jfbRootExec('getYearSavingDetail', {
+          vm: this,
+          data: {
+            page_size: 10,
+            page_token: this.page_token,
+          },
+        }).then(res => {
+          let list = res.list.map(item => {
+            item["order_time"] = this.$xdUniHelper.getDate(
+              item["order_time"] * 1000
+            ).fullTime;
+            item.product_image = getServiceUrl(item.product_image)
+            return item;
+          })
+          // 最大值
+          let max = this.getAmout(res.total_amount);
+          // 数量
+          let value = this.getAmout(res.save_amount);
+          this.option = {
+            backgroundColor: '#fff', // 设置图表区域的背景颜色
+            borderRadius: 10, // 设置图表区域的圆角
+            title: [
+              {
+                text: '{a|周期已省}\n{b|' + value + '}', // 显示标题
+                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
+          if (this.page_token === 1) {
+            this.productList = list
+          } else {
+            this.productList = this.productList.concat(list);
+          }
+          this.next_page_token = res.next_page_token
+          this.hasNext = res.next_page_token !== "";
+        })
+      },
+      getTotalData() {
+        jfbRootExec('getTotalSavingDetail', {
+          vm: this,
+          data: {
+            page_size: 10,
+            page_token: this.page_token,
+          },
+        }).then(res => {
+          let list = res.list.map(item => {
+            item["order_time"] = this.$xdUniHelper.getDate(
+              item["order_time"] * 1000
+            ).fullTime;
+            item.product_image = getServiceUrl(item.product_image)
+            return item;
+          })
+          let max = this.getAmout(res.total_amount);
+          // 数量
+          let value = this.getAmout(res.save_amount);
+          this.option = {
+            backgroundColor: '#fff', // 设置图表区域的背景颜色
+            borderRadius: 10, // 设置图表区域的圆角
+            title: [
+              {
+                text: '{a|周期已省}\n{b|' + value + '}', // 显示标题
+                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
+          if (this.page_token === 1) {
+            this.productList = list
+          } else {
+            this.productList = this.productList.concat(list);
+          }
+          this.next_page_token = res.next_page_token
+          this.hasNext = res.next_page_token !== "";
+        })
+      },
+      /**
+       * @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;
+      },
+      getAmout(amount) {
+        return this.$xdUniHelper.divisionFloatNumber(amount, 100) || 0
+      },
+      getYearAndMonth(dateStr) {
+        // 将输入的日期字符串转换为Date对象
+        const date = new Date(dateStr.replace("年", "-").replace("月", "-01"));
+
+        // 获取年份和月份
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1);
+
+        return {
+          year: year,
+          month: month
+        };
+      },
+      formatDate(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1);
+        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) {
+        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)
+      },
+      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 "./JfbBaseSavingDetailLess.less";
+
+  .jfb-base-saving-detail {
+    &__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 {
+            flex: 1;
+
+            &-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;
+              }
+            }
+          }
+        }
+      }
+
+      .monthDisabled {
+        background: #FCFCFC !important;
+        color: #EEEEEE !important;
+      }
+    }
+  }
+</style>