feat(http): 修改接上传图片 form表单 页面

src/api/advertisement/list.ts

@@ -1,5 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
-import { PageParams, ListGetResultModel, UpdateItem } from './model';
+import { PageParams, ListGetResultModel, UpdateItem, DeleteItem } from './model';
 import { Result, UploadFileParams } from '/#/axios';
 
 enum Api {
@@ -7,7 +7,10 @@ enum Api {
   recommend = '/zfb-api/zfb/recommend/selectByType',
   update = '/zfb-api/zfb/rotation/update',
   save = '/zfb-api/zfb/rotation/save',
+  delete = '/zfb-api/zfb/rotation/delete',
   uploadFile = '/zfb-api/zfb/house/upload',
+  padssave = '/zfb-api/zfb/recommend/save',
+  padsupdate = '/zfb-api/zfb/recommend/update',
 }
 
 /**
@@ -54,6 +57,16 @@ export const itemSaveApi = (params: UpdateItem) =>
     },
   });
 
+export const itemDeletelApi = (params: DeleteItem) =>
+  defHttp.post<ListGetResultModel>({
+    url: Api.delete,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
 export function uploadApi(
   params: UploadFileParams,
   onUploadProgress: (progressEvent: ProgressEvent) => void,
@@ -66,3 +79,23 @@ export function uploadApi(
     params,
   );
 }
+
+export const padsUpdateApi = (params: UpdateItem) =>
+  defHttp.post<ListGetResultModel>({
+    url: Api.padsupdate,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const padsSaveApi = (params: UpdateItem) =>
+  defHttp.post<ListGetResultModel>({
+    url: Api.padssave,
+    params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/api/advertisement/model.ts

@@ -23,6 +23,19 @@ export interface UpdateItem {
   url?: string;
 }
 
+export interface PadsItem {
+  connectId: number;
+  type: number;
+  id: number;
+  image: string;
+  orderNum: string;
+  title: string;
+  url?: string;
+}
+export interface DeleteItem {
+  id: number;
+}
+
 /**
  * @description: Request list return value
  */

src/api/order/list.ts

@@ -54,7 +54,8 @@ export const BrandListApi = (params: PageParams) =>
 
 export const GetOrderInfoApi = (params: OrderInfoParams) =>
   defHttp.get<ListGetResultModel>({
-    url: `${Api.getOrderInfo}/${params.id}/${params.brandId}`,
+    url: Api.getOrderInfo,
+    params,
     headers: {
       // @ts-ignore
       ignoreCancelToken: true,

src/components/Form/src/types/index.ts

@@ -112,4 +112,5 @@ export type ComponentType =
   | 'Render'
   | 'Slider'
   | 'Rate'
+  | 'Time'
   | 'Divider';

src/views/dashboard/advertisement/list.vue

@@ -21,9 +21,7 @@
               label: '删除',
               popConfirm: {
                 title: '是否确认删除',
-                confirm: () => {
-                  createMessage.info(`暂未接入`);
-                },
+                confirm: deleteConfirm.bind(null, record),
               },
             },
           ]"
@@ -39,7 +37,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useDrawer } from '/@/components/Drawer';
   import listDrawer from './listDrawer.vue';
-  import { ListApi } from '/@/api/advertisement/list';
+  import { ListApi, itemDeletelApi } from '/@/api/advertisement/list';
   // param type 2
   export default defineComponent({
     components: { BasicTable, TableAction, TableImg, listDrawer },
@@ -67,6 +65,7 @@
         {
           title: '编辑时间',
           dataIndex: 'createTime',
+          component: 'Time',
           width: 150,
         },
 
@@ -103,7 +102,14 @@
           isUpdate: true,
         });
       }
+      function deleteConfirm(val) {
+        itemDeletelApi({ id: val.id }).then((res) => {
+          createMessage.success(res);
+          reload();
+        });
+      }
       return {
+        deleteConfirm,
         reload,
         registerTable,
         createMessage,

src/views/dashboard/advertisement/listDrawer.vue

@@ -58,7 +58,13 @@
             },
           });
           console.log('data', data, modelRef.value);
