需求改动

zxl

2025-07-23 1ae987d882c1d67c0ee11c40af05d311df9e214b

 pages/mine/set/personMsg.vue

@@ -1,286 +1,543 @@
<template>
  <view class="person-msg">
    <view class="head c-content" @click="changeFace">
      <image v-if="form.face" :src="endpoint + '/' + form.face" mode=""></image>
      <image v-else :src="'/pages/subComponents/static/missing-face.png'" mode=""></image>
      <view>点击修改头像</view>
    </view>
    <u-form :model="form" ref="uForm" class="form">
      <u-form-item label="昵称" label-width="150">
        <u-input v-model="form.nickName" placeholder="请输入昵称" />
      </u-form-item>
      <u-form-item label="性别" label-width="150">
        <u-radio-group v-model="form.sex" :active-color="lightColor">
          <u-radio name="1">男</u-radio>
          <u-radio name="0">女</u-radio>
        </u-radio-group>
      </u-form-item>
   <view class="person-msg">
      <view class="head c-content">
         <image v-if="form.face" :src="endpoint + '/' + form.face" mode=""></image>
         <image v-else :src="'/pages/subComponents/static/missing-face.png'" mode=""></image>
         <button class="avatar-button" type="default" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">点击修改头像</button>
      </view>
      <u-form :model="form" ref="uForm" class="form">
         <u-form-item label="昵称" label-width="150">
            <u-input v-model="form.nickName" placeholder="请输入昵称" type="nickname"/>
				
         </u-form-item>
			
         <u-form-item label="性别" label-width="150">
            <u-radio-group v-model="form.sex" :active-color="lightColor">
               <u-radio name="1">男</u-radio>
               <u-radio name="0">女</u-radio>
            </u-radio-group>
         </u-form-item>

      <u-form-item label="生日" label-width="150" right-icon="arrow-right">
        <div style="width: 100%;" @click="showBirthday = true">{{ birthday || '请选择出生日期' }}</div>
       <u-picker v-model="showBirthday" mode="time" :confirm-color="lightColor" @confirm="selectTime"></u-picker>
      </u-form-item>
      <u-form-item label="城市" label-width="150" placeholder="请选择城市" right-icon="arrow-right">
        <div style="width: 100%;" @click="clickRegion">{{ form.___path || '请选择城市' }}</div>
      </u-form-item>
	  
     <u-form-item label="手机号" label-width="150">
      <view v-if="form.mobile">
         {{form.mobile}}
      </view>
      <view v-else>
         <view class="submit" @click="navigateTo(form.username)">绑定手机号码</view>
      </view>
     </u-form-item>
    
    </u-form>
    <div class="bottom">
      <view class="submit" @click="submit">保存</view>
       <view class="submit light" @click="quiteLoginOut">退出登录</view>
    </div>
    <m-city :provinceData="region" headTitle="区域选择" ref="cityPicker" @funcValue="getPickerParentValue" pickerSize="4"></m-city>
  </view>
         <u-form-item label="生日" label-width="150" right-icon="arrow-right">
            <div style="width: 100%;" @click="showBirthday = true">{{ birthday || '请选择出生日期' }}</div>
            <u-picker v-model="showBirthday" mode="time" :confirm-color="lightColor"
               @confirm="selectTime"></u-picker>
         </u-form-item>
         <u-form-item label="城市" label-width="150" placeholder="请选择城市" right-icon="arrow-right">
            <div style="width: 100%;" @click="clickRegion">{{ form.___path || '请选择城市' }}</div>
         </u-form-item>

         <u-form-item label="手机号" label-width="150">
            <view v-if="form.mobile">
               {{form.mobile}}
            </view>
            <view v-else>
               <view class="submit" @click="navigateTo(form.username)">绑定手机号码</view>
            </view>
         </u-form-item>
         <u-form-item label="我的标签" label-width="150">

            <view class="tags-container">
               <view v-for="(tag, index) in memberTags" :key="index"
                  :class="tag.tagName.length >=5 ? 'longTag' : 'tag'" @click="toggleTag(tag)">
                  {{tag.tagName}}
                  <u-icon name="close" size="16" class="delete-icon" @click.stop="removeTag(tag)"></u-icon>
               </view>
               <view class="add-tag" @click="showAddTagDialog">
                  <u-icon name="plus" size="24"></u-icon> 自定义
               </view>
            </view>
         </u-form-item>

      </u-form>
      <div class="bottom">
         <view class="submit" @click="submit">保存</view>
         <view class="submit light" @click="quiteLoginOut">退出登录</view>
      </div>
      <m-city :provinceData="region" headTitle="区域选择" ref="cityPicker" @funcValue="getPickerParentValue"
         pickerSize="4"></m-city>
   </view>
