liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style(订单)：UI样式调整

Browse Source
This commit is contained in:
linxi
2024-09-05 14:58:42 +08:00
parent 1a231d6715
commit 75290bf1b4
2 changed files with 109 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/order/MyOrder/index.vue
+104 -40
View File
@@ -1,19 +1,33 @@
<template>
<view class="my-order" ref="container">
<view class="my-order v12-mx-2" ref="container">
<!-- <view class="m-search-wrap v12-mb-2 v12-mt-3">
<u-search placeholder="请输入商品名/订单号" shape="round" :inputStyle="inputStyle" :showAction="false" bgColor="#FFF"></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> -->
<u-tabs lineColor="#FF564A" activeStyle="#FF564A" inactiveStyle="#C2C5CC" :current="type" :list="tabList"
@click="tabChange"></u-tabs>
<view class="list" style="padding: 80rpx 0 30rpx;">
<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">
<view class="flex ai-center">
<image :src="webUrl+'/20221008152431059973.png'" style="width: 40rpx;height: 40rpx"/>
<text class="name">{{ order.merName }}</text>
<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+'/20221008152418897577.png'" style="width: 24rpx;height: 24rpx"/>
<text class="address">{{ order.merCityName }}</text>
<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>
@@ -26,10 +40,10 @@
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.storeId > 0">门店</span>
订单号:{{ order.orderId }}
</view>
<view class="font-color-white statusTag" v-if="order.isTickets===1 && order._status._type === 1">
<view class="font-color-white statusTag v12-primary" v-if="order.isTickets===1 && order._status._type === 1">
待核销
</view>
<view class="font-color-white statusTag" v-else>{{ getStatus(order) }}</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"
@@ -58,39 +72,48 @@
</view>
<view class="text">
<view class="acea-row name-wrap">
<view class="name more-t">{{ cart.productInfo.storeName }}</view>
<view class="name more-t v12-font-bold">{{ cart.productInfo.storeName }}</view>
<view class="money">
<view>￥{{ force2Decimal(cart.truePrice) }}</view>
<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 class="acea-row attr-wrap ">
<view
v-if="cart.productInfo.attrInfo"
class="attr"
class="attr v12-secondary-dark-text v12-font-24 "
>
规格：{{ cart.productInfo.attrInfo.sku }}
</view>
<view>x{{ cart.cartNum }}</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">{{ order.createTime }}</span></view>
<view class="">共{{ order.totalNum || 0 }}件商品，总金额
<text class="money font-color-lightred">￥{{ force2Decimal(order.payPrice) }}</text>
<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" @click="tapShowMore(order,orderListIndex)">更多</text>
<text class="btn-more v12-font-24" @click="tapShowMore(order,orderListIndex)">更多</text>
<view class="group-float" v-show="order.showMore">
<view class="btn btn-service flex jc-center ai-center" @click="goRoom(order)"
<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" @click="goRefund(order)">申请退款</view>
<view class="btn flex jc-center ai-center v12-font-24" @click="goRefund(order)">申请退款</view>
</view>
</view>
<template v-else>
@@ -100,11 +123,11 @@
<view class="flex">
<template v-if="order._status._type == 0">
<view class="bnt cancelBnt" @click="cancelOrder(order)">取消订单</view>
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">立即付款</view>
<view class="bnt cancelBnt " @click="cancelOrder(order)">取消订单</view>
<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._status._type == 9) && order.isTickets==0">
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">查看详情</view>
<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>
@@ -113,11 +136,11 @@
<view class="bnt default" v-if="order.isExtendedDelivery==0"
@click="toDelay(order.orderId)">延长收货
</view>
<view class="bnt default" @click="goLogistics(order)">查看物流</view>
<view class="bnt bg-color-lightred" @click="takeOrder(order)">确认收货</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" @click="goOrderDetails(order)">去评价</view>
<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>
@@ -152,6 +175,25 @@ export default {
mixins: [pageListenMixins],
data() {
return {
inputStyle: {
height: '64rpx',
},
activeStyle: {
color: '#C52733',
background: 'rgba(197,39,51,0.39)',
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: '全部'},
@@ -428,12 +470,28 @@ export default {
}
};
</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;
}
.m-tab-warp{
position: sticky;
top: 0;
background-color: #f5f5f5;
}
/deep/ .u-tabs {
position: fixed;
z-index: 1;
@@ -443,13 +501,16 @@ page {
}
.list {
.item:first-child{
margin-top: 0;
}
.item {
margin: 30rpx 0;
border-radius: 12rpx;
.shop-info {
padding: 20rpx 16rpx;
border-bottom: 2rpx solid #eee;
// border-bottom: 2rpx solid #eee;
.name {
margin-left: 6rpx;
@@ -481,22 +542,25 @@ page {
}
.bottom {
border-top: 2rpx solid #eee;
border-top: 0rpx solid #eee;
.bnt {
display: flex;
justify-content: center;
align-items: center;
width: 160rpx;
height: 56rpx;
box-sizing: border-box;
border-radius: 20rpx;
width: 128rpx;
height: 44rpx;
border-radius: 40rpx;
font-size: 24rpx;
// font-weight: bold;
border: 1px solid #707070;
color: #333;
padding: 1px 3px;
}
.service {
border: 2rpx solid #0DC5C5;
color: #0DC5C5;
border: 1rpx solid #707070;
color: #333;
}
}
}
@@ -520,13 +584,13 @@ page {
}
.statusTag {
font-size: 20rpx;
font-size: 24rpx;
color: #fff;
padding: 0 20rpx;
padding: 4rpx 20rpx;
background: #0DC5C5;
height: 38rpx;
line-height: 38rpx;
border-radius: 20rpx 0px 0px 20rpx;
border-radius: 60rpx 0px 0px 60rpx;
}
.group-btn {