393 lines
		
	
	
		
			11 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			393 lines
		
	
	
		
			11 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <template>
 | |
|   <view>
 | |
|     <view class="top-box">
 | |
|       <view class="search-box">
 | |
|         <!-- <u-icon name="search" size="36rpx" color="#999"></u-icon> -->
 | |
|         <input
 | |
|           @confirm="searchName"
 | |
|           confirm-type="search"
 | |
|           class="search-input"
 | |
|           type="text"
 | |
|           v-model="form.memberCode"
 | |
|           value=""
 | |
|           :placeholder="$t('S_C_70') + $t('N_I_150')"
 | |
|         />
 | |
|       </view>
 | |
|       <view class="f26 gray9 ml20" style="flex-shrink: 0" @click="openPop()">{{
 | |
|         $t("MY_ORD_50")
 | |
|       }}</view>
 | |
|     </view>
 | |
|     <view class="wallet-list">
 | |
|       <view class="bonus-item" v-for="(item, index) in listData" :key="index">
 | |
|         <view class="bonus-item-item">
 | |
|           <view class="bonus-item-name f26 gray9">{{ $t("w_0353") }}</view>
 | |
|           <view class="bonus-item-content f26 gray3">{{ item.lev }}</view>
 | |
|         </view>
 | |
|         <view class="bonus-item-item">
 | |
|           <view class="bonus-item-name f26 gray9">{{ $t("N_I_124") }}</view>
 | |
|           <view class="bonus-item-content f26 gray3">{{
 | |
|             item.memberCode
 | |
|           }}</view>
 | |
|         </view>
 | |
| 
 | |
|         <view class="bonus-item-item">
 | |
|           <view class="bonus-item-name f26 gray9">{{ $t("CK_KS_14") }}</view>
 | |
|           <view class="bonus-item-content f26 gray3">{{
 | |
|             item.memberName
 | |
|           }}</view>
 | |
|         </view>
 | |
|         <view class="bonus-item-item">
 | |
|           <view class="bonus-item-name f26 gray9">{{ $t("PER_DA_5") }}</view>
 | |
|           <view class="bonus-item-content f26 gray3">{{
 | |
|             item.pkRegisterGradeVal
 | |
|           }}</view>
 | |
|         </view>
 | |
|         <view class="bonus-item-item">
 | |
|           <view class="bonus-item-name f26 gray9">{{ $t("PER_DA_10") }}</view>
 | |
|           <view class="bonus-item-content f26 gray3">{{
 | |
|             item.consumeAchieve
 | |
|           }}</view>
 | |
|         </view>
 | |
|         <view class="bonus-item-item">
 | |
|           <view class="bonus-item-name f26 gray9">{{ $t("CK_KS_16") }}</view>
 | |
|           <view class="bonus-item-content f26 gray3">{{
 | |
|             item.pkAwardsVal
 | |
|           }}</view>
 | |
|         </view>
 | |
|         <view class="bonus-item-item">
 | |
|           <view class="bonus-item-name f26 gray9">{{ $t("N_I_103") }}(PV)</view>
 | |
|           <view class="bonus-item-content f26 gray3">{{
 | |
|             item.sumPv ? formatNum(item.sumPv) : ""
 | |
|           }}</view>
 | |
|         </view>
 | |
|         <view class="bonus-item-item">
 | |
|           <view class="bonus-item-name f26 gray9">{{ $t("fn_288") }}(PV)</view>
 | |
|           <view class="bonus-item-content f26 gray3">{{
 | |
|             item.newPv ? formatNum(item.newPv) : ""
 | |
|           }}</view>
 | |
|         </view>
 | |
|         <view class="bonus-item-item">
 | |
|           <view class="bonus-item-name f26 gray9">{{ $t("fn_289") }}(PV)</view>
 | |
|           <view class="bonus-item-content f26 gray3">{{
 | |
|             item.orderAchieve ? formatNum(item.orderAchieve) : ""
 | |
|           }}</view>
 | |
|         </view>
 | |
|         <view class="bonus-item-item">
 | |
