会员账户适配PC、手机

src/lang/en.js

@@ -231,6 +231,10 @@ export default {
     yes: 'YES',
     no: 'NO',
     view: 'View',
+    select: 'Select',
+    reset: 'Reset',
+    startDate: 'Start Date',
+    endDate: 'End Date',
   },
 
   shop: {

src/lang/zh.js

@@ -230,6 +230,10 @@ export default {
     yes: '是',
     no: '否',
     view: '查看',
+    select: '查询',
+    reset: '清空',
+    startDate: '开始时间',
+    endDate: '结束是时间',
   },
   shop: {
     productCode: '商品编号',

src/views/bonus/account-list.vue

@@ -15,47 +15,48 @@
 			</el-col>
 		</el-row>
 
-		<el-dialog :title="bonusFlowType" :visible.sync="dialog" width="80%">
+		<el-dialog :title="bonusFlowType" :visible.sync="dialog" width="80%" v-loading="loading">
 			<div class="app-container" style="margin-top: -40px;">
 				<div class="filter-container">
-					<el-row :gutter="40">
-						<el-col :xs="24" :sm="24" :lg="6">
-							<div class="grid-content bg-purple">
+					<el-row :gutter="20">
+						<el-col :xs="24" :sm="24" :lg="6" :span="6">
+							<el-date-picker
+								v-model="listQuery.createAt[0]"
+								type="date"
+								:placeholder="$t('common.startDate')"
+								value-format="yyyy-MM-dd"
+								clearable
+								style="width: 100%; margin: 10px 0;">
+							</el-date-picker>
+						</el-col>
+						<el-col :xs="24" :sm="24" :lg="6" :span="6">
 								<el-date-picker
-									size="small"
-									v-model="listQuery.createAt"
-									type="daterange"
-									range-separator="to"
-									start-placeholder="Date from"
-									end-placeholder="Date to"
+									v-model="listQuery.createAt[1]"
+									type="date"
+									:placeholder="$t('common.endDate')"
+									value-format="yyyy-MM-dd"
 									clearable
-								>
+									style="width: 100%; margin: 10px 0;">
 								</el-date-picker>
-							</div>
 						</el-col>
-						<el-col :xs="24" :sm="24" :lg="6">
-							<div class="grid-content bg-purple-light">
-								<el-select size="small" v-model="listQuery.dealType" :placeholder="$t('bonus.transType')" clearable class="filter-item">
+						<el-col :xs="24" :sm="24" :lg="6" :span="6">
+								<el-select size="small" v-model="listQuery.dealType" :placeholder="$t('bonus.transType')" clearable style="width: 100%; margin: 10px 0;">
 									<el-option v-for="(item, key) in dealTypeList" :label="item" :value="key" :key="key"></el-option>
 								</el-select>
-							</div>
 						</el-col>
-						<el-col :xs="24" :sm="24" :lg="6">
-							<div class="grid-content bg-purple">
-								<el-input size="small" v-model="listQuery.remark" :placeholder="$t('bonus.remark')" clearable></el-input>
-							</div>
+						<el-col :xs="24" :sm="24" :lg="6" :span="6">
+								<el-input size="small" v-model="listQuery.remark" :placeholder="$t('bonus.remark')" clearable  style="width: 100%; margin: 10px 0;"></el-input>
 						</el-col>
-						<el-col :xs="24" :sm="24" :lg="6">
-							<div class="grid-content bg-purple">
-								<el-button size="small" type="primary" @click="handleBonusFlow(listQuery.walletType, walletName)">Select</el-button>
-								<el-button size="small" type="warning" @click="handleFilterClear(listQuery.walletType, walletName)">Reset</el-button>
+						<el-col :xs="24" :sm="24" :lg="24" :span="24">
+							<div class="grid-content bg-purple" align="right">
+								<el-button size="small" type="primary" @click="handleBonusFlow(listQuery.walletType, walletName)">{{ $t('common.select') }}</el-button>
+								<el-button size="small" type="warning" @click="handleFilterClear(listQuery.walletType, walletName)">{{ $t('common.reset') }}</el-button>
 							</div>
 						</el-col>
 					</el-row>
 				</div>
 
 				<el-table
-					v-loading="loading"
 					:data="bonusData"
 					border
 					fit
@@ -63,41 +64,45 @@
 					style="width: 100%;"
 					:xs="24" :sm="24" :lg="6"
 				>
-					<el-table-column :label="$t('bonus.transTime')" align="center">
+					<el-table-column :label="$t('bonus.transTime')" align="center" min-width="140px">
 						<template slot-scope="{row}">
 							<span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
 						</template>
 					</el-table-column>
-					<el-table-column :label="$t('bonus.transType')" align="center">
+					<el-table-column :label="$t('bonus.transType')" align="center" min-width="150px" v-if="dealTypeSwitch">
 						<template slot-scope="{row}">
 							<span>{{ row.DEAL_TYPE_NAME }}</span>
 						</template>
 					</el-table-column>
-					<el-table-column :label="$t('bonus.preTransactionBalance')" align="center">
+					<el-table-column :label="$t('bonus.preTransactionBalance')" align="center" min-width="120px">
 						<template slot-scope="{row}">
 							<span>{{ tool.formatPrice(row.TOTAL - row.AMOUNT) }}</span>
 						</template>
 					</el-table-column>
-					<el-table-column :label="$t('bonus.transAmount')" align="center">
+					<el-table-column :label="$t('bonus.postTransactionBalance')" align="center" min-width="120px">
 						<template slot-scope="{row}">
-							<el-tag :type="row.IS_INCR > 0 ? 'danger' : 'info'" size="small" class="no-border">
-								<span class="text-danger">{{ row.IS_INCR > 0 ? '+' : '' }}  {{row.AMOUNT}}</span>
-							</el-tag>
+							<span>{{ row.AMOUNT }}</span>
 						</template>
 					</el-table-column>
-					<el-table-column :label="$t('bonus.postTransactionBalance')" align="center">
+					<el-table-column :label="$t('bonus.transAmount')" align="center" min-width="120px">
 						<template slot-scope="{row}">
-							<span>{{ row.AMOUNT }}</span>
+							<el-tag :type="row.IS_INCR > 0 ? 'danger' : 'info'" size="small" class="no-border">
+								<span class="text-danger">{{ row.IS_INCR > 0 ? '+' : '' }}  {{row.AMOUNT}}</span>
+							</el-tag>
 						</template>
 					</el-table-column>
-					<el-table-column :label="$t('bonus.remark')" align="center">
+					<el-table-column :label="$t('bonus.remark')" align="center" min-width="150px">
 						<template slot-scope="{row}">
 							<span>{{ row.REMARK }}</span>
 						</template>
 					</el-table-column>
 				</el-table>
 
-				<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="handleBonusFlow(listQuery.walletType, walletName)" />
+				<el-row :gutter="20">
+					<el-col :xs="24" :sm="24" :lg="24" :span="24">
+						<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="handleBonusFlow(listQuery.walletType, walletName)" />
+					</el-col>
+				</el-row>
 			</div>
 		</el-dialog>
 	</div>
@@ -117,6 +122,7 @@ export default {
 			loading: true,
 			walletData: [],
 			dealSwitch: 0,
+			dealTypeSwitch: true,
 
 			dialog: false,
 			bonusFlowType: '',
@@ -128,7 +134,7 @@ export default {
 				page: 1,
 				pageSize: 5,
 				walletType: '',
-				createAt: '',
+				createAt: [],
 				remark: '',
 				dealType: '',
 			},
@@ -155,12 +161,12 @@ export default {
 				this.bonusData = response.data.list
 				this.total = response.data.totalCount
 				this.dealTypeList = response.data.dealTypes
+				this.dealTypeSwitch = walletType !== 'cash'
 				this.dialog = true
 				this.loading = false
 			})
 		},
 		handleFilterClear(walletType, walletName){
-			console.log(walletType, walletName)
 			this.walletName = walletName
 			this.listQuery.page = 1
 			this.listQuery.pageSize = 5