优化页面

pages/Home/Home.vue

@@ -1,11 +1,15 @@
 <template>
   <view class="page">
-    <image src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png" class="HomeBackground"></image>
+    <image
+      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
+      class="HomeBackground"
+    ></image>
   </view>
   <view class="top-navigation-container">
     <top-navigation
       @RealTimePk="goRealTimePk"
       @MakeAppointmentPK="goMakeAppointmentPK"
+      @screening="goScreening"
     ></top-navigation>
   </view>
   <view class="Advertisement" @click="goAdvertisement">
@@ -61,6 +65,116 @@
   <view class="tabBar">
     <tabBar :tabIndex="0"></tabBar>
   </view>
+  <uni-popup ref="popup" position="right">
+    <view class="popup-container">
+      <view class="popup-title">筛选条件</view>
+      <!-- 国家 -->
+      <view class="p-country">
+        <wht-select
+          style="width: 350rpx"
+          backgroundColor="#ffffff"
+          placeholderColor="#666666"
+          textColor="#666666"
+          borderColor="#a3a3a3"
+          @change="country"
+          :options="Country"
+          :filterable="filterable"
+          placeholder="请选择国家"
+          :value="countrys"
+        />
+      </view>
+      <!-- 性别 -->
+      <view class="popup-sex">
+        <view class="p-sex">
+          <wht-select
+            style="width: 350rpx"
+            backgroundColor="#ffffff"
+            placeholderColor="#666666"
+            textColor="#666666"
+            borderColor="#a3a3a3"
+            @change="gender"
+            :options="Gender"
+            placeholder="性别"
+            :value="genders"
+          />
+        </view>
+        <view class="Gendericoncss">
+          <image
+            v-if="genders === 0"
+            class="Gendericon"
+            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/ask.png"
+            mode="scaleToFill"
+          />
+          <image
+            v-if="genders === 1"
+            class="Gendericon"
+            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/man.png"
+            mode="scaleToFill"
+          />
+          <image
+            v-if="genders === 2"
+            class="Gendericon"
+            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/girl.png"
+            mode="scaleToFill"
+          />
+        </view>
+      </view>
+      <!-- 金币 -->
+      <view class="popup-coin">
+        <view class="p-coin">
+          <view class="p-coin-title">最小金币数</view>
+          <uni-number-box
+            :max="9999999999"
+            background="ffffff"
+            v-model="minNumberCoins"
+          ></uni-number-box>
+          <view class="Hintcss" v-if="minNumberCoins == '' && HintCion === true"
+            >请填写金币数量</view
+          >
+        </view>
+        <view>_</view>
+        <view class="p-coin">
+          <view class="p-coin-title">最大金币数</view>
+          <uni-number-box
+            :max="9999999999"
+            background="#ffffff"
+            v-model="maxNumberCoins"
+          ></uni-number-box>
+          <view class="Hintcss" v-if="maxNumberCoins == '' && HintCion === true"
+            >请填写金币数量</view
+          >
+        </view>
+      </view>
+      <!-- 时间 -->
+      <view class="p-time" v-if="listtype === 2">
+        <view class="p-coin-title">最小PK时间</view>
+        <uni-datetime-picker
+          type="datetime"
+          hide-second="true"
+          v-model="mindatetimesingle"
+        />
+        <view class="Hintcss" v-if="mindatetimesingle == '' && HintTime === true"
+          >请选择日期</view
+        >
+      </view>
+      <view class="p-time" v-if="listtype === 2">
+        <view class="p-coin-title">最大PK时间</view>
+        <uni-datetime-picker
+          type="datetime"
+          hide-second="true"
+          v-model="maxdatetimesingle"
+        />
+        <view class="Hintcss" v-if="maxdatetimesingle == '' && HintTime === true"
+          >请选择日期</view
+        >
+      </view>
+      <view class="popup-btn">
+        <view class="popup-btn-cancel" @click="closePopup">取消</view>
+        <view class="popup-btn-confirm" @click="confirm">确定</view>
+        <view class="popup-btn-clear" @click="clear">清空</view>
+      </view>
+    </view>
+  </uni-popup>
 </template>
 
 <script>
@@ -71,6 +185,7 @@ import TUIlogin from "../../components/TUILogin.js";
 import request from "../../components/request.js";
 import formatDate from "../../components/formatDate.js";
 import { useCounterStore } from "@/stores/counter";
