updated

package-lock.json

@@ -9735,7 +9735,7 @@
     },
     "node_modules/js-cookie": {
       "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz",
       "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
       "engines": {
         "node": ">=14"
@@ -24743,7 +24743,7 @@
     },
     "js-cookie": {
       "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz",
       "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="
     },
     "js-message": {

src/components/goods-card.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="goods-card">
+    <div class="goods-card" @click="$emit('handlerEmit', storeInfo)">
         <van-image :src="storeInfo.image"></van-image>
-        <div>{{ storeInfo.title }}</div>
+        <div class="info">{{ storeInfo.title || 'Prostrolane Nature-B珀洛丽肽焕活修颜精华液洛丽肽焕活修颜精华液洛丽肽焕活修颜精华液洛丽肽焕活修颜精华液洛丽肽焕活修颜精华液' }}</div>
     </div>
 </template>
 
@@ -16,6 +16,26 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.goods-card {
+  padding: 4.3vw 0;
+  border-bottom: 1px solid #E1E1E1;
+  background: #fff;
+  display: flex;
+  justify-content: space-between;
+  ::v-deep .van-image {
+    width: 21.6vw;
+    height: 21.6vw;
+    border-radius: 1.1vw;
+  }
+  .info {
+    line-height: 6.4vw;
+    margin-left: 3.2vw;
+    height: 12.8vw;
+    width: 67.3vw;
+    color: #333333;
+    font-size: 3.7vw;
+    @include webkit-line-clamp(2)
+  }
+}
 </style>

src/components/goods-radio.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="goods-radio">
+    <van-radio-group v-model="radio">
+      <div class="select-goods" @click="radio = 0" v-for="(item, index) in goodsList" :key="index">
+        <div class="goodsInfo">
+          <div class="img">
+            <van-image src=""></van-image>
+          </div>
+          <div class="content">
+            <div class="goods_title">科医人医疗激光</div>
+            <div class="name">
+              供应商：<span>医科人</span>
+            </div>
+            <div class="price">￥6800.00</div>
+          </div>
+        </div>
+        <van-radio :name="index" v-if="showRadio"/>
+      </div>
+    </van-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    showRadio: {
+      type: Boolean,
+      default: () => true
+    },
+    goodsList: {
+      type: Array,
+      default: () => [{}]
+    }
+  },
+  data () {
+    return {
+      radio: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .van-radio__icon--checked .van-icon {
+  border: 1px solid #FF5B00;
+  background: transparent;
+}
+::v-deep .van-radio__icon--checked .van-icon-success:before {
+  content: '';
+  width: 2.4vw;
+  height: 2.4vw;
+  border-radius: 50%;
+  background: #FF5B00;
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(60%, 60%);
+}
+::v-deep .van-image {
+  width: 100%;
+  height: 100%;
+}
+.goods-radio {
+  .select-goods {
+    @include display-flex-between;
+  }
+}
+.goodsInfo {
+  display: flex;
+  align-items: center;
+  padding: 3.5vw;
+  border-radius: 1.1vw;
+  .img {
+    width: 17.1vw;
+    height: 17.1vw;
+    border-radius: 0.5vw;
+    border: 1px solid;
+    margin-right: 3.2vw;
+  }
+  .content {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 17.1vw;
+    .goods_title {
+      color: #333333;
+      font-weight: 600;
+      font-size: 3.7vw;
+    }
+    .name {
+      font-size: 3.2vw;
+      color: #999999;
+      span {
+        color: #333333;
+      }
+    }
+    .price {
+      color: #F94B4B;
+      font-size: 3.2vw;
+    }
+  }
+}
+</style>

src/components/nav-bar.vue

@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div class="navbar">
     <van-nav-bar
       :title="title"
       left-arrow
       @click-left="$emit('click-left')"
     />
+    <slot></slot>
   </div>
 </template>
 
@@ -20,6 +21,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.navbar {
+  @include position-sticky(66);
+}
 ::v-deep .van-nav-bar {
   position: sticky;
   top: 0;

src/components/order-goods-info.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <div class="order-title">
+      <div class="order-name">华熙生物</div>
+      <div class="order-status">未付款未发货</div>
+    </div>
+    <div class="order-content">
+      <van-image></van-image>
+      <div class="goods-info">
+        <div class="goods-name">Prostrolane Nature-B珀洛丽肽焕活
+          修颜精华液
+        </div>
+        <div class="sku">规格：10ml/盒</div>
+        <div class="price-num">
+          <div class="price">￥299.00</div>
+          <div class="num">x1</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.price {
+  color: #F94B4B;
+  font-size: 3.7vw;
+}
+.order-title {
+  @include display-flex-between;
+  margin-bottom: 4.3vw;
+  .order-name {
+    color: #333;
+    font-weight: 600;
+    font-size: 4.3vw;
+  }
+  .order-status {
+    color: #FF2A2A;
+    font-size: 3.5vw;
+  }
+}
+.order-content {
+  @include display-flex-between;
+  margin-bottom: 5.3vw;
+  ::v-deep .van-image {
+    width: 24vw;
+    height: 24vw;
+    border-radius: 1.1vw;
+    margin-right: 3.3vw;
+  }
+  .goods-info {
+    width: calc(100% - 24vw);
+    height: 100%;
+    .goods-name {
+      font-size: 3.7vw;
+      color: #333;
+      @include webkit-line-clamp(2);
+      margin-bottom: 1vw;
+    }
+    .sku {
+      color: #999999;
+      font-size: 3.2vw;
+      margin-bottom: 2.7vw;
+    }
+    .price-num {
+      @include display-flex-between;
+      .num {
+        color: #666666;
+        font-size: 3.5vw;
+      }
+    }
+  }
+}
+</style>

src/components/order-list-card.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="order-list-card">
+    <slot name="order-head"></slot>
+    <div class="order">
+      <!--<div class="order-title">
+        <div class="order-name">华熙生物</div>
+        <div class="order-status">未付款未发货</div>
+      </div>-->
+      <!--<div class="order-content">
+        <van-image></van-image>
+        <div class="goods-info">
+          <div class="goods-name">Prostrolane Nature-B珀洛丽肽焕活
+            修颜精华液
+          </div>
+          <div class="sku">规格：10ml/盒</div>
+          <div class="price-num">
+            <div class="price">￥299.00</div>
+            <div class="num">x1</div>
+          </div>
+        </div>
+      </div>-->
+      <order-goods-info></order-goods-info>
+      <div class="order-foot">
+        <div class="order-all-goods">共1件商品</div>
+        <div class="order-all-price">待付总金额：<span class="price">￥299.00</span></div>
+      </div>
+      <slot name="order-foot"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.order-list-card {
+  overflow: hidden;
+  background: #fff;
+  padding: 4.3vw 3.2vw;
+  .order {
+    .order-foot {
+      @include display-flex-between;
+      .order-all-goods {
+        color: #333333;
+        font-size: 3.7vw;
+        font-weight: 600;
+      }
+      .order-all-price {
+        font-size: 3.7vw;
+        color: #333;
+      }
+    }
+  }
+}
+</style>

src/components/order-report-card.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="reportCard">
+    <slot name="InsUsername" :username="odRpCd"></slot>
     <div class="title">科医人医疗激光设备贸易公司</div>
     <div class="item">
       <div>联系人：</div>
@@ -23,7 +24,7 @@
       </div>
     </div>
     <div class="line"></div>
-    <slot name="card-foot"></slot>
+    <slot name="card-foot" :data="odRpCd"></slot>
     <van-image class="image" v-if="isTabImg"></van-image>
   </div>
 </template>
@@ -34,6 +35,13 @@ export default {
     isTabImg: {
       type: Boolean,
       default: false
+    },
+    odRpCd: {
+      type: Object,
+      default: () => ({
+        username: '李青',
+        id: 123
+      })
     }
   }
 }

src/components/store-card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card">
+  <div class="card" @click="$emit('handlerClick', storeInfo)">
     <van-image width="100%" :src="storeInfo.image" />
     <div class="store-title">{{ storeInfo.title }}</div>
     <div class="store-price">{{ storeInfo.price }}</div>

src/globle/variables.scss

@@ -0,0 +1,25 @@
+@mixin webkit-line-clamp ($sum) {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: $sum;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+@mixin position-sticky ($zIndex) {
+	position: sticky;
+	top: 0;
+	z-index: $zIndex;
+}
+
+@mixin display-flex-center {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+@mixin display-flex-between {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}

src/permission.js

@@ -7,36 +7,37 @@ import { Toast } from 'vant'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/pwlogin']
+const whiteList = ['/login', '/pwlogin', '/shopping-mall']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
-  if (getToken()) {
-    /* has token */
-    if (to.path === '/login') {
-      next({ path: '/' })
-      NProgress.done()
-    } else {
-      store.dispatch('getInfo').then(() => {
-        next({ ...to, replace: true })
-      }).catch(err => {
-        store.dispatch('loginOut').then(() => {
-          Toast.fail(err)
-          next({ path: '/' })
-        })
-      })
-    }
-  } else {
-    // 没有token
-    if (whiteList.indexOf(to.path) !== -1) {
-      // 在免登录白名单，直接进入
-      next()
-    } else {
-      Toast.fail('登入失败请检查')
-      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
-      NProgress.done()
-    }
-  }
+  next()
+  // if (getToken()) {
+  //  /* has token */
+  //  if (to.path === '/login') {
+  //    next({ path: '/' })
+  //    NProgress.done()
+  //  } else {
+  //    store.dispatch('getInfo').then(() => {
+  //      next({ ...to, replace: true })
+  //    }).catch(err => {
+  //      store.dispatch('loginOut').then(() => {
+  //        Toast.fail(err)
+  //        next({ path: '/' })
+  //      })
+  //    })
+  //  }
+  // } else {
+  //  // 没有token
+  //  if (whiteList.indexOf(to.path) !== -1) {
+  //    // 在免登录白名单，直接进入
+  //    next()
+  //  } else {
+  //    Toast.fail('登入失败请检查')
+  //    next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+  //    NProgress.done()
+  //  }
+  // }
 })
 
 router.afterEach(() => {

src/plugin/vant.js

@@ -22,7 +22,19 @@ import {
   DatetimePicker,
   Checkbox,
   CheckboxGroup,
-  Search
+  Search,
+  Dialog,
+  Uploader,
+  RadioGroup,
+  Radio,
+  ImagePreview,
+  Swipe,
+  SwipeItem,
+  Sku,
+  ContactCard,
+  AddressList,
+  Area,
+  AddressEdit
 } from 'vant'
 
 Vue.use(Button)
@@ -48,3 +60,15 @@ Vue.use(DatetimePicker)
 Vue.use(Checkbox)
 Vue.use(CheckboxGroup)
 Vue.use(Search)
+Vue.use(Dialog)
+Vue.use(Uploader)
+Vue.use(RadioGroup)
+Vue.use(Radio)
+Vue.use(ImagePreview)
+Vue.use(Swipe)
+Vue.use(SwipeItem)
+Vue.use(Sku)
+Vue.use(ContactCard)
+Vue.use(AddressList)
+Vue.use(Area)
+Vue.use(AddressEdit)

src/router/index.js

@@ -64,9 +64,9 @@ const routes = [
     ]
   },
   {
-    path: '/goods-detail/:id',
+    path: '/goods-detail',
     name: 'goods-detail',
-    component: () => import('@/views/goods-detail/index.vue'),
+    component: () => import('@/views/shopping-mall/detail.vue'),
     meta: {
       title: '商品详情'
     }
@@ -158,6 +158,62 @@ const routes = [
     meta: {
       title: '商品详情'
     }
+  },
+  {
+    path: '/goods-information-detail',
+    name: 'goods-information-detail',
+    component: () => import('@/views/goods-information/detail.vue'),
+    meta: {
+      title: '商品详情'
+    }
+  },
+  {
+    path: '/ins-intention-report',
+    name: 'ins-intention-report',
+    component: () => import('@/views/ins-intention-report/index.vue'),
+    meta: {
+      title: '机构意向订单报备'
+    }
+  },
+  {
+    path: '/ins-intention-detail',
+    name: 'ins-intention-detail',
+    component: () => import('@/views/ins-intention-report/detail.vue'),
+    meta: {
+      title: '详情'
+    }
+  },
+  {
+    path: '/ins-intention-add',
+    name: 'ins-intention-add',
+    component: () => import('@/views/ins-intention-report/add.vue'),
+    meta: {
+      title: '添加报备'
+    }
+  },
+  {
+    path: '/order-list',
+    name: 'order-list',
+    component: () => import('@/views/order-list/index.vue'),
+    meta: {
+      title: '订单列表'
+    }
+  },
+  {
+    path: '/order-create',
+    name: 'order-create',
+    component: () => import('@/views/order-list/order-create.vue'),
+    meta: {
+      title: '确认订单'
+    }
+  },
+  {
+    path: '/order-pay',
+    name: 'order-pay',
+    component: () => import('@/views/order-list/order-pay.vue'),
+    meta: {
+      title: '支付订单'
+    }
   }
 ]
 

src/store/getter.js

@@ -3,5 +3,6 @@ export default {
   INSTOKEN: state => state.institution.INSTOKEN,
   isFindCard: state => state.user.isFindCard,
   suId: state => state.institution.suId,
-  spId: state => state.institution.spId
+  spId: state => state.institution.spId,
+  isAddress: state => state.institution.isAddress
 }

src/store/institution.js

@@ -5,7 +5,8 @@ import { setToken } from '@/util/auth'
 const state = () => ({
   suId: 0,
   spId: 0,
-  INSTOKEN: null
+  INSTOKEN: null,
+  isAddress: false
 })
 
 const mutations = {

src/views/goods-information/components/infoCell.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="info-container">
+    <div class="info-title">{{ handlerType }}</div>
+    <div class="content">
+      <div class="info-content" v-if="infoList.length > 0">
+        <div v-for="item in infoList" :key="item.id">
+          <div class="info-content-title" v-if="infoType !== 3">以色列无针水光JDV/优斐斯/瑞漾小白盒及希腊，无针透
+            皮注入技术</div>
+          <div class="info-content-time" v-if="infoType !== 3">2023-09-19  17:42</div>
+          <div v-if="item.imageList && infoType === 1" class="image-list">
+            <div class="list" v-if="item.imageList > 0">
+              <van-image v-for="i,o in item.imageList" :key="o" :src="i"></van-image>
+            </div>
+            <div class="more" v-if="item.imageList.length > defaultImageSum">
+              <van-button>查看更多</van-button>
+            </div>
+          </div>
+          <div v-if="infoType === 2" class="video">
+            <video src="" width="100%" height="100%"></video>
+          </div>
+          <div v-if="infoType === 3" class="fileList">
+            <div class="list">
+              <van-image></van-image>
+              <div class="file-info">
+                <div class="file-name"></div>
+                <div class="file-time">
+                  <span></span>
+                  <span>预览文件</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="info-empty" v-else>暂无相关资料</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    infoList: {
+      type: Array,
+      default: () => []
+    },
+    infoType: {
+      type: Number,
+      default: () => 1
+    }
+  },
+  data () {
+    return {
+      defaultImageSum: 8,
+      defaultImageIndex: 1,
+      defaultImageList: []
+    }
+  },
+  computed: {
+    handlerType () {
+      const infoType = {
+        1: '图片资料',
+        2: '视频资料',
+        3: '文件资料'
+      }
+      return infoType[this.infoType]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-container {
+  background: #fff;
+  margin-bottom: 2.4vw;
+  padding: 0 2.4vw;
+  .info-title {
+    color: #333333;
+    font-size: 2.8vw;
+    padding: 4.8vw 0;
+    height: 5.6vw;
+    font-weight: 600;
+    border-bottom: 1px solid #E1E1E1;
+  }
+  .content {
+    padding: 2.4vw 0 4.8vw 0;
+    .info-content {
+      .info-content-title {
+        color: #333333;
+        font-size: 2.8vw;
+        line-height: 4.8vw;
+      }
+      .info-content-time {
+        font-size: 2.4vw;
+        color: #B2B2B2;
+        margin: 1.6vw 0 3.2vw 0;
+      }
+      .image-list {
+        .list {
+          display: flex;
+          align-items: center;
+          ::v-deep .van-image {
+            width: 16.2vw;
+            height: 16.2vw;
+            border-radius: 0.8vw;
+            object-fit: contain;
+          }
+        }
+        .more {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          ::v-deep .van-button {
+            width: 22vw;
+            height: 6.4vw;
+            font-size: 2.4vw;
+            color: #B2B2B2;
+            white-space: nowrap;
+          }
+        }
+      }
+      .video {
+        @include display-flex-center;
+        border-radius: 0.8vw;
+        overflow: hidden;
+        padding-bottom: 4vw;
+        border-bottom: 1px solid #E1E1E1;
+      }
+      .fileList {
+        .list {
+          padding: 4vw 0;
+          display: flex;
+          border-bottom: 1px solid #E1E1E1;
+          justify-content: space-between;
+          ::v-deep .van-image {
+            width: 8.8vw;
+            height: 8.8vw;
+          }
+          .file-info {
+            width: 58.4vw;
+            .file-name {
+              height: 8.8vw;
+              width: 100%;
+              line-height: 4.8vw;
+              font-size: 2.8vw;
+              color: #333;
+              @include webkit-line-clamp(2);
+            }
+            .file-time {
+              @include display-flex-center;
+              justify-content: space-between;
+              span:nth-child(1) {
+                color: #B2B2B2;
+                font-size: 2.4vw;
+              }
+              span:nth-child(2) {
+                color: #FF5B00;
+                font-size: 2.8vw;
+              }
+            }
+          }
+        }
+      }
+    }
+    .info-empty {
+      font-size: 2.8vw;
+      color: #999;
+    }
+  }
+}
+</style>

src/views/goods-information/detail.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <nav-bar title="商品资料" @click-left="$router.back()"/>
+    <div class="title">
+      <van-image></van-image>
+      <div class="store-title">
+        液洛丽肽焕活修颜精华液洛丽肽焕活修颜精华液洛丽肽焕活修颜精华液洛丽肽焕活修颜精华液
+      </div>
+    </div>
+    <div class="store-info">
+      相关资料
+    </div>
+    <info-cell :info-type="1" :info-list="infoList"></info-cell>
+    <info-cell :info-type="2" :info-list="infoList"></info-cell>
+    <info-cell :info-type="3" :info-list="infoList"></info-cell>
+  </div>
+</template>
+
+<script>
+import infoCell from './components/infoCell.vue'
+export default {
+  components: {
+    infoCell
+  },
+  data () {
+    return {
+      infoList: [
+        {
+          id: 12
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .van-image {
+  width: 100vw;
+  height: 100vw;
+}
+.store-title {
+  font-size: 3.4vw;
+  color: #333;
+  line-height: 4.8vw;
+  padding: 3.2vw 4.5vw 8vw 2.4vw;
+  background: #fff;
+  margin-bottom: 2.4vw;
+}
+.store-info {
+  padding: 4vw 0;
+  text-align: center;
+  font-size: 3.6vw;
+  color: #333;
+  background: #fff;
+  font-weight: 600;
+}
+</style>

src/views/goods-information/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="goods_info">
-    <div>
+    <div style="position: sticky;top: 0;z-index: '66';">
       <nav-bar title="商品详情" @click-left="$router.back()"/>
       <van-search v-model="searchVal" placeholder="请输入搜索关键词" />
     </div>
-    <div>
-      <goods-card />
+    <div class="content">
+      <goods-card @handlerEmit="handlerEmit"/>
     </div>
   </div>
 </template>
@@ -19,10 +19,24 @@ export default {
   },
   mounted () {
   },
-  methods: {}
+  methods: {
+    handlerEmit ($event) {
+      this.$router.push('/goods-information-detail')
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
+::v-deep .van-search__content {
+  background: #fff;
+  border: 1px solid #B2B2B2;
+}
+.goods_info {
+  background: #fff;
+  .content {
+    padding: 0 3.2vw;
+  }
+}
 
 </style>

src/views/ins-intention-report/add.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <nav-bar title="添加报备" @click-left="$router.back()" />
+    <div class="add-report">
+      <van-form @submit="onSubmit">
+        <div class="label">机构名称：</div>
+        <van-cell-group>
+          <van-field v-model="formData.name" placeholder="请输入用户名" />
+        </van-cell-group>
+        <div class="label">联系人：</div>
+        <van-cell-group>
+          <van-field v-model="formData.username" placeholder="请输入用户名" />
+        </van-cell-group>
+        <div class="label">手机号：</div>
+        <van-cell-group>
+          <van-field v-model="formData.phone" placeholder="请输入用户名" />
+        </van-cell-group>
+        <div class="label">报备商品：</div>
+        <div class="select-store">
+          <div class="select" v-if="true" @click="$refs['select-popup'].showPopup = true">
+            <div class="upload"></div>
+            <div class="text">点击上传客户咨询的商品报备</div>
+          </div>
+          <div class="stores" v-else></div>
+        </div>
+        <div class="label">上传凭证：<span style="color: #F94B4B;">（上传与客户直接的聊天记录，限6张）</span></div>
+        <van-uploader v-model="fileList" multiple />
+        <div class="label">备注：</div>
+        <textarea placeholder="请输入备注" maxlength="200"></textarea>
+        <van-button block color="#FF5B00" :disabled="disabled" native-type="submit">提交</van-button>
+      </van-form>
+    </div>
+    <van-dialog v-model="showModal" title="提示">
+      <div class="tips">
+        抱歉，该机构/商品采购意向订单报备已被其他人锁定，目前暂无法进行报备！
+      </div>
+      <van-button color="#FF5B00" @click="showModal = false">确认</van-button>
+    </van-dialog>
+    <report-tips :show="showTips" @tipsHidden="tipsHidden"></report-tips>
+    <report-select-popup ref="select-popup"></report-select-popup>
+  </div>
+</template>
+
+<script>
+import ReportSelectPopup from './components/report-select-popup.vue'
+import ReportTips from './components/report-tips.vue'
+export default {
+  components: {
+    ReportTips,
+    ReportSelectPopup
+  },
+  data () {
+    return {
+      showModal: false,
+      showTips: false,
+      showPopup: true,
+      disabled: false,
+      formData: {
+        name: ''
+      },
+      fileList: []
+    }
+  },
+  mounted () {},
+  methods: {
+    tipsHidden (val) {
+      this.showTips = val
+    },
+    onSubmit () {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-report {
+  padding: 8vw 3.2vw 14vw 3.2vw;
+  background: #fff;
+  .label {
+    color: #333333;
+    font-size: 3.7vw;
+    margin-bottom: 2.1vw;
+  }
+  textarea {
+    width: 100%;
+    height: 47.2vw;
+    font-size: 3.5vw;
+    color: #B2B2B2;
+    border: 1px solid #B2B2B2;
+    padding: 3.2vw 2.1vw;
+    box-sizing: border-box;
+    border-radius: 1.1vw;
+    margin-bottom: 27vw;
+  }
+  ::v-deep .van-cell-group {
+    border: 1px solid #B2B2B2;
+    color: #B2B2B2;
+    font-size: 3.7vw;
+    border-radius: 1.1vw;
+    margin-bottom: 5.3vw;
+    overflow: hidden;
+  }
+  .select-store {
+    width: 93.3vw;
+    height: 24vw;
+    border-radius: 1.1vw;
+    background: #F7F7F7;
+    margin-bottom: 5.3vw;
+    .select {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      padding: 3.5vw;
+      align-items: center;
+      box-sizing: border-box;
+      .upload {
+        width: 17vw;
+        height: 17vw;
+        border-radius: 5px;
+        border: 1px dotted #B2B2B2;
+        margin-right: 4.3vw;
+      }
+      .text {
+        color: #B2B2B2;
+        font-size: 3.5vw;
+      }
+    }
+  }
+}
+::v-deep .van-dialog {
+  border-radius: 1.2vw;
+  padding: 0 3.7vw 4.6vw 7.2vw;
+  box-sizing: border-box;
+  .van-dialog__header {
+    font-size: 5.2vw;
+    color: #333;
+    font-weight: 600;
+  }
+  .van-dialog__content {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    font-size: 4vw;
+    color: #333;
+    line-height: 6vw;
+  }
+  .van-button {
+    width: 60vw;
+    height: 12vw;
+  }
+  .tips {
+    margin: 7.5vw 0 17vw 0;
+  }
+}
+::v-deep .van-dialog__footer {
+  display: none;
+}
+
+</style>

src/views/ins-intention-report/components/report-select-popup.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <van-action-sheet v-model="showPopup" title="选择商品">
+      <div class="content">
+        <van-search v-model="value" placeholder="请输入搜索关键词" />
+        <goods-radio></goods-radio>
+      </div>
+    </van-action-sheet>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      showPopup: true,
+      value: '',
+      radio: ''
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .van-action-sheet__header {
+  font-weight: 600;
+}
+::v-deep .van-action-sheet__content {
+  padding: 0 3.2vw 0 3.2vw;
+}
+.select-goods {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

src/views/ins-intention-report/components/report-tips.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <van-overlay :show="show">
+      <div class="wrapper" @click.stop>
+        <div class="tips">
+          <div class="tips-title">机构意向订单报备说明</div>
+          <div class="tip"></div>
+          <div class="text">1、先提交机构意向订单报备；</div>
+          <div class="text">2、平台根据您提交的机构意向订单报备
+            信息进行审核，审核通过后，即可对该
+            意向订单进行下单采购；</div>
+          <div class="text">3、审核通过后的机构意向订单详情页面
+            可操作“分享采购意向确认”给机构进行
+            确认锁定，仅由您一人来全程跟踪服务。
+            当机构确认后，后面的人则无法对该机
+            构意向订单进行报备；</div>
+          <div class="text">4、机构意向订单若只有一人报备且成交
+            后，则可获得全部的报备佣金；</div>
+          <div class="text">5、若多人报备同一机构及商品意向订单，
+            其中一人成交订单后，则多人平均分配该
+            笔报备佣金。同时该机构及商品意向订单
+            成交后，不可再下单及报备。</div>
+          <div class="content-tip">注：请谨慎填写机构名称、意向商品、联系人及手机号。</div>
+          <van-button color="#FF5B00" @click="$emit('tipsHidden', false)">确定</van-button>
+        </div>
+      </div>
+    </van-overlay>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .van-overlay {
+  z-index: 666;
+}
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  .tips {
+    width: 85.3vw;
+    height: 171.1vw;
+    border-radius: 1.2vw;
+    box-sizing: border-box;
+    background: url('https://static.caimei365.com/app/mini-distribution/tips-bg.png');
+    background-size: 100% 100%;
+    padding: 8.5vw 5.1vw 5.3vw 5.1vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .tips-title {
+      font-size: 4.8vw;
+      color: #333;
+      font-weight: 600;
+    }
+    .tip {
+      color: #999;
+      font-size: 3.2vw;
+      line-height: 5.3vw;
+      margin: 4.3vw 0 5.3vw 0;
+    }
+    .text {
+      margin-bottom: 4.3vw;
+      font-size: 3.7vw;
+      color: #333;
+      line-height: 6vw;
+      width: 100%;
+    }
+    .content-tip {
+      margin: 5vw 0 4.3vw 0;
+      color: #F94B4B;
+      font-size: 2.7vw;
+    }
+    ::v-deep .van-button {
+      width: 56vw;
+      height: 11.2vw;
+      border-radius: 1.1vw;
+      margin-top: 4.3vw;
+    }
+  }
+}
+</style>

src/views/ins-intention-report/components/search-head.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <van-tabs v-model="active" @click="$emit('handlerSelect', active)">
+      <van-tab title="我的报备" />
+      <van-tab title="成员报备" />
+    </van-tabs>
+    <van-search v-model="value" placeholder="请输入搜索关键词" @search="$emit('onSearch', value)"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      active: 0,
+      value: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .van-tab--active {
+  font-weight: 600;
+}
+::v-deep .van-tabs__line {
+  background: #FF5B00;
+}
+::v-deep .van-search {
+  .van-search__content {
+    border: 1px solid #E4E4E4;
+    background: #fff;
+  }
+}
+</style>

src/views/ins-intention-report/detail.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="detail">
+    <nav-bar title="审核通过/未锁定详情" @click-left="$router.back()" />
+    <order-report-card />
+    <div class="label">上传凭证：</div>
+    <div class="upload-img">
+      <van-image></van-image>
+    </div>
+    <div class="label">备注：<span>无</span></div>
+    <div class="label">审核状态：<span>审核通过</span></div>
+    <div class="label">锁定状态：<span style="color: #FF9100;">未锁定</span></div>
+    <div class="label">报备时间：<span>2023-09-18   10:37:31</span></div>
+    <div class="label">已报备人数：<span>6人</span></div>
+    <div class="detail-btn">
+      <van-button color="#FF5B00">下单</van-button>
+      <van-button style="color: #FF9100;">分享采购意向确认</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.detail {
+  background: #fff;
+}
+.reportCard {
+  padding: 5.3vw 3.2vw 0 3.2vw;
+  ::v-deep .line {
+    display: none;
+  }
+}
+.label {
+  margin: 4.6vw 0 0 3.5vw;
+  font-size: 4vw;
+  color: #333333;
+  span {
+    color: #333333;
+    font-weight: 600;
+  }
+}
+.upload-img {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 2.3vw 0 0 3.5vw;
+  ::v-deep .van-image {
+    width: 23vw;
+    height: 23vw;
+    margin-right: 3vw;
+    border-radius: 1.2vw;
+  }
+}
+.detail-btn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  ::v-deep .van-button {
+    width: 86.4vw;
+    height: 13vw;
+    margin-bottom: 3.6vw;
+    border: 1px solid #FF5B00;
+  }
+}
+</style>

src/views/ins-intention-report/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <nav-bar title="机构意向订单报备" @click-left="$router.back()">
+      <template>
+        <search-head @handlerSelect="handlerSelect" @onSearch="onSearch"/>
+      </template>
+    </nav-bar>
+    <div class="report-list">
+      <order-report-card :style="{padding: isManage ? '13.3vw 3.2vw 5.3vw 3.2vw' : '5.3vw 3.2vw'}">
+        <template #InsUsername="{ username }">
+          <div class="name">
+            成员：{{ username.username }}
+          </div>
+        </template>
+        <template #card-foot="{ data }">
+          <div class="examine">
+            <div>审核状态：<span style="color: #333333;">审核通过</span></div>
+            <div>锁定状态：<span style="color: #FF9100;">未锁定</span></div>
+          </div>
+          <div class="detail-btn" v-if="true">
+            <van-button @click="handlerDetail(data)">查看详情</van-button>
+          </div>
+          <div class="change-btn" v-else>
+            <van-button @click="handlerDetail(data)">下单</van-button>
+            <van-button @click="handlerDetail(data)">查看详情</van-button>
+          </div>
+        </template>
+      </order-report-card>
+      <div class="to-report">
+        <van-button color="#FF5B00" @click="$router.push('/ins-intention-add')">去报备</van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SearchHead from './components/search-head'
+export default {
+  components: { SearchHead },
+  data () {
+    return {
+      isManage: true
+    }
+  },
+  methods: {
+    handlerSelect ($event) {},
+    onSearch ($event) {},
+    handlerDetail ($event) {
+      this.$router.push('/ins-intention-detail')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-list {
+  padding: 2.4vw;
+  .name {
+    position: absolute;
+    left: 0;
+    top: 2vw;
+    padding: 1vw 2.6vw 1vw 3.5vw;
+    font-size: 2.8vw;
+    color: #fff;
+    line-height: 6.9vw;
+    text-align: center;
+    background: #FF5B00;
+    border-top-right-radius: 1.2vw;
+    border-bottom-right-radius: 1.2vw;
+  }
+  .examine {
+    @include display-flex-between;
+    font-size: 4vw;
+    color: #999999;
+    margin-bottom: 8vw;
+  }
+  .detail-btn {
+    width: 100%;
+    @include display-flex-center;
+    ::v-deep .van-button {
+      width: 86.4vw;
+      height: 13vw;
+      border-radius: 1.2vw;
+    }
+  }
+  .change-btn {
+    width: 100%;
+    @include display-flex-between;
+    ::v-deep .van-button {
+      width: 40vw;
+      height: 13vw;
+      border-radius: 1.2vw;
+    }
+  }
+  .to-report {
+    @include display-flex-center;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 17.3vw;
+    background: #fff;
+    ::v-deep .van-button {
+      width: 86.4vw;
+      height: 13vw;
+      border-radius: 1.2vw;
+    }
+  }
+}
+</style>

src/views/ins-intention-report/intention-confirm.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <nav-bar title="采购意向确认" @click-left="$router.back()" />
+    <div class="container">
+      <div class="user-img">
+        <van-image></van-image>
+      </div>
+      <div class="name">赵民</div>
+      <div class="pro-name"></div>
+      <div class="tips">您是否愿意接受赵铭客户经理为您采购以下商品的全程服务？
+        如您愿意，可点击接受，后续将由该客户经理全程为您服务！</div>
+      <div class="goods-detail">
+        <van-image></van-image>
+        <div>英诺mini小棕瓶02号</div>
+      </div>
+      <van-button color="#FF5B00">接受</van-button>
+      <van-button style="color: #FF5B00;margin-top: 3.5vw;">暂不接受</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 11.7vw 7.3vw 0 7.3vw;
+  ::v-deep .van-image{
+    border-radius: 50%;
+    width: 23vw;
+    height: 23vw;
+  }
+  .name {
+    color: #666666;
+    font-weight: 600;
+    font-size: 5.2vw;
+    margin-top: 2.3vw;
+  }
+  .pro-name {
+    color: #666666;
+    font-size: 4vw;
+    margin-top: 1vw;
+  }
+  .tips {
+    margin-top: 10.4vw;
+    color: #666666;
+    font-size: 3.5vw;
+    line-height: 5.8vw;
+  }
+  .goods-detail {
+    width: 94.2vw;
+    height: 25.9vw;
+    padding: 3.7vw;
+    display: flex;
+    box-sizing: border-box;
+    margin: 5.8vw 0 11.5vw 0;
+    ::v-deep .van-image{
+      width: 18.4vw;
+      height: 18.4vw;
+      border-radius: 0.6vw;
+      margin-right: 3.5vw;
+    }
+    div{
+      color: #333333;
+      line-height: 6vw;
+      font-size: 4vw;
+      font-weight: 600;
+    }
+  }
+  ::v-deep .van-button {
+    width: 86.4vw;
+    height: 13vw;
+    border-radius: 1.2vw;
+    border: 1px solid #FF5B00;
+  }
+}
+</style>

src/views/login/login.vue

@@ -113,4 +113,7 @@ export default {
     color: #fff;
   }
 }
+::v-deep .van-cell {
+  align-items: center;
+}
 </style>

src/views/mine/index.vue

@@ -4,9 +4,7 @@
       <div class="user_icon">
         <van-image
           lazy-load
-          round
           src="https://img01.yzcdn.cn/vant/cat.jpeg"
-          fit="cover"
         />
         <div class="user_name">赵铭</div>
       </div>
@@ -47,7 +45,7 @@ export default {
             isLink: true,
             title: '我的订单',
             value: '全部订单',
-            to: ''
+            to: '/order-list'
           }
         ],
         isInset: true,
@@ -59,14 +57,14 @@ export default {
             isLink: true,
             title: '机构意向订单报备',
             value: '',
-            to: '',
+            to: '/ins-intention-report',
             icon: 'location-o'
           },
           {
             isLink: true,
             title: '我的团队',
             value: '',
-            to: '/myTeam',
+            to: '/my-team',
             icon: 'location-o'
           },
           {
@@ -163,6 +161,7 @@ export default {
         width: 15.7vw;
         height: 15.7vw;
         margin-right: 5.3vw;
+        border-radius: 50%;
       }
       .user_name {
         font-size: 4.3vw;
@@ -182,6 +181,7 @@ export default {
       flex-direction: column;
       justify-content: space-between;
       align-items: center;
+      white-space: nowrap;
       img {
         width: 8.5vw;
         height: 8.5vw;
@@ -205,6 +205,7 @@ export default {
     left: 50%;
     height: 14vw;
     transform: translateX(-50%);
+    white-space: nowrap;
     img {
       width: 9.3vw;
       height: 9.1vw;

src/views/order-list/address-edit.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <nav-bar title="编辑地址" @click-left="$router.back()" />
+    <van-address-edit
+      :area-list="areaList"
+      show-postal
+      show-delete
+      show-set-default
+      show-search-result
+      :search-result="searchResult"
+      :area-columns-placeholder="['请选择', '请选择', '请选择']"
+      @save="onSave"
+      @delete="onDelete"
+      @change-detail="onChangeDetail"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      areaList: [],
+      searchResult: []
+    }
+  },
+  methods: {
+    onSave () {
+    },
+    onDelete () {
+    },
+    onChangeDetail (val) {
+      if (val) {
+        this.searchResult = [
+          {
+            name: '黄龙万科中心',
+            address: '杭州市西湖区'
+          }
+        ]
+      } else {
+        this.searchResult = []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/order-list/address-select.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <nav-bar title="切换地址" @click-left="$router.back()" />
+    <van-address-list
+      v-model="chosenAddressId"
+      :list="list"
+      :disabled-list="disabledList"
+      disabled-text="以下地址超出配送范围"
+      default-tag-text="默认"
+      @add="onAdd"
+      @edit="onEdit"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      chosenAddressId: '1',
+      list: [
+        {
+          id: '1',
+          name: '张三',
+          tel: '13000000000',
+          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
+          isDefault: true
+        },
+        {
+          id: '2',
+          name: '李四',
+          tel: '1310000000',
+          address: '浙江省杭州市拱墅区莫干山路 50 号'
+        }
+      ],
+      disabledList: [
+        {
+          id: '3',
+          name: '王五',
+          tel: '1320000000',
+          address: '浙江省杭州市滨江区江南大道 15 号'
+        }
+      ]
+    }
+  },
+  methods: {
+    onAdd () {},
+    onEdit ($event) {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/order-list/components/contact-select.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="address-select" @click="handlerAddress">
+    <div class="address" v-if="isAddress">
+      <div class="address-img">
+        <van-image></van-image>
+      </div>
+      <div class="address-info">
+        <div class="user-info">赵铭 <span>18652639532</span></div>
+        <div class="user-address">收货地址：市辖区东城区卢沟桥东城区卢沟桥村034号
+          市辖区东城区卢沟桥村0034号</div>
+      </div>
+    </div>
+    <van-contact-card
+      v-else
+      name="张三"
+      tel="13000000000"
+      type="add"
+      @click="onAdd"
+      :editable="editable"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      editable: false,
+      isAddress: true
+    }
+  },
+  methods: {
+    onAdd () {
+      console.log(123)
+    },
+    handlerAddress () {
+      if (this.isAddress) {
+        this.$router.push()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.address-select {
+  padding: 5vw 4vw;
+  box-sizing: border-box;
+  background: #fff;
+  .address {
+    @include display-flex-between;
+    .address-img {
+      width: 4.5vw;
+      height: 5vw;
+    }
+    .address-info {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      width: 82.5vw;
+      .user-info {
+        font-weight: 600;
+        color: #333;
+        font-size: 3.7vw;
+        span {
+          margin-left: 8.5vw;
+        }
+      }
+      .user-address {
+        margin-top: 2vw;
+        font-size: 3.5vw;
+        line-height: 5vw;
+        color: #666;
+      }
+    }
+    .van-image {
+      width: 4.5vw;
+      height: 5vw;
+      margin-right: 3.2vw;
+      ::v-deep .van-image__loading-icon {
+        font-size: 4vw;
+      }
+    }
+  }
+}
+</style>

src/views/order-list/components/freight-cell.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="freight">
+    <van-cell title="运费信息" value="包邮" @click="showFreight = true" is-link/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      showFreight: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/order-list/components/invoice-information.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="invoice">
+    <van-cell title="发票信息" value="不要发票" @click="showInvoice = true" is-link/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      showInvoice: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/order-list/components/order-btn-type.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="order-btn-type">
+    <!--<van-button>取消订单</van-button>
+    <van-button>分享订单</van-button>-->
+    <van-button>查看物流</van-button>
+    <van-button>分享支付</van-button>
+    <van-button>付款</van-button>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.order-btn-type {
+  display: flex;
+  flex-direction: row-reverse;
+}
+</style>

src/views/order-list/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <nav-bar title="订单列表" @click-left="$router.back()">
+      <van-tabs v-model="active">
+        <van-tab v-for="(item, index) in orderLinks" :title="item.name" :key="index" />
+      </van-tabs>
+      <div class="order-select">
+        <van-button
+          v-for="btn in manageOrderList"
+          :key="btn.id"
+          class="manage-btn"
+          :class="activeBtn === btn.id ? 'activeBtn' : ''"
+          @click="handlerManage(btn.id)"
+          >{{ btn.title }}</van-button
+        >
+      </div>
+    </nav-bar>
+    <div class="order-list">
+      <order-list-card>
+        <template #order-head>
+          <div class="order-place">
+            <div class="order-No">订单号：X156368767111348</div>
+            <div class="order-time-state">
+              <div class="order-time">下单时间：2023-09-20  16:17:08</div>
+              <div class="order-state">待付款待发货</div>
+            </div>
+          </div>
+        </template>
+        <template #order-foot>
+          <div class="order-btn-all">
+            <order-btn-type></order-btn-type>
+          </div>
+        </template>
+      </order-list-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import OrderBtnType from './components/order-btn-type'
+export default {
+  components: { OrderBtnType },
+  data () {
+    return {
+      orderLinks: [
+        {
+          icon: '',
+          link: '',
+          content: 200,
+          name: '全部订单'
+        },
+        {
+          icon: '',
+          link: '',
+          content: 200,
+          name: '待确认'
+        },
+        {
+          icon: '',
+          link: '',
+          content: 200,
+          name: '待付款'
+        },
+        {
+          icon: '',
+          link: '',
+          content: 200,
+          name: '待发货'
+        },
+        {
+          icon: '',
+          link: '',
+          content: 200,
+          name: '已发货'
+        },
+        {
+          icon: '',
+          link: '',
+          content: 200,
+          name: '退货/款'
+        }
+      ],
+      manageOrderList: [
+        {
+          id: 1,
+          title: '我的订单'
+        },
+        {
+          id: 2,
+          title: '团队订单'
+        }
+      ],
+      activeBtn: 1,
+      active: ''
+    }
+  },
+  methods: {
+    handlerManage (id) {
+      this.activeBtn = id
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.van-tab {
+  line-height: 0;
+}
+::v-deep .van-tab--active {
+  color: #ff5b00;
+  font-weight: 600;
+}
+::v-deep .van-tabs__line {
+  background: #ff5b00;
+}
+.order-list-card {
+  border-radius: 1.1vw;
+}
+.order-list {
+  padding: 0 3.2vw 3.2vw 3.2vw;
+}
+.order-select {
+  background: #f5f5f5;
+  padding: 4.3vw 3.2vw;
+  display: flex;
+  align-items: center;
+  .manage-btn {
+    background: #fff;
+    color: #666666;
+    width: 32vw;
+    height: 9.6vw;
+    border-radius: 1.1vw;
+    margin-right: 3.2vw;
+    &.activeBtn {
+      color: #fff;
+      background: #FF5B00;
+    }
+  }
+}
+.order-place {
+  padding-bottom: 3.2vw;
+  border-bottom: 1px solid #E1E1E1;
+  margin-bottom: 5.3vw;
+  .order-No {
+    color: #333333;
+    font-size: 3.7vw;
+    margin-bottom: 1.3vw;
+  }
+  .order-time-state {
+    @include display-flex-between;
+    .order-time {
+      color: #999999;
+      font-size: 3.5vw;
+    }
+    .order-state {
+      color: #FF2A2A;
+      font-size: 3.5vw;
+    }
+  }
+}
+.order-btn-all {
+  margin-top: 4.3vw;
+  ::v-deep .van-button {
+    width: 21.3vw;
+    height: 8.5vw;
+    border-radius: 1.1vw;
+    margin-left: 3.2vw;
+    font-size: 3.5vw;
+    white-space: nowrap;
+  }
+}
+</style>

src/views/order-list/mixins/order-btn-type.js

@@ -0,0 +1,5 @@
+export default {
+  methods: {
+
+  }
+}

src/views/order-list/order-create.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="create-order">
+    <nav-bar title="确认订单" @click-left="$router.back()" />
+    <contact-select></contact-select>
+    <div class="order-goods-info">
+      <order-goods-info></order-goods-info>
+      <div class="text">
+        <van-field v-model="formData.message" label="留言：" placeholder="请输入留言" />
+        <div class="all-price"><span>￥250.00</span>合计：</div>
+      </div>
+    </div>
+    <invoice-information></invoice-information>
+    <freight-cell></freight-cell>
+    <div class="create">
+      <div class="goods-num">共5件商品</div>
+      <div class="all-price">总计：<span>￥25000.00</span></div>
+      <van-button class="handlerCreate" color="#FF5B00" @click="$router.push('/order-pay')">提交订单</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import FreightCell from './components/freight-cell'
+import InvoiceInformation from './components/invoice-information'
+import ContactSelect from './components/contact-select'
+export default {
+  components: {
+    FreightCell,
+    InvoiceInformation,
+    ContactSelect
+  },
+  data () {
+    return {
+      formData: {
+        message: ''
+      }
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.create-order {
+  width: 100vw;
+  height: 100vh;
+  .create {
+    display: flex;
+    height: 13.1vw;
+    width: 100%;
+    align-items: center;
+    justify-content: space-around;
+    padding: 3.2vw 1vw;
+    box-sizing: border-box;
+    background: #fff;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    .goods-num {
+      color: #333333;
+      font-size: 3.7vw;
+    }
+    .all-price {
+      color: #666666;
+      font-size: 3.5vw;
+      span {
+        color: #F94B4B;
+      }
+    }
+    .van-button {
+      width: 28vw;
+      height: 11.2vw;
+      border-radius: 1.1vw;
+    }
+  }
+}
+.address-select {
+  margin-bottom: 3.2vw;
+}
+.order-goods-info {
+  background: #fff;
+  padding: 5vw 3.2vw 3.2vw 3.2vw;
+  margin-bottom: 3.2vw;
+}
+.text {
+  ::v-deep .van-field__label {
+    width: fit-content;
+  }
+  ::v-deep .van-field__control {
+    height: 9.6vw !important;
+    border: 1px solid #B2B2B2;
+    border-radius: 1vw;
+    padding-left: 1.6vw;
+  }
+  ::v-deep .van-cell {
+    align-items: center;
+  }
+  .all-price {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    padding: 5vw 0;
+    font-size: 3.5vw;
+    span {
+      color: #F94B4B;
+    }
+  }
+}
+.invoice {
+  margin-bottom: 3.2vw;
+}
+</style>

src/views/order-list/order-pay.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <nav-bar title="支付订单" @click-left="$router.back()" />
+    <div class="list">
+      <order-goods-info></order-goods-info>
+      <div class="label">
+        运费
+        <span>￥60.00</span>
+      </div>
+      <div class="label">
+        已付
+        <span>￥60.00</span>
+      </div>
+      <div class="label">
+        待付
+        <span style="color: #F85050;">￥60.00</span>
+      </div>
+      <div class="pay">
+        <div class="pay-btn">
+          <van-button color="#FF5B00">线上支付</van-button>
+        </div>
+        <div class="pay-btn">
+          <van-button color="#FF5B00">线下支付</van-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import OrderGoodsInfo from '../../components/order-goods-info'
+export default {
+  components: { OrderGoodsInfo },
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  padding: 5vw 3.2vw 3vw 3.2vw;
+  background: #fff;
+  margin-bottom: 3.2vw;
+  .label {
+    font-size: 3.7vw;
+    margin-bottom: 3vw;
+    @include display-flex-between;
+  }
+  .pay {
+    display: flex;
+    flex-direction: row-reverse;
+    .van-button {
+      border-radius: 1vw;
+      width: 21.3vw;
+      height: 8.5vw;
+      white-space: nowrap;
+      margin-left: 4vw;
+    }
+  }
+}
+</style>

src/views/goods-detail/index.vue → src/views/share/index.vue

@@ -1,12 +1,14 @@
 <template>
   <div>
-    商品详情
+
   </div>
 </template>
 
 <script>
 export default {
-
+  mounted () {
+    console.log(this.$route.query)
+  }
 }
 </script>
 

src/views/shopping-mall/components/goods-classification.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="classification">
+    <van-cell title="参数" value="品牌分类" @click="showClass = true" is-link/>
+    <van-action-sheet v-model="showClass" title="商品参数">
+      <div class="content">
+        <div>
+          <div class="label">
+            品牌
+            <span>品牌名称</span>
+          </div>
+        </div>
+        <div>
+          <div class="label">
+            品牌
+            <span>品牌名称</span>
+          </div>
+        </div>
+        <div>
+          <div class="label">
+            包装规格
+            <span>品牌名称</span>
+          </div>
+        </div>
+        <div>
+          <div class="label">
+            包装规格
+            <span>10ml，20ml，30ml</span>
+          </div>
+        </div>
+        <div class="btn">
+          <van-button color="#FF5B00" @click="showClass = false">收起</van-button>
+        </div>
+      </div>
+    </van-action-sheet>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      showClass: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.classification {
+  ::v-deep .van-action-sheet__header {
+    font-size: 4.8vw;
+    font-weight: 600;
+    color: #333;
+  }
+  .content {
+    padding: 8vw 7vw;
+    box-sizing: border-box;
+    .label {
+      font-size: 3.7vw;
+      color: #999;
+      margin-bottom: 3.2vw;
+      span {
+        margin-left: 12.8vw;
+        color: #333;
+      }
+    }
+    .btn {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    ::v-deep .van-button {
+      width: 80vw;
+      height: 12vw;
+      border-radius: 1vw;
+      margin: 19vw auto 0 auto;
+    }
+  }
+}
+</style>

src/views/shopping-mall/components/goods-detail.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="goods-detail">
+    <div class="title">商品详情</div>
+    <van-image></van-image>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.goods-detail {
+  padding: 4vw 3.2vw;
+  box-sizing: border-box;
+  background: #fff;
+  .title {
+    font-size: 3.7vw;
+    color: #333333;
+    font-weight: 600;
+    margin-bottom: 4vw;
+  }
+  .van-image {
+    width: 100%;
+    height: 94vw;
+  }
+}
+</style>

src/views/shopping-mall/components/goods-image.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <van-swipe @change="onChange">
+      <van-swipe-item
+        v-for="(item, index) in imageList"
+        :key="index"
+        @click="preview"
+      >
+        <van-image :src="item"></van-image>
+      </van-swipe-item>
+      <template #indicator>
+        <div class="custom-indicator">{{ current + 1 }}/{{ imageList.length }}</div>
+      </template>
+    </van-swipe>
+  </div>
+</template>
+
+<script>
+import { ImagePreview } from 'vant'
+export default {
+  props: {
+    imageList: {
+      type: Array,
+      default: () => [
+        'https://img01.yzcdn.cn/vant/apple-1.jpg',
+        'https://img01.yzcdn.cn/vant/apple-2.jpg'
+      ]
+    }
+  },
+  data () {
+    return {
+      current: 0
+    }
+  },
+  methods: {
+    onChange ($event) {
+      this.current = $event
+    },
+    preview () {
+      ImagePreview({
+        images: this.imageList,
+        startPosition: this.current
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-indicator {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  padding: 2px 5px;
+  font-size: 12px;
+  background: rgba(0, 0, 0, 0.1);
+}
+::v-deep .van-swipe {
+  width: 100vw;
+  height: 100vw;
+  .van-image {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/shopping-mall/components/goods-share.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div class="goods">
+      <div class="price">¥ 99999.00</div>
+      <div class="title-share">
+        <div class="title">
+          韩国恩盛进口氢洁气小气泡清韩国
+进口氢洁气小气泡清韩国恩
+        </div>
+        <div class="share">
+          <van-image></van-image>
+          <div class="text">分享</div>
+        </div>
+      </div>
+      <div class="goods-tab">
+        <div class="item">韩国恩盛</div>
+        <div class="item">韩国恩盛</div>
+        <div class="item">韩国恩盛</div>
+        <div class="item">韩国恩盛</div>
+      </div>
+    </div>
+    <div class="store-tab">
+      <div class="tab-item">
+        <van-image></van-image>
+        <div>无忧退货</div>
+      </div>
+      <div class="tab-item">
+        <van-image></van-image>
+        <div>无忧退货</div>
+      </div>
+      <div class="tab-item">
+        <van-image></van-image>
+        <div>无忧退货</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+$m-b: 1.3vw;
+.goods {
+  padding: 4.3vw 3.2vw 7.5vw 3.2vw;
+  background: #fff;
+  .price {
+    color: #F94B4B;
+    font-size: 4.2vw;
+    margin-bottom: $m-b;
+    font-weight: 600;
+  }
+  .title-share {
+    margin-bottom: $m-b;
+    font-size: 4.5vw;
+    color: #333;
+    @include display-flex-between;
+    .title {
+      width: 68vw;
+    }
+    .share {
+      @include display-flex-center;
+      flex-direction: column;
+      justify-content: space-around;
+      width: 16vw;
+      height: 16vw;
+      .van-image {
+        width: 4vw;
+        height: 4vw;
+      }
+      .text {
+        font-size: 2.9vw;
+        color: #999;
+      }
+    }
+  }
+  .goods-tab {
+    display: flex;
+    .item {
+      padding: 1vw;
+      background: #FFF4EE;
+      color: #FF5B00;
+      font-size: 2.7vw;
+      border-radius: 5px;
+      margin-right: 2vw;
+    }
+  }
+}
+.store-tab {
+  display: flex;
+  align-items: center;
+  height: 10.7vw;
+  width: 100%;
+  background: #FCFCFC;
+  padding-left: 3.2vw;
+  box-sizing: border-box;
+  .tab-item {
+    display: flex;
+    align-items: center;
+    font-size: 3.2vw;
+    color: #666;
+    margin-right: 6vw;
+    ::v-deep .van-image {
+      width: 3.2vw;
+      height: 3.2vw;
+      border-radius: 50%;
+      margin-right: 1vw;
+      .van-image__loading-icon {
+        font-size: 1vw;
+      }
+    }
+  }
+}
+</style>

src/views/shopping-mall/components/goods-sku.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="sku-cell">
+    <van-cell title="规格" value="请选择规格数量" @click="show = true" is-link/>
+    <van-sku
+      v-model="show"
+      :sku="sku"
+      :goods="goods"
+      :goods-id="goodsInfo.goodsId"
+      :quota="quota"
+      :quota-used="quotaUsed"
+      :hide-stock="sku.hide_stock"
+      :properties="properties"
+      @buy-clicked="onBuyClicked"
+      @add-cart="onAddCartClicked"
+    >
+    <template #sku-header-price="props">
+      <div class="van-sku__goods-price">
+        <span class="van-sku__price-symbol">￥</span
+        ><span class="van-sku__price-num">{{ props.price }}</span>
+      </div>
+    </template>
+    <template #sku-actions="props">
+      <div class="van-sku-actions">
+        <van-button @click="onPayProduct(props)" color="#FF5B00">立即购买</van-button>
+      </div>
+    </template>
+    </van-sku>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      show: false,
+      sku: {
+        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
+        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
+        tree: [
+          // {
+          //  k: '规格', // skuKeyName：规格类目名称
+          //  k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
+          //  v: [
+          //    {
+          //      id: '1', // skuValueId：规格值 id
+          //      name: '红色', // skuValueName：规格值名称
+          //      imgUrl: 'https://img01.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
+          //      previewImgUrl: 'https://img01.yzcdn.cn/1p.jpg' // 用于预览显示的规格类目图片
+          //    },
+          //    {
+          //      id: '1',
+          //      name: '蓝色',
+          //      imgUrl: 'https://img01.yzcdn.cn/2.jpg',
+          //      previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg'
+          //    }
+          //  ],
+          //  largeImageMode: true //  是否展示大图模式
+          // }
+        ],
+        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
+        list: [
+          {
+            id: 2259, // skuId
+            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
+            s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
+            price: 100, // 价格（单位分）
+            stock_num: 110 // 当前 sku 组合对应的库存
+          }
+        ],
+        price: '1.00' // 默认价格（单位元）
+        // stock_num: 227, // 商品总库存
+        // collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
+        // none_sku: false, // 是否无规格商品
+        // hide_stock: false // 是否隐藏剩余库存
+      },
+      properties: [
+        // 商品属性
+        {
+          k_id: 123, // 属性id
+          k: '规格', // 属性名
+          is_multiple: false, // 是否可多选
+          v: [
+            {
+              id: 1222, // 属性值id
+              name: '珍珠', // 属性值名
+              price: 1, // 属性值加价
+              text_status: 1 // 属性启用/禁用状态 0 - 禁用，1 - 启用
+            },
+            {
+              id: 1223,
+              name: '椰果',
+              price: 1,
+              text_status: 1
+            },
+            {
+              id: 1222, // 属性值id
+              name: '珍珠', // 属性值名
+              price: 1, // 属性值加价
+              text_status: 1 // 属性启用/禁用状态 0 - 禁用，1 - 启用
+            },
+            {
+              id: 1223,
+              name: '椰果',
+              price: 1,
+              text_status: 1
+            },
+            {
+              id: 1222, // 属性值id
+              name: '珍珠', // 属性值名
+              price: 1, // 属性值加价
+              text_status: 1 // 属性启用/禁用状态 0 - 禁用，1 - 启用
+            },
+            {
+              id: 1223,
+              name: '椰果',
+              price: 1,
+              text_status: 1
+            },
+            {
+              id: 1222, // 属性值id
+              name: '珍珠', // 属性值名
+              price: 1, // 属性值加价
+              text_status: 1 // 属性启用/禁用状态 0 - 禁用，1 - 启用
+            },
+            {
+              id: 1223,
+              name: '椰果',
+              price: 1,
+              text_status: 1
+            },
+            {
+              id: 1222, // 属性值id
+              name: '珍珠', // 属性值名
+              price: 1, // 属性值加价
+              text_status: 1 // 属性启用/禁用状态 0 - 禁用，1 - 启用
+            },
+            {
+              id: 1223,
+              name: '椰果',
+              price: 1,
+              text_status: 1
+            }
+          ]
+        }
+      ],
+      quota: 0,
+      quotaUsed: 0,
+      goods: {
+        picture: 'https://img01.yzcdn.cn/1.jpg'
+      },
+      goodsInfo: {
+        goodsId: 1
+      }
+    }
+  },
+  methods: {
+    onBuyClicked ($event) {
+      console.log($event)
+    },
+    onAddCartClicked ($event) {
+      console.log($event)
+    },
+    onPayProduct ($event) {
+      console.log($event)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.van-image {
+  width: 18vw;
+  height: 18vw;
+}
+::v-deep .van-sku-header {
+  .van-sku__goods-price {
+    font-size: 3.7vw;
+    color: #F94B4B;
+    font-weight: 600;
+  }
+}
+.van-sku-actions {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  .van-button {
+    width: 80vw;
+    height: 12vw;
+    border-radius: 1.1vw;
+  }
+}
+</style>

src/views/shopping-mall/detail.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="detail">
+    <nav-bar title="商品详情" @click-left="$router.back()" />
+    <goods-image></goods-image>
+    <goods-share></goods-share>
+    <goods-sku></goods-sku>
+    <goods-classification></goods-classification>
+    <goods-detail></goods-detail>
+    <div class="buy-now">
+      <div class="foot">
+        <van-image class="index"></van-image>
+        <div>首页</div>
+      </div>
+      <van-button color="#FF5B00" @click="$router.push('/order-create')">立即购买</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import GoodsClassification from './components/goods-classification'
+import GoodsImage from './components/goods-image'
+import GoodsShare from './components/goods-share'
+import GoodsSku from './components/goods-sku'
+import GoodsDetail from './components/goods-detail'
+export default {
+  components: { GoodsClassification, GoodsImage, GoodsShare, GoodsSku, GoodsDetail },
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail {
+  box-sizing: border-box;
+  padding-bottom: 23vw;
+}
+.sku-cell {
+  margin: 2.7vw 0;
+}
+.classification {
+  margin-bottom: 2.7vw;
+}
+.buy-now {
+  width: 100%;
+  padding: 1vw 3.2vw 1vw 8.4vw;
+  box-sizing: border-box;
+  background: #fff;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  @include display-flex-between;
+  height: 23vw;
+  .foot {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 2.9vw;
+    color: #333;
+    height: 11.2vw;
+  }
+  .index {
+    width: 4vw;
+    height: 4vw;
+  }
+  .van-button {
+    width: 70vw;
+    height: 11.2vw;
+    border-radius: 1vw;
+  }
+}
+</style>

src/views/shopping-mall/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="shop-mall">
-    <store-card v-for="i in 10" :key="i"/>
+    <store-card v-for="i in 10" :key="i" @handlerClick="handlerClick"/>
   </div>
 </template>
 
@@ -12,7 +12,11 @@ export default {
     }
   },
   mounted () {
-
+  },
+  methods: {
+    handlerClick ($event) {
+      this.$router.push('/goods-detail')
+    }
   }
 }
 </script>

vue.config.js

@@ -3,6 +3,13 @@ module.exports = {
   outputDir: 'dist',
   assetsDir: 'static',
   lintOnSave: process.env.NODE_ENV === 'development',
+  css: {
+    loaderOptions: {
+      scss: {
+        additionalData: '@import "@/globle/variables.scss";'
+      }
+    }
+  },
   devServer: {
     host: '0.0.0.0',
     open: true,