优化

MrShi

2025-08-21 0b33a3dcc3a7592c476d992e1b79a3bc837afb25

 small-program/pages/index/index.vue

@@ -11,14 +11,12 @@
         <view class="search" :style="{ top: statusbarHeight + navHeight + 'px' }">
            <view class="index-j-cate">
               <view class="index-j-cate-item" v-for="(item, index) in searchType" :key="index" @click="clickCate(item.id)">
                  <text :style="{ color: typeVal === item.id ? '##222222' : '' }">{{item.name}}</text>
                  <text :style="{ color: typeVal === item.id ? '#222222' : '', fontSize: typeVal === item.id ? '36rpx' : '', fontWeight: typeVal === item.id ? '600' : '' }">{{item.name}}</text>
                  <view class="index-j-cate-item-x" v-if="typeVal === item.id"></view>
               </view>
            </view>
            <view class="index-j-search">
               <view class="index-j-search-item active">最新发布</view>
               <view class="index-j-search-item">距离优先</view>
               <view class="index-j-search-item">价格从高到低</view>
               <view :class="sortType === item.id ? 'index-j-search-item active' : 'index-j-search-item'" v-for="(item, index) in sortList" :key="index" @click="clickSort(item.id)">{{item.name}}</view>
            </view>
         </view>
         <view class="index-j-list">
@@ -40,31 +38,43 @@
                  {{item.categoryName}}｜{{item.priceNum1}}斤
               </view>
               <view class="index-list-item-info" v-if="item.type === 0 && item.workType === 1">
                  {{item.categoryName}}｜{{item.priceNum1}}斤
                  {{item.categoryName}}｜{{item.priceNum1}}人
               </view>
               <view class="index-list-item-info" v-if="item.type === 0 && item.workType === 2">
                  {{item.categoryName}}｜{{item.priceNum1}}斤
                  {{item.categoryName}}｜{{item.priceNum1}}人
               </view>
               <view class="index-list-item-info" v-if="item.type === 1">
                  {{item.categoryName}}｜{{item.priceNum1}}斤
                  {{item.transportTypeName}} | {{item.transportNum}}{{item.transportUnit}}｜用车{{item.priceNum1}}天
               </view>
               <view class="index-list-item-info" v-if="item.type === 2">
                  {{item.wayInfoCopy}}
               </view>
               <view class="index-list-item-dz">
                  <image src="/static/icon/order_ic_location@2x.png" mode="widthFix"></image>
                  <text>{{item.location}}</text>
					
               <view class="address" v-if="item.type === 1">
                  <view class="address-xian"></view>
                  <view class="address-row" v-for="(address, i) in item.wayInfo" :key="i">
                     <image src="/static/icon/ic_qidian@2x.png" mode="widthFix" v-if="i === 0"></image>
                     <image src="/static/icon/ic_jingguo@2x.png" mode="widthFix" v-else-if="i !== 0 && i !== item.wayInfo.length - 1"></image>
                     <image src="/static/icon/ic_zhongdian@2x.png" mode="widthFix" v-else-if="i === item.wayInfo.length - 1"></image>
                     <text>{{item.location}}</text>
                  </view>
               </view>
               <view class="index-list-item-dz">
                  <image src="/static/icon/order_ic_time@2x.png" mode="widthFix"></image>
                  <text>{{item.startDate}} 至 {{item.endDate}}（{{item.priceNum1}}天）</text>
               </view>
               <template v-if="[0, 2].includes(item.type)">
                  <view class="index-list-item-dz">
                     <image src="/static/icon/order_ic_location@2x.png" mode="widthFix"></image>
                     <text>{{item.location}}</text>
                  </view>
                  <view class="index-list-item-dz">
                     <image src="/static/icon/order_ic_time@2x.png" mode="widthFix"></image>
                     <text>{{item.startDate}} 至 {{item.endDate}}（{{item.totalDays}}天）</text>
                  </view>
               </template>
               <view class="index-list-item-price">
                  <text>预估：</text>
                  <text>¥{{item.estimatedAccount / 100}}</text>
               </view>
               <view class="eidt">
                  <sunui-mverify @change="mverify($event, item.id)"></sunui-mverify>
                  <sunui-mverify @change="getaccept($event, item.id, index)"></sunui-mverify>
               </view>
            </view>
         </view>
