农资交易—购物车
This commit is contained in:
“13713575202”
parent
f10f91eaab
commit
af29ce8841
@ -3,23 +3,31 @@ import request from '@/utils/axios';
|
||||
|
||||
/* 经营主体相关 */
|
||||
export function getBuinessList(params = {}) {
|
||||
return request('land-resource/business/businessPage', {
|
||||
return request('/product-business/business/businessPage', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
export function saveBuiness(data = {}) {
|
||||
return request('land-resource/business/businessSave', {
|
||||
return request('/product-business/business/businessSave', {
|
||||
method: 'POST',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
export function editBuiness(data = {}) {
|
||||
return request('/land-resource/business/businessEdit', {
|
||||
return request('/product-business/business/businessEdit', {
|
||||
method: 'POST',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
export function delBuiness(params = {}) {
|
||||
return request('/product-businesse/business/deleteBusiness', {
|
||||
method: 'DELETE',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// #endregion
|
||||
|
||||
@ -15,29 +15,35 @@ export default [
|
||||
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/businessEntity',
|
||||
component: () => import('@/views/productOperateMain/businessEntity/index.vue'),
|
||||
name: 'businessEntity',
|
||||
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',
|
||||
component: () => import('@/views/productOperateMain/examine/list.vue'),
|
||||
|
||||
@ -0,0 +1,488 @@
|
||||
<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,6 +49,8 @@ import {
|
||||
importOperationRecord,
|
||||
} from '@/apis/land';
|
||||
|
||||
import { getBuinessList } from '@/apis/productOperateMain';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
@ -82,6 +84,12 @@ const state = reactive({
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
businessType: '',
|
||||
businessId: '',
|
||||
productType: '', //产品类型
|
||||
createStartTime: '',
|
||||
createEndTime: '',
|
||||
primaryProduct: '',
|
||||
},
|
||||
form: {},
|
||||
selection: [],
|
||||
@ -95,7 +103,7 @@ const state = reactive({
|
||||
column: [
|
||||
{
|
||||
label: '主体代码',
|
||||
prop: 'executor',
|
||||
prop: 'businessId',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
search: true,
|
||||
@ -115,29 +123,29 @@ const state = reactive({
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// label: '主体类型',
|
||||
// prop: 'dictType',
|
||||
// type: 'select',
|
||||
// search: true,
|
||||
// props: {
|
||||
// label: 'dictName',
|
||||
// value: 'dictType',
|
||||
// },
|
||||
// dicUrl: `${VITE_APP_BASE_API}/system/dept/list?dictType=sys_business_product_type¤t=1&size=10`,
|
||||
// dicHeaders: {
|
||||
// authorization: UserStore.token,
|
||||
// },
|
||||
// dicFormatter: (res) => res.data,
|
||||
// rules: {
|
||||
// required: true,
|
||||
// message: '请选择',
|
||||
// trigger: 'blur',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
label: '主体类型',
|
||||
prop: 'businessType',
|
||||
type: 'select',
|
||||
search: true,
|
||||
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: 'landId',
|
||||
prop: 'productType',
|
||||
type: 'select',
|
||||
remote: false,
|
||||
search: true,
|
||||
@ -259,11 +267,30 @@ const state = reactive({
|
||||
{ label: '创建时间', prop: 'crop', addDisplay: false, editDisplay: false, search: false },
|
||||
],
|
||||
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: 'operationType',
|
||||
prop: 'productType',
|
||||
type: 'select',
|
||||
search: true,
|
||||
dicData: jobTypeOptions,
|
||||
@ -308,26 +335,26 @@ const state = reactive({
|
||||
|
||||
// 加载
|
||||
const loadData = () => {
|
||||
// state.loading = true;
|
||||
// getOperationRecord(state.query)
|
||||
// .then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// const { current, size, total, records } = res.data;
|
||||
// state.data = records;
|
||||
// state.pageData = {
|
||||
// currentPage: current || 1,
|
||||
// pageSize: size || 10,
|
||||
// total: total,
|
||||
// };
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// app.$message.error(err.msg);
|
||||
// state.data = [];
|
||||
// })
|
||||
// .finally(() => {
|
||||
// state.loading = false;
|
||||
// });
|
||||
state.loading = true;
|
||||
getBuinessList(state.query)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
state.data = records;
|
||||
state.pageData = {
|
||||
currentPage: current || 1,
|
||||
pageSize: size || 10,
|
||||
total: total,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
state.data = [];
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
loadData();
|
||||
|
||||
BIN
sub-operation-service/src/assets/images/ecommerce/trace01.png
Normal file
BIN
sub-operation-service/src/assets/images/ecommerce/trace01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
sub-operation-service/src/assets/images/ecommerce/trace02.png
Normal file
BIN
sub-operation-service/src/assets/images/ecommerce/trace02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
sub-operation-service/src/assets/images/ecommerce/trace03.png
Normal file
BIN
sub-operation-service/src/assets/images/ecommerce/trace03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
sub-operation-service/src/assets/images/ecommerce/trace05.png
Normal file
BIN
sub-operation-service/src/assets/images/ecommerce/trace05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
sub-operation-service/src/assets/images/ecommerce/trace06.png
Normal file
BIN
sub-operation-service/src/assets/images/ecommerce/trace06.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
sub-operation-service/src/assets/images/ecommerce/traceb.png
Normal file
BIN
sub-operation-service/src/assets/images/ecommerce/traceb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 768 KiB |
BIN
sub-operation-service/src/assets/images/ecommerce/tracetxt.png
Normal file
BIN
sub-operation-service/src/assets/images/ecommerce/tracetxt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
104
sub-operation-service/src/components/costomImg.vue
Normal file
104
sub-operation-service/src/components/costomImg.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<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 class="layout-header-top-right">
|
||||
<span>商家中心</span>
|
||||
<span>个人中心</span>
|
||||
<span @click="toUserCenter">个人中心</span>
|
||||
<span @click="toHome" class="back-home">
|
||||
<div class="iconfont icon-home" style="font-size: 12px"></div>
|
||||
<span>返回首页</span>
|
||||
@ -117,6 +117,10 @@ const toHome = () => {
|
||||
console.info('toHome', router);
|
||||
router.push('/sub-operation-service/home');
|
||||
};
|
||||
|
||||
const toUserCenter = () => {
|
||||
router.push('/sub-operation-service/userCenter');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
119
sub-operation-service/src/layouts/component/UserMenu/index.vue
Normal file
119
sub-operation-service/src/layouts/component/UserMenu/index.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<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>
|
||||
27
sub-operation-service/src/layouts/userCentre.vue
Normal file
27
sub-operation-service/src/layouts/userCentre.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<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,6 +8,7 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Layout from '@/layouts/index.vue';
|
||||
import Views from '@/layouts/Views.vue';
|
||||
import userCentre from '@/layouts/userCentre.vue';
|
||||
|
||||
export const constantRoutes = [
|
||||
{
|
||||
@ -58,11 +59,17 @@ export const constantRoutes = [
|
||||
meta: { title: '农资交易' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/ecommerce-agriculturalDetai',
|
||||
path: '/sub-operation-service/ecommerce-agriculturalDetail',
|
||||
component: () => import('@/views/ecommerce/agriculturalDetail.vue'),
|
||||
name: 'agriculturalDetail',
|
||||
meta: { title: '农资详情' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/ecommerce-sourceCodeDetail',
|
||||
component: () => import('@/views/ecommerce/sourceCodeDetail.vue'),
|
||||
name: 'sourceCodeDetail',
|
||||
meta: { title: '溯源详情' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -116,6 +123,33 @@ 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,9 +1,10 @@
|
||||
// color
|
||||
$legacy-ie: 10;
|
||||
$color-main:#25BF82;
|
||||
$color-main-table-header:rgba(37,191,130,0.1);
|
||||
$color-main-table-header:rgba(37,191,130,0.05);
|
||||
$color-main-border:rgba(37, 191, 130, 0.5);
|
||||
$color-5a:#5A5A5A;
|
||||
$color-balck-mask:rgba(0,0,0,0.5);
|
||||
$color-000:#000;
|
||||
$color-fff:#fff;
|
||||
$color-da:#dadada;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -38,3 +38,4 @@
|
||||
max-height: calc(1.5em * 2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
<template #main>
|
||||
<div class="agricultural-detail-info">
|
||||
<div class="top-title">
|
||||
<div class="father-title">农资交易</div>
|
||||
<div class="father-title" @click="toBack(-1)">农资交易</div>
|
||||
<div class="current-title">查看详情</div>
|
||||
</div>
|
||||
|
||||
<div class="top-info">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<banner name="landdetail" :imglist="bannerList" indicator-pos="none" arrow="always" height="340px"> </banner>
|
||||
<banner name="landdetail" :imglist="bannerList" indicator-pos="none" arrow="always" height="340px" :is-view="true"> </banner>
|
||||
</el-col>
|
||||
<el-col :span="12" class="top-info-txt">
|
||||
<h1 class="title">耿马县勐简乡有机沙瓤西红柿</h1>
|
||||
@ -185,6 +185,9 @@ import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { qrImg } from '@/layouts/component/Header/base64img.js';
|
||||
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']);
|
||||
const tabList = reactive([
|
||||
@ -199,7 +202,14 @@ let saveInfo = reactive({
|
||||
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 = () => {};
|
||||
</script>
|
||||
@ -221,6 +231,7 @@ const toCopy = () => {};
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.father-title {
|
||||
font-size: 18px;
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
<div class="ecommerce-banner" :style="{ height: height }">
|
||||
<el-carousel height="height" motion-blur :indicator-position="indicatorPos" :arrow="arrow">
|
||||
<el-carousel-item v-for="(item, index) in list" :key="index">
|
||||
<img :src="getAssetsFile(item)" />
|
||||
<!-- <el-image :src="getAssetsFile(item)" fit="cover" /> -->
|
||||
<costomImg :url="item" :preview-list="srcList" :is-view="isViewVal"></costomImg>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import costomImg from '@/components/costomImg.vue';
|
||||
|
||||
const props = defineProps({
|
||||
height: { type: String, default: '320px' },
|
||||
@ -29,16 +29,31 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: 'hover',
|
||||
},
|
||||
isView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
let nameVal = ref(props.name);
|
||||
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(
|
||||
() => (props.list, props.imglist),
|
||||
() => (props.list, props.imglist, props.isView),
|
||||
() => {
|
||||
nameVal.value = props.name;
|
||||
list = props.imglist;
|
||||
isViewVal.value = props.isView;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
@ -49,6 +64,10 @@ watch(
|
||||
.ecommerce-banner {
|
||||
width: 100%;
|
||||
::v-deep() {
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.el-carousel__item {
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ const router = useRouter();
|
||||
|
||||
const toDetail = () => {
|
||||
let id = '01';
|
||||
router.push('/sub-operation-service/ecommerce-agriculturalDetai?id=' + id);
|
||||
router.push('/sub-operation-service/ecommerce-agriculturalDetail?id=' + id);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -55,7 +55,7 @@ let treeList = reactive([
|
||||
},
|
||||
]);
|
||||
|
||||
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner.png']);
|
||||
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner1.png']);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.goods-list-warp {
|
||||
|
||||
@ -218,7 +218,7 @@ let tableData = reactive([
|
||||
]);
|
||||
|
||||
const rowClick = (data) => {
|
||||
router.push('/sub-operation-service/purchaserDetail?id=' + data.id);
|
||||
router.push('/sub-operation-service/ecommerce-purchaserDetail?id=' + data.id);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
471
sub-operation-service/src/views/ecommerce/sourceCodeDetail.vue
Normal file
471
sub-operation-service/src/views/ecommerce/sourceCodeDetail.vue
Normal file
@ -0,0 +1,471 @@
|
||||
<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>
|
||||
@ -0,0 +1,71 @@
|
||||
<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>
|
||||
@ -0,0 +1,101 @@
|
||||
<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>
|
||||
460
sub-operation-service/src/views/userCenter/shoppingCart.vue
Normal file
460
sub-operation-service/src/views/userCenter/shoppingCart.vue
Normal file
@ -0,0 +1,460 @@
|
||||
<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>
|
||||
15
sub-operation-service/src/views/userCenter/userLands.vue
Normal file
15
sub-operation-service/src/views/userCenter/userLands.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<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>
|
||||
15
sub-operation-service/src/views/userCenter/userOrders.vue
Normal file
15
sub-operation-service/src/views/userCenter/userOrders.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<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