初始项目
This commit is contained in:
liupopo
279
mallplusui-web-pc/src/page/User/children/addressList.vue
Normal file
279
mallplusui-web-pc/src/page/User/children/addressList.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<div>
|
||||
<y-shelf title="收货地址">
|
||||
<span slot="right"><y-button text="添加收货地址" style="margin: 0" @btnClick="update()"></y-button></span>
|
||||
<div slot="content">
|
||||
<!--标题-->
|
||||
<div class="table-title">
|
||||
<span class="name">姓名</span> <span class="address">详细地址</span> <span class="tel">电话</span>
|
||||
</div>
|
||||
<div v-if="addList.length">
|
||||
<div class="address-item" v-for="(item,i) in addList" :key="i">
|
||||
<div class="name">{{item.name}}</div>
|
||||
<div class="address-msg">{{item.detailAddress}}</div>
|
||||
<div class="telephone">{{item.phoneNumber}}</div>
|
||||
<div class="defalut">
|
||||
<a @click="changeDef(item)"
|
||||
href="javascript:;"
|
||||
v-text="item.defaultStatus==1?'( 默认地址 )':'设为默认'"
|
||||
:class="{'defalut-address':item.defaultStatus}"></a>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<el-button type="primary" icon="edit" size="small" @click="update(item)"></el-button>
|
||||
<el-button type="danger" icon="delete" size="small" :data-id="item.id" @click="del(item.id,i)"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div style="padding: 80px 0;text-align: center">
|
||||
<div style="font-size: 20px">你还未添加收货地址</div>
|
||||
<div style="margin: 20px ">
|
||||
<y-button text="添加地址" @btnClick="update()"></y-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</y-shelf>
|
||||
<y-popup :open="popupOpen" @close='popupOpen=false' :title="popupTitle">
|
||||
<div slot="content" class="md" :data-id="msg.id">
|
||||
<div>
|
||||
<input type="text" placeholder="收货人姓名" v-model="msg.name">
|
||||
</div>
|
||||
<div>
|
||||
<input type="number" placeholder="手机号码" v-model="msg.phoneNumber">
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" placeholder="收货地址" v-model="msg.detailAddress">
|
||||
</div>
|
||||
<div>
|
||||
<el-checkbox class="auto-login" v-model="msg.defaultStatus==0">设为默认</el-checkbox>
|
||||
</div>
|
||||
<y-button text='保存'
|
||||
class="btn"
|
||||
:classStyle="btnHighlight?'main-btn':'disabled-btn'"
|
||||
@btnClick="save({id:msg.id,name:msg.name,phoneNumber:msg.phoneNumber,detailAddress:msg.detailAddress,defaultStatus:msg.defaultStatus})">
|
||||
</y-button>
|
||||
</div>
|
||||
</y-popup>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { addressList, addressUpdate, addressAdd, addressDel } from '/api/goods'
|
||||
import YButton from '/components/YButton'
|
||||
import YPopup from '/components/popup'
|
||||
import YShelf from '/components/shelf'
|
||||
import { getStore } from '/utils/storage'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
addList: [],
|
||||
popupOpen: false,
|
||||
popupTitle: '管理收货地址',
|
||||
msg: {
|
||||
id: '',
|
||||
name: '',
|
||||
phoneNumber: '',
|
||||
detailAddress: '',
|
||||
defaultStatus: false
|
||||
},
|
||||
userId: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
btnHighlight () {
|
||||
let msg = this.msg
|
||||
return msg.name && msg.phoneNumber && msg.detailAddress
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
message (m) {
|
||||
this.$message.error({
|
||||
message: m
|
||||
})
|
||||
},
|
||||
_addressList () {
|
||||
addressList({userId: this.userId}).then(res => {
|
||||
let data = res.data
|
||||
if (data.length) {
|
||||
this.addList = res.data
|
||||
this.id = res.data[0].id || '1'
|
||||
} else {
|
||||
this.addList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
_addressUpdate (params) {
|
||||
addressUpdate(params).then(res => {
|
||||
this._addressList()
|
||||
})
|
||||
},
|
||||
_addressAdd (params) {
|
||||
addressAdd(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this._addressList()
|
||||
} else {
|
||||
this.message(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
changeDef (item) {
|
||||
if (!item.defaultStatus) {
|
||||
item.defaultStatus = true
|
||||
this._addressUpdate(item)
|
||||
}
|
||||
return false
|
||||
},
|
||||
// 保存
|
||||
save (p) {
|
||||
this.popupOpen = false
|
||||
if (p.id) {
|
||||
this._addressUpdate(p)
|
||||
} else {
|
||||
delete p.id
|
||||
this._addressAdd(p)
|
||||
}
|
||||
},
|
||||
// 删除
|
||||
del (id, i) {
|
||||
addressDel({id: id}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.addList.splice(i, 1)
|
||||
} else {
|
||||
this.message('删除失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 修改
|
||||
update (item) {
|
||||
this.popupOpen = true
|
||||
if (item) {
|
||||
this.popupTitle = '管理收货地址'
|
||||
this.msg.name = item.name
|
||||
this.msg.phoneNumber = item.phoneNumber
|
||||
this.msg.detailAddress = item.detailAddress
|
||||
this.msg.defaultStatus = item.defaultStatus
|
||||
this.msg.id = item.id
|
||||
} else {
|
||||
this.popupTitle = '新增收货地址'
|
||||
this.msg.name = ''
|
||||
this.msg.phoneNumber = ''
|
||||
this.msg.detailAddress = ''
|
||||
this.msg.defaultStatus = false
|
||||
this.msg.id = ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
var userInfo = getStore('userInfo');
|
||||
if (!userInfo) {
|
||||
this.$router.push({ path: '/login' })
|
||||
}
|
||||
this.userId = getStore('userId')
|
||||
this._addressList()
|
||||
},
|
||||
components: {
|
||||
YButton,
|
||||
YPopup,
|
||||
YShelf
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.table-title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
line-height: 38px;
|
||||
height: 38px;
|
||||
padding: 0 0 0 38px;
|
||||
font-size: 12px;
|
||||
background: #eee;
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
border-bottom-color: rgba(0, 0, 0, .08);
|
||||
.name {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
span {
|
||||
width: 137px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
color: #838383;
|
||||
}
|
||||
.address {
|
||||
margin-left: 115px;
|
||||
}
|
||||
.tel {
|
||||
margin-left: 195px;
|
||||
}
|
||||
}
|
||||
|
||||
.address-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 115px;
|
||||
text-align: center;
|
||||
.name {
|
||||
width: 106px;
|
||||
}
|
||||
.address-msg {
|
||||
flex: 1;
|
||||
}
|
||||
.telephone {
|
||||
width: 160px;
|
||||
}
|
||||
.defalut {
|
||||
width: 80px;
|
||||
> a {
|
||||
text-align: center;
|
||||
/*display: none;*/
|
||||
}
|
||||
}
|
||||
.operation {
|
||||
width: 135px;
|
||||
a {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.defalut > a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address-item + .address-item {
|
||||
border-top: 1px solid #CFCFCF;
|
||||
}
|
||||
|
||||
.defalut-address {
|
||||
color: #626262;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.md {
|
||||
> div {
|
||||
text-align: left;
|
||||
margin-bottom: 15px;
|
||||
> input {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 3px 5px -4px rgba(0, 0, 0, .4) inset, -1px 0 3px -2px rgba(0, 0, 0, .1) inset;
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
line-height: 48px
|
||||
}
|
||||
</style>
|
||||
28
mallplusui-web-pc/src/page/User/children/aihuishou.vue
Normal file
28
mallplusui-web-pc/src/page/User/children/aihuishou.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<y-shelf title="以旧换新">
|
||||
<div slot="content">
|
||||
<div style="padding: 100px 0;text-align: center">
|
||||
<img src="/static/images/smile.png">
|
||||
<br>
|
||||
<span class="support">请问你拿什么和我换新</span>
|
||||
</div>
|
||||
</div>
|
||||
</y-shelf>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import YShelf from '/components/shelf'
|
||||
export default {
|
||||
components: {
|
||||
YShelf
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.support {
|
||||
line-height: 2em;
|
||||
font-size: 22px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
28
mallplusui-web-pc/src/page/User/children/coupon.vue
Normal file
28
mallplusui-web-pc/src/page/User/children/coupon.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<y-shelf title="我的优惠">
|
||||
<div slot="content">
|
||||
<div style="padding: 100px 0;text-align: center">
|
||||
<img src="/static/images/no-search.png">
|
||||
<br>
|
||||
<span class="no-discount">您目前还没有优惠券</span>
|
||||
</div>
|
||||
</div>
|
||||
</y-shelf>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import YShelf from '/components/shelf'
|
||||
export default {
|
||||
components: {
|
||||
YShelf
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.no-discount {
|
||||
line-height: 2em;
|
||||
font-size: 22px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
332
mallplusui-web-pc/src/page/User/children/information.vue
Normal file
332
mallplusui-web-pc/src/page/User/children/information.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<div>
|
||||
<y-shelf title="账户资料">
|
||||
<div slot="content">
|
||||
<div class="avatar-box">
|
||||
<div class=img-box><img :src="userInfo.icon" alt=""></div>
|
||||
<div class="r-box">
|
||||
<h3 style="margin-left: 13px;">修改头像</h3>
|
||||
<y-button text="上传头像" classStyle="main-btn" style="margin: 0;" @btnClick="editAvatar()"></y-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-avatar" v-if="editAvatarShow">
|
||||
<y-shelf title="设置头像">
|
||||
<span slot="right">
|
||||
<span class="close" @click="editAvatarShow=false">
|
||||
<svg t="1501234940517" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="3014" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="20" height="20"><path
|
||||
d="M941.576 184.248l-101.824-101.824L512 410.176 184.248 82.424 82.424 184.248 410.168 512l-327.744 327.752 101.824 101.824L512 613.824l327.752 327.752 101.824-101.824L613.832 512z"
|
||||
fill="#cdcdcd" p-id="3015"></path></svg>
|
||||
</span>
|
||||
</span>
|
||||
<div slot="content" class="content">
|
||||
<div class="edit-l">
|
||||
<div style="width: 100px;height: 100px;border: 1px solid #ccc;margin-bottom: 20px;overflow: hidden;">
|
||||
<div class="show-preview"
|
||||
:style="{'width': previews.w + 'px','height': previews.h + 'px','overflow': 'hidden','zoom':option.zoom}">
|
||||
<div :style="previews.div">
|
||||
<img :src="option.img"
|
||||
:style="previews.img"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 10px 0 ">头像预览</div>
|
||||
<div class="btn">
|
||||
<a href="javascript:;">重新选择</a>
|
||||
<input type="file" value="上传头像" @change="upimg($event)"></div>
|
||||
</div>
|
||||
<div class="edit-r">
|
||||
<div>
|
||||
<div class="big" id="cropper-target" v-if="option.img">
|
||||
<vueCropper
|
||||
:img="option.img"
|
||||
@realTime="realTime"
|
||||
ref="cropper"
|
||||
:outputSize="example2.size"
|
||||
:info="example2.info"
|
||||
:canScale="example2.canScale"
|
||||
:autoCrop="example2.autoCrop"
|
||||
:autoCropWidth="example2.width"
|
||||
:autoCropHeight="example2.height"
|
||||
:fixed="example2.fixed"
|
||||
></vueCropper>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="bootom-btn pa">
|
||||
<y-button style="width: 140px;height: 40px;line-height: 40px"
|
||||
text="取消"
|
||||
@btnClick="editAvatarShow=false">
|
||||
</y-button>
|
||||
<y-button style="width: 140px;height: 40px;line-height: 40px"
|
||||
text="确定"
|
||||
classStyle="main-btn"
|
||||
@btnClick="cropper">
|
||||
</y-button>
|
||||
</div>
|
||||
</div>
|
||||
</y-shelf>
|
||||
</div>
|
||||
</div>
|
||||
</y-shelf>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import YButton from '/components/YButton'
|
||||
import { upload } from '/api/index'
|
||||
import YShelf from '/components/shelf'
|
||||
import vueCropper from 'vue-cropper'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import { getStore } from '/utils/storage'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
userInfo:null,
|
||||
imgSrc: '',
|
||||
editAvatarShow: false,
|
||||
cropContext: '',
|
||||
cropperImg: '',
|
||||
previews: {},
|
||||
option: {
|
||||
img: '',
|
||||
zoom: 0
|
||||
},
|
||||
fixedNumber: [1, 1],
|
||||
example2: {
|
||||
info: true,
|
||||
size: 1,
|
||||
canScale: false,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 300,
|
||||
autoCropHeight: 250,
|
||||
// 开启宽度和高度比例
|
||||
fixed: true
|
||||
},
|
||||
userId: '',
|
||||
token: ''
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'RECORD_USERINFO'
|
||||
]),
|
||||
message (m) {
|
||||
this.$message(m)
|
||||
},
|
||||
messageSuccess (m) {
|
||||
this.$message({
|
||||
message: m,
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
messageFail (m) {
|
||||
this.$message.error({
|
||||
message: m
|
||||
})
|
||||
},
|
||||
upimg (e) {
|
||||
var file = e.target.files[0]
|
||||
if (file.size > 1048576) {
|
||||
this.messageFail('图片大小不得超过1Mb')
|
||||
return false
|
||||
}
|
||||
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
|
||||
this.messageFail('图片类型仅支持.gif,jpeg,jpg,png,bmp')
|
||||
return false
|
||||
}
|
||||
var reader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
reader.onload = (e) => {
|
||||
this.option.img = e.target.result
|
||||
}
|
||||
},
|
||||
cropper () {
|
||||
this.message('上传中...')
|
||||
if (this.option.img) {
|
||||
this.$refs.cropper.getCropData((data) => {
|
||||
this.imgSrc = data
|
||||
upload({userId: this.userId, token: this.token, imgData: data}).then(res => {
|
||||
if (res.code === 200) {
|
||||
let path = res.data
|
||||
let info = this.userInfo
|
||||
info.file = path
|
||||
this.RECORD_USERINFO({info: info})
|
||||
this.editAvatarShow = false
|
||||
this.messageSuccess('上传成功')
|
||||
} else {
|
||||
this.messageFail(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.messageFail('别玩我啊 先选照骗')
|
||||
}
|
||||
},
|
||||
editAvatar () {
|
||||
this.editAvatarShow = true
|
||||
},
|
||||
realTime (data) {
|
||||
this.previews = data
|
||||
let w = 100 / data.w
|
||||
this.option.zoom = w
|
||||
}
|
||||
},
|
||||
created () {
|
||||
var userInfo = getStore('userInfo');
|
||||
if (!userInfo) {
|
||||
this.$router.push({ path: '/login' })
|
||||
}
|
||||
this.userInfo=userInfo;
|
||||
this.token = getStore('token')
|
||||
},
|
||||
components: {
|
||||
YButton,
|
||||
YShelf,
|
||||
vueCropper
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../assets/style/mixin";
|
||||
|
||||
.avatar-box {
|
||||
height: 124px;
|
||||
display: flex;
|
||||
margin: 0 30px 30px;
|
||||
border-bottom: #dadada solid 1px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.img-box {
|
||||
@include wh(80px);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
@include wh(100%)
|
||||
}
|
||||
.r-box {
|
||||
margin-left: 20px;
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 修改头像
|
||||
.edit-avatar {
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@include wh(100%);
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
@extend %block-center;
|
||||
.content {
|
||||
display: flex;
|
||||
padding: 45px 100px 0;
|
||||
}
|
||||
> div {
|
||||
box-sizing: content-box;
|
||||
@include wh(700px, 500px);
|
||||
margin: 0;
|
||||
}
|
||||
.btn {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
text-shadow: rgba(255, 255, 255, .496094) 0 1px 0;
|
||||
border: 1px solid #E6E6E6;
|
||||
border-radius: 10px;
|
||||
&:hover {
|
||||
}
|
||||
a {
|
||||
color: #666;
|
||||
display: block;
|
||||
@include wh(100%);
|
||||
}
|
||||
}
|
||||
input[type=file] {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
border: 15px solid #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
.edit-l {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.edit-r {
|
||||
margin-left: 20px;
|
||||
flex: 1;
|
||||
> div {
|
||||
border: 1px solid #ccc;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding: 0 10px;
|
||||
@extend %block-center;
|
||||
&:hover {
|
||||
svg {
|
||||
transition: all 1s;
|
||||
transform: rotate(360deg);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
path {
|
||||
fill: #8a8a8a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.big {
|
||||
display: block;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.bootom-btn {
|
||||
padding: 0 15px;
|
||||
border-top: 1px solid #E6E6E6;
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
302
mallplusui-web-pc/src/page/User/children/order.vue
Normal file
302
mallplusui-web-pc/src/page/User/children/order.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<div>
|
||||
<y-shelf title="我的订单">
|
||||
<div slot="content">
|
||||
<div v-loading="loading" element-loading-text="加载中..." v-if="orderLists.length>0" style="min-height: 10vw;">
|
||||
<div v-for="(item,i) in orderLists" :key="i">
|
||||
<div class="gray-sub-title cart-title">
|
||||
<div class="first">
|
||||
<div>
|
||||
<span class="date" v-text="item.createDate"></span>
|
||||
<span class="order-id"> 订单号： <a @click="orderDetail(item.id)">{{item.orderSn}}</a> </span>
|
||||
</div>
|
||||
<div class="f-bc">
|
||||
<span class="price">单价</span>
|
||||
<span class="num">数量</span>
|
||||
<span class="operation">商品操作</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="last">
|
||||
<span class="sub-total">实付金额</span>
|
||||
<span class="order-detail"> <a @click="orderDetail(item.id)">查看详情 ><em class="icon-font"></em></a> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pr">
|
||||
<div class="cart" v-for="(good,j) in item.orderItemList" :key="j">
|
||||
<div class="cart-l" :class="{bt:j>0}">
|
||||
<div class="car-l-l">
|
||||
<div class="img-box"><a @click="goodsDetails(good.productId)"><img :src="good.productPic" alt=""></a></div>
|
||||
<div class="ellipsis"><a style="color: #626262;" @click="goodsDetails(good.productId)">{{good.productName}}</a></div>
|
||||
</div>
|
||||
<div class="cart-l-r">
|
||||
<div>¥ {{Number(good.productPrice).toFixed(2)}}</div>
|
||||
<div class="num">{{good.productName}}</div>
|
||||
<div class="type">
|
||||
<el-button style="margin-left:20px" @click="_delOrder(item.orderId,i)" type="danger" size="small" v-if="j<1" class="del-order">删除此订单</el-button>
|
||||
<!-- <a @click="_delOrder(item.orderId,i)" href="javascript:;" v-if="j<1" class="del-order">删除此订单</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-r">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prod-operation pa" style="right: 0;top: 0;">
|
||||
<div class="total">¥ {{item.totalAmount}}</div>
|
||||
<div v-if="item.status === '0'">
|
||||
<el-button @click="orderPayment(item.orderId)" type="primary" size="small">现在付款</el-button>
|
||||
</div>
|
||||
<div class="status" v-if="item.status !== '0'"> {{getOrderStatus(item.status)}} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-loading="loading" element-loading-text="加载中..." class="no-info" v-else>
|
||||
<div style="padding: 100px 0;text-align: center">
|
||||
你还未创建过订单
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</y-shelf>
|
||||
<div style="float:right">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[5, 10, 20, 50]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { orderList, delOrder } from '/api/goods'
|
||||
import YShelf from '/components/shelf'
|
||||
import { getStore } from '/utils/storage'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
orderLists: [0],
|
||||
userId: '',
|
||||
orderStatus: '',
|
||||
loading: true,
|
||||
currentPage: 1,
|
||||
pageSize: 5,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
message (m) {
|
||||
this.$message.error({
|
||||
message: m
|
||||
})
|
||||
},
|
||||
handleSizeChange (val) {
|
||||
this.pageSize = val
|
||||
this._orderList()
|
||||
},
|
||||
handleCurrentChange (val) {
|
||||
this.currentPage = val
|
||||
this._orderList()
|
||||
},
|
||||
orderPayment (orderId) {
|
||||
window.open(window.location.origin + '#/order/payment?orderId=' + orderId)
|
||||
},
|
||||
goodsDetails (id) {
|
||||
window.open(window.location.origin + '#/goodsDetails?id=' + id)
|
||||
},
|
||||
orderDetail (orderId) {
|
||||
this.$router.push({
|
||||
path: 'orderDetail',
|
||||
query: {
|
||||
orderId: orderId
|
||||
}
|
||||
})
|
||||
},
|
||||
getOrderStatus (status) {
|
||||
if (status === '1') {
|
||||
return '支付审核中'
|
||||
} else if (status === '2') {
|
||||
return '待发货'
|
||||
} else if (status === '3') {
|
||||
return '待收货'
|
||||
} else if (status === '4') {
|
||||
return '交易成功'
|
||||
} else if (status === '5') {
|
||||
return '交易关闭'
|
||||
} else if (status === '6') {
|
||||
return '支付失败'
|
||||
}
|
||||
},
|
||||
_orderList () {
|
||||
var userInfo = getStore('userInfo');
|
||||
if (!userInfo) {
|
||||
this.$router.push({ path: '/login' })
|
||||
}
|
||||
let params = {
|
||||
|
||||
pageSize: this.pageSize,
|
||||
pageNum: this.currentPage
|
||||
|
||||
}
|
||||
orderList(params).then(res => {
|
||||
this.orderLists = res.data.records
|
||||
this.total = res.data.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
_delOrder (orderId, i) {
|
||||
let params = {
|
||||
|
||||
orderId: orderId
|
||||
|
||||
}
|
||||
delOrder(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.orderLists.splice(i, 1)
|
||||
} else {
|
||||
this.message('删除失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.userId = getStore('userId')
|
||||
this._orderList()
|
||||
},
|
||||
components: {
|
||||
YShelf
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../assets/style/mixin";
|
||||
|
||||
.gray-sub-title {
|
||||
height: 38px;
|
||||
padding: 0 24px;
|
||||
background: #EEE;
|
||||
border-top: 1px solid #DBDBDB;
|
||||
border-bottom: 1px solid #DBDBDB;
|
||||
line-height: 38px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
.first {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
.f-bc {
|
||||
> span {
|
||||
width: 112px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.last {
|
||||
width: 230px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
border-left: 1px solid #ccc;
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bt {
|
||||
border-top: 1px solid #EFEFEF;
|
||||
}
|
||||
|
||||
.date {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.order-id {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.cart {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
&:hover {
|
||||
.del-order {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.del-order {
|
||||
display: none;
|
||||
}
|
||||
.cart-l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 15px 0;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
right: -1px;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
background-color: #EFEFEF;
|
||||
height: 100%;
|
||||
}
|
||||
.ellipsis {
|
||||
margin-left: 20px;
|
||||
width: 220px;
|
||||
}
|
||||
.img-box {
|
||||
border: 1px solid #EBEBEB;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
@include wh(80px);
|
||||
}
|
||||
.cart-l-r {
|
||||
display: flex;
|
||||
> div {
|
||||
text-align: center;
|
||||
width: 112px;
|
||||
}
|
||||
}
|
||||
.car-l-l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.cart-r {
|
||||
width: 230px;
|
||||
display: flex;
|
||||
span {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prod-operation {
|
||||
height: 110px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 254px;
|
||||
div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
div:last-child {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
462
mallplusui-web-pc/src/page/User/children/orderDetail.vue
Normal file
462
mallplusui-web-pc/src/page/User/children/orderDetail.vue
Normal file
@@ -0,0 +1,462 @@
|
||||
<template>
|
||||
<div>
|
||||
<y-shelf v-bind:title="orderTitle">
|
||||
<div slot="content">
|
||||
<div v-loading="loading" element-loading-text="加载中..." style="min-height: 10vw;" v-if="orderList.length">
|
||||
<div class="status" v-if="status !== -1 && status !== 6">
|
||||
<el-steps :space="200" :active="status">
|
||||
<el-step title="下单" v-bind:description="createTime"></el-step>
|
||||
<el-step title="付款" v-bind:description="payTime"></el-step>
|
||||
<el-step title="配货" description=""></el-step>
|
||||
<el-step title="出库" description=""></el-step>
|
||||
<el-step title="交易成功" v-bind:description="finishTime"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div class="status-close" v-if="status === -1">
|
||||
<el-steps :space="780" :active="2">
|
||||
<el-step title="下单" v-bind:description="createTime"></el-step>
|
||||
<el-step title="交易关闭" v-bind:description="closeTime"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div class="status-close" v-if="status === 6">
|
||||
<el-steps :space="780" :active="2">
|
||||
<el-step title="下单" v-bind:description="createTime"></el-step>
|
||||
<el-step title="交易关闭" v-bind:description="closeTime"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div class="status-now" v-if="status === 1">
|
||||
<ul>
|
||||
<li class="status-title"><h3>订单状态：待付款</h3></li>
|
||||
<li class="button">
|
||||
<el-button @click="orderPayment(orderId)" type="primary" size="small">现在付款</el-button>
|
||||
<el-button @click="_cancelOrder()" size="small">取消订单</el-button>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="realtime">
|
||||
<span>您的付款时间还有 </span>
|
||||
<span class="red"><countDown v-bind:endTime="countTime" endText="已结束"></countDown></span>
|
||||
<span>，超时后订单将自动取消。</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="status-now" v-if="status === 2">
|
||||
<ul>
|
||||
<li class="status-title"><h3>订单状态：已支付，待系统审核确认</h3></li>
|
||||
</ul>
|
||||
<p class="realtime">
|
||||
<span>请耐心等待审核，审核结果将发送到您的邮箱，并且您所填写的捐赠数据将显示在捐赠表中。</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="status-now" v-if="status === -1 || status === 6">
|
||||
<ul>
|
||||
<li class="status-title"><h3>订单状态：已关闭</h3></li>
|
||||
</ul>
|
||||
<p class="realtime">
|
||||
<span>您的订单已关闭。</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="status-now" v-if="status === 5">
|
||||
<ul>
|
||||
<li class="status-title"><h3>订单状态：已完成</h3></li>
|
||||
</ul>
|
||||
<p class="realtime">
|
||||
<span>您的订单已交易成功，感谢您的惠顾！</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="gray-sub-title cart-title">
|
||||
<div class="first">
|
||||
<div>
|
||||
<span class="order-id">商品名称</span>
|
||||
</div>
|
||||
<div class="f-bc">
|
||||
<span class="price">单价</span>
|
||||
<span class="num">数量</span>
|
||||
<span class="operation">小计</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--商品-->
|
||||
<div class="goods-table">
|
||||
<div class="cart-items" v-for="(item,i) in orderList" :key="i">
|
||||
<a @click="goodsDetails(item.productId)" class="img-box"><img :src="item.productPic" alt=""></a>
|
||||
<div class="name-cell ellipsis">
|
||||
<a @click="goodsDetails(item.productId)" title="" target="_blank">{{item.productName}}</a>
|
||||
</div>
|
||||
<div class="n-b">
|
||||
<div class="price">¥ {{Number(item.productPrice).toFixed(2)}}</div>
|
||||
<div class="goods-num">{{item.productQuantity}}</div>
|
||||
<div class="subtotal"> ¥ {{Number(item.productPrice * item.productQuantity).toFixed(2)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--合计-->
|
||||
<div class="order-discount-line">
|
||||
<p style="font-size: 14px;font-weight: bolder;"> <span style="padding-right:47px">商品总计：</span>
|
||||
<span style="font-size: 16px;font-weight: 500;line-height: 32px;">¥ {{orderTotal}}</span>
|
||||
</p>
|
||||
<p><span style="padding-right:30px">运费：</span><span style="font-weight: 700;">+ ¥ 0.00</span></p>
|
||||
<p class="price-total"><span>应付金额：</span><span class="price-red">¥ {{payTotal}}</span></p>
|
||||
</div>
|
||||
|
||||
<div class="gray-sub-title cart-title">
|
||||
<div class="first">
|
||||
<div>
|
||||
<span class="order-id">收货信息</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 155px;padding: 20px 30px;">
|
||||
<p class="address">姓名：{{ userName }}</p>
|
||||
<p class="address">联系电话：{{ tel }}</p>
|
||||
<p class="address">详细地址：{{ streetName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-loading="loading" element-loading-text="加载中..." v-else>
|
||||
<div style="padding: 100px 0;text-align: center">
|
||||
获取该订单信息失败
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</y-shelf>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getOrderDet, cancelOrder } from '/api/goods'
|
||||
import YShelf from '/components/shelf'
|
||||
import { getStore } from '/utils/storage'
|
||||
import countDown from '/components/countDown'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
orderList: [0],
|
||||
userId: '',
|
||||
status: 0,
|
||||
orderId: '',
|
||||
userName: '',
|
||||
tel: '',
|
||||
streetName: '',
|
||||
orderTitle: '',
|
||||
createTime: '',
|
||||
payTime: '',
|
||||
closeTime: '',
|
||||
finishTime: '',
|
||||
orderTotal: '',
|
||||
payTotal: '',
|
||||
loading: true,
|
||||
countTime: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
message (m) {
|
||||
this.$message.error({
|
||||
message: m
|
||||
})
|
||||
},
|
||||
orderPayment (orderId) {
|
||||
window.open(window.location.origin + '#/order/payment?orderId=' + orderId)
|
||||
},
|
||||
goodsDetails (id) {
|
||||
window.open(window.location.origin + '#/goodsDetails?id=' + id)
|
||||
},
|
||||
_getOrderDet () {
|
||||
let params = {
|
||||
|
||||
id: this.orderId
|
||||
|
||||
}
|
||||
getOrderDet(params).then(res => {
|
||||
if (res.data.status === '0') {
|
||||
this.status = 1
|
||||
} else if (res.data.status === '1') {
|
||||
this.status = 2
|
||||
} else if (res.data.status === '4') {
|
||||
this.status = 5
|
||||
} else if (res.data.status === '5') {
|
||||
this.status = -1
|
||||
} else if (res.data.status === '6') {
|
||||
this.status = 6
|
||||
}
|
||||
this.orderList = res.data.orderItemList
|
||||
this.payTotal = res.data.payAmount
|
||||
this.orderTotal = res.data.totalAmount
|
||||
this.userName = res.data.receiverName
|
||||
this.tel = res.data.receiverPhone
|
||||
this.streetName = res.data.receiverDetailAddress
|
||||
this.createTime = res.data.createTime
|
||||
this.closeTime = res.data.createTime
|
||||
this.payTime = res.data.paymentTime
|
||||
if (this.status === 5) {
|
||||
this.finishTime = res.data.deliveryTime
|
||||
} else {
|
||||
this.countTime = res.data.deliveryTime
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
_cancelOrder () {
|
||||
cancelOrder({orderId: this.orderId}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this._getOrderDet()
|
||||
} else {
|
||||
this.message('取消失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.userId = getStore('userId')
|
||||
this.orderId = this.$route.query.orderId
|
||||
this.orderTitle = '订单号：' + this.orderId
|
||||
this._getOrderDet()
|
||||
},
|
||||
components: {
|
||||
YShelf,
|
||||
countDown
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../assets/style/mixin";
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
margin: 50px -150px 20px 60px;
|
||||
}
|
||||
|
||||
.status-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
margin: 50px -800px 20px 60px;
|
||||
}
|
||||
|
||||
.status-now {
|
||||
background: #F6F6F6;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 5px;
|
||||
padding: 22px 30px 20px;
|
||||
margin: 0 30px 30px 30px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.button {
|
||||
float: right;
|
||||
margin: -37px 0 20px 0;
|
||||
}
|
||||
|
||||
.realtime {
|
||||
border-top: 1px solid #dcdcdc;
|
||||
margin-top: 20px;
|
||||
padding-top: 26px;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #d44d44;
|
||||
}
|
||||
|
||||
.address {
|
||||
line-height: 38px;
|
||||
word-wrap: break-word;
|
||||
word-spacing: normal;
|
||||
word-break: break-all;
|
||||
color: #626262;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
border: 1px solid #EBEBEB;
|
||||
margin-left: -80px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
@include wh(80px);
|
||||
}
|
||||
|
||||
.goods-table {
|
||||
.n-b {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> div {
|
||||
color: #626262;
|
||||
font-weight: 700;
|
||||
width: 165px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.cart-items {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 110px;
|
||||
padding: 15px 0 15px 111px;
|
||||
border-bottom: 1px solid #EFEFEF;
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
padding-left: 107px;
|
||||
}
|
||||
.goods-num {
|
||||
padding-left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.order-discount-line {
|
||||
padding: 22px 30px 20px;
|
||||
line-height: 24px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
&:first-child {
|
||||
line-height: 32px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
.gray-sub-title {
|
||||
height: 38px;
|
||||
padding: 0 24px;
|
||||
background: #EEE;
|
||||
border-top: 1px solid #DBDBDB;
|
||||
border-bottom: 1px solid #DBDBDB;
|
||||
line-height: 38px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
.first {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
.f-bc {
|
||||
> span {
|
||||
width: 130px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.last {
|
||||
width: 230px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
border-left: 1px solid #ccc;
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bt {
|
||||
border-top: 1px solid #EFEFEF;
|
||||
}
|
||||
|
||||
.date {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.order-id {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.cart {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
&:hover {
|
||||
.del-order {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.del-order {
|
||||
display: none;
|
||||
}
|
||||
.cart-l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 15px 0;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
right: -1px;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
background-color: #EFEFEF;
|
||||
height: 100%;
|
||||
}
|
||||
.ellipsis {
|
||||
margin-left: 20px;
|
||||
width: 220px;
|
||||
}
|
||||
.img-box {
|
||||
border: 1px solid #EBEBEB;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
@include wh(80px);
|
||||
}
|
||||
.cart-l-r {
|
||||
display: flex;
|
||||
> div {
|
||||
text-align: center;
|
||||
width: 112px;
|
||||
}
|
||||
}
|
||||
.car-l-l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.cart-r {
|
||||
width: 230px;
|
||||
display: flex;
|
||||
span {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prod-operation {
|
||||
height: 110px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 254px;
|
||||
div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
div:last-child {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.price-total {
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.price-red {
|
||||
font-weight: 700;
|
||||
color: #d44d44;
|
||||
}
|
||||
</style>
|
||||
28
mallplusui-web-pc/src/page/User/children/support.vue
Normal file
28
mallplusui-web-pc/src/page/User/children/support.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<y-shelf title="售后服务">
|
||||
<div slot="content">
|
||||
<div style="padding: 100px 0;text-align: center">
|
||||
<img src="/static/images/support.png">
|
||||
<br>
|
||||
<span class="support">如有疑问请联系邮箱1012139570@qq.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</y-shelf>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import YShelf from '/components/shelf'
|
||||
export default {
|
||||
components: {
|
||||
YShelf
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.support {
|
||||
line-height: 2em;
|
||||
font-size: 22px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
159
mallplusui-web-pc/src/page/User/user.vue
Normal file
159
mallplusui-web-pc/src/page/User/user.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="layout-container">
|
||||
<y-header>
|
||||
<div slot="nav"></div>
|
||||
</y-header>
|
||||
<div class="w">
|
||||
<div class="content">
|
||||
<div class="account-sidebar">
|
||||
<div class="avatar gray-box ">
|
||||
<div>
|
||||
<img :src="userInfo.icon"> <h5>
|
||||
{{userInfo.username}}</h5></div>
|
||||
<div class="box-inner">
|
||||
<ul class="account-nav">
|
||||
<li v-for="(item,i) in nav" :key='i' :class="{current:item.name===title}"
|
||||
@click="tab(item)">
|
||||
<a href="javascript:;">{{item.name}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account-content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<y-footer></y-footer>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import YFooter from '/common/footer'
|
||||
import YHeader from '/common/header'
|
||||
import { mapState } from 'vuex'
|
||||
import { getStore } from '/utils/storage'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
userInfo:null,
|
||||
title: '我的订单',
|
||||
nav: [
|
||||
{name: '我的订单', path: 'orderList'},
|
||||
{name: '账户资料', path: 'information'},
|
||||
{name: '收货地址', path: 'addressList'},
|
||||
{name: '我的优惠', path: 'coupon'},
|
||||
{name: '售后服务', path: 'support'},
|
||||
{name: '以旧换新', path: 'aihuishou'}
|
||||
],
|
||||
editAvatar: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
tab (e) {
|
||||
this.$router.push({path: '/user/' + e.path})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
var userInfo = getStore('userInfo');
|
||||
if (!userInfo) {
|
||||
this.$router.push({ path: '/login' })
|
||||
}
|
||||
this.userInfo=userInfo;
|
||||
let path = this.$route.path.split('/')[2]
|
||||
this.nav.forEach(item => {
|
||||
if (item.path === path) {
|
||||
this.title = item.name
|
||||
}
|
||||
})
|
||||
},
|
||||
components: {
|
||||
YFooter,
|
||||
YHeader
|
||||
},
|
||||
watch: {
|
||||
$route (to) {
|
||||
let path = to.path.split('/')[2]
|
||||
this.nav.forEach(item => {
|
||||
if (item.path === path) {
|
||||
this.title = item.name
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
@import "../../assets/style/mixin";
|
||||
|
||||
.w {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.account-sidebar {
|
||||
width: 210px;
|
||||
border-radius: 6px;
|
||||
.avatar {
|
||||
padding-top: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 168px;
|
||||
height: 168px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
line-height: 48px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.account-nav {
|
||||
padding-top: 15px;
|
||||
li {
|
||||
position: relative;
|
||||
height: 48px;
|
||||
border-top: 1px solid #EBEBEB;
|
||||
line-height: 48px;
|
||||
&:hover {
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 50px;
|
||||
background-color: #98AFEE;
|
||||
line-height: 50px;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
&.current {
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 50px;
|
||||
background-color: #98AFEE;
|
||||
line-height: 50px;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-content {
|
||||
margin-left: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user