123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316 |
- <template>
- <view class="container">
- <view class="head-block">
- <view class="content">
- <view class="search-box flex flex-y-center">
- <input type="text" v-model="serch" class="search-input" placeholder="请输入商品名称"
- placeholder-class="placeholder" />
- </view>
- <view class="date-search flex box-pack-between flex-y-center">
- <picker mode="date" @change="chooseStartTime">
- <view class="date-box" :class="[start_time?'':'placeholder']">{{start_time || '请选择开始时间'}}</view>
- </picker>
- <view>至</view>
- <picker mode="date" @change="chooseEndTime">
- <view class="date-box" :class="[end_time?'':'placeholder']">{{end_time || '请选择结束时间'}}</view>
- </picker>
- </view>
- <picker class="store-search" :range="storeList" range-key="title" @change="chooseStore"
- v-if="can_choose_store">
- <view class="store-name" :class="[store_id?'':'placeholder']">
- {{store_name || '请选择门店'}}
- </view>
- </picker>
- <view class="btn-block">
- <view class="btn reset-btn" @click="onReset">重置</view>
- <view class="btn sub-btn" @click="onSubmit">筛选</view>
- </view>
- </view>
- <view class="table">
- <view class="tr tb-h" style="border-bottom:none;border-top: 1rpx solid #efefef;">
- <view class="th td" style="width:27%">商品名</view>
- <view class="th td" style="width:25%">门店</view>
- <view class="th td" style="width:16%">下单数</view>
- <view class="th td" style="width:16%">支付数</view>
- <view class="th td" style="width:16%">支付率</view>
- </view>
- </view>
- </view>
- <view class="table">
- <view class="tr" v-for="(item,index) in list">
- <view class="td" style="width:27%">{{item.name}}</view>
- <view class="td" style="width:25%">{{item.store_name}}</view>
- <view class="td" style="width:16%">{{item.num}}</view>
- <view class="td" style="width:16%">{{item.pay_num}}</view>
- <view class="td" style="width:16%">{{item.pay_rate}}</view>
- </view>
- <view class="no-more" v-if="!has_more" style="padding: 40rpx 0;">
- ---没有更多了---
- </view>
- </view>
- <view class="is-iphone-x"></view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- can_choose_store: false,
- admin_id: "",
- store_id: "",
- store_name: "",
- serch: "",
- start_time: "",
- end_time: "",
- storeList: [],
- list: [],
- page: 1,
- has_more: true,
- params: {
- store_id: '', //176 string 是 搜索: 门店id
- serch: '', //string 是 搜索: 商品名称
- start_time: '', // 2022 - 02 - 17 string 是 搜索: 开始时间
- end_time: '', // 2022 - 02 - 17 string 是 搜索: 结束时间
- }
- }
- },
- onLoad(options) {
- if (options.store_id) {
- this.store_id = options.store_id
- this.can_choose_store = false
- this.params.store_id = options.store_id
- } else {
- this.can_choose_store = true
- this.getStoreList()
- }
- this.getList()
- let now = new Date()
- },
- onReachBottom() {
- if (this.has_more) {
- this.getList(this.page + 1)
- }
- },
- methods: {
- onReset() {
- this.serch = ""
- this.start_time = ""
- this.end_time = ""
- this.store_id = this.can_choose_store ? '' : this.store_id
- this.store_name = this.can_choose_store ? '' : this.store_name
- this.params = {
- store_id: this.can_choose_store ? '' : this.store_id, //176 string 是 搜索: 门店id
- serch: '', //string 是 搜索: 商品名称
- start_time: '', // 2022 - 02 - 17 string 是 搜索: 开始时间
- end_time: '', // 2022 - 02 - 17 string 是 搜索: 结束时间
- }
- this.page = 1
- this.list = []
- this.has_more = true
- this.getList()
- },
- onSubmit() {
- this.params = {
- store_id: this.store_id, //搜索: 门店id
- serch: this.serch, //搜索: 商品名称
- start_time: this.start_time, // 2022-02-17 搜索: 开始时间
- end_time: this.end_time, // 2022-02-17 搜索: 结束时间
- }
- this.page = 1
- this.list = []
- this.has_more = true
- this.getList()
- },
- getList(page = 1) {
- let params = JSON.parse(JSON.stringify(this.params))
- params.admin_id = uni.getStorageSync("admin_id");
- params.page = page
- params.limit = 10
- this.request({
- url: 'smdcshop/statistics_index',
- data: params
- }).then(res => {
- if (res.data.length > 0) {
- this.list = this.list.concat(res.data)
- this.has_more = res.data.length < 10 ? false : true
- this.page = page
- } else {
- this.has_more = false
- }
- })
- },
- chooseStartTime(e) {
- this.start_time = e.detail.value
- if (this.end_time && new Date(e.detail.value).getTime() > new Date(this.end_time).getTime()) {
- this.end_time = ""
- }
- },
- chooseEndTime(e) {
- this.end_time = e.detail.value
- if (this.start_time && new Date(this.start_time).getTime() > new Date(e.detail.value).getTime()) {
- this.start_time = ""
- }
- },
- chooseStore(e) {
- let index = e.detail.value
- this.store_id = this.storeList[index].id
- this.store_name = this.getStoreName(this.storeList[index].id)
- },
- getStoreList() {
- this.request({
- url: "Smdcshop/shop_store_index",
- data: {
- admin_id: uni.getStorageSync("admin_id")
- }
- }).then(res => {
- this.storeList = res.data
- if (this.store_id) {
- this.store_name = this.getStoreName(this.store_id)
- }
- })
- },
- getStoreName(store_id) {
- let store = this.storeList.find(item => {
- return item.id == store_id
- })
- return store.title
- },
- }
- }
- </script>
- <style lang="scss">
- .head-block {
- background: #fff;
- width: 100%;
- box-sizing: border-box;
- position: sticky;
- top: 0;
- z-index: 10;
- overflow: hidden;
- box-shadow: 0 0 10rpx #ccc;
- .search-box {
- margin-top: 14rpx;
- padding: 0 24rpx;
- .search-input {
- background: #f8f8f8;
- flex: auto;
- height: 60rpx;
- padding: 0 20rpx;
- border-radius: 12rpx;
- font-size: 24rpx;
- color: #333;
- }
- }
- .date-search {
- margin-top: 14rpx;
- padding: 0 24rpx;
- font-size: 24rpx;
- .date-box {
- height: 60rpx;
- width: 300rpx;
- line-height: 60rpx;
- flex: none;
- background-color: #F8f8f8;
- border-radius: 12rpx;
- padding: 0 20rpx;
- }
- }
- .store-search {
- padding: 0 24rpx;
- margin-top: 14rpx;
- .store-name {
- height: 60rpx;
- line-height: 60rpx;
- font-size: 24rpx;
- background-color: #F8f8f8;
- border-radius: 12rpx;
- padding: 0 20rpx;
- }
- }
- .btn-block {
- margin: 14rpx 0;
- padding: 0 24rpx;
- display: flex;
- flex-flow: row nowrap;
- justify-content: space-around;
- align-items: stretch;
- .btn {
- height: 48rpx;
- border-radius: 12rpx;
- width: 160rpx;
- flex: none;
- font-size: 26rpx;
- text-align: center;
- line-height: 48rpx;
- }
- .reset-btn {
- background: #e8e8e8;
- color: #333;
- }
- .sub-btn {
- color: #fff;
- background: linear-gradient(180deg, #6fa8f8, #328afe);
- }
- }
- }
- .table {
- width: 100%;
- .tr {
- width: 100%;
- display: flex;
- flex-flow: row nowrap;
- justify-content: flex-start;
- align-items: stretch;
- border-bottom: 1rpx solid #d6d6d6;
- .td {
- flex: none;
- padding: 20rpx 10rpx;
- text-align: center;
- font-size: 24rpx;
- box-sizing: border-box;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .th {
- font-weight: 500;
- }
- }
- }
- .placeholder {
- color: #888;
- }
- </style>
|