11 changed files with 866 additions and 48 deletions
-
7src/pages.json
-
5src/subpackage/mall/components/index_search_bar.vue
-
5src/subpackage/mall/components/specification_modal.vue
-
3src/subpackage/mall/js/api.js
-
20src/subpackage/mall/js/handle.js
-
20src/subpackage/mall/pages/classify.vue
-
739src/subpackage/mall/pages/shopping_cart.vue
-
BINsrc/subpackage/mall/static/images/selected2.png
-
BINsrc/subpackage/mall/static/images/useless.png
-
76src/utils/calculate.js
-
39src/utils/util.js
@ -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> |
|||
|
After Width: 32 | Height: 32 | Size: 753 B |
|
After Width: 32 | Height: 32 | Size: 421 B |
@ -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); |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue