✨ feat:购物车静态页面和全局样式

src/App.vue

@@ -9,9 +9,15 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import 'uview-ui/index.scss';
-@import 'design/flex.css';
+@import url('design/background.css');
+@import url('design/flex.css');
+@import url('design/margin.css');
+@import url('design/padding.css');
+@import url('design/shadow.css');
+@import url('design/text.css');
+@import url('design/common.css');
 
 page {
   background-color: #efefef;

src/design/background.css

@@ -1,198 +1,200 @@
-.bg-red {
+.chelvc-red {
   background-color: #e54d42;
   color: #ffffff;
 }
 
-.bg-orange {
+.chelvc-orange {
   background-color: #f37b1d;
   color: #ffffff;
 }
 
-.bg-yellow {
+.chelvc-yellow {
   background-color: #fbbd08;
   color: #333333;
 }
 
-.bg-olive {
+.chelvc-olive {
   background-color: #8dc63f;
   color: #ffffff;
 }
 
-.bg-green {
+.chelvc-green {
   background-color: #39b54a;
   color: #ffffff;
 }
 
-.bg-cyan {
+.chelvc-cyan {
   background-color: #1cbbb4;
   color: #ffffff;
 }
 
-.bg-blue {
+.chelvc-blue {
   background-color: #0081ff;
   color: #ffffff;
 }
 
-.bg-purple {
+.chelvc-purple {
   background-color: #6739b6;
   color: #ffffff;
 }
 
-.bg-mauve {
+.chelvc-mauve {
   background-color: #9c26b0;
   color: #ffffff;
 }
 
-.bg-pink {
+.chelvc-pink {
   background-color: #e03997;
   color: #ffffff;
 }
 
-.bg-brown {
+.chelvc-brown {
   background-color: #a5673f;
   color: #ffffff;
 }
 
-.bg-grey {
+.chelvc-grey {
   background-color: #8799a3;
   color: #ffffff;
 }
 
-.bg-gray {
+.chelvc-gray {
   background-color: #f0f0f0;
   color: #333333;
 }
 
-.bg-black {
+.chelvc-black {
   background-color: #333333;
   color: #ffffff;
 }
 
-.bg-white {
+.chelvc-white {
   background-color: #ffffff;
   color: #666666;
 }
 
-.bg-shadeTop {
+.chelvc-shadeTop {
   background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
   color: #ffffff;
 }
 
-.bg-shadeBottom {
+.chelvc-shadeBottom {
   background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
   color: #ffffff;
 }
 
-.bg-red.light {
+.chelvc-red.light {
   color: #e54d42;
   background-color: #fadbd9;
 }
 
-.bg-orange.light {
+.chelvc-orange.light {
   color: #f37b1d;
   background-color: #fde6d2;
 }
 
-.bg-yellow.light {
+.chelvc-yellow.light {
   color: #fbbd08;
   background-color: #fef2ced2;
 }
 
-.bg-olive.light {
+.chelvc-olive.light {
   color: #8dc63f;
   background-color: #e8f4d9;
 }
 
-.bg-green.light {
+.chelvc-green.light {
   color: #39b54a;
   background-color: #d7f0dbff;
 }
 
-.bg-cyan.light {
+.chelvc-cyan.light {
   color: #1cbbb4;
   background-color: #d2f1f0;
 }
 
-.bg-blue.light {
+.chelvc-blue.light {
   color: #0081ff;
   background-color: #cce6ff;
 }
 
-.bg-purple.light {
+.chelvc-purple.light {
   color: #6739b6;
   background-color: #e1d7f0;
 }
 
-.bg-mauve.light {
+.chelvc-mauve.light {
   color: #9c26b0;
   background-color: #ebd4ef;
 }
 
-.bg-pink.light {
+.chelvc-pink.light {
   color: #e03997;
   background-color: #f9d7ea;
 }
 
-.bg-brown.light {
+.chelvc-brown.light {
   color: #a5673f;
   background-color: #ede1d9;
 }
 
-.bg-grey.light {
+.chelvc-grey.light {
   color: #8799a3;
   background-color: #e7ebed;
 }
 
-.bg-gradual-red {
+.chelvc-gradual-red {
   background-image: linear-gradient(45deg, #f43f3b, #ec008c);
   color: #ffffff;
 }
 
-.bg-gradual-orange {
+.chelvc-gradual-orange {
   background-image: linear-gradient(45deg, #ff9700, #ed1c24);
   color: #ffffff;
 }
 
-.bg-gradual-green {
+.chelvc-gradual-green {
   background-image: linear-gradient(45deg, #39b54a, #8dc63f);
   color: #ffffff;
 }
 
-.bg-gradual-purple {
+.chelvc-gradual-purple {
   background-image: linear-gradient(45deg, #9000ff, #5e00ff);
   color: #ffffff;
 }
 
-.bg-gradual-pink {
+.chelvc-gradual-pink {
   background-image: linear-gradient(45deg, #ec008c, #6739b6);
   color: #ffffff;
 }
 
-.bg-gradual-blue {
+.chelvc-gradual-blue {
   background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
   color: #ffffff;
 }
-.bg-1a1a1a {
+
+.chelvc-1a1a1a {
   background-color: #1a1a1a;
   color: #ffffff;
 }
-.bg-gdBlue {
+
+.chelvc-gdBlue {
   background-color: #2695fe;
   color: #ffffff;
 }
 
-.bg-img {
+.chelvc-img {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }
 
-.bg-mask {
+.chelvc-mask {
   background-color: #333333;
   position: relative;
 }
 
-.bg-mask::after {
+.chelvc-mask::after {
   content: '';
   border-radius: inherit;
   width: 100%;
@@ -204,4 +206,4 @@
   right: 0;
   bottom: 0;
   top: 0;
-}
+}

src/design/common.css

@@ -0,0 +1,7 @@
+/* 省略号*/
+.apostrophe {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}

src/design/flex.css

@@ -6,6 +6,12 @@
   display: flex;
 }
 
+.chelvc-flex-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .chelvc-basis-xs {
   flex-basis: 20%;
 }

src/design/index.css

@@ -1,6 +0,0 @@
-@import './flex.scss';
-@import './margin.scss';
-@import './padding.scss';
-@import './text.scss';
-@import './background.scss';
-@import './shadow.scss';

src/design/shadow.css

@@ -112,4 +112,4 @@
 
 .text-shadow[class*='-black'] {
   text-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2);
-}
+}

src/design/text.css

@@ -6,6 +6,10 @@
   font-size: 20upx;
 }
 
+.text-22 {
+  font-size: 22rpx;
+}
+
 .text-sm {
   font-size: 24upx;
 }
@@ -25,6 +29,7 @@
 .text-xxl {
   font-size: 44upx;
 }
+
 .text-xxxl {
   font-size: 52upx;
 }
@@ -169,4 +174,4 @@
 .line-white,
 .lines-white {
   color: #ffffff;
-}
+}

src/pages.json

@@ -176,7 +176,7 @@
           }
         },
         {
-          "path": "myScore",
+          "path": "myScore/index",
           "style": {
             "navigationBarTitleText": "我的积分"
           }

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

@@ -0,0 +1,104 @@
+<template>
+  <view class="cart_list" v-for="item in 5">
+    <view class="chelvc-flex-item store">
+      <u-radio-group>
+        <u-radio>
+          顺风租车
+          <u-icon name="arrow-right" />
+        </u-radio>
+      </u-radio-group>
+      <view class="">领券</view>
+    </view>
+    <view class="cartList chelvc-flex">
+      <u-radio-group>
+        <u-radio>
+          <image src="@/static/logo.png" mode="scaleToFill" />
+        </u-radio>
+      </u-radio-group>
+      <view>
+        <view class="text-title">23款大众捷达VS5(越野)+市区免费+市区免车</view>
+        <view class="chelvc-flex-item">
+          <view class="chelvc-flex">
+            <view>
+              <text class="text-22">￥</text>
+              <text style="font-size: 30rpx; font-weight: 800">450</text>
+            </view>
+            <view class="price chelvc-flex-item">
+              <text>预计到手价</text>
+              <text class="text-22">￥</text>
+              <text style="font-size: 26rpx; font-weight: 800">196</text>
+            </view>
+          </view>
+          <view class="addStyle">x 1</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      style: Array,
+      default: [],
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.cart_list {
+  height: 310rpx;
+  padding: 10rpx 20rpx;
+  border-radius: 10rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+
+  .store {
+    height: 50rpx;
+  }
+  .cartList {
+    margin-top: 15rpx;
+    image {
+      width: 200rpx;
+      height: 200rpx;
+      margin-right: 20rpx;
+      border-radius: 10rpx;
+    }
+  }
+
+  .text-title {
+    font-size: 32rpx;
+    font-weight: 800;
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    margin: 20rpx 0 60rpx;
+  }
+
+  .price {
+    width: 185rpx;
+    height: 30rpx;
+    padding: 10rpx;
+    font-size: 24rpx;
+    color: #f66e0d;
+    margin-left: 10rpx;
+    margin-bottom: 10rpx;
+    border-radius: 30rpx;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .addStyle {
+    height: 40rpx;
+    width: 75rpx;
+    border-radius: 40rpx;
+    line-height: 40rpx;
+    font-size: 24rpx;
+    text-align: center;
+    color: #7f7f7f;
+    border: 1rpx solid #7f7f7f;
+  }
+}
+</style>

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

@@ -1,10 +1,86 @@
 <template>
-  <div>购物车</div>
+  <view class="cart">
+    <view class="manage">
+      <view>管理</view>
+      <!-- <view>退出管理</view> -->
+    </view>
+    <!-- 列表 -->
+    <CartList></CartList>
+
+    <!-- 底部 -->
+    <view class="bottom chelvc-flex-item">
+      <u-radio-group>
+        <u-radio> 全选 </u-radio>
+      </u-radio-group>
+      <view class="bottom-price">
+        <view>
+          <text style="font-size: 22rpx; color: #333">合计：</text>
+          <text style="font-size: 22rpx">￥</text>
+          <text style="font-size: 34rpx; font-weight: 800">195</text>
+        </view>
+        <view class="favorable chelvc-flex">
+          <text style="margin-right: 10rpx">
+            已优惠
+            <text style="font-weight: 800">￥255</text>
+          </text>
+          <view class="chelvc-flex">
+            <text style="margin-right: 5rpx">优惠明细</text>
+            <u-icon name="arrow-up" color="#fe7b21" size="12" />
+          </view>
+        </view>
+      </view>
+      <view class="settleAccount">结算(111)</view>
+    </view>
+  </view>
 </template>
 
 <script>
-export default {};
+import CartList from './CartList.vue';
+export default {
+  components: { CartList },
+};
 </script>
 
 <style lang="scss" scoped>
-</style>
+.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;
+  }
+
+  .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;
+    }
+    .settleAccount {
+      width: 160rpx;
+      height: 60rpx;
+      color: #fff;
+      display: flex;
+      background-color: #fe641c;
+      justify-content: center;
+      align-items: center;
+      font-size: 26rpx;
+      border-radius: 30rpx;
+    }
+  }
+}
+</style>

src/pages/client/clientUser/collectList.vue

@@ -1,11 +1,31 @@
 <template>
   <view class="collect">
-    <view v-if="init_list.length > 0">
-      <view class="text">以下是您收藏的商品服务</view>
-      <!-- 收藏的服务 -->
-      <serviceItem :item="init_list" :skipType="1"></serviceItem>
+    <view class="collect_list">
+      <u-tabs
+        :list="listCollect"
+        @click="clickCollect"
+        lineWidth="30"
+        lineColor="#5992bb"
+        :activeStyle="{
+          color: '#303133',
+          fontWeight: 'bold',
+          transform: 'scale(1.05)',
+        }"
+        :inactiveStyle="{
+          color: '#606266',
+          transform: 'scale(1)',
+        }"
+        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
+      />
+    </view>
+    <view>
+      <view v-if="init_list.length > 0">
+        <view class="text">以下是您收藏的商品服务</view>
+        <!-- 收藏的服务 -->
+        <serviceItem :item="init_list" :skipType="1"></serviceItem>
+      </view>
+      <u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
     </view>
-    <u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
   </view>
 </template>
 
@@ -28,6 +48,16 @@ export default {
         latitude: null, //纬度
       },
       init_list: [],
+      listCollect: [
+        {
+          id: 1,
+          name: '商家',
+        },
+        {
+          id: 1,
+          name: '服务',
+        },
+      ],
     };
   },
   onLoad() {
@@ -61,20 +91,37 @@ export default {
     // 初始化列表信息
     handlerInitList() {
       maintainFavoritePaging(this.queryParams).then(res => {
-        res.data.map(rs => {
-          this.init_list.push(rs.simpleMerchantVO);
-        });
+        if (res.code == 200 && res.data) {
+          res.data.map(rs => {
+            this.init_list.push(rs.simpleMerchantVO);
+          });
+        } else {
+          uni.showToast({
+            title: '数据请求失败',
+            icon: 'none',
+          });
+        }
       });
     },
+
+    clickCollect(index) {},
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .collect {
-  height: 100vh;
+  min-height: 100vh;
   background-color: #efefef;
 
+  &_list {
+    display: flex;
+    height: 70rpx;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    margin-bottom: 40rpx;
+  }
   .text {
     text-align: center;
     padding: 40rpx;

src/pages/client/clientUser/myScore.vue

@@ -1,225 +0,0 @@
-<template>
-  <view class="myPoints">
-    <!-- 积分和积分签到 -->
-    <view class="signIn">
-      <view>20000</view>
-      <view class="signIn-item" @tap="$Router.push('/pages/points/checkIn/index')">
-        <text>签到获取积分</text>
-        <u-icon name="arrow-right" color="#fff" size="16"></u-icon>
-      </view>
-    </view>
-
-    <!-- 积分列表 -->
-    <view class="integral">
-      <u-grid :border="false" col="4">
-        <u-grid-item
-          v-for="(listItem, listIndex) in list1"
-          :key="listIndex"
-          @tap="$Router.push(listItem.url)"
-        >
-          <u-icon :name="listItem.name" :size="40" color="#347caf" />
-          <text class="integral-text">{{ listItem.title }}</text>
-        </u-grid-item>
-      </u-grid>
-    </view>
-
-    <!-- 邀请好友 -->
-    <view class="invite">
-      <view class="invite-item">
-        <view class="invite-text">
-          <u-icon name="red-packet" color="#f9cf99" size="28" />
-          <text class="friends">邀请好友</text>
-        </view>
-        <view class="gotoInvite">去邀请</view>
-      </view>
-      <view class="inviteFriends">
-        <view class="flex-invite">
-          <u-icon name="scan" color="#f9cf99" size="20" />
-          <text class="scan-text">当面扫描</text>
-        </view>
-        <text>|</text>
-        <view class="flex-invite">
-          <u-icon name="weixin-fill" color="#28c445" size="20" />
-          <text class="scan-text">微信邀请</text>
-        </view>
-      </view>
-    </view>
-
-    <!-- 获取积分方式 -->
-    <view class="method">
-      <u-cell-group :border="false" v-for="(item, index) in list2" :key="index">
-        <u-cell
-          size="mini"
-          :border="false"
-          :icon="item.icon"
-          :title="item.title"
-          isLink
-          :url="item.url"
-        />
-      </u-cell-group>
-    </view>
-  </view>
-</template>
-
-<script>
-import { getUserTotalScore } from '@/api/client/score';
-export default {
-  data() {
-    return {
-      totalScore: 0,
-      list1: [
-        {
-          name: 'photo',
-          title: '积分说明',
-          url: '/pages/points/instructions/index',
-        },
-        {
-          name: 'lock',
-          title: '积分明细',
-          url: '/pages/points/detail/index',
-        },
-        {
-          name: 'star',
-          title: '积分提现',
-          url: '/pages/points/withdraw/index',
-        },
-        {
-          name: 'hourglass',
-          title: '积分活动',
-          url: '/pages/points/activity/index',
-        },
-      ],
-      list2: [
-        {
-          icon: 'red-packet',
-          title: '发帖',
-          url: '/pages/pointMethod/foren/index',
-        },
-        {
-          icon: 'red-packet',
-          title: '消费',
-          url: '/pages/pointMethod/consume/index',
-        },
-        {
-          icon: 'red-packet',
-          title: '点评',
-          url: '/pages/pointMethod/comment/index',
-        },
-        {
-          icon: 'red-packet',
-          title: '分享',
-          url: '/pages/pointMethod/share/index',
-        },
-        {
-          icon: 'red-packet',
-          title: '回帖',
-          url: '/pages/pointMethod/recover/index',
-        },
-        {
-          icon: 'red-packet',
-          title: '广告',
-          url: '/pages/pointMethod/advertise/index',
-        },
-      ],
-    };
-  },
-  onLoad() {
-    getUserTotalScore().then(res => {
-      this.totalScore = res.data.data;
-    });
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.myPoints {
-  /* 签到获取积分 */
-  height: 100vh;
-  margin-bottom: 50rpx;
-  background-color: #efefef;
-
-  .signIn {
-    height: 300rpx;
-    font-size: 35px;
-    color: #fff;
-    padding-top: 40px;
-    text-align: center;
-    background-color: #347caf;
-
-    .signIn-item {
-      display: flex;
-      font-size: 16px;
-      justify-content: center;
-    }
-  }
-
-  /* 积分列表 */
-  .integral {
-    height: 220rpx;
-    padding-top: 20px;
-    box-sizing: border-box;
-    border-radius: 20rpx;
-    background-color: #fff;
-    margin: -100rpx 20rpx 30rpx 20rpx;
-  }
-
-  /* 邀请好友 */
-  .invite {
-    margin: 0 20rpx;
-    padding: 10px;
-    height: 220rpx;
-    background-color: #fff;
-
-    .invite-item {
-      display: flex;
-      justify-content: space-between;
-
-      .invite-text {
-        display: flex;
-      }
-
-      .gotoInvite {
-        width: 60px;
-        height: 30px;
-        color: #fff;
-        line-height: 30px;
-        border-radius: 15px;
-        text-align: center;
-        background-color: #347caf;
-      }
-
-      .friends {
-        margin-top: 5px;
-      }
-    }
-
-    .inviteFriends {
-      width: 500rpx;
-      height: 90rpx;
-      display: flex;
-      border-radius: 45rpx;
-      margin: 50rpx 0 0 80rpx;
-      padding: 25rpx 30rpx;
-      box-sizing: border-box;
-      background-color: #e6f5fd;
-      justify-content: space-between;
-
-      .flex-invite {
-        display: flex;
-      }
-
-      .scan-text {
-        margin-top: 2px;
-        color: #626c79;
-      }
-    }
-  }
-
-  /* 获取积分的方式 */
-  .method {
-    height: 460rpx;
-    background-color: #fff;
-    margin: 40rpx 20rpx 100rpx 20rpx;
-  }
-}
-</style>

src/pages/client/clientUser/myScore/index.scss

@@ -0,0 +1,99 @@
+.myPoints {
+  /* 签到获取积分 */
+  min-height: 100vh;
+  background-color: #efefef;
+  box-sizing: border-box;
+
+  .signIn {
+    height: 240rpx;
+    font-size: 70rpx;
+    color: #fff;
+    text-align: center;
+    position: relative;
+    margin-bottom: 100rpx;
+    background-color: #347caf;
+    padding: 60rpx 20rpx 0 20rpx;
+    .signIn-item {
+      display: flex;
+      font-size: 16px;
+      justify-content: center;
+    }
+    /* 积分列表 */
+    .integral {
+      width: 95%;
+      height: 140rpx;
+      border-radius: 10rpx;
+      background-color: #fff;
+      position: absolute;
+      bottom: -80rpx;
+      left: 20rpx;
+      font-size: 24rpx;
+      color: #347caf;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .list {
+    padding: 0 20rpx;
+    /* 邀请好友 */
+
+    .invite {
+      height: 220rpx;
+      padding: 10px;
+      background-color: #fff;
+      border-radius: 10rpx;
+      .invite-item {
+        display: flex;
+        justify-content: space-between;
+
+        .invite-text {
+          display: flex;
+        }
+
+        .gotoInvite {
+          width: 60px;
+          height: 30px;
+          color: #fff;
+          line-height: 30px;
+          border-radius: 15px;
+          text-align: center;
+          background-color: #347caf;
+        }
+
+        .friends {
+          margin-top: 5px;
+        }
+      }
+
+      .inviteFriends {
+        width: 500rpx;
+        height: 90rpx;
+        display: flex;
+        border-radius: 45rpx;
+        margin: 50rpx 0 0 80rpx;
+        padding: 25rpx 30rpx;
+        box-sizing: border-box;
+        background-color: #e6f5fd;
+        justify-content: space-between;
+
+        .flex-invite {
+          display: flex;
+        }
+
+        .scan-text {
+          margin-top: 2px;
+          color: #626c79;
+        }
+      }
+    }
+
+    /* 获取积分的方式 */
+    .method {
+      margin-top: 20rpx;
+      padding: 10px;
+      border-radius: 10rpx;
+      background-color: #fff;
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+<template>
+  <view class="myPoints">
+    <!-- 积分和积分签到 -->
+    <view class="signIn">
+      <view>
+        <view>20000</view>
+        <view class="signIn-item">
+          <text>签到获取积分</text>
+          <u-icon name="arrow-right" color="#fff" size="16"></u-icon>
+        </view>
+      </view>
+      <!-- 积分列表 -->
+      <view class="integral">
+        <u-grid :border="false" col="4">
+          <u-grid-item
+            v-for="(listItem, listIndex) in pointList"
+            :key="listIndex"
+            @tap="$Router.push(listItem.url)"
+          >
+            <u-icon :name="listItem.name" :size="40" color="#347caf" />
+            <text class="integral-text">{{ listItem.title }}</text>
+          </u-grid-item>
+        </u-grid>
+      </view>
+    </view>
+
+    <view class="list">
+      <!-- 邀请好友 -->
+      <view class="invite">
+        <view class="invite-item">
+          <view class="invite-text">
+            <u-icon name="red-packet" color="#f9cf99" size="28" />
+            <text class="friends">邀请好友</text>
+          </view>
+          <view class="gotoInvite">去邀请</view>
+        </view>
+        <view class="inviteFriends">
+          <view class="flex-invite">
+            <u-icon name="scan" color="#f9cf99" size="20" />
+            <text class="scan-text">当面扫描</text>
+          </view>
+          <text>|</text>
+          <view class="flex-invite">
+            <u-icon name="weixin-fill" color="#28c445" size="20" />
+            <text class="scan-text">微信邀请</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 获取积分方式 -->
+      <view class="method">
+        <u-cell-group :border="false" v-for="(item, index) in gatewayList" :key="index">
+          <u-cell
+            size="mini"
+            :border="false"
+            :icon="item.icon"
+            :title="item.title"
+            isLink
+            :url="item.url"
+          />
+        </u-cell-group>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getUserTotalScore } from '@/api/client/score';
+import { pointList, gatewayList } from './score';
+export default {
+  data() {
+    return {
+      totalScore: 0,
+      pointList,
+      gatewayList,
+    };
+  },
+  onLoad() {
+    getUserTotalScore().then(res => {
+      // this.totalScore = res.data.data;
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

src/pages/client/clientUser/myScore/score.js

@@ -0,0 +1,55 @@
+export const pointList = [
+  {
+    name: 'photo',
+    title: '积分说明',
+    url: '',
+  },
+  {
+    name: 'lock',
+    title: '积分明细',
+    url: '',
+  },
+  {
+    name: 'star',
+    title: '积分提现',
+    url: '',
+  },
+  {
+    name: 'hourglass',
+    title: '积分活动',
+    url: '',
+  },
+];
+
+export const gatewayList = [
+  {
+    icon: 'red-packet',
+    title: '发帖',
+    url: '',
+  },
+  {
+    icon: 'red-packet',
+    title: '消费',
+    url: '',
+  },
+  {
+    icon: 'red-packet',
+    title: '点评',
+    url: '',
+  },
+  {
+    icon: 'red-packet',
+    title: '分享',
+    url: '',
+  },
+  {
+    icon: 'red-packet',
+    title: '回帖',
+    url: '',
+  },
+  {
+    icon: 'red-packet',
+    title: '广告',
+    url: '',
+  },
+];

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

@@ -101,7 +101,7 @@
 </template>
 
 <script>
-import { getCurrentLocation, getHomePageApi, getSwwiperListApi } from '@/api/client/home';
+import { getCurrentLocation, getHomePageApi, getSwiperListApi } from '@/api/client/home';
 import { mapGetters } from 'vuex';
 import RecommendItem from '@/components/merchant/RecommendItem.vue';
 import HotItem from '@/components/merchant/HotItem.vue';
@@ -163,7 +163,7 @@ export default {
 
   watch: {
     location: {
-      handler: async function (newVal, oldVal) {
+      handler: async function (newVal) {
         const result = await getCurrentLocation(newVal);
         const param = Object.assign(
           {},
@@ -181,7 +181,6 @@ export default {
     uni.hideTabBar({
       animation: false,
     });
-
     this.getSwiperList();
   },
 
@@ -209,9 +208,9 @@ export default {
   methods: {
     /* 轮播图 */
     getSwiperList() {
-      getSwiperListApi().then(res => {
-        console.log(res);
-      });
+      // getSwiperListApi().then(res => {
+      //   console.log(res);
+      // });
     },
 
     // 获取首页数据
@@ -222,7 +221,9 @@ export default {
           // 将分类数据做缓存处理
           this.$store.commit('SET_CATEGORIES', this.homeData.categories);
         })
-        .catch(err => {});
+        .catch(err => {
+          console.log(err);
+        });
     },
 
     // 手动选择城市

src/pages/client/tabBar/mine/TapList.vue

@@ -89,8 +89,9 @@ export default {
 .other-out-box {
   margin: 20rpx;
   padding: 20rpx 10rpx;
+  border-radius: 10rpx;
   margin-top: 0;
   box-sizing: border-box;
   background-color: $uni-bg-color;
 }
-</style>
+</style>

src/pages/client/tabBar/mine/mine.js

@@ -7,12 +7,12 @@ export const collectList = [
   {
     name: 'lock',
     title: '积分',
-    url: '/pages/client/clientUser/myScore',
+    url: '/pages/client/clientUser/myScore/index',
   },
   {
     name: 'star',
     title: '购物车',
-    url: '/pages/client/clientUser/cart/index ',
+    url: '/pages/client/clientUser/cart/index',
   },
   {
     name: 'hourglass',

src/uni.scss

@@ -1,5 +1,4 @@
 @import 'uview-ui/theme.scss';
-/* 颜色变量 */
 
 /* 行为相关颜色 */
 $uni-color-primary: #5992bb;