搜索

pages/search/index.js

@@ -5,9 +5,105 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    foods: [{
+        id: 0,
+        foodsImg: 'https://bpic.588ku.com/back_origin_min_pic/20/11/05/a7438bbf54ace893e790545815e14ef3.jpg',
+        foodsName: '麻辣烫',
+        foodsDesc: '包含香菜、菠菜、面、豆芽、海带',
+        initPrice: 28.80,
+        nowPrice: 10.98
+
+      },
+      {
+        id: 1,
+        foodsImg: 'https://bpic.588ku.com/back_origin_min_pic/20/11/05/a7438bbf54ace893e790545815e14ef3.jpg',
+        foodsName: '麻辣烫',
+        foodsDesc: '包含香菜、菠菜、面、豆芽、海带',
+        initPrice: 28.80,
+        nowPrice: 10.98
+
+      },
+      {
+        id: 2,
+        foodsImg: 'https://bpic.588ku.com/back_origin_min_pic/20/11/05/a7438bbf54ace893e790545815e14ef3.jpg',
+        foodsName: '麻辣烫',
+        foodsDesc: '包含香菜、菠菜、面、豆芽、海带',
+        initPrice: 28.80,
+        nowPrice: 10.98
+
+      },
+      {
+        id: 3,
+        foodsImg: 'https://bpic.588ku.com/back_origin_min_pic/20/11/05/a7438bbf54ace893e790545815e14ef3.jpg',
+        foodsName: '麻辣烫',
+        foodsDesc: '包含香菜、菠菜、面、豆芽、海带',
+        initPrice: 28.80,
+        nowPrice: 10.98
+
+      },
+      {
+        id: 4,
+        foodsImg: 'https://bpic.588ku.com/back_origin_min_pic/20/11/05/a7438bbf54ace893e790545815e14ef3.jpg',
+        foodsName: '麻辣烫',
+        foodsDesc: '包含香菜、菠菜、面、豆芽、海带',
+        initPrice: 28.80,
+        nowPrice: 10.98
+
+      },
+      {
+        id: 5,
+        foodsImg: 'https://bpic.588ku.com/back_origin_min_pic/20/11/05/a7438bbf54ace893e790545815e14ef3.jpg',
+        foodsName: '麻辣烫',
+        foodsDesc: '包含香菜、菠菜、面、豆芽、海带',
+        initPrice: 28.80,
+        nowPrice: 10.98
+
+      },
+      {
+        id: 6,
+        foodsImg: 'https://bpic.588ku.com/back_origin_min_pic/20/11/05/a7438bbf54ace893e790545815e14ef3.jpg',
+        foodsName: '麻辣烫',
+        foodsDesc: '包含香菜、菠菜、面、豆芽、海带',
+        initPrice: 28.80,
+        nowPrice: 10.98
+
+      },
+      {
+        id: 7,
+        foodsImg: 'https://bpic.588ku.com/back_origin_min_pic/20/11/05/a7438bbf54ace893e790545815e14ef3.jpg',
+        foodsName: '麻辣烫',
+        foodsDesc: '包含香菜、菠菜、面、豆芽、海带',
+        initPrice: 28.80,
+        nowPrice: 10.98
+
+      }
+    ],
+    show: false,
+    totalPrice: 0,
+    info: ''
+  },
+  onInput(e) {
+    this.setData({
+      info: e.detail.value
+    })
+  },
+  onChange(e) {
+    let id = e.currentTarget.dataset.id;
+    let count = e.detail;
+    let foodsPrice = this.data.foods[id].nowPrice;
+    // console.log(id,foodsPrice);
+  },
+  onSearch() {
+    let list = this.data.foods;
+    let x = list.map(res => {
+      console.log(res);
+    })
+    console.log(x);
+    this.setData({
+      show: !this.data.show,
+
+    })
   },
-
   /**
    * 生命周期函数--监听页面加载
    */

pages/search/index.json

@@ -1,6 +1,11 @@
 {
   "usingComponents": {
     "van-search":"@vant/weapp/search",
-    "van-icon":"@vant/weapp/icon"
+    "van-icon":"@vant/weapp/icon",
+    "van-stepper":"@vant/weapp/stepper",
+    "van-row": "@vant/weapp/row",
+    "van-col": "@vant/weapp/col",
+    "van-submit-bar": "@vant/weapp/submit-bar"
+
   }
 }

pages/search/index.wxml

@@ -1,7 +1,49 @@
 <view class="search_container">
   <view class="inputContent">
     <van-icon name="search" />
-    <input type="text" placeholder="搜索商品名称" />
-    <button>搜索</button>
+    <input type="text" bindinput="onInput" placeholder="搜索商品名称" />
+    <button bindtap="onSearch" bintap="onSearch">搜索</button>
   </view>
+  <view class="show_clear" hidden="true">
+    <text>搜索历史</text>
+    <view>
+      <van-icon name="delete-o" />
+      <text>清除记录</text>
+    </view>
+  </view>
+
+  <view class="search_content_true" wx:if="{{show}}">
+    <image src="./img/kong.png"></image>
+  </view>
+
+  <view wx:else>
+    <view class="search_content_false" wx:for="{{foods}}" wx:key="*this">
+      <van-row>
+        <van-col span="7" offset="1">
+          <view class="pic">
+            <image src="{{item.foodsImg}}"></image>
+          </view>
+
+        </van-col>
+        <van-col span="8">
+          <view class="desc">
+            <text style="font-size:33rpx;font-weight:700;">{{item.foodsName}}</text>
+            <text style="font-size: 24rpx;color:rgb(173, 173, 173);">{{item.foodsDesc}}</text>
+            <text style="text-decoration: line-through;">￥{{item.initPrice}}</text>
+            <text style="color:red;font-size: 30rpx;">￥{{item.nowPrice}}+40积分</text>
+          </view>
+        </van-col>
+
+        <van-col span="8">
+          <van-stepper data-id="{{item.id}}" style="position: relative;top:180rpx;right:-20rpx;" min="0" value="{{ 0 }}" bind:change="onChange" />
+        </van-col>
+      </van-row>
+    </view>
+    <view class="search_total">
+    <van-submit-bar  price="{{ totalPrice }}" button-text="去结算" bind:submit="onSubmit" />
+  </view>
+  </view>
+
+
+  
 </view>

pages/search/index.wxss

@@ -1,3 +1,6 @@
+page{
+  background-color: #FF8700;
+}
 .inputContent {
   width: 95%;
   margin: 0 auto;
@@ -10,11 +13,13 @@
   border-radius: 60rpx;
 
 }
-.inputContent input{
+
+.inputContent input {
   font-size: 28rpx;
 }
+
 .inputContent button {
-  width: 60px;
+  width: 120rpx;
   height: 60rpx;
   border-radius: 60rpx;
   font-size: 30rpx;
@@ -23,4 +28,50 @@
   background-color: orange;
   margin-left: 0 !important;
   margin-right: -30rpx !important;
-}
+}
+
+.show_clear {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+
+/* search true */
+.search_content_true {
+  height: 95vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  /* background-color: rgb(112, 218, 144); */
+}
+
+.search_content_true image {
+  width: 60%;
+}
+
+/* search false */
+.search_content_false {
+
+  height: 340rpx;
+  width: 100%;
+  background-color: rgb(233, 233, 233);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.search_content_false image {
+  width: 100%;
+  height: 100%;
+}
+.search_content_false .pic{
+  width: 200rpx;
+  height: 200rpx;
+}
+.search_content_false .desc{
+  display: flex;
+  flex-direction: column;
+}