oil-station/gasStation-uni/pagesHome/giftExchange/index.vue

<template>
	<view class="content">
		<view class="container">
			<view class="box-hang">
				<view class=""><span style="color: red;">*</span>卡类型</view>
				<view style="color: #333333;">
					<text>储值卡</text>
				</view>
			</view>
			<view style="margin: 10px 10px;font-size: 16px;font-weight: bold;">礼品卡信息</view>
			<view class="box-hang">
				<view class=""><span style="color: red;">*</span>卡号</view>
				<view class="dis">
					<input v-model="queryParam.number" style="text-align: right;" placeholder="请输入"></input>
				</view>
			</view>
			<view class="box-hang">
				<view class=""><span style="color: red;">*</span>卡密码</view>
				<view class="dis">
					<input v-model="queryParam.cardPassword" style="text-align: right;" placeholder="请输入"></input>
				</view>
			</view>
			<view class="box-hang">
				<view class=""><span style="color: red;">*</span>礼品卡金额</view>
				<view class="dis">
					{{giftAmount}}
				</view>
			</view>

			<!-- <view class="but-sub" @click="show=!show">兑换</view> -->
			<view class="but-sub" @click="goExchange">兑换</view>

			<u-modal :show="show" :title="title" :content='content' :showCancelButton='true' @confirm="confirm"
				@cancel="cancel" confirmColor="#FA6400"></u-modal>
		</view>

	</view>
</template>

<script>
	import request from '../../utils/request';
	export default {
		data() {
			return {
				title: '',
				List: [],
				pageNo: 1,
				pageSize: 10,
				totalPage: '',
				value: "",
				show: false,
				title: "温馨提示",
				content: '礼品卡已兑换成功，请在礼品卡兑换记录中查看!',
				giftAmount: 0,
				queryParam: {
					number: '',
					cardPassword: '',
					storeId: '',
				}
			}
		},
		onLoad() {

		},
		onPullDownRefresh() {
			//下拉刷新

		},
		onReachBottom() {
			// 触底加载
			if (this.pageNo >= this.totalPage) {

			} else {
				this.pageNo++

			}
		},

		components: {

		},
		methods: {
			goExchange() {
				request({
					url: 'business/marketingActivity/cardGift/exchange',
					method: 'get',
					params: this.queryParam
				}).then(res => {
					console.log(res, 89)
					if (res.code == 200) {
						if(res.data.id){
							this.content = '礼品卡已兑换成功，请在礼品卡兑换记录中查看!'
						}else {
							this.content = '礼品卡兑换失败。'
						}
						
					} else {
						this.content = '礼品卡兑换失败。'
					}
					this.show = !this.show
				})
			},
			getGiftInfo() {
				this.queryParam.storeId = uni.getStorageSync('storeId')
				request({
					url: '/business/marketingActivity/cardGift/getCardAmount',
					method: 'get',
					params: this.queryParam
				}).then(res => {
					console.log(res, 89)
					if (res.code == 200) {
						this.giftAmount = res.data
					} else {
						this.giftAmount = 0
					}
				})
			},
			cancel() {
				this.show = false
				this.queryParam = {
					number: '',
					cardPassword: '',
					storeId: '',
				}
				this.giftAmount = 0
			},
			confirm() {
				this.show = false
				this.queryParam = {
					number: '',
					cardPassword: '',
					storeId: '',
				}
				this.giftAmount = 0
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f4f5f6;
	}

	.container {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 10px;
	}

	.my-header {
		width: 100%;
		height: 88px;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		box-sizing: border-box;
		padding: 0px 15px;
		padding-top: 40px;
		z-index: 99999;

		.my-icons {
			width: 20px;

		}

		position: fixed;
		top: 0px;
	}

	.box-hang {
		background-color: white;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px 15px;
		border-bottom: 1px solid #f4f5f6;
	}

	.dis {
		color: #999999;
	}

	.box-end {
		text-align: center;
		margin-top: 10px;
	}

	.but-sub {
		width: 305px;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
		background-color: #FF9655;
		color: white;
		border-radius: 50px;
		text-align: center;
		position: absolute;
		bottom: 40px;
		left: 11%;
	}
</style>