hlm_pl_mall_h5/pages/home/pointsgoods/child/Shopping.vue

<!-- Shopping.vue -->
<template>
	<uni-popup
		background-color="#fff"
		ref="isShowcartInfo"
		type="bottom"
		v-if="detailInfo"
	>
		<view class="div ui-add-shopping" :style="'height:'+(screenHeight*.7)+'px'" v-if="detailInfo">
			<view class="div shopping-info">
				<view class="div info-header">
					<image mode="aspectFit"
						v-bind:src="detailInfo.pgoods_image"
						class="img info-image"
						v-if="detailInfo.pgoods_image"
					/>
					<view class="div">

						<text
							class="span header-price"
							>{{ detailInfo.pgoods_points }}积分</text
						>

						<text class="span">

						</text>
						<text class="span">库存{{ currentStock }}件</text>
						<text class="span">数量：{{ numbers }}</text>
					</view>

					<text class="span iconfont close" v-on:click="closeCartInfo(false)">&#xe65a;</text>
				</view>

				<view class="div goods-detail-properties">

					<view class="div info-body">
						<view class="p">数量</view>
						<view class="div ui-number">
							<view
								class="div reduce ui-common"
								@click.stop="reduceNumber()"
								v-bind:class="{ 'reduce-opacity': numbers <= 1 }"
							>
								-
							</view>
							<input
								type="number"
								min="1"
								class="number"
								value="1"
								v-model="numbers"
								readonly="true"
							/>
							<view class="div add ui-common" @click.stop="addNumber()">+</view>
						</view>
					</view>
				</view>
				<view class="div info-footer">
					<view
						class="div footer-button active-cart"
						v-on:click="checkProduct(false)"
					>
						加入购物车
					</view>
					<view
						class="div footer-button active-buy"
						v-on:click="checkProduct(true)"
					>
						立即购买
					</view>

				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import { urlencode } from '@/util/common'
import { mapState, mapMutations } from 'vuex'
import { cartAdd } from '../../../../api/memberPointscart'

