feat: so confirm page.

src/pages/so-confirm/index.vue

@@ -0,0 +1,365 @@
+<template>
+  <div class="w-[100vw] bg-slate-100 page-so-confirm">
+    <div
+      v-loading="loading"
+      class="mx-auto w-[100%] max-w-[1600px] shadow-sm bg-white shadow-slate-200 min-h-[100vh] pt-2"
+    >
+      <div class="flex justify-center relative h-[60px] mb-5">
+        <div
+          class="logo-area absolute left-[50%-132px] top-0 h-[60px] w-[250px] min-w-[60px]"
+        >
+          <a href="https://promocollection.com.au">
+            <img
+              class="h-[60px] w-[223px]"
+              :src="getImgPath('/assets/logo@2x.png')"
+              alt="logo"
+            />
+          </a>
+          <span>&nbsp;</span>
+        </div>
+      </div>
+      <div
+        class="flex relative"
+        v-if="orderStatus === 200"
+      >
+        <div
+          class="flex-auto pt-[80px] text-center mx-4 welcom-area border rounded-xl border-gray-300 border-solid"
+        >
+          <div class="text-[52px] font-bold text-cyan-700">
+            Thanks For Your Confirmation&nbsp;!
+          </div>
+          <div class="text-lg text-cyan-400">
+            Looking for more products in
+            <a
+              href="https://promocollection.com.au"
+              class="text-cyan-400 no-underline"
+            >
+              PromoCollection
+            </a>
+          </div>
+        </div>
+        <div class="flex flex-col w-[600px] pr-2">
+          <el-checkbox-group v-model="checkList">
+            <div class="flex flex-col">
+              <el-checkbox
+                :checked="confirmedData.length > 0"
+                :disabled="confirmedData.length > 0"
+                v-for="item in computedList"
+                :key="item.id"
+                :value="item.id"
+              >
+                <template #default>
+                  <div class="flex items-center h-[32px]">
+                    <!-- <div
+                  class="text-gray-500"
+                  v-if="item.icon"
+                >
+                  <el-icon
+                    :size="18"
+                    style="margin-right: 4px"
+                  >
+                    <Calendar v-show="item.icon === 'Calendar'"></Calendar>
+                  </el-icon>
+                </div> -->
+                    <div
+                      class=""
+                      v-if="item.image"
+                    >
+                      <img
+                        style="width: auto; margin-right: 4px"
+                        :style="{ height: item.id === 8 ? '32px' : '28px' }"
+                        :src="item.image"
+                        alt="option icon"
+                      />
+                    </div>
+                    <span class="text-[16px] leading-[32px]">
+                      {{ item.label }}
+                    </span>
+                    <el-input
+                      :disabled="confirmedData.length > 0"
+                      v-if="typeof item.input !== 'undefined'"
+                      style="width: 65px; margin: 0 4px"
+                      v-model="item.input"
+                    ></el-input>
+                    <span
+                      v-if="item.label2"
+                      class="text-[16px] leading-[32px]"
+                    >
+                      {{ item.label2 }}
+                    </span>
+                  </div>
+                </template>
+              </el-checkbox>
+            </div>
+          </el-checkbox-group>
+
+          <div class="">
+            <br />
+            <br />
+            <div
+              v-if="confirmedData.length <= 0"
+              class="bg-[#0B6DC9] cursor-pointer w-[130px] h-[40px] rounded-lg text-white text-center leading-[40px]"
+              :class="{
+                'cursor-not-allowed': loading || confirmedData.length > 0,
+              }"
+              @click="confirmOrder"
+            >
+              Submit Request
+            </div>
+            <div
+              class="text-gray-500"
+              v-if="confirmedData.length > 0"
+            >
+              You've submitted your request, if there is any update, please
+              contact our production coordinator.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="text-center"
+        v-if="[4001, 4002].includes(orderStatus)"
+      >
+        <div class="text-lg mb-4">
+          Order Page is invalid, please consult us for more details
+        </div>
+        <div class="text-normal text-cyan-700">
+          Back to website in 3 seconds
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { defineComponent, ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  ElMessage,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElInput,
+  ElButton,
+} from 'element-plus'
+// import { Calendar } from '@element-plus/icons-vue'
+import request from '@/utils/axios'
+import cloneDeep from 'lodash.clonedeep'
+document.title = 'PromoCollection'
+defineComponent({
+  name: 'ComponentSOConfirm',
+})
+let loading = ref(false)
+const getImgPath = function (path: string) {
+  return new URL(path, import.meta.url).href
+}
+const route = useRoute()
+const list = ref([
+  {
+    key: 'ConfirmationPage_NeedPhoto',
+    id: 0,
+    label: 'Need Production Photo Before Dispatch',
+  },
+  {
+    key: 'ConfirmationPage_NeedFlyers',
+    id: 1,
+    label: 'Need Flyers in package',
+  },
+  {
+    id: 2,
+    key: 'ConfirmationPage_NeedPPS',
+    label: 'PPS Sample Needed',
+  },
+  {
+    id: 3,
+    key: 'ConfirmationPage_NeedQC',
+    label: 'QC Report needed',
+  },
+  {
+    id: 4,
+    key: 'ConfirmationPage_NeedLabel',
+    label: 'Sepcial Label Request',
+  },
+  // {
+
+  //   icon: 'Calendar',
+  //   label: 'Specific Delivery Time',
+  // },
+  {
+    id: 5,
+    key: 'ConfirmationPage_LoyaltyProgramRedeem',
+    image: '/assets/so/icon1.png',
+    label: '(',
+    label2: 'Pts Available)',
+  },
+  {
+    id: 6,
+    key: 'ConfirmationPage_NoOPP',
+    image: '/assets/so/icon2.png',
+    label: 'No OPP Bags',
+  },
+  {
+    id: 7,
+    key: 'ConfirmationPage_NeedCarbonFootPrint',
+    image: '/assets/so/icon2.png',
+    label: 'Carbon FootPrint Report Needed',
+  },
+  {
+    id: 8,
+    key: 'ConfirmationPage_NotHeavyThanX',
+    image: '/assets/label/heavy.png',
+    label: 'Not Heavy than ',
+    input: '15',
+    label2: ' per each package',
+  },
+] as any[])
+
+let checkList = ref([] as any[])
+const orderStatus = ref(0)
+const soDetail = ref({}) as any
+let confirmedData = ref([] as any[])
+
+const getOrderStatus = () => {
+  loading.value = true
+  request({
+    url: '/ConfirmOrders/getToken',
+    method: 'GET',
+    params: {
+      id: route.query.id,
+      // pc_psw: decodeURIComponent(route.query.pc_psw as string),
+      pc_psw: route.query.pc_psw as string,
+    },
+    data: {
+      id: route.query.id,
+      // pc_psw: decodeURIComponent(route.query.pc_psw as string),
+      pc_psw: route.query.pc_psw as string,
+    },
+  })
+    .then((res) => {
+      const data = res.data
+      if (data.code !== 1) {
+        // 数据异常
+        return ElMessage.error(data.msg)
+      }
+      orderStatus.value = data.result?.code || 0
+      switch (data.result.code) {
+        case 200:
+          // 成功
+          soDetail.value = data.result.data.data[0]
+          list.value[5].label = '('
+          if (soDetail.value.Loyalty_Point_Balance) {
+            // 把这个数字转为字符串, 每3位加英文都好隔开
+            list.value[5].label +=
+              soDetail.value.Loyalty_Point_Balance.toString().replace(
+                /\B(?=(\d{3})+(?!\d))/g,
+                ',',
+              )
+          } else {
+            list.value[5].label += '0'
+          }
+
+          break
+        case 4001:
+        // 过期 fallthrough
+        case 4002:
+          // 失败
+          // todo 3 seconds to go back. but give 4 seconds to user to read the message
+          setTimeout(() => {
+            // window.location.href = 'https://promocollection.com.au'
+          }, 4000)
+          break
+      }
+      console.log(data, 'data')
+
+      if (
+        typeof data.result.so_Confirm === 'string' &&
+        data.result.so_Confirm.length
+      ) {
+        let input = ''
+        const temp = data.result.so_Confirm
+          .split(',')
+          .filter((i: string) => i !== '')
+          .map((item: string) => {
+            if (item.indexOf('ConfirmationPage_NotHeavyThanX') !== -1) {
+              input = item
+                .split('ConfirmationPage_NotHeavyThanX')[1]
+                .replace(/[\(\)]/g, '')
+              return 'ConfirmationPage_NotHeavyThanX'
+            }
+            return item
+          })
+
+        confirmedData.value = cloneDeep(list.value)
+          .filter((i) => temp.includes(i.key))
+          .map((item) => {
+            if (item.key === 'ConfirmationPage_NotHeavyThanX') {
+              item.input = input
+            }
+            return item
+          })
+        // confirmedData.value = [] // just for test
+      } else {
+        confirmedData.value = []
+      }
+    })
+    .catch((err) => {
+      ElMessage.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+getOrderStatus()
+
+let computedList = computed(() => {
+  return confirmedData.value.length ? confirmedData.value : list.value
+})
+const confirmOrder = () => {
+  if (loading.value === true || confirmedData.value.length > 0) return
+
+  loading.value = true
+  const data = checkList.value.map((item) => {
+    return {
+      Subject:
+        list.value[item].label +
+        (list.value[item].input || '') +
+        (list.value[item].label2 || ''),
+      Status: 'Open',
+      Priority: 'Normal',
+      Type_of_Task: 'Automation - Other CRM Reminder',
+      $se_module: 'Sales_Orders',
+      What_Id: { id: route.query.id },
+      Task_Source:
+        //  list.value[item].key,
+        list.value[item].key === 'ConfirmationPage_NotHeavyThanX'
+          ? `ConfirmationPage_NotHeavyThanX(${list.value[item].input})`
+          : list.value[item].key,
+    }
+  })
+
+  request({
+    url: 'ConfirmOrders/createOrdersTask',
+    method: 'POST',
+    data,
+  })
+    .then((res) => {
+      console.log(res)
+      const data = res.data
+      if (data.code !== 1) {
+        // 数据异常
+        return ElMessage.error(
+          data.result.code + data.result.message || data.msg,
+        )
+      } else {
+        ElMessage.success('Submit success')
+        getOrderStatus()
+      }
+    })
+    .catch((err) => {
+      ElMessage.error(err)
+    })
+}
+</script>
+<style lang="scss" scoped>
+.el-checkbox {
+  height: 32px;
+}
+</style>

src/route.ts

@@ -5,7 +5,7 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      redirect: '/purchaseOrder/create/0',
+      redirect: 'pageNotFound',
     },
     {
       name: 'purchaseOrder',
@@ -120,6 +120,11 @@ const router = createRouter({
       path: '/cargo-consolidation-request',
       component: () => import('@/pages/cargo-consolidation-request/index.vue'),
     },
+    {
+      name: 'soConfirm',
+      path: '/so-confirm',
+      component: () => import('@/pages/so-confirm/index.vue'),
+    },
     {
       path: '/:pathMatch(.*)*',
       name: 'pageNotFound',