799 lines
24 KiB
Vue
799 lines
24 KiB
Vue
<template>
|
||
<view class="my-order v12-mx-2" ref="container" @click="handleBody">
|
||
<view class="m-search-wrap v12-mb-2 v12-mt-3">
|
||
<u-search placeholder="请输入商品名/订单号" shape="round" :inputStyle="inputStyle" :showAction="false" bgColor="#FFF" v-model="keyword" @search="changeType"></u-search>
|
||
</view>
|
||
<view class="m-tab-warp">
|
||
<u-tabs
|
||
lineHeight="0"
|
||
lineColor="#FF564A"
|
||
:activeStyle="activeStyle"
|
||
:inactiveStyle="inactiveStyle"
|
||
:current="type"
|
||
:list="tabList"
|
||
@click="tabChange">
|
||
</u-tabs>
|
||
</view>
|
||
<!-- <u-tabs lineColor="#FF564A" activeStyle="#FF564A" inactiveStyle="#C2C5CC" :current="type" :list="tabList"
|
||
@click="tabChange"></u-tabs> -->
|
||
|
||
<view class="list v12-ma-0" style="padding: 0rpx 0 30rpx;">
|
||
<view class="item" v-for="(order,orderListIndex) in orderList" :key="orderListIndex">
|
||
<view class="shop-info flex jc-between ai-center" v-if="order.merName" @click="goStore(order)">
|
||
<view class="flex ai-center">
|
||
<image :src="webUrl+'/orderIcon/shop.png'" style="width: 32rpx;height: 32rpx"/>
|
||
<text class="name v12-font-weight-400 v12-dark-text v12-font-24">{{ order.merName }}</text>
|
||
<image :src="webUrl+'/orderIcon/arrow.png'" style="width: 24rpx;height: 24rpx; margin-top: 5rpx"/>
|
||
</view>
|
||
<view class="flex ai-center">
|
||
<image :src="webUrl+'/orderIcon/map.png'" style="width: 28rpx;height: 28rpx"/>
|
||
<text class="address v12-dark-text v12-font-bold v12-font-24">{{ order.merCityName }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="title acea-row row-between-wrapper" style="padding: 0 0 0 30rpx !important;">
|
||
<view class="acea-row row-middle">
|
||
<span class="sign cart-color acea-row row-center-wrapper v12-priamry-text v12-priamry-border v12-radius-40" v-if="order.combinationId > 0">拼团</span>
|
||
<span class="sign cart-color acea-row row-center-wrapper v12-priamry-text v12-priamry-border v12-radius-40" v-if="order.seckillId > 0">秒杀</span>
|
||
<span class="sign cart-color acea-row row-center-wrapper v12-priamry-text v12-priamry-border v12-radius-40" v-if="order.bargainId > 0">砍价</span>
|
||
<span class="sign cart-color acea-row row-center-wrapper v12-priamry-text v12-priamry-border v12-radius-40" v-if="order.storeId > 0">门店</span>
|
||
订单号:{{ order.orderId }}
|
||
</view>
|
||
<view class="font-color-white statusTag v12-primary" v-if="order.isTickets===1 && order._status._type === 1">
|
||
待核销
|
||
</view>
|
||
<view class="font-color-white statusTag v12-primary" v-else>{{ getStatus(order) }}</view>
|
||
</view>
|
||
<view @click="goOrderDetails(order)">
|
||
<view class="item-info acea-row row-between row-top" v-for="(cart,cartInfoIndex) in order.cartInfo"
|
||
:key="cartInfoIndex">
|
||
<view class="pictrue">
|
||
<image
|
||
v-if="cart.combinationId === 0 && cart.bargainId === 0 &&cart.seckillId === 0"
|
||
:src="cart.productInfo.image"
|
||
@click.stop="gotoGoodDetail(cart, 1, { id: cart.productInfo.id })"
|
||
/>
|
||
<image
|
||
v-else-if="cart.combinationId > 0"
|
||
:src="cart.productInfo.image"
|
||
@click.stop="gotoGoodDetail(cart, 2, { id: cart.combinationId })"
|
||
/>
|
||
<image
|
||
v-else-if="cart.bargainId > 0"
|
||
:src="cart.productInfo.image"
|
||
@click.stop="gotoGoodDetail(cart, 3, { id: cart.bargainId })"
|
||
/>
|
||
<image
|
||
v-else-if="cart.seckillId > 0"
|
||
:src="cart.productInfo.image"
|
||
@click.stop="gotoGoodDetail(cart, 4, { id: cart.seckillId })"
|
||
/>
|
||
</view>
|
||
<view class="text">
|
||
<view class="acea-row name-wrap">
|
||
<view class="name more-t v12-font-bold">{{ cart.productInfo.storeName }}</view>
|
||
<view class="money">
|
||
<view>
|
||
<text class="v12-font-22">￥</text>
|
||
<text class="v12-font-28">{{ force2Decimal(cart.truePrice) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="acea-row attr-wrap ">
|
||
<view
|
||
v-if="cart.productInfo.attrInfo"
|
||
class="attr v12-secondary-dark-text v12-font-24 "
|
||
>
|
||
{{ cart.productInfo.attrInfo.sku }}
|
||
</view>
|
||
<view class="v12-dark-text v12-font-22">x{{ cart.cartNum }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="totalPrice acea-row row-between row-middle">
|
||
<view class="" v-if="order.createTime"><span class="orderTime v12-font-24 v12-dark1-text">{{ order.createTime }}</span></view>
|
||
<view class="v12-font-24 v12-dark1-text">共{{ order.totalNum || 0 }}件商品，
|
||
<text class="v12-dark-text v12-font-28 v12-font-bold">
|
||
总金额
|
||
</text>
|
||
<text class="v12-font-22 v12-primary-text v12-font-bold">
|
||
￥
|
||
</text>
|
||
<text class="money font-color-lightred v12-font-28 v12-primary-text v12-font-bold">{{ force2Decimal(order.payPrice) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="bottom flex jc-between ai-center">
|
||
<view class="group-btn"
|
||
v-if="(Number(order._status._type) === 2 || Number(order._status._type) === 3) &&
|
||
order.isTickets === 0">
|
||
<text class="btn-more v12-font-28 v12-font-bold" @click.stop="tapShowMore(order,orderListIndex)">更多</text>
|
||
<view class="group-float" v-show="order.showMore">
|
||
<view class="btn btn-service flex jc-center ai-center v12-font-24" @click="goRoom(order)"
|
||
v-if="order.merName">联系商家
|
||
</view>
|
||
<view class="btn flex jc-center ai-center v12-font-24" @click="goRefund(order)">申请退款</view>
|
||
</view>
|
||
</view>
|
||
<template v-else>
|
||
<view class="v12-justify-between" style="width: 100%">
|
||
<view>
|
||
<view class="bnt service" @click="goRoom(order)" v-if="order.merName && order._status._type != 0 && Number(order._status._type) !== 9">联系商家</view>
|
||
</view>
|
||
<view class="v12-justify-between">
|
||
<view class="bnt service" @click="goOrderDetails(order)" v-if="['-1','-2','-3'].includes(order._status._type)">查看详情</view>
|
||
<view class="bnt service" @click="delOrder(order)" v-if="['9'].includes(order._status._type)">删除订单</view>
|
||
<!-- <view class="bnt v12-primary-text v12-primary-border" @click="takeOrder(order)" v-if="['-2','-3'].includes(order._status._type)">确认收货</view> -->
|
||
</view>
|
||
</view>
|
||
<!-- <view v-else></view> -->
|
||
</template>
|
||
|
||
<view class="flex">
|
||
<template v-if="order._status._type == 0">
|
||
<view class="bnt cancelBnt v12-dark-text v12-dark-border" @click="cancelOrder(order)">取消订单</view>
|
||
<view class="bnt cancelBnt v12-dark-text v12-dark-border" @click="addressTap(order)">修改地址</view>
|
||
<view class="bnt bg-color-lightred v12-white v12-primary-text v12-primary-border v12-radius-40" @click="subscribePay(order)">立即付款</view>
|
||
</template>
|
||
<template v-if="(order._status._type == 1 ) && order.isTickets==0">
|
||
<view class="bnt bg-color-lightred v12-white v12-primary-text v12-primary-border v12-radius-40" @click="goOrderDetails(order)">查看详情</view>
|
||
</template>
|
||
<template v-if="order._status._type == 1 && order.isTickets == 1">
|
||
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">立即核销</view>
|
||
</template>
|
||
<template v-if="order._status._type == 2 && order.isTickets == 0">
|
||
<view class="bnt default" v-if="order.isExtendedDelivery==0"
|
||
@click="toDelay(order.orderId)">延长收货
|
||
</view>
|
||
<view class="bnt default v12-radius-40" @click="goLogistics(order)">查看物流</view>
|
||
<view class="bnt bg-color-lightred v12-white v12-primary-text v12-primary-border v12-radius-40" @click="takeOrder(order)">确认收货</view>
|
||
</template>
|
||
<template v-if="order._status._type == 3">
|
||
<view class="bnt bg-color-lightred v12-white v12-primary-text v12-primary-border v12-radius-40" @click="goOrderDetails(order)">去评价</view>
|
||
</template>
|
||
<template v-if="order._status._type === 4">
|
||
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">查看订单</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="v12-px-3 v12-pb-4" v-if="order._status._type == 1">
|
||
<view class="v12-font-22 v12-secondary-dark-text order-tips" v-if="order.isFastPost !== 0">商家已接收您的订单，支付成功后预计{{ order.isFastPost === 1 ? 48 : 72 }}小时内发货</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<u-modal
|
||
:show="showExtend"
|
||
title="确认延长收货时间？"
|
||
content='每笔订单只能延长一次哦'
|
||
showCancelButton
|
||
@cancel="showExtend=false"
|
||
@confirm="doneDelay">
|
||
</u-modal>
|
||
<view class="noCart" v-if="orderList.length === 0 && page > 1">
|
||
<view class="pictrue">
|
||
<image :src="webUrl+'/20240102232734472795.png'"/>
|
||
</view>
|
||
</view>
|
||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
|
||
<passkeyborad
|
||
:money="orderInfo.payPrice"
|
||
showMoney
|
||
:show="isShowPayPwdPop"
|
||
ref='payPwdPop'
|
||
@close="pwdPopClose"
|
||
@finish="pwdPopFinish"
|
||
></passkeyborad>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard'
|
||
import {getOrderData, getOrderList, orderDelay, editAddress } from "@/api/order";
|
||
import {cancelOrderHandle, payOrderHandle, takeOrderHandle, yuePayOrderHandle, delOrderHandle} from "@/libs/order";
|
||
import Loading from "@/components/Loading";
|
||
import Payment from "@/components/Payment";
|
||
import {mapGetters} from "vuex";
|
||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||
|
||
export default {
|
||
name: "MyOrder",
|
||
mixins: [pageListenMixins],
|
||
data() {
|
||
return {
|
||
isShowPayPwdPop: false,
|
||
inputStyle: {
|
||
height: '64rpx',
|
||
},
|
||
activeStyle: {
|
||
color: '#C52733',
|
||
background: 'rgba(197,39,51,0.1)',
|
||
borderRadius: '30rpx',
|
||
padding: '5rpx 20rpx',
|
||
fontWeight: '600'
|
||
},
|
||
inactiveStyle: {
|
||
height: '48rpx !important',
|
||
background: '#fff !important',
|
||
borderRadius: '30rpx !important',
|
||
color: '#333333 !important',
|
||
padding: '5rpx 15rpx',
|
||
fontSize: '28rpx !important',
|
||
lineHeight: '48rpx !important'
|
||
},
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
tabList: [
|
||
{name: '全部'},
|
||
{name: '待付款'},
|
||
{name: '待发货'},
|
||
{name: '待收货/待核销'},
|
||
{name: '退款/售后'},
|
||
{name: '待评价'},
|
||
{name: '已完成'}],
|
||
offlinePayStatus: 2,
|
||
orderData: {},
|
||
type: 0,
|
||
page: 1,
|
||
limit: 20,
|
||
loaded: false,
|
||
loading: false,
|
||
orderList: [],
|
||
pay: false,
|
||
payType: ["yue", "weixin"],
|
||
from: this.$deviceType,
|
||
orderInfo: {},
|
||
showExtend: false,
|
||
delayId: null,
|
||
pageKeyId: Object.freeze('userOrderIndex'),
|
||
keyword: '',
|
||
_orderId: ''
|
||
};
|
||
},
|
||
components: {
|
||
Loading,
|
||
Payment,
|
||
passkeyborad
|
||
},
|
||
computed: mapGetters(["userInfo"]),
|
||
onShow() {
|
||
const _this = this
|
||
const chooseAddress = uni.getStorageSync('chooseAddress') || {}
|
||
const addressId = chooseAddress.id || ''
|
||
// 监听到选择收货地址
|
||
if (addressId) {
|
||
uni.setStorageSync('chooseAddress', {})
|
||
uni.showModal({
|
||
title:'确定修改地址吗?',
|
||
content: '',
|
||
showCancel: true,
|
||
cancelText: '取消',
|
||
confirmText: '确认',
|
||
success:(success)=>{
|
||
if(success.confirm) {
|
||
uni.showLoading()
|
||
editAddress({
|
||
addressId,
|
||
orderId: _this._orderId
|
||
}).then(res => {
|
||
uni.showToast({
|
||
icon: 'success',
|
||
title: '修改成功！'
|
||
})
|
||
_this.changeType()
|
||
}).finally(() => {
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
},
|
||
cancel: () => {
|
||
_this.changeType()
|
||
},
|
||
complete:(complete)=>{
|
||
_this._orderId = ''
|
||
}
|
||
})
|
||
} else {
|
||
_this.type = _this.type || parseInt(_this.$yroute.query.type) || 0;
|
||
_this.changeType(_this.type);
|
||
}
|
||
},
|
||
methods: {
|
||
handleBody() {
|
||
this.orderList.forEach((e) => {
|
||
e.showMore = false
|
||
})
|
||
this.$forceUpdate()
|
||
},
|
||
delOrder(order) {
|
||
delOrderHandle(order.orderId).then(() => {
|
||
// this.goBack()
|
||
this.page = 1
|
||
this.orderList = [];
|
||
this.getOrderListReq()
|
||
})
|
||
},
|
||
goStore(order) {
|
||
if(!order.hotelId) {
|
||
uni.showToast({
|
||
title: '未找到相关店铺！'
|
||
})
|
||
return
|
||
}
|
||
this.$yrouter.push({
|
||
path: "/pagesInn/inn/innHome",
|
||
query: {
|
||
id: order.hotelId
|
||
}
|
||
});
|
||
},
|
||
async toYuePay(payPwd) {
|
||
const that = this;
|
||
//网络请求
|
||
await yuePayOrderHandle(this.orderInfo.orderId, "yue", that.from, payPwd);
|
||
that.changeType();
|
||
this.payPassword = "";
|
||
},
|
||
pwdPopClose() {
|
||
this.isShowPayPwdPop = false;
|
||
},
|
||
pwdPopFinish(payPwd) {
|
||
this.payPassword = payPwd;
|
||
|
||
this.toYuePay(payPwd);
|
||
|
||
this.isShowPayPwdPop = false;
|
||
},
|
||
subscribePay(order) {
|
||
this.orderInfo = order
|
||
uni.requestSubscribeMessage({
|
||
tmplIds: ['7O3wKw7_D4t7yfSOlvecKuOQP8QEPY88uBx2FJg43HE', 'TSmTnGibZ8IxWCiRWOvLxha6-0u7tE-V1-WbDCiPkKU', '9Q6xLHe6HyjkU5Zn5k_2zxYPf2y4MxVyUbOSW8pcZRU'],
|
||
complete: () => this.pay = true
|
||
})
|
||
},
|
||
addressTap(order) {
|
||
this._orderId = order.orderId
|
||
this.$yrouter.push({
|
||
path: "/pages/user/address/AddressManagement/index",
|
||
query: {
|
||
choosMode: 1
|
||
}
|
||
});
|
||
},
|
||
force2Decimal(v) {
|
||
return this.$force2Decimal(v);
|
||
},
|
||
goRoom(order) {
|
||
const params = {
|
||
goodsId: order.cartInfo[0].productId,
|
||
goodsName: order.cartInfo[0].productInfo.storeName,
|
||
skuStr: order.cartInfo[0].productInfo.attrInfo.sku,
|
||
price: order.cartInfo[0].productInfo.attrInfo.price,
|
||
seckillId: order.cartInfo[0].seckillId,
|
||
cover: order.cartInfo[0].productInfo.attrInfo.image,
|
||
goodsData: '',
|
||
seckillData: ''
|
||
}
|
||
uni.navigateTo({
|
||
url: `/pkg_common/views/room?id=${order.merId}&name=${order.merName}¶ms=${JSON.stringify(params)}`
|
||
})
|
||
},
|
||
goRefund(order) {
|
||
// fix bug#1631
|
||
if (this.type === 4 || parseInt(order._status._type) === 3) {
|
||
// 打开售后的目的就是开启已完成/待评价订单的退款功能，确认打开售后之后，小程序用户再点击申请退款，就可以进入退款申请填写页面，正常走退款流程，提交退款申请以后，订单状态变为退款中
|
||
if (order.refundSystemStatus === 0) {
|
||
uni.showToast({
|
||
title: '订单已收货，如需退款请联系商家',
|
||
mask: false,
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pkg_orders/views/refund?id=${order.orderId}`
|
||
})
|
||
}
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pkg_orders/views/refund?id=${order.orderId}`
|
||
})
|
||
}
|
||
},
|
||
goLogistics(order) {
|
||
this.$yrouter.push({
|
||
path: "/pages/order/Logistics/index",
|
||
query: {
|
||
id: order.orderId
|
||
}
|
||
});
|
||
},
|
||
goOrderDetails(order) {
|
||
this.$yrouter.push({
|
||
path: "/pages/order/OrderDetails/index",
|
||
query: {
|
||
id: order.orderId
|
||
}
|
||
});
|
||
},
|
||
setOfflinePayStatus: function (status) {
|
||
let that = this;
|
||
that.offlinePayStatus = status;
|
||
if (status === 1) {
|
||
if (that.payType.indexOf("offline") < 0) {
|
||
that.payType.push("offline");
|
||
}
|
||
}
|
||
},
|
||
gotoGoodDetail(cart, type, query){
|
||
// isProductStillExist:0-不存在,1-存在
|
||
const isProductStillExist = cart.isProductStillExist || 0
|
||
if (isProductStillExist === 0) {
|
||
this.$dialog.toast({ mes: '商品已下架' })
|
||
return
|
||
}
|
||
let path = ''
|
||
switch(type) {
|
||
case 1:
|
||
path = '/pages/shop/GoodsCon/index'
|
||
break
|
||
case 2:
|
||
path = '/pages/activity/GroupDetails/index'
|
||
break
|
||
case 3:
|
||
path = '/pages/activity/DargainDetails/index'
|
||
break
|
||
case 4:
|
||
path = '/pages/activity/SeckillDetails/index'
|
||
break
|
||
}
|
||
this.$yrouter.push({ path, query })
|
||
},
|
||
getOrderData() {
|
||
getOrderData().then(res => {
|
||
this.orderData = res.data;
|
||
});
|
||
},
|
||
takeOrder(order) {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '是否确认收货?',
|
||
content: '',
|
||
showCancel: true,
|
||
cancelText: '取消',
|
||
confirmText: '确认',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
takeOrderHandle(order.orderId).finally(() => {
|
||
that.reload();
|
||
that.getOrderData();
|
||
});
|
||
} else if (res.cancel) {
|
||
}
|
||
}
|
||
});
|
||
},
|
||
reload() {
|
||
this.changeType(this.type);
|
||
},
|
||
tabChange(item) {
|
||
|
||
|
||
this.type = item.index
|
||
this.changeType();
|
||
},
|
||
changeType() {
|
||
this.orderList = [];
|
||
this.page = 1;
|
||
this.loaded = false;
|
||
this.loading = false;
|
||
this.getOrderListReq();
|
||
},
|
||
getOrderListReq() {
|
||
if (this.loading || this.loaded) return;
|
||
this.loading = true;
|
||
const types = {
|
||
0: 0,
|
||
1: 1,
|
||
2: 2,
|
||
3: 3,
|
||
4: -3,
|
||
5: 4,
|
||
6: 5,
|
||
}
|
||
const type = types[this.type]
|
||
const {
|
||
page,
|
||
limit,
|
||
keyword
|
||
} = this;
|
||
getOrderList({
|
||
page,
|
||
limit,
|
||
type,
|
||
keyword
|
||
}).then(res => {
|
||
this.orderList = this.orderList.concat(res.data);
|
||
if (this.orderList.length > 0) {
|
||
this.orderList.forEach(item => {
|
||
item.showMore = false;
|
||
})
|
||
}
|
||
this.page++;
|
||
this.loaded = res.data.length < this.limit;
|
||
this.loading = false;
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
// console.log('???',this.loading);
|
||
});
|
||
},
|
||
tapShowMore(order, index) {
|
||
order.showMore = !order.showMore;
|
||
this.$set(this.orderList, index, order);
|
||
},
|
||
getStatus(order) {
|
||
const type = Number(order._status._type);
|
||
let status = "";
|
||
switch (type) {
|
||
case 0:
|
||
status = "待付款";
|
||
break;
|
||
case 1:
|
||
status = "待发货";
|
||
break;
|
||
case 2:
|
||
status = "待收货";
|
||
break;
|
||
case 3:
|
||
status = "待评价";
|
||
break;
|
||
case 4:
|
||
status = "已完成";
|
||
break;
|
||
case -1:
|
||
status = "退款中";
|
||
break;
|
||
case -2:
|
||
status = "退款成功";
|
||
break;
|
||
case -3:
|
||
status = "退款失败";
|
||
break;
|
||
case 9:
|
||
status = "已取消";
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
return status;
|
||
},
|
||
cancelOrder(order) {
|
||
cancelOrderHandle(order.orderId)
|
||
.then(() => {
|
||
this.getOrderData();
|
||
this.orderList.splice(this.orderList.indexOf(order), 1);
|
||
})
|
||
.catch(() => {
|
||
this.reload();
|
||
});
|
||
},
|
||
paymentTap: function (order) {
|
||
const that = this;
|
||
if (
|
||
!(order.combinationId > 0 || order.bargainId > 0 || order.seckillId > 0)
|
||
) {
|
||
that.setOfflinePayStatus(order.offlinePayStatus);
|
||
}
|
||
this.pay = true;
|
||
this.toPay = type => {
|
||
payOrderHandle(order.orderId, type, that.from)
|
||
.then(() => {
|
||
const type = parseInt(this.$yroute.query.type) || 0;
|
||
that.changeType(type);
|
||
that.getOrderData();
|
||
})
|
||
.catch(() => {
|
||
const type = parseInt(that.$yroute.query.type) || 0;
|
||
that.changeType(type);
|
||
that.getOrderData();
|
||
});
|
||
};
|
||
},
|
||
toPay(type) {
|
||
const that = this;
|
||
console.log(type, "支付方式");
|
||
//余额支付需要输入支付密码
|
||
if (type == "yue") {
|
||
this.isShowPayPwdPop = true;
|
||
return;
|
||
} else {
|
||
payOrderHandle(this.orderInfo.orderId, type, that.from);
|
||
}
|
||
},
|
||
|
||
toDelay(id) {
|
||
this.delayId = id;
|
||
this.showExtend = true;
|
||
},
|
||
doneDelay() {
|
||
orderDelay(this.delayId).then(() => {
|
||
this.showExtend = false;
|
||
this.reload()
|
||
});
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
!this.loading && this.getOrderListReq();
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
|
||
.my-order .u-tabs{
|
||
background-color: transparent !important;
|
||
position: sticky !important;
|
||
}
|
||
.my-order .u-tabs__wrapper__nav__item{
|
||
padding: 0 8rpx !important;
|
||
}
|
||
.my-order .u-search__content{
|
||
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1);
|
||
}
|
||
</style>
|
||
<style scoped lang="less">
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
.order-tips{
|
||
height: 44rpx;
|
||
background: rgba(0,0,0,0.05);
|
||
border-radius: 40rpx;
|
||
padding: 5rpx 24rpx;
|
||
line-height: 44rpx;
|
||
}
|
||
.m-tab-warp{
|
||
position: sticky;
|
||
top: 0;
|
||
background-color: #f5f5f5;
|
||
}
|
||
/deep/ .u-tabs {
|
||
position: fixed;
|
||
z-index: 1;
|
||
background-color: #fff;
|
||
left: 0;
|
||
top: 0
|
||
}
|
||
|
||
.list {
|
||
.item:first-child{
|
||
margin-top: 0;
|
||
}
|
||
.item {
|
||
margin: 30rpx 0;
|
||
border-radius: 12rpx;
|
||
|
||
.shop-info {
|
||
padding: 20rpx 16rpx;
|
||
// border-bottom: 2rpx solid #eee;
|
||
|
||
.name {
|
||
margin-left: 6rpx;
|
||
color: #333;
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.address {
|
||
margin-left: 4rpx;
|
||
color: #FD574B;
|
||
font-size: 22rpx;
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.item-info {
|
||
margin: 0 30rpx;
|
||
padding: 0 0 0 0;
|
||
}
|
||
|
||
.totalPrice {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.bottom {
|
||
border-top: 0rpx solid #eee;
|
||
|
||
.bnt {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 128rpx;
|
||
height: 44rpx;
|
||
border-radius: 40rpx;
|
||
font-size: 24rpx;
|
||
// font-weight: bold;
|
||
border: 1px solid #707070;
|
||
color: #333;
|
||
padding: 1px 3px;
|
||
}
|
||
|
||
.service {
|
||
border: 1px solid #707070;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.noCart {
|
||
margin-top: 0.17 * 100rpx;
|
||
padding-top: 0.1 * 100rpx;
|
||
}
|
||
|
||
.noCart .pictrue {
|
||
width: 408rpx;
|
||
height: 414rpx;
|
||
overflow: hidden;
|
||
margin: 0.7 * 100rpx auto 0.5 * 100rpx auto;
|
||
}
|
||
|
||
.noCart .pictrue image {
|
||
width: 408rpx;
|
||
height: 414rpx;
|
||
}
|
||
|
||
.statusTag {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
padding: 4rpx 20rpx;
|
||
background: #0DC5C5;
|
||
height: 38rpx;
|
||
line-height: 38rpx;
|
||
border-radius: 60rpx 0px 0px 60rpx;
|
||
}
|
||
|
||
.group-btn {
|
||
position: relative;
|
||
|
||
.btn-more {
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.group-float {
|
||
position: absolute;
|
||
width: 196rpx;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
|
||
padding: 0 20rpx;
|
||
background: #fff;
|
||
|
||
.btn {
|
||
box-sizing: border-box;
|
||
padding: 20rpx 0;
|
||
color: #333;
|
||
font-size: 32rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.btn-service {
|
||
border-bottom: 1rpx solid #F0F0F0;
|
||
}
|
||
}
|
||
}
|
||
.my-order .list .item .item-info .name-wrap,
|
||
.my-order .list .item .item-info .attr-wrap {
|
||
justify-content: space-between;
|
||
}
|
||
.my-order .list .item .item-info .attr-wrap {
|
||
margin: 10rpx 0 0 0;
|
||
}
|
||
.my-order .list .item .item-info .text .name {
|
||
width: calc(100% - 160rpx);
|
||
}
|
||
</style>
|