Dev wangyi

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "dist/",
   "projectname": "sast-shop",
   "description": "SAST 周边商店小程序",
-  "appid": "*********",
+  "appid": "wx728a9d02fbe9006f",
   "setting": {
     "urlCheck": true,
     "es6": false,
@@ -28,5 +28,6 @@
   "editorSetting": {
     "tabIndent": "insertSpaces",
     "tabSize": 2
-  }
-}
+  },
+  "simulatorPluginLibVersion": {}
+}

project.private.config.json

@@ -1,8 +1,56 @@
 {
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
   "projectname": "sast-shop",
-  "appid": "wx744cacbd9da1869d",
+  "appid": "wx728a9d02fbe9006f",
   "setting": {
     "compileHotReLoad": true
+  },
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "",
+          "pathName": "pages/login/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/index/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/me/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/order-detail/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/order-form/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/product-detail/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
   }
-}
+}

src/pages/index/index.scss

@@ -0,0 +1,45 @@
+
+.index {
+    width: 750px;
+    min-height: 100vh;
+    height: max-content;
+    background-color: #F5F5F5;
+    overflow: hidden;
+
+    .body-item {
+        position: relative;
+        width: 650px;
+        height: 280px;
+        background-color: white;
+        border-radius: 30px;
+        margin: 40px auto;
+
+        .item-image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            left: 0;
+            width: 220px;
+            height: 280px;
+        }
+
+        .item-text {
+            position: absolute;
+            right: 0;
+            width: 430px;
+            height: 280px;
+            .text-title {
+                font-size: 32px;
+                font-family: 'Inter';
+                font-weight: 600;
+                color: #000000;
+                margin-top: 60px;
+            }
+            .text-money {
+                color: #EB4F1E;
+                margin-top: 10px;
+            }
+        }
+    }
+}

src/pages/index/index.tsx

@@ -1,16 +1,88 @@
-import { View, Text } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
+import { View, Text, Image } from '@tarojs/components'
+import Taro, { useLoad, useRouter } from '@tarojs/taro'
+import { useState, useEffect } from 'react'
+import item_image from '../../assets/images/index/frame.png'
 import './index.scss'
 
 export default function Index() {
+  const [title, changeTitle] = useState([])
+  const [price, changePrice] = useState([])
+  const [id, changeId] = useState([])
+  const [image, changeImage] = useState([])
+  const [myId, changemyId] = useState([])
+  const [indexObject, changeindexObject] = useState([{
+    title: '南京邮电大学校科协 SAST 2023 纪念定制短袖',
+    price: 99,
+    image: item_image,
+    id: 0
+  },
+  {
+    title: '南京邮电大学校科协 SAST 2023 纪念定制短袖',
+    price: 99,
+    image: item_image,
+    id: 1
+  },
+  {
+    title: '南京邮电大学校科协 SAST 2023 纪念定制短袖',
+    price: 99,
+    image: item_image,
+    id: 2
+  }])
+
+  const gotoDetail = (item) => {
+    Taro.navigateTo({
+      url: `/pages/product-detail/index?id=${item.id}`
+    })
+  }
+
+
+  useEffect(() => {
+    Taro.request({
+      url: 'http://127.0.0.1:4523/m1/2655521-0-default/user/product',
+      header: {
+        'content-type': 'application/json'
+      },
+      success: function (res) {
+        for (let i = 0; i < res.data.data.length; i++) {
+          console.log(res.data.data[i])
+          changeId(res.data.data[i].id)
+          changeindexObject(res.data.data)
+        }
+        // console.log(res.data.data)
+      }
+    })
+  }, [])
 
   useLoad(() => {
-    console.log('Page loaded.')
+    // console.log('Page loaded.')
   })
 
   return (
-    <View className='index'>
-      <View>这边写主页的代码</View>
-    </View>
+    <ul className='index'>
+
+      {
+        indexObject.map((item) => {
+
+          return (
+            <li key={item.id} onClick={() => gotoDetail(item)}>
+              <View className='body-item'>
+                <View className='item-image'>
+                  <Image mode='aspectFit' className='picture' style='height: 100px' src={item.image}></Image>
+                </View>
+                <View className='item-text'>
+                  <View className='text-title'>
+                    <Text>{item.title}</Text>
+                  </View>
+                  <View className='text-money'>
+                    ￥{item.price}
+                  </View>
+                </View>
+              </View>
+            </li>
+          )
+        })
+      }
+
+    </ul>
   )
 }

