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.

bluetooth.vue 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776
  1. <!--设备选择 -->
  2. <template>
  3. <view class="devices">
  4. <view class="device" v-for="(item, index) in deviceList" :key="index" @click="connectDevice(item)">
  5. <image :src="`${$imgUrl}bluetooth/card1.png`" class="head" mode="aspectFill"></image>
  6. <view class="center">
  7. <view class="name">{{ item._name }}</view>
  8. <view class="desc">编号 {{ item.name }}</view>
  9. </view>
  10. <image :src="item.selected ? selectedUrl : unSelectedUrl" class="icon" mode="aspectFill"></image>
  11. </view>
  12. <view class="hint">
  13. <view class="orange-txt as-layout-horizontal as-gravity-center-start">
  14. <image :src="`${$imgUrl}common/icon-hint.png`" mode="aspectFill"></image>
  15. <view>温馨提示:</view>
  16. </view>
  17. <view class="grey-txt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  18. 指令执行过程中,请勿关闭蓝牙,勿将手机远离电子标签,以免导致写卡、写签失败。</view>
  19. </view>
  20. <view class="btn">
  21. <submit-button title="点击重新搜索蓝牙" @submit="load"></submit-button>
  22. </view>
  23. </view>
  24. </template>
  25. <script setup lang="ts">
  26. import { ref, reactive } from "vue";
  27. import { onLoad, onReady } from "@dcloudio/uni-app";
  28. import { fileURL } from "@/datas/fileURL.js";
  29. const imgURL = `${fileURL}image/`;
  30. const selectedUrl = "common/selected.png`";
  31. const unSelectedUrl = "common/unselected.png`";
  32. const jyApi = require("../../static/etc/JYAPI/GenvictBleUtil.js");
  33. const jlQZApi = require("../../static/etc/JLQZAPI/JLObuSDK.js");
  34. const atApi = require("../../static/etc/ATAPI/ArtcBleUtil.js");
  35. const wqApi = require("../../static/etc/WQAPI/WCDObuSdk.js");
  36. const cgApi = require("../../static/etc/CGAPI/cguBle.js");
  37. const tools = require("../../static/etcUtil/tools.js");
  38. const datas = require("../../static/etcUtil/datas.js");
  39. const bluetoothUtil = require("../../static/etcUtil/index.js");
  40. let jlApi = require("../../static/etc/JLAPI/JLObuSDK.js"); //聚力SDK
  41. let wjApi = require("../../static/etc/WJAPI/wjBleAPI");
  42. let tdApi = require("../../static/etc/TDAPI/TDRObuSDK.js");
  43. let zzApi = require("../../static/etc/WJAPI/wjBleAPI.js");
  44. let jtApi = require("../../static/etc/JTAPI/BleUtil.js");
  45. // #ifdef MP-ALIPAY
  46. // 这部分代码将仅在支付宝小程序平台下执行
  47. jlApi = require("../../static/etc/JLObuSDK/JLObuSDK.js");
  48. wjApi = require("../../static/etc/wjBle/WJBleAPI");
  49. zzApi = require("../../static/etc/wjBle/WJBleAPI");
  50. tdApi = require("../../static/etc/TDRAPI/TDRObuSDK.js");
  51. jtApi = require("../../static/etc/JTAPIS/BleUtil.js");
  52. // 执行支付宝小程序的特定功能
  53. // #endif
  54. const state = reactive({
  55. fee: "",
  56. id: "",
  57. cardId: "",
  58. showPopup: false, //显示激活成功提示
  59. curDeviceId: "", //当前选中的设备ID
  60. deviceList: [
  61. //设备列表
  62. {
  63. id: "1",
  64. image: imgURL + "bluetooth/card1.png`",
  65. name: "聚力",
  66. number: "235564444558855",
  67. },
  68. ],
  69. connectSuccess: 1,
  70. transfer: 0,
  71. rechargeMoney: "",//消费明细圈存传过来的金额
  72. orderNum: 0,//消费明细 传orderNum说明去支付
  73. payMoney: 0,//0 修复 1 支付
  74. accountId: "",//对公账户名称
  75. difference: "",//区分routeType5 1二次激活 2余额补领
  76. vehicleId: "",
  77. refundBalance: ""
  78. });
  79. const deviceList = ref([]);
  80. const connectPrefixName = ref(null);
  81. const routeType = ref(null); //来源 1激活 2圈存 3信息重写 4信息读取
  82. interface DeviceType {
  83. name : string; //设备名称
  84. deviceId : string; //uuid
  85. prefixName : string; //前缀名称
  86. selected : boolean; //判断点击次数
  87. _name : string; //中文名称
  88. }
  89. let device : DeviceType = reactive({
  90. name: "", //设备名称
  91. deviceId: "", //uuid
  92. prefixName: "", //前缀名称
  93. selected: false, //判断点击次数
  94. _name: "", //中文名称
  95. });
  96. onReady(() => {
  97. load();
  98. });
  99. onLoad((option) => {
  100. routeType.value = option.routeType ? option.routeType : "1";
  101. state.cardId = option.cardId;
  102. if (option.fee) {
  103. state.fee = option.fee;
  104. }
  105. if (option.id) {
  106. state.id = option.id;
  107. }
  108. if (option.transfer) {
  109. state.transfer = option.transfer;
  110. }
  111. if (option.rechargeMoney) {
  112. state.rechargeMoney = option.rechargeMoney
  113. }
  114. if (option.orderNum) {
  115. state.orderNum = option.orderNum
  116. }
  117. if (option.payMoney) {
  118. state.payMoney = option.payMoney
  119. }
  120. if (option.accountId) {
  121. state.accountId = option.accountId
  122. }
  123. if (option.difference) {
  124. state.difference = option.difference;
  125. }
  126. if (option.vehicleId) {
  127. state.vehicleId = option.vehicleId;
  128. }
  129. if (option.refundBalance) {
  130. state.refundBalance = option.refundBalance;
  131. }
  132. console.log("传过来的参数", option)
  133. });
  134. /*
  135. * 蓝牙初始化
  136. */
  137. const load = () => {
  138. deviceList.value = [];
  139. console.log("****************蓝牙getsetting******************");
  140. uni.getSetting({
  141. success(res) {
  142. console.log("****************成功******************");
  143. console.log("scopebluetooth:" + res.authSetting["scope.bluetooth"]);
  144. console.log("成功结果:" + JSON.stringify(res));
  145. if (res.authSetting["scope.bluetooth"] == undefined) {
  146. //没有授权使用蓝牙功能,提示用户授权使用
  147. // #ifdef MP-WEIXIN
  148. uni.authorize({
  149. scope: "scope.bluetooth",
  150. success() {
  151. openBluetooth();
  152. },
  153. fail(err) {
  154. console.log('蓝牙授权失败', err)
  155. uni.showToast({
  156. title: "蓝牙授权失败",
  157. icon: "error",
  158. duration: 1500,
  159. });
  160. }
  161. });
  162. // #endif
  163. // #ifdef MP-ALIPAY
  164. openBluetooth();
  165. // #endif
  166. } else if (!res.authSetting["scope.bluetooth"]) {
  167. //false
  168. uni.showModal({
  169. title: "是否授权读取蓝牙",
  170. content: "需要获取你的蓝牙,请确认授权,否则无法获取蓝牙",
  171. success: function (mres) {
  172. if (mres.confirm) {
  173. uni.openSetting({
  174. success(authData) {
  175. if (authData.authSetting["scope.bluetooth"] == true) {
  176. tools.showLoadingAlert("扫描蓝牙中");
  177. openBluetooth();
  178. } else {
  179. uni.closeBluetoothAdapter();
  180. uni.showToast({
  181. title: "蓝牙授权失败",
  182. icon: "error",
  183. duration: 1500,
  184. });
  185. }
  186. },
  187. });
  188. } else if (mres.cancel) {
  189. uni.showToast({
  190. title: "蓝牙授权失败",
  191. icon: "error",
  192. duration: 1000,
  193. });
  194. }
  195. },
  196. });
  197. } else {
  198. tools.showLoadingAlert("扫描蓝牙中");
  199. openBluetooth();
  200. }
  201. },
  202. fail(res) {
  203. console.log("****************失败******************");
  204. console.log("失败结果:" + JSON.stringify(res));
  205. },
  206. });
  207. };
  208. /*
  209. * 打开蓝牙
  210. */
  211. const openBluetooth = () => {
  212. tools.hideLoadingAlert();
  213. let foundDevices = []; //扫描到的蓝牙列表
  214. uni.closeBluetoothAdapter(); //先关闭蓝牙
  215. console.log('执行断开蓝牙方法')
  216. //打开蓝牙
  217. uni.openBluetoothAdapter({
  218. success: function (item : any) {
  219. console.log('初始化蓝牙模块', item)
  220. tools.showLoadingAlert("扫描蓝牙中...");
  221. //开始搜索附近的蓝牙设备
  222. uni.startBluetoothDevicesDiscovery({
  223. success: function (res) {
  224. console.log('开始搜寻附近的蓝牙外围设备', res);
  225. //监听搜索到新设备的事件
  226. uni.onBluetoothDeviceFound(function (res) {
  227. console.log('监听寻找到新设备的事件', res, res.devices);
  228. for (let i = 0; i < res.devices.length; i++) {
  229. let name = res.devices[i]["name"];
  230. let prefixName = "";
  231. let deviceId = res.devices[i]["deviceId"];
  232. console.log("res.devices[i]", res.devices[i]["name"]);
  233. if (name != "" && name != undefined && name != "undefined") {
  234. if (name.indexOf("G-WJ") != -1 || name.indexOf("ETC") != -1 || name.indexOf("G-JL") != -1) {
  235. //前装设备
  236. prefixName = "ETC";
  237. } else {
  238. //聚力临时设备
  239. if (name.indexOf("5201121") != -1) {
  240. prefixName = "JL";
  241. } else {
  242. prefixName = name.substring(0, 2);
  243. }
  244. }
  245. prefixName = prefixName.toUpperCase();
  246. if (
  247. prefixName == "WJ" ||
  248. prefixName == "JL" ||
  249. prefixName == "JY" ||
  250. prefixName == "AT" ||
  251. prefixName == "JT" ||
  252. prefixName == "WQ" ||
  253. prefixName == "CG" ||
  254. prefixName == "TD" ||
  255. prefixName == "ZZ" ||
  256. prefixName == "ETC"
  257. ) {
  258. // //隐藏加载框
  259. tools.hideLoadingAlert();
  260. device.name = name;
  261. device.deviceId = deviceId;
  262. device.prefixName = prefixName;
  263. device.selected = false; //防止重复点击
  264. let _name = "";
  265. switch (prefixName) {
  266. case "WJ":
  267. _name = "万集";
  268. break;
  269. case "JL":
  270. _name = "聚利";
  271. break;
  272. case "JY":
  273. _name = "金溢";
  274. break;
  275. case "AT":
  276. _name = "埃特斯";
  277. break;
  278. case "JT":
  279. _name = "建投";
  280. break;
  281. case "WQ":
  282. _name = "握奇";
  283. break;
  284. case "CG":
  285. _name = "成谷";
  286. break;
  287. case "TD":
  288. _name = "天地融";
  289. break;
  290. case "ZZ":
  291. _name = "智载";
  292. break;
  293. case "ETC":
  294. _name = "前装";
  295. break;
  296. default:
  297. _name = "未知";
  298. break;
  299. }
  300. device._name = _name;
  301. if (deviceList.value.length == 0) {
  302. // #ifdef MP-ALIPAY
  303. if (device._name == '聚利' || device._name == '万集' || device._name == '天地融' || device._name == '建投') {
  304. foundDevices.push(device);
  305. }
  306. // #endif
  307. // #ifdef MP-WEIXIN
  308. foundDevices.push(device);
  309. // #endif
  310. } else {
  311. let isHave = false;
  312. for (let j = 0; j < foundDevices.length; j++) {
  313. if (name == foundDevices[j].deviceId) {
  314. isHave = true;
  315. break;
  316. }
  317. }
  318. if (!isHave) {
  319. foundDevices.push(device);
  320. }
  321. }
  322. deviceList.value = foundDevices;
  323. foundDevices = [];
  324. // console.log(foundDevices);
  325. }
  326. }
  327. }
  328. });
  329. },
  330. fail: function (res) {
  331. console.log(res);
  332. tools.hideLoadingAlert();
  333. },
  334. });
  335. },
  336. fail: function (res) {
  337. console.log(res);
  338. alertF("手机蓝牙未打开或不支持蓝牙");
  339. },
  340. });
  341. };
  342. /**
  343. * 连接蓝牙
  344. */
  345. const connectDevice = (e) => {
  346. console.log(e);
  347. let item = e;
  348. //停止扫描蓝牙
  349. console.info("停止搜寻附近的蓝牙外围设备");
  350. uni.stopBluetoothDevicesDiscovery({
  351. success: function (res) {
  352. console.log(device);
  353. if (item.selected == false) {
  354. console.log("第一次点击了");
  355. item.selected = true;
  356. setTimeout(function () {
  357. if (device.selected == undefined) {
  358. console.info("selected is undefined");
  359. linkFail(); //未找到设备, 请重新搜索
  360. return;
  361. }
  362. item.selected = false;
  363. }, 4000);
  364. } else {
  365. console.log("第二次点击了");
  366. return;
  367. }
  368. if (
  369. item.prefixName == undefined ||
  370. item.prefixName == "undefined" ||
  371. item.prefixName == ""
  372. ) {
  373. console.info("device.prefixName is undefined");
  374. linkFail(); //未找到设备, 请重新搜索
  375. return;
  376. }
  377. let prefixName = item.prefixName;
  378. connectPrefixName.value = item.prefixName;
  379. console.log(item);
  380. // datas.setData("connectPrefixName", connectPrefixName.value);
  381. // //断开蓝牙
  382. // bluetoothUtil.disconnectDevice();
  383. tools.showLoadingAlert("蓝牙连接中");
  384. console.info("连接的是" + prefixName, device);
  385. switch (prefixName) {
  386. case "WJ":
  387. wjApi.connectDevice(
  388. device,
  389. function (res) {
  390. connectSuccess(res);
  391. },
  392. function (res) {
  393. listenStatus(res);
  394. }
  395. );
  396. break;
  397. case "JL":
  398. jlApi.connectDevice(
  399. device,
  400. function (res) {
  401. console.log('设备链接1', res)
  402. connectSuccess(res);
  403. },
  404. function (res) {
  405. console.log('设备链接2', res)
  406. listenStatus(res);
  407. }
  408. );
  409. break;
  410. case "ETC":
  411. jlQZApi.connectDevice(
  412. device,
  413. function (res) {
  414. preDevice(res);
  415. },
  416. function (res) {
  417. listenStatus(res);
  418. }
  419. );
  420. break;
  421. case "JY":
  422. jyApi.connectDevice(
  423. device,
  424. function (res) {
  425. connectSuccess(res);
  426. },
  427. function (res) {
  428. listenStatus(res);
  429. }
  430. );
  431. break;
  432. case "AT":
  433. atApi.connectDevice(
  434. device,
  435. function (res) {
  436. connectSuccess(res);
  437. },
  438. function (res) {
  439. listenStatus(res);
  440. }
  441. );
  442. break;
  443. case "JT":
  444. console.info("连接的是=====123" + prefixName, device);
  445. jtApi.connectDevice(
  446. device,
  447. function (res) {
  448. console.log('设备链接1', res)
  449. connectSuccess(res);
  450. },
  451. function (res) {
  452. console.log('设备链接2', res)
  453. listenStatus(res);
  454. }
  455. );
  456. break;
  457. case "WQ":
  458. wqApi.connectDevice(
  459. device,
  460. function (res) {
  461. connectSuccess(res);
  462. },
  463. function (res) {
  464. listenStatus(res);
  465. }
  466. );
  467. break;
  468. case "CG":
  469. cgApi.connectDevice(
  470. device,
  471. function (res) {
  472. connectSuccess(res);
  473. },
  474. function (res) {
  475. listenStatus(res);
  476. }
  477. );
  478. break;
  479. case "TD":
  480. tdApi.connectDevice(
  481. device,
  482. function (res) {
  483. connectSuccess(res)
  484. }, function (res) {
  485. listenStatus(res);
  486. }
  487. );
  488. break;
  489. case "ZZ":
  490. zzApi.connectDevice(
  491. device,
  492. function (res) {
  493. connectSuccess(res);
  494. },
  495. function (res) {
  496. listenStatus(res);
  497. }
  498. );
  499. break;
  500. default: //未找到设备, 请重新搜索
  501. linkFail();
  502. break;
  503. }
  504. },
  505. fail: function (res) {
  506. console.log(res);
  507. linkFail(); //未找到设备, 请重新搜索
  508. },
  509. });
  510. };
  511. /**
  512. * 未找到设备, 请重新搜索
  513. */
  514. const linkFail = () => {
  515. datas.setData("bluLinkStatus", false);
  516. datas.setData("connectPrefixName", "");
  517. tools.showModalAlert("未找到设备, 请重新搜索", function successFunc() {
  518. load();
  519. });
  520. };
  521. /**
  522. * 连接成功
  523. */
  524. const connectSuccess = (res) => {
  525. console.log("连接回调函数func1");
  526. console.log(res);
  527. if (res.code == 0) {
  528. console.log("连接成功");
  529. tools.hideLoadingAlert(); //关闭加载框
  530. datas.setData("bluLinkStatus", true);
  531. datas.setData("connectPrefixName", connectPrefixName.value);
  532. oks();
  533. } else {
  534. alertF(res.msg);
  535. }
  536. };
  537. function oks() {
  538. //routeType 1.激活(订单来) 2.圈存 (/pages/recharge/recharge来)3.ping码解锁 4.信息读取 5从哪里来回哪里去监听bluetoothLink 7消费明细去圈存 8单位账户圈存 9对公账户修复
  539. if (routeType.value == "1") {
  540. uni.navigateTo({
  541. url: `/subpackage/after-sale/activation/activate?transfer=${state.transfer}`,
  542. });
  543. } else if (routeType.value == "2") {
  544. uni.navigateTo({
  545. url: `/pages/recharge/recharge-weixin?connectSuccess=${state.connectSuccess}`,
  546. });
  547. } else if (routeType.value == "3") {
  548. uni.navigateTo({
  549. url: "/subpackage/after-sale/pin-code-deblocking/pin-code-confirm?state=true&id=" + state.id,
  550. });
  551. } else if (routeType.value == "4") {
  552. uni.navigateTo({
  553. url: "/subpackage/after-sale/deviceInfo/deviceInfo",
  554. });
  555. } else if (routeType.value == "5") {
  556. // #ifdef MP-ALIPAY
  557. uni.navigateTo({
  558. url: "/subpackage/after-sale/activation-once-again/activation-once-again-ali?state=true&id=" + state.id,
  559. });
  560. // #endif
  561. // #ifdef MP-WEIXIN
  562. if (state.difference == "1") {
  563. uni.navigateTo({
  564. url: "/subpackage/after-sale/activation-once-again/activation-once-again?status=true&state=true&id=" + state.id,
  565. });
  566. } else if (state.difference == "2") {
  567. uni.navigateTo({
  568. url: `/subpackage/after-sale/refund-order-balance/refund-order-balance?status=true&state=true&vehicleId=${state.vehicleId}&&id=${state.id}&&refundBalance=${state.refundBalance}`,
  569. });
  570. } else {
  571. uni.$emit('bluetoothLink', { status: true })
  572. uni.navigateBack({
  573. delta: 1
  574. })
  575. }
  576. // #endif
  577. } else if (routeType.value == "6") {
  578. uni.navigateTo({
  579. url: "/subpackage/after-sale/activation-once-again/activation-once-again?state=true&id=" + state.id
  580. });
  581. } else if (routeType.value == "7") {
  582. uni.navigateTo({
  583. url: `/subpackage/personal-center/trapping-and-repairing/recharge-two?rechargeMoney=${state.rechargeMoney}&&orderNum=${state.orderNum}&&payMoney=${state.payMoney}`,
  584. });
  585. } else if (routeType.value == "8") {
  586. uni.navigateTo({
  587. url: `/subpackage/after-sale/account-recharge/recharge-weixin?accountId=${state.accountId}`,
  588. });
  589. } else if (routeType.value == "9") {
  590. uni.navigateTo({
  591. url: `/subpackage/personal-center/trapping-and-repairing-account/recharge-two?rechargeMoney=${state.rechargeMoney}&&orderNum=${state.orderNum}&&payMoney=${state.payMoney}&&accountId=${state.accountId}`,
  592. });
  593. } else {
  594. return;
  595. }
  596. }
  597. /**
  598. * 前装设备
  599. */
  600. const preDevice = (res) => {
  601. if (res.code == 0) {
  602. console.log("连接成功");
  603. datas.setData("bluLinkStatus", true);
  604. datas.setData("connectPrefixName", connectPrefixName.value);
  605. // tools.toUrl(route.preActivateInfo);//跳转 前装设备
  606. } else {
  607. alertF(res.msg);
  608. console.log(res.msg);
  609. }
  610. };
  611. /**
  612. * 监听蓝牙状态
  613. */
  614. const listenStatus = (res) => {
  615. console.log("时时监听蓝牙状态func2", connectPrefixName.value, res.code);
  616. console.log(res);
  617. if (res.code == 0) {
  618. datas.setData("bluLinkStatus", true);
  619. datas.setData("connectPrefixName", connectPrefixName.value);
  620. // oks();
  621. } else {
  622. //断开蓝牙
  623. bluetoothUtil.disconnectDevice();
  624. datas.setData("bluLinkStatus", false);
  625. datas.setData("connectPrefixName", "");
  626. tools.showToastAlert("蓝牙已断开");
  627. // #ifdef MP-ALIPAY
  628. my.closeBluetoothAdapter({
  629. success(res) {
  630. // 关闭蓝牙适配器成功
  631. },
  632. fail(err) {
  633. // 处理关闭蓝牙适配器失败的情况
  634. }
  635. })
  636. // #endif
  637. }
  638. };
  639. /**
  640. * 提示加关蓝牙
  641. */
  642. const alertF = (msg : string) => {
  643. //隐藏加载框
  644. tools.hideLoadingAlert();
  645. //断开蓝牙
  646. bluetoothUtil.disconnectDevice();
  647. //提示对话框
  648. tools.showModalAlert(msg);
  649. };
  650. </script>
  651. <style>
  652. page {
  653. background-color: #f3f3f3;
  654. }
  655. :deep(.u-mode-center-box) {
  656. border-radius: 20rpx;
  657. }
  658. </style>
  659. <style lang="scss" scoped>
  660. .devices {
  661. .device {
  662. width: calc(100% - 30rpx);
  663. margin-left: 30rpx;
  664. display: flex;
  665. flex-direction: row;
  666. align-items: center;
  667. margin-top: 30rpx;
  668. background: white;
  669. padding: 25rpx 20rpx;
  670. border-top-left-radius: 20rpx;
  671. border-bottom-left-radius: 20rpx;
  672. box-shadow: 0px 10px 10rpx 10rpx rgba(223, 223, 223, 0.3);
  673. .head {
  674. width: 120rpx;
  675. height: 120rpx;
  676. border-radius: 10rpx;
  677. background-color: #f3f3f3;
  678. }
  679. .center {
  680. flex: 1;
  681. margin-left: 30rpx;
  682. margin-right: 30rpx;
  683. .name {
  684. font-size: 30rpx;
  685. color: #333333;
  686. }
  687. .desc {
  688. font-size: 26rpx;
  689. color: #666666;
  690. margin-top: 25rpx;
  691. }
  692. }
  693. .icon {
  694. width: 43rpx;
  695. height: 43rpx;
  696. margin-right: 10rpx;
  697. }
  698. }
  699. .hint {
  700. margin: 60rpx 30rpx 0px;
  701. .orange-txt {
  702. font-size: 26rpx;
  703. color: #ff8000;
  704. image {
  705. width: 30rpx;
  706. height: 30rpx;
  707. margin-right: 10rpx;
  708. }
  709. }
  710. .grey-txt {
  711. font-size: 26rpx;
  712. color: #666666;
  713. line-height: 40rpx;
  714. margin-top: 16rpx;
  715. }
  716. }
  717. .btn {
  718. margin: 70rpx 40rpx;
  719. }
  720. }
  721. .red {
  722. display: inline-block;
  723. color: red;
  724. background-color: red;
  725. width: 26rpx;
  726. height: 26rpx;
  727. border-radius: 100%;
  728. }
  729. </style>