服装智能制造软件平台V3.0
http://182.92.169.222/hhxy/#/user/login
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
717 lines
22 KiB
717 lines
22 KiB
<template> |
|
<!-- 个人中心--> |
|
<div class="gerenzhongxin"> |
|
<Header></Header> |
|
<div class="bg"></div> |
|
<div class="info jz d-flex"> |
|
<img src="../assets/photo.png"> |
|
<p class="f_36 c_1B" v-if="this.userInfo().username==null">请登录</p> |
|
<p class="f_36 c_1B" v-if="this.userInfo().username!=null">welcome, {{this.userInfo().username}}</p> |
|
<a>量体数据</a> |
|
</div> |
|
<div class="jz"> |
|
<a-menu class="menu" v-model="current" mode="horizontal" @click="menuChange"> |
|
<a-menu-item key="mail"> 我的账户 </a-menu-item> |
|
<a-menu-item key="collect"> 我的收藏 </a-menu-item> |
|
<a-menu-item key="addr"> 地址管理 </a-menu-item> |
|
<a-sub-menu key="invoice"> |
|
<span slot="title" class="submenu-title-wrapper">发票管理<a-icon type="down" /></span> |
|
|
|
<a-menu-item key="invoice1"> |
|
全部发票 |
|
</a-menu-item> |
|
<a-menu-item key="invoice2"> |
|
已开发票 |
|
</a-menu-item> |
|
<a-menu-item key="invoice3"> |
|
待开发票 |
|
</a-menu-item> |
|
<a-menu-item key="invoice4"> |
|
抬头管理 |
|
</a-menu-item> |
|
</a-sub-menu> |
|
<a-sub-menu> |
|
<span slot="title" class="submenu-title-wrapper">全部订单<a-icon type="down" /></span> |
|
<a-menu-item key="allorders"> |
|
全部订单 |
|
</a-menu-item> |
|
<a-menu-item key="daizhifu"> |
|
待支付 |
|
</a-menu-item> |
|
<a-menu-item key="daishouhuo"> |
|
待收货 |
|
</a-menu-item> |
|
<a-menu-item key="yiwancheng"> |
|
已完成 |
|
</a-menu-item> |
|
<a-menu-item key="tuihuan"> |
|
退换服务 |
|
</a-menu-item> |
|
</a-sub-menu> |
|
|
|
</a-menu> |
|
<div class="mall" v-if="current[0] == 'mail'"> |
|
<div style="width: 1002px;margin: 0 auto"> |
|
<a-form-model |
|
ref="ruleForm" |
|
:model="form" |
|
:rules="rules" |
|
:label-col="labelCol" |
|
:wrapper-col="wrapperCol" |
|
> |
|
<a-form-model-item label="性别" prop="sex"> |
|
<!-- <a-select v-model="form.sex" placeholder="请选择性别" > |
|
<a-select-option value="2"> |
|
女士 |
|
</a-select-option> |
|
<a-select-option value="1"> |
|
先生 |
|
</a-select-option> |
|
</a-select>--> |
|
<j-dict-select-tag type="list" v-model="form.sex" dictCode="sex" placeholder="请选择性别" /> |
|
</a-form-model-item> |
|
<a-form-model-item label="姓名" prop="realname"> |
|
<a-input placeholder="请输入姓名" v-model="form.realname" /> |
|
</a-form-model-item> |
|
<!-- <a-form-model-item label="地区" prop="desc"> |
|
<a-input placeholder="请选择地区" v-model="form.desc" /> |
|
</a-form-model-item>--> |
|
|
|
<a-form-model-item label="电话" prop="phone"> |
|
<a-input placeholder="请输入电话" v-model="form.phone" /> |
|
</a-form-model-item> |
|
|
|
<a-form-model-item label="出生日期" required prop="birthday"> |
|
<a-date-picker |
|
v-model="form.birthday" |
|
show-time |
|
type="date" |
|
placeholder="请选择出生日期" |
|
style="width: 100%;" |
|
/> |
|
</a-form-model-item> |
|
<a-form-model-item label="电子邮箱" prop="email"> |
|
<a-input placeholder="请输入电子邮箱" v-model="form.email" /> |
|
</a-form-model-item> |
|
<a-form-model-item label="1" prop="type"> |
|
<a-checkbox value="1" name="type"> |
|
我已阅读并同意黄淮服装定制商城的销售条款和个人信息处理规则 |
|
</a-checkbox> |
|
<a-checkbox value="2" name="type"> |
|
我同意按照《个人信息处理规则》告知的内容跨境提供本人的个人信息 |
|
</a-checkbox> |
|
</a-form-model-item> |
|
</a-form-model> |
|
<div class="d-flex btnDiv"> |
|
<div type="primary" style="width: 100%;margin-bottom: 10px" class="dialogButton primary f_12" @click="handuser()">修改信息</div> |
|
</div> |
|
<a @click="handleChangePassword(form.username)" class="xgmm"> 更改密码?</a> |
|
<!-- <a-modal v-model="visible1" title="更改密码" @ok="handleOk" @cancel="handleCancel"> |
|
<a-form-model |
|
ref="ruleForm1" |
|
:model="form1" |
|
:rules="rules" |
|
> |
|
<a-form-model-item label="当前密码" prop="desc"> |
|
<a-input placeholder="请输入当前密码" v-model="form.desc" /> |
|
</a-form-model-item> |
|
<a-form-model-item label="新密码" prop="desc"> |
|
<a-input placeholder="请输入新密码" v-model="form.desc" /> |
|
</a-form-model-item> |
|
</a-form-model> |
|
</a-modal>--> |
|
</div> |
|
</div> |
|
<Collection v-if="current[0] == 'collect'"></Collection> |
|
<AddrView v-if="current[0] == 'addr'"></AddrView> |
|
<div class="invoiceList"> |
|
<!-- 发票管理--> |
|
<div class="invoice" v-if="current[0] == 'invoice1'||'invoice2'||'invoice3'" v-for="(item,index) in invoiceList" :key="index"> |
|
<div class="d-flex title"> |
|
<span class="c_333 f_16">{{item.date}}</span> |
|
<span class="font_01" v-if="item.billing">已开票</span> |
|
<span class="font_01" v-if="!item.billing">待开票</span> |
|
</div> |
|
<div class="d-flex"> |
|
<div class="img"> |
|
<img :src="item.imgUrl"/> |
|
</div> |
|
<div class="invoiceInfo"> |
|
<div class="font_01">订单编号：{{item.orderNum}}</div> |
|
<div class="font_02">发票类型：{{item.type}}</div> |
|
<div class="font_02">发票内容：{{item.content}}</div> |
|
<div class="font_02">发票抬头：{{item.title}}</div> |
|
<div class="font_02">开票金额：{{item.price}}</div> |
|
</div> |
|
<div class="btnDiv d-flex"> |
|
<div class="dialogButton primary" v-if="!item.billing">申请开票</div> |
|
<div class="dialogButton primary" v-if="item.billing">申请换开</div> |
|
<div class="dialogButton default" v-if="item.billing" @click="toBillDetail(item.id)">查看详情</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 发票抬头管理--> |
|
<BillTitle v-if="current[0] == 'invoice4'"></BillTitle> |
|
|
|
</div> |
|
<div class="orderList" > |
|
<div class="item" v-for="(item,index) in allOrders" :key="index"> |
|
<div class="top d-flex"> |
|
<span>订单编号：{{item.orderNum}}</span> |
|
<span> |
|
<a class="delete">删除</a> |
|
<a class="pay" v-if="!item.pay">未支付</a> |
|
<a class="pay" v-if="item.pay">已支付</a> |
|
</span> |
|
</div> |
|
<div class="bottom d-flex"> |
|
<div class="l"> |
|
<img :src="item.url"> |
|
</div> |
|
<div class="r"> |
|
<p class="name f_18 c_333">{{item.name}}</p> |
|
<p class="kuanshi f_16 c_666 d-flex"> |
|
<span>款式：{{item.type}}<span class="line">|</span>尺码：{{item.size}}<span class="line">|</span>数量：{{item.num}}件</span> |
|
<span class="f_20 c_333">¥ {{item.price}}</span> |
|
</p> |
|
<p><span class="c_666 f_16">主辅料：{{item.material}}</span><span class="c_333 f_14"></span></p> |
|
<p class="heji d-flex"> |
|
<span class="f_20 c_1B">总计：¥ {{item.total}}</span> |
|
<span class="f_16 c_333 "> |
|
<a class="btn ljzf" v-if="!item.pay" @click="ljzf(item)">立即支付</a> |
|
<a class="btn ljzf" v-if="!item.receipt && item.pay">确认收货</a> |
|
<a class="btn ckxq" @click="openDetail(item)">查看详情</a> |
|
</span> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<password-modal ref="passwordmodal" @ok="passwordModalOk"></password-modal> |
|
<Footer></Footer> |
|
</div> |
|
|
|
</template> |
|
<script> |
|
import Header from "../components/Header/HeaderView"; |
|
import Footer from "../components/Footer/FooterView" |
|
import {mapGetters} from 'vuex' |
|
import { getFileAccessHttpUrl} from "@/api/manage" |
|
import { httpAction, getAction } from '@/api/manage' |
|
import PasswordModal from '../../system/modules/PasswordModal' |
|
import Collection from "../components/collection"; |
|
import AddrView from "../components/addrView" |
|
import BillTitle from "../components/billTitle" |
|
export default { |
|
name: "gerenzhongxin", |
|
components: { Header,Footer,PasswordModal ,Collection,AddrView,BillTitle}, |
|
data() { |
|
return { |
|
model:{ |
|
username1: "" |
|
}, |
|
current: ['allorders'],//目前打开的菜单 |
|
key:'',//当前选择的订单状态（待支付、待收货等） |
|
allOrders2:[], |
|
allOrders1:[ |
|
{ |
|
id:1, |
|
orderNum:'CN172839729', |
|
pay:false,//是否支付 |
|
receipt:false,//是否收货 |
|
url:require("../assets/cloth001.png"), |
|
name:'商品名商品名商品名商品名商品', |
|
type:'衬衫', |
|
size:'XXL', |
|
num:1, |
|
price:2456, |
|
material:'主料1，辅料2，辅料3，辅料4，辅料5，辅料6', |
|
total:5912 |
|
}, |
|
{ |
|
id:2, |
|
orderNum:'CN172839730', |
|
pay:true, |
|
receipt:true,//是否收货 |
|
url:require("../assets/cloth002.png"), |
|
name:'商品名商品名商品名商品名商品', |
|
type:'衬衫', |
|
size:'XXL', |
|
num:2, |
|
price:2456, |
|
material:'主料1，辅料2，辅料3，辅料4，辅料5，辅料6', |
|
total:5912 |
|
}, |
|
{ |
|
id:3, |
|
orderNum:'CN172839731', |
|
pay:true, |
|
receipt:false,//是否收货 |
|
url:require("../assets/cloth002.png"), |
|
name:'商品名商品名商品名商品名商品', |
|
type:'衬衫', |
|
size:'XXL', |
|
num:3, |
|
price:2456, |
|
material:'主料1，辅料2，辅料3，辅料4，辅料5，辅料6', |
|
total:5912 |
|
} |
|
],//所有订单，包括未支付、未收获等 |
|
allOrders:[],//目前展示的订单 |
|
invoiceList:[],//目前展示的发票列表 |
|
invoiceList1:[ |
|
{ |
|
id:1, |
|
date:'2022-08-19 14:09:13', |
|
billing:true,//是否已开票 |
|
imgUrl:require("../assets/cloth001.png"), |
|
orderNum:1237943879,//订单编号 |
|
type:"1",//为1为普通发票 |
|
content:"商品明细",//发票内容 |
|
title:"易创网络科技有限公司",//抬头 |
|
price:2456,//价格 |
|
}, |
|
{ |
|
id:2, |
|
date:'2022-08-20 14:09:13', |
|
billing:false,//是否已开票 |
|
imgUrl:require("../assets/cloth002.png"), |
|
orderNum:1237943880,//订单编号 |
|
type:"1",//为1为普通发票 |
|
content:"商品明细",//发票内容 |
|
title:"易创网络科技有限公司",//抬头 |
|
price:2456,//价格 |
|
}, |
|
{ |
|
id:3, |
|
date:'2022-08-30 14:09:13', |
|
billing:true,//是否已开票 |
|
imgUrl:require("../assets/cloth003.png"), |
|
orderNum:1237943881,//订单编号 |
|
type:"1",//为1为普通发票 |
|
content:"商品明细",//发票内容 |
|
title:"易创网络科技有限公司",//抬头 |
|
price:2456,//价格 |
|
}, |
|
],//全部发票数据 |
|
billTitle:[],//发票抬头列表 |
|
url: { |
|
list: "/starehouse/starehouse/list", |
|
getusername: "/sys/user/getusername", |
|
findgoods: "/sys/user/findgoods", |
|
getneeduser: "/getuserpersion/getneeduser", |
|
updateneeduser: "/getuserpersion/updateneeduser", |
|
|
|
}, |
|
labelCol: { span: 3 }, |
|
wrapperCol: { span: 21 }, |
|
other: '', |
|
/*form: { |
|
realname: '', |
|
sex: '', |
|
birthday: '', |
|
email: '', |
|
phone: '', |
|
type: [], |
|
resource: '', |
|
desc: '', |
|
},*/ |
|
form: { |
|
}, |
|
form1: { |
|
name: '', |
|
region: undefined, |
|
date1: undefined, |
|
delivery: false, |
|
type: [], |
|
resource: '', |
|
desc: '', |
|
}, |
|
rules: { |
|
/*name: [ |
|
{ required: true, message: 'Please input Activity name', trigger: 'blur' }, |
|
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }, |
|
], |
|
region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }], |
|
date1: [{ required: true, message: 'Please pick a date', trigger: 'change' }],*/ |
|
type: [ |
|
{ |
|
type: 'array', |
|
required: true, |
|
message: '请选择', |
|
trigger: 'change', |
|
}, |
|
], |
|
/*resource: [ |
|
{ required: true, message: 'Please select activity resource', trigger: 'change' }, |
|
], |
|
desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],*/ |
|
}, |
|
visible1: false, |
|
|
|
}; |
|
}, |
|
|
|
created() { |
|
this.getusername(); |
|
this.getallgoods(); |
|
this.getneeduser(); |
|
|
|
}, |
|
mounted() { |
|
if(this.current[0] == 'allorders'){ |
|
/*this.allOrders = this.allOrders1*/ |
|
this.allOrders = this.allOrders2 |
|
} |
|
}, |
|
methods: { |
|
toBillDetail(id){ |
|
this.$router.push({ |
|
path: "/shopping/billDetail", |
|
query: { |
|
id: id, |
|
}, |
|
}); |
|
}, |
|
passwordModalOk() { |
|
//TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下 |
|
}, |
|
handleCancel(e) { |
|
this.visible1 = false; |
|
}, |
|
handleChangePassword(username) { |
|
this.$refs.passwordmodal.show(username); |
|
}, |
|
handleOk(e) { |
|
console.log(e); |
|
this.visible1 = false; |
|
}, |
|
onSubmit() { |
|
this.$refs.ruleForm.validate(valid => { |
|
if (valid) { |
|
alert('submit!'); |
|
} else { |
|
console.log('error submit!!'); |
|
return false; |
|
} |
|
}); |
|
}, |
|
resetForm() { |
|
this.$refs.ruleForm.resetFields(); |
|
}, |
|
getallgoods(){ |
|
getAction(this.url.findgoods).then((res) => { |
|
if(res.success) { |
|
this.allOrders2 = res.result; |
|
this.visible = true; |
|
} else { |
|
} |
|
}); |
|
}, |
|
getusername(){ |
|
getAction(this.url.getusername).then((res) => { |
|
if(res.success) { |
|
this.model.username1 = res.result; |
|
this.visible = true; |
|
} else { |
|
} |
|
}); |
|
}, |
|
getneeduser(){ |
|
getAction(this.url.getneeduser).then((res) => { |
|
if(res.success) { |
|
this.form = res.result; |
|
this.visible = true; |
|
} else { |
|
|
|
} |
|
}); |
|
}, |
|
handuser(){ |
|
getAction(this.url.updateneeduser,{form: JSON.stringify(this.form)}).then((res) => { |
|
if(res.success) { |
|
console.log("-----------------------") |
|
this.loadData(1); |
|
} else { |
|
|
|
} |
|
}); |
|
}, |
|
...mapGetters(["nickname", "avatar", "userInfo", "addRouters", "username", "permissionList"]), |
|
//获取用户头像 |
|
getAvatar(){ |
|
return getFileAccessHttpUrl(this.avatar()) |
|
}, |
|
callback(key) { |
|
console.log(key); |
|
}, |
|
openDetail(item) { |
|
console.log('item') |
|
console.log(item) |
|
if(item.pay == false){ |
|
this.key = 'daizhifu' |
|
}else if(item.pay == true && item.receipt == false){ |
|
this.key = 'daishouhuo' |
|
}else if(item.receipt == true){ |
|
this.key = 'yiwancheng' |
|
} |
|
this.$router.push({ |
|
path: "/shopping/order", |
|
query: { |
|
id: item.id, |
|
orderNum: item.orderNum, |
|
pay: item.pay, |
|
receipt: item.receipt, |
|
key:this.key, |
|
}, |
|
}); |
|
}, |
|
ljzf(item){ |
|
this.$router.push({ |
|
path: "/shopping/pay", |
|
query: { |
|
id: item.id, |
|
}, |
|
}); |
|
}, |
|
menuChange(key){ |
|
this.current.shift() |
|
this.current.push(key.key) |
|
if(key.key == 'allorders'){ |
|
/* this.allOrders = this.allOrders1*/ |
|
this.allOrders = this.allOrders2 |
|
} |
|
else if(key.key == 'daizhifu'){ |
|
/* this.allOrders = this.allOrders1.filter(item=>item.pay == false)*/ |
|
this.allOrders = this.allOrders2.filter(item=>item.pay == false) |
|
} |
|
else if(key.key == 'daishouhuo'){ |
|
/*this.allOrders = this.allOrders1.filter(item=>item.receipt == false && item.pay == true)*/ |
|
this.allOrders = this.allOrders2.filter(item=>item.receipt == false && item.pay == true) |
|
} |
|
else if(key.key == 'yiwancheng'){ |
|
/*this.allOrders = this.allOrders1.filter(item=>item.receipt == true)*/ |
|
this.allOrders = this.allOrders2.filter(item=>item.receipt == true) |
|
}else if(key.key == 'invoice1'){//选择全部发票选项 |
|
this.invoiceList = this.invoiceList1 |
|
} |
|
else if(key.key == 'invoice2'){//选择已开发票选项 |
|
this.invoiceList = this.invoiceList1.filter(item=>item.billing == true) |
|
} |
|
else if(key.key == 'invoice3'){//选择未开发票选项 |
|
this.invoiceList = this.invoiceList1.filter(item=>item.billing == false) |
|
}else{ |
|
this.allOrders=[] |
|
this.invoiceList=[] |
|
} |
|
// else{ |
|
// this.allOrders=[] |
|
// } |
|
} |
|
}, |
|
}; |
|
</script> |
|
<style lang="less" scoped> |
|
@import '../assets/common.css'; |
|
.btnDiv{ |
|
justify-content: space-around; |
|
.dialogButton { |
|
width: 240px; |
|
height: 40px; |
|
text-align: center; |
|
line-height: 40px; |
|
transition: all 0.2s; |
|
} |
|
.default { |
|
border: 2px solid #1b1b1b; |
|
color: #1b1b1b; |
|
margin-right: 20px; |
|
|
|
&:hover { |
|
border: 2px solid #1b1b1b; |
|
color: #fff; |
|
opacity: 0.8; |
|
background-color: #1b1b1b; |
|
} |
|
} |
|
.primary { |
|
background: #1b1b1b; |
|
border: 2px solid #1b1b1b; |
|
color: #e5dfd9; |
|
&:hover { |
|
opacity: 0.8; |
|
} |
|
} |
|
} |
|
.font_01{ |
|
color: #333; |
|
font-size: 16px; |
|
font-weight: 500; |
|
} |
|
.font_02{ |
|
color: #333; |
|
font-size: 16px; |
|
} |
|
.bg{ |
|
width: 100%; |
|
height: 250px; |
|
background-image: url("../assets/bg05.png"); |
|
} |
|
.info{ |
|
flex-direction: column; |
|
align-items: center; |
|
margin-top: -75px; |
|
img{ |
|
width: 150px; |
|
height: 150px; |
|
margin-bottom: 30px; |
|
} |
|
p{ |
|
margin-bottom: 15px; |
|
} |
|
a{ |
|
color: #666; |
|
font-size: 16px; |
|
margin-bottom: 60px; |
|
} |
|
} |
|
.menu{width: 1114px;margin:0 auto} |
|
/deep/ .ant-menu{ |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
.invoiceList{ |
|
padding-left: 20px; |
|
padding-right: 20px; |
|
width: 1114px;margin:0 auto; |
|
.d-flex{ |
|
justify-content: space-between; |
|
} |
|
.invoice{ |
|
padding-top: 40px; |
|
padding-bottom: 20px; |
|
border-bottom: 1px solid #DADADA; |
|
.title{ |
|
margin-bottom: 25px; |
|
} |
|
.img{ |
|
width: 232px; |
|
height: 232px; |
|
img{ |
|
width: 232px; |
|
height: 232px; |
|
} |
|
} |
|
.invoiceInfo{ |
|
width: 483px; |
|
.font_01{ |
|
margin-bottom: 26px; |
|
} |
|
.font_02{ |
|
margin-bottom: 12px; |
|
} |
|
} |
|
.btnDiv{ |
|
width: 145px; |
|
flex-direction: column; |
|
justify-content: flex-end; |
|
padding-bottom: 26px; |
|
.dialogButton{ |
|
width: 100%; |
|
margin-bottom: 17px; |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
} |
|
.orderList{ |
|
/*margin-top: 60px;*/ |
|
width: 1114px;margin:0 auto; |
|
padding: 20px; |
|
.item{ |
|
border-bottom: 1px solid #DADADA; |
|
padding-top: 30px; |
|
.top{ |
|
justify-content: space-between; |
|
color: #333; |
|
.delete{ |
|
text-decoration: underline; |
|
color: #1B1B1B; |
|
margin-right: 20px; |
|
} |
|
.pay{ |
|
color: #E53E41; |
|
} |
|
} |
|
.bottom{ |
|
justify-content: space-between; |
|
.l{ |
|
img{ |
|
width: 230px; |
|
height: 230px; |
|
} |
|
} |
|
.r{ |
|
min-width: 800px; |
|
padding-top: 30px; |
|
.name{ |
|
font-weight: 500; |
|
} |
|
.kuanshi{ |
|
justify-content: space-between; |
|
} |
|
.line{ |
|
margin-left: 30px; |
|
margin-right: 30px; |
|
} |
|
.heji{ |
|
justify-content: space-between; |
|
.btn{ |
|
display: inline-block; |
|
width: 145px; |
|
height: 40px; |
|
line-height: 40px; |
|
text-align: center; |
|
} |
|
.ljzf{ |
|
background: #333333; |
|
color: #fff; |
|
margin-right: 20px; |
|
border: 1px solid #333333; |
|
|
|
&:hover{ |
|
background: rgba(0,0,0,0.7); |
|
/*color: #333;*/ |
|
} |
|
} |
|
.ckxq{ |
|
color: #333; |
|
border: 1px solid #333333; |
|
&:hover{ |
|
background: #333; |
|
color: #fff; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.mall{ |
|
padding: 50px 100px; |
|
.ant-checkbox-wrapper + .ant-checkbox-wrapper{ |
|
margin-left: 0; |
|
} |
|
.xgmm{ |
|
color: #1b1b1b; |
|
transition: all 0.32s; |
|
&:hover{ |
|
opacity: 0.8; |
|
} |
|
} |
|
} |
|
</style> |
|
|
|
|