页面

src/pages/my/components/wx-login.vue

@@ -19,20 +19,20 @@
           style="backdrop-filter: blur(2rpx); border-radius: 10rpx"
         >
           <view class="p-4">
-            <view class="flex items-center leading-6" v-if="userStore.userInfo?.id">
+            <view class="flex items-center leading-6" v-if="userInfo.id">
-              <image class="w-18 h-18 rounded-full" :src="userStore.userInfo?.avatar"></image>
+              <image class="w-18 h-18 rounded-full" :src="userInfo.avatar"></image>
 
               <view class="ml-2 flex-content-column">
                 <view class="ps-1 font-size-4 font-bold">
-                  {{ userStore.userInfo?.nickname }}
+                  {{ userInfo.nickname }}
                 </view>
                 <view class="ml-1 font-size-3" style="align-items: end">
-                  <text class="pe-2 font-size-3">ID：{{ userStore.userInfo?.id }}</text>
+                  <text class="pe-2 font-size-3">ID：{{ userInfo.id }}</text>
                 </view>
               </view>
             </view>
             <view class="flex items-center leading-6" v-else @click="toLogin">
-              <image class="w-18 h-18 rounded-full" :src="userStore.userInfo?.avatar"></image>
+              <image class="w-18 h-18 rounded-full" :src="userInfo.avatar"></image>
               <view class="ml-2 font-size-4">去登录</view>
             </view>
           </view>
@@ -121,95 +121,100 @@
     <fly-login v-model="show" />
   </view>
 </template>
-
+<!-- setup -->
-<script lang="ts" setup name="WxLogin">
+<script lang="ts" name="WxLogin">
-import { useUserStore } from '@/store'
 import { getUrl, getWebUrl, getShopWebUrl, hasLogin } from '@/utils'
-// const userStore = useUserStore()
+
+import { useUserStore } from '@/store'
+const userStore = useUserStore()
 import { defineComponent } from 'vue'
 
