feas

src/pages/MyAddressList/AddressInfos/index.jsx

@@ -2,6 +2,7 @@ import { View, Form, Input, Switch, Textarea } from "@tarojs/components"
 import Taro from "@tarojs/taro"
 import CustomNav from "@/components/CustomNav"
 import ButtontWX from '@/components/ButtontWX'
+import { addressSave, getAddress, addressDelete, addressUpdate } from "@/services/address"
 
 import './style.less'
 import { useEffect } from "react"
@@ -13,32 +14,29 @@ export default (props) => {
   const formSubmit = e => {
     const value = e.detail.value
     console.log(value)
+    addressSave({ address: value.address, isDefault: value.isDefault }).then((e) => {
+      console.log('e', e);
+    })
 
   }
 
   const formReset = e => {
     console.log(e)
   }
-  const handelSwitch = (e) => {
-    const { value } = e.detail
-    console.log('e', value);
 
-  }
   return (
 
     <View className='form-content'>
       <Form onSubmit={formSubmit} onReset={formReset} >
         <View className='example-body'>
           <View>详细地址：</View>
-          <Textarea name='locastInfo' className='aTextareaCentent' placeholder='请输入地址信息' />
+          <Textarea name='address' className='aTextareaCentent' placeholder='请输入地址信息' />
         </View>
-        <View className='example-body'>
+        {/* <View className='example-body'>
           <View>是否设为默认地址：</View>
-          {/* <Textarea name='locastInfo' className='aTextareaCentent' placeholder='请输入地址信息' /> */}
 
-
-          <Switch name='Switch' onChange={handelSwitch} />
-        </View>
+          <Switch name='isDefault' onChange={handelSwitch} type='checkbox' />
+        </View> */}
         <View className='buton-bottom'>
           <ButtontWX onClick={formSubmit} formType='submit' butText='保存' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
         </View>

src/pages/MyAddressList/index.jsx

@@ -1,30 +1,125 @@
-import { View, Form, Input, Button, Textarea } from "@tarojs/components"
+import { View, Image, Switch, Button, Textarea } from "@tarojs/components"
 import Taro from "@tarojs/taro"
+import { useState } from "react"
 import CustomNav from "@/components/CustomNav"
+import edit from "@/assets/icons/comm/edit.png"
+import userRight from '@/assets/mineImgaes/userRight.png'
+
+import deletes from "@/assets/icons/comm/deletes.png"
 import ButtontWX from '@/components/ButtontWX'
 import { useEffect } from "react"
 
-import './style.less'
+import { addressDefault, getAddress, addressDelete, addressUpdate } from "@/services/address"
 
+import './style.less'
 
 
 
 export default (props) => {
+  const [addresList, setAddresList] = useState([])
 
   const addAddress = () => {
     Taro.navigateTo({ url: `/pages/MyAddressList/AddressInfos/index?id=${1}` })
   }
 
+  const addressDeletess = (e) => {
+    Taro.showModal({
+      title: '提示',
+      content: '您确定要删除此地址吗',
+      success: function (res) {
+        if (res.confirm) {
+          addressDelete(e).then((e) => {
+
+          })
+        } else if (res.cancel) {
+          console.log('用户点击取消')
+        }
+      }
+    })
+
+  }
+
+  const handelSwitch = (e) => {
+    const { value } = e.detail
+    console.log('e', value);
+
+  }
+  const addressEdit = (e) => {
+    console.log('e', e);
+
+  }
+
+
+  const getList = () => {
+    // getAddress().then((e) => {
+    //   console.log('地址列表', e);
+    //   setAddresList(e.records)
+
+
+    // })
+  }
+
   useEffect(() => {
+    // getList()
+    getAddress().then((e) => {
+      console.log('地址列表', e);
+      setAddresList(e.records)
+
+
+    })
+  }, [])
+
+
 
-  })
   return (
     <View className='page-index'>
       <View className='index-navbar'>
-        <CustomNav title='我的地址' />
+        <CustomNav title='地址管理' />
       </View>
       <scroll-view scrollY style='height: 100%;' >
-        <ButtontWX onClick={addAddress} formType='submit' butText='+新增收货地址' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
+        <View>
+          {
+
+            addresList.map((item, index) => {
+              return (
+                <View className='addressList-box' key={index}>
+                  <View className='addressList-box-addressTop'>
+                    <View className='addressList-box-addressTop-redText'>默认地址</View>
+                    <View className='addressList-box-addressTop-title'>我的地址{index + 1}</View>
+                  </View>
+                  <View className='addressList-box-addressBotton'>
+                    <View className='addressList-box-addressBotton-editTextImage'>
+                      <View>
+                        {item.address}
+                      </View>
+                      <Image src={edit} onClick={() => addressEdit(item.addressId)} />
+                    </View>
+
+                    <View className='addressList-box-addressBotton-setAddress'>
+                      <View>
+                        设为默认地址: <Switch name='isDefault' onChange={handelSwitch} type='checkbox' />
+                      </View>
+
+                      <View className='addressList-box-addressBotton-addressDelete' onClick={() => addressDeletess(item.addressId)}>
+                        <View>
+                          删除
+                        </View>
+                        <Image src={deletes} />
+
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              )
+            })
+          }
+
+          <View className='bottomButtom' >
+            <ButtontWX onClick={addAddress} formType='submit' butText='+新增收货地址' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
+
+          </View>
+
+        </View>
       </scroll-view>
     </View >
   )

