完善：商品搜索界面

CJPremiumMember/app.wxss

 /**app.wxss**/
 .container {
   padding: 0;
+  margin: 0;
+  box-sizing: border-box;
 } 

CJPremiumMember/common/foot.wxml

-<template name="foot">
-  <navigator class="page-foot" openType="switchTab" url="/page/component/index" hover-class="none">
-    <image class="icon-foot" src="../image/green_tri.png"></image>
-  </navigator>
-</template>
\ No newline at end of file

CJPremiumMember/common/head.wxml

-<template name="head">
-  <view class="page-head">
-    <view class="page-head-title">{{title}}</view>
-    <view class="page-head-line"></view>
-    <view wx:if="{{desc}}" class="page-head-desc">{{desc}}</view>
-  </view>
-</template>
\ No newline at end of file

CJPremiumMember/components/TagView/index.js

+Component({
+  properties: {
+    showDelect:Boolean,
+    flexList:Array,
+    title: String // 简化的定义方式
+  },
+  data: {
+   
+  },
+  methods: {
+    // 这里是一个自定义方法
+    tagAction(e) {
+        var eventOption = { content: e.currentTarget.dataset.text} // 触发事件的选项
+        this.triggerEvent('tagClick', eventOption)
+    },
+    delectAction() {
+      this.triggerEvent('delectClick')
+    }
+  }
+})
\ No newline at end of file

CJPremiumMember/components/TagView/index.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

CJPremiumMember/components/TagView/index.wxml

+<!--Common/TagView/index.wxml-->
+<view class="tag-container" hover-class="none" hover-stop-propagation="false" wx:if="{{flexList.length > 0}}">
+    <view class="tag-view">
+        <text selectable="false" space="false" decode="false">{{title}}</text>
+        <image src="../../image/delete.png" lazy-load="false" wx:if="{{showDelect}}" bind:tap="delectAction"/>
+    </view>
+    <view class="flex-container">
+        <scroll-view scroll-y="true" style="height: 250rpx; width:100%;">
+            <view class="flex-view" wx:for="{{flexList}}" wx:key="index" wx:for-item="obj">
+                <text class="flex-item" selectable="false" space="false" decode="false" bindtap="tagAction" data-text="{{obj}}">{{obj}}</text>
+            </view>
+        </scroll-view>
+    </view>
+</view>

CJPremiumMember/components/TagView/index.wxss

+/* Common/TagView/index.wxss */
+
+
+.tag-container {
+    padding-left: 40rpx;
+}
+
+.tag-view {
+    padding: 10rpx 0;
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    width: 100%;
+    border-bottom: 2rpx solid rgba(240, 241, 242, 1);
+}
+
+.tag-view text {
+    color: rgb(193, 193, 193);
+}
+
+.tag-view image {
+    width: 40rpx;
+    height: 44rpx;
+    margin-right: 40rpx;
+}
+
+.flex-container {
+    padding-right: 40rpx;
+}
+
+.flex-view {
+    display: inline-block;
+    margin: 20rpx 20rpx 0 0;
+    padding: 5rpx 10rpx;
+    color: rgb(176, 185, 194);
+    border: 2rpx solid rgb(240, 241, 242);
+}
+
+.flex-view .flex-container {
+    background-color: rebeccapurple;
+    padding-right: 40rpx;
+}
\ No newline at end of file

CJPremiumMember/pages/Cart/index.skeleton.wxml

@@ -34,9 +34,9 @@
                             <image class="goods-icon sk-image" lazy-load="true" mode="aspectFill"></image>
                           </view>
                           <view class="goods-content" hover-class="none" hover-stop-propagation="true">
