Browse Source

feat(signature): S-cfc-138 family.signature.consigneeEditor 实现使绿 - 交付 consignee-edit.vue 收件人编辑+手签名段组件(goSignature 经签名页跳转+signatureConfirm 回传写回,签名选填不拦截),signature.consignee-editor.test.js 13红13绿,routeIntegrate AC5.3 无回归

Sisyphus Agent 4 days ago
parent
commit
f6590c89f
1 changed files with 202 additions and 0 deletions
  1. 202 0
      cfc-frontend/pages/signature/components/consignee-edit.vue

+ 202 - 0
cfc-frontend/pages/signature/components/consignee-edit.vue

@@ -0,0 +1,202 @@
+<template>
+  <view class="consignee-editor">
+    <!-- 收件人姓名 -->
+    <view class="form-row">
+      <text class="form-label">收货人姓名</text>
+      <input
+        v-model="consigneeName"
+        class="form-input"
+        placeholder="请输入姓名"
+        maxlength="30"
+      />
+    </view>
+
+    <!-- 收件人电话 -->
+    <view class="form-row">
+      <text class="form-label">手机号</text>
+      <input
+        v-model="consigneePhone"
+        class="form-input"
+        placeholder="请输入手机号"
+        type="number"
+        maxlength="11"
+      />
+    </view>
+
+    <!-- 收件人地址 -->
+    <view class="form-row">
+      <text class="form-label">收货地址</text>
+      <input
+        v-model="consigneeAddress"
+        class="form-input"
+        placeholder="请输入收货地址"
+        maxlength="120"
+      />
+    </view>
+
+    <!-- 手签名段(选填,符合水机购买 AC4.3 未签名仍可保存语义) -->
+    <view class="form-row form-row-signature">
+      <text class="form-label">手签名</text>
+      <view class="signature-cell">
+        <text v-if="handSignature" class="signature-set">已设置手签名</text>
+        <text v-else class="placeholder">选填,可不上传</text>
+      </view>
+    </view>
+    <view v-if="handSignature" class="signature-block">
+      <image class="signature-preview-img" :src="handSignature" mode="widthFix" />
+    </view>
+    <view class="signature-block">
+      <button class="btn-sign-entry" @click="goSignature">
+        {{ handSignature ? '重新签名' : '去签名' }}
+      </button>
+    </view>
+
+    <!-- 确认回调:收件人信息 + 手签名(选填)一并向上级确认 -->
+    <view class="confirm-bar">
+      <button class="btn-confirm" @click="onConfirm" @confirm="onConfirm">确认</button>
+    </view>
+  </view>
+</template>
+
+<script>
+import { setSignaturePrefill } from '@/utils/signature-bus.js'
+
+export default {
+  name: 'ConsigneeEditor',
+  props: {
+    // 初始收件人信息({ name, phone, address, handSignature }),编辑场景由父级注入(子组件不自行请求接口)
+    value: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      consigneeName: '',
+      consigneePhone: '',
+      consigneeAddress: '',
+      handSignature: ''
+    }
+  },
+  created() {
+    var v = this.value || {}
+    this.consigneeName = v.name || ''
+    this.consigneePhone = v.phone || ''
+    this.consigneeAddress = v.address || ''
+    this.handSignature = v.handSignature || ''
+  },
+  methods: {
+    // 去签名:当前签名经 signature-bus 预填 → 跳转独立横屏签名页;events.signatureConfirm 回传写回预览
+    goSignature() {
+      setSignaturePrefill(this.handSignature || '')
+      uni.navigateTo({
+        url: '/pages/signature/signature?requireAgree=1&agreeText=' + encodeURIComponent('我已阅读并同意,本人确认以上信息真实、准确'),
+        events: {
+          signatureConfirm: (dataUrl) => {
+            this.handSignature = dataUrl || ''
+          }
+        }
+      })
+    },
+    // 确认回调:手签名选填(未签名不拦截),向上级转发收件人信息与签名
+    onConfirm() {
+      var payload = {
+        name: this.consigneeName,
+        phone: this.consigneePhone,
+        address: this.consigneeAddress,
+        handSignature: this.handSignature
+      }
+      if (typeof this.$emit === 'function') {
+        this.$emit('confirm', payload)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.consignee-editor {
+  width: 100%;
+}
+.form-row {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 0;
+  border-bottom: 1rpx solid $facade-fill-2;
+}
+.form-row:last-child {
+  border-bottom: none;
+}
+.form-label {
+  font-size: calc(28rpx * var(--font-scale, 1));
+  color: $facade-text-strong;
+  width: 180rpx;
+  flex-shrink: 0;
+}
+.form-input {
+  flex: 1;
+  font-size: calc(28rpx * var(--font-scale, 1));
+  color: $facade-text-strong;
+  text-align: right;
+  padding: 8rpx 0;
+}
+.form-row-signature {
+  border-bottom: none;
+}
+.signature-cell {
+  flex: 1;
+  text-align: right;
+  font-size: calc(28rpx * var(--font-scale, 1));
+  color: $facade-text-strong;
+  padding: 8rpx 0;
+}
+.signature-cell .placeholder {
+  color: $facade-text-ghost;
+}
+.signature-set {
+  color: $el-success;
+}
+.signature-block {
+  padding: 0 0 24rpx;
+}
+.signature-preview-img {
+  width: 100%;
+  height: auto;
+  background: $app-surface;
+  border: 2rpx dashed $facade-text-ghost;
+  border-radius: 16rpx;
+}
+.btn-sign-entry {
+  width: 100%;
+  height: 80rpx;
+  line-height: 80rpx;
+  padding: 0;
+  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
+  color: $app-surface;
+  border: none;
+  border-radius: 24rpx;
+  font-size: calc(28rpx * var(--font-scale, 1));
+  text-align: center;
+}
+.btn-sign-entry::after {
+  border: none;
+}
+.confirm-bar {
+  padding-top: 40rpx;
+}
+.btn-confirm {
+  width: 100%;
+  height: 88rpx;
+  line-height: 88rpx;
+  padding: 0;
+  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
+  color: $app-surface;
+  border: none;
+  border-radius: 24rpx;
+  font-size: calc(30rpx * var(--font-scale, 1));
+  text-align: center;
+}
+.btn-confirm::after {
+  border: none;
+}
+</style>