clone 开源的 Shopping
This commit is contained in:
sin
parent
78945c61a7
commit
c9d71726fa
21
mobile-web/.gitignore
vendored
Normal file
21
mobile-web/.gitignore
vendored
Normal file
@ -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*
|
||||
90
mobile-web/README.md
Normal file
90
mobile-web/README.md
Normal file
@ -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] 界面样式
|
||||
- [ ] 数据通过接口绑定
|
||||
- [ ] 定制主题
|
||||
- [ ] 代码重构优化
|
||||
|
||||
## 页面
|
||||
```
|
||||
- 首页
|
||||
- 分类
|
||||
- 商品
|
||||
- 详情
|
||||
- 列表
|
||||
- 购物车
|
||||
- 提交订单
|
||||
- 会员
|
||||
- 会员中心
|
||||
- 账户管理
|
||||
- 订单
|
||||
- 列表
|
||||
- 详情
|
||||
- 追踪
|
||||
- 售后
|
||||
- 申请
|
||||
- 列表
|
||||
- 详情
|
||||
- 进度详情
|
||||
- 我的优惠券
|
||||
- 我的收藏
|
||||
- 收货地址
|
||||
- 列表
|
||||
- 编辑
|
||||
- 手机登录
|
||||
- 手机注册
|
||||
|
||||
|
||||
```
|
||||
|
||||
10
mobile-web/babel.config.js
Normal file
10
mobile-web/babel.config.js
Normal file
@ -0,0 +1,10 @@
|
||||
module.exports = {
|
||||
presets: ['@vue/app'],
|
||||
plugins: [
|
||||
[
|
||||
'import',
|
||||
{ libraryName: 'vant', libraryDirectory: 'es', style: true },
|
||||
'vant'
|
||||
]
|
||||
]
|
||||
};
|
||||
BIN
mobile-web/docs/static/card.png
vendored
Normal file
BIN
mobile-web/docs/static/card.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
mobile-web/docs/static/category.png
vendored
Normal file
BIN
mobile-web/docs/static/category.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
mobile-web/docs/static/index.png
vendored
Normal file
BIN
mobile-web/docs/static/index.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
mobile-web/docs/static/login.png
vendored
Normal file
BIN
mobile-web/docs/static/login.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
mobile-web/docs/static/order_info.png
vendored
Normal file
BIN
mobile-web/docs/static/order_info.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
mobile-web/docs/static/order_list.png
vendored
Normal file
BIN
mobile-web/docs/static/order_list.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
mobile-web/docs/static/product_detail.png
vendored
Normal file
BIN
mobile-web/docs/static/product_detail.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
BIN
mobile-web/docs/static/product_list.png
vendored
Normal file
BIN
mobile-web/docs/static/product_list.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
mobile-web/docs/static/qrcode.png
vendored
Normal file
BIN
mobile-web/docs/static/qrcode.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
mobile-web/docs/static/show1.jpg
vendored
Normal file
BIN
mobile-web/docs/static/show1.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
BIN
mobile-web/docs/static/show2.jpg
vendored
Normal file
BIN
mobile-web/docs/static/show2.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 351 KiB |
BIN
mobile-web/docs/static/show3.jpg
vendored
Normal file
BIN
mobile-web/docs/static/show3.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
BIN
mobile-web/docs/static/submit_order.png
vendored
Normal file
BIN
mobile-web/docs/static/submit_order.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
49
mobile-web/package.json
Normal file
49
mobile-web/package.json
Normal file
@ -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"
|
||||
]
|
||||
}
|
||||
BIN
mobile-web/public/favicon.ico
Normal file
BIN
mobile-web/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
14
mobile-web/public/index.html
Normal file
14
mobile-web/public/index.html
Normal file
@ -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>
|
||||
15
mobile-web/src/App.vue
Normal file
15
mobile-web/src/App.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './assets/style/common.css';
|
||||
|
||||
export default {
|
||||
name: 'app'
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
17
mobile-web/src/api/page.js
Normal file
17
mobile-web/src/api/page.js
Normal file
@ -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 }
|
||||
})
|
||||
}
|
||||
75
mobile-web/src/api/user.js
Normal file
75
mobile-web/src/api/user.js
Normal file
@ -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 }
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
BIN
mobile-web/src/assets/images/notice.png
Normal file
BIN
mobile-web/src/assets/images/notice.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
mobile-web/src/assets/logo.png
Normal file
BIN
mobile-web/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
7
mobile-web/src/assets/style/common.css
Normal file
7
mobile-web/src/assets/style/common.css
Normal file
@ -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;}
|
||||
888
mobile-web/src/assets/style/index.css
Normal file
888
mobile-web/src/assets/style/index.css
Normal file
@ -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*/
|
||||
106
mobile-web/src/components/common/productcard.vue
Normal file
106
mobile-web/src/components/common/productcard.vue
Normal file
@ -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>
|
||||
22
mobile-web/src/components/footer/navigate.vue
Normal file
22
mobile-web/src/components/footer/navigate.vue
Normal file
@ -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>
|
||||
|
||||
30
mobile-web/src/components/header/nav.vue
Normal file
30
mobile-web/src/components/header/nav.vue
Normal file
@ -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>
|
||||
183
mobile-web/src/components/page/cube.vue
Normal file
183
mobile-web/src/components/page/cube.vue
Normal file
@ -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>
|
||||
|
||||
64
mobile-web/src/components/page/imageAd.vue
Normal file
64
mobile-web/src/components/page/imageAd.vue
Normal file
@ -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>
|
||||
36
mobile-web/src/components/page/imageText.vue
Normal file
36
mobile-web/src/components/page/imageText.vue
Normal file
@ -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>
|
||||
30
mobile-web/src/components/page/line.vue
Normal file
30
mobile-web/src/components/page/line.vue
Normal file
@ -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>
|
||||
|
||||
29
mobile-web/src/components/page/notice.vue
Normal file
29
mobile-web/src/components/page/notice.vue
Normal file
@ -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>
|
||||
|
||||
81
mobile-web/src/components/page/product.vue
Normal file
81
mobile-web/src/components/page/product.vue
Normal file
@ -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>
|
||||
60
mobile-web/src/components/page/search.vue
Normal file
60
mobile-web/src/components/page/search.vue
Normal file
@ -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>
|
||||
25
mobile-web/src/components/page/text.vue
Normal file
25
mobile-web/src/components/page/text.vue
Normal file
@ -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>
|
||||
|
||||
28
mobile-web/src/components/page/title.vue
Normal file
28
mobile-web/src/components/page/title.vue
Normal file
@ -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>
|
||||
20
mobile-web/src/components/page/whitespace.vue
Normal file
20
mobile-web/src/components/page/whitespace.vue
Normal file
@ -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>
|
||||
|
||||
67
mobile-web/src/components/search/searchtop.vue
Normal file
67
mobile-web/src/components/search/searchtop.vue
Normal file
@ -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>
|
||||
51
mobile-web/src/config/components.js
Normal file
51
mobile-web/src/config/components.js
Normal file
@ -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)
|
||||
});
|
||||
}
|
||||
25
mobile-web/src/config/env.js
Normal file
25
mobile-web/src/config/env.js
Normal file
@ -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,
|
||||
}
|
||||
10
mobile-web/src/config/rem.js
Normal file
10
mobile-web/src/config/rem.js
Normal file
@ -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);
|
||||
|
||||
94
mobile-web/src/config/request.js
Normal file
94
mobile-web/src/config/request.js
Normal file
@ -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
|
||||
200
mobile-web/src/config/router.js
Normal file
200
mobile-web/src/config/router.js
Normal file
@ -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
|
||||
};
|
||||
3780
mobile-web/src/data/area.js
Normal file
3780
mobile-web/src/data/area.js
Normal file
File diff suppressed because it is too large
Load Diff
3
mobile-web/src/data/common/success.json
Normal file
3
mobile-web/src/data/common/success.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
|
||||
}
|
||||
34
mobile-web/src/data/data.js
Normal file
34
mobile-web/src/data/data.js
Normal file
@ -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,
|
||||
}
|
||||
288
mobile-web/src/data/page/GetPage.json
Normal file
288
mobile-web/src/data/page/GetPage.json
Normal file
@ -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": ""
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
62
mobile-web/src/data/page/Product.json
Normal file
62
mobile-web/src/data/page/Product.json
Normal file
@ -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"
|
||||
}
|
||||
]
|
||||
142
mobile-web/src/data/sku.js
Normal file
142
mobile-web/src/data/sku.js
Normal file
@ -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: ''
|
||||
}
|
||||
};
|
||||
9
mobile-web/src/data/user/GetAddressById.json
Normal file
9
mobile-web/src/data/user/GetAddressById.json
Normal file
@ -0,0 +1,9 @@
|
||||
|
||||
{
|
||||
"id": "2",
|
||||
"name": "李四",
|
||||
"tel": "13108826530",
|
||||
"areaCode": "712899",
|
||||
"addressDetail": "浙江省杭州市拱墅区莫干山路 50 号",
|
||||
"isDefault": false
|
||||
}
|
||||
14
mobile-web/src/data/user/GetAddressList.json
Normal file
14
mobile-web/src/data/user/GetAddressList.json
Normal file
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"id": "1",
|
||||
"name": "张三",
|
||||
"tel": "13000000000",
|
||||
"address": "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "李四",
|
||||
"tel": "1310000000",
|
||||
"address": "浙江省杭州市拱墅区莫干山路 50 号"
|
||||
}
|
||||
]
|
||||
38
mobile-web/src/data/user/GetCoupon.json
Normal file
38
mobile-web/src/data/user/GetCoupon.json
Normal file
@ -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、虚拟商品及部分特殊购物流程不可用，特殊流程如秒杀等；"
|
||||
}
|
||||
]
|
||||
}
|
||||
35
mobile-web/src/data/user/GetFavorite.json
Normal file
35
mobile-web/src/data/user/GetFavorite.json
Normal file
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
7
mobile-web/src/data/user/GetUserIndex.json
Normal file
7
mobile-web/src/data/user/GetUserIndex.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"UserName":"Yrin",
|
||||
"Avatar":"http://haitao.nos.netease.com/ZnB0PM5xDzXZ2FeVlmT170102401021_150_150.png",
|
||||
"UnPayTotal":1,
|
||||
"UnRecieveTotal":2,
|
||||
"AfterSaleTotal":3
|
||||
}
|
||||
0
mobile-web/src/data/user/SaveAddress
Normal file
0
mobile-web/src/data/user/SaveAddress
Normal file
16
mobile-web/src/main.js
Normal file
16
mobile-web/src/main.js
Normal file
@ -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)
|
||||
});
|
||||
67
mobile-web/src/page/account/login.vue
Normal file
67
mobile-web/src/page/account/login.vue
Normal file
@ -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>
|
||||
31
mobile-web/src/page/account/password.vue
Normal file
31
mobile-web/src/page/account/password.vue
Normal file
@ -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>
|
||||
34
mobile-web/src/page/account/phonelogin.vue
Normal file
34
mobile-web/src/page/account/phonelogin.vue
Normal file
@ -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>
|
||||
38
mobile-web/src/page/account/register.vue
Normal file
38
mobile-web/src/page/account/register.vue
Normal file
@ -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>
|
||||
20
mobile-web/src/page/activity/index.vue
Normal file
20
mobile-web/src/page/activity/index.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<page/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import page from './page/page.vue'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
page
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
205
mobile-web/src/page/cart/index.vue
Normal file
205
mobile-web/src/page/cart/index.vue
Normal file
@ -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>
|
||||
180
mobile-web/src/page/category/index.vue
Normal file
180
mobile-web/src/page/category/index.vue
Normal file
@ -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>
|
||||
23
mobile-web/src/page/index.vue
Normal file
23
mobile-web/src/page/index.vue
Normal file
@ -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>
|
||||
|
||||
|
||||
73
mobile-web/src/page/page/page.vue
Normal file
73
mobile-web/src/page/page/page.vue
Normal file
@ -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>
|
||||
326
mobile-web/src/page/product/detail.vue
Normal file
326
mobile-web/src/page/product/detail.vue
Normal file
@ -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>
|
||||
404
mobile-web/src/page/product/list.vue
Normal file
404
mobile-web/src/page/product/list.vue
Normal file
@ -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>
|
||||
184
mobile-web/src/page/shipping/order.vue
Normal file
184
mobile-web/src/page/shipping/order.vue
Normal file
@ -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>
|
||||
64
mobile-web/src/page/user/address/edit.vue
Normal file
64
mobile-web/src/page/user/address/edit.vue
Normal file
@ -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>
|
||||
65
mobile-web/src/page/user/address/list.vue
Normal file
65
mobile-web/src/page/user/address/list.vue
Normal file
@ -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>
|
||||
143
mobile-web/src/page/user/aftersale/apply.vue
Normal file
143
mobile-web/src/page/user/aftersale/apply.vue
Normal file
@ -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>
|
||||
60
mobile-web/src/page/user/aftersale/detail.vue
Normal file
60
mobile-web/src/page/user/aftersale/detail.vue
Normal file
@ -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>
|
||||
99
mobile-web/src/page/user/aftersale/list.vue
Normal file
99
mobile-web/src/page/user/aftersale/list.vue
Normal file
@ -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>
|
||||
34
mobile-web/src/page/user/aftersale/track.vue
Normal file
34
mobile-web/src/page/user/aftersale/track.vue
Normal file
@ -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>
|
||||
358
mobile-web/src/page/user/coupon/list.vue
Normal file
358
mobile-web/src/page/user/coupon/list.vue
Normal file
@ -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>
|
||||
87
mobile-web/src/page/user/favorite/list.vue
Normal file
87
mobile-web/src/page/user/favorite/list.vue
Normal file
@ -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>
|
||||
152
mobile-web/src/page/user/index.vue
Normal file
152
mobile-web/src/page/user/index.vue
Normal file
@ -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>
|
||||
22
mobile-web/src/page/user/info/detail.vue
Normal file
22
mobile-web/src/page/user/info/detail.vue
Normal file
@ -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>
|
||||
110
mobile-web/src/page/user/order/info.vue
Normal file
110
mobile-web/src/page/user/order/info.vue
Normal file
@ -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>
|
||||
176
mobile-web/src/page/user/order/list.vue
Normal file
176
mobile-web/src/page/user/order/list.vue
Normal file
@ -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>
|
||||
44
mobile-web/src/page/user/order/logistics.vue
Normal file
44
mobile-web/src/page/user/order/logistics.vue
Normal file
@ -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
Block a user