fix：部分颜色调整和合并签收手写板

build/utils.js

@@ -1,45 +1,48 @@
-'use strict'
-const path = require('path')
-const config = require('../config')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const packageConfig = require('../package.json')
+"use strict";
+const path = require("path");
+const config = require("../config");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const packageConfig = require("../package.json");
 
-exports.assetsPath = function (_path) {
-  const assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
+exports.assetsPath = function(_path) {
+  const assetsSubDirectory =
+    process.env.NODE_ENV === "production"
+      ? config.build.assetsSubDirectory
+      : config.dev.assetsSubDirectory;
 
-  return path.posix.join(assetsSubDirectory, _path)
-}
+  return path.posix.join(assetsSubDirectory, _path);
+};
 
-exports.cssLoaders = function (options) {
-  options = options || {}
+exports.cssLoaders = function(options) {
+  options = options || {};
 
   const cssLoader = {
-    loader: 'css-loader',
+    loader: "css-loader",
     options: {
       sourceMap: options.sourceMap
     }
-  }
+  };
 
   const postcssLoader = {
-    loader: 'postcss-loader',
+    loader: "postcss-loader",
     options: {
       sourceMap: options.sourceMap
     }
-  }
+  };
 
   // generate loader string to be used with extract text plugin
   function generateLoaders(loader, loaderOptions) {
-    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+    const loaders = options.usePostCSS
+      ? [cssLoader, postcssLoader]
+      : [cssLoader];
 
     if (loader) {
       loaders.push({
-        loader: loader + '-loader',
+        loader: loader + "-loader",
         options: Object.assign({}, loaderOptions, {
           sourceMap: options.sourceMap
         })
-      })
+      });
     }
 
     // Extract CSS when that option is specified
@@ -47,10 +50,10 @@ exports.cssLoaders = function (options) {
     if (options.extract) {
       return ExtractTextPlugin.extract({
         use: loaders,
-        fallback: 'vue-style-loader'
-      })
+        fallback: "vue-style-loader"
+      });
     } else {
-      return ['vue-style-loader'].concat(loaders)
+      return ["vue-style-loader"].concat(loaders);
     }
   }
 
@@ -58,53 +61,53 @@ exports.cssLoaders = function (options) {
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
-    less: generateLoaders('less', {
+    less: generateLoaders("less", {
       modifyVars: {
         // 直接覆盖变量
-        'button-info-border-color': '#00c4b8',
-        'button-info-background-color': '#00c4b8',
-        'checkbox-checked-icon-color': '#00c4b8',
-        'radio-checked-icon-color': '#00c4b8',
-        'tabs-default-color': '#00c4b8',
-      },
+        "button-info-border-color": "#0c2469",
+        "button-info-background-color": "#0c2469",
+        "checkbox-checked-icon-color": "#0c2469",
+        "radio-checked-icon-color": "#0c2469",
+        "tabs-default-color": "#0c2469"
+      }
     }),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
-  }
-}
+    sass: generateLoaders("sass", { indentedSyntax: true }),
+    scss: generateLoaders("sass"),
+    stylus: generateLoaders("stylus"),
+    styl: generateLoaders("stylus")
+  };
+};
 
 // Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  const output = []
-  const loaders = exports.cssLoaders(options)
+exports.styleLoaders = function(options) {
+  const output = [];
+  const loaders = exports.cssLoaders(options);
 
   for (const extension in loaders) {
-    const loader = loaders[extension]
+    const loader = loaders[extension];
     output.push({
-      test: new RegExp('\\.' + extension + '$'),
+      test: new RegExp("\\." + extension + "$"),
       use: loader
-    })
+    });
   }
 
-  return output
-}
+  return output;
+};
 
 exports.createNotifierCallback = () => {
-  const notifier = require('node-notifier')
+  const notifier = require("node-notifier");
 
   return (severity, errors) => {
-    if (severity !== 'error') return
+    if (severity !== "error") return;
 
-    const error = errors[0]
-    const filename = error.file && error.file.split('!').pop()
+    const error = errors[0];
+    const filename = error.file && error.file.split("!").pop();
 
     notifier.notify({
       title: packageConfig.name,
-      message: severity + ': ' + error.name,
-      subtitle: filename || '',
-      icon: path.join(__dirname, 'logo.png')
-    })
-  }
-}
+      message: severity + ": " + error.name,
+      subtitle: filename || "",
+      icon: path.join(__dirname, "logo.png")
+    });
+  };
+};

src/pages/components/Waitsent.vue

@@ -1,377 +1,579 @@
 <template>
-    <div class="container">
-        <form action="" class="container-searchNumber">
-            <van-search @search="onSearch" style="width: 100%;" v-model="params.search" placeholder="请输入批次号" />
-        </form>
-        <ScrollRefresh style="background-color: #f0eff4;" height="calc(100vh - 99px)" ref="scrollRefresh"
-            :request="request">
-            <template v-slot="slotProps">
-                <div class="batch" v-for="(item, index) in slotProps.list" :key="index">
-                    <div class="batch-top">
-                        <div class="batch-top-dispatchBatchNo">批次号:{{ item.dispatchBatchNo }}</div>
-                        <div class="jindu">派送进度 {{ item.signed }}/{{ item.sumAnd }}</div>
-                    </div>
-                    <!-- 各个运单 -->
-                    <div class="batchss">
-                        <div class="batch-middel" v-for="(unfold, index) in batchsFilter(item.list, item.openCard) "
-                            :key="index">
-                            <div class="batch-middel-text">
-                                <div class="batch-middel-text-style"
-                                    style="text-align: left; width: 100%; margin-left: -6px; display: flex;justify-content: space-between; align-items: center;">
-                                    <div>【{{ unfold.expressCompany }}】运单号:{{ unfold.expressNo }}</div>
-                                    <div class="batch-middel-text-style-corner"
-                                        :style="{ color: unfold.expressStatus == 0 ? '#00c4b8' : (unfold.expressStatus == 1 ? '#4fc1f1' : (unfold.expressStatus == 2 ? '#00c4b8' : '#ee0a24')) }">
-                                        {{ unfold.expressStatus == 0 ? '已入库' : `${unfold.expressStatus == 1 ? '派送中' :
-                                            `${unfold.expressStatus == 2 ? '已签收' : '滞留件'}`}` }}</div>
-                                </div>
-                                <div style="display: flex; justify-content:  space-between; flex-wrap: wrap;">
-                                    <div class="batch-middel-text-style">收件人：{{ unfold.recipient }}</div>
-                                    <div class="batch-middel-text-style">部门：{{ unfold.departmentId }}</div>
-                                    <div class="batch-middel-text-style">楼层：{{ unfold.floorNum }}</div>
-                                    <div class="batch-middel-text-style">座位号：{{ unfold.sendSeat }}</div>
-                                    <div style="display: flex; align-items: center;" class="batch-middel-text-style">
-                                        联系方式:{{ unfold.phone }}
-                                        <a :href="'tel:' + unfold.phone" style="padding-left: 6px;" type="info" plain
-                                            size="mini"><van-icon color="#4fc1f1" size="14" name="phone-o" /></a>
-                                    </div>
-                                    <div v-if="unfold.expressStatus == '4' || unfold.expressStatus == '2'"
-                                        class="batch-middel-text-style" style="width: 100%;">滞留原因：{{ unfold.sendRemark
-                                        }}</div>
-                                </div>
-                            </div>
-                            <div class="batch-middel-bottom">
-                                <van-button v-if="unfold.expressStatus !== '2'" class="batch-middel-bottom-buttom"
-                                    size="small" plain type="info" @click="onReceiving(unfold)">签收
-                                </van-button>
-                                <van-button v-if="unfold.expressStatus !== '4' && unfold.expressStatus !== '2'"
-                                    class="batch-middel-bottom-buttom" size="small" plain type="danger"
-                                    @click="onSureRetention(unfold)">设为滞留</van-button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div @click="onUnfold(item)" class="batch-bottom">
-                        <div v-if="item.sumAnd !== 1">
-                            {{ item.openCard ? "收起....." : "展开....." }}
-                        </div>
-                    </div>
+  <div class="container">
+    <form action="" class="container-searchNumber">
+      <van-search
+        @search="onSearch"
+        style="width: 100%;"
+        v-model="params.search"
+        placeholder="请输入批次号"
+      />
+    </form>
+    <ScrollRefresh
+      style="background-color: #f0eff4;"
+      height="calc(100vh - 99px)"
+      ref="scrollRefresh"
+      :request="request"
+    >
+      <template v-slot="slotProps">
+        <div class="batch" v-for="(item, index) in slotProps.list" :key="index">
+          <div class="batch-top">
+            <div class="batch-top-dispatchBatchNo">
+              批次号:{{ item.dispatchBatchNo }}
+            </div>
+            <div class="jindu">
+              派送进度 {{ item.signed }}/{{ item.sumAnd }}
+            </div>
+          </div>
+          <!-- 各个运单 -->
+          <div class="batchss">
+            <div
+              class="batch-middel"
+              v-for="(unfold, index) in batchsFilter(item.list, item.openCard)"
+              :key="index"
+            >
+              <div class="batch-middel-text">
+                <div
+                  class="batch-middel-text-style"
+                  style="text-align: left; width: 100%; margin-left: -6px; display: flex;justify-content: space-between; align-items: center;"
+                >
+                  <div>
+                    【{{ unfold.expressCompany }}】运单号:{{ unfold.expressNo }}
+                  </div>
+                  <div
+                    class="batch-middel-text-style-corner"
+                    :style="{
+                      color:
+                        unfold.expressStatus == 0
+                          ? '#0c2469'
+                          : unfold.expressStatus == 1
+                          ? '#4fc1f1'
+                          : unfold.expressStatus == 2
+                          ? '#0c2469'
+                          : '#ee0a24'
+                    }"
+                  >
+                    {{
+                      unfold.expressStatus == 0
+                        ? "已入库"
+                        : `${
+                            unfold.expressStatus == 1
+                              ? "派送中"
+                              : `${
+                                  unfold.expressStatus == 2
+                                    ? "已签收"
+                                    : "滞留件"
+                                }`
+                          }`
+                    }}
+                  </div>
+                </div>
+                <div
+                  style="display: flex; justify-content:  space-between; flex-wrap: wrap;"
+                >
+                  <div class="batch-middel-text-style">
+                    收件人：{{ unfold.recipient }}
+                  </div>
+                  <div class="batch-middel-text-style">
+                    部门：{{ unfold.departmentId }}
+                  </div>
+                  <div class="batch-middel-text-style">
+                    楼层：{{ unfold.floorNum }}
+                  </div>
+                  <div class="batch-middel-text-style">
+                    座位号：{{ unfold.sendSeat }}
+                  </div>
+                  <div
+                    style="display: flex; align-items: center;"
+                    class="batch-middel-text-style"
+                  >
+                    联系方式:{{ unfold.phone }}
+                    <a
+                      :href="'tel:' + unfold.phone"
+                      style="padding-left: 6px;"
+                      type="info"
+                      plain
+                      size="mini"
+                      ><van-icon color="#4fc1f1" size="14" name="phone-o"
+                    /></a>
+                  </div>
+                  <div
+                    v-if="
+                      unfold.expressStatus == '4' || unfold.expressStatus == '2'
+                    "
+                    class="batch-middel-text-style"
+                    style="width: 100%;"
+                  >
+                    滞留原因：{{ unfold.sendRemark }}
+                  </div>
                 </div>
-            </template>
-        </ScrollRefresh>
+              </div>
+              <div class="batch-middel-bottom">
+                <van-button
+                  v-if="unfold.expressStatus !== '2'"
+                  class="batch-middel-bottom-buttom"
+                  size="small"
+                  plain
+                  type="info"
+                  @click="onReceiving(unfold)"
+                  >签收
+                </van-button>
+                <van-button
+                  v-if="
+                    unfold.expressStatus !== '4' && unfold.expressStatus !== '2'
+                  "
+                  class="batch-middel-bottom-buttom"
+                  size="small"
+                  plain
+                  type="danger"
+                  @click="onSureRetention(unfold)"
+                  >设为滞留</van-button
+                >
+              </div>
+            </div>
+          </div>
 
-        <!-- 签收 -->
-        <van-popup position="bottom" v-model="receiving" style="width: 100%; height: 93%;">
-            <div style="font-size: 20px; text-align: center; margin-top: 12px;">派件签收</div>
-            <van-form @submit="onReceipt">
-                <van-field name="expressNo" label="运单号" :value="onReceivingVlaue.expressNo" readonly />
-                <van-field label="快件类型" :value="onReceivingVlaue.expressType" readonly />
-                <van-field label="快递公司" :value="onReceivingVlaue.expressCompany" readonly />
-                <van-field label="部门" :value="onReceivingVlaue.departmentId" readonly />
-                <van-field label="座位号" :value="onReceivingVlaue.sendSeat" readonly />
-                <van-field label="收件人" :value="onReceivingVlaue.recipient" readonly />
-                <van-field label="楼层" :value="onReceivingVlaue.floorNum" readonly />
-                <van-field label="联系方式" :value="onReceivingVlaue.phone" readonly />
+          <div @click="onUnfold(item)" class="batch-bottom">
+            <div v-if="item.sumAnd !== 1">
+              {{ item.openCard ? "收起....." : "展开....." }}
+            </div>
+          </div>
+        </div>
+      </template>
+    </ScrollRefresh>
 
-                <van-field readonly clickable name="picker" :value="selectedOption" label="签收类型" placeholder="点击签收类型"
-                    @click="showPicker = true" />
-                <van-popup v-model="showPicker" position="bottom">
-                    <van-picker show-toolbar :columns="options" @confirm="onConfirm" @cancel="showPicker = false" />
-                </van-popup>
-                <van-field v-if="wer == '他人签收'" v-model="getOtherPhone" :rules="[{ required: true }]" label="代取手机号"
-                    placeholder="请输入代取手机号" />
-                <van-field name="uploader" :rules="[{ required: true, message: '请上传图片' }]" label="签收照片">
-                    <template #input>
-                        <van-uploader v-model="uploader" :after-read="afterRead" :before-read="beforeRead"
-                            :max-count="1" />
-                    </template>
-                </van-field>
+    <!-- 签收 -->
+    <van-popup
+      position="bottom"
+      v-model="receiving"
+      style="width: 100%; height: 93%;"
+    >
+      <div style="font-size: 20px; text-align: center; margin-top: 12px;">
+        派件签收
+      </div>
+      <van-form @submit="onReceipt">
+        <van-field
+          name="expressNo"
+          label="运单号"
+          :value="onReceivingVlaue.expressNo"
+          readonly
+        />
+        <van-field
+          label="快件类型"
+          :value="onReceivingVlaue.expressType"
+          readonly
+        />
+        <van-field
+          label="快递公司"
+          :value="onReceivingVlaue.expressCompany"
+          readonly
+        />
+        <van-field
+          label="部门"
+          :value="onReceivingVlaue.departmentId"
+          readonly
+        />
+        <van-field label="座位号" :value="onReceivingVlaue.sendSeat" readonly />
+        <van-field
+          label="收件人"
+          :value="onReceivingVlaue.recipient"
+          readonly
+        />
+        <van-field label="楼层" :value="onReceivingVlaue.floorNum" readonly />
+        <van-field label="联系方式" :value="onReceivingVlaue.phone" readonly />
 
-                <div style="margin: 16px;">
-                    <van-button round block type="info" native-type="submit">签收完成</van-button>
-                </div>
-            </van-form>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="selectedOption"
+          label="签收类型"
+          placeholder="点击签收类型"
+          @click="showPicker = true"
+        />
+        <van-popup v-model="showPicker" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="options"
+            @confirm="onConfirm"
+            @cancel="showPicker = false"
+          />
         </van-popup>
+        <van-field
+          v-if="wer == '他人签收'"
+          v-model="getOtherPhone"
+          :rules="[{ required: true }]"
+          label="代取手机号"
+          placeholder="请输入代取手机号"
+        />
+        <van-field
+          name="uploader"
+          :rules="[{ required: true, message: '请上传图片' }]"
+          label="签收照片"
+        >
+          <template #input>
+            <van-uploader
+              v-model="uploader"
+              :after-read="afterRead"
+              :before-read="beforeRead"
+              :max-count="1"
+            />
+          </template>
+        </van-field>
 
-        <!-- 设为滞留 -->
-        <van-popup position="bottom" v-model="retention" style="width: 100%; height: 85%;">
-            <div style="font-size: 20px; text-align: center;  margin-top: 12px;">派件滞留</div>
-            <van-form @submit="onSetRetention">
-                <van-field name="expressNo" label="运单号" :value="onSureRetentionVlaue.expressNo" readonly />
-                <van-field label="快件类型" :value="onSureRetentionVlaue.expressType" readonly />
-                <van-field label="快递公司" :value="onSureRetentionVlaue.expressCompany" readonly />
-                <van-field label="部门" :value="onSureRetentionVlaue.departmentId" readonly />
-                <van-field label="座位号" :value="onSureRetentionVlaue.sendSeat" readonly />
-                <van-field label="收件人" :value="onSureRetentionVlaue.recipient" readonly />
-                <van-field label="楼层" :value="onSureRetentionVlaue.floorNum" readonly />
-                <van-field label="联系方式" :value="onSureRetentionVlaue.phone" readonly />
+        <div style="margin: 16px;">
+          <van-button round block type="info" native-type="submit"
+            >签收完成</van-button
+          >
+        </div>
+      </van-form>
+    </van-popup>
 
-                <van-field readonly clickable name="picker" :value="selectedRetention" label="滞留原因"
-                    placeholder="请输入滞留原因" @click="showRetention = true" />
-                <van-popup v-model="showRetention" position="bottom">
-                    <van-picker show-toolbar :columns="Retention" @confirm="onRetention"
-                        @cancel="showRetention = false" />
-                </van-popup>
-                <van-field v-if="ert == '其他原因'" v-model="otherCause" label="其他原因" :rules="[{ required: true }]"
-                    placeholder="请输入其他原因" />
+    <!-- 设为滞留 -->
+    <van-popup
+      position="bottom"
+      v-model="retention"
+      style="width: 100%; height: 85%;"
+    >
+      <div style="font-size: 20px; text-align: center;  margin-top: 12px;">
+        派件滞留
+      </div>
+      <van-form @submit="onSetRetention">
+        <van-field
+          name="expressNo"
+          label="运单号"
+          :value="onSureRetentionVlaue.expressNo"
+          readonly
+        />
+        <van-field
+          label="快件类型"
+          :value="onSureRetentionVlaue.expressType"
+          readonly
+        />
+        <van-field
+          label="快递公司"
+          :value="onSureRetentionVlaue.expressCompany"
+          readonly
+        />
+        <van-field
+          label="部门"
+          :value="onSureRetentionVlaue.departmentId"
+          readonly
+        />
+        <van-field
+          label="座位号"
+          :value="onSureRetentionVlaue.sendSeat"
+          readonly
+        />
+        <van-field
+          label="收件人"
+          :value="onSureRetentionVlaue.recipient"
+          readonly
+        />
+        <van-field
+          label="楼层"
+          :value="onSureRetentionVlaue.floorNum"
+          readonly
+        />
+        <van-field
+          label="联系方式"
+          :value="onSureRetentionVlaue.phone"
+          readonly
+        />
 
-
-                <div style="margin: 16px;">
-                    <van-button round block native-type="submit" type="danger">设为滞留</van-button>
-                </div>
-            </van-form>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="selectedRetention"
+          label="滞留原因"
+          placeholder="请输入滞留原因"
+          @click="showRetention = true"
+        />
+        <van-popup v-model="showRetention" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="Retention"
+            @confirm="onRetention"
+            @cancel="showRetention = false"
+          />
         </van-popup>
-    </div>
+        <van-field
+          v-if="ert == '其他原因'"
+          v-model="otherCause"
+          label="其他原因"
+          :rules="[{ required: true }]"
+          placeholder="请输入其他原因"
+        />
+
+        <div style="margin: 16px;">
+          <van-button round block native-type="submit" type="danger"
+            >设为滞留</van-button
+          >
+        </div>
+      </van-form>
+    </van-popup>
+  </div>
 </template>
 
 <script>
