eduepos_ui_store/pages/search/index.vue

<template>
    <view class="search-page">
        <view class="search-wrap">
            <view class="search-input">
                <input
                    v-model="searchValue"
                    type="text"
                    placeholder="请输入订单编号或手机号码进行查询"
                    clearable
                    placeholder-class="input-placeholder"
                    @input="handInput"
                    @blur="handSearch"
					style="height: 56rpx;background-color: #FFF;font-size: 28rpx;"
                    :customStyle="inputCustomStyle"
                    maxlength="50">
                </input>
            </view>
            <u-icon name="search" size="28" color="#6c6c6c" @click="handSearch"></u-icon>
        </view>
        <view class="result-num">共{{ orderList.length }}个结果</view>
        <view class="result-list">
            <item v-for="item in orderList" @loadOrder="loadData" :item="item" :key="item.id" />
        </view>
    </view>
</template>
<script>
import item from '@/pages/components/order.vue'
import {mapState} from 'vuex';
export default {
    components: {
        item
    },
    data () {
        return {
			listUrl: '/storeOrderApi/getOrderListForStoreSearch',
            inputCustomStyle: {
                height: '30px',
                background: '#fff',
                border: 'none'
            },
            searchValue: '',
            orderList: []
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
		handInput (e) {
			this.searchValue = e.detail.value
		},
        handSearch () {
			if (!this.searchValue) {
				uni.showToast({
					title: "请输入搜索条件",
					icon: "none"
				})
				return 
			}
			this.loadData();
        },
		loadData() {
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			uni.showLoading({
				title: '加载中'
			});
			let that = this;
			this.requst({
				url: this.listUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					searchValue2: this.searchValue,
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading();
						this.orderList = res.data.list;
					} else {
						if (res.data.rtnBean.rtnMsg != '') {
							uni.hideLoading();
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			})
			
		},
		
    },
    onLoad (opt) {
        if (opt.no) {
            this.searchValue = opt.no
            this.handSearch()
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/ .input-placeholder {
	font-size: 23rpx;
	color: #666666
}
.search-page {
    background-color: #f5f5f5;
    min-height: 100vh;
    border-top: 2rpx solid #f5f5f5;
}
.search-wrap {
    @include between;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin: 20rpx 0;
    .search-input {
        height: 60rpx;
        flex: 1;
        margin-right: 40rpx;
    }
}
.result-num {
    padding: 0 20rpx;
    box-sizing: border-box;
    font-size: $font-base;
    color: $text-color;
}
</style>