Skip to content

C
center-shop-show-pc
提交 811ef134 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

update

上级 4807fb42
隐藏空白字符变更
内嵌 并排
正在显示 包含 257 行增加 和 198 行删除
.config.dev.js
浏览文件 @ 811ef134
module.exports = { module.exports = {
domain: 'dev.ezijing.com', domain: 'dev.ezijing.com',
url: 'https://learn-api.ezijing.com/api', url: 'https://shop2.ezijing.com/api',
webpack: { webpack: {
externals: { externals: {
CKEDITOR: 'window.CKEDITOR', CKEDITOR: 'window.CKEDITOR',
...@@ -9,20 +9,20 @@ module.exports = { ...@@ -9,20 +9,20 @@ module.exports = {
regeneratorRuntime: 'window.regeneratorRuntime', regeneratorRuntime: 'window.regeneratorRuntime',
wx: 'window.wx', wx: 'window.wx',
WeixinJSBridge: 'window.WeixinJSBridge' WeixinJSBridge: 'window.WeixinJSBridge'
},
devServer: {
proxy: {
'/api/shop': {
target: 'http://172.16.3.11:8089',
changeOrigin: true,
pathRewrite: { '^/api/shop': '' }
}
}
} }
// devServer: {
// proxy: {
// '/api/shop': {
// target: 'http://172.16.3.11:8089',
// changeOrigin: true,
// pathRewrite: { '^/api/shop': '' }
// }
// }
// }
}, },
ProvidePlugin: {}, ProvidePlugin: {},
others: { others: {
baseUrl: 'https://learn-api.ezijing.com', loginUrl: 'https://login2.ezijing.com/auth/login/index',
loginUrl: 'https://login.ezijing.com/auth/login/index' h5PreviewUrl: 'https://h5-shop2.ezijing.com'
} }
} }
\ No newline at end of file
.config.pro.js
浏览文件 @ 811ef134
module.exports = { module.exports = {
url: '//api.ezijing.com', url: '/',
DesDir: './client-dist', DesDir: './client-dist',
apiBaseURL: '//api.ezijing.com/',
isUploadStatic: false, isUploadStatic: false,
isEnableToIphoneDebugger: false,
webpack: { webpack: {
externals: { externals: {
'CKEDITOR': 'window.CKEDITOR', CKEDITOR: 'window.CKEDITOR',
'Base64': 'window.Base64', Base64: 'window.Base64',
'md5': 'window.md5', md5: 'window.md5',
'regeneratorRuntime': 'window.regeneratorRuntime' regeneratorRuntime: 'window.regeneratorRuntime',
wx: 'window.wx',
WeixinJSBridge: 'window.WeixinJSBridge'
} }
}, },
ProvidePlugin: { ProvidePlugin: {},
},
others: { others: {
loginUrl: 'https://login.ezijing.com/auth/login/index',
h5PreviewUrl: 'https://h5-shop.ezijing.com'
} }
} }
.config.test.js
浏览文件 @ 811ef134
module.exports = { module.exports = {
url: '//api.ezijing.com', url: '/',
DesDir: './client-dist', DesDir: './client-dist',
apiBaseURL: '//api.ezijing.com/',
CDN_DIR: 'static/build/learn-test/',
isUploadStatic: false, isUploadStatic: false,
isEnableToIphoneDebugger: true,
webpack: { webpack: {
externals: { externals: {
'CKEDITOR': 'window.CKEDITOR', CKEDITOR: 'window.CKEDITOR',
'Base64': 'window.Base64', Base64: 'window.Base64',
'md5': 'window.md5', md5: 'window.md5',
'regeneratorRuntime': 'window.regeneratorRuntime' regeneratorRuntime: 'window.regeneratorRuntime',
wx: 'window.wx',
WeixinJSBridge: 'window.WeixinJSBridge'
} }
}, },
ProvidePlugin: { ProvidePlugin: {},
},
others: { others: {
loginUrl: 'https://login2.ezijing.com/auth/login/index',
h5PreviewUrl: 'https://h5-shop2.ezijing.com'
} }
} }
package-lock.json
浏览文件 @ 811ef134
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"qrcode.vue": "^1.7.0",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-i18n": "^8.22.0", "vue-i18n": "^8.22.0",
"vue-loader": "^15.9.3", "vue-loader": "^15.9.3",
...@@ -10177,6 +10178,14 @@ ...@@ -10177,6 +10178,14 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/qrcode.vue": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-1.7.0.tgz",
"integrity": "sha512-R7t6Y3fDDtcU7L4rtqwGUDP9xD64gJhIwpfjhRCTKmBoYF6SS49PIJHRJ048cse6OI7iwTwgyy2C46N9Ygoc6g==",
"peerDependencies": {
"vue": "^2.0.0"
}
},
"node_modules/qs": { "node_modules/qs": {
"version": "6.5.2", "version": "6.5.2",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz", "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
...@@ -22736,6 +22745,12 @@ ...@@ -22736,6 +22745,12 @@
"resolved": "https://registry.npm.taobao.org/punycode/download/punycode-2.1.1.tgz", "resolved": "https://registry.npm.taobao.org/punycode/download/punycode-2.1.1.tgz",
"integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=" "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew="
}, },
"qrcode.vue": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-1.7.0.tgz",
"integrity": "sha512-R7t6Y3fDDtcU7L4rtqwGUDP9xD64gJhIwpfjhRCTKmBoYF6SS49PIJHRJ048cse6OI7iwTwgyy2C46N9Ygoc6g==",
"requires": {}
},
"qs": { "qs": {
"version": "6.5.2", "version": "6.5.2",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz", "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
package.json
浏览文件 @ 811ef134
...@@ -78,6 +78,7 @@ ...@@ -78,6 +78,7 @@
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"qrcode.vue": "^1.7.0",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-i18n": "^8.22.0", "vue-i18n": "^8.22.0",
"vue-loader": "^15.9.3", "vue-loader": "^15.9.3",
......
src/components/layout/footer.vue
浏览文件 @ 811ef134
...@@ -23,35 +23,43 @@ ...@@ -23,35 +23,43 @@
</p> </p>
</div> </div>
<div class="qrcode"> <div class="qrcode">
<img src="https://zws-imgs-pub.ezijing.com/static/public/29ce10d35376f24ae1ecaccd57215d5c.jpg" alt="" /> <img src="https://zws-imgs-pub.ezijing.com/static/public/29ce10d35376f24ae1ecaccd57215d5c.jpg" />
<p>扫二维码关注官方微信</p> <p>扫二维码关注官方微信</p>
<p>微信公众号zijingedu</p> <p>微信公众号zijingedu</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="copyright" style="height: 40px;line-height: 40px;color: #fff;background: #ccc;"> <div class="copyright" style="height: 40px; line-height: 40px; color: #fff; background: #ccc">
<div class="inner" style="width: 100%;justify-content: center;display: flex;"> <div class="inner" style="width: 100%; justify-content: center; display: flex">
<p style="font-size: 12px;">Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司</p> <p style="font-size: 12px">
<a target="_blank" href="https://tsm.miit.gov.cn/dxxzsp/" style="color: #fff;text-decoration:none;margin-left: 10px;"> Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司
<p style="font-size: 12px;">京ICP证150431号</p> </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>
<a target="_blank" class="record" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681" style=" <a
color: #fff; target="_blank"
text-decoration:none; class="record"
align-items: center; href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681"
display: flex; style="color: #fff; text-decoration: none; align-items: center; display: flex; margin-right: 5px"
margin-right: 5px;"> >
<img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" alt="" style=" <img
width: 20px; src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png"
height: 20px; style="width: 20px; height: 20px; margin: 0 6px; display: block"
margin: 0 6px; />
display: block; <p style="font-size: 12px">安备 11010802023681号</p>
">
<p style="font-size: 12px;">安备 11010802023681号</p>
</a> </a>
<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index" style="color: #fff;text-decoration:none;"> <a
<p style="font-size: 12px;">京ICP备15016866号-1</p> 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> </a>
</div> </div>
</div> </div>
...@@ -74,7 +82,7 @@ export default { ...@@ -74,7 +82,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.logo{ .logo {
width: 60px; width: 60px;
} }
.app-footer { .app-footer {
...@@ -133,18 +141,18 @@ export default { ...@@ -133,18 +141,18 @@ export default {
line-height: 40px; line-height: 40px;
color: #fff; color: #fff;
background: #ccc; background: #ccc;
.inner{ .inner {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
display: flex; display: flex;
p{ p {
font-size: 12px; font-size: 12px;
} }
.record{ .record {
align-items: center; align-items: center;
display: flex; display: flex;
margin-right: 5px; margin-right: 5px;
img{ img {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin: 0 6px; margin: 0 6px;
......
src/components/layout/header.vue
浏览文件 @ 811ef134
...@@ -2,15 +2,12 @@ ...@@ -2,15 +2,12 @@
<header class="app-header"> <header class="app-header">
<div class="app-header__bar"> <div class="app-header__bar">
<div class="inner"> <div class="inner">
<img class="logo" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-pc/shop-logo.png" alt=""> <img class="logo" src="https://webapp-pub.ezijing.com/shop-pc/shop-logo.png" />
</div> </div>
</div> </div>
<div class="app-header__menu"> <div class="app-header__menu">
<ul class="inner"> <ul class="inner">
<li <li v-for="(item, index) in menuItem" :key="index">{{ item.title }}</li>
v-for="(item, index) in menuItem"
:key="index"
>{{ item.title }}</li>
</ul> </ul>
</div> </div>
</header> </header>
...@@ -43,25 +40,27 @@ export default { ...@@ -43,25 +40,27 @@ export default {
} }
.app-header__bar { .app-header__bar {
padding: 25px 0 23px; padding: 25px 0 23px;
.logo{ .logo {
display: block; display: block;
width: 260px; width: 260px;
height: 56px;
} }
} }
.app-header__menu{ .app-header__menu {
background: #1F292C; background: #1f292c;
ul{ ul {
display: flex; display: flex;
li{ li {
line-height: 30px; line-height: 30px;
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: #ffffff;
padding: 0 24px; padding: 0 24px;
cursor: pointer; cursor: pointer;
} }
} }
} }
ul,li{ ul,
li {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
......
src/components/layout/main.vue
浏览文件 @ 811ef134
<template> <template>
<div class="app-main"> <div class="app-main">
<router-view /> <router-view :key="$route.fullPath" />
</div> </div>
</template> </template>
src/index.html
浏览文件 @ 811ef134
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-cn"> <html lang="zh-cn">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="origin" name="referrer"> <meta content="origin" name="referrer" />
<!-- 如果只是想html禁用缓存，使用以下三行 --> <!-- 如果只是想html禁用缓存，使用以下三行 -->
<!-- 经过验证，发现有时不一定有用，不如 wmp项目中login/is-login跳转，会自动产生 from the disk --> <!-- 经过验证，发现有时不一定有用，不如 wmp项目中login/is-login跳转，会自动产生 from the disk -->
<!-- 总结：彻底解决 index.html 不加缓存 请使用 `nginx上配置 no-cache` --> <!-- 总结：彻底解决 index.html 不加缓存 请使用 `nginx上配置 no-cache` -->
<!-- 直接访问 图片、JS、CSS等资源不会出现（from the disk），只有在html中，访问资源才会出现`强缓存`。 --> <!-- 直接访问 图片、JS、CSS等资源不会出现（from the disk），只有在html中，访问资源才会出现`强缓存`。 -->
<!-- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> --> <!-- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> -->
<!-- <meta http-equiv="Pragma" content="no-cache" /> --> <!-- <meta http-equiv="Pragma" content="no-cache" /> -->
<!-- <meta http-equiv="Expires" content="0" /> --> <!-- <meta http-equiv="Expires" content="0" /> -->
<title>标题</title> <title>紫荆教育电销平台</title>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"> <meta
</head> name="viewport"
<body> id="viewport"
<div id="app"></div> content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"
<script type="text/javascript" src="/static/resources/js/test.js"></script> />
<!-- es5 兼容 新方法 --> </head>
<script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/es5-shim.min.js"></script> <body>
<script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/es5-sham.min.js"></script> <div id="app"></div>
<!-- 三方插件引入 --> <!-- es5 兼容 新方法 -->
<script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/ckeditor/ckeditor.js"></script> <script
<!-- common --> type="text/javascript"
<script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/base64.js"></script> src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/es5-shim.min.js"
<script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/md5.js"></script> ></script>
<script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/jQuery-2.1.4.min.js"></script> <script
<script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/runtime.js"></script> type="text/javascript"
<!--[if lt IE 9]> src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/es5-sham.min.js"
<script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/console-polyfill.js"></script> ></script>
<script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/html5shiv.min.js"></script> <!-- 三方插件引入 -->
<script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/respond.min.js"></script>
<![endif]--> <script
</body> type="text/javascript"
src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/runtime.js"
></script>
<!--[if lt IE 9]>
<script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/console-polyfill.js"></script>
<script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/html5shiv.min.js"></script>
<script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/respond.min.js"></script>
<![endif]-->
</body>
</html> </html>
src/pages/components/item.vue
浏览文件 @ 811ef134
<template> <template>
<div class="item-content"> <div class="item-content">
<img :src="JSON.parse(data.chart_oss)[0].url" alt=""> <router-link :to="{ path: '/buy', query: { shop_id: data.shop_id, id: data.spu_id } }">
<img :src="imageUrl(data.chart_oss)" />
</router-link>
<div class="title">{{ data.spu_name }}</div> <div class="title">{{ data.spu_name }}</div>
<div class="money"> <div class="money"><span>￥</span>{{ data.price_zone }}</div>
<span>￥</span>{{ data.price_zone }}
</div>
</div> </div>
</template> </template>
...@@ -14,29 +14,41 @@ export default { ...@@ -14,29 +14,41 @@ export default {
data: { data: {
type: Object type: Object
} }
},
methods: {
imageUrl(value) {
try {
const imgList = value ? JSON.parse(value) : []
const [first = {}] = imgList
return first.url
} catch (error) {
return ''
}
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.item-content{ .item-content {
margin-bottom: 30px; margin-bottom: 30px;
img{ img {
width: 160px; width: 160px;
height: 160px; height: 160px;
display: block; display: block;
object-fit: cover;
} }
.title{ .title {
width: 160px; width: 160px;
font-size: 14px; font-size: 14px;
line-height: 21px; line-height: 21px;
color: #808080; color: #808080;
margin-top: 6px; margin-top: 6px;
} }
.money{ .money {
font-size: 20px; font-size: 20px;
line-height: 19px; line-height: 19px;
color: #6A6A6A; color: #6a6a6a;
span{ span {
font-size: 14px; font-size: 14px;
} }
margin-top: 6px; margin-top: 6px;
......
src/pages/shop.vue
浏览文件 @ 811ef134
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
<div class="shop-content__left"> <div class="shop-content__left">
<div class="left-con__top"> <div class="left-con__top">
<div class="swiper-box"> <div class="swiper-box">
<img class="banner" :src="swiperBanner"> <img class="banner" :src="swiperBanner" />
<ul class="swiper-tab__btn"> <ul class="swiper-tab__btn">
<li v-for="(item, index) in swiperBtnItem" :key="index" @click="tabSwiper(item)"> <li v-for="(item, index) in swiperBtnItem" :key="index" @click="tabSwiper(item)">
<img :src="item"> <img :src="item" />
</li> </li>
</ul> </ul>
</div> </div>
...@@ -17,33 +17,34 @@ ...@@ -17,33 +17,34 @@
<div class="name">价格</div> <div class="name">价格</div>
<div class="num"><span>￥</span>{{ commodityData.price_zone }}</div> <div class="num"><span>￥</span>{{ commodityData.price_zone }}</div>
<div class="stock"> <div class="stock">
库存<br /><span>{{ commodityData.stock }}</span>件 库存<br /><span>{{ commodityData.stock }}</span
>件
</div> </div>
</div> </div>
<div class="freight"> <div class="freight">
<div class="name">运费</div> <div class="name">运费</div>
<div class="val">无需配送</div> <div class="val">无需配送</div>
</div> </div>
<div class="buy-btn">立即购买</div> <div class="buy-btn" @click="dialogVisible = true">立即购买</div>
<div class="buy-mode"> <div class="buy-mode">
<div class="name">支付方式：</div> <div class="name">支付方式：</div>
<div class="li"> <div class="li">
<img class="icon" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-pc/icon-pay1.png"> <img class="icon" src="https://webapp-pub.ezijing.com/shop-pc/icon-pay1.png" />
<div class="text">支付宝</div> <div class="text">支付宝</div>
</div> </div>
<div class="li"> <div class="li">
<img class="icon" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-pc/icon-pay2.png"> <img class="icon" src="https://webapp-pub.ezijing.com/shop-pc/icon-pay2.png" />
<div class="text">微信支付</div> <div class="text">微信支付</div>
</div> </div>
<div class="li"> <!-- <div class="li">
<img class="icon" src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-pc/icon-pay3.png"> <img class="icon" src="https://webapp-pub.ezijing.com/shop-pc/icon-pay3.png" />
<div class="text">银行卡支付</div> <div class="text">银行卡支付</div>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
<div class="left-con__bottom"> <div class="left-con__bottom">
<div class="line"></div> <div class="line"><qrcode-vue :value="shopPreviewUrl" :size="180" /></div>
<div class="des"> <div class="des">
<div class="tit">紫荆教育电销平台</div> <div class="tit">紫荆教育电销平台</div>
<div class="t">扫描二维码，访问我们的微信店铺</div> <div class="t">扫描二维码，访问我们的微信店铺</div>
...@@ -56,44 +57,58 @@ ...@@ -56,44 +57,58 @@
<div class="name">热门商品</div> <div class="name">热门商品</div>
</div> </div>
<template v-for="(item, index) in hotCommodity"> <template v-for="(item, index) in hotCommodity">
<hot-shop :data="item" :key="index"/> <hot-shop :data="item" :key="index" />
</template> </template>
</div> </div>
</div> </div>
<el-dialog :visible.sync="dialogVisible" title="扫码购买" width="600px">
<div style="text-align: center">
<qrcode-vue :value="buyPreviewUrl" :size="240" />
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import QrcodeVue from 'qrcode.vue'
import hotShop from './components/item' import hotShop from './components/item'
import { getCommodityDetail } from '@/api' import { getCommodityDetail } from '@/api'
export default { export default {
components: { hotShop }, components: { QrcodeVue, hotShop },
data () { data() {
return { return {
swiperBtnItem: [ swiperBtnItem: [
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-pc/img1.png', 'https://webapp-pub.ezijing.com/shop-pc/img1.png',
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/shop-pc/shop-logo.png' 'https://webapp-pub.ezijing.com/shop-pc/shop-logo.png'
], ],
swiperBanner: '', swiperBanner: '',
commodityData: {}, commodityData: {},
hotCommodity: [] hotCommodity: [],
dialogVisible: false
}
},
computed: {
shopId() {
return this.$route.query.shop_id || '6800720558108442624'
},
goodsId() {
return this.$route.query.id || '6803146450260721664'
},
shopPreviewUrl() {
return `${webConf.others.h5PreviewUrl}/shop?shop_id=${this.shopId}`
},
buyPreviewUrl() {
return `${webConf.others.h5PreviewUrl}/buy?shop_id=${this.shopId}&id=${this.goodsId}`
} }
}, },
mounted () { mounted() {
this.getOrderDetail() this.getOrderDetail()
this.getOrderDetail({ this.getOrderDetail({ shop_id: this.shopId, page: '0', page_size: '2' })
shop_id: '6800720558108442624',
page: '0',
page_size: '2'
})
}, },
methods: { methods: {
getOrderDetail(data) { getOrderDetail(data) {
const params = data || { const params = data || { shop_id: this.shopId, spu_id: this.goodsId }
shop_id: '6800720558108442624', getCommodityDetail(params).then(res => {
spu_id: '6803146450260721664'
}
getCommodityDetail(params).then((res) => {
if (res.code === 0) { if (res.code === 0) {
if (data) { if (data) {
this.hotCommodity = res.data this.hotCommodity = res.data
...@@ -113,94 +128,97 @@ export default { ...@@ -113,94 +128,97 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.shop-content{ .shop-content {
.inner{ .inner {
width: 1110px; width: 1110px;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
padding-top: 20px; padding-top: 20px;
.shop-content__left{ .shop-content__left {
.left-con__top{ .left-con__top {
display: flex; display: flex;
.swiper-box{ .swiper-box {
width: 420px; width: 420px;
.banner{ .banner {
width: 100%; width: 100%;
height: 420px; height: 420px;
display: block; display: block;
object-fit: contain;
border: 1px solid #f2f2f2;
} }
.swiper-tab__btn{ .swiper-tab__btn {
display: flex; display: flex;
margin-top: 20px; margin-top: 20px;
li{ li {
cursor: pointer; cursor: pointer;
width: 58px; width: 58px;
height: 58px; height: 58px;
margin-right: 20px; margin-right: 20px;
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
object-fit: cover;
} }
} }
} }
} }
.order-detail{ .order-detail {
border-right: 1px solid #DEDEDE; border-right: 1px solid #dedede;
padding-right: 22px; padding-right: 22px;
box-sizing: border-box; box-sizing: border-box;
height: 420px; height: 420px;
margin-left: 22px; margin-left: 22px;
.title{ .title {
font-size: 16px; font-size: 16px;
line-height: 100%; line-height: 100%;
padding: 12px 0 15px; padding: 12px 0 15px;
color: #333333; color: #333333;
} }
.price{ .price {
width: 434px; width: 434px;
height: 65px; height: 65px;
background: #F6F4F5; background: #f6f4f5;
display: flex; display: flex;
align-items: center; align-items: center;
.name{ .name {
font-size: 14px; font-size: 14px;
color: #A0A0A0; color: #a0a0a0;
margin-left: 16px; margin-left: 16px;
} }
.num{ .num {
padding-left: 40px; padding-left: 40px;
font-weight: bold; font-weight: bold;
font-size: 36px; font-size: 36px;
color: #C01540; color: #c01540;
span{ span {
font-size: 24px; font-size: 24px;
} }
} }
.stock{ .stock {
margin-left: auto; margin-left: auto;
padding: 0 20px; padding: 0 20px;
border-left: 1px solid #DEDEDE; border-left: 1px solid #dedede;
height: 42px; height: 42px;
font-size: 14px; font-size: 14px;
// line-height: 28px; // line-height: 28px;
color: #A0A0A0; color: #a0a0a0;
span{ span {
color: rgba(192, 21, 64, 1); color: rgba(192, 21, 64, 1);
font-size: 18px; font-size: 18px;
} }
} }
} }
.freight{ .freight {
display: flex; display: flex;
padding: 22px 0; padding: 22px 0;
.name{ .name {
font-size: 14px; font-size: 14px;
line-height: 100%; line-height: 100%;
color: #A0A0A0; color: #a0a0a0;
margin-left: 16px; margin-left: 16px;
} }
.val{ .val {
margin-left: 39px; margin-left: 39px;
font-size: 14px; font-size: 14px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
...@@ -208,48 +226,49 @@ export default { ...@@ -208,48 +226,49 @@ export default {
color: #434343; color: #434343;
} }
} }
.buy-btn{ .buy-btn {
width: 198px; width: 198px;
height: 54px; height: 54px;
background: #C01540; background: #c01540;
text-align: center; text-align: center;
line-height: 54px; line-height: 54px;
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
cursor: pointer;
} }
.buy-mode{ .buy-mode {
display: flex; display: flex;
align-items: center; align-items: center;
padding-top: 20px; padding-top: 20px;
.name{ .name {
font-size: 14px; font-size: 14px;
color: #434343; color: #434343;
margin-right: 8px; margin-right: 8px;
} }
.li{ .li {
margin-right: 22px; margin-right: 22px;
display: flex; display: flex;
align-items: center; align-items: center;
.icon{ .icon {
width: 25px; width: 25px;
height: 19px; height: 19px;
display: block; display: block;
} }
&:nth-child(1){ &:nth-child(1) {
.icon{ .icon {
width: 25px; width: 25px;
height: 25px; height: 25px;
display: block; display: block;
} }
} }
&:nth-child(2){ &:nth-child(2) {
.icon{ .icon {
width: 26px; width: 26px;
height: 23px; height: 23px;
display: block; display: block;
} }
} }
.text{ .text {
font-size: 14px; font-size: 14px;
color: #999999; color: #999999;
margin-left: 7px; margin-left: 7px;
...@@ -258,46 +277,46 @@ export default { ...@@ -258,46 +277,46 @@ export default {
} }
} }
} }
.left-con__bottom{ .left-con__bottom {
border-top: 1px solid #E7E7E7; border-top: 1px solid #e7e7e7;
padding-top: 34px; padding-top: 34px;
display: flex; display: flex;
margin-top: 38px; margin-top: 38px;
.line{ .line {
width: 180px; width: 180px;
height: 180px; height: 180px;
border: 1px solid #707070; border: 1px solid #707070;
margin-right: 20px; margin-right: 20px;
.des{ .des {
.tit{ .tit {
font-size: 16px; font-size: 16px;
line-height: 100%; line-height: 100%;
color: #333333; color: #333333;
} }
.t{ .t {
font-size: 14px; font-size: 14px;
line-height: 100%; line-height: 100%;
margin-top: 10px; margin-top: 10px;
color: #7E7E7E; color: #7e7e7e;
} }
} }
} }
} }
} }
.shop-content__right{ .shop-content__right {
margin-left: 20px; margin-left: 20px;
.title-box{ .title-box {
width: 160px; width: 160px;
height: 20px; height: 20px;
margin: 10px 0; margin: 10px 0;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
.line{ .line {
width: 100%; width: 100%;
border-top: 1px dotted #aaa; border-top: 1px dotted #aaa;
} }
.name{ .name {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
...@@ -311,7 +330,8 @@ export default { ...@@ -311,7 +330,8 @@ export default {
} }
} }
} }
ul, li{ ul,
li {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
......
src/router/routes.js
浏览文件 @ 811ef134
...@@ -6,8 +6,8 @@ export default [ ...@@ -6,8 +6,8 @@ export default [
path: '/', path: '/',
component: Layout, component: Layout,
children: [ children: [
{ path: '', redirect: '/shop' }, { path: '', redirect: '/buy' },
{ path: '/shop', component: () => import('@/pages/shop.vue') } { path: '/buy', component: () => import('@/pages/shop.vue') }
] ]
}, },
{ path: '*', component: () => import('@/components/errorPages/404.vue') } { path: '*', component: () => import('@/components/errorPages/404.vue') }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论