qiubinghui
/
zhywpt-sp
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
920 Révisions
4 Branches
Aborescence: d9cd4e3293
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'd9cd4e3293'
${ noResults }
zhywpt-sp/subpackage/service/equity/equity.vue

equity.vue 17KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450 
  1. <template>

  2. 	<view class="container" style="background-color:#F4F6FA;">

  3. 		<image style="width: 100%;" mode="widthFix"

  4. 			src="https://qtzl.etcjz.cn/default-bucket/20240322/7380a0422a1e49fdb2fefc9d_beijing.png"></image>

  5. 

  6. 		<view style="position: absolute;width: 100%;top: 30%;">

  7. 			<view class="top"

  8. 				style="display: flex;flex-direction: column; justify-content: center;padding: 20px 40px;background-color: rgb(246, 246, 250);">

  9. 

  10. 				<view style="margin-bottom: 20px;font-size: 38rpx; text-align: center;font-family: Microsoft Yahei;">

  11. 					我的权益</view>

  12. 				<!-- <view v-if="exchangeCodes.length > 0" style="text-align: center;">暂无权益内容</view> @scrolltolower="loadMore" -->

  13. 				<scroll-view scroll-y="true">

  14. 

  15. 					<view v-for="(item, index) in exchangeCodes" :key="index" class="item" @click.stop="click(item)">

  16. 						<view style="display: flex;flex-direction: column;flex: 1;margin: 10px;">

  17. 							<view style="display: flex;flex-direction: column;">

  18. 

  19. 								<text style="margin-top: 10rpx;">车牌号：{{item.vehiclePlate}}</text>

  20. 

  21. 								<text v-if="item.drawTime" style="margin-top: 10rpx;">领取时间：{{item.drawTime}}</text>

  22. 								<text style="margin-top: 10rpx;">领取时间：{{item.getStatus}}</text>

  23. 								<text style="margin-top: 10rpx;">有效期：{{ item.periodOfValidity }}</text>

  24. 								<view

  25. 									style="display: flex;justify-content: flex-start;flex-direction: row;width: 100%;margin-top: 10rpx;">

  26. 									<text v-if="item.redeemCodeStr" class="code">券码：{{ item.redeemCodeStr}}</text>

  27. 								</view>

  28. 							</view>

  29. 							<view v-for="(list, index) in item.equityInfoItems">

  30. 								<view v-if="list.equityType == 'COUPONS'">

  31. 									<div class="horizontal-line"></div>

  32. 									<view style="display: flex;flex-direction: column;">

  33. 										<text style="width: 100%;">权益名称：{{list.productName}}</text>

  34. 										<view

  35. 											style="display: flex;flex-direction: row;min-height: 60rpx;justify-content: space-between;text-align: baseline;">

  36. 											<text class="text-w" style="flex: 1;margin-top: 5rpx;"

  37. 												:style="functBackName(list) == 'WAIT_ACTIVATED' ? 'color: #023F8F;' : functBackName(list) == 'WAIT_USE' ? 'color: orange;' : functBackName(list) == 'USED' ? 'color: green;' : 'color: gray;'">卡卷状态：{{functBackName(list) == 'WAIT_ACTIVATED' ? '待激活' : functBackName(list) == 'WAIT_USE' ? '待领取' : functBackName(list) ==  'USED' ? '已领取' : '已失效'}}</text>

  38. 											<button

  39. 												v-if="functBackName(list) != 'EXPIRED' && list && list.equityType !='ZFB'"

  40. 												:style="functBackName(list) == 'WAIT_ACTIVATED' ? 'background-color: #023F8F;' : functBackName(list) == 'WAIT_USE' ? 'background-color: orange;' : functBackName(list) == 'USED' ? 'background-color: green;' : 'background-color: gray;'"

  41. 												class="copy-btn" data-code="{{item}}"

  42. 												@click.stop="copyCode(list,functBackName(list),item)">

  43. 												{{functBackName(list) == 'WAIT_ACTIVATED' ? '去激活' : functBackName(list) == 'WAIT_USE' ? '立即领取' : 

  44. 												        functBackName(list) == 'USED' ? '复制' : '已失效'}}</button>

  45. 										</view>

  46. 									</view>

  47. 								</view>

  48. 								<view v-if="list.equityType == 'ZFB'">

  49. 									<div class="horizontal-line"></div>

  50. 									<view style="display: flex;flex-direction: column;">

  51. 										<text style="width: 100%;">权益名称：{{list.productName}}</text>

  52. 										<view

  53. 											style="display: flex;flex-direction: row;min-height: 60rpx;justify-content: space-between;text-align: baseline;">

  54. 											<text class="text-w" style="flex: 1;margin-top: 5rpx;color: #4caf50;">

  55. 												卡卷状态：正常

  56. 											</text>

  57. 											<button style="background-color: #4caf50;" class="copy-btn"

  58. 												data-code="{{item}}" @click.stop="copyCode(list,'EXPIRED',null)">

  59. 												去使用

  60. 											</button>

  61. 										</view>

  62. 									</view>

  63. 								</view>

  64. 							</view>

  65. 						</view>

  66. 					</view>

  67. 

  68. 					<view v-for="(item, index) in alonePurchaseData" :key="index" class="item"

  69. 						@click.stop="click(item)">

  70. 						<view style="display: flex;flex-direction: column;flex: 1;margin: 10px;">

  71. 							<view style="display: flex;flex-direction: column;">

  72. 

  73. 								<!-- <text style="margin-top: 10rpx;">车牌号：{{item.vehiclePlate}}</text> -->

  74. 

  75. 								<text v-if="item.drawTime" style="margin-top: 10rpx;">领取时间：{{item.drawTime}}</text>

  76. 								<text style="margin-top: 10rpx;">领取时间：{{item.getStatus}}</text>

  77. 								<text style="margin-top: 10rpx;">有效期：{{ item.periodOfValidity }}</text>

  78. 								<view

  79. 									style="display: flex;justify-content: flex-start;flex-direction: row;width: 100%;margin-top: 10rpx;">

  80. 									<text v-if="item.redeemCodeStr" class="code">券码：{{ item.redeemCodeStr}}</text>

  81. 								</view>

  82. 							</view>

  83. 							<view>

  84. 								<view v-if="item.equityType == 'COUPONS'">

  85. 									<div class="horizontal-line"></div>

  86. 									<view style="display: flex;flex-direction: column;">

  87. 										<text style="width: 100%;">权益名称：{{item.productName}}</text>

  88. 										<view

  89. 											style="display: flex;flex-direction: row;min-height: 60rpx;justify-content: space-between;text-align: baseline;">

  90. 											<text class="text-w" style="flex: 1;margin-top: 5rpx;"

  91. 												:style="functBackName(item) == 'WAIT_ACTIVATED' ? 'color: #023F8F;' : functBackName(item) == 'WAIT_USE' ? 'color: orange;' : functBackName(item) == 'USED' ? 'color: green;' : 'color: gray;'">卡卷状态：{{functBackName(item) == 'WAIT_ACTIVATED' ? '待激活' : functBackName(item) == 'WAIT_USE' ? '待领取' : functBackName(item) ==  'USED' ? '已领取' : '已失效'}}</text>

  92. 											<button

  93. 												v-if="functBackName(item) != 'EXPIRED' && item && item.equityType !='ZFB'"

  94. 												:style="functBackName(item) == 'WAIT_ACTIVATED' ? 'background-color: #023F8F;' : functBackName(item) == 'WAIT_USE' ? 'background-color: orange;' : functBackName(item) == 'USED' ? 'background-color: green;' : 'background-color: gray;'"

  95. 												class="copy-btn" data-code="{{item}}"

  96. 												@click.stop="copyCode(item,functBackName(item),item['couponInfoItem'])">

  97. 												{{functBackName(item) == 'WAIT_ACTIVATED' ? '去激活' : functBackName(item) == 'WAIT_USE' ? '立即领取' : 

  98. 												        functBackName(item) == 'USED' ? '复制' : '已失效'}}</button>

  99. 										</view>

  100. 									</view>

  101. 								</view>

  102. 								<view v-if="item.equityType == 'ZFB'">

  103. 									<div class="horizontal-line"></div>

  104. 									<view style="display: flex;flex-direction: column;">

  105. 										<text style="width: 100%;">权益名称：{{item.productName}}</text>

  106. 										<view

  107. 											style="display: flex;flex-direction: row;min-height: 60rpx;justify-content: space-between;text-align: baseline;">

  108. 											<text class="text-w" style="flex: 1;margin-top: 5rpx;color: #4caf50;">

  109. 												卡卷状态：正常

  110. 											</text>

  111. 											<button style="background-color: #4caf50;" class="copy-btn"

  112. 												data-code="{{item}}"

  113. 												@click.stop="copyCode(item,'EXPIRED',item['couponInfoItem'])">

  114. 												去使用

  115. 											</button>

  116. 										</view>

  117. 									</view>

  118. 								</view>

  119. 							</view>

  120. 						</view>

  121. 					</view>

  122. 				</scroll-view>

  123. 			</view>

  124. 		</view>

  125. 		<!-- <view style="width: 100%; text-align: center;margin-top: 20rpx; ">暂无更多数据内容!</view> -->

  126. 	</view>

  127. </template>

  128. <script setup lang='ts'>

  129. 	import {

  130. 		ref

  131. 	} from 'vue';

  132. 	import {requestNew} from "@/utils/network/request.js";

  133. 	import {

  134. 		onLoad

  135. 	} from '@dcloudio/uni-app'

  136. 	import {

  137. 		getItem

  138. 	} from "@/utils/storage";

  139. 

  140. 	let singleEquityId = ref('')

  141. 	let couponAgencyType = ref('')

  142. 	let purchasedEquityId = ref('')

  143. 	let couponId = ref('')

  144. 	let exchangeCodes: any = ref([])

  145. 	let alonePurchaseData: any = ref([])

  146. 	let page = ref('')

  147. 	import {couponActivate,couponQuery} from "@/utils/network/api.js";

  148. 

  149. 	onLoad((options) => {

  150. 		couponId.value = options.couponId

  151. 		singleEquityId.value = options.singleEquityId

  152. 		couponAgencyType.value = options.couponAgencyType

  153. 		purchasedEquityId.value = options.purchasedEquityId

  154. 		loadExchangeCodes();

  155. 	})

  156. 

  157. 	function loadExchangeCodes() {

  158. 		//卡券渠道类型获取单项权益列表

  159. 		requestNew(couponQuery, {

  160. 			type: 2,

  161. 			data: {

  162. 				mobile: getItem('mobile') + "",

  163. 				loginSource: getItem("loginSource"),

  164. 				singleEquityId: singleEquityId.value,

  165. 				equityId: singleEquityId.value,

  166. 				couponAgencyType: couponAgencyType.value,

  167. 				couponId: couponId.value,

  168. 				purchasedEquityId:purchasedEquityId.value

  169. 			},

  170. 			method: "POST",

  171. 			showLoading: true,

  172. 		}).then((item) => {

  173. 			let res = item

  174. 			console.log("res===", res)

  175. 			let newCodes = res.data.orderItems;

  176. 			let alonePurchase = res.data.alonePurchase;

  177. 			if (newCodes) {

  178. 				console.log(res, '111=========', newCodes);

  179. 				let newCodesNew = []

  180. 				newCodes.forEach(item => {

  181. 					//1 不能领取  0 可以领取 1(不能领取原因 notUseCase)

  182. 					// item.equityInfoItems[0].equityType

  183. 					// WAIT_GET

  184. 					item.status =

  185. 						item.equityInfoItems[0].isUse == '0' && item.equityInfoItems[0].couponStatus ==

  186. 						'WAIT_GET' ? 'WAIT_USE' :

  187. 						item.equityInfoItems[0].isUse == '1' && item.equityInfoItems[0].couponStatus ==

  188. 						'WAIT_GET' ? 'WAIT_ACTIVATED' : item.equityInfoItems[0].couponStatus == 'USED' ?

  189. 						'USED' : '';

  190. 					//WAIT_ACTIVATED(待激活)  WAIT_USE(待领取使用)  USED(已使用)  EXPIRED(已过期)  OUINGSYNREE

  191. 					console.log(item.equityInfoItems[0].periodOfValidity,

  192. 						item.equityInfoItems[0].isUse, item.equityInfoItems[0].notUseCase,

  193. 						item.status, item.equityInfoItems[0].couponStatus, '=================',

  194. 						item.vehiclePlate);

  195. 					// functBackName(list) = item.equityInfoItems[0].couponStatus == 'WAIT_GET' ? 'WAIT_ACTIVATED' : item.equityInfoItems[0].couponStatus

  196. 					item.getStatus = getStatusValue(item.status)

  197. 					item.redeemCodeStr = item.equityInfoItems[0].couponInfoItem && desensitize(item

  198. 						.equityInfoItems[0].couponInfoItem.redeemCode)

  199. 					item.periodOfValidity = item.equityInfoItems[0].periodOfValidity ? item

  200. 						.equityInfoItems[0].periodOfValidity.split('T')[0] : '激活领取后展示'

  201. 					item.redeemCode = item.equityInfoItems[0].couponInfoItem && item

  202. 						.equityInfoItems[0].couponInfoItem.redeemCode

  203. 					item.drawTime = item.equityInfoItems[0].drawTime && item.equityInfoItems[0]

  204. 						.drawTime.split('T')[0]

  205. 					console.log("item", item.equityInfoItems)

  206. 					// 不展示付宝数据

  207. 					for (var k = 0; k < item.equityInfoItems.length; k++) {

  208. 						if (item.equityInfoItems[k]['equityType'] != "ZFB") {

  209. 							console.log("alonePurchase1111", alonePurchase)

  210. 							newCodesNew.push(item)

  211. 						}

  212. 					}

  213. 

  214. 				});

  215. 				exchangeCodes.value = newCodesNew

  216. 

  217. 				// 购买的权益产品展示

  218. 				console.log("exchangeCodes.value", exchangeCodes.value);

  219. 			}

  220. 			let newAlonePurchase = []

  221. 			if (alonePurchase) {

  222. 				console.log("alonePurchase", alonePurchase)

  223. 				alonePurchase.forEach(item => {

  224. 					console.log("index", item.equityType == "ZFB")

  225. 					//1 不能领取  0 可以领取 1(不能领取原因 notUseCase)

  226. 					// item.equityInfoItems[0].equityType

  227. 					// WAIT_GET

  228. 					item.status =item.isUse == 0 && item.couponStatus ==

  229. 						'WAIT_GET' ? 'WAIT_USE' :

  230. 						item.isUse == 1 && item.couponStatus ==

  231. 						'WAIT_GET' ? 'WAIT_ACTIVATED' : item.couponStatus == 'USED' ?

  232. 						'USED' : '';

  233. 					//WAIT_ACTIVATED(待激活)  WAIT_USE(待领取使用)  USED(已使用)  EXPIRED(已过期)  OUINGSYNREE

  234. 					console.log(item.periodOfValidity,

  235. 						item.isUse, item.notUseCase,

  236. 						item.status, item.couponStatus, '=================',

  237. 						item.vehiclePlate);

  238. 					item.getStatus = getStatusValue(item.status)

  239. 					item.redeemCodeStr = item.couponInfoItem && desensitize(item

  240. 						.couponInfoItem.redeemCode)

  241. 					item.periodOfValidity = item.periodOfValidity ? item

  242. 						.periodOfValidity.split('T')[0] : '激活领取后展示'

  243. 					item.redeemCode = item.couponInfoItem && item

  244. 						.couponInfoItem.redeemCode

  245. 					item.drawTime = item.drawTime && item

  246. 						.drawTime.split('T')[0]

  247. 					// 不展示付宝数据

  248. 					if (item.equityType != "ZFB") {

  249. 						console.log("alonePurchase1111", alonePurchase)

  250. 						newAlonePurchase.push(item)

  251. 					}

  252. 				});

  253. 

  254. 				alonePurchaseData.value = newAlonePurchase

  255. 			}

  256. 		})

  257. 	}

  258. 

  259. 	function click(item) {

  260. 		// console.log("item.equityInfoItems[0].equityType", item.equityInfoItems[0].equityType)

  261. 		// if (item.equityInfoItems[0].equityType == 'ZFB') {

  262. 		// 	console.log("1")

  263. 		// 	uni.navigateTo({

  264. 		// 		url: `/subpackage/service/zfbqy/zfbqy`

  265. 		// 	})

  266. 		// } else {

  267. 		// 	console.log("2")

  268. 		// 	uni.navigateTo({

  269. 		// 		url: '/subpackage/service/equityInfo/equityInfo?singleEquityId=' + singleEquityId.value +

  270. 		// 			"&couponAgencyType=" + couponAgencyType.value + "&couponId=" + couponId.value,

  271. 		// 	})

  272. 		// } 

  273.         console.log("item",item)

  274. 		uni.navigateTo({

  275. 			url: '/subpackage/service/equityInfo/equityInfo?singleEquityId=' + item.singleEquityId +

  276. 				"&couponAgencyType=" + couponAgencyType.value + "&couponId=" + item.couponId,

  277. 		})

  278. 	}

  279. 

  280. 	function functBackName(item) {

  281. 		return item.isUse == '0' && item.couponStatus == 'WAIT_GET' ? 'WAIT_USE' :

  282. 			item.isUse == '1' && item.couponStatus == 'WAIT_GET' ? 'WAIT_ACTIVATED' : item.couponStatus == 'USED' ?

  283. 			'USED' : '';

  284. 	}

  285. 

  286. 	function copyCode(e, start, items) {

  287. 		console.log("e====",e,start,items)

  288. 		let item = e;

  289. 		// // 复制兑换码到剪贴板 

  290. 		if (item.equityType == 'ZFB') {

  291. 			uni.navigateTo({

  292. 				url: `/subpackage/service/zfbqy/zfbqy`

  293. 			})

  294. 			return

  295. 		}else{

  296. 			let code = e.redeemCode ? e.redeemCode : items.redeemCode;

  297. 			console.log(item, "===e===", e.equityType, items, start);

  298. 			if (start == 'WAIT_ACTIVATED') { //待激活

  299. 				uni.showModal({

  300. 					title: '温馨提示',

  301. 					content: "激活后，可领取卡卷",

  302. 					confirmText: "去激活",

  303. 					success: function(res) {

  304. 						if (res.confirm) {

  305. 							uni.navigateTo({

  306. 								url: '/subpackage/personal-center/install-activation-order',

  307. 							})

  308. 						} else if (res.cancel) {

  309. 							console.log('用户点击取消');

  310. 						}

  311. 					}

  312. 				});

  313. 			} else if (start == 'WAIT_USE') { //待领取使用

  314. 				uni.showModal({

  315. 					title: '温馨提示',

  316. 					content: "请在领取后120天内使用，超期失效",

  317. 					success: function(res) {

  318. 						if (res.confirm) {

  319. 							requestNew(couponActivate, {

  320. 								type: 2,

  321. 								data: {

  322. 									mobile: getItem('mobile') + "",

  323. 									notificationType: 'USE',

  324. 									cardIds: [items.id],

  325. 									couponId: couponId.value,

  326. 									equityId: item.singleEquityId,

  327. 									orderId: items.orderId ? items.orderId : items.purchasedEquityId

  328. 								},

  329. 								method: "POST",

  330. 								showLoading: true,

  331. 							}).then((item) => {

  332. 								// uni.setClipboardData({

  333. 								// 	data: code,

  334. 								// 	success: function() {

  335. 								// 		uni.showToast({

  336. 								// 			title: '已复制兑换码',

  337. 								// 			icon: 'success',

  338. 								// 		});

  339. 								// 	},

  340. 								// });

  341. 								loadExchangeCodes();

  342. 								uni.showToast({

  343. 									title: '领取成功',

  344. 									icon: 'success',

  345. 								});

  346. 								// uni.navigateBack();

  347. 							})

  348. 						} else if (res.cancel) {

  349. 							console.log('用户点击取消');

  350. 						}

  351. 					}

  352. 				});

  353. 				// 已使用 USED  

  354. 				// 已过期 EXPIRED 

  355. 			} else if (start == 'USED') { //已使用

  356. 				console.log("已复制兑换码1111", code)

  357. 				uni.setClipboardData({

  358. 					data: code,

  359. 					success: function() {

  360. 						console.log("已复制兑换码")

  361. 						uni.showToast({

  362. 							title: '已复制兑换码',

  363. 							icon: 'success',

  364. 						});

  365. 					},

  366. 				});

  367. 			} else if (start == 'EXPIRED') { //已过期

  368. 			

  369. 			}

  370. 		}

  371. 		

  372. 	}

  373. 

  374. 	function desensitize(str) {

  375. 		if (typeof str !== 'string') return str;

  376. 		if (str.length <= 6) return str;

  377. 		return '*'.repeat(str.length - 4) + str.slice(-4);

  378. 	}

  379. 

  380. 	function getStatusValue(key) {

  381. 		const statusMap = {

  382. 			WAIT_GET: "待领取",

  383. 			WAIT_ACTIVATED: "待激活",

  384. 			WAIT_USE: "待使用",

  385. 			USED: "已使用",

  386. 			EXPIRED: "已过期"

  387. 		};

  388. 		// 定义状态对象

  389. 		return statusMap[key] || "状态未知";

  390. 	}

  391. </script>

  392. <style lang='scss' scoped>

  393. 	.container {

  394. 		width: 100%;

  395. 		height: 96vh;

  396. 	}

  397. 

  398. 	.item {

  399. 		display: flex;

  400. 		margin-top: 10px;

  401. 		width: 100%;

  402. 		align-items: center;

  403. 		justify-content: space-around;

  404. 		background-color: white;

  405. 		/* 淡灰色，透明度为 50% */

  406. 		border-bottom: 1rpx solid #e0e0e0;

  407. 		border-radius: 8px;

  408. 		font-size: 14px;

  409. 	}

  410. 

  411. 	.code {

  412. 		flex: 1;

  413. 		height: 100%;

  414. 		color: #333;

  415. 	}

  416. 

  417. 	.copy-btn {

  418. 		background-color: #4caf50;

  419. 		color: #fff;

  420. 		border: none;

  421. 		min-width: 120rpx;

  422. 		border-radius: 10rpx;

  423. 		font-size: 24rpx;

  424. 		height: 60rpx;

  425. 		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);

  426. 		text-align: center;

  427. 		display: inline-block;

  428. 		line-height: 60rpx;

  429. 	}

  430. 

  431. 	.copy-btn:hover {

  432. 		background-color: #388e3c;

  433. 	}

  434. 

  435. 

  436. 	.text-w {

  437. 		font-weight: bold;

  438. 	}

  439. 

  440. 	.horizontal-line {

  441. 		width: 100%;

  442. 		/* 设置横线的宽度 */

  443. 		height: 1px;

  444. 		/* 设置横线的高度 */

  445. 		background-color: #9ACDFA;

  446. 		/* 设置横线的颜色 */

  447. 		margin: 10px 0;

  448. 		/* 可以根据需要调整横线与周围内容的间距 */

  449. 	}

  450. </style>