h5-uniapp/pages/index/fastRecord.vue

<template>
	<view>
		<z-paging :language="$i18n.locale" ref="paging" v-model="list" @query="queryList" :pageSize="20"
			:style="'background-color: '+theme.bg+';color: '+theme.text">
			<!-- 下拉刷新 -->
			<custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus">
			</custom-refresher>
			<myNav slot="top" :title="i18n.fastRecord.title"></myNav>
			<!-- 身体 -->
			<view class="width-750 padding-w-30 padding-b-40 padding-t-16">
				<!-- 单一列表 -->
				<view v-for="(item,index) in list" class="listbox" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
					<view class="height-74 flex align-center">
						<view class="flex-1 height-74 flex align-center font-24">
							<text>{{i18n.fastRecord.text1}}：</text>
							<text class="numbold-font">{{item.createtime}}</text>
						</view>
						<text class="font-28"
							:class="item.type==1?'color-00C481':'color-FF4040'">{{item.type==1?i18n.fastRecord.text2:i18n.fastRecord.text3}}</text>
					</view>
					<view class="height-1 width-100b" style="background: rgba(191,195,199,0.3);"></view>
					<view class="height-105 flex">
						<view class="height-105 flex-1 flex direction-column padding-c-16 justify-between">
							<text class="font-24 color-C3C3C3">{{i18n.fastRecord.text4}}</text>
							<text class="font-24 numbold-font">{{item.price}}</text>
						</view>
						<view class="height-105 flex-1 flex direction-column align-center padding-c-16 justify-between">
							<text class="font-24 color-C3C3C3">{{i18n.fastRecord.text5}}({{item.curr_name}})</text>
							<text class="font-24 numbold-font">{{(item.num)}}</text>
						</view>
						<view class="height-105 flex-1 flex direction-column align-end padding-c-16 justify-between">
							<text class="font-24 color-C3C3C3">{{i18n.fastRecord.text6}}({{item.curr_name}})</text>
							<text class="font-24 numbold-font">{{item.residue_num}}</text>
						</view>
					</view>
					<view class="height-105 flex">
						<view class="height-105 flex-1 flex direction-column padding-c-16 justify-between">
							<text
								class="font-24 color-C3C3C3">{{item.type==1?i18n.fastRecord.text7:i18n.fastRecord.text8}}</text>
							<text
								class="font-24 numbold-font">{{item.payment==1?i18n.fastRecord.text9:''}}</text>
						</view>
						<view class="height-105 flex-1 flex direction-column align-center padding-c-16 justify-between">
							<text class="font-24 color-C3C3C3">{{i18n.fastRecord.text10}}</text>
							<text class="font-24 color-0165EE">{{statusText[item.status]}}</text>
						</view>
						<view v-if="item.status==1"
							class="height-105 flex-1 flex direction-column align-end padding-c-16 justify-center">
							<view @click="show=true,id=item.id,paypwd=''"
								class="width-138 height-56 bj-0165EE radiu-10 line-height-56 text-center">
								<text class="font-28 color-white">{{i18n.fastRecord.text11}}</text>
							</view>
						</view>
						<view v-else class="flex-1"></view>
					</view>
				</view>
			</view>

		</z-paging>

		<!-- 撤销弹窗 -->
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="width-600 height-342" style="overflow: hidden;"
			:style="'background-color: '+theme.bg+';color: '+theme.text">
				<view class="height-110 flex align-center justify-center">
					<text class="font-30 color-FF4040 weight-bold">{{i18n.fastRecord.text12}}</text>
				</view>
				<input class="input" :style="'background-color: '+theme.fu_bg"
				type="text" v-model="paypwd" :placeholder="i18n.fastRecord.tos1" password />
				<view class="height-98 flex margin-t-60">
					<view @click="show=false" class="flex-1 line-height-96 text-center bj-c3c3c3-02">
						<text class="font-28 color-C3C3C3 weight-bold">{{i18n.fastRecord.text13}}</text>
					</view>
					<view @click="getwithdraw" class="flex-1 line-height-96 text-center bj-0165EE">
						<text class="font-28 color-white weight-bold">{{i18n.fastRecord.text14}}</text>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [],
				page: 1,
				state: 'more',
				flag: true,
				id: '',
				paypwd: '',
				statusText: ['', '', '', '', ''],
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.changestatus()
		},
		methods: {
			changestatus() {
				this.statusText[1] = this.i18n.fastRecord.text15
				this.statusText[2] = this.i18n.fastRecord.text16
				this.statusText[3] = this.i18n.fastRecord.text17
				this.statusText[4] = this.i18n.fastRecord.text18
			},
			// 撤销挂单
			getwithdraw() {
				if (!this.flag) {
					return
				} else {
					if (this.paypwd == '') return this.tos(this.i18n.fastRecord.tos1)
					uni.showLoading({
						title: '',
						mask: true
					})
					this.flag = false
					let obj = {
						id: this.id,
						pay_pwd: this.paypwd
					}
					this.post('/marketotc/order_withdraw', obj).then(res => {
						this.flag = true
						console.log('撤销返回', res)
						if (res.code == 1) {
							this.show = false
							uni.hideLoading()
							this.tos(res.msg)
							this.queryList(1, 20)
						}
					})
				}
			},
			queryList(pageNo, pageSize) {
					this.post('/marketotc/my_fb_list', {
						page: pageNo,
						page_num: pageSize
					}).then(res => {
						if (res.code == 1) {
							console.log(res)
							this.$refs.paging.complete(res.data.data);
						}
					})
			},
		}
	}
</script>

<style lang="scss">
	.listbox {
		width: 690rpx;
		height: 285rpx;
		// background: #FFFFFF;
		opacity: 1;
		border-radius: 10rpx;
		margin-bottom: 8rpx;
		padding: 0 22rpx;
	}

	.bj-c3c3c3-02 {
		background: rgba(195, 195, 195, 0.2);
	}

	.input {
		width: 540rpx;
		height: 76rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		// background: #F6F8FC;
		font-size: 28rpx;
		// color: #8B99A2;
		padding: 0 24rpx;
	}
</style>