+import optionsArray from "../../components/NationalDictionary.js";
 const counter = useCounterStore();
 export default {
   inject: ["$global"],
@@ -87,6 +202,21 @@ export default {
       RealTimePklist: [], // PK大厅列表数据
       MakeAppointmentPKlist: [], // 今日PK列表数据
       listtype: 1, // 列表类型 1 当天 2 大于当天
+      filterable: true, //是否可搜索
+      Country: optionsArray,
+      countrys: "", //国家
+      genders: 0, //性别
+      Gender: [
+        { label: "男", value: 1 },
+        { label: "女", value: 2 },
+      ],
+      minNumberCoins: "", //最小金币数
+      maxNumberCoins: "", //最大金币数
+      mindatetimesingle: "", //最小PK时间
+      maxdatetimesingle: "", //最大PK时间
+      HintCion: false, //金币提示信息
+      HintTime: false, //时间提示信息
+      ConfirmStatus: false, //确认弹窗状态
     };
   },
   mounted() {
@@ -121,10 +251,112 @@ export default {
     }, 1000);
   },
   methods: {
+    //关闭弹窗（取消）
+    closePopup() {
+      this.$refs.popup.close();
+    },
+    //确认弹窗
+    confirm() {
+      //判断金币是否有为空
+      this.ConfirmStatus = true;
+      console.log(
+        this.minNumberCoins,
+        this.maxNumberCoins,
+        this.mindatetimesingle,
+        this.maxdatetimesingle
+      );
+      if (
+        (this.minNumberCoins === "" && this.maxNumberCoins !== "") ||
+        (this.minNumberCoins !== "" && this.maxNumberCoins === "")
+      ) {
+        this.HintCion = true;
+        return;
+      }
+      if (
+        (this.mindatetimesingle === "" && this.maxdatetimesingle !== "") ||
+        (this.mindatetimesingle !== "" && this.maxdatetimesingle === "")
+      ) {
+        this.HintTime = true;
+        return;
+      }
+      if (
+        this.genders === 0 &&
+        this.countrys === "" &&
+        this.minNumberCoins === "" &&
+        this.maxNumberCoins === "" &&
+        this.mindatetimesingle === "" &&
+        this.maxdatetimesingle === ""
+      ) {
+        if (this.listtype === 1) {
+          this.MakeAppointmentPKlist = [];
+        } else {
+          this.RealTimePklist = [];
+        }
+        this.list = [];
+        this.pkList({ type: this.listtype });
+        this.closePopup();
+        return;
+      }
+      this.closePopup();
+      this.page = 0;
+      this.list = [];
+      if (this.listtype === 1) {
+        this.MakeAppointmentPKlist = [];
+        this.pkList({
+          type: this.listtype,
+          sex: this.genders,
+          coin: {
+            start: this.minNumberCoins,
+            end: this.maxNumberCoins,
+          },
+          country: this.countrys,
+        });
+      } else {
+        this.RealTimePklist = [];
+        this.pkList({
+          sex: this.genders,
+          coin: {
+            start: this.minNumberCoins,
+            end: this.maxNumberCoins,
+          },
+          country: this.countrys,
+          pkTime: {
+            start: this.mindatetimesingle,
+            end: this.maxdatetimesingle,
+          },
+        });
+      }
+    },
+    //清空弹窗
+    clear() {
+      this.genders = 0;
+      this.countrys = "";
+      this.minNumberCoins = "";
+      this.maxNumberCoins = "";
+      this.mindatetimesingle = "";
+      this.maxdatetimesingle = "";
+      this.ConfirmStatus = false;
+    },
+    //获取国家
+    country(item) {
+      this.countrys = item.value;
+      console.log(item);
+    },
+    //获取性别
+    gender(item) {
+      this.genders = item.value;
+      console.log(item);
+    },
+    // 打开弹窗（筛选条件）
+    goScreening() {
+      this.$refs.popup.open("right");
+    },
+    //今日
     goMakeAppointmentPK() {
       this.listtype = 1;
       this.list = this.MakeAppointmentPKlist;
     },
+    //大厅
     goRealTimePk() {
       this.listtype = 2;
       this.list = this.RealTimePklist;
@@ -142,14 +374,43 @@ export default {
         this.RealTimePklist = [];
       }
       this.triggered = true;
-      this.pkList({ type: this.listtype });
+      if (this.ConfirmStatus) {
+        if (
+        this.genders === 0 &&
+        this.countrys === "" &&
+        this.minNumberCoins === "" &&
+        this.maxNumberCoins === "" &&
+        this.mindatetimesingle === "" &&
+        this.maxdatetimesingle === ""
+      ) {
+        this.pkList({ type: this.listtype });
+      } else {
+        if (
+          (this.minNumberCoins === "" && this.maxNumberCoins !== "") ||
+          (this.minNumberCoins !== "" && this.maxNumberCoins === "")
+        ) {
+          this.pkList({ type: this.listtype });
+          return;
+        }
+        if (
+          (this.mindatetimesingle === "" && this.maxdatetimesingle !== "") ||
+          (this.mindatetimesingle !== "" && this.maxdatetimesingle === "")
+        ) {
+          this.pkList({ type: this.listtype });
+          return;
+        }
+        this.confirm();
+      }
+      }else{
+        this.pkList({ type: this.listtype });
+      }
     },
     async goDetail(item) {
       uni.showLoading({
         title: "加载中...",
         mask: true,
       });
-      console.log("id", item.id,this.info.id);
+      console.log("id", item.id, this.info.id);
       //获取详情
       const res = await request({
         url: "pk/pkInfoDetail",
@@ -260,7 +521,7 @@ export default {
   left: 0;
   width: 100%;
   height: 100rpx;
-  z-index: 100;
+  z-index: 2;
 }
 .contentList {
   position: fixed;
@@ -315,7 +576,8 @@ export default {
 }
 
 .Gendermale {
-  background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/maleimg.png) no-repeat center;
+  background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/maleimg.png)
+    no-repeat center;
   width: 56.3rpx;
   height: 29.58rpx;
   background-size: 100% 100%;
@@ -324,7 +586,8 @@ export default {
   margin-right: 10rpx;
 }
 .Genderfemale {
-  background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/femaleimg.png) no-repeat center;
+  background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/femaleimg.png)
+    no-repeat center;
   width: 56.3rpx;
   height: 29.58rpx;
   background-size: 100% 100%;
@@ -350,7 +613,7 @@ export default {
   line-height: 38rpx;
   font-weight: 600;
 }
-.no-content{
+.no-content {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -360,4 +623,126 @@ export default {
   line-height: 40rpx;
   text-align: center;
 }
+.popup-container {
+  height: 1626px;
+  width: 650rpx;
+  background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png);
+  border-radius: 15rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.popup-title {
+  font-size: 50rpx;
+  line-height: 50rpx;
+  margin-top: 250rpx;
+  font-weight: bold;
+  background: linear-gradient(135deg, #00afb2, #4fcacd);
+  -webkit-background-clip: text; /* 兼容 WebKit 内核 */
+  background-clip: text;
+  color: transparent; /* 隐藏原文字颜色 */
+  -webkit-text-fill-color: transparent; /* Safari 兼容 */
+}
+.p-country {
+  width: 500rpx;
+  height: 100rpx;
+  margin-top: 80rpx;
+}
+.popup-sex {
+  width: 500rpx;
+  height: 100rpx;
+  margin-top: 40rpx;
+  display: flex;
+  justify-content: space-between;
+}
+.p-sex {
+  width: 420rpx;
+  height: 100rpx;
+}
+.Gendericoncss {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  border: 1rpx solid #ff9d0067;
+  margin-left: 20rpx;
+  margin-top: 10rpx;
+}
+.Gendericon {
+  width: 40rpx;
+  height: 40rpx;
+  /* margin-top: 10rpx;
+  margin-right: 40rpx; */
+}
+.popup-coin {
+  width: 500rpx;
+  margin-top: 40rpx;
+  display: flex;
+}
+.p-coin {
+  width: 500rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.p-coin-title {
+  font-size: 20rpx;
+  color: #a3a3a3;
+}
+.p-time {
+  width: 500rpx;
+  margin-top: 40rpx;
+}
+.popup-btn-cancel {
+  width: 170rpx;
+  height: 60rpx;
+  font-size: 30rpx;
+  color: #ffffff;
+  line-height: 60rpx;
+  text-align: center;
+  margin-right: 20rpx;
+  border-top-left-radius: 50rpx;
+  border-bottom-left-radius: 50rpx;
+  border-bottom-right-radius: 50rpx;
+  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
+}
+.popup-btn-confirm {
+  width: 170rpx;
+  height: 60rpx;
+  font-size: 30rpx;
+  color: #ffffff;
+  line-height: 60rpx;
+  text-align: center;
+  margin-right: 20rpx;
+  border-top-left-radius: 50rpx;
+  border-bottom-left-radius: 50rpx;
+  border-bottom-right-radius: 50rpx;
+  background-image: linear-gradient(135deg, #4fcd9d, #5fdeba);
+}
+.popup-btn-clear {
+  width: 170rpx;
+  height: 60rpx;
+  font-size: 30rpx;
+  color: #ffffff;
+  line-height: 60rpx;
+  text-align: center;
+  border-top-left-radius: 50rpx;
+  border-bottom-left-radius: 50rpx;
+  border-bottom-right-radius: 50rpx;
+  background-image: linear-gradient(135deg, #cd924f, #debc5f);
+}
+.Hintcss {
+  font-size: 18rpx;
+  color: #ff5555;
+}
+.popup-btn {
+  width: 600rpx;
+  height: 100rpx;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-top: 400rpx;
+}
 </style>

pages/Mine/Mine.vue

@@ -216,7 +216,7 @@ export default {
     // 退出登录
     logout(){
       uni.clearStorage()
-      TUILogin.logout;
+      TUILogin.logout();
       uni.reLaunch({
         url: "/pages/login/login",
       });

pages/NewAddedPk/NewAddedPk.vue

@@ -177,11 +177,12 @@ export default {
     });
   },
   methods: {
+    //性别
     gender(item) {
       this.genders = item.value;
       console.log(item);
     },
-
+    //国家
     country(item) {
       this.countrys = item.value;
       console.log(item);

pages/Setting/Setting.vue

@@ -64,7 +64,7 @@ export default {
     // 微信登录
     wxLogin(e) {
       uni.showLoading({
-        title: "登录中...",
+        title: "修改中...",
         mask: true,
       });
 

pages/UserInformation/UserInformation.vue

@@ -88,7 +88,7 @@ export default {
           name: this.Filename,
         })
           .then((ress) => {
-            this.picture = ress;
+            this.picture = ress.split("/").pop();
             const res = request({
               url: "user/inputUserInfo",
               method: "POST",