export default {
  data () {
    return {
      screenHeight:0,
      numbers: this.$store.state.pointsgoods.number > 0 ? this.$store.state.pointsgoods.number : 1, // todo 临时解决
      currentStock: this.$store.state.pointsgoods.detailInfo.pgoods_storage,
      productId: this.$store.state.pointsgoods.currentProductId,
      toastConfig: {
        message: '商品达到每单限购数量',
        position: 'middle'
      },
      ids: [],
      propertiPrice: 0,
      earlier: {}
    }
  },

  created () {
  },

  computed: {
    ...mapState({
      // 是否显示购物车浮层
      isShowcartInfo: state => state.goodsdetail.isShowcartInfo,
      isOnline: state => state.member.isOnline,
      detailInfo: state => state.pointsgoods.detailInfo,
      number: state => state.pointsgoods.number
    })
  },

  watch: {
    isShowcartInfo: function (value) {
          if(value){
            this.showPopup('isShowcartInfo')
          }else{
            this.hidePopup('isShowcartInfo')
          }
        },
    numbers: function (value) {
      if (value) {
        let pgoodsStorage = this.detailInfo.pgoods_storage
        if (value <= 0) {
          this.numbers = 1
          this.toastConfig.message = '受不了了，宝贝不能再少了'
          uni.showToast({icon:'none',title: this.toastConfig})
        } else if (value > pgoodsStorage) {
          this.toastConfig.message = '商品库存不足'
          uni.showToast({icon:'none',title: this.toastConfig})
          this.numbers = pgoodsStorage
        }
        this.saveNumber(this.numbers)
      }
    }
  },

  mounted () {
    const res = uni.getSystemInfoSync()
    this.screenWidth = res.windowWidth
    this.screenHeight = res.windowHeight
  },

  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    ...mapMutations({
      saveCartState: 'saveCartState',
      saveNumber: 'saveNumber',
    }),

    // 关闭购物车浮层
    closeCartInfo (value) {
      this.saveCartState(value)
    },

    // 数量加
    addNumber () {
      if (this.detailInfo.pgoods_storage && this.numbers > this.detailInfo.pgoods_storage) {
        this.toastConfig.message = '商品库存不足'
        uni.showToast({icon:'none',title: this.toastConfig})
        this.numbers = this.detailInfo.pgoods_storage
      } else {
        this.numbers++
      }
    },

    // 数量减
    reduceNumber () {
      if (this.numbers > 1) {
        this.numbers--
      } else {
        this.numbers = 1
        this.toastConfig.message = '受不了了，宝贝不能再少了'
        uni.showToast({icon:'none',title: this.toastConfig})
      }
    },

    // 加入购物车
    checkProduct (checkout) {
      if (!this.isOnline) {
        uni.navigateTo({ url: '/pages/home/memberlogin/Login' })
      } else {
        if (checkout) { // 立即购买
          uni.navigateTo({ url: '/pages/member/pointsbuy/step1'+'?'+urlencode( { buy_now: 1, cart_id: this.detailInfo.pgoods_id + '|' + this.numbers } )})
        } else {
          cartAdd(this.detailInfo.pgoods_id, this.numbers).then(
            res => {
              uni.$emit('update-cart-num')
              uni.showToast({icon:'none',title: res.message})
            },
            error => {
              uni.showToast({icon:'none',title: error.message})
            }
          )
        }
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.mint-popup-bottom {
	overflow: initial;
	height: 70%;
}
.ui-add-shopping {
	/* position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%; */
	/* z-index: 200; */
	/* background:rgba(0,0,0, 0.4); */
	.shopping-info {
		background: rgba(255, 255, 255, 1);
		height: 100%;
		position: relative;
		width: -webkit-fill-available;
		/* bottom: 0; */
		z-index: 10;
		width: 100%;
		.info-header {
			padding: 0.75rem;
			display: flex;
			justify-content: flex-start;
			padding-bottom: 1.25rem;
			border-bottom: 0.5px solid rgba(232, 234, 237, 1);
			.img.info-image {
				width: 6rem;
				height: 6rem;
				border-radius: 1px;
				margin-top: -0.75rem;
				position: absolute;
				top: -0.65rem;
			}
			.div {
				padding-left: 6.75rem;
				width: 100%;
				.span {
					display: block;
					color: #999999;
					&.header-price {
						font-size:$h1;
						line-height: 1rem;
						padding-bottom: 0.6rem;
						color: $primaryColor;
					}
					&:nth-child(2) {
						.img {
							vertical-align: middle;
							padding-right: 0.5rem;
							width: 2.5rem;
							height: 1rem;
						}
						.span {
							display: inline;
							font-size:$subFontSize;
							line-height: 0.7rem;
							padding-bottom: 0.45rem;
							padding-top: 0.6rem;
						}
					}
					&:nth-child(3) {
						line-height: 1rem;
						font-size:$subFontSize;
						line-height: 1rem;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding-right: 0.75rem;
					}
					&:last-child {
						line-height: 1rem;
						font-size:$subFontSize;
						line-height: 1rem;
						padding-top: 0.6rem;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding-right: 0.75rem;
					}
				}
			}
			.img.close {
				position: absolute;
				top: 0.75rem;
				right: 0.75rem;
				width: 0.65rem;
				height: 0.65rem;
				cursor: pointer;
				opacity: 1;
			}
		}
		.div.goods-detail-properties {
			width: 100%;
			overflow: auto;
			height: auto;
			position: absolute;
			top: 11.2rem;
			bottom: 2.2rem;
			/* height: 100%; */
		}
		.div.goods-properties {
			padding: 0.75rem 0;
			.p {
				font-size:$h2;
				color: rgba(41, 43, 45, 1);
				line-height: 0.8rem;
				margin: 0;
				padding: 0 0.75rem;
			}
			.div.properties-list {
				.div {
					display: inline-block;
					margin-left: 0.75rem;
					.span {
						font-size:$subFontSize;
						color: rgba(78, 84, 93, 1);
						line-height: 0.7rem;
						display: inline-block;
						padding: 0.35rem 0.7rem;
						border: 1px solid #404245;
						border-radius: 0.1rem;
						cursor: pointer;
						margin-top: 0.75rem;
						&.active-properties {
							background: $primaryColor;
							color: rgba(255, 255, 255, 1);
							border: 1px solid $primaryColor;
						}
						&.disabled-properties {
							color: #b1b5bb;
							cursor: none;
							border: 1px solid #a2a6ad;
						}
					}
					/* &:nth-child(even) {
					margin-left: 0.75rem;
					} */
				}
			}
		}
		.info-body {
			padding: 0.75rem 0.75rem 1rem 0.75rem;
			.p {
				font-size:$h2;
				color: rgba(41, 43, 45, 1);
				line-height: 0.8rem;
				padding: 0;
				margin: 0;
				padding-bottom: 0.8rem;
			}
			.div.ui-number {
				height: 1.5rem;
				display: flex;
				border-radius: 0.15rem 0 0 0.15rem;
				input,
				.div {
					height: 1.4rem;
					line-height:1.4rem;
					text-align: center;
					color: #404245;
					display: inline-block;
					padding: 0;
					margin: 0;
					border: 0;
					outline-offset: 0;
				}
				.ui-common {
					line-height: 1.4rem;
					width: 1.4rem;
					height: 1.4rem;
					border: 1px solid #c7c7cd;
					cursor: pointer;
				}
				.reduce {
					border-right: 0;
				}
				.reduce-opacity {
					opacity: 0.4;
				}
				.add {
					border-left: 0;
				}
				.number {
					width: 2rem;
					border: 1px solid #c7c7cd;
					border-radius: 0;
					border-image-width: 0;
					box-shadow: 0;
					vertical-align: bottom;
					&:focus {
						outline: none;
					}
				}
			}
		}
		.info-footer {
			width: 100%;
			position: fixed;
			bottom: 0;
			display: flex;
			.footer-button {
				flex: 1;
				color: #ffffff;
				line-height: 2.2rem;
				text-align: center;
				font-size:$h2;
				height: 2.2rem;
			}
			.active-cart {
				background: $primaryColor;
			}
			.active-buy {
				background: #000;
			}
		}
	}
}
</style>