界面搭建

app.json

 {
   "pages": [
-    "pages/record/record",
+    "pages/store/store",
     "pages/coupon/coupon",
+    "pages/record/record",
     "pages/home/home",
-    "pages/login/login",
-    "pages/store/store"
+    "pages/login/login"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/coupon/coupon.js

    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
+    wx.hideShareMenu();
     var code = options.code;
     var pohone = options.phone;
     if (code){//券码查询

pages/coupon/coupon.wxml

       <view class="countBox">
         <text>核销</text>
         <view class="countContent">{{nums}}
-          <image class="symbolBox" src="../../static/coupon/symbolLeft.png" style="left:-1rpx;" bindtap="reduceCoupon"></image>
-          <image class="symbolBox" src="../../static/coupon/symbolRight.png" style="right:-1rpx;" bindtap="addCoupon"></image>
+          <image class="symbolBox" src="../../static/coupon/symbolLeft.png" style="left:-5rpx;" bindtap="reduceCoupon"></image>
+          <image class="symbolBox" src="../../static/coupon/symbolRight.png" style="right:-5rpx;" bindtap="addCoupon"></image>
         </view>
       </view>
     </view>

pages/coupon/coupon.wxss

 #vCodeBox>input {
   width: 600rpx;
   height: 98rpx;
-  background-color: #d8d8d8;
+  background-color: rgba(0, 0, 0, 0.28);
   margin: 0 auto;
   border-radius: 49rpx;
   padding: 0 41rpx;
   text-align: center;
   width: 44rpx;
   height: 44rpx;
-  top: -1rpx;
+  top: -5rpx;
 }

pages/store/store.js

    * 页面的初始数据
    */
   data: {
-
+    searchContent:'测试呢容',//搜索内容
+    multiArray: [['浙江省', '广东省'], ['宁波市', '杭州市', '温州市', '绍兴市', '台州市']],
+    multiIndex: [0, 0],
+    list:[
+      {
+        url:'../../static/store/01.png',
+        name:'北京东城区金宝店',
+        address:'北京市东城区金宝大雅宝59号（鄂尔多斯酒店对面）',
+        mobile:'010-8388-6698'
+      },
+      {
+        url: '../../static/store/01.png',
+        name: '北京东城区金宝店',
+        address: '北京市东城区金宝大雅宝59号（鄂尔多斯酒店对面）',
+        mobile: '010-8388-6698'
+      },
+      {
+        url: '../../static/store/01.png',
+        name: '北京东城区金宝店',
+        address: '北京市东城区金宝大雅宝59号（鄂尔多斯酒店对面）',
+        mobile: '010-8388-6698'
+      }
+    ]
+  },
+  /**
+   * 清除搜索内容
+   */
+  clearSearchContent(){
+    this.setData({
+      searchContent:""
+    })
+  },
+  /**
+   * 输入内容改变
+   */
+  changeSearch(event){
+    this.setData({
+      searchContent: event.detail.value
+    })
+  },
+  /**
+   *搜索
+   */
+  search(){
+    console.log(this.data.searchContent)
+  },
+  /**
+   * 拨打电话
+   */
+  callMobile(e){
+    console.log(e);
+    wx.makePhoneCall({
+      phoneNumber: e.currentTarget.dataset.mobile //仅为示例，并非真实的电话号码
+    })
   },
-
   /**
    * 生命周期函数--监听页面加载
    */

pages/store/store.wxml

 <!--pages/store/store.wxml-->
-<text>pages/store/store.wxml</text>
+<view class="container">
+  <view class="headSearch">
+    <view class="pickerBox">
+      <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
+        {{multiArray[1][multiIndex[1]]}}
+      </picker>
+      <image class="down" src="../../static/record/down.png"></image>
+    </view>
+    <view class="searchBox">
+      <icon class="iconSearch" type="search" size="30rpx" />
+      <input class="search" confirm-type="search" placeholder="输入搜索内容" placeholder-style="color:#B2B2B2;font-size: 24rpx;" value="{{searchContent}}" bindinput="changeSearch" bindconfirm="search"></input>
+      <icon class="iconClose" type="clear" size="30rpx" wx:if="{{searchContent!=''}}" bindtap="clearSearchContent" />
+    </view>
+    <view class="btnSearch" bindtap="search">搜索</view>
+  </view>
+  <scroll-view class="content" scroll-y="true">
+    <view class="Item clearfix" wx:for="{{list}}">
+      <view class="photoBox">
+        <image class="photo" src="{{item.url}}" mode="aspectFill"></image>
+        <view class="phoneBox">
+          <image class="phone" src="../../static/store/phone.png"></image>
+        </view>
+      </view>
+      <view class="name">{{item.name}}</view>
+      <view class="infoBox">
+        <image class="icon" src="../../static/store/location.png"></image>
+        <text>{{item.address}}</text>
+      </view>
+       <view class="infoBox" data-mobile="{{item.mobile}}" bindtap="callMobile">
+        <image class="icon" src="../../static/store/mobile.png"></image>
+        <text>{{item.mobile}}</text>
+      </view>
+    </view>
+  </scroll-view>
+</view>

pages/store/store.wxss

-/* pages/store/store.wxss */
+/* pages/store/store.wxss */
+
+.headSearch {
+  display: flex;
+  width: 100%;
+  height: 60rpx;
+  margin-top: 15rpx;
+}
+
+.headSearch>.pickerBox {
+  margin-left: 32rpx;
+  width: 138rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  text-align: center;
+  font-size: 24rpx;
+  color: #333;
+  border: 2rpx solid rgba(204, 204, 204, 1);
+  border-radius: 6rpx;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.headSearch>.pickerBox>.down{
+  width: 19rpx;
+  height: 10rpx;
+  margin-left: 10rpx;
+}
+
+.headSearch>.searchBox {
+  position: relative;
+  width: 390rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  border-radius: 6rpx;
+  background-color: #f5f5f5;
+  margin-left: 24rpx;
+  box-sizing: border-box;
+  padding-left: 75rpx;
+  padding-right: 50rpx;
+}
+
+.headSearch>.searchBox>input.search{
+  width: 100%;
+  height: 100%;
+  font-size: 24rpx;
+}
+
+.headSearch>.searchBox>.iconSearch {
+  position: absolute;
+  top: 15rpx;
+  left: 20rpx;
+}
+
+.headSearch>.searchBox>.iconClose {
+  position: absolute;
+  top: 15rpx;
+  right: 10rpx;
+}
+.headSearch>.btnSearch{
+  width: 110rpx;
+  height: 60rpx;
+  background-color: #EB6100;
+  border-radius: 6rpx;
+  color: #FFFFFF;
+  font-size: 30rpx;
+  text-align: center;
+  line-height: 60rpx;
+  box-sizing: border-box;
+  margin-left: 24rpx;
+}
+.content{
+  width: 686rpx;
+  margin: 10rpx auto 0 auto;
+  height: calc(100vh - 75rpx - 10rpx);
+}
+.Item{
+  width: 100%;
+  margin-top: 40rpx;
+  padding-bottom: 25rpx;
+  border-bottom: 1rpx solid #CCCCCC;
+}
+.Item>.photoBox{
+  position: relative;
+  width: 100%;
+  height: 300rpx;
+  border-radius:30rpx;
+  background-color: #642F10;
+  margin-bottom: 30rpx;
+  overflow: hidden;
+}
+.Item>.photoBox>.photo{
+  width: 100%;
+  height: 100%;
+}
+.Item>.photoBox>.phoneBox{
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 86rpx;
+  height: 88rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top-left-radius: 30rpx;
+  background-color: #EB6100;
+}
+.Item>.photoBox>.phoneBox>image{
+  width: 41rpx;
+  height: 40rpx;
+}
+.Item>.name{
+  color:#333333;
+  font-size: 30rpx;
+  font-weight: 650;
+  margin-bottom: 15rpx;
+}
+.Item>.infoBox{
+  position: relative;
+  height: 30rpx;
+  margin: 15rpx 0;
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  color: #666666;
+  padding-left: 40rpx;
+}
+.Item>.infoBox>.icon{
+  position: absolute;
+  left: 0;
+  top: 0rpx;
+  width: 24rpx;
+  height: 24rpx;
+}