i

src/pages/users/settled_mer/index.vue

@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import {reactive, ref} from "vue";
+
+const basicData = reactive({
+  name: '',
+  age: '',
+  tel: '',
+  address: ''
+});
+
+const visible = ref(false);
+const merType = ref(false);
+const merGooType = ref(false);
+
+const formValue = ref({
+  merName: '',
+  name: '',
+  phone: '',
+  merType: '',
+  merTypeStr: '',
+  merGooType: '',
+  merGooTypeStr: '',
+});
+
+const ruleForm = ref<any>(null);
+
+const onOk = () => {
+  visible.value = false;
+
+};
+
+const open = () => {
+  console.log('open');
+  visible.value = true;
+};
+
+const confirmMerType = (e: any) => {
+  formValue.value.merTypeStr = e.selectedOptions[0].text;
+  formValue.value.merType = e.selectedOptions[0].value;
+  merType.value = false;
+}
+const confirmGooType = (e: any) => {
+  formValue.value.merGooTypeStr = e.selectedOptions[0].text;
+  formValue.value.merGooType = e.selectedOptions[0].value;
+  merGooType.value = false;
+}
+
+const submit = () => {
+  ruleForm.value.validate().then(({valid, errors}: any) => {
+    if (valid) {
+      console.log('success', formValue.value);
+      visible.value = true;
+    } else {
+      console.log('error submit!!', errors);
+    }
+  });
+}
+</script>
+
+<template>
+  <view class="appBg">
+    <nut-form ref="ruleForm" class="form" :model-value="formValue">
+      <nut-form-item required label="商户名称" prop="merName" :rules="[{
+        required: true,
+        message: '请输入商户名称',
+      }]">
+        <input type="text" v-model="formValue.merName" placeholder="请输入商户名称"/>
+      </nut-form-item>
+      <nut-form-item required label="用户姓名" prop="name" :rules="[{
+        required: true,
+        message: '请输入用户姓名',
+      }]">
+        <input type="text" v-model="formValue.name" placeholder="请输入真实姓名"/>
+      </nut-form-item>
+      <nut-form-item required label="联系电话" prop="phone" :rules="[{
+        required: true,
+        message: '请输入正确的电话号码',
+        regex: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
+      }]">
+        <input type="number" :maxlength="11" v-model="formValue.phone" placeholder="请输入联系电话"/>
+      </nut-form-item>
+      <nut-form-item required label="商户类型" prop="merTypeStr" :rules="[{
+        required: true,
+        message: '请选择商户类型',
+      }]">
+        <input type="text" :disabled="true" v-model="formValue.merTypeStr" placeholder="请选择商户类型"
+               @click="merType = true"/>
+        <nut-popup position="bottom" v-model:visible="merType">
+          <nut-picker :columns="[{
+          text: '供应商',
+          value: '1'
+        },{
+          text: '兑换商',
+          value: '2'
+        }]" title="商户类型" @confirm="confirmMerType" @cancel="merType = false"></nut-picker>
+        </nut-popup>
+      </nut-form-item>
+      <nut-form-item required label="经营类目" prop="merGooTypeStr" :rules="[{
+        required: true,
+        message: '请选择经营类目',
+      }]">
+        <input type="text" :disabled="true" v-model="formValue.merGooTypeStr" placeholder="请选择经营类目"
+               @click="merGooType = true"/>
+        <nut-popup position="bottom" v-model:visible="merGooType">
+          <nut-picker :columns="[{
+          text: '酒吧',
+          value: '1'
+        },{
+          text: 'KTV',
+          value: '2'
+        },{
+          text: '餐饮',
+          value: '2'
+        },{
+          text: '娱乐',
+          value: '4'
+        },{
+          text: '其他',
+          value: '5'
+        }]" title="商户类型" @confirm="confirmGooType" @cancel="merGooType = false"></nut-picker>
+        </nut-popup>
+      </nut-form-item>
+      <view class="btn">
+        <nut-button block type="primary" round @click="submit()">提交</nut-button>
+      </view>
+
+    </nut-form>
+    <!--  入驻协议弹窗  -->
+    <nut-dialog
+        no-cancel-btn
+        title="入驻协议"
+        ok-text="已阅读并且同意"
+        v-model:visible="visible"
+        @ok="onOk"
+    >
+      <view>入驻协议</view>
+    </nut-dialog>
+  </view>
+</template>
+
+<style lang="scss">
+.appBg {
+  background-image: url("../../../static/merchantBg.jpg");
+  background-size: 100%;
+  background-color: #E93423;
+  height: 100vh;
+  background-repeat: no-repeat;
+
+  .form {
+    position: relative;
+    top: 300px;
+
+    .btn {
+      padding: 20px;
+      margin-top: 20px;
+      text-align: center;
+    }
+  }
+}
+</style>