小程序产品库完成

src/mods/AppSupermarket/search.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="search">
+    <div class="search-wrap">
+      <u-search :show-action="false" placeholder="请输入手机号或身份证号搜索" v-model.trim="keyword" @search="search"></u-search>
+    </div>
+    <div class="result-body">
+      <div class="res-item" v-if="result" @click="selected">
+        <span>{{ result.familyName }}家</span>
+        <span>剩余积分:{{ result.familyIntegral }}分</span>
+      </div>
+      <span class="placeholder" v-else>请通过搜索“
+        <strong>手机号或身份证号</strong>
+        ”后选择结算对象
+      </span>
+    </div>
+    <u-modal v-model="show" title="温馨提示" @confirm="confirm" content="该手机号绑定了多个居民，请通过身份证号进行查询"
+             :confirm-style="{fontWeight:800}"></u-modal>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "search",
+  data() {
+    return {
+      keyword: "",
+      show: false,
+      result: null,
+    }
+  },
+  methods: {
+    selected() {
+      uni.navigateBack({
+        delta: 1,
+        success: () => {
+          uni.$emit('selected', this.result)
+        },
+        fail: (err) => {
+          console.error(err)
+        }
+      })
+    },
+    search() {
+      if (this.keyword == "") {
+        return uni.showToast({
+          title: "请输入搜索关键字",
+          icon: 'none'
+        })
+      }
+
+      this.$instance.post(`/app/appresident/queryFamilyByPhone`, null, {
+        params: {
+          phone: this.keyword
+        }
+      }).then(res => {
+        if (res && res.data) {
+          this.result = res.data
+        }
+      }).catch(e => {
+        this.result = null
+        uni.showToast({
+          title: e,
+          icon: 'none'
+        })
+      })
+    },
+    confirm() {
+      this.show = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search {
+  min-height: 100%;
+  background-color: #ffffff;
+
+  .search-wrap {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 24px 32px;
+  }
+
+  .result-body {
+
+    .res-item {
+      height: 112px;
+      border-bottom: 1px solid #F5F5F5;
+      box-sizing: border-box;
+      padding: 0 56px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      & > span {
+        font-size: 32px;
+        color: #333333;
+      }
+    }
+
+    .placeholder {
+      display: flex;
+      justify-content: center;
+      margin-top: 144px;
+      font-size: 28px;
+      color: #999999;
+
+      & > strong {
+        color: #135AB8;
+      }
+    }
+  }
+
+}
+</style>