-// export default defineComponent({
+export default defineComponent({
-//   data() {
+  data() {
-//     return {
+    return {
-//       isLogin: false,
+      isLogin: false,
-//       userIsLogin: false,
+      userIsLogin: false,
-//       show: false,
+      show: false,
-//       userStore: {},
+      userInfo: {},
-//     }
-//   },
-//   onLoad(option) {
-//     this.userStore = useUserStore()
-//     this.userIsLogin = useUserStore().userInfo.id ? true : false
-//     console.log('获取用户信息', this.userIsLogin)
-//     console.log('获取用户信息', this.userStore.userInfo)
-//   },
-//   methods: {
-//     toLogin() {
-//       uni.navigateTo({
-//         url: '/pages/login/login',
-//       })
-//     },
-//     more(item) {
-//       this.islogin = hasLogin()
-//       if (this.islogin === false) {
-//         uni.navigateTo({
-//           url: '/pages/login/login',
-//         })
-//         return
-//       }
-//       if (this.islogin === true) {
-//         // console.log(item)
-//         if (item.type == 1) {
-//           getUrl(item.url)
-//         } else if (item.type == 2) {
-//           getWebUrl(item.url)
-//         } else if (item.type == 3) {
-//           getShopWebUrl(item.url)
-//         }
-//       }
-//     },
-//   },
-// })
-function more(item) {
-  const islogin = hasLogin()
-  // const islogin = true
-  if (islogin === false) {
-    uni.navigateTo({
-      url: '/pages/login/login',
-    })
-    return
-  }
-
-  if (islogin === true) {
-    // console.log(item)
-    if (item.type == 1) {
-      getUrl(item.url)
-    } else if (item.type == 2) {
-      getWebUrl(item.url)
-    } else if (item.type == 3) {
-      getShopWebUrl(item.url)
     }
-  }
+  },
-}
+  onLoad(option) {
-const show = ref(false)
+    this.getUserInfo()
-const userStore = useUserStore()
+    // this.userStore = useUserStore()
-// console.log('获取用户信息', userStore.userInfo)
+    // this.userIsLogin = useUserStore().userInfo.id ? true : false
-// const hasLogin = computed(() => userStore.userInfo?.id)
+    // console.log('获取用户信息', this.userIsLogin)
+    // console.log('获取用户信息', this.userInfo)
+  },
+  methods: {
+    toLogin() {
+      uni.navigateTo({
+        url: '/pages/login/login',
+      })
+    },
 
-function toLogin() {
+    async getUserInfo() {
-  uni.navigateTo({
+      this.hasLogin = userStore.userInfo.nickname
-    url: '/pages/login/login',
+      const res = await getInfoAPI()
-  })
+      if (res.code === 1) {
-}
+        console.log('用户信息：', res.data)
+        this.userInfo = res.data
+        this.addressinfo.group_id = res.data.group_id
+        this.addressinfo.phone = res.data.phone
+        this.address_string = res.data.district_name + res.data.street_name + res.data.village_name
 
-// const logout = () => {
+        this.nickname = this.userInfo['nickname']
-//   uni.showModal({
+        this.phone = this.userInfo['phone']
-//     title: '确认退出当前账号？',
+      }
-//     success: (res) => {
+    },
-//       if (res.confirm) {
+    more(item) {
-//         userStore.logout()
+      this.islogin = hasLogin()
-//       }
+      if (this.islogin === false) {
-//     },
+        uni.navigateTo({
+          url: '/pages/login/login',
+        })
+        return
+      }
+      if (this.islogin === true) {
+        // console.log(item)
+        if (item.type == 1) {
+          getUrl(item.url)
+        } else if (item.type == 2) {
+          getWebUrl(item.url)
+        } else if (item.type == 3) {
+          getShopWebUrl(item.url)
+        }
+      }
+    },
+  },
+})
+
+// function more(item) {
+//   const islogin = hasLogin()
+//   // const islogin = true
+//   if (islogin === false) {
+//     uni.navigateTo({
+//       url: '/pages/login/login',
+//     })
+//     return
+//   }
+
+//   if (islogin === true) {
+//     // console.log(item)
+//     if (item.type == 1) {
+//       getUrl(item.url)
+//     } else if (item.type == 2) {
+//       getWebUrl(item.url)
+//     } else if (item.type == 3) {
+//       getShopWebUrl(item.url)
+//     }
+//   }
+// }
+// const show = ref(false)
+// const userStore = useUserStore()
+
+// function toLogin() {
+//   uni.navigateTo({
+//     url: '/pages/login/login',
 //   })
 // }
 </script>

src/pages/my/index.vue

@@ -1,4 +1,4 @@
-<route lang="json5">
+<!-- <route lang="json5">
 {
   style: { navigationStyle: 'custom', navigationBarTitleText: '我的' },
 }
@@ -13,25 +13,225 @@
 import { useUserStore } from '@/store'
 import { http } from '@/utils/http'
 import WxLogin from './components/wx-login.vue'
-// const userStore = useUserStore()
+</script> -->
-// const hasLogin = computed(() => userStore.userInfo?.nickname)
 
-// userStore.wxLogin()
+<route lang="json5">
-// // 用户登录，获取openId
+{
-// uni.login({
+  style: { navigationStyle: 'custom', navigationBarTitleText: '我的' },
-//   provider: 'weixin',
+}
-//   success: async ({ code }) => {
+</route>
-//     const res = await http<{ session_key: string; openid: string }>({
+
-//       method: 'POST',
+<template>
-//       url: '/api/auth/routineLogin',
+  <view class="background_home">
-//       data: {
+    <view class=" " style="">
-//         code,
+      <view class="relative h-50">
-//       },
+        <!-- <wd-img
+            radius="0px 0px 20rpx  20rpx "
+            :width="'100%'"
+            :height="'100%'"
+            src="https://img.shetu66.com/2023/06/14/1686734441937414.png"
+          /> -->
+        <view
+          class="m-4 absolute bottom-0 text-left left-0 right-0 text-white bg-black bg-opacity-0"
+          style="backdrop-filter: blur(2rpx); border-radius: 10rpx"
+        >
+          <view class="p-4">
+            <view class="flex items-center leading-6" v-if="userInfo.id">
+              <image class="w-18 h-18 rounded-full" :src="userInfo.avatar"></image>
+
+              <view class="ml-2 flex-content-column">
+                <view class="ps-1 font-size-4 font-bold">
+                  {{ userInfo.nickname }}
+                </view>
+                <view class="ml-1 font-size-3" style="align-items: end">
+                  <text class="pe-2 font-size-3">ID：{{ userInfo.id }}</text>
+                </view>
+              </view>
+            </view>
+            <view class="flex items-center leading-6" v-else @click="toLogin">
+              <image class="w-18 h-18 rounded-full" :src="userInfo.avatar"></image>
+              <view class="ml-2 font-size-4">去登录</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="p-2">
+      <wd-card>
+        <wd-grid :gutter="2" :column="4">
+          <view
+            @click="more(item)"
+            v-for="item in [
+              {
+                name: '我的钱包',
+                url: '/pages/users/user_money/index',
+                type: 2,
+                icon: '/static/icons/my1.png',
+                color: 'green',
+              },
+              {
+                name: '我的订单',
+                url: '/pages/users/order_list/index?status=-1',
+                type: 2,
+                icon: '/static/icons/my2.png',
+                color: 'green',
+              },
+              {
+                name: '我的收藏',
+                url: '/pages/users/user_goods_collection/index',
+                type: 2,
+                icon: '/static/icons/my3.png',
+                color: 'blue',
+              },
+              // {
+              //   name: '浏览记录',
+              //   url: '/pages/users/browsingHistory/index',
+              //   type: 2,
+              //   icon: '/static/icons/my4.png',
+              //   color: 'blue',
+              // },
+              {
+                name: '平台客服',
+                url: '17309090670',
+                type: 2,
+                icon: '/static/icons/my4.png',
+                color: 'blue',
+              },
+
+              {
+                name: '上传商品',
+                url: '/pages/my/uploadProduct',
+                type: 1,
+                icon: '/static/icons/my5.png',
+                color: 'red',
+              },
+              {
+                name: '设置',
+                url: '/pages/my/setting',
+                type: 1,
+                icon: '/static/icons/my7.png',
+                color: 'red',
+              },
+              // {
+              //   name: '上传商品',
+              //   url: '/pages/my/uploadProduct',
+              //   type: 1,
+              //   icon: '/static/icons/rural_ecommerce.png',
+              //   color: 'red',
+              // },
+            ]"
+          >
+            <wd-grid-item use-slot>
+              <view class="p-2">
+                <wd-img radius="20rpx" :width="'60rpx'" :height="'60rpx'" :src="item.icon" />
+                <view class="p-2 text-center color-black font-size-3">
+                  {{ item.name }}
+                </view>
+              </view>
+            </wd-grid-item>
+          </view>
+        </wd-grid>
+      </wd-card>
+      <!-- <button v-if="hasLogin" class="mt-2" @click="logout">退出登录</button> -->
+    </view>
+    <fly-login v-model="show" />
+  </view>
+</template>
+<!-- setup -->
+<script lang="ts" name="WxLogin">
+import { getUrl, getWebUrl, getShopWebUrl, hasLogin } from '@/utils'
+import { getInfoAPI } from '@/service/crmeb/product.ts'
+import { useUserStore } from '@/store'
+const userStore = useUserStore()
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  data() {
+    return {
+      isLogin: false,
+      userIsLogin: false,
+      show: false,
+      userInfo: {},
+    }
+  },
+  onLoad(option) {
+    this.getUserInfo()
+    // this.userStore = useUserStore()
+    // this.userIsLogin = useUserStore().userInfo.id ? true : false
+    // console.log('获取用户信息', this.userIsLogin)
+    // console.log('获取用户信息', this.userInfo)
+  },
+  methods: {
+    toLogin() {
+      uni.navigateTo({
+        url: '/pages/login/login',
+      })
+    },
+
+    async getUserInfo() {
+      this.hasLogin = userStore.userInfo.nickname
+      const res = await getInfoAPI()
+      if (res.code === 1) {
+        console.log('用户信息：', res.data)
+        this.userInfo = res.data
+        // this.addressinfo.group_id = res.data.group_id
+        // this.addressinfo.phone = res.data.phone
+        // this.address_string = res.data.district_name + res.data.street_name + res.data.village_name
+
+        // this.nickname = this.userInfo['nickname']
+        // this.phone = this.userInfo['phone']
+      }
+    },
+    more(item) {
+      this.islogin = hasLogin()
+      if (this.islogin === false) {
+        uni.navigateTo({
+          url: '/pages/login/login',
+        })
+        return
+      }
+      if (this.islogin === true) {
+        // console.log(item)
+        if (item.type == 1) {
+          getUrl(item.url)
+        } else if (item.type == 2) {
+          getWebUrl(item.url)
+        } else if (item.type == 3) {
+          getShopWebUrl(item.url)
+        }
+      }
+    },
+  },
+})
+
+// function more(item) {
+//   const islogin = hasLogin()
+//   // const islogin = true
+//   if (islogin === false) {
+//     uni.navigateTo({
+//       url: '/pages/login/login',
 //     })
-//     console.log('微信登录-1：', res)
+//     return
-//     // {code: 0, msg: "success", data: {session_key: "JTzhLVK+oM3X58uJ/heDcQ==", openid: "oSYa06xPVqjsK-eFYzt0kSPYu1q4"}}
+//   }
-//     openId.value = res.data.openid
+
-//     userStore.setUserInfo({ openid: res.data.openid })
+//   if (islogin === true) {
-//   },
+//     // console.log(item)
-// })
+//     if (item.type == 1) {
+//       getUrl(item.url)
+//     } else if (item.type == 2) {
+//       getWebUrl(item.url)
+//     } else if (item.type == 3) {
+//       getShopWebUrl(item.url)
+//     }
+//   }
+// }
+// const show = ref(false)
+// const userStore = useUserStore()
+
+// function toLogin() {
+//   uni.navigateTo({
+//     url: '/pages/login/login',
+//   })
+// }
 </script>

src/pages/my/setting.vue

@@ -8,6 +8,18 @@
     <view class="p-2 detail-box bg-white">
       <wd-card>
         <wd-cell-group>
+          <wd-cell title="头像" center custom-style="padding:20rpx;font-size:28rpx">
+            <view class="custom-value" style="height: 120rpx" @click="showImage = true">
+              <wd-img
+                round
+                :width="'120rpx'"
+                :height="'120rpx'"
+                :src="userInfo.avatar"
+                custom-class="profile-img"
+              />
+            </view>
+          </wd-cell>
+
           <wd-cell
             icon=""
             title="昵称"
