css

liukangdong

2024-06-25 ebc96a1cf0424c04dceacbc42f9ad2a897223be9

 h5/pages/meeting/personal/personal.vue

@@ -2,29 +2,54 @@
   <view class="personal">

      <view class="personal_image">

         <view class="personal_image_box">

            <image :src="userInfo.avatar ? `${userInfo.prefixUrl}${userInfo.avatar}` : defaultAvatar" mode="widthFix"></image>

        <image

          :src="

            userInfo.avatar

              ? `${userInfo.prefixUrl}${userInfo.avatar}`

              : defaultAvatar

          "

          mode="widthFix"

        ></image>

         </view>

         <button class="personal_image_box_btn" open-type="chooseAvatar" @chooseavatar="bindchooseavatar">更换头像</button>

      <button

        class="personal_image_box_btn"

        open-type="chooseAvatar"

        @chooseavatar="bindchooseavatar"

      >

        更换头像

      </button>

      </view>

      <view class="personal_list">

         <view class="personal_list_item" @click="show1 = true">

            <view class="label">昵称</view>

            <view class="right">

               <text :class="userInfo.wechatName ? 'right_info black' : 'right_info'">{{userInfo.wechatName ? userInfo.wechatName : '点击获取微信昵称'}}</text>

          <text

            :class="userInfo.wechatName ? 'right_info black' : 'right_info'"

            >{{

              userInfo.wechatName ? userInfo.wechatName : "点击获取微信昵称"

            }}</text

          >

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

            </view>

         </view>

         <view class="personal_list_item">

            <view class="label">手机号</view>

            <view class="right">

               <text :class="userInfo.mobile ? 'right_info black' : 'right_info'">{{userInfo.mobile ? userInfo.mobile : '点击获取微信手机号'}}</text>

          <text :class="userInfo.mobile ? 'right_info black' : 'right_info'">{{

            userInfo.mobile ? userInfo.mobile : "点击获取微信手机号"

          }}</text>

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

            </view>

         </view>

         <view class="personal_list_item" @click="show = true">

            <view class="label">真实姓名</view>

            <view class="right">

               <text :class="userInfo.realname ? 'right_info black' : 'right_info'">{{userInfo.realname ? userInfo.realname : '请输入真实姓名'}}</text>

          <text

            :class="userInfo.realname ? 'right_info black' : 'right_info'"

            >{{

              userInfo.realname ? userInfo.realname : "请输入真实姓名"

            }}</text

          >

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

            </view>

         </view>

@@ -32,7 +57,9 @@
            <view class="label">性别</view>

            <view class="right">

               <text class="right_info black" v-if="userInfo.sex === 1">男</text>

               <text class="right_info black" v-else-if="userInfo.sex === 2">女</text>

          <text class="right_info black" v-else-if="userInfo.sex === 2"

            >女</text

          >

               <text class="right_info" v-else>请选择</text>

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

            </view>

@@ -40,19 +67,45 @@
         <view class="personal_list_item" @click="isShow = true">

            <view class="label">生日</view>

            <view class="right">

               <text :class="userInfo.birthday ? 'right_info black' : 'right_info'">{{userInfo.birthday ? userInfo.birthday : '请选择'}}</text>

          <text

            :class="userInfo.birthday ? 'right_info black' : 'right_info'"

            >{{ userInfo.birthday ? userInfo.birthday : "请选择" }}</text

          >

               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>

            </view>

         </view>

      </view>

      <u-modal :show="show" title="真实姓名" :showCancelButton="true" @confirm="confirm1" @cancel="cancel">

    <u-modal

      :show="show"

      title="真实姓名"

      :showCancelButton="true"

      @confirm="confirm1"

      @cancel="cancel"

    >

         <view class="personal_input">

            <input type="text" v-model="from.realname" placeholder="请输入真实姓名" placeholder-class="placeholder">

        <input

          type="text"

          v-model="from.realname"

          placeholder="请输入真实姓名"

          placeholder-class="placeholder"

        />

         </view>

      </u-modal>

      <u-modal :show="show1" title="昵称" :showCancelButton="true" @confirm="confirm2" @cancel="cancel1">

    <u-modal

      :show="show1"

      title="昵称"

      :showCancelButton="true"

      @confirm="confirm2"

      @cancel="cancel1"

    >

         <view class="personal_input">

            <input type="nickname" @change="changeName" v-model="from.wechatName" placeholder="请输入昵称" placeholder-class="placeholder">

        <input

          type="nickname"

          @change="changeName"

          v-model="from.wechatName"

          placeholder="请输入昵称"

          placeholder-class="placeholder"

        />

         </view>

      </u-modal>

      <u-picker

