Merge branch 'master' into jenkins

src/views/courseList/index.module.less

@@ -30,12 +30,13 @@
     }
     .title {
       text-align: center;
-      padding: 14px;
+      padding: 10px;
       color: #742c00;
-      font-size: 16px;
+      font-size: 15px;
     }
     .subtitle{
-      font-size: 12px;
+      font-size: 11px;
+      margin-top: 2px;
     }
     .num {
       position: absolute;

src/views/mine-orchestra/my-photo/index.module.less

@@ -1,5 +1,7 @@
 .phoneDetail {
+  height: calc(100vh - var(--header-height));
   overflow: hidden;
+  overflow-y: auto;
 }
 .photoWrap {
   display: flex;

src/views/mine-orchestra/my-photo/index.tsx

@@ -19,6 +19,8 @@ import { useRoute, useRouter } from 'vue-router'
 import styles from './index.module.less'
 import iconImage from '../images/icon-photo-default.png'
 import iconOrchestra from '../images/icon-or.png'
+import OSticky from '@/components/o-sticky'
+import OFullRefresh from '@/components/o-full-refresh'
 export default defineComponent({
   name: 'photo-detail',
   props: {
@@ -31,6 +33,7 @@ export default defineComponent({
     const route = useRoute()
     const router = useRouter()
     const data = reactive({
+      refreshing: false,
       loading: false,
       finished: false,
       pages: {
@@ -44,12 +47,17 @@ export default defineComponent({
     })
 
     const getList = async () => {
+      if (data.refreshing) {
+        data.pages.page = 1
+        data.finished = false
+        data.list = []
+      }
       data.loading = true
       try {
         const res = await request.post(`${state.platformApi}/orchestraPhotoAlbum/page`, {
           data: {
             ...data.pages,
-            orchestraId: data.school.id
+            schoolId: data.school.id
           },
           hideLoading: true
         })
@@ -64,6 +72,9 @@ export default defineComponent({
         data.finished = true
       }
       data.loading = false
+      setTimeout(() => {
+        data.refreshing = false
+      }, 500)
     }
 
     const getSchoolList = async () => {
@@ -109,84 +120,100 @@ export default defineComponent({
     })
 
     return () => (
-      <div class={[styles.phoneDetail]}>
-        <CellGroup inset class={styles.cellGroup}>
-          <Cell class={styles.select} center isLink onClick={() => (data.schoolStatus = true)}>
-            {{
-              icon: () => <img class={styles.icon} src={iconOrchestra} />,
-              title: () => <div class="van-ellipsis">{data.school.name}</div>
-            }}
-          </Cell>
-        </CellGroup>
-        {!data.loading && !!data.list.length && (
-          <List
-            // v-model:loading={data.loading}
-            finished={data.finished}
-            finishedText="没有更多数据"
-            onLoad={getList}
-            immediateCheck={false}
-          >
-            <div class={styles.photoWrap}>
-              {data.list.map((item: any, index: number) => (
-                <div
-                  class={styles.photoItem}
-                  onClick={() => {
-                    router.push({
-                      path: '/photo-list',
-                      query: {
-                        id: item.id
-                      }
-                    })
-                  }}
-                >
-                  <div
-                    class={styles.gridImg}
-                    style={
-                      item.coverUrl
-                        ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
-                        : ''
-                    }
-                  ></div>
+      <div>
+        <OSticky
+          onGetHeight={(height: number) => {
+            document.documentElement.style.setProperty('--header-height', height + 'px')
+          }}
+        >
+          <OHeader />
+          <CellGroup inset class={styles.cellGroup}>
+            <Cell class={styles.select} center isLink onClick={() => (data.schoolStatus = true)}>
+              {{
+                icon: () => <img class={styles.icon} src={iconOrchestra} />,
+                title: () => <div class="van-ellipsis">{data.school.name}</div>
+              }}
+            </Cell>
+          </CellGroup>
+        </OSticky>
+        <OFullRefresh v-model={data.refreshing} onRefresh={() => getList()}>
+          <div class={[styles.phoneDetail]}>
+            {!data.loading && !!data.list.length && (
+              <List
+                loading={data.loading}
+                finished={data.finished}
+                finishedText="没有更多数据"
+                onLoad={getList}
+                immediateCheck={false}
+              >
+                <div class={styles.photoWrap}>
+                  {data.list.map((item: any, index: number) => (
+                    <div
+                      class={styles.photoItem}
+                      onClick={() => {
+                        router.push({
+                          path: '/photo-list',
+                          query: {
+                            id: item.id
+                          }
+                        })
+                      }}
+                    >
+                      <div
+                        class={styles.gridImg}
+                        style={
+                          item.coverUrl
+                            ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
+                            : ''
+                        }
+                      ></div>
 
-                  <div class={styles.gridName}>{item.name}</div>
-                  <div class={styles.gridDes}>{item.photoCount}张</div>
+                      <div class={styles.gridName}>{item.name}</div>
+                      <div class={styles.gridDes}>{item.photoCount}张</div>
+                    </div>
+                  ))}
                 </div>
-              ))}
-            </div>
-          </List>
-        )}
-        {!data.loading && !data.list.length && (
-          <div
-            class="emptyRootContainer"
-            style={{
-              minHeight: 'calc(100vh - 1.22667rem)'
-            }}
-          >
-            <OEmpty btnStatus={false} tips="暂无相册" />
-          </div>
-        )}
+              </List>
+            )}
+            {!data.loading && !data.list.length && (
+              <div
+                class="emptyRootContainer"
+                style={{
+                  minHeight: '78%'
+                }}
+              >
+                <OEmpty btnStatus={false} tips="暂无相册" />
+              </div>
+            )}
 
-        <Popup v-model:show={data.schoolStatus} position="bottom" round class={'popupBottomSearch'}>
-          <Picker
-            columns={data.schoolList}
-            columnsFieldNames={{ text: 'name', value: 'id' }}
-            onCancel={() => (data.schoolStatus = false)}
-            onConfirm={({ selectedValues }: any) => {
-              const val = selectedValues[0] || ''
-              data.schoolStatus = false
-              if (val == data.school?.id) {
-                return
-              }
-              const active = data.schoolList.find((n: any) => n.id == val) || {}
-              data.school = active
+            <Popup
+              v-model:show={data.schoolStatus}
+              position="bottom"
+              round
+              class={'popupBottomSearch'}
+            >
+              <Picker
+                columns={data.schoolList}
+                columnsFieldNames={{ text: 'name', value: 'id' }}
+                onCancel={() => (data.schoolStatus = false)}
+                onConfirm={({ selectedValues }: any) => {
+                  const val = selectedValues[0] || ''
+                  data.schoolStatus = false
+                  if (val == data.school?.id) {
+                    return
+                  }
+                  const active = data.schoolList.find((n: any) => n.id == val) || {}
+                  data.school = active
 
-              data.pages.page = 1
-              data.list = []
-              data.finished = false
-              getList()
-            }}
-          />
-        </Popup>
+                  data.pages.page = 1
+                  data.list = []
+                  data.finished = false
+                  getList()
+                }}
+              />
+            </Popup>
+          </div>
+        </OFullRefresh>
       </div>
     )
   }

src/views/mine-orchestra/photo-list/detail.tsx

@@ -2,14 +2,28 @@ import OEmpty from '@/components/o-empty'
 import OHeader from '@/components/o-header'
 import request from '@/helpers/request'
 import { state } from '@/state'
-import { Grid, GridItem, Image, List, Loading, showImagePreview } from 'vant'
-import { defineComponent, onMounted, reactive, TransitionGroup } from 'vue'
+import {
+  Grid,
+  GridItem,
+  Image,
+  ImagePreview,
+  List,
+  Loading,
+  showFailToast,
+  showImagePreview,
+  showLoadingToast,
+  showSuccessToast
+} from 'vant'
+import { computed, defineComponent, onMounted, reactive, TransitionGroup } from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './index.module.less'
 import iconImage from '../images/icon-photo-default.png'
 import OSticky from '@/components/o-sticky'
 import OFullRefresh from '@/components/o-full-refresh'
 import OImage from '@/components/o-image'
+import iconDown from '../images/icon-down.png'
+import { promisefiyPostMessage } from '@/helpers/native-message'
+import html2canvas from 'html2canvas'
 export default defineComponent({
   name: 'photo-detail',
   props: {
@@ -29,7 +43,9 @@ export default defineComponent({
         page: 1,
         rows: 20
       },
-      list: [] as any[]
+      list: [] as any[],
+      startPosition: 0,
+      imgShow: false
     })
 
     const getList = async () => {
@@ -61,17 +77,51 @@ export default defineComponent({
       data.loading = false
     }
 
-    // 预览图片
-    const onShowImage = (index: number) => {
-      const files = data.list.map((file: any) => {
+    // 图片列表
+    const images = computed(() => {
+      return data.list.map((file: any) => {
         return file.fileUrl
       })
-
-      showImagePreview({
-        images: files,
-        startPosition: index,
-        closeable: true
-      })
+    })
+    // 预览图片
+    const onShowImage = (index: number) => {
+      data.startPosition = index
+      data.imgShow = true
+    }
+    const saveImg = async () => {
+      const container: HTMLElement = document.querySelector(
+        `[data-src='${images.value[data.startPosition]}'] img`
+      )!
+      if (container) {
+        const t = showLoadingToast({
+          message: '保存中',
+          duration: 0
+        })
+        html2canvas(container, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: null
+        })
+          .then(async (canvas) => {
+            const url = canvas.toDataURL('image/png')
+            const res = await promisefiyPostMessage({
+              api: 'savePicture',
+              content: {
+                base64: url
+              }
+            })
+            t.close()
+            if (res?.content?.status === 'success') {
+              showSuccessToast('保存成功')
+            } else {
+              showFailToast('保存失败')
+            }
+          })
+          .catch(() => {
+            showFailToast('保存失败')
+            t.close()
+          })
+      }
     }
 
     onMounted(() => {
@@ -95,17 +145,17 @@ export default defineComponent({
             getList()
           }}
         >
-          <List
-            loading={data.loading}
-            loadingText=" "
-            finished={data.finished}
-            finishedText=" "
-            onLoad={getList}
-            immediateCheck={false}
-          >
-            <div class={styles.phoneListDetail}>
-              <TransitionGroup name="van-fade">
-                <div>
+          <div class={styles.phoneListDetailWrap}>
+            <List
+              loading={data.loading}
+              loadingText=" "
+              finished={data.finished}
+              finishedText=" "
+              onLoad={getList}
+              immediateCheck={false}
+            >
+              <div class={styles.phoneListDetail}>
+                <TransitionGroup name="van-fade">
                   {data.list.map((item: any, index: number) => (
                     <div
                       key={`index-${index}`}
@@ -115,15 +165,30 @@ export default defineComponent({
                       <OImage class={styles.gridImg} src={item.fileUrl} />
                     </div>
                   ))}
-                </div>
 
-                {!data.loading && !data.list.length && (
-                  <OEmpty key="OEmpty1" btnStatus={false} tips="暂无照片" />
-                )}
-              </TransitionGroup>
-            </div>
-          </List>
+                  {!data.loading && !data.list.length && (
+                    <OEmpty key="OEmpty1" btnStatus={false} tips="暂无照片" />
+                  )}
+                </TransitionGroup>
+              </div>
+            </List>
+          </div>
         </OFullRefresh>
+        <ImagePreview
+          v-model:show={data.imgShow}
+          startPosition={data.startPosition}
+          images={images.value}
+          onChange={(index: number) => (data.startPosition = index)}
+        >
+          {{
+            image: ({ src }) => <Image data-src={src} fit="contain" src={src} />,
+            cover: () => (
+              <div class={styles.downBtn} onClick={() => saveImg()}>
+                <img src={iconDown} />
+              </div>
+            )
+          }}
+        </ImagePreview>
       </div>
     )
   }

src/views/mine-orchestra/photo-list/index.module.less

@@ -41,19 +41,19 @@
     font-size: 12px;
   }
 }
-
+.phoneListDetailWrap {
+  min-height: calc(100vh - var(--header-height));
+}
 .phoneListDetail {
   position: relative;
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
-  min-height: calc(100vh - var(--header-height));
   .gridItem {
     padding: 1.5px;
-    width: calc(100vw / 3);
+    width: calc(100% / 3);
     height: calc(100vw / 3);
     box-sizing: border-box;
-    display: inline-block;
     .gridImg {
       width: 100%;
       height: 100%;
@@ -70,3 +70,22 @@
     }
   }
 }
+.downBtn {
+  position: fixed;
+  right: 20px;
+  bottom: 40px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 1);
+  padding: 8px;
+  box-shadow: 0 2px 8px 0px rgba(0, 0, 0, .2);
+  &:active{
+    opacity: .8;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+}