-import ScrollRefresh from './ScrollRefresh.vue';
-import { appOutboundInquiry, appGetTheDetails, appSetStrands, appDelivery, appUploadTheSignature } from '@/api/index'
+import ScrollRefresh from "./ScrollRefresh.vue";
+import {
+  appOutboundInquiry,
+  appGetTheDetails,
+  appSetStrands,
+  appDelivery,
+  appUploadTheSignature
+} from "@/api/index";
 export default {
-    name: 'waitsent',
-    components: {
-        ScrollRefresh
+  name: "waitsent",
+  components: {
+    ScrollRefresh
+  },
+  data() {
+    return {
+      getOtherPhone: "", //他人签收
+      otherCause: "", //滞留原因
+      receiving: false, //签收
+      retention: false, //滞留
+      selectedOption: "本人签收", // 设置为空字符串，等待选择
+      selectedRetention: "",
+      value: "",
+      options: ["本人签收", "他人签收"],
+      Retention: ["无法联系收件人", "其他原因"],
+      showPicker: false,
+      showRetention: false,
+      wer: "",
+      ert: "",
+      uploader: [],
+      params: {
+        search: "" //'SF202303221917',
+      },
+      onReceivingVlaue: {}, //点击签收存放的数据
+      onSureRetentionVlaue: {}, //点击签收滞留的数据
+      Agent: "", //是否待签(后续判断)
+      getFileUrl: "" //返回的图片地址
+    };
+  },
+  methods: {
+    //
+    batchsFilter(list, openCard) {
+      if (Array.isArray(list) && list.length > 0) {
+        if (!openCard) {
+          return [list[0]];
+        }
+        return list;
+      }
+      return [];
     },
-    data() {
-        return {
-            getOtherPhone: '',//他人签收
-            otherCause: '',//滞留原因
-            receiving: false,//签收
-            retention: false,//滞留
-            selectedOption: '本人签收', // 设置为空字符串，等待选择
-            selectedRetention: '',
-            value: '',
-            options: ['本人签收', '他人签收'],
-            Retention: ['无法联系收件人', '其他原因'],
-            showPicker: false,
-            showRetention: false,
-            wer: '',
-            ert: '',
-            uploader: [],
-            params: {
-                search: '', //'SF202303221917',
-            },
-            onReceivingVlaue: {},//点击签收存放的数据
-            onSureRetentionVlaue: {},//点击签收滞留的数据
-            Agent: '',//是否待签(后续判断)
-            getFileUrl: '',//返回的图片地址
-        };
+    // 搜索批次号
+    async onSearch() {
+      this.$refs.scrollRefresh.onRefresh();
     },
-    methods: {
-        //
-        batchsFilter(list, openCard) {
-            if (Array.isArray(list) && list.length > 0) {
-                if (!openCard) {
-                    return [list[0]]
-                }
-                return list
-            }
-            return []
-        },
-        // 搜索批次号
-        async onSearch() {
-            this.$refs.scrollRefresh.onRefresh()
-        },
-        async request(_params) {
-            let parmas = {
-                dispatchBatchNo: this.params.search, // 批次号
-                deliveryPeopleId: localStorage.getItem('courierId'), //派送员id
-                isFinish: '2',//完成 1已完成 2未完成
-                ..._params
-            }
-            const res = await appOutboundInquiry({ ...parmas }, { emulateJSON: true, loading: true, message: "查询中..." })
-            res.data = res.data.map((item) => {
-                item.list = [item.list]
-                return item
-            })
-            return res
-        },
-        // 签收控制显示
-        onReceiving(value) {
-            this.onReceivingVlaue = value
-            this.receiving = true;
-            this.selectedOption = this.options[0];
-            this.$refs.scrollRefresh.onRefresh()
-        },
-        // 签收选择确认弹框
-        onConfirm(value) {
-            this.selectedOption = value;
-            this.showPicker = false;
-            this.wer = value
-        },
-        // 滞留控制显示
-        onSureRetention(value) {
-            this.onSureRetentionVlaue = value
-            this.retention = true;
-        },
-        // 确定滞留
-        async onSetRetention(value) {
-            if (value.picker == '') {
-                this.$toast('请输入滞留原因')
-                return
-            }
-            let params = {
-                expressNo: value.expressNo,
-                sendRemark: value.picker
-            }
-            if (value.picker == '其他原因') {
-                params.sendRemark = this.otherCause
-            }
-            const res = await appSetStrands({ ...params }, { loading: true, message: '滞留中' })
-            if (res.code == 0) {
-                this.$toast('滞留完成')
-                this.retention = false
-            }
-            this.otherCause = ''
-            this.$refs.scrollRefresh.onRefresh()
-        },
-        // 原因
-        onRetention(value) {
-            this.selectedRetention = value;
-            this.showRetention = false;
-            this.ert = value
-        },
-        // 文件读取完成后的钩子
-        async afterRead(file) {
-            console.log(file)
-            const formData = new FormData();
-            formData.append('file', file.file); // 这里的 'file' 是后端接收文件的字段名
-            const res = await appUploadTheSignature(formData)
-            if (res.code == 0) {
-                this.getFileUrl = res.data
-            } else {
-                this.$toast('上传图片失败')
-            }
-
-        },
-        beforeRead(file) {
-            // 在这里可以添加对文件的校验逻辑
-            // 如果返回 true, 则继续读取文件
-            return true;
-        },
-        // 签收完成
-        async onReceipt(value) {
-            console.log('123')
-            console.log(value)
-            if (value.picker == '他人签收') {
-                this.Agent = 2
-            } else {
-                this.Agent = 1
-            }
-            let params = {
-                signEnclosureImg: this.getFileUrl,//签署图片  
-                deliveryId: value.expressNo,  //快递单号
-                deliveryPeopleId: localStorage.getItem('courierId'), //派件员id
-                isCollectAgent: this.Agent,//是否代签
-                collectAgentNumber: value.picker // 原因
-                // expressNo: value.expressNo,
-            }
-            if (value.picker == '他人签收') {
-                params.collectAgentNumber = this.getOtherPhone
-            }
-            const res = await appDelivery({ ...params }, { loading: true, message: '签收中' })
-            if (res.code == 0) {
-                this.$toast('签收完成')
-                this.receiving = false
-            } else {
-                this.$toast('签收失败')
-            }
-            this.uploader = []
-            this.$refs.scrollRefresh.onRefresh()
-
-        },
-        // 展开
-        async onUnfold(waite) {
-            const data = await appGetTheDetails({ dispatchBatchNo: waite.dispatchBatchNo })
-            waite.list = data.data
-            this.$set(waite, "openCard", !waite.openCard)
-        }
+    async request(_params) {
+      let parmas = {
+        dispatchBatchNo: this.params.search, // 批次号
+        deliveryPeopleId: localStorage.getItem("courierId"), //派送员id
+        isFinish: "2", //完成 1已完成 2未完成
+        ..._params
+      };
+      const res = await appOutboundInquiry(
+        { ...parmas },
+        { emulateJSON: true, loading: true, message: "查询中..." }
+      );
+      res.data = res.data.map(item => {
+        item.list = [item.list];
+        return item;
+      });
+      return res;
     },
-}
-
-
+    // 签收控制显示
+    onReceiving(value) {
+      this.onReceivingVlaue = value;
+      this.receiving = true;
+      this.selectedOption = this.options[0];
+      this.$refs.scrollRefresh.onRefresh();
+    },
+    // 签收选择确认弹框
+    onConfirm(value) {
+      this.selectedOption = value;
+      this.showPicker = false;
+      this.wer = value;
+    },
+    // 滞留控制显示
+    onSureRetention(value) {
+      this.onSureRetentionVlaue = value;
+      this.retention = true;
+    },
+    // 确定滞留
+    async onSetRetention(value) {
+      if (value.picker == "") {
+        this.$toast("请输入滞留原因");
+        return;
+      }
+      let params = {
+        expressNo: value.expressNo,
+        sendRemark: value.picker
+      };
+      if (value.picker == "其他原因") {
+        params.sendRemark = this.otherCause;
+      }
+      const res = await appSetStrands(
+        { ...params },
+        { loading: true, message: "滞留中" }
+      );
+      if (res.code == 0) {
+        this.$toast("滞留完成");
+        this.retention = false;
+      }
+      this.otherCause = "";
+      this.$refs.scrollRefresh.onRefresh();
+    },
+    // 原因
+    onRetention(value) {
+      this.selectedRetention = value;
+      this.showRetention = false;
+      this.ert = value;
+    },
+    // 文件读取完成后的钩子
+    async afterRead(file) {
+      console.log(file);
+      const formData = new FormData();
+      formData.append("file", file.file); // 这里的 'file' 是后端接收文件的字段名
+      const res = await appUploadTheSignature(formData);
+      if (res.code == 0) {
+        this.getFileUrl = res.data;
+      } else {
+        this.$toast("上传图片失败");
+      }
+    },
+    beforeRead(file) {
+      // 在这里可以添加对文件的校验逻辑
+      // 如果返回 true, 则继续读取文件
+      return true;
+    },
+    // 签收完成
+    async onReceipt(value) {
+      console.log("123");
+      console.log(value);
+      if (value.picker == "他人签收") {
+        this.Agent = 2;
+      } else {
+        this.Agent = 1;
+      }
+      let params = {
+        signEnclosureImg: this.getFileUrl, //签署图片
+        deliveryId: value.expressNo, //快递单号
+        deliveryPeopleId: localStorage.getItem("courierId"), //派件员id
+        isCollectAgent: this.Agent, //是否代签
+        collectAgentNumber: value.picker // 原因
+        // expressNo: value.expressNo,
+      };
+      if (value.picker == "他人签收") {
+        params.collectAgentNumber = this.getOtherPhone;
+      }
+      const res = await appDelivery(
+        { ...params },
+        { loading: true, message: "签收中" }
+      );
+      if (res.code == 0) {
+        this.$toast("签收完成");
+        this.receiving = false;
+      } else {
+        this.$toast("签收失败");
+      }
+      this.uploader = [];
+      this.$refs.scrollRefresh.onRefresh();
+    },
+    // 展开
+    async onUnfold(waite) {
+      const data = await appGetTheDetails({
+        dispatchBatchNo: waite.dispatchBatchNo
+      });
+      waite.list = data.data;
+      this.$set(waite, "openCard", !waite.openCard);
+    }
+  }
+};
 </script>
 
 <style lang="less" scoped>
 * {
-    font-size: 12px;
+  font-size: 12px;
 }
 
 .container {
-    height: 100%;
-
-    &-searchNumber {
-        display: flex;
-        justify-content: space-between;
-        background-color: #fff;
+  height: 100%;
 
+  &-searchNumber {
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff;
 
-        &-icon {
-            margin: 19px 8px 0 0px;
-        }
+    &-icon {
+      margin: 19px 8px 0 0px;
     }
+  }
 
-    .batch {
-        background-color: #fff;
-        margin: 10px;
-        border-radius: 4px;
+  .batch {
+    background-color: #fff;
+    margin: 10px;
+    border-radius: 4px;
 
-        &-top {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 10px 0px 10px;
+    &-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 10px 0px 10px;
 
-            &-dispatchBatchNo {
-                font-size: 12px;
+      &-dispatchBatchNo {
+        font-size: 12px;
+      }
 
-            }
-
-            .jindu {
-                color: #4fc1f1
-            }
-        }
-
-        &-middel {
-            // height: 120px;
-            background-color: #f7f8fa;
-            border-radius: 12px;
-            margin: 10px 6px 0px;
-            padding-bottom: 8px;
+      .jindu {
+        color: #4fc1f1;
+      }
+    }
 
-            &-text {
-                padding: 0px 10px;
+    &-middel {
+      // height: 120px;
+      background-color: #f7f8fa;
+      border-radius: 12px;
+      margin: 10px 6px 0px;
+      padding-bottom: 8px;
 
-                &-style {
-                    width: 50%;
-                    font-size: 12px;
-                    padding-top: 8px;
+      &-text {
+        padding: 0px 10px;
 
-                    &-corner {
-                        width: 41px;
-                        margin-right: -14px;
-                    }
-                }
+        &-style {
+          width: 50%;
+          font-size: 12px;
+          padding-top: 8px;
 
-            }
+          &-corner {
+            width: 41px;
+            margin-right: -14px;
+          }
+        }
+      }
 
-            &-bottom {
-                display: flex;
-                justify-content: flex-end;
-                padding-top: 5px;
+      &-bottom {
+        display: flex;
+        justify-content: flex-end;
+        padding-top: 5px;
 
-                &-buttom {
-                    width: 70px;
-                    height: 25px;
-                    border-radius: 6px;
-                    margin-right: 5px
-                }
-            }
+        &-buttom {
+          width: 70px;
+          height: 25px;
+          border-radius: 6px;
+          margin-right: 5px;
         }
+      }
+    }
 
-        &-bottom {
-            padding: 10px 4px;
-            color: #169bd5;
-        }
+    &-bottom {
+      padding: 10px 4px;
+      color: #169bd5;
     }
+  }
 }
 </style>

src/pages/forgetpassword.vue

@@ -1,130 +1,137 @@
 <template>
-	<div class="content">
-
-		<div class="login">
-			<!-- <div class="item">
+  <div class="content">
+    <div class="login">
+      <!-- <div class="item">
 				<van-cell-group>
 			       <van-field v-model="name"  placeholder="请输入用户名或邮箱" />
 			    </van-cell-group>
 			</div> -->
-			<div class="item">
-				<van-cell-group>
-					<van-field v-model="password" type="password" placeholder="请输入密码" />
-				</van-cell-group>
-			</div>
-			<div class="item">
-				<van-cell-group>
-					<van-field v-model="confirmPassword" type="password" placeholder="请再次输入密码" />
-				</van-cell-group>
-			</div>
-			<div class="btn">
-				<van-button type="primary" @click="save()" color="#00c4b8">保存</van-button>
-			</div>
-			<!-- <div class="register">
+      <div class="item">
+        <van-cell-group>
+          <van-field
+            v-model="password"
+            type="password"
+            placeholder="请输入密码"
+          />
+        </van-cell-group>
+      </div>
+      <div class="item">
+        <van-cell-group>
+          <van-field
+            v-model="confirmPassword"
+            type="password"
+            placeholder="请再次输入密码"
+          />
+        </van-cell-group>
+      </div>
+      <div class="btn">
+        <van-button type="primary" @click="save()" color="#0c2469"
+          >保存</van-button
+        >
+      </div>
+      <!-- <div class="register">
 				<router-link to="">新用户注册</router-link>
 				<router-link to="">忘记密码</router-link>
 			</div> -->
-		</div>
-	</div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { LJYforgetPassword } from '../api/index'
-import { Toast, Dialog } from 'vant'
+import { LJYforgetPassword } from "../api/index";
+import { Toast, Dialog } from "vant";
 export default {
-
-	data() {
-		return {
-			titlename: "修改密码",
-			name: "",
-			password: "",
-			confirmPassword: "",
-			yzm: "",
-			userId: "",
-		}
-	},
-	created: function () {
-
-		this.userId = localStorage.getItem('courierUserId');
-	},
-	methods: {
-		async save() {
-			if (this.password == '' || this.password == undefined) {
-				Toast('请输入密码！');
-				return;
-			}
-			if (this.confirmPassword == '' || this.confirmPassword == undefined) {
-				Toast('请再次输入密码！');
-				return;
-			}
-			if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(this.confirmPassword)) {  
-				Toast('密码需包含大小写字母及数字，长度至少为8位!');
-				return;
-			}
-			if (this.confirmPassword != this.password) {
-				Toast('两次输入密码不相同！');
-				return;
-			}
-			const res = await LJYforgetPassword({
-				userId: this.userId,
-				password: this.password
-			})
-			if (res.msg == 'success') {
-				localStorage.removeItem("courierUserId");
-				this.$router.push({ path: '/' });
-			} else {
-				Toast('修改失败！');
-			}
-		}
-	}
-}
+  data() {
+    return {
+      titlename: "修改密码",
+      name: "",
+      password: "",
+      confirmPassword: "",
+      yzm: "",
+      userId: ""
+    };
+  },
+  created: function() {
+    this.userId = localStorage.getItem("courierUserId");
+  },
+  methods: {
+    async save() {
+      if (this.password == "" || this.password == undefined) {
+        Toast("请输入密码！");
+        return;
+      }
+      if (this.confirmPassword == "" || this.confirmPassword == undefined) {
+        Toast("请再次输入密码！");
+        return;
+      }
+      if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(this.confirmPassword)) {
+        Toast("密码需包含大小写字母及数字，长度至少为8位!");
+        return;
+      }
+      if (this.confirmPassword != this.password) {
+        Toast("两次输入密码不相同！");
+        return;
+      }
+      const res = await LJYforgetPassword({
+        userId: this.userId,
+        password: this.password
+      });
+      if (res.msg == "success") {
+        localStorage.removeItem("courierUserId");
+        this.$router.push({ path: "/" });
+      } else {
+        Toast("修改失败！");
+      }
+    }
+  }
+};
 </script>
 <style scoped lang="less">
 .content {
-	.loginimg {
-		width: 3.48rem;
-		margin: 0 auto;
-		display: block;
-		padding: 2.15rem .8rem;
-	}
+  .loginimg {
+    width: 3.48rem;
+    margin: 0 auto;
+    display: block;
+    padding: 2.15rem 0.8rem;
+  }
 
-	.login {
-		width: 5.8rem;
-		margin: 0.3rem auto 0px;
+  .login {
+    width: 5.8rem;
+    margin: 0.3rem auto 0px;
 
-		.item {
-			border: .01rem solid #bfbfbf;
-			border-radius: .1rem;
-			margin-bottom: .3rem;
-			background: white;
-			overflow: hidden;
-			color: #999999;
-		}
+    .item {
+      border: 0.01rem solid #bfbfbf;
+      border-radius: 0.1rem;
+      margin-bottom: 0.3rem;
+      background: white;
+      overflow: hidden;
+      color: #999999;
+    }
 
-		.item:nth-of-type(3) {
-			margin-bottom: .2rem;
-		}
+    .item:nth-of-type(3) {
+      margin-bottom: 0.2rem;
+    }
 
-		.btn {
-			button {
-				width: 100%;
-			}
-		}
+    .btn {
+      button {
+        width: 100%;
+      }
+    }
 
-		.register {
-			font-size: .24rem;
-			display: flex;
-			justify-content: space-between;
-			margin-top: .2rem;
+    .register {
+      font-size: 0.24rem;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 0.2rem;
 
-			a {
-				color: #999999;
-			}
+      a {
+        color: #999999;
+      }
 
-			a:nth-of-type(1) {
-				color: #02bfb3;
-			}
-		}
-	}
+      a:nth-of-type(1) {
+        color: #02bfb3;
+      }
+    }
+  }
 }
 </style>

src/pages/login.vue

@@ -1,134 +1,141 @@
 <template>
-	<div class="content">
-		<img class="loginimg" src="../assets/images/login.png" alt="">
-		<div class="login">
-			<div class="item">
-				<van-cell-group>
-					<van-field v-model="name" placeholder="请输入登录名" />
-				</van-cell-group>
-			</div>
-			<div class="item">
-				<van-cell-group>
-					<van-field v-model="password" type="password" placeholder="请输入密码" />
-				</van-cell-group>
-			</div>
-			<!-- <div class="item">
+  <div class="content">
+    <img class="loginimg" src="../assets/images/login.png" alt="" />
+    <div class="login">
+      <div class="item">
+        <van-cell-group>
+          <van-field v-model="name" placeholder="请输入登录名" />
+        </van-cell-group>
+      </div>
+      <div class="item">
+        <van-cell-group>
+          <van-field
+            v-model="password"
+            type="password"
+            placeholder="请输入密码"
+          />
+        </van-cell-group>
+      </div>
+      <!-- <div class="item">
 				<van-cell-group>
 			       <van-field v-model="yzm" type="number"  placeholder="请输入验证码" />
 			    </van-cell-group>
 			</div> -->
-			<div class="btn">
-				<van-button type="primary" color="#00c4b8" @click="login">登录</van-button>
-			</div>
-			<!-- <div class="register">
+      <div class="btn">
+        <van-button type="primary" color="#0c2469" @click="login"
+          >登录</van-button
+        >
+      </div>
+      <!-- <div class="register">
 				<router-link to="">新用户注册</router-link>
 				<router-link to="">忘记密码</router-link>
 			</div> -->
-			<div style="font-size: 10px;text-align: center;padding-top: 1.625rem;">
-				<a style="color: black" href="https://beian.miit.gov.cn">沪ICP备2021029008号-1</a>
-			</div>
-		</div>
-	</div>
+      <div style="font-size: 10px;text-align: center;padding-top: 1.625rem;">
+        <a style="color: black" href="https://beian.miit.gov.cn"
+          >沪ICP备2021029008号-1</a
+        >
+      </div>
+    </div>
+  </div>
 </template>
 
-
 <script>
-import { Toast, Dialog, Loading } from 'vant'
-import { solicLogin } from '../api/index'
+import { Toast, Dialog, Loading } from "vant";
+import { solicLogin } from "../api/index";
 export default {
-	data() {
-		return {
-			name: "",
-			password: "",
-			yzm: ""
-		}
-	},
-	created: function () {
+  data() {
+    return {
+      name: "",
+      password: "",
+      yzm: ""
+    };
+  },
+  created: function() {},
+  methods: {
+    //登录
+    async login() {
+      if (this.name == "" || this.name == undefined) {
+        Toast("请输入登录名");
+        return;
+      }
+      if (this.password == "" || this.password == undefined) {
+        Toast("请输入登录名");
+        return;
+      }
+      const regex = /[\u0000-\u0008\u000B-\u001F\u007F-\u009F\u200B-\u200F\u202A-\u202E\u2028\u2029\uFEFF]/g;
+      this.password = this.password.replaceAll(regex, "");
+      this.name = this.name.replaceAll(regex, "");
+      // this.$http.post(this.$store.state.host+"/appSysUser/solic_login",{USERNAME:this.name,PASSWORD:this.password},{emulateJSON:true})
+      const res = await solicLogin(
+        { USERNAME: this.name, PASSWORD: this.password },
+        { emulateJSON: true, loading: true, message: "登录中..." }
+      );
+      console.log(res, "res");
 
-	},
-	methods: {
-		//登录
-		async login() {
-			if (this.name == '' || this.name == undefined) {
-				Toast('请输入登录名');
-				return;
-			}
-			if (this.password == '' || this.password == undefined) {
-				Toast('请输入登录名');
-				return;
-			}
-			const regex = /[\u0000-\u0008\u000B-\u001F\u007F-\u009F\u200B-\u200F\u202A-\u202E\u2028\u2029\uFEFF]/g;
-			this.password =	this.password.replaceAll(regex,'')
-			this.name = this.name.replaceAll(regex,'')
-			// this.$http.post(this.$store.state.host+"/appSysUser/solic_login",{USERNAME:this.name,PASSWORD:this.password},{emulateJSON:true})
-			const res = await solicLogin({ USERNAME: this.name, PASSWORD: this.password }, { emulateJSON: true, loading: true, message: '登录中...' })
-			console.log(res, 'res')
+      if (res.result == "success") {
+        //localStorage
+        localStorage.setItem("courierUserId", res.userId);
+        localStorage.setItem("roomId", res.roomId);
+        localStorage.setItem("courierId", res.userId);
+        this.$router.push({ path: "/" });
+      } else {
+        Toast(res.message);
+      }
 
-			if (res.result == 'success') {
-				//localStorage
-				localStorage.setItem("courierUserId", res.userId);
-				localStorage.setItem("roomId", res.roomId);
-				localStorage.setItem("courierId", res.userId);
-				this.$router.push({ path: '/' });
-			} else {
-				Toast(res.message);
-			}
-
-			//发送失败
-			// Toast("登录失败!")
-
-		}
-	}
-}
+      //发送失败
+      // Toast("登录失败!")
+    }
+  }
+};
 </script>
 <style scoped lang="less">
 .content {
-	height: 100vh;
+  height: 100vh;
 
-	.loginimg {
-		width: 3.48rem;
-		margin: 0 auto;
-		display: block;
-		padding: 2.15rem .8rem;
-	}
+  .loginimg {
+    width: 3.48rem;
+    margin: 0 auto;
+    display: block;
+    padding: 2.15rem 0.8rem;
+  }
 
-	.login {
-		width: 5.8rem;
-		margin: 0 auto;
+  .login {
+    width: 5.8rem;
+    margin: 0 auto;
 
-		.item {
-			border: .01rem solid #bfbfbf;
-			border-radius: .1rem;
-			margin-bottom: .5rem;
-			background: white;
-			overflow: hidden;
-			color: #999999;
-		}
+    .item {
+      border: 0.01rem solid #bfbfbf;
+      border-radius: 0.1rem;
+      margin-bottom: 0.5rem;
+      background: white;
+      overflow: hidden;
+      color: #999999;
+    }
 
-		.item:nth-of-type(3) {
-			margin-bottom: .2rem;
-		}
+    .item:nth-of-type(3) {
+      margin-bottom: 0.2rem;
+    }
 
-		.btn {
-			button {
-				width: 100%;
-			}
-		}
+    .btn {
+      button {
+        width: 100%;
+      }
+    }
 
-		.register {
-			font-size: .24rem;
-			display: flex;
-			justify-content: space-between;
-			margin-top: .2rem;
+    .register {
+      font-size: 0.24rem;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 0.2rem;
 
-			a {
-				color: #999999;
-			}
+      a {
+        color: #999999;
+      }
 
-			a:nth-of-type(1) {
-				color: #02bfb3;
-			}
-		}
-	}
+      a:nth-of-type(1) {
+        color: #02bfb3;
+      }
+    }
+  }
 }
 </style>

src/pages/my.vue

@@ -1,174 +1,176 @@
 <template>