@@ -52,6 +64,33 @@
             @click="show = true"
           />
         </wd-cell-group>
+        <wd-popup
+          v-model="showImage"
+          position="bottom"
+          custom-style="height: 480rpx;padding:20rpx;font-size:28rpx"
+        >
+          <view class="flex items-center">
+            <view class="w-[33%] text-[14px] px-2">修改头像</view>
+            <wd-upload
+              v-model="image"
+              image-mode="aspectFill"
+              :action="action"
+              :limit="1"
+              @success="uploadSuccess"
+            />
+          </view>
+          <view class="text-center m-10">
+            <wd-button
+              type="primary"
+              custom-class="font-bold font-size-4 "
+              block
+              size="large"
+              @click="onSubmitImage"
+            >
+              <text class="color-white font-bold font-size-4 text-shadow">提交修改</text>
+            </wd-button>
+          </view>
+        </wd-popup>
 
         <wd-popup
           v-model="showName"
@@ -154,7 +193,7 @@ const switchValue = ref('')
 
 import { useUserStore } from '@/store'
 const userStore = useUserStore()
-
+import { getEnvBaseUploadUrl } from '@/utils'
 import { useColPickerData, useModal } from '@/hooks'
 
 const { colPickerData, findChildrenByCode } = useColPickerData()
