|
|
@@ -1,9 +1,183 @@
|
|
|
-<template>
|
|
|
- <view>shopping</view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
+<template>
|
|
|
+ <view class="base-container">
|
|
|
+ <view class="search-wrap">
|
|
|
+ <up-search placeholder="日照香炉生紫烟" v-model="keyword"></up-search>
|
|
|
+ <text class="manage">管理</text>
|
|
|
+ </view>
|
|
|
+ <view class="shop-list">
|
|
|
+
|
|
|
+ <view class="shop-item" v-for="(item,index) in 3" :key="index">
|
|
|
+ <up-checkbox-group>
|
|
|
+ <up-checkbox v-model="shopChecked" shape="circle" label="从化荔博园店铺"></up-checkbox>
|
|
|
+ </up-checkbox-group>
|
|
|
+ <up-swipe-action>
|
|
|
+ <up-swipe-action-item v-for="(ele,idx) in 3" :key="idx" :options="options1">
|
|
|
+ <view class="commodity-item">
|
|
|
+ <up-checkbox-group>
|
|
|
+ <up-checkbox v-model="commodityChecked" shape="circle"></up-checkbox>
|
|
|
+ </up-checkbox-group>
|
|
|
+ <view class="commodity-info">
|
|
|
+ <image class="commodity-img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
|
|
|
+ <view class="commodity-cont">
|
|
|
+ <view class="name">
|
|
|
+ <text>海南妃子笑荔枝新鲜采摘</text>
|
|
|
+ <text>x1</text>
|
|
|
+ </view>
|
|
|
+ <up-text size="14" color="#717070" text="3斤装规格"></up-text>
|
|
|
+ <text class="text">坏单包退 包邮</text>
|
|
|
+ <view class="total">
|
|
|
+ <text class="unit">¥</text>
|
|
|
+ <text class="sum">108</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </up-swipe-action-item>
|
|
|
+ </up-swipe-action>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footer">
|
|
|
+ <up-checkbox-group>
|
|
|
+ <up-checkbox v-model="checked" shape="circle" label="全选"></up-checkbox>
|
|
|
+ </up-checkbox-group>
|
|
|
+ <view class="footer-right">
|
|
|
+ <view class="total">
|
|
|
+ 合计：<text class="unit">¥</text><text class="total-num">0</text>
|
|
|
+ </view>
|
|
|
+ <view class="buttom">结算</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ ref,
|
|
|
+ reactive
|
|
|
+ } from "vue"
|
|
|
+
|
|
|
+ const options1 = reactive([{
|
|
|
+ text: '删除',
|
|
|
+ style: {
|
|
|
+ backgroundColor: '#f56c6c'
|
|
|
+ }
|
|
|
+ }]);
|
|
|
+
|
|
|
+ const keyword = ref("")
|
|
|
+ const shopChecked = ref(false)
|
|
|
+ const commodityChecked = ref(false)
|
|
|
+
|
|
|
+ const checked = ref(false)
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .base-container {
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ .search-wrap {
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .shop-list {
|
|
|
+ height: calc(100vh - 100rpx - 120rpx);
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow: auto;
|
|
|
+ .shop-item {
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+
|
|
|
+ .commodity-item {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .commodity-info{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .commodity-img{
|
|
|
+ width: 182rpx;
|
|
|
+ height: 182rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ .commodity-cont{
|
|
|
+ width: calc(100% - 182rpx - 10rpx);
|
|
|
+ .name{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ margin-top: 14rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AFAFAF;
|
|
|
+ }
|
|
|
+ .total{
|
|
|
+ color: #FF7700;
|
|
|
+ font-size: 24rpx;
|
|
|
+ .sum{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 38rpx;
|
|
|
+ margin-left: 2rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /* #ifdef H5 */
|
|
|
+ .shop-list{
|
|
|
+ height: calc(100vh - 100rpx - 120rpx - 188rpx);
|
|
|
+ }
|
|
|
+ /* #endif */
|
|
|
+ .footer {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ border-top: 2rpx solid rgba(0, 0, 0, 0.26);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .footer-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .total {
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ color: #FF7700;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-num {
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #FF7700;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttom {
|
|
|
+ padding: 16rpx 78rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background: #FFD95E;
|
|
|
+ margin-left: 22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
wangsisi