-                            <text class="goods-name sk-transparent sk-text-14-5833-165 sk-text" decode="true" selectable="true" space="false">90分户外休闲中长厚款鹅绒羽绒服0</text>
-                            <text class="goods-spec sk-transparent sk-text-14-5834-4 sk-text" decode="true" selectable="true" space="false">XL;黑色 20</text>
-                            <text class="goods-price sk-transparent sk-text-14-5834-683 sk-text" decode="true" selectable="true" space="false">1</text>
+                            <text class="goods-name sk-transparent sk-text-14-5833-165 sk-text" decode="true" user-select="true" space="false">90分户外休闲中长厚款鹅绒羽绒服0</text>
+                            <text class="goods-spec sk-transparent sk-text-14-5834-4 sk-text" decode="true" user-select="true" space="false">XL;黑色 20</text>
+                            <text class="goods-price sk-transparent sk-text-14-5834-683 sk-text" decode="true" user-select="true" space="false">1</text>
                           </view>
                           <view class="buy-num">
                             <view class="reduce-btn sk-transparent sk-text-25-0000-944 sk-text" data-index="0" style="border: none; background-position-x: 50%;">-</view>
@@ -64,9 +64,9 @@
                             <image class="goods-icon sk-image" lazy-load="true" mode="aspectFill"></image>
                           </view>
                           <view class="goods-content" hover-class="none" hover-stop-propagation="true">
-                            <text class="goods-name sk-transparent sk-text-14-5833-599 sk-text" decode="true" selectable="true" space="false">90分户外休闲中长厚款鹅绒羽绒服1</text>
-                            <text class="goods-spec sk-transparent sk-text-14-5834-923 sk-text" decode="true" selectable="true" space="false">XL;黑色 21</text>
-                            <text class="goods-price sk-transparent sk-text-14-5834-562 sk-text" decode="true" selectable="true" space="false">2</text>
+                            <text class="goods-name sk-transparent sk-text-14-5833-599 sk-text" decode="true" user-select="true" space="false">90分户外休闲中长厚款鹅绒羽绒服1</text>
+                            <text class="goods-spec sk-transparent sk-text-14-5834-923 sk-text" decode="true" user-select="true" space="false">XL;黑色 21</text>
+                            <text class="goods-price sk-transparent sk-text-14-5834-562 sk-text" decode="true" user-select="true" space="false">2</text>
                           </view>
                           <view class="buy-num">
                             <view class="reduce-btn sk-transparent sk-text-25-0000-370 sk-text" data-index="1" style="border: none; background-position-x: 50%;">-</view>
@@ -94,9 +94,9 @@
                             <image class="goods-icon sk-image" lazy-load="true" mode="aspectFill"></image>
                           </view>
                           <view class="goods-content" hover-class="none" hover-stop-propagation="true">
-                            <text class="goods-name sk-transparent sk-text-14-5833-586 sk-text" decode="true" selectable="true" space="false">90分户外休闲中长厚款鹅绒羽绒服2</text>
-                            <text class="goods-spec sk-transparent sk-text-14-5834-265 sk-text" decode="true" selectable="true" space="false">XL;黑色 22</text>
-                            <text class="goods-price sk-transparent sk-text-14-5834-575 sk-text" decode="true" selectable="true" space="false">3</text>
+                            <text class="goods-name sk-transparent sk-text-14-5833-586 sk-text" decode="true" user-select="true" space="false">90分户外休闲中长厚款鹅绒羽绒服2</text>
+                            <text class="goods-spec sk-transparent sk-text-14-5834-265 sk-text" decode="true" user-select="true" space="false">XL;黑色 22</text>
+                            <text class="goods-price sk-transparent sk-text-14-5834-575 sk-text" decode="true" user-select="true" space="false">3</text>
                           </view>
                           <view class="buy-num">
                             <view class="reduce-btn sk-transparent sk-text-25-0000-200 sk-text" data-index="2" style="border: none; background-position-x: 50%;">-</view>
@@ -124,9 +124,9 @@
                             <image class="goods-icon sk-image" lazy-load="true" mode="aspectFill"></image>
                           </view>
                           <view class="goods-content" hover-class="none" hover-stop-propagation="true">
