商城改版

src/api/allApi.js

@@ -1,5 +1,29 @@
 import request from '@/utils/request'
 
+//热门商品
+export function hotSkuList() {
+  return request({
+    url: '/mall-sku/hotSku/list',
+    method: 'get',
+  })
+}
+//商城新品
+export function newSkuList() {
+  return request({
+    url: '/mall-sku/newSku/list',
+    method: 'get',
+  })
+}
+
+//首页活动
+export function indexList() {
+  return request({
+    url: '/mall-act/user/index/list',
+    method: 'get',
+  })
+}
+
+
 //获取培训上传备注
 export function remarkHtml(query) {
   return request({

src/components/AppSidebar.vue

@@ -12,7 +12,7 @@
         </nav>
         <div class="hot-list-container">
             <div class="hot-list-item">
-                <div class="hot-item-header">
+                <!-- <div class="hot-item-header">
                     <div class="hot-title">
                         <img src="../assets/image/hot.png"
                             type="icon" alt="icon" class="hot-icon">
@@ -21,18 +21,61 @@
                 </div>
                 <div class="divider" style="margin-bottom: 4px;">
                     <div class="content"></div>
+                </div> -->
+                <el-radio-group v-model="tabType" size="small" @change="tabChange">
+                    <el-radio-button label="hot">热门商品</el-radio-button>
+                    <el-radio-button label="new">商城新品</el-radio-button>
+                </el-radio-group>
+                <ul class="hot-item-body">
+                    <div class="skeleton">
+                        <li v-for="(item,index) in goodsList" :key="index" class="hot-item">
+                            <a href="/home/pointsMall">
+                                <img style="width: 150px;height: 150px;" :src="item.imgUrl" alt="">
+                            </a>
+
+                            <div class="hot-item-text" :class="tabType=='new'?'justifyCenter':'justifyBetween'">
+                                <div class="body-index" v-if="tabType=='hot'">
+                                    {{ index + 1 }}
+                                </div> 
+                                <div class="title-articles">
+                                    ￥{{  item.price }}
+                                </div> 
+                            </div>
+                        </li>
+                    </div>
+                </ul>
+            </div>
+        </div>
+        <div class="hot-list-container sticky-block">
+            <div class="hot-list-item">
+                <!-- <div class="hot-item-header">
+                    <div class="hot-title">
+                        <img src="../assets/image/hot.png"
+                            type="icon" alt="icon" class="hot-icon">
+                        <span title="热门商品" class="title-text">热门商品</span>
+                    </div>
                 </div>
+                <div class="divider" style="margin-bottom: 4px;">
+                    <div class="content"></div>
+                </div> -->
+                <el-radio-group v-model="tabType" size="small" @change="tabChange">
+                    <el-radio-button label="hot">热门商品</el-radio-button>
+                    <el-radio-button label="new">商城新品</el-radio-button>
+                </el-radio-group>
                 <ul class="hot-item-body">
                     <div class="skeleton">
-                        <li v-for="(item,index) in hotGoodsList" :key="index" class="hot-item">
-                            <div class="body-index" :class="index == 0 ? 'first-index' : index == 1 ? 'second-index' : index == 2 ? 'third-index' : '' ">
-                                {{ index + 1 }}
-                            </div> 
-                            <div class="hot-item-text">
-                                <img style="width: 30px;height: 30px;" :src="item.url" alt="">
-                                <a :href="item.path" class="title-articles" :title="item.name">
-                                    {{ item.name }}
-                                </a> 
+                        <li v-for="(item,index) in goodsList" :key="index" class="hot-item">
+                            <a href="/home/pointsMall">
+                                <img style="width: 150px;height: 150px;" :src="item.imgUrl" alt="">
+                            </a>
+
+                            <div class="hot-item-text" :class="tabType=='new'?'justifyCenter':'justifyBetween'">
+                                <div class="body-index" v-if="tabType=='hot'">
+                                    {{ index + 1 }}
+                                </div> 
+                                <div class="title-articles">
+                                    ￥{{  item.price }}
+                                </div> 
                             </div>
                         </li>
                     </div>
@@ -44,30 +87,13 @@
 </template>
 <script>
 import { removeTab } from '@/utils/auth'
+import { hotSkuList,newSkuList } from "@/api/allApi";
 export default {
     name: 'AppSidebar',
     data() {
         return {
-            hotGoodsList:[
-                {
-                    id:1,
-                    path:'/home/pointsMall/redeem?id=20&name=goodsNotice&type=8',
-                    url:'https://xiaoyou.dgtis.com/images/image/2023/05/16/8nfqz3mxe754qtcnxdia.png',
-                    name:'爱奇艺会员年卡',
-                },
-                {
-                    id:2,
-                    path:'/home/pointsMall/redeem?id=19&name=goodsNotice&type=8',
-                    url:'https://xiaoyou.dgtis.com/images/image/2023/07/27/vcsqrnhcgzsr5yqpdolj.jpg',
-                    name:'优酷会员年卡',
-                },
-                {
-                    id:3,
-                    path:'/home/pointsMall/redeem?id=18&name=goodsNotice&type=8',
-                    url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
-                    name:'百度网盘年度会员',
-                },
-            ],
+            tabType:'hot',
+            goodsList:[],
             sideBarList: [
                 {
                     value: 'index',
@@ -149,6 +175,20 @@ export default {
         };
     },
     methods: {
+        tabChange(val){
+           this.getGoodsInfo(val);
+        },
+        getGoodsInfo(val){
+            if(val=='hot'){
+                hotSkuList().then(response=>{
+                    this.goodsList = response.data.data.list;
+                });
+            }else{
+                newSkuList().then(response=>{
+                    this.goodsList = response.data.data.list;
+                });
+            } 
+        },
         removeTab() {
             removeTab();
         },
@@ -165,7 +205,7 @@ export default {
         // 保存滚动值，这是兼容的写法
         handleScroll() {
             var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-            if (scrollTop >= 80) {
+            if (scrollTop >= 1200) {
                 this.isActive = true
             } else {
                 this.isActive = false
@@ -177,6 +217,7 @@ export default {
     },
     created() {
         this.getRoute();
+        this.getGoodsInfo('hot');
     },
     mounted() {
         window.addEventListener('scroll', this.handleScroll)
@@ -191,9 +232,9 @@ export default {
 <style scoped>
 .index-nav {
     width: 180px;
-    position: -webkit-sticky;
+    /* position: -webkit-sticky;
     position: sticky;
-    top: 80px;
+    top: 80px; */
     margin-right: 20px;
     height: -webkit-fit-content;
     height: -moz-fit-content;
@@ -203,7 +244,7 @@ export default {
 }
 
 .index-nav-top {
-    top: 20px;
+    /* top: 20px; */
     /* max-height: calc(100vh - 40px); */
 }
 
@@ -327,7 +368,7 @@ ul {
 }
 .hot-list-item .hot-item-body .hot-item {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     align-items: center;
     padding: 8px;
     border-radius: 4px;
@@ -338,12 +379,15 @@ li {
     list-style: none;
 }
 .hot-list-item .hot-item-body .hot-item .body-index{
-    font-weight: 800;
-    min-width: 18px;
-    line-height: 22px;
-    margin: 0 .2rem 0 0;
-    color: #8a919f;
-    text-align: left;
+    width: 18px;
+    height: 18px;
+    font-size: 16px;
+    border-radius: 50%;
+    background-color: #f64242;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
 }
 .hot-list-item .hot-item-body .hot-item .first-index{
     background: linear-gradient(180deg, #f64242 20%, rgba(246, 66, 66, .4) 80%);
@@ -363,23 +407,49 @@ li {
     background-clip: text;
     color: transparent;
 }
+.justifyCenter{
+    justify-content: center;
+}
+.justifyBetween{
+    justify-content: space-between;
+}
 .hot-list-item .hot-item-body .hot-item .hot-item-text{
+    width: 160px;
     display: flex;
     align-items: center;
-    color: #252933;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    flex: 1;
 }
 .hot-list-item .hot-item-body .hot-item .title-articles{
-    font-size: 0.9rem;
-    margin-left: 5px;
-    color: #252933;
-    display: inline-block;
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+    font-size: 16px;
+    color: red;
+    font-weight: bold;
+}
+::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
+   
+    background-color: red;
+    border-color: red;
+    box-shadow: -1px 0 0 0 red;
+}
+::v-deep .el-radio-button__inner:hover {
+    color: #606266;
+}
+
+.sticky-block {
+    width: 180px;
+    background-color: transparent;
+    box-sizing: border-box;
+    position: fixed;
+    box-shadow: none;
+    opacity: 0;
+    transition: all .2s;
+    z-index: -1;
+    top: 67px;
+    pointer-events: none;
+}
+
+.index-nav.index-nav-top .sticky-block {
+    opacity: 1;
+    top: 20px;
+    z-index: 5;
+    pointer-events: all;
 }
 </style>

src/components/SiderInfo.vue

@@ -33,14 +33,14 @@
         </div>
         <div class="sidebar-block banner-block" v-for="(item,index) in activitykist" :key="index">
             <div class="banner banner">
-                    <img :src="item.img" width="240" height="200" class="banner-image">
+                <img :src="item.sideImgUrl" width="240" height="200" class="banner-image">
                     <div class="ctrl-box">
                         <div class="label">
-                            <span>{{ item.name }}</span>
+                            <span>{{ item.title }}</span>
                         </div>
-                        <div class="status" @click="goFestiveEvents(item.status)">
-                            <span v-if="item.status==0" style="color: #1e80ff;">{{ item.statusName }}</span>
-                            <span v-else>{{ item.statusName }}</span>
+                        <div class="status" @click="goFestiveEvents(item.joinStatus)">
+                            <span v-if="item.joinStatus==1" style="color: #1e80ff;">未参加</span>
+                            <span v-else>{{ item.joinStatus==2?'已参加':'未开启' }}</span>
                         </div>
                     </div>
                 </div>
@@ -64,14 +64,14 @@
         </div>
             <div class="sidebar-block banner-block" v-for="(item,index) in activitykist" :key="index">
                 <div class="banner banner">
-                    <img :src="item.img" width="240" height="200" class="banner-image">
+                    <img :src="item.sideImgUrl" width="240" height="200" class="banner-image">
                     <div class="ctrl-box">
                         <div class="label">
-                            <span>{{ item.name }}</span>
+                            <span>{{ item.title }}</span>
                         </div>
-                        <div class="status" @click="goFestiveEvents(item.status)">
-                            <span v-if="item.status==0" style="color: #1e80ff;">{{ item.statusName }}</span>
-                            <span v-else>{{ item.statusName }}</span>
+                        <div class="status" @click="goFestiveEvents(item.joinStatus)">
+                            <span v-if="item.joinStatus==1" style="color: #1e80ff;">未参加</span>
+                            <span v-else>{{ item.joinStatus==2?'已参加':'未开启' }}</span>
                         </div>
                     </div>
                 </div>
@@ -81,28 +81,29 @@
 </template>
 <script>
 import { mapGetters } from 'vuex'
+import { indexList } from "@/api/allApi";
 export default {
     data() {
         return {
             activitykist:[
-                {
-                    status:0,
-                    statusName:'未参加',
-                    name:'每日签到',
-                    img:'https://xiaoyou.dgtis.com/images/image/2024/08/23/xd5idemwj5itooa9t2ee.jpg'
-                },
-                {
-                    status:1,
-                    statusName:'已参加',
-                    name:'每周竞技',
-                    img:'https://xiaoyou.dgtis.com/images/image/2024/08/23/xd5idemwj5itooa9t2ee.jpg'
-                },
-                {
-                    status:2,
-                    statusName:'未开启',
-                    name:'每月抽奖',
-                    img:'https://xiaoyou.dgtis.com/images/image/2024/08/23/xd5idemwj5itooa9t2ee.jpg'
-                }
+                // {
+                //     status:0,
+                //     statusName:'未参加',
+                //     name:'每日签到',
+                //     img:'https://xiaoyou.dgtis.com/images/image/2024/08/23/xd5idemwj5itooa9t2ee.jpg'
+                // },
+                // {
+                //     status:1,
+                //     statusName:'已参加',
+                //     name:'每周竞技',
+                //     img:'https://xiaoyou.dgtis.com/images/image/2024/08/23/xd5idemwj5itooa9t2ee.jpg'
+                // },
+                // {
+                //     status:2,
+                //     statusName:'未开启',
+                //     name:'每月抽奖',
+                //     img:'https://xiaoyou.dgtis.com/images/image/2024/08/23/xd5idemwj5itooa9t2ee.jpg'
+                // }
             ],
             hoursTip:'你好！',
             isActive: false,
@@ -114,10 +115,13 @@ export default {
     },
     created() {
         this.getHoursTip()
+        indexList().then(response=>{
+            this.activitykist = response.data.data
+        })
     },
     methods: {
         goFestiveEvents(val){
-            if(val==0){
+            if(val==1){
                 this.$router.push({
                     path: '/home/festiveEvents',
                 });

src/permission.js

@@ -4,7 +4,7 @@ import { getToken, setToken } from '@/utils/auth' // getToken from cookie
 import { lockStatus,unlock } from "@/api/allApi";
 //路由跳转之前
 router.beforeEach((to, _from, next) => {
-  setToken('1961120e1bdc270a02b55149c4b32781');
+  setToken('1899ad90994fee4b22c722a9ce5c9a7b');
   const path = to.path;
   const Authorization = to.query.Authorization
   if (path.indexOf('auth') != -1 && Authorization) { 

src/utils/request.js

@@ -4,9 +4,9 @@ import { getToken } from '@/utils/auth'
 
 // let prodBaseURL = 'https://xiaoyou.dgtis.com/admin';//正式地址
 
-let prodBaseURL = 'https://malltest.dgtis.com/';//阿里云地址
+let prodBaseURL = 'https://malltest.dgtis.com/admin';//阿里云地址
 
-let devBaseURL = 'https://xiaoyou.dgtis.com/admin';//测试地址
+let devBaseURL = 'https://malltest.dgtis.com/admin';//测试地址
 
 // create an axios instance
 const service = axios.create({

src/views/HomeView/Index.vue

@@ -4,9 +4,9 @@
             <div class="timeline-entry-list">
                 <!-- <img src="@/assets/image/banner4.png" alt="banner" class="banner"> -->
                 <div class="hot-list-wrap">
-                    <el-empty :image-size="120" v-if="bannerList.length < 1"></el-empty>
-                    <el-carousel indicator-position="none" height="120px" :interval="5000" v-if="bannerList.length > 0">
-                        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
+                    <el-empty :image-size="60" v-if="publicizeBanner.length < 1"></el-empty>
+                    <el-carousel indicator-position="none" height="120px" :interval="5000" v-if="publicizeBanner.length > 0">
+                        <el-carousel-item v-for="(item, index) in publicizeBanner" :key="index">
                             <router-link :to="item.remark">
                                 <img style="width: 100%; height: 100%" :src="item.dictValue" class="banner" />
                             </router-link>
@@ -14,16 +14,16 @@
                     </el-carousel>
                 </div>
                 <div class="hot-list-wrap">
-                    <el-empty :image-size="200" v-if="bannerList.length < 1"></el-empty>
-                    <el-carousel indicator-position="none" height="120px" :interval="5000" v-if="bannerList.length > 0">
-                        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
+                    <el-empty :image-size="60" v-if="activityBanner.length < 1"></el-empty>
+                    <el-carousel indicator-position="none" height="120px" :interval="5000" v-if="activityBanner.length > 0">
+                        <el-carousel-item v-for="(item, index) in activityBanner" :key="index">
                             <router-link :to="item.remark">
                                 <img style="width: 100%; height: 100%" :src="item.dictValue" class="banner" />
                             </router-link>
                         </el-carousel-item>
                     </el-carousel>
                 </div>
-                <div class="entry-list-container" style="margin-bottom: 20px;">
+                <!-- <div class="entry-list-container" style="margin-bottom: 20px;">
                     <div class="tab-header" style="border-bottom:none">
                         <span class="tab-title">特价商品</span>
                     </div>
@@ -34,13 +34,13 @@
                                 <a class="label" :href="item.path">
                                     <span>{{ item.name }}</span>
                                 </a>
-                                <!-- <a class="status" href="/">
+                                <a class="status" href="/">
                                     <span>已参与</span>
-                                </a> -->
+                                </a>
                             </div>
                         </div>
                     </div>
-                </div>
+                </div> -->
                 <div class="entry-list-container">
                     <div class="tab-header">
                         <span class="tab-title">最新通知</span>
@@ -85,6 +85,8 @@ export default{
   data() {
     return {
         dataInfo:'',
+        publicizeBanner:[],
+        activityBanner:[],
         bannerList: [],
         specialGoodsList:[
         {
@@ -117,8 +119,11 @@ export default{
   },
   methods:{
     getBannerList(){
-            dictList({dictType:'index_lbt'}).then(response=>{
-                this.bannerList = response.data.data; 
+            dictList({dictType:'publicize_banner'}).then(response=>{
+                this.publicizeBanner = response.data.data; 
+            })
+            dictList({dictType:'activity_banner'}).then(response=>{
+                this.activityBanner = response.data.data; 
             })
         },
     handleClickMag(id) {

src/views/HomeView/PointsMall.vue

@@ -12,13 +12,13 @@
                         </el-carousel-item>
                     </el-carousel>
                 </div>
-                <div class="entry-list-container">
+                <!-- <div class="entry-list-container">
                     <div class="tab-header" style="border-bottom:none">
                         <span class="tab-title">秒杀活动</span>
                     </div>
                     <div class="special-goods-list">
                         <div class="special-goods-item" v-for="(item,index) in specialGoodsList" :key="index">
-                            <!-- <img width="100%" :src="item.url" alt=""> -->
+                            <img width="100%" :src="item.url" alt="">
                             <div class="ctrl-box">
                                 <div class="label">
                                     <span>{{ item.name }}</span>
@@ -35,7 +35,7 @@
                             </div>
                         </div>
                     </div>
-                </div>
+                </div> -->
         <!-- <div class="notice-board">
             <div class="notice-header">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
@@ -74,21 +74,22 @@
                             {{ item.dictLabel }}
                         </div>
                     </div>
-                    <div class="tab-list" style="margin-top: 10px;">
+                    <!-- <div class="tab-list" style="margin-top: 10px;">
                         <div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in deliveryTypeList"
                             :key="item.type" @click="choseDeliveryType(item)">
                             {{ item.name }}
                         </div>
+                    </div> -->
+                    <div class="tab-list" style="margin-top: 10px;">
+                        <div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in orderByClauseList"
+                            :key="item.orderByClause" @click="changeOrderByClause(item)">
+                            <!-- <i :class="item.icon"></i> -->
+                            {{ item.name }}
+                        </div>
                         <el-input clearable style="width: 200px;" size="small" v-model="goodsName"
                         placeholder="物品名称" @blur="goodsName=$event.target.value.trim()"></el-input>
                     <el-button size="small" style="margin-left: 30px;" type="primary" @click="handleFilter">查询</el-button>
                     </div>
-                    <!-- <div class="tab-list" style="margin-top: 10px;">
-                        <div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in orderByClauseList"
-                            :key="item.orderByClause" @click="changeOrderByClause(item)">
-                            <i :class="item.icon"></i>积分
-                        </div>
-                    </div> -->
                     <div class="list-container">
                         <el-empty v-if="goodsList.length == 0" :image-size="200"></el-empty>
                         <div v-else class="prize-list">
@@ -256,7 +257,7 @@ export default {
             goodsName: '',
             productAttribute: '',//商品类型
             pointsRange: '',//积分区间
-            orderByClause: 'desc',//积分升降
+            orderByClause: 'desc',//价格,销量升降
             deliveryType: '',
             deliveryTypeList: [
             {
@@ -277,7 +278,7 @@ export default {
                 // {
                 //     type: '',
                 //     checked: true,
-                //     name: '全部'
+                //     name: '默认'
                 // },
                 // {
                 //     type: 0,
@@ -302,14 +303,34 @@ export default {
             ],
             orderByClauseList: [
                 {
-                    icon: 'el-icon-bottom',
+                    icon: '',
                     checked: true,
-                    orderByClause: 'desc',
+                    orderByClause: '',
+                    name:'默认'
+                },
+                {
+                    icon: 'el-icon-bottom',
+                    checked: false,
+                    orderByClause: 'saleAsc',
+                    name:'销量由高到低'
+                },
+                {
+                    icon: 'el-icon-top',
+                    checked: false,
+                    orderByClause: 'saleDesc',
+                    name:'销量由低到高'
+                },
+                {
+                    icon: 'el-icon-bottom',
+                    checked: false,
+                    orderByClause: 'priceAsc',
+                    name:'价格由低到高'
                 },
                 {
                     icon: 'el-icon-top',
                     checked: false,
-                    orderByClause: 'asc',
+                    orderByClause: 'priceDesc',
+                    name:'价格由高到低'
                 },
             ],
             choseList: [],
@@ -378,7 +399,7 @@ export default {
                 const dataList = response.data.data;
                 const data = {
                     dictValue: '',
-                    dictLabel: '全部'
+                    dictLabel: '默认'
                 }
                 dataList.unshift(data);
                 if (dataList.length > 0) {
@@ -399,7 +420,7 @@ export default {
                 const dataList = response.data.data;
                 const data = {
                     dictValue: '',
-                    dictLabel: '全部'
+                    dictLabel: '默认'
                 }
                 dataList.unshift(data);
                 if (dataList.length > 0) {
@@ -496,8 +517,8 @@ export default {
                 name: this.goodsName,
                 productAttribute: this.productAttribute,
                 pointsRange:this.pointsRange,
-                // orderByClause: this.orderByClause,
-                deliveryType: this.deliveryType
+                saleBySort: this.orderByClause,
+                // deliveryType: this.deliveryType
             }
 
             integralList(params).then(response => {