li-guang
2020-12-17 986c442a8ca5036e88e26e8d1d769fb2af943de3
hive-app/pages/workbench/selectProduct.vue
@@ -12,29 +12,41 @@
            </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 class="flex align-center list-right-row">
               <image class="product-img mr-5" mode="aspectFill" src="../../static/images/product.jpg"></image>
               <view>
                  <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
                  <text class="font-10 gray flex justify-start">物品描述</text>
                  <view class="flex justify-between align-center mt-15">
                     <text class="flex justify-start font-12 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>
            </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 class="flex align-center list-right-row">
               <image class="product-img mr-5" mode="aspectFill" src="../../static/images/product.jpg"></image>
               <view>
                  <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
                  <text class="font-10 gray flex justify-start">物品描述</text>
                  <view class="flex justify-between align-center mt-15">
                     <text class="flex justify-start font-12 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>
            </view>
         </scroll-view>
      </view>
      <view class="shopping flex align-center justify-between">
         <view class="flex align-center">
            <view class="shopping-icon iconfont icongouwuche gray">
            <view class="shopping-icon iconfont iconicongouwuche gray" @click="openShoppingCart">
               <view class="shopping-icon-num flex align-center justify-center">
                  <text class="font-10">19</text>
               </view>
@@ -43,14 +55,52 @@
         </view>
         <button class="blue-btn btn mr-0" @click="linkTo('./confirmOrder')">提交订单</button>
      </view>
      <uni-popup ref="popup" type="bottom">
         <view class="popup-content">
            <view class="popup-header flex justify-between">
               <text class="font-16 blue">已选商品</text>
               <view class="flex align-center">
                  <view class="popup-header-icon iconfont iconlajixiang_huaban1 gray"></view>
                  <text class="font-16 gray">清空</text>
               </view>
            </view>
            <view class="popup-row flex align-center">
               <image class="popup-row-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
               <view class="popup-row-right">
                  <text class="flex justify-start font-12">肽妍氨基酸平衡基础洁面乳</text>
                  <view class="flex justify-between align-center">
                     <text class="flex justify-start font-12 red">¥400.00</text>
                     <view class="flex align-center justify-end">
                        <text class="iconfont iconjian blue-outline-btn-circle mr-10 center"></text>
                        <text>1</text>
                        <text class="iconfont iconjia blue-btn-circle ml-10 center"></text>
                     </view>
                  </view>
               </view>
            </view>
            <view class="popup-end flex align-center justify-between">
               <view class="flex align-center">
                  <view class="shopping-icon iconfont iconicongouwuche gray" @click="openShoppingCart">
                     <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>
      </uni-popup>
   </view>
</template>
<script>
   import searchBar from '../../components/searchBar/index.vue';
   import uniPopup from '@/components/uni-popup/uni-popup.vue'
   export default {
      components:{
         searchBar
         searchBar,
         uniPopup
      },
      data(){
         return{
@@ -67,6 +117,9 @@
         },
         active(index){
            this.select=index
         },
         openShoppingCart(){
            this.$refs.popup.open()
         }
      }
   }
@@ -115,8 +168,13 @@
   .list-right-row:not(:first-child){
      margin-top: 10px;
   }
   .product-img{
      width: 81px;
      height: 81px;
   }
   .shopping{
      padding: 20px 10px;
      padding: 10px 10px;
      box-shadow:0 6px 100px rgba(237,234,244,1);
   }
   .shopping-icon{
      font-size: 25px;
@@ -134,7 +192,36 @@
   }
   .btn{
      border-radius: 20px;
      line-height: 30px;
      line-height: 34px;
      padding: 0 24px;
      font-size: 14px;
   }
   .popup-content{
      background: #FFFFFF;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      padding: 10px;
   }
   .popup-header{
      padding: 0 5px 10px;
      border-bottom: 1px solid #EDEAF4;
   }
   .popup-header-icon{
      width: 20px;
      height: 20px;
   }
   .popup-row{
      border-bottom: 1px solid #EDEAF4;
      padding: 10px 5px;
   }
   .popup-row-img{
      width: 40px;
      height: 40px;
   }
   .popup-row-right{
      width: 100%;
   }
   .popup-end{
      padding: 10px 0;
   }
</style>