优化页面

pages/Mine/minecomponents/pkInformation.vue

@@ -66,20 +66,20 @@
           </view>
           <!-- <view class="handle"> -->
             <view class="handle" v-if="item.inviteStatus === 0">
-              <view class="recompose" @click="onTop(item)">
+              <view class="recompose" @click="onTop(item)" v-if="item.isPin === false">
               <image
                 style="width: 40rpx; height: 40rpx"
                 src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pin.png"
                 mode="scaleToFill"
               />
             </view>
-            <!-- <view class="recompose" @click="onOutTop(item)">
+            <view class="recompose" @click="onOutTop(item)" v-if="item.isPin === true">
               <image
                 style="width: 40rpx; height: 40rpx"
-                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/cancelPin.png.png"
+                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/cancelPin.png"
                 mode="scaleToFill"
               />
-            </view> -->
+            </view>
             <view class="expurgate" @click="onRecompose(item)">
               <image
                 style="width: 40rpx; height: 40rpx"
@@ -100,12 +100,26 @@
     </view>
   </view>
   <Recompose ref="createModule" class="createModule" :message="parentMessage" @Refresh="onRefresherRefresh"></Recompose>
-
+  <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
+    <view class="popup-container">
+      <view class="popup-title">选择置顶时长</view>
+      <view class="popup-picker">
+        <picker mode = "selector" :range="pickerArray" :value="index" @change="bindPickerChange">
+						<view class="uni-input">{{pickerArray[index]}}小时</view>
+        </picker>
+      </view>
+      <view class="popup-btn">
+        <view class="uni-primary" @click="onTopConfirm">确定</view>
+        <view class="uni-default" @click="closePopup">取消</view>
+      </view>
+    </view>
+  </uni-popup>
 </template>
 
 <script>
 import request from "../../../components/request.js";
 import formatDate from "../../../components/formatDate.js";
+import DifferenceArray from "../../../components/DifferenceArray.js";
 import Recompose from "../minecomponents/recompose/recompose.vue";
 
 export default {
@@ -117,6 +131,10 @@ export default {
       createModule: null,
       parentMessage: null,
       triggered: false,
+      pickerArray: [],
+      index:0,
+      topPinnedPersondata:{},
+      Topdate:0
     };
   },
   onLoad() {
@@ -181,7 +199,74 @@ export default {
     },
     // 置顶
     onTop(item) {
-
+      this.pickerArray = DifferenceArray(item.pkTime)
+      this.$refs.popup.open("center");
+      this.topPinnedPersondata = item
+    },
+    bindPickerChange(e){
+      this.index = e.detail.value
+    },
+    closePopup() {
+      this.$refs.popup.close();
+      this.index = 0
+      this.pickerArray = []
+      this.topPinnedPersondata = {}
+    },
+    onTopConfirm() {
+      if(Math.ceil(Date.now() / 1000 + Number(this.pickerArray[this.index]) * 3600) <= this.topPinnedPersondata.pkTime){
+        this.Topdate = Math.ceil(Date.now() / 1000 + Number(this.pickerArray[this.index]) * 3600)
+      }else{
+        this.Topdate = this.topPinnedPersondata.pkTime
+      }
+      console.log(this.Topdate,this.topPinnedPersondata.id);
+      
+      request({
+        url: "user/pinToTop",
+        method: "POST",
+        data: {
+          articleId: this.topPinnedPersondata.id,
+          pinExpireTime: this.Topdate,
+        },
+        userInfo: true,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.onRefresherRefresh();
+          uni.showToast({
+            title:res.msg,
+            icon: "none",
+            duration: 3000,
+          });
+          this.closePopup()
+        } else {
+          uni.showToast({
+            title:res.msg,
+            icon: "none",
+            duration: 3000,
+          });
+        }
+      });
+    },
+    //取消置顶
+    onOutTop(item) {
+      request({
+        url: "user/cancelPin",
+        method: "POST",
+        data: {
+          articleId: item.id,
+        },
+        userInfo: true,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.onRefresherRefresh();
+          uni.showToast({
+            title: res.data,
+            icon: "none",
+            duration: 3000,
+          });
+        } else {
+          console.log(res.msg);
+        }
+      });
     },
     // 删除pk
     onExpurgate(item) {
@@ -368,4 +453,66 @@ export default {
   z-index: 998;
   width: 100vw;
 }
+.popup-container{
+  width: 500rpx;
+  height: 300rpx;
+  background-color: #ffffff;
+  border-radius: 30rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.popup-title{
+  font-size: 30rpx;
+  color: #161616;
+  font-weight: bold;
+  margin-top: 30rpx;
+}
+.popup-picker{
+  margin-top: 30rpx;
+  width: 400rpx;
+  height: 50rpx;
+  border: #5bced1 solid 1rpx;
+  border-radius: 15rpx;
+}
+.uni-input{
+  font-size: 30rpx;
+  color: #ffffff;
+  width: 400rpx;
+  height: 50rpx;
+  text-align: center;
+  line-height: 50rpx;
+  background-color: #5bced1;
+  border-radius: 15rpx;
+}
+.popup-btn{
+  margin-top: 30rpx;
+  display: flex;
+  justify-content: center;
+}
+.uni-primary{
+  width: 150rpx;
+  height: 50rpx;
+  border-top-left-radius: 50rpx;
+  border-bottom-left-radius: 50rpx;
+  border-bottom-right-radius: 50rpx;
+  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
+  font-size: 25rpx;
+  color: #ffffff;
+  text-align: center;
+  line-height: 50rpx;
+  margin-right: 20rpx;
+}
+.uni-default{
+  width: 150rpx;
+  height: 50rpx;
+  border-top-left-radius: 50rpx;
+  border-bottom-left-radius: 50rpx;
+  border-bottom-right-radius: 50rpx;
+  background-image: linear-gradient(135deg, #cecece, #ffffff);
+  font-size: 25rpx;
+  color: #161616;
+  text-align: center;
+  line-height: 50rpx;
+}
 </style>