123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361 |
- <template>
- <div class="container store-page">
- <div class="store-toolbar">
- <div class="toolbar">
- <div class="item item1" >
- <van-search
- :value="value"
- placeholder="请输入搜索关键词"
- show-action
- shape="round"
- focus
- @change="onChange"
- @cancel="onCancel"
- />
- </div>
- </div>
- </div>
- <scroll-view scroll-y class="store-content">
- <v-card style="height:auto" :thumb="item.icon" v-for="(item, index) in storeList" :key="item.id">
- <div class="store-info">
- <div class="title txt-clip">{{item.name}}</div>
- <div class="content">
- <div class="left">
- <div class="desc">
- <van-rate :value="item.star" size="10" color="#ff5500" allow-half void-color="#eee" void-icon="star" />
- <span class="rate-num">{{item.star}}</span>
- </div>
- <div class="phone">
- <van-icon name="phone" class="phone-icon" />
- <div @click="callPhone(item.managerMobile)"> {{item.managerMobile}} </div>
- </div>
- </div>
- <div class="right" v-if="item.distance" @click="openLocation(item)">
- <div class="navigation">
- <van-icon name="location" />
- 导航
- </div>
- <div>
- 距您{{item.distance}}KM
- </div>
- </div>
- </div>
- <div>
- <div class="">
- {{item.addrProvinceName + item.addrCityName + item.addrDistrictName}}
- </div>
- <div class="tags">
- <div class="tag" v-for="(tag, index2) in item.storeBizList" :key="tag.id">{{tag.bizTypeName}}</div>
- </div>
- </div>
- </div>
- </v-card>
- <no-data :options="list"/>
- </scroll-view>
- </div>
- </template>
- <script>
- import { getListStore } from '@/api/store.js'
- import NoData from '@/components/NoData';
- import storage from '@/utils/storage.js'
- export default {
- name: 'storeSearch',
- components: { 'no-data': NoData },
- data() {
- return {
- storeList: [],
- isSearched: false,
- searchVal: '',
- isfocus: true,
- pageNo: 1,
- pageSize: 10,
- isLastPage: false,
- areaCode: '',
- currentPosition: {
- lat: '',
- lng: ''
- },
- };
- },
- computed: {
- },
- methods: {
- onChange (e) {
- this.isSearched = false
- this.isLastPage = false
- this.searchVal = e.mp.detail
- this.pageNo = 1
- this.storeList = []
- this.getStoreList()
- console.log(e, "e.detail")
- console.log(this.searchVal, "this.searchVal")
- },
- onCancel () {
- wx.navigateBack({
- delta: 1
- })
- },
- callPhone(phone) {
- wx.makePhoneCall({
- phoneNumber: phone
- });
- },
- getStarNum(level) {
- const star = (5 - 0.5 * (level - 1)).toString();
- return star.indexOf('.') > -1 ? star : star + '.0';
- },
- openLocation(item) {
- wx.openLocation({
- latitude: item.lat - 0,
- longitude: item.lng - 0,
- name: item.name,
- address: item.addrProvinceName + item.addrCityName + item.addrDistrictName + item.addrDetail
- });
- },
- // 格式化数据
- formatList(list) {
- const _this = this;
- if (list.length) {
- list.forEach(item => {
- item.distance = item.distance ? (item.distance/1000).toFixed(2) : '';
- item.star = this.getStarNum(item.level);
- });
- return list;
- } else {
- return [];
- }
- return [];
- },
- getStoreList() {
- const val = this.searchVal
- if(val==''||val.length==0){
- return false
- }
- const _this = this;
- wx.showLoading({
- mask: true,
- title: '加载中'
- });
- let params={
- name: val,
- enableFlag: 1,
- pageNo: this.pageNo,
- pageSize: this.pageSize,
- lat: this.currentPosition.lat,
- lng: this.currentPosition.lng
- }
- if (this.areaCode.length == 4){ // 查询市的门店
- params.addrCity = this.areaCode
- } else { // 查询区的门店
- params.addrDistrict = this.areaCode
- }
- if (!params.lat && !params.lng){
- delete params.lat
- delete params.lng
- }
- getListStore(params).then(res => {
- if (res.status === '200') {
- _this.isSearched = true
- if (res.data.list && res.data.list.length) {
- if(this.pageNo>1){
- _this.storeList = _this.storeList.concat(_this.formatList(res.data.list))
- }else{
- _this.storeList = _this.formatList(res.data.list)
- }
- let len = _this.storeList.length
- console.log(len)
- console.log(res.data.count)
- if(len>=res.data.count){
- if(this.pageNo>1){
- wx.showToast({
- title: '已经是最后一页'
- })
- }
- _this.isLastPage = true
- }else{
- _this.isLastPage = false
- }
- } else {
- _this.storeList = []
- }
- } else {
- wx.showToast({
- title: res.message,
- icon: 'none',
- duration: 2500
- });
- }
- setTimeout(function(){
- wx.hideLoading();
- },500)
- })
- },
- },
- // 监听用户上拉触底事件
- onReachBottom() {
- if(!this.isLastPage){
- this.pageNo = this.pageNo + 1
- this.getStoreList()
- }
- },
- onShow() {
- this.searchVal = '';
- this.isfocus = true
- this.isSearched = false
- this.isLastPage = false
- },
- onLoad(options) {
- console.log(options)
- this.currentPosition.lat = options.lat
- this.currentPosition.lng = options.lng
- this.areaCode = options.areaCode
- }
- };
- </script>
- <style lang="stylus">
- ._v-card .v-card{
- border-bottom: 1px solid #eee;
- height:auto;
- }
- .vcard .van-card__img{
- border-radius:5px;
- }
- .container {
- height: 100%;
- overflow: hidden;
- box-sizing: border-box;
- padding-top: 70rpx;
- }
- .store-content {
- height: 100%;
- box-sizing: border-box;
- margin-top :10px;
- }
- .store-toolbar {
- position: fixed;
- top: 0;
- width: 100%;
- box-sizing: border-box;
- border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
- background-color: #fff;
- z-index: 9;
- .toolbar {
- display: flex;
- justify-content: space-around;
- height: 70rpx;
- .item {
- width: 100%;
- }
- .item1 {
- text-align: right;
- }
- }
- .toolbar-detail {
- background-color: #fff;
- position: absolute;
- top: 73rpx;
- left: 0;
- right: 0;
- opacity: 0;
- &.show {
- opacity: 1;
- }
- }
- }
- .icon {
- position: relative;
- top: 4rpx;
- }
- .store-info {
- box-sizing: border-box;
- font-size: 25rpx;
- height: 100%;
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .content {
- display: flex;
- flex: 1;
- .left {
- flex: 1;
- }
- .navigation {
- font-size: 1em;
- text-align: right;
- }
- }
- .title {
- font-size: 1em;
- padding: 10rpx 0;
- font-weight:bold;
- }
- .desc {
- color: #80848f;
- display: flex;
- }
- .rate-num {
- padding: 0 15rpx;
- }
- .phone {
- display: flex;
- align-items: center;
- padding: 12rpx 0;
- color:#57a3f3;
- }
- .tags {
- margin-top: 5rpx;
- display: flex;
- font-size: 0.8em;
- .tag {
- color: #808695;
- border: 1rpx solid rgba(255, 0, 0, 0.3);
- padding: 5rpx 10rpx;
- }
- .tag + .tag {
- margin-left: 10rpx;
- }
- }
- }
- .checkbox-group {
- padding: 5px 20px 5px 40px;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- }
- .checkbox-item {
- width: 40vw;
- padding: 15rpx 0;
- }
- .toolbar-detail-control {
- display: flex;
- .btn {
- flex: 1;
- }
- }
- </style>
|