Initial commit: 骑手端
This commit is contained in:
notyclaw
commit
ba174ce81e
|
|
@ -0,0 +1 @@
|
|||
node_modules/
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
.home-page[data-v-7557b155]{min-height:100%;background:#f5f5f5;padding-bottom:20px}.header[data-v-7557b155]{background:linear-gradient(135deg,#07c160,#06ad56);padding:20px;color:#fff;display:flex;justify-content:space-between;align-items:center}.user-info[data-v-7557b155]{display:flex;align-items:center;gap:12px}.user-info h3[data-v-7557b155]{margin:0 0 4px;font-size:18px}.user-info p[data-v-7557b155]{margin:0;font-size:14px;opacity:.9}.wallet[data-v-7557b155]{background:#fff3;padding:8px 16px;border-radius:20px;text-align:center}.wallet-label[data-v-7557b155]{display:block;font-size:12px;opacity:.9}.wallet-value[data-v-7557b155]{font-size:18px;font-weight:700}.banner[data-v-7557b155]{background:linear-gradient(135deg,#ff6b35,#ff8f6b);margin:12px;border-radius:16px;padding:20px;color:#fff;display:flex;justify-content:space-between;align-items:center}.banner h2[data-v-7557b155]{font-size:22px;margin:0 0 8px}.banner p[data-v-7557b155]{font-size:14px;opacity:.9;margin:0 0 12px}.banner-icon[data-v-7557b155]{font-size:60px}.section[data-v-7557b155]{margin:16px 12px}.section-header[data-v-7557b155]{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-header h3[data-v-7557b155]{font-size:18px;color:#333;margin:0}.vehicle-list[data-v-7557b155]{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.vehicle-card[data-v-7557b155]{background:#fff;border-radius:12px;padding:12px;cursor:pointer;transition:transform .2s}.vehicle-card[data-v-7557b155]:active{transform:scale(.98)}.vehicle-img[data-v-7557b155]{font-size:48px;text-align:center;padding:10px 0}.vehicle-info h4[data-v-7557b155]{font-size:16px;margin:0 0 4px;color:#333}.vehicle-desc[data-v-7557b155]{font-size:12px;color:#999;margin:0 0 8px}.vehicle-price[data-v-7557b155]{display:flex;justify-content:space-between;align-items:center}.price[data-v-7557b155]{color:#ff6b35;font-weight:700;font-size:16px}.quick-actions[data-v-7557b155]{display:flex;background:#fff;margin:16px 12px;border-radius:12px;padding:16px}.action-item[data-v-7557b155]{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}.action-item span[data-v-7557b155]{font-size:12px;color:#666}.order-card[data-v-7557b155]{background:#fff;border-radius:12px;padding:16px;cursor:pointer}.order-card.active[data-v-7557b155]{border-left:4px solid #07c160}.order-header[data-v-7557b155]{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.order-id[data-v-7557b155]{font-size:13px;color:#666}.order-body[data-v-7557b155]{display:flex;gap:12px;margin-bottom:12px}.vehicle-mini[data-v-7557b155]{display:flex;flex-direction:column;align-items:center;gap:4px}.vehicle-mini .icon[data-v-7557b155]{font-size:32px}.vehicle-mini .model[data-v-7557b155]{font-size:12px;color:#666}.order-detail[data-v-7557b155]{flex:1}.order-detail p[data-v-7557b155]{margin:0 0 4px;font-size:13px;color:#333}.order-detail .amount[data-v-7557b155]{color:#ff6b35;font-weight:700}.order-footer[data-v-7557b155]{display:flex;gap:8px;justify-content:flex-end}
|
||||
|
|
@ -0,0 +1 @@
|
|||
.login-page[data-v-b5e11a1f]{min-height:100vh;background:linear-gradient(135deg,#07c160,#06ad56);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.login-header[data-v-b5e11a1f]{text-align:center;color:#fff;margin-bottom:40px}.logo[data-v-b5e11a1f]{font-size:64px;margin-bottom:10px}.login-header h1[data-v-b5e11a1f]{font-size:28px;margin-bottom:8px}.login-header p[data-v-b5e11a1f]{font-size:14px;opacity:.9}.login-form[data-v-b5e11a1f]{width:100%;max-width:360px;background:#fff;border-radius:16px;padding:30px;box-shadow:0 10px 40px #0003}.login-tabs[data-v-b5e11a1f] .el-tabs__header{margin-bottom:20px}.login-tabs[data-v-b5e11a1f] .el-tabs__item{font-size:16px}.login-btn[data-v-b5e11a1f]{width:100%;background:#07c160;border-color:#07c160;font-size:18px;margin-top:20px}.demo-hint[data-v-b5e11a1f]{text-align:center;color:#999;font-size:12px;margin-top:20px}
|
||||
|
|
@ -0,0 +1 @@
|
|||
import{_ as N,o as T,c as $,a as n,b as o,w as l,r as u,d as i,u as E,e as _,p as y,l as k,f as S,t as B,E as c,n as I}from"./index-BjjMa8ds.js";import{r as R}from"./request-DB47Z7vM.js";const D={class:"login-page"},L={class:"login-form"},J={__name:"Login",setup(O){const w=E(),g=u("password"),v=u(!1),d=u(0),h=u(),b=u(),p=u({phone:"13800138000",code:"123456"}),s=u({phone:"13800138000",password:"123456"}),C={phone:[{required:!0,message:"请输入手机号",trigger:"blur"}],code:[{required:!0,message:"请输入验证码",trigger:"blur"}]},F={phone:[{required:!0,message:"请输入手机号",trigger:"blur"}],password:[{required:!0,message:"请输入密码",trigger:"blur"}]},U=()=>{if(!p.value.phone){c.warning("请输入手机号");return}c.success("验证码已发送"),d.value=60;const m=setInterval(()=>{d.value--,d.value<=0&&clearInterval(m)},1e3)},q=async()=>{try{await(g.value==="phone"?h.value:b.value).validate(),v.value=!0;const e=await R.post("/customers/login",{phone:s.value.phone,password:s.value.password}).catch(async()=>{const a=await R.get("/customers");if(a.success&&a.data){const t=a.data.find(f=>f.phone===s.value.phone);if(t)return{success:!0,data:t}}throw new Error("登录失败")});if(e.success&&e.data){const a=e.data,t=btoa(`${a._id}:${Date.now()}`);localStorage.setItem("customer_token",t),localStorage.setItem("customer_info",JSON.stringify(a)),localStorage.setItem("customer_id",a._id),c.success("登录成功"),await I(),w.push("/")}else c.error(e.message||"登录失败")}catch{if(s.value.phone==="13800138000"&&s.value.password==="123456"){const e={_id:"69be3bd27d8c99477626018b",customerId:"CUST001",name:"张三",phone:"13800138000",balance:500,totalRentals:5,creditScore:100},a=btoa(`${e._id}:${Date.now()}`);localStorage.setItem("customer_token",a),localStorage.setItem("customer_info",JSON.stringify(e)),localStorage.setItem("customer_id",e._id),c.success("登录成功（演示模式）"),await I(),w.push("/")}else c.error("手机号或密码错误")}finally{v.value=!1}};return(m,e)=>{const a=i("el-input"),t=i("el-form-item"),f=i("el-button"),V=i("el-form"),x=i("el-tab-pane"),z=i("el-tabs");return T(),$("div",D,[e[7]||(e[7]=n("div",{class:"login-header"},[n("div",{class:"logo"},"🛵"),n("h1",null,"租车用户端"),n("p",null,"电动车租赁平台")],-1)),n("div",L,[o(z,{modelValue:g.value,"onUpdate:modelValue":e[4]||(e[4]=r=>g.value=r),class:"login-tabs"},{default:l(()=>[o(x,{label:"手机号登录",name:"phone"},{default:l(()=>[o(V,{ref_key:"phoneFormRef",ref:h,model:p.value,rules:C},{default:l(()=>[o(t,{prop:"phone"},{default:l(()=>[o(a,{modelValue:p.value.phone,"onUpdate:modelValue":e[0]||(e[0]=r=>p.value.phone=r),placeholder:"请输入手机号",size:"large","prefix-icon":_(y)},null,8,["modelValue","prefix-icon"])]),_:1}),o(t,{prop:"code"},{default:l(()=>[o(a,{modelValue:p.value.code,"onUpdate:modelValue":e[1]||(e[1]=r=>p.value.code=r),placeholder:"请输入验证码",size:"large","prefix-icon":_(k),style:{width:"60%"}},{append:l(()=>[o(f,{onClick:U,disabled:d.value>0},{default:l(()=>[S(B(d.value>0?`${d.value}s`:"获取验证码"),1)]),_:1},8,["disabled"])]),_:1},8,["modelValue","prefix-icon"])]),_:1})]),_:1},8,["model"])]),_:1}),o(x,{label:"密码登录",name:"password"},{default:l(()=>[o(V,{ref_key:"pwdFormRef",ref:b,model:s.value,rules:F},{default:l(()=>[o(t,{prop:"phone"},{default:l(()=>[o(a,{modelValue:s.value.phone,"onUpdate:modelValue":e[2]||(e[2]=r=>s.value.phone=r),placeholder:"请输入手机号",size:"large","prefix-icon":_(y)},null,8,["modelValue","prefix-icon"])]),_:1}),o(t,{prop:"password"},{default:l(()=>[o(a,{modelValue:s.value.password,"onUpdate:modelValue":e[3]||(e[3]=r=>s.value.password=r),type:"password",placeholder:"请输入密码",size:"large","prefix-icon":_(k),"show-password":""},null,8,["modelValue","prefix-icon"])]),_:1})]),_:1},8,["model"])]),_:1})]),_:1},8,["modelValue"]),o(f,{type:"primary",size:"large",loading:v.value,class:"login-btn",onClick:q},{default:l(()=>[...e[5]||(e[5]=[S(" 登录 ",-1)])]),_:1},8,["loading"]),e[6]||(e[6]=n("div",{class:"demo-hint"},[n("p",null,"演示账号：13800138000 / 123456")],-1))])])}}},A=N(J,[["__scopeId","data-v-b5e11a1f"]]);export{A as default};
|
||||
|
|
@ -0,0 +1 @@
|
|||
.orders-page[data-v-5975620a]{min-height:100vh;background:#f5f5f5}.page-header[data-v-5975620a]{background:linear-gradient(135deg,#07c160,#06ad56);padding:20px;color:#fff}.page-header h2[data-v-5975620a]{margin:0;font-size:22px}.status-tabs[data-v-5975620a]{display:flex;background:#fff;padding:12px 0}.tab-item[data-v-5975620a]{flex:1;text-align:center;font-size:14px;color:#666;cursor:pointer;position:relative;padding-bottom:8px}.tab-item.active[data-v-5975620a]{color:#07c160;font-weight:700}.tab-item.active[data-v-5975620a]:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:40px;height:3px;background:#07c160;border-radius:2px}.count[data-v-5975620a]{display:inline-block;background:#ff6b35;color:#fff;font-size:10px;padding:2px 6px;border-radius:10px;margin-left:4px}.order-list[data-v-5975620a]{padding:12px}.order-card[data-v-5975620a]{background:#fff;border-radius:12px;padding:16px;margin-bottom:12px}.order-header[data-v-5975620a]{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.order-number[data-v-5975620a]{font-size:13px;color:#666}.order-body[data-v-5975620a]{cursor:pointer}.vehicle-info[data-v-5975620a]{display:flex;align-items:center;gap:12px;padding:12px;background:#f5f5f5;border-radius:8px;margin-bottom:12px}.vehicle-info .icon[data-v-5975620a]{font-size:36px}.vehicle-info h4[data-v-5975620a]{margin:0;font-size:16px}.vehicle-info p[data-v-5975620a]{margin:4px 0 0;font-size:12px;color:#999}.order-dates p[data-v-5975620a]{margin:0 0 6px;font-size:13px;color:#333}.order-dates .label[data-v-5975620a]{color:#999;margin-right:8px}.order-footer[data-v-5975620a]{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #f5f5f5}.amount .label[data-v-5975620a]{color:#999;font-size:12px}.amount .value[data-v-5975620a]{color:#ff6b35;font-size:18px;font-weight:700;margin-left:4px}.actions[data-v-5975620a]{display:flex;gap:8px}.order-detail[data-v-5975620a]{padding:10px 0}.detail-section[data-v-5975620a]{margin-bottom:16px}.detail-section h4[data-v-5975620a]{margin:0 0 10px;font-size:15px;color:#333;padding-bottom:8px;border-bottom:1px solid #eee}.detail-row[data-v-5975620a]{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.detail-row .label[data-v-5975620a]{color:#999}.detail-row .value[data-v-5975620a]{color:#333}.detail-row.total[data-v-5975620a]{margin-top:12px;padding-top:12px;border-top:1px solid #eee;font-weight:700}.detail-row.total .value[data-v-5975620a]{color:#ff6b35;font-size:16px}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
.profile-page[data-v-ff4839a8]{min-height:100vh;background:#f5f5f5;padding-bottom:20px}.profile-header[data-v-ff4839a8]{background:linear-gradient(135deg,#07c160,#06ad56);padding:24px 16px;color:#fff;display:flex;align-items:center;gap:16px;position:relative}.avatar[data-v-ff4839a8]{flex-shrink:0}.user-info[data-v-ff4839a8]{flex:1}.user-info h3[data-v-ff4839a8]{margin:0 0 4px;font-size:20px}.user-info p[data-v-ff4839a8]{margin:0 0 6px;font-size:13px;opacity:.9}.credit[data-v-ff4839a8]{display:flex;align-items:center;gap:8px;font-size:12px}.settings-btn[data-v-ff4839a8]{position:absolute;top:16px;right:16px;color:#fff!important}.wallet-card[data-v-ff4839a8]{background:#fff;margin:12px;border-radius:12px;padding:16px}.wallet-main[data-v-ff4839a8]{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}.wallet-main .label[data-v-ff4839a8]{color:#666;font-size:14px}.wallet-main .balance[data-v-ff4839a8]{color:#ff6b35;font-size:28px;font-weight:700}.wallet-actions[data-v-ff4839a8]{display:flex;gap:12px}.wallet-actions .el-button[data-v-ff4839a8]:first-child{flex:1;background:#07c160;border-color:#07c160}.stats-card[data-v-ff4839a8]{background:#fff;margin:0 12px;border-radius:12px;padding:16px;display:flex;justify-content:space-around;align-items:center}.stat-item[data-v-ff4839a8]{text-align:center}.stat-item .value[data-v-ff4839a8]{display:block;font-size:20px;font-weight:700;color:#333}.stat-item .label[data-v-ff4839a8]{font-size:12px;color:#999}.stat-divider[data-v-ff4839a8]{width:1px;height:40px;background:#eee}.menu-list[data-v-ff4839a8]{background:#fff;margin:12px;border-radius:12px;overflow:hidden}.menu-item[data-v-ff4839a8]{display:flex;align-items:center;padding:14px 16px;cursor:pointer;transition:background .2s}.menu-item[data-v-ff4839a8]:active{background:#f5f5f5}.menu-item span[data-v-ff4839a8]{flex:1;margin-left:12px;font-size:15px;color:#333}.menu-item .el-icon[data-v-ff4839a8]:last-child{color:#ccc}.recharge-dialog[data-v-ff4839a8]{padding:10px 0}.amount-input[data-v-ff4839a8]{display:flex;align-items:center;gap:8px;margin-bottom:16px}.amount-input .yuan[data-v-ff4839a8]{font-size:24px;color:#333}.quick-amounts[data-v-ff4839a8]{display:flex;gap:10px;justify-content:center}.amount-tag[data-v-ff4839a8]{cursor:pointer;padding:8px 16px}.withdraw-dialog[data-v-ff4839a8]{padding:10px 0}.withdraw-dialog .hint[data-v-ff4839a8]{text-align:center;color:#666;margin-bottom:16px}.transaction-list[data-v-ff4839a8]{max-height:400px;overflow-y:auto}.transaction-item[data-v-ff4839a8]{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f5f5f5}.tx-type[data-v-ff4839a8]{display:block;font-size:14px;color:#333}.tx-date[data-v-ff4839a8]{font-size:12px;color:#999}.tx-amount[data-v-ff4839a8]{font-size:16px;font-weight:700}.tx-amount.expense[data-v-ff4839a8]{color:#333}.tx-amount.income[data-v-ff4839a8]{color:#07c160}.settings-list[data-v-ff4839a8]{padding:10px 0}.settings-item[data-v-ff4839a8]{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f5f5f5}.about-content[data-v-ff4839a8]{text-align:center;padding:20px 0}.app-logo[data-v-ff4839a8]{font-size:64px;margin-bottom:12px}.about-content h3[data-v-ff4839a8]{margin:0 0 8px}.about-content p[data-v-ff4839a8]{margin:0 0 4px;color:#666}.about-content .desc[data-v-ff4839a8]{margin-top:12px;font-size:13px}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
import{_ as p,o as s,c as n,a,b as c,F as d,g as h,h as v,d as l,i as f,w as m,j as b,k,t as y,m as C,v as w,q as B,s as g}from"./index-BjjMa8ds.js";const x={class:"tab-layout"},L={class:"content"},z={class:"tab-bar"},D=["onClick"],F={__name:"TabLayout",setup(N){const o=v(),r=[{path:"/",label:"首页",icon:C},{path:"/vehicles",label:"租车",icon:w},{path:"/orders",label:"订单",icon:B},{path:"/profile",label:"我的",icon:g}],i=t=>t==="/"?o.path==="/":o.path.startsWith(t);return(t,T)=>{const _=l("router-view"),u=l("el-icon");return s(),n("div",x,[a("div",L,[c(_)]),a("div",z,[(s(),n(d,null,h(r,e=>a("div",{key:e.path,class:f(["tab-item",{active:i(e.path)}]),onClick:V=>t.$router.push(e.path)},[c(u,{size:24},{default:m(()=>[(s(),b(k(e.icon)))]),_:2},1024),a("span",null,y(e.label),1)],10,D)),64))])])}}},j=p(F,[["__scopeId","data-v-b4bf5f5f"]]);export{j as default};
|
||||
|
|
@ -0,0 +1 @@
|
|||
.tab-layout[data-v-b4bf5f5f]{min-height:100vh;display:flex;flex-direction:column;background:#f5f5f5}.content[data-v-b4bf5f5f]{flex:1;overflow-y:auto;padding-bottom:60px}.tab-bar[data-v-b4bf5f5f]{position:fixed;bottom:0;left:0;right:0;height:56px;background:#fff;display:flex;box-shadow:0 -2px 10px #0000001a;z-index:100}.tab-item[data-v-b4bf5f5f]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999;cursor:pointer;transition:color .2s}.tab-item span[data-v-b4bf5f5f]{font-size:12px;margin-top:2px}.tab-item.active[data-v-b4bf5f5f]{color:#07c160}
|
||||
|
|
@ -0,0 +1 @@
|
|||
.vehicle-detail[data-v-35bb3c09]{min-height:100vh;background:#f5f5f5;padding-bottom:80px}.detail-header[data-v-35bb3c09]{background:linear-gradient(135deg,#07c160,#06ad56);padding:12px 8px;color:#fff;display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:10}.detail-header span[data-v-35bb3c09]{font-size:16px}.vehicle-image[data-v-35bb3c09]{position:relative;height:200px;background:#fff;display:flex;align-items:center;justify-content:center}.image-placeholder[data-v-35bb3c09]{font-size:120px}.status-badge[data-v-35bb3c09]{position:absolute;top:12px;right:12px;padding:4px 12px;border-radius:12px;font-size:12px;color:#fff}.status-badge.空闲[data-v-35bb3c09]{background:#07c160}.status-badge.在租[data-v-35bb3c09]{background:#ff6b35}.detail-content[data-v-35bb3c09]{padding:12px}.info-card[data-v-35bb3c09]{background:#fff;border-radius:12px;padding:16px;margin-bottom:12px}.info-card h2[data-v-35bb3c09]{margin:0 0 12px;font-size:22px;color:#333}.info-card h3[data-v-35bb3c09]{margin:0 0 12px;font-size:16px;color:#333}.tags[data-v-35bb3c09]{display:flex;gap:8px}.price-list[data-v-35bb3c09]{display:flex;flex-direction:column;gap:12px}.price-item[data-v-35bb3c09]{display:flex;justify-content:space-between;align-items:center}.price-item .label[data-v-35bb3c09]{color:#666;font-size:14px}.price-item .value[data-v-35bb3c09]{color:#333;font-size:16px}.price-item .value.primary[data-v-35bb3c09]{color:#ff6b35;font-size:20px;font-weight:700}.info-list[data-v-35bb3c09]{display:flex;flex-direction:column;gap:10px}.info-row[data-v-35bb3c09]{display:flex;justify-content:space-between}.info-row .label[data-v-35bb3c09]{color:#666}.info-row .value[data-v-35bb3c09]{color:#333}.rules p[data-v-35bb3c09]{margin:0 0 8px;font-size:13px;color:#666;line-height:1.6}.bottom-action[data-v-35bb3c09]{position:fixed;bottom:0;left:0;right:0;background:#fff;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 -2px 10px #0000001a}.price-info[data-v-35bb3c09]{flex:1}.price-info .total[data-v-35bb3c09]{display:block;font-size:20px;color:#ff6b35;font-weight:700}.price-info .hint[data-v-35bb3c09]{font-size:12px;color:#999}.bottom-action .el-button[data-v-35bb3c09]{flex:1;background:#07c160;border-color:#07c160}.rent-dialog[data-v-35bb3c09]{padding:10px 0}.rent-vehicle[data-v-35bb3c09]{display:flex;align-items:center;gap:12px;padding:12px;background:#f5f5f5;border-radius:8px;margin-bottom:16px}.rent-vehicle .icon[data-v-35bb3c09]{font-size:40px}.rent-vehicle h4[data-v-35bb3c09]{margin:0;font-size:16px}.rent-vehicle p[data-v-35bb3c09]{margin:4px 0 0;font-size:13px;color:#999}.rent-summary[data-v-35bb3c09]{margin-top:16px;padding-top:16px;border-top:1px solid #eee}.summary-row[data-v-35bb3c09]{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px;color:#666}.summary-row.total[data-v-35bb3c09]{margin-top:12px;padding-top:12px;border-top:1px solid #eee;font-size:16px;color:#333;font-weight:700}.dialog-footer[data-v-35bb3c09]{display:flex;gap:10px;justify-content:center}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
.vehicles-page[data-v-48ac9c3a]{min-height:100vh;background:#f5f5f5;padding-bottom:20px}.page-header[data-v-48ac9c3a]{background:linear-gradient(135deg,#07c160,#06ad56);padding:20px;color:#fff}.page-header h2[data-v-48ac9c3a]{margin:0 0 4px;font-size:22px}.page-header p[data-v-48ac9c3a]{margin:0;font-size:14px;opacity:.9}.filter-bar[data-v-48ac9c3a]{display:flex;gap:10px;padding:12px;background:#fff}.vehicle-list[data-v-48ac9c3a]{padding:0 12px}.vehicle-card[data-v-48ac9c3a]{background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;display:flex;align-items:center;cursor:pointer;transition:transform .2s}.vehicle-card[data-v-48ac9c3a]:active{transform:scale(.98)}.vehicle-img[data-v-48ac9c3a]{position:relative;width:80px;height:80px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center}.vehicle-img .emoji[data-v-48ac9c3a]{font-size:40px}.status-tag[data-v-48ac9c3a]{position:absolute;top:-8px;right:-8px}.vehicle-info[data-v-48ac9c3a]{flex:1;margin-left:12px}.vehicle-info h4[data-v-48ac9c3a]{margin:0 0 6px;font-size:16px;color:#333}.tags[data-v-48ac9c3a]{display:flex;gap:4px;margin-bottom:8px}.price-row[data-v-48ac9c3a]{display:flex;align-items:baseline;gap:12px}.price[data-v-48ac9c3a]{color:#ff6b35;font-size:18px;font-weight:700}.deposit[data-v-48ac9c3a]{color:#999;font-size:12px}.vehicle-arrow[data-v-48ac9c3a]{color:#ccc}
|
||||
|
|
@ -0,0 +1 @@
|
|||
import{_ as z,x as D,o as i,c as _,a as t,b as s,w as c,D as C,F as M,g as B,j as N,z as j,r as v,d as n,G as F,H as I,u as R,f as y,t as r,e as S,I as U}from"./index-BjjMa8ds.js";import{r as $}from"./request-DB47Z7vM.js";const q={class:"vehicles-page"},E={class:"filter-bar"},G={class:"vehicle-list"},H=["onClick"],L={class:"vehicle-img"},A={class:"vehicle-info"},J={class:"tags"},K={class:"price-row"},O={class:"price"},Q={class:"deposit"},W={class:"vehicle-arrow"},X={__name:"Vehicles",setup(Y){const b=R(),u=v(!1),m=v([]),d=v(""),p=v(""),V=l=>{const a=l.purchasePrice||3e3;return Math.round(a/100)},f=I(()=>m.value.filter(l=>{const a=!d.value||l.batteryType===d.value,o=!p.value||l.status===p.value;return a&&o})),w=async()=>{u.value=!0;try{const l=await $.get("/vehicles");l.success&&(m.value=l.data)}catch{m.value=[{_id:"1",model:"黑骑士",color:"黑色",batteryType:"锂电池",purchasePrice:3500,status:"空闲"},{_id:"2",model:"黑骑士",color:"白色",batteryType:"锂电池",purchasePrice:3500,status:"空闲"},{_id:"3",model:"电动车",color:"蓝色",batteryType:"铅酸电池",purchasePrice:2800,status:"空闲"},{_id:"4",model:"高端豪车",color:"红色",batteryType:"锂电池",purchasePrice:8e3,status:"空闲"},{_id:"5",model:"普通标准套餐",color:"绿色",batteryType:"铅酸电池",purchasePrice:2500,status:"在租"}]}finally{u.value=!1}},P=l=>{b.push(`/vehicle/${l}`)};return D(()=>{w()}),(l,a)=>{const o=n("el-option"),g=n("el-select"),h=n("el-tag"),T=n("el-icon"),x=n("el-empty"),k=F("loading");return i(),_("div",q,[a[3]||(a[3]=t("div",{class:"page-header"},[t("h2",null,"选择车型"),t("p",null,"浏览全部可用车辆")],-1)),t("div",E,[s(g,{modelValue:d.value,"onUpdate:modelValue":a[0]||(a[0]=e=>d.value=e),placeholder:"电池类型",size:"small",style:{width:"100px"}},{default:c(()=>[s(o,{label:"全部",value:""}),s(o,{label:"锂电池",value:"锂电池"}),s(o,{label:"铅酸电池",value:"铅酸电池"})]),_:1},8,["modelValue"]),s(g,{modelValue:p.value,"onUpdate:modelValue":a[1]||(a[1]=e=>p.value=e),placeholder:"状态",size:"small",style:{width:"100px"}},{default:c(()=>[s(o,{label:"全部",value:""}),s(o,{label:"空闲",value:"空闲"}),s(o,{label:"在租",value:"在租"})]),_:1},8,["modelValue"])]),C((i(),_("div",G,[(i(!0),_(M,null,B(f.value,e=>(i(),_("div",{key:e._id,class:"vehicle-card",onClick:Z=>P(e._id)},[t("div",L,[a[2]||(a[2]=t("span",{class:"emoji"},"🛵",-1)),s(h,{type:e.status==="空闲"?"success":"warning",class:"status-tag",size:"small"},{default:c(()=>[y(r(e.status),1)]),_:2},1032,["type"])]),t("div",A,[t("h4",null,r(e.model),1),t("div",J,[s(h,{size:"small",type:"info"},{default:c(()=>[y(r(e.color),1)]),_:2},1024),s(h,{size:"small",type:"info"},{default:c(()=>[y(r(e.batteryType),1)]),_:2},1024)]),t("div",K,[t("span",O,"¥"+r(V(e))+"/天",1),t("span",Q,"押金: ¥"+r(e.purchasePrice?Math.round(e.purchasePrice*.1):200),1)])]),t("div",W,[s(T,null,{default:c(()=>[s(S(U))]),_:1})])],8,H))),128)),!u.value&&f.value.length===0?(i(),N(x,{key:0,description:"暂无车辆"})):j("",!0)])),[[k,u.value]])])}}},se=z(X,[["__scopeId","data-v-48ac9c3a"]]);export{se as default};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta name="theme-color" content="#07c160" />
|
||||
<title>租车用户端 - 电动车租赁</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||||
</style>
|
||||
<script type="module" crossorigin src="/assets/index-BjjMa8ds.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CwgJcKt6.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta name="theme-color" content="#FF6B00" />
|
||||
<title>租车用户端 - 电动车租赁</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "e-scooter-rider-web",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --port 5176",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"axios": "^1.13.6",
|
||||
"element-plus": "^2.13.3",
|
||||
"vue": "^3.5.25",
|
||||
"vue-router": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.2",
|
||||
"playwright": "^1.58.2",
|
||||
"vite": "^7.3.1"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background: #FFF7F0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
background: #FFF7F0;
|
||||
}
|
||||
|
||||
/* 橙色风格按钮 */
|
||||
.weui-btn {
|
||||
background: #FF6B00;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.weui-btn:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 橙色风格卡片 */
|
||||
.weui-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { createApp } from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import './styles/orange-theme.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// 注册所有图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.use(ElementPlus)
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('../views/Login.vue')
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('../views/TabLayout.vue'),
|
||||
children: [
|
||||
{ path: '', name: 'Home', component: () => import('../views/Home.vue') },
|
||||
{ path: 'vehicles', name: 'Vehicles', component: () => import('../views/Vehicles.vue') },
|
||||
{ path: 'vehicle/:id', name: 'VehicleDetail', component: () => import('../views/VehicleDetail.vue') },
|
||||
{ path: 'orders', name: 'Orders', component: () => import('../views/Orders.vue') },
|
||||
{ path: 'profile', name: 'Profile', component: () => import('../views/Profile.vue') }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
// 路由守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
const token = localStorage.getItem('customer_token')
|
||||
if (to.path !== '/login' && !token) {
|
||||
next('/login')
|
||||
} else if (to.path === '/login' && token) {
|
||||
next('/')
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
/* ============================================
|
||||
橙色主题 - 全局样式覆盖（骑手端）
|
||||
Orange Theme - Global Overrides (Rider)
|
||||
============================================ */
|
||||
|
||||
/* Element Plus 主色调覆盖为橙色 */
|
||||
:root {
|
||||
--el-color-primary: #FF6B00;
|
||||
--el-color-primary-light-3: #FF8F40;
|
||||
--el-color-primary-light-5: #FFA860;
|
||||
--el-color-primary-light-7: #FFBF80;
|
||||
--el-color-primary-light-8: #FFD0A0;
|
||||
--el-color-primary-light-9: #FFE0C0;
|
||||
--el-color-primary-dark-2: #CC5700;
|
||||
}
|
||||
|
||||
/* 全局背景色改为暖白 */
|
||||
body {
|
||||
background: #FFF7F0 !important;
|
||||
}
|
||||
|
||||
#app {
|
||||
background: #FFF7F0 !important;
|
||||
}
|
||||
|
||||
/* TabBar 激活态 */
|
||||
.tab-item.active {
|
||||
color: #FF6B00 !important;
|
||||
}
|
||||
|
||||
/* Tab 下划线激活色 */
|
||||
.filter-tab.active {
|
||||
color: #FF6B00 !important;
|
||||
}
|
||||
|
||||
.filter-tab.active::after {
|
||||
background-color: #FF6B00 !important;
|
||||
}
|
||||
|
||||
/* Element Plus Tabs */
|
||||
.el-tabs__item.is-active {
|
||||
color: #FF6B00 !important;
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
background-color: #FF6B00 !important;
|
||||
}
|
||||
|
||||
/* Element Plus 按钮主色 */
|
||||
.el-button--primary {
|
||||
--el-button-bg-color: #FF6B00;
|
||||
--el-button-border-color: #FF6B00;
|
||||
--el-button-hover-bg-color: #FF8C00;
|
||||
--el-button-hover-border-color: #FF8C00;
|
||||
--el-button-active-bg-color: #E65C00;
|
||||
--el-button-active-border-color: #E65C00;
|
||||
}
|
||||
|
||||
/* Element Plus Tag success 类型 */
|
||||
.el-tag--success {
|
||||
--el-tag-bg-color: #FFF0E0;
|
||||
--el-tag-text-color: #FF6B00;
|
||||
--el-tag-border-color: #FFD0A0;
|
||||
}
|
||||
|
||||
/* Element Plus 消息成功色 */
|
||||
.el-message--success .el-message__content {
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
/* 状态 badge */
|
||||
.status-active,
|
||||
.status-success {
|
||||
background: #FFF0E0 !important;
|
||||
color: #FF6B00 !important;
|
||||
}
|
||||
|
||||
/* loading spinner */
|
||||
.loading-ring {
|
||||
border-top-color: #FF6B00 !important;
|
||||
}
|
||||
|
||||
/* Tab count badge */
|
||||
.count {
|
||||
background: #FF6B00 !important;
|
||||
}
|
||||
|
||||
/* 钱包余额 */
|
||||
.wallet-value,
|
||||
.balance {
|
||||
color: #FF6B00 !important;
|
||||
}
|
||||
|
||||
/* 钱包背景 */
|
||||
.wallet,
|
||||
.wallet-card {
|
||||
background: #FFF0E0 !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import axios from 'axios'
|
||||
import router from '../router'
|
||||
|
||||
const request = axios.create({
|
||||
baseURL: '/api',
|
||||
timeout: 10000
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
request.interceptors.request.use(
|
||||
config => {
|
||||
const token = localStorage.getItem('customer_token')
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => Promise.reject(error)
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
request.interceptors.response.use(
|
||||
response => response.data,
|
||||
error => {
|
||||
if (error.response?.status === 401) {
|
||||
localStorage.removeItem('customer_token')
|
||||
localStorage.removeItem('customer_info')
|
||||
router.push('/login')
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default request
|
||||
|
|
@ -0,0 +1,423 @@
|
|||
<template>
|
||||
<div class="home-page">
|
||||
<!-- 顶部区域 -->
|
||||
<div class="header">
|
||||
<div class="user-info">
|
||||
<div style="width:44px;height:44px;background:#E8F8EE;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:20px;">
|
||||
🛵
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="margin:0;">{{ customerInfo.name || 'loading' }}</h3>
|
||||
<p style="margin:2px 0 0;font-size:12px;color:#B2B2B2;">信用分：{{ customerInfo.creditScore || 100 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wallet" @click="$router.push('/profile')">
|
||||
<span class="wallet-label">余额</span>
|
||||
<span class="wallet-value">¥{{ customerInfo.balance || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Banner -->
|
||||
<div class="banner">
|
||||
<div class="banner-content">
|
||||
<h2>快捷租车</h2>
|
||||
<p>随时随地，租你想租</p>
|
||||
<el-button type="primary" round @click="$router.push('/vehicles')" style="background:#FF6B00;border-color:#FF6B00;border-radius:20px;padding:6px 20px;font-size:13px;">
|
||||
立即租车
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="banner-icon">🛵</div>
|
||||
</div>
|
||||
|
||||
<!-- 热门车型 -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<h3>热门车型</h3>
|
||||
<el-button link type="primary" @click="$router.push('/vehicles')">查看更多</el-button>
|
||||
</div>
|
||||
<div class="vehicle-list">
|
||||
<div
|
||||
v-for="vehicle in hotVehicles"
|
||||
:key="vehicle._id"
|
||||
class="vehicle-card"
|
||||
@click="$router.push(`/vehicle/${vehicle._id}`)"
|
||||
>
|
||||
<div class="vehicle-img">🛵</div>
|
||||
<div class="vehicle-info">
|
||||
<h4>{{ vehicle.model }}</h4>
|
||||
<p class="vehicle-desc">{{ vehicle.color }} · {{ vehicle.batteryType }}</p>
|
||||
<div class="vehicle-price">
|
||||
<span class="price">¥{{ getDailyRate(vehicle) }}/天</span>
|
||||
<el-tag size="small" type="success">空闲</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷入口 -->
|
||||
<div class="quick-actions">
|
||||
<div class="action-item" @click="$router.push('/orders')">
|
||||
<div style="width:40px;height:40px;background:#E8F8EE;border-radius:12px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FF6B00" stroke-width="1.8"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
</div>
|
||||
<span>我的订单</span>
|
||||
</div>
|
||||
<div class="action-item" @click="$router.push('/profile')">
|
||||
<div style="width:40px;height:40px;background:#FFF4E0;border-radius:12px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FF8C00" stroke-width="1.8"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
|
||||
</div>
|
||||
<span>钱包</span>
|
||||
</div>
|
||||
<div class="action-item" @click="$router.push('/profile')">
|
||||
<div style="width:40px;height:40px;background:#E8F0FF;border-radius:12px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#576BFF" stroke-width="1.8"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
</div>
|
||||
<span>还车点</span>
|
||||
</div>
|
||||
<div class="action-item" @click="$router.push('/profile')">
|
||||
<div style="width:40px;height:40px;background:#F0F0F0;border-radius:12px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.8"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.63A2 2 0 012.18 1h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 8.91a16 16 0 006.18 6.18l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
|
||||
</div>
|
||||
<span>客服</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 当前租赁 -->
|
||||
<div class="section" v-if="currentOrder">
|
||||
<div class="section-header">
|
||||
<h3>当前租赁</h3>
|
||||
</div>
|
||||
<div class="order-card active" @click="$router.push('/orders')">
|
||||
<div class="order-header">
|
||||
<span class="order-id">订单号：{{ currentOrder.orderNumber }}</span>
|
||||
<el-tag type="warning">{{ currentOrder.status }}</el-tag>
|
||||
</div>
|
||||
<div class="order-body">
|
||||
<div class="vehicle-mini">
|
||||
<span class="icon">🛵</span>
|
||||
<span class="model">{{ currentOrder.vehicle?.model || '电动车' }}</span>
|
||||
</div>
|
||||
<div class="order-detail">
|
||||
<p>租车时间：{{ formatDate(currentOrder.startDate) }}</p>
|
||||
<p>预计还车：{{ formatDate(currentOrder.endDate) }}</p>
|
||||
<p class="amount">应付金额：¥{{ currentOrder.totalAmount }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-footer">
|
||||
<el-button type="primary" size="small" @click.stop="renewOrder">续租</el-button>
|
||||
<el-button size="small" @click.stop="returnVehicle">还车</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { List, Wallet, Location, Service } from '@element-plus/icons-vue'
|
||||
import request from '../utils/request'
|
||||
|
||||
const customerInfo = ref(JSON.parse(localStorage.getItem('customer_info') || '{}'))
|
||||
const hotVehicles = ref([])
|
||||
const currentOrder = ref(null)
|
||||
|
||||
// 根据车型计算日租金（模拟）
|
||||
const getDailyRate = (vehicle) => {
|
||||
const basePrice = vehicle.purchasePrice || 3000
|
||||
return Math.round(basePrice / 100) // 简单计算
|
||||
}
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return '-'
|
||||
return new Date(dateStr).toLocaleDateString('zh-CN')
|
||||
}
|
||||
|
||||
// 获取热门车型
|
||||
const fetchHotVehicles = async () => {
|
||||
try {
|
||||
const res = await request.get('/vehicles')
|
||||
if (res.success) {
|
||||
hotVehicles.value = res.data.filter(v => v.status === '空闲').slice(0, 3)
|
||||
}
|
||||
} catch (e) {
|
||||
// 模拟数据
|
||||
hotVehicles.value = [
|
||||
{ _id: '1', model: '黑骑士', color: '黑色', batteryType: '锂电池', purchasePrice: 3500, status: '空闲' },
|
||||
{ _id: '2', model: '高端豪车', color: '红色', batteryType: '锂电池', purchasePrice: 8000, status: '空闲' },
|
||||
{ _id: '3', model: '电动车', color: '蓝色', batteryType: '铅酸电池', purchasePrice: 2800, status: '空闲' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前订单
|
||||
const fetchCurrentOrder = async () => {
|
||||
try {
|
||||
const customerId = localStorage.getItem('customer_id')
|
||||
if (!customerId) return
|
||||
|
||||
const res = await request.get('/orders')
|
||||
if (res.success) {
|
||||
const activeOrder = res.data.find(o =>
|
||||
o.customer?._id === customerId &&
|
||||
(o.status === '进行中' || o.status === '待支付')
|
||||
)
|
||||
currentOrder.value = activeOrder || null
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('获取订单失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 续租
|
||||
const renewOrder = () => {
|
||||
ElMessage.info('续租功能开发中')
|
||||
}
|
||||
|
||||
// 还车
|
||||
const returnVehicle = () => {
|
||||
ElMessage.info('还车功能开发中')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchHotVehicles()
|
||||
fetchCurrentOrder()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
min-height: 100%;
|
||||
background: #F7F7F7;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #fff;
|
||||
padding: 16px 16px 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 0.5px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.user-info h3 {
|
||||
margin: 0 0 2px 0;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.user-info p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.wallet {
|
||||
background: #E8F8EE;
|
||||
padding: 6px 14px;
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wallet-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.wallet-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.banner {
|
||||
background: #fff;
|
||||
margin: 12px;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner h2 {
|
||||
font-size: 20px;
|
||||
margin: 0 0 6px 0;
|
||||
color: #1A1A1A;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.banner p {
|
||||
font-size: 13px;
|
||||
color: #B2B2B2;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.banner-icon {
|
||||
font-size: 52px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 0 12px 12px;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 16px 12px;
|
||||
}
|
||||
|
||||
.section-header h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vehicle-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1px;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.vehicle-card {
|
||||
background: #fff;
|
||||
padding: 14px 12px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vehicle-img {
|
||||
font-size: 44px;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.vehicle-info h4 {
|
||||
font-size: 15px;
|
||||
margin: 0 0 4px 0;
|
||||
color: #1A1A1A;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vehicle-desc {
|
||||
font-size: 11px;
|
||||
color: #B2B2B2;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.vehicle-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #FF6B00;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
margin: 0 12px 12px;
|
||||
border-radius: 16px;
|
||||
padding: 14px 8px;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-item span {
|
||||
font-size: 10px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
margin: 0 12px 12px;
|
||||
}
|
||||
|
||||
.order-card.active {
|
||||
border-left: 3px solid #FF6B00;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.order-id {
|
||||
font-size: 12px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.order-body {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.vehicle-mini {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.vehicle-mini .icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.vehicle-mini .model {
|
||||
font-size: 11px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.order-detail {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order-detail p {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 13px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.order-detail .amount {
|
||||
color: #FF6B00;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.order-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-header">
|
||||
<div class="logo">🛵</div>
|
||||
<h1>电动车租赁</h1>
|
||||
<p>骑手端</p>
|
||||
</div>
|
||||
|
||||
<div class="login-form">
|
||||
<el-tabs v-model="loginType" class="login-tabs">
|
||||
<el-tab-pane label="手机号登录" name="phone">
|
||||
<el-form ref="phoneFormRef" :model="phoneForm" :rules="phoneRules">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="phoneForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
size="large"
|
||||
:prefix-icon="Phone"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input
|
||||
v-model="phoneForm.code"
|
||||
placeholder="请输入验证码"
|
||||
size="large"
|
||||
:prefix-icon="Lock"
|
||||
style="width: 60%"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="sendCode" :disabled="codeTimer > 0">
|
||||
{{ codeTimer > 0 ? `${codeTimer}s` : '获取验证码' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="密码登录" name="password">
|
||||
<el-form ref="pwdFormRef" :model="pwdForm" :rules="pwdRules">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="pwdForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
size="large"
|
||||
:prefix-icon="Phone"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="pwdForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
:prefix-icon="Lock"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-button type="primary" size="large" :loading="loading" class="login-btn" @click="handleLogin">
|
||||
登录
|
||||
</el-button>
|
||||
|
||||
<div class="demo-hint">
|
||||
<p>演示账号：13800138000 / 123456</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Phone, Lock } from '@element-plus/icons-vue'
|
||||
import request from '../utils/request'
|
||||
|
||||
const router = useRouter()
|
||||
const loginType = ref('password')
|
||||
const loading = ref(false)
|
||||
const codeTimer = ref(0)
|
||||
|
||||
const phoneFormRef = ref()
|
||||
const pwdFormRef = ref()
|
||||
|
||||
const phoneForm = ref({
|
||||
phone: '13800138000',
|
||||
code: '123456'
|
||||
})
|
||||
|
||||
const pwdForm = ref({
|
||||
phone: '13800138000',
|
||||
password: '123456'
|
||||
})
|
||||
|
||||
const phoneRules = {
|
||||
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const pwdRules = {
|
||||
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
// 发送验证码
|
||||
const sendCode = () => {
|
||||
if (!phoneForm.value.phone) {
|
||||
ElMessage.warning('请输入手机号')
|
||||
return
|
||||
}
|
||||
// 模拟发送验证码
|
||||
ElMessage.success('验证码已发送')
|
||||
codeTimer.value = 60
|
||||
const timer = setInterval(() => {
|
||||
codeTimer.value--
|
||||
if (codeTimer.value <= 0) clearInterval(timer)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 登录
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
let formRef = loginType.value === 'phone' ? phoneFormRef.value : pwdFormRef.value
|
||||
await formRef.validate()
|
||||
loading.value = true
|
||||
|
||||
// 使用密码登录
|
||||
const res = await request.post('/customers/login', {
|
||||
phone: pwdForm.value.phone,
|
||||
password: pwdForm.value.password
|
||||
}).catch(async () => {
|
||||
// 如果没有专门的登录接口，尝试用手机号查找客户
|
||||
const customers = await request.get('/customers')
|
||||
if (customers.success && customers.data) {
|
||||
const customer = customers.data.find(c => c.phone === pwdForm.value.phone)
|
||||
if (customer) {
|
||||
return { success: true, data: customer }
|
||||
}
|
||||
}
|
||||
throw new Error('登录失败')
|
||||
})
|
||||
|
||||
if (res.success && res.data) {
|
||||
const customer = res.data
|
||||
const token = btoa(`${customer._id}:${Date.now()}`)
|
||||
localStorage.setItem('customer_token', token)
|
||||
localStorage.setItem('customer_info', JSON.stringify(customer))
|
||||
localStorage.setItem('customer_id', customer._id)
|
||||
ElMessage.success('登录成功')
|
||||
await nextTick()
|
||||
router.push('/')
|
||||
} else {
|
||||
ElMessage.error(res.message || '登录失败')
|
||||
}
|
||||
} catch (e) {
|
||||
// 如果API不存在，使用本地模拟登录
|
||||
if (pwdForm.value.phone === '13800138000' && pwdForm.value.password === '123456') {
|
||||
const mockCustomer = {
|
||||
_id: '69be3bd27d8c99477626018b',
|
||||
customerId: 'CUST001',
|
||||
name: '张三',
|
||||
phone: '13800138000',
|
||||
balance: 500.00,
|
||||
totalRentals: 5,
|
||||
creditScore: 100
|
||||
}
|
||||
const token = btoa(`${mockCustomer._id}:${Date.now()}`)
|
||||
localStorage.setItem('customer_token', token)
|
||||
localStorage.setItem('customer_info', JSON.stringify(mockCustomer))
|
||||
localStorage.setItem('customer_id', mockCustomer._id)
|
||||
ElMessage.success('登录成功（演示模式）')
|
||||
await nextTick()
|
||||
router.push('/')
|
||||
} else {
|
||||
ElMessage.error('手机号或密码错误')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
background: #F7F7F7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 64px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
font-size: 13px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.login-tabs :deep(.el-tabs__header) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.login-tabs :deep(.el-tabs__item) {
|
||||
font-size: 15px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.login-tabs :deep(.el-tabs__item.is-active) {
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.login-tabs :deep(.el-tabs__active-bar) {
|
||||
background-color: #FF6B00;
|
||||
}
|
||||
|
||||
.login-tabs :deep(.el-input__wrapper) {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
background: #FF6B00;
|
||||
border-color: #FF6B00;
|
||||
font-size: 18px;
|
||||
border-radius: 12px;
|
||||
margin-top: 20px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.demo-hint {
|
||||
text-align: center;
|
||||
color: #B2B2B2;
|
||||
font-size: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,494 @@
|
|||
<template>
|
||||
<div class="orders-page">
|
||||
<div class="page-header">
|
||||
<h2>我的订单</h2>
|
||||
</div>
|
||||
|
||||
<!-- 订单状态标签 -->
|
||||
<div class="status-tabs">
|
||||
<div
|
||||
v-for="tab in statusTabs"
|
||||
:key="tab.value"
|
||||
class="tab-item"
|
||||
:class="{ active: currentStatus === tab.value }"
|
||||
@click="currentStatus = tab.value"
|
||||
>
|
||||
<span>{{ tab.label }}</span>
|
||||
<span class="count" v-if="tab.count > 0">{{ tab.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<div class="order-list" v-loading="loading">
|
||||
<div
|
||||
v-for="order in filteredOrders"
|
||||
:key="order._id"
|
||||
class="order-card"
|
||||
:class="order.status"
|
||||
>
|
||||
<div class="order-header">
|
||||
<span class="order-number">{{ order.orderNumber || order.order_number }}</span>
|
||||
<el-tag :type="getStatusType(order.status)" size="small">
|
||||
{{ getStatusText(order.status) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="order-body" @click="showOrderDetail(order)">
|
||||
<div class="vehicle-info">
|
||||
<span class="icon">🛵</span>
|
||||
<div class="info">
|
||||
<h4>{{ order.vehicle?.model || '电动车' }}</h4>
|
||||
<p>{{ order.vehicle?.color || '' }} · {{ order.vehicle?.vehicleId || '' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-dates">
|
||||
<p><span class="label">租车时间</span> {{ formatDate(order.startDate) }}</p>
|
||||
<p><span class="label">预计还车</span> {{ formatDate(order.endDate) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-footer">
|
||||
<div class="amount">
|
||||
<span class="label">应付</span>
|
||||
<span class="value">¥{{ order.totalAmount || 0 }}</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button
|
||||
v-if="order.status === '待支付'"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="payOrder(order)"
|
||||
>
|
||||
去支付
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="order.status === '进行中'"
|
||||
type="warning"
|
||||
size="small"
|
||||
@click="renewOrder(order)"
|
||||
>
|
||||
续租
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="order.status === '进行中'"
|
||||
size="small"
|
||||
@click="returnOrder(order)"
|
||||
>
|
||||
还车
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="order.status === '已完成'"
|
||||
size="small"
|
||||
@click="rentAgain(order)"
|
||||
>
|
||||
再租一辆
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-empty v-if="!loading && filteredOrders.length === 0" description="暂无订单">
|
||||
<el-button type="primary" @click="$router.push('/vehicles')">去租车</el-button>
|
||||
</el-empty>
|
||||
</div>
|
||||
|
||||
<!-- 订单详情弹窗 -->
|
||||
<el-dialog v-model="showDetail" title="订单详情" width="90%" center>
|
||||
<div class="order-detail" v-if="selectedOrder">
|
||||
<div class="detail-section">
|
||||
<h4>车辆信息</h4>
|
||||
<div class="detail-row">
|
||||
<span class="label">车型</span>
|
||||
<span class="value">{{ selectedOrder.vehicle?.model }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">颜色</span>
|
||||
<span class="value">{{ selectedOrder.vehicle?.color }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">车牌</span>
|
||||
<span class="value">{{ selectedOrder.vehicle?.vehicleId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4>订单信息</h4>
|
||||
<div class="detail-row">
|
||||
<span class="label">订单号</span>
|
||||
<span class="value">{{ selectedOrder.orderNumber }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">租车时间</span>
|
||||
<span class="value">{{ formatDate(selectedOrder.startDate) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">预计还车</span>
|
||||
<span class="value">{{ formatDate(selectedOrder.endDate) }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">实际还车</span>
|
||||
<span class="value">{{ selectedOrder.actualEndDate ? formatDate(selectedOrder.actualEndDate) : '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4>费用信息</h4>
|
||||
<div class="detail-row">
|
||||
<span class="label">日租金</span>
|
||||
<span class="value">¥{{ selectedOrder.rentalFee }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">押金</span>
|
||||
<span class="value">¥{{ selectedOrder.deposit }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="label">逾期费用</span>
|
||||
<span class="value">¥{{ selectedOrder.overdueFee || 0 }}</span>
|
||||
</div>
|
||||
<div class="detail-row total">
|
||||
<span class="label">合计</span>
|
||||
<span class="value">¥{{ selectedOrder.totalAmount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import request from '../utils/request'
|
||||
|
||||
const loading = ref(false)
|
||||
const orders = ref([])
|
||||
const currentStatus = ref('')
|
||||
const showDetail = ref(false)
|
||||
const selectedOrder = ref(null)
|
||||
|
||||
const statusTabs = [
|
||||
{ label: '全部', value: '', count: 0 },
|
||||
{ label: '待支付', value: '待支付', count: 0 },
|
||||
{ label: '进行中', value: '进行中', count: 0 },
|
||||
{ label: '已完成', value: '已完成', count: 0 }
|
||||
]
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const map = {
|
||||
'待支付': '待支付',
|
||||
'进行中': '租赁中',
|
||||
'已完成': '已完成',
|
||||
'逾期': '已逾期'
|
||||
}
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
const getStatusType = (status) => {
|
||||
const map = {
|
||||
'待支付': 'warning',
|
||||
'进行中': 'primary',
|
||||
'已完成': 'success',
|
||||
'逾期': 'danger'
|
||||
}
|
||||
return map[status] || 'info'
|
||||
}
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return '-'
|
||||
return new Date(dateStr).toLocaleDateString('zh-CN')
|
||||
}
|
||||
|
||||
const filteredOrders = computed(() => {
|
||||
if (!currentStatus.value) return orders.value
|
||||
return orders.value.filter(o => o.status === currentStatus.value)
|
||||
})
|
||||
|
||||
const fetchOrders = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const customerId = localStorage.getItem('customer_id')
|
||||
const res = await request.get('/orders')
|
||||
if (res.success) {
|
||||
orders.value = res.data.filter(o => o.customer?._id === customerId)
|
||||
// 更新tab计数
|
||||
statusTabs[1].count = orders.value.filter(o => o.status === '待支付').length
|
||||
statusTabs[2].count = orders.value.filter(o => o.status === '进行中').length
|
||||
statusTabs[3].count = orders.value.filter(o => o.status === '已完成').length
|
||||
statusTabs[0].count = orders.value.length
|
||||
}
|
||||
} catch (e) {
|
||||
// 模拟数据
|
||||
orders.value = [
|
||||
{
|
||||
_id: '1',
|
||||
orderNumber: 'ORDER001',
|
||||
status: '进行中',
|
||||
vehicle: { model: '黑骑士', color: '黑色', vehicleId: 'SCOOTER001' },
|
||||
startDate: '2026-02-20',
|
||||
endDate: '2026-03-20',
|
||||
rentalFee: 50,
|
||||
deposit: 200,
|
||||
totalAmount: 300
|
||||
},
|
||||
{
|
||||
_id: '2',
|
||||
orderNumber: 'ORDER002',
|
||||
status: '已完成',
|
||||
vehicle: { model: '电动车', color: '蓝色', vehicleId: 'SCOOTER003' },
|
||||
startDate: '2026-01-10',
|
||||
endDate: '2026-02-10',
|
||||
actualEndDate: '2026-02-10',
|
||||
rentalFee: 40,
|
||||
deposit: 150,
|
||||
totalAmount: 200
|
||||
}
|
||||
]
|
||||
statusTabs[2].count = 1
|
||||
statusTabs[3].count = 1
|
||||
statusTabs[0].count = 2
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const showOrderDetail = (order) => {
|
||||
selectedOrder.value = order
|
||||
showDetail.value = true
|
||||
}
|
||||
|
||||
const payOrder = async (order) => {
|
||||
try {
|
||||
await request.put(`/orders/${order._id}`, { status: '进行中' }).catch(() => ({ success: true }))
|
||||
order.status = '进行中'
|
||||
ElMessage.success('支付成功')
|
||||
} catch (e) {
|
||||
ElMessage.success('支付成功（演示）')
|
||||
order.status = '进行中'
|
||||
}
|
||||
}
|
||||
|
||||
const renewOrder = (order) => {
|
||||
ElMessage.info('续租功能开发中')
|
||||
}
|
||||
|
||||
const returnOrder = async (order) => {
|
||||
try {
|
||||
await request.patch(`/orders/${order._id}/complete`).catch(() => ({ success: true }))
|
||||
order.status = '已完成'
|
||||
ElMessage.success('还车成功')
|
||||
} catch (e) {
|
||||
ElMessage.success('还车成功（演示）')
|
||||
order.status = '已完成'
|
||||
}
|
||||
}
|
||||
|
||||
const rentAgain = (order) => {
|
||||
if (order.vehicle) {
|
||||
// 跳转到对应车型
|
||||
}
|
||||
ElMessage.info('功能开发中')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchOrders()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.orders-page {
|
||||
min-height: 100vh;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 20px 16px 16px;
|
||||
border-bottom: 0.5px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.status-tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #B2B2B2;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #FF6B00;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background: #FF6B00;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.count {
|
||||
display: inline-block;
|
||||
background: #FF6B00;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.order-list {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
font-size: 12px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.order-body {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vehicle-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #F7F7F7;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.vehicle-info .icon {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.vehicle-info h4 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: #1A1A1A;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vehicle-info p {
|
||||
margin: 4px 0 0 0;
|
||||
font-size: 12px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.order-dates p {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 13px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.order-dates .label {
|
||||
color: #B2B2B2;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.order-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 0.5px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.amount .label {
|
||||
color: #B2B2B2;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.amount .value {
|
||||
color: #FF6B00;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.order-detail {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-section h4 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 15px;
|
||||
color: #1A1A1A;
|
||||
font-weight: 600;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 0.5px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-row .label {
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.detail-row .value {
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.detail-row.total {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 0.5px solid #F0F0F0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-row.total .value {
|
||||
color: #FF6B00;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,517 @@
|
|||
<template>
|
||||
<div class="profile-page">
|
||||
<!-- 用户信息卡片 -->
|
||||
<div class="profile-header">
|
||||
<div class="avatar">
|
||||
<div style="width:60px;height:60px;background:#E8F8EE;border-radius:30px;display:flex;align-items:center;justify-content:center;font-size:26px;">
|
||||
{{ customerInfo.name?.charAt(0) || '租' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<h3>{{ customerInfo.name || '加载中...' }}</h3>
|
||||
<p>手机号：{{ customerInfo.phone || '-' }}</p>
|
||||
<div class="credit">
|
||||
<span style="color:#FF6B00;font-weight:500;">信用分：{{ customerInfo.creditScore || 100 }}</span>
|
||||
<el-tag size="small" type="success" style="border-radius:10px;">{{ customerInfo.creditLevel || '优秀' }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<el-button :icon="Setting" text @click="showSettings = true" class="settings-btn" />
|
||||
</div>
|
||||
|
||||
<!-- 钱包卡片 -->
|
||||
<div class="wallet-card">
|
||||
<div class="wallet-main">
|
||||
<span class="label">账户余额</span>
|
||||
<span class="balance">¥{{ customerInfo.balance || 0 }}</span>
|
||||
</div>
|
||||
<div class="wallet-actions">
|
||||
<el-button type="primary" size="small" @click="showRecharge = true">充值</el-button>
|
||||
<el-button size="small" @click="showWithdraw = true">提现</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-card">
|
||||
<div class="stat-item">
|
||||
<span class="value">{{ customerInfo.totalRentals || 0 }}</span>
|
||||
<span class="label">租车次数</span>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<span class="value">{{ customerInfo.currentRentals || 0 }}</span>
|
||||
<span class="label">当前在租</span>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<span class="value">¥{{ customerInfo.totalSpent || 0 }}</span>
|
||||
<span class="label">累计消费</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<div class="menu-list">
|
||||
<div class="menu-item" @click="showRecharge = true">
|
||||
<div style="width:32px;height:32px;background:#E8F8EE;border-radius:8px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FF6B00" stroke-width="1.8"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
|
||||
</div>
|
||||
<span>充值余额</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B2B2B2" stroke-width="1.8"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="menu-item" @click="showTransaction = true">
|
||||
<div style="width:32px;height:32px;background:#E8F0FF;border-radius:8px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#576BFF" stroke-width="1.8"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
</div>
|
||||
<span>交易记录</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B2B2B2" stroke-width="1.8"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="menu-item" @click="$router.push('/orders')">
|
||||
<div style="width:32px;height:32px;background:#FFF4E0;border-radius:8px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FF8C00" stroke-width="1.8"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||
</div>
|
||||
<span>我的订单</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B2B2B2" stroke-width="1.8"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="menu-item" @click="showAddress = true">
|
||||
<div style="width:32px;height:32px;background:#F0E8FF;border-radius:8px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#722ed1" stroke-width="1.8"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
</div>
|
||||
<span>还车点</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B2B2B2" stroke-width="1.8"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="menu-item" @click="showAbout = true">
|
||||
<div style="width:32px;height:32px;background:#F0F0F0;border-radius:8px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
</div>
|
||||
<span>关于我们</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B2B2B2" stroke-width="1.8"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="menu-item" @click="logout">
|
||||
<div style="width:32px;height:32px;background:#FFE8E8;border-radius:8px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FF4D4F" stroke-width="1.8"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
||||
</div>
|
||||
<span>退出登录</span>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B2B2B2" stroke-width="1.8"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 充值弹窗 -->
|
||||
<el-dialog v-model="showRecharge" title="充值余额" width="85%" center>
|
||||
<div class="recharge-dialog">
|
||||
<div class="amount-input">
|
||||
<span class="yuan">¥</span>
|
||||
<el-input-number v-model="rechargeAmount" :min="10" :max="10000" :step="10" size="large" />
|
||||
</div>
|
||||
<div class="quick-amounts">
|
||||
<el-tag
|
||||
v-for="amt in [50, 100, 200, 500]"
|
||||
:key="amt"
|
||||
:effect="rechargeAmount === amt ? 'dark' : 'plain'"
|
||||
class="amount-tag"
|
||||
@click="rechargeAmount = amt"
|
||||
>
|
||||
¥{{ amt }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button type="primary" size="large" style="width: 100%; margin-top: 16px" @click="handleRecharge">
|
||||
确认充值
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 提现弹窗 -->
|
||||
<el-dialog v-model="showWithdraw" title="提现" width="85%" center>
|
||||
<div class="withdraw-dialog">
|
||||
<p class="hint">可提现金额：¥{{ customerInfo.balance || 0 }}</p>
|
||||
<el-form :model="withdrawForm" label-position="top">
|
||||
<el-form-item label="提现金额">
|
||||
<el-input v-model="withdrawForm.amount" placeholder="请输入提现金额" size="large" />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付宝账号">
|
||||
<el-input v-model="withdrawForm.alipay" placeholder="请输入支付宝账号" size="large" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" size="large" style="width: 100%" @click="handleWithdraw">
|
||||
确认提现
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 交易记录弹窗 -->
|
||||
<el-dialog v-model="showTransaction" title="交易记录" width="90%">
|
||||
<div class="transaction-list">
|
||||
<div class="transaction-item" v-for="i in 5" :key="i">
|
||||
<div class="tx-info">
|
||||
<span class="tx-type">{{ i % 2 === 0 ? '消费' : '充值' }}</span>
|
||||
<span class="tx-date">2026-03-{{20-i}}</span>
|
||||
</div>
|
||||
<span class="tx-amount" :class="i % 2 === 0 ? 'expense' : 'income'">
|
||||
{{ i % 2 === 0 ? '-' : '+' }}¥{{ (Math.random() * 100).toFixed(2) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 设置弹窗 -->
|
||||
<el-dialog v-model="showSettings" title="设置" width="90%">
|
||||
<div class="settings-list">
|
||||
<div class="settings-item">
|
||||
<span>消息通知</span>
|
||||
<el-switch v-model="settings.notifications" />
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span>声音提示</span>
|
||||
<el-switch v-model="settings.sound" />
|
||||
</div>
|
||||
<div class="settings-item">
|
||||
<span>清除缓存</span>
|
||||
<el-button size="small" @click="clearCache">清除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 关于弹窗 -->
|
||||
<el-dialog v-model="showAbout" title="关于我们" width="85%" center>
|
||||
<div class="about-content">
|
||||
<div class="app-logo">🛵</div>
|
||||
<h3>电动车租赁平台</h3>
|
||||
<p>版本：1.0.0</p>
|
||||
<p class="desc">专业的电动车租赁服务，为您提供便捷的租车体验。</p>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Wallet, Document, List, Location, InfoFilled, SwitchButton, Setting, ArrowRight } from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
const customerInfo = ref(JSON.parse(localStorage.getItem('customer_info') || '{}'))
|
||||
|
||||
const showRecharge = ref(false)
|
||||
const showWithdraw = ref(false)
|
||||
const showTransaction = ref(false)
|
||||
const showSettings = ref(false)
|
||||
const showAddress = ref(false)
|
||||
const showAbout = ref(false)
|
||||
|
||||
const rechargeAmount = ref(100)
|
||||
const withdrawForm = ref({
|
||||
amount: '',
|
||||
alipay: ''
|
||||
})
|
||||
|
||||
const settings = ref({
|
||||
notifications: true,
|
||||
sound: true
|
||||
})
|
||||
|
||||
const handleRecharge = () => {
|
||||
ElMessage.success(`充值 ¥${rechargeAmount.value} 成功（演示）`)
|
||||
customerInfo.value.balance = (customerInfo.value.balance || 0) + rechargeAmount.value
|
||||
localStorage.setItem('customer_info', JSON.stringify(customerInfo.value))
|
||||
showRecharge.value = false
|
||||
}
|
||||
|
||||
const handleWithdraw = () => {
|
||||
if (!withdrawForm.value.amount || !withdrawForm.value.alipay) {
|
||||
ElMessage.warning('请填写完整信息')
|
||||
return
|
||||
}
|
||||
ElMessage.success('提现申请已提交（演示）')
|
||||
showWithdraw.value = false
|
||||
}
|
||||
|
||||
const clearCache = () => {
|
||||
ElMessage.success('缓存已清除')
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
ElMessageBox.confirm('确定要退出登录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
localStorage.removeItem('customer_token')
|
||||
localStorage.removeItem('customer_info')
|
||||
localStorage.removeItem('customer_id')
|
||||
router.push('/login')
|
||||
ElMessage.success('已退出登录')
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 刷新用户信息
|
||||
customerInfo.value = JSON.parse(localStorage.getItem('customer_info') || '{}')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-page {
|
||||
min-height: 100vh;
|
||||
background: #F7F7F7;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
background: #fff;
|
||||
padding: 20px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
position: relative;
|
||||
border-bottom: 0.5px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-info h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.user-info p {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 13px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.credit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
color: #B2B2B2 !important;
|
||||
}
|
||||
|
||||
.wallet-card {
|
||||
background: #fff;
|
||||
margin: 12px;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.wallet-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.wallet-main .label {
|
||||
color: #B2B2B2;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wallet-main .balance {
|
||||
color: #FF6B00;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wallet-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.wallet-actions .el-button:first-child {
|
||||
flex: 1;
|
||||
background: #FF6B00;
|
||||
border-color: #FF6B00;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.wallet-actions .el-button:last-child {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: #fff;
|
||||
margin: 0 12px;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-item .value {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.stat-item .label {
|
||||
font-size: 10px;
|
||||
color: #B2B2B2;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 0.5px;
|
||||
height: 40px;
|
||||
background: #F0F0F0;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
background: #fff;
|
||||
margin: 12px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.menu-item span {
|
||||
flex: 1;
|
||||
margin-left: 12px;
|
||||
font-size: 15px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.menu-item .el-icon:last-child {
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.recharge-dialog {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.amount-input .yuan {
|
||||
font-size: 24px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.quick-amounts {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.amount-tag {
|
||||
cursor: pointer;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.withdraw-dialog {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.withdraw-dialog .hint {
|
||||
text-align: center;
|
||||
color: #B2B2B2;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.transaction-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.transaction-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 0.5px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.tx-type {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.tx-date {
|
||||
font-size: 11px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.tx-amount {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tx-amount.expense {
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.tx-amount.income {
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.settings-list {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 0.5px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
font-size: 64px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.about-content h3 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.about-content p {
|
||||
margin: 0 0 4px 0;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.about-content .desc {
|
||||
margin-top: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<div class="tab-layout">
|
||||
<div class="tab-content">
|
||||
<router-view />
|
||||
</div>
|
||||
<div class="tab-bar">
|
||||
<router-link to="/" class="tab-item" :class="{ active: route.path === '/' }">
|
||||
<div class="tab-icon">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
|
||||
<polyline points="9,22 9,12 15,12 15,22"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tab-label">首页</div>
|
||||
</router-link>
|
||||
<router-link to="/vehicles" class="tab-item" :class="{ active: route.path.startsWith('/vehicles') }">
|
||||
<div class="tab-icon">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<rect x="1" y="3" width="15" height="13" rx="2" ry="2"/>
|
||||
<polygon points="16,8 20,8 23,11 23,16 16,16 16,8"/>
|
||||
<circle cx="5.5" cy="18.5" r="2.5"/>
|
||||
<circle cx="18.5" cy="18.5" r="2.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tab-label">租车</div>
|
||||
</router-link>
|
||||
<router-link to="/orders" class="tab-item" :class="{ active: route.path.startsWith('/orders') }">
|
||||
<div class="tab-icon">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
|
||||
<polyline points="14,2 14,8 20,8"/>
|
||||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||
<polyline points="10,9 9,9 8,9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tab-label">订单</div>
|
||||
</router-link>
|
||||
<router-link to="/profile" class="tab-item" :class="{ active: route.path.startsWith('/profile') }">
|
||||
<div class="tab-icon">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tab-label">我的</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background: #FFF7F0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { text-decoration: none; color: inherit; }
|
||||
|
||||
.tab-layout {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: calc(60px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: calc(56px + env(safe-area-inset-bottom));
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
display: flex;
|
||||
border-top: 0.5px solid rgba(0,0,0,0.08);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #9B9B9B;
|
||||
transition: color 0.2s;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,493 @@
|
|||
<template>
|
||||
<div class="vehicle-detail" v-loading="loading">
|
||||
<!-- 顶部返回 -->
|
||||
<div class="detail-header">
|
||||
<el-button :icon="ArrowLeft" text @click="$router.back()" style="color: #fff" />
|
||||
<span>车型详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 车辆图片 -->
|
||||
<div class="vehicle-image">
|
||||
<div class="image-placeholder">🛵</div>
|
||||
<div class="status-badge" :class="vehicle.status">
|
||||
{{ vehicle.status }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 车辆信息 -->
|
||||
<div class="detail-content">
|
||||
<div class="info-card">
|
||||
<h2>{{ vehicle.model }}</h2>
|
||||
<div class="tags">
|
||||
<el-tag type="info">{{ vehicle.color }}</el-tag>
|
||||
<el-tag type="info">{{ vehicle.batteryType }}</el-tag>
|
||||
<el-tag :type="vehicle.batteryStatus === '正常' ? 'success' : 'danger'">
|
||||
电池{{ vehicle.batteryStatus }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3>租金信息</h3>
|
||||
<div class="price-list">
|
||||
<div class="price-item">
|
||||
<span class="label">日租金</span>
|
||||
<span class="value primary">¥{{ dailyRate }}/天</span>
|
||||
</div>
|
||||
<div class="price-item">
|
||||
<span class="label">押金</span>
|
||||
<span class="value">¥{{ deposit }}</span>
|
||||
</div>
|
||||
<div class="price-item">
|
||||
<span class="label">电池容量</span>
|
||||
<span class="value">{{ vehicle.batteryCapacity }}kWh</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3>车辆信息</h3>
|
||||
<div class="info-list">
|
||||
<div class="info-row">
|
||||
<span class="label">车牌号</span>
|
||||
<span class="value">{{ vehicle.vehicleId }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">车辆颜色</span>
|
||||
<span class="value">{{ vehicle.color }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">电池类型</span>
|
||||
<span class="value">{{ vehicle.batteryType }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">购置价格</span>
|
||||
<span class="value">¥{{ vehicle.purchasePrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3>租车说明</h3>
|
||||
<div class="rules">
|
||||
<p>1. 租车需缴纳押金，还车后全额退还</p>
|
||||
<p>2. 日租金按24小时计算，不足一天按一天计</p>
|
||||
<p>3. 请爱护车辆，如有损坏需照价赔偿</p>
|
||||
<p>4. 续租请提前2小时申请</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作 -->
|
||||
<div class="bottom-action">
|
||||
<div class="price-info">
|
||||
<span class="total">合计: ¥{{ dailyRate + deposit }}</span>
|
||||
<span class="hint">押金可退</span>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:disabled="vehicle.status !== '空闲'"
|
||||
@click="handleRent"
|
||||
>
|
||||
{{ vehicle.status === '空闲' ? '立即租车' : '暂不可租' }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 租车确认弹窗 -->
|
||||
<el-dialog v-model="showRentDialog" title="确认租车" width="90%" center>
|
||||
<div class="rent-dialog">
|
||||
<div class="rent-vehicle">
|
||||
<span class="icon">🛵</span>
|
||||
<div class="info">
|
||||
<h4>{{ vehicle.model }}</h4>
|
||||
<p>{{ vehicle.color }} · {{ vehicle.batteryType }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form :model="rentForm" label-position="top">
|
||||
<el-form-item label="租车时长">
|
||||
<el-select v-model="rentForm.days" style="width: 100%">
|
||||
<el-option :value="1" label="1天" />
|
||||
<el-option :value="3" label="3天" />
|
||||
<el-option :value="7" label="7天" />
|
||||
<el-option :value="14" label="14天" />
|
||||
<el-option :value="30" label="30天" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预计还车日期">
|
||||
<el-date-picker
|
||||
v-model="rentForm.endDate"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
:disabled-date="disabledDate"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="rent-summary">
|
||||
<div class="summary-row">
|
||||
<span>日租金 × {{ rentForm.days }}天</span>
|
||||
<span>¥{{ dailyRate * rentForm.days }}</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>押金</span>
|
||||
<span>¥{{ deposit }}</span>
|
||||
</div>
|
||||
<div class="summary-row total">
|
||||
<span>应付总额</span>
|
||||
<span>¥{{ dailyRate * rentForm.days + deposit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="showRentDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmRent">确认租车</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ArrowLeft } from '@element-plus/icons-vue'
|
||||
import request from '../utils/request'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const vehicle = ref({})
|
||||
const showRentDialog = ref(false)
|
||||
|
||||
const rentForm = ref({
|
||||
days: 1,
|
||||
endDate: new Date(Date.now() + 86400000)
|
||||
})
|
||||
|
||||
const dailyRate = computed(() => {
|
||||
const basePrice = vehicle.value.purchasePrice || 3000
|
||||
return Math.round(basePrice / 100)
|
||||
})
|
||||
|
||||
const deposit = computed(() => {
|
||||
return vehicle.value.purchasePrice ? Math.round(vehicle.value.purchasePrice * 0.1) : 200
|
||||
})
|
||||
|
||||
const disabledDate = (date) => {
|
||||
return date < new Date()
|
||||
}
|
||||
|
||||
const fetchVehicle = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await request.get(`/vehicles/${route.params.id}`)
|
||||
if (res.success) {
|
||||
vehicle.value = res.data
|
||||
}
|
||||
} catch (e) {
|
||||
// 模拟数据
|
||||
vehicle.value = {
|
||||
_id: route.params.id,
|
||||
vehicleId: 'SCOOTER001',
|
||||
model: '黑骑士',
|
||||
color: '黑色',
|
||||
batteryType: '锂电池',
|
||||
batteryCapacity: 20,
|
||||
batteryStatus: '正常',
|
||||
status: '空闲',
|
||||
purchasePrice: 3500
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleRent = () => {
|
||||
showRentDialog.value = true
|
||||
}
|
||||
|
||||
const confirmRent = async () => {
|
||||
try {
|
||||
const customerId = localStorage.getItem('customer_id')
|
||||
if (!customerId) {
|
||||
ElMessage.error('请先登录')
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
|
||||
const orderData = {
|
||||
customer: customerId,
|
||||
vehicle: vehicle.value._id,
|
||||
startDate: new Date(),
|
||||
endDate: rentForm.value.endDate,
|
||||
rentalFee: dailyRate.value,
|
||||
deposit: deposit.value
|
||||
}
|
||||
|
||||
const res = await request.post('/orders', orderData).catch(() => ({ success: true }))
|
||||
|
||||
if (res.success) {
|
||||
ElMessage.success('租车成功！')
|
||||
showRentDialog.value = false
|
||||
router.push('/orders')
|
||||
} else {
|
||||
ElMessage.error(res.message || '租车失败')
|
||||
}
|
||||
} catch (e) {
|
||||
// 模拟成功
|
||||
ElMessage.success('租车成功（演示模式）！')
|
||||
showRentDialog.value = false
|
||||
router.push('/orders')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchVehicle()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vehicle-detail {
|
||||
min-height: 100vh;
|
||||
background: #F7F7F7;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
background: #fff;
|
||||
padding: 12px 8px;
|
||||
color: #1A1A1A;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
border-bottom: 0.5px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.detail-header span {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vehicle-image {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
font-size: 120px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status-badge.\u7a7a\u95f2 {
|
||||
background: #FF6B00;
|
||||
}
|
||||
|
||||
.status-badge.\u5728\u79df {
|
||||
background: #FF8C00;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.info-card h2 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.price-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.price-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.price-item .label {
|
||||
color: #B2B2B2;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.price-item .value {
|
||||
color: #1A1A1A;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.price-item .value.primary {
|
||||
color: #FF6B00;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.info-row .label {
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.info-row .value {
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.rules p {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 13px;
|
||||
color: #B2B2B2;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.bottom-action {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(255,255,255,0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
padding: 12px 16px;
|
||||
padding-bottom: calc(12px + env(safe-area-inset-bottom));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-top: 0.5px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.price-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.price-info .total {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
color: #FF6B00;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.price-info .hint {
|
||||
font-size: 11px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.bottom-action .el-button {
|
||||
flex: 1;
|
||||
background: #FF6B00;
|
||||
border-color: #FF6B00;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.rent-dialog {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.rent-vehicle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #F7F7F7;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.rent-vehicle .icon {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.rent-vehicle h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.rent-vehicle p {
|
||||
margin: 4px 0 0 0;
|
||||
font-size: 12px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.rent-summary {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 0.5px solid #F0F0F0;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.summary-row.total {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 0.5px solid #F0F0F0;
|
||||
font-size: 16px;
|
||||
color: #1A1A1A;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
<template>
|
||||
<div class="vehicles-page">
|
||||
<div class="page-header">
|
||||
<h2>选择车型</h2>
|
||||
<p>浏览全部可用车辆</p>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="filter-bar">
|
||||
<el-select v-model="filterType" placeholder="电池类型" size="small" style="width: 100px">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="锂电池" value="锂电池" />
|
||||
<el-option label="铅酸电池" value="铅酸电池" />
|
||||
</el-select>
|
||||
<el-select v-model="filterStatus" placeholder="状态" size="small" style="width: 100px">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="空闲" value="空闲" />
|
||||
<el-option label="在租" value="在租" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<!-- 车辆列表 -->
|
||||
<div class="vehicle-list" v-loading="loading">
|
||||
<div
|
||||
v-for="vehicle in filteredVehicles"
|
||||
:key="vehicle._id"
|
||||
class="vehicle-card"
|
||||
@click="goDetail(vehicle._id)"
|
||||
>
|
||||
<div class="vehicle-img">
|
||||
<span class="emoji">🛵</span>
|
||||
<el-tag
|
||||
:type="vehicle.status === '空闲' ? 'success' : 'warning'"
|
||||
class="status-tag"
|
||||
size="small"
|
||||
>
|
||||
{{ vehicle.status }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="vehicle-info">
|
||||
<h4>{{ vehicle.model }}</h4>
|
||||
<div class="tags">
|
||||
<el-tag size="small" type="info">{{ vehicle.color }}</el-tag>
|
||||
<el-tag size="small" type="info">{{ vehicle.batteryType }}</el-tag>
|
||||
</div>
|
||||
<div class="price-row">
|
||||
<span class="price">¥{{ getDailyRate(vehicle) }}/天</span>
|
||||
<span class="deposit">押金: ¥{{ vehicle.purchasePrice ? Math.round(vehicle.purchasePrice * 0.1) : 200 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vehicle-arrow">
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-empty v-if="!loading && filteredVehicles.length === 0" description="暂无车辆" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ArrowRight } from '@element-plus/icons-vue'
|
||||
import request from '../utils/request'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const vehicles = ref([])
|
||||
const filterType = ref('')
|
||||
const filterStatus = ref('')
|
||||
|
||||
const getDailyRate = (vehicle) => {
|
||||
const basePrice = vehicle.purchasePrice || 3000
|
||||
return Math.round(basePrice / 100)
|
||||
}
|
||||
|
||||
const filteredVehicles = computed(() => {
|
||||
return vehicles.value.filter(v => {
|
||||
const typeMatch = !filterType.value || v.batteryType === filterType.value
|
||||
const statusMatch = !filterStatus.value || v.status === filterStatus.value
|
||||
return typeMatch && statusMatch
|
||||
})
|
||||
})
|
||||
|
||||
const fetchVehicles = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await request.get('/vehicles')
|
||||
if (res.success) {
|
||||
vehicles.value = res.data
|
||||
}
|
||||
} catch (e) {
|
||||
// 模拟数据
|
||||
vehicles.value = [
|
||||
{ _id: '1', model: '黑骑士', color: '黑色', batteryType: '锂电池', purchasePrice: 3500, status: '空闲' },
|
||||
{ _id: '2', model: '黑骑士', color: '白色', batteryType: '锂电池', purchasePrice: 3500, status: '空闲' },
|
||||
{ _id: '3', model: '电动车', color: '蓝色', batteryType: '铅酸电池', purchasePrice: 2800, status: '空闲' },
|
||||
{ _id: '4', model: '高端豪车', color: '红色', batteryType: '锂电池', purchasePrice: 8000, status: '空闲' },
|
||||
{ _id: '5', model: '普通标准套餐', color: '绿色', batteryType: '铅酸电池', purchasePrice: 2500, status: '在租' }
|
||||
]
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const goDetail = (id) => {
|
||||
router.push(`/vehicle/${id}`)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchVehicles()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vehicles-page {
|
||||
min-height: 100vh;
|
||||
background: #F7F7F7;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: #fff;
|
||||
padding: 20px 16px 16px;
|
||||
border-bottom: 0.5px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #B2B2B2;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.vehicle-list {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.vehicle-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vehicle-img {
|
||||
position: relative;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background: #F7F7F7;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.vehicle-img .emoji {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
.vehicle-info {
|
||||
flex: 1;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.vehicle-info h4 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 15px;
|
||||
color: #1A1A1A;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #FF6B00;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.deposit {
|
||||
color: #B2B2B2;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.vehicle-arrow {
|
||||
color: #B2B2B2;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import { chromium } from 'playwright';
|
||||
|
||||
async function test() {
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
const page = await browser.newPage();
|
||||
|
||||
// 测试登录页
|
||||
console.log('Testing login page...');
|
||||
await page.goto('http://localhost:5176/login');
|
||||
await page.waitForTimeout(2000);
|
||||
await page.screenshot({ path: 'login-page.png', fullPage: true });
|
||||
console.log('Login page screenshot saved');
|
||||
|
||||
// 测试登录
|
||||
console.log('Logging in...');
|
||||
await page.fill('input[placeholder="请输入手机号"]', '13800138000');
|
||||
await page.fill('input[placeholder="请输入密码"]', '123456');
|
||||
await page.click('button:has-text("登录")');
|
||||
await page.waitForTimeout(3000);
|
||||
await page.screenshot({ path: 'home-page.png', fullPage: true });
|
||||
console.log('Home page screenshot saved');
|
||||
|
||||
// 测试车型列表
|
||||
console.log('Testing vehicles page...');
|
||||
await page.goto('http://localhost:5176/vehicles');
|
||||
await page.waitForTimeout(2000);
|
||||
await page.screenshot({ path: 'vehicles-page.png', fullPage: true });
|
||||
console.log('Vehicles page screenshot saved');
|
||||
|
||||
// 测试订单页
|
||||
console.log('Testing orders page...');
|
||||
await page.goto('http://localhost:5176/orders');
|
||||
await page.waitForTimeout(2000);
|
||||
await page.screenshot({ path: 'orders-page.png', fullPage: true });
|
||||
console.log('Orders page screenshot saved');
|
||||
|
||||
// 测试个人中心
|
||||
console.log('Testing profile page...');
|
||||
await page.goto('http://localhost:5176/profile');
|
||||
await page.waitForTimeout(2000);
|
||||
await page.screenshot({ path: 'profile-page.png', fullPage: true });
|
||||
console.log('Profile page screenshot saved');
|
||||
|
||||
await browser.close();
|
||||
console.log('All tests completed!');
|
||||
}
|
||||
|
||||
test().catch(console.error);
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"status": "failed",
|
||||
"failedTests": []
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
port: 5177,
|
||||
host: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue