|
|
@@ -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>
|