兴趣功能完成

pages/my/editInformation.vue

@@ -81,12 +81,12 @@
             <view class="item-title-text sys-weight-600 sys-color-black sys-height-44">兴趣</view>
             <view class="item-title-proportion sys-weight-600 sys-color-black sys-height-44">+10%</view>
           </view>
-          <view class="item-interest">
+          <view class="item-interest" @click="showPopup">
             <view class="interest-item" v-for="i in 2">
               <image class="interest-img" src="/static/img/temporary/4.png" mode="aspectFill"></image>
               <view class="interest-text sys-height-44">游泳</view>
             </view>
-            <view class="interest-add">
+            <view class="interest-add" >
               <view class="interest-add-icon">  <text class="iconfont"> &#xe627;</text></view>
               <view class="interest-text sys-height-44">添加</view>
             </view>
@@ -167,6 +167,27 @@
         <view class="edit-but sys-background-black sys-weight-600 sys-color-white">保存</view>
       </view>
       <en-picker v-show="selectShow" ref="selectPicker" :local-data="selectData" :label="selectTitle" @change="setSelectData"></en-picker>
+      <en-popup ref="popupObj">
+        <template v-slot:popupInfo>
+          <view class="popup-box">
+            <view class="popup-title">
+              <view class="title-left">
+                <view class="left-wire"></view>
+                <view class="left-text sys-color-black-3 sys-weight-600">选择兴趣</view>
+              </view>
+              <view class="title-right sys-color-black sys-weight-600" @click="closedPopup">保存</view>
+
+            </view>
+            <view class="popup-data">
+              <view class="popup-interest-item sys-weight-400" :class="{'pitch-item':i%3===0}" v-for="i in 10">
+                兴趣{{i}}
+              </view>
+            </view>
+          </view>
+
+
+        </template>
+      </en-popup>
     </scroll-view>
 
   </view>
@@ -176,8 +197,9 @@
 import EnNav from "@/components/en-utils/en-nav/en-nav";
 import EnSelect from "@/components/en-from/en-select/en-select";
 import EnPicker from "@/components/en-utils/en-popup/en-picker";
+import EnPopup from "@/components/en-utils/en-popup/en-popup";
 export default {
-  components: {EnPicker, EnSelect, EnNav},
+  components: {EnPopup, EnPicker, EnSelect, EnNav},
   data() {
     return {
       title:'编辑资料',
@@ -206,6 +228,12 @@ export default {
       }
       this.$refs.selectPicker.showPickerObj()
     },
+    showPopup(){
+      this.$refs.popupObj.open()
+    },
+    closedPopup(){
+      this.$refs.popupObj.close()
+    },
     goToUrl(type){
       if(type===1){
         uni.navigateTo({
@@ -455,6 +483,62 @@ export default {
 
     }
   }
+  .popup-box{
+    padding: 0 32rpx;
+    .popup-title{
+      display: flex;
+      justify-content: space-between;
+      height: 52rpx;
+      .title-left{
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .left-text{
+          font-size: 32rpx;
+          line-height: 52rpx;
+        }
+        .left-wire{
+          width: 4rpx;
+          height: 32rpx;
+          background-color: #FFC107;
+          margin-right: 8rpx;
+        }
+
+      }
+      .title-right{
+        padding: 0 24rpx;
+        border-radius: 200rpx;
+        border: 2rpx solid #141414;
+        font-size:28rpx ;
+        line-height: 50rpx;
+      }
+    }
+    .popup-data{
+      margin-top: 12rpx;
+      padding-bottom: 50rpx;
+      display: flex;
+      flex-wrap: wrap;
+      .popup-interest-item{
+        margin-top: 32rpx;
+        margin-right: 26rpx;
+        width: calc((100vw - 116rpx)/3);
+        height: 80rpx;
+        border-radius: 12rpx;
+        background-color: #F2F2F2;
+        text-align: center;
+        line-height: 80rpx;
+        font-size: 28rpx;
+      }
+      .pitch-item{
+        background-color: #FFC107;
+        font-weight: 500;
+      }
+      .popup-interest-item:nth-of-type(3n+0){
+        margin-right:0;
+      }
+    }
+  }
+
 
 }
 

static/css/sys.css

@@ -25,6 +25,9 @@
 .sys-color-black-0{
   color: #000;
 }
+.sys-color-black-3{
+  color: #333;
+}
 .sys-color-gray-9{
   color: #999999;
 }