@@ -130,9 +183,9 @@
                     title: '上传失败',

                     icon: "error",

                     duration: 2000

                  });

          })

               }

            });

      })

         },

         confirm(e) {

            let sex = null

@@ -148,7 +201,7 @@
               })

         },

         confirmDate(e) {

            let birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');

      let birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')

            this.$u.api.editUserInfo({ birthday })

               .then(res => {

                  this.getUser()

@@ -203,7 +256,7 @@
      .personal_input {

         width: 100%;

         height: 98rpx;

         background: #F8F9FB;

    background: #f8f9fb;

         border-radius: 8rpx;

         .placeholder {

            font-size: 28rpx;

@@ -244,11 +297,11 @@
            line-height: 48rpx;

            padding: 0 !important;

            border-radius: 32rpx;

            border: 1rpx solid #005BFF;

      border: 1rpx solid #005bff;

            font-size: 24rpx;

            font-family: PingFangSC-Regular, PingFang SC;

            font-weight: 400;

            color: #005BFF;

      color: #005bff;

            margin-top: 24rpx;

         }

      }

@@ -263,7 +316,7 @@
            display: flex;

            align-items: center;

            justify-content: space-between;

            border-bottom: 2rpx solid #E5E5E5;

      border-bottom: 2rpx solid #e5e5e5;

            &:last-child {

               border: none !important;

            }

@@ -271,7 +324,7 @@
               flex-shrink: 0;

               font-size: 32rpx;

               font-family: PingFang SC-Medium, PingFang SC;

               font-weight: 500;

        font-weight: 600;

               color: #333333;

               margin-right: 30rpx;

            }

@@ -299,7 +352,7 @@
      }

      .popup2 /deep/ {

         width: 518rpx;

         background: #FFFFFF;

    background: #ffffff;

         border-radius: 24rpx;

         .popup_text {

            width: 100%;

@@ -321,7 +374,7 @@
            .popup2_ipt_box {

               width: 100%;

               height: 100%;

               background: #F8F9FB;

        background: #f8f9fb;

               .popup2_ipt_p {

                  text-align: center;

                  font-size: 28rpx;

@@ -345,9 +398,9 @@
            height: 85rpx;

            display: flex;

            align-items: center;

            border-top: 2rpx solid #C8C8C8;

      border-top: 2rpx solid #c8c8c8;

            .blue {

               color: #005BFF !important;

        color: #005bff !important;

            }

            .popup_box_item {

               flex: 1;

@@ -360,14 +413,14 @@
               font-weight: 600;

               color: #333333;

               &:first-child {

                  border-right: 2rpx solid #C8C8C8;

          border-right: 2rpx solid #c8c8c8;

               }

            }

         }

      }

      .sex {

         padding: 44rpx 32rpx;

         background-color: #FFFFFF;

    background-color: #ffffff;

         box-sizing: border-box;

         .title {

            width: 100%;

@@ -403,18 +456,18 @@
            height: 72rpx;

            line-height: 72rpx;

            text-align: center;

            background: #005BFF;

      background: #005bff;

            border-radius: 36rpx;

            font-size: 32rpx;

            font-family: PingFang SC-Medium, PingFang SC;

            font-weight: 500;

            color: #FFFFFF;

      font-weight: 600;

      color: #ffffff;

            margin-top: 50rpx;

         }

      }

      .date {

         padding: 44rpx 32rpx;

         background-color: #FFFFFF;

    background-color: #ffffff;

         box-sizing: border-box;

         .title {

            width: 100%;

@@ -450,12 +503,12 @@
            height: 72rpx;

            line-height: 72rpx;

            text-align: center;

            background: #005BFF;

      background: #005bff;

            border-radius: 36rpx;

            font-size: 32rpx;

            font-family: PingFang SC-Medium, PingFang SC;

            font-weight: 500;

            color: #FFFFFF;

      font-weight: 600;

      color: #ffffff;

            margin-top: 50rpx;

         }

      }

@@ -464,7 +517,7 @@
         width: 100%;

         left: 0;

         bottom: 0;

         background-color: #FFFFFF;

    background-color: #ffffff;

         box-sizing: border-box;

         padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom)) 30rpx;

         .personal_footer_btn {

@@ -472,12 +525,12 @@
            height: 88rpx;

            line-height: 88rpx;

            text-align: center;

            background: #005BFF;

      background: #005bff;

            border-radius: 44rpx;

            font-size: 32rpx;

            font-family: PingFangSC-Medium, PingFang SC;

            font-weight: 500;

            color: #FFFFFF;

      font-weight: 600;

      color: #ffffff;

         }

      }

   }