|
|
@@ -1,951 +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 class="search-from name">
|
|
|
- <text class="iconfont icon-sousuo"></text>
|
|
|
- <input
|
|
|
- class="input"
|
|
|
- type="text"
|
|
|
- :focus="isFocus"
|
|
|
- confirm-type="search"
|
|
|
- v-model="searchInputVal"
|
|
|
- placeholder="请输入商品关键词"
|
|
|
- @input="onShowClose"
|
|
|
- @confirm="searchOpertor(tabIndex)"
|
|
|
- maxlength="20"
|
|
|
- />
|
|
|
- <!-- <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText(tabIndex)"></text> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 骨架 -->
|
|
|
- <list-skeleton v-if="showSkeleton"></list-skeleton>
|
|
|
- <!-- 商品为空时 -->
|
|
|
- <view class="empty-container" v-if="isShowEmpty">
|
|
|
- <image
|
|
|
- class="empty-container-image"
|
|
|
- src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
|
|
|
- ></image>
|
|
|
- <text class="error-text">{{ isShowEmptyText }}</text>
|
|
|
- </view>
|
|
|
- <!-- 单一商品 -->
|
|
|
- <view class="product-container" v-else>
|
|
|
- <scroll-view
|
|
|
- :style="{ height: scrollHeight + 'px' }"
|
|
|
- @scrolltolower="scrolltolower(tabIndex)"
|
|
|
- scroll-y
|
|
|
- v-if="listData.length > 0"
|
|
|
- >
|
|
|
- <view
|
|
|
- v-for="(item, index) in 10"
|
|
|
- :key="index"
|
|
|
- :id="item.id"
|
|
|
- class="all-type-list-content commodity-list"
|
|
|
- @click.stop="navToDetailPage(item.p_id)"
|
|
|
- >
|
|
|
- <image
|
|
|
- mode="widthFix"
|
|
|
- src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
|
|
|
- class="list-img"
|
|
|
- alt="list-img"
|
|
|
- ></image>
|
|
|
- <view class="list-details-info">
|
|
|
- <!-- 商品名称 -->
|
|
|
- <text class="list-details-title">韩国恩盛进口氢洁气小气泡清韩国恩盛进口氢洁气小气泡清</text>
|
|
|
- <!-- 商品标签 -->
|
|
|
- <view class="list-details-tags">
|
|
|
- <tui-tag type="danger" class="tag" padding="6rpx" size="20rpx" plain>商品标签</tui-tag>
|
|
|
- </view>
|
|
|
- <text class="list-details-specs">规格：30g×5片/盒</text>
|
|
|
-
|
|
|
- <!-- 商品价格 -->
|
|
|
- <view class="goods-price">
|
|
|
- <view class="price"> ￥23333.00 </view> <view class="shop-btn" @click.stop="showAddCartModal"> 购买 </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-if="showLoading && listData.length > 4 && !showRegularBtn">
|
|
|
- <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow"
|
|
|
- >{{ loadingText }}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view
|
|
|
- >
|
|
|
- <view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <!-- 组合商品 -->
|
|
|
- </view>
|
|
|
- <!-- 可拖动悬浮按钮 -->
|
|
|
- <cm-drag
|
|
|
- :cartNum="cartQuantity"
|
|
|
- :isDock="true"
|
|
|
- :existTabBar="true"
|
|
|
- @btnClick="btnClick"
|
|
|
- @btnTouchstart="btnTouchstart"
|
|
|
- @btnTouchend="btnTouchend"
|
|
|
- >
|
|
|
- </cm-drag>
|
|
|
- <!-- 透明模态层 -->
|
|
|
- <modal-layer v-if="false"></modal-layer>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
|
|
|
-import modalLayer from '@/components/cm-module/modal-layer/modal-layer'
|
|
|
-import cmDrag from '@/components/cm-module/cm-drag/cm-drag'
|
|
|
-import tuiTag from '@/components/thorui/tui-tag/tui-tag'
|
|
|
-import { mapState, mapMutations } from 'vuex'
|
|
|
-export default {
|
|
|
- name: 'productList',
|
|
|
- components: {
|
|
|
- listSkeleton,
|
|
|
- modalLayer,
|
|
|
- cmDrag,
|
|
|
- tuiTag
|
|
|
- },
|
|
|
- props: {
|
|
|
- searchStatus: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isShowClose: false,
|
|
|
- searchInputVal: '',
|
|
|
- isModallayer: false,
|
|
|
- windowHeight: '',
|
|
|
- showSkeleton: false,
|
|
|
- priceLoading: true,
|
|
|
- isShowEmpty: false,
|
|
|
- isShowEmptyText: '搜索相关商品',
|
|
|
- clubUserId: '',
|
|
|
- identity: '',
|
|
|
- isFocus: false,
|
|
|
- scrollHeight: '',
|
|
|
- listData: [],
|
|
|
- combinationProduct: [],
|
|
|
- zuheProductList: [], //组合商品列表
|
|
|
- showLoading: false,
|
|
|
- loadingNow: true,
|
|
|
- loadingText: '上拉加载更多',
|
|
|
- pageSize: 20,
|
|
|
- zuhepageSize: 5,
|
|
|
- pageNum: 1,
|
|
|
- totalPage: 1,
|
|
|
- hasNextPage: false,
|
|
|
- pullFlag: true,
|
|
|
- fromRegularPurchasePage: false,
|
|
|
- cartQuantity: 0,
|
|
|
- showRegularBtn: false,
|
|
|
- isPrecedence: false,
|
|
|
- ladderPriceList: [], //是否 阶梯,
|
|
|
- tabIndex: 0,
|
|
|
- goodsList: [],
|
|
|
- tabBars: [{ name: '单一', id: 'danyi' }, { name: '组合', id: 'zuhe' }],
|
|
|
- isShow: false,
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.setScrollHeight()
|
|
|
- this.$api
|
|
|
- .getComStorage('userInfo')
|
|
|
- .then(resolve => {
|
|
|
- if (resolve.userIdentity == 1) {
|
|
|
- this.identity = 1
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.log(error)
|
|
|
- })
|
|
|
- this.$api.getComStorage('orderUserInfo').then(resolve => {
|
|
|
- this.clubUserId = resolve.userID
|
|
|
- })
|
|
|
- this.getProductAgainInfo()
|
|
|
- this.isFocus = true
|
|
|
- },
|
|
|
- filters: {
|
|
|
- NumFormat: function(text) {
|
|
|
- //处理金额
|
|
|
- return Number(text).toFixed(2)
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['hasLogin', 'userInfo'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- closeDrawer(){
|
|
|
- this.visible = false
|
|
|
- },
|
|
|
- // 数量选择框
|
|
|
- showAddCartModal() {
|
|
|
- this.visible = true
|
|
|
- },
|
|
|
- scrolltolower(tabIndex) {
|
|
|
- if (tabIndex == 0) {
|
|
|
- if (this.totalPage > this.listData.length && this.pullFlag) {
|
|
|
- this.getProductAgainInfo(true)
|
|
|
- }
|
|
|
- } else if (tabIndex == 1) {
|
|
|
- if (this.hasNextPage && this.pullFlag) {
|
|
|
- this.getcombinationProduct(true)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- setScrollHeight() {
|
|
|
- const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
|
|
|
- this.windowHeight = windowHeight - 1
|
|
|
- this.scrollHeight = windowHeight - 66
|
|
|
- },
|
|
|
- getProductAgainInfo(loadMore) {
|
|
|
- this.showLoading = true
|
|
|
- this.priceLoading = true
|
|
|
- this.loadingNow = true
|
|
|
- this.loadingText = '加载中'
|
|
|
- this.isShowEmpty = false
|
|
|
- if (loadMore) {
|
|
|
- this.pageNum += 1
|
|
|
- }
|
|
|
- let params = {
|
|
|
- identity: this.identity,
|
|
|
- keyword: this.searchInputVal,
|
|
|
- pageNum: this.pageNum,
|
|
|
- pageSize: this.pageSize,
|
|
|
- sortField: '',
|
|
|
- sortType: ''
|
|
|
- }
|
|
|
- this.ProductService.GetProductSearchList(params)
|
|
|
- .then(response => {
|
|
|
- this.isShowWrapper = true
|
|
|
- const resData = JSON.parse(response.data)
|
|
|
- const resList = resData.items
|
|
|
- if (resList && resList.length > 0) {
|
|
|
- this.totalPage = resData.total
|
|
|
- this.showEmpty = false
|
|
|
- if (loadMore) {
|
|
|
- this.listData = [...this.listData, ...resList]
|
|
|
- this.getProductPrice()
|
|
|
- } else {
|
|
|
- this.listData = [...resList]
|
|
|
- this.getProductPrice()
|
|
|
- this.showSkeleton = false
|
|
|
- }
|
|
|
- // 防上拉暴滑
|
|
|
- this.pullFlag = false
|
|
|
- setTimeout(() => {
|
|
|
- this.pullFlag = true
|
|
|
- }, 500)
|
|
|
- // 底部提示文案
|
|
|
- if (this.totalPage > this.listData.length) {
|
|
|
- this.loadingText = '上拉加载更多'
|
|
|
- } else {
|
|
|
- this.showLoading = true
|
|
|
- this.loadingNow = false
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (!loadMore) {
|
|
|
- this.isShowEmpty = true
|
|
|
- this.isShowEmptyText = '暂无相关商品'
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- getProductPrice() {
|
|
|
- //获取商品或者活动价格
|
|
|
- let productIdArr = []
|
|
|
- let productIds = ''
|
|
|
- this.listData.map(item => {
|
|
|
- // 0公开价格 1不公开价格 2仅对会员机构公开
|
|
|
- productIdArr.push(item.p_id)
|
|
|
- })
|
|
|
- productIds = productIdArr.join(',')
|
|
|
- this.ProductService.querySearchProductPrice({ userId: this.clubUserId, productIds: productIds })
|
|
|
- .then(response => {
|
|
|
- this.listData = this.ReturnNewProducts(this.listData, response.data)
|
|
|
- this.priceLoading = false
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- ReturnNewProducts(Array, list) {
|
|
|
- //合并字段
|
|
|
- let NewArray = []
|
|
|
- Array.map(item => {
|
|
|
- for (let i = 0; i < list.length; i++) {
|
|
|
- if (item.p_id == list[i].productId) {
|
|
|
- NewArray.push(Object.assign(item, list[i]))
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- return NewArray
|
|
|
- },
|
|
|
- searchOpertor(tabIndex) {
|
|
|
- //搜索商品
|
|
|
- if (tabIndex == 0) {
|
|
|
- if (this.searchInputVal == '') {
|
|
|
- this.$util.msg('请输入商品关键词', 2000)
|
|
|
- } else {
|
|
|
- this.pageNum = 1
|
|
|
- this.showSkeleton = true
|
|
|
- this.getProductAgainInfo()
|
|
|
- this.isFocus = false
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.pageNum = 1
|
|
|
- this.showSkeleton = true
|
|
|
- this.getcombinationProduct()
|
|
|
- this.isFocus = false
|
|
|
- }
|
|
|
- },
|
|
|
- getcombinationProduct(loadMore) {
|
|
|
- //组合搜索商品
|
|
|
- this.showLoading = true
|
|
|
- this.loadingNow = true
|
|
|
- this.loadingText = '加载中'
|
|
|
- this.isShowEmpty = false
|
|
|
- if (loadMore) {
|
|
|
- this.pageNum += 1
|
|
|
- }
|
|
|
- let params = {
|
|
|
- clubUserId: this.clubUserId,
|
|
|
- pageNum: this.pageNum,
|
|
|
- pageSize: this.zuhepageSize,
|
|
|
- searchWord: this.searchInputVal
|
|
|
- }
|
|
|
- this.SellerService.GetCombinationProduct(params)
|
|
|
- .then(response => {
|
|
|
- this.isShowWrapper = true
|
|
|
- const responseData = response.data
|
|
|
- if (responseData.results && responseData.results.length > 0) {
|
|
|
- this.hasNextPage = responseData.hasNextPage
|
|
|
- this.isShowEmpty = false
|
|
|
- if (loadMore) {
|
|
|
- this.combinationProduct = [...this.combinationProduct, ...responseData.results]
|
|
|
- } else {
|
|
|
- this.combinationProduct = [...responseData.results]
|
|
|
-
|
|
|
- this.showSkeleton = false
|
|
|
- }
|
|
|
- // 防上拉暴滑
|
|
|
- this.pullFlag = false
|
|
|
- setTimeout(() => {
|
|
|
- this.pullFlag = true
|
|
|
- }, 500)
|
|
|
- // 底部提示文案
|
|
|
- if (this.hasNextPage) {
|
|
|
- this.loadingText = '上拉加载更多'
|
|
|
- } else {
|
|
|
- this.showLoading = true
|
|
|
- this.loadingNow = false
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.isShowEmpty = true
|
|
|
- this.isShowEmptyText = '暂无相关商品'
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- changeCountAdd(item, pros) {
|
|
|
- //商品数量加加
|
|
|
- if (pros.initProductNum == 0) {
|
|
|
- pros.initProductNum = pros.minBuyNumber
|
|
|
- this.processActivityPrice(pros)
|
|
|
- } else if (pros.initProductNum >= pros.minBuyNumber) {
|
|
|
- pros.initProductNum++
|
|
|
- this.processActivityPrice(pros)
|
|
|
- }
|
|
|
- this.totalPeice(item)
|
|
|
- this.totalCount(item)
|
|
|
- this.totalKind(item)
|
|
|
- },
|
|
|
- changeCountSub(item, pros) {
|
|
|
- //商品数量减减
|
|
|
- if (pros.initProductNum == 0) {
|
|
|
- this.$util.msg(`采购数量不能小于0`, 2000)
|
|
|
- return
|
|
|
- } else if (pros.initProductNum == pros.minBuyNumber) {
|
|
|
- pros.initProductNum = 0
|
|
|
- this.processActivityPrice(pros)
|
|
|
- } else {
|
|
|
- pros.initProductNum--
|
|
|
- this.processActivityPrice(pros)
|
|
|
- }
|
|
|
- this.totalPeice(item)
|
|
|
- this.totalCount(item)
|
|
|
- this.totalKind(item)
|
|
|
- },
|
|
|
- changeNnmber(e, item, pros) {
|
|
|
- //输入商品数量更新
|
|
|
- let _value = e.detail.value
|
|
|
- if (!this.$api.isNumber(_value)) {
|
|
|
- pros.initProductNum = pros.minBuyNumber
|
|
|
- } else if (_value < pros.minBuyNumber) {
|
|
|
- this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`, 2000)
|
|
|
- pros.initProductNum = pros.minBuyNumber
|
|
|
- } else {
|
|
|
- pros.initProductNum = parseInt(e.detail.value)
|
|
|
- this.processActivityPrice(pros)
|
|
|
- }
|
|
|
- this.totalPeice(item)
|
|
|
- this.totalCount(item)
|
|
|
- this.totalKind(item)
|
|
|
- },
|
|
|
- totalPeice(item) {
|
|
|
- //计算总价格,每次调用此方法，将初始值为0，遍历价格并累加
|
|
|
- let prosPrice = 0
|
|
|
- let productsList = []
|
|
|
- productsList = item.combinationProductList
|
|
|
- productsList.forEach(pros => {
|
|
|
- prosPrice += pros.retailPrice * pros.initProductNum
|
|
|
- item.productTotalAmount = prosPrice
|
|
|
- })
|
|
|
- // console.log(prosPrice)
|
|
|
- },
|
|
|
- totalCount(item) {
|
|
|
- //计算总数量
|
|
|
- let prosAllCount = 0
|
|
|
- let productsList = []
|
|
|
- productsList = item.combinationProductList
|
|
|
- productsList.forEach(pros => {
|
|
|
- prosAllCount += parseInt(pros.initProductNum)
|
|
|
- item.productTotalNum = prosAllCount
|
|
|
- })
|
|
|
- // console.log(prosAllCount)
|
|
|
- },
|
|
|
- totalKind(item) {
|
|
|
- //计算商品种类
|
|
|
- let productsList = []
|
|
|
- let checkList = []
|
|
|
- productsList = item.combinationProductList
|
|
|
- productsList.forEach(pros => {
|
|
|
- if (pros.initProductNum > 0) {
|
|
|
- checkList.push(pros)
|
|
|
- item.productKind = checkList.length
|
|
|
- } else {
|
|
|
- item.productKind = checkList.length
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- processActivityPrice(pros) {
|
|
|
- //单独处理活动价格和阶梯价格
|
|
|
- let ladderPriceList = pros.ladderPriceList
|
|
|
- if (pros.ladderPriceFlag == '0' || pros.actStatus == 1) {
|
|
|
- pros.totalPrice = pros.initProductNum * pros.retailPrice
|
|
|
- } else {
|
|
|
- ladderPriceList.forEach((item, index) => {
|
|
|
- if (pros.initProductNum >= item.buyNum) {
|
|
|
- pros.retailPrice = item.buyPrice
|
|
|
- pros.totalPrice = pros.initProductNum * item.buyPrice
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- operationHanld(prop) {
|
|
|
- this.$emit('operationConfim', prop)
|
|
|
- },
|
|
|
- alertjieti(pros) {
|
|
|
- this.$emit('alertjietiConfim', pros)
|
|
|
- },
|
|
|
- changeTab(index) {
|
|
|
- this.tabIndex = index
|
|
|
- if (index == 0) {
|
|
|
- this.pageNum = 1
|
|
|
- this.getProductAgainInfo()
|
|
|
- } else {
|
|
|
- this.getcombinationProduct()
|
|
|
- }
|
|
|
- // this.$emit('changetab',index);
|
|
|
- },
|
|
|
- navToDetailPage(id) {
|
|
|
- this.isModallayer = true
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
- this.isModallayer = false
|
|
|
- },
|
|
|
- repurchModel() {
|
|
|
- this.$util.modal('', '此商品的价格有变化,原来的购买价已不适用', '知道了', '', false, () => {})
|
|
|
- },
|
|
|
- onShowClose() {
|
|
|
- //输入框失去焦点时触发
|
|
|
- if (this.searchInputVal != '') {
|
|
|
- this.isShowClose = true
|
|
|
- } else {
|
|
|
- this.isShowClose = false
|
|
|
- }
|
|
|
- },
|
|
|
- delInputText(tabIndex) {
|
|
|
- //清除输入框内容
|
|
|
- if (tabIndex == 0) {
|
|
|
- this.searchInputVal = ''
|
|
|
- this.listData = []
|
|
|
- this.isFocus = true
|
|
|
- this.isShowClose = false
|
|
|
- this.loadingNow = false
|
|
|
- this.isShowEmpty = true
|
|
|
- this.isShowEmptyText = '暂无相关商品'
|
|
|
- } else {
|
|
|
- this.searchInputVal = ''
|
|
|
- this.isShowClose = false
|
|
|
- this.isFocus = true
|
|
|
- this.getcombinationProduct()
|
|
|
- }
|
|
|
- },
|
|
|
- isInterceptHtmlFn(text) {
|
|
|
- let name = this.$reg.interceptHtmlFn(text)
|
|
|
- return name
|
|
|
- },
|
|
|
- PromotionsFormat(promo) {
|
|
|
- //促销活动类型数据处理
|
|
|
- if (promo != null) {
|
|
|
- if (promo.type == 1 && promo.mode == 1) {
|
|
|
- return true
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- return false
|
|
|
- },
|
|
|
- btnClick() {
|
|
|
- this.$emit('goCartPage')
|
|
|
- },
|
|
|
- btnTouchstart() {
|
|
|
- // console.log('btnTouchstart');
|
|
|
- },
|
|
|
- btnTouchend() {
|
|
|
- // console.log('btnTouchend');
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-.all-zuhe-list {
|
|
|
- background: #ffffff;
|
|
|
-}
|
|
|
-
|
|
|
-.foot_conten {
|
|
|
- width: 655rpx;
|
|
|
- background: #fff;
|
|
|
- font-size: 28rpx;
|
|
|
- height: 80rpx;
|
|
|
- // line-height: 80rpx;
|
|
|
- display: inherit;
|
|
|
- padding: 10px;
|
|
|
- overflow: hidden;
|
|
|
- margin: 20rpx auto;
|
|
|
-}
|
|
|
-.zuhe_foot-box {
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- // text-overflow: ellipsis;
|
|
|
- width: 490rpx;
|
|
|
-}
|
|
|
-.zuhe_foot-box text {
|
|
|
- margin-right: 36rpx;
|
|
|
-}
|
|
|
-.foot_text {
|
|
|
- color: #ff2a2a;
|
|
|
-}
|
|
|
-.foot_conten .buycart {
|
|
|
- width: 162rpx;
|
|
|
- height: 64rpx;
|
|
|
- background: #efaf00 !important;
|
|
|
- color: #fff;
|
|
|
- font-size: 26rpx;
|
|
|
- border-radius: 36rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 64rpx;
|
|
|
- float: right;
|
|
|
-}
|
|
|
-.price-none {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #666666;
|
|
|
-}
|
|
|
-.zuhe_title {
|
|
|
- background: #ffffff;
|
|
|
- height: 76rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #1675e1;
|
|
|
- border-bottom: 4rpx solid #1675e1;
|
|
|
- line-height: 76rpx;
|
|
|
- padding-left: 30rpx;
|
|
|
- &.active {
|
|
|
- color: #e15616;
|
|
|
- border-bottom: 4rpx solid #e15616;
|
|
|
- }
|
|
|
-}
|
|
|
-.tabstyle {
|
|
|
- width: 128rpx;
|
|
|
- height: 76rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- display: inline-block;
|
|
|
- border-radius: 10rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 76rpx;
|
|
|
- border: 2rpx solid #eeeeee;
|
|
|
- position: relative;
|
|
|
- margin-right: 12rpx;
|
|
|
- &.addstyle {
|
|
|
- background: $btn-confirm;
|
|
|
- color: #ffffff;
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-top: 20rpx solid transparent;
|
|
|
- border-right: 20rpx solid #ffffff;
|
|
|
- border-left: 20rpx solid transparent;
|
|
|
- border-bottom: 20rpx solid #ffffff;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .icon-gou {
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- text-align: center;
|
|
|
- color: #e15616;
|
|
|
- position: absolute;
|
|
|
- bottom: -5rpx;
|
|
|
- right: -5rpx;
|
|
|
- font-weight: bold;
|
|
|
- font-size: $font-size-28;
|
|
|
- }
|
|
|
-}
|
|
|
-.commodity-list-wrapper {
|
|
|
- .product-container {
|
|
|
- padding-top: 130rpx;
|
|
|
- }
|
|
|
- scroll-view {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .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 {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- z-index: 999;
|
|
|
- background-color: #fff;
|
|
|
- width: 702rpx;
|
|
|
- height: 66rpx;
|
|
|
- padding: 32rpx 24rpx;
|
|
|
- .search-from {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 30rpx;
|
|
|
- width: 702rpx;
|
|
|
- height: 66rpx;
|
|
|
- background-color: #f7f7f7;
|
|
|
- border-radius: 33rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- .icon-sousuo {
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-32;
|
|
|
- }
|
|
|
- .input {
|
|
|
- font-size: $font-size-26;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.all-type-list-content {
|
|
|
- // height: 240rpx;
|
|
|
- padding: 24rpx;
|
|
|
- background: #fff;
|
|
|
- margin-bottom: 2rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- box-sizing: content-box;
|
|
|
- .list-img {
|
|
|
- width: 312rpx;
|
|
|
- height: 207rpx !important;
|
|
|
- margin-right: 26rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- border: 2rpx solid #f3f3f3;
|
|
|
- }
|
|
|
-}
|
|
|
-.zuhe-list-content {
|
|
|
- width: 655rpx;
|
|
|
- // height: 214rpx;
|
|
|
- background: #fff;
|
|
|
- border: 2rpx solid #def4ff;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- box-sizing: content-box;
|
|
|
- margin-top: 10rpx;
|
|
|
- border-radius: 14rpx;
|
|
|
- margin: 10rpx auto;
|
|
|
- padding: 20rpx;
|
|
|
- &.stylecontent {
|
|
|
- border: 2rpx solid #fff0de;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.list-details-info {
|
|
|
- width: 100%;
|
|
|
- flex-direction: column;
|
|
|
- font-size: 26rpx;
|
|
|
- position: relative;
|
|
|
- .list-details-title {
|
|
|
- line-height: 38rpx;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- .list-details-tags {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- margin: 10rpx 0;
|
|
|
- height: 34rpx;
|
|
|
- }
|
|
|
- .goods-price {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .price {
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: $uni-text-color-price;
|
|
|
- }
|
|
|
- .shop-btn {
|
|
|
- width: 160rpx;
|
|
|
- height: 56rpx;
|
|
|
- border: 1px solid #333333;
|
|
|
- border-radius: 28rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 56rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-details-specs {
|
|
|
- width: 100%;
|
|
|
- display: inline-block;
|
|
|
- margin: 5rpx 0;
|
|
|
- color: #999;
|
|
|
- font-size: 20rpx;
|
|
|
- line-height: 28rpx;
|
|
|
- }
|
|
|
- .list-details-miniQuantity {
|
|
|
- width: 100%;
|
|
|
- display: inline-block;
|
|
|
- margin-top: 7rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-.list-details-price {
|
|
|
- width: 100%;
|
|
|
- .floor-item-act {
|
|
|
- height: 54rpx;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- float: left;
|
|
|
- .floor-tags {
|
|
|
- height: 28rpx;
|
|
|
- border-radius: 6rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- line-height: 28rpx;
|
|
|
- color: $color-system;
|
|
|
- text-align: center;
|
|
|
- display: inline-block;
|
|
|
- padding:0 5rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- margin-left: 15rpx;
|
|
|
- border: 1px solid #e15616;
|
|
|
- }
|
|
|
- }
|
|
|
- .price-icon {
|
|
|
- width: 22rpx;
|
|
|
- height: 28rpx;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- .price-icon + text {
|
|
|
- font-size: 25rpx;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- .list-login-now {
|
|
|
- width: 375rpx;
|
|
|
- color: #f8c499;
|
|
|
- .p-no {
|
|
|
- float: left;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $color-system;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .login-now {
|
|
|
- padding: 10rpx 10rpx 10rpx 0;
|
|
|
- }
|
|
|
- .list-none {
|
|
|
- margin-top: 15rpx;
|
|
|
- .price-small {
|
|
|
- font-size: $font-size-24;
|
|
|
- line-height: 40rpx;
|
|
|
- color: #ff2a2a;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-price-loding {
|
|
|
- font-size: $font-size-24;
|
|
|
- line-height: 54rpx;
|
|
|
- color: #ff2a2a;
|
|
|
- }
|
|
|
- .list-shop {
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- &.com {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .list-price {
|
|
|
- color: #ff2a2a;
|
|
|
- float: left;
|
|
|
- line-height: 54rpx;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .price-larger {
|
|
|
- font-size: $font-size-26;
|
|
|
- display: inline-block;
|
|
|
- &.none {
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-price-all {
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .zuhe_price-larger {
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- height: 54rpx;
|
|
|
- color: #666666;
|
|
|
- .price-larger {
|
|
|
- float: left;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .price-two {
|
|
|
- color: #666666;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .zuhe_list_zj {
|
|
|
- color: #ff2a2a;
|
|
|
- }
|
|
|
- .price-view {
|
|
|
- display: inline-block;
|
|
|
- width: 40rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- text-align: center;
|
|
|
- color: #ffffff;
|
|
|
- height: 36rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- &.ladder {
|
|
|
- background: linear-gradient(135deg, rgba(255, 0, 0, 1) 0%, rgba(242, 143, 49, 1) 100%);
|
|
|
- }
|
|
|
- &.activity {
|
|
|
- background: linear-gradient(135deg, rgba(128, 0, 255, 1) 0%, rgba(242, 49, 153, 1) 100%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .zuhe_list_price .price-view {
|
|
|
- margin-left: 20rpx;
|
|
|
- float: left;
|
|
|
- margin-top: 5rpx;
|
|
|
- }
|
|
|
- .zuhe_list_price {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- margin-top: 10rpx;
|
|
|
- }
|
|
|
- .count {
|
|
|
- float: right;
|
|
|
- border: 1px solid #eeeeee;
|
|
|
- border-radius: 10rpx;
|
|
|
- .number-box {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .iconfont {
|
|
|
- font-size: $font-size-24;
|
|
|
- padding: 0 16rpx;
|
|
|
- color: $text-color;
|
|
|
- text-align: center;
|
|
|
- line-height: 48rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .btn-input {
|
|
|
- width: 100rpx;
|
|
|
- height: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- background: #f8f8f8;
|
|
|
- border-radius: 4rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
- border-right: 1px solid #eeeeee;
|
|
|
- border-left: 1px solid #eeeeee;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .list-price-none {
|
|
|
- width: 100%;
|
|
|
- .price-none {
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- .icon-wenhao {
|
|
|
- font-size: $font-size-32;
|
|
|
- color: #0091ff;
|
|
|
- margin-left: 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .add-cart-btn {
|
|
|
- flex: 4;
|
|
|
- width: 140rpx;
|
|
|
- height: 54rpx;
|
|
|
- line-height: 54rpx;
|
|
|
- border-radius: 27rpx;
|
|
|
- color: #fff;
|
|
|
- font-size: 24rpx;
|
|
|
- margin-right: 0;
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid #c9c9c9;
|
|
|
- color: $text-color;
|
|
|
- }
|
|
|
- .zuhe_btn {
|
|
|
- float: right;
|
|
|
- }
|
|
|
-}
|
|
|
-.zuhe_list_price {
|
|
|
- display: block !important;
|
|
|
-}
|
|
|
-.zuhe_list_text {
|
|
|
- margin-top: 0;
|
|
|
-}
|
|
|
-</style>
|
喻文俊