|
|
@@ -0,0 +1,1027 @@
|
|
|
+<template>
|
|
|
+ <view class="container product clearfix">
|
|
|
+ <view class="superv-header" v-if="!isEmpty">
|
|
|
+ <view class="superv-header-click">
|
|
|
+ <view class="oltext"
|
|
|
+ >共<text class="red">{{ totalRecord }}</text
|
|
|
+ >件商品</view
|
|
|
+ >
|
|
|
+ <view class="ortext" @click="showPopup(0)" v-if="!popupShow">编辑</view>
|
|
|
+ <view class="ortext" @click="hidePopup(0)" v-else>完成</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-content" :style="{ paddingBottom: popupShow ? '68rpx' : '0' }">
|
|
|
+ <view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
|
|
|
+ <!-- 空白页 -->
|
|
|
+ <view class="empty-container" v-if="isEmpty">
|
|
|
+ <image
|
|
|
+ class="empty-container-image"
|
|
|
+ :src="StaticUrl + '/icon/icon-collection-empty@2x.png'"
|
|
|
+ ></image>
|
|
|
+ <text class="error-text">暂无收藏商品~</text>
|
|
|
+ </view>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <view class="tui-cart-cell tui-mtop" v-for="(pros, index) in productList" :key="index">
|
|
|
+ <view class="tui-goods-item">
|
|
|
+ <view class="tui-goods-main">
|
|
|
+ <view class="tui-goods-checkBox" v-if="popupShow">
|
|
|
+ <view
|
|
|
+ class="checkbox iconfont"
|
|
|
+ :class="[pros.isChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
|
|
|
+ @click="checkedSoperv(pros)"
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tui-goods-image" @click.stop="navToDetailPage(pros.productId)"
|
|
|
+ ><image :src="pros.image" class="tui-goods-img" />
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="tui-goods-info"
|
|
|
+ :style="{ width: popupShow ? '420rpx' : '528rpx' }"
|
|
|
+ @click.stop="navToDetailPage(pros.productId)"
|
|
|
+ >
|
|
|
+ <text class="list-details-title">{{ pros.name }}</text>
|
|
|
+ <text class="list-details-specs">规格：{{ pros.unit != null ? pros.unit : '' }}</text>
|
|
|
+ <view class="list-details-price" v-if="pros.priceFlag == 1">
|
|
|
+ <view class="list-none"><view class="price-small">￥未公开价格</view></view>
|
|
|
+ </view>
|
|
|
+ <view class="list-details-price" v-else-if="pros.priceFlag == 2">
|
|
|
+ <view class="list-none"><view class="price-small">￥价格仅会员可见</view></view>
|
|
|
+ </view>
|
|
|
+ <template v-else>
|
|
|
+ <view class="list-details-price">
|
|
|
+ <view class="list-price">
|
|
|
+ <text
|
|
|
+ class="price-larger"
|
|
|
+ :class="PromotionsFormat(pros.promotions) ? 'none' : ''"
|
|
|
+ >
|
|
|
+ ￥{{
|
|
|
+ (PromotionsFormat(pros.promotions)
|
|
|
+ ? pros.originalPrice
|
|
|
+ : pros.price) | NumFormat
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="add-cart-btn" v-if="!popupShow" @click.stop="showPopup(1, pros)"
|
|
|
+ >数量</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="list-details-price none">
|
|
|
+ <view class="floor-item-act" v-if="pros.actStatus == 1">
|
|
|
+ <template>
|
|
|
+ <view class="floor-tags" v-if="PromotionsFormat(pros.promotions)">
|
|
|
+ {{ pros.promotions.name }}
|
|
|
+ <text v-if="pros.priceFlag != 1"
|
|
|
+ >:￥{{ pros.price | NumFormat }}</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="floor-tags" v-else>{{ pros.promotions.name }}</view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view class="floor-item-act" v-if="pros.actStatus == 0">
|
|
|
+ <view
|
|
|
+ class="floor-tags"
|
|
|
+ v-if="pros.actStatus == 0 && pros.ladderPriceFlag == 1"
|
|
|
+ >阶梯价格</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
+ <tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText"></tui-nomore>
|
|
|
+ <!--加载loadding-->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 取消收藏操作 -->
|
|
|
+ <tui-bottom-popup :radius="false" :mask="false" :show="popupShow">
|
|
|
+ <view class="tui-popup-box clearfix">
|
|
|
+ <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
|
|
|
+ <view class="tui-flex-1">
|
|
|
+ <view class="superv-header-checked">
|
|
|
+ <view class="oltext" @click="isCheckedAll">
|
|
|
+ <view
|
|
|
+ class="checkbox iconfont"
|
|
|
+ :class="[isAllChecked ? 'icon-yixuanze' : 'icon-weixuanze']"
|
|
|
+ ></view>
|
|
|
+ <view class="text">全选</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tui-button" :class="isProductChecked ? 'active' : ''" @click="handleAllUnder"
|
|
|
+ >取消收藏</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tui-bottom-popup>
|
|
|
+ <!-- 购买弹窗 -->
|
|
|
+ <tui-bottom-popup :radius="true" :show="popupShow1" @close="hidePopup(1)">
|
|
|
+ <view class="tui-popup-box clearfix">
|
|
|
+ <view class="tui-popup-content">
|
|
|
+ <view class="layer-smimg"> <image :src="handleData.image" mode=""></image> </view>
|
|
|
+ <view class="layer-nunbox">
|
|
|
+ <view class="layer-nunbox-t">
|
|
|
+ <view class="layer-nunbox-text">数量:</view>
|
|
|
+ <view class="number-box">
|
|
|
+ <view
|
|
|
+ class="iconfont icon-jianhao"
|
|
|
+ :class="[isQuantity == true ? 'disabled' : '']"
|
|
|
+ @click="changeCountSub()"
|
|
|
+ ></view>
|
|
|
+ <input
|
|
|
+ class="btn-input"
|
|
|
+ type="number"
|
|
|
+ v-model="number"
|
|
|
+ maxlength="4"
|
|
|
+ @blur="changeNumber($event)"
|
|
|
+ />
|
|
|
+ <view
|
|
|
+ class="iconfont icon-jiahao"
|
|
|
+ :class="[isStock == true ? 'disabled' : '']"
|
|
|
+ @click="changeCountAdd()"
|
|
|
+ ></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="layer-nunbox-b">
|
|
|
+ <view class="text"
|
|
|
+ >单价: <text class="p sm">￥</text>
|
|
|
+ <text class="p bg">{{ buyRetailPrice.toFixed(2) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
|
|
|
+ <view class="tui-flex-btn">
|
|
|
+ <view class="button add" @click="getAddProductCart">加入购物车</view>
|
|
|
+ <view class="button buy" @click="toConfirmation">立即购买</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tui-bottom-popup>
|
|
|
+ <!-- 弹窗提示 -->
|
|
|
+ <tui-modal
|
|
|
+ :show="modal"
|
|
|
+ @click="handleClick"
|
|
|
+ @cancel="hideMobel"
|
|
|
+ :content="contentModalText"
|
|
|
+ :button="modalButton"
|
|
|
+ color="#333"
|
|
|
+ :size="32"
|
|
|
+ shape="circle"
|
|
|
+ :maskClosable="false"
|
|
|
+ >
|
|
|
+ </tui-modal>
|
|
|
+ <!-- 可拖动悬浮按钮 -->
|
|
|
+ <cm-drag
|
|
|
+ :cartNum="cartQuantity"
|
|
|
+ :isDock="true"
|
|
|
+ :existTabBar="true"
|
|
|
+ @btnClick="btnClick"
|
|
|
+ @btnTouchstart="btnTouchstart"
|
|
|
+ @btnTouchend="btnTouchend"
|
|
|
+ >
|
|
|
+ </cm-drag>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
|
|
|
+import tuiNomore from '@/components/tui-components/nomore/nomore'
|
|
|
+import cmDrag from '@/components/cm-custom/cm-drag.vue'
|
|
|
+
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
+const defaultListQuery = {
|
|
|
+ userId: 0,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+}
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ tuiLoadmore,
|
|
|
+ tuiNomore,
|
|
|
+ cmDrag
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ StaticUrl: this.$Static,
|
|
|
+ modalButton: [
|
|
|
+ {
|
|
|
+ text: '取消',
|
|
|
+ type: 'gray',
|
|
|
+ plain: true //是否空心
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '确认',
|
|
|
+ customStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
|
|
|
+ },
|
|
|
+ plain: false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ totalRecord: 0,
|
|
|
+ cartQuantity: 0,
|
|
|
+ popupShow: false,
|
|
|
+ popupShow1: false,
|
|
|
+ isProductChecked: false,
|
|
|
+ listQuery: Object.assign({}, defaultListQuery),
|
|
|
+ productList: [],
|
|
|
+ handleData: {},
|
|
|
+ number: 0,
|
|
|
+ buyRetailPrice: 0,
|
|
|
+ buyRetailPriceStep: 1,
|
|
|
+ isQuantity: false,
|
|
|
+ scrollTop: 0,
|
|
|
+ isEmpty: false,
|
|
|
+ isAllChecked: false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ pullFlag: true,
|
|
|
+ hasNextPage: false,
|
|
|
+ navbarHeight: '',
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ contentModalText: '', //操作文字提示语句
|
|
|
+ modal: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.initGetStotage()
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ NumFormat: function(text) {
|
|
|
+ //处理金额
|
|
|
+ return Number(text).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin', 'userInfo'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations(['login', 'logout']),
|
|
|
+ async initGetStotage() {
|
|
|
+ const userInfo = await this.$api.getStorage()
|
|
|
+ this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
|
|
|
+ this.GetProductListInfo()
|
|
|
+ this.shoppingHeaderCartNumber()
|
|
|
+ },
|
|
|
+ GetProductListInfo() {
|
|
|
+ this.productList = []
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ this.ProductService.getProductUserLikeList(this.listQuery)
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ if (data.results && data.results.length > 0) {
|
|
|
+ this.isEmpty = false
|
|
|
+ this.hasNextPage = data.hasNextPage
|
|
|
+ this.totalRecord = data.totalRecord
|
|
|
+ this.productList = data.results
|
|
|
+ this.pullFlag = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pullFlag = true
|
|
|
+ }, 500)
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ if (this.productList.length < 8) {
|
|
|
+ this.pullUpOn = true
|
|
|
+ } else {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isEmpty = true
|
|
|
+ }
|
|
|
+ this.isRequest = true
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ GetOnReachBottomData(index) {
|
|
|
+ //上拉加载
|
|
|
+ this.listQuery.pageNum += 1
|
|
|
+ this.ProductService.getProductUserLikeList(this.listQuery)
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ if (data.results && data.results.length > 0) {
|
|
|
+ this.hasNextPage = data.hasNextPage
|
|
|
+ this.productList = this.productList.concat(data.results)
|
|
|
+ this.pullFlag = false // 防上拉暴滑
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pullFlag = true
|
|
|
+ }, 500)
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ shoppingHeaderCartNumber() {
|
|
|
+ // 获取用户购物车储量
|
|
|
+ this.ProductService.shoppingHeaderCartNumber({
|
|
|
+ userId: this.listQuery.userId
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.cartQuantity = response.data.length
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.log('获取购物车数量失败')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleAllUnder() {
|
|
|
+ //批量下架操作
|
|
|
+ let checkedArray = []
|
|
|
+ this.productIds = ''
|
|
|
+ if (this.isProductChecked) {
|
|
|
+ this.productList.forEach(el => {
|
|
|
+ if (el.isChecked) {
|
|
|
+ checkedArray.push(el)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ checkedArray.forEach(el => {
|
|
|
+ this.productIds += el.productId + ','
|
|
|
+ })
|
|
|
+ this.modal = true
|
|
|
+ this.contentModalText = '确定要取消收藏吗？'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClick(e) {
|
|
|
+ //取消收藏
|
|
|
+ if (e.index == 1) {
|
|
|
+ this.handleDeleteUserLike()
|
|
|
+ }
|
|
|
+ this.modal = false
|
|
|
+ },
|
|
|
+ handleDeleteUserLike() {
|
|
|
+ //操作取消收藏
|
|
|
+ this.ProductService.getDeleteUserLike({
|
|
|
+ productIds: this.productIds,
|
|
|
+ userId: this.listQuery.userId
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.$util.msg('取消收藏成功', 2000, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.GetProductListInfo()
|
|
|
+ }, 2000)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hideMobel() {
|
|
|
+ this.modal = false
|
|
|
+ },
|
|
|
+ updateCheckAllBtn() {
|
|
|
+ //勾选单个判断全选
|
|
|
+ let goodsCheckedLength = 0
|
|
|
+ this.productList.forEach(item => {
|
|
|
+ if (item.isChecked) {
|
|
|
+ goodsCheckedLength++
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.isAllChecked = goodsCheckedLength === this.productList.length
|
|
|
+ if (goodsCheckedLength > 0) {
|
|
|
+ this.isProductChecked = true
|
|
|
+ } else {
|
|
|
+ this.isProductChecked = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ updateBothCheckBtn() {
|
|
|
+ //全选勾选判断
|
|
|
+ this.productList.forEach(item => {
|
|
|
+ item.isChecked = this.isAllChecked
|
|
|
+ })
|
|
|
+ },
|
|
|
+ isCheckedAll() {
|
|
|
+ //全选
|
|
|
+ this.isAllChecked = !this.isAllChecked
|
|
|
+ if (this.isAllChecked) {
|
|
|
+ this.isProductChecked = true
|
|
|
+ } else {
|
|
|
+ this.isProductChecked = false
|
|
|
+ }
|
|
|
+ this.updateBothCheckBtn()
|
|
|
+ },
|
|
|
+ checkedSoperv(item) {
|
|
|
+ //选择
|
|
|
+ item.isChecked = !item.isChecked
|
|
|
+ console.log(item)
|
|
|
+ this.updateCheckAllBtn()
|
|
|
+ },
|
|
|
+ PromotionsFormat(promo) {
|
|
|
+ //促销活动类型数据处理
|
|
|
+ if (promo != null) {
|
|
|
+ if (promo.type == 1 && promo.mode == 1) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ changeCountAdd() {
|
|
|
+ //popup弹窗数量增加按钮
|
|
|
+ if (this.buyRetailPriceStep == 2) {
|
|
|
+ this.number += this.minBuyNumber
|
|
|
+ } else {
|
|
|
+ this.number++
|
|
|
+ }
|
|
|
+ this.calculatPerice()
|
|
|
+ },
|
|
|
+ changeCountSub() {
|
|
|
+ //popup弹窗数量减按钮
|
|
|
+ if (this.number <= this.minBuyNumber) {
|
|
|
+ this.number = this.minBuyNumber
|
|
|
+ this.isQuantity = true
|
|
|
+ this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`, 2000)
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ if (this.buyRetailPriceStep == 2) {
|
|
|
+ this.number -= this.minBuyNumber
|
|
|
+ } else {
|
|
|
+ this.number--
|
|
|
+ }
|
|
|
+ this.calculatPerice()
|
|
|
+ this.isQuantity = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeNumber(e) {
|
|
|
+ let _value = e.detail.value
|
|
|
+ if (!this.$api.isNumber(_value)) {
|
|
|
+ this.number = this.minBuyNumber
|
|
|
+ } else if (_value < this.minBuyNumber) {
|
|
|
+ this.$util.msg(`该商品最小起订量为${this.minBuyNumber}`, 2000)
|
|
|
+ this.number = this.minBuyNumber
|
|
|
+ } else if (_value % this.minBuyNumber != 0) {
|
|
|
+ this.$util.msg('购买量必须为起订量的整数倍', 2000)
|
|
|
+ this.number = this.minBuyNumber
|
|
|
+ } else {
|
|
|
+ this.number = e.detail.value
|
|
|
+ this.calculatPerice()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ calculatPerice() {
|
|
|
+ //判断是否为阶梯价然后做计算价格处理
|
|
|
+ if (this.handleData.ladderPriceFlag == 1) {
|
|
|
+ this.handleData.ladderPrices.forEach((item, index) => {
|
|
|
+ if (this.number >= item.buyNum) {
|
|
|
+ this.buyRetailPrice = item.buyPrice
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toConfirmation() {
|
|
|
+ //跳转确认订单页面
|
|
|
+ this.popupShow1 = false
|
|
|
+ let productStp = {
|
|
|
+ allPrice: this.number * this.buyRetailPrice,
|
|
|
+ allCount: this.number,
|
|
|
+ productID: this.handleData.productId,
|
|
|
+ productCount: this.number
|
|
|
+ }
|
|
|
+ this.$api.navigateTo(
|
|
|
+ `/pages/user/order/create-order?type=prodcut&data=${JSON.stringify({ data: productStp })}`
|
|
|
+ )
|
|
|
+ },
|
|
|
+ getAddProductCart() {
|
|
|
+ //增加购物车成功和toast弹窗提示成功
|
|
|
+ this.ProductService.shoppingAddCart({
|
|
|
+ productID: this.handleData.productId,
|
|
|
+ userID: this.listQuery.userId,
|
|
|
+ productCount: this.number
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.popupShow1 = false
|
|
|
+ this.$util.msg('加入购物车成功', 1500, true, 'success')
|
|
|
+ this.shoppingHeaderCartNumber()
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showPopup(index, pros) {
|
|
|
+ // 弹窗显示
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ this.popupShow = true
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ this.popupShow1 = true
|
|
|
+ this.handleData = pros
|
|
|
+ console.log(this.handleData)
|
|
|
+ this.buyRetailPrice = this.handleData.price
|
|
|
+ this.buyRetailPriceStep = this.handleData.step
|
|
|
+ if (this.handleData.ladderPriceFlag == 1) {
|
|
|
+ this.number = this.handleData.maxBuyNumber ? this.handleData.maxBuyNumber : 1
|
|
|
+ } else {
|
|
|
+ this.number = this.handleData.minBuyNumber
|
|
|
+ }
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hidePopup(index) {
|
|
|
+ // 弹窗隐藏
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ this.popupShow = false
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ this.popupShow1 = false
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ navToDetailPage(id) {
|
|
|
+ this.isModallayer = true
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
+ this.isModallayer = false
|
|
|
+ },
|
|
|
+ btnClick() {
|
|
|
+ this.$api.switchTabTo('/pages/tabBar/cart/index')
|
|
|
+ },
|
|
|
+ btnTouchstart() {
|
|
|
+ // console.log('btnTouchstart');
|
|
|
+ },
|
|
|
+ btnTouchend() {
|
|
|
+ // console.log('btnTouchend');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ //实时获取到滚动的值
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.loadding = true
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.GetOnReachBottomData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ onShow() {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@import '@/uni.scss';
|
|
|
+page {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.empty-container {
|
|
|
+ z-index: 9999;
|
|
|
+}
|
|
|
+.superv-header {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ line-height: 80rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ z-index: 99;
|
|
|
+ .superv-header-click {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ .oltext {
|
|
|
+ float: left;
|
|
|
+ color: #666666;
|
|
|
+ .red {
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ortext {
|
|
|
+ float: right;
|
|
|
+ color: #333333;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-header {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 0 40rpx;
|
|
|
+}
|
|
|
+.header-sit {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 40rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-40;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: 600;
|
|
|
+ font-family: '正楷';
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 42rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.mine {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.product-content {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ padding: 0;
|
|
|
+ padding-top: 80rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .empty-container-image {
|
|
|
+ width: 260rpx;
|
|
|
+ height: 260rpx;
|
|
|
+ margin-top: -300rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-goods-item {
|
|
|
+ padding: 30rpx 20rpx 0 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ .tui-goods-main {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-bottom: 1px solid #ebebeb;
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-goods-checkBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 15rpx;
|
|
|
+ .checkbox {
|
|
|
+ display: flex;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ border-radius: 0;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #ffffff;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-goods-image {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx !important;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ .tui-goods-img {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx !important;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-goods-info {
|
|
|
+ padding-left: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ 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;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .list-details-specs {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .list-details-price {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 54rpx;
|
|
|
+ float: left;
|
|
|
+ &.none {
|
|
|
+ height: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ }
|
|
|
+ .floor-item-act {
|
|
|
+ height: 54rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ .coupon-tags {
|
|
|
+ height: 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: #fff1eb;
|
|
|
+ line-height: 28rpx;
|
|
|
+ color: #f94b4b;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ border: 1px solid #f94b4b;
|
|
|
+ float: left;
|
|
|
+ margin-right: 12rpx;
|
|
|
+ }
|
|
|
+ .floor-tags {
|
|
|
+ height: 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ line-height: 28rpx;
|
|
|
+ color: $color-system;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 16rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ border: 1px solid #e15616;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ .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: 20rpx;
|
|
|
+ .price-small {
|
|
|
+ font-size: $font-size-26;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: #ff2a2a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-price {
|
|
|
+ color: #ff2a2a;
|
|
|
+ float: left;
|
|
|
+ line-height: 54rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .price-larger {
|
|
|
+ font-size: $font-size-30;
|
|
|
+ display: inline-block;
|
|
|
+ &.none {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add-cart-btn {
|
|
|
+ float: right;
|
|
|
+ width: 140rpx;
|
|
|
+ height: 54rpx;
|
|
|
+ line-height: 54rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-right: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #c9c9c9;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-popup-box {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: 168rpx;
|
|
|
+ padding: 6rpx 24rpx;
|
|
|
+ .tui-popup-content {
|
|
|
+ padding-top: 30rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.layer-smimg {
|
|
|
+ width: 114rpx;
|
|
|
+ height: 114rpx;
|
|
|
+ float: left;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ image {
|
|
|
+ width: 114rpx;
|
|
|
+ height: 114rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.layer-nunbox {
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 536rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ padding: 13rpx 0 0 0;
|
|
|
+ float: left;
|
|
|
+ .layer-nunbox-t {
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ .layer-nunbox-text {
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ }
|
|
|
+ .number-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 2rpx solid #ffe6dc;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .iconfont {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ padding: 0 18rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ background: #fef6f3;
|
|
|
+ &.icon-jianhao {
|
|
|
+ border-radius: 30rpx 0 0 30rpx;
|
|
|
+ }
|
|
|
+ &.icon-jiahao {
|
|
|
+ border-radius: 0 30rpx 30rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-input {
|
|
|
+ width: 62rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-step {
|
|
|
+ position: absolute;
|
|
|
+ left: 45rpx;
|
|
|
+ bottom: 0;
|
|
|
+ height: 44rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .layer-nunbox-b {
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ margin-top: 13rpx;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ .p {
|
|
|
+ color: #ff2a2a;
|
|
|
+ }
|
|
|
+ .p:first-child {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+ .p.sm {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-popup-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .superv-header-checked {
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ .oltext {
|
|
|
+ width: 120rpx;
|
|
|
+ float: left;
|
|
|
+ color: #666666;
|
|
|
+ display: flex;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ .checkbox {
|
|
|
+ display: flex;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ border-radius: 0;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 34rpx;
|
|
|
+ color: $color-system;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ float: left;
|
|
|
+ line-height: 80rpx;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ortext {
|
|
|
+ width: 120rpx;
|
|
|
+ float: right;
|
|
|
+ color: $color-system;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-button {
|
|
|
+ width: 210rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ float: right;
|
|
|
+ background: #e1e1e1;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ &.active {
|
|
|
+ background: $btn-confirm;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-flex-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 34rpx;
|
|
|
+ .button {
|
|
|
+ width: 280rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ &.buy {
|
|
|
+ background: $btn-confirm;
|
|
|
+ margin-left: 78rpx;
|
|
|
+ }
|
|
|
+ &.add {
|
|
|
+ background: #ffe6dc;
|
|
|
+ color: #e15616;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
