|
|
- <template>
- <view class="page">
- <navbar title="购物车" leftClick @leftClick="$utils.navigateBack" />
-
- <view class="user">
- <uv-checkbox-group
- shape="circle"
- v-model="cartCheckboxValue">
-
- <uv-swipe-action>
- <view
- v-for="(item, index) in cartList"
- :key="index">
- <view style="margin-top: 20rpx;"></view>
- <uv-swipe-action-item
- :options="options">
- <view class="item">
- <view class="checkbox">
- <uv-checkbox
- :name="item.id"
- activeColor="#FA5A0A"
- size="40rpx"
- icon-size="35rpx"
- ></uv-checkbox>
- </view>
-
- <image
- class="image"
- src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg"
- mode=""></image>
-
- <view class="info">
- <view class="title">
- <view class="">
- {{ item.title }}
- </view>
- <view class="">
- <uv-number-box v-model="item.num"
- @change="valChange"></uv-number-box>
- </view>
- </view>
- <view class="unit">
- 规格:{{ item.unit }}
- <uv-icon name="arrow-down"></uv-icon>
- </view>
- <view class="price">
- ¥<text>{{ item.price }}</text>元
- </view>
- </view>
- </view>
- </uv-swipe-action-item>
- </view>
- </uv-swipe-action>
- </uv-checkbox-group>
-
- <cartAction/>
- </view>
-
- <tabber select="3" />
- </view>
- </template>
-
- <script>
- import cartAction from '../components/product/cartAction.vue'
- import { mapState } from 'vuex'
- export default {
- components: {
- cartAction
- },
- data() {
- return {
- options: [
- {
- text: '删除',
- style: {
- backgroundColor: '#FA5A0A'
- }
- },
- ],
- }
- },
- computed: {
- ...mapState(['cartList', 'cartCheckboxValue']),
- },
- methods: {
- valChange(){
-
- },
- }
- }
- </script>
-
- <style scoped lang="scss">
- .page {
- padding-bottom: 200rpx;
- }
-
- .user {
- .item{
- background-color: #fff;
- display: flex;
- padding: 30rpx;
- .checkbox{
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .image{
- width: 200rpx;
- height: 200rpx;
- border-radius: 20rpx;
- }
- .info{
- flex: 1;
- .title{
- display: flex;
- padding: 10rpx 20rpx;
- justify-content: space-between;
-
- }
- .unit{
- font-size: 24rpx;
- padding: 10rpx 20rpx;
- color: #717171;
- display: flex;
- align-items: center;
- }
- .price{
- color: $uni-color;
- font-size: 28rpx;
- padding: 10rpx 20rpx;
- text{
- font-size: 36rpx;
- font-weight: 900;
- }
- }
- }
- }
-
- }
- </style>
|