-          httpApi({ ...modelRef.value, ...data, image: data.image.toString() }).then((res) => {
+          httpApi({
+            ...modelRef.value,
+            ...data,
+            image:
+              'http://zfb-4dkankan.oss-cn-shenzhen.aliyuncs.com/scene/1546422941329_测试.png' ??
+              data.image.toString(),
+          }).then((res) => {
             console.log('itemUpdateApi', res);
             setProps({
               submitButtonOptions: {

src/views/dashboard/advertisement/pads.vue

@@ -35,11 +35,18 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { BasicTable, useTable, BasicColumn, TableAction, TableImg } from '/@/components/Table';
+  import {
+    BasicTable,
+    useTable,
+    BasicColumn,
+    TableAction,
+    TableImg,
+    FormProps,
+  } from '/@/components/Table';
   import { useMessage } from '/@/hooks/web/useMessage';
   // import { Tag } from 'ant-design-vue';
   import PadsDrawer from './padsDrawer.vue';
-  import { ListApi } from '/@/api/advertisement/list';
+  import { RecommendListApi } from '/@/api/advertisement/list';
   import { useDrawer } from '/@/components/Drawer';
   // param type 2
   export default defineComponent({
@@ -79,13 +86,50 @@
           width: 150,
         },
       ];
+      const searchForm: Partial<FormProps> = {
+        labelWidth: 100,
+        schemas: [
+          {
+            field: 'type',
+            label: '推荐类型',
+            component: 'Select',
+            defaultValue: 0,
+            colProps: {
+              xl: 5,
+              xxl: 5,
+            },
+            componentProps: {
+              change: function (e) {
+                console.log('componentProps', e);
+              },
+              options: [
+                {
+                  label: '新上房源',
+                  value: 0,
+                  key: '0',
+                },
+                {
+                  label: '热门房源',
+                  value: 1,
+                  key: '1',
+                },
+                {
+                  label: '热门企业',
+                  value: 2,
+                  key: '2',
+                },
+              ],
+            },
+          },
+        ],
+      };
 
       const [registerTable] = useTable({
-        title: '新上房源 /热门房源 /热门企业',
-        api: ListApi,
+        title: '推荐位',
+        api: RecommendListApi,
         columns: columns,
-        useSearchForm: false,
-        // formConfig: searchForm,
+        useSearchForm: true,
+        formConfig: searchForm,
         showTableSetting: true,
         tableSetting: { fullScreen: true },
         showIndexColumn: false,

src/views/dashboard/advertisement/padsDrawer.vue

@@ -8,21 +8,23 @@
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicForm, useForm } from '/@/components/Form';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { schemas } from './schemas';
+  import { padsSchemas } from './schemas';
+  import { padsSaveApi, padsUpdateApi } from '/@/api/advertisement/list';
 
   export default defineComponent({
     components: { BasicDrawer, BasicForm },
-    setup() {
+    setup(_, { emit }) {
       const { createMessage } = useMessage();
+      const modelRef = ref({});
       const isUpdate = ref(true);
-      const [registerForm, { validate, setProps, resetFields, setFieldsValue }] = useForm({
+      const [registerForm, { validate, getForm, setProps, resetFields, setFieldsValue }] = useForm({
         labelCol: {
           span: 4,
         },
         wrapperCol: {
           span: 18,
         },
-        schemas: schemas,
+        schemas: padsSchemas,
         actionColOptions: {
           offset: 8,
           span: 8,
@@ -35,20 +37,33 @@
 
       async function summitAddDrawer() {
         try {
-          await validate();
+          let data = await validate();
+          let SearchForm = getForm().getFieldsValue();
+          console.log('SearchForm', SearchForm);
+          let httpApi = unref(isUpdate) ? padsUpdateApi : padsSaveApi;
           setProps({
             submitButtonOptions: {
               loading: true,
             },
           });
-          setTimeout(() => {
+          httpApi({
+            ...modelRef.value,
+            ...data,
+            image:
+              'http://zfb-4dkankan.oss-cn-shenzhen.aliyuncs.com/scene/1546422941329_测试.png' ??
+              data.image.toString(),
+            type: SearchForm,
+          }).then((res) => {
+            console.log('itemUpdateApi', SearchForm, res);
             setProps({
               submitButtonOptions: {
                 loading: false,
               },
             });
             createMessage.success('提交成功！');
-          }, 2000);
+            emit('reload');
+            closeDrawer();
+          });
         } catch (error) {}
       }
       const getTitle = computed(() => (!unref(isUpdate) ? '新增轮播资讯' : '编辑轮播资讯'));
@@ -56,6 +71,7 @@
         resetFields();
         setDrawerProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;
+        modelRef.value = data.record;
 
         if (unref(isUpdate)) {
           console.log('data.record', data.record);

src/views/dashboard/advertisement/schemas.ts

@@ -4,6 +4,54 @@ import { Tinymce } from '/@/components/Tinymce/index';
 import { h } from 'vue';
 import { uploadApi } from '/@/api/advertisement/list';
 
+export const padsSchemas: FormSchema[] = [
+  {
+    field: 'title',
+    component: 'Input',
+    label: '正文标题',
+    componentProps: {
+      placeholder: '轮播图正文标题',
+    },
+    required: true,
+  },
+
+  {
+    field: 'orderNum',
+    component: 'Input',
+    label: '轮播排序',
+    defaultValue: 0,
+    componentProps: {
+      placeholder: '轮播排序',
+      type: 'number',
+      min: 0,
+    },
+    required: true,
+  },
+  {
+    field: 'connectId',
+    component: 'Input',
+    label: '链接ID',
+    componentProps: {
+      placeholder: '链接',
+    },
+    // required: true,
+  },
+  {
+    field: 'image',
+    component: 'Upload',
+    label: '封面图',
+    rules: [{ required: true, message: '请选择上传文件' }],
+    componentProps: {
+      api: uploadApi,
+      maxNumber: 1,
+      afterFetch: function (data) {
+        console.log('data', data);
+        return data;
+      },
+    },
+    required: true,
+  },
+];
 export const schemas: FormSchema[] = [
   {
     field: 'title',
@@ -44,7 +92,7 @@ export const schemas: FormSchema[] = [
     componentProps: {
       api: uploadApi,
       maxNumber: 1,
-      change(data) {
+      afterFetch: function (data) {
         console.log('data', data);
         return data;
       },

src/views/dashboard/order/confirmModal.vue

@@ -7,7 +7,7 @@
   import { defineComponent, reactive } from 'vue';
   import { BasicForm, useForm, FormSchema } from '/@/components/Form/index';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { ShippingListApi, sendGoods } from '/@/api/order/list'; //GetOrderInfoApi
+  import { ShippingListApi, sendGoods, GetOrderInfoApi } from '/@/api/order/list'; //GetOrderInfoApi
 
   export default defineComponent({
     name: 'ConfirmModal',
@@ -30,7 +30,7 @@
             labelField: 'name',
             valueField: 'id',
             immediate: true,
-            onChange: function (value, opt) {
+            onChange: function (_, opt) {
               Reflect.set(modalRecord, 'shippingName', opt.label);
             },
             params: {
@@ -66,14 +66,13 @@
         console.log('handleSubmit');
         try {
           const values = await validate();
-          // const orderInfo = await GetOrderInfoApi(modalRecord);
-          // console.log('orderInfo', orderInfo);
-
+          const orderInfo = await GetOrderInfoApi({
+            id: modalRecord.id,
+            brandId: modalRecord.brandId,
+          });
           Reflect.set(modalRecord, 'shippingNo', values.orderSn);
           Reflect.set(modalRecord, 'shippingId', values.shippingId);
-          console.log('modalRecord', modalRecord, values);
-          const orderInfo = await sendGoods(modalRecord);
-          console.log('orderInfo', values, orderInfo);
+          await sendGoods({ ...orderInfo, ...modalRecord });
           resetFields();
           closeModal();
           emit('reload');

src/views/dashboard/order/data.tsx

@@ -5,83 +5,44 @@ import { Button } from '/@/components/Button';
 // import { Time } from '/@/components/Time';
 import { Badge } from 'ant-design-vue';
 
-export const refundData = {
-  id: 731,
-  orderSn: '20220210070337274124598',
-  userId: 21,
-  orderStatus: 300,
-  shippingStatus: 1,
-  payStatus: 2,
-  consignee: '刘生',
-  country: null,
-  province: '浙江省',
-  city: '杭州市',
-  district: '萧山区',
-  address: '桂语朝阳2-3001',
-  mobile: '13967143520',
-  postscript: null,
-  shippingId: 91,
-  shippingName: '亚马逊物流',
-  shippingNo: '11111',
-  payId: 'wx1007033753906933ad37fff63824bd0000',
-  payName: null,
-  shippingFee: 0.0,
-  actualPrice: 0.01,
-  integral: 0,
-  integralMoney: 0.0,
-  orderPrice: 0.01,
-  goodsPrice: 0.01,
-  addTime: 1644447817000,
-  confirmTime: null,
-  payTime: 1644447827000,
-  freightPrice: 0,
-  couponId: '',
-  parentId: null,
-  couponPrice: 0.0,
-  callbackStatus: null,
-  orderType: '4',
-  userName: '微信用户lkp4qslsfsds',
-  goodsList: [
-    {
-      id: 873,
-      orderId: 731,
-      goodsId: 77007479,
-      goodsName: '特权证',
-      goodsSn: '001',
-      productId: 4182,
-      number: 1,
-      marketPrice: 0.02,
-      retailPrice: 0.01,
-      goodsSpecifitionNameValue: null,
-      isReal: null,
-      goodsSpecifitionIds: null,
-      listPicUrl:
-        'https://4dkk.4dage.com/shop/huafa/20220107/11124928804fa0.jpg?x-oss-process=image/resize,m_fixed,w_400,h_400',
-    },
-    {
-      id: 8753,
-      orderId: 731,
-      goodsId: 77007479,
-      goodsName: '特权证',
-      goodsSn: '001',
-      productId: 4182,
-      number: 1,
-      marketPrice: 0.02,
-      retailPrice: 0.01,
-      goodsSpecifitionNameValue: null,
-      isReal: null,
-      goodsSpecifitionIds: null,
-      listPicUrl:
-        'https://4dkk.4dage.com/shop/huafa/20220107/11124928804fa0.jpg?x-oss-process=image/resize,m_fixed,w_400,h_400',
-    },
-  ],
-  brandName: '三江新村标清VR',
-  nickName: '【指房宝】天门科技13967143520',
-  brandId: 1046773,
-  newId: null,
-  logistics: { result: '快递单号错误' },
-};
+function renderOrderStatusLabel(type: number): string {
+  switch (type) {
+    case 0:
+      return '待付款';
+    case 101:
+      return '已取消';
+    case 201:
+      return '已付款';
+    case 1:
+      return '已发货';
+    case 2:
+      return '已收货';
+    case 501:
+      return '完成';
+    default:
+      return '';
+  }
+}
 
+function formatDayTime(val) {
+  if (val) {
+    const date = new Date(val);
+    const Y = date.getFullYear();
+    let M = date.getMonth() + 1;
+    let D = date.getDate();
+
+    if (M < 10) {
+      M = '0' + M;
+    }
+    if (D < 10) {
+      D = '0' + D;
+    }
+
+    return Y + '-' + M + '-' + D;
+  } else {
+    return '';
+  }
+}
 export const personData = {
   b1: '付小小',
   b2: '18100000000',
@@ -97,6 +58,9 @@ export const goodsSchema: DescItem[] = [
   {
     field: 'payStatus',
     label: '付款状态',
+    render: (curVal, _) => {
+      return `${renderOrderStatusLabel(curVal) || ''}`;
+    },
   },
   {
     field: 'nickName',
@@ -106,12 +70,19 @@ export const goodsSchema: DescItem[] = [
     field: 'payTime',
     label: '付款时间',
     render: (curVal, _) => {
-      return `${curVal}`;
+      return `${formatDayTime(curVal)}`;
     },
   },
   {
+    field: 'brandName',
+    label: '产品型号',
+  },
+  {
     field: 'addTime',
     label: '下单时间',
+    render: (curVal, _) => {
+      return `${formatDayTime(curVal)}`;
+    },
   },
   {
     field: 'goodsPrice',
@@ -137,6 +108,13 @@ export const refundSchema: DescItem[] = [
     label: '支付单号',
   },
   {
+    field: 'payTime',
+    label: '支付时间',
+    render: (curVal, _) => {
+      return `${formatDayTime(curVal)}`;
+    },
+  },
+  {
     field: 'consignee',
     label: '收货人',
   },
@@ -163,24 +141,19 @@ export const refundSchema: DescItem[] = [
 ];
 export const personSchema: DescItem[] = [
   {
-    field: 'b1',
+    field: 'userName',
     label: '用户姓名',
   },
   {
-    field: 'b2',
+    field: 'mobile',
     label: '联系电话',
   },
   {
-    field: 'b3',
-    label: '常用快递',
-  },
-  {
-    field: 'b4',
+    field: 'city',
     label: '取货地址',
-  },
-  {
-    field: 'b5',
-    label: '备注',
+    render: (curVal, _) => {
+      return `${curVal} ${_.address}`;
+    },
   },
 ];
 

src/views/dashboard/order/detail.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <PageWrapper :title="`订单号：${id}`" contentBackground>
+    <PageWrapper :title="`订单号：${ids}`" contentBackground>
       <Description
         size="middle"
         title="商品详情"
@@ -45,24 +45,24 @@
         title="用户信息"
         :bordered="false"
         :column="3"
-        :data="personData"
+        :data="refundData"
         :schema="personSchema"
       />
       <a-card title="物流进度" :bordered="false">
-        <a-steps :current="2" progress-dot size="small">
+        <a-steps :current="current" progress-dot size="small">
           <a-step title="创建订单">
             <template #description>
-              <p>2016-12-12 12:32</p>
+              <Time v-if="refundSchema.addTime" :value="refundSchema.addTime" mode="datetime" />
             </template>
           </a-step>
           <a-step title="已付款">
             <template #description>
-              <p>2016-12-13 12:32</p>
+              <Time v-if="refundSchema.payTime" :value="refundSchema.payTime" mode="datetime" />
             </template>
           </a-step>
           <a-step title="物流配送">
             <template #description>
-              <p>顺丰速送 </p>
+              <p>{{ refundSchema.shippingName }} </p>
             </template>
           </a-step>
           <a-step title="已配送" />
@@ -85,20 +85,23 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, onMounted, ref } from 'vue';
   import { PageWrapper } from '/@/components/Page';
   import { Description } from '/@/components/Description/index';
   import { useRoute, useRouter } from 'vue-router';
   import { useTabs } from '/@/hooks/web/useTabs';
   import { TableImg } from '/@/components/Table';
-  import { refundSchema, refundData, personData, goodsSchema, personSchema } from './data';
+  import { refundSchema, personData, goodsSchema, personSchema } from './data';
   import { Divider, Card, Row, Col, Steps } from 'ant-design-vue';
+  import { GetOrderInfoApi } from '/@/api/order/list';
+  import { Time } from '/@/components/Time';
 
   export default defineComponent({
     components: {
       PageWrapper,
       Description,
       TableImg,
+      Time,
       [Divider.name]: Divider,
       [Card.name]: Card,
       [Steps.name]: Steps,
@@ -107,14 +110,47 @@
       [Col.name]: Col,
     },
     setup() {
+      const refundData = ref({});
+      const current = ref(0);
       const route = useRoute();
       const { setTitle } = useTabs();
       const router = useRouter();
-      const id = route.params.id;
-      console.log('id', id);
-
-      setTitle(`No.${id} - 订单详情`);
-
+      const ids = route.params.id;
+      const id = Number(route.query.id);
+      const brandId = Number(route.query.brandId);
+      setTitle(`No.${route.params.id} - 订单详情`);
+      onMounted(async () => {
+        let res = await GetOrderInfoApi({
+          id,
+          brandId,
+        });
+        refundData.value = res;
+        let ordercurrent = 0;
+        switch (res.orderStatus) {
+          case 0:
+            ordercurrent = 0;
+            break;
+          case 101:
+            ordercurrent = 0;
+            break;
+          case 201:
+            ordercurrent = 1;
+            break;
+          case 1:
+            ordercurrent = 2;
+            break;
+          case 2:
+            ordercurrent = 3;
+            break;
+          case 501:
+            ordercurrent = 3;
+            break;
+          default:
+            ordercurrent = 1;
+            break;
+        }
+        current.value = ordercurrent;
+      });
       return {
         refundSchema,
         refundData,
@@ -122,7 +158,8 @@
         personSchema,
         goodsSchema,
         router,
-        id,
+        ids,
+        current,
       };
     },
   });

src/views/dashboard/order/list.vue

@@ -83,7 +83,9 @@ userName: "微信用户q0zj95zuo4pv" -->
               icon: 'mdi:information-outline',
               label: '详情',
               onClick: () => {
-                go(`/order/list/detail/${record.orderSn}`);
+                go(
+                  `/order/list/detail/${record.orderSn}?brandId=${record.brandId}&id=${record.id}`,
+                );
               },
             },
             {