add shopping cart for tid1878

src/pages.json

@@ -1017,6 +1017,13 @@
 					"style" : {
 						"navigationBarTitleText": "商品分类" 
 					}
+				},
+				{
+					"path": "pages/shopping_cart",
+					"style" : {
+						"navigationBarTitleText": "购物车",
+						"enablePullDownRefresh": true
+					}
 				}
 			]
 		}

src/subpackage/mall/components/index_search_bar.vue

@@ -5,7 +5,7 @@
             <input class="if-ipt" />
             <view class="if-btn">搜索</view>
         </view>
-        <view class="isb-box" v-if="shoppingCart" @click="toShoppingCart">
+        <view class="isb-box" v-if="shoppingCart" @click="$emit('click:scart')">
             <image class="ib-icon" src="/subpackage/mall/static/images/shopping_cart_333.png"></image>
             <view class="ib-num" v-if="cartNUmShow > 0">{{ cartNUmShow }}</view>
         </view>
@@ -29,7 +29,8 @@ export default {
 			let { cartNum } = this;
 			if(!isNaN(cartNum))return cartNum > 99 ? 99 : cartNum;
 			return 0;
-		}
+		},
+		
 	}
 }
 </script>

src/subpackage/mall/components/specification_modal.vue

@@ -233,10 +233,7 @@ export default {
             })
             .catch(err => {
                 hideLoad();
-                showModal({
-                    title: '提示',
-                    content: err.message || '操作失败！'
-                })
+                showModal({ content: err.message || '操作失败！' });
                 console.warn('subpackage mall components specification goodsCartAdd err --->', err);
             })
 		},

src/subpackage/mall/js/api.js

@@ -10,6 +10,9 @@ export const MALL_API = {
     goodsComment:`${ORIGIN}/shop2/goodsComment`,  //商品评价列表
     goodsList:`${ORIGIN}/shop2/goodsList`, //商品列表
     goodsCateList:`${ORIGIN}/shop2/goodsCateList`, // 商品分类列表
+    goodsCartNumsEdit:`${ORIGIN}/shop2/goodsCartNumsEdit`,  //购物车 - 修改数量
+    goodsCartDel:`${ORIGIN}/shop2/goodsCartDel`, //购物车 - 删除商品
+    goodsCartSettlement:`${ORIGIN}/shop2/goodsCartSettlement`, //购物车 - 去结算
 }
 
 export default { ORIGIN, MALL_API };

src/subpackage/mall/js/handle.js

@@ -1,5 +1,6 @@
 import { MALL_API } from "./api";
 import server from "./server";
+import { accAdd, accMul } from "@/utils/calculate.js";
 
 // 购物车商品列表
 export function goodsCartList(brand_id){
@@ -16,10 +17,27 @@ export function goodsCartList(brand_id){
             return ({
                 totalList: _ls,
                 validList: _ls.filter(item => item.product_invalid === 0),
-                invalidList: _ls.filter(item => item.product_invalid === 0),
+                invalidList: _ls.filter(item => item.product_invalid === 1),
             });
         }else{
             return Promise.reject(_data);
         }
     })
 }
+
+// 获取商品列表价格信息
+export function getPayInfoForGoodsList(array){
+    if(!array.length)return ({ num: 0, str: '0.00' });
+    let _priceNum = array.reduce((total, item) => {
+        let _unitPrice = 0;
+        if(item?.product_spec_multi === 0)_unitPrice = item?.product_spec_single_info?.price ?? 0;
+        if(item?.product_spec_multi === 1)_unitPrice = item?.product_spec_multi_info?.price ?? 0;
+        let _price = accMul((item?.product_nums ?? 0), _unitPrice);
+        return accAdd(total, _price);
+    }, 0);
+    return ({
+        num: _priceNum,
+        // 需要支付的类目，四舍五入违法
+        str: _priceNum.toFixed(3).slice(0, -1),
+    })
+}

src/subpackage/mall/pages/classify.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="mall-classify">
 		<view class="mc-search-bar">
-			<index-search-bar shopping-cart :cart-num="goodsCartNum"></index-search-bar>
+			<index-search-bar shopping-cart :cart-num="goodsCartNum" @click:scart="toShoppingCart"></index-search-bar>
 		</view>
 		<view class="mc-section">
 			<scroll-view class="ms-classify" :style="scrollStyle" scroll-y>
@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import { routeTo, showLoad, hideLoad, showModal, getNodeMes } from "@/utils/util.js";
+import { routeTo, showLoad, hideLoad, showModal, getNodeMes, debounce } from "@/utils/util.js";
 import { MALL_API } from "../js/api";
 import server from "../js/server";
 import { goodsCartList } from "../js/handle";
