设置及发表图文页面

Yi.Vue3.x.Vant/components.d.ts

@@ -13,12 +13,18 @@ declare module '@vue/runtime-core' {
     RouterView: typeof import('vue-router')['RouterView']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanButton: typeof import('vant/es')['Button']
+    VanCell: typeof import('vant/es')['Cell']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCol: typeof import('vant/es')['Col']
+    VanDivider: typeof import('vant/es')['Divider']
+    VanField: typeof import('vant/es')['Field']
     VanGrid: typeof import('vant/es')['Grid']
     VanGridItem: typeof import('vant/es')['GridItem']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
     VanList: typeof import('vant/es')['List']
+    VanNavBar: typeof import('vant/es')['NavBar']
+    VanPopup: typeof import('vant/es')['Popup']
     VanPullRefresh: typeof import('vant/es')['PullRefresh']
     VanRow: typeof import('vant/es')['Row']
     VanSticky: typeof import('vant/es')['Sticky']
@@ -26,5 +32,6 @@ declare module '@vue/runtime-core' {
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']
     VanTabs: typeof import('vant/es')['Tabs']
+    VanUploader: typeof import('vant/es')['Uploader']
   }
 }

Yi.Vue3.x.Vant/src/components/AppGrid.vue

@@ -3,7 +3,7 @@
         <van-col span="24">
           <p >  {{data.head}}</p>
         </van-col>
-        <van-col class="col-body" span="6"  v-for="item in data.body"><van-icon name="chat-o" size="2rem" /> <br>{{item.title}}</van-col>
+        <van-col class="col-body" span="6"  v-for="item in data.body"><van-icon :name="item.icon" size="2rem" /> <br>{{item.title}}</van-col>
     </van-row>
 
 </template>
@@ -25,7 +25,7 @@ text-align: center;
 }
 p{
 font-size: large;
-font-weight: 545;
+font-weight:bold;
 }
 </style>
 

Yi.Vue3.x.Vant/src/layout/bottom/index.vue

@@ -17,10 +17,10 @@
 <van-action-sheet v-model:show="show" >
 
 
-    <van-button class="btn1 btn " type="primary" >发图文</van-button>
-  <van-button class="btn" type="primary">发视频</van-button>
-  <van-button class="btn" type="primary">发文章</van-button>
-  <van-button class="btn" type="primary">发二手</van-button>
+  <router-link to="/imageText"> <van-button class="btn1 btn " style="background-color: #5FBC76;" >发图文</van-button></router-link>
+  <van-button class="btn" style="background-color: #FF689B;">(暂未开放)发视频</van-button>
+  <van-button class="btn" style="background-color: #F7A63A;">(暂未开放)发文章</van-button>
+  <van-button class="btn" style="background-color: #6AB5EE;">(暂未开放)发二手</van-button>
 
 
   
@@ -44,6 +44,7 @@ const show = ref(false);
   height: 4rem;
   width:90%;
 margin: 0.5rem 1rem 0.5rem 1rem;
+color: #FFFFFF;
 }
   .content {
     padding: 16px 16px 160px;

Yi.Vue3.x.Vant/src/router/index.ts

@@ -13,8 +13,6 @@ export const constantRoutes = [
           component: () => import('@/view/my.vue'),
           name: 'My',
         },
-
-
         {
           path: '/main',
           component: () => import('@/layout/main/index.vue'),
@@ -40,7 +38,16 @@ export const constantRoutes = [
         }
       ]
     },
