|
@@ -5,7 +5,8 @@
|
|
|
<image src="/static/error/emptyCart.png" class="emptyImg" mode="aspectFit"></image>
|
|
|
<view v-if="hasLogin" class="empty-tips">
|
|
|
空空如也
|
|
|
- <navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
|
|
|
+ <navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛>
|
|
|
+ </navigator>
|
|
|
</view>
|
|
|
<view v-else class="empty-tips">
|
|
|
空空如也
|
|
@@ -27,15 +28,10 @@
|
|
|
<block v-for="(item, index) in cartList" :key="item.id">
|
|
|
<view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
|
|
|
<view class="image-wrapper">
|
|
|
- <image
|
|
|
- :src="item.productInfo.image"
|
|
|
- :class="[item.loaded]"
|
|
|
- mode="aspectFill"
|
|
|
- lazy-load
|
|
|
- @load="onImageLoad('cartList', index)"
|
|
|
- @error="onImageError('cartList', index)"
|
|
|
- ></image>
|
|
|
- <view class="iconfont iconroundcheckfill checkbox" :class="{ checked: item.checked }" @click="check('item', index)"></view>
|
|
|
+ <image :src="item.productInfo.image" :class="[item.loaded]" mode="aspectFill" lazy-load
|
|
|
+ @load="onImageLoad('cartList', index)" @error="onImageError('cartList', index)"></image>
|
|
|
+ <view class="iconfont iconroundcheckfill checkbox" :class="{ checked: item.checked }"
|
|
|
+ @click="check('item', index)"></view>
|
|
|
</view>
|
|
|
<view class="item-right">
|
|
|
<text class="clamp title">{{ item.productInfo.store_name }}</text>
|
|
@@ -51,9 +47,9 @@
|
|
|
:index="index"
|
|
|
@eventChange="numberChange"
|
|
|
></uni-number-box> -->
|
|
|
- <view class="munbox flex" >
|
|
|
+ <view class="munbox flex">
|
|
|
<image src="../../static/icon/reduce.png" mode="" @click="reduce(item,index)"></image>
|
|
|
- <input type="number" :value="item.cart_num" disabled/>
|
|
|
+ <input type="number" :value="item.cart_num" disabled />
|
|
|
<image src="../../static/icon/add.png" mode="" @click="add(item)"></image>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -64,7 +60,8 @@
|
|
|
<!-- 底部菜单栏 -->
|
|
|
<view class="action-section">
|
|
|
<view class="checkbox">
|
|
|
- <view class="iconfont iconroundcheckfill icon-checked-box" @click="check('all')" :class="{ 'icon-checked': allChecked }"></view>
|
|
|
+ <view class="iconfont iconroundcheckfill icon-checked-box" @click="check('all')"
|
|
|
+ :class="{ 'icon-checked': allChecked }"></view>
|
|
|
<!-- <view class="clear-btn" @click="allChecked ? clearCart() : ''" :class="{ show: allChecked }"><text>清空</text></view> -->
|
|
|
</view>
|
|
|
<view class="total-box">
|
|
@@ -82,472 +79,521 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ // #ifdef H5
|
|
|
import weixinObj from "@/plugin/jweixin-module/index.js";
|
|
|
-import { getCartList, getCartNum, cartDel } from '@/api/user.js';
|
|
|
-import { mapState } from 'vuex';
|
|
|
-import uniNumberBox from '@/components/uni-number-box.vue';
|
|
|
-import { saveUrl, interceptor } from '@/utils/loginUtils.js';
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- uniNumberBox
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- total: 0, //总价格
|
|
|
- allChecked: false, //全选状态 true|false
|
|
|
- empty: false, //空白页现实 true|false
|
|
|
- cartList: []
|
|
|
- };
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- // 只有登录时才加载数据
|
|
|
- if (this.hasLogin) {
|
|
|
- this.loadData();
|
|
|
- }
|
|
|
- weixinObj.hideAllNonBaseMenuItem();
|
|
|
- },
|
|
|
- watch: {
|
|
|
- //显示空白页
|
|
|
- cartList(e) {
|
|
|
- let empty = e.length === 0 ? true : false;
|
|
|
- if (this.empty !== empty) {
|
|
|
- this.empty = empty;
|
|
|
+ // #endif
|
|
|
+ import {
|
|
|
+ getCartList,
|
|
|
+ getCartNum,
|
|
|
+ cartDel
|
|
|
+ } from '@/api/user.js';
|
|
|
+ import {
|
|
|
+ mapState
|
|
|
+ } from 'vuex';
|
|
|
+ import uniNumberBox from '@/components/uni-number-box.vue';
|
|
|
+ import {
|
|
|
+ saveUrl,
|
|
|
+ interceptor
|
|
|
+ } from '@/utils/loginUtils.js';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ uniNumberBox
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ total: 0, //总价格
|
|
|
+ allChecked: false, //全选状态 true|false
|
|
|
+ empty: false, //空白页现实 true|false
|
|
|
+ cartList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // 只有登录时才加载数据
|
|
|
+ if (this.hasLogin) {
|
|
|
+ this.loadData();
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState('user', ['hasLogin'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- reduce(item,index) {
|
|
|
- if(item.cart_num == 1) {
|
|
|
+ weixinObj.hideAllNonBaseMenuItem();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ //显示空白页
|
|
|
+ cartList(e) {
|
|
|
+ let empty = e.length === 0 ? true : false;
|
|
|
+ if (this.empty !== empty) {
|
|
|
+ this.empty = empty;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState('user', ['hasLogin'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ reduce(item, index) {
|
|
|
+ if (item.cart_num == 1) {
|
|
|
+ uni.showModal({
|
|
|
+ content: '删除该商品?',
|
|
|
+ success: e => {
|
|
|
+ if (e.confirm) {
|
|
|
+ this.deleteCartItem(index)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ } else {
|
|
|
+ item.cart_num--
|
|
|
+ this.newNumberChange(item)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ add(item) {
|
|
|
+ console.log(item)
|
|
|
+ if (item.productInfo.stock > item.cart_num) {
|
|
|
+ item.cart_num++
|
|
|
+ this.newNumberChange(item)
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //请求数据
|
|
|
+ async loadData() {
|
|
|
+ let obj = this;
|
|
|
+ getCartList({})
|
|
|
+ .then(function(e) {
|
|
|
+ // 获取当前购物车物品增加数量
|
|
|
+ let nub = obj.cartList.length;
|
|
|
+ // 获取之前对象数组
|
|
|
+ let aArray = obj.cartList.reverse();
|
|
|
+ // 获取返回数据对象数组
|
|
|
+ let bArray = e.data.valid.reverse();
|
|
|
+ obj.cartList = bArray
|
|
|
+ .map((item, ind) => {
|
|
|
+ // 设置返回数据默认为勾选状态
|
|
|
+ item.checked = true;
|
|
|
+ // 获取相同数组之前对象的数据
|
|
|
+ let carlist = aArray[ind];
|
|
|
+ // 判断之前是否已经加载完毕
|
|
|
+ if (carlist && carlist.loaded == 'loaded') {
|
|
|
+ item.loaded = 'loaded';
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ })
|
|
|
+ .reverse();
|
|
|
+ obj.calcTotal(); //计算总价
|
|
|
+ })
|
|
|
+ .catch(function(e) {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //监听image加载完成
|
|
|
+ onImageLoad(key, index) {
|
|
|
+ // 修改载入完成后图片class样式
|
|
|
+ this.$set(this[key][index], 'loaded', 'loaded');
|
|
|
+ },
|
|
|
+ //监听image加载失败
|
|
|
+ onImageError(key, index) {
|
|
|
+ this[key][index].image = '/static/error/errorImage.jpg';
|
|
|
+ },
|
|
|
+ // 跳转到登录页
|
|
|
+ navToLogin() {
|
|
|
+ // 保存地址
|
|
|
+ saveUrl();
|
|
|
+ // 登录拦截
|
|
|
+ interceptor();
|
|
|
+ },
|
|
|
+ //选中状态处理
|
|
|
+ check(type, index) {
|
|
|
+ if (type === 'item') {
|
|
|
+ this.cartList[index].checked = !this.cartList[index].checked;
|
|
|
+ } else {
|
|
|
+ const checked = !this.allChecked;
|
|
|
+ const list = this.cartList;
|
|
|
+ list.forEach(item => {
|
|
|
+ item.checked = checked;
|
|
|
+ });
|
|
|
+ this.allChecked = checked;
|
|
|
+ }
|
|
|
+ this.calcTotal(type);
|
|
|
+ },
|
|
|
+ //数量
|
|
|
+ numberChange(data) {
|
|
|
+ let arr = this.cartList[data.index];
|
|
|
+ arr.cart_num = data.number;
|
|
|
+ getCartNum({
|
|
|
+ id: arr.id,
|
|
|
+ number: data.number
|
|
|
+ })
|
|
|
+ .then(e => {
|
|
|
+ console.log(e);
|
|
|
+ })
|
|
|
+ .catch(function(e) {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ this.calcTotal();
|
|
|
+ },
|
|
|
+ newNumberChange(item) {
|
|
|
+ getCartNum({
|
|
|
+ id: item.id,
|
|
|
+ number: item.cart_num
|
|
|
+ })
|
|
|
+ .then(e => {
|
|
|
+ console.log(e);
|
|
|
+ })
|
|
|
+ .catch(function(e) {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ this.calcTotal();
|
|
|
+ },
|
|
|
+ //删除
|
|
|
+ deleteCartItem(index) {
|
|
|
+ let list = this.cartList;
|
|
|
+ let row = list[index];
|
|
|
+ let id = row.id;
|
|
|
+ cartDel({
|
|
|
+ ids: id
|
|
|
+ });
|
|
|
+ this.cartList.splice(index, 1);
|
|
|
+ uni.hideLoading();
|
|
|
+ this.calcTotal();
|
|
|
+ },
|
|
|
+ //清空
|
|
|
+ clearCart() {
|
|
|
uni.showModal({
|
|
|
- content: '删除该商品?',
|
|
|
+ content: '清空购物车?',
|
|
|
success: e => {
|
|
|
if (e.confirm) {
|
|
|
- this.deleteCartItem(index)
|
|
|
+ let st = this.cartList.map(e => {
|
|
|
+ return e.id;
|
|
|
+ });
|
|
|
+ cartDel({
|
|
|
+ ids: st.join(',')
|
|
|
+ }).then(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ this.cartList = [];
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
- }else {
|
|
|
- item.cart_num--
|
|
|
- this.newNumberChange(item)
|
|
|
- }
|
|
|
- },
|
|
|
- add(item) {
|
|
|
- console.log(item)
|
|
|
- if(item.productInfo.stock > item.cart_num) {
|
|
|
- item.cart_num++
|
|
|
- this.newNumberChange(item)
|
|
|
- }else {
|
|
|
- return
|
|
|
- }
|
|
|
- },
|
|
|
- //请求数据
|
|
|
- async loadData() {
|
|
|
- let obj = this;
|
|
|
- getCartList({})
|
|
|
- .then(function(e) {
|
|
|
- // 获取当前购物车物品增加数量
|
|
|
- let nub = obj.cartList.length;
|
|
|
- // 获取之前对象数组
|
|
|
- let aArray = obj.cartList.reverse();
|
|
|
- // 获取返回数据对象数组
|
|
|
- let bArray = e.data.valid.reverse();
|
|
|
- obj.cartList = bArray
|
|
|
- .map((item, ind) => {
|
|
|
- // 设置返回数据默认为勾选状态
|
|
|
- item.checked = true;
|
|
|
- // 获取相同数组之前对象的数据
|
|
|
- let carlist = aArray[ind];
|
|
|
- // 判断之前是否已经加载完毕
|
|
|
- if (carlist && carlist.loaded == 'loaded') {
|
|
|
- item.loaded = 'loaded';
|
|
|
- }
|
|
|
- return item;
|
|
|
- })
|
|
|
- .reverse();
|
|
|
- obj.calcTotal(); //计算总价
|
|
|
- })
|
|
|
- .catch(function(e) {
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- },
|
|
|
- //监听image加载完成
|
|
|
- onImageLoad(key, index) {
|
|
|
- // 修改载入完成后图片class样式
|
|
|
- this.$set(this[key][index], 'loaded', 'loaded');
|
|
|
- },
|
|
|
- //监听image加载失败
|
|
|
- onImageError(key, index) {
|
|
|
- this[key][index].image = '/static/error/errorImage.jpg';
|
|
|
- },
|
|
|
- // 跳转到登录页
|
|
|
- navToLogin() {
|
|
|
- // 保存地址
|
|
|
- saveUrl();
|
|
|
- // 登录拦截
|
|
|
- interceptor();
|
|
|
- },
|
|
|
- //选中状态处理
|
|
|
- check(type, index) {
|
|
|
- if (type === 'item') {
|
|
|
- this.cartList[index].checked = !this.cartList[index].checked;
|
|
|
- } else {
|
|
|
- const checked = !this.allChecked;
|
|
|
- const list = this.cartList;
|
|
|
+ },
|
|
|
+ //计算总价
|
|
|
+ calcTotal() {
|
|
|
+ let list = this.cartList;
|
|
|
+ if (list.length === 0) {
|
|
|
+ this.empty = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let total = 0;
|
|
|
+ let checked = true;
|
|
|
list.forEach(item => {
|
|
|
- item.checked = checked;
|
|
|
+ if (item.checked === true) {
|
|
|
+ total += item.productInfo.price * item.cart_num;
|
|
|
+ } else if (checked === true) {
|
|
|
+ checked = false;
|
|
|
+ }
|
|
|
});
|
|
|
this.allChecked = checked;
|
|
|
- }
|
|
|
- this.calcTotal(type);
|
|
|
- },
|
|
|
- //数量
|
|
|
- numberChange(data) {
|
|
|
- let arr = this.cartList[data.index];
|
|
|
- arr.cart_num = data.number;
|
|
|
- getCartNum({ id: arr.id, number: data.number })
|
|
|
- .then(e => {
|
|
|
- console.log(e);
|
|
|
- })
|
|
|
- .catch(function(e) {
|
|
|
- console.log(e);
|
|
|
+ this.total = Number(total.toFixed(2));
|
|
|
+ },
|
|
|
+ //创建订单
|
|
|
+ createOrder() {
|
|
|
+ let list = this.cartList;
|
|
|
+ let goodsData = [];
|
|
|
+ list.forEach(item => {
|
|
|
+ if (item.checked) {
|
|
|
+ goodsData.push(item.id);
|
|
|
+ }
|
|
|
});
|
|
|
- this.calcTotal();
|
|
|
- },
|
|
|
- newNumberChange(item) {
|
|
|
- getCartNum({ id: item.id, number: item.cart_num })
|
|
|
- .then(e => {
|
|
|
- console.log(e);
|
|
|
- })
|
|
|
- .catch(function(e) {
|
|
|
- console.log(e);
|
|
|
+
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/order/createOrder?id=' + goodsData.join(',')
|
|
|
});
|
|
|
- this.calcTotal();
|
|
|
- },
|
|
|
- //删除
|
|
|
- deleteCartItem(index) {
|
|
|
- let list = this.cartList;
|
|
|
- let row = list[index];
|
|
|
- let id = row.id;
|
|
|
- cartDel({
|
|
|
- ids: id
|
|
|
- });
|
|
|
- this.cartList.splice(index, 1);
|
|
|
- uni.hideLoading();
|
|
|
- this.calcTotal();
|
|
|
- },
|
|
|
- //清空
|
|
|
- clearCart() {
|
|
|
- uni.showModal({
|
|
|
- content: '清空购物车?',
|
|
|
- success: e => {
|
|
|
- if (e.confirm) {
|
|
|
- let st = this.cartList.map(e => {
|
|
|
- return e.id;
|
|
|
- });
|
|
|
- cartDel({
|
|
|
- ids: st.join(',')
|
|
|
- }).then(e => {
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- this.cartList = [];
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //计算总价
|
|
|
- calcTotal() {
|
|
|
- let list = this.cartList;
|
|
|
- if (list.length === 0) {
|
|
|
- this.empty = true;
|
|
|
- return;
|
|
|
}
|
|
|
- let total = 0;
|
|
|
- let checked = true;
|
|
|
- list.forEach(item => {
|
|
|
- if (item.checked === true) {
|
|
|
- total += item.productInfo.price * item.cart_num;
|
|
|
- } else if (checked === true) {
|
|
|
- checked = false;
|
|
|
- }
|
|
|
- });
|
|
|
- this.allChecked = checked;
|
|
|
- this.total = Number(total.toFixed(2));
|
|
|
- },
|
|
|
- //创建订单
|
|
|
- createOrder() {
|
|
|
- let list = this.cartList;
|
|
|
- let goodsData = [];
|
|
|
- list.forEach(item => {
|
|
|
- if (item.checked) {
|
|
|
- goodsData.push(item.id);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/order/createOrder?id=' + goodsData.join(',')
|
|
|
- });
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.container {
|
|
|
- padding-bottom: 134rpx;
|
|
|
- background-color: $page-color-base;
|
|
|
- /* 空白页 */
|
|
|
- .empty {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- padding-bottom: 100rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- background: #fff;
|
|
|
- .emptyImg {
|
|
|
- width: 300rpx;
|
|
|
- height: 250rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- }
|
|
|
- .empty-tips {
|
|
|
+ .container {
|
|
|
+ padding-bottom: 134rpx;
|
|
|
+ background-color: $page-color-base;
|
|
|
+
|
|
|
+ /* 空白页 */
|
|
|
+ .empty {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ padding-bottom: 100rpx;
|
|
|
display: flex;
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
- color: $font-color-disabled;
|
|
|
- .navigator {
|
|
|
- color: $uni-color-primary;
|
|
|
- margin-left: 16rpx;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .emptyImg {
|
|
|
+ width: 300rpx;
|
|
|
+ height: 250rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-tips {
|
|
|
+ display: flex;
|
|
|
+ font-size: $font-sm + 2rpx;
|
|
|
+ color: $font-color-disabled;
|
|
|
+
|
|
|
+ .navigator {
|
|
|
+ color: $uni-color-primary;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-/* 购物车列表项 */
|
|
|
-.cart-item {
|
|
|
- width: 710rpx;
|
|
|
- height: 210rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px 0px 10rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 10rpx;
|
|
|
- margin: 20rpx auto;
|
|
|
-
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
- padding: 30rpx 26rpx 30rpx 80rpx;
|
|
|
- .image-wrapper {
|
|
|
- width: 150rpx;
|
|
|
- height: 150rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- position: relative;
|
|
|
- image {
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .checkbox {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- left: -65rpx;
|
|
|
- margin: auto 0;
|
|
|
- height: 50rpx;
|
|
|
- z-index: 8;
|
|
|
- font-size: 44rpx;
|
|
|
- line-height: 1;
|
|
|
- padding: 4rpx;
|
|
|
- color: $font-color-disabled;
|
|
|
- background: #fff;
|
|
|
- border-radius: 50px;
|
|
|
- }
|
|
|
- .item-right {
|
|
|
+
|
|
|
+ /* 购物车列表项 */
|
|
|
+ .cart-item {
|
|
|
+ width: 710rpx;
|
|
|
+ height: 210rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 10rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin: 20rpx auto;
|
|
|
+
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- flex: 1;
|
|
|
- overflow: hidden;
|
|
|
position: relative;
|
|
|
- padding-left: 30rpx;
|
|
|
- .munbox {
|
|
|
- width: 144rpx;
|
|
|
- height: 44rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- input {
|
|
|
- display: inline-block;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ padding: 30rpx 26rpx 30rpx 80rpx;
|
|
|
+
|
|
|
+ .image-wrapper {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
image {
|
|
|
- flex-shrink: 0;
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
}
|
|
|
}
|
|
|
- .title,
|
|
|
- .price {
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- color: $font-color-dark;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- .attr {
|
|
|
- font-size: $font-sm + 2rpx;
|
|
|
- color: $font-color-light;
|
|
|
+
|
|
|
+ .checkbox {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: -65rpx;
|
|
|
+ margin: auto 0;
|
|
|
height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
-
|
|
|
- font-size: 26rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .price {
|
|
|
- // height: 50rpx;
|
|
|
- // line-height: 50rpx;
|
|
|
- padding-top: 20rpx;
|
|
|
- font-size: 34rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #FF4C4C;
|
|
|
+ z-index: 8;
|
|
|
+ font-size: 44rpx;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 4rpx;
|
|
|
+ color: $font-color-disabled;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 50px;
|
|
|
}
|
|
|
- .step {
|
|
|
- margin-top: 20rpx;
|
|
|
+
|
|
|
+ .item-right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 30rpx;
|
|
|
+
|
|
|
+ .munbox {
|
|
|
+ width: 144rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+
|
|
|
+ input {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title,
|
|
|
+ .price {
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .attr {
|
|
|
+ font-size: $font-sm + 2rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ // height: 50rpx;
|
|
|
+ // line-height: 50rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF4C4C;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
}
|
|
|
- .title {
|
|
|
+
|
|
|
+ .del-btn {
|
|
|
+ padding: 4rpx 10rpx;
|
|
|
font-size: 34rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
- .del-btn {
|
|
|
- padding: 4rpx 10rpx;
|
|
|
- font-size: 34rpx;
|
|
|
- height: 50rpx;
|
|
|
- color: $font-color-light;
|
|
|
- }
|
|
|
-}
|
|
|
-/* 底部栏 */
|
|
|
-.action-section {
|
|
|
- /* #ifdef H5 */
|
|
|
- margin-bottom: 100rpx;
|
|
|
- /* #endif */
|
|
|
- position: fixed;
|
|
|
- left: 30rpx;
|
|
|
- bottom: 30rpx;
|
|
|
- z-index: 95;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 690rpx;
|
|
|
- height: 100rpx;
|
|
|
- padding: 0 30rpx;
|
|
|
- background: rgba(255, 255, 255, 0.9);
|
|
|
- box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
|
|
|
- border-radius: 16rpx;
|
|
|
- .checkbox {
|
|
|
- height: 52rpx;
|
|
|
- position: relative;
|
|
|
- .icon-checked-box {
|
|
|
- border-radius: 50rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- width: 52rpx;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- z-index: 5;
|
|
|
- font-size: 53rpx;
|
|
|
- line-height: 1;
|
|
|
+ height: 50rpx;
|
|
|
color: $font-color-light;
|
|
|
}
|
|
|
- .icon-checked {
|
|
|
- color: $base-color;
|
|
|
- }
|
|
|
- }
|
|
|
- .clear-btn {
|
|
|
- position: absolute;
|
|
|
- left: 26rpx;
|
|
|
- top: 0;
|
|
|
- z-index: 4;
|
|
|
- width: 0;
|
|
|
- height: 52rpx;
|
|
|
- line-height: 52rpx;
|
|
|
- padding-left: 38rpx;
|
|
|
- font-size: $font-base;
|
|
|
- color: #fff;
|
|
|
- background: $font-color-disabled;
|
|
|
- border-radius: 0 50px 50px 0;
|
|
|
- opacity: 0;
|
|
|
- transition: 0.2s;
|
|
|
- &.show {
|
|
|
- opacity: 1;
|
|
|
- width: 120rpx;
|
|
|
- }
|
|
|
}
|
|
|
- .total-box {
|
|
|
- flex: 1;
|
|
|
+
|
|
|
+ /* 底部栏 */
|
|
|
+ .action-section {
|
|
|
+ /* #ifdef H5 */
|
|
|
+ margin-bottom: 100rpx;
|
|
|
+ /* #endif */
|
|
|
+ position: fixed;
|
|
|
+ left: 30rpx;
|
|
|
+ bottom: 30rpx;
|
|
|
+ z-index: 95;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- text-align: right;
|
|
|
- padding-right: 40rpx;
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: 36rpx;
|
|
|
- color: $font-color-dark;
|
|
|
+ align-items: center;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
+ box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .checkbox {
|
|
|
+ height: 52rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .icon-checked-box {
|
|
|
+ border-radius: 50rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ width: 52rpx;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ z-index: 5;
|
|
|
+ font-size: 53rpx;
|
|
|
+ line-height: 1;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-checked {
|
|
|
+ color: $base-color;
|
|
|
+ }
|
|
|
}
|
|
|
- .coupon {
|
|
|
- font-size: $font-sm;
|
|
|
- color: $font-color-light;
|
|
|
- text {
|
|
|
+
|
|
|
+ .clear-btn {
|
|
|
+ position: absolute;
|
|
|
+ left: 26rpx;
|
|
|
+ top: 0;
|
|
|
+ z-index: 4;
|
|
|
+ width: 0;
|
|
|
+ height: 52rpx;
|
|
|
+ line-height: 52rpx;
|
|
|
+ padding-left: 38rpx;
|
|
|
+ font-size: $font-base;
|
|
|
+ color: #fff;
|
|
|
+ background: $font-color-disabled;
|
|
|
+ border-radius: 0 50px 50px 0;
|
|
|
+ opacity: 0;
|
|
|
+ transition: 0.2s;
|
|
|
+
|
|
|
+ &.show {
|
|
|
+ opacity: 1;
|
|
|
+ width: 120rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-box {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 40rpx;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 36rpx;
|
|
|
color: $font-color-dark;
|
|
|
}
|
|
|
+
|
|
|
+ .coupon {
|
|
|
+ font-size: $font-sm;
|
|
|
+ color: $font-color-light;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .confirm-btn {
|
|
|
- padding: 0 38rpx;
|
|
|
- margin: 0;
|
|
|
- border-radius: 100px;
|
|
|
- height: 76rpx;
|
|
|
- line-height: 76rpx;
|
|
|
- font-size: $font-base + 2rpx;
|
|
|
- background: $base-color;
|
|
|
- }
|
|
|
-}
|
|
|
-/* 复选框选中状态 */
|
|
|
-.action-section .checkbox.checked,
|
|
|
-.cart-item .checkbox.checked {
|
|
|
- color: $base-color;
|
|
|
-}
|
|
|
-.cart-hand {
|
|
|
- width: 750rpx;
|
|
|
- height: 88rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- line-height: 88rpx;
|
|
|
- padding-left: 28rpx;
|
|
|
- padding-right: 26rpx;
|
|
|
- .hand-tit {
|
|
|
- text {
|
|
|
- color: #FF4C4C;
|
|
|
+
|
|
|
+ .confirm-btn {
|
|
|
+ padding: 0 38rpx;
|
|
|
+ margin: 0;
|
|
|
+ border-radius: 100px;
|
|
|
+ height: 76rpx;
|
|
|
+ line-height: 76rpx;
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ background: $base-color;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- .hand-btn {
|
|
|
- width: 164rpx;
|
|
|
- height: 62rpx;
|
|
|
- border: 2rpx solid #FF4C4C;
|
|
|
- border-radius: 31rpx;
|
|
|
- font-size: 26rpx;
|
|
|
+
|
|
|
+ /* 复选框选中状态 */
|
|
|
+ .action-section .checkbox.checked,
|
|
|
+ .cart-item .checkbox.checked {
|
|
|
+ color: $base-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cart-hand {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ font-size: 30rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
- color: #FF4C4C;
|
|
|
- line-height: 62rpx;
|
|
|
- text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 88rpx;
|
|
|
+ padding-left: 28rpx;
|
|
|
+ padding-right: 26rpx;
|
|
|
+
|
|
|
+ .hand-tit {
|
|
|
+ text {
|
|
|
+ color: #FF4C4C;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .hand-btn {
|
|
|
+ width: 164rpx;
|
|
|
+ height: 62rpx;
|
|
|
+ border: 2rpx solid #FF4C4C;
|
|
|
+ border-radius: 31rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF4C4C;
|
|
|
+ line-height: 62rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|