pull/1/head
林华焜
5 years ago
parent
fadf85592d
commit
c665f64213
|
Before Width: | Height: | Size: 410 B After Width: | Height: | Size: 399 B |
@ -0,0 +1,5 @@
|
||||
export const BACKTOP_DISTANCE = 1000
|
||||
|
||||
export const POP = 'pop';
|
||||
export const NEW = 'new';
|
||||
export const SELL = 'sell';
|
||||
Binary file not shown.
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="grid-view" ref="gridView">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "GridView",
|
||||
props: {
|
||||
cols: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
hMargin: {
|
||||
type: Number,
|
||||
default: 8
|
||||
},
|
||||
vMargin: {
|
||||
type: Number,
|
||||
default: 8
|
||||
},
|
||||
itemSpace: {
|
||||
type: Number,
|
||||
default: 8
|
||||
},
|
||||
lineSpace: {
|
||||
type: Number,
|
||||
default: 8
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
setTimeout(this._autoLayout, 200)
|
||||
},
|
||||
updated: function () {
|
||||
this._autoLayout()
|
||||
},
|
||||
methods: {
|
||||
_autoLayout: function () {
|
||||
// 1.获取gridEl和children
|
||||
// 注: 这里为什么不用document.querySelector呢?
|
||||
// 答: 因为如果在项目中, 多处都用到了grid-view, 那么这里就不确定获取的是哪一个了.
|
||||
let gridEl = this.$refs.gridView;
|
||||
let children = gridEl&&gridEl.children;
|
||||
|
||||
// 2.设置gridEl的内边距
|
||||
gridEl.style.padding = `${this.vMargin}px ${this.hMargin}px`
|
||||
|
||||
// 3.计算item的宽度
|
||||
let itemWidth = (gridEl.clientWidth - 2 * this.hMargin - (this.cols - 1) * this.itemSpace) / this.cols;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
let item = children[i];
|
||||
item.style.width = itemWidth + 'px';
|
||||
if ((i+1) % this.cols !== 0) {
|
||||
item.style.marginRight = this.itemSpace + 'px'
|
||||
}
|
||||
if (i >= this.cols) {
|
||||
item.style.marginTop = this.lineSpace + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.grid-view {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="toast" v-show="isShow">
|
||||
<div >{{message}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Toast",
|
||||
data(){
|
||||
return{
|
||||
message:'',
|
||||
isShow:false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
show(message='默认文字',duration=2000){
|
||||
this.isShow=true
|
||||
this.message=message
|
||||
setTimeout(()=>{
|
||||
this.isShow=false
|
||||
this.message=''
|
||||
},duration)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toast{
|
||||
position: fixed;
|
||||
top:50%;
|
||||
left:50%;
|
||||
padding: 8px 10px;
|
||||
transform: translate(-50%);
|
||||
background-color: rgba(0,0,0,7.5);
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="check-button" :class="{check:isCheck}" @click="">
|
||||
<img src="@/assets/img/cart/tick.svg" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CheckButton",
|
||||
props:{
|
||||
isCheck:{
|
||||
type: Boolean,
|
||||
default:false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.check-button{
|
||||
border-radius: 50%;
|
||||
border:2px solid #aaa;
|
||||
}
|
||||
.check{
|
||||
background-color: red;
|
||||
border-color: red;
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,24 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from "@/store";
|
||||
import FastClick from 'fastclick'
|
||||
import VueLazyload from "vue-lazyload";
|
||||
|
||||
import toast from'@/components/common/toast'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$bus = new Vue()
|
||||
|
||||
Vue.use(toast)
|
||||
Vue.use(VueLazyload,{
|
||||
loading:require('./assets/img/common/placeholder.png')
|
||||
})
|
||||
|
||||
FastClick.attach(document.body)
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
router,
|
||||
store,
|
||||
}).$mount('#app')
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
import {request} from "@/network/request";
|
||||
|
||||
|
||||
export function getCategory() {
|
||||
return request({
|
||||
url: '/category'
|
||||
})
|
||||
}
|
||||
|
||||
export function getSubcategory(maitKey){
|
||||
return request({
|
||||
url:'/subcategory',
|
||||
params:{
|
||||
maitKey
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function getCategoryDetail(miniWallkey,type){
|
||||
return request({
|
||||
url:'/subcategory/detail',
|
||||
params:{
|
||||
miniWallkey,
|
||||
type
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
import {
|
||||
ADD_COUNTER,
|
||||
ADD_TO_CHAR,
|
||||
} from "@/store/mutation-type";
|
||||
|
||||
|
||||
export default {
|
||||
addCart(context,payLoad){
|
||||
//payLoad新添加的商品
|
||||
// let oldProduct=null;
|
||||
// for(let item of state.cartList){
|
||||
// if(item.iid===payLoad.iid){
|
||||
// oldProduct=item
|
||||
// }
|
||||
// }
|
||||
return new Promise(((resolve, reject) => {
|
||||
let product=context.state.cartList.find(item=>item.iid === payLoad.iid)
|
||||
if(product){
|
||||
context.commit('ADD_COUNTER',product)
|
||||
resolve('当前的商品数量+1')
|
||||
}else {
|
||||
payLoad.count=1
|
||||
context.commit('ADD_TO_CHAR',payLoad)
|
||||
resolve('添加了新的商品')
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
cartLength(state) {
|
||||
return state.cartList.length
|
||||
},
|
||||
cartList(state){
|
||||
return state.cartList
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from'vuex'
|
||||
|
||||
import mutations from "@/store/mutations";
|
||||
import actions from "@/store/actions";
|
||||
import getters from "@/store/getters";
|
||||
|
||||
Vue.use(Vuex)
|
||||
const state={
|
||||
cartList:[],
|
||||
counter:0,
|
||||
number:0,
|
||||
}
|
||||
|
||||
const store = new Vuex.Store({
|
||||
state,
|
||||
mutations,
|
||||
actions,
|
||||
getters
|
||||
})
|
||||
export default store
|
||||
@ -0,0 +1,2 @@
|
||||
export const ADD_COUNTER='add_counter'
|
||||
export const ADD_TO_CHAR='add_to_char'
|
||||
@ -0,0 +1,15 @@
|
||||
import {
|
||||
ADD_COUNTER,
|
||||
ADD_TO_CHAR,
|
||||
} from "@/store/mutation-type";
|
||||
|
||||
|
||||
export default {
|
||||
ADD_COUNTER(state,payload){
|
||||
payload.count++
|
||||
},
|
||||
ADD_TO_CHAR(state,payload){
|
||||
payload.checked=true
|
||||
state.cartList.push(payload)
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,51 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>购物车</h2>
|
||||
<div class="cart">
|
||||
<NavBar class="nav-bar">
|
||||
<div slot="center" >购物车({{length}})</div>
|
||||
</NavBar>
|
||||
<CartList ></CartList>
|
||||
<CartBottomBar></CartBottomBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import CartList from "@/views/cart/childComps/CartList";
|
||||
import CartBottomBar from "@/views/cart/childComps/CartBottomBar";
|
||||
|
||||
import NavBar from "@/components/common/navbar/NavBar";
|
||||
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "Home"
|
||||
name: "Cart",
|
||||
components:{
|
||||
CartBottomBar,
|
||||
NavBar,
|
||||
CartList,
|
||||
|
||||
},
|
||||
computed:{
|
||||
// ...mapGetters(['cartLength','cartList'])
|
||||
...mapGetters({
|
||||
length:'cartLength',
|
||||
list:'cartList'
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cart {
|
||||
/*position: relative;*/
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
background-color: var(--color-tint);
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="bottom-menu">
|
||||
<CheckButton class="select-all" @checkBtnClick="checkBtnClick" v-model="isSelectAll"></CheckButton>
|
||||
<span>全选</span>
|
||||
|
||||
<span class="total-price">合计: {{totalPrice}}</span>
|
||||
|
||||
<span class="buy-product" @click="btnclick" >去计算({{$store.getters.cartLength}})</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CheckButton from './CheckButton'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "BottomBar",
|
||||
components: {
|
||||
CheckButton
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['cartList']),
|
||||
totalPrice(){
|
||||
return '¥'+this.cartList.filter(item=>{
|
||||
return item.checked
|
||||
}).reduce((preValue,item)=>{
|
||||
return preValue+item.price*item.count
|
||||
},0).toFixed(2)
|
||||
},
|
||||
checkLength(){
|
||||
return !this.cartList.filter(item=>item.checked).length
|
||||
},
|
||||
isSelectAll () {
|
||||
if(this.cartList.length === 0)
|
||||
return false
|
||||
return !this.cartList.find(item=>!item.checked)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkBtnClick: function () {
|
||||
// 1.判断是否有未选中的按钮
|
||||
let isSelectAll = this.$store.getters.cartList.find(item => !item.checked);
|
||||
|
||||
// 2.有未选中的内容, 则全部选中
|
||||
if (isSelectAll) {
|
||||
this.$store.state.cartList.forEach(item => {
|
||||
item.checked = true;
|
||||
});
|
||||
} else {
|
||||
this.$store.state.cartList.forEach(item => {
|
||||
item.checked = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
btnclick(){
|
||||
if(!this.isSelectAll)
|
||||
this.$toast.show('请选购商品',2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bottom-menu {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background-color: #eee;
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
left: 0;
|
||||
box-shadow: 0 -2px 3px rgba(0, 0, 0, .2);
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
line-height: 44px;
|
||||
padding-left: 35px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bottom-menu .select-all {
|
||||
position: absolute;
|
||||
line-height: 0;
|
||||
left: 12px;
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
.bottom-menu .total-price {
|
||||
margin-left: 15px;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.bottom-menu .buy-product {
|
||||
background-color: orangered;
|
||||
color: #fff;
|
||||
width: 100px;
|
||||
height: 44px;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="cart">
|
||||
<scroll class="content" ref="scroll">
|
||||
<CartListItem v-for="(item,index) in list"
|
||||
:key="index"
|
||||
:item-info="item">{{item}}>
|
||||
</CartListItem>
|
||||
</scroll>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Scroll from "@/components/common/Scroll/Scroll";
|
||||
|
||||
import CartListItem from "@/views/cart/childComps/CartListItem";
|
||||
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
|
||||
export default {
|
||||
name: "CartList",
|
||||
components: {
|
||||
Scroll,
|
||||
CartListItem
|
||||
},
|
||||
computed: {
|
||||
// ...mapGetters(['cartLength','cartList'])
|
||||
...mapGetters({
|
||||
list: 'cartList'
|
||||
})
|
||||
},
|
||||
activated(){
|
||||
this.$refs.scroll.refresh()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content{
|
||||
height: calc(100% - 44px - 49px - 40px);
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div id="shop-item">
|
||||
<div class="item-selector">
|
||||
<CheckButton :is-check="itemInfo.checked" @click.native="checkClick"></CheckButton>
|
||||
</div>
|
||||
<div class="item-img">
|
||||
<img :src="itemInfo.image" alt="商品图片">
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<div class="item-title">{{itemInfo.title}}</div>
|
||||
<div class="item-desc">商品描述: {{itemInfo.desc}}</div>
|
||||
<div class="info-bottom">
|
||||
<div class="item-price left">¥{{itemInfo.price}}</div>
|
||||
<div class="item-count right">x{{itemInfo.count}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CheckButton from "@/components/content/CheckButton/CheckButton";
|
||||
|
||||
export default {
|
||||
name: "CartListItem",
|
||||
components: {
|
||||
CheckButton
|
||||
},
|
||||
props:{
|
||||
itemInfo:{
|
||||
type:Object,
|
||||
default(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
checkClick(){
|
||||
this.itemInfo.checked=!this.itemInfo.checked
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#shop-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
font-size: 0;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.item-selector {
|
||||
width: 14%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-title, .item-desc {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
padding: 5px;
|
||||
/*border: 1px solid #ccc;*/
|
||||
}
|
||||
|
||||
.item-img img {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
font-size: 17px;
|
||||
color: #333;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-info .item-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.info-bottom {
|
||||
margin-top: 10px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.info-bottom .item-price {
|
||||
color: orangered;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="icon-selector" :class="{'selector-active': checked}" @click="selectItem">
|
||||
<img src="~/assets/img/cart/tick.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CheckButton",
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
checked: this.value
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectItem: function () {
|
||||
this.$emit('checkBtnClick')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: function (newValue) {
|
||||
this.checked = newValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon-selector {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selector-active {
|
||||
background-color: #ff8198;
|
||||
border-color: #ff8198;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<grid-view :cols="3" :lineSpace="15" :v-margin="20" v-if="subcategories.list">
|
||||
<div class="item" v-for="(item, index) in subcategories.list" :key="index" >
|
||||
<a :href="item.link" >
|
||||
<img class="item-img" :src="item.image" alt="" >
|
||||
<div class="item-text">{{item.title}}</div>
|
||||
</a>
|
||||
</div>
|
||||
</grid-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GridView from "@/components/common/gridView/GridView";
|
||||
|
||||
export default {
|
||||
name: "TabContentCategory",
|
||||
components: {
|
||||
GridView
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
isLoad:false,
|
||||
visible: false,
|
||||
ImgKey: '',
|
||||
number:0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
subcategories: {
|
||||
type: Object,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.panel img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<Grid-view>
|
||||
<Goods-list-item v-for="(item, index) in categoryDetail" :key="index" :goods-item="item"></Goods-list-item>
|
||||
</Grid-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GridView from "@/components/common/gridView/GridView";
|
||||
import GoodsListItem from "@/components/content/goods/GoodsListItem";
|
||||
|
||||
export default {
|
||||
name: "TabContentDetail",
|
||||
components: {
|
||||
GridView,
|
||||
GoodsListItem
|
||||
},
|
||||
props: {
|
||||
categoryDetail: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<scroll id="tab-menu">
|
||||
<div class="menu-list">
|
||||
<div class="menu-list-item"
|
||||
:class="{active: index===currentIndex}"
|
||||
v-for="(item, index) in categories"
|
||||
:key="index"
|
||||
@click="itemClick(index)">
|
||||
{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
</scroll>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Scroll from "@/components/common/Scroll/Scroll";
|
||||
|
||||
export default {
|
||||
name: "TabMenu",
|
||||
components: {
|
||||
Scroll
|
||||
},
|
||||
props: {
|
||||
categories: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemClick(index) {
|
||||
this.$store.state.counter=0
|
||||
this.currentIndex = index
|
||||
this.$emit('selectItem', index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#tab-menu {
|
||||
background-color: #f6f6f6;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.menu-list-item {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.menu-list-item.active {
|
||||
font-weight: 700;
|
||||
color: var(--color-high-text);
|
||||
background-color: #fff;
|
||||
border-left: 3px solid var(--color-high-text);
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,109 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>我的</h2>
|
||||
<div id="profile">
|
||||
<nav-bar class="nav-bar"><div slot="center">小码哥商城</div></nav-bar>
|
||||
<!--1.单独封装一个组件: 利用slot知识点-->
|
||||
<UserInfo></UserInfo>
|
||||
|
||||
<!--2.没有单独封装: 不同的地方太多, 需要传过多的参数-->
|
||||
<section class="account">
|
||||
<div class="account-item">
|
||||
<div class="number">
|
||||
<span class="balance">0.00</span>元
|
||||
</div>
|
||||
<div class="account-info">我的余额</div>
|
||||
</div>
|
||||
<div class="account-item">
|
||||
<div class="number">
|
||||
<span class="balance">0</span>个
|
||||
</div>
|
||||
<div class="account-info">我的优惠</div>
|
||||
</div>
|
||||
<div class="account-item">
|
||||
<div class="number">
|
||||
<span class="balance">0</span>分
|
||||
</div>
|
||||
<div class="account-info">我的积分</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--3.封装成一个整体-->
|
||||
<list-view :list-data="orderList" class="order-list"></list-view>
|
||||
<list-view :list-data="serviceList" class="service-list"></list-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Profile"
|
||||
}
|
||||
import UserInfo from './childComps/UserInfo'
|
||||
import ListView from './childComps/ListView'
|
||||
import NavBar from "@/components/common/navbar/NavBar";
|
||||
|
||||
export default {
|
||||
name: "Profile",
|
||||
components: {
|
||||
UserInfo, ListView, NavBar
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
orderList: [
|
||||
{icon: '#order', iconColor: '#ff8198', info: '我的消息'},
|
||||
{icon: '#point', iconColor: '#fc7b53', info: '积分商城'},
|
||||
{icon: '#vip', iconColor: '#ffc636', info: '会员卡'},
|
||||
],
|
||||
serviceList: [
|
||||
{icon: '#service', iconColor: '#ff8198', info: '我的购物车'},
|
||||
{icon: '#download', iconColor: '#ff8198', info: '下载购物APP'},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#profile {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
background-color: var(--color-tint);
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.account {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.account-item {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
margin-right: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.account-item:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.account-item {
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.account-item .balance {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #ff5f3e;
|
||||
}
|
||||
|
||||
.account-info {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.order-list, .service-list {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div id="list">
|
||||
<div v-for="(item, index) in listData" :key="index" class="item">
|
||||
<span class="icon">
|
||||
<svg :fill="item.iconColor"><use :xlink:href="item.icon"></use></svg>
|
||||
</span>
|
||||
<div class="info">{{item.info}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ListView",
|
||||
props: {
|
||||
listData: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#list {
|
||||
background-color: #fff;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#list .item {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.item .icon {
|
||||
margin-top: 10px;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: -7px;
|
||||
}
|
||||
|
||||
.item .info {
|
||||
margin-left: 40px;
|
||||
border-bottom: 1px solid rgba(100, 100, 100, .1);
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.item:last-of-type .info {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div id="user-info">
|
||||
<a href="#" class="clear-fix">
|
||||
<slot name="user-icon">
|
||||
<svg class="privateImage-svg left">
|
||||
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
|
||||
</svg>
|
||||
</slot>
|
||||
<div class="login-info left">
|
||||
<slot name="user-nickname">
|
||||
<div>登录/注册</div>
|
||||
</slot>
|
||||
<div class="phone">
|
||||
<span>
|
||||
<svg data-v-735ff1be="" fill="#fff" class="icon-mobile"><use data-v-735ff1be="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mobile"></use></svg>
|
||||
</span>
|
||||
<slot name="user-phone">暂无绑定手机号</slot>
|
||||
</div>
|
||||
</div>
|
||||
<svg data-v-735ff1be="" fill="#fff" class="arrow-svg right"><use data-v-735ff1be="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UserInfo"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#user-info {
|
||||
background-color: var(--color-tint);
|
||||
padding: 15px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#user-info .privateImage-svg {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: #fff;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#user-info .arrow-svg {
|
||||
width: 11px;
|
||||
height: 22px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
#user-info .login-info {
|
||||
color: #fff;
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
#user-info .login-info .phone {
|
||||
position: relative;
|
||||
|
||||
font-size: 13px;
|
||||
margin-top: 5px;
|
||||
margin-left: 15px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#user-info .login-info .phone .icon-mobile {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 18px;
|
||||
left: -15px;
|
||||
top: 0px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue