From c36e3053e9a6aff656abc872f4cfec7a54064bcc Mon Sep 17 00:00:00 2001
From: "jqtmviyu@gmail.com" <jqtmviyu@gmail.com>
Date: Fri, 26 Feb 2021 23:48:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E4=BB=B7=E6=A0=BC=E5=92=8C?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                             |   1 +
 src/pages/goods_detail/goods_detail.vue |  48 +++++++++-
 src/styles/iconfont.css                 | 112 ++++++++++++++++++++++++
 3 files changed, 159 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/iconfont.css

diff --git a/src/App.vue b/src/App.vue
index 6249377..6f62a7a 100644
--- a/src/App.vue
+++ b/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 {
diff --git a/src/pages/goods_detail/goods_detail.vue b/src/pages/goods_detail/goods_detail.vue
index 1b2a3ab..67efe81 100644
--- a/src/pages/goods_detail/goods_detail.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/styles/iconfont.css b/src/styles/iconfont.css
new file mode 100644
index 0000000..406745e
--- /dev/null
+++ b/src/styles/iconfont.css
@@ -0,0 +1,112 @@
+@font-face {font-family: "iconfont";
+  src: url('//at.alicdn.com/t/font_1605767_utaihfnlhc.eot?t=1578557313693'); /* IE9 */
+  src: url('//at.alicdn.com/t/font_1605767_utaihfnlhc.eot?t=1578557313693#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('//at.alicdn.com/t/font_1605767_utaihfnlhc.woff?t=1578557313693') format('woff'),
+  url('//at.alicdn.com/t/font_1605767_utaihfnlhc.ttf?t=1578557313693') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('//at.alicdn.com/t/font_1605767_utaihfnlhc.svg?t=1578557313693#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-htmal5icon19:before {
+  content: "\e637";
+}
+
+.icon-quanbudingdan01:before {
+  content: "\e629";
+}
+
+.icon-shangchuan:before {
+  content: "\e64f";
+}
+
+.icon-shoucang:before {
+  content: "\e636";
+}
+
+.icon-icon-test:before {
+  content: "\e610";
+}
+
+.icon-xuanze:before {
+  content: "\e62d";
+}
+
+.icon-xuanzhong:before {
+  content: "\e62e";
+}
+
+.icon-shoucang1:before {
+  content: "\e611";
+}
+
+.icon-zhuanfa:before {
+  content: "\e642";
+}
+
+.icon-daishouhuo:before {
+  content: "\e640";
+}
+
+.icon-fenlei:before {
+  content: "\e61b";
+}
+
+.icon-zengjia:before {
+  content: "\e632";
+}
+
+.icon-gouwuche:before {
+  content: "\e622";
+}
+
+.icon-tuihuo:before {
+  content: "\e607";
+}
+
+.icon-shouye-copy:before {
+  content: "\e641";
+}
+
+.icon-RectangleCopy:before {
+  content: "\e6a2";
+}
+
+.icon-jianshao:before {
+  content: "\e615";
+}
+
+.icon-fankuitianbao:before {
+  content: "\e662";
+}
+
+.icon-kefu:before {
+  content: "\e665";
+}
+
+.icon-banben:before {
+  content: "\e60a";
+}
+
+.icon-jianshao1:before {
+  content: "\e65d";
+}
+
+.icon-tianjia:before {
+  content: "\e65e";
+}
+
+.icon-tubiao-:before {
+  content: "\e601";
+}
+
+.icon-fankui:before {
+  content: "\e61d";
+}