Skip to content
GitLab
Commit 74126a92 authored by Junling Bu's avatar Junling Bu
Browse files

fix[litemall-vue: 注释debugger

parent 9b217226
Hide whitespace changes
Inline Side-by-side
litemall-vue/src/views/items/detail/mix.js
View file @ 74126a92
......@@ -20,7 +20,7 @@ export default {
this.isSkuBuy && this.$emit('skuBuy', data);
},
selectSkuData(data) {
debugger
// debugger
if (data.selectedSkuComb) {
data.selectedSkuComb.sku_str = data.selectedSkuComb.props_str_arr
.map(str => str.match(/[^:]*:([^:]*)/)[1])
......
litemall-vue/src/views/items/list/index.vue
View file @ 74126a92
<template>
<div class="item_list over-hide">
<form action="/search">
<van-search
placeholder="请输入商品名称"
v-model="searchVal"
@click="$router.push({ name: 'search' })"
showAction
/>
</form>
<van-tabs v-model="tabActive" @disabled="toggleFilterModal(true)">
<van-tab
v-for="(tab, tabIndex) in tabsItem"
:title="tab.name"
:key="tab.type"
:disabled="tab.sort === false"
>
<InfinityScroll
:ref="'tabScrolls' + tabIndex"
class="full-page scroll-wrap fix-height"
:beforeRequest="beforeRequest"
:apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)"
>
<item-group>
<item-card-hori
v-for="(item, i) in tab.items"
:key="i"
:goods="item"
@click="itemClick(item.id)"
/>
</item-group>
</InfinityScroll>
</van-tab>
</van-tabs>
<van-popup class="filterItem" v-model="filterItemShow" position="right">
<ul>
<li
v-for="(li, i) in filterItem"
:key="i"
@click="filterMethod(i)"
:class="{filter_active: li.isActive}"
>
{{li.name}}
<van-icon name="success" v-show="li.isActive" class="float-r"/>
</li>
</ul>
</van-popup>
<!-- <transition name="fade">
<van-icon
name="arrowupcircle"
class="backTop"
@click.native="backTop"
v-show="showArrow"
/>
</transition>-->
</div>
</template>
<script>
import { GOODS_SEARCH } from '@/api/goods';
import ItemGroup from '@/vue/components/item-group';
import ItemCardHori from '@/vue/components/item-card-hori/';
import { Search, Tab, Tabs, Popup } from 'vant';
// import { throttle } from 'lodash';
import InfinityScroll from '@/vue/components/infinity-scroll';
export default {
name: 'Item-list',
props: {
keyword: {
type: String,
default: ''
},
itemClass: {
type: [String, Number],
default: ''
}
},
data() {
return {
listApi: GOODS_SEARCH,
shop_id: 1,
tabActive: 0,
tabsItem: [
{ name: '默认', sort: '', items: [] },
{ name: '销量', sort: 'sold_quantity', items: [] },
{ name: '最新', sort: 'created_at', items: [] }
// { name: '筛选', sort: false, items: [] }
],
is_haitao: 0,
filterItem: [
{
name: '全部',
filterType: 2,
isActive: true
},
{
name: '店铺商品',
filterType: 0,
isActive: false
},
{
name: '海淘商品',
filterType: 1,
isActive: false
}
],
isHaitao: 2,
searchVal: '',
filterItemShow: false
// showArrow: false
};
},
computed: {
sortVal() {
const { tabActive: i } = this;
return this.tabsItem[i].sort;
}
},
created() {
// this.scrollShowArrow = throttle(this.scrollShowArrow, 100);
},
methods: {
onLoad(i, items) {
this.tabsItem[i].items.push(...items);
},
beforeRequest() {
return {
params: {
q: this.searchVal,
shop_id: this.shop_id,
cid: this.itemClass,
sort: this.sortVal,
is_haitao: this.isHaitao
}
};
},
// 滚动容器改变, 导致滚动监听失效, 暂时先注释了
// eventListen(isBind = true) {
// if (isBind) {
// this.$el.addEventListener('scroll', this.scrollShowArrow);
// } else {
// this.$el.removeEventListener('scroll', this.scrollShowArrow);
// }
// },
// scrollShowArrow() {
// this.showArrow = this.$el.scrollTop > 120;
// },
activeFilter(i) {
this.filterItem.forEach((item, index) => {
item.isActive = i === index;
});
},
resetActiveTab() {
const { tabActive: i } = this;
this.tabsItem[i].items = [];
const targetScroll = this.$refs[`tabScrolls${i}`][0];
debugger;
targetScroll && targetScroll.resetInit();
},
toggleFilterModal(status) {
this.filterItemShow = status;
},
filterMethod(i) {
const filterType = this.filterItem[i].filterType;
if (filterType === this.isHaitao) return;
this.isHaitao = filterType;
this.activeFilter(i);
this.toggleFilterModal(false);
this.resetActiveTab();
},
// backTop() {
// this.$el.scrollTop = 0;
// },
itemClick(id) {
this.$router.push({ name: 'detail', params: { itemId: id } });
}
},
components: {
InfinityScroll,
[ItemGroup.name]: ItemGroup,
[ItemCardHori.name]: ItemCardHori,
[Tab.name]: Tab,
[Tabs.name]: Tabs,
[Search.name]: Search,
[Popup.name]: Popup
}
};
</script>
<style lang="scss" scoped>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s;
}
.fix-height {
padding-bottom: 88px;
}
.over-hide {
overflow: hidden;
}
.item_list {
background-color: #fff;
padding-bottom: 0;
}
.fixedTop {
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
.items_loading {
margin: 0 auto;
}
.filterItem {
width: 40%;
height: 100%;
li {
padding: 10px;
&.filter_active {
color: $red;
}
}
}
.backTop {
position: fixed;
right: 20px;
bottom: 20px;
font-size: 24px;
}
</style>
<template>
<div class="item_list over-hide">
<form action="/search">
<van-search
placeholder="请输入商品名称"
v-model="searchVal"
@click="$router.push({ name: 'search' })"
showAction
/>
</form>
<van-tabs v-model="tabActive" @disabled="toggleFilterModal(true)">
<van-tab
v-for="(tab, tabIndex) in tabsItem"
:title="tab.name"
:key="tab.type"
:disabled="tab.sort === false"
>
<InfinityScroll
:ref="'tabScrolls' + tabIndex"
class="full-page scroll-wrap fix-height"
:beforeRequest="beforeRequest"
:apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)"
>
<item-group>
<item-card-hori
v-for="(item, i) in tab.items"
:key="i"
:goods="item"
@click="itemClick(item.id)"
/>
</item-group>
</InfinityScroll>
</van-tab>
</van-tabs>
<van-popup class="filterItem" v-model="filterItemShow" position="right">
<ul>
<li
v-for="(li, i) in filterItem"
:key="i"
@click="filterMethod(i)"
:class="{filter_active: li.isActive}"
>
{{li.name}}
<van-icon name="success" v-show="li.isActive" class="float-r"/>
</li>
</ul>
</van-popup>
<!-- <transition name="fade">
<van-icon
name="arrowupcircle"
class="backTop"
@click.native="backTop"
v-show="showArrow"
/>
</transition>-->
</div>
</template>
<script>
import { GOODS_SEARCH } from '@/api/goods';
import ItemGroup from '@/vue/components/item-group';
import ItemCardHori from '@/vue/components/item-card-hori/';
import { Search, Tab, Tabs, Popup } from 'vant';
// import { throttle } from 'lodash';
import InfinityScroll from '@/vue/components/infinity-scroll';
export default {
name: 'Item-list',
props: {
keyword: {
type: String,
default: ''
},
itemClass: {
type: [String, Number],
default: ''
}
},
data() {
return {
listApi: GOODS_SEARCH,
shop_id: 1,
tabActive: 0,
tabsItem: [
{ name: '默认', sort: '', items: [] },
{ name: '销量', sort: 'sold_quantity', items: [] },
{ name: '最新', sort: 'created_at', items: [] }
// { name: '筛选', sort: false, items: [] }
],
is_haitao: 0,
filterItem: [
{
name: '全部',
filterType: 2,
isActive: true
},
{
name: '店铺商品',
filterType: 0,
isActive: false
},
{
name: '海淘商品',
filterType: 1,
isActive: false
}
],
isHaitao: 2,
searchVal: '',
filterItemShow: false
// showArrow: false
};
},
computed: {
sortVal() {
const { tabActive: i } = this;
return this.tabsItem[i].sort;
}
},
created() {
// this.scrollShowArrow = throttle(this.scrollShowArrow, 100);
},
methods: {
onLoad(i, items) {
this.tabsItem[i].items.push(...items);
},
beforeRequest() {
return {
params: {
q: this.searchVal,
shop_id: this.shop_id,
cid: this.itemClass,
sort: this.sortVal,
is_haitao: this.isHaitao
}
};
},
// 滚动容器改变, 导致滚动监听失效, 暂时先注释了
// eventListen(isBind = true) {
// if (isBind) {
// this.$el.addEventListener('scroll', this.scrollShowArrow);
// } else {
// this.$el.removeEventListener('scroll', this.scrollShowArrow);
// }
// },
// scrollShowArrow() {
// this.showArrow = this.$el.scrollTop > 120;
// },
activeFilter(i) {
this.filterItem.forEach((item, index) => {
item.isActive = i === index;
});
},
resetActiveTab() {
const { tabActive: i } = this;
this.tabsItem[i].items = [];
const targetScroll = this.$refs[`tabScrolls${i}`][0];
// debugger;
targetScroll && targetScroll.resetInit();
},
toggleFilterModal(status) {
this.filterItemShow = status;
},
filterMethod(i) {
const filterType = this.filterItem[i].filterType;
if (filterType === this.isHaitao) return;
this.isHaitao = filterType;
this.activeFilter(i);
this.toggleFilterModal(false);
this.resetActiveTab();
},
// backTop() {
// this.$el.scrollTop = 0;
// },
itemClick(id) {
this.$router.push({ name: 'detail', params: { itemId: id } });
}
},
components: {
InfinityScroll,
[ItemGroup.name]: ItemGroup,
[ItemCardHori.name]: ItemCardHori,
[Tab.name]: Tab,
[Tabs.name]: Tabs,
[Search.name]: Search,
[Popup.name]: Popup
}
};
</script>
<style lang="scss" scoped>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s;
}
.fix-height {
padding-bottom: 88px;
}
.over-hide {
overflow: hidden;
}
.item_list {
background-color: #fff;
padding-bottom: 0;
}
.fixedTop {
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
.items_loading {
margin: 0 auto;
}
.filterItem {
width: 40%;
height: 100%;
li {
padding: 10px;
&.filter_active {
color: $red;
}
}
}
.backTop {
position: fixed;
right: 20px;
bottom: 20px;
font-size: 24px;
}
</style>
litemall-vue/src/views/items/search-result/index.vue
View file @ 74126a92
<template>
<div class="item_list">
<form action="/search" class="fixedTop">
<van-search placeholder="请输入商品名称" v-model="searchVal" @search="resetInit" showAction/>
</form>
<van-list
v-model="loading"
:finished="finished"
:immediate-check="false"
:offset="100"
@load="loadMore"
>
<item-group>
<item-card-hori
v-for="(item) in items"
:key="item.id"
:goods="item"
@click="itemClick(item.id)"
/>
</item-group>
</van-list>
<is-empty v-if="items.length === 0">抱歉,没有找到符合条件商品</is-empty>
<transition name="fade">
<van-icon name="arrowupcircle" class="backTop" @click.native="backTop" v-show="showArrow"></van-icon>
</transition>
</div>
</template>
<script>
import { GOODS_SEARCH } from '@/api/goods';
import ItemGroup from '@/vue/components/item-group/';
import IsEmpty from '@/vue/components/is-empty/';
import ItemCardHori from '@/vue/components/item-card-hori/';
import { Search, List } from 'vant';
import _ from 'lodash';
import loadMore from '@/vue/mixin/list-load-more';
import scrollFixed from '@/vue/mixin/scroll-fixed';
export default {
name: 'Item-list',
props: {
keyword: {
type: String,
default: ''
}
},
mixins: [loadMore, scrollFixed],
data() {
return {
isEmpty: false,
shop_id: '',
searchVal: '',
showArrow: false
};
},
activated() {
this.searchVal = this.keyword;
this.resetInit();
this.eventListen();
},
deactivated() {
document
.getElementById('app')
.removeEventListener('scroll', this.scrollShowArrow);
},
created() {
this.initData();
this.scrollShowArrow = _.throttle(this.scrollShowArrow, 100);
},
methods: {
initData() {
debugger;
this.items = [];
return this.$reqGet(
`/wx/goods/list`,
{
keyword: this.searchVal,
page: 1,
size: 100,
sort: 'name',
order: 'desc',
categoryId: 0
},
{
hideLoading: true
}
).then(res => {
const { goodsList, filterCategoryList } = res.data.data;
_.each(goodsList, v => {
v.pic_url = v.picUrl;
});
this.items.push(...goodsList);
// return page;
});
},
eventListen() {
document
.getElementById('app')
.addEventListener('scroll', this.scrollShowArrow);
},
scrollShowArrow() {
this.showArrow = document.getElementById('app').scrollTop > 120;
},
backTop() {
document.getElementById('app').scrollTop = 0;
},
itemClick(i) {
this.$router.push({ name: 'detail', params: { itemId: i } });
}
},
components: {
[ItemGroup.name]: ItemGroup,
[ItemCardHori.name]: ItemCardHori,
[Search.name]: Search,
[List.name]: List,
[IsEmpty.name]: IsEmpty
}
};
</script>
<style lang="scss" scoped>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s;
}
.item_list {
background-color: #fff;
padding-top: 50px;
box-sizing: border-box;
}
.fixedTop {
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
.items_loading {
margin: 0 auto;
}
.backTop {
position: fixed;
right: 20px;
bottom: 20px;
font-size: 24px;
}
</style>
<template>
<div class="item_list">
<form action="/search" class="fixedTop">
<van-search placeholder="请输入商品名称" v-model="searchVal" @search="resetInit" showAction/>
</form>
<van-list
v-model="loading"
:finished="finished"
:immediate-check="false"
:offset="100"
@load="loadMore"
>
<item-group>
<item-card-hori
v-for="(item) in items"
:key="item.id"
:goods="item"
@click="itemClick(item.id)"
/>
</item-group>
</van-list>
<is-empty v-if="items.length === 0">抱歉,没有找到符合条件商品</is-empty>
<transition name="fade">
<van-icon name="arrowupcircle" class="backTop" @click.native="backTop" v-show="showArrow"></van-icon>
</transition>
</div>
</template>
<script>
import { GOODS_SEARCH } from '@/api/goods';
import ItemGroup from '@/vue/components/item-group/';
import IsEmpty from '@/vue/components/is-empty/';
import ItemCardHori from '@/vue/components/item-card-hori/';
import { Search, List } from 'vant';
import _ from 'lodash';
import loadMore from '@/vue/mixin/list-load-more';
import scrollFixed from '@/vue/mixin/scroll-fixed';
export default {
name: 'Item-list',
props: {
keyword: {
type: String,
default: ''
}
},
mixins: [loadMore, scrollFixed],
data() {
return {
isEmpty: false,
shop_id: '',
searchVal: '',
showArrow: false
};
},
activated() {
this.searchVal = this.keyword;
this.resetInit();
this.eventListen();
},
deactivated() {
document
.getElementById('app')
.removeEventListener('scroll', this.scrollShowArrow);
},
created() {
this.initData();
this.scrollShowArrow = _.throttle(this.scrollShowArrow, 100);
},
methods: {
initData() {
// debugger;
this.items = [];
return this.$reqGet(
`/wx/goods/list`,
{
keyword: this.searchVal,
page: 1,
size: 100,
sort: 'name',
order: 'desc',
categoryId: 0
},
{
hideLoading: true
}
).then(res => {
const { goodsList, filterCategoryList } = res.data.data;
_.each(goodsList, v => {
v.pic_url = v.picUrl;
});
this.items.push(...goodsList);
// return page;
});
},
eventListen() {
document
.getElementById('app')
.addEventListener('scroll', this.scrollShowArrow);
},
scrollShowArrow() {
this.showArrow = document.getElementById('app').scrollTop > 120;
},
backTop() {
document.getElementById('app').scrollTop = 0;
},
itemClick(i) {
this.$router.push({ name: 'detail', params: { itemId: i } });
}
},
components: {
[ItemGroup.name]: ItemGroup,
[ItemCardHori.name]: ItemCardHori,
[Search.name]: Search,
[List.name]: List,
[IsEmpty.name]: IsEmpty
}
};
</script>
<style lang="scss" scoped>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s;
}
.item_list {
background-color: #fff;
padding-top: 50px;
box-sizing: border-box;
}
.fixedTop {
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
.items_loading {
margin: 0 auto;
}
.backTop {
position: fixed;
right: 20px;
bottom: 20px;
font-size: 24px;
}
</style>
litemall-vue/src/views/user/module-collect/index.vue
View file @ 74126a92
<template>
<div class="user_collect">
<form action="/search" class="fixedTop">
<van-search placeholder="请输入商品名称" v-model="searchVal"/>
</form>
<van-list
v-model="loading"
:finished="finished"
:immediate-check="false"
:offset="100"
@load="loadMore"
>
<item-group>
<item-card-hori
v-for="(item, i) in items"
:style="{backgroundColor: !item.goods_status && '#fcfcfc'}"
:key="i"
:goods="item"
@click="itemClick(i,item)"
>
<van-icon
name="lajitong"
slot="footer"
@click.stop="cancelCollect($event, i,item)"
style="float: right;"
/>
</item-card-hori>
</item-group>
</van-list>
<is-empty v-if="isEmpty">没有商品收藏</is-empty>
<!-- <div class="clear_invalid" v-if="items.length" @click="clearInvalid">
<van-icon name="lajitong"/>清除失效商品
</div>-->
</div>
</template>
<script>
import { GOODS_COLLECT_LIST } from '@/api/user';
import ItemGroup from '@/vue/components/item-group/';
import ItemCardHori from '@/vue/components/item-card-hori/';
import IsEmpty from '@/vue/components/is-empty/';
import { Search, List } from 'vant';
import loadMore from '@/vue/mixin/list-load-more';
import scrollFixed from '@/vue/mixin/scroll-fixed';
export default {
mixins: [loadMore, scrollFixed],
data() {
return {
shop_id: 1,
items: [],
searchVal: ''
};
},
created() {
this.resetInit();
},
methods: {
initData() {
return this.$reqGet(
'/wx/collect/list?type=0&page=1&size=100',
{},
{
hideLoading: true
}
).then(res => {
debugger;
const { collectList, page } = res.data.data;
this.items.push(...collectList);
return page;
});
},
cancelCollect(event, i, item) {
this.$dialog.confirm({ message: '是否取消收藏该商品' }).then(() => {
this.$reqPost(
'/wx/collect/addordelete',
{ valueId: item.valueId, type: 0 },
{
hideLoading: true
}
).then(res => {
this.items.splice(i, 1);
});
});
},
clearInvalid() {
this.$dialog.confirm({ message: '确定清除所有失效商品吗?' });
},
itemClick(i, item) {
// const item_id = this.items[i].item_id;
// const status = this.items[i].goods_status;
// status &&
this.$router.push(`/items/detail/${item.valueId}`);
// !status && this.$toast('该商品已失效');
}
},
components: {
[ItemGroup.name]: ItemGroup,
[ItemCardHori.name]: ItemCardHori,
[Search.name]: Search,
[IsEmpty.name]: IsEmpty,
[List.name]: List
}
};
</script>
<style lang="scss" scoped>
.clear_invalid {
width: 120px;
color: $font-color-gray;
border: 1px solid $font-color-gray;
margin: 0 auto;
text-align: center;
padding: 5px 3px;
margin-top: 20px;
border-radius: 3px;
}
</style>
<template>
<div class="user_collect">
<form action="/search" class="fixedTop">
<van-search placeholder="请输入商品名称" v-model="searchVal"/>
</form>
<van-list
v-model="loading"
:finished="finished"
:immediate-check="false"
:offset="100"
@load="loadMore"
>
<item-group>
<item-card-hori
v-for="(item, i) in items"
:style="{backgroundColor: !item.goods_status && '#fcfcfc'}"
:key="i"
:goods="item"
@click="itemClick(i,item)"
>
<van-icon
name="lajitong"
slot="footer"
@click.stop="cancelCollect($event, i,item)"
style="float: right;"
/>
</item-card-hori>
</item-group>
</van-list>
<is-empty v-if="isEmpty">没有商品收藏</is-empty>
<!-- <div class="clear_invalid" v-if="items.length" @click="clearInvalid">
<van-icon name="lajitong"/>清除失效商品
</div>-->
</div>
</template>
<script>
import { GOODS_COLLECT_LIST } from '@/api/user';
import ItemGroup from '@/vue/components/item-group/';
import ItemCardHori from '@/vue/components/item-card-hori/';
import IsEmpty from '@/vue/components/is-empty/';
import { Search, List } from 'vant';
import loadMore from '@/vue/mixin/list-load-more';
import scrollFixed from '@/vue/mixin/scroll-fixed';
export default {
mixins: [loadMore, scrollFixed],
data() {
return {
shop_id: 1,
items: [],
searchVal: ''
};
},
created() {
this.resetInit();
},
methods: {
initData() {
return this.$reqGet(
'/wx/collect/list?type=0&page=1&size=100',
{},
{
hideLoading: true
}
).then(res => {
// debugger;
const { collectList, page } = res.data.data;
this.items.push(...collectList);
return page;
});
},
cancelCollect(event, i, item) {
this.$dialog.confirm({ message: '是否取消收藏该商品' }).then(() => {
this.$reqPost(
'/wx/collect/addordelete',
{ valueId: item.valueId, type: 0 },
{
hideLoading: true
}
).then(res => {
this.items.splice(i, 1);
});
});
},
clearInvalid() {
this.$dialog.confirm({ message: '确定清除所有失效商品吗?' });
},
itemClick(i, item) {
// const item_id = this.items[i].item_id;
// const status = this.items[i].goods_status;
// status &&
this.$router.push(`/items/detail/${item.valueId}`);
// !status && this.$toast('该商品已失效');
}
},
components: {
[ItemGroup.name]: ItemGroup,
[ItemCardHori.name]: ItemCardHori,
[Search.name]: Search,
[IsEmpty.name]: IsEmpty,
[List.name]: List
}
};
</script>
<style lang="scss" scoped>
.clear_invalid {
width: 120px;
color: $font-color-gray;
border: 1px solid $font-color-gray;
margin: 0 auto;
text-align: center;
padding: 5px 3px;
margin-top: 20px;
border-radius: 3px;
}
</style>
litemall-vue/src/views/user/user-information-set/index.vue
View file @ 74126a92
<template>
<div class="user_information">
<van-cell-group>
<van-cell title="头像" class="cell_middle">
<van-uploader :afterRead="avatarAfterRead">
<div class="user_avatar_upload">
<img
:src="avatar + '?x-oss-process=image/resize,m_fill,h_50,w_50'"
alt="你的头像"
v-if="avatar"
>
<van-icon name="camera_full" v-else></van-icon>
</div>
</van-uploader>
</van-cell>
<!-- <van-cell title="背景图" to="/user/information/setbg" isLink></van-cell> -->
<!-- <van-cell title="昵称" to="/user/information/setNickname" :value="nickName" isLink/> -->
<!-- <van-cell title="性别" :value="genderText" @click="showSex = true" isLink/> -->
<!-- <van-cell title="密码设置" to="/user/information/setPassword" isLink/> -->
<!-- <van-cell title="手机号" to="/user/information/setMobile" :value="mobile" isLink></van-cell> -->
<van-cell title="背景图" isLink></van-cell>
<van-cell title="昵称" :value="nickName" isLink/>
<van-cell title="性别" isLink/>
<!-- <van-cell title="密码设置" to="/user/information/setPassword" isLink/> -->
<van-cell title="手机号" :value="mobile" isLink></van-cell>
</van-cell-group>
<van-button class="bottom_btn" @click="loginOut" type="primary" bottomAction>退出登录</van-button>
<van-popup v-model="showSex" position="bottom">
<van-picker
showToolbar
:columns="sexColumns"
title="选择性别"
@cancel="showSex = false"
@confirm="onSexConfirm"
/>
</van-popup>
</div>
</template>
<script>
import { Uploader, Picker, Popup, Button } from 'vant';
import { USER_PROFILE } from '@/api/user';
import { removeLocalStorage } from 'core/utils/local-storage';
import { getLocalStorage } from 'core/utils/local-storage';
export default {
data() {
return {
sexColumns: [
{
values: ['保密', '男', '女'],
defaultIndex: 0
}
],
showSex: false,
avatar: '',
nickName: '',
gender: -1,
mobile: ''
};
},
computed: {
genderText() {
const text = ['保密', '男', '女'];
return text[this.gender] || '';
}
},
created() {
this.getUserInfo();
},
methods: {
avatarAfterRead(file) {
console.log(file);
},
onSexConfirm(value, index) {
this.$reqPut(USER_PROFILE, {
gender: index[0]
}).then(res => {
this.gender = res.data.data.gender;
this.showSex = false;
});
},
getUserInfo() {
const infoData = getLocalStorage(
'nickName',
'background_image',
'avatar'
);
debugger;
this.avatar = infoData.avatar;
this.nickName = infoData.nickName;
// this.gender = infoData.gender;
// this.mobile = infoData.mobile;
},
loginOut() {
removeLocalStorage(
'Authorization',
// 'user_id',
'avatar',
// 'background_image',
'nickName'
);
this.$router.push({ name: 'home' });
}
},
components: {
[Button.name]: Button,
[Uploader.name]: Uploader,
[Picker.name]: Picker,
[Popup.name]: Popup
}
};
</script>
<style lang="scss" scoped>
.user_information {
.user_avatar_upload {
position: relative;
width: 50px;
height: 50px;
border: 1px solid $border-color;
img {
max-width: 100%;
max-height: 100%;
}
i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: $border-color;
}
}
}
</style>
<template>
<div class="user_information">
<van-cell-group>
<van-cell title="头像" class="cell_middle">
<van-uploader :afterRead="avatarAfterRead">
<div class="user_avatar_upload">
<img
:src="avatar + '?x-oss-process=image/resize,m_fill,h_50,w_50'"
alt="你的头像"
v-if="avatar"
>
<van-icon name="camera_full" v-else></van-icon>
</div>
</van-uploader>
</van-cell>
<!-- <van-cell title="背景图" to="/user/information/setbg" isLink></van-cell> -->
<!-- <van-cell title="昵称" to="/user/information/setNickname" :value="nickName" isLink/> -->
<!-- <van-cell title="性别" :value="genderText" @click="showSex = true" isLink/> -->
<!-- <van-cell title="密码设置" to="/user/information/setPassword" isLink/> -->
<!-- <van-cell title="手机号" to="/user/information/setMobile" :value="mobile" isLink></van-cell> -->
<van-cell title="背景图" isLink></van-cell>
<van-cell title="昵称" :value="nickName" isLink/>
<van-cell title="性别" isLink/>
<!-- <van-cell title="密码设置" to="/user/information/setPassword" isLink/> -->
<van-cell title="手机号" :value="mobile" isLink></van-cell>
</van-cell-group>
<van-button class="bottom_btn" @click="loginOut" type="primary" bottomAction>退出登录</van-button>
<van-popup v-model="showSex" position="bottom">
<van-picker
showToolbar
:columns="sexColumns"
title="选择性别"
@cancel="showSex = false"
@confirm="onSexConfirm"
/>
</van-popup>
</div>
</template>
<script>
import { Uploader, Picker, Popup, Button } from 'vant';
import { USER_PROFILE } from '@/api/user';
import { removeLocalStorage } from 'core/utils/local-storage';
import { getLocalStorage } from 'core/utils/local-storage';
export default {
data() {
return {
sexColumns: [
{
values: ['保密', '男', '女'],
defaultIndex: 0
}
],
showSex: false,
avatar: '',
nickName: '',
gender: -1,
mobile: ''
};
},
computed: {
genderText() {
const text = ['保密', '男', '女'];
return text[this.gender] || '';
}
},
created() {
this.getUserInfo();
},
methods: {
avatarAfterRead(file) {
console.log(file);
},
onSexConfirm(value, index) {
this.$reqPut(USER_PROFILE, {
gender: index[0]
}).then(res => {
this.gender = res.data.data.gender;
this.showSex = false;
});
},
getUserInfo() {
const infoData = getLocalStorage(
'nickName',
'background_image',
'avatar'
);
// debugger;
this.avatar = infoData.avatar;
this.nickName = infoData.nickName;
// this.gender = infoData.gender;
// this.mobile = infoData.mobile;
},
loginOut() {
removeLocalStorage(
'Authorization',
// 'user_id',
'avatar',
// 'background_image',
'nickName'
);
this.$router.push({ name: 'home' });
}
},
components: {
[Button.name]: Button,
[Uploader.name]: Uploader,
[Picker.name]: Picker,
[Popup.name]: Popup
}
};
</script>
<style lang="scss" scoped>
.user_information {
.user_avatar_upload {
position: relative;
width: 50px;
height: 50px;
border: 1px solid $border-color;
img {
max-width: 100%;
max-height: 100%;
}
i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: $border-color;
}
}
}
</style>
litemall-vue/src/vue/mixin/list-load-more.js
View file @ 74126a92
......@@ -16,7 +16,7 @@ export default {
methods: {
async resetInit() {
this.resetData();
debugger;
// debugger;
const page = await this.initData();
this.$nextTick(() => {
this.setPages(page);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment