|
|
@@ -1,47 +1,71 @@
|
|
|
<template>
|
|
|
-<view class="app-main app-content">
|
|
|
- <view class="input-wrap_box">
|
|
|
- <view>
|
|
|
- <AppSearchModule placeholder="输入拼音首字母搜索" @input="searchFn"/>
|
|
|
- </view>
|
|
|
- <view style="padding:0 10upx 0 20upx;" >
|
|
|
- <button class="admin-button-com middle blue" @click="addGhs()">添加供货商</button>
|
|
|
- </view>
|
|
|
+<view class="app-main app-content" @click="closeAllMenus">
|
|
|
+ <view class="input-wrap_box" @click.stop>
|
|
|
+ <view class="search-box">
|
|
|
+ <AppSearchModule placeholder="输入拼音首字母搜索" @input="searchFn"/>
|
|
|
</view>
|
|
|
- <view class="app-tabs">
|
|
|
- <Tabs :isFixed="false" :tabs="tabs" :top="50" :height="100" :currentTab="tabIndex" @change="changeTabEvent" itemWidth="33%">
|
|
|
- </Tabs>
|
|
|
+ <view class="add-btn-wrap">
|
|
|
+ <button class="admin-button-com middle blue add-btn" @click="addGhs()">添加供货商</button>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+ <view class="app-tabs" @click.stop>
|
|
|
+ <Tabs :isFixed="false" :tabs="tabs" :top="50" :height="100" :currentTab="tabIndex" @change="changeTabEvent" itemWidth="25%">
|
|
|
+ </Tabs>
|
|
|
+ </view>
|
|
|
<view class="order-page">
|
|
|
<view class="order_list">
|
|
|
<!-- 总欠款统计 -->
|
|
|
- <view class="total-debt-header">
|
|
|
- 总欠款：{{info.totalDebtAmount?parseFloat(info.totalDebtAmount):0}}
|
|
|
+ <view class="total-debt-header" v-if="tabs[tabIndex].delStatus === 0">
|
|
|
+ <text class="debt-title">总欠款</text>
|
|
|
+ <text class="debt-amount">¥{{info.totalDebtAmount?parseFloat(info.totalDebtAmount):0}}</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 列表内容 -->
|
|
|
<block v-if="!$util.isEmpty(list.data)">
|
|
|
<view class="list_item" v-for="(item, index) in list.data" :key="index">
|
|
|
|
|
|
+ <!-- 右上角更多操作菜单（正常状态下显示） -->
|
|
|
+ <view class="more-menu-wrap" v-if="tabs[tabIndex].delStatus === 0">
|
|
|
+ <view class="more-trigger" @click.stop="toggleMenu(item)">
|
|
|
+ <text class="more-dots">•••</text>
|
|
|
+ </view>
|
|
|
+ <!-- 下拉菜单内容 -->
|
|
|
+ <view class="more-dropdown" v-if="activeMenuId === item.id">
|
|
|
+ <view class="dropdown-item" @click.stop="handleDeleteFromMenu(item)">
|
|
|
+ <text class="dropdown-icon">🗑</text>
|
|
|
+ <text class="dropdown-text">删除供货商</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- 主体内容区 -->
|
|
|
- <view class="item-main-content">
|
|
|
+ <view class="item-header">
|
|
|
<!-- 供货商信息 -->
|
|
|
- <view class="store-info">
|
|
|
- <view class="store-title" @click.stop="nameModify(item)">
|
|
|
- {{item.name}}
|
|
|
+ <view class="title-section" @click.stop="nameModify(item)">
|
|
|
+ <!-- 地区标签 -->
|
|
|
+ <view
|
|
|
+ class="location-badge"
|
|
|
+ :class="item.location == 1 ? 'badge-local' : 'badge-upstream'"
|
|
|
+ @click.stop="changeLocation(item)">
|
|
|
+ {{item.location == 1 ? '本地' : '上游'}}
|
|
|
</view>
|
|
|
- <view class="store-subtitle"></view>
|
|
|
+ <text class="store-title">{{item.name}}</text>
|
|
|
+ <text class="edit-icon">✎</text>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 操作按钮区（上部） -->
|
|
|
- <view class="action-buttons-top">
|
|
|
- <view class="action-btn success" @click.stop="goToSearchDebt(item)">搜索</view>
|
|
|
- <view class="action-btn primary" @click="goToCg(item)">采购</view>
|
|
|
+ <!-- 操作按钮区（正常状态） -->
|
|
|
+ <view class="action-buttons" v-if="tabs[tabIndex].delStatus === 0">
|
|
|
+ <view class="action-btn search-btn" @click.stop="goToSearchDebt(item)">搜索</view>
|
|
|
+ <view class="action-btn cg-btn" @click="goToCg(item)">采购</view>
|
|
|
+ </view>
|
|
|
+ <!-- 操作按钮区（已删除状态） -->
|
|
|
+ <view class="action-buttons" v-else>
|
|
|
+ <view class="action-btn recover-btn" @click.stop="handleRecover(item)">恢复</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 记录信息区（下部） -->
|
|
|
- <view class="record-section">
|
|
|
+ <!-- 记录信息区（中部，非删除状态显示） -->
|
|
|
+ <view class="record-section" v-if="tabs[tabIndex].delStatus === 0">
|
|
|
<view class="record-buttons">
|
|
|
<view class="record-btn" @click.stop="pageTo({ url: '/admin/clear/list?ghsId='+item.id})">结账记录</view>
|
|
|
<view class="record-btn" @click.stop="getDebtList(item)">挂账变动明细</view>
|
|
|
@@ -49,22 +73,14 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 地区标签（左下角） -->
|
|
|
- <view
|
|
|
- class="location-tag"
|
|
|
- :class="item.location == 1 ? 'location-local' : 'location-upstream'"
|
|
|
- @click.stop="changeLocation(item)">
|
|
|
- {{item.location == 1 ? '本地' : '上游'}}
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 待结订单提示区（如果有欠款） -->
|
|
|
+ <!-- 待结订单提示区（如果有欠款且非删除状态） -->
|
|
|
<view
|
|
|
class="pending-order-box"
|
|
|
@click.stop="goToDebtList(item)"
|
|
|
- v-if="Number(item.debtAmount)>0">
|
|
|
+ v-if="Number(item.debtAmount)>0 && tabs[tabIndex].delStatus === 0">
|
|
|
<view class="pending-order-content">
|
|
|
<image class="pending-icon" referrerpolicy="no-referrer" src="/static/lanhu_020105gongyingshangliebiao/ps2pvfa1l5i34w5vqj2k7b3kejml3i3nmrba1421bf-caa2-491b-8773-af413df7e96d.png" />
|
|
|
- <text class="pending-text">待结订单 {{item.debtNum}}笔 ¥{{item.debtAmount?parseFloat(item.debtAmount):0}} 查看明细></text>
|
|
|
+ <text class="pending-text">待结订单 {{item.debtNum}} 笔 ¥{{item.debtAmount?parseFloat(item.debtAmount):0}} 查看明细 ></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -79,34 +95,35 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <modal-module :show="modifyGhsShow" @click="modifyConfirm" :maskClosable="true" title="修改名称" padding="30rpx 30rpx" >
|
|
|
- <template v-slot:content>
|
|
|
- <div class="app-modal-input-wrap">
|
|
|
- <div class="inp-list-line">
|
|
|
- <div class="line-input">
|
|
|
- <input type="text" ref="input" style="width:90%;text-align:center;" v-model="modifyGhsName" :adjust-position="false" class="inp-input" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </modal-module>
|
|
|
+ <modal-module :show="modifyGhsShow" @click="modifyConfirm" :maskClosable="true" title="修改名称" padding="30rpx 30rpx" >
|
|
|
+ <template v-slot:content>
|
|
|
+ <view class="app-modal-input-wrap">
|
|
|
+ <view class="inp-list-line">
|
|
|
+ <view class="line-input">
|
|
|
+ <input type="text" ref="input" style="width:90%;text-align:center;" v-model="modifyGhsName" :adjust-position="false" class="inp-input" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </modal-module>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
import Tabs from "@/components/plugin/tabs";
|
|
|
import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
-import { getList,changeGhsName,changeLocationFn } from "@/api/ghs";
|
|
|
+import { getList, changeGhsName, changeLocationFn, changeDelStatus } from "@/api/ghs";
|
|
|
import AppSearchModule from "@/components/module/app-search";
|
|
|
-import ModalModule from "@/components/plugin/modal"
|
|
|
+import ModalModule from "@/components/plugin/modal";
|
|
|
import { list } from "@/mixins";
|
|
|
export default {
|
|
|
- components: { AppWrapperEmpty, AppSearchModule,Tabs,ModalModule },
|
|
|
+ components: { AppWrapperEmpty, AppSearchModule, Tabs, ModalModule },
|
|
|
data () {
|
|
|
return {
|
|
|
- modifyGhsId:0,
|
|
|
- modifyGhsName:'',
|
|
|
- modifyGhsShow:false,
|
|
|
+ modifyGhsId: 0,
|
|
|
+ modifyGhsName: '',
|
|
|
+ modifyGhsShow: false,
|
|
|
list: {
|
|
|
data: []
|
|
|
},
|
|
|
@@ -115,22 +132,32 @@ export default {
|
|
|
{
|
|
|
name: "全部",
|
|
|
key: "",
|
|
|
+ delStatus: 0,
|
|
|
value: "0"
|
|
|
},
|
|
|
{
|
|
|
name: "上游",
|
|
|
key: "0",
|
|
|
+ delStatus: 0,
|
|
|
value: "0"
|
|
|
},
|
|
|
{
|
|
|
name: "本地",
|
|
|
key: "1",
|
|
|
+ delStatus: 0,
|
|
|
+ value: "0"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "已删除",
|
|
|
+ key: "",
|
|
|
+ delStatus: 1,
|
|
|
value: "0"
|
|
|
}
|
|
|
],
|
|
|
- info:{},
|
|
|
- search:'',
|
|
|
- T:null
|
|
|
+ info: {},
|
|
|
+ search: '',
|
|
|
+ activeMenuId: null,
|
|
|
+ T: null
|
|
|
}
|
|
|
},
|
|
|
mixins: [list],
|
|
|
@@ -222,7 +249,14 @@ export default {
|
|
|
},
|
|
|
getGhsList() {
|
|
|
let name = this.search
|
|
|
- return getList({name:name,page: this.list.page}).then(res => {
|
|
|
+ let currentTab = this.tabs[this.tabIndex]
|
|
|
+ let params = {
|
|
|
+ name: name,
|
|
|
+ page: this.list.page,
|
|
|
+ location: currentTab.key,
|
|
|
+ delStatus: currentTab.delStatus
|
|
|
+ }
|
|
|
+ return getList(params).then(res => {
|
|
|
this.info = res.data
|
|
|
this.completes(res);
|
|
|
if (this.$util.isEmpty(res.data)){
|
|
|
@@ -230,6 +264,44 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ toggleMenu(item) {
|
|
|
+ this.activeMenuId = this.activeMenuId === item.id ? null : item.id;
|
|
|
+ },
|
|
|
+ closeAllMenus() {
|
|
|
+ this.activeMenuId = null;
|
|
|
+ },
|
|
|
+ handleDeleteFromMenu(item) {
|
|
|
+ this.activeMenuId = null;
|
|
|
+ this.handleDelete(item);
|
|
|
+ },
|
|
|
+ handleDelete(item) {
|
|
|
+ let that = this
|
|
|
+ this.$util.confirmModal({content:`确认删除供货商【${item.name}】吗？`}, () => {
|
|
|
+ changeDelStatus({ ghsId: item.id, delStatus: 1 }).then(res => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.$msg('删除成功')
|
|
|
+ setTimeout(() => {
|
|
|
+ that.resetList()
|
|
|
+ that.getGhsList()
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleRecover(item) {
|
|
|
+ let that = this
|
|
|
+ this.$util.confirmModal({content:`确认恢复供货商【${item.name}】吗？`}, () => {
|
|
|
+ changeDelStatus({ ghsId: item.id, delStatus: 0 }).then(res => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.$msg('恢复成功')
|
|
|
+ setTimeout(() => {
|
|
|
+ that.resetList()
|
|
|
+ that.getGhsList()
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
goToSearchDebt(item){
|
|
|
this.pageTo({url: '/pagesGys/search?id='+item.id,type:2})
|
|
|
},
|
|
|
@@ -245,20 +317,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
.app-content {
|
|
|
padding-top: 90upx;
|
|
|
overflow: hidden;
|
|
|
- .select-dn_bx {
|
|
|
- padding-left: 18upx;
|
|
|
- }
|
|
|
- .app-tabs {
|
|
|
- position: fixed;
|
|
|
- @media screen and (max-width: 1100px) {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- z-index: 9;
|
|
|
- }
|
|
|
+
|
|
|
.input-wrap_box {
|
|
|
background-color: #fff;
|
|
|
position: fixed;
|
|
|
@@ -271,158 +335,310 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 0 30upx;
|
|
|
- & > view:nth-child(1) {
|
|
|
+ border-bottom: 1upx solid #eef1f6;
|
|
|
+
|
|
|
+ .search-box {
|
|
|
flex: 1;
|
|
|
}
|
|
|
+
|
|
|
+ .add-btn-wrap {
|
|
|
+ padding: 0 10upx 0 20upx;
|
|
|
+
|
|
|
+ .add-btn {
|
|
|
+ height: 64upx;
|
|
|
+ line-height: 64upx;
|
|
|
+ padding: 0 24upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-tabs {
|
|
|
+ position: fixed;
|
|
|
+ @media screen and (max-width: 1100px) {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ z-index: 9;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.order-page {
|
|
|
.order_list {
|
|
|
height: 100%;
|
|
|
- background-color: #ece5e5;
|
|
|
- padding: 90upx 0 20upx;
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ padding: 90upx 0 30upx;
|
|
|
|
|
|
// ========== 总欠款统计 ==========
|
|
|
.total-debt-header {
|
|
|
- padding: 22upx 0 22upx 20upx;
|
|
|
- font-size: 30upx;
|
|
|
- color: #333;
|
|
|
- font-weight: 500;
|
|
|
+ margin: 24upx 24upx 0;
|
|
|
+ padding: 24upx 30upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #666;
|
|
|
background: #fff;
|
|
|
- margin-bottom: 20upx;
|
|
|
+ border-radius: 12upx;
|
|
|
+ box-shadow: 0 4upx 16upx rgba(0, 0, 0, 0.02);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .debt-title {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ width: 6upx;
|
|
|
+ height: 28upx;
|
|
|
+ background-color: #ff4d4f;
|
|
|
+ border-radius: 4upx;
|
|
|
+ margin-right: 12upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .debt-amount {
|
|
|
+ font-size: 34upx;
|
|
|
+ color: #ff4d4f;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// ========== 列表项容器 ==========
|
|
|
.list_item {
|
|
|
- margin: 20upx 0 0;
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
+ margin: 24upx 24upx 0;
|
|
|
background: #fff;
|
|
|
+ border-radius: 16upx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- padding: 20upx 0;
|
|
|
+ padding: 44upx 24upx 24upx; // 顶部预留出充裕空间，增加与下方按钮的绝对间距
|
|
|
+ box-shadow: 0 4upx 16upx rgba(0, 0, 0, 0.03);
|
|
|
+ position: relative;
|
|
|
|
|
|
- // ========== 地区标签 ==========
|
|
|
- .location-tag {
|
|
|
+ // ========== 右上角更多操作菜单 ==========
|
|
|
+ .more-menu-wrap {
|
|
|
position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 90upx;
|
|
|
- padding: 8upx 0;
|
|
|
- font-size: 20upx;
|
|
|
- color: white;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 2;
|
|
|
+ top: 8upx;
|
|
|
+ right: 12upx;
|
|
|
+ z-index: 100;
|
|
|
|
|
|
- &.location-local {
|
|
|
- background-color: #7babc1;
|
|
|
+ .more-trigger {
|
|
|
+ padding: 8upx 16upx; // 缩小点击热区并精准定位
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .more-dots {
|
|
|
+ font-size: 26upx; // 缩小更多图标尺寸
|
|
|
+ color: #b8b8b8; // 更加温和低调的颜色
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1;
|
|
|
+ letter-spacing: 2upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- &.location-upstream {
|
|
|
- background-color: #DDDDDD;
|
|
|
- color: #666;
|
|
|
+ .more-dropdown {
|
|
|
+ position: absolute;
|
|
|
+ top: 52upx; // 配合缩小的触发器微调高度
|
|
|
+ right: 16upx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ box-shadow: 0 4upx 24upx rgba(0, 0, 0, 0.12);
|
|
|
+ border-radius: 12upx;
|
|
|
+ padding: 8upx 0;
|
|
|
+ min-width: 220upx;
|
|
|
+ border: 1upx solid #ebeef5;
|
|
|
+ z-index: 101;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: -10upx;
|
|
|
+ right: 16upx;
|
|
|
+ border-left: 10upx solid transparent;
|
|
|
+ border-right: 10upx solid transparent;
|
|
|
+ border-bottom: 10upx solid #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: -12upx;
|
|
|
+ right: 16upx;
|
|
|
+ border-left: 11upx solid transparent;
|
|
|
+ border-right: 11upx solid transparent;
|
|
|
+ border-bottom: 11upx solid #ebeef5;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20upx 24upx;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color 0.2s ease;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #ffeef0;
|
|
|
+
|
|
|
+ .dropdown-text, .dropdown-icon {
|
|
|
+ color: #ff4d4f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown-icon {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #999;
|
|
|
+ margin-right: 12upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown-text {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #555;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // ========== 主体内容区 ==========
|
|
|
- .item-main-content {
|
|
|
+ // ========== 头部信息和核心按钮 ==========
|
|
|
+ .item-header {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- padding: 0 20upx 0 30upx;
|
|
|
- margin-top: 50upx;
|
|
|
+ margin-top: 24upx; // 显著增加与右上角更多触发器的垂直距离，防止误触
|
|
|
|
|
|
// 供货商信息
|
|
|
- .store-info {
|
|
|
+ .title-section {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-right: 10upx;
|
|
|
|
|
|
.store-title {
|
|
|
- font-size: 32upx;
|
|
|
- font-weight: 700;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 12upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #222;
|
|
|
cursor: pointer;
|
|
|
- max-width: 450upx;
|
|
|
+ max-width: 280upx;
|
|
|
word-break: break-word;
|
|
|
white-space: normal;
|
|
|
}
|
|
|
|
|
|
- .store-subtitle {
|
|
|
- font-size: 26upx;
|
|
|
- color: #999;
|
|
|
+ .edit-icon {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #aaa;
|
|
|
+ margin-left: 8upx;
|
|
|
+ margin-right: 12upx;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .location-badge {
|
|
|
+ font-size: 20upx;
|
|
|
+ padding: 4upx 12upx;
|
|
|
+ border-radius: 6upx;
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-top: 4upx;
|
|
|
+ margin-right: 12upx; // 移至名字前方后，增加右侧与名字的间隔
|
|
|
+
|
|
|
+ &.badge-local {
|
|
|
+ background-color: rgba(51, 133, 255, 0.1);
|
|
|
+ color: #3385ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.badge-upstream {
|
|
|
+ background-color: rgba(44, 169, 157, 0.1);
|
|
|
+ color: #2ca99d; // 优美的绿色
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 右上方操作按钮
|
|
|
- .action-buttons-top {
|
|
|
+ // 核心操作按钮
|
|
|
+ .action-buttons {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
- margin-left: 16upx;
|
|
|
- margin-right: 30upx;
|
|
|
|
|
|
.action-btn {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- font-size: 28upx;
|
|
|
+ font-size: 26upx; // 放大字号
|
|
|
color: white;
|
|
|
- border: 1upx solid;
|
|
|
- border-radius: 80upx;
|
|
|
- padding: 16upx 28upx;
|
|
|
+ border-radius: 30upx;
|
|
|
+ padding: 12upx 30upx; // 放大内边距
|
|
|
cursor: pointer;
|
|
|
- margin-left: 32upx;
|
|
|
- transition: all 0.3s ease;
|
|
|
+ margin-left: 16upx; // 增加按钮间距
|
|
|
+ font-weight: bold; // 加粗字重
|
|
|
+ transition: all 0.2s ease;
|
|
|
|
|
|
&:first-child {
|
|
|
margin-left: 0;
|
|
|
}
|
|
|
|
|
|
- &.primary {
|
|
|
- background-color: #3385FF;
|
|
|
- border-color: #3385FF;
|
|
|
+ &:active {
|
|
|
+ opacity: 0.85;
|
|
|
+ transform: scale(0.95);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.cg-btn {
|
|
|
+ background: linear-gradient(135deg, #4da1ff, #3385ff); // 渐变色，提升质感
|
|
|
+ box-shadow: 0 4upx 12upx rgba(51, 133, 255, 0.2);
|
|
|
}
|
|
|
|
|
|
- &.success {
|
|
|
- background-color: #2ca99d;
|
|
|
- border-color: #2ca99d;
|
|
|
+ &.search-btn {
|
|
|
+ background: linear-gradient(135deg, #3fc4b6, #2ca99d); // 渐变色，提升质感
|
|
|
+ box-shadow: 0 4upx 12upx rgba(44, 169, 157, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.recover-btn {
|
|
|
+ background: linear-gradient(135deg, #ff9c6e, #fa8c16);
|
|
|
+ box-shadow: 0 4upx 12upx rgba(250, 140, 22, 0.2);
|
|
|
+ font-size: 26upx;
|
|
|
+ padding: 10upx 24upx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // ========== 记录按钮区 ==========
|
|
|
+ // ========== 中部记录按钮区 ==========
|
|
|
.record-section {
|
|
|
- padding: 0 20upx;
|
|
|
- margin-top: 35upx;
|
|
|
+ margin-top: 24upx;
|
|
|
+ padding-top: 20upx;
|
|
|
+ border-top: 1upx dashed #eee;
|
|
|
|
|
|
.record-buttons {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
.record-btn {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- font-size: 36upx;
|
|
|
- color: #666666;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #666;
|
|
|
+ background-color: #f7f8fa;
|
|
|
+ border-radius: 8upx;
|
|
|
padding: 12upx 0;
|
|
|
- text-decoration: underline;
|
|
|
cursor: pointer;
|
|
|
margin-right: 16upx;
|
|
|
- transition: color 0.2s ease;
|
|
|
+ transition: all 0.2s ease;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
+ background-color: #eef1f6;
|
|
|
color: #3385FF;
|
|
|
}
|
|
|
}
|
|
|
@@ -431,13 +647,18 @@ export default {
|
|
|
|
|
|
// ========== 待结订单提示区 ==========
|
|
|
.pending-order-box {
|
|
|
- background-color: #f4f1f1;
|
|
|
- margin: 16upx 20upx 0;
|
|
|
- padding: 20upx;
|
|
|
- border-radius: 12upx;
|
|
|
+ background-color: rgba(255, 40, 66, 0.04);
|
|
|
+ border: 1upx solid rgba(255, 40, 66, 0.08);
|
|
|
+ margin-top: 20upx;
|
|
|
+ padding: 18upx 20upx;
|
|
|
+ border-radius: 10upx;
|
|
|
cursor: pointer;
|
|
|
transition: background-color 0.2s ease;
|
|
|
|
|
|
+ &:active {
|
|
|
+ background-color: rgba(255, 40, 66, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
.pending-order-content {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
@@ -445,40 +666,21 @@ export default {
|
|
|
|
|
|
.pending-icon {
|
|
|
width: 24upx;
|
|
|
- height: 28upx;
|
|
|
+ height: 24upx;
|
|
|
margin-right: 12upx;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.pending-text {
|
|
|
flex: 1;
|
|
|
- font-size: 30upx;
|
|
|
- font-weight:bold;
|
|
|
+ font-size: 24upx;
|
|
|
+ font-weight: bold;
|
|
|
color: #ff2842;
|
|
|
line-height: 1.4;
|
|
|
- overflow-wrap: break-word;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .pay_list {
|
|
|
- padding-top: 20upx;
|
|
|
- background-color: #f0f2f6;
|
|
|
- }
|
|
|
-}
|
|
|
-.app-footer {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- .cg-set{
|
|
|
- margin-right:60upx;
|
|
|
- color:#3385ff;
|
|
|
- font-size:30upx;
|
|
|
- }
|
|
|
- .add-ghs{
|
|
|
- margin-right:30upx;
|
|
|
- }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
