Merge remote-tracking branch 'origin/dev_fix_sub' into dev_fix_sub

peng

2025-07-23 9075ba7a3270167c488125c8e0599122dc210692

 pages/mine/set/personMsg.vue

@@ -18,7 +18,8 @@

      <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-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>
@@ -32,27 +33,58 @@
         <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>
      <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 {
      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 },
      components: {
         "m-city": city
      },
  data() {
    return {
            memberTags: null,
     cosClient: null,
     bucket: '',
     region: '',
@@ -70,9 +102,14 @@
      username: storage.getUserInfo().username,
      },
      birthday: storage.getUserInfo().birthday || "", //生日
      photo: [
        { text: "立即拍照", color: this.$mainColor },
        { text: "从相册选择", color: this.$mainColor },
            photo: [{
                  text: "立即拍照",
                  color: this.$mainColor
               },
               {
                  text: "从相册选择",
                  color: this.$mainColor
               },
      ],
      region: [
        //请求城市默认地址
@@ -87,8 +124,90 @@
  },
  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

               }
            })
         },
         showAddTagDialog() {
            uni.showModal({
               title: '添加自定义标签',
               editable: true,
               placeholderText: '请输入标签内容（最多8个字）',
               success: (res) => {
                  if (res.confirm) {
                     if (!res.content) {
                        uni.showToast({
                           title: '标签内容不能为空',
                           icon: 'none'
                        });
                        return;
                     }

                     if (res.content.length > 8) {
                        uni.showToast({
                           title: '标签长度不能超过8个字',
                           icon: 'none'
                        });
                        return;
                     }
                     this.addTag(res.content)
                  }
               }
            });
         },
     // 初始化腾讯云cos客户端
     initCOS() {
        // 调用后端获取sts临时访问凭证
@@ -238,6 +357,7 @@
  color: $main-color;
  border-radius: 100px;
}

.head {
  height: 260rpx;
  color: $font-color-light;
@@ -247,31 +367,37 @@
  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;
@@ -279,8 +405,96 @@
  }

}

.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;
   }
</style>