Compare commits
No commits in common. "6b0343bb73192fb29b864ff8c3863802e7e716fb" and "394e2a534c8ba8eedfdcbb6b77b74b34cf8f710a" have entirely different histories.
6b0343bb73
...
394e2a534c
@ -3,31 +3,23 @@ import request from '@/utils/axios';
|
|||||||
|
|
||||||
/* 经营主体相关 */
|
/* 经营主体相关 */
|
||||||
export function getBuinessList(params = {}) {
|
export function getBuinessList(params = {}) {
|
||||||
return request('/product-business/business/businessPage', {
|
return request('land-resource/business/businessPage', {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params,
|
params,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function saveBuiness(data = {}) {
|
export function saveBuiness(data = {}) {
|
||||||
return request('/product-business/business/businessSave', {
|
return request('land-resource/business/businessSave', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data,
|
data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function editBuiness(data = {}) {
|
export function editBuiness(data = {}) {
|
||||||
return request('/product-business/business/businessEdit', {
|
return request('/land-resource/business/businessEdit', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data,
|
data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function delBuiness(params = {}) {
|
|
||||||
return request('/product-businesse/business/deleteBusiness', {
|
|
||||||
method: 'DELETE',
|
|
||||||
params,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// #endregion
|
// #endregion
|
||||||
|
|||||||
@ -15,35 +15,29 @@ export default [
|
|||||||
meta: { title: '数据可视化管理', icon: 'Document' },
|
meta: { title: '数据可视化管理', icon: 'Document' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/sub-government-affairs-service/businessEntity',
|
path: '/sub-government-affairs-service/individual',
|
||||||
component: () => import('@/views/productOperateMain/businessEntity/index.vue'),
|
component: () => import('@/views/productOperateMain/individual/index.vue'),
|
||||||
name: 'businessEntity',
|
name: 'individual',
|
||||||
meta: { title: '经营主体', icon: 'Document' },
|
meta: { title: '个体户', icon: 'Document' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/collective',
|
||||||
|
component: () => import('@/views/productOperateMain/collective/index.vue'),
|
||||||
|
name: 'collective',
|
||||||
|
meta: { title: '村集体', icon: 'Document' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/coop',
|
||||||
|
component: () => import('@/views/productOperateMain/coOp/index.vue'),
|
||||||
|
name: 'coop',
|
||||||
|
meta: { title: '合作社', icon: 'Document' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/enterprise',
|
||||||
|
component: () => import('@/views/productOperateMain/enterprise/index.vue'),
|
||||||
|
name: 'enterprise',
|
||||||
|
meta: { title: '经营企业', icon: 'Document' },
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// path: '/sub-government-affairs-service/individual',
|
|
||||||
// component: () => import('@/views/productOperateMain/individual/index.vue'),
|
|
||||||
// name: 'individual',
|
|
||||||
// meta: { title: '个体户', icon: 'Document' },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/sub-government-affairs-service/collective',
|
|
||||||
// component: () => import('@/views/productOperateMain/collective/index.vue'),
|
|
||||||
// name: 'collective',
|
|
||||||
// meta: { title: '村集体', icon: 'Document' },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/sub-government-affairs-service/coop',
|
|
||||||
// component: () => import('@/views/productOperateMain/coOp/index.vue'),
|
|
||||||
// name: 'coop',
|
|
||||||
// meta: { title: '合作社', icon: 'Document' },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// path: '/sub-government-affairs-service/enterprise',
|
|
||||||
// component: () => import('@/views/productOperateMain/enterprise/index.vue'),
|
|
||||||
// name: 'enterprise',
|
|
||||||
// meta: { title: '经营企业', icon: 'Document' },
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
path: '/sub-government-affairs-service/examineList',
|
path: '/sub-government-affairs-service/examineList',
|
||||||
component: () => import('@/views/productOperateMain/examine/list.vue'),
|
component: () => import('@/views/productOperateMain/examine/list.vue'),
|
||||||
|
|||||||
@ -1,488 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="custom-page">
|
|
||||||
<avue-crud
|
|
||||||
ref="crudRef"
|
|
||||||
v-model="state.form"
|
|
||||||
v-model:search="searchCondition"
|
|
||||||
v-model:page="pageData"
|
|
||||||
:table-loading="state.loading"
|
|
||||||
:data="state.data"
|
|
||||||
:option="state.options"
|
|
||||||
@refresh-change="loadData"
|
|
||||||
@search-reset="
|
|
||||||
() => {
|
|
||||||
loadData(1);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
@search-change="
|
|
||||||
(form, done) => {
|
|
||||||
loadData(1);
|
|
||||||
done();
|
|
||||||
}
|
|
||||||
"
|
|
||||||
@selection-change="selectionChange"
|
|
||||||
@current-change="loadData"
|
|
||||||
@size-change="loadData"
|
|
||||||
@row-save="rowSave"
|
|
||||||
@row-update="rowUpdate"
|
|
||||||
@row-del="rowDel"
|
|
||||||
>
|
|
||||||
<template #menu-left>
|
|
||||||
<!-- <el-button type="primary" icon="Upload" @click="onImport">导入</el-button> -->
|
|
||||||
<el-button type="danger" icon="Delete" @click="onBatchDel">批量删除</el-button>
|
|
||||||
</template>
|
|
||||||
<template #status="{ row }">
|
|
||||||
<el-tag v-if="row.status == '0'" type="warning" size="small">待审核</el-tag>
|
|
||||||
<el-tag v-if="row.status == '1'" type="success" size="small">通过</el-tag>
|
|
||||||
<el-tag v-if="row.status == '2'" type="danger" size="small">拒绝</el-tag>
|
|
||||||
</template>
|
|
||||||
<template #menu="scope">
|
|
||||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
|
||||||
</template>
|
|
||||||
</avue-crud>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { reactive, ref } from 'vue';
|
|
||||||
import { useApp } from '@/hooks';
|
|
||||||
import { CRUD_OPTIONS, pageData } from '@/config';
|
|
||||||
import { isEmpty, downloadFile } from '@/utils';
|
|
||||||
import { useUserStore } from '@/store/modules/user';
|
|
||||||
|
|
||||||
import { getBuinessList, saveBuiness, editBuiness, delBuiness } from '@/apis/productOperateMain';
|
|
||||||
|
|
||||||
const { VITE_APP_BASE_API } = import.meta.env;
|
|
||||||
const app = useApp();
|
|
||||||
const UserStore = useUserStore();
|
|
||||||
const crudRef = ref(null);
|
|
||||||
|
|
||||||
let timeVal = ref([]);
|
|
||||||
const searchCondition = ref({
|
|
||||||
businessType: '',
|
|
||||||
businessId: '',
|
|
||||||
productType: '', //产品类型
|
|
||||||
createStartTime: '',
|
|
||||||
createEndTime: '',
|
|
||||||
primaryProduct: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
const labelProp = ref({});
|
|
||||||
const state = reactive({
|
|
||||||
loading: false,
|
|
||||||
form: {},
|
|
||||||
selection: [],
|
|
||||||
options: {
|
|
||||||
...CRUD_OPTIONS,
|
|
||||||
addBtnText: '添加',
|
|
||||||
searchLabelWidth: '150px',
|
|
||||||
searchGutter: 100,
|
|
||||||
searchSpan: 8,
|
|
||||||
searchMenuPosition: 'center',
|
|
||||||
column: [
|
|
||||||
{
|
|
||||||
label: '主体类型',
|
|
||||||
prop: 'businessType',
|
|
||||||
type: 'radio',
|
|
||||||
search: true,
|
|
||||||
width: '80px',
|
|
||||||
ellipsis: true,
|
|
||||||
showOverflowTooltip: true,
|
|
||||||
span: 24,
|
|
||||||
props: {
|
|
||||||
label: 'dictLabel',
|
|
||||||
value: 'dictValue',
|
|
||||||
},
|
|
||||||
dicUrl: `${VITE_APP_BASE_API}/system/dict/data/list?dictType=sys_business_type¤t=1&size=10`,
|
|
||||||
dicHeaders: {
|
|
||||||
authorization: UserStore.token,
|
|
||||||
},
|
|
||||||
dicFormatter: (res) => res.data.records ?? [],
|
|
||||||
rules: { required: true, message: '请选择', trigger: 'blur' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '主体代码',
|
|
||||||
prop: 'id',
|
|
||||||
width: '120px',
|
|
||||||
ellipsis: true,
|
|
||||||
showOverflowTooltip: true,
|
|
||||||
addDisplay: false,
|
|
||||||
editDisplay: false,
|
|
||||||
search: true,
|
|
||||||
rules: { required: true, message: '请输入', trigger: 'blur' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '主体名称',
|
|
||||||
prop: 'businessName',
|
|
||||||
width: '160px',
|
|
||||||
ellipsis: true,
|
|
||||||
showOverflowTooltip: true,
|
|
||||||
search: true,
|
|
||||||
rules: { required: true, message: '请输入', trigger: 'blur' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '经营产品种类',
|
|
||||||
prop: 'productType',
|
|
||||||
type: 'select',
|
|
||||||
width: '120px',
|
|
||||||
remote: false,
|
|
||||||
search: true,
|
|
||||||
props: {
|
|
||||||
label: 'dictLabel',
|
|
||||||
value: 'dictValue',
|
|
||||||
},
|
|
||||||
dicUrl: `${VITE_APP_BASE_API}/system/dict/data/list`,
|
|
||||||
dicQuery: {
|
|
||||||
dictType: 'sys_business_product_type',
|
|
||||||
current: 1,
|
|
||||||
size: 100,
|
|
||||||
},
|
|
||||||
dicHeaders: {
|
|
||||||
authorization: UserStore.token,
|
|
||||||
},
|
|
||||||
dicFormatter: (res) => res.data.records ?? [],
|
|
||||||
rules: [{ required: true, message: '请选择', trigger: 'blur' }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '主要经营产品',
|
|
||||||
prop: 'primaryProduct',
|
|
||||||
width: '120px',
|
|
||||||
showOverflowTooltip: true,
|
|
||||||
search: false,
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '统一信用代码/证件号码',
|
|
||||||
prop: 'idCard',
|
|
||||||
search: false,
|
|
||||||
width: '200px',
|
|
||||||
labelWidth: '160px',
|
|
||||||
rules: { required: true, message: '请输入', trigger: 'blur' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '联系地址',
|
|
||||||
prop: 'addressCode',
|
|
||||||
type: 'cascader',
|
|
||||||
checkStrictly: false,
|
|
||||||
width: '200px',
|
|
||||||
ellipsis: true,
|
|
||||||
showOverflowTooltip: true,
|
|
||||||
addDisplay: true,
|
|
||||||
editDisplay: true,
|
|
||||||
search: true,
|
|
||||||
props: {
|
|
||||||
label: 'areaName',
|
|
||||||
value: 'areaCode',
|
|
||||||
children: 'areaChildVOS',
|
|
||||||
},
|
|
||||||
dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
|
|
||||||
dicHeaders: {
|
|
||||||
authorization: UserStore.token,
|
|
||||||
},
|
|
||||||
dicFormatter: (res) => res.data ?? [],
|
|
||||||
rules: [{ required: true, message: '请选择', trigger: 'blur' }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '详细地址',
|
|
||||||
prop: 'detailAddress',
|
|
||||||
search: false,
|
|
||||||
ellipsis: true,
|
|
||||||
showOverflowTooltip: true,
|
|
||||||
rules: { required: true, message: '请输入', trigger: 'blur' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '联系电话',
|
|
||||||
prop: 'phone',
|
|
||||||
width: '160px',
|
|
||||||
search: false,
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '审核状态',
|
|
||||||
prop: 'status',
|
|
||||||
width: '80px',
|
|
||||||
addDisplay: false,
|
|
||||||
editDisplay: false,
|
|
||||||
search: false,
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '审核意见',
|
|
||||||
prop: 'remark',
|
|
||||||
addDisplay: false,
|
|
||||||
editDisplay: false,
|
|
||||||
width: '200px',
|
|
||||||
ellipsis: true,
|
|
||||||
showOverflowTooltip: true,
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请输入',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{ label: '创建时间', prop: 'createTime', addDisplay: false, editDisplay: false, search: false },
|
|
||||||
],
|
|
||||||
searchColumn: [
|
|
||||||
{
|
|
||||||
label: '主体类型',
|
|
||||||
prop: 'businessType',
|
|
||||||
type: 'radio',
|
|
||||||
className: 'el-col-md-24',
|
|
||||||
button: true,
|
|
||||||
props: {
|
|
||||||
label: 'dictLabel',
|
|
||||||
value: 'dictValue',
|
|
||||||
},
|
|
||||||
dicUrl: `${VITE_APP_BASE_API}/system/dict/data/list`,
|
|
||||||
dicQuery: {
|
|
||||||
dictType: 'sys_business_type',
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
},
|
|
||||||
dicHeaders: {
|
|
||||||
authorization: UserStore.token,
|
|
||||||
},
|
|
||||||
dicFormatter: (res) => res.data.records ?? [],
|
|
||||||
searchSpan: 24,
|
|
||||||
},
|
|
||||||
{ label: '主体代码', prop: 'businessId', search: true },
|
|
||||||
{ label: '主体名称', prop: 'crop', search: true },
|
|
||||||
{
|
|
||||||
label: '经营产品种类',
|
|
||||||
prop: 'productType',
|
|
||||||
type: 'select',
|
|
||||||
search: true,
|
|
||||||
props: {
|
|
||||||
label: 'dictLabel',
|
|
||||||
value: 'dictValue',
|
|
||||||
},
|
|
||||||
dicUrl: `${VITE_APP_BASE_API}/system/dict/data/list`,
|
|
||||||
dicQuery: {
|
|
||||||
dictType: 'sys_business_product_type',
|
|
||||||
current: 1,
|
|
||||||
size: 100,
|
|
||||||
},
|
|
||||||
dicHeaders: {
|
|
||||||
authorization: UserStore.token,
|
|
||||||
},
|
|
||||||
dicFormatter: (res) => res.data.records ?? [],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '创建日期',
|
|
||||||
prop: 'operationDate',
|
|
||||||
type: 'daterange',
|
|
||||||
format: 'YYYY-MM-DD',
|
|
||||||
valueFormat: 'YYYY-MM-DD',
|
|
||||||
width: 200,
|
|
||||||
search: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
actions: [
|
|
||||||
{
|
|
||||||
name: '详情',
|
|
||||||
icon: 'View',
|
|
||||||
event: ({ row }) => doDetail(row),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '编辑',
|
|
||||||
icon: 'edit',
|
|
||||||
event: ({ row }) => rowEdit(row),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'danger',
|
|
||||||
name: '删除',
|
|
||||||
icon: 'delete',
|
|
||||||
event: ({ row }) => rowDel(row),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
data: [],
|
|
||||||
currentRow: {},
|
|
||||||
});
|
|
||||||
|
|
||||||
// 加载
|
|
||||||
const loadData = (resetPage) => {
|
|
||||||
resetPage === 1 && (pageData.value.currentPage = 1);
|
|
||||||
state.loading = true;
|
|
||||||
let params = Object.assign(
|
|
||||||
{
|
|
||||||
current: pageData.value.currentPage,
|
|
||||||
size: pageData.value.size,
|
|
||||||
},
|
|
||||||
searchCondition.value
|
|
||||||
);
|
|
||||||
getBuinessList(params)
|
|
||||||
.then((res) => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
const { current, size, total, records } = res.data;
|
|
||||||
state.data = records;
|
|
||||||
pageData.value.total = res.data.total;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
app.$message.error(err.msg);
|
|
||||||
state.data = [];
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
state.loading = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
// 选择
|
|
||||||
const selectionChange = (rows) => {
|
|
||||||
state.selection = rows;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleIds = () => {
|
|
||||||
let datalist = state.selection.map((m) => {
|
|
||||||
return { landId: m.landId, landName: m.landName };
|
|
||||||
});
|
|
||||||
|
|
||||||
let selectIdlist = uniqueObjects(datalist, 'landId');
|
|
||||||
let selectIdsVal = selectIdlist.map((n) => {
|
|
||||||
return n.landId;
|
|
||||||
});
|
|
||||||
|
|
||||||
return selectIdsVal.toString() || '';
|
|
||||||
};
|
|
||||||
|
|
||||||
function uniqueObjects(arr, key) {
|
|
||||||
return arr.reduce((acc, current) => {
|
|
||||||
const duplicate = acc.find((element) => element[key] === current[key]);
|
|
||||||
if (!duplicate) {
|
|
||||||
acc.push(current);
|
|
||||||
}
|
|
||||||
return acc;
|
|
||||||
}, []);
|
|
||||||
}
|
|
||||||
// 新增
|
|
||||||
const rowSave = (row, done, loading) => {
|
|
||||||
// console.info('新增', row);
|
|
||||||
let codeList = row.addressCode.split(',');
|
|
||||||
let params = {
|
|
||||||
...row,
|
|
||||||
provinceCode: codeList[0] || '',
|
|
||||||
cityCode: codeList[1] || '',
|
|
||||||
countyCode: codeList[2] || '',
|
|
||||||
townCode: codeList[3] || '',
|
|
||||||
};
|
|
||||||
delete params.addressCode;
|
|
||||||
saveBuiness(params)
|
|
||||||
.then((res) => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
app.$message.success('添加成功！');
|
|
||||||
done();
|
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
app.$message.error(err.msg);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
loading();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 编辑
|
|
||||||
const rowEdit = (row) => {
|
|
||||||
row.addressCode = row.provinceCode + ',' + row.cityCode + ',' + row.countyCode + ',' + row.townCode;
|
|
||||||
console.info('编辑', row);
|
|
||||||
crudRef.value.rowEdit(row);
|
|
||||||
};
|
|
||||||
|
|
||||||
const doDetail = (row) => {
|
|
||||||
crudRef.value.rowView(row);
|
|
||||||
};
|
|
||||||
const rowUpdate = (row, index, done, loading) => {
|
|
||||||
console.info('更新');
|
|
||||||
let codeList = row.addressCode.split(',');
|
|
||||||
let params = {
|
|
||||||
...row,
|
|
||||||
provinceCode: codeList[0] || '',
|
|
||||||
cityCode: codeList[1] || '',
|
|
||||||
countyCode: codeList[2] || '',
|
|
||||||
townCode: codeList[3] || '',
|
|
||||||
};
|
|
||||||
delete params.addressCode;
|
|
||||||
editBuiness(params)
|
|
||||||
.then((res) => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
app.$message.success('更新成功！');
|
|
||||||
done();
|
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
app.$message.error(err.msg);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
loading();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除
|
|
||||||
const rowDel = (row, index, done) => {
|
|
||||||
if (isEmpty(row)) return;
|
|
||||||
app
|
|
||||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning',
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
console.info('删除', row.id);
|
|
||||||
delBuiness({ businessId: row.id })
|
|
||||||
.then((res) => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
app.$message.success('删除成功！');
|
|
||||||
loadData();
|
|
||||||
done();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
app.$message.error(err.msg);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onBatchDel = () => {
|
|
||||||
let ids = handleIds();
|
|
||||||
if (!ids.length || ids.length <= 0) {
|
|
||||||
app.$message.error('请先选择要删除的数据');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
app
|
|
||||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning',
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
delBuiness({ businessId: ids })
|
|
||||||
.then((res) => {
|
|
||||||
if (res.code === 200) {
|
|
||||||
app.$message.success('删除成功！');
|
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
app.$message.error(err.msg);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -49,8 +49,6 @@ import {
|
|||||||
importOperationRecord,
|
importOperationRecord,
|
||||||
} from '@/apis/land';
|
} from '@/apis/land';
|
||||||
|
|
||||||
import { getBuinessList } from '@/apis/productOperateMain';
|
|
||||||
|
|
||||||
const { VITE_APP_BASE_API } = import.meta.env;
|
const { VITE_APP_BASE_API } = import.meta.env;
|
||||||
const app = useApp();
|
const app = useApp();
|
||||||
const UserStore = useUserStore();
|
const UserStore = useUserStore();
|
||||||
@ -84,12 +82,6 @@ const state = reactive({
|
|||||||
query: {
|
query: {
|
||||||
current: 1,
|
current: 1,
|
||||||
size: 10,
|
size: 10,
|
||||||
businessType: '',
|
|
||||||
businessId: '',
|
|
||||||
productType: '', //产品类型
|
|
||||||
createStartTime: '',
|
|
||||||
createEndTime: '',
|
|
||||||
primaryProduct: '',
|
|
||||||
},
|
},
|
||||||
form: {},
|
form: {},
|
||||||
selection: [],
|
selection: [],
|
||||||
@ -103,7 +95,7 @@ const state = reactive({
|
|||||||
column: [
|
column: [
|
||||||
{
|
{
|
||||||
label: '主体代码',
|
label: '主体代码',
|
||||||
prop: 'businessId',
|
prop: 'executor',
|
||||||
addDisplay: false,
|
addDisplay: false,
|
||||||
editDisplay: false,
|
editDisplay: false,
|
||||||
search: true,
|
search: true,
|
||||||
@ -123,29 +115,29 @@ const state = reactive({
|
|||||||
trigger: 'blur',
|
trigger: 'blur',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
label: '主体类型',
|
// label: '主体类型',
|
||||||
prop: 'businessType',
|
// prop: 'dictType',
|
||||||
type: 'select',
|
// type: 'select',
|
||||||
search: true,
|
// search: true,
|
||||||
props: {
|
// props: {
|
||||||
label: 'dictLabel',
|
// label: 'dictName',
|
||||||
value: 'dictValue',
|
// value: 'dictType',
|
||||||
},
|
// },
|
||||||
dicUrl: `${VITE_APP_BASE_API}/system/dict/data/list?dictType=sys_business_type¤t=1&size=10`,
|
// dicUrl: `${VITE_APP_BASE_API}/system/dept/list?dictType=sys_business_product_type¤t=1&size=10`,
|
||||||
dicHeaders: {
|
// dicHeaders: {
|
||||||
authorization: UserStore.token,
|
// authorization: UserStore.token,
|
||||||
},
|
// },
|
||||||
dicFormatter: (res) => res.data.records ?? [],
|
// dicFormatter: (res) => res.data,
|
||||||
rules: {
|
// rules: {
|
||||||
required: true,
|
// required: true,
|
||||||
message: '请选择',
|
// message: '请选择',
|
||||||
trigger: 'blur',
|
// trigger: 'blur',
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
label: '经营产品种类',
|
label: '经营产品种类',
|
||||||
prop: 'productType',
|
prop: 'landId',
|
||||||
type: 'select',
|
type: 'select',
|
||||||
remote: false,
|
remote: false,
|
||||||
search: true,
|
search: true,
|
||||||
@ -267,30 +259,11 @@ const state = reactive({
|
|||||||
{ label: '创建时间', prop: 'crop', addDisplay: false, editDisplay: false, search: false },
|
{ label: '创建时间', prop: 'crop', addDisplay: false, editDisplay: false, search: false },
|
||||||
],
|
],
|
||||||
searchColumn: [
|
searchColumn: [
|
||||||
{
|
{ label: '主体代码', prop: 'landName', search: true },
|
||||||
label: '主体类型',
|
|
||||||
prop: 'businessType',
|
|
||||||
type: 'select',
|
|
||||||
props: {
|
|
||||||
label: 'dictLabel',
|
|
||||||
value: 'dictValue',
|
|
||||||
},
|
|
||||||
dicUrl: `${VITE_APP_BASE_API}/system/dict/data/list?dictType=sys_business_type¤t=1&size=10`,
|
|
||||||
dicHeaders: {
|
|
||||||
authorization: UserStore.token,
|
|
||||||
},
|
|
||||||
dicFormatter: (res) => res.data.records ?? [],
|
|
||||||
rules: {
|
|
||||||
required: true,
|
|
||||||
message: '请选择',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{ label: '主体代码', prop: 'businessId', search: true },
|
|
||||||
{ label: '主体名称', prop: 'crop', search: true },
|
{ label: '主体名称', prop: 'crop', search: true },
|
||||||
{
|
{
|
||||||
label: '经营产品种类',
|
label: '经营产品种类',
|
||||||
prop: 'productType',
|
prop: 'operationType',
|
||||||
type: 'select',
|
type: 'select',
|
||||||
search: true,
|
search: true,
|
||||||
dicData: jobTypeOptions,
|
dicData: jobTypeOptions,
|
||||||
@ -335,26 +308,26 @@ const state = reactive({
|
|||||||
|
|
||||||
// 加载
|
// 加载
|
||||||
const loadData = () => {
|
const loadData = () => {
|
||||||
state.loading = true;
|
// state.loading = true;
|
||||||
getBuinessList(state.query)
|
// getOperationRecord(state.query)
|
||||||
.then((res) => {
|
// .then((res) => {
|
||||||
if (res.code === 200) {
|
// if (res.code === 200) {
|
||||||
const { current, size, total, records } = res.data;
|
// const { current, size, total, records } = res.data;
|
||||||
state.data = records;
|
// state.data = records;
|
||||||
state.pageData = {
|
// state.pageData = {
|
||||||
currentPage: current || 1,
|
// currentPage: current || 1,
|
||||||
pageSize: size || 10,
|
// pageSize: size || 10,
|
||||||
total: total,
|
// total: total,
|
||||||
};
|
// };
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
.catch((err) => {
|
// .catch((err) => {
|
||||||
app.$message.error(err.msg);
|
// app.$message.error(err.msg);
|
||||||
state.data = [];
|
// state.data = [];
|
||||||
})
|
// })
|
||||||
.finally(() => {
|
// .finally(() => {
|
||||||
state.loading = false;
|
// state.loading = false;
|
||||||
});
|
// });
|
||||||
};
|
};
|
||||||
|
|
||||||
loadData();
|
loadData();
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 768 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@ -1,104 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="c-custom-img-warp">
|
|
||||||
<el-image :src="isMontage ? getAssetsFile(imgUrl) : imgUrl" :fit="fit" />
|
|
||||||
<div v-if="isViewVal" class="viewer-btn-warp">
|
|
||||||
<div class="viewer-btn" @click="toPreview">点击查看</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-image-viewer
|
|
||||||
v-if="isViewVal && isPreview"
|
|
||||||
:url-list="srcList"
|
|
||||||
show-progress
|
|
||||||
:initial-index="0"
|
|
||||||
:teleported="true"
|
|
||||||
@close="isPreview = false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, watch, nextTick, reactive } from 'vue';
|
|
||||||
import { isEmpty, getAssetsFile } from '@/utils';
|
|
||||||
const props = defineProps({
|
|
||||||
url: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
previewList: {
|
|
||||||
type: Array,
|
|
||||||
default: () => {
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
isView: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
isMontage: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
fit: {
|
|
||||||
type: String,
|
|
||||||
default: 'none',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
let imgUrl = ref(props.url);
|
|
||||||
let isViewVal = ref(props.isView);
|
|
||||||
let srcList = reactive(props.previewList);
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => (props.url, props.previewList, props.isView),
|
|
||||||
() => {
|
|
||||||
imgUrl.value = props.url;
|
|
||||||
isViewVal.value = props.isView;
|
|
||||||
srcList = props.previewList;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const isPreview = ref(false);
|
|
||||||
const toPreview = () => {
|
|
||||||
isPreview.value = true;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.c-custom-img-warp {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
::v-deep() {
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.viewer-btn-warp {
|
|
||||||
position: absolute;
|
|
||||||
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;
|
|
||||||
border-radius: 16px;
|
|
||||||
color: $color-fff;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-custom-img-warp:hover {
|
|
||||||
.viewer-btn-warp {
|
|
||||||
display: inline-block !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -15,7 +15,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="layout-header-top-right">
|
<div class="layout-header-top-right">
|
||||||
<span>商家中心</span>
|
<span>商家中心</span>
|
||||||
<span @click="toUserCenter">个人中心</span>
|
<span>个人中心</span>
|
||||||
<span @click="toHome" class="back-home">
|
<span @click="toHome" class="back-home">
|
||||||
<div class="iconfont icon-home" style="font-size: 12px"></div>
|
<div class="iconfont icon-home" style="font-size: 12px"></div>
|
||||||
<span>返回首页</span>
|
<span>返回首页</span>
|
||||||
@ -117,10 +117,6 @@ const toHome = () => {
|
|||||||
console.info('toHome', router);
|
console.info('toHome', router);
|
||||||
router.push('/sub-operation-service/home');
|
router.push('/sub-operation-service/home');
|
||||||
};
|
};
|
||||||
|
|
||||||
const toUserCenter = () => {
|
|
||||||
router.push('/sub-operation-service/userCenter');
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -1,119 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="layout-user-centre-warp">
|
|
||||||
<div class="layout-user-centre">
|
|
||||||
<div class="layout-user-centre-top">
|
|
||||||
<div class="logo-warp">
|
|
||||||
<costomImg :url="'images/logo.png'" :is-view="false"></costomImg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="layout-user-centre-menu">
|
|
||||||
<el-menu ellipsis class="layout-user-centre-menu">
|
|
||||||
<app-link v-for="(item, index) in meuns" :key="index" :to="item.path">
|
|
||||||
<el-menu-item active-text-color="#25BF82">
|
|
||||||
<div class="iconfont" :class="'icon-' + item.icon" :style="{ 'font-size': item.iconSize }"></div>
|
|
||||||
<span class="txt-ellipsis clamp1">{{ item.label }}</span>
|
|
||||||
</el-menu-item>
|
|
||||||
</app-link>
|
|
||||||
</el-menu>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup name="layout-user-centre">
|
|
||||||
import { computed, ref } from 'vue';
|
|
||||||
import { useSettingStore } from '@/store/modules/setting';
|
|
||||||
import { usePermissionStore } from '@/store/modules/permission';
|
|
||||||
import AppLink from '../Menu/Link.vue';
|
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
import { isEmpty, getAssetsFile } from '@/utils';
|
|
||||||
import costomImg from '@/components/costomImg.vue';
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const SettingStore = useSettingStore();
|
|
||||||
const PermissionStore = usePermissionStore();
|
|
||||||
const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes);
|
|
||||||
const isReload = computed(() => SettingStore.isReload);
|
|
||||||
|
|
||||||
const isSubApp = computed(() => route.path.includes('sub'));
|
|
||||||
|
|
||||||
const keyword = ref('');
|
|
||||||
|
|
||||||
const meuns = ref([
|
|
||||||
{ label: '我的购物车', path: '/sub-operation-service/userCenter-shoppingCart', icon: 'shopcar', iconSize: '26px' },
|
|
||||||
{ label: '我的订单', path: '/sub-operation-service/userCenter-userOrders', icon: 'order', iconSize: '26px' },
|
|
||||||
{ label: '我的土地', path: '/sub-operation-service/userCenter-userLands', icon: 'land', iconSize: '26px' },
|
|
||||||
// { label: '我的溯源', path: '', icon: 'soucecode' },
|
|
||||||
// { label: '我的金融', path: '', icon: 'finance' },
|
|
||||||
// { label: '我的农机', path: '', icon: 'farmmachinery' },
|
|
||||||
// { label: '我的品牌', path: '', icon: 'brand' },
|
|
||||||
// { label: '我的劳务', path: '', icon: 'labor' },
|
|
||||||
// { label: '分拣/包装', path: '', icon: 'sorting' },
|
|
||||||
// { label: '仓储/物流', path: '', icon: 'logistics' },
|
|
||||||
// { label: '修改密码', path: '', icon: 'password' },
|
|
||||||
]);
|
|
||||||
|
|
||||||
function Search() {
|
|
||||||
console.log(keyword.value, 'search');
|
|
||||||
}
|
|
||||||
|
|
||||||
const toHome = () => {
|
|
||||||
console.info('toHome', router);
|
|
||||||
router.push('/sub-operation-service/home');
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
div {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-user-centre-warp {
|
|
||||||
width: 320px;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
height: 100vh;
|
|
||||||
padding: 16px;
|
|
||||||
.layout-user-centre {
|
|
||||||
height: calc(100% - 0px);
|
|
||||||
background: $color-fff;
|
|
||||||
overflow: auto;
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
.layout-user-centre-top {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px;
|
|
||||||
.logo-warp {
|
|
||||||
height: 74px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-menu {
|
|
||||||
border-right: 0 !important;
|
|
||||||
background: $color-fff;
|
|
||||||
.el-menu-item {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
.iconfont {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
padding-right: 8px;
|
|
||||||
color: $color-333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
color: $color-333;
|
|
||||||
}
|
|
||||||
.router-link-active {
|
|
||||||
li {
|
|
||||||
color: $color-main !important;
|
|
||||||
.iconfont {
|
|
||||||
color: $color-main !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="user-centre-layout">
|
|
||||||
<UserMenu />
|
|
||||||
<Main />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup name="layout">
|
|
||||||
import { useSettingStore } from '@/store/modules/setting';
|
|
||||||
|
|
||||||
import UserMenu from './component/UserMenu';
|
|
||||||
import Main from './component/Main';
|
|
||||||
const SettingStore = useSettingStore();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.user-centre-layout {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
.layout-main {
|
|
||||||
display: inline-block !important;
|
|
||||||
width: calc(100% - 320px) !important;
|
|
||||||
vertical-align: top;
|
|
||||||
padding: 16px 16px 16px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -8,7 +8,6 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router';
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
import Layout from '@/layouts/index.vue';
|
import Layout from '@/layouts/index.vue';
|
||||||
import Views from '@/layouts/Views.vue';
|
import Views from '@/layouts/Views.vue';
|
||||||
import userCentre from '@/layouts/userCentre.vue';
|
|
||||||
|
|
||||||
export const constantRoutes = [
|
export const constantRoutes = [
|
||||||
{
|
{
|
||||||
@ -59,17 +58,11 @@ export const constantRoutes = [
|
|||||||
meta: { title: '农资交易' },
|
meta: { title: '农资交易' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/sub-operation-service/ecommerce-agriculturalDetail',
|
path: '/sub-operation-service/ecommerce-agriculturalDetai',
|
||||||
component: () => import('@/views/ecommerce/agriculturalDetail.vue'),
|
component: () => import('@/views/ecommerce/agriculturalDetail.vue'),
|
||||||
name: 'agriculturalDetail',
|
name: 'agriculturalDetail',
|
||||||
meta: { title: '农资详情' },
|
meta: { title: '农资详情' },
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/sub-operation-service/ecommerce-sourceCodeDetail',
|
|
||||||
component: () => import('@/views/ecommerce/sourceCodeDetail.vue'),
|
|
||||||
name: 'sourceCodeDetail',
|
|
||||||
meta: { title: '溯源详情' },
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -123,33 +116,6 @@ export const constantRoutes = [
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/sub-operation-service/userCenter',
|
|
||||||
name: 'userCentre',
|
|
||||||
component: userCentre,
|
|
||||||
redirect: '/sub-operation-service/userCenter-shoppingCart',
|
|
||||||
meta: { title: '个人中心' },
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '/sub-operation-service/userCenter-shoppingCart',
|
|
||||||
component: () => import('@/views/userCenter/shoppingCart.vue'),
|
|
||||||
name: 'ShoppingCar',
|
|
||||||
meta: { title: '我的购物车' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/sub-operation-service/userCenter-userOrders',
|
|
||||||
component: () => import('@/views/userCenter/userOrders.vue'),
|
|
||||||
name: 'userOrders',
|
|
||||||
meta: { title: '我的订单' },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/sub-operation-service/userCenter-userLands',
|
|
||||||
component: () => import('@/views/userCenter/userLands.vue'),
|
|
||||||
name: 'userLands',
|
|
||||||
meta: { title: '我的土地' },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -1,10 +1,9 @@
|
|||||||
// color
|
// color
|
||||||
$legacy-ie: 10;
|
$legacy-ie: 10;
|
||||||
$color-main:#25BF82;
|
$color-main:#25BF82;
|
||||||
$color-main-table-header:rgba(37,191,130,0.05);
|
$color-main-table-header:rgba(37,191,130,0.1);
|
||||||
$color-main-border:rgba(37, 191, 130, 0.5);
|
$color-main-border:rgba(37, 191, 130, 0.5);
|
||||||
$color-5a:#5A5A5A;
|
$color-5a:#5A5A5A;
|
||||||
$color-balck-mask:rgba(0,0,0,0.5);
|
|
||||||
$color-000:#000;
|
$color-000:#000;
|
||||||
$color-fff:#fff;
|
$color-fff:#fff;
|
||||||
$color-da:#dadada;
|
$color-da:#dadada;
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -38,4 +38,3 @@
|
|||||||
max-height: calc(1.5em * 2);
|
max-height: calc(1.5em * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -4,14 +4,14 @@
|
|||||||
<template #main>
|
<template #main>
|
||||||
<div class="agricultural-detail-info">
|
<div class="agricultural-detail-info">
|
||||||
<div class="top-title">
|
<div class="top-title">
|
||||||
<div class="father-title" @click="toBack(-1)">农资交易</div>
|
<div class="father-title">农资交易</div>
|
||||||
<div class="current-title">查看详情</div>
|
<div class="current-title">查看详情</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="top-info">
|
<div class="top-info">
|
||||||
<el-row :gutter="16">
|
<el-row :gutter="16">
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<banner name="landdetail" :imglist="bannerList" indicator-pos="none" arrow="always" height="340px" :is-view="true"> </banner>
|
<banner name="landdetail" :imglist="bannerList" indicator-pos="none" arrow="always" height="340px"> </banner>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12" class="top-info-txt">
|
<el-col :span="12" class="top-info-txt">
|
||||||
<h1 class="title">耿马县勐简乡有机沙瓤西红柿</h1>
|
<h1 class="title">耿马县勐简乡有机沙瓤西红柿</h1>
|
||||||
@ -185,9 +185,6 @@ import { ref, reactive, onMounted, watch, computed } from 'vue';
|
|||||||
import { isEmpty, getAssetsFile } from '@/utils';
|
import { isEmpty, getAssetsFile } from '@/utils';
|
||||||
import { qrImg } from '@/layouts/component/Header/base64img.js';
|
import { qrImg } from '@/layouts/component/Header/base64img.js';
|
||||||
import evaluate from './components/evaluate.vue';
|
import evaluate from './components/evaluate.vue';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner.png']);
|
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner.png']);
|
||||||
const tabList = reactive([
|
const tabList = reactive([
|
||||||
@ -202,14 +199,7 @@ let saveInfo = reactive({
|
|||||||
num: 0,
|
num: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
const toCodeDetail = () => {
|
const toCodeDetail = () => {};
|
||||||
let id = '01';
|
|
||||||
router.push('/sub-operation-service/ecommerce-sourceCodeDetail?id=' + id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toBack = (level) => {
|
|
||||||
router.go(level);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toCopy = () => {};
|
const toCopy = () => {};
|
||||||
</script>
|
</script>
|
||||||
@ -231,7 +221,6 @@ const toCopy = () => {};
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
.father-title {
|
.father-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
|||||||
@ -2,15 +2,15 @@
|
|||||||
<div class="ecommerce-banner" :style="{ height: height }">
|
<div class="ecommerce-banner" :style="{ height: height }">
|
||||||
<el-carousel height="height" motion-blur :indicator-position="indicatorPos" :arrow="arrow">
|
<el-carousel height="height" motion-blur :indicator-position="indicatorPos" :arrow="arrow">
|
||||||
<el-carousel-item v-for="(item, index) in list" :key="index">
|
<el-carousel-item v-for="(item, index) in list" :key="index">
|
||||||
<costomImg :url="item" :preview-list="srcList" :is-view="isViewVal"></costomImg>
|
<img :src="getAssetsFile(item)" />
|
||||||
|
<!-- <el-image :src="getAssetsFile(item)" fit="cover" /> -->
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
import { ref, reactive, onMounted, watch } from 'vue';
|
||||||
import { isEmpty, getAssetsFile } from '@/utils';
|
import { isEmpty, getAssetsFile } from '@/utils';
|
||||||
import costomImg from '@/components/costomImg.vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
height: { type: String, default: '320px' },
|
height: { type: String, default: '320px' },
|
||||||
@ -29,31 +29,16 @@ const props = defineProps({
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'hover',
|
default: 'hover',
|
||||||
},
|
},
|
||||||
isView: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
let nameVal = ref(props.name);
|
let nameVal = ref(props.name);
|
||||||
let list = reactive(props.imglist);
|
let list = reactive(props.imglist);
|
||||||
|
|
||||||
let srcList = computed(() => {
|
|
||||||
let list = [];
|
|
||||||
list = props.imglist.map((m) => {
|
|
||||||
return getAssetsFile(m);
|
|
||||||
});
|
|
||||||
return list;
|
|
||||||
});
|
|
||||||
|
|
||||||
let isViewVal = ref(props.isView);
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => (props.list, props.imglist, props.isView),
|
() => (props.list, props.imglist),
|
||||||
() => {
|
() => {
|
||||||
nameVal.value = props.name;
|
nameVal.value = props.name;
|
||||||
list = props.imglist;
|
list = props.imglist;
|
||||||
isViewVal.value = props.isView;
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true,
|
immediate: true,
|
||||||
@ -64,10 +49,6 @@ watch(
|
|||||||
.ecommerce-banner {
|
.ecommerce-banner {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
::v-deep() {
|
::v-deep() {
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.el-carousel__item {
|
.el-carousel__item {
|
||||||
border-radius: 16px !important;
|
border-radius: 16px !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,7 +20,7 @@ const router = useRouter();
|
|||||||
|
|
||||||
const toDetail = () => {
|
const toDetail = () => {
|
||||||
let id = '01';
|
let id = '01';
|
||||||
router.push('/sub-operation-service/ecommerce-agriculturalDetail?id=' + id);
|
router.push('/sub-operation-service/ecommerce-agriculturalDetai?id=' + id);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -55,7 +55,7 @@ let treeList = reactive([
|
|||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner1.png']);
|
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner.png']);
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.goods-list-warp {
|
.goods-list-warp {
|
||||||
|
|||||||
@ -218,7 +218,7 @@ let tableData = reactive([
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
const rowClick = (data) => {
|
const rowClick = (data) => {
|
||||||
router.push('/sub-operation-service/ecommerce-purchaserDetail?id=' + data.id);
|
router.push('/sub-operation-service/purchaserDetail?id=' + data.id);
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|||||||
@ -1,471 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="source-code-detail-warp">
|
|
||||||
<common current-name="agricultural">
|
|
||||||
<template #main>
|
|
||||||
<div class="source-code-detail-info">
|
|
||||||
<div class="top-warp-b">
|
|
||||||
<div class="top-title">
|
|
||||||
<div class="father-title" @click="toBack(-2)">农资交易</div>
|
|
||||||
<div class="father-title father-after" @click="toBack(-1)">查看详情</div>
|
|
||||||
<div class="current-title">溯源详情</div>
|
|
||||||
</div>
|
|
||||||
<div class="top-img-txt">
|
|
||||||
<el-image :src="getAssetsFile('images/ecommerce/' + 'tracetxt.png')" fit="cover" />
|
|
||||||
</div>
|
|
||||||
<div class="top-bottom-warp">
|
|
||||||
<div v-for="(b, indexb) in bottomList" :key="indexb" class="top-bottom-item">
|
|
||||||
<div class="bottom-item-img">
|
|
||||||
<el-image :src="getAssetsFile('images/ecommerce/' + b.img)" fit="cover" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-image :src="getAssetsFile('images/ecommerce/' + 'traceb.png')" fit="cover" />
|
|
||||||
</div>
|
|
||||||
<div class="tab-content-warp">
|
|
||||||
<el-tabs v-model="activeCurrent" class="demo-tabs">
|
|
||||||
<el-tab-pane v-for="(t, indext) in bottomList" :key="indext" :label="t.title" :name="t.name">
|
|
||||||
<div v-if="activeCurrent == 'baseInfo'" class="baseInfo-content">
|
|
||||||
<el-row :gutter="16">
|
|
||||||
<el-col :span="6">
|
|
||||||
<banner name="codeinfo" :imglist="bannerList" indicator-pos="none" arrow="always" height="160px" :is-view="true"> </banner>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="18">
|
|
||||||
<el-row :gutter="16">
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">产品名称：</span>
|
|
||||||
<span class="val">有机沙瓤西红柿</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">追溯次数：</span>
|
|
||||||
<span class="val">30次</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">生产经营主体：</span>
|
|
||||||
<span class="val">北大荒农业技术有限公司</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">原产地：</span>
|
|
||||||
<span class="val">云南省耿马县孟定镇下坝村</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">储存仓库：</span>
|
|
||||||
<span class="val">耿马县农产品1号仓库</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">种植土地：</span>
|
|
||||||
<span class="val">XBC00001</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">采收日期：</span>
|
|
||||||
<span class="val">2025年1月1日</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">溯源码：</span>
|
|
||||||
<span class="val">SY100000202501010001</span>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="activeCurrent == 'report'" class="report-content">
|
|
||||||
<el-row :gutter="16">
|
|
||||||
<el-col :span="6">
|
|
||||||
<banner name="report" :imglist="bannerList" indicator-pos="none" arrow="always" height="160px" :is-view="true"> </banner>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="18">
|
|
||||||
<el-row :gutter="16">
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">农药残留检测：</span>
|
|
||||||
<span class="val text-main">合格</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">重金属污染检测：</span>
|
|
||||||
<span class="val text-main">合格</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">微生物检测：</span>
|
|
||||||
<span class="val text-main">合格</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">添加剂与防腐剂：</span>
|
|
||||||
<span class="val text-error">不合格</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">转基因成分检测：</span>
|
|
||||||
<span class="val text-main">合格</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">有机认证：</span>
|
|
||||||
<span class="val text-main">合格</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">国家标准：</span>
|
|
||||||
<span class="val text-main">GB-2762</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">行业标准：</span>
|
|
||||||
<span class="val text-main">NY-3548</span>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="activeCurrent == 'business'" class="business-content">
|
|
||||||
<el-row :gutter="16">
|
|
||||||
<el-col :span="6">
|
|
||||||
<banner name="business" :imglist="bannerList" indicator-pos="none" arrow="always" height="160px" :is-view="true"> </banner>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="18">
|
|
||||||
<el-row :gutter="16">
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">经营主体：</span>
|
|
||||||
<span class="val">北大荒农业技术有限公司</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">证书编号：</span>
|
|
||||||
<span class="val">JY23101010004682</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">经营范围：</span>
|
|
||||||
<span class="val">全品类农产品经营</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="des-item">
|
|
||||||
<span class="label">法人：</span>
|
|
||||||
<span class="val">张三</span>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="24" class="des-item">
|
|
||||||
<span class="label">公司地址：</span>
|
|
||||||
<span class="val">云南省昆明市呈贡区银河科技园K栋4楼</span>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="activeCurrent == 'farming'" class="farming-content">
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="24">
|
|
||||||
<el-table :data="tableData" style="width: 100%" height="280" @row-click="rowClick">
|
|
||||||
<el-table-column prop="id" label="编号" />
|
|
||||||
<el-table-column prop="title" label="活动名称" />
|
|
||||||
<el-table-column prop="inputs" label="投入品" />
|
|
||||||
<el-table-column prop="operator" label="作业人" />
|
|
||||||
<el-table-column prop="time" label="日期" width="180px" />
|
|
||||||
</el-table>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="activeCurrent == 'link'" class="link-content">
|
|
||||||
<div class="link-content-pos">
|
|
||||||
<div class="report">
|
|
||||||
<!-- <el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')" fit="none" /> -->
|
|
||||||
<costomImg
|
|
||||||
:url="'images/ecommerce/' + 'pic.png'"
|
|
||||||
:preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')]"
|
|
||||||
:is-view="true"
|
|
||||||
></costomImg>
|
|
||||||
<span class="img-tips">溯源证书</span>
|
|
||||||
</div>
|
|
||||||
<div class="qr-code">
|
|
||||||
<!-- <el-image :src="qrImg" fit="cover" /> -->
|
|
||||||
<costomImg :url="qrImg" :preview-list="[qrImg]" :is-view="true" :is-montage="false" :fit="'cover'"></costomImg>
|
|
||||||
<span class="img-tips">溯源码</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</common>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup name="ecommerce">
|
|
||||||
import common from './components/common.vue';
|
|
||||||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
|
||||||
import { isEmpty, getAssetsFile } from '@/utils';
|
|
||||||
import banner from './components/banner.vue';
|
|
||||||
import { qrImg } from '@/layouts/component/Header/base64img.js';
|
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
import costomImg from '@/components/costomImg.vue';
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
let bottomList = reactive([
|
|
||||||
{ title: '基本信息', img: 'trace01.png', name: 'baseInfo' },
|
|
||||||
{ title: '检测报告', img: 'trace02.png', name: 'report' },
|
|
||||||
{ title: '经营主体', img: 'trace03.png', name: 'business' },
|
|
||||||
{ title: '农事服务', img: 'trace05.png', name: 'farming' },
|
|
||||||
{ title: '上链信息', img: 'trace06.png', name: 'link' },
|
|
||||||
]);
|
|
||||||
|
|
||||||
let activeCurrent = ref('baseInfo');
|
|
||||||
|
|
||||||
let bannerList = reactive(['images/ecommerce/' + 'pic.png', 'images/ecommerce/' + 'pic.png']);
|
|
||||||
|
|
||||||
let tableData = reactive([
|
|
||||||
{ id: 'NS10000111', title: '施肥', inputs: '氮肥', operator: '张三', time: '2025-04-02 12:25:36' },
|
|
||||||
{ id: 'NS10000112', title: '灌溉', inputs: '矿物质', operator: '李四', time: '2025-04-01 12:25:36' },
|
|
||||||
{ id: 'NS10000113', title: '喷洒农药', inputs: '杀虫剂', operator: '王五', time: '2025-04-02 13:25:36' },
|
|
||||||
{ id: 'NS10000114', title: '施肥', inputs: '有机肥', operator: '张三', time: '2025-04-02 12:25:36' },
|
|
||||||
{ id: 'NS10000115', title: '灌溉', inputs: '白糖水', operator: '李四', time: '2025-03-31 12:25:36' },
|
|
||||||
{ id: 'NS10000116', title: '喷洒农药', inputs: '除草剂', operator: '王五', time: '2025-04-02 12:25:36' },
|
|
||||||
{ id: 'NS10000117', title: '施肥', inputs: '钾肥', operator: '张三', time: '2025-04-02 12:25:36' },
|
|
||||||
{ id: 'NS10000118', title: '灌溉', inputs: '尿素水', operator: '李四', time: '2025-04-02 12:25:36' },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const toBack = (level) => {
|
|
||||||
router.go(level);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<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;
|
|
||||||
.top-warp-b {
|
|
||||||
width: 100%;
|
|
||||||
height: 488px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.top-img-txt {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: 42%;
|
|
||||||
z-index: 1;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.top-bottom-warp {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 24px;
|
|
||||||
z-index: 1;
|
|
||||||
display: inline-flex;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: flex-start;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 32px;
|
|
||||||
padding: 0 32px;
|
|
||||||
.top-bottom-item {
|
|
||||||
display: inline-flex;
|
|
||||||
width: calc(100% / 5 - 28px);
|
|
||||||
height: 80px;
|
|
||||||
background: linear-gradient(180deg, #ffbe4d, #ffffff);
|
|
||||||
border-radius: 16px;
|
|
||||||
position: relative;
|
|
||||||
.bottom-item-img {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.top-title {
|
|
||||||
padding: 16px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
.father-title,
|
|
||||||
.current-title {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.father-title {
|
|
||||||
font-size: 18px;
|
|
||||||
color: $color-fff;
|
|
||||||
}
|
|
||||||
.father-after {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
.father-after::after {
|
|
||||||
content: '.';
|
|
||||||
position: absolute;
|
|
||||||
left: 4px;
|
|
||||||
top: 30%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
.current-title {
|
|
||||||
font-size: 16px;
|
|
||||||
color: $color-main;
|
|
||||||
position: relative;
|
|
||||||
padding: 0 8px;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
.current-title::before {
|
|
||||||
content: '.';
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 30%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content-warp {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 32px 32px 32px;
|
|
||||||
.text-main {
|
|
||||||
color: $color-main !important;
|
|
||||||
}
|
|
||||||
.text-error {
|
|
||||||
color: $color-danger !important;
|
|
||||||
}
|
|
||||||
.des-item {
|
|
||||||
width: 100%;
|
|
||||||
margin: 3px 0;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.label,
|
|
||||||
.val {
|
|
||||||
vertical-align: top;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
.label {
|
|
||||||
color: $color-999;
|
|
||||||
width: 150px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.val {
|
|
||||||
color: $color-333;
|
|
||||||
text-align: right;
|
|
||||||
width: calc(100% - 150px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.farming-content {
|
|
||||||
::v-deep() {
|
|
||||||
thead {
|
|
||||||
border-radius: 16px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
thead th {
|
|
||||||
background: $color-main-table-header;
|
|
||||||
color: $color-999 !important;
|
|
||||||
border: none !important;
|
|
||||||
padding: 10px 0;
|
|
||||||
font-size: 16px !important;
|
|
||||||
}
|
|
||||||
thead th:first-child {
|
|
||||||
border-top-left-radius: 16px;
|
|
||||||
border-bottom-left-radius: 16px;
|
|
||||||
}
|
|
||||||
thead th:last-child {
|
|
||||||
border-top-right-radius: 16px;
|
|
||||||
border-bottom-right-radius: 16px;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
margin-top: 16px !important;
|
|
||||||
}
|
|
||||||
tbody td {
|
|
||||||
border: none !important;
|
|
||||||
font-size: 16px !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;
|
|
||||||
gap: 120px;
|
|
||||||
.el-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.img-tips {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 32px;
|
|
||||||
}
|
|
||||||
.report,
|
|
||||||
.qr-code {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.report {
|
|
||||||
width: 120px;
|
|
||||||
height: 160px;
|
|
||||||
}
|
|
||||||
.qr-code {
|
|
||||||
width: 160px;
|
|
||||||
height: 160px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep() {
|
|
||||||
.el-tabs__nav {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
.el-tabs__nav-wrap:after {
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
.el-tabs__item {
|
|
||||||
font-size: 20px !important;
|
|
||||||
width: 20% !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
.el-tabs__active-bar {
|
|
||||||
height: 5px !important;
|
|
||||||
border-radius: 4px;
|
|
||||||
width: 40px !important;
|
|
||||||
left: 7% !important;
|
|
||||||
}
|
|
||||||
.el-descriptions__label,
|
|
||||||
.el-descriptions__content {
|
|
||||||
font-size: 16px !important;
|
|
||||||
}
|
|
||||||
.cell-item {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
.el-descriptions__label {
|
|
||||||
color: $color-999;
|
|
||||||
}
|
|
||||||
.el-descriptions__content {
|
|
||||||
color: $color-333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep() {
|
|
||||||
.ecommerce-banner {
|
|
||||||
padding: 0 48px !important;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.el-carousel {
|
|
||||||
position: unset !important;
|
|
||||||
}
|
|
||||||
.el-carousel__arrow--left {
|
|
||||||
left: 0 !important;
|
|
||||||
}
|
|
||||||
.el-carousel__arrow--right {
|
|
||||||
right: 0 !important;
|
|
||||||
}
|
|
||||||
.el-carousel__container {
|
|
||||||
height: 160px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="c-is-check" :style="{ height: size, width: size }" :class="isVal ? 'act' : 'normal'">
|
|
||||||
<!-- @click.stop="doCheck" -->
|
|
||||||
<div class="check-icon">
|
|
||||||
<el-icon><Check /></el-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, watch } from 'vue';
|
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
default: '28px',
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
let isVal = ref(props.value);
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.value,
|
|
||||||
() => {
|
|
||||||
isVal.value = props.value;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const doCheck = () => {
|
|
||||||
// isVal.value = !isVal.value;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.c-is-check {
|
|
||||||
width: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 20%;
|
|
||||||
&.normal {
|
|
||||||
border: 1px solid $color-999;
|
|
||||||
background: $color-fff;
|
|
||||||
}
|
|
||||||
&.act {
|
|
||||||
border: 1px solid $color-main;
|
|
||||||
background: $color-main;
|
|
||||||
}
|
|
||||||
|
|
||||||
.check-icon {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
.el-icon {
|
|
||||||
color: $color-fff;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="c-user-page-top">
|
|
||||||
<div class="title">{{ pageTitle }}</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)">
|
|
||||||
<div class="iconfont" :class="'icon-' + n.icon" :style="{ 'font-size': n.iconSize }"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, watch } from 'vue';
|
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '标题',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
let pageTitle = ref(props.title);
|
|
||||||
|
|
||||||
let linkList = reactive([
|
|
||||||
{ title: '帮助', name: 'help', icon: 'problem', iconSize: '30px', path: '' },
|
|
||||||
{ title: '我的', name: 'my', icon: 'user', iconSize: '30px', path: '/sub-operation-service/userCenter' },
|
|
||||||
{ title: '首页', name: 'home', icon: 'home', iconSize: '30px', path: '/sub-operation-service/home' },
|
|
||||||
]);
|
|
||||||
|
|
||||||
let currentLink = ref(null);
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.title,
|
|
||||||
() => {
|
|
||||||
pageTitle.value = props.title;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const toLink = (item) => {
|
|
||||||
currentLink.value = item.name;
|
|
||||||
if (item.path && item.path != '') {
|
|
||||||
router.push(item.path);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.c-user-page-top {
|
|
||||||
width: 100%;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.title,
|
|
||||||
.top-right {
|
|
||||||
display: inline-flex;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.top-right {
|
|
||||||
justify-content: flex-start;
|
|
||||||
gap: 40px;
|
|
||||||
.right-item {
|
|
||||||
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%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
&.act {
|
|
||||||
background: $color-main-table-header !important;
|
|
||||||
border: 1px solid $color-fff;
|
|
||||||
.iconfont {
|
|
||||||
color: $color-main;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-item:hover {
|
|
||||||
background: $color-main-table-header !important;
|
|
||||||
border: 1px solid $color-fff;
|
|
||||||
.iconfont {
|
|
||||||
color: $color-main;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,460 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="my-shoping-car-warp">
|
|
||||||
<userHeader :title="'购物车' + total"></userHeader>
|
|
||||||
<div class="page-content-warp">
|
|
||||||
<div class="fix-top">
|
|
||||||
<div class="do-all" @click="toCheckAll">
|
|
||||||
<div class="do-all-pos">
|
|
||||||
<ischeck :value="isAll"></ischeck>
|
|
||||||
<span class="all-txt">全选</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="batch-del">
|
|
||||||
<el-icon><Delete /></el-icon>
|
|
||||||
<span class="del-txt">批量删除</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="conetnt-warp">
|
|
||||||
<div class="content-item-warp">
|
|
||||||
<div v-for="(n, index) in datalist" :key="index" class="content-item">
|
|
||||||
<div class="shop-info" @click="toCheckShop(index)">
|
|
||||||
<div class="shop-do">
|
|
||||||
<ischeck :value="n.ischeck"></ischeck>
|
|
||||||
</div>
|
|
||||||
<div class="shop-img">
|
|
||||||
<costomImg
|
|
||||||
:url="'images/ecommerce/' + 'pic.png'"
|
|
||||||
:preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')]"
|
|
||||||
:is-view="false"
|
|
||||||
></costomImg>
|
|
||||||
</div>
|
|
||||||
<span class="shop-name txt-ellipsis clamp2">{{ n.shop }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="n.goodlist && n.goodlist.length > 0" class="good-list">
|
|
||||||
<div v-for="(g, indexg) in n.goodlist" :key="indexg" class="good-item">
|
|
||||||
<div class="good-do" @click="toCheckGood(index, indexg)">
|
|
||||||
<div class="good-do-pos">
|
|
||||||
<ischeck :value="g.ischeck" size="24px"></ischeck>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="good-img" @click="toCheckGood(index, indexg)">
|
|
||||||
<costomImg
|
|
||||||
:url="'images/ecommerce/' + 'pic.png'"
|
|
||||||
:preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')]"
|
|
||||||
:is-view="false"
|
|
||||||
></costomImg>
|
|
||||||
</div>
|
|
||||||
<div class="good-info" @click="toCheckGood(index, indexg)">
|
|
||||||
<div class="good-info-pos">
|
|
||||||
<div class="txt-ellipsis clamp2">{{ g.title || '--' }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="good-price-num">
|
|
||||||
<div class="good-price-num-pos">
|
|
||||||
<div class="price" @click="toCheckGood(index, indexg)">{{ g.price }} / {{ g.unit }}</div>
|
|
||||||
<div class="total" @click="toCheckGood(index, indexg)">{{ (g.price * g.num).toFixed(2) }}</div>
|
|
||||||
<div class="num">
|
|
||||||
<div class="right-item">
|
|
||||||
<el-input-number v-model="g.num" :min="1">
|
|
||||||
<template #suffix>
|
|
||||||
<span>{{ g.unit }}</span>
|
|
||||||
</template>
|
|
||||||
</el-input-number>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="good-del" @click="doSingleDel(index, indexg)">
|
|
||||||
<span>删除</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="fix-bottom">
|
|
||||||
<div class="bottom-total">
|
|
||||||
<span class="tips">合计</span>
|
|
||||||
<span class="total">{{ totalAmout.toFixed(2) }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="bottom-do">
|
|
||||||
<el-button type="primary" @click="toSettlement">结算</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, computed } from 'vue';
|
|
||||||
import { isEmpty, getAssetsFile } from '@/utils';
|
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
import userHeader from './components/userHeader.vue';
|
|
||||||
import ischeck from './components/ischeck.vue';
|
|
||||||
import costomImg from '@/components/costomImg.vue';
|
|
||||||
import { useApp } from '@/hooks';
|
|
||||||
|
|
||||||
const app = useApp();
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
let total = ref(99);
|
|
||||||
let isAll = ref(false);
|
|
||||||
|
|
||||||
let datalist = reactive([
|
|
||||||
{
|
|
||||||
id: '01',
|
|
||||||
shop: '银河生态农产品有限公司',
|
|
||||||
shopimg: '',
|
|
||||||
ischeck: false,
|
|
||||||
goodlist: [
|
|
||||||
{ id: '001', title: '耿马镇 原生态 有机 西红柿', price: 4.9, unit: '份', num: 2, ischeck: false },
|
|
||||||
{ id: '002', title: '耿马镇 原生态 有机 西蓝花', price: 2.6, unit: '份', num: 100, ischeck: false },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '02',
|
|
||||||
shop: '方立生态农产品有限公司',
|
|
||||||
shopimg: '',
|
|
||||||
ischeck: false,
|
|
||||||
goodlist: [
|
|
||||||
{ id: '001', title: '勐撒镇 原生态 有机 大白菜', price: 4.9, unit: '/份', num: 2, ischeck: false },
|
|
||||||
{ id: '002', title: '勐撒镇 原生态 有机 生姜', price: 2.6, unit: '/份', num: 100, ischeck: false },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '03',
|
|
||||||
shop: '佳佳生态农产品有限公司',
|
|
||||||
shopimg: '',
|
|
||||||
ischeck: false,
|
|
||||||
goodlist: [
|
|
||||||
{ id: '001', title: '勐简镇 原生态 有机 花香蓝莓', price: 4.9, unit: '/份', num: 2, ischeck: false },
|
|
||||||
{ id: '002', title: '勐简镇 原生态古树茶', price: 2.6, unit: '/份', num: 100, ischeck: false },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
let totalAmout = computed(() => {
|
|
||||||
let num = 0;
|
|
||||||
let list = [];
|
|
||||||
if (datalist && datalist.length > 0) {
|
|
||||||
list = datalist
|
|
||||||
.map((m) => {
|
|
||||||
return m.goodlist;
|
|
||||||
})
|
|
||||||
.flat();
|
|
||||||
|
|
||||||
// console.info('totalAmout**************', list);
|
|
||||||
if (list && list.length > 0) {
|
|
||||||
num = list.reduce((acc, current) => {
|
|
||||||
return acc + (current.ischeck ? current.price * current.num : 0);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return num;
|
|
||||||
});
|
|
||||||
|
|
||||||
const toSettlement = () => {};
|
|
||||||
|
|
||||||
const toCheckAll = () => {
|
|
||||||
isAll.value = !isAll.value;
|
|
||||||
console.info('操作全选', isAll.value);
|
|
||||||
if (datalist && datalist.length > 0) {
|
|
||||||
datalist.forEach((m) => {
|
|
||||||
m.ischeck = isAll.value;
|
|
||||||
if (m.goodlist && m.goodlist.length > 0) {
|
|
||||||
m.goodlist = setCheck(m.goodlist, isAll.value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const setCheck = (data, val) => {
|
|
||||||
let list = [];
|
|
||||||
if (data && data.length > 0) {
|
|
||||||
list = data.map((m) => {
|
|
||||||
return { ...m, ischeck: val };
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return list;
|
|
||||||
};
|
|
||||||
|
|
||||||
const toCheckShop = (index) => {
|
|
||||||
if (index > -1) {
|
|
||||||
datalist[index].ischeck = !datalist[index].ischeck;
|
|
||||||
if (datalist[index].goodlist && datalist[index].goodlist.length > 0) {
|
|
||||||
datalist[index].goodlist = setCheck(datalist[index].goodlist, datalist[index].ischeck);
|
|
||||||
}
|
|
||||||
setIsAll();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const toCheckGood = (indexP, index) => {
|
|
||||||
if (indexP > -1 && index > -1) {
|
|
||||||
let list = datalist[indexP].goodlist;
|
|
||||||
list[index].ischeck = !list[index].ischeck;
|
|
||||||
let len = list.length || 0;
|
|
||||||
let checkNum = list.reduce((acc, current) => {
|
|
||||||
return acc + (current.ischeck ? 1 : 0);
|
|
||||||
}, 0);
|
|
||||||
|
|
||||||
if (checkNum > 0 && checkNum < len) {
|
|
||||||
datalist[indexP].ischeck = false;
|
|
||||||
} else if (checkNum > 0 && checkNum == len) {
|
|
||||||
datalist[indexP].ischeck = true;
|
|
||||||
} else {
|
|
||||||
datalist[indexP].ischeck = false;
|
|
||||||
}
|
|
||||||
setIsAll();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const setIsAll = () => {
|
|
||||||
let len = datalist.length || 0;
|
|
||||||
let checkNum = datalist.reduce((acc, current) => {
|
|
||||||
return acc + (current.ischeck ? 1 : 0);
|
|
||||||
}, 0);
|
|
||||||
|
|
||||||
if (checkNum > 0 && checkNum < len) {
|
|
||||||
isAll.value = false;
|
|
||||||
} else if (checkNum > 0 && checkNum == len) {
|
|
||||||
isAll.value = true;
|
|
||||||
} else {
|
|
||||||
isAll.value = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const doSingleDel = (indexP, index) => {
|
|
||||||
if (indexP > -1 && index > -1) {
|
|
||||||
app
|
|
||||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning',
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
datalist[indexP].goodlist.splice(index, 1);
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.my-shoping-car-warp {
|
|
||||||
width: 100%;
|
|
||||||
.page-content-warp {
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100vh - 116px);
|
|
||||||
position: relative;
|
|
||||||
background: $color-fff;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 16px;
|
|
||||||
.fix-top,
|
|
||||||
.fix-bottom {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 16px;
|
|
||||||
z-index: 1;
|
|
||||||
background: $color-fff;
|
|
||||||
}
|
|
||||||
.fix-top {
|
|
||||||
top: 0;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.do-all,
|
|
||||||
.batch-del {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.batch-del {
|
|
||||||
border: 1px solid $color-333;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
.el-icon {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
.del-txt,
|
|
||||||
.el-icon {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.del-txt {
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.fix-bottom {
|
|
||||||
bottom: 0;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
.bottom-total,
|
|
||||||
.bottom-do {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.bottom-total {
|
|
||||||
.tips,
|
|
||||||
.total {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.tips {
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
.total {
|
|
||||||
font-size: 42px;
|
|
||||||
color: $color-main;
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
.total::before {
|
|
||||||
content: '￥';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bottom-do {
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
display: inline-flex;
|
|
||||||
::v-deep() {
|
|
||||||
.el-button {
|
|
||||||
font-size: 18px !important;
|
|
||||||
padding: 0 40px !important;
|
|
||||||
line-height: 42px !important;
|
|
||||||
height: 42px !important;
|
|
||||||
display: inline-block !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.conetnt-warp {
|
|
||||||
width: 100%;
|
|
||||||
padding: 80px 16px 96px 16px;
|
|
||||||
overflow-y: auto;
|
|
||||||
height: 100%;
|
|
||||||
.content-item-warp {
|
|
||||||
width: 100%;
|
|
||||||
.content-item {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
.shop-info {
|
|
||||||
width: 100%;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
gap: 16px;
|
|
||||||
.shop-do,
|
|
||||||
.shop-img,
|
|
||||||
.shop-name {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.shop-img {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.shop-do {
|
|
||||||
width: 30px;
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.good-do,
|
|
||||||
.good-img,
|
|
||||||
.good-info,
|
|
||||||
.good-price-num {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.good-do {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
.good-do-pos {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.good-img {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
}
|
|
||||||
.good-info {
|
|
||||||
width: 200px;
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
.good-info-pos {
|
|
||||||
font-size: 18px;
|
|
||||||
color: $color-666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.good-price-num {
|
|
||||||
width: calc(100% - 340px);
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
.good-price-num-pos {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
gap: 16px;
|
|
||||||
.price,
|
|
||||||
.total {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
.price {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.total {
|
|
||||||
color: $color-main;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
.total::before {
|
|
||||||
content: '￥';
|
|
||||||
}
|
|
||||||
.good-del {
|
|
||||||
color: $color-999;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="user-lands-warp">我的土地</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive } from 'vue';
|
|
||||||
import { isEmpty, getAssetsFile } from '@/utils';
|
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.user-lands-warp {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="user-orders-warp">我的订单</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive } from 'vue';
|
|
||||||
import { isEmpty, getAssetsFile } from '@/utils';
|
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.user-orders-warp {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user