- 订单流程
This commit is contained in:
parent
6c50286477
commit
77c6edefb3
36
mobile-web/src/api/order.js
Normal file
36
mobile-web/src/api/order.js
Normal 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,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
@ -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,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',
|
||||
});
|
||||
}
|
@ -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,
|
||||
|
@ -1,22 +1,32 @@
|
||||
<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':'')" >
|
||||
<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">
|
||||
<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')" />
|
||||
<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':'')">
|
||||
<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 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>
|
||||
@ -26,21 +36,21 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getProduct} from "../../api/page.js";
|
||||
import {getProduct} from "../../api/page.js";
|
||||
|
||||
export default {
|
||||
name:'product',
|
||||
data () {
|
||||
export default {
|
||||
name: 'product',
|
||||
data() {
|
||||
return {
|
||||
productlist: []
|
||||
}
|
||||
},
|
||||
props:{
|
||||
data:Object
|
||||
props: {
|
||||
data: Object
|
||||
},
|
||||
created:function(){
|
||||
var id=this.data.PageSectionId;
|
||||
var data=this.data;
|
||||
created: function () {
|
||||
var id = this.data.PageSectionId;
|
||||
var data = this.data;
|
||||
var classname = "big";
|
||||
var aclass = "";
|
||||
switch (data.ParameterDictionary.type) {
|
||||
@ -67,13 +77,13 @@ export default {
|
||||
classname = "three";
|
||||
break;
|
||||
}
|
||||
data.classname=classname;
|
||||
data.aclass=aclass;
|
||||
data.classname = classname;
|
||||
data.aclass = aclass;
|
||||
getProduct(id).then(response => {
|
||||
this.productlist=response;
|
||||
this.productlist = response;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
@ -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("服务路由,未找到可用服务!");
|
||||
|
@ -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'),
|
||||
|
@ -3,7 +3,7 @@
|
||||
<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>
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
<!--</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>
|
||||
@ -66,7 +66,7 @@
|
||||
</van-cell-group>
|
||||
|
||||
<div class="goods-info">
|
||||
<p class="goods-info-title" >图文详情</p>
|
||||
<p class="goods-info-title">图文详情</p>
|
||||
<div v-html="spu.description"></div>
|
||||
</div>
|
||||
<van-goods-action>
|
||||
@ -165,12 +165,11 @@
|
||||
</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: {
|
||||
},
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
// this.skuData = skuData;
|
||||
return {
|
||||
@ -248,16 +247,25 @@ export default {
|
||||
Toast('暂无后续逻辑~');
|
||||
},
|
||||
showPromotion() {
|
||||
this.show=true;
|
||||
this.show = true;
|
||||
},
|
||||
showSku() { // 展示 sku 选择
|
||||
this.showBase=true;
|
||||
this.showBase = true;
|
||||
},
|
||||
onClickShowTag(){
|
||||
this.showTag=true;
|
||||
onClickShowTag() {
|
||||
this.showTag = true;
|
||||
},
|
||||
onBuyClicked(data) {
|
||||
this.$toast(JSON.stringify(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));
|
||||
@ -284,7 +292,7 @@ export default {
|
||||
};
|
||||
for (let j = 0; j < sku.attrs.length; j++) {
|
||||
let attr = sku.attrs[j];
|
||||
skuVO['attr_' + attr.attrId] =attr.attrValueId;
|
||||
skuVO['attr_' + attr.attrId] = attr.attrValueId;
|
||||
}
|
||||
vanSku.list.push(skuVO);
|
||||
// tree 规格
|
||||
@ -330,12 +338,13 @@ export default {
|
||||
this.initialSku.quantity = 1;
|
||||
});
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.goods {
|
||||
.goods {
|
||||
padding-bottom: 50px;
|
||||
|
||||
&-swipe {
|
||||
img {
|
||||
width: 7.5rem;
|
||||
@ -343,22 +352,27 @@ export default {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&-tag{
|
||||
|
||||
&-tag {
|
||||
font-size: 12px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
span{
|
||||
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
i{
|
||||
|
||||
i {
|
||||
color: red;
|
||||
margin-right: 3px;
|
||||
}
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 12px;
|
||||
margin-right: 3px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
line-height: 18px;
|
||||
padding-top: 10px;
|
||||
@ -368,38 +382,53 @@ export default {
|
||||
font-weight: 700;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
&-subtit{
|
||||
|
||||
&-subtit {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
&-price {
|
||||
color: #f44;font-size: 20px;
|
||||
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-title {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin: 10px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
&-info p{
|
||||
|
||||
&-info p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-block-end: 0;
|
||||
margin-block-start: 0;
|
||||
display: grid;
|
||||
}
|
||||
&-info img{
|
||||
|
||||
&-info img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
35
mobile-web/src/page/shipping/order-success.vue
Normal file
35
mobile-web/src/page/shipping/order-success.vue
Normal 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>
|
@ -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,7 +55,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
import {createOrder} from '../../api/order';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: "add1",
|
||||
@ -100,22 +103,39 @@ export default {
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$toast("点击按钮");
|
||||
const { skuId, quantity } = this.$route.query;
|
||||
const userAddressId = 1;
|
||||
const remark = '';
|
||||
|
||||
const orderItems = [{
|
||||
skuId,
|
||||
quantity,
|
||||
}];
|
||||
|
||||
createOrder({
|
||||
orderItems,
|
||||
userAddressId,
|
||||
remark,
|
||||
})
|
||||
},
|
||||
},
|
||||
activated(){
|
||||
|
||||
|
||||
activated() {
|
||||
//根据key名获取传递回来的参数,data就是map
|
||||
this.$on('selectAddress', function(data){
|
||||
this.$on('selectAddress', function (data) {
|
||||
//赋值给首页的附近医院数据模型
|
||||
console.log(1);
|
||||
}.bind(this));
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.order {
|
||||
.order {
|
||||
font-size: 14px;
|
||||
background: #f7f7f7;
|
||||
|
||||
.contact-card::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
@ -147,6 +167,7 @@ export default {
|
||||
);
|
||||
background-size: 80px;
|
||||
}
|
||||
|
||||
.total {
|
||||
.van-cell__value {
|
||||
color: red;
|
||||
@ -156,17 +177,20 @@ export default {
|
||||
.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;
|
||||
@ -175,10 +199,11 @@ export default {
|
||||
.price {
|
||||
color: #e93b3d;
|
||||
font-size: 10px;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -1,23 +1,29 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<headerNav title="我的订单"/>
|
||||
<van-tabs v-model="active">
|
||||
<van-tab 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 v-for="(item,index) in list" :key="index">
|
||||
<van-cell-group class="order-item" >
|
||||
<van-panel :title="'订单:'+item.ordercode" :status="item.state" >
|
||||
<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"/>
|
||||
<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' />
|
||||
<product-card :product='product'/>
|
||||
</div>
|
||||
<div v-if="item.products.length>1" class="more" >
|
||||
<div v-if="item.products.length > 0" class="more">
|
||||
<div class="item" v-for="(product,i) in item.products" :key="i">
|
||||
<div >
|
||||
<div>
|
||||
<img :src="product.imageURL"/>
|
||||
</div>
|
||||
</div>
|
||||
@ -25,126 +31,182 @@
|
||||
</router-link>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<span class="total">总价:¥8154898.89</span>
|
||||
<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>
|
||||
|
||||
</van-tab>
|
||||
<van-tab title="待付款">内容 2</van-tab>
|
||||
<van-tab title="待收货">内容 3</van-tab>
|
||||
<van-tab title="已完成">内容 4</van-tab>
|
||||
<van-tab title="已取消">内容 5</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components:{
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
active:0,
|
||||
|
||||
list:[
|
||||
import {getOrderPage} from '../../../api/order';
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
|
||||
list: [
|
||||
{
|
||||
orderid:1,
|
||||
ordercode:'4511248234235',
|
||||
state:'待付款',
|
||||
products:[
|
||||
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: 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: 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
|
||||
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:[
|
||||
orderid: 2,
|
||||
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: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
orderid:3,
|
||||
ordercode:'4511248234235',
|
||||
state:'已完成',
|
||||
products:[
|
||||
orderid: 3,
|
||||
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: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
orderid:4,
|
||||
ordercode:'4511248234235',
|
||||
state:'已取消',
|
||||
products:[
|
||||
orderid: 4,
|
||||
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: 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{
|
||||
|
||||
.title {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
.van-cell__title{
|
||||
.van-cell__title {
|
||||
flex: 2;
|
||||
}
|
||||
.van-cell__value{
|
||||
|
||||
.van-cell__value {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
@ -154,23 +216,34 @@ export default {
|
||||
text-align: right;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.total{
|
||||
|
||||
.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{
|
||||
|
||||
.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>
|
||||
|
Loading…
Reference in New Issue
Block a user