front/merchapp
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 底部导航条UI；工作台订单UI（未完善）；消息模块UI。

Browse Source
This commit is contained in:
mixtan 2025-07-18 13:58:58 +08:00
parent 2609b97724
commit 796b96c211
7 changed files with 205 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
java-mall-app-shop-admin/components/t-chat-bar/t-chat-bar.vue
View File

@ -5,18 +5,8 @@
:style="{ paddingBottom: `${keyboardHeight}px` }"
>
<view :class="['tui-chat-tabbar', { isIos: 'tui-chat-ios-tabbar' }]">
<view
v-show="!showVoiceMask"
class="tui-icon tui-icon-im_more tui-icon-mr"
@tap="showKeyBoard(3)"
></view>
<view
v-show="!showVoiceMask"
class="tui-icon tui-icon-im_face tui-icon-mr"
@tap="showKeyBoard(2)"
></view>
<!-- v-show="showIndex != 2" -->
<!-- <view class="tui-icon tui-icon-im_keyboard tui-icon-mr" @tap="showKeyBoard(1)" v-show="showIndex == 2"></view> -->
<!-- <view class="tui-icon tui-icon-im_keyboard" @tap="showKeyBoard(1)" v-show="showIndex == 2"></view> -->
<!-- <editor
id="editor"
@ -29,6 +19,19 @@
>
</editor> -->
<view class="tui-send-box" v-show="!showVoiceMask">
<view
class="tui-icon tui-icon-im_voice"
v-if="!isVoice"
@tap="switchVoice"
></view>
<view
class="tui-icon tui-icon-im_keyboard"
v-if="isVoice"
@tap="switchInput"
></view>
</view>
<textarea
hold-keyboard
auto-height
@ -43,8 +46,10 @@
@tap.stop="showKeyBoard(1)"
ref="textarea"
v-show="!isVoice && !showVoiceMask"
placeholder="一起畅聊解决问题吧~"
></textarea>
<view
<view
:class="[
showVoiceMask ? 'mask-bottom' : 'tui-chat-voice_btn',
{ 'no-area': needCancel },
@ -69,18 +74,20 @@
"
></image>
</view>
<view class="tui-send-box" v-show="!showVoiceMask">
<view
class="tui-icon tui-icon-im_voice"
v-if="!isVoice && !content"
@tap="switchVoice"
></view>
<view
class="tui-icon tui-icon-im_keyboard"
v-if="isVoice && !content"
@tap="switchInput"
></view>
<view
<view
v-show="!showVoiceMask"
class="tui-icon tui-icon-im_face"
@tap="showKeyBoard(2)"
></view>
<view
v-show="!showVoiceMask && !content"
class="tui-icon tui-icon-im_more"
@tap="showKeyBoard(3)"
></view>
<view
class="tui-btn-send"
v-if="content"
:style="{ color: color }"
@ -90,8 +97,8 @@
>
{{ sendText }}
</view>
</view>
</view>
<view class="tui-reply-more">
<view class="tui-face-box" v-if="showIndex == 2">
<scroll-view scroll-y :style="{ height: replyContainerH + 'px' }">
@ -123,7 +130,7 @@
</view>
<view
class="tui-more-box"
:style="{ height: replyContainerH + 'px' }"
style="height:110px"
v-if="showIndex == 3"
>
<view
@ -549,6 +556,8 @@ export default {
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
color: #222;
background: #fff;
}
.tui-icon-at:before {
@ -559,12 +568,19 @@ export default {
content: "\eb95";
}
.tui-icon-im_more:before {
content: "\eb96";
.tui-icon-im_more {
&:before {
content: "\eb96";
}
}
.tui-icon-im_face:before {
.tui-icon-im_face {
margin-left: 28rpx;
margin-right: 28rpx;
content: "\eb97";
&:before {
content: "\eb97";
}
}
.tui-icon-link:before {
@ -617,7 +633,7 @@ export default {
width: 100%;
background-color: $uni-bg-color-grey;
display: flex;
align-items: flex-end;
align-items: center;
padding: 16rpx 24rpx;
box-sizing: border-box;
@ -628,56 +644,58 @@ export default {
top: 0;
right: 0;
left: 0;
border-top: 1rpx solid $uni-text-color-placeholder;
border-top: 1rpx solid $uni-border-color;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.tui-phcolor{
color: #666;
font-size: 24rpx;
}
.tui-chat-input {
flex: 1;
// min-height: 80rpx;
min-height: rpx;
padding: $uni-spacing-col-base 0;
padding: $uni-spacing-col-base 10rpx;
background-color: $uni-bg-color;
border-radius: 8rpx;
margin: 0;
border-radius: 8rpx;
}
.tui-chat-voice_btn {
flex: 1;
height: 78rpx;
border-radius: 8rpx;
height: 68rpx;
border-radius: 12rpx;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.tui-icon-mr {
margin-right: 28rpx;
font-size: 28rpx;
}
.tui-icon-ml {
margin-left: 28rpx;
}
.tui-icon {
margin-bottom: 13rpx;
}
// .tui-icon {
// margin-bottom: 13rpx;
// }
.tui-send-box {
width: 80rpx;
display: flex;
align-items: center;
justify-content: flex-end;
}
.tui-btn-send {
flex-shrink: 0;
padding: 22rpx 0;
padding: 6rpx 24rpx;
font-size: 30rpx;
line-height: 30rpx;
border-radius: 100rpx;
color: #fff !important;
background: #fe411b;
}
}
@ -695,7 +713,7 @@ export default {
top: 0;
right: 0;
left: 0;
border-top: 1rpx solid $uni-text-color-placeholder;
border-top: 1rpx solid $uni-border-color;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
@ -728,16 +746,16 @@ export default {
.tui-delete-face_box {
position: absolute;
background-color: $uni-bg-color-hover;
width: 108rpx;
height: 92rpx;
right: 20rpx;
bottom: 0;
background-color: #fff;
// width: 108rpx;
// height: 92rpx;
padding: 6rpx 20rpx;
border-top-left-radius: 12rpx;
right: 30rpx;
bottom: 30rpx;
z-index: 10;
.tui-delete-keybord {
width: 108rpx;
height: 68rpx;
background-color: $uni-bg-color;
display: flex;
align-items: center;
@ -759,7 +777,8 @@ export default {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
background-color: $uni-bg-color-hover;
background-color: $uni-bg-color-grey;
justify-content: space-evenly;
.tui-more-item {
width: 126rpx;
@ -767,7 +786,7 @@ export default {
align-items: center;
flex-direction: column;
justify-content: center;
margin-right: 40rpx;
// margin-right: 40rpx;
&:active {
opacity: 0.6;
@ -779,12 +798,12 @@ export default {
align-items: center;
justify-content: center;
background-color: #ffffff;
height: 126rpx;
width: 126rpx;
border-radius: 32rpx;
height: 108rpx;
width: 108rpx;
border-radius: 20rpx;
.tui-icon {
font-size: 60rpx;
font-size: 48rpx;
}
}

49
java-mall-app-shop-admin/components/tabbar/tabbar.vue
View File

@ -7,86 +7,87 @@
:placeholder="false"
:border="true"
activeColor="#fe4119"
inactiveColor="#333"
:safeAreaInsetBottom="true"
>
<u-tabbar-item text="工作台" name="order">
<u-icon
class="u-icon"
custom-prefix="custom-icon-gongzuotai custom-icon"
size="22"
size="20"
slot="active-icon"
color="#fe4119"
></u-icon>
<u-icon
class="u-icon"
custom-prefix="custom-icon-gongzuotai custom-icon"
size="22"
size="20"
slot="inactive-icon"
color="#000"
color="#666"
></u-icon>
</u-tabbar-item>
<u-tabbar-item text="经营" name="warehouse">
<u-tabbar-item text="数据" name="shituzhongxin">
<u-icon
class="u-icon"
custom-prefix="custom-icon-jingyingguanli custom-icon"
size="22"
custom-prefix="custom-icon-jingyingguanli custom-icon"
size="16"
slot="active-icon"
color="#fe4119"
></u-icon>
<u-icon
class="u-icon"
custom-prefix="custom-icon-jingyingguanli custom-icon"
size="22"
size="16"
slot="inactive-icon"
color="#000"
color="#666"
></u-icon>
</u-tabbar-item>
<u-tabbar-item text="消息" name="IM" :badge="weiduNum">
<u-icon
class="u-icon"
custom-prefix="custom-icon-xiaoxi1 custom-icon"
size="22"
size="20"
slot="active-icon"
color="#fe4119"
></u-icon>
<u-icon
class="u-icon"
custom-prefix="custom-icon-xiaoxi1 custom-icon"
size="22"
size="20"
slot="inactive-icon"
color="#000"
color="#666"
></u-icon>
</u-tabbar-item>
<u-tabbar-item text="视图中心" name="shituzhongxin">
<u-tabbar-item text="经营" name="warehouse">
<u-icon
class="u-icon"
custom-prefix="custom-icon-shituzhongxin custom-icon"
size="20"
custom-prefix="custom-icon-shituzhongxin custom-icon"
size="16"
slot="active-icon"
color="#fe4119"
></u-icon>
<u-icon
class="u-icon"
custom-prefix="custom-icon-shituzhongxin custom-icon"
size="20"
custom-prefix="custom-icon-shituzhongxin custom-icon"
size="16"
slot="inactive-icon"
color="#000"
color="#666"
></u-icon>
</u-tabbar-item>
<u-tabbar-item text="我的" name="my">
<u-icon
class="u-icon"
custom-prefix="custom-icon-wode custom-icon"
size="24"
size="18"
slot="active-icon"
color="#fe4119"
></u-icon>
<u-icon
class="u-icon"
custom-prefix="custom-icon-wode custom-icon"
size="24"
size="18"
slot="inactive-icon"
color="#000"
color="#666"
></u-icon>
</u-tabbar-item>
</u-tabbar>
@ -202,7 +203,13 @@ export default {
},
};
</script>
<style lang="scss">
<style lang="scss" scoped>
::v-deep .u-border-top{
border-top-width: .5px !important;
border-color: #dadbde !important;
border-top-style: solid;
}
.tabbar-container {
.u-icon {
font-weight: bold;

2
java-mall-app-shop-admin/components/tui-tabs.vue
View File

@ -8,7 +8,7 @@
top: isFixed ? top + 'px' : 'auto',
zIndex: isFixed ? zIndex : 'auto'
}" v-if="tabsWidth>0">
<view v-for="(item, index) in tabs" :key="index" class="tui-tabs-item"
<view v-for="(item, index) in tabs" :key="index" :class="['tui-tabs-item', { 'tui__tab_current': currentTab==index}]"
:style="{ width: getItemWidth,height: height + 'rpx' }" @tap.stop="swichTabs(index)">
<view class="tui-tabs-title" :class="{'tui-tabs-disabled': item.disabled }" :style="{
color: currentTab == index ? getSelectedColor : color,

50
java-mall-app-shop-admin/pages/IM/IM.vue
View File

@ -3,6 +3,10 @@
<status-bar :backgroundColor="'#fff'" v-if="true"></status-bar>
<view class="IM-setting">
<view class="IM-status">
<image
class="img"
:src="msgInfo.mine.user_avatar || '../../static/images/user-avatar.jpg'"
/>
<text>{{ msgInfo.mine.user_nickname }}</text>
<!-- <text class="status-color"></text> -->
<!-- <u-icon name="arrow-down">arrow-down</u-icon> -->
@ -11,15 +15,15 @@
<u-icon
class="u-icon icon-kefu"
custom-prefix="custom-icon-kefu custom-icon"
size="26"
color="#000"
size="24"
color="#666"
@click="senMsgAdmin"
></u-icon>
<u-icon
class="u-icon icon-shezhi"
custom-prefix="custom-icon-shezhi custom-icon"
size="22"
color="#000"
size="20"
color="#666"
@click="skipuIMsetting"
></u-icon>
</view>
@ -70,7 +74,7 @@
<view class="user-img-block">
<image
class="img"
:src="item.avatar || '../../static/images/user-avatar.jpg'"
:src="item.avatar || '../../static/images/chat/user-avatar.jpg'"
/>
</view>
<u-badge
@ -263,15 +267,26 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 40rpx;
padding: 20rpx 30rpx;
border-bottom: 1px solid rgba(238, 238, 238,0.5);
// background: rgba(238, 238, 238,0.5);
.IM-status {
display: flex;
align-items: center;
gap: 10rpx;
.img{
width: 96rpx;
height: 96rpx;
border-radius: 100%;
}
}
.setting-icon-block {
display: flex;
align-items: center;
justify-content: center;
gap: 20rpx;
}
}
.tabs-block {
@ -280,22 +295,29 @@ export default {
.IM-msg-content {
.IM-msg-block {
padding: 40rpx;
padding: 0;
background: #fff;
.uni-swiper-list {
height: calc(100vh - 190px);
height: calc(100vh - 120px);
.user-info-block {
display: flex;
align-items: center;
margin-bottom: 40rpx;
margin: 30rpx;
border-bottom: 1px solid rgba(238, 238, 238,0.5);
padding-bottom: 30rpx;
&:last-child{
border: none;
}
.user-img-content {
position: relative;
.user-img-block {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
width: 64rpx;
height: 64rpx;
background: #eee;
border-radius: 100%;
overflow: hidden;
.img {
@ -318,7 +340,7 @@ export default {
margin-left: 24rpx;
.msg-title {
font-weight: bold;
// font-weight: bold;
}
.msg-info {
@ -357,7 +379,7 @@ export default {
}
.icon-kefu {
margin-right: 40rpx;
// margin-right: 40rpx;
}
.IM-loading {

19
java-mall-app-shop-admin/pages/IM/IMmsgContent.vue
View File

@ -1078,7 +1078,7 @@ export default {
max-width: 66%;
border-radius: 10rpx;
position: relative;
padding: 20rpx 22rpx;
padding: 12rpx 22rpx;
font-size: 32rpx;
color: #333;
word-break: break-all;
@ -1090,13 +1090,14 @@ export default {
position: absolute;
width: 0;
height: 0;
top: 20rpx;
top: 50%;
transform: translateY(-50%);
border: 16rpx solid;
}
.tui-chatbox-left {
background: #fff;
border: 1rpx solid #fff;
// border: 1rpx solid #fff;
display: inline-block;
}
@ -1106,13 +1107,13 @@ export default {
}
.tui-chatbox-right {
background: #a0d5f3;
border: 1rpx solid #a0d5f3;
background: #ffecf2;
// border: 1rpx solid #fe411b;
}
.tui-chatbox-right::before {
left: 100%;
border-color: transparent transparent transparent #a0d5f3;
border-color: transparent transparent transparent #ffecf2;
}
/*chatbox*/
@ -1137,8 +1138,8 @@ export default {
}
.tui-user-pic {
width: 80rpx;
height: 80rpx;
width: 64rpx;
height: 64rpx;
flex-shrink: 0;
border-radius: 50%;
display: block;
@ -1162,7 +1163,7 @@ export default {
justify-content: center;
height: 28rpx;
font-size: 28rpx;
color: #666;
color: #999;
padding-top: 36rpx;
}

73
java-mall-app-shop-admin/pages/order/order.vue
View File

@ -14,10 +14,10 @@
:currentTab="currentTab"
backgroundColor="#fff"
:height="88"
color="#888"
selectedColor="#fe4119"
sliderBgColor="#fe4119"
:bold="true"
color="#333"
:size="32"
selectedColor="#FE411B"
sliderBgColor="#FE411B"
:width="width"
unlined
@change="handleTab"
@ -25,21 +25,22 @@
</view>
<view class="tab2-content" v-if="currentTab == 0">
<tui-tabs
class="tabs-2"
:class="['tabs-2', `tab_item_${currentTab2}`]"
:tabs="tabs2"
:width="300"
:currentTab="currentTab2"
@change="handleTab2"
backgroundColor="#fff"
:height="88"
:height="60"
:size="28"
unlined
:sliderWidth="150"
:sliderHeight="60"
:sliderHeight="48"
sliderRadius="4rpx"
bottom="50%"
color="#888"
selectedColor="#fff"
:bold="true"
sliderBgColor="#fe4119"
sliderBgColor="#FE411B"
></tui-tabs>
</view>
<view class="search-contetn" v-if="currentTab2 != 2">
@ -82,6 +83,7 @@
'sales-retrun-btn-item',
{ active: salesReturnBtnSearchAcitve == item.value },
]"
size=""
@click="handelSalesReturnSearch(item)"
:style="{ width: item.width }"
v-for="(item, index) of salesReturnBtnSearchList"
@ -95,7 +97,7 @@
<favorite-loading
class="order-loading"
v-show="showOrderLoading"
:color="'#fe4119'"
:color="'#FE411B'"
text=""
animation="spinner15"
></favorite-loading>
@ -134,7 +136,7 @@
{{ sfFormatStatus(item.order_state_id) }}
</view>
</view>
<view class="rider-info">
<view class="rider-info" v-if="item.arrival_time && item.order_id">
<view class="delivery-time">
预计送达{{ formatTime(item.arrival_time) }}前
</view>
@ -348,7 +350,7 @@
<favorite-loading
class="order-loading"
v-show="showOrderLoading"
:color="'#fe4119'"
:color="'#FE411B'"
text=""
animation="spinner15"
></favorite-loading>
@ -388,7 +390,7 @@
{{ sfFormatStatus(item.order_state_id) }}
</view>
</view>
<view class="rider-info">
<view class="rider-info" v-if="item.arrival_time && item.order_id">
<view class="delivery-time">
预计送达{{ formatTime(item.arrival_time) }}前
</view>
@ -598,7 +600,7 @@
<favorite-loading
class="order-loading"
v-show="showOrderLoading"
:color="'#fe4119'"
:color="'#FE411B'"
text=""
animation="spinner15"
></favorite-loading>
@ -639,8 +641,9 @@
</view>
<view class="order-num">退货单号：{{ item.return_id }}</view>
</view>
<view class="rider-info">
<view class="delivery-time"></view>
<view class="rider-info" v-if="item.order_state_id" >
<view class="delivery-time">
</view>
<view class="delivery-status">
{{ sfFormatStatus(item.order_state_id) }}
</view>
@ -690,7 +693,7 @@
name="phone-fill"
class="icon-phone-fill"
size="40"
color="#fe4119"
color="#FE411B"
></u-icon>
</view>
<view class="user-address">
@ -1641,10 +1644,33 @@ export default {
.tab-content {
padding-bottom: 20rpx;
background: #fff;
// ::v-deep .tui-tabs-title {
// font-size: 36rpx !important;
// }
::v-deep .tui-tabs__badge {
line-height: 32rpx;
}
}
.tab2-content {
background: #fff;
::v-deep .tui-tabs-slider {
background: #ffecf2 !important;
border: 2rpx solid #fe411b;
bottom: 48% !important;
}
::v-deep .tui-tabs-item {
line-height: 60rpx;
.tui-tabs-title{
color: #333 !important;
}
&.tui__tab_current {
.tui-tabs-title {
color: #fe411b !important;
}
}
}
}
.sales-return-img-title {
@ -1661,7 +1687,7 @@ export default {
.search-contetn {
display: flex;
align-items: center;
padding: 40rpx;
padding: 30rpx 40rpx 40rpx;
.btn-content {
margin-left: 20rpx;
@ -1676,7 +1702,7 @@ export default {
}
.sales-retrun-btn-list {
margin: 38rpx 24rpx 0;
margin: 30rpx 10rpx 0;
height: 160rpx;
.sales-retrun-btn-item {
@ -1685,6 +1711,7 @@ export default {
margin-left: 20rpx;
margin-bottom: 20rpx;
border: none;
font-size: 24rpx;
::after {
border: none;
@ -1692,8 +1719,8 @@ export default {
}
.active {
background: $base-color;
color: #fff;
// background: $base-color;
color: #fe411b;
}
}
@ -2027,7 +2054,7 @@ export default {
.no-data {
.no-data-bg {
margin: 20% auto;
margin: auto;
margin-bottom: 0;
width: 480rpx;
height: 480rpx;
@ -2035,7 +2062,7 @@ export default {
background-size: 100%;
}
.no-data-tips {
margin: 80rpx auto;
margin: 20rpx auto 0;
color: #aaaaaa;
text-align: center;
}

2
java-mall-app-shop-admin/uni.scss
View File

@ -31,7 +31,7 @@ $uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-grey:#f6f6f6;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色