添加资讯功能

src/components/o-dialog/index.tsx

@@ -47,6 +47,10 @@ export default defineComponent({
     dialogMarginTop: {
       type: String,
       default: '0px'
+    },
+    teleport: {
+      type: String,
+      default: ''
     }
   },
   emits: ['cancel', 'confirm', 'update:show'],
@@ -68,6 +72,7 @@ export default defineComponent({
         style={{
           marginTop: props.dialogMarginTop
         }}
+        teleport={props.teleport || null}
         v-model:show={state.show}
         allowHtml={props.allowHtml}
         message={props.message}

src/school/orchestra/compontent/photo-create.tsx

@@ -362,14 +362,16 @@ export default defineComponent({
                       }}
                     ></i>
 
-                    <div
-                      class={styles.img}
-                      style={
-                        item.coverUrl
-                          ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
-                          : ''
-                      }
-                    ></div>
+                    <div class={styles.imgSection}>
+                      <div
+                        class={styles.img}
+                        style={
+                          item.coverUrl
+                            ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
+                            : ''
+                        }
+                      ></div>
+                    </div>
 
                     <p class={[styles.name, 'van-ellipsis']}>{item.name}</p>
                     <p class={styles.num}>{item.photoCount}张</p>

src/school/orchestra/compontent/photo-detail.module.less

@@ -7,6 +7,7 @@
       font-size: 18px;
     }
   }
+
   .addPhone {
     margin: 13px;
     width: calc(100% - 26px);
@@ -19,9 +20,11 @@
   .phoneContainer {
     display: flex;
     flex-wrap: wrap;
+
     .item {
       position: relative;
       padding: 1.5px;
+
       .img {
         display: flex;
         align-items: center;
@@ -52,6 +55,7 @@
 
     --van-checkbox-border-color: transparent;
     position: relative;
+
     :global {
       .van-checkbox {
         position: absolute;
@@ -60,18 +64,22 @@
         z-index: 9;
         height: 25px;
       }
+
       .van-checkbox__icon--checked {
         .van-icon {
           border-color: #64a9ff;
         }
       }
     }
+
     .checkboxHide {
       opacity: 0;
     }
+
     .iconChecked {
       font-size: 18px;
       border: 1px solid transparent;
+
       :global {
         .van-icon__image {
           width: 100%;
@@ -103,6 +111,7 @@
 .photos {
   padding: 0 16px 16px;
 }
+
 .downBtn {
   position: fixed;
   right: 20px;
@@ -110,12 +119,14 @@
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 1);
+  background: rgba(255, 255, 255, 0.2);
   padding: 8px;
   box-shadow: 0 2px 8px 0px rgba(0, 0, 0, .2);
-  &:active{
+
+  &:active {
     opacity: .8;
   }
+
   img {
     width: 100%;
     height: 100%;

src/school/orchestra/compontent/photo.module.less

@@ -7,18 +7,21 @@
     border-radius: 10px;
     overflow: hidden;
     height: 45px;
+
     .icon {
       width: 17px;
       height: 17px;
       margin-right: 4px;
       flex-shrink: 0;
     }
+
     :global {
       .van-cell__title {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
       }
+
       .van-cell__right-icon {
         color: #333;
         transform: rotate(90deg);
@@ -27,10 +30,12 @@
     }
   }
 }
+
 .addPhotoTop {
   color: var(--van-primary-text);
   font-size: 14px;
 }
+
 .addPhone {
   margin-top: 12px;
   color: var(--van-primary-text);
@@ -38,21 +43,26 @@
   border-radius: 10px;
   font-size: 16px;
 }
+
 .btnGroup {
   display: flex;
   padding: 12px;
+
   .addPhone {
     margin: 0 8px;
   }
 }
+
 .phoneContainer {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   padding-bottom: 32px;
+
   .item {
     position: relative;
     padding-top: 12px;
+
     .more {
       display: inline-block;
       position: absolute;
@@ -64,7 +74,9 @@
       height: 24px;
       z-index: 9;
     }
+
     .img {
+      position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -77,7 +89,27 @@
       background-repeat: no-repeat;
       background-position: center;
       background-image: url('../images/icon-photo-default.png');
+      z-index: 10;
+
+
+    }
+
+    .imgSection {
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background: #CACED1;
+        z-index: -1;
+        transform: rotate(5deg);
+      }
     }
+
     .name {
       padding: 6px 0 4px;
       font-size: 16px;
@@ -85,6 +117,7 @@
       color: #333333;
       max-width: 168px;
     }
+
     .num {
       font-size: 12px;
       color: #777777;
@@ -110,6 +143,7 @@
   line-height: 25px;
   padding: 20px 0 20px 25px;
 }
+
 .phoneName {
   background: #f2f2f2;
   border-radius: 10px;
@@ -120,11 +154,13 @@
 .photos {
   padding: 0 16px 16px;
 }
+
 :global {
   .van-image-preview {
+
     .van-image-preview__close-icon,
     .van-image-preview__index {
       top: 50px;
     }
   }
-}
+}

src/school/orchestra/compontent/photo.tsx

@@ -266,14 +266,16 @@ export default defineComponent({
                     }}
                   ></i>
 
-                  <div
-                    class={styles.img}
-                    style={
-                      item.coverUrl
-                        ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
-                        : ''
-                    }
-                  ></div>
+                  <div class={styles.imgSection}>
+                    <div
+                      class={styles.img}
+                      style={
+                        item.coverUrl
+                          ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
+                          : ''
+                      }
+                    ></div>
+                  </div>
 
                   <p class={[styles.name, 'van-ellipsis']}>{item.name}</p>
                   <p class={styles.num}>{item.photoCount}张</p>

src/school/orchestra/modal/add-information.tsx

@@ -34,6 +34,7 @@ export default defineComponent({
       title: null,
       linkUrl: '',
       linkType: 'OUT',
+      status: true,
       summary: null
     })
     const onSubmit = async () => {
@@ -86,7 +87,6 @@ export default defineComponent({
         const { data } = await request.get(
           '/api-school/sysNewsInformation/detail/' + route.query.id
         )
-        console.log(data)
         forms.linkUrl = data.linkUrl
         forms.coverImage = data.coverImage
         forms.summary = data.summary

src/school/orchestra/orchestra-information-list.tsx

@@ -0,0 +1,256 @@
+import ODialog from '@/components/o-dialog'
+import OEmpty from '@/components/o-empty'
+import OFullRefresh from '@/components/o-full-refresh'
+import OHeader from '@/components/o-header'
+import OPopup from '@/components/o-popup'
+import OSticky from '@/components/o-sticky'
+import request from '@/helpers/request'
+import { router } from '@/router/routes-common'
+import dayjs from 'dayjs'
+import { ActionSheet, Button, Cell, Icon, Image, List, showConfirmDialog } from 'vant'
+import { defineComponent, onMounted, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import styles from './orchestra-information.module.less'
+
+export default defineComponent({
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    headHeight: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ['changeList'],
+  name: 'orchestra-information-list',
+  setup(props, { emit }) {
+    const route = useRoute()
+    const router = useRouter()
+    const state = reactive({
+      addStatus: false,
+      isLoading: false,
+      dialogStatus: false,
+      list: [] as any,
+      listState: {
+        dataShow: true, // 判断是否有数据
+        loading: false,
+        finished: false,
+        refreshing: false,
+        height: 0 // 页面头部高度，为了处理下拉刷新用的
+      },
+      params: {
+        type: 'HOT_CONSULTATION',
+        clientType: 'SCHOOL',
+        page: 1,
+        rows: 20
+      },
+      oPopover: false,
+      selectItem: {} as any,
+      selectType: 'add'
+    })
+
+    const getList = async () => {
+      try {
+        if (state.isLoading) return
+        state.isLoading = true
+        const res = await request.post('/api-school/sysNewsInformation/page', {
+          data: {
+            ...state.params,
+            status: props.type === '1' ? true : false,
+            orchestraPhotoAlbumId: route.query.photoId
+          }
+        })
+        state.listState.loading = false
+        state.listState.refreshing = false
+        const result = res.data || {}
+        // 处理重复请求数据
+        if (state.list.length > 0 && result.current === 1) {
+          return
+        }
+        const rows = result.rows || []
+        state.list = state.list.concat(rows)
+        state.listState.finished = result.current >= result.pages
+        state.params.page = result.current + 1
+        state.listState.dataShow = state.list.length > 0
+        state.isLoading = false
+      } catch {
+        state.listState.dataShow = false
+        state.listState.finished = true
+        state.listState.refreshing = false
+        state.isLoading = false
+      }
+      emit('changeList')
+    }
+
+    const onSearch = () => {
+      state.params.page = 1
+      state.list = []
+      state.listState.dataShow = true // 判断是否有数据
+      state.listState.loading = false
+      state.listState.finished = false
+      getList()
+    }
+
+    const onDetail = (item: any) => {
+      try {
+        if (item.linkUrl) {
+          window.location.href = item.linkUrl
+        } else {
+          router.push({
+            path: '/information-detail',
+            query: {
+              id: item.id
+            }
+          })
+        }
+      } catch {
+        //
+      }
+    }
+
+    const onUpdate = async () => {
+      // state.selectType = 'update'
+      // state.addStatus = true
+      router.push({
+        name: 'add-information',
+        query: {
+          id: state.selectItem.id
+        }
+      })
+    }
+
+    const onRemove = async () => {
+      showConfirmDialog({
+        message: '您确认删除该资讯吗？'
+      }).then(async () => {
+        try {
+          await request.post('/api-school/sysNewsInformation/remove', {
+            requestType: 'form',
+            data: {
+              id: state.selectItem.id
+            }
+          })
+          onSearch()
+        } catch {
+          //
+        }
+      })
+    }
+
+    onMounted(() => {
+      getList()
+    })
+    return () => (
+      <div class={[styles.information, !state.listState.dataShow && 'emptyRootContainer']}>
+        {state.listState.dataShow ? (
+          <OFullRefresh
+            v-model:modelValue={state.listState.refreshing}
+            onRefresh={onSearch}
+            style={{
+              minHeight: `calc(100vh - ${props.headHeight}px - var(--van-tabs-line-height) - 12px) `
+            }}
+          >
+            <div style="background: #f6f8f9; overflow: hidden;">
+              <Button
+                icon="plus"
+                block
+                class={styles.addPhoneBtn}
+                onClick={() => {
+                  router.push('/add-information')
+                }}
+              >
+                添加资讯
+              </Button>
+            </div>
+            <List
+              // v-model:loading={state.listState.loading}
+              finished={state.listState.finished}
+              finishedText=" "
+              onLoad={getList}
+              immediateCheck={false}
+              class={styles.informationGroup}
+            >
+              {state.list.map((item: any) => (
+                <div class={styles.cellGroup}>
+                  <Cell class={styles.cell} onClick={() => onDetail(item)} border={false}>
+                    {{
+                      icon: () => <Image src={item.coverImage} class={styles.img} fit="cover" />,
+                      title: () => (
+                        <div class={styles.cellItemContent}>
+                          <div class={[styles.title, 'van-multi-ellipsis--l2']}>{item.title}</div>
+                          {/* <div class={[styles.content, 'van-multi-ellipsis--l2']}>{item.summary}</div> */}
+                          <div
+                            style={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'space-between'
+                            }}
+                          >
+                            <div class={styles.time}>
+                              {item.createTime
+                                ? dayjs(item.createTime).format('YYYY年MM月DD日')
+                                : ''}
+                            </div>
+                            <Icon
+                              name="ellipsis"
+                              size={23}
+                              color="#777777"
+                              style={{ fontWeight: 'bold' }}
+                              onClick={(e: any) => {
+                                e.stopPropagation()
+                                state.selectItem = item
+                                state.oPopover = true
+                              }}
+                            />
+                          </div>
+                        </div>
+                      )
+                    }}
+                  </Cell>
+                  {!item.status && (
+                    <div class={styles.cellReason}>
+                      <span>下架原因：</span>
+                      {item.reason}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </List>
+          </OFullRefresh>
+        ) : (
+          <OEmpty btnStatus={false} tips="暂无资讯" />
+        )}
+
+        <ActionSheet
+          teleport={'body'}
+          cancelText="取消"
+          v-model:show={state.oPopover}
+          closeOnClickAction
+          actions={[
+            { name: '修改', callback: () => onUpdate() },
+            {
+              name: '删除',
+              color: '#F44541',
+              callback: () => {
+                state.dialogStatus = true
+              }
+            }
+          ]}
+        />
+
+        <ODialog
+          teleport={'body'}
+          v-model:show={state.dialogStatus}
+          title="删除资讯"
+          message="是否删除该资讯？确认后学员端、伴学端将同步删除"
+          messageAlign="left"
+          dialogMarginTop="env(safe-area-inset-top)"
+          showCancelButton
+          onConfirm={onRemove}
+        />
+      </div>
+    )
+  }
+})

src/school/orchestra/orchestra-information.module.less

@@ -1,10 +1,33 @@
 .information {
   overflow: hidden;
+
+  --van-tab-active-text-color: var(--van-primary-color);
+  --van-tab-text-color: #333;
+  --van-tab-font-size: 16px;
+
+  :global {
+    .van-tab__panel {
+      padding-top: 12px;
+    }
+  }
+
   .addPhone {
     color: var(--van-primary-text);
     font-size: 14px;
   }
 
+
+  .addPhoneBtn {
+    margin: 0 13px 13px;
+    width: calc(100% - 26px);
+    font-size: 16px;
+    font-weight: 500;
+    background: #FFF7F3;
+    border: 1px solid #F67146;
+    border-radius: 6px;
+    color: #F67146;
+  }
+
   .img {
     width: 142px;
     height: 80px;
@@ -22,6 +45,7 @@
     padding-bottom: 2px;
     max-width: 180px;
   }
+
   .content {
     font-size: 12px;
     color: #777777;
@@ -29,6 +53,7 @@
     word-break: break-all;
     word-wrap: break-word;
   }
+
   .time {
     padding-top: 5px;
     font-size: 12px;
@@ -39,4 +64,34 @@
   .informationGroup {
     margin-bottom: 32px;
   }
-}
+
+  .cellItemContent {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+
+  }
+
+  .cellGroup {
+    background: #fff;
+    overflow: hidden;
+    margin-bottom: 12px;
+  }
+
+  .cellReason {
+    margin: 0 13px 16px;
+    background: #FFF0F0;
+    border-radius: 6px;
+    padding: 12px;
+    color: #E91515;
+    font-size: 14px;
+    word-wrap: break-word;
+    word-break: break-all;
+    line-height: 20px;
+
+    span {
+      font-weight: 600;
+    }
+  }
+}

src/school/orchestra/orchestra-information.tsx

@@ -1,272 +1,75 @@
-import ODialog from '@/components/o-dialog'
-import OEmpty from '@/components/o-empty'
-import OFullRefresh from '@/components/o-full-refresh'
 import OHeader from '@/components/o-header'
-import OPopup from '@/components/o-popup'
 import OSticky from '@/components/o-sticky'
 import request from '@/helpers/request'
-import { router } from '@/router/routes-common'
-import dayjs from 'dayjs'
-import { ActionSheet, Button, Cell, Icon, Image, List, showConfirmDialog, showToast } from 'vant'
+import { Button, Tab, Tabs } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import AddInformation from './modal/add-information'
 import styles from './orchestra-information.module.less'
+import OrchestraInformationList from './orchestra-information-list'
 
 export default defineComponent({
   name: 'orchestra-information',
   setup() {
-    const route = useRoute()
-    const router = useRouter()
+    const tabName = sessionStorage.getItem('orchestra-information-tab')
     const state = reactive({
-      addStatus: false,
-      isLoading: false,
-      dialogStatus: false,
-      list: [] as any,
+      activeName: tabName || 'publish',
       listState: {
-        dataShow: true, // 判断是否有数据
-        loading: false,
-        finished: false,
-        refreshing: false,
         height: 0 // 页面头部高度，为了处理下拉刷新用的
       },
-      params: {
-        type: 'HOT_CONSULTATION',
-        clientType: 'SCHOOL',
-        page: 1,
-        rows: 20
-      },
-      oPopover: false,
-      selectItem: {} as any,
-      selectType: 'add'
+      offlineCount: 0,
+      publishedCount: 0
     })
-
-    const getList = async () => {
-      try {
-        if (state.isLoading) return
-        state.isLoading = true
-        const res = await request.post('/api-school/sysNewsInformation/page', {
-          data: {
-            ...state.params,
-            orchestraPhotoAlbumId: route.query.photoId
-          }
-        })
-        state.listState.loading = false
-        state.listState.refreshing = false
-        const result = res.data || {}
-        // 处理重复请求数据
-        if (state.list.length > 0 && result.current === 1) {
-          return
-        }
-        const rows = result.rows || []
-        state.list = state.list.concat(rows)
-        state.listState.finished = result.current >= result.pages
-        state.params.page = result.current + 1
-        state.listState.dataShow = state.list.length > 0
-        state.isLoading = false
-      } catch {
-        state.listState.dataShow = false
-        state.listState.finished = true
-        state.listState.refreshing = false
-        state.isLoading = false
-      }
-    }
-
-    const onSearch = () => {
-      state.params.page = 1
-      state.list = []
-      state.listState.dataShow = true // 判断是否有数据
-      state.listState.loading = false
-      state.listState.finished = false
-      getList()
-    }
-
-    const onDetail = (item: any) => {
+    const getStat = async () => {
       try {
-        console.log(item, 'item')
-        if (item.linkUrl) {
-          window.location.href = item.linkUrl
-        } else {
-          router.push({
-            path: '/information-detail',
-            query: {
-              id: item.id
-            }
-          })
-        }
+        const { data } = await request.get('/api-school/sysNewsInformation/stat')
+        state.publishedCount = data.publishedCount || 0
+        state.offlineCount = data.offlineCount || 0
       } catch {
         //
       }
     }
-
-    const onUpdate = async () => {
-      // state.selectType = 'update'
-      // state.addStatus = true
-      router.push({
-        name: 'add-information',
-        query: {
-          id: state.selectItem.id
-        }
-      })
-    }
-
-    const onRemove = async () => {
-      showConfirmDialog({
-        message: '您确认删除该资讯吗？'
-      }).then(async () => {
-        try {
-          await request.post('/api-school/sysNewsInformation/remove', {
-            requestType: 'form',
-            data: {
-              id: state.selectItem.id
-            }
-          })
-          // setTimeout(() => {
-          //   showToast('删除成功')
-          // }, 100)
-
-          // setTimeout(() => {
-          onSearch()
-          // }, 1100)
-        } catch {
-          //
-        }
-      })
-    }
-
-    onMounted(() => {
-      getList()
+    onMounted(async () => {
+      // getStat()
     })
     return () => (
-      <div class={[styles.information, !state.listState.dataShow && 'emptyRootContainer']}>
+      <div class={[styles.information]}>
         <OSticky
           position="top"
           onGetHeight={(height: any) => {
             state.listState.height = height
+            document.documentElement.style.setProperty('--header-height', height + 'px')
           }}
         >
-          <OHeader>
-            {{
-              right: () => (
-                <span
-                  class={styles.addPhone}
-                  onClick={() => {
-                    // state.selectType = 'add'
-                    // state.addStatus = true
-                    router.push('/add-information')
-                  }}
-                >
-                  添加资讯
-                </span>
-              )
-            }}
-          </OHeader>
-          {/* <div style="background: #f6f8f9; overflow: hidden;">
-            <Button
-              icon="plus"
-              block
-              class={styles.addPhone}
-              onClick={() => {
-                state.selectType = 'add'
-                state.addStatus = true
-              }}
-            >
-              添加资讯
-            </Button>
-          </div> */}
+          <OHeader border={false} />
         </OSticky>
 
-        {state.listState.dataShow ? (
-          <OFullRefresh
-            v-model:modelValue={state.listState.refreshing}
-            onRefresh={onSearch}
-            style={{
-              minHeight: `calc(100vh - ${state.listState.height}px)`
-            }}
-          >
-            <List
-              // v-model:loading={state.listState.loading}
-              finished={state.listState.finished}
-              finishedText=" "
-              onLoad={getList}
-              immediateCheck={false}
-              class={styles.informationGroup}
-            >
-              {state.list.map((item: any, index: number) => (
-                <Cell center class={styles.cell} onClick={() => onDetail(item)}>
-                  {{
-                    icon: () => <Image src={item.coverImage} class={styles.img} fit="cover" />,
-                    title: () => (
-                      <div>
-                        <div class={[styles.title, 'van-ellipsis']}>{item.title}</div>
-                        <div class={[styles.content, 'van-multi-ellipsis--l2']}>{item.summary}</div>
-                        <div
-                          style={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between'
-                          }}
-                        >
-                          <div class={styles.time}>
-                            {item.createTime ? dayjs(item.createTime).format('YYYY年MM月DD日') : ''}
-                          </div>
-                          <Icon
-                            name="ellipsis"
-                            size={23}
-                            color="#777777"
-                            style={{ fontWeight: 'bold' }}
-                            onClick={(e: any) => {
-                              e.stopPropagation()
-                              state.selectItem = item
-                              state.oPopover = true
-                            }}
-                          />
-                        </div>
-                      </div>
-                    )
-                  }}
-                </Cell>
-              ))}
-            </List>
-          </OFullRefresh>
-        ) : (
-          <OEmpty btnStatus={false} tips="暂无资讯" />
-        )}
-
-        {/* <OPopup v-model:modelValue={state.addStatus} style={{ background: '#f8f8f8' }} destroy>
-          <AddInformation
-            selectType={state.selectType}
-            selectItem={state.selectItem}
-            onClose={() => (state.addStatus = false)}
-            onGetList={onSearch}
-          />
-        </OPopup> */}
-
-        <ActionSheet
-          cancelText="取消"
-          v-model:show={state.oPopover}
-          closeOnClickAction
-          actions={[
-            { name: '修改', callback: () => onUpdate() },
-            {
-              name: '删除',
-              color: '#F44541',
-              callback: () => {
-                state.dialogStatus = true
-              }
-            }
-          ]}
-        />
-
-        <ODialog
-          v-model:show={state.dialogStatus}
-          title="删除资讯"
-          message="是否删除该资讯？确认后学员端、伴学端将同步删除"
-          messageAlign="left"
-          dialogMarginTop="env(safe-area-inset-top)"
-          showCancelButton
-          onConfirm={onRemove}
-        />
+        <Tabs
+          sticky
+          lineWidth={20}
+          lineHeight={4}
+          animated
+          v-model:active={state.activeName}
+          offsetTop={state.listState.height}
+          swipeable
+          onChange={(val: string) => {
+            sessionStorage.setItem('orchestra-information-tab', val)
+          }}
+        >
+          <Tab title={`已发布(${state.publishedCount})`} name="publish">
+            <OrchestraInformationList
+              headHeight={state.listState.height}
+              type="1"
+              onChangeList={getStat}
+            />
+          </Tab>
+          <Tab title={`已下架(${state.offlineCount})`} name="offline">
+            <OrchestraInformationList
+              headHeight={state.listState.height}
+              type="0"
+              onChangeList={getStat}
+            />
+          </Tab>
+        </Tabs>
       </div>
     )
   }

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

@@ -3,20 +3,24 @@
   overflow: hidden;
   overflow-y: auto;
 }
+
 .photoWrap {
   display: flex;
   flex-wrap: wrap;
   padding: 12px;
   box-sizing: border-box;
   justify-content: space-between;
+
   div {
     box-sizing: border-box;
   }
 }
+
 .photoItem {
   position: relative;
   width: 49%;
   margin-bottom: 12px;
+
   .gridImg {
     position: relative;
     display: flex;
@@ -32,6 +36,7 @@
     background-position: center;
     background-image: url('../images/icon-photo-default.png');
   }
+
   .iconNew {
     position: absolute;
     top: 6px;
@@ -42,10 +47,12 @@
     width: 44px;
     height: 17px;
   }
+
   .iconImage {
     display: flex;
     justify-content: center;
   }
+
   .gridName {
     font-size: 16px;
     font-weight: 500;
@@ -53,6 +60,7 @@
     line-height: 22px;
     padding: 8px 0 4px 0;
   }
+
   .gridDes {
     color: #777;
     line-height: 17px;
@@ -60,29 +68,49 @@
     font-size: 12px;
   }
 }
+
 .cellGroup {
   width: calc(100% - 26px);
   margin: 12px 13px 0;
 }
 
+.imgSection {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: #CACED1;
+    z-index: -1;
+    transform: rotate(5deg);
+  }
+}
+
 .select {
   height: 45px;
+
   .icon {
     width: 17px;
     height: 17px;
     margin-right: 4px;
     flex-shrink: 0;
   }
+
   :global {
     .van-cell__title {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+
     .van-cell__right-icon {
       color: #333;
       transform: rotate(90deg);
       margin: 0 0 0 4px;
     }
   }
-}
+}

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

@@ -182,15 +182,20 @@ export default defineComponent({
                         })
                       }}
                     >
-                      <div
-                        class={styles.gridImg}
-                        style={
-                          item.coverUrl
-                            ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
-                            : ''
-                        }
-                      >
-                        {item.newFlag ? <i class={styles.iconNew}></i> : ''}
+                      <div class={styles.imgSection}>
+                        <div
+                          class={styles.gridImg}
+                          style={
+                            item.coverUrl
+                              ? {
+                                  backgroundImage: `url(${item.coverUrl})`,
+                                  backgroundSize: 'cover'
+                                }
+                              : ''
+                          }
+                        >
+                          {item.newFlag ? <i class={styles.iconNew}></i> : ''}
+                        </div>
                       </div>
 
                       <div class={styles.gridName}>{item.name}</div>

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

@@ -4,10 +4,12 @@
   padding: 12px;
   box-sizing: border-box;
   justify-content: space-between;
+
   div {
     box-sizing: border-box;
   }
 }
+
 .gridImg {
   display: flex;
   justify-content: center;
@@ -22,6 +24,7 @@
   background-position: center;
   background-image: url('../images/icon-photo-default.png');
 }
+
 .photoItem {
   position: relative;
   width: 49%;
@@ -31,6 +34,7 @@
     display: flex;
     justify-content: center;
   }
+
   .gridName {
     font-size: 16px;
     font-weight: 500;
@@ -38,6 +42,7 @@
     line-height: 22px;
     padding: 8px 0 4px 0;
   }
+
   .gridDes {
     color: #777;
     line-height: 17px;
@@ -45,19 +50,23 @@
     font-size: 12px;
   }
 }
+
 .phoneListDetailWrap {
   min-height: calc(100vh - var(--header-height));
 }
+
 .phoneListDetail {
   position: relative;
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
+
   .gridItem {
     padding: 1.5px;
     width: calc(100% / 3);
     height: calc(100vw / 3);
     box-sizing: border-box;
+
     .gridImg {
       width: 100%;
       height: 100%;
@@ -66,14 +75,32 @@
   }
 }
 
+.imgSection {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: #CACED1;
+    z-index: -1;
+    transform: rotate(5deg);
+  }
+}
+
 :global {
   .van-image-preview {
+
     .van-image-preview__close-icon,
     .van-image-preview__index {
       top: 50px;
     }
   }
 }
+
 .downBtn {
   position: fixed;
   right: 20px;
@@ -81,15 +108,17 @@
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 1);
+  background: rgba(255, 255, 255, 0.2);
   padding: 8px;
   box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.2);
+
   &:active {
     opacity: 0.8;
   }
+
   img {
     width: 100%;
     height: 100%;
     display: block;
   }
-}
+}

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

@@ -100,14 +100,16 @@ export default defineComponent({
                       })
                     }}
                   >
-                    <div
-                      class={styles.gridImg}
-                      style={
-                        item.coverUrl
-                          ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
-                          : ''
-                      }
-                    ></div>
+                    <div class={styles.imgSection}>
+                      <div
+                        class={styles.gridImg}
+                        style={
+                          item.coverUrl
+                            ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
+                            : ''
+                        }
+                      ></div>
+                    </div>
 
                     <div class={styles.gridName}>{item.name || ''}</div>
                     <div class={styles.gridDes}>{item.photoCount || 0}张</div>

src/views/unit-test/model/play-question/index.module.less

@@ -34,6 +34,7 @@
 
   .playLabel {
     margin-top: 2px;
+    line-height: 1.8;
 
     span {
       background: #FFF3EB;

src/views/unit-test/model/play-question/index.tsx

@@ -72,10 +72,10 @@ export default defineComponent({
   },
   emits: ['update:value'],
   setup(props, { emit }) {
-    console.log(props, 'props')
     const state = reactive({
       list: [] as any,
-      score: 0
+      score: 0,
+      recordId: null // 评测记录编号
     })
 
     // const mediaUrls = computed(() => (props.data.mediaUrls ? props.data.mediaUrls.split(',') : ''))
@@ -119,6 +119,7 @@ export default defineComponent({
             if (state.score < tempScore) {
               state.score = tempResult.score || 0
             }
+            state.recordId = tempResult.recordId
 
             // 置空，存的缓存
             promisefiyPostMessage({
@@ -133,6 +134,7 @@ export default defineComponent({
             {
               answerId: '',
               answer: state.score,
+              recordId: state.recordId,
               answerExtra: ''
             }
           ])
@@ -159,12 +161,14 @@ export default defineComponent({
                   if (state.score < tempScore) {
                     state.score = result.score || 0
                   }
+                  state.recordId = result.recordId
                 }
 
                 emit('update:value', [
                   {
                     answerId: '',
                     answer: state.score,
+                    recordId: state.recordId,
                     answerExtra: ''
                   }
                 ])

vite.config.ts

@@ -13,7 +13,7 @@ function resolve(dir: string) {
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://online.lexiaoya.cn/'
 // const proxyUrl = 'https://test.lexiaoya.cn/'
-const proxyUrl = 'https://test.lexiaoya.cn/'
+const proxyUrl = 'https://dev.lexiaoya.cn/'
 // const proxyUrl = 'http://47.98.131.38:8989/'
 // const proxyUrl = 'http://192.168.3.20:8989/' // 邹旋
 // const proxyUrl = 'http://192.168.3.143:8989/' // 尚科