达人下单

components.d.ts

@@ -21,6 +21,8 @@ declare module '@vue/runtime-core' {
     Tabbar: typeof import('./src/components/tabbar/index.vue')['default']
     Tensorflow: typeof import('./src/components/arFrame/tensorflow.vue')['default']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
+    VanAddressEdit: typeof import('vant/es')['AddressEdit']
+    VanArea: typeof import('vant/es')['Area']
     VanDivider: typeof import('vant/es')['Divider']
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']

index.html

@@ -12,4 +12,9 @@
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
+  <style>
+    .address-item .van-address-edit__buttons {
+      display: none!important;
+    }
+  </style>
 </html>

src/app.css

@@ -28,4 +28,4 @@ canvas {
   top: 0;
   width: 100vw;
   height: 100vh;
-}
+}

src/views/badge/index.vue

@@ -11,12 +11,15 @@
             {{ orderStat.order_no }}
           </div>
         </div>
-        <div class="order-type-item" v-if="orderStat.prod_id">
+        <div class="order-type-item" v-if="prodId">
           <div class="order-type-item-title">
             产品类型
           </div>
-          <div class="order-type-item-title">
+          <div class="order-type-item-title" v-if="orderStat.type_id == 1">
-            {{ orderStat.prod_id == 7 ? '人物立体徽章' : '宠物立体徽章'}}
+            {{ prodId == 7 ? '人物立体徽章' : '宠物立体徽章'}}
+          </div>
+          <div class="order-type-item-title" v-if="orderStat.type_id == 2">
+            {{ prodId == 7 ? '人物浮雕相框' : '宠物浮雕相框'}}
           </div>
         </div>
       </div>
@@ -105,6 +108,17 @@
         </div>
       </div>
     </div>
+    <div class="tag-change-box" v-if="orderStat.use_type == 2">
+      <div class="tag-change-item">
+        <div class="tag-change-item-title" :class="{ tagActive: prodId == 7 }" @click="prodId = 7">
+          人物主体
+        </div>
+        <div class="tag-change-item-title" :class="{ tagActive: prodId == 8 }" @click="prodId = 8">
+          宠物主体
+        </div>
+      </div>
+      <div style="font-size: 12px; color: #888; text-align: center;">注：不同主体的照片检测标准不同</div>
+    </div>
     <div class="step-line" v-if="prop == '3D真人肖像'">
       <div class="step-line-item">
         <div class="step-line-item-title">
@@ -158,7 +172,7 @@
     </div>
     <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 7">温馨提示：请上传只有{{ prop == '3D真人肖像' ? '1' : '1-3' }}人的照片</div>
     <div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;" v-if="prodId == 8">温馨提示：请上传只有1-3只宠物的照片</div>
-    <div style="height: 90px;"></div>
+    <div style="height: 120px;"></div>
     <div class="design-action-bar">
       <div class="design-left">
         <img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt="">
@@ -251,6 +265,15 @@ const options = ref({
   info: true
 })
 
