|  | @@ -3,7 +3,7 @@
 | 
	
		
			
				|  |  |  {
 | 
	
		
			
				|  |  |    style: {
 | 
	
		
			
				|  |  |      navigationBarTitleText: '我的',
 | 
	
		
			
				|  |  | -    navigationBarBackgroundColor: '#f59e0b',
 | 
	
		
			
				|  |  | +    navigationBarBackgroundColor: '#c08e10',
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  </route>
 | 
	
	
		
			
				|  | @@ -14,14 +14,35 @@
 | 
	
		
			
				|  |  |        <view class="user-box flex">
 | 
	
		
			
				|  |  |          <!-- 左边 -->
 | 
	
		
			
				|  |  |          <view class="flex">
 | 
	
		
			
				|  |  | -          <image src="../../static/logo.png" mode="scaleToFill" class="imgs" />
 | 
	
		
			
				|  |  | +          <!-- 头像更换 -->
 | 
	
		
			
				|  |  | +          <wd-img-cropper
 | 
	
		
			
				|  |  | +            v-model="show"
 | 
	
		
			
				|  |  | +            :img-src="src"
 | 
	
		
			
				|  |  | +            @confirm="handleConfirm"
 | 
	
		
			
				|  |  | +            @cancel="handleCancel"
 | 
	
		
			
				|  |  | +          ></wd-img-cropper>
 | 
	
		
			
				|  |  | +          <view class="profile imgs content">
 | 
	
		
			
				|  |  | +            <view v-if="!imgSrc" @click="upload" class="mt-4">
 | 
	
		
			
				|  |  | +              <wd-icon name="fill-camera" custom-class="img-icon" font-size="28px"></wd-icon>
 | 
	
		
			
				|  |  | +            </view>
 | 
	
		
			
				|  |  | +            <wd-img
 | 
	
		
			
				|  |  | +              v-if="imgSrc"
 | 
	
		
			
				|  |  | +              round
 | 
	
		
			
				|  |  | +              width="140rpx"
 | 
	
		
			
				|  |  | +              height="140rpx"
 | 
	
		
			
				|  |  | +              :src="imgSrc"
 | 
	
		
			
				|  |  | +              mode="aspectFit"
 | 
	
		
			
				|  |  | +              custom-class="profile-img"
 | 
	
		
			
				|  |  | +              @click="upload"
 | 
	
		
			
				|  |  | +            />
 | 
	
		
			
				|  |  | +          </view>
 | 
	
		
			
				|  |  | +          <!-- <image src="../../static/logo.png" mode="scaleToFill" class="imgs" /> -->
 | 
	
		
			
				|  |  |            <view class="user-text pt-4">
 | 
	
		
			
				|  |  |              <text>好闪闪</text>
 | 
	
		
			
				|  |  |              <view>牧场-兽医部-技术员</view>
 | 
	
		
			
				|  |  |            </view>
 | 
	
		
			
				|  |  |          </view>
 | 
	
		
			
				|  |  |          <!-- 右边 -->
 | 
	
		
			
				|  |  | -        <!-- <view>消息</view> -->
 | 
	
		
			
				|  |  |        </view>
 | 
	
		
			
				|  |  |      </view>
 | 
	
		
			
				|  |  |      <!-- 工具 -->
 | 
	
	
		
			
				|  | @@ -31,7 +52,7 @@
 | 
	
		
			
				|  |  |          <view class="tool-box">
 | 
	
		
			
				|  |  |            <view class="tool-item" v-for="(item, index) in workList" :key="index">
 | 
	
		
			
				|  |  |              <i class="iconfont icon" :class="item.icon"></i>
 | 
	
		
			
				|  |  | -            <view class="mt-1">{{ item.name }}</view>
 | 
	
		
			
				|  |  | +            <view class="mt-1 center">{{ item.name }}</view>
 | 
	
		
			
				|  |  |            </view>
 | 
	
		
			
				|  |  |          </view>
 | 
	
		
			
				|  |  |        </view>
 | 
	
	
		
			
				|  | @@ -39,8 +60,8 @@
 | 
	
		
			
				|  |  |      <!-- 个人信息 -->
 | 
	
		
			
				|  |  |      <view class="user-tool px-4 pt-1 pb-1 flex mb-2" v-for="(item, index) in userList" :key="index">
 | 
	
		
			
				|  |  |        <view>
 | 
	
		
			
				|  |  | -        <image class="icons mr-1" :src="item.img" mode="scaleToFill" />
 | 
	
		
			
				|  |  | -        {{ item.name }}
 | 
	
		
			
				|  |  | +        <i class="iconfont icon" :class="item.img"></i>
 | 
	
		
			
				|  |  | +        <text class="rg-title">{{ item.name }}</text>
 | 
	
		
			
				|  |  |        </view>
 | 
	
		
			
				|  |  |        <navigator :url="item.url">
 | 
	
		
			
				|  |  |          <wd-icon name="arrow-right" color="#8e8e8e" size="22px"></wd-icon>
 | 
	
	
		
			
				|  | @@ -64,37 +85,93 @@ const userList = ref([
 | 
	
		
			
				|  |  |    {
 | 
	
		
			
				|  |  |      id: 1,
 | 
	
		
			
				|  |  |      name: '修改密码',
 | 
	
		
			
				|  |  | -    img: '../../static/images/tool/editPsd.png',
 | 
	
		
			
				|  |  | +    img: 'icon-xiugaimima',
 | 
	
		
			
				|  |  |      url: '/pages/editPassword/editPassword',
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    {
 | 
	
		
			
				|  |  |      id: 2,
 | 
	
		
			
				|  |  | -    name: '客服服务',
 | 
	
		
			
				|  |  | -    img: '../../static/images/tool/user.png',
 | 
	
		
			
				|  |  | +    name: '联系客户',
 | 
	
		
			
				|  |  | +    img: 'icon-lianxikefu',
 | 
	
		
			
				|  |  |      url: '/pages/editPassword/editPassword',
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    {
 | 
	
		
			
				|  |  |      id: 3,
 | 
	
		
			
				|  |  |      name: '意见反馈',
 | 
	
		
			
				|  |  | -    img: '../../static/images/tool/advice.png',
 | 
	
		
			
				|  |  | +    img: 'icon-yijianfankui1',
 | 
	
		
			
				|  |  |      url: '/pages/feedBack/feedBack',
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    {
 | 
	
		
			
				|  |  |      id: 4,
 | 
	
		
			
				|  |  |      name: '服务条款',
 | 
	
		
			
				|  |  | -    img: '../../static/images/tool/service.png',
 | 
	
		
			
				|  |  | +    img: 'icon-fuwutiaokuan1',
 | 
	
		
			
				|  |  |      url: '/pages/serviceText/serviceText',
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |  ])
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +// 头像
 | 
	
		
			
				|  |  | +const src = ref<string>('')
 | 
	
		
			
				|  |  | +const imgSrc = ref<string>('')
 | 
	
		
			
				|  |  | +const show = ref<boolean>(false)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +function upload() {
 | 
	
		
			
				|  |  | +  uni.chooseImage({
 | 
	
		
			
				|  |  | +    count: 1,
 | 
	
		
			
				|  |  | +    success: (res) => {
 | 
	
		
			
				|  |  | +      const tempFilePaths = res.tempFilePaths[0]
 | 
	
		
			
				|  |  | +      src.value = tempFilePaths
 | 
	
		
			
				|  |  | +      show.value = true
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  })
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +function handleConfirm(event) {
 | 
	
		
			
				|  |  | +  const { tempFilePath } = event
 | 
	
		
			
				|  |  | +  imgSrc.value = tempFilePath
 | 
	
		
			
				|  |  | +  const file = dataURLtoFile(tempFilePath, 'tu.jpeg')
 | 
	
		
			
				|  |  | +  console.log(file, 'file')
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +//将base64格式图片转换为文件形式
 | 
	
		
			
				|  |  | +// ajax请求,用formdata进行传输,file为上面由base64转的file。
 | 
	
		
			
				|  |  | +function dataURLtoFile(dataurl, filename) {
 | 
	
		
			
				|  |  | +  var arr = dataurl.split(','),
 | 
	
		
			
				|  |  | +    mime = arr[0].match(/:(.*?);/)[1],
 | 
	
		
			
				|  |  | +    bstr = atob(arr[1]),
 | 
	
		
			
				|  |  | +    n = bstr.length,
 | 
	
		
			
				|  |  | +    u8arr = new Uint8Array(n)
 | 
	
		
			
				|  |  | +  while (n--) {
 | 
	
		
			
				|  |  | +    u8arr[n] = bstr.charCodeAt(n)
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +  return new File([u8arr], filename, { type: mime })
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +function imgLoaderror(res) {
 | 
	
		
			
				|  |  | +  console.log('加载失败', res)
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +function imgLoaded(res) {
 | 
	
		
			
				|  |  | +  console.log('加载成功', res)
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +function handleCancel(event) {
 | 
	
		
			
				|  |  | +  console.log('取消', event)
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  |  onMounted(() => {})
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  onLoad(() => {})
 | 
	
		
			
				|  |  |  </script>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  <style lang="scss" scoped>
 | 
	
		
			
				|  |  | +::v-deep .wd-img-cropper__footer,
 | 
	
		
			
				|  |  | +.wd-img-cropper__footer--button[data-v-d9f3c9d7] {
 | 
	
		
			
				|  |  | +  bottom: 70px !important;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +::v-deep .wd-icon,
 | 
	
		
			
				|  |  | +.wd-icon.data-v-d4a8410a {
 | 
	
		
			
				|  |  | +  font-size: 32px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  |  .icon {
 | 
	
		
			
				|  |  | +  display: inline-block;
 | 
	
		
			
				|  |  | +  margin: 0 auto;
 | 
	
		
			
				|  |  |    font-size: 32px !important;
 | 
	
		
			
				|  |  | -  color: #f59e0b;
 | 
	
		
			
				|  |  | +  color: #d4a017;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  .containe {
 | 
	
		
			
				|  |  |    font-size: 28rpx;
 | 
	
	
		
			
				|  | @@ -106,7 +183,8 @@ onLoad(() => {})
 | 
	
		
			
				|  |  |    overflow: hidden;
 | 
	
		
			
				|  |  |    color: #fbeed8;
 | 
	
		
			
				|  |  |    text-align: center;
 | 
	
		
			
				|  |  | -  background: linear-gradient(to bottom, #f59e0b, #f6c986);
 | 
	
		
			
				|  |  | +  // background: linear-gradient(to bottom, #d4a017, #f6c986);
 | 
	
		
			
				|  |  | +  background: linear-gradient(180deg, #c08e10 0%, #d4a017 50%, #e3b655 100%);
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  .user-box {
 | 
	
		
			
				|  |  |    justify-content: space-between;
 | 
	
	
		
			
				|  | @@ -117,7 +195,8 @@ onLoad(() => {})
 | 
	
		
			
				|  |  |      width: 140rpx;
 | 
	
		
			
				|  |  |      height: 140rpx;
 | 
	
		
			
				|  |  |      margin-right: 20rpx;
 | 
	
		
			
				|  |  | -    background: #fff;
 | 
	
		
			
				|  |  | +    // background: #fff;
 | 
	
		
			
				|  |  | +    background-color: #323233;
 | 
	
		
			
				|  |  |      border: 1px solid #fff;
 | 
	
		
			
				|  |  |      border-radius: 50%;
 | 
	
		
			
				|  |  |    }
 | 
	
	
		
			
				|  | @@ -142,15 +221,7 @@ onLoad(() => {})
 | 
	
		
			
				|  |  |    font-weight: 450;
 | 
	
		
			
				|  |  |    border-bottom: 1px dotted #eee;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  | -.icon {
 | 
	
		
			
				|  |  | -  width: 80rpx;
 | 
	
		
			
				|  |  | -  height: 80rpx;
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -.icons {
 | 
	
		
			
				|  |  | -  top: -4rpx;
 | 
	
		
			
				|  |  | -  width: 56rpx;
 | 
	
		
			
				|  |  | -  height: 56rpx;
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  .tool-item {
 | 
	
		
			
				|  |  |    width: 22%;
 | 
	
		
			
				|  |  |    padding: 10rpx 0;
 | 
	
	
		
			
				|  | @@ -174,4 +245,9 @@ onLoad(() => {})
 | 
	
		
			
				|  |  |    background-color: #fff;
 | 
	
		
			
				|  |  |    border-bottom: 1px dotted #f5f5f5;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  | +.rg-title {
 | 
	
		
			
				|  |  | +  position: relative;
 | 
	
		
			
				|  |  | +  top: -10rpx;
 | 
	
		
			
				|  |  | +  left: 14rpx;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  |  </style>
 |