style(client): 个人信息样式优化

src/PageMine/personInfo/index copy.vue

@@ -0,0 +1,246 @@
+<template>
+  <view class="ccontainer">
+    <view class="item-box">
+      <view class="item-left"> 头像 : </view>
+      <view class="item-right flex-end">
+        <image @click="handlerUploadImg" class="img" :src="uoloadImg"></image>
+      </view>
+    </view>
+    <view class="item-box">
+      <view class="item-left"> 昵称 : </view>
+      <view class="item-right">
+        <u--input placeholder="请输入内容" border="none" v-model="queryParams.nickname"></u--input>
+      </view>
+    </view>
+    <view class="item-box">
+      <view class="item-left"> 性别 : </view>
+      <view class="item-right">
+        <view class="sex-item">
+          <view
+            class="item"
+            v-for="(item, index) of sexList"
+            :class="current == index ? 'act-sex' : ''"
+            :key="index"
+            @click="handlerSelectGender(item)"
+          >
+            {{ item.name }}
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="item-box">
+      <view class="item-left"> 生日 : </view>
+      <view class="item-right right-time-box" @click="timeShow = true">
+        <view class="time-left" :class="queryParams.birthday ? '' : 'gray-color'">
+          {{ queryParams.birthday ? queryParams.birthday : '请选择您的生日' }}
+        </view>
+        <view class="time-right">
+          <u-icon name="arrow-right"></u-icon>
+        </view>
+      </view>
+    </view>
+
+    <u-datetime-picker
+      :show="timeShow"
+      v-model="time_value"
+      mode="date"
+      @cancel="timeShow = false"
+      @confirm="confirmTime"
+      :minDate="0"
+      :maxDate="maxDataTime"
+    ></u-datetime-picker>
+
+    <view class="btn-box">
+      <button class="btn" @click="handlerSubmitBtn">提交</button>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getUserInfo } from '@/api/user';
+import { uploadFile } from '@/utils/upload';
+export default {
+  data() {
+    return {
+      queryParams: {
+        avatar: '', // 头像
+        gender: '', //性别
+        birthday: '', //生日
+        nickname: '', //昵称
+      },
+      time_value: '',
+      timeShow: false,
+      sexList: [
+        {
+          id: 0,
+          name: '男',
+          type: 'MALE',
+        },
+        {
+          id: 1,
+          name: '女',
+          type: 'FEMALE',
+        },
+      ],
+      current: 0,
+      uoloadImg: '',
+      maxDataTime: 0,
+    };
+  },
+  mounted() {
+    this.maxDataTime = new Date().getTime();
+    getUserInfo().then(res => {
+      let { avatar, nickname, gender, birthday } = res.data;
+      this.uoloadImg = avatar;
+      this.queryParams.avatar = avatar;
+      this.queryParams.nickname = nickname;
+      this.queryParams.birthday = uni.$u.timeFormat(birthday, 'yyyy-mm-dd');
+      if (gender) {
+        for (let key in gender) {
+          this.sexList.map(rs => {
+            if (key == rs.type) {
+              this.current = rs.id;
+            }
+          });
+        }
+      }
+    });
+  },
+  methods: {
+    // 选择性别
+    handlerSelectGender(item) {
+      this.current = item.id;
+    },
+    // 选择时间
+    confirmTime(e) {
+      this.queryParams.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
+      this.timeShow = false;
+    },
+    // 上传头像
+    async handlerUploadImg() {
+      try {
+        const res = await uni.showActionSheet({
+          itemList: ['拍照', '从相册选择'],
+        });
+        if (res.tapIndex === 0) {
+          // 用户选择拍照
+          this.takeOrChoosePhoto(0);
+        } else if (res.tapIndex === 1) {
+          // 用户选择从相册选择
+          this.takeOrChoosePhoto(1);
+        }
+      } catch (error) {}
+    },
+    // 拍照
+    takeOrChoosePhoto(idx) {
+      uni.chooseImage({
+        sourceType: idx == 0 ? ['camera'] : ['album'],
+        count: 1,
+        success: res => {
+          const tempFilePaths = res.tempFilePaths;
+          // 调用上传图片的方法
+          this.uploadAvatar(tempFilePaths[0]);
+        },
+        fail: error => {
+          console.error(error);
+        },
+      });
+    },
+    // 上传头像
+    uploadAvatar(filePath) {
+      this.uoloadImg = filePath;
+      uploadFile(filePath).then(res => {
+        this.queryParams.avatar = JSON.parse(res.data).data.url;
+      });
+      this.$forceUpdate(); // 手动触发组件的重新渲染
+    },
+
+    // 点击提交按钮
+    handlerSubmitBtn() {
+      this.queryParams.gender = this.sexList[this.current].type;
+      this.$store.dispatch('UpdateUserInfo', this.queryParams).then(res => {
+        setTimeout(() => {
+          uni.navigateBack(-1);
+        }, 1500);
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.ccontainer {
+  padding: 20rpx;
+  box-sizing: border-box;
+  font-size: 28rpx;
+
+  .item-box {
+    display: flex;
+    padding: 20rpx;
+    box-shadow: 0 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
+    border-radius: 20rpx;
+    margin-bottom: 20rpx;
+    align-items: center;
+
+    .item-left {
+      margin-right: 20rpx;
+      width: 13%;
+    }
+
+    .item-right {
+      width: 87%;
+
+      .img {
+        width: 80rpx;
+        height: 80rpx;
+        border-radius: 50%;
+      }
+
+      .sex-item {
+        display: flex;
+
+        .item {
+          padding: 20rpx 30rpx;
+          background-color: #f7f7f7;
+          border-radius: 10rpx;
+          text-align: center;
+          font-size: 28rpx;
+        }
+
+        .act-sex {
+          border: 2rpx solid #5992bb;
+          background-color: #5992bb;
+          color: #fff !important;
+        }
+      }
+    }
+
+    .right-time-box {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .flex-end {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  .btn-box {
+    margin-top: 100rpx;
+
+    .btn {
+      border-radius: 20rpx;
+      padding: 10rpx;
+      font-size: 28rpx;
+      color: #fff;
+      background: linear-gradient(to right, #e8cbc0, #636fa4);
+      box-shadow: 0 5rpx 15rpx 0 rgba(99, 111, 164, 0.2);
+    }
+  }
+}
+
+.gray-color {
+  color: #d2d5db;
+}
+</style>

src/PageMine/personInfo/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <view class="client-personInfo">
+    <page-navbar bgColor="#fff" title="个人信息"></page-navbar>
+    <view class="direction u-m-b-60">
+      <u-avatar :src="avatar" size="108" />
+      <view class="u-m-t-10 text-666">点击更换头像</view>
+    </view>
+    <base-card padding="0 24rpx">
+      <u-cell-group :border="false">
+        <u-cell title="昵称" isLink>
+          <view slot="value" class="f-s-26" style="color: #616570">yizhiyang</view>
+        </u-cell>
+        <u-cell title="性别" isLink>
+          <view slot="value" class="f-s-26" style="color: #616570">男</view>
+        </u-cell>
+        <u-cell title="生日" isLink>
+          <view slot="value" class="f-s-26" style="color: #616570">男</view>
+        </u-cell>
+        <u-cell title="我的推广码" isLink :border="false" @click="handlePromotionCode" />
+      </u-cell-group>
+    </base-card>
+
+    <view class="person-bottom">
+      <base-button text="保存" :buttonStyle="customStyle"></base-button>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getUserInfo } from '@/api/user';
+import { uploadFile } from '@/utils/upload';
+// import baseCard from '@/components/base-card/base-card.vue';
+
+export default {
+  // components: { baseCard },
+  data() {
+    return {
+      queryParams: {
+        avatar: '', // 头像
+        gender: '', //性别
+        birthday: '', //生日
+        nickname: '', //昵称
+      },
+      time_value: '',
+      timeShow: false,
+      sexList: [
+        {
+          id: 0,
+          name: '男',
+          type: 'MALE',
+        },
+        {
+          id: 1,
+          name: '女',
+          type: 'FEMALE',
+        },
+      ],
+      current: 0,
+      uoloadImg: '',
+      maxDataTime: 0,
+    };
+  },
+  computed: {
+    customStyleOut() {
+      return {
+        fontSize: '30rpx',
+      };
+    },
+  },
+  mounted() {
+    this.maxDataTime = new Date().getTime();
+    getUserInfo().then(res => {
+      let { avatar, nickname, gender, birthday } = res.data;
+      this.uoloadImg = avatar;
+      this.queryParams.avatar = avatar;
+      this.queryParams.nickname = nickname;
+      this.queryParams.birthday = uni.$u.timeFormat(birthday, 'yyyy-mm-dd');
+      if (gender) {
+        for (let key in gender) {
+          this.sexList.map(rs => {
+            if (key == rs.type) {
+              this.current = rs.id;
+            }
+          });
+        }
+      }
+    });
+  },
+  methods: {
+    // 选择性别
+    handlerSelectGender(item) {
+      this.current = item.id;
+    },
+    // 选择时间
+    confirmTime(e) {
+      this.queryParams.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
+      this.timeShow = false;
+    },
+    // 上传头像
+    async handlerUploadImg() {
+      try {
+        const res = await uni.showActionSheet({
+          itemList: ['拍照', '从相册选择'],
+        });
+        if (res.tapIndex === 0) {
+          // 用户选择拍照
+          this.takeOrChoosePhoto(0);
+        } else if (res.tapIndex === 1) {
+          // 用户选择从相册选择
+          this.takeOrChoosePhoto(1);
+        }
+      } catch (error) {}
+    },
+    // 拍照
+    takeOrChoosePhoto(idx) {
+      uni.chooseImage({
+        sourceType: idx == 0 ? ['camera'] : ['album'],
+        count: 1,
+        success: res => {
+          const tempFilePaths = res.tempFilePaths;
+          // 调用上传图片的方法
+          this.uploadAvatar(tempFilePaths[0]);
+        },
+        fail: error => {
+          console.error(error);
+        },
+      });
+    },
+    // 上传头像
+    uploadAvatar(filePath) {
+      this.uoloadImg = filePath;
+      uploadFile(filePath).then(res => {
+        this.queryParams.avatar = JSON.parse(res.data).data.url;
+      });
+      this.$forceUpdate(); // 手动触发组件的重新渲染
+    },
+
+    // 点击提交按钮
+    handlerSubmitBtn() {
+      this.queryParams.gender = this.sexList[this.current].type;
+      this.$store.dispatch('UpdateUserInfo', this.queryParams).then(res => {
+        setTimeout(() => {
+          uni.navigateBack(-1);
+        }, 1500);
+      });
+    },
+    handlePromotionCode() {
+      uni.switchTab({
+        url: '/pages/tabbar/promotionCode',
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.client-personInfo {
+  padding: 60rpx 32rpx 0 32rpx;
+
+  .person-bottom {
+    width: 90%;
+    position: fixed;
+    bottom: 10%;
+  }
+
+  ::v-deep .u-cell__body {
+    padding: 20rpx 0;
+    color: #0c1223;
+    font-size: 34rpx;
+  }
+  ::v-deep .u-cell__title-text {
+    line-height: 65rpx !important;
+  }
+}
+</style>

src/PageMine/setting/index.vue

@@ -31,7 +31,7 @@ export default {
       LinkList1: [
         {
           title: '个人信息',
-          url: '/PageMine/setting/personInformation',
+          url: '/PageMine/personInfo/index',
         },
         {
           title: '我的地址',
@@ -109,8 +109,13 @@ export default {
 .client-setting {
   padding: 20rpx 32rpx;
 
+  ::v-deep .u-cell__body {
+    padding: 20rpx 0;
+    color: #0c1223;
+    font-size: 28rpx;
+  }
   ::v-deep .u-cell__title-text {
-    line-height: 50rpx !important;
+    line-height: 60rpx !important;
   }
 }
 </style>

src/PageMine/setting/personInformation.vue

@@ -1,240 +0,0 @@
-<template>
-  <view class="ccontainer">
-    <view class="item-box">
-      <view class="item-left"> 头像 : </view>
-      <view class="item-right flex-end">
-        <image @click="handlerUploadImg" class="img" :src="uoloadImg"></image>
-      </view>
-    </view>
-    <view class="item-box">
-      <view class="item-left"> 昵称 : </view>
-      <view class="item-right">
-        <u--input placeholder="请输入内容" border="none" v-model="queryParams.nickname"></u--input>
-      </view>
-    </view>
-    <view class="item-box">
-      <view class="item-left"> 性别 : </view>
-      <view class="item-right">
-        <view class="sex-item">
-          <view class="item" v-for=" (item,index) of sexList" :class="current == index ? 'act-sex' : ''" :key="index"
-            @click="handlerSelectGender(item)"> {{ item.name }} </view>
-        </view>
-      </view>
-    </view>
-    <view class="item-box">
-      <view class="item-left"> 生日 : </view>
-      <view class="item-right right-time-box" @click="timeShow = true">
-        <view class="time-left" :class="queryParams.birthday ? '' : 'gray-color'">
-          {{ queryParams.birthday ? queryParams.birthday : '请选择您的生日' }}
-        </view>
-        <view class="time-right">
-          <u-icon name="arrow-right"></u-icon>
-        </view>
-      </view>
-    </view>
-
-    <u-datetime-picker :show="timeShow" v-model="time_value" mode="date" @cancel='timeShow = false'
-      @confirm='confirmTime' :minDate="0" :maxDate='maxDataTime'></u-datetime-picker>
-
-    <view class="btn-box">
-      <button class="btn" @click="handlerSubmitBtn">提交</button>
-    </view>
-  </view>
-</template>
-
-<script>
-  import {
-    getUserInfo
-  } from '@/api/user';
-  import {
-    uploadFile
-  } from "@/utils/upload"
-  export default {
-    data() {
-      return {
-        queryParams: {
-          avatar: '', // 头像
-          gender: '', //性别
-          birthday: '', //生日
-          nickname: '', //昵称
-        },
-        time_value: '',
-        timeShow: false,
-        sexList: [{
-            id: 0,
-            name: '男',
-            type: 'MALE'
-          },
-          {
-            id: 1,
-            name: '女',
-            type: 'FEMALE'
-          }
-        ],
-        current: 0,
-        uoloadImg: '',
-        maxDataTime: 0
-      }
-    },
-    mounted() {
-      this.maxDataTime = new Date().getTime()
-      getUserInfo().then(res => {
-        let {
-          avatar,
-          nickname,
-          gender,
-          birthday
-        } = res.data
-        this.uoloadImg = avatar
-        this.queryParams.avatar = avatar
-        this.queryParams.nickname = nickname
-        this.queryParams.birthday = uni.$u.timeFormat(birthday, 'yyyy-mm-dd');
-        if (gender) {
-          for (let key in gender) {
-            this.sexList.map(rs => {
-              if (key == rs.type) {
-                this.current = rs.id
-              }
-            })
-          }
-        }
-      })
-    },
-    methods: {
-      // 选择性别
-      handlerSelectGender(item) {
-        this.current = item.id
-      },
-      // 选择时间
-      confirmTime(e) {
-        this.queryParams.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
-        this.timeShow = false
-      },
-      // 上传头像
-      async handlerUploadImg() {
-        try {
-          const res = await uni.showActionSheet({
-            itemList: ['拍照', '从相册选择'],
-          });
-          if (res.tapIndex === 0) {
-            // 用户选择拍照
-            this.takeOrChoosePhoto(0);
-          } else if (res.tapIndex === 1) {
-            // 用户选择从相册选择
-            this.takeOrChoosePhoto(1);
-          }
-        } catch (error) {}
-      },
-      // 拍照
-      takeOrChoosePhoto(idx) {
-        uni.chooseImage({
-          sourceType: idx == 0 ? ['camera'] : ['album'],
-          count: 1,
-          success: res => {
-            const tempFilePaths = res.tempFilePaths;
-            // 调用上传图片的方法
-            this.uploadAvatar(tempFilePaths[0]);
-          },
-          fail: error => {
-            console.error(error);
-          },
-        });
-      },
-      // 上传头像
-      uploadAvatar(filePath) {
-        this.uoloadImg = filePath
-        uploadFile(filePath).then(res => {
-          this.queryParams.avatar = JSON.parse(res.data).data.url;
-        })
-        this.$forceUpdate(); // 手动触发组件的重新渲染
-      },
-
-      // 点击提交按钮
-      handlerSubmitBtn() {
-        this.queryParams.gender = this.sexList[this.current].type
-        this.$store.dispatch('UpdateUserInfo', this.queryParams).then(res => {
-          setTimeout(() => {
-            uni.navigateBack(-1)
-          }, 1500)
-        })
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .ccontainer {
-    padding: 20rpx;
-    box-sizing: border-box;
-    font-size: 28rpx;
-
-    .item-box {
-      display: flex;
-      padding: 20rpx;
-      box-shadow: 0 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
-      border-radius: 20rpx;
-      margin-bottom: 20rpx;
-      align-items: center;
-
-      .item-left {
-        margin-right: 20rpx;
-        width: 13%;
-      }
-
-      .item-right {
-        width: 87%;
-
-        .img {
-          width: 80rpx;
-          height: 80rpx;
-          border-radius: 50%;
-        }
-
-        .sex-item {
-          display: flex;
-
-          .item {
-            padding: 20rpx 30rpx;
-            background-color: #F7F7F7;
-            border-radius: 10rpx;
-            text-align: center;
-            font-size: 28rpx;
-          }
-
-          .act-sex {
-            border: 2rpx solid #5992BB;
-            background-color: #5992BB;
-            color: #fff !important;
-          }
-        }
-      }
-
-      .right-time-box {
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .flex-end {
-        display: flex;
-        justify-content: flex-end;
-      }
-    }
-
-    .btn-box {
-      margin-top: 100rpx;
-
-      .btn {
-        border-radius: 20rpx;
-        padding: 10rpx;
-        font-size: 28rpx;
-        color: #fff;
-        background: linear-gradient(to right, #e8cbc0, #636fa4);
-        box-shadow: 0 5rpx 15rpx 0 rgba(99, 111, 164, 0.2);
-      }
-    }
-  }
-
-  .gray-color {
-    color: #D2D5DB;
-  }
-</style>

src/components/base-button/base-button.vue

@@ -0,0 +1,61 @@
+<template>
+  <view class="base-button">
+    <u-button
+      :text="text"
+      :customStyle="customStyleOut"
+      @click="handleClick"
+      :color="color"
+    ></u-button>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'base-button',
+  props: {
+    borderRadius: {
+      type: String,
+      default: '16rpx',
+    },
+    color: {
+      type: String,
+      default: '#1b5fc5',
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+    height: {
+      type: String,
+      default: '80rpx',
+    },
+    buttonStyle: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  computed: {
+    customStyleOut() {
+      let { height, borderRadius } = this;
+      return {
+        height,
+        borderRadius,
+        ...this.buttonStyle,
+      };
+    },
+  },
+
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.base-button {
+}
+</style>

src/components/base-list/base-list.vue

@@ -74,7 +74,6 @@ export default {
   methods: {
     handelList(item) {
       this.$emit('click', item);
-      console.log(item, 'oooooooooo');
     },
   },
 };

src/pages.json

@@ -260,9 +260,9 @@
           }
         },
         {
-          "path": "setting/personInformation",
+          "path": "personInfo/index",
           "style": {
-            "navigationBarTitleText": "个人信息"
+            "navigationStyle": "custom"
           }
         },
         {

src/pages/tabbar/mine/index.vue

@@ -251,6 +251,6 @@ export default {
   }
 }
 ::v-deep .u-cell__title-text {
-  line-height: 55rpx !important;
+  line-height: 60rpx !important;
 }
 </style>