afels

src/app.js

@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro';
 import store, { StoreRoot, useModel } from './store'
 
 import './app.less'
+import { View } from '@tarojs/components';
 
 class App extends Component {
 
@@ -35,7 +36,10 @@ class App extends Component {
   // this.props.children 是将要会渲染的页面
   render () {
     return <StoreRoot>
-      {this.props.children}
+      <View className='pages-index'>
+        {this.props.children}
+      </View>
+
     </StoreRoot>
     // return this.props.children
   }

src/app.less

@@ -0,0 +1,3 @@
+page {
+  background-color: #f5f5f5;
+}

src/components/Banner/index.jsx

@@ -5,19 +5,19 @@ import './style.less'
 export default (props) => {
   const { banner } = props;
   return (
-    <View>
+    <View className='banner-box'>
       <Swiper
         className='swiper-container'
         circular
         indicatorDots
-        indicatorColor='#fff'
+        indicatorColor='#B5B5B5'
         indicatorActiveColor='#FBD804'
         autoplay
       // vertical//纵向滑动  上下
       >
         {
           banner && banner.map((item, index) => (
-            <SwiperItem key={index} >
+            <SwiperItem key={index} className='SwiperItem-img' >
               <Image className='swiper-img' src={item.imgUrl} mode='widthFix'></Image>
             </SwiperItem>
           ))

src/components/Banner/style.less

@@ -1,9 +1,34 @@
-.swiper-container {
-  width: 100vw;
-  height: 400px;
+.banner-box {
+  transform: translateY(0);
 
-  .swiper-img {
-    height: 100%;
-    width: 100%;
+  .swiper-container {
+    width: 92vw;
+    height: 300px;
+    overflow: hidden;
+    transform: translateY(0);
+    border-radius: 10px;
+    margin: 40px auto;
+
+    // swiper.wxss
+    /* 默认指示点的样式 */
+    .SwiperItem-img {
+      height: 260px !important;
+    }
+    .wx-swiper-dot {
+      width: 35px;
+      height: 5px;
+      border-radius: 0px;
+    }
+
+    /* 选中指示点的样式 */
+    .wx-swiper-dot.wx-swiper-dot-active {
+      width: 35px;
+      height: 5px;
+      border-radius: 0px;
+    }
+    .swiper-img {
+      width: 100%;
+      height: 200px;
+    }
   }
 }

src/components/HomeCard/index.jsx

@@ -0,0 +1,23 @@
+import Taro from '@tarojs/taro';
+import { View, Text, Swiper, SwiperItem, Image } from '@tarojs/components';
+
+import './style.less'
+
+export default (props) => {
+  const { text, onChange } = props;
+
+  return (
+    <View className='HomeCard-box'>
+      {/* <View className='HomeCard-box-header'>
+        <View className='HomeCard-box-header-left'></View>
+        <View className='HomeCard-box-header-right'></View>
+      </View> */}
+      <View className='HomeCard-box-content'>
+        {props.children}
+      </View>
+    </View>
+  )
+}
+
+
+

src/components/HomeCard/style.less

@@ -0,0 +1,23 @@
+.HomeCard-box {
+  // width: 95%;
+  background-color: #fff;
+  margin: 7vw auto;
+  padding: 0 25px;
+  border-bottom-left-radius: 30px;
+  border-bottom-right-radius: 30px;
+  &-header {
+    // padding: 15px 0 20px;
+    display: flex;
+    align-items: center;
+    &-left {
+      width: 10px;
+      height: 37px;
+      // background-color: #fbd804;
+      margin: 0 15px 0 0;
+    }
+    &-right {
+      font-size: 35px;
+      font-weight: 600;
+    }
+  }
+}

src/components/Notice/style.less

@@ -1,19 +1,22 @@
 .Notice-box {
-  width: 100vw;
+  width: 80vw;
   // height: 50px;
-  background-color: #fff5f6;
+  height: 34px;
+  margin: 0 auto;
+  border-radius: 40px;
+  background-color: #f5f5f5;
   display: flex;
   align-items: center;
-  padding: 15px 10px;
+  padding: 15px 15px;
   > Image {
-    width: 55px;
-    height: 55px;
+    width: 60px;
+    height: 60px;
     margin-right: 15px;
     color: #fbd804;
   }
   .NoticeSwiper {
     width: 85%;
-    height: 40px;
+    height: 45px;
     .NoticeSwiper-Text {
       font-size: 26px;
       text-overflow: ellipsis;

src/pages/index/index.jsx

@@ -1,7 +1,17 @@
-import { View, Text, Image } from '@tarojs/components'
+import { View, ScrollView, Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import Banner from '../../components/Banner'
 import Notice from '../../components/Notice'
+import HomeCard from '../../components/HomeCard'
+import dogCared from '../../assets/dogCared.png'
+import speed from '../../assets/speed.png'
+//四个小功能
+import handle from '../../assets/handle.png'//办证
+import lost from '../../assets/lost.png'//挂失
+import addTime from '../../assets/addTime.png'//续期
+import main from '../../assets/main.png'//我的
+
+
 import './style.less'
 
 export default (props) => {
@@ -25,10 +35,60 @@ export default (props) => {
   }
 
   return (
-    <View className='index-UserQRcode'>
-      <Banner banner={banner} />
-      <Notice Notice={NoticeList} onChange={onChangeGoNotice} />
-    </View>
+    <ScrollView scrollY style={{
+      height: '100vh'
+    }}
+    >
+      <View className='index-box'>
+        {/* 一部分 */}
+        <View className='haderBox'>
+          <Banner banner={banner} />
+          <Notice Notice={NoticeList} onChange={onChangeGoNotice} />
+        </View>
+        {/* 二部分 */}
+        <View>
+          <HomeCard text='快速入口'>
+            <View className='FastEntry-Box'>
+              <View className='FastEntry-Box-content'>
+                <View>进度查询</View>
+                <Image src={speed} />
+              </View>
+              <View className='FastEntry-Box-content'>
+                <View>狗狗证件</View>
+                <Image src={dogCared} />
+
+              </View>
+            </View>
+          </HomeCard>
+
+        </View>
+        {/* 三部分 */}
+        <HomeCard text='便捷服务'>
+          <View className='Operation-box'>
+            <View className='Operation-box-header'>
+              <View className='Operation-box-header-centent'>
+                <Image src={handle} style={{ width: '50px', height: '30px' }} />
+                <View>办证</View>
+              </View>
+              <View className='Operation-box-header-centent'>
+                <Image src={addTime} style={{ width: '28px', height: '24px', padding: '0 10px' }} />
+                <View>续期</View>
+              </View>
+            </View>
+            <View className='Operation-box-header'>
+              <View className='Operation-box-header-centent'>
+                <Image src={lost} style={{ width: '35px', height: '30px', padding: '0 10px' }} />
+                <View>挂失</View>
+              </View>
+              <View className='Operation-box-header-centent'>
+                <Image src={main} style={{ width: '27px', height: '25px', padding: '0 10px' }} />
+                <View>我的</View>
+              </View>
+            </View>
+          </View>
+        </HomeCard>
+      </View>
+    </ScrollView>
   )
 }
 

src/pages/index/style.less

@@ -0,0 +1,62 @@
+.haderBox {
+  width: 100vw;
+  height: 56vw;
+  margin: 0 auto;
+  background-color: #fff;
+  border-bottom-left-radius: 30px;
+  border-bottom-right-radius: 30px;
+}
+.FastEntry-Box {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 3vh 0 3vh 0;
+  &-content {
+    width: 42%;
+    height: 150px;
+    // border: 2px dashed red;
+    background-image: linear-gradient(to right, #fbd804, #ffe96ade);
+    border-radius: 10px;
+    padding: 15px;
+    > View {
+      font-weight: 700;
+      color: #fff;
+    }
+    > Image {
+      width: 80px;
+      height: 80px;
+      position: relative;
+      top: -15px;
+      left: 200px;
+    }
+  }
+}
+.Operation-box {
+  width: 100vw;
+  height: 50vw;
+  margin: 0 auto;
+  background-color: #fff;
+  border-bottom-left-radius: 30px;
+  border-bottom-right-radius: 30px;
+  &-header {
+    width: 95%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 2vh 0 2vh 0;
+    &-centent {
+      width: 38%;
+      height: 10vh;
+      // border: 1px solid #fbd804;
+      border: 1px solid #000;
+      display: flex;
+      align-items: center;
+      border-radius: 10px;
+      // > Image {
+      //   width: 60px;
+      //   height: 50px;
+      // }
+    }
+  }
+}

src/pages/setDogInfo/index.jsx

@@ -1,6 +1,7 @@
 import { View, Button, Form, Text, RadioGroup, Picker, Image, Input, Radio, Label, ScrollView } from '@tarojs/components'
 import Taro from '@tarojs/taro';
 import { useState } from 'react';
+import { addDogInfo } from '../../services/dogAPI';
 
 import './style.less'
 
@@ -18,14 +19,14 @@ export default (props) => {
         setDogDate({ ...dogDate, petBirthday: value })
         break;
       case 'petType':
-        setDogDate({ ...dogDate, petType: dogType[value].text })
+        setDogDate({ ...dogDate, petType: dogType[value].text })//value 01  text 文字
         break;
       default:
         break;
     }
 
   }
-  const selector = ['公', '母']
+  const selector = ['雄', '雌']
   const dogType = [
     {
       value: 0,
@@ -40,11 +41,11 @@ export default (props) => {
 
   const modeList = [
     {
-      value: 0,
+      value: 1,
       text: '邮寄',
     },
     {
-      value: 1,
+      value: 2,
       text: '自取',
     },
 
@@ -98,6 +99,10 @@ export default (props) => {
   }
   const formSubmit = e => {
     console.log(e)
+    const value = e.detail.value
+    addDogInfo({ ...value, ...dogDate, ...imgUrl }).then((res) => {
+      console.log('dogInfo xinwe', res);
+    })
   }
 
   const formReset = e => {
@@ -192,7 +197,7 @@ export default (props) => {
 
             </mp-cells>
           </mp-form>
-          <View slot='button'>
+          <View slot='button' style={{ margin: '4em 0 2em 0' }}>
             <Button class='weui-btn' type='primary' loading={false} formType='submit'>确定</Button>
           </View>
         </Form>

src/pages/setUser/index.jsx

@@ -79,7 +79,7 @@ export default (props) => {
 
             </mp-cells>
           </mp-form>
-          <View slot='button'>
+          <View slot='button' style={{ margin: '4em 0 2em 0' }}>
             <Button type='primary' loading={false} formType='submit'>确定 Loading</Button>
           </View>
         </Form>

src/services/dogAPI.js

@@ -9,3 +9,10 @@ import request from '../utils/request'
  * @returns
  */
 export const login = (data) => request('/login', { data, method: 'POST' })
+
+/**
+ * 狗狗信息维护
+ * @param {*} data
+ * @returns
+ */
+export const addDogInfo = (data) => request('/application', { data, method: 'POST' })