Skip to content

C
center-shop-show-pc
提交 518848fb authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 6479a252
隐藏空白字符变更
内嵌 并排
正在显示 包含 639 行增加 和 133 行删除
.config.dev.js
浏览文件 @ 518848fb
module.exports = {
domain: 'dev.ezijing.com',
url: 'https://ehall2.ezijing.com/api',
isEnableToIphoneDebugger: false,
// apiBaseURL: '//demo-login.ezijing.com/',
url: 'https://learn-api.ezijing.com/api',
webpack: {
externals: {
'CKEDITOR': 'window.CKEDITOR',
'Base64': 'window.Base64',
'md5': 'window.md5',
'regeneratorRuntime': 'window.regeneratorRuntime'
CKEDITOR: 'window.CKEDITOR',
Base64: 'window.Base64',
md5: 'window.md5',
regeneratorRuntime: 'window.regeneratorRuntime',
wx: 'window.wx',
WeixinJSBridge: 'window.WeixinJSBridge'
},
devServer: {
proxy: {
/* 多个代理 */
// '/api': {
// target: $GLOBAL.webConf.url,
// selfHandleResponse: false,
// // selfHandleResponse: true, // 自定义 响应结构
// secure: false, // 如果是https接口，需要配置这个参数
// changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
// followRedirects: true, // 由于重定向307，所以跟随重定向直接返回一个接口
// logLevel: 'info', // 日志打印级别
// headers: {
// 'Referer': $GLOBAL.webConf.url
// },
// pathRewrite: {
// '^/api': '/' // 需要rewrite重写的
// }
// }
'/api/shop': {
target: 'http://172.16.3.11:8089',
changeOrigin: true,
pathRewrite: { '^/api/shop': '' }
}
}
}
},
ProvidePlugin: {
},
ProvidePlugin: {},
others: {
baseUrl: 'https://learn-api.ezijing.com',
loginUrl: 'https://login.ezijing.com/auth/login/index'
}
}
}
\ No newline at end of file
src/api/index.js
浏览文件 @ 518848fb
import httpRequest from '@/utils/axios'
// 登出
export function logout() {
return httpRequest.get('/api/passport/logout')
}
// 获取用户信息
export function getUser() {
return httpRequest.get('/api/passport/account/get-user-info')
}
// 发送验证码
export function sendCode(data) {
return httpRequest({
url: '/api/usercenter/user/send-code',
method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data
})
}
// 修改密码
export function updatePassword(data) {
return httpRequest({
url: '/api/usercenter/user/update-pwd',
method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data
})
}
// 修改用户信息
export function updateUserInfo(data) {
// 获取订单详情
export function getCommodityDetail(data) {
return httpRequest({
url: '/api/usercenter/user/update-user',
url: '/api/shop/commodity/spu/search',
method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data
})
}
src/components/layout/footer.vue 0 → 100644
浏览文件 @ 518848fb
<template>
<div class="app-footer">
<div class="app-footer-main">
<div class="inner">
<div class="left">
<img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/shms-logo.png" class="logo" />
<ul class="menu">
<li v-for="item in menuList" :key="item.href">
<a :href="item.href" target="_blank">{{ item.title }}</a>
</li>
</ul>
</div>
<div class="right">
<div class="contact">
<h3>联系我们</h3>
<p>
Swiss Education Group<br />
SHMS瑞士酒店管理大学<br />
<!-- 电话：010-62793909<br />
E-mail：chinafflg@ezijing.com<br /> -->
地址：北京市海淀区中关村东路1号院7号楼5层<br />
邮编：100000
</p>
</div>
<div class="qrcode">
<img src="https://zws-imgs-pub.ezijing.com/static/public/29ce10d35376f24ae1ecaccd57215d5c.jpg" alt="" />
<p>扫二维码关注官方微信</p>
<p>微信公众号zijingedu</p>
</div>
</div>
</div>
</div>
<div class="copyright" style="height: 40px;line-height: 40px;color: #fff;background: #ccc;">
<div class="inner" style="width: 100%;justify-content: center;display: flex;">
<p style="font-size: 12px;">Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司</p>
<a target="_blank" href="https://tsm.miit.gov.cn/dxxzsp/" style="color: #fff;text-decoration:none;margin-left: 10px;">
<p style="font-size: 12px;">京ICP证150431号</p>
</a>
<a target="_blank" class="record" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681" style="
color: #fff;
text-decoration:none;
align-items: center;
display: flex;
margin-right: 5px;">
<img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" alt="" style="
width: 20px;
height: 20px;
margin: 0 6px;
display: block;
">
<p style="font-size: 12px;">安备 11010802023681号</p>
</a>
<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index" style="color: #fff;text-decoration:none;">
<p style="font-size: 12px;">京ICP备15016866号-1</p>
</a>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
menuList: [
{ title: '中国教育部', href: 'http://www.moe.gov.cn/' },
{ title: '中国涉外教育监管网', href: 'http://jsj.moe.gov.cn/' },
{ title: 'SHMS瑞士酒店管理大学', href: 'www.shms.com' },
{ title: 'Swiss Education Group ', href: 'www.swisseducation.com' }
]
}
}
}
</script>
<style lang="scss" scoped>
.logo{
width: 60px;
}
.app-footer {
.inner {
max-width: 970px;
margin: 0 auto;
}
.app-footer-main {
padding: 40px 0;
color: #a7a7a7;
background-color: #212223;
.inner {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.menu {
margin-top: 10px;
line-height: 30px;
font-size: 12px;
color: #7d7d7d;
}
.right {
display: flex;
}
.contact {
h3 {
font-size: 16px;
color: #fff;
line-height: 1;
margin-bottom: 15px;
}
p {
font-size: 12px;
color: #a7a7a7;
line-height: 24px;
}
}
.qrcode {
width: 128px;
margin-left: 80px;
opacity: 0;
img {
width: 100%;
}
p {
font-size: 12px;
color: #a7a7a7;
text-align: center;
line-height: 20px;
}
}
.copyright {
height: 40px;
line-height: 40px;
color: #fff;
background: #ccc;
.inner{
width: 100%;
justify-content: center;
display: flex;
p{
font-size: 12px;
}
.record{
align-items: center;
display: flex;
margin-right: 5px;
img{
width: 20px;
height: 20px;
margin: 0 6px;
display: block;
}
}
}
}
}
</style>
src/components/layout/header.vue 0 → 100644
浏览文件 @ 518848fb
<template>
<header class="app-header">
<div class="app-header__bar">
<div class="inner">
<img class="logo" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-pc/shop-logo.png" alt="">
</div>
</div>
<div class="app-header__menu">
<ul class="inner">
<li
v-for="(item, index) in menuItem"
:key="index"
>{{ item.title }}</li>
</ul>
</div>
</header>
</template>
<script>
export default {
data() {
return {
menuItem: [
{ title: '微店铺首页', path: '/index' },
{ title: '最新商品', path: '/project' },
{ title: '店铺笔记', path: '/videoCenter' }
]
}
},
computed: {},
watch: {},
methods: {}
}
</script>
<style lang="scss" scoped>
.app-header {
background-color: #fff;
.inner {
max-width: 1110px;
margin: 0 auto;
}
}
.app-header__bar {
padding: 25px 0 23px;
.logo{
display: block;
width: 260px;
}
}
.app-header__menu{
background: #1F292C;
ul{
display: flex;
li{
line-height: 30px;
font-size: 16px;
color: #FFFFFF;
padding: 0 24px;
cursor: pointer;
}
}
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
</style>
src/components/layout/index.vue 0 → 100644
浏览文件 @ 518848fb
<template>
<div class="app-layout">
<app-header />
<app-main />
<!-- <app-footer/> -->
</div>
</template>
<script>
import AppHeader from './header'
import AppMain from './main'
import AppFooter from './footer'
export default {
props: {
hasFooter: { type: Boolean, default: true }
},
components: { AppHeader, AppMain, AppFooter }
}
</script>
src/components/layout/main.vue 0 → 100644
浏览文件 @ 518848fb
<template>
<div class="app-main">
<router-view />
</div>
</template>
src/pages/components/item.vue 0 → 100644
浏览文件 @ 518848fb
<template>
<div class="item-content">
<img :src="JSON.parse(data.chart_oss)[0].url" alt="">
<div class="title">{{ data.spu_name }}</div>
<div class="money">
<span>￥</span>{{ data.price_zone }}
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object
}
}
}
</script>
<style lang="scss" scoped>
.item-content{
margin-bottom: 30px;
img{
width: 160px;
height: 160px;
display: block;
}
.title{
font-size: 14px;
line-height: 21px;
color: #808080;
margin-top: 6px;
}
.money{
font-size: 20px;
line-height: 19px;
color: #6A6A6A;
span{
font-size: 14px;
}
margin-top: 6px;
}
}
</style>
src/pages/shop.vue
浏览文件 @ 518848fb
<template>
<div class="abc">
<div class="shop-content">
<div class="inner">
<div class="shop-content__left">
<div class="left-con__top">
<div class="swiper-box">
<img class="banner" :src="swiperBanner">
<ul class="swiper-tab__btn">
<li v-for="(item, index) in swiperBtnItem" :key="index" @click="tabSwiper(item)">
<img :src="item">
</li>
</ul>
</div>
<div class="order-detail">
<div class="title">{{ commodityData.spu_name }}</div>
<div class="price">
<div class="name">价格</div>
<div class="num"><span>￥</span>{{ commodityData.price_zone }}</div>
<div class="stock">
库存<br /><span>{{ commodityData.stock }}</span>件
</div>
</div>
<div class="freight">
<div class="name">运费</div>
<div class="val">无需配送</div>
</div>
<div class="buy-btn">立即购买</div>
<div class="buy-mode">
<div class="name">支付方式：</div>
<div class="li">
<img class="icon" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-pc/icon-pay1.png">
<div class="text">支付宝</div>
</div>
<div class="li">
<img class="icon" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-pc/icon-pay2.png">
<div class="text">微信支付</div>
</div>
<div class="li">
<img class="icon" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-pc/icon-pay3.png">
<div class="text">银行卡支付</div>
</div>
</div>
</div>
</div>
<div class="left-con__bottom">
<div class="line"></div>
<div class="des">
<div class="tit">紫荆教育电销平台</div>
<div class="t">扫描二维码，访问我们的微信店铺</div>
</div>
</div>
</div>
<div class="shop-content__right">
<div class="title-box">
<div class="line"></div>
<div class="name">热门商品</div>
</div>
<template v-for="(item, index) in hotCommodity">
<hot-shop :data="item" :key="index"/>
</template>
</div>
</div>
</div>
</template>
<script>
import sLanguage from '@/components/languageSwitch/index.vue'
// import action from '@action'
import hotShop from './components/item'
import { getCommodityDetail } from '@/api'
export default {
components: { sLanguage },
components: { hotShop },
data () {
return {
test: 'abc',
navList: [
{ src: '/static/resources/img/logo.png', title: '公益行', type: 1 }
]
}
},
metaInfo () {
return {
title: '独立 - 标题',
meta: [
// { vmid: 'description', name: 'description', content: this.description }
]
swiperBtnItem: [
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-pc/img1.png',
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-pc/shop-logo.png'
],
swiperBanner: '',
commodityData: {},
hotCommodity: []
}
},
mounted () {
/* 接口请求测试 */
// action.Test.getTest('1').then((res) => {
// console.log(res)
// })
// action.Test.postTest().then(res => {
// console.log(res)
// }).finally(res => {
// console.log('finally 可用。')
// })
// console.log(1, CKEDITOR)
// console.log(2, Base64)
// console.log(3, md5)
this.getOrderDetail()
this.getOrderDetail({
shop_id: '6800720558108442624',
page: '0',
page_size: '2'
})
},
methods: {
changeLanguage () {
this.$i18n.locale = (this.$i18n.locale === 'cn' ? 'en' : 'cn')
},
alertMsg () {
this.$alert('这是一段内容', '标题名称', {
callback: action => {}
getOrderDetail(data) {
const params = data || {
shop_id: '6800720558108442624',
spu_id: '6803146450260721664'
}
getCommodityDetail(params).then((res) => {
if (res.code === 0) {
if (data) {
this.hotCommodity = res.data
return
}
this.commodityData = res.data[0]
this.swiperBtnItem = JSON.parse(res.data[0].chart_oss).map(item => item.url)
this.swiperBanner = this.swiperBtnItem[0]
}
})
},
tabSwiper(src) {
this.swiperBanner = src
}
}
}
</script>
<style lang="scss" scoped>
.bg-img {
width: 134px;
height: 44px;
background: url('~@/assets/images/logo.png') no-repeat;
.shop-content{
.inner{
width: 1110px;
margin: 0 auto;
display: flex;
padding-top: 20px;
.shop-content__left{
.left-con__top{
display: flex;
.swiper-box{
width: 420px;
.banner{
width: 100%;
height: 420px;
display: block;
}
.swiper-tab__btn{
display: flex;
margin-top: 20px;
li{
cursor: pointer;
width: 58px;
height: 58px;
margin-right: 20px;
img{
width: 100%;
height: 100%;
display: block;
}
}
}
}
.order-detail{
border-right: 1px solid #DEDEDE;
padding-right: 22px;
box-sizing: border-box;
height: 420px;
margin-left: 22px;
.title{
font-size: 16px;
line-height: 100%;
padding: 12px 0 15px;
color: #333333;
}
.price{
width: 434px;
height: 65px;
background: #F6F4F5;
display: flex;
align-items: center;
.name{
font-size: 14px;
color: #A0A0A0;
margin-left: 16px;
}
.num{
padding-left: 40px;
font-weight: bold;
font-size: 36px;
color: #C01540;
span{
font-size: 24px;
}
}
.stock{
margin-left: auto;
padding: 0 20px;
border-left: 1px solid #DEDEDE;
height: 42px;
font-size: 14px;
// line-height: 28px;
color: #A0A0A0;
span{
color: rgba(192, 21, 64, 1);
font-size: 18px;
}
}
}
.freight{
display: flex;
padding: 22px 0;
.name{
font-size: 14px;
line-height: 100%;
color: #A0A0A0;
margin-left: 16px;
}
.val{
margin-left: 39px;
font-size: 14px;
font-family: Source Han Sans CN;
line-height: 100%;
color: #434343;
}
}
.buy-btn{
width: 198px;
height: 54px;
background: #C01540;
text-align: center;
line-height: 54px;
font-size: 20px;
color: #fff;
}
.buy-mode{
display: flex;
align-items: center;
padding-top: 20px;
.name{
font-size: 14px;
color: #434343;
margin-right: 8px;
}
.li{
margin-right: 22px;
display: flex;
align-items: center;
.icon{
width: 25px;
height: 19px;
display: block;
}
&:nth-child(1){
.icon{
width: 25px;
height: 25px;
display: block;
}
}
&:nth-child(2){
.icon{
width: 26px;
height: 23px;
display: block;
}
}
.text{
font-size: 14px;
color: #999999;
margin-left: 7px;
}
}
}
}
}
.left-con__bottom{
border-top: 1px solid #E7E7E7;
padding-top: 34px;
display: flex;
margin-top: 38px;
.line{
width: 180px;
height: 180px;
border: 1px solid #707070;
margin-right: 20px;
.des{
.tit{
font-size: 16px;
line-height: 100%;
color: #333333;
}
.t{
font-size: 14px;
line-height: 100%;
margin-top: 10px;
color: #7E7E7E;
}
}
}
}
}
.shop-content__right{
margin-left: 20px;
.title-box{
width: 160px;
height: 20px;
margin: 10px 0;
display: flex;
align-items: center;
position: relative;
.line{
width: 100%;
border-top: 1px dotted #aaa;
}
.name{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 0 10px;
font-size: 14px;
color: #434343;
}
}
}
}
}
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
</style>
src/router/routes.js
浏览文件 @ 518848fb
import Layout from '@/components/layout'
export default [
{ path: '/', redirect: '/shop' },
/* 测试页面 */
{ path: '/shop', name: 'shop', component: () => import('../pages/shop.vue') },
/* 如果所有页面都没找到 - 指向 */
{ path: '*', redirect: '/' },
{
path: '/',
component: Layout,
children: [
{ path: '', redirect: '/shop' },
{ path: '/shop', component: () => import('@/pages/shop.vue') }
]
},
{ path: '*', component: () => import('@/components/errorPages/404.vue') }
]
src/style.scss
浏览文件 @ 518848fb
......@@ -4,7 +4,7 @@ html, body {
margin: 0;
height: 100%;
width: 100%;
background: #eee;
background: #fff;
}
/* 统一字体样式 */
* {
......
src/utils/axios.js
浏览文件 @ 518848fb
import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'
import { getNonce } from '@/utils/utils'
// import router from '@/router'
const httpRequest = axios.create({
// baseURL: webConf.others.baseUrl,
timeout: 60000,
withCredentials: true,
headers: { 'Content-Type': 'application/json', apikey: 'McS1WsnMwMhsfc7cJ7Y0' }
headers: {
'Content-Type': 'application/json'
}
})
// 请求拦截
httpRequest.interceptors.request.use(
function(config) {
const defaultParams = {
timestamp: parseInt(Date.now() / 1000),
nonce: getNonce(12),
signature: 'UG7wBenexQhiuD2wpCwuxkU0jqcj006d'
if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
config.data = qs.stringify(config.data)
}
let params = config.params || config.data
if (config.headers['Content-Type'] === 'multipart/form-data') {
// Object.keys(defaultParams).forEach(key => {
// params.append(key, defaultParams[key])
// })
} else {
params = Object.assign({}, defaultParams, params)
if (['post', 'put', 'delete'].includes(config.method)) {
config.data = params
} else {
config.params = params
const formData = new window.FormData()
for (const key in config.data) {
formData.append(key, config.data[key])
}
}
if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
config.data = qs.stringify(config.data)
config.data = formData
}
return config
},
......@@ -44,30 +34,26 @@ httpRequest.interceptors.request.use(
httpRequest.interceptors.response.use(
function(response) {
const { data } = response
if (data.code === 1 && data.msg === '请先登录') {
// Message.error(data.msg || data.message)
// window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
if (data.code) {
if (![1010].includes(data.code)) {
Message.error(data.msg || data.message)
}
return Promise.reject(data)
}
if (data.code === 403) {
window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
}
return data
},
function(error) {
if (error.response) {
const { status, message, code } = error.response.data
const { status, message } = error.response.data
// 未登录
if (status === 403) {
window.location.href = `${webConf.others.loginUrl}?rd=${encodeURIComponent(window.location.href)}`
} else if (status === 400 && code === 401) {
// router.push('/role')
} else {
Message.error(message || error.response.data)
}
return Promise.reject(error.response)
} else if (typeof error === 'string') {
Message.error(error)
} else {
console.log(error)
}
return Promise.reject(error)
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论