合并ma
lemon橪
commit
70f0bafd21
|
|
@ -63,17 +63,17 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
selectTags (item) {
|
||||
selectTags (item) { // 选择热门标签
|
||||
this.searchData = item;
|
||||
this.search();
|
||||
},
|
||||
search () {
|
||||
search () { // 全平台搜索商品
|
||||
this.$router.push({
|
||||
path: '/goodsList',
|
||||
query: { keyword: this.searchData }
|
||||
});
|
||||
},
|
||||
searchStore () {
|
||||
searchStore () { // 店铺搜索商品
|
||||
this.$emit('search', this.searchData)
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -151,8 +151,6 @@ export default {
|
|||
]
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
mounted () {},
|
||||
methods: {
|
||||
getCartList () { // 获取购物车列表
|
||||
this.loading = true
|
||||
|
|
|
|||
|
|
@ -44,12 +44,12 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
showCartNum (item) {
|
||||
showCartNum (item) { // 获取购物车数量
|
||||
if (this.userInfo && item.title === '购物车') {
|
||||
this.getCartList()
|
||||
}
|
||||
},
|
||||
clickBar (val) {
|
||||
clickBar (val) { // tabbar点击操作
|
||||
if (!this.userInfo) {
|
||||
this.$Modal.confirm({
|
||||
title: '请登录',
|
||||
|
|
@ -83,7 +83,7 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
openBlank (path) {
|
||||
openBlank (path) { // 新页面打开地址
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: path
|
||||
})
|
||||
|
|
|
|||
|
|
@ -13,11 +13,6 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'Main',
|
||||
data () {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
_Title: { // 描述内容
|
||||
type: null,
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
goArticle () { // 跳转
|
||||
goArticle () { // 跳转文章页
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/article'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default {
|
|||
time: { // 传入的初始时间
|
||||
default: 1718977559428
|
||||
},
|
||||
type: {
|
||||
type: { // 区分是在详情还是购物车调用
|
||||
default: 'goodsDetail', // 设置两个值，goodsDetail和cart，样式不同
|
||||
type: String
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
this.init()
|
||||
},
|
||||
methods: {
|
||||
countDown (val) {
|
||||
countDown (val) { // 倒计时方法
|
||||
function addZero (i) {
|
||||
return i < 10 ? '0' + i : i + '';
|
||||
}
|
||||
|
|
@ -58,8 +58,8 @@ export default {
|
|||
clearInterval(this.interval)
|
||||
}
|
||||
},
|
||||
init () {
|
||||
this.interval = setInterval((item) => {
|
||||
init () { // 初始化
|
||||
this.interval = setInterval(() => {
|
||||
this.countDown(this.time);
|
||||
}, 1000);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,10 +119,14 @@
|
|||
<span class="inventory"> {{skuDetail.weight}}kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-buy-car">
|
||||
<div class="add-buy-car" v-if="$route.query.way === 'POINT'">
|
||||
<Button type="error" :loading="loading" :disabled="skuDetail.quantity === 0" @click="pointPay">积分购买</Button>
|
||||
</div>
|
||||
<div class="add-buy-car" v-else>
|
||||
<Button type="error" :loading="loading" :disabled="skuDetail.quantity === 0" @click="addShoppingCartBtn">加入购物车</Button>
|
||||
<Button type="warning" :loading="loading1" :disabled="skuDetail.quantity === 0" @click="buyNow">立即购买</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -220,6 +224,22 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
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)
|
||||
|
|
@ -311,6 +331,7 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted () {
|
||||
// 用户登录才会判断是否收藏
|
||||
if (this.Cookies.getItem('userInfo')) {
|
||||
isCollection('GOODS', this.skuDetail.id).then(res => {
|
||||
if (res.success && res.result) {
|
||||
|
|
|
|||
|
|
@ -38,10 +38,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="remarks-bar">
|
||||
<span @click="searchByGrade('')" :class="{selectedBar: commentParams.grade === ''}">全部({{commentTypeNum.all}})</span>
|
||||
<span @click="searchByGrade('GOOD')" :class="{selectedBar: commentParams.grade === 'GOOD'}">好评({{commentTypeNum.good}})</span>
|
||||
<span @click="searchByGrade('MODERATE')" :class="{selectedBar: commentParams.grade === 'MODERATE'}">中评({{commentTypeNum.moderate}})</span>
|
||||
<span @click="searchByGrade('WORSE')" :class="{selectedBar: commentParams.grade === 'WORSE'}">差评({{commentTypeNum.worse}})</span>
|
||||
<span @click="viewByGrade('')" :class="{selectedBar: commentParams.grade === ''}">全部({{commentTypeNum.all}})</span>
|
||||
<span @click="viewByGrade('GOOD')" :class="{selectedBar: commentParams.grade === 'GOOD'}">好评({{commentTypeNum.good}})</span>
|
||||
<span @click="viewByGrade('MODERATE')" :class="{selectedBar: commentParams.grade === 'MODERATE'}">中评({{commentTypeNum.moderate}})</span>
|
||||
<span @click="viewByGrade('WORSE')" :class="{selectedBar: commentParams.grade === 'WORSE'}">差评({{commentTypeNum.worse}})</span>
|
||||
</div>
|
||||
<div style="text-align: center;margin-top: 20px;" v-if="commentList.length === 0">
|
||||
暂无评价数据
|
||||
|
|
@ -86,9 +86,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</TabPane>
|
||||
<!-- <TabPane label="商品问答">
|
||||
<ShowGoodsQuestion/>
|
||||
</TabPane> -->
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,7 +94,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ShowGoodsQuestion from '@/components/goodsDetail/ShowGoodsQuestion';
|
||||
import { goodsComment, goodsCommentNum } from '@/api/member.js';
|
||||
export default {
|
||||
name: 'ShowGoodsDetail',
|
||||
|
|
@ -122,21 +118,21 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
skuDetail () {
|
||||
skuDetail () { // skuId
|
||||
return this.detail.data;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeHeight (name) {
|
||||
changeHeight (name) { // 设置商品详情高度
|
||||
let heightCss = window.getComputedStyle(this.$refs[name]).height;
|
||||
heightCss = parseInt(heightCss.substr(0, heightCss.length - 2)) + 89;
|
||||
this.$refs.itemIntroDetail.style.height = heightCss + 'px';
|
||||
},
|
||||
changePageNum (val) {
|
||||
changePageNum (val) { // 修改评论页码
|
||||
this.commentParams.pageNumber = val;
|
||||
this.getList();
|
||||
},
|
||||
changePageSize (val) {
|
||||
changePageSize (val) { // 修改评论页数
|
||||
this.commentParams.pageNumber = 1;
|
||||
this.commentParams.pageSize = val;
|
||||
this.getList();
|
||||
|
|
@ -155,12 +151,12 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
searchByGrade (grade) {
|
||||
viewByGrade (grade) { // 好中差评切换
|
||||
this.$set(this.commentParams, 'grade', grade);
|
||||
this.commentParams.pageNumber = 1;
|
||||
this.getList();
|
||||
},
|
||||
tabClick (name) {
|
||||
tabClick (name) { // 商品详情和评价之间的tab切换
|
||||
if (name === 0) {
|
||||
this.$nextTick(() => {
|
||||
this.changeHeight('itemIntroGoods')
|
||||
|
|
@ -198,7 +194,7 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
handleScroll () {
|
||||
handleScroll () { // 监听页面滚动
|
||||
if (this.onceFlag) {
|
||||
this.$nextTick(() => {
|
||||
this.changeHeight('itemIntroGoods')
|
||||
|
|
@ -208,15 +204,12 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.$nextTick(() => { // 手动设置详情高度，解决无法撑开问题
|
||||
setTimeout(this.changeHeight('itemIntroGoods'), 2000);
|
||||
});
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
this.getList();
|
||||
},
|
||||
components: {
|
||||
ShowGoodsQuestion
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -283,14 +276,12 @@ export default {
|
|||
}
|
||||
.item-intro-detail{
|
||||
margin: 0 30px;
|
||||
// min-height: 1500px;
|
||||
width: 100%;
|
||||
}
|
||||
.item-intro-nav{
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
background-color: #F7F7F7;
|
||||
// border-bottom: 1px solid $theme_color;
|
||||
}
|
||||
.item-intro-nav ul{
|
||||
margin: 0px;
|
||||
|
|
@ -329,8 +320,6 @@ export default {
|
|||
width: 240px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
/* text-align: center; */
|
||||
/* background-color: #ccc; */
|
||||
}
|
||||
.item-param-title {
|
||||
color: #232323;
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<div v-if="true" class="question-list">
|
||||
<div class="-item" v-for="index in 6" :key="index">
|
||||
<!-- 提问 -->
|
||||
<div class="-item-put -item-div">
|
||||
<div class="-item-div-l blod">
|
||||
<Tag color="warning">问</Tag>
|
||||
有屏幕调节亮度吗
|
||||
</div>
|
||||
<div class="-item-div-r">2020年10月21日17:03:35</div>
|
||||
</div>
|
||||
<!-- 解答 -->
|
||||
<div class="-item-reply -item-div">
|
||||
<div class="-item-div-l">
|
||||
<Tag color="success">答</Tag>
|
||||
能调节，点屏幕上方有一条调整带，可正负2调整。
|
||||
</div>
|
||||
<div class="-item-div-r">2020年10月21日17:03:35</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="question-empty">
|
||||
<empty></empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.-item-div {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.-item-div-l {
|
||||
display: flex;
|
||||
@include content_color($light_content_color);
|
||||
}
|
||||
.-item-div-r {
|
||||
@include sub_color($light_content_color);
|
||||
}
|
||||
.blod {
|
||||
font-weight: bold;
|
||||
}
|
||||
.-item {
|
||||
margin: 10px 0;
|
||||
border-bottom: 1px solid $border_color;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="remarks-title">
|
||||
<span>售后保障</span>
|
||||
</div>
|
||||
<div class="item-protect-container">
|
||||
<div class="item-protect-box">
|
||||
<p class="item-protect-title-box">
|
||||
<Avatar style="background-color: #e4393c" icon="ribbon-a" />
|
||||
<span class="item-protect-title">卖家服务</span>
|
||||
</p>
|
||||
<p class="item-protect-detail">
|
||||
高品质敢承诺：7天无理由退货，30天免费换新，质量问题商家承担来回运费换新；如需发票，请在确认收货无误后联系商家开出。（注*发票不随货品一同发出）
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-protect-box">
|
||||
<p class="item-protect-title-box">
|
||||
<Avatar style="background-color: #e4393c" icon="cash" />
|
||||
<span class="item-protect-title">平台承诺</span>
|
||||
</p>
|
||||
<p class="item-protect-detail">
|
||||
平台卖家销售并发货的商品，由平台卖家提供发票和相应的售后服务。请您放心购买！<br> 注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-protect-box">
|
||||
<p class="item-protect-title-box">
|
||||
<Avatar style="background-color: #e4393c" icon="locked" />
|
||||
<span class="item-protect-title">正品行货</span>
|
||||
</p>
|
||||
<p class="item-protect-detail">
|
||||
BIT商城向您保证所售商品均为正品行货，BIT自营商品开具机打发票或电子发票。
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-protect-box">
|
||||
<p class="item-protect-title-box">
|
||||
<Avatar style="background-color: #e4393c" icon="settings" />
|
||||
<span class="item-protect-title">全国联保</span>
|
||||
</p>
|
||||
<p class="item-protect-detail">
|
||||
凭质保证书及BIT商城发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由BIT联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。BIT商城还为您提供具有竞争力的商品价格和运费政策，请您放心购买！<br><br> 注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ShowProductWarranty'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.remarks-title {
|
||||
padding-left: 15px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
font-weight: bolder;
|
||||
line-height: 36px;
|
||||
color: #666666;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
.item-protect-container {
|
||||
padding: 15px;
|
||||
}
|
||||
.item-protect-box {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.item-protect-title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.item-protect-title {
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
font-weight: bolder;
|
||||
color: $theme_color;
|
||||
}
|
||||
.item-protect-detail {
|
||||
padding-top: 5px;
|
||||
padding-left: 46px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -25,7 +25,6 @@
|
|||
</li>
|
||||
</ul>
|
||||
<ul class="detail">
|
||||
<!-- <li class="first hover-pointer" @click="handleClickTheme()">切换主题</li> -->
|
||||
<li class="first" v-show="!userInfo.username">
|
||||
<router-link :to="`/login?rePath=${$route.path}&query=${JSON.stringify($route.query)}`">
|
||||
<span style="border:none" class="tipsLogin">请登录</span>
|
||||
|
|
@ -148,31 +147,22 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
handleClickTheme () {
|
||||
this.themeType === 'light'
|
||||
? (this.themeType = 'dark')
|
||||
: (this.themeType = 'light');
|
||||
window.document.documentElement.setAttribute(
|
||||
'data-theme',
|
||||
this.themeType
|
||||
);
|
||||
},
|
||||
changeCity (city) {
|
||||
changeCity (city) { // 选择所在城市
|
||||
this.city = city;
|
||||
},
|
||||
goToPay () {
|
||||
goToPay () { // 跳转购物车
|
||||
let url = this.$router.resolve({
|
||||
path: '/cart'
|
||||
})
|
||||
window.open(url.href, '_blank')
|
||||
},
|
||||
myInfo () {
|
||||
myInfo () { // 跳转会员中心
|
||||
let url = this.$router.resolve({
|
||||
path: '/home'
|
||||
})
|
||||
window.open(url.href, '_blank')
|
||||
},
|
||||
signOutFun () {
|
||||
signOutFun () { // 退出登录
|
||||
storage.removeItem('accessToken');
|
||||
storage.removeItem('refreshToken');
|
||||
storage.removeItem('userInfo');
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
storeDetail () {
|
||||
storeDetail () { // 店铺详情
|
||||
return this.detail;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
goCartList () {
|
||||
goCartList () { // 跳转购物车页面
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: '/cart'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -67,14 +67,14 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
getArticleList () {
|
||||
getArticleList () { // 获取常见问题列表
|
||||
articleList(this.params).then(res => {
|
||||
if (res.success) {
|
||||
this.articleList = res.result.records
|
||||
}
|
||||
})
|
||||
},
|
||||
goArticle (id) {
|
||||
goArticle (id) { // 跳转文章详情
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/article',
|
||||
query: {id}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@ export default {
|
|||
options: this.data.options // 装修数据
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -50,9 +50,8 @@ export default {
|
|||
this.$emit('content', val);
|
||||
}
|
||||
},
|
||||
mounted () {},
|
||||
methods: {
|
||||
changeCurr (index) {
|
||||
changeCurr (index) { // 选择分类
|
||||
this.currentIndex = index;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export default {
|
|||
};
|
||||
},
|
||||
watch: {
|
||||
diffSeconds (val) {
|
||||
diffSeconds (val) { // 秒杀倒计时
|
||||
const hours = Math.floor(val / 3600);
|
||||
// 当前秒数 / 60，向下取整
|
||||
// 获取到所有分钟数 3600 / 60 = 60分钟
|
||||
|
|
@ -139,7 +139,7 @@ export default {
|
|||
}, 1000);
|
||||
}
|
||||
},
|
||||
goPromotion () {
|
||||
goPromotion () { // 跳转秒杀页面
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/seckill'
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
## 此组件为结算页面修改发票信息使用 后续可以复用到个人信息添加发票页面
|
||||
|
||||
### 目前没有参数，之后会设置一个参数接收历史的单位发票数据
|
||||
|
|
@ -69,7 +69,7 @@ export default {
|
|||
receiptContent: '不开发票', // 发票内容
|
||||
type: 1 // 1 个人 2 单位
|
||||
},
|
||||
ruleInline: {
|
||||
ruleInline: { // 验证规则
|
||||
receiptTitle: [{ required: true, message: '请填写公司名称' }],
|
||||
taxpayerId: [
|
||||
{ required: true, message: '请填写纳税人识别号' },
|
||||
|
|
@ -79,7 +79,7 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
save () {
|
||||
save () { // 保存发票
|
||||
if (this.invoiceForm.type === 1) {
|
||||
// 个人
|
||||
let flag = true;
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ export default {
|
|||
this.$emit('getAddress', this.addrContent);
|
||||
}
|
||||
},
|
||||
init () {
|
||||
init () { // 初始化地图
|
||||
AMapLoader.load({
|
||||
key: 'b440952723253aa9fe483e698057bf7d', // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: '', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default {
|
|||
props: ['addressId'],
|
||||
mounted () {},
|
||||
methods: {
|
||||
change (val, selectedData) {
|
||||
change (val, selectedData) { // 选择地区
|
||||
/**
|
||||
* @returns [regionId,region]
|
||||
*/
|
||||
|
|
@ -30,7 +30,7 @@ export default {
|
|||
selectedData[selectedData.length - 1].__label.split('/')
|
||||
]);
|
||||
},
|
||||
loadData (item, callback) {
|
||||
loadData (item, callback) { // 加载数据
|
||||
item.loading = true;
|
||||
getRegion(item.value).then((res) => {
|
||||
if (res.result.length <= 0) {
|
||||
|
|
@ -59,7 +59,7 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
async init () {
|
||||
async init () { // 初始化地图数据
|
||||
let data = await getRegion(0);
|
||||
let arr = [];
|
||||
data.result.forEach((item) => {
|
||||
|
|
|
|||
|
|
@ -209,7 +209,7 @@ export default {
|
|||
},
|
||||
deep: true
|
||||
},
|
||||
'$route': {
|
||||
'$route': { // 监听路由
|
||||
handler (val, oVal) {
|
||||
if (this.$route.query.categoryId) {
|
||||
let cateId = this.$route.query.categoryId.split(',')
|
||||
|
|
@ -373,6 +373,7 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted () {
|
||||
// 有分类id就根据id搜索
|
||||
if (this.$route.query.categoryId) {
|
||||
let cateId = this.$route.query.categoryId.split(',')
|
||||
Object.assign(this.params, this.$route.query)
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
#### 在组件上添加v-if来判断组件显隐
|
||||
|
||||
#### verifyType 验证格式[ 'LOGIN' ,'REGISTER' ]等，详情看接口文档
|
||||
#### verifyType 验证格式[ 'LOGIN' ,'REGISTER' ]
|
||||
|
||||
#### @change方法 获取回调，参数为对象 {status:false,distance:100} status 为回调状态，distance为移动距离
|
||||
|
||||
|
|
|
|||
|
|
@ -43,11 +43,11 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
mouseDown (e) {
|
||||
mouseDown (e) { // 鼠标按下操作，
|
||||
this.downX = e.clientX;
|
||||
this.flag = true;
|
||||
},
|
||||
mouseMove (e) {
|
||||
mouseMove (e) { // 鼠标移动
|
||||
if (this.flag) {
|
||||
let offset = e.clientX - this.downX;
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
mouseUp () {
|
||||
mouseUp () { // 鼠标抬起
|
||||
if (!this.flag) return false;
|
||||
this.flag = false;
|
||||
let params = {
|
||||
|
|
@ -83,7 +83,7 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
refresh () {
|
||||
refresh () { // 刷新验证图片
|
||||
this.flag = false;
|
||||
this.downX = 0;
|
||||
this.distance = 0;
|
||||
|
|
@ -91,7 +91,7 @@ export default {
|
|||
this.verifyText = '拖动滑块解锁';
|
||||
this.getImg();
|
||||
},
|
||||
getImg () {
|
||||
getImg () { // 获取验证图片
|
||||
getVerifyImg(this.type).then(res => {
|
||||
this.data = res.result;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -26,7 +26,3 @@ export function postVerifyImg (params) {
|
|||
headers: {uuid: storage.getItem('uuid')}
|
||||
});
|
||||
}
|
||||
|
||||
export function mouseup () {
|
||||
console.log(111);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ export default {
|
|||
name: cateName[index]
|
||||
});
|
||||
});
|
||||
console.log(cateArr);
|
||||
this.categoryBar = cateArr;
|
||||
this.goodsMsg = res.result;
|
||||
// 判断是否收藏
|
||||
|
|
|
|||
|
|
@ -1,171 +0,0 @@
|
|||
<template>
|
||||
<div style="background:#fff;">
|
||||
<BaseHeader></BaseHeader>
|
||||
<Search></Search>
|
||||
<drawer></drawer>
|
||||
<ShopHeader :detail="storeMsg"></ShopHeader>
|
||||
<div class="shop-item-path">
|
||||
<div class="shop-nav-container">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem to="/">首页</BreadcrumbItem>
|
||||
<BreadcrumbItem v-for="(item, index) in categoryBar" :to="goGoodsList(index)" target="_blank" :key="index">{{item.name}}</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
<div class="store-collect">
|
||||
<span class="mr_10" v-if="goodsMsg.data"><router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{goodsMsg.data.storeName}}</router-link></span>
|
||||
<span @click="collect" ><Icon type="ios-heart" :color="storeCollected ? '#ed3f14' : '#666'" />{{storeCollected?'已收藏店铺':'收藏店铺'}}</span>
|
||||
<span @click="connectCs(storeMsg.yzfSign)" class="ml_10"><Icon custom="icomoon icon-customer-service" />联系客服</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 商品信息展示 -->
|
||||
<ShowGoods v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoods>
|
||||
<!-- 商品详细展示 -->
|
||||
<ShowGoodsDetail v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoodsDetail>
|
||||
|
||||
<Spin size="large" fix v-if="isLoading"></Spin>
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Search from '@/components/Search';
|
||||
import ShopHeader from '@/components/header/ShopHeader';
|
||||
import ShowGoods from '@/components/goodsDetail/ShowGoods';
|
||||
import ShowGoodsDetail from '@/components/goodsDetail/ShowGoodsDetail';
|
||||
import ShowLikeGoods from '@/components/like';
|
||||
import { goodsSkuDetail } from '@/api/goods';
|
||||
import { cancelCollect, collectGoods, isCollection } from '@/api/member';
|
||||
import {getDetailById} from '@/api/shopentry'
|
||||
export default {
|
||||
name: 'GoodsDetail',
|
||||
beforeRouteEnter (to, from, next) {
|
||||
window.scrollTo(0, 0);
|
||||
next();
|
||||
},
|
||||
created () {
|
||||
this.getGoodsDetail();
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
goodsMsg: {}, // 商品信息
|
||||
isLoading: false, // 加载状态
|
||||
categoryBar: [], // 分类
|
||||
storeCollected: false, // 商品收藏
|
||||
storeMsg: {} // 店铺信息
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getGoodsDetail () {
|
||||
this.isLoading = true;
|
||||
const params = this.$route.query
|
||||
goodsSkuDetail(params).then((res) => {
|
||||
this.isLoading = false;
|
||||
if (res.success) {
|
||||
const result = res.result;
|
||||
const cateName = res.result.categoryName;
|
||||
const cateId = result.data.categoryPath.split(',');
|
||||
const cateArr = [];
|
||||
cateId.forEach((e, index) => { // 插入分类id和name
|
||||
cateArr.push({
|
||||
id: e,
|
||||
name: cateName[index]
|
||||
});
|
||||
});
|
||||
this.categoryBar = cateArr;
|
||||
this.goodsMsg = res.result;
|
||||
// 判断是否收藏
|
||||
if (this.Cookies.getItem('userInfo')) {
|
||||
isCollection('STORE', this.goodsMsg.data.storeId).then(res => {
|
||||
if (res.success && res.result) {
|
||||
this.storeCollected = true;
|
||||
}
|
||||
})
|
||||
}
|
||||
// 获取店铺信息
|
||||
getDetailById(this.goodsMsg.data.storeId).then(res => {
|
||||
if (res.success) {
|
||||
this.storeMsg = res.result
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$Message.error(res.message)
|
||||
this.$router.push('/')
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$router.push('/')
|
||||
});
|
||||
},
|
||||
goGoodsList (currIndex) { // 跳转商品列表
|
||||
const arr = []
|
||||
this.categoryBar.forEach((e, index) => {
|
||||
if (index <= currIndex) {
|
||||
arr.push(e.id)
|
||||
}
|
||||
})
|
||||
return location.origin + '/goodsList?categoryId=' + arr.toString()
|
||||
},
|
||||
async collect () { // 收藏店铺
|
||||
if (this.storeCollected) {
|
||||
let cancel = await cancelCollect('STORE', this.goodsMsg.data.storeId)
|
||||
if (cancel.success) {
|
||||
this.$Message.success('已取消收藏')
|
||||
this.storeCollected = false;
|
||||
}
|
||||
} else {
|
||||
let collect = await collectGoods('STORE', this.goodsMsg.data.storeId);
|
||||
if (collect.code === 200) {
|
||||
this.storeCollected = true;
|
||||
this.$Message.success('收藏店铺成功,可以前往个人中心我的收藏查看');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.query.skuId': function (val) {
|
||||
location.reload();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
components: {
|
||||
Search,
|
||||
ShopHeader,
|
||||
ShowGoods,
|
||||
ShowGoodsDetail,
|
||||
ShowLikeGoods
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.shop-item-path {
|
||||
height: 38px;
|
||||
@include background_color($light_background_color);
|
||||
line-height: 38px;
|
||||
color: #2c2c2c;
|
||||
}
|
||||
|
||||
.like {
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
@include white_background_color();
|
||||
}
|
||||
|
||||
.shop-nav-container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
.store-collect {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 0;
|
||||
color: #999;
|
||||
span{
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -63,7 +63,8 @@ export default {
|
|||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
pointsGoodsCategoryId: ''
|
||||
}
|
||||
},
|
||||
total: 0 // 商品总数
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
@ -76,6 +77,7 @@ export default {
|
|||
pointGoods(this.params).then(res => {
|
||||
if (res.success) {
|
||||
this.goodsList = res.result.records
|
||||
this.total = res.result.total
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -94,7 +96,7 @@ export default {
|
|||
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: {skuId, goodsId}
|
||||
query: {skuId, goodsId, way: 'POINT'}
|
||||
})
|
||||
window.open(routerUrl.href, '_blank')
|
||||
},
|
||||
|
|
|
|||
|
|
@ -25,13 +25,6 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'AccountBind',
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<card _Title="账户安全"/>
|
||||
|
||||
<div class="safeList">
|
||||
<!-- 密码 -->
|
||||
<Row class="safeItem">
|
||||
|
|
@ -16,102 +15,11 @@
|
|||
<Button @click="modifyPwd">修改密码</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<!-- 邮箱 -->
|
||||
<!-- <Row class="safeItem">
|
||||
<Col :span="2">
|
||||
<Icon size="40" type="md-mail" />
|
||||
</Col>
|
||||
<Col :span="16">
|
||||
<div class="setDivItem">
|
||||
邮箱验证
|
||||
</div>
|
||||
<div class="setDivItem " v-if="true">
|
||||
您的验证邮箱：<span>xxxxx</span>
|
||||
</div>
|
||||
<div class="setDivItem " v-else>
|
||||
|
||||
</div>
|
||||
</Col>
|
||||
<Col :span="4">
|
||||
<Button>修改邮箱</Button>
|
||||
</Col>
|
||||
</Row> -->
|
||||
<!-- 手机验证 -->
|
||||
<!-- <Row class="safeItem">
|
||||
<Col :span="2">
|
||||
<Icon size="40" type="ios-phone-portrait" />
|
||||
</Col>
|
||||
<Col :span="16">
|
||||
<div class="setDivItem">
|
||||
手机验证
|
||||
</div>
|
||||
<div class="setDivItem " v-if="true">
|
||||
您的手机号：<span>xxxxx</span>
|
||||
</div>
|
||||
<div class="setDivItem " v-else>
|
||||
|
||||
</div>
|
||||
</Col>
|
||||
<Col :span="4">
|
||||
<Button>立即验证</Button>
|
||||
</Col>
|
||||
</Row> -->
|
||||
<!-- 支付密码 -->
|
||||
<!-- <Row class="safeItem">
|
||||
<Col :span="2">
|
||||
<Icon size="40" type="md-lock" />
|
||||
</Col>
|
||||
<Col :span="16">
|
||||
<div class="setDivItem">
|
||||
支付密码
|
||||
</div>
|
||||
<div class="setDivItem " v-if="true">
|
||||
安全认证：<span>xxxxx</span>
|
||||
</div>
|
||||
<div class="setDivItem " v-else>
|
||||
|
||||
</div>
|
||||
</Col>
|
||||
<Col :span="4">
|
||||
<Button @click="goModifyPwd" v-if="pwdStatus == '设置密码'" type="error">{{pwdStatus}}</Button>
|
||||
<Dropdown style="margin-left: 20px" v-if="pwdStatus == '修改密码'" @on-click="selectPwd">
|
||||
<Button type="primary">
|
||||
修改密码
|
||||
<Icon type="ios-arrow-down"></Icon>
|
||||
</Button>
|
||||
<DropdownMenu slot="list" on-click="selectPwd">
|
||||
<DropdownItem name = "1">修改密码</DropdownItem>
|
||||
<DropdownItem name = "2">重置密码</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</Col>
|
||||
</Row> -->
|
||||
<!-- 实名 -->
|
||||
<!-- <Row class="safeItem">
|
||||
<Col :span="2">
|
||||
<Icon size="40" type="md-card" />
|
||||
</Col>
|
||||
<Col :span="16">
|
||||
<div class="setDivItem">
|
||||
实名认证
|
||||
</div>
|
||||
<div class="setDivItem " v-if="true">
|
||||
已认证：<span>xxxxx</span>
|
||||
</div>
|
||||
<div class="setDivItem " v-else>
|
||||
您还未实名认证该账户，立即实名认证可加快提现速度。
|
||||
</div>
|
||||
</Col>
|
||||
<Col :span="4">
|
||||
<Button>立即认证</Button>
|
||||
</Col>
|
||||
</Row> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import card from '@/components/card'
|
||||
import {
|
||||
getPwdStatus
|
||||
} from '@/api/account';
|
||||
|
|
@ -122,7 +30,6 @@ export default {
|
|||
pwdStatus: '' // 密码状态
|
||||
}
|
||||
},
|
||||
components: {card},
|
||||
mounted () {
|
||||
this.getPwdStatus()
|
||||
},
|
||||
|
|
@ -131,10 +38,7 @@ export default {
|
|||
goModifyPwd () {
|
||||
this.$router.push({name: 'ModifyPwd', query: { status: 2 }})
|
||||
},
|
||||
selectPwd (value) {
|
||||
this.$router.push({name: 'ModifyPwd', query: { status: value }})
|
||||
},
|
||||
modifyPwd () {
|
||||
modifyPwd () { // 修改密码
|
||||
this.$router.push({name: 'ModifyPwd', query: { status: 1 }})
|
||||
},
|
||||
// 获取密码状态
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div class="title order-item-title">
|
||||
<span>订单号:{{item.orderNo}}</span>
|
||||
<span class="color999 ml_10">{{item.createTime}}</span>
|
||||
<span class="hover-pointer fontsize_12 eval-detail" @click="evaluate(item.id)">评价详情</span>
|
||||
<span class="hover-pointer fontsize_12 eval-detail" @click="evaluateDetail(item.id)">评价详情</span>
|
||||
</div>
|
||||
<Row class="order-item-view">
|
||||
<i-col span="12" class="item-view-name">
|
||||
|
|
@ -80,7 +80,7 @@ export default {
|
|||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList () {
|
||||
getList () { // 获取评价列表
|
||||
evolutionList(this.params).then(res => {
|
||||
if (res.success) {
|
||||
const list = res.result.records;
|
||||
|
|
@ -92,19 +92,16 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
changePageNum (val) {
|
||||
changePageNum (val) { // 修改页码
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
changePageSize (val) {
|
||||
changePageSize (val) { // 修改页数
|
||||
this.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
changeIndex (index) {
|
||||
console.log(index);
|
||||
},
|
||||
evaluate (id) {
|
||||
evaluateDetail (id) { // 跳转评价详情
|
||||
this.$router.push({path: '/home/evalDetail', query: { id }})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -141,23 +141,23 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail () {
|
||||
getDetail () { // 获取投诉详情
|
||||
getComplainDetail(this.$route.query.id).then(res => {
|
||||
if (res.success) this.detail = res.result
|
||||
})
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: {skuId, goodsId}
|
||||
})
|
||||
window.open(routerUrl.href, '_blank')
|
||||
},
|
||||
handleView (name) {
|
||||
handleView (name) { // 预览图片
|
||||
this.previewImage = name;
|
||||
this.visible = true;
|
||||
},
|
||||
// 回复
|
||||
// 回复消息
|
||||
handleSubmit () {
|
||||
if (this.params.content === '') {
|
||||
this.$Message.error('请填写对话内容');
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div class="title order-item-title">
|
||||
<span>投诉单号:{{item.id}}</span>
|
||||
<span class="color999 ml_10">{{item.createTime}}</span>
|
||||
<span class="hover-pointer fontsize_12 eval-detail" @click="detail(item.id)">投诉详情</span>
|
||||
<span class="hover-pointer fontsize_12 eval-detail" @click="goDetail(item.id)">投诉详情</span>
|
||||
<span class="hover-pointer fontsize_12 eval-detail" style="right: 90px" v-if="item.complainStatus != 'EXPIRED' && item.complainStatus != 'CANCEL'" @click="cancel(item.id)">取消投诉</span>
|
||||
</div>
|
||||
<Row class="order-item-view">
|
||||
|
|
@ -93,7 +93,7 @@ export default {
|
|||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList () {
|
||||
getList () { // 获取投诉列表
|
||||
complainList(this.params).then(res => {
|
||||
if (res.success) {
|
||||
const list = res.result.records;
|
||||
|
|
@ -102,16 +102,16 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
changePageNum (val) {
|
||||
changePageNum (val) { // 改变页码
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
changePageSize (val) {
|
||||
changePageSize (val) { // 改变页数
|
||||
this.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
cancel (id) {
|
||||
cancel (id) { // 取消投诉
|
||||
this.$Modal.confirm({
|
||||
title: '取消投诉',
|
||||
content: '<p>确定取消投诉吗？</p>',
|
||||
|
|
@ -126,7 +126,7 @@ export default {
|
|||
onCancel: () => { }
|
||||
});
|
||||
},
|
||||
detail (id) {
|
||||
goDetail (id) { // 跳转投诉详情
|
||||
this.$router.push({path: '/home/complainDetail', query: { id }})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ export default {
|
|||
this.distribution()
|
||||
},
|
||||
methods: {
|
||||
apply () {
|
||||
apply () { // 申请成为分销商
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
this.applyLoading = true
|
||||
|
|
@ -239,10 +239,10 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
qrcodeData (data64) {
|
||||
qrcodeData (data64) { // 二维码base64地址
|
||||
this.base64Img = data64
|
||||
},
|
||||
downloadQrcode () {
|
||||
downloadQrcode () { // 下载二维码
|
||||
let a = document.createElement('a'); // 生成一个a元素
|
||||
let event = new MouseEvent('click'); // 创建一个单击事件
|
||||
a.download = this.goodsNameCurr || 'photo'
|
||||
|
|
@ -265,11 +265,11 @@ export default {
|
|||
this.getLog()
|
||||
}
|
||||
},
|
||||
changePage (val) {
|
||||
changePage (val) { // 修改页码
|
||||
this.params.pageNumber = val;
|
||||
this.getGoodsData()
|
||||
},
|
||||
changePageLog (val) {
|
||||
changePageLog (val) { // 修改页码 日志
|
||||
this.logParams.pageNumber = val;
|
||||
this.getLog()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -68,19 +68,19 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
getList () {
|
||||
getList () { // 获取收藏列表
|
||||
this.spinShow = true
|
||||
collectList(this.params).then(res => {
|
||||
this.spinShow = false
|
||||
if (res.success) this.list = res.result.records;
|
||||
})
|
||||
},
|
||||
change (index) {
|
||||
change (index) { // tab栏切换
|
||||
if (index === 0) { this.params.type = 'GOODS' }
|
||||
if (index === 1) { this.params.type = 'SHOP' }
|
||||
this.getList()
|
||||
},
|
||||
cancel (id) {
|
||||
cancel (id) { // 取消收藏
|
||||
let typeName = this.params.type === 'GOODS' ? '商品' : '店铺'
|
||||
this.$Modal.confirm({
|
||||
title: 'Title',
|
||||
|
|
@ -94,23 +94,23 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
changePageNum (val) {
|
||||
changePageNum (val) { // 修改页码
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
changePageSize (val) {
|
||||
changePageSize (val) { // 修改页数
|
||||
this.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
buynow (skuId, goodsId) {
|
||||
buynow (skuId, goodsId) { // 跳转详情
|
||||
let url = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: {skuId, goodsId}
|
||||
})
|
||||
window.open(url.href, '_blank')
|
||||
},
|
||||
goShop (id) {
|
||||
goShop (id) { // 跳转店铺页面
|
||||
let url = this.$router.resolve({
|
||||
path: '/merchant',
|
||||
query: {id}
|
||||
|
|
|
|||
|
|
@ -78,12 +78,12 @@ export default {
|
|||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList () {
|
||||
getList () { // 获取发票列表
|
||||
receiptList().then(res => {
|
||||
this.list = res.result.records;
|
||||
})
|
||||
},
|
||||
save () {
|
||||
save () { // 保存发票
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
|
|
@ -105,7 +105,7 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
resetData () {
|
||||
resetData () { // 重置表单数据
|
||||
this.$refs.form.resetFields();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ export default {
|
|||
againPassword: '',
|
||||
newPassword: ''
|
||||
},
|
||||
ruleInLines: {
|
||||
ruleInLines: { // 验证规则
|
||||
picture: [
|
||||
{required: true, message: '请输入图片验证码', trigger: 'blur'}
|
||||
],
|
||||
|
|
@ -107,7 +107,7 @@ export default {
|
|||
{required: true, message: '请输入短信验证码', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
ruleIn: {
|
||||
ruleIn: { // 验证规则
|
||||
newPassword: [
|
||||
{required: true, message: '请输入新密码', trigger: 'blur'},
|
||||
{type: 'string', min: 6, message: '密码不能少于6位'}
|
||||
|
|
@ -117,7 +117,7 @@ export default {
|
|||
{type: 'string', min: 6, message: '密码不能少于6位'}
|
||||
]
|
||||
},
|
||||
ruleInline: {
|
||||
ruleInline: { // 验证规则
|
||||
password: [
|
||||
{required: true, message: '请输入旧密码', trigger: 'blur'}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default {
|
|||
this.getPoint()
|
||||
},
|
||||
methods: {
|
||||
getHistory () {
|
||||
getHistory () { // 获取积分历史
|
||||
memberPointHistory(this.params).then(res => {
|
||||
this.logData = res.result;
|
||||
})
|
||||
|
|
@ -73,11 +73,11 @@ export default {
|
|||
if (res.success) this.pointObj = res.result
|
||||
})
|
||||
},
|
||||
changePage (val) {
|
||||
changePage (val) { // 修改页码
|
||||
this.pageNumber = val
|
||||
this.getHistory()
|
||||
},
|
||||
changePageSize (val) {
|
||||
changePageSize (val) { // 修改页数
|
||||
this.param.pageSize = val
|
||||
this.params.pageNumber = 1
|
||||
this.getHistory()
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<Upload
|
||||
:show-upload-list="false"
|
||||
:on-success="handleSuccess"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:format="['jpg','jpeg','png']"
|
||||
:action="action"
|
||||
:headers="accessToken"
|
||||
|
|
@ -58,7 +57,7 @@ export default {
|
|||
this.accessToken.accessToken = storage.getItem('accessToken');
|
||||
},
|
||||
methods: {
|
||||
save () {
|
||||
save () { // 保存
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
|
|
@ -76,10 +75,9 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
handleSuccess (res, file) {
|
||||
handleSuccess (res, file) { // 上传成功
|
||||
this.$set(this.formItem, 'face', res.result)
|
||||
},
|
||||
handleBeforeUpload () {}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getOrderDetail () {
|
||||
getOrderDetail () { // 获取订单详情
|
||||
orderDetail(this.$route.query.sn).then(res => {
|
||||
this.order = res.result
|
||||
this.orderGoods = res.result.orderItems[this.$route.query.index]
|
||||
|
|
@ -96,7 +96,7 @@ export default {
|
|||
this.orderGoods.uploadList = []
|
||||
})
|
||||
},
|
||||
save () {
|
||||
save () { // 保存评价
|
||||
if (!this.form.serviceScore || !this.form.deliveryScore) {
|
||||
this.$Message.warning('物流服务评价不能为空')
|
||||
return false;
|
||||
|
|
@ -129,26 +129,26 @@ export default {
|
|||
this.loading = false;
|
||||
})
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: {skuId, goodsId}
|
||||
})
|
||||
window.open(routerUrl.href, '_blank')
|
||||
},
|
||||
handleView (name) {
|
||||
handleView (name) { // 预览图片
|
||||
this.previewImage = name;
|
||||
this.visible = true;
|
||||
},
|
||||
handleRemove (index) {
|
||||
handleRemove (index) { // 移除图片
|
||||
this.orderGoods.uploadList.splice(index, 1)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleSuccess (res, file) {
|
||||
handleSuccess (res, file) { // 上传成功回调
|
||||
this.orderGoods.uploadList.push(res.result)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleBeforeUpload () {
|
||||
handleBeforeUpload () { // 上传之前钩子
|
||||
const check = this.orderGoods.uploadList.length < 10;
|
||||
if (!check) {
|
||||
this.$Notice.warning({
|
||||
|
|
|
|||
|
|
@ -65,19 +65,19 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail () {
|
||||
getDetail () { // 获取评价详情
|
||||
evaluationDetail(this.$route.query.id).then(res => {
|
||||
if (res.success) this.orderGoods = res.result
|
||||
})
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: {skuId, goodsId}
|
||||
})
|
||||
window.open(routerUrl.href, '_blank')
|
||||
},
|
||||
handleView (name) {
|
||||
handleView (name) { // 预览图片
|
||||
this.previewImage = name;
|
||||
this.visible = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
save () {
|
||||
save () { // 保存地址
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const params = JSON.parse(JSON.stringify(this.formData));
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ export default {
|
|||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
getList () {
|
||||
getList () { // 获取售后列表
|
||||
this.spinShow = true;
|
||||
let params = JSON.parse(JSON.stringify(this.params))
|
||||
afterSaleList(params).then(res => {
|
||||
|
|
@ -144,11 +144,11 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
changePageNum (val) {
|
||||
changePageNum (val) { // 修改页码
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
changePageSize (val) {
|
||||
changePageSize (val) { // 修改页数
|
||||
this.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
getLog () {
|
||||
getLog () { // 获取售后日志
|
||||
afterSaleLog(this.$route.query.sn).then(res => {
|
||||
this.logList = res.result;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getInfo () {
|
||||
getInfo () { // 获取售后信息
|
||||
afterSaleInfo(this.$route.query.sn).then(res => {
|
||||
if (res.success) {
|
||||
this.info = res.result
|
||||
|
|
@ -147,15 +147,15 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
getReason (type) {
|
||||
getReason (type) { // 获取售后原因
|
||||
afterSaleReason(type).then(res => {
|
||||
if (res.success) this.reasonList = res.result
|
||||
})
|
||||
},
|
||||
changeReason (type) {
|
||||
changeReason (type) { // 改变售后原因列表
|
||||
this.getReason(type)
|
||||
},
|
||||
apply () {
|
||||
apply () { // 售后申请提交
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
let params = Object.assign(this.info, this.form)
|
||||
|
|
@ -170,19 +170,19 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
handleView (name) {
|
||||
handleView (name) { // 预览图片
|
||||
this.previewImage = name;
|
||||
this.visible = true;
|
||||
},
|
||||
handleRemove (index) {
|
||||
handleRemove (index) { // 移除图片
|
||||
this.uploadList.splice(index, 1)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleSuccess (res, file) {
|
||||
handleSuccess (res, file) { // 上传成功回调
|
||||
this.uploadList.push(res.result)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleBeforeUpload () {
|
||||
handleBeforeUpload () { // 上传之前钩子函数
|
||||
const check = this.uploadList.length < 6;
|
||||
if (!check) {
|
||||
this.$Notice.warning({
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getOrderDetail () {
|
||||
getOrderDetail () { // 获取订单详情
|
||||
orderDetail(this.$route.query.sn).then(res => {
|
||||
this.order = res.result
|
||||
this.orderGoods = res.result.orderItems[this.$route.query.index]
|
||||
|
|
@ -92,7 +92,7 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
save () {
|
||||
save () { // 提交投诉信息
|
||||
let params = {
|
||||
goodsId: this.orderGoods.goodsId,
|
||||
complainTopic: this.form.complainTopic,
|
||||
|
|
@ -108,26 +108,26 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: {skuId, goodsId}
|
||||
})
|
||||
window.open(routerUrl.href, '_blank')
|
||||
},
|
||||
handleView (name) {
|
||||
handleView (name) { // 预览图片
|
||||
this.previewImage = name;
|
||||
this.visible = true;
|
||||
},
|
||||
handleRemove (index) {
|
||||
handleRemove (index) { // 移除图片
|
||||
this.orderGoods.uploadList.splice(index, 1)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleSuccess (res, file) {
|
||||
handleSuccess (res, file) { // 上传成功回调
|
||||
this.orderGoods.uploadList.push(res.result)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleBeforeUpload () {
|
||||
handleBeforeUpload () { // 上传之前钩子函数
|
||||
const check = this.orderGoods.uploadList.length < 6;
|
||||
if (!check) {
|
||||
this.$Notice.warning({
|
||||
|
|
|
|||
|
|
@ -240,7 +240,7 @@ export default {
|
|||
complainResult (sn) { // 投诉结果
|
||||
|
||||
},
|
||||
delOrder (sn) {
|
||||
delOrder (sn) { // 删除订单
|
||||
this.$Modal.confirm({
|
||||
title: '删除订单',
|
||||
content: '<p>确认删除当前订单吗？</p>',
|
||||
|
|
@ -255,7 +255,7 @@ export default {
|
|||
onCancel: () => {}
|
||||
});
|
||||
},
|
||||
getList () {
|
||||
getList () { // 获取订单列表
|
||||
this.spinShow = true;
|
||||
let params = JSON.parse(JSON.stringify(this.params))
|
||||
if (params.orderStatus === 'ALL') {
|
||||
|
|
@ -269,11 +269,11 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
changePageNum (val) {
|
||||
changePageNum (val) { // 修改页码
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
changePageSize (val) {
|
||||
changePageSize (val) { // 修改页数
|
||||
this.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
|
|
@ -289,7 +289,7 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
sureCancel () {
|
||||
sureCancel () { // 确定取消
|
||||
cancelOrder(this.cancelParams).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('取消订单成功')
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
traces () {
|
||||
traces () { // 物流信息
|
||||
getTraces(this.$route.query.sn).then(res => {
|
||||
if (res.success) {
|
||||
this.logistics = res.result
|
||||
|
|
|
|||
|
|
@ -48,7 +48,8 @@
|
|||
"vuex": "^3.4.0",
|
||||
"wangeditor": "^4.5.3",
|
||||
"xlsx": "^0.16.2",
|
||||
"xss": "^1.0.7"
|
||||
"xss": "^1.0.7",
|
||||
"uuid": "^8.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^4.4.4",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {v4 as uuidv4} from 'uuid';
|
||||
import {getCategoryTree} from '@/api/goods.js'
|
||||
export default {
|
||||
updated() {
|
||||
|
|
@ -15,7 +16,14 @@ export default {
|
|||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let uuid = this.getStore('uuid');
|
||||
if (!uuid) {
|
||||
uuid = uuidv4();
|
||||
this.setStore('uuid', uuid);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {commonUrl, getRequest} from '@/libs/axios';
|
||||
import {commonUrl, getRequest, getRequestWithNoToken, postRequestWithNoToken} from '@/libs/axios';
|
||||
|
||||
// 通过id获取子地区
|
||||
export const getChildRegion = (id) => {
|
||||
|
|
@ -6,6 +6,16 @@ export const getChildRegion = (id) => {
|
|||
};
|
||||
|
||||
// 点地图获取地址信息
|
||||
export const getRegion = (parpams) => {
|
||||
return getRequest(`${commonUrl}/common/region/region`, parpams);
|
||||
export const getRegion = (params) => {
|
||||
return getRequest(`${commonUrl}/common/region/region`, params);
|
||||
};
|
||||
|
||||
// 获取拼图验证
|
||||
export const getVerifyImg = (verificationEnums) => {
|
||||
return getRequestWithNoToken(`${commonUrl}/common/slider/${verificationEnums}`);
|
||||
};
|
||||
|
||||
// 拼图验证
|
||||
export const postVerifyImg = (params) => {
|
||||
return postRequestWithNoToken(`${commonUrl}/common/slider/${params.verificationEnums}`, params);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@ service.interceptors.request.use(
|
|||
...config.params
|
||||
}
|
||||
}
|
||||
const uuid = getStore('uuid');
|
||||
config.headers['uuid'] = uuid;
|
||||
return config;
|
||||
},
|
||||
err => {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export const loginRouter = {
|
|||
path: "/login",
|
||||
name: "login",
|
||||
meta: {
|
||||
title: "登录 - lili "
|
||||
title: "登录 - lili运营后台"
|
||||
},
|
||||
component: () => import("@/views/login.vue")
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,6 +22,13 @@
|
|||
</Row>
|
||||
|
||||
</Row>
|
||||
<!-- 拼图验证码 -->
|
||||
<verify
|
||||
ref="verify"
|
||||
class="verify-con"
|
||||
verifyType="LOGIN"
|
||||
@change="verifyChange"
|
||||
></verify>
|
||||
<div v-if="socialLogining">
|
||||
<RectLoading />
|
||||
</div>
|
||||
|
|
@ -41,6 +48,7 @@ import LangSwitch from "@/views/main-components/lang-switch";
|
|||
import RectLoading from "@/views/my-components/lili/rect-loading";
|
||||
import CountDownButton from "@/views/my-components/lili/count-down-button";
|
||||
import util from "@/libs/util.js";
|
||||
import verify from '@/views/my-components/verify';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -49,6 +57,7 @@ export default {
|
|||
LangSwitch,
|
||||
Header,
|
||||
Footer,
|
||||
verify
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -79,7 +88,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
mounted() {},
|
||||
afterLogin(res) {
|
||||
afterLogin(res) { // 登录成功后处理
|
||||
let accessToken = res.result.accessToken;
|
||||
let refreshToken = res.result.refreshToken;
|
||||
this.setStore("accessToken", accessToken);
|
||||
|
|
@ -100,9 +109,16 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
submitLogin() {
|
||||
submitLogin() { // 登录操作
|
||||
this.$refs.usernameLoginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$refs.verify.show = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
verifyChange (con) { // 拼图验证码回显
|
||||
if (!con.status) return;
|
||||
|
||||
this.loading = true;
|
||||
login({
|
||||
username: this.form.username,
|
||||
|
|
@ -113,10 +129,8 @@ export default {
|
|||
} else {
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
}).catch(()=>{this.loading = false});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -140,7 +154,12 @@ export default {
|
|||
position: relative;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.verify-con{
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
z-index: 10;
|
||||
left: 20px;
|
||||
}
|
||||
.form {
|
||||
padding-top: 1vh;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
### 滑动拼图验证
|
||||
|
||||
### 在页面中引入 .vue文件
|
||||
|
||||
#### 参数
|
||||
|
||||
#### 在组件上添加v-if来判断组件显隐
|
||||
|
||||
#### verifyType 验证格式[ 'LOGIN' ,'REGISTER' ]
|
||||
|
||||
#### @change方法 获取回调，参数为对象 {status:false,distance:100} status 为回调状态，distance为移动距离
|
||||
|
||||
|
||||
#### <Verify class="verify-content" verifyType='LOGIN' @change="verifyChange"></Verify>
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp">
|
||||
<div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
|
||||
<img :src="data.backImage" style="width:100%;height:100%" alt="">
|
||||
<img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
|
||||
<Icon type="md-refresh" class="refresh" @click="refresh" />
|
||||
</div>
|
||||
<div class="handle" :style="{width:data.originalWidth+'px'}">
|
||||
<span class="bgcolor" :style="{width:distance + 'px',background:bgColor}"></span>
|
||||
<span class="swiper" :style="{left:distance + 'px'}" @mousedown="mouseDown">
|
||||
<Icon type="md-arrow-round-forward" />
|
||||
</span>
|
||||
<span class="text">{{verifyText}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getVerifyImg, postVerifyImg } from './verify.js';
|
||||
export default {
|
||||
props: {
|
||||
verifyType: {
|
||||
defalut: 'LOGIN',
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
show: false, // 验证码显隐
|
||||
type: 'LOGIN', // 请求类型
|
||||
data: { // 验证码数据
|
||||
backImage: '',
|
||||
slidingImage: '',
|
||||
originalHeight: 150,
|
||||
originalWidth: 300,
|
||||
sliderWidth: 60,
|
||||
sliderHeight: 60
|
||||
},
|
||||
distance: 0, // 拼图移动距离
|
||||
flag: false, // 判断滑块是否按下
|
||||
downX: 0, // 鼠标按下位置
|
||||
bgColor: 'aqua', // 滑动背景颜色
|
||||
verifyText: '拖动滑块解锁' // 文字提示
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
mouseDown (e) {
|
||||
this.downX = e.clientX;
|
||||
this.flag = true;
|
||||
},
|
||||
mouseMove (e) {
|
||||
if (this.flag) {
|
||||
let offset = e.clientX - this.downX;
|
||||
|
||||
if (offset > this.data.originalWidth - 43) {
|
||||
this.distance = this.data.originalWidth - 43;
|
||||
} else if (offset < 0) {
|
||||
this.distance = 0;
|
||||
} else {
|
||||
this.distance = offset;
|
||||
}
|
||||
}
|
||||
},
|
||||
mouseUp () {
|
||||
if (!this.flag) return false;
|
||||
this.flag = false;
|
||||
let params = {
|
||||
verificationEnums: this.type,
|
||||
xPos: this.distance
|
||||
};
|
||||
postVerifyImg(params).then(res => {
|
||||
if (res.result) {
|
||||
this.bgColor = 'green';
|
||||
this.verifyText = '解锁成功';
|
||||
this.$emit('change', { status: true, distance: this.distance });
|
||||
} else {
|
||||
this.bgColor = 'red';
|
||||
this.verifyText = '解锁失败';
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.refresh();
|
||||
}, 1000);
|
||||
this.$emit('change', { status: false, distance: this.distance });
|
||||
}
|
||||
});
|
||||
},
|
||||
refresh () {
|
||||
this.flag = false;
|
||||
this.downX = 0;
|
||||
this.distance = 0;
|
||||
this.bgColor = 'aqua';
|
||||
this.verifyText = '拖动滑块解锁';
|
||||
this.getImg();
|
||||
},
|
||||
getImg () {
|
||||
getVerifyImg(this.type).then(res => {
|
||||
this.data = res.result;
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getImg();
|
||||
},
|
||||
watch: {
|
||||
verifyType: {
|
||||
immediate: true,
|
||||
handler: function (v) {
|
||||
this.type = v;
|
||||
this.refresh();
|
||||
}
|
||||
},
|
||||
show (v) {
|
||||
if (v) this.refresh();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.verify-content{
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 3px #999;
|
||||
}
|
||||
.imgBox {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.refresh {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.handle {
|
||||
border: 1px solid rgb(134, 134, 134);
|
||||
margin-top: 5px;
|
||||
height: 42px;
|
||||
background: #ddd;
|
||||
position: relative;
|
||||
|
||||
.bgcolor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
opacity: 0.5;
|
||||
background: aqua;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.ivu-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
width: inherit;
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
|
||||
import {commonUrl, getRequestWithNoToken, postRequestWithNoToken} from '@/libs/axios';
|
||||
|
||||
|
||||
// 获取拼图验证
|
||||
export const getVerifyImg = (verificationEnums) => {
|
||||
return getRequestWithNoToken(`${commonUrl}/common/slider/${verificationEnums}`);
|
||||
};
|
||||
|
||||
// 拼图验证
|
||||
export const postVerifyImg = (params) => {
|
||||
return postRequestWithNoToken(`${commonUrl}/common/slider/${params.verificationEnums}`, params);
|
||||
};
|
||||
|
|
@ -44,7 +44,8 @@
|
|||
"vuex": "^3.4.0",
|
||||
"wangeditor": "^4.6.13",
|
||||
"xlsx": "^0.16.2",
|
||||
"xss": "^1.0.7"
|
||||
"xss": "^1.0.7",
|
||||
"uuid": "^8.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^4.4.4",
|
||||
|
|
|
|||
|
|
@ -5,13 +5,15 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {v4 as uuidv4} from 'uuid';
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
mounted() {
|
||||
let uuid = this.getStore('uuid');
|
||||
if (!uuid) {
|
||||
uuid = uuidv4();
|
||||
this.setStore('uuid', uuid);
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@ service.interceptors.request.use(
|
|||
...config.params
|
||||
}
|
||||
}
|
||||
const uuid = getStore('uuid');
|
||||
config.headers['uuid'] = uuid;
|
||||
return config;
|
||||
},
|
||||
err => {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export const loginRouter = {
|
|||
path: "/login",
|
||||
name: "login",
|
||||
meta: {
|
||||
title: "登录 - lili "
|
||||
title: "登录 - lili商家后台 "
|
||||
},
|
||||
component: () => import("@/views/login.vue")
|
||||
};
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</p>
|
||||
<template v-if="!$route.query.id">
|
||||
<Divider>或选择商品模版</Divider>
|
||||
<Select v-model="draftId" style="width: 200px">
|
||||
<Select v-model="draftId" clearable style="width: 200px">
|
||||
<Option v-for="item in goodsTemplates" :value="item.id" :key="item.id"
|
||||
>{{ item.goodsName || item.id }}
|
||||
</Option>
|
||||
|
|
|
|||
|
|
@ -55,6 +55,13 @@
|
|||
|
||||
</Row>
|
||||
<Footer />
|
||||
<!-- 拼图验证码 -->
|
||||
<verify
|
||||
ref="verify"
|
||||
class="verify-con"
|
||||
verifyType="LOGIN"
|
||||
@change="verifyChange"
|
||||
></verify>
|
||||
</Col>
|
||||
<!-- <LangSwitch /> -->
|
||||
</Row>
|
||||
|
|
@ -72,11 +79,13 @@ import Header from "@/views/main-components/header";
|
|||
import Footer from "@/views/main-components/footer";
|
||||
import LangSwitch from "@/views/main-components/lang-switch";
|
||||
import util from "@/libs/util.js";
|
||||
import verify from '@/views/my-components/verify';
|
||||
export default {
|
||||
components: {
|
||||
LangSwitch,
|
||||
Header,
|
||||
Footer,
|
||||
verify
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -154,10 +163,16 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
submitLogin() {
|
||||
// 正常逻辑
|
||||
submitLogin() { // 登录提交
|
||||
this.$refs.usernameLoginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$refs.verify.show = true;
|
||||
}
|
||||
})
|
||||
},
|
||||
verifyChange (con) { // 拼图验证码回显
|
||||
if (!con.status) return;
|
||||
|
||||
this.loading = true;
|
||||
login({
|
||||
username: this.form.username,
|
||||
|
|
@ -169,8 +184,6 @@ export default {
|
|||
}
|
||||
}).catch(()=>{this.loading = false})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -203,6 +216,12 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.verify-con{
|
||||
position: absolute;
|
||||
top: 126px;
|
||||
z-index: 10;
|
||||
left: 20px;
|
||||
}
|
||||
.form {
|
||||
padding-top: 1vh;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
### 滑动拼图验证
|
||||
|
||||
### 在页面中引入 .vue文件
|
||||
|
||||
#### 参数
|
||||
|
||||
#### 在组件上添加v-if来判断组件显隐
|
||||
|
||||
#### verifyType 验证格式[ 'LOGIN' ,'REGISTER' ]
|
||||
|
||||
#### @change方法 获取回调，参数为对象 {status:false,distance:100} status 为回调状态，distance为移动距离
|
||||
|
||||
|
||||
#### <Verify class="verify-content" verifyType='LOGIN' @change="verifyChange"></Verify>
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<div class="verify-content" v-if="show" @mousemove="mouseMove" @mouseup="mouseUp">
|
||||
<div class="imgBox" :style="{width:data.originalWidth+'px',height:data.originalHeight + 'px'}">
|
||||
<img :src="data.backImage" style="width:100%;height:100%" alt="">
|
||||
<img class="slider" :src="data.slidingImage" :style="{left:distance+'px',top:data.randomY+'px'}" :width="data.sliderWidth" :height="data.sliderHeight" alt="">
|
||||
<Icon type="md-refresh" class="refresh" @click="refresh" />
|
||||
</div>
|
||||
<div class="handle" :style="{width:data.originalWidth+'px'}">
|
||||
<span class="bgcolor" :style="{width:distance + 'px',background:bgColor}"></span>
|
||||
<span class="swiper" :style="{left:distance + 'px'}" @mousedown="mouseDown">
|
||||
<Icon type="md-arrow-round-forward" />
|
||||
</span>
|
||||
<span class="text">{{verifyText}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getVerifyImg, postVerifyImg } from './verify.js';
|
||||
export default {
|
||||
props: {
|
||||
verifyType: {
|
||||
defalut: 'LOGIN',
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
show: false, // 验证码显隐
|
||||
type: 'LOGIN', // 请求类型
|
||||
data: { // 验证码数据
|
||||
backImage: '',
|
||||
slidingImage: '',
|
||||
originalHeight: 150,
|
||||
originalWidth: 300,
|
||||
sliderWidth: 60,
|
||||
sliderHeight: 60
|
||||
},
|
||||
distance: 0, // 拼图移动距离
|
||||
flag: false, // 判断滑块是否按下
|
||||
downX: 0, // 鼠标按下位置
|
||||
bgColor: 'aqua', // 滑动背景颜色
|
||||
verifyText: '拖动滑块解锁' // 文字提示
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
mouseDown (e) {
|
||||
this.downX = e.clientX;
|
||||
this.flag = true;
|
||||
},
|
||||
mouseMove (e) {
|
||||
if (this.flag) {
|
||||
let offset = e.clientX - this.downX;
|
||||
|
||||
if (offset > this.data.originalWidth - 43) {
|
||||
this.distance = this.data.originalWidth - 43;
|
||||
} else if (offset < 0) {
|
||||
this.distance = 0;
|
||||
} else {
|
||||
this.distance = offset;
|
||||
}
|
||||
}
|
||||
},
|
||||
mouseUp () {
|
||||
if (!this.flag) return false;
|
||||
this.flag = false;
|
||||
let params = {
|
||||
verificationEnums: this.type,
|
||||
xPos: this.distance
|
||||
};
|
||||
postVerifyImg(params).then(res => {
|
||||
if (res.result) {
|
||||
this.bgColor = 'green';
|
||||
this.verifyText = '解锁成功';
|
||||
this.$emit('change', { status: true, distance: this.distance });
|
||||
} else {
|
||||
this.bgColor = 'red';
|
||||
this.verifyText = '解锁失败';
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.refresh();
|
||||
}, 1000);
|
||||
this.$emit('change', { status: false, distance: this.distance });
|
||||
}
|
||||
});
|
||||
},
|
||||
refresh () {
|
||||
this.flag = false;
|
||||
this.downX = 0;
|
||||
this.distance = 0;
|
||||
this.bgColor = 'aqua';
|
||||
this.verifyText = '拖动滑块解锁';
|
||||
this.getImg();
|
||||
},
|
||||
getImg () {
|
||||
getVerifyImg(this.type).then(res => {
|
||||
this.data = res.result;
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getImg();
|
||||
},
|
||||
watch: {
|
||||
verifyType: {
|
||||
immediate: true,
|
||||
handler: function (v) {
|
||||
this.type = v;
|
||||
this.refresh();
|
||||
}
|
||||
},
|
||||
show (v) {
|
||||
if (v) this.refresh();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.verify-content{
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 3px #999;
|
||||
}
|
||||
.imgBox {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.refresh {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.handle {
|
||||
border: 1px solid rgb(134, 134, 134);
|
||||
margin-top: 5px;
|
||||
height: 42px;
|
||||
background: #ddd;
|
||||
position: relative;
|
||||
|
||||
.bgcolor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
opacity: 0.5;
|
||||
background: aqua;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.ivu-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
width: inherit;
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
|
||||
import {commonUrl, getRequestWithNoToken, postRequestWithNoToken} from '@/libs/axios';
|
||||
|
||||
|
||||
// 获取拼图验证
|
||||
export const getVerifyImg = (verificationEnums) => {
|
||||
return getRequestWithNoToken(`${commonUrl}/common/slider/${verificationEnums}`);
|
||||
};
|
||||
|
||||
// 拼图验证
|
||||
export const postVerifyImg = (params) => {
|
||||
return postRequestWithNoToken(`${commonUrl}/common/slider/${params.verificationEnums}`, params);
|
||||
};
|
||||
Loading…
Reference in New Issue