您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

choice-product.vue 11KB

1年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  1. <template>
  2. <navBar title="选择产品" :scrollTop="scrollTop"></navBar>
  3. <navBgCar></navBgCar>
  4. <view class="content-value">
  5. <view @click="savaHandle(item)" class="ul-item" v-for="(item, index) in state.dataArray" :key="index">
  6. <image style="width: 100%; height: 170rpx; border-radius: 20rpx"
  7. :src="`${$imgUrl}applyCard/product-bg.png`"></image>
  8. <view class="item-value">
  9. <image class="icon-tip"
  10. :src="state.sysType === 'WECHAT'?`${$imgUrl}applyCard/wechat.png` : `${$imgUrl}applyCard/alibaba.png`">
  11. </image>
  12. <view class="content">
  13. <view class="title">
  14. {{ item.promoteName }}
  15. </view>
  16. <!-- 1记账卡2储值卡3记存卡 -->
  17. <!-- <view style="margin-top: 15rpx" class="tip" v-if="item.cardType=='1'">
  18. 记账卡
  19. </view> -->
  20. <view style="margin-top: 15rpx" class="tip">
  21. {{ item['releaseProductStandards']['productStandards']['cardTypeArr'] }}
  22. </view>
  23. </view>
  24. <view class="money">
  25. ¥:{{ item.fee * 0.01 }}
  26. </view>
  27. </view>
  28. </view>
  29. <view class="bottomTip"> 到底啦!敬请期待其他产品! </view>
  30. </view>
  31. <u-popup mode="center" v-model="state.choiceCardShow" closeable>
  32. <view class="squire">
  33. <view class="mask-title" :style="{ '--color': color }">选择办理卡类型</view>
  34. <view class="as-layout-horizontal">
  35. <view v-for="(item, index) in state.radiolist1" :key="index" :label="item.disabled" :name="item.name"
  36. @click="radioChange(item.name)"
  37. style="width: 100%;display: flex;align-items: center;margin-bottom: 30rpx;">
  38. <view class="as-layout-vertical as-gravity-center">
  39. <image style="width: 140rpx; height: 100rpx; border-radius: 20rpx;margin-right: 20rpx;"
  40. :src="`${$imgUrl}card2.png`" mode="aspectFill"></image>
  41. <view style="margin-top: 20rpx;">
  42. {{item.name}}
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. </u-popup>
  49. </template>
  50. <script setup lang="ts">
  51. import { onLoad, onPageScroll } from "@dcloudio/uni-app";
  52. import { reactive, ref } from "vue";
  53. import { etcQueryProduct, productReCode } from "@/utils/network/api.js";
  54. import { request } from "@/utils/network/request.js";
  55. import { stringToJson } from "@/utils/network/encryption";
  56. import { fileURL } from "@/datas/fileURL.js";
  57. import navBgCar from "./components/nav-bg-car1";
  58. import navBar from "@/components/nav-bar/nav-bar2.vue";
  59. import { getItem, StorageKeys, setItem } from "@/utils/storage.ts";
  60. import { msg } from "@/utils/utils";
  61. const imgURL = `${fileURL}image/`;
  62. // import { setItem } from "@/utils/storage";
  63. const scrollTop = ref(0); //滚动距离
  64. // 单选默认数据
  65. // let flag = ref(true)
  66. // 单选
  67. const radioChange = (n) => {
  68. console.log('radioChange', n);
  69. if (n == '记账卡') {
  70. state.isValueCard = 2
  71. } else if (n == '储值卡') {
  72. state.isValueCard = 1
  73. } else {
  74. state.isValueCard = 3
  75. }
  76. // uni.redirectTo({
  77. // url: `/subpackage/orders/essential-information?promoteId=${getItem("promoteId")}&userType=${state.userType}&type=${state.type}&isSign=${state.isSign}&isValueCard=${state.isValueCard}`,
  78. // });
  79. uni.redirectTo({
  80. url: `/subpackage/orders/interestsList?promoteId=${getItem("promoteId")}&userType=${state.userType}&type=${state.type}&isValueCard=${state.isValueCard}`,
  81. });
  82. }
  83. const savaHandle = (val) => {
  84. console.log("vAL", val)
  85. setItem("clientFee", val.clientFee);
  86. setItem("promoteId", val.promoteId);
  87. setItem("isValueCard", val.isValueCard);
  88. state.isSign = val.isSign;
  89. // 判断是几张卡
  90. console.log("state.dataArray[i]['releaseProductStandards']['productStandards']", val['releaseProductStandards']['productStandards'])
  91. // if (val.promoteName.indexOf('选装') != -1) {
  92. // if (val.cardTypeArr.split(",")[0] == "记账卡") {
  93. // state.isValueCard = 2
  94. // } else if (val.cardTypeArr.split(",")[0] == '储值卡') {
  95. // state.isValueCard = 1
  96. // } else {
  97. // state.isValueCard = 3
  98. // }
  99. // uni.redirectTo({
  100. // url: `/subpackage/orders/verify/verify-phone/verify-phone?promoteId=${getItem("promoteId")}&userType=${state.userType}&type=${state.type}&isValueCard=${state.isValueCard}`,
  101. // });
  102. // return
  103. // }
  104. if (val['releaseProductStandards']['productStandards']['cardTypeArr'].split(",").length == 1) {
  105. if (val['releaseProductStandards']['productStandards']['cardTypeArr'].split(",")[0] == "记账卡") {
  106. state.isValueCard = 2
  107. } else if (val['releaseProductStandards']['productStandards']['cardTypeArr'].split(",")[0] == '储值卡') {
  108. state.isValueCard = 1
  109. } else {
  110. state.isValueCard = 3
  111. }
  112. // uni.redirectTo({
  113. // url: `/subpackage/orders/essential-information?promoteId=${getItem("promoteId")}&userType=${state.userType}&type=${state.type}&isValueCard=${state.isValueCard}`,
  114. // });
  115. uni.redirectTo({
  116. url: `/subpackage/orders/interestsList?promoteId=${val['promoteId']}&userType=${state.userType}&type=${state.type}&isValueCard=${state.isValueCard}`,
  117. });
  118. } else {
  119. state.radiolist1 = [];
  120. // 处理卡的数据
  121. for (var i = 0; i < val['releaseProductStandards']['productStandards']['cardTypeArr'].split(",").length; i++) {
  122. const obj = {};
  123. obj["name"] = val['releaseProductStandards']['productStandards']['cardTypeArr'].split(",")[i];
  124. obj["disabled"] = false;
  125. state.radiolist1.push(obj)
  126. }
  127. state.choiceCardShow = true;
  128. console.log("state.radiolist1", state.radiolist1)
  129. }
  130. };
  131. onLoad((option : any) => {
  132. // #ifdef MP-ALIPAY
  133. state.sysType = 'ALI';
  134. // #endif
  135. // #ifdef MP-WEIXIN
  136. state.sysType = 'WECHAT';
  137. // #endif
  138. // state.orderId = option.orderId;
  139. // state.userType = option.userType;
  140. // state.vehiclePlateColor = option.vehiclePlateColor;
  141. state.userType = option.userType;
  142. state.type = option.type;
  143. var data = {
  144. userType: state.userType,
  145. // source: state.sysType, //请求方来源
  146. agencyId: '52010106004',
  147. vanType: state.type
  148. };
  149. const options = {
  150. type: 2,
  151. data: data,
  152. method: "POST",
  153. showLoading: true,
  154. };
  155. console.log("输出内容", options);
  156. request(etcQueryProduct, options).then((res) => {
  157. // console.log(res.bizContent);
  158. const data = stringToJson(res.bizContent);
  159. console.log(data);
  160. state.dataArray = data.list ? data.list : [];
  161. console.log("state.dataArray", state.dataArray);
  162. for (var i = 0; i < state.dataArray.length; i++) {
  163. const cardTypeArr = []
  164. for (var j = 0; j < state.dataArray[i]['releaseProductStandards']['productStandards'].cardType.length; j++) {
  165. if (state.dataArray[i]['releaseProductStandards']['productStandards'].cardType[j] == '1') {
  166. cardTypeArr.push('储值卡')
  167. } else if (state.dataArray[i]['releaseProductStandards']['productStandards'].cardType[j] == '2') {
  168. cardTypeArr.push('记账卡')
  169. } else if (state.dataArray[i]['releaseProductStandards']['productStandards'].cardType[j] == '3') {
  170. cardTypeArr.push('预存卡')
  171. }
  172. }
  173. state.dataArray[i]['releaseProductStandards']['productStandards']['cardTypeArr'] = cardTypeArr.toString()
  174. }
  175. console.log("state.dataArray", state.dataArray)
  176. });
  177. });
  178. //监听页面滚动
  179. onPageScroll((e) => {
  180. scrollTop.value = e.scrollTop;
  181. });
  182. const productReCodeAction = (id) => {
  183. var data = {
  184. productId: id,
  185. orderId: state.orderId,
  186. };
  187. const options = {
  188. type: 2,
  189. data: data,
  190. method: "POST",
  191. showLoading: true,
  192. };
  193. return new Promise(async (resolve, reject) => {
  194. const res = await request(productReCode, options);
  195. const data = stringToJson(res.bizContent);
  196. resolve(data);
  197. }).catch((error) => {
  198. reject(error);
  199. });
  200. };
  201. const state = reactive({
  202. isValueCard: 1, //卡的类型
  203. radiolist1: [], //选择卡的数据列表
  204. choiceCardShow: false, //选择卡的弹出框
  205. isSign: '',
  206. sysType: "",
  207. orderId: "",
  208. userType: 1, //1 个人 2单位
  209. type: 0, //0 客车 1货车
  210. vehiclePlateColor: "",
  211. data: {
  212. show: false,
  213. src: imgURL + "applyCard/edit.png",
  214. },
  215. dataArray: [],
  216. list: [
  217. {
  218. bg: imgURL + "applyCard/product-bg.png",
  219. icon: imgURL + "applyCard/wechat.png",
  220. title: "【货车】微信车主服务",
  221. tip: "绑定微信支付,无需绑定银行卡",
  222. },
  223. ],
  224. });
  225. </script>
  226. <style lang="scss" scoped>
  227. ::v-deep .u-radio {
  228. display: flex !important;
  229. align-items: center !important;
  230. float: none !important;
  231. }
  232. ::v-deep .u-icon__icon {
  233. top: -4px !important;
  234. }
  235. .bottomTip {
  236. margin-top: 100rpx;
  237. text-align: center;
  238. font-size: 28rpx;
  239. font-family: Microsoft YaHei;
  240. font-weight: 400;
  241. color: #b3b3b3;
  242. }
  243. .content-value {
  244. position: relative;
  245. // margin-top: -50rpx;
  246. padding: 0rpx 30rpx;
  247. position: relative;
  248. .img-pos {
  249. position: absolute;
  250. left: 500rpx;
  251. top: -38rpx;
  252. right: 50rpx;
  253. .img-flex {
  254. display: flex;
  255. justify-content: space-between;
  256. align-items: center;
  257. .car-img {
  258. width: 86rpx;
  259. height: 42rpx;
  260. }
  261. .flag-img {
  262. width: 30rpx;
  263. height: 35rpx;
  264. }
  265. }
  266. }
  267. }
  268. .flex {
  269. display: flex;
  270. align-items: center;
  271. }
  272. .action {
  273. margin-top: 30rpx;
  274. padding-left: 20rpx;
  275. padding-right: 20rpx;
  276. padding-bottom: 30rpx;
  277. .button {
  278. height: 80rpx;
  279. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  280. border-radius: 40rpx;
  281. font-size: 32rpx;
  282. font-weight: 400;
  283. color: #ffffff;
  284. line-height: 80rpx;
  285. }
  286. }
  287. .action-btn {
  288. margin-left: 45rpx;
  289. width: 121rpx;
  290. height: 61rpx;
  291. border: 1px solid rgba(255, 255, 255, 1);
  292. border-radius: 30rpx;
  293. background: rgba(255, 255, 255, 0.2);
  294. text-align: center;
  295. font-size: 30rpx;
  296. font-family: Microsoft YaHei;
  297. font-weight: 400;
  298. color: #ffffff;
  299. line-height: 61rpx;
  300. }
  301. .tag1 {
  302. padding: 5rpx;
  303. background: rgba(0, 179, 139, 0.5);
  304. border-radius: 6rpx;
  305. font-size: 22rpx;
  306. font-family: Microsoft YaHei;
  307. font-weight: 400;
  308. color: #ffffff;
  309. }
  310. .tag3 {
  311. padding: 5rpx;
  312. background: rgba(139, 112, 228, 0.5);
  313. border-radius: 6rpx;
  314. font-size: 22rpx;
  315. font-family: Microsoft YaHei;
  316. font-weight: 400;
  317. color: #ffffff;
  318. }
  319. .tag2 {
  320. padding: 5rpx;
  321. background: rgba(249, 97, 60, 0.5);
  322. border-radius: 6rpx;
  323. font-size: 22rpx;
  324. font-family: Microsoft YaHei;
  325. font-weight: 400;
  326. color: #ffffff;
  327. }
  328. .ul-item {
  329. padding: 5px 20rpx;
  330. display: flex;
  331. align-items: center;
  332. .item-value {
  333. padding: 20rpx;
  334. position: absolute;
  335. display: flex;
  336. align-items: center;
  337. // justify-content: space-around;
  338. width: 80%;
  339. .content {
  340. width: 51%;
  341. .title {
  342. font-size: 32rpx;
  343. font-family: Microsoft YaHei;
  344. font-weight: 400;
  345. color: #ffffff;
  346. }
  347. .tip {
  348. font-size: 24rpx;
  349. font-family: Microsoft YaHei;
  350. font-weight: 400;
  351. color: #ffffff;
  352. }
  353. }
  354. }
  355. .icon-tip {
  356. width: 100rpx;
  357. height: 100rpx;
  358. }
  359. .content {
  360. margin-left: 40rpx;
  361. }
  362. }
  363. .money {
  364. color: white;
  365. // float: right;
  366. }
  367. ::v-deep .u-mode-center-box {
  368. border-radius: 10rpx;
  369. }
  370. .squire {
  371. padding: 30rpx 30rpx 50rpx 50rpx;
  372. }
  373. .mask-close {
  374. text-align: right;
  375. }
  376. .icon-closed {
  377. width: 48rpx;
  378. height: 48rpx;
  379. }
  380. .mask-title {
  381. text-align: center;
  382. font-size: 32rpx;
  383. color: $uni-text-color-black;
  384. margin-bottom: 50rpx;
  385. }
  386. </style>