移除 user-mobile 项目,迁移到单独的工程
|
@ -1,16 +0,0 @@
|
|||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[Makefile]
|
||||
indent_style = tab
|
|
@ -1,22 +0,0 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
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*
|
|
@ -1,3 +0,0 @@
|
|||
# vue 商城
|
||||
|
||||
> TODO
|
|
@ -1,90 +0,0 @@
|
|||
## 基于Vue实现开箱即用移动端商城的单页应用
|
||||
|
||||
>这是开箱即用移动端商城的框架。只需要后端返回标准接口数据,前端配置接口地址等信息,标准商城的页面不需要做任何调整。
|
||||
|
||||
|
||||
## 特性
|
||||
- 开箱即用,集成后台接口格式,前端可做二次开发以实现自有业务
|
||||
- 首页是由图片广告、图文导航、商品、公告、搜索、文本、标题、辅助空白、辅助线、方格等组件根据后端接口数据动态渲染,可根据后端返回的数据渲染出N种首页效果
|
||||
- 定制主题
|
||||
|
||||
## 手机预览
|
||||
|
||||
可以手机扫码以下二维码访问手机端 demo:
|
||||
|
||||
![](./docs/static/qrcode.png)
|
||||
|
||||
![](./docs/static/show1.jpg)
|
||||
|
||||
![](./docs/static/show2.jpg)
|
||||
|
||||
![](./docs/static/show3.jpg)
|
||||
|
||||
|
||||
## 技术栈
|
||||
|
||||
- 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] 界面样式
|
||||
- [ ] 数据通过接口绑定
|
||||
- [ ] 定制主题
|
||||
- [ ] 代码重构优化
|
||||
|
||||
## 页面
|
||||
```
|
||||
- 首页
|
||||
- 分类
|
||||
- 商品
|
||||
- 详情
|
||||
- 列表
|
||||
- 购物车
|
||||
- 提交订单
|
||||
- 会员
|
||||
- 会员中心
|
||||
- 账户管理
|
||||
- 订单
|
||||
- 列表
|
||||
- 详情
|
||||
- 追踪
|
||||
- 售后
|
||||
- 申请
|
||||
- 列表
|
||||
- 详情
|
||||
- 进度详情
|
||||
- 我的优惠券
|
||||
- 我的收藏
|
||||
- 收货地址
|
||||
- 列表
|
||||
- 编辑
|
||||
- 手机登录
|
||||
- 手机注册
|
||||
|
||||
|
||||
```
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
module.exports = {
|
||||
presets: ['@vue/app'],
|
||||
plugins: [
|
||||
[
|
||||
'import',
|
||||
{ libraryName: 'vant', libraryDirectory: 'es', style: true },
|
||||
'vant'
|
||||
]
|
||||
]
|
||||
};
|
Before Width: | Height: | Size: 97 KiB |
Before Width: | Height: | Size: 134 KiB |
Before Width: | Height: | Size: 242 KiB |
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 68 KiB |
Before Width: | Height: | Size: 82 KiB |
Before Width: | Height: | Size: 171 KiB |
Before Width: | Height: | Size: 117 KiB |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 326 KiB |
Before Width: | Height: | Size: 351 KiB |
Before Width: | Height: | Size: 227 KiB |
Before Width: | Height: | Size: 94 KiB |
|
@ -1,53 +0,0 @@
|
|||
{
|
||||
"name": "shop-vue",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "npm run serve",
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "NODE_ENV=production vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
"moment": "^2.24.0",
|
||||
"pingpp-js": "^2.2.13",
|
||||
"vant": "^1.3.1",
|
||||
"vue": "^2.5.17",
|
||||
"vue-router": "^3.0.1",
|
||||
"vuex": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.4.1",
|
||||
"@vue/cli-plugin-eslint": "^3.4.1",
|
||||
"@vue/cli-service": "^3.6.0",
|
||||
"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"
|
||||
]
|
||||
}
|
Before Width: | Height: | Size: 1.1 KiB |
|
@ -1,14 +0,0 @@
|
|||
<!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>
|
|
@ -1,25 +0,0 @@
|
|||
|
||||
# 使用说明
|
||||
|
||||
|
||||
### 第一步
|
||||
|
||||
```
|
||||
npm install
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 第二步
|
||||
复制文件到 server 目录
|
||||
|
||||
```
|
||||
cp -rf dist server
|
||||
```
|
||||
|
||||
### 第三步
|
||||
|
||||
```
|
||||
node server.prod
|
||||
```
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
//
|
||||
// 粉笔:
|
||||
// 输出不同颜色的提示信息
|
||||
|
||||
const chalk = require('chalk');
|
||||
|
||||
module.exports = {
|
||||
chalkError: chalk.red,
|
||||
chalkSuccess: chalk.green,
|
||||
chalkWarning: chalk.yellow,
|
||||
chalkProcessing: chalk.blue,
|
||||
};
|
|
@ -1,10 +0,0 @@
|
|||
module.exports = {
|
||||
'/admin-api -> http://180.167.213.26:18083/': {
|
||||
changeOrigin: true,
|
||||
pathRewrite: {},
|
||||
},
|
||||
'/server/api -> https://preview.pro.ant.design/': {
|
||||
changeOrigin: true,
|
||||
pathRewrite: { '^/server': '' },
|
||||
},
|
||||
};
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"name": "browser-work-server",
|
||||
"description": "node server",
|
||||
"dependencies": {
|
||||
"express": "^4.16.3",
|
||||
"object-assign": "4.1.1",
|
||||
"chalk": "2.4.1",
|
||||
"http-proxy-middleware": "^0.18.0"
|
||||
}
|
||||
}
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"name": "mobile-web",
|
||||
"script": "./server.prod.js",
|
||||
"instances": "1",
|
||||
"env": {
|
||||
"NODE_ENV": "development"
|
||||
},
|
||||
"env_production": {
|
||||
"NODE_ENV": "production"
|
||||
}
|
||||
}
|
|
@ -1,36 +0,0 @@
|
|||
const path = require('path');
|
||||
const express = require('express');
|
||||
|
||||
const { chalkSuccess } = require('./config/chalk.config');
|
||||
const proxyConfig = require('./config/proxy.prod.config');
|
||||
const proxyBuild = require('./utils/proxy.build');
|
||||
|
||||
// create app server
|
||||
const app = express();
|
||||
const port = 3100;
|
||||
|
||||
// host proxy
|
||||
app.use(proxyBuild(proxyConfig));
|
||||
|
||||
// use index.html
|
||||
app.use(express.static(path.join(__dirname, 'dist/css')));
|
||||
app.use(express.static(path.join(__dirname, 'dist/js')));
|
||||
app.use(express.static(path.join(__dirname, 'dist')));
|
||||
|
||||
app.use((req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
|
||||
});
|
||||
|
||||
app.listen(port, error => {
|
||||
if (error) {
|
||||
console.error(error);
|
||||
} else {
|
||||
console.info(
|
||||
chalkSuccess(
|
||||
'==> 🌎 Listening on port %s. ' + 'Open up http://localhost:%s/ in your browser.'
|
||||
),
|
||||
port,
|
||||
port
|
||||
);
|
||||
}
|
||||
});
|
|
@ -1,46 +0,0 @@
|
|||
|
||||
# 安装依赖包
|
||||
|
||||
cd mobile-web
|
||||
|
||||
npm install
|
||||
|
||||
# 开始构建
|
||||
|
||||
#npm run build
|
||||
|
||||
# 创建 app 运行目录
|
||||
|
||||
rm -rf app
|
||||
|
||||
mkdir app
|
||||
|
||||
# 复制配置文件
|
||||
|
||||
cp -rf server app/
|
||||
|
||||
# npm 构建项目
|
||||
|
||||
npm run build
|
||||
|
||||
# 复制文件到 server 努力
|
||||
|
||||
cp -rf dist app/server
|
||||
|
||||
# 复制文件到 project 目录执行
|
||||
|
||||
if [ ! -d "/work2/project/mobile-web/server/dist" ]; then
|
||||
mkdir -pv /work2/project/mobile-web/server/dist
|
||||
else
|
||||
rm -rf /work2/project/mobile-web/server/dist
|
||||
fi
|
||||
|
||||
cp -rf app/server /work2/project/mobile-web
|
||||
|
||||
# 安装 server 依赖项
|
||||
cd /work2/project/mobile-web/server
|
||||
|
||||
npm install
|
||||
|
||||
# 启动服务
|
||||
pm2 restart pm2.json
|
|
@ -1,46 +0,0 @@
|
|||
const proxy = require('http-proxy-middleware');
|
||||
const ObjectAssign = require('object-assign');
|
||||
const { chalkError, chalkSuccess } = require('../config/chalk.config');
|
||||
|
||||
/**
|
||||
*
|
||||
* key :
|
||||
* [0]: /api
|
||||
* [1]: target url
|
||||
*
|
||||
* 预计写法:
|
||||
* 1、 /api -> baidu.com : { }
|
||||
* 2、 /user : function() { return {} }
|
||||
*
|
||||
* @param config
|
||||
*/
|
||||
module.exports = function(config) {
|
||||
console.info(chalkSuccess('build proxy.%s.config 配置!'), process.env.NODE_ENV);
|
||||
|
||||
const proxys = [];
|
||||
|
||||
if (!config) {
|
||||
console.log(chalkError('proxy.%s.config 没有配置!'), process.env.NODE_ENV);
|
||||
}
|
||||
|
||||
for (const key in config) {
|
||||
if (/->/.test(key)) {
|
||||
const keys = key.toString().split('->');
|
||||
const source = keys[0].trim();
|
||||
const target = keys[1].trim();
|
||||
|
||||
if (typeof config !== 'object') {
|
||||
console.log(
|
||||
chalkError('%s: proxy.%s.config 初始化失败 config 类型为 object!'),
|
||||
key,
|
||||
process.env.NODE_ENV
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
proxys.push(proxy(source, ObjectAssign({ target }, config[key])));
|
||||
}
|
||||
}
|
||||
|
||||
return proxys;
|
||||
};
|
|
@ -1,14 +0,0 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './assets/style/common.css';
|
||||
export default {
|
||||
name: 'app'
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -1,187 +0,0 @@
|
|||
import request from "../config/request";
|
||||
|
||||
// order
|
||||
|
||||
export function createOrder(params) {
|
||||
return request({
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
url: '/order-api/users/order/create_order',
|
||||
method: 'post',
|
||||
data: {
|
||||
...params,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function getOrderPage(params) {
|
||||
return request({
|
||||
url: '/order-api/users/order/order_page',
|
||||
method: 'get',
|
||||
params: {
|
||||
...params,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function confirmReceiving(orderId) {
|
||||
return request({
|
||||
url: '/order-api/users/order/confirm_receiving',
|
||||
method: 'post',
|
||||
params: {
|
||||
orderId,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getOrderConfirmCreateOrder(skuId, quantity, couponCardId) {
|
||||
return request({
|
||||
url: '/order-api/users/order/confirm_create_order',
|
||||
method: 'get',
|
||||
params: {
|
||||
skuId,
|
||||
quantity,
|
||||
couponCardId,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getOrderInfo(orderId) {
|
||||
return request({
|
||||
url: '/order-api/users/order/info',
|
||||
method: 'get',
|
||||
params: {
|
||||
orderId,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Cart
|
||||
|
||||
export function createOrderFromCart(userAddressId, couponCardId, remark) {
|
||||
return request({
|
||||
url: '/order-api/users/order/create_order_from_cart',
|
||||
method: 'post',
|
||||
params: {
|
||||
userAddressId,
|
||||
remark,
|
||||
couponCardId,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function addCart(skuId, quantity) {
|
||||
return request({
|
||||
url: '/order-api/users/cart/add',
|
||||
method: 'post',
|
||||
params: {
|
||||
skuId,
|
||||
quantity,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function countCart() {
|
||||
return request({
|
||||
url: '/order-api/users/cart/count',
|
||||
method: 'get',
|
||||
params: {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function listCart() {
|
||||
return request({
|
||||
url: '/order-api/users/cart/list',
|
||||
method: 'get',
|
||||
params: {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function updateCartSelected(skuIds, selected) {
|
||||
return request({
|
||||
url: '/order-api/users/cart/update_selected',
|
||||
method: 'post',
|
||||
params: {
|
||||
skuIds: skuIds.join(','),
|
||||
selected,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getCartConfirmCreateOrder(couponCardId) {
|
||||
return request({
|
||||
url: '/order-api/users/cart/confirm_create_order',
|
||||
method: 'get',
|
||||
params: {
|
||||
couponCardId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getCartCalcSkuPrice(skuId) {
|
||||
return request({
|
||||
url: '/order-api/users/cart/calc_sku_price',
|
||||
method: 'get',
|
||||
params: {
|
||||
skuId,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 物流信息
|
||||
|
||||
export function getOrderLogisticsInfo(params) {
|
||||
return request({
|
||||
url: '/order-api/users/order_logistics/info_order',
|
||||
method: 'get',
|
||||
params: {
|
||||
...params,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getLogisticsInfo(logisticsId) {
|
||||
return request({
|
||||
url: '/order-api/users/order_logistics/info',
|
||||
method: 'GET',
|
||||
params: {
|
||||
logisticsId,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 退货信息
|
||||
|
||||
export function getOrderReturnReason() {
|
||||
return request({
|
||||
url: '/order-api/users/order_return/reason',
|
||||
method: 'GET',
|
||||
});
|
||||
}
|
||||
|
||||
export function orderReturnApply(params) {
|
||||
return request({
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
url: '/order-api/users/order_return/apply',
|
||||
method: 'POST',
|
||||
data: {
|
||||
...params,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function getOrderReturnInfo(orderId) {
|
||||
return request({
|
||||
url: '/order-api/users/order_return/info',
|
||||
method: 'GET',
|
||||
params: {
|
||||
orderId,
|
||||
},
|
||||
});
|
||||
}
|
|
@ -1,17 +0,0 @@
|
|||
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 }
|
||||
})
|
||||
}
|
|
@ -1,24 +0,0 @@
|
|||
import request from "../config/request";
|
||||
|
||||
export function getTransaction(appId, orderId) {
|
||||
return request({
|
||||
url: '/pay-api/users/transaction/get',
|
||||
method: 'get',
|
||||
params: {
|
||||
appId,
|
||||
orderId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function submitTransaction(appId, orderId, payChannel) {
|
||||
return request({
|
||||
url: '/pay-api/users/transaction/submit',
|
||||
method: 'post',
|
||||
params: {
|
||||
appId,
|
||||
orderId,
|
||||
payChannel
|
||||
}
|
||||
});
|
||||
}
|
|
@ -1,40 +0,0 @@
|
|||
import request from "../config/request";
|
||||
|
||||
export function getProductCategoryList(pid) {
|
||||
return request({
|
||||
url: '/product-api/users/category/list',
|
||||
method: 'get',
|
||||
params: {
|
||||
pid
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getProductSpuPage(cid, pageNo, pageSize) {
|
||||
return request({
|
||||
url: '/product-api/users/spu/page',
|
||||
method: 'get',
|
||||
params: {
|
||||
cid,
|
||||
pageNo: pageNo || 1,
|
||||
pageSize: pageSize || 10,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getProductSpuInfo(id) {
|
||||
return request({
|
||||
url: '/product-api/users/spu/info',
|
||||
method: 'get',
|
||||
params: {
|
||||
id,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function collectionSpu(spuId,hasCollectionType) {
|
||||
return request({
|
||||
url: '/product-api/users/spu/collection/'+spuId+'/' + hasCollectionType,
|
||||
method: 'post'
|
||||
});
|
||||
}
|
|
@ -1,58 +0,0 @@
|
|||
import request from "../config/request";
|
||||
|
||||
// Banner
|
||||
|
||||
export function getBannerList() {
|
||||
return request({
|
||||
url: '/promotion-api/users/banner/list',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// Product Recommend
|
||||
|
||||
export function getProductRecommendList() {
|
||||
return request({
|
||||
url: '/promotion-api/users/product_recommend/list',
|
||||
method: 'get',
|
||||
params: {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Coupon Template
|
||||
|
||||
export function getCouponTemplate(id) {
|
||||
return request({
|
||||
url: '/promotion-api/users/coupon/template/get',
|
||||
method: 'get',
|
||||
params: {
|
||||
id,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function doAddCouponCard(templateId) {
|
||||
return request({
|
||||
url: '/promotion-api/users/coupon/card/add',
|
||||
method: 'post',
|
||||
params: {
|
||||
templateId,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Coupon Card
|
||||
|
||||
export function getCouponPage(status, pageNo, pageSize) {
|
||||
return request({
|
||||
url: '/promotion-api/users/coupon/card/page',
|
||||
method: 'get',
|
||||
params: {
|
||||
status,
|
||||
pageNo,
|
||||
pageSize
|
||||
}
|
||||
});
|
||||
}
|
|
@ -1,26 +0,0 @@
|
|||
import request from "../config/request";
|
||||
|
||||
export function getProductPage({cid, keyword, pageNo, pageSize, sortField, sortOrder}) {
|
||||
return request({
|
||||
url: '/search-api/users/product/page',
|
||||
method: 'get',
|
||||
params: {
|
||||
cid,
|
||||
keyword,
|
||||
pageNo: pageNo || 1,
|
||||
pageSize: pageSize || 10,
|
||||
sortField: sortField,
|
||||
sortOrder: sortOrder,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getProductCondition({keyword}) {
|
||||
return request({
|
||||
url: '/search-api/users/product/condition',
|
||||
method: 'get',
|
||||
params: {
|
||||
keyword,
|
||||
}
|
||||
});
|
||||
}
|
|
@ -1,130 +0,0 @@
|
|||
import request from "../config/request";
|
||||
|
||||
export function GetFavoritePage(pageNo,pageSize){
|
||||
return request({
|
||||
url: '/user-api/users/favorite/page',
|
||||
method: 'get',
|
||||
params: { pageNo,pageSize }
|
||||
})
|
||||
}
|
||||
|
||||
export function DelFavorite(spuId){
|
||||
return request({
|
||||
url: '/user-api/users/favorite/remove',
|
||||
method: 'DELETE',
|
||||
params: { spuId }
|
||||
})
|
||||
}
|
||||
|
||||
export function hasUserSpuFavorite(spuId){
|
||||
return request({
|
||||
url: '/user-api/users/favorite/hasUserFavorite',
|
||||
method: 'get',
|
||||
params: {spuId}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
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 }
|
||||
})
|
||||
}
|
||||
|
||||
export function getUserInfo() {
|
||||
return request({
|
||||
url: '/user-api/users/user/info',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
export function doUserUpdateNickname(nickname) {
|
||||
return request({
|
||||
url: '/user-api/users/user/update_nickname',
|
||||
method: 'post',
|
||||
params: {
|
||||
nickname,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function doPassportMobileRegister(mobile, code) {
|
||||
return request({
|
||||
url: '/user-api/users/passport/mobile/register',
|
||||
method: 'post',
|
||||
params: {
|
||||
mobile,
|
||||
code,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function doPassportMobileSendRegisterCode(mobile) {
|
||||
return request({
|
||||
url: '/user-api/users/passport/mobile/send_register_code',
|
||||
method: 'post',
|
||||
params: {
|
||||
mobile,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// -------------------------- address
|
||||
|
||||
export function GetAddressList(){
|
||||
return request({
|
||||
url: '/user-api/users/address/list',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function GetAddressById(id){
|
||||
return request({
|
||||
url: '/user-api/users/address/address',
|
||||
method: 'get',
|
||||
params: { id }
|
||||
})
|
||||
}
|
||||
|
||||
export function GetDefaultAddress(){
|
||||
return request({
|
||||
url: '/user-api/users/address/default_address',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function UpdateAddress(data){
|
||||
return request({
|
||||
url: '/user-api/users/address/update',
|
||||
method: 'PUT',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
export function SaveAddress(data){
|
||||
return request({
|
||||
url: '/user-api/users/address/add',
|
||||
method: 'POST',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
export function DelAddress(data){
|
||||
return request({
|
||||
url: '/user-api/users/address/remove',
|
||||
method: 'DELETE',
|
||||
params: data
|
||||
})
|
||||
}
|
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 6.7 KiB |
|
@ -1,72 +0,0 @@
|
|||
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;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* 处理 pc 最大尺寸 */
|
||||
#app {
|
||||
/*border-left: 1px solid #ccc2bf;*/
|
||||
/*border-right: 1px solid #ccc2bf;*/
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
#app, .van-goods-action, .van-overflow-hidden {
|
||||
max-width: 600px!important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.van-tabbar, .van-submit-bar {
|
||||
max-width: 600px!important;
|
||||
position:fixed;
|
||||
margin:auto;
|
||||
left:0;
|
||||
right:0;
|
||||
}
|
||||
}
|
||||
.wap-wrap {
|
||||
font-size: 0.32rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#maxWidth {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
|
@ -1,888 +0,0 @@
|
|||
|
||||
|
||||
.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*/
|
|
@ -1,124 +0,0 @@
|
|||
<template>
|
||||
<router-link :to="'/product/' + product.id">
|
||||
<van-cell-group class="additional">
|
||||
<van-card
|
||||
:title="product.name"
|
||||
:desc="product.sellPoint"
|
||||
:num="(iscard?null:product.quantity)"
|
||||
style="background:#fff"
|
||||
>
|
||||
<template slot="thumb">
|
||||
<img :src="product.picUrls && product.picUrls ? product.picUrls[0] : ''"/>
|
||||
</template>
|
||||
<template slot="tags">
|
||||
<p class="price" v-if="product.buyPrice || product.price">
|
||||
¥<span>{{product.buyPrice ? product.buyPrice / 100.00 : product.price / 100.00}}</span>
|
||||
<van-tag v-if="product.promotionActivityTitle" plain type="danger">
|
||||
{{ product.promotionActivityTitle }}
|
||||
</van-tag>
|
||||
|
||||
</p>
|
||||
<!-- TODO 芋艿 暂时去掉 -->
|
||||
<!-- <van-stepper v-if="iscard" v-model="product.quantity" :max="product.max" :min="product.min"/>-->
|
||||
</template>
|
||||
</van-card>
|
||||
<!-- TODO 芋艿,暂时去掉赠品 -->
|
||||
<!--<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>
|
||||
</router-link>
|
||||
</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>
|
|
@ -1,45 +0,0 @@
|
|||
<template>
|
||||
<div style="height:50px;">
|
||||
<van-tabbar v-model="active">
|
||||
<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,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// TODO 芋艿,可能不太优雅
|
||||
let path = this.$route.path;
|
||||
switch (path) {
|
||||
case '/home':
|
||||
this.active = 0;
|
||||
break;
|
||||
case '/category':
|
||||
this.active = 1;
|
||||
break;
|
||||
case '/cart':
|
||||
this.active = 2;
|
||||
break;
|
||||
case '/user/index':
|
||||
this.active = 3;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<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>
|
|
@ -1,183 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<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>
|
||||
|
||||
// TODO 芋艿,准备废弃。
|
||||
|
||||
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>
|
|
@ -1,36 +0,0 @@
|
|||
<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>
|
|
@ -1,30 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<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>
|
|
@ -1,60 +0,0 @@
|
|||
<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>
|
|
@ -1,25 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<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>
|
|
@ -1,20 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<van-nav-bar left-arrow class="product-serach"
|
||||
@click-left="onBack"
|
||||
>
|
||||
<van-search
|
||||
v-model="value"
|
||||
placeholder="请输入搜索关键词"
|
||||
background="#fff"
|
||||
show-action
|
||||
@search="onSearchClick"
|
||||
slot="title"
|
||||
>
|
||||
<div slot="action" @click="onSearchClick">搜索</div>
|
||||
</van-search>
|
||||
</van-nav-bar>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Search } from "vant";
|
||||
|
||||
export default {
|
||||
name:'searchtop',
|
||||
components:{
|
||||
[Search.name]:Search,
|
||||
},
|
||||
props: {
|
||||
keyword: String,
|
||||
// onSearch: Function,
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
value: this.keyword,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onSearchClick() {
|
||||
// this.props.onSearch(this.keyword);
|
||||
this.$emit('onSearch', 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>
|
|
@ -1,51 +0,0 @@
|
|||
|
||||
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)
|
||||
});
|
||||
}
|
|
@ -1,30 +0,0 @@
|
|||
/**
|
||||
* 配置编译环境和线上环境之间的切换
|
||||
*
|
||||
* baseUrl: 域名地址
|
||||
* routerMode: 路由模式
|
||||
* dataSources:数据源
|
||||
*/
|
||||
|
||||
let baseUrl = '';
|
||||
let routerMode = 'hash';
|
||||
let dataSources='local';//local=本地,其他值代表非本地
|
||||
|
||||
|
||||
if (!process.env.NODE_ENV || process.env.NODE_ENV == 'development') {
|
||||
baseUrl='http://127.0.0.1';
|
||||
}else if(process.env.NODE_ENV == 'production'){
|
||||
baseUrl = 'http://180.167.213.26:18099';
|
||||
dataSources='production';
|
||||
}
|
||||
|
||||
// baseUrl = 'http://127.0.0.1';
|
||||
// baseUrl = 'http://180.167.213.26:18099';
|
||||
dataSources = 'remote';
|
||||
// dataSources = 'local';
|
||||
|
||||
export {
|
||||
baseUrl,
|
||||
routerMode,
|
||||
dataSources,
|
||||
}
|
|
@ -1,10 +0,0 @@
|
|||
(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);
|
||||
|
|
@ -1,283 +0,0 @@
|
|||
import axios from 'axios'
|
||||
import {baseUrl, dataSources} from './env';
|
||||
import datas from '../data/data';
|
||||
import { getAccessToken, getRefreshToken } from '../utils/cache.js';
|
||||
import { Dialog } from 'vant';
|
||||
import {setLoginToken} from "../utils/cache";
|
||||
|
||||
const serviceRouter = function(requestUrl) {
|
||||
function getConfig() {
|
||||
const configDev = {
|
||||
'/order-api': {
|
||||
prefix: '/order-api',
|
||||
target: 'http://127.0.0.1:18088/order-api',
|
||||
},
|
||||
'/user-api': {
|
||||
prefix: '/user-api',
|
||||
target: 'http://127.0.0.1:18082/user-api',
|
||||
},
|
||||
'/product-api': {
|
||||
prefix: '/product-api',
|
||||
target: 'http://127.0.0.1:18081/product-api',
|
||||
},
|
||||
'/promotion-api': {
|
||||
prefix: '/promotion-api',
|
||||
target: 'http://127.0.0.1:18085/promotion-api',
|
||||
},
|
||||
'/pay-api': {
|
||||
prefix: '/pay-api',
|
||||
target: 'http://127.0.0.1:18084/pay-api',
|
||||
},
|
||||
'/search-api': {
|
||||
prefix: '/search-api',
|
||||
target: 'http://127.0.0.1:18086/search-api',
|
||||
},
|
||||
};
|
||||
|
||||
const configProd = {
|
||||
'/order-api': {
|
||||
prefix: '/order-api',
|
||||
target: 'http://api.shop.iocoder.cn/order-api',
|
||||
},
|
||||
'/user-api': {
|
||||
prefix: '/user-api',
|
||||
target: 'http://api.shop.iocoder.cn/user-api',
|
||||
},
|
||||
'/product-api': {
|
||||
prefix: '/product-api',
|
||||
target: 'http://api.shop.iocoder.cn/product-api',
|
||||
},
|
||||
'/promotion-api': {
|
||||
prefix: '/promotion-api',
|
||||
target: 'http://api.shop.iocoder.cn/promotion-api',
|
||||
},
|
||||
'/pay-api': {
|
||||
prefix: '/pay-api',
|
||||
target: 'http://api.shop.iocoder.cn/pay-api',
|
||||
},
|
||||
'/search-api': {
|
||||
prefix: '/search-api',
|
||||
target: 'http://api.shop.iocoder.cn/search-api',
|
||||
},
|
||||
};
|
||||
|
||||
if (process.env.NODE_ENV == 'development') {
|
||||
return configDev;
|
||||
} else {
|
||||
return configProd
|
||||
}
|
||||
}
|
||||
|
||||
// function doCreateServer(config) {
|
||||
// // 获取请求配置文件
|
||||
// const createServer = {};
|
||||
// for (const configKey in config) {
|
||||
// const serverPrefix = configKey;
|
||||
// const {target} = config[configKey];
|
||||
// // 创建服务
|
||||
// createServer[serverPrefix] = axios.create({
|
||||
// baseURL: target, // api 的 base_url
|
||||
// timeout: 5000, // request timeout
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
const config = getConfig();
|
||||
|
||||
// TODO 芋艿,临时加下。
|
||||
// const createServer = doCreateServer(config);
|
||||
const indexOf = requestUrl.indexOf("/", 1);
|
||||
const _urlPrefix = requestUrl.substring(0, indexOf);
|
||||
if (!config[_urlPrefix]) {
|
||||
// throw new Error(`服务路由,未找到可用服务! ${requestUrl}`);
|
||||
console.error(`服务路由,未找到可用服务! ${requestUrl}`)
|
||||
return ''
|
||||
}
|
||||
// if (!createServer[_urlPrefix]) {
|
||||
// throw new Error("服务路由,未找到可用服务!");
|
||||
// }
|
||||
|
||||
// const { target } = config[_urlPrefix];
|
||||
// const requestServer = createServer[_urlPrefix];
|
||||
// const targetRequestUrl = _requestUrl.replace(_urlPrefix, target)
|
||||
// return createServer;
|
||||
return config[_urlPrefix];
|
||||
};
|
||||
|
||||
const service = axios.create({
|
||||
// baseURL: baseUrl, // api 的 base_url
|
||||
timeout: 30000, // request timeout
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
|
||||
}
|
||||
});
|
||||
|
||||
const servicef = function (parameter) {
|
||||
// debugger;
|
||||
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;
|
||||
}
|
||||
// 设置 access token
|
||||
// debugger;
|
||||
// if (getAccessToken()) {
|
||||
// parameter.headers = {
|
||||
// ...parameter.headers,
|
||||
// 'Authorization': `Bearer ${getAccessToken()}`,
|
||||
// };
|
||||
// }
|
||||
// debugger;
|
||||
|
||||
return service(parameter);
|
||||
};
|
||||
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
// 记录下原始请求的地址
|
||||
config.originUrl = config.url;
|
||||
// Do something before request is sent
|
||||
// if (store.getters.token) {
|
||||
// // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
|
||||
// config.headers['X-Token'] = getToken()
|
||||
// }
|
||||
|
||||
// 切换地址
|
||||
const { target, prefix } = serviceRouter(config.url)
|
||||
let url = config.url = config.url.replace(`${prefix}`, target);
|
||||
// TODO 芋艿,这些 url 不用增加认证 token 。可能这么写,有点脏,后面看看咋优化下。
|
||||
if (url.indexOf('user-api/users/passport/mobile/send_register_code') !== -1
|
||||
|| url.indexOf('user-api/users/passport/mobile/register') !== -1
|
||||
|| url.indexOf('user-api/users/passport/refresh_token') !== -1) {
|
||||
return config;
|
||||
}
|
||||
|
||||
// debugger;
|
||||
if (getAccessToken()) {
|
||||
config.headers['Authorization'] = `Bearer ${getAccessToken()}`;
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
// Do something with request error
|
||||
console.log(error) // for debug
|
||||
Promise.reject(error)
|
||||
}
|
||||
);
|
||||
|
||||
function refreshToken(lastResponse) {
|
||||
// TODO 芋艿,可能会存在多个异步 callback 的情况。
|
||||
let refreshToken = getRefreshToken();
|
||||
return servicef({
|
||||
url: '/user-api/users/passport/refresh_token',
|
||||
method: 'post',
|
||||
params: {
|
||||
refreshToken
|
||||
}
|
||||
}).then(data => {
|
||||
// 设置新的 accessToken
|
||||
setLoginToken(data.accessToken, data.refreshToken);
|
||||
// 重新发起请求
|
||||
let config = lastResponse.config;
|
||||
return servicef({
|
||||
url: config.originUrl,
|
||||
method: config.method,
|
||||
params: {
|
||||
...config.params,
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// response interceptor
|
||||
service.interceptors.response.use(
|
||||
//response => response,
|
||||
/**
|
||||
* 下面的注释为通过在response里,自定义code来标示请求状态
|
||||
* 当code返回如下情况则说明权限有问题,登出并返回到登录页
|
||||
* 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
|
||||
* 以下代码均为样例,请结合自生需求加以修改,若不需要,则可删除
|
||||
*/
|
||||
response => {
|
||||
// debugger;
|
||||
const res = response.data;
|
||||
const code = res.code;
|
||||
if (code !== 0) {
|
||||
|
||||
// // 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
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
|
||||
// TODO token 过期
|
||||
// TODO 需要拿 refresh token 置换
|
||||
if (code === 1002001011 // 访问令牌不存在
|
||||
|| code === 1002001013 // 访问令牌已失效
|
||||
|| code === 1002001017 // 刷新令牌不存在
|
||||
|| code === 1002001018 // 刷新令牌已过期
|
||||
|| code === 1002001019) { // 刷新令牌已失效
|
||||
Dialog.confirm({
|
||||
title: '系统提示',
|
||||
message: res.message,
|
||||
confirmButtonText: '重新登陆',
|
||||
beforeClose: function (action, done) {
|
||||
done();
|
||||
if (action === 'confirm') {
|
||||
// debugger;
|
||||
// this.$router.push({ path: '/login' })
|
||||
// TODO 跳转到登陆页.不是很优雅
|
||||
location.replace('/#login');
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (code === 1002001012) { // 访问令牌已过期
|
||||
return refreshToken(response);
|
||||
} else {
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: res.message,
|
||||
});
|
||||
}
|
||||
return Promise.reject('error')
|
||||
} else {
|
||||
// if (typeof response.data.Tag == 'string') {
|
||||
// return JSON.parse(response.data.Tag);
|
||||
// } else {
|
||||
// return response.data.Tag;
|
||||
// }
|
||||
// debugger;
|
||||
return res.data;
|
||||
}
|
||||
},
|
||||
error => {
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: error,
|
||||
});
|
||||
console.error(`请求失败`, error);
|
||||
throw new Error(error);
|
||||
// return Promise.reject(error)
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
export default servicef
|
|
@ -1,248 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import Router from 'vue-router';
|
||||
|
||||
import { getAccessToken } from '../utils/cache';
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '*',
|
||||
redirect: '/home'
|
||||
},
|
||||
{
|
||||
name: 'home',
|
||||
component: () => import('../page/index'),
|
||||
meta: {
|
||||
title: '首页'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('../page/account/phonelogin'),
|
||||
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: '个人信息',
|
||||
requireAuth: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user/address',
|
||||
component: () => import('../page/user/address/list'),
|
||||
meta: {
|
||||
title: '我的地址',
|
||||
requireAuth: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user/address/edit',
|
||||
component: () => import('../page/user/address/edit'),
|
||||
meta: {
|
||||
title: '修改地址',
|
||||
requireAuth: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user/favorite',
|
||||
component: () => import('../page/user/favorite/list'),
|
||||
meta: {
|
||||
title: '我的收藏',
|
||||
requireAuth: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user/coupon',
|
||||
component: () => import('../page/coupon/list'),
|
||||
meta: {
|
||||
title: '我的优惠券',
|
||||
requireAuth: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user/order',
|
||||
component: () => import('../page/user/order/list'),
|
||||
meta: {
|
||||
title: '我的订单'
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/user/order/:id',
|
||||
component: () => import('../page/user/order/list'),
|
||||
meta: {
|
||||
title: '我的订单',
|
||||
requireAuth: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user/order/info/:id',
|
||||
component: () => import('../page/user/order/info'),
|
||||
meta: {
|
||||
title: '我的订单',
|
||||
requireAuth: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user/order/logistics/:id',
|
||||
component: () => import('../page/user/order/logistics'),
|
||||
meta: {
|
||||
title: '订单追踪',
|
||||
requireAuth: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user/aftersale',
|
||||
component: () => import('../page/user/aftersale/list'),
|
||||
meta: {
|
||||
title: '售后'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user/aftersale/apply/:orderId',
|
||||
component: () => import('../page/user/aftersale/apply'),
|
||||
meta: {
|
||||
title: '申请售后'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user/aftersale/detail/:orderId',
|
||||
component: () => import('../page/user/aftersale/detail'),
|
||||
meta: {
|
||||
title: '服务单详情'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/user/aftersale/track/:id/:serviceNumber',
|
||||
component: () => import('../page/user/aftersale/track'),
|
||||
meta: {
|
||||
title: '进度详情'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '/product/search',
|
||||
path: '/product/search',
|
||||
component: () => import('../page/product/search'),
|
||||
meta: {
|
||||
title: '商品搜索'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/product/:id',
|
||||
component: () => import('../page/product/detail'),
|
||||
meta: {
|
||||
title: '商品详情'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/products/list',
|
||||
component: () => import('../page/product/list'),
|
||||
meta: {
|
||||
title: '商品列表'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'cart',
|
||||
component: () => import('../page/cart/index'),
|
||||
meta: {
|
||||
title: '购物车',
|
||||
requireAuth: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/order',
|
||||
component: () => import('../page/shipping/order'),
|
||||
meta: {
|
||||
title: '确认订单',
|
||||
requireAuth: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'category',
|
||||
component: () => import('../page/category/index'),
|
||||
meta: {
|
||||
title: '分类'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/coupon/fetch',
|
||||
component: () => import('../page/coupon/fetch'),
|
||||
meta: {
|
||||
title: '优惠劵领取'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/pay',
|
||||
component: () => import('../page/pay/index'),
|
||||
meta: {
|
||||
title: '收银台',
|
||||
requireAuth: true,
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// add route path
|
||||
routes.forEach(route => {
|
||||
route.path = route.path || '/' + (route.name || '');
|
||||
});
|
||||
|
||||
const router = new Router({ routes });
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
// 判断是否需要认证
|
||||
const requireAuth = to.meta && to.meta.requireAuth;
|
||||
if (requireAuth) {
|
||||
if (!getAccessToken()) { // 未登陆
|
||||
next({
|
||||
path: '/login',
|
||||
query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
// 处理标题
|
||||
const title = to.meta && to.meta.title;
|
||||
if (title) {
|
||||
document.title = title;
|
||||
}
|
||||
// 继续路由
|
||||
next();
|
||||
});
|
||||
|
||||
export {
|
||||
router
|
||||
};
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
|
||||
}
|
|
@ -1,34 +0,0 @@
|
|||
|
||||
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,
|
||||
}
|
|
@ -1,288 +0,0 @@
|
|||
{
|
||||
"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": ""
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
|
@ -1,62 +0,0 @@
|
|||
[
|
||||
{
|
||||
"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"
|
||||
}
|
||||
]
|
|
@ -1,142 +0,0 @@
|
|||
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: ''
|
||||
}
|
||||
};
|
|
@ -1,9 +0,0 @@
|
|||
|
||||
{
|
||||
"id": "2",
|
||||
"name": "李四",
|
||||
"tel": "13108826530",
|
||||
"areaCode": "712899",
|
||||
"addressDetail": "浙江省杭州市拱墅区莫干山路 50 号",
|
||||
"isDefault": false
|
||||
}
|
|
@ -1,14 +0,0 @@
|
|||
[
|
||||
{
|
||||
"id": "1",
|
||||
"name": "张三",
|
||||
"tel": "13000000000",
|
||||
"address": "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "李四",
|
||||
"tel": "1310000000",
|
||||
"address": "浙江省杭州市拱墅区莫干山路 50 号"
|
||||
}
|
||||
]
|
|
@ -1,38 +0,0 @@
|
|||
{
|
||||
"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、虚拟商品及部分特殊购物流程不可用,特殊流程如秒杀等;"
|
||||
}
|
||||
]
|
||||
}
|
|
@ -1,35 +0,0 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"UserName":"Yrin",
|
||||
"Avatar":"http://haitao.nos.netease.com/ZnB0PM5xDzXZ2FeVlmT170102401021_150_150.png",
|
||||
"UnPayTotal":1,
|
||||
"UnRecieveTotal":2,
|
||||
"AfterSaleTotal":3
|
||||
}
|
|
@ -1,29 +0,0 @@
|
|||
|
||||
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';
|
||||
import { Dialog } from 'vant';
|
||||
import { CouponCell, CouponList } from 'vant';
|
||||
|
||||
import { formatDate } from './utils/date.js';
|
||||
|
||||
Vue.use(components);
|
||||
|
||||
Vue.use(VueLazyload);
|
||||
Vue.use(Dialog);
|
||||
Vue.use(CouponCell).use(CouponList);
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
});
|
||||
|
||||
Vue.filter('formatDate', function(date, pattern) {
|
||||
if (date) {
|
||||
return formatDate(date, pattern);
|
||||
}
|
||||
});
|
|
@ -1,67 +0,0 @@
|
|||
<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>
|
|
@ -1,31 +0,0 @@
|
|||
<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>
|
|
@ -1,92 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<headerNav title="手机号登录"/>
|
||||
<div>
|
||||
<div style="padding-top: 70px;">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
placeholder="请输入手机号"
|
||||
@input="inputMobile"
|
||||
/>
|
||||
<van-field
|
||||
center
|
||||
placeholder="请输入短信验证码"
|
||||
@input="inputCode"
|
||||
>
|
||||
<van-button slot="button" size="small" type="primary" @click="sendCode">发送验证码</van-button>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
<div style="margin: 10px;">
|
||||
<van-button size="large" type="primary" style="height: 45px;line-height:45px;" @click="submit">登录</van-button>
|
||||
</div>
|
||||
<van-panel title="友情提示">
|
||||
<van-cell>1. 新注册的手机号验证后自动创建账户</van-cell>
|
||||
<van-cell>2. 默认验证码是 9999</van-cell>
|
||||
</van-panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { doPassportMobileSendRegisterCode, doPassportMobileRegister } from '../../api/user';
|
||||
import { Dialog } from 'vant';
|
||||
import { setLoginToken } from '../../utils/cache';
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
mobile: '',
|
||||
code: '',
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
inputMobile: function (value) {
|
||||
this.mobile = value;
|
||||
},
|
||||
inputCode: function (value) {
|
||||
this.code = value;
|
||||
},
|
||||
sendCode: function() {
|
||||
if (!this.mobile || this.mobile.length !== 11) {
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '手机号码不正确',
|
||||
});
|
||||
return;
|
||||
}
|
||||
let response = doPassportMobileSendRegisterCode(this.mobile);
|
||||
response.then(data => {
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '发送验证码成功',
|
||||
});
|
||||
});
|
||||
},
|
||||
submit: function () {
|
||||
let that = this;
|
||||
let response = doPassportMobileRegister(this.mobile, this.code);
|
||||
response.then(data => {
|
||||
setLoginToken(data.token.accessToken, data.token.refreshToken);
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '登陆成功',
|
||||
beforeClose: function (action, done) {
|
||||
done();
|
||||
// TODO 芋艿,简单的 callback 后续完善
|
||||
let redirect = that.$route.query.redirect || '/user/index';
|
||||
that.$router.push(redirect);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
|
@ -1,38 +0,0 @@
|
|||
<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>
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<page/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import page from './page/page.vue'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
page
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -1,300 +0,0 @@
|
|||
<template>
|
||||
<div class="card">
|
||||
<headerNav title="购物车"/>
|
||||
<van-cell value="编辑商品" class="head">
|
||||
<template slot="title">
|
||||
<van-checkbox v-model="checkedAll" @change="onSelectAll" >全选</van-checkbox>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<van-checkbox-group class="card-goods" v-model="checkedItemIds" @change="onItemSelectedChange">
|
||||
|
||||
<div class="promotion-group">
|
||||
<!-- <div v-for="(item,index) in goods" :key="index" class="card-goods__item">-->
|
||||
<!-- <van-checkbox :name="item.id" />-->
|
||||
|
||||
<!-- <product-card :product='item' :iscard='false' >-->
|
||||
|
||||
<!-- </product-card>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div v-for="(itemGroup, i) in itemGroups" class="card-goods__item">
|
||||
<van-cell >
|
||||
<template v-if="itemGroup.activity" slot="title">
|
||||
<van-tag type="danger">满减送</van-tag>
|
||||
<span class="van-cell-text" > {{ formatFullPrivilegeText(itemGroup.activity) }} </span>
|
||||
</template>
|
||||
</van-cell>
|
||||
<div class="card" v-for="(item, j) in itemGroup.items" :key="j">
|
||||
<van-checkbox :key="item.id" :name="item.id" v-model="item.selected" style="position: relative;top: 40px;" />
|
||||
<product-card :product='convertProduct(item)'/>
|
||||
<van-cell title="优惠信息">
|
||||
{{ formatTimeLimitedDiscountText(item.activity) }}
|
||||
</van-cell>
|
||||
</div>
|
||||
<div style="height:15px;"></div>
|
||||
</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>-->
|
||||
</van-checkbox-group>
|
||||
|
||||
<div style="height:50px;"></div>
|
||||
<van-submit-bar
|
||||
:tip="this.formatItemGroupDiscountPriceText()"
|
||||
:price="fee.presentTotal"
|
||||
:disabled="!checkedItemIds || !checkedItemIds.length"
|
||||
:button-text="submitBarText"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<template slot>
|
||||
<van-checkbox v-model="checkedAll" @click="onSelectAll">全选</van-checkbox>
|
||||
</template>
|
||||
</van-submit-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {listCart, updateCartSelected} from "../../api/order";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
itemGroups: [],
|
||||
fee: {
|
||||
originalTotal: undefined,
|
||||
discountTotal: undefined,
|
||||
postageTotal: undefined,
|
||||
presentTotal: undefined,
|
||||
},
|
||||
checkedItemIds: undefined, // 通过计算得出
|
||||
oldCheckedItemIds: undefined, // 因为 vue 是双向绑定,用于解决 change 的时候,拿不到老值
|
||||
checkedAll: undefined, // 通过计算得出
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
submitBarText() {
|
||||
const count = this.checkedItemIds ? this.checkedItemIds.length : 0;
|
||||
return '结算' + (count ? `(${count})` : '');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
formatFullPrivilegeText(activity) {
|
||||
if (!activity) {
|
||||
return '';
|
||||
}
|
||||
let text = '';
|
||||
let fullPrivilege = activity.fullPrivilege;
|
||||
for (let i in fullPrivilege.privileges) {
|
||||
let privilege = fullPrivilege.privileges[i];
|
||||
if (i > 0) {
|
||||
text += ';';
|
||||
}
|
||||
if (fullPrivilege.cycled) {
|
||||
text += '每';
|
||||
}
|
||||
if (privilege.meetType === 1) {
|
||||
text += '满 ' + privilege.meetValue / 100.0 + ' 元,';
|
||||
} else if (privilege.meetType === 2) {
|
||||
text += '满 ' + privilege.meetValue + ' 件,';
|
||||
}
|
||||
if (privilege.preferentialType === 1) {
|
||||
text += '减 ' + privilege.preferentialValue / 100.0 + ' 元';
|
||||
} else if (privilege.preferentialType === 2) {
|
||||
text += '打 ' + privilege.preferentialValue / 10.0 + ' 折';
|
||||
}
|
||||
}
|
||||
return text;
|
||||
},
|
||||
formatTimeLimitedDiscountText(activity) {
|
||||
if (!activity) {
|
||||
return '';
|
||||
}
|
||||
let text = '';
|
||||
let timeLimitedDiscount = activity.timeLimitedDiscount.items[0];
|
||||
if (timeLimitedDiscount.preferentialType === 1) {
|
||||
text += '减 ' + timeLimitedDiscount.preferentialValue / 100.0 + ' 元';
|
||||
} else if (timeLimitedDiscount.preferentialType === 2) {
|
||||
text += '打 ' + timeLimitedDiscount.preferentialValue / 10.0 + ' 折';
|
||||
}
|
||||
if (activity.timeLimitedDiscount.quota > 0) {
|
||||
text += '【限购 ' + activity.timeLimitedDiscount.quota + ' 件】';
|
||||
}
|
||||
return text;
|
||||
},
|
||||
|
||||
formatItemGroupDiscountPriceText() {
|
||||
// let price = 0;
|
||||
// for (let i in this.itemGroups) {
|
||||
// let itemGroup = this.itemGroups[i];
|
||||
// price += itemGroup.activityDiscountTotal || 0;
|
||||
// }
|
||||
return this.fee.discountTotal > 0 ? '立减 ' + this.fee.discountTotal / 100.0 + ' 元' : '';
|
||||
},
|
||||
|
||||
calCheckedItemIds() {
|
||||
// debugger;
|
||||
let itemIds = [];
|
||||
let checkedAll = true;
|
||||
for (let i in this.itemGroups) {
|
||||
let items = this.itemGroups[i].items;
|
||||
for (let j in items) {
|
||||
if (items[j].selected) {
|
||||
itemIds.push(items[j].id);
|
||||
} else {
|
||||
checkedAll = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 赋值给 checkedItemIds、oldCheckedItemIds、checkedAll
|
||||
this.checkedItemIds = itemIds;
|
||||
this.oldCheckedItemIds = itemIds;
|
||||
this.checkedAll = checkedAll;
|
||||
},
|
||||
getItemIds() {
|
||||
let itemIds = [];
|
||||
for (let i in this.itemGroups) {
|
||||
let items = this.itemGroups[i].items;
|
||||
for (let j in items) {
|
||||
itemIds.push(items[j].id);
|
||||
}
|
||||
}
|
||||
return itemIds;
|
||||
},
|
||||
handleData(data) {
|
||||
this.itemGroups = data.itemGroups;
|
||||
this.fee = data.fee;
|
||||
// 计算 checkedItemIds + checkedAll
|
||||
this.calCheckedItemIds();
|
||||
},
|
||||
onItemSelectedChange(newVal) { // TODO 芋艿,后续研究下。这样的处理方式,很奇怪。
|
||||
if (!this.checkedItemIds) {
|
||||
return;
|
||||
}
|
||||
let selected;
|
||||
let diffItemIds;
|
||||
if (newVal.length > this.oldCheckedItemIds.length) { // 新增
|
||||
selected = true;
|
||||
let that = this;
|
||||
diffItemIds = [...newVal].filter(function(val) {
|
||||
return that.oldCheckedItemIds.indexOf(val) < 0; // 找不到
|
||||
});
|
||||
} else if (newVal.length < this.oldCheckedItemIds.length) { // 减少
|
||||
selected = false;
|
||||
diffItemIds = [...this.oldCheckedItemIds].filter(function(val) {
|
||||
return newVal.indexOf(val) < 0; // 找不到
|
||||
});
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
updateCartSelected(diffItemIds, selected).then(data => {
|
||||
this.handleData(data);
|
||||
})
|
||||
// debugger;
|
||||
},
|
||||
onSelectAll(newVal) {
|
||||
if (this.checkedAll === undefined) {
|
||||
return;
|
||||
}
|
||||
// debugger;
|
||||
// updateCartSelected(this.getItemIds(), newVal).then(data => {
|
||||
// this.handleData(data);
|
||||
// })
|
||||
if (newVal) {
|
||||
this.onItemSelectedChange(this.getItemIds());
|
||||
} else {
|
||||
// alert('有 bug ,后续修复');
|
||||
// this.onItemSelectedChange(this.getItemIds());
|
||||
// TODO 芋艿,暂时有 bug 。后续修复
|
||||
}
|
||||
},
|
||||
onSubmit() {
|
||||
this.$router.push('/order?from=cart')
|
||||
},
|
||||
convertProduct(item) {
|
||||
// debugger;
|
||||
return {
|
||||
...item.spu,
|
||||
quantity: item.buyQuantity,
|
||||
price: item.buyPrice || item.price,
|
||||
sku: {
|
||||
...item,
|
||||
spu: undefined,
|
||||
},
|
||||
selected: item.selected,
|
||||
};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 获得购物车列表
|
||||
listCart().then(data => {
|
||||
this.handleData(data);
|
||||
});
|
||||
}
|
||||
};
|
||||
</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>
|
|
@ -1,211 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<van-search
|
||||
v-model="keyword"
|
||||
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 v-for="category in rootCategories" :title="category.name" @click="onClick" />
|
||||
</van-badge-group>
|
||||
<div class="content" :style="'width:'+fullWidth+'px;height:'+(fullHeight-7)+'px'" >
|
||||
<!-- TODO 营销活动,暂时注释掉 -->
|
||||
<!--<img src="https://img11.360buyimg.com/mcoss/jfs/t1/1072/23/3672/95463/5b9a0813E175891fa/e38fc2f7c2ddfec2.jpg" />-->
|
||||
<!-- TODO 常用分类,暂时注释掉 -->
|
||||
<!--<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 v-for="category in childCategories">
|
||||
<router-link :to="'/products/list?title=' + activeCategory.name + '&cidFirst=' + activeCategory.id + '&cidSecond=' + category.id">
|
||||
<img :src="category.picUrl" />
|
||||
<span>{{ category.name }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<div style="clear:both">
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<navigate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Search } from "vant";
|
||||
// import { GetAddressById } from '../../api/user';
|
||||
import { getProductCategoryList } from '../../api/product';
|
||||
|
||||
export default {
|
||||
name: "userindex",
|
||||
components: {
|
||||
[Search.name]: Search
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
rootCategories: [],
|
||||
childCategories: [],
|
||||
activeKey: 0,
|
||||
activeCategory: {}, // 选中的分类
|
||||
fullHeight: document.documentElement.clientHeight - 93,
|
||||
fullWidth: document.documentElement.clientWidth - 99
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSearch() {
|
||||
// debugger;
|
||||
// GetAddressById(1);
|
||||
// console.log(this.value);
|
||||
this.$router.push(
|
||||
{name: '/product/search', params: {keyword: this.keyword}}
|
||||
)
|
||||
},
|
||||
onClick(key) {
|
||||
// debugger;
|
||||
// GetAddressById(1);
|
||||
// 设置 activeKey
|
||||
this.activeKey = key;
|
||||
// 读取子节点的分类
|
||||
if (this.rootCategories.length > key) {
|
||||
this.activeCategory = this.rootCategories[key];
|
||||
let response = getProductCategoryList(this.activeCategory.id);
|
||||
response.then(data => {
|
||||
this.childCategories = data;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let response = getProductCategoryList(0);
|
||||
response.then(data => {
|
||||
// console.log(data);
|
||||
// debugger;
|
||||
// 设置根节点的分类
|
||||
this.rootCategories = data;
|
||||
// 获得首个根节点的分类
|
||||
if (data && data.length > 0) {
|
||||
this.activeCategory = data[0];
|
||||
let response = getProductCategoryList(data[0].id);
|
||||
response.then(data => {
|
||||
this.childCategories = data;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</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>
|
|
@ -1,54 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<van-cell-group>
|
||||
<van-cell title="优惠劵编号" :value="couponTemplate.id" />
|
||||
<van-cell title="优惠劵名" :value="couponTemplate.title"/>
|
||||
</van-cell-group>
|
||||
<van-button slot="button" size="small" type="primary" @click="onFetchClick">领取优惠劵</van-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCouponTemplate, doAddCouponCard } from '../../api/promotion';
|
||||
import { Dialog } from 'vant';
|
||||
import { setLoginToken } from '../../utils/cache';
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
couponTemplate: {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let id = this.$route.query.id;
|
||||
let response = getCouponTemplate(id);
|
||||
response.then(data => {
|
||||
this.couponTemplate = data;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
onFetchClick: function () {
|
||||
let that = this;
|
||||
let id = this.$route.query.id;
|
||||
let response = doAddCouponCard(id);
|
||||
response.then(data => {
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '领取成功',
|
||||
beforeClose: function (action, done) {
|
||||
// 关闭弹窗
|
||||
done();
|
||||
// 跳转到我的优惠劵
|
||||
that.$router.push('/user/coupon');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
|
@ -1,421 +0,0 @@
|
|||
<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="unusedData.loading"
|
||||
:finished="unusedData.finished"
|
||||
@load="onLoad"
|
||||
>
|
||||
<li v-for="(item,index) in unusedData.list" :key="index" :class="'couponitem '+(item.show?'show':'') ">
|
||||
<div class="couponTop">
|
||||
<div class="cpnamount">
|
||||
<div class="amountWrap">
|
||||
<div class="amount" v-if="item.preferentialType === 1">
|
||||
<span class="amountSign" >¥</span>
|
||||
<span class="amountNum">{{item.priceOff / 100}}</span>
|
||||
</div>
|
||||
<div class="amount" v-else="item.preferentialType === 2">
|
||||
<span class="amountNum">{{item.percentOff / 10.0}}</span>
|
||||
<span class="amountSign">折</span>
|
||||
</div>
|
||||
<div class="condition">
|
||||
<span>满 {{item.priceAvailable / 100.0}} 元可用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="couponInfoWrap">
|
||||
<div class="cpninfo">
|
||||
<div class="detail">
|
||||
<span class="name">{{item.title}}</span></div>
|
||||
</div>
|
||||
<div class="validity">
|
||||
<span>{{item.validStartTime | formatDate('yyyy-MM-dd')}}
|
||||
~ {{item.validEndTime | formatDate('yyyy-MM-dd')}}</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>-->
|
||||
<!-- todo 芋艿,后续做优化。指定哪些商品 / 分类可用 -->
|
||||
<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="usedData.loading"
|
||||
:finished="usedData.finished"
|
||||
@load="onLoadUse"
|
||||
>
|
||||
<li v-for="(item,index) in usedData.list" :key="index" class="couponitem">
|
||||
<div class="couponTop">
|
||||
<div class="cpnamount">
|
||||
<div class="amountWrap">
|
||||
<div class="amount" v-if="item.preferentialType === 1">
|
||||
<span class="amountSign" >¥</span>
|
||||
<span class="amountNum">{{item.priceOff / 100}}</span>
|
||||
</div>
|
||||
<div class="amount" v-else="item.preferentialType === 2">
|
||||
<span class="amountNum">{{item.percentOff / 10.0}}</span>
|
||||
<span class="amountSign">折</span>
|
||||
</div>
|
||||
<div class="condition">
|
||||
<span>满 {{item.priceAvailable}} 元可用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="couponInfoWrap">
|
||||
<div class="cpninfo">
|
||||
<div class="detail">
|
||||
<span class="name">{{item.title}}</span></div>
|
||||
</div>
|
||||
<div class="validity">
|
||||
<span>{{item.validStartTime | formatDate('yyyy-MM-dd')}}
|
||||
~ {{item.validEndTime | formatDate('yyyy-MM-dd')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</van-list>
|
||||
</ul>
|
||||
</van-tab>
|
||||
<van-tab title="已过期">
|
||||
<ul class="gray" >
|
||||
|
||||
<van-list
|
||||
v-model="expireData.loading"
|
||||
:finished="expireData.finished"
|
||||
@load="onLoadEnd"
|
||||
>
|
||||
<li v-for="(item,index) in expireData.list" :key="index" class="couponitem">
|
||||
<div class="couponTop">
|
||||
<div class="cpnamount">
|
||||
<div class="amountWrap">
|
||||
<div class="amount" v-if="item.preferentialType === 1">
|
||||
<span class="amountSign" >¥</span>
|
||||
<span class="amountNum">{{item.priceOff / 100}}</span>
|
||||
</div>
|
||||
<div class="amount" v-else="item.preferentialType === 2">
|
||||
<span class="amountNum">{{item.percentOff / 10.0}}</span>
|
||||
<span class="amountSign">折</span>
|
||||
</div>
|
||||
<div class="condition">
|
||||
<span>满 {{item.priceAvailable}} 元可用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="couponInfoWrap">
|
||||
<div class="cpninfo">
|
||||
<div class="detail">
|
||||
<span class="name">{{item.title}}</span></div>
|
||||
</div>
|
||||
<div class="validity">
|
||||
<span>{{item.validStartTime | formatDate('yyyy-MM-dd')}}
|
||||
~ {{item.validEndTime | formatDate('yyyy-MM-dd')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</van-list>
|
||||
</ul>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ExchangeCoupon } from "../../api/user.js";
|
||||
import { getCouponPage } from "../../api/promotion.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,
|
||||
|
||||
unusedData: {
|
||||
page: 0,
|
||||
pageSize: 10,
|
||||
list: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
},
|
||||
|
||||
usedData: {
|
||||
page: 0,
|
||||
pageSize: 10,
|
||||
list: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
},
|
||||
|
||||
expireData: {
|
||||
page: 0,
|
||||
pageSize: 10,
|
||||
list: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
onLoad() {
|
||||
// 进入下一页
|
||||
let page = this.unusedData.page + 1;
|
||||
getCouponPage(1, page, this.unusedData.pageSize).then(data => {
|
||||
// debugger;
|
||||
// 设置下页面
|
||||
this.unusedData.page = page;
|
||||
// 数据保存到 list 中
|
||||
this.unusedData.list.push(...data.list);
|
||||
// 判断页数
|
||||
if (this.unusedData.list.length >= data.total) {
|
||||
this.unusedData.finished = true;
|
||||
}
|
||||
// 标记不在加载中
|
||||
this.unusedData.loading = false;
|
||||
});
|
||||
|
||||
// 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() {
|
||||
// 进入下一页
|
||||
let page = this.usedData.page + 1;
|
||||
getCouponPage(2, page, this.usedData.pageSize).then(data => {
|
||||
// debugger;
|
||||
// 设置下页面
|
||||
this.usedData.page = page;
|
||||
// 数据保存到 list 中
|
||||
this.usedData.list.push(...data.list);
|
||||
// 判断页数
|
||||
if (this.usedData.list.length >= data.total) {
|
||||
this.usedData.finished = true;
|
||||
}
|
||||
// 标记不在加载中
|
||||
this.usedData.loading = false;
|
||||
});
|
||||
},
|
||||
onLoadEnd() {
|
||||
// 进入下一页
|
||||
let page = this.expireData.page + 1;
|
||||
getCouponPage(3, page, this.expireData.pageSize).then(data => {
|
||||
// debugger;
|
||||
// 设置下页面
|
||||
this.expireData.page = page;
|
||||
// 数据保存到 list 中
|
||||
this.expireData.list.push(...data.list);
|
||||
// 判断页数
|
||||
if (this.expireData.list.length >= data.total) {
|
||||
this.expireData.finished = true;
|
||||
}
|
||||
// 标记不在加载中
|
||||
this.expireData.loading = false;
|
||||
});
|
||||
},
|
||||
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>
|
|
@ -1,6 +0,0 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
/**
|
||||
* 定义空的vue实例,作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast)
|
||||
*/
|
||||
export default new Vue({});
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<page/>
|
||||
<navigate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navigate from '../components/footer/navigate.vue'
|
||||
import page from './page/index.vue'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
page,
|
||||
navigate
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
|
@ -1,141 +0,0 @@
|
|||
<template>
|
||||
<div :style="'background-color:'+((page.BackgroundColor==undefined||page.BackgroundColor=='')?'#fff':page.BackgroundColor)">
|
||||
<!-- <div :style="'height:'+topheight+'px'" ></div>-->
|
||||
|
||||
<!-- TODO 搜索框 -->
|
||||
<!-- <search v-if="item.Code=='Search'" :data="item.ParameterDictionary" v-on:settopheight="settopheight($event)" ></search>-->
|
||||
|
||||
<van-search
|
||||
v-model="keyword"
|
||||
placeholder="请输入搜索关键词"
|
||||
show-action
|
||||
@search="onSearch">
|
||||
<div slot="action" @click="onSearch">搜索</div>
|
||||
</van-search>
|
||||
|
||||
<van-swipe :autoplay="3000" indicator-color="white" :height="160">
|
||||
<van-swipe-item v-for="(banner, index) in banners" :key="index" >
|
||||
<a :href="banner.url">
|
||||
<img :src="banner.picUrl" height="100%" width="100%" >
|
||||
</a>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
<van-row style="text-align: center">
|
||||
<van-col span="8">
|
||||
<router-link to="/category">
|
||||
<van-icon name="http://static.iocoder.cn/icons8-medium-priority-45.png"/>
|
||||
<div style="font-size:12px;margin-top: -10px;">分类</div>
|
||||
</router-link>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<router-link to="/category">
|
||||
<van-icon name="http://static.iocoder.cn/icons8-sun-45.png" />
|
||||
<div style="font-size:12px;margin-top: -10px;">热卖</div>
|
||||
</router-link>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<router-link to="/category">
|
||||
<van-icon name="http://static.iocoder.cn/icons8-new-45.png" />
|
||||
<div style="font-size:12px;margin-top: -10px;">新品</div>
|
||||
</router-link>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-panel title="新品推荐" >
|
||||
<!-- <product :data="productRecommends['1']" ></product>-->
|
||||
<div style="height: 70px;" v-for="(product,i) in productRecommends['1']" :key="i">
|
||||
<product-card :product='product' @click="showProduct(product)" />
|
||||
</div>
|
||||
</van-panel>
|
||||
|
||||
<van-panel title="热卖推荐">
|
||||
<div style="height: 70px;" v-for="(product,i) in productRecommends['2']" :key="i">
|
||||
<product-card :product='product' @click="showProduct(product)" />
|
||||
</div>
|
||||
</van-panel>
|
||||
|
||||
</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 {getBannerList, getProductRecommendList} from '../../api/promotion.js';
|
||||
import {Search} from "vant";
|
||||
|
||||
export default {
|
||||
name:"page",
|
||||
components:{
|
||||
whitespace,
|
||||
pageLine,
|
||||
pageText,
|
||||
notice,
|
||||
// search,
|
||||
pageTitle,
|
||||
cube,
|
||||
[imageAd.name]:imageAd,
|
||||
imageText,
|
||||
product,
|
||||
[Search.name]: Search
|
||||
},
|
||||
data:function(){
|
||||
return{
|
||||
topheight:0,
|
||||
page:{},
|
||||
|
||||
keyword: '', // 搜索关键词
|
||||
|
||||
banners: [], // Banner 列表
|
||||
productRecommends: [], // 推荐商品列表
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
// GetPage().then(response=>{
|
||||
// this.page=response;
|
||||
// });
|
||||
},
|
||||
mounted: function() {
|
||||
// 加载 Banner
|
||||
{
|
||||
let response = getBannerList();
|
||||
response.then(data => {
|
||||
this.banners = data;
|
||||
});
|
||||
}
|
||||
// 加载 getProductRecommendList
|
||||
{
|
||||
let response = getProductRecommendList();
|
||||
response.then(data => {
|
||||
this.productRecommends = data;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// onBannerClick: function(event, index) {
|
||||
// debugger;
|
||||
// console.log(event);
|
||||
// },
|
||||
// settopheight:function(value){
|
||||
// this.topheight=value;
|
||||
// },
|
||||
showProduct(product){
|
||||
this.$router.push('/product/'+product.id);
|
||||
},
|
||||
onSearch: function () {
|
||||
// debugger;
|
||||
this.$router.push(
|
||||
{name: '/product/search', params: {keyword: this.keyword}}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<headerNav title="收银台"/>
|
||||
<van-cell-group>
|
||||
<van-cell title="订单商品名" :value="transaction.orderSubject" />
|
||||
<van-cell title="价格" :value="transaction.price / 100.0" />
|
||||
</van-cell-group>
|
||||
<van-button slot="button" size="small" type="primary" @click="submit(9999)">模拟支付</van-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTransaction, submitTransaction } from '../../api/pay';
|
||||
import pingpp from 'pingpp-js';
|
||||
import { Dialog } from 'vant';
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
appId: this.$route.query.appId,
|
||||
orderId: this.$route.query.orderId,
|
||||
returnUrl: this.$route.query.returnUrl,
|
||||
transaction: {},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
let response = getTransaction(this.appId, this.orderId);
|
||||
response.then(data => {
|
||||
this.transaction = data;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
submit(payChannel) {
|
||||
let that = this;
|
||||
submitTransaction(this.appId, this.orderId, payChannel).then(data => {
|
||||
pingpp.createPayment(data.invokeResponse, function(result, err) {
|
||||
if (result === 'success') {
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '支付成功',
|
||||
beforeClose: function (action, done) {
|
||||
// 关闭弹窗
|
||||
done();
|
||||
// 跳转到我的优惠劵
|
||||
that.$router.push(decodeURI(that.returnUrl));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// console.log(err.msg);
|
||||
// console.log(err.extra);
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '支付失败:' + err.msg,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
|
@ -1,564 +0,0 @@
|
|||
<template>
|
||||
<div class="goods">
|
||||
<headerNav title="商品详情"/>
|
||||
<van-swipe class="goods-swipe" :autoplay="3000">
|
||||
<van-swipe-item v-for="thumb in spu.picUrls" :key="thumb">
|
||||
<img :src="thumb">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
<!-- TODO 这里需要优化下,芋艿 -->
|
||||
<van-cell-group>
|
||||
<van-cell>
|
||||
<div v-if="calSkuPriceResult.originalPrice && calSkuPriceResult.originalPrice !== calSkuPriceResult.buyPrice">
|
||||
<span class="goods-price">{{ formatPrice(calSkuPriceResult.buyPrice) }}</span>
|
||||
<span class="goods-market-price">{{ formatPrice(calSkuPriceResult.originalPrice) }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span class="goods-price">{{ formatPrice(initialSku.price) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="goods-title">{{ spu.name }}</div>
|
||||
<div class="goods-subtit">{{spu.sellPoint}}</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>{{ formatSkuText(initialSku) }}</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
</van-cell-group>
|
||||
|
||||
<!-- <van-cell is-link @click="sorry">-->
|
||||
<!-- <template slot="title">-->
|
||||
<!-- <van-tag type="danger">多买优惠</van-tag>-->
|
||||
<!-- <span> 满2件,总价打9折</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </van-cell>-->
|
||||
<!-- TODO 芋艿,后续【限时折扣】需要改下样式 -->
|
||||
<van-cell v-if="calSkuPriceResult.timeLimitedDiscount" is-link @click="sorry">
|
||||
<template slot="title">
|
||||
<van-tag type="danger">限时折扣</van-tag>
|
||||
<span> {{ formatTimeLimitedDiscountText(calSkuPriceResult.timeLimitedDiscount) }} </span>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell v-if="calSkuPriceResult.fullPrivilege" is-link @click="sorry">
|
||||
<template slot="title">
|
||||
<van-tag type="danger">满减送</van-tag>
|
||||
<span> {{ formatFullPrivilegeText(calSkuPriceResult.fullPrivilege) }} </span>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<div class="goods-info">
|
||||
<p class="goods-info-title">图文详情</p>
|
||||
<div v-html="spu.description"></div>
|
||||
</div>
|
||||
<van-goods-action>
|
||||
|
||||
<van-goods-action-mini-btn icon="like-o" :class="{active:hasCollectionType === 1 }" @click="onFavoriteClicked">
|
||||
收藏
|
||||
</van-goods-action-mini-btn>
|
||||
<van-goods-action-mini-btn icon="cart" :info="cartCount > 0 ? cartCount : undefined" @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="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="vanSku"
|
||||
:initial-sku="initialSku"
|
||||
:goods="vanSpu"
|
||||
:goods-id="spu.id"
|
||||
:hide-stock="hideStock"
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
@stepper-change="stepperChange"
|
||||
@sku-selected="skuSelected"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
<!--:quota="skuData.quota"-->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import skuData from '../../data/sku';
|
||||
import {getProductSpuInfo,collectionSpu} from '../../api/product';
|
||||
import {addCart, countCart, getCartCalcSkuPrice} from '../../api/order';
|
||||
import {hasUserSpuFavorite} from '../../api/user';
|
||||
import {Dialog} from 'vant';
|
||||
import {checkLogin} from "../../utils/cache";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
// this.skuData = skuData;
|
||||
return {
|
||||
spu: {}, // 商品信息
|
||||
vanSku: {
|
||||
tree: [], // 规格数组
|
||||
list: [], // sku 数组
|
||||
},
|
||||
// TODO 后面,要加 sku 的 title 和 picture
|
||||
vanSpu: {
|
||||
title: '',
|
||||
picture: '',
|
||||
},
|
||||
initialSku: { // 选中的 sku
|
||||
// 具体规格
|
||||
// price 价格
|
||||
// quantity 选中的数量
|
||||
},
|
||||
attrValueMap: new Map(), // 规格值的映射
|
||||
|
||||
showBase: false, // 是否显示 sku 弹层
|
||||
closeOnClickOverlay: true, // 是否在点击蒙层后关闭
|
||||
hideStock: true, // 是否显示商品剩余库存
|
||||
|
||||
cartCount: 0,
|
||||
|
||||
calSkuPriceResult: {
|
||||
|
||||
},
|
||||
hasCollectionType:0
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatPrice(data) {
|
||||
return '¥' + (data / 100).toFixed(2);
|
||||
},
|
||||
formatSkuText(data) { // 渲染已选择的 sku 的文本
|
||||
let text = '';
|
||||
for (let prop in data) {
|
||||
if (prop.indexOf('attr_') === 0) {
|
||||
text = text + this.attrValueMap.get(data[prop]) + ' ';
|
||||
}
|
||||
}
|
||||
text = text + 'x ' + data.quantity + ' 件';
|
||||
return text;
|
||||
},
|
||||
formatTimeLimitedDiscountText(activity) {
|
||||
let text = '';
|
||||
let timeLimitedDiscount = activity.timeLimitedDiscount.items[0];
|
||||
if (timeLimitedDiscount.preferentialType === 1) {
|
||||
text += '减 ' + timeLimitedDiscount.preferentialValue / 100.0 + ' 元';
|
||||
} else if (timeLimitedDiscount.preferentialType === 2) {
|
||||
text += '打 ' + timeLimitedDiscount.preferentialValue / 10.0 + ' 折';
|
||||
}
|
||||
if (activity.timeLimitedDiscount.quota > 0) {
|
||||
text += '【限购 ' + activity.timeLimitedDiscount.quota + ' 件】';
|
||||
}
|
||||
return text;
|
||||
},
|
||||
formatFullPrivilegeText(activity) {
|
||||
let text = '';
|
||||
let fullPrivilege = activity.fullPrivilege;
|
||||
for (let i in fullPrivilege.privileges) {
|
||||
let privilege = fullPrivilege.privileges[i];
|
||||
if (i > 0) {
|
||||
text += ';';
|
||||
}
|
||||
if (fullPrivilege.cycled) {
|
||||
text += '每';
|
||||
}
|
||||
if (privilege.meetType === 1) {
|
||||
text += '满 ' + privilege.meetValue / 100.0 + ' 元,';
|
||||
} else if (privilege.meetType === 2) {
|
||||
text += '满 ' + privilege.meetValue + ' 件,';
|
||||
}
|
||||
if (privilege.preferentialType === 1) {
|
||||
text += '减 ' + privilege.preferentialValue / 100.0 + ' 元';
|
||||
} else if (privilege.preferentialType === 2) {
|
||||
text += '打 ' + privilege.preferentialValue / 10.0 + ' 折';
|
||||
}
|
||||
}
|
||||
return text;
|
||||
},
|
||||
|
||||
stepperChange(value) { // 选择 sku 数量时
|
||||
this.initialSku.quantity = value;
|
||||
},
|
||||
skuSelected({skuValue, selectedSku, selectedSkuComb}) { // 选择 sku
|
||||
// TODO 芋艿,需要改下,禁用用户取消选中。
|
||||
// console.log(skuValue);
|
||||
// console.log(selectedSku);
|
||||
// console.log(selectedSkuComb);
|
||||
this.initialSku = {
|
||||
...selectedSkuComb,
|
||||
quantity: 1,
|
||||
};
|
||||
// 执行 sku 价格计算
|
||||
this.doCalcSkuPrice(this.initialSku.id)
|
||||
},
|
||||
doCalcSkuPrice(skuId) {
|
||||
getCartCalcSkuPrice(skuId).then(data => {
|
||||
this.calSkuPriceResult = data;
|
||||
// 修改 vanSku.list 里匹配的 sku 的价格(目的,将优惠价赋值到其上)
|
||||
for (let i in this.vanSku.list) {
|
||||
let sku = this.vanSku.list[i];
|
||||
if (sku.id === skuId) {
|
||||
sku.price = data.buyPrice;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
initHasUserSpuFavorite(spuId){
|
||||
if (!checkLogin()) {
|
||||
this.hasCollectionType = 0;
|
||||
return;
|
||||
}
|
||||
//初始化验证商品收藏
|
||||
hasUserSpuFavorite(spuId).then(data => {
|
||||
let hasCollection = data;
|
||||
// alert("是否收藏==" + hasCollection);
|
||||
if (hasCollection) {
|
||||
this.hasCollectionType = 1;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onClickCart() {
|
||||
this.$router.push('/cart');
|
||||
},
|
||||
sorry() {
|
||||
Toast('暂无后续逻辑~');
|
||||
},
|
||||
showPromotion() {
|
||||
this.show = true;
|
||||
},
|
||||
showSku() { // 展示 sku 选择
|
||||
this.showBase = true;
|
||||
},
|
||||
onClickShowTag() {
|
||||
this.showTag = true;
|
||||
},
|
||||
onFavoriteClicked(){
|
||||
if (!checkLogin()) {
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '未登陆用户,暂时不支持使用购物车',
|
||||
});
|
||||
return;
|
||||
}
|
||||
let id = this.$route.params.id; // 商品编号
|
||||
let hasCollectionType = 1; // 收藏类型 默认收藏
|
||||
hasUserSpuFavorite(id).then(data => {
|
||||
let hasCollection = data;
|
||||
// alert("是否收藏==" + hasCollection);
|
||||
if (hasCollection){
|
||||
hasCollectionType = 2;
|
||||
}
|
||||
|
||||
// alert("hasCollectionType==" + hasCollectionType);
|
||||
collectionSpu(id,hasCollectionType).then(data =>{
|
||||
let v = data;
|
||||
this.hasCollectionType = hasCollectionType;
|
||||
// if (hasCollectionType == 1 && v){
|
||||
// // alert("商品已收藏");
|
||||
// this.hasCollectionType = hasCollectionType;
|
||||
// }else if (hasCollectionType == 2 && v){
|
||||
// // alert("商品已取消");
|
||||
// this.hasCollectionType = hasCollectionType;
|
||||
// }
|
||||
})
|
||||
});
|
||||
|
||||
},
|
||||
onBuyClicked(data) {
|
||||
const { selectedNum } = data;
|
||||
this.$router.push({
|
||||
path:'/order',
|
||||
query:{
|
||||
goodsId: data.id,
|
||||
skuId: data.selectedSkuComb.id,
|
||||
quantity: selectedNum,
|
||||
}
|
||||
});
|
||||
},
|
||||
onAddCartClicked(data) {
|
||||
if (!checkLogin()) {
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '未登陆用户,暂时不支持使用购物车',
|
||||
});
|
||||
return;
|
||||
}
|
||||
const { selectedNum } = data;
|
||||
// debugger;
|
||||
addCart(data.selectedSkuComb.id,selectedNum).then(data => {
|
||||
// 修改购物车数量
|
||||
this.cartCount = data;
|
||||
// 提示
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '添加购物车成功',
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 获得商品数据
|
||||
let id = this.$route.params.id; // 商品编号
|
||||
getProductSpuInfo(id).then(data => {
|
||||
// 设置 spu
|
||||
this.spu = data;
|
||||
// 初始化 vanSku
|
||||
let vanSku = {
|
||||
tree: [],
|
||||
list: [],
|
||||
};
|
||||
for (let i = 0; i < data.skus.length; i++) {
|
||||
let sku = data.skus[i];
|
||||
// list 商品 sku 信息
|
||||
let skuVO = {
|
||||
id: sku.id, // skuId,下单时后端需要
|
||||
price: sku.price, // 价格(单位分)
|
||||
stock_num: sku.quantity // 当前 sku 组合对应的库存
|
||||
};
|
||||
for (let j = 0; j < sku.attrs.length; j++) {
|
||||
let attr = sku.attrs[j];
|
||||
skuVO['attr_' + attr.attrId] = attr.attrValueId;
|
||||
}
|
||||
vanSku.list.push(skuVO);
|
||||
// tree 规格
|
||||
for (let j = 0; j < sku.attrs.length; j++) {
|
||||
let attr = sku.attrs[j];
|
||||
let attrVO;
|
||||
for (let k = 0; k < vanSku.tree.length; k++) {
|
||||
if (attr.attrName === vanSku.tree[k].k) {
|
||||
attrVO = vanSku.tree[k];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!attrVO) { // 未找到,则初始化该规格
|
||||
attrVO = {
|
||||
k: attr.attrName, // skuKeyName:规格类目名称
|
||||
v: [],
|
||||
k_s: 'attr_' + attr.attrId,
|
||||
};
|
||||
vanSku.tree.push(attrVO);
|
||||
}
|
||||
let attrValueFound = false; // 如果规格值已经存在,则不再添加
|
||||
for (let k = 0; k < attrVO.v.length; k++) {
|
||||
if (attr.attrValueId === attrVO.v[k].id) {
|
||||
attrValueFound = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!attrValueFound) {
|
||||
attrVO.v.push({
|
||||
id: attr.attrValueId, // skuValueId:规格值 id
|
||||
name: attr.attrValueName, // skuValueName:规格值名称
|
||||
});
|
||||
}
|
||||
// 初始化 attrValueMap
|
||||
this.attrValueMap.set(attr.attrValueId, attr.attrValueName);
|
||||
}
|
||||
|
||||
}
|
||||
// debugger;
|
||||
this.vanSku = vanSku;
|
||||
// 初始化
|
||||
// TODO 芋艿,需要处理下第一个有效的 sku
|
||||
this.initialSku = vanSku.list[0];
|
||||
this.initialSku.quantity = 1;
|
||||
// 执行 sku 价格计算
|
||||
this.doCalcSkuPrice(this.initialSku.id);
|
||||
|
||||
this.initHasUserSpuFavorite(id);
|
||||
|
||||
});
|
||||
// 获得购物车数量
|
||||
if (checkLogin()) {
|
||||
countCart().then(data => {
|
||||
this.cartCount = data;
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.goods {
|
||||
.active {
|
||||
color: #f44;
|
||||
}
|
||||
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>
|
|
@ -1,127 +0,0 @@
|
|||
<template>
|
||||
<div class="product-list">
|
||||
<van-nav-bar :title="rootCategory.name" left-text="返回" left-arrow
|
||||
@click-left="onBack">
|
||||
</van-nav-bar>
|
||||
|
||||
<van-tabs v-model="active" @click="onCategoryClick">
|
||||
<van-tab v-for="category in childCategories" :title="category.name" />
|
||||
</van-tabs>
|
||||
|
||||
<!-- <div v-for="(product,i) in products" :key="i">-->
|
||||
<!-- <product-card :product='product' @click="showProduct(product)" />-->
|
||||
<!-- </div>-->
|
||||
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<div v-for="(product,i) in products" :key="i">
|
||||
<product-card :product='product' @click="showProduct(product)" />
|
||||
</div>
|
||||
</van-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getProductCategoryList, getProductSpuPage } from '../../api/product';
|
||||
import {getProductPage} from "../../api/search";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rootCategory: {
|
||||
id: parseInt(this.$route.query.cidFirst),
|
||||
name: this.$route.query.title,
|
||||
},
|
||||
childCategory: {
|
||||
id: parseInt(this.$route.query.cidSecond),
|
||||
},
|
||||
childCategories: [],
|
||||
|
||||
active: -1,
|
||||
products: [],
|
||||
|
||||
page: 0,
|
||||
pageSize: 10,
|
||||
loading: false,
|
||||
finished: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onBack() {
|
||||
history.back();
|
||||
},
|
||||
onCategoryClick(key) {
|
||||
// 设置激活的 key
|
||||
this.active = key;
|
||||
// 加载商品
|
||||
this.products = [];
|
||||
// 加载商品
|
||||
|
||||
this.loadProductList(this.childCategories[key].id, 1);
|
||||
},
|
||||
loadProductList(categoryId, page) {
|
||||
this.childCategory.id = categoryId;
|
||||
getProductPage({
|
||||
pageNo: page,
|
||||
pageSize: this.pageSize,
|
||||
cid: this.childCategory.id,
|
||||
}).then(data => {
|
||||
this.handleData(page, data);
|
||||
});
|
||||
},
|
||||
onLoad() {
|
||||
// debugger;
|
||||
// 进入下一页
|
||||
let page = this.page + 1;
|
||||
// 加载商品
|
||||
this.loadProductList(this.childCategory.id, page);
|
||||
},
|
||||
handleData(page, data) {
|
||||
this.loading = true;
|
||||
// 设置下页面
|
||||
this.page = page;
|
||||
// 数据保存到 list 中
|
||||
this.products.push(...data.list);
|
||||
// 判断页数
|
||||
if (this.products.length >= data.total) {
|
||||
this.finished = true;
|
||||
}
|
||||
// 标记不在加载中
|
||||
this.loading = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
let response = getProductCategoryList(this.rootCategory.id);
|
||||
response.then(data => {
|
||||
// console.log(data);
|
||||
// debugger;
|
||||
// 设置根节点的分类
|
||||
this.childCategories = data;
|
||||
// 设置激活的分类
|
||||
// debugger;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].id === this.childCategory.id) {
|
||||
this.active = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// 加载商品列表
|
||||
// this.loadProductList(this.childCategory.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.product-list{
|
||||
.additional .price{
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,505 +0,0 @@
|
|||
<template>
|
||||
<div class="product-list">
|
||||
<searchtop :keyword="keyword" @onSearch="onSearch" />
|
||||
<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>
|
||||
<div :class="'item_options '+(filterShow?'show':'')">
|
||||
<ul>
|
||||
<li v-for="category in categories" :class="category.id === categoryId ?'selected':''" v-on:click="onCategoryClick(category.id)">
|
||||
{{ category.name }}
|
||||
</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>
|
||||
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<div v-for="(product,i) in products" :key="i">
|
||||
<product-card :product='product' @click="showProduct(product)" />
|
||||
</div>
|
||||
</van-list>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import searchtop from "../../components/search/searchtop";
|
||||
import {getProductCondition, getProductPage} from "../../api/search";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
searchtop
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: 0,
|
||||
pageSize: 10,
|
||||
loading: false,
|
||||
finished: false,
|
||||
|
||||
keyword: this.$route.params.keyword,
|
||||
|
||||
filterIndex: 0,
|
||||
filterSort: false, // 是否展示几个【排序】
|
||||
filterShow: false, // 是否展示【筛选】
|
||||
|
||||
sortField: undefined,
|
||||
sortOrder: undefined,
|
||||
|
||||
products:[], // 搜索出的商品
|
||||
categories: [], // 筛选的分类
|
||||
categoryId: undefined, // 选中的分类编号
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFilterBar(value) {
|
||||
if (value === 0) {
|
||||
this.filterSort = !this.filterSort;
|
||||
this.filterShow = false;
|
||||
} else if (value === 3) {
|
||||
this.filterShow = !this.filterShow;
|
||||
} else {
|
||||
// 如果非合法 10、11、12
|
||||
if (value !== 10
|
||||
&& value !== 11
|
||||
&& value !== 12) {
|
||||
alert('暂不支持');
|
||||
return;
|
||||
}
|
||||
// 设置 filterSort 和 filterIndex 属性
|
||||
this.filterSort = false;
|
||||
this.filterIndex = value;
|
||||
// 标记加载中
|
||||
this.loading = true;
|
||||
// 根据 value 的值,设置 sortField、sortOrder
|
||||
switch (value) {
|
||||
case 10:
|
||||
this.sortField = undefined;
|
||||
this.sortOrder = undefined;
|
||||
break;
|
||||
case 11:
|
||||
this.sortField = 'buyPrice';
|
||||
this.sortOrder = 'desc';
|
||||
break;
|
||||
case 12:
|
||||
this.sortField = 'buyPrice';
|
||||
this.sortOrder = 'asc';
|
||||
break;
|
||||
}
|
||||
// 根据排序,重新搜索
|
||||
let page = 1;
|
||||
getProductPage({
|
||||
pageNo: page,
|
||||
pageSize: this.pageSize,
|
||||
keyword: this.keyword,
|
||||
sortField: this.sortField,
|
||||
sortOrder: this.sortOrder,
|
||||
}).then(data => {
|
||||
this.products = [];
|
||||
this.handleData(page, data);
|
||||
});
|
||||
}
|
||||
},
|
||||
onCategoryClick(value) {
|
||||
// 设置分类编号
|
||||
this.categoryId = value;
|
||||
// 隐藏弹出
|
||||
this.filterShow = false;
|
||||
// 根据分类,重新搜索
|
||||
let page = 1;
|
||||
getProductPage({
|
||||
pageNo: page,
|
||||
pageSize: this.pageSize,
|
||||
keyword: this.keyword,
|
||||
sortField: this.sortField,
|
||||
sortOrder: this.sortOrder,
|
||||
cid: this.categoryId,
|
||||
}).then(data => {
|
||||
this.products = [];
|
||||
this.handleData(page, data);
|
||||
});
|
||||
},
|
||||
showProduct(product){
|
||||
this.$router.push('/product/'+product.id);
|
||||
},
|
||||
onSearch(keyword) {
|
||||
this.loading = true;
|
||||
// 设置 keyword
|
||||
this.keyword = keyword;
|
||||
// 重置其它字段
|
||||
this.filterIndex = 0;
|
||||
this.filterSort = false;
|
||||
this.filterShow = false;
|
||||
this.sortField = undefined;
|
||||
this.sortOrder = undefined;
|
||||
this.categoryId = undefined;
|
||||
// 查询
|
||||
let page = 1;
|
||||
getProductPage({
|
||||
pageNo: page,
|
||||
pageSize: this.pageSize,
|
||||
keyword: keyword,
|
||||
}).then(data => {
|
||||
this.products = [];
|
||||
this.handleData(page, data);
|
||||
this.loadSearchCondition();
|
||||
});
|
||||
},
|
||||
onLoad() {
|
||||
// debugger;
|
||||
// 进入下一页
|
||||
let page = this.page + 1;
|
||||
getProductPage({
|
||||
pageNo: page,
|
||||
pageSize: this.pageSize,
|
||||
keyword: this.keyword,
|
||||
}).then(data => {
|
||||
this.handleData(page, data);
|
||||
this.loadSearchCondition();
|
||||
});
|
||||
},
|
||||
handleData(page, data) {
|
||||
this.loading = true;
|
||||
// 设置下页面
|
||||
this.page = page;
|
||||
// 数据保存到 list 中
|
||||
this.products.push(...data.list);
|
||||
// 判断页数
|
||||
if (this.products.length >= data.total) {
|
||||
this.finished = true;
|
||||
}
|
||||
// 标记不在加载中
|
||||
this.loading = false;
|
||||
},
|
||||
loadSearchCondition() {
|
||||
getProductCondition({
|
||||
keyword: this.keyword,
|
||||
}).then(data => {
|
||||
this.categories = data.categories;
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
</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>
|
|
@ -1,364 +0,0 @@
|
|||
<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>{{addressData.name}} {{addressData.mobile}}</strong>
|
||||
<div>{{addressData.address}}</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 v-for="(itemGroup, i) in itemGroups" >
|
||||
<div class="card" v-for="(item, j) in itemGroup.items" :key="j">
|
||||
<product-card :product='convertProduct(item)'/>
|
||||
</div>
|
||||
<div style="height:15px;"></div>
|
||||
</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-coupon-cell
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
@click="showCouponPopup = true"
|
||||
/>
|
||||
<!-- 优惠券列表 -->
|
||||
<van-popup v-model="showCouponPopup" position="bottom">
|
||||
<van-coupon-list
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
:disabled-coupons="disabledCoupons"
|
||||
@change="onCouponChange"
|
||||
@exchange="onCouponExchange"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group class="total">
|
||||
<van-cell title="商品总额" :value="fee.buyTotal / 100.0"/>
|
||||
<van-cell title="运费" :value="+ fee.postageTotal / 100.0"/>
|
||||
<van-cell title="折扣" :value="- fee.discountTotal / 100.0"/>
|
||||
<van-cell title="实付金额" :value="fee.presentTotal / 100.0" style="font-weight: 700;"/>
|
||||
</van-cell-group>
|
||||
|
||||
<div style="height:50px;"></div>
|
||||
<van-submit-bar
|
||||
:price="fee.presentTotal"
|
||||
button-text="提交订单"
|
||||
label='实付金额:'
|
||||
@submit="onSubmit"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
createOrder,
|
||||
getOrderConfirmCreateOrder,
|
||||
getCartConfirmCreateOrder,
|
||||
createOrderFromCart
|
||||
} from '../../api/order';
|
||||
import {GetDefaultAddress} from '../../api/user';
|
||||
import orderStore from '../../store/order';
|
||||
import { Dialog } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
from: 'direct_order', // 目前有两个来源。direct_order:直接下单; card: 购物车下单。
|
||||
// 如下两个参数,在直接下单时使用
|
||||
skuId: this.$route.query.skuId,
|
||||
quantity: this.$route.query.quantity,
|
||||
|
||||
type: "add",
|
||||
addressData: {
|
||||
|
||||
},
|
||||
|
||||
// 商品 + 促销相关
|
||||
itemGroups: [],
|
||||
fee: {
|
||||
originalTotal: undefined,
|
||||
discountTotal: undefined,
|
||||
postageTotal: undefined,
|
||||
presentTotal: undefined,
|
||||
},
|
||||
// products: [], // 应该没用了
|
||||
|
||||
// 优惠劵相关
|
||||
showCouponPopup: false,
|
||||
coupons: [],
|
||||
disabledCoupons: [],
|
||||
chosenCoupon: -1,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onCouponChange(index) {
|
||||
// debugger;
|
||||
let couponCardId = this.coupons[index].id;
|
||||
if (this.from === 'direct_order') {
|
||||
getOrderConfirmCreateOrder(this.skuId, this.quantity, couponCardId).then(data => {
|
||||
// this.itemGroups = data.itemGroups;
|
||||
this.fee = data.fee;
|
||||
this.coupons[index].value = data.couponCardDiscountTotal; // 修改优惠劵减免的金额
|
||||
})
|
||||
} else if (this.from === 'cart') {
|
||||
getCartConfirmCreateOrder(couponCardId).then(data => {
|
||||
// this.itemGroups = data.itemGroups;
|
||||
this.fee = data.fee;
|
||||
this.coupons[index].value = data.couponCardDiscountTotal; // 修改优惠劵减免的金额
|
||||
})
|
||||
}
|
||||
this.chosenCoupon = index;
|
||||
this.showCouponPopup = false;
|
||||
},
|
||||
onCouponExchange(a, b, c) {
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '暂未开发', // TODO 芋艿
|
||||
});
|
||||
},
|
||||
|
||||
onSubmit() {
|
||||
const userAddressId = this.addressData.id;
|
||||
if (!userAddressId) {
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '请选择收获地址',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const remark = '';
|
||||
const couponCardId = this.chosenCoupon >= 0 ? this.coupons[this.chosenCoupon].id : undefined;
|
||||
|
||||
if (this.from === 'direct_order') {
|
||||
const { skuId, quantity } = this.$route.query;
|
||||
const orderItems = [{
|
||||
skuId,
|
||||
quantity,
|
||||
couponCardId,
|
||||
}];
|
||||
createOrder({
|
||||
orderItems,
|
||||
userAddressId,
|
||||
couponCardId,
|
||||
remark,
|
||||
}).then(result => {
|
||||
if (result) {
|
||||
// const { orderNo } = result;
|
||||
// this.$router.push({ //核心语句
|
||||
// path:`/order/success`, //跳转的路径
|
||||
// query:{ //路由传参时push和query搭配使用 ,作用时传递参数
|
||||
// ...result,
|
||||
// }
|
||||
// });
|
||||
this.$router.push('/pay?appId=POd4RC6a&orderId=' + result.id + '&returnUrl=' + encodeURI('/user/order/info/' + result.id));
|
||||
}
|
||||
});
|
||||
} else if (this.from === 'cart') {
|
||||
createOrderFromCart(userAddressId, couponCardId, remark).then(result => {
|
||||
if (result) {
|
||||
// const { orderNo } = result;
|
||||
// this.$router.push({ //核心语句
|
||||
// path:`/order/success`, //跳转的路径
|
||||
// query:{ //路由传参时push和query搭配使用 ,作用时传递参数
|
||||
// ...result,
|
||||
// }
|
||||
// });
|
||||
this.$router.push('/pay?appId=POd4RC6a&orderId=' + result.id + '&returnUrl=' + encodeURI('/user/order/info/' + result.id));
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
convertProduct(item) {
|
||||
return {
|
||||
...item.spu,
|
||||
quantity: item.buyQuantity,
|
||||
price: item.buyPrice || item.price,
|
||||
sku: {
|
||||
...item,
|
||||
spu: undefined,
|
||||
}
|
||||
};
|
||||
},
|
||||
convertCouponList(cards) {
|
||||
let newCards = [];
|
||||
for (let i in cards) {
|
||||
let card = cards[i];
|
||||
newCards.push({
|
||||
id: card.id,
|
||||
name: card.title,
|
||||
condition: '满 ' + card.priceAvailable / 100.0 + ' 元可用',
|
||||
startAt: card.validStartTime / 1000,
|
||||
endAt: card.validEndTime / 1000,
|
||||
// description: '述信息,优惠券可用时展示',
|
||||
reason: card.unavailableReason,
|
||||
value: 0,
|
||||
valueDesc: card.preferentialType === 1 ? card.priceOff / 100 : card.percentOff / 10.0,
|
||||
unitDesc: card.preferentialType === 1 ? '元' : '折'
|
||||
})
|
||||
}
|
||||
return newCards;
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
if (this.$store.state.addressData.name) {
|
||||
this.type = 'add1';
|
||||
} else {
|
||||
this.type = 'add';
|
||||
}
|
||||
this.addressData = this.$store.state.addressData;
|
||||
|
||||
// 加载商品信息
|
||||
// debugger;
|
||||
if (this.from === 'direct_order') {
|
||||
getOrderConfirmCreateOrder(this.skuId, this.quantity).then(data => {
|
||||
this.itemGroups = data.itemGroups;
|
||||
this.fee = data.fee;
|
||||
// 获得优惠劵列表
|
||||
this.coupons = this.convertCouponList(data.couponCards.filter(function (element) {
|
||||
return element.available;
|
||||
}));
|
||||
this.disabledCoupons = this.convertCouponList(data.couponCards.filter(function (element) {
|
||||
return !element.available;
|
||||
}));
|
||||
})
|
||||
} else if (this.from === 'cart') {
|
||||
getCartConfirmCreateOrder().then(data => {
|
||||
this.itemGroups = data.itemGroups;
|
||||
this.fee = data.fee;
|
||||
// 获得优惠劵列表
|
||||
this.coupons = this.convertCouponList(data.couponCards.filter(function (element) {
|
||||
return element.available;
|
||||
}));
|
||||
this.disabledCoupons = this.convertCouponList(data.couponCards.filter(function (element) {
|
||||
return !element.available;
|
||||
}));
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 加载地址
|
||||
GetDefaultAddress().then((result) => {
|
||||
if (!this.addressData.name && result) {
|
||||
this.type = 'add1';
|
||||
this.addressData = result;
|
||||
}
|
||||
})
|
||||
// 处理来源
|
||||
if (this.$route.query.from === 'cart') {
|
||||
this.from = this.$route.query.from;
|
||||
}
|
||||
},
|
||||
store: orderStore,
|
||||
};
|
||||
</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>
|
|
@ -1,93 +0,0 @@
|
|||
<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, UpdateAddress, DelAddress} from "../../../api/user.js";
|
||||
|
||||
import {AddressEdit} from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[AddressEdit.name]: AddressEdit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
areaList,
|
||||
showDelete: false,
|
||||
info: {
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSave(data) {
|
||||
const params = {
|
||||
...data,
|
||||
address: data.addressDetail,
|
||||
areaNo: data.areaCode,
|
||||
city: data.city,
|
||||
county: data.county,
|
||||
country: data.country,
|
||||
mobile: data.tel,
|
||||
name: data.name,
|
||||
hasDefault: data.isDefault ? 2 : 1,
|
||||
};
|
||||
|
||||
if (data.id) {
|
||||
UpdateAddress(params).then(response => {
|
||||
this.$toast('更新成功');
|
||||
this.$router.go(-1);
|
||||
})
|
||||
} else {
|
||||
SaveAddress(params).then(response => {
|
||||
this.$toast('保存成功');
|
||||
this.$router.go(-1);
|
||||
})
|
||||
}
|
||||
},
|
||||
onDelete(data) {
|
||||
const params = {
|
||||
id: data.id,
|
||||
};
|
||||
DelAddress(params).then(response => {
|
||||
this.$toast('删除成功');
|
||||
this.$router.go(-1);
|
||||
})
|
||||
},
|
||||
},
|
||||
created: function () {
|
||||
const id = this.$route.query.id;
|
||||
if (id > 0) {
|
||||
this.showDelete = true;
|
||||
GetAddressById(id).then(response => {
|
||||
this.info = {
|
||||
...response,
|
||||
addressDetail: response.address,
|
||||
tel: response.mobile,
|
||||
areaCode: response.areaNo,
|
||||
isDefault: 0,
|
||||
};
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.van-picker__toolbar {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
|
@ -1,80 +0,0 @@
|
|||
<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';
|
||||
import eventBus from '../../eventBus';
|
||||
import orderStore from '../../../store/order'
|
||||
|
||||
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.$store.commit('changeAddressData', {
|
||||
...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.map(item => {
|
||||
if (item.hasDefault == 2) {
|
||||
this.chosenAddressId = item.id;
|
||||
}
|
||||
|
||||
// convert data
|
||||
return {
|
||||
...item,
|
||||
tel: item.mobile,
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
store: orderStore,
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.hideselect {
|
||||
.van-radio__input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,197 +0,0 @@
|
|||
<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"
|
||||
v-model="describe"
|
||||
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 @click="handleSubmit" 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>
|
||||
import {Toast} from 'vant';
|
||||
import moment from 'moment';
|
||||
import {getOrderInfo, getOrderReturnReason, orderReturnApply} from '../../../api/order';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
servicetype: '1',
|
||||
showPicker: false,
|
||||
remark: '不想要了',
|
||||
describe: '',
|
||||
amount: '50.50',
|
||||
maxamount: '50.50',
|
||||
images: [],
|
||||
columnsData: [],
|
||||
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,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickShowPicker() {
|
||||
this.showPicker = true;
|
||||
},
|
||||
onCancel() {
|
||||
this.showPicker = false;
|
||||
},
|
||||
onConfirm(value, index) {
|
||||
this.remark = value;
|
||||
this.showPicker = false;
|
||||
},
|
||||
onRead(file) {
|
||||
if (file.length == undefined) {
|
||||
this.images.push(file.content);
|
||||
} else {
|
||||
file.forEach(item => {
|
||||
this.images.push(item.content);
|
||||
});
|
||||
}
|
||||
},
|
||||
removeImage(index, image) {
|
||||
this.images.splice(index, 1);
|
||||
},
|
||||
handleSubmit() {
|
||||
const {orderId} = this.$route.params;
|
||||
const filterData = this.columnsData.filter(data => {
|
||||
if (data.displayName == this.remark) {
|
||||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
const params = {
|
||||
orderId,
|
||||
returnType: this.servicetype,
|
||||
reason: filterData[0].id,
|
||||
describe: this.describe,
|
||||
}
|
||||
|
||||
orderReturnApply(params).then(res => {
|
||||
Toast('操作成功');
|
||||
this.$router.go(-1);
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const {orderId} = this.$route.params;
|
||||
this.orderId = orderId;
|
||||
getOrderInfo(orderId).then(res => {
|
||||
const {buyPrice, discountPrice, orderItems} = res;
|
||||
|
||||
// 退还金额
|
||||
const maxAmount = buyPrice - discountPrice / 100
|
||||
this.amount = maxAmount;
|
||||
this.maxamount = maxAmount;
|
||||
|
||||
this.products = orderItems.map(item => {
|
||||
return {
|
||||
...item,
|
||||
picUrls: [item.skuImage],
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 获取订单 退款原因
|
||||
getOrderReturnReason().then(res => {
|
||||
this.columnsData = res;
|
||||
this.columns = res.map(item => {
|
||||
return item.displayName;
|
||||
})
|
||||
// 默认选中
|
||||
this.remark = this.columns[0]
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</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>
|
|
@ -1,112 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<headerNav title="服务单详情"/>
|
||||
|
||||
<div v-if="serviceType === 1">
|
||||
<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/${lastLogisticsInfo.id}/${serviceNumber}`"
|
||||
:title="lastLogisticsDetail.logisticsInformation"
|
||||
:label="lastLogisticsDetail.logisticsTimeText" is-link/>
|
||||
</div>
|
||||
|
||||
<div v-if="serviceType === 2">
|
||||
<van-steps v-if="serviceType === 2" :active="active">
|
||||
<van-step>提交申请</van-step>
|
||||
<van-step>客服审核</van-step>
|
||||
<van-step>客户确认</van-step>
|
||||
<van-step>仓库收货</van-step>
|
||||
<van-step>完成</van-step>
|
||||
</van-steps>
|
||||
</div>
|
||||
|
||||
<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="serviceNumber"/>
|
||||
<van-cell title="申请时间" :value="applyTime"/>
|
||||
<van-cell title="服务类型" :value="serviceTypeText"/>
|
||||
<van-cell title="退款金额" :value="refundPrice / 100"/>
|
||||
</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>
|
||||
|
||||
import moment from 'moment';
|
||||
import { getOrderReturnInfo } from '../../../api/order';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
serviceNumber: -1,
|
||||
applyTime: '-1',
|
||||
serviceType: '',
|
||||
serviceTypeText: '',
|
||||
refundPrice: 0,
|
||||
lastLogisticsInfo: {},
|
||||
lastLogisticsDetail: {},
|
||||
products: [
|
||||
{
|
||||
imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price: '499',
|
||||
quantity: 2
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const { orderId } = this.$route.params;
|
||||
getOrderReturnInfo(orderId).then(res => {
|
||||
console.log('getOrderReturnInfo success', res)
|
||||
const { returnInfo, orderItems, lastLogisticsInfo } = res;
|
||||
this.lastLogisticsInfo = lastLogisticsInfo
|
||||
if (lastLogisticsInfo && lastLogisticsInfo.lastLogisticsDetail) {
|
||||
const lastLogisticsDetail = lastLogisticsInfo.lastLogisticsDetail;
|
||||
this.lastLogisticsDetail = {
|
||||
...lastLogisticsDetail,
|
||||
logisticsTimeText: moment(lastLogisticsDetail.logisticsTime).format("YYYY-MM-DD HH:mm"),
|
||||
}
|
||||
}
|
||||
this.serviceType = returnInfo.serviceType
|
||||
this.serviceTypeText = returnInfo.serviceTypeText
|
||||
this.serviceNumber = returnInfo.serviceNumber
|
||||
this.applyTime = moment(returnInfo.createTime).format("YYYY-MM-DD HH:mm")
|
||||
this.refundPrice = returnInfo.refundPrice
|
||||
this.products = orderItems.map(item => {
|
||||
return {
|
||||
...item,
|
||||
title: item.skuName,
|
||||
picUrls: [item.skuImage],
|
||||
price: item.presentTotal,
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
|
@ -1,99 +0,0 @@
|
|||
<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>
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<div style="background: #f7f7f7;">
|
||||
<headerNav title="进度详情"/>
|
||||
|
||||
<van-cell-group>
|
||||
<van-cell title="服务单号" :value="serviceNumber"/>
|
||||
</van-cell-group>
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60" style="margin-top: 15px;">
|
||||
<van-step v-for="(item, itemIndex) in details" :key="detailIndex">
|
||||
<h3>{{item.logisticsInformation}}</h3>
|
||||
<p>{{item.logisticsTimeText}}</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import moment from 'moment';
|
||||
import { getLogisticsInfo } from '../../../api/order';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
serviceNumber: '',
|
||||
details: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$route.params)
|
||||
const { id, serviceNumber } = this.$route.params;
|
||||
this.serviceNumber = serviceNumber
|
||||
getLogisticsInfo(id).then(res => {
|
||||
const { details } = res;
|
||||
|
||||
this.details = details.map(item => {
|
||||
return {
|
||||
...item,
|
||||
logisticsTimeText: moment(item.logisticsTime).format("YYYY-MM-DD HH:mm")
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
|
@ -1,106 +0,0 @@
|
|||
<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)">
|
||||
<van-card
|
||||
:price="formatPrice(item.price)"
|
||||
:desc="item.sellPoint"
|
||||
:title="item.spuName"
|
||||
:thumb="item.spuImage"
|
||||
@click="skipProductSpuInfo(item.spuId)"
|
||||
>
|
||||
</van-card>
|
||||
<template slot="right">
|
||||
<van-button square type="danger" text="删除"/>
|
||||
</template>
|
||||
|
||||
</van-swipe-cell>
|
||||
</div>
|
||||
</van-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {GetFavoritePage, DelFavorite} from "../../../api/user.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
finished: false,
|
||||
list: [],
|
||||
page: 0,
|
||||
pageSize: 10
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatPrice(data) {
|
||||
return (data / 100).toFixed(2);
|
||||
},
|
||||
skipProductSpuInfo(data) {
|
||||
// return getProductSpuInfo(data);
|
||||
this.$router.push('/product/'+data);
|
||||
},
|
||||
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.spuId).then(response => {
|
||||
this.$toast('删除成功');
|
||||
this.$router.go(0);
|
||||
})
|
||||
instance.close();
|
||||
}).catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
let pageNo = this.page + 1;
|
||||
GetFavoritePage(pageNo, this.pageSize).then(response => {
|
||||
this.page = pageNo;
|
||||
this.list.push(...response.list);
|
||||
// response.list.forEach(item => {
|
||||
// this.list.push(item);
|
||||
// });
|
||||
this.loading = false;
|
||||
if (this.list.length >= response.total) {
|
||||
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>
|
|
@ -1,173 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="user-profile">
|
||||
<div class="user-profile-avatar">
|
||||
<a href="/#/user/info">
|
||||
<img :src="user && user.avatar ? user.avatar : 'http://static.iocoder.cn/1553652151601.jpg?imageView2/2/w/308/h/210/interlace/1/q/100'">
|
||||
</a>
|
||||
</div>
|
||||
<div class="user-profile-username">
|
||||
<a href="/#/user/info">
|
||||
<span class="m-nick">{{user ? user.nickname : '未登陆'}}</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 v-if="user" title="退出登录" @click="logout" />
|
||||
<van-cell v-else title="登陆" is-link to="/login" />
|
||||
</van-cell-group>
|
||||
<navigate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { GetUserIndex } from "../../api/user.js";
|
||||
import { getAccessToken, clearLoginToken } from '../../utils/cache.js';
|
||||
import { getUserInfo } from '../../api/user.js';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
data: {},
|
||||
user: undefined,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
},
|
||||
methods: {
|
||||
logout: function () {
|
||||
// 清空本地 token
|
||||
clearLoginToken();
|
||||
// TODO 芋艿,后面最好处理下 token
|
||||
// 跳转到登陆
|
||||
this.$router.push('/login');
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
// GetUserIndex().then(response=>{
|
||||
// this.data=response;
|
||||
// });
|
||||
},
|
||||
mounted() {
|
||||
if (getAccessToken()) { // 存在
|
||||
let response = getUserInfo();
|
||||
response.then(data => {
|
||||
this.user = data;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
|
@ -1,90 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<headerNav title="个人信息"/>
|
||||
<van-cell-group title="基础资料">
|
||||
<!--<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 title="昵称" :value="user.nickname" @click="onShowNicknameDialog" />
|
||||
<van-cell title="头像" @click="onShowAvatarDialog" >
|
||||
<img width="24px" :src="user.avatar" >
|
||||
</van-cell>
|
||||
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group title="密保资料">
|
||||
<van-cell title="手机号" :value="user.mobile" />
|
||||
</van-cell-group>
|
||||
|
||||
<!-- 昵称修改弹出 -->
|
||||
<van-dialog
|
||||
v-model="showNicknameDialog"
|
||||
:before-close="onShowNicknameDialogClose"
|
||||
show-cancel-button
|
||||
|
||||
>
|
||||
<van-field
|
||||
:value="user.nickname"
|
||||
label="昵称"
|
||||
placeholder="请输入昵称"
|
||||
@input="inputNickname"
|
||||
/>
|
||||
</van-dialog>
|
||||
<!---->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserInfo, doUserUpdateNickname } from '../../../api/user.js';
|
||||
import { Dialog } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {},
|
||||
showNicknameDialog: false,
|
||||
updateNickname: undefined,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onShowNicknameDialog: function () {
|
||||
this.showNicknameDialog = true;
|
||||
this.updateNickname = this.user.nickname;
|
||||
},
|
||||
inputNickname: function (value) {
|
||||
this.updateNickname = value;
|
||||
},
|
||||
onShowNicknameDialogClose: function (action, done) {
|
||||
if (action === 'confirm') {
|
||||
let that = this;
|
||||
let response = doUserUpdateNickname(this.updateNickname);
|
||||
response.then(data => {
|
||||
// 修改
|
||||
that.user.nickname = that.updateNickname;
|
||||
// 关闭弹窗
|
||||
done();
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
|
||||
onShowAvatarDialog: function () {
|
||||
// TODO 芋艿,头像上传
|
||||
alert('头像上传暂未开发');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let response = getUserInfo();
|
||||
response.then(data => {
|
||||
this.user = data;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
|
@ -1,186 +0,0 @@
|
|||
<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 v-if="orderInfo.status >= 2 "
|
||||
class="logistics"
|
||||
:to="`/user/order/logistics/${orderInfo.id}`"
|
||||
:title="latestLogisticsDetail.logisticsInformation"
|
||||
:label="latestLogisticsDetail.logisticsTimeText"
|
||||
icon="logistics"
|
||||
is-link
|
||||
/>
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
center
|
||||
:border="false"
|
||||
>
|
||||
<template>
|
||||
<div>{{recipient.name}} {{recipient.mobile}}</div>
|
||||
<div>{{recipient.address}}</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="orderInfo.orderNo"/>
|
||||
<van-cell title="下单时间" :value="orderInfo.createTimeText"/>
|
||||
<van-cell title="订单状态" :value="orderInfo.statusText"/>
|
||||
</van-cell-group>
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group class="total">
|
||||
<van-cell title="商品总额" :value="orderInfo.buyPrice / 100.0"/>
|
||||
<van-cell title="运费" :value="'+' + orderInfo.logisticsPrice / 100.0"/>
|
||||
<van-cell title="折扣" :value="- orderInfo.discountPrice / 100.0"/>
|
||||
<van-cell title="实付金额" :value="orderInfo.presentPrice / 100.0" style="font-weight: 700;"/>
|
||||
</van-cell-group>
|
||||
<div class="footer">
|
||||
<div class="munu">
|
||||
<router-link v-if="orderInfo.hasOrderReturn === -1 " :to="'/user/aftersale/apply/'+orderId">
|
||||
<van-button size="small">申请售后</van-button>
|
||||
</router-link>
|
||||
<router-link v-if="orderInfo.hasOrderReturn !== -1" :to="'/user/aftersale/detail/'+orderId">
|
||||
<van-button size="small">查看进度</van-button>
|
||||
</router-link>
|
||||
<van-button v-if="orderInfo.status === 3 " size="small" v-on:click="clickConfirmReceiving(orderId)">确认收货</van-button>
|
||||
<van-button v-if="orderInfo.status === 1 " size="small" type="danger" @click="goPay(orderInfo.id)">支付</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import moment from 'moment';
|
||||
import { getOrderInfo, confirmReceiving } from '../../../api/order';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
orderId: 0,
|
||||
orderInfo: {},
|
||||
recipient: {},
|
||||
latestLogisticsDetail: {},
|
||||
products: [
|
||||
{
|
||||
imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price: '499',
|
||||
quantity: 2
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickConfirmReceiving(orderId) {
|
||||
confirmReceiving(orderId).then(res => {
|
||||
this.queryOrderPage(this.queryParams)
|
||||
})
|
||||
},
|
||||
goPay(itemId) {
|
||||
this.$router.push('/pay?appId=POd4RC6a&orderId=' + itemId + '&returnUrl=' + encodeURI('/user/order/info/' + itemId));
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const { id } = this.$route.params;
|
||||
this.orderId = id;
|
||||
getOrderInfo(id).then(res => {
|
||||
const { status, recipient, latestLogisticsDetail, orderItems} = res;
|
||||
// 提交订单、配送中、交易成功
|
||||
if ([1, 2].indexOf(status) !== -1) {
|
||||
this.active = 0
|
||||
} else if (status === 3) {
|
||||
this.active = 1
|
||||
} else if (status >= 4) {
|
||||
this.active = 2
|
||||
}
|
||||
|
||||
// 收件人信息
|
||||
this.recipient = recipient;
|
||||
|
||||
// 订单info
|
||||
this.orderInfo = {
|
||||
...res,
|
||||
createTimeText: moment(res.createTime).format("YYYY-MM-DD HH:mm"),
|
||||
};
|
||||
|
||||
// 最新物流信息
|
||||
let logisticsTimeText = '';
|
||||
if (latestLogisticsDetail) {
|
||||
logisticsTimeText = moment(latestLogisticsDetail.logisticsTime).format("YYYY-MM-DD HH:mm");
|
||||
}
|
||||
|
||||
this.latestLogisticsDetail = {
|
||||
...latestLogisticsDetail,
|
||||
logisticsTimeText: logisticsTimeText,
|
||||
}
|
||||
|
||||
this.products = orderItems.map(item => {
|
||||
return {
|
||||
...item,
|
||||
picUrls: [item.skuImage],
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
</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>
|