</template>
<script>
import '@/components/uview-components/uview-ui';
import { getSTSToken } from "@/api/common.js";
import { saveUserInfo, getUserInfo } from "@/api/members.js";
import { upload } from "@/api/common.js";
import { getFileKey } from "@/utils/file.js";
import storage from "@/utils/storage.js";
import city from "@/pages/subComponents/m-city/m-city.vue";
export default {
  components: { "m-city": city },
  data() {
    return {
     cosClient: null,
     bucket: '',
     region: '',
     endpoint: '',
      lightColor: this.$lightColor, //高亮颜色
      form: {
        nickName: storage.getUserInfo().nickName || "",
        birthday: storage.getUserInfo().birthday || "",
        face: storage.getUserInfo().face, //默认头像
        regionId: [], //地址Id
        region: storage.getUserInfo().region || [], //地址
        sex: storage.getUserInfo().sex, //性别
        ___path: storage.getUserInfo().region,
      mobile: storage.getUserInfo().mobile,
      username: storage.getUserInfo().username,
      },
      birthday: storage.getUserInfo().birthday || "", //生日
      photo: [
        { text: "立即拍照", color: this.$mainColor },
        { text: "从相册选择", color: this.$mainColor },
      ],
      region: [
        //请求城市默认地址
        {
          id: "",
          localName: "请选择",
          children: [],
        },
      ],
      showBirthday: false, //显示生日日期
    };
  },
  onLoad() {
       this.initCOS()
  },
  methods: {
     // 初始化腾讯云cos客户端
     initCOS() {
        // 调用后端获取sts临时访问凭证
        getSTSToken().then(res => {
           const COS = require('@/lib/cos-wx-sdk-v5.js'); // 开发时使用
           // const COS = require('./lib/cos-wx-sdk-v5.min.js'); // 上线时使用压缩包
  
           // console.log(COS.version);  sdk 版本需要不低于 1.7.2
           this.cosClient = new COS({
              SecretId: res.data.data.tmpSecretId, // sts 服务下发的临时 secretId
              SecretKey: res.data.data.tmpSecretKey, // sts 服务下发的临时 secretKey
              SecurityToken: res.data.data.sessionToken, // sts 服务下发的临时 SessionToken
              StartTime: res.data.data.stsStartTime, // 建议传入服务端时间，可避免客户端时间不准导致的签名错误
              ExpiredTime: res.data.data.stsEndTime, // 临时密钥过期时间
              SimpleUploadMethod: 'putObject', // 强烈建议，高级上传、批量上传内部对小文件做简单上传时使用 putObject,sdk 版本至少需要v1.3.0
            });
            this.bucket = res.data.data.bucket
            this.region = res.data.data.region
            this.endpoint = res.data.data.endpoint
        })
     },
     /**
      * 退出登录
      */
     quiteLoginOut() {
      this.$options.filters.quiteLoginOut();
     },
	  
    /**
     * 选择地址回调
     */
    getPickerParentValue(e) {
      this.form.region = [];
      this.form.regionId = [];
      let name = "";
   import '@/components/uview-components/uview-ui';
   import {
      getSTSToken
   } from "@/api/common.js";
   import {
      saveUserInfo,
      getUserInfo
   } from "@/api/members.js";
   import {
      upload
   } from "@/api/common.js";
   import {
      getFileKey
   } from "@/utils/file.js";
   import storage from "@/utils/storage.js";
   import city from "@/pages/mine/set/m-city/m-city.vue";
   import {
      getMemberTag,
      addTag,
      removeTag
   } from "@/api/memberCustomerTag.js"
   export default {
      components: {
         "m-city": city
      },
      data() {
         return {
            memberTags: null,
            cosClient: null,
            bucket: '',
            region: '',
            endpoint: '',
            lightColor: this.$lightColor, //高亮颜色
            form: {
               nickName: storage.getUserInfo().nickName || "",
               birthday: storage.getUserInfo().birthday || "",
               face: storage.getUserInfo().face, //默认头像
               regionId: [], //地址Id
               region: storage.getUserInfo().region || [], //地址
               sex: storage.getUserInfo().sex, //性别
               ___path: storage.getUserInfo().region,
               mobile: storage.getUserInfo().mobile,
               username: storage.getUserInfo().username,
            },
            birthday: storage.getUserInfo().birthday || "", //生日
            photo: [{
                  text: "立即拍照",
                  color: this.$mainColor
               },
               {
                  text: "从相册选择",
                  color: this.$mainColor
               },
            ],
            region: [
               //请求城市默认地址
               {
                  id: "",
                  localName: "请选择",
                  children: [],
               },
            ],
            showBirthday: false, //显示生日日期
         };
      },
      onLoad() {
         this.initCOS()
         this.getMemberTag()
      },
      methods: {
			
         toggleTag(tag) {
            console.log(tag)
         },
         addTag(content) {
            const form = {
               tagName: content,
            }
            addTag(form).then(res => {
               if (res.statusCode === 200) {
                  if(res.data.code !==200){
                     uni.showToast({
                        title: res.data.msg,
                        icon: 'none'
                     });
                     return
                  }
                  this.getMemberTag()
               }
            })
         },
         removeTag(tag) {
            removeTag(tag.id).then(res => {
               if (res.statusCode === 200) {
                  if(res.data.code !==200){
                     uni.showToast({
                        title: res.data.msg,
                        icon: 'none'
                     });
                     return
                  }
                  this.getMemberTag()
               }
            })
         },
         getMemberTag() {
            uni.showLoading({
               title: '加载中',
               mask: true
            });
            getMemberTag().then(res => {
               uni.hideLoading();
               if (res.statusCode === 200) {
                  if(res.data.code !== 200){
                     uni.showToast({
                        title: res.data.msg,
                        icon: 'none'
                     });
                     return
                  }
                  this.memberTags = res.data.data

      e.forEach((item, index) => {
        if (item.id) {
          this.form.region.push(item.localName);
          this.form.regionId.push(item.id);
          if (index == e.length - 1) {
            name += item.localName;
          } else {
            name += item.localName + ",";
          }
          this.form.___path = name;
        }
      });
    },
               }
            })
         },
         showAddTagDialog() {
            uni.showModal({
               title: '添加自定义标签',
               editable: true,
               placeholderText: '请输入标签内容（最多8个字）',
               success: (res) => {
                  if (res.confirm) {
                     if (!res.content) {
                        uni.showToast({
                           title: '标签内容不能为空',
                           icon: 'none'
                        });
                        return;
                     }

    /**
     * 点击选择地址
     */
    clickRegion() {
      this.$refs.cityPicker.show();
    },
                     if (res.content.length > 8) {
                        uni.showToast({
                           title: '标签长度不能超过8个字',
                           icon: 'none'
                        });
                        return;
                     }
                     this.addTag(res.content)
                  }
               }
            });
         },
         // 初始化腾讯云cos客户端
         initCOS() {
            // 调用后端获取sts临时访问凭证
            getSTSToken().then(res => {
               const COS = require('@/lib/cos-wx-sdk-v5.js'); // 开发时使用
               // const COS = require('./lib/cos-wx-sdk-v5.min.js'); // 上线时使用压缩包

    /**
     * 提交保存
     */
    submit() {
      delete this.form.___path;
      let params = JSON.parse(JSON.stringify(this.form));
      saveUserInfo(params).then((res) => {
        if (res.statusCode == 200) {
          storage.setUserInfo(res.data.result);
          uni.navigateBack();
        }
      });
    },
               // console.log(COS.version);  sdk 版本需要不低于 1.7.2
               this.cosClient = new COS({
                  SecretId: res.data.data.tmpSecretId, // sts 服务下发的临时 secretId
                  SecretKey: res.data.data.tmpSecretKey, // sts 服务下发的临时 secretKey
                  SecurityToken: res.data.data.sessionToken, // sts 服务下发的临时 SessionToken
                  StartTime: res.data.data.stsStartTime, // 建议传入服务端时间，可避免客户端时间不准导致的签名错误
                  ExpiredTime: res.data.data.stsEndTime, // 临时密钥过期时间
                  SimpleUploadMethod: 'putObject', // 强烈建议，高级上传、批量上传内部对小文件做简单上传时使用 putObject,sdk 版本至少需要v1.3.0
               });
               this.bucket = res.data.data.bucket
               this.region = res.data.data.region
               this.endpoint = res.data.data.endpoint
            })
         },
         /**
          * 退出登录
          */
         quiteLoginOut() {
            this.$options.filters.quiteLoginOut();
         },

    /**
     * 修改头像
     */
    changeFace(index) {
      uni.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album'],
        success: (chooseImageRes) => {
          const tempFilePath = chooseImageRes.tempFilePaths[0];
        let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
        // 处理安卓可能的URI编码
        if(fileName.indexOf('%') > -1) {
         fileName = decodeURIComponent(fileName);
        }
        const fileKey = getFileKey(fileName);
          this.cosClient.uploadFile({
               Bucket: this.bucket,
               Region: this.region,
               Key: fileKey,
               FilePath: tempFilePath,
               SliceSize: 1024 * 1024 * 5     /* 触发分块上传的阈值,5M */
           }, (err, data) => {
               if (err) {
                 console.log('上传失败', err);
               } else {
               this.form.face = fileKey;
            }
           });
        },
      });
    },
         /**
          * 选择地址回调
          */
         getPickerParentValue(e) {
            this.form.region = [];
            this.form.regionId = [];
            let name = "";

    /**
     * 选择地址
     */
    selectRegion(region) {
      this.$set(
        this.form,
        "address",
        `${region.province.label} ${region.city.label} ${region.area.label}`
      );
    },
            e.forEach((item, index) => {
               if (item.id) {
                  this.form.region.push(item.localName);
                  this.form.regionId.push(item.id);
                  if (index == e.length - 1) {
                     name += item.localName;
                  } else {
                     name += item.localName + ",";
                  }
                  this.form.___path = name;
               }
            });
         },

    /**
     * 选择时间
     */
    selectTime(time) {
      this.form.birthday = `${time.year}-${time.month}-${time.day}`;
      this.birthday = `${time.year} - ${time.month} - ${time.day}`;
    },
	
   navigateTo(username) {
     uni.navigateTo({
       url: '/pages/mine/set/securityCenter/bindMobile' + '?username=' + username,
     });
   },
  }
         /**
          * 点击选择地址
          */
         clickRegion() {
            this.$refs.cityPicker.show();
         },

};
         /**
          * 提交保存
          */
         submit() {
            delete this.form.___path;
            let params = JSON.parse(JSON.stringify(this.form));
            saveUserInfo(params).then((res) => {
               if (res.statusCode == 200) {
                  storage.setUserInfo(res.data.result);
                  uni.navigateBack();
               }
            });
         },
         /**
          * 修改头像
          * @param {Object} e
          */
         onChooseAvatar(e){
            console.log(e.detail.avatarUrl)
            console.log("")
            console.log(e.detail)
            const tempFilePath = e.detail.avatarUrl;
            let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
            if (fileName.indexOf('%') > -1) {
               fileName = decodeURIComponent(fileName);
            }
            const fileKey = getFileKey(fileName);
            this.cosClient.uploadFile({
               Bucket: this.bucket,
               Region: this.region,
               Key: fileKey,
               FilePath: tempFilePath,
               SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值,5M */
            }, (err, data) => {
               if (err) {
                  console.log('上传失败', err);
               } else {
                  this.form.face = fileKey;
               }
            });
         },
         /**
          * 修改头像
          */
         // changeFace(index) {
         //    uni.chooseImage({
         //       count: 1,
         //       sizeType: ['compressed'],
         //       sourceType: ['album'],
         //       success: (chooseImageRes) => {
						
         //          const tempFilePath = chooseImageRes.tempFilePaths[0];
         //          let fileName = tempFilePath.substring(tempFilePath.lastIndexOf('/') + 1);
         //          // 处理安卓可能的URI编码
         //          if (fileName.indexOf('%') > -1) {
         //             fileName = decodeURIComponent(fileName);
         //          }
         //          const fileKey = getFileKey(fileName);
         //          this.cosClient.uploadFile({
         //             Bucket: this.bucket,
         //             Region: this.region,
         //             Key: fileKey,
         //             FilePath: tempFilePath,
         //             SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值,5M */
         //          }, (err, data) => {
         //             if (err) {
         //                console.log('上传失败', err);
         //             } else {
         //                this.form.face = fileKey;
         //             }
         //          });
         //       },
         //    });
         // },

         /**
          * 选择地址
          */
         selectRegion(region) {
            this.$set(
               this.form,
               "address",
               `${region.province.label} ${region.city.label} ${region.area.label}`
            );
         },

         /**
          * 选择时间
          */
         selectTime(time) {
            this.form.birthday = `${time.year}-${time.month}-${time.day}`;
            this.birthday = `${time.year} - ${time.month} - ${time.day}`;
         },

         navigateTo(username) {
            uni.navigateTo({
               url: '/pages/mine/set/securityCenter/bindMobile' + '?username=' + username,
            });
         },
      }

   };
