初始上传
This commit is contained in:
23
addon/pc/source/os/assets/css/common/element-variables.scss
Executable file
23
addon/pc/source/os/assets/css/common/element-variables.scss
Executable file
@@ -0,0 +1,23 @@
|
||||
@import "main.scss";
|
||||
|
||||
/* 改变主题色变量 */
|
||||
$--color-white:#fff;
|
||||
$--color-primary: $base-color !default;
|
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
|
||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
|
||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
|
||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
|
||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
|
||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
|
||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
|
||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
|
||||
$--color-success: $base-color-success !default;
|
||||
$--color-warning: $base-color-warning !default;
|
||||
$--color-danger: $base-color-danger !default;
|
||||
$--color-info: $base-color-info !default;
|
||||
|
||||
/* 改变 icon 字体路径变量，必需 */
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-ui/packages/theme-chalk/src/index";
|
||||
5520
addon/pc/source/os/assets/css/common/icondiy.css
Executable file
5520
addon/pc/source/os/assets/css/common/icondiy.css
Executable file
File diff suppressed because it is too large
Load Diff
243
addon/pc/source/os/assets/css/common/iconfont.css
Executable file
243
addon/pc/source/os/assets/css/common/iconfont.css
Executable file
@@ -0,0 +1,243 @@
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
src: url('https://cdn3.codesign.qq.com/icons/LOD8r0BMER9RXkg/latest/iconfont.eot?t=1056907098f9743c59852ca6f44325b5'); /* IE9 */
|
||||
src: url('https://cdn3.codesign.qq.com/icons/LOD8r0BMER9RXkg/latest/iconfont.eot?t=1056907098f9743c59852ca6f44325b5#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('https://cdn3.codesign.qq.com/icons/LOD8r0BMER9RXkg/latest/iconfont.woff?t=1056907098f9743c59852ca6f44325b5') format('woff2'),
|
||||
url('https://cdn3.codesign.qq.com/icons/LOD8r0BMER9RXkg/latest/iconfont.woff?t=1056907098f9743c59852ca6f44325b5') format('woff'), /* chromeã€firefox */
|
||||
url('https://cdn3.codesign.qq.com/icons/LOD8r0BMER9RXkg/latest/iconfont.ttf?t=1056907098f9743c59852ca6f44325b5') format('truetype'), /* chromeã€firefoxã€operaã€Safari, Android, iOS 4.2+*/
|
||||
url('https://cdn3.codesign.qq.com/icons/LOD8r0BMER9RXkg/latest/iconfont.svg?t=1056907098f9743c59852ca6f44325b5#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-xiaoxi:before {
|
||||
content: "\e048";
|
||||
}
|
||||
.icon-xiaosuo:before {
|
||||
content: "\e049";
|
||||
}
|
||||
.icon-shouzang:before {
|
||||
content: "\e04a";
|
||||
}
|
||||
.icon-_shouzang2:before {
|
||||
content: "\e04b";
|
||||
}
|
||||
.icon-arrow-right:before {
|
||||
content: "\e600";
|
||||
}
|
||||
.icon-icon-test:before {
|
||||
content: "\e601";
|
||||
}
|
||||
.icon-ziyuan:before {
|
||||
content: "\e602";
|
||||
}
|
||||
.icon-arrow-left-copy:before {
|
||||
content: "\e603";
|
||||
}
|
||||
.icon-shangjiazhongxin-:before {
|
||||
content: "\e604";
|
||||
}
|
||||
.icon-404:before {
|
||||
content: "\e605";
|
||||
}
|
||||
.icon-shang:before {
|
||||
content: "\e606";
|
||||
}
|
||||
.icon-daifahuo:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
.icon-icon_naozhong:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
.icon-jiang-copy:before {
|
||||
content: "\e60c";
|
||||
}
|
||||
.icon-tubiaolunkuo-:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
.icon-youxiang1:before {
|
||||
content: "\e610";
|
||||
}
|
||||
.icon-gouwuche:before {
|
||||
content: "\e611";
|
||||
}
|
||||
.icon-shanchu:before {
|
||||
content: "\e612";
|
||||
}
|
||||
.icon-yue:before {
|
||||
content: "\e615";
|
||||
}
|
||||
.icon-chengnuotuihuo1:before {
|
||||
content: "\e616";
|
||||
}
|
||||
.icon-7tiantuihuan:before {
|
||||
content: "\e617";
|
||||
}
|
||||
.icon-xiaoxiebaozheng1:before {
|
||||
content: "\e618";
|
||||
}
|
||||
.icon-fahuo:before {
|
||||
content: "\e619";
|
||||
}
|
||||
.icon-tuangou:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
.icon-shiyanzhongxin:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
.icon-liangxiaoshifahuo:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
.icon-zhengpinbaozheng:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
.icon-shitiyanzheng1:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
.icon-mendian:before {
|
||||
content: "\e628";
|
||||
}
|
||||
.icon-xuanze:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
.icon-dianhua:before {
|
||||
content: "\e62e";
|
||||
}
|
||||
.icon-yewutubiaoqi:before {
|
||||
content: "\e633";
|
||||
}
|
||||
.icon-zhongchaping:before {
|
||||
content: "\e634";
|
||||
}
|
||||
.icon-weibiaoti35:before {
|
||||
content: "\e635";
|
||||
}
|
||||
.icon-dizhi:before {
|
||||
content: "\e636";
|
||||
}
|
||||
.icon-shouji:before {
|
||||
content: "\e638";
|
||||
}
|
||||
.icon-dongtaima:before {
|
||||
content: "\e639";
|
||||
}
|
||||
.icon-shouhou:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
.icon-daifukuan:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
.icon-zhongxinguanli:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
.icon-youxiang:before {
|
||||
content: "\e645";
|
||||
}
|
||||
.icon-daipingjia:before {
|
||||
content: "\e646";
|
||||
}
|
||||
.icon-zhanghuzhuangtai:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
.icon-haoping1:before {
|
||||
content: "\e64c";
|
||||
}
|
||||
.icon-duigou1:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
.icon-hexiao:before {
|
||||
content: "\e650";
|
||||
}
|
||||
.icon-yanzhengma:before {
|
||||
content: "\e651";
|
||||
}
|
||||
.icon-weixin-copy:before {
|
||||
content: "\e65b";
|
||||
}
|
||||
.icon-anquan:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
.icon-arrowLeft:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
.icon-xuanze-duoxuan:before {
|
||||
content: "\e660";
|
||||
}
|
||||
.icon-zheng:before {
|
||||
content: "\e667";
|
||||
}
|
||||
.icon-likefill:before {
|
||||
content: "\e668";
|
||||
}
|
||||
.icon-shouye:before {
|
||||
content: "\e669";
|
||||
}
|
||||
.icon-shoujiyanzheng:before {
|
||||
content: "\e66a";
|
||||
}
|
||||
.icon-like:before {
|
||||
content: "\e66b";
|
||||
}
|
||||
.icon-mima:before {
|
||||
content: "\e66c";
|
||||
}
|
||||
.icon-miaosha1:before {
|
||||
content: "\e66d";
|
||||
}
|
||||
.icon-yanzheng:before {
|
||||
content: "\e678";
|
||||
}
|
||||
.icon-jiazaizhong:before {
|
||||
content: "\e681";
|
||||
}
|
||||
.icon-zhaoshangguanli:before {
|
||||
content: "\e686";
|
||||
}
|
||||
.icon-H:before {
|
||||
content: "\e68f";
|
||||
}
|
||||
.icon-shangjiazhongxin:before {
|
||||
content: "\e690";
|
||||
}
|
||||
.icon-shouji-copy:before {
|
||||
content: "\e694";
|
||||
}
|
||||
.icon-shurutianxiebi:before {
|
||||
content: "\e69f";
|
||||
}
|
||||
.icon-zhanghao:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
.icon-xiugaidenglumima:before {
|
||||
content: "\e6b9";
|
||||
}
|
||||
.icon-guanbi:before {
|
||||
content: "\e6ba";
|
||||
}
|
||||
.icon-shiyong:before {
|
||||
content: "\e711";
|
||||
}
|
||||
.icon-zhengpinbaozhang2:before {
|
||||
content: "\e722";
|
||||
}
|
||||
.icon-tui1:before {
|
||||
content: "\e738";
|
||||
}
|
||||
.icon-zuji:before {
|
||||
content: "\e755";
|
||||
}
|
||||
.icon-youhuiquan:before {
|
||||
content: "\e8c0";
|
||||
}
|
||||
.icon-hedui:before {
|
||||
content: "\ea53";
|
||||
}
|
||||
.icon-dian:before {
|
||||
content: "\ec1e";
|
||||
}
|
||||
270
addon/pc/source/os/assets/css/common/main.scss
Executable file
270
addon/pc/source/os/assets/css/common/main.scss
Executable file
@@ -0,0 +1,270 @@
|
||||
// 参考文档：https://element.faas.ele.me/#/zh-CN/component/color#fu-zhu-se
|
||||
|
||||
//主色调，红色：#FF0036，绿色 #4CAF50，蓝色：#03A9F4，黄色：#FF9800，粉色：#FF547B，棕色：#C3A769，浅绿色：#65C4AA，黑色：#333333，紫色：#B323B4，淡粉色：#FF8B8B,element UI：#409eff
|
||||
$base-color: #ff547b;
|
||||
$base-color-success: #4caf50;
|
||||
$base-color-warning: #e6a23c;
|
||||
$base-color-danger: #f56c6c;
|
||||
$base-color-info: #909399;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$ns-text-color-black: #303133; //基本色
|
||||
|
||||
/* 文字尺寸 */
|
||||
$ns-font-size-sm: 12px;
|
||||
$ns-font-size-base: 14px;
|
||||
$ns-font-size-lg: 16px;
|
||||
|
||||
$width: 1210px;
|
||||
|
||||
// 小
|
||||
.ns-font-size-sm {
|
||||
font-size: $ns-font-size-sm;
|
||||
}
|
||||
|
||||
// 标准
|
||||
.ns-font-size-base {
|
||||
font-size: $ns-font-size-base;
|
||||
}
|
||||
|
||||
// 标准
|
||||
.ns-font-size-lg {
|
||||
font-size: $ns-font-size-lg;
|
||||
}
|
||||
|
||||
//文字颜色
|
||||
.ns-text-color {
|
||||
color: $base-color !important;
|
||||
}
|
||||
|
||||
.ns-text-color-black {
|
||||
color: $ns-text-color-black !important;
|
||||
}
|
||||
|
||||
//边框
|
||||
.ns-border-color {
|
||||
border-color: $base-color !important;
|
||||
}
|
||||
|
||||
//背景色
|
||||
.ns-bg-color {
|
||||
background-color: $base-color !important;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.8;
|
||||
font-family: 'Helvetica Neue', Helvetica, 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
|
||||
background-color: #f9f9f9;
|
||||
font-size: $ns-font-size-base;
|
||||
color: $ns-text-color-black;
|
||||
}
|
||||
|
||||
#__nuxt {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: $base-color !important; //自定义颜色
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
i,
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// 去掉a标签的默认样式
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $ns-text-color-black;
|
||||
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.el-main {
|
||||
border-top: solid 1px #f2f2f2;
|
||||
overflow: initial;
|
||||
// width: $width;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-button:focus,
|
||||
.el-button:hover {
|
||||
color: $base-color;
|
||||
border-color: lighten($base-color, 20%);
|
||||
background-color: lighten($base-color, 30%);
|
||||
}
|
||||
|
||||
// 改变按钮默认样式
|
||||
.el-button--primary,
|
||||
.el-button--primary:focus,
|
||||
.el-button--primary:hover,
|
||||
.el-button--primary.is-plain:focus,
|
||||
.el-button--primary.is-plain:hover {
|
||||
background-color: $base-color;
|
||||
border-color: $base-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-button--primary.is-plain {
|
||||
color: $base-color;
|
||||
background-color: transparent;
|
||||
border-color: $base-color;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// 居中
|
||||
.ns-text-align {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 分页
|
||||
.el-pagination {
|
||||
text-align: right;
|
||||
|
||||
.el-pagination__rightwrapper {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 单行超出隐藏 */
|
||||
.using-hidden {
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
/* 多行超出隐藏 */
|
||||
.multi-hidden {
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.el-breadcrumb__inner a:hover,
|
||||
.el-breadcrumb__inner.is-link:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.el-tabs__item:hover,
|
||||
.el-tabs__item.is-active {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
background-color: $base-color;
|
||||
}
|
||||
|
||||
.el-pager li.active {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.el-pagination.is-background .el-pager li:not(.disabled):hover {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: $base-color;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.el-progress-bar__inner {
|
||||
background-color: $base-color;
|
||||
}
|
||||
|
||||
.el-link.el-link--default:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.el-button--text {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.el-input.is-active .el-input__inner,
|
||||
.el-input__inner:focus {
|
||||
border-color: $base-color;
|
||||
}
|
||||
|
||||
.el-loading-spinner .path {
|
||||
stroke: $base-color;
|
||||
}
|
||||
|
||||
.el-loading-spinner i {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.el-loading-spinner .el-loading-text {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: $base-color;
|
||||
border-color: $base-color;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.el-radio__input.is-checked .el-radio__inner {
|
||||
border-color: $base-color;
|
||||
background: $base-color;
|
||||
}
|
||||
.el-textarea__inner:focus{
|
||||
border-color: $base-color;
|
||||
}
|
||||
239
addon/pc/source/os/assets/css/goods/cart.scss
Executable file
239
addon/pc/source/os/assets/css/goods/cart.scss
Executable file
@@ -0,0 +1,239 @@
|
||||
.cart {
|
||||
margin: 20px auto;
|
||||
width: $width;
|
||||
|
||||
nav {
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
margin-bottom: 10px;
|
||||
li {
|
||||
float: left;
|
||||
&:nth-child(1) {
|
||||
width: 3%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 55%;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 10%;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 15%;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
width: 10%;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
width: 7%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
.item {
|
||||
margin-bottom: 20px;
|
||||
.head {
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
a {
|
||||
margin: 0 10px 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
li {
|
||||
float: left;
|
||||
line-height: 60px;
|
||||
&:nth-child(1) {
|
||||
width: 3%;
|
||||
margin-left: 20px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 53.3%;
|
||||
line-height: inherit;
|
||||
.img-wrap {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.info-wrap {
|
||||
margin-left: 70px;
|
||||
cursor: pointer;
|
||||
h5 {
|
||||
font-weight: normal;
|
||||
font-size: $ns-font-size-base;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-size: $ns-font-size-sm;
|
||||
color: #9a9a9a;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 10%;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 15%;
|
||||
.el-input-number--mini {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
width: 10%;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
width: 7%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lose-list {
|
||||
margin-bottom: 20px;
|
||||
.head {
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
span {
|
||||
margin: 0 5px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
background: #f0f0f0;
|
||||
li {
|
||||
float: left;
|
||||
line-height: 60px;
|
||||
color: #9a9a9a;
|
||||
&:nth-child(1) {
|
||||
width: 3%;
|
||||
margin-left: 5px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 53.3%;
|
||||
line-height: inherit;
|
||||
.img-wrap {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.info-wrap {
|
||||
margin-left: 70px;
|
||||
cursor: pointer;
|
||||
h5 {
|
||||
font-weight: normal;
|
||||
font-size: $ns-font-size-base;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
}
|
||||
span {
|
||||
font-size: $ns-font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 10%;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 15%;
|
||||
.el-input-number--mini {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
width: 10%;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
width: 7%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #fff;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
.operation {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 20px;
|
||||
li {
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
.sum-wrap {
|
||||
float: right;
|
||||
.selected-sum {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
.total-count {
|
||||
padding: 0 5px;
|
||||
font-size: 16px;
|
||||
color: $base-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.price-wrap {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
span {
|
||||
font-size: $ns-font-size-sm;
|
||||
}
|
||||
strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-button--text {
|
||||
color: #333;
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
.empty-wrap {
|
||||
padding: 50px 0 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
img{
|
||||
width: 400px;
|
||||
height: 244px;
|
||||
}
|
||||
a{
|
||||
font-size: 14px;
|
||||
color: #4A4A4A;
|
||||
&:hover{
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
1090
addon/pc/source/os/assets/css/goods/detail.scss
Executable file
1090
addon/pc/source/os/assets/css/goods/detail.scss
Executable file
File diff suppressed because it is too large
Load Diff
261
addon/pc/source/os/assets/css/index/index.scss
Executable file
261
addon/pc/source/os/assets/css/index/index.scss
Executable file
@@ -0,0 +1,261 @@
|
||||
.index-wrap {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.index {
|
||||
width: $width;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.border-right {
|
||||
border-right: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.banner {
|
||||
height: 430px;
|
||||
width: 100%;
|
||||
.el-carousel__indicators--horizontal{
|
||||
padding-left: 240px;
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.index-content-wrap {
|
||||
width: $width;
|
||||
margin: auto;
|
||||
// 中部广告位
|
||||
.adv-middle{
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
.adv-middle-item{
|
||||
margin-right: 15px;
|
||||
height: 210px;
|
||||
// flex: 1;
|
||||
transition: all 0.2s linear 0s;
|
||||
cursor: pointer;
|
||||
.el-image{
|
||||
height: 210px;
|
||||
}
|
||||
&:last-of-type{
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover{
|
||||
z-index: 2;
|
||||
box-shadow: rgb(0 0 0 / 10%) 0 15px 30px;
|
||||
transform: translate3d(0px, -2px, 0px);
|
||||
}
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 广告
|
||||
.ad-wrap {
|
||||
width: $width;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> div {
|
||||
width: calc((100% - 15px) / 2);
|
||||
height: 372px;
|
||||
}
|
||||
|
||||
.ad-big {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.ad-big-img {
|
||||
width: calc((100% - 15px) / 2);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.ad-small {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.ad-small-img {
|
||||
width: calc((100% - 15px) / 2);
|
||||
height: calc((100% - 15px) / 2);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 限时秒杀
|
||||
.seckill-wrap {
|
||||
height: 376px;
|
||||
width: $width;
|
||||
background-color: #ffffff;
|
||||
margin: 20px auto;
|
||||
border: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.seckill-time {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
line-height: 44px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.seckill-time-left {
|
||||
color: #383838;
|
||||
|
||||
i,
|
||||
.seckill-time-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.seckill-time-title {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.count-down {
|
||||
display: inline-block;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.seckill-time-right {
|
||||
color: #838383;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.seckill-content {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
|
||||
.seamless-warp2 {
|
||||
overflow: hidden;
|
||||
|
||||
ul.item {
|
||||
li {
|
||||
float: left;
|
||||
width: 250px;
|
||||
padding: 0 25px;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #f1f1f1;
|
||||
|
||||
.seckill-goods {
|
||||
cursor: pointer;
|
||||
|
||||
.seckill-goods-img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
> p {
|
||||
line-height: 24px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.seckill-price-wrap {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin-top: 10px;
|
||||
|
||||
p span {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.primary-price {
|
||||
text-decoration: line-through;
|
||||
color: #838383;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.floor {
|
||||
width: $width;
|
||||
margin: 20px auto;
|
||||
|
||||
.floor_item {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.floatLayer-wrap {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba($color: #000000, $alpha: 0.5);
|
||||
z-index: 999;
|
||||
|
||||
.floatLayer {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 999;
|
||||
cursor: pointer;
|
||||
.img-wrap {
|
||||
width: 456px;
|
||||
height: 274px;
|
||||
line-height: 274px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
img{
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
color: #ffffff;
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
right: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 悬浮搜索
|
||||
.fixed-box {
|
||||
width: 100vw;
|
||||
background-color: #ffffff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
border-bottom: 2px solid $base-color;
|
||||
}
|
||||
354
addon/pc/source/os/assets/css/order/payment.scss
Executable file
354
addon/pc/source/os/assets/css/order/payment.scss
Executable file
@@ -0,0 +1,354 @@
|
||||
.payment-wrap {
|
||||
width: 1210px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
.item-block {
|
||||
padding: 0 15px 1px;
|
||||
margin: 10px 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: #ffffff;
|
||||
.block-text {
|
||||
border-color: #eeeeee;
|
||||
color: $ns-text-color-black;
|
||||
padding: 7px 0;
|
||||
border-bottom: 1px;
|
||||
}
|
||||
.box {
|
||||
.liuyan-text {
|
||||
background-color: #f7f7f7;
|
||||
border: 2px solid #dadada;
|
||||
height: 56px;
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.jifen-price {
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.padd-bom-10 {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.padd-bom-20 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
//收货地址
|
||||
.address-desc {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.address-item {
|
||||
width: 23%;
|
||||
border: 3px solid #eee;
|
||||
box-sizing: border-box;
|
||||
margin: 1%;
|
||||
height: 150px;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
|
||||
.add-address {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
line-height: 120px;
|
||||
}
|
||||
.address-info {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.options {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
div {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.address-name {
|
||||
color: $base-color;
|
||||
padding: 0 0 6px;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-right: 71px;
|
||||
box-sizing: border-box;
|
||||
line-height: 25px;
|
||||
}
|
||||
.address-mobile {
|
||||
padding: 10px 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.address-item.active {
|
||||
background-color: #fffbf9;
|
||||
border-color: $base-color;
|
||||
}
|
||||
|
||||
//支付方式
|
||||
.pay-type-list {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.distribution {
|
||||
color: #ff547b;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.pay-type-item {
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
border: 2px solid #eeeeee;
|
||||
padding: 5px 20px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pay-type-item.active {
|
||||
border-color: $base-color;
|
||||
}
|
||||
.mobile-wrap {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
//商品列表
|
||||
.goods-list {
|
||||
padding: 15px 0;
|
||||
|
||||
.store-icon {
|
||||
margin-right: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.shop-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
.goods-info-left {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
.goods-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
.goods-info-right {
|
||||
float: left;
|
||||
height: 60px;
|
||||
margin-left: 10px;
|
||||
color: $base-color;
|
||||
width: 80%;
|
||||
.goods-name {
|
||||
line-height: 20px;
|
||||
padding-top: 10px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.goods-spec {
|
||||
color: #999;
|
||||
span{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-footer {
|
||||
background-color: #f3fbfe;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
.goods-footer-right {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.goods-footer-left {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.order-cell {
|
||||
cursor: pointer;
|
||||
.tit {
|
||||
padding: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
.express-item {
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
border: 2px solid #eeeeee;
|
||||
padding: 3px 10px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.express-item.active {
|
||||
border-color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.promotion-show {
|
||||
color: #999;
|
||||
}
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
//统计
|
||||
.order-statistics {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
// color: #999;
|
||||
}
|
||||
.order-submit {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
}
|
||||
.order-money {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
div {
|
||||
display: inline-block;
|
||||
font-size: $ns-font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.buyer-message.el-textarea {
|
||||
width: 400px;
|
||||
}
|
||||
.address-open {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
padding: 0 0 10px 10px;
|
||||
}
|
||||
.pay-password-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pay-password {
|
||||
width: 80%;
|
||||
}
|
||||
.pay-password.hide-password {
|
||||
position: fixed;
|
||||
top: -9999px;
|
||||
}
|
||||
.platform-coupon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.forget-password {
|
||||
text-align: right;
|
||||
margin-right: 45px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.disabled-selected-wrap {
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
//发票样式
|
||||
.invoice-information {
|
||||
.invoice-type-box {
|
||||
display: inline-block;
|
||||
padding: 10px 0;
|
||||
vertical-align: bottom;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
&.invoice-title-box {
|
||||
margin-right: 100px;
|
||||
}
|
||||
.invoice-name {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.invoice-to-type {
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
position: relative;
|
||||
// i{
|
||||
// width: 17px;
|
||||
// height: 17px;
|
||||
// display: inline-block;
|
||||
// position: absolute;
|
||||
// border-radius: 34px;
|
||||
// overflow: hidden;
|
||||
// top: 7px;
|
||||
// left:-1px;
|
||||
// background: #fff;
|
||||
// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABbUlEQVQ4jYXTsUvVURQH8I8PE1zKTdcEK7I/wNkkKpGgxNaGBqUQ3JT2xoQoaajmhhTEgoig1V0QdQiaCgTxJRK4PDlybtwe+vzCDw7n+/3ee+75ndPVmpzXhut4jDu4nNQPfMFbbNbyRhX34BW+YxdTuJTfw8wF9wa9xdRdmT/jD66g2VbVRn5LeI813MVRqWARB5g8xVyjmZq46EV5wjAe4BFaKR7CchqaGQ8l10pteIa7s2FLeWrgKtbRV918H6MYwXZqX4Y3KriN1Ur8vM1c0JdcwafwxgGD2KqIsQ49uFXFUclgo4P4PPSUvxBDcq0Sf+tg/FrFUfnPRk7YvYp4hv1TzPvJFYzHZXHAO8zgYhJb2e2VnI2DjEeqXoV2Nka77MJrDOSQlFk4C134iN94Upo4l6cGEbN/FoIrmvD8W6ajfNMv7GABN3Ahux1x5IKLpZpIz3/bGImnOXH9edMh9vAhczcxjb8nDhwDyjpTCJDO1nsAAAAASUVORK5CYII=);
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
border-radius: 34px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
vertical-align: text-bottom;
|
||||
border: 1px solid #999;
|
||||
&.active {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABbUlEQVQ4jYXTsUvVURQH8I8PE1zKTdcEK7I/wNkkKpGgxNaGBqUQ3JT2xoQoaajmhhTEgoig1V0QdQiaCgTxJRK4PDlybtwe+vzCDw7n+/3ee+75ndPVmpzXhut4jDu4nNQPfMFbbNbyRhX34BW+YxdTuJTfw8wF9wa9xdRdmT/jD66g2VbVRn5LeI813MVRqWARB5g8xVyjmZq46EV5wjAe4BFaKR7CchqaGQ8l10pteIa7s2FLeWrgKtbRV918H6MYwXZqX4Y3KriN1Ur8vM1c0JdcwafwxgGD2KqIsQ49uFXFUclgo4P4PPSUvxBDcq0Sf+tg/FrFUfnPRk7YvYp4hv1TzPvJFYzHZXHAO8zgYhJb2e2VnI2DjEeqXoV2Nka77MJrDOSQlFk4C134iN94Upo4l6cGEbN/FoIrmvD8W6ajfNMv7GABN3Ahux1x5IKLpZpIz3/bGImnOXH9edMh9vAhczcxjb8nDhwDyjpTCJDO1nsAAAAASUVORK5CYII=);
|
||||
background-size: 100% 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
input {
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
.invoice-box-form {
|
||||
display: inline-block;
|
||||
input {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
margin-right: 20px;
|
||||
border: 1px solid #dddddd;
|
||||
padding-left: 10px;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.invoice-condition {
|
||||
padding: 10px 0;
|
||||
.invoice-name {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.invoice-box-form {
|
||||
display: inline-block;
|
||||
.option-item {
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: #ff547b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.invoice-tops{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
937
addon/pc/source/os/assets/css/promotion/detail_groupbuy.scss
Executable file
937
addon/pc/source/os/assets/css/promotion/detail_groupbuy.scss
Executable file
@@ -0,0 +1,937 @@
|
||||
.el-main{
|
||||
.detail-nav-wrap{
|
||||
background-color: #f8f8f8;
|
||||
.detail-nav{
|
||||
margin: auto;
|
||||
width: 1210px;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.iconfont{
|
||||
margin: 0 8px;
|
||||
}
|
||||
span{
|
||||
color: #666;
|
||||
&:last-of-type{
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
.goods-name{
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-main {
|
||||
background: #fff;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.goods-detail {
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
width: 1210px;
|
||||
|
||||
.preview-wrap {
|
||||
display: flex;
|
||||
float: left;
|
||||
.video-player-wrap {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
.video-player {
|
||||
visibility: hidden;
|
||||
> div {
|
||||
width: 356px;
|
||||
height: 356px;
|
||||
display: none;
|
||||
}
|
||||
.vjs-control-bar,
|
||||
.vjs-big-play-button {
|
||||
visibility: hidden;
|
||||
transition: none;
|
||||
}
|
||||
.vjs-big-play-button {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.media-mode {
|
||||
position: absolute;
|
||||
width: 356px;
|
||||
z-index: 5;
|
||||
bottom: 0;
|
||||
top: 300px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
|
||||
span {
|
||||
background: rgba(100, 100, 100, 0.6);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 25px;
|
||||
border-radius: 10px;
|
||||
padding: 0 15px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.show {
|
||||
.video-player,
|
||||
.vjs-control-bar,
|
||||
.vjs-big-play-button {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.video-player {
|
||||
> div {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.media-mode {
|
||||
top: initial;
|
||||
bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.magnifier-wrap {
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border: 1px solid #d8d8d8;
|
||||
box-sizing: border-box;
|
||||
.magnifier-box .mouse-cover {
|
||||
background-color: #fede4f;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.spec-items {
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
width: 84px;
|
||||
height: 460px;
|
||||
overflow: hidden;
|
||||
> span {
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 84px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
color: #838383;
|
||||
z-index: 1;
|
||||
font-size: 25px;
|
||||
&:first-of-type{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&:last-of-type{
|
||||
top: calc(100% - 42px);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 500%;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
li {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #DADADA;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
box-sizing: border-box;
|
||||
&:hover,
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
border-color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.share-collect {
|
||||
padding: 10px 0 20px;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
color: #838383;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
a{
|
||||
color: #838383;
|
||||
}
|
||||
i,
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.basic-info-wrap {
|
||||
float: left;
|
||||
width: calc(100% - 589px);
|
||||
margin-left: 30px;
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin: 5px 0 12px;
|
||||
}
|
||||
.divider {
|
||||
margin: 10px 0;
|
||||
border: 0;
|
||||
border-top: 1px dotted #e5e5e5;
|
||||
}
|
||||
.discount-banner {
|
||||
margin-top: 5px;
|
||||
background: url(~/assets/images/goods/discount_bg.png) no-repeat;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.activity-name {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
line-height: 40px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 40px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.discount-icon {
|
||||
margin: 0 8px 0 10px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
.surplus-time {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
float: right;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding-right: 5px;
|
||||
text-align: right;
|
||||
> span {
|
||||
margin-right: 5px;
|
||||
}
|
||||
i {
|
||||
font-style: normal;
|
||||
padding: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.count-down {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-block {
|
||||
background-color: #f8f8f8;
|
||||
padding: 15px 0;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
min-height: 62px;
|
||||
margin-bottom: 20px;
|
||||
.statistical {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 16px;
|
||||
li {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&:first-child {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #838383;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #383838;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-line {
|
||||
font-size: 14px;
|
||||
min-height: 35px;
|
||||
line-height: 35px;
|
||||
display: flex;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
dt {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: justify;
|
||||
font-size: 12px;
|
||||
margin-right: 16px;
|
||||
color: #222;
|
||||
flex-shrink: 0;
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
content: '';
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
> * {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
> dd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
}
|
||||
&:last-of-type{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:first-of-type > dd{
|
||||
align-items: baseline;
|
||||
}
|
||||
.yuan {
|
||||
font-size: 18px;
|
||||
}
|
||||
.price {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.market-yuan {
|
||||
font-size: 14px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.member_price {
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.market-price {
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
&.promotion-price .label {
|
||||
line-height: initial;
|
||||
font-size: 18px;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
&.coupon-list {
|
||||
align-items: baseline;
|
||||
> div {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
dd {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: 18px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
border: 1px solid $base-color;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: $base-color;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
label {
|
||||
line-height: 16px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
&.manjian {
|
||||
align-items: end;
|
||||
}
|
||||
&.manjian span {
|
||||
// padding: 2px 10px;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
&.delivery {
|
||||
position: relative;
|
||||
i {
|
||||
margin-left: 5px;
|
||||
}
|
||||
dd{
|
||||
align-items: center;
|
||||
}
|
||||
.region-selected {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin: 0 5px 0 0;
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border: 1px solid #e5e5e5;
|
||||
z-index: 2;
|
||||
font-size: 14px;
|
||||
}
|
||||
.region-list {
|
||||
width: 466px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 35px;
|
||||
left: 82px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e5e5;
|
||||
padding: 15px;
|
||||
line-height: 18px;
|
||||
height: auto;
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
&.hide{
|
||||
display: none !important;
|
||||
}
|
||||
.nav-tabs {
|
||||
border-bottom: 2px solid $base-color;
|
||||
height: 30px;
|
||||
> li {
|
||||
margin-bottom: -2px;
|
||||
float: left;
|
||||
> div {
|
||||
padding: 4px 8px;
|
||||
border: 2px solid transparent;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
> div {
|
||||
color: $base-color;
|
||||
border: 2px solid;
|
||||
border-bottom-color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
> .active {
|
||||
padding: 10px 0;
|
||||
}
|
||||
> .tab-pane {
|
||||
display: none;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
width: 25%;
|
||||
line-height: 30px;
|
||||
&.selected {
|
||||
color: $base-color;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
dd:hover {
|
||||
.region-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.service a {
|
||||
margin: 0 5px;
|
||||
}
|
||||
&.buy-btn {
|
||||
margin: 25px 0 0;
|
||||
dt{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
dd{
|
||||
height: auto;
|
||||
}
|
||||
button {
|
||||
min-width: 168px;
|
||||
height: 52px;
|
||||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
text-shadow: 0 0 0;
|
||||
border-radius: 0;
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: initial;
|
||||
border: 1px solid;
|
||||
opacity: 1;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.i-activity-flag {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid;
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.gift-point strong {
|
||||
font-size: 14px;
|
||||
}
|
||||
&.merchant-service {
|
||||
overflow: hidden;
|
||||
margin: 10px 0;
|
||||
align-items: flex-start;
|
||||
> div {
|
||||
display: inline-block;
|
||||
}
|
||||
dd {
|
||||
display: inline-block;
|
||||
margin-right: 18px;
|
||||
// margin: 0;
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
i {
|
||||
color: $base-color;
|
||||
font-size: $ns-font-size-base;
|
||||
margin-right: 5px;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sku-list {
|
||||
ul {
|
||||
overflow: hidden;
|
||||
padding: 1px;
|
||||
li {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 2px 10px 10px 0;
|
||||
line-height: 14px;
|
||||
vertical-align: middle;
|
||||
|
||||
div {
|
||||
padding: 8px 15px;
|
||||
text-align: center;
|
||||
border: 1px solid #b7b7b7;
|
||||
display: inline-block;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&.selected,
|
||||
&:hover {
|
||||
border: 1px solid;
|
||||
color: $base-color;
|
||||
}
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
&.disabled,
|
||||
&.disabled:hover {
|
||||
border: 1px solid #b7b7b7;
|
||||
margin: 0;
|
||||
cursor: not-allowed;
|
||||
color: #aaa;
|
||||
}
|
||||
img {
|
||||
margin-right: 10px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: 0px;
|
||||
display: none;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
&:not(.disabled).selected i,
|
||||
&:not(.disabled):hover i {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.buy-number {
|
||||
margin: 10px 0;
|
||||
.num-wrap {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
input {
|
||||
width: 126px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
font-size: 12px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 0;
|
||||
border-color: #D5D5D5;
|
||||
text-align: center;
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
span {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
&.decrease{
|
||||
border-right: 1px solid #D5D5D5;
|
||||
}
|
||||
&.increase{
|
||||
left: 94px;
|
||||
border-left: 1px solid #D5D5D5;
|
||||
}
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inventory {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.go-phone {
|
||||
position: relative;
|
||||
float: right;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border: 1px solid #d8d8d8;
|
||||
box-sizing: border-box;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
&>img{
|
||||
|
||||
}
|
||||
&>span{
|
||||
margin-top: 4px;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
&:hover .qrcode-wrap {
|
||||
display: block;
|
||||
}
|
||||
.qrcode-wrap {
|
||||
border: 1px solid #e5e5e5;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
left: 30px;
|
||||
top: -50px;
|
||||
display: none;
|
||||
background:white;
|
||||
}
|
||||
&.icon-item{
|
||||
.iconfont{
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #5E5C5C;
|
||||
&.selected{
|
||||
color: #ff9000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop-wrap {
|
||||
float: right;
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 0 20px;
|
||||
width: 234px;
|
||||
box-sizing: border-box;
|
||||
.head-wrap {
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
.img-wrap {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
.site-name {
|
||||
font-size: 14px;
|
||||
color: #383838;
|
||||
}
|
||||
.tag {
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.info-wrap {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
dl {
|
||||
font-size: $ns-font-size-sm;
|
||||
dt {
|
||||
color: #838383;
|
||||
// width: 65px;
|
||||
line-height: 25px;
|
||||
font-weight: normal;
|
||||
float: left;
|
||||
}
|
||||
dt.site-score {
|
||||
// width: 58px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
dd {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
// margin-left: 50px;
|
||||
color: #838383;
|
||||
span {
|
||||
color: #383838;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.operation {
|
||||
padding: 12px 0;
|
||||
|
||||
.el-button {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-wrap {
|
||||
padding: 64px 0 35px;
|
||||
clear: both;
|
||||
.goods-recommended {
|
||||
float: left;
|
||||
width: 234px;
|
||||
}
|
||||
.goods-tab {
|
||||
.attr-list {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
padding: 0 10px;
|
||||
flex: 0 0 30%;
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
.el-tabs__header{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.tablist{
|
||||
border-radius: 0;
|
||||
}
|
||||
.el-tabs__item{
|
||||
position: relative;
|
||||
width: 168px;
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
&.is-active{
|
||||
color: $base-color;
|
||||
&:after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
.evaluate {
|
||||
.empty {
|
||||
color: #898989;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
nav {
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
background: #f7f7f7;
|
||||
li {
|
||||
float: left;
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:hover,
|
||||
&.selected {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
li {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
.member-info {
|
||||
float: left;
|
||||
width: 140px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.info-wrap {
|
||||
margin-left: 150px;
|
||||
margin-bottom: 10px;
|
||||
.content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.img-list {
|
||||
.el-image {
|
||||
width: 50px;
|
||||
margin-left: 10px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sku-info {
|
||||
color: #898989;
|
||||
font-size: 12px;
|
||||
span {
|
||||
margin-right: 5px;
|
||||
&.create-time {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.evaluation-reply {
|
||||
margin: 10px 0;
|
||||
color: $base-color;
|
||||
}
|
||||
.review-evaluation {
|
||||
.review-time {
|
||||
font-size: $ns-font-size-sm;
|
||||
margin-left: 20px;
|
||||
color: #898989;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-wrap {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
936
addon/pc/source/os/assets/css/promotion/detail_seckill.scss
Executable file
936
addon/pc/source/os/assets/css/promotion/detail_seckill.scss
Executable file
@@ -0,0 +1,936 @@
|
||||
.el-main{
|
||||
.detail-nav-wrap{
|
||||
background-color: #f8f8f8;
|
||||
.detail-nav{
|
||||
margin: auto;
|
||||
width: 1210px;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.iconfont{
|
||||
margin: 0 8px;
|
||||
}
|
||||
span{
|
||||
color: #666;
|
||||
&:last-of-type{
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
.goods-name{
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-main {
|
||||
background: #fff;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.goods-detail {
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
width: 1210px;
|
||||
.preview-wrap {
|
||||
display: flex;
|
||||
float: left;
|
||||
.video-player-wrap {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
.video-player {
|
||||
visibility: hidden;
|
||||
> div {
|
||||
width: 356px;
|
||||
height: 356px;
|
||||
display: none;
|
||||
}
|
||||
.vjs-control-bar,
|
||||
.vjs-big-play-button {
|
||||
visibility: hidden;
|
||||
transition: none;
|
||||
}
|
||||
.vjs-big-play-button {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.media-mode {
|
||||
position: absolute;
|
||||
width: 356px;
|
||||
z-index: 5;
|
||||
bottom: 0;
|
||||
top: 300px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
|
||||
span {
|
||||
background: rgba(100, 100, 100, 0.6);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 25px;
|
||||
border-radius: 10px;
|
||||
padding: 0 15px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.show {
|
||||
.video-player,
|
||||
.vjs-control-bar,
|
||||
.vjs-big-play-button {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.video-player {
|
||||
> div {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.media-mode {
|
||||
top: initial;
|
||||
bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.magnifier-wrap {
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border: 1px solid #d8d8d8;
|
||||
box-sizing: border-box;
|
||||
.magnifier-box .mouse-cover {
|
||||
background-color: #fede4f;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.spec-items {
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
width: 84px;
|
||||
height: 460px;
|
||||
overflow: hidden;
|
||||
> span {
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 84px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
color: #838383;
|
||||
z-index: 1;
|
||||
font-size: 25px;
|
||||
&:first-of-type{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&:last-of-type{
|
||||
top: calc(100% - 42px);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 500%;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
li {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #DADADA;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
box-sizing: border-box;
|
||||
&:hover,
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
border-color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.share-collect {
|
||||
padding: 10px 0 20px;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
color: #838383;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
a{
|
||||
color: #838383;
|
||||
}
|
||||
i,
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.basic-info-wrap {
|
||||
float: left;
|
||||
width: calc(100% - 589px);
|
||||
margin-left: 30px;
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin: 5px 0 12px;
|
||||
}
|
||||
.divider {
|
||||
margin: 10px 0;
|
||||
border: 0;
|
||||
border-top: 1px dotted #e5e5e5;
|
||||
}
|
||||
.discount-banner {
|
||||
margin-top: 5px;
|
||||
background: url(../../../../assets/images/goods/discount_bg.png) no-repeat;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.activity-name {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
line-height: 40px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
line-height: 40px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.discount-icon {
|
||||
margin: 0 8px 0 10px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
.surplus-time {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
float: right;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding-right: 5px;
|
||||
text-align: right;
|
||||
> span {
|
||||
margin-right: 5px;
|
||||
}
|
||||
i {
|
||||
font-style: normal;
|
||||
padding: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.count-down {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-block {
|
||||
background-color: #f8f8f8;
|
||||
padding: 15px 0;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
min-height: 62px;
|
||||
margin-bottom: 20px;
|
||||
.statistical {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 16px;
|
||||
li {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&:first-child {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #838383;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #383838;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-line {
|
||||
font-size: 14px;
|
||||
min-height: 35px;
|
||||
line-height: 35px;
|
||||
display: flex;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
dt {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: justify;
|
||||
font-size: 12px;
|
||||
margin-right: 16px;
|
||||
color: #222;
|
||||
flex-shrink: 0;
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
content: '';
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
> * {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
> dd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
}
|
||||
&:last-of-type{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:first-of-type > dd{
|
||||
align-items: baseline;
|
||||
}
|
||||
.yuan {
|
||||
font-size: 18px;
|
||||
}
|
||||
.price {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.market-yuan {
|
||||
font-size: 14px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.member_price {
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.market-price {
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
&.promotion-price .label {
|
||||
line-height: initial;
|
||||
font-size: 18px;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
&.coupon-list {
|
||||
align-items: baseline;
|
||||
> div {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
dd {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: 18px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
border: 1px solid $base-color;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: $base-color;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
label {
|
||||
line-height: 16px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
&.manjian {
|
||||
align-items: end;
|
||||
}
|
||||
&.manjian span {
|
||||
// padding: 2px 10px;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
&.delivery {
|
||||
position: relative;
|
||||
i {
|
||||
margin-left: 5px;
|
||||
}
|
||||
dd{
|
||||
align-items: center;
|
||||
}
|
||||
.region-selected {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin: 0 5px 0 0;
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border: 1px solid #e5e5e5;
|
||||
z-index: 2;
|
||||
font-size: 14px;
|
||||
}
|
||||
.region-list {
|
||||
width: 466px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 35px;
|
||||
left: 82px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e5e5;
|
||||
padding: 15px;
|
||||
line-height: 18px;
|
||||
height: auto;
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
&.hide{
|
||||
display: none !important;
|
||||
}
|
||||
.nav-tabs {
|
||||
border-bottom: 2px solid $base-color;
|
||||
height: 30px;
|
||||
> li {
|
||||
margin-bottom: -2px;
|
||||
float: left;
|
||||
> div {
|
||||
padding: 4px 8px;
|
||||
border: 2px solid transparent;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
> div {
|
||||
color: $base-color;
|
||||
border: 2px solid;
|
||||
border-bottom-color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
> .active {
|
||||
padding: 10px 0;
|
||||
}
|
||||
> .tab-pane {
|
||||
display: none;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
width: 25%;
|
||||
line-height: 30px;
|
||||
&.selected {
|
||||
color: $base-color;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
dd:hover {
|
||||
.region-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.service a {
|
||||
margin: 0 5px;
|
||||
}
|
||||
&.buy-btn {
|
||||
margin: 25px 0 0;
|
||||
dt{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
dd{
|
||||
height: auto;
|
||||
}
|
||||
button {
|
||||
min-width: 168px;
|
||||
height: 52px;
|
||||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
text-shadow: 0 0 0;
|
||||
border-radius: 0;
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: initial;
|
||||
border: 1px solid;
|
||||
opacity: 1;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.i-activity-flag {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid;
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.gift-point strong {
|
||||
font-size: 14px;
|
||||
}
|
||||
&.merchant-service {
|
||||
overflow: hidden;
|
||||
margin: 10px 0;
|
||||
align-items: flex-start;
|
||||
> div {
|
||||
display: inline-block;
|
||||
}
|
||||
dd {
|
||||
display: inline-block;
|
||||
margin-right: 18px;
|
||||
// margin: 0;
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
i {
|
||||
color: $base-color;
|
||||
font-size: $ns-font-size-base;
|
||||
margin-right: 5px;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sku-list {
|
||||
ul {
|
||||
overflow: hidden;
|
||||
padding: 1px;
|
||||
li {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 2px 10px 10px 0;
|
||||
line-height: 14px;
|
||||
vertical-align: middle;
|
||||
|
||||
div {
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
border: 1px solid #b7b7b7;
|
||||
display: inline-block;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&.selected,
|
||||
&:hover {
|
||||
border: 2px solid;
|
||||
margin: -1px;
|
||||
color: $base-color;
|
||||
}
|
||||
&:hover {
|
||||
color: $base-color;
|
||||
}
|
||||
&.disabled,
|
||||
&.disabled:hover {
|
||||
border: 1px solid #b7b7b7;
|
||||
margin: 0;
|
||||
cursor: not-allowed;
|
||||
color: #aaa;
|
||||
}
|
||||
img {
|
||||
margin-right: 10px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: 0px;
|
||||
display: none;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
&:not(.disabled).selected i,
|
||||
&:not(.disabled):hover i {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.buy-number {
|
||||
margin: 10px 0;
|
||||
.num-wrap {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
input {
|
||||
width: 126px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
font-size: 12px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 0;
|
||||
border-color: #D5D5D5;
|
||||
text-align: center;
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
span {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
&.decrease{
|
||||
border-right: 1px solid #D5D5D5;
|
||||
}
|
||||
&.increase{
|
||||
left: 94px;
|
||||
border-left: 1px solid #D5D5D5;
|
||||
}
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inventory {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
.go-phone {
|
||||
position: relative;
|
||||
float: right;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border: 1px solid #d8d8d8;
|
||||
box-sizing: border-box;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
&>img{
|
||||
|
||||
}
|
||||
&>span{
|
||||
margin-top: 4px;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
&:hover .qrcode-wrap {
|
||||
display: block;
|
||||
}
|
||||
.qrcode-wrap {
|
||||
border: 1px solid #e5e5e5;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
left: 30px;
|
||||
top: -50px;
|
||||
display: none;
|
||||
background:white;
|
||||
}
|
||||
&.icon-item{
|
||||
.iconfont{
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #5E5C5C;
|
||||
&.selected{
|
||||
color: #ff9000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shop-wrap {
|
||||
float: right;
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 0 20px;
|
||||
width: 234px;
|
||||
box-sizing: border-box;
|
||||
.head-wrap {
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
.img-wrap {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
.site-name {
|
||||
font-size: 14px;
|
||||
color: #383838;
|
||||
}
|
||||
.tag {
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.info-wrap {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
dl {
|
||||
font-size: $ns-font-size-sm;
|
||||
dt {
|
||||
color: #838383;
|
||||
// width: 65px;
|
||||
line-height: 25px;
|
||||
font-weight: normal;
|
||||
float: left;
|
||||
}
|
||||
dt.site-score {
|
||||
// width: 58px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
dd {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
// margin-left: 50px;
|
||||
color: #838383;
|
||||
span {
|
||||
color: #383838;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.operation {
|
||||
padding: 12px 0;
|
||||
|
||||
.el-button {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-wrap {
|
||||
padding: 64px 0 35px;
|
||||
clear: both;
|
||||
.goods-recommended {
|
||||
float: left;
|
||||
width: 234px;
|
||||
}
|
||||
.goods-tab {
|
||||
.attr-list {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
margin-bottom: 5px;
|
||||
padding: 0 10px;
|
||||
flex: 0 0 30%;
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
.el-tabs__header{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.tablist{
|
||||
border-radius: 0;
|
||||
}
|
||||
.el-tabs__item{
|
||||
position: relative;
|
||||
width: 168px;
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
&.is-active{
|
||||
color: $base-color;
|
||||
&:after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
.evaluate {
|
||||
.empty {
|
||||
color: #898989;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
nav {
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
background: #f7f7f7;
|
||||
li {
|
||||
float: left;
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:hover,
|
||||
&.selected {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
li {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
.member-info {
|
||||
float: left;
|
||||
width: 140px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.info-wrap {
|
||||
margin-left: 150px;
|
||||
margin-bottom: 10px;
|
||||
.content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.img-list {
|
||||
.el-image {
|
||||
width: 50px;
|
||||
margin-left: 10px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sku-info {
|
||||
color: #898989;
|
||||
font-size: 12px;
|
||||
span {
|
||||
margin-right: 5px;
|
||||
&.create-time {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.evaluation-reply {
|
||||
margin: 10px 0;
|
||||
color: $base-color;
|
||||
}
|
||||
.review-evaluation {
|
||||
.review-time {
|
||||
font-size: $ns-font-size-sm;
|
||||
margin-left: 20px;
|
||||
color: #898989;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-wrap {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
327
addon/pc/source/os/assets/css/promotion/list_seckill.scss
Executable file
327
addon/pc/source/os/assets/css/promotion/list_seckill.scss
Executable file
@@ -0,0 +1,327 @@
|
||||
.ns-seckill {
|
||||
.ns-seckill-time-box {
|
||||
&>span {
|
||||
cursor: pointer;
|
||||
bottom: 0;
|
||||
line-height: 64px;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
width: 35px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left-btn {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.right-btn {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ns-seckill-time-list {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 500%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 16px;
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 302.5px;
|
||||
height: 64px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #EDEDED 0%, #FFFFFF 100%);
|
||||
opacity: 0.87;
|
||||
color: #424242;
|
||||
&::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 12px;
|
||||
border-left: 30px solid rgba(255,255,255,0.87);
|
||||
border-bottom: 60px solid rgba(255,255,255,0.87);
|
||||
border-right: 30px solid transparent;
|
||||
border-top: 60px solid transparent;
|
||||
}
|
||||
&:first-of-type::after{
|
||||
border: 0;
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
line-height: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.selected-tab {
|
||||
background: linear-gradient(135deg, #F42424 0%, #FA6400 100%);
|
||||
opacity: 0.88;
|
||||
color: #FFF;
|
||||
}
|
||||
&.selected-tab + li{
|
||||
background-color: red;
|
||||
}
|
||||
&.selected-tab+li::after{
|
||||
border-left-color: rgba(250,75,0,0.88);
|
||||
border-bottom-color: rgba(250,75,0,0.88);
|
||||
}
|
||||
&.selected-tab::after{
|
||||
border-left-color: rgba(255,255,255,1);
|
||||
border-bottom-color: rgba(255,255,255,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ns-seckill-head {
|
||||
position: relative;
|
||||
width: $width;
|
||||
margin: auto;
|
||||
.el-carousel{
|
||||
.el-image{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ns-seckill-box {
|
||||
padding-top: 54px;
|
||||
width: $width;
|
||||
margin: 0 auto 50px;
|
||||
|
||||
.ns-seckill-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
|
||||
.seckill-title-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
border-bottom: 4px solid #f42424;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-left: 15px;
|
||||
font-size: 16px;
|
||||
color: #424242;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.ns-seckill-right {
|
||||
&>span {
|
||||
font-size: 20px;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
.count-down {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
|
||||
&>p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
margin-left: 3px;
|
||||
margin-right: -6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ns-seckill-time-box {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: $width;
|
||||
height: 64px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
z-index: 5;
|
||||
|
||||
.seckill-time {
|
||||
width: $width;
|
||||
margin: 0 auto;
|
||||
|
||||
.el-tabs__nav-wrap .el-tabs__item .seckill-time-li.selected-tab div p {
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.seckill-time-li {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
height: 56px;
|
||||
line-height: unset;
|
||||
padding-top: 6px;
|
||||
box-sizing: border-box;
|
||||
color: #afafaf;
|
||||
|
||||
div {
|
||||
&:first-child {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
margin-top: 6px;
|
||||
|
||||
p {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected-tab {
|
||||
background: $base-color;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
margin-top: 35px;
|
||||
|
||||
.goods {
|
||||
width: 228px;
|
||||
margin-bottom: 18px;
|
||||
margin-right: 17px;
|
||||
overflow: hidden;
|
||||
color: #303133;
|
||||
transition: 0.3s;
|
||||
padding: 18px;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
||||
&:nth-child(5n+5) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.curr-price {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 24px;
|
||||
color: $base-color;
|
||||
font-weight: bold;
|
||||
|
||||
span:first-child {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.main_price {
|
||||
color: $base-color;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.primary_price {
|
||||
text-decoration: line-through;
|
||||
color: $base-color-info;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
line-height: 24px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: $base-color;
|
||||
color: #ffffff;
|
||||
margin-top: 5px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-wrap {
|
||||
padding: 50px 0 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
img{
|
||||
width: 400px;
|
||||
height: 244px;
|
||||
}
|
||||
span{
|
||||
font-size: 14px;
|
||||
color: #4A4A4A;
|
||||
}
|
||||
}
|
||||
407
addon/pc/source/os/assets/css/promotion/payment_combo.scss
Executable file
407
addon/pc/source/os/assets/css/promotion/payment_combo.scss
Executable file
@@ -0,0 +1,407 @@
|
||||
.payment-wrap {
|
||||
width: 1210px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.item-block {
|
||||
padding: 0 15px 1px;
|
||||
margin: 10px 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: #ffffff;
|
||||
|
||||
.block-text {
|
||||
border-color: #eeeeee;
|
||||
color: $ns-text-color-black;
|
||||
padding: 7px 0;
|
||||
border-bottom: 1px;
|
||||
}
|
||||
|
||||
.box {
|
||||
.liuyan-text {
|
||||
background-color: #F7F7F7;
|
||||
border: 2px solid #DADADA;
|
||||
height: 56px;
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.padd-bom-10 {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.padd-bom-20 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
//收货地址
|
||||
.address-desc {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.address-item {
|
||||
width: 23%;
|
||||
border: 3px solid #eee;
|
||||
box-sizing: border-box;
|
||||
margin: 1%;
|
||||
height: 150px;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
|
||||
.add-address {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
line-height: 120px;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.address-name {
|
||||
color: $base-color;
|
||||
padding: 0px 0 6px;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-right: 71px;
|
||||
box-sizing: border-box;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.address-mobile {
|
||||
padding: 10px 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address-item.active {
|
||||
background-color: #fffbf9;
|
||||
border-color: $base-color;
|
||||
}
|
||||
|
||||
//支付方式
|
||||
.pay-type-list {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.distribution {
|
||||
color: #ff547b;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.pay-type-item {
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
border: 2px solid #eeeeee;
|
||||
padding: 5px 20px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pay-type-item.active {
|
||||
border-color: $base-color;
|
||||
}
|
||||
|
||||
.mobile-wrap {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.pay-password {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
//商品列表
|
||||
.goods-list {
|
||||
padding: 15px 0;
|
||||
|
||||
.store-icon {
|
||||
margin-right: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.shop-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.goods-info-left {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
|
||||
.goods-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-info-right {
|
||||
float: left;
|
||||
height: 60px;
|
||||
margin-left: 10px;
|
||||
color: $base-color;
|
||||
width: 80%;
|
||||
|
||||
.goods-name {
|
||||
line-height: 20px;
|
||||
padding-top: 10px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-spec {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-footer {
|
||||
background-color: #f3fbfe;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
|
||||
.goods-footer-right {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.goods-footer-left {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.order-cell {
|
||||
cursor: pointer;
|
||||
|
||||
.tit {
|
||||
padding: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.express-item {
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
border: 2px solid #eeeeee;
|
||||
padding: 3px 10px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.express-item.active {
|
||||
border-color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.promotion-show {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
//统计
|
||||
.order-statistics {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
// color: #999;
|
||||
}
|
||||
|
||||
.order-submit {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.order-money {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
font-size: $ns-font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.buyer-message.el-textarea {
|
||||
width: 400px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.address-open {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
padding: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
.pay-password-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pay-password {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.pay-password.hide-password {
|
||||
position: fixed;
|
||||
top: -9999px;
|
||||
}
|
||||
|
||||
.platform-coupon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.forget-password {
|
||||
text-align: right;
|
||||
margin-right: 45px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.disabled-selected-wrap {
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
//发票样式
|
||||
.invoice-information {
|
||||
.invoice-type-box {
|
||||
display: inline-block;
|
||||
padding: 10px 0px;
|
||||
vertical-align: bottom;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
&.invoice-title-box {
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.invoice-name {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.invoice-to-type {
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
position: relative;
|
||||
// i{
|
||||
// width: 17px;
|
||||
// height: 17px;
|
||||
// display: inline-block;
|
||||
// position: absolute;
|
||||
// border-radius: 34px;
|
||||
// overflow: hidden;
|
||||
// top: 7px;
|
||||
// left:-1px;
|
||||
// background: #fff;
|
||||
// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABbUlEQVQ4jYXTsUvVURQH8I8PE1zKTdcEK7I/wNkkKpGgxNaGBqUQ3JT2xoQoaajmhhTEgoig1V0QdQiaCgTxJRK4PDlybtwe+vzCDw7n+/3ee+75ndPVmpzXhut4jDu4nNQPfMFbbNbyRhX34BW+YxdTuJTfw8wF9wa9xdRdmT/jD66g2VbVRn5LeI813MVRqWARB5g8xVyjmZq46EV5wjAe4BFaKR7CchqaGQ8l10pteIa7s2FLeWrgKtbRV918H6MYwXZqX4Y3KriN1Ur8vM1c0JdcwafwxgGD2KqIsQ49uFXFUclgo4P4PPSUvxBDcq0Sf+tg/FrFUfnPRk7YvYp4hv1TzPvJFYzHZXHAO8zgYhJb2e2VnI2DjEeqXoV2Nka77MJrDOSQlFk4C134iN94Upo4l6cGEbN/FoIrmvD8W6ajfNMv7GABN3Ahux1x5IKLpZpIz3/bGImnOXH9edMh9vAhczcxjb8nDhwDyjpTCJDO1nsAAAAASUVORK5CYII=);
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
border-radius: 34px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
vertical-align: text-bottom;
|
||||
border: 1px solid #999;
|
||||
|
||||
&.active {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABbUlEQVQ4jYXTsUvVURQH8I8PE1zKTdcEK7I/wNkkKpGgxNaGBqUQ3JT2xoQoaajmhhTEgoig1V0QdQiaCgTxJRK4PDlybtwe+vzCDw7n+/3ee+75ndPVmpzXhut4jDu4nNQPfMFbbNbyRhX34BW+YxdTuJTfw8wF9wa9xdRdmT/jD66g2VbVRn5LeI813MVRqWARB5g8xVyjmZq46EV5wjAe4BFaKR7CchqaGQ8l10pteIa7s2FLeWrgKtbRV918H6MYwXZqX4Y3KriN1Ur8vM1c0JdcwafwxgGD2KqIsQ49uFXFUclgo4P4PPSUvxBDcq0Sf+tg/FrFUfnPRk7YvYp4hv1TzPvJFYzHZXHAO8zgYhJb2e2VnI2DjEeqXoV2Nka77MJrDOSQlFk4C134iN94Upo4l6cGEbN/FoIrmvD8W6ajfNMv7GABN3Ahux1x5IKLpZpIz3/bGImnOXH9edMh9vAhczcxjb8nDhwDyjpTCJDO1nsAAAAASUVORK5CYII=);
|
||||
background-size: 100% 100%;
|
||||
border: 0px solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
vertical-align: middle;
|
||||
margin: 0px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.invoice-box-form {
|
||||
display: inline-block;
|
||||
|
||||
input {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
margin-right: 20px;
|
||||
border: 1px solid #dddddd;
|
||||
padding-left: 10px;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invoice-condition {
|
||||
padding: 10px 0px;
|
||||
|
||||
.invoice-name {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.invoice-box-form {
|
||||
display: inline-block;
|
||||
|
||||
.option-item {
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: #ff547b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invoice-tops {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
348
addon/pc/source/os/assets/css/promotion/payment_groupbuy.scss
Executable file
348
addon/pc/source/os/assets/css/promotion/payment_groupbuy.scss
Executable file
@@ -0,0 +1,348 @@
|
||||
.payment-wrap {
|
||||
width: 1210px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
.item-block {
|
||||
padding: 0 15px 1px;
|
||||
margin: 10px 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: #ffffff;
|
||||
.block-text {
|
||||
border-color: #eeeeee;
|
||||
color: $ns-text-color-black;
|
||||
padding: 7px 0;
|
||||
border-bottom: 1px;
|
||||
}
|
||||
.box{
|
||||
.liuyan-text{
|
||||
background-color: #F7F7F7;
|
||||
border: 2px solid #DADADA;
|
||||
height: 56px;
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.padd-bom-10{
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.padd-bom-20{
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
//收货地址
|
||||
.address-desc {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.address-item {
|
||||
width: 23%;
|
||||
border: 3px solid #eee;
|
||||
box-sizing: border-box;
|
||||
margin: 1%;
|
||||
height: 150px;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
|
||||
.add-address {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
line-height: 120px;
|
||||
}
|
||||
.address-info {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.options {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
div {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.address-name {
|
||||
color: $base-color;
|
||||
padding: 0px 0 6px;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-right: 71px;
|
||||
box-sizing: border-box;
|
||||
line-height: 25px;
|
||||
}
|
||||
.address-mobile {
|
||||
padding: 10px 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.address-item.active {
|
||||
background-color: #fffbf9;
|
||||
border-color: $base-color;
|
||||
}
|
||||
|
||||
//支付方式
|
||||
.pay-type-list {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.distribution{
|
||||
color: #ff547b;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.pay-type-item {
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
border: 2px solid #eeeeee;
|
||||
padding: 5px 20px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pay-type-item.active {
|
||||
border-color: $base-color;
|
||||
}
|
||||
.mobile-wrap {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
//商品列表
|
||||
.goods-list {
|
||||
padding: 15px 0;
|
||||
|
||||
.store-icon {
|
||||
margin-right: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.shop-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
.goods-info-left {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
.goods-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
.goods-info-right {
|
||||
float: left;
|
||||
height: 60px;
|
||||
margin-left: 10px;
|
||||
color: $base-color;
|
||||
width: 80%;
|
||||
.goods-name {
|
||||
line-height: 20px;
|
||||
padding-top: 10px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.goods-spec {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.goods-footer {
|
||||
background-color: #f3fbfe;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
.goods-footer-right {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.goods-footer-left {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.order-cell {
|
||||
cursor: pointer;
|
||||
.tit {
|
||||
padding: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
.express-item {
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
border: 2px solid #eeeeee;
|
||||
padding: 3px 10px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.express-item.active {
|
||||
border-color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.promotion-show {
|
||||
color: #999;
|
||||
}
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
//统计
|
||||
.order-statistics {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
// color: #999;
|
||||
}
|
||||
.order-submit {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
}
|
||||
.order-money {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
div {
|
||||
display: inline-block;
|
||||
font-size: $ns-font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.buyer-message.el-textarea {
|
||||
width: 400px;
|
||||
}
|
||||
.address-open {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
padding: 0 0 10px 10px;
|
||||
}
|
||||
.pay-password-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pay-password {
|
||||
width: 80%;
|
||||
}
|
||||
.pay-password.hide-password {
|
||||
position: fixed;
|
||||
top: -9999px;
|
||||
}
|
||||
.platform-coupon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.forget-password {
|
||||
text-align: right;
|
||||
margin-right: 45px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.disabled-selected-wrap {
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
//发票样式
|
||||
.invoice-information {
|
||||
.invoice-type-box {
|
||||
display: inline-block;
|
||||
padding: 10px 0px;
|
||||
vertical-align: bottom;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
&.invoice-title-box {
|
||||
margin-right: 100px;
|
||||
}
|
||||
.invoice-name {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.invoice-to-type {
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
position: relative;
|
||||
// i{
|
||||
// width: 17px;
|
||||
// height: 17px;
|
||||
// display: inline-block;
|
||||
// position: absolute;
|
||||
// border-radius: 34px;
|
||||
// overflow: hidden;
|
||||
// top: 7px;
|
||||
// left:-1px;
|
||||
// background: #fff;
|
||||
// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABbUlEQVQ4jYXTsUvVURQH8I8PE1zKTdcEK7I/wNkkKpGgxNaGBqUQ3JT2xoQoaajmhhTEgoig1V0QdQiaCgTxJRK4PDlybtwe+vzCDw7n+/3ee+75ndPVmpzXhut4jDu4nNQPfMFbbNbyRhX34BW+YxdTuJTfw8wF9wa9xdRdmT/jD66g2VbVRn5LeI813MVRqWARB5g8xVyjmZq46EV5wjAe4BFaKR7CchqaGQ8l10pteIa7s2FLeWrgKtbRV918H6MYwXZqX4Y3KriN1Ur8vM1c0JdcwafwxgGD2KqIsQ49uFXFUclgo4P4PPSUvxBDcq0Sf+tg/FrFUfnPRk7YvYp4hv1TzPvJFYzHZXHAO8zgYhJb2e2VnI2DjEeqXoV2Nka77MJrDOSQlFk4C134iN94Upo4l6cGEbN/FoIrmvD8W6ajfNMv7GABN3Ahux1x5IKLpZpIz3/bGImnOXH9edMh9vAhczcxjb8nDhwDyjpTCJDO1nsAAAAASUVORK5CYII=);
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
border-radius: 34px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
vertical-align: text-bottom;
|
||||
border: 1px solid #999;
|
||||
&.active {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABbUlEQVQ4jYXTsUvVURQH8I8PE1zKTdcEK7I/wNkkKpGgxNaGBqUQ3JT2xoQoaajmhhTEgoig1V0QdQiaCgTxJRK4PDlybtwe+vzCDw7n+/3ee+75ndPVmpzXhut4jDu4nNQPfMFbbNbyRhX34BW+YxdTuJTfw8wF9wa9xdRdmT/jD66g2VbVRn5LeI813MVRqWARB5g8xVyjmZq46EV5wjAe4BFaKR7CchqaGQ8l10pteIa7s2FLeWrgKtbRV918H6MYwXZqX4Y3KriN1Ur8vM1c0JdcwafwxgGD2KqIsQ49uFXFUclgo4P4PPSUvxBDcq0Sf+tg/FrFUfnPRk7YvYp4hv1TzPvJFYzHZXHAO8zgYhJb2e2VnI2DjEeqXoV2Nka77MJrDOSQlFk4C134iN94Upo4l6cGEbN/FoIrmvD8W6ajfNMv7GABN3Ahux1x5IKLpZpIz3/bGImnOXH9edMh9vAhczcxjb8nDhwDyjpTCJDO1nsAAAAASUVORK5CYII=);
|
||||
background-size: 100% 100%;
|
||||
border: 0px solid #fff;
|
||||
}
|
||||
}
|
||||
input {
|
||||
vertical-align: middle;
|
||||
margin: 0px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
.invoice-box-form {
|
||||
display: inline-block;
|
||||
input {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
margin-right: 20px;
|
||||
border: 1px solid #dddddd;
|
||||
padding-left: 10px;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.invoice-condition {
|
||||
padding: 10px 0px;
|
||||
.invoice-name {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.invoice-box-form {
|
||||
display: inline-block;
|
||||
.option-item {
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: #ff547b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.invoice-tops{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
347
addon/pc/source/os/assets/css/promotion/payment_seckill.scss
Executable file
347
addon/pc/source/os/assets/css/promotion/payment_seckill.scss
Executable file
@@ -0,0 +1,347 @@
|
||||
.payment-wrap {
|
||||
width: 1210px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
.item-block {
|
||||
padding: 0 15px 1px;
|
||||
margin: 10px 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: #ffffff;
|
||||
.block-text {
|
||||
border-color: #eeeeee;
|
||||
color: $ns-text-color-black;
|
||||
padding: 7px 0;
|
||||
border-bottom: 1px;
|
||||
}
|
||||
.box{
|
||||
.liuyan-text{
|
||||
background-color: #F7F7F7;
|
||||
border: 2px solid #DADADA;
|
||||
height: 56px;
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.padd-bom-10{
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.padd-bom-20{
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
//收货地址
|
||||
.address-desc {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.address-item {
|
||||
width: 23%;
|
||||
border: 3px solid #eee;
|
||||
box-sizing: border-box;
|
||||
margin: 1%;
|
||||
height: 150px;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
|
||||
.add-address {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
line-height: 120px;
|
||||
}
|
||||
.address-info {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.options {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
div {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.address-name {
|
||||
color: $base-color;
|
||||
padding: 0px 0 6px;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-right: 71px;
|
||||
box-sizing: border-box;
|
||||
line-height: 25px;
|
||||
}
|
||||
.address-mobile {
|
||||
padding: 10px 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.address-item.active {
|
||||
background-color: #fffbf9;
|
||||
border-color: $base-color;
|
||||
}
|
||||
|
||||
//支付方式
|
||||
.pay-type-list {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.distribution{
|
||||
color: #ff547b;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.pay-type-item {
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
border: 2px solid #eeeeee;
|
||||
padding: 5px 20px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pay-type-item.active {
|
||||
border-color: $base-color;
|
||||
}
|
||||
.mobile-wrap {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
//商品列表
|
||||
.goods-list {
|
||||
padding: 15px 0;
|
||||
|
||||
.store-icon {
|
||||
margin-right: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.shop-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
.goods-info-left {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
.goods-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
.goods-info-right {
|
||||
float: left;
|
||||
height: 60px;
|
||||
margin-left: 10px;
|
||||
color: $base-color;
|
||||
width: 80%;
|
||||
.goods-name {
|
||||
line-height: 20px;
|
||||
padding-top: 10px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.goods-spec {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.goods-footer {
|
||||
background-color: #f3fbfe;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
.goods-footer-right {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.goods-footer-left {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.order-cell {
|
||||
cursor: pointer;
|
||||
.tit {
|
||||
padding: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
.express-item {
|
||||
margin-top: 5px;
|
||||
display: inline-block;
|
||||
border: 2px solid #eeeeee;
|
||||
padding: 3px 10px;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.express-item.active {
|
||||
border-color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.promotion-show {
|
||||
color: #999;
|
||||
}
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
//统计
|
||||
.order-statistics {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
// color: #999;
|
||||
}
|
||||
.order-submit {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
}
|
||||
.order-money {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
div {
|
||||
display: inline-block;
|
||||
font-size: $ns-font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.buyer-message.el-textarea {
|
||||
width: 400px;
|
||||
}
|
||||
.address-open {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
padding: 0 0 10px 10px;
|
||||
}
|
||||
.pay-password-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pay-password {
|
||||
width: 80%;
|
||||
}
|
||||
.pay-password.hide-password {
|
||||
position: fixed;
|
||||
top: -9999px;
|
||||
}
|
||||
.platform-coupon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.forget-password {
|
||||
text-align: right;
|
||||
margin-right: 45px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.disabled-selected-wrap {
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
//发票样式
|
||||
.invoice-information {
|
||||
.invoice-type-box {
|
||||
display: inline-block;
|
||||
padding: 10px 0px;
|
||||
vertical-align: bottom;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
&.invoice-title-box {
|
||||
margin-right: 100px;
|
||||
}
|
||||
.invoice-name {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.invoice-to-type {
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
position: relative;
|
||||
// i{
|
||||
// width: 17px;
|
||||
// height: 17px;
|
||||
// display: inline-block;
|
||||
// position: absolute;
|
||||
// border-radius: 34px;
|
||||
// overflow: hidden;
|
||||
// top: 7px;
|
||||
// left:-1px;
|
||||
// background: #fff;
|
||||
// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABbUlEQVQ4jYXTsUvVURQH8I8PE1zKTdcEK7I/wNkkKpGgxNaGBqUQ3JT2xoQoaajmhhTEgoig1V0QdQiaCgTxJRK4PDlybtwe+vzCDw7n+/3ee+75ndPVmpzXhut4jDu4nNQPfMFbbNbyRhX34BW+YxdTuJTfw8wF9wa9xdRdmT/jD66g2VbVRn5LeI813MVRqWARB5g8xVyjmZq46EV5wjAe4BFaKR7CchqaGQ8l10pteIa7s2FLeWrgKtbRV918H6MYwXZqX4Y3KriN1Ur8vM1c0JdcwafwxgGD2KqIsQ49uFXFUclgo4P4PPSUvxBDcq0Sf+tg/FrFUfnPRk7YvYp4hv1TzPvJFYzHZXHAO8zgYhJb2e2VnI2DjEeqXoV2Nka77MJrDOSQlFk4C134iN94Upo4l6cGEbN/FoIrmvD8W6ajfNMv7GABN3Ahux1x5IKLpZpIz3/bGImnOXH9edMh9vAhczcxjb8nDhwDyjpTCJDO1nsAAAAASUVORK5CYII=);
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
border-radius: 34px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
vertical-align: text-bottom;
|
||||
border: 1px solid #999;
|
||||
&.active {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABbUlEQVQ4jYXTsUvVURQH8I8PE1zKTdcEK7I/wNkkKpGgxNaGBqUQ3JT2xoQoaajmhhTEgoig1V0QdQiaCgTxJRK4PDlybtwe+vzCDw7n+/3ee+75ndPVmpzXhut4jDu4nNQPfMFbbNbyRhX34BW+YxdTuJTfw8wF9wa9xdRdmT/jD66g2VbVRn5LeI813MVRqWARB5g8xVyjmZq46EV5wjAe4BFaKR7CchqaGQ8l10pteIa7s2FLeWrgKtbRV918H6MYwXZqX4Y3KriN1Ur8vM1c0JdcwafwxgGD2KqIsQ49uFXFUclgo4P4PPSUvxBDcq0Sf+tg/FrFUfnPRk7YvYp4hv1TzPvJFYzHZXHAO8zgYhJb2e2VnI2DjEeqXoV2Nka77MJrDOSQlFk4C134iN94Upo4l6cGEbN/FoIrmvD8W6ajfNMv7GABN3Ahux1x5IKLpZpIz3/bGImnOXH9edMh9vAhczcxjb8nDhwDyjpTCJDO1nsAAAAASUVORK5CYII=);
|
||||
background-size: 100% 100%;
|
||||
border: 0px solid #fff;
|
||||
}
|
||||
}
|
||||
input {
|
||||
vertical-align: middle;
|
||||
margin: 0px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
.invoice-box-form {
|
||||
display: inline-block;
|
||||
input {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
margin-right: 20px;
|
||||
border: 1px solid #dddddd;
|
||||
padding-left: 10px;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.invoice-condition {
|
||||
padding: 10px 0px;
|
||||
.invoice-name {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.invoice-box-form {
|
||||
display: inline-block;
|
||||
.option-item {
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: #ff547b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.invoice-tops{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
BIN
addon/pc/source/os/assets/images/balance.png
Executable file
BIN
addon/pc/source/os/assets/images/balance.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
addon/pc/source/os/assets/images/coupon-bg.png
Executable file
BIN
addon/pc/source/os/assets/images/coupon-bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
addon/pc/source/os/assets/images/coupon.png
Executable file
BIN
addon/pc/source/os/assets/images/coupon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
addon/pc/source/os/assets/images/coupon_bg.png
Executable file
BIN
addon/pc/source/os/assets/images/coupon_bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
addon/pc/source/os/assets/images/coupon_type.png
Executable file
BIN
addon/pc/source/os/assets/images/coupon_type.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
addon/pc/source/os/assets/images/emjoy.png
Executable file
BIN
addon/pc/source/os/assets/images/emjoy.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 858 B |
BIN
addon/pc/source/os/assets/images/floor_title.png
Executable file
BIN
addon/pc/source/os/assets/images/floor_title.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
BIN
addon/pc/source/os/assets/images/goods/coupon.png
Executable file
BIN
addon/pc/source/os/assets/images/goods/coupon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
addon/pc/source/os/assets/images/goods/discount_bg.png
Executable file
BIN
addon/pc/source/os/assets/images/goods/discount_bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
addon/pc/source/os/assets/images/goods/goods_detail_bg.png
Executable file
BIN
addon/pc/source/os/assets/images/goods/goods_detail_bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
addon/pc/source/os/assets/images/goods/qrcode.png
Executable file
BIN
addon/pc/source/os/assets/images/goods/qrcode.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 586 B |
BIN
addon/pc/source/os/assets/images/goods/split.png
Executable file
BIN
addon/pc/source/os/assets/images/goods/split.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
BIN
addon/pc/source/os/assets/images/goods_empty.png
Executable file
BIN
addon/pc/source/os/assets/images/goods_empty.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
addon/pc/source/os/assets/images/gov_record.png
Executable file
BIN
addon/pc/source/os/assets/images/gov_record.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
addon/pc/source/os/assets/images/index-1.png
Executable file
BIN
addon/pc/source/os/assets/images/index-1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
addon/pc/source/os/assets/images/index-2.png
Executable file
BIN
addon/pc/source/os/assets/images/index-2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
addon/pc/source/os/assets/images/index-3.png
Executable file
BIN
addon/pc/source/os/assets/images/index-3.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
addon/pc/source/os/assets/images/index-4.png
Executable file
BIN
addon/pc/source/os/assets/images/index-4.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
addon/pc/source/os/assets/images/index-5.png
Executable file
BIN
addon/pc/source/os/assets/images/index-5.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
addon/pc/source/os/assets/images/index-6.png
Executable file
BIN
addon/pc/source/os/assets/images/index-6.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
addon/pc/source/os/assets/images/index-coupon.png
Executable file
BIN
addon/pc/source/os/assets/images/index-coupon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
addon/pc/source/os/assets/images/index/404.png
Executable file
BIN
addon/pc/source/os/assets/images/index/404.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
addon/pc/source/os/assets/images/index/adv_middle_01.png
Executable file
BIN
addon/pc/source/os/assets/images/index/adv_middle_01.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 329 KiB |
BIN
addon/pc/source/os/assets/images/index/adv_middle_02.jpg
Executable file
BIN
addon/pc/source/os/assets/images/index/adv_middle_02.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
addon/pc/source/os/assets/images/index/adv_middle_03.png
Executable file
BIN
addon/pc/source/os/assets/images/index/adv_middle_03.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 333 KiB |
BIN
addon/pc/source/os/assets/images/index/closed.png
Executable file
BIN
addon/pc/source/os/assets/images/index/closed.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
addon/pc/source/os/assets/images/index/index_card.png
Executable file
BIN
addon/pc/source/os/assets/images/index/index_card.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
addon/pc/source/os/assets/images/index/index_code.png
Executable file
BIN
addon/pc/source/os/assets/images/index/index_code.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
addon/pc/source/os/assets/images/index/index_member.png
Executable file
BIN
addon/pc/source/os/assets/images/index/index_member.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
addon/pc/source/os/assets/images/index/index_service.png
Executable file
BIN
addon/pc/source/os/assets/images/index/index_service.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
addon/pc/source/os/assets/images/index/index_top.png
Executable file
BIN
addon/pc/source/os/assets/images/index/index_top.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 722 B |
BIN
addon/pc/source/os/assets/images/kefupng.png
Executable file
BIN
addon/pc/source/os/assets/images/kefupng.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 640 KiB |
BIN
addon/pc/source/os/assets/images/limited_time.png
Executable file
BIN
addon/pc/source/os/assets/images/limited_time.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
addon/pc/source/os/assets/images/list_bj.png
Executable file
BIN
addon/pc/source/os/assets/images/list_bj.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
addon/pc/source/os/assets/images/logo.png
Executable file
BIN
addon/pc/source/os/assets/images/logo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
addon/pc/source/os/assets/images/member-empty.png
Executable file
BIN
addon/pc/source/os/assets/images/member-empty.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
addon/pc/source/os/assets/images/no_coupon.png
Executable file
BIN
addon/pc/source/os/assets/images/no_coupon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
addon/pc/source/os/assets/images/order_time.png
Executable file
BIN
addon/pc/source/os/assets/images/order_time.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 810 B |
BIN
addon/pc/source/os/assets/images/payment/address-border.png
Executable file
BIN
addon/pc/source/os/assets/images/payment/address-border.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
addon/pc/source/os/assets/images/point.png
Executable file
BIN
addon/pc/source/os/assets/images/point.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
addon/pc/source/os/assets/images/shop-defaultImg.png
Executable file
BIN
addon/pc/source/os/assets/images/shop-defaultImg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
addon/pc/source/os/assets/images/shop_index.png
Executable file
BIN
addon/pc/source/os/assets/images/shop_index.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
addon/pc/source/os/assets/images/superposition.png
Executable file
BIN
addon/pc/source/os/assets/images/superposition.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
addon/pc/source/os/assets/images/upload.png
Executable file
BIN
addon/pc/source/os/assets/images/upload.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
addon/pc/source/os/assets/images/wxewm.png
Executable file
BIN
addon/pc/source/os/assets/images/wxewm.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
303
addon/pc/source/os/assets/js/auth/find.js
Executable file
303
addon/pc/source/os/assets/js/auth/find.js
Executable file
@@ -0,0 +1,303 @@
|
||||
import {
|
||||
rePass,
|
||||
nextStep,
|
||||
smsCode,
|
||||
registerConfig
|
||||
} from "@/api/auth/login"
|
||||
import {
|
||||
captcha
|
||||
} from "@/api/website"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
var isMobile = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("手机号不能为空"))
|
||||
} else {
|
||||
|
||||
if (/^\d{11}$/.test(value)) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error("请输入正确的手机号"))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let self = this
|
||||
var setPass = function (rule, value, callback) {
|
||||
let regConfig = self.registerConfig
|
||||
if (!value) {
|
||||
return callback(new Error("请输入新的登录密码"))
|
||||
} else {
|
||||
if (regConfig.pwd_len > 0) {
|
||||
if (value.length < regConfig.pwd_len) {
|
||||
return callback(new Error("密码长度不能小于" + regConfig.pwd_len + "位"))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
} else {
|
||||
if (regConfig.pwd_complexity != "") {
|
||||
let passwordErrorMsg = "密码需包含",
|
||||
reg = ""
|
||||
if (regConfig.pwd_complexity.indexOf("number") != -1) {
|
||||
reg += "(?=.*?[0-9])"
|
||||
passwordErrorMsg += "数字"
|
||||
} else if (regConfig.pwd_complexity.indexOf("letter") != -1) {
|
||||
reg += "(?=.*?[a-z])"
|
||||
passwordErrorMsg += "、小写字母"
|
||||
} else if (regConfig.pwd_complexity.indexOf("upper_case") != -1) {
|
||||
reg += "(?=.*?[A-Z])"
|
||||
passwordErrorMsg += "、大写字母"
|
||||
} else if (regConfig.pwd_complexity.indexOf("symbol") != -1) {
|
||||
reg += "(?=.*?[#?!@$%^&*-])"
|
||||
passwordErrorMsg += "、特殊字符"
|
||||
} else {
|
||||
reg += ""
|
||||
passwordErrorMsg += ""
|
||||
}
|
||||
|
||||
if (reg.test(value)) {
|
||||
return callback(new Error(passwordErrorMsg))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var checkPass = function (rule, value, callback) {
|
||||
if (!value) {
|
||||
return callback(new Error("请输入确认密码"))
|
||||
} else {
|
||||
if (value !== self.formData.pass) {
|
||||
callback(new Error("两次密码输入不一致"))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
formData: {
|
||||
mobile: "",
|
||||
vercode: "",
|
||||
dynacode: "",
|
||||
pass: "",
|
||||
repass: "",
|
||||
key: ""
|
||||
},
|
||||
step: 1,
|
||||
activeName: "first",
|
||||
isShowPhone: "",
|
||||
captcha: {
|
||||
id: "",
|
||||
img: ""
|
||||
},
|
||||
// 验证码
|
||||
dynacodeData: {
|
||||
seconds: 120,
|
||||
timer: null,
|
||||
codeText: "获取动态码",
|
||||
isSend: false
|
||||
},
|
||||
// 动态码
|
||||
registerConfig: {},
|
||||
rules: {
|
||||
mobile: [{
|
||||
required: true,
|
||||
validator: isMobile,
|
||||
trigger: "blur"
|
||||
}],
|
||||
vercode: [{
|
||||
required: true,
|
||||
message: "请输入验证码",
|
||||
trigger: "blur"
|
||||
}],
|
||||
dynacode: [{
|
||||
required: true,
|
||||
message: "请输入短信动态码",
|
||||
trigger: "blur"
|
||||
}],
|
||||
pass: [{
|
||||
required: true,
|
||||
validator: setPass,
|
||||
trigger: "blur"
|
||||
}],
|
||||
repass: [{
|
||||
required: true,
|
||||
validator: checkPass,
|
||||
trigger: "blur"
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCaptcha()
|
||||
this.getRegisterConfig()
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: '找回密码-' + this.$store.state.site.siteInfo.site_name
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"dynacodeData.seconds": {
|
||||
handler(newValue, oldValue) {
|
||||
if (newValue == 0) {
|
||||
clearInterval(this.dynacodeData.timer)
|
||||
this.dynacodeData = {
|
||||
seconds: 120,
|
||||
timer: null,
|
||||
codeText: "获取动态码",
|
||||
isSend: false
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 下一步
|
||||
*/
|
||||
nextStep(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
nextStep({
|
||||
mobile: this.formData.mobile
|
||||
}).then(res => {
|
||||
if (res.code == -1) {
|
||||
this.step = 2
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "warning"
|
||||
})
|
||||
}
|
||||
}).catch(err => {
|
||||
if (err.code == 0) {
|
||||
this.$message({
|
||||
message: "该手机号未注册",
|
||||
type: "warning"
|
||||
})
|
||||
} else {
|
||||
this.$message.error(err.message)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取动态验证码 下一步
|
||||
*/
|
||||
nextStepToSetPass(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
this.step = 3
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 重置密码
|
||||
*/
|
||||
resetPass(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
rePass({
|
||||
password: this.formData.pass,
|
||||
code: this.formData.dynacode,
|
||||
key: this.formData.key,
|
||||
mobile: this.formData.mobile
|
||||
}).then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.step = 4
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "success"
|
||||
})
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$message.error(err.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
getCaptcha() {
|
||||
captcha({
|
||||
captcha_id: this.captcha.id
|
||||
}).then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.captcha.id = res.data.id
|
||||
this.captcha.img = res.data.img
|
||||
this.captcha.img = this.captcha.img.replace(/\r\n/g, "")
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$message.error(err.message)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 发送手机动态码
|
||||
*/
|
||||
sendMobileCode(formName) {
|
||||
if (this.dynacodeData.seconds != 120) return
|
||||
this.$refs[formName].clearValidate("dynacode")
|
||||
this.$refs[formName].validateField("vercode", valid => {
|
||||
if (!valid) {
|
||||
if (this.isSend) return
|
||||
this.isSend = true
|
||||
|
||||
smsCode({
|
||||
captcha_id: this.captcha.id,
|
||||
captcha_code: this.formData.vercode,
|
||||
mobile: this.formData.mobile
|
||||
}).then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.formData.key = res.data.key
|
||||
|
||||
if (this.dynacodeData.seconds == 120 && this.dynacodeData.timer == null) {
|
||||
this.dynacodeData.timer = setInterval(() => {
|
||||
this.dynacodeData.seconds--
|
||||
this.dynacodeData.codeText = this.dynacodeData.seconds + "s后可重新获取"
|
||||
}, 1000)
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "warning"
|
||||
})
|
||||
this.isSend = false
|
||||
this.getCaptcha()
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
this.isSend = false
|
||||
this.getCaptcha()
|
||||
this.$message.error(err.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取注册配置
|
||||
*/
|
||||
getRegisterConfig() {
|
||||
registerConfig().then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.registerConfig = res.data.value
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
537
addon/pc/source/os/assets/js/auth/login.js
Executable file
537
addon/pc/source/os/assets/js/auth/login.js
Executable file
@@ -0,0 +1,537 @@
|
||||
import {
|
||||
mobileCode,
|
||||
registerConfig,
|
||||
wechatMobileCode,
|
||||
} from "@/api/auth/login"
|
||||
import {
|
||||
adList,
|
||||
captcha
|
||||
} from "@/api/website"
|
||||
import {
|
||||
isWechatLogin
|
||||
} from "@/api/wechat"
|
||||
|
||||
export default {
|
||||
data: () => {
|
||||
var isMobile = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("手机号不能为空"))
|
||||
} else {
|
||||
|
||||
if (/^\d{11}$/.test(value)) {
|
||||
callback()
|
||||
} else {
|
||||
callback(new Error("请输入正确的手机号"))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
qrcodeData: {
|
||||
time: 0,
|
||||
timer: 0,
|
||||
},
|
||||
wx_key: '',
|
||||
expire_time: '',
|
||||
ischecked: false,
|
||||
ischecked1: false,
|
||||
activeName: "first", // tab切换
|
||||
|
||||
// 表单数据
|
||||
formData: {
|
||||
account: "",
|
||||
password: "",
|
||||
vercode: "",
|
||||
mobile: "",
|
||||
dynacode: "",
|
||||
key: "",
|
||||
checked: false,
|
||||
autoLoginRange: 7
|
||||
},
|
||||
// 验证码
|
||||
captcha: {
|
||||
id: "",
|
||||
img: ""
|
||||
},
|
||||
// 动态码
|
||||
dynacodeData: {
|
||||
seconds: 120,
|
||||
timer: null,
|
||||
codeText: "获取动态码",
|
||||
isSend: false
|
||||
},
|
||||
// 提交防重复
|
||||
isSub: false,
|
||||
registerConfig: {
|
||||
is_enable: 1,
|
||||
register: '',
|
||||
login: ''
|
||||
},
|
||||
accountRules: {
|
||||
account: [{
|
||||
required: true,
|
||||
message: "请输入登录账号",
|
||||
trigger: "blur"
|
||||
}],
|
||||
password: [{
|
||||
required: true,
|
||||
message: "请输入登录密码",
|
||||
trigger: "blur"
|
||||
}],
|
||||
vercode: [{
|
||||
required: true,
|
||||
message: "请输入验证码",
|
||||
trigger: "blur"
|
||||
}]
|
||||
},
|
||||
mobileRules: {
|
||||
mobile: [{
|
||||
required: true,
|
||||
validator: isMobile,
|
||||
trigger: "blur"
|
||||
}],
|
||||
vercode: [{
|
||||
required: true,
|
||||
message: "请输入验证码",
|
||||
trigger: "blur"
|
||||
}],
|
||||
dynacode: [{
|
||||
required: true,
|
||||
message: "请输入短信动态码",
|
||||
trigger: "blur"
|
||||
}]
|
||||
},
|
||||
wechatRules: {
|
||||
mobile: [{
|
||||
required: true,
|
||||
validator: isMobile,
|
||||
trigger: "blur"
|
||||
}],
|
||||
vercode: [{
|
||||
required: true,
|
||||
message: "请输入验证码",
|
||||
trigger: "blur"
|
||||
}],
|
||||
dynacode: [{
|
||||
required: true,
|
||||
message: "请输入短信动态码",
|
||||
trigger: "blur"
|
||||
}]
|
||||
},
|
||||
codeRules: {
|
||||
mobile: [{
|
||||
required: true,
|
||||
validator: isMobile,
|
||||
trigger: "blur"
|
||||
}],
|
||||
vercode: [{
|
||||
required: true,
|
||||
message: "请输入验证码",
|
||||
trigger: "blur"
|
||||
}]
|
||||
},
|
||||
loadingAd: true,
|
||||
adList: [],
|
||||
backgroundColor: '',
|
||||
img: '',
|
||||
third_party: 0,
|
||||
wechatConfigStatus: 0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.ischecked = this.$route.params.third_party;
|
||||
if (this.ischecked) {
|
||||
this.weixinLogin()
|
||||
}
|
||||
this.getAdList()
|
||||
this.getCaptcha()
|
||||
this.getRegisterConfig()
|
||||
this.getIsWechatLogin()
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: '登录-' + this.$store.state.site.siteInfo.site_name
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"dynacodeData.seconds": {
|
||||
handler(newValue, oldValue) {
|
||||
if (newValue == 0) {
|
||||
clearInterval(this.dynacodeData.timer)
|
||||
this.dynacodeData = {
|
||||
seconds: 120,
|
||||
timer: null,
|
||||
codeText: "获取动态码",
|
||||
isSend: false
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getIsWechatLogin() {
|
||||
isWechatLogin().then(res => {
|
||||
if (res.code == 0) {
|
||||
this.wechatConfigStatus = res.data.wechat_config_status;
|
||||
}
|
||||
})
|
||||
},
|
||||
getAdList() {
|
||||
adList({
|
||||
keyword: "NS_PC_LOGIN"
|
||||
}).then(res => {
|
||||
if (res.code == 0 && res.data.adv_list) {
|
||||
this.adList = res.data.adv_list
|
||||
for (let i = 0; i < this.adList.length; i++) {
|
||||
if (this.adList[i].adv_url) this.adList[i].adv_url = JSON.parse(this.adList[i].adv_url)
|
||||
}
|
||||
this.backgroundColor = this.adList[0].background
|
||||
}
|
||||
|
||||
this.loadingAd = false
|
||||
}).catch(err => {
|
||||
this.loadingAd = false
|
||||
})
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
},
|
||||
handleChange(curr, pre) {
|
||||
this.backgroundColor = this.adList[curr].background
|
||||
},
|
||||
/**
|
||||
* 账号登录
|
||||
*/
|
||||
accountLogin(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
var data = {
|
||||
username: this.formData.account,
|
||||
password: this.formData.password
|
||||
}
|
||||
|
||||
if (this.captcha.id != "") {
|
||||
data.captcha_id = this.captcha.id
|
||||
data.captcha_code = this.formData.vercode
|
||||
}
|
||||
|
||||
if (this.formData.checked) {
|
||||
data.autoLoginRange = this.formData.autoLoginRange
|
||||
}
|
||||
|
||||
if (this.isSub) return
|
||||
this.isSub = true
|
||||
|
||||
this.$store
|
||||
.dispatch("member/login", data)
|
||||
.then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.$message({
|
||||
message: "登录成功！",
|
||||
type: "success"
|
||||
})
|
||||
if (this.$route.query.redirect) {
|
||||
const a = this.$route.query.redirect
|
||||
const b = this.$route.query
|
||||
this.$router.push(this.$route.query.redirect)
|
||||
|
||||
} else {
|
||||
this.$router.push({
|
||||
name: "member"
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.isSub = false
|
||||
this.getCaptcha()
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "warning"
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.isSub = false
|
||||
this.$message.error(err.message)
|
||||
this.getCaptcha()
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 手机号登录
|
||||
*/
|
||||
mobileLogin(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
var data = {
|
||||
mobile: this.formData.mobile,
|
||||
key: this.formData.key,
|
||||
code: this.formData.dynacode
|
||||
}
|
||||
|
||||
if (this.captcha.id != "") {
|
||||
data.captcha_id = this.captcha.id
|
||||
data.captcha_code = this.formData.vercode
|
||||
}
|
||||
|
||||
if (this.isSub) return
|
||||
this.isSub = true
|
||||
|
||||
this.$store.dispatch("member/mobile_login", data).then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.$message({
|
||||
message: "登录成功！",
|
||||
type: "success"
|
||||
})
|
||||
if (this.$route.query.redirect) {
|
||||
this.$router.push(this.$route.query.redirect)
|
||||
} else {
|
||||
this.$router.push({
|
||||
name: "member"
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.isSub = false
|
||||
this.getCaptcha()
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "warning"
|
||||
})
|
||||
}
|
||||
}).catch(err => {
|
||||
this.isSub = false
|
||||
this.$message.error(err.message)
|
||||
this.getCaptcha()
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 微信登录
|
||||
*/
|
||||
wechatLogin(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
var data = {
|
||||
mobile: this.formData.mobile,
|
||||
key: this.formData.key,
|
||||
code: this.formData.dynacode
|
||||
}
|
||||
|
||||
if (this.captcha.id != "") {
|
||||
data.captcha_id = this.captcha.id
|
||||
data.captcha_code = this.formData.vercode
|
||||
}
|
||||
|
||||
if (this.isSub) return
|
||||
this.isSub = true
|
||||
|
||||
this.$store.dispatch("wechat/wechatLogin", data).then(res => {
|
||||
|
||||
if (res.code >= 0) {
|
||||
this.$message({
|
||||
message: "登录成功！",
|
||||
type: "success"
|
||||
})
|
||||
if (this.$route.query.redirect) {
|
||||
this.$router.push(this.$route.query.redirect)
|
||||
} else {
|
||||
this.$router.push({
|
||||
name: "member"
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.isSub = false
|
||||
this.getCaptcha()
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "warning"
|
||||
})
|
||||
}
|
||||
}).catch(err => {
|
||||
this.isSub = false
|
||||
this.$message.error(err.message)
|
||||
this.getCaptcha()
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
weixinLogin() {
|
||||
this.ischecked = true;
|
||||
this.$store.dispatch("wechat/loginCode").then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.img = res.data.qrcode;
|
||||
this.wx_key = res.data.key;
|
||||
this.expire_time = res.data.expire_time;
|
||||
this.qrcodeData.timer = setInterval(() => {
|
||||
this.checkLogin()
|
||||
}, 2000);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 检测是否扫码
|
||||
checkLogin() {
|
||||
this.qrcodeData.time += 2;
|
||||
if (this.qrcodeData.time > this.expire_time) {
|
||||
clearInterval(this.qrcodeData.timer);
|
||||
return;
|
||||
}
|
||||
var data = {
|
||||
key: this.wx_key
|
||||
};
|
||||
this.$store.dispatch("wechat/checkLogin", data).then(res => {
|
||||
if (res.code >= 0) {
|
||||
if (res.data.token != undefined) {
|
||||
this.$message({
|
||||
message: "登录成功！",
|
||||
type: "success"
|
||||
})
|
||||
if (this.$route.query.redirect) {
|
||||
this.$router.push(this.$route.query.redirect)
|
||||
} else {
|
||||
this.$router.push({
|
||||
name: "member"
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.ischecked1 = true;
|
||||
}
|
||||
|
||||
clearInterval(this.qrcodeData.timer);
|
||||
}
|
||||
})
|
||||
},
|
||||
closeWx() {
|
||||
this.ischecked = false;
|
||||
},
|
||||
closeWx1() {
|
||||
this.ischecked = false;
|
||||
this.ischecked1 = false;
|
||||
},
|
||||
/**
|
||||
* 获取注册配置
|
||||
*/
|
||||
getRegisterConfig() {
|
||||
registerConfig()
|
||||
.then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.registerConfig = res.data.value
|
||||
if (this.registerConfig.login.indexOf('username') != -1) {
|
||||
this.activeName = 'first';
|
||||
} else {
|
||||
this.activeName = 'second';
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
getCaptcha() {
|
||||
captcha({
|
||||
captcha_id: this.captcha.id
|
||||
}).then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.captcha.id = res.data.id
|
||||
this.captcha.img = res.data.img
|
||||
this.captcha.img = this.captcha.img.replace(/\r\n/g, "")
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$message.error(err.message)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 发送手机动态码
|
||||
*/
|
||||
sendMobileCode(formName) {
|
||||
if (this.dynacodeData.seconds != 120) return
|
||||
this.$refs[formName].clearValidate("dynacode")
|
||||
|
||||
this.$refs[formName].validateField("mobile", valid => {
|
||||
if (valid) {
|
||||
return false
|
||||
}
|
||||
})
|
||||
this.$refs[formName].validateField("vercode", valid => {
|
||||
if (!valid) {
|
||||
mobileCode({
|
||||
mobile: this.formData.mobile,
|
||||
captcha_id: this.captcha.id,
|
||||
captcha_code: this.formData.vercode
|
||||
}).then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.formData.key = res.data.key
|
||||
if (this.dynacodeData.seconds == 120 && this.dynacodeData.timer == null) {
|
||||
this.dynacodeData.timer = setInterval(() => {
|
||||
this.dynacodeData.seconds--
|
||||
this.dynacodeData.codeText = this.dynacodeData.seconds + "s后可重新获取"
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$message.error(err.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 发送微信绑定手机动态码
|
||||
*/
|
||||
sendWechatMobileCode(formName) {
|
||||
if (this.dynacodeData.seconds != 120) return
|
||||
this.$refs[formName].clearValidate("dynacode")
|
||||
|
||||
this.$refs[formName].validateField("mobile", valid => {
|
||||
if (valid) {
|
||||
return false
|
||||
}
|
||||
})
|
||||
this.$refs[formName].validateField("vercode", valid => {
|
||||
if (!valid) {
|
||||
wechatMobileCode({
|
||||
mobile: this.formData.mobile,
|
||||
captcha_id: this.captcha.id,
|
||||
captcha_code: this.formData.vercode
|
||||
}).then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.formData.key = res.data.key
|
||||
if (this.dynacodeData.seconds == 120 && this.dynacodeData.timer == null) {
|
||||
this.dynacodeData.timer = setInterval(() => {
|
||||
this.dynacodeData.seconds--
|
||||
this.dynacodeData.codeText = this.dynacodeData.seconds + "s后可重新获取"
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$message.error(err.message)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
keypress(e) {
|
||||
let that = this;
|
||||
var keycode = e.all ? e.keyCode : e.which;
|
||||
if (keycode == 13) {
|
||||
if (that.activeName == "first") {
|
||||
that.accountLogin('ruleForm'); // 登录方法名
|
||||
} else {
|
||||
that.mobileLogin('mobileRuleForm'); // 登录方法名
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
324
addon/pc/source/os/assets/js/goods/cart.js
Executable file
324
addon/pc/source/os/assets/js/goods/cart.js
Executable file
@@ -0,0 +1,324 @@
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex"
|
||||
import {
|
||||
cartList
|
||||
} from "@/api/goods/cart"
|
||||
|
||||
export default {
|
||||
data: () => {
|
||||
return {
|
||||
cartList: [], // 购物车
|
||||
checkAll: false,
|
||||
totalPrice: "0.00",
|
||||
totalCount: 0,
|
||||
invalidGoods: [], // 失效商品集合
|
||||
loading: true,
|
||||
modifyNum: 1, // 防止数量跳动
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCartList()
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["defaultGoodsImage"])
|
||||
},
|
||||
middleware: 'auth',
|
||||
methods: {
|
||||
// 获取购物车数据
|
||||
getCartList() {
|
||||
cartList({}).then(res => {
|
||||
if (res.code >= 0 && res.data.length) {
|
||||
this.handleCartList(res.data)
|
||||
}
|
||||
this.loading = false
|
||||
}).catch(res => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 处理购物车数据结构
|
||||
handleCartList(data) {
|
||||
this.invalidGoods = []
|
||||
this.cartList = []
|
||||
var temp = {}
|
||||
data.forEach((item, index) => {
|
||||
if (item.goods_state == 1) {
|
||||
item.checked = true
|
||||
if (temp["site_" + item.site_id] != undefined) {
|
||||
temp["site_" + item.site_id].cartList.push(item)
|
||||
} else {
|
||||
temp["site_" + item.site_id] = {
|
||||
siteId: item.site_id,
|
||||
siteName: item.site_name,
|
||||
checked: true,
|
||||
cartList: [item]
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.invalidGoods.push(item)
|
||||
}
|
||||
})
|
||||
|
||||
this.invalidGoods.forEach(v => {
|
||||
if (v.sku_spec_format) {
|
||||
v.sku_spec_format = JSON.parse(v.sku_spec_format)
|
||||
} else {
|
||||
v.sku_spec_format = []
|
||||
}
|
||||
})
|
||||
Object.keys(temp).forEach(key => {
|
||||
this.cartList.push(temp[key])
|
||||
})
|
||||
this.calculationTotalPrice()
|
||||
this.cartList.forEach(v => {
|
||||
v.cartList.forEach(k => {
|
||||
if (k.sku_spec_format) {
|
||||
k.sku_spec_format = JSON.parse(k.sku_spec_format)
|
||||
} else {
|
||||
k.sku_spec_format = []
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 单选
|
||||
singleElection(siteIndex, index) {
|
||||
this.calculationTotalPrice()
|
||||
},
|
||||
// 店铺全选
|
||||
siteAllElection(index) {
|
||||
this.cartList[index].cartList.forEach(item => {
|
||||
item.checked = this.cartList[index].checked
|
||||
})
|
||||
this.calculationTotalPrice()
|
||||
},
|
||||
// 全选
|
||||
allElection() {
|
||||
if (this.cartList.length) {
|
||||
this.cartList.forEach(siteItem => {
|
||||
siteItem.checked = this.checkAll
|
||||
siteItem.cartList.forEach(item => {
|
||||
item.checked = this.checkAll
|
||||
})
|
||||
})
|
||||
}
|
||||
this.calculationTotalPrice()
|
||||
},
|
||||
// 计算购物车总价
|
||||
calculationTotalPrice() {
|
||||
if (this.cartList.length) {
|
||||
let totalPrice = 0,
|
||||
totalCount = 0,
|
||||
siteAllElectionCount = 0
|
||||
|
||||
this.cartList.forEach(siteItem => {
|
||||
let siteGoodsCount = 0
|
||||
siteItem.cartList.forEach(item => {
|
||||
if (item.checked) {
|
||||
siteGoodsCount += 1
|
||||
totalCount += 1
|
||||
totalPrice += item.discount_price * item.num
|
||||
}
|
||||
})
|
||||
if (siteItem.cartList.length == siteGoodsCount) {
|
||||
siteItem.checked = true
|
||||
siteAllElectionCount += 1
|
||||
} else {
|
||||
siteItem.checked = false
|
||||
}
|
||||
})
|
||||
this.totalPrice = totalPrice.toFixed(2)
|
||||
this.totalCount = totalCount
|
||||
this.checkAll = this.cartList.length == siteAllElectionCount
|
||||
} else {
|
||||
this.totalPrice = "0.00"
|
||||
this.totalCount = 0
|
||||
}
|
||||
this.modifyNum = 1;
|
||||
},
|
||||
// 删除单个
|
||||
deleteCart(siteIndex, cartIndex) {
|
||||
this.$confirm("确定要删除该商品吗？", "提示信息", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.$store.dispatch("cart/delete_cart", {
|
||||
cart_id: this.cartList[siteIndex].cartList[cartIndex].cart_id.toString()
|
||||
}).then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.cartList[siteIndex].cartList.splice(cartIndex, 1)
|
||||
if (this.cartList[siteIndex].cartList.length == 0) this.cartList.splice(siteIndex, 1)
|
||||
this.calculationTotalPrice()
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "warning"
|
||||
})
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$message.error(err.message)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 删除选择的购物车
|
||||
deleteCartSelected() {
|
||||
var cartIds = []
|
||||
var selectedItem = []
|
||||
this.cartList.forEach((siteItem, siteIndex) => {
|
||||
siteItem.cartList.forEach((item, cartIndex) => {
|
||||
if (item.checked) {
|
||||
cartIds.push(item.cart_id)
|
||||
selectedItem.push({
|
||||
siteIndex: siteIndex,
|
||||
cartIndex: cartIndex,
|
||||
siteId: siteItem.siteId,
|
||||
cartId: item.cart_id
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
if (cartIds.length == 0) {
|
||||
this.$message({
|
||||
message: "请选择要删除的商品",
|
||||
type: "warning"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.$confirm("确定要删除选择的商品吗？", "提示信息", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.$store.dispatch("cart/delete_cart", {
|
||||
cart_id: cartIds.toString()
|
||||
}).then(res => {
|
||||
if (res.code >= 0) {
|
||||
selectedItem.forEach(selectedItem => {
|
||||
this.cartList.forEach((siteItem, siteIndex) => {
|
||||
siteItem.cartList.forEach((item, cartIndex) => {
|
||||
if (selectedItem.cartId == item.cart_id) {
|
||||
siteItem.cartList.splice(cartIndex, 1)
|
||||
}
|
||||
if (siteItem.cartList.length == 0) {
|
||||
this.cartList.splice(siteIndex, 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
this.calculationTotalPrice()
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "warning"
|
||||
})
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$message.error(err.message)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 清空失效商品
|
||||
clearInvalidGoods() {
|
||||
this.$confirm("确认要清空这些商品吗？", "提示信息", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
var cartIds = []
|
||||
this.invalidGoods.forEach(goodsItem => {
|
||||
cartIds.push(goodsItem.cart_id)
|
||||
})
|
||||
if (cartIds.length) {
|
||||
this.$store.dispatch("cart/delete_cart", {
|
||||
cart_id: cartIds.toString()
|
||||
}).then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.invalidGoods = []
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功"
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "warning"
|
||||
})
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$message.error(err.message)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 变更购物车数量
|
||||
cartNumChange(num, params) {
|
||||
if (num < 1 || !num) num = 1;
|
||||
|
||||
// 防止数量跳动
|
||||
this.modifyNum = 0;
|
||||
this.$store.dispatch("cart/edit_cart_num", {
|
||||
num,
|
||||
cart_id: this.cartList[params.siteIndex].cartList[params.cartIndex].cart_id
|
||||
}).then(res => {
|
||||
if (res.code >= 0) {
|
||||
this.cartList[params.siteIndex].cartList[params.cartIndex].num = num;
|
||||
this.calculationTotalPrice();
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "warning"
|
||||
});
|
||||
this.modifyNum = 1;
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$message.error(err.message);
|
||||
this.modifyNum = 1;
|
||||
})
|
||||
},
|
||||
// 结算
|
||||
settlement() {
|
||||
if (this.totalCount > 0) {
|
||||
let cart_ids = []
|
||||
this.cartList.forEach(siteItem => {
|
||||
siteItem.cartList.forEach(item => {
|
||||
if (item.checked) {
|
||||
cart_ids.push(item.cart_id)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
if (cart_ids.length > 100) {
|
||||
this.$message({
|
||||
message: '购物车最多支持100个商品一起购买',
|
||||
type: "warning"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
var data = {
|
||||
cart_ids: cart_ids.toString()
|
||||
}
|
||||
this.$store.dispatch("order/setOrderCreateData", data)
|
||||
this.$router.push({
|
||||
path: "/order/payment"
|
||||
})
|
||||
}
|
||||
},
|
||||
imageError(siteIndex, cartIndex) {
|
||||
this.cartList[siteIndex].cartList[cartIndex].sku_image = this.defaultGoodsImage
|
||||
},
|
||||
imageErrorInvalid(index) {
|
||||
this.invalidGoods[index].sku_image = this.defaultGoodsImage
|
||||
}
|
||||
}
|
||||
}
|
||||
1090
addon/pc/source/os/assets/js/goods/detail.js
Executable file
1090
addon/pc/source/os/assets/js/goods/detail.js
Executable file
File diff suppressed because it is too large
Load Diff
258
addon/pc/source/os/assets/js/goods/list.js
Executable file
258
addon/pc/source/os/assets/js/goods/list.js
Executable file
@@ -0,0 +1,258 @@
|
||||
import {
|
||||
goodsSkuPage,
|
||||
brandPage
|
||||
} from "@/api/goods/goods"
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex"
|
||||
import {
|
||||
goodsCategoryInfo,
|
||||
goodsCategoryList
|
||||
} from "@/api/goods/goodscategory"
|
||||
|
||||
export default {
|
||||
data: () => {
|
||||
return {
|
||||
goodsList: [],
|
||||
total: 0,
|
||||
keyword: "",
|
||||
catewords: '',
|
||||
currentPage: 1,
|
||||
pageSize: 25,
|
||||
is_free_shipping: 0,
|
||||
filters: {
|
||||
category_id: 0,
|
||||
category_level: 0,
|
||||
brand_id: 0,
|
||||
min_price: "",
|
||||
max_price: "",
|
||||
order: "",
|
||||
sort: "desc",
|
||||
coupon: 0
|
||||
},
|
||||
loading: true,
|
||||
first_index: 0,
|
||||
categoryList: [],
|
||||
selectCategoryId: 0,
|
||||
// 全部商品分类链接
|
||||
categoryAll: {
|
||||
id: 0,
|
||||
level: 0,
|
||||
isAllow: true // 是否允许选中
|
||||
},
|
||||
|
||||
brandList: [], // 品牌列表
|
||||
brandInitialList: [],
|
||||
currentInitial: "", // 当前选择品牌分区
|
||||
choosedBrand: "", // 已选择的品牌,
|
||||
isShowMoreBrand: false // 是否展开更多品牌
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.keyword = this.$route.query.keyword || ""
|
||||
if (this.$route.query.keyword && process.client) window.document.title = `${this.$route.query.keyword} - ${this.siteInfo.site_name}`
|
||||
|
||||
this.filters.category_id = this.$route.query.category_id || ""
|
||||
this.filters.category_level = this.$route.query.level || ""
|
||||
this.filters.brand_id = this.$route.query.brand_id || ""
|
||||
this.filters.coupon = this.$route.query.coupon || 0
|
||||
|
||||
this.getBrandList();
|
||||
this.getGoodsList();
|
||||
|
||||
if (this.$route.query.category_id && this.$route.query.category_id > 0) {
|
||||
this.categorySearch();
|
||||
} else {
|
||||
// 查询一级商品分类
|
||||
this.getGoodsCategoryList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
salesArrowDirection() {
|
||||
let className = this.filters.order === 'sale_num' && this.filters.sort === 'desc' ? 'arrow-down' : 'arrow-up';
|
||||
return className;
|
||||
},
|
||||
priceArrowDirection() {
|
||||
let className = this.filters.order === 'discount_price' && this.filters.sort === 'desc' ? 'arrow-down' :
|
||||
'arrow-up';
|
||||
return className;
|
||||
},
|
||||
...mapGetters(["defaultGoodsImage", "siteInfo"])
|
||||
},
|
||||
methods: {
|
||||
// 商品分类搜索
|
||||
categorySearch() {
|
||||
goodsCategoryInfo({
|
||||
category_id: this.filters.category_id
|
||||
}).then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
let data = res.data;
|
||||
this.catewords = data.category_full_name;
|
||||
this.first_index = data.category_id_1;
|
||||
this.categoryList = data.child_list;
|
||||
this.selectCategoryId = this.filters.category_id;
|
||||
|
||||
// 设置全部的链接地址
|
||||
switch (data.level) {
|
||||
case 1:
|
||||
this.categoryAll.level = 1;
|
||||
this.categoryAll.id = data.category_id_1;
|
||||
this.categoryAll.isAllow = true;
|
||||
break;
|
||||
case 2:
|
||||
this.categoryAll.level = 1;
|
||||
this.categoryAll.id = data.category_id_1;
|
||||
this.categoryAll.isAllow = true;
|
||||
if (this.categoryList[0].level == 3) {
|
||||
this.categoryAll.level = 2;
|
||||
this.categoryAll.id = data.category_id_2;
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
this.categoryAll.level = 2;
|
||||
this.categoryAll.id = data.category_id_2;
|
||||
this.categoryAll.isAllow = false;
|
||||
break;
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.categoryList.length; i++) {
|
||||
let item = this.categoryList[i];
|
||||
if (item.category_id == this.categoryAll.id) {
|
||||
this.categoryAll.id = 0;
|
||||
this.categoryAll.isAllow = false; // 匹配到了分类，禁止选中 全部
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (process.client) window.document.title = `${data.category_name} - ${this.siteInfo.site_name}`
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 一级商品分类列表
|
||||
getGoodsCategoryList() {
|
||||
goodsCategoryList({}).then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
// 设置全部的链接地址
|
||||
this.categoryAll.level = 1;
|
||||
this.categoryAll.id = 0;
|
||||
this.categoryAll.isAllow = true;
|
||||
this.categoryList = res.data;
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
getGoodsList() {
|
||||
const params = {
|
||||
page: this.currentPage,
|
||||
page_size: this.pageSize,
|
||||
keyword: this.keyword,
|
||||
...this.filters
|
||||
}
|
||||
goodsSkuPage(params || {}).then(res => {
|
||||
const {
|
||||
count,
|
||||
page_count,
|
||||
list
|
||||
} = res.data
|
||||
this.total = count
|
||||
this.goodsList = list
|
||||
this.loading = false
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handlePageSizeChange(size) {
|
||||
this.pageSize = size
|
||||
this.getGoodsList()
|
||||
},
|
||||
handleCurrentPageChange(page) {
|
||||
this.currentPage = page
|
||||
this.getGoodsList()
|
||||
},
|
||||
handlePriceRange() {
|
||||
if (Number(this.filters.min_price) > Number(this.filters.max_price)) {
|
||||
// es6解构赋值
|
||||
[this.filters.min_price, this.filters.max_price] = [this.filters.max_price, this.filters.min_price]
|
||||
}
|
||||
this.getGoodsList()
|
||||
},
|
||||
changeSort(type) {
|
||||
if (this.filters.order === type) {
|
||||
this.$set(this.filters, "sort", this.filters.sort === "desc" ? "asc" : "desc")
|
||||
} else {
|
||||
this.$set(this.filters, "order", type)
|
||||
this.$set(this.filters, "sort", "desc")
|
||||
}
|
||||
|
||||
this.getGoodsList()
|
||||
},
|
||||
getBrandList() {
|
||||
brandPage({
|
||||
page: 1,
|
||||
page_size: 0
|
||||
}).then(res => {
|
||||
if (res.code >= 0 && res.data) {
|
||||
this.brandList = res.data.list;
|
||||
if (this.filters.brand_id) {
|
||||
for (var i = 0; i < this.brandList.length; i++) {
|
||||
if (this.brandList[i].brand_id == this.filters.brand_id) {
|
||||
this.choosedBrand = this.brandList[i];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleChangeInitial(initial) {
|
||||
this.currentInitial = initial
|
||||
},
|
||||
onChooseBrand(brand) {
|
||||
this.choosedBrand = brand
|
||||
this.filters.brand_id = brand.brand_id
|
||||
this.getGoodsList()
|
||||
},
|
||||
closeBrand() {
|
||||
this.choosedBrand = ""
|
||||
this.filters.brand_id = ""
|
||||
this.getGoodsList()
|
||||
},
|
||||
showPrice(data) {
|
||||
let price = data.discount_price;
|
||||
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
|
||||
return price;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
is_free_shipping: function (val) {
|
||||
this.filters.is_free_shipping = val ? 1 : ""
|
||||
this.getGoodsList()
|
||||
},
|
||||
$route: function (curr) {
|
||||
this.currentPage = 1
|
||||
if (curr.query.keyword && process.client) window.document.title = `${curr.query.keyword} - ${this.siteInfo.site_name}`
|
||||
|
||||
if (curr.query.level && curr.query.category_id > 0) {
|
||||
this.filters.category_level = curr.query.level
|
||||
this.filters.category_id = curr.query.category_id
|
||||
this.getGoodsList()
|
||||
this.categorySearch()
|
||||
} else {
|
||||
this.getGoodsCategoryList();
|
||||
this.first_index = 0
|
||||
this.selectCategoryId = 0
|
||||
if (process.client) window.document.title = `${this.siteInfo.site_name}`
|
||||
}
|
||||
|
||||
if (curr.query.category_id == undefined || curr.query.category_id == 0) {
|
||||
this.catewords = ""
|
||||
this.keyword = curr.query.keyword
|
||||
this.filters.category_id = curr.query.category_id || ""
|
||||
this.filters.category_level = curr.query.level || ""
|
||||
this.filters.brand_id = curr.query.brand_id || ""
|
||||
this.getGoodsList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
284
addon/pc/source/os/assets/js/index/index.js
Executable file
284
addon/pc/source/os/assets/js/index/index.js
Executable file
@@ -0,0 +1,284 @@
|
||||
import {
|
||||
adList
|
||||
} from "@/api/website"
|
||||
import {
|
||||
noticesList
|
||||
} from "@/api/cms/notice"
|
||||
import {
|
||||
floors,
|
||||
floatLayer,
|
||||
apiDefaultSearchWords
|
||||
} from "@/api/pc"
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex"
|
||||
import {
|
||||
goodsPage,
|
||||
timeList
|
||||
} from "@/api/seckill"
|
||||
import CountDown from "vue2-countdown"
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {
|
||||
CountDown
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
loadingAd: true,
|
||||
loadingFloor: true,
|
||||
adList: [],
|
||||
adLeftList: [],
|
||||
adRightList: [],
|
||||
adCenterList: [],
|
||||
floorList: [],
|
||||
floatLayer: {
|
||||
is_show: false,
|
||||
link: {
|
||||
url: ""
|
||||
}
|
||||
},
|
||||
isSub: false,
|
||||
siteId: 0,
|
||||
listData: [],
|
||||
seckillTimeMachine: {
|
||||
currentTime: 0,
|
||||
startTime: 0,
|
||||
endTime: 0
|
||||
},
|
||||
seckillText: "距离结束",
|
||||
backgroundColor: "", // 顶部banner背景颜色
|
||||
keyword: "",
|
||||
defaultSearchWords: "",
|
||||
isShow: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
addonIsExit: {
|
||||
handler: function () {
|
||||
if (this.addonIsExit && this.addonIsExit.seckill == 1) {
|
||||
this.getTimeList()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getAdList()
|
||||
this.getBigAdList()
|
||||
this.getSmallAdList()
|
||||
this.getCategoryBelowList()
|
||||
this.getFloors()
|
||||
this.getFloatLayer()
|
||||
if (this.addonIsExit && this.addonIsExit.seckill == 1) {
|
||||
this.getTimeList()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("scroll", this.handleScroll)
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["defaultHeadImage", "addonIsExit", "defaultGoodsImage", "member", "siteInfo", "cartCount"]),
|
||||
optionLeft() {
|
||||
return {
|
||||
direction: 2,
|
||||
limitMoveNum: 2
|
||||
}
|
||||
},
|
||||
indexFloatLayerNum() {
|
||||
let num = localStorage.getItem('indexFloatLayerNum') || 0;
|
||||
return parseInt(num);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
countDownS_cb() {
|
||||
},
|
||||
countDownE_cb() {
|
||||
this.seckillText = "活动已结束"
|
||||
},
|
||||
getAdList() {
|
||||
adList({
|
||||
keyword: "NS_PC_INDEX"
|
||||
}).then(res => {
|
||||
this.adList = res.data.adv_list
|
||||
this.$store.dispatch("app/is_show", {
|
||||
is_show: this.adList.length
|
||||
}).then(res => {
|
||||
})
|
||||
for (let i = 0; i < this.adList.length; i++) {
|
||||
if (this.adList[i].adv_url) this.adList[i].adv_url = JSON.parse(this.adList[i].adv_url)
|
||||
}
|
||||
this.backgroundColor = this.adList[0].background
|
||||
this.loadingAd = false
|
||||
}).catch(err => {
|
||||
this.loadingAd = false
|
||||
})
|
||||
},
|
||||
handleChange(curr, pre) {
|
||||
this.backgroundColor = this.adList[curr].background
|
||||
},
|
||||
/**
|
||||
* 广告位大图
|
||||
*/
|
||||
getBigAdList() {
|
||||
adList({
|
||||
keyword: "NS_PC_INDEX_MID_LEFT"
|
||||
}).then(res => {
|
||||
this.adLeftList = res.data.adv_list
|
||||
for (let i = 0; i < this.adLeftList.length; i++) {
|
||||
if (this.adLeftList[i].adv_url) this.adLeftList[i].adv_url = JSON.parse(this.adLeftList[i].adv_url)
|
||||
}
|
||||
this.loadingAd = false
|
||||
}).catch(err => {
|
||||
this.loadingAd = false
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 广告位小图
|
||||
*/
|
||||
getSmallAdList() {
|
||||
adList({
|
||||
keyword: "NS_PC_INDEX_MID_RIGHT"
|
||||
}).then(res => {
|
||||
this.adRightList = res.data.adv_list
|
||||
for (let i = 0; i < this.adRightList.length; i++) {
|
||||
if (this.adRightList[i].adv_url) this.adRightList[i].adv_url = JSON.parse(this.adRightList[i].adv_url)
|
||||
}
|
||||
this.loadingAd = false
|
||||
}).catch(err => {
|
||||
this.loadingAd = false
|
||||
})
|
||||
},
|
||||
getCategoryBelowList() {
|
||||
adList({
|
||||
keyword: "NS_PC_INDEX_CATEGORY_BELOW"
|
||||
}).then(res => {
|
||||
this.adCenterList = res.data.adv_list
|
||||
for (let i = 0; i < this.adCenterList.length; i++) {
|
||||
if (this.adCenterList[i].adv_url) this.adCenterList[i].adv_url = JSON.parse(this.adCenterList[i].adv_url)
|
||||
}
|
||||
this.loadingAd = false
|
||||
}).catch(err => {
|
||||
this.loadingAd = false
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 限时秒杀
|
||||
*/
|
||||
getTimeList() {
|
||||
timeList().then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
let time = new Date(res.timestamp * 1000)
|
||||
let currentTimes = time.getHours() * 60 * 60 + time.getMinutes() * 60 + time.getSeconds()
|
||||
|
||||
res.data.list.forEach((v, k) => {
|
||||
if (v.seckill_start_time <= currentTimes && currentTimes < v.seckill_end_time) {
|
||||
let seckillId = v.id
|
||||
this.getGoodsList(seckillId)
|
||||
|
||||
let endTime = parseInt(time.getTime() / 1000) + (v.seckill_end_time - currentTimes)
|
||||
this.seckillTimeMachine = {
|
||||
currentTime: res.timestamp,
|
||||
startTime: res.timestamp,
|
||||
endTime: endTime
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 秒杀商品
|
||||
*/
|
||||
getGoodsList(id) {
|
||||
goodsPage({
|
||||
page_size: 0,
|
||||
seckill_time_id: id,
|
||||
site_id: this.siteId
|
||||
}).then(res => {
|
||||
if (res.code == 0 && res.data.list) {
|
||||
this.listData = res.data.list
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 图片加载失败
|
||||
*/
|
||||
imageError(index) {
|
||||
this.listData[index].sku_image = this.defaultGoodsImage
|
||||
},
|
||||
/**
|
||||
* 图片加载失败
|
||||
*/
|
||||
adLeftImageError(index) {
|
||||
this.adLeftList[index].adv_image = this.defaultGoodsImage
|
||||
},
|
||||
/**
|
||||
* 图片加载失败
|
||||
*/
|
||||
adRightImageError(index) {
|
||||
this.adRightList[index].adv_image = this.defaultGoodsImage
|
||||
},
|
||||
adCenterImageError(index) {
|
||||
this.adCenterList[index].adv_image = this.defaultGoodsImage
|
||||
},
|
||||
getFloors() {
|
||||
floors().then(res => {
|
||||
this.floorList = res.data;
|
||||
})
|
||||
},
|
||||
getFloatLayer() {
|
||||
floatLayer().then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.floatLayer = res.data
|
||||
if (this.floatLayer.is_show == 1) {
|
||||
this.floatLayer.link = JSON.parse(this.floatLayer.url)
|
||||
// 弹框形式，首次弹出 1，每次弹出 0
|
||||
if (!this.floatLayer.img_url) return
|
||||
if (parseInt(this.floatLayer.number) >= 1) {
|
||||
//缓存计数 == 弹出总数 禁止弹出
|
||||
if (this.indexFloatLayerNum >= parseInt(this.floatLayer.number)) {
|
||||
this.floatLayer.is_show_type = false
|
||||
} else {
|
||||
this.floatLayer.is_show_type = true
|
||||
}
|
||||
} else if (parseInt(this.floatLayer.number) == 0) {
|
||||
this.floatLayer.is_show_type = true
|
||||
}
|
||||
} else {
|
||||
this.floatLayer.is_show_type = false
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
closeFloat() {
|
||||
if (parseInt(this.floatLayer.number) == 0) {
|
||||
this.$store.commit("app/SET_FLOAT_LAYER", 0)
|
||||
} else if (parseInt(this.floatLayer.number) >= 1 && this.indexFloatLayerNum != parseInt(this.floatLayer.number)) {
|
||||
var count_num = this.indexFloatLayerNum + 1;
|
||||
this.$store.commit("app/SET_FLOAT_LAYER", count_num)
|
||||
} else if (this.indexFloatLayerNum == parseInt(this.floatLayer.number)) {
|
||||
this.$store.commit("app/SET_FLOAT_LAYER", this.floatLayer.number)
|
||||
}
|
||||
this.floatLayer.is_show_type = false
|
||||
this.$forceUpdate()
|
||||
// this.$store.commit("app/SET_FLOAT_LAYER", -1)
|
||||
},
|
||||
// 监听滚动条
|
||||
handleScroll() {
|
||||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
|
||||
|
||||
if (scrollTop >= 680) {
|
||||
this.isShow = true
|
||||
} else {
|
||||
this.isShow = false
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
// 离开该页面需要移除这个监听的事件，不然会报错
|
||||
console.log('// 离开该页面需要移除这个监听的事件，不然会报错');
|
||||
window.removeEventListener("scroll", this.handleScroll)
|
||||
}
|
||||
}
|
||||
1293
addon/pc/source/os/assets/js/order/payment.js
Executable file
1293
addon/pc/source/os/assets/js/order/payment.js
Executable file
File diff suppressed because it is too large
Load Diff
822
addon/pc/source/os/assets/js/promotion/detail_groupbuy.js
Executable file
822
addon/pc/source/os/assets/js/promotion/detail_groupbuy.js
Executable file
@@ -0,0 +1,822 @@
|
||||
import {
|
||||
aftersale,
|
||||
modifyClicks,
|
||||
addGoodsbrowse,
|
||||
goodsQrcode
|
||||
} from "@/api/goods/goods"
|
||||
import {
|
||||
goodsCategoryInfo
|
||||
} from "@/api/goods/goodscategory"
|
||||
import {
|
||||
goodsSkuDetail,
|
||||
goodsSkuInfo,
|
||||
evaluateConfig
|
||||
} from "@/api/groupbuy"
|
||||
import {
|
||||
isCollect,
|
||||
addCollect,
|
||||
deleteCollect
|
||||
} from "@/api/goods/goods_collect"
|
||||
import {
|
||||
goodsEvaluateList,
|
||||
goodsEvaluateCount
|
||||
} from "@/api/goods/evaluate"
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex"
|
||||
import CountDown from "vue2-countdown"
|
||||
import {
|
||||
getArea
|
||||
} from "@/api/address"
|
||||
import {
|
||||
shopServiceOpen
|
||||
} from "@/api/website.js"
|
||||
|
||||
export default {
|
||||
data: () => {
|
||||
return {
|
||||
id: 0,
|
||||
skuId: 0,
|
||||
loading: true,
|
||||
|
||||
picZoomUrl: "",
|
||||
thumbPosition: 0,
|
||||
// 是否可以移动
|
||||
moveThumbLeft: false,
|
||||
moveThumbRight: false,
|
||||
|
||||
// 商品详情
|
||||
goodsSkuDetail: {
|
||||
video_url: ""
|
||||
},
|
||||
|
||||
groupbuyText: "距离结束仅剩",
|
||||
groupbuyTimeMachine: {
|
||||
currentTime: 0,
|
||||
startTime: 0,
|
||||
endTime: 0
|
||||
},
|
||||
qrcode: "",
|
||||
specDisabled: false,
|
||||
specBtnRepeat: false, //防止重复
|
||||
btnSwitch: false,
|
||||
|
||||
// 店铺详情
|
||||
shopInfo: {},
|
||||
whetherCollection: 0,
|
||||
score: 0,
|
||||
|
||||
//评价
|
||||
currentPage: 1,
|
||||
pageSize: 25,
|
||||
total: 0,
|
||||
evaluaType: 0,//评价类型
|
||||
evaluteCount: {},//评价数量
|
||||
goodsEvaluateList: [],
|
||||
evaluate_show: false, //是否显示评论
|
||||
service: null,
|
||||
|
||||
number: 1,
|
||||
limitNumber: 0,
|
||||
tabName: "detail",
|
||||
playerOptions: {
|
||||
playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], // 可选的播放速度
|
||||
autoplay: false, // 如果为true,浏览器准备好时开始回放。
|
||||
muted: false, // 默认情况下将会消除任何音频。
|
||||
loop: false, // 是否视频一结束就重新开始。
|
||||
preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
||||
language: "zh-CN",
|
||||
aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
||||
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
||||
sources: [{
|
||||
type: "video/mp4", // 类型
|
||||
src: "" // url地址
|
||||
}],
|
||||
poster: "", // 封面地址
|
||||
notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
||||
controlBar: {
|
||||
timeDivider: true, // 当前时间和持续时间的分隔符
|
||||
durationDisplay: true, // 显示持续时间
|
||||
remainingTimeDisplay: true, // 是否显示剩余时间功能
|
||||
fullscreenToggle: true // 是否显示全屏按钮
|
||||
}
|
||||
},
|
||||
switchMedia: "img",
|
||||
|
||||
// 是否关注店铺
|
||||
hasFollow: false,
|
||||
|
||||
// 客服配置
|
||||
kefuConfig: {
|
||||
system: '',
|
||||
open_pc: '',
|
||||
open_url: ''
|
||||
},
|
||||
|
||||
// 省市区县
|
||||
provinceArr: {},
|
||||
cityArr: {},
|
||||
districtArr: {},
|
||||
|
||||
// 省市区县 id
|
||||
currTabAddres: "province",
|
||||
hideRegion: false,
|
||||
selectedAddress: {},
|
||||
service_list: [], //商品服务
|
||||
serverType: 'disable',
|
||||
serverThird: '',
|
||||
categoryNameArr: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CountDown
|
||||
},
|
||||
created() {
|
||||
this.id = this.$route.params.id;
|
||||
if (this.addonIsExit && this.addonIsExit.groupbuy != 1) {
|
||||
this.$message({
|
||||
message: '团购插件未安装',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$route.push('/');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.getGoodsSkuDetail()
|
||||
this.shopServiceOpen()
|
||||
this.getGoodsEvaluate()
|
||||
this.goodsEvaluCount()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["token", "siteInfo", "defaultHeadImage", "defaultShopImage", "addonIsExit", 'locationRegion'])
|
||||
},
|
||||
watch: {
|
||||
$route(curr) {
|
||||
this.id = curr.query.id
|
||||
if (this.addonIsExit && this.addonIsExit.groupbuy != 1) {
|
||||
this.$message({
|
||||
message: '团购插件未安装',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$route.push('/');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.getGoodsSkuDetail()
|
||||
this.shopServiceOpen()
|
||||
}
|
||||
},
|
||||
addonIsExit() {
|
||||
if (this.addonIsExit.groupbuy != 1) {
|
||||
this.$message({
|
||||
message: '团购插件未安装',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$route.push('/');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
shopServiceOpen() {
|
||||
// todo 暂停使用
|
||||
return;
|
||||
shopServiceOpen().then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.kefuConfig = res.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
tabChange(tab, event) {
|
||||
},
|
||||
bundlingChange(tab, event) {
|
||||
},
|
||||
getGoodsSkuDetail() {
|
||||
goodsSkuDetail({
|
||||
groupbuy_id: this.id
|
||||
}).then(res => {
|
||||
let data = res.data
|
||||
if (data.goods_sku_detail != null) {
|
||||
this.goodsSkuDetail = data.goods_sku_detail
|
||||
let categoryIdArr = data.goods_sku_detail.category_id.split(",")
|
||||
categoryIdArr = categoryIdArr.filter((item) => {
|
||||
return item && item.trim()
|
||||
});
|
||||
this.categorySearch(categoryIdArr[categoryIdArr.length - 1]);
|
||||
// this.shopInfo = data.shop_info
|
||||
this.service_list = data.goods_sku_detail.goods_service
|
||||
|
||||
this.skuId = this.goodsSkuDetail.sku_id
|
||||
this.number = this.goodsSkuDetail.buy_num
|
||||
this.limitNumber = this.goodsSkuDetail.buy_num
|
||||
//团购倒计时
|
||||
if (this.goodsSkuDetail.end_time - res.timestamp > 0) {
|
||||
this.groupbuyTimeMachine = {
|
||||
currentTime: res.timestamp,
|
||||
startTime: res.timestamp,
|
||||
endTime: this.goodsSkuDetail.end_time
|
||||
}
|
||||
} else {
|
||||
|
||||
this.$message({
|
||||
message: '活动已结束',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$router.push("/sku/" + this.goodsSkuDetail.sku_id)
|
||||
}
|
||||
});
|
||||
}
|
||||
if (this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
|
||||
else this.goodsSkuDetail.sku_images = [];
|
||||
|
||||
// 多规格时合并主图
|
||||
if (this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image) {
|
||||
this.goodsSkuDetail.goods_image = this.goodsSkuDetail.goods_image.split(",");
|
||||
this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.concat(this.goodsSkuDetail.goods_image);
|
||||
}
|
||||
|
||||
//媒体
|
||||
if (this.goodsSkuDetail.video_url) {
|
||||
this.switchMedia = "video"
|
||||
this.playerOptions.poster = this.$img(this.goodsSkuDetail.sku_images[0])
|
||||
this.playerOptions.sources[0].src = this.$img(this.goodsSkuDetail.video_url)
|
||||
}
|
||||
|
||||
this.picZoomUrl = this.goodsSkuDetail.sku_images[0]
|
||||
|
||||
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件"
|
||||
|
||||
// 当前商品SKU规格
|
||||
if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format)
|
||||
|
||||
// 商品属性
|
||||
if (this.goodsSkuDetail.goods_attr_format) {
|
||||
let goods_attr_format = JSON.parse(this.goodsSkuDetail.goods_attr_format);
|
||||
this.goodsSkuDetail.goods_attr_format = this.$util.unique(goods_attr_format, "attr_id");
|
||||
for (var i = 0; i < this.goodsSkuDetail.goods_attr_format.length; i++) {
|
||||
for (var j = 0; j < goods_attr_format.length; j++) {
|
||||
if (this.goodsSkuDetail.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id && this.goodsSkuDetail.goods_attr_format[i].attr_value_id != goods_attr_format[j].attr_value_id) {
|
||||
this.goodsSkuDetail.goods_attr_format[i].attr_value_name += "、" + goods_attr_format[j].attr_value_name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品SKU格式
|
||||
if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format)
|
||||
|
||||
window.document.title = `${this.goodsSkuDetail.sku_name} - ${this.siteInfo.site_name}`
|
||||
|
||||
this.loading = false
|
||||
} else {
|
||||
this.$router.push("/")
|
||||
}
|
||||
}).then(res => {
|
||||
if (this.token != "") {
|
||||
this.getWhetherCollection()
|
||||
// this.isFollow()
|
||||
}
|
||||
// this.getAftersale()
|
||||
this.modifyGoodsInfo()
|
||||
this.getGoodsQrcode()
|
||||
this.getEvaluateConfig()
|
||||
this.getAddress('province', null, true);
|
||||
if (!this.locationRegion) {
|
||||
|
||||
this.$store.commit("app/SET_LOCATION_REGION", {
|
||||
"level_1": {
|
||||
"id": 110000,
|
||||
"pid": 0,
|
||||
"name": "北京市",
|
||||
"shortname": "北京",
|
||||
"longitude": "116.40529",
|
||||
"latitude": "39.904987",
|
||||
"level": 1,
|
||||
"sort": 1,
|
||||
"status": 1,
|
||||
"default_data": 1
|
||||
},
|
||||
"level_2": {
|
||||
"id": 110100,
|
||||
"pid": 110000,
|
||||
"name": "北京市",
|
||||
"shortname": "北京",
|
||||
"longitude": "116.40529",
|
||||
"latitude": "39.904987",
|
||||
"level": 2,
|
||||
"sort": 1,
|
||||
"status": 1,
|
||||
"default_data": 1
|
||||
},
|
||||
"level_3": {
|
||||
"id": 110101,
|
||||
"pid": 110100,
|
||||
"name": "东城区",
|
||||
"shortname": "东城",
|
||||
"longitude": "116.418755",
|
||||
"latitude": "39.917545",
|
||||
"level": 3,
|
||||
"sort": 3,
|
||||
"status": 1,
|
||||
"default_data": 1
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.selectedAddress = this.locationRegion;
|
||||
this.provinceId = this.selectedAddress.level_1.id
|
||||
this.getAddress('city', null, true, () => {
|
||||
this.cityId = this.selectedAddress.level_2.id
|
||||
if (this.cityId) this.getAddress('district', null, true)
|
||||
});
|
||||
}).catch(res => {
|
||||
this.loading = false
|
||||
this.$router.push("/")
|
||||
})
|
||||
},
|
||||
categorySearch(category_id) {
|
||||
goodsCategoryInfo({
|
||||
category_id: category_id
|
||||
}).then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.categoryNameArr = [];
|
||||
try {
|
||||
let categoryArr = res.data.category_full_name.split("$_SPLIT_$");
|
||||
categoryArr.forEach((item, index) => {
|
||||
let obj = {};
|
||||
obj.name = item;
|
||||
obj.category_id = res.data["category_id_" + (index + 1)];
|
||||
this.categoryNameArr.push(obj);
|
||||
})
|
||||
} catch (e) {
|
||||
this.categoryNameArr = [];
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
getEvaluateConfig() {
|
||||
evaluateConfig().then(res => {
|
||||
if (res.code == 0) {
|
||||
var data = res.data;
|
||||
this.evaluateConfig = data;
|
||||
if (this.evaluateConfig.evaluate_show == 1) {
|
||||
//商品评论
|
||||
this.evaluate_show = true
|
||||
this.getGoodsEvaluate();
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
service_link() {
|
||||
if (this.token) {
|
||||
this.$refs.servicerMessage.show();
|
||||
} else {
|
||||
this.$message({
|
||||
message: "您还未登录",
|
||||
type: "warning"
|
||||
})
|
||||
}
|
||||
},
|
||||
changeThumbImg(tag) {
|
||||
if (this.goodsSkuDetail.sku_images.length < 4) return
|
||||
let page = this.goodsSkuDetail.sku_images.length % 4 // 可见数量4个
|
||||
let position = 94
|
||||
if (page == 0) page = this.goodsSkuDetail.sku_images.length - 4 // 可见数量4个
|
||||
else if (page != 0 && page != 1 && page < 2) return
|
||||
|
||||
if (tag == "prev") {
|
||||
if (this.thumbPosition != 0 && Math.round(this.thumbPosition, 2) != position) {
|
||||
this.thumbPosition += position
|
||||
// this.moveThumbLeft = true;
|
||||
} else {
|
||||
// this.moveThumbLeft = false;
|
||||
}
|
||||
} else if (tag == "next") {
|
||||
if (Math.round(this.thumbPosition, 2) != -Math.round(position * page, 2)) {
|
||||
this.thumbPosition -= position
|
||||
// this.moveThumbRight = true;
|
||||
} else {
|
||||
// this.moveThumbRight = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
//获取用户是否关注
|
||||
getWhetherCollection() {
|
||||
isCollect({
|
||||
goods_id: this.goodsSkuDetail.goods_id
|
||||
}).then(res => {
|
||||
this.whetherCollection = res.data;
|
||||
})
|
||||
},
|
||||
editCollection() {
|
||||
//未关注添加关注
|
||||
if (this.whetherCollection == 0) {
|
||||
addCollect({
|
||||
sku_id: this.skuId,
|
||||
goods_id: this.goodsSkuDetail.goods_id
|
||||
}).then(res => {
|
||||
var data = res.data
|
||||
if (data > 0) {
|
||||
this.whetherCollection = 1
|
||||
this.goodsSkuDetail.collect_num++
|
||||
}
|
||||
})
|
||||
} else {
|
||||
//已关注取消关注
|
||||
deleteCollect({
|
||||
goods_id: this.goodsSkuDetail.goods_id
|
||||
}).then(res => {
|
||||
var data = res.data
|
||||
if (data > 0) {
|
||||
this.whetherCollection = 0
|
||||
this.goodsSkuDetail.collect_num--
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 售后保障
|
||||
getAftersale() {
|
||||
aftersale({}).then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
let data = res.data.content
|
||||
if (res.data.content) this.service = res.data.content
|
||||
}
|
||||
})
|
||||
},
|
||||
//更新商品信息
|
||||
modifyGoodsInfo() {
|
||||
//更新商品点击量
|
||||
modifyClicks({
|
||||
sku_id: this.skuId,
|
||||
})
|
||||
|
||||
//添加足迹
|
||||
addGoodsbrowse({
|
||||
sku_id: this.skuId,
|
||||
goods_id: this.goodsSkuDetail.goods_id
|
||||
})
|
||||
},
|
||||
// 商品二维码
|
||||
getGoodsQrcode() {
|
||||
goodsQrcode({
|
||||
sku_id: this.skuId
|
||||
}).then(res => {
|
||||
let data = res.data
|
||||
if (data.path.h5.img) this.qrcode = this.$img(data.path.h5.img)
|
||||
})
|
||||
},
|
||||
//商品评价数量
|
||||
goodsEvaluCount() {
|
||||
goodsEvaluateCount({
|
||||
goods_id: this.id
|
||||
}).then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.evaluteCount = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 商品评价列表
|
||||
getGoodsEvaluate() {
|
||||
goodsEvaluateList({
|
||||
page: this.currentPage,
|
||||
page_size: this.pageSize,
|
||||
goods_id: this.id,
|
||||
explain_type: this.evaluaType == 0 ? '' : this.evaluaType
|
||||
}).then(res => {
|
||||
let list = []
|
||||
let msg = res.message
|
||||
if (res.code == 0 && res.data) {
|
||||
list = res.data.list
|
||||
this.total = res.data.count
|
||||
}
|
||||
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
// 1好评2中评3差评
|
||||
if (list[i].explain_type == 1) {
|
||||
list[i].star = 5
|
||||
} else if (list[i].explain_type == 2) {
|
||||
list[i].star = 3
|
||||
} else if (list[i].explain_type == 3) {
|
||||
list[i].star = 1
|
||||
}
|
||||
if (list[i].images) {
|
||||
list[i].images = list[i].images.split(",")
|
||||
list[i].imagesFormat = []
|
||||
for (var k = 0; k < list[i].images.length; k++) {
|
||||
list[i].imagesFormat.push(this.$img(list[i].images[k]))
|
||||
}
|
||||
}
|
||||
|
||||
if (list[i].again_images) {
|
||||
list[i].again_images = list[i].again_images.split(",")
|
||||
list[i].againImagesFormat = []
|
||||
for (var j = 0; j < list[i].again_images.length; j++) {
|
||||
list[i].againImagesFormat.push(this.$img(list[i].again_images[j]))
|
||||
}
|
||||
}
|
||||
if (list[i].is_anonymous == 1) list[i].member_name = list[i].member_name.replace(list[i].member_name.substring(1, list[i].member_name.length - 1), "***")
|
||||
}
|
||||
this.goodsEvaluateList = list
|
||||
})
|
||||
},
|
||||
// 图片加载失败
|
||||
imageErrorEvaluate(index) {
|
||||
this.goodsEvaluateList[index].member_headimg = this.defaultHeadImage
|
||||
},
|
||||
handlePageSizeChange(size) {
|
||||
this.pageSize = size
|
||||
this.getGoodsEvaluate()
|
||||
},
|
||||
handleCurrentPageChange(page) {
|
||||
this.currentPage = page
|
||||
this.getGoodsEvaluate()
|
||||
},
|
||||
changeSpec(skuId, spec_id) {
|
||||
if (this.specDisabled) return
|
||||
this.specBtnRepeat = false
|
||||
this.skuId = skuId
|
||||
// 清空选择
|
||||
for (var i = 0; i < this.goodsSkuDetail.goods_spec_format.length; i++) {
|
||||
var sku = this.goodsSkuDetail.goods_spec_format[i]
|
||||
for (var j = 0; j < sku.value.length; j++) {
|
||||
// 排除当前点击的规格值
|
||||
if (spec_id == this.goodsSkuDetail.goods_spec_format[i].value[j].spec_id) {
|
||||
this.goodsSkuDetail.goods_spec_format[i].value[j].selected = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
goodsSkuInfo({
|
||||
sku_id: this.skuId,
|
||||
id: this.goodsSkuDetail.groupbuy_id
|
||||
}).then(res => {
|
||||
let data = res.data
|
||||
if (data != null) {
|
||||
data.sku_images = data.sku_images.split(",")
|
||||
|
||||
this.picZoomUrl = data.sku_images[0]
|
||||
|
||||
this.playerOptions.poster = this.$img(data.sku_images[0])
|
||||
|
||||
// 当前商品SKU规格
|
||||
if (data.sku_spec_format) data.sku_spec_format = JSON.parse(data.sku_spec_format)
|
||||
|
||||
// 商品SKU格式
|
||||
if (data.goods_spec_format) data.goods_spec_format = JSON.parse(data.goods_spec_format)
|
||||
|
||||
this.keyInput(true)
|
||||
|
||||
//拼团倒计时
|
||||
if (data.end_time - res.timestamp > 0) {
|
||||
this.groupbuyTimeMachine = {
|
||||
currentTime: res.timestamp,
|
||||
startTime: res.timestamp,
|
||||
endTime: data.end_time
|
||||
}
|
||||
} else {
|
||||
this.$message({
|
||||
message: '活动已结束',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$router.push("/sku/" + this.goodsSkuDetail.sku_id)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.specBtnRepeat = false
|
||||
Object.assign(this.goodsSkuDetail, data)
|
||||
} else {
|
||||
this.$router.push("/")
|
||||
}
|
||||
})
|
||||
},
|
||||
changeNum(tag) {
|
||||
if (this.goodsSkuDetail.stock == 0) return
|
||||
|
||||
var stock = this.goodsSkuDetail.stock
|
||||
//最低购买数量
|
||||
var min = this.goodsSkuDetail.buy_num
|
||||
|
||||
if (this.goodsSkuDetail.buy_num > this.goodsSkuDetail.stock) {
|
||||
//限购数量大于库存总数取库存
|
||||
stock = this.goodsSkuDetail.stock
|
||||
} else {
|
||||
stock = this.goodsSkuDetail.stock
|
||||
}
|
||||
|
||||
if (tag == "+") {
|
||||
// 加
|
||||
if (this.number < stock) {
|
||||
this.number++
|
||||
}
|
||||
} else if (tag == "-") {
|
||||
// 减
|
||||
if (this.number > min) {
|
||||
this.number -= 1
|
||||
}
|
||||
}
|
||||
},
|
||||
blur() {
|
||||
let newNumber = parseInt(this.number)
|
||||
this.number = 0
|
||||
setTimeout(() => {
|
||||
this.number = newNumber
|
||||
}, 0)
|
||||
},
|
||||
//输入数量
|
||||
keyInput(flag, callback) {
|
||||
setTimeout(() => {
|
||||
var stock = this.goodsSkuDetail.stock
|
||||
|
||||
// 库存为0
|
||||
if (stock == 0) {
|
||||
this.number = 0
|
||||
return
|
||||
}
|
||||
|
||||
// 防止空
|
||||
if (flag && this.number.length == 0) this.number = 1
|
||||
|
||||
// 防止输入0和负数、非法输入
|
||||
if (flag && (this.number <= 0 || isNaN(this.number))) this.number = 1
|
||||
|
||||
if (this.number < this.goodsSkuDetail.buy_num) {
|
||||
//最低购买数量
|
||||
this.number = this.goodsSkuDetail.buy_num
|
||||
}
|
||||
|
||||
if (flag) this.number = parseInt(this.number)
|
||||
if (callback) callback()
|
||||
}, 0)
|
||||
},
|
||||
// 播放回调
|
||||
onPlayerPlay(player) {
|
||||
},
|
||||
// 暂停回调
|
||||
onPlayerPause(player) {
|
||||
},
|
||||
// 视频播完回调
|
||||
onPlayerEnded(player) {
|
||||
},
|
||||
// DOM元素上的readyState更改导致播放停止
|
||||
onPlayerWaiting(player) {
|
||||
},
|
||||
// 已开始播放回调
|
||||
onPlayerPlaying(player) {
|
||||
},
|
||||
// 当播放器在当前播放位置下载数据时触发
|
||||
onPlayerLoadeddata(player) {
|
||||
},
|
||||
// 当前播放位置发生变化时触发。
|
||||
onPlayerTimeupdate(player) {
|
||||
},
|
||||
//媒体的readyState为HAVE_FUTURE_DATA或更高
|
||||
onPlayerCanplay(player) {
|
||||
},
|
||||
//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
|
||||
onPlayerCanplaythrough(player) {
|
||||
},
|
||||
//播放状态改变回调
|
||||
playerStateChanged(playerCurrentState) {
|
||||
},
|
||||
//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
|
||||
playerReadied(player) {
|
||||
},
|
||||
// 立即购买
|
||||
buyNow() {
|
||||
//纠正数量
|
||||
this.keyInput(true, () => {
|
||||
if (this.goodsSkuDetail.stock == 0) {
|
||||
this.$message({
|
||||
message: "商品已售罄",
|
||||
type: "warning"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (this.number.length == 0 || this.number == 0) {
|
||||
this.$message({
|
||||
message: "购买数量不能为0",
|
||||
type: "warning"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 团购
|
||||
var data = {
|
||||
groupbuy_id: this.goodsSkuDetail.groupbuy_id,
|
||||
sku_id: this.skuId,
|
||||
num: this.number
|
||||
}
|
||||
|
||||
this.$store.dispatch("order/setGroupbuyOrderCreateData", data)
|
||||
this.$router.push({
|
||||
path: "/promotion/groupbuy/payment"
|
||||
})
|
||||
})
|
||||
},
|
||||
countDownS_cb() {
|
||||
},
|
||||
countDownE_cb() {
|
||||
this.groupbuyText = "活动已结束"
|
||||
this.$message({
|
||||
message: '团购活动已结束',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$router.push("/sku/" + this.goodsSkuDetail.sku_id)
|
||||
}
|
||||
});
|
||||
},
|
||||
// 图片加载失败
|
||||
imageErrorSpec(index) {
|
||||
this.goodsSkuDetail.sku_images[index] = this.defaultGoodsImage
|
||||
this.picZoomUrl = this.defaultGoodsImage
|
||||
},
|
||||
/**
|
||||
* 获取地址
|
||||
* @param {Object} type
|
||||
* @param {Object} item
|
||||
* @param {Object} first 是否第一次
|
||||
*/
|
||||
getAddress(type, item, first, callback) {
|
||||
let pid = 0
|
||||
switch (type) {
|
||||
case 'province':
|
||||
//加载省
|
||||
pid = 0
|
||||
break
|
||||
case 'city':
|
||||
//加载市
|
||||
if (item) {
|
||||
this.provinceId = item.id
|
||||
}
|
||||
pid = this.provinceId
|
||||
this.cityArr = {}
|
||||
this.districtArr = {}
|
||||
break
|
||||
case 'district':
|
||||
//加载区县
|
||||
if (item) this.cityId = item.id
|
||||
pid = this.cityId
|
||||
this.districtArr = {}
|
||||
break
|
||||
}
|
||||
if (item) {
|
||||
if (item.level <= 2) {
|
||||
let len = item.level;
|
||||
for (let i = len; i <= 3; i++) {
|
||||
delete this.selectedAddress['level_' + i];
|
||||
}
|
||||
}
|
||||
this.selectedAddress['level_' + item.level] = item;
|
||||
}
|
||||
|
||||
if (!first) this.$store.commit("app/SET_LOCATION_REGION", this.selectedAddress)
|
||||
this.$forceUpdate();
|
||||
if (type == 'community') {
|
||||
this.hideRegion = true;
|
||||
setTimeout(() => {
|
||||
this.hideRegion = false;
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
|
||||
getArea({
|
||||
pid: pid
|
||||
}).then(res => {
|
||||
const {
|
||||
code,
|
||||
data
|
||||
} = res;
|
||||
if (data) {
|
||||
switch (type) {
|
||||
case 'province':
|
||||
//加载省
|
||||
this.provinceArr = data
|
||||
break
|
||||
case 'city':
|
||||
//加载市
|
||||
this.cityArr = data
|
||||
break
|
||||
case 'district':
|
||||
//加载区县
|
||||
this.districtArr = data
|
||||
break
|
||||
}
|
||||
this.currTabAddres = type
|
||||
if (callback) callback();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
823
addon/pc/source/os/assets/js/promotion/detail_seckill.js
Executable file
823
addon/pc/source/os/assets/js/promotion/detail_seckill.js
Executable file
@@ -0,0 +1,823 @@
|
||||
import {
|
||||
aftersale,
|
||||
modifyClicks,
|
||||
addGoodsbrowse,
|
||||
goodsQrcode
|
||||
} from "@/api/goods/goods"
|
||||
import {
|
||||
goodsCategoryInfo
|
||||
} from "@/api/goods/goodscategory"
|
||||
import {
|
||||
seckillGoodsInfo,
|
||||
goodsSkuDetail,
|
||||
evaluateConfig
|
||||
} from "@/api/seckill"
|
||||
import {
|
||||
isCollect,
|
||||
addCollect,
|
||||
deleteCollect
|
||||
} from "@/api/goods/goods_collect"
|
||||
import {
|
||||
goodsEvaluateList,
|
||||
goodsEvaluateCount
|
||||
} from "@/api/goods/evaluate"
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex"
|
||||
import CountDown from "vue2-countdown"
|
||||
import {
|
||||
getArea
|
||||
} from "@/api/address"
|
||||
import {
|
||||
shopServiceOpen
|
||||
} from "@/api/website.js"
|
||||
|
||||
export default {
|
||||
data: () => {
|
||||
return {
|
||||
id: 0,
|
||||
skuId: 0,
|
||||
loading: true,
|
||||
|
||||
picZoomUrl: "",
|
||||
thumbPosition: 0,
|
||||
// 是否可以移动
|
||||
moveThumbLeft: false,
|
||||
moveThumbRight: false,
|
||||
|
||||
// 商品详情
|
||||
goodsSkuDetail: {
|
||||
video_url: ""
|
||||
},
|
||||
|
||||
seckillText: "距离结束仅剩",
|
||||
seckillTimeMachine: {
|
||||
currentTime: 0,
|
||||
startTime: 0,
|
||||
endTime: 0
|
||||
},
|
||||
qrcode: "",
|
||||
specBtnRepeat: false, //防止重复
|
||||
|
||||
// 店铺详情
|
||||
shopInfo: {},
|
||||
whetherCollection: 0,
|
||||
score: 0,
|
||||
|
||||
//评价
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
evaluaType: 0,//评价类型
|
||||
evaluteCount: {},//评价数量
|
||||
goodsEvaluateList: [],
|
||||
evaluate_show: false, //是否显示评论
|
||||
service: null,
|
||||
|
||||
number: 1,
|
||||
tabName: "detail",
|
||||
playerOptions: {
|
||||
playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], // 可选的播放速度
|
||||
autoplay: false, // 如果为true,浏览器准备好时开始回放。
|
||||
muted: false, // 默认情况下将会消除任何音频。
|
||||
loop: false, // 是否视频一结束就重新开始。
|
||||
preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
||||
language: "zh-CN",
|
||||
aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
||||
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
||||
sources: [{
|
||||
type: "video/mp4", // 类型
|
||||
src: "" // url地址
|
||||
}],
|
||||
poster: "", // 封面地址
|
||||
notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
||||
controlBar: {
|
||||
timeDivider: true, // 当前时间和持续时间的分隔符
|
||||
durationDisplay: true, // 显示持续时间
|
||||
remainingTimeDisplay: true, // 是否显示剩余时间功能
|
||||
fullscreenToggle: true // 是否显示全屏按钮
|
||||
}
|
||||
},
|
||||
switchMedia: "img",
|
||||
|
||||
// 是否关注店铺
|
||||
hasFollow: false,
|
||||
// 客服配置
|
||||
kefuConfig: {
|
||||
system: '',
|
||||
open_pc: '',
|
||||
open_url: ''
|
||||
},
|
||||
|
||||
// 省市区县
|
||||
provinceArr: {},
|
||||
cityArr: {},
|
||||
districtArr: {},
|
||||
|
||||
// 省市区县 id
|
||||
currTabAddres: "province",
|
||||
hideRegion: false,
|
||||
selectedAddress: {},
|
||||
service_list: [],
|
||||
serverType: 'disable',
|
||||
serverThird: '',
|
||||
categoryNameArr: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CountDown
|
||||
},
|
||||
created() {
|
||||
this.id = this.$route.params.id;
|
||||
if (this.addonIsExit && this.addonIsExit.seckill != 1) {
|
||||
this.$message({
|
||||
message: '秒杀插件未安装',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$route.push('/');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.getGoodsSkuDetail()
|
||||
this.getGoodsEvaluate()
|
||||
this.goodsEvaluCount()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["token", "siteInfo", "defaultHeadImage", "defaultShopImage", "addonIsExit", 'locationRegion'])
|
||||
},
|
||||
watch: {
|
||||
$route(curr) {
|
||||
this.id = curr.query.id
|
||||
if (this.addonIsExit && this.addonIsExit.seckill == 1) {
|
||||
this.getGoodsSkuDetail()
|
||||
this.shopServiceOpen()
|
||||
} else {
|
||||
this.$message({
|
||||
message: '秒杀插件未安装',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$route.push('/');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
addonIsExit() {
|
||||
if (this.addonIsExit.seckill != 1) {
|
||||
this.$message({
|
||||
message: '秒杀插件未安装',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$route.push('/');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.shopServiceOpen()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
shopServiceOpen() {
|
||||
// todo 暂停使用
|
||||
return;
|
||||
shopServiceOpen().then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.kefuConfig = res.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
tabChange(tab, event) {
|
||||
},
|
||||
bundlingChange(tab, event) {
|
||||
},
|
||||
getGoodsSkuDetail() {
|
||||
goodsSkuDetail({
|
||||
seckill_id: this.id
|
||||
}).then(res => {
|
||||
let data = res.data
|
||||
if (data.goods_sku_detail != null) {
|
||||
this.goodsSkuDetail = data.goods_sku_detail
|
||||
let categoryIdArr = data.goods_sku_detail.category_id.split(",")
|
||||
categoryIdArr = categoryIdArr.filter((item) => {
|
||||
return item && item.trim()
|
||||
});
|
||||
this.categorySearch(categoryIdArr[categoryIdArr.length - 1]);
|
||||
// this.shopInfo = data.shop_info
|
||||
// let num = (Number(this.shopInfo.shop_desccredit) + Number(this.shopInfo.shop_servicecredit) + Number(this.shopInfo
|
||||
// .shop_deliverycredit)) / 3
|
||||
// this.score = Number(num.toFixed(1));
|
||||
this.service_list = data.goods_sku_detail.goods_service
|
||||
|
||||
this.skuId = this.goodsSkuDetail.sku_id
|
||||
|
||||
//秒杀倒计时
|
||||
let time = new Date(res.timestamp * 1000)
|
||||
let currentTime = time.getHours() * 60 * 60 + time.getMinutes() * 60 + time.getSeconds()
|
||||
if (this.goodsSkuDetail.seckill_start_time <= currentTime && currentTime < this.goodsSkuDetail.seckill_end_time) {
|
||||
let endTime = parseInt(time.getTime() / 1000) + (this.goodsSkuDetail.seckill_end_time - currentTime)
|
||||
this.seckillTimeMachine = {
|
||||
currentTime: res.timestamp,
|
||||
startTime: res.timestamp,
|
||||
endTime: endTime
|
||||
}
|
||||
} else if (this.goodsSkuDetail.seckill_start_time > currentTime && currentTime < this.goodsSkuDetail.seckill_end_time) {
|
||||
this.$message({
|
||||
message: '限时秒杀活动还未开始',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$router.push("/sku/" + this.goodsSkuDetail.sku_id)
|
||||
}
|
||||
});
|
||||
} else if (currentTime < this.goodsSkuDetail.seckill_start_time && currentTime > this.goodsSkuDetail.seckill_end_time) {
|
||||
this.$message({
|
||||
message: '限时秒杀活动已结束',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$router.push("/sku/" + this.goodsSkuDetail.sku_id)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
|
||||
else this.goodsSkuDetail.sku_images = [];
|
||||
|
||||
// 多规格时合并主图
|
||||
if (this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image) {
|
||||
this.goodsSkuDetail.goods_image = this.goodsSkuDetail.goods_image.split(",");
|
||||
this.master_img = this.goodsSkuDetail.goods_image
|
||||
this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.concat(this.goodsSkuDetail.goods_image);
|
||||
}
|
||||
|
||||
//媒体
|
||||
if (this.goodsSkuDetail.video_url) {
|
||||
this.switchMedia = "video"
|
||||
this.playerOptions.poster = this.$img(this.goodsSkuDetail.sku_images[0])
|
||||
this.playerOptions.sources[0].src = this.$img(this.goodsSkuDetail.video_url)
|
||||
}
|
||||
|
||||
this.picZoomUrl = this.goodsSkuDetail.sku_images[0]
|
||||
|
||||
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件"
|
||||
|
||||
// 当前商品SKU规格
|
||||
if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format)
|
||||
|
||||
// 商品属性
|
||||
if (this.goodsSkuDetail.goods_attr_format) {
|
||||
let goods_attr_format = JSON.parse(this.goodsSkuDetail.goods_attr_format);
|
||||
this.goodsSkuDetail.goods_attr_format = this.$util.unique(goods_attr_format, "attr_id");
|
||||
for (var i = 0; i < this.goodsSkuDetail.goods_attr_format.length; i++) {
|
||||
for (var j = 0; j < goods_attr_format.length; j++) {
|
||||
if (this.goodsSkuDetail.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id && this.goodsSkuDetail.goods_attr_format[i].attr_value_id != goods_attr_format[j].attr_value_id) {
|
||||
this.goodsSkuDetail.goods_attr_format[i].attr_value_name += "、" + goods_attr_format[j].attr_value_name;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品SKU格式
|
||||
if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format)
|
||||
window.document.title = `${this.goodsSkuDetail.sku_name} - ${this.siteInfo.site_name}`
|
||||
|
||||
this.loading = false
|
||||
} else {
|
||||
this.$router.push("/")
|
||||
}
|
||||
}).then(res => {
|
||||
if (this.token != "") {
|
||||
this.getWhetherCollection()
|
||||
// this.isFollow()
|
||||
}
|
||||
// this.getAftersale()
|
||||
this.modifyGoodsInfo()
|
||||
this.getEvaluateConfig()
|
||||
this.getGoodsQrcode()
|
||||
this.getAddress('province', null, true);
|
||||
if (!this.locationRegion) {
|
||||
|
||||
this.$store.commit("app/SET_LOCATION_REGION", {
|
||||
"level_1": {
|
||||
"id": 110000,
|
||||
"pid": 0,
|
||||
"name": "北京市",
|
||||
"shortname": "北京",
|
||||
"longitude": "116.40529",
|
||||
"latitude": "39.904987",
|
||||
"level": 1,
|
||||
"sort": 1,
|
||||
"status": 1,
|
||||
"default_data": 1
|
||||
},
|
||||
"level_2": {
|
||||
"id": 110100,
|
||||
"pid": 110000,
|
||||
"name": "北京市",
|
||||
"shortname": "北京",
|
||||
"longitude": "116.40529",
|
||||
"latitude": "39.904987",
|
||||
"level": 2,
|
||||
"sort": 1,
|
||||
"status": 1,
|
||||
"default_data": 1
|
||||
},
|
||||
"level_3": {
|
||||
"id": 110101,
|
||||
"pid": 110100,
|
||||
"name": "东城区",
|
||||
"shortname": "东城",
|
||||
"longitude": "116.418755",
|
||||
"latitude": "39.917545",
|
||||
"level": 3,
|
||||
"sort": 3,
|
||||
"status": 1,
|
||||
"default_data": 1
|
||||
},
|
||||
master_img: []
|
||||
});
|
||||
}
|
||||
|
||||
this.selectedAddress = this.locationRegion;
|
||||
this.provinceId = this.selectedAddress.level_1.id
|
||||
this.getAddress('city', null, true, () => {
|
||||
this.cityId = this.selectedAddress.level_2.id
|
||||
if (this.cityId) this.getAddress('district', null, true)
|
||||
});
|
||||
}).catch(res => {
|
||||
this.loading = false
|
||||
this.$router.push("/")
|
||||
})
|
||||
},
|
||||
categorySearch(category_id) {
|
||||
goodsCategoryInfo({
|
||||
category_id: category_id
|
||||
}).then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.categoryNameArr = [];
|
||||
try {
|
||||
let categoryArr = res.data.category_full_name.split("$_SPLIT_$");
|
||||
categoryArr.forEach((item, index) => {
|
||||
let obj = {};
|
||||
obj.name = item;
|
||||
obj.category_id = res.data["category_id_" + (index + 1)];
|
||||
this.categoryNameArr.push(obj);
|
||||
})
|
||||
} catch (e) {
|
||||
this.categoryNameArr = [];
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
getEvaluateConfig() {
|
||||
evaluateConfig().then(res => {
|
||||
if (res.code == 0) {
|
||||
var data = res.data;
|
||||
this.evaluateConfig = data;
|
||||
if (this.evaluateConfig.evaluate_show == 1) {
|
||||
//商品评论
|
||||
this.evaluate_show = true
|
||||
this.getGoodsEvaluate();
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
service_link() {
|
||||
if (this.token) {
|
||||
this.$refs.servicerMessage.show()
|
||||
} else {
|
||||
this.$message({
|
||||
message: "您还未登录",
|
||||
type: "warning"
|
||||
})
|
||||
}
|
||||
},
|
||||
changeThumbImg(tag) {
|
||||
if (this.goodsSkuDetail.sku_images.length < 4) return
|
||||
let page = this.goodsSkuDetail.sku_images.length % 4 // 可见数量4个
|
||||
let position = 94
|
||||
if (page == 0) page = this.goodsSkuDetail.sku_images.length - 4 // 可见数量4个
|
||||
else if (page != 0 && page != 1 && page < 2) return
|
||||
|
||||
if (tag == "prev") {
|
||||
if (this.thumbPosition != 0 && Math.round(this.thumbPosition, 2) != position) {
|
||||
this.thumbPosition += position
|
||||
// this.moveThumbLeft = true;
|
||||
} else {
|
||||
// this.moveThumbLeft = false;
|
||||
}
|
||||
} else if (tag == "next") {
|
||||
if (Math.round(this.thumbPosition, 2) != -Math.round(position * page, 2)) {
|
||||
this.thumbPosition -= position
|
||||
// this.moveThumbRight = true;
|
||||
} else {
|
||||
// this.moveThumbRight = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
//获取用户是否关注
|
||||
getWhetherCollection() {
|
||||
isCollect({
|
||||
goods_id: this.goodsSkuDetail.goods_id
|
||||
}).then(res => {
|
||||
this.whetherCollection = res.data
|
||||
})
|
||||
},
|
||||
editCollection() {
|
||||
//未关注添加关注
|
||||
if (this.whetherCollection == 0) {
|
||||
addCollect({
|
||||
sku_id: this.skuId,
|
||||
goods_id: this.goodsSkuDetail.goods_id
|
||||
}).then(res => {
|
||||
var data = res.data
|
||||
if (data > 0) {
|
||||
this.whetherCollection = 1
|
||||
this.goodsSkuDetail.collect_num++
|
||||
}
|
||||
})
|
||||
} else {
|
||||
//已关注取消关注
|
||||
deleteCollect({
|
||||
goods_id: this.goodsSkuDetail.goods_id
|
||||
}).then(res => {
|
||||
var data = res.data
|
||||
if (data > 0) {
|
||||
this.whetherCollection = 0
|
||||
this.goodsSkuDetail.collect_num--
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 售后保障
|
||||
getAftersale() {
|
||||
aftersale({}).then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
let data = res.data.content
|
||||
if (res.data.content) this.service = res.data.content
|
||||
}
|
||||
})
|
||||
},
|
||||
//更新商品信息
|
||||
modifyGoodsInfo() {
|
||||
//更新商品点击量
|
||||
modifyClicks({
|
||||
sku_id: this.skuId,
|
||||
site_id: this.goodsSkuDetail.site_id
|
||||
})
|
||||
|
||||
//添加足迹
|
||||
addGoodsbrowse({
|
||||
sku_id: this.skuId,
|
||||
goods_id: this.goodsSkuDetail.goods_id
|
||||
})
|
||||
},
|
||||
// 商品二维码
|
||||
getGoodsQrcode() {
|
||||
goodsQrcode({
|
||||
sku_id: this.skuId
|
||||
}).then(res => {
|
||||
let data = res.data
|
||||
if (data.path.h5.img) this.qrcode = this.$img(data.path.h5.img)
|
||||
})
|
||||
},
|
||||
//商品评价数量
|
||||
goodsEvaluCount() {
|
||||
goodsEvaluateCount({
|
||||
goods_id: this.id
|
||||
}).then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.evaluteCount = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 商品评价列表
|
||||
getGoodsEvaluate() {
|
||||
goodsEvaluateList({
|
||||
page: this.currentPage,
|
||||
page_size: this.pageSize,
|
||||
goods_id: this.id,
|
||||
explain_type: this.evaluaType == 0 ? '' : this.evaluaType
|
||||
}).then(res => {
|
||||
let list = []
|
||||
if (res.code == 0 && res.data) {
|
||||
list = res.data.list
|
||||
this.total = res.data.count
|
||||
}
|
||||
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
// 1好评2中评3差评
|
||||
if (list[i].explain_type == 1) {
|
||||
list[i].star = 5
|
||||
} else if (list[i].explain_type == 2) {
|
||||
list[i].star = 3
|
||||
} else if (list[i].explain_type == 3) {
|
||||
list[i].star = 1
|
||||
}
|
||||
if (list[i].images) {
|
||||
list[i].images = list[i].images.split(",")
|
||||
list[i].imagesFormat = []
|
||||
for (var k = 0; k < list[i].images.length; k++) {
|
||||
list[i].imagesFormat.push(this.$img(list[i].images[k]))
|
||||
}
|
||||
}
|
||||
|
||||
if (list[i].again_images) {
|
||||
list[i].again_images = list[i].again_images.split(",")
|
||||
list[i].againImagesFormat = []
|
||||
for (var j = 0; j < list[i].again_images.length; j++) {
|
||||
list[i].againImagesFormat.push(this.$img(list[i].again_images[j]))
|
||||
}
|
||||
}
|
||||
if (list[i].is_anonymous == 1) list[i].member_name = list[i].member_name.replace(list[i].member_name.substring(1, list[i].member_name.length - 1), "***")
|
||||
}
|
||||
this.goodsEvaluateList = list
|
||||
})
|
||||
},
|
||||
// 图片加载失败
|
||||
imageErrorEvaluate(index) {
|
||||
this.goodsEvaluateList[index].member_headimg = this.defaultHeadImage
|
||||
},
|
||||
handlePageSizeChange(size) {
|
||||
this.pageSize = size
|
||||
this.getGoodsEvaluate()
|
||||
},
|
||||
handleCurrentPageChange(page) {
|
||||
this.currentPage = page
|
||||
this.getGoodsEvaluate()
|
||||
},
|
||||
changeSpec(skuId, spec_id, disabled) {
|
||||
if (disabled) return
|
||||
this.specBtnRepeat = false
|
||||
this.skuId = skuId
|
||||
// 清空选择
|
||||
for (var i = 0; i < this.goodsSkuDetail.goods_spec_format.length; i++) {
|
||||
var sku = this.goodsSkuDetail.goods_spec_format[i]
|
||||
for (var j = 0; j < sku.value.length; j++) {
|
||||
// 排除当前点击的规格值
|
||||
if (spec_id == this.goodsSkuDetail.goods_spec_format[i].value[j].spec_id) {
|
||||
this.goodsSkuDetail.goods_spec_format[i].value[j].selected = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
seckillGoodsInfo({
|
||||
sku_id: this.skuId,
|
||||
seckill_id: this.goodsSkuDetail.seckill_id
|
||||
}).then(res => {
|
||||
let data = res.data.goods_sku_detail
|
||||
|
||||
if (data != null) {
|
||||
data.sku_images = data.sku_images.split(",")
|
||||
this.picZoomUrl = data.sku_images[0]
|
||||
this.playerOptions.poster = this.$img(data.sku_image)
|
||||
|
||||
if (data.sku_images == "") {
|
||||
data.sku_images = this.master_img;
|
||||
this.picZoomUrl = data.sku_images[0]
|
||||
this.playerOptions.poster = this.$img(data.sku_image)
|
||||
} else {
|
||||
data.sku_images = data.sku_images.concat(this.master_img);
|
||||
}
|
||||
|
||||
// 当前商品SKU规格
|
||||
if (data.sku_spec_format) data.sku_spec_format = JSON.parse(data.sku_spec_format)
|
||||
|
||||
// 商品SKU格式
|
||||
if (data.goods_spec_format) data.goods_spec_format = JSON.parse(data.goods_spec_format)
|
||||
|
||||
if (data.goods_attr_format) data.goods_attr_format = JSON.parse(data.goods_attr_format)
|
||||
this.keyInput(true)
|
||||
|
||||
// 限时折扣
|
||||
if (data.promotion_type == 1) {
|
||||
this.discountTimeMachine = {
|
||||
currentTime: res.timestamp,
|
||||
startTime: res.timestamp,
|
||||
endTime: data.end_time
|
||||
}
|
||||
}
|
||||
this.specBtnRepeat = false
|
||||
Object.assign(this.goodsSkuDetail, data)
|
||||
} else {
|
||||
this.$router.push("/")
|
||||
}
|
||||
})
|
||||
},
|
||||
changeNum(tag) {
|
||||
if (this.goodsSkuDetail.stock == 0) return
|
||||
|
||||
var stock = this.goodsSkuDetail.stock
|
||||
var min = 1
|
||||
|
||||
if (tag == "+") {
|
||||
// 加
|
||||
if (this.number < stock) {
|
||||
this.number++
|
||||
}
|
||||
} else if (tag == "-") {
|
||||
// 减
|
||||
if (this.number > min) {
|
||||
this.number -= 1
|
||||
}
|
||||
}
|
||||
},
|
||||
blur() {
|
||||
let newNumber = parseInt(this.number)
|
||||
this.number = 0
|
||||
setTimeout(() => {
|
||||
this.number = newNumber
|
||||
}, 0)
|
||||
},
|
||||
//输入数量
|
||||
keyInput(flag, callback) {
|
||||
setTimeout(() => {
|
||||
var stock = this.goodsSkuDetail.stock
|
||||
|
||||
// 库存为0
|
||||
if (this.goodsSkuDetail.stock == 0) {
|
||||
this.number = 0
|
||||
return
|
||||
}
|
||||
|
||||
// 防止空
|
||||
if (flag && this.number.length == 0) this.number = 1
|
||||
|
||||
// 防止输入0和负数、非法输入
|
||||
if (flag && (this.number <= 0 || isNaN(this.number))) this.number = 1
|
||||
|
||||
if (this.number > stock) {
|
||||
this.number = stock
|
||||
}
|
||||
|
||||
if (flag) this.number = parseInt(this.number)
|
||||
if (callback) callback()
|
||||
}, 0)
|
||||
},
|
||||
// 播放回调
|
||||
onPlayerPlay(player) {
|
||||
},
|
||||
// 暂停回调
|
||||
onPlayerPause(player) {
|
||||
},
|
||||
// 视频播完回调
|
||||
onPlayerEnded(player) {
|
||||
},
|
||||
// DOM元素上的readyState更改导致播放停止
|
||||
onPlayerWaiting(player) {
|
||||
},
|
||||
// 已开始播放回调
|
||||
onPlayerPlaying(player) {
|
||||
},
|
||||
// 当播放器在当前播放位置下载数据时触发
|
||||
onPlayerLoadeddata(player) {
|
||||
},
|
||||
// 当前播放位置发生变化时触发。
|
||||
onPlayerTimeupdate(player) {
|
||||
},
|
||||
//媒体的readyState为HAVE_FUTURE_DATA或更高
|
||||
onPlayerCanplay(player) {
|
||||
},
|
||||
//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
|
||||
onPlayerCanplaythrough(player) {
|
||||
},
|
||||
//播放状态改变回调
|
||||
playerStateChanged(playerCurrentState) {
|
||||
},
|
||||
//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
|
||||
playerReadied(player) {
|
||||
},
|
||||
// 立即购买
|
||||
buyNow() {
|
||||
//纠正数量
|
||||
this.keyInput(true, () => {
|
||||
if (this.goodsSkuDetail.stock == 0) {
|
||||
this.$message({
|
||||
message: "商品已售罄",
|
||||
type: "warning"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (this.number.length == 0 || this.number == 0) {
|
||||
this.$message({
|
||||
message: "购买数量不能为0",
|
||||
type: "warning"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 秒杀
|
||||
var data = {
|
||||
seckill_id: this.goodsSkuDetail.seckill_id,
|
||||
num: this.number,
|
||||
sku_id: this.skuId
|
||||
};
|
||||
|
||||
this.$store.dispatch("order/setSeckillOrderCreateData", data)
|
||||
this.$router.push({
|
||||
path: "/promotion/seckill/payment"
|
||||
})
|
||||
})
|
||||
},
|
||||
countDownS_cb() {
|
||||
},
|
||||
countDownE_cb() {
|
||||
this.seckillText = "活动已结束"
|
||||
this.$message({
|
||||
message: '限时秒杀活动已结束',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$router.push("/sku/" + this.goodsSkuDetail.sku_id)
|
||||
}
|
||||
});
|
||||
},
|
||||
// 图片加载失败
|
||||
imageErrorSpec(index) {
|
||||
this.goodsSkuDetail.sku_images[index] = this.defaultGoodsImage
|
||||
this.picZoomUrl = this.defaultGoodsImage
|
||||
},
|
||||
/**
|
||||
* 获取地址
|
||||
* @param {Object} type
|
||||
* @param {Object} item
|
||||
* @param {Object} first 是否第一次
|
||||
*/
|
||||
getAddress(type, item, first, callback) {
|
||||
let pid = 0
|
||||
switch (type) {
|
||||
case 'province':
|
||||
//加载省
|
||||
pid = 0
|
||||
break
|
||||
case 'city':
|
||||
//加载市
|
||||
if (item) {
|
||||
this.provinceId = item.id
|
||||
}
|
||||
pid = this.provinceId
|
||||
this.cityArr = {}
|
||||
this.districtArr = {}
|
||||
break
|
||||
case 'district':
|
||||
//加载区县
|
||||
if (item) this.cityId = item.id
|
||||
pid = this.cityId
|
||||
this.districtArr = {}
|
||||
break
|
||||
}
|
||||
if (item) {
|
||||
if (item.level <= 2) {
|
||||
let len = item.level;
|
||||
for (let i = len; i <= 3; i++) {
|
||||
delete this.selectedAddress['level_' + i];
|
||||
}
|
||||
}
|
||||
this.selectedAddress['level_' + item.level] = item;
|
||||
}
|
||||
|
||||
if (!first) this.$store.commit("app/SET_LOCATION_REGION", this.selectedAddress)
|
||||
this.$forceUpdate();
|
||||
if (type == 'community') {
|
||||
this.hideRegion = true;
|
||||
setTimeout(() => {
|
||||
this.hideRegion = false;
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
|
||||
getArea({
|
||||
pid: pid
|
||||
}).then(res => {
|
||||
const {
|
||||
code,
|
||||
data
|
||||
} = res;
|
||||
if (data) {
|
||||
switch (type) {
|
||||
case 'province':
|
||||
//加载省
|
||||
this.provinceArr = data
|
||||
break
|
||||
case 'city':
|
||||
//加载市
|
||||
this.cityArr = data
|
||||
break
|
||||
case 'district':
|
||||
//加载区县
|
||||
this.districtArr = data
|
||||
break
|
||||
}
|
||||
this.currTabAddres = type
|
||||
|
||||
if (callback) callback();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
298
addon/pc/source/os/assets/js/promotion/list_seckill.js
Executable file
298
addon/pc/source/os/assets/js/promotion/list_seckill.js
Executable file
@@ -0,0 +1,298 @@
|
||||
import {goodsPage, timeList} from '@/api/seckill';
|
||||
import {mapGetters} from 'vuex';
|
||||
import {adList} from '@/api/website';
|
||||
import CountDown from 'vue2-countdown';
|
||||
|
||||
export default {
|
||||
name: 'groupbuy',
|
||||
components: {CountDown},
|
||||
data: () => {
|
||||
return {
|
||||
loading: true,
|
||||
timeList: [], //时间列表
|
||||
seckillId: null, //选中的时间块
|
||||
seckillName: null, //选中的时间块的名称
|
||||
seckillIndex: null, //选中时间块的index
|
||||
goodsList: [], //选中时间块的商品列表
|
||||
index: null, //当前正在抢购的index
|
||||
siteId: 0,
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 25,
|
||||
loadingAd: true,
|
||||
adList: [],
|
||||
seckillTimeMachine: {
|
||||
currentTime: 0,
|
||||
startTime: 0,
|
||||
endTime: 0
|
||||
},
|
||||
seckillText: '距离结束仅剩',
|
||||
thumbPosition: 0,
|
||||
// 是否可以移动
|
||||
moveThumbLeft: false,
|
||||
moveThumbRight: false,
|
||||
shouType: true,
|
||||
isNoClick: false,
|
||||
key: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
seckillId(newName, oldName) {
|
||||
if (newName && newName != oldName) {
|
||||
this.refresh();
|
||||
}
|
||||
},
|
||||
addonIsExit() {
|
||||
if (this.addonIsExit.seckill != 1) {
|
||||
this.$message({
|
||||
message: '秒杀插件未安装',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$route.push('/');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.addonIsExit && this.addonIsExit.seckill != 1) {
|
||||
this.$message({
|
||||
message: '秒杀插件未安装',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$route.push('/');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.getAdList();
|
||||
this.getTimeList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isTrue() {
|
||||
let num = 0;
|
||||
if (this.timeList && this.timeList[this.index]) {
|
||||
num = this.timeList[this.index].isNow;
|
||||
}
|
||||
return num;
|
||||
},
|
||||
...mapGetters(['defaultGoodsImage', 'addonIsExit'])
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 点击某个时间段
|
||||
*/
|
||||
handleSelected(i, item) {
|
||||
this.key = i;
|
||||
let text = this.timeList[i].name
|
||||
if (i < this.index) {
|
||||
this.$message.warning(text + '秒杀已结束')
|
||||
} else if (i > this.index) {
|
||||
this.shouType = false;
|
||||
this.seckillId = item.id;
|
||||
this.isNoClick = true;
|
||||
this.seckillName = item.name;
|
||||
// this.$message.warning(text+ '秒杀未开始')
|
||||
//this.getGoodsList();
|
||||
this.getTimeList();
|
||||
} else {
|
||||
this.seckillId = item.id;
|
||||
this.shouType = true;
|
||||
this.isNoClick = false;
|
||||
this.seckillName = item.name;
|
||||
//this.getGoodsList();
|
||||
this.getTimeList();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 点击前后箭头
|
||||
*/
|
||||
changeThumbImg(tag) {
|
||||
let _div = this.$refs.seckillTime.clientWidth;
|
||||
let _i = document.querySelector('.seckill-time-ul').style.left.indexOf('px')
|
||||
let _li = document.querySelector('.seckill-time-ul').style.left.substring(0, _i)
|
||||
|
||||
if (this.timeList.length < 4) return
|
||||
let page = this.timeList.length % 4 // 可见数量4个
|
||||
let position = 302.5
|
||||
if (page == 0) page = this.timeList.length - 4 // 可见数量4个
|
||||
else if (page != 0 && page != 1 && page < 2) return
|
||||
|
||||
if (tag == "prev") {
|
||||
if (this.thumbPosition != 0 && Math.round(this.thumbPosition, 2) != position && position < Math.abs(this.thumbPosition)) {
|
||||
this.thumbPosition += position
|
||||
} else {
|
||||
this.thumbPosition = 0
|
||||
}
|
||||
} else if (tag == "next") {
|
||||
|
||||
if (Math.round(this.thumbPosition, 2) != -Math.round(position * page, 2)) {
|
||||
|
||||
let _ul = this.timeList.length * position
|
||||
let _left = _ul - _div
|
||||
if (Math.abs(this.thumbPosition) - _left >= 0) {
|
||||
this.thumbPosition = -_left
|
||||
} else if (Math.abs(this.thumbPosition) - _left < -150) {
|
||||
this.thumbPosition -= position
|
||||
} else {
|
||||
this.thumbPosition = -_left
|
||||
}
|
||||
} else {
|
||||
}
|
||||
}
|
||||
},
|
||||
countDownS_cb() {
|
||||
},
|
||||
countDownE_cb() {
|
||||
this.seckillText = '活动已结束';
|
||||
},
|
||||
getAdList() {
|
||||
adList({keyword: 'NS_PC_SECKILL'}).then(res => {
|
||||
this.adList = res.data.adv_list;
|
||||
for (let i = 0; i < this.adList.length; i++) {
|
||||
if (this.adList[i].adv_url) this.adList[i].adv_url = JSON.parse(this.adList[i].adv_url);
|
||||
}
|
||||
this.loadingAd = false;
|
||||
}).catch(err => {
|
||||
this.loadingAd = false;
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 秒杀时间段
|
||||
*/
|
||||
getTimeList() {
|
||||
timeList().then(res => {
|
||||
let data = res.data;
|
||||
if (!data) return;
|
||||
let time = new Date(res.timestamp * 1000);
|
||||
let newTimes = time.getHours() * 60 * 60 + time.getMinutes() * 60 + time.getSeconds();
|
||||
data.list.forEach((v, k) => {
|
||||
if (v.seckill_start_time <= newTimes && newTimes < v.seckill_end_time) {
|
||||
v.isNow = true;
|
||||
if (this.shouType == true) {
|
||||
this.seckillId = v.id;
|
||||
this.seckillName = v.name;
|
||||
this.index = k;
|
||||
this.seckillIndex = k;
|
||||
|
||||
let endTime = parseInt(time.getTime() / 1000) + (v.seckill_end_time - newTimes);
|
||||
this.seckillTimeMachine = {
|
||||
currentTime: res.timestamp,
|
||||
startTime: res.timestamp,
|
||||
endTime: endTime
|
||||
};
|
||||
}
|
||||
} else {
|
||||
v.isNow = false;
|
||||
}
|
||||
// 处理时间格式
|
||||
v.seckill_end_time_show = v.seckill_end_time_show.slice(0, 5);
|
||||
v.seckill_start_time_show = v.seckill_start_time_show.slice(0, 5);
|
||||
});
|
||||
|
||||
this.timeList = data.list;
|
||||
if (!this.seckillId) {
|
||||
for (let i = 0; i < data.list.length; i++) {
|
||||
if (newTimes < data.list[i].seckill_start_time && i == 0) {
|
||||
this.seckillId = data.list[i].id;
|
||||
this.index = i;
|
||||
this.seckillIndex = i;
|
||||
} else if (newTimes < data.list[i].seckill_start_time && newTimes > data.list[i - 1].seckill_end_time && i != 0) {
|
||||
this.seckillId = data.list[i].id;
|
||||
this.index = i;
|
||||
this.seckillIndex = i;
|
||||
} else if (i == data.list.length - 1 && newTimes > data.list[i].seckill_end_time) {
|
||||
this.seckillId = data.list[i].id;
|
||||
this.index = i;
|
||||
this.seckillIndex = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// this.$nextTick(function() {
|
||||
// if (this.timeList.length > 0) {
|
||||
// let _div = this.$refs.seckillTime.clientWidth;
|
||||
// let _li = document.querySelector('.seckill-time-li').clientWidth
|
||||
// let leftWidth = this.index * _li; // 抢购中的时间段距左边的位置
|
||||
// let offsetWidth = leftWidth - (_li) * 4; // 需要左偏移的距离
|
||||
// this.thumbPosition = -offsetWidth
|
||||
// }
|
||||
// });
|
||||
}).catch(err => {
|
||||
this.$message.error(err.message);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 秒杀商品
|
||||
*/
|
||||
getGoodsList() {
|
||||
goodsPage({
|
||||
page_size: this.pageSize,
|
||||
page: this.currentPage,
|
||||
seckill_time_id: this.seckillId,
|
||||
site_id: this.siteId
|
||||
}).then(res => {
|
||||
this.goodsList = res.data.list;
|
||||
this.goodsList.forEach(v => {
|
||||
v.goods_image = v.goods_image.split(',')[0]
|
||||
})
|
||||
this.total = res.data.count;
|
||||
this.loading = false;
|
||||
}).catch(err => {
|
||||
this.loading = false;
|
||||
this.$message.error(err.message);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 商品详情
|
||||
*/
|
||||
toGoodsDetail(id, key) {
|
||||
let time = new Date();
|
||||
let newTimes = time.getHours() * 60 * 60 + time.getMinutes() * 60 + time.getSeconds();
|
||||
if (this.timeList[this.key].seckill_start_time <= newTimes && newTimes < this.timeList[this.key].seckill_end_time) {
|
||||
this.timeList[this.key].isNow = true;
|
||||
} else {
|
||||
this.timeList[this.key].isNow = false;
|
||||
}
|
||||
if (!this.timeList[this.key].isNow) {
|
||||
this.$message.error('秒杀活动还未开启，敬请期待！')
|
||||
return;
|
||||
}
|
||||
this.$router.push('/promotion/seckill/' + id);
|
||||
},
|
||||
handlePageSizeChange(size) {
|
||||
this.pageSize = size;
|
||||
this.refresh();
|
||||
},
|
||||
handleCurrentPageChange(page) {
|
||||
this.currentPage = page;
|
||||
this.refresh();
|
||||
},
|
||||
refresh() {
|
||||
this.loading = true;
|
||||
this.getGoodsList();
|
||||
},
|
||||
/**
|
||||
* 图片加载失败
|
||||
*/
|
||||
imageError(index) {
|
||||
this.goodsList[index].goods_image = this.defaultGoodsImage;
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: '秒杀专区-' + this.$store.state.site.siteInfo.site_name,
|
||||
meta: [{
|
||||
name: 'description',
|
||||
content: this.$store.state.site.siteInfo.seo_description
|
||||
},
|
||||
{
|
||||
name: 'keyword',
|
||||
content: this.$store.state.site.siteInfo.seo_keywords
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
1080
addon/pc/source/os/assets/js/promotion/payment_combo.js
Executable file
1080
addon/pc/source/os/assets/js/promotion/payment_combo.js
Executable file
File diff suppressed because it is too large
Load Diff
1085
addon/pc/source/os/assets/js/promotion/payment_groupbuy.js
Executable file
1085
addon/pc/source/os/assets/js/promotion/payment_groupbuy.js
Executable file
File diff suppressed because it is too large
Load Diff
1079
addon/pc/source/os/assets/js/promotion/payment_seckill.js
Executable file
1079
addon/pc/source/os/assets/js/promotion/payment_seckill.js
Executable file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user