|           <view class="bonus-item-name f26 gray9">{{ $t("fn_290") }}</view>
 | |
|           <view class="bonus-item-content f26 gray3">{{ item.newCount }}</view>
 | |
|         </view>
 | |
|         <view class="bonus-item-item">
 | |
|           <view class="bonus-item-name f26 gray9">{{ $t("fn_291") }}</view>
 | |
|           <view class="bonus-item-content f26 gray3">{{ item.sumCount }}</view>
 | |
|         </view>
 | |
|         <view class="bonus-item-item">
 | |
|           <view class="bonus-item-name f26 gray9">{{ $t("MN_F_T_914") }}</view>
 | |
|           <view class="bonus-item-content f26 domation">{{
 | |
|             item.payTime
 | |
|           }}</view>
 | |
|         </view>
 | |
|       </view>
 | |
|     </view>
 | |
|     <view class="d-c-c p30" v-if="listData.length == 0 && !loading">
 | |
|       <text class="iconfont icon-wushuju"></text>
 | |
|       <text class="cont">{{ $t("w_0405") }}</text>
 | |
|     </view>
 | |
|     <uni-load-more v-else :loadingType="loadingType"></uni-load-more>
 | |
|     <!-- 筛选 -->
 | |
|     <u-popup :show="showPop" mode="right" @close="closePop" @open="openPop">
 | |
|       <view class="pop-content rightpop">
 | |
|         <view class="pop-title d-b-c">
 | |
|           <view class="f28 gray3">{{ $t("MY_ORD_50") }}</view>
 | |
|           <view class="f28 domation" @click="closePop">{{
 | |
|             $t("N_I_241")
 | |
|           }}</view>
 | |
|         </view>
 | |
|         <view class="right-item-title">{{ $t("N_I_150") }}</view>
 | |
|         <view style="padding: 0 24rpx"
 | |
|           ><u-search
 | |
|             :placeholder="$t('S_C_70') + $t('N_I_150')"
 | |
|             :clearabled="true"
 | |
|             :showAction="false"
 | |
|             v-model="form.memberCode"
 | |
|           ></u-search
 | |
|         ></view>
 | |
|         <view class="right-item-title">{{ $t("w_0352") }}</view>
 | |
|         <view class="d-c-c">
 | |
|           <picker
 | |
|             mode="date"
 | |
|             :value="date1"
 | |
|             :start="startDate"
 | |
|             :end="endDate"
 | |
|             @change="bindDateChange1"
 | |
|           >
 | |
|             <view class="data-input">{{
 | |
|               form.startDate || $t("CK_KS_3")
 | |
|             }}</view>
 | |
|           </picker>
 | |
|           <view
 | |
|             style="
 | |
|               width: 30rpx;
 | |
|               height: 1rpx;
 | |
|               background-color: #333;
 | |
|               margin: 0 24rpx;
 | |
|             "
 | |
|           ></view>
 | |
|           <picker
 | |
|             mode="date"
 | |
|             :value="date2"
 | |
|             :start="startDate"
 | |
|             :end="endDate"
 | |
|             @change="bindDateChange2"
 | |
|           >
 | |
|             <view class="data-input">{{ form.endDate || $t("CK_KS_9") }}</view>
 | |
|           </picker>
 | |
|         </view>
 | |
|         <view class="pop-btns">
 | |
|           <view class="pop-left-btn" @click="resetSubmit()">{{
 | |
|             $t("w_0257")
 | |
|           }}</view>
 | |
|           <view class="pop-right-btn" @click="searchSubmit()">{{
 | |
|             $t("w_0035")
 | |
|           }}</view>
 | |
|         </view>
 | |
|       </view>
 | |
|     </u-popup>
 | |
|   </view>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import uniLoadMore from "@/components/uni-load-more.vue";
 | |
