zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

合并ma

master
lemon橪 2021-06-04 17:36:30 +08:00
parent 40bf9781b1 4ef8287802
commit 70f0bafd21
66 changed files with 678 additions and 618 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
buyer/src/components/Search.vue
View File

@ -63,17 +63,17 @@ export default {
}; };
}, },
methods: { methods: {
selectTags (item) { selectTags (item) { // 选择热门标签
this.searchData = item; this.searchData = item;
this.search(); this.search();
}, },
search () { search () { // 全平台搜索商品
this.$router.push({ this.$router.push({
path: '/goodsList', path: '/goodsList',
query: { keyword: this.searchData } query: { keyword: this.searchData }
}); });
}, },
searchStore () { searchStore () { // 店铺搜索商品
this.$emit('search', this.searchData) this.$emit('search', this.searchData)
} }
}, },

2
buyer/src/components/drawer/Drawer.vue
View File

@ -151,8 +151,6 @@ export default {
] ]
}; };
}, },
components: {},
mounted () {},
methods: { methods: {
getCartList () { // 获取购物车列表 getCartList () { // 获取购物车列表
this.loading = true this.loading = true

6
buyer/src/components/drawer/Main.vue
View File

@ -44,12 +44,12 @@ export default {
} }
}, },
methods: { methods: {
showCartNum (item) { showCartNum (item) { // 获取购物车数量
if (this.userInfo && item.title === '购物车') { if (this.userInfo && item.title === '购物车') {
this.getCartList() this.getCartList()
} }
}, },
clickBar (val) { clickBar (val) { // tabbar点击操作
if (!this.userInfo) { if (!this.userInfo) {
this.$Modal.confirm({ this.$Modal.confirm({
title: '请登录', title: '请登录',
@ -83,7 +83,7 @@ export default {
} }
} }
}, },
openBlank (path) { openBlank (path) { // 新页面打开地址
let routerUrl = this.$router.resolve({ let routerUrl = this.$router.resolve({
path: path path: path
}) })

5
buyer/src/components/empty/Main.vue
View File

@ -13,11 +13,6 @@
<script> <script>
export default { export default {
name: 'Main', name: 'Main',
data () {
return {
};
},
props: { props: {
_Title: { // 描述内容 _Title: { // 描述内容
type: null, type: null,

2
buyer/src/components/footer/Footer.vue
View File

@ -62,7 +62,7 @@ export default {
}; };
}, },
methods: { methods: {
goArticle () { // 跳转 goArticle () { // 跳转文章页
let routeUrl = this.$router.resolve({ let routeUrl = this.$router.resolve({
path: '/article' path: '/article'
}) })

8
buyer/src/components/goodsDetail/Promotion.vue
View File

@ -19,7 +19,7 @@ export default {
time: { // 传入的初始时间 time: { // 传入的初始时间
default: 1718977559428 default: 1718977559428
}, },
type: { type: { // 区分是在详情还是购物车调用
default: 'goodsDetail', // 设置两个值，goodsDetail和cart，样式不同 default: 'goodsDetail', // 设置两个值，goodsDetail和cart，样式不同
type: String type: String
} }
@ -37,7 +37,7 @@ export default {
this.init() this.init()
}, },
methods: { methods: {
countDown (val) { countDown (val) { // 倒计时方法
function addZero (i) { function addZero (i) {
return i < 10 ? '0' + i : i + ''; return i < 10 ? '0' + i : i + '';
} }
@ -58,8 +58,8 @@ export default {
clearInterval(this.interval) clearInterval(this.interval)
} }
}, },
init () { init () { // 初始化
this.interval = setInterval((item) => { this.interval = setInterval(() => {
this.countDown(this.time); this.countDown(this.time);
}, 1000); }, 1000);
} }

23
buyer/src/components/goodsDetail/ShowGoods.vue
View File

@ -119,10 +119,14 @@
<span class="inventory"> {{skuDetail.weight}}kg</span> <span class="inventory"> {{skuDetail.weight}}kg</span>
</div> </div>
</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="error" :loading="loading" :disabled="skuDetail.quantity === 0" @click="addShoppingCartBtn">加入购物车</Button>
<Button type="warning" :loading="loading1" :disabled="skuDetail.quantity === 0" @click="buyNow">立即购买</Button> <Button type="warning" :loading="loading1" :disabled="skuDetail.quantity === 0" @click="buyNow">立即购买</Button>
</div> </div>
</div> </div>
</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 () { // 收藏商品 async collect () { // 收藏商品
if (this.isCollected) { if (this.isCollected) {
let cancel = await cancelCollect('GOODS', this.skuDetail.id) let cancel = await cancelCollect('GOODS', this.skuDetail.id)
@ -311,6 +331,7 @@ export default {
} }
}, },
mounted () { mounted () {
// 用户登录才会判断是否收藏
if (this.Cookies.getItem('userInfo')) { if (this.Cookies.getItem('userInfo')) {
isCollection('GOODS', this.skuDetail.id).then(res => { isCollection('GOODS', this.skuDetail.id).then(res => {
if (res.success && res.result) { if (res.success && res.result) {

35
buyer/src/components/goodsDetail/ShowGoodsDetail.vue
View File

@ -38,10 +38,10 @@
</div> </div>
</div> </div>
<div class="remarks-bar"> <div class="remarks-bar">
<span @click="searchByGrade('')" :class="{selectedBar: commentParams.grade === ''}">全部({{commentTypeNum.all}})</span> <span @click="viewByGrade('')" :class="{selectedBar: commentParams.grade === ''}">全部({{commentTypeNum.all}})</span>
<span @click="searchByGrade('GOOD')" :class="{selectedBar: commentParams.grade === 'GOOD'}">好评({{commentTypeNum.good}})</span> <span @click="viewByGrade('GOOD')" :class="{selectedBar: commentParams.grade === 'GOOD'}">好评({{commentTypeNum.good}})</span>
<span @click="searchByGrade('MODERATE')" :class="{selectedBar: commentParams.grade === 'MODERATE'}">中评({{commentTypeNum.moderate}})</span> <span @click="viewByGrade('MODERATE')" :class="{selectedBar: commentParams.grade === 'MODERATE'}">中评({{commentTypeNum.moderate}})</span>
<span @click="searchByGrade('WORSE')" :class="{selectedBar: commentParams.grade === 'WORSE'}">差评({{commentTypeNum.worse}})</span> <span @click="viewByGrade('WORSE')" :class="{selectedBar: commentParams.grade === 'WORSE'}">差评({{commentTypeNum.worse}})</span>
</div> </div>
<div style="text-align: center;margin-top: 20px;" v-if="commentList.length === 0"> <div style="text-align: center;margin-top: 20px;" v-if="commentList.length === 0">
暂无评价数据 暂无评价数据
@ -86,9 +86,6 @@
</div> </div>
</div> </div>
</TabPane> </TabPane>
<!-- <TabPane label="商品问答">
<ShowGoodsQuestion/>
</TabPane> -->
</Tabs> </Tabs>
</div> </div>
</div> </div>
@ -97,7 +94,6 @@
</template> </template>
<script> <script>
import ShowGoodsQuestion from '@/components/goodsDetail/ShowGoodsQuestion';
import { goodsComment, goodsCommentNum } from '@/api/member.js'; import { goodsComment, goodsCommentNum } from '@/api/member.js';
export default { export default {
name: 'ShowGoodsDetail', name: 'ShowGoodsDetail',
@ -122,21 +118,21 @@ export default {
}; };
}, },
computed: { computed: {
skuDetail () { skuDetail () { // skuId
return this.detail.data; return this.detail.data;
} }
}, },
methods: { methods: {
changeHeight (name) { changeHeight (name) { // 设置商品详情高度
let heightCss = window.getComputedStyle(this.$refs[name]).height; let heightCss = window.getComputedStyle(this.$refs[name]).height;
heightCss = parseInt(heightCss.substr(0, heightCss.length - 2)) + 89; heightCss = parseInt(heightCss.substr(0, heightCss.length - 2)) + 89;
this.$refs.itemIntroDetail.style.height = heightCss + 'px'; this.$refs.itemIntroDetail.style.height = heightCss + 'px';
}, },
changePageNum (val) { changePageNum (val) { // 修改评论页码
this.commentParams.pageNumber = val; this.commentParams.pageNumber = val;
this.getList(); this.getList();
}, },
changePageSize (val) { changePageSize (val) { // 修改评论页数
this.commentParams.pageNumber = 1; this.commentParams.pageNumber = 1;
this.commentParams.pageSize = val; this.commentParams.pageSize = val;
this.getList(); this.getList();
@ -155,12 +151,12 @@ export default {
} }
}); });
}, },
searchByGrade (grade) { viewByGrade (grade) { // 好中差评切换
this.$set(this.commentParams, 'grade', grade); this.$set(this.commentParams, 'grade', grade);
this.commentParams.pageNumber = 1; this.commentParams.pageNumber = 1;
this.getList(); this.getList();
}, },
tabClick (name) { tabClick (name) { // 商品详情和评价之间的tab切换
if (name === 0) { if (name === 0) {
this.$nextTick(() => { this.$nextTick(() => {
this.changeHeight('itemIntroGoods') this.changeHeight('itemIntroGoods')
@ -198,7 +194,7 @@ export default {
} }
} }
}, },
handleScroll () { handleScroll () { // 监听页面滚动
if (this.onceFlag) { if (this.onceFlag) {
this.$nextTick(() => { this.$nextTick(() => {
this.changeHeight('itemIntroGoods') this.changeHeight('itemIntroGoods')
@ -208,15 +204,12 @@ export default {
} }
}, },
mounted () { mounted () {
this.$nextTick(() => { this.$nextTick(() => { // 手动设置详情高度，解决无法撑开问题
setTimeout(this.changeHeight('itemIntroGoods'), 2000); setTimeout(this.changeHeight('itemIntroGoods'), 2000);
}); });
window.addEventListener('scroll', this.handleScroll) window.addEventListener('scroll', this.handleScroll)
this.getList(); this.getList();
}, },
components: {
ShowGoodsQuestion
}
}; };
</script> </script>
@ -283,14 +276,12 @@ export default {
} }
.item-intro-detail{ .item-intro-detail{
margin: 0 30px; margin: 0 30px;
// min-height: 1500px;
width: 100%; width: 100%;
} }
.item-intro-nav{ .item-intro-nav{
width: 100%; width: 100%;
height: 38px; height: 38px;
background-color: #F7F7F7; background-color: #F7F7F7;
// border-bottom: 1px solid $theme_color;
} }
.item-intro-nav ul{ .item-intro-nav ul{
margin: 0px; margin: 0px;
@ -329,8 +320,6 @@ export default {
width: 240px; width: 240px;
height: 36px; height: 36px;
font-size: 14px; font-size: 14px;
/* text-align: center; */
/* background-color: #ccc; */
} }
.item-param-title { .item-param-title {
color: #232323; color: #232323;

53
buyer/src/components/goodsDetail/ShowGoodsQuestion.vue
View File

@ -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>

85
buyer/src/components/goodsDetail/ShowProductWarranty.vue
View File

@ -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>

18
buyer/src/components/header/Header.vue
View File

@ -25,7 +25,6 @@
</li> </li>
</ul> </ul>
<ul class="detail"> <ul class="detail">
<!-- <li class="first hover-pointer" @click="handleClickTheme()">切换主题</li> -->
<li class="first" v-show="!userInfo.username"> <li class="first" v-show="!userInfo.username">
<router-link :to="`/login?rePath=${$route.path}&query=${JSON.stringify($route.query)}`"> <router-link :to="`/login?rePath=${$route.path}&query=${JSON.stringify($route.query)}`">
<span style="border:none" class="tipsLogin">请登录</span> <span style="border:none" class="tipsLogin">请登录</span>
@ -148,31 +147,22 @@ export default {
} }
}, },
methods: { methods: {
handleClickTheme () { changeCity (city) { // 选择所在城市
this.themeType === 'light'
? (this.themeType = 'dark')
: (this.themeType = 'light');
window.document.documentElement.setAttribute(
'data-theme',
this.themeType
);
},
changeCity (city) {
this.city = city; this.city = city;
}, },
goToPay () { goToPay () { // 跳转购物车
let url = this.$router.resolve({ let url = this.$router.resolve({
path: '/cart' path: '/cart'
}) })
window.open(url.href, '_blank') window.open(url.href, '_blank')
}, },
myInfo () { myInfo () { // 跳转会员中心
let url = this.$router.resolve({ let url = this.$router.resolve({
path: '/home' path: '/home'
}) })
window.open(url.href, '_blank') window.open(url.href, '_blank')
}, },
signOutFun () { signOutFun () { // 退出登录
storage.removeItem('accessToken'); storage.removeItem('accessToken');
storage.removeItem('refreshToken'); storage.removeItem('refreshToken');
storage.removeItem('userInfo'); storage.removeItem('userInfo');

2
buyer/src/components/header/ShopHeader.vue
View File

@ -20,7 +20,7 @@ export default {
} }
}, },
computed: { computed: {
storeDetail () { storeDetail () { // 店铺详情
return this.detail; return this.detail;
} }
} }

2
buyer/src/components/header/hoverSearch.vue
View File

@ -23,7 +23,7 @@ export default {
} }
}, },
methods: { methods: {
goCartList () { goCartList () { // 跳转购物车页面
let routerUrl = this.$router.resolve({ let routerUrl = this.$router.resolve({
path: '/cart' path: '/cart'
}) })

4
buyer/src/components/indexDecorate/modelList/carousel.vue
View File

@ -67,14 +67,14 @@ export default {
}; };
}, },
methods: { methods: {
getArticleList () { getArticleList () { // 获取常见问题列表
articleList(this.params).then(res => { articleList(this.params).then(res => {
if (res.success) { if (res.success) {
this.articleList = res.result.records this.articleList = res.result.records
} }
}) })
}, },
goArticle (id) { goArticle (id) { // 跳转文章详情
let routeUrl = this.$router.resolve({ let routeUrl = this.$router.resolve({
path: '/article', path: '/article',
query: {id} query: {id}

1
buyer/src/components/indexDecorate/modelList/firstPageAdvert.vue
View File

@ -32,7 +32,6 @@ export default {
options: this.data.options // 装修数据 options: this.data.options // 装修数据
}; };
}, },
methods: {}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

3
buyer/src/components/indexDecorate/modelList/notEnough.vue
View File

@ -50,9 +50,8 @@ export default {
this.$emit('content', val); this.$emit('content', val);
} }
}, },
mounted () {},
methods: { methods: {
changeCurr (index) { changeCurr (index) { // 选择分类
this.currentIndex = index; this.currentIndex = index;
} }
} }

4
buyer/src/components/indexDecorate/modelList/seckill.vue
View File

@ -71,7 +71,7 @@ export default {
}; };
}, },
watch: { watch: {
diffSeconds (val) { diffSeconds (val) { // 秒杀倒计时
const hours = Math.floor(val / 3600); const hours = Math.floor(val / 3600);
// 当前秒数 / 60，向下取整 // 当前秒数 / 60，向下取整
// 获取到所有分钟数 3600 / 60 = 60分钟 // 获取到所有分钟数 3600 / 60 = 60分钟
@ -139,7 +139,7 @@ export default {
}, 1000); }, 1000);
} }
}, },
goPromotion () { goPromotion () { // 跳转秒杀页面
let routeUrl = this.$router.resolve({ let routeUrl = this.$router.resolve({
path: '/seckill' path: '/seckill'
}); });

2
buyer/src/components/invoiceModal/README.md
View File

@ -1,3 +1 @@
## 此组件为结算页面修改发票信息使用 后续可以复用到个人信息添加发票页面 ## 此组件为结算页面修改发票信息使用 后续可以复用到个人信息添加发票页面
### 目前没有参数，之后会设置一个参数接收历史的单位发票数据

4
buyer/src/components/invoiceModal/index.vue
View File

@ -69,7 +69,7 @@ export default {
receiptContent: '不开发票', // 发票内容 receiptContent: '不开发票', // 发票内容
type: 1 // 1 个人 2 单位 type: 1 // 1 个人 2 单位
}, },
ruleInline: { ruleInline: { // 验证规则
receiptTitle: [{ required: true, message: '请填写公司名称' }], receiptTitle: [{ required: true, message: '请填写公司名称' }],
taxpayerId: [ taxpayerId: [
{ required: true, message: '请填写纳税人识别号' }, { required: true, message: '请填写纳税人识别号' },
@ -79,7 +79,7 @@ export default {
}; };
}, },
methods: { methods: {
save () { save () { // 保存发票
if (this.invoiceForm.type === 1) { if (this.invoiceForm.type === 1) {
// 个人 // 个人
let flag = true; let flag = true;

2
buyer/src/components/map/index.vue
View File

@ -85,7 +85,7 @@ export default {
this.$emit('getAddress', this.addrContent); this.$emit('getAddress', this.addrContent);
} }
}, },
init () { init () { // 初始化地图
AMapLoader.load({ AMapLoader.load({
key: 'b440952723253aa9fe483e698057bf7d', // 申请好的Web端开发者Key，首次调用 load 时必填 key: 'b440952723253aa9fe483e698057bf7d', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 version: '', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

6
buyer/src/components/map/region.vue
View File

@ -21,7 +21,7 @@ export default {
props: ['addressId'], props: ['addressId'],
mounted () {}, mounted () {},
methods: { methods: {
change (val, selectedData) { change (val, selectedData) { // 选择地区
/** /**
* @returns [regionId,region] * @returns [regionId,region]
*/ */
@ -30,7 +30,7 @@ export default {
selectedData[selectedData.length - 1].__label.split('/') selectedData[selectedData.length - 1].__label.split('/')
]); ]);
}, },
loadData (item, callback) { loadData (item, callback) { // 加载数据
item.loading = true; item.loading = true;
getRegion(item.value).then((res) => { getRegion(item.value).then((res) => {
if (res.result.length <= 0) { if (res.result.length <= 0) {
@ -59,7 +59,7 @@ export default {
} }
}); });
}, },
async init () { async init () { // 初始化地图数据
let data = await getRegion(0); let data = await getRegion(0);
let arr = []; let arr = [];
data.result.forEach((item) => { data.result.forEach((item) => {

3
buyer/src/components/nav/GoodsClassNav.vue
View File

@ -209,7 +209,7 @@ export default {
}, },
deep: true deep: true
}, },
'$route': { '$route': { // 监听路由
handler (val, oVal) { handler (val, oVal) {
if (this.$route.query.categoryId) { if (this.$route.query.categoryId) {
let cateId = this.$route.query.categoryId.split(',') let cateId = this.$route.query.categoryId.split(',')
@ -373,6 +373,7 @@ export default {
} }
}, },
mounted () { mounted () {
// 有分类id就根据id搜索
if (this.$route.query.categoryId) { if (this.$route.query.categoryId) {
let cateId = this.$route.query.categoryId.split(',') let cateId = this.$route.query.categoryId.split(',')
Object.assign(this.params, this.$route.query) Object.assign(this.params, this.$route.query)

2
buyer/src/components/verify/README.md
View File

@ -6,7 +6,7 @@
#### 在组件上添加v-if来判断组件显隐 #### 在组件上添加v-if来判断组件显隐
#### verifyType 验证格式[ 'LOGIN' ,'REGISTER' ]等，详情看接口文档 #### verifyType 验证格式[ 'LOGIN' ,'REGISTER' ]
#### @change方法 获取回调，参数为对象 {status:false,distance:100} status 为回调状态，distance为移动距离 #### @change方法 获取回调，参数为对象 {status:false,distance:100} status 为回调状态，distance为移动距离

10
buyer/src/components/verify/index.vue
View File

@ -43,11 +43,11 @@ export default {
}; };
}, },
methods: { methods: {
mouseDown (e) { mouseDown (e) { // 鼠标按下操作，
this.downX = e.clientX; this.downX = e.clientX;
this.flag = true; this.flag = true;
}, },
mouseMove (e) { mouseMove (e) { // 鼠标移动
if (this.flag) { if (this.flag) {
let offset = e.clientX - this.downX; let offset = e.clientX - this.downX;
@ -60,7 +60,7 @@ export default {
} }
} }
}, },
mouseUp () { mouseUp () { // 鼠标抬起
if (!this.flag) return false; if (!this.flag) return false;
this.flag = false; this.flag = false;
let params = { let params = {
@ -83,7 +83,7 @@ export default {
} }
}); });
}, },
refresh () { refresh () { // 刷新验证图片
this.flag = false; this.flag = false;
this.downX = 0; this.downX = 0;
this.distance = 0; this.distance = 0;
@ -91,7 +91,7 @@ export default {
this.verifyText = '拖动滑块解锁'; this.verifyText = '拖动滑块解锁';
this.getImg(); this.getImg();
}, },
getImg () { getImg () { // 获取验证图片
getVerifyImg(this.type).then(res => { getVerifyImg(this.type).then(res => {
this.data = res.result; this.data = res.result;
}); });

4
buyer/src/components/verify/verify.js
View File

@ -26,7 +26,3 @@ export function postVerifyImg (params) {
headers: {uuid: storage.getItem('uuid')} headers: {uuid: storage.getItem('uuid')}
}); });
} }
export function mouseup () {
console.log(111);
}

1
buyer/src/pages/GoodsDetail.vue
View File

@ -78,6 +78,7 @@ export default {
name: cateName[index] name: cateName[index]
}); });
}); });
console.log(cateArr);
this.categoryBar = cateArr; this.categoryBar = cateArr;
this.goodsMsg = res.result; this.goodsMsg = res.result;
// 判断是否收藏 // 判断是否收藏

171
buyer/src/pages/PointGoods.vue
View File

@ -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>

6
buyer/src/pages/PointMall.vue
View File

@ -63,7 +63,8 @@ export default {
pageNumber: 1, pageNumber: 1,
pageSize: 20, pageSize: 20,
pointsGoodsCategoryId: '' pointsGoodsCategoryId: ''
} },
total: 0 // 商品总数
} }
}, },
mounted () { mounted () {
@ -76,6 +77,7 @@ export default {
pointGoods(this.params).then(res => { pointGoods(this.params).then(res => {
if (res.success) { if (res.success) {
this.goodsList = res.result.records this.goodsList = res.result.records
this.total = res.result.total
} }
}) })
}, },
@ -94,7 +96,7 @@ export default {
goGoodsDetail (skuId, goodsId) { // 跳转商品详情 goGoodsDetail (skuId, goodsId) { // 跳转商品详情
let routerUrl = this.$router.resolve({ let routerUrl = this.$router.resolve({
path: '/goodsDetail', path: '/goodsDetail',
query: {skuId, goodsId} query: {skuId, goodsId, way: 'POINT'}
}) })
window.open(routerUrl.href, '_blank') window.open(routerUrl.href, '_blank')
}, },

7
buyer/src/pages/home/memberCenter/AccountBind.vue
View File

@ -25,13 +25,6 @@
<script> <script>
export default { export default {
name: 'AccountBind', name: 'AccountBind',
data () {
return {}
},
mounted () {
},
methods: {}
} }
</script> </script>

98
buyer/src/pages/home/memberCenter/AccountSafe.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<card _Title="账户安全"/> <card _Title="账户安全"/>
<div class="safeList"> <div class="safeList">
<!-- 密码 --> <!-- 密码 -->
<Row class="safeItem"> <Row class="safeItem">
@ -16,102 +15,11 @@
<Button @click="modifyPwd">修改密码</Button> <Button @click="modifyPwd">修改密码</Button>
</Col> </Col>
</Row> </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>
</div> </div>
</template> </template>
<script> <script>
import card from '@/components/card'
import { import {
getPwdStatus getPwdStatus
} from '@/api/account'; } from '@/api/account';
@ -122,7 +30,6 @@ export default {
pwdStatus: '' // 密码状态 pwdStatus: '' // 密码状态
} }
}, },
components: {card},
mounted () { mounted () {
this.getPwdStatus() this.getPwdStatus()
}, },
@ -131,10 +38,7 @@ export default {
goModifyPwd () { goModifyPwd () {
this.$router.push({name: 'ModifyPwd', query: { status: 2 }}) this.$router.push({name: 'ModifyPwd', query: { status: 2 }})
}, },
selectPwd (value) { modifyPwd () { // 修改密码
this.$router.push({name: 'ModifyPwd', query: { status: value }})
},
modifyPwd () {
this.$router.push({name: 'ModifyPwd', query: { status: 1 }}) this.$router.push({name: 'ModifyPwd', query: { status: 1 }})
}, },
// 获取密码状态 // 获取密码状态

13
buyer/src/pages/home/memberCenter/CommentList.vue
View File

@ -18,7 +18,7 @@
<div class="title order-item-title"> <div class="title order-item-title">
<span>订单号:{{item.orderNo}}</span> <span>订单号:{{item.orderNo}}</span>
<span class="color999 ml_10">{{item.createTime}}</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> </div>
<Row class="order-item-view"> <Row class="order-item-view">
<i-col span="12" class="item-view-name"> <i-col span="12" class="item-view-name">
@ -80,7 +80,7 @@ export default {
this.getList() this.getList()
}, },
methods: { methods: {
getList () { getList () { // 获取评价列表
evolutionList(this.params).then(res => { evolutionList(this.params).then(res => {
if (res.success) { if (res.success) {
const list = res.result.records; const list = res.result.records;
@ -92,19 +92,16 @@ export default {
} }
}) })
}, },
changePageNum (val) { changePageNum (val) { // 修改页码
this.params.pageNumber = val; this.params.pageNumber = val;
this.getList() this.getList()
}, },
changePageSize (val) { changePageSize (val) { // 修改页数
this.pageNumber = 1; this.pageNumber = 1;
this.params.pageSize = val; this.params.pageSize = val;
this.getList() this.getList()
}, },
changeIndex (index) { evaluateDetail (id) { // 跳转评价详情
console.log(index);
},
evaluate (id) {
this.$router.push({path: '/home/evalDetail', query: { id }}) this.$router.push({path: '/home/evalDetail', query: { id }})
} }
} }

8
buyer/src/pages/home/memberCenter/ComplainDetail.vue
View File

@ -141,23 +141,23 @@ export default {
} }
}, },
methods: { methods: {
getDetail () { getDetail () { // 获取投诉详情
getComplainDetail(this.$route.query.id).then(res => { getComplainDetail(this.$route.query.id).then(res => {
if (res.success) this.detail = res.result if (res.success) this.detail = res.result
}) })
}, },
goGoodsDetail (skuId, goodsId) { goGoodsDetail (skuId, goodsId) { // 跳转商品详情
let routerUrl = this.$router.resolve({ let routerUrl = this.$router.resolve({
path: '/goodsDetail', path: '/goodsDetail',
query: {skuId, goodsId} query: {skuId, goodsId}
}) })
window.open(routerUrl.href, '_blank') window.open(routerUrl.href, '_blank')
}, },
handleView (name) { handleView (name) { // 预览图片
this.previewImage = name; this.previewImage = name;
this.visible = true; this.visible = true;
}, },
// 回复 // 回复消息
handleSubmit () { handleSubmit () {
if (this.params.content === '') { if (this.params.content === '') {
this.$Message.error('请填写对话内容'); this.$Message.error('请填写对话内容');

12
buyer/src/pages/home/memberCenter/ComplainList.vue
View File

@ -18,7 +18,7 @@
<div class="title order-item-title"> <div class="title order-item-title">
<span>投诉单号:{{item.id}}</span> <span>投诉单号:{{item.id}}</span>
<span class="color999 ml_10">{{item.createTime}}</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> <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> </div>
<Row class="order-item-view"> <Row class="order-item-view">
@ -93,7 +93,7 @@ export default {
this.getList() this.getList()
}, },
methods: { methods: {
getList () { getList () { // 获取投诉列表
complainList(this.params).then(res => { complainList(this.params).then(res => {
if (res.success) { if (res.success) {
const list = res.result.records; const list = res.result.records;
@ -102,16 +102,16 @@ export default {
} }
}) })
}, },
changePageNum (val) { changePageNum (val) { // 改变页码
this.params.pageNumber = val; this.params.pageNumber = val;
this.getList() this.getList()
}, },
changePageSize (val) { changePageSize (val) { // 改变页数
this.pageNumber = 1; this.pageNumber = 1;
this.params.pageSize = val; this.params.pageSize = val;
this.getList() this.getList()
}, },
cancel (id) { cancel (id) { // 取消投诉
this.$Modal.confirm({ this.$Modal.confirm({
title: '取消投诉', title: '取消投诉',
content: '<p>确定取消投诉吗？</p>', content: '<p>确定取消投诉吗？</p>',
@ -126,7 +126,7 @@ export default {
onCancel: () => { } onCancel: () => { }
}); });
}, },
detail (id) { goDetail (id) { // 跳转投诉详情
this.$router.push({path: '/home/complainDetail', query: { id }}) this.$router.push({path: '/home/complainDetail', query: { id }})
} }
} }

10
buyer/src/pages/home/memberCenter/Distribution.vue
View File

@ -213,7 +213,7 @@ export default {
this.distribution() this.distribution()
}, },
methods: { methods: {
apply () { apply () { // 申请成为分销商
this.$refs.form.validate(valid => { this.$refs.form.validate(valid => {
if (valid) { if (valid) {
this.applyLoading = true this.applyLoading = true
@ -239,10 +239,10 @@ export default {
} }
}) })
}, },
qrcodeData (data64) { qrcodeData (data64) { // 二维码base64地址
this.base64Img = data64 this.base64Img = data64
}, },
downloadQrcode () { downloadQrcode () { // 下载二维码
let a = document.createElement('a'); // 生成一个a元素 let a = document.createElement('a'); // 生成一个a元素
let event = new MouseEvent('click'); // 创建一个单击事件 let event = new MouseEvent('click'); // 创建一个单击事件
a.download = this.goodsNameCurr || 'photo' a.download = this.goodsNameCurr || 'photo'
@ -265,11 +265,11 @@ export default {
this.getLog() this.getLog()
} }
}, },
changePage (val) { changePage (val) { // 修改页码
this.params.pageNumber = val; this.params.pageNumber = val;
this.getGoodsData() this.getGoodsData()
}, },
changePageLog (val) { changePageLog (val) { // 修改页码 日志
this.logParams.pageNumber = val; this.logParams.pageNumber = val;
this.getLog() this.getLog()
}, },

14
buyer/src/pages/home/memberCenter/Favorites.vue
View File

@ -68,19 +68,19 @@ export default {
}; };
}, },
methods: { methods: {
getList () { getList () { // 获取收藏列表
this.spinShow = true this.spinShow = true
collectList(this.params).then(res => { collectList(this.params).then(res => {
this.spinShow = false this.spinShow = false
if (res.success) this.list = res.result.records; if (res.success) this.list = res.result.records;
}) })
}, },
change (index) { change (index) { // tab栏切换
if (index === 0) { this.params.type = 'GOODS' } if (index === 0) { this.params.type = 'GOODS' }
if (index === 1) { this.params.type = 'SHOP' } if (index === 1) { this.params.type = 'SHOP' }
this.getList() this.getList()
}, },
cancel (id) { cancel (id) { // 取消收藏
let typeName = this.params.type === 'GOODS' ? '商品' : '店铺' let typeName = this.params.type === 'GOODS' ? '商品' : '店铺'
this.$Modal.confirm({ this.$Modal.confirm({
title: 'Title', title: 'Title',
@ -94,23 +94,23 @@ export default {
} }
}); });
}, },
changePageNum (val) { changePageNum (val) { // 修改页码
this.params.pageNumber = val; this.params.pageNumber = val;
this.getList() this.getList()
}, },
changePageSize (val) { changePageSize (val) { // 修改页数
this.pageNumber = 1; this.pageNumber = 1;
this.params.pageSize = val; this.params.pageSize = val;
this.getList() this.getList()
}, },
buynow (skuId, goodsId) { buynow (skuId, goodsId) { // 跳转详情
let url = this.$router.resolve({ let url = this.$router.resolve({
path: '/goodsDetail', path: '/goodsDetail',
query: {skuId, goodsId} query: {skuId, goodsId}
}) })
window.open(url.href, '_blank') window.open(url.href, '_blank')
}, },
goShop (id) { goShop (id) { // 跳转店铺页面
let url = this.$router.resolve({ let url = this.$router.resolve({
path: '/merchant', path: '/merchant',
query: {id} query: {id}

6
buyer/src/pages/home/memberCenter/Invoice.vue
View File

@ -78,12 +78,12 @@ export default {
this.getList() this.getList()
}, },
methods: { methods: {
getList () { getList () { // 获取发票列表
receiptList().then(res => { receiptList().then(res => {
this.list = res.result.records; this.list = res.result.records;
}) })
}, },
save () { save () { // 保存发票
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
this.loading = true; this.loading = true;
@ -105,7 +105,7 @@ export default {
} }
}); });
}, },
resetData () { resetData () { // 重置表单数据
this.$refs.form.resetFields(); this.$refs.form.resetFields();
} }
} }

6
buyer/src/pages/home/memberCenter/ModifyPwd.vue
View File

@ -99,7 +99,7 @@ export default {
againPassword: '', againPassword: '',
newPassword: '' newPassword: ''
}, },
ruleInLines: { ruleInLines: { // 验证规则
picture: [ picture: [
{required: true, message: '请输入图片验证码', trigger: 'blur'} {required: true, message: '请输入图片验证码', trigger: 'blur'}
], ],
@ -107,7 +107,7 @@ export default {
{required: true, message: '请输入短信验证码', trigger: 'blur'} {required: true, message: '请输入短信验证码', trigger: 'blur'}
] ]
}, },
ruleIn: { ruleIn: { // 验证规则
newPassword: [ newPassword: [
{required: true, message: '请输入新密码', trigger: 'blur'}, {required: true, message: '请输入新密码', trigger: 'blur'},
{type: 'string', min: 6, message: '密码不能少于6位'} {type: 'string', min: 6, message: '密码不能少于6位'}
@ -117,7 +117,7 @@ export default {
{type: 'string', min: 6, message: '密码不能少于6位'} {type: 'string', min: 6, message: '密码不能少于6位'}
] ]
}, },
ruleInline: { ruleInline: { // 验证规则
password: [ password: [
{required: true, message: '请输入旧密码', trigger: 'blur'} {required: true, message: '请输入旧密码', trigger: 'blur'}
], ],

6
buyer/src/pages/home/memberCenter/Point.vue
View File

@ -63,7 +63,7 @@ export default {
this.getPoint() this.getPoint()
}, },
methods: { methods: {
getHistory () { getHistory () { // 获取积分历史
memberPointHistory(this.params).then(res => { memberPointHistory(this.params).then(res => {
this.logData = res.result; this.logData = res.result;
}) })
@ -73,11 +73,11 @@ export default {
if (res.success) this.pointObj = res.result if (res.success) this.pointObj = res.result
}) })
}, },
changePage (val) { changePage (val) { // 修改页码
this.pageNumber = val this.pageNumber = val
this.getHistory() this.getHistory()
}, },
changePageSize (val) { changePageSize (val) { // 修改页数
this.param.pageSize = val this.param.pageSize = val
this.params.pageNumber = 1 this.params.pageNumber = 1
this.getHistory() this.getHistory()

6
buyer/src/pages/home/memberCenter/Profile.vue
View File

@ -8,7 +8,6 @@
<Upload <Upload
:show-upload-list="false" :show-upload-list="false"
:on-success="handleSuccess" :on-success="handleSuccess"
:before-upload="handleBeforeUpload"
:format="['jpg','jpeg','png']" :format="['jpg','jpeg','png']"
:action="action" :action="action"
:headers="accessToken" :headers="accessToken"
@ -58,7 +57,7 @@ export default {
this.accessToken.accessToken = storage.getItem('accessToken'); this.accessToken.accessToken = storage.getItem('accessToken');
}, },
methods: { methods: {
save () { save () { // 保存
this.$refs.form.validate(valid => { this.$refs.form.validate(valid => {
if (valid) { if (valid) {
let params = { let params = {
@ -76,10 +75,9 @@ export default {
} }
}) })
}, },
handleSuccess (res, file) { handleSuccess (res, file) { // 上传成功
this.$set(this.formItem, 'face', res.result) this.$set(this.formItem, 'face', res.result)
}, },
handleBeforeUpload () {}
} }
} }

14
buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
View File

@ -88,7 +88,7 @@ export default {
} }
}, },
methods: { methods: {
getOrderDetail () { getOrderDetail () { // 获取订单详情
orderDetail(this.$route.query.sn).then(res => { orderDetail(this.$route.query.sn).then(res => {
this.order = res.result this.order = res.result
this.orderGoods = res.result.orderItems[this.$route.query.index] this.orderGoods = res.result.orderItems[this.$route.query.index]
@ -96,7 +96,7 @@ export default {
this.orderGoods.uploadList = [] this.orderGoods.uploadList = []
}) })
}, },
save () { save () { // 保存评价
if (!this.form.serviceScore || !this.form.deliveryScore) { if (!this.form.serviceScore || !this.form.deliveryScore) {
this.$Message.warning('物流服务评价不能为空') this.$Message.warning('物流服务评价不能为空')
return false; return false;
@ -129,26 +129,26 @@ export default {
this.loading = false; this.loading = false;
}) })
}, },
goGoodsDetail (skuId, goodsId) { goGoodsDetail (skuId, goodsId) { // 跳转商品详情
let routerUrl = this.$router.resolve({ let routerUrl = this.$router.resolve({
path: '/goodsDetail', path: '/goodsDetail',
query: {skuId, goodsId} query: {skuId, goodsId}
}) })
window.open(routerUrl.href, '_blank') window.open(routerUrl.href, '_blank')
}, },
handleView (name) { handleView (name) { // 预览图片
this.previewImage = name; this.previewImage = name;
this.visible = true; this.visible = true;
}, },
handleRemove (index) { handleRemove (index) { // 移除图片
this.orderGoods.uploadList.splice(index, 1) this.orderGoods.uploadList.splice(index, 1)
this.$forceUpdate() this.$forceUpdate()
}, },
handleSuccess (res, file) { handleSuccess (res, file) { // 上传成功回调
this.orderGoods.uploadList.push(res.result) this.orderGoods.uploadList.push(res.result)
this.$forceUpdate() this.$forceUpdate()
}, },
handleBeforeUpload () { handleBeforeUpload () { // 上传之前钩子
const check = this.orderGoods.uploadList.length < 10; const check = this.orderGoods.uploadList.length < 10;
if (!check) { if (!check) {
this.$Notice.warning({ this.$Notice.warning({

6
buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
View File

@ -65,19 +65,19 @@ export default {
} }
}, },
methods: { methods: {
getDetail () { getDetail () { // 获取评价详情
evaluationDetail(this.$route.query.id).then(res => { evaluationDetail(this.$route.query.id).then(res => {
if (res.success) this.orderGoods = res.result if (res.success) this.orderGoods = res.result
}) })
}, },
goGoodsDetail (skuId, goodsId) { goGoodsDetail (skuId, goodsId) { // 跳转商品详情
let routerUrl = this.$router.resolve({ let routerUrl = this.$router.resolve({
path: '/goodsDetail', path: '/goodsDetail',
query: {skuId, goodsId} query: {skuId, goodsId}
}) })
window.open(routerUrl.href, '_blank') window.open(routerUrl.href, '_blank')
}, },
handleView (name) { handleView (name) { // 预览图片
this.previewImage = name; this.previewImage = name;
this.visible = true; this.visible = true;
} }

2
buyer/src/pages/home/orderCenter/AddAddress.vue
View File

@ -79,7 +79,7 @@ export default {
}; };
}, },
methods: { methods: {
save () { save () { // 保存地址
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
const params = JSON.parse(JSON.stringify(this.formData)); const params = JSON.parse(JSON.stringify(this.formData));

6
buyer/src/pages/home/orderCenter/AfterSale.vue
View File

@ -133,7 +133,7 @@ export default {
}); });
window.open(routeUrl.href, '_blank'); window.open(routeUrl.href, '_blank');
}, },
getList () { getList () { // 获取售后列表
this.spinShow = true; this.spinShow = true;
let params = JSON.parse(JSON.stringify(this.params)) let params = JSON.parse(JSON.stringify(this.params))
afterSaleList(params).then(res => { afterSaleList(params).then(res => {
@ -144,11 +144,11 @@ export default {
} }
}); });
}, },
changePageNum (val) { changePageNum (val) { // 修改页码
this.params.pageNumber = val; this.params.pageNumber = val;
this.getList() this.getList()
}, },
changePageSize (val) { changePageSize (val) { // 修改页数
this.pageNumber = 1; this.pageNumber = 1;
this.params.pageSize = val; this.params.pageSize = val;
this.getList() this.getList()

2
buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
View File

@ -75,7 +75,7 @@ export default {
} }
}) })
}, },
getLog () { getLog () { // 获取售后日志
afterSaleLog(this.$route.query.sn).then(res => { afterSaleLog(this.$route.query.sn).then(res => {
this.logList = res.result; this.logList = res.result;
}) })

16
buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
View File

@ -139,7 +139,7 @@ export default {
} }
}, },
methods: { methods: {
getInfo () { getInfo () { // 获取售后信息
afterSaleInfo(this.$route.query.sn).then(res => { afterSaleInfo(this.$route.query.sn).then(res => {
if (res.success) { if (res.success) {
this.info = res.result this.info = res.result
@ -147,15 +147,15 @@ export default {
} }
}) })
}, },
getReason (type) { getReason (type) { // 获取售后原因
afterSaleReason(type).then(res => { afterSaleReason(type).then(res => {
if (res.success) this.reasonList = res.result if (res.success) this.reasonList = res.result
}) })
}, },
changeReason (type) { changeReason (type) { // 改变售后原因列表
this.getReason(type) this.getReason(type)
}, },
apply () { apply () { // 售后申请提交
this.$refs.form.validate(valid => { this.$refs.form.validate(valid => {
if (valid) { if (valid) {
let params = Object.assign(this.info, this.form) let params = Object.assign(this.info, this.form)
@ -170,19 +170,19 @@ export default {
} }
}) })
}, },
handleView (name) { handleView (name) { // 预览图片
this.previewImage = name; this.previewImage = name;
this.visible = true; this.visible = true;
}, },
handleRemove (index) { handleRemove (index) { // 移除图片
this.uploadList.splice(index, 1) this.uploadList.splice(index, 1)
this.$forceUpdate() this.$forceUpdate()
}, },
handleSuccess (res, file) { handleSuccess (res, file) { // 上传成功回调
this.uploadList.push(res.result) this.uploadList.push(res.result)
this.$forceUpdate() this.$forceUpdate()
}, },
handleBeforeUpload () { handleBeforeUpload () { // 上传之前钩子函数
const check = this.uploadList.length < 6; const check = this.uploadList.length < 6;
if (!check) { if (!check) {
this.$Notice.warning({ this.$Notice.warning({

14
buyer/src/pages/home/orderCenter/Complain.vue
View File

@ -78,7 +78,7 @@ export default {
} }
}, },
methods: { methods: {
getOrderDetail () { getOrderDetail () { // 获取订单详情
orderDetail(this.$route.query.sn).then(res => { orderDetail(this.$route.query.sn).then(res => {
this.order = res.result this.order = res.result
this.orderGoods = res.result.orderItems[this.$route.query.index] this.orderGoods = res.result.orderItems[this.$route.query.index]
@ -92,7 +92,7 @@ export default {
} }
}) })
}, },
save () { save () { // 提交投诉信息
let params = { let params = {
goodsId: this.orderGoods.goodsId, goodsId: this.orderGoods.goodsId,
complainTopic: this.form.complainTopic, complainTopic: this.form.complainTopic,
@ -108,26 +108,26 @@ export default {
} }
}) })
}, },
goGoodsDetail (skuId, goodsId) { goGoodsDetail (skuId, goodsId) { // 跳转商品详情
let routerUrl = this.$router.resolve({ let routerUrl = this.$router.resolve({
path: '/goodsDetail', path: '/goodsDetail',
query: {skuId, goodsId} query: {skuId, goodsId}
}) })
window.open(routerUrl.href, '_blank') window.open(routerUrl.href, '_blank')
}, },
handleView (name) { handleView (name) { // 预览图片
this.previewImage = name; this.previewImage = name;
this.visible = true; this.visible = true;
}, },
handleRemove (index) { handleRemove (index) { // 移除图片
this.orderGoods.uploadList.splice(index, 1) this.orderGoods.uploadList.splice(index, 1)
this.$forceUpdate() this.$forceUpdate()
}, },
handleSuccess (res, file) { handleSuccess (res, file) { // 上传成功回调
this.orderGoods.uploadList.push(res.result) this.orderGoods.uploadList.push(res.result)
this.$forceUpdate() this.$forceUpdate()
}, },
handleBeforeUpload () { handleBeforeUpload () { // 上传之前钩子函数
const check = this.orderGoods.uploadList.length < 6; const check = this.orderGoods.uploadList.length < 6;
if (!check) { if (!check) {
this.$Notice.warning({ this.$Notice.warning({

10
buyer/src/pages/home/orderCenter/MyOrder.vue
View File

@ -240,7 +240,7 @@ export default {
complainResult (sn) { // 投诉结果 complainResult (sn) { // 投诉结果
}, },
delOrder (sn) { delOrder (sn) { // 删除订单
this.$Modal.confirm({ this.$Modal.confirm({
title: '删除订单', title: '删除订单',
content: '<p>确认删除当前订单吗？</p>', content: '<p>确认删除当前订单吗？</p>',
@ -255,7 +255,7 @@ export default {
onCancel: () => {} onCancel: () => {}
}); });
}, },
getList () { getList () { // 获取订单列表
this.spinShow = true; this.spinShow = true;
let params = JSON.parse(JSON.stringify(this.params)) let params = JSON.parse(JSON.stringify(this.params))
if (params.orderStatus === 'ALL') { if (params.orderStatus === 'ALL') {
@ -269,11 +269,11 @@ export default {
} }
}); });
}, },
changePageNum (val) { changePageNum (val) { // 修改页码
this.params.pageNumber = val; this.params.pageNumber = val;
this.getList() this.getList()
}, },
changePageSize (val) { changePageSize (val) { // 修改页数
this.pageNumber = 1; this.pageNumber = 1;
this.params.pageSize = val; this.params.pageSize = val;
this.getList() this.getList()
@ -289,7 +289,7 @@ export default {
} }
}) })
}, },
sureCancel () { sureCancel () { // 确定取消
cancelOrder(this.cancelParams).then(res => { cancelOrder(this.cancelParams).then(res => {
if (res.success) { if (res.success) {
this.$Message.success('取消订单成功') this.$Message.success('取消订单成功')

2
buyer/src/pages/home/orderCenter/OrderDetail.vue
View File

@ -128,7 +128,7 @@ export default {
} }
}) })
}, },
traces () { traces () { // 物流信息
getTraces(this.$route.query.sn).then(res => { getTraces(this.$route.query.sn).then(res => {
if (res.success) { if (res.success) {
this.logistics = res.result this.logistics = res.result

3
manager/package.json
View File

@ -48,7 +48,8 @@
"vuex": "^3.4.0", "vuex": "^3.4.0",
"wangeditor": "^4.5.3", "wangeditor": "^4.5.3",
"xlsx": "^0.16.2", "xlsx": "^0.16.2",
"xss": "^1.0.7" "xss": "^1.0.7",
"uuid": "^8.3.2"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^4.4.4", "@vue/cli-plugin-babel": "^4.4.4",

8
manager/src/App.vue
View File

@ -5,6 +5,7 @@
</template> </template>
<script> <script>
import {v4 as uuidv4} from 'uuid';
import {getCategoryTree} from '@/api/goods.js' import {getCategoryTree} from '@/api/goods.js'
export default { export default {
updated() { updated() {
@ -15,7 +16,14 @@ export default {
} }
}) })
} }
},
mounted() {
let uuid = this.getStore('uuid');
if (!uuid) {
uuid = uuidv4();
this.setStore('uuid', uuid);
} }
},
}; };
</script> </script>

16
manager/src/api/common.js
View File

@ -1,4 +1,4 @@
import {commonUrl, getRequest} from '@/libs/axios'; import {commonUrl, getRequest, getRequestWithNoToken, postRequestWithNoToken} from '@/libs/axios';
// 通过id获取子地区 // 通过id获取子地区
export const getChildRegion = (id) => { export const getChildRegion = (id) => {
@ -6,6 +6,16 @@ export const getChildRegion = (id) => {
}; };
// 点地图获取地址信息 // 点地图获取地址信息
export const getRegion = (parpams) => { export const getRegion = (params) => {
return getRequest(`${commonUrl}/common/region/region`, parpams); 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);
}; };

2
manager/src/libs/axios.js
View File

@ -24,6 +24,8 @@ service.interceptors.request.use(
...config.params ...config.params
} }
} }
const uuid = getStore('uuid');
config.headers['uuid'] = uuid;
return config; return config;
}, },
err => { err => {

2
manager/src/router/router.js
View File

@ -5,7 +5,7 @@ export const loginRouter = {
path: "/login", path: "/login",
name: "login", name: "login",
meta: { meta: {
title: "登录 - lili " title: "登录 - lili运营后台"
}, },
component: () => import("@/views/login.vue") component: () => import("@/views/login.vue")
}; };

31
manager/src/views/login.vue
View File

@ -22,6 +22,13 @@
</Row> </Row>
</Row> </Row>
<!-- 拼图验证码 -->
<verify
ref="verify"
class="verify-con"
verifyType="LOGIN"
@change="verifyChange"
></verify>
<div v-if="socialLogining"> <div v-if="socialLogining">
<RectLoading /> <RectLoading />
</div> </div>
@ -41,6 +48,7 @@ import LangSwitch from "@/views/main-components/lang-switch";
import RectLoading from "@/views/my-components/lili/rect-loading"; import RectLoading from "@/views/my-components/lili/rect-loading";
import CountDownButton from "@/views/my-components/lili/count-down-button"; import CountDownButton from "@/views/my-components/lili/count-down-button";
import util from "@/libs/util.js"; import util from "@/libs/util.js";
import verify from '@/views/my-components/verify';
export default { export default {
components: { components: {
@ -49,6 +57,7 @@ export default {
LangSwitch, LangSwitch,
Header, Header,
Footer, Footer,
verify
}, },
data() { data() {
return { return {
@ -79,7 +88,7 @@ export default {
}, },
methods: { methods: {
mounted() {}, mounted() {},
afterLogin(res) { afterLogin(res) { // 登录成功后处理
let accessToken = res.result.accessToken; let accessToken = res.result.accessToken;
let refreshToken = res.result.refreshToken; let refreshToken = res.result.refreshToken;
this.setStore("accessToken", accessToken); this.setStore("accessToken", accessToken);
@ -100,9 +109,16 @@ export default {
} }
}); });
}, },
submitLogin() { submitLogin() { // 登录操作
this.$refs.usernameLoginForm.validate((valid) => { this.$refs.usernameLoginForm.validate((valid) => {
if (valid) { if (valid) {
this.$refs.verify.show = true;
}
});
},
verifyChange (con) { // 拼图验证码回显
if (!con.status) return;
this.loading = true; this.loading = true;
login({ login({
username: this.form.username, username: this.form.username,
@ -113,10 +129,8 @@ export default {
} else { } else {
this.loading = false; this.loading = false;
} }
}); }).catch(()=>{this.loading = false});
} }
});
},
}, },
}; };
</script> </script>
@ -140,7 +154,12 @@ export default {
position: relative; position: relative;
zoom: 1; zoom: 1;
} }
.verify-con{
position: absolute;
top: 90px;
z-index: 10;
left: 20px;
}
.form { .form {
padding-top: 1vh; padding-top: 1vh;

14
manager/src/views/my-components/verify/README.md Normal file
View File

@ -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>

185
manager/src/views/my-components/verify/index.vue Normal file
View File

@ -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>

13
manager/src/views/my-components/verify/verify.js Normal file
View File

@ -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);
};

3
seller/package.json
View File

@ -44,7 +44,8 @@
"vuex": "^3.4.0", "vuex": "^3.4.0",
"wangeditor": "^4.6.13", "wangeditor": "^4.6.13",
"xlsx": "^0.16.2", "xlsx": "^0.16.2",
"xss": "^1.0.7" "xss": "^1.0.7",
"uuid": "^8.3.2"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^4.4.4", "@vue/cli-plugin-babel": "^4.4.4",

12
seller/src/App.vue
View File

@ -5,13 +5,15 @@
</template> </template>
<script> <script>
import {v4 as uuidv4} from 'uuid';
export default { export default {
data() { mounted() {
return {}; let uuid = this.getStore('uuid');
if (!uuid) {
uuid = uuidv4();
this.setStore('uuid', uuid);
}
}, },
mounted() {},
beforeDestroy() {},
methods: {}
}; };
</script> </script>

2
seller/src/libs/axios.js
View File

@ -24,6 +24,8 @@ service.interceptors.request.use(
...config.params ...config.params
} }
} }
const uuid = getStore('uuid');
config.headers['uuid'] = uuid;
return config; return config;
}, },
err => { err => {

2
seller/src/router/router.js
View File

@ -5,7 +5,7 @@ export const loginRouter = {
path: "/login", path: "/login",
name: "login", name: "login",
meta: { meta: {
title: "登录 - lili " title: "登录 - lili商家后台 "
}, },
component: () => import("@/views/login.vue") component: () => import("@/views/login.vue")
}; };

2
seller/src/views/goods/goods-seller/goodsOperation.vue
View File

@ -61,7 +61,7 @@
</p> </p>
<template v-if="!$route.query.id"> <template v-if="!$route.query.id">
<Divider>或选择商品模版</Divider> <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" <Option v-for="item in goodsTemplates" :value="item.id" :key="item.id"
>{{ item.goodsName || item.id }} >{{ item.goodsName || item.id }}
</Option> </Option>

27
seller/src/views/login.vue
View File

@ -55,6 +55,13 @@
</Row> </Row>
<Footer /> <Footer />
<!-- 拼图验证码 -->
<verify
ref="verify"
class="verify-con"
verifyType="LOGIN"
@change="verifyChange"
></verify>
</Col> </Col>
<!-- <LangSwitch /> --> <!-- <LangSwitch /> -->
</Row> </Row>
@ -72,11 +79,13 @@ import Header from "@/views/main-components/header";
import Footer from "@/views/main-components/footer"; import Footer from "@/views/main-components/footer";
import LangSwitch from "@/views/main-components/lang-switch"; import LangSwitch from "@/views/main-components/lang-switch";
import util from "@/libs/util.js"; import util from "@/libs/util.js";
import verify from '@/views/my-components/verify';
export default { export default {
components: { components: {
LangSwitch, LangSwitch,
Header, Header,
Footer, Footer,
verify
}, },
data() { data() {
return { return {
@ -154,10 +163,16 @@ export default {
} }
}); });
}, },
submitLogin() { submitLogin() { // 登录提交
// 正常逻辑
this.$refs.usernameLoginForm.validate((valid) => { this.$refs.usernameLoginForm.validate((valid) => {
if (valid) { if (valid) {
this.$refs.verify.show = true;
}
})
},
verifyChange (con) { // 拼图验证码回显
if (!con.status) return;
this.loading = true; this.loading = true;
login({ login({
username: this.form.username, username: this.form.username,
@ -169,8 +184,6 @@ export default {
} }
}).catch(()=>{this.loading = false}) }).catch(()=>{this.loading = false})
} }
})
},
} }
}; };
</script> </script>
@ -203,6 +216,12 @@ export default {
display: flex; display: flex;
flex-direction: column !important; flex-direction: column !important;
} }
.verify-con{
position: absolute;
top: 126px;
z-index: 10;
left: 20px;
}
.form { .form {
padding-top: 1vh; padding-top: 1vh;

14
seller/src/views/my-components/verify/README.md Normal file
View File

@ -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>

185
seller/src/views/my-components/verify/index.vue Normal file
View File

@ -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>

13
seller/src/views/my-components/verify/verify.js Normal file
View File

@ -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);
};