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
assets/css/v12-style.less
+5 -3
View File
@@ -3,8 +3,8 @@
@dark-color: #333333; @dark-color: #333333;
@white-color: #fff; @white-color: #fff;
@colors: #C52733, #333333, #fff, #666, #F0F0F0; @colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999;
@classnames: primary, dark, white, secondary-dark, grey; @classnames: primary, dark, white, secondary-dark, grey, dark1;
/*=====================================*/ /*=====================================*/
each(@colors, { each(@colors, {
@@ -96,7 +96,7 @@ each(@colors, {
.generateRadius(@n, @i: 0) when (@i <= @n) { .generateRadius(@n, @i: 0) when (@i <= @n) {
@baseRadius: @i * 1rpx; @baseRadius: @i * 1rpx;
.v12-radius-@{i} { .v12-radius-@{i} {
border-radius: @baseRadius border-radius: @baseRadius !important;
} }
.generateRadius(@n, (@i + 1)) .generateRadius(@n, (@i + 1))
} }
@@ -136,6 +136,8 @@ each(@colors, {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
/*==============v12 按钮样式======================*/
pages/order/MyOrder/index.vue
+104 -40
View File
@@ -1,19 +1,33 @@
<template> <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" <view class="list v12-ma-0" style="padding: 0rpx 0 30rpx;">
@click="tabChange"></u-tabs>
<view class="list" style="padding: 80rpx 0 30rpx;">
<view class="item" v-for="(order,orderListIndex) in orderList" :key="orderListIndex"> <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="shop-info flex jc-between ai-center" v-if="order.merName">
<view class="flex ai-center"> <view class="flex ai-center">
<image :src="webUrl+'/20221008152431059973.png'" style="width: 40rpx;height: 40rpx"/> <image :src="webUrl+'/orderIcon/shop.png'" style="width: 32rpx;height: 32rpx"/>
<text class="name">{{ order.merName }}</text> <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>
<view class="flex ai-center"> <view class="flex ai-center">
<image :src="webUrl+'/20221008152418897577.png'" style="width: 24rpx;height: 24rpx"/> <image :src="webUrl+'/orderIcon/map.png'" style="width: 28rpx;height: 28rpx"/>
<text class="address">{{ order.merCityName }}</text> <text class="address v12-dark-text v12-font-bold v12-font-24">{{ order.merCityName }}</text>
</view> </view>
</view> </view>
@@ -26,10 +40,10 @@
<span class="sign cart-color acea-row row-center-wrapper" v-if="order.storeId > 0">门店</span> <span class="sign cart-color acea-row row-center-wrapper" v-if="order.storeId > 0">门店</span>
订单号:{{ order.orderId }} 订单号:{{ order.orderId }}
</view> </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>
<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>
<view @click="goOrderDetails(order)"> <view @click="goOrderDetails(order)">
<view class="item-info acea-row row-between row-top" v-for="(cart,cartInfoIndex) in order.cartInfo" <view class="item-info acea-row row-between row-top" v-for="(cart,cartInfoIndex) in order.cartInfo"
@@ -58,39 +72,48 @@
</view> </view>
<view class="text"> <view class="text">
<view class="acea-row name-wrap"> <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 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> </view>
<view class="acea-row attr-wrap"> <view class="acea-row attr-wrap ">
<view <view
v-if="cart.productInfo.attrInfo" v-if="cart.productInfo.attrInfo"
class="attr" class="attr v12-secondary-dark-text v12-font-24 "
> >
规格：{{ cart.productInfo.attrInfo.sku }} 规格：{{ cart.productInfo.attrInfo.sku }}
</view> </view>
<view>x{{ cart.cartNum }}</view> <view class="v12-dark-text v12-font-22">x{{ cart.cartNum }}</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="totalPrice acea-row row-between row-middle"> <view class="totalPrice acea-row row-between row-middle">
<view class="" v-if="order.createTime"><span class="orderTime">{{ order.createTime }}</span></view> <view class="" v-if="order.createTime"><span class="orderTime v12-font-24 v12-dark1-text">{{ order.createTime }}</span></view>
<view class="">共{{ order.totalNum || 0 }}件商品，总金额 <view class="v12-font-24 v12-dark1-text">共{{ order.totalNum || 0 }}件商品，
<text class="money font-color-lightred">￥{{ force2Decimal(order.payPrice) }}</text> <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> </view>
<view class="bottom flex jc-between ai-center"> <view class="bottom flex jc-between ai-center">
<view class="group-btn" <view class="group-btn"
v-if="(Number(order._status._type) === 2 || Number(order._status._type) === 3) && v-if="(Number(order._status._type) === 2 || Number(order._status._type) === 3) &&
order.isTickets === 0"> 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="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">联系客服 v-if="order.merName">联系客服
</view> </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>
</view> </view>
<template v-else> <template v-else>
@@ -100,11 +123,11 @@
<view class="flex"> <view class="flex">
<template v-if="order._status._type == 0"> <template v-if="order._status._type == 0">
<view class="bnt cancelBnt" @click="cancelOrder(order)">取消订单</view> <view class="bnt cancelBnt " @click="cancelOrder(order)">取消订单</view>
<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>
<template v-if="(order._status._type == 1 || order._status._type == 9) && order.isTickets==0"> <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>
<template v-if="order._status._type == 1 && order.isTickets == 1"> <template v-if="order._status._type == 1 && order.isTickets == 1">
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">立即核销</view> <view class="bnt bg-color-lightred" @click="goOrderDetails(order)">立即核销</view>
@@ -113,11 +136,11 @@
<view class="bnt default" v-if="order.isExtendedDelivery==0" <view class="bnt default" v-if="order.isExtendedDelivery==0"
@click="toDelay(order.orderId)">延长收货 @click="toDelay(order.orderId)">延长收货
</view> </view>
<view class="bnt default" @click="goLogistics(order)">查看物流</view> <view class="bnt default v12-radius-40" @click="goLogistics(order)">查看物流</view>
<view class="bnt bg-color-lightred" @click="takeOrder(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>
<template v-if="order._status._type == 3"> <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>
<template v-if="order._status._type === 4"> <template v-if="order._status._type === 4">
<view class="bnt bg-color-lightred" @click="goOrderDetails(order)">查看订单</view> <view class="bnt bg-color-lightred" @click="goOrderDetails(order)">查看订单</view>
@@ -152,6 +175,25 @@ export default {
mixins: [pageListenMixins], mixins: [pageListenMixins],
data() { data() {
return { 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, webUrl: this.$VUE_APP_RESOURCES_URL,
tabList: [ tabList: [
{name: '全部'}, {name: '全部'},
@@ -428,12 +470,28 @@ export default {
} }
}; };
</script> </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"> <style scoped lang="less">
page { page {
background-color: #fff; background-color: #fff;
} }
.m-tab-warp{
position: sticky;
top: 0;
background-color: #f5f5f5;
}
/deep/ .u-tabs { /deep/ .u-tabs {
position: fixed; position: fixed;
z-index: 1; z-index: 1;
@@ -443,13 +501,16 @@ page {
} }
.list { .list {
.item:first-child{
margin-top: 0;
}
.item { .item {
margin: 30rpx 0; margin: 30rpx 0;
border-radius: 12rpx; border-radius: 12rpx;
.shop-info { .shop-info {
padding: 20rpx 16rpx; padding: 20rpx 16rpx;
border-bottom: 2rpx solid #eee; // border-bottom: 2rpx solid #eee;
.name { .name {
margin-left: 6rpx; margin-left: 6rpx;
@@ -481,22 +542,25 @@ page {
} }
.bottom { .bottom {
border-top: 2rpx solid #eee; border-top: 0rpx solid #eee;
.bnt { .bnt {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 160rpx; width: 128rpx;
height: 56rpx; height: 44rpx;
box-sizing: border-box; border-radius: 40rpx;
border-radius: 20rpx;
font-size: 24rpx; font-size: 24rpx;
// font-weight: bold;
border: 1px solid #707070;
color: #333;
padding: 1px 3px;
} }
.service { .service {
border: 2rpx solid #0DC5C5; border: 1rpx solid #707070;
color: #0DC5C5; color: #333;
} }
} }
} }
@@ -520,13 +584,13 @@ page {
} }
.statusTag { .statusTag {
font-size: 20rpx; font-size: 24rpx;
color: #fff; color: #fff;
padding: 0 20rpx; padding: 4rpx 20rpx;
background: #0DC5C5; background: #0DC5C5;
height: 38rpx; height: 38rpx;
line-height: 38rpx; line-height: 38rpx;
border-radius: 20rpx 0px 0px 20rpx; border-radius: 60rpx 0px 0px 60rpx;
} }
.group-btn { .group-btn {