@@ -183,7 +193,7 @@
                  </view>
               </view>
               <view class="box-hz-btn" :style="{ backgroundImage: 'url(' + btn + ')' }">
                  <view class="box-hz-btn-kf">客服</view>
                  <view class="box-hz-btn-kf" @click="contactPhone()">客服</view>
                  <view class="box-hz-btn-next" @click="submit">下一步</view>
               </view>
            </view>
@@ -213,10 +223,10 @@
                     </view>
                     <view class="box-hz-list-item" @click="selectAddress(1)">
                        <view class="box-hz-list-item-label"><text>用工地点：</text></view>
                        <view :class="form.location ? 'box-hz-list-item-val active' :'box-hz-list-item-val'">
                        <view :class="form.address ? 'box-hz-list-item-val active' :'box-hz-list-item-val'">
                           <view class="box-hz-list-item-val-left">
                              <image class="icon" src="/static/icon/ic_location@2x.png" mode="widthFix"></image>
                              <text>{{form.location ? form.location : '请选择用工地点'}}</text>
                              <text>{{form.address ? form.address : '请选择用工地点'}}</text>
                           </view>
                           <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
                        </view>
@@ -293,7 +303,7 @@
               </template>
               
               <view class="box-hz-btn" :style="{ backgroundImage: 'url(' + btn + ')' }">
                  <view class="box-hz-btn-kf">客服</view>
                  <view class="box-hz-btn-kf"  @click="contactPhone()" >客服</view>
                  <view class="box-hz-btn-next" @click="jump()">下一步</view>
               </view>
            </view>
@@ -302,34 +312,46 @@
      
      <!-- 选择日期范围 -->
      <u-calendar :show="show" color="#00BC12" mode="range" @close="show = false" @confirm="confirmDate"></u-calendar>
      <u-popup :show="showPhone" round="15" mode="bottom"   @close="contactPhone()" :closeable="true" :closeOnClickOverlay="true">
         <view class="phone">
            <view class="phone-head">
               <view></view>
               <text>客服电话</text> 
            </view>
             <view class="phone-item" v-for="(item,index) in serverPhone"    :key="item" @click="contactPhoneDo(item)">
                <view></view>
                <text>{{item}}</text> 
             </view> 
             <view class="phone-item" v-for="(item,index) in serverPhone"    :key="item" @click="contactPhoneDo(item)">
                <view></view>
                <text>{{item}}</text> 
             </view> 
            <!-- <view class="phone-botton"  @click="contactPhone()" >关闭</view> -->
         </view>
      </u-popup>
   </view>
</template>

