上传我的推广页面

manifest.json

@@ -54,7 +54,9 @@
     "mp-weixin" : {
         "appid" : "wxe7ae8cbe1673834c",
         "setting" : {
-            "urlCheck" : false
+            "urlCheck" : false,
+			"ignoreDevUnusedFiles":false
+
         },
         "usingComponents" : true,
         "permission" : {}

package.json

@@ -14,7 +14,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@climblee/uv-ui": "^1.1.20",
     "ali-oss": "^6.21.0",
-    "dayjs": "^1.11.12"
+    "dayjs": "^1.11.12",
+    "uview-ui": "^2.0.36"
   }
 }

pages.json

@@ -1,4 +1,11 @@
 {
+	"easycom": {
+		"autoscan": true,
+		"custom": {
+			"^uv-(.*)": "@climblee/uv-ui/components/uv-$1/uv-$1.vue"
+		},
+		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+	},
 	"pages": [
 		{
 			"path": "pages/index/index",
@@ -124,6 +131,27 @@
 			{
 				"navigationBarTitleText" : ""
 			}
+		},
+		{
+			"path" : "pages/mine/sonPage/promotion/promotionDetail",
+			"style" :
+			{
+				"navigationBarTitleText" : ""
+			}
+		},
+		{
+			"path" : "pages/mine/sonPage/promotion/promotionRecordList",
+			"style" :
+			{
+				"navigationBarTitleText" : ""
+			}
+		},
+		{
+			"path" : "pages/mine/sonPage/release/releaseList",
+			"style" :
+			{
+				"navigationBarTitleText" : ""
+			}
 		}
 	],
 	"globalStyle": {

pages/index/center.vue

@@ -24,7 +24,7 @@
       </view>
       <!--  去认证  -->
       <view style="position: absolute;z-index:2;width:55%;height:20%;top: 32%;left: 44%;">
-        <span style="font-size: 26rpx;" class="aaa">去认证</span>
+        <span style="font-size: 26rpx;" class="textColor">去认证</span>
       </view>
       <!--  用户信息  -->
       <view style="position: absolute;z-index:2;width:55%;height:20%;top: 60%;left: 7%;">
@@ -131,7 +131,7 @@ export default {
   padding: 0;
 }
 
-.aaa {
+.textColor {
   background: $uni-linear-gradient-color;
   -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
   -webkit-text-fill-color: transparent; /*给文字设置成透明*/

pages/mine/promotionRecord.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import PromotionRecordList from "@/components/post/promotionRecordList.vue";
+import PromotionRecordList from "@/pages/mine/sonPage/promotion/promotionRecordList.vue";
 
 export default {
   components: {PromotionRecordList},
@@ -73,6 +73,42 @@ export default {
           createBy: "24小时",
           isPay: "￥100"
         },
+        {
+          title: "推广记录",
+          createTime: '2024-08-22 09:00:00',
+          createBy: "24小时",
+          isPay: "￥100"
+        },
+        {
+          title: "推广记录",
+          createTime: '2024-08-22 09:00:00',
+          createBy: "24小时",
+          isPay: "￥100"
+        },
+        {
+          title: "推广记录",
+          createTime: '2024-08-22 09:00:00',
+          createBy: "24小时",
+          isPay: "￥100"
+        },
+        {
+          title: "推广记录",
+          createTime: '2024-08-22 09:00:00',
+          createBy: "24小时",
+          isPay: "￥100"
+        },
+        {
+          title: "推广记录",
+          createTime: '2024-08-22 09:00:00',
+          createBy: "24小时",
+          isPay: "￥100"
+        },
+        {
+          title: "推广记录",
+          createTime: '2024-08-22 09:00:00',
+          createBy: "24小时",
+          isPay: "￥100"
+        },
       ],
     }
   },
@@ -87,61 +123,65 @@ export default {
   margin: 0;
   padding: 0;
 }
+.promotionRecord{
+  width: 100vw;
+  height: 100vh;
 
-.frame {
-  width: 100%;
-  height: calc(100vh - 220rpx);
-  border: 1px solid red;
-  padding: 28rpx 28rpx 0 28rpx;
-
-  .title {
-    font-size: 34rpx;
-    color: #333;
-    font-weight: 700
-  }
-
-  .search {
-    display: flex;
-    align-items: center;
-    gap: 10rpx;
+  .frame {
     width: 100%;
-    height: 80rpx;
-    margin-top: 20rpx;
+    //height: calc(100vh - 220rpx);
+    padding: 28rpx 28rpx 0 28rpx;
 
+    .title {
+      font-size: 34rpx;
+      color: #333;
+      font-weight: 700
+    }
 
-    .dateTimeCls {
+    .search {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      width: 25%;
-      height: 80%;
-      border: 1px solid #b0b2b3;
-      padding: 5rpx;
-      border-radius: 20rpx;
-
-      .date {
-        font-size: 25rpx;
-        display: flex;
-        align-items: center;
-        width: 80%;
-        height: 100%;
-        color: #b0b2b3;
+      gap: 10rpx;
+      width: 100%;
+      height: 80rpx;
+      margin-top: 20rpx;
 
-      }
 
-      .image {
-        width: 20%;
-        height: 100%;
+      .dateTimeCls {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 25%;
+        height: 80%;
+        border: 1px solid #b0b2b3;
+        padding: 5rpx;
+        border-radius: 20rpx;
+
+        .date {
+          font-size: 25rpx;
+          display: flex;
+          align-items: center;
+          width: 80%;
+          height: 100%;
+          color: #b0b2b3;
+
+        }
+
+        .image {
+          width: 20%;
+          height: 100%;
+        }
       }
     }
-  }
 
 
-  .publishListClass {
-    margin-top: 10rpx;
-    height: calc(100vh - 200rpx);
-    overflow: auto;
-    width: 100%;
+    .publishListClass {
+      margin-top: 10rpx;
+      height: 78vh;
+      overflow: auto;
+      width: 100%;
+    }
   }
 }
+
 </style>

pages/mine/releaseRecord.vue

@@ -33,9 +33,10 @@
 </template>
 
 <script>
-import PublishList from "@/components/post/publishList.vue";
+import PublishList from "@/pages/mine/sonPage/release/releaseList.vue";
 
 export default {
+  name: "releaseRecord",
   components: {
     PublishList
   },
@@ -94,8 +95,8 @@ export default {
     };
   },
   methods: {
-    getData(type){
-      console.log(type,"点击了标签栏")
+    getData(type) {
+      console.log(type, "点击了标签栏")
     }
   }
 }
@@ -108,44 +109,51 @@ export default {
   padding: 0;
 }
 
-.frame {
-  width: 100%;
-  height: calc(100vh - 220rpx);
-  padding: 28rpx 28rpx 0 28rpx;
+.releaseRecord {
+  width: 100vw;
+  height: 100vh;
 
-  .title {
-    font-size: 34rpx;
-    color: #333;
-    font-weight: 700
-  }
-
-  .tabbar {
-    display: flex;
-    justify-content: flex-start;
-    gap: 20rpx;
-    margin-top: 40rpx;
+  .frame {
+    width: 100%;
+    //height: calc(100vh - 220rpx);
+    padding: 28rpx 28rpx 0 28rpx;
 
-    .tabbarItemActive {
-      padding: 10rpx 40rpx;
-      background: $uni-linear-gradient-color;
-      -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
-      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+    .title {
+      font-size: 34rpx;
+      color: #333;
+      font-weight: 700
     }
 
-    .tabbarItemNoActive {
-      padding: 10rpx 40rpx;
-      background-color: #eaeaeb;
-      color: #777777;
-      border-radius: 20rpx;
+    .tabbar {
+      display: flex;
+      justify-content: flex-start;
+      gap: 20rpx;
+      margin-top: 40rpx;
+
+      .tabbarItemActive {
+        padding: 10rpx 40rpx;
+        background: $uni-linear-gradient-color;
+        -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
+        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+      }
+
+      .tabbarItemNoActive {
+        padding: 10rpx 40rpx;
+        background-color: #eaeaeb;
+        color: #777777;
+        border-radius: 20rpx;
+      }
     }
-  }
 
 
-  .publishListClass {
-    margin-top: 10rpx;
-    height: calc(100vh - 200rpx);
-    overflow: auto;
-    width: 100%;
+    .publishListClass {
+      //margin-top: 10rpx;
+      height: 78vh;
+      //margin-top: 300rpx;
+      overflow: auto;
+      width: 100%;
+    }
   }
 }
+
 </style>

pages/mine/sonPage/promotion/promotionDetail.vue

@@ -0,0 +1,225 @@
+<template>
+  <view class="promotionDetail">
+    <!--顶部导航栏-->
+    <navbar leftClick @leftClick="$utils.navigateBack" title="推广详情"/>
+
+    <!--主页面-->
+    <view class="frame">
+      <!--标题-->
+      <view class="title">
+        <span>推广基本信息</span>
+      </view>
+
+      <!--基本信息-->
+      <view style="" class="basicInfo">
+        <view class="item">
+          <view class="label">春天的气息丫丫</view>
+          <view class="value">???</view>
+        </view>
+        <view class="item">
+          <view class="label">价格</view>
+          <view class="value">100</view>
+        </view>
+        <view class="item">
+          <view class="label">时长</view>
+          <view class="value">24小时</view>
+        </view>
+        <view class="item">
+          <view class="label">联系方式</view>
+          <view class="value">输入框</view>
+        </view>
+        <view>推广作品</view>
+        <view style="width: 30%;height: 300rpx;border-radius: 20rpx;overflow: hidden;">
+          <image src="/static/image/promotionRecord/3.png" style="width: 100%;height: 100%;"></image>
+        </view>
+      </view>
+
+
+      <!--  继续发布按钮-->
+      <view class="bottom">
+        <button @click="continueToPublish" class="continueBtn">
+          继续发布
+        </button>
+      </view>
+
+
+      <!--确认发布弹框-->
+      <uv-popup ref="popup" mode="center" custom-style="height: 400rpx;" :closeOnClickOverlay="false" >
+        <view class="content">
+          <view class="title">
+            推广选项
+          </view>
+          <!--付费周期-->
+          <view style="" class="payCycle">
+            <view>付费周期</view>
+            <view style="width: 200rpx;height:50rpx">
+              <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
+              <view style="display: flex;justify-content: flex-start" @click="openPicker">
+                <span style="margin-right: 10rpx;">{{ form.cycle }}</span>
+                <uv-icon name="arrow-down" color="#2979ff" size="28"></uv-icon>
+              </view>
+            </view>
+          </view>
+
+          <!--金额-->
+          <view style="width:100%;display: flex;justify-content: space-between;align-items: center;">
+            <view>金额</view>
+            <view style="width: 200rpx;height:50rpx">
+              <uv-input type="number" placeholder="请输入内容" border="surround" v-model="form.moneyValue"
+                        @change="moneyValueChange"></uv-input>
+            </view>
+          </view>
+
+          <!--确认推广按钮-->
+          <view class="confirmBottom">
+            <button @click="confirmPromotion" class="confirmPromotionBtn">
+              确认推广
+            </button>
+          </view>
+        </view>
+      </uv-popup>
+
+
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  onLoad: function (options) {
+    // 获取传递过来的 id 参数
+    const id = options.id;
+    console.log('ID:', id);
+    // 进行后续处理...
+  },
+  data() {
+    return {
+      columns: [
+        ['一天', '两天', '三天']
+      ],
+      form: {
+        moneyValue: 0,
+        cycle: '一天'
+      },
+
+    };
+  },
+  methods: {
+    openPicker() {
+      this.$refs.picker.open();
+    },
+    confirm(e) {
+      console.log('confirm', e);
+      this.form.cycle = e.value[0]
+    },
+    // 推广确认按钮
+    continueToPublish() {
+      this.$refs.popup.open();
+    },
+    // 金额发生变化
+    moneyValueChange(e) {
+      console.log('moneyValue', e);
+      this.form.moneyValue = e
+    },
+    // 确认推广
+    confirmPromotion() {
+      console.log('确认推广', this.form);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.promotionDetail {
+  width: 100vw;
+  height: 100vh;
+
+  .frame {
+    width: 100%;
+    //height: calc(100vh - 220rpx);
+    padding: 28rpx 28rpx 0 28rpx;
+
+    .title {
+      font-size: 36rpx;
+      font-weight: 600;
+    }
+
+    .basicInfo {
+      display: flex;
+      flex-direction: column;
+      gap: 60rpx;
+      margin-top: 50rpx;
+      width: 90%;
+
+      .item {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+
+    .bottom {
+      position: fixed;
+      bottom: 30rpx;
+      left: 25%;
+      width: 50%;
+      height: 100rpx;
+
+      .continueBtn {
+        color: #ffffff;
+        background: $uni-linear-gradient-btn-color;
+      }
+    }
+  }
+
+
+
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 20rpx;
+    width: 600rpx;
+    height: 100%;
+    padding: 20rpx;
+
+
+    .title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .payCycle {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+
+    .confirmBottom {
+      position: fixed;
+      bottom: 38%;
+      left: 30%;
+      width: 38%;
+      height: 100rpx;
+
+      .confirmPromotionBtn {
+        color: #ffffff;
+        background: $uni-linear-gradient-btn-color;
+      }
+    }
+  }
+}
+
+/deep/.uv-popup .uv-popup__content{
+  border-radius: 20rpx;
+}
+</style>

components/post/promotionRecordList.vue → pages/mine/sonPage/promotion/promotionRecordList.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="promotionRecordList">
     <view class="item" v-for="(item, index) in list"
-          @click="$utils.navigateTo('/publish/postDetail?id=123')"
+        @click="$utils.navigateTo(`/mine/sonPage/promotion/promotionDetail?id=${item.id}`)"
           :key="index">
       <image src="/static/image/center/1.png" style="width: 40%"></image>
       <view class="text">
@@ -37,7 +37,12 @@ export default {
   props: ['list'],
   data() {
     return {};
-  }
+  },
+  methods: {
+    gotoPage(item) {
+      this.$utils.navigateTo('/mine/promotionDetail')
+    }
+  },
 }
 </script>
 

components/post/publishList.vue → pages/mine/sonPage/release/releaseList.vue

@@ -28,7 +28,7 @@
 
 <script>
 	export default {
-		name:"postList",
+		name:"releaseList",
 		props : ['list'],
 		data() {
 			return {