| export default {
 | |
|   components: {
 | |
|     uniLoadMore,
 | |
|   },
 | |
|   data() {
 | |
|     // const currentDate = this.getDate({
 | |
|     //   format: true,
 | |
|     // });
 | |
|     const today = new Date();
 | |
|     const yesterday = new Date(today);
 | |
|     yesterday.setDate(yesterday.getDate() - 1);
 | |
| 
 | |
|     const formatDate = (date) => {
 | |
|       const year = date.getFullYear();
 | |
|       const month = (date.getMonth() + 1).toString().padStart(2, "0");
 | |
|       const day = date.getDate().toString().padStart(2, "0");
 | |
|       return `${year}-${month}-${day}`;
 | |
|     };
 | |
| 
 | |
|     const currentDate = formatDate(today);
 | |
|     const previousDate = formatDate(yesterday);
 | |
|     const firstDayOfMonth = `${today.getFullYear()}-${(today.getMonth() + 1)
 | |
|       .toString()
 | |
|       .padStart(2, "0")}-01`;
 | |
| 
 | |
|     return {
 | |
|       listData: [],
 | |
|       showPop: false,
 | |
|       date1: "",
 | |
|       date2: "",
 | |
|       /*有没有等多*/
 | |
|       no_more: false,
 | |
|       form: {
 | |
|         pageNum: 1,
 | |
|         pageSize: 10,
 | |
|         startDate: firstDayOfMonth,
 | |
|         endDate: previousDate,
 | |
|         memberCode: "",
 | |
|       },
 | |
|       total: 0,
 | |
|       /*是否正在加载*/
 | |
|       loading: true,
 | |
|       statusData: [],
 | |
|     };
 | |
|   },
 | |
|   onLoad(e) {},
 | |
|   onShow() {
 | |
|     /*获取数据*/
 | |
|     this.listData = [];
 | |
|     this.form.pageNum = 1;
 | |
|     this.getData();
 | |
|   },
 | |
|   onReachBottom() {
 | |
|     let self = this;
 | |
|     if (self.form.pageNum * self.form.pageSize < self.total) {
 | |
|       self.form.pageNum++;
 | |
|       self.getData();
 | |
|     }
 | |
|     self.no_more = true;
 | |
|   },
 | |
|   computed: {
 | |
|     /*加载中状态*/
 | |
|     loadingType() {
 | |
|       if (this.loading) {
 | |
|         return 1;
 | |
|       } else {
 | |
|         if (this.listData.length != 0 && this.no_more) {
 | |
|           return 2;
 | |
|         } else {
 | |
|           return 0;
 | |
|         }
 | |
|       }
 | |
|     },
 | |
|     startDate() {
 | |
|       return this.getDate("start");
 | |
|     },
 | |
|     endDate() {
 | |
|       const date = new Date();
 | |
|       date.setDate(date.getDate() - 1); // 设置为昨天
 | |
|       return this.formatDate(date);
 | |
|     },
 | |
|   },
 | |
|   methods: {
 | |
|     getData() {
 | |
|       let self = this;
 | |
|       self.loading = true;
 | |
|       var formdata = self.form;
 | |
|       self._get(
 | |
|         "member/api/achieve/parent-frame-query",
 | |
|         formdata,
 | |
|         function (res) {
 | |
|           self.listData = res.rows;
 | |
|           self.total = res.total;
 | |
|           if (self.total < self.form.pageNum * self.form.pageSize) {
 | |
|             self.no_more = true;
 | |
|           }
 | |
|         },
 | |
|         {},
 | |
|         () => {
 | |
|           self.loading = false;
 | |
|         }
 | |
|       );
 | |
|     },
 | |
|     closePop() {
 | |
|       this.showPop = false;
 | |
|     },
 | |
|     openPop() {
 | |
|       this.showPop = true;
 | |
|     },
 | |
|     getDate(type) {
 | |
|       const date = new Date();
 | |
|       let year = date.getFullYear();
 | |
|       let month = date.getMonth() + 1;
 | |
|       let day = date.getDate();
 | |
| 
 | |
|       if (type === "start") {
 | |
|         year = year - 60;
 | |
|       }
 | |
|       month = month > 9 ? month : "0" + month;
 | |
|       day = day > 9 ? day : "0" + day;
 | |
|       return `${year}-${month}-${day}`;
 | |
|     },
 | |
|     formatDate(date) {
 | |
|       let year = date.getFullYear();
 | |
|       let month = date.getMonth() + 1;
 | |
|       let day = date.getDate();
 | |
| 
 | |
|       month = month > 9 ? month : "0" + month;
 | |
|       day = day > 9 ? day : "0" + day;
 | |
|       return `${year}-${month}-${day}`;
 | |
|     },
 | |
|     bindDateChange1: function (e) {
 | |
|       this.form.startDate = e.detail.value;
 | |
|     },
 | |
|     bindDateChange2: function (e) {
 | |
|       this.form.endDate = e.detail.value;
 | |
|     },
 | |
|     bindStatus: function (e) {
 | |
|       console.log(e);
 | |
|       this.form.pkBonusItems = e.pkId;
 | |
|       // console.log(e);
 | |
|     },
 | |
|     resetSubmit: function () {
 | |
|       this.form.memberCode = "";
 | |
|       this.form.startDate = "";
 | |
|       this.form.endDate = "";
 | |
|     },
 | |
|     searchSubmit: function () {
 | |
|       this.showPop = false;
 | |
|       /*获取数据*/
 | |
|       this.listData = [];
 | |
|       this.form.pageNum = 1;
 | |
|       this.getData();
 | |
|     },
 | |
|     searchName: function () {
 | |
|       /*获取数据*/
 | |
|       this.listData = [];
 | |
|       this.form.pageNum = 1;
 | |
|       this.getData();
 | |
|     },
 | |
|   },
 | |
| };
 | |
