现代JavaScript技术-趣学前端

Appearance

本页目录

11. 其他页面 ​

11.1 账号管理 ​

静态页面结构

vue
<view class="setting-box">
    <view class="input-item">
        <!-- 输入框组 -->
        <van-cell-group>
            <van-field data-name="nickName" :value="nickName" @change="handleValue" label="昵称" />
            <van-field data-name="introduceSign" :value="introduceSign" @change="handleValue" label="个性签名" />
            <van-field data-name="password" :value="password" @change="handleValue" type="password" label="修改密码" />
        </van-cell-group>
    </view>

    <van-button round class="save-btn" color="#1baeae" type="primary" @click="save" block>保存</van-button>
</view>

UI样式

scss
.van-button {
	width: 80% !important;
	margin: 20px auto;
}

JS逻辑

js
// 输入框双向绑定 **
const handleValue = e => {
	const { name } = e.target.dataset
	const value = e.detail
	state[name] = value
}

const save = async () => {
	const params = {
		introduceSign: state.introduceSign,
		nickName: state.nickName
	}
	if (state.password) {
		params.passwordMd5 = md5(state.password)
	} 
	await EditUserInfo(params)
	await userStore.updateUserinfo()
	uni.$Toast('保存成功')
}

// 页面加载
onLoad(message => {
	state.nickName = userStore.userinfo.nickName
	state.introduceSign = userStore.userinfo.introduceSign
})

11.2 地址管理 ​

我的页面跳转时 取消地址选择功能

  • 跳转传值

    js
    // 跳转
const goTo = (path) => {
	if (!userStore.userinfo.nickName) return uni.$Toast('请先登录')
	uni.navigateTo({ url: path })
}

  • 判断值

    js
    // 页面加载
onLoad((message) => {
	// 1. 获取来源
	const { from = '' }= message
	state.from = from
})

// * 选择地址
const select = (id) => {
	// 来源为mine我的 则不进行跳转
	if (state.from === 'mine') return
	cartStore.addressId = id
	uni.navigateBack({ url: `/subpkg/createOrder/createOrder` })
}