更新

src/views/creation/index-share.tsx

@@ -35,6 +35,7 @@ import { ACCESS_TOKEN } from '@/store/mutation-types';
 import MWxTip from '@/components/m-wx-tip';
 import { usePageVisibility } from '@vant/use';
 import videoBg from './images/video-bg.png';
+import LoginChangeModel from './login-change-model';
 
 export default defineComponent({
   name: 'creation-detail',
@@ -47,6 +48,7 @@ export default defineComponent({
       id: route.query.id,
       loginTag: false, // 是否登录标识
       loginStatus: false,
+      loginChangeState: false, // 切换账号
       playType: '' as 'Audio' | 'Video' | '', // 播放类型
       musicDetail: {} as any,
       timer: null as any,
@@ -479,6 +481,22 @@ export default defineComponent({
           />
         </Popup>
 
+        <Popup
+          v-model:show={state.loginChangeState}
+          style={{ background: 'transparent', overflow: 'inherit' }}>
+          {/* <LoginModel
+            isRegister
+            onClose={() => (state.loginChangeState = false)}
+            onConfirm={async (val: boolean) => {
+              state.loginTag = val;
+              state.loginChangeState = false;
+              const { data } = await api_openUserMusicDetail(state.id);
+              state.musicDetail = data;
+            }}
+          /> */}
+          <LoginChangeModel onClose={() => (state.loginChangeState = false)} />
+        </Popup>
+
         <MWxTip
           v-model:show={state.messageStatus}
           message={state.message}

src/views/creation/login-change-model/index.module.less

@@ -0,0 +1,107 @@
+.loginChangeModel {
+  position: relative;
+  width: 306px;
+  background-color: #fff;
+  background: linear-gradient(180deg, #C0EEFF 0%, #FFFFFF 13%, #FFFFFF 100%);
+  border-radius: 20px;
+  border: 1px solid #979797;
+
+  .iconClose {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    display: inline-block;
+    background: url('./images/message-close.png') no-repeat top center;
+    background-size: cover;
+    width: 18px;
+    height: 18px;
+  }
+
+  .popupTitle {
+    position: relative;
+    padding-top: 20px;
+    padding-left: 22px;
+    font-weight: 500;
+    font-size: 20px;
+    color: #000000;
+    line-height: 28px;
+
+    span {
+      z-index: 1;
+      position: relative;
+    }
+
+    &::after {
+      position: absolute;
+      left: 22px;
+      bottom: 0;
+      display: inline-block;
+      content: '';
+      width: 80px;
+      height: 8px;
+      background: url('./images/icon-b-line.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+}
+
+.selectStudent {
+  padding: 16px 20px 0;
+  max-height: 400px;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  .cell {
+    display: flex;
+    align-items: center;
+    padding: 12px 10px;
+    border-radius: 10px;
+    margin-bottom: 16px;
+  }
+
+  .cellSelected {
+    background: #EDF6FD;
+  }
+
+  .iconImage {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+  }
+
+  .userInfo {
+    display: flex;
+    align-items: center;
+    flex: 1;
+
+    .userImg {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin: 0 10px;
+      flex-shrink: 0;
+    }
+  }
+
+  .usernames {
+    .name {
+      font-weight: 600;
+      font-size: 16px;
+      color: #131415;
+      line-height: 22px;
+    }
+
+    .schoolname {
+      padding-top: 4px;
+      font-weight: 400;
+      font-size: 13px;
+      color: #777777;
+      line-height: 18px;
+      max-width: 230px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}

src/views/creation/login-change-model/index.tsx

@@ -0,0 +1,83 @@
+import { defineComponent, ref } from 'vue';
+import styles from './index.module.less';
+import { Radio, RadioGroup, Image } from 'vant';
+import checkBoxActive from './images/icon-n-1.png';
+import checkBoxDefault from './images/icon-n-2.png';
+
+export default defineComponent({
+  name: 'login-change-model',
+  emits: ['close'],
+  setup() {
+    const radioChecked = ref();
+    const list = ref([
+      {
+        avatar: 'https://oss.dayaedu.com/gyt/ktyq/student_default_avatar.png',
+        nickname: '小王',
+        subjectName: '陶笛',
+        grade: '五年4班',
+
+        schoolName: '学校名称'
+      },
+      {
+        avatar: 'https://oss.dayaedu.com/gyt/ktyq/student_default_avatar.png',
+        nickname: '小王',
+        subjectName: '陶笛',
+        grade: '五年4班',
+
+        schoolName: '学校名称'
+      },
+      {
+        avatar: 'https://oss.dayaedu.com/gyt/ktyq/student_default_avatar.png',
+        nickname: '小王',
+        subjectName: '陶笛',
+        grade: '五年4班',
+
+        schoolName: '学校名称'
+      }
+    ]);
+    return () => (
+      <div class={styles.loginChangeModel}>
+        <i class={styles.iconClose}></i>
+        <div class={styles.popupTitle}>
+          <span>选择学生</span>
+        </div>
+        <RadioGroup class={styles.selectStudent} v-model={radioChecked.value}>
+          {list.value.map((item: any) => (
+            <div
+              class={[
+                styles.cell,
+                radioChecked.value === item.userId && styles.cellSelected
+              ]}
+              onClick={() => {
+                radioChecked.value = item.userId;
+                // emit('confirm', item);
+                // emit('close');
+              }}>
+              <Radio name={item.userId}>
+                {{
+                  icon: (props: any) => (
+                    <Image
+                      class={styles.iconImage}
+                      src={props.checked ? checkBoxActive : checkBoxDefault}
+                    />
+                  )
+                }}
+              </Radio>
+
+              <div class={styles.userInfo}>
+                <Image src={item.avatar} class={styles.userImg} fit="cover" />
+
+                <div class={styles.usernames}>
+                  <div class={styles.name}>{item.nickname}</div>
+                  {item.schoolName && (
+                    <div class={styles.schoolname}>{item.schoolName}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </RadioGroup>
+      </div>
+    );
+  }
+});