Merge branch 'master' of https://gitee.com/beijing_hongye_huicheng/lilishop-ui
commit
a8e55d230a
|
@ -12,4 +12,3 @@ yarn-error.log*
|
|||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
package-lock.json
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -17,13 +17,11 @@
|
|||
"mv-count-down": "^0.1.15",
|
||||
"psl": "^1.8.0",
|
||||
"qs": "^6.9.4",
|
||||
"swiper": "^5.2.0",
|
||||
"uuid": "^8.3.2",
|
||||
"v-distpicker": "^1.0.17",
|
||||
"view-design": "^4.3.2",
|
||||
"vue": "^2.5.2",
|
||||
"vue-awesome": "^4.0.2",
|
||||
"vue-awesome-swiper": "^4.1.1",
|
||||
"vue-awesome-swiper": "^3.1.3",
|
||||
"vue-piczoom": "^1.0.6",
|
||||
"vue-qr": "^2.3.0",
|
||||
"vue-router": "^3.0.1",
|
||||
|
|
|
@ -60,8 +60,8 @@ export function pintuanMembers (pintuanId) {
|
|||
}
|
||||
|
||||
/**
|
||||
* @param {Number} start 搜索起始下标
|
||||
* @param {Number} end 搜索结束下标
|
||||
* 获取搜索热词
|
||||
* @param {Number} count 获取搜索热词数量
|
||||
*/
|
||||
export function hotWords (params) {
|
||||
return request({
|
||||
|
|
|
@ -46,3 +46,14 @@ export function pointGoods (params) {
|
|||
params
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 获取积分商品详情
|
||||
*/
|
||||
export function pointGoodsDetail (id) {
|
||||
return request({
|
||||
url: `/buyer/promotion/pointsGoods/${id}`,
|
||||
method: Method.GET,
|
||||
needToken: true,
|
||||
id
|
||||
});
|
||||
}
|
||||
|
|
|
@ -27,6 +27,7 @@
|
|||
<Tag
|
||||
v-for="(item, index) in promotionTags"
|
||||
:key="index"
|
||||
class="mr_10"
|
||||
>
|
||||
<span class="hover-color" @click="selectTags(item)">{{ item }}</span>
|
||||
</Tag>
|
||||
|
@ -37,6 +38,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import storage from '@/plugins/storage.js'
|
||||
import {hotWords} from '@/api/goods.js'
|
||||
export default {
|
||||
name: 'search',
|
||||
|
@ -60,8 +62,7 @@ export default {
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
searchData: '', // 搜索内容
|
||||
promotionTags: [] // 热门搜索列表
|
||||
searchData: '' // 搜索内容
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
@ -79,18 +80,36 @@ export default {
|
|||
this.$emit('search', this.searchData)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
computed: {
|
||||
promotionTags () {
|
||||
if (this.$store.state.hotWordsList) {
|
||||
return JSON.parse(this.$store.state.hotWordsList)
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.searchData = this.$route.query.keyword
|
||||
|
||||
if (!this.hover) { // 首页顶部固定搜索栏不调用热词接口
|
||||
hotWords({start: 1, end: 5}).then(res => {
|
||||
if (res.success) this.promotionTags = res.result
|
||||
})
|
||||
// 搜索热词每5分钟请求一次
|
||||
const reloadTime = storage.getItem('hotWordsReloadTime')
|
||||
const time = new Date().getTime() - 5 * 60 * 1000
|
||||
if (!reloadTime) {
|
||||
hotWords({count: 5}).then(res => {
|
||||
if (res.success) storage.setItem('hotWordsList', res.result)
|
||||
})
|
||||
storage.setItem('hotWordsReloadTime', new Date().getTime())
|
||||
} else if (reloadTime && time > reloadTime) {
|
||||
hotWords({count: 5}).then(res => {
|
||||
if (res.success) storage.setItem('hotWordsList', res.result)
|
||||
})
|
||||
storage.setItem('hotWordsReloadTime', new Date().getTime())
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
margin: 30px auto;
|
||||
|
|
|
@ -36,9 +36,11 @@ export default {
|
|||
},
|
||||
components: {drawerPage},
|
||||
computed: {
|
||||
// 用户信息
|
||||
userInfo () {
|
||||
return Storage.getItem('userInfo');
|
||||
},
|
||||
// 购物车商品数量
|
||||
cartNum () {
|
||||
return this.$store.state.cartNum
|
||||
}
|
||||
|
|
|
@ -53,10 +53,10 @@ export default {
|
|||
data () {
|
||||
return {
|
||||
guideArr: [ // 导航链接
|
||||
[ '购物指南', '购物流程', '会员介绍', '生活旅行', '常见问题', '大家电', '联系客服' ],
|
||||
[ '配送方式', '上门自提', '211限时达', '配送服务查询', '收取标准', '海外配送' ],
|
||||
[ '支付方式', '货到付款', '在线支付', '分期付款', '邮局汇款', '公司转账' ],
|
||||
[ '售后服务', '售后政策', '价格保护', '退款说明', '返修/退换货', '取消订单' ]
|
||||
[ '购物指南', '购物流程', '会员介绍', '生活旅行', '常见问题' ],
|
||||
[ '配送方式', '上门自提', '配送服务查询', '收取标准', '物流规则' ],
|
||||
[ '支付方式', '在线支付', '公司转账', '余额支付', '积分支付' ],
|
||||
[ '售后服务', '售后政策', '退款说明', '返修/退货', '取消订单' ]
|
||||
],
|
||||
moreLink: ['关于我们', '联系我们', '联系客服', '商家帮助', '隐私政策'], // 更多链接
|
||||
year: new Date().getFullYear() // 当前年份
|
||||
|
@ -77,7 +77,7 @@ export default {
|
|||
/*****************************底 部 开 始*****************************/
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
height: 380px;
|
||||
padding-top: 30px;
|
||||
|
||||
@include background_color($light_background_color);
|
||||
|
@ -124,7 +124,6 @@ export default {
|
|||
}
|
||||
.servece-type {
|
||||
margin: 15px auto;
|
||||
height: 200px;
|
||||
width: 800px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
@ -7,7 +7,7 @@ import FixedTopPage from '@/components/advertising/FixedTop'; // 顶部广告
|
|||
import Footer from '@/components/footer/Footer'; // 底部栏
|
||||
import Search from '@/components/Search' // 搜索框
|
||||
import card from '@/components/card' // 个人中心 卡片
|
||||
import cateNav from '@/components/nav/cateNav' // 个人中心 卡片
|
||||
import cateNav from '@/components/nav/CateNav' // 个人中心 卡片
|
||||
|
||||
empty.install = function (Vue) {
|
||||
Vue.component('empty', empty);
|
||||
|
|
|
@ -144,6 +144,7 @@ import { addCartGoods } from '@/api/cart.js';
|
|||
export default {
|
||||
name: 'ShowGoods',
|
||||
props: {
|
||||
// 商品数据
|
||||
detail: {
|
||||
type: Object,
|
||||
default: null
|
||||
|
@ -168,10 +169,7 @@ export default {
|
|||
isCollected: false // 是否收藏
|
||||
};
|
||||
},
|
||||
components: {
|
||||
PicZoom,
|
||||
Promotion
|
||||
},
|
||||
components: { PicZoom, Promotion },
|
||||
methods: {
|
||||
select (index, value) { // 选择规格
|
||||
this.$set(this.currentSelceted, index, value);
|
||||
|
@ -189,7 +187,6 @@ export default {
|
|||
return i;
|
||||
}
|
||||
});
|
||||
console.log(selectedSkuId);
|
||||
this.$router.push({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId: selectedSkuId.skuId, goodsId: this.skuDetail.goodsId }
|
||||
|
@ -237,22 +234,6 @@ export default {
|
|||
this.loading1 = false;
|
||||
});
|
||||
},
|
||||
pointPay () { // 积分购买
|
||||
const params = {
|
||||
num: this.count,
|
||||
skuId: this.skuDetail.id,
|
||||
cartType: 'BUY_NOW'
|
||||
};
|
||||
this.loading1 = true;
|
||||
addCartGoods(params).then(res => {
|
||||
this.loading1 = false;
|
||||
if (res.success) {
|
||||
this.$router.push({path: '/pay', query: {way: 'POINT'}});
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
async collect () { // 收藏商品
|
||||
if (this.isCollected) {
|
||||
let cancel = await cancelCollect('GOODS', this.skuDetail.id)
|
||||
|
@ -268,10 +249,9 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
// 格式化数据
|
||||
formatSku (list) {
|
||||
// 格式化数据
|
||||
let arr = [{}];
|
||||
|
||||
list.forEach((item, index) => {
|
||||
item.specValues.forEach((spec, specIndex) => {
|
||||
let name = spec.specName;
|
||||
|
@ -349,7 +329,6 @@ export default {
|
|||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.formatSku(this.goodsSpecList);
|
||||
this.promotion()
|
||||
document.title = this.skuDetail.goodsName
|
||||
|
@ -492,10 +471,8 @@ export default {
|
|||
.item-detail-price-row {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
// width: 555px;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
// @include background_color($light_background_color);
|
||||
background: url("../../assets/images/goodsDetail/price-bg.png");
|
||||
}
|
||||
|
||||
|
|
|
@ -1,23 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="item-intro-show">
|
||||
<!-- <div class="item-intro-recommend">
|
||||
<div class="item-recommend-title">
|
||||
<p>店铺热销</p>
|
||||
</div>
|
||||
<div class="item-intro-recommend-column">
|
||||
<div class="item-recommend-column" v-for="(item, index) in hotList" :key="index">
|
||||
<div class="item-recommend-img">
|
||||
<img :src="item.img" alt="">
|
||||
</div>
|
||||
<div class="item-recommend-intro">
|
||||
<span>
|
||||
<span class="item-recommend-top-num">{{index + 1}}</span> 热销{{item.sale}}件</span>
|
||||
<span class="item-recommend-price">¥{{item.price | unitPrice}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="item-intro-detail" ref="itemIntroDetail">
|
||||
<div class="item-intro-nav item-tabs">
|
||||
<Tabs :animated="false" @on-click="tabClick">
|
||||
|
@ -131,7 +114,8 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
skuDetail () { // skuId
|
||||
// 商品详情
|
||||
skuDetail () {
|
||||
return this.detail.data;
|
||||
}
|
||||
},
|
||||
|
|
|
@ -39,15 +39,10 @@
|
|||
<Dropdown placement="bottom-start">
|
||||
<router-link to="/cart" target="_blank">
|
||||
<span @mouseenter="getCartList">
|
||||
<Icon
|
||||
size="18"
|
||||
type="ios-cart-outline"
|
||||
></Icon>
|
||||
<Icon size="18" type="ios-cart-outline"></Icon>
|
||||
购物车
|
||||
</span>
|
||||
|
||||
</router-link>
|
||||
|
||||
<DropdownMenu slot="list">
|
||||
<div class="shopping-cart-null" style="width:200px" v-show="shoppingCart.length <= 0">
|
||||
<Icon type="ios-cart-outline" class="cart-null-icon"></Icon>
|
||||
|
@ -83,9 +78,6 @@
|
|||
<li>
|
||||
<span class="nav-item" @click="shopEntry">店铺入驻</span>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<router-link to="/feedback">意见反馈</router-link>
|
||||
</li>-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -104,21 +96,17 @@ export default {
|
|||
|
||||
data () {
|
||||
return {
|
||||
// 主题颜色切换
|
||||
themeType: 'light',
|
||||
userInfo: {}, // 用户信息
|
||||
shoppingCart: [] // 购物车
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 购物车商品数量
|
||||
cartNum () {
|
||||
return this.$store.state.cartNum;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeCity (city) { // 选择所在城市
|
||||
this.city = city;
|
||||
},
|
||||
goToPay () { // 跳转购物车
|
||||
let url = this.$router.resolve({
|
||||
path: '/cart'
|
||||
|
@ -140,7 +128,7 @@ export default {
|
|||
this.$router.push('/login');
|
||||
},
|
||||
goUserCenter (path) {
|
||||
// 跳转我的订单,我的足迹
|
||||
// 跳转我的订单,我的足迹、收藏等
|
||||
if (this.userInfo.username) {
|
||||
this.$router.push({ path: path });
|
||||
} else {
|
||||
|
|
|
@ -18,7 +18,7 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
cartNum () { // 购物车数量
|
||||
cartNum () { // 购物车商品数量
|
||||
return this.$store.state.cartNum
|
||||
}
|
||||
},
|
||||
|
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="model-form">
|
||||
<div class="model-content">
|
||||
<template v-for="(element, index) in data.list">
|
||||
<model-form-item
|
||||
v-if="element && element.key"
|
||||
:key="element.key"
|
||||
:element="element"
|
||||
:index="index"
|
||||
:data="data"
|
||||
></model-form-item>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ModelFormItem from './ModelFormItem.vue';
|
||||
export default {
|
||||
name: 'modelForm',
|
||||
components: {
|
||||
ModelFormItem
|
||||
},
|
||||
props: ['data']
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.model-content {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
// background: #fff;
|
||||
min-height: 1200px;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,283 @@
|
|||
<template>
|
||||
<div class="model-item" v-if="element && element.key">
|
||||
<!-- 轮播图模块,包括个人信息,快捷导航模块 -->
|
||||
<template v-if="element.type == 'carousel'">
|
||||
<model-carousel :data="element" class="mb_20"></model-carousel>
|
||||
</template>
|
||||
<!-- 热门广告 -->
|
||||
<template v-if="element.type == 'hotAdvert'">
|
||||
<div class="mb_20">
|
||||
<img
|
||||
style="display: block"
|
||||
class="hover-pointer"
|
||||
:src="element.options.list[0].img"
|
||||
@click="linkTo(element.options.list[0].url)"
|
||||
width="1200"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<ul class="advert-list">
|
||||
<template v-for="(item, index) in element.options.list">
|
||||
<li
|
||||
v-if="index !== 0"
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.img" width="230" height="190" alt="" />
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
<!-- 限时秒杀 待完善 -->
|
||||
<template v-if="element.type == 'seckill' && element.options.list.length">
|
||||
<seckill :data="element" class="mb_20"></seckill>
|
||||
</template>
|
||||
<!-- 折扣广告 -->
|
||||
<template v-if="element.type == 'discountAdvert'">
|
||||
<div
|
||||
class="discountAdvert mb_20"
|
||||
:style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}"
|
||||
>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
v-for="(item, index) in element.options.classification"
|
||||
:key="index"
|
||||
:src="item.img"
|
||||
width="190"
|
||||
height="210"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
v-for="(item, index) in element.options.brandList"
|
||||
:key="'discount' + index"
|
||||
:src="item.img"
|
||||
width="240"
|
||||
height="105"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 好货推荐 -->
|
||||
<template v-if="element.type == 'recommend'">
|
||||
<recommend :data="element" class="mb_20"></recommend>
|
||||
</template>
|
||||
<!-- 新品排行 -->
|
||||
<template v-if="element.type == 'newGoodsSort'">
|
||||
<new-goods-sort :data="element" class="mb_20"></new-goods-sort>
|
||||
</template>
|
||||
<!-- 首页广告 -->
|
||||
<template v-if="element.type == 'firstAdvert'">
|
||||
<first-page-advert :data="element" class="mb_20"></first-page-advert>
|
||||
</template>
|
||||
<!-- 横幅广告 -->
|
||||
<template v-if="element.type == 'bannerAdvert'">
|
||||
<img
|
||||
width="1200"
|
||||
class="hover-pointer mb_20"
|
||||
@click="linkTo(element.options.url)"
|
||||
:src="element.options.img"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
<template v-if="element.type == 'notEnough'">
|
||||
<not-enough :data="element" class="mb_20"></not-enough>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModelCarousel from './modelList/Carousel.vue';
|
||||
import FirstPageAdvert from './modelList/FirstPageAdvert.vue';
|
||||
import NewGoodsSort from './modelList/NewGoodsSort.vue';
|
||||
import Recommend from './modelList/Recommend.vue';
|
||||
import NotEnough from './modelList/NotEnough.vue';
|
||||
import Seckill from './modelList/Seckill.vue';
|
||||
|
||||
export default {
|
||||
name: 'modelFormItem',
|
||||
props: ['element', 'select', 'index', 'data'],
|
||||
components: {
|
||||
ModelCarousel,
|
||||
Recommend,
|
||||
NewGoodsSort,
|
||||
FirstPageAdvert,
|
||||
NotEnough,
|
||||
Seckill
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showModal: false, // 控制模态框显隐
|
||||
selected: {} // 已选数据
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.model-item {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/** 热门广告 */
|
||||
.advert-list {
|
||||
background: $theme_color;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 3px 10px;
|
||||
> li {
|
||||
img {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
transition: all 150ms ease-in-out;
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 20px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 限时秒杀 */
|
||||
.limit-img {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
img {
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
/** 折扣广告 */
|
||||
.discountAdvert {
|
||||
height: 566px;
|
||||
background-repeat: no-repeat;
|
||||
margin-left: -97px;
|
||||
position: relative;
|
||||
padding-left: 295px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: start;
|
||||
img {
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
transition: all 150ms ease-in-out;
|
||||
&:hover {
|
||||
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 首页品牌 */
|
||||
.brand {
|
||||
.brand-view {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
.brand-view-content {
|
||||
width: 470px;
|
||||
margin-left: 10px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 316px;
|
||||
}
|
||||
.brand-view-title {
|
||||
height: 50px;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.brand-view-content:first-child {
|
||||
width: 240px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.brand-list {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
width: 121px;
|
||||
height: 112px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid #f5f5f5;
|
||||
margin: -1px -1px 0 0;
|
||||
&:hover {
|
||||
.brand-mash {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.brand-img {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
img {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.brand-mash {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
.ivu-icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
div:last-child {
|
||||
background-color: $theme_color;
|
||||
border-radius: 9px;
|
||||
padding: 0 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.refresh {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.ivu-icon {
|
||||
font-size: 18px;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $theme_color;
|
||||
color: #fff;
|
||||
.ivu-icon {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 装修模态框 内部样式start */
|
||||
.modal-top-advert {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
> * {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ModelFormItem from './modelFormItem.vue';
|
||||
import ModelFormItem from './ModelFormItem.vue';
|
||||
export default {
|
||||
name: 'modelForm',
|
||||
components: {
|
||||
|
|
|
@ -30,16 +30,14 @@
|
|||
</ul>
|
||||
</template>
|
||||
<!-- 限时秒杀 待完善 -->
|
||||
<!-- <template v-if="element.type == 'seckill'">
|
||||
<seckill :data="element"></seckill>
|
||||
</template> -->
|
||||
<template v-if="element.type == 'seckill' && element.options.list.length">
|
||||
<seckill :data="element" class="mb_20"></seckill>
|
||||
</template>
|
||||
<!-- 折扣广告 -->
|
||||
<template v-if="element.type == 'discountAdvert'">
|
||||
<div
|
||||
class="discountAdvert mb_20"
|
||||
:style="{
|
||||
'background-image': 'url(' + element.options.bgImg.img + ')',
|
||||
}"
|
||||
:style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}"
|
||||
>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
|
@ -93,12 +91,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ModelCarousel from './modelList/carousel.vue';
|
||||
import FirstPageAdvert from './modelList/firstPageAdvert.vue';
|
||||
import NewGoodsSort from './modelList/newGoodsSort.vue';
|
||||
import Recommend from './modelList/recommend.vue';
|
||||
import NotEnough from './modelList/notEnough.vue';
|
||||
import Seckill from './modelList/seckill.vue';
|
||||
import ModelCarousel from './modelList/Carousel.vue';
|
||||
import FirstPageAdvert from './modelList/FirstPageAdvert.vue';
|
||||
import NewGoodsSort from './modelList/NewGoodsSort.vue';
|
||||
import Recommend from './modelList/Recommend.vue';
|
||||
import NotEnough from './modelList/NotEnough.vue';
|
||||
import Seckill from './modelList/Seckill.vue';
|
||||
|
||||
export default {
|
||||
name: 'modelFormItem',
|
||||
|
|
|
@ -0,0 +1,180 @@
|
|||
<template>
|
||||
<div class="model-carousel">
|
||||
<div class="nav-body clearfix">
|
||||
<!-- 侧边导航占位 -->
|
||||
<div class="nav-side"></div>
|
||||
<div class="nav-content">
|
||||
<!-- 轮播图 -->
|
||||
<Carousel autoplay>
|
||||
<CarouselItem v-for="(item, index) in data.options.list" :key="index">
|
||||
<div style="overflow: hidden">
|
||||
<img
|
||||
:src="item.img"
|
||||
width="790"
|
||||
@click="linkTo(item.url)"
|
||||
height="340"
|
||||
class="hover-pointer"
|
||||
/>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</Carousel>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="person-msg">
|
||||
<img :src="userInfo.face" v-if="userInfo.face" alt />
|
||||
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
|
||||
<div>Hi,{{ userInfo.nickName || "欢迎来到LiLi Shop" | secrecyMobile }}</div>
|
||||
<div v-if="userInfo.id">
|
||||
<Button type="error" shape="circle" @click="$router.push('home')">会员中心</Button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Button type="error" @click="$router.push('login')" shape="circle"
|
||||
>请登录</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shop-msg">
|
||||
<div>
|
||||
<span>常见问题</span>
|
||||
<ul class="article-list">
|
||||
<li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
|
||||
{{article.title}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {articleList} from '@/api/common.js'
|
||||
import storage from '@/plugins/storage';
|
||||
export default {
|
||||
name: 'modelCarousel',
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
userInfo: {}, // 用户信息
|
||||
articleList: [], // 常见问题
|
||||
params: { // 请求常见问题参数
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
type: 'ANNOUNCEMENT',
|
||||
sort: 'sort'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getArticleList () { // 获取常见问题列表
|
||||
articleList(this.params).then(res => {
|
||||
if (res.success) {
|
||||
this.articleList = res.result.records
|
||||
}
|
||||
})
|
||||
},
|
||||
goArticle (id) { // 跳转文章详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/article',
|
||||
query: {id}
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (storage.getItem('userInfo')) this.userInfo = JSON.parse(storage.getItem('userInfo'));
|
||||
this.getArticleList()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.model-carousel {
|
||||
width: 1200px;
|
||||
height: 340px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 导航主体 */
|
||||
.nav-body {
|
||||
width: 1200px;
|
||||
height: 340px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.nav-side {
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
float: left;
|
||||
padding: 0px;
|
||||
color: #fff;
|
||||
background-color: #6e6568;
|
||||
}
|
||||
|
||||
/*导航内容*/
|
||||
.nav-content {
|
||||
width: 790px;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.nav-right {
|
||||
float: left;
|
||||
width: 210px;
|
||||
.person-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 20px auto;
|
||||
button {
|
||||
height: 25px !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.ivu-btn-default {
|
||||
color: $theme_color;
|
||||
border-color: $theme_color;
|
||||
}
|
||||
img {
|
||||
margin-bottom: 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.shop-msg {
|
||||
div {
|
||||
width: 100%;
|
||||
margin: 10px 27px;
|
||||
span {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
@include content_color($theme_color);
|
||||
margin-left: 0;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-weight: normal;
|
||||
}
|
||||
span:nth-child(3):hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
cursor: pointer;
|
||||
margin: 5px 0;
|
||||
color: #999395;
|
||||
width: 150px;
|
||||
font-size: 12px;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div class="first-page-advert">
|
||||
<div
|
||||
class="item hover-pointer"
|
||||
@click="linkTo(item.url)"
|
||||
:style="{
|
||||
backgroundImage: `linear-gradient(to right, ${item.fromColor}, ${item.toColor})`,
|
||||
}"
|
||||
v-for="(item, index) in options.list"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<span class="line top-line"></span>
|
||||
<p>{{ item.name }}</p>
|
||||
<span class="line btm-line"></span>
|
||||
<p>{{ item.describe }}</p>
|
||||
</div>
|
||||
<img :src="item.img" width="170" height="170" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: this.data.options // 装修数据
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.first-page-advert {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
// margin-top: -10px;
|
||||
.item {
|
||||
width: 393px;
|
||||
height: 170px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
margin-left: 20px;
|
||||
transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s;
|
||||
&:hover {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2),
|
||||
&:nth-of-type(3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p:nth-of-type(1) {
|
||||
margin: 3px 0;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
p:nth-of-type(2) {
|
||||
margin-top: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 2px;
|
||||
background: url(../../../assets/images/festival_icon.png);
|
||||
z-index: 1;
|
||||
}
|
||||
.top-line {
|
||||
width: 78px;
|
||||
background-position: -1px -3px;
|
||||
}
|
||||
.btm-line {
|
||||
background-position: 0 -11px;
|
||||
width: 154px;
|
||||
}
|
||||
}
|
||||
.modal-top-advert {
|
||||
align-items: start;
|
||||
padding: 0 30px;
|
||||
.exhibition {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<div class="new-goods">
|
||||
<div class="left">
|
||||
<div class="top-header" :style="{ background: options.left.bgColor }">
|
||||
<span>{{ options.left.title }}</span>
|
||||
<span @click="linkTo(options.left.url)" class="hover-pointer"
|
||||
>{{ options.left.secondTitle }} ></span
|
||||
>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
class="con-item hover-pointer"
|
||||
v-for="(item, index) in options.left.list"
|
||||
:key="index"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
<div>
|
||||
<p>{{ item.name }}</p>
|
||||
<p class="describe">{{ item.describe }}</p>
|
||||
</div>
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle">
|
||||
<div class="top-header" :style="{ background: options.middle.bgColor }">
|
||||
<span>{{ options.middle.title }}</span>
|
||||
<span class="hover-pointer" @click="linkTo(options.middle.url)"
|
||||
>{{ options.middle.secondTitle }} ></span
|
||||
>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
class="con-item hover-pointer"
|
||||
v-for="(item, index) in options.middle.list"
|
||||
:key="index"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
<div>
|
||||
<p>{{ item.name }}</p>
|
||||
<p class="describe">{{ item.describe }}</p>
|
||||
</div>
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="top-header" :style="{ background: options.right.bgColor }">
|
||||
<span>{{ options.right.title }}</span>
|
||||
<span @click="linkTo(options.right.url)" class="hover-pointer"
|
||||
>{{ options.right.secondTitle }} ></span
|
||||
>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
v-for="(item, index) in options.right.list"
|
||||
:key="index"
|
||||
class="hover-pointer"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
<img :src="item.img" alt="" />
|
||||
<p>{{ item.name }}</p>
|
||||
<p>{{ item.price | unitPrice("¥") }}</p>
|
||||
<div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: this.data.options // 装修数据
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.new-goods {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> div {
|
||||
width: 393px;
|
||||
height: 440px;
|
||||
}
|
||||
|
||||
.left > .content {
|
||||
> div:nth-child(1) {
|
||||
height: 240px;
|
||||
flex-direction: column;
|
||||
border: 1px solid #eee;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
justify-content: space-between;
|
||||
img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
.describe {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
> div:nth-child(3),
|
||||
> div:nth-child(4) {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.middle > .content {
|
||||
> div {
|
||||
border-style: solid;
|
||||
border-color: #eee;
|
||||
border-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
> div:nth-child(1),
|
||||
> div:nth-child(2),
|
||||
> div:nth-child(3) {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
> div:nth-child(6),
|
||||
> div:nth-child(3) {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right > .content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
font-size: 12px;
|
||||
> div {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
padding: 5px 10px 0 10px;
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
border-bottom: 1px solid #eee;
|
||||
:nth-child(2) {
|
||||
height: 38px;
|
||||
overflow: hidden;
|
||||
}
|
||||
:nth-child(3) {
|
||||
color: $theme_color;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.jiaobiao {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
top: 10px;
|
||||
right: 16px;
|
||||
background: url(../../../assets/images/festival_icon.png);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.jiaobiao1,
|
||||
.jiaobiao4 {
|
||||
background-position: -2px -30px;
|
||||
}
|
||||
.jiaobiao2,
|
||||
.jiaobiao5 {
|
||||
background-position: -31px -30px;
|
||||
}
|
||||
.jiaobiao3,
|
||||
.jiaobiao6 {
|
||||
background-position: -60px -30px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(4),
|
||||
> div:nth-child(5),
|
||||
> div:nth-child(6) {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.top-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
padding: 0 10px;
|
||||
background: #c43d7e;
|
||||
color: #fff;
|
||||
span:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 10px 12px 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
height: 370px;
|
||||
}
|
||||
.con-item {
|
||||
width: 185px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.describe {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div class="not-enough">
|
||||
<ul class="nav-bar">
|
||||
<li
|
||||
v-for="(item, index) in conData.options.navList"
|
||||
:class="currentIndex === index ? 'curr' : ''"
|
||||
@click="changeCurr(index)"
|
||||
:key="index"
|
||||
>
|
||||
<p>{{ item.title }}</p>
|
||||
<p>{{ item.desc }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="content" v-if="showContent">
|
||||
<div
|
||||
v-for="(item, index) in conData.options.list[currentIndex]"
|
||||
:key="index"
|
||||
class="hover-pointer"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
<img :src="item.img" width="210" height="210" :alt="item.name" />
|
||||
<p>{{ item.name }}</p>
|
||||
<p>
|
||||
<span>{{ Number(item.price) | unitPrice("¥") }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
currentIndex: 0, // 当前分类下标
|
||||
conData: this.data, // 装修数据
|
||||
showContent: true // 是否展示内容
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data: function (val) {
|
||||
this.conData = val;
|
||||
},
|
||||
conData: function (val) {
|
||||
this.$emit('content', val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeCurr (index) { // 选择分类
|
||||
this.currentIndex = index;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
background-color: rgb(218, 217, 217);
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
li {
|
||||
padding: 0 30px;
|
||||
text-align: center;
|
||||
p:nth-child(1) {
|
||||
font-size: 16px;
|
||||
border-radius: 50px;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
p:nth-child(2) {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
p {
|
||||
color: $theme_color;
|
||||
}
|
||||
cursor: pointer;
|
||||
}
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
li:last-of-type {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.curr {
|
||||
p:nth-child(1) {
|
||||
background-color: $theme_color;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
p:nth-child(2) {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
> div {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #eee;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover {
|
||||
border-color: $theme_color;
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
p:nth-of-type(1) {
|
||||
overflow: hidden;
|
||||
width: 210px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 10px 0 5px 0;
|
||||
}
|
||||
p:nth-of-type(2) {
|
||||
color: $theme_color;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
span:nth-child(2) {
|
||||
text-decoration: line-through;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,217 @@
|
|||
<template>
|
||||
<div class="recommend">
|
||||
<div class="recommend-left">
|
||||
<div class="head-recommend" :style="{ background: msgLeft.bgColor }">
|
||||
<span>{{ msgLeft.title }}</span>
|
||||
<span class="hover-pointer" @click="linkTo(msgLeft.url)">{{ msgLeft.secondTitle }}></span>
|
||||
</div>
|
||||
<div class="content-left">
|
||||
<div>
|
||||
<img class="hover-pointer" @click="linkTo(msgLeft.list[0].url)" :src="msgLeft.list[0].img" width="160" height="160" alt="" />
|
||||
<div class="margin-left">{{ msgLeft.list[0].name }}</div>
|
||||
<div class="margin-left">{{ msgLeft.list[0].describe }}</div>
|
||||
<Button
|
||||
size="small"
|
||||
:style="{ background: msgLeft.bgColor }"
|
||||
@click="linkTo(msgLeft.list[0].url)"
|
||||
class="fz_12 view-btn"
|
||||
>点击查看</Button
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<template v-for="(item, index) in msgLeft.list">
|
||||
<div v-if="index != 0" :key="index" @click="linkTo(item.url)" class="hover-pointer">
|
||||
<img :src="item.img" width="80" height="80" alt="" />
|
||||
<div>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.describe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recommend-right">
|
||||
<div class="head-recommend" :style="{ background: msgRight.bgColor }">
|
||||
<span>{{ msgRight.title }}</span>
|
||||
<span @click="linkTo(msgRight.url)" class="hover-pointer"
|
||||
>{{ msgRight.secondTitle }}></span
|
||||
>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div
|
||||
v-for="(item, index) in msgRight.list"
|
||||
:key="index"
|
||||
@click="linkTo(item.url)" class="hover-pointer"
|
||||
>
|
||||
<div class="right-item" :style="{'border': index===2 || index===3 ?'none': ''}">
|
||||
<div>
|
||||
<span :style="{ background: msgRight.bgColor }">{{item.name}}</span>
|
||||
<span>{{ item.describe }}</span>
|
||||
</div>
|
||||
<div class="right-img">
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
msgLeft: this.data.options.contentLeft, // 左侧数据
|
||||
msgRight: this.data.options.contentRight // 右侧数据
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.recommend {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.recommend-left {
|
||||
width: 595px;
|
||||
.content-left {
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
font-size: 12px;
|
||||
> div:nth-child(1) {
|
||||
width: 189px;
|
||||
border-right: 1px solid #eee;
|
||||
height: 360px;
|
||||
img {
|
||||
margin: 40px 0 0 15px;
|
||||
}
|
||||
.margin-left {
|
||||
margin-left: 15px;
|
||||
width: 145px;
|
||||
}
|
||||
div:nth-of-type(1) {
|
||||
font-weight: bold;
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
div:nth-of-type(2) {
|
||||
color: #999;
|
||||
}
|
||||
.view-btn {
|
||||
margin-left: 15px;
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
width: 405px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
img {
|
||||
margin: 0 10px;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
:nth-child(2) {
|
||||
color: #449dae;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recommend-right {
|
||||
width: 595px;
|
||||
height: 360px;
|
||||
.head-recommend {
|
||||
background: #a25684;
|
||||
}
|
||||
.content-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
> div {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
height: 180px;
|
||||
padding-top: 10px;
|
||||
.right-item {
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
height: 150px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
>div:nth-child(1) {
|
||||
width: 130px;
|
||||
margin-top: 30px;
|
||||
span:nth-child(1){
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0 5px;
|
||||
background-color: #a25684;
|
||||
display: block;
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.right-img {
|
||||
width: 100;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
img{
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(n + 1) {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head-recommend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
padding: 0 10px;
|
||||
background: #449dae;
|
||||
color: #fff;
|
||||
span:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,323 @@
|
|||
<template>
|
||||
<div class="seckill">
|
||||
<div class="aside hover-pointer" @click="goToSeckill">
|
||||
<div class="title">{{ actName }}</div>
|
||||
<div class="hour">
|
||||
<span>{{ currHour }}:00</span>点场 倒计时
|
||||
</div>
|
||||
<div class="count-down" v-if="actStatus === 1">
|
||||
<span>{{ hours }}</span>
|
||||
<span>{{ minutes }}</span>
|
||||
<span>{{ seconds }}</span>
|
||||
</div>
|
||||
<div class="act-status" v-else>未开始</div>
|
||||
</div>
|
||||
<swiper :options="swiperOption" ref="mySwiper">
|
||||
<swiper-slide v-for="(item,index) in goodsList" :key="index">
|
||||
<div class="content hover-pointer" @click="goToSeckill">
|
||||
<img :src="item.goodsImage" width="140" height="140" :alt="item.goodsName">
|
||||
<div class="ellipsis">{{item.goodsName}}</div>
|
||||
<div>
|
||||
<span>{{ item.price | unitPrice('¥') }}</span>
|
||||
<span>{{ item.originalPrice | unitPrice('¥') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<div class="swiper-button-prev" slot="button-prev">
|
||||
<Icon type="ios-arrow-back" />
|
||||
</div>
|
||||
<div class="swiper-button-next" slot="button-next">
|
||||
<Icon type="ios-arrow-forward" />
|
||||
</div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入插件
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper';
|
||||
import 'swiper/dist/css/swiper.css';
|
||||
export default {
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
props: {
|
||||
data: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
list: [], // 秒杀时段列表
|
||||
goodsList: [], // 商品列表
|
||||
actStatus: 0, // 0 未开始 1 进行中
|
||||
actName: '限时秒杀', // 活动名称
|
||||
currIndex: 0, // 当前时间段的下标
|
||||
currHour: '00', // 当前秒杀场
|
||||
diffSeconds: 0, // 倒计时秒数
|
||||
hours: 0, // 小时
|
||||
minutes: 0, // 分钟
|
||||
seconds: 0, // 秒
|
||||
interval: null, // 定时器
|
||||
swiperOption: { // 轮播图参数
|
||||
loop: true,
|
||||
slidesPerView: 5,
|
||||
// 设置点击箭头
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
currIndex (val) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
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.hours = filteTime(hours)
|
||||
this.minutes = filteTime(minutes)
|
||||
this.seconds = filteTime(seconds)
|
||||
if (val <= 0) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
}
|
||||
function filteTime (time) {
|
||||
if (time < 10) {
|
||||
return '0' + time
|
||||
} else {
|
||||
return time
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
swiper () { // 轮播组件
|
||||
return this.$refs.mySwiper.swiper;
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
// 销毁前清除定时器
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
mounted () {
|
||||
this.getListByDay()
|
||||
},
|
||||
methods: {
|
||||
goToSeckill () { // 跳转秒杀页面
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/seckill'
|
||||
});
|
||||
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) { // 活动未开始
|
||||
this.actStatus = 0;
|
||||
actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000
|
||||
} else if (this.list[currIndex].timeLine <= nowHour) { // 活动进行中
|
||||
this.actStatus = 1;
|
||||
if (currIndex === this.list.length - 1) { // 如果是最后一个活动,直到24点结束
|
||||
actTime = zeroTime + 24 * 3600 * 1000
|
||||
} else {
|
||||
actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000
|
||||
}
|
||||
}
|
||||
this.currHour = this.list[this.currIndex].timeLine
|
||||
this.diffSeconds = Math.floor((actTime - currTime) / 1000)
|
||||
this.interval = setInterval(() => {
|
||||
this.diffSeconds--
|
||||
}, 1000)
|
||||
},
|
||||
getListByDay () { // 当天秒杀活动
|
||||
// const list = [
|
||||
// {
|
||||
// timeLine: 18,
|
||||
// seckillGoodsList: [
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12}
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
this.list = this.data.options.list
|
||||
this.goodsList = this.list[0].seckillGoodsList
|
||||
this.countDown(this.currIndex)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.seckill {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
display: flex;
|
||||
background-color: #eee;
|
||||
.aside {
|
||||
overflow: hidden;
|
||||
width: 190px;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
background-image: url("../../../assets/images/seckillBg.png");
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
margin-top: 31px;
|
||||
}
|
||||
|
||||
.hour {
|
||||
margin-top: 90px;
|
||||
text-align: center;
|
||||
span {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.count-down {
|
||||
margin: 10px 0 0 30px;
|
||||
> span {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
background-color: #2f3430;
|
||||
margin-right: 20px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
&::after {
|
||||
content: ":";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
> span:last-child::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.act-status {
|
||||
margin: 10px 0 0 65px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(180deg, white, #eeeeee, white);
|
||||
}
|
||||
img {
|
||||
margin-top: 30px;
|
||||
}
|
||||
> div {
|
||||
width: 160px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
> div:nth-of-type(1):hover {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
border: 1px solid $theme_color;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
width: 92px;
|
||||
background-color: $theme_color;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent white transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 24px 8px 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: #999;
|
||||
width: 66px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-container {
|
||||
height: 260px;
|
||||
width: 1000px;
|
||||
margin-left: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
background: #ccc;
|
||||
width: 25px;
|
||||
height: 35px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.swiper-button-prev:hover, .swiper-button-next:hover {
|
||||
background: #aaa;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: 0;
|
||||
border-bottom-right-radius: 18px;
|
||||
border-top-right-radius: 18px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: 0;
|
||||
border-top-left-radius: 18px;
|
||||
border-bottom-left-radius: 18px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
</style>
|
|
@ -231,4 +231,4 @@ export default {
|
|||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -1,77 +1,81 @@
|
|||
<template>
|
||||
<div class="seckill">
|
||||
<div class="aside hover-pointer" @click="goPromotion">
|
||||
<div class="aside hover-pointer" @click="goToSeckill">
|
||||
<div class="title">{{ actName }}</div>
|
||||
<div class="hour">
|
||||
<span>{{ currHour }}:00</span>点场 倒计时
|
||||
</div>
|
||||
<div class="count-down" v-if="actStatus === 1">
|
||||
<span>{{ hours }}</span
|
||||
><span>{{ minutes }}</span
|
||||
><span>{{ seconds }}</span>
|
||||
</div>
|
||||
<div class="act-status" v-else>
|
||||
{{ actStatus == 0 ? "未开始" : "已结束" }}
|
||||
<span>{{ hours }}</span>
|
||||
<span>{{ minutes }}</span>
|
||||
<span>{{ seconds }}</span>
|
||||
</div>
|
||||
<div class="act-status" v-else>未开始</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<swiper ref="mySwiper" :options="swiperOptions">
|
||||
<swiper-slide
|
||||
v-for="(item, index) in options.list[0].goodsList"
|
||||
:key="index"
|
||||
class="swiper-slide"
|
||||
>
|
||||
<div class="content hover-pointer" @click="goPromotion">
|
||||
<img :src="item.img" width="140" height="140" :alt="item.name" />
|
||||
<div class="ellipsis">{{ item.name }}</div>
|
||||
<div>
|
||||
<span>{{ item.price | unitPrice("¥") }}</span>
|
||||
<span>{{ item.originalPrice | unitPrice("¥") }}</span>
|
||||
</div>
|
||||
<swiper :options="swiperOption" ref="mySwiper">
|
||||
<swiper-slide v-for="(item,index) in goodsList" :key="index">
|
||||
<div class="content hover-pointer" @click="goToSeckill">
|
||||
<img :src="item.goodsImage" width="140" height="140" :alt="item.goodsName">
|
||||
<div class="ellipsis">{{item.goodsName}}</div>
|
||||
<div>
|
||||
<span>{{ item.price | unitPrice('¥') }}</span>
|
||||
<span>{{ item.originalPrice | unitPrice('¥') }}</span>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<div class="swiper-button-prev" slot="button-prev">
|
||||
<Icon type="ios-arrow-back" />
|
||||
</div>
|
||||
<div class="swiper-button-next" slot="button-next">
|
||||
<Icon type="ios-arrow-forward" />
|
||||
</div>
|
||||
</swiper>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
|
||||
// import 'swiper/swiper-bundle.css';
|
||||
// 引入插件
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper';
|
||||
import 'swiper/dist/css/swiper.css';
|
||||
export default {
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide
|
||||
},
|
||||
directives: {
|
||||
swiper: directive
|
||||
swiper,
|
||||
swiperSlide
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
data: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: this.data.options, // 装修数据
|
||||
actStatus: 0, // 0 未开始 1 进行中 2 已结束
|
||||
list: [], // 秒杀时段列表
|
||||
goodsList: [], // 商品列表
|
||||
actStatus: 0, // 0 未开始 1 进行中
|
||||
actName: '限时秒杀', // 活动名称
|
||||
currIndex: 0, // 当前时间段的下标
|
||||
currHour: '00', // 当前秒杀场
|
||||
diffSeconds: 0, // 倒计时秒数
|
||||
days: 0, // 天
|
||||
hours: 0, // 小时
|
||||
minutes: 0, // 分钟
|
||||
seconds: 0, // 秒
|
||||
interval: undefined, // 定时器
|
||||
swiperOptions: { // 轮播图参数
|
||||
interval: null, // 定时器
|
||||
swiperOption: { // 轮播图参数
|
||||
loop: true,
|
||||
slidesPerView: 5,
|
||||
autoplay: true,
|
||||
loop: true
|
||||
// 设置点击箭头
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev'
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
diffSeconds (val) { // 秒杀倒计时
|
||||
currIndex (val) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
this.countDown(val)
|
||||
this.goodsList = this.list[val].seckillGoodsList
|
||||
},
|
||||
diffSeconds (val) {
|
||||
const hours = Math.floor(val / 3600);
|
||||
// 当前秒数 / 60,向下取整
|
||||
// 获取到所有分钟数 3600 / 60 = 60分钟
|
||||
|
@ -79,71 +83,81 @@ export default {
|
|||
const minutes = Math.floor(val / 60) % 60;
|
||||
// 当前的秒数 % 60,获取到 超过小时数、分钟数的秒数(秒数)
|
||||
const seconds = val % 60;
|
||||
this.hours = hours < 10 ? '0' + hours : hours;
|
||||
this.minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
this.seconds = seconds < 10 ? '0' + seconds : seconds;
|
||||
|
||||
if (val === 0) {
|
||||
clearInterval(this.interval);
|
||||
this.hours = 0;
|
||||
this.minutes = 0;
|
||||
this.seconds = 0;
|
||||
this.countDown(this.options.list);
|
||||
this.hours = filteTime(hours)
|
||||
this.minutes = filteTime(minutes)
|
||||
this.seconds = filteTime(seconds)
|
||||
if (val <= 0) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = null
|
||||
}
|
||||
function filteTime (time) {
|
||||
if (time < 10) {
|
||||
return '0' + time
|
||||
} else {
|
||||
return time
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.countDown(this.options.list);
|
||||
computed: {
|
||||
swiper () { // 轮播组件
|
||||
return this.$refs.mySwiper.swiper;
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
// 销毁前清除定时器
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
mounted () {
|
||||
this.getListByDay()
|
||||
},
|
||||
methods: {
|
||||
// 倒计时
|
||||
countDown (list) {
|
||||
/**
|
||||
* 默认倒计时两小时
|
||||
* 如果没有开始,则显示未开始
|
||||
* 进行中显示倒计时 + 时间
|
||||
* 今天的秒杀结束则显示已结束
|
||||
*/
|
||||
let nowHour = new Date().getHours();
|
||||
if (nowHour < Number(list[0].time)) {
|
||||
// 活动未开始
|
||||
this.currHour = list[0].time;
|
||||
this.actStatus = 0;
|
||||
} else if (nowHour >= Number(list[list.length - 1].time + 2)) {
|
||||
// 活动已结束
|
||||
this.actStatus = 2;
|
||||
this.currHour = list[list.length - 1].time;
|
||||
} else {
|
||||
// 活动进行中
|
||||
this.actStatus = 1;
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (nowHour === Number(list[i].time)) {
|
||||
this.currHour = list[i].time;
|
||||
}
|
||||
if (
|
||||
nowHour > Number(list[i].time) &&
|
||||
nowHour < Number(list[i].time + 2)
|
||||
) {
|
||||
this.currHour = list[i].time;
|
||||
}
|
||||
}
|
||||
// 当前0点时间戳
|
||||
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
|
||||
// 活动倒计时
|
||||
this.diffSeconds = Math.floor((zeroTime + 3600 * 1000 * (this.currHour + 2) - new Date().getTime()) / 1000);
|
||||
this.interval = setInterval(() => {
|
||||
this.diffSeconds--;
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
goPromotion () { // 跳转秒杀页面
|
||||
goToSeckill () { // 跳转秒杀页面
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/seckill'
|
||||
});
|
||||
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) { // 活动未开始
|
||||
this.actStatus = 0;
|
||||
actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000
|
||||
} else if (this.list[currIndex].timeLine <= nowHour) { // 活动进行中
|
||||
this.actStatus = 1;
|
||||
if (currIndex === this.list.length - 1) { // 如果是最后一个活动,直到24点结束
|
||||
actTime = zeroTime + 24 * 3600 * 1000
|
||||
} else {
|
||||
actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000
|
||||
}
|
||||
}
|
||||
this.currHour = this.list[this.currIndex].timeLine
|
||||
this.diffSeconds = Math.floor((actTime - currTime) / 1000)
|
||||
this.interval = setInterval(() => {
|
||||
this.diffSeconds--
|
||||
}, 1000)
|
||||
},
|
||||
getListByDay () { // 当天秒杀活动
|
||||
// const list = [
|
||||
// {
|
||||
// timeLine: 18,
|
||||
// seckillGoodsList: [
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12},
|
||||
// {goodsImage: 'https://lilishop-oss.oss-cn-beijing.aliyuncs.com/a9593607de404546953055f279fd5d54.png', goodsName: 'dfsdgsdf', originalPrice: 39, price: 12}
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
this.list = this.data.options.list
|
||||
this.goodsList = this.list[0].seckillGoodsList
|
||||
this.countDown(this.currIndex)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -153,6 +167,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 260px;
|
||||
display: flex;
|
||||
background-color: #eee;
|
||||
.aside {
|
||||
overflow: hidden;
|
||||
width: 190px;
|
||||
|
@ -210,80 +225,99 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 1000px;
|
||||
// background: #efefef;
|
||||
.swiper-slide {
|
||||
height: 260px;
|
||||
.content {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.content {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(180deg, white, #eeeeee, white);
|
||||
}
|
||||
img {
|
||||
margin-top: 30px;
|
||||
}
|
||||
> div {
|
||||
width: 160px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
> div:nth-of-type(1):hover {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
border: 1px solid $theme_color;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
width: 92px;
|
||||
background-color: $theme_color;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
&::before {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent white transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 24px 8px 0 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(180deg, white, #eeeeee, white);
|
||||
top: 0;
|
||||
left: 84px;
|
||||
}
|
||||
img {
|
||||
margin-top: 30px;
|
||||
}
|
||||
> div {
|
||||
width: 160px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
> div:nth-of-type(1):hover {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
border: 1px solid $theme_color;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
width: 92px;
|
||||
background-color: $theme_color;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent white transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 24px 8px 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: #999;
|
||||
width: 66px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
span:nth-child(2) {
|
||||
color: #999;
|
||||
width: 66px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.swiper-container {
|
||||
height: 260px;
|
||||
width: 1000px;
|
||||
margin-left: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
background: #ccc;
|
||||
width: 25px;
|
||||
height: 35px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.swiper-button-prev:hover, .swiper-button-next:hover {
|
||||
background: #aaa;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: 0;
|
||||
border-bottom-right-radius: 18px;
|
||||
border-top-right-radius: 18px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: 0;
|
||||
border-top-left-radius: 18px;
|
||||
border-bottom-left-radius: 18px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -70,6 +70,7 @@ export default {
|
|||
},
|
||||
props: ['invoiceData'],
|
||||
watch: {
|
||||
// 回显的发票信息
|
||||
invoiceData: {
|
||||
handler (val) {
|
||||
this.invoiceForm = { ...val };
|
||||
|
@ -123,7 +124,7 @@ export default {
|
|||
|
||||
return flage;
|
||||
},
|
||||
|
||||
// 保存发票信息
|
||||
async submit () {
|
||||
if (this.save()) {
|
||||
this.loading = true;
|
||||
|
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="猜你喜欢" :_Size="16"> </card>
|
||||
|
||||
<Row :gutter="12" class="likeList">
|
||||
<Col
|
||||
:span="4"
|
||||
class="likeItem"
|
||||
v-for="(item, index) in goodsData"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.img" alt="" />
|
||||
<div class="likeTitle">{{ item.title }}</div>
|
||||
<div class="likePrice">{{ item.price | unitPrice }}</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'like',
|
||||
data () {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
@include white_background_color();
|
||||
}
|
||||
.likeList {
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .likeItem {
|
||||
/*width: 210px;*/
|
||||
/*margin: 10px 5px;*/
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
> .likeTitle,
|
||||
.likePrice {
|
||||
margin: 6px 0;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> .likePrice {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -53,6 +53,7 @@ export default {
|
|||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听搜索框搜索地图
|
||||
mapSearch: function (val) {
|
||||
this.searchOfMap(val);
|
||||
}
|
||||
|
|
|
@ -167,7 +167,6 @@ export default {
|
|||
watch: {
|
||||
addressId: {
|
||||
handler: function (v) {
|
||||
console.log(v);
|
||||
if (v) {
|
||||
this.reviewData();
|
||||
} else {
|
||||
|
@ -175,9 +174,6 @@ export default {
|
|||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
addr (v) {
|
||||
console.log(v);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -0,0 +1,296 @@
|
|||
<template>
|
||||
<div class="cate-nav">
|
||||
<div class="nav-con">
|
||||
<div class="all-categories hover-pointer" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">全部商品分类</div>
|
||||
<ul class="nav-item" v-if="showNavBar">
|
||||
<li
|
||||
class="hover-color"
|
||||
v-for="(item, index) in navList.list"
|
||||
:key="index"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 全部商品分类 -->
|
||||
<div class="cate-list" v-show="showAlways || showFirstList" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">
|
||||
<!-- 第一级分类 -->
|
||||
<div class="nav-side" @mouseleave="panel = false">
|
||||
<ul>
|
||||
<li v-for="(item, index) in cateList" :key="index" @mouseenter="showDetail(index)" >
|
||||
<span class="nav-side-item" @click="goGoodsList(item.id)">{{item.name}}</span>
|
||||
<span v-for="(second, secIndex) in item.children" :key="secIndex">
|
||||
<span v-if="secIndex < 2" > / </span>
|
||||
<span @click="goGoodsList(second.id, second.parentId)" class="nav-side-item" v-if="secIndex < 2">{{second.name}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 展开分类 -->
|
||||
<div
|
||||
class="detail-item-panel"
|
||||
v-show="panel"
|
||||
@mouseenter="panel = true"
|
||||
@mouseleave="panel = false"
|
||||
>
|
||||
<div class="nav-detail-item">
|
||||
<template v-for="(item, index) in panelData">
|
||||
<span @click="goGoodsList(item.id, item.parentId)" v-if="index < 8" :key="index">{{ item.name }}<Icon type="ios-arrow-forward" /></span>
|
||||
</template>
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(items, index) in panelData"
|
||||
:key="index"
|
||||
class="detail-item-row"
|
||||
>
|
||||
<span class="detail-item-title" @click="goGoodsList(items.id,items.parentId)">
|
||||
{{ items.name }} <Icon type="ios-arrow-forward" />
|
||||
<span class="glyphicon glyphicon-menu-right"></span>
|
||||
</span>
|
||||
<div>
|
||||
<span v-for="(item, subIndex) in items.children" @click="goGoodsList(item.id,items.id,items.parentId)"
|
||||
:key="subIndex" class="detail-item">{{ item.name }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCategory } from '@/api/goods';
|
||||
import storage from '@/plugins/storage.js'
|
||||
export default {
|
||||
name: 'GoodsListNav',
|
||||
props: {
|
||||
showAlways: { // 总是显示下拉分类
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
showNavBar: { // 显示全部商品分类右侧导航条
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
hover: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
panel: false, // 二级分类展示
|
||||
panelData: [], // 二级分类数据
|
||||
showFirstList: false, // 始终展示一级列表
|
||||
cateList: [] // 商品分类
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
navList () { // 导航列表
|
||||
return JSON.parse(storage.getItem('navList')) || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCate () { // 获取分类数据
|
||||
if (this.hover) return false;
|
||||
getCategory(0).then(res => {
|
||||
if (res.success) {
|
||||
this.cateList = res.result;
|
||||
this.$store.commit('SET_CATEGORY', res.result)
|
||||
// 过期时间
|
||||
var expirationTime = new Date().setHours(new Date().getHours() + 1);
|
||||
// 存放过期时间
|
||||
localStorage.setItem('category_expiration_time', expirationTime);
|
||||
// 存放分类信息
|
||||
localStorage.setItem('category', JSON.stringify(res.result))
|
||||
}
|
||||
});
|
||||
},
|
||||
showDetail (index) { // 展示全部分类
|
||||
this.panel = true
|
||||
this.panelData = this.cateList[index].children
|
||||
},
|
||||
goGoodsList (id, secondId, firstId) { // 分类共有三级,传全部分类过去
|
||||
const arr = [firstId, secondId, id]
|
||||
if (!arr[1]) {
|
||||
arr.splice(0, 2)
|
||||
}
|
||||
if (!arr[0]) {
|
||||
arr.shift()
|
||||
}
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: '/goodsList',
|
||||
query: {categoryId: arr.toString()}
|
||||
})
|
||||
window.open(routerUrl.href, '_blank')
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (localStorage.getItem('category') && localStorage.getItem('category_expiration_time')) {
|
||||
// 如果缓存过期,则获取最新的信息
|
||||
if (new Date() > localStorage.getItem('category_expiration_time')) {
|
||||
this.getCate();
|
||||
return;
|
||||
}
|
||||
this.cateList = JSON.parse(localStorage.getItem('category'))
|
||||
} else {
|
||||
this.getCate()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cate-nav{
|
||||
width: 1200px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/** 商品分类 */
|
||||
.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 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 20px;
|
||||
color: rgb(89, 88, 88);
|
||||
font-size: 15px;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cate-list{
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
.nav-item li {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.nav-item a {
|
||||
text-decoration: none;
|
||||
color: #555555;
|
||||
}
|
||||
.nav-item a:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
.nav-side {
|
||||
width: 200px;
|
||||
float: left;
|
||||
padding: 0px;
|
||||
color: #fff;
|
||||
background-color: #6e6568;
|
||||
height: 335px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-side ul {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
padding-top: 5px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-side li {
|
||||
padding: 7.5px 0;
|
||||
padding-left: 12px;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.nav-side li:hover {
|
||||
background: #999395;
|
||||
}
|
||||
.nav-side-item:hover {
|
||||
cursor: pointer;
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
/*显示商品详细信息*/
|
||||
.detail-item-panel {
|
||||
width: 815px;
|
||||
min-height: 340px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 15px #ccc;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 200px;
|
||||
z-index: 1000;
|
||||
padding: 15px;
|
||||
}
|
||||
.nav-detail-item {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
color: #eee;
|
||||
}
|
||||
.nav-detail-item span {
|
||||
padding: 6px;
|
||||
padding-left: 12px;
|
||||
margin-right: 15px;
|
||||
font-size: 12px;
|
||||
background-color: #6e6568;
|
||||
}
|
||||
.nav-detail-item span:hover {
|
||||
background-color: $theme_color;
|
||||
}
|
||||
.detail-item-panel li {
|
||||
line-height: 30px;
|
||||
// margin-left: 40px;
|
||||
}
|
||||
.detail-item-title {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: #555555;
|
||||
padding-right: 10px;
|
||||
width: 81px;
|
||||
text-align: right;
|
||||
}
|
||||
.detail-item-title:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
.detail-item-row {
|
||||
display: flex;
|
||||
>div{flex: 1;}
|
||||
}
|
||||
.detail-item {
|
||||
font-size: 12px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
cursor: pointer;
|
||||
border-left: 1px solid #ccc;
|
||||
&:first-child{
|
||||
border: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.detail-item:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
</style>
|
|
@ -183,10 +183,14 @@ export default {
|
|||
multSelected: [], // 多选分类
|
||||
selectedItem: [], // 已选分类集合 顶部展示
|
||||
brandIds: [], // 品牌id合集
|
||||
params: {}, // 请求参数
|
||||
cateList: [] // 全部商品分类
|
||||
params: {} // 请求参数
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
cateList () { // 商品分类
|
||||
return this.$store.state.category
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedItem: {
|
||||
// 监听已选条件,来调用列表接口
|
||||
|
@ -228,8 +232,12 @@ export default {
|
|||
methods: {
|
||||
getNav () { // 获取商品分类,分类下展示
|
||||
if (!this.$route.query.categoryId) return
|
||||
|
||||
this.cateList = JSON.parse(localStorage.getItem('category'))
|
||||
if (!this.cateList.length) { // 商品分类存储在localstorage,接口未调用成功前再次刷新数据
|
||||
setTimeout(() => {
|
||||
this.getNav()
|
||||
}, 500)
|
||||
return
|
||||
}
|
||||
const arr = this.$route.query.categoryId.split(',')
|
||||
if (arr.length > 0) {
|
||||
this.tabBar = this.cateList.filter(e => {
|
||||
|
@ -416,7 +424,7 @@ export default {
|
|||
background: #fff;
|
||||
border: 1px solid #999;
|
||||
padding: 0 8px;
|
||||
width: 85px;
|
||||
min-width: 85px;
|
||||
text-align: center;
|
||||
margin: 0 3px;
|
||||
&:hover {
|
||||
|
|
|
@ -81,10 +81,10 @@ export default {
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
cateList: [], // 分类数据
|
||||
panel: false, // 二级分类展示
|
||||
panelData: [], // 二级分类数据
|
||||
showFirstList: false // 始终展示一级列表
|
||||
showFirstList: false, // 始终展示一级列表
|
||||
cateList: [] // 商品分类
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
@ -98,6 +98,7 @@ export default {
|
|||
getCategory(0).then(res => {
|
||||
if (res.success) {
|
||||
this.cateList = res.result;
|
||||
this.$store.commit('SET_CATEGORY', res.result)
|
||||
// 过期时间
|
||||
var expirationTime = new Date().setHours(new Date().getHours() + 1);
|
||||
// 存放过期时间
|
||||
|
|
|
@ -12,7 +12,7 @@ export default {
|
|||
* 如果不使用,则需要在路由中给需要在菜单中展示的路由设置meta: {title: 'xxx'}
|
||||
* 用来在菜单中显示文字
|
||||
*/
|
||||
useI18n: true,
|
||||
useI18n: false,
|
||||
/**
|
||||
* @description api请求基础路径
|
||||
*/
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
// The Vue build version to load with the `import` command
|
||||
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
||||
import Vue from 'vue';
|
||||
import App from './App';
|
||||
import router from './router';
|
||||
|
|
|
@ -125,12 +125,6 @@
|
|||
</div>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
</div>
|
||||
<!-- 猜你喜欢 -->
|
||||
<!-- <div class="like">
|
||||
<div class="likeGoods">
|
||||
<ShowLikeGoods />
|
||||
</div>
|
||||
</div> -->
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -138,10 +132,8 @@
|
|||
<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) {
|
||||
|
@ -150,7 +142,6 @@ export default {
|
|||
},
|
||||
components: {
|
||||
Search,
|
||||
ShowLikeGoods,
|
||||
Promotion
|
||||
},
|
||||
data () {
|
||||
|
@ -167,7 +158,6 @@ export default {
|
|||
skuList: [] // sku列表
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
// 跳转商品详情
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
|
@ -229,8 +219,8 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
// 清空购物车
|
||||
clearCart () {
|
||||
// 清空购物车
|
||||
this.$Modal.confirm({
|
||||
title: '提示',
|
||||
content: '<p>确定要清空购物车吗?清空后不可恢复</p>',
|
||||
|
@ -258,8 +248,8 @@ export default {
|
|||
showCoupon (storeId, index) {
|
||||
this.couponAvailable = index;
|
||||
},
|
||||
// 设置购买数量
|
||||
changeNum (val, id) {
|
||||
// 设置购买数量
|
||||
console.log(val, id);
|
||||
APICart.setCartGoodsNum({ skuId: id, num: val }).then((res) => {
|
||||
console.log(res);
|
||||
|
@ -268,8 +258,8 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
// 设置商品选中状态
|
||||
async changeChecked (status, type, id) {
|
||||
// 设置商品选中状态
|
||||
const check = status ? 1 : 0;
|
||||
if (type === 'all') {
|
||||
// 全选
|
||||
|
@ -284,9 +274,8 @@ export default {
|
|||
|
||||
this.getCartList();
|
||||
},
|
||||
|
||||
// 领取优惠券
|
||||
async receiveShopCoupon (item) {
|
||||
// 领取优惠券
|
||||
let res = await APIMember.receiveCoupon(item.id);
|
||||
if (res.success) {
|
||||
this.$set(item, 'disabled', true);
|
||||
|
@ -295,8 +284,8 @@ export default {
|
|||
this.$Message.error(res.message);
|
||||
}
|
||||
},
|
||||
// 购物车列表
|
||||
async getCartList () {
|
||||
// 购物车列表
|
||||
this.loading = true;
|
||||
try {
|
||||
let res = await APICart.cartGoodsAll();
|
||||
|
|
|
@ -0,0 +1,176 @@
|
|||
<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.couponDiscount}}</span>折</span>
|
||||
<span class="describe">满{{item.consumeThreshold}}元可用</span>
|
||||
</div>
|
||||
<p>使用范围:{{useScope(item.scopeType, item.storeName)}}</p>
|
||||
<p>有效期:{{item.endTime}}</p>
|
||||
</div>
|
||||
<b></b>
|
||||
<a class="c-right" @click="receive(item)">立即领取</a>
|
||||
<i class="circle-top"></i>
|
||||
<i class="circle-bottom"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<Page :total="total" @on-change="changePageNum"
|
||||
class="pageration"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size="params.pageSize"
|
||||
show-total
|
||||
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.params.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>
|
|
@ -1,89 +0,0 @@
|
|||
<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>
|
|
@ -0,0 +1,330 @@
|
|||
<template>
|
||||
<div class="forget-password" @click='$refs.verify.show = false'>
|
||||
<div style="height:50px;"></div>
|
||||
<!-- 顶部logo -->
|
||||
<div class="logo-box">
|
||||
<img
|
||||
:src="$store.state.logoImg" width='150'
|
||||
@click="$router.push('/')"
|
||||
/>
|
||||
<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://pickmall.cn/" target="_blank">帮助</a>
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">隐私</a>
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">条款</a>
|
||||
</Row>
|
||||
<Row type="flex" justify="center" class="copyright">
|
||||
Copyright © {{year}} - 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: 'ForgetPassword',
|
||||
components: { Verify },
|
||||
data () {
|
||||
return {
|
||||
loading: false, // 加载状态
|
||||
loading1: false, // 第二步加载状态
|
||||
formFirst: { // 手机验证码表单
|
||||
// 注册表单
|
||||
mobile: '',
|
||||
code: ''
|
||||
},
|
||||
form: { // 密码
|
||||
password: '',
|
||||
oncePasd: ''
|
||||
},
|
||||
year: new Date().getFullYear(), // 当前年份
|
||||
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.success) {
|
||||
// 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.success) {
|
||||
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.success) {
|
||||
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.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.querySelector('.forget-password').style.height = window.innerHeight + 'px'
|
||||
this.$refs.formFirst.resetFields();
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.forget-password{
|
||||
min-height: 700px;
|
||||
}
|
||||
.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: -30px;
|
||||
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>
|
|
@ -22,12 +22,6 @@
|
|||
<!-- 商品详细展示 -->
|
||||
<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>
|
||||
|
@ -38,7 +32,6 @@ 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';
|
||||
import {getDetailById} from '@/api/shopentry'
|
||||
|
@ -61,6 +54,7 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 获取商品详情
|
||||
getGoodsDetail () {
|
||||
this.isLoading = true;
|
||||
const params = this.$route.query
|
||||
|
@ -137,8 +131,7 @@ export default {
|
|||
Search,
|
||||
ShopHeader,
|
||||
ShowGoods,
|
||||
ShowGoodsDetail,
|
||||
ShowLikeGoods
|
||||
ShowGoodsDetail
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -150,12 +143,6 @@ export default {
|
|||
color: #2c2c2c;
|
||||
}
|
||||
|
||||
.like {
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
@include white_background_color();
|
||||
}
|
||||
|
||||
.shop-nav-container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
|
|
@ -77,6 +77,7 @@
|
|||
</div>
|
||||
<div class="goods-page">
|
||||
<Page
|
||||
show-total
|
||||
show-sizer
|
||||
@on-change="changePageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
|
@ -126,6 +127,7 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
handleSearch (key) {
|
||||
this.params.keyword = key
|
||||
this.params.pageNumber = 0
|
||||
|
@ -156,15 +158,18 @@ export default {
|
|||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
// 分页 修改页码
|
||||
changePageNum (val) {
|
||||
this.params.pageNumber = val;
|
||||
this.getGoodsList();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize (val) {
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getGoodsList();
|
||||
},
|
||||
// 获取商品列表
|
||||
getGoodsList () {
|
||||
this.loading = true;
|
||||
apiGoods.goodsList(this.params)
|
||||
|
@ -194,7 +199,6 @@ export default {
|
|||
}
|
||||
this.getGoodsList()
|
||||
},
|
||||
mounted () {},
|
||||
components: {
|
||||
GoodsClassNav
|
||||
}
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
<drawer></drawer>
|
||||
<!-- 固定头部 -->
|
||||
<hover-search class="hover-search" :class="{show: topSearchShow}"></hover-search>
|
||||
|
||||
<!-- 顶部广告 -->
|
||||
<FixedTopPage :data="topAdvert"></FixedTopPage>
|
||||
<!-- 头部 包括登录,我的订单等 -->
|
||||
|
@ -21,10 +20,11 @@
|
|||
|
||||
<script>
|
||||
import Search from '@/components/Search';
|
||||
import ModelForm from '@/components/indexDecorate/modelForm';
|
||||
import ModelForm from '@/components/indexDecorate/ModelForm';
|
||||
import HoverSearch from '@/components/header/hoverSearch';
|
||||
import storage from '@/plugins/storage';
|
||||
import { indexData } from '@/api/index.js';
|
||||
import {seckillByDay} from '@/api/promotion'
|
||||
export default {
|
||||
name: 'Index',
|
||||
mounted () {
|
||||
|
@ -54,11 +54,28 @@ export default {
|
|||
if (res.success) {
|
||||
let dataJson = JSON.parse(res.result.pageData);
|
||||
this.modelForm = dataJson;
|
||||
// 秒杀活动不是装修的数据,需要调用接口判断是否有秒杀商品
|
||||
for (let i = 0; i < dataJson.list.length; i++) {
|
||||
if (dataJson.list[i].type === 'seckill') {
|
||||
let seckill = this.getListByDay()
|
||||
dataJson.list[i].options.list = seckill
|
||||
break;
|
||||
}
|
||||
}
|
||||
storage.setItem('navList', dataJson.list[1])
|
||||
this.showNav = true
|
||||
this.topAdvert = dataJson.list[0];
|
||||
}
|
||||
});
|
||||
},
|
||||
async getListByDay () { // 当天秒杀活动
|
||||
const res = await seckillByDay()
|
||||
console.log(res);
|
||||
if (res.success && res.result.length) {
|
||||
return res.result
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
@ -73,42 +90,6 @@ export default {
|
|||
.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 {
|
||||
|
|
|
@ -133,7 +133,7 @@
|
|||
<router-link to="/article?id=1371992704333905920" class="item" target="_blank">条款</router-link>
|
||||
</Row>
|
||||
<Row type="flex" justify="center" class="copyright">
|
||||
Copyright © 2021 - Present
|
||||
Copyright © {{year}} - Present
|
||||
<a href="https://pickmall.cn" target="_blank" style="margin: 0 5px">lili-shop</a>
|
||||
版权所有
|
||||
</Row>
|
||||
|
@ -186,7 +186,8 @@ export default {
|
|||
},
|
||||
codeMsg: '发送验证码', // 验证码文字
|
||||
interval: null, // 定时器
|
||||
time: 60 // 倒计时
|
||||
time: 60, // 倒计时
|
||||
year: new Date().getFullYear()
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
@ -220,8 +221,6 @@ export default {
|
|||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// this.$Message.error('请填写正确的用户名或密码');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
|
@ -102,8 +102,6 @@ export default {
|
|||
this.getCateList()
|
||||
this.getGoodsList()
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
getStoreMsg () { // 店铺信息
|
||||
getDetailById(this.$route.query.id).then(res => {
|
||||
|
@ -154,10 +152,12 @@ export default {
|
|||
this.cateName = cate.labelName
|
||||
this.getGoodsList()
|
||||
},
|
||||
// 分页 修改页码
|
||||
changePageNum (val) {
|
||||
this.params.pageNumber = val;
|
||||
this.getGoodsList();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize (val) {
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
|
|
|
@ -3,10 +3,10 @@
|
|||
<BaseHeader></BaseHeader>
|
||||
<Search></Search>
|
||||
<cateNav></cateNav>
|
||||
<ul class="category">
|
||||
<li @click="selectCate(cate.id)" :class="{'selected-cate': cate.id === params.pointsGoodsCategoryId}" v-for="(cate, index) in cateList" :key="index">{{cate.name}}</li>
|
||||
</ul>
|
||||
<h3 class="promotion-decorate">积分商品</h3>
|
||||
<Select @on-select="selectCate" size="small" class="cate-select-con" v-model="cateId">
|
||||
<Option v-for="(cate, index) in cateList" :value="cate.id" :key="index">{{cate.name}}</Option>
|
||||
</Select>
|
||||
<!-- 列表 -->
|
||||
<div class="goods-list">
|
||||
<empty v-if="goodsList.length === 0" />
|
||||
|
@ -43,6 +43,7 @@
|
|||
<Page :total="total" @on-change="changePageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size="params.pageSize"
|
||||
show-total
|
||||
show-sizer>
|
||||
</Page>
|
||||
</div>
|
||||
|
@ -57,18 +58,20 @@ export default {
|
|||
goodsList: [], // 积分商品列表
|
||||
cateList: [{ // 商品分类
|
||||
name: '全部分类',
|
||||
id: ''
|
||||
id: 0
|
||||
}], // 积分分类列表
|
||||
params: { // 商品列表请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
pointsGoodsCategoryId: ''
|
||||
},
|
||||
total: 0 // 商品总数
|
||||
total: 0, // 商品总数
|
||||
cateId: '' // 店铺分类id
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.params.pointsGoodsCategoryId = this.$route.query.categoryId || ''
|
||||
this.cateId = this.$route.query.categoryId || 0
|
||||
this.getList()
|
||||
this.getCate()
|
||||
},
|
||||
|
@ -88,10 +91,11 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
selectCate (id) { // 选择商品分类
|
||||
this.params.pointsGoodsCategoryId = id
|
||||
selectCate (item) { // 选择商品分类
|
||||
let cateId = item.value === 0 ? '' : item.value
|
||||
this.params.pointsGoodsCategoryId = cateId
|
||||
this.getList()
|
||||
this.$router.push({query: {categoryId: id}})
|
||||
this.$router.push({query: {categoryId: cateId}})
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
|
||||
let routerUrl = this.$router.resolve({
|
||||
|
@ -105,7 +109,7 @@ export default {
|
|||
this.getList()
|
||||
},
|
||||
changePageSize (val) { // 修改页数
|
||||
this.pageNumber = 1;
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
}
|
||||
|
@ -117,6 +121,9 @@ export default {
|
|||
.seckill-price {
|
||||
font-size: 18px;
|
||||
}
|
||||
.point-mall{
|
||||
position: relative;
|
||||
}
|
||||
.category {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
@ -146,4 +153,12 @@ export default {
|
|||
.promotion-decorate::before,.promotion-decorate::after{
|
||||
background-image: url('../../static/sprite@2x.png');
|
||||
}
|
||||
.cate-select-con{
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: -60px;
|
||||
left: 200px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -53,9 +53,6 @@ export default {
|
|||
mounted () {
|
||||
let detail = this.$route.query.detail;
|
||||
if (detail) this.detail = detail;
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -88,7 +88,7 @@
|
|||
<router-link to="/article?id=1371992704333905920" class="item" target="_blank">条款</router-link>
|
||||
</Row>
|
||||
<Row type="flex" justify="center" class="copyright">
|
||||
Copyright © 2021 - Present
|
||||
Copyright © {{year}} - Present
|
||||
<a href="https://pickmall.cn" target="_blank" style="margin: 0 5px">lili-shop</a>
|
||||
版权所有
|
||||
</Row>
|
||||
|
@ -103,10 +103,11 @@ import * as apiLogin from '@/api/login.js';
|
|||
import { sendSms } from '@/api/common.js';
|
||||
import Verify from '@/components/verify';
|
||||
export default {
|
||||
name: 'Login',
|
||||
name: 'SignUp',
|
||||
components: { Verify },
|
||||
data () {
|
||||
return {
|
||||
year: new Date().getFullYear(),
|
||||
formRegist: {
|
||||
// 注册表单
|
||||
mobilePhone: '',
|
||||
|
@ -156,6 +157,7 @@ export default {
|
|||
} else {}
|
||||
});
|
||||
},
|
||||
// 发送短信验证码
|
||||
sendCode () {
|
||||
if (this.time === 60) {
|
||||
if (this.formRegist.mobilePhone === '') {
|
||||
|
@ -191,14 +193,13 @@ export default {
|
|||
});
|
||||
}
|
||||
},
|
||||
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.init();
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
:open-names="openName"
|
||||
@on-select="onSelect"
|
||||
>
|
||||
<!-- 循环导航栏 -->
|
||||
<!-- 循环导航栏 -->
|
||||
<Submenu
|
||||
v-show="menu.children"
|
||||
v-for="(menu, index) in list"
|
||||
|
@ -34,7 +34,6 @@
|
|||
>{{ chlidren.articleCategoryName }}</MenuItem
|
||||
>
|
||||
</Submenu>
|
||||
|
||||
</Menu>
|
||||
</Sider>
|
||||
<Layout class="layout ml_10">
|
||||
|
|
|
@ -32,10 +32,10 @@
|
|||
</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-total
|
||||
show-sizer>
|
||||
</Page>
|
||||
</div>
|
||||
|
@ -57,11 +57,13 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
// 搜索优惠券
|
||||
search (item) {
|
||||
this.params.couponName = item
|
||||
this.params.pageNumber = 1
|
||||
this.getList()
|
||||
},
|
||||
// 获取优惠券列表
|
||||
getList () {
|
||||
this.$Spin.show()
|
||||
couponList(this.params).then(res => {
|
||||
|
@ -73,18 +75,18 @@ export default {
|
|||
}
|
||||
}).catch(() => { this.$Spin.hide() })
|
||||
},
|
||||
|
||||
// 分页 改变页码
|
||||
changePageNum (val) {
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 分页 改变每页数
|
||||
changePageSize (val) {
|
||||
this.pageNumber = 1;
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 领取优惠券
|
||||
receive (item) {
|
||||
receiveCoupon(item.id).then(res => {
|
||||
if (res.success) {
|
||||
|
@ -111,7 +113,7 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 优惠券可用范围
|
||||
useScope (type, storeName) {
|
||||
let shop = '平台';
|
||||
let goods = '全部商品'
|
||||
|
|
|
@ -114,7 +114,7 @@ import * as apiLogin from '@/api/login.js';
|
|||
import { sendSms } from '@/api/common.js';
|
||||
import Verify from '@/components/verify';
|
||||
export default {
|
||||
name: 'Login',
|
||||
name: 'ForgetPassword',
|
||||
components: { Verify },
|
||||
data () {
|
||||
return {
|
||||
|
@ -241,6 +241,7 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted () {
|
||||
document.querySelector('.forget-password').style.height = window.innerHeight + 'px'
|
||||
this.$refs.formFirst.resetFields();
|
||||
},
|
||||
watch: {
|
||||
|
@ -250,7 +251,7 @@ export default {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.forget-password{
|
||||
height: 100%;
|
||||
min-height: 700px;
|
||||
}
|
||||
.logo-box {
|
||||
width: 600px;
|
||||
|
|
|
@ -1,45 +1,15 @@
|
|||
<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 class="userBox">
|
||||
<div class="box">
|
||||
<!-- 我的订单组件 -->
|
||||
<myOrderPage :homePage="true" />
|
||||
</div>
|
||||
<div class="box">
|
||||
<!-- 近期收藏 -->
|
||||
<myFavorites :homePage="true" />
|
||||
</div>
|
||||
<div class="box">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -48,7 +18,6 @@
|
|||
<script>
|
||||
import myOrderPage from '@/pages/home/orderCenter/MyOrder'
|
||||
import myFavorites from '@/pages/home/memberCenter/Favorites'
|
||||
// import myLike from '@/components/like'
|
||||
|
||||
export default {
|
||||
name: 'main',
|
||||
|
@ -60,42 +29,6 @@ export default {
|
|||
</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;
|
||||
}
|
||||
|
|
|
@ -1,90 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<Table border ref="selection" :columns="columns" :data="shoppingCart" size="large" no-data-text="您的购物车没有商品,请先添加商品到购物车再点击购买">
|
||||
<template slot-scope="{row}" slot="price">
|
||||
<span>{{row.price | unitPrice('¥')}}</span>
|
||||
</template>
|
||||
</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,
|
||||
slot: '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>
|
|
@ -1,46 +0,0 @@
|
|||
<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',
|
||||
}
|
||||
</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>
|
|
@ -20,9 +20,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getPwdStatus
|
||||
} from '@/api/account';
|
||||
import { getPwdStatus } from '@/api/account';
|
||||
export default {
|
||||
name: 'AccountSafe',
|
||||
data () {
|
||||
|
|
|
@ -28,16 +28,13 @@
|
|||
<div class="order-name hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
|
||||
{{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 >
|
||||
<Tooltip transfer>
|
||||
<div class="content">{{item.content}}</div>
|
||||
<div style="white-space: normal;" slot="content">
|
||||
{{item.content}}
|
||||
|
@ -54,6 +51,7 @@
|
|||
<Page :total="total" @on-change="changePageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size="params.pageSize"
|
||||
show-total
|
||||
show-sizer>
|
||||
</Page>
|
||||
</div>
|
||||
|
@ -97,7 +95,7 @@ export default {
|
|||
this.getList()
|
||||
},
|
||||
changePageSize (val) { // 修改页数
|
||||
this.pageNumber = 1;
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
|
|
|
@ -27,12 +27,15 @@
|
|||
<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>
|
||||
<template v-if="detail.images">
|
||||
<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>
|
||||
</template>
|
||||
<div v-else>暂无</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -53,12 +56,15 @@
|
|||
<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>
|
||||
<template v-if="detail.appealImages">
|
||||
<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>
|
||||
</template>
|
||||
<div v-else>暂无</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -73,7 +79,7 @@
|
|||
</table>
|
||||
|
||||
<Alert class="l_title" show-icon type="warning">对话详情</Alert>
|
||||
<div class="speak-way" v-if="detail.orderComplaintCommunications.length">
|
||||
<div class="speak-way" v-if="detail.orderComplaintCommunications && detail.orderComplaintCommunications.length">
|
||||
<div
|
||||
class="speak-msg seller"
|
||||
:class="{'speak-buyer': item.owner == 'BUYER', 'speak-platform': item.owner == 'PLATFORM', 'speak-seller': item.owner == 'STORE',}"
|
||||
|
@ -96,7 +102,7 @@
|
|||
<td>回复:</td>
|
||||
<td><label>
|
||||
<input type="textarea" maxlength="200" :rows="4" clearable
|
||||
style="width:260px" v-model="params.content"></input>
|
||||
style="width:260px" v-model="params.content" />
|
||||
</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
@ -124,6 +130,7 @@ export default {
|
|||
visible: false, // 图片预览
|
||||
previewImage: '', // 预览图片地址
|
||||
loading: false, // 加载状态
|
||||
submitLoading: false, // 回复消息loading
|
||||
// 状态
|
||||
statusLabel: {
|
||||
NO_APPLY: '未申请',
|
||||
|
@ -163,6 +170,7 @@ export default {
|
|||
this.$Message.error('请填写对话内容');
|
||||
return;
|
||||
}
|
||||
this.submitLoading = true;
|
||||
this.params.complainId = this.$route.query.id;
|
||||
communication(this.params).then((res) => {
|
||||
this.submitLoading = false;
|
||||
|
|
|
@ -29,18 +29,10 @@
|
|||
<div class="order-name hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
|
||||
{{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>
|
||||
<div class="content">{{item.complainTopic}}</div>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
<Tooltip >
|
||||
|
@ -60,6 +52,7 @@
|
|||
<Page :total="total" @on-change="changePageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size="params.pageSize"
|
||||
show-total
|
||||
show-sizer>
|
||||
</Page>
|
||||
</div>
|
||||
|
@ -107,7 +100,7 @@ export default {
|
|||
this.getList()
|
||||
},
|
||||
changePageSize (val) { // 改变页数
|
||||
this.pageNumber = 1;
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
|
@ -193,4 +186,7 @@ export default {
|
|||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
.page-size{
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -237,7 +237,7 @@ export default {
|
|||
this.withdrawApplyModal = false
|
||||
this.price = 0;
|
||||
if (res.success) {
|
||||
this.$Message.success('提现成功')
|
||||
this.$Message.success('申请已提交,请等待审核')
|
||||
this.distribution()
|
||||
} else {
|
||||
this.$Message.error(res.message)
|
||||
|
@ -333,27 +333,12 @@ export default {
|
|||
</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;
|
||||
text-align: right;
|
||||
}
|
||||
.account-price {
|
||||
font-weight: bold;
|
||||
|
@ -361,12 +346,6 @@ export default {
|
|||
.subTips {
|
||||
@include sub_color($light_sub_color);
|
||||
}
|
||||
.account-btns {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.ivu-btn {
|
||||
margin: 0 4px;
|
||||
}
|
||||
.fontsize_48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
|
|
@ -37,10 +37,6 @@ import { collectList, cancelCollect } from '@/api/member.js'
|
|||
export default {
|
||||
name: 'Favorites',
|
||||
props: {
|
||||
paging: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
homePage: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
|
@ -1,125 +0,0 @@
|
|||
<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" type="button" button-style="solid">
|
||||
<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" type="button" button-style="solid">
|
||||
<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>
|
|
@ -126,7 +126,7 @@ export default {
|
|||
{type: 'string', min: 6, message: '密码不能少于6位'}
|
||||
],
|
||||
againPassword: [
|
||||
{required: true, message: '请输入新密码', trigger: 'blur'},
|
||||
{required: true, message: '请确认新密码', trigger: 'blur'},
|
||||
{type: 'string', min: 6, message: '密码不能少于6位'}
|
||||
]
|
||||
}
|
||||
|
@ -200,13 +200,10 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.phone {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<h3>积分日志</h3>
|
||||
<Table :columns="logColumns" :data="logData.records">
|
||||
<template slot-scope="{ row }" slot="point">
|
||||
<div><span>{{row.pointType == "1" ? '+' : '-'}}</span>{{ row.variablePoint }}</div>
|
||||
<div><span>{{row.pointType == "INCREASE" ? '+' : '-'}}</span>{{ row.variablePoint }}</div>
|
||||
</template>
|
||||
</Table>
|
||||
<!-- 分页 -->
|
||||
|
|
|
@ -159,6 +159,7 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted () {
|
||||
window.scrollTo(0, 0)
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
this.getOrderDetail()
|
||||
}
|
||||
|
|
|
@ -10,21 +10,22 @@
|
|||
:rules="ruleInline"
|
||||
>
|
||||
<FormItem label="收件人" prop="name">
|
||||
<i-input v-model="formData.name" style="width: 600px"></i-input>
|
||||
<i-input v-model="formData.name" placeholder="请输入收件人姓名" style="width: 600px"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="收件地区" prop="address">
|
||||
<i-input
|
||||
v-model="formData.address"
|
||||
disabled
|
||||
placeholder="请选择收货地址"
|
||||
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>
|
||||
<i-input v-model="formData.detail" placeholder="请输入详细地址" style="width: 600px"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="手机号码" prop="mobile">
|
||||
<i-input v-model="formData.mobile" style="width: 600px"></i-input>
|
||||
<i-input v-model="formData.mobile" placeholder="请输入收件人手机号" style="width: 600px"></i-input>
|
||||
</FormItem>
|
||||
<FormItem label="地址别名">
|
||||
<i-input
|
||||
|
|
|
@ -45,7 +45,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span @click="shopPage(order.shopId)">{{ order.storeName }}</span>
|
||||
</div>
|
||||
|
@ -201,7 +200,7 @@ export default {
|
|||
this.getList()
|
||||
},
|
||||
changePageSize (val) { // 修改页数
|
||||
this.pageNumber = 1;
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
|
|
|
@ -1,6 +1,13 @@
|
|||
<template>
|
||||
<div class="order-detail">
|
||||
<card _Title="售后详情" :_Size="16"></card>
|
||||
<!-- 操作按钮 -->
|
||||
<Card class="mb_10" v-if="(afterSale.serviceStatus == 'PASS' &&
|
||||
afterSale.serviceType != 'RETURN_MONEY') || (afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel)">
|
||||
<Button type="success" @click="openModal" v-if="afterSale.serviceStatus == 'PASS' &&
|
||||
afterSale.serviceType != 'RETURN_MONEY'" size="small">提交物流</Button>
|
||||
<Button type="error" @click="cancel(afterSale.sn)" v-if="afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel" size="small">取消售后</Button>
|
||||
</Card>
|
||||
<div class="order-card">
|
||||
<h3>{{afterSale.serviceName}}</h3>
|
||||
<p class="global_color fontsize_18">{{ afterSale.orderStatusValue }}</p>
|
||||
|
@ -54,7 +61,7 @@
|
|||
<td>商品处理方式</td><td>{{afterSale.serviceType == 'RETURN_MONEY' ? '退款' : '退货'}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>退款原因</td><td>{{afterSale.reason}}</td>
|
||||
<td>退款原因</td><td>{{afterSale.reasonName}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>问题描述</td><td>{{afterSale.problemDesc}}</td>
|
||||
|
@ -67,10 +74,35 @@
|
|||
<img :src="img" width="200" height="200" @click="perviewImg(img)" class="hover-pointer" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<Modal v-model="logisticsShow" width="530">
|
||||
<p slot="header">
|
||||
<span>提交物流信息</span>
|
||||
</p>
|
||||
<div>
|
||||
<Form ref="form" :model="form" label-position="left" :label-width="100" :rules="rules">
|
||||
<FormItem label="物流公司" prop="logisticsId">
|
||||
<Select v-model="form.logisticsId" placeholder="请选择物流公司">
|
||||
<Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem label="快递单号" prop="logisticsNo">
|
||||
<Input v-model="form.logisticsNo" placeholder="请填写快递单号"></Input>
|
||||
</FormItem>
|
||||
<FormItem label="发货时间" prop="mDeliverTime">
|
||||
<DatePicker type="date" style="width:100%" v-model="form.mDeliverTime" @on-change="changeTime" format="yyyy-MM-dd" placeholder="选择发货时间"></DatePicker>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div slot="footer" style="text-align: right">
|
||||
<Button @click="logisticsShow = false">关闭</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitDelivery">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { afterSaleDetail, afterSaleLog } from '@/api/member.js';
|
||||
import { afterSaleDetail, afterSaleLog, afterSaleReason, cancelAfterSale } from '@/api/member.js';
|
||||
import { afterSaleDelivery, getLogisticsCompany } from '@/api/order.js';
|
||||
import { afterSaleStatusList } from '../enumeration.js'
|
||||
export default {
|
||||
name: 'aftersale-detail',
|
||||
|
@ -78,7 +110,22 @@ export default {
|
|||
return {
|
||||
afterSale: {}, // 售后详情数据
|
||||
logList: [], // 日志
|
||||
afterSaleStatusList // 售后状态列表
|
||||
reasonList: [], // 售后原因列表
|
||||
afterSaleStatusList, // 售后状态列表
|
||||
companyList: [], // 物流公司列表
|
||||
logisticsShow: false, // 物流信息modal
|
||||
form: { // 物流信息数据
|
||||
afterSaleSn: '',
|
||||
logisticsId: '',
|
||||
logisticsNo: '',
|
||||
mDeliverTime: ''
|
||||
},
|
||||
rules: { // 必填校验
|
||||
logisticsId: [{ required: true, message: '请选择物流公司' }],
|
||||
logisticsNo: [{ required: true, message: '请填写物流编号' }],
|
||||
mDeliverTime: [{ required: true, message: '请选择发货时间' }]
|
||||
},
|
||||
submitLoading: false // 提交加载状态
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
@ -87,6 +134,25 @@ export default {
|
|||
if (res.success) {
|
||||
this.afterSale = res.result;
|
||||
this.afterSale.serviceName = this.filterOrderStatus(this.afterSale.serviceStatus)
|
||||
// 如果是原因id,则调接口查询原因中文释义
|
||||
const pattern3 = new RegExp('[0-9]+');
|
||||
if (pattern3.test(this.afterSale.reason)) {
|
||||
this.getReason(this.afterSale.serviceType)
|
||||
} else {
|
||||
this.$set(this.afterSale, 'reasonName', this.afterSale.reason)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getReason (type) { // 获取售后原因
|
||||
afterSaleReason(type).then(res => {
|
||||
if (res.success) {
|
||||
this.reasonList = res.result
|
||||
this.reasonList.forEach(e => {
|
||||
if (e.id === this.afterSale.reason) {
|
||||
this.$set(this.afterSale, 'reasonName', e.reason)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
@ -99,8 +165,58 @@ export default {
|
|||
const ob = this.afterSaleStatusList.filter(e => { return e.status === status });
|
||||
if (ob.length) return ob[0].name
|
||||
},
|
||||
perviewImg (img) {
|
||||
perviewImg (img) { // 查看图片
|
||||
window.open(img, '_blank')
|
||||
},
|
||||
cancel (sn) { // 取消售后申请
|
||||
this.$Modal.confirm({
|
||||
title: '取消',
|
||||
content: '<p>确定取消此次售后申请吗?</p>',
|
||||
onOk: () => {
|
||||
cancelAfterSale(sn).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('取消售后申请成功')
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
},
|
||||
onCancel: () => {}
|
||||
});
|
||||
},
|
||||
// 获取物流公司列表
|
||||
getCompany () {
|
||||
getLogisticsCompany().then(res => {
|
||||
if (res.success) {
|
||||
this.companyList = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交物流信息
|
||||
submitDelivery () {
|
||||
this.submitLoading = true
|
||||
afterSaleDelivery(this.form).then(res => {
|
||||
if (res.success) {
|
||||
this.logisticsShow = false;
|
||||
this.$Message.success('提交成功')
|
||||
this.getDetail()
|
||||
}
|
||||
this.submitLoading = false
|
||||
}).catch(() => {
|
||||
this.submitLoading = false
|
||||
})
|
||||
},
|
||||
// 提交物流modal
|
||||
openModal () {
|
||||
this.form.afterSaleSn = this.afterSale.sn
|
||||
this.logisticsShow = true;
|
||||
this.$refs.form.resetFields()
|
||||
if (!this.companyList.length) {
|
||||
this.getCompany()
|
||||
}
|
||||
},
|
||||
// 格式化时间
|
||||
changeTime (time) {
|
||||
this.form.mDeliverTime = time;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
|
@ -8,47 +8,45 @@
|
|||
<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="goods-eval">
|
||||
<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 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>
|
||||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
</div>
|
||||
<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%">
|
||||
|
@ -140,6 +138,7 @@ export default {
|
|||
mounted () {
|
||||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
this.getOrderDetail()
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -155,10 +154,8 @@ export default {
|
|||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.goods-eval li{
|
||||
.goods-eval{
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.goods-con {
|
||||
width: 30%;
|
||||
padding: 20px;
|
||||
|
|
|
@ -3,12 +3,10 @@
|
|||
<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 }}
|
||||
<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>
|
||||
<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>
|
||||
|
@ -81,9 +79,6 @@ export default {
|
|||
},
|
||||
mounted () {
|
||||
this.getAddrList();
|
||||
},
|
||||
components: {
|
||||
card
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -60,10 +60,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span @click="shopPage(order.storeId)">{{ order.storeName }}</span
|
||||
>
|
||||
<span @click="shopPage(order.storeId)">{{ order.storeName }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 订单基础操作 -->
|
||||
|
@ -79,25 +77,26 @@
|
|||
<Spin size="large" fix v-if="spinShow"></Spin>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="page-size" v-if="paging">
|
||||
<div class="page-size" v-if="!homePage">
|
||||
<Page :total="total" @on-change="changePageNum"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size="params.pageSize"
|
||||
show-total
|
||||
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>
|
||||
<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 type="button" button-style="solid">
|
||||
|
@ -116,11 +115,7 @@ import { orderStatusList } from '../enumeration.js'
|
|||
export default {
|
||||
name: 'MyOrder',
|
||||
props: {
|
||||
paging: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
homePage: {
|
||||
homePage: { // 判断是否个人中心首页展示内容
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
|
@ -167,6 +162,7 @@ export default {
|
|||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
// 切换订单状态
|
||||
change (index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
|
@ -221,23 +217,15 @@ export default {
|
|||
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({
|
||||
|
@ -273,7 +261,7 @@ export default {
|
|||
this.getList()
|
||||
},
|
||||
changePageSize (val) { // 修改页数
|
||||
this.pageNumber = 1;
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
|
@ -314,9 +302,7 @@ export default {
|
|||
}
|
||||
.page-size {
|
||||
margin: 15px 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
}
|
||||
/** 订单列表 */
|
||||
.order-list {
|
||||
|
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<div class="order-detail" v-if="order.order">
|
||||
<card _Title="订单详情" :_Size="16"></card>
|
||||
<Card class="mb_10" v-if="order.allowOperationVO.pay || order.allowOperationVO.rog || order.allowOperationVO.cancel">
|
||||
<Button type="success" @click="goPay(order.order.sn)" size="small" v-if="order.allowOperationVO.pay">去支付</Button>
|
||||
<Button type="info" @click="received(order.order.sn)" size="small" v-if="order.allowOperationVO.rog">确认收货</Button>
|
||||
<Button type="error" @click="handleCancelOrder(order.order.sn)" v-if="order.allowOperationVO.cancel" size="small">取消订单</Button>
|
||||
</Card>
|
||||
<p class="verificationCode" v-if="order.order.verificationCode">核验码:<span>{{order.order.verificationCode}}</span></p>
|
||||
<div class="order-card">
|
||||
<p class="global_color fontsize_18">{{ order.orderStatusValue }}</p>
|
||||
|
@ -50,11 +55,12 @@
|
|||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50%">商品</th>
|
||||
<th width="40%">商品</th>
|
||||
<th width="20%">货号</th>
|
||||
<th width="10%">单价</th>
|
||||
<th width="10%">数量</th>
|
||||
<th width="10%">小计</th>
|
||||
<th width="10%">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -71,6 +77,11 @@
|
|||
<td>{{ goods.goodsPrice | unitPrice('¥') }}</td>
|
||||
<td>{{ goods.num }}</td>
|
||||
<td>{{ (goods.goodsPrice * goods.num) | unitPrice('¥') }}</td>
|
||||
<td>
|
||||
<Button v-if="goods.afterSaleStatus.includes('NOT_APPLIED')" @click="applyAfterSale(goods.sn)" type="info" size="small" class="mb_5">申请售后</Button>
|
||||
<Button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.order.sn, goodsIndex)" size="small" type="success" class="fontsize_12 mb_5" >评价</Button>
|
||||
<Button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.order.sn, goodsIndex)" type="warning" class="fontsize_12" size="small">投诉</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
@ -93,19 +104,31 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal v-model="cancelAvail" title="请选择取消订单原因" @on-ok="sureCancel" @on-cancel="cancelAvail = false">
|
||||
<RadioGroup v-model="cancelParams.reason" vertical type="button" button-style="solid">
|
||||
<Radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
|
||||
{{item.reason}}
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import card from '@/components/card';
|
||||
import { orderDetail, getTraces } from '@/api/order.js';
|
||||
import { orderDetail, getTraces, sureReceived, cancelOrder } from '@/api/order.js';
|
||||
import { afterSaleReason } from '@/api/member';
|
||||
export default {
|
||||
components: { card },
|
||||
name: 'order-detail',
|
||||
data () {
|
||||
return {
|
||||
order: {}, // 订单详情数据
|
||||
progressList: [], // 订单流程
|
||||
logistics: [] // 物流数据
|
||||
logistics: [], // 物流数据
|
||||
cancelParams: { // 取消售后参数
|
||||
orderSn: '',
|
||||
reason: ''
|
||||
},
|
||||
cancelAvail: false, // 取消订单modal控制
|
||||
cancelReason: [] // 取消订单原因
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
@ -139,6 +162,46 @@ export default {
|
|||
this.logistics = res.result
|
||||
}
|
||||
})
|
||||
},
|
||||
received (sn) { // 确认收货
|
||||
sureReceived(sn).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('确认收货成功')
|
||||
this.getDetail()
|
||||
}
|
||||
})
|
||||
},
|
||||
goPay (sn) { // 去支付
|
||||
this.$router.push({path: '/payment', query: {orderType: 'ORDER', sn}});
|
||||
},
|
||||
applyAfterSale (sn) { // 申请售后
|
||||
this.$router.push({name: 'ApplyAfterSale', query: {sn: sn}})
|
||||
},
|
||||
comment (sn, goodsIndex) { // 评价
|
||||
this.$router.push({path: '/home/addEval', query: {sn, index: goodsIndex}})
|
||||
},
|
||||
complain (sn, goodsIndex) { // 投诉
|
||||
this.$router.push({name: 'Complain', query: {sn, index: goodsIndex}})
|
||||
},
|
||||
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.getDetail()
|
||||
this.cancelAvail = false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
@ -148,6 +211,9 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mb_5{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.order-card {
|
||||
padding: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
@ -169,7 +235,7 @@ export default {
|
|||
.operation-time {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
/** 店铺名称 */
|
||||
|
|
|
@ -20,10 +20,10 @@
|
|||
</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-total
|
||||
show-sizer>
|
||||
</Page>
|
||||
<Spin v-if="loading" fix></Spin>
|
||||
|
@ -41,7 +41,7 @@ export default {
|
|||
'已使用',
|
||||
'已过期'
|
||||
],
|
||||
statusList: ['NEW', 'USED', 'EXPIRE'],
|
||||
statusList: ['NEW', 'USED', 'EXPIRE'], // 优惠券状态
|
||||
loading: false, // 列表加载状态
|
||||
params: { // 请求参数
|
||||
pageNumber: 1,
|
||||
|
@ -86,7 +86,7 @@ export default {
|
|||
},
|
||||
|
||||
changePageSize (val) { // 分页改变页数
|
||||
this.pageNumber = 1;
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
|
|
|
@ -72,15 +72,16 @@
|
|||
<!-- 分页 -->
|
||||
<div class="page-size">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:current="walletForm.pageNumber"
|
||||
:total="logColumnsData.total"
|
||||
:page-size="searchForm.pageSize"
|
||||
:page-size="walletForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
transfer
|
||||
></Page>
|
||||
</div>
|
||||
</TabPane>
|
||||
|
@ -93,15 +94,16 @@
|
|||
<!-- 分页 -->
|
||||
<div class="page-size">
|
||||
<Page
|
||||
:current="rechargeSearchForm.pageNumber"
|
||||
:current="rechargeForm.pageNumber"
|
||||
:total="rechargeListData.total"
|
||||
:page-size="rechargeSearchForm.pageSize"
|
||||
:page-size="rechargeForm.pageSize"
|
||||
@on-change="rechargeChangePage"
|
||||
@on-page-size-change="rechargeChangePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
transfer
|
||||
></Page>
|
||||
</div>
|
||||
</TabPane>
|
||||
|
@ -114,15 +116,16 @@
|
|||
<!-- 分页 -->
|
||||
<div class="page-size">
|
||||
<Page
|
||||
:current="withdrawApplySearchForm.pageNumber"
|
||||
:current="withdrawApplyForm.pageNumber"
|
||||
:total="withdrawApplyColumnsListData.total"
|
||||
:page-size="withdrawApplySearchForm.pageSize"
|
||||
:page-size="withdrawApplyForm.pageSize"
|
||||
@on-change="withdrawChangePage"
|
||||
@on-page-size-change="withdrawChangePageSize"
|
||||
:page-size-opts="[10, 20, 50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
transfer
|
||||
></Page>
|
||||
</div>
|
||||
</TabPane>
|
||||
|
@ -131,7 +134,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import card from '@/components/card';
|
||||
import {
|
||||
getMembersWallet,
|
||||
getDepositLog,
|
||||
|
@ -158,19 +160,19 @@ export default {
|
|||
price: 1
|
||||
},
|
||||
// 余额日志
|
||||
searchForm: {
|
||||
walletForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
// 充值记录
|
||||
rechargeSearchForm: {
|
||||
rechargeForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10 // 页面大小
|
||||
},
|
||||
// 提现记录
|
||||
withdrawApplySearchForm: {
|
||||
withdrawApplyForm: {
|
||||
// 搜索框初始化对象
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 10 // 页面大小
|
||||
|
@ -358,17 +360,17 @@ export default {
|
|||
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) => {
|
||||
getDepositLog(this.walletForm).then((res) => {
|
||||
if (res.message === 'success') {
|
||||
this.logColumnsData = res.result;
|
||||
}
|
||||
|
@ -390,7 +392,7 @@ export default {
|
|||
},
|
||||
// 充值记录
|
||||
getRechargeData () {
|
||||
getRecharge(this.rechargeSearchForm).then((res) => {
|
||||
getRecharge(this.rechargeForm).then((res) => {
|
||||
if (res.message === 'success') {
|
||||
this.rechargeListData = res.result;
|
||||
}
|
||||
|
@ -398,7 +400,7 @@ export default {
|
|||
},
|
||||
// 提现记录
|
||||
getWithdrawApplyData () {
|
||||
getWithdrawApply(this.withdrawApplySearchForm).then((res) => {
|
||||
getWithdrawApply(this.withdrawApplyForm).then((res) => {
|
||||
if (res.message === 'success') {
|
||||
this.withdrawApplyColumnsListData = res.result;
|
||||
}
|
||||
|
@ -406,29 +408,32 @@ export default {
|
|||
},
|
||||
// 余额日志
|
||||
changePage (v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.walletForm.pageNumber = v;
|
||||
this.init();
|
||||
},
|
||||
changePageSize (v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.walletForm.pageNumber = 1;
|
||||
this.walletForm.pageSize = v;
|
||||
this.init();
|
||||
},
|
||||
// 充值记录
|
||||
rechargeChangePage (v) {
|
||||
this.rechargeSearchForm.pageNumber = v;
|
||||
this.rechargeForm.pageNumber = v;
|
||||
this.getRechargeData();
|
||||
},
|
||||
rechargeChangePageSize (v) {
|
||||
this.rechargeSearchForm.pageSize = v;
|
||||
this.rechargeForm.pageNumber = 1;
|
||||
this.rechargeForm.pageSize = v;
|
||||
this.getRechargeData();
|
||||
},
|
||||
// 提现记录
|
||||
withdrawChangePage (v) {
|
||||
this.withdrawApplySearchForm.pageNumber = v;
|
||||
this.withdrawApplyForm.pageNumber = v;
|
||||
this.getWithdrawApplyData();
|
||||
},
|
||||
withdrawChangePageSize (v) {
|
||||
this.withdrawApplySearchForm.pageSize = v;
|
||||
this.withdrawApplyForm.pageNumber = 1;
|
||||
this.withdrawApplyForm.pageSize = v;
|
||||
this.getWithdrawApplyData();
|
||||
},
|
||||
// 弹出在线充值框
|
||||
|
@ -456,6 +461,7 @@ export default {
|
|||
this.withdrawApplyFormData.price = 1;
|
||||
this.withdrawApplyModal = true;
|
||||
},
|
||||
// 提现
|
||||
withdrawal () {
|
||||
this.$refs['withdrawApplyFormData'].validate((valid) => {
|
||||
if (valid) {
|
||||
|
@ -496,7 +502,5 @@ export default {
|
|||
.ivu-btn {
|
||||
margin: 0 4px;
|
||||
}
|
||||
.fontsize_48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
@ -91,7 +91,7 @@ export default {
|
|||
this.getList()
|
||||
},
|
||||
changePageSize (val) { // 修改页数
|
||||
this.pageNumber = 1;
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
|
|
|
@ -101,12 +101,6 @@
|
|||
}}</span
|
||||
>
|
||||
</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
|
||||
|
@ -266,7 +260,7 @@
|
|||
<div>
|
||||
<span>应付金额:</span
|
||||
><span class="actrual-price">{{
|
||||
priceDetailDTO.billPrice | unitPrice("¥")
|
||||
priceDetailDTO.flowPrice | unitPrice("¥")
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -310,7 +304,6 @@ import {
|
|||
couponNum
|
||||
} from '@/api/cart';
|
||||
import { canUseCouponList } from '@/api/member.js';
|
||||
import { getLogo } from '@/api/common.js';
|
||||
export default {
|
||||
name: 'Pay',
|
||||
components: { invoiceModal, addressManage },
|
||||
|
@ -332,12 +325,6 @@ export default {
|
|||
totalPoint: 100,
|
||||
noGoods: 0
|
||||
},
|
||||
deliveryList: [
|
||||
// 物流
|
||||
// {value: 'SELF_PICK_UP', label: '自提'},
|
||||
{ value: 'LOGISTICS', label: '物流' }
|
||||
// {value: 'LOCAL_TOWN_DELIVERY', label: '同城配送'}
|
||||
],
|
||||
addressList: [], // 地址列表
|
||||
selectedAddress: {}, // 所选地址
|
||||
goodsList: [], // 商品列表
|
||||
|
@ -355,6 +342,7 @@ export default {
|
|||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init () {
|
||||
this.getGoodsDetail();
|
||||
},
|
||||
|
@ -515,14 +503,6 @@ export default {
|
|||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
selectDelivery (delivery) {
|
||||
// 选择配送方式
|
||||
let params = {
|
||||
way: this.$route.query.way,
|
||||
shippingMethod: delivery.value
|
||||
};
|
||||
shippingMethod(params).then((res) => {});
|
||||
},
|
||||
useCoupon (id, used) {
|
||||
// 使用优惠券
|
||||
let params = {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="pay-done">
|
||||
<BaseHeader></BaseHeader>
|
||||
<div class="pay-done-box">
|
||||
<img src="../../assets/images/pay-success.png">
|
||||
|
@ -14,7 +14,10 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PayDone'
|
||||
name: 'PayDone',
|
||||
mounted () {
|
||||
document.querySelector('.pay-done').style.height = window.innerHeight + 'px'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
@ -23,7 +26,6 @@ export default {
|
|||
margin: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.pay-btn{
|
||||
|
|
|
@ -66,6 +66,7 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 获取订单详情
|
||||
getTradeDetail () {
|
||||
const params = this.$route.query;
|
||||
params.clientType = 'PC'
|
||||
|
@ -127,7 +128,6 @@ export default {
|
|||
font-size: 21px;
|
||||
|
||||
}
|
||||
|
||||
.-box-item {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
|
|
|
@ -0,0 +1,154 @@
|
|||
<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);
|
||||
this.interval = null;
|
||||
}
|
||||
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.interval = null;
|
||||
this.$router.push({path: '/payDone', query: {orderType: this.$route.query.orderType}});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
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>
|
|
@ -46,9 +46,9 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 获取支付二维码
|
||||
handlePay () {
|
||||
const params = this.$route.query;
|
||||
|
||||
pay(params).then(res => {
|
||||
if (res.success) {
|
||||
this.qrcode = res.result;
|
||||
|
|
|
@ -68,6 +68,10 @@ export default {
|
|||
nowHour: new Date().getHours() // 当前小时数
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
// 销毁前清除定时器
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
watch: {
|
||||
currIndex (val) {
|
||||
clearInterval(this.interval)
|
||||
|
|
|
@ -254,6 +254,7 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 下一步
|
||||
next () {
|
||||
this.$refs.firstForm.validate((valid) => {
|
||||
if (valid) {
|
||||
|
@ -274,9 +275,8 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
// 地址选择回显
|
||||
selectedRegion (item) {
|
||||
console.log(item);
|
||||
// 地址选择回显
|
||||
this.$set(this.form, 'storeAddressIdPath', item[0].toString());
|
||||
this.$set(
|
||||
this.form,
|
||||
|
@ -284,6 +284,7 @@ export default {
|
|||
item[1].toString().replace(/\s/g, '')
|
||||
);
|
||||
},
|
||||
// 上传之前
|
||||
beforeUpload () {
|
||||
this.uploadLoading = true;
|
||||
if (this.form.licencePhoto.length >= 3) {
|
||||
|
@ -291,6 +292,7 @@ export default {
|
|||
return false;
|
||||
}
|
||||
},
|
||||
// 上传之前
|
||||
beforeUpload1 () {
|
||||
this.uploadLoading1 = true;
|
||||
if (this.form.legalPhoto.length >= 3) {
|
||||
|
@ -298,16 +300,24 @@ export default {
|
|||
return false;
|
||||
}
|
||||
},
|
||||
// 上传成功回调
|
||||
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);
|
||||
},
|
||||
// 上传失败
|
||||
uploadErr () {
|
||||
this.uploadLoading = false;
|
||||
this.uploadLoading1 = false;
|
||||
},
|
||||
// 上传失败回调
|
||||
handleFormatError (file) {
|
||||
this.uploadLoading = false;
|
||||
this.uploadLoading1 = false;
|
||||
|
@ -316,6 +326,7 @@ export default {
|
|||
desc: '上传文件格式不正确'
|
||||
});
|
||||
},
|
||||
// 上传大小限制
|
||||
handleMaxSize (file) {
|
||||
this.uploadLoading = false;
|
||||
this.uploadLoading1 = false;
|
||||
|
@ -324,21 +335,19 @@ export default {
|
|||
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');
|
||||
if (Object.keys(this.content).length) {
|
||||
if (Object.keys(this.content).length) { // 处理回显数据
|
||||
this.form = JSON.parse(JSON.stringify(this.content));
|
||||
if (this.form.licencePhoto) {
|
||||
this.form.legalPhoto = this.content.legalPhoto.split(',');
|
|
@ -70,6 +70,7 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 下一步
|
||||
next () {
|
||||
this.$refs.secondForm.validate((valid) => {
|
||||
if (valid) {
|
|
@ -39,9 +39,9 @@
|
|||
</template>
|
||||
<script>
|
||||
import { agreement, applyStatus } from '@/api/shopentry';
|
||||
import firstApply from './first-apply';
|
||||
import secondApply from './second-apply';
|
||||
import thirdApply from './third-apply';
|
||||
import firstApply from './FirstApply';
|
||||
import secondApply from './SecondApply';
|
||||
import thirdApply from './ThirdApply';
|
||||
export default {
|
||||
components: {
|
||||
firstApply,
|
||||
|
@ -129,10 +129,10 @@ export default {
|
|||
this.$forceUpdate();
|
||||
})
|
||||
}
|
||||
console.log(33333333333333);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 下一步
|
||||
nextPage (step) {
|
||||
this.currentIndex = step;
|
||||
}
|
|
@ -61,12 +61,6 @@
|
|||
</Select>
|
||||
</FormItem>
|
||||
<FormItem prop="storeCenter" label="店铺定位">
|
||||
<!-- <Input
|
||||
type="text"
|
||||
v-model="form.storeCenter"
|
||||
readonly
|
||||
placeholder="点击右侧按钮选择店铺位置"
|
||||
/> -->
|
||||
<Button
|
||||
type="info"
|
||||
v-if="!form.storeCenter"
|
||||
|
@ -140,6 +134,7 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
// 下一步
|
||||
next () {
|
||||
this.$refs.thirdForm.validate((valid) => {
|
||||
if (valid) {
|
||||
|
@ -161,6 +156,7 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
// 上传之前
|
||||
beforeUpload () {
|
||||
this.uploadLoading = true;
|
||||
if (this.form.storeLogo.length >= 3) {
|
||||
|
@ -168,12 +164,12 @@ export default {
|
|||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// 上传成功回调
|
||||
handleSuccess (res, file) {
|
||||
this.uploadLoading = false;
|
||||
this.form.storeLogo.push(res.result);
|
||||
},
|
||||
|
||||
// 上传格式错误
|
||||
handleFormatError (file) {
|
||||
this.uploadLoading = false;
|
||||
this.$Notice.warning({
|
||||
|
@ -181,6 +177,7 @@ export default {
|
|||
desc: '上传文件格式不正确'
|
||||
});
|
||||
},
|
||||
// 上传大小限制
|
||||
handleMaxSize (file) {
|
||||
this.uploadLoading = false;
|
||||
this.$Notice.warning({
|
||||
|
@ -188,24 +185,28 @@ export default {
|
|||
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;
|
|
@ -65,7 +65,7 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
userInfo () {
|
||||
userInfo () { // 用户信息
|
||||
return JSON.parse(Storage.getItem('userInfo'));
|
||||
}
|
||||
},
|
||||
|
|
|
@ -53,51 +53,6 @@ export function unitAddress (val) {
|
|||
return val.replace(/,/g, ' ');
|
||||
}
|
||||
|
||||
export function pointStatus (status) {
|
||||
switch (status) {
|
||||
case 'COMPLETE':
|
||||
return '已成交';
|
||||
case 'WITHDRAW':
|
||||
return '已撤回';
|
||||
case 'DEALING':
|
||||
return '交易中';
|
||||
case 'AUDITING':
|
||||
return '待审核';
|
||||
case 'NODEAL':
|
||||
return '未成交';
|
||||
case 'CANCEL':
|
||||
return '已取消';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据订单状态码返回订单状态
|
||||
* @param status_code
|
||||
* @returns {string}
|
||||
*/
|
||||
export function unixOrderStatus (statusCode) {
|
||||
switch (statusCode) {
|
||||
case 'NEW':
|
||||
return '新订单';
|
||||
case 'INTODB_ERROR':
|
||||
return '入库失败';
|
||||
case 'CONFIRM':
|
||||
return '已确认';
|
||||
case 'PAID_OFF':
|
||||
return '已付款';
|
||||
case 'SHIPPED':
|
||||
return '已发货';
|
||||
case 'ROG':
|
||||
return '已收货';
|
||||
case 'COMPLETE':
|
||||
return '已完成';
|
||||
case 'CANCELLED':
|
||||
return '已取消';
|
||||
case 'AFTER_SERVICE':
|
||||
return '售后中';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 13888888888 -> 138****8888
|
||||
* @param mobile
|
||||
|
@ -110,13 +65,3 @@ export function secrecyMobile (mobile) {
|
|||
}
|
||||
return mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3');
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化货品的规格
|
||||
* @param sku
|
||||
* @returns {*}
|
||||
*/
|
||||
export function formatterSkuSpec (sku) {
|
||||
if (!sku.spec_list || !sku.spec_list.length) return '';
|
||||
return sku.spec_list.map(spec => spec.spec_value).join(' - ');
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
* Add integers, wrapping at 2^32. This uses 16-bit operations internally
|
||||
* to work around bugs in some JS interpreters.
|
||||
*/
|
||||
function safe_add(x, y) {
|
||||
function safe_add (x, y) {
|
||||
var lsw = (x & 0xFFFF) + (y & 0xFFFF)
|
||||
var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
|
||||
return (msw << 16) | (lsw & 0xFFFF)
|
||||
|
@ -19,7 +19,7 @@ function safe_add(x, y) {
|
|||
/*
|
||||
* Bitwise rotate a 32-bit number to the left.
|
||||
*/
|
||||
function rol(num, cnt) {
|
||||
function rol (num, cnt) {
|
||||
return (num << cnt) | (num >>> (32 - cnt))
|
||||
}
|
||||
|
||||
|
@ -42,7 +42,7 @@ function hh(a, b, c, d, x, s, t) {
|
|||
return cmn(b ^ c ^ d, a, b, x, s, t)
|
||||
}
|
||||
|
||||
function ii(a, b, c, d, x, s, t) {
|
||||
function ii (a, b, c, d, x, s, t) {
|
||||
return cmn(c ^ (b | (~d)), a, b, x, s, t)
|
||||
}
|
||||
|
||||
|
@ -50,7 +50,7 @@ function ii(a, b, c, d, x, s, t) {
|
|||
* Calculate the MD5 of an array of little-endian words, producing an array
|
||||
* of little-endian words.
|
||||
*/
|
||||
function coreMD5(x) {
|
||||
function coreMD5 (x) {
|
||||
var a = 1732584193
|
||||
var b = -271733879
|
||||
var c = -1732584194
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
// import Vue from 'vue';
|
||||
import axios from 'axios';
|
||||
import https from 'https';
|
||||
import { Message, Spin, Modal } from 'view-design';
|
||||
|
@ -8,6 +7,7 @@ import router from '../router/index.js';
|
|||
import store from '../vuex/store';
|
||||
import { handleRefreshToken } from '@/api/index';
|
||||
const qs = require('qs');
|
||||
// api地址
|
||||
export const buyerUrl =
|
||||
process.env.NODE_ENV === 'development'
|
||||
? config.api_dev.buyer
|
||||
|
@ -180,13 +180,8 @@ export const Method = {
|
|||
};
|
||||
|
||||
export default function request (options) {
|
||||
// 如果是服务端或者是请求的刷新token,不需要检查token直接请求。
|
||||
// if (process.server || options.url.indexOf('passport/token') !== -1) {
|
||||
return service(options);
|
||||
// }
|
||||
// service(options).then(resolve).catch(reject)
|
||||
}
|
||||
|
||||
// 防抖闭包来一波
|
||||
function getTokenDebounce () {
|
||||
let lock = false;
|
||||
|
|
|
@ -8,9 +8,9 @@ const psl = require('psl');
|
|||
export default {
|
||||
setItem: (key, value, options = {}) => {
|
||||
if (process.client) {
|
||||
const p_psl = psl.parse(document.domain);
|
||||
let domain = p_psl.domain;
|
||||
if (/\d+\.\d+\.\d+\.\d+/.test(p_psl.input)) domain = p_psl.input;
|
||||
const pPsl = psl.parse(document.domain);
|
||||
let domain = pPsl.domain;
|
||||
if (/\d+\.\d+\.\d+\.\d+/.test(pPsl.input)) domain = pPsl.input;
|
||||
options = { domain, ...options };
|
||||
}
|
||||
Cookies.set(key, value, options);
|
||||
|
@ -20,9 +20,9 @@ export default {
|
|||
},
|
||||
removeItem: (key, options = {}) => {
|
||||
if (process.client) {
|
||||
const p_psl = psl.parse(document.domain);
|
||||
let domain = p_psl.domain;
|
||||
if (/\d+\.\d+\.\d+\.\d+/.test(p_psl.input)) domain = p_psl.input;
|
||||
const pPsl = psl.parse(document.domain);
|
||||
let domain = pPsl.domain;
|
||||
if (/\d+\.\d+\.\d+\.\d+/.test(pPsl.input)) domain = pPsl.input;
|
||||
options = { domain, ...options };
|
||||
}
|
||||
Cookies.remove(key, options);
|
||||
|
|
|
@ -3,7 +3,7 @@ import Router from 'vue-router';
|
|||
import Index from '@/pages/Index';
|
||||
const Login = resolve => require(['@/pages/Login'], resolve);
|
||||
const SignUp = resolve => require(['@/pages/SignUp'], resolve);
|
||||
const ForgetPassword = resolve => require(['@/pages/forgetPassword'], resolve);
|
||||
const ForgetPassword = resolve => require(['@/pages/ForgetPassword'], resolve);
|
||||
const GoodsList = resolve => require(['@/pages/GoodsList'], resolve);
|
||||
const GoodsDetail = resolve => require(['@/pages/GoodsDetail'], resolve);
|
||||
const ShoppingCart = resolve => require(['@/pages/ShoppingCart'], resolve);
|
||||
|
@ -11,9 +11,8 @@ const Cart = resolve => require(['@/pages/Cart'], resolve);
|
|||
const Pay = resolve => require(['@/pages/payment/Pay'], resolve);
|
||||
const PayDone = resolve => require(['@/pages/payment/PayDone'], resolve);
|
||||
const PayMent = resolve => require(['@/pages/payment/PayMent'], resolve);
|
||||
const ThirdPay = resolve => require(['@/pages/payment/thirdPay'], resolve);
|
||||
const Feedback = resolve => require(['@/pages/Feedback'], resolve);
|
||||
const Coupon = resolve => require(['@/pages/couponCenter'], resolve);
|
||||
const ThirdPay = resolve => require(['@/pages/payment/ThirdPay'], resolve);
|
||||
const Coupon = resolve => require(['@/pages/CouponCenter'], resolve);
|
||||
const seckill = resolve => require(['@/pages/promotion/seckill'], resolve);
|
||||
const article = resolve => require(['@/pages/article/index'], resolve);
|
||||
const PointMall = resolve => require(['@/pages/PointMall'], resolve);
|
||||
|
@ -37,7 +36,6 @@ const ApplyAfterSale = resolve => require(['@/pages/home/orderCenter/ApplyAfterS
|
|||
const Profile = resolve => require(['@/pages/home/memberCenter/Profile'], resolve);
|
||||
const AccountSafe = resolve => require(['@/pages/home/memberCenter/AccountSafe'], resolve);
|
||||
const ModifyPwd = resolve => require(['@/pages/home/memberCenter/ModifyPwd'], resolve);
|
||||
const AccountBind = resolve => require(['@/pages/home/memberCenter/AccountBind'], resolve);
|
||||
const Favorites = resolve => require(['@/pages/home/memberCenter/Favorites'], resolve);
|
||||
const Distribution = resolve => require(['@/pages/home/memberCenter/Distribution'], resolve);
|
||||
const CommentList = resolve => require(['@/pages/home/memberCenter/CommentList'], resolve); // 评价列表
|
||||
|
@ -45,7 +43,6 @@ const AddEval = resolve => require(['@/pages/home/memberCenter/evaluation/AddEva
|
|||
const EvalDetail = resolve => require(['@/pages/home/memberCenter/evaluation/EvalDetail'], resolve);
|
||||
const ComplainList = resolve => require(['@/pages/home/memberCenter/ComplainList'], resolve);
|
||||
const ComplainDetail = resolve => require(['@/pages/home/memberCenter/ComplainDetail'], resolve);
|
||||
const Invoice = resolve => require(['@/pages/home/memberCenter/Invoice'], resolve);
|
||||
const Point = resolve => require(['@/pages/home/memberCenter/Point'], resolve);
|
||||
const MsgList = resolve => require(['@/pages/home/memberCenter/memberMsg/MsgList'], resolve);
|
||||
const MsgDetail = resolve => require(['@/pages/home/memberCenter/memberMsg/MsgDetail'], resolve);
|
||||
|
@ -60,16 +57,13 @@ const MoneyManagement = resolve => require(['@/pages/home/userCenter/MoneyManage
|
|||
|
||||
const Home = resolve => require(['@/pages/user/Home'], resolve);
|
||||
|
||||
const MyShoppingCart = resolve => require(['@/pages/home/MyShoppingCart'], resolve);
|
||||
const Merchant = resolve => require(['@/pages/Merchant'], resolve);
|
||||
// const AllCategories = resolve => require(['@/pages/AllCategories'], resolve);
|
||||
const UserMain = resolve => require(['@/pages/home/Main'], resolve);
|
||||
|
||||
/**
|
||||
* 店铺入驻 首页
|
||||
* 店铺入驻 申请页
|
||||
* 店铺入驻
|
||||
*/
|
||||
const ShopEntry = resolve => require(['@/pages/shopEntry/shop-entry'], resolve);
|
||||
const ShopEntry = resolve => require(['@/pages/shopEntry/ShopEntry'], resolve);
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
|
@ -82,7 +76,7 @@ export default new Router({
|
|||
},
|
||||
{
|
||||
path: '/login', // 登陆
|
||||
name: 'Login',
|
||||
name: 'login',
|
||||
component: Login,
|
||||
meta: {
|
||||
title: 'LiLi 登录'
|
||||
|
@ -153,14 +147,6 @@ export default new Router({
|
|||
name: 'PayDone',
|
||||
component: PayDone
|
||||
},
|
||||
{
|
||||
path: '/feedback', // 反馈页面
|
||||
name: 'Feedback',
|
||||
component: Feedback,
|
||||
meta: {
|
||||
title: 'LiLi 登录'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/article', // 文章页面
|
||||
name: 'article',
|
||||
|
@ -253,11 +239,6 @@ export default new Router({
|
|||
name: 'ComplainDetail',
|
||||
component: ComplainDetail
|
||||
},
|
||||
{
|
||||
path: 'Invoice',
|
||||
name: 'Invoice',
|
||||
component: Invoice
|
||||
},
|
||||
{
|
||||
path: 'AccountSafe',
|
||||
name: 'AccountSafe',
|
||||
|
@ -290,11 +271,6 @@ export default new Router({
|
|||
name: 'Profile',
|
||||
component: Profile
|
||||
},
|
||||
{
|
||||
path: 'AccountBind',
|
||||
name: 'AccountBind',
|
||||
component: AccountBind
|
||||
},
|
||||
{
|
||||
path: 'AfterSale',
|
||||
name: 'AfterSale',
|
||||
|
@ -347,11 +323,6 @@ export default new Router({
|
|||
name: 'AfterSaleDetail',
|
||||
component: AfterSaleDetail,
|
||||
meta: {title: '售后详情'}
|
||||
},
|
||||
{
|
||||
path: 'MyShoppingCart',
|
||||
name: 'MyShoppingCart',
|
||||
component: MyShoppingCart
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
@ -9,3 +9,6 @@ export const SET_NAVLIST = (state, data) => {
|
|||
export const SET_CARTNUM = (state, data) => {
|
||||
state.cartNum = data
|
||||
}
|
||||
export const SET_HOTWORDS = (state, data) => {
|
||||
state.hotWordsList = data
|
||||
}
|
||||
|
|
|
@ -9,10 +9,11 @@ Vue.use(Vuex);
|
|||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
category: [], // 全部分类
|
||||
navList: [],
|
||||
navList: [], // 首页快捷导航
|
||||
cartNum: storage.getItem('cartNum') || 0,
|
||||
logoImg: require('@/assets/images/logo2.png')
|
||||
logoImg: require('@/assets/images/logo2.png'),
|
||||
hotWordsList: storage.getItem('hotWordsList'),
|
||||
category: localStorage.getItem('category')
|
||||
},
|
||||
getters,
|
||||
actions,
|
||||
|
|
16839
buyer/yarn.lock
16839
buyer/yarn.lock
File diff suppressed because it is too large
Load Diff
|
@ -52,7 +52,7 @@ service.interceptors.response.use(
|
|||
break;
|
||||
case 401:
|
||||
// 未登录 清除已登录状态
|
||||
Cookies.set("userInfo", "");
|
||||
Cookies.set("userInfoManager", "");
|
||||
setStore("accessToken", "");
|
||||
if (router.history.current.name != "login") {
|
||||
if (data.message !== null) {
|
||||
|
@ -95,7 +95,7 @@ service.interceptors.response.use(
|
|||
router.go(0)
|
||||
}
|
||||
} else {
|
||||
Cookies.set("userInfo", "");
|
||||
Cookies.set("userInfoManager", "");
|
||||
router.push('/login')
|
||||
}
|
||||
isRefreshToken = 0
|
||||
|
|
|
@ -320,7 +320,7 @@ util.initRouter = function (vm) { // 初始化路由
|
|||
frontRoute: 'error-page/404'
|
||||
}];
|
||||
// 判断用户是否登录
|
||||
let userInfo = Cookies.get('userInfo')
|
||||
let userInfo = Cookies.get('userInfoManager')
|
||||
if (!userInfo) {
|
||||
// 未登录
|
||||
return;
|
||||
|
|
|
@ -23,12 +23,12 @@ router.beforeEach((to, from, next) => {
|
|||
|
||||
const name = to.name;
|
||||
|
||||
if (!Cookies.get('userInfo') && name !== 'login') {
|
||||
if (!Cookies.get('userInfoManager') && name !== 'login') {
|
||||
// 判断是否已经登录且前往的页面不是登录页
|
||||
next({
|
||||
name: 'login'
|
||||
});
|
||||
} else if (Cookies.get('userInfo') && name === 'login') {
|
||||
} else if (Cookies.get('userInfoManager') && name === 'login') {
|
||||
// 判断是否已经登录且前往的是登录页
|
||||
Util.title();
|
||||
next({
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { otherRouter } from '@/router/router';
|
||||
import { router } from '@/router/index';
|
||||
import Util from '@/libs/util';
|
||||
import Cookies from 'js-cookie';
|
||||
import Vue from 'vue';
|
||||
|
||||
const app = {
|
||||
|
@ -14,11 +13,7 @@ const app = {
|
|||
currNavTitle: "", // 当前顶部菜单标题
|
||||
cachePage: [],
|
||||
lang: '',
|
||||
isFullScreen: false,
|
||||
openedSubmenuArr: [], // 要展开的菜单数组
|
||||
menuTheme: 'dark', // 主题
|
||||
themeColor: '',
|
||||
pageOpenedList: [{
|
||||
pageOpenedList: [{ // 打开过的页面,顶部历史菜单项
|
||||
title: '首页',
|
||||
path: '',
|
||||
name: 'home_index'
|
||||
|
@ -34,9 +29,7 @@ const app = {
|
|||
// 面包屑数组 左侧菜单
|
||||
menuList: [],
|
||||
tagsList: [...otherRouter.children], //这块是面包屑的内容不能删除
|
||||
routers: [
|
||||
otherRouter
|
||||
],
|
||||
routers: [otherRouter],
|
||||
messageCount: 0,
|
||||
// 在这里定义你不想要缓存的页面的name属性值(参见路由配置router.js)
|
||||
dontCache: ['test', 'test']
|
||||
|
@ -67,25 +60,11 @@ const app = {
|
|||
state.currNavTitle = v;
|
||||
},
|
||||
setTagsList(state, list) {
|
||||
|
||||
state.tagsList.push(...list);
|
||||
},
|
||||
updateMenulist(state, routes) {
|
||||
state.menuList = routes;
|
||||
},
|
||||
addOpenSubmenu(state, name) {
|
||||
let hasThisName = false;
|
||||
let isEmpty = false;
|
||||
if (name.length == 0) {
|
||||
isEmpty = true;
|
||||
}
|
||||
if (state.openedSubmenuArr.indexOf(name) > -1) {
|
||||
hasThisName = true;
|
||||
}
|
||||
if (!hasThisName && !isEmpty) {
|
||||
state.openedSubmenuArr.push(name);
|
||||
}
|
||||
},
|
||||
closePage(state, name) {
|
||||
state.cachePage.forEach((item, index) => {
|
||||
if (item == name) {
|
||||
|
@ -158,9 +137,6 @@ const app = {
|
|||
localStorage.lang = lang;
|
||||
Vue.config.lang = lang;
|
||||
},
|
||||
clearOpenedSubmenu(state) {
|
||||
state.openedSubmenuArr.length = 0;
|
||||
},
|
||||
setMessageCount(state, count) {
|
||||
state.messageCount = count;
|
||||
},
|
||||
|
|
|
@ -4,7 +4,7 @@ const user = {
|
|||
state: {},
|
||||
mutations: {
|
||||
logout () {
|
||||
Cookies.remove('userInfo');
|
||||
Cookies.remove('userInfoManager');
|
||||
// 清空打开的页面等数据
|
||||
localStorage.clear();
|
||||
}
|
||||
|
|
|
@ -88,9 +88,6 @@ export default {
|
|||
avatarPath() {
|
||||
return localStorage.avatorImgPath;
|
||||
},
|
||||
cachePage() {
|
||||
return this.$store.state.app.cachePage;
|
||||
},
|
||||
lang() {
|
||||
return this.$store.state.app.lang;
|
||||
}
|
||||
|
@ -99,11 +96,7 @@ export default {
|
|||
methods: {
|
||||
init() {
|
||||
// 菜单初始化
|
||||
let pathArr = util.setCurrentPath(this, this.$route.name);
|
||||
if (pathArr.length >= 2) {
|
||||
this.$store.commit("addOpenSubmenu", pathArr[1].name);
|
||||
}
|
||||
let userInfo = JSON.parse(Cookies.get("userInfo"));
|
||||
let userInfo = JSON.parse(Cookies.get("userInfoManager"));
|
||||
|
||||
this.userInfo = userInfo;
|
||||
this.checkTag(this.$route.name);
|
||||
|
@ -138,9 +131,7 @@ export default {
|
|||
}
|
||||
// 退出登录
|
||||
else if (name === "loginOut") {
|
||||
Cookies.set("accessToken", "");
|
||||
this.$store.commit("logout", this);
|
||||
this.$store.commit("clearOpenedSubmenu");
|
||||
this.setStore("accessToken", "");
|
||||
this.setStore("refreshToken", "");
|
||||
this.$router.push({ path: "/login" });
|
||||
|
@ -177,16 +168,9 @@ export default {
|
|||
watch: {
|
||||
$route(to, from) {
|
||||
this.$store.commit("setCurrentPageName", to.name);
|
||||
let pathArr = util.setCurrentPath(this, to.name);
|
||||
if (pathArr.length > 2) {
|
||||
this.$store.commit("addOpenSubmenu", pathArr[1].name);
|
||||
}
|
||||
this.checkTag(to.name);
|
||||
localStorage.currentPageName = to.name;
|
||||
},
|
||||
lang() {
|
||||
util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
|
|
|
@ -116,7 +116,6 @@ export default {
|
|||
content: "修改密码成功,需重新登录",
|
||||
onOk: () => {
|
||||
this.$store.commit("logout", this);
|
||||
this.$store.commit("clearOpenedSubmenu");
|
||||
this.$router.push({
|
||||
name: "login",
|
||||
});
|
||||
|
|
|
@ -70,7 +70,7 @@ export default {
|
|||
},
|
||||
watch: {
|
||||
category(val) {
|
||||
this.goodsParams.categoryPath = val[0];
|
||||
this.goodsParams.categoryPath = val[2];
|
||||
},
|
||||
selectedWay: {
|
||||
handler() {
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue