crm12.6

src/api/ssbg/api.js

@@ -22,4 +22,11 @@ export const researchEvents = params => {
  */
 export const myEvents = params => {
 	return get('/roadshow/my/calendar/detail', params)
+}
+
+/**
+ * 获取系统中所有用户
+ */
+export const apiSystemUsers=()=>{
+	return get('/system/role/seller/list',{})
 }

src/views/ssbg/businessTrip/calendar.vue

@@ -1,7 +1,56 @@
 <script setup>
-import { Sticky,Popup } from 'vant';
+import {ref} from 'vue'
+import { Sticky,Popup,Cascader } from 'vant';
 import swiperCalendar from '../components/swiperCalendar.vue';
+import {apiSystemUsers} from '@/api/ssbg/api'
+import moment from 'moment';
+import 'moment/dist/locale/zh-cn';
+import { useRoute } from 'vue-router';
+moment.locale('zh-cn');
 
+const route=useRoute()
+localStorage.setItem('ssbg-token',route.query.token);
+
+const IsBusinessTrip=ref(route.query.IsBusinessTrip||false)//是否为审批人
+
+const swiperCalendarRef=ref(null)
+
+// 选择用户
+const userFieldNames=ref({
+    text: 'RealName',
+    value: 'AdminId',
+    children: 'ChildrenList',
+})
+let selectUserShow=ref(false)
+let selectUserValue=ref('')
+let userOpts=ref([])
+function onFinish(e){
+    console.log(e);
+    selectUserShow.value=false
+}
+
+// 获取系统中所有用户’
+function getSystemUsers(){
+    apiSystemUsers().then(res=>{
+        if(res.code==200){
+            userOpts.value=res.data.List||[]
+        }
+    })
+}
+getSystemUsers()
+
+// 添加申请
+function goAddApply(){
+    wx.miniProgram.navigateTo({
+        url: `/pages-approve/businessTrip/add`,
+    });
+}
+
+// 切换到今天
+function goToDay(){
+    swiperCalendarRef.value.getRecentWeek(moment().format('YYYY-MM-DD'))
+    swiperCalendarRef.value.selectDateHandle(moment().format('YYYY-MM-DD'),1)
+}
 </script>
 
 <template>
@@ -11,11 +60,124 @@ import swiperCalendar from '../components/swiperCalendar.vue';
                 <swiperCalendar @dateChange="datechangeHandle" ref="swiperCalendarRef"/>
             </div>
         </Sticky>
+        <div class="top-date-box">2/23（周四）</div>
+        <div class="table-box">
+            <div class="item">
+                <div class="left">张三</div>
+                <div class="right">被及时（1缇娜）</div>
+            </div>
+            <div class="item">
+                <div class="left">张三</div>
+                <div class="right yellow-text">被及时（1缇娜）</div>
+            </div>
+        </div>
+        <div class="fix-bot-action">
+            <div class="action-box">
+                <div class="item" @click="goAddApply" v-if="!IsBusinessTrip">
+                    <img src="@/assets/ssbg/icon-add.png" alt="">
+                    <div>添加申请</div>
+                </div>
+                <div class="item" @click="goToDay">
+                    <img src="@/assets/ssbg/calendar_ico.png" alt="">
+                    <div>今天</div>
+                </div>
+                <div class="item" @click="selectUserShow=true">
+                    <img src="@/assets/ssbg/choose_ico.png" alt="">
+                    <div>选择用户</div>
+                </div>
+            </div>
+        </div>
     </div>
+    <!-- 选择用户弹窗 -->
+    <Popup 
+        v-model:show="selectUserShow" 
+        round 
+        position="bottom"
+    >
+        <Cascader
+            v-model="selectUserValue"
+            title="请选择用户"
+            :options="userOpts"
+            :field-names="userFieldNames"
+            active-color="#3385FF"
+            @close="selectUserShow = false"
+            @finish="onFinish"
+        />
+    </Popup>
 </template>
 
 <style lang="scss" scoped>
 .business-trip-page{
-    padding-top: 20px;
+    min-height: 100vh;
+    background-color: #f5f5f5;
+    .header{
+        padding-top: 20px;
+        padding-bottom: 20px;
+        background-color: #fff;
+    }
+    .top-date-box{
+        text-align: center;
+        border-top: 1px solid #f5f5f5;
+        font-size: 32px;
+        padding: 20px 0;
+        background-color: #fff;
+    }
+    .table-box{
+        background-color: #fff;
+        margin-top: 10px;
+        .item{
+            display: flex;
+            border-bottom: 1px solid #f5f5f5;
+            font-size: 32px;
+            .left{
+                flex: 1;
+                border-right: 1px solid #f5f5f5;
+                padding: 34px 20px;
+            }
+            .right{
+                flex: 2;
+                padding: 34px 20px;
+            }
+            .yellow-text{
+                color: #FF8A00;
+                position: relative;
+                &::after{
+                    content: '';
+                    display: block;
+                    width: 80px;
+                    height: 80px;
+                    background-image: url('@/assets/ssbg/icon-tag.png');
+                    background-size: cover;
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                }
+            }
+        }
+    }
+
+    .fix-bot-action{
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 99;
+        background-color: #fff;
+        box-shadow: 0px -3px 6px rgba(172, 172, 172, 0.16);
+        padding-top: 15px;
+        padding-bottom: calc(15px + constant(safe-area-inset-bottom));
+        padding-bottom: calc(15px + env(safe-area-inset-bottom));
+        .action-box{
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            color: #3385FF;
+            img{
+                width: 40px;
+                display: block;
+                margin: 0 auto;
+            }
+        }
+    }
 }
 </style>