|
|
@@ -1,1480 +1,1480 @@
|
|
|
-<template>
|
|
|
- <view class="container cart clearfix" v-if="!hasLogin">
|
|
|
- <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
|
|
|
- <view class="container-cart-main tui-skeleton" :style="{paddingTop:isshowDelbtn ? '0rpx':'80rpx'}">
|
|
|
- <view class="foot-check-delbtn" v-if="!isshowDelbtn && goodsList.length>0">
|
|
|
- <view class="foot-text">共<text>{{kindCount}}</text>件商品</view>
|
|
|
- <view class="delBtn" @tap.stop="showDelManager">删除</view>
|
|
|
- </view>
|
|
|
- <view v-if="!isEmpty" class="container-cart">
|
|
|
- <view class="cart-content" :style="{paddingBottom :isIphoneX ? '130rpx' : '100rpx'}">
|
|
|
- <view class="goods-list">
|
|
|
- <view v-for="(item, index) in goodsList" :key="index" class="goods-item clearfix">
|
|
|
- <view class="shoptitle">
|
|
|
- <!--选择商店的全部商品"-->
|
|
|
- <view class="checkbox-box" @click.stop="checkShop(item)">
|
|
|
- <view class="checkbox iconfont" :class="[item.checked ?'icon-xuanze':'icon-weixuanze']"></view>
|
|
|
- </view>
|
|
|
- <view class="text">{{item.name}}</view>
|
|
|
- </view>
|
|
|
- <view class="productlist">
|
|
|
- <view class="goods-pros" v-for="(pros,idx) in item.productsList" :key="idx" >
|
|
|
- <view class="goods-pros-t">
|
|
|
- <!--选择商品-->
|
|
|
- <view class="checkbox-box" @click.stop="ischeck(item,pros)">
|
|
|
- <view class="checkbox iconfont" :class="[pros.productsChecked ? 'icon-xuanze':'icon-weixuanze']"></view>
|
|
|
- </view>
|
|
|
- <view class="pros-img" @click.stop="navToListPage(pros.productId)" ><image :src="pros.image ? pros.image:''" alt="" /></view>
|
|
|
- <view class="pros-product">
|
|
|
- <view class="producttitle" @click.stop="navToListPage(pros.productId)" >{{pros.name}}</view>
|
|
|
- <view class="productspec">规格:{{pros.unit ? pros.unit : ''}}</view>
|
|
|
- <view class="floor-item-act"><view class="tag" @click.stop="clickPopupShow(pros,2)">活动价</view></view>
|
|
|
- <view class="productprice">
|
|
|
- <!--使用过滤器对总价改变-->
|
|
|
- <view class="price"><text>￥</text>{{ pros.price | NumFormat }}</view>
|
|
|
- <view class="count" v-if="pros.validFlag == 2 " :class="[isshowDelbtn ? 'none':'show']">
|
|
|
- <view class="number-box">
|
|
|
- <view class="iconfont icon-jianhao" @click="changeCountSub(item,pros)"></view>
|
|
|
- <input class="btn-input" type="number" maxlength='4' v-model="pros.minBuyNumber" @blur="changeNnmber($event,item,pros)" @focus="changeInput(pros)">
|
|
|
- <view class="iconfont icon-jiahao" @click="changeCountAdd(item,pros)"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="goods-pros-b clearfix" :class="[isshowDelbtn ? 'none':'show']" >
|
|
|
- <view class="sum-none" v-if="item.reducedPrice>0">
|
|
|
- <text class="money-sign">￥</text>
|
|
|
- <text class="money">{{ item.totalOriginalPrice | NumFormat }}</text>
|
|
|
- <text class="money-reduced">减<text>￥{{ item.reducedPrice | NumFormat}}</text></text>
|
|
|
- </view>
|
|
|
- <view class="sum">合计:<text class="money"><text class="money-sign">￥</text>{{item.totalPrice | NumFormat}}</text></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="failure-list" v-if="failureList.length>0">
|
|
|
- <view class="failure-title">
|
|
|
- <view class="title-txt">失效商品<text>{{failureList.length}}件</text></view>
|
|
|
- <view class="title-btn" @click.stop="deletefailureList"><text class="butto">清空失效商品</text></view>
|
|
|
- </view>
|
|
|
- <view class="productlist">
|
|
|
- <view class="goods-pros" v-for="(failure,failureIdx) in failureList" :key="failureIdx" >
|
|
|
- <view class="goods-pros-t" @click.stop="failureToProduct(failure)">
|
|
|
- <!--选择商品-->
|
|
|
- <view class="checkbox-box" @click.stop="ischeckFailure(failure)" v-if="isshowDelbtn">
|
|
|
- <button class="checkbox iconfont"
|
|
|
- :class="[ failure.productsChecked ? 'icon-xuanze':'icon-weixuanze']">
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- <text class="img-tip">失效</text>
|
|
|
- <view class="pros-img">
|
|
|
- <image :src="failure.image ? failure.image:''" alt="" />
|
|
|
- </view>
|
|
|
- <view class="pros-product">
|
|
|
- <view class="producttitle">{{failure.name}}</view>
|
|
|
- <view class="productspec">规格:{{failure.unit ? failure.unit : ''}}</view>
|
|
|
- <view class="productstate">{{failureStateText(failure.status)}}</view>
|
|
|
- </view>
|
|
|
- <view class="pros-marks" v-if="failure.isFailureLayer"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 脚部菜单 -->
|
|
|
- <view class="footer">
|
|
|
- <view class="footer-le">
|
|
|
- <view class="foot-check checkbox-box" @tap.stop="checkAll()">
|
|
|
- <button class="checkbox iconfont" :class="[isCheckAll?'icon-xuanze':'icon-weixuanze']"></button>
|
|
|
- <view class="text">全选</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="sum">
|
|
|
- <view class="sum-none" v-if="reducedPrice>0">
|
|
|
- <text class="money-sign">￥</text>
|
|
|
- <text class="money">{{ totalOriginalPrice | NumFormat }}</text>
|
|
|
- <text class="money-reduced">减<text>￥{{ reducedPrice | NumFormat}}</text></text>
|
|
|
- </view>
|
|
|
- <view class="sum-price" :class="reducedPrice == 0 ? 'none' : ''">
|
|
|
- 总价:<text class="money-sign">￥</text><text class="money">{{allPrice | NumFormat}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-if="!isshowDelbtn" class="footer-ri" >
|
|
|
- <view class="btn hanld-btn" @tap="toConfirmation">去结算({{allCount}})</view>
|
|
|
- </view>
|
|
|
- <view v-else class="footer-del">
|
|
|
- <view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
|
|
|
- <view class="btn btn-confirm" @tap.stop="deleteList">删除</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-else class="cart-content empty">
|
|
|
- <view class="empty-container">
|
|
|
- <image class="empty-container-image" :src="StaticUrl+'icon-empty-cart.png'" mode="aspectFit"></image>
|
|
|
- <text class="error-text">购物车空空的，快去逛逛吧~</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 操作弹窗 -->
|
|
|
- <tui-modal :show="modal" @click="handleClick" @cancel="hideMobel" :content="contentModalText" color="#333" :size="32" shape="circle" :maskClosable="false"></tui-modal>
|
|
|
- <!-- 促销活动弹窗 -->
|
|
|
- <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
|
|
|
- <!-- 透明模态层 -->
|
|
|
- <modal-layer v-if='modallayer'></modal-layer>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
- import authorize from '@/common/config/authorize.js'
|
|
|
- import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
|
- import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
|
|
|
- import tuiNomore from "@/components/tui-components/nomore/nomore"
|
|
|
- import activiPopup from "@/components/cm-module/productDetails/cm-activipopu"
|
|
|
- import modalLayer from "@/components/modal-layer"
|
|
|
- import { mapState,mapMutations } from 'vuex';
|
|
|
- import { cartList } from '@/common/json/data.json.js' //本地数据
|
|
|
-
|
|
|
- export default{
|
|
|
- components:{
|
|
|
- tuiSkeleton,
|
|
|
- tuiLoadmore,
|
|
|
- tuiNomore,
|
|
|
- activiPopup,
|
|
|
- modalLayer
|
|
|
- },
|
|
|
- data(){
|
|
|
- return{
|
|
|
- StaticUrl:this.$Static,
|
|
|
- CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
- isIphoneX:this.$store.state.isIphoneX,
|
|
|
- userID:'',
|
|
|
- alertType:'',
|
|
|
- isStock:'',
|
|
|
- popupShow:false,
|
|
|
- handlerPros:{},//监听单挑促销商品
|
|
|
- failureList:[], //失效商品列表
|
|
|
- goodsList:cartList, //购物车的商品
|
|
|
- promotionsList:[],//促销列表
|
|
|
- delGoodsList:'',//要删除的商品
|
|
|
- setGoodData:'', //确认订单的商品
|
|
|
- isCheckAll:false,//是否全选
|
|
|
- kindCount:0,//购物车宝贝数量
|
|
|
- allPrice:0,//所有价格
|
|
|
- totalOriginalPrice:0,//所有原价价
|
|
|
- reducedPrice:0,//满减
|
|
|
- allCount:0,//被选中的产品数量
|
|
|
- isModallayer:false,
|
|
|
- skeletonShow:false,
|
|
|
- isshowDelbtn:false,
|
|
|
- isDisabled: false, // 供应商/店铺全选是否禁用状态
|
|
|
- isNoConfim:false,
|
|
|
- isEmpty:false,//显示空购物车
|
|
|
- scrollHeight: 'auto',
|
|
|
- nomoreText: '上拉显示更多',
|
|
|
- hasNextPage: false,
|
|
|
- loadding: false,
|
|
|
- pullUpOn: true,
|
|
|
- pullFlag: true,
|
|
|
- pageSize: 10,
|
|
|
- pageNum: 1,
|
|
|
- submitIds:[],
|
|
|
- modal:false,
|
|
|
- contentModalText:'',
|
|
|
- deleteType:0,
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(){
|
|
|
- this.setScrollHeight();
|
|
|
- console.log(this.goodsList)
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['hasLogin','userInfo'])
|
|
|
- },
|
|
|
- filters:{
|
|
|
- NumFormat(value) {//处理金额
|
|
|
- return Number(value).toFixed(2);
|
|
|
- },
|
|
|
- totalprice(val,count){//单件商品的价格 × 数量
|
|
|
- return (val * count).toFixed(2)
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- initData(){
|
|
|
- this.isModallayer = false //遮罩层 防止多次点击
|
|
|
- // this.skeletonShow = true //预加载圆圈
|
|
|
- this.isCheckAll=false//是否全选
|
|
|
- this.submitIds = []
|
|
|
- this.$api.getStorage().then((resolve) => {
|
|
|
- this.userID = resolve.userId;
|
|
|
- this.initGetCartGoodsList();
|
|
|
- })
|
|
|
- },
|
|
|
- initLogin(){
|
|
|
- authorize.checkLogin()
|
|
|
- .then(res => {
|
|
|
- this.$api.redirectTo('/pages/login/login?type=4')
|
|
|
- })
|
|
|
- .catch(err =>{
|
|
|
- this.$api.navigateTo('/pages/authorization/authorization?type=0')
|
|
|
- })
|
|
|
- },
|
|
|
- clickPopupShow(pros,type){
|
|
|
- this.popupShow = true;
|
|
|
- this.handlerPros = pros;
|
|
|
- },
|
|
|
- setScrollHeight() {
|
|
|
- // 窗口高度-footer高度
|
|
|
- const {windowHeight, pixelRatio} = uni.getSystemInfoSync();
|
|
|
- setTimeout(()=> {
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query.selectAll('.footer').boundingClientRect();
|
|
|
- query.exec(res => {
|
|
|
- this.windowHeight = windowHeight;
|
|
|
- if(res[0][0]) {
|
|
|
- this.scrollHeight = windowHeight - res[0][0].height;
|
|
|
- }
|
|
|
- })
|
|
|
- }, 500)
|
|
|
- },
|
|
|
- initGetCartGoodsList(){//初始化购物车 index:1
|
|
|
- this.ProductService.QueryShoppingCartList({userId:this.userID}).then(response =>{
|
|
|
- this.skeletonShow = false
|
|
|
- let data = response.data
|
|
|
- this.kindCount = data.kindCount
|
|
|
- this.promotionsList = data.promotions
|
|
|
- this.$store.commit('updateAllNum',data.kindCount)
|
|
|
- if( data.list.length > 0 || data.invalid.length > 0){
|
|
|
- this.isEmpty =false
|
|
|
- }else{
|
|
|
- this.isEmpty =true
|
|
|
- }
|
|
|
- if(data.list && data.list.length > 0 ){
|
|
|
- this.goodsList = data.list;
|
|
|
- this.totalShopPeice()
|
|
|
- } else {
|
|
|
- this.goodsList = [];
|
|
|
- }
|
|
|
- if( data.invalid && data.invalid.length > 0){
|
|
|
- let newFailureList = [],isFailureLayer;
|
|
|
- data.invalid.forEach((failure,index) => {
|
|
|
- if(failure.status == 1 || failure.status == 2) {
|
|
|
- isFailureLayer = true
|
|
|
- }else{
|
|
|
- isFailureLayer = false
|
|
|
- }
|
|
|
- newFailureList.push(Object.assign({},failure,{isFailureLayer:isFailureLayer}))
|
|
|
- })
|
|
|
- this.failureList = newFailureList
|
|
|
- } else {
|
|
|
- this.failureList = [];
|
|
|
- }
|
|
|
- }).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000);
|
|
|
- })
|
|
|
- },
|
|
|
- ischeckFailure(failure){
|
|
|
- failure.productsChecked = !failure.productsChecked
|
|
|
- this.updateCheckAllBtn()
|
|
|
- },
|
|
|
- ischeck(item,pro){//为未选中的时候改变为true，反之为true
|
|
|
- pro.productsChecked = !pro.productsChecked;
|
|
|
- if(pro.productsChecked) {
|
|
|
- if(!this.submitIds.includes(pro.productID*1)){
|
|
|
- this.submitIds.push(pro.productID);
|
|
|
- }
|
|
|
- } else {
|
|
|
- var lent = this.submitIds.indexOf(pro.productID*1);
|
|
|
- if(lent >=0 ){
|
|
|
- this.submitIds.splice(lent, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- this.updateProductCheckedAllBtn(item);
|
|
|
- this.updateCheckAllBtn();
|
|
|
-
|
|
|
- },
|
|
|
- updateProductCheckedAllBtn(item) {// 单独每个供应商的勾选判断
|
|
|
- let productsList = item.productsList,
|
|
|
- productsCheckedLength = 0,
|
|
|
- disabledLength = 0;
|
|
|
- if(this.isshowDelbtn) {
|
|
|
- productsList.forEach(pros => {
|
|
|
- if(pros.productsChecked) {
|
|
|
- productsCheckedLength++;
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- productsList.forEach(pros => {
|
|
|
- if(pros.productsChecked) {
|
|
|
- productsCheckedLength++;
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- item.checked = productsCheckedLength === productsList.length;
|
|
|
- },
|
|
|
- updateCheckAllBtn() {// 全选勾选判断
|
|
|
- let goodsCheckedLength = 0,
|
|
|
- goodsList = this.goodsList,
|
|
|
- failureList = this.failureList;
|
|
|
- goodsList.forEach(item => {
|
|
|
- if(item.checked) {
|
|
|
- goodsCheckedLength++;
|
|
|
- }
|
|
|
- })
|
|
|
- failureList.forEach(failureItem=>{
|
|
|
- if(failureItem.productsChecked){
|
|
|
- goodsCheckedLength++;
|
|
|
- }
|
|
|
- })
|
|
|
- if(this.isshowDelbtn){
|
|
|
- this.isCheckAll = goodsCheckedLength === goodsList.length + failureList.length;
|
|
|
- }else{
|
|
|
- this.isCheckAll = goodsCheckedLength === goodsList.length;
|
|
|
- }
|
|
|
- },
|
|
|
- checkShop(item){//与单选商品类似
|
|
|
- item.checked = !item.checked;
|
|
|
- this.setProductChecked(item);
|
|
|
- this.updateCheckAllBtn();
|
|
|
- },
|
|
|
- setProductChecked(item) {
|
|
|
- item.productsList.forEach(pros=>{
|
|
|
- if(item.checked) {
|
|
|
- pros.productsChecked = true;
|
|
|
- if(!this.submitIds.includes(pros.productId*1)){
|
|
|
- this.submitIds.push(pros.productId);
|
|
|
- }
|
|
|
- } else {
|
|
|
- pros.productsChecked = false;
|
|
|
- var lent = this.submitIds.indexOf(pros.productId*1);
|
|
|
- if(lent >=0 ){
|
|
|
- this.submitIds.splice(lent, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- updateBothCheckBtn() {
|
|
|
- if(this.isshowDelbtn) {
|
|
|
- // 当管理删除按钮出现时,失效的商品可被选择
|
|
|
- this.goodsList.forEach((item)=>{
|
|
|
- item.checked = this.isCheckAll;
|
|
|
- this.setProductChecked(item);
|
|
|
- })
|
|
|
- //删除按钮 全选包括失效商品勾选
|
|
|
- this.failureList.forEach(failureItem=>{
|
|
|
- failureItem.productsChecked = this.isCheckAll;
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.goodsList.forEach((item)=>{
|
|
|
- item.checked = this.isCheckAll && !item.isDisabled;
|
|
|
- this.setProductChecked(item);
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- checkAll(){//全选方法内调用方法
|
|
|
- this.isCheckAll = !this.isCheckAll;
|
|
|
- this.updateBothCheckBtn();
|
|
|
- },
|
|
|
- totalShopPeice(){//每次所属会所下的商品增减重新计算合计价格&减去含有下架的商品
|
|
|
- let touchPrice = 0;
|
|
|
- let reducedPrice = 0;//商铺合计满减价
|
|
|
- this.goodsList.map((item,index)=>{
|
|
|
- let _totalPrice = 0;
|
|
|
- let _reducedPrice = 0;
|
|
|
- let _totalOriginalPrice =0;
|
|
|
- item.productList.forEach(pros=>{
|
|
|
- let _price = pros.retailPrice*pros.productCount
|
|
|
- _totalOriginalPrice += pros.retailPrice*pros.productCount;
|
|
|
- if(pros.promotion && pros.promotion.type != 2 && pros.promotion.mode == 2){
|
|
|
- if(_price >= pros.promotion.touchPrice){
|
|
|
- _price = _price - pros.promotion.reducedPrice
|
|
|
- _reducedPrice += pros.promotion.reducedPrice
|
|
|
- }
|
|
|
- _totalPrice += _price
|
|
|
- }else{
|
|
|
- _reducedPrice = 0;
|
|
|
- _totalPrice += pros.retailPrice*pros.productCount;
|
|
|
- }
|
|
|
- })
|
|
|
- item.reducedPrice = _reducedPrice
|
|
|
- item.totalOriginalPrice = _totalOriginalPrice
|
|
|
- item.totalPrice = _totalPrice
|
|
|
- })
|
|
|
- },
|
|
|
- totalPeice(){//计算总价格,每次调用此方法，将初始值为0，遍历价格并累加
|
|
|
- let totalPrice = 0;
|
|
|
- let reducedPrice = 0;
|
|
|
- let originalPrice = 0;
|
|
|
- this.goodsList.forEach((item,index)=>{
|
|
|
- let supplierPrice = 0;
|
|
|
- let supplierReducedPrice = 0;
|
|
|
- item.totalprice = 0;
|
|
|
- item.reducedprice = 0;
|
|
|
- item.originalprice = 0;
|
|
|
- item.productList.forEach(pros=>{
|
|
|
- if(pros.productsChecked){
|
|
|
- supplierPrice += pros.retailPrice*pros.productCount;
|
|
|
- // 单品满减
|
|
|
- if(pros.promotion && pros.promotion.type*1===1 && pros.promotion.mode*1===2){
|
|
|
- // 单品满减-重新计算供应商总价/满减金额
|
|
|
- if(pros.retailPrice*pros.productCount >= pros.promotion.touchPrice){
|
|
|
- supplierPrice -= pros.promotion.reducedPrice;
|
|
|
- supplierReducedPrice += pros.promotion.reducedPrice;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- item.totalprice = supplierPrice;
|
|
|
- item.reducedprice = supplierReducedPrice;
|
|
|
- item.originalprice = (supplierPrice+supplierReducedPrice);
|
|
|
- totalPrice += item.totalprice;
|
|
|
- reducedPrice += item.reducedprice;
|
|
|
- originalPrice += item.originalprice;
|
|
|
- })
|
|
|
- //最后统计商品原价
|
|
|
- this.totalOriginalPrice = originalPrice;
|
|
|
- //最后满减金额 = 店铺减去金额 + 单品减去金额 + 凑单减去金额
|
|
|
- this.reducedPrice = reducedPrice;
|
|
|
- //最终合计价格 = 店铺满减合计 + 单品满减 + 正常合计 + 凑单满减
|
|
|
- this.allPrice = totalPrice ;
|
|
|
- },
|
|
|
- totalCount(){//计算总数量
|
|
|
- this.allCount = 0
|
|
|
- let prosAllCount=0
|
|
|
- let validCount = 0
|
|
|
- let validList =[];
|
|
|
- let productsList =[];
|
|
|
- this.goodsList.forEach(item=>{
|
|
|
- productsList = item.productList
|
|
|
- productsList.forEach(pros=>{
|
|
|
- if(pros.productsChecked){
|
|
|
- prosAllCount+=parseInt(pros.productCount);
|
|
|
- this.allCount = prosAllCount
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- changeCountAdd(item,pros){//商品数量加加
|
|
|
- if(pros.step === 2){
|
|
|
- pros.isStep = false
|
|
|
- pros.number += pros.min
|
|
|
- this.processActivityPrice(pros)
|
|
|
- this.isStock = false
|
|
|
- }else{
|
|
|
- pros.number++
|
|
|
- this.processActivityPrice(pros)
|
|
|
- this.isStock = false
|
|
|
- }
|
|
|
- this.updateShoppogNum(pros)
|
|
|
- this.totalShopPeice();
|
|
|
- },
|
|
|
- changeCountSub(item,pros){//商品数量减减
|
|
|
- if(pros.number<=pros.min){
|
|
|
- pros.number= pros.min
|
|
|
- this.$util.msg(`该商品最小起订量为${pros.min}`,2000);
|
|
|
- return
|
|
|
- }else{
|
|
|
- if(pros.step === 2){
|
|
|
- pros.isStep = false
|
|
|
- pros.number -= pros.min
|
|
|
- }else{
|
|
|
- pros.number--
|
|
|
- }
|
|
|
- this.processActivityPrice(pros)
|
|
|
- }
|
|
|
- this.updateShoppogNum(pros)
|
|
|
- this.totalShopPeice();
|
|
|
- },
|
|
|
- changeInput(pros){//输入商品数量更新
|
|
|
- pros.isStep = false
|
|
|
- },
|
|
|
- changeNnmber(e,item,pros){//输入商品数量更新
|
|
|
- let _value = Number(e.detail.value);
|
|
|
- if(!this.$api.isNumber(_value)){
|
|
|
- pros.number = pros.min
|
|
|
- }else if(_value < pros.min){
|
|
|
- this.$util.msg(`该商品最小起订量为${pros.min}`,2000);
|
|
|
- pros.number = pros.min
|
|
|
- }else if(_value % pros.min != 0){
|
|
|
- pros.isStep = true
|
|
|
- pros.number = pros.min
|
|
|
- }else{
|
|
|
- pros.isStep = false
|
|
|
- pros.number = e.detail.value
|
|
|
- this.processActivityPrice(pros)
|
|
|
- }
|
|
|
- this.updateShoppogNum(pros)
|
|
|
- this.totalShopPeice();
|
|
|
- },
|
|
|
- processActivityPrice(pros){//单独处理活动价格和阶梯价格
|
|
|
- let ladderPriceList = pros.ladderPrices;
|
|
|
- if(pros.ladderFlag == '0' || pros.actStatus == 1){
|
|
|
- pros.price = pros.price
|
|
|
- }else{
|
|
|
- ladderPriceList.forEach((item,index)=>{
|
|
|
- if(pros.number>=item.buyNum){
|
|
|
- pros.price = item.buyPrice
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- updateShoppogNum(pros){//加减购物车商品更新到后台
|
|
|
- let params ={userID:this.userID,productID:pros.productId,productCount:pros.number}
|
|
|
- this.ProductService.ShoppingCartUpdate(params).then(response =>{
|
|
|
- this.isshowDelbtn = false;
|
|
|
- this.initGetCartGoodsList();
|
|
|
- }).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000);
|
|
|
- })
|
|
|
- },
|
|
|
- toConfirmation(){//跳转确认订单页面
|
|
|
- let setGoodsList=[];
|
|
|
- this.goodsList.forEach(res=>{
|
|
|
- let products = res.productsList
|
|
|
- products.forEach(pros=>{
|
|
|
- if(pros.productsChecked){
|
|
|
- setGoodsList.push(pros.productId)
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- if(setGoodsList == ''){
|
|
|
- this.$util.msg("请先选择结算商品~",2000);
|
|
|
- return
|
|
|
- }else{
|
|
|
- this.isNoConfim = false
|
|
|
- this.goodsList.forEach(el=>{
|
|
|
- el.productsList.forEach(pros=>{
|
|
|
- if(pros.productsChecked){
|
|
|
- if(pros.number<pros.min){
|
|
|
- this.isNoConfim = true
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- if(this.isNoConfim){
|
|
|
- this.$util.modal('','有商品的购买量没达到最小起订量，请修改数量后再次提交结算','去修改','',false,() =>{})
|
|
|
- return;
|
|
|
- }
|
|
|
- let productID = '';
|
|
|
- this.goodsList.forEach(el=>{//获取勾选的商品ID拼接字符串逗号隔开，最后一个逗号去掉
|
|
|
- el.productsList.forEach(pros=>{
|
|
|
- if(pros.productsChecked){
|
|
|
- productID += pros.productId+','
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- let cartPramsData={
|
|
|
- allPrice:this.allPrice,
|
|
|
- allCount:this.allCount,
|
|
|
- productID:productID.substring(0,productID.lastIndexOf(',')),
|
|
|
- productCount:''
|
|
|
- }
|
|
|
- this.$api.navigateTo(`/pages/user/order/create-order?data=${JSON.stringify({data:cartPramsData})}`)
|
|
|
- }
|
|
|
- },
|
|
|
- showDelManager(){//显示删除商品管理
|
|
|
- this.isshowDelbtn = true;
|
|
|
- if(this.isCheckAll) {
|
|
|
- this.updateBothCheckBtn();
|
|
|
- } else {
|
|
|
- this.goodsList.forEach(item => {
|
|
|
- if(item.checked) {
|
|
|
- item.productsList.forEach(pros => {
|
|
|
- pros.productsChecked = true;
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- this.updateCheckAllBtn();
|
|
|
- }
|
|
|
- // 失效也被勾选
|
|
|
- this.failureList.forEach(failureItem => {
|
|
|
- if(failureItem.isFailureLayer){
|
|
|
- failureItem.isFailureLayer = false
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- hideDelManage(){//隐藏删除商品管理
|
|
|
- this.isshowDelbtn = false;
|
|
|
- let isFailureLayer,newFailureList =[];
|
|
|
- if(this.isCheckAll) {
|
|
|
- this.updateBothCheckBtn();
|
|
|
- } else {
|
|
|
- // 失效商品取消勾选
|
|
|
- this.goodsList.forEach(item => {
|
|
|
- if(item.isDisabled) {
|
|
|
- item.checked = false;
|
|
|
- }
|
|
|
- item.productsList.forEach(pros => {
|
|
|
- if(pros.validFlag == 3) {
|
|
|
- pros.productsChecked = false;
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- this.updateCheckAllBtn();
|
|
|
- }
|
|
|
- this.failureList.forEach((failure,index) => {
|
|
|
- if(failure.failureState == 1 || failure.failureState == 2) {
|
|
|
- isFailureLayer = true
|
|
|
- }else{
|
|
|
- isFailureLayer = false
|
|
|
- }
|
|
|
- newFailureList.push(Object.assign({},failure,{isFailureLayer:isFailureLayer}))
|
|
|
- })
|
|
|
- this.failureList = newFailureList;
|
|
|
- },
|
|
|
- deleteList(){//删除购物车商品
|
|
|
- this.delGoodsList=[];
|
|
|
- this.goodsList.forEach(delitem=>{
|
|
|
- let products = delitem.productsList
|
|
|
- products.forEach(pros=>{
|
|
|
- if(pros.productsChecked){
|
|
|
- this.delGoodsList += pros.cartId+','
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- // this.failureList.forEach(failure=>{
|
|
|
- // if(failure.productsChecked){
|
|
|
- // this.delGoodsList += failure.cartId+','
|
|
|
- // }
|
|
|
- // })
|
|
|
- if(this.delGoodsList.length == 0){
|
|
|
- this.$util.msg("请选择要删除的商品~",2000);
|
|
|
- return
|
|
|
- }else{
|
|
|
- this.modal = true;
|
|
|
- this.contentModalText = '确定删除选中的商品吗？';
|
|
|
- this.deleteType = 1
|
|
|
- }
|
|
|
- },
|
|
|
- deletefailureList(){
|
|
|
- this.delGoodsList = ''
|
|
|
- this.failureList.forEach(failure=>{ this.delGoodsList += failure.cartId+',' })
|
|
|
- this.modal = true;
|
|
|
- this.contentModalText = '确定清除所有失效商品吗？';
|
|
|
- this.deleteType = 2
|
|
|
- },
|
|
|
- handleClick(e) {//用户操作订单
|
|
|
- let index = e.index;
|
|
|
- if(index == 1){
|
|
|
- this.ProductService.ShoppingCartDelete(
|
|
|
- {
|
|
|
- cartIds:this.delGoodsList,
|
|
|
- }
|
|
|
- )
|
|
|
- .then(response =>{
|
|
|
- this.$util.msg('删除成功',2000);
|
|
|
- setTimeout(()=>{
|
|
|
- this.isshowDelbtn = false;
|
|
|
- this.initGetCartGoodsList();
|
|
|
- },1000)
|
|
|
- }).catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000)
|
|
|
- })
|
|
|
- }
|
|
|
- this.modal = false;
|
|
|
- },
|
|
|
- hideMobel(){
|
|
|
- this.modal = false;
|
|
|
- },
|
|
|
- goIndex(){
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/tabBar/home/index'
|
|
|
- });
|
|
|
- },
|
|
|
- goNavto(url){
|
|
|
- uni.navigateTo ({
|
|
|
- url
|
|
|
- })
|
|
|
- },
|
|
|
- navToListPage(id){
|
|
|
- this.isModallayer = true;
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
- },
|
|
|
- failureToProduct(failure){
|
|
|
- if(failure.status == 1){
|
|
|
- this.$util.msg('商品已丢失,不能查看',2000)
|
|
|
- return
|
|
|
- }else if(failure.status == 2){
|
|
|
- this.$util.msg('商品已停售,不能查看',2000)
|
|
|
- return
|
|
|
- }else{
|
|
|
- this.isModallayer = true;
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${failure.productId}`)
|
|
|
- }
|
|
|
- },
|
|
|
- failureStateText(state){
|
|
|
- let stateText = '',
|
|
|
- stateTextObject={
|
|
|
- 1:'商品已丢失',
|
|
|
- 2:'商品已停售',
|
|
|
- 3:'商品已下架',
|
|
|
- 4:'商品已售罄',
|
|
|
- 5:'价格仅会员可见，您不能购买',
|
|
|
- 6:'未公开价格',
|
|
|
- 7:'库存不足'
|
|
|
- }
|
|
|
- Object.keys(stateTextObject).forEach(key => {
|
|
|
- if(key == state){
|
|
|
- stateText = stateTextObject[key]
|
|
|
- }
|
|
|
- })
|
|
|
- return stateText;
|
|
|
- },
|
|
|
- setHeaderBtnPosi(){
|
|
|
- // 获得胶囊按钮位置信息
|
|
|
- let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
|
|
|
- return headerBtnPosi
|
|
|
- },
|
|
|
- setSysteminfo(){
|
|
|
- let systeminfo;
|
|
|
- uni.getSystemInfo({ // 获取设备信息
|
|
|
- success: (res) => {
|
|
|
- systeminfo = res
|
|
|
- },
|
|
|
- })
|
|
|
- return systeminfo
|
|
|
- },
|
|
|
- PromotionsFormat(promo){//促销活动类型数据处理
|
|
|
- if(promo!=null){
|
|
|
- if(promo.type == 1 && promo.mode == 1){
|
|
|
- return true
|
|
|
- }else{
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- return false
|
|
|
- }
|
|
|
- },
|
|
|
- watch:{//深度监听所有数据，每次改变重新计算总价和总数
|
|
|
- goodsList:{
|
|
|
- deep:true,
|
|
|
- handler(val,oldval){
|
|
|
- this.totalPeice()
|
|
|
- this.totalCount()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- onPullDownRefresh() {//下拉刷新
|
|
|
- this.initGetCartGoodsList()
|
|
|
- uni.stopPullDownRefresh()
|
|
|
- },
|
|
|
- onShow(){
|
|
|
- // if(this.hasLogin){
|
|
|
- // this.initData()
|
|
|
- // }else{
|
|
|
- // this.initLogin()
|
|
|
- // }
|
|
|
- },
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- page{
|
|
|
- background: #f7f7f7;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- .cart-content{
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .container-cart-main.none{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .container-cart-main.show{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .cart-content.empty.none{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .cart-content.empty.show{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .container-cart.show{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .container-cart.none{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .empty-container.none{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .empty-container.show{
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- .foot-check-delbtn{
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 15rpx 24rpx;
|
|
|
- background-color: #F7F7F7;
|
|
|
- z-index: 990;
|
|
|
- .foot-text{
|
|
|
- font-size: $font-size-26;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- color:#666666;
|
|
|
- float: left;
|
|
|
- padding-left: 10rpx;
|
|
|
- text{
|
|
|
- margin: 0 6rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .delBtn{
|
|
|
- width: 100rpx;
|
|
|
- display: inline-block;
|
|
|
- padding: 0 15rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- background:#FFFFFF;
|
|
|
- border: 1px solid #ff457b;
|
|
|
- color: #ff457b;
|
|
|
- float: right;
|
|
|
- text-align: center;
|
|
|
- &.none{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .checkbox-box{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .checkbox{
|
|
|
- display: flex;
|
|
|
- margin: 0;
|
|
|
- padding: 5rpx;
|
|
|
- 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:#999999;
|
|
|
- &.icon-xuanze{
|
|
|
- color: $color-system;
|
|
|
- }
|
|
|
- }
|
|
|
- &.disabled{
|
|
|
- .checkbox{
|
|
|
- color:#999999
|
|
|
- }
|
|
|
- }
|
|
|
- .text{
|
|
|
- font-size: $font-size-24;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .goods-list{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- background-color: #F7F7F7;
|
|
|
- .goods-item{
|
|
|
- width: 702rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- }
|
|
|
- .shoptitle{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- .checkbox-box{
|
|
|
- padding: 10rpx;
|
|
|
- }
|
|
|
- .text{
|
|
|
- width: 450rpx;
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- margin-left: 20rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- text-align: left;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- .goods-pros{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
- .goods-pros-t{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- height: 210rpx;
|
|
|
- padding:0 0 26rpx 0;
|
|
|
- .checkbox-box{
|
|
|
- padding: 10rpx;
|
|
|
- }
|
|
|
- .pros-img{
|
|
|
- width: 210rpx;
|
|
|
- height: 100%;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin:0 20rpx;
|
|
|
- border:1px solid #f3f3f3;
|
|
|
- image{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .goods-pros-b{
|
|
|
- width:100%;
|
|
|
- height: auto;
|
|
|
- padding:0 0 24rpx 0;
|
|
|
- box-sizing: border-box;
|
|
|
- &.show{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- &.none{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .sum-none{
|
|
|
- width: 100%;
|
|
|
- height: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- color: $text-color;
|
|
|
- float: left;
|
|
|
- text-align: right;
|
|
|
- .money{
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #999999;
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- .money-sign{
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #999999;
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- .money-reduced{
|
|
|
- margin-left: 10rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: $color-system;
|
|
|
- .iconfont{
|
|
|
- font-size: $font-size-34;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .sum{
|
|
|
- width: 100%;
|
|
|
- height: 40rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- line-height: 40rpx;
|
|
|
- color: $text-color;
|
|
|
- float: left;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- font-weight: bold;
|
|
|
- .money{
|
|
|
- color: $color-system;
|
|
|
- font-size: $font-size-26;
|
|
|
- }
|
|
|
- .money-sign{
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $color-system;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .pros-product{
|
|
|
- width: 416rpx;
|
|
|
- height: 100%;
|
|
|
- line-height: 36rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- position: relative;
|
|
|
- .producttitle{
|
|
|
- width: 100%;
|
|
|
- display: inline-block;
|
|
|
- height: auto;
|
|
|
- text-overflow:ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 15rpx;
|
|
|
- .no-text{
|
|
|
- display: inline-block;
|
|
|
- height:36rpx;
|
|
|
- padding: 0 12rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- background:linear-gradient(315deg,rgba(231,0,0,1) 0%,rgba(255,104,1,1) 100%);
|
|
|
- border-radius:18rpx;
|
|
|
- text-align: center;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size:$font-size-28;
|
|
|
- margin-right: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .productspec{
|
|
|
- height: 36rpx;
|
|
|
- color: #999999;
|
|
|
- font-size: $font-size-26;
|
|
|
- }
|
|
|
- .productprice{
|
|
|
- width: 100%;
|
|
|
- height: 48rpx;
|
|
|
- margin: 30rpx 0 0 0;
|
|
|
- .price{
|
|
|
- line-height: 48rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- width: 48%;
|
|
|
- color: $color-system;
|
|
|
- float: left;
|
|
|
- font-weight: bold;
|
|
|
- &.disabled{
|
|
|
- color: #999999;
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- .money-sign{
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $color-system;
|
|
|
- }
|
|
|
- }
|
|
|
- .count{
|
|
|
- height: 100%;
|
|
|
- float: right;
|
|
|
- position: relative;
|
|
|
- &.show{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- &.none{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .count-tips{
|
|
|
- width: auto;
|
|
|
- display: inline-block;
|
|
|
- padding: 0 15rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- border-radius: 22rpx;
|
|
|
- background: $btn-confirm;
|
|
|
- font-size: $font-size-24;
|
|
|
- text-align: center;
|
|
|
- color: #FFFFFF;
|
|
|
- position: absolute;
|
|
|
- top:-60rpx;
|
|
|
- left: -5rpx;
|
|
|
- z-index: 5;
|
|
|
- &.step{
|
|
|
- left:-217rpx
|
|
|
- }
|
|
|
- &::before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- bottom: -30rpx;
|
|
|
- right: 15rpx;
|
|
|
- z-index:1;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-width: 18rpx;
|
|
|
- border-style: solid;
|
|
|
- border-color:$color-system transparent transparent transparent;
|
|
|
- }
|
|
|
- }
|
|
|
- .number-box {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border: 2rpx solid #e1e1e1;
|
|
|
- border-radius: 30rpx;
|
|
|
- height: 48rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- .iconfont {
|
|
|
- font-size: $font-size-24;
|
|
|
- padding: 0 14rpx;
|
|
|
- color: #666666;
|
|
|
- text-align: center;
|
|
|
- line-height: 48rpx;
|
|
|
- font-weight: bold;
|
|
|
- background: #ffffff;
|
|
|
- &.icon-jianhao {
|
|
|
- border-radius: 30rpx 0 0 30rpx;
|
|
|
- }
|
|
|
- &.icon-jiahao {
|
|
|
- border-radius: 0 30rpx 30rpx 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-input {
|
|
|
- width: 56rpx;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #333333;
|
|
|
- background-color: #f7f7f7;
|
|
|
- }
|
|
|
- }
|
|
|
- .uni-numbox{
|
|
|
- position: absolute;
|
|
|
- left: 45rpx;
|
|
|
- bottom: 0;
|
|
|
- .uni-numbox-minus, .uni-numbox-plus{
|
|
|
- width: 50rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- .uni-numbox-value {
|
|
|
- font-size: $font-size-28;
|
|
|
- width: 60rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .floor-item-act{
|
|
|
- width: 100%;
|
|
|
- height: 30rpx;
|
|
|
- margin-top: 8rpx;
|
|
|
- float: left;
|
|
|
- .tag{
|
|
|
- display: inline-block;
|
|
|
- width: 80rpx;
|
|
|
- height: 30rpx;
|
|
|
- background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png)top center no-repeat;
|
|
|
- background-size: contain;
|
|
|
- font-size: 22rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- text-align: center;
|
|
|
- color: #f83c6c;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .failure-list{
|
|
|
- width: 702rpx;
|
|
|
- height: auto;
|
|
|
- padding: 0 24rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- .failure-title{
|
|
|
- width: 100%;
|
|
|
- height: 82rpx;
|
|
|
- line-height: 82rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- border-bottom: 1px solid #EBEBEB;
|
|
|
- .title-txt{
|
|
|
- float: left;
|
|
|
- color:#666666;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .title-btn{
|
|
|
- float: right;
|
|
|
- color: $color-system;
|
|
|
- text-align: right;
|
|
|
- line-height: 80rpx;
|
|
|
- .butto{
|
|
|
- display: inline-block;
|
|
|
- padding: 0 15rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- background:#fff8fd;
|
|
|
- border: 1px solid #ff457b;
|
|
|
- color: #ff457b;
|
|
|
- margin-top: 15rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .productlist{
|
|
|
- padding-top: 10rpx;
|
|
|
- .goods-pros{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- padding: 20rpx 0;
|
|
|
- }
|
|
|
- .goods-pros-t{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- height: 210rpx;
|
|
|
- position: relative;
|
|
|
- .img-tip{
|
|
|
- display: block;
|
|
|
- width: 72rpx;
|
|
|
- height: 36rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- text-align: center;
|
|
|
- color: #FFFFFF;
|
|
|
- border-radius: 24rpx;
|
|
|
- background:rgba(51,51,51,0.3);
|
|
|
- // position: absolute;
|
|
|
- // left: 0;
|
|
|
- // top: 0;
|
|
|
- }
|
|
|
- .checkbox-box{
|
|
|
- padding: 10rpx;
|
|
|
- }
|
|
|
- .pros-img{
|
|
|
- width: 180rpx;
|
|
|
- height: 100%;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin:0 20rpx;
|
|
|
- border:1px solid #f3f3f3;
|
|
|
- position: relative;
|
|
|
- image{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .pros-marks{
|
|
|
- width: 730rpx;
height: 250rpx;
|
|
|
- z-index: 90;
|
|
|
- background: rgba(0,0,0,.05);
|
|
|
- position: absolute;
|
|
|
- left:-20rpx;
|
|
|
- top: -20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .goods-pros-b{
|
|
|
- width:622rpx;
|
|
|
- margin-left: 84rpx;
|
|
|
- height: 40rpx;
|
|
|
- padding:0 0 26rpx 0;
|
|
|
- // border-top: 1px solid #EBEBEB;
|
|
|
- &.show{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- &.none{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .sum{
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 40rpx;
|
|
|
- color: $text-color;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- .money{
|
|
|
- color: #FF2A2A;
|
|
|
- font-size: $font-size-28;
|
|
|
- }
|
|
|
- .money-sign{
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #FF2A2A;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .pros-product{
|
|
|
- width: 402rpx;
|
|
|
- height: 100%;
|
|
|
- line-height: 36rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- position: relative;
|
|
|
- .producttitle{
|
|
|
- width: 100%;
|
|
|
- display: inline-block;
|
|
|
- height: auto;
|
|
|
- text-overflow:ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- .no-text{
|
|
|
- display: inline-block;
|
|
|
- height:36rpx;
|
|
|
- padding: 0 12rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- background:linear-gradient(315deg,rgba(231,0,0,1) 0%,rgba(255,104,1,1) 100%);
|
|
|
- border-radius:18rpx;
|
|
|
- text-align: center;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: $font-size-28;
|
|
|
- margin-right: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .productspec{
|
|
|
- height: 36rpx;
|
|
|
- color: #999999;
|
|
|
- font-size: $font-size-26;
|
|
|
- margin-top: 20rpx;
|
|
|
- }
|
|
|
- .productstate{
|
|
|
- font-size: $font-size-28;
|
|
|
- height: 44rpx;
|
|
|
- color: #FF2A2A;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .footer{
|
|
|
- width: 100%;
|
|
|
- background-color: #FFFFFF;
|
|
|
- height: 100rpx;
|
|
|
- position: fixed;
|
|
|
- bottom: 0rpx;
|
|
|
- z-index: 100;
|
|
|
- .footer-le{
|
|
|
- width: 520rpx;
|
|
|
- height: 100%;
|
|
|
- padding:10rpx 24rpx;
|
|
|
- float: left;
|
|
|
- box-sizing: border-box;
|
|
|
- .foot-check{
|
|
|
- width: 100rpx;
|
|
|
- float: left;
|
|
|
- line-height: 80rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- .checkbox{
|
|
|
- width: 40rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .text{
|
|
|
- width: 60rpx;
|
|
|
- float: right;
|
|
|
- }
|
|
|
- }
|
|
|
- .sum{
|
|
|
- width: 360rpx;
|
|
|
- height: 100%;
|
|
|
- float: right;
|
|
|
- box-sizing: border-box;
|
|
|
- padding:0 10rpx;
|
|
|
- .sum-none{
|
|
|
- width: 100%;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- color: $text-color;
|
|
|
- float: left;
|
|
|
- text-align: right;
|
|
|
- .money{
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #999999;
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- .money-sign{
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #999999;
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- .money-reduced{
|
|
|
- margin-left: 10rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $color-system;
|
|
|
- }
|
|
|
- }
|
|
|
- .sum-price{
|
|
|
- text-align: right;
|
|
|
- width: 100%;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- font-size: $font-size-30;
|
|
|
- color: $text-color;
|
|
|
- float: left;
|
|
|
- font-weight: normal;
|
|
|
- &.none{
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- }
|
|
|
- .money{
|
|
|
- color: $color-system;
|
|
|
- }
|
|
|
- .money-sign{
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $color-system;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .footer-ri{
|
|
|
- width: 230rpx;
|
|
|
- height: 100%;
|
|
|
- float: right;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- z-index: 999;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 13rpx 15rpx;
|
|
|
- &.none{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .btn{
|
|
|
- width: 200rpx;
|
|
|
- height: 100%;
|
|
|
- background:$btn-confirm;
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 80rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- display: flex;
|
|
|
- border-radius: 40rpx;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .footer-del{
|
|
|
- width: 420rpx;
|
|
|
- height: 100rpx;
|
|
|
- position: absolute;
|
|
|
- padding-left: 200rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- z-index: 1000;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 10rpx 0;
|
|
|
- display: flex;
|
|
|
- &.show{
|
|
|
- animation: showDelbtn 0s linear both;
|
|
|
- }
|
|
|
- &.none{
|
|
|
- animation: hideDelbtn 0s linear both;
|
|
|
- }
|
|
|
- .btn{
|
|
|
- flex: 1;
|
|
|
- margin: 0 8rpx;
|
|
|
- height: 100%;
|
|
|
- line-height: 80rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- float: left;
|
|
|
- border-radius: 40rpx;
|
|
|
- }
|
|
|
- .btn.btn-cancel{
|
|
|
- background:#f7f7f7;
|
|
|
- color: #B2B2B2;
|
|
|
- }
|
|
|
- .btn.btn-confirm{
|
|
|
- background:$btn-confirm;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- @keyframes showDelbtn {
|
|
|
- 0% {
|
|
|
- transform: translateX(0);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateX(-100%);
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes hideDelbtn {
|
|
|
- 0% {
|
|
|
- transform: translateX(-100%);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateX(0);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <view class="container cart clearfix" v-if="!hasLogin">
|
|
|
+ <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
|
|
|
+ <view class="container-cart-main tui-skeleton" :style="{paddingTop:isshowDelbtn ? '0rpx':'80rpx'}">
|
|
|
+ <view class="foot-check-delbtn" v-if="!isshowDelbtn && goodsList.length>0">
|
|
|
+ <view class="foot-text">共<text>{{kindCount}}</text>件商品</view>
|
|
|
+ <view class="delBtn" @tap.stop="showDelManager">删除</view>
|
|
|
+ </view>
|
|
|
+ <view v-if="!isEmpty" class="container-cart">
|
|
|
+ <view class="cart-content" :style="{paddingBottom :isIphoneX ? '130rpx' : '100rpx'}">
|
|
|
+ <view class="goods-list">
|
|
|
+ <view v-for="(item, index) in goodsList" :key="index" class="goods-item clearfix">
|
|
|
+ <view class="shoptitle">
|
|
|
+ <!--选择商店的全部商品"-->
|
|
|
+ <view class="checkbox-box" @click.stop="checkShop(item)">
|
|
|
+ <view class="checkbox iconfont" :class="[item.checked ?'icon-xuanze':'icon-weixuanze']"></view>
|
|
|
+ </view>
|
|
|
+ <view class="text">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="productlist">
|
|
|
+ <view class="goods-pros" v-for="(pros,idx) in item.productsList" :key="idx" >
|
|
|
+ <view class="goods-pros-t">
|
|
|
+ <!--选择商品-->
|
|
|
+ <view class="checkbox-box" @click.stop="ischeck(item,pros)">
|
|
|
+ <view class="checkbox iconfont" :class="[pros.productsChecked ? 'icon-xuanze':'icon-weixuanze']"></view>
|
|
|
+ </view>
|
|
|
+ <view class="pros-img" @click.stop="navToListPage(pros.productId)" ><image :src="pros.image ? pros.image:''" alt="" /></view>
|
|
|
+ <view class="pros-product">
|
|
|
+ <view class="producttitle" @click.stop="navToListPage(pros.productId)" >{{pros.name}}</view>
|
|
|
+ <view class="productspec">规格:{{pros.unit ? pros.unit : ''}}</view>
|
|
|
+ <view class="floor-item-act"><view class="tag" @click.stop="clickPopupShow(pros,2)">活动价</view></view>
|
|
|
+ <view class="productprice">
|
|
|
+ <!--使用过滤器对总价改变-->
|
|
|
+ <view class="price"><text>￥</text>{{ pros.price | NumFormat }}</view>
|
|
|
+ <view class="count" v-if="pros.validFlag == 2 " :class="[isshowDelbtn ? 'none':'show']">
|
|
|
+ <view class="number-box">
|
|
|
+ <view class="iconfont icon-jianhao" @click="changeCountSub(item,pros)"></view>
|
|
|
+ <input class="btn-input" type="number" maxlength='4' v-model="pros.minBuyNumber" @blur="changeNnmber($event,item,pros)" @focus="changeInput(pros)">
|
|
|
+ <view class="iconfont icon-jiahao" @click="changeCountAdd(item,pros)"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goods-pros-b clearfix" :class="[isshowDelbtn ? 'none':'show']" >
|
|
|
+ <view class="sum-none" v-if="item.reducedPrice>0">
|
|
|
+ <text class="money-sign">￥</text>
|
|
|
+ <text class="money">{{ item.totalOriginalPrice | NumFormat }}</text>
|
|
|
+ <text class="money-reduced">减<text>￥{{ item.reducedPrice | NumFormat}}</text></text>
|
|
|
+ </view>
|
|
|
+ <view class="sum">合计:<text class="money"><text class="money-sign">￥</text>{{item.totalPrice | NumFormat}}</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="failure-list" v-if="failureList.length>0">
|
|
|
+ <view class="failure-title">
|
|
|
+ <view class="title-txt">失效商品<text>{{failureList.length}}件</text></view>
|
|
|
+ <view class="title-btn" @click.stop="deletefailureList"><text class="butto">清空失效商品</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="productlist">
|
|
|
+ <view class="goods-pros" v-for="(failure,failureIdx) in failureList" :key="failureIdx" >
|
|
|
+ <view class="goods-pros-t" @click.stop="failureToProduct(failure)">
|
|
|
+ <!--选择商品-->
|
|
|
+ <view class="checkbox-box" @click.stop="ischeckFailure(failure)" v-if="isshowDelbtn">
|
|
|
+ <button class="checkbox iconfont"
|
|
|
+ :class="[ failure.productsChecked ? 'icon-xuanze':'icon-weixuanze']">
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <text class="img-tip">失效</text>
|
|
|
+ <view class="pros-img">
|
|
|
+ <image :src="failure.image ? failure.image:''" alt="" />
|
|
|
+ </view>
|
|
|
+ <view class="pros-product">
|
|
|
+ <view class="producttitle">{{failure.name}}</view>
|
|
|
+ <view class="productspec">规格:{{failure.unit ? failure.unit : ''}}</view>
|
|
|
+ <view class="productstate">{{failureStateText(failure.status)}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="pros-marks" v-if="failure.isFailureLayer"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 脚部菜单 -->
|
|
|
+ <view class="footer">
|
|
|
+ <view class="footer-le">
|
|
|
+ <view class="foot-check checkbox-box" @tap.stop="checkAll()">
|
|
|
+ <button class="checkbox iconfont" :class="[isCheckAll?'icon-xuanze':'icon-weixuanze']"></button>
|
|
|
+ <view class="text">全选</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="sum">
|
|
|
+ <view class="sum-none" v-if="reducedPrice>0">
|
|
|
+ <text class="money-sign">￥</text>
|
|
|
+ <text class="money">{{ totalOriginalPrice | NumFormat }}</text>
|
|
|
+ <text class="money-reduced">减<text>￥{{ reducedPrice | NumFormat}}</text></text>
|
|
|
+ </view>
|
|
|
+ <view class="sum-price" :class="reducedPrice == 0 ? 'none' : ''">
|
|
|
+ 总价:<text class="money-sign">￥</text><text class="money">{{allPrice | NumFormat}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="!isshowDelbtn" class="footer-ri" >
|
|
|
+ <view class="btn hanld-btn" @tap="toConfirmation">去结算({{allCount}})</view>
|
|
|
+ </view>
|
|
|
+ <view v-else class="footer-del">
|
|
|
+ <view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
|
|
|
+ <view class="btn btn-confirm" @tap.stop="deleteList">删除</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else class="cart-content empty">
|
|
|
+ <view class="empty-container">
|
|
|
+ <image class="empty-container-image" :src="StaticUrl+'icon-empty-cart.png'" mode="aspectFit"></image>
|
|
|
+ <text class="error-text">购物车空空的，快去逛逛吧~</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 操作弹窗 -->
|
|
|
+ <tui-modal :show="modal" @click="handleClick" @cancel="hideMobel" :content="contentModalText" color="#333" :size="32" shape="circle" :maskClosable="false"></tui-modal>
|
|
|
+ <!-- 促销活动弹窗 -->
|
|
|
+ <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
|
|
|
+ <!-- 透明模态层 -->
|
|
|
+ <modal-layer v-if='modallayer'></modal-layer>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import authorize from '@/common/config/authorize.js'
|
|
|
+ import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
|
+ import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
|
|
|
+ import tuiNomore from "@/components/tui-components/nomore/nomore"
|
|
|
+ import activiPopup from "@/components/cm-module/productDetails/cm-activipopu"
|
|
|
+ import modalLayer from "@/components/modal-layer"
|
|
|
+ import { mapState,mapMutations } from 'vuex';
|
|
|
+ import { cartList } from '@/common/json/data.json.js' //本地数据
|
|
|
+
|
|
|
+ export default{
|
|
|
+ components:{
|
|
|
+ tuiSkeleton,
|
|
|
+ tuiLoadmore,
|
|
|
+ tuiNomore,
|
|
|
+ activiPopup,
|
|
|
+ modalLayer
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ StaticUrl:this.$Static,
|
|
|
+ CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
+ isIphoneX:this.$store.state.isIphoneX,
|
|
|
+ userID:'',
|
|
|
+ alertType:'',
|
|
|
+ isStock:'',
|
|
|
+ popupShow:false,
|
|
|
+ handlerPros:{},//监听单挑促销商品
|
|
|
+ failureList:[], //失效商品列表
|
|
|
+ goodsList:cartList, //购物车的商品
|
|
|
+ promotionsList:[],//促销列表
|
|
|
+ delGoodsList:'',//要删除的商品
|
|
|
+ setGoodData:'', //确认订单的商品
|
|
|
+ isCheckAll:false,//是否全选
|
|
|
+ kindCount:0,//购物车宝贝数量
|
|
|
+ allPrice:0,//所有价格
|
|
|
+ totalOriginalPrice:0,//所有原价价
|
|
|
+ reducedPrice:0,//满减
|
|
|
+ allCount:0,//被选中的产品数量
|
|
|
+ isModallayer:false,
|
|
|
+ skeletonShow:false,
|
|
|
+ isshowDelbtn:false,
|
|
|
+ isDisabled: false, // 供应商/店铺全选是否禁用状态
|
|
|
+ isNoConfim:false,
|
|
|
+ isEmpty:false,//显示空购物车
|
|
|
+ scrollHeight: 'auto',
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ hasNextPage: false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ pullFlag: true,
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ submitIds:[],
|
|
|
+ modal:false,
|
|
|
+ contentModalText:'',
|
|
|
+ deleteType:0,
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(){
|
|
|
+ this.setScrollHeight();
|
|
|
+ console.log(this.goodsList)
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin','userInfo'])
|
|
|
+ },
|
|
|
+ filters:{
|
|
|
+ NumFormat(value) {//处理金额
|
|
|
+ return Number(value).toFixed(2);
|
|
|
+ },
|
|
|
+ totalprice(val,count){//单件商品的价格 × 数量
|
|
|
+ return (val * count).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ initData(){
|
|
|
+ this.isModallayer = false //遮罩层 防止多次点击
|
|
|
+ // this.skeletonShow = true //预加载圆圈
|
|
|
+ this.isCheckAll=false//是否全选
|
|
|
+ this.submitIds = []
|
|
|
+ this.$api.getStorage().then((resolve) => {
|
|
|
+ this.userID = resolve.userId;
|
|
|
+ this.initGetCartGoodsList();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initLogin(){
|
|
|
+ authorize.checkLogin()
|
|
|
+ .then(res => {
|
|
|
+ this.$api.redirectTo('/pages/login/login?type=4')
|
|
|
+ })
|
|
|
+ .catch(err =>{
|
|
|
+ this.$api.navigateTo('/pages/authorization/authorization?type=0')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clickPopupShow(pros,type){
|
|
|
+ this.popupShow = true;
|
|
|
+ this.handlerPros = pros;
|
|
|
+ },
|
|
|
+ setScrollHeight() {
|
|
|
+ // 窗口高度-footer高度
|
|
|
+ const {windowHeight, pixelRatio} = uni.getSystemInfoSync();
|
|
|
+ setTimeout(()=> {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query.selectAll('.footer').boundingClientRect();
|
|
|
+ query.exec(res => {
|
|
|
+ this.windowHeight = windowHeight;
|
|
|
+ if(res[0][0]) {
|
|
|
+ this.scrollHeight = windowHeight - res[0][0].height;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ initGetCartGoodsList(){//初始化购物车 index:1
|
|
|
+ this.ProductService.QueryShoppingCartList({userId:this.userID}).then(response =>{
|
|
|
+ this.skeletonShow = false
|
|
|
+ let data = response.data
|
|
|
+ this.kindCount = data.kindCount
|
|
|
+ this.promotionsList = data.promotions
|
|
|
+ this.$store.commit('updateAllNum',data.kindCount)
|
|
|
+ if( data.list.length > 0 || data.invalid.length > 0){
|
|
|
+ this.isEmpty =false
|
|
|
+ }else{
|
|
|
+ this.isEmpty =true
|
|
|
+ }
|
|
|
+ if(data.list && data.list.length > 0 ){
|
|
|
+ this.goodsList = data.list;
|
|
|
+ this.totalShopPeice()
|
|
|
+ } else {
|
|
|
+ this.goodsList = [];
|
|
|
+ }
|
|
|
+ if( data.invalid && data.invalid.length > 0){
|
|
|
+ let newFailureList = [],isFailureLayer;
|
|
|
+ data.invalid.forEach((failure,index) => {
|
|
|
+ if(failure.status == 1 || failure.status == 2) {
|
|
|
+ isFailureLayer = true
|
|
|
+ }else{
|
|
|
+ isFailureLayer = false
|
|
|
+ }
|
|
|
+ newFailureList.push(Object.assign({},failure,{isFailureLayer:isFailureLayer}))
|
|
|
+ })
|
|
|
+ this.failureList = newFailureList
|
|
|
+ } else {
|
|
|
+ this.failureList = [];
|
|
|
+ }
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ischeckFailure(failure){
|
|
|
+ failure.productsChecked = !failure.productsChecked
|
|
|
+ this.updateCheckAllBtn()
|
|
|
+ },
|
|
|
+ ischeck(item,pro){//为未选中的时候改变为true，反之为true
|
|
|
+ pro.productsChecked = !pro.productsChecked;
|
|
|
+ if(pro.productsChecked) {
|
|
|
+ if(!this.submitIds.includes(pro.productID*1)){
|
|
|
+ this.submitIds.push(pro.productID);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ var lent = this.submitIds.indexOf(pro.productID*1);
|
|
|
+ if(lent >=0 ){
|
|
|
+ this.submitIds.splice(lent, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.updateProductCheckedAllBtn(item);
|
|
|
+ this.updateCheckAllBtn();
|
|
|
+
|
|
|
+ },
|
|
|
+ updateProductCheckedAllBtn(item) {// 单独每个供应商的勾选判断
|
|
|
+ let productsList = item.productsList,
|
|
|
+ productsCheckedLength = 0,
|
|
|
+ disabledLength = 0;
|
|
|
+ if(this.isshowDelbtn) {
|
|
|
+ productsList.forEach(pros => {
|
|
|
+ if(pros.productsChecked) {
|
|
|
+ productsCheckedLength++;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ productsList.forEach(pros => {
|
|
|
+ if(pros.productsChecked) {
|
|
|
+ productsCheckedLength++;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ item.checked = productsCheckedLength === productsList.length;
|
|
|
+ },
|
|
|
+ updateCheckAllBtn() {// 全选勾选判断
|
|
|
+ let goodsCheckedLength = 0,
|
|
|
+ goodsList = this.goodsList,
|
|
|
+ failureList = this.failureList;
|
|
|
+ goodsList.forEach(item => {
|
|
|
+ if(item.checked) {
|
|
|
+ goodsCheckedLength++;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ failureList.forEach(failureItem=>{
|
|
|
+ if(failureItem.productsChecked){
|
|
|
+ goodsCheckedLength++;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(this.isshowDelbtn){
|
|
|
+ this.isCheckAll = goodsCheckedLength === goodsList.length + failureList.length;
|
|
|
+ }else{
|
|
|
+ this.isCheckAll = goodsCheckedLength === goodsList.length;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkShop(item){//与单选商品类似
|
|
|
+ item.checked = !item.checked;
|
|
|
+ this.setProductChecked(item);
|
|
|
+ this.updateCheckAllBtn();
|
|
|
+ },
|
|
|
+ setProductChecked(item) {
|
|
|
+ item.productsList.forEach(pros=>{
|
|
|
+ if(item.checked) {
|
|
|
+ pros.productsChecked = true;
|
|
|
+ if(!this.submitIds.includes(pros.productId*1)){
|
|
|
+ this.submitIds.push(pros.productId);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ pros.productsChecked = false;
|
|
|
+ var lent = this.submitIds.indexOf(pros.productId*1);
|
|
|
+ if(lent >=0 ){
|
|
|
+ this.submitIds.splice(lent, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateBothCheckBtn() {
|
|
|
+ if(this.isshowDelbtn) {
|
|
|
+ // 当管理删除按钮出现时,失效的商品可被选择
|
|
|
+ this.goodsList.forEach((item)=>{
|
|
|
+ item.checked = this.isCheckAll;
|
|
|
+ this.setProductChecked(item);
|
|
|
+ })
|
|
|
+ //删除按钮 全选包括失效商品勾选
|
|
|
+ this.failureList.forEach(failureItem=>{
|
|
|
+ failureItem.productsChecked = this.isCheckAll;
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.goodsList.forEach((item)=>{
|
|
|
+ item.checked = this.isCheckAll && !item.isDisabled;
|
|
|
+ this.setProductChecked(item);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkAll(){//全选方法内调用方法
|
|
|
+ this.isCheckAll = !this.isCheckAll;
|
|
|
+ this.updateBothCheckBtn();
|
|
|
+ },
|
|
|
+ totalShopPeice(){//每次所属会所下的商品增减重新计算合计价格&减去含有下架的商品
|
|
|
+ let touchPrice = 0;
|
|
|
+ let reducedPrice = 0;//商铺合计满减价
|
|
|
+ this.goodsList.map((item,index)=>{
|
|
|
+ let _totalPrice = 0;
|
|
|
+ let _reducedPrice = 0;
|
|
|
+ let _totalOriginalPrice =0;
|
|
|
+ item.productList.forEach(pros=>{
|
|
|
+ let _price = pros.retailPrice*pros.productCount
|
|
|
+ _totalOriginalPrice += pros.retailPrice*pros.productCount;
|
|
|
+ if(pros.promotion && pros.promotion.type != 2 && pros.promotion.mode == 2){
|
|
|
+ if(_price >= pros.promotion.touchPrice){
|
|
|
+ _price = _price - pros.promotion.reducedPrice
|
|
|
+ _reducedPrice += pros.promotion.reducedPrice
|
|
|
+ }
|
|
|
+ _totalPrice += _price
|
|
|
+ }else{
|
|
|
+ _reducedPrice = 0;
|
|
|
+ _totalPrice += pros.retailPrice*pros.productCount;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ item.reducedPrice = _reducedPrice
|
|
|
+ item.totalOriginalPrice = _totalOriginalPrice
|
|
|
+ item.totalPrice = _totalPrice
|
|
|
+ })
|
|
|
+ },
|
|
|
+ totalPeice(){//计算总价格,每次调用此方法，将初始值为0，遍历价格并累加
|
|
|
+ let totalPrice = 0;
|
|
|
+ let reducedPrice = 0;
|
|
|
+ let originalPrice = 0;
|
|
|
+ this.goodsList.forEach((item,index)=>{
|
|
|
+ let supplierPrice = 0;
|
|
|
+ let supplierReducedPrice = 0;
|
|
|
+ item.totalprice = 0;
|
|
|
+ item.reducedprice = 0;
|
|
|
+ item.originalprice = 0;
|
|
|
+ item.productList.forEach(pros=>{
|
|
|
+ if(pros.productsChecked){
|
|
|
+ supplierPrice += pros.retailPrice*pros.productCount;
|
|
|
+ // 单品满减
|
|
|
+ if(pros.promotion && pros.promotion.type*1===1 && pros.promotion.mode*1===2){
|
|
|
+ // 单品满减-重新计算供应商总价/满减金额
|
|
|
+ if(pros.retailPrice*pros.productCount >= pros.promotion.touchPrice){
|
|
|
+ supplierPrice -= pros.promotion.reducedPrice;
|
|
|
+ supplierReducedPrice += pros.promotion.reducedPrice;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ item.totalprice = supplierPrice;
|
|
|
+ item.reducedprice = supplierReducedPrice;
|
|
|
+ item.originalprice = (supplierPrice+supplierReducedPrice);
|
|
|
+ totalPrice += item.totalprice;
|
|
|
+ reducedPrice += item.reducedprice;
|
|
|
+ originalPrice += item.originalprice;
|
|
|
+ })
|
|
|
+ //最后统计商品原价
|
|
|
+ this.totalOriginalPrice = originalPrice;
|
|
|
+ //最后满减金额 = 店铺减去金额 + 单品减去金额 + 凑单减去金额
|
|
|
+ this.reducedPrice = reducedPrice;
|
|
|
+ //最终合计价格 = 店铺满减合计 + 单品满减 + 正常合计 + 凑单满减
|
|
|
+ this.allPrice = totalPrice ;
|
|
|
+ },
|
|
|
+ totalCount(){//计算总数量
|
|
|
+ this.allCount = 0
|
|
|
+ let prosAllCount=0
|
|
|
+ let validCount = 0
|
|
|
+ let validList =[];
|
|
|
+ let productsList =[];
|
|
|
+ this.goodsList.forEach(item=>{
|
|
|
+ productsList = item.productList
|
|
|
+ productsList.forEach(pros=>{
|
|
|
+ if(pros.productsChecked){
|
|
|
+ prosAllCount+=parseInt(pros.productCount);
|
|
|
+ this.allCount = prosAllCount
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeCountAdd(item,pros){//商品数量加加
|
|
|
+ if(pros.step === 2){
|
|
|
+ pros.isStep = false
|
|
|
+ pros.number += pros.min
|
|
|
+ this.processActivityPrice(pros)
|
|
|
+ this.isStock = false
|
|
|
+ }else{
|
|
|
+ pros.number++
|
|
|
+ this.processActivityPrice(pros)
|
|
|
+ this.isStock = false
|
|
|
+ }
|
|
|
+ this.updateShoppogNum(pros)
|
|
|
+ this.totalShopPeice();
|
|
|
+ },
|
|
|
+ changeCountSub(item,pros){//商品数量减减
|
|
|
+ if(pros.number<=pros.min){
|
|
|
+ pros.number= pros.min
|
|
|
+ this.$util.msg(`该商品最小起订量为${pros.min}`,2000);
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ if(pros.step === 2){
|
|
|
+ pros.isStep = false
|
|
|
+ pros.number -= pros.min
|
|
|
+ }else{
|
|
|
+ pros.number--
|
|
|
+ }
|
|
|
+ this.processActivityPrice(pros)
|
|
|
+ }
|
|
|
+ this.updateShoppogNum(pros)
|
|
|
+ this.totalShopPeice();
|
|
|
+ },
|
|
|
+ changeInput(pros){//输入商品数量更新
|
|
|
+ pros.isStep = false
|
|
|
+ },
|
|
|
+ changeNnmber(e,item,pros){//输入商品数量更新
|
|
|
+ let _value = Number(e.detail.value);
|
|
|
+ if(!this.$api.isNumber(_value)){
|
|
|
+ pros.number = pros.min
|
|
|
+ }else if(_value < pros.min){
|
|
|
+ this.$util.msg(`该商品最小起订量为${pros.min}`,2000);
|
|
|
+ pros.number = pros.min
|
|
|
+ }else if(_value % pros.min != 0){
|
|
|
+ pros.isStep = true
|
|
|
+ pros.number = pros.min
|
|
|
+ }else{
|
|
|
+ pros.isStep = false
|
|
|
+ pros.number = e.detail.value
|
|
|
+ this.processActivityPrice(pros)
|
|
|
+ }
|
|
|
+ this.updateShoppogNum(pros)
|
|
|
+ this.totalShopPeice();
|
|
|
+ },
|
|
|
+ processActivityPrice(pros){//单独处理活动价格和阶梯价格
|
|
|
+ let ladderPriceList = pros.ladderPrices;
|
|
|
+ if(pros.ladderFlag == '0' || pros.actStatus == 1){
|
|
|
+ pros.price = pros.price
|
|
|
+ }else{
|
|
|
+ ladderPriceList.forEach((item,index)=>{
|
|
|
+ if(pros.number>=item.buyNum){
|
|
|
+ pros.price = item.buyPrice
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ updateShoppogNum(pros){//加减购物车商品更新到后台
|
|
|
+ let params ={userID:this.userID,productID:pros.productId,productCount:pros.number}
|
|
|
+ this.ProductService.ShoppingCartUpdate(params).then(response =>{
|
|
|
+ this.isshowDelbtn = false;
|
|
|
+ this.initGetCartGoodsList();
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toConfirmation(){//跳转确认订单页面
|
|
|
+ let setGoodsList=[];
|
|
|
+ this.goodsList.forEach(res=>{
|
|
|
+ let products = res.productsList
|
|
|
+ products.forEach(pros=>{
|
|
|
+ if(pros.productsChecked){
|
|
|
+ setGoodsList.push(pros.productId)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ if(setGoodsList == ''){
|
|
|
+ this.$util.msg("请先选择结算商品~",2000);
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ this.isNoConfim = false
|
|
|
+ this.goodsList.forEach(el=>{
|
|
|
+ el.productsList.forEach(pros=>{
|
|
|
+ if(pros.productsChecked){
|
|
|
+ if(pros.number<pros.min){
|
|
|
+ this.isNoConfim = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ if(this.isNoConfim){
|
|
|
+ this.$util.modal('','有商品的购买量没达到最小起订量，请修改数量后再次提交结算','去修改','',false,() =>{})
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let productID = '';
|
|
|
+ this.goodsList.forEach(el=>{//获取勾选的商品ID拼接字符串逗号隔开，最后一个逗号去掉
|
|
|
+ el.productsList.forEach(pros=>{
|
|
|
+ if(pros.productsChecked){
|
|
|
+ productID += pros.productId+','
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ let cartPramsData={
|
|
|
+ allPrice:this.allPrice,
|
|
|
+ allCount:this.allCount,
|
|
|
+ productID:productID.substring(0,productID.lastIndexOf(',')),
|
|
|
+ productCount:''
|
|
|
+ }
|
|
|
+ this.$api.navigateTo(`/pages/user/order/create-order?data=${JSON.stringify({data:cartPramsData})}`)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showDelManager(){//显示删除商品管理
|
|
|
+ this.isshowDelbtn = true;
|
|
|
+ if(this.isCheckAll) {
|
|
|
+ this.updateBothCheckBtn();
|
|
|
+ } else {
|
|
|
+ this.goodsList.forEach(item => {
|
|
|
+ if(item.checked) {
|
|
|
+ item.productsList.forEach(pros => {
|
|
|
+ pros.productsChecked = true;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.updateCheckAllBtn();
|
|
|
+ }
|
|
|
+ // 失效也被勾选
|
|
|
+ this.failureList.forEach(failureItem => {
|
|
|
+ if(failureItem.isFailureLayer){
|
|
|
+ failureItem.isFailureLayer = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hideDelManage(){//隐藏删除商品管理
|
|
|
+ this.isshowDelbtn = false;
|
|
|
+ let isFailureLayer,newFailureList =[];
|
|
|
+ if(this.isCheckAll) {
|
|
|
+ this.updateBothCheckBtn();
|
|
|
+ } else {
|
|
|
+ // 失效商品取消勾选
|
|
|
+ this.goodsList.forEach(item => {
|
|
|
+ if(item.isDisabled) {
|
|
|
+ item.checked = false;
|
|
|
+ }
|
|
|
+ item.productsList.forEach(pros => {
|
|
|
+ if(pros.validFlag == 3) {
|
|
|
+ pros.productsChecked = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.updateCheckAllBtn();
|
|
|
+ }
|
|
|
+ this.failureList.forEach((failure,index) => {
|
|
|
+ if(failure.failureState == 1 || failure.failureState == 2) {
|
|
|
+ isFailureLayer = true
|
|
|
+ }else{
|
|
|
+ isFailureLayer = false
|
|
|
+ }
|
|
|
+ newFailureList.push(Object.assign({},failure,{isFailureLayer:isFailureLayer}))
|
|
|
+ })
|
|
|
+ this.failureList = newFailureList;
|
|
|
+ },
|
|
|
+ deleteList(){//删除购物车商品
|
|
|
+ this.delGoodsList=[];
|
|
|
+ this.goodsList.forEach(delitem=>{
|
|
|
+ let products = delitem.productsList
|
|
|
+ products.forEach(pros=>{
|
|
|
+ if(pros.productsChecked){
|
|
|
+ this.delGoodsList += pros.cartId+','
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // this.failureList.forEach(failure=>{
|
|
|
+ // if(failure.productsChecked){
|
|
|
+ // this.delGoodsList += failure.cartId+','
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ if(this.delGoodsList.length == 0){
|
|
|
+ this.$util.msg("请选择要删除的商品~",2000);
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ this.modal = true;
|
|
|
+ this.contentModalText = '确定删除选中的商品吗？';
|
|
|
+ this.deleteType = 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deletefailureList(){
|
|
|
+ this.delGoodsList = ''
|
|
|
+ this.failureList.forEach(failure=>{ this.delGoodsList += failure.cartId+',' })
|
|
|
+ this.modal = true;
|
|
|
+ this.contentModalText = '确定清除所有失效商品吗？';
|
|
|
+ this.deleteType = 2
|
|
|
+ },
|
|
|
+ handleClick(e) {//用户操作订单
|
|
|
+ let index = e.index;
|
|
|
+ if(index == 1){
|
|
|
+ this.ProductService.ShoppingCartDelete(
|
|
|
+ {
|
|
|
+ cartIds:this.delGoodsList,
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(response =>{
|
|
|
+ this.$util.msg('删除成功',2000);
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.isshowDelbtn = false;
|
|
|
+ this.initGetCartGoodsList();
|
|
|
+ },1000)
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.modal = false;
|
|
|
+ },
|
|
|
+ hideMobel(){
|
|
|
+ this.modal = false;
|
|
|
+ },
|
|
|
+ goIndex(){
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/tabBar/index/index'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goNavto(url){
|
|
|
+ uni.navigateTo ({
|
|
|
+ url
|
|
|
+ })
|
|
|
+ },
|
|
|
+ navToListPage(id){
|
|
|
+ this.isModallayer = true;
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
+ },
|
|
|
+ failureToProduct(failure){
|
|
|
+ if(failure.status == 1){
|
|
|
+ this.$util.msg('商品已丢失,不能查看',2000)
|
|
|
+ return
|
|
|
+ }else if(failure.status == 2){
|
|
|
+ this.$util.msg('商品已停售,不能查看',2000)
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ this.isModallayer = true;
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?id=${failure.productId}`)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ failureStateText(state){
|
|
|
+ let stateText = '',
|
|
|
+ stateTextObject={
|
|
|
+ 1:'商品已丢失',
|
|
|
+ 2:'商品已停售',
|
|
|
+ 3:'商品已下架',
|
|
|
+ 4:'商品已售罄',
|
|
|
+ 5:'价格仅会员可见，您不能购买',
|
|
|
+ 6:'未公开价格',
|
|
|
+ 7:'库存不足'
|
|
|
+ }
|
|
|
+ Object.keys(stateTextObject).forEach(key => {
|
|
|
+ if(key == state){
|
|
|
+ stateText = stateTextObject[key]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return stateText;
|
|
|
+ },
|
|
|
+ setHeaderBtnPosi(){
|
|
|
+ // 获得胶囊按钮位置信息
|
|
|
+ let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
|
|
|
+ return headerBtnPosi
|
|
|
+ },
|
|
|
+ setSysteminfo(){
|
|
|
+ let systeminfo;
|
|
|
+ uni.getSystemInfo({ // 获取设备信息
|
|
|
+ success: (res) => {
|
|
|
+ systeminfo = res
|
|
|
+ },
|
|
|
+ })
|
|
|
+ return systeminfo
|
|
|
+ },
|
|
|
+ PromotionsFormat(promo){//促销活动类型数据处理
|
|
|
+ if(promo!=null){
|
|
|
+ if(promo.type == 1 && promo.mode == 1){
|
|
|
+ return true
|
|
|
+ }else{
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{//深度监听所有数据，每次改变重新计算总价和总数
|
|
|
+ goodsList:{
|
|
|
+ deep:true,
|
|
|
+ handler(val,oldval){
|
|
|
+ this.totalPeice()
|
|
|
+ this.totalCount()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {//下拉刷新
|
|
|
+ this.initGetCartGoodsList()
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ },
|
|
|
+ onShow(){
|
|
|
+ // if(this.hasLogin){
|
|
|
+ // this.initData()
|
|
|
+ // }else{
|
|
|
+ // this.initLogin()
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page{
|
|
|
+ background: #f7f7f7;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .cart-content{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .container-cart-main.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .container-cart-main.show{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .cart-content.empty.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .cart-content.empty.show{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .container-cart.show{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .container-cart.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .empty-container.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .empty-container.show{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .foot-check-delbtn{
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 15rpx 24rpx;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ z-index: 990;
|
|
|
+ .foot-text{
|
|
|
+ font-size: $font-size-26;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ color:#666666;
|
|
|
+ float: left;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ text{
|
|
|
+ margin: 0 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .delBtn{
|
|
|
+ width: 100rpx;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ background:#FFFFFF;
|
|
|
+ border: 1px solid #ff457b;
|
|
|
+ color: #ff457b;
|
|
|
+ float: right;
|
|
|
+ text-align: center;
|
|
|
+ &.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .checkbox-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .checkbox{
|
|
|
+ display: flex;
|
|
|
+ margin: 0;
|
|
|
+ padding: 5rpx;
|
|
|
+ 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:#999999;
|
|
|
+ &.icon-xuanze{
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.disabled{
|
|
|
+ .checkbox{
|
|
|
+ color:#999999
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-list{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ .goods-item{
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ .shoptitle{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ .checkbox-box{
|
|
|
+ padding: 10rpx;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ width: 450rpx;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: left;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-pros{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .goods-pros-t{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 210rpx;
|
|
|
+ padding:0 0 26rpx 0;
|
|
|
+ .checkbox-box{
|
|
|
+ padding: 10rpx;
|
|
|
+ }
|
|
|
+ .pros-img{
|
|
|
+ width: 210rpx;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin:0 20rpx;
|
|
|
+ border:1px solid #f3f3f3;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-pros-b{
|
|
|
+ width:100%;
|
|
|
+ height: auto;
|
|
|
+ padding:0 0 24rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.show{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ &.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .sum-none{
|
|
|
+ width: 100%;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ color: $text-color;
|
|
|
+ float: left;
|
|
|
+ text-align: right;
|
|
|
+ .money{
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #999999;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ .money-sign{
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #999999;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ .money-reduced{
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: $color-system;
|
|
|
+ .iconfont{
|
|
|
+ font-size: $font-size-34;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sum{
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: $text-color;
|
|
|
+ float: left;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ font-weight: bold;
|
|
|
+ .money{
|
|
|
+ color: $color-system;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ }
|
|
|
+ .money-sign{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pros-product{
|
|
|
+ width: 416rpx;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 36rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ position: relative;
|
|
|
+ .producttitle{
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ height: auto;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+ .no-text{
|
|
|
+ display: inline-block;
|
|
|
+ height:36rpx;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ background:linear-gradient(315deg,rgba(231,0,0,1) 0%,rgba(255,104,1,1) 100%);
|
|
|
+ border-radius:18rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size:$font-size-28;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .productspec{
|
|
|
+ height: 36rpx;
|
|
|
+ color: #999999;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ }
|
|
|
+ .productprice{
|
|
|
+ width: 100%;
|
|
|
+ height: 48rpx;
|
|
|
+ margin: 30rpx 0 0 0;
|
|
|
+ .price{
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ width: 48%;
|
|
|
+ color: $color-system;
|
|
|
+ float: left;
|
|
|
+ font-weight: bold;
|
|
|
+ &.disabled{
|
|
|
+ color: #999999;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ .money-sign{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .count{
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ position: relative;
|
|
|
+ &.show{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ &.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .count-tips{
|
|
|
+ width: auto;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ top:-60rpx;
|
|
|
+ left: -5rpx;
|
|
|
+ z-index: 5;
|
|
|
+ &.step{
|
|
|
+ left:-217rpx
|
|
|
+ }
|
|
|
+ &::before{
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: -30rpx;
|
|
|
+ right: 15rpx;
|
|
|
+ z-index:1;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-width: 18rpx;
|
|
|
+ border-style: solid;
|
|
|
+ border-color:$color-system transparent transparent transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .number-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 2rpx solid #e1e1e1;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .iconfont {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ padding: 0 14rpx;
|
|
|
+ color: #666666;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ background: #ffffff;
|
|
|
+ &.icon-jianhao {
|
|
|
+ border-radius: 30rpx 0 0 30rpx;
|
|
|
+ }
|
|
|
+ &.icon-jiahao {
|
|
|
+ border-radius: 0 30rpx 30rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-input {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #333333;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .uni-numbox{
|
|
|
+ position: absolute;
|
|
|
+ left: 45rpx;
|
|
|
+ bottom: 0;
|
|
|
+ .uni-numbox-minus, .uni-numbox-plus{
|
|
|
+ width: 50rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ .uni-numbox-value {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ width: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .floor-item-act{
|
|
|
+ width: 100%;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ float: left;
|
|
|
+ .tag{
|
|
|
+ display: inline-block;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png)top center no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ font-size: 22rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #f83c6c;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .failure-list{
|
|
|
+ width: 702rpx;
|
|
|
+ height: auto;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ .failure-title{
|
|
|
+ width: 100%;
|
|
|
+ height: 82rpx;
|
|
|
+ line-height: 82rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ border-bottom: 1px solid #EBEBEB;
|
|
|
+ .title-txt{
|
|
|
+ float: left;
|
|
|
+ color:#666666;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .title-btn{
|
|
|
+ float: right;
|
|
|
+ color: $color-system;
|
|
|
+ text-align: right;
|
|
|
+ line-height: 80rpx;
|
|
|
+ .butto{
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ background:#fff8fd;
|
|
|
+ border: 1px solid #ff457b;
|
|
|
+ color: #ff457b;
|
|
|
+ margin-top: 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .productlist{
|
|
|
+ padding-top: 10rpx;
|
|
|
+ .goods-pros{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ }
|
|
|
+ .goods-pros-t{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 210rpx;
|
|
|
+ position: relative;
|
|
|
+ .img-tip{
|
|
|
+ display: block;
|
|
|
+ width: 72rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ background:rgba(51,51,51,0.3);
|
|
|
+ // position: absolute;
|
|
|
+ // left: 0;
|
|
|
+ // top: 0;
|
|
|
+ }
|
|
|
+ .checkbox-box{
|
|
|
+ padding: 10rpx;
|
|
|
+ }
|
|
|
+ .pros-img{
|
|
|
+ width: 180rpx;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin:0 20rpx;
|
|
|
+ border:1px solid #f3f3f3;
|
|
|
+ position: relative;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pros-marks{
|
|
|
+ width: 730rpx; height: 250rpx;
|
|
|
+ z-index: 90;
|
|
|
+ background: rgba(0,0,0,.05);
|
|
|
+ position: absolute;
|
|
|
+ left:-20rpx;
|
|
|
+ top: -20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-pros-b{
|
|
|
+ width:622rpx;
|
|
|
+ margin-left: 84rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ padding:0 0 26rpx 0;
|
|
|
+ // border-top: 1px solid #EBEBEB;
|
|
|
+ &.show{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ &.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .sum{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: $text-color;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .money{
|
|
|
+ color: #FF2A2A;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ }
|
|
|
+ .money-sign{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #FF2A2A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pros-product{
|
|
|
+ width: 402rpx;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 36rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ position: relative;
|
|
|
+ .producttitle{
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ height: auto;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ .no-text{
|
|
|
+ display: inline-block;
|
|
|
+ height:36rpx;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ background:linear-gradient(315deg,rgba(231,0,0,1) 0%,rgba(255,104,1,1) 100%);
|
|
|
+ border-radius:18rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .productspec{
|
|
|
+ height: 36rpx;
|
|
|
+ color: #999999;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .productstate{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ height: 44rpx;
|
|
|
+ color: #FF2A2A;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer{
|
|
|
+ width: 100%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ height: 100rpx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0rpx;
|
|
|
+ z-index: 100;
|
|
|
+ .footer-le{
|
|
|
+ width: 520rpx;
|
|
|
+ height: 100%;
|
|
|
+ padding:10rpx 24rpx;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .foot-check{
|
|
|
+ width: 100rpx;
|
|
|
+ float: left;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ .checkbox{
|
|
|
+ width: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ width: 60rpx;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sum{
|
|
|
+ width: 360rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding:0 10rpx;
|
|
|
+ .sum-none{
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: $text-color;
|
|
|
+ float: left;
|
|
|
+ text-align: right;
|
|
|
+ .money{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #999999;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ .money-sign{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #999999;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ .money-reduced{
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sum-price{
|
|
|
+ text-align: right;
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ color: $text-color;
|
|
|
+ float: left;
|
|
|
+ font-weight: normal;
|
|
|
+ &.none{
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ .money{
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ .money-sign{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer-ri{
|
|
|
+ width: 230rpx;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 999;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 13rpx 15rpx;
|
|
|
+ &.none{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 100%;
|
|
|
+ background:$btn-confirm;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 80rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer-del{
|
|
|
+ width: 420rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ position: absolute;
|
|
|
+ padding-left: 200rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ display: flex;
|
|
|
+ &.show{
|
|
|
+ animation: showDelbtn 0s linear both;
|
|
|
+ }
|
|
|
+ &.none{
|
|
|
+ animation: hideDelbtn 0s linear both;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 8rpx;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ }
|
|
|
+ .btn.btn-cancel{
|
|
|
+ background:#f7f7f7;
|
|
|
+ color: #B2B2B2;
|
|
|
+ }
|
|
|
+ .btn.btn-confirm{
|
|
|
+ background:$btn-confirm;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ @keyframes showDelbtn {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateX(-100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes hideDelbtn {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(-100%);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
