商家入驻

src/pages/storeEntry/detail.vue

 <template>
-    <view class="container">
-        <Header title="商家入驻"></Header>
+  <view class="container">
+    <Header title="商家入驻"></Header>
+    <view class="content">
+      <view class="formmain">
+        <wd-form ref="form" :model="formData" :rules="rules">
+          <wd-cell-group border>
+            <wd-picker
+              label="店铺类型"
+              placeholder="请选择店铺类型"
+              label-width="100px"
+              prop="promotion"
+              v-model="formData.promotion"
+              :columns="promotionlist"
+            />
+            <wd-input
+              label="店铺名称"
+              label-width="100px"
+              prop="xm"
+              clearable
+              v-model="formData.xm"
+              placeholder="请输入店铺名称"
+            />
+            <wd-input
+              label="联系电话"
+              label-width="100px"
+              prop="sjh"
+              clearable
+              v-model="formData.sjh"
+              placeholder="请输入联系电话"
+            />
+            <wd-input
+              label="所在地区"
+              label-width="100px"
+              v-model="formData.szdq"
+              prop="szdq"
+              readonly
+              placeholder="请选择所在地区"
+              @click="getLocationFn"
+            />
+            <wd-input
+              label="详细地址"
+              label-width="100px"
+              prop="xxdz"
+              clearable
+              v-model="formData.xm"
+              placeholder="请输入详细地址"
+            />
+            <wd-input
+              label="小区/学校"
+              label-width="100px"
+              v-model="formData.szdq"
+              prop="szdq"
+              readonly
+              placeholder="请选择"
+              @click="getLocationFn"
+            />
+            <view class="flex">
+              <view class="logo">LOGO/门头照</view>
+              <wd-upload
+                :file-list="fileList1"
+                image-mode="aspectFill"
+                :action="action"
+                @change="handleChange1"
+                :limit="1"
+                class="img1"
+              ></wd-upload>
+            </view>
+            <view class="flex">
+              <view class="logo">营业执照</view>
+              <wd-upload
+                :file-list="fileList1"
+                image-mode="aspectFill"
+                :action="action"
+                @change="handleChange1"
+                :limit="1"
+                class="img1"
+              ></wd-upload>
+            </view>
+            <view class="flex">
+              <view class="logo">身份证照</view>
+              <wd-upload
+                :file-list="fileList1"
+                image-mode="aspectFill"
+                :action="action"
+                @change="handleChange1"
+                :limit="1"
+                class="img1"
+              ></wd-upload>
+              <wd-upload
+                :file-list="fileList1"
+                image-mode="aspectFill"
+                :action="action"
+                @change="handleChange1"
+                :limit="1"
+                class="img1"
+              ></wd-upload>
+            </view>
 
-        <view class="content">
-            111111
-        </view>
+            <wd-textarea
+              placeholder="请填写评价"
+              label="店铺介绍"
+              label-width="100px"
+              v-model="formData.szdq"
+              prop="szdq"
+              :no-border="false"
+            />
+            <button type="primary" style="width: 80%">提交</button>
+          </wd-cell-group>
+        </wd-form>
+      </view>
     </view>
+  </view>
 </template>
-
 <script setup>
 import Header from '@/pages/order/components/Header/index.vue';
+import { reactive, ref } from 'vue';
+const promotionlist = ref([
+  {
+    value: '1',
+    label: '连锁直营',
+  },
+  {
+    value: '2',
+    label: '连锁加盟',
+  },
+]);
+const fileList = ref([
+  {
+    url: '1',
+  },
+]);
 
+function chooseImage({ fileList: files }) {
+  xma.chooseImage({
+    count: 6, // 默认9
+    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+    sourceType: ['album'], // 从相册选择
+    success: function (res) {
+      console.log(JSON.stringify(res.tempFilePaths));
+    },
+  });
+}
+const formData = ref({
+  systemCode: 'one-centre',
+  promotion: '',
+  xm: '',
+  sfz: '',
+  sjh: '',
+  szdq: '',
+  xxdz: '',
+});
+const form = ref();
+const rules = ref({
+  promotion: [{ required: true, message: '请选择' }],
+  xm: [{ required: true, message: '请输入店铺名称' }],
+  sjh: [{ required: true, message: '请输入联系电话' }],
+  szdq: [{ required: true, message: '请选择' }],
+  xxdz: [{ required: true, message: '请输入详细地址' }],
+});
+const shopDetail = ref({
+  shopAddress: '',
+});
+const getLocationFn = () => {
+  xma.chooseLocation({
+    success: function (res) {
+      console.log('位置名称：' + res.name);
+      console.log('详细地址：' + res.address);
+      console.log('纬度：' + res.latitude);
+      console.log('经度：' + res.longitude);
+    },
+  });
+};
 </script>
 
 <style lang="scss" scoped>
 page {
-    background: #f3f3f3;
+  background: #f3f3f3;
 }
-
 .container {
-    width: 375 * 2rpx;
-    margin: 0 auto;
+  width: 375 * 2rpx;
+  margin: 0 auto;
+  height: 100vh;
+  overflow-y: auto;
+  padding-bottom: 40rpx;
+  .content {
+    padding-top: 88rpx;
+  }
+  .formmain {
+    background: #f3f3f3;
+  }
 
-    .content {
-        padding-top: 88rpx;
+  .flex {
+    display: flex;
+    align-items: flex-start;
+    padding: var(--wot-input-cell-padding, 10px)
+      var(--wot-input-padding, var(--wot-size-side-padding, 15px));
+    background-color: var(--wot-input-cell-bg, var(--wot-color-white, rgb(255, 255, 255)));
+    .logo {
+      position: relative;
+      padding-left: 12px;
+      color: var(--wot-cell-title-color, rgba(0, 0, 0, 0.85));
+      display: inline-block;
+      font-size: var(--wot-input-fs, var(--wot-cell-title-fs, 14px));
+      line-height: var(--wot-cell-line-height, 24px);
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        content: '*';
+        font-size: var(--wot-cell-required-size, 18px);
+        line-height: 1.1;
+        color: var(--wot-cell-required-color, var(--wot-color-danger, #fa4350));
+      }
+    }
+    .img1 {
+      margin-left: 16px;
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>