</script>
<style>
page{
  background: #fff;
}
   page {
      background: #fff;
   }
</style>
<style lang="scss" scoped>
.submit {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  margin-top: 90rpx;
   .submit {
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      margin-top: 90rpx;

  width: 100%;
  margin: 0 auto;
  color: $main-color;
  border-radius: 100px;
}
.head {
  height: 260rpx;
  color: $font-color-light;
  font-size: $font-sm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 2em;
  image {
    width: 144rpx;
    height: 144rpx;
    border-radius: 50%;
  }
}
/deep/ .u-form {
  background-color: #ffffff;
  padding: 0;
  margin-top: 30rpx;
  .u-form-item {
    padding: 0 20rpx;
    height: 110rpx;
    line-height: 110rpx;
  }
}
.form {
  background-color: #ffffff;
}
.bottom{
  position: fixed;
  bottom: 40px;
  display: flex;
  align-items: center;
  width: 100%;
  >.submit{
    background: $light-color;
    color: #fff;
    width: 40%;
  }
      width: 100%;
      margin: 0 auto;
      color: $main-color;
      border-radius: 100px;
   }

}
.light{
  background: rgba($color: $light-color, $alpha: 0.2) !important;
  color: $light-color !important;
}
</style>
   .head {
      height: 260rpx;
      color: $font-color-light;
      font-size: $font-sm;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      line-height: 2em;

      image {
         width: 144rpx;
         height: 144rpx;
         border-radius: 50%;
      }
   }

   /deep/ .u-form {
      background-color: #ffffff;
      padding: 0;
      margin-top: 30rpx;

      .u-form-item {
         padding: 0 20rpx;
         height: 110rpx;
         line-height: 110rpx;
      }
   }

   .form {
      background-color: #ffffff;
   }

   .bottom {
      position: fixed;
      bottom: 40px;
      display: flex;
      align-items: center;
      width: 100%;

      >.submit {
         background: $light-color;
         color: #fff;
         width: 40%;
      }

   }

   .light {
      background: rgba($color: $light-color, $alpha: 0.2) !important;
      color: $light-color !important;
   }

   /**
   * 标签位置样式 
   */
   .tags-container {
      display: flex;
      flex-flow: row wrap;
      /* 保持宽度且换行 */
      gap: 12rpx;
      /* 标签间距 */
      padding: 10rpx 0;
      width: 100%;
      /* 确保容器宽度填满 */

   }

   /* 标签基础样式 */
   .tag,
   .add-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;
      font-size: 26rpx;
      padding: 0 24rpx;
      white-space: nowrap;
      margin-right: 12rpx;
      margin-bottom: 12rpx;
      flex-shrink: 0;
      /* 禁止压缩 */
   }

   /* 普通标签样式 */
   .tag {
      background-color: #f5f5f5;
      color: #666;
      position: relative;
      padding-right: 48rpx;
      /* 为删除图标留空间 */
   }

   .longTag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;
      font-size: 26rpx;
      padding: 0 24rpx;
      white-space: nowrap;
      margin-right: 12rpx;
      margin-bottom: 12rpx;
      flex-shrink: 0;
      /* 禁止压缩 */
      width: 300rpx;
      background-color: #f5f5f5;
      color: #666;
      position: relative;
      padding-right: 48rpx;
      /* 为删除图标留空间 */
   }

   /* 添加标签按钮样式 */
   .add-tag {
      border: 1px dashed #ccc;
      color: #999;
   }

   /* 删除按钮 */
   .delete-icon {
      position: absolute;
      right: 12rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 24rpx;
      height: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.1);
      color: #999;
      font-size: 24rpx;
   }
   .avatar-button {
       background: transparent;
       color: $font-color-light;
       font-size: $font-sm;
       line-height: 2em;
       margin: 0;
       padding: 0;
       border: none;
       &::after {
         border: none;
       }
     }
</style>