整合api请求、添加购买会员卡页面、登陆页面

gym-manage-uniapp/components/memberInfo/BodyTestRadarChart.vue

@@ -10,62 +10,50 @@
     </view>
 </template>
 
-<script>
+<script setup>
+import { ref, watch, onMounted, nextTick } from 'vue'
 import { drawRadarChart } from '@/common/memberInfo/bodyTestChart.js'
 
-export default {
-    options: {
-        virtualHost: false,
-        styleIsolation: 'apply-shared'
-    },
-    props: {
-        labels: { type: Array, default: () => [] },
-        values: { type: Array, default: () => [] },
-        width: { type: Number, default: 280 },
-        height: { type: Number, default: 240 }
-    },
-    data() {
-        return {
-            canvasId: `bt-radar-${Math.random().toString(36).slice(2, 9)}`
-        }
-    },
-    watch: {
-        values: {
-            deep: true,
-            handler() {
-                this.renderChart()
-            }
-        }
-    },
-    mounted() {
-        this.renderChart()
-    },
-    methods: {
-        renderChart() {
-            this.$nextTick(() => {
-                const query = uni.createSelectorQuery().in(this)
-                query
-                    .select(`#${this.canvasId}`)
-                    .fields({ node: true, size: true })
-                    .exec((res) => {
-                        const node = res?.[0]?.node
-                        if (!node) return
-                        const dpr = uni.getSystemInfoSync().pixelRatio || 1
-                        drawRadarChart(node, {
-                            width: this.width,
-                            height: this.height,
-                            labels: this.labels,
-                            values: this.values,
-                            dpr
-                        })
-                    })
+const props = defineProps({
+    labels: { type: Array, default: () => [] },
+    values: { type: Array, default: () => [] },
+    width: { type: Number, default: 280 },
+    height: { type: Number, default: 240 }
+})
+
+const canvasId = ref(`bt-radar-${Math.random().toString(36).slice(2, 9)}`)
+
+function renderChart() {
+    nextTick(() => {
+        const query = uni.createSelectorQuery().in(getCurrentInstance())
+        query
+            .select(`#${canvasId.value}`)
+            .fields({ node: true, size: true })
+            .exec((res) => {
+                const node = res?.[0]?.node
+                if (!node) return
+                const dpr = uni.getSystemInfoSync().pixelRatio || 1
+                drawRadarChart(node, {
+                    width: props.width,
+                    height: props.height,
+                    labels: props.labels,
+                    values: props.values,
+                    dpr
+                })
             })
-        }
-    }
+    })
 }
+
+watch(() => props.values, () => {
+    renderChart()
+}, { deep: true })
+
+onMounted(() => {
+    renderChart()
+})
 </script>
 
-<style>
+<style lang="scss">
 .bt-radar {
     display: flex;
     align-items: center;