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

chore[litemall-vue]: 参考litemall-admin结构，重新调整litemall-vue的src结构

parent 8d262f8b
Expand all Hide whitespace changes
Inline Side-by-side
litemall-vue/src/utils/request.js 0 → 100644
View file @ aec557e9
import axios from 'axios'
import { Dialog, Toast } from 'vant';
// create an axios instance
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
if (!config.headers['X-Litemall-Token']) {
config.headers['X-Litemall-Token'] = `${window.localStorage.getItem(
'Authorization'
) || ''}`;
}
return config;
},
err => Promise.reject(err)
)
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data
if (res.errno === 501) {
Toast.fail('请登录');
setTimeout(() => {
window.location = '#/login/'
}, 1500)
return Promise.reject('error')
} else if (res.errno === 502) {
Toast.alert('网站内部错误，请联系网站维护人员')
return Promise.reject('error')
} else if (res.errno !== 0) {
// 非5xx的错误属于业务错误，留给具体页面处理
return Promise.reject(response)
} else {
return response
}
}, error => {
console.log('err' + error)// for debug
Dialog.alert({
title: '警告',
message: '登录连接超时'
});
return Promise.reject(error)
})
export default service
litemall-vue/src/core/utils/scroll.js → litemall-vue/src/utils/scroll.js 100755 → 100644
View file @ aec557e9
export default {
isAttached(element) {
let currentNode = element.parentNode;
while (currentNode) {
if (currentNode.tagName === 'HTML') {
return true;
}
if (currentNode.nodeType === 11) {
return false;
}
currentNode = currentNode.parentNode;
}
return false;
},
getScrollLeft(element) {
return 'scrollLeft' in element ? element.scrollLeft : element.pageXOffset;
},
getVisibleHeight(element) {
return element === window
? element.innerHeight
: element.getBoundingClientRect().height;
},
getVisibleWidth(element) {
return element === window
? element.innerWidth
: element.getBoundingClientRect().width;
}
};
export default {
isAttached(element) {
let currentNode = element.parentNode;
while (currentNode) {
if (currentNode.tagName === 'HTML') {
return true;
}
if (currentNode.nodeType === 11) {
return false;
}
currentNode = currentNode.parentNode;
}
return false;
},
getScrollLeft(element) {
return 'scrollLeft' in element ? element.scrollLeft : element.pageXOffset;
},
getVisibleHeight(element) {
return element === window
? element.innerHeight
: element.getBoundingClientRect().height;
},
getVisibleWidth(element) {
return element === window
? element.innerWidth
: element.getBoundingClientRect().width;
}
};
litemall-vue/src/core/regexp/index.js → litemall-vue/src/utils/validate.js 100755 → 100644
View file @ aec557e9
export const idCard = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
export const mobileReg = /^1[0-9]{10}$/;
export const address = val => {
const value = val.trim();
return value.length >= 5 && value.length <= 100;
};
export const userName = /^[a-zA-Z0-9_\u4e00-\u9fa5]{3,20}$/;
export const emailReg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
export const idCard = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
export const mobileReg = /^1[0-9]{10}$/;
export const address = val => {
const value = val.trim();
return value.length >= 5 && value.length <= 100;
};
export const userName = /^[a-zA-Z0-9_\u4e00-\u9fa5]{3,20}$/;
export const emailReg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
litemall-vue/src/views/home/tabbar-home.vue
View file @ aec557e9
This diff is collapsed.
litemall-vue/src/views/items/list/index.vue
View file @ aec557e9
......@@ -63,11 +63,11 @@
<script>
import { GOODS_SEARCH } from '@/api/goods';
import ItemGroup from '@/vue/components/item-group';
import ItemCardHori from '@/vue/components/item-card-hori/';
import ItemGroup from '@/components/item-group';
import ItemCardHori from '@/components/item-card-hori/';
import { Search, Tab, Tabs, Popup } from 'vant';
// import { throttle } from 'lodash';
import InfinityScroll from '@/vue/components/infinity-scroll';
import InfinityScroll from '@/components/infinity-scroll';
export default {
name: 'Item-list',
......
litemall-vue/src/views/items/search-result/index.vue
View file @ aec557e9
......@@ -32,14 +32,14 @@
<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 ItemGroup from '@/components/item-group/';
import IsEmpty from '@/components/is-empty/';
import ItemCardHori from '@/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';
import loadMore from '@/mixin/list-load-more';
import scrollFixed from '@/mixin/scroll-fixed';
export default {
name: 'Item-list',
......
litemall-vue/src/views/items/tabbar-class.vue
View file @ aec557e9
<template>
<div class="tab_class">
<div class="tal_class_searchBox">
<van-search placeholder="点击前往搜索"/>
<div class="tal_class_searchMask" @click="$router.push({ name: 'search' })"></div>
</div>
<class-tree
ref="classTree"
class="height-fix42"
@nav-click="changeCatalog"
@class-click="toItemList"
@all-click="toItemList"
:list="list"
></class-tree>
<is-empty v-if="isEmpty">抱歉,店主还未上架商品</is-empty>
</div>
</template>
<script>
import { GOODS_CATEGORY, GOODS_CHANNGE_CATEGORY } from '@/api/goods';
import getLocationParam from 'core/utils/location-param';
import { Search } from 'vant';
import classTree from './tabbar-class-tree';
import IsEmpty from '@/vue/components/is-empty';
import _ from 'lodash';
import { async } from 'q';
function getIndex(arr, keyWord) {
let index = 0;
_.each(arr, (v, k) => {
if (v.id === keyWord) {
index = k;
return false;
}
});
return index;
}
export default {
data() {
return {
list: [],
subCategory: [],
isEmpty: false
};
},
created() {
this.initData();
},
methods: {
initData() {
const shop_id = getLocationParam('shop_id');
this.$reqGet(`${GOODS_CATEGORY}`).then(res => {
this.list = res.data.data.categoryList;
this.$refs.classTree.changeList(res.data.data);
this.subCategory = res.data.data.currentSubCategory;
if (this.subCategory.length === 0) this.isEmpty = true;
});
},
removeNoChild(data) {
return data.filter(item => item.children && item.children.length);
},
changeCatalog(id) {
this.$reqGet(`${GOODS_CHANNGE_CATEGORY}${id}`).then(res => {
let index = getIndex(this.list, res.data.data.currentCategory.id);
this.$refs.classTree.changeList(res.data.data);
this.subCategory = res.data.data.currentSubCategory;
if (this.subCategory.length === 0) this.isEmpty = true;
});
},
toItemList(id) {
this.$router.push({
name: 'list',
query: { keyword: '', itemClass: id }
});
}
},
components: {
[Search.name]: Search,
[classTree.name]: classTree,
[IsEmpty.name]: IsEmpty
}
};
</script>
<style scoped>
.tab_class {
overflow: hidden;
background-color: #fff;
}
.height-fix {
padding-bottom: 42px;
}
.tal_class_searchBox {
position: relative;
}
.tal_class_searchMask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
}
</style>
<template>
<div class="tab_class">
<div class="tal_class_searchBox">
<van-search placeholder="点击前往搜索"/>
<div class="tal_class_searchMask" @click="$router.push({ name: 'search' })"></div>
</div>
<class-tree
ref="classTree"
class="height-fix42"
@nav-click="changeCatalog"
@class-click="toItemList"
@all-click="toItemList"
:list="list"
></class-tree>
<is-empty v-if="isEmpty">抱歉,店主还未上架商品</is-empty>
</div>
</template>
<script>
import { GOODS_CATEGORY, GOODS_CHANNGE_CATEGORY } from '@/api/goods';
import getLocationParam from '@/utils/location-param';
import { Search } from 'vant';
import classTree from './tabbar-class-tree';
import IsEmpty from '@/components/is-empty';
import _ from 'lodash';
import { async } from 'q';
function getIndex(arr, keyWord) {
let index = 0;
_.each(arr, (v, k) => {
if (v.id === keyWord) {
index = k;
return false;
}
});
return index;
}
export default {
data() {
return {
list: [],
subCategory: [],
isEmpty: false
};
},
created() {
this.initData();
},
methods: {
initData() {
const shop_id = getLocationParam('shop_id');
this.$reqGet(`${GOODS_CATEGORY}`).then(res => {
this.list = res.data.data.categoryList;
this.$refs.classTree.changeList(res.data.data);
this.subCategory = res.data.data.currentSubCategory;
if (this.subCategory.length === 0) this.isEmpty = true;
});
},
removeNoChild(data) {
return data.filter(item => item.children && item.children.length);
},
changeCatalog(id) {
this.$reqGet(`${GOODS_CHANNGE_CATEGORY}${id}`).then(res => {
let index = getIndex(this.list, res.data.data.currentCategory.id);
this.$refs.classTree.changeList(res.data.data);
this.subCategory = res.data.data.currentSubCategory;
if (this.subCategory.length === 0) this.isEmpty = true;
});
},
toItemList(id) {
this.$router.push({
name: 'list',
query: { keyword: '', itemClass: id }
});
}
},
components: {
[Search.name]: Search,
[classTree.name]: classTree,
[IsEmpty.name]: IsEmpty
}
};
</script>
<style scoped>
.tab_class {
overflow: hidden;
background-color: #fff;
}
.height-fix {
padding-bottom: 42px;
}
.tal_class_searchBox {
position: relative;
}
.tal_class_searchMask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
}
</style>
litemall-vue/src/views/login/forget-reset/index.vue
View file @ aec557e9
<template>
<md-field-group class="foget_view">
<md-field
v-model="password"
icon="lock"
:is-error="isErrow"
placeholder="请输入新密码"/>
<md-field
v-model="passwordRepeat"
type="password"
icon="lock"
:is-error="isErrow"
placeholder="请再次输入密码" />
<div class="red" v-show="isErrow">两次密码输入不一致</div>
<div class="foget_submit">
<van-button size="large" type="danger" @click="submitCode">重置</van-button>
</div>
</md-field-group>
</template>
<script>
import field from '@/vue/components/field/';
import fieldGroup from '@/vue/components/field-group/';
export default {
data() {
return {
isErrow: true,
password: '',
passwordRepeat: ''
};
},
methods: {
submitCode() {}
},
components: {
[field.name]: field,
[fieldGroup.name]: fieldGroup
}
};
</script>
<style lang="scss" scoped>
div.foget_view {
background-color: #fff;
padding-top: 30px;
}
div.foget_submit {
padding-top: 30px;
padding-bottom: 20px;
}
</style>
<template>
<md-field-group class="foget_view">
<md-field
v-model="password"
icon="lock"
:is-error="isErrow"
placeholder="请输入新密码"/>
<md-field
v-model="passwordRepeat"
type="password"
icon="lock"
:is-error="isErrow"
placeholder="请再次输入密码" />
<div class="red" v-show="isErrow">两次密码输入不一致</div>
<div class="foget_submit">
<van-button size="large" type="danger" @click="submitCode">重置</van-button>
</div>
</md-field-group>
</template>
<script>
import field from '@/components/field/';
import fieldGroup from '@/components/field-group/';
export default {
data() {
return {
isErrow: true,
password: '',
passwordRepeat: ''
};
},
methods: {
submitCode() {}
},
components: {
[field.name]: field,
[fieldGroup.name]: fieldGroup
}
};
</script>
<style lang="scss" scoped>
div.foget_view {
background-color: #fff;
padding-top: 30px;
}
div.foget_submit {
padding-top: 30px;
padding-bottom: 20px;
}
</style>
litemall-vue/src/views/login/forget/index.vue
View file @ aec557e9
<template>
<md-field-group class="foget_view">
<md-field
v-model="mobile"
icon="mobile"
placeholder="请输入手机号"/>
<md-field
v-model="code"
icon="lock"
placeholder="请输入短信验证码"
>
<div slot="rightIcon" @click="getCode" class="getCode red">
<countdown v-if="counting" :time="60000" @countdownend="countdownend">
<template slot-scope="props">{{ +props.seconds || 60 }}秒后获取</template>
</countdown>
<span v-else>获取验证码</span>
</div>
</md-field >
<div class="foget_submit">
<van-button size="large" type="danger" @click="submitCode">下一步</van-button>
</div>
</md-field-group>
</template>
<script>
import field from '@/vue/components/field/';
import fieldGroup from '@/vue/components/field-group/';
export default {
data() {
return {
counting: false,
mobile: '',
code: ''
};
},
methods: {
submitCode() {
this.$router.push({ name: 'forgetReset' });
},
getCode() {
this.counting = true;
},
countdownend() {
this.counting = false;
}
},
components: {
[field.name]: field,
[fieldGroup.name]: fieldGroup
}
};
</script>
<style lang="scss" scoped>
@import '../../../assets/scss/mixin';
div.foget_view {
background-color: #fff;
padding-top: 30px;
}
div.foget_submit {
padding-top: 30px;
padding-bottom: 20px;
}
.getCode {
@include one-border(left);
text-align: center;
}
.time_down {
color: $red;
}
</style>
<template>
<md-field-group class="foget_view">
<md-field
v-model="mobile"
icon="mobile"
placeholder="请输入手机号"/>
<md-field
v-model="code"
icon="lock"
placeholder="请输入短信验证码"
>
<div slot="rightIcon" @click="getCode" class="getCode red">
<countdown v-if="counting" :time="60000" @countdownend="countdownend">
<template slot-scope="props">{{ +props.seconds || 60 }}秒后获取</template>
</countdown>
<span v-else>获取验证码</span>
</div>
</md-field >
<div class="foget_submit">
<van-button size="large" type="danger" @click="submitCode">下一步</van-button>
</div>
</md-field-group>
</template>
<script>
import field from '@/components/field/';
import fieldGroup from '@/components/field-group/';
export default {
data() {
return {
counting: false,
mobile: '',
code: ''
};
},
methods: {
submitCode() {
this.$router.push({ name: 'forgetReset' });
},
getCode() {
this.counting = true;
},
countdownend() {
this.counting = false;
}
},
components: {
[field.name]: field,
[fieldGroup.name]: fieldGroup
}
};
</script>
<style lang="scss" scoped>
@import '../../../assets/scss/mixin';
div.foget_view {
background-color: #fff;
padding-top: 30px;
}
div.foget_submit {
padding-top: 30px;
padding-bottom: 20px;
}
.getCode {
@include one-border(left);
text-align: center;
}
.time_down {
color: $red;
}
</style>
litemall-vue/src/views/login/login.vue
View file @ aec557e9
......@@ -50,12 +50,12 @@
</template>
<script>
import field from '@/vue/components/field/';
import fieldGroup from '@/vue/components/field-group/';
import field from '@/components/field/';
import fieldGroup from '@/components/field-group/';
import { USER_LOGIN, USER_PROFILE } from '@/api/user';
import { setLocalStorage } from 'core/utils/local-storage';
import { emailReg, mobileReg } from '@/core/regexp';
import { loginByUsername, USER_LOGIN, USER_PROFILE } from '@/api/user';
import { setLocalStorage } from '@/utils/local-storage';
import { emailReg, mobileReg } from '@/utils/validate';
import { Toast } from 'vant';
......@@ -93,6 +93,7 @@ export default {
async login() {
let loginData = this.getLoginData();
loginByUsername(loginData)
let { data } = await this.$reqPost(USER_LOGIN, loginData);
this.userInfo = data.data.userInfo;
console.log(this.userInfo);
......@@ -139,9 +140,9 @@ export default {
getLoginData() {
const password = this.password;
const username = this.getUserType(this.account);
const account = this.getUserType(this.account);
return {
username: this.account,
[account]: this.account,
password: password
};
},
......
litemall-vue/src/views/login/register-getCode/index.vue
View file @ aec557e9
<template>
<md-field-group class="register_view">
<div>我们将发送验证码到您的手机</div>
<md-field
v-model="mobile"
icon="mobile"
placeholder="请输入手机号"/>
<div class="register_submit">
<van-button size="large" type="danger" @click="submitCode">下一步</van-button>
</div>
<div class="register_footer">
已有账号?
<router-link to="/login" class="red">登录</router-link>
</div>
</md-field-group>
</template>
<script>
import field from '@/vue/components/field/';
import fieldGroup from '@/vue/components/field-group/';
export default {
data() {
return {
mobile: ''
};
},
methods: {
submitCode() {
this.$router.push({ name: 'registerSubmit' });
}
},
components: {
[field.name]: field,
[fieldGroup.name]: fieldGroup
}
};
</script>
<style lang="scss" scoped>
div.register_view {
background-color: #fff;
padding-top: 30px;
}
div.register_submit {
padding-top: 30px;
padding-bottom: 20px;
}
.register_footer {
text-align: right;
color: $font-color-gray;
}
</style>
<template>
<md-field-group class="register_view">
<div>我们将发送验证码到您的手机</div>
<md-field
v-model="mobile"
icon="mobile"
placeholder="请输入手机号"/>
<div class="register_submit">
<van-button size="large" type="danger" @click="submitCode">下一步</van-button>
</div>
<div class="register_footer">
已有账号?
<router-link to="/login" class="red">登录</router-link>
</div>
</md-field-group>
</template>
<script>
import field from '@/components/field/';
import fieldGroup from '@/components/field-group/';
export default {
data() {
return {
mobile: ''
};
},
methods: {
submitCode() {
this.$router.push({ name: 'registerSubmit' });
}
},
components: {
[field.name]: field,
[fieldGroup.name]: fieldGroup
}
};
</script>
<style lang="scss" scoped>
div.register_view {
background-color: #fff;
padding-top: 30px;
}
div.register_submit {
padding-top: 30px;
padding-bottom: 20px;
}
.register_footer {
text-align: right;
color: $font-color-gray;
}
</style>
litemall-vue/src/views/login/register-submit/index.vue
View file @ aec557e9
<template>
<md-field-group class="register_submit">
<md-field v-model="code" icon="mobile" placeholder="请输入验证码">
<div slot="rightIcon" @click="getCode" class="getCode red">
<countdown v-if="counting" :time="60000" @countdownend="countdownend">
<template slot-scope="props">{{ +props.seconds || 60 }}秒后获取</template>
</countdown>
<span v-else>获取验证码</span>
</div>
</md-field>
<md-field v-model="password" icon="lock" placeholder="请输入密码"/>
<md-field v-model="repeatPassword" icon="lock" placeholder="请再次确认密码"/>
<div class="register_submit_btn">
<van-button type="danger" size="large" @click="registerSubmit">确定</van-button>
</div>
</md-field-group>
</template>
<script>
import field from '@/vue/components/field/';
import fieldGroup from '@/vue/components/field-group/';
export default {
data() {
return {
counting: true,
code: '',
password: '',
repeatPassword: ''
};
},
methods: {
registerSubmit() {
this.$router.push({
name: 'registerStatus',
params: { status: 'success' }
});
},
getCode() {
this.counting = true;
},
countdownend() {
this.counting = false;
}
},
components: {
[field.name]: field,
[fieldGroup.name]: fieldGroup
}
};
</script>
<style lang="scss" scoped>
@import '../../../assets/scss/mixin';
.register_submit {
padding-top: 40px;
background-color: #fff;
}
.register_submit_btn {
padding-top: 30px;
}
.getCode {
@include one-border(left);
text-align: center;
}
.time_down {
color: $red;
}
</style>
<template>
<md-field-group class="register_submit">
<md-field v-model="code" icon="mobile" placeholder="请输入验证码">
<div slot="rightIcon" @click="getCode" class="getCode red">
<countdown v-if="counting" :time="60000" @countdownend="countdownend">
<template slot-scope="props">{{ +props.seconds || 60 }}秒后获取</template>
</countdown>
<span v-else>获取验证码</span>
</div>
</md-field>
<md-field v-model="password" icon="lock" placeholder="请输入密码"/>
<md-field v-model="repeatPassword" icon="lock" placeholder="请再次确认密码"/>
<div class="register_submit_btn">
<van-button type="danger" size="large" @click="registerSubmit">确定</van-button>
</div>
</md-field-group>
</template>
<script>
import field from '@/components/field/';
import fieldGroup from '@/components/field-group/';
export default {
data() {
return {
counting: true,
code: '',
password: '',
repeatPassword: ''
};
},
methods: {
registerSubmit() {
this.$router.push({
name: 'registerStatus',
params: { status: 'success' }
});
},
getCode() {
this.counting = true;
},
countdownend() {
this.counting = false;
}
},
components: {
[field.name]: field,
[fieldGroup.name]: fieldGroup
}
};
</script>
<style lang="scss" scoped>
@import '../../../assets/scss/mixin';
.register_submit {
padding-top: 40px;
background-color: #fff;
}
.register_submit_btn {
padding-top: 30px;
}
.getCode {
@include one-border(left);
text-align: center;
}
.time_down {
color: $red;
}
</style>
litemall-vue/src/views/order/tabbar-cart.vue
View file @ aec557e9
<template>
<div class="tab-cart">
<div class="editor_head" v-show="goods.length">
<van-icon :name="isEditor ? 'success' : 'editor'"/>
<span @click="isEditor = !isEditor">{{isEditor ? '完成' : '编辑'}}</span>
</div>
<van-checkbox-group @change="toggle" class="card-goods" v-model="checkedGoods">
<div v-for="(item, i) in goods" :key="i" class="card-goods__item">
<van-checkbox :key="item.id" :name="item.id" v-model="item.checked"></van-checkbox>
<van-card desc="暂无描述" :num="item.number" :thumb="item.picUrl">
<div class="van-card__row" slot="title">
<div class="van-card__title">
<!-- <van-tag plain type="danger">海淘</van-tag> -->
{{item.goodsName}}
</div>
<div class="van-card__price">{{item.price * 100 | yuan}}</div>
</div>
<div slot="footer" v-if="isEditor">
<van-stepper v-model="item.number" @change="stepperEvent(item,arguments)" disableInput/>
</div>
<div slot="footer" v-else>添加日期 {{item.addTime}}</div>
</van-card>
<div class="cart_delete" v-if="isEditor" @click="deleteCart(i)">删除</div>
</div>
</van-checkbox-group>
<div class="clear_invalid" v-if="goods.length" @click="clearInvalid">
<van-icon name="lajitong"/>清除失效商品
</div>
<is-empty v-if="!goods.length">您的购物车空空如也~</is-empty>
<van-submit-bar
style="bottom: 50px"
:price="totalPrice"
:disabled="!checkedGoods.length"
:buttonText="submitBarText"
:loading="isSubmit"
label="总计"
@submit="cartSubmit"
>
<van-checkbox v-model="allCheckedStatus" @change="setCheckAll" style="padding: 0 10px;">全选</van-checkbox>
</van-submit-bar>
</div>
</template>
<script>
import { Checkbox, CheckboxGroup, Card, SubmitBar, Stepper, Tag } from 'vant';
import isEmpty from '@/vue/components/is-empty/';
import _ from 'lodash';
import { debug } from 'util';
export default {
data() {
return {
isEditor: false,
checkedAll: false,
isSubmit: false,
checkedGoods: [],
AllGoods: [],
allCheckedStatus: false,
goods: [],
count: 0
};
},
activated() {
this.checkedAll = false;
this.isEditor = false;
this.isSubmit = false;
},
created() {
this.init();
},
computed: {
submitBarText() {
const count = this.count;
return this.isEditor ? '删除' : `结算${count ? `(${count})` : ''}`;
},
totalPrice() {
return this.goods.reduce(
(total, item) =>
total +
(this.checkedGoods.indexOf(item.id) !== -1
? item.price * item.number * 100
: 0),
0
);
}
},
methods: {
async stepperEvent(item, arg) {
let number = arg[0];
await this.$reqPost('/wx/cart/update', {
number: number,
goodsId: item.goodsId,
id: item.id,
productId: item.productId
});
},
async init() {
let { data } = await this.$reqGet('/wx/cart/index');
this.goods = data.data.cartList;
this.AllGoods = this.getAllList();
this.checkedGoods = this.getCheckedList(this.goods);
this.count = this.checkedGoods.length;
},
getAllList() {
let result = [];
_.each(this.goods, v => {
result.push(v.id);
});
return result;
},
getCheckedList(goods) {
let result = [];
_.each(goods, v => {
if (v.checked) {
result.push(v.id);
}
});
return result;
},
async cartSubmit(data) {
let productIds = [];
let checkedGoods = this.checkedGoods;
_.each(checkedGoods, id => {
productIds.push(
_.find(this.goods, vv => {
return id === vv.id;
}).productId
);
});
console.log(this.goods);
if (this.isEditor) {
this.$dialog
.confirm({
message: '确定删除所选商品吗?',
cancelButtonText: '再想想'
})
.then(() => {
this.deleteNext(productIds);
});
} else {
// for (check in checkedGoods){
// await this.doCheck(productIds);
// }
let { data } = await this.$reqGet(
'/wx/cart/checkout?cartId=0&addressId=0&couponId=0&grouponRulesId=0'
);
this.isSubmit = true;
this.$router.push({ name: 'placeOrderEntity' });
}
},
async doCheck(productIds, isChecked) {
// let good = _.find(this.goods, vv => {
// return id === vv.id;
// })
// let productId = good.productId;
let { data } = await this.$reqPost('/wx/cart/checked', {
productIds: productIds,
isChecked: isChecked
});
// if (this.checkedGoods.length == this.AllGoods.length) {
// this.allCheckedStatus = true;
// }
},
formatPrice(price) {
return (price / 100).toFixed(2);
},
setCheckAll(val) {
if (this.checkedGoods.length === this.AllGoods.length) {
this.checkedGoods = [];
} else {
this.checkedGoods = this.AllGoods;
}
},
deleteCart(o) {
let productId = this.goods[o].productId;
this.$dialog
.confirm({ message: '确定删除所选商品吗', cancelButtonText: '再想想' })
.then(() => {
// const goodsId = this.goods.splice(i, 1)[0].id;
this.$nextTick(() => {
this.deleteNext(productId);
});
});
},
toggle(index) {
let addProductIds = [];
_.each(index, v => {
let productId = _.find(this.goods, result => {
return result.id === v;
}).productId;
addProductIds.push(productId);
});
let delProductIds = [];
_.each(_.difference(this.AllGoods, index), v => {
let productId = _.find(this.goods, result => {
return result.id === v;
}).productId;
delProductIds.push(productId);
});
//没选中的不掉接口
if (delProductIds.length > 0) {
this.doCheck(delProductIds, 0);
}
if (addProductIds.length > 0) {
this.doCheck(addProductIds, 1);
}
},
async deleteNext(o) {
let productIds = [];
if (o instanceof Array) {
productIds = o;
} else {
productIds.push(o);
}
let { data } = await this.$reqPost('/wx/cart/delete', {
productIds: productIds
});
this.count = this.count - productIds.length;
this.goods = data.data.cartList;
// this.isEditor = !!this.goods.length;
// this.checkedGoods.forEach((goods, i) => {
// if (goods.id == goodsId) {
// this.checkedGoods.splice(i, 1);
// return false;
// }
// });
},
clearInvalid() {
this.$dialog
.confirm({
message: '确定清除所有失效商品吗?',
cancelButtonText: '再想想'
})
.then(() => {
this.goods = this.goods.filter(goods => goods.checked);
});
}
},
components: {
[Card.name]: Card,
[Tag.name]: Tag,
[Stepper.name]: Stepper,
[isEmpty.name]: isEmpty,
[Checkbox.name]: Checkbox,
[SubmitBar.name]: SubmitBar,
[CheckboxGroup.name]: CheckboxGroup
}
};
</script>
<style lang="scss" scoped>
@import '../../assets/scss/mixin';
.tab-cart {
padding-bottom: 50px;
box-sizing: border-box;
}
.editor_head {
@include one-border;
text-align: right;
padding: 10px;
font-size: $font-size-normal;
background-color: #fff;
}
.card-goods {
background-color: $bg-color;
.card-goods__item {
display: flex;
align-items: center;
margin-bottom: 10px;
background-color: #fff;
}
.cart_delete {
line-height: 100px;
padding: 0 10px;
color: #fff;
background-color: $red;
}
.card-goods__footer {
font-size: $font-size-normal;
color: $font-color-gray;
}
}
.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="tab-cart">
<div class="editor_head" v-show="goods.length">
<van-icon :name="isEditor ? 'success' : 'editor'"/>
<span @click="isEditor = !isEditor">{{isEditor ? '完成' : '编辑'}}</span>
</div>
<van-checkbox-group @change="toggle" class="card-goods" v-model="checkedGoods">
<div v-for="(item, i) in goods" :key="i" class="card-goods__item">
<van-checkbox :key="item.id" :name="item.id" v-model="item.checked"></van-checkbox>
<van-card desc="暂无描述" :num="item.number" :thumb="item.picUrl">
<div class="van-card__row" slot="title">
<div class="van-card__title">
<!-- <van-tag plain type="danger">海淘</van-tag> -->
{{item.goodsName}}
</div>
<div class="van-card__price">{{item.price * 100 | yuan}}</div>
</div>
<div slot="footer" v-if="isEditor">
<van-stepper v-model="item.number" @change="stepperEvent(item,arguments)" disableInput/>
</div>
<div slot="footer" v-else>添加日期 {{item.addTime}}</div>
</van-card>
<div class="cart_delete" v-if="isEditor" @click="deleteCart(i)">删除</div>
</div>
</van-checkbox-group>
<div class="clear_invalid" v-if="goods.length" @click="clearInvalid">
<van-icon name="lajitong"/>清除失效商品
</div>
<is-empty v-if="!goods.length">您的购物车空空如也~</is-empty>
<van-submit-bar
style="bottom: 50px"
:price="totalPrice"
:disabled="!checkedGoods.length"
:buttonText="submitBarText"
:loading="isSubmit"
label="总计"
@submit="cartSubmit"
>
<van-checkbox v-model="allCheckedStatus" @change="setCheckAll" style="padding: 0 10px;">全选</van-checkbox>
</van-submit-bar>
</div>
</template>
<script>
import { Checkbox, CheckboxGroup, Card, SubmitBar, Stepper, Tag } from 'vant';
import isEmpty from '@/components/is-empty/';
import _ from 'lodash';
import { debug } from 'util';
export default {
data() {
return {
isEditor: false,
checkedAll: false,
isSubmit: false,
checkedGoods: [],
AllGoods: [],
allCheckedStatus: false,
goods: [],
count: 0
};
},
activated() {
this.checkedAll = false;
this.isEditor = false;
this.isSubmit = false;
},
created() {
this.init();
},
computed: {
submitBarText() {
const count = this.count;
return this.isEditor ? '删除' : `结算${count ? `(${count})` : ''}`;
},
totalPrice() {
return this.goods.reduce(
(total, item) =>
total +
(this.checkedGoods.indexOf(item.id) !== -1
? item.price * item.number * 100
: 0),
0
);
}
},
methods: {
async stepperEvent(item, arg) {
let number = arg[0];
await this.$reqPost('/wx/cart/update', {
number: number,
goodsId: item.goodsId,
id: item.id,
productId: item.productId
});
},
async init() {
let { data } = await this.$reqGet('/wx/cart/index');
this.goods = data.data.cartList;
this.AllGoods = this.getAllList();
this.checkedGoods = this.getCheckedList(this.goods);
this.count = this.checkedGoods.length;
},
getAllList() {
let result = [];
_.each(this.goods, v => {
result.push(v.id);
});
return result;
},
getCheckedList(goods) {
let result = [];
_.each(goods, v => {
if (v.checked) {
result.push(v.id);
}
});
return result;
},
async cartSubmit(data) {
let productIds = [];
let checkedGoods = this.checkedGoods;
_.each(checkedGoods, id => {
productIds.push(
_.find(this.goods, vv => {
return id === vv.id;
}).productId
);
});
console.log(this.goods);
if (this.isEditor) {
this.$dialog
.confirm({
message: '确定删除所选商品吗?',
cancelButtonText: '再想想'
})
.then(() => {
this.deleteNext(productIds);
});
} else {
// for (check in checkedGoods){
// await this.doCheck(productIds);
// }
let { data } = await this.$reqGet(
'/wx/cart/checkout?cartId=0&addressId=0&couponId=0&grouponRulesId=0'
);
this.isSubmit = true;
this.$router.push({ name: 'placeOrderEntity' });
}
},
async doCheck(productIds, isChecked) {
// let good = _.find(this.goods, vv => {
// return id === vv.id;
// })
// let productId = good.productId;
let { data } = await this.$reqPost('/wx/cart/checked', {
productIds: productIds,
isChecked: isChecked
});
// if (this.checkedGoods.length == this.AllGoods.length) {
// this.allCheckedStatus = true;
// }
},
formatPrice(price) {
return (price / 100).toFixed(2);
},
setCheckAll(val) {
if (this.checkedGoods.length === this.AllGoods.length) {
this.checkedGoods = [];
} else {
this.checkedGoods = this.AllGoods;
}
},
deleteCart(o) {
let productId = this.goods[o].productId;
this.$dialog
.confirm({ message: '确定删除所选商品吗', cancelButtonText: '再想想' })
.then(() => {
// const goodsId = this.goods.splice(i, 1)[0].id;
this.$nextTick(() => {
this.deleteNext(productId);
});
});
},
toggle(index) {
let addProductIds = [];
_.each(index, v => {
let productId = _.find(this.goods, result => {
return result.id === v;
}).productId;
addProductIds.push(productId);
});
let delProductIds = [];
_.each(_.difference(this.AllGoods, index), v => {
let productId = _.find(this.goods, result => {
return result.id === v;
}).productId;
delProductIds.push(productId);
});
//没选中的不掉接口
if (delProductIds.length > 0) {
this.doCheck(delProductIds, 0);
}
if (addProductIds.length > 0) {
this.doCheck(addProductIds, 1);
}
},
async deleteNext(o) {
let productIds = [];
if (o instanceof Array) {
productIds = o;
} else {
productIds.push(o);
}
let { data } = await this.$reqPost('/wx/cart/delete', {
productIds: productIds
});
this.count = this.count - productIds.length;
this.goods = data.data.cartList;
// this.isEditor = !!this.goods.length;
// this.checkedGoods.forEach((goods, i) => {
// if (goods.id == goodsId) {
// this.checkedGoods.splice(i, 1);
// return false;
// }
// });
},
clearInvalid() {
this.$dialog
.confirm({
message: '确定清除所有失效商品吗?',
cancelButtonText: '再想想'
})
.then(() => {
this.goods = this.goods.filter(goods => goods.checked);
});
}
},
components: {
[Card.name]: Card,
[Tag.name]: Tag,
[Stepper.name]: Stepper,
[isEmpty.name]: isEmpty,
[Checkbox.name]: Checkbox,
[SubmitBar.name]: SubmitBar,
[CheckboxGroup.name]: CheckboxGroup
}
};
</script>
<style lang="scss" scoped>
@import '../../assets/scss/mixin';
.tab-cart {
padding-bottom: 50px;
box-sizing: border-box;
}
.editor_head {
@include one-border;
text-align: right;
padding: 10px;
font-size: $font-size-normal;
background-color: #fff;
}
.card-goods {
background-color: $bg-color;
.card-goods__item {
display: flex;
align-items: center;
margin-bottom: 10px;
background-color: #fff;
}
.cart_delete {
line-height: 100px;
padding: 0 10px;
color: #fff;
background-color: $red;
}
.card-goods__footer {
font-size: $font-size-normal;
color: $font-color-gray;
}
}
.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/module-collect/index.vue
View file @ aec557e9
......@@ -40,13 +40,13 @@
<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 ItemGroup from '@/components/item-group/';
import ItemCardHori from '@/components/item-card-hori/';
import IsEmpty from '@/components/is-empty/';
import { Search, List } from 'vant';
import loadMore from '@/vue/mixin/list-load-more';
import scrollFixed from '@/vue/mixin/scroll-fixed';
import loadMore from '@/mixin/list-load-more';
import scrollFixed from '@/mixin/scroll-fixed';
export default {
mixins: [loadMore, scrollFixed],
......
litemall-vue/src/views/user/refund-list/index.vue
View file @ aec557e9
<template>
<div class="order_list">
<van-tabs sticky :active="activeIndex" :swipe-threshold="5" @click="handleTabClick">
<van-tab v-for="(tab, tabIndex) in tabsItem" :title="tab.name" :key="tab.type">
<InfinityScroll
class="full-page scroll-wrap"
:beforeRequest="beforeRequest"
:apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)"
>
<van-panel
v-for="(el, i) in tab.items"
class="order_list--panel"
:key="i"
:title="'订单编号: ' + el.id"
:status="getStatusText(el.status)"
>
<div>
<van-card
class="order_list--van-card"
:key="i"
:title="el.orderItem.item_name"
:desc="el.orderItem.sku_props_str"
:num="10000"
:price="(el.orderItem.price / 100).toFixed(2)"
:thumb="el.orderItem.pic_url"
/>
<div
class="order_list--total"
>合计: {{el.refund_fee | yuan}}（含运费{{el.refund_post_fee | yuan}}）</div>
</div>
<div slot="footer" style="text-align: right;">
<van-button
size="small"
@click="refund_handle(i)"
>{{ el.status == 10 ? "撤销申请" : "查看详情"}}</van-button>
</div>
</van-panel>
</InfinityScroll>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import { REFUND_LIST } from '@/api/order';
import { Tab, Tabs, Panel, Card, List } from 'vant';
import InfinityScroll from '@/vue/components/infinity-scroll';
const STATUS_TEXT = {
10: '退款中',
50: '退款关闭',
60: '退款成功'
};
export default {
name: 'order-list',
data() {
return {
listApi: REFUND_LIST,
shop_id: 1,
activeIndex: 0,
items: [],
tabsItem: [
{
name: '全部',
status: 0,
items: []
},
{
name: '退款中',
status: 10,
items: []
},
{
name: '退款成功',
status: 60,
items: []
}
]
};
},
methods: {
onLoad(i, items) {
this.tabsItem[i].items.push(...items);
},
beforeRequest() {
const i = this.activeIndex;
const status = this.tabsItem[i].status;
const { shop_id } = this;
return {
params: {
status,
shop_id
}
};
},
refund_handle(i) {
const item = this.items[i];
if (item.status == 10) {
this.$dialog
.confirm({
message: '撤销后将不能再次发起申请，确定要撤销该申请吗？'
})
.then(() => {
this.$toast('已撤销该退款申请');
this.items[i].status = 50;
});
} else {
// 跳转退款详情
}
},
handleTabClick(index) {
if (this.activeIndex != index) {
this.activeIndex = index;
}
},
getStatusText(status) {
return STATUS_TEXT[status] || '';
}
},
components: {
[Tab.name]: Tab,
[Tabs.name]: Tabs,
[Panel.name]: Panel,
[Card.name]: Card,
[List.name]: List,
InfinityScroll
}
};
</script>
<style lang="scss" scoped>
.order_list {
padding-bottom: 0;
&--footer_btn {
text-align: right;
}
&--panel {
margin-bottom: 10px;
}
&--van-card {
background-color: #fafafa;
}
&--total {
text-align: right;
padding: 10px;
}
}
</style>
<template>
<div class="order_list">
<van-tabs sticky :active="activeIndex" :swipe-threshold="5" @click="handleTabClick">
<van-tab v-for="(tab, tabIndex) in tabsItem" :title="tab.name" :key="tab.type">
<InfinityScroll
class="full-page scroll-wrap"
:beforeRequest="beforeRequest"
:apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)"
>
<van-panel
v-for="(el, i) in tab.items"
class="order_list--panel"
:key="i"
:title="'订单编号: ' + el.id"
:status="getStatusText(el.status)"
>
<div>
<van-card
class="order_list--van-card"
:key="i"
:title="el.orderItem.item_name"
:desc="el.orderItem.sku_props_str"
:num="10000"
:price="(el.orderItem.price / 100).toFixed(2)"
:thumb="el.orderItem.pic_url"
/>
<div
class="order_list--total"
>合计: {{el.refund_fee | yuan}}（含运费{{el.refund_post_fee | yuan}}）</div>
</div>
<div slot="footer" style="text-align: right;">
<van-button
size="small"
@click="refund_handle(i)"
>{{ el.status == 10 ? "撤销申请" : "查看详情"}}</van-button>
</div>
</van-panel>
</InfinityScroll>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import { REFUND_LIST } from '@/api/order';
import { Tab, Tabs, Panel, Card, List } from 'vant';
import InfinityScroll from '@/components/infinity-scroll';
const STATUS_TEXT = {
10: '退款中',
50: '退款关闭',
60: '退款成功'
};
export default {
name: 'order-list',
data() {
return {
listApi: REFUND_LIST,
shop_id: 1,
activeIndex: 0,
items: [],
tabsItem: [
{
name: '全部',
status: 0,
items: []
},
{
name: '退款中',
status: 10,
items: []
},
{
name: '退款成功',
status: 60,
items: []
}
]
};
},
methods: {
onLoad(i, items) {
this.tabsItem[i].items.push(...items);
},
beforeRequest() {
const i = this.activeIndex;
const status = this.tabsItem[i].status;
const { shop_id } = this;
return {
params: {
status,
shop_id
}
};
},
refund_handle(i) {
const item = this.items[i];
if (item.status == 10) {
this.$dialog
.confirm({
message: '撤销后将不能再次发起申请，确定要撤销该申请吗？'
})
.then(() => {
this.$toast('已撤销该退款申请');
this.items[i].status = 50;
});
} else {
// 跳转退款详情
}
},
handleTabClick(index) {
if (this.activeIndex != index) {
this.activeIndex = index;
}
},
getStatusText(status) {
return STATUS_TEXT[status] || '';
}
},
components: {
[Tab.name]: Tab,
[Tabs.name]: Tabs,
[Panel.name]: Panel,
[Card.name]: Card,
[List.name]: List,
InfinityScroll
}
};
</script>
<style lang="scss" scoped>
.order_list {
padding-bottom: 0;
&--footer_btn {
text-align: right;
}
&--panel {
margin-bottom: 10px;
}
&--van-card {
background-color: #fafafa;
}
&--total {
text-align: right;
padding: 10px;
}
}
</style>
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