买家优惠券页面调整,订单导出添加参数,订单详情样式调整

This commit is contained in:
mabo
2021-07-22 09:01:59 +08:00
parent 75bff1edc4
commit 6351bdb633
10 changed files with 309 additions and 320 deletions

View File

@@ -1,110 +0,0 @@
<template>
<div class="wrapper">
<empty v-if="list.length==0" />
<ul class="coupon-list" v-else>
<li v-for="(item, index) in list" class="coupon-item" :key="index">
<div class="c-left">
<div>
<span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">¥<span class="price">{{item.price | unitPrice}}</span></span>
<span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{item.couponDiscount}}</span></span>
<span class="describe">{{item.consumeThreshold}}元可用</span>
</div>
<p>使用范围{{useScope(item.scopeType, item.storeName)}}</p>
<p>有效期{{item.endTime}}</p>
</div>
<b></b>
<a class="c-right" @click="go(item)">立即使用</a>
<i class="circle-top"></i>
<i class="circle-bottom"></i>
</li>
</ul>
<Page :total="total" @on-change="changePageNum"
v-if="list.length && total > params.pageNumber"
class="pageration"
@on-page-size-change="changePageSize"
:page-size="params.pageSize"
show-sizer>
</Page>
<Spin v-if="loading" fix></Spin>
</div>
</template>
<script>
import { memberCouponList } from '@/api/member.js';
export default {
data () {
return {
loading: false, // 列表加载状态
params: { // 请求参数
pageNumber: 1,
pageSize: 10
},
total: 0, // 优惠券总数
list: [] // 优惠券列表
};
},
methods: {
getList () { // 获取优惠券列表
this.loading = true
memberCouponList(this.params).then(res => {
this.loading = false
if (res.success) {
this.list = res.result.records
this.total = res.result.total
}
})
},
go (item) { // 根据使用条件跳转商品列表页面
if (item.storeId !== 'platform') {
this.$router.push({path: '/merchant', query: {id: item.storeId}})
} else {
if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
this.$router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
} else {
this.$router.push({path: '/goodsList'})
}
}
},
changePageNum (val) { // 分页改变页码
this.params.pageNumber = val;
this.getList()
},
changePageSize (val) { // 分页改变页数
this.pageNumber = 1;
this.params.pageSize = val;
this.getList()
},
useScope (type, storeName) { // 根据字段返回 优惠券适用范围
let shop = '平台';
let goods = '全部商品'
if (storeName !== 'platform') shop = storeName
switch (type) {
case 'ALL':
goods = '全部商品'
break;
case 'PORTION_GOODS':
goods = '部分商品'
break;
case 'PORTION_GOODS_CATEGORY':
goods = '部分分类商品'
break;
}
return `${shop}${goods}可用`
}
},
mounted () {
this.getList()
}
};
</script>
<style scoped lang="scss">
@import '../../assets/styles/coupon.scss';
.pageration {
text-align: right;
}
</style>

View File

