jufubao-base 1.0.239-beta2 → 1.0.239

package/src/components/JfbBaseSavingDetail/JfbBaseSavingDetail.vue

@@ -1,710 +0,0 @@
-<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) {
-        //请求数据
-        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);
-    },
-    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 => {
-          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
-          this.hasNext = res.next_page_token !== "";
-          if (this.page_token === 1) {
-            this.productList = list
-          } else {
-            this.productList = this.productList.concat(list);
-          }
-        })
-      },
-      getYearData() {
-        jfbRootExec('getYearSavingDetail', {
-          vm: this,
-          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;
-          })
-          // 最大值
-          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
-          this.hasNext = res.next_page_token !== "";
-          if (this.page_token === 1) {
-            this.productList = list
-          } else {
-            this.productList = this.productList.concat(list);
-          }
-        })
-      },
-      getTotalData() {
-        jfbRootExec('getTotalSavingDetail', {
-          vm: this,
-          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;
-          })
-          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
-          this.hasNext = res.next_page_token !== "";
-          if (this.page_token === 1) {
-            this.productList = list
-          } else {
-            this.productList = this.productList.concat(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;
-      },
-      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>