|
|
@@ -1,622 +1,628 @@
|
|
|
-<template>
|
|
|
- <view class="u-wrap">
|
|
|
- <view class="top-box">
|
|
|
- <view class="switch-box">
|
|
|
- <u-tabs :list="list1" lineWidth="30" lineColor="$uni-bg-color-primary" @click="handlerChangeTab" :activeStyle="{
|
|
|
- color: '#000',
|
|
|
- fontSize: '28rpx',
|
|
|
- transform: 'scale(1.05)',
|
|
|
- marginBottom: '15rpx',
|
|
|
- }" :inactiveStyle="{
|
|
|
- color: '#333',
|
|
|
- fontSize: '30rpx',
|
|
|
- transform: 'scale(1)',
|
|
|
- marginBottom: '15rpx',
|
|
|
- }" itemStyle="width:50%;padding:0;margin:5px 0;"></u-tabs>
|
|
|
- </view>
|
|
|
- <view class="search-box">
|
|
|
- <u--input v-model="search" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
|
|
|
- class="search-ipt" placeholder="请输入内容" border="surround" clearable></u--input>
|
|
|
- <button class="btn" @click="handlerSearchBtn">搜索</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 在售中 -->
|
|
|
- <view class="u-menu-wrap" v-if="delete_type == 0">
|
|
|
- <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
|
|
|
- :scroll-into-view="itemId">
|
|
|
- <view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
|
|
|
- :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
|
|
|
- <text class="u-line-1">{{ item.name }}</text>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <scroll-view :scroll-top="scrollRightTop" :scroll-into-view="itemId" scroll-y scroll-with-animation
|
|
|
- class="right-box" @scroll="rightScroll">
|
|
|
- <view class="page-view">
|
|
|
-
|
|
|
- <view class="" style="margin-top: 40rpx;" v-if="!tabbar.length">
|
|
|
- <u-empty mode="search" iconColor="#dae2ef" width="100" height="100"
|
|
|
- icon="https://cdn.uviewui.com/uview/demo/empty/search.png" v-if="!tabbar.length&&search.length!=0">
|
|
|
-
|
|
|
- </u-empty>
|
|
|
- <u-empty mode="list" text="暂无商品" iconColor="#dae2ef" width="100" height="100"
|
|
|
- icon="https://cdn.uviewui.com/uview/demo/empty/list.png" v-else-if="!tabbar.length">
|
|
|
-
|
|
|
- </u-empty>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
|
|
|
- <view class="item-title">
|
|
|
- <text>{{ item.name }}</text>
|
|
|
- </view>
|
|
|
- <view class="item-box" v-for="itm of item.children" :key="idx">
|
|
|
- <view class="item-l">
|
|
|
- <img class="l-img" src="@/static/QR57a.jpg" alt="" />
|
|
|
- </view>
|
|
|
- <view class="item-r">
|
|
|
- <p class="p1">{{ itm.name }}</p>
|
|
|
- <p class="p2 ws2 ">{{itm.description}}</p>
|
|
|
- <view class=" flex-c">
|
|
|
- <view class="mar-right-20 p3">
|
|
|
- ￥{{itm.specialPrice}}起
|
|
|
- </view>
|
|
|
- <view class="gray-color originalPrice">
|
|
|
- ￥{{itm.originalPrice}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 已下架 -->
|
|
|
- <view class="u-menu-wrap" v-if="delete_type == 1">
|
|
|
- <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
|
|
|
- <view class="page-view">
|
|
|
- <view class="" style="margin-top: 40rpx;" v-if="!rightTabbar.length">
|
|
|
- <u-empty mode="search" iconColor="#dae2ef" width="100" height="100"
|
|
|
- icon="https://cdn.uviewui.com/uview/demo/empty/search.png" v-if="!rightTabbar.length&&search.length!=0">
|
|
|
-
|
|
|
- </u-empty>
|
|
|
- <u-empty mode="list" text="暂无下架商品" iconColor="#dae2ef" width="100" height="100"
|
|
|
- icon="https://cdn.uviewui.com/uview/demo/empty/list.png" v-else-if="!rightTabbar.length">
|
|
|
-
|
|
|
- </u-empty>
|
|
|
- </view>
|
|
|
- <view class="class-item2" :id="'item' + index" v-for="(item, index) in rightTabbar" :key="index">
|
|
|
- <view class="item-box">
|
|
|
- <u-checkbox-group>
|
|
|
- <u-checkbox v-model="item.checked" shape="circle" @change="checkeChange(item)"></u-checkbox>
|
|
|
- </u-checkbox-group>
|
|
|
- <view class="item-l">
|
|
|
- <img class="l-img" src="@/static/QR57a.jpg" alt="" />
|
|
|
- </view>
|
|
|
- <view class="item-r">
|
|
|
- <p class="p1">{{ item.name }}</p>
|
|
|
- <p class="p2 ws2 ">{{item.description}}</p>
|
|
|
- <view class=" flex-c">
|
|
|
- <view class="mar-right-20 p3">
|
|
|
- ￥{{item.specialPrice}}起
|
|
|
- </view>
|
|
|
- <view class="gray-color originalPrice">
|
|
|
- ￥{{item.originalPrice}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- <view class="bottom-box" v-if="delete_type == 1">
|
|
|
- <p @click="upStore">批量上架</p>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {
|
|
|
- getGoodsList,
|
|
|
- upGoods,
|
|
|
- getCategories
|
|
|
- } from '@/api/client/goods.js'
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- checkboxValue1: [],
|
|
|
- scrollTop: 0, //tab标题的滚动条位置
|
|
|
- oldScrollTop: 0, // tab标题的滚动条旧位置
|
|
|
- current: 0, // 预设当前项的值
|
|
|
- menuHeight: 0, // 左边菜单的高度
|
|
|
- menuItemHeight: 0, // 左边菜单item的高度
|
|
|
- itemId: '', // 栏目右边scroll-view用于滚动的id
|
|
|
- arr: [], // 储存距离顶部高度的数组
|
|
|
- scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
|
|
- timer: null, // 定时器
|
|
|
- tabbar: [],
|
|
|
- list1: [{
|
|
|
- name: '在售中',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '已下架',
|
|
|
- },
|
|
|
- ],
|
|
|
- checked: false,
|
|
|
- search: '',
|
|
|
- delete_type: false,
|
|
|
- rightTabbar: [], // 列表
|
|
|
- };
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获取一个目标元素的高度
|
|
|
- * @elClass 元素的类名
|
|
|
- * @dataVal 储存高度的对象
|
|
|
- */
|
|
|
- onReady() {
|
|
|
- this.getMenuItemTop();
|
|
|
- },
|
|
|
- watch: {
|
|
|
- delete_type(newValue) {
|
|
|
- this.scrollRightTop = 0;
|
|
|
- this.current = 0;
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- merchantId() {
|
|
|
- return this.$store.state.data.merchantInfo.merchant.id
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
-
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.getGoodsList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- checkeChange(item) {
|
|
|
- console.log(item.checked);
|
|
|
- item.checked = !item.checked
|
|
|
-
|
|
|
- },
|
|
|
- deleteShop() {
|
|
|
-
|
|
|
- },
|
|
|
- async upStore() {
|
|
|
- const ids = this.rightTabbar.filter(obj => obj.checked).map(item => item.id)
|
|
|
- if (ids.length == 0) {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '请选择需要上架的商品'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- const res = await upGoods(ids)
|
|
|
- if (res.code == 'OK') {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '上架成功'
|
|
|
- })
|
|
|
- this.getGoodsList()
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '上架失败'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- getGoodsList() {
|
|
|
-
|
|
|
-
|
|
|
- getCategories(this.merchantId).then(res => {
|
|
|
- if (res.code == 'OK') {
|
|
|
- console.log(res,"这是res");
|
|
|
- getGoodsList({
|
|
|
- merchantId: this.merchantId,
|
|
|
- size: 100,
|
|
|
- goodsName: this.search,
|
|
|
- status: this.delete_type ? 'OFFLINE' : 'ONLINE'
|
|
|
- }).then(result => {
|
|
|
- console.log(result,"这是result")
|
|
|
- if (result.code == 'OK' && result.data && res.data) {
|
|
|
- res.data.forEach(obj => {
|
|
|
- result.data.forEach(item => {
|
|
|
- if (obj.id == item.categoryId) {
|
|
|
- obj.children.push(item)
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- })
|
|
|
- console.log(res.data,"这是res.data")
|
|
|
- this.tabbar = res.data
|
|
|
-
|
|
|
- if (this.delete_type) {
|
|
|
- this.rightTabbar = result.data.map(obj => {
|
|
|
- return {
|
|
|
- ...obj,
|
|
|
- checked: false
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- } else {
|
|
|
- this.tabbar = []
|
|
|
- this.rightTabbar = []
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.tabbar = []
|
|
|
- this.rightTabbar = []
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- getElRect(elClass, dataVal) {
|
|
|
- new Promise((resolve, reject) => {
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query
|
|
|
- .select('.' + elClass)
|
|
|
- .fields({
|
|
|
- size: true,
|
|
|
- },
|
|
|
- res => {
|
|
|
- // 如果节点尚未生成，res值为null，循环调用执行
|
|
|
- if (!res) {
|
|
|
- setTimeout(() => {
|
|
|
- this.getElRect(elClass);
|
|
|
- }, 10);
|
|
|
- return;
|
|
|
- }
|
|
|
- this[dataVal] = res.height;
|
|
|
- resolve();
|
|
|
- },
|
|
|
- )
|
|
|
- .exec();
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- getMenuItemTop() {
|
|
|
- new Promise(resolve => {
|
|
|
- let selectorQuery = uni.createSelectorQuery();
|
|
|
- selectorQuery
|
|
|
- .selectAll('.class-item')
|
|
|
- .boundingClientRect(rects => {
|
|
|
- // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
|
|
- if (!rects.length) {
|
|
|
- setTimeout(() => {
|
|
|
- this.getMenuItemTop();
|
|
|
- }, 10);
|
|
|
- return;
|
|
|
- }
|
|
|
- rects.forEach(rect => {
|
|
|
- // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
|
|
- this.arr.push(rect.top - rects[0].top);
|
|
|
- // this.arr.push(rect.top)
|
|
|
- resolve();
|
|
|
- });
|
|
|
- })
|
|
|
- .exec();
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 观测元素相交状态
|
|
|
- * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
|
|
- * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
|
|
- */
|
|
|
- async observer() {
|
|
|
- this.tabbar.map((val, index) => {
|
|
|
- let observer = uni.createIntersectionObserver(this);
|
|
|
- observer
|
|
|
- .relativeTo('.right-box', {
|
|
|
- top: 0,
|
|
|
- })
|
|
|
- .observe('#item' + index, res => {
|
|
|
- if (res.intersectionRatio > 0) {
|
|
|
- let id = res.id.substring(4);
|
|
|
- this.leftMenuStatus(id);
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 设置左边菜单的滚动状态
|
|
|
- * @index 传入的 ID
|
|
|
- */
|
|
|
- async leftMenuStatus(index) {
|
|
|
- this.current = index;
|
|
|
- // 如果为0，意味着尚未初始化
|
|
|
- if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
|
|
- await this.getElRect('menu-scroll-view', 'menuHeight');
|
|
|
- await this.getElRect('u-tab-item', 'menuItemHeight');
|
|
|
- }
|
|
|
- // 将菜单活动item垂直居中
|
|
|
- this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 点击左边的栏目切换
|
|
|
- * @index 传入的 ID
|
|
|
- */
|
|
|
- async swichMenu(index) {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.itemId = 'item' + index
|
|
|
- })
|
|
|
-
|
|
|
- if (this.arr.length == 0) {
|
|
|
- await this.getMenuItemTop();
|
|
|
- }
|
|
|
- if (index == this.current) return;
|
|
|
- this.scrollRightTop = this.oldScrollTop;
|
|
|
- this.$nextTick(function() {
|
|
|
- this.scrollRightTop = this.arr[index];
|
|
|
- this.current = index;
|
|
|
- this.leftMenuStatus(index);
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 右边菜单滚动
|
|
|
- * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
|
|
- */
|
|
|
- async rightScroll(e) {
|
|
|
- this.oldScrollTop = e.detail.scrollTop;
|
|
|
- if (this.arr.length == 0) {
|
|
|
- await this.getMenuItemTop();
|
|
|
- }
|
|
|
- if (this.timer) return;
|
|
|
- if (!this.menuHeight) {
|
|
|
- await this.getElRect('menu-scroll-view', 'menuHeight');
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- // 节流
|
|
|
- this.timer = null;
|
|
|
- // scrollHeight为右边菜单垂直中点位置
|
|
|
- // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
|
|
|
- // scrollHeight为右边菜单头部位置
|
|
|
- let scrollHeight = e.detail.scrollTop + 20;
|
|
|
- for (let i = 0; i < this.arr.length; i++) {
|
|
|
- let height1 = this.arr[i];
|
|
|
- let height2 = this.arr[i + 1];
|
|
|
- if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
|
|
|
- this.leftMenuStatus(i);
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- }, 10);
|
|
|
- },
|
|
|
-
|
|
|
- // 搜索按钮
|
|
|
- handlerSearchBtn() {
|
|
|
- console.log('search', this.search);
|
|
|
- this.getGoodsList()
|
|
|
- },
|
|
|
- // 切换tab
|
|
|
- handlerChangeTab(e) {
|
|
|
- if (e.index == 1) {
|
|
|
- this.delete_type = true;
|
|
|
- } else {
|
|
|
- this.delete_type = false;
|
|
|
- }
|
|
|
- this.getGoodsList()
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .top-box {
|
|
|
- padding: 0 0 20rpx;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .switch-box {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .search-box {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- width: 90%;
|
|
|
- margin: 20rpx auto 0;
|
|
|
-
|
|
|
- .btn {
|
|
|
- width: 160rpx;
|
|
|
- height: 70rpx;
|
|
|
- background-color: #5992bb;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- line-height: 70rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- border-radius: 30rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .u-wrap {
|
|
|
- /* #ifdef H5 */
|
|
|
- height: calc(100vh - var(--window-top));
|
|
|
- /* #endif */
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- height: 100vh;
|
|
|
- }
|
|
|
-
|
|
|
- .u-search-box {
|
|
|
- padding: 18rpx 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .u-menu-wrap {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .u-tab-view {
|
|
|
- width: 200rpx;
|
|
|
- background-color: #f6f6f6;
|
|
|
- }
|
|
|
-
|
|
|
- .u-tab-item {
|
|
|
- height: 110rpx;
|
|
|
- background: #f6f6f6;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #444;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 1;
|
|
|
- padding: 16rpx 0;
|
|
|
- }
|
|
|
-
|
|
|
- .u-tab-item-active {
|
|
|
- position: relative;
|
|
|
- color: #5f96be;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 500;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .u-tab-item-active::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- border-left: 4px solid #5f96be;
|
|
|
- height: 52rpx;
|
|
|
- left: 0;
|
|
|
- top: 29rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .u-tab-view {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .right-box {
|
|
|
- background-color: rgb(250, 250, 250);
|
|
|
- }
|
|
|
-
|
|
|
- .page-view {
|
|
|
- padding: 16rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .class-item,
|
|
|
- .class-item2 {
|
|
|
- margin-bottom: 30rpx;
|
|
|
- background-color: #fff;
|
|
|
- padding: 16rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .class-item2 {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .item-title {
|
|
|
- font-size: 26rpx;
|
|
|
- text-align: center;
|
|
|
- color: #5f96be;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .item-box {
|
|
|
- display: flex;
|
|
|
- margin-bottom: 10rpx;
|
|
|
-
|
|
|
- .item-l {
|
|
|
- border: 2rpx solid #eef0f0;
|
|
|
- border-radius: 20rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
-
|
|
|
- .l-img {
|
|
|
- width: 140rpx;
|
|
|
- height: 130rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-r {
|
|
|
-
|
|
|
- .p1,
|
|
|
- .type_p1 {
|
|
|
- width: 350rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #000;
|
|
|
- margin-bottom: 5rpx;
|
|
|
- overflow-x: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .type_p1 {
|
|
|
- width: 480rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .p2 {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #a4a5ad;
|
|
|
- }
|
|
|
-
|
|
|
- .p3 {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #d6534d;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-box {
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- height: 100rpx;
|
|
|
- border-top: 2rpx solid #f7f7f7;
|
|
|
- box-shadow: 0px 7px 10px 7px rgba(0, 0, 0, 0.1);
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- line-height: 100rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .u-input--radius.data-v-fdbb9fe6,
|
|
|
- .u-input--square.data-v-fdbb9fe6 {
|
|
|
- background-color: #f7f7f7 !important;
|
|
|
- padding: 40rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .ws2 {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2; //两行
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- height: 70rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .flex-c {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .gray-color {
|
|
|
- color: #a4a5ad
|
|
|
- }
|
|
|
-
|
|
|
- .mar-right-20 {
|
|
|
- margin-right: 20rpx;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .originalPrice {
|
|
|
- text-decoration: line-through
|
|
|
- }
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view class="u-wrap">
|
|
|
+ <view class="top-box">
|
|
|
+ <view class="switch-box">
|
|
|
+ <u-tabs :list="list1" lineWidth="30" lineColor="$uni-bg-color-primary" @click="handlerChangeTab"
|
|
|
+ :activeStyle="{
|
|
|
+ color: '#000',
|
|
|
+ fontSize: '28rpx',
|
|
|
+ transform: 'scale(1.05)',
|
|
|
+ marginBottom: '15rpx',
|
|
|
+ }" :inactiveStyle="{
|
|
|
+ color: '#333',
|
|
|
+ fontSize: '30rpx',
|
|
|
+ transform: 'scale(1)',
|
|
|
+ marginBottom: '15rpx',
|
|
|
+ }" itemStyle="width:50%;padding:0;margin:5px 0;"></u-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="search-box">
|
|
|
+ <u--input v-model="search" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
|
|
|
+ class="search-ipt" placeholder="请输入内容" border="surround" clearable></u--input>
|
|
|
+ <button class="btn" @click="handlerSearchBtn">搜索</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 在售中 -->
|
|
|
+ <view class="u-menu-wrap" v-if="delete_type == 0">
|
|
|
+ <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
|
|
|
+ :scroll-into-view="itemId">
|
|
|
+ <view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
|
|
|
+ :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
|
|
|
+ <text class="u-line-1">{{ item.name }}</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <scroll-view :scroll-top="scrollRightTop" :scroll-into-view="itemId" scroll-y scroll-with-animation
|
|
|
+ class="right-box" @scroll="rightScroll">
|
|
|
+ <view class="page-view">
|
|
|
+
|
|
|
+ <view class="" style="margin-top: 40rpx;" v-if="!tabbar.length">
|
|
|
+ <u-empty mode="search" iconColor="#dae2ef" width="100" height="100"
|
|
|
+ icon="https://cdn.uviewui.com/uview/demo/empty/search.png"
|
|
|
+ v-if="!tabbar.length&&search.length!=0">
|
|
|
+
|
|
|
+ </u-empty>
|
|
|
+ <u-empty mode="list" text="暂无商品" iconColor="#dae2ef" width="100" height="100"
|
|
|
+ icon="https://cdn.uviewui.com/uview/demo/empty/list.png" v-else-if="!tabbar.length">
|
|
|
+
|
|
|
+ </u-empty>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
|
|
|
+ <view class="item-title">
|
|
|
+ <text>{{ item.name }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-box" v-for="itm of item.children" :key="idx">
|
|
|
+ <view class="item-l">
|
|
|
+ <img class="l-img" :src="itm.logo" alt="" />
|
|
|
+ </view>
|
|
|
+ <view class="item-r">
|
|
|
+ <p class="p1">{{ itm.name }}</p>
|
|
|
+ <p class="p2 ws2 ">{{itm.description}}</p>
|
|
|
+ <view class=" flex-c">
|
|
|
+ <view class="mar-right-20 p3">
|
|
|
+ ￥{{itm.specialPrice}}起
|
|
|
+ </view>
|
|
|
+ <view class="gray-color originalPrice">
|
|
|
+ ￥{{itm.originalPrice}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 已下架 -->
|
|
|
+ <view class="u-menu-wrap" v-if="delete_type == 1">
|
|
|
+ <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
|
|
|
+ @scroll="rightScroll">
|
|
|
+ <view class="page-view">
|
|
|
+ <view class="" style="margin-top: 40rpx;" v-if="!rightTabbar.length">
|
|
|
+ <u-empty mode="search" iconColor="#dae2ef" width="100" height="100"
|
|
|
+ icon="https://cdn.uviewui.com/uview/demo/empty/search.png"
|
|
|
+ v-if="!rightTabbar.length&&search.length!=0">
|
|
|
+
|
|
|
+ </u-empty>
|
|
|
+ <u-empty mode="list" text="暂无下架商品" iconColor="#dae2ef" width="100" height="100"
|
|
|
+ icon="https://cdn.uviewui.com/uview/demo/empty/list.png" v-else-if="!rightTabbar.length">
|
|
|
+
|
|
|
+ </u-empty>
|
|
|
+ </view>
|
|
|
+ <view class="class-item2" :id="'item' + index" v-for="(item, index) in rightTabbar" :key="index">
|
|
|
+ <view class="item-box">
|
|
|
+ <u-checkbox-group>
|
|
|
+ <u-checkbox v-model="item.checked" shape="circle"
|
|
|
+ @change="checkeChange(item)"></u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
+ <view class="item-l">
|
|
|
+ <img class="l-img" src="@/static/QR57a.jpg" alt="" />
|
|
|
+ </view>
|
|
|
+ <view class="item-r">
|
|
|
+ <p class="p1">{{ item.name }}</p>
|
|
|
+ <p class="p2 ws2 ">{{item.description}}</p>
|
|
|
+ <view class=" flex-c">
|
|
|
+ <view class="mar-right-20 p3">
|
|
|
+ ￥{{item.specialPrice}}起
|
|
|
+ </view>
|
|
|
+ <view class="gray-color originalPrice">
|
|
|
+ ￥{{item.originalPrice}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-box" v-if="delete_type == 1">
|
|
|
+ <p @click="upStore">批量上架</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getGoodsList,
|
|
|
+ upGoods,
|
|
|
+ getCategories
|
|
|
+ } from '@/api/client/goods.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkboxValue1: [],
|
|
|
+ scrollTop: 0, //tab标题的滚动条位置
|
|
|
+ oldScrollTop: 0, // tab标题的滚动条旧位置
|
|
|
+ current: 0, // 预设当前项的值
|
|
|
+ menuHeight: 0, // 左边菜单的高度
|
|
|
+ menuItemHeight: 0, // 左边菜单item的高度
|
|
|
+ itemId: '', // 栏目右边scroll-view用于滚动的id
|
|
|
+ arr: [], // 储存距离顶部高度的数组
|
|
|
+ scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
|
|
+ timer: null, // 定时器
|
|
|
+ tabbar: [],
|
|
|
+ list1: [{
|
|
|
+ name: '在售中',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已下架',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ checked: false,
|
|
|
+ search: '',
|
|
|
+ delete_type: false,
|
|
|
+ rightTabbar: [], // 列表
|
|
|
+ };
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取一个目标元素的高度
|
|
|
+ * @elClass 元素的类名
|
|
|
+ * @dataVal 储存高度的对象
|
|
|
+ */
|
|
|
+ onReady() {
|
|
|
+ this.getMenuItemTop();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ delete_type(newValue) {
|
|
|
+ this.scrollRightTop = 0;
|
|
|
+ this.current = 0;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ merchantId() {
|
|
|
+ return this.$store.state.data.merchantInfo.merchant.id
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getGoodsList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ checkeChange(item) {
|
|
|
+ console.log(item.checked);
|
|
|
+ item.checked = !item.checked
|
|
|
+
|
|
|
+ },
|
|
|
+ deleteShop() {
|
|
|
+
|
|
|
+ },
|
|
|
+ async upStore() {
|
|
|
+ const ids = this.rightTabbar.filter(obj => obj.checked).map(item => item.id)
|
|
|
+ if (ids.length == 0) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请选择需要上架的商品'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const res = await upGoods(ids)
|
|
|
+ if (res.code == 'OK') {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '上架成功'
|
|
|
+ })
|
|
|
+ this.getGoodsList()
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '上架失败'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getGoodsList() {
|
|
|
+
|
|
|
+
|
|
|
+ getCategories(this.merchantId).then(res => {
|
|
|
+ if (res.code == 'OK') {
|
|
|
+ console.log(res, "这是res");
|
|
|
+ getGoodsList({
|
|
|
+ merchantId: this.merchantId,
|
|
|
+ size: 100,
|
|
|
+ goodsName: this.search,
|
|
|
+ status: this.delete_type ? 'OFFLINE' : 'ONLINE'
|
|
|
+ }).then(result => {
|
|
|
+ console.log(result, "这是result")
|
|
|
+ if (result.code == 'OK' && result.data && res.data) {
|
|
|
+ res.data.forEach(obj => {
|
|
|
+ result.data.forEach(item => {
|
|
|
+ if (obj.id == item.categoryId) {
|
|
|
+ obj.children.push(item)
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ })
|
|
|
+ console.log(res.data, "这是res.data")
|
|
|
+ this.tabbar = res.data
|
|
|
+
|
|
|
+ if (this.delete_type) {
|
|
|
+ this.rightTabbar = result.data.map(obj => {
|
|
|
+ return {
|
|
|
+ ...obj,
|
|
|
+ checked: false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.tabbar = []
|
|
|
+ this.rightTabbar = []
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.tabbar = []
|
|
|
+ this.rightTabbar = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ getElRect(elClass, dataVal) {
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query
|
|
|
+ .select('.' + elClass)
|
|
|
+ .fields({
|
|
|
+ size: true,
|
|
|
+ },
|
|
|
+ res => {
|
|
|
+ // 如果节点尚未生成，res值为null，循环调用执行
|
|
|
+ if (!res) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getElRect(elClass);
|
|
|
+ }, 10);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this[dataVal] = res.height;
|
|
|
+ resolve();
|
|
|
+ },
|
|
|
+ )
|
|
|
+ .exec();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ getMenuItemTop() {
|
|
|
+ new Promise(resolve => {
|
|
|
+ let selectorQuery = uni.createSelectorQuery();
|
|
|
+ selectorQuery
|
|
|
+ .selectAll('.class-item')
|
|
|
+ .boundingClientRect(rects => {
|
|
|
+ // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
|
|
+ if (!rects.length) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getMenuItemTop();
|
|
|
+ }, 10);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ rects.forEach(rect => {
|
|
|
+ // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
|
|
+ this.arr.push(rect.top - rects[0].top);
|
|
|
+ // this.arr.push(rect.top)
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 观测元素相交状态
|
|
|
+ * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
|
|
+ * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
|
|
+ */
|
|
|
+ async observer() {
|
|
|
+ this.tabbar.map((val, index) => {
|
|
|
+ let observer = uni.createIntersectionObserver(this);
|
|
|
+ observer
|
|
|
+ .relativeTo('.right-box', {
|
|
|
+ top: 0,
|
|
|
+ })
|
|
|
+ .observe('#item' + index, res => {
|
|
|
+ if (res.intersectionRatio > 0) {
|
|
|
+ let id = res.id.substring(4);
|
|
|
+ this.leftMenuStatus(id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 设置左边菜单的滚动状态
|
|
|
+ * @index 传入的 ID
|
|
|
+ */
|
|
|
+ async leftMenuStatus(index) {
|
|
|
+ this.current = index;
|
|
|
+ // 如果为0，意味着尚未初始化
|
|
|
+ if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
|
|
+ await this.getElRect('menu-scroll-view', 'menuHeight');
|
|
|
+ await this.getElRect('u-tab-item', 'menuItemHeight');
|
|
|
+ }
|
|
|
+ // 将菜单活动item垂直居中
|
|
|
+ this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击左边的栏目切换
|
|
|
+ * @index 传入的 ID
|
|
|
+ */
|
|
|
+ async swichMenu(index) {
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.itemId = 'item' + index
|
|
|
+ })
|
|
|
+
|
|
|
+ if (this.arr.length == 0) {
|
|
|
+ await this.getMenuItemTop();
|
|
|
+ }
|
|
|
+ if (index == this.current) return;
|
|
|
+ this.scrollRightTop = this.oldScrollTop;
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.scrollRightTop = this.arr[index];
|
|
|
+ this.current = index;
|
|
|
+ this.leftMenuStatus(index);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 右边菜单滚动
|
|
|
+ * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
|
|
+ */
|
|
|
+ async rightScroll(e) {
|
|
|
+ this.oldScrollTop = e.detail.scrollTop;
|
|
|
+ if (this.arr.length == 0) {
|
|
|
+ await this.getMenuItemTop();
|
|
|
+ }
|
|
|
+ if (this.timer) return;
|
|
|
+ if (!this.menuHeight) {
|
|
|
+ await this.getElRect('menu-scroll-view', 'menuHeight');
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ // 节流
|
|
|
+ this.timer = null;
|
|
|
+ // scrollHeight为右边菜单垂直中点位置
|
|
|
+ // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
|
|
|
+ // scrollHeight为右边菜单头部位置
|
|
|
+ let scrollHeight = e.detail.scrollTop + 20;
|
|
|
+ for (let i = 0; i < this.arr.length; i++) {
|
|
|
+ let height1 = this.arr[i];
|
|
|
+ let height2 = this.arr[i + 1];
|
|
|
+ if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
|
|
|
+ this.leftMenuStatus(i);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 10);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 搜索按钮
|
|
|
+ handlerSearchBtn() {
|
|
|
+ console.log('search', this.search);
|
|
|
+ this.getGoodsList()
|
|
|
+ },
|
|
|
+ // 切换tab
|
|
|
+ handlerChangeTab(e) {
|
|
|
+ if (e.index == 1) {
|
|
|
+ this.delete_type = true;
|
|
|
+ } else {
|
|
|
+ this.delete_type = false;
|
|
|
+ }
|
|
|
+ this.getGoodsList()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .top-box {
|
|
|
+ padding: 0 0 20rpx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .switch-box {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 90%;
|
|
|
+ margin: 20rpx auto 0;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ background-color: #5992bb;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-wrap {
|
|
|
+ /* #ifdef H5 */
|
|
|
+ height: calc(100vh - var(--window-top));
|
|
|
+ /* #endif */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-search-box {
|
|
|
+ padding: 18rpx 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-menu-wrap {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-tab-view {
|
|
|
+ width: 200rpx;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-tab-item {
|
|
|
+ height: 110rpx;
|
|
|
+ background: #f6f6f6;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #444;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 16rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-tab-item-active {
|
|
|
+ position: relative;
|
|
|
+ color: #5f96be;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-tab-item-active::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ border-left: 4px solid #5f96be;
|
|
|
+ height: 52rpx;
|
|
|
+ left: 0;
|
|
|
+ top: 29rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-tab-view {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ background-color: rgb(250, 250, 250);
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-view {
|
|
|
+ padding: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .class-item,
|
|
|
+ .class-item2 {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .class-item2 {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #5f96be;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .item-l {
|
|
|
+ border: 2rpx solid #eef0f0;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ .l-img {
|
|
|
+ width: 140rpx;
|
|
|
+ height: 130rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-r {
|
|
|
+
|
|
|
+ .p1,
|
|
|
+ .type_p1 {
|
|
|
+ width: 350rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #000;
|
|
|
+ margin-bottom: 5rpx;
|
|
|
+ overflow-x: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .type_p1 {
|
|
|
+ width: 480rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .p2 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #a4a5ad;
|
|
|
+ }
|
|
|
+
|
|
|
+ .p3 {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #d6534d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-box {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-top: 2rpx solid #f7f7f7;
|
|
|
+ box-shadow: 0px 7px 10px 7px rgba(0, 0, 0, 0.1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ line-height: 100rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .u-input--radius.data-v-fdbb9fe6,
|
|
|
+ .u-input--square.data-v-fdbb9fe6 {
|
|
|
+ background-color: #f7f7f7 !important;
|
|
|
+ padding: 40rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ws2 {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2; //两行
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ height: 70rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .flex-c {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gray-color {
|
|
|
+ color: #a4a5ad
|
|
|
+ }
|
|
|
+
|
|
|
+ .mar-right-20 {
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .originalPrice {
|
|
|
+ text-decoration: line-through
|
|
|
+ }
|
|
|
+</style>
|