+onMounted(() => {
+  watch(
+    () => prodId.value,
+    () => {
+      getSundryList()
+    }
+  )
+})
+
 // 判断是否是APP
 const openApp = () => {
   const ua = navigator.userAgent;
@@ -286,12 +309,14 @@ const sizeList = ref([])
 const getSizeList = () => {
   badgeApi.getOrderPrice({}).then((res: any) => {
     sizeList.value = res
-    sizeList.value.forEach((item: any) => {
+    if (orderStat.value.use_type == 1) {
-      if (item.shape_item == null || item.shape_item == undefined || item.shape_item == '' || !item.shape_item) {
+      sizeList.value.forEach((item: any) => {
-        showToast('该链接异常，请联系客服')
+        if (item.shape_item == null || item.shape_item == undefined || item.shape_item == '' || !item.shape_item) {
-        return
+          showToast('该链接异常，请联系客服')
-      }
+          return
-    })
+        }
+      })
+    }
   })
 }
 
@@ -1201,4 +1226,35 @@ onMounted(() => {
   background: #50cf54;
   color: #fff;
 }
+.tag-change-box {
+  margin: 0 auto;
+}
+.tag-change-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  padding: 10px 0;
+}
+.tag-change-item-title {
+  font-size: 14px;
+  color: #333;
+  background: #E5E5E5;
+  width: 120px;
+  height: 32px;
+  text-align: center;
+  line-height: 32px;
+}
+.tag-change-item-title:first-child {
+  border-top-left-radius: 16px;
+  border-bottom-left-radius: 16px;
+}
+.tag-change-item-title:last-child {
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+.tag-change-item-title.tagActive {
+  background: #50CF54;
+  color: #fff;
+}
 </style>

src/views/badge/preview.vue

@@ -50,7 +50,8 @@
     </div>
     <div class="info-section">
       <div class="info-item">
-        <div class="info-title">{{ prodId == 7 ? '人物立体徽章' : '宠物立体徽章' }}</div>
+        <div class="info-title" v-if="orderStat.type_id == 1">{{ prodId == 7 ? '人物立体徽章' : '宠物立体徽章' }}</div>
+        <div class="info-title" v-if="orderStat.type_id == 2">{{ prodId == 7 ? '人物浮雕相框' : '宠物浮雕相框' }}</div>
         <div class="info-content">产品类型</div>
       </div>
       <div class="info-item">
@@ -91,16 +92,38 @@
     <div class="order-section" v-if="trialCode == false && imageUrl">
       <div class="order-title">订购数量</div>
       <block v-for="item in sizeList" :key="item.id">
-        <div class="order-item" v-show="item.shape_id == shapeId">
+        <block v-if="orderStat.use_type == 1">
-          <span class="order-size">{{ item.size }}</span>
+          <div class="order-item" v-show="item.shape_id == shapeId">
-          <span class="order-free">(剩余兑换：{{ item.remaining }})</span>
+            <span class="order-size">{{ item.size }}</span>
-          <div class="order-ctrl">
+            <span class="order-free">(剩余兑换：{{ item.remaining }})</span>
-            <van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" />
+            <div class="order-ctrl">
+              <van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" />
+            </div>
           </div>
-        </div>
+        </block>
+        <block v-if="orderStat.use_type == 2">
+          <div class="order-item">
+            <span class="order-size">{{ item.size }}</span>
+            <span class="order-free">(剩余兑换：{{ item.remaining }})</span>
+            <div class="order-ctrl">
+              <van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" />
+            </div>
+          </div>
+        </block>
       </block>
     </div>
-    <div style="height: 110px;"></div>
+    <div class="address-box" v-if="orderStat.use_type == 2 && imageUrl">
+      <div class="order-title" style="padding: 0 16px;">收货地址</div>
+      <div class="address-item">
+        <van-address-edit
+          :area-list="areaList"
+          @change="nameTelChange"
+          @change-area="changeArea"
+          @change-detail="onChangeDetail"
+        />
+      </div>
+    </div>
+    <div style="height: 130px;"></div>
     <div class="confirm-box">
       <div class="action-section">
         <button v-if="trialCode == false" @click="sureReload" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
@@ -144,9 +167,10 @@
 <script setup lang="ts">
 import { onMounted, ref, onUnmounted } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { showSuccessToast, showToast, showNotify, showConfirmDialog  } from 'vant';
+import { showSuccessToast, showToast, showNotify, showConfirmDialog, AddressEdit, Area } from 'vant';
 import { localStorage } from '@/utils/local-storage'
 import * as badgeApi from '@/api/badge'
+import { areaList } from '@/utils/area'
 const router = useRouter();
 const value = ref(0);
 const showReload = ref(false)
@@ -259,22 +283,59 @@ const getSizeList = () => {
   badgeApi.getOrderPrice({}).then((res: any) => {
     console.log('getSizeList', res);
     sizeList.value = res
-    sizeList.value.forEach((item: any) => {
+    if (orderStat.value.use_type == 1) {
-      if (item.shape_item) {
+      sizeList.value.forEach((item: any) => {
-        if (!shapeList.value.some(shape => shape.id === item.shape_id)) {
+        if (item.shape_item) {
-          shapeList.value.push(item.shape_item)
+          if (!shapeList.value.some(shape => shape.id === item.shape_id)) {
+            shapeList.value.push(item.shape_item)
+          }
+        } else {
+          showToast('该链接异常，请联系客服')
+          return
         }
-      } else {
+      })
-        showToast('该链接异常，请联系客服')
+      if (shapeList.value.length > 0) {
-        return
+        shapeChange(shapeList.value[0])
       }
-    })
+    } else {
-    if (shapeList.value.length > 0) {
+      getShapeList()
-      shapeChange(shapeList.value[0])
     }
   })
 }
 
+const contact_name = ref('')
+const contact_mobile = ref('')
+const province_id = ref(0)
+const city_id = ref(0)
+const county_id = ref(0)
+const province_name = ref('')
+const city_name = ref('')
+const county_name = ref('')
+const address = ref('')
+const nameTelChange = (res: any) => {
+  console.log('nameTelChange', res)
+  if (res.key == 'name') {
+    contact_name.value = res.value
+  } else {
+    contact_mobile.value = res.value
+  }
+}
+
+const changeArea = (value: any) => {
+  console.log('changeArea', value)
+  province_id.value = value[0].value
+  city_id.value = value[1].value
+  county_id.value = value[2].value
+  province_name.value = value[0].text
+  city_name.value = value[1].text
+  county_name.value = value[2].text
+}
+
+const onChangeDetail = (value: any) => {
+  console.log('onChangeDetail', value)
+  address.value = value
+}
+
 const payAmount = ref(0)
 const changeValue = (value: number) => {
   console.log(value) 
@@ -286,8 +347,24 @@ const loading = ref(false)
 const confirm = () => {
   if (loading.value) return
   console.log('confirm')
-  if (payAmount.value <= 0) {
+  // if (payAmount.value <= 0) {
-    showToast('请先选择下单数量')
+  //   showToast('请先选择下单数量')
+  //   return
+  // }
+  if (orderStat.value.use_type == 2 && !contact_name.value) {
+    showToast('请先填写收货人信息')
+    return
+  }
+  if (orderStat.value.use_type == 2 && !contact_mobile.value) {
+    showToast('请先填写收货人手机号')
+    return
+  }
+  if (orderStat.value.use_type == 2 && !province_id.value) {
+    showToast('请先选择地区')
+    return
+  }
+  if (orderStat.value.use_type == 2 && !address.value) {
+    showToast('请先填写详细地址')
     return
   }
   getPosition()
@@ -307,6 +384,19 @@ const confirm = () => {
       shape_id: shapeId.value,
       custom_text: shapeText.value
     }
+    if (orderStat.value.use_type == 2) {
+      parms.province_id = province_id.value
+      parms.city_id = city_id.value
+      parms.county_id = county_id.value
+      parms.province_name = province_name.value
+      parms.city_name = city_name.value
+      parms.county_name = county_name.value
+      parms.address = address.value
+      parms.contact_name = contact_name.value
+      parms.contact_mobile = contact_mobile.value
+      parms.addr_id = 0
+      parms.country_id = 45
+    }
     badgeApi.creatOrder(parms).then((res: any) => {
       console.log('creatOrder', res)
       showSuccessToast({
@@ -502,7 +592,8 @@ const custom_switch = ref(0)
 const limitCount = ref(10)
 const getShapeList = () => {
   badgeApi.getShapeList({
-    prod_id: prodId.value
+    prod_id: prodId.value,
+    type_id: orderStat.value.type_id
   }).then((res: any) => {
     console.log('getShapeList', res)
     shapeList.value = res.list
@@ -630,7 +721,6 @@ const getTrialCode = () => {
     trialCode.value = true
   } else {
     getOrderStat()
-    getSizeList()
   }
 }
 
@@ -639,6 +729,7 @@ const getOrderStat = () => {
   badgeApi.getOrderStat({}).then((res: any) => {
     console.log('getOrderStat', res)
     orderStat.value = res
+    getSizeList()
   })
 }
 
@@ -1231,4 +1322,7 @@ onUnmounted(() => {
 .shape-item-image-round {
   border-radius: 50%;
 }
+.van-address-edit {
+  padding: 0!important;
+}
 </style>