fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by 张文文
Commit a9b810f869ec414df1dfd62a0b64ed6650e66e0b 1 parent 46896be2

路由补充

Inline Side-by-side
Showing 2 changed files with 199 additions and 260 deletions
<template>
<LayoutApp title="选择地址" :show-back="true">
<AddressItem :list="addressList" :pageName="pageName" :selectedAddressId="selectedAddressId"></AddressItem>
<CubeScroll class="main-container" ref="scroll" :options="scrollOpts">
<div class="user-list">
<div
v-for="(item, index) in addressList"
:key="index"
class="item"
@click="toOrderPage(item)"
>
<slot name="item" :data="item">
<div class="user-item">
<div
:class="{'uncheck-item' : item.address_id !== selectedAddressId , 'check-item' : item.address_id === selectedAddressId }"
></div>
<div class="user-info">
<div class="extra">
<p class="name">{{item.consignee}}</p>
<p class="mobile">{{item.mobile}}</p>
<div v-if="item.is_default === 'Y'" class="tag-btn">默认</div>
<div v-if="item.tag_code" class="tag-btn">{{item.tag}}</div>
<div
class="option-btn"
:data-item="JSON.stringify(item)"
:data-add="0"
@click="toEditorPage"
>编辑</div>
</div>
<p class="address">{{item.area}}{{item.address}}</p>
</div>
</div>
</slot>
<div class="border-line"></div>
</div>
</div>
<div class="add-btn" :data-add="1" @click="toEditorPage">新增地址</div>
</CubeScroll>
</LayoutApp>
</template>
<script>
import Layout from "../../../components/layout/layout-app";
import AddressItem from "./components/address-item";
import { get } from "lodash";
import { Scroll, Loading } from "cube-ui";
import { SET_USER_ADDRESS_INFO } from "store/address/address/types";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
... ... @@ -17,59 +53,197 @@ export default {
name: "addressManager",
components: {
LayoutApp: Layout,
AddressItem
CubeScroll: Scroll
},
data() {
return {
scrollOpts: {
bounce: false
},
pageName: "",
selectedAddressId: ""
selectedAddressId: "",
query: {}
};
},
computed: {
...mapState(["addressList"])
},
methods: {
...mapMutations({}),
...mapActions(["fetchUserAddressList"])
...mapMutations({ SET_USER_ADDRESS_INFO }),
...mapActions(["fetchUserAddressList"]),
toOrderPage(item) {
this.SET_USER_ADDRESS_INFO(item);
this.$router.push({
name: this.pageName,
query: this.query
});
},
toEditorPage(event) {
event.stopPropagation();
let isAdd = !!parseInt(event.currentTarget.dataset.add);
let item = event.currentTarget.dataset.item || {};
if (isAdd) {
if (this.addressList.length >= 5) {
this.toast = this.$createToast({
type: "error",
txt: "地址不能超过5个",
mask: true
}).show();
return;
}
}
this.$router.push({
name: "addressEdit",
params: {
item: item,
update: !isAdd,
title: isAdd ? "添加地址" : "编辑地址"
}
});
}
},
activated() {
this.selectedAddressId = this.$route.query.addressId;
this.fetchUserAddressList();
},
beforeRouteEnter(to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
vm.query = from.query;
vm.pageName = from.name;
});
},
mounted() {
this.selectedAddressId = this.$route.query.address_id;
}
};
</script>
<style lang="scss" scoped>
.body {
height: 100%;
background-color: #e0e0e0;
overflow-y: auto;
}
/deep/ {
.cube-scroll-content {
min-height: 100%;
}
.address-container {
margin-bottom: 120px;
.cube-scroll-list-wrapper {
overflow: auto;
}
.cube-loading-spinners {
margin: auto;
}
}
.addNew {
display: block;
height: 80px;
margin-top: 20px;
.user-list {
background-color: white;
.border-line {
width: 100%;
height: 1px;
background-color: #eee;
}
}
.user-item {
display: flex;
padding-top: 40px;
padding-bottom: 44px;
padding-left: 28px;
padding-right: 40px;
align-items: center;
.check-item {
width: 40px;
height: 40px;
background: url(~statics/image/address/selected.png) no-repeat;
background-size: cover;
}
.uncheck-item {
width: 40px;
height: 40px;
background: url(~statics/image/address/unselected.png) no-repeat;
background-size: cover;
}
.user-info {
flex-grow: 1;
overflow: hidden;
margin-left: 32px;
}
.extra {
display: flex;
flex-direction: row;
.name {
font-size: 28px;
font-weight: 400;
color: #000000;
line-height: 40px;
}
.mobile {
display: block;
margin-left: 20px;
font-size: 28px;
font-weight: 400;
color: #000000;
line-height: 40px;
}
.tag-btn {
width: 80px;
line-height: 44px;
font-size: 22px;
text-align: center;
background-color: #002b47;
margin-left: 18px;
color: white;
border-radius: 4px;
}
.option-btn {
display: block;
width: 48px;
line-height: 44px;
letter-spacing: -0.29;
color: black;
font-size: 24px;
position: absolute;
right: 40px;
}
}
.address {
width: 100%;
font-size: 24px;
line-height: 34px;
margin-top: 16px;
color: #999;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
}
.newText {
line-height: 80px;
font-size: 28px;
letter-spacing: 0.6px;
white-space: nowrap;
.add-btn {
height: 88px;
line-height: 88px;
font-size: 32px;
font-weight: bold;
text-align: center;
color: #252525;
background-color: #fff;
border-radius: 44px;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
position: absolute;
left: 32px;
right: 32px;
bottom: 40px;
}
</style>
... ...
<template>
<CubeScroll class="main-container" ref="scroll" :options="scrollOpts">
<div class="user-list">
<div v-for="(item, index) in list" :key="index" class="item" @click="toOrderPage(item)">
<slot name="item" :data="item">
<div class="user-item">
<div
:class="{'uncheck-item' : item.address_id !== selectedAddressId , 'check-item' : item.address_id === selectedAddressId }"
></div>
<div class="user-info">
<div class="extra">
<p class="name">{{item.consignee}}</p>
<p class="mobile">{{item.mobile}}</p>
<div v-if="item.is_default === 'Y'" class="tag-btn">默认</div>
<div v-if="item.tag_code" class="tag-btn">{{item.tag}}</div>
<div
class="option-btn"
:data-item="JSON.stringify(item)"
:data-add="0"
@click="toEditorPage"
>编辑</div>
</div>
<p class="address">{{item.area}}{{item.address}}</p>
</div>
</div>
</slot>
<div class="border-line"></div>
</div>
</div>
<div class="add-btn" :data-add="1" @click="toEditorPage">新增地址</div>
</CubeScroll>
</template>
<script>
import { get } from "lodash";
import { Scroll, Loading } from "cube-ui";
import { SET_USER_ADDRESS_INFO } from "store/address/address/types";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
"address/address"
);
export default {
props: {
list: {
type: Array,
default: function() {
return [];
}
},
pageName: {
type: String,
default: ""
},
selectedAddressId: {
type: String,
default: ""
}
},
data() {
return {
scrollOpts: {
bounce: false
}
};
},
methods: {
...mapMutations({ SET_USER_ADDRESS_INFO }),
toOrderPage(item) {
this.SET_USER_ADDRESS_INFO(item);
this.$router.push({
name: this.pageName
});
},
toEditorPage(event) {
event.stopPropagation();
let isAdd = !!parseInt(event.currentTarget.dataset.add);
let item = event.currentTarget.dataset.item || {};
if (isAdd) {
if (this.list.length >= 5) {
this.toast = this.$createToast({
type: "error",
txt: "地址不能超过5个",
mask: true
}).show();
return;
}
}
this.$router.push({
name: "addressEdit",
params: {
item: item,
update: !isAdd,
title: isAdd ? "添加地址" : "编辑地址"
}
});
}
},
components: {
CubeScroll: Scroll
}
};
</script>
<style lang="scss" scoped>
/deep/ {
.cube-scroll-content {
min-height: 100%;
}
.cube-scroll-list-wrapper {
overflow: auto;
}
.cube-loading-spinners {
margin: auto;
}
}
.user-list {
background-color: white;
.border-line {
width: 100%;
height: 1px;
background-color: #eee;
}
}
.user-item {
display: flex;
padding-top: 40px;
padding-bottom: 44px;
padding-left: 28px;
padding-right: 40px;
align-items: center;
.check-item {
width: 40px;
height: 40px;
background: url(~statics/image/address/selected.png) no-repeat;
background-size: cover;
}
.uncheck-item {
width: 40px;
height: 40px;
background: url(~statics/image/address/unselected.png) no-repeat;
background-size: cover;
}
.user-info {
flex-grow: 1;
overflow: hidden;
margin-left: 32px;
}
.extra {
display: flex;
flex-direction: row;
.name {
font-size: 28px;
font-weight: 400;
color: #000000;
line-height: 40px;
}
.mobile {
display: block;
margin-left: 20px;
font-size: 28px;
font-weight: 400;
color: #000000;
line-height: 40px;
}
.tag-btn {
width: 80px;
line-height: 44px;
font-size: 22px;
text-align: center;
background-color: #002b47;
margin-left: 18px;
color: white;
border-radius: 4px;
}
.option-btn {
display: block;
width: 48px;
line-height: 44px;
letter-spacing: -0.29;
color: black;
font-size: 24px;
position: absolute;
right: 40px;
}
}
.address {
width: 100%;
font-size: 24px;
line-height: 34px;
margin-top: 16px;
color: #999;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
}
.add-btn {
height: 88px;
line-height: 88px;
font-size: 32px;
font-weight: bold;
text-align: center;
color: #252525;
background-color: #fff;
border-radius: 44px;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
position: absolute;
left: 32px;
right: 32px;
bottom: 40px;
}
</style>