-                            <text class="goods-name sk-transparent sk-text-14-5833-395 sk-text" decode="true" selectable="true" space="false">90分户外休闲中长厚款鹅绒羽绒服3</text>
-                            <text class="goods-spec sk-transparent sk-text-14-5834-864 sk-text" decode="true" selectable="true" space="false">XL;黑色 23</text>
-                            <text class="goods-price sk-transparent sk-text-14-5834-68 sk-text" decode="true" selectable="true" space="false">4</text>
+                            <text class="goods-name sk-transparent sk-text-14-5833-395 sk-text" decode="true" user-select="true" space="false">90分户外休闲中长厚款鹅绒羽绒服3</text>
+                            <text class="goods-spec sk-transparent sk-text-14-5834-864 sk-text" decode="true" user-select="true" space="false">XL;黑色 23</text>
+                            <text class="goods-price sk-transparent sk-text-14-5834-68 sk-text" decode="true" user-select="true" space="false">4</text>
                           </view>
                           <view class="buy-num">
                             <view class="reduce-btn sk-transparent sk-text-25-0000-406 sk-text" data-index="3" style="border: none; background-position-x: 50%;">-</view>
@@ -154,9 +154,9 @@
                             <image class="goods-icon sk-image" lazy-load="true" mode="aspectFill"></image>
                           </view>
                           <view class="goods-content" hover-class="none" hover-stop-propagation="true">
-                            <text class="goods-name sk-transparent sk-text-14-5833-511 sk-text" decode="true" selectable="true" space="false">90分户外休闲中长厚款鹅绒羽绒服4</text>
-                            <text class="goods-spec sk-transparent sk-text-14-5834-425 sk-text" decode="true" selectable="true" space="false">XL;黑色 24</text>
-                            <text class="goods-price sk-transparent sk-text-14-5834-813 sk-text" decode="true" selectable="true" space="false">5</text>
+                            <text class="goods-name sk-transparent sk-text-14-5833-511 sk-text" decode="true" user-select="true" space="false">90分户外休闲中长厚款鹅绒羽绒服4</text>
+                            <text class="goods-spec sk-transparent sk-text-14-5834-425 sk-text" decode="true" user-select="true" space="false">XL;黑色 24</text>
+                            <text class="goods-price sk-transparent sk-text-14-5834-813 sk-text" decode="true" user-select="true" space="false">5</text>
                           </view>
                           <view class="buy-num">
                             <view class="reduce-btn sk-transparent sk-text-25-0000-832 sk-text" data-index="4" style="border: none; background-position-x: 50%;">-</view>
@@ -184,9 +184,9 @@
                             <image class="goods-icon sk-image" lazy-load="true" mode="aspectFill"></image>
                           </view>
                           <view class="goods-content" hover-class="none" hover-stop-propagation="true">
-                            <text class="goods-name sk-transparent sk-text-14-5833-397 sk-text" decode="true" selectable="true" space="false">90分户外休闲中长厚款鹅绒羽绒服5</text>
-                            <text class="goods-spec sk-transparent sk-text-14-5834-432 sk-text" decode="true" selectable="true" space="false">XL;黑色 25</text>
-                            <text class="goods-price sk-transparent sk-text-14-5834-800 sk-text" decode="true" selectable="true" space="false">6</text>
+                            <text class="goods-name sk-transparent sk-text-14-5833-397 sk-text" decode="true" user-select="true" space="false">90分户外休闲中长厚款鹅绒羽绒服5</text>
+                            <text class="goods-spec sk-transparent sk-text-14-5834-432 sk-text" decode="true" user-select="true" space="false">XL;黑色 25</text>
+                            <text class="goods-price sk-transparent sk-text-14-5834-800 sk-text" decode="true" user-select="true" space="false">6</text>
                           </view>
                           <view class="buy-num">
                             <view class="reduce-btn sk-transparent sk-text-25-0000-196 sk-text" data-index="5" style="border: none; background-position-x: 50%;">-</view>
