|
@@ -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>
|