搜索页面

app.json

@@ -3,7 +3,8 @@
     "pages/index/index",
     "pages/logs/logs",
     "pages/success/paySuccess",
-    "pages/business/business"
+    "pages/business/business",
+    "pages/search/search"
   ],
   "window": {
     "backgroundTextStyle": "light",
@@ -20,7 +21,7 @@
     "van-search": "@vant/weapp/search/index",
     "van-card": "@vant/weapp/card/index",
     "van-icon": "@vant/weapp/icon/index",
-    "van-tag": "@vant/weapp/tag/index",  
+    "van-tag": "@vant/weapp/tag/index",
     "van-tabbar": "@vant/weapp/tabbar/index",
     "van-tabbar-item": "@vant/weapp/tabbar-item/index"
   }

pages/business/business.js

@@ -14,9 +14,9 @@ Page({
     });
   },
   onSearch() {
-    Toast('搜索' + this.data.value);
+    // Toast('搜索' + this.data.value);
   },
   onClick() {
-    Toast('搜索' + this.data.value);
+    // Toast('搜索' + this.data.value);
   },
 });

pages/search/search.js

@@ -0,0 +1,19 @@
+// pages/search/search.js
+Page({
+  data: {
+    value: '',
+    imageURL:'https://img2.baidu.com/it/u=2170808470,2611792870&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'
+  },
+  onChange(e) {
+    this.setData({
+      value: e.detail,
+
+    });
+  },
+  onSearch() {
+    // Toast('搜索' + this.data.value);
+  },
+  onClick() {
+    // Toast('搜索' + this.data.value);
+  },
+});

pages/search/search.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "搜索"
+}

pages/search/search.wxml

@@ -0,0 +1,66 @@
+<view>
+  <van-search value="{{ value }}" placeholder="搜索商品名称" use-action-slot bind:change="onChange" bind:search="onSearch" shape="round">
+    <view slot="action" bind:tap="onClick">搜索</view>
+  </van-search>
+  <view class="bg">
+    <view class="under">
+      <view class="one">
+        <van-card origin-price="28.8" price="10.98+40积分" desc="包含香菜、菠菜、面、豆芽、海带" title="麻辣烫微辣" thumb="{{ imageURL }}">
+
+        </van-card>
+
+        <view class="shop">
+          <van-tag type="danger">优惠商品</van-tag>
+        </view>
+        <view class="num">
+          限购2份
+        </view>
+        <view class="add">
+          <van-icon name="add" />
+          2
+          <van-icon name="add" />
+        </view>
+      </view>
+      <view class="one">
+        <van-card origin-price="28.8" price="10.98+40积分" desc="包含香菜、菠菜、面、豆芽、海带" title="麻辣烫微辣" thumb="{{ imageURL }}">
+
+        </van-card>
+
+        <view class="shop">
+          <van-tag type="danger">优惠商品</van-tag>
+        </view>
+        <view class="num">
+          限购2份
+        </view>
+        <view class="add">
+          <van-icon name="add" />
+          2
+          <van-icon name="add" />
+        </view>
+      </view>
+
+
+
+    </view>
+  </view>
+</view>
+<view class="tab">
+  <van-tabbar active="{{ active }}" bind:change="onChange">
+    <view class="car">
+      <van-icon name="shopping-cart" />
+    </view>
+    <view class="sum">
+      ￥10.98+40积分
+    </view>
+    <view class="mony">
+      共优惠￥10.0
+    </view>
+    <view class="fill">
+      货款费￥0
+    </view>
+    <view class="button">
+      <van-button round type="primary" color="#FFA500">去结算</van-button>
+
+    </view>
+  </van-tabbar>
+</view>

pages/search/search.wxss

@@ -0,0 +1,54 @@
+.bg{
+  height: 530rpx;
+  background-color: rgba(236, 234, 229, 0.788);
+}
+
+.one{
+  float: left;
+  width: 750rpx;
+  padding-top: 15rpx;
+  position: relative;
+}
+.shop{
+  position: absolute;
+  top: 25rpx;
+  left: 410rpx;
+}
+.num{
+  position: absolute;
+  font-size: 10px;
+  color: #FFA500;
+  top: 155rpx;
+  left: 655rpx;
+}
+.add{
+  position: absolute;
+  color: #FFA500;
+  top: 200rpx;
+  left: 620rpx;
+}
+.car{
+  color: red;
+  font-size: 40px;
+  margin-left: 20rpx;
+}
+.sum{
+  color: red;
+  margin-top: 20rpx;
+  margin-left: 10rpx;
+}
+.mony{
+  color: red;
+  font-size: 12px;
+  margin-top: 64rpx;
+  margin-left:-275rpx ;
+}
+.fill{
+ font-size: 12px;
+  color: rgb(59, 58, 56);
+  margin-top: 64rpx;
+  margin-left:15rpx ;
+}
+.button{
+  margin-left: 100rpx;
+}

project.private.config.json

@@ -20,6 +20,13 @@
           "query": "",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "搜索",
+          "pathName": "pages/search/search",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }