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