src/pages/MyAddressList/style.less

@@ -0,0 +1,70 @@
+.addressList-box {
+  // border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.1);
+  padding: 1em 30px;
+  border-radius: 20px;
+  width: 87%;
+  margin: 40px auto;
+  &-addressTop {
+    display: flex;
+    align-items: center;
+    &-redText {
+      margin-right: 10px;
+      border-radius: 10px;
+      padding: 2px 10px;
+      background-color: red;
+      color: #fff;
+      font-size: 30px;
+    }
+    &-title {
+      font-size: 30px;
+      font-weight: 700;
+    }
+  }
+  &-addressBotton {
+    &-editTextImage {
+      padding: 10px 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      > View {
+        color: #666;
+        font-size: 30px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2; // 控制多行的行数
+        -webkit-box-orient: vertical;
+        width: 77vw;
+      }
+      > Image {
+        width: 70px;
+        height: 65px;
+      }
+    }
+    &-setAddress {
+      border-top: 1px solid rgba(0, 0, 0, 0.2);
+      padding: 0.5em 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &-addressDelete {
+      display: flex;
+      align-items: center;
+      > Image {
+        width: 50px;
+        height: 50px;
+      }
+    }
+  }
+}
+
+.bottomButtom {
+  width: 100%;
+  margin: 0 auto;
+  position: absolute;
+  bottom: -29vh;
+  margin: 15vh 0;
+}

src/pages/userInfo/index.config.js

@@ -0,0 +1,10 @@
+
+export default {
+  navigationBarTitleText: '个人信息',
+  navigationStyle: 'custom',
+  disableScroll: true,
+  usingComponents: {
+  }
+
+
+}

src/pages/userInfo/index.jsx

@@ -0,0 +1,108 @@
+import { useState } from "react"
+import { useModel } from '@/store'
+import Taro from "@tarojs/taro"
+import { Input, View, Image } from "@tarojs/components"
+import CustomNav from '@/components/CustomNav'
+import ButtontWX from '@/components/ButtontWX'
+import { updateInfo } from "@/services/login"
+// import banner1 from '@/assets/banner/1.jpg'
+// import resetImg from '@/assets/user/cancel.png'
+import './style.less'
+
+export default (props) => {
+
+  const { person, setPerson } = useModel('userData')
+
+  const [name, setName] = useState(person.nickName)
+  const [phone, setPhone] = useState(person.phone)
+  const [avatar, setAvatar] = useState(person.avatar)
+  const changeName = (e) => {
+    setName(e.detail.value)
+  }
+  const changePhone = (e) => {
+    setPhone(e.detail.value)
+  }
+  const rulePhone = (val) => {
+    if (!/^1[0-9]{10}$/.test(val)) {
+      Taro.showToast({
+        title: '请输入正确的11位手机号',
+        icon: 'none',
+        duration: 2000
+      })
+      return false
+    } else return true
+  }
+  const handleSave = () => {
+    if (rulePhone(phone)) {
+      updateInfo(person.personId, { ...person, avatar: avatar, phone: phone, nickName: name }).then((res) => {
+        setPerson(res)
+        Taro.showToast({
+          title: '保存成功',
+          icon: 'none',
+        })
+        Taro.navigateBack({ delta: 1 })
+      }).catch((e) => {
+        console.log(e)
+        Taro.showToast({
+          title: '网络异常, 请刷新小程序重试',
+          icon: 'none',
+        })
+      })
+    }
+  }
+  const resetName = () => {
+    setName()
+  }
+  const resetPhone = () => {
+    setPhone()
+  }
+  const changeAvatar = () => {
+    Taro.getUserProfile({
+      lang: 'zh_CN',
+      desc: "获取你的昵称、头像、地区及性别",
+      success: function (res) {
+        setAvatar(res.userInfo.avatarUrl)
+      },
+      fail: () => {
+        //拒绝授权
+        console.error("拒绝了请求");
+        return;
+      }
+    })
+  }
+  return (
+    <View className='page-index'>
+      <View className='index-navbar'>
+        <CustomNav title='个人信息' />
+      </View>
+      <View className='index-container userCard'>
+        <View className='avatar' onClick={changeAvatar}>
+          <Image src={avatar} className='avatarImg' />
+          <View className='change'>更换头像</View>
+        </View>
+        <View className='userCell'>
+          <View>姓名：</View>
+          <View style={{ display: 'flex', alignItems: 'center', height: '54px' }}>
+            <Input type='text' placeholder='请输入您的姓名' value={name} onBlur={changeName} className='userName' />
+            <View className='reset' onClick={resetName}>
+              {/* <Image src={resetImg} className='close' /> */}
+            </View>
+          </View>
+        </View>
+        <View className='userCell'>
+          <View>手机号：</View>
+          <View style={{ display: 'flex', alignItems: 'center', height: '54px' }}>
+            <Input type='text' placeholder='请输入您的手机号' value={phone} onBlur={changePhone} className='userName' />
+            <View className='reset' onClick={resetPhone}>
+              {/* <Image src={resetImg} className='close' /> */}
+            </View>
+          </View>
+        </View>
+        <View className='bottomBtn'>
+          <ButtontWX onClick={handleSave} butText='保存' butWidth={300} butHeight={49} butFontSize={16} butBorderRadius={49} />
+
+        </View>
+      </View>
+    </View>
+  )
+}

src/pages/userInfo/style.less

@@ -0,0 +1,54 @@
+.userCard {
+  margin: 30px;
+  .avatar {
+    height: 184px;
+    background: #fff;
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.12);
+    display: flex;
+    align-items: center;
+    .avatarImg {
+      width: 124px;
+      height: 124px;
+      background: #f2f2f2;
+      border: 4px solid #ffffff;
+      border-radius: 50%;
+    }
+    .change {
+      font-size: 34px;
+      font-weight: 500;
+      color: #333333;
+      position: absolute;
+      right: 0;
+    }
+  }
+  .userCell {
+    background: #fff;
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.12);
+    font-size: 34px;
+    font-weight: bold;
+    color: #333333;
+    margin-top: 80px;
+    .userName {
+      height: 108px;
+      flex: 1;
+    }
+    .reset {
+      flex: none;
+      width: 100px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      .close {
+        width: 36px;
+        height: 36px;
+        margin: auto;
+      }
+    }
+  }
+  .bottomBtn {
+    margin-bottom: 12px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}

