Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

interestsList.vue 9.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  1. s<template>
  2. <view class="content">
  3. <view class="item" v-for="(item,index) in state.list" :key='index'>
  4. <view class="title">
  5. <view>
  6. <view v-if='item.children' style="display: inline-block;">
  7. <image :class="item.isShow?'imageChange':'imageDefault'" @click="changeIsShow(index)"
  8. src="../../static/image/icon-back.png" alt="" srcset=""></image>
  9. </view>
  10. <text><text>{{item.productName}}</text>&nbsp;&nbsp;<text>¥{{item.discountPrice * 0.01}}</text></text>
  11. </view>
  12. <checkbox-group @change='getValue(index)'>
  13. <label>
  14. <checkbox :value="index" />
  15. </label>
  16. </checkbox-group>
  17. </view>
  18. <view v-if="item.isShow" class="children" v-for="(itemChild,index) in item.children" :key='index'>
  19. <view><text>{{itemChild.productName}}</text>&nbsp;&nbsp;<text>{{itemChild.discountPrice * 0.01}}</text>
  20. </view>
  21. </view>
  22. </view>
  23. <!-- <button type="default" class="button" @click="savaHandle()">
  24. 开通服务
  25. </button> -->
  26. <button type="default" class="button" @click="addInterestsList()">
  27. 加购权益
  28. </button>
  29. </view>
  30. </template>
  31. <script setup lang="ts">
  32. import { onLoad, onShow } from "@dcloudio/uni-app";
  33. import { reactive } from "vue";
  34. import { queryInterestsList } from "@/utils/network/api.js";
  35. import { stringToJson } from "@/utils/network/encryption";
  36. import { request } from "@/utils/network/request";
  37. import { etcQYAction } from "@/utils/network/api.js";
  38. import { fileURL } from "@/datas/fileURL.js";
  39. import navBar from "@/components/nav-bar/nav-bar2.vue";
  40. import navBgCar from "./components/nav-bg-car4";
  41. // import { setItem } from "@/utils/storage";
  42. import { msg } from "@/utils/utils";
  43. import {
  44. checkOrderStatus,
  45. orderPay,
  46. wechatAppID,
  47. wechatPayConfigId,
  48. wechatSecret,
  49. addProduct,
  50. queryDetails,
  51. getOpenidApi
  52. } from "@/utils/network/api";
  53. import {
  54. getItem,
  55. StorageKeys,
  56. setItem
  57. } from "@/utils/storage";
  58. const imgURL = `${fileURL}image/`;
  59. const state = reactive({
  60. openid: "",
  61. orderId: "",
  62. id: "",
  63. clientFee: "",
  64. list: [], //权益数据
  65. choiceValue: [], //选择的权益数据的下标
  66. choiceValueComplete: [] //选择的权益数据的具体数据
  67. })
  68. onLoad((option : any) => {
  69. getList(option.orderId);
  70. getOpenID();
  71. state.orderId = option.orderId;
  72. state.clientFee = option.clientFee;
  73. state.id = option.id;
  74. console.log("option", option)
  75. })
  76. const addInterestsList = () => {
  77. state.choiceValueComplete = [];
  78. for (var i = 0; i < state.choiceValue.length; i++) {
  79. state.choiceValueComplete.push(state.list[state.choiceValue[i]])
  80. }
  81. let items = encodeURIComponent(JSON.stringify(state.choiceValueComplete));
  82. console.log("state.openid", state);
  83. const data = JSON.parse(decodeURIComponent(items));
  84. let productId = [];
  85. state.productMoney = 0;
  86. for (var i = 0; i < data.length; i++) {
  87. data['isOpened'] = 'node';
  88. state.productMoney += data[i]['discountPrice'] / 100;
  89. productId.push(data[i]['equityId'])
  90. }
  91. const options = {
  92. type: 2,
  93. data: {
  94. orderId: state.orderId, //订单编号
  95. },
  96. method: "POST",
  97. showLoading: true,
  98. };
  99. console.log("options", options);
  100. request(queryDetails, options).then((res) => {
  101. state.detailsObj = stringToJson(res.bizContent);
  102. console.log("state.detailsObj", state.detailsObj)
  103. let allMoney = (parseFloat(state.detailsObj.product.oncePrice * 0.01) + parseFloat(state.productMoney)).toFixed(2)
  104. const optionss = {
  105. type: 2,
  106. data: {
  107. orderId: state.orderId, //订单编号
  108. openId: getItem(StorageKeys.OpenId), //操作人 id
  109. equityId: productId.toString(), //权益Id
  110. totalAmount: allMoney * 100, //总金额
  111. isRepeatPurchase: 0
  112. },
  113. method: "POST",
  114. showLoading: true,
  115. };
  116. console.log("optionss", optionss);
  117. request(addProduct, optionss).then((res) => {
  118. // uni.navigateTo({
  119. // url: `/subpackage/orders/order_payment?orderId=${state.orderId}&&clientFee=${state.clientFee}&&id=${state.id}&&data=${items}&&isValueCard=${state.detailsObj.isValueCard}`,
  120. // });
  121. uni.redirectTo({
  122. url: `/subpackage/orders/product-detail?orderId=${state.orderId}&&clientFee=${state.clientFee}&&id=${state.id}&&data=${items}&&isValueCard=${state.detailsObj.isValueCard}`,
  123. });
  124. });
  125. });
  126. }
  127. const getList = (id) => {
  128. const options = {
  129. type: 2,
  130. data: { "orderId": id },
  131. method: 'POST',
  132. showLoading: true,
  133. }
  134. request(queryInterestsList, options).then((res) => {
  135. const data = stringToJson(res.bizContent);
  136. for (var i = 0; i < data.data.length; i++) {
  137. data.data[i]['isShow'] = false;
  138. }
  139. state.list = data.data
  140. console.log("222", state.list)
  141. })
  142. }
  143. const change = (e) => {
  144. console.log(e);
  145. }
  146. //获取微信小程序openid
  147. const getOpenID = () => {
  148. // #ifdef MP-WEIXIN
  149. uni.login({
  150. provider: "weixin",
  151. success: function (e) {
  152. console.log(e);
  153. getOpenid(e.code);
  154. // uni.request({
  155. // url: `https://api.weixin.qq.com/sns/jscode2session?appid=${wechatAppID}&secret=${wechatSecret}&js_code=${e.code}&grant_type=authorization_code`,
  156. // success: (res : any) => {
  157. // state.openid = res.data.openid;
  158. // setItem("QYorder", state);
  159. // console.log(res);
  160. // },
  161. // fail: (err : any) => {
  162. // uni.showToast({
  163. // title: "网络异常,请重试!" + err.errcode,
  164. // icon: "error",
  165. // duration: 500,
  166. // });
  167. // return;
  168. // },
  169. // });
  170. },
  171. });
  172. //#endif
  173. };
  174. const getOpenid = (code) => {
  175. const options = {
  176. type: 2,
  177. data: {
  178. "jsCode": code
  179. },
  180. method: "POST",
  181. showLoading: true,
  182. };
  183. // #ifdef MP-WEIXIN
  184. request(getOpenidApi, options).then((res) => {
  185. const result = stringToJson(res.bizContent);
  186. console.log("获取微信小程序openid", result);
  187. const openidData = stringToJson(result.data);
  188. state.openid = openidData.openid;
  189. setItem("QYorder", state);
  190. // setItem("QYorder", result.data);
  191. // state.openid = result.data.openid
  192. });
  193. // #endif
  194. }
  195. const savaHandle = () => {
  196. state.choiceValueComplete = [];
  197. for (var i = 0; i < state.choiceValue.length; i++) {
  198. state.choiceValueComplete.push(state.list[state.choiceValue[i]])
  199. }
  200. let items = encodeURIComponent(JSON.stringify(state.choiceValueComplete));
  201. console.log("state.choiceValueComplete", state.choiceValueComplete)
  202. console.log("openid*******", state.openid);
  203. //如果获取openId成功
  204. if (state.openid) {
  205. var data = {
  206. orderId: state.orderId,
  207. subOpenId: state.openid,
  208. };
  209. const options = {
  210. type: 2,
  211. data: data,
  212. method: "POST",
  213. showLoading: true,
  214. };
  215. request(etcQYAction, options).then((res) => {
  216. const data = stringToJson(res.bizContent);
  217. if (data.userState === "UNAUTHORIZED") {
  218. uni.navigateToMiniProgram({
  219. appId: "wxbcad394b3d99dac9",
  220. path: "pages/route/index",
  221. extraData: {
  222. appid: "wxcb1388c809fe25a9",
  223. sub_appid: "wx008c60533388527a",
  224. mch_id: "1500877591",
  225. sub_mch_id: "1622652848",
  226. nonce_str: data.nonceStr,
  227. sign_type: "HMAC-SHA256",
  228. trade_scene: "HIGHWAY",
  229. plate_number: data.plateNumber,
  230. sub_openid: data.subOpenId,
  231. sign: data.sign,
  232. },
  233. success(res) {
  234. console.log(res);
  235. },
  236. complete(res) {
  237. console.log(res);
  238. },
  239. fail(res) {
  240. console.log(res);
  241. // 未成功跳转到车主小程序
  242. },
  243. });
  244. } else if (data.userState === "NORMAL") {
  245. msg("已开通车主服务");
  246. uni.navigateTo({
  247. url: `/subpackage/orders/product-detail?orderId=${state.orderId}&&clientFee=${state.clientFee}&&id=${state.id}&&data=${items}`,
  248. });
  249. } else if (data.userState === "PAUSED") {
  250. msg("已暂停车主服务");
  251. return;
  252. } else if (data.userState === "OVERDUE") {
  253. msg("用户已开通车主服务,但欠费状态。提示用户还款,请跳转到车主服务");
  254. return;
  255. }
  256. });
  257. } else {
  258. //如果获取openId失败
  259. uni.showToast({
  260. title: "网络异常,请重试!",
  261. icon: "none",
  262. duration: 1000,
  263. });
  264. return;
  265. }
  266. };
  267. const changeIsShow = (index) => {
  268. console.log(index, state.list[index]['isShow'], !state.list[index]['isShow'])
  269. state.list[index]['isShow'] = !state.list[index]['isShow']
  270. console.log("state.list", state.list)
  271. }
  272. const getValue = (value) => {
  273. if (state.choiceValue.length == 0) {
  274. console.log("第一次")
  275. state.choiceValue.push(value)
  276. console.log("state.choiceValue", state.choiceValue)
  277. } else {
  278. var index = state.choiceValue.indexOf(value);
  279. if (index > -1) {//大于0 代表存在,
  280. state.choiceValue.splice(index, 1);//存在就删除
  281. } else {
  282. state.choiceValue.push(value)
  283. }
  284. console.log("state.choiceValue", state.choiceValue)
  285. }
  286. }
  287. </script>
  288. <style scoped lang="scss">
  289. .content {
  290. width: 100%;
  291. height: 100vh;
  292. }
  293. .button {
  294. height: 80rpx;
  295. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  296. border-radius: 40rpx;
  297. font-size: 32rpx;
  298. font-weight: 400;
  299. color: #ffffff;
  300. line-height: 80rpx;
  301. margin: 20rpx;
  302. }
  303. .imageDefault {
  304. height: 40rpx;
  305. width: 40rpx;
  306. transform: rotate(270deg);
  307. margin-right: 12rpx;
  308. color: white;
  309. }
  310. .imageChange {
  311. height: 40rpx;
  312. width: 40rpx;
  313. transform: rotate(90deg);
  314. margin-right: 12rpx;
  315. color: white;
  316. }
  317. .item {
  318. width: 90%;
  319. margin: 10rpx auto;
  320. background-color: rgb(41, 199, 207);
  321. // height: 150rpx;
  322. border-radius: 20rpx;
  323. padding: 20rpx;
  324. box-sizing: border-box;
  325. color: white;
  326. font-size: 32rpx;
  327. }
  328. .item>.title {
  329. width: 100%;
  330. display: flex;
  331. justify-content: space-between;
  332. align-items: center;
  333. }
  334. .title>checkbox-group {
  335. // float: right;
  336. }
  337. .children {
  338. margin-left: 50rpx;
  339. margin-top: 16rpx;
  340. }
  341. .children>view {
  342. height: 50rpx;
  343. line-height: 50rpx;
  344. }
  345. .show {
  346. display: inline-block;
  347. }
  348. .hide {
  349. display: none;
  350. }
  351. checkbox {
  352. transform: scale(0.8);
  353. }
  354. </style>