feat(takePhoto): 添加证书、联系人和油价信息

- 新增我的证书、办证联系人和油价走势三个模块
- 实现证书列表、联系人列表和油价列表的数据获取和展示
- 添加电话拨打和复制功能
- 优化页面布局和样式

miniprogram/pages/takePhoto/takePhoto.js

@@ -1,6 +1,6 @@
 import { uploadFile } from "../../utils/upload";
 import { subMsg } from "../../utils/wxUtils";
-import { postApi } from "../../apis/api";
+import { postApi, getApi } from "../../apis/api";
 Page({
   data: {
     sign: "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/sign.png",
@@ -18,6 +18,90 @@ Page({
     modalText: "位置",
     shipId: "",
     locked: false,
+    certs: [],
+    contacts: [],
+    oilPriceList: [],
+  },
+  async getCerts() {
+    let { data } = await postApi("/ship/cert/list", {
+      userId: wx.getStorageSync("userId"),
+    });
+    if (data.status === 0) {
+      this.setData({
+        certs: data.result,
+      });
+    } else {
+      this.setData({
+        certs: [],
+      });
+      wx.showToast({
+        title: data.msg,
+        icon: "none",
+      });
+    }
+  },
+  async getContacts() {
+    let { data } = await getApi("/ship/cert/operation/contacts");
+    if (data.status === 0) {
+      this.setData({
+        contacts: data.result,
+      });
+    } else {
+      this.setData({
+        contacts: [],
+      });
+      wx.showToast({
+        title: data.msg,
+        icon: "none",
+      });
+    }
+  },
+  makePhoneCall(e) {
+    wx.makePhoneCall({
+      phoneNumber: e.currentTarget.dataset.phone,
+    });
+  },
+  copy(e) {
+    wx.setClipboardData({
+      data: e.currentTarget.dataset.phone,
+      success(res) {
+        wx.showToast({
+          title: "复制成功",
+        });
+      },
+    });
+  },
+  async getOilPriceList() {
+    let { data } = await postApi("/fuel/list", {});
+    if (data.status === 0) {
+      this.setData({
+        oilPriceList: data.result.map((item, index) => {
+          return {
+            id: index,
+            latitude: item.fuelShipLatitude,
+            longitude: item.fuelShipLongitude,
+            iconPath:
+              "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static%2Fgas-station.png",
+            width: 40,
+            height: 40,
+            ...item,
+            callout: {
+              content: item.vendorName,
+              display: "ALWAYS",
+              bgColor: "none",
+            },
+          };
+        }),
+      });
+    } else {
+      this.setData({
+        oilPriceList: [],
+      });
+      wx.showToast({
+        title: data.msg,
+        icon: "none",
+      });
+    }
   },
   openSetting() {
     this.setData({
@@ -331,6 +415,9 @@ Page({
     let phone = wx.getStorageSync("phone");
     let shipId = wx.getStorageSync("shipId");
     if (userId && shipId) this.checkCheckStatus();
+    this.getCerts();
+    this.getContacts();
+    this.getOilPriceList();
     this.setData({
       userName,
       phone,

miniprogram/pages/takePhoto/takePhoto.json

@@ -1,3 +1,3 @@
 {
   "usingComponents": {}
-}
+}

miniprogram/pages/takePhoto/takePhoto.wxml

@@ -1,4 +1,4 @@
-<view class="top-container" wx:if="{{shipId}}">
+<view class="top-container df aic jcc" wx:if="{{shipId}}">
   <view class="sign" bind:tap="check">{{checkinStatus==0?'签到':'已签到'}}</view>
   <view class="check-time" wx:if="{{checkinStatus==1}}">签到时间: {{checkinDatetime}}</view>
 </view>
@@ -35,4 +35,44 @@
     <view class="service">为了更好的提供服务</view>
     <view class="auth-btn" bindtap="openSetting">请授权{{modalText}}</view>
   </view>
+</view>
+
+<view class="title">我的证书</view>
+<view class="pl30 pr30">
+  <view class="df aic fs28 th">
+    <view class="w20p tac">序号</view>
+    <view class="w40p tac">证书名称</view>
+    <view class="w40p tac">到期时间</view>
+  </view>
+  <view class="df aic jcsb fs28 mt10 tr" wx:for="{{certs}}" wx:key="index">
+    <view class="w20p tac">{{index+1}}</view>
+    <view class="w40p tac">{{item.certTypeName}}</view>
+    <view class="w40p tac">{{item.endValidTime}}</view>
+  </view>
+</view>
+<view class="title">办证联系人</view>
+<view class="pl30 pr30">
+  <view class="df aic jcsb fs28 th">
+    <view class="w40p tac">办事处</view>
+    <view class="w20p tac">姓名</view>
+    <view class="w40p tac">电话</view>
+  </view>
+  <view class="df aic jcsb fs28 mt10 tr" wx:for="{{contacts}}" wx:key="index">
+    <view class="w40p tac">{{item.officeName}}</view>
+    <view class="w20p tac">{{item.contactPerson}}</view>
+    <view class="w40p tac df aic" bind:tap="copy" data-phone="{{item.contactPhone}}">{{item.contactPhone}}
+      <image class="tel ml10" bind:tap="makePhoneCall" data-phone="{{item.contactPhone}}" src="../../images/tel.png" mode="aspectFit" />
+    </view>
+  </view>
+</view>
+<view class="title">油价走势</view>
+<view class="pl30 pr30">
+  <view class="df aic fs28 th">
+    <view class="w50p tac">加油服务商</view>
+    <view class="w50p tac">油价(元/吨)</view>
+  </view>
+  <view class="df aic jcsb fs28 mt10 tr" wx:for="{{oilPriceList}}" wx:key="index">
+    <view class="w50p tac">{{item.vendorName}}</view>
+    <view class="w50p tac">{{item.price}}</view>
+  </view>
 </view>

miniprogram/pages/takePhoto/takePhoto.wxss

@@ -2,8 +2,7 @@
 .top-container {
   position: relative;
   width: 100%;
-  height: 35vh;
-  padding-top: 154rpx;
+  height: 20vh;
   background-size: contain;
   background: green;
 }
@@ -115,23 +114,23 @@
 }
 
 .icon {
-  width: 160rpx;
-  height: 160rpx;
+  width: 120rpx;
+  height: 120rpx;
 }
 
 .camera-cargo {
-  height: 32vh;
+  height: 22vh;
   background: #006ebd;
 }
 
 .camera-bill {
-  height: 33vh;
+  height: 22vh;
   background: #fa283d;
 }
 
 .new-camera {
+  padding-top: 40rpx;
   text-align: center;
-  padding-top: 6vh;
   color: #fff;
   font-size: 42rpx;
 }
@@ -171,4 +170,23 @@
   text-align: center;
   line-height: 80rpx;
   border-radius: 40rpx;
+}
+
+.i-img {
+  width: 45vw;
+  height: 45vw;
+}
+
+.i-text {
+  width: 43vw;
+  height: 45vw;
+  margin-left: 2vw;
+  border: 1rpx solid #eee;
+  box-sizing: border-box;
+  padding: 10rpx;
+}
+
+.tel {
+  width: 60rpx;
+  height: 60rpx;
 }