|
|
@@ -137,200 +137,96 @@ import {router} from '../../router'
|
|
|
|
|
|
<template>
|
|
|
|
|
|
+ <el-container>
|
|
|
|
|
|
- <div class="flex items-center justify-center p-8 h-full overflow-y-clip space-x-5">
|
|
|
- <el-aside width="20%" class="h-full bg-gray-100 rounded-lg flex flex-col items-center justify-between">
|
|
|
+ <el-aside width="20%">
|
|
|
|
|
|
- <div class="py-6 h-1/2 w-full flex flex-col space-y-6 items-center justify-center border-b-2 border-gray-200">
|
|
|
- <el-avatar :size="150" class="block">
|
|
|
- <span class="text-3xl"> 头像 </span>
|
|
|
+ <div>
|
|
|
+ <el-avatar :size="100">
|
|
|
+ <span> 头像 </span>
|
|
|
</el-avatar>
|
|
|
|
|
|
- <label v-if="isCustomer"
|
|
|
- class="w-2/5 px-3 py-2 text-center bg-primary-400 rounded-3xl text-white">顾客</label>
|
|
|
- <label v-else-if="isStaff"
|
|
|
- class="w-3/5 px-3 py-2 text-center bg-amber-500 rounded-3xl text-white">工作人员</label>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <div class="bg-gray-50 px-3 py-4 overflow-y-scroll h-full w-full flex flex-col items-center justify-start shadow-md space-y-5">
|
|
|
-
|
|
|
- <ul class="space-y-3 font-medium">
|
|
|
- <li>
|
|
|
- <router-link to="" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
|
|
|
- <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
|
- <path d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"/>
|
|
|
- </svg>
|
|
|
- <span class="flex-1 ms-3 whitespace-nowrap">私聊信箱</span>
|
|
|
-<!-- <span class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">-->
|
|
|
-<!-- 3-->
|
|
|
-<!-- </span>-->
|
|
|
- </router-link>
|
|
|
- </li>
|
|
|
-
|
|
|
-
|
|
|
- <li>
|
|
|
- <router-link to="" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
|
|
|
- <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
|
|
- <path d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"/>
|
|
|
- </svg>
|
|
|
- <span class="flex-1 ms-3 whitespace-nowrap">已收藏商品</span>
|
|
|
- </router-link>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <router-link to="" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
|
|
|
- <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 16">
|
|
|
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"/>
|
|
|
- </svg>
|
|
|
- <span class="flex-1 ms-3 whitespace-nowrap">关注店铺</span>
|
|
|
- </router-link>
|
|
|
- </li>
|
|
|
-
|
|
|
- </ul>
|
|
|
-
|
|
|
-
|
|
|
- <ul class="pt-4 space-y-3 font-medium border-t border-gray-200">
|
|
|
-
|
|
|
-
|
|
|
- <li>
|
|
|
- <router-link to="" class="flex items-center p-2 text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white group">
|
|
|
- <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
|
|
|
- <path d="M16 14V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 0 0 0-2h-1v-2a2 2 0 0 0 2-2ZM4 2h2v12H4V2Zm8 16H3a1 1 0 0 1 0-2h9v2Z"/>
|
|
|
- </svg>
|
|
|
- <span class="ms-3">使用帮助</span>
|
|
|
- </router-link>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <router-link to="" class="flex items-center p-2 text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white group">
|
|
|
- <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 21 21">
|
|
|
- <path d="m5.4 2.736 3.429 3.429A5.046 5.046 0 0 1 10.134 6c.356.01.71.06 1.056.147l3.41-3.412c.136-.133.287-.248.45-.344A9.889 9.889 0 0 0 10.269 1c-1.87-.041-3.713.44-5.322 1.392a2.3 2.3 0 0 1 .454.344Zm11.45 1.54-.126-.127a.5.5 0 0 0-.706 0l-2.932 2.932c.029.023.049.054.078.077.236.194.454.41.65.645.034.038.078.067.11.107l2.927-2.927a.5.5 0 0 0 0-.707Zm-2.931 9.81c-.024.03-.057.052-.081.082a4.963 4.963 0 0 1-.633.639c-.041.036-.072.083-.115.117l2.927 2.927a.5.5 0 0 0 .707 0l.127-.127a.5.5 0 0 0 0-.707l-2.932-2.931Zm-1.442-4.763a3.036 3.036 0 0 0-1.383-1.1l-.012-.007a2.955 2.955 0 0 0-1-.213H10a2.964 2.964 0 0 0-2.122.893c-.285.29-.509.634-.657 1.013l-.01.016a2.96 2.96 0 0 0-.21 1 2.99 2.99 0 0 0 .489 1.716c.009.014.022.026.032.04a3.04 3.04 0 0 0 1.384 1.1l.012.007c.318.129.657.2 1 .213.392.015.784-.05 1.15-.192.012-.005.02-.013.033-.018a3.011 3.011 0 0 0 1.676-1.7v-.007a2.89 2.89 0 0 0 0-2.207 2.868 2.868 0 0 0-.27-.515c-.007-.012-.02-.025-.03-.039Zm6.137-3.373a2.53 2.53 0 0 1-.35.447L14.84 9.823c.112.428.166.869.16 1.311-.01.356-.06.709-.147 1.054l3.413 3.412c.132.134.249.283.347.444A9.88 9.88 0 0 0 20 11.269a9.912 9.912 0 0 0-1.386-5.319ZM14.6 19.264l-3.421-3.421c-.385.1-.781.152-1.18.157h-.134c-.356-.01-.71-.06-1.056-.147l-3.41 3.412a2.503 2.503 0 0 1-.443.347A9.884 9.884 0 0 0 9.732 21H10a9.9 9.9 0 0 0 5.044-1.388 2.519 2.519 0 0 1-.444-.348ZM1.735 15.6l3.426-3.426a4.608 4.608 0 0 1-.013-2.367L1.735 6.4a2.507 2.507 0 0 1-.35-.447 9.889 9.889 0 0 0 0 10.1c.1-.164.217-.316.35-.453Zm5.101-.758a4.957 4.957 0 0 1-.651-.645c-.033-.038-.077-.067-.11-.107L3.15 17.017a.5.5 0 0 0 0 .707l.127.127a.5.5 0 0 0 .706 0l2.932-2.933c-.03-.018-.05-.053-.078-.076ZM6.08 7.914c.03-.037.07-.063.1-.1.183-.22.384-.423.6-.609.047-.04.082-.092.129-.13L3.983 4.149a.5.5 0 0 0-.707 0l-.127.127a.5.5 0 0 0 0 .707L6.08 7.914Z"/>
|
|
|
- </svg>
|
|
|
- <span class="ms-3">建议与反馈</span>
|
|
|
- </router-link>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <router-link to="" class="flex items-center p-2 text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white group">
|
|
|
- <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
|
|
|
- <path d="M18 0H6a2 2 0 0 0-2 2h14v12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z"/>
|
|
|
- <path d="M14 4H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM2 16v-6h12v6H2Z"/>
|
|
|
- </svg>
|
|
|
- <span class="ms-3">关于我们</span>
|
|
|
- </router-link>
|
|
|
- </li>
|
|
|
-
|
|
|
- </ul>
|
|
|
+ <label v-if="isCustomer">顾客</label>
|
|
|
+ <label v-else-if="isStaff">工作人员</label>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-aside>
|
|
|
|
|
|
|
|
|
- <div class="flex flex-col h-full w-full rounded-lg space-y-4 overflow-y-scroll">
|
|
|
+ <el-main>
|
|
|
|
|
|
- <div class="h-auto bg-gray-50 rounded-lg">
|
|
|
+ <el-card>
|
|
|
|
|
|
- <div class="flex flex-row justify-between px-3 py-2 rounded-t-lg bg-gray-100 border-b-2 border-gray-200">
|
|
|
- <span class="ml-1 text-2xl font-semibold text-center">个人信息</span>
|
|
|
- <button type="submit" @click="updateInfo"
|
|
|
- class="inline text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-2xl text-xs px-4 py-2 text-center">更新</button>
|
|
|
+ <div>
|
|
|
+ <span>个人信息</span>
|
|
|
+ <el-button type="submit" @click="updateInfo">更新</el-button>
|
|
|
</div>
|
|
|
|
|
|
- <form class="m-3">
|
|
|
- <div class="grid gap-6 mb-6 grid-cols-2 mx-4">
|
|
|
+ <form>
|
|
|
+ <div>
|
|
|
<div>
|
|
|
- <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">昵称</label>
|
|
|
- <input type="text" id="name" v-model="name"
|
|
|
- class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
|
|
|
+ <label for="name" >昵称</label>
|
|
|
+ <el-input type="text" id="name" v-model="name" />
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
- <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">手机号</label>
|
|
|
- <input type="tel" id="phone" v-model="tel" disabled
|
|
|
- class="disabled:bg-gray-100 disabled:text-gray-400 bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
|
|
|
+ <label for="phone" >手机号</label>
|
|
|
+ <el-input type="tel" id="phone" v-model="tel" disabled />
|
|
|
</div>
|
|
|
-
|
|
|
-<!-- <div>-->
|
|
|
-<!-- <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">邮箱</label>-->
|
|
|
-<!-- <input type="email" id="email" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">-->
|
|
|
-<!-- </div>-->
|
|
|
</div>
|
|
|
</form>
|
|
|
- </div>
|
|
|
+ </el-card>
|
|
|
|
|
|
- <div class="h-auto bg-gray-50 rounded-lg">
|
|
|
|
|
|
- <div class="flex flex-row justify-between px-3 py-2 rounded-t-lg bg-gray-100 border-b-2 border-gray-200">
|
|
|
- <span class="ml-1 text-2xl font-semibold text-center">密码</span>
|
|
|
- <button type="submit" @click="updatePassword" :disabled="!hasConfirmPasswordInput || !isPasswordIdentical"
|
|
|
- class="inline text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-3xl text-xs px-4 py-2 text-center disabled:bg-primary-100">更新</button>
|
|
|
+ <el-card>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <span >密码</span>
|
|
|
+ <el-button type="submit" @click="updatePassword" :disabled="!hasConfirmPasswordInput || !isPasswordIdentical">更新</el-button>
|
|
|
</div>
|
|
|
|
|
|
- <form class="m-3">
|
|
|
- <div class="grid grid-cols-2 gap-10 mb-6 mx-4">
|
|
|
- <div>
|
|
|
- <label for="password" class="block mb-2 text-sm font-medium text-gray-900">密码</label>
|
|
|
- <input type="password" id="password" v-model="password"
|
|
|
- class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="•••••••••" required>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <label v-if="!hasConfirmPasswordInput" for="confirm_password" class="block mb-2 text-sm font-medium text-gray-900">确认密码</label>
|
|
|
- <label v-else-if="!isPasswordIdentical" for="confirm_password" class="block mb-2 text-sm font-medium text-red-600 ">密码不一致</label>
|
|
|
- <label v-else for="confirm_password" class="block mb-2 text-sm font-medium text-gray-900">确认密码</label>
|
|
|
+ <el-form>
|
|
|
+ <el-form-item>
|
|
|
+ <label for="password">密码</label>
|
|
|
+ <el-input type="password" id="password" v-model="password" placeholder="•••••••••" required />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <label v-if="!hasConfirmPasswordInput" for="confirm_password" >确认密码</label>
|
|
|
+ <label v-else-if="!isPasswordIdentical" for="confirm_password">密码不一致</label>
|
|
|
+ <label v-else for="confirm_password">确认密码</label>
|
|
|
|
|
|
- <input type="password" id="confirm_password" v-model="confirmPassword"
|
|
|
- :class="{'focus:outline-red-600': hasConfirmPasswordInput && !isPasswordIdentical}"
|
|
|
- class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="•••••••••" required>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
+ <el-input type="password" id="confirm_password" v-model="confirmPassword" placeholder="•••••••••" required />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
|
|
|
- </div>
|
|
|
|
|
|
- <div class="h-full bg-gray-50 rounded-lg flex flex-col">
|
|
|
+ <el-card>
|
|
|
|
|
|
- <div class="flex flex-row justify-between px-3 py-2 rounded-t-lg bg-gray-100 border-b-2 border-gray-200">
|
|
|
- <span class="ml-1 text-2xl font-semibold text-center">地址信息</span>
|
|
|
- <button @click="updateAddress"
|
|
|
- class="block text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-3xl text-xs px-4 py-2 text-center" type="button">
|
|
|
+ <div>
|
|
|
+ <span>地址信息</span>
|
|
|
+ <el-button @click="updateAddress" type="button">
|
|
|
更新地址
|
|
|
- </button>
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
|
|
|
- <div class="p-5 flex flex-col h-full">
|
|
|
-<!-- <label for="address" class="block mt-2 mb-2 text-sm font-medium text-gray-900">默认地址</label>-->
|
|
|
+ <div>
|
|
|
<textarea id="address"
|
|
|
- v-model="address"
|
|
|
- class="overflow-auto block p-3 h-full w-full text-xl text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" placeholder="中华门"></textarea>
|
|
|
+ v-model="address" placeholder="中华门"></textarea>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
+ </el-card>
|
|
|
|
|
|
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </el-main>
|
|
|
|
|
|
+ </el-container>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
-<style>
|
|
|
-
|
|
|
-.customMessage {
|
|
|
- @apply rounded-2xl text-3xl font-bold
|
|
|
-}
|
|
|
-
|
|
|
-.customDialog {
|
|
|
- @apply w-1/4 space-y-5 text-4xl font-semibold rounded-2xl pb-5 pt-2
|
|
|
-}
|
|
|
-
|
|
|
-</style>
|
|
|
-
|
|
|
|
|
|
<style scoped>
|
|
|
|
Nivek