添加首页

src/app.config.js

@@ -20,7 +20,7 @@ export default defineAppConfig({
   },
   tabBar: {
     color: "#000000",
-    selectedColor: "#FF5819",
+    selectedColor: "#1E1E1E",
     borderStyle: "white",
     backgroundColor: "#fff",
     list: [

src/pages/chat/index.config.js

@@ -1,5 +1,5 @@
 export default definePageConfig({
-  navigationBarTitleText: '智能聊天室',
+  navigationBarTitleText: '',
   enableShareAppMessage: true,
   enableShareTimeline: true ,
 })

src/pages/chat/index.jsx

@@ -1,11 +1,12 @@
 import { Component } from 'react'
 import { View, Text, Button, Image, ScrollView, Input, Textarea } from '@tarojs/components'
-import Taro, { requirePlugin } from '@tarojs/taro'
+import Taro, { requirePlugin,getCurrentInstance } from '@tarojs/taro'
 import * as api from '../../service/index'
 import './index.less'
 import tool from '../../common/tool'
 
 export default class Albums_play extends Component {
+  $instance = getCurrentInstance()
   plugin = process.env.TARO_ENV == 'weapp' ? requirePlugin("WechatSI") : '';
   manager = process.env.TARO_ENV == 'weapp' ? this.plugin.getRecordRecognitionManager() : '';
   options = {
@@ -35,6 +36,11 @@ export default class Albums_play extends Component {
   }
 
   componentDidShow () {
+    let routers = this.$instance.router.params
+    console.log(routers,'routers');
+     Taro.setNavigationBarTitle({
+        title: routers.title
+      })
     console.log('页面启动', this.state.userId);
     if (process.env.TARO_ENV == 'weapp') {
       this.initRecord()

src/pages/chat/index.less

@@ -84,7 +84,7 @@ page {
   padding:  20px;
   justify-content: flex-end;
   .mine-text{
-    background-color: #f8f8f8;
+    background-color: #9EE770;
     border-radius: 10px;
     padding: 20px;
     max-width: 485px;
@@ -100,7 +100,7 @@ page {
       width: 0;
       height: 0;
       border-top: 20px solid transparent;
-      border-left: 20px solid #f8f8f8;
+      border-left: 20px solid #9EE770;
       border-right: 20px solid transparent;
       border-bottom: 20px solid transparent;
     }

src/pages/index/index.jsx

@@ -1,24 +1,71 @@
 import { Component } from 'react'
 import { View, Text, Button, Image, scrollView, Input } from '@tarojs/components'
+import Taro, {getCurrentInstance} from '@tarojs/taro'
+
 import './index.less'
 
 export default class Mine extends Component {
+  
+  state = {
+    classList: [
+      {
+        name: '美食家',
+        tips: '你想吃的美食我都会做哟',
+        image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678353807082.png',
+      },
+      {
+        name: '作者',
+        tips: '你想吃的美食我都会做哟',
+        image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678353807082.png',
+      },
+      {
+        name: '美食家',
+        tips: '你想吃的美食我都会做哟',
+        image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678353807082.png',
+      },
+      {
+        name: '美食家',
+        tips: '你想吃的美食我都会做哟',
+        image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678353807082.png',
+      },
+      {
+        name: '美食家',
+        tips: '你想吃的美食我都会做哟',
+        image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678353807082.png',
+      },
+    ]
+  }
 
-  componentWillMount() { }
+  componentWillMount () { }
 
-  componentDidMount() { }
+  componentDidMount () { }
 
-  componentWillUnmount() { }
+  componentWillUnmount () { }
 
-  componentDidShow() { }
+  componentDidShow () { }
 
-  componentDidHide() { }
+  componentDidHide () { }
+  toChat (e) {
+    Taro.navigateTo({
+      url: `/pages/chat/index?title=${e.name}`
+    })
+  }
 
-  render() {
+  render () {
     return (
-     <View>
-      mine
-     </View>
+      <View className='mine'>
+        <View className='food'>
+          {
+            this.state.classList.map((item, index) => (
+              <View className='food-info' key={index} onClick={e => (this.toChat(item))}>
+                <Image className='food-img' src={item.image}> </Image>
+                <View className='food-name'>{item.name}</View>
+                <View className='food-tips'>{item.tips}</View>
+              </View>
+            ))
+          }
+        </View>
+      </View>
     )
   }
 }

src/pages/index/index.less

@@ -4,376 +4,34 @@ page {
   padding: 0 auto;
   margin: 0 auto;
 }
-.login{
-  z-index: 999;
-  position: fixed;
-  top: 300rpx;
-  height: 100rpx;
-  text-align: center;
-  line-height: 100rpx;
-  width: 400rpx;
-  left: 50%;
-  margin-left: -200rpx;
-  background: white;
-}
-.Phone{
-  top: 500rpx;
-  width: 400rpx;
-}
-.login_zz{
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 998;
-  
-background-color: rgba(0,0,0,0.5);
-}
-swiper {
-  height: 180rpx;
-}
- 
-swiper swiper-item .slide-image {
-  width: 100%;
-  height: 180rpx;
-}
- 
-.jia_img {
-  height: 80rpx;
-  width: 90rpx;
-}
- 
-.time {
-  text-align: center;
-  padding: 5rpx 20rpx 5rpx 20rpx;
-  border-radius: 10rpx;
-  display: block;
-  height: 38rpx;
-  line-height: 38rpx;
-  position: relative;
-  margin: 0 auto;
-  margin-bottom: 20rpx;
-  width: 90rpx;
-  color: white;
-  font-size: 26rpx;
-  background-color: #dedede;
-}
- 
-.tab {
-  bottom: 120rpx;
-}
- 
-.tab_1 {
-  position: fixed;
-  bottom: 50rpx;
-  width: 200rpx;
-  font-size: 26rpx;
-  left: 50%;
-  margin-left: -45rpx;
-  height: 100rpx;
-}
- 
-.tab_2 {
-  right: 30rpx;
-  position: fixed;
-}
- 
-/* 聊天 */
- 
-.my_right {
-  float: right;
-  margin-top: 30rpx;
-  position: relative;
-}
- 
-.my_audio {
-  height: 60rpx;
-  width: 60rpx;
-  z-index: 2;
-  position: relative;
-  top: 10rpx;
-  left: 20rpx;
-}
- 
-.you_left {
-  margin-top: 30rpx;
-  float: left;
-  position: relative;
-  padding-left: 5rpx;
-}
- 
-.new_img {
-  width: 85rpx;
-  height: 85rpx;
-  overflow: hidden;
-}
- 
-.page_r {
-  float: right;
-}
- 
-.new_txt {
-  min-width: 380rpx;
-  width: 460rpx;
-  word-break: break-all;
-}
- 
-.new_txt_my {
-  border-radius: 7rpx;
-  background: #9fe75a;
-  position: relative;
-  right: 30rpx;
-  padding: 17rpx 30rpx 17rpx 30rpx;
-  float: right;
-  border: 1px solid #d0d0d0;
-}
- 
-.new_txt_my .arrow {
-  position: absolute;
-  z-index: 2;
-  width: 40rpx;
-  right: -38rpx;
-}
- 
-.new_txt_my .arrow em {
-  position: absolute;
-  border-style: solid;
-  border-width: 15rpx;
-  border-color: transparent transparent transparent #d0d0d0;
-  top: 1rpx;
-}
- 
-.new_txt_my .arrow span {
-  position: absolute;
-  top: 5rpx;
-  border-style: solid;
-  border-width: 15rpx;
-  border-color: transparent transparent transparent #9fe75a;
-}
- 
-.new_txt_my_2 {
-  word-break: break-all;
-  border-radius: 7rpx;
-  background: #9fe75a;
-  min-width: 330rpx;
-  max-width: 530rpx;
-  padding: 17rpx 30rpx 17rpx 30rpx;
-  float: right;
-}
- 
-.new_txt_ai {
-  border-radius: 7rpx;
-  left: 20rpx;
-  background-color: #fff;
-  position: relative;
-  border: 1px solid #d0d0d0;
-  float: left;
-}
- 
-.new_txt_ai .arrow {
-  position: relative;
-  width: 40rpx;
-  left: -30rpx;
-}
- 
-.new_txt_ai .arrow em {
-  position: absolute;
-  border-style: solid;
-  border-width: 15rpx;
-  top: 20rpx;
-  border-color: transparent #d0d0d0 transparent transparent;
-}
- 
-.new_txt_ai .arrow span {
-  position: absolute;
-  top: 20rpx;
-  border-style: solid;
-  border-width: 15rpx;
-  border-color: transparent #fff transparent transparent;
-  left: 2rpx;
-}
- 
-.ai_content {
-  word-break: break-all;
-  padding: 17rpx 30rpx 17rpx 30rpx;
-}
- 
-.sanjiao {
-  top: 25rpx;
-  position: relative;
-  width: 0px;
-  height: 0px;
-  border-width: 15rpx;
-  border-style: solid;
-}
- 
-.my {
-  border-color: transparent transparent transparent #9fe75a;
-}
- 
-.you {
-  border-color: transparent #fff transparent transparent;
-}
- 
-._span {
-  border-color: #fff transparent transparent;
-  top: -17px;
-}
- 
-.is_ai_btn {
-  border-radius: 0 0 7px 7px;
-  border-top: 1px solid #d0d0d0;
-  background: white;
-  position: relative;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 80rpx;
-  line-height: 80rpx;
-  display: flex;
-  flex-direction: row;
-  text-align: center;
-}
- 
-.is_ai_btn view {
-  width: 50%;
-}
- 
-.is_ai_btn image {
-  width: 32rpx;
-  position: relative;
-  top: 4rpx;
-  height: 32rpx;
-}
- 
-.is_ai_btn .two {
-  border-left: 1px solid #d0d0d0;
-}
- 
-.yes_problem_log {
-  border-top: 1px solid #d0d0d0;
-  height: 80rpx;
-  text-align: center;
-  line-height: 80rpx;
-}
- 
-.voice_icon {
-  width: 60rpx;
-  height: 60rpx;
-  margin: 0 auto;
-  padding: 10rpx 10rpx 10rpx 10rpx;
-}
- 
-.add_icon {
-  width: 70rpx;
-  height: 70rpx;
-  margin: 0 auto;
-  padding: 20rpx 10rpx 10rpx 15rpx;
-}
- 
-.voice_ing {
-  width: 90%;
-  height: 75rpx;
-  line-height: 85rpx;
-  text-align: center;
-  border-radius: 15rpx;
-  border: 1px solid #d0d0d0;
-}
- 
-.zezhao {
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 2;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.5);
-}
- 
-.in_voice_icon {
-  z-index: 3;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  position: absolute;
-  height: 500rpx;
-  background: #f8f8f8;
-}
- 
-.in_voice_icon .item {
-  position: relative;
-  margin-top: 50rpx;
-  margin-left: 50rpx;
-  text-align: center;
-  width: 140rpx;
-}
- 
-.in_voice_icon .img {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 15rpx;
-}
- 
-.in_voice_icon .text {
-  font-size: 32rpx;
-  margin-top: 20rpx;
-}
- 
-.sendmessage {
-  width: 100%;
-  z-index: 2;
-  display: flex;
-  position: fixed;
-  bottom: 0px;
-  background-color: #f8f8f8;
-  flex-direction: row;
-  height: 100rpx;
-}
- 
-.sendmessage input {
-  width: 78%;
-  height: 80rpx;
-  line-height: 80rpx;
-  font-size: 28rpx;
-  margin-top: 10rpx;
-  margin-left: 20rpx;
-  border-bottom: 1px solid #d0d0d0;
-  padding-left: 20rpx;
-}
- 
-.sendmessage button {
-  border: 1px solid white;
-  width: 18%;
-  height: 80rpx;
-  background: #0c0;
-  color: white;
-  line-height: 80rpx;
-  margin-top: 10rpx;
-  font-size: 28rpx;
-}
- 
-.hei {
-  height: 20rpx;
-}
- 
-.history {
-  height: 88%;
-  display: flex;
-  font-size: 14px;
-  line-height: 50rpx;
-  position: relative;
-  top: 20rpx;
-}
- 
-.icno_kf {
-  position: fixed;
-  bottom: 160rpx;
-  margin: 0 auto;
-  text-align: center;
-  left: 50%;
-  margin-left: -40rpx;
-  width: 100rpx;
-  height: 100rpx;
-  border-radius: 50%;
+
+.mine {
+  .food {
+    margin: 20px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .food-info {
+      width: 43%;
+      border-radius: 10px;
+      background-color: #FFFFFF;
+      margin: 10px;
+      padding: 10px;
+      box-shadow: 0px 0px 10px rgb(139, 138, 138);
+
+      .food-img {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+      }
+      .food-name{
+        font-size: 32px;
+      }
+      .food-tips{
+        font-size: 28px;
+        color: #656363;
+      }
+    }
+  }
 }

src/pages/mine/index.jsx

@@ -4,21 +4,59 @@ import './index.less'
 
 export default class Mine extends Component {
 
-  componentWillMount() { }
+  state = {
+    classList: [
+      {
+        name: '美食家',
+        tips: '你想吃的美食我都会做哟',
+        image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678353807082.png',
+      },
+      {
+        name: '美食家',
+        tips: '你想吃的美食我都会做哟',
+        image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678353807082.png',
+      },
+      {
+        name: '美食家',
+        tips: '你想吃的美食我都会做哟',
+        image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678353807082.png',
+      },
+      {
+        name: '美食家',
+        tips: '你想吃的美食我都会做哟',
+        image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678353807082.png',
+      },
+      {
+        name: '美食家',
+        tips: '你想吃的美食我都会做哟',
+        image: 'https://we-spa.oss-cn-shenzhen.aliyuncs.com/total_picture/1678353807082.png',
+      },
+    ]
+  }
+
+  componentWillMount () { }
 
-  componentDidMount() { }
+  componentDidMount () { }
 
-  componentWillUnmount() { }
+  componentWillUnmount () { }
 
-  componentDidShow() { }
+  componentDidShow () { }
 
-  componentDidHide() { }
+  componentDidHide () { }
 
-  render() {
+  render () {
     return (
-     <View>
-      mine
-     </View>
+      <View className='mine'>
+        <View className='food'>
+          {
+            this.state.classList.map((item, index) => (
+              <View className='food-info'>
+                
+              </View>
+            ))
+          }
+        </View>
+      </View>
     )
   }
 }

src/pages/mine/index.less

@@ -1,379 +1,14 @@
-page {
-  background-color: #f2f2f2;
-  height: 100%;
-  padding: 0 auto;
-  margin: 0 auto;
-}
-.login{
-  z-index: 999;
-  position: fixed;
-  top: 300rpx;
-  height: 100rpx;
-  text-align: center;
-  line-height: 100rpx;
-  width: 400rpx;
-  left: 50%;
-  margin-left: -200rpx;
-  background: white;
-}
-.Phone{
-  top: 500rpx;
-  width: 400rpx;
-}
-.login_zz{
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 998;
-  
-background-color: rgba(0,0,0,0.5);
-}
-swiper {
-  height: 180rpx;
-}
- 
-swiper swiper-item .slide-image {
-  width: 100%;
-  height: 180rpx;
-}
- 
-.jia_img {
-  height: 80rpx;
-  width: 90rpx;
-}
- 
-.time {
-  text-align: center;
-  padding: 5rpx 20rpx 5rpx 20rpx;
-  border-radius: 10rpx;
-  display: block;
-  height: 38rpx;
-  line-height: 38rpx;
-  position: relative;
-  margin: 0 auto;
-  margin-bottom: 20rpx;
-  width: 90rpx;
-  color: white;
-  font-size: 26rpx;
-  background-color: #dedede;
-}
- 
-.tab {
-  bottom: 120rpx;
-}
- 
-.tab_1 {
-  position: fixed;
-  bottom: 50rpx;
-  width: 200rpx;
-  font-size: 26rpx;
-  left: 50%;
-  margin-left: -45rpx;
-  height: 100rpx;
-}
- 
-.tab_2 {
-  right: 30rpx;
-  position: fixed;
-}
- 
-/* 聊天 */
- 
-.my_right {
-  float: right;
-  margin-top: 30rpx;
-  position: relative;
-}
- 
-.my_audio {
-  height: 60rpx;
-  width: 60rpx;
-  z-index: 2;
-  position: relative;
-  top: 10rpx;
-  left: 20rpx;
-}
- 
-.you_left {
-  margin-top: 30rpx;
-  float: left;
-  position: relative;
-  padding-left: 5rpx;
-}
- 
-.new_img {
-  width: 85rpx;
-  height: 85rpx;
-  overflow: hidden;
-}
- 
-.page_r {
-  float: right;
-}
- 
-.new_txt {
-  min-width: 380rpx;
-  width: 460rpx;
-  word-break: break-all;
-}
- 
-.new_txt_my {
-  border-radius: 7rpx;
-  background: #9fe75a;
-  position: relative;
-  right: 30rpx;
-  padding: 17rpx 30rpx 17rpx 30rpx;
-  float: right;
-  border: 1px solid #d0d0d0;
-}
- 
-.new_txt_my .arrow {
-  position: absolute;
-  z-index: 2;
-  width: 40rpx;
-  right: -38rpx;
-}
- 
-.new_txt_my .arrow em {
-  position: absolute;
-  border-style: solid;
-  border-width: 15rpx;
-  border-color: transparent transparent transparent #d0d0d0;
-  top: 1rpx;
-}
- 
-.new_txt_my .arrow span {
-  position: absolute;
-  top: 5rpx;
-  border-style: solid;
-  border-width: 15rpx;
-  border-color: transparent transparent transparent #9fe75a;
-}
- 
-.new_txt_my_2 {
-  word-break: break-all;
-  border-radius: 7rpx;
-  background: #9fe75a;
-  min-width: 330rpx;
-  max-width: 530rpx;
-  padding: 17rpx 30rpx 17rpx 30rpx;
-  float: right;
-}
- 
-.new_txt_ai {
-  border-radius: 7rpx;
-  left: 20rpx;
-  background-color: #fff;
-  position: relative;
-  border: 1px solid #d0d0d0;
-  float: left;
-}
- 
-.new_txt_ai .arrow {
-  position: relative;
-  width: 40rpx;
-  left: -30rpx;
-}
- 
-.new_txt_ai .arrow em {
-  position: absolute;
-  border-style: solid;
-  border-width: 15rpx;
-  top: 20rpx;
-  border-color: transparent #d0d0d0 transparent transparent;
-}
- 
-.new_txt_ai .arrow span {
-  position: absolute;
-  top: 20rpx;
-  border-style: solid;
-  border-width: 15rpx;
-  border-color: transparent #fff transparent transparent;
-  left: 2rpx;
-}
- 
-.ai_content {
-  word-break: break-all;
-  padding: 17rpx 30rpx 17rpx 30rpx;
-}
- 
-.sanjiao {
-  top: 25rpx;
-  position: relative;
-  width: 0px;
-  height: 0px;
-  border-width: 15rpx;
-  border-style: solid;
-}
- 
-.my {
-  border-color: transparent transparent transparent #9fe75a;
-}
- 
-.you {
-  border-color: transparent #fff transparent transparent;
-}
- 
-._span {
-  border-color: #fff transparent transparent;
-  top: -17px;
-}
- 
-.is_ai_btn {
-  border-radius: 0 0 7px 7px;
-  border-top: 1px solid #d0d0d0;
-  background: white;
-  position: relative;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 80rpx;
-  line-height: 80rpx;
-  display: flex;
-  flex-direction: row;
-  text-align: center;
-}
- 
-.is_ai_btn view {
-  width: 50%;
-}
- 
-.is_ai_btn image {
-  width: 32rpx;
-  position: relative;
-  top: 4rpx;
-  height: 32rpx;
-}
- 
-.is_ai_btn .two {
-  border-left: 1px solid #d0d0d0;
-}
- 
-.yes_problem_log {
-  border-top: 1px solid #d0d0d0;
-  height: 80rpx;
-  text-align: center;
-  line-height: 80rpx;
-}
- 
-.voice_icon {
-  width: 60rpx;
-  height: 60rpx;
-  margin: 0 auto;
-  padding: 10rpx 10rpx 10rpx 10rpx;
-}
- 
-.add_icon {
-  width: 70rpx;
-  height: 70rpx;
-  margin: 0 auto;
-  padding: 20rpx 10rpx 10rpx 15rpx;
-}
- 
-.voice_ing {
-  width: 90%;
-  height: 75rpx;
-  line-height: 85rpx;
-  text-align: center;
-  border-radius: 15rpx;
-  border: 1px solid #d0d0d0;
-}
- 
-.zezhao {
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 2;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.5);
-}
- 
-.in_voice_icon {
-  z-index: 3;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  position: absolute;
-  height: 500rpx;
-  background: #f8f8f8;
-}
- 
-.in_voice_icon .item {
-  position: relative;
-  margin-top: 50rpx;
-  margin-left: 50rpx;
-  text-align: center;
-  width: 140rpx;
-}
- 
-.in_voice_icon .img {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 15rpx;
-}
- 
-.in_voice_icon .text {
-  font-size: 32rpx;
-  margin-top: 20rpx;
-}
- 
-.sendmessage {
-  width: 100%;
-  z-index: 2;
-  display: flex;
-  position: fixed;
-  bottom: 0px;
-  background-color: #f8f8f8;
-  flex-direction: row;
-  height: 100rpx;
-}
- 
-.sendmessage input {
-  width: 78%;
-  height: 80rpx;
-  line-height: 80rpx;
-  font-size: 28rpx;
-  margin-top: 10rpx;
-  margin-left: 20rpx;
-  border-bottom: 1px solid #d0d0d0;
-  padding-left: 20rpx;
-}
- 
-.sendmessage button {
-  border: 1px solid white;
-  width: 18%;
-  height: 80rpx;
-  background: #0c0;
-  color: white;
-  line-height: 80rpx;
-  margin-top: 10rpx;
-  font-size: 28rpx;
-}
- 
-.hei {
-  height: 20rpx;
-}
- 
-.history {
-  height: 88%;
-  display: flex;
-  font-size: 14px;
-  line-height: 50rpx;
-  position: relative;
-  top: 20rpx;
-}
- 
-.icno_kf {
-  position: fixed;
-  bottom: 160rpx;
-  margin: 0 auto;
-  text-align: center;
-  left: 50%;
-  margin-left: -40rpx;
-  width: 100rpx;
-  height: 100rpx;
-  border-radius: 50%;
+.mine {
+  .food {
+    margin: 20px;
+    display: flex;
+    justify-content: space-around;
+    .food-info{
+      width: 40%;
+      border-radius: 10px;
+      background-color: #FFFFFF;
+      padding: 10px;
+      box-shadow:0px 0px 5px rgb(139, 138, 138) ;
+    }
+  }
 }