You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

choice-product.vue 6.5KB

2 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  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; background-color: #eeeeee"
  7. :src="`${$imgUrl}applyCard/product-bg.png`"></image>
  8. <view class="item-value">
  9. <image class="icon-tip" :src="`${$imgUrl}applyCard/wechat.png`"></image>
  10. <view class="content">
  11. <view class="title">
  12. {{ item.name }}
  13. </view>
  14. <view style="margin-top: 15rpx" class="tip">
  15. {{ item.productMsg }}
  16. </view>
  17. </view>
  18. </view>
  19. </view>
  20. <view class="bottomTip"> 到底啦!敬请期待其他产品! </view>
  21. </view>
  22. </template>
  23. <script setup lang="ts">
  24. import {
  25. onLoad,
  26. onPageScroll,
  27. } from "@dcloudio/uni-app";
  28. import {
  29. reactive,
  30. ref,
  31. } from "vue";
  32. import {
  33. etcQueryProduct,
  34. productReCode,
  35. } from "@/utils/network/api.js";
  36. import {
  37. request
  38. } from "@/utils/network/request.js";
  39. import {
  40. stringToJson
  41. } from "@/utils/network/encryption";
  42. import {
  43. fileURL
  44. } from "@/datas/fileURL.js";
  45. import navBgCar from "./components/nav-bg-car2";
  46. import navBar from "../components/nav-bar/nav-bar2.vue";
  47. import {
  48. getItem,
  49. StorageKeys
  50. } from "@/utils/storage.ts";
  51. import {
  52. msg
  53. } from "@/utils/utils";
  54. const imgURL = `${fileURL}image/`;
  55. import {
  56. setItem
  57. } from "@/utils/storage";
  58. const scrollTop =ref(0);//滚动距离
  59. const savaHandle = (val) => {
  60. productReCodeAction(val.id).then(value => {
  61. if (val.isValueCard === 2) {
  62. setItem('clientFee', val.clientFee)
  63. setItem("productId", val.id)
  64. }
  65. if (state.userType === "1") {
  66. uni.navigateTo({
  67. url: `/applyCard/opening-account-people?orderId=${state.orderId}&vehiclePlateColor=${state.vehiclePlateColor}`,
  68. });
  69. } else {
  70. uni.navigateTo({
  71. url: `/applyCard/opening-account-unit?orderId=${state.orderId}&vehiclePlateColor=${state.vehiclePlateColor}`,
  72. });
  73. }
  74. // if (val.isValueCard === 2) {
  75. // setItem('clientFee', val.clientFee)
  76. // setItem("productId", val.id)
  77. // uni.navigateTo({
  78. // url: `/applyCard/release-products?orderId=${state.orderId}&&clientFee=${val.clientFee}&&id=${val.id}`,
  79. // });
  80. // } else {
  81. // uni.navigateTo({
  82. // url: `/applyCard/product-detail?orderId=${state.orderId}&&clientFee=${val.clientFee}&&id=${val.id}`,
  83. // });
  84. // }
  85. })
  86. };
  87. onLoad((option: any) => {
  88. state.orderId = option.orderId;
  89. state.userType = option.userType;
  90. state.vehiclePlateColor = option.vehiclePlateColor;
  91. var data = {
  92. orderId: state.orderId,
  93. };
  94. const options = {
  95. type: 2,
  96. data: data,
  97. method: "POST",
  98. showLoading: true,
  99. };
  100. request(etcQueryProduct, options).then((res) => {
  101. console.log(res.bizContent);
  102. const data = stringToJson(res.bizContent);
  103. console.log(data);
  104. console.log(typeof(data));
  105. state.dataArray = data??[];
  106. });
  107. });
  108. //监听页面滚动
  109. onPageScroll((e) => {
  110. scrollTop.value = e.scrollTop;
  111. });
  112. const productReCodeAction = (id) => {
  113. var data = {
  114. productId: id,
  115. orderId: state.orderId
  116. };
  117. const options = {
  118. type: 2,
  119. data: data,
  120. method: "POST",
  121. showLoading: true,
  122. };
  123. return new Promise(async (resolve, reject) => {
  124. const res = await request(productReCode, options);
  125. const data = stringToJson(res.bizContent);
  126. resolve(data);
  127. }).catch((error) => {
  128. reject(error);
  129. });
  130. }
  131. const state = reactive({
  132. orderId: "",
  133. userType:"",
  134. vehiclePlateColor:"",
  135. data: {
  136. show: false,
  137. src: imgURL + "applyCard/edit.png",
  138. },
  139. dataArray: [],
  140. list: [{
  141. bg: imgURL + "applyCard/product-bg.png",
  142. icon: imgURL + "applyCard/wechat.png",
  143. title: "【货车】微信车主服务",
  144. tip: "绑定微信支付,无需绑定银行卡",
  145. }, ],
  146. });
  147. </script>
  148. <style lang="scss" scoped>
  149. .bottomTip {
  150. margin-top: 100rpx;
  151. text-align: center;
  152. font-size: 28rpx;
  153. font-family: Microsoft YaHei;
  154. font-weight: 400;
  155. color: #b3b3b3;
  156. }
  157. .content-value {
  158. position: relative;
  159. margin-top: -50rpx;
  160. padding: 0rpx 30rpx;
  161. position: relative;
  162. .img-pos {
  163. position: absolute;
  164. left: 500rpx;
  165. top: -38rpx;
  166. right: 50rpx;
  167. .img-flex {
  168. display: flex;
  169. justify-content: space-between;
  170. align-items: center;
  171. .car-img {
  172. width: 86rpx;
  173. height: 42rpx;
  174. }
  175. .flag-img {
  176. width: 30rpx;
  177. height: 35rpx;
  178. }
  179. }
  180. }
  181. }
  182. .flex {
  183. display: flex;
  184. align-items: center;
  185. }
  186. .action {
  187. margin-top: 30rpx;
  188. padding-left: 20rpx;
  189. padding-right: 20rpx;
  190. padding-bottom: 30rpx;
  191. .button {
  192. height: 80rpx;
  193. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  194. border-radius: 40rpx;
  195. font-size: 32rpx;
  196. font-weight: 400;
  197. color: #ffffff;
  198. line-height: 80rpx;
  199. }
  200. }
  201. .action-btn {
  202. margin-left: 45rpx;
  203. width: 121rpx;
  204. height: 61rpx;
  205. border: 1px solid rgba(255, 255, 255, 1);
  206. border-radius: 30rpx;
  207. background: rgba(255, 255, 255, 0.2);
  208. text-align: center;
  209. font-size: 30rpx;
  210. font-family: Microsoft YaHei;
  211. font-weight: 400;
  212. color: #ffffff;
  213. line-height: 61rpx;
  214. }
  215. .tag1 {
  216. padding: 5rpx;
  217. background: rgba(0, 179, 139, 0.5);
  218. border-radius: 6rpx;
  219. font-size: 22rpx;
  220. font-family: Microsoft YaHei;
  221. font-weight: 400;
  222. color: #ffffff;
  223. }
  224. .tag3 {
  225. padding: 5rpx;
  226. background: rgba(139, 112, 228, 0.5);
  227. border-radius: 6rpx;
  228. font-size: 22rpx;
  229. font-family: Microsoft YaHei;
  230. font-weight: 400;
  231. color: #ffffff;
  232. }
  233. .tag2 {
  234. padding: 5rpx;
  235. background: rgba(249, 97, 60, 0.5);
  236. border-radius: 6rpx;
  237. font-size: 22rpx;
  238. font-family: Microsoft YaHei;
  239. font-weight: 400;
  240. color: #ffffff;
  241. }
  242. .ul-item {
  243. padding: 5px 20rpx;
  244. display: flex;
  245. align-items: center;
  246. .item-value {
  247. padding: 20rpx;
  248. position: absolute;
  249. display: flex;
  250. align-items: center;
  251. justify-content: space-around;
  252. .content {
  253. .title {
  254. font-size: 32rpx;
  255. font-family: Microsoft YaHei;
  256. font-weight: 400;
  257. color: #ffffff;
  258. }
  259. .tip {
  260. font-size: 24rpx;
  261. font-family: Microsoft YaHei;
  262. font-weight: 400;
  263. color: #ffffff;
  264. }
  265. }
  266. }
  267. .icon-tip {
  268. width: 100rpx;
  269. height: 100rpx;
  270. }
  271. .content {
  272. margin-left: 40rpx;
  273. }
  274. }
  275. </style>