clone 开源的 Shopping
sin
parent
78945c61a7
commit
c9d71726fa
|
|
@ -0,0 +1,21 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw*
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
## 基于Vue实现开箱即用移动端商城的单页应用
|
||||||
|
|
||||||
|
>这是开箱即用移动端商城的框架。只需要后端返回标准接口数据，前端配置接口地址等信息，标准商城的页面不需要做任何调整。
|
||||||
|
|
||||||
|
|
||||||
|
## 特性
|
||||||
|
- 开箱即用，集成后台接口格式，前端可做二次开发以实现自有业务
|
||||||
|
- 首页是由图片广告、图文导航、商品、公告、搜索、文本、标题、辅助空白、辅助线、方格等组件根据后端接口数据动态渲染，可根据后端返回的数据渲染出N种首页效果
|
||||||
|
- 定制主题
|
||||||
|
|
||||||
|
## 手机预览
|
||||||
|
|
||||||
|
可以手机扫码以下二维码访问手机端 demo：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- vue
|
||||||
|
- [vue cli 3](https://cli.vuejs.org/zh/guide/installation.html)
|
||||||
|
- [vant](https://github.com/youzan/vant)
|
||||||
|
- less
|
||||||
|
- [vue-router](https://router.vuejs.org/zh/installation.html)
|
||||||
|
- [axios](https://github.com/axios/axios)
|
||||||
|
- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
|
||||||
|
|
||||||
|
|
||||||
|
## 快速上手
|
||||||
|
|
||||||
|
```
|
||||||
|
# 安装 Vue Cli 3
|
||||||
|
npm install -g @vue/cli
|
||||||
|
|
||||||
|
npm install
|
||||||
|
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
调整src/config/env.js的配置信息
|
||||||
|
```
|
||||||
|
baseUrl: 域名地址
|
||||||
|
dataSources：数据源(local=本地)
|
||||||
|
```
|
||||||
|
## 进度
|
||||||
|
- [x] 界面样式
|
||||||
|
- [ ] 数据通过接口绑定
|
||||||
|
- [ ] 定制主题
|
||||||
|
- [ ] 代码重构优化
|
||||||
|
|
||||||
|
## 页面
|
||||||
|
```
|
||||||
|
- 首页
|
||||||
|
- 分类
|
||||||
|
- 商品
|
||||||
|
- 详情
|
||||||
|
- 列表
|
||||||
|
- 购物车
|
||||||
|
- 提交订单
|
||||||
|
- 会员
|
||||||
|
- 会员中心
|
||||||
|
- 账户管理
|
||||||
|
- 订单
|
||||||
|
- 列表
|
||||||
|
- 详情
|
||||||
|
- 追踪
|
||||||
|
- 售后
|
||||||
|
- 申请
|
||||||
|
- 列表
|
||||||
|
- 详情
|
||||||
|
- 进度详情
|
||||||
|
- 我的优惠券
|
||||||
|
- 我的收藏
|
||||||
|
- 收货地址
|
||||||
|
- 列表
|
||||||
|
- 编辑
|
||||||
|
- 手机登录
|
||||||
|
- 手机注册
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: ['@vue/app'],
|
||||||
|
plugins: [
|
||||||
|
[
|
||||||
|
'import',
|
||||||
|
{ libraryName: 'vant', libraryDirectory: 'es', style: true },
|
||||||
|
'vant'
|
||||||
|
]
|
||||||
|
]
|
||||||
|
};
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 351 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
|
|
@ -0,0 +1,49 @@
|
||||||
|
{
|
||||||
|
"name": "shop-vue",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"start": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^0.18.0",
|
||||||
|
"vant": "^1.3.1",
|
||||||
|
"vue": "^2.5.17",
|
||||||
|
"vue-router": "^3.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "^3.4.1",
|
||||||
|
"@vue/cli-plugin-eslint": "^3.4.1",
|
||||||
|
"@vue/cli-service": "^3.4.1",
|
||||||
|
"babel-plugin-import": "^1.8.0",
|
||||||
|
"less": "^3.8.1",
|
||||||
|
"less-loader": "^4.1.0",
|
||||||
|
"vue-lazyload": "^1.2.6",
|
||||||
|
"vue-template-compiler": "^2.5.17"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"rules": {},
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "babel-eslint"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"postcss": {
|
||||||
|
"plugins": {
|
||||||
|
"autoprefixer": {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"Android >= 4.0",
|
||||||
|
"iOS >= 7"
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import './assets/style/common.css';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'app'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import request from "../config/request";
|
||||||
|
|
||||||
|
|
||||||
|
export function GetPage() {
|
||||||
|
return request({
|
||||||
|
url: '/Page/GetPage',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getProduct(id) {
|
||||||
|
return request({
|
||||||
|
url: '/Page/Product',
|
||||||
|
method: 'get',
|
||||||
|
params: { id }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
import request from "../config/request";
|
||||||
|
|
||||||
|
|
||||||
|
export function GetUserIndex() {
|
||||||
|
return request({
|
||||||
|
url: '/User/GetUserIndex',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function GetFavorite(data){
|
||||||
|
return request({
|
||||||
|
url: '/User/GetFavorite',
|
||||||
|
method: 'post',
|
||||||
|
params: { data }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DelFavorite(id){
|
||||||
|
return request({
|
||||||
|
url: '/User/DelFavorite',
|
||||||
|
method: 'get',
|
||||||
|
params: { id:id }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function GetAddressList(){
|
||||||
|
return request({
|
||||||
|
url: '/User/GetAddressList',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function GetAddressById(id){
|
||||||
|
return request({
|
||||||
|
url: '/User/GetAddressById',
|
||||||
|
method: 'get',
|
||||||
|
params: { id }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SaveAddress(data){
|
||||||
|
return request({
|
||||||
|
url: '/User/SaveAddress',
|
||||||
|
method: 'post',
|
||||||
|
params: { data }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export function DelAddress(data){
|
||||||
|
return request({
|
||||||
|
url: '/User/DelAddress',
|
||||||
|
method: 'post',
|
||||||
|
params: { data }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function GetCoupon(data){
|
||||||
|
return request({
|
||||||
|
url: '/User/GetCoupon',
|
||||||
|
method: 'Post',
|
||||||
|
params: { data }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ExchangeCoupon(code){
|
||||||
|
return request({
|
||||||
|
url: '/User/ExchangeCoupon',
|
||||||
|
method: 'Post',
|
||||||
|
params: { code:code }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,7 @@
|
||||||
|
body {margin:0px; padding:0px; color:rgb(34, 34, 34); font-family:Helvetica,"Hiragino Sans GB","Microsoft YaHei",Simsun,"Droid Sans Fallback",sans-serif; text-decoration:none; background:#fff;-webkit-tap-highlight-color:rgba(0,0,0,0); }
|
||||||
|
body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,h7,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0px; padding:0px;}
|
||||||
|
ul{list-style:none;}
|
||||||
|
li{list-style:none;}
|
||||||
|
img {border:0px currentColor;vertical-align:top;}
|
||||||
|
ol {list-style:none; margin:0px; padding:0px;}
|
||||||
|
a{color:rgb(0, 0, 0); text-decoration:none;}
|
||||||
|
|
@ -0,0 +1,888 @@
|
||||||
|
|
||||||
|
|
||||||
|
.tt-header, #ttkey {max-width:640px;}
|
||||||
|
/*倒计时begin*/
|
||||||
|
.countdown {
|
||||||
|
text-align: center;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
font-size: 12px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontweight_300 {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown b {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown b {
|
||||||
|
margin: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 300
|
||||||
|
}
|
||||||
|
/*倒计时end*/
|
||||||
|
/*魔方begin*/
|
||||||
|
.cap-cube {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-cube__item {
|
||||||
|
float: left;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-cube__table-image--invisible {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
/*魔方end*/
|
||||||
|
/*图片广告begin*/
|
||||||
|
.swiper-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.cap-image-ad__content {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__content .image-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__image {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.swiper-slide {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
background: #fff;
|
||||||
|
/* Center slide text vertically */
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: -webkit-flex;
|
||||||
|
}
|
||||||
|
.cap-image-ad__slide {
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: scroll;
|
||||||
|
overflow-y: hidden;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__slide .image-wrapper {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__slide .cap-image-ad__image {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
/*图片广告end*/
|
||||||
|
/*图文导航begin*/
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__image-nav {
|
||||||
|
white-space: nowrap;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__image-nav .image-wrapper {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__link--image-nav {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__link {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__image-nav .cap-image-ad__image {
|
||||||
|
background-size: cover;
|
||||||
|
background-position: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__image-nav .cap-image-ad__nav-title {
|
||||||
|
padding-bottom: 9px;
|
||||||
|
height: 33px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__nav-title {
|
||||||
|
font-size: 12px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__nav-title, .cap-image-ad__title {
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__text-nav .text-nav-wrapper {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-image-ad__text-nav .cap-image-ad__nav-title {
|
||||||
|
position: relative;
|
||||||
|
height: 12px;
|
||||||
|
line-height: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*图文导航end*/
|
||||||
|
/*商品begin*/
|
||||||
|
body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, h7, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol, ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--big {
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
min-height: 100px;
|
||||||
|
color: #333;
|
||||||
|
background-color: #fff;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item.simple {
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__container--big .cap-goods-list__wrapper:first-child .cap-goods-list__item, .cap-goods-list__container--list .cap-goods-list__wrapper:first-child .cap-goods-list__item {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--big.cap-goods-list__item--ratio-1-1 .cap-goods-list__photo, .cap-goods-list__item--big.cap-goods-list__item--ratio-3-2 .cap-goods-list__photo {
|
||||||
|
min-height: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--big.cap-goods-list__item--ratio-3-2 .cap-goods-list__photo {
|
||||||
|
padding-top: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--big.cap-goods-list__item--ratio-1-1 .cap-goods-list__img, .cap-goods-list__item--big.cap-goods-list__item--ratio-3-2 .cap-goods-list__img {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__img, .cap-goods-list__photo--soldout:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__img {
|
||||||
|
vertical-align: bottom;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--big .cap-goods-list__img {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--padding .cap-goods-list__img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__photo {
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
min-height: 100px;
|
||||||
|
max-height: 500px;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__info {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--big .cap-goods-list__info {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item.simple .cap-goods-list__info.has-price, .cap-goods-list__item.simple .cap-goods-list__info.has-title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__info .title {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
font-weight: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--big .cap-goods-list__info .title {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item.simple .cap-goods-list__info .title {
|
||||||
|
height: 36px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item.simple .cap-goods-list__info.has-title.has-price .title, .cap-goods-list__item.simple .cap-goods-list__info.has-title.has-subtitle .title {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__info .sale-info {
|
||||||
|
color: #e50f3d;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-title.has-price.has-btn .sale-info {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__info.has-title.has-price.has-btn {
|
||||||
|
padding-bottom: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-title.has-price.has-btn .title {
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .cap-goods-list__buy-btn-wrapper {
|
||||||
|
right: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
color: #333;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
/*小图样式*/
|
||||||
|
.cap-goods-list__container--small {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__container--small .cap-goods-list__wrapper {
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item.simple {
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--small {
|
||||||
|
margin: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--small .cap-goods-list__photo {
|
||||||
|
min-height: 0;
|
||||||
|
padding-top: 100%;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--small .cap-goods-list__info.has-price .sale-info {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*一大两小样式*/
|
||||||
|
.cap-goods-list__container--hybrid, .cap-goods-list__container--waterfall {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__container--hybrid .cap-goods-list__wrapper--hybrid-big {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--hybrid-big {
|
||||||
|
margin: 5px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__container--hybrid .cap-goods-list__wrapper--hybrid-small {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__container--hybrid .cap-goods-list__wrapper {
|
||||||
|
float: left;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*详细列表样式*/
|
||||||
|
.cap-goods-list__container--list.cap-goods-list__container--simple {
|
||||||
|
padding-left: 15px;
|
||||||
|
background-color: #fff;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__container--list.cap-goods-list__container--simple .cap-goods-list__wrapper {
|
||||||
|
padding: 10px 15px 10px 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item.simple.cap-goods-list__item--list {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item.simple.cap-goods-list__item--list .cap-goods-list__photo {
|
||||||
|
margin-right: 15px;
|
||||||
|
width: 98px;
|
||||||
|
height: 98px;
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--list .cap-goods-list__photo {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item.simple.cap-goods-list__item--list .cap-goods-list__info {
|
||||||
|
margin-left: 113px;
|
||||||
|
height: 98px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__info {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item.simple.cap-goods-list__item--list .cap-goods-list__info .title {
|
||||||
|
height: auto;
|
||||||
|
max-height: 36px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item.simple.cap-goods-list__item--list .cap-goods-list__info .sale-info {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--list.cap-goods-list__item--btn1 .cap-goods-list__info .sale-info {
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--list .cap-goods-list__info .sale-info {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item.simple.cap-goods-list__item--list .cap-goods-list__buy-btn-wrapper {
|
||||||
|
right: 5px;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__buy-btn-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__buy-btn-wrapper .cap-goods-list__buy-btn-4 {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
height: 26px;
|
||||||
|
border-color: #f44;
|
||||||
|
color: #f44;
|
||||||
|
min-width: 48px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__container--list.cap-goods-list__container--simple .cap-goods-list__wrapper:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
-webkit-transform: scale(.5);
|
||||||
|
-moz-transform: scale(.5);
|
||||||
|
-ms-transform: scale(.5);
|
||||||
|
transform: scale(.5);
|
||||||
|
-webkit-transform-origin: 0 0;
|
||||||
|
-moz-transform-origin: 0 0;
|
||||||
|
-ms-transform-origin: 0 0;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
pointer-events: none;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 0 solid #e5e5e5;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--list.card2:after, .cap-goods-list__item--list.card:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
-webkit-transform: scale(.5);
|
||||||
|
-moz-transform: scale(.5);
|
||||||
|
-ms-transform: scale(.5);
|
||||||
|
transform: scale(.5);
|
||||||
|
-webkit-transform-origin: 0 0;
|
||||||
|
-moz-transform-origin: 0 0;
|
||||||
|
-ms-transform-origin: 0 0;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
pointer-events: none;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--list.card2 .cap-goods-list__photo, .cap-goods-list__item--list.card .cap-goods-list__photo {
|
||||||
|
margin-right: 10px;
|
||||||
|
width: 118px;
|
||||||
|
height: 118px;
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--list.card, .cap-goods-list__item--list.card2 {
|
||||||
|
min-height: auto;
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--list.card2 .cap-goods-list__info, .cap-goods-list__item--list.card .cap-goods-list__info {
|
||||||
|
margin-left: 128px;
|
||||||
|
height: 118px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--list.card2 .cap-goods-list__info .title, .cap-goods-list__item--list.card .cap-goods-list__info .title {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--list .cap-goods-list__info .title {
|
||||||
|
padding-top: 2px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--list.cap-goods-list__item--btn4 .cap-goods-list__info .sale-info {
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--list.card2 .cap-goods-list__buy-btn-wrapper, .cap-goods-list__item--list.card .cap-goods-list__buy-btn-wrapper {
|
||||||
|
right: 15px;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--list .cap-goods-list__info.has-title.has-price.has-btn {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*一行三个样式*/
|
||||||
|
.cap-goods-list__container--three {
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--three {
|
||||||
|
margin: 5px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__item--three .cap-goods-list__photo {
|
||||||
|
min-height: 0;
|
||||||
|
padding-top: 100%;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__container--three .cap-goods-list__wrapper {
|
||||||
|
float: left;
|
||||||
|
width: 33.33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple.cap-goods-list__item--three .cap-goods-list__info .sale-info {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*横向滑动样式*/
|
||||||
|
.cap-goods-list__container--three.nowrap {
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-flex-wrap: nowrap;
|
||||||
|
-ms-flex-wrap: nowrap;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
margin-bottom: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-goods-list__container--three.nowrap .cap-goods-list__wrapper {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-webkit-flex: 0 0 30%;
|
||||||
|
-moz-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 30%;
|
||||||
|
flex: 0 0 30%;
|
||||||
|
width: 30%;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
/*商品end*/
|
||||||
|
/*标题begin*/
|
||||||
|
.cap-title {
|
||||||
|
padding: 10px;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
position: relative;
|
||||||
|
background: #F9F9F9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-title__main {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cap-title__sub {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
margin: 5px 0 0;
|
||||||
|
}
|
||||||
|
/*标题end*/
|
||||||
|
/*商品搜索begin*/
|
||||||
|
.search-box, .search-box__view {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box__view {
|
||||||
|
padding: 0 15px;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-transition: top .3s linear;
|
||||||
|
-moz-transition: top .3s linear;
|
||||||
|
transition: top .3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search .cell {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 10px;
|
||||||
|
height: 40px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
width: 100%;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 15px;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 24px;
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field .cell__value {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell__value--alone {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell__value {
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: right;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell__title, .cell__value {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field__body {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field__control {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
resize: none;
|
||||||
|
display: block;
|
||||||
|
line-height: normal;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search .icon-search {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: inherit;
|
||||||
|
text-rendering: auto;
|
||||||
|
color: #666;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__filed {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__filed--center {
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
-moz-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__filed--center .cell {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-webkit-flex: none;
|
||||||
|
-moz-box-flex: 0;
|
||||||
|
-ms-flex: none;
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search .cell__value .field__control {
|
||||||
|
background: transparent;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search .field__body {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search .cell__value {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.search__filed--circle {
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*商品搜索end*/
|
||||||
|
/*公告begin*/
|
||||||
|
.notice-bar__left-icon {
|
||||||
|
height: 18px;
|
||||||
|
min-width: 20px;
|
||||||
|
padding-top: 1px;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-bar__wrap {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
height: 18px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-bar__content {
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-bar {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
color: #f60;
|
||||||
|
padding: 9px 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff7cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-bar__left-icon img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
/*公告end*/
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
<template>
|
||||||
|
<van-cell-group class="additional">
|
||||||
|
<van-card
|
||||||
|
:title="product.title"
|
||||||
|
:desc="product.desc"
|
||||||
|
:num="(iscard?null:product.quantity)"
|
||||||
|
style="background:#fff"
|
||||||
|
>
|
||||||
|
<template slot="thumb">
|
||||||
|
<img :src="product.imageURL" />
|
||||||
|
<p v-if="product.imageTag!=null&&product.imageTag!=''" class="image_tag">{{product.imageTag}}</p>
|
||||||
|
</template>
|
||||||
|
<template slot="tags">
|
||||||
|
<p class="price" v-if="product.price!=null&&product.price!=''" >
|
||||||
|
￥<span>{{product.price}}</span>
|
||||||
|
<van-tag v-if="product.tags!=null" v-for="tag in product.tags" :key="tag" plain type="danger">{{tag}}</van-tag>
|
||||||
|
</p>
|
||||||
|
<van-stepper v-if="iscard" v-model="product.quantity" :max="product.max" :min="product.min" />
|
||||||
|
</template>
|
||||||
|
</van-card>
|
||||||
|
<van-cell v-for="(gift,j) in product.gift" :key="j" :value="'x'+gift.quantity" >
|
||||||
|
<template slot="title">
|
||||||
|
<van-tag type="danger" v-if="j==0" >赠品</van-tag>
|
||||||
|
<span class="van-cell-text" :style="(j>0?'margin-left: 35px;':'')" >{{gift.title}}</span>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
<slot />
|
||||||
|
</van-cell-group>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'product-card',
|
||||||
|
props:{
|
||||||
|
product:Object,
|
||||||
|
iscard: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.additional {
|
||||||
|
.van-cell {
|
||||||
|
padding: 0 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.van-cell:not(:last-child)::after{
|
||||||
|
border:0;
|
||||||
|
}
|
||||||
|
.van-card__title{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.van-cell__title {
|
||||||
|
flex: 10;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.van-tag {
|
||||||
|
line-height: 12px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.price {
|
||||||
|
color: #e93b3d;
|
||||||
|
font-size: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 18px;
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.van-tag{
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.van-stepper{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5px;
|
||||||
|
right: 5px;
|
||||||
|
&__plus{
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
&__minus{
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image_tag{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 90px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(0,0,0,.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.additional::after{
|
||||||
|
border-color: #f7f7f7;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<template>
|
||||||
|
<div style="height:50px;">
|
||||||
|
<van-tabbar >
|
||||||
|
<van-tabbar-item icon="wap-home" to="/home">首页</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="wap-nav" to="/category" >分类</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="cart" to="/cart" >购物车</van-tabbar-item>
|
||||||
|
<van-tabbar-item icon="contact" to="/user/index">我的</van-tabbar-item>
|
||||||
|
</van-tabbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Tabbar, TabbarItem } from "vant";
|
||||||
|
export default {
|
||||||
|
name:'navigate',
|
||||||
|
components:{
|
||||||
|
[Tabbar.name]: Tabbar,
|
||||||
|
[TabbarItem.name]: TabbarItem,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<template>
|
||||||
|
<van-nav-bar
|
||||||
|
:title="title"
|
||||||
|
left-text=""
|
||||||
|
left-arrow
|
||||||
|
@click-left="onBack"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { NavBar } from 'vant';
|
||||||
|
export default {
|
||||||
|
name:'headerNav',
|
||||||
|
components:{
|
||||||
|
[NavBar.name]: NavBar,
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
title:String,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onBack() {
|
||||||
|
history.back();
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,183 @@
|
||||||
|
<template>
|
||||||
|
<div class="cap-cube" style="font-size:100%;width:100%;">
|
||||||
|
<div v-for="(item,index) in data.images" :key="index" class="cap-cube__item" :style="'width:'+item.imgwidth+'rem;'+item.style">
|
||||||
|
<a :href="item.link">
|
||||||
|
<img :src="item.src+'?w=375'" :style="'width:'+item.imgwidth+'rem;'" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div style="clear:both;"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "cube",
|
||||||
|
props: {
|
||||||
|
data: Object
|
||||||
|
},
|
||||||
|
created: function() {
|
||||||
|
var gap = this.data.imagegap;
|
||||||
|
var margin = gap / 2;
|
||||||
|
var width = 375;
|
||||||
|
var max = 0;
|
||||||
|
switch (this.data.type) {
|
||||||
|
case "1":
|
||||||
|
max = 2;
|
||||||
|
width = (width - margin * 2) / 2;
|
||||||
|
break;
|
||||||
|
case "2":
|
||||||
|
max = 3;
|
||||||
|
width = (width - margin * 4) / 3;
|
||||||
|
break;
|
||||||
|
case "3":
|
||||||
|
max = 4;
|
||||||
|
width = (width - margin * 6) / 4;
|
||||||
|
break;
|
||||||
|
case "4":
|
||||||
|
max = 4;
|
||||||
|
width = (width - margin * 2) / 2;
|
||||||
|
break;
|
||||||
|
case "5":
|
||||||
|
max = 3;
|
||||||
|
width = (width - margin * 2) / 2;
|
||||||
|
break;
|
||||||
|
case "6":
|
||||||
|
max = 3;
|
||||||
|
width = (width - margin * 2) / 2;
|
||||||
|
break;
|
||||||
|
case "7":
|
||||||
|
max = 4;
|
||||||
|
width = (width - margin * 2) / 2;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
margin = margin / 50;
|
||||||
|
width = width / 50;
|
||||||
|
var imagelist = [];
|
||||||
|
|
||||||
|
for (var i = 0; i < max; i++) {
|
||||||
|
var imgwidth = width;
|
||||||
|
var item = this.data.imagelist[i];
|
||||||
|
var style = "";
|
||||||
|
switch (this.data.type) {
|
||||||
|
case "1":
|
||||||
|
{
|
||||||
|
if (i == 0) {
|
||||||
|
style = "margin-right:" + margin + "rem;";
|
||||||
|
} else {
|
||||||
|
style = "margin-left:" + margin + "rem;";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "2":
|
||||||
|
{
|
||||||
|
if (i == 0) {
|
||||||
|
style = "margin-right:" + margin + "rem;";
|
||||||
|
} else if (i == 1) {
|
||||||
|
style = "margin:0 " + margin + "rem;";
|
||||||
|
} else {
|
||||||
|
style = "margin-left:" + margin + "rem;";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "3":
|
||||||
|
{
|
||||||
|
if (i == 0) {
|
||||||
|
style = "margin-right:" + margin + "rem;";
|
||||||
|
} else if (i == 1 || i == 2) {
|
||||||
|
style = "margin:0 " + margin + "rem;";
|
||||||
|
} else {
|
||||||
|
style = "margin-left:" + margin + "rem;";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "4":
|
||||||
|
{
|
||||||
|
if (i == 0) {
|
||||||
|
style =
|
||||||
|
"margin-right:" +
|
||||||
|
margin +
|
||||||
|
"rem;margin-bottom:" +
|
||||||
|
margin +
|
||||||
|
"rem;";
|
||||||
|
} else if (i == 1) {
|
||||||
|
style =
|
||||||
|
"margin-left:" +
|
||||||
|
margin +
|
||||||
|
"rem;margin-bottom:" +
|
||||||
|
margin +
|
||||||
|
"rem;";
|
||||||
|
} else if (i == 2) {
|
||||||
|
style =
|
||||||
|
"margin-right:" + margin + "rem;margin-top:" + margin + "rem;";
|
||||||
|
} else {
|
||||||
|
style =
|
||||||
|
"margin-left:" + margin + "rem;margin-top:" + margin + "rem;";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "5":
|
||||||
|
{
|
||||||
|
if (i == 0) {
|
||||||
|
style = "margin-right:" + margin + "rem;";
|
||||||
|
} else if (i == 1) {
|
||||||
|
style =
|
||||||
|
"margin-left:" +
|
||||||
|
margin +
|
||||||
|
"rem;margin-bottom:" +
|
||||||
|
margin +
|
||||||
|
"rem;";
|
||||||
|
} else {
|
||||||
|
style =
|
||||||
|
"margin-left:" + margin + "rem;margin-top:" + margin + "rem;";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "6":
|
||||||
|
{
|
||||||
|
if (i == 0) {
|
||||||
|
imgwidth = width * 2;
|
||||||
|
style = "margin-bottom:" + margin + "rem;";
|
||||||
|
} else if (i == 1) {
|
||||||
|
style =
|
||||||
|
"margin-right:" + margin + "rem;margin-top:" + margin + "rem;";
|
||||||
|
} else {
|
||||||
|
style =
|
||||||
|
"margin-left:" + margin + "rem;margin-top:" + margin + "rem;";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "7":
|
||||||
|
{
|
||||||
|
if (i == 0) {
|
||||||
|
style = "margin-right:" + margin + "rem;";
|
||||||
|
} else if (i == 1) {
|
||||||
|
style =
|
||||||
|
"margin-right:" + margin + "rem;margin-top:" + margin + "rem;";
|
||||||
|
} else if (i == 2) {
|
||||||
|
imgwidth = width / 2 - margin;
|
||||||
|
style =
|
||||||
|
"margin-left:" +
|
||||||
|
margin +
|
||||||
|
"rem;margin-top:" +
|
||||||
|
margin +
|
||||||
|
"rem;margin-right:" +
|
||||||
|
margin +
|
||||||
|
"rem";
|
||||||
|
} else {
|
||||||
|
imgwidth = width / 2 - margin;
|
||||||
|
style =
|
||||||
|
"margin-left:" + margin + "rem;margin-top:" + margin + "rem;";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
item.style = style;
|
||||||
|
item.imgwidth = imgwidth;
|
||||||
|
imagelist.push(item);
|
||||||
|
}
|
||||||
|
this.data.images = imagelist;
|
||||||
|
},
|
||||||
|
computed: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<van-swipe :autoplay="3000" v-if="data.type=='1'" :style="'height:'+height+'px'" >
|
||||||
|
<van-swipe-item v-for="(image,index) in data.imagelist" :key="index" >
|
||||||
|
<a :href="image.url">
|
||||||
|
<img v-lazy="image.src+''" style="width: 100%;" />
|
||||||
|
</a>
|
||||||
|
</van-swipe-item>
|
||||||
|
</van-swipe>
|
||||||
|
<ul v-if="data.type=='2'">
|
||||||
|
<li v-for="(image,index) in data.imagelist" :key="index" class="cap-image-ad__content" :style="'margin:'+data.imagegap+'px 0px;'">
|
||||||
|
<div class="image-wrapper">
|
||||||
|
<a :href="image.url">
|
||||||
|
<img alt="" class="cap-image-ad__image" v-lazy="image.src+''" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div v-if="data.type=='3'||data.type=='4'||data.type=='5'" class='cap-image-ad__image-nav' style='overflow-x:scroll;' >
|
||||||
|
<div v-for="(item,index) in data.imagelist" :key="index" class="image-wrapper" :style="'width:'+(data.type=='3'?'80':(data.type=='4'?'40':'20'))+'%;margin-right:'+data.imagegap+'px;'">
|
||||||
|
<a :href="item.link" class="cap-image-ad__link cap-image-ad__link--image-nav" >
|
||||||
|
<div class="cap-image-ad__image">
|
||||||
|
<img :src="item.src+'?w=640'" style="width: 100%; " />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name:'imageAd',
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
data:Object
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
height:0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
if(this.data.imagelist.length==0||this.data.type!='1'){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var that=this;
|
||||||
|
var image =this.data.imagelist[0];
|
||||||
|
let img = new Image()
|
||||||
|
img.src = image.src;
|
||||||
|
var width= window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||||||
|
img.onload = function () {
|
||||||
|
that.height= Math.ceil(img.height/img.width * width);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<div :class='(data.type == "1" ? "cap-image-ad__image-nav" : "cap-image-ad__slide cap-image-ad__text-nav")' :style='"overflow-x:"+(data.showtype == "1" ? "hidden" : "scroll")+"; background-color:"+data.backgroundcolor' >
|
||||||
|
<div v-if="data.type == '1'" v-for="(item,index) in data.imagelist" :key="index" class="image-wrapper" :style="'width:'+ data.width+'%; margin-right: 0px;'">
|
||||||
|
<a :href="item.link" class="cap-image-ad__link cap-image-ad__link--image-nav" :style="'color:'+data.color">
|
||||||
|
<div class="cap-image-ad__image">
|
||||||
|
<img v-lazy="item.src+'?w=320'" style="width: 100%; " />
|
||||||
|
</div>
|
||||||
|
<h3 v-if="item.title!=''" class="cap-image-ad__nav-title">{{item.title}}</h3>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a v-if="data.type=='2'" v-for="(item,index) in data.imagelist" :key="index" :href="item.link" class="text-nav-wrapper" :style="'width:'+data.width+'%; color: '+data.color+'; background-color: '+data.backgroundcolor"><h3 class="cap-image-ad__nav-title">{{item.title}}</h3></a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'imageText',
|
||||||
|
props:{
|
||||||
|
data:Object
|
||||||
|
},
|
||||||
|
created:function(){
|
||||||
|
var width = 0;
|
||||||
|
if (this.data.showtype == "1") {
|
||||||
|
width = 100 / this.data.imagelist.length;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
width = (100 * 0.95) / (this.data.shownumber - 1);
|
||||||
|
}
|
||||||
|
this.data.width=width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<template>
|
||||||
|
<div :style="divstyle" ><div :style="linestyle"></div></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'page-line',
|
||||||
|
props: {
|
||||||
|
data: Object,
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
divstyle(){
|
||||||
|
return{
|
||||||
|
height:"30px",
|
||||||
|
position:'relative',
|
||||||
|
margin:'0px '+this.data.margintype+'px'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
linestyle(){
|
||||||
|
return{
|
||||||
|
position:'absolute',
|
||||||
|
top:'14px',
|
||||||
|
width:'100%',
|
||||||
|
borderTop:'1px '+(this.data.type==undefined?'solid':this.data.type)+" "+(this.data.color==undefined?'#000':this.data.color),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<template>
|
||||||
|
<NoticeBar
|
||||||
|
:text="data.value"
|
||||||
|
:background="data.background"
|
||||||
|
:color="data.color"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { NoticeBar } from "vant";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name:'notice',
|
||||||
|
components:{
|
||||||
|
NoticeBar
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
data:Object
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<ul :class="'cap-goods-list__container cap-goods-list__container--'+data.classname+' cap-goods-list__container--'+data.ParameterDictionary.showtype+' '+(data.ParameterDictionary.type=='6'?'nowrap':'')" >
|
||||||
|
<li v-if="productlist.length==0" style="width:100%;height:150px;border:0px;">
|
||||||
|
<div style="width:100%;height:150px;"></div>
|
||||||
|
</li>
|
||||||
|
<li v-for="(item,index) in productlist" :key="index" :class="'cap-goods-list__wrapper '+(data.ParameterDictionary.type=='3'?(index%3==0?'cap-goods-list__wrapper--hybrid-big ':'cap-goods-list__wrapper--hybrid-small '):'')">
|
||||||
|
<router-link :class="'cap-goods-list__item cap-goods-list__item--'+data.classname+' '+data.ParameterDictionary.showtype+' '+data.aclass" :to="'/product/'+item.id">
|
||||||
|
<div class="cap-goods-list__photo">
|
||||||
|
<img class="cap-goods-list__img lazy lazyload" v-lazy="item.imageURL+'?w='+((data.ParameterDictionary.type=='1'||data.ParameterDictionary.type=='3')?'750':'375')" />
|
||||||
|
</div>
|
||||||
|
<div :class="'cap-goods-list__info has-title has-price '+(data.ParameterDictionary.showtype == 'card'?'has-btn':'')">
|
||||||
|
<h3 class="title">{{item.title}}</h3>
|
||||||
|
<p class="sale-info">
|
||||||
|
<span class="sale-price">¥ {{item.price}}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div v-if="data.ParameterDictionary.showtype == 'card'" class="cap-goods-list__buy-btn-wrapper cap-goods-list__buy-btn-wrapper--4">
|
||||||
|
<button class="cap-goods-list__buy-btn-4 van-button van-button--default van-button--small">{{data.ParameterDictionary.buttonvalue}}</button>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div style="clear:both;"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getProduct} from "../../api/page.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name:'product',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
productlist: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
data:Object
|
||||||
|
},
|
||||||
|
created:function(){
|
||||||
|
var id=this.data.PageSectionId;
|
||||||
|
var data=this.data;
|
||||||
|
var classname = "big";
|
||||||
|
var aclass = "";
|
||||||
|
switch (data.ParameterDictionary.type) {
|
||||||
|
case "1":
|
||||||
|
aclass = "cap-goods-list__item--btn1 cap-goods-list__item--ratio-3-2 cap-goods-list__item--whitespace";
|
||||||
|
break;
|
||||||
|
case "2":
|
||||||
|
classname = "small";
|
||||||
|
aclass = "cap-goods-list__item--btn1 cap-goods-list__item--padding";
|
||||||
|
break;
|
||||||
|
case "3":
|
||||||
|
classname = "hybrid";
|
||||||
|
aclass = "cap-goods-list__item--big cap-goods-list__item--hybrid-big cap-goods-list__item--btn1 cap-goods-list__item--padding";
|
||||||
|
break;
|
||||||
|
case "4":
|
||||||
|
classname = "list";
|
||||||
|
aclass = "cap-goods-list__item--btn4 cap-goods-list__item--padding";
|
||||||
|
break;
|
||||||
|
case "5":
|
||||||
|
classname = "three";
|
||||||
|
aclass = "cap-goods-list__item--btn4 cap-goods-list__item--padding";
|
||||||
|
break;
|
||||||
|
case "6":
|
||||||
|
classname = "three";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
data.classname=classname;
|
||||||
|
data.aclass=aclass;
|
||||||
|
getProduct(id).then(response => {
|
||||||
|
this.productlist=response;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<div class="search-box" :style="boxstyle" >
|
||||||
|
<div class="search-box__view" :style="boxviewstyle">
|
||||||
|
<div class="search">
|
||||||
|
<div :class="'search__filed search__filed--'+data.textalign+' search__filed--'+(data.boxtype=='2'?'circle':'rect')" :style="'background-color:'+(data.boxcolor==undefined?'#ffffff':data.boxcolor)+';'">
|
||||||
|
<van-icon name="search" class="icon-search" size="14px" :color="data.color" />
|
||||||
|
<div class="cell field" :style="data.textalign=='left'?'':'width: 80px;'">
|
||||||
|
<div class="cell__value cell__value--alone">
|
||||||
|
<div class="field__body">
|
||||||
|
<input type="search" :placeholder="data.keyword==''||data.keyword==undefined?'商品搜索':data.keyword" class="field__control" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name:'search',
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
data:Object
|
||||||
|
},
|
||||||
|
created:function(){
|
||||||
|
if(this.data.position=='fixed'){
|
||||||
|
this.$emit('settopheight', 50);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
boxstyle(){
|
||||||
|
if(this.data.position=='fixed'){
|
||||||
|
return{
|
||||||
|
position:'fixed',
|
||||||
|
top: 0,
|
||||||
|
zIndex: 10,
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
return{}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
boxviewstyle(){
|
||||||
|
return{
|
||||||
|
background: (this.data.backgroundcolor==undefined?"#f9f9f9":this.data.backgroundcolor),
|
||||||
|
paddingRight: '15px',
|
||||||
|
top:'0px' ,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<div :style="style">{{data.value}}</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'page-text',
|
||||||
|
props:{
|
||||||
|
data:Object
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
style(){
|
||||||
|
return{
|
||||||
|
position:'relative',
|
||||||
|
padding: '10px',
|
||||||
|
fontSize:(this.data.fontsize==undefined?'10':this.data.fontsize)+'px',
|
||||||
|
color:(this.data.color==undefined?'#000':this.data.color),
|
||||||
|
background:this.data.backgroundcolor,
|
||||||
|
textAlign:this.data.textalign,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<template>
|
||||||
|
<a :href="data.link">
|
||||||
|
<div v-if="data.type == '1'" class="cap-title cap-title--normal" :style="'background-color:'+data.backgroundcolor+'; text-align:'+data.textalign+';color:'+data.color">
|
||||||
|
<h2 class="cap-title__main">{{data.title}}</h2>
|
||||||
|
<p v-if="data.subtitle!=undefined&&data.subtitle!=''" class="cap-title__sub"><span class="cap-title__sub-title">{{data.subtitle}}</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="data.type == '2'" class="title" :style="'background:'+data.backgroundcolor+';text-align:'+data.textalign">
|
||||||
|
<span :style="data.color==''?'':'border-bottom: 1px solid '+data.color+';color:'+data.color+';'">{{data.title}}</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'page-title',
|
||||||
|
props:{
|
||||||
|
data:Object
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<div :style="style"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'whitespace',
|
||||||
|
props: {
|
||||||
|
data: Object,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
style() {
|
||||||
|
return {
|
||||||
|
height: (this.data.height==undefined?'30':this.data.height)+"px",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<van-nav-bar left-arrow class="product-serach"
|
||||||
|
@click-left="onBack"
|
||||||
|
>
|
||||||
|
<van-search
|
||||||
|
v-model="value"
|
||||||
|
placeholder="请输入搜索关键词"
|
||||||
|
background="#fff"
|
||||||
|
show-action
|
||||||
|
@search="onSearch"
|
||||||
|
slot="title"
|
||||||
|
>
|
||||||
|
<div slot="action" @click="onSearch">搜索</div>
|
||||||
|
</van-search>
|
||||||
|
</van-nav-bar>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Search } from "vant";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name:'searchtop',
|
||||||
|
components:{
|
||||||
|
[Search.name]:Search,
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
value:'',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
onSearch() {
|
||||||
|
console.log(this.value);
|
||||||
|
},
|
||||||
|
onBack() {
|
||||||
|
history.back();
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.product-serach{
|
||||||
|
.van-search{
|
||||||
|
padding: 7px 0;
|
||||||
|
background: #fff;
|
||||||
|
.van-cell{
|
||||||
|
background: rgb(242, 242, 242);
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.van-search__action{
|
||||||
|
background: #e93b3d;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.van-nav-bar__title{
|
||||||
|
margin: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
|
||||||
|
import headerNav from '../components/header/nav';
|
||||||
|
|
||||||
|
import navigate from '../components/footer/navigate.vue'
|
||||||
|
import productcard from '../components/common/productcard.vue'
|
||||||
|
import {
|
||||||
|
Tag,
|
||||||
|
Col,
|
||||||
|
Icon,
|
||||||
|
Cell,
|
||||||
|
CellGroup,
|
||||||
|
Swipe,
|
||||||
|
Toast,
|
||||||
|
SwipeItem,
|
||||||
|
GoodsAction,
|
||||||
|
GoodsActionBigBtn,
|
||||||
|
GoodsActionMiniBtn,
|
||||||
|
Actionsheet,
|
||||||
|
Sku,
|
||||||
|
Card,Button,SwipeCell,Dialog,Tab, Tabs,Row,Checkbox, CheckboxGroup, SubmitBar,NavBar,Tabbar, TabbarItem,Panel,List,Step, Steps,Field ,
|
||||||
|
Badge, BadgeGroup,Popup,Stepper,RadioGroup, Radio,Picker,Uploader,Info
|
||||||
|
} from 'vant';
|
||||||
|
|
||||||
|
const components=[
|
||||||
|
Tag,
|
||||||
|
Col,
|
||||||
|
Icon,
|
||||||
|
Cell,
|
||||||
|
CellGroup,
|
||||||
|
Swipe,
|
||||||
|
SwipeItem,
|
||||||
|
GoodsAction,
|
||||||
|
GoodsActionBigBtn,
|
||||||
|
GoodsActionMiniBtn,
|
||||||
|
Actionsheet,
|
||||||
|
Sku,
|
||||||
|
Card,
|
||||||
|
Button,
|
||||||
|
SwipeCell ,
|
||||||
|
Dialog ,
|
||||||
|
headerNav,
|
||||||
|
Tab, Tabs,Toast,Row,Checkbox, CheckboxGroup, SubmitBar,NavBar ,Tabbar, TabbarItem,navigate,Panel,List ,Step, Steps,Field ,
|
||||||
|
Badge, BadgeGroup,Popup,productcard,Stepper,RadioGroup, Radio,Picker,Uploader,Info
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
export default (Vue)=>{
|
||||||
|
components.forEach(Component => {
|
||||||
|
Vue.component(Component.name, Component)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
/**
|
||||||
|
* 配置编译环境和线上环境之间的切换
|
||||||
|
*
|
||||||
|
* baseUrl: 域名地址
|
||||||
|
* routerMode: 路由模式
|
||||||
|
* dataSources：数据源
|
||||||
|
*/
|
||||||
|
|
||||||
|
let baseUrl = '';
|
||||||
|
let routerMode = 'hash';
|
||||||
|
let dataSources='local';//local=本地，其他值代表非本地
|
||||||
|
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV == 'development') {
|
||||||
|
baseUrl='';
|
||||||
|
|
||||||
|
}else if(process.env.NODE_ENV == 'production'){
|
||||||
|
baseUrl = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
baseUrl,
|
||||||
|
routerMode,
|
||||||
|
dataSources,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
(function(d, w) {
|
||||||
|
const doc = d.documentElement;
|
||||||
|
function rem() {
|
||||||
|
const width = Math.min(doc.getBoundingClientRect().width, 768);
|
||||||
|
doc.style.fontSize = width / 7.5 + 'px';
|
||||||
|
}
|
||||||
|
rem();
|
||||||
|
w.addEventListener('resize', rem);
|
||||||
|
})(document, window);
|
||||||
|
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
|
||||||
|
import axios from 'axios'
|
||||||
|
import {baseUrl,dataSources} from './env';
|
||||||
|
import datas from '../data/data';
|
||||||
|
|
||||||
|
|
||||||
|
const service =axios.create({
|
||||||
|
baseURL: baseUrl, // api 的 base_url
|
||||||
|
timeout: 5000, // request timeout
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const servicef =function(parameter){
|
||||||
|
if(dataSources=='local'){
|
||||||
|
//定义回调函数和axios一致
|
||||||
|
const promist = new Promise(function(resolve,reject){
|
||||||
|
var data=datas[parameter.url];
|
||||||
|
if(typeof data=='string'){
|
||||||
|
data= JSON.parse(data);
|
||||||
|
}
|
||||||
|
resolve(data);
|
||||||
|
})
|
||||||
|
return promist;
|
||||||
|
}
|
||||||
|
return service(parameter);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
service.interceptors.request.use(
|
||||||
|
config => {
|
||||||
|
// Do something before request is sent
|
||||||
|
// if (store.getters.token) {
|
||||||
|
// // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
|
||||||
|
// config.headers['X-Token'] = getToken()
|
||||||
|
// }
|
||||||
|
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
// Do something with request error
|
||||||
|
console.log(error) // for debug
|
||||||
|
Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// response interceptor
|
||||||
|
service.interceptors.response.use(
|
||||||
|
//response => response,
|
||||||
|
/**
|
||||||
|
* 下面的注释为通过在response里，自定义code来标示请求状态
|
||||||
|
* 当code返回如下情况则说明权限有问题，登出并返回到登录页
|
||||||
|
* 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
|
||||||
|
* 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
|
||||||
|
*/
|
||||||
|
response => {
|
||||||
|
const res = response.data;
|
||||||
|
if (res.ResultCode !== 200) {
|
||||||
|
// Message({
|
||||||
|
// message: res.message,
|
||||||
|
// type: 'error',
|
||||||
|
// duration: 5 * 1000
|
||||||
|
// })
|
||||||
|
// // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
|
||||||
|
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
|
||||||
|
// // 请自行在引入 MessageBox
|
||||||
|
// // import { Message, MessageBox } from 'element-ui'
|
||||||
|
// MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
|
||||||
|
// confirmButtonText: '重新登录',
|
||||||
|
// cancelButtonText: '取消',
|
||||||
|
// type: 'warning'
|
||||||
|
// }).then(() => {
|
||||||
|
// store.dispatch('FedLogOut').then(() => {
|
||||||
|
// location.reload() // 为了重新实例化vue-router对象 避免bug
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
console.log(1);
|
||||||
|
return Promise.reject('error')
|
||||||
|
} else {
|
||||||
|
if(typeof response.data.Tag=='string'){
|
||||||
|
return JSON.parse(response.data.Tag);
|
||||||
|
}else{
|
||||||
|
return response.data.Tag;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
export default servicef
|
||||||
|
|
@ -0,0 +1,200 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
import Router from 'vue-router';
|
||||||
|
|
||||||
|
Vue.use(Router);
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '*',
|
||||||
|
redirect: '/home'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'home',
|
||||||
|
component: () => import('../page/index'),
|
||||||
|
meta: {
|
||||||
|
title: '首页'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
component: () => import('../page/account/login'),
|
||||||
|
meta: {
|
||||||
|
title: '登录'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login/password',
|
||||||
|
component: () => import('../page/account/password'),
|
||||||
|
meta: {
|
||||||
|
title: '登录'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login/phone',
|
||||||
|
component: () => import('../page/account/phonelogin'),
|
||||||
|
meta: {
|
||||||
|
title: '手机号登录'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login/register',
|
||||||
|
component: () => import('../page/account/register'),
|
||||||
|
meta: {
|
||||||
|
title: '注册'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/index',
|
||||||
|
component: () => import('../page/user/index'),
|
||||||
|
name: 'user',
|
||||||
|
meta: {
|
||||||
|
title: '会员中心'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/info',
|
||||||
|
component: () => import('../page/user/info/detail'),
|
||||||
|
name: 'user',
|
||||||
|
meta: {
|
||||||
|
title: '账号管理'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/address',
|
||||||
|
component: () => import('../page/user/address/list'),
|
||||||
|
meta: {
|
||||||
|
title: '我的地址'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/address/edit',
|
||||||
|
component: () => import('../page/user/address/edit'),
|
||||||
|
meta: {
|
||||||
|
title: '修改地址'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/favorite',
|
||||||
|
component: () => import('../page/user/favorite/list'),
|
||||||
|
meta: {
|
||||||
|
title: '我的收藏'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/coupon',
|
||||||
|
component: () => import('../page/user/coupon/list'),
|
||||||
|
meta: {
|
||||||
|
title: '我的优惠券'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/order',
|
||||||
|
component: () => import('../page/user/order/list'),
|
||||||
|
meta: {
|
||||||
|
title: '我的订单'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/order/:id',
|
||||||
|
component: () => import('../page/user/order/list'),
|
||||||
|
meta: {
|
||||||
|
title: '我的订单'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/order/info/:id',
|
||||||
|
component: () => import('../page/user/order/info'),
|
||||||
|
meta: {
|
||||||
|
title: '我的订单'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/order/logistics/:id',
|
||||||
|
component: () => import('../page/user/order/logistics'),
|
||||||
|
meta: {
|
||||||
|
title: '订单追踪'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/aftersale',
|
||||||
|
component: () => import('../page/user/aftersale/list'),
|
||||||
|
meta: {
|
||||||
|
title: '售后'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/aftersale/apply',
|
||||||
|
component: () => import('../page/user/aftersale/apply'),
|
||||||
|
meta: {
|
||||||
|
title: '申请售后'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/aftersale/detail',
|
||||||
|
component: () => import('../page/user/aftersale/detail'),
|
||||||
|
meta: {
|
||||||
|
title: '服务单详情'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/aftersale/track/:id',
|
||||||
|
component: () => import('../page/user/aftersale/track'),
|
||||||
|
meta: {
|
||||||
|
title: '进度详情'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/product/:id',
|
||||||
|
component: () => import('../page/product/detail'),
|
||||||
|
meta: {
|
||||||
|
title: '商品详情'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/search',
|
||||||
|
component: () => import('../page/product/list'),
|
||||||
|
meta: {
|
||||||
|
title: '商品列表'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'cart',
|
||||||
|
component: () => import('../page/cart/index'),
|
||||||
|
meta: {
|
||||||
|
title: '购物车'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/order',
|
||||||
|
component: () => import('../page/shipping/order'),
|
||||||
|
meta: {
|
||||||
|
title: '确认订单'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'category',
|
||||||
|
component: () => import('../page/category/index'),
|
||||||
|
meta: {
|
||||||
|
title: '分类'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// add route path
|
||||||
|
routes.forEach(route => {
|
||||||
|
route.path = route.path || '/' + (route.name || '');
|
||||||
|
});
|
||||||
|
|
||||||
|
const router = new Router({ routes });
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
const title = to.meta && to.meta.title;
|
||||||
|
if (title) {
|
||||||
|
document.title = title;
|
||||||
|
}
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
|
||||||
|
export {
|
||||||
|
router
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
|
||||||
|
import success from './common/success.json'
|
||||||
|
|
||||||
|
import GetPage from './page/GetPage.json'
|
||||||
|
import PageProduct from './page/Product.json'
|
||||||
|
|
||||||
|
import GetUserIndex from './user/GetUserIndex.json'
|
||||||
|
import GetFavorite from './user/GetFavorite.json'
|
||||||
|
|
||||||
|
import GetAddressList from './user/GetAddressList.json'
|
||||||
|
import GetAddressById from './user/GetAddressById.json'
|
||||||
|
|
||||||
|
import GetCoupon from './user/GetCoupon.json'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
'/Page/GetPage':GetPage,
|
||||||
|
|
||||||
|
'/Page/Product':PageProduct,
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
'/User/GetUserIndex':GetUserIndex,
|
||||||
|
'/User/GetFavorite':GetFavorite,
|
||||||
|
'/User/DelFavorite':success,
|
||||||
|
|
||||||
|
'/User/GetAddressList':GetAddressList,
|
||||||
|
'/User/GetAddressById':GetAddressById,
|
||||||
|
|
||||||
|
'/User/SaveAddress':success,
|
||||||
|
'/User/DelAddress':success,
|
||||||
|
|
||||||
|
'/User/GetCoupon':GetCoupon,
|
||||||
|
'/User/ExchangeCoupon':success,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,288 @@
|
||||||
|
{
|
||||||
|
"PageId": 11,
|
||||||
|
"Name": "仿考拉",
|
||||||
|
"BackgroundColor": "",
|
||||||
|
"Sections": [
|
||||||
|
{
|
||||||
|
"PageSectionId": 2511,
|
||||||
|
"Code": "Search",
|
||||||
|
"ParameterDictionary": {
|
||||||
|
"keyword": "搜索商品",
|
||||||
|
"position": "fixed",
|
||||||
|
"backgroundcolor": "#f9f9f9",
|
||||||
|
"color": "#999999",
|
||||||
|
"textalign": "center",
|
||||||
|
"boxcolor": "#ffffff",
|
||||||
|
"boxtype": "2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PageSectionId": 2512,
|
||||||
|
"Code": "ImageAd",
|
||||||
|
"ParameterDictionary": {
|
||||||
|
"type": "1",
|
||||||
|
"imagegap": "0",
|
||||||
|
"shownumber": "4",
|
||||||
|
"imagelist": [
|
||||||
|
{
|
||||||
|
"link": "/#/search?categoryid=12",
|
||||||
|
"src": "https://haitao.nos.netease.com/6BXWTT4KF3v2CCD1KVT1809182052_960_480.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "/#/product/4",
|
||||||
|
"src": "https://haitao.nosdn2.127.net/ThUbIr9WnE7TbTwTapp-kvAiT1809190053_960_480.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "/#/product/4",
|
||||||
|
"src": "https://haitao.nos.netease.com/f3kJUUtkrDbsiU1LtopkHcBGgT1809182243_960_480.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "/#/product/4",
|
||||||
|
"src": "https://haitao.nosdn2.127.net/EWQ1UI83HQ03U2TLaeShRtEhK19n7175ceTT1809191639_960_480.jpg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PageSectionId": 2513,
|
||||||
|
"Code": "ImageAd",
|
||||||
|
"ParameterDictionary": {
|
||||||
|
"type": "2",
|
||||||
|
"imagegap": "0",
|
||||||
|
"shownumber": "4",
|
||||||
|
"imagelist": [
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"linkname": "",
|
||||||
|
"src": "https://haitao.nos.netease.com/gr4TfN5hhFhFg1CaUgya1mdkPDLpE4WTT1806271501_1125_144.png",
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PageSectionId": 2514,
|
||||||
|
"Code": "ImageText",
|
||||||
|
"ParameterDictionary": {
|
||||||
|
"type": "1",
|
||||||
|
"showtype": "1",
|
||||||
|
"shownumber": "4",
|
||||||
|
"color": "",
|
||||||
|
"backgroundcolor": "",
|
||||||
|
"imagelist": [
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nos.netease.com/gefNTDIqyQsSAEtSpy222T1808221621_192_220.jpg",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nosdn2.127.net/NVSMWxQKvHyakuP6WruN3T1809031519_192_220.jpg",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nosdn1.127.net/2dWeQg9FCfC8whIZWhac4T1809031520_192_220.jpg",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nosdn1.127.net/kZZ6h45lVQhRZLOJPHJd1T1808171739_192_220.jpg",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nosdn1.127.net/VNeftDVe3h9rgEq7MtfDT1809061111_192_220.jpg",
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PageSectionId": 2515,
|
||||||
|
"Code": "ImageText",
|
||||||
|
"ParameterDictionary": {
|
||||||
|
"type": "1",
|
||||||
|
"showtype": "1",
|
||||||
|
"shownumber": "4",
|
||||||
|
"color": "",
|
||||||
|
"backgroundcolor": "",
|
||||||
|
"imagelist": [
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nosdn2.127.net/GvpaR0ThVvgBkgT7Vf0yxk2T1809181557_192_220.jpg",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nos.netease.com/EqTdbMtyfOtDzr0DtcTD90hr2T1809031521_192_220.jpg",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nosdn2.127.net/Bkbtx8pB7u6B5S9OCU4Eir2f1T1808171744_192_220.jpg",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nosdn2.127.net/PnANhp9RpFloeI9VhfPXg8T1808171745_192_220.png",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nos.netease.com/HT4D5CRc3ZZRsuRkeCnTT1808171746_192_220.jpg",
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PageSectionId": 2516,
|
||||||
|
"Code": "ImageAd",
|
||||||
|
"ParameterDictionary": {
|
||||||
|
"type": "2",
|
||||||
|
"imagegap": "0",
|
||||||
|
"shownumber": "4",
|
||||||
|
"imagelist": [
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"linkname": "",
|
||||||
|
"src": "https://haitao.nosdn1.127.net/rzvfEZzFfvTgcrpb08mQgM8w5BpTwC_02T1809190045_960_251.gif",
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PageSectionId": 2517,
|
||||||
|
"Code": "Cube",
|
||||||
|
"ParameterDictionary": {
|
||||||
|
"type": "5",
|
||||||
|
"imagegap": "0",
|
||||||
|
"imagelist": [
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nosdn2.127.net/UgGLMbgT8N2UfcbFeTw41p6TpSBEVC_03T1809190112_480_480.gif",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nos.netease.com/qOKOCqh4eAamM9PDxgl7tKEz8g-04-1T1809181138_480_240.jpg",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nos.netease.com/APF1FTPcSWKGBg42uc064xW5kR_05T1809182215_480_240.jpg",
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PageSectionId": 2519,
|
||||||
|
"Code": "Cube",
|
||||||
|
"ParameterDictionary": {
|
||||||
|
"type": "1",
|
||||||
|
"imagegap": "0",
|
||||||
|
"imagelist": [
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nos.netease.com/b65wuwPeNGKwoKeccKhkqD6R1m_01T1809182202_480_355.gif",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nos.netease.com/saDSBpfhpS27uHOrPOAHH7ErSv_02T1809182202_480_355.gif",
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PageSectionId": 2520,
|
||||||
|
"Code": "Cube",
|
||||||
|
"ParameterDictionary": {
|
||||||
|
"type": "4",
|
||||||
|
"imagegap": "0",
|
||||||
|
"imagelist": [
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"linkname": "",
|
||||||
|
"src": "https://haitao.nosdn1.127.net/QlMddWV2hDkmMUtU919dmtkwCvQKFWTT0qf-206BcFSZ7F_19T1809191525_480_228.jpg",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"linkname": "",
|
||||||
|
"src": "https://haitao.nos.netease.com/yUAxhIA12tWlsl5v919lN6CEX6A84TTy6No-20VLH2mLet_20T1809191525_480_228.jpg",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nos.netease.com/7Ukzzw7E0rcAv06O919w4K3DWhs0nGV5HsN-191LuUSSQQ_33T1809191353_480_305.jpg",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"linkname": "",
|
||||||
|
"src": "https://haitao.nosdn1.127.net/TcWBRJmHKdW7t7oy919fSHnqbHeHcB7U3EN-191akaZTSf_34T1809191354_480_305.jpg",
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PageSectionId": 2521,
|
||||||
|
"Code": "ImageAd",
|
||||||
|
"ParameterDictionary": {
|
||||||
|
"type": "2",
|
||||||
|
"imagegap": "0",
|
||||||
|
"shownumber": "4",
|
||||||
|
"imagelist": [
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nosdn2.127.net/8v8Qd4gikpeGTMgcjingxuan_huodong111T170101801048_960_190.png",
|
||||||
|
"title": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nosdn1.127.net/hx0gzgVHpyeT41gmk9kURttb-960-480-7ZhaNcOET1809182240_960_480.jpg",
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PageSectionId": 2521,
|
||||||
|
"Code": "ImageAd",
|
||||||
|
"ParameterDictionary": {
|
||||||
|
"type": "2",
|
||||||
|
"imagegap": "0",
|
||||||
|
"shownumber": "4",
|
||||||
|
"imagelist": [
|
||||||
|
{
|
||||||
|
"link": "",
|
||||||
|
"src": "https://haitao.nosdn1.127.net/61556274-32ef-44bf-84af-b3d4485ac157.png",
|
||||||
|
"title": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PageSectionId": 2522,
|
||||||
|
"Code": "Product",
|
||||||
|
"ParameterDictionary": {
|
||||||
|
"type": "2",
|
||||||
|
"source": "1",
|
||||||
|
"showsort": "0",
|
||||||
|
"shownumber": "6",
|
||||||
|
"tag": "0",
|
||||||
|
"showtype": "simple",
|
||||||
|
"buttonvalue": "购买",
|
||||||
|
"productids": "4,1,3",
|
||||||
|
"productcategoryid": "",
|
||||||
|
"producttagid": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"title": "Naturie imju 薏仁美白保湿防晒化妆水 500毫升 我是大美人强推 ",
|
||||||
|
"price": "55.00",
|
||||||
|
"imageURL": "https://haitao.nos.netease.com/50c2fafd909f489e9ebd3418cd90a1711533208260850jkcgm1fq10072.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"title": "Ryo 吕 棕吕（原黄吕）防脱固发滋养 洗发水*2+护发素*1 500毫升/瓶",
|
||||||
|
"price": "105.00",
|
||||||
|
"imageURL": "https://haitao.nosdn2.127.net/bc977ba46ed74158b6b3386eaf27f7f81530241584513jizebvc810863.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"title": "【维持泌尿健康】Swisse 高浓度蔓越莓 30粒/瓶 2瓶",
|
||||||
|
"price": "158.00",
|
||||||
|
"imageURL": "https://haitao.nosdn1.127.net/onlineic1jqd6p10155.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 5,
|
||||||
|
"title": "【真正的有机糙米】EARTH'S BEST 有机纯米粉 227克",
|
||||||
|
"price": "35.00",
|
||||||
|
"imageURL": "https://haitao.nos.netease.com/31f78c55a2114eb5a287b38b6475e5fd1513067124727jb3d3lcr19243.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 6,
|
||||||
|
"title": "SK-II 嫩肤清莹露 160毫升",
|
||||||
|
"price": "358.00",
|
||||||
|
"imageURL": "https://haitao.nosdn2.127.net/insm5qxq58_800_800.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 7,
|
||||||
|
"title": "【领券立减100】SK-II小灯泡30ml套装 (小灯泡30ml+神仙水10ml+清莹露10ml+精华霜2.5g)",
|
||||||
|
"price": "1286.00",
|
||||||
|
"imageURL": "https://pop.nosdn.127.net/d336d1f7-670d-40b6-ab58-921012c6b176"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 8,
|
||||||
|
"title": "Apple 苹果 iPhone X 64GB 移动联通4G手机 港版",
|
||||||
|
"price": "6799.00",
|
||||||
|
"imageURL": "https://pop.nosdn.127.net/7936968b-3db1-441d-822b-e9616d01c0f6"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 9,
|
||||||
|
"title": "【不伤宝宝初生牙龈】HAPPY BABY 禧贝婴幼儿温和有机磨牙饼干 香蕉甘薯 48克/盒",
|
||||||
|
"price": "56.00",
|
||||||
|
"imageURL": "https://haitao.nos.netease.com/485c149f5ceb4d6a837a67910236048715354385972231.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 10,
|
||||||
|
"title": "Dior 迪奥 粉漾魅惑变色润唇膏 04#橘色 3.5克",
|
||||||
|
"price": "179.00",
|
||||||
|
"imageURL": "https://haitao.nosdn2.127.net/ix7gkb6581_800_800.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 10,
|
||||||
|
"title": "ÍpsΛ 茵芙莎 流金岁月美肤水 200毫升",
|
||||||
|
"price": "328.00",
|
||||||
|
"imageURL": "https://haitao.nosdn2.127.net/0938e26c883f451b9387b9daf6b5ed9d1537025125829jm3l2par10687.jpg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
export default {
|
||||||
|
kdt_id: 55,
|
||||||
|
user_id: 4674509,
|
||||||
|
offline_id: 0,
|
||||||
|
activity_alias: '',
|
||||||
|
sku: {
|
||||||
|
tree: [
|
||||||
|
{
|
||||||
|
k: '颜色',
|
||||||
|
k_id: '1',
|
||||||
|
v: [
|
||||||
|
{
|
||||||
|
id: '30349',
|
||||||
|
name: '天蓝色',
|
||||||
|
imgUrl:
|
||||||
|
'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
k_s: 's1',
|
||||||
|
count: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
k: '尺寸',
|
||||||
|
k_id: '2',
|
||||||
|
v: [
|
||||||
|
{
|
||||||
|
id: '1193',
|
||||||
|
name: '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '1194',
|
||||||
|
name: '2'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
k_s: 's2',
|
||||||
|
count: 2
|
||||||
|
}
|
||||||
|
],
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
id: 2259,
|
||||||
|
price: 100,
|
||||||
|
discount: 100,
|
||||||
|
code: '',
|
||||||
|
s1: '1215',
|
||||||
|
s2: '1193',
|
||||||
|
s3: '0',
|
||||||
|
s4: '0',
|
||||||
|
s5: '0',
|
||||||
|
extend: null,
|
||||||
|
kdt_id: 55,
|
||||||
|
discount_price: 0,
|
||||||
|
stock_num: 110,
|
||||||
|
stock_mode: 0,
|
||||||
|
is_sell: null,
|
||||||
|
combin_sku: false,
|
||||||
|
goods_id: 946755
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2260,
|
||||||
|
price: 100,
|
||||||
|
discount: 100,
|
||||||
|
code: '',
|
||||||
|
s1: '1215',
|
||||||
|
s2: '1194',
|
||||||
|
s3: '0',
|
||||||
|
s4: '0',
|
||||||
|
s5: '0',
|
||||||
|
extend: null,
|
||||||
|
kdt_id: 55,
|
||||||
|
discount_price: 0,
|
||||||
|
stock_num: 0,
|
||||||
|
stock_mode: 0,
|
||||||
|
is_sell: null,
|
||||||
|
combin_sku: false,
|
||||||
|
goods_id: 946755
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2257,
|
||||||
|
price: 100,
|
||||||
|
discount: 100,
|
||||||
|
code: '',
|
||||||
|
s1: '30349',
|
||||||
|
s2: '1193',
|
||||||
|
s3: '0',
|
||||||
|
s4: '0',
|
||||||
|
s5: '0',
|
||||||
|
extend: null,
|
||||||
|
kdt_id: 55,
|
||||||
|
discount_price: 0,
|
||||||
|
stock_num: 111,
|
||||||
|
stock_mode: 0,
|
||||||
|
is_sell: null,
|
||||||
|
combin_sku: false,
|
||||||
|
goods_id: 946755
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2258,
|
||||||
|
price: 100,
|
||||||
|
discount: 100,
|
||||||
|
code: '',
|
||||||
|
s1: '30349',
|
||||||
|
s2: '1194',
|
||||||
|
s3: '0',
|
||||||
|
s4: '0',
|
||||||
|
s5: '0',
|
||||||
|
extend: null,
|
||||||
|
kdt_id: 55,
|
||||||
|
discount_price: 0,
|
||||||
|
stock_num: 6,
|
||||||
|
stock_mode: 0,
|
||||||
|
is_sell: null,
|
||||||
|
combin_sku: false,
|
||||||
|
goods_id: 946755
|
||||||
|
}
|
||||||
|
],
|
||||||
|
price: '1.00',
|
||||||
|
market_price:'10.00',
|
||||||
|
stock_num: 227,
|
||||||
|
collection_id: 2261,
|
||||||
|
collection_price: 0,
|
||||||
|
none_sku: false,
|
||||||
|
sold_num: 0,
|
||||||
|
min_price: '1.00',
|
||||||
|
max_price: '1.00',
|
||||||
|
messages: [
|
||||||
|
],
|
||||||
|
hide_stock: false
|
||||||
|
},
|
||||||
|
goods_id: '946755',
|
||||||
|
alias: '2oml0r0n5vytj',
|
||||||
|
quota: 15,
|
||||||
|
is_virtual: '0',
|
||||||
|
quota_used: 0,
|
||||||
|
goods_info: {
|
||||||
|
title: '测试商品',
|
||||||
|
picture:
|
||||||
|
'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
|
||||||
|
price: 1,
|
||||||
|
origin: ''
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
|
||||||
|
{
|
||||||
|
"id": "2",
|
||||||
|
"name": "李四",
|
||||||
|
"tel": "13108826530",
|
||||||
|
"areaCode": "712899",
|
||||||
|
"addressDetail": "浙江省杭州市拱墅区莫干山路 50 号",
|
||||||
|
"isDefault": false
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "1",
|
||||||
|
"name": "张三",
|
||||||
|
"tel": "13000000000",
|
||||||
|
"address": "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "2",
|
||||||
|
"name": "李四",
|
||||||
|
"tel": "1310000000",
|
||||||
|
"address": "浙江省杭州市拱墅区莫干山路 50 号"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
{
|
||||||
|
"TotalPage":5,
|
||||||
|
"List":[
|
||||||
|
{
|
||||||
|
"Id":12,
|
||||||
|
"Name":"仅可购买自营图书文娱商品",
|
||||||
|
"BeginDate":"2018.09.05",
|
||||||
|
"EndDate":"2018.09.28",
|
||||||
|
"Condition":"满199元可用",
|
||||||
|
"SignPosition":"right",
|
||||||
|
"Coupon":"75",
|
||||||
|
"Sign":"折",
|
||||||
|
"Info":"限品类：仅可购买自营图书文娱商品"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Id":13,
|
||||||
|
"Name":"全品类（特例商品除外）",
|
||||||
|
"BeginDate":"2018.09.05",
|
||||||
|
"EndDate":"2018.09.28",
|
||||||
|
"Condition":"满200元可用",
|
||||||
|
"SignPosition":"left",
|
||||||
|
"Coupon":"10",
|
||||||
|
"Sign":"￥",
|
||||||
|
"Info":""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"Id":14,
|
||||||
|
"Name":"运费券：京东部分自营商品",
|
||||||
|
"BeginDate":"2018.09.05",
|
||||||
|
"EndDate":"2018.09.28",
|
||||||
|
"Condition":"部分特殊商品运费除外",
|
||||||
|
"SignPosition":"left",
|
||||||
|
"Coupon":"6",
|
||||||
|
"Sign":"￥",
|
||||||
|
"Info":"1、运费券仅可用于抵减京东自营商品订单运费，即用户下单结算时，可选择该优惠券按券面值抵减每笔结算订单中的运费；2、虚拟商品及部分特殊购物流程不可用，特殊流程如秒杀等；"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
{
|
||||||
|
"TotalPage":5,
|
||||||
|
"list":[
|
||||||
|
{
|
||||||
|
"id":12,
|
||||||
|
"imageURL":"https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712",
|
||||||
|
"title":"BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套",
|
||||||
|
"price":"499"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":13,
|
||||||
|
"imageURL":"https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712",
|
||||||
|
"title":"BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套",
|
||||||
|
"price":"499"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":14,
|
||||||
|
"imageURL":"https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712",
|
||||||
|
"title":"BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套",
|
||||||
|
"price":"499"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":15,
|
||||||
|
"imageURL":"https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712",
|
||||||
|
"title":"BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套",
|
||||||
|
"price":"499"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":16,
|
||||||
|
"imageURL":"https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712",
|
||||||
|
"title":"BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套",
|
||||||
|
"price":"499"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"UserName":"Yrin",
|
||||||
|
"Avatar":"http://haitao.nos.netease.com/ZnB0PM5xDzXZ2FeVlmT170102401021_150_150.png",
|
||||||
|
"UnPayTotal":1,
|
||||||
|
"UnRecieveTotal":2,
|
||||||
|
"AfterSaleTotal":3
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { router } from './config/router';
|
||||||
|
import './config/rem';
|
||||||
|
import App from './App.vue';
|
||||||
|
import VueLazyload from 'vue-lazyload'
|
||||||
|
import components from './config/components.js';
|
||||||
|
Vue.use(components);
|
||||||
|
|
||||||
|
Vue.use(VueLazyload)
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
el: '#app',
|
||||||
|
render: h => h(App)
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="m-logo" style="background:url(//haitao.nos.netease.com/f866dd18-12f0-4bb2-be6d-5cac85cf2627.png) center 73px no-repeat;background-size:161px; text-align: center;
|
||||||
|
padding: 130px 0 0;
|
||||||
|
margin: 15px 0;"></div>
|
||||||
|
<div style="margin:0 10px;font-size: 14px;">
|
||||||
|
<router-link to="/login/phone">
|
||||||
|
<van-button size="large" style="font-size: 14px;height: 42px;line-height: 42px;margin-bottom: 15px;">手机号登录</van-button>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/login/password">
|
||||||
|
<van-button size="large" style="font-size: 14px;height: 42px;line-height: 42px;margin-bottom: 15px;">密码登录</van-button>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/login/register">
|
||||||
|
<van-button size="large" type="primary" style="font-size: 14px;height: 42px;line-height: 42px;">手机号一键注册</van-button>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="m-thirdpart">
|
||||||
|
<p class="tit"><span class="txt">或用以下方式登录</span></p>
|
||||||
|
<div class="lnk">
|
||||||
|
<van-icon name="wechat" color="#1AAD16" />
|
||||||
|
<van-icon name="alipay" color="#7dcbeb"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.m-thirdpart{
|
||||||
|
padding: 40px 20px 50px;
|
||||||
|
font-size: 12px;
|
||||||
|
.tit{
|
||||||
|
position: relative;
|
||||||
|
width: 215px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
.txt{
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: -12px;
|
||||||
|
margin: 0 0 0 -57px;
|
||||||
|
width: 114px;
|
||||||
|
background: #fff;
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
.lnk{
|
||||||
|
position: relative;
|
||||||
|
padding: 27px 0 0;
|
||||||
|
width: 280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
.van-icon{
|
||||||
|
font-size: 31px;
|
||||||
|
margin: 0 29px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<headerNav title="登录"/>
|
||||||
|
<div style="background:url(https://haitao.nos.netease.com/f866dd18-12f0-4bb2-be6d-5cac85cf2627.png) center 18px no-repeat;background-size:161px;">
|
||||||
|
<div style="padding-top: 70px;">
|
||||||
|
<van-cell-group>
|
||||||
|
<van-field
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
/>
|
||||||
|
<van-field
|
||||||
|
type="password"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
/>
|
||||||
|
</van-cell-group>
|
||||||
|
<div style="margin: 10px;">
|
||||||
|
<van-button size="large" type="primary" style="height: 45px;line-height:45px;">登录</van-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<headerNav title="手机号登录"/>
|
||||||
|
<div style="background:url(https://haitao.nos.netease.com/f866dd18-12f0-4bb2-be6d-5cac85cf2627.png) center 18px no-repeat;background-size:161px;">
|
||||||
|
<div style="padding-top: 70px;">
|
||||||
|
<van-cell-group>
|
||||||
|
<van-field
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
/>
|
||||||
|
<van-field
|
||||||
|
center
|
||||||
|
clearable
|
||||||
|
placeholder="请输入短信验证码"
|
||||||
|
>
|
||||||
|
<van-button slot="button" size="small" type="primary">发送验证码</van-button>
|
||||||
|
</van-field>
|
||||||
|
</van-cell-group>
|
||||||
|
<div style="margin: 10px;">
|
||||||
|
<van-button size="large" type="primary" style="height: 45px;line-height:45px;">登录</van-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<headerNav title="注册"/>
|
||||||
|
<div style="background:url(https://haitao.nos.netease.com/f866dd18-12f0-4bb2-be6d-5cac85cf2627.png) center 18px no-repeat;background-size:161px;">
|
||||||
|
<div style="padding-top: 70px;">
|
||||||
|
<van-cell-group>
|
||||||
|
<van-field
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
/>
|
||||||
|
<van-field
|
||||||
|
center
|
||||||
|
clearable
|
||||||
|
placeholder="请输入短信验证码"
|
||||||
|
>
|
||||||
|
<van-button slot="button" size="small" type="primary">发送验证码</van-button>
|
||||||
|
</van-field>
|
||||||
|
<van-field
|
||||||
|
type="password"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
/>
|
||||||
|
</van-cell-group>
|
||||||
|
<div style="margin: 10px;">
|
||||||
|
<van-button size="large" type="primary" style="height: 45px;line-height:45px;">注册</van-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<page/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import page from './page/page.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
page
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,205 @@
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<headerNav title="购物车"/>
|
||||||
|
<van-cell value="编辑商品" class="head">
|
||||||
|
<template slot="title">
|
||||||
|
<van-checkbox v-model="checkedAll" >全选</van-checkbox>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
|
||||||
|
<van-checkbox-group class="card-goods" v-model="checkedGoods">
|
||||||
|
|
||||||
|
<div class="promotion-group">
|
||||||
|
<div v-for="(item,index) in goods"
|
||||||
|
:key="index" class="card-goods__item">
|
||||||
|
<van-checkbox :name="item.id"></van-checkbox>
|
||||||
|
|
||||||
|
<product-card :product='item' :iscard='true' >
|
||||||
|
<template slot>
|
||||||
|
<van-cell value="修改" >
|
||||||
|
<template slot="title">
|
||||||
|
<van-tag type="danger">促销</van-tag>
|
||||||
|
<span class="van-cell-text" >满60元减5元</span>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
</template>
|
||||||
|
</product-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="promotion-group">
|
||||||
|
|
||||||
|
<van-cell is-link class="head">
|
||||||
|
<template slot="title">
|
||||||
|
<van-checkbox v-model="checkedAll" >京东自营</van-checkbox>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
|
||||||
|
|
||||||
|
<div v-for="(item,index) in goods"
|
||||||
|
:key="index+10" class="card-goods__item">
|
||||||
|
<van-checkbox :name="item.id"></van-checkbox>
|
||||||
|
|
||||||
|
<product-card :product='item' :iscard='true' >
|
||||||
|
<template slot>
|
||||||
|
<van-cell value="修改" >
|
||||||
|
<template slot="title">
|
||||||
|
<van-tag type="danger">促销</van-tag>
|
||||||
|
<span class="van-cell-text" >满60元减5元</span>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
</template>
|
||||||
|
</product-card>
|
||||||
|
</div>
|
||||||
|
<van-cell value="去凑单" is-link class="promotion">
|
||||||
|
<template slot="title">
|
||||||
|
<p><van-tag type="danger">满减</van-tag>购满60元，可减5元</p>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
<div v-for="(item,index) in goods"
|
||||||
|
:key="index+20" class="card-goods__item">
|
||||||
|
<van-checkbox :name="item.id"></van-checkbox>
|
||||||
|
|
||||||
|
<product-card :product='item' :iscard='true' >
|
||||||
|
<template slot>
|
||||||
|
<van-cell value="修改" >
|
||||||
|
<template slot="title">
|
||||||
|
<van-tag type="danger">促销</van-tag>
|
||||||
|
<span class="van-cell-text" >满60元减5元</span>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
</template>
|
||||||
|
</product-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</van-checkbox-group>
|
||||||
|
|
||||||
|
<div style="height:50px;"></div>
|
||||||
|
<van-submit-bar
|
||||||
|
:price="totalPrice"
|
||||||
|
:disabled="!checkedGoods.length"
|
||||||
|
:button-text="submitBarText"
|
||||||
|
@submit="onSubmit"
|
||||||
|
>
|
||||||
|
<template slot>
|
||||||
|
<van-checkbox v-model="checkedAll" >全选</van-checkbox>
|
||||||
|
</template>
|
||||||
|
</van-submit-bar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checkedAll:true,
|
||||||
|
checkedGoods: ['1', '2', '3'],
|
||||||
|
goods: [{
|
||||||
|
id: '1',
|
||||||
|
title: '星巴克(Starbucks)星冰乐 轻盈香草味 咖啡饮料 281ml*6瓶礼盒装低脂减糖',
|
||||||
|
desc: '3.18kg/件',
|
||||||
|
price: '200.00',
|
||||||
|
quantity: 1,
|
||||||
|
imageURL: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg',
|
||||||
|
imageTag:'比加入时降5元',
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
title: '陕西蜜梨',
|
||||||
|
desc: '约600g',
|
||||||
|
price: '690.00',
|
||||||
|
quantity: 1,
|
||||||
|
imageURL: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg',
|
||||||
|
gift: [
|
||||||
|
{
|
||||||
|
title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
|
||||||
|
quantity: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
|
||||||
|
quantity: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
id: '3',
|
||||||
|
title: '美国伽力果',
|
||||||
|
desc: '约680g/3个',
|
||||||
|
price: '2680.00',
|
||||||
|
quantity: 1,
|
||||||
|
imageURL: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
submitBarText() {
|
||||||
|
const count = this.checkedGoods.length;
|
||||||
|
return '结算' + (count ? `(${count})` : '');
|
||||||
|
},
|
||||||
|
totalPrice() {
|
||||||
|
return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? parseFloat(item.price): 0), 0);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSubmit() {
|
||||||
|
|
||||||
|
this.$router.push('/order')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.card-goods {
|
||||||
|
font-size: 12px;
|
||||||
|
&__item {
|
||||||
|
position: relative;
|
||||||
|
.van-checkbox{
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
top: 40px;
|
||||||
|
left: 5px;
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.additional{
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.head{
|
||||||
|
padding-left: 5px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
.card{
|
||||||
|
background: #f7f7f7;
|
||||||
|
.van-submit-bar__bar {
|
||||||
|
border-top: 1px solid #f7f7f7;
|
||||||
|
.van-checkbox{
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.promotion{
|
||||||
|
.van-tag {
|
||||||
|
line-height: 12px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.van-cell__title{
|
||||||
|
|
||||||
|
flex: 4;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.promotion-group{
|
||||||
|
margin-top: 10px;
|
||||||
|
box-shadow: 5px 5px 5px #e5e5e5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,180 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<van-search
|
||||||
|
v-model="value"
|
||||||
|
placeholder="请输入搜索关键词"
|
||||||
|
show-action
|
||||||
|
@search="onSearch"
|
||||||
|
>
|
||||||
|
<div slot="action" @click="onSearch">搜索</div>
|
||||||
|
</van-search>
|
||||||
|
<van-badge-group :active-key="activeKey" class="tab" :style="'height:'+fullHeight+'px'">
|
||||||
|
<van-badge title="热门推荐" @click="onClick" />
|
||||||
|
<van-badge title="手机数码" @click="onClick" />
|
||||||
|
<van-badge title="家用电器" @click="onClick" />
|
||||||
|
<van-badge title="电脑办公" @click="onClick" />
|
||||||
|
<van-badge title="美妆护肤" @click="onClick" />
|
||||||
|
<van-badge title="个护清洁" @click="onClick" />
|
||||||
|
<van-badge title="汽车用品" @click="onClick" />
|
||||||
|
<van-badge title="男装" @click="onClick" />
|
||||||
|
<van-badge title="男鞋" @click="onClick" />
|
||||||
|
<van-badge title="女装" @click="onClick" />
|
||||||
|
<van-badge title="女鞋" @click="onClick" />
|
||||||
|
<van-badge title="母婴童装" @click="onClick" />
|
||||||
|
<van-badge title="图书音像" @click="onClick" />
|
||||||
|
<van-badge title="运动户外" @click="onClick" />
|
||||||
|
<van-badge title="食品生鲜" @click="onClick" />
|
||||||
|
</van-badge-group>
|
||||||
|
<div class="content" :style="'width:'+fullWidth+'px;height:'+(fullHeight-7)+'px'" >
|
||||||
|
<img src="https://img11.360buyimg.com/mcoss/jfs/t1/1072/23/3672/95463/5b9a0813E175891fa/e38fc2f7c2ddfec2.jpg" />
|
||||||
|
<div class="category-div">
|
||||||
|
<h4>常用分类</h4>
|
||||||
|
<ul >
|
||||||
|
<li>
|
||||||
|
<router-link to="/search?keyword=xxxx">
|
||||||
|
<img src="//img12.360buyimg.com/focus/jfs/t11824/150/2263801190/3392/8e69e1b3/5a167b8cNdcf71ae5.jpg">
|
||||||
|
<span>蓝牙耳机</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a >
|
||||||
|
<img src="//img20.360buyimg.com/focus/jfs/t13759/194/897734755/2493/1305d4c4/5a1692ebN8ae73077.jpg">
|
||||||
|
<span>iPhone</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<div style="clear:both"></div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="category-div">
|
||||||
|
<h4>热门分类</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a ><img src="//img11.360buyimg.com/focus/s140x140_jfs/t21388/146/237407622/26923/221da1b3/5b054fedN2ba90518.jpg"><span>手机</span></a></li>
|
||||||
|
<li><a ><img src="//img20.360buyimg.com/focus/s140x140_jfs/t20128/208/216721929/9242/472993da/5b05522dNa2aae1bb.png"><span>耳机</span></a></li>
|
||||||
|
<li><a ><img src="//img30.360buyimg.com/focus/s140x140_jfs/t21655/83/2186874549/15932/c273d29b/5b48802aN13fe73de.png"><span>剃须刀</span></a></li>
|
||||||
|
<li><a ><img src="//img20.360buyimg.com/focus/s140x140_jfs/t21715/149/246679831/16257/ddbf2036/5b0565a7N8dbc0017.png"><span>路由器</span></a></li>
|
||||||
|
<li><a ><img src="//img14.360buyimg.com/focus/s140x140_jfs/t1/4478/16/633/36008/5b923503E39b9dfa9/13b099f187576d8c.png"><span>月饼</span></a></li>
|
||||||
|
<li><a ><img src="//img10.360buyimg.com/focus/s140x140_jfs/t1/1410/32/643/38009/5b9236b2Eb02fbf02/1e7de6987578dcdd.jpg" ><span>牛奶</span></a></li>
|
||||||
|
<li><a ><img src="//img20.360buyimg.com/focus/s140x140_jfs/t1/4674/14/665/25245/5b9236bbE088d5efb/6c7c2f9857736c65.jpg"><span>男士内裤</span></a></li>
|
||||||
|
<li><a ><img src="//img20.360buyimg.com/focus/s140x140_jfs/t1/1710/26/666/26147/5b9236c3E5fd1cd42/86c6bca8f4fe1efa.png"><span>小米8</span></a></li>
|
||||||
|
<li><a ><img src="//img11.360buyimg.com/focus/s140x140_jfs/t1/3653/6/655/42593/5b9236caEfef6235b/9e118f12705f52bb.png"><span>大闸蟹</span></a></li>
|
||||||
|
<li><a ><img src="//img20.360buyimg.com/focus/s140x140_jfs/t23881/349/2204372862/9923/4c62864a/5b7693eeNf6883734.png"><span>三只松鼠</span></a></li>
|
||||||
|
<li><a ><img src="//img20.360buyimg.com/focus/s140x140_jfs/t24253/294/2182777138/4059/429945c9/5b76990bNde226fbc.png"><span>充电宝</span></a></li>
|
||||||
|
<li><a ><img src="//img30.360buyimg.com/focus/s140x140_jfs/t22051/318/235303191/9297/c5ea2761/5b055000N410a7553.png"><span>空调</span></a></li>
|
||||||
|
<li><a ><img src="//img10.360buyimg.com/focus/s140x140_jfs/t19960/243/653029866/38879/91bb398b/5b055555N9245f8aa.jpg"><span>电饭煲</span></a></li>
|
||||||
|
<li><a ><img src="//img12.360buyimg.com/focus/s140x140_jfs/t1/345/33/944/5582/5b9236d2E62d8da2e/99f72d51b8f195ed.jpg"><span>电话手表</span></a></li>
|
||||||
|
<li><a ><img src="//img30.360buyimg.com/focus/s140x140_jfs/t1/1446/14/631/8500/5b9237e5E0d1f9e16/b1a627b92323b5ed.png"><span>华为</span></a></li>
|
||||||
|
<div style="clear:both">
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<navigate />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Search } from "vant";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "userindex",
|
||||||
|
components: {
|
||||||
|
[Search.name]: Search
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: "",
|
||||||
|
activeKey: 0,
|
||||||
|
fullHeight: document.documentElement.clientHeight - 93,
|
||||||
|
fullWidth: document.documentElement.clientWidth - 99
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSearch() {
|
||||||
|
console.log(this.value);
|
||||||
|
},
|
||||||
|
onClick(key) {
|
||||||
|
this.activeKey = key;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.tab {
|
||||||
|
float: left;
|
||||||
|
overflow-y: scroll;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
min-height: 100%;
|
||||||
|
.van-badge {
|
||||||
|
padding: 15px 12px 15px 9px;
|
||||||
|
}
|
||||||
|
.van-badge:not(:last-child)::after {
|
||||||
|
height: 199%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
float: left;
|
||||||
|
overflow-y: scroll;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
min-height: 100%;
|
||||||
|
margin: 7px 7px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.category-div {
|
||||||
|
margin: 19px 0px 0;
|
||||||
|
h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
width: 32.8%;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
img {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
font-size: 12px;
|
||||||
|
height: 36px;
|
||||||
|
color: #686868;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: box;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-box;
|
||||||
|
display: -o-box;
|
||||||
|
line-clamp: 2;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-moz-line-clamp: 2;
|
||||||
|
-ms-line-clamp: 2;
|
||||||
|
-o-line-clamp: 2;
|
||||||
|
box-orient: vertical;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-ms-box-orient: vertical;
|
||||||
|
-o-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
box-align: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-moz-box-align: center;
|
||||||
|
-ms-box-align: center;
|
||||||
|
-o-box-align: center;
|
||||||
|
box-pack: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-moz-box-pack: center;
|
||||||
|
-ms-box-pack: center;
|
||||||
|
-o-box-pack: center;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<page/>
|
||||||
|
<navigate />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import navigate from '../components/footer/navigate.vue'
|
||||||
|
import page from './page/page.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
page,
|
||||||
|
navigate
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
<template>
|
||||||
|
<div :style="'background-color:'+((page.BackgroundColor==undefined||page.BackgroundColor=='')?'#fff':page.BackgroundColor)">
|
||||||
|
<div :style="'height:'+topheight+'px'" ></div>
|
||||||
|
<div v-for="(item,index) in page.Sections" :key="index">
|
||||||
|
<imageAd v-if="item.Code=='ImageAd'" :data="item.ParameterDictionary"></imageAd>
|
||||||
|
|
||||||
|
<imageText v-if="item.Code=='ImageText'" :data="item.ParameterDictionary"></imageText>
|
||||||
|
|
||||||
|
<pageLine v-if="item.Code=='Line'" :data="item.ParameterDictionary" ></pageLine>
|
||||||
|
|
||||||
|
<whitespace v-if="item.Code=='Line'" :data="item.ParameterDictionary" />
|
||||||
|
|
||||||
|
<pageText v-if="item.Code=='Text'" :data="item.ParameterDictionary" ></pageText>
|
||||||
|
|
||||||
|
<notice v-if="item.Code=='Notice'" :data="item.ParameterDictionary" ></notice>
|
||||||
|
|
||||||
|
<search v-if="item.Code=='Search'" :data="item.ParameterDictionary" v-on:settopheight="settopheight($event)" ></search>
|
||||||
|
|
||||||
|
<pageTitle v-if="item.Code=='Title'" :data="item.ParameterDictionary" ></pageTitle>
|
||||||
|
|
||||||
|
<cube v-if="item.Code=='Cube'" :data="item.ParameterDictionary" ></cube>
|
||||||
|
|
||||||
|
<product v-if="item.Code=='Product'" :data="item" ></product>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import "../../assets/style/index.css";
|
||||||
|
import whitespace from "../../components/page/whitespace.vue";
|
||||||
|
import pageLine from "../../components/page/line.vue";
|
||||||
|
import pageText from "../../components/page/text.vue";
|
||||||
|
import notice from "../../components/page/notice.vue";
|
||||||
|
import search from "../../components/page/search.vue";
|
||||||
|
import pageTitle from "../../components/page/title.vue";
|
||||||
|
import cube from "../../components/page/cube.vue";
|
||||||
|
import imageAd from "../../components/page/imageAd.vue";
|
||||||
|
import imageText from "../../components/page/imageText.vue";
|
||||||
|
import product from "../../components/page/product.vue";
|
||||||
|
import { GetPage } from "../../api/page.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name:"page",
|
||||||
|
components:{
|
||||||
|
whitespace,
|
||||||
|
pageLine,
|
||||||
|
pageText,
|
||||||
|
notice,
|
||||||
|
search,
|
||||||
|
pageTitle,
|
||||||
|
cube,
|
||||||
|
[imageAd.name]:imageAd,
|
||||||
|
imageText,
|
||||||
|
product
|
||||||
|
},
|
||||||
|
data:function(){
|
||||||
|
return{
|
||||||
|
topheight:0,
|
||||||
|
page:{},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created:function(){
|
||||||
|
GetPage().then(response=>{
|
||||||
|
this.page=response;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
settopheight:function(value){
|
||||||
|
this.topheight=value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,326 @@
|
||||||
|
<template>
|
||||||
|
<div class="goods">
|
||||||
|
<headerNav title="商品详情"/>
|
||||||
|
<van-swipe class="goods-swipe" :autoplay="3000">
|
||||||
|
<van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
|
||||||
|
<img :src="thumb" >
|
||||||
|
</van-swipe-item>
|
||||||
|
</van-swipe>
|
||||||
|
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell>
|
||||||
|
<span class="goods-price">{{ formatPrice(goods.price) }}</span>
|
||||||
|
<span class="goods-market-price">{{ formatPrice(goods.market_price) }}</span>
|
||||||
|
<div class="goods-title">{{ goods.title }}</div>
|
||||||
|
<div class="goods-subtit">{{goods.subtitle}}</div>
|
||||||
|
</van-cell>
|
||||||
|
|
||||||
|
<van-cell @click="onClickShowTag" class="goods-tag" >
|
||||||
|
<template slot="title" style="font-size:10px;">
|
||||||
|
<img src="https://haitao.nos.netease.com/ba8a4c2fdaa54f82a45261293c116af61419663676663i46n3jlh10028.png"/>
|
||||||
|
<span >挪威品牌</span>
|
||||||
|
<img src="https://haitao.nosdn2.127.net/13bd59e6e29a4f06b278c586629e690d.png" />
|
||||||
|
<span >跨境商品</span>
|
||||||
|
<van-icon name="passed" color="red" />
|
||||||
|
<span >次日达</span>
|
||||||
|
<van-icon name="passed" color="red" />
|
||||||
|
<span >自提</span>
|
||||||
|
<van-icon name="passed" color="red" />
|
||||||
|
<span >闪电退款</span>
|
||||||
|
<van-icon name="passed" color="red" />
|
||||||
|
<span >前海保税仓</span>
|
||||||
|
<van-icon name="passed" color="red" />
|
||||||
|
<span >七天无理由退货（拆封后不支持）</span>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
<van-cell-group class="goods-cell-group">
|
||||||
|
<van-cell is-link @click="showPromotion" >
|
||||||
|
<template slot="title">
|
||||||
|
<span style="margin-right: 10px;">领券</span>
|
||||||
|
<van-tag type="danger" mark style="margin-right: 5px;">满180减30</van-tag>
|
||||||
|
<van-tag type="danger" mark style="margin-right: 5px;">满300减100</van-tag>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
|
||||||
|
<van-cell is-link @click="showPromotion" >
|
||||||
|
<template slot="title">
|
||||||
|
<span style="margin-right: 10px;">促销</span>
|
||||||
|
<van-tag type="danger" style="margin-right: 5px;">多买优惠</van-tag>
|
||||||
|
<van-tag type="danger" style="margin-right: 5px;">满减</van-tag>
|
||||||
|
<van-tag type="danger" style="margin-right: 5px;">限购</van-tag>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
<van-cell-group class="goods-cell-group">
|
||||||
|
<van-cell is-link @click="showSku" >
|
||||||
|
<template slot="title">
|
||||||
|
<span style="margin-right: 10px;">已选</span>
|
||||||
|
<span >10件装</span>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
<div class="goods-info">
|
||||||
|
<p class="goods-info-title" >图文详情</p>
|
||||||
|
<div v-html="goods.info"></div>
|
||||||
|
</div>
|
||||||
|
<van-goods-action>
|
||||||
|
|
||||||
|
<van-goods-action-mini-btn icon="like-o" @click="sorry">
|
||||||
|
收藏
|
||||||
|
</van-goods-action-mini-btn>
|
||||||
|
<van-goods-action-mini-btn icon="cart" @click="onClickCart">
|
||||||
|
购物车
|
||||||
|
</van-goods-action-mini-btn>
|
||||||
|
<van-goods-action-big-btn @click="showSku">
|
||||||
|
加入购物车
|
||||||
|
</van-goods-action-big-btn>
|
||||||
|
<van-goods-action-big-btn primary @click="showSku">
|
||||||
|
立即购买
|
||||||
|
</van-goods-action-big-btn>
|
||||||
|
</van-goods-action>
|
||||||
|
<van-actionsheet v-model="show" title="促销" style="font-size:14px;">
|
||||||
|
|
||||||
|
<van-cell is-link @click="sorry" >
|
||||||
|
<template slot="title">
|
||||||
|
<van-tag type="danger">多买优惠</van-tag>
|
||||||
|
<span> 满2件，总价打9折</span>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell is-link @click="sorry" >
|
||||||
|
<template slot="title">
|
||||||
|
<van-tag type="danger">满减</van-tag>
|
||||||
|
<span> 满100元减50元</span>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell is-link @click="sorry" >
|
||||||
|
<template slot="title">
|
||||||
|
<van-tag type="danger">限购</van-tag>
|
||||||
|
<span> 购买不超过5件时享受单件价￥8.00，超出数量以结算价为准</span>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
</van-actionsheet>
|
||||||
|
|
||||||
|
<van-actionsheet v-model="showTag" title="服务说明" style="font-size:14px;">
|
||||||
|
|
||||||
|
<van-cell>
|
||||||
|
<template slot="title">
|
||||||
|
<van-icon name="passed" color="red" style="margin-right: 10px;" />
|
||||||
|
<span >次日达</span>
|
||||||
|
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">指定时间前下单，次日送达</div>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell>
|
||||||
|
<template slot="title">
|
||||||
|
<van-icon name="passed" color="red" style="margin-right: 10px;" />
|
||||||
|
<span >自提</span>
|
||||||
|
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">我们提供多种自提服务，包括自提点、自助提货柜、移动自提车等服务</div>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell>
|
||||||
|
<template slot="title">
|
||||||
|
<van-icon name="passed" color="red" style="margin-right: 10px;" />
|
||||||
|
<span >闪电退款</span>
|
||||||
|
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">签收7天内退货的，提供先退款后退货服务。</div>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell>
|
||||||
|
<template slot="title">
|
||||||
|
<van-icon name="passed" color="red" style="margin-right: 10px;" />
|
||||||
|
<span >七天无理由退货（拆封后不支持）</span>
|
||||||
|
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">七天无理由退货（拆封后不支持）</div>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
<van-cell>
|
||||||
|
<template slot="title">
|
||||||
|
<van-icon name="passed" color="red" style="margin-right: 10px;" />
|
||||||
|
<span >前海保税仓</span>
|
||||||
|
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">本商品由前海保税仓发货</div>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
</van-actionsheet>
|
||||||
|
<van-sku
|
||||||
|
v-model="showBase"
|
||||||
|
:sku="skuData.sku"
|
||||||
|
:goods="skuData.goods_info"
|
||||||
|
:goods-id="skuData.goods_id"
|
||||||
|
:hide-stock="skuData.sku.hide_stock"
|
||||||
|
:quota="skuData.quota"
|
||||||
|
:quota-used="skuData.quota_used"
|
||||||
|
reset-stepper-on-hide
|
||||||
|
reset-selected-sku-on-hide
|
||||||
|
disable-stepper-input
|
||||||
|
:close-on-click-overlay="closeOnClickOverlay"
|
||||||
|
:message-config="messageConfig"
|
||||||
|
:custom-sku-validator="customSkuValidator"
|
||||||
|
@buy-clicked="onBuyClicked"
|
||||||
|
@add-cart="onAddCartClicked"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import skuData from '../../data/sku';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
this.skuData = skuData;
|
||||||
|
return {
|
||||||
|
show:false,
|
||||||
|
showTag:false,
|
||||||
|
goods: {
|
||||||
|
title: '【每日一粒益智又长高】 Lifeline Care 儿童果冻鱼油DHA维生素D3聪明长高 软糖 30粒 2件装',
|
||||||
|
subtitle:'【品牌直采】Q弹美味，无腥味果冻鱼油，每粒含足量鱼油DHA，帮助视网膜和大脑健康发育，让你的宝宝明眼又聪明，同时补充400国际单位维生素D3，强壮骨骼和牙齿。特含DPA，让宝宝免疫力更强，没病来扰。',
|
||||||
|
price: 2680,
|
||||||
|
market_price:9999,
|
||||||
|
express: '免运费',
|
||||||
|
remain: 19,
|
||||||
|
thumb: [
|
||||||
|
'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
|
||||||
|
'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
|
||||||
|
],
|
||||||
|
info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
|
||||||
|
},
|
||||||
|
showBase: false,
|
||||||
|
showCustom: false,
|
||||||
|
showStepper: false,
|
||||||
|
closeOnClickOverlay: true,
|
||||||
|
initialSku: {
|
||||||
|
s1: '30349',
|
||||||
|
s2: '1193'
|
||||||
|
},
|
||||||
|
customSkuValidator: (component) => {
|
||||||
|
return '请选择xxx';
|
||||||
|
},
|
||||||
|
customStepperConfig: {
|
||||||
|
quotaText: '单次限购100件',
|
||||||
|
stockFormatter: (stock) => `剩余${stock}间`,
|
||||||
|
handleOverLimit: (data) => {
|
||||||
|
const { action, limitType, quota } = data;
|
||||||
|
if (action === 'minus') {
|
||||||
|
this.$toast('至少选择一件商品');
|
||||||
|
} else if (action === 'plus') {
|
||||||
|
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
|
||||||
|
this.$toast(`限购${quota}件`);
|
||||||
|
} else {
|
||||||
|
this.$toast('库存不够了~~');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
messageConfig: {
|
||||||
|
uploadImg: (file, img) => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
setTimeout(() => resolve(img), 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
uploadMaxSize: 3
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatPrice(data) {
|
||||||
|
return '¥' + (data / 100).toFixed(2);
|
||||||
|
},
|
||||||
|
onClickCart() {
|
||||||
|
this.$router.push('/cart');
|
||||||
|
},
|
||||||
|
sorry() {
|
||||||
|
Toast('暂无后续逻辑~');
|
||||||
|
},
|
||||||
|
showPromotion() {
|
||||||
|
this.show=true;
|
||||||
|
},
|
||||||
|
showSku(){
|
||||||
|
this.showBase=true;
|
||||||
|
},
|
||||||
|
onClickShowTag(){
|
||||||
|
this.showTag=true;
|
||||||
|
},
|
||||||
|
onBuyClicked(data) {
|
||||||
|
this.$toast(JSON.stringify(data));
|
||||||
|
},
|
||||||
|
onAddCartClicked(data) {
|
||||||
|
this.$toast(JSON.stringify(data));
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.goods {
|
||||||
|
padding-bottom: 50px;
|
||||||
|
&-swipe {
|
||||||
|
img {
|
||||||
|
width: 7.5rem;
|
||||||
|
height: 7.5rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-tag{
|
||||||
|
font-size: 12px;
|
||||||
|
border-top: 1px solid #e5e5e5;
|
||||||
|
span{
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
color: red;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
width: 12px;
|
||||||
|
margin-right: 3px;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-title {
|
||||||
|
line-height: 18px;
|
||||||
|
padding-top: 10px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 700;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
&-subtit{
|
||||||
|
font-size: 13px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
&-price {
|
||||||
|
color: #f44;font-size: 20px;
|
||||||
|
}
|
||||||
|
&-market-price {
|
||||||
|
text-decoration: line-through;
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
&-cell-group {
|
||||||
|
margin: 15px 0;
|
||||||
|
.van-cell__value {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-info-title{
|
||||||
|
height: 44px;line-height: 44px;text-align: center;font-size: 14px;font-weight: 700;margin: 10px;border-top: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
&-info p{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin-block-end: 0;
|
||||||
|
margin-block-start: 0;
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
&-info img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,404 @@
|
||||||
|
<template>
|
||||||
|
<div class="product-list">
|
||||||
|
<searchtop/>
|
||||||
|
<div class="filterbar">
|
||||||
|
<ul :class="filtersort?'show':''">
|
||||||
|
<li :class="filterindex==0?'selected':''" v-on:click="onFilterBar(0)"><span>{{filterindex==11?'价格最低':(filterindex==12?'价格最高':'综合')}}</span><van-icon name="arrow" class="down" /></li>
|
||||||
|
<li :class="filterindex==1?'selected':''" v-on:click="onFilterBar(1)"><span>销量</span></li>
|
||||||
|
<li :class="filterindex==2?'selected':''" v-on:click="onFilterBar(2)"><span>上新</span></li>
|
||||||
|
<li :class="filterindex==3?'selected':''" v-on:click="onFilterBar(3)"><span>筛选</span></li>
|
||||||
|
</ul>
|
||||||
|
<div :class="'item_options '+(filtersort?'show':'')">
|
||||||
|
<ul>
|
||||||
|
<li :class="filterindex==10?'selected':''" v-on:click="onFilterBar(10)">综合</li>
|
||||||
|
<li :class="filterindex==11?'selected':''" v-on:click="onFilterBar(11)">价格最低</li>
|
||||||
|
<li :class="filterindex==12?'selected':''" v-on:click="onFilterBar(12)">价格最高</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<van-popup v-model="filtershow" position="right" class="filterlayer" >
|
||||||
|
<div class="filterInner" style="overflow-y: scroll;max-height: 100%;">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||||
|
</li>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
<div class="tags_selection">
|
||||||
|
<div class="option">
|
||||||
|
<a href="javascript:void 0;">牙龈护理111</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">抛光</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">清洁</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">正畸专用</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">敏感</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">亮白</a>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||||
|
</li>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
<div class="tags_selection">
|
||||||
|
<div class="option">
|
||||||
|
<a href="javascript:void 0;">牙龈护理111</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">抛光</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">清洁</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">正畸专用</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">敏感</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">亮白</a>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||||
|
</li>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
<div class="tags_selection">
|
||||||
|
<div class="option">
|
||||||
|
<a href="javascript:void 0;">牙龈护理111</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">抛光</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">清洁</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">正畸专用</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">敏感</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">亮白</a>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||||
|
</li>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
<div class="tags_selection">
|
||||||
|
<div class="option">
|
||||||
|
<a href="javascript:void 0;">牙龈护理111</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">抛光</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">清洁</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">正畸专用</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">敏感</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">亮白</a>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||||
|
</li>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
<div class="tags_selection">
|
||||||
|
<div class="option">
|
||||||
|
<a href="javascript:void 0;">牙龈护理111</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">抛光</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">清洁</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">正畸专用</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">敏感</a>
|
||||||
|
</div>
|
||||||
|
<div class="option ">
|
||||||
|
<a href="javascript:void 0;">亮白</a>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
<van-button size="large" style="height: 40px;margin-bottom: 15px;line-height: 40px;">清楚选项</van-button>
|
||||||
|
<div style="height:50px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="filterlayer_bottom_buttons">
|
||||||
|
<span class="filterlayer_bottom_button cancel">取消</span>
|
||||||
|
<span class="filterlayer_bottom_button confirm">确认</span>
|
||||||
|
</div>
|
||||||
|
</van-popup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-for="(product,i) in products" :key="i">
|
||||||
|
<product-card :product='product' @click="showProduct(product)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import searchtop from "../../components/search/searchtop";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
searchtop
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: "",
|
||||||
|
filterindex: 0,
|
||||||
|
filtersort: false,
|
||||||
|
filtershow: false,
|
||||||
|
|
||||||
|
products:[
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'13.00',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499.00',
|
||||||
|
tags:['满199减100','2件起购'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499.00',
|
||||||
|
tags:['新品'],
|
||||||
|
imageTag:'仅剩1件',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499.00',
|
||||||
|
tags:['赠'],
|
||||||
|
imageTag:'预约',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'15.00',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'125.50',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onFilterBar(value) {
|
||||||
|
if (value == 0) {
|
||||||
|
this.filtersort = !this.filtersort;
|
||||||
|
} else if (value == 3) {
|
||||||
|
this.filtershow = !this.filtershow;
|
||||||
|
} else {
|
||||||
|
this.filtersort = false;
|
||||||
|
this.filterindex = value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showProduct(product){
|
||||||
|
this.$router.push('/product/'+product.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.product-list{
|
||||||
|
.additional .price{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 6px;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.filterbar {
|
||||||
|
font-size: 14px;
|
||||||
|
position: relative;
|
||||||
|
ul {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
color: #999;
|
||||||
|
width: 25%;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
i {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
.down {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.selected {
|
||||||
|
color: #e93b3d;
|
||||||
|
}
|
||||||
|
.show {
|
||||||
|
.down {
|
||||||
|
-webkit-transform: rotate(-90deg);
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_options {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 41px;
|
||||||
|
background: #fff;
|
||||||
|
display: none;
|
||||||
|
z-index: 1;
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_options.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.filterlayer {
|
||||||
|
width: 85%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
&_bottom {
|
||||||
|
&_buttons {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
z-index: 10;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
.cancel {
|
||||||
|
color: #333;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
.confirm {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #e93b3d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_button {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 49px;
|
||||||
|
line-height: 49px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
height: auto;
|
||||||
|
background: #fff;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
height: auto;
|
||||||
|
line-height: initial;
|
||||||
|
.van-cell{
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.big {
|
||||||
|
height: 25px;
|
||||||
|
max-width: 250px;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.filterInner{
|
||||||
|
overflow-y: scroll;
|
||||||
|
max-height: 100%;
|
||||||
|
.van-button{
|
||||||
|
height: 40px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tags_selection {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fff;
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 0 0 10px;
|
||||||
|
.option {
|
||||||
|
box-sizing: border-box;
|
||||||
|
float: left;
|
||||||
|
width: 33.33%;
|
||||||
|
padding-right: 10px;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
padding: 0 5px;
|
||||||
|
color: #666;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,184 @@
|
||||||
|
<template>
|
||||||
|
<div class="order">
|
||||||
|
<headerNav title="确认订单"/>
|
||||||
|
<van-cell
|
||||||
|
center
|
||||||
|
:border="false"
|
||||||
|
class="contact-card"
|
||||||
|
is-link
|
||||||
|
to="/user/address?id=2"
|
||||||
|
>
|
||||||
|
<template v-if="type === 'add'">
|
||||||
|
<strong>选择地址</strong>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<strong>张三 138****6520</strong>
|
||||||
|
<div>广东省深圳市南山区科技园 </div>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
<div style="height:15px;"></div>
|
||||||
|
<div class="card" v-for="(product,i) in products" :key="i">
|
||||||
|
<product-card :product='product' />
|
||||||
|
</div>
|
||||||
|
<div style="height:15px;"></div>
|
||||||
|
<van-cell-group>
|
||||||
|
<van-field
|
||||||
|
label="留言"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入留言"
|
||||||
|
rows="1"
|
||||||
|
autosize
|
||||||
|
/>
|
||||||
|
</van-cell-group>
|
||||||
|
<div style="height:15px;"></div>
|
||||||
|
<van-cell-group class="total">
|
||||||
|
<van-cell title="优惠券" is-link value="抵扣¥5.00" />
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
<div style="height:15px;"></div>
|
||||||
|
<van-cell-group class="total">
|
||||||
|
<van-cell title="商品总额" value="9.99" />
|
||||||
|
<van-cell title="运费" value="+ 0.00" />
|
||||||
|
<van-cell title="折扣" value="- 5.00" />
|
||||||
|
<van-cell title="实付金额" value="4.99" style="font-weight: 700;" />
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
<div style="height:50px;"></div>
|
||||||
|
<van-submit-bar
|
||||||
|
:price="3050"
|
||||||
|
button-text="提交订单"
|
||||||
|
label='实付金额：'
|
||||||
|
@submit="onSubmit"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
type: "add1",
|
||||||
|
products: [
|
||||||
|
{
|
||||||
|
imageURL:
|
||||||
|
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
|
||||||
|
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
|
||||||
|
desc: "0.670kg/件，肉肉聚汇520g",
|
||||||
|
price: "59.80",
|
||||||
|
quantity: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageURL:
|
||||||
|
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
|
||||||
|
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
|
||||||
|
desc: "1.320kg/件",
|
||||||
|
price: "65.80",
|
||||||
|
quantity: 1,
|
||||||
|
gift: [
|
||||||
|
{
|
||||||
|
title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
|
||||||
|
quantity: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
|
||||||
|
quantity: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageURL:
|
||||||
|
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
|
||||||
|
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
|
||||||
|
desc: "0.670kg/件，肉肉聚汇520g",
|
||||||
|
price: "59.80",
|
||||||
|
quantity: 2
|
||||||
|
},
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSubmit() {
|
||||||
|
this.$toast("点击按钮");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
activated(){
|
||||||
|
//根据key名获取传递回来的参数，data就是map
|
||||||
|
this.$on('selectAddress', function(data){
|
||||||
|
//赋值给首页的附近医院数据模型
|
||||||
|
console.log(1);
|
||||||
|
}.bind(this));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.order {
|
||||||
|
font-size: 14px;
|
||||||
|
background: #f7f7f7;
|
||||||
|
.contact-card::before {
|
||||||
|
content: "";
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 2px;
|
||||||
|
position: absolute;
|
||||||
|
background: -webkit-repeating-linear-gradient(
|
||||||
|
135deg,
|
||||||
|
#ff6c6c 0,
|
||||||
|
#ff6c6c 20%,
|
||||||
|
transparent 0,
|
||||||
|
transparent 25%,
|
||||||
|
#3283fa 0,
|
||||||
|
#3283fa 45%,
|
||||||
|
transparent 0,
|
||||||
|
transparent 50%
|
||||||
|
);
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
-45deg,
|
||||||
|
#ff6c6c 0,
|
||||||
|
#ff6c6c 20%,
|
||||||
|
transparent 0,
|
||||||
|
transparent 25%,
|
||||||
|
#3283fa 0,
|
||||||
|
#3283fa 45%,
|
||||||
|
transparent 0,
|
||||||
|
transparent 50%
|
||||||
|
);
|
||||||
|
background-size: 80px;
|
||||||
|
}
|
||||||
|
.total {
|
||||||
|
.van-cell__value {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-submit-bar__bar {
|
||||||
|
border-top: 1px solid #f7f7f7;
|
||||||
|
}
|
||||||
|
.additional {
|
||||||
|
.van-cell {
|
||||||
|
padding: 0 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.van-cell__title {
|
||||||
|
flex: 11;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.van-tag {
|
||||||
|
line-height: 12px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
color: #e93b3d;
|
||||||
|
font-size: 10px;
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<headerNav title="修改地址"/>
|
||||||
|
<van-address-edit
|
||||||
|
:area-list="areaList"
|
||||||
|
:showDelete="showDelete"
|
||||||
|
show-set-default
|
||||||
|
@save="onSave"
|
||||||
|
@delete="onDelete"
|
||||||
|
:addressInfo="info"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import areaList from '../../../data/area';
|
||||||
|
import { GetAddressById,SaveAddress,DelAddress } from "../../../api/user.js";
|
||||||
|
|
||||||
|
import { AddressEdit } from 'vant';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
[AddressEdit.name]:AddressEdit,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
areaList,
|
||||||
|
showDelete:false,
|
||||||
|
info:{},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onSave(data) {
|
||||||
|
SaveAddress(data).then(response=>{
|
||||||
|
this.$toast('保存成功');
|
||||||
|
this.$router.go(-1);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onDelete(data) {
|
||||||
|
DelAddress(data).then(response=>{
|
||||||
|
this.$toast('删除成功');
|
||||||
|
this.$router.go(-1);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created:function(){
|
||||||
|
var id=this.$route.query.id;
|
||||||
|
if(id>0){
|
||||||
|
this.showDelete=true;
|
||||||
|
GetAddressById(id).then(response=>{
|
||||||
|
console.log(response);
|
||||||
|
this.info=response;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.van-picker__toolbar{
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<headerNav title="我的地址"/>
|
||||||
|
<van-address-list
|
||||||
|
v-model="chosenAddressId"
|
||||||
|
:class="isSelect?'':'hideselect'"
|
||||||
|
:list="list"
|
||||||
|
@add="onAdd"
|
||||||
|
@edit="onEdit"
|
||||||
|
@select="onSelect"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import { GetAddressList } from "../../../api/user.js";
|
||||||
|
import { AddressList } from 'vant';
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
[AddressList.name]:AddressList,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chosenAddressId: '1',
|
||||||
|
isSelect:false,
|
||||||
|
list: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onAdd() {
|
||||||
|
this.$router.push('/user/address/edit')
|
||||||
|
},
|
||||||
|
|
||||||
|
onEdit(item, index) {
|
||||||
|
this.$router.push('/user/address/edit?id='+item.id);
|
||||||
|
},
|
||||||
|
onSelect(item,index){
|
||||||
|
if(!this.isSelect){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$emit('selectAddress',item);
|
||||||
|
this.$router.go(-1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created:function(){
|
||||||
|
this.chosenAddressId=this.$route.query.id;
|
||||||
|
this.isSelect=this.$route.query.id>0;
|
||||||
|
GetAddressList().then(response=>{
|
||||||
|
this.list=response;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.hideselect{
|
||||||
|
.van-radio__input{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,143 @@
|
||||||
|
</<template>
|
||||||
|
<div style="font-size:12px;">
|
||||||
|
<headerNav title="申请售后"/>
|
||||||
|
<van-radio-group v-model="servicetype">
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell title="服务类型" />
|
||||||
|
<van-cell title="退款" clickable @click="servicetype = '1'">
|
||||||
|
<van-radio name="1" />
|
||||||
|
</van-cell>
|
||||||
|
<van-cell title="退货" clickable @click="servicetype = '2'">
|
||||||
|
<van-radio name="2" />
|
||||||
|
</van-cell>
|
||||||
|
</van-cell-group>
|
||||||
|
</van-radio-group>
|
||||||
|
<div style="margin-top: 10px;" >
|
||||||
|
<product-card v-for="(product,i) in products" :key="i" :product='product' iscard ></product-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<van-cell-group style="margin-top: 10px;">
|
||||||
|
<van-cell title="申请原因" :label="remark" is-link @click="onClickShowPicker" />
|
||||||
|
|
||||||
|
<van-field label="退款金额" placeholder="请输入金额" v-model="amount" :error-message="'可退金额:'+maxamount" type='number' />
|
||||||
|
|
||||||
|
<van-field
|
||||||
|
label="问题描述"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请您在此描述问题"
|
||||||
|
rows="3"
|
||||||
|
autosize
|
||||||
|
/>
|
||||||
|
<van-cell class="uploader" style="font-size: 16px;">
|
||||||
|
<van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
|
||||||
|
<van-icon name="photograph" />
|
||||||
|
</van-uploader>
|
||||||
|
<div v-for="(image,i) in images" :key="image" class="uploader-image" >
|
||||||
|
<img :src="image" />
|
||||||
|
<van-icon name="close" @click="removeImage(i,image)" />
|
||||||
|
</div>
|
||||||
|
</van-cell>
|
||||||
|
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
|
||||||
|
<van-cell-group style="margin-top: 10px;">
|
||||||
|
<van-field label="联系人" />
|
||||||
|
<van-field label="联系电话" />
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
<van-button size="large" type="primary" style="margin-top: 10px;" >提交</van-button>
|
||||||
|
<van-actionsheet v-model="showPicker" >
|
||||||
|
<van-picker show-toolbar
|
||||||
|
title="申请原因" :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
|
||||||
|
</van-actionsheet>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
servicetype:'1',
|
||||||
|
showPicker:false,
|
||||||
|
remark:'我不想要了',
|
||||||
|
amount:'50.50',
|
||||||
|
maxamount:'50.50',
|
||||||
|
images:[],
|
||||||
|
columns: ['我不想要了','退运费','少件/漏发','未按约定时间发货','发错货', '质量问题', '商品与页面描述不符', '商品损坏', '缺少件'],
|
||||||
|
products: [
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
imageURL:
|
||||||
|
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
|
||||||
|
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
|
||||||
|
desc: "0.670kg/件，肉肉聚汇520g",
|
||||||
|
quantity: 2,
|
||||||
|
price:'50.5',
|
||||||
|
max:2,
|
||||||
|
min:0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
imageURL:
|
||||||
|
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
|
||||||
|
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
|
||||||
|
desc: "1.320kg/件",
|
||||||
|
quantity: 1,
|
||||||
|
price:'225.5',
|
||||||
|
max:1,
|
||||||
|
min:0,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
onClickShowPicker(){
|
||||||
|
this.showPicker=true;
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
this.showPicker=false;
|
||||||
|
},
|
||||||
|
onConfirm(value, index) {
|
||||||
|
this.remark=value;
|
||||||
|
this.showPicker=false;
|
||||||
|
},
|
||||||
|
onRead(file) {
|
||||||
|
console.log(file.length);
|
||||||
|
if(file.length==undefined){
|
||||||
|
this.images.push(file.content);
|
||||||
|
}else{
|
||||||
|
file.forEach(item => {
|
||||||
|
this.images.push(item.content);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
console.log(file)
|
||||||
|
},
|
||||||
|
removeImage(index,image){
|
||||||
|
this.images.splice(index,1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.uploader{
|
||||||
|
font-size: 16px;
|
||||||
|
.van-uploader{
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
&-image{
|
||||||
|
margin-left: 10px;position: relative;height: 50px;width: 50px;border: 1px solid #e5e7ea;float: left;margin-top: 5px;
|
||||||
|
img{
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
right: -6px;
|
||||||
|
font-size: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
</<template>
|
||||||
|
<div>
|
||||||
|
<headerNav title="服务单详情"/>
|
||||||
|
<van-steps :active="active">
|
||||||
|
<van-step>提交申请</van-step>
|
||||||
|
<van-step>客服审核</van-step>
|
||||||
|
<van-step>客户确认</van-step>
|
||||||
|
<van-step>仓库收货</van-step>
|
||||||
|
<van-step>完成</van-step>
|
||||||
|
</van-steps>
|
||||||
|
|
||||||
|
<van-cell class="logistics" to="/user/aftersale/track/1" title="您的服务单435703816的商品已收到" label="2018-08-31 21:04:03" is-link />
|
||||||
|
|
||||||
|
<div style="height:15px;"></div>
|
||||||
|
<div v-for="(product,i) in products" :key="i">
|
||||||
|
<product-card :product='product' />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:15px;"></div>
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell title="服务单号" value="18081609422771742" />
|
||||||
|
<van-cell title="申请时间" value="2018-08-16 09:42:27" />
|
||||||
|
<van-cell title="服务类型" value="退货" />
|
||||||
|
</van-cell-group>
|
||||||
|
<div style="height:15px;"></div>
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell title="联系人" value="张三" />
|
||||||
|
<van-cell title="联系电话" value="138****6514" />
|
||||||
|
</van-cell-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
active:0,
|
||||||
|
|
||||||
|
products:[
|
||||||
|
{
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499',
|
||||||
|
quantity:2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499',
|
||||||
|
quantity:2
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
<template>
|
||||||
|
<div class="aftersale">
|
||||||
|
<headerNav title="售后"/>
|
||||||
|
<van-tabs >
|
||||||
|
<van-tab title="售后申请">
|
||||||
|
<van-panel v-for="(order,index) in orders" :key="index" :title="'订单号：'+order.ordercode" style="margin-top:10px;">
|
||||||
|
<div>
|
||||||
|
<product-card v-for="(product,i) in order.products" :key="i" :product='product' >
|
||||||
|
<div class="van-panel_product_footer">
|
||||||
|
<van-button size="small" type="danger" tag="a" :href="'#/user/aftersale/apply?id='+product.id" >申请售后</van-button>
|
||||||
|
</div>
|
||||||
|
</product-card>
|
||||||
|
</div>
|
||||||
|
</van-panel>
|
||||||
|
</van-tab>
|
||||||
|
<van-tab title="申请记录">
|
||||||
|
<van-panel v-for="(order,index) in orders" :key="index" :title="'服务单号：'+order.ordercode" style="margin-top:10px;">
|
||||||
|
<div>
|
||||||
|
<product-card v-for="(product,i) in order.products" :key="i" :product='product'/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<van-cell title="已完成" :to="'/user/aftersale/detail?ordercode='+order.ordercode" is-link label="服务已完成，感谢您对京东的支持" style="background-color: #f8f8f8;" />
|
||||||
|
</div>
|
||||||
|
</van-panel>
|
||||||
|
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
orders:[
|
||||||
|
{
|
||||||
|
ordercode:'79340944225',
|
||||||
|
products: [
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
imageURL:
|
||||||
|
"https://img10.360buyimg.com/N2/jfs/t21733/218/377678809/177209/1b98ae56/5b0b96e1Nc0e37080.jpg",
|
||||||
|
title: "子初婴儿手口柔湿巾90片*3包 新生儿纸巾 宝宝婴儿湿巾",
|
||||||
|
quantity: 2
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ordercode:'79341094465',
|
||||||
|
products: [
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
imageURL:
|
||||||
|
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
|
||||||
|
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
|
||||||
|
desc: "1.320kg/件",
|
||||||
|
quantity: 1,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ordercode:'79341094462',
|
||||||
|
products: [
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
imageURL:
|
||||||
|
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
|
||||||
|
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
|
||||||
|
desc: "0.670kg/件，肉肉聚汇520g",
|
||||||
|
quantity: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
imageURL:
|
||||||
|
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
|
||||||
|
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
|
||||||
|
desc: "1.320kg/件",
|
||||||
|
quantity: 1,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.aftersale{
|
||||||
|
font-size:12px;background: #f0f2f5;
|
||||||
|
.van-panel{
|
||||||
|
margin-top: 10px;
|
||||||
|
&_product_footer{
|
||||||
|
text-align: right;padding: 0 10px 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<div style="background: #f7f7f7;">
|
||||||
|
<headerNav title="进度详情"/>
|
||||||
|
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell title="服务单号" value="18081609422771742" />
|
||||||
|
</van-cell-group>
|
||||||
|
<van-steps direction="vertical" :active="0" active-color="#f60" style="margin-top: 15px;">
|
||||||
|
<van-step>
|
||||||
|
<h3>您的服务单435703816的商品已收到</h3>
|
||||||
|
<p>2016-07-12 12:40</p>
|
||||||
|
</van-step>
|
||||||
|
<van-step>
|
||||||
|
<h3>【城市】物流状态2</h3>
|
||||||
|
<p>2016-07-11 10:00</p>
|
||||||
|
</van-step>
|
||||||
|
<van-step>
|
||||||
|
<h3>快件已发货</h3>
|
||||||
|
<p>2016-07-10 09:30</p>
|
||||||
|
</van-step>
|
||||||
|
</van-steps>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,358 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<headerNav title="我的优惠券"/>
|
||||||
|
<van-cell-group>
|
||||||
|
<van-field
|
||||||
|
center
|
||||||
|
clearable
|
||||||
|
placeholder="请输入优惠码"
|
||||||
|
|
||||||
|
v-model="couponCode"
|
||||||
|
>
|
||||||
|
<van-button slot="button" size="small" type="primary" :loading="exchangeLoading" @click="onExchange">兑换</van-button>
|
||||||
|
</van-field>
|
||||||
|
</van-cell-group>
|
||||||
|
<van-tabs >
|
||||||
|
<van-tab title="未使用">
|
||||||
|
<ul>
|
||||||
|
<van-list
|
||||||
|
v-model="loading"
|
||||||
|
:finished="finished"
|
||||||
|
@load="onLoad"
|
||||||
|
>
|
||||||
|
<li v-for="(item,index) in list" :key="index" :class="'couponitem '+(item.show?'show':'') ">
|
||||||
|
<div class="couponTop">
|
||||||
|
<div class="cpnamount">
|
||||||
|
<div class="amountWrap">
|
||||||
|
<div class="amount">
|
||||||
|
<span class="amountSign" v-if="item.SignPosition=='left'" >{{item.Sign}}</span>
|
||||||
|
<span class="amountNum">{{item.Coupon}}</span>
|
||||||
|
<span class="amountSign" v-if="item.SignPosition=='right'" >{{item.Sign}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="condition">
|
||||||
|
<span>{{item.Condition}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="couponInfoWrap">
|
||||||
|
<div class="cpninfo">
|
||||||
|
<div class="detail">
|
||||||
|
<span class="name">{{item.Name}}</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="validity">
|
||||||
|
<span>{{item.BeginDate}}-{{item.EndDate}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<van-button type="danger" size="mini">立即使用</van-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="couponMid " v-if="item.Info!=''">
|
||||||
|
<span>详细信息</span>
|
||||||
|
<van-icon name="arrow" class="down" @click="onShowInfo(item.Id,index)" />
|
||||||
|
</div>
|
||||||
|
<div class="info" v-if="item.Info!=''" >
|
||||||
|
<div class="text">
|
||||||
|
{{item.Info}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</van-list>
|
||||||
|
</ul>
|
||||||
|
</van-tab>
|
||||||
|
<van-tab title="使用记录">
|
||||||
|
<ul class="gray" >
|
||||||
|
<van-list
|
||||||
|
v-model="useLoading"
|
||||||
|
:finished="useFinished"
|
||||||
|
@load="onLoadUse"
|
||||||
|
>
|
||||||
|
<li v-for="(item,index) in useList" :key="index" class="couponitem">
|
||||||
|
<div class="couponTop">
|
||||||
|
<div class="cpnamount">
|
||||||
|
<div class="amountWrap">
|
||||||
|
<div class="amount">
|
||||||
|
<span class="amountSign" v-if="item.SignPosition=='left'" >{{item.Sign}}</span>
|
||||||
|
<span class="amountNum">{{item.Coupon}}</span>
|
||||||
|
<span class="amountSign" v-if="item.SignPosition=='right'" >{{item.Sign}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="condition">
|
||||||
|
<span>{{item.Condition}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="couponInfoWrap">
|
||||||
|
<div class="cpninfo">
|
||||||
|
<div class="detail">
|
||||||
|
<span class="name">{{item.Name}}</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="validity">
|
||||||
|
<span>{{item.BeginDate}}-{{item.EndDate}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</van-list>
|
||||||
|
</ul>
|
||||||
|
</van-tab>
|
||||||
|
<van-tab title="已过期">
|
||||||
|
<ul class="gray" >
|
||||||
|
|
||||||
|
<van-list
|
||||||
|
v-model="endLoading"
|
||||||
|
:finished="endFinished"
|
||||||
|
@load="onLoadEnd"
|
||||||
|
>
|
||||||
|
<li v-for="(item,index) in endList" :key="index" class="couponitem">
|
||||||
|
<div class="couponTop">
|
||||||
|
<div class="cpnamount">
|
||||||
|
<div class="amountWrap">
|
||||||
|
<div class="amount">
|
||||||
|
<span class="amountSign" v-if="item.SignPosition=='left'" >{{item.Sign}}</span>
|
||||||
|
<span class="amountNum">{{item.Coupon}}</span>
|
||||||
|
<span class="amountSign" v-if="item.SignPosition=='right'" >{{item.Sign}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="condition">
|
||||||
|
<span>{{item.Condition}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="couponInfoWrap">
|
||||||
|
<div class="cpninfo">
|
||||||
|
<div class="detail">
|
||||||
|
<span class="name">{{item.Name}}</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="validity">
|
||||||
|
<span>{{item.BeginDate}}-{{item.EndDate}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</van-list>
|
||||||
|
</ul>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { GetCoupon,ExchangeCoupon } from "../../../api/user.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading:false,
|
||||||
|
finished:false,
|
||||||
|
list:[],
|
||||||
|
page:0,
|
||||||
|
|
||||||
|
|
||||||
|
useLoading:false,
|
||||||
|
useFinished:false,
|
||||||
|
useList:[],
|
||||||
|
usePage:0,
|
||||||
|
|
||||||
|
|
||||||
|
endLoading:false,
|
||||||
|
endFinished:false,
|
||||||
|
endList:[],
|
||||||
|
endPage:0,
|
||||||
|
|
||||||
|
couponCode:'',
|
||||||
|
exchangeLoading:false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onLoad() {
|
||||||
|
this.page++;
|
||||||
|
GetCoupon({page:this.page}).then(response=>{
|
||||||
|
response.List.forEach(item => {
|
||||||
|
item.show=false;
|
||||||
|
this.list.push(item);
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
if(response.TotalPage<=this.page){
|
||||||
|
this.finished = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onShowInfo(id,index){
|
||||||
|
this.list.forEach((item,itemIndex) => {
|
||||||
|
if(index==itemIndex){
|
||||||
|
item.show=!item.show;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onLoadUse() {
|
||||||
|
this.usePage++;
|
||||||
|
GetCoupon({page:this.usePage}).then(response=>{
|
||||||
|
response.List.forEach(item => {
|
||||||
|
this.useList.push(item);
|
||||||
|
});
|
||||||
|
this.useLoading = false;
|
||||||
|
if(response.TotalPage<=this.usePage){
|
||||||
|
this.useFinished = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onLoadEnd() {
|
||||||
|
this.endPage++;
|
||||||
|
GetCoupon({page:this.endPage}).then(response=>{
|
||||||
|
response.List.forEach(item => {
|
||||||
|
this.endList.push(item);
|
||||||
|
});
|
||||||
|
this.endLoading = false;
|
||||||
|
if(response.TotalPage<=this.endPage){
|
||||||
|
this.endFinished = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onExchange(){
|
||||||
|
if(this.exchangeLoading){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.exchangeLoading=true;
|
||||||
|
ExchangeCoupon(this.couponCode).then(response=>{
|
||||||
|
this.$toast('兑换成功');
|
||||||
|
this.exchangeLoading=false;
|
||||||
|
this.$router.go(0);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.couponitem {
|
||||||
|
padding: 0 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
position: relative;
|
||||||
|
font-size: 12px;
|
||||||
|
.couponTop {
|
||||||
|
background-color: #fcebeb;
|
||||||
|
border-left: 1px solid #f3d4d4;
|
||||||
|
border-right: 1px solid #f3d4d4;
|
||||||
|
border-bottom: 1px dashed #f3d4d4;
|
||||||
|
border-radius: 8px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
.cpnamount {
|
||||||
|
position: relative;
|
||||||
|
height: 90px;
|
||||||
|
width: 34.08%;
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
border-right: 1px dashed #f3d4d4;
|
||||||
|
}
|
||||||
|
.amountWrap {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
-webkit-transform: translate(0, -50%);
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
.amount {
|
||||||
|
font-size: 15px;
|
||||||
|
.amountSign {
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
.amountNum {
|
||||||
|
font-size: 39px;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.couponInfoWrap {
|
||||||
|
position: relative;
|
||||||
|
margin-left: 37.465%;
|
||||||
|
height: 90px;
|
||||||
|
.cpninfo {
|
||||||
|
position: absolute;
|
||||||
|
top: 26px;
|
||||||
|
-webkit-transform: translate(0, -50%);
|
||||||
|
transform: translate(0, -50%);
|
||||||
|
width: 100%;
|
||||||
|
.detail {
|
||||||
|
padding-right: 15px;
|
||||||
|
word-break: break-all;
|
||||||
|
.name {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.validity {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 16px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
right: 16px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.couponMid {
|
||||||
|
position: relative;
|
||||||
|
height: 31px;
|
||||||
|
line-height: 31px;
|
||||||
|
padding-left: 16px;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
background-color: #fcebeb;
|
||||||
|
border-left: 1px solid #f3d4d4;
|
||||||
|
border-right: 1px solid #f3d4d4;
|
||||||
|
border-bottom: 1px solid #f3d4d4;
|
||||||
|
border-radius: 8px;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
i{
|
||||||
|
right: 16px;
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info{
|
||||||
|
display: none;
|
||||||
|
background-color: #fcebeb;
|
||||||
|
border-left: 1px solid #f3d4d4;
|
||||||
|
border-right: 1px solid #f3d4d4;
|
||||||
|
border-bottom: 1px solid #f3d4d4;
|
||||||
|
border-bottom-left-radius: 8px;
|
||||||
|
border-bottom-right-radius: 8px;
|
||||||
|
padding: 10px 25px 12px 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.show{
|
||||||
|
|
||||||
|
.couponMid {
|
||||||
|
border-bottom: 1px dashed #f3d4d4;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
i{
|
||||||
|
-webkit-transform: rotate(-90deg);
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.gray{
|
||||||
|
-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<headerNav title="我的收藏"/>
|
||||||
|
<van-list
|
||||||
|
v-model="loading"
|
||||||
|
:finished="finished"
|
||||||
|
@load="onLoad"
|
||||||
|
>
|
||||||
|
<div v-for="(item,index) in list" :key="index">
|
||||||
|
<van-swipe-cell :right-width="65" :on-close="onClose(item)">
|
||||||
|
<product-card :product='item' />
|
||||||
|
<span slot="right" >删除</span>
|
||||||
|
</van-swipe-cell>
|
||||||
|
</div>
|
||||||
|
</van-list>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { GetFavorite ,DelFavorite} from "../../../api/user.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
loading:false,
|
||||||
|
finished:false,
|
||||||
|
list:[],
|
||||||
|
page:0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
onClose(item){
|
||||||
|
return function(clickPosition, instance) {
|
||||||
|
switch (clickPosition) {
|
||||||
|
case 'left':
|
||||||
|
case 'cell':
|
||||||
|
case 'outside':
|
||||||
|
instance.close();
|
||||||
|
break;
|
||||||
|
case 'right':
|
||||||
|
this.$dialog.confirm({
|
||||||
|
message: '确定删除吗？'
|
||||||
|
}).then(() => {
|
||||||
|
DelFavorite(item.id).then(response=>{
|
||||||
|
this.$toast('删除成功');
|
||||||
|
this.$router.go(0);
|
||||||
|
})
|
||||||
|
instance.close();
|
||||||
|
}).catch(() => {
|
||||||
|
// on cancel
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.page++;
|
||||||
|
GetFavorite().then(response=>{
|
||||||
|
response.list.forEach(item => {
|
||||||
|
this.list.push(item);
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
if(response.TotalPage<=this.page){
|
||||||
|
this.finished = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.van-swipe-cell{
|
||||||
|
&__left,
|
||||||
|
&__right {
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 15px;
|
||||||
|
width: 65px;
|
||||||
|
height: 100px;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100px;
|
||||||
|
background-color: #F44;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,152 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="user-profile">
|
||||||
|
<div class="user-profile-avatar">
|
||||||
|
<a href="/#/user/info">
|
||||||
|
<img :src="data.Avatar" alt="用户头像">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="user-profile-username">
|
||||||
|
<a href="/#/user/info">
|
||||||
|
<span class="m-nick">{{data.UserName}}</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<van-cell-group class="user-group">
|
||||||
|
<van-cell title="我的订单" value="查看全部订单" is-link to="/user/order"/>
|
||||||
|
<van-row class="user-links">
|
||||||
|
<router-link to="/user/order/1">
|
||||||
|
<van-col span="6">
|
||||||
|
<van-icon name="pending-payment">
|
||||||
|
<van-info :info="data.UnPayTotal" />
|
||||||
|
</van-icon>
|
||||||
|
<div>待付款</div>
|
||||||
|
</van-col>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/user/order/2">
|
||||||
|
<van-col span="6">
|
||||||
|
<van-icon name="logistics">
|
||||||
|
<van-info :info="data.UnRecieveTotal" />
|
||||||
|
</van-icon>
|
||||||
|
<div>待发货</div>
|
||||||
|
</van-col>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/user/order/2">
|
||||||
|
<van-col span="6">
|
||||||
|
<van-icon name="point-gift">
|
||||||
|
</van-icon>
|
||||||
|
<div>已完成</div>
|
||||||
|
</van-col>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/user/aftersale">
|
||||||
|
<van-col span="6">
|
||||||
|
<van-icon name="after-sale" >
|
||||||
|
<van-info :info="data.AfterSaleTotal" />
|
||||||
|
</van-icon>
|
||||||
|
<div>售后</div>
|
||||||
|
</van-col>
|
||||||
|
</router-link>
|
||||||
|
</van-row>
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
<van-cell-group class="user-group">
|
||||||
|
<van-cell title="我的服务" />
|
||||||
|
<van-row class="user-links">
|
||||||
|
<router-link to="/user/coupon">
|
||||||
|
<van-col span="6">
|
||||||
|
<van-icon name="coupon" />
|
||||||
|
<div>我的优惠券</div>
|
||||||
|
</van-col>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/user/favorite">
|
||||||
|
<van-col span="6">
|
||||||
|
<van-icon name="like-o" />
|
||||||
|
<div>我的收藏</div>
|
||||||
|
</van-col>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/user/address">
|
||||||
|
<van-col span="6" >
|
||||||
|
<van-icon name="location"/>
|
||||||
|
<div>收货地址</div>
|
||||||
|
</van-col>
|
||||||
|
</router-link>
|
||||||
|
</van-row>
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell title="切换账号" is-link to="/login" />
|
||||||
|
</van-cell-group>
|
||||||
|
<navigate />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { GetUserIndex } from "../../api/user.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
data:{}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
created:function(){
|
||||||
|
GetUserIndex().then(response=>{
|
||||||
|
this.data=response;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.user {
|
||||||
|
&-profile {
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 141px;
|
||||||
|
background-color: #f1f5fa;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&-avatar{
|
||||||
|
padding-top: 23px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
|
||||||
|
img{
|
||||||
|
|
||||||
|
width: 65px;
|
||||||
|
height: 65px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-username{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-group {
|
||||||
|
margin-bottom: .3rem;
|
||||||
|
|
||||||
|
.van-cell__value{
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-links {
|
||||||
|
padding: 15px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fff;
|
||||||
|
.van-icon {
|
||||||
|
position: relative;
|
||||||
|
width: 24px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<headerNav title="账号管理"/>
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell title="修改个人信息" is-link />
|
||||||
|
<van-cell title="修改登录密码" is-link />
|
||||||
|
<van-cell title="修改绑定手机" is-link />
|
||||||
|
<van-cell title="关联账号" is-link />
|
||||||
|
<van-cell title="切换账号" is-link to="/login" />
|
||||||
|
</van-cell-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
<template>
|
||||||
|
<div style="background: #f7f7f7;">
|
||||||
|
<headerNav title="订单详情"/>
|
||||||
|
<van-steps :active="active">
|
||||||
|
<van-step>提交订单</van-step>
|
||||||
|
<van-step>配送中</van-step>
|
||||||
|
<van-step>交易完成</van-step>
|
||||||
|
</van-steps>
|
||||||
|
|
||||||
|
<van-cell class="logistics" to="/user/order/logistics/1" title="您的订单已由本人签收（已在配送员处采用无纸化方式签收本订单）。感谢您在京东购物，欢迎再次光临。参加评价还能赢取京豆哟。" label="2018-08-31 21:04:03" icon="logistics" is-link />
|
||||||
|
<div style="height:15px;"></div>
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell
|
||||||
|
center
|
||||||
|
:border="false"
|
||||||
|
>
|
||||||
|
<template>
|
||||||
|
<div>张三 138****6520</div>
|
||||||
|
<div>广东省深圳市南山区科技园 </div>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
|
<div style="height:15px;"></div>
|
||||||
|
<div v-for="(product,i) in products" :key="i">
|
||||||
|
<product-card :product='product' />
|
||||||
|
</div>
|
||||||
|
<div style="height:15px;"></div>
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell title="订单编号" value="18081609422771742" />
|
||||||
|
<van-cell title="下单时间" value="2018-08-16 09:42:27" />
|
||||||
|
<van-cell title="订单状态" value="配送中" />
|
||||||
|
</van-cell-group>
|
||||||
|
<div style="height:15px;"></div>
|
||||||
|
<van-cell-group class="total">
|
||||||
|
<van-cell title="商品总额" value="9.99" />
|
||||||
|
<van-cell title="运费" value="+ 0.00" />
|
||||||
|
<van-cell title="实付金额" value="9.99" style="font-weight: 700;" />
|
||||||
|
</van-cell-group>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="munu">
|
||||||
|
<van-button size="small">确认收货</van-button>
|
||||||
|
<van-button size="small" type="danger">支付</van-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
active:1,
|
||||||
|
products:[
|
||||||
|
{
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499',
|
||||||
|
quantity:2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499',
|
||||||
|
quantity:2
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.logistics{
|
||||||
|
margin-top: 15px;
|
||||||
|
i{
|
||||||
|
line-height: 60px; font-size: 20px;
|
||||||
|
}
|
||||||
|
.van-cell__title span{
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
.van-cell__label{
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.total{
|
||||||
|
.van-cell__value{color: red;}
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
height:50px;
|
||||||
|
.munu{
|
||||||
|
position: fixed;
|
||||||
|
height: 49px;
|
||||||
|
border-top: 1px solid #e5e5e5;
|
||||||
|
bottom: 0;
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
line-height: 24px;
|
||||||
|
text-align: right;
|
||||||
|
.van-button{
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,176 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<headerNav title="我的订单"/>
|
||||||
|
<van-tabs v-model="active">
|
||||||
|
<van-tab title="全部">
|
||||||
|
|
||||||
|
<div v-for="(item,index) in list" :key="index">
|
||||||
|
<van-cell-group class="order-item" >
|
||||||
|
<van-panel :title="'订单：'+item.ordercode" :status="item.state" >
|
||||||
|
<div slot="header">
|
||||||
|
<van-cell class="title" :title="'订单：'+item.ordercode" :value="item.state" :to="'/user/order/info/'+item.orderid"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<router-link :to="'/user/order/info/'+item.orderid">
|
||||||
|
<div v-if="item.products.length==1" v-for="(product,i) in item.products" :key="i">
|
||||||
|
<product-card :product='product' />
|
||||||
|
</div>
|
||||||
|
<div v-if="item.products.length>1" class="more" >
|
||||||
|
<div class="item" v-for="(product,i) in item.products" :key="i">
|
||||||
|
<div >
|
||||||
|
<img :src="product.imageURL"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div slot="footer">
|
||||||
|
<span class="total">总价：￥8154898.89</span>
|
||||||
|
<van-button size="small">确认收货</van-button>
|
||||||
|
<van-button size="small" type="danger">支付</van-button>
|
||||||
|
</div>
|
||||||
|
</van-panel>
|
||||||
|
</van-cell-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</van-tab>
|
||||||
|
<van-tab title="待付款">内容 2</van-tab>
|
||||||
|
<van-tab title="待收货">内容 3</van-tab>
|
||||||
|
<van-tab title="已完成">内容 4</van-tab>
|
||||||
|
<van-tab title="已取消">内容 5</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
active:0,
|
||||||
|
|
||||||
|
list:[
|
||||||
|
{
|
||||||
|
orderid:1,
|
||||||
|
ordercode:'4511248234235',
|
||||||
|
state:'待付款',
|
||||||
|
products:[
|
||||||
|
{
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499',
|
||||||
|
quantity:2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499',
|
||||||
|
quantity:1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499',
|
||||||
|
quantity:2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499',
|
||||||
|
quantity:2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499',
|
||||||
|
quantity:2
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orderid:2,
|
||||||
|
ordercode:'4511248234235',
|
||||||
|
state:'待收货',
|
||||||
|
products:[
|
||||||
|
{
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499',
|
||||||
|
quantity:2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orderid:3,
|
||||||
|
ordercode:'4511248234235',
|
||||||
|
state:'已完成',
|
||||||
|
products:[
|
||||||
|
{
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499',
|
||||||
|
quantity:2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
orderid:4,
|
||||||
|
ordercode:'4511248234235',
|
||||||
|
state:'已取消',
|
||||||
|
products:[
|
||||||
|
{
|
||||||
|
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||||
|
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||||
|
price:'499',
|
||||||
|
quantity:2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
|
||||||
|
.order-item{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
.title{
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
|
||||||
|
.van-cell__title{
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
.van-cell__value{
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.van-panel__footer {
|
||||||
|
text-align: right;
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
.van-button {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.total{
|
||||||
|
position: absolute;
|
||||||
|
top: 17px;
|
||||||
|
left: 15px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.more{
|
||||||
|
overflow-x: scroll;white-space: nowrap; -webkit-overflow-scrolling: touch; margin: 5px 0 5px 15px;
|
||||||
|
.item{
|
||||||
|
width: 90px; height:90px; margin-right: 10px;display: inline-block;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<template>
|
||||||
|
<div style="background: #f7f7f7;">
|
||||||
|
<headerNav title="订单追踪"/>
|
||||||
|
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell title="订单编号" value="18081609422771742" />
|
||||||
|
</van-cell-group>
|
||||||
|
<van-tabs >
|
||||||
|
<van-tab title="包裹1">
|
||||||
|
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell title="快递方式" value="顺丰快递" />
|
||||||
|
<van-cell title="快递单号" value="51234548875645645" />
|
||||||
|
</van-cell-group>
|
||||||
|
<van-steps direction="vertical" :active="0" active-color="#f60" style="margin-top: 15px;">
|
||||||
|
<van-step>
|
||||||
|
<h3>【城市】物流状态1</h3>
|
||||||
|
<p>2016-07-12 12:40</p>
|
||||||
|
</van-step>
|
||||||
|
<van-step>
|
||||||
|
<h3>【城市】物流状态2</h3>
|
||||||
|
<p>2016-07-11 10:00</p>
|
||||||
|
</van-step>
|
||||||
|
<van-step>
|
||||||
|
<h3>快件已发货</h3>
|
||||||
|
<p>2016-07-10 09:30</p>
|
||||||
|
</van-step>
|
||||||
|
</van-steps>
|
||||||
|
</van-tab>
|
||||||
|
<van-tab title="包裹2">内容 3</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue