|
@@ -1,37 +1,38 @@
|
|
<template>
|
|
<template>
|
|
<view class="base-container">
|
|
<view class="base-container">
|
|
<view class="search-wrap">
|
|
<view class="search-wrap">
|
|
- <up-search placeholder="日照香炉生紫烟" v-model="keyword"></up-search>
|
|
|
|
|
|
+ <v-search class="search" @searchCallback="searchCallback" @clearCallback="clearCallback"></v-search>
|
|
<text class="manage">管理</text>
|
|
<text class="manage">管理</text>
|
|
</view>
|
|
</view>
|
|
<view class="shop-list">
|
|
<view class="shop-list">
|
|
-
|
|
|
|
<view class="shop-item" v-for="(item,index) in 3" :key="index">
|
|
<view class="shop-item" v-for="(item,index) in 3" :key="index">
|
|
<up-checkbox-group>
|
|
<up-checkbox-group>
|
|
- <up-checkbox v-model="shopChecked" shape="circle" label="从化荔博园店铺" labelColor="#000" labelSize="14"></up-checkbox>
|
|
|
|
|
|
+ <up-checkbox v-model="shopChecked" shape="circle" label="从化荔博园店铺" labelColor="#000"
|
|
|
|
+ labelSize="14"></up-checkbox>
|
|
<up-icon class="icon" name="arrow-right" color="rgba(137, 137, 137, 0.69)" size="12"></up-icon>
|
|
<up-icon class="icon" name="arrow-right" color="rgba(137, 137, 137, 0.69)" size="12"></up-icon>
|
|
</up-checkbox-group>
|
|
</up-checkbox-group>
|
|
<up-swipe-action>
|
|
<up-swipe-action>
|
|
<up-swipe-action-item v-for="(ele,idx) in 3" :key="idx" :options="options1">
|
|
<up-swipe-action-item v-for="(ele,idx) in 3" :key="idx" :options="options1">
|
|
- <view class="commodity-item">
|
|
|
|
|
|
+ <view class="commodity-item">
|
|
<up-checkbox-group>
|
|
<up-checkbox-group>
|
|
<up-checkbox v-model="commodityChecked" shape="circle"></up-checkbox>
|
|
<up-checkbox v-model="commodityChecked" shape="circle"></up-checkbox>
|
|
</up-checkbox-group>
|
|
</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="12" color="#717070" text="3斤装规格"></up-text>
|
|
|
|
- <up-text size="12" color="#AFAFAF" text="坏单包退 包邮"></up-text>
|
|
|
|
- <view class="total">
|
|
|
|
- <text class="unit">¥</text>
|
|
|
|
- <text class="sum">108</text>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <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="12" color="#717070" text="3斤装规格"></up-text>
|
|
|
|
+ <up-text size="12" color="#AFAFAF" text="坏单包退 包邮"></up-text>
|
|
|
|
+ <view class="total">
|
|
|
|
+ <text class="unit">¥</text>
|
|
|
|
+ <text class="sum">108</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</up-swipe-action-item>
|
|
</up-swipe-action-item>
|
|
</up-swipe-action>
|
|
</up-swipe-action>
|
|
@@ -55,16 +56,22 @@
|
|
import {
|
|
import {
|
|
ref,
|
|
ref,
|
|
reactive
|
|
reactive
|
|
- } from "vue"
|
|
|
|
|
|
+ } from "vue"
|
|
|
|
+
|
|
|
|
+ const searchCallback = (e) => {
|
|
|
|
+ console.log('搜索', e)
|
|
|
|
+ }
|
|
|
|
+ const clearCallback = () => {
|
|
|
|
+ console.log('clear')
|
|
|
|
+ }
|
|
|
|
|
|
const options1 = reactive([{
|
|
const options1 = reactive([{
|
|
- text: '删除',
|
|
|
|
- style: {
|
|
|
|
- backgroundColor: '#f56c6c'
|
|
|
|
- }
|
|
|
|
|
|
+ text: '删除',
|
|
|
|
+ style: {
|
|
|
|
+ backgroundColor: '#f56c6c'
|
|
|
|
+ }
|
|
}]);
|
|
}]);
|
|
|
|
|
|
- const keyword = ref("")
|
|
|
|
const shopChecked = ref(false)
|
|
const shopChecked = ref(false)
|
|
const commodityChecked = ref(false)
|
|
const commodityChecked = ref(false)
|
|
|
|
|
|
@@ -73,7 +80,7 @@
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
.base-container {
|
|
.base-container {
|
|
- padding: 0;
|
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
|
.search-wrap {
|
|
.search-wrap {
|
|
background: #fff;
|
|
background: #fff;
|
|
@@ -81,63 +88,77 @@
|
|
align-items: center;
|
|
align-items: center;
|
|
padding: 16rpx 24rpx;
|
|
padding: 16rpx 24rpx;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
- .manage{
|
|
|
|
- margin-left: 20rpx;
|
|
|
|
|
|
+ .search{
|
|
|
|
+ width: calc(100% - 64rpx - 30rpx);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .manage {
|
|
|
|
+ margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .shop-list {
|
|
|
|
- height: calc(100vh - 100rpx - 120rpx);
|
|
|
|
- overflow-y: auto;
|
|
|
|
|
|
+
|
|
|
|
+ .shop-list {
|
|
|
|
+ height: calc(100vh - 100rpx - 120rpx);
|
|
|
|
+ overflow-y: auto;
|
|
overflow: auto;
|
|
overflow: auto;
|
|
|
|
+
|
|
.shop-item {
|
|
.shop-item {
|
|
background: #fff;
|
|
background: #fff;
|
|
margin-top: 20rpx;
|
|
margin-top: 20rpx;
|
|
padding: 20rpx 24rpx;
|
|
padding: 20rpx 24rpx;
|
|
|
|
|
|
- .commodity-item {
|
|
|
|
- width: 100%;
|
|
|
|
- padding: 20rpx 0 20rpx 10rpx;
|
|
|
|
|
|
+ .commodity-item {
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 20rpx 0 20rpx 10rpx;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
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;
|
|
|
|
- }
|
|
|
|
- .total{
|
|
|
|
- color: #FF7700;
|
|
|
|
- font-size: 24rpx;
|
|
|
|
- margin-top: 14rpx;
|
|
|
|
- .sum{
|
|
|
|
- font-weight: 500;
|
|
|
|
- font-size: 38rpx;
|
|
|
|
- margin-left: 2rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ 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;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .total {
|
|
|
|
+ color: #FF7700;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ margin-top: 14rpx;
|
|
|
|
+
|
|
|
|
+ .sum {
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 38rpx;
|
|
|
|
+ margin-left: 2rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- /* #ifdef H5 */
|
|
|
|
- .shop-list{
|
|
|
|
- height: calc(100vh - 100rpx - 120rpx - 188rpx);
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ /* #ifdef H5 */
|
|
|
|
+ .shop-list {
|
|
|
|
+ height: calc(100vh - 100rpx - 120rpx - 188rpx);
|
|
|
|
+ }
|
|
|
|
+
|
|
/* #endif */
|
|
/* #endif */
|
|
.footer {
|
|
.footer {
|
|
position: absolute;
|
|
position: absolute;
|