<script>
   import { mapState } from 'vuex'
   import sunuiMverify from '@/components/sunui-mverify/sunui-mverify.vue';
   var QQMapWX = require('@/utils/qqmap-wx-jssdk.js');
   export default {
      components: { sunuiMverify },
      computed: {
         ...mapState(['navHeight', 'statusbarHeight','userInfo','token','openid']),
         ...mapState(['navHeight', 'statusbarHeight','userInfo','token','openid', 'latitude', 'longitude']),
         totalPrice() {
            return this.form.estimatedAccount / 100
         }
      },
      onShow(options) {
         this.typeViewId = 0
         if(this.token && this.token != '' && this.userInfo && JSON.stringify(this.userInfo) != '{}'){
            this.isLogin = true
         }
         if (this.userInfo && this.userInfo.useIdentity == 1) {
            this.typeViewId = 1
         }
      },
      data() {
         return {
            showPhone:false,
            serverPhone:[],
            show: false,
            isLogin: false,
            typeId: 0,
            qqmapsdk: null,
            type: [
               { name: '用工', id: 0 },
               { name: '运货', id: 1 },
@@ -345,6 +367,11 @@
               { name: '采摘工', id: 0 },
               { name: '分拣工', id: 1 },
               { name: '包装工', id: 2 }
            ],
            sortList: [
               { name: '最新发布', id: 0 },
               { name: '距离优先', id: 1 },
               { name: '价格从高到低', id: 2 }
            ],
            car: [],
            btn: require('@/static/image/btn.png'),
@@ -375,43 +402,73 @@
               estimatedAccount: '',
               price: ''
            },
				
            sortType: 0,
            orderList: [],
            typeVal: '',
            page: 1
            page: 1,
            next: true,
				
            isOnce: true
         }
      },
      onLoad() {
         this.getCategoryLists()
         this.getOrderList()
      async onLoad() {
         await this.$onLaunched;
			
         if (this.token && this.token != '' && this.userInfo && JSON.stringify(this.userInfo) != '{}') {
            this.getOrderList()
            this.getCategoryLists()
         }
			
         this.qqmapsdk = new QQMapWX({
            key: '4PXBZ-JLBC7-LCLXG-P2SZX-C4HYE-LDBLQ'
         });
			
         this.form.linkPhone = this.userInfo.telephone
			
         this.getDictInfo()
      },
      onShow(options) {
         this.typeViewId = 0
         if(this.token && this.token != '' && this.userInfo && JSON.stringify(this.userInfo) != '{}') {
            console.log('已登陆')
            this.isLogin = true
				
            if (!this.isOnce && this.userInfo.useIdentity == 1) {
               this.page = 1
               this.next = true
               this.orderList = []
               this.getOrderList()
            }
				
         } else {
            this.isLogin = false
            console.log('未登陆')
         }
			
         if (this.userInfo && this.userInfo.useIdentity == 1) {
            this.typeViewId = 1
         }
      },
      watch: {
         typeId: {
            handler(news, old) {
               this.form = {
                  startDate: '',
                  endDate: '',
                  latitude: '',
                  longitude: '',
                  location: '',
                  locationEnd: '',
                  wayInfoDTOList: [],
                  workType: 0,
                  categoryId: '',
                  categoryName: '',
                  days: '',
                  locationRemark: '',
                  supplement: '',
                  multifileList: [],
                  linkName: '',
                  linkPhone: '',
                  estimatedAccount: '',
                  price: ''
               }
               this.form.startDate = ''
					
               this.form.endDate = ''
               this.form.latitude = ''
               this.form.longitude = ''
               this.form.location = ''
               this.form.locationEnd = ''
               this.form.wayInfoDTOList = []
               this.form.workType = ''
               this.form.days = ''
               this.form.locationRemark = ''
               this.form.supplement = ''
               this.form.multifileList = []
               this.form.linkName = ''
               this.form.estimatedAccount = ''
               this.form.price = ''
               this.viewStatus = false
               this.carImage = ''
               this.carRemark = ''
            }
         },
         orderFood: {
@@ -440,33 +497,91 @@
            }
         }
      },
      onReachBottom() {
         this.getOrderList() 
      },
      methods: {
         getDictInfo(){
            var that = this;
            this.$u.api.getPlatformAboutUs({}).then(res =>{ 
                 that.serverPhone = (res.data.serverPhone||'').split(",") 
            })
         },
         contactPhone(){
             this.showPhone = !this.showPhone
             console.log("==================================",this.showPhone)
         },
         contactPhoneDo(phone){ 
            if(phone !=null && phone!=''){
               uni.makePhoneCall({
                  phoneNumber: phone  
               })
            }
         },
         // 手动接单
         getaccept(e, orderId, index) {
            if (!e.msg) return;
            this.$u.api.accept({ orderId })
               .then(res => {
                  if (res.code === 200) {
                     uni.showToast({ title: '抢单成功！', icon: 'success', duration: 2000 })
                     setTimeout(() => {
                        this.page = 1
                        this.next = true
                        this.orderList = []
                        this.getOrderList()
                     }, 2000)
                  }
               })
         },
         clickSort(id) {
            this.sortType = id
            this.page = 1
            this.next = true
            this.orderList = []
            this.getOrderList()
         },
         clickCate(id) {
            this.typeVal = id
            this.page = 1
            this.list = []
            this.next = true
            this.orderList = []
            this.getOrderList()
         },
         // 订单分页
         getOrderList() {
            if (!this.next) return;
            this.$u.api.orderPage({
               capacity: 10,
               page: this.page,
               model: {
                  queryMyOrderType: 2,
                  type: this.typeVal
                  type: this.typeVal,
                  sortType: this.sortType,
                  queryLat: this.latitude,
                  queryLgt: this.longitude
               }
            }).then(res => {
               if (res.code !== 200) return;
               this.isOnce = false
               res.data.records.forEach(item => {
                  // 订餐单
                  if (item.type === 2) {
                     item.wayInfoCopy = JSON.parse(item.wayInfo).map(item => {
                        return `${item.name}${item.price / 100}元(${item.num}份)`
                     }).join(' | ')
                  // 运货
                  } else if (item.type === 1) {
                     item.wayInfo = JSON.parse(item.wayInfo)
                  }
               })
               console.log(res.data.records)
               this.orderList = [...this.orderList, ...res.data.records]
					
               if (this.orderList.length === res.data.total) {
                  this.next = false
               } else {
                  this.page += 1
               }
            })
         },
         // 提交订单
@@ -563,7 +678,9 @@
                  priceNum1: that.form.days,
                  type: 2
               }).then(res => {
                  that.form.estimatedAccount = res.data
                  if (res.code === 200) {
                     that.form.estimatedAccount = res.data
                  }
               })
            }
         },