@@ -107,27 +107,31 @@ export default {
 		this.getCartList(brand_id);
 	},
 	methods: {
+		toShoppingCart(){
+			let { brand_id } = this;
+			routeTo(`/subpackage/mall/pages/shopping_cart?brand_id=${brand_id}`,'nT')
+		},
 		async setScrollHeight() {
 			let searchBar = await getNodeMes('.mc-search-bar');
 			let sysInfo = uni.getWindowInfo();
 			this.scrollHeight = (sysInfo.windowHeight - searchBar.height) || 658; // 658 为ipx的高度
 		},
 		// 商品分类列表
-		tabChange(e,i) {
+		tabChange: debounce(function (e,i) {
 			let { brand_id } = this;
 			this.isSort = true
 			this.curTab = i;
 			this.cateId = e.id
 			this.getGoodsList({ brand_id, cateid: e.id });
-		},
+		}, 300, true),
 		// 猜你喜欢
-		likeChange(){
+		likeChange: debounce(function (){
 			let { brand_id } = this;
 			this.curTab = -1;
 			this.getGoodsList({ brand_id, recommend: 1 });
-		},
+		}, 300, true),
 		// 综合 销量 价格 
-		tabItemChange(e) {
+		tabItemChange: debounce(function (e) {
 			let { brand_id } = this;
 			this.curItemTab = e.id;
 			this.isSort = !this.isSort;
@@ -145,7 +149,7 @@ export default {
 			    });
 			})
 			
-		},
+		}, 300, true),
 		goodsItemChange(id) {
 			let { brand_id } = this;
 			routeTo(`/subpackage/mall/pages/goods_info?id=${id}&brand_id=${brand_id}`,'nT')

src/subpackage/mall/pages/shopping_cart.vue

@@ -0,0 +1,739 @@
+<template>
+	<view class="shopping-cart">
+		<!-- 有效商品 -->
+		<view class="sc-line">
+			<view @click="isDelete = !isDelete">{{isDelete?'完成':'删除'}}</view>
+			<view @click="toCouponsCenter">领券</view>
+		</view>
+		<view class="sc-list" v-if="usefulList.length > 0">
+			<view class="sl-item" v-for="(e, i) in usefulList" :key="i" @click="toGoodsDetails(e)">
+				<view class="si-icon" @click.stop="onGoodsCheck(e)">
+					<image
+						:class="{iconChange: idsForProductList.includes(e.id)}"
+						:src="idsForProductList.includes(e.id)?'/subpackage/mall/static/images/selected2.png':''"
+					></image>
+				</view>
+				<view class="si-img">
+					<image mode="aspectFill" :src="e.product_imgs||''"></image>
+				</view>
+				<view class="si-info">
+					<view class="sii-name">{{e.product_name || '-'}}</view>
+					<view class="sii-desc" v-if="e.product_spec_multi == 1">{{e.product_spec_multi_str.replace(/_/g,'；') || '-'}}</view>
+					<view class="sii-line">
+						<view class="sil-price">
+							<text>¥</text>
+							<block v-if="e.product_spec_multi == 0">
+								<text>{{e.product_spec_single_info.price || 0}}</text>
+								<text v-if="e.product_spec_single_info.price_show != 0">¥{{e.product_spec_single_info.price_show || 0}}</text>
+							</block>
+							<block v-if="e.product_spec_multi == 1">
+								<text>{{e.product_spec_multi_info.price || 0}}</text>
+							</block>
+						</view>
+						<view class="sil-ctrl">
+							<view @click.stop="buyNumOperate(e, -1)"><text>-</text></view>
+							<view><input type="number" :value="e.product_nums" @change="inputChange($event, e)"/></view>
+							<view @click.stop="buyNumOperate(e, +1)"><text>+</text></view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="no-list" v-if="usefulList.length == 0">购物车空空如也~</view>
+		<!-- 失效商品 -->
+		<view class="sc-useless" v-if="uselessList.length > 0">
+			<view>失效商品({{ uselessList.length }})</view>
+			<view @click="showTipsModal(1)">清空失效商品</view>
+		</view>
+		<view class="sc-list" v-if="uselessList.length > 0">
+			<view class="sl-item " v-for="(e, i) in uselessList" :key="i">
+				<view class="si-icon">
+					<image class="iconChange si-gray" src="/subpackage/mall/static/images/useless.png"></image>
+				</view>
+				<view class="si-img si-gray">
+					<image mode="aspectFill" :src="e.product_imgs||''"></image>
+					<view>失效</view>
+				</view>
+				<view class="si-info si-gray">
+					<view class="sii-name">{{e.product_name || '-'}}</view>
+					<view class="sii-desc" v-if="e.product_spec_multi == 1">{{e.product_spec_multi_str || '-'}}</view>
+					<view class="sii-line">
+						<view class="sil-price">
+							<text>¥</text>
+							<block v-if="e.product_spec_multi == 0">
+								<text>{{e.product_spec_single_info.price || 0}}</text>
+								<text v-if="e.product_spec_single_info.price_show != 0">¥{{e.product_spec_single_info.price_show || 0}}</text>
+							</block>
+							<block v-if="e.product_spec_multi == 1">
+								<text>{{e.product_spec_multi_info.price || 0}}</text>
+							</block>
+						</view>
+					</view>
+				</view>
+				<view class="si-btn" @click="toGoodsDetails(e)">重新选择</view>
+			</view>
+		</view>
+		<!-- ️猜你喜欢 -->
+		<view class="sc-tit">
+			<view><view></view></view>
+			<view>❤️猜你喜欢</view>
+			<view><view></view></view>
+		</view>
+		<view class="sc-goods-list">
+		    <view class="sgl-item" v-for="(e, i) in likeGoodsList" :key="i">
+                <goods-item
+                    :poster="(e.product_imgs&&e.product_imgs[0]) || ''"
+                    :name="e.product_name"
+                    :price="e.product_price"
+                    :product-id="e.id"
+                    :brand-id="brand_id"
+                    :is-del-price="e.product_spec_multi === 0&&e.product_price_show != 0"
+                    :del-price="e.product_price_show || 0"
+                    @click:add="addCartChange(e)"
+                ></goods-item>
+		    </view>
+		</view>
+		<!-- 底部按钮 -->
+		<view class="sc-end">
+			<view class="se-all" @click="onAllCheck">
+				<image 
+					class="sa-icon" 
+					:class="{iconChange: isAllSelected}" 
+					:src="isAllSelected?'/subpackage/mall/static/images/selected2.png':''"
+					></image>
+				<view class="sa-txt">全选</view>
+			</view>
+			<view class="se-section">
+				<view class="ss-info" v-if="!isDelete">
+					<view class="si-price">
+						<text>{{ payAmount.num > 0 ? '不含运费':''}}</text>
+						<text>总计:</text>
+						<text>¥{{ payAmount.str }}</text>
+					</view>
+                    
+				</view>
+				<view 
+					:class="[isDelete?'ss-del':'ss-pay']" 
+					hover-class="hover-active" 
+					@click="isDelete?showTipsModal(0):toPay()"
+				>{{isDelete?'删除':'结算'}}({{ productList.length ||0 }})</view>
+			</view>
+		</view>
+		<!-- 分类 -->
+        <spacification-modal ref="spacificationModal" button-txt="加入购物车"></spacification-modal>
+	</view>
+</template>
+<script>
+    import { routeTo, showLoad, hideLoad, showModal, debounce, jsonStr, checkBothArrIsEqual, showNone } from "@/utils/util.js";
+    import { MALL_API } from "../js/api";
+    import server from "../js/server";
+    import { goodsCartList, getPayInfoForGoodsList } from "../js/handle";
+    import spacificationModal from "../components/specification_modal.vue";
+    import goodsItem from "../components/goods_item.vue";
+	export default {
+		components: { spacificationModal, goodsItem },
+        computed: {
+            idsForProductList(){
+                let { productList } = this;
+                return productList.map(item => item.id);
+            },
+            payAmount(){
+                let { productList } = this;
+                return getPayInfoForGoodsList(productList);
+            },
+            isAllSelected(){
+                let { productList, usefulList } = this;
+                if(usefulList?.length <= 0 || productList?.length <= 0)return false;
+                let _pIds = productList.map(item => item.id);
+                let _uIds = usefulList.map(item => item.id);
+                return checkBothArrIsEqual(_pIds, _uIds);
+            }
+        },
+        watch: {
+            // 解决只更新 usefulList 里层数据时， payAmount 结果不更新问题，
+            // 可能是大指针productList没改的问题
+            usefulList: {
+                handler(newVal, oldVal) {
+                    let { productList } = this;
+                    let _pIds = productList.map(item => item.id);
+                    this.productList = newVal.filter(item => _pIds.includes(item.id));
+                },
+                deep: true,
+                immediate: true,
+            }
+        },
+		data() {
+			return {
+                brand_id: '',
+				likeGoodsList: [], //猜你喜欢列表
+				isDelete: false,
+				usefulList: [],  //购物车-有效商品列表
+				uselessList: [], //购物车-失效商品列表
+				productList: [], //选中的商品列表
+			}
+		},
+		async onLoad(options) {
+            let _bid = options?.brand_id ?? '';
+            await this.getCartList(_bid, true);
+			this.getLikeList({ brand_id: _bid });
+            this.brand_id = _bid;
+		},
+		onShow() {
+            let { brand_id } = this;
+			if(brand_id)this.getCartList(brand_id);
+		},
+		// 下拉刷新
+		onPullDownRefresh() {
+            let { brand_id } = this;
+			this.getCartList(brand_id);
+		},
+		methods: {
+			toCouponsCenter(){
+				// routeTo(`../coupons/coupons_center/coupons_center`,'nT')
+			},
+            // 猜你喜欢 商品列表  pm：猜你喜欢分类，recommend固定为1，分类ID传空; 其他分类又分 综合 销量 价格
+			getLikeList({ brand_id, page = 1, page_size = 20}){
+				showLoad();
+                return server.post({
+                    url: MALL_API.goodsList,
+                    data: { brand_id, page, page_size, recommend: 1 },
+                    isDefaultGet: false,
+                })
+                .then(res => {
+                    hideLoad();
+                    let _data = res?.data || {};
+                    if(_data.code === 0){
+                        return this.likeGoodsList = _data?.data?.list ?? [];
+                    }else{
+                        return Promise.reject(_data);
+                    }
+                })
+                .catch(err => {
+                    hideLoad();
+                    showModal({ content: err.message || '加载商品列表失败！' });
+                    console.warn('subpackage mall pages shopping cart getLikeList err --->', err);
+                })
+			},
+			// 购物车-商品列表
+			async getCartList(brand_id, isLoading = false) {
+                try{
+                    if(isLoading)showLoad();  
+                    let { validList, invalidList } = await goodsCartList(brand_id);
+                    if(isLoading)hideLoad(); 
+                    uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
+                    this.usefulList = validList ?? [];   //正常列表
+                    this.uselessList = invalidList ?? [];  //失效列表
+                }catch(err){
+                    if(isLoading)hideLoad(); 
+                    console.warn('subpackage mall pages shopping cart getCartList err --->', err);
+                }
+			},
+            //购物车-修改数量
+			getCartNumsEdit({ brand_id, nums, id}) {
+                showLoad();
+                return server.post({
+                    url: MALL_API.goodsCartNumsEdit,
+                    data: { brand_id, id, nums },
+                    isDefaultGet: false,
+                })
+                .then(res => {
+                    hideLoad();
+                    let _data = res?.data || {};
+                    if(_data.code === 0){
+                        this.getCartList(brand_id, true);
+                    }else{
+                        return Promise.reject(_data);
+                    }
+                })
+                .catch(err => {
+                    hideLoad();
+                    showModal({ content: err.message || '操作失败！' });
+                    console.warn('subpackage mall page shopping getCartNumsEdit err --->', err);
+                })
+			},
+            // 删除/清空失效
+			showTipsModal(type){
+                if(this.productList.length == 0&&type == 0) return showNone("请选择要删除的商品");
+				showModal({
+				    title: type == 0?'删除':'清空失败商品',
+				    content: type == 0?'确定要删除选中的商品？':'确定要清空失效的商品？',
+				    showCancel: true,
+				    success: modalRes=>{
+				        if(modalRes.confirm){
+                            let { brand_id, productList, uselessList } = this;
+							let ids= [];
+							if(type == 0) ids = productList.map(item => item.id);
+							if(type == 1) ids = uselessList.map(item => item.id);
+							this.getCartDel({ brand_id, del_ids: ids });
+						}
+				    }
+				})
+			},
+            // 购物车-删除商品
+			getCartDel({brand_id, del_ids}) {
+                showLoad();
+                return server.post({
+                    url: MALL_API.goodsCartDel,
+                    data: { brand_id, del_ids },
+                    isDefaultGet: false,
+                })
+                .then(res => {
+                    hideLoad();
+                    let _data = res?.data || {};
+                    if(_data.code === 0){
+                        showNone('操作成功！');
+                        this.getCartList(brand_id);
+                        this.productList = [];
+                        setTimeout(_=>this.getCartList(brand_id, true), 1000);
+                    }else{
+                        return Promise.reject(_data);
+                    }
+                })
+                .catch(err => {
+                    hideLoad();
+                    showModal({ content: err.message || '操作失败！' });
+                    console.warn('subpackage mall page shopping cart goodsCartDel err --->', err);
+                })
+			},
+			async toPay(){
+                let { productList, brand_id } = this;
+				if(productList?.length <= 0) return showNone("请先选择要购买的商品~");
+                let pIds = productList.map(e=>e.id);
+				let gcsRes = await this.toCartSettlement({ brand_id, product_ids: pIds });
+                if(gcsRes?.list?.length > 0&&gcsRes.total){
+                    let _ls = gcsRes?.list ?? [];
+                    let _payInfo = getPayInfoForGoodsList(_ls);
+                    let _query = {
+                        goodsList: productList,
+                        price_amount: _payInfo.num,
+                        product_ids: pIds,
+                        go_buy: 0
+                    }
+                    console.log('购物车去结算 _query: ', _query);
+                }
+                console.log('购物车去结算 gcsRes: ', gcsRes);
+			},
+            // 购物车-去结算
+			toCartSettlement({ brand_id, product_ids }) {
+                showLoad();
+                return server.post({
+                    url: MALL_API.goodsCartSettlement,
+                    data: { brand_id, product_ids },
+                    isDefaultGet: false,
+                })
+                .then(res => {
+                    hideLoad();
+                    let _data = res?.data || {};
+                    if(_data.code === 0){
+                        let _ls = _data?.list || []; 
+                        return _data?.data ?? {};
+                    }else{
+                        return Promise.reject(_data);
+                    }
+                })
+                .catch(err => {
+                    hideLoad();
+                    showModal({ content: err.message || '操作失败！' });
+                    console.warn('subpackage mall page shopping cart toCartSettlement err --->', err);
+                })
+			},
+			toGoodsDetails(item){
+                routeTo(`/subpackage/mall/pages/goods_info?id=${item.product_id}&brand_id=${item.brand_id}`,'nT')
+			},
+            // 商品选中
+			onGoodsCheck(e){
+                let { productList } = this;
+                let _pIds = productList.map(item=>item.id);
+				if(_pIds.includes(e.id)){
+                    let _ls = productList.filter(item=>item.id !== e.id);
+					this.productList = _ls; 
+				}else{
+                    let _ls = productList.concat(e);
+					this.productList = _ls;
+				}
+			},
+            // 全选按钮
+            onAllCheck(){
+                let { isAllSelected, usefulList } = this;
+				if(usefulList.length <= 0)return showNone("购物车还未有商品~"); 
+				if(isAllSelected)return this.productList = [];
+                this.productList = usefulList;
+			},
+            // 修改商品数量 - 递增/减
+			buyNumOperate: debounce(function(e, val){
+                let _num = e.product_nums + val;
+                if(val < 0 && _num <=0)return showNone("不能再减啦~");    
+                this.getCartNumsEdit({
+                    id: e?.id ?? '',
+                    brand_id: e?.brand_id ?? '',
+                    nums: _num,
+                })
+			}, 300, true),
+            // 修改商品数量 - 输入
+			inputChange(e, item) {
+                let _num = +(e?.detail?.value || 0);
+                if(item.product_nums === _num)return;
+                if(isNaN(_num) || _num < 1)return showNone("请输入正确值~");
+                this.getCartNumsEdit({
+                    id: item?.id ?? '',
+                    brand_id: item?.brand_id ?? '',
+                    nums: _num,
+                })
+			},
+			// 加入购物车
+			addCartChange: debounce(async function(e){
+                let { brand_id } = this;
+                // 如果商品是多个规格属性的，则出现弹窗给用户选择规格加入购物车，如果是单规格的则直接加入购物车
+                // 根据product_spec_multi字段做判断 等于1则是多规格
+                if(e.product_spec_multi == 1){
+                    return this.$refs.spacificationModal.alert({
+                        id: e?.id ?? '',
+                        brand_id: brand_id,
+                        poster: e?.product_imgs?.[0] ?? '',
+                        name: e?.product_name ?? '',
+                        price: e?.product_price ?? '',
+                        specArr: e?.product_spec ?? [],
+                        addCartComplete:  _=> this.getCartList(brand_id, true),
+                    });
+                }
+                await this.$refs?.spacificationModal?.goodsCartAdd({ brand_id, id: e?.id, });
+                setTimeout(_=>this.getCartList(brand_id, true), 1000);
+			}, 300, true),
+		}
+	}
+</script>
+<style lang="scss">
+.shopping-cart{
+	position: relative;
+    @include isPd(140upx);
+	.sc-line{
+		padding: 20rpx 32rpx;
+		@include ctf(space-between);
+		>view{
+			&:first-child{
+				color: #333;
+				font-size: 28rpx;
+			}
+			&:nth-child(2){
+				color: #FF873D;
+				font-size: 28rpx;
+			}
+		}
+	}
+	.sc-useless{
+		padding:  0rpx 32rpx 20rpx;
+		@include ctf(space-between);
+		>view{
+			&:first-child{
+				color: #333;
+				font-size: 28rpx;
+			}
+			&:nth-child(2){
+				color: $mColor;
+				font-size: 28rpx;
+			}
+		}
+	}
+	.sc-list{
+		margin: 0 12rpx 40rpx;
+		padding: 40rpx 26rpx 0rpx 0rpx;
+		background-color: #fff;
+		border-radius: 10rpx;
+		.sl-item{
+			position: relative;
+			padding-bottom: 40rpx;
+			background: #fff;
+			@include ctf(flex-start);
+			.si-icon{
+				flex-shrink: 0;
+				padding: 20rpx;
+				>image{
+					width: 29rpx;
+					height: 29rpx;
+					border-radius: 50%;
+					border: 2rpx solid #d8d8d8;
+				}
+				.iconChange{
+					width: 32rpx;
+					height: 32rpx;
+					border: 0rpx solid #fff;
+				}
+			}
+			.si-img{
+				position: relative;
+				flex-shrink: 0;
+				flex-grow: 0;
+				width: 180rpx;
+				height: 180rpx;
+				@include ctf(center);
+				>image{
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 180rpx;
+					height: 180rpx;
+					border-radius: 8rpx;
+					// background-color: skyblue;
+				}
+				>view{
+					z-index: 1;
+					width: 80rpx;
+					height: 80rpx;
+					border-radius: 50%;
+					background: rgba($color: #000000, $alpha: 0.5);
+					color: #fff;
+					font-size: 28rpx;
+					text-align: center;
+					line-height: 80rpx;
+				}
+			}
+			.si-info{
+				margin-left: 20rpx;
+				flex-grow: 1;
+				min-height: 180rpx;
+				position: relative;
+				.sii-name{
+					color: #333;
+					font-size: 28rpx;
+					max-width: 404rpx;
+					@include tHide(2);
+				}
+				.sii-desc{
+					margin-top: 12rpx;
+					color: #9A9A9D;
+					font-size: 24rpx;
+					max-width: 404rpx;
+				}
+				.sii-line{
+					position: absolute;
+					bottom: 0rpx;
+					// margin-top: 14rpx;
+					width: 100%;
+					@include ctf(space-between);
+					.sil-price{
+						>text{
+							color: #FF873D;
+							&:first-child{	
+								font-size: 28rpx;
+							}
+							&:nth-child(2){
+								font-size: 36rpx;
+								font-weight: 600;
+							}
+							&:nth-child(3){
+								font-size: 24rpx;
+								color: #9A9A9D;
+								margin-left: 32rpx;
+								text-decoration: line-through;
+							}
+						}
+					}
+					.sil-ctrl{
+						@include ctf(center);
+						>view{
+							color: #9A9A9D;
+							// background-color: #F2F2F7;
+							height: 40rpx;
+							&:nth-child(1){
+								@include ctf(center);
+								width: 44rpx;
+								font-size: 40rpx;
+								border-radius: 10rpx 0rpx 0rpx 10rpx;
+								border: 2rpx solid #D8D8D8;
+								text{
+									margin-top: -12rpx;
+								}
+							}
+							&:nth-child(3){
+								@include ctf(center);
+								width: 44rpx;
+								font-size: 40rpx;
+								border-radius: 0rpx 10rpx 10rpx 0rpx;
+								border: 2rpx solid #D8D8D8;
+								text{
+								   margin-top: -4rpx;
+								}
+							}
+							&:nth-child(2){
+								padding: 0 10rpx;
+								width: 76rpx;
+								border-top: 2rpx solid #D8D8D8;
+								border-bottom: 2rpx solid #D8D8D8;
+								@include ctf(center);
+								>input{
+									flex-grow: 1;
+									height: 100%;
+									text-align: center;
+									font-size: 28rpx;
+									color: #333;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+		.si-gray{
+			opacity: 0.6;
+		}
+		.si-btn{
+			z-index: 1;
+			position: absolute;
+			bottom: 40rpx;
+			right: 16rpx;
+			padding: 6rpx 14rpx;
+			color: $mColor;
+			font-size: 20rpx;
+			border: 2rpx solid $mColor;
+			border-radius: 20rpx;
+		}
+	}
+	.no-list{
+		padding: 100rpx 0rpx 200rpx;
+		width: 100%;
+		text-align: center;
+		color: #333;
+		font-size: 28rpx;
+	}
+	.sc-tit{
+		margin-bottom: 40rpx;
+		@include ctf(center);
+		>view{
+			&:first-child{
+				position: relative;
+				width: 60rpx;
+				height: 2rpx;
+				background-color: #D8D8D8;
+				>view{
+					position: absolute;
+					top: -3rpx;
+					right: 0;
+					width: 8rpx;
+					height: 8rpx;
+					border-radius: 8rpx;
+					background-color: #D8D8D8;
+				}
+			 
+			}
+			&:nth-child(2){
+				color: #333;
+				font-size: 28rpx;
+				margin: 0 26rpx;
+				font-weight: 700;
+			}
+			&:nth-child(3){
+				position: relative;
+				width: 60rpx;
+				height: 2rpx;
+				background-color: #D8D8D8;
+				>view{
+					position: absolute;
+					top: -3rpx;
+					left: 0;
+					width: 8rpx;
+					height: 8rpx;
+					border-radius: 8rpx;
+					background-color: #D8D8D8;
+				}
+			}
+		}
+	}
+	.sc-goods-list{
+		padding: 0 24rpx;
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		.sgl-item{
+			flex-shrink: 0;
+			margin-bottom: 24rpx;
+		}
+	}
+	.sc-end{
+		position: fixed;
+		bottom: 0;
+		padding: 20rpx 0; 
+		padding-bottom: calc(20rpx );
+		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+		width: 100%;
+		background-color: #fff;
+		z-index: 9;
+		border-top: 2rpx solid #f2f2f7;
+		@include ctf(space-between);
+		.se-all{
+			margin-left: 24rpx;
+			@include ctf(flex-start);
+			.sa-icon{
+				flex-shrink: 0;
+				flex-grow: 0;
+				width: 29rpx;
+				height: 29rpx;
+				border-radius: 50%;
+				border: 2rpx solid #d8d8d8;
+			}
+			.iconChange{
+				flex-shrink: 0;
+				flex-grow: 0;
+				width: 32rpx;
+				height: 32rpx;
+				border: 0rpx solid #fff;
+			}
+			.sa-txt{
+				color: #333;
+				font-size: 28rpx;
+				margin-left: 20rpx;
+			}
+		}
+		.se-section{
+			margin-right: 24rpx;
+			@include ctf(center);
+			.ss-info{
+				margin-right: 20rpx;
+				.si-price{
+					>text{
+						&:first-child{	
+							color: #9A9A9D;
+							font-size: 20rpx;
+							margin-right: 14rpx;
+						}
+						&:nth-child(2){
+							color: #333;
+							font-size: 28rpx;
+							font-weight: 600;
+						}
+						&:nth-child(3){
+							color: #FF873D;
+							font-size: 32rpx;
+							font-weight: 600;
+						}
+					}
+				}
+			}
+			.ss-pay{
+				width: 240rpx;
+				// padding: 22rpx 0;
+				height: 88rpx;
+				border-radius: 44rpx;
+				background: linear-gradient(90deg, #44D7B6 0%, $mColor 100%);
+				color: #FFF;
+				font-size: 32rpx;
+				font-weight: 600;
+				text-align: center;
+				line-height: 88rpx;
+			}
+			.ss-del{
+				width: 240rpx;
+				// padding: 20rpx 0;
+				height: 88rpx;
+				border-radius: 44rpx;
+				border: 2rpx solid $mColor;
+				color: $mColor;
+				font-size: 32rpx;
+				font-weight: 600;
+				text-align: center;
+				line-height: 86rpx;
+			}
+		}
+	}
+}
+</style>

src/utils/calculate.js

@@ -0,0 +1,76 @@
+/**
+ * 加法函数
+ * @param {number} arg1 数字1
+ * @param {number} arg2 数字2
+ * @returns {number} 返回两数相加的结果
+ * */ 
+export function accAdd(arg1, arg2) {
+    var r1, r2, m, c;
+    try { r1 = arg1.toString().split(".")[1].length; }catch (e) { r1 = 0 };
+    try { r2 = arg2.toString().split(".")[1].length }catch (e) { r2 = 0 };
+    c = Math.abs(r1 - r2);
+    m = Math.pow(10, Math.max(r1, r2));
+    if (c > 0) {
+        var cm = Math.pow(10, c);
+        if (r1 > r2) {
+            arg1 = Number(arg1.toString().replace(".", ""));
+            arg2 = Number(arg2.toString().replace(".", "")) * cm;
+        }else {
+            arg1 = Number(arg1.toString().replace(".", "")) * cm;
+            arg2 = Number(arg2.toString().replace(".", ""));
+        }
+    }else {
+        arg1 = Number(arg1.toString().replace(".", ""));
+        arg2 = Number(arg2.toString().replace(".", ""));
+    }
+    return (arg1 + arg2) / m;
+}
+
+/**
+ *  减法函数
+ * @param {number} arg1 数字1
+ * @param {number} arg2 数字2
+ * @returns {number} 返回两数相减的结果
+ * 
+*/
+export function accSub(arg1, arg2) {
+    var r1, r2, m, n;
+    try { r1 = arg1.toString().split(".")[1].length }catch (e) { r1 = 0 };
+    try { r2 = arg2.toString().split(".")[1].length }catch (e) { r2 = 0 };
+
+    m = Math.pow(10, Math.max(r1, r2)); //last modify by deeka //动态控制精度长度
+    n = (r1 >= r2) ? r1 : r2;
+    return ((arg1 * m - arg2 * m) / m).toFixed(n);
+}
+
+/**
+ * 乘法函数
+ * @param {number} arg1 数字1
+ * @param {number} arg2 数字2
+ * @returns {number} 返回两数相乘的结果
+ * 
+*/
+export function accMul(arg1, arg2) {
+    var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
+    try { m += s1.split(".")[1].length }catch (e) { };
+    try { m += s2.split(".")[1].length }catch (e) { };
+
+    return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
+}
+
+/**
+ * 除法函数
+ * @param {number} arg1 数字1
+ * @param {number} arg2 数字2
+ * @returns {number} 返回两数相除的结果
+ * 
+*/
+export function accDiv(arg1, arg2) {
+    var t1 = 0, t2 = 0, r1, r2;
+    try { t1 = arg1.toString().split(".")[1].length }catch (e) { }
+    try { t2 = arg2.toString().split(".")[1].length }catch (e) { }
+
+    r1 = Number(arg1.toString().replace(".", ""));
+    r2 = Number(arg2.toString().replace(".", ""));
+    return (r1 / r2) * Math.pow(10, t2 - t1);
+}

src/utils/util.js

@@ -261,34 +261,6 @@ export function getSceneQuery(scene){
   return queryObj;
 }
 
-// 格式化聊天内容
-// export function formatContent(str = ''){
-//   let reg = /\[[\u4e00-\u9fa5_a-zA-Z0-9]{1,}\]/gi;
-//   let strArr = str.split(reg) || [];
-//   let emojiArr = str.match(reg) || [];
-//   let contentList = [];
-//   strArr.forEach(ele=>{
-//     if(ele)contentList.push({
-//         type:'txt',
-//         content:ele
-//     });
-//     if(!!emojiArr.length){
-//       let iconKey = emojiArr.splice(0,1)[0];
-//       if(emojiMap[iconKey]){
-//         contentList.push({
-//             type:'icon',
-//             src:`${emojiUrl}${emojiMap[iconKey]}`
-//         })
-//       }else{
-//         contentList.push({
-//             type:'txt',
-//             content:iconKey
-//         });
-//       }
-//     }
-//   });
-//   return contentList
-// }
 //获取地址栏里（URL）传递的参数 
 function getUrlQuery(key,url){
 	var _url = decodeURI(url).split('?a=1').join(''); //剪切'?a=1'安卓兼容，再获取参数
@@ -405,10 +377,6 @@ export function $_emit(name, data){
   })
 }
 
-function getFilterJson(obj){
-	return obj
-}
-
 function order_pay_type_txt(status = ''){
   let _obj = {
       0: '微信支付',
@@ -419,6 +387,10 @@ function order_pay_type_txt(status = ''){
   return _obj[status] || '-'
 }
 
+export function checkBothArrIsEqual(arr1 = [], arr2 = []){
+  return arr1.length === arr2.length && arr1.every(item => arr2.includes(item));
+}
+
 export default {
   formatTime,
   formatNumber,
@@ -451,5 +423,6 @@ export default {
   isProfile,
   $_once,
   $_emit,
-  order_pay_type_txt
+  order_pay_type_txt,
+  checkBothArrIsEqual, // 判断两个数组是否相等 
 }