-	<div class="body">
-		<!-- 选择类型 -->
-		<div class="head">
-			<template v-if="headimgurl != null && headimgurl != ''">
-				<img :src="headimgurl" alt="">
-			</template>
-			<template v-else>
-				<img src="../assets/images/foot_icon1.png" alt="">
-			</template>
-			<div>
-				<p>姓名：{{ user.expressName }}</p>
-				<p>{{ user.expressPhone }}</p>
-			</div>
-			<img style="width: 100%;border-radius: 0px;margin-top: .4rem;" src="../assets/images/my_banner.png" alt="">
-		</div>
-		<div class="list">
-			<router-link to="/Personinfomation">
-				<img src="../assets/images/my_icon1.png" alt="">
-				<span>账号信息</span>
-			</router-link>
-			<router-link to="/Forgetpassword">
-				<img src="../assets/images/my_icon6.png" alt="">
-				<span>修改密码</span>
-			</router-link>
-		</div>
-		<div class="btn">
-			<van-button color="#00c4b8" @click="loginout">退出登录</van-button>
-		</div>
-		<tabbar></tabbar>
-	</div>
+  <div class="body">
+    <!-- 选择类型 -->
+    <div class="head">
+      <template v-if="headimgurl != null && headimgurl != ''">
+        <img :src="headimgurl" alt="" />
+      </template>
+      <template v-else>
+        <img src="../assets/images/foot_icon1.png" alt="" />
+      </template>
+      <div>
+        <p>姓名：{{ user.expressName }}</p>
+        <p>{{ user.expressPhone }}</p>
+      </div>
+      <img
+        style="width: 100%;border-radius: 0px;margin-top: .4rem;"
+        src="../assets/images/my_banner.png"
+        alt=""
+      />
+    </div>
+    <div class="list">
+      <router-link to="/Personinfomation">
+        <img src="../assets/images/my_icon1.png" alt="" />
+        <span>账号信息</span>
+      </router-link>
+      <router-link to="/Forgetpassword">
+        <img src="../assets/images/my_icon6.png" alt="" />
+        <span>修改密码</span>
+      </router-link>
+    </div>
+    <div class="btn">
+      <van-button color="#0c2469" @click="loginout">退出登录</van-button>
+    </div>
+    <tabbar></tabbar>
+  </div>
 </template>
 
 <script>
 export default {
-	data() {
-		return {
-			titlename: "我的",
-			userId: "",
-			user: {},
-			headimgurl: '',
-			active: 1,
-		};
-	},
-	created: function () {
-
-		this.userId = localStorage.getItem("courierUserId");
-		console.log('userId:' + this.userId);
-		// this.getUser();
-		this.user = this.$store.state.user
-
-		this.headimgurl = localStorage.getItem('headimgurl');
-	},
-	methods: {
-		//退出登录
-		loginout() {
-			localStorage.removeItem("courierUserId");
-			localStorage.removeItem("courierOpenid");
-			this.$router.push('/Login')
-
-			// 配置一下  环境
-		},
-
-		my() {
-			this.$router.push('/')
-		}
-	}
+  data() {
+    return {
+      titlename: "我的",
+      userId: "",
+      user: {},
+      headimgurl: "",
+      active: 1
+    };
+  },
+  created: function() {
+    this.userId = localStorage.getItem("courierUserId");
+    console.log("userId:" + this.userId);
+    // this.getUser();
+    this.user = this.$store.state.user;
+
+    this.headimgurl = localStorage.getItem("headimgurl");
+  },
+  methods: {
+    //退出登录
+    loginout() {
+      localStorage.removeItem("courierUserId");
+      localStorage.removeItem("courierOpenid");
+      this.$router.push("/Login");
+
+      // 配置一下  环境
+    },
+
+    my() {
+      this.$router.push("/");
+    }
+  }
 };
 </script>
 
 <style lang="less" scoped>
 body {
-	background: #fbfbfb;
+  background: #fbfbfb;
 }
 
 .body {
-	padding-bottom: 1.5rem;
-
-	.head {
-		padding: .43rem .38rem;
-		font-size: .24rem;
-		color: #999;
-		display: flex;
-		background: white;
-		flex-wrap: wrap;
-		position: relative;
-
-		img {
-			width: 1.48rem;
-			height: 1.48rem;
-			border-radius: 50%;
-			margin-right: .4rem;
-		}
-
-		div {
-			p:nth-of-type(1) {
-				font-size: .36rem;
-				font-weight: bold;
-				color: #333;
-				margin-bottom: .2rem;
-				padding-top: .3rem;
-			}
-		}
-
-		// div:after{
-		//  content: "";
-		//  display: block;
-		//  width: .2rem;
-		//  height: .2rem;
-		//  border-left: .01rem solid #333;
-		//  border-top: .01rem solid #333;
-		//  transform: rotate(135deg);
-		//  position: absolute;
-		//  right: .38rem;
-		//  top: 1rem;
-		// }
-	}
-
-	.list {
-		background: white;
-		margin-top: .36rem;
-		border-radius: .05rem;
-
-		a {
-			font-size: .3rem;
-			font-weight: bold;
-			display: block;
-			color: #333;
-			padding: .3rem .4rem;
-			border-bottom: 1px solid #f4f3f3;
-			position: relative;
-
-			img {
-				width: .4rem;
-				height: .4rem;
-			}
-
-			span {
-				position: relative;
-				top: -.075rem;
-				margin-left: .3rem;
-			}
-		}
-
-		a:after {
-			content: "";
-			display: block;
-			width: .2rem;
-			height: .2rem;
-			border-left: .01rem solid #b8b8b8;
-			border-top: .01rem solid #b8b8b8;
-			transform: rotate(135deg);
-			position: absolute;
-			right: .4rem;
-			top: .4rem;
-		}
-
-	}
-
-	.btn {
-		padding: 0px .37rem;
-
-		button {
-			width: 100%;
-			color: white;
-		}
-	}
+  padding-bottom: 1.5rem;
+
+  .head {
+    padding: 0.43rem 0.38rem;
+    font-size: 0.24rem;
+    color: #999;
+    display: flex;
+    background: white;
+    flex-wrap: wrap;
+    position: relative;
+
+    img {
+      width: 1.48rem;
+      height: 1.48rem;
+      border-radius: 50%;
+      margin-right: 0.4rem;
+    }
+
+    div {
+      p:nth-of-type(1) {
+        font-size: 0.36rem;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 0.2rem;
+        padding-top: 0.3rem;
+      }
+    }
+
+    // div:after{
+    //  content: "";
+    //  display: block;
+    //  width: .2rem;
+    //  height: .2rem;
+    //  border-left: .01rem solid #333;
+    //  border-top: .01rem solid #333;
+    //  transform: rotate(135deg);
+    //  position: absolute;
+    //  right: .38rem;
+    //  top: 1rem;
+    // }
+  }
+
+  .list {
+    background: white;
+    margin-top: 0.36rem;
+    border-radius: 0.05rem;
+
+    a {
+      font-size: 0.3rem;
+      font-weight: bold;
+      display: block;
+      color: #333;
+      padding: 0.3rem 0.4rem;
+      border-bottom: 1px solid #f4f3f3;
+      position: relative;
+
+      img {
+        width: 0.4rem;
+        height: 0.4rem;
+      }
+
+      span {
+        position: relative;
+        top: -0.075rem;
+        margin-left: 0.3rem;
+      }
+    }
+
+    a:after {
+      content: "";
+      display: block;
+      width: 0.2rem;
+      height: 0.2rem;
+      border-left: 0.01rem solid #b8b8b8;
+      border-top: 0.01rem solid #b8b8b8;
+      transform: rotate(135deg);
+      position: absolute;
+      right: 0.4rem;
+      top: 0.4rem;
+    }
+  }
+
+  .btn {
+    padding: 0px 0.37rem;
+
+    button {
+      width: 100%;
+      color: white;
+    }
+  }
 }
 
 .van-icon {
-	background-color: #00c4b8;
-	border-color: #00c4b8;
+  background-color: #0c2469;
+  border-color: #0c2469;
 }
 </style>

src/pages/new/sureCombine.vue

@@ -1,30 +1,71 @@
 <template>
     <div class="container">
-        <div style="padding: 20px 0;">合并签收以下快件:</div>
-        <van-form @submit="onSubmit">
-            <van-field name="checkboxGroup">
-                <template #input>
-                    <van-checkbox-group v-model="checkboxGroup">
-                        <van-checkbox disabled style="margin-bottom: 10px;" :name="item.id" shape="square"
-                            v-for="item in goodsList" :key="item.id"> {{ item.expressNo }} & {{ item.expressType
-                            }} & {{ item.expressQuantity }}件 &{{ item.isPayOnDelivery == '否' ? '非到付' : '到付' }}
-                        </van-checkbox>
-                    </van-checkbox-group>
-                </template>
-            </van-field>
+        <div v-show="isPhotoOrsize == '0'"> 
+            <div style="padding: 20px 0;">合并签收以下快件:</div>
+            <van-form @submit="onSubmit">
+                <van-field name="checkboxGroup">
+                    <template #input>
+                        <van-checkbox-group v-model="checkboxGroup">
+                            <van-checkbox disabled style="margin-bottom: 10px;" :name="item.id" shape="square"
+                                v-for="item in goodsList" :key="item.id"> {{ item.expressNo }} & {{ item.expressType
+                                }} & {{ item.expressQuantity }}件 &{{ item.isPayOnDelivery == '否' ? '非到付' : '到付' }}
+                            </van-checkbox>
+                        </van-checkbox-group>
+                    </template>
+                </van-field>
 
-            <van-field name="uploader" label="上传照片" :rules="[{ required: true, message: '请上传图片' }]">
-                <template #input>
-                    <van-uploader v-model="uploader" :after-read="afterRead" :before-read="beforeRead" :max-count="1" />
-                </template>
-            </van-field>
+                <van-field readonly clickable name="shelfInformation" label="上传照片或签字板" lable-width="1000px" :value="currentSelect"
+                        placeholder="请选择货架" @click="isShelf = true" :rules="[{ required: true }]" />
+
+                <van-popup v-model="isShelf" position="bottom">
+                    <van-picker title="标题" show-toolbar :columns="shelfs" @confirm="onConfirm" @cancel="onCancel" />
+                </van-popup>
+                <div style="display: flex;justify-content: flex-start;">
+                    <span style="margin-left: 0.4rem; margin-right: 1rem;">图片显示：</span>
+                    <van-image  width="2rem" height="2rem" fit="contain" :src="canvasPhotoIMG"/>
+                </div>
+               
+            
 
-            <van-button style="height: 40px; width: 150px; border-radius: 8px; margin-right: 20px;" type="info"
-                native-type="submit">确定签收</van-button>
+                <div>
+                    <van-button style="height: 40px; width: 150px; border-radius: 8px; margin-right: 20px;" type="info"
+                    native-type="submit">确定签收</van-button>
 
-            <van-button style="height: 40px; width: 150px; border-radius: 8px;" type="default"
-                @click="back">返回上一级</van-button>
-        </van-form>
+                    <van-button style="height: 40px; width: 150px; border-radius: 8px;" type="default"
+                        @click="back">返回上一级</van-button>
+                </div>
+                <!-- <van-image class="batch-middel-text-style" width="100" height="100" :src="aaa" /> -->
+                
+            </van-form>
+        </div>
+
+        <div v-show="isPhotoOrsize == '图片'">
+            <van-field name="uploader" label="上传照片"  >
+                    <template #input>
+                        <van-uploader   multiple    :deletable="true"  
+                        @delete="onDelete" v-model="uploader" :after-read="afterRead" :before-read="beforeRead" :max-count="1" />
+                    </template>
+            </van-field>
+            <van-button type="default" native-type="button" @click="photoClose">取消</van-button>
+            <van-button type="default" native-type="button" @click="phoneSubmit">确定</van-button>
+        </div>
+
+        
+        <div v-show="isPhotoOrsize == '签字板'">
+            <canvas ref="canvas"  
+                :width="width"  
+                :height="height"  
+                @mousedown="startDrawing"  
+                @mouseup="stopDrawing"  
+                @mousemove="draw"  
+                @mouseout="stopDrawing"  
+                @touchstart="startDrawing"  
+                @touchend="stopDrawing"  
+                @touchmove="drawTouch" style="border: 1px solid;" ></canvas>
+            <van-button type="default" native-type="button" @click="canvasClose">取消</van-button>
+            <van-button type="default" native-type="button" @click="clearCanvas">重写</van-button>
+            <van-button type="default" native-type="button" @click="saveSignature" >确定</van-button>
+        </div>
     </div>
 </template>
 