@@ -604,6 +721,12 @@
         },
         clickType(e) {
            this.typeId = e
            if (e === 2) {
               this.form.categoryId = this.car[0].id
               this.form.categoryName = this.car[0].name
               this.carRemark = this.car[0].remark
               this.carImage = this.car[0].iconFull
            }
         },
         clickTypeWork(e) {
            this.form.workType = e
@@ -636,17 +759,17 @@
               // 采摘工
               if (this.form.workType === 0) {
                  uni.navigateTo({
                     url: `/pages/using-workers/using-workers?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.location}&workType=${form.workType}`
                     url: `/pages/using-workers/using-workers?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.address}&workType=${form.workType}`
                  })
               // 分拣工
               } else if (this.form.workType === 1) {
                  uni.navigateTo({
                     url: `/pages/sorting/sorting?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.location}&workType=${form.workType}`
                     url: `/pages/sorting/sorting?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.address}&workType=${form.workType}`
                  })
               // 包装工
               } else if (this.form.workType === 2) {
                  uni.navigateTo({
                     url: `/pages/packaging-worker/packaging-worker?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.location}&workType=${form.workType}`
                     url: `/pages/packaging-worker/packaging-worker?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.address}&workType=${form.workType}`
                  })
               }
            // 运货
@@ -682,9 +805,6 @@
               })
            }
         },
         mverify(e, id){
            console.log('验证结果:', e, id);
         },
         // 选择套餐
         selectMenu(a, b) {
            this.orderFood.forEach((item, index) => {
@@ -698,24 +818,28 @@
         getCategoryLists() {
            this.$u.api.getCategoryList({ type: 1 })
               .then(res => {
                  this.car = res.data
                  this.form.categoryId = res.data[0].id
                  this.form.categoryName = res.data[0].name
                  this.carRemark = res.data[0].remark
                  this.carImage = res.data[0].iconFull
                  if (res.code === 200) {
                     this.car = res.data
                     this.form.categoryId = res.data[0].id
                     this.form.categoryName = res.data[0].name
                     this.carRemark = res.data[0].remark
                     this.carImage = res.data[0].iconFull
                  }
               })
            this.$u.api.getCategoryList({ type: 2 })
               .then(res => {
                  res.data.forEach(item => {
                     item.num = ''
                     item.list = item.detailList.map(child => {
                        return {
                           active: false,
                           price: child
                        }
                  if (res.code === 200) {
                     res.data.forEach(item => {
                        item.num = ''
                        item.list = item.detailList.map(child => {
                           return {
                              active: false,
                              price: child
                           }
                        })
                     })
                  })
                  this.orderFood = res.data
                     this.orderFood = res.data
                  }
               })
         }
      }
@@ -1618,5 +1742,46 @@
            }
         }
      }
      .phone {
         width: 100%;
         padding-top: 40rpx;
         box-sizing: border-box;
         .phone-botton {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            background: #00BC12;
            border-radius: 44rpx;
            margin-top: 60rpx;
         }
         .phone-head {
            width: 100%;
            text-align: center;
            justify-content: space-between; 
            margin-bottom: 40rpx;
            text {
               font-weight: 800;
               font-size: 32rpx;
               color: #222222;
            }
         }
         .phone-item {
            width: 100%;
            text-align: center;
            justify-content: space-between;  
            border-bottom: 1rpx solid #eeeeee;
            line-height: 78rpx;
            text {
               font-weight: 500;
               font-size: 28rpx;
               line-height: 28rpx;
               color: #222222;
            }
         }
      }
   }
</style>