|
|
@@ -1,146 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
|
|
|
- <view class="good-search clearfix" v-if="searchStatus">
|
|
|
- <view id="shop">
|
|
|
- <view class="style addstyle ">单一商品</view>
|
|
|
- <view class="style zuhe">组合商品</view>
|
|
|
- </view>
|
|
|
- <view class="search-from name">
|
|
|
- <text class="iconfont icon-iconfonticonfontsousuo1"></text>
|
|
|
- <input class="input"
|
|
|
- type="text"
|
|
|
- focus
|
|
|
- confirm-type="search"
|
|
|
- v-model="searchInputVal"
|
|
|
- placeholder="请输入商品关键词"
|
|
|
- @input="onShowClose"
|
|
|
- @confirm="searchOpertor"
|
|
|
- maxlength="20"/>
|
|
|
- <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
|
|
|
- </view>
|
|
|
- <view class="search-btn">
|
|
|
- <button class="search-btn" type="default" @click.stop="searchOpertor">搜索2</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <list-skeleton v-if="showSkeleton"></list-skeleton>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- components: {
|
|
|
-
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
- };
|
|
|
- },
|
|
|
- }
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
-.commodity-list-wrapper {
|
|
|
- scroll-view {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .style{
|
|
|
- width: 128rpx;
|
|
|
- height: 64rpx;
|
|
|
- background: #fff;
|
|
|
- font-size: 26rpx;
|
|
|
- display: inline-block;
|
|
|
- border-radius: 10rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 64rpx;
|
|
|
- border: 2rpx solid #EEEEEE;
|
|
|
- position: relative;
|
|
|
- margin-right: 12rpx;
|
|
|
- }
|
|
|
- .danyi i{
|
|
|
- color: #E15616;
|
|
|
- position: absolute;
|
|
|
- top: 20rpx;
|
|
|
- right: 4rpx;
|
|
|
- font-weight: bold
|
|
|
- }
|
|
|
- .addstyle{
|
|
|
- background: linear-gradient(-42deg, transparent 28rpx, #E15616 0) top right;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- .show-more-btn {
|
|
|
- width: 276rpx;
|
|
|
- height: 52rpx;
|
|
|
- line-height: 52rpx;
|
|
|
- border: 2rpx solid #D8D8D8;
|
|
|
- background: #F7F7F7;
|
|
|
- font-size: 26rpx;
|
|
|
- margin: 26rpx 0;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- margin-left: -138rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .good-search{
|
|
|
- height: 64rpx;
|
|
|
- width: 702rpx;
|
|
|
- padding: 24rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 999;
|
|
|
- .search-from{
|
|
|
- width: 330rpx;
|
|
|
- height: 64rpx;
|
|
|
- background: #F7F7F7;
|
|
|
- border-radius: 14rpx;
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- .input{
|
|
|
- // width: 500rpx;
|
|
|
- height: 64rpx;
|
|
|
- float: left;
|
|
|
- line-height: 64rpx;
|
|
|
- color: $text-color;
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- .icon-iconfonticonfontsousuo1{
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- text-align: center;
|
|
|
- display: block;
|
|
|
- font-size: $font-size-38;
|
|
|
- float: left;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .icon-shanchu1{
|
|
|
- font-size: $font-size-32;
|
|
|
- color: #999999;
|
|
|
- position: absolute;
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- text-align: center;
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
- }
|
|
|
- .search-btn{
|
|
|
- // width: 90rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $color-system;
|
|
|
- float: left;
|
|
|
- background: #FFFFFF;
|
|
|
- margin-left: 10rpx
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