@@ -39,13 +80,112 @@ export default {
             checkbox: false,
             checkboxGroup: [],
             uploader: [],//图片
+            isShelf:false,
+            isPhotoOrsize:'0',//控制展示
+            currentSelect:'',
+            shelfs:['图片', '签字板'],
+            isDrawing: false,  
+            hasContent: false,
+            context: null,  
+            lastX: 0,  
+            lastY: 0,  
+            width: window.innerWidth - 24,  
+            height:  window.innerHeight - 100, 
+            photoIMG:'',//储存展示图片
+            canvasPhotoIMG:'',//展示图片
+            hasUploadedImage: false, // 标记是否已上传图片  
         };
     },
     mounted() {
+        this.initCanvas();
         // 在组件挂载后，设置默认选中的值  
         this.checkboxGroup = this.goodsList.map(item => item.id);
     },
     methods: {
+        initCanvas() {  
+            const canvas = this.$refs.canvas;  
+            this.context = canvas.getContext('2d');  
+            this.context.strokeStyle = '#000000';  
+            this.context.lineWidth = 2;  
+        },  
+        startDrawing(event) {  
+            this.isDrawing = true;  
+            const rect = this.$refs.canvas.getBoundingClientRect(); 
+            this.lastX = event.clientX - rect.left;  
+            this.lastY = event.clientY - rect.top; 
+        //   this.lastX = event.offsetX || event.touches[0].clientX;  
+        //   this.lastY = event.offsetY || event.touches[0].clientY;  
+        },  
+        stopDrawing() {  
+            this.isDrawing = false; 
+            this.lastX = null;  
+            this.lastY = null;   
+        },  
+        draw(event) {
+           
+            if (!this.isDrawing || !this.lastX || !this.lastY) return;  
+            const rect = this.$refs.canvas.getBoundingClientRect();  
+            const x = event.clientX - rect.left;  
+            const y = event.clientY - rect.top;
+            this.drawLine(this.lastX, this.lastY, x, y);  
+            this.lastX = x;  
+            this.lastY = y;  
+        },  
+        drawTouch(event) {  
+            this.hasContent = true;
+            if (!this.isDrawing) return;  
+                const rect = this.$refs.canvas.getBoundingClientRect();  
+                const touch = event.touches[0];  
+                const x = touch.clientX - rect.left;  
+                const y = touch.clientY - rect.top;  
+                this.drawLine(this.lastX, this.lastY, x, y);  
+                this.lastX = x;  
+                this.lastY = y;  
+            }, 
+        drawLine(x1, y1, x2, y2) {  
+            this.context.beginPath();  
+            this.context.moveTo(x1, y1);  
+            this.context.lineTo(x2, y2);  
+            this.context.stroke();  
+        },  
+        canvasClose() {
+            this.isPhotoOrsize = 0
+        },
+        clearCanvas() {  
+            this.context.clearRect(0, 0, this.width, this.height);  
+            this.hasContent = false;
+        },  
+        saveSignature() {
+            if(this.hasContent == false) {
+                return this.$toast('请签名')
+            }
+            this.canvasPhotoIMG =  this.$refs.canvas.toDataURL('image/png');  
+            const canvas = this.$refs.canvas; 
+            canvas.toBlob(async (blob)  => {  
+                const file = new File([blob], 'my_image.png', { type: 'image/png' });   
+                console.log(file,'file')
+                const formData = new FormData();
+                formData.append('file', file); 
+                const res = await appUploadTheSignature(formData)
+                this.getFileUrl = res.data
+                console.log(this.getFileUrl,'=addresse')
+            }); 
+            this.currentSelect = "签字板"
+            this.isPhotoOrsize = 0
+        },  
+
+
+        onConfirm(value, index) {
+            if(value == '签字板') {
+                this.show =true
+            }
+            
+            this.isPhotoOrsize = value
+            this.isShelf = false
+        },
+        onCancel() {
+            this.isShelf = false
+        },
         beforeRead(file) {
             // 在这里可以添加对文件的校验逻辑
             // 如果返回 true, 则继续读取文件
@@ -54,6 +194,9 @@ export default {
         // 文件读取完成后的钩子
         async afterRead(file) {
             console.log(file)
+            this.photoIMG = file.content
+            this.hasUploadedImage = true;  
+            console.log(file.content,'--',this.photoIMG)
             const formData = new FormData();
             formData.append('file', file.file); // 这里的 'file' 是后端接收文件的字段名
             const res = await appUploadTheSignature(formData)
@@ -66,6 +209,7 @@ export default {
                     data.push(item.expressNo)
                 }
             })
+            console.log(this.getFileUrl,'传的对不对，是哪一个')
             const params = {
                 signEnclosureImg: this.getFileUrl,//签署图片
                 deliveryId: data.join(','),//快递单号逗号隔开
@@ -83,6 +227,27 @@ export default {
         back() {
             this.$emit('isCombine', true)
         },
+        phoneSubmit() {
+            if (this.hasUploadedImage) {  
+                this.isPhotoOrsize = 0
+                this.currentSelect = '图片'
+                this.canvasPhotoIMG = this.photoIMG
+                console.log(this.photoIMG,'--123图片')
+            } else {  
+                this.$toast('请先上传图片');  
+            } 
+           
+        },
+        photoClose() {
+            this.isPhotoOrsize = 0
+        },
+
+        // 删除图片时的处理  
+        onDelete(file) {  
+            // 标记为未上传图片  
+            this.hasUploadedImage = false;  
+            console.log('已删除图片', file);  
+        }, 
     }
 
 };
@@ -91,6 +256,9 @@ export default {
 
 
 <style lang="less" scoped>
+.ckickChange {
+    padding: 20px 20px;
+}
 * {
     font-size: 16px;
 }

src/pages/personinfomation.vue

@@ -1,80 +1,107 @@
 <template>
-	<div>
-		<!--  -->
-		<!-- 表单 -->
-		<van-form>
-			<van-field v-model="user.expressPhone" readonly type="" name="用户名" label="用户名" placeholder="用户名"
-				:rules="[{ required: false }]" />
-			<van-field v-model="user.expressName" readonly type="" name="姓名" label="姓名" placeholder="姓名"
-				:rules="[{ required: false }]" />
-			<!-- <van-field v-model="user.ROLE_ID"  readonly type=""       name="角色"   label="角色"   placeholder="角色"   :rules="[{ required: false}]"/> -->
-			<van-field v-model="user.company" readonly type="" name="公司" label="公司" placeholder="公司"
-				:rules="[{ required: false }]" />
-			<van-field v-model="user.expressPhone" readonly type="number" name="手机号" label="手机号" placeholder="手机号"
-				:rules="[{ required: false }]" />
-			<!-- <div style="margin: 16px;">
+  <div>
+    <!--  -->
+    <!-- 表单 -->
+    <van-form>
+      <van-field
+        v-model="user.expressPhone"
+        readonly
+        type=""
+        name="用户名"
+        label="用户名"
+        placeholder="用户名"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.expressName"
+        readonly
+        type=""
+        name="姓名"
+        label="姓名"
+        placeholder="姓名"
+        :rules="[{ required: false }]"
+      />
+      <!-- <van-field v-model="user.ROLE_ID"  readonly type=""       name="角色"   label="角色"   placeholder="角色"   :rules="[{ required: false}]"/> -->
+      <van-field
+        v-model="user.company"
+        readonly
+        type=""
+        name="公司"
+        label="公司"
+        placeholder="公司"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.expressPhone"
+        readonly
+        type="number"
+        name="手机号"
+        label="手机号"
+        placeholder="手机号"
+        :rules="[{ required: false }]"
+      />
+      <!-- <div style="margin: 16px;">
 		    <van-button round block type="info" native-type="submit">保存</van-button>
 		  </div> -->
-		</van-form>
-	</div>
+    </van-form>
+  </div>
 </template>
 
 <script>
-import { Form, Toast, Field } from 'vant'
+import { Form, Toast, Field } from "vant";
 export default {
-	data() {
-		return {
-			titlename: "个人信息",
-			user: {},
-			userId: '',
-			departmenList: [],
-			show: false
-		}
-	},
-	created: function () {
-		this.userId = localStorage.getItem("courierUserId");
-		// this.getUser();
-		this.user = this.$store.state.user
-	},
-	methods: {
-	}
-}
+  data() {
+    return {
+      titlename: "个人信息",
+      user: {},
+      userId: "",
+      departmenList: [],
+      show: false
+    };
+  },
+  created: function() {
+    this.userId = localStorage.getItem("courierUserId");
+    // this.getUser();
+    this.user = this.$store.state.user;
+  },
+  methods: {}
+};
 </script>
 
 <style lang="less" scoped>
 /deep/.van-form {
-	.van-button--info {
-		background-color: #00c4b8;
-		border: 1px solid #00c4b8;
-		border-radius: 5px;
-	}
+  .van-button--info {
+    background-color: #0c2469;
+    border: 1px solid #0c2469;
+    border-radius: 5px;
+  }
 
-	.m .van-field__label::before {
-		content: "*";
-		color: red;
-	}
+  .m .van-field__label::before {
+    content: "*";
+    color: red;
+  }
 
-	.van-cell {
-		font-size: .26rem;
-	}
+  .van-cell {
+    font-size: 0.26rem;
+  }
 
-	.textarea {
-		font-size: .26rem;
-		padding: 10px 16px;
-		color: #646566;
+  .textarea {
+    font-size: 0.26rem;
+    padding: 10px 16px;
+    color: #646566;
 
-		textarea {
-			width: 98%;
-			height: 150px;
-			border-color: #e5e5e5;
-			color: #999999;
-			margin-top: 16px;
-			padding: 10px 1%;
-		}
-	}
+    textarea {
+      width: 98%;
+      height: 150px;
+      border-color: #e5e5e5;
+      color: #999999;
+      margin-top: 16px;
+      padding: 10px 1%;
+    }
+  }
 }
 
 /deep/.van-field__control {
-	text-align: right;
+  text-align: right;
 }
 </style>

src/pages_bak/addressbook.vue

@@ -1,215 +1,204 @@
 <template>
-	<div class="content">
-		
-		<!-- table切换 -->
-		<div class="tab">
-			<div>
-				<p @click="tab(1)" :class="[index==1?'active':'']">寄件人</p>
-				<p @click="tab(2)" :class="[index==2?'active':'']" class="">收件人</p>
-			</div>		
-		</div>
-		<!-- 寄件人 -->
-		<div v-if="index==1">
-			<div class="jjinfo">
-				<div>
-					<div class="jj">
-						<div class="jjaddress">
-							<p>寄</p>
-							<div>
-								<p>测试 18896778789</p>
-								<p>江苏省苏州市相城区测试</p>
-							</div>
-						</div>
-						<div class="cz">
-							<p>
-								<img src="../assets/images/del.png" alt="">
-								<span>修改</span>
-							</p>						
-							<p>
-								<img src="../assets/images/whrite.png" alt="">
-								<span>编辑</span>
-							</p>
-							<p>
-								<img src="../assets/images/copy.png" alt="">
-								<span>复制</span>
-							</p>
-						</div>
-					</div>
-				</div>			
-			</div>
-			<!-- 寄件 -->
-			<div class="btn-jj">
-				<van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
-			</div>
-		</div>
-		
-		<!-- 收件人 -->
-		<div v-if="index==2">
-			<div class="jjinfo">
-				<div>
-					<div class="jj">
-						<div class="jjaddress">
-							<p style="background: #fa9c22;">收</p>
-							<div>
-								<p>测试 18896778789</p>
-								<p>江苏省苏州市相城区测试</p>
-							</div>
-						</div>
-						<div class="cz">
-							<p>
-								<img src="../assets/images/del.png" alt="">
-								<span>修改</span>
-							</p>						
-							<p>
-								<img src="../assets/images/whrite.png" alt="">
-								<span>编辑</span>
-							</p>
-							<p>
-								<img src="../assets/images/copy.png" alt="">
-								<span>复制</span>
-							</p>
-						</div>
-					</div>
-				</div>			
-			</div>
-			<!-- 寄件 -->
-			<div class="btn-jj">
-				<van-button type="info" @click="link(2)" color="#fa9c22">添加收件人</van-button>
-			</div>
-		</div>
-		
-		
-		
-		
-		
-	</div>	
+  <div class="content">
+    <!-- table切换 -->
+    <div class="tab">
+      <div>
+        <p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
+        <p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">
+          收件人
+        </p>
+      </div>
+    </div>
+    <!-- 寄件人 -->
+    <div v-if="index == 1">
+      <div class="jjinfo">
+        <div>
+          <div class="jj">
+            <div class="jjaddress">
+              <p>寄</p>
+              <div>
+                <p>测试 18896778789</p>
+                <p>江苏省苏州市相城区测试</p>
+              </div>
+            </div>
+            <div class="cz">
+              <p>
+                <img src="../assets/images/del.png" alt="" />
+                <span>修改</span>
+              </p>
+              <p>
+                <img src="../assets/images/whrite.png" alt="" />
+                <span>编辑</span>
+              </p>
+              <p>
+                <img src="../assets/images/copy.png" alt="" />
+                <span>复制</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 寄件 -->
+      <div class="btn-jj">
+        <van-button @click="link(1)" type="info" color="#0c2469"
+          >添加寄件人</van-button
+        >
+      </div>
+    </div>
+
+    <!-- 收件人 -->
+    <div v-if="index == 2">
+      <div class="jjinfo">
+        <div>
+          <div class="jj">
+            <div class="jjaddress">
+              <p style="background: #fa9c22;">收</p>
+              <div>
+                <p>测试 18896778789</p>
+                <p>江苏省苏州市相城区测试</p>
+              </div>
+            </div>
+            <div class="cz">
+              <p>
+                <img src="../assets/images/del.png" alt="" />
+                <span>修改</span>
+              </p>
+              <p>
+                <img src="../assets/images/whrite.png" alt="" />
+                <span>编辑</span>
+              </p>
+              <p>
+                <img src="../assets/images/copy.png" alt="" />
+                <span>复制</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 寄件 -->
+      <div class="btn-jj">
+        <van-button type="info" @click="link(2)" color="#fa9c22"
+          >添加收件人</van-button
+        >
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default{
-		data(){
-			return {
-				titlename:"地址簿",
-				index:1
-			}
-		},
-		created:function(){
-			
-		},
-		methods:{
-			tab(obj){
-				this.index=obj
-			},
-			link(obj){
-				this.$router.push({path:"/Newaddress",query:{type:obj}})
-			}
-		},
-		computed:{
-			
-		}
-	}
+export default {
+  data() {
+    return {
+      titlename: "地址簿",
+      index: 1
+    };
+  },
+  created: function() {},
+  methods: {
+    tab(obj) {
+      this.index = obj;
+    },
+    link(obj) {
+      this.$router.push({ path: "/Newaddress", query: { type: obj } });
+    }
+  },
+  computed: {}
+};
 </script>
 
 <style scoped lang="less">
-	.content{
-		.tab{
-			font-size: .36rem;
-			color: #00c4b8;
-			padding: .33rem;			
-			div{
-				display: flex;
-				border: .01rem solid #00c4b8;
-				text-align: center;			
-				border-radius: .05rem;
-				p{
-					flex: 1;
-					padding: .1rem 0rem;
-									
-				}
-				p.active{
-					background: #00c4b8;
-					color: white;
-				}
-			}
-			
-		}
-		.jjinfo{
-			font-size: .36rem;
-			color: #999999;
-			padding: .0rem .33rem 0.33rem;
-			>div{
-				background: white;
-				border-radius: .05rem;
-				padding: .1rem .3rem;
-				.jj{
-					display: flex;
-					justify-content: space-between;
-					padding: .2rem 0rem;
-					flex-wrap: wrap;
-					.jjaddress{
-						display: flex;
-						padding: .1rem 0rem .2rem;
-						
-						>p{
-							font-size: .24rem;
-							font-weight: bold;
-							display: inline-block;
-							width:.5rem;
-							height: .5rem;
-							background: #00c4b8;
-							text-align: center;
-							line-height: .5rem;
-							color: white;
-							border-radius: 50%;
-							margin-right: .3rem;
-						}
-						div{
-							//font-weight: bold;
-							max-width: 4.2rem;
-							p:nth-of-type(1){
-								font-size: .3rem;
-								color: #333;
-								margin-bottom: .2rem;
-							}
-							p:nth-of-type(2){
-								font-size: .3rem;
-							}
-						}
-					}
-					.cz{
-						border-top: .01rem solid #ededed;
-						width: 100%;
-						display: flex;
-						flex-direction: row-reverse;
-						font-size: .24rem;
-						color: #999999;
-						padding-top: .2rem;
-						p{
-							margin-left: .2rem;
-							img{
-								width:.22rem;
-								height: .24rem;
-							}
-							span{
-								position: relative;
-								top: -.01rem;
-							}
-						}
-						
-					}
-				}
-		    }
-		
-		}
-		
-		
-		
-		.btn-jj{
-			padding: .33rem;
-			button{
-				width: 100%;
-			}
-		}
-	}
-	
+.content {
+  .tab {
+    font-size: 0.36rem;
+    color: #0c2469;
+    padding: 0.33rem;
+    div {
+      display: flex;
+      border: 0.01rem solid #0c2469;
+      text-align: center;
+      border-radius: 0.05rem;
+      p {
+        flex: 1;
+        padding: 0.1rem 0rem;
+      }
+      p.active {
+        background: #0c2469;
+        color: white;
+      }
+    }
+  }
+  .jjinfo {
+    font-size: 0.36rem;
+    color: #999999;
+    padding: 0rem 0.33rem 0.33rem;
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+        flex-wrap: wrap;
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem 0.2rem;
+
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
+          div {
+            //font-weight: bold;
+            max-width: 4.2rem;
+            p:nth-of-type(1) {
+              font-size: 0.3rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
+        .cz {
+          border-top: 0.01rem solid #ededed;
+          width: 100%;
+          display: flex;
+          flex-direction: row-reverse;
+          font-size: 0.24rem;
+          color: #999999;
+          padding-top: 0.2rem;
+          p {
+            margin-left: 0.2rem;
+            img {
+              width: 0.22rem;
+              height: 0.24rem;
+            }
+            span {
+              position: relative;
+              top: -0.01rem;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .btn-jj {
+    padding: 0.33rem;
+    button {
+      width: 100%;
+    }
+  }
+}
 </style>

src/pages_bak/cityexpress.vue

@@ -1,428 +1,487 @@
 <template>
-	<div class="content">
-		
-		<!-- 寄件地址 -->
-		<div class="jjinfo">
-			<div>
-				<div class="jj">
-					<div class="jjaddress">
-						<p>寄</p>
-						<div>
-							<p v-if="jjname==''||jjname==' '">寄件地址</p>
-							<p v-else>{{jjname}}</p>
-							<p v-if="jjadd==''||jjadd==' '" @click="addtype(1)">填写寄件地址</p>
-							<p v-else @click="addtype(1)">{{jjadd}}</p>
-						</div>
-					</div>
-					<div class="dzb">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>				
-				</div>
-				<div class="jj" style="border-top:.01rem solid #ededed">
-					<div class="jjaddress">
-						<p style="background: #fa9c22;">收</p>
-						<div>
-							<p v-if="sjname==''||sjname==' '">寄件地址</p>
-							<p v-else>{{sjname}}</p>
-							<p v-if="sjadd==''||sjadd==' '" @click="addtype(2)">填写收件地址</p>
-							<p v-else @click="addtype(2)">{{sjadd}}</p>
-						</div>
-					</div>
-					<div class="dzb">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>
-				</div>
-			</div>
-			
-		</div>
-		<!-- 快递公司 -->
-		<div class="kdshow">
-			<van-field readonly clickable name="picker" :value="value" label="快递公司" placeholder="请选择快递公司" @click="showPicker = true" />
-			<van-popup v-model="showPicker" position="bottom">
-			  <van-picker
-			    show-toolbar
-			    :columns="columns"
-			    @confirm="onConfirm"
-			    @cancel="showPicker = false"
-			  />
-			</van-popup>
-		</div>
-		<!-- 寄件属性 -->
-		<div class="choose">
-			<div>
-				<div class="type_wp">
-					<div>
-						<p>物品类型</p>
-						<p v-if="wptype==''" @click="wpshow=true">请选择</p>
-						<p v-else @click="wpshow=true">{{wptype}}</p>
-					</div>
-					<div>
-						<p>重量</p>
-						<p>一件</p>
-					</div>
-				</div>
-				<div class="type_price">
-					<div>
-						<p>付款方式</p>
-                        <p v-if="pricetype==''" @click="priceshow=true">请选择</p>
-						<p v-else @click="priceshow=true">{{pricetype}}</p>
-					</div>
-					<div>
-						<p>声明价值</p>
-						<p>0元</p>
-					</div>
-				</div>
-			</div>			
-		</div>
-		
-		<!-- 我同意 -->
-		<div class="check">
-			<van-checkbox icon-size=".24rem" v-model="check" shape="">我同意《电子运单契约条款》</van-checkbox>
-		</div>
-		<!-- 寄件 -->
-		<div class="btn-jj">
-			<van-button type="info" color="#00c4b8">立即寄件</van-button>
-		</div>
-		<!-- 弹窗物品类型 -->
-		<van-popup v-model="wpshow" position="bottom">
-		  <van-picker title="物品类型" show-toolbar :columns="wplist" @confirm="onConfirm1" @cancel="wpshow=false"/>
-		</van-popup>
-		<!-- 弹窗付款方式 -->
-		<van-popup v-model="priceshow" position="bottom">
-		  <van-picker title="付款方式" show-toolbar :columns="pricelist" @confirm="onConfirm2" @cancel="priceshow=false"/>
-		</van-popup>
-		<!-- 填写地址 -->
-		<van-popup round v-model="addshow" class="whrite_add" closeable closed="close">
-			<div>
-				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">{{title}}</p>
-				<van-form @submit="onSubmit">
-				  <van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名"/>
-				  <van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"/>
-				  <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" />
-				  <van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"/>
-				  <div style="margin-top: 16px;">
-				    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-				  </div>
-				</van-form>
-			</div>		  
-		</van-popup>
-		<!-- 城市选择 -->
-		<van-popup v-model="areashow" position="bottom">
-		  <van-area :area-list="areaList" @confirm="onConfirm3" @cancel="areashow = false" />
-		</van-popup>
+  <div class="content">
+    <!-- 寄件地址 -->
+    <div class="jjinfo">
+      <div>
+        <div class="jj">
+          <div class="jjaddress">
+            <p>寄</p>
+            <div>
+              <p v-if="jjname == '' || jjname == ' '">寄件地址</p>
+              <p v-else>{{ jjname }}</p>
+              <p v-if="jjadd == '' || jjadd == ' '" @click="addtype(1)">
+                填写寄件地址
+              </p>
+              <p v-else @click="addtype(1)">{{ jjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+        <div class="jj" style="border-top:.01rem solid #ededed">
+          <div class="jjaddress">
+            <p style="background: #fa9c22;">收</p>
+            <div>
+              <p v-if="sjname == '' || sjname == ' '">寄件地址</p>
+              <p v-else>{{ sjname }}</p>
+              <p v-if="sjadd == '' || sjadd == ' '" @click="addtype(2)">
+                填写收件地址
+              </p>
+              <p v-else @click="addtype(2)">{{ sjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 快递公司 -->
+    <div class="kdshow">
+      <van-field
+        readonly
+        clickable
+        name="picker"
+        :value="value"
+        label="快递公司"
+        placeholder="请选择快递公司"
+        @click="showPicker = true"
+      />
+      <van-popup v-model="showPicker" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="columns"
+          @confirm="onConfirm"
+          @cancel="showPicker = false"
+        />
+      </van-popup>
+    </div>
+    <!-- 寄件属性 -->
+    <div class="choose">
+      <div>
+        <div class="type_wp">
+          <div>
+            <p>物品类型</p>
+            <p v-if="wptype == ''" @click="wpshow = true">请选择</p>
+            <p v-else @click="wpshow = true">{{ wptype }}</p>
+          </div>
+          <div>
+            <p>重量</p>
+            <p>一件</p>
+          </div>
+        </div>
+        <div class="type_price">
+          <div>
+            <p>付款方式</p>
+            <p v-if="pricetype == ''" @click="priceshow = true">请选择</p>
+            <p v-else @click="priceshow = true">{{ pricetype }}</p>
+          </div>
+          <div>
+            <p>声明价值</p>
+            <p>0元</p>
+          </div>
+        </div>
+      </div>
+    </div>
 
-	</div>	
+    <!-- 我同意 -->
+    <div class="check">
+      <van-checkbox icon-size=".24rem" v-model="check" shape=""
+        >我同意《电子运单契约条款》</van-checkbox
+      >
+    </div>
+    <!-- 寄件 -->
+    <div class="btn-jj">
+      <van-button type="info" color="#0c2469">立即寄件</van-button>
+    </div>
+    <!-- 弹窗物品类型 -->
+    <van-popup v-model="wpshow" position="bottom">
+      <van-picker
+        title="物品类型"
+        show-toolbar
+        :columns="wplist"
+        @confirm="onConfirm1"
+        @cancel="wpshow = false"
+      />
+    </van-popup>
+    <!-- 弹窗付款方式 -->
+    <van-popup v-model="priceshow" position="bottom">
+      <van-picker
+        title="付款方式"
+        show-toolbar
+        :columns="pricelist"
+        @confirm="onConfirm2"
+        @cancel="priceshow = false"
+      />
+    </van-popup>
+    <!-- 填写地址 -->
+    <van-popup
+      round
+      v-model="addshow"
+      class="whrite_add"
+      closeable
+      closed="close"
+    >
+      <div>
+        <p style="font-size: 16px;text-align: center;margin-bottom: 16px;">
+          {{ title }}
+        </p>
+        <van-form @submit="onSubmit">
+          <van-field
+            v-model="name"
+            name="姓名"
+            label="姓名"
+            placeholder="请输入姓名"
+          />
+          <van-field
+            v-model="phone"
+            maxlength="11"
+            type="number"
+            name="手机"
+            label="手机"
+            placeholder="请输入手机"
+          />
+          <van-field
+            readonly
+            clickable
+            name="area"
+            :value="city"
+            label="省市区"
+            placeholder="请选择省市区"
+            @click="areashow = true"
+          />
+          <van-field
+            v-model="address"
+            name="详细地址"
+            label="详细地址"
+            placeholder="请输入详细地址"
+          />
+          <div style="margin-top: 16px;">
+            <van-button color="#0c2469" block type="info" native-type="submit"
+              >确定</van-button
+            >
+          </div>
+        </van-form>
+      </div>
+    </van-popup>
+    <!-- 城市选择 -->
+    <van-popup v-model="areashow" position="bottom">
+      <van-area
+        :area-list="areaList"
+        @confirm="onConfirm3"
+        @cancel="areashow = false"
+      />
+    </van-popup>
+  </div>
 </template>
 
 <script>
-	import areaList from "@/script/areas.js"
-	export default{
-		data(){
-			return {
-				titlename:"同城急送",
-				wptype:"",//物品类型
-				wpshow:false,//物品类型弹窗显示
-				wplist:["物品1","物品二"],
-				pricetype:"",//付款类型
-				priceshow:false,//付款类型弹窗显示
-				pricelist:["月结","日结","到付"],
-				addshow:false,
-				name:"",
-				phone:"",
-				city:"",
-				address:"",
-				areashow:false,
-				index:"",
-				title:"",
-				jjname:"",
-				jjadd:"",
-				sjname:"",
-				sjadd:"",
-				check:false,
-				showPicker:false,
-				value:"",
-				columns:["顺丰快递","中通快递","圆通快递"],
-			}
-		},
-		created:function(){
-			//this.areaList=area.areaList
-		},
-		methods:{
-			// 选择物品确定
-			onConfirm1(e){//确定
-				this.wptype=e
-				this.wpshow=false
-				console.log(e)
-			},
-			// 选择付款方式确定
-			onConfirm2(e){//确定
-				this.pricetype=e
-				this.priceshow=false
-				console.log(e)
-			},
-			// 填写地址确定
-			onConfirm3(e){//确定
-				this.city=e[0].name+' '+e[1].name+' '+e[2].name
-				this.areashow=false
-				console.log(e)
-			},
-			// 选择快递公司
-			onConfirm(e){
-				this.value=e
-				this.showPicker=false
-			},
-						
-			// 寄件地址1与收件地址2
-			addtype(obj){
-				this.index=obj
-				if(obj==1){
-					this.title="寄件地址"
-				}
-				if(obj==2){
-					this.title="收件地址"
-				}
-				this.addshow=true
-			},
-			// 填写地址确定
-			onSubmit(){
-				if(this.index==1){
-					this.jjname=this.name+' '+this.phone
-					this.jjadd=this.city+' '+this.address
-				}
-				if(this.index==2){
-					this.sjname=this.name+' '+this.phone
-                    this.sjadd=this.city+' '+this.address
-				}
-				this.addshow=false
-				this.name=""
-				this.phone=""
-				this.city=""
-				this.address=""
-			},
-			close(){
-				this.name=""
-				this.phone=""
-				this.city=""
-				this.address=""
-			},
-		},
-		computed:{
-			areaList(){
-				return areaList
-			}
-		}
-	}
+import areaList from "@/script/areas.js";
+export default {
+  data() {
+    return {
+      titlename: "同城急送",
+      wptype: "", //物品类型
+      wpshow: false, //物品类型弹窗显示
+      wplist: ["物品1", "物品二"],
+      pricetype: "", //付款类型
+      priceshow: false, //付款类型弹窗显示
+      pricelist: ["月结", "日结", "到付"],
+      addshow: false,
+      name: "",
+      phone: "",
+      city: "",
+      address: "",
+      areashow: false,
+      index: "",
+      title: "",
+      jjname: "",
+      jjadd: "",
+      sjname: "",
+      sjadd: "",
+      check: false,
+      showPicker: false,
+      value: "",
+      columns: ["顺丰快递", "中通快递", "圆通快递"]
+    };
+  },
+  created: function() {
+    //this.areaList=area.areaList
+  },
+  methods: {
+    // 选择物品确定
+    onConfirm1(e) {
+      //确定
+      this.wptype = e;
+      this.wpshow = false;
+      console.log(e);
+    },
+    // 选择付款方式确定
+    onConfirm2(e) {
+      //确定
+      this.pricetype = e;
+      this.priceshow = false;
+      console.log(e);
+    },
+    // 填写地址确定
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    },
+    // 选择快递公司
+    onConfirm(e) {
+      this.value = e;
+      this.showPicker = false;
+    },
+
+    // 寄件地址1与收件地址2
+    addtype(obj) {
+      this.index = obj;
+      if (obj == 1) {
+        this.title = "寄件地址";
+      }
+      if (obj == 2) {
+        this.title = "收件地址";
+      }
+      this.addshow = true;
+    },
+    // 填写地址确定
+    onSubmit() {
+      if (this.index == 1) {
+        this.jjname = this.name + " " + this.phone;
+        this.jjadd = this.city + " " + this.address;
+      }
+      if (this.index == 2) {
+        this.sjname = this.name + " " + this.phone;
+        this.sjadd = this.city + " " + this.address;
+      }
+      this.addshow = false;
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    },
+    close() {
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
-	.content{
-		.jjinfo{
-			font-size: .24rem;
-			color: #999999;
-			padding: .33rem;
-			>div{
-				background: white;
-				border-radius: .05rem;
-				padding: .1rem .3rem;
-				.jj{
-					display: flex;
-					justify-content: space-between;
-					padding: .2rem 0rem;
-					.jjaddress{
-						display: flex;
-						padding: .1rem 0rem;
-						>p{
-							font-size: .24rem;
-							font-weight: bold;
-							display: inline-block;
-							width:.5rem;
-							height: .5rem;
-							background: #00c4b8;
-							text-align: center;
-							line-height: .5rem;
-							color: white;
-							border-radius: 50%;
-							margin-right: .3rem;
-						}
-						div{
-							//font-weight: bold;
-							max-width: 4.2rem;
-							p:nth-of-type(1){
-								font-size: .24rem;
-								color: #333;
-								margin-bottom: .2rem;
-							}
-							p:nth-of-type(2){
-								font-size: .3rem;
-							}
-						}
-					}
-					.dzb{
-						text-align: center;
-						border-left: .01rem solid #ededed;
-						padding-left: .3rem;
-						
-						img{
-							width:.39rem;
-							height: .42rem;
-							padding-top: .2rem;
-						}
-						p{
-							font-size: .2rem;
-						}
-						
-					}
-				}
-		    }
-		
-		}
-		.choose{
-			font-size: .3rem;
-			color: #999999;
-			font-weight: bold;
-			padding: 0.33rem .33rem;
-			>div{
-				background: white;
-				
-				padding: .3rem .3rem;
-				border-radius: .05rem;
-				.type_wp{
-					display: flex;
-					justify-content: center;
-					div{
-						flex: 1;
-						text-align: center;
-						p:nth-of-type(2){
-							color: #333;
-							margin-top: .2rem;
-							font-size: .36rem;
-							//position: relative;
-						}
-						
-					} 
-					div:nth-of-type(1){
-						border-right: .01rem solid #ededed;
-						p:nth-of-type(2):after{
-							content: "";
-							display: inline-block;
-							width: .15rem;
-							height: .15rem;
-							border-bottom: .01rem solid #999;
-							border-right: .01rem solid #999;
-							transform: rotate(45deg);
-							margin-left: .15rem;
-							position: relative;
-							top: -.08rem;
-						}
-					}
-				}
-				.type_price{
-					display: flex;
-					justify-content: center;
-					border-top: .01rem solid #ededed;
-					margin-top: .3rem;
-					padding-top: .3rem;
-					div{
-						flex: 1;
-						text-align: center;
-						p:nth-of-type(2){
-							color: #333;
-							margin-top: .2rem;
-							font-size: .36rem;
-						}
-					}
-					div:nth-of-type(1){
-						border-right: .01rem solid #ededed;
-						p:nth-of-type(2):after{
-							content: "";
-							display: inline-block;
-							width: .15rem;
-							height: .15rem;
-							border-bottom: .01rem solid #999;
-							border-right: .01rem solid #999;
-							transform: rotate(45deg);
-							margin-left: .15rem;
-							position: relative;
-							top: -.08rem;
-						}
-					}
-				}
-			}
-			
-		}
-		.kdshow{
-			font-size: .3rem;
-			padding: .3rem 0px;
-			width: 6.84rem;
-			background: white;
-			border-radius: .05rem;
-			margin: .2rem auto 0rem;
-			/deep/.van-cell{
-				padding: 0px .3rem;
-				overflow: unset;
-				input{
-					text-align: right;
-					height: .5rem;
-					padding-right: .25rem;
-				}
-			}
-			/deep/.van-cell::after{
-				content: "";
-				display: inline-block;
-				border-right: .01rem solid #b0b0b0;
-				border-bottom: .01rem solid #b0b0b0;
-				transform: rotate(-45deg);
-				left: unset;
-				position: absolute;
-				right: .3rem;
-				bottom: .15rem;
-				width: .2rem;
-				height: .2rem;
-			}
-		}
-		.bz{
-			padding: 0rem .33rem;
-		    font-size: .3rem;
-			/deep/.van-field__value{
-				input{
-					text-align: right;
-				}
-				
-			}
-		}
-		.check{
-			font-size: .24rem;
-			
-			text-align: center;
-			
-			/deep/.van-checkbox{
-				justify-content: center;
-				.van-checkbox__label{
-					color: #999;
-				}
-			}
-		}
-		.btn-jj{
-			padding: .33rem;
-			button{
-				width: 100%;
-			}
-		}
-	}
-	.whrite_add{
-		width: 6.6rem;
-		padding: .4rem .2rem;
-		/deep/.van-field__value{
-			input{
-				text-align: right;
-			}
-			
-		}
-		/deep/.van-popup__close-icon--top-right{
-			top: 5px;
-			right: 10px;
-		}
-	}
+.content {
+  .jjinfo {
+    font-size: 0.24rem;
+    color: #999999;
+    padding: 0.33rem;
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem;
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
+          div {
+            //font-weight: bold;
+            max-width: 4.2rem;
+            p:nth-of-type(1) {
+              font-size: 0.24rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
+        .dzb {
+          text-align: center;
+          border-left: 0.01rem solid #ededed;
+          padding-left: 0.3rem;
+
+          img {
+            width: 0.39rem;
+            height: 0.42rem;
+            padding-top: 0.2rem;
+          }
+          p {
+            font-size: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  .choose {
+    font-size: 0.3rem;
+    color: #999999;
+    font-weight: bold;
+    padding: 0.33rem 0.33rem;
+    > div {
+      background: white;
+
+      padding: 0.3rem 0.3rem;
+      border-radius: 0.05rem;
+      .type_wp {
+        display: flex;
+        justify-content: center;
+        div {
+          flex: 1;
+          text-align: center;
+          p:nth-of-type(2) {
+            color: #333;
+            margin-top: 0.2rem;
+            font-size: 0.36rem;
+            //position: relative;
+          }
+        }
+        div:nth-of-type(1) {
+          border-right: 0.01rem solid #ededed;
+          p:nth-of-type(2):after {
+            content: "";
+            display: inline-block;
+            width: 0.15rem;
+            height: 0.15rem;
+            border-bottom: 0.01rem solid #999;
+            border-right: 0.01rem solid #999;
+            transform: rotate(45deg);
+            margin-left: 0.15rem;
+            position: relative;
+            top: -0.08rem;
+          }
+        }
+      }
+      .type_price {
+        display: flex;
+        justify-content: center;
+        border-top: 0.01rem solid #ededed;
+        margin-top: 0.3rem;
+        padding-top: 0.3rem;
+        div {
+          flex: 1;
+          text-align: center;
+          p:nth-of-type(2) {
+            color: #333;
+            margin-top: 0.2rem;
+            font-size: 0.36rem;
+          }
+        }
+        div:nth-of-type(1) {
+          border-right: 0.01rem solid #ededed;
+          p:nth-of-type(2):after {
+            content: "";
+            display: inline-block;
+            width: 0.15rem;
+            height: 0.15rem;
+            border-bottom: 0.01rem solid #999;
+            border-right: 0.01rem solid #999;
+            transform: rotate(45deg);
+            margin-left: 0.15rem;
+            position: relative;
+            top: -0.08rem;
+          }
+        }
+      }
+    }
+  }
+  .kdshow {
+    font-size: 0.3rem;
+    padding: 0.3rem 0px;
+    width: 6.84rem;
+    background: white;
+    border-radius: 0.05rem;
+    margin: 0.2rem auto 0rem;
+    /deep/.van-cell {
+      padding: 0px 0.3rem;
+      overflow: unset;
+      input {
+        text-align: right;
+        height: 0.5rem;
+        padding-right: 0.25rem;
+      }
+    }
+    /deep/.van-cell::after {
+      content: "";
+      display: inline-block;
+      border-right: 0.01rem solid #b0b0b0;
+      border-bottom: 0.01rem solid #b0b0b0;
+      transform: rotate(-45deg);
+      left: unset;
+      position: absolute;
+      right: 0.3rem;
+      bottom: 0.15rem;
+      width: 0.2rem;
+      height: 0.2rem;
+    }
+  }
+  .bz {
+    padding: 0rem 0.33rem;
+    font-size: 0.3rem;
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
+  .check {
+    font-size: 0.24rem;
+
+    text-align: center;
+
+    /deep/.van-checkbox {
+      justify-content: center;
+      .van-checkbox__label {
+        color: #999;
+      }
+    }
+  }
+  .btn-jj {
+    padding: 0.33rem;
+    button {
+      width: 100%;
+    }
+  }
+}
+.whrite_add {
+  width: 6.6rem;
+  padding: 0.4rem 0.2rem;
+  /deep/.van-field__value {
+    input {
+      text-align: right;
+    }
+  }
+  /deep/.van-popup__close-icon--top-right {
+    top: 5px;
+    right: 10px;
+  }
+}
 </style>

src/pages_bak/express.vue

@@ -1,442 +1,501 @@
 <template>
-	<div class="content">
-		
-		<!-- 寄件地址 -->
-		<div class="jjinfo">
-			<div>
-				<div class="jj">
-					<div class="jjaddress">
-						<p>寄</p>
-						<div>
-							<p v-if="jjname==''||jjname==' '">寄件地址</p>
-							<p v-else>{{jjname}}</p>
-							<p v-if="jjadd==''||jjadd==' '" @click="addtype(1)">填写寄件地址</p>
-							<p v-else @click="addtype(1)">{{jjadd}}</p>
-						</div>
-					</div>
-					<div class="dzb" @click="link(1)">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>				
-				</div>
-				<div class="jj" style="border-top:.01rem solid #ededed">
-					<div class="jjaddress">
-						<p style="background: #fa9c22;">收</p>
-						<div>
-							<p v-if="sjname==''||sjname==' '">寄件地址</p>
-							<p v-else>{{sjname}}</p>
-							<p v-if="sjadd==''||sjadd==' '" @click="addtype(2)">填写收件地址</p>
-							<p v-else @click="addtype(2)">{{sjadd}}</p>
-						</div>
-					</div>
-					<div class="dzb" @click="link(2)">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>
-				</div>
-			</div>
-			
-		</div>
-		<!-- 快递公司 -->
-		<div class="kdshow">
-			<van-field readonly clickable name="picker" :value="value" label="快递公司" placeholder="请选择快递公司" @click="showPicker = true" />
-			<van-popup v-model="showPicker" position="bottom">
-			  <van-picker
-			    show-toolbar
-			    :columns="columns"
-			    @confirm="onConfirm"
-			    @cancel="showPicker = false"
-			  />
-			</van-popup>
-		</div>
-		<!-- 寄件属性 -->
-		<div class="choose">
-			<div>
-				<div class="type_wp">
-					<div>
-						<p>物品类型</p>
-						<p v-if="wptype==''" @click="wpshow=true">请选择</p>
-						<p v-else @click="wpshow=true">{{wptype}}</p>
-					</div>
-					<div>
-						<p>重量</p>
-						<p>一件</p>
-					</div>
-				</div>
-				<div class="type_price">
-					<div>
-						<p>付款方式</p>
-                        <p v-if="pricetype==''" @click="priceshow=true">请选择</p>
-						<p v-else @click="priceshow=true">{{pricetype}}</p>
-					</div>
-					<div>
-						<p>声明价值</p>
-						<p>0元</p>
-					</div>
-				</div>
-			</div>			
-		</div>
-		<!-- 备注 -->
-		<div class="bz">
-			<div>
-				<van-field v-model="bz" name="备注" label="备注" placeholder="包装运输等要求"/>
-			</div>		
-		</div>
-		<!-- 我同意 -->
-		<div class="check">
-			<van-checkbox icon-size=".24rem" v-model="check" shape="">我同意《电子运单契约条款》</van-checkbox>
-		</div>
-		<!-- 寄件 -->
-		<div class="btn-jj">
-			<van-button type="info" color="#00c4b8">立即寄件</van-button>
-		</div>
-		<!-- 弹窗物品类型 -->
-		<van-popup v-model="wpshow" position="bottom">
-		  <van-picker title="物品类型" show-toolbar :columns="wplist" @confirm="onConfirm1" @cancel="wpshow=false"/>
-		</van-popup>
-		<!-- 弹窗付款方式 -->
-		<van-popup v-model="priceshow" position="bottom">
-		  <van-picker title="付款方式" show-toolbar :columns="pricelist" @confirm="onConfirm2" @cancel="priceshow=false"/>
-		</van-popup>
-		<!-- 填写地址 -->
-		<van-popup round v-model="addshow" class="whrite_add" closeable closed="close">
-			<div>
-				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">{{title}}</p>
-				<van-form @submit="onSubmit">
-				  <van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名"/>
-				  <van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"/>
-				  <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" />
-				  <van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"/>
-				  <div style="margin-top: 16px;">
-				    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-				  </div>
-				</van-form>
-			</div>
-		  
-		</van-popup>
-		<!-- 城市选择 -->
-		<van-popup v-model="areashow" position="bottom">
-		  <van-area
-		    :area-list="areaList"
-		    @confirm="onConfirm3"
-		    @cancel="areashow = false"
-		  />
-		</van-popup>
-		
-	</div>	
+  <div class="content">
+    <!-- 寄件地址 -->
+    <div class="jjinfo">
+      <div>
+        <div class="jj">
+          <div class="jjaddress">
+            <p>寄</p>
+            <div>
+              <p v-if="jjname == '' || jjname == ' '">寄件地址</p>
+              <p v-else>{{ jjname }}</p>
+              <p v-if="jjadd == '' || jjadd == ' '" @click="addtype(1)">
+                填写寄件地址
+              </p>
+              <p v-else @click="addtype(1)">{{ jjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb" @click="link(1)">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+        <div class="jj" style="border-top:.01rem solid #ededed">
+          <div class="jjaddress">
+            <p style="background: #fa9c22;">收</p>
+            <div>
+              <p v-if="sjname == '' || sjname == ' '">寄件地址</p>
+              <p v-else>{{ sjname }}</p>
+              <p v-if="sjadd == '' || sjadd == ' '" @click="addtype(2)">
+                填写收件地址
+              </p>
+              <p v-else @click="addtype(2)">{{ sjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb" @click="link(2)">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 快递公司 -->
+    <div class="kdshow">
+      <van-field
+        readonly
+        clickable
+        name="picker"
+        :value="value"
+        label="快递公司"
+        placeholder="请选择快递公司"
+        @click="showPicker = true"
+      />
+      <van-popup v-model="showPicker" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="columns"
+          @confirm="onConfirm"
+          @cancel="showPicker = false"
+        />
+      </van-popup>
+    </div>
+    <!-- 寄件属性 -->
+    <div class="choose">
+      <div>
+        <div class="type_wp">
+          <div>
+            <p>物品类型</p>
+            <p v-if="wptype == ''" @click="wpshow = true">请选择</p>
+            <p v-else @click="wpshow = true">{{ wptype }}</p>
+          </div>
+          <div>
+            <p>重量</p>
+            <p>一件</p>
+          </div>
+        </div>
+        <div class="type_price">
+          <div>
+            <p>付款方式</p>
+            <p v-if="pricetype == ''" @click="priceshow = true">请选择</p>
+            <p v-else @click="priceshow = true">{{ pricetype }}</p>
+          </div>
+          <div>
+            <p>声明价值</p>
+            <p>0元</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 备注 -->
+    <div class="bz">
+      <div>
+        <van-field
+          v-model="bz"
+          name="备注"
+          label="备注"
+          placeholder="包装运输等要求"
+        />
+      </div>
+    </div>
+    <!-- 我同意 -->
+    <div class="check">
+      <van-checkbox icon-size=".24rem" v-model="check" shape=""
+        >我同意《电子运单契约条款》</van-checkbox
+      >
+    </div>
+    <!-- 寄件 -->
+    <div class="btn-jj">
+      <van-button type="info" color="#0c2469">立即寄件</van-button>
+    </div>
+    <!-- 弹窗物品类型 -->
+    <van-popup v-model="wpshow" position="bottom">
+      <van-picker
+        title="物品类型"
+        show-toolbar
+        :columns="wplist"
+        @confirm="onConfirm1"
+        @cancel="wpshow = false"
+      />
+    </van-popup>
+    <!-- 弹窗付款方式 -->
+    <van-popup v-model="priceshow" position="bottom">
+      <van-picker
+        title="付款方式"
+        show-toolbar
+        :columns="pricelist"
+        @confirm="onConfirm2"
+        @cancel="priceshow = false"
+      />
+    </van-popup>
+    <!-- 填写地址 -->
+    <van-popup
+      round
+      v-model="addshow"
+      class="whrite_add"
+      closeable
+      closed="close"
+    >
+      <div>
+        <p style="font-size: 16px;text-align: center;margin-bottom: 16px;">
+          {{ title }}
+        </p>
+        <van-form @submit="onSubmit">
+          <van-field
+            v-model="name"
+            name="姓名"
+            label="姓名"
+            placeholder="请输入姓名"
+          />
+          <van-field
+            v-model="phone"
+            maxlength="11"
+            type="number"
+            name="手机"
+            label="手机"
+            placeholder="请输入手机"
+          />
+          <van-field
+            readonly
+            clickable
+            name="area"
+            :value="city"
+            label="省市区"
+            placeholder="请选择省市区"
+            @click="areashow = true"
+          />
+          <van-field
+            v-model="address"
+            name="详细地址"
+            label="详细地址"
+            placeholder="请输入详细地址"
+          />
+          <div style="margin-top: 16px;">
+            <van-button color="#0c2469" block type="info" native-type="submit"
+              >确定</van-button
+            >
+          </div>
+        </van-form>
+      </div>
+    </van-popup>
+    <!-- 城市选择 -->
+    <van-popup v-model="areashow" position="bottom">
+      <van-area
+        :area-list="areaList"
+        @confirm="onConfirm3"
+        @cancel="areashow = false"
+      />
+    </van-popup>
+  </div>
 </template>
 
 <script>
-	import areaList from "@/script/areas.js"
-	export default{
-		data(){
-			return {
-				titlename:"寄件",
-				wptype:"",//物品类型
-				wpshow:false,//物品类型弹窗显示
-				wplist:["物品1","物品二"],
-				pricetype:"",//付款类型
-				priceshow:false,//付款类型弹窗显示
-				pricelist:["月结","日结","到付"],
-				addshow:false,
-				name:"",
-				phone:"",
-				city:"",
-				address:"",
-				areashow:false,
-				index:"",
-				title:"",
-				jjname:"",
-				jjadd:"",
-				sjname:"",
-				sjadd:"",
-				bz:"",
-				check:false,
-				showPicker:false,//快递
-				value:"",
-				columns:["顺丰快递","中通快递","圆通快递"],
-			}
-		},
-		created:function(){
-			//this.areaList=area.areaList
-		},
-		methods:{
-			// 选择物品确定
-			onConfirm1(e){//确定
-				this.wptype=e
-				this.wpshow=false
-				console.log(e)
-			},
-			// 选择付款方式确定
-			onConfirm2(e){//确定
-				this.pricetype=e
-				this.priceshow=false
-				console.log(e)
-			},
-			// 填写地址确定
-			onConfirm3(e){//确定
-				this.city=e[0].name+' '+e[1].name+' '+e[2].name
-				this.areashow=false
-				console.log(e)
-			},
-			// 寄件地址1与收件地址2
-			addtype(obj){
-				this.index=obj
-				if(obj==1){
-					this.title="寄件地址"
-				}
-				if(obj==2){
-					this.title="收件地址"
-				}
-				this.addshow=true
-			},
-			// 填写地址确定
-			onSubmit(){
-				if(this.index==1){
-					this.jjname=this.name+' '+this.phone
-					this.jjadd=this.city+' '+this.address
-				}
-				if(this.index==2){
-					this.sjname=this.name+' '+this.phone
-                    this.sjadd=this.city+' '+this.address
-				}
-				this.addshow=false
-				this.name=""
-				this.phone=""
-				this.city=""
-				this.address=""
-			},
-			close(){
-				this.name=""
-				this.phone=""
-				this.city=""
-				this.address=""
-			},
-			// 地址簿跳转
-			link(obj){
-				this.$router.push({path:'/Addressbook',query:{active:obj}})
-			},
-			// 选择快递公司
-			onConfirm(e){
-				this.value=e
-				this.showPicker=false
-			},
-		},
-		computed:{
-			areaList(){
-				return areaList
-			}
-		}
-	}
+import areaList from "@/script/areas.js";
+export default {
+  data() {
+    return {
+      titlename: "寄件",
+      wptype: "", //物品类型
+      wpshow: false, //物品类型弹窗显示
+      wplist: ["物品1", "物品二"],
+      pricetype: "", //付款类型
+      priceshow: false, //付款类型弹窗显示
+      pricelist: ["月结", "日结", "到付"],
+      addshow: false,
+      name: "",
+      phone: "",
+      city: "",
+      address: "",
+      areashow: false,
+      index: "",
+      title: "",
+      jjname: "",
+      jjadd: "",
+      sjname: "",
+      sjadd: "",
+      bz: "",
+      check: false,
+      showPicker: false, //快递
+      value: "",
+      columns: ["顺丰快递", "中通快递", "圆通快递"]
+    };
+  },
+  created: function() {
+    //this.areaList=area.areaList
+  },
+  methods: {
+    // 选择物品确定
+    onConfirm1(e) {
+      //确定
+      this.wptype = e;
+      this.wpshow = false;
+      console.log(e);
+    },
+    // 选择付款方式确定
+    onConfirm2(e) {
+      //确定
+      this.pricetype = e;
+      this.priceshow = false;
+      console.log(e);
+    },
+    // 填写地址确定
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    },
+    // 寄件地址1与收件地址2
+    addtype(obj) {
+      this.index = obj;
+      if (obj == 1) {
+        this.title = "寄件地址";
+      }
+      if (obj == 2) {
+        this.title = "收件地址";
+      }
+      this.addshow = true;
+    },
+    // 填写地址确定
+    onSubmit() {
+      if (this.index == 1) {
+        this.jjname = this.name + " " + this.phone;
+        this.jjadd = this.city + " " + this.address;
+      }
+      if (this.index == 2) {
+        this.sjname = this.name + " " + this.phone;
+        this.sjadd = this.city + " " + this.address;
+      }
+      this.addshow = false;
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    },
+    close() {
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    },
+    // 地址簿跳转
+    link(obj) {
+      this.$router.push({ path: "/Addressbook", query: { active: obj } });
+    },
+    // 选择快递公司
+    onConfirm(e) {
+      this.value = e;
+      this.showPicker = false;
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
-	.content{
-		.jjinfo{
-			font-size: .24rem;
-			color: #999999;
-			padding: .33rem;
-			>div{
-				background: white;
-				border-radius: .05rem;
-				padding: .1rem .3rem;
-				.jj{
-					display: flex;
-					justify-content: space-between;
-					padding: .2rem 0rem;
-					.jjaddress{
-						display: flex;
-						padding: .1rem 0rem;
-						>p{
-							font-size: .24rem;
-							font-weight: bold;
-							display: inline-block;
-							width:.5rem;
-							height: .5rem;
-							background: #00c4b8;
-							text-align: center;
-							line-height: .5rem;
-							color: white;
-							border-radius: 50%;
-							margin-right: .3rem;
-						}
-						div{
-							//font-weight: bold;
-							max-width: 4.2rem;
-							p:nth-of-type(1){
-								font-size: .24rem;
-								color: #333;
-								margin-bottom: .2rem;
-							}
-							p:nth-of-type(2){
-								font-size: .3rem;
-							}
-						}
-					}
-					.dzb{
-						text-align: center;
-						border-left: .01rem solid #ededed;
-						padding-left: .3rem;
-						
-						img{
-							width:.39rem;
-							height: .42rem;
-							padding-top: .2rem;
-						}
-						p{
-							font-size: .2rem;
-						}
-						
-					}
-				}
-		    }
-		
-		}
-		.kdshow{
-			font-size: .3rem;
-			padding: .3rem 0px;
-			width: 6.84rem;
-			background: white;
-			border-radius: .05rem;
-			margin: 0rem auto .2rem;
-			/deep/.van-cell{
-				padding: 0px .3rem;
-				overflow: unset;
-				input{
-					text-align: right;
-					height: .5rem;
-					padding-right: .25rem;
-				}
-			}
-			/deep/.van-cell::after{
-				content: "";
-				display: inline-block;
-				border-right: .01rem solid #b0b0b0;
-				border-bottom: .01rem solid #b0b0b0;
-				transform: rotate(-45deg);
-				left: unset;
-				position: absolute;
-				right: .3rem;
-				bottom: .15rem;
-				width: .2rem;
-				height: .2rem;
-			}
-		}
-		.choose{
-			font-size: .3rem;
-			color: #999999;
-			font-weight: bold;
-			padding: 0rem .33rem;
-			>div{
-				background: white;
-				
-				padding: .3rem .3rem;
-				border-radius: .05rem;
-				.type_wp{
-					display: flex;
-					justify-content: center;
-					div{
-						flex: 1;
-						text-align: center;
-						p:nth-of-type(2){
-							color: #333;
-							margin-top: .2rem;
-							font-size: .36rem;
-							//position: relative;
-						}
-						
-					} 
-					div:nth-of-type(1){
-						border-right: .01rem solid #ededed;
-						p:nth-of-type(2):after{
-							content: "";
-							display: inline-block;
-							width: .15rem;
-							height: .15rem;
-							border-bottom: .01rem solid #999;
-							border-right: .01rem solid #999;
-							transform: rotate(45deg);
-							margin-left: .15rem;
-							position: relative;
-							top: -.08rem;
-						}
-					}
-				}
-				.type_price{
-					display: flex;
-					justify-content: center;
-					border-top: .01rem solid #ededed;
-					margin-top: .3rem;
-					padding-top: .3rem;
-					div{
-						flex: 1;
-						text-align: center;
-						p:nth-of-type(2){
-							color: #333;
-							margin-top: .2rem;
-							font-size: .36rem;
-						}
-					}
-					div:nth-of-type(1){
-						border-right: .01rem solid #ededed;
-						p:nth-of-type(2):after{
-							content: "";
-							display: inline-block;
-							width: .15rem;
-							height: .15rem;
-							border-bottom: .01rem solid #999;
-							border-right: .01rem solid #999;
-							transform: rotate(45deg);
-							margin-left: .15rem;
-							position: relative;
-							top: -.08rem;
-						}
-					}
-				}
-			}
-			
-		}
-	    .bz{
-			padding: .33rem;
-		    font-size: .3rem;
-			/deep/.van-field__value{
-				input{
-					text-align: right;
-				}
-				
-			}
-		}
-		.check{
-			font-size: .24rem;
-			
-			text-align: center;
-			
-			/deep/.van-checkbox{
-				justify-content: center;
-				.van-checkbox__label{
-					color: #999;
-				}
-			}
-		}
-		.btn-jj{
-			padding: .33rem;
-			button{
-				width: 100%;
-			}
-		}
-	}
-	.whrite_add{
-		width: 6.6rem;
-		padding: .4rem .2rem;
-		/deep/.van-field__value{
-			input{
-				text-align: right;
-			}
-			
-		}
-		/deep/.van-popup__close-icon--top-right{
-			top: 5px;
-			right: 10px;
-		}
-	}
+.content {
+  .jjinfo {
+    font-size: 0.24rem;
+    color: #999999;
+    padding: 0.33rem;
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem;
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
+          div {
+            //font-weight: bold;
+            max-width: 4.2rem;
+            p:nth-of-type(1) {
+              font-size: 0.24rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
+        .dzb {
+          text-align: center;
+          border-left: 0.01rem solid #ededed;
+          padding-left: 0.3rem;
+
+          img {
+            width: 0.39rem;
+            height: 0.42rem;
+            padding-top: 0.2rem;
+          }
+          p {
+            font-size: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  .kdshow {
+    font-size: 0.3rem;
+    padding: 0.3rem 0px;
+    width: 6.84rem;
+    background: white;
+    border-radius: 0.05rem;
+    margin: 0rem auto 0.2rem;
+    /deep/.van-cell {
+      padding: 0px 0.3rem;
+      overflow: unset;
+      input {
+        text-align: right;
+        height: 0.5rem;
+        padding-right: 0.25rem;
+      }
+    }
+    /deep/.van-cell::after {
+      content: "";
+      display: inline-block;
+      border-right: 0.01rem solid #b0b0b0;
+      border-bottom: 0.01rem solid #b0b0b0;
+      transform: rotate(-45deg);
+      left: unset;
+      position: absolute;
+      right: 0.3rem;
+      bottom: 0.15rem;
+      width: 0.2rem;
+      height: 0.2rem;
+    }
+  }
+  .choose {
+    font-size: 0.3rem;
+    color: #999999;
+    font-weight: bold;
+    padding: 0rem 0.33rem;
+    > div {
+      background: white;
+
+      padding: 0.3rem 0.3rem;
+      border-radius: 0.05rem;
+      .type_wp {
+        display: flex;
+        justify-content: center;
+        div {
+          flex: 1;
+          text-align: center;
+          p:nth-of-type(2) {
+            color: #333;
+            margin-top: 0.2rem;
+            font-size: 0.36rem;
+            //position: relative;
+          }
+        }
+        div:nth-of-type(1) {
+          border-right: 0.01rem solid #ededed;
+          p:nth-of-type(2):after {
+            content: "";
+            display: inline-block;
+            width: 0.15rem;
+            height: 0.15rem;
+            border-bottom: 0.01rem solid #999;
+            border-right: 0.01rem solid #999;
+            transform: rotate(45deg);
+            margin-left: 0.15rem;
+            position: relative;
+            top: -0.08rem;
+          }
+        }
+      }
+      .type_price {
+        display: flex;
+        justify-content: center;
+        border-top: 0.01rem solid #ededed;
+        margin-top: 0.3rem;
+        padding-top: 0.3rem;
+        div {
+          flex: 1;
+          text-align: center;
+          p:nth-of-type(2) {
+            color: #333;
+            margin-top: 0.2rem;
+            font-size: 0.36rem;
+          }
+        }
+        div:nth-of-type(1) {
+          border-right: 0.01rem solid #ededed;
+          p:nth-of-type(2):after {
+            content: "";
+            display: inline-block;
+            width: 0.15rem;
+            height: 0.15rem;
+            border-bottom: 0.01rem solid #999;
+            border-right: 0.01rem solid #999;
+            transform: rotate(45deg);
+            margin-left: 0.15rem;
+            position: relative;
+            top: -0.08rem;
+          }
+        }
+      }
+    }
+  }
+  .bz {
+    padding: 0.33rem;
+    font-size: 0.3rem;
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
+  .check {
+    font-size: 0.24rem;
+
+    text-align: center;
+
+    /deep/.van-checkbox {
+      justify-content: center;
+      .van-checkbox__label {
+        color: #999;
+      }
+    }
+  }
+  .btn-jj {
+    padding: 0.33rem;
+    button {
+      width: 100%;
+    }
+  }
+}
+.whrite_add {
+  width: 6.6rem;
+  padding: 0.4rem 0.2rem;
+  /deep/.van-field__value {
+    input {
+      text-align: right;
+    }
+  }
+  /deep/.van-popup__close-icon--top-right {
+    top: 5px;
+    right: 10px;
+  }
+}
 </style>

src/pages_bak/inexpress.vue

@@ -1,396 +1,455 @@
 <template>
-	<div class="content">
-		
-		<!-- 寄件地址 -->
-		<div class="jjinfo">
-			<div>
-				<div class="jj">
-					<div class="jjaddress">
-						<p>寄</p>
-						<div>
-							<p v-if="jjname==''||jjname==' '">寄件地址</p>
-							<p v-else>{{jjname}}</p>
-							<p v-if="jjadd==''||jjadd==' '" @click="addtype(1)">填写寄件地址</p>
-							<p v-else @click="addtype(1)">{{jjadd}}</p>
-						</div>
-					</div>
-					<div class="dzb">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>				
-				</div>
-				<div class="jj" style="border-top:.01rem solid #ededed">
-					<div class="jjaddress">
-						<p style="background: #fa9c22;">收</p>
-						<div>
-							<p v-if="sjname==''||sjname==' '">寄件地址</p>
-							<p v-else>{{sjname}}</p>
-							<p v-if="sjadd==''||sjadd==' '" @click="addtype(2)">填写收件地址</p>
-							<p v-else @click="addtype(2)">{{sjadd}}</p>
-						</div>
-					</div>
-					<div class="dzb">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>
-				</div>
-			</div>
-			
-		</div>
-		<!-- 快递公司 -->
-		<div class="kdshow">
-			<van-field readonly clickable name="picker" :value="value" label="快递公司" placeholder="请选择快递公司" @click="showPicker = true" />
-			<van-popup v-model="showPicker" position="bottom">
-			  <van-picker
-			    show-toolbar
-			    :columns="columns"
-			    @confirm="onConfirm"
-			    @cancel="showPicker = false"
-			  />
-			</van-popup>
-		</div>
-		<!-- 寄件属性 -->
-		<div class="choose">
-			<div>
-				<div class="type_wp">
-					<div>
-						<p>物品类型</p>
-						<p v-if="wptype==''" @click="wpshow=true">请选择</p>
-						<p v-else @click="wpshow=true">{{wptype}}</p>
-					</div>
-					<div>
-						<p>重量</p>
-						<p>一件</p>
-					</div>
-				</div>
-			</div>			
-		</div>
-		<!-- 备注 -->
-		<div class="bz">
-			<div>
-				<van-field v-model="bz" name="备注" label="备注" placeholder="包装运输等要求"/>
-			</div>		
-		</div>
-		<!-- 我同意 -->
-		<div class="check">
-			<van-checkbox icon-size=".24rem" v-model="check" shape="">我同意《电子运单契约条款》</van-checkbox>
-		</div>
-		<!-- 寄件 -->
-		<div class="btn-jj">
-			<van-button type="info" color="#00c4b8">立即寄件</van-button>
-		</div>
-		<!-- 弹窗物品类型 -->
-		<van-popup v-model="wpshow" position="bottom">
-		  <van-picker title="物品类型" show-toolbar :columns="wplist" @confirm="onConfirm1" @cancel="wpshow=false"/>
-		</van-popup>
-		<!-- 弹窗付款方式 -->
-		<van-popup v-model="priceshow" position="bottom">
-		  <van-picker title="付款方式" show-toolbar :columns="pricelist" @confirm="onConfirm2" @cancel="priceshow=false"/>
-		</van-popup>
-		<!-- 填写地址 -->
-		<van-popup round v-model="addshow" class="whrite_add" closeable closed="close">
-			<div>
-				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">{{title}}</p>
-				<van-form @submit="onSubmit">
-				  <van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名"/>
-				  <van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"/>
-				  <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" />
-				  <van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"/>
-				  <div style="margin-top: 16px;">
-				    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-				  </div>
-				</van-form>
-			</div>
-		  
-		</van-popup>
-		<!-- 城市选择 -->
-		<van-popup v-model="areashow" position="bottom">
-		  <van-area
-		    :area-list="areaList"
-		    @confirm="onConfirm3"
-		    @cancel="areashow = false"
-		  />
-		</van-popup>
-	</div>	
+  <div class="content">
+    <!-- 寄件地址 -->
+    <div class="jjinfo">
+      <div>
+        <div class="jj">
+          <div class="jjaddress">
+            <p>寄</p>
+            <div>
+              <p v-if="jjname == '' || jjname == ' '">寄件地址</p>
+              <p v-else>{{ jjname }}</p>
+              <p v-if="jjadd == '' || jjadd == ' '" @click="addtype(1)">
+                填写寄件地址
+              </p>
+              <p v-else @click="addtype(1)">{{ jjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+        <div class="jj" style="border-top:.01rem solid #ededed">
+          <div class="jjaddress">
+            <p style="background: #fa9c22;">收</p>
+            <div>
+              <p v-if="sjname == '' || sjname == ' '">寄件地址</p>
+              <p v-else>{{ sjname }}</p>
+              <p v-if="sjadd == '' || sjadd == ' '" @click="addtype(2)">
+                填写收件地址
+              </p>
+              <p v-else @click="addtype(2)">{{ sjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 快递公司 -->
+    <div class="kdshow">
+      <van-field
+        readonly
+        clickable
+        name="picker"
+        :value="value"
+        label="快递公司"
+        placeholder="请选择快递公司"
+        @click="showPicker = true"
+      />
+      <van-popup v-model="showPicker" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="columns"
+          @confirm="onConfirm"
+          @cancel="showPicker = false"
+        />
+      </van-popup>
+    </div>
+    <!-- 寄件属性 -->
+    <div class="choose">
+      <div>
+        <div class="type_wp">
+          <div>
+            <p>物品类型</p>
+            <p v-if="wptype == ''" @click="wpshow = true">请选择</p>
+            <p v-else @click="wpshow = true">{{ wptype }}</p>
+          </div>
+          <div>
+            <p>重量</p>
+            <p>一件</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 备注 -->
+    <div class="bz">
+      <div>
+        <van-field
+          v-model="bz"
+          name="备注"
+          label="备注"
+          placeholder="包装运输等要求"
+        />
+      </div>
+    </div>
+    <!-- 我同意 -->
+    <div class="check">
+      <van-checkbox icon-size=".24rem" v-model="check" shape=""
+        >我同意《电子运单契约条款》</van-checkbox
+      >
+    </div>
+    <!-- 寄件 -->
+    <div class="btn-jj">
+      <van-button type="info" color="#0c2469">立即寄件</van-button>
+    </div>
+    <!-- 弹窗物品类型 -->
+    <van-popup v-model="wpshow" position="bottom">
+      <van-picker
+        title="物品类型"
+        show-toolbar
+        :columns="wplist"
+        @confirm="onConfirm1"
+        @cancel="wpshow = false"
+      />
+    </van-popup>
+    <!-- 弹窗付款方式 -->
+    <van-popup v-model="priceshow" position="bottom">
+      <van-picker
+        title="付款方式"
+        show-toolbar
+        :columns="pricelist"
+        @confirm="onConfirm2"
+        @cancel="priceshow = false"
+      />
+    </van-popup>
+    <!-- 填写地址 -->
+    <van-popup
+      round
+      v-model="addshow"
+      class="whrite_add"
+      closeable
+      closed="close"
+    >
+      <div>
+        <p style="font-size: 16px;text-align: center;margin-bottom: 16px;">
+          {{ title }}
+        </p>
+        <van-form @submit="onSubmit">
+          <van-field
+            v-model="name"
+            name="姓名"
+            label="姓名"
+            placeholder="请输入姓名"
+          />
+          <van-field
+            v-model="phone"
+            maxlength="11"
+            type="number"
+            name="手机"
+            label="手机"
+            placeholder="请输入手机"
+          />
+          <van-field
+            readonly
+            clickable
+            name="area"
+            :value="city"
+            label="省市区"
+            placeholder="请选择省市区"
+            @click="areashow = true"
+          />
+          <van-field
+            v-model="address"
+            name="详细地址"
+            label="详细地址"
+            placeholder="请输入详细地址"
+          />
+          <div style="margin-top: 16px;">
+            <van-button color="#0c2469" block type="info" native-type="submit"
+              >确定</van-button
+            >
+          </div>
+        </van-form>
+      </div>
+    </van-popup>
+    <!-- 城市选择 -->
+    <van-popup v-model="areashow" position="bottom">
+      <van-area
+        :area-list="areaList"
+        @confirm="onConfirm3"
+        @cancel="areashow = false"
+      />
+    </van-popup>
+  </div>
 </template>
 
 <script>
-	import areaList from "@/script/areas.js"
-	export default{
-		data(){
-			return {
-				titlename:"内部件",
-				wptype:"",//物品类型
-				wpshow:false,//物品类型弹窗显示
-				wplist:["物品1","物品二"],
-				pricetype:"",//付款类型
-				priceshow:false,//付款类型弹窗显示
-				pricelist:["月结","日结","到付"],
-				addshow:false,
-				name:"",
-				phone:"",
-				city:"",
-				address:"",
-				areashow:false,
-				index:"",
-				title:"",
-				jjname:"",
-				jjadd:"",
-				sjname:"",
-				sjadd:"",
-				bz:"",
-				check:false,
-				showPicker:false,//快递
-				value:"",
-				columns:["顺丰快递","中通快递","圆通快递"],
-			}
-		},
-		created:function(){
-			//this.areaList=area.areaList
-		},
-		methods:{
-			// 选择快递公司
-			onConfirm(e){
-				this.value=e
-				this.showPicker=false
-			},
-			// 选择物品确定
-			onConfirm1(e){//确定
-				this.wptype=e
-				this.wpshow=false
-				console.log(e)
-			},
-			// 选择付款方式确定
-			onConfirm2(e){//确定
-				this.pricetype=e
-				this.priceshow=false
-				console.log(e)
-			},
-			// 填写地址确定
-			onConfirm3(e){//确定
-				this.city=e[0].name+' '+e[1].name+' '+e[2].name
-				this.areashow=false
-				console.log(e)
-			},
-			// 寄件地址1与收件地址2
-			addtype(obj){
-				this.index=obj
-				if(obj==1){
-					this.title="寄件地址"
-				}
-				if(obj==2){
-					this.title="收件地址"
-				}
-				this.addshow=true
-			},
-			// 填写地址确定
-			onSubmit(){
-				if(this.index==1){
-					this.jjname=this.name+' '+this.phone
-					this.jjadd=this.city+' '+this.address
-				}
-				if(this.index==2){
-					this.sjname=this.name+' '+this.phone
-                    this.sjadd=this.city+' '+this.address
-				}
-				this.addshow=false
-				this.name=""
-				this.phone=""
-				this.city=""
-				this.address=""
-			},
-			close(){
-				this.name=""
-				this.phone=""
-				this.city=""
-				this.address=""
-			},
-		},
-		computed:{
-			areaList(){
-				return areaList
-			}
-		}
-	}
+import areaList from "@/script/areas.js";
+export default {
+  data() {
+    return {
+      titlename: "内部件",
+      wptype: "", //物品类型
+      wpshow: false, //物品类型弹窗显示
+      wplist: ["物品1", "物品二"],
+      pricetype: "", //付款类型
+      priceshow: false, //付款类型弹窗显示
+      pricelist: ["月结", "日结", "到付"],
+      addshow: false,
+      name: "",
+      phone: "",
+      city: "",
+      address: "",
+      areashow: false,
+      index: "",
+      title: "",
+      jjname: "",
+      jjadd: "",
+      sjname: "",
+      sjadd: "",
+      bz: "",
+      check: false,
+      showPicker: false, //快递
+      value: "",
+      columns: ["顺丰快递", "中通快递", "圆通快递"]
+    };
+  },
+  created: function() {
+    //this.areaList=area.areaList
+  },
+  methods: {
+    // 选择快递公司
+    onConfirm(e) {
+      this.value = e;
+      this.showPicker = false;
+    },
+    // 选择物品确定
+    onConfirm1(e) {
+      //确定
+      this.wptype = e;
+      this.wpshow = false;
+      console.log(e);
+    },
+    // 选择付款方式确定
+    onConfirm2(e) {
+      //确定
+      this.pricetype = e;
+      this.priceshow = false;
+      console.log(e);
+    },
+    // 填写地址确定
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    },
+    // 寄件地址1与收件地址2
+    addtype(obj) {
+      this.index = obj;
+      if (obj == 1) {
+        this.title = "寄件地址";
+      }
+      if (obj == 2) {
+        this.title = "收件地址";
+      }
+      this.addshow = true;
+    },
+    // 填写地址确定
+    onSubmit() {
+      if (this.index == 1) {
+        this.jjname = this.name + " " + this.phone;
+        this.jjadd = this.city + " " + this.address;
+      }
+      if (this.index == 2) {
+        this.sjname = this.name + " " + this.phone;
+        this.sjadd = this.city + " " + this.address;
+      }
+      this.addshow = false;
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    },
+    close() {
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
-	.content{
-		.jjinfo{
-			font-size: .24rem;
-			color: #999999;
-			padding: .33rem;
-			>div{
-				background: white;
-				border-radius: .05rem;
-				padding: .1rem .3rem;
-				.jj{
-					display: flex;
-					justify-content: space-between;
-					padding: .2rem 0rem;
-					.jjaddress{
-						display: flex;
-						padding: .1rem 0rem;
-						>p{
-							font-size: .24rem;
-							font-weight: bold;
-							display: inline-block;
-							width:.5rem;
-							height: .5rem;
-							background: #00c4b8;
-							text-align: center;
-							line-height: .5rem;
-							color: white;
-							border-radius: 50%;
-							margin-right: .3rem;
-						}
-						div{
-							//font-weight: bold;
-							max-width: 4.2rem;
-							p:nth-of-type(1){
-								font-size: .24rem;
-								color: #333;
-								margin-bottom: .2rem;
-							}
-							p:nth-of-type(2){
-								font-size: .3rem;
-							}
-						}
-					}
-					.dzb{
-						text-align: center;
-						border-left: .01rem solid #ededed;
-						padding-left: .3rem;
-						
-						img{
-							width:.39rem;
-							height: .42rem;
-							padding-top: .2rem;
-						}
-						p{
-							font-size: .2rem;
-						}
-						
-					}
-				}
-		    }
-		
-		}
-		.kdshow{
-			font-size: .3rem;
-			padding: .3rem 0px;
-			width: 6.84rem;
-			background: white;
-			border-radius: .05rem;
-			margin: 0rem auto .2rem;
-			/deep/.van-cell{
-				padding: 0px .3rem;
-				overflow: unset;
-				input{
-					text-align: right;
-					height: .5rem;
-					padding-right: .25rem;
-				}
-			}
-			/deep/.van-cell::after{
-				content: "";
-				display: inline-block;
-				border-right: .01rem solid #b0b0b0;
-				border-bottom: .01rem solid #b0b0b0;
-				transform: rotate(-45deg);
-				left: unset;
-				position: absolute;
-				right: .3rem;
-				bottom: .15rem;
-				width: .2rem;
-				height: .2rem;
-			}
-		}
-		.choose{
-			font-size: .3rem;
-			color: #999999;
-			font-weight: bold;
-			padding: 0rem .33rem;
-			>div{
-				background: white;
-				
-				padding: .3rem .3rem;
-				border-radius: .05rem;
-				.type_wp{
-					display: flex;
-					justify-content: center;
-					div{
-						flex: 1;
-						text-align: center;
-						p:nth-of-type(2){
-							color: #333;
-							margin-top: .2rem;
-							font-size: .36rem;
-							//position: relative;
-						}
-						
-					} 
-					div:nth-of-type(1){
-						border-right: .01rem solid #ededed;
-						p:nth-of-type(2):after{
-							content: "";
-							display: inline-block;
-							width: .15rem;
-							height: .15rem;
-							border-bottom: .01rem solid #999;
-							border-right: .01rem solid #999;
-							transform: rotate(45deg);
-							margin-left: .15rem;
-							position: relative;
-							top: -.08rem;
-						}
-					}
-				}
-				
-			}
-			
-		}
-	    .bz{
-			padding: .33rem;
-		    font-size: .3rem;
-			/deep/.van-field__value{
-				input{
-					text-align: right;
-				}
-				
-			}
-		}
-		.check{
-			font-size: .24rem;
-			
-			text-align: center;
-			
-			/deep/.van-checkbox{
-				justify-content: center;
-				.van-checkbox__label{
-					color: #999;
-				}
-			}
-		}
-		.btn-jj{
-			padding: .33rem;
-			button{
-				width: 100%;
-			}
-		}
-	}
-	.whrite_add{
-		width: 6.6rem;
-		padding: .4rem .2rem;
-		/deep/.van-field__value{
-			input{
-				text-align: right;
-			}
-			
-		}
-		/deep/.van-popup__close-icon--top-right{
-			top: 5px;
-			right: 10px;
-		}
-	}
+.content {
+  .jjinfo {
+    font-size: 0.24rem;
+    color: #999999;
+    padding: 0.33rem;
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem;
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
+          div {
+            //font-weight: bold;
+            max-width: 4.2rem;
+            p:nth-of-type(1) {
+              font-size: 0.24rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
+        .dzb {
+          text-align: center;
+          border-left: 0.01rem solid #ededed;
+          padding-left: 0.3rem;
+
+          img {
+            width: 0.39rem;
+            height: 0.42rem;
+            padding-top: 0.2rem;
+          }
+          p {
+            font-size: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+  .kdshow {
+    font-size: 0.3rem;
+    padding: 0.3rem 0px;
+    width: 6.84rem;
+    background: white;
+    border-radius: 0.05rem;
+    margin: 0rem auto 0.2rem;
+    /deep/.van-cell {
+      padding: 0px 0.3rem;
+      overflow: unset;
+      input {
+        text-align: right;
+        height: 0.5rem;
+        padding-right: 0.25rem;
+      }
+    }
+    /deep/.van-cell::after {
+      content: "";
+      display: inline-block;
+      border-right: 0.01rem solid #b0b0b0;
+      border-bottom: 0.01rem solid #b0b0b0;
+      transform: rotate(-45deg);
+      left: unset;
+      position: absolute;
+      right: 0.3rem;
+      bottom: 0.15rem;
+      width: 0.2rem;
+      height: 0.2rem;
+    }
+  }
+  .choose {
+    font-size: 0.3rem;
+    color: #999999;
+    font-weight: bold;
+    padding: 0rem 0.33rem;
+    > div {
+      background: white;
+
+      padding: 0.3rem 0.3rem;
+      border-radius: 0.05rem;
+      .type_wp {
+        display: flex;
+        justify-content: center;
+        div {
+          flex: 1;
+          text-align: center;
+          p:nth-of-type(2) {
+            color: #333;
+            margin-top: 0.2rem;
+            font-size: 0.36rem;
+            //position: relative;
+          }
+        }
+        div:nth-of-type(1) {
+          border-right: 0.01rem solid #ededed;
+          p:nth-of-type(2):after {
+            content: "";
+            display: inline-block;
+            width: 0.15rem;
+            height: 0.15rem;
+            border-bottom: 0.01rem solid #999;
+            border-right: 0.01rem solid #999;
+            transform: rotate(45deg);
+            margin-left: 0.15rem;
+            position: relative;
+            top: -0.08rem;
+          }
+        }
+      }
+    }
+  }
+  .bz {
+    padding: 0.33rem;
+    font-size: 0.3rem;
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
+  .check {
+    font-size: 0.24rem;
+
+    text-align: center;
+
+    /deep/.van-checkbox {
+      justify-content: center;
+      .van-checkbox__label {
+        color: #999;
+      }
+    }
+  }
+  .btn-jj {
+    padding: 0.33rem;
+    button {
+      width: 100%;
+    }
+  }
+}
+.whrite_add {
+  width: 6.6rem;
+  padding: 0.4rem 0.2rem;
+  /deep/.van-field__value {
+    input {
+      text-align: right;
+    }
+  }
+  /deep/.van-popup__close-icon--top-right {
+    top: 5px;
+    right: 10px;
+  }
+}
 </style>

src/pages_bak/multipleexpress.vue

@@ -115,7 +115,7 @@
 		</div>
 		<!-- 寄件 -->
 		<div class="btn-jj">
-			<van-button type="info" color="#00c4b8">立即寄件</van-button>
+			<van-button type="info" color="#0c2469">立即寄件</van-button>
 		</div>
 		<!-- 填写地址 -->
 		<van-popup round v-model="addshow" class="whrite_add" closeable closed="close">
@@ -127,7 +127,7 @@
 				  <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" />
 				  <van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"/>
 				  <div style="margin-top: 16px;">
-				    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
+				    <van-button color="#0c2469" block type="info" native-type="submit">确定</van-button>
 				  </div>
 				</van-form>
 			</div>
@@ -164,7 +164,7 @@
 				    </template>
 				  </van-field>
 				  <div style="margin-top: 16px;">
-				    <van-button color="#00c4b8" block type="info" @click="wpconform">确定</van-button>
+				    <van-button color="#0c2469" block type="info" @click="wpconform">确定</van-button>
 				  </div>
 			  </div>
 			  
@@ -304,7 +304,7 @@
 							display: inline-block;
 							width:.5rem;
 							height: .5rem;
-							background: #00c4b8;
+							background: #0c2469;
 							text-align: center;
 							line-height: .5rem;
 							color: white;
@@ -392,7 +392,7 @@
 							display: inline-block;
 							width:.5rem;
 							height: .5rem;
-							background: #00c4b8;
+							background: #0c2469;
 							text-align: center;
 							line-height: .5rem;
 							color: white;

src/pages_bak/myexpress.vue

@@ -1,179 +1,178 @@
 <template>
-	<div>
-		
-		<!-- table切换 -->
-		<div class="tab">
-			<div>
-				<p @click="tab(1)" :class="[index==1?'active':'']">寄件人</p>
-				<p @click="tab(2)" :class="[index==2?'active':'']" class="">收件人</p>
-			</div>		
-		</div>
-		<!-- 内容 -->
-		<div class="content">
-			<div v-if="index==1">
-				<div class="list">
-					<div class="list_top">
-						<p>派单号 213213213</p>
-						<p>2021-02-12 10:30</p>
-					</div>
-					<div class="list_bottom">
-						<div class="list_bottom_left">
-							<p>王守业</p>
-							<p>19898765765</p>
-						</div>
-						<div class="list_bottom_mid">
-							<img src="../assets/images/ad_icon1.png" alt="">
-							<span></span>
-							<p>已签收</p>
-						</div>
-						<div class="list_bottom_right">
-							<p>王守业</p>
-							<p>19898765765</p>
-						</div>
-					</div>
-				</div>
-				<div class="list">
-					<div class="list_top">
-						<p>派单号 213213213</p>
-						<p>2021-02-12 10:30</p>
-					</div>
-					<div class="list_bottom">
-						<div class="list_bottom_left">
-							<p>王守业</p>
-							<p>19898765765</p>
-						</div>
-						<div class="list_bottom_mid">
-							<img src="../assets/images/ad_icon1.png" alt="">
-							<span></span>
-							<p>已签收</p>
-						</div>
-						<div class="list_bottom_right">
-							<p>王守业</p>
-							<p>19898765765</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div v-if="index==2">
-				<div class="list">
-					<div class="list_top">
-						<p>派单号 213213213</p>
-						<p>2021-02-12 10:30</p>
-					</div>
-					<div class="list_bottom">
-						<div class="list_bottom_left">
-							<p>王守业</p>
-							<p>19898765765</p>
-						</div>
-						<div class="list_bottom_mid">
-							<img src="../assets/images/ad_icon1.png" alt="">
-							<span></span>
-							<p>已签收</p>
-						</div>
-						<div class="list_bottom_right">
-							<p>王守业</p>
-							<p>19898765765</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			
-		</div>
-	</div>
+  <div>
+    <!-- table切换 -->
+    <div class="tab">
+      <div>
+        <p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
+        <p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">
+          收件人
+        </p>
+      </div>
+    </div>
+    <!-- 内容 -->
+    <div class="content">
+      <div v-if="index == 1">
+        <div class="list">
+          <div class="list_top">
+            <p>派单号 213213213</p>
+            <p>2021-02-12 10:30</p>
+          </div>
+          <div class="list_bottom">
+            <div class="list_bottom_left">
+              <p>王守业</p>
+              <p>19898765765</p>
+            </div>
+            <div class="list_bottom_mid">
+              <img src="../assets/images/ad_icon1.png" alt="" />
+              <span></span>
+              <p>已签收</p>
+            </div>
+            <div class="list_bottom_right">
+              <p>王守业</p>
+              <p>19898765765</p>
+            </div>
+          </div>
+        </div>
+        <div class="list">
+          <div class="list_top">
+            <p>派单号 213213213</p>
+            <p>2021-02-12 10:30</p>
+          </div>
+          <div class="list_bottom">
+            <div class="list_bottom_left">
+              <p>王守业</p>
+              <p>19898765765</p>
+            </div>
+            <div class="list_bottom_mid">
+              <img src="../assets/images/ad_icon1.png" alt="" />
+              <span></span>
+              <p>已签收</p>
+            </div>
+            <div class="list_bottom_right">
+              <p>王守业</p>
+              <p>19898765765</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="index == 2">
+        <div class="list">
+          <div class="list_top">
+            <p>派单号 213213213</p>
+            <p>2021-02-12 10:30</p>
+          </div>
+          <div class="list_bottom">
+            <div class="list_bottom_left">
+              <p>王守业</p>
+              <p>19898765765</p>
+            </div>
+            <div class="list_bottom_mid">
+              <img src="../assets/images/ad_icon1.png" alt="" />
+              <span></span>
+              <p>已签收</p>
+            </div>
+            <div class="list_bottom_right">
+              <p>王守业</p>
+              <p>19898765765</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default{
-		data(){
-			return{
-				titlename:"我的快件",
-				index:1,
-			}
-		},
-		methods:{
-			tab(obj){
-				this.index=obj
-			}
-		}
-	}
+export default {
+  data() {
+    return {
+      titlename: "我的快件",
+      index: 1
+    };
+  },
+  methods: {
+    tab(obj) {
+      this.index = obj;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
-	.tab{
-		font-size: .36rem;
-		color: #8c8c8c;
-		background: white;
-		div{
-			display: flex;
-			text-align: center;			
-			border-radius: .05rem;
-			justify-content: center;
-			p{
-				padding: .2rem .3rem;
-				margin: 0px .4rem;				
-			}
-			p.active{
-				color: #00c4b8;
-				border-bottom: .02rem solid #00c4b8;
-			}
-		}		
-	}
-	.content{
-		padding: .33rem;
-		.list{			
-			background: white;
-			font-size: .3rem;
-			color: #333;
-			padding: .2rem .4rem;
-					margin-bottom: .2rem;
-			.list_top{
-				font-size: .24rem;
-				color: #999;
-				display: flex;
-				justify-content: space-between;
-				margin-bottom: .3rem;
-			}
-			
-			.list_bottom{
-				display: flex;
-				justify-content: space-between;
-				.list_bottom_left{
-					text-align: center;
-					padding-top: .3rem;
-					p:nth-of-type(2){
-						font-size: .24rem;
-						margin-top: .2rem;
-					}
-				}
-				.list_bottom_mid{
-					text-align: center;
-					img{
-						width: .6rem;
-						height: .6rem;
-					}
-					span{
-						display: block;
-						width: 2rem;
-						height: .05rem;
-						border-radius: 50%;
-						background: #00c4b8;
-						margin: .15rem 0rem;
-					}
-					p{
-						color: #f5693d;
-						font-size: .26rem;
-					}
-				}
-				.list_bottom_right{
-					padding-top: .3rem;
-					text-align: center;
-					p:nth-of-type(2){
-						font-size: .24rem;
-						margin-top: .2rem;
-					}
-				}
-			}
-		}
-	}
-	
+.tab {
+  font-size: 0.36rem;
+  color: #8c8c8c;
+  background: white;
+  div {
+    display: flex;
+    text-align: center;
+    border-radius: 0.05rem;
+    justify-content: center;
+    p {
+      padding: 0.2rem 0.3rem;
+      margin: 0px 0.4rem;
+    }
+    p.active {
+      color: #0c2469;
+      border-bottom: 0.02rem solid #0c2469;
+    }
+  }
+}
+.content {
+  padding: 0.33rem;
+  .list {
+    background: white;
+    font-size: 0.3rem;
+    color: #333;
+    padding: 0.2rem 0.4rem;
+    margin-bottom: 0.2rem;
+    .list_top {
+      font-size: 0.24rem;
+      color: #999;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 0.3rem;
+    }
+
+    .list_bottom {
+      display: flex;
+      justify-content: space-between;
+      .list_bottom_left {
+        text-align: center;
+        padding-top: 0.3rem;
+        p:nth-of-type(2) {
+          font-size: 0.24rem;
+          margin-top: 0.2rem;
+        }
+      }
+      .list_bottom_mid {
+        text-align: center;
+        img {
+          width: 0.6rem;
+          height: 0.6rem;
+        }
+        span {
+          display: block;
+          width: 2rem;
+          height: 0.05rem;
+          border-radius: 50%;
+          background: #0c2469;
+          margin: 0.15rem 0rem;
+        }
+        p {
+          color: #f5693d;
+          font-size: 0.26rem;
+        }
+      }
+      .list_bottom_right {
+        padding-top: 0.3rem;
+        text-align: center;
+        p:nth-of-type(2) {
+          font-size: 0.24rem;
+          margin-top: 0.2rem;
+        }
+      }
+    }
+  }
+}
 </style>

src/pages_bak/newaddress.vue

@@ -1,79 +1,102 @@
 <template>
-	<div class="content">
-		
-		<div class="form">
-			<van-form @submit="onSubmit">
-			  <van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名"/>
-			  <van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"/>
-			  <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" />
-			  <van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"/>
-			  <div style="margin-top: 16px;">
-			    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-			  </div>
-			</van-form>
-			<!-- 城市选择 -->
-			<van-popup v-model="areashow" position="bottom">
-			  <van-area
-			    :area-list="areaList"
-			    @confirm="onConfirm3"
-			    @cancel="areashow = false"
-			  />
-			</van-popup>
-		</div>
-	</div>
+  <div class="content">
+    <div class="form">
+      <van-form @submit="onSubmit">
+        <van-field
+          v-model="name"
+          name="姓名"
+          label="姓名"
+          placeholder="请输入姓名"
+        />
+        <van-field
+          v-model="phone"
+          maxlength="11"
+          type="number"
+          name="手机"
+          label="手机"
+          placeholder="请输入手机"
+        />
+        <van-field
+          readonly
+          clickable
+          name="area"
+          :value="city"
+          label="省市区"
+          placeholder="请选择省市区"
+          @click="areashow = true"
+        />
+        <van-field
+          v-model="address"
+          name="详细地址"
+          label="详细地址"
+          placeholder="请输入详细地址"
+        />
+        <div style="margin-top: 16px;">
+          <van-button color="#0c2469" block type="info" native-type="submit"
+            >确定</van-button
+          >
+        </div>
+      </van-form>
+      <!-- 城市选择 -->
+      <van-popup v-model="areashow" position="bottom">
+        <van-area
+          :area-list="areaList"
+          @confirm="onConfirm3"
+          @cancel="areashow = false"
+        />
+      </van-popup>
+    </div>
+  </div>
 </template>
 
 <script>
-	import areaList from "@/script/areas.js"
-	export default{
-		data(){
-			return{
-				titlename:"寄件人",
-				name:"",
-				phone:"",
-				city:"",
-				address:"",
-				areashow:false,
-			}
-		},
-		created:function(){
-			this.titlename=this.$route.query.type
-			if(this.titlename==1){
-				this.titlename="新建寄件人地址"
-			}
-			if(this.titlename==2){
-				this.titlename="新建收件人地址"
-			}
-		},
-		methods:{
-			onSubmit(){
-				
-			},
-			onConfirm3(e){//确定
-				this.city=e[0].name+' '+e[1].name+' '+e[2].name
-				this.areashow=false
-				console.log(e)
-			},
-		},
-		computed:{
-			areaList(){
-				return areaList
-			}
-		}
-	}
+import areaList from "@/script/areas.js";
+export default {
+  data() {
+    return {
+      titlename: "寄件人",
+      name: "",
+      phone: "",
+      city: "",
+      address: "",
+      areashow: false
+    };
+  },
+  created: function() {
+    this.titlename = this.$route.query.type;
+    if (this.titlename == 1) {
+      this.titlename = "新建寄件人地址";
+    }
+    if (this.titlename == 2) {
+      this.titlename = "新建收件人地址";
+    }
+  },
+  methods: {
+    onSubmit() {},
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
-	.content{
-		
-		.form{
-			padding: .3rem;
-			/deep/.van-field__value{
-				input{
-					text-align: right;
-				}
-				
-			}
-		}
-	}
+.content {
+  .form {
+    padding: 0.3rem;
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
+}
 </style>

src/pages_bak/personinfomation.vue

@@ -1,82 +1,160 @@
 <template>
-	<div>
-		
-		<!-- 表单 -->
-		<van-form @submit="onSubmit">
-		  <van-field v-model="Zname" class="m" name="中文名" label="中文名" placeholder="请填写中文名"/>
-		  <van-field v-model="Ename" type="" name="英文名" label="英文名" placeholder="请填写英文名"/>
-		  <van-field v-model="email" class="m" type="" name="邮箱地址" label="邮箱地址" placeholder="请填写邮箱地址"/>
-		  <van-field v-model="phone" class="m" type="number" name="手机号" label="手机号" placeholder="请填写手机号"/>
-		  <van-field v-model="comid" type="" name="工号" label="工号" placeholder="请填写工号"/>
-		  <van-field v-model="company" class="m" type="" name="公司" label="公司" placeholder="请填写公司"/>
-		  <van-field v-model="combm" class="m" type="" name="部门" label="部门" placeholder="请填写部门"/>
-		  <van-field v-model="price" class="m" type="" name="成本中心" label="成本中心" placeholder="请填写成本中心"/>
-		  <van-field v-model="zz" type="" name="幢/座" label="部门" placeholder="请填写部门"/>
-		  <van-field v-model="lc" type="" name="楼层" label="楼层" placeholder="请填写楼层"/>
-		  <van-field v-model="zw" type="" name="座位" label="座位" placeholder="请填写座位"/>
-		  <van-field v-model="bz" type="" name="备注" label="备注" placeholder="请填写备注"/>
-		  <div style="margin: 16px;">
-		    <van-button round block type="info" native-type="submit">保存</van-button>
-		  </div>
-		</van-form>
-	</div>
+  <div>
+    <!-- 表单 -->
+    <van-form @submit="onSubmit">
+      <van-field
+        v-model="Zname"
+        class="m"
+        name="中文名"
+        label="中文名"
+        placeholder="请填写中文名"
+      />
+      <van-field
+        v-model="Ename"
+        type=""
+        name="英文名"
+        label="英文名"
+        placeholder="请填写英文名"
+      />
+      <van-field
+        v-model="email"
+        class="m"
+        type=""
+        name="邮箱地址"
+        label="邮箱地址"
+        placeholder="请填写邮箱地址"
+      />
+      <van-field
+        v-model="phone"
+        class="m"
+        type="number"
+        name="手机号"
+        label="手机号"
+        placeholder="请填写手机号"
+      />
+      <van-field
+        v-model="comid"
+        type=""
+        name="工号"
+        label="工号"
+        placeholder="请填写工号"
+      />
+      <van-field
+        v-model="company"
+        class="m"
+        type=""
+        name="公司"
+        label="公司"
+        placeholder="请填写公司"
+      />
+      <van-field
+        v-model="combm"
+        class="m"
+        type=""
+        name="部门"
+        label="部门"
+        placeholder="请填写部门"
+      />
+      <van-field
+        v-model="price"
+        class="m"
+        type=""
+        name="成本中心"
+        label="成本中心"
+        placeholder="请填写成本中心"
+      />
+      <van-field
+        v-model="zz"
+        type=""
+        name="幢/座"
+        label="部门"
+        placeholder="请填写部门"
+      />
+      <van-field
+        v-model="lc"
+        type=""
+        name="楼层"
+        label="楼层"
+        placeholder="请填写楼层"
+      />
+      <van-field
+        v-model="zw"
+        type=""
+        name="座位"
+        label="座位"
+        placeholder="请填写座位"
+      />
+      <van-field
+        v-model="bz"
+        type=""
+        name="备注"
+        label="备注"
+        placeholder="请填写备注"
+      />
+      <div style="margin: 16px;">
+        <van-button round block type="info" native-type="submit"
+          >保存</van-button
+        >
+      </div>
+    </van-form>
+  </div>
 </template>
 
 <script>
-	import { Form,Toast } from 'vant'
-	export default{
-		data(){
-			return {
-				titlename:"个人信息",
-				Zname:"",
-				email:"",
-				Ename:"",
-				phone:"",
-				comid:"",
-				company:"",
-				combm:"",
-				price:"",
-				zz:"",
-				lc:"",
-				zw:"",
-				bz:""
-			}		
-		},
-		methods:{
-			onSubmit(){}
-		}
-	}
+import { Form, Toast } from "vant";
+export default {
+  data() {
+    return {
+      titlename: "个人信息",
+      Zname: "",
+      email: "",
+      Ename: "",
+      phone: "",
+      comid: "",
+      company: "",
+      combm: "",
+      price: "",
+      zz: "",
+      lc: "",
+      zw: "",
+      bz: ""
+    };
+  },
+  methods: {
+    onSubmit() {}
+  }
+};
 </script>
 
 <style lang="less" scoped>
-	/deep/.van-form{
-	  .van-button--info{
-	    background-color: #00c4b8;
-	    border: 1px solid #00c4b8;
-	    border-radius: 5px;
-	  }
-	  .m .van-field__label::before{
-		  content:"*";
-		  color: red;
-	  }
-	  .van-cell{
-	    font-size: .26rem;
-	    }
-	  .textarea{
-	    font-size: .26rem;
-	    padding: 10px 16px;
-	    color: #646566;
-	    textarea{
-	      width: 98%;
-	      height: 150px;
-	      border-color: #e5e5e5;
-	      color: #999999;
-	      margin-top: 16px;
-	      padding: 10px 1%;
-	    }
-	  }
-	}
-	/deep/.van-field__control{
-	  text-align: right;
-	}
+/deep/.van-form {
+  .van-button--info {
+    background-color: #0c2469;
+    border: 1px solid #0c2469;
+    border-radius: 5px;
+  }
+  .m .van-field__label::before {
+    content: "*";
+    color: red;
+  }
+  .van-cell {
+    font-size: 0.26rem;
+  }
+  .textarea {
+    font-size: 0.26rem;
+    padding: 10px 16px;
+    color: #646566;
+    textarea {
+      width: 98%;
+      height: 150px;
+      border-color: #e5e5e5;
+      color: #999999;
+      margin-top: 16px;
+      padding: 10px 1%;
+    }
+  }
+}
+/deep/.van-field__control {
+  text-align: right;
+}
 </style>

src/pages_bak/search.vue

@@ -1,334 +1,333 @@
 <template>
-	<div>
-		<div class="content">
-			<!-- tab切换 -->
-			<div class="tab">
-				<div>
-					<p @click="tab(1)" :class="[index==1?'active':'']">寄件</p>
-					<p @click="tab(2)" :class="[index==2?'active':'']" class="">收件</p>
-				</div>		
-			</div>
-			<!-- 寄件 -->
-			<div class="jjlist" v-if="index==1">
-				<div class="listinfo">
-					<div class="list_top">
-						<div class="list_top_left">
-							<img src="../assets/images/ad_icon1.png" alt="">
-							<div>
-								<p>派单号  3233232</p>
-								<p>顺丰 432432432</p>
-								<p><span>收</span>收件人21321321</p>
-								<p>2021-09-12 10:31</p>
-							</div>
-						</div>
-						<p>已揽件</p>
-					</div>
-					<div class="list_bot">
-						<p>拒收</p>
-						<p>代收</p>
-						<p>延迟</p>
-						<p>签收</p>
-					</div>
-				</div>
-				<div class="listinfo">
-					<div class="list_top">
-						<div class="list_top_left">
-							<img src="../assets/images/ad_icon1.png" alt="">
-							<div>
-								<p>派单号  3233232</p>
-								<p>顺丰 432432432</p>
-								<p><span>收</span>收件人21321321</p>
-								<p>2021-09-12 10:31</p>
-							</div>
-						</div>
-						<p>已揽件</p>
-					</div>
-					<div v-show="show" class="list_bot">
-						<p>拒收</p>
-						<p>代收</p>
-						<p>延迟</p>
-						<p>签收</p>
-					</div>
-					<div class="fast">
-						<p>同城急送</p>
-					</div>
-				</div>
-			</div>
-			
-			<!-- 收件 -->
-			<div class="sjlist" v-if="index==2">
-				<div class="listinfo">
-					<div class="list_top">
-						<div class="list_top_left">
-							<img src="../assets/images/ad_icon1.png" alt="">
-							<div>
-								<p>派单号  32332321</p>
-								<p>顺丰 432432432</p>
-								<p><span>收</span>收件人21321321</p>
-								<p>2021-09-12 10:31</p>
-							</div>
-						</div>
-						<p>配送中</p>
-					</div>
-					<div class="list_bot">
-						<p>拒收</p>
-						<p>代收</p>
-						<p>延迟</p>
-						<p>签收</p>
-					</div>
-				</div>
-				<div class="listinfo">
-					<div class="list_top">
-						<div class="list_top_left">
-							<img src="../assets/images/ad_icon1.png" alt="">
-							<div>
-								<p>派单号  3233232</p>
-								<p>顺丰 432432432</p>
-								<p><span>收</span>收件人21321321</p>
-								<p>2021-09-12 10:31</p>
-							</div>
-						</div>
-						<p>配送中</p>
-					</div>
-					<div class="list_bot">
-						<p>拒收</p>
-						<p>代收</p>
-						<p>延迟</p>
-						<p>签收</p>
-					</div>
-				</div>
-			</div>
-			
-		</div>
-		<!-- 底部 -->
-		<tabbar></tabbar>
-	</div>
+  <div>
+    <div class="content">
+      <!-- tab切换 -->
+      <div class="tab">
+        <div>
+          <p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件</p>
+          <p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">
+            收件
+          </p>
+        </div>
+      </div>
+      <!-- 寄件 -->
+      <div class="jjlist" v-if="index == 1">
+        <div class="listinfo">
+          <div class="list_top">
+            <div class="list_top_left">
+              <img src="../assets/images/ad_icon1.png" alt="" />
+              <div>
+                <p>派单号 3233232</p>
+                <p>顺丰 432432432</p>
+                <p><span>收</span>收件人21321321</p>
+                <p>2021-09-12 10:31</p>
+              </div>
+            </div>
+            <p>已揽件</p>
+          </div>
+          <div class="list_bot">
+            <p>拒收</p>
+            <p>代收</p>
+            <p>延迟</p>
+            <p>签收</p>
+          </div>
+        </div>
+        <div class="listinfo">
+          <div class="list_top">
+            <div class="list_top_left">
+              <img src="../assets/images/ad_icon1.png" alt="" />
+              <div>
+                <p>派单号 3233232</p>
+                <p>顺丰 432432432</p>
+                <p><span>收</span>收件人21321321</p>
+                <p>2021-09-12 10:31</p>
+              </div>
+            </div>
+            <p>已揽件</p>
+          </div>
+          <div v-show="show" class="list_bot">
+            <p>拒收</p>
+            <p>代收</p>
+            <p>延迟</p>
+            <p>签收</p>
+          </div>
+          <div class="fast">
+            <p>同城急送</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 收件 -->
+      <div class="sjlist" v-if="index == 2">
+        <div class="listinfo">
+          <div class="list_top">
+            <div class="list_top_left">
+              <img src="../assets/images/ad_icon1.png" alt="" />
+              <div>
+                <p>派单号 32332321</p>
+                <p>顺丰 432432432</p>
+                <p><span>收</span>收件人21321321</p>
+                <p>2021-09-12 10:31</p>
+              </div>
+            </div>
+            <p>配送中</p>
+          </div>
+          <div class="list_bot">
+            <p>拒收</p>
+            <p>代收</p>
+            <p>延迟</p>
+            <p>签收</p>
+          </div>
+        </div>
+        <div class="listinfo">
+          <div class="list_top">
+            <div class="list_top_left">
+              <img src="../assets/images/ad_icon1.png" alt="" />
+              <div>
+                <p>派单号 3233232</p>
+                <p>顺丰 432432432</p>
+                <p><span>收</span>收件人21321321</p>
+                <p>2021-09-12 10:31</p>
+              </div>
+            </div>
+            <p>配送中</p>
+          </div>
+          <div class="list_bot">
+            <p>拒收</p>
+            <p>代收</p>
+            <p>延迟</p>
+            <p>签收</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 底部 -->
+    <tabbar></tabbar>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-      return {
-		index:1,
-		show:false
-      };
-    },
-    created:function(){
-      console.log(this.$store.state.openId)
-    },
-    methods:{
-      tab(obj){
-      	this.index=obj
-      },
+  data() {
+    return {
+      index: 1,
+      show: false
+    };
+  },
+  created: function() {
+    console.log(this.$store.state.openId);
+  },
+  methods: {
+    tab(obj) {
+      this.index = obj;
     }
-  };
+  }
+};
 </script>
 
 <style lang="less" scoped>
-  .content{
-	  padding: 0rem .33rem 1.2rem;
-	  .tab{
-	  	font-size: .36rem;
-	  	color: #00c4b8;
-	  	padding: .2rem .0rem;			
-	  	div{
-	  		display: flex;
-	  		border: .01rem solid #00c4b8;
-	  		text-align: center;			
-	  		border-radius: .05rem;
-	  		p{
-	  			flex: 1;
-	  			padding: .1rem 0rem;
-	  							
-	  		}
-	  		p.active{
-	  			background: #00c4b8;
-	  			color: white;
-	  		}
-	  	}
-	  	
-	  }
-	  .jjlist{
-		  font-size: .3rem;
-		  color: #999999;
-		  .listinfo{
-			  background: white;
-			  padding: .33rem .33rem .2rem;
-			  border-radius: .05rem;
-			  margin-bottom: .2rem;
-			  position: relative;
-			  .list_top{
-				  display: flex;
-				  justify-content: space-between;
-				  .list_top_left{				  			  
-					  img{
-						  display: inline-block;
-						  width: .9rem;
-						  height: .9rem;
-						  position: relative;
-						  top:-.3rem;
-					  }
-					  div{
-						 width: 4rem;	
-						 margin-left: .2rem;
-						 display: inline-block;
-						 line-height: 150%;
-						p:nth-of-type(1){
-							font-size: .3rem;
-							font-weight: bold;
-							color: #333;
-						}
-                        p:nth-of-type(3){
-							font-size: .24rem;
-							color: #333;
-							span{
-								width: .37rem;
-								height: .37rem;
-								color: white;
-								border-radius: 50%;
-								background: #cc9a09;
-								display: inline-block;
-								text-align: center;
-								line-height: .37rem;
-								margin-right: .1rem;
-							}
-						}
-                        p:nth-of-type(4){
-							font-size: .2rem;
-						}												  
-					  }
-				  }
-				  >p{
-					  font-size: .24rem;
-					  color: #f5693d;
-					  font-weight: bold;
-				  }
-			  }
-			  .list_bot{
-				  text-align: right;
-				  border-top: .01rem solid #ededed;
-				  padding-top: .2rem;
-				  p{
-					  display: inline-block;
-					  font-size: .24rem;
-					  padding: .16rem .4rem;
-					  border-radius: .05rem;
-				  }
-				  p:nth-of-type(1){
-					  border:.01rem solid #263fbf;
-					  color: #263fbf;
-				  }
-				  p:nth-of-type(2){
-				  	border:.01rem solid #408cc7;
-				  	color: #408cc7;				  
-				  }
-				  p:nth-of-type(3){
-				  	border:.01rem solid #d5a43c;
-				  	color: #d5a43c;				  
-				  }
-				  p:nth-of-type(4){
-				  	border:.01rem solid #e24444;
-				  	color: #e24444;				  
-				  }
-			  }
-			  .fast{
-				  background: url(../assets/images/status.png) no-repeat center;
-				  background-size: 100% 100%;
-				  color: white;
-				  position: absolute;
-				  bottom: 0px;
-				  right: 0px;
-				  width: 1rem;
-				  height: .4rem;
-				  text-align: center;
-				  line-height: .4rem;
-				  font-size: .2rem;
-			  }
-		  }
-	  }
-	  .sjlist{
-	  		  font-size: .3rem;
-	  		  color: #999999;
-	  		  .listinfo{
-	  			  background: white;
-	  			  padding: .33rem .33rem .2rem;
-	  			  border-radius: .05rem;
-	  			  margin-bottom: .2rem;
-	  			  .list_top{
-	  				  display: flex;
-	  				  justify-content: space-between;
-	  				  .list_top_left{				  			  
-	  					  img{
-	  						  display: inline-block;
-	  						  width: .9rem;
-	  						  height: .9rem;
-	  						  position: relative;
-	  						  top:-.3rem;
-	  					  }
-	  					  div{
-	  						 width: 4rem;	
-	  						 margin-left: .2rem;
-	  						 display: inline-block;
-	  						 line-height: 150%;
-	  						p:nth-of-type(1){
-	  							font-size: .3rem;
-	  							font-weight: bold;
-	  							color: #333;
-	  						}
-	                    p:nth-of-type(3){
-	  							font-size: .24rem;
-	  							color: #333;
-	  							span{
-	  								width: .37rem;
-	  								height: .37rem;
-	  								color: white;
-	  								border-radius: 50%;
-	  								background: #cc9a09;
-	  								display: inline-block;
-	  								text-align: center;
-	  								line-height: .37rem;
-	  								margin-right: .1rem;
-	  							}
-	  						}
-	                    p:nth-of-type(4){
-	  							font-size: .2rem;
-	  						}												  
-	  					  }
-	  				  }
-	  				  >p{
-	  					  font-size: .24rem;
-	  					  color: #f5693d;
-	  					  font-weight: bold;
-	  				  }
-	  			  }
-	  			  .list_bot{
-	  				  text-align: right;
-	  				  border-top: .01rem solid #ededed;
-	  				  padding-top: .2rem;
-	  				  p{
-	  					  display: inline-block;
-	  					  font-size: .24rem;
-	  					  padding: .16rem .4rem;
-	  					  border-radius: .05rem;
-	  				  }
-	  				  p:nth-of-type(1){
-	  					  border:.01rem solid #263fbf;
-	  					  color: #263fbf;
-	  				  }
-	  				  p:nth-of-type(2){
-	  				  	border:.01rem solid #408cc7;
-	  				  	color: #408cc7;				  
-	  				  }
-	  				  p:nth-of-type(3){
-	  				  	border:.01rem solid #d5a43c;
-	  				  	color: #d5a43c;				  
-	  				  }
-	  				  p:nth-of-type(4){
-	  				  	border:.01rem solid #e24444;
-	  				  	color: #e24444;				  
-	  				  }
-	  			  }
-	  		  }
-	  }
+.content {
+  padding: 0rem 0.33rem 1.2rem;
+  .tab {
+    font-size: 0.36rem;
+    color: #0c2469;
+    padding: 0.2rem 0rem;
+    div {
+      display: flex;
+      border: 0.01rem solid #0c2469;
+      text-align: center;
+      border-radius: 0.05rem;
+      p {
+        flex: 1;
+        padding: 0.1rem 0rem;
+      }
+      p.active {
+        background: #0c2469;
+        color: white;
+      }
+    }
+  }
+  .jjlist {
+    font-size: 0.3rem;
+    color: #999999;
+    .listinfo {
+      background: white;
+      padding: 0.33rem 0.33rem 0.2rem;
+      border-radius: 0.05rem;
+      margin-bottom: 0.2rem;
+      position: relative;
+      .list_top {
+        display: flex;
+        justify-content: space-between;
+        .list_top_left {
+          img {
+            display: inline-block;
+            width: 0.9rem;
+            height: 0.9rem;
+            position: relative;
+            top: -0.3rem;
+          }
+          div {
+            width: 4rem;
+            margin-left: 0.2rem;
+            display: inline-block;
+            line-height: 150%;
+            p:nth-of-type(1) {
+              font-size: 0.3rem;
+              font-weight: bold;
+              color: #333;
+            }
+            p:nth-of-type(3) {
+              font-size: 0.24rem;
+              color: #333;
+              span {
+                width: 0.37rem;
+                height: 0.37rem;
+                color: white;
+                border-radius: 50%;
+                background: #cc9a09;
+                display: inline-block;
+                text-align: center;
+                line-height: 0.37rem;
+                margin-right: 0.1rem;
+              }
+            }
+            p:nth-of-type(4) {
+              font-size: 0.2rem;
+            }
+          }
+        }
+        > p {
+          font-size: 0.24rem;
+          color: #f5693d;
+          font-weight: bold;
+        }
+      }
+      .list_bot {
+        text-align: right;
+        border-top: 0.01rem solid #ededed;
+        padding-top: 0.2rem;
+        p {
+          display: inline-block;
+          font-size: 0.24rem;
+          padding: 0.16rem 0.4rem;
+          border-radius: 0.05rem;
+        }
+        p:nth-of-type(1) {
+          border: 0.01rem solid #263fbf;
+          color: #263fbf;
+        }
+        p:nth-of-type(2) {
+          border: 0.01rem solid #408cc7;
+          color: #408cc7;
+        }
+        p:nth-of-type(3) {
+          border: 0.01rem solid #d5a43c;
+          color: #d5a43c;
+        }
+        p:nth-of-type(4) {
+          border: 0.01rem solid #e24444;
+          color: #e24444;
+        }
+      }
+      .fast {
+        background: url(../assets/images/status.png) no-repeat center;
+        background-size: 100% 100%;
+        color: white;
+        position: absolute;
+        bottom: 0px;
+        right: 0px;
+        width: 1rem;
+        height: 0.4rem;
+        text-align: center;
+        line-height: 0.4rem;
+        font-size: 0.2rem;
+      }
+    }
+  }
+  .sjlist {
+    font-size: 0.3rem;
+    color: #999999;
+    .listinfo {
+      background: white;
+      padding: 0.33rem 0.33rem 0.2rem;
+      border-radius: 0.05rem;
+      margin-bottom: 0.2rem;
+      .list_top {
+        display: flex;
+        justify-content: space-between;
+        .list_top_left {
+          img {
+            display: inline-block;
+            width: 0.9rem;
+            height: 0.9rem;
+            position: relative;
+            top: -0.3rem;
+          }
+          div {
+            width: 4rem;
+            margin-left: 0.2rem;
+            display: inline-block;
+            line-height: 150%;
+            p:nth-of-type(1) {
+              font-size: 0.3rem;
+              font-weight: bold;
+              color: #333;
+            }
+            p:nth-of-type(3) {
+              font-size: 0.24rem;
+              color: #333;
+              span {
+                width: 0.37rem;
+                height: 0.37rem;
+                color: white;
+                border-radius: 50%;
+                background: #cc9a09;
+                display: inline-block;
+                text-align: center;
+                line-height: 0.37rem;
+                margin-right: 0.1rem;
+              }
+            }
+            p:nth-of-type(4) {
+              font-size: 0.2rem;
+            }
+          }
+        }
+        > p {
+          font-size: 0.24rem;
+          color: #f5693d;
+          font-weight: bold;
+        }
+      }
+      .list_bot {
+        text-align: right;
+        border-top: 0.01rem solid #ededed;
+        padding-top: 0.2rem;
+        p {
+          display: inline-block;
+          font-size: 0.24rem;
+          padding: 0.16rem 0.4rem;
+          border-radius: 0.05rem;
+        }
+        p:nth-of-type(1) {
+          border: 0.01rem solid #263fbf;
+          color: #263fbf;
+        }
+        p:nth-of-type(2) {
+          border: 0.01rem solid #408cc7;
+          color: #408cc7;
+        }
+        p:nth-of-type(3) {
+          border: 0.01rem solid #d5a43c;
+          color: #d5a43c;
+        }
+        p:nth-of-type(4) {
+          border: 0.01rem solid #e24444;
+          color: #e24444;
+        }
+      }
+    }
   }
+}
 </style>

src/pages_bak/time.vue

@@ -1,235 +1,255 @@
 <template>
-	<div class="bg" style="">
-		
-		<div class="content">
-			<div  class="add">
-				<van-field v-model="jjadd" type="text" name="寄" label="寄" placeholder="选择寄件城市" />
-				<van-field v-model="sjadd" class="shou" type="text" name="收" label="收" placeholder="选择收件城市" />
-			</div>
-			<div class="kdshow">
-				<van-field readonly clickable name="picker" :value="value" label="快递公司" placeholder="请选择快递公司" @click="showPicker = true" />
-				<van-popup v-model="showPicker" position="bottom">
-				  <van-picker
-				    show-toolbar
-				    :columns="columns"
-				    @confirm="onConfirm"
-				    @cancel="showPicker = false"
-				  />
-				</van-popup>
-			</div>
-			<div class="steps">
-				<van-field name="stepper" label="物品重量(KG)">
-				  <template #input>
-				    <van-stepper v-model="stepper" />
-				  </template>
-				</van-field>
-			</div>
-			<div class="price">
-				<p>12<span>元</span></p>
-				<p>运费预估</p>
-			</div>
-			<p style="font-size: .24rem;color: #999;margin: .2rem 0rem 1rem;">此价格为官方指导价，不包含增值服务费</p>
-			<div class="btn">
-				<van-button color="#00c4b8">立即寄件</van-button>
-			</div>
-		</div>
-	</div>
+  <div class="bg" style="">
+    <div class="content">
+      <div class="add">
+        <van-field
+          v-model="jjadd"
+          type="text"
+          name="寄"
+          label="寄"
+          placeholder="选择寄件城市"
+        />
+        <van-field
+          v-model="sjadd"
+          class="shou"
+          type="text"
+          name="收"
+          label="收"
+          placeholder="选择收件城市"
+        />
+      </div>
+      <div class="kdshow">
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="value"
+          label="快递公司"
+          placeholder="请选择快递公司"
+          @click="showPicker = true"
+        />
+        <van-popup v-model="showPicker" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="columns"
+            @confirm="onConfirm"
+            @cancel="showPicker = false"
+          />
+        </van-popup>
+      </div>
+      <div class="steps">
+        <van-field name="stepper" label="物品重量(KG)">
+          <template #input>
+            <van-stepper v-model="stepper" />
+          </template>
+        </van-field>
+      </div>
+      <div class="price">
+        <p>12<span>元</span></p>
+        <p>运费预估</p>
+      </div>
+      <p style="font-size: .24rem;color: #999;margin: .2rem 0rem 1rem;">
+        此价格为官方指导价，不包含增值服务费
+      </p>
+      <div class="btn">
+        <van-button color="#0c2469">立即寄件</van-button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				titlename: "运费时效",
-				jjadd:"",
-				sjadd:"",
-				stepper: 1,
-				showPicker:false,
-				value:"",
-				columns:["顺丰快递","中通快递","圆通快递"],
-			}
-		},
-		methods:{
-			// 选择快递公司
-			onConfirm(e){
-				this.value=e
-				this.showPicker=false
-			}
-		}
-	}
+export default {
+  data() {
+    return {
+      titlename: "运费时效",
+      jjadd: "",
+      sjadd: "",
+      stepper: 1,
+      showPicker: false,
+      value: "",
+      columns: ["顺丰快递", "中通快递", "圆通快递"]
+    };
+  },
+  methods: {
+    // 选择快递公司
+    onConfirm(e) {
+      this.value = e;
+      this.showPicker = false;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
-	.bg{
-		background: url(../assets/images/bg.png) no-repeat bottom;
-		background-size: 100%;
-		min-height: 100vh;
-	}
-	.content {
-		padding: .2rem .33rem;
-		font-size: .3rem;
-		border-radius: .05rem;
-		.add{
-			/deep/.shou{
-				div:nth-of-type(1){
-					span{
-						background:#fa9c22 !important
-					}
-				}
-			}
-			>div:nth-of-type(1){
-				border-bottom: .01rem solid #ededed;
-			}
-			>div:nth-of-type(2){
-				
-			}
-			/deep/.van-field{
-				padding: .3rem 16px;
-				.van-field__label{
-					width: auto;
-					span{
-						width:.5rem;
-						height: .5rem;
-						border-radius: 50%;
-						color: white;
-						display: inline-block;
-						text-align: center;
-						line-height: .5rem;
-					}
-				}
-				.van-field__value{
-					.van-field__body{
-						input{
-							height: .5rem;
-						}
-					}
-				}
-				div:nth-of-type(1){
-					span{
-						background:#00c4b8
-					}
-				}
-				
-			}
-			/deep/.van-field:after{
-				content: "";
-				display: inline-block;
-				border-right: .01rem solid #b0b0b0;
-				border-bottom: .01rem solid #b0b0b0;
-				transform: rotate(-45deg);
-				left: unset;
-				position: absolute;
-				right: 16px;
-				bottom: .45rem;
-				width: .2rem;
-				height: .2rem;
-			}
-		}
-	    .steps{
-			margin-top: .2rem;
-			border-radius: .05rem;
-			padding: .3rem 0rem;
-			background: white;
-			/deep/.van-field{
-				display: block;
-				overflow: unset;
-				padding: 0rem 16px;
-				.van-field__label{
-					width: 100%;
-					text-align: center;
-					color: #999999;
-					font-size: .3rem;
-					font-weight: bold;
-				}
-				.van-field__value{
-					margin-top: .4rem;
-					.van-field__body{
-						.van-field__control--custom{
-							.van-stepper{
-								margin: 0 auto;
-								.van-stepper__minus{
-									border-radius: 50%;
-									color: #006094;
-									background: white;
-									border: .01rem solid #dcdcdc;
-									width: .38rem;
-									height: .38rem;
-								}
-								input{
-									color: #172880;
-									font-size: .54rem;
-									background: white;
-									width: 2rem;
-								}
-								.van-stepper__plus{
-									border-radius: 50%;
-									color: #006094;
-									background: white;
-									border: .01rem solid #dcdcdc;
-									width: .38rem;
-									height: .38rem;
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-	    .price{
-			font-size: .3rem;
-			padding: .3rem 16px;
-			background: white;
-			border-radius: .05rem;
-			margin-top: .2rem;
-			text-align: center;
-			p:nth-of-type(1){
-				color: #172880;
-				font-size: .54rem;
-				margin-bottom: .2rem;
-				span{
-					font-size: .3rem;
-					color: #999
-				}
-			}
-			p:nth-of-type(2){
-				color: #999999;
-				font-size: .24rem;
-			}
-		}
-		.btn{
-			margin-top: .2rem;
-			/deep/.van-button{				
-				width:100%
-			}
-		}
-		.kdshow{
-			font-size: .3rem;
-			padding: .3rem 16px;
-			background: white;
-			border-radius: .05rem;
-			margin-top: .2rem;
-			/deep/.van-cell{
-				padding: 0px;
-				overflow: unset;
-				input{
-					text-align: right;
-					height: .5rem;
-					padding-right: .25rem;
-				}
-			}
-			/deep/.van-cell::after{
-				content: "";
-				display: inline-block;
-				border-right: .01rem solid #b0b0b0;
-				border-bottom: .01rem solid #b0b0b0;
-				transform: rotate(-45deg);
-				left: unset;
-				position: absolute;
-				right: 0px;
-				bottom: .15rem;
-				width: .2rem;
-				height: .2rem;
-			}
-		}
-	}
+.bg {
+  background: url(../assets/images/bg.png) no-repeat bottom;
+  background-size: 100%;
+  min-height: 100vh;
+}
+.content {
+  padding: 0.2rem 0.33rem;
+  font-size: 0.3rem;
+  border-radius: 0.05rem;
+  .add {
+    /deep/.shou {
+      div:nth-of-type(1) {
+        span {
+          background: #fa9c22 !important;
+        }
+      }
+    }
+    > div:nth-of-type(1) {
+      border-bottom: 0.01rem solid #ededed;
+    }
+    > div:nth-of-type(2) {
+    }
+    /deep/.van-field {
+      padding: 0.3rem 16px;
+      .van-field__label {
+        width: auto;
+        span {
+          width: 0.5rem;
+          height: 0.5rem;
+          border-radius: 50%;
+          color: white;
+          display: inline-block;
+          text-align: center;
+          line-height: 0.5rem;
+        }
+      }
+      .van-field__value {
+        .van-field__body {
+          input {
+            height: 0.5rem;
+          }
+        }
+      }
+      div:nth-of-type(1) {
+        span {
+          background: #0c2469;
+        }
+      }
+    }
+    /deep/.van-field:after {
+      content: "";
+      display: inline-block;
+      border-right: 0.01rem solid #b0b0b0;
+      border-bottom: 0.01rem solid #b0b0b0;
+      transform: rotate(-45deg);
+      left: unset;
+      position: absolute;
+      right: 16px;
+      bottom: 0.45rem;
+      width: 0.2rem;
+      height: 0.2rem;
+    }
+  }
+  .steps {
+    margin-top: 0.2rem;
+    border-radius: 0.05rem;
+    padding: 0.3rem 0rem;
+    background: white;
+    /deep/.van-field {
+      display: block;
+      overflow: unset;
+      padding: 0rem 16px;
+      .van-field__label {
+        width: 100%;
+        text-align: center;
+        color: #999999;
+        font-size: 0.3rem;
+        font-weight: bold;
+      }
+      .van-field__value {
+        margin-top: 0.4rem;
+        .van-field__body {
+          .van-field__control--custom {
+            .van-stepper {
+              margin: 0 auto;
+              .van-stepper__minus {
+                border-radius: 50%;
+                color: #006094;
+                background: white;
+                border: 0.01rem solid #dcdcdc;
+                width: 0.38rem;
+                height: 0.38rem;
+              }
+              input {
+                color: #172880;
+                font-size: 0.54rem;
+                background: white;
+                width: 2rem;
+              }
+              .van-stepper__plus {
+                border-radius: 50%;
+                color: #006094;
+                background: white;
+                border: 0.01rem solid #dcdcdc;
+                width: 0.38rem;
+                height: 0.38rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .price {
+    font-size: 0.3rem;
+    padding: 0.3rem 16px;
+    background: white;
+    border-radius: 0.05rem;
+    margin-top: 0.2rem;
+    text-align: center;
+    p:nth-of-type(1) {
+      color: #172880;
+      font-size: 0.54rem;
+      margin-bottom: 0.2rem;
+      span {
+        font-size: 0.3rem;
+        color: #999;
+      }
+    }
+    p:nth-of-type(2) {
+      color: #999999;
+      font-size: 0.24rem;
+    }
+  }
+  .btn {
+    margin-top: 0.2rem;
+    /deep/.van-button {
+      width: 100%;
+    }
+  }
+  .kdshow {
+    font-size: 0.3rem;
+    padding: 0.3rem 16px;
+    background: white;
+    border-radius: 0.05rem;
+    margin-top: 0.2rem;
+    /deep/.van-cell {
+      padding: 0px;
+      overflow: unset;
+      input {
+        text-align: right;
+        height: 0.5rem;
+        padding-right: 0.25rem;
+      }
+    }
+    /deep/.van-cell::after {
+      content: "";
+      display: inline-block;
+      border-right: 0.01rem solid #b0b0b0;
+      border-bottom: 0.01rem solid #b0b0b0;
+      transform: rotate(-45deg);
+      left: unset;
+      position: absolute;
+      right: 0px;
+      bottom: 0.15rem;
+      width: 0.2rem;
+      height: 0.2rem;
+    }
+  }
+}
 </style>