Browse Source

Add Receipt section in webapp_lite receipt
https://dev.wormwood.com.sg/zentao/task-view-639.html

vbea 1 year ago
parent
commit
2f261c4e6c
1 changed files with 71 additions and 1 deletions
  1. 71 1
      WebApp-Lite/pages/receipt/index.vue

+ 71 - 1
WebApp-Lite/pages/receipt/index.vue

@@ -180,11 +180,50 @@
           </uni-collapse-item>
         </uni-collapse>
       </view>
+      <view class="card-view">
+        <uni-collapse>
+          <uni-collapse-item
+            class="collapse-view"
+            title-border="none"
+            :border="false"
+            v-if="receiptInfo.operator && receiptInfo.operator.operatorName">
+            <template v-slot:title>
+              <view class="receipt-collapse-row">
+                <image
+                  class="receipt-logo"
+                  mode="aspectFit"
+                  v-if="receiptInfo.operator.operatorLogo"
+                  :src="receiptInfo.operator.operatorLogo"/>
+                <view class="flex1">
+                  <view class="receipt-section-title">Operator</view>
+                  <text class="receipt-section-desc">{{receiptInfo.operator.operatorName}}</text>
+                </view>
+              </view>
+            </template>
+            <view class="receipt-section-row" v-if="receiptInfo.operator.operatorUen">
+              <text class="receipt-label2">UEN/BRN:</text>
+              <text class="receipt-value2">{{receiptInfo.operator.operatorUen}}</text>
+            </view>
+            <view class="receipt-section-row" v-if="receiptInfo.operator.operatorAddress">
+              <text class="receipt-label2">Address:</text>
+              <text class="receipt-value2">{{receiptInfo.operator.operatorAddress}}</text>
+            </view>
+            <view class="receipt-section-row" v-if="receiptInfo.operator.operatorWebsite">
+              <text class="receipt-label2">Website:</text>
+              <text class="receipt-value2">{{receiptInfo.operator.operatorWebsite}}</text>
+            </view>
+            <view class="receipt-section-row" v-if="receiptInfo.operator.operatorEmail">
+              <text class="receipt-label2">Email:</text>
+              <text class="receipt-value2">{{receiptInfo.operator.operatorEmail}}</text>
+            </view>
+          </uni-collapse-item>
+        </uni-collapse>
+      </view>
       <view class="card-view flexc" v-if="false">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M13 19C13 15.69 15.69 13 19 13C20.1 13 21.12 13.3 22 13.81V6C22 4.89 21.1 4 20 4H4C2.89 4 2 4.89 2 6V18C2 19.11 2.9 20 4 20H13.09C13.04 19.67 13 19.34 13 19ZM4 8V6L12 11L20 6V8L12 13L4 8ZM17.75 22.16L15 19.16L16.16 18L17.75 19.59L21.34 16L22.5 17.41L17.75 22.16Z" fill="#009E81"/>
         </svg>
-        <view class="text-email">A copy of the receipt will be sent to your e-mail.</view>
+        <view class="text-email">Send receipt to my email</view>
       </view>
       <button class="ui-button button-anim" type="primary" @click="toHome">DONE</button>
     </view>
@@ -382,12 +421,43 @@ import apiCharge from '@/api/apiCharge';
   font-size: 27rpx;
   padding-right: 32rpx;
 }
+.receipt-label2 {
+  flex: 1;
+  color: #666;
+  font-size: 24rpx;
+  padding-right: 32rpx;
+}
 .receipt-value {
   color: #333;
   text-align: right;
   font-size: 26rpx;
   font-weight: bold;
 }
+.receipt-value2 {
+  color: #333;
+  text-align: right;
+  font-size: 26rpx;
+}
+.receipt-logo {
+  width: 60rpx;
+  height: 60rpx;
+  margin-right: 32rpx;
+}
+.receipt-section-title {
+  color: #000;
+  font-size: 28rpx;
+  font-weight: bold;
+}
+.receipt-section-desc {
+  color: #666;
+  font-size: 24rpx;
+}
+.receipt-section-row {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 0rpx;
+  justify-content: space-between;
+}
 .text-email {
   flex: 1;
   color: #222;