|
|
@@ -0,0 +1,804 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="step-bar">
|
|
|
+ <view v-for="(step, index) in steps" :key="index">
|
|
|
+ <view >
|
|
|
+ <view class="h-num">
|
|
|
+ <text>{{ index + 1 }}</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="index !== steps.length - 1" class="separator"></view>
|
|
|
+ </view>
|
|
|
+ <view class="">{{ step }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form">
|
|
|
+ <view v-if="currentStep === 0" class="h-content-wrap">
|
|
|
+ <u--form labelPosition="top" :model="userInfo" :rules="rules" ref="form1">
|
|
|
+ <u-form-item labelWidth="auto" labelAlign="right" label="老系统手机号" prop="phone">
|
|
|
+ <u--input v-model="userInfo.phone" disabledColor="#ffffff" placeholder="填写老系统电话" border="bottom"
|
|
|
+ maxlength="11"></u--input>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="老系统会员姓名" prop="memberName" labelPosition="top" labelWidth="auto" labelAlign="right">
|
|
|
+ <u--input v-model="userInfo.memberName" disabledColor="#ffffff" placeholder="填写姓名" border="bottom"
|
|
|
+ maxlength="16"></u--input>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ <u-form-item label="当前手机号" prop="phonenumber" labelWidth="auto" labelAlign="right">
|
|
|
+ <u--input v-model="userInfo.phonenumber" disabledColor="#ffffff" placeholder="填写当前手机号"
|
|
|
+ border="bottom" maxlength="11"></u--input>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item labelWidth="auto" labelAlign="right" label="验证码" prop="smsCode" width="120">
|
|
|
+ <u--input v-model="userInfo.smsCode" disabledColor="#ffffff" placeholder="请输入验证码" border="bottom"
|
|
|
+ maxlength="6"></u--input>
|
|
|
+ <template #right>
|
|
|
+ <view class="identifying-code">
|
|
|
+ <u-code ref="uCode2" @change="codeChange2" keep-running start-text="获取验证码"></u-code>
|
|
|
+ <text @tap="getCode2" :text="tips2" class="u-page__code-text">{{ tips2 }}</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </u-form-item>
|
|
|
+ </u--form>
|
|
|
+ </view>
|
|
|
+ <view v-if="currentStep === 1">
|
|
|
+ <view class="h-content">
|
|
|
+ <view class="h-basic-info">
|
|
|
+ <view class="h-value">
|
|
|
+ <view class="h-name">会员编号</view>
|
|
|
+ <view class="h-text">{{ userMemberInfo.memberNo }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="h-value">
|
|
|
+ <view class="h-name">会员卡号</view>
|
|
|
+ <view class="h-text">{{ userMemberInfo.memberCard }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="h-value">
|
|
|
+ <view class="h-name">会员姓名</view>
|
|
|
+ <view class="h-text">{{ userMemberInfo.memberName }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="h-value">
|
|
|
+ <view class="h-name">手机号码</view>
|
|
|
+ <view class="h-text">{{ userMemberInfo.phone }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="h-value">
|
|
|
+ <view class="h-name">积分</view>
|
|
|
+ <view class="h-text">{{ userMemberInfo.integral }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="h-value">
|
|
|
+ <view class="h-name">账户余额</view>
|
|
|
+ <view class="h-text">¥{{ userMemberInfo.nowBalance }}</view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="h-value">
|
|
|
+ <view class="h-name">赠送余额</view>
|
|
|
+ <view class="h-text">¥{{userMemberInfo.nowBalance}}</view>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="h-record">
|
|
|
+ <!-- 导航-->
|
|
|
+ <view class="service-order-tab-bar">
|
|
|
+ <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab1' }"
|
|
|
+ @click="changeServiceTab('orderTab1')">
|
|
|
+ <text :class="{ underline: currentServiceTab === 'orderTab1' }">充值记录</text>
|
|
|
+ </view>
|
|
|
+ <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab2' }"
|
|
|
+ @click="changeServiceTab('orderTab2')">
|
|
|
+ <text :class="{ underline: currentServiceTab === 'orderTab2' }">消费记录</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-line"></view>
|
|
|
+ <!-- order -->
|
|
|
+ <view v-if="currentServiceTab == 'orderTab1'" class="store-order-wrap">
|
|
|
+ <view v-for="(item, index) in memberInfoRecords" class="store-order">
|
|
|
+ <view class="h-content">
|
|
|
+ <view class="h-row">
|
|
|
+ <view class="h-value">
|
|
|
+ <text>储值记录</text>
|
|
|
+ </view>
|
|
|
+ <view class="h-value">
|
|
|
+ <text>+ ¥{{ item.rechargeAmount }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="h-row">
|
|
|
+ <view class="h-value">
|
|
|
+ <text class="h-text">{{ item.rechargeTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="h-value h-name">
|
|
|
+ <text class="h-text">账户余额:¥{{ item.nowBalance }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-line"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="currentServiceTab == 'orderTab2'" class="store-order-wrap">
|
|
|
+ <view v-for="(item, index) in memberInfoRecords" class="store-order">
|
|
|
+ <view class="h-content">
|
|
|
+ <view class="h-row">
|
|
|
+ <view class="h-value">
|
|
|
+ <text>消费记录</text>
|
|
|
+ </view>
|
|
|
+ <view class="h-value">
|
|
|
+ <text>- ¥{{ item.consumeAmount }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="h-row">
|
|
|
+ <view class="h-value">
|
|
|
+ <text class="h-text">{{ item.consumeTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="h-value h-name">
|
|
|
+ <text class="h-text">账户余额:¥{{ item.nowBalance }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="custom-line"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="currentStep === 2" class="">
|
|
|
+ <view class="letter-commitment">
|
|
|
+ <view class="h-title">
|
|
|
+ <text>个人信息真实承诺书</text>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ <text>会员姓名:{{ userInfo.memberName }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ <text>老系统手机号: {{ userInfo.phone }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ <text>当前手机号: {{ userInfo.phonenumber }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ <text>为系统迁移: 本人郑重承诺</text>
|
|
|
+ </view>
|
|
|
+ <view class="h-content">
|
|
|
+ <view class="" v-html="termOfService.aboutContent"></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="currentStep === 3" class="">
|
|
|
+ <view class="h-content-step-end">
|
|
|
+ <view class="h-success">
|
|
|
+ <u-icon name="edit-pen-fill" color="#333" size="30"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="h-name">
|
|
|
+ <text>账户迁移成功</text>!
|
|
|
+ </view>
|
|
|
+ <view @click="nextStep(3)" class="h-btn">
|
|
|
+ <text>确认</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="currentStep == 0" class="button-group">
|
|
|
+ <!-- <button @click="prevStep" :disabled="currentStep === 0">上一步</button> -->
|
|
|
+ <button class="h-btn" @click="nextStep(0)" :disabled="currentStep === steps.length - 1">开始查询</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="currentStep == 1" class="button-group">
|
|
|
+ <button @click="prevStep" :disabled="currentStep === 0">上一步</button>
|
|
|
+ <view class="h-btn" @click="nextStep(1)" :disabled="currentStep === steps.length - 1">
|
|
|
+ <text>下一步</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="currentStep == 2" class="button-group">
|
|
|
+ <button @click="prevStep" :disabled="currentStep === 0">上一步</button>
|
|
|
+ <view class="h-btn" @click="nextStep(2)" :disabled="currentStep === steps.length - 1">
|
|
|
+ <text>确认并迁移</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import signature from '../components/sign/sign';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ signature
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showCanvas: false,
|
|
|
+ currentStep: 0,
|
|
|
+ steps: ['账户查询', '信息确认', '用户承诺', '账户迁移'], // 步骤条的文字内容
|
|
|
+ step1Value: '',
|
|
|
+ step2Value: '',
|
|
|
+ step3Value: '',
|
|
|
+ userInfo: {
|
|
|
+ auth: true,
|
|
|
+ phone: '',
|
|
|
+ memberName: '',
|
|
|
+ phonenumber: '',
|
|
|
+ smsCode: '',
|
|
|
+ memberNo: null,
|
|
|
+ type: 7,
|
|
|
+ requstForm: true
|
|
|
+ },
|
|
|
+ // 服务条款对象信息
|
|
|
+ termOfService: {
|
|
|
+ aboutContent: "<p>会员协议会员协议会员协议会员协议会员协议会员协议</p>",
|
|
|
+ aboutType: "1",
|
|
|
+ createBy: "admin",
|
|
|
+ createTime: "2023-07-30 08:53:17",
|
|
|
+ id: "1685574269874098178",
|
|
|
+ status: "0",
|
|
|
+ updateBy: "admin",
|
|
|
+ updateTime: "2023-07-30 21:04:51"
|
|
|
+ },
|
|
|
+ userMemberInfo: {
|
|
|
+ memberNo: "string",
|
|
|
+ pingYinCode: "string",
|
|
|
+ memberName: "string",
|
|
|
+ integral: 0,
|
|
|
+ sex: 0,
|
|
|
+ birthday: "string",
|
|
|
+ phone: "string",
|
|
|
+ memberPassword: "string",
|
|
|
+ height: "string",
|
|
|
+ weight: "string",
|
|
|
+ memberCard: "string",
|
|
|
+ address: "string",
|
|
|
+ nowBalance: 0,
|
|
|
+ totalConsumeAmount: 0,
|
|
|
+ debt: 0,
|
|
|
+ remarks: "string",
|
|
|
+ joinTime: "string",
|
|
|
+ memberStatus: 0,
|
|
|
+ referencesNo: "string",
|
|
|
+ consumeCycle: "string",
|
|
|
+ otherInfo: "string",
|
|
|
+ photoUrl: "string"
|
|
|
+ },
|
|
|
+ memberInfoRecords: [{
|
|
|
+ orderNo: "string",
|
|
|
+ memberNo: "string",
|
|
|
+ memberName: "string",
|
|
|
+ phone: "string",
|
|
|
+ consumeAmount: 0,
|
|
|
+ realPayAmount: 0,
|
|
|
+ profit: 0,
|
|
|
+ integral: 0,
|
|
|
+ remainDebt: 0,
|
|
|
+ consumeTime: "string",
|
|
|
+ remarks: "string",
|
|
|
+ consumeStore: "string",
|
|
|
+ consumeType: "string",
|
|
|
+ discountAmount: 0,
|
|
|
+ bedName: "string",
|
|
|
+ payInfo: "string",
|
|
|
+ memberStore: "string",
|
|
|
+ payType: "string"
|
|
|
+ }],
|
|
|
+ show: false,
|
|
|
+ currentTab: 'tab1', // 当前选中的 Tab
|
|
|
+ currentServiceTab: 'orderTab1', // 当前选中的 Tab
|
|
|
+ defaultColor: '#CCCCCC',
|
|
|
+ currentColor: '#FF0000',
|
|
|
+ completedColor: '#00FF00',
|
|
|
+ content: '一、本人所提供的个人信息 证明材料、证件',
|
|
|
+ signType: '',
|
|
|
+ signImg1: '',
|
|
|
+ tips2: '',
|
|
|
+ rules: {
|
|
|
+ phone: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ min: 10,
|
|
|
+ max: 12,
|
|
|
+ message: '请输入11位电话号码',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 此为同步验证,可以直接返回true或者false,如果是异步验证,稍微不同,见下方说明
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ // 调用uView自带的js验证规则,详见:https://www.uviewui.com/js/test.html
|
|
|
+ return !this.$isDataEmpty(value);
|
|
|
+ },
|
|
|
+ message: "请认真填写电话号码",
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ memberName: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入名字',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ phonenumber: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ min: 10,
|
|
|
+ max: 12,
|
|
|
+ message: '请输入11位电话号码',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 此为同步验证,可以直接返回true或者false,如果是异步验证,稍微不同,见下方说明
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ // 调用uView自带的js验证规则,详见:https://www.uviewui.com/js/test.html
|
|
|
+ return !this.$isDataEmpty(value);
|
|
|
+ },
|
|
|
+ message: "请认真填写电话号码",
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ smsCode: {
|
|
|
+ required: true,
|
|
|
+ min: 4,
|
|
|
+ max: 6,
|
|
|
+ message: '请认真填写验证码',
|
|
|
+ trigger: ['blur', 'change'],
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // 获取服务条款数据
|
|
|
+ this.getTermOfServiceByType();
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.$refs.form1.setRules(this.rules)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 关闭签名框
|
|
|
+ closeCanvas() {
|
|
|
+ this.showCanvas = false;
|
|
|
+ },
|
|
|
+ // 选择签名类型
|
|
|
+ personSing(type) {
|
|
|
+ this.showCanvas = true;
|
|
|
+ this.signType = type;
|
|
|
+ },
|
|
|
+ // 保存签名信息
|
|
|
+ saveCanvasImg(path) {
|
|
|
+ console.log(path)
|
|
|
+ let that = this;
|
|
|
+ uni.uploadFile({
|
|
|
+ url: this.$host + '/resource/oss/upload', //仅为示例,非真实的接口地址
|
|
|
+ filePath: path,
|
|
|
+ name: 'file',
|
|
|
+ header: {
|
|
|
+ 'Authorization': 'Bearer ' + that.$store.state.loginState.accessToken,
|
|
|
+ },
|
|
|
+ success: (uploadFileRes) => {
|
|
|
+ let res = JSON.parse(uploadFileRes.data)
|
|
|
+ console.log(res)
|
|
|
+ that.showCanvas = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ codeChange2(text) {
|
|
|
+ this.tips2 = text;
|
|
|
+ },
|
|
|
+ getCode2() {
|
|
|
+ if (this.$refs.uCode2.canGetCode) {
|
|
|
+ this.$api.getSmsCode();
|
|
|
+ } else {
|
|
|
+ uni.$u.toast('倒计时结束后再发送');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取手机验证码
|
|
|
+ getSmsCode() {
|
|
|
+ let that = this;
|
|
|
+ // 模拟向后端请求验证码
|
|
|
+ uni.showLoading({
|
|
|
+ title: '正在获取验证码'
|
|
|
+ })
|
|
|
+ this.$api.getSmsCode({ data: { phonenumber: this.userInfo.phonenumber, auth: true } }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ // 这里此提示会被this.start()方法中的提示覆盖
|
|
|
+ uni.$u.toast('验证码已发送');
|
|
|
+ // 通知验证码组件内部开始倒计时
|
|
|
+ that.$refs.uCode2.start();
|
|
|
+ }).catch(() => {
|
|
|
+ uni.showToast({
|
|
|
+ title: "操作失败"
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getStepClass(index) {
|
|
|
+ if (index < this.currentStep) {
|
|
|
+ return 'step';
|
|
|
+ } else if (index === this.currentStep) {
|
|
|
+ return ['step', 'active'];
|
|
|
+ } else {
|
|
|
+ return ['step', 'default'];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 查询老会员系统数据
|
|
|
+ getOldMember() {
|
|
|
+ let that = this;
|
|
|
+ this.$api.getOldMember({ data: that.userInfo }).then((res) => {
|
|
|
+ if (!that.$isDataEmpty(res)) {
|
|
|
+ that.userMemberInfo = res;
|
|
|
+ that.userInfo.memberNo = res.memberNo;
|
|
|
+ if (that.currentStep < that.steps.length - 1) {
|
|
|
+ that.currentStep++;
|
|
|
+ }
|
|
|
+ // 查询充值记录
|
|
|
+ that.$api.getOrderRechargeOldList();
|
|
|
+ } else {
|
|
|
+ uni.$u.toast('未查询到数据');
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.showToast({
|
|
|
+ title: "操作失败"
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 查询会员消费记录
|
|
|
+ getOrderConsumeLogOld() {
|
|
|
+ let that = this;
|
|
|
+ this.$api.getOrderConsumeLogOld({ data: this.userInfo }).then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ that.memberInfoRecords = res;
|
|
|
+ }).catch(() => {
|
|
|
+ uni.showToast({
|
|
|
+ title: "操作失败"
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 查询叶会员充值记录
|
|
|
+ getOrderRechargeOldList() {
|
|
|
+ this.$api.getOrderRechargeOldList({ data: this.userInfo }).then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ this.memberInfoRecords = res;
|
|
|
+ }).catch(() => {
|
|
|
+ uni.showToast({
|
|
|
+ title: "操作失败"
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 提交保存
|
|
|
+ submitOldData() {
|
|
|
+ let that = this;
|
|
|
+ this.$api.submitOldData(null, { data: that.userInfo }).then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ if (this.currentStep < this.steps.length - 1) {
|
|
|
+ this.currentStep++;
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.showToast({
|
|
|
+ title: "操作失败"
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ nextStep(idx) {
|
|
|
+ if (idx == 0) { // 查询数据
|
|
|
+ this.$refs.form1.validate().then(res => {
|
|
|
+ this.$api.getOldMember();
|
|
|
+ }).catch(errors => {
|
|
|
+ uni.$u.toast('校验失败,请认真填写')
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ if (idx == 1) { // 显示查询数据
|
|
|
+ if (this.currentStep < this.steps.length - 1) {
|
|
|
+ this.currentStep++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (idx == 2) { // 用户签名确认
|
|
|
+ this.$api.submitOldData();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (idx == 3) { // 迁移成功,重新设置用户数据
|
|
|
+ // 刷新用户信息
|
|
|
+ this.$refreshUserLoginInfo();
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/index/index',
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ prevStep() {
|
|
|
+ if (this.currentStep > 0) {
|
|
|
+ this.currentStep--;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeTab(tab) {
|
|
|
+ this.currentTab = tab;
|
|
|
+ },
|
|
|
+ // 服务订单
|
|
|
+ changeServiceTab(tab) {
|
|
|
+ if (tab == 'orderTab1') {
|
|
|
+ this.$api.getOrderRechargeOldList();
|
|
|
+ } else if (tab == 'orderTab2') {
|
|
|
+ this.$api.getOrderConsumeLogOld();
|
|
|
+ }
|
|
|
+ this.currentServiceTab = tab;
|
|
|
+ },
|
|
|
+ // 获取服务条款信息
|
|
|
+ getTermOfServiceByType() {
|
|
|
+ // 获取数据
|
|
|
+ this.$api.getTermOfServiceByType({ data: this.userInfo }).then((res) => {
|
|
|
+ if (res.aboutContent) {
|
|
|
+ this.termOfService.aboutContent = res.aboutContent
|
|
|
+ } else {
|
|
|
+ this.termOfService.aboutContent = "暂无信息!!!"
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ uni.showToast({
|
|
|
+ title: "操作失败"
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.h-content-step-end {
|
|
|
+ height: 300px;
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 60px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+
|
|
|
+ .h-success {
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ height: 80px;
|
|
|
+ width: 80px;
|
|
|
+ background: #f7fbf3;
|
|
|
+ border-radius: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-name {
|
|
|
+ margin-top: 20px;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-btn {
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 40px;
|
|
|
+ width: 319px;
|
|
|
+ height: 42px;
|
|
|
+ background: #FFE05C;
|
|
|
+ border-radius: 27px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.letter-commitment {
|
|
|
+ padding: 12px;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .h-title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.col-border-2 {
|
|
|
+ margin-top: 12px;
|
|
|
+
|
|
|
+ .sign-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 120px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.sign-agree {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.h-content-wrap {
|
|
|
+ background: #fff;
|
|
|
+ padding-left: 12px;
|
|
|
+ padding-right: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.h-content {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .h-basic-info {
|
|
|
+ padding: 12px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+
|
|
|
+ .h-value {
|
|
|
+ display: flex;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ .h-name {
|
|
|
+ width: 56px;
|
|
|
+ height: 22px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-text {
|
|
|
+ height: 22px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-record {
|
|
|
+ margin-top: 12px;
|
|
|
+
|
|
|
+ /* 服务订单内容*/
|
|
|
+ .service-order-tab-bar {
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 50px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+
|
|
|
+ .service-order-tab-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-order-tab-item.active {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .underline {
|
|
|
+ border-bottom: 2px solid #ff0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.store-order-wrap {
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+ .store-order {
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 3px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+
|
|
|
+ .h-content {
|
|
|
+ .h-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .h-text {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.h-footer {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.signature-wrap {
|
|
|
+ height: 120px;
|
|
|
+ width: 300px;
|
|
|
+}
|
|
|
+
|
|
|
+.step-bar {
|
|
|
+ padding: 12px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.step {
|
|
|
+ position: relative;
|
|
|
+ /* width: 100%; */
|
|
|
+ // height: 40px;
|
|
|
+ /* background-color: #ccc; */
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ height: 30px;
|
|
|
+ width: 30px;
|
|
|
+ background: green;
|
|
|
+ border-radius: 15px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+//.h-num {
|
|
|
+// // height: 30px;
|
|
|
+// // width: 30px;
|
|
|
+// // background: #fff;
|
|
|
+// // border-radius: 15px;
|
|
|
+// // display: flex;
|
|
|
+// // align-items: center;
|
|
|
+// // justify-content: center;
|
|
|
+//}
|
|
|
+
|
|
|
+.step.default {
|
|
|
+ color: #333;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.step.active {
|
|
|
+ color: #333;
|
|
|
+ background: #FFE05C;
|
|
|
+}
|
|
|
+
|
|
|
+.separator {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 130%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 50px;
|
|
|
+ height: 2px;
|
|
|
+ border: 1px dashed #000;
|
|
|
+}
|
|
|
+
|
|
|
+.form {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.button-group {
|
|
|
+ height: 60px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .h-btn {
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 8px;
|
|
|
+ width: 200px;
|
|
|
+ height: 42px;
|
|
|
+ background: #FFE05C;
|
|
|
+ border-radius: 27px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.identifying-code {
|
|
|
+ image {
|
|
|
+ width: 80px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|