@@ -207,7 +207,7 @@
       <view class="shopping-cart-counter-view" hover-class="none" hover-stop-propagation="true" style="border: none;">
         <view class="all-select-view" hover-class="none" hover-stop-propagation="true">
           <image class="select-button sk-image"></image>
-          <text decode="true" selectable="true" space="false" class="sk-transparent sk-text-18-7500-125 sk-text">已选择</text>
+          <text decode="true" user-select="true" space="false" class="sk-transparent sk-text-18-7500-125 sk-text">已选择</text>
         </view>
         <view class="price-view">
           <view class="total sk-transparent sk-text-36-0000-811 sk-text">合计：¥ 0</view>

CJPremiumMember/pages/Cart/index.wxml

@@ -10,9 +10,9 @@
                             <image class="goods-icon" src="{{goods.goodsUrl}}" mode="aspectFill" lazy-load="false"/>
                         </view>
                         <view class="goods-content" hover-class="none" hover-stop-propagation="false">
-                            <text class="goods-name" selectable="false" space="false" decode="false">{{goods.goodsName}}</text>
-                            <text class="goods-spec" selectable="false" space="false" decode="false">{{goods.goodsSpec}}</text>
-                            <text class="goods-price" selectable="false" space="false" decode="false">{{goods.goodsPrice}}</text>
+                            <text class="goods-name" user-select="false" space="false" decode="false">{{goods.goodsName}}</text>
+                            <text class="goods-spec" user-select="false" space="false" decode="false">{{goods.goodsSpec}}</text>
+                            <text class="goods-price" user-select="false" space="false" decode="false">{{goods.goodsPrice}}</text>
                         </view>
                         <view class="buy-num">
                             <view class="reduce-btn {{goods.goodsCount==0? 'disabled' : ''}}" catchtap="reduceBtnTap" data-index="{{index}}">-</view>
@@ -27,7 +27,7 @@
     <view class="shopping-cart-counter-view" hover-class="none" hover-stop-propagation="false">
         <view class="all-select-view" hover-class="none" hover-stop-propagation="false" bindtap="allSelectAction">
             <image class="select-button" src="{{isSelectAll?'../../image/check_t.png ':'../../image/check_f.png'}}" />
-            <text selectable="false" space="false" decode="false">已选择</text>
+            <text user-select="false" space="false" decode="false">已选择</text>
         </view>
         <view class="price-view">
             <view class="total" hidden="{{noSelect}}">合计：¥ {{totalPrice}}</view>

CJPremiumMember/pages/Home/index.skeleton.wxml

@@ -83,13 +83,13 @@
       <view class="activity-view">
         <view class="activity-container">
           <image class="activity-image sk-image" mode="aspectFill"></image>
-          <text class="activity-text sk-transparent sk-text-18-7500-465 sk-text" decode="true" selectable="true">新品热销榜</text>
-          <text class="activity-text sk-transparent sk-text-18-7500-615 sk-text" decode="true" selectable="true" space="false">热销爆款不容错过</text>
+          <text class="activity-text sk-transparent sk-text-18-7500-465 sk-text" decode="true" user-select="true">新品热销榜</text>
+          <text class="activity-text sk-transparent sk-text-18-7500-615 sk-text" decode="true" user-select="true" space="false">热销爆款不容错过</text>
         </view>
         <view class="activity-container">
           <image class="activity-image sk-image" mode="aspectFill"></image>
-          <text class="activity-text sk-transparent sk-text-18-7500-120 sk-text" decode="true" selectable="true">新品热销榜</text>
-          <text class="activity-text sk-transparent sk-text-18-7500-437 sk-text" decode="true" selectable="true" space="false">热销爆款不容错过</text>
+          <text class="activity-text sk-transparent sk-text-18-7500-120 sk-text" decode="true" user-select="true">新品热销榜</text>
+          <text class="activity-text sk-transparent sk-text-18-7500-437 sk-text" decode="true" user-select="true" space="false">热销爆款不容错过</text>
         </view>
       </view>
     </view>

CJPremiumMember/pages/Home/index.wxml

