feat：首页编辑完成

README.md

@@ -20,3 +20,18 @@ npm run build
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+
+### 提交规范
+1. type: commit 的类型;
+2. feat: 新特性;
+3. fix: 修改问题
+4. refactor: 代码重构
+5. docs: 文档修改
+6. style: 代码格式修改, 注意不是 css 修改
+7. test: 测试用例修改
+8. chore: 其他修改, 比如构建流程, 依赖管理.
+9. scope: commit 影响的范围, 比如: route, component, utils, build..
+10. subject: commit 的概述, 建议符合  50/72 formatting
+11. body: commit 具体修改内容, 可以分为多行, 建议符合 50/72 formatting
+12. footer: 一些备注, 通常是 BREAKING CHANGE 或修复的 bug 的链接.

src/components/goodsList.vue

@@ -24,8 +24,12 @@ export default {
   props: {
     long: {
       type: Number,
-      default: 2,
+      default: 2
     },
+    url:{
+      type: String,
+      default:""
+    }
   },
   data() {
     return {
@@ -37,7 +41,7 @@ export default {
   },
   methods: {
     loadData(action = "add") {
-      post("ShuZiTeaYW/shop/getGoodsLikeByUserId").then((res) => {
+      post(this.url).then((res) => {
         if (res.status == 200) {
           this.productList = res.goods;
         }
@@ -76,7 +80,7 @@ export default {
 .product-image {
   /* height: 330upx;
         width: 330upx; */
-  border-radius: 8rpx;
+  border-radius: 10rpx 10rpx 0 0;
   width: 100%;
   height: 260rpx;
   object-fit: cover;

src/components/noticeBar.vue

@@ -0,0 +1,37 @@
+<template>
+  <uni-notice-bar
+    background-color="#fff"
+    color="#333"
+    scrollable="true"
+    single="true"
+    class="noticeBar"
+    :text="text"
+  ></uni-notice-bar>
+</template>
+
+<script>
+export default {
+  name: "noticeBar",
+  props: {
+    "text": {
+        type: String,
+        default: ""
+    }
+  },
+  components: {},
+  data() {
+    return {};
+  },
+  methods: {},
+  mounted() {},
+  watch: {},
+  computed: {},
+  filters: {},
+};
+</script>
+
+<style scoped lang='scss'>
+.noticeBar{
+    font-size: 26rpx;
+}
+</style>

src/components/swiperBanner.vue

@@ -0,0 +1,160 @@
+<template>
+	<view
+		class="swiper-container"
+		:class="[imgScale=='3:1'?'ad_swiper-container':'',imgScale=='1:1'?'ad_swiper-container1':'',imgScale=='5:2'?'ad_swiper-container52':'',imgScale=='25:17'?'ad_swiper-container25':'',imgScale=='23:7'?'ad_swiper-container37':'',radius ? radius == 1? 'radius_1' : 'radius_2' : '']"
+	>
+	    <swiper class="swiper_box"
+	        :autoplay="autoplay"
+	        :circular="circular"
+	        :interval="interval"
+	        :duration="duration"
+	        :indicator-dots="indicatorDots"
+	        :indicator-color="indicatorColor"
+	        :indicator-active-color="indicatorActiveColor"
+			@touchstart="setIsTouch"
+			@touchend="setNotTouch"
+	    >
+	        <block>
+	            <swiper-item v-for="(item,index) in imgArr" :key="index">
+	                <view class="imgsBar" @tap='goList(item)' :data-id='item.id||""'>
+	                    <image :src="item.url ? item.url : item" class="image" :mode='mode' />
+	                </view>
+	            </swiper-item>
+	        </block>
+	    </swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			imgArr: Array,
+			mode: {
+				type: String,
+				default: ''
+			}, //图片裁剪、缩放的模式
+			imgScale: String, //图片比例："1:1"；"15:7"；"3:1"；"5:2"；"25:17"；"23:7"默认："15:7"
+			autoplay: Boolean, //是否自动切换
+			circular: Boolean, //是否采用衔接滑动
+			interval: Number, //自动切换时间间隔
+			duration: Number, //滑动动画时长
+			indicatorDots: {
+				type: Boolean,
+				default: true
+			}, //是否显示面板指示点
+			indicatorColor: {
+				type: String,
+				default: "rgba(255, 255, 255, .3)"
+			}, //"rgba(0, 0, 0, .3)" 
+			indicatorActiveColor: {
+				type: String,
+				default: "#fff"
+			}, //"#000"
+			radius: { // 圆角 1：10rpx；2：16rpx
+			    type: Number,
+			    default: 0
+			},
+		},
+		data() {
+			return {
+				
+			};
+		},
+		methods: {
+		    goList: function (data) {
+				this.$emit("goList",data);
+		    },
+			setIsTouch:function(){
+				this.$emit('setIsTouch')
+			},
+			setNotTouch:function(){
+				this.$emit('setNotTouch')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+.swiper-container {
+    width: 100%;
+    position: relative;
+}
+
+.swiper_box {
+    width: 100%;
+    height: 330rpx;
+    overflow: hidden;
+}
+.radius_1 .swiper_box {
+    border-radius: 10rpx;
+}
+
+.radius_2 .swiper_box {
+    border-radius: 16rpx;
+}
+
+swiper-item .imgsBar {
+    width: 100%;
+    height: 330rpx;
+}
+
+.swiper-container .dots {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 20rpx;
+    display: flex;
+    justify-content: center;
+}
+
+.swiper-container .dots .dot {
+    margin: 0 8rpx;
+    width: 16rpx;
+    height: 16rpx;
+    background: #000;
+    border-radius: 50%;
+    transition: all 0.6s;
+    opacity: 0.3;
+}
+
+.swiper-container .dots .dot.active {
+    opacity: 1;
+}
+
+/* 广告图1:1 */
+.ad_swiper-container1{
+    width: 100%;
+}
+.ad_swiper-container1 .swiper_box{
+    border-radius: 0;
+}
+.ad_swiper-container1 .swiper_box,
+.ad_swiper-container1 .swiper_box swiper-item .imgsBar{
+    height: 750rpx;
+}
+
+/* 广告图3:1 */
+.ad_swiper-container .swiper_box,
+.ad_swiper-container .swiper_box swiper-item .imgsBar{
+    height: 234rpx;
+}
+/* 广告图5:2 */
+.ad_swiper-container52 .swiper_box,
+.ad_swiper-container52 .swiper_box swiper-item .imgsBar{
+    height: 272rpx;
+}
+
+// 广告图 25 ： 17
+.ad_swiper-container25 .swiper_box,
+.ad_swiper-container25 .swiper_box swiper-item .imgsBar{
+    height: 520rpx;
+}
+
+// 广告图 23 ： 7
+.ad_swiper-container37 .swiper_box,
+.ad_swiper-container37 .swiper_box swiper-item .imgsBar{
+    height: 210rpx;
+}
+
+.image{width: 100%;height: 100%;}
+</style>

src/main.js

@@ -15,6 +15,10 @@ Vue.prototype.$cof = cof;
 import hosts from "@/request/config";
 Vue.prototype.$hosts = hosts;
 
+//注册为全局组件 - 通告
+import noticeBar from "@/components/noticeBar";
+Vue.component('noticeBar', noticeBar);
+
 App.mpType = 'app'
 
 const app = new Vue({

src/pages/index/index.vue

@@ -1,29 +1,254 @@
 <template>
-	<div class='Appindex'>
-		<goodslist :long="1"/>
-	</div>
+  <div class="Appindex">
+    <!-- 顶部 -->
+    <view class="head">
+      <!-- 搜索框 -->
+      <view class="head_search">
+        <text class="iconfont">&#xe661;</text>
+        <text class="search_text">请输入搜索关键字</text>
+      </view>
+      <!-- 搜索框-end -->
+
+      <!-- 轮播图 -->
+      <swiper-banner
+        radius="1"
+        imgScale="5:2"
+        :imgArr="BannerImg"
+        :duration="1000"
+        :interval="5000"
+        :circular="true"
+        :autoplay="true"
+        @goList="goList"
+        :indicator-dots="true"
+        indicator-active-color="#12B280"
+        indicator-color="rgba(255, 255, 255, .82)"
+      ></swiper-banner>
+      <!-- 轮播图-end -->
+
+      <!-- 公告 -->
+      <view class="head_notice clearfix">
+        <view class="notice_title"
+          ><image class="gg_img" src="@/static/img/gg.png"></image
+        ></view>
+        <swiper
+          class="notice_swiper"
+          vertical
+          autoplay
+          circular
+          :interval="5000"
+          :duration="1000"
+        >
+          <swiper-item v-for="(item, index) in not_list" :key="index">
+            <text class="not_list nowrap">{{ item.contentTitle }}</text>
+            <text class="not_ico iconfont">&#xe62e;</text>
+          </swiper-item>
+        </swiper>
+      </view>
+      <!-- 公告-end -->
+
+      <!-- 金刚区 -->
+      <view class="head_area">
+        <view class="area_list" v-for="(item, index) in area_list" :key="index">
+          <image class="area_img" :src="item.url"></image>
+          <view class="area_name">{{ item.name }}</view>
+        </view>
+      </view>
+      <!-- 金刚区-end -->
+
+      <!-- 活动 -->
+      <view class="activity" v-if="spc_list.length > 0">
+        <image class="act_one_img" :src="spc_list[0].url" mode=""></image>
+        <view class="act_other">
+          <image class="act_two_img" :src="spc_list[1].url" mode=""></image>
+          <image class="act_two_img" :src="spc_list[2].url" mode=""></image>
+        </view>
+      </view>
+      <!-- 活动-end -->
+    </view>
+
+    <goodslist :url="goodslistUrl" :long="1" />
+  </div>
 </template>
 
 <script>
-import goodslist from "@/components/goodsList"
+import goodslist from "@/components/goodsList"; //商品列表
+import swiperBanner from "@/components/swiperBanner"; //轮播
 import { get, post } from "@/request/api.js";
 export default {
-	name: 'Appindex',
-	components: {
-		goodslist
-	},
-	data () {
-		return {}
-	},
-	onLoad (option) {},
-	onLaunch () {},
-	onShow () {},
-	onHide () {},
-	methods: {},
-	computed: {},
-	watch: {}
-}
+  name: "Appindex",
+  components: {
+    goodslist, //商品列表
+    swiperBanner, //轮播
+  },
+  data() {
+    return {
+      BannerImg: [], // 轮播图列表
+      not_list: [], // 公告列表
+      area_list: [], // 金刚区
+	  spc_list: [], //活动列表
+      goodslistUrl: "ShuZiTeaYW/shop/getGoodsLikeByUserId", //首页商品列表
+    };
+  },
+  onLoad(option) {
+    this.getBanner(); //获取轮播图
+    this.getAnnounce(); //获取公告列表
+    this.getImageTwo(); //金刚区
+	this.getImage(); //获取活动列表
+  },
+  onLaunch() {},
+  onShow() {},
+  onHide() {},
+  methods: {
+    // 获取轮播图
+    getBanner() {
+      post("ShuZiTeaYW/shop/play").then((res) => {
+        if (res.status == 200) {
+          this.BannerImg = res.list;
+        }
+      });
+    },
+    // 获取公告列表
+    getAnnounce() {
+      post("ShuZiTeaYW/announce/getAnnounce", {
+        status: 2,
+      }).then((res) => {
+        if (res.status == 200) {
+          this.not_list = res.announce;
+        }
+      });
+    },
+    // 获取公告列表
+    getAnnounce() {
+      post("ShuZiTeaYW/announce/getAnnounce", {
+        status: 2,
+      }).then((res) => {
+        if (res.status == 200) {
+          this.not_list = res.announce;
+        }
+      });
+    },
+    // 获取金刚区列表
+    getImageTwo() {
+      post("ShuZiTeaSpecial/special/imageTwo").then((res) => {
+        if (res.status == 200) {
+          this.area_list = res.data;
+        }
+      });
+    },
+    // 获取活动区列表
+    getImage() {
+      post("ShuZiTeaSpecial/special/image").then((res) => {
+        if (res.status == 200) {
+          this.spc_list = res.data;
+        }
+      });
+    },
+    // 轮播图跳转
+    goList: function (e) {
+      let id = e.id;
+      uni.navigateTo({
+        url: "/pages/prefecture-list/index?id=" + id + "&type=1",
+      });
+    },
+  },
+  computed: {},
+  watch: {},
+};
 </script>
 
 <style scoped lang='scss'>
+.head {
+  padding: 12rpx 28rpx;
+}
+.head_search {
+  width: 100%;
+  height: 64rpx;
+  line-height: 64rpx;
+  background: #f3f5f7;
+  border-radius: 32rpx;
+  text-align: center;
+  font-size: 28rpx;
+  color: #bbbbbb;
+  margin-bottom: 26rpx;
+  .search_text {
+    margin-left: 14rpx;
+  }
+}
+.head_notice {
+  margin: 30rpx 0;
+  .notice_title {
+    width: 130rpx;
+    height: 40rpx;
+    float: left;
+    .gg_img {
+      width: 100%;
+      height: 40rpx;
+    }
+  }
+  .notice_swiper {
+    height: 40rpx;
+    padding-left: 20rpx;
+    font-size: 28rpx;
+    float: left;
+    box-sizing: border-box;
+    width: calc(100% - 130rpx);
+    .not_list {
+      width: calc(100% - 50rpx);
+    }
+    .not_ico {
+      width: 30rpx;
+      font-size: 28rpx;
+      color: #999;
+    }
+    .not_list,
+    .not_ico {
+      display: inline-block;
+      vertical-align: middle;
+      height: 40rpx;
+      line-height: 40rpx;
+    }
+  }
+}
+
+// 金刚区
+.head_area {
+  margin: 20rpx 0 20rpx;
+  padding: 20rpx 0;
+  border-radius: 18rpx;
+  box-shadow: 2px 2px 13px 1px rgba(17, 18, 29, 0.08);
+  .area_list {
+    display: inline-block;
+    width: 25%;
+    text-align: center;
+    .area_img {
+      width: 46rpx;
+      height: 46rpx;
+      margin-bottom: 12rpx;
+    }
+    .area_name {
+      font-size: 24rpx;
+      color: #474747;
+    }
+  }
+}
+// 金刚区-end
+
+// 活动
+.activity {
+  .act_one_img {
+	display: inline-block;
+    width: 300rpx;
+    height: 378rpx;
+    margin-right: 10rpx;
+  }
+  .act_other {
+	display: inline-block;
+    width: calc(100% - 300rpx - 10rpx);
+  }
+  .act_two_img {
+    width: 100%;
+    height: 185rpx;
+  }
+}
+// 活动-end
 </style>

src/request/request.js

@@ -2,6 +2,7 @@ import host from "./config.js"
 
 export default ({ url, method, params, header, baseURL }) => {
 	baseURL = baseURL ? baseURL : host.Hhost;
+	header = header ? header : { "Content-Type": "application/x-www-form-urlencoded" }
 
 	return new Promise((resolve, reject) => {
 		uni.request({

src/static/css/public.scss

@@ -29,10 +29,10 @@
 /* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
 @font-face {
     font-family: 'iconfont';  /* Project id 3748689 */
-    src: url('//at.alicdn.com/t/c/font_3748689_z495v3cpz5.woff2?t=1667479379749') format('woff2'),
-         url('//at.alicdn.com/t/c/font_3748689_z495v3cpz5.woff?t=1667479379749') format('woff'),
-         url('//at.alicdn.com/t/c/font_3748689_z495v3cpz5.ttf?t=1667479379749') format('truetype');
-}
+    src: url('//at.alicdn.com/t/c/font_3748689_ysjdhcth1f.woff2?t=1667564440180') format('woff2'),
+         url('//at.alicdn.com/t/c/font_3748689_ysjdhcth1f.woff?t=1667564440180') format('woff'),
+         url('//at.alicdn.com/t/c/font_3748689_ysjdhcth1f.ttf?t=1667564440180') format('truetype');
+  }
 .iconfont {
     font-family: "iconfont" !important;
     font-style: normal;
@@ -48,4 +48,8 @@ view, text, div {
     // font-family: "PingFang SC", "Microsoft Yahei", "Arial";
     font-family: "SourceHanSansSC-Regular";
     box-sizing: border-box;
+}
+.noticeBar .uni-noticebar{
+    margin: 0 !important;
+    padding: 0 !important;
 }