更新

src/components/AiProductDetail.vue

@@ -2,13 +2,16 @@
   <ai-detail class="audit">
     <template slot="content">
       <ai-card title="基本信息">
+        <ai-product-drop-down v-if="info" :params="info" slot="right"></ai-product-drop-down>
         <template #content>
-          <ai-wrapper
-            label-width="120px">
-            <ai-info-item label="名称"   :value="info.name"></ai-info-item>
-            <ai-info-item label="显示顺序"   :value="info.showIndex"></ai-info-item>
-            <ai-info-item label="创建时间"   :value="info.createTime" ></ai-info-item>
-          </ai-wrapper>
+          <div class="flex">
+            <ai-avatar v-model="info.imgUrl" :editable="false" :preview="true"/>
+            <ai-wrapper
+              label-width="120px" class="fill">
+              <ai-info-item label="价格："   :value="'$' + info.price"></ai-info-item>
+              <ai-info-item label="销量："   :value="info.saleTotal"></ai-info-item>
+            </ai-wrapper>
+          </div>
         </template>
       </ai-card>
       <ai-card title="趋势信息">
@@ -20,11 +23,15 @@
   </ai-detail>
 </template>
 <script>
-import { Message } from "element-ui"
+import AiProductDropDown from './AiProductDropDown.vue'
+import { DualAxes } from '@antv/g2plot'
 
 export default {
   name: "AiProductDetail",
   props: ['params'],
+  components: {
+    AiProductDropDown
+  },
   data() {
     return {
       info: {}
@@ -33,7 +40,6 @@ export default {
   computed: {
   },
   created() {
-    console.log(this.params.goodsId)
     this.getInfo()
   },
   methods: {
@@ -44,6 +50,32 @@ export default {
         }
       }).then(res => {
         this.info = res.data
+
+        const dualAxes = new DualAxes('chart', {
+          data: [this.info.priceAndSale, this.info.priceAndSale],
+          xField: '日期',
+          yField: ['价格', '销量'],
+          geometryOptions: [
+            {
+              geometry: 'line',
+              color: '#5B8FF9',
+            },
+            {
+              geometry: 'line',
+              color: '#5AD8A6',
+            }
+          ],
+          smooth: true,
+          // @TODO 后续会换一种动画方式
+          animation: {
+            appear: {
+              animation: 'path-in',
+              duration: 5000,
+            },
+          },
+        });
+
+        dualAxes.render();
       })
     }
   }