商户时间段选择

src/App.vue

@@ -9,7 +9,6 @@ if (localStorage.getItem("TRADE_USER")) {
   let userInfo = JSON.parse(localStorage.getItem('TRADE_USER'))
   areaStroe.changeUserInfo(userInfo)
   let { area_code, street_code } = userInfo.user
-  console.log(area_code,45454)
   areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
 
 }

src/components/areaList.vue

@@ -2,7 +2,7 @@
     <Transition>
         <div class="address" v-if="props.choseArea">
 
-            <div class="address-li" @click="choseAreaFn">龙马谭区 </div>
+            <div class="address-li" @click="choseAreaFn">泸县 </div>
 
             <div class="address-li" @click="choseTownFn(item.code, item.name)" v-for="( item, index ) in areaList ">{{
                 item.name }}
@@ -12,18 +12,14 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, onMounted, reactive } from "vue"
-import { useRouter } from 'vue-router'
+import { defineProps, defineEmits, onMounted, reactive,watch } from "vue"
+import { useRouter,useRoute } from 'vue-router'
 import { areaObj } from '@/store/index.js'
 import axios from "axios"
+const route=useRoute
 
 let areaStore = areaObj()
 
-
-
-
-
-
 const router = useRouter()
 const emit = defineEmits(['offAreaList'])
 const props = defineProps({

src/components/datePicker.vue

@@ -12,9 +12,25 @@
 import { ref, reactive } from 'vue'
 import localeZH from 'element-plus/es/locale/lang/zh-cn'
 
-const date = ref(["2023-12-13T16:00:00.000Z",
-    "2024-01-16T16:00:00.000Z"])
-const changeDate = () => {
+import { areaObj } from "@/store/index.js"
+const areaStore = areaObj()
+
+
+// 将时间对象转化为年月日
+const getTime = (time) => {
+    var date =time
+    var year = date.getFullYear();
+    var month = (date.getMonth() + 1).toString().padStart(2, '0');
+    var day = date.getDate().toString().padStart(2, '0');
+
+    var formattedDate = year + '-' + month + '-' + day;
+
+    return formattedDate
+}
+
+const date = ref([areaStore.time[0], areaStore.time[1]])
+const changeDate = (e) => {
+    areaStore.changeTime([getTime(e[0]),getTime(e[1])])
 
 }
 

src/components/header.vue

@@ -61,12 +61,12 @@
                 <span></span>
                 <span></span>
             </div>
-            <div class="rigth-li" id="time">15:33:26</div>
-            <div class="right-line"> <span></span>
+            <div class="rigth-li" id="time" v-show="route.path != '/storeLogin'">15:33:26</div>
+            <div class="right-line" v-if="route.path != '/storeLogin'"> <span></span>
                 <span></span>
             </div>
-            <div class="rigth-li" id="days">2023-11-28</div>
-            <div class="right-line">
+            <div class="rigth-li" id="days" v-show="route.path != '/storeLogin'">2023-11-28</div>
+            <div class="right-line" v-if="route.path != '/storeLogin'">
                 <span></span>
                 <span></span>
             </div>

src/store/index.js

@@ -2,6 +2,38 @@ import {
     defineStore
 } from 'pinia'
 
+const lastMouth = () => {
+    var thirtyDaysAgo = new Date();
+    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30); // 设置为30天前的日期
+
+    var year = thirtyDaysAgo.getFullYear();
+    var month = thirtyDaysAgo.getMonth() + 1; // 月份从0开始，需要加1
+    var day = thirtyDaysAgo.getDate();
+
+    // 格式化为字符串，如果需要补0可以使用padStart函数
+    var formattedDate = year + '-' + month.toString().padStart(2, '0') + '-' + day.toString().padStart(2, '0');
+
+
+    return formattedDate
+
+}
+const now = () => {
+    // 创建一个新的Date对象，表示当前日期和时间
+    var today = new Date();
+
+    // 获取年、月、日
+    var year = today.getFullYear();
+    var month = today.getMonth() + 1; // 月份从0开始，需要加1
+    var day = today.getDate();
+
+    // 格式化为字符串
+    var formattedDate = year + "-" + month + "-" + day;
+    return formattedDate
+
+
+
+}
+
 export const areaObj = defineStore('counter', {
     state: () => ({
         userInfo: {},
@@ -11,6 +43,7 @@ export const areaObj = defineStore('counter', {
             // streetCode: 51052410
 
         },
+        time: [lastMouth(), now()],
         // 商户请求的参数
         store: {
             areaCode: "",
@@ -36,6 +69,9 @@ export const areaObj = defineStore('counter', {
             }
 
         },
+        changeTime(times) {
+            this.time = times
+        },
         storeLogin(obj) {
             this.userInfo.user = obj
         }

src/view/home.vue

@@ -1,12 +1,13 @@
 <template>
     <Header></Header>
-    <router-view></router-view>
+    <router-view :key="route.path"></router-view>
 </template>
 
 
 <script setup>
 import Header from "@/components/Header.vue"
-
+import { useRoute } from "vue-router";
+const route =useRoute()
 
 
 </script>

src/view/storeLogin.vue

@@ -148,7 +148,7 @@
 
 
 <script setup>
-import { ref, reactive, onMounted } from "vue"
+import { ref, reactive, onMounted, watch } from "vue"
 import { merchant_count_mainApi, merchant_product_rankingApi, merchant_product_visitApi, merchant_product_cartApi, } from "@/api.js"
 import { areaObj } from "../store";
 
@@ -174,7 +174,6 @@ if (areaStore.userInfo.user?.merchant) {
 
 if (userInfo.user?.merchant) {
     let { area_id, mer_id, street_id } = userInfo.user.merchant
-    console.log(area_id, 5645545)
     query = {
         areaCode: area_id,
         streetCode: street_id,
@@ -249,15 +248,20 @@ const data = reactive(
 let total1 = ''
 let total2 = ''
 let total3 = ''
+
+
+
+
+const init = () => {
     merchant_product_rankingApi(
-    { ...query, start_date: '2020-12-18', end_date: '2023-12-18' }
+        { ...query, start_date: areaStore.time[0], end_date: areaStore.time[1] }
     ).then(res => {
         total1 = res.data.totalCount
         addData1(res.data.list)
     })
 
     merchant_product_visitApi(
-    { ...query, start_date: '2020-12-18', end_date: '2023-12-18' }
+        { ...query, start_date: areaStore.time[0], end_date: areaStore.time[1] }
 
     ).then(res => {
         total2 = res.data.totalCount
@@ -265,14 +269,18 @@ merchant_product_visitApi(
 
     })
     merchant_product_cartApi(
-    { ...query, start_date: '2020-01-01', end_date: '2023-12-18' }
+        { ...query, start_date: areaStore.time[0], end_date: areaStore.time[1] }
     ).then(res => {
         total3 = res.data.totalCount
         addData3(res.data.list)
     })
+}
 
 
+init()
+
 const addData1 = (data) => {
+    config1.data.splice(0,99999999)
     data.forEach((item, i) => {
         config1.data.push(
             [
@@ -291,6 +299,8 @@ const addData1 = (data) => {
 
 }
 const addData2 = (data) => {
+    config2.data.splice(0,99999999)
+
     data.forEach((item, i) => {
         config2.data.push(
             [
@@ -309,6 +319,8 @@ const addData2 = (data) => {
 
 }
 const addData3 = (data) => {
+    
+    config3.data.splice(0,99999999)
     data.forEach((item, i) => {
         config3.data.push(
             [
@@ -337,8 +349,17 @@ merchant_count_mainApi(
     }
 })
 
+watch(
+    () => areaStore.time,
+    (value, oldValue) => {
+      init()
 
+    }, {
+    deep: true,
+    immediate: true
+}
 
+)
 onMounted(() => {
 
 

src/view/townDetail.vue

@@ -8,13 +8,13 @@
 
         <div class="top box">
             <div class="l">
-                <topLeft :code="route.query.code"></topLeft>
+                <topLeft :code="route.query.code" :key="route.query.code"></topLeft>
             </div>
             <div class="c" id="">
-                <topCenter :code="route.query.code"></topCenter>
+                <topCenter :code="route.query.code" :key="route.query.code"></topCenter>
             </div>
             <div class="r">
-                <topRight :code="route.query.code"></topRight>
+                <topRight :code="route.query.code" :key="route.query.code"></topRight>
             </div>
 
 
@@ -22,13 +22,13 @@
         <div class="bottom box">
             <div class="l">
 
-                <bottomleft :code="route.query.code"></bottomleft>
+                <bottomleft :code="route.query.code" :key="route.query.code"></bottomleft>
             </div>
             <div class="c">
-                <bottomCenter></bottomCenter>
+                <bottomCenter :key="route.query.code"></bottomCenter>
             </div>
             <div class="r">
-                <bottomRight :code="route.query.code"></bottomRight>
+                <bottomRight :code="route.query.code" :key="route.query.code"></bottomRight>
 
             </div>
         </div>