root/ludu-cloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

- 订单流程

Browse Source
This commit is contained in:
sin 2019-04-08 23:17:14 +08:00
parent 6c50286477
commit 77c6edefb3
11 changed files with 920 additions and 687 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
mobile-web/src/api/order.js Normal file
View File

@ -0,0 +1,36 @@
import request from "../config/request";
export function getOrderPage(params) {
return request({
url: '/order-api/users/order/order_page',
method: 'get',
params: {
...params,
}
});
}
export function cancelOrder(id) {
return request({
url: '/product-api/users/spu/info',
method: 'get',
params: {
id,
}
});
}
export function createOrder(params) {
return request({
headers: {
'Content-Type': 'application/json',
},
url: '/order-api/users/order/create_order',
method: 'post',
data: {
...params,
},
});
}

6
mobile-web/src/api/product.js
View File

@ -2,7 +2,7 @@ import request from "../config/request";
export function getProductCategoryList(pid) {
return request({
url: 'product-api/users/category/list',
url: '/product-api/users/category/list',
method: 'get',
params: {
pid
@ -12,7 +12,7 @@ export function getProductCategoryList(pid) {
export function getProductSpuPage(cid, pageNo, pageSize) {
return request({
url: 'product-api/users/spu/page',
url: '/product-api/users/spu/page',
method: 'get',
params: {
cid,
@ -24,7 +24,7 @@ export function getProductSpuPage(cid, pageNo, pageSize) {
export function getProductSpuInfo(id) {
return request({
url: 'product-api/users/spu/info',
url: '/product-api/users/spu/info',
method: 'get',
params: {
id,

4
mobile-web/src/api/promotion.js
View File

@ -4,7 +4,7 @@ import request from "../config/request";
export function getBannerList() {
return request({
url: 'promotion-api/users/banner/list',
url: '/promotion-api/users/banner/list',
method: 'get',
});
}
@ -13,7 +13,7 @@ export function getBannerList() {
export function getProductRecommendList() {
return request({
url: 'promotion-api/users/product_recommend/list',
url: '/promotion-api/users/product_recommend/list',
method: 'get',
});
}

8
mobile-web/src/api/user.js
View File

@ -74,14 +74,14 @@ export function ExchangeCoupon(code){
export function getUserInfo() {
return request({
url: 'user-api/users/user/info',
url: '/user-api/users/user/info',
method: 'get',
});
}
export function doUserUpdateNickname(nickname) {
return request({
url: 'user-api/users/user/update_nickname',
url: '/user-api/users/user/update_nickname',
method: 'post',
params: {
nickname,
@ -91,7 +91,7 @@ export function doUserUpdateNickname(nickname) {
export function doPassportMobileRegister(mobile, code) {
return request({
url: 'user-api/users/passport/mobile/register',
url: '/user-api/users/passport/mobile/register',
method: 'post',
params: {
mobile,
@ -102,7 +102,7 @@ export function doPassportMobileRegister(mobile, code) {
export function doPassportMobileSendRegisterCode(mobile) {
return request({
url: 'user-api/users/passport/mobile/send_register_code',
url: '/user-api/users/passport/mobile/send_register_code',
method: 'post',
params: {
mobile,

144
mobile-web/src/components/page/product.vue
View File

@ -1,79 +1,89 @@
<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>
<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>
</div>
</template>
<script>
import {getProduct} from "../../api/page.js";
import {getProduct} from "../../api/page.js";
export default {
name:'product',
data () {
return {
productlist: []
}
},
props:{
data:Object
export default {
name: 'product',
data() {
return {
productlist: []
}
},
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;
})
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>

20
mobile-web/src/config/request.js
View File

@ -15,6 +15,14 @@ const serviceRouter = function(requestUrl) {
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',
},
};
const configProd = {
@ -26,6 +34,14 @@ const serviceRouter = function(requestUrl) {
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',
},
};
if (process.env.NODE_ENV == 'development') {
@ -57,7 +73,9 @@ const serviceRouter = function(requestUrl) {
const indexOf = requestUrl.indexOf("/", 1);
const _urlPrefix = requestUrl.substring(0, indexOf);
if (!config[_urlPrefix]) {
throw new Error(`服务路由，未找到可用服务! ${requestUrl}`);
// throw new Error(`服务路由，未找到可用服务! ${requestUrl}`);
console.error(`服务路由，未找到可用服务! ${requestUrl}`)
return ''
}
// if (!createServer[_urlPrefix]) {
// throw new Error("服务路由，未找到可用服务!");

7
mobile-web/src/config/router.js
View File

@ -178,6 +178,13 @@ const routes = [
title: '确认订单'
}
},
{
path: '/order/success',
component: () => import('../page/shipping/order-success'),
meta: {
title: '确认订单'
}
},
{
name: 'category',
component: () => import('../page/category/index'),

675
mobile-web/src/page/product/detail.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="goods">
<headerNav title="商品详情"/>
<headerNav title="商品详情"/>
<van-swipe class="goods-swipe" :autoplay="3000">
<van-swipe-item v-for="thumb in spu.picUrls" :key="thumb">
<img :src="thumb" >
<img :src="thumb">
</van-swipe-item>
</van-swipe>
@ -16,58 +16,58 @@
</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>-->
<!--<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 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" >
<van-cell is-link @click="showSku">
<template slot="title">
<span style="margin-right: 10px;">已选</span>
<span>{{ formatSkuText(initialSku) }}</span>
<span style="margin-right: 10px;">已选</span>
<span>{{ formatSkuText(initialSku) }}</span>
</template>
</van-cell>
</van-cell-group>
<div class="goods-info">
<p class="goods-info-title" >图文详情</p>
<div v-html="spu.description"></div>
<p class="goods-info-title">图文详情</p>
<div v-html="spu.description"></div>
</div>
<van-goods-action>
@ -86,320 +86,349 @@
</van-goods-action>
<!--<van-actionsheet v-model="show" title="促销" style="font-size:14px;">-->
<!---->
<!--<van-cell is-link @click="sorry" >-->
<!--<template slot="title">-->
<!--<van-tag type="danger">多买优惠</van-tag>-->
<!--<span> 满2件，总价打9折</span>-->
<!--</template>-->
<!--</van-cell>-->
<!--<van-cell is-link @click="sorry" >-->
<!--<template slot="title">-->
<!--<van-tag type="danger">满减</van-tag>-->
<!--<span> 满100元减50元</span>-->
<!--</template>-->
<!--</van-cell>-->
<!--<van-cell is-link @click="sorry" >-->
<!--<template slot="title">-->
<!--<van-tag type="danger">限购</van-tag>-->
<!--<span> 购买不超过5件时享受单件价￥8.00，超出数量以结算价为准</span>-->
<!--</template>-->
<!--</van-cell>-->
<!---->
<!--<van-cell is-link @click="sorry" >-->
<!--<template slot="title">-->
<!--<van-tag type="danger">多买优惠</van-tag>-->
<!--<span> 满2件，总价打9折</span>-->
<!--</template>-->
<!--</van-cell>-->
<!--<van-cell is-link @click="sorry" >-->
<!--<template slot="title">-->
<!--<van-tag type="danger">满减</van-tag>-->
<!--<span> 满100元减50元</span>-->
<!--</template>-->
<!--</van-cell>-->
<!--<van-cell is-link @click="sorry" >-->
<!--<template slot="title">-->
<!--<van-tag type="danger">限购</van-tag>-->
<!--<span> 购买不超过5件时享受单件价￥8.00，超出数量以结算价为准</span>-->
<!--</template>-->
<!--</van-cell>-->
<!--</van-actionsheet>-->
<!--<van-actionsheet v-model="showTag" title="服务说明" style="font-size:14px;">-->
<!---->
<!--<van-cell>-->
<!--<template slot="title">-->
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
<!--<span >次日达</span>-->
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">指定时间前下单，次日送达</div>-->
<!--</template>-->
<!--</van-cell>-->
<!--<van-cell>-->
<!--<template slot="title">-->
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
<!--<span >自提</span>-->
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">我们提供多种自提服务，包括自提点、自助提货柜、移动自提车等服务</div>-->
<!--</template>-->
<!--</van-cell>-->
<!--<van-cell>-->
<!--<template slot="title">-->
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
<!--<span >闪电退款</span>-->
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">签收7天内退货的，提供先退款后退货服务。</div>-->
<!--</template>-->
<!--</van-cell>-->
<!--<van-cell>-->
<!--<template slot="title">-->
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
<!--<span >七天无理由退货（拆封后不支持）</span>-->
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">七天无理由退货（拆封后不支持）</div>-->
<!--</template>-->
<!--</van-cell>-->
<!--<van-cell>-->
<!--<template slot="title">-->
<!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
<!--<span >前海保税仓</span>-->
<!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">本商品由前海保税仓发货</div>-->
<!--</template>-->
<!--</van-cell>-->
<!---->
<!--<van-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"-->
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 } from '../../api/product';
// import skuData from '../../data/sku';
import {getProductSpuInfo} from '../../api/product';
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(), // 规格值的映射
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(), // 规格值的映射
// show:false,
// showTag:false,
// goods: {
// title: '【每日一粒益智又长高】 Lifeline Care 儿童果冻鱼油DHA维生素D3聪明长高 软糖 30粒 2件装',
// subtitle:'【品牌直采】Q弹美味，无腥味果冻鱼油，每粒含足量鱼油DHA，帮助视网膜和大脑健康发育，让你的宝宝明眼又聪明，同时补充400国际单位维生素D3，强壮骨骼和牙齿。特含DPA，让宝宝免疫力更强，没病来扰。',
// price: 2680,
// market_price:9999,
// express: '免运费',
// remain: 19,
// thumb: [
// 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
// 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
// ],
// info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
// },
// show:false,
// showTag:false,
// goods: {
// title: '【每日一粒益智又长高】 Lifeline Care 儿童果冻鱼油DHA维生素D3聪明长高 软糖 30粒 2件装',
// subtitle:'【品牌直采】Q弹美味，无腥味果冻鱼油，每粒含足量鱼油DHA，帮助视网膜和大脑健康发育，让你的宝宝明眼又聪明，同时补充400国际单位维生素D3，强壮骨骼和牙齿。特含DPA，让宝宝免疫力更强，没病来扰。',
// price: 2680,
// market_price:9999,
// express: '免运费',
// remain: 19,
// thumb: [
// 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
// 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
// ],
// info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
// },
showBase: false, // 是否显示 sku 坦诚
closeOnClickOverlay: true, // 是否在点击蒙层后关闭
hideStock: true, // 是否显示商品剩余库存
showBase: false, // 是否显示 sku 坦诚
closeOnClickOverlay: true, // 是否在点击蒙层后关闭
hideStock: true, // 是否显示商品剩余库存
};
},
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]) + ' ';
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;
},
text = text + 'x ' + data.quantity + ' 件';
return text;
},
stepperChange(value) { // 选择 sku 数量时
this.initialSku.quantity = value;
},
skuSelected({skuValue, selectedSku, selectedSkuComb}) { // 选择 sku
console.log(skuValue);
console.log(selectedSku);
console.log(selectedSkuComb);
this.initialSku = {
...selectedSkuComb,
quantity: 1,
};
},
onClickCart() {
this.$router.push('/cart');
},
sorry() {
Toast('暂无后续逻辑~');
},
showPromotion() {
this.show=true;
},
showSku() { // 展示 sku 选择
this.showBase=true;
},
onClickShowTag(){
this.showTag=true;
},
onBuyClicked(data) {
this.$toast(JSON.stringify(data));
},
onAddCartClicked(data) {
this.$toast(JSON.stringify(data));
},
},
mounted() {
let id = this.$route.params.id; // 商品编号
let response = getProductSpuInfo(id);
response.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 组合对应的库存
stepperChange(value) { // 选择 sku 数量时
this.initialSku.quantity = value;
},
skuSelected({skuValue, selectedSku, selectedSkuComb}) { // 选择 sku
console.log(skuValue);
console.log(selectedSku);
console.log(selectedSkuComb);
this.initialSku = {
...selectedSkuComb,
quantity: 1,
};
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;
},
onClickCart() {
this.$router.push('/cart');
},
sorry() {
Toast('暂无后续逻辑~');
},
showPromotion() {
this.show = true;
},
showSku() { // 展示 sku 选择
this.showBase = true;
},
onClickShowTag() {
this.showTag = true;
},
onBuyClicked(data) {
const { selectedNum, goodsId } = data;
console.log(data);
// this.$toast(JSON.stringify(data));
this.$router.push({
path:'/order',
query:{
skuId: goodsId,
quantity: selectedNum,
}
});
},
onAddCartClicked(data) {
this.$toast(JSON.stringify(data));
},
},
mounted() {
let id = this.$route.params.id; // 商品编号
let response = getProductSpuInfo(id);
response.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 (!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);
}
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;
});
}
};
// debugger;
this.vanSku = vanSku;
// 初始化
// TODO 芋艿，需要处理下第一个有效的 sku
this.initialSku = vanSku.list[0];
this.initialSku.quantity = 1;
});
}
};
</script>
<style lang="less">
.goods {
padding-bottom: 50px;
&-swipe {
img {
width: 7.5rem;
height: 7.5rem;
display: block;
}
}
&-tag{
font-size: 12px;
border-top: 1px solid #e5e5e5;
span{
margin-right: 10px;
}
i{
color: red;
margin-right: 3px;
}
img{
width: 12px;
margin-right: 3px;
margin-top: 6px;
.goods {
padding-bottom: 50px;
&-swipe {
img {
width: 7.5rem;
height: 7.5rem;
display: block;
}
}
&-title {
line-height: 18px;
padding-top: 10px;
margin-bottom: 6px;
font-size: 14px;
color: #333;
font-weight: 700;
border-top: 1px solid #f0f0f0;
}
&-subtit{
}
&-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: #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{
&-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>

35
mobile-web/src/page/shipping/order-success.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="order-success">
<headerNav title="提交成功"/>
<sapn>TODO 支付成功</sapn>
<router-link :to="'/user/order'">
<van-button size="small" type="danger">订单列表</van-button>
</router-link>
</div>
</template>
<script>
import {createOrder} from '../../api/order';
export default {
data() {
return {
}
},
methods: {
},
activated() {
},
};
</script>
<style lang="less">
.order-success {
text-align: center;
}
</style>

271
mobile-web/src/page/shipping/order.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="order">
<headerNav title="确认订单"/>
<van-cell
<headerNav title="确认订单"/>
<van-cell
center
:border="false"
class="contact-card"
@ -13,12 +13,12 @@
</template>
<template v-else>
<strong>张三 138****6520</strong>
<div>广东省深圳市南山区科技园 </div>
<div>广东省深圳市南山区科技园</div>
</template>
</van-cell>
<div style="height:15px;"></div>
<div class="card" v-for="(product,i) in products" :key="i">
<product-card :product='product' />
<product-card :product='product'/>
</div>
<div style="height:15px;"></div>
<van-cell-group>
@ -32,15 +32,15 @@
</van-cell-group>
<div style="height:15px;"></div>
<van-cell-group class="total">
<van-cell title="优惠券" is-link value="抵扣¥5.00" />
<van-cell title="优惠券" is-link value="抵扣¥5.00"/>
</van-cell-group>
<div style="height:15px;"></div>
<van-cell-group class="total">
<van-cell title="商品总额" value="9.99" />
<van-cell title="运费" value="+ 0.00" />
<van-cell title="折扣" value="- 5.00" />
<van-cell title="实付金额" value="4.99" style="font-weight: 700;" />
<van-cell title="商品总额" value="9.99"/>
<van-cell title="运费" value="+ 0.00"/>
<van-cell title="折扣" value="- 5.00"/>
<van-cell title="实付金额" value="4.99" style="font-weight: 700;"/>
</van-cell-group>
<div style="height:50px;"></div>
@ -55,130 +55,155 @@
</template>
<script>
export default {
data() {
return {
type: "add1",
products: [
{
imageURL:
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
desc: "0.670kg/件，肉肉聚汇520g",
price: "59.80",
quantity: 2
},
{
imageURL:
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
desc: "1.320kg/件",
price: "65.80",
quantity: 1,
gift: [
{
title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
quantity: 2
},
{
title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
quantity: 1
}
]
},
{
imageURL:
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
desc: "0.670kg/件，肉肉聚汇520g",
price: "59.80",
quantity: 2
},
]
};
},
methods: {
onSubmit() {
this.$toast("点击按钮");
import {createOrder} from '../../api/order';
export default {
data() {
return {
type: "add1",
products: [
{
imageURL:
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
desc: "0.670kg/件，肉肉聚汇520g",
price: "59.80",
quantity: 2
},
{
imageURL:
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
desc: "1.320kg/件",
price: "65.80",
quantity: 1,
gift: [
{
title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
quantity: 2
},
{
title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
quantity: 1
}
]
},
{
imageURL:
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
desc: "0.670kg/件，肉肉聚汇520g",
price: "59.80",
quantity: 2
},
]
};
},
},
activated(){
//根据key名获取传递回来的参数，data就是map
this.$on('selectAddress', function(data){
methods: {
onSubmit() {
this.$toast("点击按钮");
const { skuId, quantity } = this.$route.query;
const userAddressId = 1;
const remark = '';
const orderItems = [{
skuId,
quantity,
}];
createOrder({
orderItems,
userAddressId,
remark,
})
},
},
activated() {
//根据key名获取传递回来的参数，data就是map
this.$on('selectAddress', function (data) {
//赋值给首页的附近医院数据模型
console.log(1);
}.bind(this));
},
};
}.bind(this));
},
};
</script>
<style lang="less">
.order {
font-size: 14px;
background: #f7f7f7;
.contact-card::before {
content: "";
left: 0;
right: 0;
bottom: 0;
height: 2px;
position: absolute;
background: -webkit-repeating-linear-gradient(
135deg,
#ff6c6c 0,
#ff6c6c 20%,
transparent 0,
transparent 25%,
#3283fa 0,
#3283fa 45%,
transparent 0,
transparent 50%
);
background: repeating-linear-gradient(
-45deg,
#ff6c6c 0,
#ff6c6c 20%,
transparent 0,
transparent 25%,
#3283fa 0,
#3283fa 45%,
transparent 0,
transparent 50%
);
background-size: 80px;
}
.total {
.van-cell__value {
color: red;
}
}
.order {
font-size: 14px;
background: #f7f7f7;
.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;
.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;
}
.price {
color: #e93b3d;
font-size: 10px;
span {
font-size: 16px;
.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>

375
mobile-web/src/page/user/order/list.vue
View File

@ -1,176 +1,249 @@
<template>
<div>
<headerNav title="我的订单"/>
<van-tabs v-model="active">
<van-tab title="全部">
<div v-for="(item,index) in list" :key="index">
<van-cell-group class="order-item" >
<van-panel :title="'订单：'+item.ordercode" :status="item.state" >
<div slot="header">
<van-cell class="title" :title="'订单：'+item.ordercode" :value="item.state" :to="'/user/order/info/'+item.orderid"/>
</div>
<div>
<router-link :to="'/user/order/info/'+item.orderid">
<div v-if="item.products.length==1" v-for="(product,i) in item.products" :key="i">
<product-card :product='product' />
</div>
<div v-if="item.products.length>1" class="more" >
<div class="item" v-for="(product,i) in item.products" :key="i">
<div >
<img :src="product.imageURL"/>
</div>
</div>
</div>
</router-link>
</div>
<div slot="footer">
<span class="total">总价：￥8154898.89</span>
<van-button size="small">确认收货</van-button>
<van-button size="small" type="danger">支付</van-button>
</div>
</van-panel>
</van-cell-group>
</div>
</van-tab>
<van-tab title="待付款">内容 2</van-tab>
<van-tab title="待收货">内容 3</van-tab>
<van-tab title="已完成">内容 4</van-tab>
<van-tab title="已取消">内容 5</van-tab>
<div>
<headerNav title="我的订单"/>
<van-tabs v-model="active" @change="onTabChange">
<van-tab title="全部"></van-tab>
<van-tab title="待付款"></van-tab>
<van-tab title="待收货"></van-tab>
<van-tab title="已完成"></van-tab>
<van-tab title="已取消"></van-tab>
</van-tabs>
</div>
<div v-for="(item,index) in list" :key="index">
<van-cell-group class="order-item">
<van-panel :title="'订单：'+item.ordercode" :status="item.state">
<div slot="header">
<van-cell class="title" :title="'订单：'+item.ordercode" :value="item.state"
:to="'/user/order/info/'+item.orderid"/>
</div>
<div>
<router-link :to="'/user/order/info/'+item.orderid">
<div v-if="item.products.length==1" v-for="(product,i) in item.products" :key="i">
<product-card :product='product'/>
</div>
<div v-if="item.products.length > 0" class="more">
<div class="item" v-for="(product,i) in item.products" :key="i">
<div>
<img :src="product.imageURL"/>
</div>
</div>
</div>
</router-link>
</div>
<div slot="footer">
<span class="total">总价：{{item.payAmount / 100}} 元</span>
<van-button size="small">确认收货</van-button>
<van-button size="small" type="danger">支付</van-button>
</div>
</van-panel>
</van-cell-group>
</div>
</div>
</template>
<script>
export default {
components:{
},
data(){
return{
active:0,
list:[
{
orderid:1,
ordercode:'4511248234235',
state:'待付款',
products:[
{
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'499',
quantity:2
},
{
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'499',
quantity:1
},
{
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'499',
quantity:2
},
{
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'499',
quantity:2
},
{
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'499',
quantity:2
},
]
},
{
orderid:2,
ordercode:'4511248234235',
state:'待收货',
products:[
{
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'499',
quantity:2
}
]
},
{
orderid:3,
ordercode:'4511248234235',
state:'已完成',
products:[
{
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'499',
quantity:2
}
]
},
{
orderid:4,
ordercode:'4511248234235',
state:'已取消',
products:[
{
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price:'499',
quantity:2
}
]
},
import {getOrderPage} from '../../../api/order';
export default {
components: {},
data() {
return {
active: 0,
list: [
{
orderid: 1,
ordercode: '4511248234235',
state: '待付款',
products: [
{
imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price: '499',
quantity: 2
},
{
imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price: '499',
quantity: 1
},
{
imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price: '499',
quantity: 2
},
{
imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price: '499',
quantity: 2
},
{
imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price: '499',
quantity: 2
},
]
}
}
}
},
{
orderid: 2,
ordercode: '4511248234235',
state: '待收货',
products: [
{
imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price: '499',
quantity: 2
}
]
},
{
orderid: 3,
ordercode: '4511248234235',
state: '已完成',
products: [
{
imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price: '499',
quantity: 2
}
]
},
{
orderid: 4,
ordercode: '4511248234235',
state: '已取消',
products: [
{
imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
price: '499',
quantity: 2
}
]
},
]
}
},
methods: {
onTabChange(index) {
console.log('onTabChange', index)
// status 和 tab index 对应的关系
const statusArray = [null, 1, 3, 4, 5];
// if (index === 0) {
// // 全部
// } else if (index === 1) {
// // 待付款 1
// } else if (index === 2) {
// // 待收货 3
// } else if (index === 3) {
// // 已完成 4
// } else if (index === 4) {
// // 取消 5
// }
this.queryOrderPage({
status: statusArray[index],
})
},
queryOrderPage(params) {
getOrderPage({
pageNo: 0,
pageSize: 10,
...params,
}).then(data => {
const {orders} = data;
const list = orders.map(order => {
const {orderItems} = order;
const products = orderItems.map(order => {
return {
imageURL: order.skuImage,
title: order.skuName,
price: order.price,
quantity: order.quantity,
};
});
return {
orderid: order.id,
ordercode: order.orderNo,
state: `${order.status}`,
products,
payAmount: order.payAmount,
};
});
this.list = list;
// console.log('list', list)
});
},
},
mounted() {
this.queryOrderPage()
},
}
</script>
<style lang="less">
.order-item{
.order-item {
margin-bottom: 10px;
font-size: 12px;
.title{
border-bottom: 1px solid #e5e5e5;
.van-cell__title{
flex: 2;
}
.van-cell__value{
color: red;
}
.title {
border-bottom: 1px solid #e5e5e5;
.van-cell__title {
flex: 2;
}
.van-cell__value {
color: red;
}
}
.van-panel__footer {
text-align: right;
border-bottom: 1px solid #e5e5e5;
text-align: right;
border-bottom: 1px solid #e5e5e5;
}
.van-button {
margin-left: 5px;
margin-left: 5px;
}
.total{
position: absolute;
top: 17px;
left: 15px;
font-size: 13px;
.total {
position: absolute;
top: 17px;
left: 15px;
font-size: 13px;
}
.more{
overflow-x: scroll;white-space: nowrap; -webkit-overflow-scrolling: touch; margin: 5px 0 5px 15px;
.item{
width: 90px; height:90px; margin-right: 10px;display: inline-block;
img{
width: 100%;
}
.more {
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
margin: 5px 0 5px 15px;
.item {
width: 90px;
height: 90px;
margin-right: 10px;
display: inline-block;
img {
width: 100%;
}
}
}
}
}
</style>