Browse Source

对接口+画新页面

LiuShu_0203 1 week ago
parent
commit
e2e9784c77
5 changed files with 389 additions and 9 deletions
  1. 105 8
      my/exchange/shoppingMall.vue
  2. 222 0
      my/setting/LostandFound.vue
  3. 48 0
      my/setting/LostandFoundadd.vue
  4. 13 0
      pages.json
  5. 1 1
      pages/my/my.vue

+ 105 - 8
my/exchange/shoppingMall.vue

@@ -3,14 +3,14 @@
 		<view class="margin-top" style="padding: 0 30rpx;">
 			<view class="title">选择兑换平台</view>
 			<view class="flex" style="justify-content: space-between; margin: 20rpx 0;">
-				<view class="module" :class="{ selected: selectedModule === 'douyin' }" @click="selectModule('douyin')">
+				<view class="module" :class="{ selected: selectedModule === 1 }" @click="selectModule(1)">
 					<image v-if="globalImages" :src="globalImages + 'images/my/douyin.png'" style="width: 100rpx;height: 100rpx;" mode="">
 					</image>
 					<view style="font-size: 33rpx;margin-top: 20rpx;">抖音兑换码</view>
 					<view style="font-size: 23rpx; color: #999;margin-top: 10rpx;">输入抖音兑换码领取奖励</view>
 				</view>
-				<view class="module" :class="{ selected2: selectedModule === 'kuaishou' }"
-					@click="selectModule('kuaishou')">
+				<view class="module" :class="{ selected2: selectedModule === 2 }"
+					@click="selectModule(2)">
 					<image v-if="globalImages" :src="globalImages + 'images/my/kuaishou.png'" style="width: 100rpx;height: 100rpx;" mode="">
 					</image>
 					<view style="font-size: 33rpx;margin-top: 20rpx;">快手兑换码</view>
@@ -25,9 +25,9 @@
 			<view class="margin-top padding" style="background: #FFFFFF;border-radius: 20upx;">
 				<view class="flex"
 					style="margin: 20rpx 0; padding: 20rpx;border-radius: 11rpx; border: 1px #ccc solid;">
-					<input class="uni-input" style="width: 90%;" placeholder="请输入兑换码" />
+					<input class="uni-input" style="width: 90%;" placeholder="请输入兑换码" v-model="exchangeCode" />
 					<image v-if="globalImages" :src="globalImages + 'images/saoma.png'" style="width: 44rpx;height: 44rpx;margin-left: 15rpx;"
-						mode=""></image>
+						mode="" @click="scanQRCode"></image>
 				</view>
 			</view>
 			<view class="margin-top padding" style="background: #FFFFFF;border-radius: 20upx;">
@@ -56,7 +56,7 @@
 					<li class="notice-item">如有问题请联系客服 400 - 123 - 4567</li>
 				</ul>
 			</view>
-			<view class="login_btn">立即兑换</view>
+			<view class="login_btn" @click="handleRedeem">立即兑换</view>
 		</view>
 	</view>
 </template>