src/routes.js

@@ -18,6 +18,10 @@ const Pages = [
     title: '我的地址列表',
     page: 'pages/MyAddressList/index',
   },
+  {
+    title: '个人信息',
+    page: 'pages/userInfo/index',
+  },
   {
     title: '我的详细地址',
     page: 'pages/MyAddressList/AddressInfos/index',

src/services/address.js

@@ -4,8 +4,42 @@ import request from '@/utils/request'
 
 
 /**
- * banner轮播图
+ * 地址保存
  * @param {*} data 
  * @returns 
  */
-export const getHomeBanner = (data) => request(`/banner`, { data, method: 'get' })
+export const addressSave = (data) => request(`/address`, { data, method: 'POST' })
+
+
+/**
+ * 地址列表
+ * @param {*} data 
+ * @returns 
+ */
+export const getAddress = (data) => request(`/address`, { data, method: 'GET' })
+
+
+/**
+* 地址删除
+* @param {*} data 
+* @returns 
+*/
+export const addressDelete = (id, data) => request(`/address/${id}`, { data, method: 'DELETE' })
+
+
+/**
+ * 地址修改更新
+ * @param {*} data 
+ * @returns 
+ */
+export const addressUpdate = (id, data) => request(`/address/${id}`, { data, method: 'PUT' })
+
+
+/**
+ * 地址是否默认
+ * @param {*} data 
+ * @returns 
+ */
+export const addressDefault = (id, data) => request(`/address${id}/default`, { data, method: 'PUT' })
+
+

src/services/login.js

@@ -14,9 +14,18 @@ export const login = (data) => request('/login', { data, method: 'post' })
 export const getUserQcode = (params) => request('/sms-captcha', { method: 'post', params })
 
 /**
-* 验证码登陆
+* 验证码登陆修改
 * @param {*} 
 * @returns 
 */
 
 export const setUserPhone = (id, data) => request(`/person/${id}/phone`, { method: 'put', data })
+
+
+/**
+ * 修改个人信息
+ * @param {*} 
+ * @returns 
+ */
+
+export const updateInfo = (id, data) => request(`/person/${id}`, { method: 'put', data })