fix

我vscode保存自动自带的格式化代码

src/components/service/index.vue

@@ -1,14 +1,23 @@
 <template>
   <view>
-    <view class="sort" >
+    <view class="sort">
       <!-- <view class="list" v-for="(item,index) of item" @click="$Router.push(`/pages/business/detail?id=${item.id}`)"> -->
-      <view class="list" v-for="(item,index) of item" @click="handlerRouterSkip(item,index)">
+      <view
+        class="list"
+        :key="index"
+        v-for="(item, index) of item"
+        @click="handlerRouterSkip(item, index)"
+      >
         <!-- <Image src="../../static/logo.png" @tap="$Router.push('/pages/business/service/index')" /> -->
-        <image class="img" :src="
+        <image
+          class="img"
+          :src="
             error || !loaded
               ? 'https://cdn.uviewui.com/uview/album/10.jpg'
               : item.logo
-          " mode="scaleToFill" ></image>
+          "
+          mode="scaleToFill"
+        ></image>
         <view>
           <view class="item-text">{{ item.address }}</view>
           <view class="item-flex">
@@ -59,104 +68,104 @@
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        show: false,
-        showDate: false,
-        value1: Number(new Date()),
-        count:2,
-        value:10
-      };
+export default {
+  data() {
+    return {
+      show: false,
+      showDate: false,
+      value1: Number(new Date()),
+      count: 2,
+      value: 10,
+    };
+  },
+  props: ['item', 'skipType'],
+
+  methods: {
+    click(item) {
+      console.log('item', item);
     },
-    props:['item','skipType'],
-
-    methods: {
-      click(item) {
-        console.log('item', item);
-      },
-      open() {
-        // console.log('open');
-      },
-      close() {
-        this.show = false;
-        // console.log('close');
-      },
-
-      // 点击跳转
-      handlerRouterSkip(item){
-        if(this.skipType == 0){
-          uni.navigateTo({
-            url:`/pages/business/detail?id=${item.id}`
-          })
-        }else if(this.skipType == 1){
-          uni.navigateTo({
-            url:`/pages/business/service/detail?id=${item.id}`
-          })
-        }
+    open() {
+      // console.log('open');
+    },
+    close() {
+      this.show = false;
+      // console.log('close');
+    },
+
+    // 点击跳转
+    handlerRouterSkip(item) {
+      if (this.skipType == 0) {
+        uni.navigateTo({
+          url: `/pages/business/detail?id=${item.id}`,
+        });
+      } else if (this.skipType == 1) {
+        uni.navigateTo({
+          url: `/pages/business/service/detail?id=${item.id}`,
+        });
       }
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  /*商家服务分类的是实现 */
+/*商家服务分类的是实现 */
 
-  .sort {
-    background-color: #EFEFEF;
+.sort {
+  background-color: #efefef;
 
-    .list {
-      height: 250rpx;
-      background-color: #fff;
-      padding:  20rpx;
-      margin-bottom: 20rpx;
-      display: flex;
-      .img {
-        width: 180px;
-        height: calc(100% - 20rpx);
-        margin: 10rpx 20rpx 10rpx 0;
-      }
+  .list {
+    height: 250rpx;
+    background-color: #fff;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+    display: flex;
+    .img {
+      width: 180px;
+      height: calc(100% - 20rpx);
+      margin: 10rpx 20rpx 10rpx 0;
+    }
 
-      .item-text {
-        font-weight: bold;
-        margin: 10rpx 0 10rpx;
-        color: #333;
-      }
+    .item-text {
+      font-weight: bold;
+      margin: 10rpx 0 10rpx;
+      color: #333;
+    }
 
-      .item-flex {
+    .item-flex {
+      display: flex;
+      justify-content: space-between;
+      font-size: 28rpx;
+      margin: 0 20rpx 10rpx 0;
+      color: #0d0d0d66;
+
+      .star {
         display: flex;
-        justify-content: space-between;
-        font-size: 28rpx;
-        margin: 0 20rpx 10rpx 0;
-        color: #0d0d0d66;
-
-        .star {
-          display: flex;
-
-          .line {
-            margin-left: 16rpx;
-            margin-top: 5rpx;
-            font-size: 22rpx;
-          }
-
-          .points {
-            color: #ff4b04;
-            font-size: 22rpx;
-            margin-top: 6rpx;
-            margin-left: 10rpx;
-          }
+
+        .line {
+          margin-left: 16rpx;
+          margin-top: 5rpx;
+          font-size: 22rpx;
         }
-      }
 
-      .list-item{
-        display: flex;
-        justify-content: space-between;
-        margin-top: 40rpx;
-        .item-l{
-          color: #CFCFCF;
+        .points {
+          color: #ff4b04;
+          font-size: 22rpx;
+          margin-top: 6rpx;
+          margin-left: 10rpx;
         }
-        .item-r{
-          color: #252525;
+      }
+    }
+
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 40rpx;
+      .item-l {
+        color: #cfcfcf;
+      }
+      .item-r {
+        color: #252525;
 
         .Buy {
           width: 40px;
@@ -167,7 +176,7 @@
           display: inline-block;
           border-radius: 0 16px 16px 0;
           background-color: #ec5729;
-		      padding-bottom:20rpx;
+          padding-bottom: 20rpx;
         }
       }
 

src/pages/business/detail.vue

@@ -2,11 +2,24 @@
   <view class="detail">
     <!-- 轮播图 -->
     <view class="carousel-map">
-      <u-swiper :list="list3" previousMargin="0" nextMargin="100" circular :autoplay="false" bgColor="#ffffff" />
+      <u-swiper
+        :list="list3"
+        previousMargin="0"
+        nextMargin="100"
+        circular
+        :autoplay="false"
+        bgColor="#ffffff"
+      />
       <view class="carousel-item">
         <view class="mark">
-          <view class="mark-item">{{merchant.score}}分</view>
-          <u-rate :count="count" v-model="value" active-color="#fff" inactive-color="#fff" :size="12" />
+          <view class="mark-item">{{ merchant.score }}分</view>
+          <u-rate
+            :count="count"
+            v-model="value"
+            active-color="#fff"
+            inactive-color="#fff"
+            :size="12"
+          />
         </view>
         <view class="good-item">近期有6266个购买者给了给好评</view>
       </view>
@@ -15,16 +28,18 @@
     <!-- 商家信息 -->
     <view class="merchant-info">
       <view class="info-title">
-        <view>{{merchant.name}}</view>
-        <text class="info-mark">{{merchant.sale/10000}}w+单</text>
+        <view>{{ merchant.name }}</view>
+        <text class="info-mark">{{ merchant.sale / 10000 }}w+单</text>
       </view>
       <view class="info-tag">商家信息</view>
       <view class="info-item">
         <view class="info-text">
-          <view>营业时间：{{merchant.opening}}</view>
-          <view>电话号码：{{merchant.mobile}}</view>
-          <view>{{merchant.address}}</view>
-          <view class="distance">{{(merchant.distance/1000).toFixed(2)}}km</view>
+          <view>营业时间：{{ merchant.opening }}</view>
+          <view>电话号码：{{ merchant.mobile }}</view>
+          <view>{{ merchant.address }}</view>
+          <view class="distance"
+            >{{ (merchant.distance / 1000).toFixed(2) }}km</view
+          >
         </view>
         <view class="info-icon">
           <view class="info-map">
@@ -39,7 +54,12 @@
       </view>
     </view>
 
-    <view class="list" v-for="(item,index) of goods" @click="handlerSkipGoodsDetail(item,index)">
+    <view
+      class="list"
+      :key="index"
+      v-for="(item, index) of goods"
+      @click="handlerSkipGoodsDetail(item, index)"
+    >
       <!-- <image class="img" :src="
 		      error || !loaded
 		        ? 'https://cdn.uviewui.com/uview/album/10.jpg'
@@ -58,441 +78,473 @@
         </view>
         <view class="list-item">
           <view class="list-price">
-            <view class="item-l">券后价 <span>￥{{ (item.originalPrice).toFixed(2) }}</span> </view>
-            <view class="item-r">门市价 <span>￥{{ (item.specialPrice).toFixed(2) }}</span></view>
+            <view class="item-l"
+              >券后价 <span>￥{{ item.originalPrice.toFixed(2) }}</span>
+            </view>
+            <view class="item-r"
+              >门市价 <span>￥{{ item.specialPrice.toFixed(2) }}</span></view
+            >
           </view>
           <view class="btn-box">
-            <button class='btn btn1' @click.stop="handlerService(item,index)">预约</button>
-            <button class='btn btn2' @click.stop="handlerSkipBuy(item,index)">购买</button>
+            <button class="btn btn1" @click.stop="handlerService(item, index)">
+              预约
+            </button>
+            <button class="btn btn2" @click.stop="handlerSkipBuy(item, index)">
+              购买
+            </button>
           </view>
         </view>
       </view>
     </view>
-    <u-empty v-if="goods.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
-
-    <u-popup :show="reserve_show" @close="reserve_show = false" @open="open" round='20' mode='center'>
+    <u-empty
+      v-if="goods.length == 0"
+      mode="data"
+      icon="http://cdn.uviewui.com/uview/empty/data.png"
+    >
+    </u-empty>
+
+    <u-popup
+      :show="reserve_show"
+      @close="reserve_show = false"
+      @open="open"
+      round="20"
+      mode="center"
+    >
       <view class="draw-box">
         <view class="draw-title"> 预约服务 </view>
         <view class="draw-item">
           <view class="item-text">时间</view>
-          <view class="time-box" @click="handlerSelectTime" :class=" template_time == '' ? 'time-text' : ''">
+          <view
+            class="time-box"
+            @click="handlerSelectTime"
+            :class="template_time == '' ? 'time-text' : ''"
+          >
             {{ template_time == '' ? '请选择时间' : template_time }}
           </view>
         </view>
         <view class="draw-item">
           <view class="item-text">联系方式</view>
-          <u--input placeholder="请输入联系方式" border="surround" type='number' v-model="addParams.mobile"></u--input>
+          <u--input
+            placeholder="请输入联系方式"
+            border="surround"
+            type="number"
+            v-model="addParams.mobile"
+          ></u--input>
         </view>
 
         <button class="draw-btn" @click="handlerDrawConfirmBtn">确定</button>
       </view>
     </u-popup>
 
-    <u-datetime-picker :show="time_show" :minDate="Number(new Date())" :formatter="formatter"
-      v-model="addParams.appointTime" @change="handlerTimeChange" @confirm='time_show = false'
-      @cancel='time_show = false' mode="datetime">
+    <u-datetime-picker
+      :show="time_show"
+      :minDate="Number(new Date())"
+      :formatter="formatter"
+      v-model="addParams.appointTime"
+      @change="handlerTimeChange"
+      @confirm="time_show = false"
+      @cancel="time_show = false"
+      mode="datetime"
+    >
     </u-datetime-picker>
-
   </view>
 </template>
 
 <script>
-  import {
-    getSellsDetail,
-    addReservation
-  } from '@/api/business.js'
-  import {
-    getCurrentLocation
-  } from '@/api/home';
-  export default {
-    data() {
-      return {
-        merchant: {},
-        goods: [],
-        count: 5,
-        value: 3,
-        list3: [],
-
-        queryParams: { //请求参数
-          id: null, //商家ID
-          region: null, //地区编码
-          longitude: null, //经度
-          latitude: null, //纬度
-        },
+import { getSellsDetail, addReservation } from '@/api/business.js';
+import { getCurrentLocation } from '@/api/home';
+export default {
+  data() {
+    return {
+      merchant: {},
+      goods: [],
+      count: 5,
+      value: 3,
+      list3: [],
+
+      queryParams: {
+        //请求参数
+        id: null, //商家ID
+        region: null, //地区编码
+        longitude: null, //经度
+        latitude: null, //纬度
+      },
 
-        template_value: '',
-        time_show: false,
-        reserve_show: false,
-        value: '',
+      template_value: '',
+      time_show: false,
+      reserve_show: false,
+      value: '',
 
-        addParams: {
-          merchantId: '',
-          mobile: '',
-          appointTime: ''
+      addParams: {
+        merchantId: '',
+        mobile: '',
+        appointTime: '',
+      },
+      template_time: '',
+    };
+  },
+  onLoad(option) {
+    this.queryParams.id = option.id;
+    this.handlerInitLocation();
+  },
+  watch: {
+    reserve_show(newValue) {
+      if (!newValue) {
+        this.addParams.mobile = '';
+        this.addParams.appointTime = '';
+        this.template_time = '';
+      }
+    },
+  },
+  methods: {
+    // 获取当前经纬度
+    handlerInitLocation() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: res => {
+          this.queryParams.longitude = res.longitude;
+          this.queryParams.latitude = res.latitude;
+          let point = {
+            latitude: res.latitude,
+            longitude: res.longitude,
+          };
+          getCurrentLocation(point).then(rc => {
+            this.queryParams.region = rc.data.id;
+            this.handlerInitList();
+          });
         },
-        template_time: ''
-      };
+        fail: rs => {
+          uni.showToast({
+            title: rs,
+            icon: 'none',
+          });
+        },
+      });
     },
-    onLoad(option) {
-      this.queryParams.id = option.id
-      this.handlerInitLocation()
+    // 初始化列表
+    handlerInitList() {
+      getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
+        this.merchant = res.data.merchant;
+        (this.goods = res.data.goods),
+          (this.list3 = res.data.merchant.banners.map(h => h.url));
+      });
     },
-    watch: {
-      reserve_show(newValue) {
-        if (!newValue) {
-          this.addParams.mobile = ''
-          this.addParams.appointTime = ''
-          this.template_time = ''
-        }
-      }
+    // 点击拨打电话
+    handlerMakeCall() {
+      uni.makePhoneCall({
+        phoneNumber: this.merchant.mobile,
+      });
+    },
+    // 点击跳转到商品详情
+    handlerSkipGoodsDetail(item, index) {
+      uni.navigateTo({
+        url: `/pages/business/service/detail?id=${item.id}`,
+      });
+    },
+    // 预约
+    handlerService(item, index) {
+      this.addParams.merchantId = item.id;
+      this.reserve_show = true;
+    },
+    // 购买
+    handlerSkipBuy(item, index) {
+      uni.navigateTo({
+        url: '/pages/order/order',
+      });
+    },
+
+    open() {},
+    // 点击选择时间
+    handlerSelectTime() {
+      this.time_show = true;
     },
-    methods: {
-      // 获取当前经纬度
-      handlerInitLocation() {
-        uni.getLocation({
-          type: 'gcj02',
-          success: res => {
-            this.queryParams.longitude = res.longitude;
-            this.queryParams.latitude = res.latitude;
-            let point = {
-              latitude: res.latitude,
-              longitude: res.longitude
-            }
-            getCurrentLocation(point).then(rc => {
-              this.queryParams.region = rc.data.id
-              this.handlerInitList()
-            })
-          },
-          fail: (rs) => {
+    // 点击预约确定按钮
+    handlerDrawConfirmBtn() {
+      if (this.addParams.appointTime == '') {
+        uni.showToast({
+          title: '请选择时间',
+          icon: 'none',
+        });
+        return;
+      } else if (this.addParams.mobile == '') {
+        uni.showToast({
+          title: '请填写手机号',
+          icon: 'none',
+        });
+        return;
+      } else if (!/^1[34578]\d{9}$/.test(this.addParams.mobile)) {
+        uni.showToast({
+          title: '请填写正确的手机号',
+          icon: 'none',
+        });
+        return false;
+      } else {
+        addReservation(this.addParams.merchantId, this.addParams).then(res => {
+          if (res.code == 200) {
+            this.handlerInitList();
+            this.reserve_show = false;
             uni.showToast({
-              title: rs,
-              icon: 'none'
-            })
+              title: '预约成功',
+              icon: 'success',
+            });
+          } else {
+            uni.showToast({
+              title: res.msg,
+              icon: 'none',
+            });
+            return;
           }
         });
-      },
-      // 初始化列表
-      handlerInitList() {
-        getSellsDetail(this.queryParams.id, this.queryParams).then(res => {
-          this.merchant = res.data.merchant
-          this.goods = res.data.goods,
-            this.list3 = res.data.merchant.banners.map(h => h.url)
-        })
-      },
-      // 点击拨打电话
-      handlerMakeCall() {
-        uni.makePhoneCall({
-          phoneNumber: this.merchant.mobile
-        })
-      },
-      // 点击跳转到商品详情
-      handlerSkipGoodsDetail(item, index) {
-        uni.navigateTo({
-          url: `/pages/business/service/detail?id=${item.id}`
-        })
-      },
-      // 预约
-      handlerService(item, index) {
-        this.addParams.merchantId = item.id
-        this.reserve_show = true
-      },
-      // 购买
-      handlerSkipBuy(item, index) {
-        uni.navigateTo({
-          url: '/pages/order/order'
-        })
-      },
-
-      open() {},
-      // 点击选择时间
-      handlerSelectTime() {
-        this.time_show = true
-      },
-      // 点击预约确定按钮
-      handlerDrawConfirmBtn() {
-        if (this.addParams.appointTime == '') {
-          uni.showToast({
-            title: '请选择时间',
-            icon: 'none'
-          })
-          return
-        } else if (this.addParams.mobile == '') {
-          uni.showToast({
-            title: '请填写手机号',
-            icon: 'none'
-          })
-          return
-        } else if (!(/^1[34578]\d{9}$/.test(this.addParams.mobile))) {
-          uni.showToast({
-            title: '请填写正确的手机号',
-            icon: 'none'
-          })
-          return false;
-        } else {
-          addReservation(this.addParams.merchantId, this.addParams).then(res => {
-            if (res.code == 200) {
-              this.handlerInitList()
-              this.reserve_show = false
-              uni.showToast({
-                title: '预约成功',
-                icon: 'success',
-              })
-            } else {
-              uni.showToast({
-                title: res.msg,
-                icon: 'none'
-              })
-              return
-            }
-          })
-        }
-      },
-      formatter(type, value) {
-        if (type === 'minute') {
-          return `00`
-        }
-        return value
-      },
-      // 选择时间
-      handlerTimeChange(e) {
-        if (e) {
-          this.addParams.appointTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
-          this.template_time = this.addParams.appointTime
-        }
-      },
-    }
-  };
+      }
+    },
+    formatter(type, value) {
+      if (type === 'minute') {
+        return `00`;
+      }
+      return value;
+    },
+    // 选择时间
+    handlerTimeChange(e) {
+      if (e) {
+        this.addParams.appointTime = uni.$u.timeFormat(
+          e.value,
+          'yyyy-mm-dd hh:MM:ss',
+        );
+        this.template_time = this.addParams.appointTime;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .detail {
-    min-height: 100vh;
-    background-color: #efefef;
-  }
+.detail {
+  min-height: 100vh;
+  background-color: #efefef;
+}
+
+// 轮播图
+.carousel-map {
+  background-color: #fff;
+  padding: 0 20rpx;
+
+  .carousel-item {
+    height: 90rpx;
+    display: flex;
+    background-color: #fff7e0;
+    border-radius: 0 0 10rpx 10rpx;
 
-  // 轮播图
-  .carousel-map {
-    background-color: #fff;
-    padding: 0 20rpx;
+    .mark {
+      background-color: #ff4b04;
+      color: #fff;
+      padding: 20rpx;
+      border-radius: 0 0 0 10rpx;
+      box-sizing: border-box;
 
-    .carousel-item {
-      height: 90rpx;
-      display: flex;
-      background-color: #fff7e0;
-      border-radius: 0 0 10rpx 10rpx;
+      .mark-item {
+        text-align: center;
+      }
+    }
 
-      .mark {
-        background-color: #ff4b04;
-        color: #fff;
-        padding: 20rpx;
-        border-radius: 0 0 0 10rpx;
-        box-sizing: border-box;
+    .good-item {
+      font-size: 24rpx;
+      color: #a39c85;
+      line-height: 90rpx;
+      margin-left: 40rpx;
+    }
+  }
+}
 
-        .mark-item {
-          text-align: center;
-        }
-      }
+// 商家信息
+.merchant-info {
+  padding: 20rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
 
-      .good-item {
-        font-size: 24rpx;
-        color: #a39c85;
-        line-height: 90rpx;
-        margin-left: 40rpx;
-      }
+  .info-title {
+    display: flex;
+    justify-content: center;
+    font-size: 40rpx;
+    font-weight: bold;
+
+    .info-mark {
+      font-size: 12px;
+      font-weight: normal;
+      color: #999;
+      margin: 20rpx 0 20rpx 30rpx;
     }
   }
 
-  // 商家信息
-  .merchant-info {
-    padding: 20rpx;
-    background-color: #fff;
-    margin-bottom: 20rpx;
+  .info-tag {
+    width: 160rpx;
+    padding: 10rpx;
+    text-align: center;
+    border: 1px solid #5992bb;
+    color: #5992bb;
+    margin-bottom: 10rpx;
+  }
 
-    .info-title {
-      display: flex;
-      justify-content: center;
-      font-size: 40rpx;
-      font-weight: bold;
+  .info-item {
+    display: flex;
+    justify-content: space-between;
+
+    .info-text {
+      font-size: 30rpx;
+      line-height: 58rpx;
+      color: #212020;
+      font-weight: 600;
 
-      .info-mark {
-        font-size: 12px;
+      .distance {
+        font-size: 26rpx;
+        color: #555252;
         font-weight: normal;
-        color: #999;
-        margin: 20rpx 0 20rpx 30rpx;
       }
     }
 
-    .info-tag {
-      width: 160rpx;
+    .info-icon {
+      display: flex;
+    }
+
+    .info-map {
       padding: 10rpx;
-      text-align: center;
-      border: 1px solid #5992bb;
-      color: #5992bb;
-      margin-bottom: 10rpx;
+      font-size: 28rpx;
+      margin-top: 120rpx;
     }
+  }
+}
+
+.list {
+  height: 250rpx;
+  background-color: #fff;
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+
+  .img {
+    width: 120px;
+    height: calc(100% - 20rpx);
+    margin: 10rpx 20rpx 10rpx 0;
+  }
+
+  .item-text {
+    font-weight: bold;
+    margin: 10rpx 0 10rpx;
+    color: #333;
+  }
 
-    .info-item {
+  .item-flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 28rpx;
+    margin: 0 20rpx 10rpx 0;
+    color: #0d0d0d66;
+
+    .star {
       display: flex;
-      justify-content: space-between;
-
-      .info-text {
-        font-size: 30rpx;
-        line-height: 58rpx;
-        color: #212020;
-        font-weight: 600;
-
-        .distance {
-          font-size: 26rpx;
-          color: #555252;
-          font-weight: normal;
-        }
-      }
 
-      .info-icon {
-        display: flex;
+      .line {
+        margin-left: 16rpx;
+        margin-top: 5rpx;
+        font-size: 22rpx;
       }
 
-      .info-map {
-        padding: 10rpx;
-        font-size: 28rpx;
-        margin-top: 120rpx;
+      .points {
+        color: #ff4b04;
+        font-size: 22rpx;
+        margin-top: 6rpx;
+        margin-left: 10rpx;
       }
     }
   }
 
-  .list {
-    height: 250rpx;
-    background-color: #fff;
-    padding: 20rpx;
-    margin-bottom: 20rpx;
+  .list-item {
+    margin-top: 40rpx;
     display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-    .img {
-      width: 120px;
-      height: calc(100% - 20rpx);
-      margin: 10rpx 20rpx 10rpx 0;
-    }
-
-    .item-text {
-      font-weight: bold;
-      margin: 10rpx 0 10rpx;
-      color: #333;
-    }
+    .list-price {
+      .item-l {
+        color: #e35240;
+        font-weight: bold;
+        font-size: 32rpx;
 
-    .item-flex {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 28rpx;
-      margin: 0 20rpx 10rpx 0;
-      color: #0d0d0d66;
-
-      .star {
-        display: flex;
-
-        .line {
-          margin-left: 16rpx;
-          margin-top: 5rpx;
-          font-size: 22rpx;
+        span {
+          font-size: 40rpx;
         }
+      }
 
-        .points {
-          color: #ff4b04;
-          font-size: 22rpx;
-          margin-top: 6rpx;
-          margin-left: 10rpx;
+      .item-r {
+        color: #a8a8a8;
+        margin-top: 10rpx;
+
+        span {
+          text-decoration: line-through;
         }
       }
     }
 
-    .list-item {
-      margin-top: 40rpx;
+    .btn-box {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .list-price {
-        .item-l {
-          color: #E35240;
-          font-weight: bold;
-          font-size: 32rpx;
+      margin-left: 30rpx;
 
-          span {
-            font-size: 40rpx;
-          }
-        }
-
-        .item-r {
-          color: #A8A8A8;
-          margin-top: 10rpx;
-
-          span {
-            text-decoration: line-through;
-          }
-        }
+      .btn {
+        font-size: 28rpx;
+        height: 70rpx;
       }
 
-      .btn-box {
-        display: flex;
-        margin-left: 30rpx;
-
-        .btn {
-          font-size: 28rpx;
-          height: 70rpx;
-        }
-
-        .btn1 {
-          border-radius: 40rpx 0 0 40rpx;
-          border: 2rpx solid #EC5729;
-          color: #EC5729;
-          background-color: #fff;
-        }
-
-        .btn2 {
-          color: #fff;
-          background-color: #EC5729;
-          border-radius: 0 40rpx 40rpx 0;
-        }
+      .btn1 {
+        border-radius: 40rpx 0 0 40rpx;
+        border: 2rpx solid #ec5729;
+        color: #ec5729;
+        background-color: #fff;
       }
 
+      .btn2 {
+        color: #fff;
+        background-color: #ec5729;
+        border-radius: 0 40rpx 40rpx 0;
+      }
     }
   }
+}
 
-  .draw-box {
-    width: 560rpx;
-    padding: 20rpx;
+.draw-box {
+  width: 560rpx;
+  padding: 20rpx;
 
-    .draw-title {
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #000;
-      margin-bottom: 30rpx;
-    }
-
-    .draw-item {
-      margin-bottom: 20rpx;
+  .draw-title {
+    font-size: 30rpx;
+    font-weight: bold;
+    color: #000;
+    margin-bottom: 30rpx;
+  }
 
-      .item-text {
-        font-size: 28rpx;
-        color: #000;
-        padding-left: 20rpx;
-      }
+  .draw-item {
+    margin-bottom: 20rpx;
 
-      .time-box {
-        margin: 10rpx 20rpx;
-      }
+    .item-text {
+      font-size: 28rpx;
+      color: #000;
+      padding-left: 20rpx;
     }
 
-    .draw-btn {
-      width: 90%;
-      background-color: #5992BB !important;
-      color: #fff;
-      font-size: 28rpx;
-      border-radius: 20rpx;
+    .time-box {
+      margin: 10rpx 20rpx;
     }
   }
 
-  .time-text {
-    color: #D4D6DC;
+  .draw-btn {
+    width: 90%;
+    background-color: #5992bb !important;
+    color: #fff;
+    font-size: 28rpx;
+    border-radius: 20rpx;
   }
-</style>
+}
+
+.time-text {
+  color: #d4d6dc;
+}
+</style>

src/pages/business/nearby/index.vue

@@ -1,68 +1,67 @@
 <template>
   <view class="container">
-    <serviceItem :item='init_list' :skipType='0'></serviceItem>
-    <u-empty v-if="init_list.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" > </u-empty>
+    <serviceItem :item="init_list" :skipType="0"></serviceItem>
+    <u-empty
+      v-if="init_list.length == 0"
+      mode="data"
+      icon="http://cdn.uviewui.com/uview/empty/data.png"
+    >
+    </u-empty>
   </view>
 </template>
 
 <script>
-  import { getHomePageApi,getCurrentLocation } from '@/api/home';
-  import serviceItem from '@/components/service/index.vue';
-  export default{
-    data(){
-      return{
-        queryParams:{
-          region:null,//地区编码
-          longitude:null,//经度
-          latitude:null,//纬度
+import { getHomePageApi, getCurrentLocation } from '@/api/home';
+import serviceItem from '@/components/service/index.vue';
+export default {
+  data() {
+    return {
+      queryParams: {
+        region: null, //地区编码
+        longitude: null, //经度
+        latitude: null, //纬度
+      },
+      init_list: [],
+    };
+  },
+  components: {
+    serviceItem,
+  },
+  mounted() {
+    this.handlerInitLocation();
+  },
+  methods: {
+    // 获取当前经纬度
+    handlerInitLocation() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: res => {
+          this.queryParams.longitude = res.longitude;
+          this.queryParams.latitude = res.latitude;
+          let point = {
+            latitude: res.latitude,
+            longitude: res.longitude,
+          };
+          getCurrentLocation(point).then(rc => {
+            this.queryParams.region = rc.data.id;
+            this.handlerInitList();
+          });
         },
-        init_list:[]
-      }
-    },
-    components:{
-      serviceItem
+        fail: rs => {
+          uni.showToast({
+            title: rs,
+            icon: 'none',
+          });
+        },
+      });
     },
-    mounted() {
-      this.handlerInitLocation()
+    // 初始化列表信息
+    handlerInitList() {
+      getHomePageApi(this.queryParams).then(res => {
+        this.init_list = res.data.nears;
+        this.total = res.data.nears.total;
+      });
     },
-    methods:{
-      // 获取当前经纬度
-      handlerInitLocation(){
-        uni.getLocation({
-        	type: 'gcj02',
-        	success: res => {
-        		this.queryParams.longitude = res.longitude;
-        		this.queryParams.latitude = res.latitude;
-            let point = {
-              latitude: res.latitude,
-              longitude: res.longitude
-            }
-            getCurrentLocation(point).then(rc=>{
-              this.queryParams.region = rc.data.id
-              this.handlerInitList()
-            })
-        	},
-        	fail: (rs) => {
-            uni.showToast({
-              title:rs,
-              icon:'none'
-            })
-        	}
-        });
-      },
-      // 初始化列表信息
-      handlerInitList(){
-        getHomePageApi(this.queryParams).then(res=>{
-          this.init_list = res.data.nears
-          this.total = res.data.nears.total
-        })
-      }
-    }
-  }
+  },
+};
 </script>
-
-<style lang="scss" scoped>
-  .container{
-
-  }
-</style>

src/pages/tabbar/home/index.vue

@@ -1,329 +1,376 @@
 <template>
-	<view class="home">
-		<!-- 顶部导航 -->
-		<view class="nav-bar" v-if="opacity == 1">
-			<u-navbar :bgColor="'#ffffff'">
-				<view slot="left">
-					<text>地址</text>
-					<text class="iconfont icon-chevron-down"></text>
-				</view>
-				<view slot="center">
-					<u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword"
-						@focus="$Router.push('/pages/common/search/index')" />
-				</view>
-			</u-navbar>
-		</view>
+  <view class="home">
+    <!-- 顶部导航 -->
+    <view class="nav-bar" v-if="opacity == 1">
+      <u-navbar :bgColor="'#ffffff'">
+        <view slot="left">
+          <text>地址</text>
+          <text class="iconfont icon-chevron-down"></text>
+        </view>
+        <view slot="center">
+          <u-search
+            placeholder="请输入搜索内容"
+            :showAction="false"
+            v-model="keyword"
+            @focus="$Router.push('/pages/common/search/index')"
+          />
+        </view>
+      </u-navbar>
+    </view>
 
-		<view class="home-header" :style="{ paddingTop: totalHeight + 'px', opacity: 1 - opacity }">
-			<view class="goto-address" @click="manualGetLocation">
-				<text>地址</text>
-				<text class="iconfont icon-chevron-down"></text>
-			</view>
-			<view class="search-item" @click="$Router.push('/pages/client/search/index')">
-				<u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword" />
-			</view>
-		</view>
+    <view
+      class="home-header"
+      :style="{ paddingTop: totalHeight + 'px', opacity: 1 - opacity }"
+    >
+      <view class="goto-address" @click="manualGetLocation">
+        <text>地址</text>
+        <text class="iconfont icon-chevron-down"></text>
+      </view>
+      <view
+        class="search-item"
+        @click="$Router.push('/pages/client/search/index')"
+      >
+        <u-search
+          placeholder="请输入搜索内容"
+          :showAction="false"
+          v-model="keyword"
+        />
+      </view>
+    </view>
 
-		<!-- 轮播图 -->
-		<view class="home-swiper">
-			<u-swiper :list="swiperList" indicator @change="change" @click="click" />
-		</view>
+    <!-- 轮播图 -->
+    <view class="home-swiper">
+      <u-swiper :list="swiperList" indicator @change="change" @click="click" />
+    </view>
 
-		<!-- 商品分类 -->
-		<view class="home-list">
-			<u-grid :border="false" col="5">
-				<u-grid-item v-for="(item,index) in categories" :key="item.id"  @tap="handleMenuClick(item)">
-					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.icon" :size="25"></u-icon>
-					<text class="grid-text">{{ item.name }}</text>
-				</u-grid-item>
+    <!-- 商品分类 -->
+    <view class="home-list">
+      <u-grid :border="false" col="5">
+        <u-grid-item
+          v-for="item in categories"
+          :key="item.id"
+          @tap="handleMenuClick(item)"
+        >
+          <u-icon
+            :customStyle="{ paddingTop: 20 + 'rpx' }"
+            :name="item.icon"
+            :size="25"
+          ></u-icon>
+          <text class="grid-text">{{ item.name }}</text>
+        </u-grid-item>
+      </u-grid>
+      <u-toast ref="uToast" />
+    </view>
 
-			</u-grid>
-			<u-toast ref="uToast" />
-		</view>
+    <!-- 热门推荐 -->
+    <view class="hot">
+      <u-cell
+        :border="false"
+        value="查看更多"
+        isLink
+        @click="$Router.push('/pages/business/hot/index')"
+      >
+        <view slot="title" class="hot-title"> 热门推荐 </view>
+      </u-cell>
+      <block v-if="homeData.recommends && homeData.recommends.length > 0">
+        <view>
+          <u-grid :border="false" col="2">
+            <u-grid-item
+              @click="$Router.push(`/pages/business/detail?id=${item.id}`)"
+              v-for="item in homeData.recommends"
+              :key="item.id"
+            >
+              <recommend-item :item="item"></recommend-item>
+            </u-grid-item>
+          </u-grid>
+        </view>
+      </block>
+      <block v-else>
+        <u-empty
+          icon="/static/default-graph/no-business.png"
+          text="暂无推荐商家"
+        ></u-empty>
+      </block>
+    </view>
 
-		<!-- 热门推荐 -->
-		<view class="hot">
-			<u-cell :border="false" value="查看更多" isLink @click="$Router.push('/pages/business/hot/index')">
-				<view slot="title" class="hot-title"> 热门推荐 </view>
-			</u-cell>
-			<block v-if="homeData.recommends && homeData.recommends.length > 0">
-				<view>
-					<u-grid :border="false" col="2">
-						<u-grid-item @click="$Router.push(`/pages/business/detail?id=${item.id}`)"
-							v-for="item in homeData.recommends" :key="item.id">
-							<recommend-item :item="item"></recommend-item>
-						</u-grid-item>
-					</u-grid>
-				</view>
-			</block>
-			<block v-else>
-				<u-empty icon="/static/default-graph/no-business.png" text="暂无推荐商家"></u-empty>
-			</block>
-		</view>
-
-		<!-- 附近商家 -->
-		<view class="near">
-			<u-cell :border="false" value="查看更多" isLink @click="$Router.push('/pages/business/nearby/index')">
-				<view slot="title" class="near-title"> 附近商家 </view>
-			</u-cell>
-			<block v-if="homeData.nears && homeData.nears.length > 0">
-				<view>
-					<u-grid :border="false" col="2">
-						<u-grid-item @click="$Router.push(`/pages/business/detail?id=${item.id}`)"
-							v-for="item in homeData.nears" :key="item.id">
-							<hot-item :item="item"></hot-item>
-						</u-grid-item>
-					</u-grid>
-				</view>
-			</block>
-			<block v-else>
-				<u-empty icon="/static/default-graph/no-business.png" text="暂无附近商家"></u-empty>
-			</block>
-		</view>
-	</view>
+    <!-- 附近商家 -->
+    <view class="near">
+      <u-cell
+        :border="false"
+        value="查看更多"
+        isLink
+        @click="$Router.push('/pages/business/nearby/index')"
+      >
+        <view slot="title" class="near-title"> 附近商家 </view>
+      </u-cell>
+      <block v-if="homeData.nears && homeData.nears.length > 0">
+        <view>
+          <u-grid :border="false" col="2">
+            <u-grid-item
+              @click="$Router.push(`/pages/business/detail?id=${item.id}`)"
+              v-for="item in homeData.nears"
+              :key="item.id"
+            >
+              <hot-item :item="item"></hot-item>
+            </u-grid-item>
+          </u-grid>
+        </view>
+      </block>
+      <block v-else>
+        <u-empty
+          icon="/static/default-graph/no-business.png"
+          text="暂无附近商家"
+        ></u-empty>
+      </block>
+    </view>
+  </view>
 </template>
 
 <script>
-	import {
-		getCurrentLocation,
-		getHomePageApi,
-		getCategoriesApi
-	} from '@/api/home';
-	import {
-		mapGetters
-	} from 'vuex';
-	import RecommendItem from '@/components/merchant/RecommendItem.vue';
-	import HotItem from '@/components/merchant/HotItem.vue';
-	export default {
-		components: {
-			RecommendItem,
-			HotItem,
-		},
-		data() {
-			return {
-				list: [],
-				keyword: '',
-				swiperList: [
-					//轮播图
-					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
-					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-				],
-				homeData: {
-					categories: [],
-					nears: [],
-					recommends: [],
-				},
-				scrollTop: 0,
-			};
-		},
+import {
+  getCurrentLocation,
+  getHomePageApi,
+  getCategoriesApi,
+} from '@/api/home';
+import { mapGetters } from 'vuex';
+import RecommendItem from '@/components/merchant/RecommendItem.vue';
+import HotItem from '@/components/merchant/HotItem.vue';
+export default {
+  components: {
+    RecommendItem,
+    HotItem,
+  },
+  data() {
+    return {
+      list: [],
+      keyword: '',
+      swiperList: [
+        //轮播图
+        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+      ],
+      homeData: {
+        categories: [],
+        nears: [],
+        recommends: [],
+      },
+      scrollTop: 0,
+    };
+  },
 
-		computed: {
-			...mapGetters(['location']),
-			totalHeight() {
-				return;
-				return uni.getSystemInfoSync().statusBarHeight +
-					uni.getMenuButtonBoundingClientRect().height ?
-					height :
-					'';
-			},
-			opacity() {
-				if (this.scrollTop < this.totalHeight) {
-					return (this.scrollTop / this.totalHeight).toFixed(2);
-				}
-				return 1;
-			},
-			categories() {
-				let initData = this.homeData.categories.map(item => {
-					if (!item.icon) {
-						item.icon = 'level';
-					}
-					return item;
-				});
-				let result =
-					initData.length > 14 ?
-					initData.splice(0, 14).concat([{
-						id: 'all',
-						icon: 'grid-fill',
-						name: '全部',
-						type: {
-							code: 'ALL',
-							description: '全部'
-						},
-					}, ]) :
-					initData.push({
-						id: 'all',
-						icon: 'grid-fill',
-						name: '全部'
-					});
-				return result;
-			},
-		},
+  computed: {
+    ...mapGetters(['location']),
+    totalHeight() {
+      return;
+      return uni.getSystemInfoSync().statusBarHeight +
+        uni.getMenuButtonBoundingClientRect().height
+        ? height
+        : '';
+    },
+    opacity() {
+      if (this.scrollTop < this.totalHeight) {
+        return (this.scrollTop / this.totalHeight).toFixed(2);
+      }
+      return 1;
+    },
+    categories() {
+      let initData = this.homeData.categories.map(item => {
+        if (!item.icon) {
+          item.icon = 'level';
+        }
+        return item;
+      });
+      let result =
+        initData.length > 14
+          ? initData.splice(0, 14).concat([
+              {
+                id: 'all',
+                icon: 'grid-fill',
+                name: '全部',
+                type: {
+                  code: 'ALL',
+                  description: '全部',
+                },
+              },
+            ])
+          : initData.push({
+              id: 'all',
+              icon: 'grid-fill',
+              name: '全部',
+            });
+      return result;
+    },
+  },
 
-		watch: {
-			location: {
-				handler: async function(newVal, oldVal) {
-          console.log('newVal',newVal);
-					const result = await getCurrentLocation(newVal);
-					const param = Object.assign({}, {
-						region: result.data.id
-					}, newVal);
-					this.getHomeData(param);
-				},
-			},
-		},
+  watch: {
+    location: {
+      handler: async function (newVal, oldVal) {
+        console.log('newVal', newVal);
+        const result = await getCurrentLocation(newVal);
+        const param = Object.assign(
+          {},
+          {
+            region: result.data.id,
+          },
+          newVal,
+        );
+        this.getHomeData(param);
+      },
+    },
+  },
 
-		//滚动页面触发
-		onPageScroll(e) {
-			this.scrollTop = e.scrollTop;
-		},
+  //滚动页面触发
+  onPageScroll(e) {
+    this.scrollTop = e.scrollTop;
+  },
 
-		//页面加载
-		async onLoad() {
-			setTimeout(() => {
-				this.list = new Array(10000).fill(1);
-			}, 5000);
-			uni.getLocation({
-				type: 'gcj02',
-				success: res => {
-					this.location.longitude = res.longitude;
-					this.location.latitude = res.latitude;
-					this.$store.commit('SET_LOCATION', {
-						longitude: res.longitude,
-						latitude: res.latitude,
-					});
-				},
-				fail: () => {
-					this.manualGetLocation();
-				},
-			});
-		},
+  //页面加载
+  async onLoad() {
+    setTimeout(() => {
+      this.list = new Array(10000).fill(1);
+    }, 5000);
+    uni.getLocation({
+      type: 'gcj02',
+      success: res => {
+        this.location.longitude = res.longitude;
+        this.location.latitude = res.latitude;
+        this.$store.commit('SET_LOCATION', {
+          longitude: res.longitude,
+          latitude: res.latitude,
+        });
+      },
+      fail: () => {
+        this.manualGetLocation();
+      },
+    });
+  },
 
-		methods: {
-			//轮播图切换
-			change() {},
+  methods: {
+    //轮播图切换
+    change() {},
 
-			//轮播图点击
-			click(name) {
-				this.$refs.uToast.success(`点击了第${name}个`);
-			},
+    //轮播图点击
+    click(name) {
+      this.$refs.uToast.success(`点击了第${name}个`);
+    },
 
-			// 获取首页数据
-			getHomeData(location) {
-				getHomePageApi(location)
-					.then(res => {
-						this.homeData = res.data;
-						// 将分类数据做缓存处理
-						this.$store.commit('SET_CATEGORIES', this.homeData.categories);
-					})
-					.catch(err => {
-						console.log(err);
-					});
-			},
+    // 获取首页数据
+    getHomeData(location) {
+      getHomePageApi(location)
+        .then(res => {
+          this.homeData = res.data;
+          // 将分类数据做缓存处理
+          this.$store.commit('SET_CATEGORIES', this.homeData.categories);
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
 
-			// 手动选择城市
-			manualGetLocation() {
-				uni.chooseLocation({
-					success: res => {
-						this.$store.commit('SET_LOCATION', {
-							longitude: res.longitude,
-							latitude: res.latitude,
-						});
-					},
-				});
-			},
+    // 手动选择城市
+    manualGetLocation() {
+      uni.chooseLocation({
+        success: res => {
+          this.$store.commit('SET_LOCATION', {
+            longitude: res.longitude,
+            latitude: res.latitude,
+          });
+        },
+      });
+    },
 
-			// 点击菜单
-			handleMenuClick(item) {
-				if (item.id === 'all') {
-					this.$Router.push('/pages/business/category');
-				} else {
-          uni.navigateTo({
-          	url: `/pages/business/list?id=${item.id}`
-          })
-				}
-			},
-		},
-	};
+    // 点击菜单
+    handleMenuClick(item) {
+      if (item.id === 'all') {
+        this.$Router.push('/pages/business/category');
+      } else {
+        uni.navigateTo({
+          url: `/pages/business/list?id=${item.id}`,
+        });
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	.home {
-		background-color: #f0efef;
+.home {
+  background-color: #f0efef;
 
-		.nav-bar {
-			::v-deep .u-navbar__content {
-				background-color: #ffffff;
-			}
-		}
-	}
+  .nav-bar {
+    ::v-deep .u-navbar__content {
+      background-color: #ffffff;
+    }
+  }
+}
 
-	/* 头部搜索栏 */
-	.home-header {
-		display: flex;
-		align-items: center;
-		height: 90rpx;
-		line-height: 90rpx;
-		padding: 0 20rpx;
-		background-color: #ffffff;
+/* 头部搜索栏 */
+.home-header {
+  display: flex;
+  align-items: center;
+  height: 90rpx;
+  line-height: 90rpx;
+  padding: 0 20rpx;
+  background-color: #ffffff;
 
-		.goto-address {
-			display: flex;
-			align-items: center;
+  .goto-address {
+    display: flex;
+    align-items: center;
 
-			.icon-sanjiaoxing1 {
-				font-size: 24rpx;
-				margin: 17rpx 10rpx 0 6rpx;
-			}
-		}
+    .icon-sanjiaoxing1 {
+      font-size: 24rpx;
+      margin: 17rpx 10rpx 0 6rpx;
+    }
+  }
 
-		.search-item {
-			flex: 1;
-		}
-	}
+  .search-item {
+    flex: 1;
+  }
+}
 
-	/* 轮播图 */
-	.home-swiper {
-		padding: 20rpx;
-		margin-bottom: 10rpx;
-	}
+/* 轮播图 */
+.home-swiper {
+  padding: 20rpx;
+  margin-bottom: 10rpx;
+}
 
-	/* 商品分类 */
-	.home-list {
-		background-color: #ffffff;
-		height: 360rpx;
-		margin: 0 20rpx 20rpx 20rpx;
-		padding: 20rpx 0;
-		border-radius: 10rpx;
+/* 商品分类 */
+.home-list {
+  background-color: #ffffff;
+  height: 360rpx;
+  margin: 0 20rpx 20rpx 20rpx;
+  padding: 20rpx 0;
+  border-radius: 10rpx;
 
-		.grid-text {
-			font-size: 12px;
-			color: #909399;
-			padding: 10rpx 0 20rpx 0rpx;
-			box-sizing: border-box;
-		}
-	}
+  .grid-text {
+    font-size: 12px;
+    color: #909399;
+    padding: 10rpx 0 20rpx 0rpx;
+    box-sizing: border-box;
+  }
+}
 
-	/* 热门推荐 */
-	.hot {
-		::v-deep .u-cell__body {
-			padding: 10rpx 20rpx;
+/* 热门推荐 */
+.hot {
+  ::v-deep .u-cell__body {
+    padding: 10rpx 20rpx;
 
-			.hot-title {
-				border-left: 4px solid $uni-color-primary;
-				padding-left: 20rpx;
-			}
-		}
-	}
+    .hot-title {
+      border-left: 4px solid $uni-color-primary;
+      padding-left: 20rpx;
+    }
+  }
+}
 
-	.near {
-		::v-deep .u-cell__body {
-			padding: 10rpx 20rpx;
+.near {
+  ::v-deep .u-cell__body {
+    padding: 10rpx 20rpx;
 
-			.near-title {
-				border-left: 4px solid $uni-color-primary;
-				padding-left: 20rpx;
-			}
-		}
-	}
-</style>
+    .near-title {
+      border-left: 4px solid $uni-color-primary;
+      padding-left: 20rpx;
+    }
+  }
+}
+</style>

src/pages/tabbar/mine/profit/index.vue

@@ -1,14 +1,14 @@
 <template>
   <view class="container">
     <view class="item-box">
-      <view class="item" v-for="item of price_list1">
+      <view class="item" :key="item" v-for="item of price_list1">
         <view class="item-text">{{ item.name }}</view>
         <view class="item-price">{{ item.price }}</view>
       </view>
     </view>
 
     <view class="item-box2">
-      <view class="item" v-for="item of price_list2">
+      <view class="item" :key="item" v-for="item of price_list2">
         <view class="item-text">{{ item.name }}</view>
         <view class="item-price">{{ item.price }}</view>
       </view>
@@ -25,7 +25,7 @@
     </view>
 
     <view class="footer-item">
-      <img class="img" src="@/static/logo.png" alt="">
+      <img class="img" src="@/static/logo.png" alt="" />
       <view class="item-box4">
         <view class="item">
           <view class="item-text">邀请好友</view>
@@ -36,144 +36,144 @@
         </view>
       </view>
     </view>
-
   </view>
 </template>
 
 <script>
-  export default{
-    data(){
-      return{
-        price_list1:[
-          {
-            name:'总收益(元)',
-            price:'258.00'
-          },
-          {
-            name:'已提现(元)',
-            price:'258.00'
-          },
-          {
-            name:'待总结(元)',
-            price:'258.00'
-          },
-        ],
-        price_list2:[
-          {
-            name:'已提现',
-            price:'150.00'
-          },
-          {
-            name:'待结算',
-            price:'108.00'
-          },
-          {
-            name:'已失效',
-            price:'10.00'
-          },
-        ]
-      }
+export default {
+  data() {
+    return {
+      price_list1: [
+        {
+          name: '总收益(元)',
+          price: '258.00',
+        },
+        {
+          name: '已提现(元)',
+          price: '258.00',
+        },
+        {
+          name: '待总结(元)',
+          price: '258.00',
+        },
+      ],
+      price_list2: [
+        {
+          name: '已提现',
+          price: '150.00',
+        },
+        {
+          name: '待结算',
+          price: '108.00',
+        },
+        {
+          name: '已失效',
+          price: '10.00',
+        },
+      ],
+    };
+  },
+  methods: {
+    // 点击提现
+    handlerWidthdrawFunds() {
+      uni.navigateTo({
+        url: '/pages/tabbar/mine/profit/widthdraw',
+      });
     },
-    methods:{
-      // 点击提现
-      handlerWidthdrawFunds(){
-        uni.navigateTo({
-          url:'/pages/tabbar/mine/profit/widthdraw'
-        })
-      }
-    }
-  }
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .container{
-    background-color: #EFEFEF;
-    min-height: calc(100vh - 10rpx);
-    .item-box,.item-box2{
-      width: 90%;
-      padding: 20rpx;
-      background-color: #347CAF;
-      border-radius: 20rpx;
-      margin: 10rpx auto 0;
-      display: flex;
-      justify-content: space-around;
-      .item{
-        color: #fff;
-        text-align: center;
-        .item-text{
-          font-size:28rpx;
-        }
-        .item-price{
-          font-size:36rpx;
-          font-weight: bold;
-          margin-top: 20rpx;
-        }
+.container {
+  background-color: #efefef;
+  min-height: calc(100vh - 10rpx);
+  .item-box,
+  .item-box2 {
+    width: 90%;
+    padding: 20rpx;
+    background-color: #347caf;
+    border-radius: 20rpx;
+    margin: 10rpx auto 0;
+    display: flex;
+    justify-content: space-around;
+    .item {
+      color: #fff;
+      text-align: center;
+      .item-text {
+        font-size: 28rpx;
+      }
+      .item-price {
+        font-size: 36rpx;
+        font-weight: bold;
+        margin-top: 20rpx;
       }
     }
-    .item-box2{
-      margin-top: 20rpx;
+  }
+  .item-box2 {
+    margin-top: 20rpx;
+  }
+  .item-box3 {
+    width: 90%;
+    padding: 20rpx;
+    background-color: #347caf;
+    border-radius: 20rpx;
+    color: #fff;
+    margin: 20rpx auto;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .btn {
+      width: 260rpx;
+      height: 80rpx;
+      border-radius: 60rpx;
     }
-    .item-box3{
-      width: 90%;
-      padding: 20rpx;
-      background-color: #347CAF;
-      border-radius: 20rpx;
+    .item {
       color: #fff;
-      margin: 20rpx auto;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .btn{
-        width: 260rpx;
-        height: 80rpx;
-        border-radius: 60rpx;
+      text-align: center;
+      .item-text {
+        font-size: 28rpx;
       }
-      .item{
-        color: #fff;
-        text-align: center;
-        .item-text{
-          font-size:28rpx;
-        }
-        .item-price{
-          font-size:36rpx;
-          font-weight: bold;
-          margin-top: 20rpx;
-        }
+      .item-price {
+        font-size: 36rpx;
+        font-weight: bold;
+        margin-top: 20rpx;
       }
     }
+  }
 
-    .footer-item{
-      width: 95%;
-      background-color: #347CAF;
-      border-radius: 20rpx;
-      color: #fff;
-      margin: 20rpx auto;
-      .img{
-        width: 100%;
-      }
+  .footer-item {
+    width: 95%;
+    background-color: #347caf;
+    border-radius: 20rpx;
+    color: #fff;
+    margin: 20rpx auto;
+    .img {
+      width: 100%;
     }
-    .item-box4{
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 20rpx;
-      .btn{
-        width: 260rpx;
-        height: 80rpx;
-        border-radius: 60rpx;
+  }
+  .item-box4 {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 20rpx;
+    .btn {
+      width: 260rpx;
+      height: 80rpx;
+      border-radius: 60rpx;
+    }
+    .item {
+      color: #fff;
+      text-align: center;
+      .item-text {
+        font-size: 28rpx;
       }
-      .item{
-        color: #fff;
-        text-align: center;
-        .item-text{
-          font-size:28rpx;
-        }
-        .item-price{
-          font-size:36rpx;
-          font-weight: bold;
-          margin-top: 20rpx;
-        }
+      .item-price {
+        font-size: 36rpx;
+        font-weight: bold;
+        margin-top: 20rpx;
       }
     }
   }
+}
 </style>

src/pages/user/appoint/index.vue

@@ -1,16 +1,20 @@
 <template>
   <view class="container">
-    <view class="appoint" v-for="(item,index) of init_list">
+    <view class="appoint" :key="index" v-for="(item, index) of init_list">
       <view class="appoint-list">
         <view class="appoint-title">{{ item.simpleMerchantVO.name }}</view>
         <view class="appoint-address">{{ item.simpleMerchantVO.address }}</view>
         <view class="appoint-flex">
           <!-- <Image src="https://cdn.uviewui.com/uview/album/1.jpg" /> -->
-          <image class="img" :src="
+          <image
+            class="img"
+            :src="
               error || !loaded
                 ? 'https://cdn.uviewui.com/uview/album/10.jpg'
                 : item.simpleMerchantVO.logo
-            " mode="scaleToFill"></image>
+            "
+            mode="scaleToFill"
+          ></image>
           <view class="appoint-text">
             <view>业务：洗车……</view>
             <view>时间：2023年06月18日</view>
@@ -18,116 +22,130 @@
           </view>
         </view>
         <view class="appoint-goto">
-          <u-button class="detail" text="详情" @click="handlerSkipGoodsDetail(item,index)"></u-button>
-          <u-button class="cancel" text="取消" @click="handlerClearItem(item,index)"></u-button>
+          <u-button
+            class="detail"
+            text="详情"
+            @click="handlerSkipGoodsDetail(item, index)"
+          ></u-button>
+          <u-button
+            class="cancel"
+            text="取消"
+            @click="handlerClearItem(item, index)"
+          ></u-button>
         </view>
       </view>
     </view>
-    <u-empty v-if="init_list.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></view>
+    <u-empty
+      v-if="init_list.length == 0"
+      mode="data"
+      icon="http://cdn.uviewui.com/uview/empty/data.png"
+    >
+    </u-empty>
+  </view>
 </template>
 
 <script>
-  import { maintainReservations } from "@/api/mine.js"
-  export default {
-    data() {
-      return {
-        queryParams:{
-          size:10
-        },
+import { maintainReservations } from '@/api/mine.js';
+export default {
+  data() {
+    return {
+      queryParams: {
+        size: 10,
+      },
 
-        init_list:[]//初始化列表
-      };
+      init_list: [], //初始化列表
+    };
+  },
+  mounted() {
+    this.handlerInitList();
+  },
+  methods: {
+    // 初始化列表
+    handlerInitList() {
+      maintainReservations(this.queryParams).then(res => {
+        this.init_list = res.data;
+        console.log('init_list', this.init_list);
+      });
     },
-    mounted() {
-      this.handlerInitList()
+    // 点击取消商品
+    handlerClearItem() {
+      uni.showToast({
+        title: '么有',
+        icon: 'none',
+      });
     },
-    methods: {
-      // 初始化列表
-      handlerInitList(){
-        maintainReservations(this.queryParams).then(res=>{
-          this.init_list = res.data
-          console.log('init_list',this.init_list);
-        })
-      },
-      // 点击取消商品
-      handlerClearItem(){
-        uni.showToast({
-          title:'么有',
-          icon:'none'
-        })
-      },
-      // 点击跳转到商品详情
-      handlerSkipGoodsDetail(item, index) {
-        uni.navigateTo({
-          url: `/pages/business/service/detail?id=${item.id}`
-        })
-      },
+    // 点击跳转到商品详情
+    handlerSkipGoodsDetail(item, index) {
+      uni.navigateTo({
+        url: `/pages/business/service/detail?id=${item.id}`,
+      });
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  page{
-    background-color: #efefef;
+page {
+  background-color: #efefef;
+}
+.container {
+  padding: 20rpx;
+}
+.appoint {
+  .history {
+    font-size: 38rpx;
+    margin: 20rpx 10rpx;
+    font-weight: bold;
   }
-  .container{
-    padding: 20rpx;
-  }
-  .appoint {
-    .history {
-      font-size: 38rpx;
-      margin: 20rpx 10rpx;
-      font-weight: bold;
-    }
+}
+
+.appoint-list {
+  padding: 20rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+  box-sizing: border-box;
+  border-radius: 20rpx;
+  .appoint-title {
+    font-size: 38rpx;
+    font-weight: bold;
+    margin-bottom: 10rpx;
+    color: #090909;
   }
 
-  .appoint-list {
-    padding: 20rpx;
-    background-color: #fff;
-    margin-bottom: 20rpx;
-    box-sizing: border-box;
-    border-radius: 20rpx;
-    .appoint-title {
-      font-size: 38rpx;
-      font-weight: bold;
-      margin-bottom: 10rpx;
-      color: #090909;
-    }
+  .appoint-address {
+    font-size: 32rpx;
+    margin: 20rpx;
+    padding-bottom: 20rpx;
+    color: #000000;
+    border-bottom: 2rpx solid #e5e5e5;
+  }
 
-    .appoint-address {
-      font-size: 32rpx;
-      margin: 20rpx;
-      padding-bottom: 20rpx;
-      color: #000000;
-      border-bottom: 2rpx solid #E5E5E5;
+  .appoint-flex {
+    display: flex;
+    .img {
+      width: 210rpx;
+      height: 160rpx;
+      display: block;
+      margin-right: 15rpx;
     }
-
-
-    .appoint-flex {
-      display: flex;
-      .img {
-        width: 210rpx;
-        height: 160rpx;
-        display: block;
-        margin-right: 15rpx;
-      }
-      .appoint-text {
-        font-size: 28rpx;
-        >view {
-          margin-bottom: 26rpx;
-        }
+    .appoint-text {
+      font-size: 28rpx;
+      > view {
+        margin-bottom: 26rpx;
       }
     }
-    .appoint-goto {
-      display: flex;
-      .detail,.cancel{
-        width: 45%;
-        border-radius: 20rpx;
-      }
-      .detail{
-        background-color: #6C9FC3;
-        color: #fff;
-      }
+  }
+  .appoint-goto {
+    display: flex;
+    .detail,
+    .cancel {
+      width: 45%;
+      border-radius: 20rpx;
+    }
+    .detail {
+      background-color: #6c9fc3;
+      color: #fff;
     }
   }
+}
 </style>

src/pages/user/coupon/index.vue

@@ -2,38 +2,55 @@
   <view class="container">
     <!-- 顶部导航栏 -->
     <view class="top-tab">
-      <u-tabs class="tab" :list="list" @click="handlerChangeTab1"
-      :activeStyle="{
-            color: '#fff',
-            fontWeight: 'bold',
-            transform: 'scale(1.05)'
+      <u-tabs
+        class="tab"
+        :list="list"
+        @click="handlerChangeTab1"
+        :activeStyle="{
+          color: '#fff',
+          fontWeight: 'bold',
+          transform: 'scale(1.05)',
         }"
         :inactiveStyle="{
-            color: '#fff',
-            transform: 'scale(1)'
+          color: '#fff',
+          transform: 'scale(1)',
         }"
-        itemStyle="height: 34px; width:27%;" lineColor="#D89A4C"></u-tabs>
+        itemStyle="height: 34px; width:27%;"
+        lineColor="#D89A4C"
+      ></u-tabs>
     </view>
 
     <!-- 优惠券的可用和失效 -->
     <view class="use">
-      <u-tabs :list="list2" lineWidth="100" lineColor="#347caf" :scrollable="false" :activeStyle="{
+      <u-tabs
+        :list="list2"
+        lineWidth="100"
+        lineColor="#347caf"
+        :scrollable="false"
+        :activeStyle="{
           color: '#347caf',
           fontWeight: 'bold',
           transform: 'scale(1.05)',
-        }" :inactiveStyle="{
+        }"
+        :inactiveStyle="{
           color: '#b7b6b8',
           transform: 'scale(1)',
-        }" itemStyle="padding-left: 90rpx; padding-right: 80rpx; height: 120rpx;"
-        @change='handlerSelectTab'
-        />
+        }"
+        itemStyle="padding-left: 90rpx; padding-right: 80rpx; height: 120rpx;"
+        @change="handlerSelectTab"
+      />
     </view>
 
     <!-- 优惠券可用 -->
-    <view class="couponUse" v-show="lable_type == 0" v-for="(item,index) of init_list">
+    <view
+      class="couponUse"
+      v-show="lable_type == 0"
+      :key="index"
+      v-for="(item, index) of init_list"
+    >
       <view class="useLeft">
         <view>{{ item.name }}</view>
-        <text>2320-07-02 ~ {{ item.expiration	}}</text>
+        <text>2320-07-02 ~ {{ item.expiration }}</text>
       </view>
       <view class="useRight">
         <view class="text">{{ item.discount * 10 }}<text>折</text></view>
@@ -42,7 +59,12 @@
       </view>
     </view>
 
-    <u-empty v-if="total == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
+    <u-empty
+      v-if="total == 0"
+      mode="data"
+      icon="http://cdn.uviewui.com/uview/empty/data.png"
+    >
+    </u-empty>
     <!-- 优惠券失效 -->
     <!-- <view class="couponDisUse couponUse" v-show="lable_type == 1" v-for="item of 3">
       <view class="useLeft">
@@ -59,151 +81,151 @@
 </template>
 
 <script>
-  import { maintainCouponPaging } from "@/api/mine.js"
-  import { mapState } from "vuex"
-  export default {
-    data() {
-      return {
-        list: [
-          {
-            id: 1,
-            name: '满减',
-            type:'REDUCE'
-          },
-          {
-            id: 2,
-            name: '折扣',
-            type:'DISCOUNT'
-          },
-          {
-            id: 3,
-            name: '赠送',
-            type:'GIVE'
-          },
-        ],
-        list2: [{
-            name: '可用',
-            type:'UNUSED'
-          },
-          {
-            name: '失效',
-            type:'CLOSED'
-          },
-        ],
-        lable_type: 0, // 是否可用
-        queryParams:{
-          size:10,//分页信息  取值范围: 页码,分页大小
-          type:'GIVE',//优惠券类型 允许值: GIVE(赠送), REDUCE(满减), DISCOUNT(折扣)
-          status:'UNUSED',// 用户优惠券状态 UNUSED(未使用), USED(已使用), EXPIRED(已过期), CLOSED(作废)
+import { maintainCouponPaging } from '@/api/mine.js';
+import { mapState } from 'vuex';
+export default {
+  data() {
+    return {
+      list: [
+        {
+          id: 1,
+          name: '满减',
+          type: 'REDUCE',
+        },
+        {
+          id: 2,
+          name: '折扣',
+          type: 'DISCOUNT',
+        },
+        {
+          id: 3,
+          name: '赠送',
+          type: 'GIVE',
         },
+      ],
+      list2: [
+        {
+          name: '可用',
+          type: 'UNUSED',
+        },
+        {
+          name: '失效',
+          type: 'CLOSED',
+        },
+      ],
+      lable_type: 0, // 是否可用
+      queryParams: {
+        size: 10, //分页信息  取值范围: 页码,分页大小
+        type: 'GIVE', //优惠券类型 允许值: GIVE(赠送), REDUCE(满减), DISCOUNT(折扣)
+        status: 'UNUSED', // 用户优惠券状态 UNUSED(未使用), USED(已使用), EXPIRED(已过期), CLOSED(作废)
+      },
 
-        init_list:[],//初始化列表
-        total:0
-      };
+      init_list: [], //初始化列表
+      total: 0,
+    };
+  },
+  mounted() {
+    this.handlerInitCouponList();
+  },
+  methods: {
+    // 初始化优惠卷列表
+    handlerInitCouponList() {
+      maintainCouponPaging(this.queryParams).then(res => {
+        this.init_list = res.data.records;
+        this.total = res.data.total;
+      });
     },
-    mounted() {
-      this.handlerInitCouponList()
+    // 选择顶部导航栏
+    handlerChangeTab1(e) {
+      this.queryParams.type = e.type;
+      this.handlerInitCouponList();
     },
-    methods: {
-      // 初始化优惠卷列表
-      handlerInitCouponList(){
-        maintainCouponPaging(this.queryParams).then(res=>{
-          this.init_list = res.data.records
-          this.total = res.data.total
-        })
-      },
-      // 选择顶部导航栏
-      handlerChangeTab1(e){
-        this.queryParams.type = e.type
-        this.handlerInitCouponList()
-      },
-      // 点击选择下层tab栏 选择是否可用
-      handlerSelectTab(e){
-        this.lable_type = e.index
-        this.queryParams.status = e.type
-        this.handlerInitCouponList()
-      }
+    // 点击选择下层tab栏 选择是否可用
+    handlerSelectTab(e) {
+      this.lable_type = e.index;
+      this.queryParams.status = e.type;
+      this.handlerInitCouponList();
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .container {
-    height: 100vh;
-    background-color: #efefef;
-
-    .top-tab {
-      width: 100%;
-      background-color: #347CAF;
-      padding: 20rpx 0;
-    }
+.container {
+  height: 100vh;
+  background-color: #efefef;
+
+  .top-tab {
+    width: 100%;
+    background-color: #347caf;
+    padding: 20rpx 0;
+  }
+
+  .use {
+    padding: 0 140rpx;
+  }
 
-    .use {
-      padding: 0 140rpx;
+  /* 优惠券可用 */
+  .couponUse {
+    margin: 20rpx 30rpx;
+    height: 200rpx;
+    display: flex;
+    background-color: #fff;
+    box-sizing: border-box;
+
+    .useLeft {
+      width: 380rpx;
+      padding: 20rpx;
+
+      > view {
+        font-size: 40rpx;
+        margin: 20rpx;
+        color: #333;
+      }
+
+      > text {
+        font-size: 28rpx;
+        color: #5f5f5f;
+      }
     }
 
-    /* 优惠券可用 */
-    .couponUse {
-      margin: 20rpx 30rpx;
-      height: 200rpx;
-      display: flex;
-      background-color: #fff;
+    .useRight {
+      height: 100%;
+      padding: 10rpx;
+      color: #fff;
+      text-align: center;
       box-sizing: border-box;
+      width: calc(100% - 380rpx);
+      background-color: #347caf;
 
-      .useLeft {
-        width: 380rpx;
-        padding: 20rpx;
-
-        >view {
-          font-size: 40rpx;
-          margin: 20rpx;
-          color: #333;
-        }
+      .text {
+        font-size: 50rpx;
 
-        >text {
-          font-size: 28rpx;
-          color: #5f5f5f;
+        > text {
+          margin-left: 5rpx;
+          font-size: 24rpx;
         }
       }
 
-      .useRight {
-        height: 100%;
-        padding: 10rpx;
-        color: #fff;
-        text-align: center;
-        box-sizing: border-box;
-        width: calc(100% - 380rpx);
-        background-color: #347caf;
-
-        .text {
-          font-size: 50rpx;
-
-          >text {
-            margin-left: 5rpx;
-            font-size: 24rpx;
-          }
-        }
-
-        .gouUse {
-          width: 180rpx;
-          height: 60rpx;
-          line-height: 60rpx;
-          color: #347caf;
-          margin: 16rpx 0 0 60rpx;
-          background-color: #fff;
-        }
+      .gouUse {
+        width: 180rpx;
+        height: 60rpx;
+        line-height: 60rpx;
+        color: #347caf;
+        margin: 16rpx 0 0 60rpx;
+        background-color: #fff;
       }
     }
+  }
 
-    .couponDisUse {
-      .useRight {
-        background-color: #cecece;
+  .couponDisUse {
+    .useRight {
+      background-color: #cecece;
 
-        .gouUse {
-          color: #cecece;
-        }
+      .gouUse {
+        color: #cecece;
       }
     }
   }
-
+}
 </style>

src/pages/user/mygroup/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="container">
     <view class="top-img-box">
-      <img class="top-img" src="@/static/logo.png" alt="">
+      <img class="top-img" src="@/static/logo.png" alt="" />
       <view class="top-name"> My Team </view>
     </view>
 
@@ -11,17 +11,23 @@
         <view class="top-r">></view>
       </view>
       <view class="item-content">
-        <img class="item-img" src="@/static/logo.png" alt="" v-for="item of 3">
+        <img
+          class="item-img"
+          :key="item"
+          src="@/static/logo.png"
+          alt=""
+          v-for="item of 3"
+        />
       </view>
     </view>
 
-    <view class="group-item-box ">
+    <view class="group-item-box">
       <view class="item-top">
         <view class="top-l">最近动态</view>
         <view class="top-r">></view>
       </view>
       <view class="item-content dynamic-img-box">
-        <img class="dynamic-img" src="@/static/logo.png" alt="">
+        <img class="dynamic-img" src="@/static/logo.png" alt="" />
       </view>
     </view>
 
@@ -31,76 +37,80 @@
         <view class="top-r">></view>
       </view>
       <view class="item-content">
-        <img class="item-img" src="@/static/logo.png" alt="" v-for="item of 3">
+        <img
+          class="item-img"
+          src="@/static/logo.png"
+          alt=""
+          :key="item"
+          v-for="item of 3"
+        />
       </view>
     </view>
   </view>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-
-      }
-    }
-  }
+export default {
+  data() {
+    return {};
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .container {
-    padding: 20rpx 10rpx 50rpx;
+.container {
+  padding: 20rpx 10rpx 50rpx;
 
-    .top-img-box {
-      text-align: center;
+  .top-img-box {
+    text-align: center;
 
-      .top-img {
-        width: 160rpx;
-        height: 160rpx;
-        border-radius: 100rpx;
-      }
+    .top-img {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 100rpx;
+    }
 
-      .top-name {
-        color: #6B7280;
+    .top-name {
+      color: #6b7280;
+      font-weight: bold;
+      font-size: 32rpx;
+      margin-top: 20rpx;
+    }
+  }
+
+  .group-item-box {
+    padding: 0 20rpx;
+    margin-top: 60rpx;
+
+    .item-top {
+      display: flex;
+      justify-content: space-between;
+
+      .top-l,
+      .top-r {
+        color: #6b7280;
         font-weight: bold;
         font-size: 32rpx;
         margin-top: 20rpx;
       }
     }
 
-    .group-item-box {
-      padding: 0 20rpx;
-      margin-top: 60rpx;
-
-      .item-top {
-        display: flex;
-        justify-content: space-between;
+    .item-content {
+      display: flex;
 
-        .top-l,
-        .top-r {
-          color: #6B7280;
-          font-weight: bold;
-          font-size: 32rpx;
-          margin-top: 20rpx;
-        }
+      .item-img {
+        width: 160rpx;
+        height: 160rpx;
+        border-radius: 100rpx;
+        margin: 60rpx 20rpx 0 0;
       }
 
-      .item-content {
-        display: flex;
-
-        .item-img {
-          width: 160rpx;
-          height: 160rpx;
-          border-radius: 100rpx;
-          margin: 60rpx 20rpx 0 0;
-        }
-
-        .dynamic-img{
-          width: 100%;
-          height: 500rpx;
-          margin-top: 60rpx;
-        }
+      .dynamic-img {
+        width: 100%;
+        height: 500rpx;
+        margin-top: 60rpx;
       }
     }
   }
+}
 </style>

src/pages/user/servicecenter/index.vue

@@ -1,41 +1,30 @@
 <template>
   <view class="container">
-    <view class="title">
-      常见问题
-    </view>
+    <view class="title"> 常见问题 </view>
     <view class="item-box issue-box">
-      <view class="item" v-for="item of 4">
+      <view class="item" :key="item" v-for="item of 4">
         <view class="item-l">
-          <img class="img" src="@/static/logo.png" alt="">
-        </view>
-        <view class="item-r">
-          如何注销账户？
+          <img class="img" src="@/static/logo.png" alt="" />
         </view>
+        <view class="item-r"> 如何注销账户？ </view>
       </view>
     </view>
 
-
-    <view class="title">
-      热门问题
-    </view>
+    <view class="title"> 热门问题 </view>
     <view class="item-box hote-box">
-      <view class="item" v-for="item of 4">
+      <view class="item" :key="item" v-for="item of 4">
         <view class="item-l">
-          <img class="img" src="@/static/logo.png" alt="">
-        </view>
-        <view class="item-r">
-          如何注销账户？
+          <img class="img" src="@/static/logo.png" alt="" />
         </view>
+        <view class="item-r"> 如何注销账户？ </view>
       </view>
     </view>
 
-    <view class="title">
-      在线客服
-    </view>
-    <view class=" cust-box">
-      <view class="item" v-for="item of 3">
+    <view class="title"> 在线客服 </view>
+    <view class="cust-box">
+      <view class="item" :key="item" v-for="item of 3">
         <view class="item-l">
-          <img class="cust-img" src="@/static/logo.png" alt="">
+          <img class="cust-img" src="@/static/logo.png" alt="" />
         </view>
         <view class="item-r">
           <view class="r-title">客服小姐姐</view>
@@ -43,187 +32,188 @@
         </view>
       </view>
     </view>
-    <u-button class="contact-btn" @click="handlerCallService">联系客服</u-button>
-
+    <u-button class="contact-btn" @click="handlerCallService"
+      >联系客服</u-button
+    >
 
     <view class="footer-item">
-      <view class="item" v-for="item of footerList">
+      <view class="item" :key="item" v-for="item of footerList">
         <view class="item-l">
           {{ item.name }}
         </view>
         <view class="item-r">
-            <img class="cust-img" :src="item.imgs" alt="">
-            <span class="r-span">{{ item.text }}</span>
+          <img class="cust-img" :src="item.imgs" alt="" />
+          <span class="r-span">{{ item.text }}</span>
         </view>
       </view>
     </view>
-    <button class="feedback-btn" @click="handlerSubmitFeedback">提交反馈</button>
-
+    <button class="feedback-btn" @click="handlerSubmitFeedback">
+      提交反馈
+    </button>
   </view>
 </template>
 
 <script>
-  export default{
-    data(){
-      return{
-        footerList:[
-          {
-            name:'反馈建议',
-            imgs:'../../../static/logo.png',
-            text:'客服热线:888-8888-8888'
-          },
-          {
-            name:'反馈内容',
-            imgs:'../../../static/logo.png',
-            text:'客服邮箱:kefu@xxx.com'
-          },
-          {
-            name:'联系方式',
-            imgs:'../../../static/logo.png',
-            text:'客服时间:周一至周五9:00-20:00'
-          }
-        ]
-      }
+export default {
+  data() {
+    return {
+      footerList: [
+        {
+          name: '反馈建议',
+          imgs: '../../../static/logo.png',
+          text: '客服热线:888-8888-8888',
+        },
+        {
+          name: '反馈内容',
+          imgs: '../../../static/logo.png',
+          text: '客服邮箱:kefu@xxx.com',
+        },
+        {
+          name: '联系方式',
+          imgs: '../../../static/logo.png',
+          text: '客服时间:周一至周五9:00-20:00',
+        },
+      ],
+    };
+  },
+  methods: {
+    // 点击联系客服
+    handlerCallService() {
+      uni.showToast({
+        title: '嘟...',
+        icon: 'none',
+      });
     },
-    methods:{
-      // 点击联系客服
-      handlerCallService(){
-        uni.showToast({
-          title:'嘟...',
-          icon:'none'
-        })
-      },
-      // 点击提交反馈
-      handlerSubmitFeedback(){
-        uni.showToast({
-          title:'不给提',
-          icon:'none'
-        })
-      },
-    }
-  }
+    // 点击提交反馈
+    handlerSubmitFeedback() {
+      uni.showToast({
+        title: '不给提',
+        icon: 'none',
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .container{
-    padding: 40rpx;
-    .title{
-      font-size: 32rpx;
-      font-weight: bold;
-      color: #000;
-      margin-top: 20rpx;
-    }
-    .item-box{
+.container {
+  padding: 40rpx;
+  .title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #000;
+    margin-top: 20rpx;
+  }
+  .item-box {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  .issue-box {
+    .item {
       display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-    }
-    .issue-box{
-      .item{
-        display: flex;
-        align-items: center;
-        padding: 20rpx 10rpx;
-        background-color: #F3F4F6;
-        border-radius: 20rpx;
-        width: 42%;
-        margin: 20rpx 10rpx;
-        .item-l{
-          .img{
-            width: 50rpx;
-            height: 50rpx;
-            border-radius: 50rpx;
-          }
-        }
-        .item-r{
-          margin-left: 20rpx;
+      align-items: center;
+      padding: 20rpx 10rpx;
+      background-color: #f3f4f6;
+      border-radius: 20rpx;
+      width: 42%;
+      margin: 20rpx 10rpx;
+      .item-l {
+        .img {
+          width: 50rpx;
+          height: 50rpx;
+          border-radius: 50rpx;
         }
       }
+      .item-r {
+        margin-left: 20rpx;
+      }
     }
-    .hote-box{
-      .item{
-        display: flex;
-        align-items: center;
-        padding: 20rpx 10rpx;
-        background-color: #F3F4F6;
-        border-radius: 20rpx;
-        margin: 10rpx;
-        width: 100%;
-        .item-l{
-          .img{
-            width: 50rpx;
-            height: 50rpx;
-            border-radius: 50rpx;
-          }
-        }
-        .item-r{
-          margin-left: 20rpx;
+  }
+  .hote-box {
+    .item {
+      display: flex;
+      align-items: center;
+      padding: 20rpx 10rpx;
+      background-color: #f3f4f6;
+      border-radius: 20rpx;
+      margin: 10rpx;
+      width: 100%;
+      .item-l {
+        .img {
+          width: 50rpx;
+          height: 50rpx;
+          border-radius: 50rpx;
         }
       }
+      .item-r {
+        margin-left: 20rpx;
+      }
     }
+  }
 
-    .cust-box{
-      .item{
-        display: flex;
-        align-items: center;
-        margin: 20rpx 10rpx;
-        .item-l{
-          .cust-img{
-            width: 80rpx;
-            height: 80rpx;
-            border-radius: 80rpx;
-          }
+  .cust-box {
+    .item {
+      display: flex;
+      align-items: center;
+      margin: 20rpx 10rpx;
+      .item-l {
+        .cust-img {
+          width: 80rpx;
+          height: 80rpx;
+          border-radius: 80rpx;
         }
-        .item-r{
-          margin-left: 20rpx;
-          .r-title{
-            font-size:28rpx;
-            font-weight: bold;
-            color: #000;
-          }
-          .r-text{
-            font-size: 28rpx;
-            color: #8A909A;
-          }
+      }
+      .item-r {
+        margin-left: 20rpx;
+        .r-title {
+          font-size: 28rpx;
+          font-weight: bold;
+          color: #000;
+        }
+        .r-text {
+          font-size: 28rpx;
+          color: #8a909a;
         }
       }
     }
-    .footer-item{
-      margin: 40rpx 0;
-      .item{
+  }
+  .footer-item {
+    margin: 40rpx 0;
+    .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 20rpx 0;
+      .item-l {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #000;
+      }
+      .item-r {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        margin: 20rpx 0;
-        .item-l{
-          font-size: 32rpx;
-          font-weight: bold;
-          color: #000;
+        .cust-img {
+          width: 30rpx;
+          height: 30rpx;
         }
-        .item-r{
-          display: flex;
-          align-items: center;
-          .cust-img{
-            width: 30rpx;
-            height: 30rpx;
-          }
-          .r-span{
-            color: #2D3643;
-            font-size: 28rpx;
-            margin-left: 20rpx;
-          }
+        .r-span {
+          color: #2d3643;
+          font-size: 28rpx;
+          margin-left: 20rpx;
         }
       }
     }
+  }
 
-
-    .contact-btn{
-      font-size: 28rpx;
-    }
-    .feedback-btn{
-      background-color: #5992BB;
-      color: #fff;
-      font-size: 28rpx;
-      margin-top: 20rpx;
-    }
+  .contact-btn {
+    font-size: 28rpx;
+  }
+  .feedback-btn {
+    background-color: #5992bb;
+    color: #fff;
+    font-size: 28rpx;
+    margin-top: 20rpx;
   }
+}
 </style>