@@ -37,8 +37,8 @@
         <block wx:for="{{activityList}}" wx:key="itme" wx:for-item="obj">
            <view class="activity-container">
                <image class="activity-image" src="{{imageUrl}}" mode="aspectFill"/>
-               <text class="activity-text" selectable="false" decode="false">{{obj.text}}</text>
-               <text class="activity-text" selectable="false" space="false" decode="false">{{obj.subText}}</text>
+               <text class="activity-text" user-select="false" decode="false">{{obj.text}}</text>
+               <text class="activity-text" user-select="false" space="false" decode="false">{{obj.subText}}</text>
            </view>
         </block>
      </view>

CJPremiumMember/pages/Order/index.json

 {
   "usingComponents": {},
-  "navigationBarTitleText": "订单"
+  "navigationBarTitleText": "确认订单"
 }
\ No newline at end of file

CJPremiumMember/pages/Order/index.wxml

 <!--pages/Order/index.wxml-->
 <view class="container" hover-class="none" hover-stop-propagation="false">
     <view class="search-container" hover-class="none" hover-stop-propagation="false">
-        <text class="search-text" selectable="false" space="false" decode="false">
+        <text class="search-text" user-select="false" space="false" decode="false">
             待开发...
         </text>
     </view>

CJPremiumMember/pages/Search/index.js

@@ -5,7 +5,12 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    searchText:'',
+    isSearch:false,
+    goodsList:[{"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服","type":"精选","originalPrice":34,"price":45},
+    {"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服","type":"精选","originalPrice":45,"price":45},{"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服","type":"精选","originalPrice":34,"price":45}],
+    historys:['手机','电','电脑','电视','哗哗哈哈','昌','双双','是','要','有','大厦'],
+    hotList:['手fffff','电sss','电ccc脑','电f视','哗哗ffff哈哈','昌','双双','是','要','有','大厦']
   },
 
   /**
@@ -62,5 +67,42 @@ Page({
    */
   onShareAppMessage: function () {
 
+  },
+  bindinput(e) {
+    console.log(this.data.searchText)
+    this.setData({
+      searchText:e.detail.value,
+      isSearch:false
+    })
+  },
+  bindconfirm(e) {
+    this.setData({
+      searchText:e.detail.value
+    })
+  },
+  searchAction() {
+    if (this.data.searchText.length == 0) {
+      return
+    }
+    let goodsList = [{"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服"+this.data.searchText,"type":"精选","originalPrice":45,"price":45},
+    {"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲"+this.data.searchText,"type":"精选","originalPrice":45,"price":333},{"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服"+this.data.searchText,"type":"精选","originalPrice":45,"price":45},{"icon":"../../image/group_portrait.png","title":"休闲中长厚款90分户外休闲中长厚款鹅绒羽绒服"+this.data.searchText,"type":"精选","originalPrice":45,"price":45}]
+    var list = this.data.historys
+    if (this.data.searchText.length > 0) {
+      list.push(this.data.searchText)
+    }
+    this.setData({
+      isSearch:true,
+      goodsList:goodsList,
+      historys:list
+    })
+    console.log(this.data.searchText)
+  },
+  tagAction(e) {
+    console.log(e.detail.content)
+  },
+  delectAction(e) {
+    this.setData({
+      historys:[]
+    })
   }
 })
\ No newline at end of file

CJPremiumMember/pages/Search/index.json

 {
-  "usingComponents": {},
+  "usingComponents": {
+    "TagView": "../../components/TagView/index"
+  },
   "navigationBarTitleText": "搜索"
 }
\ No newline at end of file

CJPremiumMember/pages/Search/index.wxml

@@ -2,8 +2,27 @@
 
 <view class="container" hover-class="none" hover-stop-propagation="false">
     <view class="search-container" hover-class="none" hover-stop-propagation="false">
