選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

transfer-page-sign.vue 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
  1. <template>
  2. <view class="content">
  3. <view><text>车牌号:</text><input placeholder="请输入车牌号" v-model="state.vehiclePlate"/></view>
  4. <view><text>车牌颜色:</text>
  5. <view style="width: 60%;">
  6. <uni-data-select style="width: 100%;" v-model="state.vehiclePlateColor" :localdata="state.colorRange" @change="changeColor"
  7. :clear="false"></uni-data-select>
  8. </view>
  9. </view>
  10. <view><text>身份证后四位:</text><input placeholder="请输入身份证后四位" v-model="state.idCard"/></view>
  11. <view><text>手机号码:</text><input placeholder="请输入手机号码" v-model="state.mobile"/></view>
  12. <view class="action">
  13. <button type="default" class="ui-btn" @click="query()">
  14. 查询
  15. </button>
  16. </view>
  17. </view>
  18. <view class="details" v-if="state.isDetails">
  19. <view><text>车牌号</text><text class="car">{{state.details['vehiclePlate']}}</text></view>
  20. <view><text>车牌颜色</text><text class="car">{{getVehiclePlateColor(state.details['vehiclePlateColor'])}}</text></view>
  21. <view><text>车主姓名</text><text class="car">{{state.details['ownerName']}}</text></view>
  22. <view v-if="state.details['handlerName']"><text>办理人</text><text class="car">{{state.details['handlerName']}}</text></view>
  23. <view><text>产品名称</text><text class="car">{{state.details['productName']}}</text></view>
  24. <view><text style="width:60%;">权益说明</text><text class="car">{{state.details['rightsDesc']}}</text></view>
  25. <view><text>产品金额</text><text class="car">¥{{state.details['productAmount']*0.01}}</text></view>
  26. <view><text>应付金额</text><text class="car">¥{{state.details['productAmount']*0.01}}</text></view>
  27. <view class="noborder other-free">无其他费用</view>
  28. <view class="noborder yansghi">
  29. <checkbox-group @change="checkboxChange">
  30. <checkbox :checked="state.checked" style="transform: scale(0.65)" />
  31. <text class='txt'>我已阅读并同意</text>
  32. </checkbox-group>
  33. <text v-for="(item,index) in state.agreeURL" class="txt xieyi" @click="downAuthD(item)">《{{item.name}}》</text>
  34. </view>
  35. <view class="action" style="margin-bottom: 30rpx;">
  36. <button type="default" class="ui-btn" @click="savaHandle()" v-if="state.isSign">
  37. {{state.words}}
  38. </button>
  39. <button type="default" class="ui-btn" @click="sign()" v-else>
  40. 去签署协议
  41. </button>
  42. </view>
  43. </view>
  44. </template>
  45. <script setup lang="ts">
  46. import { reactive } from "vue";
  47. import { onLoad,onShow } from "@dcloudio/uni-app";
  48. import {
  49. navTo,hasLogin
  50. } from "@/utils/utils"
  51. import {agreementInSertOrder,contractQuery,orderQuery,accountSign,agreeOrderProdcut,envs,queryKey} from "@/utils/network/api.js";
  52. import {
  53. getItem,
  54. StorageKeys,
  55. setItem
  56. } from "@/utils/storage";
  57. import {requestNew} from "@/utils/network/request.js";
  58. import { msg } from "@/utils/utils";
  59. import { vehiclePlateColorPai } from "@/datas/vehiclePlateColor.js";
  60. import {
  61. getVehiclePlateColor
  62. } from "@/datas/vehiclePlateColor";
  63. import {
  64. OrderStatus
  65. } from "@/datas/enum";
  66. import useOrderSkip from "@/composables/order/useOrderSkip";
  67. const { gotoActiveOrder} = useOrderSkip();
  68. const state = reactive({
  69. checked:false,
  70. agreeURL: [],
  71. agreements:[],
  72. isSign:false,
  73. colorRange:[],
  74. idCard:"",
  75. mobile:"",
  76. vehiclePlate:"",
  77. vehiclePlateColor:"",
  78. details:{},
  79. isDetails:false,
  80. orderId:"",
  81. words:""
  82. });
  83. onShow(()=>{
  84. if(state.orderId){
  85. contractRequest()
  86. }
  87. // 没登录情况
  88. if (!hasLogin()) {
  89. quanKeyAction()
  90. navTo( `/login/login?back=1`)
  91. }
  92. if(getItem('key')){
  93. let getColor = getItem('key')['VEHICLE_COLOR_TYPE'];
  94. for (var k = 0; k < getColor.length; k++) {
  95. let obj = {};
  96. obj['value'] = getColor[k]['code']
  97. obj['text'] = getColor[k]['name']
  98. state.colorRange.push(obj)
  99. }
  100. }
  101. })
  102. const quanKeyAction = () => {
  103. var data = {};
  104. const options = {
  105. type: 2,
  106. data: data,
  107. method: "POST",
  108. };
  109. requestNew(queryKey, options).then((res) => {
  110. const data =res
  111. console.log("枚举", data)
  112. setItem('key', data.dictTypeAndItem)
  113. })
  114. .catch((err) => {
  115. console.log(err);
  116. });
  117. }
  118. onLoad(() => {
  119. })
  120. const query=()=>{
  121. if(!state.vehiclePlate){
  122. msg('请输入车牌号')
  123. return;
  124. }
  125. if(!state.vehiclePlateColor){
  126. msg('请选择车牌颜色')
  127. return;
  128. }
  129. if(!state.idCard){
  130. msg('请输入身份证后四位')
  131. return;
  132. }
  133. if(!state.mobile){
  134. msg('请输入手机号码')
  135. return;
  136. }
  137. const options = {
  138. type: 2,
  139. data: {
  140. vehiclePlate: state.vehiclePlate,
  141. vehiclePlateColor: state.vehiclePlateColor,
  142. idCard: state.idCard,
  143. mobile: state.mobile,
  144. },
  145. method: "POST",
  146. showLoading: true,
  147. };
  148. requestNew(orderQuery, options).then((res) => {
  149. console.log("擦寻",res)
  150. state.details=res
  151. setItem('orderQueryActivate',res)
  152. state.isDetails=true
  153. state.orderId=res.orderNo
  154. queryAgreement()
  155. })
  156. }
  157. const getWrlds=()=>{
  158. if(state.details['orderStatus']!= OrderStatus.已取消){
  159. // 去支付
  160. if(state.details['orderStep']==OrderStatus['完成车辆信息上传/待支付'] || state.details['orderStep']==OrderStatus['待支付2']){
  161. state.words="去支付"
  162. }else if(state.details['orderStep'] == OrderStatus['已支付/待签约']){
  163. // 去签约
  164. state.words="去签约"
  165. }else if(state.details['orderStep'] == OrderStatus['待激活']){
  166. // 待激活
  167. state.words="去激活"
  168. }
  169. }
  170. }
  171. const savaHandle=()=>{
  172. if (state.checked) {
  173. if(state.details['orderStatus']!= OrderStatus.已取消){
  174. // 去支付
  175. if(state.details['orderStep']==OrderStatus['完成车辆信息上传/待支付'] || state.details['orderStep']==OrderStatus['待支付2']){
  176. agreementConfirm().then((value) => {
  177. console.log("协议确认", value)
  178. let vehicleId=state.details['vehiclePlate']+"_"+state.details['vehiclePlateColor']
  179. let isValueCard=1
  180. // qtSign 1 去签约
  181. if(state.details['qtSign']==1){
  182. isValueCard=2
  183. }
  184. // orderQuery 1 订单查询 0正常订单
  185. navTo(`/subpackage/orders/order_payment?orderId=${state.orderId}&&isValueCard=${isValueCard}&vehicleId=${vehicleId}&orderQuery=1`);
  186. })
  187. }else if(state.details['orderStep'] == OrderStatus['已支付/待签约']){
  188. // 去签约
  189. if(state.details['qtSign']==0){
  190. // 不需要在我们这边签约提示
  191. uni.showModal({
  192. title: '提示',
  193. content: '请在渠道工具完成签约',
  194. success: function (res) {
  195. if (res.confirm) {
  196. console.log('用户点击确定');
  197. } else if (res.cancel) {
  198. console.log('用户点击取消');
  199. }
  200. }
  201. });
  202. }else{
  203. navTo(`/subpackage/orders/release-products?orderId=${state.orderId}&orderQuery=1`);
  204. }
  205. }else if(state.details['orderStep'] == OrderStatus['待激活']){
  206. // 待激活
  207. gotoActiveOrder(state.details)
  208. }
  209. }
  210. } else {
  211. msg("请勾选协议");
  212. }
  213. }
  214. // 协议确认接口
  215. const agreementConfirm = () => {
  216. const options = {
  217. type: 2,
  218. data: {
  219. orderId: state.orderId,
  220. protocol: state.checked ? 1 : 0,
  221. agreements: state.agreements
  222. },
  223. method: "POST",
  224. showLoading: true,
  225. };
  226. return new Promise(async (resolve, reject) => {
  227. const res = await requestNew(agreeOrderProdcut, options);
  228. const data = res;
  229. console.log("确认协议", data)
  230. resolve(data);
  231. }).catch((error) => {
  232. reject(error);
  233. });
  234. };
  235. const checkboxChange = (e) => {
  236. state.checked = !state.checked;
  237. console.log(state.checked);
  238. };
  239. // 查协议
  240. const queryAgreement = () => {
  241. const options = {
  242. type: 2,
  243. data: {
  244. orderId: state.orderId, //订单编号
  245. status: 1
  246. },
  247. method: "POST",
  248. showLoading: true,
  249. };
  250. requestNew(agreementInSertOrder, options).then((res) => {
  251. let data = res;
  252. let supAgreeArr = data.data
  253. // 每次点击先清空
  254. state.agreeURL=[]
  255. console.log("data==", supAgreeArr)
  256. for (var m = 0; m < supAgreeArr.length; m++) {
  257. let obj = {}
  258. obj['name'] = supAgreeArr[m]['name']
  259. for (var k = 0; k < supAgreeArr[m]['address'].length; k++) {
  260. state.agreements.push(supAgreeArr[m]['address'][k]['id'])
  261. obj['url'] = envs[process.env.NODE_ENV].baseUrl + supAgreeArr[m]['address'][k]['url']
  262. state.agreeURL.push(obj)
  263. }
  264. }
  265. contractRequest()
  266. console.log("查协议", state.agreeURL)
  267. });
  268. }
  269. const downAuthD = (item) => {
  270. console.log('=======123', item)
  271. console.log("uni.env.USER_DATA_PATH '", uni.env.USER_DATA_PATH + '/' + '产品协议.docx')
  272. // 文件后缀截取
  273. var index = item.url.lastIndexOf("\.");
  274. let fileType = item.url.substring(index + 1, item.url.length);
  275. console.log("fileType", fileType)
  276. uni.downloadFile({
  277. url: item.url,
  278. filePath: uni.env.USER_DATA_PATH + '/' + item.name + '.' + fileType,
  279. success(res) {
  280. const filePath = res.filePath
  281. console.log("filePath", filePath)
  282. uni.openDocument({
  283. filePath: filePath,
  284. fileType: fileType,
  285. showMenu: true, //关键点
  286. success: function (res) {
  287. },
  288. fail: function (err) {
  289. msg("打开文档失败");
  290. }
  291. });
  292. },
  293. fail: function (err) {
  294. msg("下载文档失败");
  295. console.log("err", err)
  296. },
  297. complete(res) {
  298. }
  299. })
  300. }
  301. // 查询是否签署协议
  302. const contractRequest=()=>{
  303. const options = {
  304. type: 2,
  305. data: {
  306. orderId: state.orderId, //订单编号
  307. },
  308. method: "POST",
  309. showLoading: true,
  310. };
  311. requestNew(contractQuery, options).then((res) => {
  312. if(res.contractState==1){
  313. state.isSign=true
  314. // 协议签署了复选框选上
  315. state.checked=true
  316. }else{
  317. state.isSign=false
  318. state.checked=false
  319. }
  320. getWrlds()
  321. console.log("查询是否签署协议", res)
  322. });
  323. }
  324. // 去签署协议
  325. const sign=()=>{
  326. const options = {
  327. type: 2,
  328. data: {
  329. orderId: state.orderId, //订单编号
  330. },
  331. method: "POST",
  332. showLoading: true,
  333. };
  334. requestNew(accountSign, options).then((res) => {
  335. uni.navigateToMiniProgram({
  336. appId: 'wxeee4ac6e61915479',
  337. path: `/pages/externel/view/view?random=${res.random}&envType=product`,
  338. envVersion: 'release',
  339. fail:(error)=>{
  340. console.log(error);
  341. }
  342. })
  343. console.log("去签署协议", res)
  344. });
  345. }
  346. const changeColor = (e) => {
  347. state.vehiclePlateColor = e
  348. console.log(e)
  349. }
  350. </script>
  351. <style scoped lang="scss">
  352. .content{
  353. font-size: 30rpx;
  354. background-color: white;
  355. box-sizing: border-box;
  356. padding: 20rpx 30rpx 40rpx 30rpx;
  357. view{
  358. display: flex;
  359. margin-bottom: 4rpx;
  360. align-items: center;
  361. height: 76rpx;
  362. text{
  363. width:30%;
  364. }
  365. input{
  366. border:1rpx solid #ccc ;
  367. padding: 6rpx 10rpx;
  368. width: 60%;
  369. border-radius: 5rpx;
  370. box-sizing: border-box;
  371. height: 60rpx;
  372. }
  373. }
  374. }
  375. .details{
  376. font-size: 30rpx;
  377. background-color: white;
  378. box-sizing: border-box;
  379. padding: 20rpx 30rpx;
  380. margin-top: 30rpx;
  381. view{
  382. border-bottom: 1rpx solid #ccc;
  383. // height: 62rpx;
  384. line-height: 62rpx;
  385. display: flex;
  386. justify-content: space-between;
  387. .car{
  388. font-weight: bold;
  389. }
  390. }
  391. .noborder{
  392. border-bottom: none;
  393. }
  394. .other-free{
  395. display: flex;
  396. justify-content: flex-end;
  397. }
  398. .sure{
  399. margin: 30rpx 0;
  400. }
  401. }
  402. .action{
  403. margin-top: 30rpx;
  404. }
  405. ::v-deep .uni-select{
  406. box-sizing: border-box !important;
  407. padding-left: 10rpx !important;
  408. border:1rpx solid #ccc ;
  409. height: 60rpx !important;
  410. }
  411. ::v-deep .uni-select__input-text{
  412. font-size: 30rpx !important;
  413. }
  414. .yansghi{
  415. height: auto !important;
  416. line-height: normal !important;
  417. display: flex !important;
  418. justify-content: flex-start !important;
  419. flex-shrink: 1 !important;
  420. flex-wrap: wrap !important;
  421. align-items: center !important;
  422. }
  423. </style>