Compare commits
2 Commits
d5bd7072e1
...
417ad4bdcc
| Author | SHA1 | Date | |
|---|---|---|---|
| 417ad4bdcc | |||
| ca887983dd |
4
.gitignore
vendored
4
.gitignore
vendored
@ -23,3 +23,7 @@ dist-ssr
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
sub-operation-service/package-lock.json
|
||||
main/package-lock.json
|
||||
sub-operation-service/vite.config.js
|
||||
main/.eslintrc.cjs
|
||||
|
||||
@ -39,7 +39,12 @@ module.exports = {
|
||||
},
|
||||
// 这里时配置规则的,自己看情况配置
|
||||
rules: {
|
||||
'prettier/prettier': 'error',
|
||||
'prettier/prettier': [
|
||||
'error',
|
||||
{
|
||||
endOfLine: 'auto', // 允许自动检测换行符
|
||||
},
|
||||
],
|
||||
'no-debugger': 'off',
|
||||
'no-unused-vars': 'off',
|
||||
'vue/multi-word-component-names': 'off',
|
||||
|
||||
@ -3,7 +3,7 @@ VITE_PORT = 9526
|
||||
VITE_APP_MIAN = 'daimp-front-main'
|
||||
VITE_APP_MIAN_URL = 'http://localhost:9000'
|
||||
VITE_APP_NAME = 'sub-operation-service'
|
||||
VITE_APP_BASE_API = '/platform'
|
||||
VITE_APP_BASE_API = '/apis'
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.99:88'
|
||||
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
VITE_APP_UPLOAD_URL = 'http://192.168.18.99:9300'
|
||||
|
||||
19
sub-operation-service/src/apis/agricultural.js
Normal file
19
sub-operation-service/src/apis/agricultural.js
Normal file
@ -0,0 +1,19 @@
|
||||
import request from '@/utils/axios';
|
||||
|
||||
//农资
|
||||
|
||||
//获取农资分类查询数据
|
||||
export function transaction(params = {}) {
|
||||
return request('goods/business/category/transactionType?type=1', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
//获取农资列表数据
|
||||
export function agriculturalList(params) {
|
||||
return request('goods/business/category/transactionGoodInfo', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
BIN
sub-operation-service/src/assets/images/userCenter/menu1-1.png
Normal file
BIN
sub-operation-service/src/assets/images/userCenter/menu1-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 600 B |
BIN
sub-operation-service/src/assets/images/userCenter/menu1.png
Normal file
BIN
sub-operation-service/src/assets/images/userCenter/menu1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
sub-operation-service/src/assets/images/userCenter/menu2-1.png
Normal file
BIN
sub-operation-service/src/assets/images/userCenter/menu2-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 669 B |
BIN
sub-operation-service/src/assets/images/userCenter/menu2.png
Normal file
BIN
sub-operation-service/src/assets/images/userCenter/menu2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 804 B |
BIN
sub-operation-service/src/assets/images/userCenter/menu3-1.png
Normal file
BIN
sub-operation-service/src/assets/images/userCenter/menu3-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 964 B |
BIN
sub-operation-service/src/assets/images/userCenter/menu3.png
Normal file
BIN
sub-operation-service/src/assets/images/userCenter/menu3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 772 B |
@ -79,24 +79,23 @@ const toPreview = () => {
|
||||
}
|
||||
.viewer-btn-warp {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.viewer-btn {
|
||||
background: $color-balck-mask;
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
font-size: 14px;
|
||||
border-radius: 16px;
|
||||
color: $color-fff;
|
||||
font-size: 14px;
|
||||
background: $color-balck-mask;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.c-custom-img-warp:hover {
|
||||
.viewer-btn-warp {
|
||||
display: inline-block !important;
|
||||
|
||||
@ -19,30 +19,28 @@ const props = defineProps({
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-layout {
|
||||
width: $width-main;
|
||||
margin: 0 auto;
|
||||
width: $width-main;
|
||||
height: 100%;
|
||||
min-height: calc(100vh - 230px);
|
||||
@include flex-row();
|
||||
|
||||
@include flex-row;
|
||||
&-left,
|
||||
&-main {
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
&-left {
|
||||
width: 240px;
|
||||
margin-right: 16px;
|
||||
width: 240px;
|
||||
background: $color-fff;
|
||||
}
|
||||
&-main {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -49,17 +49,15 @@ const todo = (row, toggle) => {
|
||||
.page-menu {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&-item {
|
||||
width: 100%;
|
||||
@include flex-column();
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
@include flex-column;
|
||||
.menu {
|
||||
@include flex-row();
|
||||
align-items: center;
|
||||
@include flex-row;
|
||||
|
||||
align-items: center;
|
||||
.item-img,
|
||||
.item-title {
|
||||
vertical-align: middle;
|
||||
@ -70,48 +68,42 @@ const todo = (row, toggle) => {
|
||||
height: 32px;
|
||||
}
|
||||
.item-title {
|
||||
flex: 1;
|
||||
padding-left: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
padding-left: 8px;
|
||||
@include ellipsis();
|
||||
flex: 1;
|
||||
@include ellipsis;
|
||||
}
|
||||
.el-icon {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
padding: 10px 0;
|
||||
display: block;
|
||||
|
||||
padding: 10px 0;
|
||||
&.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 16px;
|
||||
@include flex-row();
|
||||
align-items: center;
|
||||
|
||||
padding: 16px;
|
||||
@include flex-row;
|
||||
&::before {
|
||||
@include icon-space();
|
||||
@include icon-space;
|
||||
|
||||
margin-right: 22px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background-color: #000;
|
||||
margin-right: 22px;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 16px;
|
||||
@include ellipsis();
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
background-color: $color-primary;
|
||||
|
||||
@ -57,20 +57,20 @@ const active = computed(() => {
|
||||
:deep(.el-sub-menu__title) {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
color: $color-primary;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
:deep(.el-menu-item) {
|
||||
@include flex-row();
|
||||
@include flex-row;
|
||||
|
||||
align-items: center;
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
:deep(.el-sub-menu .el-menu-item) {
|
||||
font-size: 16px;
|
||||
padding-left: 50px !important;
|
||||
font-size: 16px;
|
||||
&:hover {
|
||||
.icon-dot {
|
||||
background-color: $color-primary;
|
||||
@ -81,7 +81,7 @@ const active = computed(() => {
|
||||
font-size: 20px;
|
||||
}
|
||||
:deep(.el-menu-item.is-active) {
|
||||
background-color: #fff;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
&:not(.el-menu--collapse) {
|
||||
height: 100%;
|
||||
|
||||
@ -31,9 +31,9 @@ const emit = defineEmits(['current-change', 'size-change']);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-pagination {
|
||||
width: 100%;
|
||||
padding: 50px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 50px 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -115,11 +115,12 @@ const toHome = () => {
|
||||
};
|
||||
|
||||
const toUserCenter = () => {
|
||||
console.info('toUserCenter', router);
|
||||
router.push('/sub-operation-service/userCenter');
|
||||
};
|
||||
|
||||
const toCart = () => {
|
||||
router.push('/sub-operation-service/userCenter-shoppingCart');
|
||||
router.push('/sub-operation-service/userCenter');
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -139,12 +140,12 @@ const toCart = () => {
|
||||
font-size: 20px;
|
||||
}
|
||||
.el-menu-item:hover {
|
||||
background: none !important;
|
||||
color: $color-main;
|
||||
background: none !important;
|
||||
}
|
||||
.el-menu-item:active {
|
||||
background: none !important;
|
||||
color: $color-main;
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -154,16 +155,16 @@ const toCart = () => {
|
||||
// height: 100%;
|
||||
// box-sizing: border-box;
|
||||
&-header {
|
||||
width: 1200px;
|
||||
height: 206px;
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
width: 1200px;
|
||||
height: 206px;
|
||||
&-top {
|
||||
display: flex;
|
||||
height: 44px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 32px;
|
||||
height: 44px;
|
||||
&-left {
|
||||
line-height: 36px;
|
||||
.welcome-msg {
|
||||
@ -171,15 +172,15 @@ const toCart = () => {
|
||||
color: $color-5a;
|
||||
}
|
||||
.left-link {
|
||||
color: $color-main;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
.iconfont {
|
||||
color: $color-main;
|
||||
cursor: pointer;
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
color: $color-main;
|
||||
}
|
||||
.iconfont,
|
||||
span {
|
||||
@ -189,16 +190,15 @@ const toCart = () => {
|
||||
}
|
||||
&-right {
|
||||
span {
|
||||
color: $color-000;
|
||||
margin-left: 25px;
|
||||
line-height: 36px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: $color-000;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
&:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.block-icon {
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
@ -210,10 +210,11 @@ const toCart = () => {
|
||||
}
|
||||
}
|
||||
span {
|
||||
margin-left: 6px;
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
@ -236,27 +237,26 @@ const toCart = () => {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.search-warp {
|
||||
width: 100%;
|
||||
padding-left: 36px;
|
||||
position: relative;
|
||||
padding-left: 36px;
|
||||
width: 100%;
|
||||
.el-input {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
:deep(.el-input__wrapper) {
|
||||
padding-right: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 18px;
|
||||
right: 8px;
|
||||
padding: 0 24px;
|
||||
height: 42px;
|
||||
font-size: 18px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -270,8 +270,8 @@ const toCart = () => {
|
||||
}
|
||||
&-right {
|
||||
margin-top: -10px;
|
||||
width: 240px;
|
||||
padding-left: 20px;
|
||||
width: 240px;
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -35,14 +35,14 @@ const isReload = computed(() => SettingStore.isReload);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include scrollable();
|
||||
box-sizing: border-box;
|
||||
@include scrollable;
|
||||
|
||||
&-inner {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
&-inner {
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -69,22 +69,21 @@ const toHome = () => {
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.layout-user-centre-warp {
|
||||
width: 320px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
height: 100vh;
|
||||
padding: 16px;
|
||||
width: 320px;
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
.layout-user-centre {
|
||||
height: calc(100% - 0px);
|
||||
background: $color-fff;
|
||||
overflow: auto;
|
||||
height: calc(100% - 0px);
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
}
|
||||
.layout-user-centre-top {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
.logo-warp {
|
||||
height: 74px;
|
||||
}
|
||||
@ -95,7 +94,6 @@ div {
|
||||
.el-menu-item {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@ -12,17 +12,16 @@ import Main from './component/Main';
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.basic-layout {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-width: 1200px;
|
||||
|
||||
height: 100%;
|
||||
&-container {
|
||||
position: relative;
|
||||
@include flex-column();
|
||||
height: 100%;
|
||||
margin-left: 210px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
transition: margin-left 0.28s;
|
||||
box-sizing: border-box;
|
||||
@include flex-column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,13 +15,13 @@ const SettingStore = useSettingStore();
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-centre-layout {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.layout-main {
|
||||
display: inline-block !important;
|
||||
padding: 16px 16px 16px 0;
|
||||
width: calc(100% - 320px) !important;
|
||||
vertical-align: top;
|
||||
padding: 16px 16px 16px 0;
|
||||
.layout-main-inner {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
@ -23,6 +23,58 @@ export const constantRoutes = [
|
||||
component: () => import('@/views/error/403.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
// {
|
||||
// path: '/sub-operation-service/userCenter',
|
||||
// name: 'userCenter',
|
||||
// component: () => import('@/views/userCenter/shoppingCart.vue'),
|
||||
// hidden: true,
|
||||
// },
|
||||
{
|
||||
path: '/sub-operation-service/userCenter',
|
||||
name: 'userCenter',
|
||||
// component: Layout,
|
||||
redirect: '/sub-operation-service/userCenter',
|
||||
meta: { title: '个人中心' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/userCenter',
|
||||
component: () => import('@/views/userCenter/shoppingCart.vue'),
|
||||
name: 'shoppingCart',
|
||||
meta: { title: '我的购物车' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/sureOrder',
|
||||
component: () => import('@/views/userCenter/sureOrder.vue'),
|
||||
name: 'sureOrder',
|
||||
meta: { title: '结算' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/orderSuccess',
|
||||
component: () => import('@/views/userCenter/orderSuccess.vue'),
|
||||
name: 'orderSuccess',
|
||||
meta: { title: '提交订单' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/paySuccess',
|
||||
component: () => import('@/views/userCenter/paySuccess.vue'),
|
||||
name: 'paySuccess',
|
||||
meta: { title: '支付成功' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/userOrders',
|
||||
component: () => import('@/views/userCenter/userOrders.vue'),
|
||||
name: 'userOrders',
|
||||
meta: { title: '我的订单' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/userLands',
|
||||
component: () => import('@/views/userCenter/userLands.vue'),
|
||||
name: 'userLands',
|
||||
meta: { title: '我的土地' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: '/sub-operation-service',
|
||||
name: 'layout',
|
||||
|
||||
@ -217,12 +217,12 @@ const toCopy = () => {};
|
||||
.agricultural-detail-warp {
|
||||
width: 100%;
|
||||
.agricultural-detail-info {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
padding: 10px 24px;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
.top-title {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
@ -237,29 +237,27 @@ const toCopy = () => {};
|
||||
font-size: 18px;
|
||||
}
|
||||
.current-title {
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
padding: 0 8px;
|
||||
font-size: 16px;
|
||||
color: $color-main;
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.current-title::before {
|
||||
content: '.';
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
content: '.';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.top-info {
|
||||
margin: 16px 0;
|
||||
text-align: left;
|
||||
::v-deep() {
|
||||
.ecommerce-banner {
|
||||
padding: 0 48px !important;
|
||||
position: relative;
|
||||
padding: 0 48px !important;
|
||||
}
|
||||
.el-carousel {
|
||||
position: unset !important;
|
||||
@ -275,17 +273,17 @@ const toCopy = () => {};
|
||||
.price-sold {
|
||||
margin: 16px 0;
|
||||
.price {
|
||||
color: $color-main;
|
||||
font-size: 32px;
|
||||
position: relative;
|
||||
padding: 0 16px;
|
||||
font-size: 32px;
|
||||
color: $color-main;
|
||||
}
|
||||
.price::before {
|
||||
content: '￥';
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
font-size: 16px;
|
||||
content: '￥';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.sold {
|
||||
@ -297,18 +295,18 @@ const toCopy = () => {};
|
||||
}
|
||||
}
|
||||
.tag-list {
|
||||
color: $color-999;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
color: $color-999;
|
||||
gap: 10px;
|
||||
.tag-item {
|
||||
position: relative;
|
||||
padding-left: 32px;
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
&.icon-see {
|
||||
font-size: 24px;
|
||||
@ -320,14 +318,15 @@ const toCopy = () => {};
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.tips-list {
|
||||
margin: 16px 0;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.spu-sku-list {
|
||||
width: 100%;
|
||||
@ -336,30 +335,29 @@ const toCopy = () => {};
|
||||
}
|
||||
.spu-sku-warp {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
.spu-sku-item {
|
||||
width: calc((100% - 16px) / 2);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
&.normal {
|
||||
color: $color-999;
|
||||
border: 1px solid $color-da;
|
||||
color: $color-999;
|
||||
}
|
||||
&.act {
|
||||
color: $color-main;
|
||||
border: 1px solid $color-main;
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spu-sku-warp::after {
|
||||
content: '';
|
||||
flex: auto;
|
||||
@ -379,21 +377,21 @@ const toCopy = () => {};
|
||||
.is-have {
|
||||
display: inline-block;
|
||||
padding-left: 8px;
|
||||
color: $color-999;
|
||||
font-size: 12px;
|
||||
color: $color-999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-btn {
|
||||
.item-btn {
|
||||
margin: 8px 24px 8px 0;
|
||||
display: inline-block;
|
||||
line-height: 42px;
|
||||
color: $color-fff;
|
||||
padding: 0 24px;
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
margin: 8px 24px 8px 0;
|
||||
margin-top: 16px;
|
||||
padding: 0 24px;
|
||||
font-size: 20px;
|
||||
border-radius: 12px;
|
||||
color: $color-fff;
|
||||
line-height: 42px;
|
||||
&.sign {
|
||||
background: $color-main;
|
||||
}
|
||||
@ -402,14 +400,13 @@ const toCopy = () => {};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.agricultural-detail-content {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
.detail-content {
|
||||
.tab-top {
|
||||
width: 100%;
|
||||
margin: 42px 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
::v-deep() {
|
||||
.el-radio-button:first-child .el-radio-button__inner {
|
||||
@ -419,18 +416,16 @@ const toCopy = () => {};
|
||||
border-radius: 0 16px 16px 0;
|
||||
}
|
||||
.el-radio-button__inner {
|
||||
padding-left: 48px !important;
|
||||
padding-right: 48px !important;
|
||||
padding-left: 48px !important;
|
||||
font-size: 20px;
|
||||
line-height: 32px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
width: 100%;
|
||||
margin: 24px 0;
|
||||
|
||||
width: 100%;
|
||||
.content-detail,
|
||||
.content-source-code,
|
||||
.content-evaluate {
|
||||
@ -446,13 +441,13 @@ const toCopy = () => {};
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.code-img {
|
||||
margin: auto;
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
margin: auto;
|
||||
}
|
||||
.code-down {
|
||||
color: $color-main;
|
||||
margin: 16px 0;
|
||||
color: $color-main;
|
||||
.el-icon,
|
||||
a {
|
||||
display: inline-block;
|
||||
@ -462,18 +457,18 @@ const toCopy = () => {};
|
||||
font-size: 22px;
|
||||
}
|
||||
a {
|
||||
color: $color-main;
|
||||
font-size: 16px;
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
.code-copy {
|
||||
.code-txt {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 200px;
|
||||
background: $color-main-table-header;
|
||||
border-radius: 16px 0 0 16px;
|
||||
padding: 12px 8px;
|
||||
width: 200px;
|
||||
border-radius: 16px 0 0 16px;
|
||||
background: $color-main-table-header;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.do-copy {
|
||||
vertical-align: middle;
|
||||
@ -481,8 +476,8 @@ const toCopy = () => {};
|
||||
margin-left: -6px;
|
||||
.el-button {
|
||||
padding: 21px 16px;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -490,11 +485,11 @@ const toCopy = () => {};
|
||||
margin: 24px 0;
|
||||
.el-button {
|
||||
padding: 16px 116px;
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
border-radius: 24px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,32 +24,32 @@ const props = defineProps({
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
.top-line-pos {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
.top-txt {
|
||||
padding: 0 56px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
padding: 0 56px;
|
||||
}
|
||||
.top-txt::before,
|
||||
.top-txt::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
border-radius: 8px;
|
||||
content: '';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.top-txt::before {
|
||||
background: linear-gradient(270deg, $color-main, $color-main-table-header);
|
||||
left: 0;
|
||||
background: linear-gradient(270deg, $color-main, $color-main-table-header);
|
||||
}
|
||||
.top-txt::after {
|
||||
background: linear-gradient(270deg, $color-main-table-header, $color-main);
|
||||
right: 0;
|
||||
background: linear-gradient(270deg, $color-main-table-header, $color-main);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,25 +28,25 @@ const props = defineProps({
|
||||
height: calc(100vh - 230px);
|
||||
text-align: center;
|
||||
.ecommerce-common-content {
|
||||
width: $width-main;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
margin: auto;
|
||||
width: $width-main;
|
||||
height: 100%;
|
||||
.left-menu,
|
||||
.common-content {
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
height: calc(100% - 16px);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.left-menu {
|
||||
width: 240px;
|
||||
background: $color-fff;
|
||||
}
|
||||
.common-content {
|
||||
width: calc(100% - 240px);
|
||||
margin-left: 16px;
|
||||
width: calc(100% - 240px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="score">{{ score }}</div>
|
||||
<div class="score-tips">
|
||||
<div class="tips">用户评价</div>
|
||||
<div class="score-val"><el-rate v-model="score" :colors="colors" size="large" :disabled="true" /></div>
|
||||
<div class="score-val"><el-rate v-model="score" :allow-half="true" :colors="colors" size="large" :disabled="true" /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
<div class="user-do-warp">
|
||||
<div class="do-title">用户评价</div>
|
||||
<div class="do-date"><el-rate v-model="score" :colors="colors" size="large" :disabled="false" /></div>
|
||||
<div class="do-date"><el-rate v-model="score" allow-half="true" :colors="colors" size="large" :disabled="false" /></div>
|
||||
<div class="do-title">评价内容</div>
|
||||
<div class="do-fill">
|
||||
<el-input v-model="remark" type="textarea" placeholder="质量好，品质过硬，值得推荐！"></el-input>
|
||||
@ -120,9 +120,9 @@ const submitEvaluate = () => {};
|
||||
}
|
||||
.evaluate-warp-top {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.user-evaluate {
|
||||
display: inline-flex;
|
||||
@ -135,13 +135,13 @@ const submitEvaluate = () => {};
|
||||
.score {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
background: $color-main-table-header;
|
||||
font-size: 32px;
|
||||
color: $color-main;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
color: $color-main;
|
||||
background: $color-main-table-header;
|
||||
line-height: 80px;
|
||||
}
|
||||
.score-tips {
|
||||
padding-left: 16px;
|
||||
@ -162,20 +162,19 @@ const submitEvaluate = () => {};
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.tag-btn-pos {
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
border-radius: 16px;
|
||||
height: 48px;
|
||||
font-size: 18px;
|
||||
border-radius: 16px;
|
||||
line-height: 48px;
|
||||
&.normal {
|
||||
background: $color-main-table-header;
|
||||
}
|
||||
&.act {
|
||||
background: $color-main;
|
||||
color: $color-fff;
|
||||
font-weight: 600;
|
||||
color: $color-fff;
|
||||
background: $color-main;
|
||||
}
|
||||
.label-title,
|
||||
.label-num {
|
||||
@ -188,7 +187,6 @@ const submitEvaluate = () => {};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-do-warp {
|
||||
width: 100%;
|
||||
.do-title {
|
||||
@ -197,32 +195,32 @@ const submitEvaluate = () => {};
|
||||
line-height: 36px;
|
||||
}
|
||||
.do-fill {
|
||||
background: $color-f5;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
min-height: 100px;
|
||||
border-radius: 16px;
|
||||
background: $color-f5;
|
||||
::v-deep() {
|
||||
.el-textarea__inner {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
font-size: 16px;
|
||||
color: $color-666;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-anonymous {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0;
|
||||
width: 100%;
|
||||
.do-is {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
&.do-is-act {
|
||||
.is-radio {
|
||||
background: $color-main;
|
||||
border: 1px solid $color-main;
|
||||
background: $color-main;
|
||||
}
|
||||
.do-is-txt {
|
||||
color: $color-main;
|
||||
@ -230,8 +228,8 @@ const submitEvaluate = () => {};
|
||||
}
|
||||
&.do-is-no {
|
||||
.is-radio {
|
||||
background: $color-fff;
|
||||
border: 1px solid $color-da;
|
||||
background: $color-fff;
|
||||
}
|
||||
.do-is-txt {
|
||||
color: $color-999;
|
||||
@ -246,37 +244,36 @@ const submitEvaluate = () => {};
|
||||
padding-left: 8px;
|
||||
}
|
||||
.is-radio {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.is-radio::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: $color-fff;
|
||||
content: ' ';
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.evaluate-list {
|
||||
width: 100%;
|
||||
.list-content {
|
||||
width: 100%;
|
||||
.evaluate-item {
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
.evaluate-item-top {
|
||||
width: 100%;
|
||||
.evaluate-item-top {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
.user-info {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
@ -287,18 +284,18 @@ const submitEvaluate = () => {};
|
||||
vertical-align: middle;
|
||||
}
|
||||
.info-img {
|
||||
overflow: hidden;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.info-txt {
|
||||
padding-left: 16px;
|
||||
.info-txt-pos {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
height: 64px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.name {
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -310,11 +307,10 @@ const submitEvaluate = () => {};
|
||||
}
|
||||
}
|
||||
.score-val {
|
||||
text-align: right;
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.evaluate-item-content {
|
||||
width: 100%;
|
||||
.content-txt {
|
||||
@ -328,10 +324,10 @@ const submitEvaluate = () => {};
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
.img-item {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 138px;
|
||||
height: 138px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
v-for="(m, indexm) in handlelist(n)"
|
||||
:key="indexm"
|
||||
class="single-li"
|
||||
:class="select[n].id == m.id && ((m.pId && select[n].pId == m.pId) || !m.pId) ? 'li-act' : ''"
|
||||
:class="select[n]?.id == m.id && ((m.parentId && select[n].parentId == m.parentId) || !m.parentId) ? 'li-act' : ''"
|
||||
@click="selectItem(index, n, m)"
|
||||
>
|
||||
{{ m.title }}
|
||||
{{ m.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -25,20 +25,18 @@ import { isEmpty, getAssetsFile } from '@/utils';
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
required: true,
|
||||
default: () => [], // 默认值
|
||||
},
|
||||
});
|
||||
|
||||
let treeList = reactive([]);
|
||||
|
||||
watch(
|
||||
() => props.list,
|
||||
() => {
|
||||
treeList = props.list;
|
||||
// console.log('props.list', props.list);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
@ -55,7 +53,7 @@ const maxLevelAndNodes = computed(() => {
|
||||
const stack = [];
|
||||
|
||||
// 初始化栈，将根节点和初始层级（1）压入栈中
|
||||
for (const node of treeList) {
|
||||
for (const node of props.list) {
|
||||
stack.push({ node, level: 1 });
|
||||
}
|
||||
|
||||
@ -71,7 +69,7 @@ const maxLevelAndNodes = computed(() => {
|
||||
levelMap[level] = [];
|
||||
}
|
||||
levelMap[level].push(node);
|
||||
LevelVal[level] = { id: '', pId: node.pId ? node.pId : '' };
|
||||
LevelVal[level] = { id: '', parentId: node.parentId ? node.parentId : '' };
|
||||
|
||||
// 如果有子节点，将其压入栈中，并增加层级
|
||||
if (node.children) {
|
||||
@ -96,12 +94,17 @@ const handlelist = (key) => {
|
||||
|
||||
// 如果是第一层级，直接返回所有数据
|
||||
if (LevelKey[0] === key || !parentVal || parentVal.id === '') {
|
||||
// 对数据进行排序，按照 id 字母顺序排序
|
||||
// console.log('originalList', originalList);
|
||||
|
||||
return originalList;
|
||||
}
|
||||
|
||||
// 如果上一层级有选中的 pId，筛选当前层级的数据
|
||||
if (parentVal && parentVal.id) {
|
||||
return originalList.filter((m) => m.pId === parentVal.id);
|
||||
//.sort((a, b) => a.id.localeCompare(b.id))
|
||||
|
||||
return originalList.filter((m) => m.parentId === parentVal.id);
|
||||
}
|
||||
|
||||
// 如果上一层级没有选中任何项，返回空数组
|
||||
@ -111,7 +114,7 @@ const handlelist = (key) => {
|
||||
const selectItem = (index, key, item) => {
|
||||
if (key && item.id) {
|
||||
currentLevel.value = index || 0;
|
||||
select[key] = { id: item.id, pId: item.pId ? item.pId : null };
|
||||
select[key] = { id: item.id, parentId: item.parentId ? item.parentId : null };
|
||||
emit('select', select);
|
||||
}
|
||||
};
|
||||
@ -125,18 +128,18 @@ const emit = defineEmits(['select']);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.filter-top-warp {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
background: $color-fff;
|
||||
.filter-item {
|
||||
width: 100%;
|
||||
}
|
||||
.single-item {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
.single-li {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
@ -25,14 +25,14 @@ const toDetail = () => {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.c-goods-item-warp {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
.goods-img {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 168px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
::v-deep() {
|
||||
.el-image {
|
||||
width: 100%;
|
||||
@ -47,15 +47,15 @@ const toDetail = () => {
|
||||
}
|
||||
.goods-do {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
.price {
|
||||
width: calc(100% - 32px);
|
||||
text-align: left;
|
||||
font-size: 22px;
|
||||
padding-right: 8px;
|
||||
color: $color-main;
|
||||
width: calc(100% - 32px);
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
color: $color-main;
|
||||
}
|
||||
.price::before {
|
||||
content: ' ￥';
|
||||
@ -63,21 +63,21 @@ const toDetail = () => {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
.do {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
background: $color-main;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: $color-fff;
|
||||
left: 50%;
|
||||
font-size: 20px;
|
||||
color: $color-fff;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,11 +44,11 @@ const toDetail = () => {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.c-land-item-warp {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 16px;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
cursor: pointer;
|
||||
.land-img,
|
||||
.land-info {
|
||||
@ -56,10 +56,10 @@ const toDetail = () => {
|
||||
vertical-align: top;
|
||||
}
|
||||
.land-img {
|
||||
overflow: hidden;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
::v-deep() {
|
||||
.el-image {
|
||||
width: 100%;
|
||||
@ -68,14 +68,14 @@ const toDetail = () => {
|
||||
}
|
||||
}
|
||||
.land-info {
|
||||
width: calc(100% - 200px);
|
||||
padding-left: 16px;
|
||||
width: calc(100% - 200px);
|
||||
height: 200px;
|
||||
.land-info-pos {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
.land-info-c {
|
||||
width: 100%;
|
||||
@ -105,10 +105,10 @@ const toDetail = () => {
|
||||
}
|
||||
}
|
||||
.addr {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
@ -119,15 +119,15 @@ const toDetail = () => {
|
||||
}
|
||||
.land-do {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
.price {
|
||||
width: calc(100% - 0px);
|
||||
text-align: left;
|
||||
font-size: 22px;
|
||||
padding-right: 8px;
|
||||
color: $color-main;
|
||||
width: calc(100% - 0px);
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
color: $color-main;
|
||||
}
|
||||
.price::before {
|
||||
content: '￥';
|
||||
|
||||
@ -55,10 +55,10 @@ const toLink = (index) => {
|
||||
height: 100%;
|
||||
.left-menu {
|
||||
.left-menu-item {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
padding: 16px 0;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: $color-main;
|
||||
@ -74,9 +74,9 @@ const toLink = (index) => {
|
||||
}
|
||||
.item-title {
|
||||
display: -webkit-inline-box;
|
||||
padding-left: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,8 +139,8 @@ defineExpose({
|
||||
::v-deep() {
|
||||
.el-form-item__label {
|
||||
font-size: 18px !important;
|
||||
color: $color-999 !important;
|
||||
font-weight: 400 !important;
|
||||
color: $color-999 !important;
|
||||
}
|
||||
.el-radio__label {
|
||||
font-size: 18px;
|
||||
|
||||
@ -35,13 +35,13 @@ const processList = reactive([
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.c-sign-process-warp {
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
width: 100%;
|
||||
.process-content {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
.process-content-item {
|
||||
display: inline-block;
|
||||
margin: 12px 0;
|
||||
@ -51,8 +51,8 @@ const processList = reactive([
|
||||
vertical-align: middle;
|
||||
}
|
||||
.pro-content {
|
||||
border: 1px solid $color-main;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid $color-main;
|
||||
border-radius: 16px;
|
||||
.iconfont,
|
||||
.content-txt {
|
||||
@ -66,13 +66,13 @@ const processList = reactive([
|
||||
.content-txt {
|
||||
padding-left: 8px;
|
||||
.txt-title {
|
||||
color: $color-main;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: $color-main;
|
||||
}
|
||||
.txt-tips {
|
||||
font-weight: 400;
|
||||
margin-top: 8px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -86,15 +86,15 @@ const processList = reactive([
|
||||
background: linear-gradient(270deg, $color-main, $color-main-table-header);
|
||||
}
|
||||
.triangle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 24px solid $color-main; /* 左侧边框，透明 */
|
||||
border-top: 12px solid transparent; /* 右侧边框，透明 */
|
||||
border-bottom: 12px solid transparent;
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
border-left: 24px solid $color-main; /* 左侧边框，透明 */
|
||||
transform: translateY(-52%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -88,16 +88,16 @@ defineExpose({
|
||||
width: 100%;
|
||||
}
|
||||
.single-item {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
.item-title {
|
||||
display: -webkit-inline-box;
|
||||
color: $color-999;
|
||||
font-size: 20px;
|
||||
width: 120px;
|
||||
vertical-align: top;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: $color-999;
|
||||
vertical-align: top;
|
||||
line-height: 40px;
|
||||
}
|
||||
.single-li {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<filtertop :list="treeList"></filtertop>
|
||||
<div class="goods-list-warp">
|
||||
<div class="goods-list">
|
||||
<template v-for="(n, index) in 16" :key="index">
|
||||
<template v-for="(n, index) in 10" :key="n.id">
|
||||
<div class="goods-item">
|
||||
<goodsItem></goodsItem>
|
||||
</div>
|
||||
@ -22,61 +22,95 @@ import common from './components/common.vue';
|
||||
import banner from './components/banner.vue';
|
||||
import filtertop from './components/filtertop.vue';
|
||||
import goodsItem from './components/goodsItem.vue';
|
||||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||||
import { ref, reactive, onMounted, onBeforeMount, onUnmounted, watch, computed } from 'vue';
|
||||
import { transaction, agriculturalList } from '@/apis/agricultural';
|
||||
let treeList = reactive([
|
||||
{
|
||||
id: '01',
|
||||
title: '种子',
|
||||
children: [
|
||||
{ pId: '01', id: '0101', title: '小麦种子' },
|
||||
{ pId: '01', id: '0102', title: '水稻种子' },
|
||||
{ pId: '01', id: '0103', title: '玉米种子' },
|
||||
{ pId: '01', id: '0104', title: '番茄种子' },
|
||||
{ pId: '01', id: '0105', title: '白菜种子' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
title: '肥料',
|
||||
children: [
|
||||
{ pId: '02', id: '0101', title: '有机肥' },
|
||||
{ pId: '02', id: '0102', title: '水溶肥' },
|
||||
{ pId: '02', id: '0103', title: '天然肥料' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '03',
|
||||
title: '农药',
|
||||
children: [
|
||||
{ pId: '03', id: '0101', title: '杀虫剂' },
|
||||
{ pId: '03', id: '0102', title: '杀菌剂' },
|
||||
{ pId: '03', id: '0103', title: '除草剂' },
|
||||
{ pId: '03', id: '0104', title: '杀螨剂' },
|
||||
],
|
||||
},
|
||||
// {
|
||||
// id: '01',
|
||||
// name: '种子/种苗',
|
||||
// children: [
|
||||
// { parentId: '01', id: '0101', name: '小麦种子' },
|
||||
// { parentId: '01', id: '0102', name: '水稻种子' },
|
||||
// { parentId: '01', id: '0103', name: '玉米种子' },
|
||||
// { parentId: '01', id: '0104', name: '番茄种子' },
|
||||
// { parentId: '01', id: '0105', name: '白菜种子' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// id: '02',
|
||||
// name: '农药',
|
||||
// children: [
|
||||
// { parentId: '03', id: '0101', name: '杀虫剂' },
|
||||
// { parentId: '03', id: '0102', name: '杀菌剂' },
|
||||
// { parentId: '03', id: '0103', name: '除草剂' },
|
||||
// { parentId: '03', id: '0104', name: '杀螨剂' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// id: '03',
|
||||
// name: '化肥',
|
||||
// children: [
|
||||
// { parentId: '02', id: '0101', name: '有机肥' },
|
||||
// { parentId: '02', id: '0102', name: '水溶肥' },
|
||||
// { parentId: '02', id: '0103', name: '天然肥料' },
|
||||
// ],
|
||||
// },
|
||||
]);
|
||||
onBeforeMount(() => {
|
||||
// 在 DOM 挂载前调用
|
||||
getTree();
|
||||
getList();
|
||||
});
|
||||
|
||||
//获取农资商品分类
|
||||
const getTree = () => {
|
||||
transaction().then((res) => {
|
||||
if (res.code === 200) {
|
||||
let a = res.data.sort((a, b) => Number(b.id) - Number(a.id));
|
||||
treeList.splice(0, treeList.length, ...a);
|
||||
// console.log('treeList', treeList);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//获取农资商品列表
|
||||
let list = reactive([]);
|
||||
let params = reactive({
|
||||
current: 1,
|
||||
size: 10,
|
||||
parentId: null,
|
||||
childrenId: null,
|
||||
});
|
||||
const getList = () => {
|
||||
agriculturalList(params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
console.log('res', res);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner1.png']);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.goods-list-warp {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
.goods-list {
|
||||
width: 100%;
|
||||
.goods-list {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
.goods-item {
|
||||
display: inline-block;
|
||||
width: calc((100% - 50px) / 5);
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
width: calc((100% - 50px) / 5);
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加伪元素占位 */
|
||||
.goods-list::after {
|
||||
content: '';
|
||||
|
||||
@ -228,11 +228,10 @@ const doShowHide = () => {
|
||||
.land-index-warp {
|
||||
width: 100%;
|
||||
.land-filter-top {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
padding: 16px;
|
||||
|
||||
.more-filter {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
@ -243,17 +242,16 @@ const doShowHide = () => {
|
||||
vertical-align: top;
|
||||
}
|
||||
.more-title {
|
||||
color: $color-999;
|
||||
font-size: 20px;
|
||||
width: 120px;
|
||||
vertical-align: top;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: $color-999;
|
||||
vertical-align: top;
|
||||
line-height: 40px;
|
||||
}
|
||||
.filter-r {
|
||||
}
|
||||
}
|
||||
|
||||
.select-result {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
@ -266,28 +264,28 @@ const doShowHide = () => {
|
||||
}
|
||||
.title {
|
||||
display: -webkit-inline-box;
|
||||
color: $color-999;
|
||||
font-size: 20px;
|
||||
width: 120px;
|
||||
vertical-align: top;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: $color-999;
|
||||
vertical-align: top;
|
||||
line-height: 40px;
|
||||
}
|
||||
.result-list {
|
||||
width: calc(100% - 120px);
|
||||
padding-right: 30px;
|
||||
position: relative;
|
||||
padding-right: 30px;
|
||||
width: calc(100% - 120px);
|
||||
.result-item {
|
||||
display: inline-block;
|
||||
margin: 8px;
|
||||
}
|
||||
.show-hide {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
font-size: 16px;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
.el-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@ -303,8 +301,8 @@ const doShowHide = () => {
|
||||
font-size: 18px;
|
||||
color: $color-666;
|
||||
.count {
|
||||
color: $color-main;
|
||||
padding: 0 2px;
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
.do-set {
|
||||
@ -317,10 +315,9 @@ const doShowHide = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.land-reuslt-list {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
width: 100%;
|
||||
.land-item-warp {
|
||||
}
|
||||
}
|
||||
|
||||
@ -372,12 +372,12 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
|
||||
.land-detail-warp {
|
||||
width: 100%;
|
||||
.land-detail-info {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
.top-title {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
@ -391,29 +391,27 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
|
||||
font-size: 18px;
|
||||
}
|
||||
.current-title {
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
padding: 0 8px;
|
||||
font-size: 16px;
|
||||
color: $color-main;
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.current-title::before {
|
||||
content: '.';
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
content: '.';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.top-info {
|
||||
margin: 16px 0;
|
||||
text-align: left;
|
||||
::v-deep() {
|
||||
.ecommerce-banner {
|
||||
padding: 0 48px !important;
|
||||
position: relative;
|
||||
padding: 0 48px !important;
|
||||
}
|
||||
.el-carousel {
|
||||
position: unset !important;
|
||||
@ -427,33 +425,33 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
|
||||
}
|
||||
}
|
||||
.price {
|
||||
color: $color-main;
|
||||
font-size: 32px;
|
||||
position: relative;
|
||||
padding: 0 16px;
|
||||
margin: 16px 0;
|
||||
padding: 0 16px;
|
||||
font-size: 32px;
|
||||
color: $color-main;
|
||||
}
|
||||
.price::before {
|
||||
content: '￥';
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
font-size: 16px;
|
||||
content: '￥';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.tag-list {
|
||||
color: $color-999;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
color: $color-999;
|
||||
gap: 10px;
|
||||
.tag-item {
|
||||
position: relative;
|
||||
padding-left: 32px;
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
&.icon-see {
|
||||
font-size: 24px;
|
||||
@ -465,14 +463,15 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.tips-list {
|
||||
margin: 16px 0;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.addr-info {
|
||||
font-size: 20px;
|
||||
@ -485,14 +484,14 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
|
||||
}
|
||||
.top-btn {
|
||||
.item-btn {
|
||||
margin: 8px 24px 8px 0;
|
||||
display: inline-block;
|
||||
line-height: 42px;
|
||||
color: $color-fff;
|
||||
padding: 0 24px;
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
margin: 8px 24px 8px 0;
|
||||
margin-top: 16px;
|
||||
padding: 0 24px;
|
||||
font-size: 20px;
|
||||
border-radius: 12px;
|
||||
color: $color-fff;
|
||||
line-height: 42px;
|
||||
&.sign {
|
||||
background: $color-main;
|
||||
}
|
||||
@ -501,14 +500,13 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.land-detail-content {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
.detail-content {
|
||||
.detail-content-item {
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
width: 100%;
|
||||
}
|
||||
.detail-content-key,
|
||||
.detail-content-val {
|
||||
@ -524,7 +522,6 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
|
||||
&.icon-voucher {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
&.icon-landform {
|
||||
font-size: 32px;
|
||||
}
|
||||
@ -546,22 +543,22 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
|
||||
}
|
||||
.key-txt {
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding-left: 16px;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
transform: skewX(-8deg);
|
||||
-webkit-background-clip: text;
|
||||
text-align: center;
|
||||
color: $color-333;
|
||||
letter-spacing: 2px;
|
||||
background-clip: text;
|
||||
text-shadow: -1px 0 0 $color-main-table-header;
|
||||
vertical-align: middle;
|
||||
transform: skewX(-8deg);
|
||||
letter-spacing: 2px;
|
||||
font-style: oblique;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
.detail-content-val {
|
||||
width: calc(100% - 150px);
|
||||
padding-left: 16px;
|
||||
width: calc(100% - 150px);
|
||||
.content-val-item {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
@ -572,12 +569,12 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
|
||||
vertical-align: middle;
|
||||
}
|
||||
.val-label {
|
||||
color: $color-666;
|
||||
max-width: 150px;
|
||||
color: $color-666;
|
||||
}
|
||||
.val-val {
|
||||
text-align: right;
|
||||
max-width: calc(100% - 100px);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,108 +67,108 @@ const router = useRouter();
|
||||
let treeList = reactive([
|
||||
{
|
||||
id: '01',
|
||||
title: '农产品',
|
||||
name: '农产品',
|
||||
children: [
|
||||
{
|
||||
pId: '01',
|
||||
parentId: '01',
|
||||
id: '0101',
|
||||
title: '植物性农产品',
|
||||
name: '植物性农产品',
|
||||
children: [
|
||||
{ pId: '0101', id: '010101', title: '谷物' },
|
||||
{ pId: '0101', id: '010102', title: '蔬菜' },
|
||||
{ pId: '0101', id: '010103', title: '水果' },
|
||||
{ pId: '0101', id: '010104', title: '坚果与油料作物' },
|
||||
{ pId: '0101', id: '010105', title: '糖料作物' },
|
||||
{ pId: '0101', id: '010106', title: '纤维作物' },
|
||||
{ pId: '0101', id: '010107', title: '茶叶' },
|
||||
{ pId: '0101', id: '010108', title: '咖啡' },
|
||||
{ pId: '0101', id: '010109', title: '香料' },
|
||||
{ parentId: '0101', id: '010101', name: '谷物' },
|
||||
{ parentId: '0101', id: '010102', name: '蔬菜' },
|
||||
{ parentId: '0101', id: '010103', name: '水果' },
|
||||
{ parentId: '0101', id: '010104', name: '坚果与油料作物' },
|
||||
{ parentId: '0101', id: '010105', name: '糖料作物' },
|
||||
{ parentId: '0101', id: '010106', name: '纤维作物' },
|
||||
{ parentId: '0101', id: '010107', name: '茶叶' },
|
||||
{ parentId: '0101', id: '010108', name: '咖啡' },
|
||||
{ parentId: '0101', id: '010109', name: '香料' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '01',
|
||||
parentId: '01',
|
||||
id: '0102',
|
||||
title: '动物性农产品',
|
||||
name: '动物性农产品',
|
||||
children: [
|
||||
{ pId: '0102', id: '010201', title: '肉类' },
|
||||
{ pId: '0102', id: '010202', title: '奶制品' },
|
||||
{ pId: '0102', id: '010203', title: '蛋类' },
|
||||
{ pId: '0102', id: '010204', title: '蜂蜜' },
|
||||
{ pId: '0102', id: '010205', title: '水产品' },
|
||||
{ parentId: '0102', id: '010201', name: '肉类' },
|
||||
{ parentId: '0102', id: '010202', name: '奶制品' },
|
||||
{ parentId: '0102', id: '010203', name: '蛋类' },
|
||||
{ parentId: '0102', id: '010204', name: '蜂蜜' },
|
||||
{ parentId: '0102', id: '010205', name: '水产品' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '01',
|
||||
parentId: '01',
|
||||
id: '0103',
|
||||
title: '特殊农产品',
|
||||
name: '特殊农产品',
|
||||
children: [
|
||||
{ pId: '0103', id: '010301', title: '花卉与苗木' },
|
||||
{ pId: '0103', id: '010302', title: '药材' },
|
||||
{ pId: '0103', id: '010303', title: '菌类' },
|
||||
{ parentId: '0103', id: '010301', name: '花卉与苗木' },
|
||||
{ parentId: '0103', id: '010302', name: '药材' },
|
||||
{ parentId: '0103', id: '010303', name: '菌类' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '01',
|
||||
parentId: '01',
|
||||
id: '0104',
|
||||
title: '其他',
|
||||
children: [{ pId: '0104', id: '010401', title: '饲料' }],
|
||||
name: '其他',
|
||||
children: [{ parentId: '0104', id: '010401', name: '饲料' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
title: '种子种苗',
|
||||
name: '种子种苗',
|
||||
children: [
|
||||
{
|
||||
pId: '02',
|
||||
parentId: '02',
|
||||
id: '0101',
|
||||
title: '花卉种子种苗',
|
||||
name: '花卉种子种苗',
|
||||
children: [
|
||||
{ pId: '0101', id: '010101', title: '草本花卉' },
|
||||
{ pId: '0101', id: '010102', title: '木本花卉' },
|
||||
{ pId: '0101', id: '010103', title: '野生花卉' },
|
||||
{ parentId: '0101', id: '010101', name: '草本花卉' },
|
||||
{ parentId: '0101', id: '010102', name: '木本花卉' },
|
||||
{ parentId: '0101', id: '010103', name: '野生花卉' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '02',
|
||||
parentId: '02',
|
||||
id: '0102',
|
||||
title: '蔬菜种子种苗',
|
||||
name: '蔬菜种子种苗',
|
||||
children: [
|
||||
{ pId: '0102', id: '010201', title: '叶菜类' },
|
||||
{ pId: '0102', id: '010202', title: '根茎类' },
|
||||
{ pId: '0102', id: '010203', title: '果实类' },
|
||||
{ pId: '0102', id: '010204', title: '豆类' },
|
||||
{ pId: '0102', id: '010205', title: '瓜类' },
|
||||
{ parentId: '0102', id: '010201', name: '叶菜类' },
|
||||
{ parentId: '0102', id: '010202', name: '根茎类' },
|
||||
{ parentId: '0102', id: '010203', name: '果实类' },
|
||||
{ parentId: '0102', id: '010204', name: '豆类' },
|
||||
{ parentId: '0102', id: '010205', name: '瓜类' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '02',
|
||||
parentId: '02',
|
||||
id: '0103',
|
||||
title: '果树种苗',
|
||||
name: '果树种苗',
|
||||
children: [
|
||||
{ pId: '0103', id: '010301', title: '柑橘类' },
|
||||
{ pId: '0103', id: '010302', title: '仁果类' },
|
||||
{ pId: '0103', id: '010303', title: '核果类' },
|
||||
{ pId: '0103', id: '010304', title: '浆果类' },
|
||||
{ parentId: '0103', id: '010301', name: '柑橘类' },
|
||||
{ parentId: '0103', id: '010302', name: '仁果类' },
|
||||
{ parentId: '0103', id: '010303', name: '核果类' },
|
||||
{ parentId: '0103', id: '010304', name: '浆果类' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '02',
|
||||
parentId: '02',
|
||||
id: '0104',
|
||||
title: '药材种子与种苗',
|
||||
name: '药材种子与种苗',
|
||||
children: [
|
||||
{ pId: '0104', id: '010401', title: '寒地龙药' },
|
||||
{ pId: '0104', id: '010402', title: '常见中药材' },
|
||||
{ parentId: '0104', id: '010401', name: '寒地龙药' },
|
||||
{ parentId: '0104', id: '010402', name: '常见中药材' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '02',
|
||||
parentId: '02',
|
||||
id: '0105',
|
||||
title: '其他作物',
|
||||
name: '其他作物',
|
||||
children: [
|
||||
{ pId: '0105', id: '010501', title: '牧草' },
|
||||
{ pId: '0105', id: '010502', title: '经济作物' },
|
||||
{ pId: '0105', id: '010503', title: '观赏树木' },
|
||||
{ parentId: '0105', id: '010501', name: '牧草' },
|
||||
{ parentId: '0105', id: '010502', name: '经济作物' },
|
||||
{ parentId: '0105', id: '010503', name: '观赏树木' },
|
||||
],
|
||||
},
|
||||
],
|
||||
@ -230,38 +230,36 @@ onMounted(() => {
|
||||
.purchaser-index-warp {
|
||||
width: 100%;
|
||||
.purchaser-top {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
.purchaser-top-title {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
.purchaser-charts {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hot-list-warp {
|
||||
background: $color-fff;
|
||||
margin: 16px 0;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
margin: 16px 0;
|
||||
|
||||
background: $color-fff;
|
||||
::v-deep() {
|
||||
thead {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
}
|
||||
thead th {
|
||||
background: $color-main-table-header;
|
||||
color: $color-999 !important;
|
||||
border: none !important;
|
||||
padding: 16px 0;
|
||||
border: none !important;
|
||||
color: $color-999 !important;
|
||||
background: $color-main-table-header;
|
||||
}
|
||||
thead th:first-child {
|
||||
border-top-left-radius: 16px;
|
||||
|
||||
@ -254,18 +254,18 @@ onMounted(() => {
|
||||
.purchaser-detail-warp {
|
||||
width: 100%;
|
||||
.block-title {
|
||||
padding: 8px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.purchaser-detail-top {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
.top-title {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
@ -279,22 +279,20 @@ onMounted(() => {
|
||||
font-size: 18px;
|
||||
}
|
||||
.current-title {
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
padding: 0 8px;
|
||||
font-size: 16px;
|
||||
color: $color-main;
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.current-title::before {
|
||||
content: '.';
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
content: '.';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.purchaser-info {
|
||||
margin: 16px 0;
|
||||
.purchaser-info-l {
|
||||
@ -308,19 +306,18 @@ onMounted(() => {
|
||||
vertical-align: top;
|
||||
}
|
||||
.img {
|
||||
overflow: hidden;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: calc(100% - 160px);
|
||||
padding-left: 16px;
|
||||
width: calc(100% - 160px);
|
||||
.title-warp {
|
||||
width: 100%;
|
||||
.txt,
|
||||
@ -334,7 +331,6 @@ onMounted(() => {
|
||||
}
|
||||
.icon-warp {
|
||||
display: inline-block;
|
||||
|
||||
width: 80px;
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
@ -351,37 +347,37 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
.is-auth {
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
width: 100%;
|
||||
span {
|
||||
background: $color-main-table-header;
|
||||
border: 1px solid $color-main-border;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
color: $color-main;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
border: 1px solid $color-main-border;
|
||||
border-radius: 8px;
|
||||
color: $color-main;
|
||||
background: $color-main-table-header;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.settled-time {
|
||||
width: 100%;
|
||||
span {
|
||||
font-size: 20px;
|
||||
color: $color-999;
|
||||
font-weight: 500;
|
||||
color: $color-999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.purchaser-info-r {
|
||||
.addr {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
color: $color-666;
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
@ -390,44 +386,42 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.purchase-info-total {
|
||||
.info-total-item {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
margin: 8px 0;
|
||||
width: 100%;
|
||||
.label,
|
||||
.val {
|
||||
display: -webkit-inline-box;
|
||||
vertical-align: top;
|
||||
}
|
||||
.label {
|
||||
color: $color-999;
|
||||
font-size: 18px;
|
||||
max-width: 180px;
|
||||
font-size: 18px;
|
||||
color: $color-999;
|
||||
}
|
||||
.val {
|
||||
font-size: 20px;
|
||||
max-width: calc(100% - 180px);
|
||||
color: $color-666;
|
||||
font-size: 20px;
|
||||
text-align: right;
|
||||
color: $color-666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contant-wrap {
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
.contant-btn {
|
||||
background: $color-main;
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
color: $color-fff;
|
||||
display: inline-block;
|
||||
background: $color-main;
|
||||
line-height: 48px;
|
||||
.iconfont,
|
||||
span {
|
||||
display: inline-block;
|
||||
@ -444,23 +438,21 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hot-list-warp {
|
||||
background: $color-fff;
|
||||
margin: 16px 0;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
margin: 16px 0;
|
||||
|
||||
background: $color-fff;
|
||||
::v-deep() {
|
||||
thead {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
}
|
||||
thead th {
|
||||
background: $color-main-table-header;
|
||||
color: $color-999 !important;
|
||||
border: none !important;
|
||||
padding: 16px 0;
|
||||
border: none !important;
|
||||
color: $color-999 !important;
|
||||
background: $color-main-table-header;
|
||||
}
|
||||
thead th:first-child {
|
||||
border-top-left-radius: 16px;
|
||||
|
||||
@ -225,57 +225,57 @@ const toBack = (level) => {
|
||||
<style lang="scss" scoped>
|
||||
.source-code-detail-warp {
|
||||
.source-code-detail-info {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
.top-warp-b {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 488px;
|
||||
position: relative;
|
||||
}
|
||||
.top-img-txt {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 42%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.top-bottom-warp {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 24px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
padding: 0 32px;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
gap: 32px;
|
||||
padding: 0 32px;
|
||||
.top-bottom-item {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: calc(100% / 5 - 28px);
|
||||
height: 80px;
|
||||
background: linear-gradient(180deg, #ffbe4d, #ffffff);
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
background: linear-gradient(180deg, #ffbe4d, #ffffff);
|
||||
.bottom-item-img {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
.father-title,
|
||||
.current-title {
|
||||
@ -293,32 +293,30 @@ const toBack = (level) => {
|
||||
padding-left: 16px;
|
||||
}
|
||||
.father-after::after {
|
||||
content: '.';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 30%;
|
||||
left: 4px;
|
||||
content: '.';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.current-title {
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
padding: 0 8px;
|
||||
font-size: 16px;
|
||||
color: $color-main;
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.current-title::before {
|
||||
content: '.';
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
content: '.';
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content-warp {
|
||||
padding: 0 32px 32px;
|
||||
width: 100%;
|
||||
padding: 0 32px 32px 32px;
|
||||
.text-main {
|
||||
color: $color-main !important;
|
||||
}
|
||||
@ -326,39 +324,38 @@ const toBack = (level) => {
|
||||
color: $color-danger !important;
|
||||
}
|
||||
.des-item {
|
||||
width: 100%;
|
||||
margin: 3px 0;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
margin: 3px 0;
|
||||
width: 100%;
|
||||
.label,
|
||||
.val {
|
||||
vertical-align: top;
|
||||
font-size: 18px;
|
||||
}
|
||||
.label {
|
||||
color: $color-999;
|
||||
width: 150px;
|
||||
text-align: left;
|
||||
color: $color-999;
|
||||
}
|
||||
.val {
|
||||
color: $color-333;
|
||||
text-align: right;
|
||||
width: calc(100% - 150px);
|
||||
text-align: right;
|
||||
color: $color-333;
|
||||
}
|
||||
}
|
||||
|
||||
.farming-content {
|
||||
::v-deep() {
|
||||
thead {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
}
|
||||
thead th {
|
||||
background: $color-main-table-header;
|
||||
color: $color-999 !important;
|
||||
border: none !important;
|
||||
padding: 10px 0;
|
||||
font-size: 16px !important;
|
||||
border: none !important;
|
||||
color: $color-999 !important;
|
||||
background: $color-main-table-header;
|
||||
}
|
||||
thead th:first-child {
|
||||
border-top-left-radius: 16px;
|
||||
@ -372,31 +369,29 @@ const toBack = (level) => {
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
tbody td {
|
||||
border: none !important;
|
||||
font-size: 16px !important;
|
||||
border: none !important;
|
||||
}
|
||||
.el-table__inner-wrapper::before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-content {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.link-content-pos {
|
||||
margin: 64px auto;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
margin: 64px auto;
|
||||
gap: 120px;
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.img-tips {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
.report,
|
||||
@ -413,24 +408,23 @@ const toBack = (level) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep() {
|
||||
.el-tabs__nav {
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-tabs__nav-wrap:after {
|
||||
.el-tabs__nav-wrap::after {
|
||||
background: transparent !important;
|
||||
}
|
||||
.el-tabs__item {
|
||||
font-size: 20px !important;
|
||||
width: 20% !important;
|
||||
padding: 0 !important;
|
||||
width: 20% !important;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
left: 7% !important;
|
||||
width: 40px !important;
|
||||
height: 5px !important;
|
||||
border-radius: 4px;
|
||||
width: 40px !important;
|
||||
left: 7% !important;
|
||||
}
|
||||
.el-descriptions__label,
|
||||
.el-descriptions__content {
|
||||
@ -446,11 +440,10 @@ const toBack = (level) => {
|
||||
color: $color-333;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep() {
|
||||
.ecommerce-banner {
|
||||
padding: 0 48px !important;
|
||||
position: relative;
|
||||
padding: 0 48px !important;
|
||||
}
|
||||
.el-carousel {
|
||||
position: unset !important;
|
||||
|
||||
@ -26,108 +26,108 @@ import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||||
let treeList = reactive([
|
||||
{
|
||||
id: '01',
|
||||
title: '农产品',
|
||||
name: '农产品',
|
||||
children: [
|
||||
{
|
||||
pId: '01',
|
||||
parentId: '01',
|
||||
id: '0101',
|
||||
title: '植物性农产品',
|
||||
name: '植物性农产品',
|
||||
children: [
|
||||
{ pId: '0101', id: '010101', title: '谷物' },
|
||||
{ pId: '0101', id: '010102', title: '蔬菜' },
|
||||
{ pId: '0101', id: '010103', title: '水果' },
|
||||
{ pId: '0101', id: '010104', title: '坚果与油料作物' },
|
||||
{ pId: '0101', id: '010105', title: '糖料作物' },
|
||||
{ pId: '0101', id: '010106', title: '纤维作物' },
|
||||
{ pId: '0101', id: '010107', title: '茶叶' },
|
||||
{ pId: '0101', id: '010108', title: '咖啡' },
|
||||
{ pId: '0101', id: '010109', title: '香料' },
|
||||
{ parentId: '0101', id: '010101', name: '谷物' },
|
||||
{ parentId: '0101', id: '010102', name: '蔬菜' },
|
||||
{ parentId: '0101', id: '010103', name: '水果' },
|
||||
{ parentId: '0101', id: '010104', name: '坚果与油料作物' },
|
||||
{ parentId: '0101', id: '010105', name: '糖料作物' },
|
||||
{ parentId: '0101', id: '010106', name: '纤维作物' },
|
||||
{ parentId: '0101', id: '010107', name: '茶叶' },
|
||||
{ parentId: '0101', id: '010108', name: '咖啡' },
|
||||
{ parentId: '0101', id: '010109', name: '香料' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '01',
|
||||
parentId: '01',
|
||||
id: '0102',
|
||||
title: '动物性农产品',
|
||||
name: '动物性农产品',
|
||||
children: [
|
||||
{ pId: '0102', id: '010201', title: '肉类' },
|
||||
{ pId: '0102', id: '010202', title: '奶制品' },
|
||||
{ pId: '0102', id: '010203', title: '蛋类' },
|
||||
{ pId: '0102', id: '010204', title: '蜂蜜' },
|
||||
{ pId: '0102', id: '010205', title: '水产品' },
|
||||
{ parentId: '0102', id: '010201', name: '肉类' },
|
||||
{ parentId: '0102', id: '010202', name: '奶制品' },
|
||||
{ parentId: '0102', id: '010203', name: '蛋类' },
|
||||
{ parentId: '0102', id: '010204', name: '蜂蜜' },
|
||||
{ parentId: '0102', id: '010205', name: '水产品' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '01',
|
||||
parentId: '01',
|
||||
id: '0103',
|
||||
title: '特殊农产品',
|
||||
name: '特殊农产品',
|
||||
children: [
|
||||
{ pId: '0103', id: '010301', title: '花卉与苗木' },
|
||||
{ pId: '0103', id: '010302', title: '药材' },
|
||||
{ pId: '0103', id: '010303', title: '菌类' },
|
||||
{ parentId: '0103', id: '010301', name: '花卉与苗木' },
|
||||
{ parentId: '0103', id: '010302', name: '药材' },
|
||||
{ parentId: '0103', id: '010303', name: '菌类' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '01',
|
||||
parentId: '01',
|
||||
id: '0104',
|
||||
title: '其他',
|
||||
children: [{ pId: '0104', id: '010401', title: '饲料' }],
|
||||
name: '其他',
|
||||
children: [{ parentId: '0104', id: '010401', name: '饲料' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
title: '种子种苗',
|
||||
name: '种子种苗',
|
||||
children: [
|
||||
{
|
||||
pId: '02',
|
||||
parentId: '02',
|
||||
id: '0101',
|
||||
title: '花卉种子种苗',
|
||||
name: '花卉种子种苗',
|
||||
children: [
|
||||
{ pId: '0101', id: '010101', title: '草本花卉' },
|
||||
{ pId: '0101', id: '010102', title: '木本花卉' },
|
||||
{ pId: '0101', id: '010103', title: '野生花卉' },
|
||||
{ parentId: '0101', id: '010101', name: '草本花卉' },
|
||||
{ parentId: '0101', id: '010102', name: '木本花卉' },
|
||||
{ parentId: '0101', id: '010103', name: '野生花卉' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '02',
|
||||
parentId: '02',
|
||||
id: '0102',
|
||||
title: '蔬菜种子种苗',
|
||||
name: '蔬菜种子种苗',
|
||||
children: [
|
||||
{ pId: '0102', id: '010201', title: '叶菜类' },
|
||||
{ pId: '0102', id: '010202', title: '根茎类' },
|
||||
{ pId: '0102', id: '010203', title: '果实类' },
|
||||
{ pId: '0102', id: '010204', title: '豆类' },
|
||||
{ pId: '0102', id: '010205', title: '瓜类' },
|
||||
{ parentId: '0102', id: '010201', name: '叶菜类' },
|
||||
{ parentId: '0102', id: '010202', name: '根茎类' },
|
||||
{ parentId: '0102', id: '010203', name: '果实类' },
|
||||
{ parentId: '0102', id: '010204', name: '豆类' },
|
||||
{ parentId: '0102', id: '010205', name: '瓜类' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '02',
|
||||
parentId: '02',
|
||||
id: '0103',
|
||||
title: '果树种苗',
|
||||
name: '果树种苗',
|
||||
children: [
|
||||
{ pId: '0103', id: '010301', title: '柑橘类' },
|
||||
{ pId: '0103', id: '010302', title: '仁果类' },
|
||||
{ pId: '0103', id: '010303', title: '核果类' },
|
||||
{ pId: '0103', id: '010304', title: '浆果类' },
|
||||
{ parentId: '0103', id: '010301', name: '柑橘类' },
|
||||
{ parentId: '0103', id: '010302', name: '仁果类' },
|
||||
{ parentId: '0103', id: '010303', name: '核果类' },
|
||||
{ parentId: '0103', id: '010304', name: '浆果类' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '02',
|
||||
parentId: '02',
|
||||
id: '0104',
|
||||
title: '药材种子与种苗',
|
||||
name: '药材种子与种苗',
|
||||
children: [
|
||||
{ pId: '0104', id: '010401', title: '寒地龙药' },
|
||||
{ pId: '0104', id: '010402', title: '常见中药材' },
|
||||
{ parentId: '0104', id: '010401', name: '寒地龙药' },
|
||||
{ parentId: '0104', id: '010402', name: '常见中药材' },
|
||||
],
|
||||
},
|
||||
{
|
||||
pId: '02',
|
||||
parentId: '02',
|
||||
id: '0105',
|
||||
title: '其他作物',
|
||||
name: '其他作物',
|
||||
children: [
|
||||
{ pId: '0105', id: '010501', title: '牧草' },
|
||||
{ pId: '0105', id: '010502', title: '经济作物' },
|
||||
{ pId: '0105', id: '010503', title: '观赏树木' },
|
||||
{ parentId: '0105', id: '010501', name: '牧草' },
|
||||
{ parentId: '0105', id: '010502', name: '经济作物' },
|
||||
{ parentId: '0105', id: '010503', name: '观赏树木' },
|
||||
],
|
||||
},
|
||||
],
|
||||
@ -138,23 +138,24 @@ let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerc
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.goods-list-warp {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
.goods-list {
|
||||
width: 100%;
|
||||
.goods-list {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
.goods-item {
|
||||
display: inline-block;
|
||||
width: calc((100% - 50px) / 5);
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
width: calc((100% - 50px) / 5);
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加伪元素占位 */
|
||||
.goods-list::after {
|
||||
content: '';
|
||||
|
||||
@ -18,11 +18,11 @@ import { ref } from 'vue';
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.framing_service_content {
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid skyblue;
|
||||
padding: 0 32px;
|
||||
width: 1200px;
|
||||
min-height: 600px;
|
||||
border: 1px solid skyblue;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -68,20 +68,23 @@ const menus = reactive([
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
margin: auto;
|
||||
width: $width-main;
|
||||
height: 100%;
|
||||
.left-menu,
|
||||
.common-content {
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
height: calc(100% - 16px);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.left-menu {
|
||||
width: 240px;
|
||||
background: $color-fff;
|
||||
}
|
||||
.common-content {
|
||||
width: calc(100% - 240px);
|
||||
margin-left: 16px;
|
||||
width: calc(100% - 240px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</div>
|
||||
<div v-if="n.children && n.isOpen" class="item-children">
|
||||
<div v-for="(item, indexC) in n.children" :key="indexC">
|
||||
<ul style="list-style-type: disc !important; padding-left: 40px; text-align: left; overflow: visible">
|
||||
<ul style="overflow: visible; padding-left: 40px; text-align: left; list-style-type: disc !important">
|
||||
<li :class="indexC === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, indexC)">
|
||||
<div class="dot"></div>
|
||||
{{ item.title }}
|
||||
@ -126,20 +126,20 @@ const openList = (index) => {
|
||||
.isOpen {
|
||||
position: absolute;
|
||||
right: -24px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.active {
|
||||
color: $color-main;
|
||||
}
|
||||
.smartFarm-left-menu-warp {
|
||||
padding: 0 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 30px;
|
||||
.left-menu {
|
||||
.left-menu-item {
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: $color-main;
|
||||
@ -154,20 +154,20 @@ const openList = (index) => {
|
||||
height: 32px;
|
||||
}
|
||||
.item-title {
|
||||
padding-left: 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.item-children {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
margin-top: 8px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease;
|
||||
.dot {
|
||||
display: inline-block;
|
||||
height: 4px;
|
||||
margin-right: 15px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 90px;
|
||||
background-color: black;
|
||||
vertical-align: middle;
|
||||
|
||||
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="ecommerce-common-warp">
|
||||
<div class="ecommerce-common-content">
|
||||
<div class="left-menu">
|
||||
<slot v-if="$slots.left" name="left"></slot>
|
||||
<template v-else>
|
||||
<leftMenu :current-name="currentName"></leftMenu>
|
||||
</template>
|
||||
</div>
|
||||
<div class="common-content">
|
||||
<slot v-if="$slots.main" name="main"></slot>
|
||||
<template v-else></template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import leftMenu from './leftMenu.vue';
|
||||
|
||||
const props = defineProps({
|
||||
currentName: { type: String, default: 'agricultural' },
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ecommerce-common-warp {
|
||||
width: 100%;
|
||||
|
||||
// height: calc(100vh - 230px);
|
||||
text-align: center;
|
||||
.ecommerce-common-content {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
margin: auto;
|
||||
width: $width-main;
|
||||
height: 100%;
|
||||
.left-menu,
|
||||
.common-content {
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
|
||||
// height: calc(100% - 16px);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.left-menu {
|
||||
width: 240px;
|
||||
background: $color-fff;
|
||||
}
|
||||
.common-content {
|
||||
margin-left: 16px;
|
||||
width: calc(100% - 240px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -41,12 +41,12 @@ const doCheck = () => {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.c-is-check {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border-radius: 20%;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border-radius: 20%;
|
||||
&.normal {
|
||||
border: 1px solid $color-999;
|
||||
background: $color-fff;
|
||||
@ -55,16 +55,15 @@ const doCheck = () => {
|
||||
border: 1px solid $color-main;
|
||||
background: $color-main;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
.el-icon {
|
||||
color: $color-fff;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: $color-fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="ecommerce-left-menu-warp">
|
||||
<div class="left-menu">
|
||||
<div>
|
||||
<img :src="getAssetsFile('images/logo.png')?.href" style="width: 90%; height: 80px" />
|
||||
</div>
|
||||
<view
|
||||
v-for="(n, index) in leftMenu"
|
||||
:key="index"
|
||||
class="left-menu-item"
|
||||
:class="currentIndex == index ? 'active' : ''"
|
||||
@click="toLink(n, index)"
|
||||
>
|
||||
<div class="item-img">
|
||||
<img :src="getAssetsFile('images/userCenter/' + n.icon)?.href ?? ''" />
|
||||
</div>
|
||||
<p class="item-title">{{ n.title }}</p>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="home">
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps({
|
||||
currentName: { type: String, default: 'agricultural' },
|
||||
});
|
||||
|
||||
const leftMenu = reactive([
|
||||
{ name: 'agricultural', title: '我的购物车', icon: 'menu1.png', path: '/sub-operation-service/userCenter' },
|
||||
{ name: 'supplier', title: '我的订单', icon: 'menu2-1.png', path: '/sub-operation-service/userOrders' },
|
||||
{ name: 'purchaser', title: '我的土地', icon: 'menu3-1.png', path: '/sub-operation-service/userLands' },
|
||||
]);
|
||||
|
||||
let currentIndex = ref(0);
|
||||
|
||||
watch(
|
||||
() => props.currentName,
|
||||
() => {
|
||||
console.info('currentName', props.currentName);
|
||||
currentIndex.value = leftMenu.findIndex((m) => {
|
||||
return m.name == props.currentName;
|
||||
});
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
//监听currentIndex变化
|
||||
watch(
|
||||
() => currentIndex.value,
|
||||
() => {
|
||||
console.info('currentIndex', currentIndex.value);
|
||||
leftMenu.forEach((item, index) => {
|
||||
// 处理图标数据，如果没有有 -1 后缀，则添加
|
||||
if (!item.icon.includes('-1')) {
|
||||
// 仅处理不包含 -1 的项
|
||||
const [name, ext] = item.icon.split('.');
|
||||
item.icon = `${name}-1.${ext}`; // 添加 -1
|
||||
}
|
||||
if (index == currentIndex.value) {
|
||||
// // 如果是当前项，则去掉 -1 后缀
|
||||
item.icon = item.icon.replace('-1', '');
|
||||
}
|
||||
});
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
const toLink = (n, index) => {
|
||||
// console.log('leftMenu', leftMenu);
|
||||
|
||||
currentIndex.value = index;
|
||||
|
||||
// leftMenu.forEach((item, i) => {
|
||||
// // 处理图标数据，如果没有有 -1 后缀，则添加
|
||||
// if (!item.icon.includes('-1')) {
|
||||
// // 仅处理不包含 -1 的项
|
||||
// const [name, ext] = item.icon.split('.');
|
||||
// item.icon = `${name}-1.${ext}`; // 添加 -1
|
||||
// }
|
||||
// // 如果是当前项，则去掉 -1 后缀
|
||||
// if (i == index) {
|
||||
// item.icon = item.icon.replace('-1', '');
|
||||
// }
|
||||
// });
|
||||
console.log('currentIndex.value', currentIndex.value);
|
||||
|
||||
router.push(n.path);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ecommerce-left-menu-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.left-menu {
|
||||
.left-menu-item {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
padding: 16px 0;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: $color-main;
|
||||
}
|
||||
.item-img,
|
||||
.item-title {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.item-img {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.item-title {
|
||||
display: -webkit-inline-box;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -5,7 +5,14 @@
|
||||
</div>
|
||||
<div class="top-right">
|
||||
<div v-for="(n, index) in linkList" :key="n.name" class="right-item" :class="currentLink == n.name ? 'act' : ''" @click="toLink(n)">
|
||||
<!-- 只有满足条件的项显示 Tooltip -->
|
||||
<el-tooltip v-if="n.title === '我的'" class="box-item" placement="bottom">
|
||||
<template #content> multiple lines<br />second line </template>
|
||||
<div class="iconfont" :class="'icon-' + n.icon" :style="{ 'font-size': n.iconSize }"></div>
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 其他项直接显示图标（无 Tooltip） -->
|
||||
<div v-else class="iconfont" :class="'icon-' + n.icon" :style="{ 'font-size': n.iconSize }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,53 +59,53 @@ const toLink = (item) => {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.c-user-page-top {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
.title,
|
||||
.top-right {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
flex-direction: column;
|
||||
.title-pos {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
.top-right {
|
||||
justify-content: flex-start;
|
||||
gap: 40px;
|
||||
.right-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: $color-fff;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
&.act {
|
||||
background: $color-main-table-header !important;
|
||||
border: 1px solid $color-fff;
|
||||
background: $color-main-table-header !important;
|
||||
.iconfont {
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-item:hover {
|
||||
background: $color-main-table-header !important;
|
||||
border: 1px solid $color-fff;
|
||||
background: $color-main-table-header !important;
|
||||
.iconfont {
|
||||
color: $color-main;
|
||||
}
|
||||
|
||||
@ -1,23 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<common current-name="agricultural">
|
||||
<template #main>
|
||||
<div class="order-success-warp">
|
||||
<userHeader :title="'订单提交成功'"></userHeader>
|
||||
<userHeader :title="'我的购物车 (' + total + ')'"></userHeader>
|
||||
<div class="order-success-content">
|
||||
<div class="content-top">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="14" align="left">
|
||||
<el-col :span="16" align="left">
|
||||
<div class="back">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
</div>
|
||||
<div class="status">
|
||||
<el-icon @click="back"><ArrowLeftBold /></el-icon>
|
||||
<div class="status-val">
|
||||
<el-icon><SuccessFilled /></el-icon>
|
||||
<span>{{ '订单提交成功' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status">
|
||||
<!-- <div class="status-val">
|
||||
<el-icon><SuccessFilled /></el-icon>
|
||||
<span>{{ '订单提交成功' }}</span>
|
||||
</div> -->
|
||||
<div class="tips">请您及时付款，以便订单尽快完成！</div>
|
||||
<div class="sub-tips">请您在提交订单后 <span class="txt-main">0时29分59秒</span> 内完成支付，否则订单会自动取消。</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10" align="right">
|
||||
<el-col :span="8" align="right">
|
||||
<div class="pay-amount">
|
||||
<span class="tips">实付款：</span> <span class="total">{{ totalAmout.toFixed(2) }}</span>
|
||||
</div>
|
||||
@ -27,7 +34,7 @@
|
||||
</div>
|
||||
|
||||
<div class="pay-style-warp">
|
||||
<div class="title">支付方式</div>
|
||||
<div class="title" @click="paySuccess">支付方式</div>
|
||||
<div class="pay-list">
|
||||
<div class="pay-list-pos">
|
||||
<div
|
||||
@ -69,8 +76,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import common from './components/common.vue';
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
@ -80,6 +91,7 @@ import { qrImg } from '@/layouts/component/Header/base64img.js';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
let totalAmout = ref(196);
|
||||
let total = ref(99);
|
||||
|
||||
let styleList = reactive([
|
||||
{ title: '支付宝', name: 'alipay', icon: 'alipay', color: 'rgb(0, 159, 232)' },
|
||||
@ -91,6 +103,10 @@ let currentPay = ref('wx');
|
||||
const selectPayStyle = (name) => {
|
||||
currentPay.value = name;
|
||||
};
|
||||
//返回
|
||||
let back = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
let currentIndex = computed(() => {
|
||||
let index = -1;
|
||||
@ -101,33 +117,41 @@ let currentIndex = computed(() => {
|
||||
});
|
||||
|
||||
let payAmout = ref(147);
|
||||
|
||||
// 支付成功
|
||||
let paySuccess = () => {
|
||||
router.push('/sub-operation-service/paySuccess');
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.order-success-warp {
|
||||
width: 100%;
|
||||
.order-success-content {
|
||||
width: 100%;
|
||||
background: $color-fff;
|
||||
height: calc(100vh - 136px);
|
||||
margin-top: 16px;
|
||||
border-radius: 16px;
|
||||
overflow-y: auto;
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 136px);
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
.content-top {
|
||||
background: $color-main-table-header;
|
||||
padding: 16px;
|
||||
background: $color-main-table-header;
|
||||
.back,
|
||||
.status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding-left: 16px;
|
||||
.status-val {
|
||||
color: $color-main;
|
||||
.el-icon {
|
||||
font-size: 38px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
float: right;
|
||||
font-size: 26px;
|
||||
color: $color-main;
|
||||
margin-left: 20px;
|
||||
.el-icon {
|
||||
display: inline-block;
|
||||
font-size: 32px;
|
||||
vertical-align: middle;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
font-size: 20px;
|
||||
@ -137,13 +161,16 @@ let payAmout = ref(147);
|
||||
color: $color-999;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
padding-left: 70px;
|
||||
}
|
||||
.back {
|
||||
cursor: pointer;
|
||||
.el-icon {
|
||||
font-size: 30px;
|
||||
margin-top: 8px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-amount {
|
||||
padding-top: 24px;
|
||||
.tips {
|
||||
@ -158,23 +185,23 @@ let payAmout = ref(147);
|
||||
}
|
||||
}
|
||||
.order-no {
|
||||
color: $color-999;
|
||||
font-size: 16px;
|
||||
color: $color-999;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-style-warp {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
.title {
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.pay-list {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
margin: 64px 0;
|
||||
|
||||
width: 100%;
|
||||
.pay-list-pos {
|
||||
display: inline-flex;
|
||||
@ -182,10 +209,10 @@ let payAmout = ref(147);
|
||||
gap: 64px;
|
||||
}
|
||||
.pay-item {
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
gap: 16px;
|
||||
cursor: pointer;
|
||||
.is-style,
|
||||
@ -209,16 +236,16 @@ let payAmout = ref(147);
|
||||
font-size: 20px;
|
||||
}
|
||||
.style-icon {
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
color: $color-fff;
|
||||
transform: translate(-50%, -50%);
|
||||
&.icon-alipay {
|
||||
font-size: 46px !important;
|
||||
}
|
||||
@ -227,7 +254,6 @@ let payAmout = ref(147);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pay-act {
|
||||
border: 1px solid $color-main;
|
||||
.is-style {
|
||||
@ -246,10 +272,9 @@ let payAmout = ref(147);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-code {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.pay-tips {
|
||||
.tips,
|
||||
.pay-amount {
|
||||
@ -261,8 +286,8 @@ let payAmout = ref(147);
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.tips-pos {
|
||||
font-size: 20px;
|
||||
margin-top: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.pay-amount {
|
||||
@ -274,12 +299,11 @@ let payAmout = ref(147);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-code-img {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin: 24px 0;
|
||||
width: 100%;
|
||||
.code-img {
|
||||
display: inline-block;
|
||||
width: 240px;
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<common current-name="agricultural">
|
||||
<template #main>
|
||||
<div class="pay-success-warp">
|
||||
<userHeader :title="'支付成功'"></userHeader>
|
||||
<userHeader :title="'我的购物车 (' + total + ')'"></userHeader>
|
||||
|
||||
<div class="pay-success-content">
|
||||
<div class="icon-img">
|
||||
@ -13,7 +16,7 @@
|
||||
<div class="success-do">
|
||||
<div class="success-do-pos">
|
||||
<div class="do-item">
|
||||
<el-button @click="toLink('/sub-operation-service/userCenter-userOrders')">查看订单</el-button>
|
||||
<el-button @click="toLink('/sub-operation-service/userOrders')">查看订单</el-button>
|
||||
</div>
|
||||
<div class="do-item">
|
||||
<el-button type="primary" @click="toLink('/sub-operation-service/home')">返回首页</el-button>
|
||||
@ -22,8 +25,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import common from './components/common.vue';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
@ -31,6 +38,8 @@ import userHeader from './components/userHeader.vue';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
let total = ref(99);
|
||||
|
||||
const toLink = (path) => {
|
||||
if (path && path != '') {
|
||||
router.push(path);
|
||||
@ -40,23 +49,21 @@ const toLink = (path) => {
|
||||
<style lang="scss" scoped>
|
||||
.pay-success-warp {
|
||||
width: 100%;
|
||||
|
||||
.pay-success-content {
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
padding-top: 64px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 136px);
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
padding-top: 64px;
|
||||
margin-top: 16px;
|
||||
background: $color-fff;
|
||||
.icon-img {
|
||||
.el-icon {
|
||||
font-size: 80px;
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
|
||||
.success-txt {
|
||||
.title {
|
||||
font-size: 38px;
|
||||
@ -67,12 +74,11 @@ const toLink = (path) => {
|
||||
color: $color-999;
|
||||
}
|
||||
}
|
||||
|
||||
.success-do {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
margin: 64px 0;
|
||||
width: 100%;
|
||||
.success-do-pos {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
@ -81,8 +87,8 @@ const toLink = (path) => {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
.el-button {
|
||||
font-size: 20px;
|
||||
padding: 20px 48px !important;
|
||||
font-size: 20px;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<common current-name="agricultural">
|
||||
<template #main>
|
||||
<div class="my-shoping-car-warp">
|
||||
<userHeader :title="'购物车' + total"></userHeader>
|
||||
<userHeader :title="'我的购物车 (' + total + ')'"></userHeader>
|
||||
<div class="page-content-warp">
|
||||
<div class="fix-top">
|
||||
<div class="do-all" @click="toCheckAll">
|
||||
@ -9,7 +12,7 @@
|
||||
<span class="all-txt">全选</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="batch-del">
|
||||
<div class="batch-del" @click="doBatchDel">
|
||||
<el-icon><Delete /></el-icon>
|
||||
<span class="del-txt">批量删除</span>
|
||||
</div>
|
||||
@ -80,13 +83,17 @@
|
||||
<span class="total">{{ totalAmout.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="bottom-do">
|
||||
<el-button type="primary" @click="toSettlement">结算</el-button>
|
||||
<el-button :disabled="datalist.length == 0" :type="datalist.length != 0 ? 'primary' : 'info'" @click="toSettlement">结算</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import common from './components/common.vue';
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
@ -157,7 +164,7 @@ let totalAmout = computed(() => {
|
||||
});
|
||||
|
||||
const toSettlement = () => {
|
||||
router.push('/sub-operation-service/userCenter-sureOrder');
|
||||
router.push('/sub-operation-service/sureOrder');
|
||||
};
|
||||
|
||||
const toCheckAll = () => {
|
||||
@ -243,25 +250,77 @@ const doSingleDel = (indexP, index) => {
|
||||
.catch(() => {});
|
||||
}
|
||||
};
|
||||
//批量删除
|
||||
const doBatchDel = () => {
|
||||
// console.log('ischeck', datalist);
|
||||
const allUnchecked = isAllUnchecked(datalist);
|
||||
console.log(allUnchecked); // true 或 false
|
||||
if (allUnchecked) {
|
||||
app.$message({
|
||||
message: '请先选择要删除的商品',
|
||||
type: 'warning',
|
||||
});
|
||||
} else {
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
// 删除逻辑
|
||||
const filteredData = removeCheckedItems(datalist);
|
||||
// console.log(filteredData);
|
||||
datalist = filteredData;
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
};
|
||||
// 判断是否全部未选中
|
||||
function isAllUnchecked(data) {
|
||||
return data.every((item) => {
|
||||
// 检查当前项的 ischeck 是否为 false
|
||||
const currentUnchecked = item.ischeck === false;
|
||||
// 如果有子项 goodlist，递归检查子项
|
||||
const childrenUnchecked = item.goodlist ? item.goodlist.every((child) => child.ischeck === false) : true;
|
||||
return currentUnchecked && childrenUnchecked;
|
||||
});
|
||||
}
|
||||
//批量删除逻辑
|
||||
function removeCheckedItems(data) {
|
||||
return data.filter((item) => {
|
||||
// 如果父项的 ischeck 为 true，直接过滤掉（包括所有子项）
|
||||
if (item.ischeck === true) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 如果父项的 ischeck 为 false，但子项可能存在 ischeck 为 true 的情况
|
||||
if (item.goodlist) {
|
||||
item.goodlist = item.goodlist.filter((child) => child.ischeck !== true);
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.my-shoping-car-warp {
|
||||
width: 100%;
|
||||
.page-content-warp {
|
||||
width: 100%;
|
||||
height: calc(100vh - 135px);
|
||||
position: relative;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin: 16px 0 0 16px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 135px);
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
.fix-top,
|
||||
.fix-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
z-index: 1;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
background: $color-fff;
|
||||
}
|
||||
.fix-top {
|
||||
@ -272,23 +331,24 @@ const doSingleDel = (indexP, index) => {
|
||||
.batch-del {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
.do-all {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.all-txt {
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
padding-left: 16px;
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.batch-del {
|
||||
border: 1px solid $color-333;
|
||||
border-radius: 16px;
|
||||
padding: 8px 16px;
|
||||
font-size: 16px;
|
||||
border: 1px solid $color-333;
|
||||
border-radius: 16px;
|
||||
.el-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
@ -322,44 +382,44 @@ const doSingleDel = (indexP, index) => {
|
||||
font-size: 30px;
|
||||
}
|
||||
.total {
|
||||
padding-left: 16px;
|
||||
font-size: 42px;
|
||||
color: $color-main;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.total::before {
|
||||
content: '￥';
|
||||
}
|
||||
}
|
||||
.bottom-do {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
::v-deep() {
|
||||
.el-button {
|
||||
font-size: 18px !important;
|
||||
padding: 0 40px !important;
|
||||
line-height: 42px !important;
|
||||
height: 42px !important;
|
||||
display: inline-block !important;
|
||||
padding: 0 40px !important;
|
||||
height: 42px !important;
|
||||
font-size: 18px !important;
|
||||
line-height: 42px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.conetnt-warp {
|
||||
width: 100%;
|
||||
padding: 80px 16px 96px 16px;
|
||||
overflow-y: auto;
|
||||
padding: 80px 16px 96px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.content-item-warp {
|
||||
width: 100%;
|
||||
.content-item {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
.shop-info {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
.shop-do,
|
||||
.shop-img,
|
||||
@ -368,34 +428,34 @@ const doSingleDel = (indexP, index) => {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.shop-img {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.shop-do {
|
||||
width: 30px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.shop-name {
|
||||
width: calc(100% - 62px);
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.good-list {
|
||||
width: 100%;
|
||||
.good-item {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
padding-left: 16px;
|
||||
margin: 8px 0;
|
||||
padding-left: 16px;
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
}
|
||||
.good-do,
|
||||
.good-img,
|
||||
@ -416,19 +476,22 @@ const doSingleDel = (indexP, index) => {
|
||||
height: 120px;
|
||||
}
|
||||
.good-info {
|
||||
width: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 200px;
|
||||
flex-direction: column;
|
||||
.good-info-pos {
|
||||
font-size: 18px;
|
||||
color: $color-666;
|
||||
.txt-ellipsis {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.good-price-num {
|
||||
width: calc(100% - 340px);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
width: calc(100% - 340px);
|
||||
flex-direction: column;
|
||||
.good-price-num-pos {
|
||||
display: inline-flex;
|
||||
@ -442,15 +505,15 @@ const doSingleDel = (indexP, index) => {
|
||||
font-weight: 400;
|
||||
}
|
||||
.total {
|
||||
color: $color-main;
|
||||
font-weight: 700;
|
||||
color: $color-main;
|
||||
}
|
||||
.total::before {
|
||||
content: '￥';
|
||||
}
|
||||
.good-del {
|
||||
color: $color-999;
|
||||
font-size: 16px;
|
||||
color: $color-999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<common current-name="agricultural">
|
||||
<template #main>
|
||||
<div class="sure-order-warp">
|
||||
<userHeader :title="'确认订单'"></userHeader>
|
||||
<userHeader :title="'我的购物车 (' + total + ')'"></userHeader>
|
||||
<div class="addr-list">
|
||||
<div class="addr-list-top">
|
||||
<div class="back">
|
||||
@ -12,11 +15,13 @@
|
||||
<el-scrollbar>
|
||||
<div class="scrollbar-flex-content">
|
||||
<div
|
||||
v-for="item in addrlist"
|
||||
v-for="(item, index) in addrlist"
|
||||
:key="item"
|
||||
class="addr-item"
|
||||
:class="currentAddr == item.id ? 'addr-item-act' : 'addr-item-normal'"
|
||||
@click="selectAddr(item.id)"
|
||||
@mouseover="hoverAddr(true, index)"
|
||||
@mouseleave="hoverAddr(false, index)"
|
||||
>
|
||||
<div class="addr-item-icon">
|
||||
<div class="icon-pos">
|
||||
@ -26,7 +31,10 @@
|
||||
<div class="addr-item-info">
|
||||
<div class="region">{{ item.region || '--' }}</div>
|
||||
<div class="addr">{{ item.addr || '--' }}</div>
|
||||
<div class="link-name">{{ item.linkName }} {{ item.phone }}</div>
|
||||
<div class="link-name">
|
||||
{{ item.linkName }} {{ item.phone }}
|
||||
<span v-if="item.isEditBtn" class="bj" @click="editAddr(item)">编辑</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -124,8 +132,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import common from './components/common.vue';
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import userHeader from './components/userHeader.vue';
|
||||
@ -134,18 +146,32 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const addrlist = reactive([
|
||||
{ id: '001', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 101', linkName: '李先生', phone: '13813575526' },
|
||||
{ id: '002', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 102', linkName: '王先生', phone: '13813575528' },
|
||||
{ id: '003', region: '云南省 昆明市 呈贡区 彩云北路', addr: '星光小区 一单元 1楼 101', linkName: '李女士', phone: '13813575527' },
|
||||
{ id: '004', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 102', linkName: '王女生', phone: '13813565525' },
|
||||
{ id: '005', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 105', linkName: '张女生', phone: '13813565526' },
|
||||
{ id: '001', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 101', linkName: '李先生', phone: '13813575526', isEditBtn: false },
|
||||
{ id: '002', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 102', linkName: '王先生', phone: '13813575528', isEditBtn: false },
|
||||
{ id: '003', region: '云南省 昆明市 呈贡区 彩云北路', addr: '星光小区 一单元 1楼 101', linkName: '李女士', phone: '13813575527', isEditBtn: false },
|
||||
{ id: '004', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 102', linkName: '王女生', phone: '13813565525', isEditBtn: false },
|
||||
{ id: '005', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 105', linkName: '张女生', phone: '13813565526', isEditBtn: false },
|
||||
]);
|
||||
|
||||
let currentAddr = ref('001');
|
||||
let total = ref(99);
|
||||
|
||||
const selectAddr = (data) => {
|
||||
currentAddr.value = data;
|
||||
};
|
||||
//鼠标移入移出事件
|
||||
const hoverAddr = (data, index) => {
|
||||
console.log('data', data, index);
|
||||
addrlist.forEach((item, i) => {
|
||||
if (index == i) {
|
||||
item.isEditBtn = data;
|
||||
}
|
||||
});
|
||||
};
|
||||
//编辑地址
|
||||
const editAddr = (data) => {
|
||||
console.log('data', data);
|
||||
};
|
||||
|
||||
let datalist = reactive([
|
||||
{
|
||||
@ -168,7 +194,7 @@ let datalist = reactive([
|
||||
]);
|
||||
|
||||
const toSureOrder = () => {
|
||||
router.push('/sub-operation-service/userCenter-orderSuccess');
|
||||
router.push('/sub-operation-service/orderSuccess');
|
||||
};
|
||||
|
||||
let carriage = ref(98);
|
||||
@ -217,16 +243,16 @@ let totalNum = computed(() => {
|
||||
.sure-order-warp {
|
||||
width: 100%;
|
||||
.addr-list {
|
||||
background: $color-fff;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin: 16px 0;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
.addr-list-top {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
.back {
|
||||
font-size: 20px;
|
||||
.el-icon {
|
||||
@ -248,13 +274,13 @@ let totalNum = computed(() => {
|
||||
gap: 16px;
|
||||
}
|
||||
.addr-item {
|
||||
width: 280px;
|
||||
padding: 16px 8px;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
cursor: pointer;
|
||||
background: $color-fff;
|
||||
padding: 16px 8px;
|
||||
width: 280px;
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
cursor: pointer;
|
||||
&.addr-item-act {
|
||||
border: 1px solid $color-main;
|
||||
.iconfont {
|
||||
@ -268,6 +294,7 @@ let totalNum = computed(() => {
|
||||
.addr-item-info {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
}
|
||||
.addr-item-icon {
|
||||
display: inline-flex;
|
||||
@ -279,32 +306,37 @@ let totalNum = computed(() => {
|
||||
}
|
||||
}
|
||||
.addr-item-info {
|
||||
font-size: 15px;
|
||||
padding-left: 8px;
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
.region,
|
||||
.link-name {
|
||||
color: $color-999;
|
||||
position: relative;
|
||||
.bj {
|
||||
color: #25bf82;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-info {
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 340px);
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 340px);
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
.order-info-top,
|
||||
.order-bottom,
|
||||
.order-info-list {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
.order-info-top {
|
||||
top: 0;
|
||||
@ -329,57 +361,57 @@ let totalNum = computed(() => {
|
||||
font-size: 30px;
|
||||
}
|
||||
.total {
|
||||
padding-left: 16px;
|
||||
font-size: 42px;
|
||||
color: $color-main;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.total::before {
|
||||
content: '￥';
|
||||
}
|
||||
}
|
||||
.bottom-do {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
::v-deep() {
|
||||
.el-button {
|
||||
font-size: 18px !important;
|
||||
padding: 0 40px !important;
|
||||
line-height: 42px !important;
|
||||
height: 42px !important;
|
||||
display: inline-block !important;
|
||||
padding: 0 40px !important;
|
||||
height: 42px !important;
|
||||
font-size: 18px !important;
|
||||
line-height: 42px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-info-list {
|
||||
position: relative;
|
||||
top: 60px;
|
||||
width: calc(100% - 32px);
|
||||
height: calc(100% - 150px);
|
||||
background: $color-f5;
|
||||
left: 16px;
|
||||
padding: 16px;
|
||||
width: calc(100% - 32px);
|
||||
height: calc(100% - 150px);
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
background: $color-f5;
|
||||
.content-item-warp {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.content-item-header {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.content-item-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.header-th {
|
||||
display: inline-block;
|
||||
margin-bottom: 16px;
|
||||
font-size: 20px;
|
||||
color: $color-999;
|
||||
vertical-align: middle;
|
||||
line-height: 32px;
|
||||
color: $color-999;
|
||||
font-size: 20px;
|
||||
margin-bottom: 16px;
|
||||
&.first {
|
||||
width: 340px;
|
||||
text-align: left;
|
||||
@ -391,21 +423,21 @@ let totalNum = computed(() => {
|
||||
}
|
||||
}
|
||||
.content-item-list {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
.content-item {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
.shop-info {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
.shop-do,
|
||||
.shop-img,
|
||||
@ -414,34 +446,33 @@ let totalNum = computed(() => {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.shop-img {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.shop-do {
|
||||
width: 30px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.shop-name {
|
||||
width: calc(100% - 62px);
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.good-list {
|
||||
width: 100%;
|
||||
.good-item {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
padding-left: 16px;
|
||||
margin: 8px 0;
|
||||
padding-left: 16px;
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
}
|
||||
.good-do,
|
||||
.good-img,
|
||||
@ -462,19 +493,19 @@ let totalNum = computed(() => {
|
||||
height: 120px;
|
||||
}
|
||||
.good-info {
|
||||
width: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 200px;
|
||||
flex-direction: column;
|
||||
.good-info-pos {
|
||||
font-size: 18px;
|
||||
color: $color-666;
|
||||
}
|
||||
}
|
||||
.good-price-num {
|
||||
width: calc(100% - 340px);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
width: calc(100% - 340px);
|
||||
flex-direction: column;
|
||||
.good-price-num-pos {
|
||||
display: inline-flex;
|
||||
@ -488,30 +519,29 @@ let totalNum = computed(() => {
|
||||
font-weight: 400;
|
||||
}
|
||||
.total {
|
||||
color: $color-main;
|
||||
font-weight: 700;
|
||||
color: $color-main;
|
||||
}
|
||||
.total::before {
|
||||
content: '￥';
|
||||
}
|
||||
.good-total {
|
||||
color: $color-main;
|
||||
font-size: 16px;
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-item-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -8px;
|
||||
line-height: 48px;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
line-height: 48px;
|
||||
.num-total,
|
||||
.price-total {
|
||||
display: inline-block;
|
||||
@ -527,10 +557,10 @@ let totalNum = computed(() => {
|
||||
}
|
||||
.num-total {
|
||||
.num-val {
|
||||
color: $color-main;
|
||||
padding: 0 8px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,29 @@
|
||||
<template>
|
||||
<div class="user-lands-warp">我的土地</div>
|
||||
<div>
|
||||
<common current-name="purchaser">
|
||||
<template #main>
|
||||
<div class="user-orders-warp">
|
||||
<userHeader :title="'我的土地'"></userHeader>
|
||||
<div class="user-orders-content">
|
||||
<div class="order-tab">
|
||||
<el-tabs v-model="activeCurrent">
|
||||
<el-tab-pane v-for="(t, indext) in bottomList" :key="indext" :label="t.title" :name="t.name"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<div class="order-list-warp">我的土地</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import common from './components/common.vue';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import userHeader from './components/userHeader.vue';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<common current-name="supplier">
|
||||
<template #main>
|
||||
<div class="user-orders-warp">
|
||||
<userHeader :title="'订单管理'"></userHeader>
|
||||
<div class="user-orders-content">
|
||||
@ -74,8 +77,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import common from './components/common.vue';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
@ -138,18 +145,17 @@ const doCancel = () => {};
|
||||
.user-orders-warp {
|
||||
width: 100%;
|
||||
.user-orders-content {
|
||||
width: 100%;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 136px);
|
||||
border-radius: 16px;
|
||||
background: $color-fff;
|
||||
}
|
||||
.order-tab {
|
||||
width: 100%;
|
||||
|
||||
::v-deep() {
|
||||
.el-tabs__nav-wrap:after {
|
||||
.el-tabs__nav-wrap::after {
|
||||
background: transparent !important;
|
||||
}
|
||||
.el-tabs__item {
|
||||
@ -174,19 +180,18 @@ const doCancel = () => {};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-list-warp {
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
overflow-y: auto;
|
||||
.order-list {
|
||||
width: 100%;
|
||||
.order-item {
|
||||
width: 100%;
|
||||
.order-item-top {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
width: 100%;
|
||||
.top-l,
|
||||
.top-r {
|
||||
display: inline-block;
|
||||
@ -194,14 +199,13 @@ const doCancel = () => {};
|
||||
}
|
||||
.top-l {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
width: 80%;
|
||||
gap: 64px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.top-r {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.top-item {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
@ -217,12 +221,11 @@ const doCancel = () => {};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-item-content {
|
||||
background: $color-f5;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
background: $color-f5;
|
||||
.content-list,
|
||||
.content-right {
|
||||
display: inline-block;
|
||||
@ -232,11 +235,11 @@ const doCancel = () => {};
|
||||
width: calc(100% - 160px);
|
||||
.good-item {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
padding-left: 16px;
|
||||
margin: 8px 0;
|
||||
padding-left: 16px;
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
}
|
||||
.good-img,
|
||||
.good-info,
|
||||
@ -249,19 +252,19 @@ const doCancel = () => {};
|
||||
height: 120px;
|
||||
}
|
||||
.good-info {
|
||||
width: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 200px;
|
||||
flex-direction: column;
|
||||
.good-info-pos {
|
||||
font-size: 18px;
|
||||
color: $color-666;
|
||||
}
|
||||
}
|
||||
.good-price-num {
|
||||
width: calc(100% - 340px);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
width: calc(100% - 340px);
|
||||
flex-direction: column;
|
||||
.good-price-num-pos {
|
||||
display: inline-flex;
|
||||
@ -277,35 +280,35 @@ const doCancel = () => {};
|
||||
.total {
|
||||
text-align: center;
|
||||
.amount {
|
||||
color: $color-main;
|
||||
font-weight: 700;
|
||||
color: $color-main;
|
||||
}
|
||||
.amount::before {
|
||||
content: '￥';
|
||||
}
|
||||
.carriage {
|
||||
color: $color-666;
|
||||
font-size: 16px;
|
||||
color: $color-666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
width: 160px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 160px;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
.content-right-pos {
|
||||
.text-normal {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
.text-link {
|
||||
font-size: 16px;
|
||||
color: $color-main;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.do-btn {
|
||||
|
||||
@ -101,109 +101,94 @@ const toLink = (row) => {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 24px;
|
||||
border: 0;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.storage-content {
|
||||
@include flex-column();
|
||||
gap: 16px;
|
||||
@include flex-column;
|
||||
|
||||
gap: 16px;
|
||||
&-top {
|
||||
@include flex-row();
|
||||
@include flex-row;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-image {
|
||||
margin-right: 16px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-right: 16px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.storage-title,
|
||||
.storage-desc,
|
||||
.storage-tags,
|
||||
.storage-location {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
overflow: hidden;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.storage-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
@include ellipsis();
|
||||
color: #000000;
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
.storage-desc {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
@include ellipsis();
|
||||
|
||||
color: #999999;
|
||||
@include ellipsis;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-tags {
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.storage-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-left {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-right: 10px;
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.price-amount {
|
||||
color: $color-primary;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.contact-btn {
|
||||
width: 152px;
|
||||
height: 48px;
|
||||
font-size: 20px;
|
||||
border-radius: 8px;
|
||||
background: #25bf82 !important;
|
||||
|
||||
:deep(.el-icon) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -81,6 +81,8 @@ export default defineConfig(({ command, mode }) => {
|
||||
vueSetupExtend(),
|
||||
eslintPlugin({
|
||||
include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue'],
|
||||
fix: true, // 自动修复
|
||||
exclude: ['**/node_modules/**'], // 忽略 node_modules
|
||||
}),
|
||||
Components({
|
||||
dirs: ['src/components'],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user