| </script>
 | |
| 
 | |
| <style lang="scss">
 | |
| .top-box {
 | |
|   width: 750rpx;
 | |
|   padding: 0 30rpx 0 23rpx;
 | |
|   box-sizing: border-box;
 | |
|   height: 102rpx;
 | |
|   background: #ffffff;
 | |
|   display: flex;
 | |
|   justify-content: center;
 | |
|   align-items: center;
 | |
|   border-bottom: 1rpx solid #eee;
 | |
|   margin-bottom: 24rpx;
 | |
| }
 | |
| 
 | |
| .search-box {
 | |
|   flex: 1;
 | |
|   height: 65rpx;
 | |
|   background: #f5f6f8;
 | |
|   border-radius: 33rpx;
 | |
|   padding: 0 52rpx;
 | |
|   box-sizing: border-box;
 | |
|   display: flex;
 | |
|   justify-content: center;
 | |
|   align-items: center;
 | |
| 
 | |
|   .search-input {
 | |
|     font-size: 26rpx;
 | |
|     color: #333;
 | |
|     margin-left: 14rpx;
 | |
|     flex: 1;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .bonus-item {
 | |
|   padding: 20rpx 25rpx 20rpx 23rpx;
 | |
|   background-color: #fff;
 | |
|   margin-bottom: 20rpx;
 | |
|   .bonus-bottom {
 | |
|     height: 104rpx;
 | |
| 
 | |
|     .order-btn {
 | |
|       box-sizing: border-box;
 | |
|       padding: 0 26rpx;
 | |
|       min-width: 146rpx;
 | |
|       height: 52rpx;
 | |
|       line-height: 52rpx;
 | |
|       text-align: center;
 | |
|       border-radius: 26rpx;
 | |
|       font-size: 24rpx;
 | |
|       color: #fff;
 | |
|       border: 1rpx solid #eee;
 | |
|       margin-left: 18rpx;
 | |
|       background: #fb3024;
 | |
|       border: 1rpx solid #fb3024;
 | |
|       flex-shrink: 0;
 | |
|       display: flex;
 | |
|       justify-content: center;
 | |
|       align-items: center;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| 
 | |
| .bonus-item-item {
 | |
|   display: flex;
 | |
|   justify-content: space-between;
 | |
|   align-items: center;
 | |
|   margin-bottom: 20rpx;
 | |
| }
 | |
| </style>
 |