fix(all):修改样式

src/api/client/home.js

@@ -20,7 +20,6 @@ export function getCurrentLocation(data) {
  * @returns
  */
 export function getHomePageApi(data) {
-
   return request({
     url: '/maintain/customer/index',
     method: 'get',
@@ -44,10 +43,10 @@ export function getSwiperListApi() {
     },
   });
 }
+
 /**
  *@description 获取首页分类的数据
  */
-
 export function getCategoriesApi() {
   return request({
     url: '/maintain/categories',

src/components/commentList/index.vue

@@ -14,6 +14,13 @@
           <u--text text="uView UI" type="primary" bold size="17"></u--text>
           <u--text margin="0 0 8px 0" :text="item.textContent"></u--text>
           <u-album :urls="urls2"></u-album>
+          <view>
+            <text class="iconfont icon-thumb-up" style="font-size: 48rpx; padding: 20rpx 0"></text>
+            <text
+              class="iconfont icon-heart"
+              style="font-size: 48rpx; padding: 20rpx 0; margin-left: 20rpx"
+            ></text>
+          </view>
         </view>
       </view>
     </view>

src/design/common.css

@@ -1,504 +1,83 @@
-/* ==================
-     flex弹性布局
- ==================== */
-
-.chelvc-flex {
+/* ======================================
+               flex弹性布局
+ ====================================== */
+.fl-flex {
   display: flex;
 }
 
-.chelvc-flex-item {
+.fl-flex-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.chelvc-basis-xs {
-  flex-basis: 20%;
-}
-
-.chelvc-basis-sm {
-  flex-basis: 40%;
-}
-
-.chelvc-basis-df {
-  flex-basis: 50%;
-}
-
-.chelvc-basis-lg {
-  flex-basis: 60%;
-}
-
-.chelvc-basis-xl {
-  flex-basis: 80%;
-}
-
-.chelvc-flex-sub {
-  flex: 1;
-}
-
-.chelvc-flex-twice {
-  flex: 2;
-}
-
-.chelvc-flex-treble {
-  flex: 3;
-}
-
-.chelvc-flex-direction {
+.fl-flex-direction {
   flex-direction: column;
 }
 
-.chelvc-flex-wrap {
+.fl-flex-wrap {
   flex-wrap: wrap;
 }
 
-.chelvc-align-start {
+.fl-align-start {
   align-items: flex-start;
 }
 
-.chelvc-align-end {
+.fl-align-end {
   align-items: flex-end;
 }
 
-.chelvc-chelvc-align-center {
+.fl-align-center {
   align-items: center;
 }
 
-.chelvc-align-stretch {
+.fl-align-stretch {
   align-items: stretch;
 }
 
-.chelvc-self-start {
+.fl-self-start {
   align-self: flex-start;
 }
 
-.chelvc-self-center {
-  align-self: flex-center;
+.fl-self-center {
+  align-self: center;
 }
 
-.chelvc-self-end {
+.fl-self-end {
   align-self: flex-end;
 }
 
-.chelvc-self-stretch {
+.fl-self-stretch {
   align-self: stretch;
 }
 
-.chelvc-align-stretch {
+.fl-align-stretch {
   align-items: stretch;
 }
 
-.chelvc-justify-start {
+.fl-justify-start {
   justify-content: flex-start;
 }
 
-.chelvc-justify-end {
+.fl-justify-end {
   justify-content: flex-end;
 }
 
-.chelvc-justify-center {
+.fl-justify-center {
   justify-content: center;
 }
 
-.chelvc-justify-between {
+.fl-justify-between {
   justify-content: space-between;
 }
 
-.chelvc-justify-around {
+.fl-justify-around {
   justify-content: space-around;
 }
 
-/* ==================
-     外边距
- ==================== */
-
-.margin-0 {
-  margin: 0;
-}
-
-.margin-xs {
-  margin: 10upx;
-}
-
-.margin-sm {
-  margin: 20upx;
-}
-
-.margin {
-  margin: 30upx;
-}
-
-.margin-lg {
-  margin: 40upx;
-}
-
-.margin-xl {
-  margin: 50upx;
-}
-
-.margin-top-xs {
-  margin-top: 10upx;
-}
-
-.margin-top-sm {
-  margin-top: 20upx;
-}
-
-.margin-top {
-  margin-top: 30upx;
-}
-
-.margin-top-lg {
-  margin-top: 40upx;
-}
-
-.margin-top-xl {
-  margin-top: 50upx;
-}
-
-.margin-right-xs {
-  margin-right: 10upx;
-}
-
-.margin-right-sm {
-  margin-right: 20upx;
-}
-
-.margin-right {
-  margin-right: 30upx;
-}
-
-.margin-right-lg {
-  margin-right: 40upx;
-}
-
-.margin-right-xl {
-  margin-right: 50upx;
-}
-
-.margin-bottom-xs {
-  margin-bottom: 10upx;
-}
-
-.margin-bottom-sm {
-  margin-bottom: 20upx;
-}
-
-.margin-bottom {
-  margin-bottom: 30upx;
-}
-
-.margin-bottom-lg {
-  margin-bottom: 40upx;
-}
-
-.margin-bottom-xl {
-  margin-bottom: 50upx;
-}
-
-.margin-bottom-xxl {
-  margin-bottom: 140upx;
-}
-
-.margin-left-xs {
-  margin-left: 10upx;
-}
-
-.margin-left-sm {
-  margin-left: 20upx;
-}
-
-.margin-left {
-  margin-left: 30upx;
-}
-
-.margin-left-lg {
-  margin-left: 40upx;
-}
-
-.margin-left-xl {
-  margin-left: 50upx;
-}
-
-.margin-lr-xs {
-  margin-left: 10upx;
-  margin-right: 10upx;
-}
-
-.margin-lr-sm {
-  margin-left: 20upx;
-  margin-right: 20upx;
-}
-
-.margin-lr {
-  margin-left: 30upx;
-  margin-right: 30upx;
-}
-
-.margin-lr-lg {
-  margin-left: 40upx;
-  margin-right: 40upx;
-}
-
-.margin-lr-xl {
-  margin-left: 50upx;
-  margin-right: 50upx;
-}
-
-.margin-tb-xs {
-  margin-top: 10upx;
-  margin-bottom: 10upx;
-}
-
-.margin-tb-sm {
-  margin-top: 20upx;
-  margin-bottom: 20upx;
-}
-
-.margin-tb {
-  margin-top: 30upx;
-  margin-bottom: 30upx;
-}
-
-.margin-tb-lg {
-  margin-top: 40upx;
-  margin-bottom: 40upx;
-}
-
-.margin-tb-xl {
-  margin-top: 50upx;
-  margin-bottom: 50upx;
-}
-
-/* ==================
-     内边距
- ==================== */
-
-.padding-0 {
-  padding: 0;
-}
-
-.padding-xs {
-  padding: 10upx;
-}
-
-.padding-sm {
-  padding: 20upx;
-}
-
-.padding {
-  padding: 30upx;
-}
-
-.padding-lg {
-  padding: 40upx;
-}
-
-.padding-xl {
-  padding: 50upx;
-}
-
-.padding-top-xs {
-  padding-top: 10upx;
-}
-
-.padding-top-sm {
-  padding-top: 20upx;
-}
-
-.padding-top {
-  padding-top: 30upx;
-}
-
-.padding-top-lg {
-  padding-top: 40upx;
-}
-
-.padding-top-xl {
-  padding-top: 50upx;
-}
-
-.padding-right-xs {
-  padding-right: 10upx;
-}
-
-.padding-right-sm {
-  padding-right: 20upx;
-}
-
-.padding-right {
-  padding-right: 30upx;
-}
-
-.padding-right-lg {
-  padding-right: 40upx;
-}
-
-.padding-right-xl {
-  padding-right: 50upx;
-}
-
-.padding-bottom-xs {
-  padding-bottom: 10upx;
-}
-
-.padding-bottom-sm {
-  padding-bottom: 20upx;
-}
-
-.padding-bottom {
-  padding-bottom: 30upx;
-}
-
-.padding-bottom-lg {
-  padding-bottom: 40upx;
-}
-
-.padding-bottom-xl {
-  padding-bottom: 50upx;
-}
-
-.padding-left-xs {
-  padding-left: 10upx;
-}
-
-.padding-left-sm {
-  padding-left: 20upx;
-}
-
-.padding-left {
-  padding-left: 30upx;
-}
-
-.padding-left-lg {
-  padding-left: 40upx;
-}
-
-.padding-left-xl {
-  padding-left: 50upx;
-}
-
-.padding-left-xxl {
-  padding-left: 80upx;
-}
-
-.padding-lr-xs {
-  padding-left: 10upx;
-  padding-right: 10upx;
-}
-
-.padding-lr-sm {
-  padding-left: 20upx;
-  padding-right: 20upx;
-}
-
-.padding-lr {
-  padding-left: 30upx;
-  padding-right: 30upx;
-}
-
-.padding-lr-lg {
-  padding-left: 40upx;
-  padding-right: 40upx;
-}
-
-.padding-lr-xl {
-  padding-left: 50upx;
-  padding-right: 50upx;
-}
-
-.padding-tb-xs {
-  padding-top: 10upx;
-  padding-bottom: 10upx;
-}
-
-.padding-tb-sm {
-  padding-top: 20upx;
-  padding-bottom: 20upx;
-}
-
-.padding-tb {
-  padding-top: 30upx;
-  padding-bottom: 30upx;
-}
-
-.padding-tb-lg {
-  padding-top: 40upx;
-  padding-bottom: 40upx;
-}
-
-.padding-tb-xl {
-  padding-top: 50upx;
-  padding-bottom: 50upx;
-}
-
-/* ==================
-     文字
- ==================== */
-
-.text-xs {
-  font-size: 20upx;
-}
-
-.text-22 {
-  font-size: 22rpx;
-}
-
-.text-sm {
-  font-size: 24upx;
-}
-
-.text-df {
-  font-size: 28upx;
-}
-
-.text-lg {
-  font-size: 32upx;
-}
-
-.text-xl {
-  font-size: 36upx;
-}
-
-.text-xxl {
-  font-size: 44upx;
-}
-
-.text-xxxl {
-  font-size: 52upx;
-}
-
-.text-sl {
-  font-size: 80upx;
-}
-
-.text-xsl {
-  font-size: 120upx;
-}
-
-.text-Abc {
-  text-transform: Capitalize;
-}
-
-.text-ABC {
-  text-transform: Uppercase;
-}
-
-.text-abc {
-  text-transform: Lowercase;
-}
-
-.text-price::before {
-  content: '¥';
-  font-size: 80%;
-  margin-right: 4upx;
-}
-
-.text-cut {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
+/* =================================
+               文字
+ ================================== */
 
 .text-bold {
   font-weight: bold;
@@ -508,10 +87,6 @@
   text-align: center;
 }
 
-.text-content {
-  line-height: 1.6;
-}
-
 .text-left {
   text-align: left;
 }
@@ -520,92 +95,10 @@
   text-align: right;
 }
 
-.text-red,
-.line-red,
-.lines-red {
-  color: #e54d42;
-}
-
-.text-orange,
-.line-orange,
-.lines-orange {
-  color: #f37b1d;
-}
-
-.text-yellow,
-.line-yellow,
-.lines-yellow {
-  color: #fbbd08;
-}
-
-.text-olive,
-.line-olive,
-.lines-olive {
-  color: #8dc63f;
-}
-
-.text-green,
-.line-green,
-.lines-green {
-  color: #39b54a;
-}
-
-.text-cyan,
-.line-cyan,
-.lines-cyan {
-  color: #1cbbb4;
-}
-
-.text-blue,
-.line-blue,
-.lines-blue {
-  color: #0081ff;
-}
-
-.text-purple,
-.line-purple,
-.lines-purple {
-  color: #6739b6;
-}
-
-.text-mauve,
-.line-mauve,
-.lines-mauve {
-  color: #9c26b0;
-}
-
-.text-pink,
-.line-pink,
-.lines-pink {
-  color: #e03997;
-}
-
-.text-brown,
-.line-brown,
-.lines-brown {
-  color: #a5673f;
-}
-
-.text-grey,
-.line-grey,
-.lines-grey {
-  color: #8799a3;
-}
-
-.text-gray,
-.line-gray,
-.lines-gray {
-  color: #aaaaaa;
-}
-
-.text-black,
-.line-black,
-.lines-black {
+.text-black {
   color: #333333;
 }
 
-.text-white,
-.line-white,
-.lines-white {
+.text-white {
   color: #ffffff;
 }

src/design/index.scss

@@ -114,74 +114,3 @@
     }
   }
 }
-
-/*==================================================================
-                           弹性盒子
-  =================================================================*/
-.fl-flex {
-  display: flex;
-}
-
-.fl-flex-direction {
-  flex-direction: column;
-}
-
-.fl-flex-wrap {
-  flex-wrap: wrap;
-}
-
-.fl-align-start {
-  align-items: flex-start;
-}
-
-.fl-align-end {
-  align-items: flex-end;
-}
-
-.fl-align-center {
-  align-items: center;
-}
-
-.fl-align-stretch {
-  align-items: stretch;
-}
-
-.fl-self-start {
-  align-self: flex-start;
-}
-
-.fl-self-center {
-  align-self: center;
-}
-
-.fl-self-end {
-  align-self: flex-end;
-}
-
-.fl-self-stretch {
-  align-self: stretch;
-}
-
-.fl-align-stretch {
-  align-items: stretch;
-}
-
-.fl-justify-start {
-  justify-content: flex-start;
-}
-
-.fl-justify-end {
-  justify-content: flex-end;
-}
-
-.fl-justify-center {
-  justify-content: center;
-}
-
-.fl-justify-between {
-  justify-content: space-between;
-}
-
-.fl-justify-around {
-  justify-content: space-around;
-}

src/pages/client/clientPackage/message/LikeReply/index.vue

@@ -1,19 +1,19 @@
 <template>
   <view class="LikeReply">
-    <view class="list chelvc-flex" v-for="item in 10">
+    <view class="list fl-flex" v-for="item,index in 10" :key="index">
       <image
         src="/static/icon/QR57a.jpg"
         mode="scaleToFill"
         style="width: 100rpx; height: 100rpx"
       />
-      <view class="line chelvc-flex-sub chelvc-flex-item">
+      <view class="line chelvc-flex-sub fl-flex-item">
         <view style="font-size: 30rpx; color: #333">
-          <view class="chelvc-flex">
+          <view class="fl-flex">
             <text>yizhiyang</text>
             <u-icon name="heart-fill" color="#fd746a" size="20" />
             <text>了我的动态</text>
           </view>
-          <view class="text-xs text-gray" style="margin-top: 20rpx">2024/02/05</view>
+          <view class="f-s-20 text-gray" style="margin-top: 20rpx">2024/02/05</view>
         </view>
         <image src="/static/logo.png" mode="scaleToFill" />
       </view>

src/pages/client/clientPackage/message/benefits/index.vue

@@ -1,13 +1,13 @@
 <template>
   <view class="benefits">
-    <view class="list chelvc-flex" v-for="(item, index) in 10" :key="index">
+    <view class="list fl-flex" v-for="(item, index) in 10" :key="index">
       <view class="img">
         <image src="/static/logo.png" mode="scaleToFill" />
       </view>
       <view class="content">
-        <view class="text-df">车旅程</view>
+        <view class="f-s-28">车旅程</view>
         <view class="title">恭喜您获得8元优惠券</view>
-        <view class="chelvc-flex main">
+        <view class="fl-flex main">
           <view class="image">
             <image src="/static/logo.png" mode="scaleToFill" />
           </view>
@@ -15,10 +15,10 @@
             @双鱼女孩儿ni,您的账户于8：50已入账50个美 团币奖励，即刻进入美团币完成领取，避免失效
           </view>
         </view>
-        <view class="chelvc-flex-item time">
-          <view class="chelvc-flex">
+        <view class="fl-flex-item time">
+          <view class="fl-flex">
             <view class="dot"></view>
-            <view class="text-xs text-gray">2024/02/05</view>
+            <view class="f-s-20 text-gray">2024/02/05</view>
           </view>
           <u-icon name="more-dot-fill" color="#cbcbcb" size="20" />
         </view>

src/pages/client/clientPackage/message/evaluateNotice/index.vue

@@ -1,16 +1,16 @@
 <template>
   <view class="evaluateNotice">
     <view class="list" v-for="(item, index) in 6" :key="index">
-      <view class="chelvc-flex-item">
-        <view class="chelvc-flex">
+      <view class="fl-flex-item">
+        <view class="fl-flex">
           <image
             src="/static/icon/QR57a.jpg"
             mode="scaleToFill"
             style="width: 80rpx; height: 40px; border-radius: 40px"
           />
           <view>
-            <view class="text-bold text-df" style="margin-bottom: 10rpx">易只烊</view>
-            <view class="text-22 text-black">2024年2月5日</view>
+            <view class="text-bold f-s-28" style="margin-bottom: 10rpx">易只烊</view>
+            <view class="f-s-22 text-black">2024年2月5日</view>
           </view>
         </view>
         <u-icon name="arrow-right" color="#efefef" size="15" />
@@ -18,7 +18,7 @@
       <view class="text">
         很好的购物体验，包装很严实，发货也很的购物发货也很的购物体验，包装很严实，发货也很的购物体验，包装很严实，发货也很快。
       </view>
-      <view class="chelvc-flex img">
+      <view class="fl-flex img">
         <image
           src="https://cdn.uviewui.com/uview/album/1.jpg"
           mode="scaleToFill"

src/pages/client/clientPackage/message/orderNotice/index.vue

@@ -1,19 +1,19 @@
 <template>
   <view class="orderNotice">
     <view class="order-list" v-for="(item,index) in 5" :key="index">
-      <view class="chelvc-flex-item order-top">
-        <view class="chelvc-flex chelvc-chelvc-align-center">
+      <view class="fl-flex-item order-top">
+        <view class="fl-flex chelvc-chelvc-align-center">
           <image src="/static/logo.png" mode="scaleToFill" />
-          <view class="text-df margin-left-xs">车旅程</view>
+          <view class="f-s-28 margin-left-xs">车旅程</view>
         </view>
         <u-icon name="arrow-right" color="#cbcbcb" size="15" />
       </view>
       <view>
-        <view class="chelvc-flex-item title">
+        <view class="fl-flex-item title">
           <view class="text-bold text-black">订单支付成功</view>
-          <view class="text-xs text-gray">2024/02/05</view>
+          <view class="f-s-20 text-gray">2024/02/05</view>
         </view>
-        <view class="chelvc-flex content">
+        <view class="fl-flex content">
           <view class="img">
             <image src="/static/logo.png" mode="scaleToFill" />
           </view>

src/pages/client/clientPackage/serviceDetail/GainCoupon.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="container">
-    <view class="detail chelvc-flex">
+    <view class="detail flex">
       <text>优惠详情</text>
       <view class="closeIcon" @click="close">
         <u-icon name="close" color="#999" size="20" />
@@ -102,7 +102,7 @@
     height: 900rpx;
     box-sizing: border-box;
 
-    .chelvc-flex {
+    .flex {
       display: flex;
       align-items: center;
       justify-content: center;

src/pages/client/clientUser/cart/index.vue

@@ -7,16 +7,21 @@
     <!-- 列表1 -->
     <!-- <CartList :init_list.sync='init_list' :isAllSecect.sync='isAllSecect' @handlerIsSelectAll='handlerIsSelectAll'></CartList> -->
     <view>
-      <u-checkbox-group shape='circle' placement="column" v-model="goodsCheckbox">
-        <view class="item-box" v-for="item of init_list">
+      <u-checkbox-group shape="circle" placement="column" v-model="goodsCheckbox">
+        <view class="item-box" v-for="(item, index) of init_list" :key="index">
           <view class="item-top" @click="handlerSkipShopDetail(item)">
             <view class="top-title"> {{ item.name }} </view>
             <u-icon name="arrow-right"></u-icon>
           </view>
-          <view class="item" v-for="(itm,idx) of item.cartItems" :key='idx' @click="handlerSkipGoodsDetail(item,idx)">
+          <view
+            class="item"
+            v-for="(itm, idx) of item.cartItems"
+            :key="idx"
+            @click="handlerSkipGoodsDetail(item, idx)"
+          >
             <view class="item-l">
               <view class="l-l">
-                <u-checkbox :name='itm.id'></u-checkbox>
+                <u-checkbox :name="itm.id"></u-checkbox>
               </view>
               <view class="l-r">
                 <image class="r-img" :src="itm.goodsPic" mode="aspectFill"></image>
@@ -28,18 +33,17 @@
               </view>
             </view>
             <view class="item-r">
-              <u-number-box v-model="itm.quantity" @change="valChange(itm,$event)"></u-number-box>
+              <u-number-box v-model="itm.quantity" @change="valChange(itm, $event)"></u-number-box>
             </view>
           </view>
         </view>
       </u-checkbox-group>
     </view>
 
-
     <!-- 底部1 -->
-    <view class="bottom chelvc-flex-item">
-      <u-checkbox-group shape='circle' v-model="isAllSecect" @change='isAllChange'>
-        <u-checkbox label="全部" name='0'> </u-checkbox>
+    <view class="bottom fl-flex-item">
+      <u-checkbox-group shape="circle" v-model="isAllSecect" @change="isAllChange">
+        <u-checkbox label="全部" name="0"> </u-checkbox>
       </u-checkbox-group>
       <view class="bottom-price" v-show="!manageShow">
         <view>
@@ -47,12 +51,12 @@
           <text style="font-size: 22rpx">￥</text>
           <text style="font-size: 34rpx; font-weight: 800">{{ allPrice.sum }}</text>
         </view>
-        <view class="favorable chelvc-flex">
+        <view class="favorable fl-flex">
           <text style="margin-right: 10rpx">
             已优惠
             <text style="font-weight: 800">￥255</text>
           </text>
-          <view class="chelvc-flex" @click="instructionShow = true">
+          <view class="fl-flex" @click="instructionShow = true">
             <text style="margin-right: 5rpx">优惠明细</text>
             <u-icon name="arrow-up" color="#fe7b21" size="12" />
           </view>
@@ -63,8 +67,8 @@
       </view>
     </view>
 
-    <u-popup :show="instructionShow" mode='bottom' @close="instructionShow = false" round='20'>
-      <view class='pop-box'>
+    <u-popup :show="instructionShow" mode="bottom" @close="instructionShow = false" round="20">
+      <view class="pop-box">
         <text>出淤泥而不染，濯清涟而不妖</text>
       </view>
     </u-popup>
@@ -72,292 +76,294 @@
 </template>
 
 <script>
-  import {
-    getShoppingCart,
-    deleteCartItem,
-    editGoodsNumb,
-    generateConfirmOrder
-  } from "@/api/client/business.js"
-  export default {
-    data() {
-      return {
-        init_list: [],
-        isAllSecect: [], //checkbox是否全选
-        goodsCheckbox: [], //checkbox选择商品
-        sumPrice: 0,
-        instructionShow: false, // 底部优惠明细
+import {
+  getShoppingCart,
+  deleteCartItem,
+  editGoodsNumb,
+  generateConfirmOrder,
+} from '@/api/client/business.js';
+export default {
+  data() {
+    return {
+      init_list: [],
+      isAllSecect: [], //checkbox是否全选
+      goodsCheckbox: [], //checkbox选择商品
+      sumPrice: 0,
+      instructionShow: false, // 底部优惠明细
 
-        manageShow: false,
-        queryParams: {
-          paging: '1,10'
-        },
-        AllGoods: []
+      manageShow: false,
+      queryParams: {
+        paging: '1,10',
+      },
+      AllGoods: [],
+    };
+  },
+  onShow() {
+    this.handlerInitList();
+  },
+  watch: {
+    goodsCheckbox(newValue) {
+      if (
+        newValue.length == this.AllGoods.length &&
+        (newValue.length != 0 || this.AllGoods.length != 0)
+      ) {
+        this.isAllSecect.push('0');
+      } else {
+        this.isAllSecect = [];
       }
     },
-    onShow() {
-      this.handlerInitList()
-    },
-    watch: {
-      goodsCheckbox(newValue) {
-        if (newValue.length == this.AllGoods.length && (newValue.length != 0 || this.AllGoods.length != 0)) {
-          this.isAllSecect.push("0")
-        } else {
-          this.isAllSecect = []
-        }
-      },
+  },
+  computed: {
+    allPrice() {
+      let sum = 0;
+      let goodsNumber = 0;
+      this.goodsCheckbox.map(rs => {
+        this.AllGoods.map(rc => {
+          if (rs == rc.id) {
+            rc.allPrice = Number((rc.price * rc.quantity).toFixed(2));
+            sum += rc.allPrice;
+            goodsNumber += rc.quantity;
+          }
+        });
+      });
+      return {
+        sum,
+        goodsNumber,
+      };
     },
-    computed: {
-      allPrice() {
-        let sum = 0
-        let goodsNumber = 0
-        this.goodsCheckbox.map(rs => {
-          this.AllGoods.map(rc => {
-            if (rs == rc.id) {
-              rc.allPrice = Number((rc.price * rc.quantity).toFixed(2))
-              sum += rc.allPrice
-              goodsNumber += rc.quantity
-            }
-          })
-        })
-        return {
-          sum,
-          goodsNumber
-        }
-      },
+  },
+  methods: {
+    // 初始化购物车列表
+    handlerInitList() {
+      getShoppingCart(this.queryParams).then(res => {
+        this.init_list = res.data.records;
+        this.init_list.map(rs => {
+          rs.cartItems.map(rc => {
+            this.AllGoods.push(rc);
+          });
+        });
+      });
     },
-    methods: {
-      // 初始化购物车列表
-      handlerInitList() {
-        getShoppingCart(this.queryParams).then(res => {
-          this.init_list = res.data.records
-          this.init_list.map(rs => {
-            rs.cartItems.map(rc => {
-              this.AllGoods.push(rc)
-            })
-          })
-        })
-      },
-      // 结算按钮
-      handlerSettleBill() {
-        if (this.manageShow) {
-          deleteCartItem( this.goodsCheckbox.join(',')).then(res => {
-            if(res.code === 'OK'){
-              uni.showToast({
-                title:'删除成功',
-                icon:'none'
-              })
-              this.handlerInitList()
-              this.AllGoods = []
-              this.isAllSecect = []
-              this.goodsCheckbox = []
-            }else{
-              uni.showToast({
-                title:res.msg,
-                icon:'none'
-              })
-              return
-            }
-          })
-        } else {
-          let sumbutArray = []
-          this.init_list.map(rs=>{
-            rs.cartItems.map(rc=>{
-              this.goodsCheckbox.map(rd=>{
-                if(rc.id == rd){
-                  sumbutArray.push(rs.id)
-                }
-              })
-            })
-          })
-          let a = Array.from(new Set(sumbutArray));
-          if(a.length > 1 ){
+    // 结算按钮
+    handlerSettleBill() {
+      if (this.manageShow) {
+        deleteCartItem(this.goodsCheckbox.join(',')).then(res => {
+          if (res.code === 'OK') {
             uni.showToast({
-              title:'不能同时下单多个商家',
-              icon:'none'
-            })
-            return
-          }else{
-            generateConfirmOrder({
-              cartIds: this.goodsCheckbox,
-              payType: 2
-            }).then(res => {
-              if (res.code === 'OK') {
-                uni.navigateTo({
-                  url: `/pages/client/clientPackage/uptickOrder?ids=${a[0]}`
-                })
-              }
-            })
+              title: '删除成功',
+              icon: 'none',
+            });
+            this.handlerInitList();
+            this.AllGoods = [];
+            this.isAllSecect = [];
+            this.goodsCheckbox = [];
+          } else {
+            uni.showToast({
+              title: res.msg,
+              icon: 'none',
+            });
+            return;
           }
-        }
-      },
-      // 修改商品数量
-      valChange(item, e) {
-        editGoodsNumb(item.id, {
-          quantity: e.value
-        }).then(res => {
-          console.log('@@@2res', res)
-        })
-      },
-
-      // 是否多选
-      isAllChange(e) {
-        if (e.length) {
-          this.goodsCheckbox = []
-          this.AllGoods.map(rs => {
-            this.goodsCheckbox.push(rs.id)
-          })
+        });
+      } else {
+        let sumbutArray = [];
+        this.init_list.map(rs => {
+          rs.cartItems.map(rc => {
+            this.goodsCheckbox.map(rd => {
+              if (rc.id == rd) {
+                sumbutArray.push(rs.id);
+              }
+            });
+          });
+        });
+        let a = Array.from(new Set(sumbutArray));
+        if (a.length > 1) {
+          uni.showToast({
+            title: '不能同时下单多个商家',
+            icon: 'none',
+          });
+          return;
         } else {
-          this.goodsCheckbox = []
+          generateConfirmOrder({
+            cartIds: this.goodsCheckbox,
+            payType: 2,
+          }).then(res => {
+            if (res.code === 'OK') {
+              uni.navigateTo({
+                url: `/pages/client/clientPackage/uptickOrder?ids=${a[0]}`,
+              });
+            }
+          });
         }
-      },
-      // 管理按钮
-      handlerManage() {
-        this.manageShow = !this.manageShow
-        this.goodsCheckbox = []
-      },
-      // 跳转到商家详情
-      handlerSkipShopDetail(item){
-        uni.navigateTo({
-          url: `/pages/client/clientPackage/storeDetail?id=${item.id}`,
-        });
-      },
-      // 跳转到商品详情
-      handlerSkipGoodsDetail(item,idx){
-        uni.navigateTo({
-          url: `/pages/client/clientPackage/serviceDetail/index?id=${item.cartItems[idx].goodsId}&shopId=${item.id}`,
+      }
+    },
+    // 修改商品数量
+    valChange(item, e) {
+      editGoodsNumb(item.id, {
+        quantity: e.value,
+      }).then(res => {
+        console.log('@@@2res', res);
+      });
+    },
+
+    // 是否多选
+    isAllChange(e) {
+      if (e.length) {
+        this.goodsCheckbox = [];
+        this.AllGoods.map(rs => {
+          this.goodsCheckbox.push(rs.id);
         });
+      } else {
+        this.goodsCheckbox = [];
       }
-    }
-  };
+    },
+    // 管理按钮
+    handlerManage() {
+      this.manageShow = !this.manageShow;
+      this.goodsCheckbox = [];
+    },
+    // 跳转到商家详情
+    handlerSkipShopDetail(item) {
+      uni.navigateTo({
+        url: `/pages/client/clientPackage/storeDetail?id=${item.id}`,
+      });
+    },
+    // 跳转到商品详情
+    handlerSkipGoodsDetail(item, idx) {
+      uni.navigateTo({
+        url: `/pages/client/clientPackage/serviceDetail/index?id=${item.cartItems[idx].goodsId}&shopId=${item.id}`,
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .cart {
-    min-height: 100vh;
-    padding: 0 20rpx;
-    box-sizing: border-box;
-    background-color: $uni-bg-color-page;
+.cart {
+  min-height: 100vh;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  background-color: $uni-bg-color-page;
 
-    .manage {
-      display: flex;
-      justify-content: flex-end;
-      padding: 20rpx 0;
-      color: #333;
-      padding-right: 20rpx;
-    }
+  .manage {
+    display: flex;
+    justify-content: flex-end;
+    padding: 20rpx 0;
+    color: #333;
+    padding-right: 20rpx;
+  }
 
-    .bottom {
-      height: 100rpx;
-      padding: 10rpx 20rpx 40rpx 20rpx;
-      position: fixed;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      background-color: #fff;
-      text-align: end;
-      border-top: 2rpx solid #eee;
+  .bottom {
+    height: 100rpx;
+    padding: 10rpx 20rpx 40rpx 20rpx;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    text-align: end;
+    border-top: 2rpx solid #eee;
 
-      .bottom-price {
-        margin-right: 20rpx;
-        font-size: 24rpx;
-        color: #fe621a;
-      }
+    .bottom-price {
+      margin-right: 20rpx;
+      font-size: 24rpx;
+      color: #fe621a;
+    }
 
-      .settleAccount {
-        width: 160rpx;
-        height: 60rpx;
-        color: #fff;
-        display: flex;
-        background-color: #fe641c;
-        justify-content: center;
-        align-items: center;
-        font-size: 26rpx;
-        border-radius: 30rpx;
-      }
+    .settleAccount {
+      width: 160rpx;
+      height: 60rpx;
+      color: #fff;
+      display: flex;
+      background-color: #fe641c;
+      justify-content: center;
+      align-items: center;
+      font-size: 26rpx;
+      border-radius: 30rpx;
     }
   }
+}
 
-  .item-box {
-    background-color: #FFFFFF;
-    padding: 4rpx 20rpx;
-    border-radius: 10rpx;
-    margin-bottom: 20rpx;
+.item-box {
+  background-color: #ffffff;
+  padding: 4rpx 20rpx;
+  border-radius: 10rpx;
+  margin-bottom: 20rpx;
 
-    .item-top {
-      padding: 20rpx;
-      box-sizing: border-box;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+  .item-top {
+    padding: 20rpx;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-      .top-title {
-        font-weight: bold;
-        font-size: 32rpx;
-      }
+    .top-title {
+      font-weight: bold;
+      font-size: 32rpx;
     }
-
   }
+}
+
+.item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
 
-  .item {
+  .item-l {
+    width: 70%;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin-bottom: 20rpx;
 
-    .item-l {
-      width: 70%;
+    .l-r {
       display: flex;
-      align-items: center;
 
-      .l-r {
+      .r-img {
+        width: 200rpx;
+        height: 200rpx;
+        border-radius: 10rpx;
+        margin-right: 10rpx;
+      }
+
+      .r-box {
         display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        width: 50%;
 
-        .r-img {
-          width: 200rpx;
-          height: 200rpx;
-          border-radius: 10rpx;
-          margin-right:10rpx;
+        .r-name {
+          font-size: 34rpx;
+          font-weight: bold;
         }
 
-        .r-box {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          width: 50%;
-
-          .r-name {
-            font-size: 34rpx;
-            font-weight: bold;
-          }
-
-          .r-discript {
-            max-width: 200rpx;
-            background-color: #F7F8FA;
-            padding: 5rpx 10rpx;
-            border-radius: 10rpx;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
+        .r-discript {
+          max-width: 200rpx;
+          background-color: #f7f8fa;
+          padding: 5rpx 10rpx;
+          border-radius: 10rpx;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
 
-          .r-price {
-            color: #FF4D60;
-            font-weight: bold;
-            font-size: 28rpx;
-          }
+        .r-price {
+          color: #ff4d60;
+          font-weight: bold;
+          font-size: 28rpx;
         }
       }
     }
-
-    .item-r {
-      width: 30%;
-    }
   }
 
-  .pop-box {
-    min-height: 400rpx;
-    padding: 20rpx;
+  .item-r {
+    width: 30%;
   }
+}
+
+.pop-box {
+  min-height: 400rpx;
+  padding: 20rpx;
+}
 </style>

src/pages/client/tabBar/home/index.vue

@@ -4,9 +4,9 @@
       <!-- 顶部导航 -->
       <view class="nav-bar">
         <u-navbar :bgColor="'#ffffff'" :placeholder="true">
-          <view slot="left" @click="manualGetLocation" class="fl-flex">
+          <view slot="left" @click="manualGetLocation">
             <text>地址</text>
-            <u-icon name="arrow-down" color="#4c4c4c" size="12"></u-icon>
+            <text class="iconfont icon-chevron-down" />
           </view>
           <view slot="center">
             <u-search
@@ -179,16 +179,16 @@ export default {
   // },
   onShow() {
     let params = {
-      region: 370705,
-      longitude: 119.13279,
-      latitude: 36.70864,
-    };
-    this.getHomeData(params);
+          region: 370705,
+          longitude: 119.13279,
+          latitude: 36.70864
+        }
+        this.getHomeData(params)
   },
 
   //页面加载
   async onLoad() {
-    uni.hideTabBar();
+    uni.hideTabBar()
     setTimeout(() => {
       this.list = new Array(10000).fill(1);
     }, 5000);
@@ -214,10 +214,10 @@ export default {
     /* 轮播图 */
     getSwiperList() {
       getSwiperListApi().then(res => {
-        res.data.map(rs => {
-          this.swiperList.push(rs.viewUrl);
-        });
-        console.log('this.swiperList', this.swiperList);
+        res.data.map(rs=>{
+          this.swiperList.push(rs.viewUrl)
+        })
+        console.log('this.swiperList',this.swiperList);
       });
     },
 

src/pages/merchant/order/components/orderItem.vue

@@ -14,7 +14,6 @@
       </view>
 
       <view class="order__info--pay">
-        <!-- <text class="text-22">顾客待付款</text> -->
         <view class="service">
           <view class="orderInfo" v-for="ele in item.goodsInfo" :key="ele.id">
             <image slot="icon" :src="ele.goodsPic" style="width: 150rpx; height: 150rpx" />

src/pages/merchant/store/shopManage.vue

@@ -1,51 +1,86 @@
 <template>
   <view class="u-wrap">
-
     <view class="top-box">
       <view class="switch-box">
-        <u-tabs :list="list1" lineWidth="30" lineColor="$uni-bg-color-primary" @click='handlerChangeTab' :activeStyle="{
+        <u-tabs
+          :list="list1"
+          lineWidth="30"
+          lineColor="$uni-bg-color-primary"
+          @click="handlerChangeTab"
+          :activeStyle="{
             color: '#000',
             fontSize: '28rpx',
             transform: 'scale(1.05)',
             marginBottom: '15rpx',
-          }" :inactiveStyle="{
+          }"
+          :inactiveStyle="{
             color: '#333',
             fontSize: '30rpx',
             transform: 'scale(1)',
             marginBottom: '15rpx',
-          }" itemStyle="width:50%;padding:0;margin:5px 0;"></u-tabs>
+          }"
+          itemStyle="width:50%;padding:0;margin:5px 0;"
+        ></u-tabs>
       </view>
       <view class="search-box">
-        <u--input v-model='search' prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
-          class="search-ipt" placeholder="请输入内容" border="surround" clearable></u--input>
+        <u--input
+          v-model="search"
+          prefixIcon="search"
+          prefixIconStyle="font-size: 22px;color: #909399"
+          class="search-ipt"
+          placeholder="请输入内容"
+          border="surround"
+          clearable
+        ></u--input>
         <button class="btn" @click="handlerSearchBtn">搜索</button>
       </view>
     </view>
 
     <!-- 在售中 -->
     <view class="u-menu-wrap" v-if="delete_type == 0">
-      <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
-        :scroll-into-view="itemId">
-        <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
-          :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
-          <text class="u-line-1">{{item.name}}</text>
+      <scroll-view
+        scroll-y
+        scroll-with-animation
+        class="u-tab-view menu-scroll-view"
+        :scroll-top="scrollTop"
+        :scroll-into-view="itemId"
+      >
+        <view
+          v-for="(item, index) in tabbar"
+          :key="index"
+          class="u-tab-item"
+          :class="[current == index ? 'u-tab-item-active' : '']"
+          @tap.stop="swichMenu(index)"
+        >
+          <text class="u-line-1">{{ item.name }}</text>
         </view>
       </scroll-view>
-      <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
+      <scroll-view
+        :scroll-top="scrollRightTop"
+        scroll-y
+        scroll-with-animation
+        class="right-box"
+        @scroll="rightScroll"
+      >
         <view class="page-view">
-          <view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
+          <view
+            class="class-item"
+            :id="'item' + index"
+            v-for="(item, index) in tabbar"
+            :key="index"
+          >
             <view class="item-title">
-              <text>{{item.name}}</text>
+              <text>{{ item.name }}</text>
             </view>
-            <view class="item-box" v-for="itm of item.foods" :key="idx">
+            <view class="item-box" v-for="itm of item.foods">
               <view class="item-l">
-                <img class="l-img" src="@/static/QR57a.jpg" alt="">
+                <img class="l-img" src="@/static/QR57a.jpg" alt="" />
               </view>
               <view class="item-r">
-                <p class='p1'>yizhiyang的鲜花{{itm.name}}11111111111111</p>
-                <p class='p2'>月售100</p>
-                <p class='p2'>库存90</p>
-                <p class='p3'>￥100起</p>
+                <p class="p1">yizhiyang的鲜花{{ itm.name }}11111111111111</p>
+                <p class="p2">月售100</p>
+                <p class="p2">库存90</p>
+                <p class="p3">￥100起</p>
               </view>
             </view>
           </view>
@@ -55,21 +90,32 @@
 
     <!-- 已下架 -->
     <view class="u-menu-wrap" v-if="delete_type == 1">
-      <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
+      <scroll-view
+        :scroll-top="scrollRightTop"
+        scroll-y
+        scroll-with-animation
+        class="right-box"
+        @scroll="rightScroll"
+      >
         <view class="page-view">
-          <view class="class-item2" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
-            <view class="item-box" v-for="itm of item.foods" :key="idx">
+          <view
+            class="class-item2"
+            :id="'item' + index"
+            v-for="(item, index) in tabbar"
+            :key="index"
+          >
+            <view class="item-box" v-for="itm of item.foods">
               <u-checkbox-group>
                 <u-checkbox v-model="checked" shape="circle"></u-checkbox>
               </u-checkbox-group>
               <view class="item-l">
-                <img class="l-img" src="@/static/QR57a.jpg" alt="">
+                <img class="l-img" src="@/static/QR57a.jpg" alt="" />
               </view>
               <view class="item-r">
-                <p class='type_p1'>yizhiyang的鲜花{{itm.name}}11111111111111</p>
-                <p class='p2'>月售100</p>
-                <p class='p2'>库存90</p>
-                <p class='p3'>￥100起</p>
+                <p class="type_p1">yizhiyang的鲜花{{ itm.name }}11111111111111</p>
+                <p class="p2">月售100</p>
+                <p class="p2">库存90</p>
+                <p class="p3">￥100起</p>
               </view>
             </view>
           </view>
@@ -84,230 +130,248 @@
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        scrollTop: 0, //tab标题的滚动条位置
-        oldScrollTop: 0, // tab标题的滚动条旧位置
-        current: 0, // 预设当前项的值
-        menuHeight: 0, // 左边菜单的高度
-        menuItemHeight: 0, // 左边菜单item的高度
-        itemId: '', // 栏目右边scroll-view用于滚动的id
-        arr: [], // 储存距离顶部高度的数组
-        scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
-        timer: null, // 定时器
-        tabbar: [{
-            "name": "蔬菜水果",
-            "foods": [{
-                "cat": 383,
-                "name": "蔬菜",
-                "icon": "http://nq348.com/uploads/category/20220315/1aeed6fa43b54cd68cce0c4883160f91.png",
-                "key": "蔬菜"
-              },
-              {
-                "cat": 384,
-                "name": "食用菌",
-                "icon": "http://nq348.com/uploads/category/20220418/09839c618b35b510d50151f9a17793ee.png",
-                "key": "食用菌"
-              },
-              {
-                "cat": 385,
-                "name": "水果",
-                "icon": "http://nq348.com/uploads/category/20220418/5294ad2fc7effc9629cbfdb8baf41773.png",
-                "key": "水果"
-              }
-            ]
-          },
-          {
-            "name": "畜禽养殖",
-            "foods": [{
-                "cat": 388,
-                "name": "禽类",
-                "icon": "http://nq348.com/uploads/category/20220418/da31895fc5a9aacf93fea6f27f08afd7.png",
-                "key": "禽类"
-              },
-              {
-                "cat": 389,
-                "name": "畜类",
-                "icon": "http://nq348.com/uploads/category/20220418/6352081e3f3b36f9360a933676e9452c.png",
-                "key": "畜类"
-              },
-              {
-                "cat": 391,
-                "name": "蛋类",
-                "icon": "http://nq348.com/uploads/category/20220418/d2e7ab4224679c0c796ba3ddd8a68e2f.png",
-                "key": "蛋类"
-              },
-              {
-                "cat": 390,
-                "name": "水产",
-                "icon": "http://nq348.com/uploads/category/20220418/52a1f1baa7617ef4d4e1a4b344b2fce7.png",
-                "key": "水产"
-              }
-            ]
-          },
-
-          {
-            "name": "粮油副食",
-            "foods": [{
-                "cat": 393,
-                "name": "米面粮油",
-                "icon": "http://nq348.com/uploads/category/20220418/1bb32e319ecf5aa352b7fe26fc265004.png",
-                "key": "米面粮油"
-              },
-              {
-                "cat": 394,
-                "name": "坚果干果",
-                "icon": "http://nq348.com/uploads/category/20220418/6ded13eae4a3b113b5225ca8b99bbfdd.png",
-                "key": "坚果干果"
-              },
-              {
-                "cat": 395,
-                "name": "加工食品",
-                "icon": "http://nq348.com/uploads/category/20220418/1e1c10838799de5834aa77f0f9eb8f40.png",
-                "key": "加工食品"
-              },
-              {
-                "cat": 396,
-                "name": "茶烟酒",
-                "icon": "http://nq348.com/uploads/category/20220418/c43cd994e49023c7efdf2b18b1bca30b.png",
-                "key": "茶烟酒"
-              }
-            ]
-          },
-          {
-            "name": "花卉苗木",
-            "foods": [{
-                "cat": 398,
-                "name": "鲜花盆景",
-                "icon": "http://nq348.com/uploads/category/20220418/b21c44045daaa8b8d148981ba9efc2e0.png",
-                "key": "鲜花盆景"
-              },
-              {
-                "cat": 399,
-                "name": "果树苗",
-                "icon": "http://nq348.com/uploads/category/20220418/63ee2b902ff0f4d638d8a5ad770f7641.png",
-                "key": "果树苗"
-              },
-              {
-                "cat": 400,
-                "name": "蔬瓜种子",
-                "icon": "http://nq348.com/uploads/category/20220418/2df521877616ee44fd01aae0434a5815.png",
-                "key": "蔬瓜种子"
-              },
-              {
-                "cat": 401,
-                "name": "经济作物",
-                "icon": "http://nq348.com/uploads/category/20220418/f85be72a98694befd889f30de45a1d64.png",
-                "key": "经济作物"
-              }
-            ]
-          },
-          {
-            "name": "中草药材",
-            "foods": [{
-                "cat": 403,
-                "name": "全草类",
-                "icon": "http://nq348.com/uploads/category/20220418/01812c1a83f5db7eafbf3bdae927f134.png",
-                "key": "全草类"
-              },
-              {
-                "cat": 405,
-                "name": "根茎皮叶花",
-                "icon": "http://nq348.com/uploads/category/20220418/dca8dcc814401474d4f19ae7394cc209.png",
-                "key": "根茎皮叶花"
-              },
-              {
-                "cat": 406,
-                "name": "滋补品类",
-                "icon": "http://nq348.com/uploads/category/20220418/33b965295811fdd6f5e672e9a3ce34a2.png",
-                "key": "滋补品类"
-              },
-              {
-                "cat": 404,
-                "name": "果实籽仁类",
-                "icon": "http://nq348.com/uploads/category/20220418/1dc8c46c66b4625d458a7f45787ecef9.png",
-                "key": "果实籽仁类"
-              }
-            ]
-          },
-          {
-            "name": "其他",
-            "foods": [{
-                "cat": 434,
-                "name": "包装",
-                "icon": "http://nq348.com/uploads/category/20220418/ebdfd326333344825adbe81dbd89e2c9.png",
-                "key": "包装"
-              },
-              {
-                "cat": 435,
-                "name": "安全溯源",
-                "icon": "http://nq348.com/uploads/category/20220418/03230c63f066f46005abf5f576df0ed1.png",
-                "key": "安全溯源"
-              },
-              {
-                "cat": 436,
-                "name": "农用百货",
-                "icon": "http://nq348.com/uploads/category/20220418/93393f2df3264faba86bb449a0c10a79.png",
-                "key": "农用百货"
-              },
-              {
-                "cat": 437,
-                "name": "仓储物流",
-                "icon": "http://nq348.com/uploads/category/20220418/f553505ebabbcb1bf762b288716cf1e7.png",
-                "key": "仓储物流"
-              }
-            ]
-          }
-        ],
-        list1: [{
+export default {
+  data() {
+    return {
+      scrollTop: 0, //tab标题的滚动条位置
+      oldScrollTop: 0, // tab标题的滚动条旧位置
+      current: 0, // 预设当前项的值
+      menuHeight: 0, // 左边菜单的高度
+      menuItemHeight: 0, // 左边菜单item的高度
+      itemId: '', // 栏目右边scroll-view用于滚动的id
+      arr: [], // 储存距离顶部高度的数组
+      scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
+      timer: null, // 定时器
+      tabbar: [
+        {
+          name: '蔬菜水果',
+          foods: [
+            {
+              cat: 383,
+              name: '蔬菜',
+              icon: 'http://nq348.com/uploads/category/20220315/1aeed6fa43b54cd68cce0c4883160f91.png',
+              key: '蔬菜',
+            },
+            {
+              cat: 384,
+              name: '食用菌',
+              icon: 'http://nq348.com/uploads/category/20220418/09839c618b35b510d50151f9a17793ee.png',
+              key: '食用菌',
+            },
+            {
+              cat: 385,
+              name: '水果',
+              icon: 'http://nq348.com/uploads/category/20220418/5294ad2fc7effc9629cbfdb8baf41773.png',
+              key: '水果',
+            },
+          ],
+        },
+        {
+          name: '畜禽养殖',
+          foods: [
+            {
+              cat: 388,
+              name: '禽类',
+              icon: 'http://nq348.com/uploads/category/20220418/da31895fc5a9aacf93fea6f27f08afd7.png',
+              key: '禽类',
+            },
+            {
+              cat: 389,
+              name: '畜类',
+              icon: 'http://nq348.com/uploads/category/20220418/6352081e3f3b36f9360a933676e9452c.png',
+              key: '畜类',
+            },
+            {
+              cat: 391,
+              name: '蛋类',
+              icon: 'http://nq348.com/uploads/category/20220418/d2e7ab4224679c0c796ba3ddd8a68e2f.png',
+              key: '蛋类',
+            },
+            {
+              cat: 390,
+              name: '水产',
+              icon: 'http://nq348.com/uploads/category/20220418/52a1f1baa7617ef4d4e1a4b344b2fce7.png',
+              key: '水产',
+            },
+          ],
+        },
+
+        {
+          name: '粮油副食',
+          foods: [
+            {
+              cat: 393,
+              name: '米面粮油',
+              icon: 'http://nq348.com/uploads/category/20220418/1bb32e319ecf5aa352b7fe26fc265004.png',
+              key: '米面粮油',
+            },
+            {
+              cat: 394,
+              name: '坚果干果',
+              icon: 'http://nq348.com/uploads/category/20220418/6ded13eae4a3b113b5225ca8b99bbfdd.png',
+              key: '坚果干果',
+            },
+            {
+              cat: 395,
+              name: '加工食品',
+              icon: 'http://nq348.com/uploads/category/20220418/1e1c10838799de5834aa77f0f9eb8f40.png',
+              key: '加工食品',
+            },
+            {
+              cat: 396,
+              name: '茶烟酒',
+              icon: 'http://nq348.com/uploads/category/20220418/c43cd994e49023c7efdf2b18b1bca30b.png',
+              key: '茶烟酒',
+            },
+          ],
+        },
+        {
+          name: '花卉苗木',
+          foods: [
+            {
+              cat: 398,
+              name: '鲜花盆景',
+              icon: 'http://nq348.com/uploads/category/20220418/b21c44045daaa8b8d148981ba9efc2e0.png',
+              key: '鲜花盆景',
+            },
+            {
+              cat: 399,
+              name: '果树苗',
+              icon: 'http://nq348.com/uploads/category/20220418/63ee2b902ff0f4d638d8a5ad770f7641.png',
+              key: '果树苗',
+            },
+            {
+              cat: 400,
+              name: '蔬瓜种子',
+              icon: 'http://nq348.com/uploads/category/20220418/2df521877616ee44fd01aae0434a5815.png',
+              key: '蔬瓜种子',
+            },
+            {
+              cat: 401,
+              name: '经济作物',
+              icon: 'http://nq348.com/uploads/category/20220418/f85be72a98694befd889f30de45a1d64.png',
+              key: '经济作物',
+            },
+          ],
+        },
+        {
+          name: '中草药材',
+          foods: [
+            {
+              cat: 403,
+              name: '全草类',
+              icon: 'http://nq348.com/uploads/category/20220418/01812c1a83f5db7eafbf3bdae927f134.png',
+              key: '全草类',
+            },
+            {
+              cat: 405,
+              name: '根茎皮叶花',
+              icon: 'http://nq348.com/uploads/category/20220418/dca8dcc814401474d4f19ae7394cc209.png',
+              key: '根茎皮叶花',
+            },
+            {
+              cat: 406,
+              name: '滋补品类',
+              icon: 'http://nq348.com/uploads/category/20220418/33b965295811fdd6f5e672e9a3ce34a2.png',
+              key: '滋补品类',
+            },
+            {
+              cat: 404,
+              name: '果实籽仁类',
+              icon: 'http://nq348.com/uploads/category/20220418/1dc8c46c66b4625d458a7f45787ecef9.png',
+              key: '果实籽仁类',
+            },
+          ],
+        },
+        {
+          name: '其他',
+          foods: [
+            {
+              cat: 434,
+              name: '包装',
+              icon: 'http://nq348.com/uploads/category/20220418/ebdfd326333344825adbe81dbd89e2c9.png',
+              key: '包装',
+            },
+            {
+              cat: 435,
+              name: '安全溯源',
+              icon: 'http://nq348.com/uploads/category/20220418/03230c63f066f46005abf5f576df0ed1.png',
+              key: '安全溯源',
+            },
+            {
+              cat: 436,
+              name: '农用百货',
+              icon: 'http://nq348.com/uploads/category/20220418/93393f2df3264faba86bb449a0c10a79.png',
+              key: '农用百货',
+            },
+            {
+              cat: 437,
+              name: '仓储物流',
+              icon: 'http://nq348.com/uploads/category/20220418/f553505ebabbcb1bf762b288716cf1e7.png',
+              key: '仓储物流',
+            },
+          ],
+        },
+      ],
+      list1: [
+        {
           name: '在售中',
-        }, {
+        },
+        {
           name: '已下架',
-        }],
-        checked: false,
-        search: '',
-        delete_type: false,
-      }
+        },
+      ],
+      checked: false,
+      search: '',
+      delete_type: false,
+    };
+  },
+  /**
+   * 获取一个目标元素的高度
+   * @elClass 元素的类名
+   * @dataVal 储存高度的对象
+   */
+  onReady() {
+    this.getMenuItemTop();
+  },
+  watch: {
+    delete_type(newValue) {
+      this.scrollRightTop = 0;
+      this.current = 0;
     },
-    /**
-     * 获取一个目标元素的高度
-     * @elClass 元素的类名
-     * @dataVal 储存高度的对象
-     */
-    onReady() {
-      this.getMenuItemTop()
-    },
-    watch: {
-      delete_type(newValue) {
-        this.scrollRightTop = 0
-        this.current = 0
-      }
+  },
+  methods: {
+    getElRect(elClass, dataVal) {
+      new Promise((resolve, reject) => {
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select('.' + elClass)
+          .fields(
+            {
+              size: true,
+            },
+            res => {
+              // 如果节点尚未生成，res值为null，循环调用执行
+              if (!res) {
+                setTimeout(() => {
+                  this.getElRect(elClass);
+                }, 10);
+                return;
+              }
+              this[dataVal] = res.height;
+              resolve();
+            },
+          )
+          .exec();
+      });
     },
-    methods: {
-      getElRect(elClass, dataVal) {
-        new Promise((resolve, reject) => {
-          const query = uni.createSelectorQuery().in(this);
-          query.select('.' + elClass).fields({
-            size: true
-          }, res => {
-            // 如果节点尚未生成，res值为null，循环调用执行
-            if (!res) {
-              setTimeout(() => {
-                this.getElRect(elClass);
-              }, 10);
-              return;
-            }
-            this[dataVal] = res.height;
-            resolve();
-          }).exec();
-        })
-      },
-
-      getMenuItemTop() {
-        new Promise(resolve => {
-          let selectorQuery = uni.createSelectorQuery();
-          selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
+
+    getMenuItemTop() {
+      new Promise(resolve => {
+        let selectorQuery = uni.createSelectorQuery();
+        selectorQuery
+          .selectAll('.class-item')
+          .boundingClientRect(rects => {
             // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
             if (!rects.length) {
               setTimeout(() => {
@@ -315,289 +379,289 @@
               }, 10);
               return;
             }
-            rects.forEach((rect) => {
+            rects.forEach(rect => {
               // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
               this.arr.push(rect.top - rects[0].top);
               // this.arr.push(rect.top)
               resolve();
-            })
-          }).exec()
-        })
-      },
-      /**
-       * 观测元素相交状态
-       * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
-       * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
-       */
-      async observer() {
-        this.tabbar.map((val, index) => {
-          let observer = uni.createIntersectionObserver(this);
-          observer.relativeTo('.right-box', {
-            top: 0
-          }).observe('#item' + index, res => {
+            });
+          })
+          .exec();
+      });
+    },
+    /**
+     * 观测元素相交状态
+     * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
+     * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
+     */
+    async observer() {
+      this.tabbar.map((val, index) => {
+        let observer = uni.createIntersectionObserver(this);
+        observer
+          .relativeTo('.right-box', {
+            top: 0,
+          })
+          .observe('#item' + index, res => {
             if (res.intersectionRatio > 0) {
               let id = res.id.substring(4);
               this.leftMenuStatus(id);
             }
-          })
-        })
-      },
-      /**
-       * 设置左边菜单的滚动状态
-       * @index 传入的 ID
-       */
-      async leftMenuStatus(index) {
+          });
+      });
+    },
+    /**
+     * 设置左边菜单的滚动状态
+     * @index 传入的 ID
+     */
+    async leftMenuStatus(index) {
+      this.current = index;
+      // 如果为0，意味着尚未初始化
+      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
+        await this.getElRect('menu-scroll-view', 'menuHeight');
+        await this.getElRect('u-tab-item', 'menuItemHeight');
+      }
+      // 将菜单活动item垂直居中
+      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+    },
+    /**
+     * 点击左边的栏目切换
+     * @index 传入的 ID
+     */
+    async swichMenu(index) {
+      if (this.arr.length == 0) {
+        await this.getMenuItemTop();
+      }
+      if (index == this.current) return;
+      this.scrollRightTop = this.oldScrollTop;
+      this.$nextTick(function () {
+        this.scrollRightTop = this.arr[index];
         this.current = index;
-        // 如果为0，意味着尚未初始化
-        if (this.menuHeight == 0 || this.menuItemHeight == 0) {
-          await this.getElRect('menu-scroll-view', 'menuHeight');
-          await this.getElRect('u-tab-item', 'menuItemHeight');
-        }
-        // 将菜单活动item垂直居中
-        this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
-      },
-      /**
-       * 点击左边的栏目切换
-       * @index 传入的 ID
-       */
-      async swichMenu(index) {
-        if (this.arr.length == 0) {
-          await this.getMenuItemTop();
-        }
-        if (index == this.current) return;
-        this.scrollRightTop = this.oldScrollTop;
-        this.$nextTick(function() {
-          this.scrollRightTop = this.arr[index];
-          this.current = index;
-          this.leftMenuStatus(index);
-        })
-      },
-      /**
-       * 右边菜单滚动
-       * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
-       */
-      async rightScroll(e) {
-        this.oldScrollTop = e.detail.scrollTop;
-        if (this.arr.length == 0) {
-          await this.getMenuItemTop();
-        }
-        if (this.timer) return;
-        if (!this.menuHeight) {
-          await this.getElRect('menu-scroll-view', 'menuHeight');
-        }
-        setTimeout(() => { // 节流
-          this.timer = null;
-          // scrollHeight为右边菜单垂直中点位置
-          // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
-          // scrollHeight为右边菜单头部位置
-          let scrollHeight = e.detail.scrollTop + 20;
-          for (let i = 0; i < this.arr.length; i++) {
-            let height1 = this.arr[i];
-            let height2 = this.arr[i + 1];
-            if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
-              this.leftMenuStatus(i);
-              return;
-            }
+        this.leftMenuStatus(index);
+      });
+    },
+    /**
+     * 右边菜单滚动
+     * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
+     */
+    async rightScroll(e) {
+      this.oldScrollTop = e.detail.scrollTop;
+      if (this.arr.length == 0) {
+        await this.getMenuItemTop();
+      }
+      if (this.timer) return;
+      if (!this.menuHeight) {
+        await this.getElRect('menu-scroll-view', 'menuHeight');
+      }
+      setTimeout(() => {
+        // 节流
+        this.timer = null;
+        // scrollHeight为右边菜单垂直中点位置
+        // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
+        // scrollHeight为右边菜单头部位置
+        let scrollHeight = e.detail.scrollTop + 20;
+        for (let i = 0; i < this.arr.length; i++) {
+          let height1 = this.arr[i];
+          let height2 = this.arr[i + 1];
+          if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
+            this.leftMenuStatus(i);
+            return;
           }
-        }, 10)
-      },
-
-      // 搜索按钮
-      handlerSearchBtn() {
-        console.log('search', this.search);
-      },
-      // 切换tab
-      handlerChangeTab(e) {
-        if (e.index == 1) {
-          this.delete_type = true
-        } else {
-          this.delete_type = false
         }
-      }
-    }
+      }, 10);
+    },
 
-  }
+    // 搜索按钮
+    handlerSearchBtn() {
+      console.log('search', this.search);
+    },
+    // 切换tab
+    handlerChangeTab(e) {
+      if (e.index == 1) {
+        this.delete_type = true;
+      } else {
+        this.delete_type = false;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .top-box {
-    padding: 0 0 20rpx;
-    width: 100%;
-
-    .switch-box {
-      width: 100%;
-    }
-
-    .search-box {
-      display: flex;
-      justify-content: space-around;
-      width: 90%;
-      margin: 20rpx auto 0;
-
-      .btn {
-        width: 160rpx;
-        height: 70rpx;
-        background-color: #5992BB;
-        color: #fff;
-        text-align: center;
-        line-height: 70rpx;
-        font-size: 26rpx;
-        border-radius: 30rpx;
-        margin-left: 20rpx;
-      }
-    }
-  }
-
-  .u-wrap {
-    /* #ifdef H5 */
-    height: calc(100vh - var(--window-top));
-    /* #endif */
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-
-  .u-search-box {
-    padding: 18rpx 30rpx;
-  }
+.top-box {
+  padding: 0 0 20rpx;
+  width: 100%;
 
-  .u-menu-wrap {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-  }
-
-  .u-tab-view {
-    width: 200rpx;
-    background-color: #f6f6f6;
+  .switch-box {
+    width: 100%;
   }
 
-  .u-tab-item {
-    height: 110rpx;
-    background: #f6f6f6;
-    box-sizing: border-box;
+  .search-box {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 26rpx;
-    color: #444;
-    font-weight: 400;
-    line-height: 1;
-    padding: 16rpx 0;
-
-  }
-
-  .u-tab-item-active {
-    position: relative;
-    color: #5F96BE;
-    font-size: 30rpx;
-    font-weight: 500;
-    background: #FFF;
-  }
-
-  .u-tab-item-active::before {
-    content: "";
-    position: absolute;
-    border-left: 4px solid #5F96BE;
-    height: 52rpx;
-    left: 0;
-    top: 29rpx;
-  }
-
-  .u-tab-view {
-    height: 100%;
-  }
-
-  .right-box {
-    background-color: rgb(250, 250, 250);
-  }
-
-  .page-view {
-    padding: 16rpx;
-  }
-
-  .class-item,
-  .class-item2 {
-    margin-bottom: 30rpx;
-    background-color: #fff;
-    padding: 16rpx;
-    border-radius: 8rpx;
-  }
-
-  .class-item2 {
-    margin-bottom: 0;
-  }
-
-  .item-title {
-    font-size: 26rpx;
-    text-align: center;
-    color: #5F96BE;
-    margin-bottom: 20rpx;
+    justify-content: space-around;
+    width: 90%;
+    margin: 20rpx auto 0;
+
+    .btn {
+      width: 160rpx;
+      height: 70rpx;
+      background-color: #5992bb;
+      color: #fff;
+      text-align: center;
+      line-height: 70rpx;
+      font-size: 26rpx;
+      border-radius: 30rpx;
+      margin-left: 20rpx;
+    }
   }
-
-  .item-box {
-    display: flex;
-    margin-bottom: 10rpx;
-
-    .item-l {
-      border: 2rpx solid #EEF0F0;
+}
+
+.u-wrap {
+  /* #ifdef H5 */
+  height: calc(100vh - var(--window-top));
+  /* #endif */
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.u-search-box {
+  padding: 18rpx 30rpx;
+}
+
+.u-menu-wrap {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.u-tab-view {
+  width: 200rpx;
+  background-color: #f6f6f6;
+}
+
+.u-tab-item {
+  height: 110rpx;
+  background: #f6f6f6;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  color: #444;
+  font-weight: 400;
+  line-height: 1;
+  padding: 16rpx 0;
+}
+
+.u-tab-item-active {
+  position: relative;
+  color: #5f96be;
+  font-size: 30rpx;
+  font-weight: 500;
+  background: #fff;
+}
+
+.u-tab-item-active::before {
+  content: '';
+  position: absolute;
+  border-left: 4px solid #5f96be;
+  height: 52rpx;
+  left: 0;
+  top: 29rpx;
+}
+
+.u-tab-view {
+  height: 100%;
+}
+
+.right-box {
+  background-color: rgb(250, 250, 250);
+}
+
+.page-view {
+  padding: 16rpx;
+}
+
+.class-item,
+.class-item2 {
+  margin-bottom: 30rpx;
+  background-color: #fff;
+  padding: 16rpx;
+  border-radius: 8rpx;
+}
+
+.class-item2 {
+  margin-bottom: 0;
+}
+
+.item-title {
+  font-size: 26rpx;
+  text-align: center;
+  color: #5f96be;
+  margin-bottom: 20rpx;
+}
+
+.item-box {
+  display: flex;
+  margin-bottom: 10rpx;
+
+  .item-l {
+    border: 2rpx solid #eef0f0;
+    border-radius: 20rpx;
+    margin-right: 20rpx;
+
+    .l-img {
+      width: 140rpx;
+      height: 130rpx;
       border-radius: 20rpx;
-      margin-right: 20rpx;
-
-      .l-img {
-        width: 140rpx;
-        height: 130rpx;
-        border-radius: 20rpx;
-      }
     }
+  }
 
-    .item-r {
-
-      .p1,
-      .type_p1 {
-        width: 350rpx;
-        font-size: 28rpx;
-        color: #000;
-        margin-bottom: 5rpx;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .type_p1 {
-        width: 480rpx;
-      }
-
-      .p2 {
-        font-size: 24rpx;
-        color: #A4A5AD;
-      }
-
-      .p3 {
-        font-size: 26rpx;
-        color: #D6534D;
-      }
+  .item-r {
+    .p1,
+    .type_p1 {
+      width: 350rpx;
+      font-size: 28rpx;
+      color: #000;
+      margin-bottom: 5rpx;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
-  }
 
-  .bottom-box {
-    width: 100%;
-    background-color: #fff;
-    padding: 10rpx 20rpx;
-    height: 100rpx;
-    border-top: 2rpx solid #F7F7F7;
-    box-shadow: 0px 7px 10px 7px rgba(0, 0, 0, 0.1);
-    display: flex;
-    justify-content: space-around;
-    line-height: 100rpx;
-    font-size: 28rpx;
+    .type_p1 {
+      width: 480rpx;
+    }
 
-  }
+    .p2 {
+      font-size: 24rpx;
+      color: #a4a5ad;
+    }
 
-  ::v-deep .u-input--radius.data-v-fdbb9fe6,
-  .u-input--square.data-v-fdbb9fe6 {
-    background-color: #F7F7F7 !important;
-    padding: 40rpx;
-    border-radius: 50rpx;
+    .p3 {
+      font-size: 26rpx;
+      color: #d6534d;
+    }
   }
+}
+
+.bottom-box {
+  width: 100%;
+  background-color: #fff;
+  padding: 10rpx 20rpx;
+  height: 100rpx;
+  border-top: 2rpx solid #f7f7f7;
+  box-shadow: 0px 7px 10px 7px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-around;
+  line-height: 100rpx;
+  font-size: 28rpx;
+}
+
+::v-deep .u-input--radius.data-v-fdbb9fe6,
+.u-input--square.data-v-fdbb9fe6 {
+  background-color: #f7f7f7 !important;
+  padding: 40rpx;
+  border-radius: 50rpx;
+}
 </style>

src/utils/date.js

@@ -5,7 +5,7 @@
  * @returns 返回格式化后的时间字符串
  */
 
- export function formatTime(daytime, format = 'YYYY-MM-DD hh:mm:ss') {
+export function formatTime(daytime, format = 'YYYY-MM-DD hh:mm:ss') {
   const date = new Date(daytime);
   const year = date.getFullYear();
   const month = ('0' + (date.getMonth() + 1)).slice(-2);
@@ -25,17 +25,14 @@
   return format.replace(/YYYY|MM|DD|hh|mm|ss/g, matched => map[matched]);
 }
 
-
-
 /**
- * 
- * @param {*} endTime 
- * @returns 
+ * @param {*} endTime
+ * @returns
  */
 
-export function intervalTime( endTime) {
+export function intervalTime(endTime) {
   // var timestamp=new Date().getTime(); //计算当前时间戳
-  var date1 = new Date().getTime() //计算当前时间戳 (毫秒级)
+  var date1 = new Date().getTime(); //计算当前时间戳 (毫秒级)
 
   var date2 = endTime; //结束时间
   // var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
@@ -43,7 +40,7 @@ export function intervalTime( endTime) {
   //计算出相差天数
   var days = Math.floor(date3 / (24 * 3600 * 1000));
   if (days < 0) {
-    days = days * (-1)
+    days = days * -1;
   }
   //计算出小时数
   var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
@@ -55,28 +52,26 @@ export function intervalTime( endTime) {
   //计算相差秒数
   var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
   var seconds = Math.round(leave3 / 1000);
-  console.log(days + "天 " + hours + "小时 ")
+  console.log(days + '天 ' + hours + '小时 ');
   // return   days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
-  return days + "天 " + hours + "小时 "
+  return days + '天 ' + hours + '小时 ';
 }
 
-
 /**
- * 
- * @param {*} e 
- * @returns 
+ * @param {*} e
+ * @returns
  */
 
-export function changeTime(e){
-  let time = new Date(e)
-  let year = time.getFullYear()
-  let month = time.getMonth() + 1
-  let date = time.getDate()
+export function changeTime(e) {
+  let time = new Date(e);
+  let year = time.getFullYear();
+  let month = time.getMonth() + 1;
+  let date = time.getDate();
   if (month < 10) {
-    month = '0' + month
+    month = '0' + month;
   }
   if (date < 10) {
-    date = '0' + date
+    date = '0' + date;
   }
-  return year + '-' + month + '-' + date
+  return year + '-' + month + '-' + date;
 }

src/utils/tools.js

@@ -40,14 +40,14 @@ export function phoneEncryption(phone) {
 
 /**
  * @description 身份证号码加密
- * @param {*} idCard 
- * @returns 
+ * @param {*} idCard
+ * @returns
  */
 
 export function idCardEncryption(idCard) {
-  	if (!idCard) return ""
-  	let reg = /^(.{6})(?:\d+)(.{4})$/
-    // 身份证号脱敏，将中间8位替换为“*”
-  	let result = idCard.replace(reg, '\$1******\$2') 
-  	return result
-  }
+  if (!idCard) return '';
+  let reg = /^(.{6})(?:\d+)(.{4})$/;
+  // 身份证号脱敏，将中间8位替换为“*”
+  let result = idCard.replace(reg, '$1******$2');
+  return result;
+}