@@ -169,17 +208,24 @@ import {
   setPhoneAPI,
   setInfoPI,
   setBaseAPI,
+  getUplaodImageAPI,
 } from '@/service/crmeb/product.ts'
+const formData = reactive({
+  image: [],
+})
 
 export default defineComponent({
   data() {
     return {
+      action: getEnvBaseUploadUrl(),
+      image: '',
       type: 0, // 0 点击进入 1 跳转登录
+      showImage: false,
       show: false,
       hasLogin: false,
       showPhone: false,
       showName: false,
-
+      imgSrc: '',
       address_string: '',
 
       propShowOrder: false,
@@ -263,6 +309,9 @@ export default defineComponent({
         this.addressinfo.group_id = res.data.group_id
         this.addressinfo.phone = res.data.phone
         this.address_string = res.data.district_name + res.data.street_name + res.data.village_name
+
+        this.nickname = this.userInfo['nickname']
+        this.phone = this.userInfo['phone']
       }
     },
 
@@ -283,6 +332,40 @@ export default defineComponent({
       // console.log(this.addressinfo)
       this.submitGroup()
     },
+    //图片上传
+    uploadSuccess(res) {
+      const response = JSON.parse(res.file.response)
+      if (response.code === 1) {
+        console.log('上传图片成功：', response)
+        // formData.image.push(response.data.uri)
+        this.imgSrc = response.data.uri
+      } else {
+        uni.showToast({
+          title: response.msg,
+          icon: 'error',
+        })
+      }
+    },
+
+    async onSubmitImage() {
+      if (!this.imgSrc) {
+        uni.showToast({
+          title: '头像不能为空',
+          icon: 'none',
+        })
+        return
+      }
+      const data = {
+        nickname: this.userInfo['nickname'],
+        avatar: this.imgSrc,
+      }
+      const res = await setBaseAPI(data)
+      console.log(res)
+      if (res.code === 1) {
+        this.userInfo['avatar'] = this.imgSrc
+      }
+      this.showImage = false
+    },
 
     async onSubmitInfo() {
       if (!this.nickname) {
@@ -299,6 +382,7 @@ export default defineComponent({
       }
       const res = await setBaseAPI(data)
       console.log(res)
+
       this.showName = false
     },
     async onSubmitPhone() {

src/service/crmeb/product.ts

@@ -81,6 +81,11 @@ export function getArticleDetailAPI(data: any) {
   return http.get('/api/article/detail', data)
 }
 
+//图片上传
+export function getUplaodImageAPI(data: any) {
+  return http.post('/api/upload/image', data)
+}
+
 /**
  * 打开导航
  * @param latitude 目标纬度

src/style/index.scss

@@ -204,3 +204,33 @@ $padding-width: 20rpx;
   flex: 1; /* 使该容器自适应高度 */
   min-height: 0; /* 确保在某些情况下仍然能够自适应高度 */
 }
+
+.cell-icon {
+  display: block;
+  box-sizing: border-box;
+  padding: 4px 0;
+  width: 16px;
+  height: 24px;
+  margin-right: 4px;
+  background: url('https://img10.360buyimg.com/jmadvertisement/jfs/t1/71075/7/3762/1820/5d1f26d1E0d600b9e/a264c901943080ac.png')
+    no-repeat;
+  background-size: cover;
+}
+:deep(.custom-value) {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(0, -50%);
+  white-space: nowrap;
+}
+.custom-text {
+  color: #f0883a;
+}
+.end-time {
+  display: inline-block;
+  margin-left: 8px;
+  border: 1px solid #faa21e;
+  padding: 0 4px;
+  font-size: 10px;
+  color: #faa21e;
+}