Merge branch 'master' of https://gitee.com/jyyforjava/hive-app

li-guang

2020-12-18 82c48f3b548145d0cb3c652c47ed4def1e3e4c77

 hive-app/pages/workbench/selectProduct.vue

New file
@@ -0,0 +1,136 @@
<template>
   <!-- 当前客户 -->
   <view class="container">
      <search-bar placeholder="商品名称、编号、拼音" class="ml-10 mr-10"></search-bar>
      <view class="list flex">
         <scroll-view class="list-left" scroll-y>
            <view v-for="(item,index) in list" class="list-left-row" @click="active(index)" :class="select==index?'active':''">
               <text class="font-14">{{item}}</text>
            </view>
         </scroll-view>
         <scroll-view class="list-right" scroll-y>
            <view class="flex flex-v list-right-row">
               <text class="flex justify-start font-14">肽妍氨基酸平衡基础洁面乳</text>
               <text class="flex justify-start font-14 red mt-10">￥400.00</text>
               <view class="flex align-center justify-end mt-10">
                  <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
                  <text>1</text>
                  <text class="iconfont iconjia blue-btn-circle ml-10"></text>
               </view>
            </view>
            <view class="flex flex-v list-right-row">
               <text class="flex justify-start font-14">肽妍氨基酸平衡基础洁面乳</text>
               <text class="flex justify-start font-14 red mt-10">￥400.00</text>
               <view class="flex align-center justify-end mt-10">
                  <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
                  <text>1</text>
                  <text class="iconfont iconjia blue-btn-circle ml-10"></text>
               </view>
            </view>
         </scroll-view>
      </view>
      <view class="shopping flex align-center justify-between">
         <view class="flex align-center">
            <view class="shopping-icon iconfont iconicongouwuche gray">
               <view class="shopping-icon-num flex align-center justify-center">
                  <text class="font-10">19</text>
               </view>
            </view>
            <text class="font-14 blue ml-10">¥110.00</text>
         </view>
         <button class="blue-btn btn mr-0" @click="linkTo('./confirmOrder')">提交订单</button>
      </view>
   </view>
</template>

<script>
   import searchBar from '../../components/searchBar/index.vue';
   export default {
      components:{
         searchBar
      },
      data(){
         return{
            list:['院装产品','美容套餐','美容客装','美容试装','头皮院装'],
            select:'0'
         }
      },
      methods:{
         linkTo(val){
            uni.navigateTo({
               url:val
            })
         },
         active(index){
            this.select=index
         }
      }
   }
</script>

<style>
   page{
      height: 100%;
   }
   .container{
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 10px 0 0;
      box-sizing: border-box;
   }
   .list{
      flex: 1;
   }
   .list-left{
      width: 25%;
      height: 100%;
      text-align: center;
      background: #F6F6F8;
      border-radius: 4px;
   }
   .list-right{
      width: 75%;
      text-align: center;
      padding: 0px 10px;
   }
   .list-left-row{
      padding: 10px;
      color: #8c9fad;
   }
   .active{
      background: #FFFFFF;
      color: #000000;
   }
   .list-right-row{
      border: 1px solid #EDEAF4;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      border-radius: 4px;
      padding: 10px;
   }
   .list-right-row:not(:first-child){
      margin-top: 10px;
   }
   .shopping{
      padding: 20px 10px;
   }
   .shopping-icon{
      font-size: 28px;
      position: relative;
   }
   .shopping-icon-num{
      width: 20px;
      height: 20px;
      background: #518EFF;
      border-radius: 50%;
      color: #FFFFFF;
      position: absolute;
      right: -10px;
      top: -10px;
   }
   .btn{
      border-radius: 20px;
      line-height: 30px;
      font-size: 14px;
   }
</style>