admin

12_vuecli/mediaapp/src/components/NavComp.vue

@@ -171,9 +171,9 @@ export default {
         background-color: #409EFF;
     }
     .talk .header,.talk .nav{
-        background-color: #9bb771;
+        background-color: #6165a9;
     }
     .mine .header,.mine .nav{
-        background-color: #6165a9;
+        background-color: #9bb771;
     }
 </style>

12_vuecli/mediaapp/src/views/talk/TalkPage.vue

@@ -1,12 +1,100 @@
 <template>
-    <div class="talk-container">
-        <h1>Talk</h1>
+  <div class="talk-container">
+    <div class="talk-list">
+        <div class="talk-item" v-for="(item,index) in talkList" :key="index">
+            <div class="ask">{{item.ask}}</div>
+            <div class="answer">{{item.answer}}</div>
+        </div>
     </div>
+    <div class="talk-form">
+      <van-field
+        v-model="askInp"
+        clearable
+        placeholder="发消息..."
+      >
+        <template #button>
+          <van-button @click="sendMessage" color="#6165a9" size="small" type="primary">发送</van-button>
+        </template>
+      </van-field>
+    </div>
+  </div>
 </template>
+<style scoped>
+.talk-container .talk-form{
+    position: fixed;
+    bottom: 1rem;
+    left: 0;
+    width: 100%;
+    box-shadow: 0 0 10px #ccc;
+}
+.talk-item{
+    display: flex;
+    flex-direction: column;
+    padding:.2rem;
+}
+.talk-item .ask{
+    align-self: flex-end;
+    font-size: .3rem;
+    color: #fff;
+    background-color: #6165a9;
+    padding:.1rem .2rem;
+    border-radius: .2rem;
+}
+.talk-item .answer{
+    align-self: flex-start;
+    font-size: .3rem;
+    color: #111;
+    background-color: #eee;
+    padding:.1rem .2rem;
+    border-radius: .2rem;
+
+}
+</style>
 <script>
 export default {
-    mounted() {
-        this.$emit("changePage",'1003')
-    },
-}
+  data() {
+    return {
+      askInp: "",
+      talkList: []
+    };
+  },
+  methods: {
+    sendMessage(){
+        // this.talkList.push({
+        //     ask: this.askInp,
+        //     answer: "回答"
+        // })
+        // this.askInp = "";
+
+        fetch("/doubao/chat/completions",{
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": "Bearer 1841e844-275f-4d8f-811b-2b4077e8108f"
+            },
+            body: JSON.stringify({
+                model:"doubao-1-5-pro-32k-250115",
+                messages:[
+                    {
+                        role: "assistant",
+                        content: "You are a helpful assistant."
+                    },
+                    {
+                        role: "user",
+                        content: "Hello!"
+                    }
+                ]
+            })
+        }).then(res => res.json()).then(res => {
+            console.log(res);
+        }).catch(err => {
+            console.log(err);
+        })
+
+    }
+  },
+  mounted() {
+    this.$emit("changePage", "1003");
+  },
+};
 </script>

12_vuecli/mediaapp/vue.config.js

@@ -15,6 +15,13 @@ module.exports = defineConfig({
         pathRewrite:{
           '^/market':''
         }
+      },
+      '/doubao':{
+        target:'https://ark.cn-beijing.volces.com/api/v3',
+        changeOrigin:true,
+        pathRewrite:{
+          '^/doubao':''
+        }
       }
     }
   },