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

chore[litemall-vue]: 继续调整代码

parent 31d04729
Hide whitespace changes
Inline Side-by-side
litemall-vue/src/api/api.js
View file @ 3730a445
......@@ -56,7 +56,7 @@ export function goodsCount() {
method: 'get'
})
}
const GoodsList='wx/goods/list'; //获得商品列表
export const GoodsList='wx/goods/list'; //获得商品列表
export function goodsList(query) {
return request({
url: GoodsList,
......@@ -141,8 +141,22 @@ export function cartGoodsCount() {
})
}
const CartCheckout='wx/cart/checkout'; // 下单前信息确认
export function cartCheckout(query) {
return request({
url: CartCheckout,
method: 'get',
params: query
})
}
const CollectList='wx/collect/list'; //收藏列表
export function collectList(query) {
return request({
url: CollectList,
method: 'get',
params: query
})
}
const CollectAddOrDelete='wx/collect/addordelete'; //添加或取消收藏
export function collectAddOrDelete(data) {
return request({
......@@ -165,22 +179,105 @@ const SearchHelper='wx/search/helper'; //搜索帮助
const SearchClearHistory='wx/search/clearhistory'; //搜索历史清楚
const AddressList='wx/address/list'; //收货地址列表
export function addressList(query) {
return request({
url: AddressList,
method: 'get',
params: query
})
}
const AddressDetail='wx/address/detail'; //收货地址详情
export function addressDetail(query) {
return request({
url: AddressDetail,
method: 'get',
params: query
})
}
const AddressSave='wx/address/save'; //保存收货地址
export function addressSave(data) {
return request({
url: AddressSave,
method: 'post',
data
})
}
const AddressDelete='wx/address/delete'; //保存收货地址
export function addressDelete(data) {
return request({
url: AddressDelete,
method: 'post',
data
})
}
const ExpressQuery='wx/express/query'; //物流查询
const RegionList='wx/region/list'; //获取区域列表
const OrderSubmit='wx/order/submit'; // 提交订单
export function orderSubmit(data) {
return request({
url: OrderSubmit,
method: 'post',
data
})
}
const OrderPrepay='wx/order/prepay'; // 订单的预支付会话
const OrderList='wx/order/list'; //订单列表
export function orderPrepay(data) {
return request({
url: OrderPrepay,
method: 'post',
data
})
}
export const OrderList='wx/order/list'; //订单列表
export function orderList(query) {
return request({
url: OrderList,
method: 'get',
params: query
})
}
const OrderDetail='wx/order/detail'; //订单详情
export function orderDetail(query) {
return request({
url: OrderDetail,
method: 'get',
params: query
})
}
const OrderCancel='wx/order/cancel'; //取消订单
export function orderCancel(data) {
return request({
url: OrderCancel,
method: 'post',
data
})
}
const OrderRefund='wx/order/refund'; //退款取消订单
export function orderRefund(data) {
return request({
url: OrderSubmit,
method: 'post',
data
})
}
const OrderDelete='wx/order/delete'; //删除订单
export function orderDelete(data) {
return request({
url: OrderDelete,
method: 'post',
data
})
}
const OrderConfirm='wx/order/confirm'; //确认收货
export function orderConfirm(data) {
return request({
url: OrderConfirm,
method: 'post',
data
})
}
const OrderGoods='wx/order/goods'; // 代评价商品信息
const OrderComment='wx/order/comment'; // 评价订单商品信息
......@@ -197,8 +294,29 @@ const GroupOnDetail='wx/groupon/detail'; //团购API-详情
const GroupOnJoin='wx/groupon/join'; //团购API-详情
const CouponList='wx/coupon/list'; //优惠券列表
const CouponMyList='wx/coupon/mylist'; //我的优惠券列表
const CouponSelectList='coupon/selectlist'; //当前订单可用优惠券列表
export function couponList(query) {
return request({
url: CouponList,
method: 'get',
params: query
})
}
export const CouponMyList='wx/coupon/mylist'; //我的优惠券列表
export function couponMyList(query) {
return request({
url: CouponMyList,
method: 'get',
params: query
})
}
const CouponSelectList='wx/coupon/selectlist'; //当前订单可用优惠券列表
export function couponSelectList(query) {
return request({
url: CouponSelectList,
method: 'get',
params: query
})
}
const CouponReceive='wx/coupon/receive'; //优惠券领取
export function couponReceive(data) {
return request({
......@@ -219,3 +337,17 @@ export function userIndex() {
})
}
const IssueList='wx/issue/list'; //帮助信息
export function issueList() {
return request({
url: IssueList,
method: 'get'
})
}
export function getList(api, query) {
return request({
url: api,
method: 'get',
params: query
})
}
\ No newline at end of file
litemall-vue/src/components/infinity-scroll/index.vue
View file @ 3730a445
......@@ -19,7 +19,7 @@ import { List } from 'vant';
import { get } from 'lodash';
import IsEmpty from '@/components/is-empty';
import loadMore from '@/mixin/load-more';
import { goodsList } from '@/api/api';
import { getList } from '@/api/api';
const DEFAULT_CONFIG = {
params: {},
......@@ -64,25 +64,23 @@ export default {
beforeInitData() {
return this.beforeRequest ? this.beforeRequest() : DEFAULT_CONFIG;
},
async initData() {
initData() {
const { params = {}, headers = {} } = this.beforeInitData();
const prePage = this.perPage || this.pages.perPage;
console.log(params);
console.log(headers);
goodsList({
// 'per-page': prePage,
getList(this.apiUrl, {
page: this.pages.currPage,
size: 100,
categoryId: params.cid
// ...params
limit: prePage,
...params
},
headers
);
await this.sleep(1000);
const items = get(res.data, this.resKey, []);
const page = get(res.data, this.pageKey, null);
this.$emit('onLoad', items);
return page;
).then(res => {
const items = get(res.data.data, this.resKey, []);
const page = get(res.data.data, this.pageKey, null);
this.$emit('onLoad', items);
return page;
});
},
sleep(time) {
return new Promise(resolve => {
......
litemall-vue/src/router/items.js
View file @ 3730a445
......@@ -39,8 +39,6 @@ export default [
path: '/items/list',
name: 'list',
component: () => import('@/views/items/list'),
props: route => ({
itemClass: +route.query.itemClass
})
props: route => route.query
}
];
litemall-vue/src/router/order.js
View file @ 3730a445
......@@ -22,11 +22,6 @@ export default [
name: 'orderDetail',
component: () => import('@/views/order/orderDetail')
},
{
path: '/order/placeOrderVirtual',
name: 'placeOrderVirtual',
component: () => import('@/views/order/place-order-virtual')
},
{
path: '/order/payment',
name: 'payment',
......
litemall-vue/src/router/user.js
View file @ 3730a445
......@@ -3,6 +3,7 @@ const UserCollect = () => import('@/views/user/module-collect');
const UserAddress = () => import('@/views/user/module-address');
const UserAddressEdit = () => import('@/views/user/module-address-edit');
const UserServer = () => import('@/views/user/module-server');
const UserHelp = () => import('@/views/user/module-help');
const UserInformation = () => import('@/views/user/user-information-set');
const UserInfo_SetBg = () => import('@/views/user/user-information-set/set-bg');
......@@ -42,7 +43,7 @@ export default [
component: UserAddress
},
{
path: '/user/address/edit/:addressId',
path: '/user/address/edit',
name: 'address-edit',
props: true,
meta: {
......@@ -55,6 +56,11 @@ export default [
name: 'user-server',
component: UserServer
},
{
path: '/user/help',
name: 'user-help',
component: UserHelp
},
{
path: '/user/information',
name: 'user-information',
......
litemall-vue/src/utils/request.js
View file @ 3730a445
......@@ -32,7 +32,7 @@ service.interceptors.response.use(
}, 1500)
return Promise.reject('error')
} else if (res.errno === 502) {
Toast.alert('网站内部错误，请联系网站维护人员')
Toast.fail('网站内部错误，请联系网站维护人员')
return Promise.reject('error')
} if (res.errno === 401) {
Toast.fail('参数不对');
......
litemall-vue/src/views/home/tabbar-home.vue
View file @ 3730a445
......@@ -13,11 +13,11 @@
<div class="goods-channel">
<div class="item"
@click="changeTabbar(iconJson)"
v-for="(iconJson, index) in shopInfos.channel"
@click="changeTabbar(channel)"
v-for="(channel, index) in shopInfos.channel"
:key="index">
<img :src="iconJson.iconUrl" background-size="cover"/>
<span>{{iconJson.name}}</span>
<img :src="channel.iconUrl" background-size="cover"/>
<span>{{channel.name}}</span>
</div>
</div>
......@@ -145,11 +145,11 @@ export default {
})
},
changeTabbar(o) {
let that = this
goodsCategory({ id: o.id}).then(res => {
let categoryId = res.data.data.currentCategory.id;
this.$router.push({
path: `items/list?keyword=&itemClass=${categoryId}`
let categoryId = res.data.data.currentCategory.id;
this.$router.replace({
name: 'list',
query: { itemClass: categoryId }
});
})
},
......
litemall-vue/src/views/items/detail/index.vue
View file @ 3730a445
......@@ -66,7 +66,7 @@
import { goodsDetail, cartGoodsCount, collectAddOrDelete, cartAdd, cartFastAdd } from '@/api/api';
import { Sku, Swipe, SwipeItem, GoodsAction, GoodsActionBigBtn, GoodsActionMiniBtn, Popup } from 'vant';
import { setLocalStorage } from '@/utils/local-storage';
import popupProps from './popup-props';
import _ from 'lodash';
......@@ -254,11 +254,11 @@ computed: {
else {
params.productId = this.getProductIdByOne(data.selectedSkuComb.s1)
}
cartFastAdd(params).then(() => {
cartFastAdd(params).then(res => {
let cartId = res.data.data;
setLocalStorage({CartId: cartId})
that.showSku = false;
that.$router.push({
name: 'cart'
});
this.$router.push({ name: 'placeOrderEntity'});
});
},
skuAdapter() {
......
litemall-vue/src/views/items/list/index.vue
View file @ 3730a445
<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
<van-tabs v-model="navActive" @click="handleTabClick">
<van-tab v-for="(nav, index) in navList" :title="nav.name" :key="index">
<!-- <InfinityScroll
:ref="'tabScrolls' + tabIndex"
class="full-page scroll-wrap fix-height"
:beforeRequest="beforeRequest"
:apiUrl="listApi"
@onLoad="onLoad(tabIndex, $event)"
>
> -->
<div class="h">
<div class="name">{{currentCategory.name}}</div>
<div class="desc">{{currentCategory.desc}}</div>
</div>
<item-group>
<item-card-hori
v-for="(item, i) in tab.items"
v-for="(item, i) in goodsList"
:key="i"
:goods="item"
@click="itemClick(item.id)"
/>
</item-group>
</InfinityScroll>
<!-- </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 { goodsCategory, goodsList, GoodsList } from '@/api/api';
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 '@/components/infinity-scroll';
export default {
name: 'Item-list',
props: {
keyword: {
type: String,
default: ''
},
itemClass: {
type: [String, Number],
default: ''
......@@ -84,108 +46,52 @@ export 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
listApi: GoodsList,
goodsList: [],
currentCategory: {},
navList: [],
navActive: 0
};
},
computed: {
sortVal() {
const { tabActive: i } = this;
return this.tabsItem[i].sort;
}
},
created() {
// this.scrollShowArrow = throttle(this.scrollShowArrow, 100);
this.init();
},
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;
handleTabClick(index) {
this.itemClass= this.navList[index].id;
this.$router.replace({
name: 'list',
query: { itemClass: this.itemClass }
});
this.init();
},
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 } });
}
init() {
goodsCategory({id: this.itemClass}).then(res => {
this.navList = res.data.data.brotherCategory;
this.currentCategory= res.data.data.currentCategory;
// 当id是L1分类id时，这里需要重新设置成L1分类的一个子分类的id
if (res.data.data.parentCategory.id == this.itemClass) {
this.itemClass = res.data.data.currentCategory.id;
}
for (let i = 0; i < this.navList.length; i++) {
if (this.navList[i].id == this.itemClass) {
this.navActive = i
break;
}
}
this.getGoodsList();
});
},
getGoodsList() {
goodsList({categoryId: this.itemClass}).then(res => {
this.goodsList= res.data.data.goodsList
});
},
},
components: {
InfinityScroll,
......@@ -232,20 +138,28 @@ export default {
.items_loading {
margin: 0 auto;
}
.filterItem {
width: 40%;
height: 100%;
li {
padding: 10px;
&.filter_active {
color: $red;
}
}
.h {
height: 100px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.backTop {
position: fixed;
right: 20px;
bottom: 20px;
font-size: 24px;
.h .name {
display: block;
height: 30px;
margin-bottom: 10px;
font-size: 20px;
color: #333;
}
.h .desc {
display: block;
height: 24px;
font-size: 16px;
color: #999;
}
</style>
litemall-vue/src/views/order/payment-status/index.vue
View file @ 3730a445
<template>
<div class="payment_status">
<div class="status_top">
<van-icon :name="statusIcon" :class="statusClass"/>
<div>{{statusText}}</div>
</div>
<div class="status_text" v-if="isSuccess">
<span class="red">3秒</span>跳转订单
</div>
<div class="status_text" v-else>系统繁忙, 支付遇到问题, 请您稍后再试!</div>
<div class="status_goLink">
<router-link class="red" :to="{name: 'user'}">查看订单
<van-icon name="arrow"/>
</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'payment-status',
props: {
status: String
},
created() {
setTimeout(() => {
this.$router.push({ path: 'user/order/list/0' });
}, 3000);
},
data() {
return {
isSuccess: true
};
},
computed: {
statusText() {
return this.isSuccess ? '支付成功' : '支付失败';
},
statusIcon() {
return this.isSuccess ? 'checked' : 'fail';
},
statusClass() {
return this.isSuccess ? 'success_icon' : 'fail_icon';
}
},
activated() {
this.isSuccess = this.status === 'success';
}
};
</script>
<style lang="scss" scopd>
.payment_status {
padding-top: 30px;
box-sizing: border-box;
background-color: #fff;
text-align: center;
}
.status_top {
margin-bottom: 15px;
i {
margin-bottom: 5px;
}
> div {
font-size: 18px;
}
}
.status_text {
color: $font-color-gray;
margin-bottom: 50px;
}
.status_icon {
font-size: 80px;
}
i.success_icon {
@extend .status_icon;
color: #06bf04;
}
i.fail_icon {
@extend .status_icon;
color: #f44;
}
</style>
<template>
<div class="payment_status">
<div class="status_top">
<van-icon :name="statusIcon" :class="statusClass"/>
<div>{{statusText}}</div>
</div>
<div class="status_text" v-if="isSuccess">
<span class="red">3秒</span>跳转订单
</div>
<div class="status_text" v-else>系统繁忙, 支付遇到问题, 请您稍后再试!</div>
<div class="status_goLink">
<router-link class="red" :to="{name: 'user'}">查看订单
<van-icon name="arrow"/>
</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'payment-status',
props: {
status: String
},
created() {
setTimeout(() => {
this.$router.push({ path: '/user/order/list/0' });
}, 3000);
},
data() {
return {
isSuccess: true
};
},
computed: {
statusText() {
return this.isSuccess ? '支付成功' : '支付失败';
},
statusIcon() {
return this.isSuccess ? 'checked' : 'fail';
},
statusClass() {
return this.isSuccess ? 'success_icon' : 'fail_icon';
}
},
activated() {
this.isSuccess = this.status === 'success';
}
};
</script>
<style lang="scss" scopd>
.payment_status {
padding-top: 30px;
box-sizing: border-box;
background-color: #fff;
text-align: center;
}
.status_top {
margin-bottom: 15px;
i {
margin-bottom: 5px;
}
> div {
font-size: 18px;
}
}
.status_text {
color: $font-color-gray;
margin-bottom: 50px;
}
.status_icon {
font-size: 80px;
}
i.success_icon {
@extend .status_icon;
color: #06bf04;
}
i.fail_icon {
@extend .status_icon;
color: #f44;
}
</style>
litemall-vue/src/views/order/payment/index.vue
View file @ 3730a445
<template>
<div class="payment">
<div class="time_down payment_group">
请在
<span class="red">半小时内</span>
完成付款，否则系统自动取消订单
</div>
<van-cell-group class="payment_group">
<van-cell title="订单编号" :value="order_id"/>
<van-cell title="实付金额">
<span class="red">{{order_info.orderInfo.actualPrice *100 | yuan}}</span>
</van-cell>
</van-cell-group>
<div class="pay_way_group">
<div class="pay_way_title">选择支付方式</div>
<van-radio-group v-model="payWay" @change="payWay">
<van-cell-group>
<!-- <van-cell>
<van-radio @click-native="payWay" name="ali">
<img src="../../../assets/images/ali_pay.png" alt="支付宝" width="82" height="29">
</van-radio>
</van-cell>-->
<van-cell>
<van-radio name="wx">
<img src="../../../assets/images/wx_pay.png" alt="微信支付" width="113" height="23">
</van-radio>
<!-- <button @click="pay">wx-pay-test</button> -->
</van-cell>
</van-cell-group>
</van-radio-group>
</div>
<van-button class="pay_submit" @click="pay" :loading="isSubmit" type="primary" bottomAction>去支付</van-button>
</div>
</template>
<script>
import { Radio, RadioGroup } from 'vant';
import _ from 'lodash';
import md5 from 'js-md5';
export default {
name: 'payment',
data() {
return {
isSubmit: false,
payWay: 'wx',
order_info: {},
order_id: '',
checkedName: '1'
};
},
created() {
if (_.has(this.$route.params, 'order_id')) {
this.order_id = this.$route.params.order_id;
this.getOrder(this.order_id);
}
},
methods: {
payWay(name) {
console.log(name);
},
async getOrder(id) {
let { data } = await this.$reqGet(
`/wx/order/detail?orderId=${id}`
);
this.order_info = data.data;
},
async pay() {
let params = {};
params.orderId = this.order_info.orderInfo.id;
let { data } = await this.$reqPost(
`/wx/order/prepay`,
params
);
var that = this;
function onBridgeReady() {
console.log(JSON.stringify(data));
// var timeStamp = Date.parse(new Date());
// var packageV = 'prepay_id=' + data.data.prepay_id;
var params = {
appId: data.data.appId, //公众号名称，由商户传入
timeStamp: data.data.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: data.data.nonceStr, //随机串
package: data.data.packageValue,
signType: data.data.signType, //微信签名方式：
paySign: data.data.paySign //微信签名
};
console.log(params);
WeixinJSBridge.invoke('getBrandWCPayRequest', params, function(res) {
console.log(JSON.stringify(res));
if (res.err_msg == 'get_brand_wcpay_request:ok') {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
that.$router.push({
name: 'paymentStatus',
params: {
status: 'success'
}
});
}
});
}
if (typeof WeixinJSBridge == 'undefined') {
if (document.addEventListener) {
document.addEventListener(
'WeixinJSBridgeReady',
onBridgeReady,
false
);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady();
}
this.order_info = data.data;
},
paySubmit() {
this.$router.push({
name: 'paymentStatus',
params: {
status: 'success'
}
});
}
},
components: {
[Radio.name]: Radio,
[RadioGroup.name]: RadioGroup
}
};
</script>
<style lang="scss" scoped>
.payment_group {
margin-bottom: 10px;
}
.time_down {
background-color: #fffeec;
padding: 10px 15px;
}
.pay_submit {
position: fixed;
bottom: 0;
width: 100%;
}
.pay_way_group img {
vertical-align: middle;
}
.pay_way_title {
padding: 15px;
background-color: #fff;
}
</style>
<template>
<div class="payment">
<div class="time_down payment_group">
请在
<span class="red">半小时内</span>
完成付款，否则系统自动取消订单
</div>
<van-cell-group class="payment_group">
<van-cell title="订单编号" :value="order.orderInfo.orderSn"/>
<van-cell title="实付金额">
<span class="red">{{order.orderInfo.actualPrice *100 | yuan}}</span>
</van-cell>
</van-cell-group>
<div class="pay_way_group">
<div class="pay_way_title">选择支付方式</div>
<van-radio-group v-model="payWay">
<van-cell-group>
<van-cell>
<template slot="title">
<img src="../../../assets/images/ali_pay.png" alt="支付宝" width="82" height="29">
</template>
<van-radio name="ali"/>
</van-cell>
<van-cell>
<template slot="title">
<img src="../../../assets/images/wx_pay.png" alt="微信支付" width="113" height="23">
</template>
<van-radio name="wx"/>
</van-cell>
</van-cell-group>
</van-radio-group>
</div>
<van-button class="pay_submit" @click="pay" type="primary" bottomAction>去支付</van-button>
</div>
</template>
<script>
import { Radio, RadioGroup, Dialog } from 'vant';
import { orderDetail, orderPrepay } from '@/api/api';
import _ from 'lodash';
import md5 from 'js-md5';
export default {
name: 'payment',
data() {
return {
payWay: 'wx',
order: {
orderInfo: {},
orderGoods: []
},
orderId: 0
};
},
created() {
if (_.has(this.$route.params, 'orderId')) {
this.orderId = this.$route.params.orderId;
this.getOrder(this.orderId);
}
},
methods: {
getOrder(orderId) {
orderDetail({orderId: orderId}).then(res => {
this.order = res.data.data;
});
},
pay() {
Dialog.alert({
message: '你选择了' + (this.payWay === 'wx' ? '微信支付' : '支付宝支付')
}).then(() => {
this.$router.push({
name: 'paymentStatus',
params: {
status: 'success'
}
});
});
// // 利用weixin-js-sdk调用微信支付
// orderPrepay({orderId: this.orderId}).then(res => {
// var payParams = res.data.data;
// });
}
},
components: {
[Radio.name]: Radio,
[RadioGroup.name]: RadioGroup,
[Dialog.name]: Dialog
}
};
</script>
<style lang="scss" scoped>
.payment_group {
margin-bottom: 10px;
}
.time_down {
background-color: #fffeec;
padding: 10px 15px;
}
.pay_submit {
position: fixed;
bottom: 0;
width: 100%;
}
.pay_way_group img {
vertical-align: middle;
}
.pay_way_title {
padding: 15px;
background-color: #fff;
}
</style>
litemall-vue/src/views/order/place-order-entity.vue 0 → 100644
View file @ 3730a445
<template>
<div class="order">
<van-cell-group>
<van-cell v-if="checkedAddress" isLink @click="goAddressList()" title="收货地址">
<div slot="label">
<div>
<span>{{ checkedAddress.name }} </span>
<span>{{ checkedAddress.tel }} </span>
</div>
<div>
{{ checkedAddress.addressDetail }}
</div>
</div>
</van-cell>
</van-cell-group>
<van-cell-group>
<van-cell class="order-coupon" title="优惠券" is-link :value="getCouponValue()" @click="getCoupons" />
</van-cell-group>
<!-- 优惠券列表 -->
<van-popup v-model="showList" position="bottom">
<van-coupon-list
:coupons="coupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
/>
</van-popup>
<van-card
v-for="item in checkedGoodsList"
:key="item.id"
:title="item.goodsName"
:num="item.number"
:price="item.price +'.00'"
:thumb="item.picUrl"
>
<div slot="desc">
<div class="van-card__desc">
<van-tag plain style="margin-right:6px;" v-for="(spec, index) in item.specifications" :key="index">
{{spec}}
</van-tag>
</div>
</div>
</van-card>
<van-cell-group>
<van-cell title="商品金额">
<span class="red">{{goodsTotalPrice * 100 | yuan}}</span>
</van-cell>
<van-cell title="邮费">
<span class="red">{{ freightPrice * 100| yuan}}</span>
</van-cell>
<van-cell title="优惠券">
<span class="red">-{{ couponPrice * 100| yuan}}</span>
</van-cell>
<van-field v-model="message" placeholder="请输入备注" label="订单备注">
<template slot="icon">{{message.length}}/50</template>
</van-field>
</van-cell-group>
<van-submit-bar
:price="actualPrice*100"
label="总计："
buttonText="提交订单"
:disabled="isDisabled"
@submit="onSubmit"
/>
</div>
</template>
<script>
import { Card, Tag, ard, Field, SubmitBar, Toast } from 'vant';
import { CouponCell, CouponList, Popup } from 'vant';
import { cartCheckout, orderSubmit, couponSelectList} from '@/api/api';
import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
import dayjs from 'dayjs';
export default {
data() {
return {
checkedGoodsList: [],
checkedAddress: {},
availableCouponLength: 0, // 可用的优惠券数量
goodsTotalPrice: 0, //商品总价
freightPrice: 0, //快递费
couponPrice: 0, //优惠券的价格
grouponPrice: 0, //团购优惠价格
orderTotalPrice: 0, //订单总价
actualPrice: 0, //实际需要支付的总价
message: '',
isDisabled: false,
showList: false,
chosenCoupon: -1,
coupons: [],
disabledCoupons: []
};
},
created() {
this.init();
},
methods: {
onSubmit() {
const {AddressId, CartId, CouponId} = getLocalStorage('AddressId', 'CartId', 'CouponId');
if (AddressId === null) {
Toast.fail('请设置收货地址');
return;
}
this.isDisabled = true;
orderSubmit({
addressId: AddressId,
cartId: CartId,
couponId: CouponId,
grouponLinkId: 0,
grouponRulesId: 0,
message: this.message
}).then(res => {
// 下单成功，重置下单参数。
setLocalStorage({AddressId: 0, CartId: 0, CouponId: 0});
let orderId = res.data.data.orderId;
this.$router.push({
name: 'payment',
params: { orderId: orderId }
});
}).catch(error => {
this.isDisabled = false;
this.$toast("下单失败");
})
},
goAddressList() {
this.$router.push({
path: '/user/address'
});
},
getCouponValue() {
if(this.couponPrice !== 0 ){
return "-¥" + this.couponPrice + ".00元"
}
if(this.availableCouponLength !== 0){
return this.availableCouponLength + "张可用"
}
return '没有可用优惠券'
},
getCoupons() {
const {AddressId, CartId, CouponId} = getLocalStorage('AddressId', 'CartId', 'CouponId');
couponSelectList({cartId: CartId, grouponRulesId: 0}).then(res => {
var cList = res.data.data
this.coupons = []
for(var i = 0; i < cList.length; i++){
var c = cList[i]
var coupon = {
id: c.id,
name: c.name,
condition: c.min,
value: c.discount * 100,
description: c.desc,
startAt: new Date(c.startTime).getTime()/1000,
endAt: new Date(c.endTime).getTime()/1000,
valueDesc: c.discount,
unitDesc: '元'
}
this.coupons.push(coupon)
if(c.id === this.couponId){
this.chosenCoupon = i;
break;
}
}
this.showList = true
})
},
init() {
const {AddressId, CartId, CouponId} = getLocalStorage('AddressId', 'CartId', 'CouponId');
cartCheckout({cartId: CartId, addressId: AddressId, couponId: CouponId, grouponRulesId: 0}).then(res => {
var data = res.data.data
this.checkedGoodsList = data.checkedGoodsList;
this.checkedAddress= data.checkedAddress;
this.availableCouponLength= data.availableCouponLength;
this.actualPrice= data.actualPrice;
this.couponPrice= data.couponPrice;
this.grouponPrice= data.grouponPrice;
this.freightPrice= data.freightPrice;
this.goodsTotalPrice= data.goodsTotalPrice;
this.orderTotalPrice= data.orderTotalPrice;
setLocalStorage({AddressId: data.addressId, CartId: data.cartId, CouponId: data.couponId});
});
},
onChange(index) {
this.showList = false;
this.chosenCoupon = index;
if(index === -1 ){
setLocalStorage({CouponId: -1});
}
else{
const couponId = this.coupons[index].id;
setLocalStorage({CouponId: couponId});
}
this.init()
},
onExchange() {
this.$toast("兑换暂不支持");
}
},
components: {
[Toast.name]: Toast ,
[SubmitBar.name]: SubmitBar,
[Card.name]: Card,
[Field.name]: Field,
[Tag.name]: Field,
[CouponCell.name]: CouponCell,
[CouponList.name]: CouponList,
[Popup.name]: Popup
}
};
</script>
<style lang="scss" scoped>
.order-coupon {
margin-top: 10px;
}
</style>
\ No newline at end of file
litemall-vue/src/views/order/place-order-entity/bottom-goods-info.vue deleted 100755 → 0
View file @ 31d04729
<template>
<div class="order-goods">
<van-card
v-for="item in goodsInfo.checkedGoodsList"
:key="item.id"
:title="item.goodsName"
desc="暂无描述"
:num="item.number"
:price="item.price +'.00'"
:thumb="item.picUrl"
>
<div slot="footer">添加日期 {{item.addTime}}</div>
</van-card>
<van-cell-group>
<!-- <van-field v-model="remark" placeholder="请输入备注" label="订单备注"> -->
<!-- <template slot="icon">{{remark.length}}/50</template> -->
<!-- </van-field> -->
<van-cell title="商品金额">
<span class="red">{{goodsInfo.actualPrice * 100 | yuan}}</span>
</van-cell>
<van-cell title="邮费" :value="goodsInfo.freightPrice "></van-cell>
<!-- <van-cell title="税费" value="¥8.96"></van-cell> -->
<van-cell title="优惠券">
<span class="red">-{{ goodsInfo.couponPrice * 100| yuan}}</span>
</van-cell>
</van-cell-group>
</div>
</template>
<script>
import { Card, Field } from 'vant';
export default {
name: 'bottom-goods-info',
props: {
goodsInfo: {
type: Object,
default: () => ({})
}
},
data() {
return {
remark: ''
// goodsInfo: {}
};
},
created() {},
methods: {
// async init() {
// let { data } = await this.$reqGet(
// '/wx/cart/checkout?cartId=0&addressId=0&couponId=0&grouponRulesId=0'
// );
// debugger;
// this.goodsInfo = data.data;
// }
},
components: {
[Card.name]: Card,
[Field.name]: Field
}
};
</script>
<style lang="scss" scoped>
.order-goods {
background-color: #fff;
}
</style>
litemall-vue/src/views/order/place-order-entity/index.vue deleted 100755 → 0
View file @ 31d04729
<template>
<div class="place_order_entity">
<top-user-info :goodsInfo="goodsInfo" style="margin-bottom: 20px;"/>
<bottom-goods-info :goodsInfo="goodsInfo"/>
<van-submit-bar
:price="goodsInfo.orderTotalPrice*100"
label="总计："
buttonText="提交订单"
:loading="isSubmit"
:disabled="isDisabled"
@submit="onSubmit"
/>
</div>
</template>
<script>
import topUserInfo from './top-user-info';
import bottomGoodsInfo from './bottom-goods-info';
import { SubmitBar, Dialog } from 'vant';
export default {
data() {
return {
isSubmit: false,
isDisabled: false,
goodsInfo: {}
};
},
created() {
this.init();
},
methods: {
async onSubmit() {
this.isSubmit = true;
let cartId = this.$route.params.cartId;
if (this.goodsInfo.addressId === 0) {
Dialog.alert({
message: '未选择收货地址'
}).then(() => {
// on close
});
}
let { data } = await this.$reqPost('/wx/order/submit', {
addressId: this.goodsInfo.addressId,
cartId: cartId || 0,
couponId: 0,
grouponLinkId: 0,
grouponRulesId: 0,
message: ''
});
this.$router.push({
name: 'payment',
params: { order_id: data.data.orderId }
});
},
async init() {
let cartId = this.$route.params.cartId;
let { data } = await this.$reqGet(
`/wx/cart/checkout?cartId=${cartId ||
0}&addressId=0&couponId=0&grouponRulesId=0`
);
this.goodsInfo = data.data;
}
},
components: {
[Dialog.name]: Dialog,
[SubmitBar.name]: SubmitBar,
[topUserInfo.name]: topUserInfo,
[bottomGoodsInfo.name]: bottomGoodsInfo
}
};
</script>
<style lang="scss" scoped>
.place_order_entity {
padding-bottom: 70px;
}
</style>
litemall-vue/src/views/order/place-order-entity/top-user-info.vue deleted 100755 → 0
View file @ 31d04729
<template>
<van-cell-group>
<van-cell
v-if="goodsInfo.checkedAddress.id !== 0"
icon="dingwei"
isLink
@click="goAddressList(goodsInfo)"
:title="`${goodsInfo.checkedAddress.name} ${goodsInfo.checkedAddress.mobile}`"
:label="goodsInfo.checkedAddress.address"
/>
<van-cell
v-else
icon="dingwei"
isLink
@click="goAddressList(goodsInfo)"
title="您暂时没有配送地址，请输入配送地址"
:label="goodsInfo.checkedAddress.address"
/>
<!-- <van-cell class="daodian" title="到店自提" label="浙江省 杭州市 西湖区 创新创业园">
<van-checkbox v-model="isDaoDian" slot="icon"></van-checkbox>
</van-cell>-->
<!-- <van-cell icon="id-card" title="张三" label="330327********1574" isLink/> -->
</van-cell-group>
</template>
<script>
import { Checkbox } from 'vant';
export default {
name: 'top-user-info',
props: {
goodsInfo: {
type: Object,
default: () => ({})
}
},
data() {
return {
isDaoDian: false
};
},
methods: {
goAddressList(goodInfo) {
this.$router.push({
path: '/user/address'
});
}
},
components: {
[Checkbox.name]: Checkbox
}
};
</script>
<style lang="scss">
.daodian {
.van-checkbox .van-icon-success {
height: 16px;
width: 16px;
font-size: $font-size-small;
&::before {
line-height: 16px;
}
}
.van-checkbox__input {
height: 16px;
}
.van-checkbox__label {
margin-left: 0;
}
.shop_address {
padding-left: 25px;
box-sizing: border-box;
}
}
</style>
litemall-vue/src/views/order/place-order-virtual/index.vue deleted 100755 → 0
View file @ 31d04729
<template>
<div class="place_order_virtual">
<van-panel>
<van-card
slot="header"
:title="goods.title"
:desc="goods.desc"
num="2"
price="2.00"
:thumb="goods.thumb"
/>
<div class="panel_content">
<van-icon :name="showNotice ? 'arrow-up' : 'arrow-down'" class="panel_notice"/>
<div @click="showNotice = !showNotice">注意事项</div>
<ol v-if="showNotice">
<li>注意事项1</li>
<li>注意事项2</li>
<li>注意事项3</li>
<li>注意事项4</li>
</ol>
</div>
<div slot="footer" class="clearfix">
<div class="float-l">商品金额</div>
<div class="float-r red">{{7200 | yuan}}</div>
</div>
</van-panel>
<van-submit-bar
:price="3050"
label="总计："
buttonText="提交订单"
:loading="isSubmit"
:disabled="isDisabled"
@submit="onSubmit"
/>
</div>
</template>
<script>
import { Panel, SubmitBar, Card } from 'vant';
export default {
data() {
return {
showNotice: false,
isSubmit: false,
isDisabled: false,
goods: {
id: '2',
title: '陕西蜜梨',
desc: '约600g',
price: 690,
status: 1,
num: 3,
thumb:
'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
}
};
},
methods: {
async onSubmit() {
let { data } = await this.$reqPost('/wx/order/submit', {
addressId: 2,
cartId: 0,
couponId: 0,
grouponLinkId: 0,
grouponRulesId: 0,
message: ''
});
this.isSubmit = true;
console.log('提交订单');
}
},
components: {
[Panel.name]: Panel,
[Card.name]: Card,
[SubmitBar.name]: SubmitBar
}
};
</script>
<style scoped lang="scss">
.panel_content {
position: relative;
padding: 10px 15px;
.panel_notice {
position: absolute;
top: 15px;
right: 15px;
}
ol {
padding-left: 12px;
padding-top: 10px;
list-style: decimal;
color: $font-color-gray;
overflow: hidden;
li {
margin-bottom: 10px;
font-size: $font-size-small;
&:last-child {
margin: 0;
}
}
}
}
/*
.slide-enter,.slide-leave-to{
height: 0;
}
.slide-enter-active,.slide-leave-active{
transition: all 1s;
}
*/
</style>
litemall-vue/src/views/order/tabbar-cart.vue
View file @ 3730a445
......@@ -8,13 +8,13 @@
<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}}
<van-card :title="item.goodsName" :price="item.price" :num="item.number" :thumb="item.picUrl">
<div slot="desc">
<div class="van-card__desc">
<van-tag plain style="margin-right:6px;" v-for="(spec, index) in item.specifications" :key="index">
{{spec}}
</van-tag>
</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/>
......@@ -26,10 +26,6 @@
</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
......@@ -49,6 +45,7 @@
<script>
import { Checkbox, CheckboxGroup, Card, SubmitBar, Stepper, Tag } from 'vant';
import { cartList, cartUpdate, cartChecked, cartDelete} from '@/api/api';
import { setLocalStorage } from '@/utils/local-storage';
import isEmpty from '@/components/is-empty/';
import _ from 'lodash';
......@@ -136,7 +133,6 @@ export default {
}).productId
);
});
console.log(this.goods);
if (this.isEditor) {
this.$dialog
.confirm({
......@@ -147,30 +143,11 @@ export default {
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' });
setLocalStorage({AddressId: 0, CartId: 0, CouponId: 0});
this.$router.push({ name: 'placeOrderEntity'});
}
},
doCheck(productIds, isChecked) {
// let good = _.find(this.goods, vv => {
// return id === vv.id;
// })
// let productId = good.productId;
cartChecked({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 = [];
......@@ -183,7 +160,6 @@ export default {
this.$dialog
.confirm({ message: '确定删除所选商品吗', cancelButtonText: '再想想' })
.then(() => {
// const goodsId = this.goods.splice(i, 1)[0].id;
this.$nextTick(() => {
this.deleteNext(productId);
});
......@@ -207,13 +183,13 @@ export default {
});
//没选中的不掉接口
if (delProductIds.length > 0) {
this.doCheck(delProductIds, 0);
cartChecked({productIds: delProductIds, isChecked: 0});
}
if (addProductIds.length > 0) {
this.doCheck(addProductIds, 1);
cartChecked({productIds: addProductIds, isChecked: 1});
}
},
async deleteNext(o) {
deleteNext(o) {
let productIds = [];
if (o instanceof Array) {
productIds = o;
......@@ -221,29 +197,12 @@ export default {
productIds.push(o);
}
cartDelete({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);
});
cartDelete({productIds: productIds}).then(res => {
this.goods = res.data.data.cartList;
this.AllGoods = this.getAllList();
this.checkedGoods = this.getCheckedList(this.goods);
this.count = this.checkedGoods.length;
});
}
},
......
litemall-vue/src/views/user/module-address-edit/index.vue
View file @ 3730a445
<template>
<div>
<van-nav-bar title="编辑地址" left-text="返回" left-arrow @click-left="goback"/>
<van-address-edit
style="background-color: #fff;"
:areaList="areaList"
:addressInfo="addressInfo"
:isSaving="isSave"
showPostal
@save="save"
/>
</div>
</template>
<script>
import { AddressEdit, NavBar } from 'vant';
import areaList from './area.json';
export default {
name: 'address-edit',
props: {
addressId: [Number, String]
},
data() {
return {
areaList,
isSave: false,
addressInfo: {}
};
},
created() {
if (this.addressId !== -1) {
this.init();
}
},
methods: {
async init() {
let { data } = await this.$reqGet(
`/wx/address/detail?id=${this.addressId}`
);
let address = data.data;
this.addressInfo = {
name: address.name,
tel: address.mobile,
// country: '中国',
province: address.provinceName,
city: address.cityName,
// county: '东城区',
areaCode: '110101',
// postalCode: '000000',
// addressDetail: '1',
isDefault: false,
id: this.addressId,
areaId: ''
// address_detail: '是的是的',
// area_code: '330106',
// postal_code: 123456
};
// litemall data
// {
// "errno":0,
// "data":{
// "isDefault":true,
// "areaId":377,
// "address":"adadada",
// "cityName":"市辖区",
// "areaName":"西城区",
// "name":"asd",
// "mobile":"13664552998",
// "id":2,
// "cityId":32,
// "provinceName":"北京市",
// "provinceId":1
// },
// "errmsg":"成功"
// }
console.log(areaList);
},
async save(data) {
let params = {};
params.address = data.addressDetail;
params.areaId = 376;
params.cityId = 32;
params.id = 0;
params.isDefault = true;
params.mobile = data.tel;
params.name = data.name;
params.provinceId = 1;
let { response } = await this.$reqPost(
'/wx/address/save',
params
);
this.$toast('成功');
this.$router.push({ path: '/user/address' });
},
goback() {
this.$router.go(-1);
}
},
components: {
[NavBar.name]: NavBar,
[AddressEdit.name]: AddressEdit
}
};
</script>
<template>
<div>
<van-nav-bar title="编辑地址" left-text="返回" left-arrow @click-left="goback"/>
<van-address-edit
style="background-color: #fff;"
:areaList="areaList"
:addressInfo="addressInfo"
show-set-default
show-delete
@save="onSave"
@delete="onDelete"
/>
</div>
</template>
<script>
import { AddressEdit, NavBar } from 'vant';
import areaList from './area.json';
import { addressDetail, addressSave, addressDelete } from '@/api/api';
import { removeLocalStorage } from '@/utils/local-storage';
export default {
name: 'address-edit',
data() {
return {
areaList,
addressId: 0,
addressInfo: {}
};
},
created() {
this.addressId = this.$route.query.addressId;
if (this.addressId !== -1 && this.addressId !== 0) {
this.init();
}
},
methods: {
init() {
addressDetail({id: this.addressId}).then(res => {
this.addressInfo = res.data.data;
});
},
onSave(content) {
addressSave(content).then(res => {
this.$toast('成功');
this.$router.push({ path: '/user/address' });
});
},
onDelete(content) {
addressDelete({ id: content.id });
removeLocalStorage('AddressId')
this.$router.go(-1);
},
goback() {
this.$router.go(-1);
}
},
components: {
[NavBar.name]: NavBar,
[AddressEdit.name]: AddressEdit
}
};
</script>
litemall-vue/src/views/user/module-address/index.vue
View file @ 3730a445
<template>
<div>
<van-nav-bar title="收货地址" left-text="返回" left-arrow @click-left="goback"/>
<van-radio-group v-model="checkedId">
<van-cell-group v-for="item in addresses" :key="item.id" class="addressGroup">
<van-cell isLink icon="dingwei" :title="item.name" :label="item.detailedAddress"/>
<van-cell>
<van-radio slot="title" :name="item.id" @click="setDefaultAddress(item)">
<span>{{item.isDefault ? '默认地址' : '设为默认'}}</span>
</van-radio>
<div>
<router-link
:to="{name: 'address-edit', params: {addressId: item.id}}"
style="margin-right: 10px;"
>
<van-icon name="editor"/>编辑
</router-link>
<span @click="delAddress(item.id)">
<van-icon name="lajitong"/>删除
</span>
</div>
</van-cell>
</van-cell-group>
</van-radio-group>
<van-button class="bottom_btn" @click="setNewAddress" type="primary" bottomAction>添加地址</van-button>
</div>
</template>
<script>
import { Checkbox, Radio, RadioGroup, NavBar } from 'vant';
import { async } from 'q';
import _ from 'lodash';
export default {
data() {
return {
checkedId: '',
default_address: 1,
addressList: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
}
],
addresses: []
};
},
created() {
this.loadAddress();
},
methods: {
async setDefaultAddress(item) {
let { data } = await this.$reqGet(
`/wx/address/detail?id=${item.id}`
);
let params = data.data;
params.isDefault = true;
await this.$reqPost('/wx/address/save', params);
},
async delAddress(id) {
let { data } = await this.$reqPost('/wx/address/delete', {
id: id
});
this.loadAddress();
},
setNewAddress() {
this.$router.push({ name: 'address-edit', params: { addressId: -1 } });
},
goback() {
this.$router.go(-1);
},
async loadAddress() {
let { data } = await this.$reqGet('/wx/address/list');
this.addresses = data.data;
this.checkedId = _.find(this.addresses, result => {
return result.isDefault === true;
}).id;
}
},
components: {
[NavBar.name]: NavBar,
[Checkbox.name]: Checkbox,
[Radio.name]: Radio,
[RadioGroup.name]: RadioGroup
}
};
</script>
<style lang="scss" scoped>
.addressGroup {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.bottom_btn {
position: fixed;
bottom: 0;
}
</style>
<template>
<div>
<van-nav-bar title="收货地址" left-text="返回" left-arrow @click-left="goback"/>
<van-address-list v-model="chosenAddressId" :list="addressList" @add="onAdd" @edit="onEdit" @select="onSelect"/>
</div>
</template>
<script>
import { addressList, addressDetail, addressSave, addressDelete } from '@/api/api';
import { AddressList, NavBar } from 'vant';
import { setLocalStorage } from '@/utils/local-storage';
export default {
data() {
return {
chosenAddressId: -1,
addressList: []
};
},
created() {
this.loadAddress();
},
methods: {
onAdd() {
this.$router.push({ name: 'address-edit', query: { addressId: -1 } });
},
onEdit(item, index) {
this.$router.push({ name: 'address-edit', query: { addressId: item.id } });
},
onSelect(item, index) {
setLocalStorage({ AddressId: item.id });
this.$router.go(-1);
},
goback() {
this.$router.go(-1);
},
loadAddress() {
addressList().then(res => {
this.addressList = res.data.data;
})
}
},
components: {
[NavBar.name]: NavBar,
[AddressList.name]: AddressList
}
};
</script>
<style lang="scss" scoped>
.addressGroup {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.bottom_btn {
position: fixed;
bottom: 0;
}
</style>
litemall-vue/src/views/user/module-collect/index.vue
View file @ 3730a445
<template>
<div class="user_collect">
<form action="/search" class="fixedTop">
<van-search placeholder="请输入商品名称" v-model="searchVal"/>
</form>
<van-list
v-model="loading"
:finished="finished"
......@@ -29,16 +25,13 @@
</item-group>
</van-list>
<is-empty v-if="isEmpty">没有商品收藏</is-empty>
<is-empty v-if="items.length === 0">没有商品收藏</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 { collectList, collectAddOrDelete } from '@/api/api';
import ItemGroup from '@/components/item-group/';
import ItemCardHori from '@/components/item-card-hori/';
......@@ -53,53 +46,33 @@ export default {
data() {
return {
shop_id: 1,
items: [],
searchVal: ''
page: 1,
limit: 10,
total: 0,
items: []
};
},
created() {
this.resetInit();
this.init();
},
methods: {
initData() {
return this.$reqGet(
'/wx/collect/list?type=0&page=1&size=100',
{},
{
hideLoading: true
}
).then(res => {
// debugger;
init() {
collectList({type:0, page:this.page, limit:this.limit}).then(res => {
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 => {
collectAddOrDelete({ valueId: item.valueId, type: 0 }).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('该商品已失效');
}
},
......
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