完善商家申请页面

src/api/shop.js

@@ -56,7 +56,7 @@ export function sgyrddShopPage(data) {
   });
 }
 
-// 获取店铺入驻类型
+// 获取店铺入驻分类(弹窗)
 export function sgyrShopCategory() {
   return request({
     url: `/sgyrdd/category/tree`,
@@ -73,7 +73,7 @@ export function applyShop(data) {
   });
 }
 
-// 申请成为商家
+// 更改申请信息
 export function editShop(data) {
   return request({
     url: `/sgyrdd/shop/update`,
@@ -81,3 +81,11 @@ export function editShop(data) {
     data,
   });
 }
+
+export function getShopInfoById(data) {
+  return request({
+    url: `/sgyrdd/shop/getShopById`,
+    method: 'GET',
+    data,
+  });
+}

src/pages/storeEntry/detail.vue

@@ -33,11 +33,11 @@
             <wd-input
               label="所在地区"
               label-width="100px"
-              v-model="formData.area"
+              v-model="ssq"
               prop="area"
               readonly
               placeholder="请选择所在地区"
-              @click="chooseShopPosition"
+              @click="changeLocation"
             />
             <wd-input
               label="详细地址"
@@ -116,10 +116,10 @@
               </view>
             </view>
             <view class="flex flexcenter">
-              <view class="logo">店铺分类{{ chooseCategory.categoryId }}</view>
+              <view class="logo">店铺分类</view>
               <view class="shopcatebox">
                 <view class="text shopcateboxtxt" @click="showclass">
-                  <template v-if="choosedShopInfo.length != 0">
+                  <template v-if="choosedShopInfo?.length !== 0">
                     <wd-tag
                       v-for="(item, index) in choosedShopInfo"
                       :key="index"
@@ -138,7 +138,7 @@
                       :file-list="testFileList[item.areaId]"
                       image-mode="aspectFill"
                       :action="action"
-                      @change="handleCategoyChange($event, item.areaId)"
+                      @change="handleCategoyChange($event, item.areaId, item.areaName)"
                       :limit="1"
                       class="img1"
                       :header="headers"
@@ -146,7 +146,9 @@
                     ></wd-upload>
                   </view>
                 </view>
-                <text class="text errormsg" v-if="isCategoryNull">店铺分类未选择</text>
+                <text class="text errormsg" v-if="isCategoryNull">
+                  店铺分类未选择{{ choosedShopInfo }}
+                </text>
               </view>
             </view>
             <wd-textarea
@@ -227,9 +229,32 @@
 import Header from '@/pages/order/components/Header/index.vue';
 import { getToken } from '@/utils/auth';
 import { ref, reactive } from 'vue';
-import { sgyrShopCategory, applyShop, editShop } from '@/api/shop';
+import { sgyrShopCategory, applyShop, editShop, getShopInfoById } from '@/api/shop';
+
+const token = getToken();
+const action = ref(import.meta.env.VITE_APP_BASE_URL + '/sgyrdd/file/update');
+const headers = ref('');
+const fileDomain = import.meta.env.VITE_APP_IMG_URL;
+// 店铺logo图片组
+const fileListShopLogo = ref([]);
+// 身份证正面图片组
+const fileListCardForward = ref([]);
+// 身份证反面图片组
+const fileListCardBackward = ref([]);
+// 店铺营业执照图片组
+const fileListQualifications = ref([]);
+// 门头图片上传是否为空
+const shopLogoNull = ref(false);
+// 身份证正面上传是否为空
+const cardForwardNull = ref(false);
+// 身份证反面上传是否为空
+const cardBackwardNull = ref(false);
+// 营业执照上传是否为空
+const qualificationsNull = ref(false);
 // 用户选择的分类
 const choosedShopInfo = ref([]);
+// 临时创建的用户选择分类
+const tempChoosedData = ref([]);
 // 确保choosedShopInfo内是用户最新选择的分类
 const chooseShopType = (id, name) => {
   let hasSameData = false;
@@ -239,13 +264,16 @@ const chooseShopType = (id, name) => {
     }
   });
   if (!hasSameData) {
-    choosedShopInfo.value.push({ areaId: id, areaName: name });
+    choosedShopInfo.value.push({ areaId: id, areaName: name, qualifications: '' });
+    tempChoosedData.value.push(id);
   } else {
     choosedShopInfo.value = choosedShopInfo.value.filter((item) => {
       return item.areaId !== id;
     });
   }
 };
