订阅管理逻辑完善

src/components/radio/Radio.vue

@@ -2,7 +2,10 @@
   <div
     :class="[
       'ptc-radio',
-      { 'ptc-radio--checked': checked, 'ptc-radio--disabled': disabled },
+      {
+        'ptc-radio--checked': checked,
+        'ptc-radio--disabled': !checked && disabled,
+      },
     ]"
     @click="onClick"
   >

src/pages/benefits/index.vue

@@ -10,14 +10,32 @@
         </div>
         <p class="l2">{{ info.phone_info }}</p>
         <p class="l3">{{ info.phone_imei }}</p>
-        <p class="l4">
-          <button class="ptc-button ptc-button--stroke">Renewal</button>
-        </p>
-        <p class="l5">
+        <p
+          v-if="
+            info.subscribe_type != 3 && info.status == 1 && info.cancel_sub != 1
+          "
+          class="l5"
+        >
           <router-link :to="`/renewal?id=${$route.params.id}`">
             Renewal management >
           </router-link>
         </p>
+        <p v-else class="l4">
+          <button
+            class="ptc-button ptc-button--stroke"
+            @click="
+              $router.push(
+                `/fill-order?id=${info.id}&renewal=${
+                  info.subscribe_type == 3 && info.status == 1
+                }`
+              )
+            "
+          >
+            {{
+              info.subscribe_type == 3 && info.status == 1 ? 'Renewal' : 'Rebuy'
+            }}
+          </button>
+        </p>
       </div>
     </div>
     <div class="ptc-block">
@@ -151,6 +169,7 @@ export default defineComponent({
     }
   }
   .l5 {
+    margin-top: 32px;
     line-height: 44px;
     font-weight: bold;
     font-size: 32px;

src/pages/fill-order/StepOne.vue

@@ -9,6 +9,7 @@
             :key="product.id"
             class="version"
             :value="product.id"
+            :disabled="!!state.form.renewal"
           >
             <i
               class="version-icon"

src/pages/fill-order/StepTwo.vue

@@ -28,6 +28,7 @@
             :key="brand.id"
             class="device-item"
             :value="brand.id"
+            :disabled="!!state.form.renewal"
           >
             <i
               :class="[
@@ -40,20 +41,17 @@
         </PtcRadioGroup>
       </div>
     </div>
-    <template v-if="state.modelList.length">
+    <div v-if="state.modelList.length" class="ptc-wrapper">
       <div class="ptc-block">
         <div class="ptc-inner">
           <p class="ptc-label">Choose phone model</p>
-          <PtcRadioGroup
-            v-model="state.form.phone_id"
-            class="device-list"
-            @change="onSelectModel"
-          >
+          <PtcRadioGroup v-model="state.form.phone_id" class="device-list">
             <PtcRadio
               v-for="model of state.modelList"
               :key="model.id"
               class="device-item"
               :value="model.id"
+              :disabled="!!state.form.renewal"
             >
               <img class="device-img" :src="model.image" />
               <p class="device-name">{{ model.name }}</p>
@@ -61,7 +59,12 @@
           </PtcRadioGroup>
         </div>
       </div>
-    </template>
+      <div class="ptc-button-group">
+        <div class="ptc-inner">
+          <button class="ptc-button" @click="$emit('go')">NEXT</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -73,6 +76,8 @@ const emit = defineEmits<{
   (e: 'go', delta?: number): void
 }>()
 
+// const showNextBtn = state.form.brand_id && state.form.phone_id
+
 function onSelectBrand() {
   state.form.phone_id = ''
   getModelList()

src/pages/fill-order/index.vue

@@ -23,15 +23,26 @@ import { useRoute } from 'vue-router'
 import StepOne from './StepOne.vue'
 import StepTwo from './StepTwo.vue'
 import StepThree from './StepThree.vue'
-import { state, resetState } from './store'
+import { state, resetState, getModelList } from './store'
+import { state as rootState, getCurrentOrder } from '@/store'
 
 const step = ref(0)
 const Component = computed(() => [StepOne, StepTwo, StepThree][step.value])
-const { from, invitee } = useRoute().query as any
+const { from, invitee, id, renewal } = useRoute().query as any
 
 state.form.from = from || ''
 state.form.invitor = invitee || ''
-
+if (id) {
+  renewal === 'true' && (state.form.renewal = +id)
+  getCurrentOrder(id).then(() => {
+    const order = rootState.currentOrder
+    state.form.product_id = +order.product_id
+    state.form.subscribe_type = +order.subscribe_type === 1 ? 'month' : 'year'
+    state.form.brand_id = +order.brand_id
+    state.form.phone_id = +order.phone_id
+    getModelList()
+  })
+}
 // 此处不直接传入resetState是有必要的，否则resetState在整个应用生命周期只会执行一次
 onUnmounted(() => resetState())
 

src/pages/fill-order/store.ts

@@ -5,16 +5,7 @@ export const state = reactive({
   productList: [] as any[],
   brandList: [] as any[],
   modelList: [] as any[],
-  form: {
-    product_id: '',
-    subscribe_type: '' as 'year' | 'month',
-    discount_code: '',
-    brand_id: '',
-    phone_id: '',
-    email: '',
-    from: '',
-    invitor: '',
-  },
+  form: {} as any,
   discount: null as any,
 })
 

src/pages/pay-result/index.vue

@@ -29,6 +29,7 @@
       </div>
       <div class="button-group">
         <button
+          v-if="info.subscribe_type != 3 && !info.renewal"
           class="ptc-button"
           @click="
             $router.push(