商品价格和标题

src/App.vue

@@ -14,6 +14,7 @@
 
 <style lang="scss">
     @import "uview-ui/index.scss";
+    @import "styles/iconfont.css";
 
     /* 公共样式 */
     page,view,text,button,navigator,image,swiper,swiper-item,input {

src/pages/goods_detail/goods_detail.vue

@@ -7,6 +7,17 @@
        </swiper-item>
      </swiper>
 
+    <!-- 2.0 商品标题 -->
+    <view class="info">
+      <view class="info_head">
+        <text class="price">{{ goods_price }}</text>
+        <view class="iconfont icon-zhuanfa"></view>
+        <view class="iconfont icon-shoucang1"></view>
+      </view>
+      <view class="title">
+        {{goods_name}}
+      </view>
+    </view>
   </view>
 </template>
 
@@ -15,7 +26,10 @@ export default {
   data(){
     return {
       goods_id: "",
-      pics: []
+      pics: [],
+      goods_name: "商品名称",
+      goods_price: "0",
+      goods_introduce: "",
     }
   },
   onLoad( {goods_id} ){
@@ -25,8 +39,11 @@ export default {
   },
   methods: {
     async getGoodsDetail(){
-      const { pics } = (await this.$u.api.getGoodsDetail({ goods_id: this.goods_id })).message
+      const { pics, goods_name, goods_price, goods_introduce  } = (await this.$u.api.getGoodsDetail({ goods_id: this.goods_id })).message
       this.pics = pics
+      this.goods_name = goods_name
+      this.goods_price = goods_price
+      this.goods_introduce = goods_introduce
     },
     showBigImgHandle(current){
       const urls = this.pics.map(item => item.pics_big)
@@ -51,4 +68,31 @@ export default {
     height: 500rpx;
   }
 }
+.info {
+  padding: 20rpx 30rpx;
+  .info_head {
+    display: flex;
+    .price {
+      flex: 1;
+      font-size: 36rpx;
+      color: #eb4450;
+      // 通过伪元素处理符号
+      &::before {
+        content: "¥";
+        font-size: 80%;
+        margin-right: 3rpx;
+      }
+    }
+
+    .iconfont {
+      margin: 0 10rpx;
+    }
+  }
+
+  .title {
+    font-size: 30rpx;
+    line-height: 1.4;
+    margin: 5rpx;
+  }
+}
 </style>	</style>