@@ -4,7 +4,7 @@
<!-- LOGO 搜索 -->
<div class="width_1200 logo">
<div>
<router-link to="/"><img :src="logoImg" alt="lili shop" title="lilishop" /></router-link>
<router-link to="/"><img :src="$store.state.logoImg" alt="lili shop" title="lilishop" /></router-link>
<div>
购物车(<span>{{ goodsTotal }}</span>)
</div>
@@ -136,26 +136,25 @@
</template>
<script>
import Promotion from "@/components/goodsDetail/Promotion";
import Search from "@/components/Search";
import ShowLikeGoods from "@/components/like";
import * as APICart from "@/api/cart";
import * as APIMember from "@/api/member";
import { getLogo } from "@/api/common.js";
import Promotion from '@/components/goodsDetail/Promotion';
import Search from '@/components/Search';
import ShowLikeGoods from '@/components/like';
import * as APICart from '@/api/cart';
import * as APIMember from '@/api/member';
import { getLogo } from '@/api/common.js';
export default {
name: "Cart",
beforeRouteEnter(to, from, next) {
name: 'Cart',
beforeRouteEnter (to, from, next) {
window.scrollTo(0, 0);
next();
},
components: {
Search,
ShowLikeGoods,
Promotion,
Promotion
},
data() {
data () {
return {
logoImg: "", // logo图
couponAvailable: false, // 展示优惠券
stepIndex: 0, // 当前处于哪一步,购物车==0填写订单信息==1成功提交订单==2
goodsTotal: 1, // 商品数量
@@ -165,45 +164,45 @@ export default {
cartList: [], // 购物车列表
couponList: [], // 优惠券列表
priceDetailDTO: {}, // 价格明细
skuList: [], // sku列表
skuList: [] // sku列表
};
},
computed: {},
methods: {
// 跳转商品详情
goGoodsDetail(skuId, goodsId) {
goGoodsDetail (skuId, goodsId) {
let routeUrl = this.$router.resolve({
path: "/goodsDetail",
query: { skuId, goodsId },
path: '/goodsDetail',
query: { skuId, goodsId }
});
window.open(routeUrl.href, "_blank");
window.open(routeUrl.href, '_blank');
},
// 跳转店铺首页
goShopPage(id) {
goShopPage (id) {
let routeUrl = this.$router.resolve({
path: "/Merchant",
query: { id },
path: '/Merchant',
query: { id }
});
window.open(routeUrl.href, "_blank");
window.open(routeUrl.href, '_blank');
},
// 收藏商品
collectGoods(id) {
collectGoods (id) {
this.$Modal.confirm({
title: "收藏",
content: "<p>商品收藏后可在个人中心我的收藏查看</p>",
title: '收藏',
content: '<p>商品收藏后可在个人中心我的收藏查看</p>',
onOk: () => {
APIMember.collectGoods("GOODS", id).then((res) => {
APIMember.collectGoods('GOODS', id).then((res) => {
if (res.success) {
this.$Message.success("收藏商品成功");
this.$Message.success('收藏商品成功');
this.getCartList();
}
});
},
onCancel: () => {},
onCancel: () => {}
});
},
// 删除商品
delGoods(id) {
delGoods (id) {
const idArr = [];
if (!id) {
const list = this.cartList;
@@ -216,50 +215,50 @@ export default {
idArr.push(id);
}
this.$Modal.confirm({
title: "删除",
content: "<p>确定要删除该商品吗?</p>",
title: '删除',
content: '<p>确定要删除该商品吗?</p>',
onOk: () => {
APICart.delCartGoods({ skuIds: idArr.toString() }).then((res) => {
if (res.success) {
this.$Message.success("删除成功");
this.$Message.success('删除成功');
this.getCartList();
} else {
this.$Message.error(res.message);
}
});
},
}
});
},
clearCart() {
clearCart () {
// 清空购物车
this.$Modal.confirm({
title: "提示",
content: "<p>确定要清空购物车吗?清空后不可恢复</p>",
title: '提示',
content: '<p>确定要清空购物车吗?清空后不可恢复</p>',
onOk: () => {
APICart.clearCart().then((res) => {
if (res.success) {
this.$Message.success("清空购物车成功");
this.$Message.success('清空购物车成功');
this.getCartList();
} else {
this.$Message.error(res.message);
}
});
},
}
});
},
// 跳转支付页面
pay() {
pay () {
if (this.checkedNum) {
this.$router.push({ path: "/pay", query: { way: "CART" } });
this.$router.push({ path: '/pay', query: { way: 'CART' } });
} else {
this.$Message.warning("请至少选择一件商品");
this.$Message.warning('请至少选择一件商品');
}
},
// 展示优惠券
showCoupon(storeId, index) {
showCoupon (storeId, index) {
this.couponAvailable = index;
},
changeNum(val, id) {
changeNum (val, id) {
// 设置购买数量
console.log(val, id);
APICart.setCartGoodsNum({ skuId: id, num: val }).then((res) => {
@@ -269,13 +268,13 @@ export default {
}
});
},
async changeChecked(status, type, id) {
async changeChecked (status, type, id) {
// 设置商品选中状态
const check = status ? 1 : 0;
if (type === "all") {
if (type === 'all') {
// 全选
await APICart.setCheckedAll({ checked: check });
} else if (type === "shop") {
} else if (type === 'shop') {
// 选中店铺所有商品
await APICart.setCheckedSeller({ checked: check, storeId: id });
} else {
@@ -286,17 +285,17 @@ export default {
this.getCartList();
},
async receiveShopCoupon(item) {
async receiveShopCoupon (item) {
// 领取优惠券
let res = await APIMember.receiveCoupon(item.id);
if (res.success) {
this.$set(item, "disabled", true);
this.$Message.success("领取成功");
this.$set(item, 'disabled', true);
this.$Message.success('领取成功');
} else {
this.$Message.error(res.message);
}
},
async getCartList() {
async getCartList () {
// 购物车列表
this.loading = true;
try {
@@ -326,25 +325,15 @@ export default {
} catch (error) {
this.loading = false;
}
},
}
},
mounted() {
mounted () {
this.getCartList();
APICart.cartCount().then((res) => {
// 购物车商品数量
if (res.success) this.goodsTotal = res.result;
});
if (!this.Cookies.getItem("logo")) {
getLogo().then((res) => {
if (res.success) {
let logoObj = JSON.parse(res.result.settingValue);
this.Cookies.setItem("logo", logoObj.buyerSideLogo);
}
});
} else {
this.logoImg = this.Cookies.getItem("logo");
}
},
}
};
</script>

View File

@@ -71,7 +71,7 @@
<Input v-model="form.bankAccountNumber" type="text" placeholder="请输入银行账号" style="width:260px" />
</FormItem>
</template>
<FormItem label="返回方式">
<FormItem label="返回方式" v-if="form.serviceType === 'RETURN_GOODS'">
<div>快递至第三方卖家</div>
</FormItem>
<FormItem>

View File

@@ -1,32 +1,137 @@
<template>
<div class="wrapper">
<card _Title="优惠券列表" />
<Coupon/>
<card _Title="优惠券列表" :_Tabs="statusNameList" @_Change="change" />
<empty v-if="list.length==0" />
<ul class="coupon-list" v-else>
<li v-for="(item, index) in list" class="coupon-item" :key="index">
<div class="c-left">
<div>
<span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">¥<span class="price">{{item.price | unitPrice}}</span></span>
<span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{item.discount}}</span></span>
<span class="describe">{{item.consumeThreshold}}元可用</span>
</div>
<p>使用范围{{useScope(item.scopeType, item.storeName)}}</p>
<p>有效期{{item.endTime}}</p>
</div>
<b></b>
<a class="c-right" @click="go(item)">立即使用</a>
<i class="circle-top"></i>
<i class="circle-bottom"></i>
</li>
</ul>
<Page :total="total" @on-change="changePageNum"
v-if="list.length && total > params.pageNumber"
class="pageration"
@on-page-size-change="changePageSize"
:page-size="params.pageSize"
show-sizer>
</Page>
<Spin v-if="loading" fix></Spin>
</div>
</template>
<script>
import Coupon from '@/components/coupon/Coupon.vue'
import { memberCouponList } from '@/api/member.js';
export default {
name: 'Coupons',
data () {
return {
couponsList: [ // 优惠券状态
statusNameList: [ // 优惠券状态
'未使用',
'已使用',
'已过期',
'即将到期'
]
'已过期'
],
statusList: ['NEW', 'USED', 'EXPIRE'],
loading: false, // 列表加载状态
params: { // 请求参数
pageNumber: 1,
pageSize: 10,
memberCouponStatus: 'NEW'
},
total: 0, // 优惠券总数
list: [] // 优惠券列表
};
},
methods: {
getList () { // 获取优惠券列表
this.loading = true
memberCouponList(this.params).then(res => {
this.loading = false
if (res.success) {
this.list = res.result.records
this.total = res.result.total
}
})
},
// 切换优惠券状态
change (index) {
this.params.memberCouponStatus = this.statusList[index]
this.getList()
},
go (item) { // 根据使用条件跳转商品列表页面
if (item.storeId !== 'platform') {
this.$router.push({path: '/merchant', query: {id: item.storeId}})
} else {
if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
this.$router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
} else {
this.$router.push({path: '/goodsList'})
}
}
},
changePageNum (val) { // 分页改变页码
this.params.pageNumber = val;
this.getList()
},
changePageSize (val) { // 分页改变页数
this.pageNumber = 1;
this.params.pageSize = val;
this.getList()
},
useScope (type, storeName) { // 根据字段返回 优惠券适用范围
let shop = '平台';
let goods = '全部商品'
if (storeName !== 'platform') shop = storeName
switch (type) {
case 'ALL':
goods = '全部商品'
break;
case 'PORTION_GOODS':
goods = '部分商品'
break;
case 'PORTION_GOODS_CATEGORY':
goods = '部分分类商品'
break;
}
return `${shop}${goods}可用`
}
},
components: {Coupon},
mounted () {
},
methods: {}
this.getList()
}
}
</script>
<style scoped lang="scss">
@import '../../../assets/styles/coupon.scss';
.coupon-item{
height: 125px;
.c-left{
padding: 16px;
}
.c-right{
padding: 20px 16px;
width: 43px;
font-size: 14px;
}
i {
right: 34px;
}
}
.pageration {
text-align: right;
}
</style>

View File

@@ -190,7 +190,7 @@
<span
v-if="item.couponType === 'DISCOUNT'"
class="fontsize_12 global_color"
><span class="price">{{ item.couponDiscount }}</span
><span class="price">{{ item.discount }}</span
></span
>
<span class="describe"