+
+// 删除图片之前的提示
 const beforeRemove = ({ file, fileList, resolve }) => {
   xma.showModal({
     title: '提示',
@@ -253,7 +281,6 @@ const beforeRemove = ({ file, fileList, resolve }) => {
     success: function (res) {
       if (res.confirm) {
         xma.showToast({ title: '删除成功', duration: 2000 });
-        console.log(fileList);
         resolve(true);
       } else if (res.cancel) {
         xma.showToast({ title: '取消删除操作', duration: 2000 });
@@ -261,50 +288,49 @@ const beforeRemove = ({ file, fileList, resolve }) => {
     },
   });
 };
-const token = getToken();
-// 上传图片地址
-const action = ref(import.meta.env.VITE_APP_BASE_URL + '/sgyrdd/file/update');
-const headers = ref('');
-// const fileDomain = import.meta.env.VITE_APP_IMG_URL;
-// 店铺logo图片组
-const fileListShopLogo = ref([]);
-// 身份证正面图片组
-const fileListCardForward = ref([]);
-// 身份证反面图片组
-const fileListCardBackward = ref([]);
-// 店铺资质图片组
-const fileListQualifications = ref([]);
-// 门头图片上传是否为空
-const shopLogoNull = ref(false);
-// 身份证正面上传是否为空
-const cardForwardNull = ref(false);
-// 身份证反面上传是否为空
-const cardBackwardNull = ref(false);
-// 资质图片上传是否为空
-const qualificationsNull = ref(false);
+
 /**
- * 图片地址处理
+ * 图片地址处理，以逗号拼接
  */
 const processingImageAddresses = (fileList) => {
   const data = fileList.value.map((item) => {
+    console.log(JSON.parse(item.response));
     return JSON.parse(item.response).data.url;
   });
   return data.join(',');
 };
-
 const processingImageAddresses1 = (fileList) => {
   const data = fileList.map((item) => {
     return JSON.parse(item.response).data.url;
   });
   return data.join(',');
 };
+
 const categoryShopsList = ref({});
+
+// 新增经营资质上传
 const testFileList = ref([]);
-const handleCategoyChange = ({ fileList: files }, val) => {
-  testFileList.value[val] = files;
+const handleCategoyChange = ({ fileList: files }, valId, valName) => {
+  testFileList.value[valId] = files;
+  // 资质上传图片
+  // 资质清空图片
+
+  choosedShopInfo.value.forEach((item) => {
+    if (item.areaId === valId) {
+      choosedShopInfo.value.forEach((item) => {
+        if (item.areaId === valId) {
+          item.qualifications =
+            files.length === 0 ? '' : processingImageAddresses1(testFileList.value[valId]);
+        }
+      });
+    }
+  });
 
-  categoryShopsList.value[val] = processingImageAddresses1(testFileList.value[val]);
+  console.log('在删除或上传资质图片时');
+  console.log(choosedShopInfo.value);
 };
+
+// 店铺logo门头上传
 const handleLogoFileChange = ({ fileList: files }) => {
   if (files.length > 0) {
     shopLogoNull.value = false;
@@ -315,6 +341,7 @@ const handleLogoFileChange = ({ fileList: files }) => {
     fileListShopLogo.value = [];
   }
 };
+// 身份证正面上传
 const handleIndentityForwardChange = ({ fileList: files }) => {
   if (files.length > 0) {
     cardForwardNull.value = false;
@@ -325,7 +352,7 @@ const handleIndentityForwardChange = ({ fileList: files }) => {
     fileListCardForward.value = [];
   }
 };
-
+// 身份证反面上传
 const handleIndentityBackwardChange = ({ fileList: files }) => {
   if (files.length > 0) {
     cardBackwardNull.value = false;
@@ -336,12 +363,12 @@ const handleIndentityBackwardChange = ({ fileList: files }) => {
     fileListCardBackward.value = [];
   }
 };
-
+// 营业执照上传
 const handleQualificationsChange = ({ fileList: files }) => {
   if (files.length > 0) {
     qualificationsNull.value = false;
     fileListQualifications.value = files;
-    categoryShops.qualifications = processingImageAddresses(fileListQualifications);
+    formData.license = processingImageAddresses(fileListQualifications);
   } else {
     qualificationsNull.value = true;
     fileListQualifications.value = [];
@@ -352,139 +379,171 @@ const shopCategoryTree = ref([]);
 
 const categoryActiveIndex = ref(0);
 const isNewFlag = ref(true);
+const exsitedData = ref();
+const dealCategoryData = ref([]);
+
 onLoad((options) => {
   headers.value = { Authorization: 'Bearer ' + token };
-  getShopCategoryFun();
-  if (options.content === 0) {
+  if (options.id != null) {
     isNewFlag.value = false;
+    console.log(options.id);
+    getShopInfoByIdFun({ shopId: options.id });
   }
+  getShopCategoryFun();
 });
 
+// 获取店铺入驻分类（弹窗tree）
 const getShopCategoryFun = async () => {
   const res = await sgyrShopCategory();
   shopCategoryTree.value = res.data;
-  // console.log(shopCategoryTree.value);
 };
-
+// 新增店铺数据
 const applyShopFun = async (data) => {
   const res = await applyShop(data);
   console.log(res);
 };
-
+// 编辑店铺数据
 const editShopFun = async (data) => {
   const res = await editShop(data);
   console.log(res);
 };
+// 根据shopId获取店铺数据
+const getShopInfoByIdFun = async (data) => {
+  // let shopDetail = reactive({});
+  // const categoryShops = ref([]);
+  // const information = ref({});
+  const res = await getShopInfoById(data);
+  exsitedData.value = res.data;
+  console.log(exsitedData.value);
+  // 店铺信息
+  const shopDetail = reactive(exsitedData.value.shopDetail);
+  const categoryShopsChoosed = reactive(exsitedData.value.categoryShops);
+  console.log('~~~~');
+  console.log(categoryShopsChoosed.length);
+  const information = reactive(exsitedData.value.information);
+  // information.value = exsitedData.value.information;
+  // 店铺名称
+  formData.shopId = data.shopId;
+  formData.shopName = shopDetail.shopName;
+  // 店铺简介
+  formData.intro = shopDetail.intro;
+  // 联系电话
+  formData.tel = shopDetail.tel;
+  // 店铺所在纬度
+  formData.shopLat = shopDetail.shopLat;
+  // 店铺所在经度
+  formData.shopLng = shopDetail.shopLng;
+  // 店铺详细地址
+  formData.shopAddress = shopDetail.shopAddress;
+  // 省份
+  formData.province = shopDetail.province;
+  // 城市
+  formData.city = shopDetail.city;
+  // 区县
+  formData.area = shopDetail.area;
+  console.log(fileDomain + shopDetail.shopLogo);
+  // 店铺LOGO
+  // fileListShopLogo.value = fileDomain + shopDetail.value.shopLogo;
+
+  // 店铺logo图片组
+  fileListShopLogo.value[0] = { url: fileDomain + shopDetail.shopLogo };
+  formData.shopLogo = shopDetail.shopLogo;
+  // 店铺营业执照图片组
+  fileListQualifications.value[0] = { url: fileDomain + shopDetail.license };
+  formData.license = shopDetail.license;
+  // 身份证正面图片组
+  fileListCardForward.value[0] = { url: fileDomain + information.identityCardFront };
+  shopPersonalInformation.identityCardFront = information.identityCardFront;
+  // 身份证反面图片组
+  fileListCardBackward.value[0] = { url: fileDomain + information.identityCardReverse };
+  shopPersonalInformation.identityCardReverse = information.identityCardReverse;
+
+  categoryShopsChoosed.forEach((item) => {
+    choosedShopInfo.value.push({
+      areaId: item.categoryId,
+      areaName: item.categoryName,
+      qualifications: item.qualifications,
+    });
+  });
+  testFileList.value = choosedShopInfo.value.reduce((obj, item) => {
+    if (item.qualifications === '') {
+      obj[item.areaId] = [];
+    } else {
+      obj[item.areaId] = [{ url: fileDomain + item.qualifications }];
+    }
+
+    return obj;
+  }, {});
+};
 
+// 店铺分类：点击左侧团购、助农tab，添加active样式，清空选择的店铺类型数组
 const setActiveCategory = (index) => {
   console.log(index);
   categoryActiveIndex.value = index;
   choosedShopArr.value = [];
 };
-/* const promotionlist = ref([
-  {
-    value: '1',
-    label: '连锁直营',
-  },
-  {
-    value: '2',
-    label: '连锁加盟',
-  },
-]); */
+
+// 店铺分类是否显示
 const show = ref(false);
+// 关闭店铺分类弹出层
 const handleClose = () => {
   show.value = false;
-  // choosedShopInfo.value = [];
-  // categoryShopsList.value = {};
-  // testFileList.value = [];
-  // choosedShopArr.value = [];
 };
-let originChooseCategoryLength = 0;
+// 原添加的店铺分类个数
+const originChooseCategoryLength = 0;
+
+// 店铺分类弹窗点击“确定”按钮
+// 新增资质，添加动态变量绑定
+// 根据choosedShopInfo，更新categoryShopsList的值
 const chooseCategory = () => {
   show.value = false;
 
-  // 对新增资质上传，添加动态变量绑定
-  if (choosedShopInfo.value.length > originChooseCategoryLength) {
-    for (let i = originChooseCategoryLength; i < choosedShopInfo.value.length; i++) {
-      testFileList.value[choosedShopInfo.value[i].areaId] = [];
-      // testFileList.value.push({ areaId: choosedShopInfo.value[i].areaId, arr: [] });
+  testFileList.value = choosedShopInfo.value.reduce((obj, item) => {
+    if (item.qualifications === '') {
+      obj[item.areaId] = [];
+    } else {
+      obj[item.areaId] = [{ url: fileDomain + item.qualifications }];
     }
-    originChooseCategoryLength = choosedShopInfo.value.length;
-  }
 
-  // 对于移除资质上传，重新匹配choosedShopInfo和categoryShopsList的值
-  // choosedShopInfo [{ areaId: id, areaName: name },{ areaId: id, areaName: name }]
-  // categoryShopsList {'3235':'xxxxx','3699':'yyyy'}
-  for (const key in categoryShopsList.value) {
-    let hasThisKey = false;
-    for (let i = 0; i < choosedShopInfo.value.length; i++) {
-      if (choosedShopInfo.value[i].areaId === key) {
-        hasThisKey = true;
-      }
-    }
-    if (!hasThisKey) {
-      delete categoryShopsList.value[key];
-    }
-  }
-  console.log(choosedShopInfo.value);
-  console.log(categoryShopsList.value);
+    return obj;
+  }, {});
 };
+// 显示店铺分类弹窗
 const showclass = () => {
   show.value = true;
 };
 const isCategoryNull = ref(false);
-function chooseImage({ fileList: files }) {
-  xma.chooseImage({
-    count: 6, // 默认9
-    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
-    sourceType: ['album'], // 从相册选择
-    success: function (res) {
-      console.log(JSON.stringify(res.tempFilePaths));
-    },
-  });
-}
-
-const shopDetail = reactive({
-  shopName: '', // 店铺名称
-  intro: '', // 店铺简介
-  tel: '', // 联系电话
-  shopLat: 0.0, // 店铺所在纬度
-  shopLng: 0.0, // 店铺所在经度
-  shopAddress: '', // 店铺详细地址
-  province: '贵州', // 省份
-  city: '贵阳', // 城市
-  area: '南明', // 区县
-  shopLogo: '', // 店铺LOGO
-  transactionStart: '', // 营业开始时间
-  transactionEnd: '', // 营业结束时间
-  communities: [], // 绑定小区
-});
 
+// 身份证信息获取
 const shopPersonalInformation = reactive({
   identityCardFront: '', // 身份证正面
   identityCardReverse: '', // 身份证反面
 });
 
 const categoryShops = reactive({
-  categoryId: '3237', // 分类id
+  categoryId: '', // 分类id
   qualifications: '', // 经营资质图片，以,分割
 });
+
 const formData = reactive({
-  shopName: '我是店铺名称', // 店铺名称
-  intro: '我是店铺简介', // 店铺简介
-  tel: '13699999999', // 联系电话
+  shopId: '', // 店铺
+  shopName: '', // 店铺名称
+  intro: '', // 店铺简介
+  tel: '', // 联系电话
   shopLat: 0.0, // 店铺所在纬度
   shopLng: 0.0, // 店铺所在经度
   shopAddress: '', // 店铺详细地址
-  province: '贵州', // 省份
-  city: '贵阳', // 城市
-  area: '南明', // 区县
+  province: '贵州省', // 省份
+  city: '贵阳市', // 城市
+  area: '南明区', // 区县
   shopLogo: '', // 店铺LOGO
+  license: '',
   transactionStart: '', // 营业开始时间
   transactionEnd: '', // 营业结束时间
   communities: [], // 绑定小区
 });
-
+const ssq = ref();
+ssq.value = formData.province + formData.city + formData.area;
 const form = ref();
 const test = ref();
 
@@ -509,9 +568,6 @@ const rules = ref({
   shopAddress: [{ required: true, message: '请输入详细地址' }],
   area: [{ required: true, message: '请选择地区' }],
 });
-/* const shopDetail = ref({
-  shopAddress: '',
-}); */
 
 const chooseShopPosition = async () => {
   const res = await getLocationFn();
@@ -549,8 +605,11 @@ const getLocationFn = () => {
   }); */
 };
 
+const getShopRelatedInfo = () => {};
 const submitData = () => {
-  categoryShops.categoryId === '' ? (isCategoryNull.value = true) : (isCategoryNull.value = false);
+  choosedShopInfo.value.length === 0
+    ? (isCategoryNull.value = true)
+    : (isCategoryNull.value = false);
   fileListShopLogo.value.length === 0 ? (shopLogoNull.value = true) : (shopLogoNull.value = false);
   fileListCardForward.value.length === 0
     ? (cardForwardNull.value = true)
@@ -561,17 +620,17 @@ const submitData = () => {
   fileListQualifications.value.length === 0
     ? (qualificationsNull.value = true)
     : (qualificationsNull.value = false);
-
-  const dealCategoryData = ref([]);
-
+  console.log('choosedShopInfo的值为');
+  console.log(choosedShopInfo.value);
+  dealCategoryData.value = [];
+  // 获取需要上传的店铺分类数据
   for (let i = 0; i < choosedShopInfo.value.length; i++) {
     dealCategoryData.value.push({
       categoryId: choosedShopInfo.value[i].areaId,
-      qualifications: categoryShopsList.value[choosedShopInfo.value[i].areaId] || '',
+      qualifications: choosedShopInfo.value[i].qualifications,
     });
   }
 
-  console.log(dealCategoryData.value);
   form.value
     .validate()
     .then(({ valid, errors }) => {
@@ -597,6 +656,37 @@ const submitData = () => {
       console.log(error, 'error');
     });
 };
+
+// 重新定位收货地址
+async function changeLocation() {
+  uni.chooseLocation({
+    success: function (res) {
+      // forMData.value.city = res.address;
+      formData.shopAddress = res.address;
+      formData.shopLng = res.longitude;
+      formData.shopLat = res.latitude;
+      console.log('第一层回调');
+      console.log(res);
+      uni.request({
+        url: '/ws/geocoder/v1/',
+        data: {
+          key: 'MN4BZ-7JXKW-2RYRD-32QGF-AHONV-PAFUN',
+          location: `${res.latitude},${res.longitude}`,
+        },
+        success: function (res) {
+          // console.log('逆地理编码：' + JSON.stringify(res));
+          console.log('第二层回调');
+          console.log(res);
+          if (res.data.status === 0) {
+            formData.province = res.data.result.address_component.province;
+            formData.city = res.data.result.address_component.city;
+            formData.area = res.data.result.address_component.district;
+          }
+        },
+      });
+    },
+  });
+}
 </script>
 
 <style lang="scss" scoped>