Feat：购物车推荐商品

api/user.js

@@ -576,4 +576,13 @@ export function getUserSpreadRule(param) {
  */
 export function getHistory(params) {
     return request.get('/history/list', params)
+}
+
+/**
+ * 购物车猜你喜欢
+ * @param {*} params 
+ * @returns 
+ */
+export function getUserLike(params) {
+    return request.get('/cart/guessYouLike',params)
 }

assets/css/v12-style.less

@@ -3,8 +3,8 @@
 @dark-color: #333333;
 @white-color: #fff;
 
-@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727;
-@classnames: primary, dark, white, secondary-dark, grey, dark1, red;
+@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727, #FFC543;
+@classnames: primary, dark, white, secondary-dark, grey, dark1, red, yellow;
 /*=====================================*/ 
 
 each(@colors, {

pages/cart.vue

@@ -23,8 +23,7 @@
       </view>
       <view
         v-if="list.length === 0"
-        class="tc"
-        style="margin-top: 300rpx"
+        class="tc v12-my-6"
       >
         <image
           :src="$VUE_APP_RESOURCES_URL + '/orderIcon/购物车2.png'"
@@ -32,7 +31,67 @@
           mode="scaleToFill"
         />
       </view>
-      
+      <view v-if="list.length === 0">
+        <view class="v12-px-14">
+          <u-divider
+            text=" · 猜你喜欢 · "
+            textColor="#333"
+            lineColor="#333"
+            textPosition="center"
+          ></u-divider>
+        </view>
+        <view class="userlike-wrap">
+          <view 
+            v-for="(item, index) in userLikeList" 
+            :key="index"
+            @click="goGoodsCon(item)"
+            class="v12-radius-20 v12-white v12-mb-3"
+          >
+            <view class="img-wrap">
+              <image :src="item.image" class="img"></image>
+              <image
+                v-if="item.isOldBrand"
+                :src="webUrl + '/home/old-mark.png'"
+                class="mark-img"
+              />
+              <image
+                v-if="item.isLandmarkGoods"
+                :src="webUrl + '/home/mark-land.png'"
+                class="mark-img"
+              />
+              <image
+                v-if="item.isCountyFamous"
+                :src="webUrl + '/home/qixian-mark.png'"
+                class="mark-img"
+              />
+            </view>
+            <view class="info-wrap v12-pa-2">
+              <view class="more-t v12-font-28 v12-dark-text v12-mb-2">
+                {{ item.storeName }}
+              </view>
+              <view v-if="item.bestContent" class="more-t v12-mb-2 v12-font-24 v12-yellow-text v12-font-weight-300">
+                {{ item.bestContent }}
+              </view>
+              <view class="v12-align-center v12-primary-text v12-font-24 v12-mb-2" v-if="item.couponName">
+                <view class="v12-primary-border v12-radius-8 v12-px-1">券</view>
+                <view class="v12-primary-border v12-radius-8 v12-px-1">{{ item.couponName }}</view>
+              </view>
+              <view class="v12-justify-between v12-align-center">
+                <view class="v12-font-40 v12-font-bold v12-primary-text">
+                  <text class="">￥</text>
+                  <text class="price-txt price-red">{{ item.price }}</text>
+                </view>
+                <view class="btn">
+                  <image
+                    :src="webUrl + '/home/icon-cart.png'"
+                    class="img-icon"
+                  />
+                </view>
+              </view>
+            </view>
+           </view>
+        </view>
+      </view>
       <view
         v-for="(item, index) in list"
         :key="index"
@@ -151,7 +210,7 @@
           </view>
         </view>
       </view>
-      <view class="footer-fixed flex jc-between ai-center">
+      <view class="footer-fixed flex jc-between ai-center" v-if="list.length > 0">
         <view style="margin-left: 32rpx;">
           <CheckboxIcon
             style="margin-right: 24rpx;"
@@ -270,7 +329,7 @@
 </template>
 <script>
 import XddTabbar from '@/components/xdd-tabbar'
-import {getAddressList} from "@/api/user";
+import {getAddressList, getUserLike} from "@/api/user";
 import {
   changeCartNum,
   getCartGroup,
@@ -304,7 +363,8 @@ export default {
       pageKeyId: Object.freeze('landmarkGoodsIndex'),
       isEdit: false,
       addressList:[],
-      addressInfo: {}
+      addressInfo: {},
+      userLikeList: []
     }
   },
   computed: {
@@ -349,6 +409,14 @@ export default {
     this.pageToHideHandle()
   },
   methods: {
+    goGoodsCon(item) {
+      this.$yrouter.push({
+        path: '/pages/shop/GoodsCon/index',
+        query: {
+          id: item.productId
+        }
+      })
+    },
     closePopup() {
       this.show = false
     },
@@ -409,6 +477,8 @@ export default {
         this.isLoad = true
         this.list = res.data['valid']
         this.handleAll(false)
+        const _res = await getUserLike()
+        this.userLikeList = _res.data
       }
     },
     handleAll(state) {
@@ -670,6 +740,10 @@ export default {
 </script>
 
 <style scoped lang="less">
+.img-icon{
+  width: 48rpx;
+  height: 48rpx;
+}
 .list-wrap{
   height: calc(100vh - 410rpx);
   overflow: auto;
@@ -937,4 +1011,30 @@ view {
 .tabbar-page {
   padding: 0 0 180rpx 0;
 }
+.userlike-wrap{
+  column-count: 2;
+  padding: 0 20rpx;
+}
+.img {
+  position: relative;
+  z-index: 2;
+  display: block;
+  width: 345rpx;
+  height: 345rpx;
+  border-radius: 20rpx;
+}
+.mark-img {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  z-index: 3;
+  display: block;
+  width: 84rpx;
+  height: 74rpx;
+}
+.img-wrap{
+  position: relative;
+  overflow: hidden;
+  border-radius: 20rpx;
+}
 </style>