@@ -66,13 +66,110 @@
 	export default {
 		data() {
 			return {
-				selectedModule: 'douyin',
-				globalImages: ''
+				selectedModule: 1,
+				globalImages: '',
+				exchangeCode: '',      // 用于显示明文
+				encryptedCode: '',
+				isScanned: false       // 是否是扫码
 			}
 		},
 		methods: {
 			selectModule(module) {
 				this.selectedModule = module;
+			},
+			
+			// 扫码逻辑(获取密文 -> 调用解密接口 -> 设置明文)
+			scanQRCode() {
+			  uni.scanCode({
+				onlyFromCamera: false,
+				success: (res) => {
+				  this.encryptedCode = res.result;
+				  console.log('扫码密文:', this.encryptedCode);
+				  
+					if (!this.encryptedCode) {
+					  return uni.showToast({ title: '扫码结果无效', icon: 'none' });
+					}
+		  
+					// this.isScanned = true; // 标记为扫码获取
+					uni.showLoading({ title: '解密中...' });
+					
+					this.$Request.getT("/app/redeemCode/decryptAES?encryptedData=" + this.encryptedCode)
+					.then(res => {
+						uni.hideLoading();
+						if (res.code === 0 && res.data) {
+						  this.exchangeCode = res.data; // 解密成功,赋值明文
+						  this.isScanned = true;
+						} else {
+						  this.exchangeCode = '';
+						  this.isScanned = false;
+						  uni.showToast({ title: res.msg || '解密失败', icon: 'none' });
+						}
+					  })
+					  .catch(err => {
+						uni.hideLoading();
+						this.exchangeCode = '';
+						this.isScanned = false;
+						uni.showToast({ title: '解密接口异常', icon: 'none' });
+						console.error('解密错误:', err);
+					});
+				},
+				fail: (err) => {
+				  uni.showToast({ title: '扫码失败', icon: 'none' });
+				  console.error('扫码失败:', err);
+				}
+			  });
+			},
+		
+			// 点击“立即兑换”
+			handleRedeem() {
+			  if (!this.exchangeCode) {
+				return uni.showToast({ title: '请输入兑换码', icon: 'none' });
+			  }
+		
+			  uni.showLoading({ title: '兑换中...' });
+		
+			  // 如果是扫码(走解密流程后),调用正式兑换接口
+			  if (this.isScanned) {
+				this.$Request.getT("/app/redeemCode/useRedeemCode?platform=" + this.selectedModule + '&encryptedData=' + this.encryptedCode)
+				  .then(res => {
+				    uni.hideLoading();
+				    if (res.code === 0) {
+				      uni.showToast({ title: '兑换成功', icon: 'success' });
+				      this.resetFields();
+				    } else {
+				      uni.showToast({ title: res.msg || '兑换失败', icon: 'none' });
+				    }
+				  })
+				  .catch(err => {
+				    uni.hideLoading();
+				    uni.showToast({ title: '请求出错', icon: 'none' });
+				    console.error('兑换失败:', err);
+				  });
+			  } else {
+				// 手动输入走正常兑换
+				this.$Request.getT("/app/redeemCode/useRedeemCode?platform=" + this.selectedModule + '&cdk=' + this.exchangeCode)
+				  .then(res => {
+				    uni.hideLoading();
+				    if (res.code === 0) {
+				      uni.showToast({ title: '兑换成功', icon: 'success' });
+				      this.resetFields();
+				    } else {
+				      uni.showToast({ title: res.msg || '兑换失败', icon: 'none' });
+				    }
+				  })
+				  .catch(err => {
+				    uni.hideLoading();
+				    uni.showToast({ title: '请求出错', icon: 'none' });
+				    console.error('兑换失败:', err);
+				  });
+			  }
+			},
+		
+			// 重置表单
+			resetFields() {
+			  this.exchangeCode = '';
+			  this.encryptedCode = '';
+			  this.isScanned = false;
 			}
 		},
 		onLoad() {

+ 222 - 0
my/setting/LostandFound.vue

@@ -0,0 +1,222 @@
+<template>
+	<view class="lost-container">
+		<!-- 自定义导航栏 -->
+		<view class="custom-navbar">
+			<view class="nav-left">
+				<view class="back-btn" @click="goBack">‹</view>
+				<view class="title-box">
+					<view class="main-title">丢了东西</view>
+					<view class="sub-title">快速发布失物信息</view>
+				</view>
+			</view>
+			<view class="nav-right">
+				<!-- <image :src="globalImages + 'images/my/shiwu.png'" class="nav-icon" mode="aspectFit" /> -->
+			</view>
+		</view>
+
+		<view class="section-title">我丢失的物品</view>
+		<!-- 卡片列表 -->
+		<view class="card-list" style="padding: 0rpx 30rpx;">
+			<view class="card" v-for="(item, index) in lostItems" :key="index">
+				<image src="@/static/image/logo.png" class="item-img" mode="aspectFill" />
+				<view class="item-info">
+					<view class="flex" style="justify-content: space-between;">
+						<view class="item-title">{{ item.name }}</view>
+						<view class="status-tag" :class="'status-' + item.statusType">{{ item.statusText }}</view>
+					</view>
+					<view style="border-top: 1rpx solid #e4e7ed; margin-top: 10rpx;margin-bottom: 20rpx;"></view>
+					<view class="item-subtitle" style="margin-bottom: 10rpx;">丢失于:{{ item.carNumber }}</view>
+					<view class="item-time">{{ item.time }}</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 悬浮按钮 -->
+		<view class="float-button" @click="goNav('/my/setting/LostandFoundadd')">
+			<text class="plus">+</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				globalImages: getApp().globalData.globalImages || '', // 图片前缀路径
+				lostItems: [{
+						// img: 'https://example.com/img1.jpg',
+						name: '白色 · 蓝牙耳机',
+						statusText: '寻找中',
+						statusType: 'searching',
+						carNumber: '苏A111111',
+						time: '2036/09/10 22:24'
+					},
+					{
+						// img: 'https://example.com/img2.jpg',
+						name: '黑色 · 苹果手机',
+						statusText: '已找回',
+						statusType: 'found',
+						carNumber: '苏A111111',
+						time: '2036/09/10 22:24'
+					},
+					{
+						// img: 'https://example.com/img1.jpg',
+						name: '白色 · 蓝牙耳机',
+						statusText: '待领取',
+						statusType: 'pending',
+						carNumber: '苏A111111',
+						time: '2036/09/10 22:24'
+					}
+				]
+			};
+		},
+		methods: {
+			goNav(url) {
+				uni.navigateTo({
+					url
+				});
+			},
+			goBack() {
+				uni.navigateBack();
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.lost-container {
+		/* padding: 30rpx; */
+		background: #f8f8f8;
+		min-height: 100vh;
+		box-sizing: border-box;
+	}
+
+	.custom-navbar {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--status-bar-height, 30rpx) 30rpx 30rpx;
+		background: linear-gradient(to right, #ff7e5f, #feb47b);
+		/* 渐变背景 */
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
+		/* color: #fff; */
+		margin-bottom: 30rpx;
+	}
+
+	.nav-left {
+		/* display: flex; */
+		align-items: center;
+	}
+
+	.back-btn {
+		font-size: 40rpx;
+		margin-right: 20rpx;
+		margin-top: 40rpx;
+		padding-bottom: 40rpx;
+	}
+
+	.title-box {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.main-title {
+		font-size: 46rpx;
+		font-weight: bold;
+	}
+
+	.sub-title {
+		font-size: 34rpx;
+		/* color: #f0f0f0; */
+		margin-top: 6rpx;
+	}
+
+	.nav-icon {
+		width: 80rpx;
+		height: 80rpx;
+	}
+
+
+	/* 卡片列表 */
+	
+	.section-title {
+		padding: 0 30rpx;
+		margin-bottom: 20rpx;
+	}
+	.card-list {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+
+	.card {
+		width: 47%;
+		background: #fff;
+		border-radius: 16rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+		margin-bottom: 30rpx;
+		overflow: hidden;
+	}
+
+	.item-img {
+		width: 100%;
+		height: 280rpx;
+		object-fit: cover;
+	}
+
+	.item-info {
+		padding: 20rpx;
+	}
+
+	.item-title {
+		font-size: 28rpx;
+		font-weight: 500;
+		margin-bottom: 8rpx;
+	}
+
+	.status-tag {
+		display: inline-block;
+		padding: 4rpx 12rpx;
+		font-size: 20rpx;
+		border-radius: 20rpx;
+		margin-bottom: 12rpx;
+	}
+
+	.status-searching {
+		background: #ffe5e5;
+		color: #ff4b4b;
+	}
+
+	.status-found {
+		background: #e1f8f0;
+		color: #27c29b;
+	}
+
+	.status-pending {
+		background: #fff1e0;
+		color: #ffa03b;
+	}
+
+	.item-subtitle,
+	.item-time {
+		font-size: 24rpx;
+		color: #999;
+	}
+
+	/* 悬浮按钮 */
+	.float-button {
+		position: fixed;
+		bottom: 60rpx;
+		right: 60rpx;
+		width: 60rpx;
+		height: 60rpx;
+		background: #fe6b01;
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: #fff;
+		font-size: 50rpx;
+		z-index: 99;
+	}
+</style>

+ 48 - 0
my/setting/LostandFoundadd.vue

@@ -0,0 +1,48 @@
+<template>
+	<view class="padding">
+		<u-form labelPosition="top" :model="model1" :rules="rules" ref="uForm">
+			<u-form-item label="订单号码" prop="userInfo.name" borderBottom ref="item1">
+				<u-input v-model="model1.userInfo.name" border="none"></u-input>
+			</u-form-item>
+			<u-form-item label="联系人" prop="userInfo.name" borderBottom ref="item1">
+				<u-input v-model="model1.userInfo.name" border="none"></u-input>
+			</u-form-item>
+			<u-form-item label="联系方式" prop="userInfo.name" borderBottom ref="item1">
+				<u-input v-model="model1.userInfo.name" border="none"></u-input>
+			</u-form-item>
+			<u-form-item label="其他信息" prop="userInfo.other" borderBottom>
+				<u-input v-model="model1.userInfo.name" border="none"></u-input>
+			 <!-- <u-textarea 
+			    v-model="model1.userInfo.other" 
+			    placeholder="简要描述物品其他信息" 
+			    border="none"
+			  /> -->
+			</u-form-item>
+			<u-button @click="submit">提交</u-button>
+		</u-form>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				model1: {
+					userInfo: {
+						name: '',
+						sex: '',
+						other: ''
+					},
+				},
+			}
+		},
+		methods: {
+				
+			submit() {
+			}
+		}
+	}
+</script>
+
+<style scoped>
+</style>

+ 13 - 0
pages.json

@@ -328,6 +328,19 @@
 				"navigationBarTitleText": "登录",
 				"enablePullDownRefresh": false
 			}
+		}, {
+			"path": "setting/LostandFound",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": false
+			}
+		}, {
+			"path": "setting/LostandFoundadd",
+			"style": {
+				"navigationBarTitleText": "发布丢失物品信息",
+				"enablePullDownRefresh": false
+			}
 		}, {
 			"path": "setting/login",
 			"style": {

+ 1 - 1
pages/my/my.vue

@@ -175,7 +175,7 @@
 						<view class="text-sm">紧急联系人</view>
 						<!-- <view class="weinumber" v-if="order&&order.jxzOrders">{{order.jxzOrders}}</view> -->
 					</view>
-					<view class="text-center margin-tb-sm"  style="width: 25%;">
+					<view class="text-center margin-tb-sm"  style="width: 25%;" @click="goNav('/my/setting/LostandFound')">
 						<image v-if="globalImages" :src="globalImages + 'images/my/shiwu.png'" style="width: 56rpx;height: 56rpx;" mode=""></image>
 						<view class="text-sm">失物招领</view>
 						<!-- <view class="weinumber" v-if="order&&order.dzfOrders">{{order.dzfOrders}}</view> -->