mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-21 10:25:53 +08:00
commit message
This commit is contained in:
Chopper
348
buyer/src/pages/AllCategories.vue
Normal file
348
buyer/src/pages/AllCategories.vue
Normal file
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<div class="template">
|
||||
<BaseHeader></BaseHeader>
|
||||
<div class="wrapper">
|
||||
<!--面包屑-->
|
||||
<Breadcrumb class="mb_20" separator=">">
|
||||
<BreadcrumbItem to="/">首页</BreadcrumbItem>
|
||||
<BreadcrumbItem to="/allCategories">全部分类</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
|
||||
<Tabs :animated="false">
|
||||
<TabPane class="mt_40" v-for="(item,index) in mockData" :key="index" :label="item.title">
|
||||
<!-- 分类详情-->
|
||||
<div class="cateBox">
|
||||
<div class="width_800 cateContent" ref="cateContent">
|
||||
<div v-for="(data,i) in item.data" :key="i" class="cateList mb_40">
|
||||
<div class="cateListTitle">
|
||||
<p class="mb_40">{{data.title}} </p>
|
||||
<div class="cateList">
|
||||
<div v-for="(cate,j) in data.List" :key="j" class="cateItem">{{cate.content}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AllCategories",
|
||||
data() {
|
||||
return {
|
||||
mockData: [
|
||||
{
|
||||
title: "图书、电子书",
|
||||
data: [
|
||||
{
|
||||
title: "电子书",
|
||||
List: [
|
||||
{
|
||||
content: "小说"
|
||||
},
|
||||
{
|
||||
content: "经典"
|
||||
},
|
||||
{
|
||||
content: "古装"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "畅销书",
|
||||
List: [
|
||||
{
|
||||
content: "小说畅销"
|
||||
},
|
||||
{
|
||||
content: "经典畅销"
|
||||
},
|
||||
{
|
||||
content: "古装畅销"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "大牌儿2",
|
||||
data: [
|
||||
{
|
||||
title: "电子书2",
|
||||
List: [
|
||||
{
|
||||
content: "小说2"
|
||||
},
|
||||
{
|
||||
content: "经典2"
|
||||
},
|
||||
{
|
||||
content: "古装2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "畅销书2",
|
||||
List: [
|
||||
{
|
||||
content: "小说畅销2"
|
||||
},
|
||||
{
|
||||
content: "经典畅销2"
|
||||
},
|
||||
{
|
||||
content: "古装畅销2"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "大牌儿3",
|
||||
data: [
|
||||
{
|
||||
title: "电子书3",
|
||||
List: [
|
||||
{
|
||||
content: "小说3"
|
||||
},
|
||||
{
|
||||
content: "经典3"
|
||||
},
|
||||
{
|
||||
content: "古装3"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "畅销书3",
|
||||
List: [
|
||||
{
|
||||
content: "小说畅销3"
|
||||
},
|
||||
{
|
||||
content: "经典畅销3"
|
||||
},
|
||||
{
|
||||
content: "古装畅销3"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "大牌儿",
|
||||
data: [
|
||||
{
|
||||
title: "电子书",
|
||||
List: [
|
||||
{
|
||||
content: "小说"
|
||||
},
|
||||
{
|
||||
content: "经典"
|
||||
},
|
||||
{
|
||||
content: "古装"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "畅销书",
|
||||
List: [
|
||||
{
|
||||
content: "小说畅销"
|
||||
},
|
||||
{
|
||||
content: "经典畅销"
|
||||
},
|
||||
{
|
||||
content: "古装畅销"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "大牌儿",
|
||||
data: [
|
||||
{
|
||||
title: "电子书",
|
||||
List: [
|
||||
{
|
||||
content: "小说"
|
||||
},
|
||||
{
|
||||
content: "经典"
|
||||
},
|
||||
{
|
||||
content: "古装"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "畅销书",
|
||||
List: [
|
||||
{
|
||||
content: "小说畅销"
|
||||
},
|
||||
{
|
||||
content: "经典畅销"
|
||||
},
|
||||
{
|
||||
content: "古装畅销"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "大牌儿",
|
||||
data: [
|
||||
{
|
||||
title: "电子书",
|
||||
List: [
|
||||
{
|
||||
content: "小说"
|
||||
},
|
||||
{
|
||||
content: "经典"
|
||||
},
|
||||
{
|
||||
content: "古装"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "畅销书",
|
||||
List: [
|
||||
{
|
||||
content: "小说畅销"
|
||||
},
|
||||
{
|
||||
content: "经典畅销"
|
||||
},
|
||||
{
|
||||
content: "古装畅销"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.windowScroll();
|
||||
},
|
||||
methods: {
|
||||
// 获取每个tab的数据
|
||||
// filterCate(){
|
||||
|
||||
// },
|
||||
|
||||
windowScroll() {
|
||||
let cateWay = [];
|
||||
for (
|
||||
let i = 0;
|
||||
i < document.getElementsByClassName("cateTitle").length;
|
||||
i++
|
||||
) {
|
||||
let cate = document.getElementsByClassName("cateTitle")[i];
|
||||
cateWay.push(cate.offsetTop);
|
||||
}
|
||||
|
||||
console.log(cateWay);
|
||||
|
||||
window.onscroll = function() {
|
||||
var scrollTop =
|
||||
document.documentElement.scrollTop || document.body.scrollTop;
|
||||
console.log("滚动距离" + scrollTop);
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.template {
|
||||
width: 100%;
|
||||
@include background_color($light_background_color);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 1200px;
|
||||
padding-top: 30px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cateContent {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cateBox {
|
||||
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.cateTitle {
|
||||
background: $theme_color;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cateMenuItem {
|
||||
@include title_color($light_title_color);
|
||||
padding: 8px 0;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.cateListTitle {
|
||||
> p {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
@include title_color($light_title_color);
|
||||
}
|
||||
}
|
||||
|
||||
.cateList {
|
||||
display: flex;
|
||||
}
|
||||
.cateItem {
|
||||
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 137px;
|
||||
height: 38px;
|
||||
@include background_color($light_background_color);
|
||||
@include content_color($light_title_color);
|
||||
border: 1px dashed $border_color;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease-in;
|
||||
}
|
||||
.cateItem:hover{
|
||||
background: $theme_color;
|
||||
color: #fff;
|
||||
}
|
||||
.mt_40{
|
||||
margin-top: 40px;
|
||||
}
|
||||
.mb_40{
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
718
buyer/src/pages/Cart.vue
Normal file
718
buyer/src/pages/Cart.vue
Normal file
@@ -0,0 +1,718 @@
|
||||
<template>
|
||||
<div class="cart" @click="couponAvailable = false">
|
||||
<BaseHeader></BaseHeader>
|
||||
<!-- LOGO 搜索 -->
|
||||
<div class="width_1200 logo">
|
||||
<div>
|
||||
<router-link to="/"><img :src="logoImg" alt="lili shop" title="lilishop" /></router-link>
|
||||
<div>
|
||||
购物车(<span>{{ goodsTotal }}</span>)
|
||||
</div>
|
||||
</div>
|
||||
<Search :showTag="false" :showLogo="false"></Search>
|
||||
</div>
|
||||
<Divider />
|
||||
<!-- 购物车主体 -->
|
||||
<div class="cart-content width_1200 center">
|
||||
<div class="available-area">
|
||||
<div class="cart-steps">
|
||||
<span :class="stepIndex == 0 ? 'active' : ''">1.我的购物车</span>
|
||||
<Icon :class="stepIndex == 0 ? 'active-arrow' : ''" custom="iconfont icon-xiayibu"></Icon>
|
||||
<span :class="stepIndex == 1 ? 'active' : ''">2.填写订单信息</span>
|
||||
<Icon :class="stepIndex == 1 ? 'active-arrow' : ''" custom="iconfont icon-xiayibu"></Icon>
|
||||
<span :class="stepIndex == 2 ? 'active' : ''">3.成功提交订单</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 购物车商品列表 -->
|
||||
<div class="cart-goods">
|
||||
<div class="cart-goods-title">
|
||||
<div class="width_60">
|
||||
<Checkbox v-model="allChecked" @on-change="changeChecked(allChecked, 'all')">全选</Checkbox>
|
||||
</div>
|
||||
<div class="goods-title">商品</div>
|
||||
<div class="width_150">单价（元）</div>
|
||||
<div class="width_100">数量</div>
|
||||
<div class="width_150">小计</div>
|
||||
<div class="width_100">操作</div>
|
||||
</div>
|
||||
<div v-if="cartList.length === 0" class="cart-empty">
|
||||
<p>购物车空空如也</p>
|
||||
<router-link to="/">去选购></router-link>
|
||||
</div>
|
||||
<div v-else class="cart-goods-items" v-for="(shop, index) in cartList" :key="index">
|
||||
<div class="shop-name">
|
||||
<div>
|
||||
<Checkbox v-model="shop.checked" @on-change="changeChecked(shop.checked, 'shop', shop.storeId)"></Checkbox>
|
||||
<span class="go-shop-page" @click="goShopPage(shop.storeId)">{{shop.storeName}}</span>
|
||||
<Icon class="customer-service" custom="iconfont icon-kefu" />
|
||||
</div>
|
||||
<span class="shop-coupon" v-if="shop.couponList.length" :class="couponAvailable === index ? 'shop-coupon-show' : ''" @click.stop="showCoupon(shop.id, index)">
|
||||
<!-- 优惠券模态框 -->
|
||||
<div v-if="couponAvailable === index">
|
||||
<div class="coupon-item" v-for="(item, index) in shop.couponList" :key="index">
|
||||
<span v-if="item.couponType === 'PRICE'">￥{{ item.price }}</span>
|
||||
<span v-if="item.couponType === 'DISCOUNT'">{{ item.discount }}折</span>
|
||||
<span>满{{item.consumeThreshold}}元可用</span>
|
||||
<Button class="coupon-btn" size="small" type="primary" @click="receiveShopCoupon(item)" :disabled="item.disabled">{{ item.disabled ? "已领取" : "领取" }}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div class="promotion-notice">{{shop.promotionNotice}}</div>
|
||||
</div>
|
||||
<template v-for="(goods, goodsIndex) in shop.skuList">
|
||||
<div class="goods-item" :key="goodsIndex">
|
||||
<div class="width_60">
|
||||
<Checkbox v-model="goods.checked" @on-change="changeChecked(goods.checked, 'goods', goods.goodsSku.id)"></Checkbox>
|
||||
</div>
|
||||
<div class="goods-title" @click="goGoodsDetail(goods.goodsSku.id, goods.goodsSku.goodsId)">
|
||||
<img :src="
|
||||
goods.goodsSku.thumbnail || '../assets/images/goodsDetail/item-detail-1.jpg'
|
||||
" />
|
||||
<div>
|
||||
<p>{{ goods.goodsSku.goodsName }}</p>
|
||||
<template v-for="(promotion, promotionIndex) in goods.promotions">
|
||||
<div class="promotion" :key="promotionIndex" v-if="promotion.promotionType === 'SECKILL'">
|
||||
<span>秒杀</span>
|
||||
<promotion :time="promotion.endTime" type="cart"></promotion>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width_150">
|
||||
{{ goods.goodsSku.price | unitPrice("￥") }}
|
||||
</div>
|
||||
<div class="width_100">
|
||||
<InputNumber :min="1" size="small" v-model="goods.num" @on-change="changeNum(goods.num, goods.goodsSku.id)"></InputNumber>
|
||||
<div class="fontsize_12">{{goods.goodsSku.quantity > 0 ? '有货' : '无货'}}</div>
|
||||
</div>
|
||||
<div class="width_150">
|
||||
{{ goods.num * goods.goodsSku.price | unitPrice("￥") }}
|
||||
</div>
|
||||
<div class="width_100">
|
||||
<span class="handle-btn" v-if="!goods.errorMessage" @click="delGoods(goods.goodsSku.id)">删除</span>
|
||||
<span class="handle-btn" v-if="!goods.errorMessage" @click="collectGoods(goods.goodsSku.id)">收藏</span>
|
||||
</div>
|
||||
<div class="error-goods" v-if="goods.errorMessage">
|
||||
<div>{{goods.errorMessage}}</div>
|
||||
<Button type="primary" @click="delGoods(goods.goodsSku.id)">删除</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
<!-- 底部支付栏 -->
|
||||
<div class="cart-goods-footer">
|
||||
<div>
|
||||
<div class="width_60">
|
||||
<Checkbox v-model="allChecked" @on-change="changeChecked(allChecked, 'all')">全选</Checkbox>
|
||||
</div>
|
||||
<div class="width_100 handle-btn" @click="delGoods">删除选中商品</div>
|
||||
<!-- <div class="width_100 handle-btn" @click="collectGoods">移到我的收藏</div> -->
|
||||
<div class="width_100 handle-btn" @click="clearCart">清空购物车</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="selected-count">
|
||||
已选择<span>{{ checkedNum }}</span>件商品
|
||||
</div>
|
||||
<div class="ml_20 save-price">
|
||||
已节省<span>{{ priceDetailDTO.discountPrice | unitPrice("￥") }}</span>
|
||||
</div>
|
||||
<div class="ml_20 total-price">
|
||||
总价（不含运费）:<span>{{ priceDetailDTO.billPrice | unitPrice("￥") }}</span>
|
||||
</div>
|
||||
<div class="pay ml_20" @click="pay">去支付</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
</div>
|
||||
<!-- 猜你喜欢 -->
|
||||
<!-- <div class="like">
|
||||
<div class="likeGoods">
|
||||
<ShowLikeGoods />
|
||||
</div>
|
||||
</div> -->
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</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'
|
||||
export default {
|
||||
name: 'Cart',
|
||||
beforeRouteEnter (to, from, next) {
|
||||
window.scrollTo(0, 0);
|
||||
next();
|
||||
},
|
||||
components: {
|
||||
Search,
|
||||
ShowLikeGoods,
|
||||
Promotion
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
logoImg: '',
|
||||
couponAvailable: false,
|
||||
stepIndex: 0, // 当前处于哪一步，购物车==0，填写订单信息==1，成功提交订单==2
|
||||
goodsTotal: 1,
|
||||
checkedNum: 0,
|
||||
allChecked: false,
|
||||
loading: false,
|
||||
city: '珠海',
|
||||
cityArr: [
|
||||
['北京', '上海', '天津', '重庆', '广州'],
|
||||
['深圳', '河南', '辽宁', '吉林', '江苏'],
|
||||
['江西', '四川', '海南', '贵州', '云南'],
|
||||
['西藏', '陕西', '甘肃', '青海', '珠海']
|
||||
],
|
||||
cartList: [],
|
||||
couponList: [
|
||||
{
|
||||
name: '优惠券',
|
||||
price: '10',
|
||||
activity: '满99减10',
|
||||
useRange: '全品类使用',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
name: '优惠券',
|
||||
price: '10',
|
||||
activity: '满99减10',
|
||||
useRange: '全品类使用',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '优惠券',
|
||||
price: '10',
|
||||
activity: '满99减10',
|
||||
useRange: '全品类使用',
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
priceDetailDTO: {},
|
||||
skuList: []
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
// 选择配送区域
|
||||
changeCity (city) {
|
||||
this.city = city;
|
||||
},
|
||||
// 跳转商品详情
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId, goodsId }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
// 跳转店铺首页
|
||||
goShopPage (id) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/Merchant',
|
||||
query: { id }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
// 收藏商品
|
||||
collectGoods (id) {
|
||||
this.$Modal.confirm({
|
||||
title: '收藏',
|
||||
content: '<p>商品收藏后可在个人中心我的收藏查看</p>',
|
||||
onOk: () => {
|
||||
APIMember.collectGoods('GOODS', id).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success('收藏商品成功');
|
||||
this.getCartList();
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel: () => { }
|
||||
});
|
||||
},
|
||||
// 删除商品
|
||||
delGoods (id) {
|
||||
const idArr = [];
|
||||
if (!id) {
|
||||
const list = this.cartList;
|
||||
list.forEach((shop) => {
|
||||
shop.skuList.forEach((goods) => {
|
||||
idArr.push(goods.goodsSku.id);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
idArr.push(id);
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: '删除',
|
||||
content: '<p>确定要删除该商品吗？</p>',
|
||||
onOk: () => {
|
||||
APICart.delCartGoods({ skuIds: idArr.toString() }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('删除成功');
|
||||
this.getCartList();
|
||||
} else {
|
||||
this.$Message.error(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
clearCart () { // 清空购物车
|
||||
this.$Modal.confirm({
|
||||
title: '提示',
|
||||
content: '<p>确定要清空购物车吗？清空后不可恢复</p>',
|
||||
onOk: () => {
|
||||
APICart.clearCart().then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('清空购物车成功');
|
||||
this.getCartList();
|
||||
} else {
|
||||
this.$Message.error(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 跳转支付页面
|
||||
pay () {
|
||||
if (this.checkedNum) {
|
||||
this.$router.push({ path: '/pay', query: { way: 'CART' } });
|
||||
} else {
|
||||
this.$Message.warning('请至少选择一件商品');
|
||||
}
|
||||
},
|
||||
// 展示优惠券
|
||||
showCoupon (storeId, index) {
|
||||
this.couponAvailable = index;
|
||||
},
|
||||
changeNum (val, id) {
|
||||
// 设置购买数量
|
||||
console.log(val, id);
|
||||
APICart.setCartGoodsNum({ skuId: id, num: val }).then((res) => {
|
||||
console.log(res);
|
||||
if (res.code === 200) {
|
||||
this.getCartList();
|
||||
}
|
||||
});
|
||||
},
|
||||
async changeChecked (status, type, id) {
|
||||
// 设置商品选中状态
|
||||
const check = status ? 1 : 0;
|
||||
if (type === 'all') {
|
||||
// 全选
|
||||
await APICart.setCheckedAll({ checked: check });
|
||||
} else if (type === 'shop') {
|
||||
// 选中店铺所有商品
|
||||
await APICart.setCheckedSeller({ checked: check, storeId: id });
|
||||
} else {
|
||||
// 单个商品
|
||||
await APICart.setCheckedGoods({ checked: check, skuId: id });
|
||||
}
|
||||
|
||||
this.getCartList();
|
||||
},
|
||||
|
||||
async receiveShopCoupon (item) { // 领取优惠券
|
||||
let res = await APIMember.receiveCoupon(item.id)
|
||||
if (res.code === 200) {
|
||||
this.$set(item, 'disabled', true)
|
||||
this.$Message.success('领取成功')
|
||||
} else {
|
||||
this.$Message.error(res.message)
|
||||
}
|
||||
},
|
||||
async getCartList () {
|
||||
// 购物车列表
|
||||
this.loading = true;
|
||||
try {
|
||||
let res = await APICart.cartGoodsAll();
|
||||
this.loading = false;
|
||||
if (res.code === 200) {
|
||||
this.cartList = res.result.cartList;
|
||||
this.priceDetailDTO = res.result.priceDetailDTO;
|
||||
this.skuList = res.result.skuList;
|
||||
this.checkedNum = 0;
|
||||
let allChecked = true;
|
||||
for (let k = 0; k < this.cartList.length; k++) {
|
||||
let shop = this.cartList[k]
|
||||
let list = await APIMember.couponList({storeId: shop.storeId})
|
||||
shop.couponList.push(...list.result.records)
|
||||
}
|
||||
for (let i = 0; i < this.skuList.length; i++) {
|
||||
if (this.skuList[i].checked) {
|
||||
this.checkedNum += this.skuList[i].num;
|
||||
} else {
|
||||
allChecked = false;
|
||||
}
|
||||
}
|
||||
this.$forceUpdate()
|
||||
this.allChecked = allChecked;
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/** logo 搜索 start **/
|
||||
.logo {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 20px auto 0;
|
||||
div:nth-child(1) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
width: 200px;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
margin: 0 20px;
|
||||
span {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cart-content {
|
||||
margin: 0 auto;
|
||||
width: 1200px;
|
||||
position: relative;
|
||||
}
|
||||
/** logo end */
|
||||
/** step步骤条 */
|
||||
.cart-steps {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
span {
|
||||
@include content_color($light_content_color);
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
display: inline-block;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.ivu-icon {
|
||||
@include content_color($light_content_color);
|
||||
font-size: 20px;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-radius: 50px;
|
||||
background-color: #ff8f23;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.active-arrow {
|
||||
color: #ff8f23;
|
||||
}
|
||||
}
|
||||
/** 步骤条和配送区域总体 */
|
||||
.available-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.city {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.city-item {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
.city-item:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
/** 商品列表 */
|
||||
.cart-goods {
|
||||
&-title {
|
||||
height: 50px;
|
||||
@include background_color($light_white_background_color);
|
||||
@include title_color($title_color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
.goods-title {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.cart-empty {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 300px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
&-items {
|
||||
.shop-name {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
@include title_color($light_title_color);
|
||||
> * {
|
||||
width: 50%;
|
||||
}
|
||||
.go-shop-page:hover {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
.customer-service {
|
||||
margin-left: 5px;
|
||||
color: #fcc217;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
/** 优惠券 */
|
||||
.shop-coupon {
|
||||
width: 80px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
background: url(../assets/images/cart-coupon-icons02.png) 0 0 no-repeat;
|
||||
> div {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: #fff;
|
||||
border: 1px solid $theme_color;
|
||||
// border-radius: 3px;
|
||||
z-index: 1;
|
||||
padding: 10px 20px;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
background: url(../assets/images/cart-coupon-icons02.png) 0 -58px no-repeat;
|
||||
width: 80px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 0;
|
||||
}
|
||||
.coupon-item {
|
||||
margin-bottom: 10px;
|
||||
span:nth-child(1) {
|
||||
border: 1px solid #e33937;
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
color: $theme_color;
|
||||
border-radius: 3px;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
color: #999;
|
||||
}
|
||||
.coupon-btn {
|
||||
height: 26px;
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
clear: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.promotion-notice {
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
.shop-coupon-show {
|
||||
background-position-y: -34px;
|
||||
}
|
||||
}
|
||||
.goods-item {
|
||||
position: relative;
|
||||
@extend .cart-goods-title;
|
||||
@include background_color($light_white_background_color);
|
||||
padding: 10px 20px;
|
||||
height: auto;
|
||||
> div:nth-child(1) {
|
||||
padding-left: 15px;
|
||||
width: 30px;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
>div>p {
|
||||
@include content_color($light_content_color);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
margin-left: 10px;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(5) {
|
||||
font-weight: bold;
|
||||
}
|
||||
.num-input {
|
||||
width: 60px;
|
||||
border: 1px solid #999;
|
||||
border-radius: 5px;
|
||||
padding: 0 5px;
|
||||
&:focus {
|
||||
outline-color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.error-goods{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: -20px;
|
||||
background-color: rgba($color: #999, $alpha: .5);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 150px;
|
||||
color: #000;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
&-footer {
|
||||
@extend .cart-goods-title;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin-top: 10px;
|
||||
padding: 0 0 0 20px;
|
||||
line-height: 50px;
|
||||
justify-content: space-between;
|
||||
> div {
|
||||
display: flex;
|
||||
}
|
||||
.selected-count {
|
||||
span {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
|
||||
.save-price span {
|
||||
color: #000;
|
||||
}
|
||||
.total-price span {
|
||||
color: $theme_color;
|
||||
font-size: 20px;
|
||||
}
|
||||
.pay {
|
||||
background-color: $theme_color;
|
||||
width: 150px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.handle-btn {
|
||||
font-size: 12px;
|
||||
color: $handle-btn-color;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.like {
|
||||
width: 1200px;
|
||||
margin: 10px auto;
|
||||
// padding: 20px 0;
|
||||
@include white_background_color();
|
||||
}
|
||||
.likeGoods,
|
||||
.shop-nav-container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.ivu-divider {
|
||||
background: $theme_color;
|
||||
height: 2px;
|
||||
}
|
||||
.width_150 {
|
||||
width: 150px;
|
||||
}
|
||||
.width_60 {
|
||||
width: 60px;
|
||||
}
|
||||
.promotion {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
>span{
|
||||
border: 1px solid $theme_color;
|
||||
color: $theme_color;
|
||||
font-size: 12px;
|
||||
border-radius: 2px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
>p{
|
||||
font-size: 12px;
|
||||
margin-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.ivu-input-number-input {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
89
buyer/src/pages/Feedback.vue
Normal file
89
buyer/src/pages/Feedback.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="feedback-container">
|
||||
<div class="feedback-img-box">
|
||||
<img src="../assets/images/feedback.png" />
|
||||
</div>
|
||||
<div class="feedback-box-border">
|
||||
<div class="feedback-box">
|
||||
<div class="feedback-title">
|
||||
<h1>意见反馈</h1>
|
||||
<h2>感谢你的反馈，我们会积极改善，做出更好的服务的</h2>
|
||||
</div>
|
||||
<div class="feedback-content">
|
||||
<div class="feedback-form">
|
||||
<Form :model="formItem" :label-width="80">
|
||||
<FormItem label="标题">
|
||||
<i-input v-model="formItem.title" placeholder="请输入标题"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="反馈信息">
|
||||
<i-input
|
||||
v-model="formItem.content"
|
||||
type="textarea"
|
||||
:autosize="{minRows: 8,maxRows: 10}"
|
||||
placeholder="请输入反馈信息"
|
||||
></i-input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary">提交</Button>
|
||||
<Button type="ghost">清空信息</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Feedback",
|
||||
data() {
|
||||
return {
|
||||
formItem: {
|
||||
title: "",
|
||||
content: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.feedback-container {
|
||||
margin: 15px auto;
|
||||
width: 80%;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* background-color: #ccc; */
|
||||
}
|
||||
.feedback-img-box {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.feedback-img-box img {
|
||||
width: 80%;
|
||||
}
|
||||
.feedback-box-border {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.feedback-box {
|
||||
width: 480px;
|
||||
}
|
||||
.feedback-content {
|
||||
margin: 15px auto;
|
||||
border: 1px #ccc dotted;
|
||||
}
|
||||
.feedback-form {
|
||||
margin: 30px auto;
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
170
buyer/src/pages/GoodsDetail.vue
Normal file
170
buyer/src/pages/GoodsDetail.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div style="background:#fff;">
|
||||
<BaseHeader></BaseHeader>
|
||||
<Search></Search>
|
||||
<drawer></drawer>
|
||||
<ShopHeader v-if="goodsMsg.data" :detail="goodsMsg.data"></ShopHeader>
|
||||
<div class="shop-item-path">
|
||||
<div class="shop-nav-container">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem to="/">首页</BreadcrumbItem>
|
||||
<BreadcrumbItem v-for="(item, index) in categoryBar" :to="goGoodsList(index)" target="_blank" :key="index">{{item.name}}</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
<div class="store-collect">
|
||||
<span class="mr_10"><router-link :to="'Merchant?id='+goodsMsg.data.storeId">{{goodsMsg.data.storeName}}</router-link></span>
|
||||
<span @click="collect" ><Icon type="ios-heart" :color="storeCollected ? '#ed3f14' : '#666'" />{{storeCollected?'已收藏店铺':'收藏店铺'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 商品信息展示 -->
|
||||
<ShowGoods v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoods>
|
||||
<!-- 商品详细展示 -->
|
||||
<ShowGoodsDetail v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoodsDetail>
|
||||
|
||||
<!-- 猜你喜欢-->
|
||||
<!-- <div class="like">
|
||||
<div class="likeGoods">
|
||||
<ShowLikeGoods/>
|
||||
</div>
|
||||
</div> -->
|
||||
<Spin size="large" fix v-if="isLoading"></Spin>
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Search from '@/components/Search';
|
||||
import ShopHeader from '@/components/header/ShopHeader';
|
||||
import ShowGoods from '@/components/goodsDetail/ShowGoods';
|
||||
import ShowGoodsDetail from '@/components/goodsDetail/ShowGoodsDetail';
|
||||
import ShowLikeGoods from '@/components/like';
|
||||
import { goodsSkuDetail } from '@/api/goods';
|
||||
import { cancelCollect, collectGoods, isCollection } from '@/api/member';
|
||||
export default {
|
||||
name: 'GoodsDetail',
|
||||
beforeRouteEnter (to, from, next) {
|
||||
window.scrollTo(0, 0);
|
||||
next();
|
||||
},
|
||||
created () {
|
||||
this.getGoodsDetail();
|
||||
if (this.Cookies.getItem('userInfo')) {
|
||||
isCollection('STORE', this.goodsMsg.data.storeId).then(res => {
|
||||
if (res.success && res.result) {
|
||||
this.storeCollected = true;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tagsColor: ['blue', 'green', 'red', 'yellow'],
|
||||
goodsMsg: {},
|
||||
isLoading: false,
|
||||
categoryBar: [],
|
||||
storeCollected: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getGoodsDetail () {
|
||||
this.isLoading = true;
|
||||
const params = this.$route.query
|
||||
goodsSkuDetail(params).then((res) => {
|
||||
this.isLoading = false;
|
||||
if (res.code === 200) {
|
||||
const result = res.result;
|
||||
const cateName = res.result.categoryName;
|
||||
const cateId = result.data.categoryPath.split(',');
|
||||
const cateArr = [];
|
||||
cateId.forEach((e, index) => { // 插入分类id和name
|
||||
cateArr.push({
|
||||
id: e,
|
||||
name: cateName[index]
|
||||
});
|
||||
});
|
||||
this.categoryBar = cateArr;
|
||||
this.goodsMsg = res.result;
|
||||
} else {
|
||||
this.$Message.error(res.message)
|
||||
this.$router.push('/')
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$router.push('/')
|
||||
});
|
||||
},
|
||||
goGoodsList (currIndex) {
|
||||
const arr = []
|
||||
this.categoryBar.forEach((e, index) => {
|
||||
if (index <= currIndex) {
|
||||
arr.push(e.id)
|
||||
}
|
||||
})
|
||||
return location.origin + '/goodsList?categoryId=' + arr.toString()
|
||||
},
|
||||
async collect () { // 收藏店铺
|
||||
if (this.storeCollected) {
|
||||
let cancel = await cancelCollect('STORE', this.goodsMsg.data.storeId)
|
||||
if (cancel.success) {
|
||||
this.$Message.success('已取消收藏')
|
||||
this.storeCollected = false;
|
||||
}
|
||||
} else {
|
||||
let collect = await collectGoods('STORE', this.goodsMsg.data.storeId);
|
||||
if (collect.code === 200) {
|
||||
this.storeCollected = true;
|
||||
this.$Message.success('收藏店铺成功,可以前往个人中心我的收藏查看');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.query.skuId': function (val) {
|
||||
location.reload();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
components: {
|
||||
Search,
|
||||
ShopHeader,
|
||||
ShowGoods,
|
||||
ShowGoodsDetail,
|
||||
ShowLikeGoods
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shop-item-path {
|
||||
height: 38px;
|
||||
@include background_color($light_background_color);
|
||||
line-height: 38px;
|
||||
color: #2c2c2c;
|
||||
}
|
||||
|
||||
.like {
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
@include white_background_color();
|
||||
}
|
||||
.shop-nav-container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
.store-collect {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
color: #999;
|
||||
span{
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
339
buyer/src/pages/GoodsList.vue
Normal file
339
buyer/src/pages/GoodsList.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div>
|
||||
<BaseHeader></BaseHeader>
|
||||
<Search @search="handleSearch"></Search>
|
||||
<drawer></drawer>
|
||||
<cateNav></cateNav>
|
||||
<div class="container">
|
||||
<!-- 商品筛选栏 -->
|
||||
<GoodsClassNav @getParams="getParams"></GoodsClassNav>
|
||||
|
||||
<!-- 商品展示容器 -->
|
||||
<div class="goods-box">
|
||||
<!-- 商品列表 -->
|
||||
<div class="goods-list-box">
|
||||
<!-- 排序 -->
|
||||
<div class="goods-list-tool">
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item, index) in goodsTool"
|
||||
:key="index"
|
||||
@click="orderBy(item.en, index)"
|
||||
>
|
||||
<span :class="{ 'goods-list-tool-active': index === sortIndex }"
|
||||
>{{ item.title }}<Icon type="ios-arrow-round-down"
|
||||
/></span>
|
||||
</li>
|
||||
<li @click="orderBy('price', 5, 'up')" class="price-sort">
|
||||
<span :class="{ 'goods-list-tool-active': 5 === sortIndex }">
|
||||
价格
|
||||
<div>
|
||||
<Icon
|
||||
type="md-arrow-dropup"
|
||||
:class="{ 'price-color': sortPriceIndex == 'desc' }"
|
||||
/>
|
||||
<Icon
|
||||
type="md-arrow-dropdown"
|
||||
:class="{ 'price-color': sortPriceIndex == 'asc' }"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<div class="goods-list">
|
||||
<empty v-if="goodsList.length === 0" />
|
||||
<div
|
||||
v-else
|
||||
class="goods-show-info"
|
||||
v-for="(item, index) in goodsList"
|
||||
:key="index"
|
||||
@click="goGoodsDetail(item.id, item.goodsId)"
|
||||
>
|
||||
<div class="goods-show-img">
|
||||
<img width="220" height="220" :src="item.thumbnail" />
|
||||
</div>
|
||||
<div class="goods-show-price">
|
||||
<span>
|
||||
<span class="seckill-price text-danger">{{
|
||||
item.price | unitPrice("￥")
|
||||
}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="goods-show-detail">
|
||||
<span>{{ item.goodsName }}</span>
|
||||
</div>
|
||||
<div class="goods-show-num">
|
||||
已有<span>{{ item.commentNum || 0 }}</span
|
||||
>人评价
|
||||
</div>
|
||||
<div class="goods-show-seller">
|
||||
<span>{{ item.storeName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods-page">
|
||||
<Page
|
||||
show-sizer
|
||||
@on-change="changePageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
:total="total"
|
||||
:page-size="params.pageSize"
|
||||
></Page>
|
||||
</div>
|
||||
</div>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GoodsClassNav from '@/components/nav/GoodsClassNav';
|
||||
import * as apiGoods from '@/api/goods';
|
||||
export default {
|
||||
name: 'GoodsList',
|
||||
beforeRouteEnter (to, from, next) {
|
||||
window.scrollTo(0, 0);
|
||||
next();
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
sortIndex: 0,
|
||||
sortPriceIndex: false, // 判断价格升序还是降序
|
||||
goodsTool: [
|
||||
{ title: '综合', en: '' },
|
||||
{ title: '销量', en: 'buyCount' },
|
||||
{ title: '评论数', en: 'commentNum' },
|
||||
{ title: '新品', en: 'releaseTime' }
|
||||
],
|
||||
goodsList: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 0,
|
||||
pageSize: 20,
|
||||
categoryId: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
const keyword = this.$route.query.keyword
|
||||
this.handleSearch(keyword)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSearch (key) {
|
||||
this.params.keyword = key
|
||||
this.params.pageNumber = 0
|
||||
this.getGoodsList()
|
||||
},
|
||||
orderBy (data, index) {
|
||||
// 排序
|
||||
this.sortIndex = index;
|
||||
this.params.sort = data;
|
||||
this.params.order = 'desc';
|
||||
if (data === 'price') {
|
||||
if (!this.sortPriceIndex) {
|
||||
this.sortPriceIndex = 'asc';
|
||||
} else {
|
||||
this.sortPriceIndex === 'desc' ? (this.sortPriceIndex = 'asc') : (this.sortPriceIndex = 'desc');
|
||||
}
|
||||
this.params.order = this.sortPriceIndex
|
||||
} else {
|
||||
this.sortPriceIndex = false
|
||||
}
|
||||
this.getGoodsList();
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
// 跳转商品详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId, goodsId }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
changePageNum (val) {
|
||||
this.params.pageNumber = val - 1;
|
||||
this.getGoodsList();
|
||||
},
|
||||
changePageSize (val) {
|
||||
this.params.pageNumber = 0;
|
||||
this.params.pageSize = val;
|
||||
this.getGoodsList();
|
||||
},
|
||||
getGoodsList () {
|
||||
this.loading = true;
|
||||
apiGoods.goodsList(this.params)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.code === 200) {
|
||||
this.goodsList = res.result.content;
|
||||
this.total = res.result.totalElements;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getParams (val) {
|
||||
// 筛选条件回显
|
||||
Object.assign(this.params, val)
|
||||
this.getGoodsList()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.$route.query.categoryId) {
|
||||
let cateId = this.$route.query.categoryId.split(',')
|
||||
Object.assign(this.params, this.$route.query)
|
||||
this.params.categoryId = cateId[cateId.length - 1]
|
||||
} else {
|
||||
Object.assign(this.params, this.$route.query)
|
||||
}
|
||||
this.getGoodsList()
|
||||
},
|
||||
mounted () {},
|
||||
components: {
|
||||
GoodsClassNav
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../assets/styles/goodsList.scss';
|
||||
.container {
|
||||
margin: 15px auto;
|
||||
width: 1200px;
|
||||
min-width: 1000px;
|
||||
position: relative;
|
||||
}
|
||||
.goods-box {
|
||||
display: flex;
|
||||
}
|
||||
/* ---------------侧边广告栏开始------------------- */
|
||||
.as-box {
|
||||
width: 200px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.item-as-title {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
color: $theme_color;
|
||||
line-height: 36px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.item-as-title span:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.item-as-title span:last-child {
|
||||
float: right;
|
||||
margin-right: 15px;
|
||||
font-size: 10px;
|
||||
color: #ccc;
|
||||
}
|
||||
.item-as {
|
||||
width: 160px;
|
||||
margin: 18px auto;
|
||||
}
|
||||
.item-as-img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.item-as-price span {
|
||||
font-size: 18px;
|
||||
}
|
||||
.item-as-intro {
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.item-as-selled {
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.item-as-selled span {
|
||||
color: #005aa0;
|
||||
}
|
||||
/* ---------------侧边广告栏结束------------------- */
|
||||
|
||||
/* ---------------商品栏开始------------------- */
|
||||
.goods-list-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// margin-left: 15px;
|
||||
// width: calc(100% - 215px);
|
||||
}
|
||||
.goods-list-tool {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
.goods-list-tool ul {
|
||||
padding-left: 15px;
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: left;
|
||||
}
|
||||
.price-sort {
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 50px;
|
||||
height: 22px;
|
||||
position: relative;
|
||||
line-height: 15px;
|
||||
top: -2px;
|
||||
left: 0;
|
||||
}
|
||||
span > div {
|
||||
display: inline-block;
|
||||
.ivu-icon {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
&:nth-child(1) {
|
||||
top: 1px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
.price-color {
|
||||
color: #b3b3b3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-list-tool li {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
.goods-list-tool span {
|
||||
padding: 3px 5px;
|
||||
border: 1px solid #ccc;
|
||||
margin-left: -1px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.goods-list-tool span:hover {
|
||||
border-color: $theme_color;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.goods-list-tool .ivu-icon {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
.goods-list-tool-active {
|
||||
color: #fff;
|
||||
border-left: 1px solid #ccc;
|
||||
background-color: $theme_color !important;
|
||||
}
|
||||
|
||||
/* ---------------商品栏结束------------------- */
|
||||
</style>
|
||||
134
buyer/src/pages/Index.vue
Normal file
134
buyer/src/pages/Index.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<drawer></drawer>
|
||||
<!-- 固定头部 -->
|
||||
<hover-search class="hover-search" :class="{show: topSearchShow}"></hover-search>
|
||||
|
||||
<!-- 顶部广告 -->
|
||||
<FixedTopPage :data="topAdvert"></FixedTopPage>
|
||||
<!-- 头部 包括登录，我的订单等 -->
|
||||
<BaseHeader></BaseHeader>
|
||||
<!-- 搜索框、logo -->
|
||||
<Search></Search>
|
||||
<!-- 商品分类 -->
|
||||
<cateNav :showAlways="true" v-if="showNav"></cateNav>
|
||||
<!-- 楼层装修部分 -->
|
||||
<model-form ref="modelForm" :data="modelForm"></model-form>
|
||||
<!-- 底部栏 -->
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Search from '@/components/Search';
|
||||
import ModelForm from '@/components/indexDecorate/modelForm';
|
||||
import HoverSearch from '@/components/header/hoverSearch';
|
||||
import storage from '@/plugins/storage';
|
||||
import { indexData } from '@/api/index.js';
|
||||
export default {
|
||||
name: 'Index',
|
||||
mounted () {
|
||||
this.getIndexData();
|
||||
let that = this;
|
||||
window.onscroll = function () {
|
||||
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
if (top > 300) {
|
||||
that.topSearchShow = true;
|
||||
} else {
|
||||
that.topSearchShow = false;
|
||||
}
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
modelForm: { list: [] }, // 楼层装修数据
|
||||
topAdvert: {}, // 顶部广告
|
||||
showNav: false, // 是否展示分类栏
|
||||
topSearchShow: false // 滚动后顶部搜索栏展示
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getIndexData () {
|
||||
// 获取首页装修数据
|
||||
indexData({ clientType: 'PC' }).then((res) => {
|
||||
if (res.success) {
|
||||
let dataJson = JSON.parse(res.result.pageData);
|
||||
this.modelForm = dataJson;
|
||||
storage.setItem('navList', dataJson.list[1])
|
||||
this.showNav = true
|
||||
this.topAdvert = dataJson.list[0];
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Search,
|
||||
ModelForm,
|
||||
HoverSearch
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
@include sub_background_color($light_background_color);
|
||||
}
|
||||
/** 商品分类 */
|
||||
.nav-con {
|
||||
width: 1200px;
|
||||
height: 40px;
|
||||
background: #eee;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
.all-categories {
|
||||
width: 200px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
background-color: $theme_color;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
.nav-item {
|
||||
width: 1000px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
li {
|
||||
width: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 15px;
|
||||
color: rgb(89, 88, 88);
|
||||
font-size: 15px;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.hover-search {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
transform: translateY(-200px);
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 3000;
|
||||
box-shadow:0 0 10px 2px rgb(90 90 90 / 60%);
|
||||
transition: 0.35s;
|
||||
}
|
||||
.show {
|
||||
transform: translateY(0);
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
-o-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
484
buyer/src/pages/Login.vue
Normal file
484
buyer/src/pages/Login.vue
Normal file
@@ -0,0 +1,484 @@
|
||||
<template>
|
||||
<div class="login" @keyup.enter="handleSubmit('formInline')">
|
||||
<!-- 顶部logo -->
|
||||
<div class="top-content">
|
||||
<div class="logo-box">
|
||||
<img
|
||||
:src="logoImg"
|
||||
@click="$router.push('/')"
|
||||
/>
|
||||
<div>欢迎登录</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 登录主体 包含轮播图 登录模块 -->
|
||||
<div class="login-container">
|
||||
<!-- 轮播 -->
|
||||
<Carousel loop :autoplay-speed="5000" class="login-carousel" arrow="never">
|
||||
<CarouselItem>
|
||||
<div class="demo-carousel">
|
||||
<img
|
||||
src="https://wanmi-b2b.oss-cn-shanghai.aliyuncs.com/201811141632252680"
|
||||
/>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</Carousel>
|
||||
<!-- 登录模块 -->
|
||||
<div class="form-box">
|
||||
<div class="account-number">
|
||||
<div class="tab-switch">
|
||||
<span>{{type?'账号登录':'验证码登录'}}</span>
|
||||
<span @click="type = !type">{{type?'验证码登录':'账号登录'}}</span>
|
||||
</div>
|
||||
<div @click="$router.push('signUp')">立即注册</div>
|
||||
</div>
|
||||
<!-- 账号密码登录 -->
|
||||
<Form
|
||||
ref="formInline"
|
||||
:model="formData"
|
||||
:rules="ruleInline"
|
||||
v-show="type === true"
|
||||
>
|
||||
<FormItem prop="username">
|
||||
<i-input
|
||||
type="text"
|
||||
v-model="formData.username"
|
||||
clearable
|
||||
placeholder="用户名"
|
||||
>
|
||||
<Icon type="md-person" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem prop="password">
|
||||
<i-input
|
||||
type="password"
|
||||
v-model="formData.password"
|
||||
clearable
|
||||
placeholder="密码"
|
||||
>
|
||||
<Icon type="md-lock" slot="prepend"> </Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button
|
||||
type="error"
|
||||
@click.stop="handleSubmit('formInline')"
|
||||
long
|
||||
>登录</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<!-- 验证码登录 -->
|
||||
<Form
|
||||
ref="formSms"
|
||||
:model="formSms"
|
||||
:rules="ruleInline"
|
||||
v-show="type === false"
|
||||
>
|
||||
<FormItem prop="mobile">
|
||||
<i-input
|
||||
type="text"
|
||||
v-model="formSms.mobile"
|
||||
clearable
|
||||
placeholder="手机号"
|
||||
>
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem prop="code">
|
||||
<i-input
|
||||
type="text"
|
||||
v-model="formSms.code"
|
||||
placeholder="手机验证码"
|
||||
>
|
||||
<Icon
|
||||
type="ios-text-outline"
|
||||
style="font-weight: bold"
|
||||
slot="prepend"
|
||||
/>
|
||||
<Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button @click.stop="verifyBtnClick" long :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button
|
||||
type="error"
|
||||
@click="handleSubmit('formSms')"
|
||||
long
|
||||
>登录</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div class="regist">
|
||||
<span @click="$router.push('forgetPassword')">忘记密码</span>
|
||||
</div>
|
||||
<div class="other-login">
|
||||
<Icon custom="iconfont icon-qq" color="" class="icon-hover" @click="handleWebLogin('QQ')"/>
|
||||
<Icon custom="iconfont icon-weixin" color="" class="icon-hover" @click="handleWebLogin('WECHAT_PC')"/>
|
||||
<!-- <Icon custom="iconfont icon-zhifubao" color="" class="icon-hover" @click="handleWebLogin('ALIPAY')"/> -->
|
||||
<!-- <Icon custom="iconfont icon-weibo" color="" class="icon-hover" @click="handleWebLogin('WEIBO')"/> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 拼图验证码 -->
|
||||
<verify
|
||||
ref="verify"
|
||||
class="verify-con"
|
||||
verifyType="LOGIN"
|
||||
@change="verifyChange"
|
||||
></verify>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<Row type="flex" justify="space-around" class="help">
|
||||
<router-link to="/article" class="item" target="_blank">帮助</router-link>
|
||||
<router-link to="/article?id=1371779927900160000" class="item" target="_blank">隐私</router-link>
|
||||
<router-link to="/article?id=1371992704333905920" class="item" target="_blank">条款</router-link>
|
||||
</Row>
|
||||
<Row type="flex" justify="center" class="copyright">
|
||||
Copyright © 2021 - Present
|
||||
<a href="https://pickmall.cn" target="_blank" style="margin: 0 5px">lili-shop</a>
|
||||
版权所有
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RegExp from '@/plugins/RegExp.js';
|
||||
import { md5 } from '@/plugins/md5.js';
|
||||
import * as apiLogin from '@/api/login.js';
|
||||
import { sendSms } from '@/api/common.js';
|
||||
import { webLogin, loginCallback } from '@/api/login.js';
|
||||
import storage from '@/plugins/storage.js';
|
||||
import verify from '@/components/verify';
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: {
|
||||
verify
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
type: true, // true 账号登录 false 验证码登录
|
||||
formData: {
|
||||
// 登录表单
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
formSms: {
|
||||
code: '',
|
||||
mobile: ''
|
||||
},
|
||||
verifyStatus: false,
|
||||
ruleInline: {
|
||||
// 验证规则
|
||||
username: [{ required: true, message: '请输入用户名' }],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码' },
|
||||
{ type: 'string', min: 6, message: '密码不能少于6位' }
|
||||
],
|
||||
mobile: [
|
||||
{ required: true, message: '请输入手机号码' },
|
||||
{
|
||||
pattern: RegExp.mobile,
|
||||
message: '请输入正确的手机号'
|
||||
}
|
||||
],
|
||||
code: [{ required: true, message: '请输入手机验证码' }]
|
||||
},
|
||||
codeMsg: '发送验证码',
|
||||
interval: '',
|
||||
time: 60,
|
||||
logoImg: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 登录
|
||||
handleSubmit (name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.type) {
|
||||
this.$refs.verify.show = true;
|
||||
} else {
|
||||
let data = JSON.parse(JSON.stringify(this.formSms));
|
||||
apiLogin.smsLogin(data).then((res) => {
|
||||
this.$refs.verify.show = false;
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('登录成功');
|
||||
storage.setItem('accessToken', res.result.accessToken);
|
||||
storage.setItem('refreshToken', res.result.refreshToken);
|
||||
apiLogin.getMemberMsg().then((res) => {
|
||||
if (res.code === 200) {
|
||||
storage.setItem('userInfo', res.result);
|
||||
let query = this.$route.query;
|
||||
if (query.rePath) {
|
||||
this.$router.push({path: query.rePath, query: JSON.parse(query.query)});
|
||||
} else {
|
||||
this.$router.push('/');
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$Message.error(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// this.$Message.error('请填写正确的用户名或密码');
|
||||
}
|
||||
});
|
||||
},
|
||||
sendCode () {
|
||||
if (this.time === 60) {
|
||||
if (this.formSms.mobile === '') {
|
||||
this.$Message.warning('请先填写手机号');
|
||||
return;
|
||||
}
|
||||
if (!this.verifyStatus) {
|
||||
this.$Message.warning('请先完成安全验证');
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
mobile: this.formSms.mobile,
|
||||
verificationEnums: 'LOGIN'
|
||||
};
|
||||
sendSms(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('验证码发送成功');
|
||||
let that = this;
|
||||
this.interval = setInterval(() => {
|
||||
that.time--;
|
||||
if (that.time === 0) {
|
||||
that.time = 60;
|
||||
that.codeMsg = '重新发送';
|
||||
that.verifyStatus = false;
|
||||
clearInterval(that.interval);
|
||||
} else {
|
||||
that.codeMsg = that.time;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
verifyChange (con) { // 拼图验证码回显
|
||||
if (!con.status) return;
|
||||
|
||||
if (this.type === true) { // 账号密码登录
|
||||
let data = JSON.parse(JSON.stringify(this.formData));
|
||||
data.password = md5(data.password);
|
||||
this.$refs.verify.show = false;
|
||||
this.$Spin.show();
|
||||
apiLogin.login(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('登录成功');
|
||||
storage.setItem('accessToken', res.result.accessToken);
|
||||
storage.setItem('refreshToken', res.result.refreshToken);
|
||||
apiLogin.getMemberMsg().then((res) => {
|
||||
this.$Spin.hide();
|
||||
if (res.code === 200) {
|
||||
storage.setItem('userInfo', res.result);
|
||||
let query = this.$route.query;
|
||||
if (query.rePath) {
|
||||
this.$router.push({path: query.rePath, query: JSON.parse(query.query)});
|
||||
} else {
|
||||
this.$router.push('/');
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$Spin.hide();
|
||||
this.$Message.error(res.message);
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$Spin.hide()
|
||||
});
|
||||
} else {
|
||||
this.verifyStatus = true;
|
||||
this.$refs.verify.show = false;
|
||||
}
|
||||
},
|
||||
verifyBtnClick () {
|
||||
if (!this.verifyStatus) {
|
||||
this.$refs.verify.show = true;
|
||||
}
|
||||
},
|
||||
handleWebLogin (type) { // 第三方登录
|
||||
webLogin(type);
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
let uuid = this.$route.query.state;
|
||||
if (uuid) {
|
||||
storage.setItem('uuid', uuid);
|
||||
loginCallback(uuid).then(res => {
|
||||
if (res.code === 200) {
|
||||
const result = res.result;
|
||||
storage.setItem('accessToken', result.accessToken);
|
||||
storage.setItem('refreshToken', result.refreshToken);
|
||||
apiLogin.getMemberMsg().then((res) => {
|
||||
if (res.code === 200) {
|
||||
storage.setItem('userInfo', res.result);
|
||||
let query = this.$route.query;
|
||||
if (query.rePath) {
|
||||
this.$router.push({path: query.rePath, query: JSON.parse(query.query)});
|
||||
} else {
|
||||
this.$router.push('/');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
this.logoImg = this.Cookies.getItem('logo')
|
||||
},
|
||||
watch: {
|
||||
type (v) {
|
||||
if (v) {
|
||||
this.$refs.formInline.resetFields();
|
||||
} else {
|
||||
this.$refs.formSms.resetFields();
|
||||
}
|
||||
this.verifyStatus = false;
|
||||
this.$refs.verify.show = false;
|
||||
clearInterval(this.interval);
|
||||
this.codeMsg = '发送验证码';
|
||||
this.time = 60;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.login {
|
||||
height: 100%;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
.top-content {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
box-shadow: 0 1px 1px #ddd;
|
||||
background-color: #fff;
|
||||
|
||||
.logo-box {
|
||||
width: 80%;
|
||||
max-width: 1200px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 150px;
|
||||
cursor: pointer;
|
||||
}
|
||||
div {
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-carousel {
|
||||
width: 100%;
|
||||
height: 550px;
|
||||
.demo-carousel {
|
||||
height: 550px;
|
||||
width: inherit;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.login-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.form-box {
|
||||
width: 350px;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
right: 15%;
|
||||
padding: 20px;
|
||||
background:rgba(255,255,255,.8);
|
||||
.account-number{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
font-weight: bold;
|
||||
>div:nth-child(2){
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab-switch{
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
|
||||
span:nth-child(1){
|
||||
font-size: 16px;
|
||||
border-right: 1px solid #ddd;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
span:nth-child(2){
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
&:hover{
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.verify-con{
|
||||
position: absolute;
|
||||
right: 16%;
|
||||
top: 90px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.other-login {
|
||||
margin: 0 auto;
|
||||
.ivu-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.regist {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: -10px;
|
||||
span {
|
||||
margin-left: 10px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.foot {
|
||||
position: fixed;
|
||||
bottom: 4vh;
|
||||
width: 368px;
|
||||
left: calc(50% - 184px);
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
.help {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1vh;
|
||||
width: 60%;
|
||||
.item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
:hover {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
231
buyer/src/pages/Merchant.vue
Normal file
231
buyer/src/pages/Merchant.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="merchant">
|
||||
<BaseHeader />
|
||||
<!-- 搜索栏 -->
|
||||
<Search :store="true" @search="search"></Search>
|
||||
<!-- 店铺logo -->
|
||||
<div class="shop-logo">
|
||||
<div>
|
||||
<img :src="storeMsg.storeLogo" height="50" alt="">
|
||||
<div>
|
||||
<p>{{storeMsg.storeName || 'xx店铺'}}</p>
|
||||
<p>{{storeMsg.storeDesc || 'xx店铺描述'}}</p>
|
||||
</div>
|
||||
<div class="store-collect" @click="collect"><Icon type="ios-heart" :color="storeCollected ? '#ed3f14' : '#fff'" />{{storeCollected?'已收藏店铺':'收藏店铺'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="store-category">
|
||||
<ul>
|
||||
<li @click="searchByCate({id:'', labelName: '店铺推荐'})">首页</li>
|
||||
<li v-for="(cate, index) in cateList" :key="index" @click="searchByCate(cate)">
|
||||
{{cate.labelName}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="promotion-decorate">{{cateName}}</div>
|
||||
|
||||
<div class="goods-list">
|
||||
<empty v-if="goodsList.length === 0" />
|
||||
<div
|
||||
v-else
|
||||
class="goods-show-info"
|
||||
v-for="(item, index) in goodsList"
|
||||
:key="index"
|
||||
@click="goGoodsDetail(item.id, item.goodsId)"
|
||||
>
|
||||
<div class="goods-show-img">
|
||||
<img width="220" height="220" :src="item.thumbnail" />
|
||||
</div>
|
||||
<div class="goods-show-price">
|
||||
<span>
|
||||
<span class="seckill-price text-danger">{{
|
||||
item.price | unitPrice("￥")
|
||||
}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="goods-show-detail">
|
||||
<span>{{ item.goodsName }}</span>
|
||||
</div>
|
||||
<div class="goods-show-num">
|
||||
已有<span>{{ item.commentNum || 0 }}</span>人评价
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods-page">
|
||||
<Page
|
||||
show-sizer
|
||||
@on-change="changePageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
:total="total"
|
||||
:page-size="params.pageSize"
|
||||
></Page>
|
||||
</div>
|
||||
<BaseFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getDetailById, getCateById} from '@/api/shopentry'
|
||||
import { cancelCollect, collectGoods, isCollection } from '@/api/member';
|
||||
import {goodsList} from '@/api/goods';
|
||||
export default {
|
||||
name: 'Merchant',
|
||||
data () {
|
||||
return {
|
||||
storeMsg: {},
|
||||
cateList: [],
|
||||
goodsList: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
keyword: '',
|
||||
storeId: this.$route.query.id,
|
||||
storeCatId: ''
|
||||
},
|
||||
cateName: '店铺推荐',
|
||||
storeCollected: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getStoreMsg()
|
||||
this.getCateList()
|
||||
this.getGoodsList()
|
||||
},
|
||||
mounted () {
|
||||
if (this.Cookies.getItem('userInfo')) {
|
||||
isCollection('STORE', this.soterMsg.storeId).then(res => {
|
||||
if (res.success && res.result) {
|
||||
this.storeCollected = true;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStoreMsg () { // 店铺信息
|
||||
getDetailById(this.$route.query.id).then(res => {
|
||||
if (res.success) {
|
||||
this.storeMsg = res.result
|
||||
document.title = this.storeMsg.storeName
|
||||
}
|
||||
})
|
||||
},
|
||||
getCateList () { // 店铺分类
|
||||
getCateById(this.$route.query.id).then(res => {
|
||||
if (res.success) {
|
||||
this.cateList = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
getGoodsList () { // 商品信息
|
||||
goodsList(this.params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.goodsList = res.result.content;
|
||||
this.total = res.result.totalElements;
|
||||
}
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
// 跳转商品详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId, goodsId }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
search (val) { // 搜索本店商品
|
||||
console.log(val);
|
||||
this.params.keyword = val
|
||||
this.getGoodsList()
|
||||
},
|
||||
searchByCate (cate) { // 搜索同分类下商品
|
||||
this.params.storeCatId = cate.id
|
||||
this.cateName = cate.labelName
|
||||
this.getGoodsList()
|
||||
},
|
||||
changePageNum (val) {
|
||||
this.params.pageNumber = val - 1;
|
||||
this.getGoodsList();
|
||||
},
|
||||
changePageSize (val) {
|
||||
this.params.pageNumber = 0;
|
||||
this.params.pageSize = val;
|
||||
this.getGoodsList();
|
||||
},
|
||||
async collect () { // 收藏店铺
|
||||
if (this.storeCollected) {
|
||||
let cancel = await cancelCollect('STORE', this.storeMsg.storeId)
|
||||
if (cancel.success) {
|
||||
this.$Message.success('已取消收藏')
|
||||
this.storeCollected = false;
|
||||
}
|
||||
} else {
|
||||
let collect = await collectGoods('STORE', this.storeMsg.storeId);
|
||||
if (collect.code === 200) {
|
||||
this.storeCollected = true;
|
||||
this.$Message.success('收藏店铺成功,可以前往个人中心我的收藏查看');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../assets/styles/goodsList.scss';
|
||||
.merchant {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.shop-logo {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #666;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
>div{
|
||||
display: flex;
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
>div{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
height: 80px;
|
||||
}
|
||||
p:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
p:nth-child(2){
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.store-collect{
|
||||
margin-left: 20px!important;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.store-category {
|
||||
background-color: #005aa0;
|
||||
color: #fff;
|
||||
ul{
|
||||
width: 1200px;
|
||||
margin: 0 auto 10px;
|
||||
padding: 3px 0;
|
||||
display: flex;
|
||||
li {
|
||||
margin-right: 25px;
|
||||
}
|
||||
li:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.promotion-decorate::before,.promotion-decorate::after{
|
||||
background-image: url('../../static/sprite@2x.png');
|
||||
}
|
||||
</style>
|
||||
225
buyer/src/pages/ShoppingCart.vue
Normal file
225
buyer/src/pages/ShoppingCart.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div>
|
||||
<BaseHeader></BaseHeader>
|
||||
<Search></Search>
|
||||
<cateNav></cateNav>
|
||||
<!-- 添加成功提示 -->
|
||||
<div class="add-info-box-container">
|
||||
<div class="add-info-box">
|
||||
<div class="add-info-detail">
|
||||
<div class="add-info-title">
|
||||
<p>
|
||||
<i class="fa fa-check-circle"></i> 商品已成功加入购物车！</p>
|
||||
</div>
|
||||
<div class="add-info-box-row">
|
||||
<div class="add-info-img">
|
||||
<img :src="this.detail.thumbnail" alt="">
|
||||
</div>
|
||||
<div class="add-info-intro">
|
||||
<p>{{detail.goodsName}}</p>
|
||||
<p class="add-info-intro-detail">数量：{{$route.query.count}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="car-btn-group">
|
||||
<div></div>
|
||||
<div class="car-btn-row">
|
||||
<router-link :to="`/goodsDetail?skuId=${detail.id}&goodsId=${detail.goodsId}`">
|
||||
<button class="btn-car hover-pointer btn-car-to-detail">查看商品详情</button>
|
||||
</router-link>
|
||||
<router-link to="/cart">
|
||||
<button class="btn-car hover-pointer btn-car-to-pay">去购物车结算></button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="other-user-buy-box">
|
||||
<div class="other-user-buy-title">
|
||||
<p>可以顺便看下其他商品哦 ~</p>
|
||||
</div>
|
||||
<div class="other-user-buy-row" v-for="(items,index1) in recommend" :key="index1">
|
||||
<div class="other-user-buy-item-box" v-for="(item,index2) in items" :key="index2">
|
||||
<div class="other-user-buy-item-img">
|
||||
<a href="item_detail.html"><img :src="item.img" alt=""></a>
|
||||
</div>
|
||||
<div class="other-buy-detail-box">
|
||||
<div class="other-buy-title">
|
||||
<a href="item_detail.html">
|
||||
<p>{{item.intro}}</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="other-buy-price">
|
||||
<p>￥{{item.price}}</p>
|
||||
</div>
|
||||
<div class="other-buy-btn-box">
|
||||
<router-link to="/goodsDetail">
|
||||
<button class="other-buy-btn"><Icon type="ios-cart"></Icon> 加入购物车</button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ShoppingCart',
|
||||
beforeRouteEnter (to, from, next) {
|
||||
window.scrollTo(0, 0);
|
||||
next();
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
detail: {}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
let detail = this.$route.query.detail;
|
||||
if (detail) this.detail = detail;
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/****************************加入购物车页面开始*****************************/
|
||||
.add-info-box-container{
|
||||
width: 100%;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
.add-info-box{
|
||||
width: 1200px;
|
||||
margin: 0px auto;
|
||||
padding: 15px 0px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.add-info-detail{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.add-info-title{
|
||||
font-size: 25px;
|
||||
color: #71b247;
|
||||
}
|
||||
.add-info-box-row{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.add-info-img{
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.add-info-img img{
|
||||
width: 100%;
|
||||
}
|
||||
.add-info-intro{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.add-info-intro-detail{
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
.car-btn-group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
/*按钮*/
|
||||
.btn-car{
|
||||
padding: 8px 10px;
|
||||
font-size: 16px;
|
||||
border-radius: 0px;
|
||||
border:none;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.btn-car-to-detail{
|
||||
background-color: #fff;
|
||||
color: $theme_color;
|
||||
border:1px solid #fff;
|
||||
}
|
||||
.btn-car-to-detail:hover{
|
||||
border:1px solid $theme_color;
|
||||
}
|
||||
.btn-car-to-pay{
|
||||
background-color: $theme_color;
|
||||
color: #fff;
|
||||
border:1px solid $theme_color;
|
||||
}
|
||||
.btn-car-to-pay:hover{
|
||||
background-color: $theme_color;
|
||||
border:1px solid $theme_color;
|
||||
}
|
||||
/*其他用户购买*/
|
||||
.other-user-buy-box{
|
||||
width: 90%;
|
||||
margin: 0px auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.other-user-buy-title{
|
||||
margin-top: 25px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
.other-user-buy-row{
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.other-user-buy-item-box{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.other-user-buy-item-img{
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
.other-user-buy-item-img img{
|
||||
width: 100%;
|
||||
}
|
||||
.other-buy-detail-box{
|
||||
width: 160px;
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.other-buy-title{
|
||||
font-size: 12px;
|
||||
}
|
||||
.other-buy-title a{
|
||||
color: #2c2c2c;
|
||||
text-decoration: none;
|
||||
}
|
||||
.other-buy-price{
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: $theme_color;
|
||||
}
|
||||
.other-buy-btn{
|
||||
padding: 3px 10px;
|
||||
color: $theme_color;
|
||||
font-size: 12px;
|
||||
border: 1px solid $theme_color;
|
||||
border-radius: 0px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.other-buy-btn:hover{
|
||||
color: $theme_color;
|
||||
border: 1px solid $theme_color;
|
||||
}
|
||||
/****************************加入购物车页面结束*****************************/
|
||||
</style>
|
||||
294
buyer/src/pages/SignUp.vue
Normal file
294
buyer/src/pages/SignUp.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div style="height:50px;"></div>
|
||||
<div class="logo-box">
|
||||
<img
|
||||
width="150"
|
||||
:src="logoImg"
|
||||
@click="$router.push('/')"
|
||||
/>
|
||||
<div>注册</div>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
|
||||
<!-- 注册 -->
|
||||
<Form
|
||||
ref="formRegist"
|
||||
:model="formRegist"
|
||||
:rules="ruleInline"
|
||||
style="width:300px;"
|
||||
>
|
||||
<FormItem prop="username">
|
||||
<i-input
|
||||
type="text"
|
||||
v-model="formRegist.username"
|
||||
clearable
|
||||
placeholder="用户名"
|
||||
>
|
||||
<Icon type="md-person" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem prop="password">
|
||||
<i-input
|
||||
type="password"
|
||||
v-model="formRegist.password"
|
||||
clearable
|
||||
placeholder="请输入大于6位密码"
|
||||
>
|
||||
<Icon type="md-lock" slot="prepend"> </Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem prop="mobilePhone">
|
||||
<i-input
|
||||
type="text"
|
||||
v-model="formRegist.mobilePhone"
|
||||
clearable
|
||||
placeholder="手机号"
|
||||
>
|
||||
<Icon type="md-phone-portrait" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem prop="code">
|
||||
<i-input
|
||||
type="text"
|
||||
v-model="formRegist.code"
|
||||
clearable
|
||||
placeholder="手机验证码"
|
||||
>
|
||||
<Icon
|
||||
type="ios-text-outline"
|
||||
style="font-weight: bold"
|
||||
slot="prepend"
|
||||
/>
|
||||
<Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button @click="verifyBtnClick" long :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="error" size="large" @click="handleRegist" long
|
||||
>注册</Button
|
||||
>
|
||||
</FormItem>
|
||||
<FormItem><span class="color999 ml_20">点击注册，表示您同意《<router-link to="/article?id=1371992704333905920" target="_blank">商城用户协议</router-link>》</span></FormItem>
|
||||
</Form>
|
||||
<!-- 拼图验证码 -->
|
||||
<Verify
|
||||
ref="verify"
|
||||
class="verify-con"
|
||||
:verifyType="verifyType"
|
||||
@change="verifyChange"
|
||||
></Verify>
|
||||
<div class="login-btn">已有账号？<a @click="$router.push('login')">立即登录</a></div>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<Row type="flex" justify="space-around" class="help">
|
||||
<router-link to="/article" class="item" target="_blank">帮助</router-link>
|
||||
<router-link to="/article?id=1371779927900160000" class="item" target="_blank">隐私</router-link>
|
||||
<router-link to="/article?id=1371992704333905920" class="item" target="_blank">条款</router-link>
|
||||
</Row>
|
||||
<Row type="flex" justify="center" class="copyright">
|
||||
Copyright © 2021 - Present
|
||||
<a href="https://pickmall.cn" target="_blank" style="margin: 0 5px">lili-shop</a>
|
||||
版权所有
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RegExp from '@/plugins/RegExp.js';
|
||||
import { md5 } from '@/plugins/md5.js';
|
||||
import * as apiLogin from '@/api/login.js';
|
||||
import { sendSms } from '@/api/common.js';
|
||||
import Verify from '@/components/verify';
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: { Verify },
|
||||
data () {
|
||||
return {
|
||||
formRegist: {
|
||||
// 注册表单
|
||||
mobilePhone: '',
|
||||
code: '',
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
ruleInline: {
|
||||
// 验证规则
|
||||
username: [{ required: true, message: '请输入用户名' }],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码' },
|
||||
{ type: 'string', min: 6, message: '密码不能少于6位' }
|
||||
],
|
||||
mobilePhone: [
|
||||
{ required: true, message: '请输入手机号码' },
|
||||
{
|
||||
pattern: RegExp.mobile,
|
||||
trigger: 'blur',
|
||||
message: '请输入正确的手机号'
|
||||
}
|
||||
],
|
||||
code: [{ required: true, message: '请输入手机验证码' }]
|
||||
},
|
||||
verifyStatus: false,
|
||||
verifyType: 'REGISTER',
|
||||
codeMsg: '发送验证码',
|
||||
interval: '',
|
||||
time: 60,
|
||||
logoImg: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 注册
|
||||
handleRegist () {
|
||||
this.$refs.formRegist.validate((valid) => {
|
||||
if (valid) {
|
||||
let data = JSON.parse(JSON.stringify(this.formRegist));
|
||||
data.password = md5(data.password);
|
||||
apiLogin.regist(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('注册成功!');
|
||||
this.$router.push('login');
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
});
|
||||
} else {}
|
||||
});
|
||||
},
|
||||
sendCode () {
|
||||
if (this.time === 60) {
|
||||
if (this.formRegist.mobilePhone === '') {
|
||||
this.$Message.warning('请先填写手机号');
|
||||
return;
|
||||
}
|
||||
if (!this.verifyStatus) {
|
||||
this.$Message.warning('请先完成安全验证');
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
mobile: this.formRegist.mobilePhone,
|
||||
verificationEnums: 'REGISTER'
|
||||
};
|
||||
sendSms(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('验证码发送成功');
|
||||
let that = this;
|
||||
this.interval = setInterval(() => {
|
||||
that.time--;
|
||||
if (that.time === 0) {
|
||||
that.time = 60;
|
||||
that.codeMsg = '重新发送';
|
||||
that.verifyStatus = false;
|
||||
clearInterval(that.interval);
|
||||
} else {
|
||||
that.codeMsg = that.time;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
handleCancel () {
|
||||
this.$refs.formRegist.resetFields();
|
||||
},
|
||||
verifyChange (con) {
|
||||
if (!con.status) return;
|
||||
this.$refs.verify.show = false;
|
||||
this.verifyStatus = true;
|
||||
},
|
||||
verifyBtnClick () {
|
||||
if (!this.verifyStatus) {
|
||||
this.$refs.verify.show = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$refs.formRegist.resetFields();
|
||||
this.logoImg = this.Cookies.getItem('logo')
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.logo-box {
|
||||
width: 600px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 150px;
|
||||
cursor: pointer;
|
||||
}
|
||||
div {
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-container {
|
||||
border-top: 2px solid $theme_color;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 600px;
|
||||
background-color: #fff;
|
||||
padding: 20px 150px;
|
||||
.login-btn{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: -45px;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-con{
|
||||
position: absolute;
|
||||
left: 140px;
|
||||
top: 80px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.other-login {
|
||||
margin: 0 auto;
|
||||
.ivu-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.regist {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: -10px;
|
||||
span {
|
||||
margin-left: 10px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.foot {
|
||||
position: fixed;
|
||||
bottom: 4vh;
|
||||
width: 368px;
|
||||
left: calc(50% - 184px);
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
.help {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1vh;
|
||||
width: 60%;
|
||||
.item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
:hover {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
219
buyer/src/pages/article/index.vue
Normal file
219
buyer/src/pages/article/index.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<BaseHeader></BaseHeader>
|
||||
<Search></Search>
|
||||
<cateNav></cateNav>
|
||||
<div class="title-bg"><p>文章帮助中心</p></div>
|
||||
<div class="container width_1200">
|
||||
<Layout class="layoutAll">
|
||||
<Sider class="side-bar" ref="side" :collapsed-width="78">
|
||||
<div class="article-cate">文章分类列表</div>
|
||||
<Menu
|
||||
class="side-menu"
|
||||
theme="light"
|
||||
width="auto"
|
||||
ref='menu'
|
||||
:active-name="activeName"
|
||||
:open-names="openName"
|
||||
@on-select="onSelect"
|
||||
>
|
||||
<!-- 循环导航栏 -->
|
||||
<Submenu
|
||||
v-show="menu.children"
|
||||
v-for="(menu, index) in list"
|
||||
:key="index"
|
||||
:name="menu.articleCategoryName"
|
||||
>
|
||||
<template slot="title">
|
||||
<span>{{ menu.articleCategoryName }}</span>
|
||||
</template>
|
||||
<MenuItem
|
||||
v-for="(chlidren, i) in menu.children"
|
||||
:key="i"
|
||||
:name="chlidren.id"
|
||||
>{{ chlidren.articleCategoryName }}</MenuItem
|
||||
>
|
||||
</Submenu>
|
||||
|
||||
</Menu>
|
||||
</Sider>
|
||||
<Layout class="layout ml_10">
|
||||
<Content class="content">
|
||||
<ul class="article-list" v-show="showList">
|
||||
<li v-for="(article, index) in articleList" :key="index" @click="getDetail(article.id)">
|
||||
{{article.title}}
|
||||
</li>
|
||||
</ul>
|
||||
<transition mode="out-in">
|
||||
<div v-show="!showList">
|
||||
<a class="back-btn" @click="showList = true"><返回上一级</a>
|
||||
<h2 class="mt_10 mb_10">{{detail.title}}</h2>
|
||||
<div class="mt_10 mb_10" v-html="detail.content"></div>
|
||||
</div>
|
||||
</transition>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {articleCateList, articleDetail, articleList} from '@/api/common.js'
|
||||
export default {
|
||||
name: 'Home',
|
||||
data () {
|
||||
return {
|
||||
list: [], // 分类列表
|
||||
detail: '', // 文章详情
|
||||
articleList: [], // 分类下的文章列表
|
||||
activeName: '1347456734864367616', // 左侧激活项
|
||||
openName: [], // 展开的名称
|
||||
params: { // 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 100,
|
||||
categoryId: '',
|
||||
sort: 'sort'
|
||||
},
|
||||
showList: true // 展示文章列表
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 每次点击左侧bar的callback
|
||||
onSelect (id) {
|
||||
this.getList(id)
|
||||
this.detail = ''
|
||||
this.showList = true
|
||||
},
|
||||
getCateList () { // 文章分类列表
|
||||
articleCateList().then(res => {
|
||||
if (res.success) {
|
||||
this.list = res.result
|
||||
if (this.$route.query.id) {
|
||||
this.activeName = this.detail.categoryId
|
||||
this.list.forEach(e => {
|
||||
if (e.children.length) {
|
||||
e.children.forEach(i => {
|
||||
if (i.id === this.detail.categoryId) {
|
||||
this.openName.push(e.articleCategoryName)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
delete e.children
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.activeName = this.list[0].children[0].id
|
||||
this.openName.push(this.list[0].articleCategoryName)
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs.menu.updateOpened()
|
||||
this.$refs.menu.updateActiveName()
|
||||
})
|
||||
this.getList(this.activeName)
|
||||
}
|
||||
})
|
||||
},
|
||||
getList (id) { // 文章列表
|
||||
this.params.categoryId = id
|
||||
articleList(this.params).then(res => {
|
||||
if (res.success) {
|
||||
this.articleList = res.result.records
|
||||
}
|
||||
})
|
||||
},
|
||||
async getDetail (id) { // 文章详情
|
||||
await articleDetail(id).then(res => {
|
||||
if (res.success) {
|
||||
this.detail = res.result
|
||||
this.showList = false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
const articleId = this.$route.query.id
|
||||
if (articleId) {
|
||||
await this.getDetail(articleId)
|
||||
}
|
||||
this.getCateList()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
padding: 15px 50px;
|
||||
}
|
||||
|
||||
.header {
|
||||
@include background_color($light_background_color);
|
||||
}
|
||||
|
||||
.side-menu,
|
||||
.side-bar,
|
||||
.content {
|
||||
@include white_background_color();
|
||||
@include title_color($light_title_color);
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
min-height: 600px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.layoutAll {
|
||||
min-height: 1200px;
|
||||
@include background_color($light_background_color);
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.side-bar a {
|
||||
@include title_color($light_title_color);
|
||||
}
|
||||
|
||||
.layout-footer-center {
|
||||
padding: 0px 15px;
|
||||
|
||||
padding-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.title-bg{
|
||||
border-top: 3px solid $theme_color;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
background-color: #7b7b7b;
|
||||
p{
|
||||
width: 1200px;
|
||||
font-size: 30px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
color: #fff;
|
||||
line-height: 100px;
|
||||
margin: 0 auto;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.article-cate{
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background-color: #666;
|
||||
}
|
||||
.article-list {
|
||||
li{
|
||||
margin: 10px 0;
|
||||
color: #2D8CF0;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
174
buyer/src/pages/couponCenter.vue
Normal file
174
buyer/src/pages/couponCenter.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="coupon-center">
|
||||
<BaseHeader></BaseHeader>
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="coupon-title">
|
||||
<router-link to="/">
|
||||
<img src="../assets/images/logo.png" width="120" alt="">
|
||||
</router-link>
|
||||
<p>领券中心</p>
|
||||
<Input search style="width:400px" @on-search='search' enter-button="搜索" placeholder="搜索优惠券" />
|
||||
</div>
|
||||
|
||||
<div class="fontsize_18 recommend">推荐好券</div>
|
||||
|
||||
<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="receive(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>
|
||||
</div>
|
||||
</div>
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {couponList, receiveCoupon} from '@/api/member.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search (item) {
|
||||
this.params.couponName = item
|
||||
this.params.pageNumber = 1
|
||||
this.getList()
|
||||
},
|
||||
getList () {
|
||||
this.$Spin.show()
|
||||
couponList(this.params).then(res => {
|
||||
this.$Spin.hide()
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.list = res.result.records
|
||||
this.total = res.result.total
|
||||
}
|
||||
}).catch(() => { this.$Spin.hide() })
|
||||
},
|
||||
|
||||
changePageNum (val) {
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
|
||||
changePageSize (val) {
|
||||
this.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
|
||||
receive (item) {
|
||||
receiveCoupon(item.id).then(res => {
|
||||
if (res.success) {
|
||||
this.$Modal.confirm({
|
||||
title: '领取优惠券',
|
||||
content: '<p>优惠券领取成功，可到我的优惠券页面查看</p>',
|
||||
okText: '我的优惠券',
|
||||
cancelText: '立即使用',
|
||||
onOk: () => {
|
||||
this.$router.push('/home/Coupons')
|
||||
},
|
||||
onCancel: () => {
|
||||
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'})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
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 lang="scss" scoped>
|
||||
@import '../assets/styles/coupon.scss';
|
||||
.content{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
> div {
|
||||
margin: 10px auto;
|
||||
width: 1200px;
|
||||
}
|
||||
}
|
||||
.coupon-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p{
|
||||
font-size: 18px;
|
||||
margin-right: 500px;
|
||||
}
|
||||
border-bottom: 2px solid $theme_color;
|
||||
}
|
||||
.recommend {
|
||||
margin: 20px auto;
|
||||
font-weight: bold;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.coupon-item {
|
||||
b{
|
||||
background: url('../assets/images/small-circle.png') top left repeat-y;
|
||||
}
|
||||
}
|
||||
.pageration {
|
||||
text-align: right;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
337
buyer/src/pages/forgetPassword.vue
Normal file
337
buyer/src/pages/forgetPassword.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<!-- 顶部logo -->
|
||||
<div class="top-content">
|
||||
<div class="logo-box">
|
||||
<img
|
||||
src="../assets/images/logo1.png"
|
||||
@click="$router.push('/')"
|
||||
/>
|
||||
<div>修改密码</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<!-- 验证手机号 -->
|
||||
<Form
|
||||
ref="formFirst"
|
||||
:model="formFirst"
|
||||
:rules="ruleInline"
|
||||
style="width:300px;"
|
||||
v-show="step === 0"
|
||||
>
|
||||
<FormItem prop="mobile">
|
||||
<i-input
|
||||
type="text"
|
||||
v-model="formFirst.mobile"
|
||||
clearable
|
||||
placeholder="手机号"
|
||||
>
|
||||
<Icon type="md-phone-portrait" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem prop="code">
|
||||
<i-input
|
||||
type="text"
|
||||
v-model="formFirst.code"
|
||||
clearable
|
||||
placeholder="手机验证码"
|
||||
>
|
||||
<Icon
|
||||
type="ios-text-outline"
|
||||
style="font-weight: bold"
|
||||
slot="prepend"
|
||||
/>
|
||||
<Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button @click="verifyBtnClick" long :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="error" @click="next" :loading="loading" long>下一步</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="ruleInline"
|
||||
style="width:300px;"
|
||||
v-show="step === 1"
|
||||
>
|
||||
<FormItem prop="password">
|
||||
<i-input
|
||||
type="password"
|
||||
v-model="form.password"
|
||||
clearable
|
||||
placeholder="请输入至少六位密码"
|
||||
>
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem prop="password">
|
||||
<i-input
|
||||
type="password"
|
||||
v-model="form.oncePasd"
|
||||
clearable
|
||||
placeholder="请再次输入密码"
|
||||
>
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="error" size="large" @click="handleSubmit" :loading="loading1" long>提交</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<!-- 拼图验证码 -->
|
||||
<Verify
|
||||
ref="verify"
|
||||
class="verify-con"
|
||||
:verifyType="verifyType"
|
||||
@change="verifyChange"
|
||||
></Verify>
|
||||
<div class="login-btn"><a @click="$router.push('login')">前往登录</a></div>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<Row type="flex" justify="space-around" class="help">
|
||||
<a class="item" href="https://lilishop.com" target="_blank">帮助</a>
|
||||
<a class="item" href="https://lilishop.com" target="_blank">隐私</a>
|
||||
<a class="item" href="https://lilishop.com" target="_blank">条款</a>
|
||||
</Row>
|
||||
<Row type="flex" justify="center" class="copyright">
|
||||
Copyright © 2020 - Present
|
||||
<a href="http://lili.cn" target="_blank" style="margin: 0 5px"
|
||||
>lili-shop</a
|
||||
>
|
||||
版权所有
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RegExp from '@/plugins/RegExp.js';
|
||||
import { md5 } from '@/plugins/md5.js';
|
||||
import * as apiLogin from '@/api/login.js';
|
||||
import { sendSms } from '@/api/common.js';
|
||||
import Verify from '@/components/verify';
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: { Verify },
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
loading1: false,
|
||||
formFirst: {
|
||||
// 注册表单
|
||||
mobile: '',
|
||||
code: ''
|
||||
},
|
||||
form: {
|
||||
password: '',
|
||||
oncePasd: ''
|
||||
},
|
||||
step: 0,
|
||||
ruleInline: {
|
||||
// 验证规则
|
||||
mobile: [
|
||||
{ required: true, message: '请输入手机号码' },
|
||||
{
|
||||
pattern: RegExp.mobile,
|
||||
trigger: 'blur',
|
||||
message: '请输入正确的手机号'
|
||||
}
|
||||
],
|
||||
code: [{ required: true, message: '请输入手机验证码' }],
|
||||
password: [{required: true, message: '密码不能为空'}, {pattern: RegExp.password, message: '密码不能少于6位'}]
|
||||
},
|
||||
verifyStatus: false,
|
||||
verifyType: 'FIND_USER',
|
||||
codeMsg: '发送验证码',
|
||||
interval: '',
|
||||
time: 60
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 提交短信验证码，修改密码
|
||||
next () {
|
||||
this.$refs.formFirst.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
let data = JSON.parse(JSON.stringify(this.formFirst));
|
||||
apiLogin.validateCode(data).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.code === 200) {
|
||||
// this.$Message.success('');
|
||||
this.step = 1;
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
}).catch(() => { this.loading = false; });
|
||||
} else {}
|
||||
});
|
||||
},
|
||||
handleSubmit () { // 提交密码
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
let params = JSON.parse(JSON.stringify(this.form));
|
||||
if (params.password !== params.oncePasd) {
|
||||
this.$Message.warning('两次输入密码不一致');
|
||||
return;
|
||||
};
|
||||
params.mobile = this.formFirst.mobile;
|
||||
params.password = md5(params.password);
|
||||
delete params.oncePasd;
|
||||
this.loading1 = true;
|
||||
|
||||
apiLogin.resetPassword(params).then(res => {
|
||||
this.loading1 = false;
|
||||
console.log(res);
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('修改密码成功');
|
||||
this.$router.push('login');
|
||||
}
|
||||
}).catch(() => { this.loading = false; });
|
||||
};
|
||||
});
|
||||
},
|
||||
sendCode () { // 发送验证码
|
||||
if (this.time === 60) {
|
||||
if (this.formFirst.mobile === '') {
|
||||
this.$Message.warning('请先填写手机号');
|
||||
return;
|
||||
}
|
||||
if (!this.verifyStatus) {
|
||||
this.$Message.warning('请先完成安全验证');
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
mobile: this.formFirst.mobile,
|
||||
verificationEnums: 'FIND_USER'
|
||||
};
|
||||
sendSms(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('验证码发送成功');
|
||||
let that = this;
|
||||
this.interval = setInterval(() => {
|
||||
that.time--;
|
||||
if (that.time === 0) {
|
||||
that.time = 60;
|
||||
that.codeMsg = '重新发送';
|
||||
that.verifyStatus = false;
|
||||
clearInterval(that.interval);
|
||||
} else {
|
||||
that.codeMsg = that.time;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
verifyChange (con) { // 验证通过
|
||||
if (!con.status) return;
|
||||
this.$refs.verify.show = false;
|
||||
this.verifyStatus = true;
|
||||
},
|
||||
verifyBtnClick () {
|
||||
if (!this.verifyStatus) {
|
||||
this.$refs.verify.show = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$refs.formFirst.resetFields();
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.login {
|
||||
height: 100%;
|
||||
}
|
||||
.top-content {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0 1px 1px #ddd;
|
||||
background-color: #fff;
|
||||
|
||||
.logo-box {
|
||||
width: 80%;
|
||||
max-width: 1200px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 200px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
div {
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-container {
|
||||
position: relative;
|
||||
margin: 10px auto;
|
||||
width: 1200px;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
.login-btn{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-con{
|
||||
position: absolute;
|
||||
left: 400px;
|
||||
top: 50px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.other-login {
|
||||
margin: 0 auto;
|
||||
.ivu-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.regist {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: -10px;
|
||||
span {
|
||||
margin-left: 10px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.foot {
|
||||
position: fixed;
|
||||
bottom: 4vh;
|
||||
width: 368px;
|
||||
left: calc(50% - 184px);
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
.help {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1vh;
|
||||
width: 60%;
|
||||
.item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
:hover {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
102
buyer/src/pages/home/Main.vue
Normal file
102
buyer/src/pages/home/Main.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="orderBox">
|
||||
<!-- <ul class="orderUl">
|
||||
<li>
|
||||
<div class="circle">
|
||||
<Icon size="50" type="ios-card" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<Badge :count="0"> 代付款 </Badge>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="circle">
|
||||
<Icon size="50" type="ios-card" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<Badge :count="0"> 待收货 </Badge>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="circle">
|
||||
<Icon size="50" type="ios-card" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<Badge :count="0"> 待评价 </Badge>
|
||||
</div>
|
||||
</li>
|
||||
</ul> -->
|
||||
<div class="userBox">
|
||||
<div class="box">
|
||||
<!-- 我的订单组件 -->
|
||||
<myOrderPage :paging="false" :homePage="true" />
|
||||
</div>
|
||||
<div class="box">
|
||||
<!-- 近期收藏 -->
|
||||
<myFavorites :paging="false" :homePage="true" />
|
||||
</div>
|
||||
<div class="box">
|
||||
<!-- 猜你喜欢 -->
|
||||
<!-- <myLike /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myOrderPage from '@/pages/home/orderCenter/MyOrder'
|
||||
import myFavorites from '@/pages/home/memberCenter/Favorites'
|
||||
// import myLike from '@/components/like'
|
||||
|
||||
export default {
|
||||
name: 'main',
|
||||
components: {
|
||||
myOrderPage,
|
||||
myFavorites
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.circle {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: $success_color;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
> i {
|
||||
line-height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.orderUl {
|
||||
overflow: hidden;
|
||||
|
||||
> li {
|
||||
cursor: pointer;
|
||||
border-radius: 0.4em;
|
||||
float: left;
|
||||
padding: 10px 0;
|
||||
margin: 0 11px;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
|
||||
@include background_color($light_background_color);
|
||||
}
|
||||
}
|
||||
.userBox {
|
||||
padding: 0 0 20px 0;
|
||||
}
|
||||
</style>
|
||||
86
buyer/src/pages/home/MyShoppingCart.vue
Normal file
86
buyer/src/pages/home/MyShoppingCart.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<Table border ref="selection" :columns="columns" :data="shoppingCart" size="large" no-data-text="您的购物车没有商品，请先添加商品到购物车再点击购买"></Table>
|
||||
<div class="go-to">
|
||||
<Button @click="goTo" type="primary">去付款</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/vuex/store';
|
||||
import { mapState, mapActions } from 'vuex';
|
||||
export default {
|
||||
name: 'MyShoppingCart',
|
||||
data () {
|
||||
return {
|
||||
columns: [ // 表格表头
|
||||
{
|
||||
type: 'selection',
|
||||
width: 58,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '图片',
|
||||
key: 'img',
|
||||
width: 86,
|
||||
render: (h, params) => {
|
||||
return h('div', [
|
||||
h('img', {
|
||||
attrs: {
|
||||
src: params.row.img
|
||||
}
|
||||
})
|
||||
]);
|
||||
},
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
key: 'title',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '套餐',
|
||||
width: 198,
|
||||
key: 'package',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
key: 'count',
|
||||
width: 68,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '价格',
|
||||
width: 68,
|
||||
key: 'price',
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
created () {
|
||||
this.loadShoppingCart();
|
||||
},
|
||||
computed: {
|
||||
...mapState(['shoppingCart'])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['loadShoppingCart']),
|
||||
goTo () {
|
||||
this.$router.push('/cart');
|
||||
}
|
||||
},
|
||||
store
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.go-to {
|
||||
margin: 15px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
79
buyer/src/pages/home/enumeration.js
Normal file
79
buyer/src/pages/home/enumeration.js
Normal file
@@ -0,0 +1,79 @@
|
||||
|
||||
// 订单状态
|
||||
export const orderStatusList = [
|
||||
{
|
||||
name: '全部',
|
||||
status: 'ALL'
|
||||
},
|
||||
{
|
||||
name: '未付款',
|
||||
status: 'UNPAID'
|
||||
},
|
||||
{
|
||||
name: '已付款',
|
||||
status: 'PAID'
|
||||
},
|
||||
{
|
||||
name: '待发货',
|
||||
status: 'UNDELIVERED'
|
||||
},
|
||||
{
|
||||
name: '已发货',
|
||||
status: 'DELIVERED'
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
status: 'COMPLETED'
|
||||
},
|
||||
{
|
||||
name: '待核验',
|
||||
status: 'TAKE'
|
||||
},
|
||||
{
|
||||
name: '已取消',
|
||||
status: 'CANCELLED'
|
||||
}
|
||||
]
|
||||
// 订单售后状态
|
||||
export const afterSaleStatusList = [
|
||||
{
|
||||
name: '申请中',
|
||||
status: 'APPLY'
|
||||
},
|
||||
{
|
||||
name: '通过',
|
||||
status: 'PASS'
|
||||
},
|
||||
{
|
||||
name: '拒绝',
|
||||
status: 'REFUSE'
|
||||
},
|
||||
{
|
||||
name: '买家退货，待卖家收货',
|
||||
status: 'BUYER_RETURN'
|
||||
},
|
||||
{
|
||||
name: '商家换货/补发',
|
||||
status: 'SELLER_RE_DELIVERY'
|
||||
},
|
||||
{
|
||||
name: '卖家确认收货',
|
||||
status: 'SELLER_CONFIRM'
|
||||
},
|
||||
{
|
||||
name: '卖家终止售后',
|
||||
status: 'SELLER_TERMINATION'
|
||||
},
|
||||
{
|
||||
name: '买家确认收货',
|
||||
status: 'BUYER_CONFIRM'
|
||||
},
|
||||
{
|
||||
name: '买家取消售后',
|
||||
status: 'BUYER_CANCEL'
|
||||
},
|
||||
{
|
||||
name: '完成售后',
|
||||
status: 'COMPLETE'
|
||||
}
|
||||
]
|
||||
53
buyer/src/pages/home/memberCenter/AccountBind.vue
Normal file
53
buyer/src/pages/home/memberCenter/AccountBind.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="账号绑定"/>
|
||||
<div>
|
||||
<Row class="bindItem">
|
||||
<Col :span="2">
|
||||
|
||||
</Col>
|
||||
<Col :span="16">
|
||||
<div class="setDivItem">
|
||||
绑定QQ
|
||||
</div>
|
||||
<div class="setDivItem theme">
|
||||
添加QQ号可以使用QQ登录
|
||||
</div>
|
||||
</Col>
|
||||
<Col :span="4">
|
||||
<Button>添加绑定</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AccountBind',
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bindItem {
|
||||
border-bottom: 1px solid $border_color;
|
||||
padding: 16px 0;
|
||||
/deep/ .ivu-col {
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
.setDivItem {
|
||||
line-height: 1.75;
|
||||
}
|
||||
/deep/ .ivu-col-span-2, .ivu-col-span-4 {
|
||||
text-align: center;
|
||||
color: $theme_color;
|
||||
}
|
||||
</style>
|
||||
177
buyer/src/pages/home/memberCenter/AccountSafe.vue
Normal file
177
buyer/src/pages/home/memberCenter/AccountSafe.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="账户安全"/>
|
||||
|
||||
<div class="safeList">
|
||||
<!-- 密码 -->
|
||||
<Row class="safeItem">
|
||||
<Col :span="2">
|
||||
<Icon size="40" type="md-key"/>
|
||||
</Col>
|
||||
<Col :span="16">
|
||||
<div class="setDivItem">登录密码</div>
|
||||
<div class="setDivItem theme">互联网账号存在被盗风险，建议您定期更改密码以保护账户安全。</div>
|
||||
</Col>
|
||||
<Col :span="4">
|
||||
<Button @click="modifyPwd">修改密码</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<!-- 邮箱 -->
|
||||
<!-- <Row class="safeItem">
|
||||
<Col :span="2">
|
||||
<Icon size="40" type="md-mail" />
|
||||
</Col>
|
||||
<Col :span="16">
|
||||
<div class="setDivItem">
|
||||
邮箱验证
|
||||
</div>
|
||||
<div class="setDivItem " v-if="true">
|
||||
您的验证邮箱：<span>xxxxx</span>
|
||||
</div>
|
||||
<div class="setDivItem " v-else>
|
||||
|
||||
</div>
|
||||
</Col>
|
||||
<Col :span="4">
|
||||
<Button>修改邮箱</Button>
|
||||
</Col>
|
||||
</Row> -->
|
||||
<!-- 手机验证 -->
|
||||
<!-- <Row class="safeItem">
|
||||
<Col :span="2">
|
||||
<Icon size="40" type="ios-phone-portrait" />
|
||||
</Col>
|
||||
<Col :span="16">
|
||||
<div class="setDivItem">
|
||||
手机验证
|
||||
</div>
|
||||
<div class="setDivItem " v-if="true">
|
||||
您的手机号：<span>xxxxx</span>
|
||||
</div>
|
||||
<div class="setDivItem " v-else>
|
||||
|
||||
</div>
|
||||
</Col>
|
||||
<Col :span="4">
|
||||
<Button>立即验证</Button>
|
||||
</Col>
|
||||
</Row> -->
|
||||
<!-- 支付密码 -->
|
||||
<!-- <Row class="safeItem">
|
||||
<Col :span="2">
|
||||
<Icon size="40" type="md-lock" />
|
||||
</Col>
|
||||
<Col :span="16">
|
||||
<div class="setDivItem">
|
||||
支付密码
|
||||
</div>
|
||||
<div class="setDivItem " v-if="true">
|
||||
安全认证：<span>xxxxx</span>
|
||||
</div>
|
||||
<div class="setDivItem " v-else>
|
||||
|
||||
</div>
|
||||
</Col>
|
||||
<Col :span="4">
|
||||
<Button @click="goModifyPwd" v-if="pwdStatus == '设置密码'" type="error">{{pwdStatus}}</Button>
|
||||
<Dropdown style="margin-left: 20px" v-if="pwdStatus == '修改密码'" @on-click="selectPwd">
|
||||
<Button type="primary">
|
||||
修改密码
|
||||
<Icon type="ios-arrow-down"></Icon>
|
||||
</Button>
|
||||
<DropdownMenu slot="list" on-click="selectPwd">
|
||||
<DropdownItem name = "1">修改密码</DropdownItem>
|
||||
<DropdownItem name = "2">重置密码</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</Col>
|
||||
</Row> -->
|
||||
<!-- 实名 -->
|
||||
<!-- <Row class="safeItem">
|
||||
<Col :span="2">
|
||||
<Icon size="40" type="md-card" />
|
||||
</Col>
|
||||
<Col :span="16">
|
||||
<div class="setDivItem">
|
||||
实名认证
|
||||
</div>
|
||||
<div class="setDivItem " v-if="true">
|
||||
已认证：<span>xxxxx</span>
|
||||
</div>
|
||||
<div class="setDivItem " v-else>
|
||||
您还未实名认证该账户，立即实名认证可加快提现速度。
|
||||
</div>
|
||||
</Col>
|
||||
<Col :span="4">
|
||||
<Button>立即认证</Button>
|
||||
</Col>
|
||||
</Row> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import card from '@/components/card'
|
||||
import {
|
||||
getPwdStatus
|
||||
} from '@/api/account';
|
||||
export default {
|
||||
name: 'AccountSafe',
|
||||
data () {
|
||||
return {
|
||||
pwdStatus: '' // 密码状态
|
||||
}
|
||||
},
|
||||
components: {card},
|
||||
mounted () {
|
||||
this.getPwdStatus()
|
||||
},
|
||||
methods: {
|
||||
// 设置支付密码
|
||||
goModifyPwd () {
|
||||
this.$router.push({name: 'ModifyPwd', query: { status: 2 }})
|
||||
},
|
||||
selectPwd (value) {
|
||||
this.$router.push({name: 'ModifyPwd', query: { status: value }})
|
||||
},
|
||||
modifyPwd () {
|
||||
this.$router.push({name: 'ModifyPwd', query: { status: 1 }})
|
||||
},
|
||||
// 获取密码状态
|
||||
getPwdStatus () {
|
||||
getPwdStatus().then(res => {
|
||||
if (res) {
|
||||
this.pwdStatus = '修改密码'
|
||||
} else {
|
||||
this.pwdStatus = '设置密码'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/deep/ .ivu-col-span-2, .ivu-col-span-4 {
|
||||
text-align: center;
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
.theme {
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
.setDivItem {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.safeItem {
|
||||
border-bottom: 1px solid $border_color;
|
||||
padding: 16px 0;
|
||||
|
||||
/deep/ .ivu-col {
|
||||
padding: 8px 0;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
174
buyer/src/pages/home/memberCenter/CommentList.vue
Normal file
174
buyer/src/pages/home/memberCenter/CommentList.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="评论/晒单" />
|
||||
|
||||
<div class="order">
|
||||
<div class="order-title">
|
||||
<Row class="order-row title">
|
||||
<i-col span="12">订单详情</i-col>
|
||||
<i-col span="4">收货人</i-col>
|
||||
<i-col span="4">评价</i-col>
|
||||
<i-col span="6"></i-col>
|
||||
</Row>
|
||||
</div>
|
||||
<empty v-if="list.length === 0" />
|
||||
|
||||
<div class="order-item" v-else v-for="(item, index) in list" :key="index">
|
||||
<div>
|
||||
<div class="title order-item-title">
|
||||
<span>订单号:{{item.orderNo}}</span>
|
||||
<span class="color999 ml_10">{{item.createTime}}</span>
|
||||
<span class="hover-pointer fontsize_12 eval-detail" @click="evaluate(item.id)">评价详情</span>
|
||||
</div>
|
||||
<Row class="order-item-view">
|
||||
<i-col span="12" class="item-view-name">
|
||||
<div class="order-img">
|
||||
<img :src="item.goodsImage" alt="" />
|
||||
</div>
|
||||
<div class="order-name">
|
||||
{{item.goodsName}}
|
||||
</div>
|
||||
<div>
|
||||
x1
|
||||
</div>
|
||||
</i-col>
|
||||
<i-col span="4">{{item.createBy | secrecyMobile}}</i-col>
|
||||
<i-col span="4">
|
||||
{{item.grade==='GOOD'?'好评' : item.grade === 'WORSE'?'差评' : '中评'}}
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
<Tooltip >
|
||||
<div class="content">{{item.content}}</div>
|
||||
<div style="white-space: normal;" slot="content">
|
||||
{{item.content}}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</i-col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
<Spin v-if="loading"></Spin>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="page-size">
|
||||
<Page :total="total" @on-change="changePageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size="params.pageSize"
|
||||
show-sizer>
|
||||
</Page>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {evolutionList} from '@/api/order.js';
|
||||
export default {
|
||||
name: 'CommentList',
|
||||
data () {
|
||||
return {
|
||||
commentWay: [`待评价`, `待追评`, `已评价`], // 评价分类
|
||||
loading: false, // 加载状态
|
||||
list: [], // 评价列表
|
||||
total: 0, // 评价总数
|
||||
params: { // 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList () {
|
||||
evolutionList(this.params).then(res => {
|
||||
if (res.success) {
|
||||
const list = res.result.records;
|
||||
list.forEach(element => {
|
||||
element.descriptionScore = Number(element.descriptionScore)
|
||||
});
|
||||
this.list = list;
|
||||
this.total = res.result.total
|
||||
}
|
||||
})
|
||||
},
|
||||
changePageNum (val) {
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
changePageSize (val) {
|
||||
this.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
changeIndex (index) {
|
||||
console.log(index);
|
||||
},
|
||||
evaluate (id) {
|
||||
this.$router.push({path: '/home/evalDetail', query: { id }})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.order-img {
|
||||
> img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px solid $border_color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@include background_color($light_background_color);
|
||||
}
|
||||
.item-view-name {
|
||||
display: flex;
|
||||
}
|
||||
.order-name {
|
||||
display: -webkit-box;
|
||||
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
@include content_color($light_content_color);
|
||||
}
|
||||
.order-item-title {
|
||||
padding: 5px 20px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
}
|
||||
.order-item-view {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.order-item {
|
||||
text-align: center;
|
||||
border: 1px solid $border_color;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.order-row {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
color: #999;
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.eval-detail {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
&:hover{
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
285
buyer/src/pages/home/memberCenter/ComplainDetail.vue
Normal file
285
buyer/src/pages/home/memberCenter/ComplainDetail.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div class="add-eval">
|
||||
<div class="title">
|
||||
<card _Title="订单投诉" :_Size="16"></card>
|
||||
<p>
|
||||
<span class="fontsize_16 global_color">{{ statusLabel[detail.complainStatus] }}</span>
|
||||
<span class="color999 ml_20">创建时间：</span><span>{{ detail.createTime }}</span>
|
||||
<span class="color999 ml_20">{{ detail.createTime }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Alert class="l_title" show-icon type="warning">我的申诉信息</Alert>
|
||||
<table cellspacing="0" cellpadding='0' border="1">
|
||||
<tr>
|
||||
<td>投诉商品</td>
|
||||
<td><img :src="detail.goodsImage" width="60" alt=""> {{ detail.goodsName }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>投诉主题</td>
|
||||
<td>{{ detail.complainTopic }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>投诉内容</td>
|
||||
<td>{{ detail.content }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>补充内容</td>
|
||||
<td>
|
||||
<div style="display:flex;align-items:center;">
|
||||
<div class="demo-upload-list" v-for="(img, index) in detail.images.split(',')" :key="index">
|
||||
<img :src="img">
|
||||
<div class="demo-upload-list-cover">
|
||||
<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<Alert class="l_title" show-icon type="warning">商家申诉信息</Alert>
|
||||
<table cellspacing="0" cellpadding='0' border="1">
|
||||
<tr>
|
||||
<td>申诉时间</td>
|
||||
<td>{{ detail.appealTime || '暂无' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>申诉内容</td>
|
||||
<td>{{ detail.appealContent || '暂无' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>申诉凭证</td>
|
||||
<td>
|
||||
|
||||
<div style="display:flex;align-items:center;">
|
||||
<div class="demo-upload-list" v-for="(img, index) in detail.appealImages.split(',')" :key="index">
|
||||
<img :src="img">
|
||||
<div class="demo-upload-list-cover">
|
||||
<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<Alert class="l_title" show-icon type="warning">平台仲裁</Alert>
|
||||
<table cellspacing="0" cellpadding='0' border="1">
|
||||
<tr>
|
||||
<td>仲裁意见</td>
|
||||
<td>{{ detail.arbitrationResult || '暂无' }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<Alert class="l_title" show-icon type="warning">对话详情</Alert>
|
||||
<div class="speak-way" v-if="detail.orderComplaintCommunications.length">
|
||||
<div
|
||||
class="speak-msg seller"
|
||||
:class="{'speak-buyer': item.owner == 'BUYER', 'speak-platform': item.owner == 'PLATFORM', 'speak-seller': item.owner == 'STORE',}"
|
||||
:key="i"
|
||||
v-for="(item, i) in detail.orderComplaintCommunications"
|
||||
>
|
||||
{{
|
||||
item.owner == "PLATFORM"
|
||||
? "平台"
|
||||
: item.owner == "BUYER"
|
||||
? "买家"
|
||||
: "卖家"
|
||||
}}[{{ item.createTime }}]：
|
||||
<span>{{ item.content }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>暂无对话</div>
|
||||
<table cellspacing="0" cellpadding='0' border="1" v-if="detail.complainStatus!='COMPLETE'">
|
||||
<tr>
|
||||
<td>回复：</td>
|
||||
<td><label>
|
||||
<input type="textarea" maxlength="200" :rows="4" clearable
|
||||
style="width:260px" v-model="params.content"></input>
|
||||
</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<Button type="primary" :loading="submitLoading" @click="handleSubmit" style="margin-left: 5px">
|
||||
回复
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<Modal title="View Image" v-model="visible">
|
||||
<img :src="previewImage" v-if="visible" style="width: 100%">
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {getComplainDetail} from '@/api/member.js';
|
||||
import {communication} from '@/api/order';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
detail: {}, // 评价详情
|
||||
visible: false, // 图片预览
|
||||
previewImage: '', // 预览图片地址
|
||||
loading: false, // 加载状态
|
||||
// 状态
|
||||
statusLabel: {
|
||||
NO_APPLY: '未申请',
|
||||
APPLYING: '申请中',
|
||||
COMPLETE: '已完成',
|
||||
EXPIRED: '已失效',
|
||||
CANCEL: '已取消',
|
||||
NEW: '待审核'
|
||||
},
|
||||
// 商家回复内容
|
||||
params: {
|
||||
content: '',
|
||||
complainId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail () {
|
||||
getComplainDetail(this.$route.query.id).then(res => {
|
||||
if (res.success) this.detail = res.result
|
||||
})
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: {skuId, goodsId}
|
||||
})
|
||||
window.open(routerUrl.href, '_blank')
|
||||
},
|
||||
handleView (name) {
|
||||
this.previewImage = name;
|
||||
this.visible = true;
|
||||
},
|
||||
// 回复
|
||||
handleSubmit () {
|
||||
if (this.params.content === '') {
|
||||
this.$Message.error('请填写对话内容');
|
||||
return;
|
||||
}
|
||||
this.params.complainId = this.$route.query.id;
|
||||
communication(this.params).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success('对话成功');
|
||||
this.params.content = '';
|
||||
this.getDetail();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getDetail()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.speak-way {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
border: 1px solid #999;
|
||||
|
||||
.speak-seller {
|
||||
background-color: #fff2c6;
|
||||
}
|
||||
|
||||
.speak-platform {
|
||||
background-color: #ffe2d1;
|
||||
}
|
||||
|
||||
.speak-buyer {
|
||||
background-color: #c1d6d5;
|
||||
}
|
||||
}
|
||||
|
||||
.speak-msg {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 5px;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.demo-upload-list {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
||||
margin-right: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.demo-upload-list img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.demo-upload-list-cover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
.demo-upload-list:hover .demo-upload-list-cover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.demo-upload-list-cover i {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.icon-upload {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
line-height: 58px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border: 1px dashed #999;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border-color: $theme_color;
|
||||
}
|
||||
}
|
||||
|
||||
.l_title {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-color: #eee;
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
|
||||
&:nth-child(1) {
|
||||
width: 120px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
196
buyer/src/pages/home/memberCenter/ComplainList.vue
Normal file
196
buyer/src/pages/home/memberCenter/ComplainList.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="我的投诉" />
|
||||
|
||||
<div class="order">
|
||||
<div class="order-title">
|
||||
<Row class="order-row title">
|
||||
<i-col span="12">商品信息</i-col>
|
||||
<i-col span="4">投诉状态</i-col>
|
||||
<i-col span="4">投诉主题</i-col>
|
||||
<i-col span="6"></i-col>
|
||||
</Row>
|
||||
</div>
|
||||
<empty v-if="list.length === 0" />
|
||||
|
||||
<div class="order-item" v-else v-for="(item, index) in list" :key="index">
|
||||
<div>
|
||||
<div class="title order-item-title">
|
||||
<span>投诉单号:{{item.id}}</span>
|
||||
<span class="color999 ml_10">{{item.createTime}}</span>
|
||||
<span class="hover-pointer fontsize_12 eval-detail" @click="detail(item.id)">投诉详情</span>
|
||||
<span class="hover-pointer fontsize_12 eval-detail" style="right: 90px" v-if="item.complainStatus != 'EXPIRED' && item.complainStatus != 'CANCEL'" @click="cancel(item.id)">取消投诉</span>
|
||||
</div>
|
||||
<Row class="order-item-view">
|
||||
<i-col span="12" class="item-view-name">
|
||||
<div class="order-img">
|
||||
<img :src="item.goodsImage" alt="" />
|
||||
</div>
|
||||
<div class="order-name">
|
||||
{{item.goodsName}}
|
||||
</div>
|
||||
<div>
|
||||
x1
|
||||
</div>
|
||||
</i-col>
|
||||
<i-col span="4">{{statusLabel[item.complainStatus]}}</i-col>
|
||||
<i-col span="4">
|
||||
<Tooltip >
|
||||
<div class="content">{{item.content}}</div>
|
||||
<div style="white-space: normal;" slot="content">
|
||||
{{item.content}}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
<Tooltip >
|
||||
<div class="content">{{item.content}}</div>
|
||||
<div style="white-space: normal;" slot="content">
|
||||
{{item.content}}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</i-col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
<Spin v-if="loading"></Spin>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="page-size">
|
||||
<Page :total="total" @on-change="changePageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size="params.pageSize"
|
||||
show-sizer>
|
||||
</Page>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {complainList, clearComplain} from '@/api/member.js';
|
||||
export default {
|
||||
name: 'ComplainList',
|
||||
data () {
|
||||
return {
|
||||
loading: false, // 加载状态
|
||||
list: [], // 投诉列表
|
||||
statusLabel: { // 投诉状态
|
||||
NO_APPLY: '未申请',
|
||||
APPLYING: '申请中',
|
||||
COMPLETE: '已完成，此时可申请',
|
||||
EXPIRED: '已失效，不可申请',
|
||||
CANCEL: '已取消',
|
||||
NEW: '申请中'
|
||||
},
|
||||
total: 0, // 投诉总数
|
||||
params: { // 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList () {
|
||||
complainList(this.params).then(res => {
|
||||
if (res.success) {
|
||||
const list = res.result.records;
|
||||
this.list = list;
|
||||
this.total = res.result.total
|
||||
}
|
||||
})
|
||||
},
|
||||
changePageNum (val) {
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
changePageSize (val) {
|
||||
this.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
cancel (id) {
|
||||
this.$Modal.confirm({
|
||||
title: '取消投诉',
|
||||
content: '<p>确定取消投诉吗？</p>',
|
||||
onOk: () => {
|
||||
clearComplain(id).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success('取消投诉成功');
|
||||
this.getCartList();
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel: () => { }
|
||||
});
|
||||
},
|
||||
detail (id) {
|
||||
this.$router.push({path: '/home/complainDetail', query: { id }})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.order-img {
|
||||
> img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px solid $border_color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@include background_color($light_background_color);
|
||||
}
|
||||
.item-view-name {
|
||||
display: flex;
|
||||
}
|
||||
.order-name {
|
||||
display: -webkit-box;
|
||||
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
@include content_color($light_content_color);
|
||||
}
|
||||
.order-item-title {
|
||||
padding: 5px 20px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
}
|
||||
.order-item-view {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.order-item {
|
||||
text-align: center;
|
||||
border: 1px solid $border_color;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.order-row {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
color: #999;
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.eval-detail {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
&:hover{
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
382
buyer/src/pages/home/memberCenter/Distribution.vue
Normal file
382
buyer/src/pages/home/memberCenter/Distribution.vue
Normal file
@@ -0,0 +1,382 @@
|
||||
<template>
|
||||
<div class='wrapper'>
|
||||
<card _Title='我的分销'/>
|
||||
<!-- 分销申请 -->
|
||||
<div v-if="status === 0">
|
||||
<Alert type="warning">分销商申请</Alert>
|
||||
<Form ref="form" :model="applyForm" :rules="rules">
|
||||
<FormItem label="姓名" prop="name">
|
||||
<Input v-model="applyForm.name"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="身份证号" prop="idNumber">
|
||||
<Input v-model="applyForm.idNumber"></Input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" :loading="applyLoading" @click="apply">提交申请</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<!-- 分销审核 -->
|
||||
<div v-if="status === 1">
|
||||
<Alert type="success">
|
||||
您提交的信息正在审核
|
||||
<template slot="desc">提交认证申请后，工作人员将在三个工作日进行核对完成审核</template>
|
||||
</Alert>
|
||||
</div>
|
||||
<!-- 分销提现、商品、订单 -->
|
||||
<div v-if="status === 2">
|
||||
<div class="box">
|
||||
<div class="mb_20 account-price">
|
||||
<span class="subTips">可提现金额：</span>
|
||||
<span class="fontsize_48 global_color">￥{{ result.canRebate | unitPrice }}</span>
|
||||
<span class="subTips">冻结金额：</span>
|
||||
<span class="">￥{{ result.commissionFrozen | unitPrice }}</span>
|
||||
<Button type="primary" size="small" class="ml_20" @click="withdrawApplyModal = true">申请提现</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Tabs :value="tabName" @on-click="tabPaneChange">
|
||||
<TabPane label="已选商品" name="goodsChecked">
|
||||
<Table stripe :columns="goodsColumns" :data="goodsData.records">
|
||||
<template slot-scope="{ row }" slot="name">
|
||||
<div class="goods-msg" @click="linkTo(`/goodsDetail?skuId=${row.skuId}&goodsId=${row.id}`)"><img style="vertical-align:top;" :src="row.thumbnail" width="60" height="60" alt=""> {{row.goodsName}}</div>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="price">
|
||||
<span> ￥{{ row.price | unitPrice }}</span>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="commission">
|
||||
<span> ￥{{ row.commission | unitPrice }}</span>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="action">
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="fenxiao(row)">分销商品</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<div class="page-size">
|
||||
<Page
|
||||
:current="params.pageNumber"
|
||||
:total="goodsData.total"
|
||||
:page-size="params.pageSize"
|
||||
@on-change="changePage"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
></Page>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane label="未选商品" name="goodsUncheck">
|
||||
<Table stripe :columns="goodsColumns" :data="goodsData.records">
|
||||
<template slot-scope="{ row }" slot="name">
|
||||
<div class="goods-msg" @click="linkTo(`/goodsDetail?skuId=${row.skuId}&goodsId=${row.id}`)"><img style="vertical-align:top;" :src="row.thumbnail" width="60" height="60" alt=""> {{row.goodsName}}</div>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="price">
|
||||
<span> ￥{{ row.price | unitPrice }}</span>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="commission">
|
||||
<span> ￥{{ row.commission | unitPrice }}</span>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="action">
|
||||
<Button type="primary" size="small" style="margin-right: 5px" @click="selectGoods(row.id)">选择商品</Button>
|
||||
</template>
|
||||
</Table>
|
||||
<div class="page-size">
|
||||
<Page
|
||||
:current="params.pageNumber"
|
||||
:total="goodsData.total"
|
||||
:page-size="params.pageSize"
|
||||
@on-change="changePage"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
></Page>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane label="提现记录" name="log">
|
||||
<Table stripe :columns="logColumns" :data="logData.records">
|
||||
<template slot-scope="{ row }" slot="time">
|
||||
<span>{{row.createTime}}</span>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="price">
|
||||
<span> +￥{{ row.price | unitPrice }}</span>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="status">
|
||||
<span> {{row.distributionCashStatus == "APPLY" ? "待处理" : row.distributionCashStatus == "PASS" ? "通过" : "拒绝"}}</span>
|
||||
</template>
|
||||
</Table>
|
||||
<div class="page-size">
|
||||
<Page
|
||||
:current="logParams.pageNumber"
|
||||
:total="logData.total"
|
||||
:page-size="logParams.pageSize"
|
||||
@on-change="changePageLog"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
></Page>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
<!-- 未开放 -->
|
||||
<div v-if="status === 3">
|
||||
<Alert type="error">
|
||||
分销功能暂未开启
|
||||
<template slot="desc">提交认证申请后，工作人员将在三个工作日进行核对完成审核</template>
|
||||
</Alert>
|
||||
</div>
|
||||
|
||||
<Modal v-model="withdrawApplyModal" width="530">
|
||||
<p slot="header">
|
||||
<Icon type="edit"></Icon>
|
||||
<span>提现金额</span>
|
||||
</p>
|
||||
<div>
|
||||
<Input
|
||||
v-model="withdrawPrice"
|
||||
size="large"
|
||||
number
|
||||
maxlength="9"
|
||||
><span slot="append">元</span></Input>
|
||||
</div>
|
||||
<div slot="footer" style="text-align: center">
|
||||
<Button type="primary" size="large" @click="withdraw">提现</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal v-model="qrcodeShow" title="分销商品" width="800">
|
||||
<Alert type="warning">
|
||||
下载二维码或者复制链接分享商品
|
||||
</Alert>
|
||||
<div style="width:200px;height:200px;border:1px solid #eee;">
|
||||
<vue-qr :text="qrcode" :callback="qrcodeData" :margin="0" colorDark="#000" colorLight="#fff" :size="200"></vue-qr>
|
||||
<Button class="download-btn" type="success" @click="downloadQrcode">下载二维码</Button>
|
||||
</div>
|
||||
<div class="mt_10">商品链接：<Input style="width:400px" v-model="qrcode"></Input></div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {distribution, applyDistribution, distCash, distCashHistory, getDistOrderList, getDistGoodsList, selectDistGoods} from '@/api/member.js'
|
||||
import { IDCard } from '@/plugins/RegExp.js';
|
||||
import vueQr from 'vue-qr';
|
||||
export default {
|
||||
name: 'Distribution',
|
||||
components: { vueQr },
|
||||
data () {
|
||||
return {
|
||||
status: 0, // 申请状态，0为未申请 1 申请中 2 申请完成 3 功能暂未开启
|
||||
applyForm: {}, // 申请表单
|
||||
rules: { // 验证规则
|
||||
name: [{required: true, message: '请输入真实姓名'}],
|
||||
idNumber: [
|
||||
{required: true, message: '请输入身份证号'},
|
||||
{pattern: IDCard, message: '请输入正确的身份证号'}
|
||||
]
|
||||
},
|
||||
tabName: 'goodsChecked', // 当前所在tab
|
||||
result: {}, // 审核结果
|
||||
applyLoading: false, // 申请加载状态
|
||||
goodsLoading: false, // 列表加载状态
|
||||
withdrawApplyModal: false, // 提现表单显隐
|
||||
withdrawPrice: 0, // 提现金额
|
||||
goodsData: {}, // 商品数据
|
||||
logData: {}, // 日志数据
|
||||
goodsColumns: [ // 商品表头
|
||||
{title: '商品名称', slot: 'name', width: 400},
|
||||
{title: '商品价格', slot: 'price'},
|
||||
{title: '佣金', slot: 'commission'},
|
||||
{title: '操作', slot: 'action', width: 120}
|
||||
],
|
||||
logColumns: [ // 日志表头
|
||||
{title: '申请时间', slot: 'time'},
|
||||
{title: '提现金额', slot: 'price'},
|
||||
{title: '提现状态', slot: 'status'}
|
||||
],
|
||||
params: { // 商品请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
checked: true
|
||||
},
|
||||
orderParams: { // 订单商品请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
logParams: { // 日志参数
|
||||
pageNumber: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
qrcode: '', // 二维码
|
||||
qrcodeShow: false, // 显示二维码
|
||||
base64Img: '', // base64编码
|
||||
goodsNameCurr: ''// 当前分销商品名称
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.distribution()
|
||||
},
|
||||
methods: {
|
||||
apply () {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
this.applyLoading = true
|
||||
applyDistribution(this.form).then(res => {
|
||||
this.applyLoading = false
|
||||
if (res.success) {
|
||||
this.$Message.success('申请已提交，请等待管理员审核')
|
||||
this.status = 1;
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
withdraw () { // 申请提现
|
||||
distCash({price: this.withdrawPrice}).then(res => {
|
||||
this.withdrawApplyModal = false
|
||||
this.price = 0;
|
||||
if (res.success) {
|
||||
this.$Message.success('提现成功')
|
||||
this.distribution()
|
||||
} else {
|
||||
this.$Message.error(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
qrcodeData (data64) {
|
||||
this.base64Img = data64
|
||||
},
|
||||
downloadQrcode () {
|
||||
let a = document.createElement('a'); // 生成一个a元素
|
||||
let event = new MouseEvent('click'); // 创建一个单击事件
|
||||
a.download = this.goodsNameCurr || 'photo'
|
||||
a.href = this.base64Img; // 将生成的URL设置为a.href属性
|
||||
a.dispatchEvent(event); // 触发a的单击事件
|
||||
},
|
||||
tabPaneChange (tab) { // tab栏切换
|
||||
if (tab === 'goodsChecked') {
|
||||
this.params.checked = true;
|
||||
this.params.pageNUmber = 1
|
||||
this.getGoodsData()
|
||||
} else if (tab === 'goodsUncheck') {
|
||||
this.params.checked = false
|
||||
this.getGoodsData()
|
||||
} else if (tab === 'order') {
|
||||
this.orderParams.pageNumber = 1
|
||||
this.getOrderData()
|
||||
} else if (tab === 'log') {
|
||||
this.logParams.pageNumber = 1
|
||||
this.getLog()
|
||||
}
|
||||
},
|
||||
changePage (val) {
|
||||
this.params.pageNumber = val;
|
||||
this.getGoodsData()
|
||||
},
|
||||
changePageLog (val) {
|
||||
this.logParams.pageNumber = val;
|
||||
this.getLog()
|
||||
},
|
||||
selectGoods (id) { // 选择商品
|
||||
selectDistGoods(id).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('分销商品选择成功，请在已选商品中查看')
|
||||
this.getGoodsData()
|
||||
}
|
||||
})
|
||||
},
|
||||
fenxiao (row) { // 分销商品
|
||||
this.qrcode = `${location.origin}/goodsDetail?skuId=${row.skuId}&goodsId=${row.id}&distributionId=${this.result.id}`
|
||||
this.goodsNameCurr = row.goodsName
|
||||
this.qrcodeShow = true;
|
||||
},
|
||||
getGoodsData () { // 商品数据
|
||||
getDistGoodsList(this.params).then(res => {
|
||||
if (res.success) this.goodsData = res.result
|
||||
})
|
||||
},
|
||||
getOrderData () { // 订单数据
|
||||
getDistOrderList(this.orderParams).then(res => {
|
||||
if (res.success) this.goodsData = res.result
|
||||
})
|
||||
},
|
||||
getLog () { // 提现历史
|
||||
distCashHistory(this.logParams).then(res => {
|
||||
if (res.success) this.goodsData = res.result
|
||||
})
|
||||
},
|
||||
distribution () { // 获取分销商信息
|
||||
distribution().then((res) => {
|
||||
if (res.result) {
|
||||
this.result = res.result;
|
||||
let type = res.result.distributionStatus;
|
||||
|
||||
if (type === 'PASS') {
|
||||
this.status = 2;
|
||||
this.getGoodsData()
|
||||
} else if (type === 'RETREAT' || type === 'REFUSE') {
|
||||
this.status = 0;
|
||||
} else {
|
||||
this.status = 1;
|
||||
}
|
||||
} else if (!res.data.success && res.data.code === 22000) {
|
||||
this.status = 3;
|
||||
} else {
|
||||
// 没有资格申请 先去实名认证
|
||||
this.status = 0
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.afList{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.codeImg{
|
||||
|
||||
display: flex;
|
||||
>img{
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
.mb_40{margin-bottom: 40px;}
|
||||
.box {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.page-size {
|
||||
margin: 15px 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.account-price {
|
||||
font-weight: bold;
|
||||
}
|
||||
.subTips {
|
||||
@include sub_color($light_sub_color);
|
||||
}
|
||||
.account-btns {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.ivu-btn {
|
||||
margin: 0 4px;
|
||||
}
|
||||
.fontsize_48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
.goods-msg{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 3px;
|
||||
&:hover{
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.download-btn {
|
||||
position: relative;
|
||||
top: -200px;
|
||||
left: 200px;
|
||||
}
|
||||
</style>
|
||||
175
buyer/src/pages/home/memberCenter/Favorites.vue
Normal file
175
buyer/src/pages/home/memberCenter/Favorites.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="近期收藏" :_Tabs="favoriteWay" @_Change="change" :_Size="16" v-if="!homePage"/>
|
||||
<card _Title="近期收藏" :_Size="16" :_Tabs="favoriteWay" @_Change="change" _More="全部收藏" _Src="/home/Favorites" v-else></card>
|
||||
<div v-if="list.length">
|
||||
<template v-for="(item) in list">
|
||||
<div class="goodsItem" :key="item.skuId">
|
||||
<div class="goodsImg hover-pointer">
|
||||
<img
|
||||
:src="params.type === 'GOODS'? item.image : item.logo"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="goodsTitle hover-pointer">
|
||||
{{params.type === 'GOODS'? item.goodsName : item.storeName}}
|
||||
</div>
|
||||
<div class="goodsPrice">
|
||||
<span v-if="params.type === 'GOODS'">{{item.price | unitPrice}}</span>
|
||||
<Tag color="error" v-if="item.selfOperated">商家自营</Tag>
|
||||
</div>
|
||||
<div class="goodsBuy">
|
||||
<Button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)" v-if="params.type === 'GOODS'">立即购买</Button>
|
||||
<Button size="small" type="primary" @click="goShop(item.storeId)" v-else>店铺购买</Button>
|
||||
<Button size="small" type="error" ghost v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</Button>
|
||||
<Button size="small" type="error" ghost v-if="params.type === 'SHOP'" @click="cancel(item.storeId)">取消收藏</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<Spin size="large" fix v-if="spinShow"></Spin>
|
||||
</div>
|
||||
<empty v-else />
|
||||
<!-- 分页 -->
|
||||
<div class="page-size mt_10" v-if="paging">
|
||||
<Page :total="total" @on-change="changePageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size="params.pageSize"
|
||||
show-sizer>
|
||||
</Page>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { collectList, cancelCollect } from '@/api/member.js'
|
||||
export default {
|
||||
name: 'Favorites',
|
||||
props: {
|
||||
paging: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
homePage: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
favoriteWay: ['收藏商品', '收藏店铺'], // 收藏分类
|
||||
list: [], // 收藏列表
|
||||
total: 0, // 收藏总数
|
||||
params: { // 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
type: 'GOODS'
|
||||
},
|
||||
spinShow: false // 加载状态
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getList () {
|
||||
this.spinShow = true
|
||||
collectList(this.params).then(res => {
|
||||
this.spinShow = false
|
||||
if (res.success) this.list = res.result.records;
|
||||
})
|
||||
},
|
||||
change (index) {
|
||||
if (index === 0) { this.params.type = 'GOODS' }
|
||||
if (index === 1) { this.params.type = 'SHOP' }
|
||||
this.getList()
|
||||
},
|
||||
cancel (id) {
|
||||
let typeName = this.params.type === 'GOODS' ? '商品' : '店铺'
|
||||
this.$Modal.confirm({
|
||||
title: 'Title',
|
||||
content: `<p>确定取消收藏该${typeName}吗？</p>`,
|
||||
onOk: () => {
|
||||
cancelCollect(this.params.type, id).then(res => {
|
||||
if (res.success) {
|
||||
this.getList();
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
changePageNum (val) {
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
changePageSize (val) {
|
||||
this.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
buynow (skuId, goodsId) {
|
||||
let url = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: {skuId, goodsId}
|
||||
})
|
||||
window.open(url.href, '_blank')
|
||||
},
|
||||
goShop (id) {
|
||||
let url = this.$router.resolve({
|
||||
path: '/merchant',
|
||||
query: {id}
|
||||
})
|
||||
window.open(url.href, '_blank')
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.homePage) this.params.pageSize = 5;
|
||||
this.getList()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goodsShop,
|
||||
.goodsImg,
|
||||
.goodsPrice,
|
||||
.goodsShop,
|
||||
.goodsTitle {
|
||||
margin: 0 6px;
|
||||
}
|
||||
.wrapper {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.goodsItem {
|
||||
display: flex;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
> .goodsImg {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> .goodsPrice,
|
||||
.goodsShop {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> .goodsTitle {
|
||||
width: 400px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.goodsBuy {
|
||||
margin-left: 80px;
|
||||
}
|
||||
.page-size{
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
125
buyer/src/pages/home/memberCenter/Invoice.vue
Normal file
125
buyer/src/pages/home/memberCenter/Invoice.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="我的发票"></card>
|
||||
<empty v-if="list.length===0" />
|
||||
<div v-else>
|
||||
<Button size="small" @click="invoiceAvailable = true">新增发票</Button>
|
||||
<div class="receipt-item" v-for="(item,index) in list" :key="index">
|
||||
<p><span>发票抬头：</span>{{item.receiptTitle}}</p>
|
||||
<p><span>发票内容：</span> {{item.receiptContent}}</p>
|
||||
<p><span>纳税人识别号：</span> {{item.taxpayerId}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Modal v-model="invoiceAvailable" width="600" footer-hide>
|
||||
<Form
|
||||
:model="form"
|
||||
ref="form"
|
||||
label-position="left"
|
||||
:rules="ruleInline"
|
||||
:label-width="110"
|
||||
>
|
||||
<FormItem label="发票类型">
|
||||
<RadioGroup v-model="form.type">
|
||||
<Radio :label="2">单位</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="发票抬头"
|
||||
prop="receiptTitle"
|
||||
>
|
||||
<i-input v-model="form.receiptTitle"></i-input>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="纳税人识别号"
|
||||
prop="taxpayerId"
|
||||
>
|
||||
<i-input v-model="form.taxpayerId"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="发票内容">
|
||||
<RadioGroup v-model="form.receiptContent">
|
||||
<Radio label="商品明细">商品明细</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div style="text-align: center">
|
||||
<Button type="primary" :loading="loading" @click="save">保存发票信息</Button>
|
||||
<Button type="default" @click="invoiceAvailable = false">取消</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { receiptList, saveReceipt } from '@/api/member.js';
|
||||
import { TINumber } from '@/plugins/RegExp.js';
|
||||
export default {
|
||||
name: 'Invoice',
|
||||
data () {
|
||||
return {
|
||||
list: [], // 发票列表
|
||||
form: { // 添加发票表单
|
||||
type: 2,
|
||||
receiptTitle: '', // 发票抬头
|
||||
taxpayerId: '', // 纳税人识别号
|
||||
receiptContent: '商品明细'
|
||||
},
|
||||
ruleInline: { // 验证规则
|
||||
receiptTitle: [{ required: true, message: '请填写公司名称' }],
|
||||
taxpayerId: [
|
||||
{ required: true, message: '请填写纳税人识别号' },
|
||||
{ pattern: TINumber, message: '请填写正确的纳税人识别号' }
|
||||
]
|
||||
},
|
||||
loading: false, // 加载状态
|
||||
invoiceAvailable: false // 添加发票模态框显隐
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList () {
|
||||
receiptList().then(res => {
|
||||
this.list = res.result.records;
|
||||
})
|
||||
},
|
||||
save () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
let params = {
|
||||
receiptTitle: this.form.receiptTitle,
|
||||
taxpayerId: this.form.taxpayerId,
|
||||
receiptContent: this.form.receiptContent
|
||||
};
|
||||
saveReceipt(params).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.getList();
|
||||
this.resetData();
|
||||
this.invoiceAvailable = false;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
resetData () {
|
||||
this.$refs.form.resetFields();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.receipt-item {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
> p {
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
212
buyer/src/pages/home/memberCenter/ModifyPwd.vue
Normal file
212
buyer/src/pages/home/memberCenter/ModifyPwd.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="账户安全"/>
|
||||
<!-- 手机号验证 -->
|
||||
<Form ref="formData" :model="formData" label-position="left" :label-width="100" :rules="ruleInLines"
|
||||
v-if="(status == 2 || status == 3) && !showPwd">
|
||||
<FormItem label="手机号">
|
||||
<div class="phone">1234567890</div>
|
||||
</FormItem>
|
||||
<FormItem label="图片验证码" prop="picture" style="width: 350px">
|
||||
<i-input v-model="formData.picture" size="large" maxlength="4"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="短信验证码" prop="msg">
|
||||
<i-input v-model="formData.msg" size="large" maxlength="6" style="width: 250px">
|
||||
<span slot="append">输入验证码</span>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer" v-if="(status == 2 || status == 3) && !showPwd" style="text-align: center;width: 50%">
|
||||
<Button type="primary" class="ml_10" @click="submitRegister">下一步</Button>
|
||||
</div>
|
||||
|
||||
<!-- 修改 -->
|
||||
<Form ref="formRegister" :model="formRegister" :rules="ruleInline" :label-width="80" v-if="status == 1 && !showPwd">
|
||||
<FormItem label="旧密码" prop="password">
|
||||
<i-input type="password" v-model="formRegister.password" clearable size="large" placeholder="请输入旧密码"
|
||||
style="width: 300px"
|
||||
maxlength="12">
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem label="新密码" prop="newPassword">
|
||||
<i-input type="password" v-model="formRegister.newPassword" clearable size="large" placeholder="请输入新密码"
|
||||
style="width: 300px"
|
||||
maxlength="12">
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem label="确认密码" prop="againPassword">
|
||||
<i-input type="password" v-model="formRegister.againPassword" clearable size="large" placeholder="请输入确认密码"
|
||||
style="width: 300px"
|
||||
maxlength="12">
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
|
||||
</Form>
|
||||
<div slot="footer" v-if="status == 1 && !showPwd" style="width: 50%;text-align: center">
|
||||
<Button type="primary" class="ml_10" @click="handleRegist">修改</Button>
|
||||
</div>
|
||||
<!-- 设置&修改的第二种情况 -->
|
||||
<Form ref="formDataUpdate" :model="formDataUpdate" label-position="left" :label-width="100" :rules="ruleIn"
|
||||
v-if="showPwd">
|
||||
<FormItem label="新密码" prop="newPassword">
|
||||
<i-input type="password" v-model="formDataUpdate.newPassword" clearable size="large" placeholder="请输入新密码"
|
||||
style="width: 300px"
|
||||
maxlength="12">
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem label="确认密码" prop="againPassword">
|
||||
<i-input type="password" v-model="formDataUpdate.againPassword" clearable size="large" placeholder="请输入确认密码"
|
||||
style="width: 300px"
|
||||
maxlength="12">
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer" v-if="showPwd" style="text-align: center;width: 50%">
|
||||
<Button type="primary" class="ml_10" @click="setPassword">设置</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
setPwd,
|
||||
editPwd
|
||||
} from '@/api/account';
|
||||
import {md5} from '@/plugins/md5.js'
|
||||
|
||||
export default {
|
||||
name: 'modifyPwd',
|
||||
data () {
|
||||
return {
|
||||
// 1为修改 2为设置 3为提交校验的下一步
|
||||
status: '',
|
||||
showPwd: false, // 显示密码
|
||||
formData: { // 验证表单
|
||||
picture: '',
|
||||
msg: ''
|
||||
},
|
||||
formDataUpdate: { // 直接输入新密码表单
|
||||
newPassword: '',
|
||||
againPassword: ''
|
||||
},
|
||||
formRegister: { // 第三步 新密码表单
|
||||
password: '',
|
||||
againPassword: '',
|
||||
newPassword: ''
|
||||
},
|
||||
ruleInLines: {
|
||||
picture: [
|
||||
{required: true, message: '请输入图片验证码', trigger: 'blur'}
|
||||
],
|
||||
msg: [
|
||||
{required: true, message: '请输入短信验证码', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
ruleIn: {
|
||||
newPassword: [
|
||||
{required: true, message: '请输入新密码', trigger: 'blur'},
|
||||
{type: 'string', min: 6, message: '密码不能少于6位'}
|
||||
],
|
||||
againPassword: [
|
||||
{required: true, message: '请输入新密码', trigger: 'blur'},
|
||||
{type: 'string', min: 6, message: '密码不能少于6位'}
|
||||
]
|
||||
},
|
||||
ruleInline: {
|
||||
password: [
|
||||
{required: true, message: '请输入旧密码', trigger: 'blur'}
|
||||
],
|
||||
newPassword: [
|
||||
{required: true, message: '请输入新密码', trigger: 'blur'},
|
||||
{type: 'string', min: 6, message: '密码不能少于6位'}
|
||||
],
|
||||
againPassword: [
|
||||
{required: true, message: '请输入新密码', trigger: 'blur'},
|
||||
{type: 'string', min: 6, message: '密码不能少于6位'}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.status = this.$route.query.status
|
||||
},
|
||||
methods: {
|
||||
// 修改
|
||||
handleRegist () {
|
||||
this.$refs['formRegister'].validate((valid) => {
|
||||
if (valid) {
|
||||
const {newPassword, againPassword, password} = this.formRegister
|
||||
if (newPassword !== againPassword) {
|
||||
this.$Message.error({
|
||||
content: '新旧密码不一致'
|
||||
});
|
||||
return
|
||||
}
|
||||
const params = {newPassword, password}
|
||||
params.newPassword = md5(newPassword)
|
||||
params.password = md5(password)
|
||||
editPwd(params).then(res => {
|
||||
if (res.message === 'success' && res.result) {
|
||||
this.$Message.success('修改密码成功');
|
||||
this.$router.push('/home')
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交验证
|
||||
submitRegister () {
|
||||
this.$refs['formData'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.showPwd = true
|
||||
}
|
||||
})
|
||||
},
|
||||
// 设置密码
|
||||
setPassword () {
|
||||
this.$refs['formDataUpdate'].validate((valid) => {
|
||||
if (valid) {
|
||||
const {newPassword, againPassword} = this.formDataUpdate
|
||||
if (newPassword === '') {
|
||||
this.$Message.error({
|
||||
content: '请输入密码'
|
||||
});
|
||||
return
|
||||
}
|
||||
if (newPassword !== againPassword) {
|
||||
this.$Message.error({
|
||||
content: '新旧密码不一致'
|
||||
});
|
||||
return
|
||||
}
|
||||
const params = {password: newPassword}
|
||||
params.password = md5(newPassword)
|
||||
setPwd(params).then(res => {
|
||||
if (res.message === 'success' && res.result) {
|
||||
this.$Message.success('支付密码设置成功');
|
||||
this.$router.push('/home')
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.phone {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
105
buyer/src/pages/home/memberCenter/Point.vue
Normal file
105
buyer/src/pages/home/memberCenter/Point.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="point">
|
||||
<card _Title="我的积分" />
|
||||
<div class="point-content">
|
||||
<span>剩余积分：<span>{{pointObj.variablePoint || 0}}</span></span>
|
||||
<span>累计获得：<span>{{pointObj.point || 0}}</span></span>
|
||||
</div>
|
||||
<h3>积分日志</h3>
|
||||
<Table :columns="logColumns" :data="logData.records">
|
||||
<template slot-scope="{ row }" slot="point">
|
||||
<div><span>{{row.pointType == "1" ? '+' : '-'}}</span>{{ row.variablePoint }}</div>
|
||||
</template>
|
||||
</Table>
|
||||
<!-- 分页 -->
|
||||
<Page
|
||||
style="float:right;margin-top:10px"
|
||||
:current="params.pageNumber"
|
||||
:total="logData.total"
|
||||
:page-size="params.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
></Page>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {memberPoint, memberPointHistory} from '@/api/member.js'
|
||||
export default {
|
||||
name: 'Point',
|
||||
data () {
|
||||
return {
|
||||
logData: {}, // 积分日志
|
||||
pointObj: {}, // 积分明细
|
||||
loading: false, // 请求接口加载框
|
||||
params: { // 积分列表请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
logColumns: [ // table展示数据
|
||||
{
|
||||
title: '日志内容',
|
||||
key: 'content',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
key: 'createTime',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '积分明细',
|
||||
slot: 'point',
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getHistory()
|
||||
this.getPoint()
|
||||
},
|
||||
methods: {
|
||||
getHistory () {
|
||||
memberPointHistory(this.params).then(res => {
|
||||
this.logData = res.result;
|
||||
})
|
||||
},
|
||||
getPoint () { // 获取积分详情
|
||||
memberPoint().then(res => {
|
||||
if (res.success) this.pointObj = res.result
|
||||
})
|
||||
},
|
||||
changePage (val) {
|
||||
this.pageNumber = val
|
||||
this.getHistory()
|
||||
},
|
||||
changePageSize (val) {
|
||||
this.param.pageSize = val
|
||||
this.params.pageNumber = 1
|
||||
this.getHistory()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
.point-content {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
>span{
|
||||
color: #999;
|
||||
margin-right: 100px;
|
||||
span {
|
||||
color: $theme_color;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
buyer/src/pages/home/memberCenter/Profile.vue
Normal file
90
buyer/src/pages/home/memberCenter/Profile.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="用户信息" />
|
||||
<Form :model="formItem" :rules="rules" ref="form" :label-width="80">
|
||||
<FormItem label="头像">
|
||||
<Avatar v-if="formItem.face" :src="formItem.face" size="80"/>
|
||||
<Avatar v-else icon="ios-person" size="80"/>
|
||||
<Upload
|
||||
:show-upload-list="false"
|
||||
:on-success="handleSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:format="['jpg','jpeg','png']"
|
||||
:action="action"
|
||||
:headers="accessToken"
|
||||
>
|
||||
<Button class="mt_10">上传头像</Button>
|
||||
</Upload>
|
||||
</FormItem>
|
||||
<FormItem label="昵称" prop="nickName">
|
||||
<Input class="wrapper-user-name" style="width:187px" v-model="formItem.nickName" placeholder="" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="生日">
|
||||
<DatePicker type="date" placeholder="选择您的生日" v-model="formItem.birthday"></DatePicker>
|
||||
</FormItem>
|
||||
<FormItem label="性别">
|
||||
<RadioGroup v-model="formItem.sex">
|
||||
<Radio :label="1">男</Radio>
|
||||
<Radio :label="0">女</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="save">确认修改</Button>
|
||||
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import storage from '@/plugins/storage.js';
|
||||
import { editMemberInfo } from '@/api/account.js';
|
||||
import { commonUrl } from '@/plugins/request.js';
|
||||
export default {
|
||||
name: 'Profile',
|
||||
data () {
|
||||
return {
|
||||
rules: { // 验证规则
|
||||
nickName: [{required: true, message: '用户昵称不能为空'}, { max: 16, message: '用户昵称不能超过15个字符' }]
|
||||
},
|
||||
formItem: {}, // 表单数据
|
||||
action: commonUrl + '/common/upload/file', // 上传接口
|
||||
accessToken: {} // 验证token
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.formItem = JSON.parse(storage.getItem('userInfo'))
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
},
|
||||
methods: {
|
||||
save () {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
birthday: this.$options.filters.unixToDate(this.formItem.birthday / 1000, 'yyyy-MM-dd'),
|
||||
face: this.formItem.face,
|
||||
nickName: this.formItem.nickName,
|
||||
sex: this.formItem.sex
|
||||
}
|
||||
editMemberInfo(params).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('修改个人资料成功')
|
||||
storage.setItem('userInfo', res.result)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSuccess (res, file) {
|
||||
this.$set(this.formItem, 'face', res.result)
|
||||
},
|
||||
handleBeforeUpload () {}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
249
buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
Normal file
249
buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div class="add-eval">
|
||||
<div class="title">
|
||||
<card _Title="订单评价" :_Size="16"></card>
|
||||
<p>
|
||||
<span class="color999">订单号：</span><span>{{$route.query.sn}}</span>
|
||||
<span class="color999 ml_20" v-if="order.order">{{order.order.paymentTime}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- 物流评分、服务评分 -->
|
||||
<div class="delivery-rate">
|
||||
<div class="fontsize_16">物流服务评价：</div>
|
||||
<div class="color999">
|
||||
<span>物流评价：<Rate v-model="form.deliveryScore" /></span>
|
||||
<span>服务评价：<Rate v-model="form.serviceScore" /></span>
|
||||
<span>描述评价：<Rate v-model="form.descriptionScore" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加订单评价 左侧商品详情 右侧评价框 -->
|
||||
<ul class="goods-eval">
|
||||
<li >
|
||||
<div class="goods-con">
|
||||
<img :src="orderGoods.image" class="hover-pointer" alt="" width="100" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">
|
||||
<p class="hover-pointer color999" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">{{orderGoods.goodsName}}</p>
|
||||
<p>{{orderGoods.goodsPrice | unitPrice('￥')}}</p>
|
||||
</div>
|
||||
|
||||
<div class="eval-con">
|
||||
<div>
|
||||
<span class="color999">商品评价：</span>
|
||||
<RadioGroup style="margin-bottom:5px;color:#999" v-model="orderGoods.grade">
|
||||
<Radio label="GOOD">好评</Radio>
|
||||
<Radio label="MODERATE">中评</Radio>
|
||||
<Radio label="WORSE">差评</Radio>
|
||||
</RadioGroup>
|
||||
<Input type="textarea" maxlength="500" show-word-limit :rows="4" v-model="orderGoods.content" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;">
|
||||
<div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
|
||||
<img :src="img">
|
||||
<div class="demo-upload-list-cover">
|
||||
<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
|
||||
<Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
|
||||
</div>
|
||||
</div>
|
||||
<Upload
|
||||
:show-upload-list="false"
|
||||
:on-success="handleSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:format="['jpg','jpeg','png']"
|
||||
:action="action"
|
||||
:headers="accessToken"
|
||||
style="display: inline-block;width:58px;">
|
||||
<div class="hover-pointer icon-upload" style="">
|
||||
<Icon type="ios-camera" size="20"></Icon>
|
||||
</div>
|
||||
</Upload>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<Button type="primary" class="mt_10" :loading="loading" @click="save">发表</Button>
|
||||
<Modal title="View Image" v-model="visible">
|
||||
<img :src="previewImage" v-if="visible" style="width: 100%">
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { orderDetail } from '@/api/order.js';
|
||||
import { addEvaluation } from '@/api/member.js';
|
||||
import { commonUrl } from '@/plugins/request.js';
|
||||
import storage from '@/plugins/storage';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
order: {}, // 订单详情
|
||||
orderGoods: {}, // 订单商品
|
||||
form: { // 评分展示
|
||||
deliveryScore: 5,
|
||||
serviceScore: 5,
|
||||
descriptionScore: 5
|
||||
}, // 表单
|
||||
visible: false, // 图片预览
|
||||
action: commonUrl + '/common/upload/file', // 上传地址
|
||||
accessToken: {}, // 验证token
|
||||
previewImage: '', // 预览图片地址
|
||||
loading: false // 提交加载状态
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getOrderDetail () {
|
||||
orderDetail(this.$route.query.sn).then(res => {
|
||||
this.order = res.result
|
||||
this.orderGoods = res.result.orderItems[this.$route.query.index]
|
||||
this.$set(this.orderGoods, 'grade', 'GOOD')
|
||||
this.orderGoods.uploadList = []
|
||||
})
|
||||
},
|
||||
save () {
|
||||
if (!this.form.serviceScore || !this.form.deliveryScore) {
|
||||
this.$Message.warning('物流服务评价不能为空')
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.form.descriptionScore) {
|
||||
this.$Message.warning('描述评价不能为空')
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
let goods = this.orderGoods
|
||||
let params = {
|
||||
goodsId: goods.goodsId,
|
||||
orderItemSn: goods.sn,
|
||||
skuId: goods.skuId,
|
||||
descriptionScore: this.form.descriptionScore,
|
||||
serviceScore: this.form.serviceScore,
|
||||
deliveryScore: this.form.deliveryScore,
|
||||
grade: goods.grade,
|
||||
content: goods.content || '',
|
||||
images: goods.uploadList.toString()
|
||||
}
|
||||
addEvaluation(params).then(res => {
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.$Message.success('评价成功')
|
||||
this.$router.push('/home/CommentList')
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: {skuId, goodsId}
|
||||
})
|
||||
window.open(routerUrl.href, '_blank')
|
||||
},
|
||||
handleView (name) {
|
||||
this.previewImage = name;
|
||||
this.visible = true;
|
||||
},
|
||||
handleRemove (index) {
|
||||
this.orderGoods.uploadList.splice(index, 1)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleSuccess (res, file) {
|
||||
this.orderGoods.uploadList.push(res.result)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleBeforeUpload () {
|
||||
const check = this.orderGoods.uploadList.length < 10;
|
||||
if (!check) {
|
||||
this.$Notice.warning({
|
||||
title: '最多可以上传九张图片'
|
||||
});
|
||||
return check;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
this.getOrderDetail()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.delivery-rate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #eee;
|
||||
>div:nth-child(1) {
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.goods-eval li{
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.goods-con {
|
||||
width: 30%;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
p {
|
||||
word-wrap: wrap;
|
||||
&:hover{ color: $theme_color; }
|
||||
}
|
||||
}
|
||||
.eval-con {
|
||||
width: 70%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-upload-list{
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.2);
|
||||
margin-right: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.demo-upload-list img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-upload-list-cover{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,.6);
|
||||
}
|
||||
.demo-upload-list:hover .demo-upload-list-cover{
|
||||
display: block;
|
||||
}
|
||||
.demo-upload-list-cover i{
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.icon-upload {
|
||||
width: 58px;
|
||||
height:58px;
|
||||
line-height: 58px;
|
||||
text-align:center;
|
||||
display: inline-block;
|
||||
border:1px dashed #999;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
border-color: $theme_color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
172
buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
Normal file
172
buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="add-eval">
|
||||
<div class="title">
|
||||
<card _Title="评价详情" :_Size="16"></card>
|
||||
<p>
|
||||
<span class="color999">创建人：</span><span>{{orderGoods.createBy | secrecyMobile}}</span>
|
||||
<span class="color999 ml_20">{{orderGoods.createTime}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- 物流评分、服务评分 -->
|
||||
<div class="delivery-rate">
|
||||
<div class="fontsize_16">物流服务评价：</div>
|
||||
<div class="color999">
|
||||
<span>物流评价：<Rate disabled :value="Number(orderGoods.deliveryScore)" /></span>
|
||||
<span>服务评价：<Rate disabled :value="Number(orderGoods.serviceScore)" /></span>
|
||||
<span>服务评价：<Rate disabled :value="Number(orderGoods.descriptionScore)" /></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加订单评价 左侧商品详情 右侧评价框 -->
|
||||
<ul class="goods-eval">
|
||||
<li >
|
||||
<div class="goods-con">
|
||||
<img :src="orderGoods.goodsImage" class="hover-pointer" alt="" width="100" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">
|
||||
<p class="hover-pointer color999" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">{{orderGoods.goodsName}}</p>
|
||||
</div>
|
||||
|
||||
<div class="eval-con">
|
||||
<div>
|
||||
<span class="color999">商品评价：</span>
|
||||
<RadioGroup style="margin-bottom:5px;color:#999" v-model="orderGoods.grade">
|
||||
<Radio label="GOOD" disabled>好评</Radio>
|
||||
<Radio label="MODERATE" disabled>中评</Radio>
|
||||
<Radio label="WORSE" disabled>差评</Radio>
|
||||
</RadioGroup>
|
||||
<Input type="textarea" maxlength="500" readonly show-word-limit :rows="4" v-model="orderGoods.content" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;">
|
||||
<template v-if="orderGoods.image">
|
||||
<div class="demo-upload-list" v-for="(img, index) in orderGoods.image.split(',')" :key="index">
|
||||
<img :src="img">
|
||||
<div class="demo-upload-list-cover">
|
||||
<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<Modal title="View Image" v-model="visible">
|
||||
<img :src="previewImage" v-if="visible" style="width: 100%">
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { evaluationDetail } from '@/api/member.js';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
order: {}, // 订单详情
|
||||
orderGoods: {}, // 订单商品
|
||||
visible: false, // 图片预览
|
||||
previewImage: '', // 预览图片链接
|
||||
loading: false // 加载状态
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail () {
|
||||
evaluationDetail(this.$route.query.id).then(res => {
|
||||
if (res.success) this.orderGoods = res.result
|
||||
})
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: {skuId, goodsId}
|
||||
})
|
||||
window.open(routerUrl.href, '_blank')
|
||||
},
|
||||
handleView (name) {
|
||||
this.previewImage = name;
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getDetail()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.delivery-rate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #eee;
|
||||
>div:nth-child(1) {
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.goods-eval li{
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.goods-con {
|
||||
width: 30%;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
p {
|
||||
word-wrap: wrap;
|
||||
&:hover{ color: $theme_color; }
|
||||
}
|
||||
}
|
||||
.eval-con {
|
||||
width: 70%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-upload-list{
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.2);
|
||||
margin-right: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.demo-upload-list img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-upload-list-cover{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,.6);
|
||||
}
|
||||
.demo-upload-list:hover .demo-upload-list-cover{
|
||||
display: block;
|
||||
}
|
||||
.demo-upload-list-cover i{
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.icon-upload {
|
||||
width: 58px;
|
||||
height:58px;
|
||||
line-height: 58px;
|
||||
text-align:center;
|
||||
display: inline-block;
|
||||
border:1px dashed #999;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
border-color: $theme_color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
144
buyer/src/pages/home/orderCenter/AddAddress.vue
Normal file
144
buyer/src/pages/home/orderCenter/AddAddress.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div>
|
||||
<card _Title="收货地址" />
|
||||
<div class="add-box">
|
||||
<Form
|
||||
:model="formData"
|
||||
ref="form"
|
||||
label-position="left"
|
||||
:label-width="100"
|
||||
:rules="ruleInline"
|
||||
>
|
||||
<FormItem label="收件人" prop="name">
|
||||
<i-input v-model="formData.name" style="width: 600px"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="收件地区" prop="address">
|
||||
<i-input
|
||||
v-model="formData.address"
|
||||
disabled
|
||||
style="width: 600px"
|
||||
></i-input>
|
||||
<Button type="primary" size="small" @click="$refs.map.showMap = true">选择</Button>
|
||||
</FormItem>
|
||||
<FormItem label="详细地址" prop="detail">
|
||||
<i-input v-model="formData.detail" style="width: 600px"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="手机号码" prop="mobile">
|
||||
<i-input v-model="formData.mobile" style="width: 600px"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="地址别名">
|
||||
<i-input
|
||||
v-model="formData.alias"
|
||||
length
|
||||
:maxlength="4"
|
||||
placeholder="请输入地址别名，例如公司"
|
||||
style="width: 600px"
|
||||
></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="默认地址">
|
||||
<i-switch v-model="formData.isDefault" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="mt_20">
|
||||
<Button type="primary" class="mr_10" :loading="loading" @click="save"
|
||||
>保存收货地址</Button
|
||||
>
|
||||
<Button @click="$router.back()">返回</Button>
|
||||
</div>
|
||||
<lili-map ref="map" @getAddress="getAddress"></lili-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import card from '@/components/card';
|
||||
import liliMap from '@/components/map';
|
||||
import {
|
||||
newMemberAddress,
|
||||
editMemberAddress,
|
||||
getAddrDetail
|
||||
} from '@/api/address';
|
||||
export default {
|
||||
name: 'AddAddress',
|
||||
data () {
|
||||
return {
|
||||
formData: { // 添加地址表单
|
||||
isDefault: false
|
||||
},
|
||||
ruleInline: { // 验证规则
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
address: [{ required: true, message: '请输入地址', trigger: 'change' }],
|
||||
detail: [
|
||||
{ required: true, message: '请输入详细地址', trigger: 'blur' }
|
||||
],
|
||||
mobile: [
|
||||
]
|
||||
},
|
||||
loading: false, // 加载状态
|
||||
mapMsg: {} // 地图信息
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const params = JSON.parse(JSON.stringify(this.formData));
|
||||
params.consigneeAddressPath = params.address.replace(/\s/g, ',');
|
||||
delete params.address;
|
||||
this.loading = true;
|
||||
if (this.$route.query.id) {
|
||||
editMemberAddress(params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.loading = false;
|
||||
this.$router.push('/home/MyAddress');
|
||||
}
|
||||
}).catch(() => { this.loading = false; });
|
||||
} else {
|
||||
newMemberAddress(params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.loading = false;
|
||||
this.$router.push('/home/MyAddress');
|
||||
}
|
||||
}).catch(() => { this.loading = false; });
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getAddrById (id) {
|
||||
// 获取地址详情
|
||||
getAddrDetail(id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
console.log(res);
|
||||
const data = res.result;
|
||||
data.address = res.result.consigneeAddressPath.replace(/,/g, ' ');
|
||||
this.formData = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
getAddress (item) {
|
||||
// 获取地图选择信息
|
||||
console.log(item);
|
||||
this.mapMsg = item;
|
||||
this.$set(this.formData, 'address', item.addr);
|
||||
this.$set(this.formData, 'consigneeAddressIdPath', item.addrId);
|
||||
this.$set(this.formData, 'detail', item.detail);
|
||||
this.formData.lat = item.position.lat;
|
||||
this.formData.lon = item.position.lng;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const id = this.$route.query.id;
|
||||
if (id) this.getAddrById(id);
|
||||
},
|
||||
components: {
|
||||
card,
|
||||
liliMap
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.add-box {
|
||||
margin: 40px 0;
|
||||
}
|
||||
</style>
|
||||
249
buyer/src/pages/home/orderCenter/AfterSale.vue
Normal file
249
buyer/src/pages/home/orderCenter/AfterSale.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- 卡片组件 -->
|
||||
<card _Title="我的售后" :_Size="16"></card>
|
||||
<!-- 搜索 筛选 -->
|
||||
<div class="mb_20 box">
|
||||
<div class="global_float_right" >
|
||||
<Input
|
||||
class="width_300"
|
||||
search
|
||||
enter-button
|
||||
v-model="params.keywords"
|
||||
@on-search="getList"
|
||||
placeholder="请输入订单号搜索"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<empty v-if="orderList.length === 0" />
|
||||
<div class="order-content" v-else>
|
||||
<template v-for="(order, onderIndex) in orderList">
|
||||
<div
|
||||
class="order-list"
|
||||
:key="onderIndex"
|
||||
>
|
||||
<div class="order-header">
|
||||
<div>
|
||||
<div v-if="order.serviceStatus">{{filterOrderStatus(order.serviceStatus)}}</div>
|
||||
<div>
|
||||
售后单号：{{ order.sn }} {{order.createTime}}
|
||||
{{ order.memberName | secrecyMobile }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ order.applyRefundPrice | unitPrice("￥") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-body">
|
||||
<div class="goods-list">
|
||||
<img @click="goodsDetail(order.skuId, order.goodsId)" class="hover-color" :src="order.goodsImage" alt="" />
|
||||
|
||||
<div>
|
||||
<div class="hover-color" @click="goodsDetail(order.skuId, order.goodsId)">{{ order.goodsName }}</div>
|
||||
<div class="mt_10">
|
||||
<span class="global_color"
|
||||
>{{ order.flowPrice | unitPrice("￥") }} </span
|
||||
>x {{ order.num }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span @click="shopPage(order.shopId)">{{ order.storeName }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 订单基础操作 -->
|
||||
<Button @click="goDetail(order.sn)" size="small">售后详情</Button>
|
||||
<Button @click="cancel(order.sn)" v-if="order.afterSaleAllowOperationVO.cancel" size="small">取消售后</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<Spin size="large" fix v-if="spinShow"></Spin>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="page-size">
|
||||
<Page :total="total" @on-change="changePageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size="params.pageSize"
|
||||
show-sizer>
|
||||
</Page>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { afterSaleList, cancelAfterSale } from '@/api/member.js';
|
||||
import { afterSaleStatusList } from '../enumeration.js'
|
||||
export default {
|
||||
name: 'AfterSale',
|
||||
data () {
|
||||
return {
|
||||
orderList: [], // 订单列表
|
||||
params: { // 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
keywords: ''
|
||||
},
|
||||
// 状态数组
|
||||
afterSaleStatusList,
|
||||
total: 0, // 订单总数
|
||||
spinShow: false // 加载状态
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
goDetail (sn) { // 跳转售后详情
|
||||
this.$router.push({
|
||||
name: 'AfterSaleDetail',
|
||||
query: {sn}
|
||||
})
|
||||
},
|
||||
cancel (sn) { // 取消售后申请
|
||||
this.$Modal.confirm({
|
||||
title: '取消',
|
||||
content: '<p>确定取消此次售后申请吗？</p>',
|
||||
onOk: () => {
|
||||
cancelAfterSale(sn).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('取消售后申请成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel: () => {}
|
||||
});
|
||||
},
|
||||
goodsDetail (skuId, goodsId) {
|
||||
// 跳转商品详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId, goodsId }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
// 跳转店铺首页
|
||||
shopPage (id) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/Merchant',
|
||||
query: { id: id }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
getList () {
|
||||
this.spinShow = true;
|
||||
let params = JSON.parse(JSON.stringify(this.params))
|
||||
afterSaleList(params).then(res => {
|
||||
this.spinShow = false
|
||||
if (res.success) {
|
||||
this.orderList = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
changePageNum (val) {
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
changePageSize (val) {
|
||||
this.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
filterOrderStatus (status) { // 获取订单状态中文
|
||||
const ob = this.afterSaleStatusList.filter(e => { return e.status === status });
|
||||
return ob[0].name
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.box {
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-size {
|
||||
margin: 15px 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
/** 订单列表 */
|
||||
.order-list {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover{
|
||||
.del-btn{visibility: visible;}
|
||||
}
|
||||
.del-btn{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ddd;
|
||||
> div:nth-child(1) > div:nth-child(2) {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
.order-body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
padding: 10px;
|
||||
|
||||
.goods-list {
|
||||
width: 500px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
> div {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
span {
|
||||
color: #438cde;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
.ivu-icon {
|
||||
color: #ff8f23;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-child(3) {
|
||||
width: 100px;
|
||||
.ivu-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
158
buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
Normal file
158
buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="order-detail">
|
||||
<card _Title="售后详情" :_Size="16"></card>
|
||||
<div class="order-card">
|
||||
<h3>{{filterOrderStatus(afterSale.serviceStatus)}}</h3>
|
||||
<p class="global_color fontsize_18">{{ afterSale.orderStatusValue }}</p>
|
||||
<p>售后单号：{{ afterSale.sn }} 订单号：{{afterSale.orderSn}}</p>
|
||||
<div style="color:#999;" class="operation-time">创建时间：{{afterSale.createTime}}</div>
|
||||
<div class="service-after">
|
||||
<div>
|
||||
本次售后服务由<span>{{afterSale.storeName}}</span>为您提供
|
||||
</div>
|
||||
<div>
|
||||
<img :src="afterSale.goodsImage" alt="" width="60" height="60">
|
||||
<span>{{afterSale.goodsName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-card">
|
||||
<h3>售后进程</h3>
|
||||
<Steps class="progress" :current="logList.length" direction="vertical">
|
||||
<Step
|
||||
:content="'操作人：'+ log.operatorName + ' ' + log.createTime"
|
||||
:title="log.message"
|
||||
v-for="(log, index) in logList"
|
||||
:key="index"
|
||||
></Step>
|
||||
</Steps>
|
||||
</div>
|
||||
<div class="order-card">
|
||||
<h3 class="mb_10">服务单信息</h3>
|
||||
<table border="1" cellpadding='0' cellspacing="0">
|
||||
<tr>
|
||||
<td>退款方式</td><td>{{afterSale.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'}}{{afterSale.applyRefundPrice | unitPrice('￥')}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>商品处理方式</td><td>{{afterSale.serviceType == 'RETURN_MONEY' ? '退款' : '退货'}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>退款原因</td><td>{{afterSale.reason}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>问题描述</td><td>{{afterSale.problemDesc}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { afterSaleDetail, afterSaleReason, afterSaleLog } from '@/api/member.js';
|
||||
import { afterSaleStatusList } from '../enumeration.js'
|
||||
export default {
|
||||
name: 'aftersale-detail',
|
||||
data () {
|
||||
return {
|
||||
afterSale: {}, // 售后详情数据
|
||||
logList: [], // 日志
|
||||
afterSaleStatusList // 售后状态列表
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getDetail () { // 售后详情
|
||||
afterSaleDetail(this.$route.query.sn).then(res => {
|
||||
if (res.success) {
|
||||
this.afterSale = res.result;
|
||||
|
||||
afterSaleReason(this.afterSale.serviceType).then(res => {
|
||||
res.result.forEach(element => {
|
||||
if (element.id === this.afterSale.reason) {
|
||||
this.$set(this.afterSale, 'reason', element.reason)
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getLog () {
|
||||
afterSaleLog(this.$route.query.sn).then(res => {
|
||||
this.logList = res.result;
|
||||
})
|
||||
},
|
||||
filterOrderStatus (status) { // 获取订单状态中文
|
||||
const ob = this.afterSaleStatusList.filter(e => { return e.status === status });
|
||||
return ob[0].name
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getDetail();
|
||||
this.getLog()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.order-card {
|
||||
padding: 10px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
position: relative;
|
||||
.global_color {
|
||||
color: $theme_color;
|
||||
}
|
||||
p {
|
||||
color: #999;
|
||||
margin: 3px;
|
||||
}
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
}
|
||||
.operation-time {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
}
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.service-after {
|
||||
border: 1px solid #eee;
|
||||
display: flex;
|
||||
height: 80px;
|
||||
padding: 10px;
|
||||
>div:nth-child(1) {
|
||||
width: 400px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
span{color: $theme_color;}
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
>div:nth-child(2){
|
||||
padding-left: 15px;
|
||||
img{vertical-align: top;}
|
||||
span{color: #999;}
|
||||
}
|
||||
}
|
||||
/** 售后进度条 */
|
||||
.progress {
|
||||
margin: 15px 0;
|
||||
}
|
||||
table{
|
||||
border-color: #eee;
|
||||
width: 100%;
|
||||
color: #999;
|
||||
tr{
|
||||
td:nth-child(1){
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
td{
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
273
buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
Normal file
273
buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="apply-after-sale">
|
||||
<card _Title="申请售后"></card>
|
||||
<Table
|
||||
border
|
||||
:columns="columns"
|
||||
:data="goodsData"
|
||||
>
|
||||
<template slot-scope="{ row }" slot="goodsName">
|
||||
<div style="padding:5px;display:flex;">
|
||||
<img :src="row.image" style="vertical-align: top;" width="60" alt=""> <span class="ml_10">{{row.goodsName}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="goodsPrice">
|
||||
<div>{{row.goodsPrice | unitPrice('￥')}}</div>
|
||||
</template>
|
||||
</Table>
|
||||
<div>
|
||||
<Form :model="form" ref="form" :rules="rules" :label-width="80">
|
||||
<FormItem label="售后类别">
|
||||
<RadioGroup v-model="form.serviceType" @on-change="changeReason">
|
||||
<Radio label="RETURN_GOODS">退货</Radio>
|
||||
<Radio label="RETURN_MONEY">退款</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="提交数量" prop="num">
|
||||
<Input type="number" v-model="form.num" style="width:260px" />
|
||||
</FormItem>
|
||||
<FormItem label="提交原因" prop="reason">
|
||||
<Select v-model="form.reason" style="width:260px">
|
||||
<Option v-for="item in reasonList" :value="item.id" :key="item.id">{{ item.reason }}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="问题描述" prop="problemDesc">
|
||||
<Input type="textarea" :rows="4" maxlength="500" style="width:260px" show-word-limit v-model="form.problemDesc" />
|
||||
</FormItem>
|
||||
<FormItem label="图片信息">
|
||||
<div style="display:flex;align-items:center;">
|
||||
<div class="demo-upload-list" v-for="(img, index) in uploadList" :key="index">
|
||||
<img :src="img">
|
||||
<div class="demo-upload-list-cover">
|
||||
<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
|
||||
<Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
|
||||
</div>
|
||||
</div>
|
||||
<Upload
|
||||
:show-upload-list="false"
|
||||
:on-success="handleSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:format="['jpg','jpeg','png']"
|
||||
:action="action"
|
||||
:headers="accessToken"
|
||||
style="display: inline-block;width:58px;">
|
||||
<div class="hover-pointer icon-upload" style="">
|
||||
<Icon type="md-add" size="20"></Icon>
|
||||
</div>
|
||||
</Upload>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="退款方式">
|
||||
<div>{{info.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'}}</div>
|
||||
</FormItem>
|
||||
<template v-if="info.accountType === 'BANK_TRANSFER' && info.applyRefundPrice != 0">
|
||||
<FormItem label="开户行" prop="bankDepositName">
|
||||
<Input v-model="form.bankDepositName" type="text" placeholder="请输入银行开户行" style="width:260px" />
|
||||
</FormItem>
|
||||
<FormItem label="开户名" prop="bankAccountName">
|
||||
<Input v-model="form.bankAccountName" type="text" placeholder="请输入银行开户名" style="width:260px" />
|
||||
</FormItem>
|
||||
<FormItem label="银行账号" prop="bankAccountNumber">
|
||||
<Input v-model="form.bankAccountNumber" type="text" placeholder="请输入银行账号" style="width:260px" />
|
||||
</FormItem>
|
||||
</template>
|
||||
<FormItem label="返回方式">
|
||||
<div>快递至第三方卖家</div>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="apply">提交申请</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Modal title="View Image" v-model="visible">
|
||||
<img :src="previewImage" v-if="visible" style="width: 100%">
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { afterSaleReason, afterSaleInfo, applyAfterSale } from '@/api/member.js'
|
||||
import { commonUrl } from '@/plugins/request.js';
|
||||
import storage from '@/plugins/storage';
|
||||
import * as RegExp from '@/plugins/RegExp'
|
||||
export default {
|
||||
data () {
|
||||
const checkNum = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
console.log(RegExp);
|
||||
callback(new Error('请填写提交数量'));
|
||||
} else if (value > this.info.num) {
|
||||
callback(new Error('提交数量不能大于购买数量'));
|
||||
} else if (!RegExp.integer.test(value)) {
|
||||
callback(new Error('提交数量必须为正整数'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
columns: [ // 表格表头
|
||||
{title: '商品名称', slot: 'goodsName'},
|
||||
{title: '价格', slot: 'goodsPrice'},
|
||||
{title: '购买数量', key: 'num'}
|
||||
],
|
||||
goodsData: [], // 商品数据
|
||||
reasonList: [], // 售后原因列表
|
||||
info: {}, // 售后信息
|
||||
form: { // 售后数据
|
||||
serviceType: 'RETURN_GOODS',
|
||||
num: 1
|
||||
},
|
||||
uploadList: [], // 上传列表
|
||||
action: commonUrl + '/common/upload/file', // 上传地址
|
||||
accessToken: {}, // 验证token
|
||||
visible: false, // 图片预览
|
||||
previewImage: '', // 预览图片url
|
||||
rules: { // 验证规则
|
||||
num: [{ validator: checkNum }],
|
||||
reason: [{ required: true, message: '请选择提交原因' }],
|
||||
problemDesc: [{ required: true, message: '请输入问题描述' }],
|
||||
bankAccountNumber: [
|
||||
{ required: true, message: '请输入银行卡号' },
|
||||
{
|
||||
type: 'string',
|
||||
pattern: /^([1-9]{1})(\d{14}|\d{18})$/,
|
||||
message: '请输入正确的银行卡号'
|
||||
}
|
||||
],
|
||||
bankAccountName: [{ required: true, message: '请输入银行开户名' }],
|
||||
bankDepositName: [{ required: true, message: '请输入银行开户行' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getInfo () {
|
||||
afterSaleInfo(this.$route.query.sn).then(res => {
|
||||
if (res.success) {
|
||||
this.info = res.result
|
||||
this.goodsData.push(res.result)
|
||||
}
|
||||
})
|
||||
},
|
||||
getReason (type) {
|
||||
afterSaleReason(type).then(res => {
|
||||
if (res.success) this.reasonList = res.result
|
||||
})
|
||||
},
|
||||
changeReason (type) {
|
||||
this.getReason(type)
|
||||
},
|
||||
apply () {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
let params = Object.assign(this.info, this.form)
|
||||
params.images = this.uploadList.toString()
|
||||
params.orderItemSn = this.$route.query.sn
|
||||
applyAfterSale(params).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('售后申请提交成功，请到售后订单查看！')
|
||||
this.$router.push({name: 'AfterSale'})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleView (name) {
|
||||
this.previewImage = name;
|
||||
this.visible = true;
|
||||
},
|
||||
handleRemove (index) {
|
||||
this.uploadList.splice(index, 1)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleSuccess (res, file) {
|
||||
this.uploadList.push(res.result)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleBeforeUpload () {
|
||||
const check = this.uploadList.length < 6;
|
||||
if (!check) {
|
||||
this.$Notice.warning({
|
||||
title: '最多可以上传5张图片'
|
||||
});
|
||||
return check;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
this.getInfo()
|
||||
this.getReason('RETURN_GOODS')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
/** 商品信息 */
|
||||
.order-price {
|
||||
text-align: right;
|
||||
margin-top: 30px;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
> div > span:nth-child(2) {
|
||||
width: 130px;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.actrual-price {
|
||||
color: $theme_color;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.demo-upload-list{
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.2);
|
||||
margin-right: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.demo-upload-list img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-upload-list-cover{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,.6);
|
||||
}
|
||||
.demo-upload-list:hover .demo-upload-list-cover{
|
||||
display: block;
|
||||
}
|
||||
.demo-upload-list-cover i{
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.icon-upload {
|
||||
width: 58px;
|
||||
height:58px;
|
||||
line-height: 58px;
|
||||
text-align:center;
|
||||
display: inline-block;
|
||||
border:1px dashed #999;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
border-color: $theme_color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
235
buyer/src/pages/home/orderCenter/Complain.vue
Normal file
235
buyer/src/pages/home/orderCenter/Complain.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
|
||||
<template>
|
||||
<div class="add-eval">
|
||||
<div class="title">
|
||||
<card _Title="商品投诉" :_Size="16"></card>
|
||||
<p>
|
||||
<span class="color999">订单号：</span><span>{{$route.query.sn}}</span>
|
||||
<span class="color999 ml_20" v-if="order.order">{{order.order.paymentTime}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<ul class="goods-eval">
|
||||
<li >
|
||||
<div class="goods-con">
|
||||
<img :src="orderGoods.image" class="hover-pointer" alt="" width="100" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">
|
||||
<p class="hover-pointer color999" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">{{orderGoods.goodsName}}</p>
|
||||
<p>{{orderGoods.goodsPrice | unitPrice('￥')}}</p>
|
||||
</div>
|
||||
|
||||
<div class="eval-con">
|
||||
<div>
|
||||
<span class="color999">投诉主题：</span>
|
||||
<Select v-model="form.complainTopic" style="width:260px;margin-bottom:10px">
|
||||
<Option v-for="item in reasonList" :value="item.reason" :key="item.id">{{ item.reason }}</Option>
|
||||
</Select>
|
||||
<Input type="textarea" maxlength="500" show-word-limit :rows="4" placeholder="请输入投诉内容" v-model="form.content" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;">
|
||||
<div class="demo-upload-list" v-for="(img, index) in orderGoods.uploadList" :key="index">
|
||||
<img :src="img">
|
||||
<div class="demo-upload-list-cover">
|
||||
<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
|
||||
<Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
|
||||
</div>
|
||||
</div>
|
||||
<Upload
|
||||
:show-upload-list="false"
|
||||
:on-success="handleSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:format="['jpg','jpeg','png']"
|
||||
:action="action"
|
||||
:headers="accessToken"
|
||||
style="display: inline-block;width:58px;">
|
||||
<div class="hover-pointer icon-upload" style="">
|
||||
<Icon type="ios-camera" size="20"></Icon>
|
||||
</div>
|
||||
</Upload>
|
||||
<div class="describe">上传投诉凭证，最多5张</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<Button type="primary" class="mt_10" :loading="loading" @click="save">提交</Button>
|
||||
<Modal title="View Image" v-model="visible">
|
||||
<img :src="previewImage" v-if="visible" style="width: 100%">
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { orderDetail } from '@/api/order.js';
|
||||
import { afterSaleReason, handleComplain } from '@/api/member.js';
|
||||
import { commonUrl } from '@/plugins/request.js';
|
||||
import storage from '@/plugins/storage';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
order: {}, // 订单详情
|
||||
orderGoods: {}, // 订单商品
|
||||
form: { // 投诉表单
|
||||
complainTopic: '',
|
||||
content: ''
|
||||
}, // 表单
|
||||
visible: false, // 图片预览
|
||||
action: commonUrl + '/common/upload/file', // 上传地址
|
||||
accessToken: {}, // 验证token
|
||||
previewImage: '', // 图片地址
|
||||
loading: false, // 加载状态
|
||||
reasonList: [] // 投诉原因
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getOrderDetail () {
|
||||
orderDetail(this.$route.query.sn).then(res => {
|
||||
this.order = res.result
|
||||
this.orderGoods = res.result.orderItems[this.$route.query.index]
|
||||
this.orderGoods.uploadList = []
|
||||
})
|
||||
afterSaleReason('COMPLAIN').then(res => {
|
||||
if (res.success) {
|
||||
this.reasonList = res.result
|
||||
this.$set(this.form, 'complainTopic', res.result[0].reason)
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
},
|
||||
save () {
|
||||
let params = {
|
||||
goodsId: this.orderGoods.goodsId,
|
||||
complainTopic: this.form.complainTopic,
|
||||
content: this.form.content,
|
||||
images: this.orderGoods.uploadList.toString(),
|
||||
orderSn: this.$route.query.sn,
|
||||
skuId: this.orderGoods.skuId
|
||||
}
|
||||
handleComplain(params).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('投诉申请已提交，感谢您的反馈')
|
||||
this.$router.push({name: 'ComplainList'})
|
||||
}
|
||||
})
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: {skuId, goodsId}
|
||||
})
|
||||
window.open(routerUrl.href, '_blank')
|
||||
},
|
||||
handleView (name) {
|
||||
this.previewImage = name;
|
||||
this.visible = true;
|
||||
},
|
||||
handleRemove (index) {
|
||||
this.orderGoods.uploadList.splice(index, 1)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleSuccess (res, file) {
|
||||
this.orderGoods.uploadList.push(res.result)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleBeforeUpload () {
|
||||
const check = this.orderGoods.uploadList.length < 6;
|
||||
if (!check) {
|
||||
this.$Notice.warning({
|
||||
title: '最多可以上传五张图片'
|
||||
});
|
||||
return check;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
this.getOrderDetail()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.delivery-rate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #eee;
|
||||
>div:nth-child(1) {
|
||||
width: 30%;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.goods-eval li{
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.goods-con {
|
||||
width: 30%;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
p {
|
||||
word-wrap: wrap;
|
||||
&:hover{ color: $theme_color; }
|
||||
}
|
||||
}
|
||||
.eval-con {
|
||||
width: 70%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-upload-list{
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.2);
|
||||
margin-right: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.demo-upload-list img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-upload-list-cover{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,.6);
|
||||
}
|
||||
.demo-upload-list:hover .demo-upload-list-cover{
|
||||
display: block;
|
||||
}
|
||||
.demo-upload-list-cover i{
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
margin: 0 2px;
|
||||
}
|
||||
.icon-upload {
|
||||
width: 58px;
|
||||
height:58px;
|
||||
line-height: 58px;
|
||||
text-align:center;
|
||||
display: inline-block;
|
||||
border:1px dashed #999;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
border-color: $theme_color;
|
||||
}
|
||||
}
|
||||
.describe{
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
position:relative;
|
||||
top: 46px;
|
||||
left: -60px;
|
||||
}
|
||||
</style>
|
||||
132
buyer/src/pages/home/orderCenter/MyAddress.vue
Normal file
132
buyer/src/pages/home/orderCenter/MyAddress.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div>
|
||||
<card _Title="收货地址" _More="添加新地址" _Src="/home/addAddress"></card>
|
||||
<div class="address-box" v-for="(item, index) in list" :key="index">
|
||||
<div class="address-header">
|
||||
<span
|
||||
>{{ item.name }}
|
||||
<Tag class="ml_10" v-if="item.isDefault" color="red">默认地址</Tag>
|
||||
<Tag class="ml_10" v-if="item.alias" color="warning">{{
|
||||
item.alias
|
||||
}}</Tag>
|
||||
</span>
|
||||
<div class="address-action">
|
||||
<span @click="edit(item.id)"><Icon type="edit"></Icon>修改</span>
|
||||
<span @click="del(item.id)"><Icon type="trash-a"></Icon>删除</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="address-content">
|
||||
<p>
|
||||
<span class="address-content-title"> 收 货 人 :</span> {{ item.name }}
|
||||
</p>
|
||||
<p>
|
||||
<span class="address-content-title">收货地区:</span
|
||||
>{{ item.consigneeAddressPath | unitAddress }}
|
||||
</p>
|
||||
<p>
|
||||
<span class="address-content-title">详细地址:</span> {{ item.detail }}
|
||||
</p>
|
||||
<p>
|
||||
<span class="address-content-title">手机号码:</span> {{ item.mobile }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import card from '@/components/card';
|
||||
import { memberAddress, delMemberAddress } from '@/api/address.js';
|
||||
|
||||
export default {
|
||||
name: 'MyAddress',
|
||||
|
||||
data () {
|
||||
return {
|
||||
list: [] // 地址列表
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
edit (id) {
|
||||
// 编辑地址
|
||||
this.$router.push({ path: '/home/addAddress', query: { id: id } });
|
||||
},
|
||||
del (id) {
|
||||
// 删除地址
|
||||
this.$Modal.confirm({
|
||||
title: '提示',
|
||||
content: '你确定删除这个收货地址',
|
||||
onOk: () => {
|
||||
delMemberAddress(id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('删除成功');
|
||||
this.getAddrList();
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel: () => {
|
||||
this.$Message.info('取消删除');
|
||||
}
|
||||
});
|
||||
},
|
||||
getAddrList () {
|
||||
// 获取地址列表
|
||||
memberAddress().then((res) => {
|
||||
console.log(res);
|
||||
if (res.code === 200) {
|
||||
this.list = res.result.records;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getAddrList();
|
||||
},
|
||||
components: {
|
||||
card
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.address-box {
|
||||
padding: 15px;
|
||||
margin: 15px;
|
||||
|
||||
border-bottom: 1px solid $border_color;
|
||||
}
|
||||
|
||||
.address-header {
|
||||
cursor: pointer;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@include title_color($light_title_color);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.address-content {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
|
||||
> p {
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.address-content-title {
|
||||
@include sub_color($light_sub_color);
|
||||
}
|
||||
|
||||
.address-action span {
|
||||
margin-left: 15px;
|
||||
font-size: 14px;
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#map-container {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
394
buyer/src/pages/home/orderCenter/MyOrder.vue
Normal file
394
buyer/src/pages/home/orderCenter/MyOrder.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- 卡片组件 -->
|
||||
<card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" v-if="!homePage"></card>
|
||||
<card _Title="我的订单" :_Size="16" :_Tabs="changeWay" @_Change="change" _More="全部订单" _Src="/home/MyOrder" v-else></card>
|
||||
<!-- 搜索 筛选 -->
|
||||
<div class="mb_20 box" v-if="!homePage">
|
||||
<div class="global_float_right" >
|
||||
<Input
|
||||
class="width_300"
|
||||
search
|
||||
enter-button
|
||||
v-model="params.keywords"
|
||||
@on-search="getList"
|
||||
placeholder="请输入订单号搜索"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 订单列表 -->
|
||||
<empty v-if="orderList.length === 0" />
|
||||
<div class="order-content" v-else>
|
||||
<div
|
||||
class="order-list"
|
||||
v-for="(order, onderIndex) in orderList"
|
||||
:key="onderIndex"
|
||||
>
|
||||
<div class="order-header">
|
||||
<div>
|
||||
<div>{{ filterOrderStatus(order.orderStatus) }}</div>
|
||||
<div>
|
||||
订单号：{{ order.sn }} {{order.createTime}}
|
||||
{{ order.memberName | secrecyMobile }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button @click="delOrder(order.sn)" class="del-btn mr_10 fontsize_16" style="margin-top:-5px;" type="text" icon="ios-trash-outline" size="small"></Button>
|
||||
<span>{{ order.flowPrice | unitPrice("￥") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-body">
|
||||
<div class="goods-list">
|
||||
<div
|
||||
v-for="(goods, goodsIndex) in order.orderItems"
|
||||
:key="goodsIndex"
|
||||
>
|
||||
<img
|
||||
@click="goodsDetail(goods.skuId, goods.goodsId)"
|
||||
class="hover-color"
|
||||
:src="goods.image"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<div class="hover-color" @click="goodsDetail(goods.skuId, goods.goodsId)">{{ goods.name }}</div>
|
||||
<div class="mt_10">
|
||||
<span class="global_color"
|
||||
>{{ goods.goodsPrice | unitPrice("￥") }} </span
|
||||
>x {{ goods.num }}
|
||||
</div>
|
||||
<Button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" style="position:relative;top:-22px;left:100px">评价</Button>
|
||||
<Button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" size="small" style="position:relative;top:-22px;left:110px">投诉</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span @click="shopPage(order.storeId)">{{ order.storeName }}</span
|
||||
> <Icon custom="iconfont icon-kefu" />
|
||||
</div>
|
||||
<div>
|
||||
<!-- 订单基础操作 -->
|
||||
<Button @click="orderDetail(order.sn)" size="small">订单详情</Button>
|
||||
<Button @click="handleCancelOrder(order.sn)" v-if="order.allowOperationVO.cancel" size="small">取消订单</Button>
|
||||
<Button @click="goPay(order.sn)" size="small" v-if="order.allowOperationVO.pay">去支付</Button>
|
||||
<Button @click="received(order.sn)" size="small" v-if="order.allowOperationVO.rog">确认收货</Button>
|
||||
<!-- 售后 -->
|
||||
<Button v-if="order.groupAfterSaleStatus.includes('NOT_APPLIED')" @click="applyAfterSale(order.orderItems)" size="small">申请售后</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Spin size="large" fix v-if="spinShow"></Spin>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="page-size" v-if="paging">
|
||||
<Page :total="total" @on-change="changePageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size="params.pageSize"
|
||||
show-sizer>
|
||||
</Page>
|
||||
</div>
|
||||
<!-- 选择售后商品 -->
|
||||
<Modal v-model="afterSaleModal" title="请选择申请售后的商品">
|
||||
<div>
|
||||
<Table
|
||||
border
|
||||
:columns="afterSaleColumns"
|
||||
:data="afterSaleArr"
|
||||
@on-row-click="afterSaleSelect"
|
||||
>
|
||||
</Table>
|
||||
</div>
|
||||
<div slot="footer"></div>
|
||||
</Modal>
|
||||
<Modal v-model="cancelAvail" title="请选择取消订单原因" @on-ok="sureCancel" @on-cancel="cancelAvail = false">
|
||||
<RadioGroup v-model="cancelParams.reason" vertical>
|
||||
<Radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
|
||||
{{item.reason}}
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getOrderList, sureReceived, cancelOrder, delOrder } from '@/api/order';
|
||||
import { afterSaleReason } from '@/api/member';
|
||||
import { orderStatusList } from '../enumeration.js'
|
||||
export default {
|
||||
name: 'MyOrder',
|
||||
props: {
|
||||
paging: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
homePage: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
orderList: [], // 订单列表
|
||||
params: { // 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
// orderStatus: 'ALL',
|
||||
keywords: '',
|
||||
tag: 'ALL'
|
||||
},
|
||||
cancelParams: { // 取消售后参数
|
||||
orderSn: '',
|
||||
reason: ''
|
||||
},
|
||||
// 状态数组
|
||||
orderStatusList,
|
||||
changeWay: ['全部订单', '待付款', '待收货', '已完成'], // 订单状态
|
||||
total: 0, // 数据总数
|
||||
spinShow: false, // 加载状态
|
||||
afterSaleModal: false, // 选择售后商品模态框
|
||||
afterSaleColumns: [ // 售后商品表头
|
||||
{title: '商品名称', key: 'name'},
|
||||
{title: '价格', key: 'goodsPrice'}
|
||||
],
|
||||
afterSaleArr: [], // 售后商品列表
|
||||
cancelAvail: false, // 取消订单modal控制
|
||||
cancelReason: [] // 取消订单原因
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
if (this.homePage) this.params.pageSize = 5;
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
goodsDetail (skuId, goodsId) {
|
||||
// 跳转商品详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId, goodsId }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
change (index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
this.params.tag = 'ALL'
|
||||
break;
|
||||
case 1:
|
||||
this.params.tag = 'WAIT_PAY'
|
||||
break;
|
||||
case 2:
|
||||
this.params.tag = 'WAIT_ROG'
|
||||
break;
|
||||
case 3:
|
||||
this.params.tag = 'COMPLETE'
|
||||
break;
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 跳转店铺首页
|
||||
shopPage (id) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/Merchant',
|
||||
query: { id: id }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
orderDetail (sn) {
|
||||
// 跳转订单详情
|
||||
this.$router.push({ name: 'OrderDetail', query: {sn} });
|
||||
},
|
||||
received (sn) { // 确认收货
|
||||
sureReceived(sn).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('确认收货成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
goPay (sn) { // 去支付
|
||||
this.$router.push({path: '/payment', query: {orderType: 'ORDER', sn}});
|
||||
},
|
||||
applyAfterSale (goodsItem) { // 申请售后
|
||||
let arr = []
|
||||
goodsItem.forEach(e => {
|
||||
if (e.afterSaleStatus === 'NOT_APPLIED') {
|
||||
arr.push(e)
|
||||
}
|
||||
});
|
||||
if (arr.length === 1) {
|
||||
this.$router.push({name: 'ApplyAfterSale', query: {sn: arr[0].sn}})
|
||||
} else {
|
||||
this.afterSaleArr = arr;
|
||||
this.afterSaleModal = true
|
||||
}
|
||||
},
|
||||
afterSaleSelect (item) {
|
||||
this.$router.push({name: 'ApplyAfterSale', query: {sn: item.sn}})
|
||||
},
|
||||
viewComment (sn) { // 查看评价
|
||||
|
||||
},
|
||||
comment (sn, goodsIndex) { // 评价
|
||||
this.$router.push({path: '/home/addEval', query: {sn, index: goodsIndex}})
|
||||
},
|
||||
addComment (sn) { // 追加评价
|
||||
|
||||
},
|
||||
complain (sn, goodsIndex) { // 投诉
|
||||
this.$router.push({name: 'Complain', query: {sn, index: goodsIndex}})
|
||||
},
|
||||
complainResult (sn) { // 投诉结果
|
||||
|
||||
},
|
||||
delOrder (sn) {
|
||||
this.$Modal.confirm({
|
||||
title: '删除订单',
|
||||
content: '<p>确认删除当前订单吗？</p>',
|
||||
onOk: () => {
|
||||
delOrder(sn).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('删除成功');
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel: () => {}
|
||||
});
|
||||
},
|
||||
getList () {
|
||||
this.spinShow = true;
|
||||
let params = JSON.parse(JSON.stringify(this.params))
|
||||
if (params.orderStatus === 'ALL') {
|
||||
delete params.orderStatus
|
||||
}
|
||||
getOrderList(params).then(res => {
|
||||
this.spinShow = false
|
||||
if (res.success) {
|
||||
this.orderList = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
changePageNum (val) {
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
changePageSize (val) {
|
||||
this.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
handleCancelOrder (sn) {
|
||||
// 取消订单
|
||||
this.cancelParams.orderSn = sn;
|
||||
afterSaleReason('CANCEL').then(res => {
|
||||
if (res.success) {
|
||||
this.cancelReason = res.result;
|
||||
this.cancelAvail = true
|
||||
this.cancelParams.reason = this.cancelReason[0].reason
|
||||
}
|
||||
})
|
||||
},
|
||||
sureCancel () {
|
||||
cancelOrder(this.cancelParams).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('取消订单成功')
|
||||
this.getList()
|
||||
this.cancelAvail = false
|
||||
}
|
||||
})
|
||||
},
|
||||
filterOrderStatus (status) { // 获取订单状态中文
|
||||
const ob = this.orderStatusList.filter(e => { return e.status === status });
|
||||
return ob[0].name
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.box {
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-size {
|
||||
margin: 15px 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
/** 订单列表 */
|
||||
.order-list {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover{
|
||||
.del-btn{visibility: visible;}
|
||||
}
|
||||
.del-btn{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ddd;
|
||||
> div:nth-child(1) > div:nth-child(2) {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
.order-body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
padding: 10px;
|
||||
|
||||
.goods-list > div {
|
||||
width: 500px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
> div {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
span {
|
||||
color: #438cde;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
.ivu-icon {
|
||||
color: #ff8f23;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-child(3) {
|
||||
width: 100px;
|
||||
.ivu-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
242
buyer/src/pages/home/orderCenter/OrderDetail.vue
Normal file
242
buyer/src/pages/home/orderCenter/OrderDetail.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div class="order-detail" v-if="order.order">
|
||||
<card _Title="订单详情" :_Size="16"></card>
|
||||
<div class="order-card">
|
||||
<p class="global_color fontsize_18">{{ order.orderStatusValue }}</p>
|
||||
<p class="global_color">订单号：{{ order.order.sn }}</p>
|
||||
<div style="color:#999;" class="operation-time">操作时间：{{order.order.updateTime}}</div>
|
||||
<Steps class="progress" :current="progressList.length" direction="vertical">
|
||||
<Step
|
||||
:title="progress.message"
|
||||
:content="progress.createTime"
|
||||
v-for="(progress, index) in progressList"
|
||||
:key="index"
|
||||
></Step>
|
||||
</Steps>
|
||||
</div>
|
||||
<div class="order-card">
|
||||
<h3>收货人信息</h3>
|
||||
<p>收货人：{{order.order.consigneeName}}</p>
|
||||
<p>手机号码：{{order.order.consigneeMobile | secrecyMobile}}</p>
|
||||
<p>收货地址：{{order.order.consigneeAddressPath | unitAddress}} {{order.order.consigneeDetail}}</p>
|
||||
</div>
|
||||
<div class="order-card">
|
||||
<h3>付款信息</h3>
|
||||
<p>支付方式：在线支付</p>
|
||||
<p>付款状态：未付款</p>
|
||||
</div>
|
||||
<div class="order-card">
|
||||
<h3>配送信息</h3>
|
||||
<p>配送方式：{{order.deliveryMethodValue}}</p>
|
||||
<p>配送状态：{{order.deliverStatusValue}}</p>
|
||||
</div>
|
||||
<div class="order-card" v-if="order.order.receipt">
|
||||
<h3>发票信息</h3>
|
||||
<p>发票抬头：{{order.order.receiptVO.receiptTitle}}</p>
|
||||
<p>发票内容：{{order.order.receiptVO.receiptContent}}</p>
|
||||
<p v-if="order.order.receiptVO.taxpayerId">纳税人识别号：{{order.order.receiptVO.taxpayerId}}</p>
|
||||
</div>
|
||||
<!-- 订单商品 -->
|
||||
<div class="goods">
|
||||
<div class="shop-name">
|
||||
<span @click="shopPage(order.order.storeId)">{{ order.order.storeName }}</span> <Icon custom="iconfont icon-kefu" />
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50%">商品</th>
|
||||
<!-- <th width="20%">属性</th> -->
|
||||
<th width="20%">货号</th>
|
||||
<!-- <th width="10%">发货仓库</th> -->
|
||||
<th width="10%">单价</th>
|
||||
<th width="10%">数量</th>
|
||||
<th width="10%">小计</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(goods, goodsIndex) in order.orderItems" :key="goodsIndex">
|
||||
<td>
|
||||
<img @click="goodsDetail(goods.id, goods.goodsId)" :src="goods.image" alt="" />
|
||||
<div>
|
||||
<p @click="goodsDetail(goods.id, goods.goodsId)" class="hover-color">
|
||||
{{ goods.goodsName }}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ goods.id }}</td>
|
||||
<td>{{ goods.goodsPrice | unitPrice }}</td>
|
||||
<td>{{ goods.num }}</td>
|
||||
<td>{{ (goods.goodsPrice * goods.num) | unitPrice }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- 订单价格 -->
|
||||
<div class="order-price">
|
||||
<div>
|
||||
<span>商品件数：</span><span>{{ order.order.goodsNum }}件</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>商品总价：</span><span>{{ order.order.goodsPrice | unitPrice("￥") }}</span><br>
|
||||
</div>
|
||||
<div>
|
||||
<span>运费：</span><span>+{{ order.order.freightPrice | unitPrice("￥") }}</span><br>
|
||||
</div>
|
||||
<div><span>优惠金额：</span><span>-{{ order.order.discountPrice | unitPrice("￥") }}</span></div>
|
||||
<div>
|
||||
<span>应付金额：</span
|
||||
><span class="actrual-price">{{ order.order.flowPrice | unitPrice("￥") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import card from '@/components/card';
|
||||
import { orderDetail, getTraces } from '@/api/order.js';
|
||||
export default {
|
||||
components: { card },
|
||||
name: 'order-detail',
|
||||
data () {
|
||||
return {
|
||||
order: {}, // 订单详情数据
|
||||
progressList: [], // 订单流程
|
||||
logistics: [] // 物流数据
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goodsDetail (skuId, goodsId) {
|
||||
// 跳转商品详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId, goodsId }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
// 跳转店铺首页
|
||||
shopPage (id) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/Merchant',
|
||||
query: { id: id }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
getDetail () { // 订单详情
|
||||
orderDetail(this.$route.query.sn).then(res => {
|
||||
if (res.success) {
|
||||
this.order = res.result;
|
||||
this.progressList = res.result.orderLogs
|
||||
}
|
||||
})
|
||||
},
|
||||
traces () {
|
||||
getTraces(this.$route.query.sn).then(res => {
|
||||
if (res.success) {
|
||||
this.logistics = res.result
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getDetail()
|
||||
this.traces()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.order-card {
|
||||
padding: 10px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
position: relative;
|
||||
.global_color {
|
||||
color: $theme_color;
|
||||
}
|
||||
p {
|
||||
color: #999;
|
||||
margin: 3px;
|
||||
}
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
}
|
||||
.operation-time {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
/** 店铺名称 */
|
||||
.shop-name {
|
||||
margin: 15px 0;
|
||||
span {
|
||||
color: #438cde;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
.ivu-icon {
|
||||
color: #ff8f23;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 商品列表 */
|
||||
table {
|
||||
border: 1px solid #ddd;
|
||||
color: #999;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
tr {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
thead > tr {
|
||||
height: 40px;
|
||||
background: #eee;
|
||||
}
|
||||
td {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 订单价格 */
|
||||
.order-price {
|
||||
text-align: right;
|
||||
margin-top: 30px;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
> div > span:nth-child(2) {
|
||||
width: 130px;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.actrual-price {
|
||||
color: $theme_color;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/** 订单进度条 */
|
||||
.progress {
|
||||
margin: 15px 0;
|
||||
}
|
||||
</style>
|
||||
32
buyer/src/pages/home/userCenter/Coupons.vue
Normal file
32
buyer/src/pages/home/userCenter/Coupons.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="优惠券列表" />
|
||||
<Coupon/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Coupon from '@/components/coupon/Coupon.vue'
|
||||
export default {
|
||||
name: 'Coupons',
|
||||
data () {
|
||||
return {
|
||||
couponsList: [ // 优惠券状态
|
||||
'未使用',
|
||||
'已使用',
|
||||
'已过期',
|
||||
'即将到期'
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {Coupon},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
451
buyer/src/pages/home/userCenter/MoneyManagement.vue
Normal file
451
buyer/src/pages/home/userCenter/MoneyManagement.vue
Normal file
@@ -0,0 +1,451 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="资金管理" />
|
||||
|
||||
<div class="box">
|
||||
<div class="mb_20 account-price">
|
||||
<span class="subTips">账户余额：</span>
|
||||
<span class="global_color mr_10" style="font-size:26px">￥{{ memberDeposit | unitPrice }}</span>
|
||||
<span class="subTips">冻结金额：</span>
|
||||
<span class="">￥{{ frozenDeposit | unitPrice}}</span>
|
||||
</div>
|
||||
<div class="account-btns">
|
||||
<Button type="primary" @click="recharge">在线充值</Button>
|
||||
<Button @click="withdrawalApply">申请提现</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Modal v-model="modal" width="530">
|
||||
<p slot="header">
|
||||
<Icon type="edit"></Icon>
|
||||
<span>充值金额</span>
|
||||
</p>
|
||||
<div>
|
||||
<Form
|
||||
ref="formData"
|
||||
:model="formData"
|
||||
label-position="left"
|
||||
:label-width="100"
|
||||
:rules="formValidate"
|
||||
>
|
||||
<FormItem label="充值金额" prop="price">
|
||||
<Input v-model="formData.price" size="large" number maxlength="9"
|
||||
><span slot="append">元</span></Input>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div slot="footer" style="text-align: center">
|
||||
<Button type="success" size="large" @click="rechargePrice">充值</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 提现申请 -->
|
||||
<Modal v-model="withdrawApplyModal" width="530">
|
||||
<p slot="header">
|
||||
<Icon type="edit"></Icon>
|
||||
<span>提现金额</span>
|
||||
</p>
|
||||
<div>
|
||||
<Form
|
||||
ref="withdrawApplyFormData"
|
||||
:model="withdrawApplyFormData"
|
||||
label-position="left"
|
||||
:label-width="100"
|
||||
:rules="withdrawApplyFormValidate"
|
||||
>
|
||||
<FormItem label="提现金额" prop="price">
|
||||
<Input
|
||||
v-model="withdrawApplyFormData.price"
|
||||
size="large"
|
||||
number
|
||||
maxlength="9"
|
||||
><span slot="append">元</span></Input>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div slot="footer" style="text-align: center">
|
||||
<Button type="success" size="large" @click="withdrawal">提现</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 余额日志 -->
|
||||
<Tabs value="log" @on-click="tabPaneChange">
|
||||
<TabPane label="余额日志" name="log">
|
||||
<Table :columns="logColumns" :data="logColumnsData.records"></Table>
|
||||
<!-- 分页 -->
|
||||
<div class="page-size">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="logColumnsData.total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
></Page>
|
||||
</div>
|
||||
</TabPane>
|
||||
<!-- 充值记录 -->
|
||||
<TabPane label="充值记录" name="recharge">
|
||||
<Table
|
||||
:columns="rechargeListColumns"
|
||||
:data="rechargeListData.records"
|
||||
></Table>
|
||||
<!-- 分页 -->
|
||||
<div class="page-size">
|
||||
<Page
|
||||
:current="rechargeSearchForm.pageNumber"
|
||||
:total="rechargeListData.total"
|
||||
:page-size="rechargeSearchForm.pageSize"
|
||||
@on-change="rechargeChangePage"
|
||||
@on-page-size-change="rechargeChangePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
></Page>
|
||||
</div>
|
||||
</TabPane>
|
||||
|
||||
<TabPane label="提现记录" name="withdrawApply">
|
||||
<Table
|
||||
:columns="withdrawApplyColumns"
|
||||
:data="withdrawApplyColumnsListData.records"
|
||||
></Table>
|
||||
<!-- 分页 -->
|
||||
<div class="page-size">
|
||||
<Page
|
||||
:current="withdrawApplySearchForm.pageNumber"
|
||||
:total="withdrawApplyColumnsListData.total"
|
||||
:page-size="withdrawApplySearchForm.pageSize"
|
||||
@on-change="withdrawChangePage"
|
||||
@on-page-size-change="withdrawChangePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
></Page>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import card from '@/components/card';
|
||||
import {
|
||||
getMembersWallet,
|
||||
getDepositLog,
|
||||
getRecharge,
|
||||
getWithdrawApply,
|
||||
recharge,
|
||||
withdrawalApply
|
||||
} from '@/api/member';
|
||||
export default {
|
||||
name: 'MoneyManagement',
|
||||
data () {
|
||||
return {
|
||||
frozenDeposit: 0, // 冻结余额
|
||||
memberDeposit: 0, // 余额
|
||||
|
||||
modal: false, // 余额充值
|
||||
withdrawApplyModal: false, // 提现申请
|
||||
formData: {
|
||||
// 充值金额
|
||||
price: 1
|
||||
},
|
||||
// 提现金额
|
||||
withdrawApplyFormData: {
|
||||
price: 1
|
||||
},
|
||||
// 余额日志
|
||||
searchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
// 充值记录
|
||||
rechargeSearchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10 // 页面大小
|
||||
},
|
||||
// 提现记录
|
||||
withdrawApplySearchForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10 // 页面大小
|
||||
},
|
||||
// 提现申请校验
|
||||
withdrawApplyFormValidate: {
|
||||
price: [
|
||||
{ required: true, message: '请输入大于0小于9999的合法提现金额' },
|
||||
{
|
||||
pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
|
||||
message: '请输入大于0小于9999的合法提现金额',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
formValidate: {
|
||||
price: [
|
||||
{ required: true, message: '请输入大于0小于9999的合法充值金额' },
|
||||
{
|
||||
pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
|
||||
message: '请输入大于0小于9999的合法充值金额',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 余额日志
|
||||
logColumns: [
|
||||
{
|
||||
title: '时间',
|
||||
key: 'createTime'
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
key: 'money',
|
||||
render: (h, params) => {
|
||||
if (params.row.money > 0) {
|
||||
return h('div', [
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
color: 'green'
|
||||
}
|
||||
},
|
||||
params.row.money
|
||||
)
|
||||
]);
|
||||
} else if (params.row.money < 0) {
|
||||
return h('div', [
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
color: 'red'
|
||||
}
|
||||
},
|
||||
params.row.money
|
||||
)
|
||||
]);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '变动日志',
|
||||
key: 'detail'
|
||||
}
|
||||
],
|
||||
logColumnsData: {}, // 余额日志
|
||||
// 充值记录
|
||||
rechargeListColumns: [
|
||||
{
|
||||
title: '支付单号',
|
||||
key: 'rechargeSn',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '支付方式',
|
||||
key: 'rechargeWay'
|
||||
},
|
||||
{
|
||||
title: '充值金额',
|
||||
key: 'rechargeMoney'
|
||||
},
|
||||
{
|
||||
title: '支付状态',
|
||||
key: 'payStatus',
|
||||
render: (h, params) => {
|
||||
if (params.row.payStatus === 'PAID') {
|
||||
return h('div', [h('span', {}, '已付款')]);
|
||||
} else if (params.row.payStatus === 'UNPAID') {
|
||||
return h('div', [h('span', {}, '未付款')]);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '支付时间',
|
||||
key: 'payTime'
|
||||
}
|
||||
],
|
||||
rechargeListData: {}, // 充值记录数据
|
||||
// 提现记录
|
||||
withdrawApplyColumns: [
|
||||
{
|
||||
title: '提现单号',
|
||||
key: 'sn',
|
||||
width: 215
|
||||
},
|
||||
{
|
||||
title: '提现金额',
|
||||
key: 'applyMoney',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '提现状态',
|
||||
key: 'applyStatus',
|
||||
render: (h, params) => {
|
||||
if (params.row.applyStatus === 'APPLY') {
|
||||
return h('div', [h('span', {}, '申请中')]);
|
||||
} else if (params.row.applyStatus === 'VIA_AUDITING') {
|
||||
return h('div', [h('span', {}, '提现成功')]);
|
||||
} else {
|
||||
return h('div', [h('span', {}, '审核未通过')]);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '提现时间',
|
||||
key: 'inspectTime'
|
||||
},
|
||||
{
|
||||
title: '审核备注',
|
||||
key: 'inspectRemark'
|
||||
}
|
||||
],
|
||||
withdrawApplyColumnsListData: {} // 提现记录
|
||||
};
|
||||
},
|
||||
components: { card },
|
||||
mounted () {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
getMembersWallet().then((res) => {
|
||||
this.frozenDeposit = res.result.memberFrozenWallet;
|
||||
this.memberDeposit = res.result.memberWallet;
|
||||
});
|
||||
getDepositLog(this.searchForm).then((res) => {
|
||||
if (res.message === 'success') {
|
||||
this.logColumnsData = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
tabPaneChange (v) {
|
||||
// 如果查询充值记录
|
||||
if (v === 'recharge') {
|
||||
this.getRechargeData();
|
||||
}
|
||||
// 如果是余额日志
|
||||
if (v === 'log') {
|
||||
this.init();
|
||||
}
|
||||
// 如果是提现记录
|
||||
if (v === 'withdrawApply') {
|
||||
this.getWithdrawApplyData();
|
||||
}
|
||||
},
|
||||
// 充值记录
|
||||
getRechargeData () {
|
||||
getRecharge(this.rechargeSearchForm).then((res) => {
|
||||
if (res.message === 'success') {
|
||||
this.rechargeListData = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 提现记录
|
||||
getWithdrawApplyData () {
|
||||
getWithdrawApply(this.withdrawApplySearchForm).then((res) => {
|
||||
if (res.message === 'success') {
|
||||
this.withdrawApplyColumnsListData = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 余额日志
|
||||
changePage (v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.init();
|
||||
},
|
||||
changePageSize (v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.init();
|
||||
},
|
||||
// 充值记录
|
||||
rechargeChangePage (v) {
|
||||
this.rechargeSearchForm.pageNumber = v;
|
||||
this.getRechargeData();
|
||||
},
|
||||
rechargeChangePageSize (v) {
|
||||
this.rechargeSearchForm.pageSize = v;
|
||||
this.getRechargeData();
|
||||
},
|
||||
// 提现记录
|
||||
withdrawChangePage (v) {
|
||||
this.withdrawApplySearchForm.pageNumber = v;
|
||||
this.getWithdrawApplyData();
|
||||
},
|
||||
withdrawChangePageSize (v) {
|
||||
this.withdrawApplySearchForm.pageSize = v;
|
||||
this.getWithdrawApplyData();
|
||||
},
|
||||
// 弹出在线充值框
|
||||
recharge () {
|
||||
this.formData.price = 1;
|
||||
this.modal = true;
|
||||
},
|
||||
// 在线充值
|
||||
rechargePrice () {
|
||||
this.$refs['formData'].validate((valid) => {
|
||||
if (valid) {
|
||||
recharge(this.formData).then((res) => {
|
||||
if (res.message === 'success') {
|
||||
// TODO 根据返回的值跳转到收银台进行支付,一下是输出sn
|
||||
console.warn(res.result.rechargeSn);
|
||||
this.modal = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 申请提现弹出框
|
||||
withdrawalApply () {
|
||||
this.withdrawApplyFormData.price = 1;
|
||||
this.withdrawApplyModal = true;
|
||||
},
|
||||
withdrawal () {
|
||||
this.$refs['withdrawApplyFormData'].validate((valid) => {
|
||||
if (valid) {
|
||||
withdrawalApply(this.withdrawApplyFormData).then((res) => {
|
||||
if (res && res.success) {
|
||||
this.$Message.success('提现申请成功，关注提现状态');
|
||||
this.withdrawApplyModal = false;
|
||||
this.init(); // 余额查询
|
||||
this.getWithdrawApplyData(); // 提现记录
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.page-size {
|
||||
margin: 15px 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.account-price {
|
||||
font-weight: bold;
|
||||
}
|
||||
.subTips {
|
||||
@include sub_color($light_sub_color);
|
||||
}
|
||||
.account-btns {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.ivu-btn {
|
||||
margin: 0 4px;
|
||||
}
|
||||
.fontsize_48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
</style>
|
||||
142
buyer/src/pages/home/userCenter/MyTracks.vue
Normal file
142
buyer/src/pages/home/userCenter/MyTracks.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- 卡片组件 -->
|
||||
<card _Title="我的足迹" :_Size="16" ></card>
|
||||
<Button class="del-btn" @click="clearAll" type="primary">删除全部</Button>
|
||||
<!-- 订单列表 -->
|
||||
<empty v-if="list.length === 0" />
|
||||
<ul class="track-list" v-else>
|
||||
<li v-for="(item, index) in list" :key="index" @click="goodsDetail(item.id, item.goodsId)">
|
||||
<img :src="item.thumbnail" :alt="item.thumbnail" width="200" height="200">
|
||||
<p class="ellipsis">{{item.goodsName}}</p>
|
||||
<p>{{item.price | unitPrice('￥')}}</p>
|
||||
<span class="del-icon" @click.stop="clearById(item.goodsId)">
|
||||
<Icon type="md-trash" />
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { tracksList, clearTracks, clearTracksById } from '@/api/member';
|
||||
export default {
|
||||
name: 'MyTrack',
|
||||
data () {
|
||||
return {
|
||||
list: [], // 我的足迹，商品列表
|
||||
spinShow: false // 控制loading是否加载
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
goodsDetail (skuId, goodsId) {
|
||||
// 跳转商品详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId, goodsId }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
// 跳转店铺首页
|
||||
shopPage (id) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/Merchant',
|
||||
query: { id: id }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
clearAll () { // 清除全部足迹
|
||||
this.$Modal.confirm({
|
||||
title: '删除',
|
||||
content: '<p>确定要删除全部足迹吗？</p>',
|
||||
onOk: () => {
|
||||
clearTracks().then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('删除成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel: () => { }
|
||||
});
|
||||
},
|
||||
clearById (id) { // 清除全部足迹
|
||||
clearTracksById(id).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('删除成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
getList () {
|
||||
this.spinShow = true;
|
||||
tracksList(this.params).then(res => {
|
||||
this.spinShow = false
|
||||
if (res.success && res.result) {
|
||||
this.list = res.result;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.del-btn {
|
||||
margin: 0 0 10px 15px;
|
||||
}
|
||||
|
||||
.track-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li{
|
||||
width: 200px;
|
||||
overflow: hidden;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eee;
|
||||
position: relative;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
box-shadow:1px 1px 3px #999;
|
||||
.del-icon{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
p{
|
||||
padding: 0 5px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
p:nth-child(2) {
|
||||
color: #999;
|
||||
}
|
||||
p:nth-child(3){
|
||||
color: $theme_color;
|
||||
}
|
||||
.del-icon {
|
||||
display: none;
|
||||
font-size: 30px;
|
||||
background-color:rgba(0,0,0,.3);
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-size {
|
||||
margin: 15px 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
757
buyer/src/pages/payment/Pay.vue
Normal file
757
buyer/src/pages/payment/Pay.vue
Normal file
@@ -0,0 +1,757 @@
|
||||
<template>
|
||||
<div class="pay-order">
|
||||
<BaseHeader></BaseHeader>
|
||||
<!-- LOGO 步骤条 -->
|
||||
<div class="width_1200 logo">
|
||||
<div>
|
||||
<router-link to="/"><img :src="logoImg" alt="lili shop" title="lilishop"></router-link>
|
||||
<div>结算页</div>
|
||||
</div>
|
||||
<div class="cart-steps">
|
||||
<span :class="stepIndex==1?'active':''">1.我的购物车</span>
|
||||
<Icon :class="stepIndex==1?'active-arrow':''" custom="iconfont icon-xiayibu"></Icon>
|
||||
<span :class="stepIndex==1?'active':''">2.填写订单信息</span>
|
||||
<Icon :class="stepIndex==1?'active-arrow':''" custom="iconfont icon-xiayibu"></Icon>
|
||||
<span :class="stepIndex==2?'active':''">3.成功提交订单</span>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
<div class="content width_1200">
|
||||
<!-- 收货地址 -->
|
||||
<div class="address">
|
||||
<div class="card-head">
|
||||
<span>收货人信息</span>
|
||||
<span @click="goAddressManage">管理收货人地址</span>
|
||||
</div>
|
||||
<div class="address-manage">
|
||||
<div class="address-item" v-show="moreAddr ? true : index < 3" :class="selectedAddress.id === item.id?'border-red':''" @mouseenter="showEditBtn = index" @mouseleave="showEditBtn = ''" @click="selectAddress(item)" v-for="(item,index) in addressList" :key="index">
|
||||
<div>
|
||||
<span>{{item.name}}</span>
|
||||
<Tag class="ml_10" v-if="item.isDefault" color="red">默认</Tag>
|
||||
<Tag class="ml_10" v-if="item.alias" color="warning">{{item.alias}}</Tag>
|
||||
</div>
|
||||
<div>{{item.mobile}}</div>
|
||||
<div>{{ item.consigneeAddressPath | unitAddress }} {{item.detail}}</div>
|
||||
<div class="edit-btn" v-show="showEditBtn === index">
|
||||
<span @click.stop="editAddress(item.id)">修改</span>
|
||||
<span class="ml_10" v-if="!item.isDefault" @click.stop="delAddress(item)">删除</span>
|
||||
</div>
|
||||
<div class="corner-icon" v-show="selectedAddress.id === item.id">
|
||||
<div></div>
|
||||
<Icon type="md-checkmark" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-address" @click="editAddress('')">
|
||||
<Icon type="ios-add-circle-outline" />
|
||||
<div>添加新地址</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="more-addr" @click="moreAddr = !moreAddr" v-if="addressList.length>3">
|
||||
{{moreAddr ? '收起地址' : '更多地址'}}
|
||||
<Icon v-show="!moreAddr" type="md-arrow-dropdown" />
|
||||
<Icon v-show="moreAddr" type="md-arrow-dropup" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 商品信息 -->
|
||||
<div class="goods-content">
|
||||
<div class="card-head mt_20 mb_20">
|
||||
<span>商品信息</span>
|
||||
<span @click="$router.push('/cart')">返回购物车</span>
|
||||
</div>
|
||||
<div class="goods-msg" v-for="(shop,shopIndex) in goodsList" :key="shopIndex">
|
||||
<div class="shop-name">
|
||||
<span>
|
||||
<span class="hover-color" @click="goShopPage(shop.storeId)">{{shop.storeName}}</span>
|
||||
<Icon class="hover-color" custom="iconfont icon-kefu" />
|
||||
</span>
|
||||
<span>
|
||||
<p style="width:120px">配送方式：</p>
|
||||
<Select v-model="shop.deliveryMethod" size="small">
|
||||
<Option v-for="item in deliveryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</span>
|
||||
</div>
|
||||
<div class="goods-list">
|
||||
<div class="goods-item" v-for="(goods,goodsIndex) in shop.skuList" :key="goodsIndex">
|
||||
<span class="hover-color" @click="goGoodsDetail(goods.goodsSku.id, goods.goodsSku.goodsId)">
|
||||
<img :src="goods.goodsSku.thumbnail" alt="">
|
||||
<span style="vertical-align:top;">{{goods.goodsSku.goodsName}}</span>
|
||||
</span>
|
||||
<span class="goods-price">{{goods.goodsSku.price | unitPrice('￥')}}</span>
|
||||
<span>x{{goods.num}}</span>
|
||||
<span>{{goods.goodsSku.quantity > 0 ? '有货' : '无货'}}</span>
|
||||
<span class="goods-price">{{goods.goodsSku.price * goods.num | unitPrice('￥')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-mark">
|
||||
<Input type="textarea" maxlength="60" v-model="shop.remark" show-word-limit placeholder="订单备注" />
|
||||
<span style="font-size:12px;color:#999;">提示：请勿填写有关支付、收货、发票方面的信息</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 发票信息 -->
|
||||
<div class="invoice">
|
||||
<div class="card-head mt_20 mb_20">
|
||||
<span class="relative">发票信息<span class="inv-tips"><Icon type="ios-alert-outline" />开企业抬头发票须填写纳税人识别号，以免影响报销</span></span>
|
||||
</div>
|
||||
<div class="inovice-content">
|
||||
<span>{{invoiceData.receiptTitle}}</span>
|
||||
<span>{{invoiceData.receiptContent}}</span>
|
||||
<span @click="editInvoice">编辑</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 优惠券 -->
|
||||
<div class="invoice">
|
||||
<div class="card-head mt_20 mb_20">
|
||||
<span class="relative">优惠券</span>
|
||||
</div>
|
||||
<div v-if="couponList.length === 0">
|
||||
无可用优惠券
|
||||
</div>
|
||||
<ul v-else class="coupon-list">
|
||||
<li v-for="(item, index) in couponList" 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)}}</p>
|
||||
<p>有效期：{{item.endTime}}</p>
|
||||
</div>
|
||||
<b></b>
|
||||
<a class="c-right" @click="useCoupon(item.id)">立即使用</a>
|
||||
<i class="circle-top"></i>
|
||||
<i class="circle-bottom"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 其他信息 -->
|
||||
<div class="other" v-if="$route.query.way === 'POINT'">
|
||||
<div class="card-head mt_20 mb_20">
|
||||
<span>其他信息</span>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>使用积分：</span><Input type="text" style="width:100px;" v-model.number="otherMsgForm.point" placeholder="请输入使用积分" /> <span style="color:#999;">您当前的可用积分为 {{otherMsgForm.totalPoint}} ，本订单最多可以使用{{otherMsgForm.availablePoint}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 订单价格 -->
|
||||
<div class="order-price">
|
||||
<div>
|
||||
<span>{{totalNum}}件商品，总商品金额：</span><span>{{priceDetailDTO.goodsPrice | unitPrice('￥')}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>运费：</span><span>{{ priceDetailDTO.freightPrice | unitPrice('￥')}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>优惠金额：</span><span>-{{ priceDetailDTO.discountPrice + priceDetailDTO.couponPrice + priceDetailDTO.updatePrice | unitPrice('￥')}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>应付金额：</span><span class='actrual-price'>{{priceDetailDTO.billPrice | unitPrice('￥')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 底部支付栏 -->
|
||||
<div class="order-footer width_1200">
|
||||
<div class="pay ml_20" @click="pay">提交订单</div>
|
||||
<div class="pay-address" v-if="addressList.length">配送至：{{ selectedAddress.consigneeAddressPath | unitAddress }} {{selectedAddress.detail}} 收货人：{{selectedAddress.name}} {{selectedAddress.mobile}}</div>
|
||||
</div>
|
||||
<BaseFooter></BaseFooter>
|
||||
<!-- 添加发票模态框 -->
|
||||
<invoice-modal ref="invModal" @change="getInvMsg" />
|
||||
<!-- 选择地址模态框 -->
|
||||
<address-manage ref="address" :id="addrId" @change="addrChange"></address-manage>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import invoiceModal from '@/components/invoiceModal';
|
||||
import addressManage from '@/components/addressManage';
|
||||
import {memberAddress, delMemberAddress} from '@/api/address';
|
||||
import {cartGoodsPay, createTrade, selectAddr, shippingMethod, receiptSelect, selectCoupon, couponNum} from '@/api/cart';
|
||||
import { canUseCouponList } from '@/api/member.js';
|
||||
import {getLogo} from '@/api/common.js'
|
||||
export default {
|
||||
name: 'Pay',
|
||||
components: { invoiceModal, addressManage },
|
||||
data () {
|
||||
return {
|
||||
stepIndex: 1, // 顶部步骤条状态
|
||||
invoiceAvailable: false, // 发票编辑按钮
|
||||
showEditBtn: '', // 鼠标移入显示编辑按钮
|
||||
orderMark: '', // 订单备注
|
||||
invoiceData: { // 发票数据
|
||||
receiptTitle: '个人',
|
||||
receiptContent: '不开发票'
|
||||
},
|
||||
otherMsgForm: { // 其他信息模块数据
|
||||
point: 0,
|
||||
availablePoint: 10,
|
||||
totalPoint: 100,
|
||||
noGoods: 0
|
||||
},
|
||||
deliveryList: [ // 物流
|
||||
// {value: 'SELF_PICK_UP', label: '自提'},
|
||||
{value: 'LOGISTICS', label: '物流'}
|
||||
// {value: 'LOCAL_TOWN_DELIVERY', label: '同城配送'}
|
||||
],
|
||||
addressList: [], // 地址列表
|
||||
selectedAddress: {}, // 所选地址的id
|
||||
goodsList: [], // 商品列表
|
||||
priceDetailDTO: {}, // 商品价格
|
||||
totalNum: 0, // 购买数量
|
||||
addrId: '', // 编辑地址传入的id
|
||||
moreAddr: false, // 更多地址
|
||||
canUseCouponNum: 0, // 可用优惠券数量
|
||||
couponList: [], // 可用优惠券列表
|
||||
logoImg: '' // 平台logo
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.init();
|
||||
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')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
this.getGoodsDetail();
|
||||
this.getAddress();
|
||||
},
|
||||
goAddressManage () { // 跳转地址管理页面
|
||||
this.$router.push('/home/MyAddress');
|
||||
},
|
||||
getAddress () { // 获取收货地址列表
|
||||
memberAddress().then(res => {
|
||||
if (res.success) {
|
||||
this.addressList = res.result.records;
|
||||
this.addressList.forEach((e) => {
|
||||
if (e.isDefault) this.selectedAddress = e;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
getGoodsDetail () { // 订单商品详情
|
||||
this.$Spin.show();
|
||||
cartGoodsPay({way: this.$route.query.way}).then(res => {
|
||||
this.$Spin.hide();
|
||||
if (res.success) {
|
||||
this.goodsList = res.result.cartList;
|
||||
this.priceDetailDTO = res.result.priceDetailDTO;
|
||||
this.skuList = res.result.skuList;
|
||||
this.totalNum = 0;
|
||||
for (let i = 0; i < this.skuList.length; i++) {
|
||||
this.totalNum += this.skuList[i].num;
|
||||
}
|
||||
this.getCouponNum()
|
||||
}
|
||||
}).catch(() => { this.$Spin.hide(); });
|
||||
},
|
||||
getCouponNum () { // 获取可用优惠券数量
|
||||
couponNum({way: this.$route.query.way}).then(res => {
|
||||
this.canUseCouponNum = res.result
|
||||
if (res.result) {
|
||||
let storeArr = []
|
||||
let skuArr = []
|
||||
this.goodsList.forEach(e => {
|
||||
storeArr.push(e.storeId)
|
||||
e.skuList.forEach(i => {
|
||||
skuArr.push(i.goodsSku.id)
|
||||
})
|
||||
})
|
||||
let params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 100,
|
||||
memberCouponStatus: 'NEW',
|
||||
scopeId: skuArr.toString(),
|
||||
storeId: storeArr.toString(),
|
||||
totalPrice: this.priceDetailDTO.goodsPrice
|
||||
}
|
||||
canUseCouponList(params).then(res => {
|
||||
if (res.success) this.couponList = res.result.records
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
selectAddress (item) { // 选择地址
|
||||
let params = {
|
||||
way: this.$route.query.way,
|
||||
shippingAddressId: item.id
|
||||
};
|
||||
selectAddr(params).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('选择收货地址成功');
|
||||
this.selectedAddress = item;
|
||||
this.getGoodsDetail();
|
||||
}
|
||||
});
|
||||
},
|
||||
editAddress (id) { // 编辑地址
|
||||
this.addrId = id;
|
||||
this.$refs.address.show();
|
||||
},
|
||||
addrChange (item) { // 添加，编辑地址回显
|
||||
this.getAddress();
|
||||
},
|
||||
delAddress (item) {
|
||||
// 删除地址
|
||||
this.$Modal.confirm({
|
||||
title: '提示',
|
||||
content: '你确定删除这个收货地址',
|
||||
onOk: () => {
|
||||
delMemberAddress(item.id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success('删除成功');
|
||||
this.getAddress();
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel: () => {}
|
||||
});
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId, goodsId }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
// 跳转店铺首页
|
||||
goShopPage (id) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/Merchant',
|
||||
query: {id: id}
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
selectDelivery (delivery) { // 选择配送方式
|
||||
let params = {
|
||||
way: this.$route.query.way,
|
||||
shippingMethod: delivery.value
|
||||
};
|
||||
shippingMethod(params).then(res => {
|
||||
|
||||
});
|
||||
},
|
||||
useCoupon (id) { // 使用优惠券
|
||||
let params = {
|
||||
way: this.$route.query.way,
|
||||
memberCouponId: id,
|
||||
used: true
|
||||
}
|
||||
selectCoupon(params).then(res => {
|
||||
if (res.success) {
|
||||
this.init()
|
||||
}
|
||||
})
|
||||
},
|
||||
editInvoice () { // 编辑发票信息
|
||||
this.$refs.invModal.invoiceAvailable = true;
|
||||
},
|
||||
getInvMsg (item) { // 获取发票信息
|
||||
console.log(item);
|
||||
this.invoiceData = item;
|
||||
this.selectReceipt(item.id)
|
||||
},
|
||||
selectReceipt (id) { // 选择发票
|
||||
let params = {
|
||||
way: this.$route.query.way,
|
||||
receiptId: id
|
||||
}
|
||||
receiptSelect(params).then(res => {
|
||||
})
|
||||
},
|
||||
pay () { // 结算
|
||||
const params = {
|
||||
client: 'PC',
|
||||
remark: [],
|
||||
way: this.$route.query.way
|
||||
};
|
||||
this.goodsList.forEach(e => {
|
||||
if (e.remark) {
|
||||
params.remark.push({
|
||||
remark: e.remark,
|
||||
storeId: e.storeId
|
||||
})
|
||||
}
|
||||
})
|
||||
if (!params.remark.length) delete params.remark;
|
||||
this.$Spin.show();
|
||||
createTrade(params).then(res => {
|
||||
this.$Spin.hide();
|
||||
if (res.success) {
|
||||
this.$router.push({path: '/payment', query: {orderType: 'TRADE', sn: res.result.sn}});
|
||||
}
|
||||
});
|
||||
},
|
||||
useScope (type) {
|
||||
let goods = '全部商品'
|
||||
switch (type) {
|
||||
case 'ALL':
|
||||
goods = '全部商品'
|
||||
break;
|
||||
case 'PORTION_GOODS':
|
||||
goods = '部分商品'
|
||||
break;
|
||||
case 'PORTION_GOODS_CATEGORY':
|
||||
goods = '部分分类商品'
|
||||
break;
|
||||
}
|
||||
return `${goods}可用`
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../assets/styles/coupon.scss';
|
||||
/** logo start */
|
||||
.logo {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 20px auto 0;
|
||||
div:nth-child(1){
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 150px;
|
||||
height:auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
div:nth-child(2){
|
||||
width: 200px;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
margin: 0 20px;
|
||||
span{
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cart-steps{
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span{
|
||||
@include content_color($light_content_color);
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
display: inline-block;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.ivu-icon{
|
||||
@include content_color($light_content_color);
|
||||
font-size: 20px;
|
||||
margin:0 15px;
|
||||
}
|
||||
|
||||
.active{
|
||||
border-radius: 50px;
|
||||
background-color:#ff8f23;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.active-arrow{
|
||||
color: #ff8f23;
|
||||
}
|
||||
}
|
||||
/** logo end */
|
||||
/** content start */
|
||||
.content {
|
||||
margin: 20px auto;
|
||||
background-color: #fff;
|
||||
min-height: 200px;
|
||||
padding: 15px 25px;
|
||||
}
|
||||
/** 地址管理 */
|
||||
.address-manage{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
>div {
|
||||
border:1px dotted #949494;
|
||||
width: 265px;
|
||||
height: 120px;
|
||||
margin:20px 20px 0 0;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
}
|
||||
.add-address{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.ivu-icon{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.address-item{
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
>div:nth-child(1){
|
||||
margin-bottom: 10px;
|
||||
span{
|
||||
margin-right: 10px;
|
||||
}
|
||||
>span:nth-child(1){
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.edit-btn{
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 20px;
|
||||
color: $theme_color;
|
||||
span:hover{
|
||||
border-bottom: 1px solid $theme_color;
|
||||
}
|
||||
}
|
||||
.corner-icon{
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
div{
|
||||
width: 0;
|
||||
border-top: 20px solid transparent;
|
||||
border-right: 20px solid $theme_color;
|
||||
}
|
||||
.ivu-icon{
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 1px;
|
||||
transform: rotate(-15deg);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.border-red{
|
||||
border-color: $theme_color;
|
||||
}
|
||||
}
|
||||
/** 购买商品列表 start */
|
||||
.shop-name{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
>span:nth-child(1){
|
||||
font-weight: bold;
|
||||
.ivu-icon{
|
||||
color: #ff8f23;
|
||||
&:hover {color: $theme_color;}
|
||||
}
|
||||
}
|
||||
>span:nth-child(2){
|
||||
color: #999;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 200px;
|
||||
}
|
||||
.delivery-list{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 20px;
|
||||
background-color: #f3fafe;
|
||||
box-shadow: 0px 0px 5px #b9b2b2;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 200px;
|
||||
min-height: 100px;
|
||||
padding: 10px;
|
||||
li{
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-list{
|
||||
background-color: #f8f8f8;
|
||||
margin: 10px 0 20px 0;
|
||||
.goods-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
margin: 0 20px;
|
||||
border-bottom: 1px dotted #999;
|
||||
&:last-child{border:none;}
|
||||
img{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
>span{
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
}
|
||||
>span:nth-child(1) {
|
||||
font-size: 12px;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
>span:last-child{
|
||||
color: $theme_color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goods-price{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-mark{
|
||||
width: 500px;
|
||||
}
|
||||
/** 购买商品列表 end */
|
||||
/** 发票信息 start */
|
||||
.invoice{
|
||||
.inv-tips{
|
||||
position: absolute;
|
||||
border: 1px solid #ddd;
|
||||
width: 310px;
|
||||
padding: 3px;
|
||||
margin: 0 0 0 10px;
|
||||
font-size: 12px!important;
|
||||
box-shadow: 0 0 3px rgba(0,0,0,.15);
|
||||
&::before{
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 17px;
|
||||
background:url(../../assets/images/arrow-left.png) 0 0 no-repeat;
|
||||
background-color:#fff;
|
||||
position: absolute;
|
||||
left: -9px;
|
||||
}
|
||||
.ivu-icon{
|
||||
color: #ff8f23;
|
||||
margin-right: 3px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.inovice-content{
|
||||
>span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
>span:last-child{
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
&:hover{border-bottom: 1px solid $theme_color;}
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 发票信息 end */
|
||||
|
||||
/** 订单价格 */
|
||||
.order-price{
|
||||
text-align: right;
|
||||
margin-top: 30px;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
>div>span:nth-child(2){
|
||||
width: 130px;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.actrual-price{
|
||||
color: $theme_color;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
/** content end */
|
||||
/** 底部支付栏 */
|
||||
.order-footer {
|
||||
height: 50px;
|
||||
@include background_color($light_white_background_color);
|
||||
@include title_color($title_color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 10px auto;
|
||||
div{
|
||||
text-align: center;
|
||||
}
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
.pay {
|
||||
background-color: $theme_color;
|
||||
width: 150px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
line-height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
/** 公共表头 */
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
height: 40px;
|
||||
|
||||
span:nth-child(1){
|
||||
font-size: 18px;
|
||||
}
|
||||
span:nth-child(2){
|
||||
font-size: 12px;
|
||||
color: #438cde;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ivu-divider {
|
||||
background: $theme_color;
|
||||
height: 2px;
|
||||
}
|
||||
.pay-address{font-size: 12px;}
|
||||
.more-addr{
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
.coupon-item {
|
||||
width: 260px;
|
||||
height: 125px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
.c-right{
|
||||
width: 30px;
|
||||
padding: 10px 7px;
|
||||
}
|
||||
b{
|
||||
background: url('../../assets/images/small-circle.png') top left repeat-y;
|
||||
right: 28px;
|
||||
}
|
||||
.circle-top,.circle-bottom{
|
||||
right: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
32
buyer/src/pages/payment/PayDone.vue
Normal file
32
buyer/src/pages/payment/PayDone.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<BaseHeader></BaseHeader>
|
||||
<div class="pay-done-box">
|
||||
<img src="../../assets/images/pay-success.png">
|
||||
</div>
|
||||
<div class="pay-btn">
|
||||
<Button type="primary" @click="$router.push('/')">继续逛逛</Button>
|
||||
<Button type="info" @click="$router.push('home/myOrder')">查看订单</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PayDone'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pay-done-box {
|
||||
margin: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.pay-btn{
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
119
buyer/src/pages/payment/PayMent.vue
Normal file
119
buyer/src/pages/payment/PayMent.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<BaseHeader></BaseHeader>
|
||||
<div class="wrapper-head">
|
||||
<div class="head-left">
|
||||
<div class="left-tips">订单提交成功，请尽快付款！</div>
|
||||
<div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
|
||||
</div>
|
||||
<div class="head-right">
|
||||
<div>应付金额 <span class="price">{{payDetail.price | unitPrice}}</span>元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper-box">
|
||||
<div class="-box-item" @click="handlePay('ALIPAY')">
|
||||
<img src="https://ss3.bdstatic.com/yrwDcj7w0QhBkMak8IuT_XF5ehU5bvGh7c50/logopic/a9936a369e82e0c6c42112674a5220e8_fullsize.jpg" alt="">
|
||||
<span>支付宝</span>
|
||||
</div>
|
||||
<div class="-box-item" @click="handlePay('WECHAT')">
|
||||
<img src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=3774939867,2826752539&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=796e842a5ef2d16d9edc872d6f1147ef" alt="">
|
||||
<span>微信</span>
|
||||
</div>
|
||||
</div>
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { tradeDetail } from '@/api/pay.js';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
payDetail: {}, // 支付详情
|
||||
qrcode: '' // 支付二维码
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getTradeDetail () {
|
||||
const params = this.$route.query;
|
||||
params.clientType = 'PC'
|
||||
tradeDetail(params).then(res => {
|
||||
if (res.success) {
|
||||
this.payDetail = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
handlePay (way) {
|
||||
const params = this.$route.query;
|
||||
params.paymentMethod = way;
|
||||
params.paymentClient = 'NATIVE';
|
||||
params.price = this.payDetail.price;
|
||||
this.$router.push({path: '/qrpay', query: params});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getTradeDetail();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.head-left{
|
||||
font-weight: bold;
|
||||
}
|
||||
.left-tips{
|
||||
font-size: 21px;
|
||||
|
||||
}
|
||||
.-box-item{
|
||||
margin-right: 30px;
|
||||
display: flex;
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
align-items: center;
|
||||
margin: 20px 20px;
|
||||
cursor: pointer;
|
||||
@include content_color($light_content_color);
|
||||
|
||||
&:hover{color: $theme_color;}
|
||||
|
||||
>span{
|
||||
margin-left: 10px;
|
||||
}
|
||||
>img{
|
||||
border-radius: 10px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
.left-tips-time{
|
||||
font-size: 16px;
|
||||
}
|
||||
.wrapper-head{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.wrapper-head,
|
||||
.wrapper-box {
|
||||
padding: 20px 40px;
|
||||
width: 1200px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.wrapper-box {
|
||||
@include white_background_color();
|
||||
height: auto;
|
||||
display: flex;
|
||||
}
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.price{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: $theme_color;
|
||||
}
|
||||
.head-right{
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
152
buyer/src/pages/payment/thirdPay.vue
Normal file
152
buyer/src/pages/payment/thirdPay.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<BaseHeader></BaseHeader>
|
||||
<div class="wrapper-head">
|
||||
<div class="head-left">
|
||||
<div class="left-tips">订单提交成功，请尽快付款！</div>
|
||||
<div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
|
||||
</div>
|
||||
<div class="head-right">
|
||||
<div>应付金额 <span class="price">{{$route.query.price | unitPrice}}</span>元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pay-way">{{params.paymentMethod === 'ALIPAY' ? '支付宝支付' : '微信支付'}}</div>
|
||||
<div class="qrcode">
|
||||
<div style="width:200px;height:200px;border:1px solid #eee;">
|
||||
<vue-qr :text="qrcode" :margin="0" colorDark="#000" colorLight="#fff" :size="200"></vue-qr>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<Icon type="md-qr-scanner" /> 请使用{{params.paymentMethod === 'ALIPAY' ? '支付宝' : '微信'}}扫码付款
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-div">
|
||||
<p class="mb_10">支付成功后自动跳转，如未跳转请点击按钮手动跳转。。。</p>
|
||||
<div>
|
||||
<Button @click="handlePay">重新支付</Button>
|
||||
<Button type="success" @click="$router.push('/payDone')">支付成功</Button>
|
||||
</div>
|
||||
</div>
|
||||
<a @click="$router.back()">选择其他支付方式></a>
|
||||
</div>
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import vueQr from 'vue-qr';
|
||||
import { payCallback, pay } from '@/api/pay.js';
|
||||
export default {
|
||||
components: { vueQr },
|
||||
data () {
|
||||
return {
|
||||
qrcode: '',
|
||||
params: this.$route.query,
|
||||
interval: null,
|
||||
num: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handlePay () {
|
||||
const params = this.$route.query;
|
||||
|
||||
pay(params).then(res => {
|
||||
if (res.success) {
|
||||
this.qrcode = res.result;
|
||||
this.num = 0;
|
||||
this.interval = setInterval(this.callback, 5000);
|
||||
} else {
|
||||
this.$Message.error(res.message)
|
||||
}
|
||||
});
|
||||
},
|
||||
callback () { // 支付回调接口
|
||||
this.num++;
|
||||
if (this.num >= 7) {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
let params = JSON.parse(JSON.stringify(this.$route.query));
|
||||
delete params.paymentMethod;
|
||||
delete params.paymentClient;
|
||||
payCallback(params).then(res => {
|
||||
if (res.result) {
|
||||
clearInterval(this.interval);
|
||||
this.$router.push('/payDone');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.handlePay();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.head-left {
|
||||
font-weight: bold;
|
||||
}
|
||||
.left-tips {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.left-tips-time {
|
||||
font-size: 16px;
|
||||
}
|
||||
.wrapper-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.wrapper-head,
|
||||
.content {
|
||||
padding: 20px 40px;
|
||||
width: 1000px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 10px #ddd;
|
||||
position: relative;
|
||||
display: flex;
|
||||
.pay-way {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
margin: 30px 0 0 70px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
background-color: #ff7674;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-div {
|
||||
margin:120px 0 0 30px;
|
||||
}
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: $theme_color;
|
||||
}
|
||||
.head-right {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
113
buyer/src/pages/pointMall.vue
Normal file
113
buyer/src/pages/pointMall.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="point-mall">
|
||||
<BaseHeader></BaseHeader>
|
||||
<Search></Search>
|
||||
<cateNav></cateNav>
|
||||
<ul class="category">
|
||||
<li @click="selectCate(cate.id)" v-for="(cate, index) in cateList" :key="index">{{cate.name}}</li>
|
||||
</ul>
|
||||
<h3 class="promotion-decorate">积分商品</h3>
|
||||
<!-- 列表 -->
|
||||
<div class="goods-list">
|
||||
<empty v-if="goodsList.length === 0" />
|
||||
<div
|
||||
v-else
|
||||
class="goods-show-info"
|
||||
v-for="(item, index) in goodsList"
|
||||
:key="index"
|
||||
@click="goGoodsDetail(item.skuId, item.goodsSku.goodsId)"
|
||||
>
|
||||
<div class="goods-show-img">
|
||||
<img width="220" height="220" :src="item.goodsSku.thumbnail" />
|
||||
</div>
|
||||
<div class="goods-show-price">
|
||||
<span>
|
||||
<span class="seckill-price text-danger">{{
|
||||
item.settlementPrice | unitPrice("￥")
|
||||
}} + {{item.points}}积分</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="goods-show-detail">
|
||||
<span>{{ item.goodsSku.goodsName }}</span>
|
||||
</div>
|
||||
<div class="goods-show-num">
|
||||
已有<span>{{ item.commentNum || 0 }}</span
|
||||
>人评价
|
||||
</div>
|
||||
<div class="goods-show-seller">
|
||||
<span>{{ item.storeName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {pointGoods, pointGoodsCategory} from '@/api/promotion.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
goodsList: [], // 积分商品列表
|
||||
cateList: [{
|
||||
name: '全部分类',
|
||||
id: ''
|
||||
}], // 积分分类列表
|
||||
params: { // 商品列表请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
pointsGoodsCategoryId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.params.pointsGoodsCategoryId = this.$route.query.categoryId || ''
|
||||
this.getList()
|
||||
this.getCate()
|
||||
},
|
||||
methods: {
|
||||
getList () { // 获取列表
|
||||
pointGoods(this.params).then(res => {
|
||||
if (res.success) {
|
||||
this.goodsList = res.result.records
|
||||
}
|
||||
})
|
||||
},
|
||||
getCate () { // 获取分类
|
||||
pointGoodsCategory(this.params).then(res => {
|
||||
if (res.success) {
|
||||
this.cateList.push(...res.result.records)
|
||||
}
|
||||
})
|
||||
},
|
||||
selectCate (id) {
|
||||
this.params.pointsGoodsCategoryId = id
|
||||
this.getList()
|
||||
this.$router.push({query: {categoryId: id}})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '../assets/styles/goodsList.scss';
|
||||
.seckill-price {
|
||||
font-size: 18px;
|
||||
}
|
||||
.category {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color:#005aa0;
|
||||
color: #fff;
|
||||
li{
|
||||
margin: 0 10px;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.promotion-decorate::before,.promotion-decorate::after{
|
||||
background-image: url('../../static/sprite@2x.png');
|
||||
}
|
||||
</style>
|
||||
203
buyer/src/pages/promotion/seckill.vue
Normal file
203
buyer/src/pages/promotion/seckill.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="seckill-list">
|
||||
<BaseHeader></BaseHeader>
|
||||
<Search />
|
||||
<!-- 秒杀时间段 -->
|
||||
<div class="promotion-decorate">限时秒杀</div>
|
||||
<ul class="time-line">
|
||||
<template v-for="(time, index) in list">
|
||||
<li v-if="index < 5" @click="currIndex = index" :key="index" :class="{'currTimeline': currIndex === index}">
|
||||
<div>{{time.timeLine+':00'}}</div>
|
||||
<div v-if="currIndex === index">
|
||||
<p>{{nowHour >= time.timeLine ? '秒杀中' : '即将开始'}}</p>
|
||||
<p>{{nowHour >= time.timeLine ? '距结束' : '距开始'}} {{currTime}}</p>
|
||||
</div>
|
||||
<div v-else class="not-curr">
|
||||
{{nowHour >= time.timeLine ? '秒杀中' : '即将开始'}}
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
<!-- 秒杀商品列表 -->
|
||||
<div class="goods-list">
|
||||
<empty v-if="goodsList.length === 0" />
|
||||
<div
|
||||
v-else
|
||||
class="goods-show-info"
|
||||
v-for="(item, index) in goodsList"
|
||||
:key="index"
|
||||
@click="goGoodsDetail(item.skuId, item.goodsId)"
|
||||
>
|
||||
<div class="goods-show-img">
|
||||
<img width="220" height="220" :src="item.goodsImage" />
|
||||
</div>
|
||||
<div class="goods-show-price">
|
||||
<span>
|
||||
<span class="seckill-price text-danger">{{
|
||||
item.price | unitPrice("￥")
|
||||
}}</span>
|
||||
<span style="color:#999;text-decoration:line-through;">{{item.originalPrice | unitPrice('￥')}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="goods-show-detail">
|
||||
<span>{{ item.goodsName }}</span>
|
||||
</div>
|
||||
<div class="goods-seckill-btn" :class="{'goods-seckill-btn-gray' : nowHour < list[currIndex].timeLine}">{{nowHour >= list[currIndex].timeLine ? '立即抢购' : '即将开始'}}</div>
|
||||
<div class="goods-show-num">
|
||||
已售<Progress style="width:110px" class="ml_10" :percent="Math.floor(item.salesNum/item.quantity)" />
|
||||
</div>
|
||||
<div class="goods-show-seller">
|
||||
<span>{{ item.storeName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BaseFooter />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {seckillByDay} from '@/api/promotion'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: [],
|
||||
goodsList: [],
|
||||
interval: null,
|
||||
currIndex: 0, // 当前时间段的下标
|
||||
currTime: 0, // 当前显示的倒计时
|
||||
diffSeconds: 0, // 倒计时时间戳
|
||||
nowHour: new Date().getHours()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currIndex (val) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
this.nowHour = new Date().getHours()
|
||||
this.countDown(val)
|
||||
this.goodsList = this.list[val].seckillGoodsList
|
||||
},
|
||||
diffSeconds (val) {
|
||||
const hours = Math.floor(val / 3600);
|
||||
// 当前秒数 / 60，向下取整
|
||||
// 获取到所有分钟数 3600 / 60 = 60分钟
|
||||
// 对60取模，超过小时数的分钟数
|
||||
const minutes = Math.floor(val / 60) % 60;
|
||||
// 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
|
||||
const seconds = val % 60;
|
||||
this.currTime = filteTime(hours) + ':' + filteTime(minutes) + ':' + filteTime(seconds)
|
||||
if (val <= 0) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
}
|
||||
function filteTime (time) {
|
||||
if (time < 10) {
|
||||
return '0' + time
|
||||
} else {
|
||||
return time
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getListByDay () { // 当天秒杀活动
|
||||
seckillByDay().then(res => {
|
||||
if (res.success) {
|
||||
this.list = res.result
|
||||
this.goodsList = this.list[0].seckillGoodsList
|
||||
this.countDown(this.currIndex)
|
||||
}
|
||||
})
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
// 跳转商品详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId, goodsId }
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
countDown (currIndex) { // 倒计时
|
||||
// 0点时间戳
|
||||
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
|
||||
let currTime = new Date().getTime()
|
||||
let actTime = 0;
|
||||
let nowHour = new Date().getHours(); // 当前小时数
|
||||
if (this.list[currIndex].timeLine > nowHour) { // 活动未开始
|
||||
actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000
|
||||
} else if (this.list[currIndex].timeLine <= nowHour) { // 活动进行中
|
||||
if (currIndex === this.list.length - 1) { // 如果是最后一个活动，直到24点结束
|
||||
actTime = zeroTime + 24 * 3600 * 1000
|
||||
} else {
|
||||
actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000
|
||||
}
|
||||
}
|
||||
this.diffSeconds = Math.floor((actTime - currTime) / 1000)
|
||||
this.interval = setInterval(() => {
|
||||
this.diffSeconds--
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getListByDay()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '../../assets/styles/goodsList.scss';
|
||||
.goods-seckill-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 80px;
|
||||
color: #fff;
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
font-size: 14px;
|
||||
background-color: $theme_color;
|
||||
}
|
||||
.goods-seckill-btn-gray {
|
||||
background-color: #666;
|
||||
}
|
||||
.promotion-decorate::before,.promotion-decorate::after{
|
||||
background-image: url('../../../static/sprite@2x.png');
|
||||
}
|
||||
.time-line{
|
||||
width: 1200px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
li{
|
||||
padding: 0 30px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.not-curr {
|
||||
border: 1px solid #999;
|
||||
border-radius: 20px;
|
||||
padding: 3px 10px;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.currTimeline{
|
||||
background-color: $theme_color;
|
||||
color: #fff;
|
||||
>div:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
>div:nth-child(2) {
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
buyer/src/pages/shopEntry/README.md
Normal file
1
buyer/src/pages/shopEntry/README.md
Normal file
@@ -0,0 +1 @@
|
||||
### 店铺入驻页面
|
||||
383
buyer/src/pages/shopEntry/first-apply.vue
Normal file
383
buyer/src/pages/shopEntry/first-apply.vue
Normal file
@@ -0,0 +1,383 @@
|
||||
<template>
|
||||
<div class="company-msg">
|
||||
<Form ref="firstForm" :model="form" :rules="rules" :label-width="140">
|
||||
<h4>基础信息</h4>
|
||||
<FormItem prop="companyName" label="公司名称">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.companyName"
|
||||
placeholder="请填写公司信息"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="addressIdPath" label="公司所在地">
|
||||
<!-- <Input type="text" v-model="form.addressIdPath" placeholder="请选择公司所在地" /> -->
|
||||
<region
|
||||
style="width: 250px"
|
||||
@selected="selectedRegion"
|
||||
:addressId="address"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="companyAddress" label="公司详细地址">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.companyAddress"
|
||||
placeholder="请填写公司详细信息"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="employeeNum" label="员工总数">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.employeeNum"
|
||||
placeholder="请填写公司员工总数"
|
||||
><span slot="append">人</span>
|
||||
</Input>
|
||||
</FormItem>
|
||||
<FormItem prop="registeredCapital" label="注册资金">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.registeredCapital"
|
||||
placeholder="请填写注册资金"
|
||||
><span slot="append">万元</span></Input>
|
||||
</FormItem>
|
||||
<FormItem prop="linkName" label="联系人姓名">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.linkName"
|
||||
placeholder="请填写联系人姓名"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="linkPhone" label="联系人电话">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.linkPhone"
|
||||
placeholder="请填写联系人电话"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="companyEmail" label="电子邮箱">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.companyEmail"
|
||||
placeholder="请填写电子邮箱"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<h4>营业执照信息</h4>
|
||||
<FormItem prop="licenseNum" label="营业执照号">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.licenseNum"
|
||||
placeholder="请填写营业执照号"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="scope" label="法定经营范围">
|
||||
<Input
|
||||
type="textarea"
|
||||
v-model="form.scope"
|
||||
maxlength="300"
|
||||
show-word-limit
|
||||
:rows="4"
|
||||
placeholder="请输入营业执照所示经营范围"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="licencePhoto" label="营业执照电子版">
|
||||
<Upload
|
||||
ref="uploadLicence"
|
||||
:show-upload-list="false"
|
||||
:on-success="handleSuccess"
|
||||
:format="['jpg', 'jpeg', 'png', 'gif']"
|
||||
:max-size="2048"
|
||||
:before-upload="beforeUpload"
|
||||
:on-format-error="handleFormatError"
|
||||
:on-exceeded-size="handleMaxSize"
|
||||
:on-error="uploadErr"
|
||||
multiple
|
||||
:action="action"
|
||||
:headers="accessToken"
|
||||
>
|
||||
<Button type="info" :loading="uploadLoading">证照上传</Button>
|
||||
</Upload>
|
||||
<div class="describe">
|
||||
请压缩图片在2M以内，格式为gif，jpg，png，并确保文字清晰，以免上传或审核失败
|
||||
</div>
|
||||
<div
|
||||
class="img-list"
|
||||
v-for="(item, index) in form.licencePhoto"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item" width="100" alt="" />
|
||||
<div class="cover">
|
||||
<Icon
|
||||
type="ios-eye-outline"
|
||||
@click.native="handleView(item)"
|
||||
></Icon>
|
||||
<Icon
|
||||
type="ios-trash-outline"
|
||||
@click.native="handleRemove(index, 'licencePhoto')"
|
||||
></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
|
||||
<h4>法人信息</h4>
|
||||
<FormItem prop="legalName" label="法人姓名">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.legalName"
|
||||
maxlength="20"
|
||||
placeholder="请输入法人姓名"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="legalId" label="法人证件号">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.legalId"
|
||||
placeholder="请输入法人证件号"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="legalPhoto" label="法人证件电子版">
|
||||
<Upload
|
||||
ref="uploadLegal"
|
||||
:show-upload-list="false"
|
||||
:on-success="handleSuccess1"
|
||||
:before-upload="beforeUpload1"
|
||||
:max-size="2048"
|
||||
:format="['jpg', 'jpeg', 'png', 'gif']"
|
||||
:on-format-error="handleFormatError"
|
||||
:on-exceeded-size="handleMaxSize"
|
||||
:on-error="uploadErr"
|
||||
multiple
|
||||
:action="action"
|
||||
:headers="accessToken"
|
||||
>
|
||||
<Button type="info" :loading="uploadLoading1">证照上传</Button>
|
||||
</Upload>
|
||||
<div class="describe">
|
||||
请压缩图片在2M以内，格式为gif，jpg，png，并确保文字清晰，以免上传或审核失败
|
||||
</div>
|
||||
<div
|
||||
class="img-list"
|
||||
v-for="(item, index) in form.legalPhoto"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item" width="100" alt="" />
|
||||
<div class="cover">
|
||||
<Icon
|
||||
type="ios-eye-outline"
|
||||
@click.native="handleView(item)"
|
||||
></Icon>
|
||||
<Icon
|
||||
type="ios-trash-outline"
|
||||
@click.native="handleRemove(index, 'legalPhoto')"
|
||||
></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" :loading="loading" @click="next"
|
||||
>填写财务资质信息</Button
|
||||
>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Modal title="View Image" v-model="visible">
|
||||
<img :src="previewPicture" v-if="visible" style="width: 100%" />
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { applyFirst } from '@/api/shopentry';
|
||||
import * as RegExp from '@/plugins/RegExp.js';
|
||||
import region from '@/components/map/region.vue';
|
||||
import storage from '@/plugins/storage';
|
||||
import { commonUrl } from '@/plugins/request.js';
|
||||
export default {
|
||||
components: { region },
|
||||
props: {
|
||||
content: {
|
||||
default () {
|
||||
return {};
|
||||
},
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
action: commonUrl + '/common/upload/file',
|
||||
accessToken: {},
|
||||
visible: false,
|
||||
loading: false,
|
||||
address: '',
|
||||
previewPicture: '',
|
||||
form: {
|
||||
legalPhoto: [],
|
||||
licencePhoto: []
|
||||
},
|
||||
rules: {
|
||||
companyName: [{ required: true, message: '请填写公司信息' }],
|
||||
addressIdPath: [{ required: true, message: '请选择公司所在地' }],
|
||||
companyAddress: [{ required: true, message: '请填写公司详细地址' }],
|
||||
employeeNum: [
|
||||
{ required: true, message: '请填写公司员工总数' },
|
||||
{ pattern: RegExp.integer, message: '只能填写正整数' }
|
||||
],
|
||||
registeredCapital: [
|
||||
{ required: true, message: '请填写公司注册资金' },
|
||||
{ pattern: RegExp.integer, message: '只能填写正整数' }
|
||||
],
|
||||
linkName: [{ required: true, message: '请填写联系人姓名' }],
|
||||
linkPhone: [
|
||||
{ required: true, message: '请填写联系人姓名' },
|
||||
{ pattern: RegExp.mobile, message: '请填写正确手机号' }
|
||||
],
|
||||
companyEmail: [
|
||||
{ required: true, message: '请填写电子邮箱' },
|
||||
{ type: 'email', message: '请输入正确的邮箱' }
|
||||
],
|
||||
licenseNum: [
|
||||
{ required: true, message: '请填写营业执照号' },
|
||||
{ pattern: RegExp.licenseNum, message: '请输入正确的营业执照号' }
|
||||
],
|
||||
scope: [{ required: true, message: '请填写营业执照所示经营范围' }],
|
||||
legalPhoto: [{ required: true, message: '请上传法人身份证照片' }],
|
||||
licencePhoto: [{ required: true, message: '请上传营业执照' }],
|
||||
legalName: [{ required: true, message: '请输入法人姓名' }],
|
||||
legalId: [
|
||||
{ required: true, message: '请输入法人证件号' },
|
||||
{ pattern: RegExp.IDCard, message: '请输入正确的证件号' }
|
||||
]
|
||||
},
|
||||
uploadLoading1: false,
|
||||
uploadLoading: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
next () {
|
||||
this.$refs.firstForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
let params = JSON.parse(JSON.stringify(this.form));
|
||||
params.legalPhoto = this.form.legalPhoto.toString();
|
||||
params.licencePhoto = this.form.licencePhoto.toString();
|
||||
applyFirst(params)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) this.$emit('change', 1);
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
console.log('error');
|
||||
}
|
||||
});
|
||||
},
|
||||
selectedRegion (item) {
|
||||
// 地址选择回显
|
||||
this.$set(this.form, 'addressIdPath', item[0].toString());
|
||||
this.$set(
|
||||
this.form,
|
||||
'addressPath',
|
||||
item[1].toString().replace(/\s/g, '')
|
||||
);
|
||||
},
|
||||
beforeUpload () {
|
||||
this.uploadLoading = true;
|
||||
},
|
||||
beforeUpload1 () {
|
||||
this.uploadLoading1 = true;
|
||||
},
|
||||
handleSuccess (res, file) {
|
||||
this.uploadLoading = false;
|
||||
this.form.licencePhoto.push(res.result);
|
||||
},
|
||||
handleSuccess1 (res, file) {
|
||||
this.uploadLoading1 = false;
|
||||
this.form.legalPhoto.push(res.result);
|
||||
console.log(res);
|
||||
console.log(file);
|
||||
},
|
||||
handleFormatError (file) {
|
||||
this.uploadLoading = false;
|
||||
this.uploadLoading1 = false;
|
||||
this.$Notice.warning({
|
||||
title: 'The file format is incorrect',
|
||||
desc: '上传文件格式不正确'
|
||||
});
|
||||
},
|
||||
handleMaxSize (file) {
|
||||
this.uploadLoading = false;
|
||||
this.uploadLoading1 = false;
|
||||
this.$Notice.warning({
|
||||
title: 'Exceeding file size limit',
|
||||
desc: '文件大小不能超过2M'
|
||||
});
|
||||
},
|
||||
uploadErr () {
|
||||
this.uploadLoading = false;
|
||||
this.uploadLoading1 = false;
|
||||
},
|
||||
handleView (item) {
|
||||
this.previewPicture = item;
|
||||
this.visible = true;
|
||||
},
|
||||
handleRemove (index, listName) {
|
||||
this.form[listName].splice(index, 1);
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
this.form = JSON.parse(JSON.stringify(this.content));
|
||||
if (this.form.licencePhoto) {
|
||||
this.form.legalPhoto = this.content.legalPhoto.split(',');
|
||||
this.form.licencePhoto = this.content.licencePhoto.split(',');
|
||||
this.address = this.form.addressIdPath;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
h4 {
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f8f8f8;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
.ivu-input-wrapper {
|
||||
width: 300px;
|
||||
}
|
||||
.img-list {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
position: relative;
|
||||
.cover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
i {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:hover .cover {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.describe {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
5
buyer/src/pages/shopEntry/index.vue
Normal file
5
buyer/src/pages/shopEntry/index.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="shop-list">
|
||||
<Button>申请入驻</Button>
|
||||
</div>
|
||||
</template>
|
||||
115
buyer/src/pages/shopEntry/second-apply.vue
Normal file
115
buyer/src/pages/shopEntry/second-apply.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="photo-msg">
|
||||
<Form ref="secondForm" :model="form" :rules="rules" :label-width="140">
|
||||
<h4>基础信息</h4>
|
||||
<FormItem prop="settlementBankAccountName" label="银行开户名">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.settlementBankAccountName"
|
||||
placeholder="请填写银行开户名称"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="settlementBankAccountNum" label="银行账号">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.settlementBankAccountNum"
|
||||
placeholder="请填写银行账号"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="settlementBankBranchName" label="开户银行支行名称">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.settlementBankBranchName"
|
||||
placeholder="请填写开户银行支行名称"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem prop="settlementBankJointName" label="支行联行号">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.settlementBankJointName"
|
||||
placeholder="请填写支行联行号"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem>
|
||||
<Button @click="$emit('change', 0)">返回</Button>
|
||||
<Button type="primary" :loading="loading" @click="next"
|
||||
>填写其他信息</Button
|
||||
>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { applySecond } from '@/api/shopentry';
|
||||
import * as RegExp from '@/plugins/RegExp.js';
|
||||
export default {
|
||||
props: {
|
||||
content: {
|
||||
default: {},
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
form: {},
|
||||
rules: {
|
||||
settlementBankAccountName: [
|
||||
{ required: true, message: '请填写银行开户名称' }
|
||||
],
|
||||
settlementBankAccountNum: [
|
||||
{ required: true, message: '请填写银行账号' }
|
||||
],
|
||||
settlementBankBranchName: [
|
||||
{ required: true, message: '请填写开户银行支行名称' }
|
||||
],
|
||||
settlementBankJointName: [
|
||||
{ required: true, message: '请填写支行联行号' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
next () {
|
||||
this.$refs.secondForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
applySecond(this.form)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) this.$emit('change', 2);
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
console.log('error');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.content != {}) {
|
||||
this.form = JSON.parse(JSON.stringify(this.content));
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
h4 {
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f8f8f8;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
.ivu-input-wrapper {
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
196
buyer/src/pages/shopEntry/shop-entry.vue
Normal file
196
buyer/src/pages/shopEntry/shop-entry.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="shop-entry">
|
||||
<div style="height: 20px"></div>
|
||||
<div class="content">
|
||||
<h3>店铺入驻</h3>
|
||||
<Steps :current="currentIndex" size="small" class="margin">
|
||||
<Step title="企业资质信息"></Step>
|
||||
<Step title="财务资质信息"></Step>
|
||||
<Step title="其他信息"></Step>
|
||||
<Step title="提交审核"></Step>
|
||||
</Steps>
|
||||
<first-apply
|
||||
v-if="currentIndex == 0 && dataReview"
|
||||
:content="firstData"
|
||||
@change="nextPage"
|
||||
></first-apply>
|
||||
|
||||
<second-apply
|
||||
v-if="currentIndex == 1 && dataReview"
|
||||
:content="secondData"
|
||||
@change="nextPage"
|
||||
></second-apply>
|
||||
|
||||
<third-apply
|
||||
v-if="currentIndex == 2 && dataReview"
|
||||
:content="thirdData"
|
||||
@change="nextPage"
|
||||
></third-apply>
|
||||
|
||||
<div class="success-page" v-if="currentIndex == 3">
|
||||
<span v-if="storeDisable == '' || storeDisable == 'APPLYING'"
|
||||
>入驻申请提交成功，等待平台审核</span
|
||||
>
|
||||
<span v-if="storeDisable == 'OPEN'">申请已通过，请联系管理员</span>
|
||||
<span v-if="storeDisable == 'CLOSED'">店铺已关闭，重申请联系管理员</span>
|
||||
</div>
|
||||
<Button v-if="currentIndex == 3" @click="currentIndex = 2">返回</Button>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
title="店铺入驻协议"
|
||||
v-model="showAgreement"
|
||||
width="1200"
|
||||
:closable="false"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<div class="agreeent-con" v-html="agreementCon"></div>
|
||||
|
||||
<div slot="footer" style="text-align: center">
|
||||
<p><Checkbox v-model="checked">我已同意以上协议</Checkbox></p>
|
||||
<Button
|
||||
type="primary"
|
||||
:disabled="!checked"
|
||||
class="margin"
|
||||
@click="showAgreement = false"
|
||||
>同意协议填写资质信息</Button
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { agreement, applyStatus } from '@/api/shopentry';
|
||||
import firstApply from './first-apply';
|
||||
import secondApply from './second-apply';
|
||||
import thirdApply from './third-apply';
|
||||
export default {
|
||||
components: {
|
||||
firstApply,
|
||||
secondApply,
|
||||
thirdApply
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
showAgreement: false,
|
||||
agreementCon: '',
|
||||
checked: false,
|
||||
applyData: {},
|
||||
firstData: {},
|
||||
secondData: {},
|
||||
thirdData: {},
|
||||
storeDisable: '', // APPLY OPEN 开店中 CLOSED 关闭 REFUSED 拒绝 APPLYING 申请中，审核
|
||||
dataReview: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getArticle () {
|
||||
// 入驻协议
|
||||
agreement().then((res) => {
|
||||
console.log(res);
|
||||
this.agreementCon = res.result;
|
||||
});
|
||||
},
|
||||
getData () {
|
||||
applyStatus().then((res) => {
|
||||
if (res.success) {
|
||||
if (!res.result) {
|
||||
this.showAgreement = true;
|
||||
} else {
|
||||
this.dataReview = false;
|
||||
let data = res.result;
|
||||
let first = [
|
||||
'addressIdPath',
|
||||
'addressPath',
|
||||
'companyAddress',
|
||||
'companyEmail',
|
||||
'companyName',
|
||||
'employeeNum',
|
||||
'legalId',
|
||||
'legalName',
|
||||
'licencePhoto',
|
||||
'legalPhoto',
|
||||
'licenseNum',
|
||||
'linkName',
|
||||
'linkPhone',
|
||||
'registeredCapital',
|
||||
'scope'
|
||||
];
|
||||
let second = [
|
||||
'settlementBankAccountName',
|
||||
'settlementBankAccountNum',
|
||||
'settlementBankBranchName',
|
||||
'settlementBankJointName'
|
||||
];
|
||||
let third = [
|
||||
'goodsManagementCategory',
|
||||
'storeCenter',
|
||||
'storeDesc',
|
||||
'storeLogo',
|
||||
'storeName'
|
||||
];
|
||||
|
||||
this.storeDisable = data.storeDisable;
|
||||
|
||||
first.forEach((e) => {
|
||||
this.firstData[e] = data[e];
|
||||
});
|
||||
second.forEach((e) => {
|
||||
this.secondData[e] = data[e];
|
||||
});
|
||||
third.forEach((e) => {
|
||||
this.thirdData[e] = data[e];
|
||||
});
|
||||
|
||||
if (this.storeDisable === 'APPLY') {
|
||||
this.currentIndex = 0;
|
||||
} else {
|
||||
this.currentIndex = 3;
|
||||
}
|
||||
this.dataReview = true;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
nextPage (step) {
|
||||
this.currentIndex = step;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getData();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #eee;
|
||||
min-height: 500px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 3px 3px 10px #999;
|
||||
background: #fff;
|
||||
padding: 10px 20px;
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.margin {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.agreeent-con {
|
||||
max-height: 500px;
|
||||
}
|
||||
.success-page {
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
line-height: 500px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
270
buyer/src/pages/shopEntry/third-apply.vue
Normal file
270
buyer/src/pages/shopEntry/third-apply.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div class="person-msg">
|
||||
<Form ref="thirdForm" :model="form" :rules="rules" :label-width="140">
|
||||
<h4>基础信息</h4>
|
||||
<FormItem prop="storeName" label="店铺名称">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.storeName"
|
||||
placeholder="请填写店铺名称"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem prop="storeLogo" label="店铺logo">
|
||||
<Upload
|
||||
ref="uploadLogo"
|
||||
:show-upload-list="false"
|
||||
:on-success="handleSuccess"
|
||||
:format="['jpg', 'jpeg', 'png', 'gif']"
|
||||
:max-size="2048"
|
||||
:before-upload="beforeUpload"
|
||||
:on-format-error="handleFormatError"
|
||||
:on-exceeded-size="handleMaxSize"
|
||||
:on-error="uploadErr"
|
||||
multiple
|
||||
:action="action"
|
||||
:headers="accessToken"
|
||||
>
|
||||
<Button type="info" :loading="uploadLoading">上传logo</Button>
|
||||
</Upload>
|
||||
<div class="describe">请压缩图片在2M以内，格式为gif，jpg，png</div>
|
||||
<div
|
||||
class="img-list"
|
||||
v-for="(item, index) in form.storeLogo"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item" width="100" height="" alt="" />
|
||||
<div class="cover">
|
||||
<Icon
|
||||
type="ios-eye-outline"
|
||||
@click.native="handleView(item)"
|
||||
></Icon>
|
||||
<Icon
|
||||
type="ios-trash-outline"
|
||||
@click.native="handleRemove(index, 'storeLogo')"
|
||||
></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem prop="goodsManagementCategory" label="店铺经营类目">
|
||||
<Select
|
||||
v-model="form.goodsManagementCategory"
|
||||
multiple
|
||||
style="width: 300px"
|
||||
>
|
||||
<Option
|
||||
v-for="item in categoryList"
|
||||
:value="item.id"
|
||||
:key="item.id"
|
||||
>{{ item.name }}</Option
|
||||
>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem prop="storeCenter" label="经纬度">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="form.storeCenter"
|
||||
readonly
|
||||
placeholder="点击右侧按钮选择店铺位置"
|
||||
/>
|
||||
<Button
|
||||
icon="ios-locate-outline"
|
||||
@click="$refs.liliMap.showMap = true"
|
||||
></Button>
|
||||
</FormItem>
|
||||
<FormItem prop="storeDesc" label="店铺简介">
|
||||
<Input
|
||||
type="textarea"
|
||||
v-model="form.storeDesc"
|
||||
maxlength="300"
|
||||
show-word-limit
|
||||
:rows="4"
|
||||
placeholder="请输入店铺简介"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem>
|
||||
<Button @click="$emit('change', 1)">返回</Button>
|
||||
<Button type="primary" :loading="loading" @click="next"
|
||||
>提交平台审核</Button
|
||||
>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Modal title="View Image" v-model="visible">
|
||||
<img :src="previewPicture" v-if="visible" style="width: 100%" />
|
||||
</Modal>
|
||||
<lili-map ref="liliMap" @getAddress="getAddress" :useApi="false"></lili-map>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { applyThird } from '@/api/shopentry';
|
||||
import { getCategory } from '@/api/goods';
|
||||
import * as RegExp from '@/plugins/RegExp.js';
|
||||
import Map from '@/components/map/index';
|
||||
import storage from '@/plugins/storage';
|
||||
import { commonUrl } from '@/plugins/request.js';
|
||||
export default {
|
||||
props: {
|
||||
content: {
|
||||
default: {},
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
components: { liliMap: Map },
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
uploadLoading: false,
|
||||
action: commonUrl + '/common/upload/file',
|
||||
accessToken: {},
|
||||
previewPicture: '',
|
||||
visible: false,
|
||||
form: {
|
||||
storeLogo: []
|
||||
},
|
||||
rules: {
|
||||
goodsManagementCategory: [
|
||||
{ required: true, message: '请选择店铺经营类目' }
|
||||
],
|
||||
storeName: [{ required: true, message: '请填写店铺名称' }],
|
||||
storeLogo: [{ required: true, message: '请上传店铺logo' }],
|
||||
storeDesc: [{ required: true, message: '请填写店铺简介' }],
|
||||
storeCenter: [{ required: true, message: '请选择店铺位置' }]
|
||||
},
|
||||
categoryList: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
next () {
|
||||
this.$refs.thirdForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
let params = JSON.parse(JSON.stringify(this.form));
|
||||
params.storeLogo = this.form.storeLogo.toString();
|
||||
params.goodsManagementCategory = this.form.goodsManagementCategory.toString();
|
||||
applyThird(params)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) this.$emit('change', 3);
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
console.log('error');
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeUpload () {
|
||||
this.uploadLoading = true;
|
||||
},
|
||||
|
||||
handleSuccess (res, file) {
|
||||
this.uploadLoading = false;
|
||||
this.form.storeLogo.push(res.result);
|
||||
},
|
||||
|
||||
handleFormatError (file) {
|
||||
this.uploadLoading = false;
|
||||
this.$Notice.warning({
|
||||
title: 'The file format is incorrect',
|
||||
desc: '上传文件格式不正确'
|
||||
});
|
||||
},
|
||||
handleMaxSize (file) {
|
||||
this.uploadLoading = false;
|
||||
this.$Notice.warning({
|
||||
title: 'Exceeding file size limit',
|
||||
desc: '文件大小不能超过2M'
|
||||
})
|
||||
},
|
||||
uploadErr () {
|
||||
this.uploadLoading = false;
|
||||
},
|
||||
handleView (item) {
|
||||
this.previewPicture = item;
|
||||
this.visible = true;
|
||||
},
|
||||
handleRemove (index, listName) {
|
||||
this.form[listName].splice(index, 1);
|
||||
},
|
||||
getAddress (item) {
|
||||
console.log(item);
|
||||
this.$set(
|
||||
this.form,
|
||||
'storeCenter',
|
||||
item.position.lng + ',' + item.position.lat
|
||||
);
|
||||
},
|
||||
getCategoryList () {
|
||||
getCategory(0).then((res) => {
|
||||
if (res.success) this.categoryList = res.result;
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
this.getCategoryList();
|
||||
if (this.content != {}) {
|
||||
this.form = JSON.parse(JSON.stringify(this.content));
|
||||
if (this.form.storeLogo) {
|
||||
this.form.storeLogo = this.content.storeLogo.split(',');
|
||||
this.form.goodsManagementCategory = this.content.goodsManagementCategory.split(
|
||||
','
|
||||
);
|
||||
} else {
|
||||
this.form.storeLogo = [];
|
||||
}
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
h4 {
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f8f8f8;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
.ivu-input-wrapper {
|
||||
width: 300px;
|
||||
}
|
||||
.img-list {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
height: auto;
|
||||
position: relative;
|
||||
.cover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
i {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:hover .cover {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.describe {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
80
buyer/src/pages/signUp/CheckPhone.vue
Normal file
80
buyer/src/pages/signUp/CheckPhone.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="info-form">
|
||||
<Form ref="formValidate" :model="formValidate" :label-width="80" :rules="ruleValidate">
|
||||
<FormItem label="手机号" prop="phone">
|
||||
<i-input v-model="formValidate.phone" clearable size="large" placeholder="请输入手机号"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="验证码" prop="checkNum">
|
||||
<i-input v-model="formValidate.checkNum" size="large" placeholder="请输入验证码">
|
||||
<Button slot="append" @click="getcheckNum">获取验证码</Button>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<Button type="error" size="large" long @click="handleSubmit('formValidate')">验证手机号</Button>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/vuex/store';
|
||||
import { mapMutations } from 'vuex';
|
||||
export default {
|
||||
name: 'CheckPhone',
|
||||
data () {
|
||||
return {
|
||||
formValidate: {
|
||||
phone: '',
|
||||
checkNum: ''
|
||||
},
|
||||
ruleValidate: {
|
||||
phone: [
|
||||
{ required: true, message: '手机号不能为空', trigger: 'blur' },
|
||||
{ type: 'string', pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '手机号格式出错', trigger: 'blur' }
|
||||
],
|
||||
checkNum: [
|
||||
{ required: true, message: '必须填写验证码', trigger: 'blur' },
|
||||
{ type: 'string', min: 4, max: 4, message: '验证码长度错误', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['SET_SIGN_UP_SETP']),
|
||||
getcheckNum () {
|
||||
if (this.formValidate.phone.length === 11) {
|
||||
this.$Message.success({
|
||||
content: '验证码为: 1234',
|
||||
duration: 6,
|
||||
closable: true
|
||||
});
|
||||
} else {
|
||||
this.$Message.error({
|
||||
content: '请输入正确的手机号',
|
||||
duration: 6,
|
||||
closable: true
|
||||
});
|
||||
}
|
||||
},
|
||||
handleSubmit (name) { // 提交验证
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$router.push({ path: '/SignUp/inputInfo', query: { phone: this.formValidate.phone } });
|
||||
this.SET_SIGN_UP_SETP(1);
|
||||
} else {
|
||||
this.$Message.error({
|
||||
content: '请填写正确的信息',
|
||||
duration: 6,
|
||||
closable: true
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
store
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.info-form {
|
||||
width: 90% !important;
|
||||
}
|
||||
</style>
|
||||
92
buyer/src/pages/signUp/InputInfo.vue
Normal file
92
buyer/src/pages/signUp/InputInfo.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="info-form">
|
||||
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" >
|
||||
<FormItem label="用户名" prop="name">
|
||||
<i-input v-model="formValidate.name" clearable size="large" placeholder="请输入你的姓名"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="邮箱" prop="mail">
|
||||
<i-input v-model="formValidate.mail" clearable size="large" placeholder="请输入你的邮箱"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="密码" prop="password">
|
||||
<i-input type="password" v-model="formValidate.password" clearable size="large" placeholder="请输入你的密码"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="确认密码" prop="repassword">
|
||||
<i-input type="password" v-model="formValidate.repassword" clearable size="large" placeholder="请再次输入你的密码"></i-input>
|
||||
</FormItem>
|
||||
<Button type="error" size="large" long @click="handleSubmit('formValidate')">注册</Button>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/vuex/store';
|
||||
import { mapMutations, mapActions } from 'vuex';
|
||||
export default {
|
||||
name: 'InputInfo',
|
||||
data () {
|
||||
const validatePassCheck = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'));
|
||||
} else if (value !== this.formValidate.password) {
|
||||
callback(new Error('两次输入的密码不一样'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
formValidate: {
|
||||
name: '',
|
||||
mail: '',
|
||||
password: '',
|
||||
repassword: ''
|
||||
},
|
||||
ruleValidate: {
|
||||
name: [
|
||||
{ required: true, message: '用户名不能为空', trigger: 'blur' }
|
||||
],
|
||||
mail: [
|
||||
{ required: true, message: '邮箱不能为空', trigger: 'blur' },
|
||||
{ type: 'email', message: '邮箱格式错误', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' },
|
||||
{ type: 'string', min: 6, message: '密码长度不能小于6', trigger: 'blur' }
|
||||
],
|
||||
repassword: [
|
||||
{ validator: validatePassCheck, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['SET_SIGN_UP_SETP']),
|
||||
...mapActions(['addSignUpUser']),
|
||||
handleSubmit (name) {
|
||||
const father = this;
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('注册成功');
|
||||
const userinfo = {
|
||||
username: this.formValidate.name,
|
||||
password: this.formValidate.password,
|
||||
mail: this.formValidate.mail,
|
||||
phone: this.$route.query.phone
|
||||
};
|
||||
this.addSignUpUser(userinfo);
|
||||
father.SET_SIGN_UP_SETP(2);
|
||||
this.$router.push({ path: '/SignUp/signUpDone' });
|
||||
} else {
|
||||
this.$Message.error('注册失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
store
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.info-form {
|
||||
width: 90% !important;
|
||||
}
|
||||
</style>
|
||||
27
buyer/src/pages/signUp/SignUpDone.vue
Normal file
27
buyer/src/pages/signUp/SignUpDone.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<p><Icon type="ios-checkmark-outline"></Icon></p>
|
||||
<router-link to="/login"><Button type="success" size="large" long class="btn-success">注册成功</Button></router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SignUpDone'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.container p {
|
||||
font-size: 90px;
|
||||
color: #2d8cf0;
|
||||
text-align: center;
|
||||
}
|
||||
.btn-success {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
150
buyer/src/pages/user/Home.vue
Normal file
150
buyer/src/pages/user/Home.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
<BaseHeader></BaseHeader>
|
||||
|
||||
<div class="container width_1200">
|
||||
<Layout class="layoutAll">
|
||||
<Sider class="side-bar" ref="side" :collapsed-width="78">
|
||||
<Menu
|
||||
class="side-menu"
|
||||
theme="light"
|
||||
width="auto"
|
||||
:active-name="$route.name"
|
||||
:open-names="['订单中心', '会员中心', '账户中心']"
|
||||
@on-select="onSelect"
|
||||
>
|
||||
<div class="user-icon">
|
||||
<div class="user-img">
|
||||
<img :src="userInfo.face" />
|
||||
</div>
|
||||
<p>{{userInfo.username | secrecyMobile}}</p>
|
||||
</div>
|
||||
|
||||
<!-- 循环导航栏 -->
|
||||
<Submenu
|
||||
v-for="(menu, index) in menuList"
|
||||
:key="index"
|
||||
:name="menu.title"
|
||||
>
|
||||
<template slot="title" v-if="menu.display">
|
||||
<Icon type="location"></Icon>
|
||||
<span>{{ menu.title }}</span>
|
||||
</template>
|
||||
<MenuItem
|
||||
v-for="(chlidren, i) in menu.menus"
|
||||
:key="i"
|
||||
:name="chlidren.path"
|
||||
>{{ chlidren.title }}</MenuItem
|
||||
>
|
||||
</Submenu>
|
||||
|
||||
</Menu>
|
||||
</Sider>
|
||||
<Layout class="layout ml_10">
|
||||
<Content class="content">
|
||||
<transition mode="out-in">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menuList from './menu';
|
||||
import Storage from '@/plugins/storage.js';
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
data () {
|
||||
return {
|
||||
menuList
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
userInfo () {
|
||||
return JSON.parse(Storage.getItem('userInfo'));
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 每次点击左侧bar的callback
|
||||
onSelect (name) {
|
||||
this.$router.push({name: name});
|
||||
},
|
||||
// 跳转到个人中心的首页
|
||||
toUserMain () {
|
||||
this.$router.push(`/home`);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
padding: 15px 50px;
|
||||
}
|
||||
|
||||
.header {
|
||||
@include background_color($light_background_color);
|
||||
}
|
||||
|
||||
.side-menu,
|
||||
.side-bar,
|
||||
.content {
|
||||
@include white_background_color();
|
||||
@include title_color($light_title_color);
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
min-height: 600px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.layoutAll {
|
||||
min-height: 1200px;
|
||||
@include background_color($light_background_color);
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.side-bar a {
|
||||
@include title_color($light_title_color);
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-icon span {
|
||||
font-size: 96px;
|
||||
}
|
||||
|
||||
.user-img {
|
||||
margin-bottom: 15px;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-img img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-footer-center {
|
||||
padding: 0px 15px;
|
||||
|
||||
padding-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
166
buyer/src/pages/user/menu.js
Normal file
166
buyer/src/pages/user/menu.js
Normal file
@@ -0,0 +1,166 @@
|
||||
// * icon 图标
|
||||
// * title 一级菜单
|
||||
// * display 是否显示菜单
|
||||
// * menus 菜单栏
|
||||
// * path路径 router 配置的
|
||||
|
||||
// 订单中心
|
||||
const order = [{
|
||||
icon: '',
|
||||
title: '订单中心',
|
||||
menus: [{
|
||||
icon: '',
|
||||
title: '我的订单',
|
||||
path: 'MyOrder'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '收货地址',
|
||||
path: 'MyAddress'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '售后订单',
|
||||
path: 'AfterSale'
|
||||
}
|
||||
],
|
||||
display: true
|
||||
}];
|
||||
|
||||
// 会员中心
|
||||
const member = [{
|
||||
icon: '',
|
||||
title: '会员中心',
|
||||
menus: [{
|
||||
icon: '',
|
||||
title: '用户信息',
|
||||
path: 'Profile'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '账户安全',
|
||||
path: 'AccountSafe'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '我的足迹',
|
||||
path: 'MyTracks'
|
||||
},
|
||||
|
||||
{
|
||||
icon: '',
|
||||
title: '我的收藏',
|
||||
path: 'Favorites'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '分销推荐',
|
||||
path: 'Distribution'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '我的评论',
|
||||
path: 'CommentList'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '我的投诉',
|
||||
path: 'ComplainList'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '我的积分',
|
||||
path: 'Point'
|
||||
}
|
||||
],
|
||||
display: true
|
||||
}];
|
||||
|
||||
// 账户中心
|
||||
const user = [{
|
||||
icon: '',
|
||||
title: '账户中心',
|
||||
menus: [{
|
||||
icon: '',
|
||||
title: '我的优惠券',
|
||||
path: 'Coupons'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '资金管理',
|
||||
path: 'MoneyManagement'
|
||||
}],
|
||||
display: true
|
||||
}]
|
||||
|
||||
// 活动中心
|
||||
// const activity = [{
|
||||
// icon: '',
|
||||
// title: '活动中心',
|
||||
// menus: [
|
||||
// // {
|
||||
// // icon: '',
|
||||
// // title: '拍卖活动',
|
||||
// // path: 'MyOrder',
|
||||
// // },
|
||||
// // {
|
||||
// // icon: '',
|
||||
// // title: '夺宝奇兵',
|
||||
// // path: 'MyOrder',
|
||||
// // },
|
||||
// ],
|
||||
// display: true
|
||||
// }]
|
||||
|
||||
// 批发中心
|
||||
// const wholesale = [
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '批发中心',
|
||||
// menus: [
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '我的采购单',
|
||||
// path: 'MyOrder',
|
||||
// },
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '采购退货单',
|
||||
// path: 'MyOrder',
|
||||
// },
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '我的求购单',
|
||||
// path: 'MyOrder',
|
||||
// },
|
||||
//
|
||||
// ],
|
||||
// display: true
|
||||
// }
|
||||
// ]
|
||||
|
||||
// 店铺
|
||||
// const shop = [
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '店铺管理',
|
||||
// menus: [
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '店铺后台',
|
||||
// path: 'MyOrder',
|
||||
// },
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '商家等级',
|
||||
// path: 'MyOrder',
|
||||
// },
|
||||
// ],
|
||||
// display: true
|
||||
// }
|
||||
// ]
|
||||
// wholesale[0], shop[0]
|
||||
let menuList = []
|
||||
menuList.push(order[0], member[0], user[0])
|
||||
|
||||
export default menuList
|
||||
Reference in New Issue
Block a user