修改显示

src/student/music-group/pre-goods-apply/index.tsx

@@ -110,6 +110,21 @@ export default defineComponent({
       instrumentsBrand: null
     })
 
+    const otherParams = reactive({
+      toolPlan: {
+        title: '', // 训练工具准备
+        groupTitle: '', // 团购标题
+        groupDesc: '', // 团购文案
+        selfTitle: '', // 自备标题
+        selfDesc: '' // 自备文案
+      },
+      leBao: {
+        // 乐器保障
+        show: 1, // 是否显示
+        selected: 1 // 是否选择
+      }
+    })
+
     // 获取乐团报名信息
     const studentRegister = async () => {
       try {
@@ -136,6 +151,17 @@ export default defineComponent({
         forms.instrumentsBrand = detail.instrumentsBrand
         forms.learningTools = detail.learningTools
 
+        const trainingToolsConfig = data.trainingToolsConfig
+          ? JSON.parse(data.trainingToolsConfig)
+          : {}
+        otherParams.toolPlan = trainingToolsConfig
+        const musicalInstrumentConfig = data.musicalInstrumentConfig
+          ? JSON.parse(data.musicalInstrumentConfig)
+          : {}
+        otherParams.leBao = musicalInstrumentConfig
+        // 默认根据设置显示
+        state.inspectStatus = musicalInstrumentConfig.selected ? true : false
+
         if (detail.registerSubjectId && detail.registerSubjectId !== 999) {
           // 更新商品信息
           await registerGoods()
@@ -662,9 +688,9 @@ export default defineComponent({
             <div class={[styles.title, styles.titleTool]}></div>
             <Field
               required
-              label="请选择训练工具的准备方式："
+              label={otherParams.toolPlan.title}
               labelAlign="top"
-              rules={[{ required: true, message: '请选择训练工具的准备方式' }]}
+              rules={[{ required: true, message: otherParams.toolPlan.title }]}
             >
               {{
                 input: () => (
@@ -689,8 +715,8 @@ export default defineComponent({
                           }
                         }}
                       ></Radio>
-                      统一团购
-                      <p class={styles.radioTip}>团购AI工具,乐器免费提供</p>
+                      {otherParams.toolPlan.groupTitle}
+                      <p class={styles.radioTip}>{otherParams.toolPlan.groupDesc}</p>
                     </Tag>
                     <Tag
                       size="large"
@@ -701,8 +727,9 @@ export default defineComponent({
                         forms.groupBuyType === 'SELF' ? styles.active : ''
                       ]}
                     >
-                      <Radio class={styles.radioItem} name={'SELF'}></Radio>单独准备
-                      <p class={styles.radioTip}>AI工具和乐器自行准备</p>
+                      <Radio class={styles.radioItem} name={'SELF'}></Radio>
+                      {otherParams.toolPlan.selfTitle}
+                      <p class={styles.radioTip}>{otherParams.toolPlan.selfDesc}</p>
                     </Tag>
                   </RadioGroup>
                 )
@@ -791,60 +818,65 @@ export default defineComponent({
                   }}
                 </Cell>
 
-                <Cell
-                  class={styles.inspectCell}
-                  style={{ backgroundColor: state.inspectStatus ? '#FFF3EA' : '#f4f4f4' }}
-                >
-                  {{
-                    icon: () => (
-                      <img
-                        src={iconBao}
-                        class={styles.iconBao}
-                        onClick={() => {
-                          if (state.instrumentsInspectionDescribe) state.inspectPopupStatus = true
-                        }}
-                      />
-                    ),
-                    value: () => (
-                      <div class={styles.baoContainer}>
-                        <div
-                          class={styles.baoTitle}
+                {otherParams.leBao.show ? (
+                  <Cell
+                    class={styles.inspectCell}
+                    style={{ backgroundColor: state.inspectStatus ? '#FFF3EA' : '#f4f4f4' }}
+                  >
+                    {{
+                      icon: () => (
+                        <img
+                          src={iconBao}
+                          class={styles.iconBao}
                           onClick={() => {
                             if (state.instrumentsInspectionDescribe) state.inspectPopupStatus = true
                           }}
-                        >
-                          下校检查乐器 1-2次/学期
-                        </div>
-                        <div class={styles.baoPrice}>
-                          <p
+                        />
+                      ),
+                      value: () => (
+                        <div class={styles.baoContainer}>
+                          <div
+                            class={styles.baoTitle}
                             onClick={() => {
-                              state.inspectStatus = !state.inspectStatus
-                              calcPrice()
+                              if (state.instrumentsInspectionDescribe)
+                                state.inspectPopupStatus = true
                             }}
                           >
-                            <span class={styles.prefix}>¥</span> {state.inspectInfo.currentPrice}
-                            <span class={styles.suffix}>/年</span>
-                          </p>
-                          <Checkbox
-                            v-model={state.inspectStatus}
-                            onClick={() => {
-                              calcPrice()
-                            }}
-                          >
-                            {{
-                              icon: (props: any) => (
-                                <img
-                                  class={styles.checkboxImg}
-                                  src={props.checked ? iconCheckboxActive : iconCheckbox}
-                                />
-                              )
-                            }}
-                          </Checkbox>
+                            下校检查乐器 1-2次/学期
+                          </div>
+                          <div class={styles.baoPrice}>
+                            <p
+                              onClick={() => {
+                                state.inspectStatus = !state.inspectStatus
+                                calcPrice()
+                              }}
+                            >
+                              <span class={styles.prefix}>¥</span> {state.inspectInfo.currentPrice}
+                              <span class={styles.suffix}>/年</span>
+                            </p>
+                            <Checkbox
+                              v-model={state.inspectStatus}
+                              onClick={() => {
+                                calcPrice()
+                              }}
+                            >
+                              {{
+                                icon: (props: any) => (
+                                  <img
+                                    class={styles.checkboxImg}
+                                    src={props.checked ? iconCheckboxActive : iconCheckbox}
+                                  />
+                                )
+                              }}
+                            </Checkbox>
+                          </div>
                         </div>
-                      </div>
-                    )
-                  }}
-                </Cell>
+                      )
+                    }}
+                  </Cell>
+                ) : (
+                  ''
+                )}
               </CellGroup>
               <OSticky position="bottom">
                 <div class={styles.paymentContainer}>

src/student/music-group/pre-goods-apply/preview-index.tsx

@@ -3,8 +3,28 @@ import styles from './index.module.less'
 import headTitle from './images/header-title.png'
 import headPhone from './images/header-phone.png'
 import headBg from './images/header-bg.png'
-import { Button, CellGroup, Field, Form, Radio, RadioGroup, Tag, showToast } from 'vant'
+import iconHead from './images/icon-head.png'
+import iconBao from './images/icon-bao.png'
+import iconFree from './images/icon-free.png'
+import icon12 from './images/icon-12.png'
+import iconCheckbox from './images/icon-checkbox-ring.png'
+import iconCheckboxActive from './images/icon-checkbox-active.png'
+import {
+  Button,
+  Cell,
+  CellGroup,
+  Field,
+  Form,
+  Radio,
+  RadioGroup,
+  Tag,
+  showToast,
+  Image,
+  Checkbox
+} from 'vant'
 import { useRoute, useRouter } from 'vue-router'
+import { moneyFormat } from '@/helpers/utils'
+import request from '@/helpers/request'
 
 // 乐团交付，乐团停止或关闭，有新的交付团；则不允许报名
 const classList: any = []
@@ -80,6 +100,21 @@ export default defineComponent({
       instrumentsBrand: null
     })
 
+    const otherParams = reactive({
+      toolPlan: {
+        title: '', // 训练工具准备
+        groupTitle: '', // 团购标题
+        groupDesc: '', // 团购文案
+        selfTitle: '', // 自备标题
+        selfDesc: '' // 自备文案
+      },
+      leBao: {
+        // 乐器保障
+        show: 1, // 是否显示
+        selected: 1 // 是否选择
+      }
+    })
+
     const validator = (val: any) => {
       // 校验函数返回 true 表示校验通过，false 表示不通过
       return state.nameReg.test(val) && val.length >= 2 && val.length <= 15
@@ -106,12 +141,83 @@ export default defineComponent({
     const orchestraName = ref(route.query.orchestraName || '') // 乐团名称
     const getMessage = (ev: any) => {
       if (ev.data.api === 'payment-notes') {
-        messageContent.value = ev.data.message || ''
+        const result = ev.data.data ? JSON.parse(ev.data.data) : {}
+        console.log(result, 'result')
+        messageContent.value = result.notice
+        otherParams.toolPlan = result.toolPlan
+        otherParams.leBao = result.leBao
         // document.body
       }
     }
 
-    onMounted(() => {
+    // 获取入选声部信息
+    const getSubjects = async () => {
+      try {
+        const subjects = await request.post(
+          '/api-student/open/orchestraSubjectConfig/pageByOrchestraId',
+          {
+            data: {
+              orchestraId: route.query.id,
+              page: 1,
+              rows: 100
+            }
+          }
+        )
+        const rows = subjects.data.rows || []
+        rows.forEach((item: any) => {
+          state.subjectList.push({
+            text: item.name,
+            value: item.subjectId
+          })
+        })
+
+        if (rows.length > 0) {
+          forms.registerSubjectId = rows[0].subjectId // detail.registerSubjectId
+          forms.registerSubjectTxt = rows[0].name
+
+          registerGoods()
+        }
+      } catch {
+        //
+      }
+    }
+
+    // 获取商品信息
+    const registerGoods = async () => {
+      try {
+        const { data } = await request.get(
+          '/api-student/orchestraRegister/registerGoods/' + route.query.id,
+          {
+            params: {
+              subjectId: forms.registerSubjectId
+            }
+          }
+        )
+
+        state.musicPaymentType = data.paymentServiceProvider || ''
+        // 初始化数据商品数据
+        const details = data.details || []
+        details.forEach((item: any) => {
+          if (item.goodsType === 'INSTRUMENTS') {
+            const img = item.goodsUrl ? item.goodsUrl.split(',')[0] : ''
+            state.goodsInfo = { ...item, goodsUrl: img }
+            state.instrumentsInspectionDescribe = item.instrumentsInspectionDescribe
+          } else if (item.goodsType === 'TEXTBOOK') {
+            const img = item.goodsUrl ? item.goodsUrl.split(',')[0] : ''
+            state.textBookInfo = { ...item, goodsUrl: img }
+          } else if (item.goodsType === 'INSTRUMENT_INSPECT') {
+            state.inspectInfo = { ...item }
+          } else if (item.goodsType === 'VIP_YEAR') {
+            state.vipYearInfo = { ...item }
+          }
+          state.details = details
+        })
+      } catch {
+        //
+      }
+    }
+    onMounted(async () => {
+      await getSubjects()
       nextTick(() => {
         // 是否加载完成
         window.parent &&
@@ -159,7 +265,7 @@ export default defineComponent({
           ref="form"
           class={styles.form}
         >
-          <CellGroup class={styles.applyCellGroup} border={false} style={{ display: 'none' }}>
+          <CellGroup class={styles.applyCellGroup} border={false}>
             <div class={[styles.title, styles.titleApply]}></div>
             <Field
               required
@@ -293,7 +399,7 @@ export default defineComponent({
             <div class={[styles.title, styles.titleTool]}></div>
             <Field
               required
-              label="请选择训练工具的准备方式："
+              label={otherParams.toolPlan.title}
               labelAlign="top"
               rules={[{ required: true, message: '请选择训练工具的准备方式' }]}
             >
@@ -320,8 +426,8 @@ export default defineComponent({
                           // }
                         }}
                       ></Radio>
-                      统一团购
-                      <p class={styles.radioTip}>团购AI工具,乐器免费提供</p>
+                      {otherParams.toolPlan.groupTitle}
+                      <p class={styles.radioTip}>{otherParams.toolPlan.groupDesc}</p>
                     </Tag>
                     <Tag
                       size="large"
@@ -332,14 +438,128 @@ export default defineComponent({
                         forms.groupBuyType === 'SELF' ? styles.active : ''
                       ]}
                     >
-                      <Radio class={styles.radioItem} name={'SELF'} disabled></Radio>自行准备
-                      <p class={styles.radioTip}>AI工具和乐器自行准备</p>
+                      <Radio class={styles.radioItem} name={'SELF'} disabled></Radio>
+                      {otherParams.toolPlan.selfTitle}
+                      <p class={styles.radioTip}>{otherParams.toolPlan.selfDesc}</p>
                     </Tag>
                   </RadioGroup>
                 )
               }}
             </Field>
           </CellGroup>
+
+          <CellGroup class={[styles.applyCellGroup, styles.groupBuy]} border={false}>
+            <div class={[styles.title, styles.titleIntrumentTool]}></div>
+            <Cell border={false}>
+              {{
+                icon: () => <Image src={state.vipYearInfo.goodsUrl} class={styles.goodsImg} />,
+                value: () => (
+                  <div class={styles.vipYearInfo}>
+                    <div class={styles.goodsTitle}>
+                      {state.vipYearInfo.goodsName} <img src={icon12} />
+                    </div>
+                    <p class={styles.goodsTips}>乐团首次训练之日起生效</p>
+                    <p class={[styles.goodsMemo, 'van-multi-ellipsis--l2']}>
+                      {state.vipYearInfo.description}
+                    </p>
+                    <div class={styles.goodsPrice}>
+                      <div class={styles.priceGroup}>
+                        团购价:
+                        <p>
+                          <span>¥</span> {moneyFormat(state.vipYearInfo.currentPrice)}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )
+              }}
+            </Cell>
+            <Cell border={false}>
+              {{
+                icon: () => <Image src={state.goodsInfo.goodsUrl} class={styles.goodsImg} />,
+                value: () => (
+                  <div class={styles.goodsInfo}>
+                    <div class={styles.goodsTitle}>
+                      {state.goodsInfo.goodsName}
+                      {state.goodsInfo.currentPrice <= 0 ? <img src={iconFree} /> : ''}
+                    </div>
+                    <p class={[styles.goodsMemo, 'van-multi-ellipsis--l2']}>
+                      {state.goodsInfo.description}
+                    </p>
+                    <div class={styles.goodsPrice}>
+                      <div class={styles.priceGroup}>
+                        团购价:
+                        <p>
+                          <del>
+                            <span>¥</span> {moneyFormat(state.goodsInfo.groupPrice)}
+                          </del>
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )
+              }}
+            </Cell>
+
+            {otherParams.leBao.show ? (
+              <Cell
+                class={styles.inspectCell}
+                style={{ backgroundColor: state.inspectStatus ? '#FFF3EA' : '#f4f4f4' }}
+              >
+                {{
+                  icon: () => (
+                    <img
+                      src={iconBao}
+                      class={styles.iconBao}
+                      onClick={() => {
+                        if (state.instrumentsInspectionDescribe) state.inspectPopupStatus = true
+                      }}
+                    />
+                  ),
+                  value: () => (
+                    <div class={styles.baoContainer}>
+                      <div
+                        class={styles.baoTitle}
+                        onClick={() => {
+                          if (state.instrumentsInspectionDescribe) state.inspectPopupStatus = true
+                        }}
+                      >
+                        下校检查乐器 1-2次/学期
+                      </div>
+                      <div class={styles.baoPrice}>
+                        <p
+                        // onClick={() => {
+                        //   state.inspectStatus = !state.inspectStatus
+                        //   calcPrice()
+                        // }}
+                        >
+                          <span class={styles.prefix}>¥</span> {state.inspectInfo.currentPrice}
+                          <span class={styles.suffix}>/年</span>
+                        </p>
+                        <Checkbox
+                          v-model={otherParams.leBao.selected}
+                          // onClick={() => {
+                          //   calcPrice()
+                          // }}
+                        >
+                          {{
+                            icon: (props: any) => (
+                              <img
+                                class={styles.checkboxImg}
+                                src={props.checked ? iconCheckboxActive : iconCheckbox}
+                              />
+                            )
+                          }}
+                        </Checkbox>
+                      </div>
+                    </div>
+                  )
+                }}
+              </Cell>
+            ) : (
+              ''
+            )}
+          </CellGroup>
         </Form>
       </div>
     )