src/pages/product-detail/index.tsx

@@ -1,5 +1,5 @@
-import { View, Swiper, SwiperItem, Image, Button, ScrollView,Text } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
+import { View, Swiper, SwiperItem, Image, Button, ScrollView, Text } from '@tarojs/components'
+import { useLoad, getCurrentInstance } from '@tarojs/taro'
 import img1 from '../../assets/images/img1.jpg'
 import img2 from '../../assets/images/img2.jpg'
 import img3 from '../../assets/images/img3.jpg'
@@ -10,12 +10,15 @@ import './index.scss'
 export default function ProductDetail() {
 
   useLoad(() => {
-    console.log('Page loaded.')
+    // console.log('Page loaded.')
   })
 
+  const id = getCurrentInstance().router.params.id
+  console.log(id)
+
   return (
     <View
-    style='overflow:hidden'
+      style='overflow:hidden'
     >
       <Swiper
         className='swiper'
@@ -24,35 +27,35 @@ export default function ProductDetail() {
         circular
         indicatorDots
         display-multiple-items
-        >
+      >
         <SwiperItem className='swiper-item'><Image mode='aspectFit' style='width:100%;height:100% ' className='img-item' src={img1}></Image></SwiperItem>
         <SwiperItem className='swiper-item'><Image mode='aspectFit' style='width:100%;height:100% ' className='img-item' src={img2}></Image></SwiperItem>
         <SwiperItem className='swiper-item'><Image mode='aspectFit' style='width:100%;height:100% ' className='img-item' src={img3}></Image></SwiperItem>
         <SwiperItem className='swiper-item'><Image mode='aspectFit' style='width:100%;height:100% ' className='img-item' src={img4}></Image></SwiperItem>
       </Swiper>
-        <View className="good-introduce">南京邮电大学校科协 SAST 2023 纪念定制短袖</View>
-        <View className="good-price">￥99.00</View>
-        <Button className='good-button'>立即购买</Button>
+      <View className="good-introduce">南京邮电大学校科协 SAST 2023 纪念定制短袖</View>
+      <View className="good-price">￥99.00</View>
+      <Button className='good-button'>立即购买</Button>
 
-        <View className='type'>
-          <View className='type-view'>颜色<Text className='type-item'>卡其色 深蓝色</Text></View>
-          <View className='type-view'>尺码<Text className='type-item'>S M L XL 2XL 3XL 4XL</Text></View>
-        </View>
+      <View className='type'>
+        <View className='type-view'>颜色<Text className='type-item'>卡其色 深蓝色</Text></View>
+        <View className='type-view'>尺码<Text className='type-item'>S M L XL 2XL 3XL 4XL</Text></View>
+      </View>
 
-        <View className='datail'>图片详情</View>
+      <View className='datail'>图片详情</View>
 
-        <ScrollView
-          className='scrollview'
-          scrollY
-          lowerThreshold={50}
-          style='height:1200px width:100%'
-          showScrollbar={false}
-          enhanced={true}
-        >
-          <View className='long-picture'>
-            <Image className='detail-picture' src={detail} mode='widthFix'></Image>
-          </View>
-        </ScrollView>
+      <ScrollView
+        className='scrollview'
+        scrollY
+        lowerThreshold={50}
+        style='height:1200px width:100%'
+        showScrollbar={false}
+        enhanced={true}
+      >
+        <View className='long-picture'>
+          <Image className='detail-picture' src={detail} mode='widthFix'></Image>
+        </View>
+      </ScrollView>
     </View>
   )
 }