-  
+    {
+      path: '/imageText',
+      component: () => import('@/view/send/imageText.vue'),
+      name: 'ImageText',
+    },
+    {
+      path: '/login',
+      component: () => import('@/view/Login.vue'),
+      name: 'Login',
+    },
   ];
 
   const router = createRouter({

Yi.Vue3.x.Vant/src/view/login.vue

@@ -0,0 +1,3 @@
+<template>
+    登录页面
+</template>

Yi.Vue3.x.Vant/src/view/main/recommend.vue

@@ -7,7 +7,7 @@
       finished-text="没有更多了"
       @load="onLoad"
     >
-      <van-row v-for="item in list" :key="item" class="row">
+      <van-row v-for="item in list" class="row">
         <van-col span="4" class="leftCol">
           <van-image
             round
@@ -63,7 +63,6 @@
     v-model:show="show"
     :actions="actions"
     cancel-text="取消"
-    description="这是一段描述信息"
     close-on-click-action
   />
 
@@ -102,9 +101,9 @@ const refreshing = ref(false);
 
 const show = ref(false);
 const actions = [
-  { name: "选项一" },
-  { name: "选项二" },
-  { name: "选项三", subname: "描述信息" },
+  { name: "取消关注" },
+  { name: "将TA拉黑" },
+  { name: "举报"}
 ];
 const onLoad = () => {
   setTimeout(() => {
@@ -121,7 +120,7 @@ const onLoad = () => {
     if (list.value.length >= 40) {
       finished.value = true;
     }
-  }, 1000);
+  }, 100);
 };
 
 const onRefresh = () => {

Yi.Vue3.x.Vant/src/view/main/square.vue

@@ -3,7 +3,7 @@
 
   <van-row class="test ">
     <van-col span="24">
-      <!-- <div class="test">这里是广场页面</div> -->
+      这里是广场页面
     </van-col>
 
   </van-row>

Yi.Vue3.x.Vant/src/view/my.vue

@@ -1,8 +1,11 @@
 <template>
+
+
+
     <van-row class="headRow">
         <van-col span="2"><van-icon name="scan" size="1.5rem"/></van-col>
         <van-col span="20"></van-col>
-        <van-col span="2"><van-icon name="setting-o" size="1.5rem"/></van-col>
+        <van-col span="2"><van-icon name="setting-o" size="1.5rem" @click="show=true"/></van-col>
     </van-row>   
 
     <van-row class="bodyRow">
@@ -14,8 +17,8 @@
             src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
           />
           </van-col>
-          <van-col span="12"><span class="title">大白不在家</span></van-col>
-          <van-col span="6"><span class="subtitle">个人主页<van-icon name="arrow" /></span></van-col>
+          <van-col span="12" class="title"><span >大白不在家</span></van-col>
+          <van-col span="6" class="subtitle"><span >个人主页<van-icon name="arrow" /></span></van-col>
 
 
           <van-col span="6" class="bodyCol"><div><span>6</span><br>关注</div></van-col>
@@ -25,44 +28,115 @@
 
           <van-col span="24">
         <van-row class="btnRow">
-            <van-col span="12">     <van-button class="btn" type="primary" >我的购物</van-button></van-col>
-            <van-col span="12" >   <van-button class="btn" type="primary">我的签到</van-button></van-col>
+            <van-col span="12" >   <van-button class="btn"  > <van-icon name="bag"  size="1.8rem"/> 我的购物<van-icon name="arrow" size="1.2rem" /></van-button></van-col>
+
+            <van-col span="12">   <van-button class="btn"><van-icon name="send-gift" size="1.8rem" />我的签到<van-icon name="arrow" size="1.2rem"/></van-button></van-col>
         </van-row>
           </van-col >
 
 
-          <AppGrid class="grid" :data='data'></AppGrid>
-          <AppGrid class="grid" :data='data'></AppGrid>
-          <AppGrid class="grid" :data='data'></AppGrid>
+          <AppGrid class="grid" :data='data1'></AppGrid>
+          <AppGrid class="grid" :data='data2'></AppGrid>
+          <AppGrid class="grid" :data='data3'></AppGrid>
     </van-row>
 
+    <van-popup v-model:show="show" position="right" :style="{ height:'100%',width:'100%',backgroundColor:'#F8F8F8' }" >
 
+      <van-nav-bar
+  title="设置"
+  left-text="返回"
+  left-arrow
+  @click-left="show=false"
+/>
+      <van-cell-group>
+        <van-cell title="账户与安全" is-link />
+        <van-cell title="黑名单" is-link />
+        <van-cell title="推送设置" is-link />
+        <van-cell title="隐私管理" is-link />
+        <van-cell title="通用设置" is-link />
+      </van-cell-group>
+      <van-cell-group class="group">
+        <van-cell title="家庭入驻" is-link />
+        <van-cell title="社区入驻" is-link />
+      </van-cell-group>
 
+      <van-cell-group class="group">
+        <van-cell title="清理缓存" is-link />
+        <van-cell title="检测更新" is-link />
+        <van-cell title="关于我们" is-link />
+        <van-cell title="给个好评" is-link />
+      </van-cell-group>
+
+      <van-button type="danger">退出登录</van-button>
+    </van-popup>
+    <!-- <van-popup v-model:show="show" position="right">
+     <div class="body-div"> 内容</div>
+      </van-popup> -->
 </template>
 <script setup lang="ts">
 import AppGrid from '@/components/AppGrid.vue'
 import {AppGridData} from '@/type/class/AppGridData.ts'
-let data :AppGridData={
-  head:"你好压抑",
+import {ref} from 'vue'
+const show=ref<boolean>(false);
+let data1 :AppGridData={
+  head:"个人中心",
   body:[
   {
-    title:"你好",
-    icon:"123"
+    title:"我的消息",
+    icon:"comment-o"
   },
   {
-    title:"你好2",
-    icon:"123"
+    title:"我的聊天",
+    icon:"chat-o"
   },
   {
-    title:"你好2",
-    icon:"123"
+    title:"我的喜欢",
+    icon:"like-o"
   },
   {
-    title:"你好2",
-    icon:"123"
+    title:"我的关注",
+    icon:"user-o"
   },
 ]
 };
+let data2 :AppGridData={
+  head:"功能",
+  body:[
+  {
+    title:"排行榜",
+    icon:"medal-o"
+  },
+  {
+    title:"活动报名",
+    icon:"balance-list-o"
+  },
+  {
+    title:"钱钱兑换",
+    icon:"gem-o"
+  },
+  {
+    title:"全网上新",
+    icon:"gift-card-o"
+  },
+]
+};
+let data3 :AppGridData={
+  head:"服务",
+  body:[
+  {
+    title:"客服",
+    icon:"service-o"
+  },
+  {
+    title:"小黑屋",
+    icon:"wap-home-o"
+  },
+  {
+    title:"邀请好友",
+    icon:"friends-o"
+  }
+]
+};
 </script>
 <style scoped>
 .grid{
@@ -75,20 +149,20 @@ let data :AppGridData={
 .bodyRow
 {
     text-align: left;
-    margin-top: 2rem;
+    margin-top: 1.5rem;
     padding-left: 1.5rem;
     padding-right: 1.5rem;;
+    padding-bottom: 4rem;
 }
-.bodyRow span{
-    line-height: 2rem;
 
-}
 .title
 {
     font-size: 1.5rem;
+    line-height: 4rem;
 }
 .subtitle
 {
+  line-height: 4rem;
     color:#CBCBCB ;
 }
 .bodyCol{
@@ -99,6 +173,7 @@ let data :AppGridData={
 .btn{
     width: 100%;
     margin: 0;
+    padding: 0;
     background-color: #FFFFFF;
     border:none;
     color: black;
@@ -107,4 +182,30 @@ let data :AppGridData={
     margin-top: 1.5rem;
     box-shadow: 0rem 0rem 0.2rem 0.2rem #f3f3f3;
 }
+.btnRow .van-button
+{
+  font-size: 1.2rem;
+}
+.van-icon-send-gift
+{
+  margin-right: 0.5rem;
+}
+.btnRow .van-icon-arrow
+{
+  margin-left: 0.45rem;
+}
+.van-cell
+{
+  text-align: left;
+}
+.group
+{
+margin-top: 1rem;
+}
+.van-popup .van-button
+{
+  width: 90%;
+  margin-top: 2rem;
+}
+
 </style>

Yi.Vue3.x.Vant/src/view/send/imageText.vue

@@ -0,0 +1,95 @@
+<template>
+<transition name="van-slide-right">
+    <div v-show="visible" >
+        <van-sticky>
+            <van-row class="head-row">
+                <van-col span="3">
+                    <router-link to="/recommend">
+                        <van-icon name="arrow-left" size="1.5rem" />
+                    </router-link>
+                </van-col>
+                <van-col span="18"><span>发图文</span></van-col>
+                <van-col span="3">发布</van-col>
+            </van-row>
+        </van-sticky>
+
+
+
+        <van-cell-group>
+            <van-field rows="5" autosize type="textarea" v-model="value" label-width="0" :show-word-limit="true"
+                maxlength="500" placeholder="每一天，都是为了下一天" />
+        </van-cell-group>
+        <van-row class="body-row">
+            <van-col span="10">
+                <van-icon name="share-o" size="1.5rem" /><span>发布到去其他</span>
+            </van-col>
+            <van-col span="4"></van-col>
+            <van-col span="10"><span>选择更多人看到</span>
+                <van-icon name="arrow" size="1.2rem" />
+            </van-col>
+        </van-row>
+
+
+        <van-divider />
+        <van-row>
+            <van-col class="img-col" span="24">
+                <van-uploader v-model="fileList" multiple />
+            </van-col>
+        </van-row>
+    </div>
+
+</transition>
+
+
+</template>
+<script setup lang="ts">
+import { ref,onMounted } from 'vue'
+const value = ref<string>("")
+const fileList = ref([
+]);
+const visible=ref<boolean>(false)
+
+onMounted(() => {
+   visible.value=true;
+})
+</script>
+<style scoped>
+.head-row {
+    background-color: #F8F8F8;
+
+    padding: 2rem 1rem 1.5rem 1rem;
+}
+
+.head-row span {
+    font-size: large;
+}
+
+.van-field-5-label {
+    display: none;
+}
+
+.body-row {
+    margin-top: 1rem;
+}
+
+.preview-cover {
+    position: absolute;
+    bottom: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 4px;
+    color: #fff;
+    font-size: 12px;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.3);
+}
+
+.van-uploader {
+
+    margin: 0 1.2rem 0 1.2rem;
+}
+
+.img-col {
+    text-align: left;
+}
+</style>