-        <text class="search-text" selectable="false" space="false" decode="false">
-            待开发...
-        </text>
+        <view class="search">
+            <input type="text" placeholder="请输入商品名称" value="{{searchText}}" bindinput="bindinput" bindconfirm="bindconfirm" bindfocus="bindfocus"></input>
+            <image src="../../image/search.png" bindtap="search"></image>
+        </view>
+        <text class="show-type {{searchText.length == 0?'disabled':''}}" space="false" decode="false" bindtap="searchAction">搜索</text>
+    </view>
+    <view class="tag-view" hover-class="none" hover-stop-propagation="false" wx:if="{{!isSearch}}">
+        <TagView title="历史搜索" showDelect="{{true}}" flexList="{{historys}}" bind:tagClick="tagAction" bind:delectClick="delectAction"/>
+        <TagView title="热门搜索" showDelect="{{false}}" flexList="{{hotList}}" bind:tagClick="tagAction"/>
+    </view>
+    <view class="goodsList-view" hover-class="none" hover-stop-propagation="false" wx:else>
+        <view class="goods-view" hover-class="none" hover-stop-propagation="false" wx:for="{{goodsList}}" wx:key="index" wx:for-item="obj">
+            <image class="goods-icon" src="{{obj.icon}}" mode="aspectFit" lazy-load="false" binderror="" bindload=""/>
+            <view class="goods-text-view" hover-class="none" hover-stop-propagation="false">
+                <text class="goods-type" selectable="false" space="false" decode="false">{{obj.type}}</text>
+                <text class="goods-title" selectable="false" space="false" decode="false">{{obj.title}}</text>
+            </view>
+            <view class="goods-price-view" hover-class="none" hover-stop-propagation="false">
+                <text class="goods-price" selectable="false" space="false" decode="false">￥{{obj.price}}</text>
+                <text class="goods-original-price" selectable="false" space="false" decode="false" wx:if="{{(obj.price != obj.originalPrice)}}">￥{{obj.originalPrice}}</text>
+            </view>
+        </view>
     </view>
 </view>
\ No newline at end of file

CJPremiumMember/pages/Search/index.wxss

 /* pages/Search/index.wxss */
 
 .search-container {
-    width: 100vw;
-    height: 100vh;
+    padding: 32rpx;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
-.search-container {
-    text-align: center;
+.search-container .search {
+    position: relative;
+    width: calc( 100% - 150rpx);
+    height: 66rpx;
+}
+.search-container .search input {
+    width: 100%;
+    height: 100%;
+    border-radius: 30rpx;
+    padding-left:60rpx;
+    background-color: rgba(240, 241, 242, 0.5);
+}
+.search-container .search image {
+    width: 30rpx;
+    height: 30rpx;
+    position: absolute;
+    top: 19rpx;
+    left: 19rpx;
+    z-index: 9999;
+}
+.search-container .show-type.disabled{
+    color: rgb(193, 193, 193);
+    
+}
+.search-container .show-type{
+    color: rgb(1, 1, 1);
+}
+
+
+.tag-view {
+    margin-top: 50rpx;
+}
+
+.goodsList-view {
+    display: flex;
+    flex-wrap: wrap;
+}
+.goods-view {
+    width: calc( 100% / 2);
+    /* height: calc( 100vw / 2 + ); */
+}
+
+.goods-icon {
+    width: calc( 100% - 60rpx);
+    height: calc( (100vw - 120rpx) / 2);
+    margin-left: 30rpx;
+}
+
+.goods-text-view {
+    width: calc (100% -60rpx);
+    margin-left: 30rpx;
+}
+
+.goods-text-view .goods-type {
+    padding: 5rpx;
+    color: red;
+    border: 2rpx solid red;
+    margin-right: 10rpx;
+}
+
+.goods-price-view {
+    margin-left: 30rpx;
+    margin-bottom: 55rpx;
+}
+
+.goods-price-view .goods-original-price {
+    text-decoration: line-through;
+    text-decoration-color: rgb(193, 193, 193);
+    color: rgb(193, 193, 193);
 }
\ No newline at end of file