init
This commit is contained in:
323
pages_promotion/merch/detail.vue
Normal file
323
pages_promotion/merch/detail.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view class="content">
|
||||
<view class="head-wrap">
|
||||
<!-- 搜索区域 -->
|
||||
<view class="search-wrap uni-flex uni-row" style="margin-bottom: 20rpx;">
|
||||
|
||||
|
||||
<!-- <view class="flex-item input-wrap">
|
||||
<input class="uni-input" maxlength="50" v-model="keyword" @confirm="search()" placeholder="请输入您要搜索的商品" />
|
||||
<text class="iconfont icon-sousuo3" @click.stop="search()"></text>
|
||||
</view>
|
||||
<view class="iconfont" :class="{ 'icon-apps': isList, 'icon-list': !isList }" @click="changeListStyle()"></view> -->
|
||||
|
||||
<view style="width: 100rpx;height: 100rpx;">
|
||||
<image :src="$util.img(merch.merch_image)" mode="widthFix" style="width: 100rpx;height: 100rpx;" />
|
||||
</view>
|
||||
<view style="margin-left: 20rpx;padding-top: 22rpx;">
|
||||
<view style="line-height: 1;font-size: 32rpx;font-weight: 600;">{{merch.merch_name}}</view>
|
||||
<view style="color:rgb(255 202 40)">
|
||||
<text class="icox icox-xing"></text>
|
||||
<text class="icox icox-xing"></text>
|
||||
<text class="icox icox-xing"></text>
|
||||
<text class="icox icox-xing"></text>
|
||||
<text class="icox icox-xing"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 排序 -->
|
||||
<view class="sort-wrap">
|
||||
<view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }" @click="sortTabClick('')">
|
||||
<text :class="{ 'color-base-text': orderType === '' }">综合</text>
|
||||
</view>
|
||||
|
||||
<view :class="{ 'color-base-text': orderType === 'sale_num' }" @click="sortTabClick('sale_num')">销量
|
||||
</view>
|
||||
|
||||
<view class="price-wrap" @click="sortTabClick('discount_price')">
|
||||
<text :class="{ 'color-base-text': orderType === 'discount_price' }">价格</text>
|
||||
<view class="iconfont-wrap">
|
||||
<view class="iconfont icon-iconangledown-copy asc" :class="{ 'color-base-text': priceOrder === 'asc' && orderType === 'discount_price' }"></view>
|
||||
<view class="iconfont icon-iconangledown desc" :class="{ 'color-base-text': priceOrder === 'desc' && orderType === 'discount_price' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view :class="{ 'color-base-text': orderType === 'screen' }" class="screen-wrap">
|
||||
<text @click="sortTabClick('screen')">筛选</text>
|
||||
<view @click="sortTabClick('screen')" class="iconfont-wrap">
|
||||
<view class="iconfont icon-shaixuan color-tip"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<mescroll-uni top="240" ref="mescroll" @getData="getGoodsList">
|
||||
<block slot="list">
|
||||
<view class="goods-list single-column" :class="{ show: isList }">
|
||||
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
|
||||
<view class="goods-img">
|
||||
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"></image>
|
||||
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
|
||||
<view class="sell-out" v-if="item.stock <= 0">
|
||||
<text class="iconfont icon-shuqing"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
<view class="name-wrap">
|
||||
<view class="goods-name" :class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="lineheight-clear">
|
||||
<view class="discount-price" v-if="item.isinformation == 0">
|
||||
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="discount-price" v-else>
|
||||
<text class="price price-style large">咨询</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
|
||||
<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pro-info" v-if="item.isinformation == 0">
|
||||
<view class="delete-price color-tip price-font" v-if="showMarketPrice(item)">
|
||||
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text>{{ showMarketPrice(item) }}</text>
|
||||
</view>
|
||||
<view class="block-wrap">
|
||||
<view class="sale color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
|
||||
</view>
|
||||
<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
|
||||
<!-- 购物车图标 -->
|
||||
<view v-if="config.style == 'icon-cart'" :style="{
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
borderColor: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
|
||||
<!--加号图标 -->
|
||||
<view v-else-if="config.style == 'icon-add'" :style="{
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
borderColor: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<view v-else-if="config.style == 'button'" :style="{
|
||||
backgroundColor: config.theme == 'diy' ? config.bgColor : '',
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
|
||||
padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
|
||||
}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
{{ config.text }}
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
|
||||
<!--自定义图标 -->
|
||||
<view v-else-if="config.style == 'icon-diy'" :style="{
|
||||
color: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="icon-diy click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
<view class="click-event"></view>
|
||||
<diy-icon :icon="config.iconDiy.icon" :value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-list double-column" :class="{ show: !isList }">
|
||||
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index"
|
||||
@click="toDetail(item)" :style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }">
|
||||
<view class="goods-img">
|
||||
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"></image>
|
||||
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
|
||||
<view class="sell-out" v-if="item.stock <= 0">
|
||||
<text class="iconfont icon-shuqing"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-wrap">
|
||||
<view class="goods-name" :class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
|
||||
<view class="lineheight-clear">
|
||||
<view class="discount-price" v-if="item.isinformation == 0">
|
||||
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
|
||||
<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="discount-price" v-else>
|
||||
<text class="price price-style large">咨询</text>
|
||||
</view>
|
||||
<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
|
||||
<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
|
||||
<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="delete-price color-tip price-font" v-if="showMarketPrice(item)">
|
||||
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text>{{ showMarketPrice(item) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pro-info" v-if="item.isinformation == 0">
|
||||
<view class="block-wrap" >
|
||||
<view class="sale color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
|
||||
</view>
|
||||
<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
|
||||
<!-- 购物车图标 -->
|
||||
<view v-if="config.style == 'icon-cart'" :style="{
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
borderColor: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
|
||||
<!--加号图标 -->
|
||||
<view v-else-if="config.style == 'icon-add'" :style="{
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
borderColor: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<view v-else-if="config.style == 'button'" :style="{
|
||||
backgroundColor: config.theme == 'diy' ? config.bgColor : '',
|
||||
color: config.theme == 'diy' ? config.textColor : '',
|
||||
fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
|
||||
padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
|
||||
}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
{{ config.text }}
|
||||
<view class="click-event"></view>
|
||||
</view>
|
||||
|
||||
<!--自定义图标 -->
|
||||
<view v-else-if="config.style == 'icon-diy'" :style="{
|
||||
color: config.theme == 'diy' ? config.textColor : ''
|
||||
}" class="icon-diy click-wrap" :id="'goods-' + item.id"
|
||||
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
|
||||
<view class="click-event"></view>
|
||||
<diy-icon :icon="config.iconDiy.icon" :value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="goodsList.length == 0 && emptyShow"><ns-empty text="暂无商品"></ns-empty></view>
|
||||
</block>
|
||||
</mescroll-uni>
|
||||
|
||||
<ns-goods-sku-index ref="goodsSkuIndex" @addCart="addCart"></ns-goods-sku-index>
|
||||
|
||||
<!-- 筛选弹出框 -->
|
||||
<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
|
||||
<view class="title color-tip">筛选</view>
|
||||
<scroll-view scroll-y>
|
||||
<!-- 包邮 -->
|
||||
<!-- <view class="item-wrap">
|
||||
<view class="label"><text>是否包邮</text></view>
|
||||
<view class="list">
|
||||
<uni-tag :inverted="true" text="包邮" :type="isFreeShipping ? 'primary' : 'default'" @click="isFreeShipping = !isFreeShipping" />
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 价格筛选项 -->
|
||||
<!-- <view class="item-wrap">
|
||||
<view class="label"><text>价格区间(元)</text></view>
|
||||
<view class="price-wrap">
|
||||
<input class="uni-input" type="digit" v-model="minPrice" placeholder="最低价" />
|
||||
<view class="h-line"></view>
|
||||
<input class="uni-input" type="digit" v-model="maxPrice" placeholder="最高价" />
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 品牌筛选项 -->
|
||||
<!-- <view class="item-wrap" v-if="brandList.length > 0">
|
||||
<view class="label"><text>品牌</text></view>
|
||||
<view class="list">
|
||||
<view v-for="(item, index) in brandList" :key="index">
|
||||
<uni-tag :inverted="true" :text="item.brand_name" :type="item.brand_id == brandId ? 'primary' : 'default'" @click="brandId == item.brand_id ? (brandId = 0) : (brandId = item.brand_id)" />
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 分类筛选项 -->
|
||||
<view class="category-list-wrap">
|
||||
<text class="first">全部分类</text>
|
||||
<view class="class-box">
|
||||
<view @click="selectedCategory('')" class="list-wrap">
|
||||
<text :class="{ selected: !categoryId, 'color-base-text': !categoryId }">全部</text>
|
||||
</view>
|
||||
<view @click="selectedCategory(item.category_id)" v-for="(item, index) in categoryList" :key="index" class="list-wrap">
|
||||
<text :class="{ selected: item.category_id == categoryId, 'color-base-text': item.category_id == categoryId }">{{ item.category_name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="footer" :class="{ 'safe-area': isIphoneX }">
|
||||
<button type="default" class="footer-box" @click="resetData">重置</button>
|
||||
<button type="primary" class="footer-box1" @click="screenData">确定</button>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- 小程序隐私协议 -->
|
||||
<privacy-popup ref="privacyPopup"></privacy-popup>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
|
||||
import uniTag from '@/components/uni-tag/uni-tag.vue';
|
||||
import nsGoodsSkuIndex from '@/components/ns-goods-sku/ns-goods-sku-index.vue';
|
||||
import list from './public/js/list.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniDrawer,
|
||||
uniTag,
|
||||
nsGoodsSkuIndex
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mixins: [list]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './public/css/list.scss';
|
||||
</style>
|
||||
<style scoped>
|
||||
>>>.uni-tag--primary.uni-tag--inverted {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
||||
max-height: unset !important;
|
||||
}
|
||||
</style>
|
||||
266
pages_promotion/merch/merchcategory.vue
Normal file
266
pages_promotion/merch/merchcategory.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view class="category-page-wrap category-template-1" style="height: calc(-56px + 100vh);">
|
||||
|
||||
<!-- <view class="search-box" @click="$util.redirectTo('/pages_tool/goods/search')">
|
||||
<view class="search-content">
|
||||
<input type="text" class="uni-input" maxlength="50" placeholder="商品搜索" confirm-type="search" disabled="true" />
|
||||
<text class="iconfont icon-sousuo3"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="content-box" v-if="categoryTree">
|
||||
<block v-if="categoryTree.length">
|
||||
<scroll-view scroll-y="true" class="tree-wrap">
|
||||
<view class="category-item-wrap">
|
||||
<view class="category-item" v-for="(item, index) in categoryTree" :key="index" :class="[
|
||||
{ select: select == index },
|
||||
]" @click="switchOneCategory(index)">
|
||||
<view class="">{{ item.category_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="right-flex-wrap">
|
||||
<scroll-view scroll-y="true" class="content-wrap" ref="contentWrap" :scroll-into-view="categoryId" :scroll-with-animation="true"
|
||||
@scroll="listenScroll" @touchstart="touchStart" :refresher-enabled="true"
|
||||
refresher-default-style="none" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
|
||||
@refresherrestore="onRestore">
|
||||
<view class="child-category" v-for="(item, index) in categoryTree" :id="'category-' + index" v-if="item.child_list.length > 0">
|
||||
<!---->
|
||||
<view class="item-wrap category">
|
||||
<view class="category-title">{{ item.category_name }}</view>
|
||||
<view class="category-list">
|
||||
<view class="category-item" v-for="(one, oneIndex) in item.child_list" :key="oneIndex" @click="$util.redirectTo('/pages_promotion/merch/detail', { merch_id: one.merch_id })">
|
||||
<view class="img-box">
|
||||
<image :src="$util.img(one.merch_image)" mode="widthFix"/>
|
||||
</view>
|
||||
<view class="name">{{ one.merch_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="category-empty" v-else>
|
||||
<image src="/static/common-empty.png" mode="widthFix"/>
|
||||
</view> -->
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- <view class="category-empty">
|
||||
<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix"></image>
|
||||
<view class="tips">暂时没有分类哦!</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<ns-login ref="login"></ns-login>
|
||||
<!-- <loading-cover ref="loadingCover"></loading-cover> -->
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
|
||||
select: 0,
|
||||
categoryId: 'category-0',
|
||||
scrollLock: false,
|
||||
triggered: true,
|
||||
heightArea: [],
|
||||
loadType: '',
|
||||
categoryTree:[
|
||||
/*{
|
||||
category_id:6277,
|
||||
category_name:"物业",
|
||||
child_list:[
|
||||
{
|
||||
category_id:6572,
|
||||
category_name:"鞋里革",
|
||||
image:"attachment\/images\/979\/2024\/04\/y46Gg41i552o9iq9249295oz991444.jpg",
|
||||
}
|
||||
]
|
||||
},*/
|
||||
|
||||
],
|
||||
user_type:uni.getStorageSync('user_type')
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
uni.hideTabBar()
|
||||
this.getCategory()
|
||||
// this.getgoodslist()
|
||||
},
|
||||
onShow() {
|
||||
if (this.$refs.category) this.$refs.category[0].pageShow();
|
||||
},
|
||||
onUnload() {
|
||||
if (!this.storeToken && this.$refs.login) this.$refs.login.cancelCompleteInfo();
|
||||
},
|
||||
methods: {
|
||||
switchOnetype(e){
|
||||
this.goods_type = e
|
||||
this.select = -1;
|
||||
this.categoryId = ''
|
||||
this.getgoodslist()
|
||||
},
|
||||
/**
|
||||
* 切换一级分类
|
||||
* @param {Object} index
|
||||
*/
|
||||
switchOneCategory(index) {
|
||||
|
||||
if (index >= this.categoryTree.length) return;
|
||||
this.select = index;
|
||||
this.categoryId = 'category-' + index;
|
||||
// 阻止切换分类之后滚动事件也立即执行
|
||||
this.scrollLock = true;
|
||||
console.log(index)
|
||||
|
||||
// this.goodsList = []
|
||||
// this.getgoodslist()
|
||||
},
|
||||
touchStart() {
|
||||
this.scrollLock = false;
|
||||
},
|
||||
/**
|
||||
* 监听滚动
|
||||
* @param {Object} event
|
||||
*/
|
||||
listenScroll(event) {
|
||||
if (this.scrollLock) return;
|
||||
let scrollTop = event.detail.scrollTop;
|
||||
if (this.heightArea.length) {
|
||||
for (let i = 0; i < this.heightArea.length; i++) {
|
||||
if (scrollTop >= this.heightArea[i][0] && scrollTop <= this.heightArea[i][1]) {
|
||||
this.select = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (this.value.template != 1 && this.value.loadType == 'all' && this.heightArea[this.select][1] -
|
||||
scrollTop - contentWrapHeight < 300) {
|
||||
this.$refs.categoryItem[this.select].getGoodsList();
|
||||
}
|
||||
}
|
||||
},
|
||||
sethead(item,type){
|
||||
var is_select = item.is_select
|
||||
this.$api.sendRequest({
|
||||
url: 'app.ajax_batchheads',
|
||||
data: {
|
||||
goods_id:item.actId,
|
||||
is_select:is_select
|
||||
},
|
||||
success: res => {
|
||||
this.$util.showToast({
|
||||
title: res.result.message
|
||||
});
|
||||
this.getgoodslist()
|
||||
},
|
||||
fail: () => {
|
||||
this.$util.showToast({
|
||||
title: 'request:fail'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//获取分类列表
|
||||
getCategory(){
|
||||
this.$api.sendRequest({
|
||||
url: '/merch/api/merch/getcategory',
|
||||
data: {
|
||||
is_type_show:1,
|
||||
},
|
||||
success: res => {
|
||||
console.log( res.data)
|
||||
this.categoryTree = res.data
|
||||
},
|
||||
fail: () => {
|
||||
this.$util.showToast({
|
||||
title: 'request:fail'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
onRefresh() {
|
||||
this.triggered = false;
|
||||
},
|
||||
onRestore() {
|
||||
this.triggered = 'restore'; // 需要重置
|
||||
},
|
||||
/**
|
||||
* 触摸开始
|
||||
* @param {Object} e
|
||||
*/
|
||||
// touchstart(e) {
|
||||
// this.touchstartPosition = e.changedTouches[0].clientY;
|
||||
// },
|
||||
/**
|
||||
* 触摸结束
|
||||
* @param {Object} e
|
||||
*/
|
||||
touchend(e) {
|
||||
let end = e.changedTouches[0].clientY;
|
||||
if ((this.scrollType == 'top' || this.scrollType == 'none') && end - this.touchstartPosition > 100) {
|
||||
// this.switchCategory('prev');
|
||||
} else if ((this.scrollType == 'bottom' || this.scrollType == 'none') && this.touchstartPosition - end >
|
||||
100) {
|
||||
// this.switchCategory('next');
|
||||
}
|
||||
},
|
||||
getDiyInfo() {
|
||||
|
||||
},
|
||||
toLogin() {
|
||||
this.$refs.login.open('/pages/goods/category')
|
||||
}
|
||||
},
|
||||
// onPullDownRefresh() {
|
||||
// uni.hideTabBar();
|
||||
// this.getDiyInfo();
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './public/category.scss';
|
||||
|
||||
/deep/ .uni-popup__wrapper.uni-center {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/deep/ .uni-popup__wrapper-box {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
/deep/ .loading-layer {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
// 分类四一级展开
|
||||
/deep/ .category-template-4 .template-four .uni-popup__wrapper-box {
|
||||
border-radius: 0px 0px 14px 14px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/deep/ .category-template-4 .content-wrap .categoty-goods-wrap .goods-list {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
/deep/ .category-template-4 .content-wrap .goods-list .goods-item .footer-wrap .right-wrap .num-action {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
|
||||
/deep/ .uni-page-refresh-inner .uni-page-refresh__path {
|
||||
stroke: rgb(1, 1, 1) !important;
|
||||
}
|
||||
</style>
|
||||
929
pages_promotion/merch/public/category.scss
Normal file
929
pages_promotion/merch/public/category.scss
Normal file
@@ -0,0 +1,929 @@
|
||||
|
||||
.category-page-wrap {
|
||||
width: 100vw;
|
||||
// height: calc(100vh - var(--tab-bar-height, 0));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
display: flex;
|
||||
|
||||
.tree-wrap {
|
||||
width: 170rpx;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.right-flex-wrap {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background: #f4f6fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translateX(0px);
|
||||
|
||||
.content-wrap {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.child-category-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tree-wrap .category-item-wrap {
|
||||
height: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tree-wrap .category-item {
|
||||
line-height: 1.5;
|
||||
padding: 26rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
view {
|
||||
color: #222222;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.border-top {
|
||||
border-bottom-right-radius: 12rpx;
|
||||
}
|
||||
|
||||
&.border-bottom {
|
||||
border-top-right-radius: 12rpx;
|
||||
}
|
||||
|
||||
&.select {
|
||||
background: #fff;
|
||||
|
||||
view {
|
||||
color: $base-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
width: 8rpx;
|
||||
height: 34rpx;
|
||||
background: var(--base-color);
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
|
||||
.search-content {
|
||||
position: relative;
|
||||
/* #ifndef MP-WEIXIN */
|
||||
height: 64rpx;
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
border-radius: 40rpx;
|
||||
flex: 1;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 20rpx 0 40rpx;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10rpx;
|
||||
transform: translateY(-50%);
|
||||
font-size: $font-size-toolbar;
|
||||
z-index: 10;
|
||||
color: #89899a;
|
||||
width: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-box {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cart-icon {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
position: relative;
|
||||
|
||||
.iconfont {
|
||||
color: var(--btn-text-color);
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background-color: $base-color;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.num {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(60%, 0);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
padding: 0 6rpx;
|
||||
min-width: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: var(--price-color);
|
||||
border: 2rpx solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-left: 30rpx;
|
||||
|
||||
.title {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.money,
|
||||
.unit {
|
||||
font-weight: bold;
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
|
||||
.settlement-btn {
|
||||
margin: 0 0 0 20rpx;
|
||||
width: 200rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 50rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-point {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
background: #f00;
|
||||
border-radius: 50%;
|
||||
transition: all 0.05s;
|
||||
}
|
||||
|
||||
.category-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 380rpx;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.end-tips {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
padding: 20rpx 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// 风格四
|
||||
.category-template-4 {
|
||||
.search-box {
|
||||
.search-content input {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/deep/ .template-four {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.template-four-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 80rpx;
|
||||
padding-bottom: 10rpx;
|
||||
display: flex;
|
||||
height: 172rpx;
|
||||
align-items: baseline;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 4rpx 4rpx rgba(123, 123, 123, 0.1);
|
||||
}
|
||||
|
||||
.template-four-popup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
line-height: 1;
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.template-four-scroll {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
align-content: baseline;
|
||||
padding: 20rpx;
|
||||
white-space: nowrap;
|
||||
height: 380rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.uni-scroll-view-content {
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
align-content: baseline;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 4rpx 0;
|
||||
color: #666;
|
||||
margin-right: 16rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-bottom: 10rpx;
|
||||
width: calc((100% - 64rpx) / 5);
|
||||
|
||||
&:nth-child(5n + 5) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.image-warp {
|
||||
margin-bottom: 6rpx;
|
||||
padding: 4rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 42rpx;
|
||||
border: 4rpx solid transparent;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 2rpx 16rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.text {
|
||||
background-color: $base-color;
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pack-up {
|
||||
font-size: $font-size-tag;
|
||||
color: #888888;
|
||||
height: 74rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 2rpx solid #f2f2f2;
|
||||
|
||||
.iconfont {
|
||||
font-size: 40rpx;
|
||||
margin-left: -4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-item-all {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 72rpx;
|
||||
line-height: 1;
|
||||
background-color: #fff;
|
||||
|
||||
.category-item-all-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.text {
|
||||
writing-mode: tb-rl;
|
||||
margin-bottom: 6rpx;
|
||||
letter-spacing: 4rpx;
|
||||
font-size: $font-size-tag;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
// box-shadow: -4rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 10rpx;
|
||||
// height: 100rpx;
|
||||
top: 20%;
|
||||
bottom: 20%;
|
||||
// transform: translateY(-50%);
|
||||
// background-color: #F0F5FF;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-scroll-view-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 130rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
padding: 4rpx 0;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.image-warp {
|
||||
margin-bottom: 6rpx;
|
||||
padding: 4rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 42rpx;
|
||||
border: 4rpx solid transparent;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
.text {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 40rpx;
|
||||
color: #fff;
|
||||
font-size: $font-size-tag;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrap .categoty-goods-wrap .goods-list {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.tree-wrap .category-item.select::before {
|
||||
border-top-right-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*商品部分*/
|
||||
.item-wrap {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
// padding: 0 24rpx;
|
||||
// padding-bottom: 80rpx;
|
||||
&.goods {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.category-title {
|
||||
padding: 20rpx 0;
|
||||
font-size: 26rpx;
|
||||
// font-weight: bold;
|
||||
color: #222;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding-left: 30rpx;
|
||||
// &::after,
|
||||
// &::before {
|
||||
// content: ' ';
|
||||
// width: 46rpx;
|
||||
// border-top: 2rpx solid #dfdfdf;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// }
|
||||
|
||||
&::after {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-left: -80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.category-adv {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
padding: 20rpx 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.category-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: #fff;
|
||||
margin: 0 20rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.category-item {
|
||||
width: 33.33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.img-box {
|
||||
width: 80%;
|
||||
padding-top: 80%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
.goods-item {
|
||||
padding: 0 0 26rpx 0;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.goods-img {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
overflow: hidden;
|
||||
border-radius: $border-radius;
|
||||
margin-right: 14rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-tag {
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
padding: 8rpx 12rpx;
|
||||
position: absolute;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: $font-size-goods-tag;
|
||||
}
|
||||
|
||||
.goods-tag-img {
|
||||
position: absolute;
|
||||
border-top-left-radius: $border-radius;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
top: 26rpx;
|
||||
left: 26rpx;
|
||||
z-index: 5;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.name-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.introduction {
|
||||
line-height: 1;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin-top: 16rpx;
|
||||
color: var(--price-color);
|
||||
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pro-info {
|
||||
display: flex;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.delete-price {
|
||||
text-decoration: line-through;
|
||||
flex: 1;
|
||||
|
||||
.unit {
|
||||
margin-right: 0rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&>view {
|
||||
line-height: 1;
|
||||
|
||||
&:nth-child(2) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.member-price-tag {
|
||||
display: inline-block;
|
||||
width: 60rpx;
|
||||
line-height: 1;
|
||||
margin-left: 6rpx;
|
||||
height: 28rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.right-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
|
||||
.num {
|
||||
width: auto;
|
||||
padding: 0 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.num-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: $base-color;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
.click-event {
|
||||
position: absolute;
|
||||
width: 2rpx;
|
||||
height: 2rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&.reduce {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
background-color: transparent;
|
||||
border: 2rpx solid $base-color;
|
||||
box-sizing: border-box;
|
||||
|
||||
.icon-jian {
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-jian,
|
||||
.icon-jia {
|
||||
color: var(--btn-text-color);
|
||||
font-weight: bold;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.select-sku {
|
||||
font-weight: bold;
|
||||
color: var(--btn-text-color);
|
||||
font-size: 24rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
position: relative;
|
||||
// height: 40rpx;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
border-radius: 50rpx;
|
||||
|
||||
.num-tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
padding: 0 6rpx;
|
||||
min-width: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: $base-color;
|
||||
border: 2rpx solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-template='3'] .goods-item {
|
||||
flex-direction: column;
|
||||
|
||||
.info-wrap {
|
||||
width: 100%;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-right: 0;
|
||||
line-height: 1;
|
||||
|
||||
image {
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.select-sku {
|
||||
font-weight: bold;
|
||||
width: 128rpx;
|
||||
height: 52rpx !important;
|
||||
line-height: 52rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.categoty-goods-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.scroll-goods-view {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.screen-category-wrap {
|
||||
display: flex;
|
||||
|
||||
.icon-unfold {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding: 0 0 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.screen-category {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
padding: 0 0 20rpx 0;
|
||||
white-space: nowrap;
|
||||
height: 60rpx;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
padding: 4rpx 24rpx;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 40rpx;
|
||||
|
||||
&.selected {
|
||||
background-color: $base-color;
|
||||
color: var(--btn-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .uni-popup__wrapper-box {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.screen-category-popup {
|
||||
display: flex;
|
||||
|
||||
.screen-category {
|
||||
white-space: break-spaces;
|
||||
padding: 20rpx;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 1;
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.end-tips {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
padding: 30rpx 0 30rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/deep/ .loading-layer {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.category-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-top: 100rpx;
|
||||
|
||||
image {
|
||||
width: 280rpx;
|
||||
height: 252rpx;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.screen-category-4 .item {
|
||||
background-color: #f2f2f2 !important;
|
||||
padding: 10rpx 24rpx;
|
||||
line-height: 1;
|
||||
font-size: $font-size-tag;
|
||||
|
||||
&.selected {
|
||||
background-color: var(--main-color-shallow) !important;
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
|
||||
647
pages_promotion/merch/public/css/list.scss
Normal file
647
pages_promotion/merch/public/css/list.scss
Normal file
@@ -0,0 +1,647 @@
|
||||
.head-wrap {
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
.search-wrap {
|
||||
flex: 0.5;
|
||||
padding: 30rpx 30rpx 0;
|
||||
font-size: $font-size-tag;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.iconfont {
|
||||
margin-left: 16rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.input-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: $color-bg;
|
||||
height: 64rpx;
|
||||
padding-left: 10rpx;
|
||||
border-radius: 70rpx;
|
||||
input {
|
||||
width: 90%;
|
||||
background: $color-bg;
|
||||
font-size: $font-size-tag;
|
||||
height: 100%;
|
||||
padding: 0 25rpx 0 40rpx;
|
||||
line-height: 50rpx;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
text {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $color-tip;
|
||||
width: 80rpx;
|
||||
text-align: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.category-wrap,
|
||||
.list-style {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
color: $color-tip;
|
||||
}
|
||||
text {
|
||||
display: block;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sort-wrap {
|
||||
display: flex;
|
||||
padding: 10rpx 20rpx 10rpx 0;
|
||||
> view {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: $font-size-base;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.comprehensive-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.iconfont-wrap {
|
||||
display: inline-block;
|
||||
margin-left: 10rpx;
|
||||
width: 40rpx;
|
||||
.iconfont {
|
||||
font-size: $font-size-toolbar;
|
||||
line-height: 1;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.price-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.iconfont-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 40rpx;
|
||||
.iconfont {
|
||||
position: relative;
|
||||
float: left;
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
height: 20rpx;
|
||||
color: #909399;
|
||||
&.asc {
|
||||
top: -2rpx;
|
||||
}
|
||||
&.desc {
|
||||
top: -6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.screen-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.iconfont-wrap {
|
||||
display: inline-block;
|
||||
margin-left: 10rpx;
|
||||
width: 40rpx;
|
||||
.iconfont {
|
||||
font-size: $font-size-toolbar;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-list-wrap {
|
||||
height: 100%;
|
||||
.class-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 $padding;
|
||||
view {
|
||||
width: calc((100% - 60rpx) / 3);
|
||||
font-size: $font-size-goods-tag;
|
||||
margin-right: 20rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 12rpx;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background: rgba(245, 245, 245, 1);
|
||||
border-radius: 5rpx;
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.first {
|
||||
font-size: $font-size-tag;
|
||||
display: block;
|
||||
// background: $page-color-base;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.second {
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
padding: 20rpx;
|
||||
display: block;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
.third {
|
||||
padding: 0 20rpx 20rpx;
|
||||
overflow: hidden;
|
||||
font-size: $font-size-tag;
|
||||
> view {
|
||||
display: inline-block;
|
||||
margin-right: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.uni-tag {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screen-wrap {
|
||||
.title {
|
||||
font-size: $font-size-tag;
|
||||
padding: $padding;
|
||||
background: #f6f4f5;
|
||||
}
|
||||
scroll-view {
|
||||
height: 85%;
|
||||
.item-wrap {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
.label {
|
||||
font-size: $font-size-tag;
|
||||
padding: $padding;
|
||||
view {
|
||||
display: inline-block;
|
||||
font-size: 60rpx;
|
||||
height: 40rpx;
|
||||
vertical-align: middle;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: $margin-updown $margin-both;
|
||||
overflow: hidden;
|
||||
> view {
|
||||
display: inline-block;
|
||||
margin-right: 25rpx;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
.uni-tag {
|
||||
padding: 0 $padding;
|
||||
font-size: $font-size-goods-tag;
|
||||
background: #f5f5f5;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.price-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $padding;
|
||||
input {
|
||||
flex: 1;
|
||||
background: #f5f5f5;
|
||||
height: 52rpx;
|
||||
width: 182rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: $font-size-goods-tag;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
&:last-child {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
//position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
.footer-box {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin: 0;
|
||||
width: 40%;
|
||||
}
|
||||
.footer-box1 {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
margin: 0;
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.safe-area {
|
||||
bottom: 68rpx !important;
|
||||
}
|
||||
.empty {
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
.buy-num {
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
.icon {
|
||||
width: 34rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
.list-style-new {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.line {
|
||||
width: 4rpx;
|
||||
height: 28rpx;
|
||||
background-color: rgba(227, 227, 227, 1);
|
||||
margin-right: 60rpx;
|
||||
}
|
||||
}
|
||||
.h-line {
|
||||
width: 37rpx;
|
||||
height: 2rpx;
|
||||
background-color: $color-tip;
|
||||
}
|
||||
|
||||
.lineheight-clear {
|
||||
}
|
||||
|
||||
// 商品列表单列样式
|
||||
.goods-list.single-column {
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
padding: 26rpx;
|
||||
background: #fff;
|
||||
margin: $margin-updown $margin-both;
|
||||
border-radius: $border-radius;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.goods-img {
|
||||
position: relative;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
// overflow: hidden;
|
||||
border-radius: $border-radius;
|
||||
margin-right: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-tag {
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
padding: 8rpx 12rpx;
|
||||
position: absolute;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: $font-size-goods-tag;
|
||||
}
|
||||
|
||||
.goods-tag-img {
|
||||
position: absolute;
|
||||
border-top-left-radius: $border-radius;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
top: 26rpx;
|
||||
left: 26rpx;
|
||||
z-index: 5;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.introduction {
|
||||
line-height: 1;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
color: var(--price-color);
|
||||
}
|
||||
.price {
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
|
||||
.pro-info {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.delete-price {
|
||||
text-decoration: line-through;
|
||||
font-size: $font-size-tag !important;
|
||||
flex: 1;
|
||||
|
||||
.unit {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.block-wrap {
|
||||
flex: 1;
|
||||
line-height: 1;
|
||||
margin-right: 20rpx;
|
||||
.sale {
|
||||
font-size: $font-size-tag !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.member-price-tag {
|
||||
display: inline-block;
|
||||
width: 60rpx;
|
||||
line-height: 1;
|
||||
margin-left: 6rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
max-height: 30rpx;
|
||||
}
|
||||
}
|
||||
.sell-out{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
text{
|
||||
color: #fff;
|
||||
font-size: 150rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 商品列表双列样式
|
||||
.goods-list.double-column {
|
||||
display: none;
|
||||
margin: 0 24rpx;
|
||||
padding-top: $margin-updown;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
&.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(50% - 10rpx);
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
|
||||
&:nth-child(2n + 2) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 100%;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
position: absolute !important;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.goods-tag {
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
padding: 8rpx 16rpx;
|
||||
position: absolute;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: $font-size-goods-tag;
|
||||
}
|
||||
|
||||
.goods-tag-img {
|
||||
position: absolute;
|
||||
border-top-left-radius: $border-radius;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.lineheight-clear {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
color: var(--price-color);
|
||||
}
|
||||
.price {
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
|
||||
.pro-info {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
align-items: center;
|
||||
|
||||
.block-wrap {
|
||||
flex: 1;
|
||||
line-height: 1;
|
||||
margin-right: 20rpx;
|
||||
.sale {
|
||||
font-size: $font-size-tag !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-price {
|
||||
// display: inline-block;
|
||||
// margin-left: 6rpx;
|
||||
// float: right;
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
text {
|
||||
line-height: 1;
|
||||
font-size: $font-size-tag !important;
|
||||
}
|
||||
}
|
||||
|
||||
.member-price-tag {
|
||||
display: inline-block;
|
||||
width: 60rpx;
|
||||
line-height: 1;
|
||||
margin-left: 6rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sell-out{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
text{
|
||||
color: #fff;
|
||||
font-size: 250rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-action-wrap {
|
||||
position: relative;
|
||||
|
||||
.shopping-cart-btn {
|
||||
font-size: 36rpx;
|
||||
border: 2rpx solid $base-color;
|
||||
border-radius: 50%;
|
||||
padding: 10rpx;
|
||||
color: $base-color;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
text-align: center;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.plus-sign-btn {
|
||||
font-size: 36rpx;
|
||||
border: 2rpx solid $base-color;
|
||||
border-radius: 50%;
|
||||
padding: 10rpx;
|
||||
color: $base-color;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
text-align: center;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
background-color: $base-color;
|
||||
color: var(--btn-text-color);
|
||||
border-radius: 50rpx;
|
||||
font-size: $font-size-tag;
|
||||
padding: 12rpx 30rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
.icon-diy {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
}
|
||||
952
pages_promotion/merch/public/edit.js
Normal file
952
pages_promotion/merch/public/edit.js
Normal file
@@ -0,0 +1,952 @@
|
||||
// import {getGoodsInfoById,getCategoryTree,addGoods,editGoods,addVirtualGoods,editVirtualGoods,addVirtualCardGoods,editVirtualCardGoods} from '@/api/goods'
|
||||
// import {getOrderFormList} from '@/api/form'
|
||||
// import {getSupplyList} from '@/api/supply'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
repeatFlag: false,
|
||||
isIphoneX: false,
|
||||
goodsImgHeight: 165, // 商品图片高度
|
||||
isAWait: false,
|
||||
albumPage: 'goodsEdit',
|
||||
//店内分类
|
||||
shopCategoryNumber: 1,
|
||||
shopCategoryData: {
|
||||
store_0: {}
|
||||
},
|
||||
shopCategoryIndex: '',
|
||||
|
||||
categoryList: [],
|
||||
secondCategory: [],
|
||||
thirdCategory: [],
|
||||
categoryId: [0, 0, 0],
|
||||
categoryName: ['', '', ''],
|
||||
currentLevel: 1,
|
||||
lastLevel: 1,
|
||||
showFisrt: true,
|
||||
showSecond: false,
|
||||
showThird: false,
|
||||
|
||||
goodsData: {
|
||||
id: 0,//商品id
|
||||
goodsname:'',//商品名称
|
||||
subtitle:'',//商品简介
|
||||
is_show_arrive:1,//默认商品预达简介0关闭1开启
|
||||
diy_arrive_switch:0,//商品自定义预达简介0关闭1开启
|
||||
goods_start_count:1,//起售数量
|
||||
grounding:1,//0下架1上架
|
||||
is_index_show:1,//0首页不推荐1推荐
|
||||
price:0,//售价
|
||||
productprice:0,//原价
|
||||
costprice:0,//成本价
|
||||
total:0,//库存
|
||||
pick_up_type:0,//提货时,0当日达1次日达2隔日达3自定义
|
||||
dispatchtype:1,//1统一运费
|
||||
dispatchprice:0,//统一运费金额
|
||||
begin_time:'',//团购开始时间
|
||||
end_time:'',//团购结束时间
|
||||
oneday_limit_count:0,//每天限购
|
||||
one_limit_count:0,//单次限购
|
||||
total_limit_count:0,//历史限购
|
||||
is_all_sale:0,//所有团长1部分团长0
|
||||
goods_image:[],
|
||||
begin_time:'',//团购开始时间
|
||||
end_time:''//团购结束时间
|
||||
},
|
||||
groundingArray: ['下架', '上架'],
|
||||
|
||||
pickuptypeArray: ['当日达', '次日达', '隔日达'],//, '自定义'
|
||||
|
||||
|
||||
currCategory: 0, // 当前所设置的商品分类
|
||||
virtualDeliverArray: [{
|
||||
name: '自动发货',
|
||||
value: 'auto_deliver',
|
||||
},
|
||||
{
|
||||
name: '手动发货',
|
||||
value: 'artificial_deliver',
|
||||
},
|
||||
{
|
||||
name: '到店核销',
|
||||
value: 'verify',
|
||||
}
|
||||
],
|
||||
virtualDeliverValue: {
|
||||
'auto_deliver': '自动发货',
|
||||
'artificial_deliver': '手动发货',
|
||||
'verify': '到店核销'
|
||||
},
|
||||
virtualReceiveArray: [{
|
||||
name: '自动收货',
|
||||
value: 'auto_receive',
|
||||
},
|
||||
{
|
||||
name: '买家确认收货',
|
||||
value: 'artificial_receive',
|
||||
},
|
||||
],
|
||||
virtualReceiveValue: {
|
||||
'auto_receive': '自动收货',
|
||||
'artificial_receive': '买家确认收货',
|
||||
},
|
||||
validityTypeArray: ['永久', '购买后几日有效', '指定过期日期'],
|
||||
virtualIndate: 0,
|
||||
minDate: '',
|
||||
carmiLength: '添加卡密',
|
||||
limitLength: [ //限购
|
||||
{
|
||||
name: '单次限购',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
name: '长期限购',
|
||||
value: '2'
|
||||
}
|
||||
],
|
||||
current: 0,
|
||||
goodsFormArray: [],
|
||||
goodsForm: [],
|
||||
|
||||
supplyFormArray: [],
|
||||
supplyForm: []
|
||||
};
|
||||
},
|
||||
async onLoad(option) {
|
||||
this.goodsData.id = option.id || 0;
|
||||
|
||||
// if (!this.$util.checkToken('/pages/goods/edit/index?id=' + this.goodsData.id)) return;
|
||||
|
||||
// this.clearStoreage();
|
||||
|
||||
// this.getCategoryTreeFn();
|
||||
if (this.goodsData.id) {
|
||||
this.isAWait = true;
|
||||
uni.setNavigationBarTitle({
|
||||
title: '编辑商品'
|
||||
});
|
||||
await this.editGetGoodsInfo();
|
||||
} else {
|
||||
|
||||
this.isAWait = false;
|
||||
uni.setNavigationBarTitle({
|
||||
title: '添加商品'
|
||||
});
|
||||
}
|
||||
|
||||
let date = new Date();
|
||||
this.minDate = date.getFullYear() + '-' + date.getMonth() + '-' + date.getUTCDate();
|
||||
|
||||
// if (this.addonIsExit.form) this.getGoodsForm();
|
||||
|
||||
// if (this.addonIsExit.supply) this.getSupplyList();
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.isIphoneX = this.$util.uniappIsIPhoneX();
|
||||
//this.refreshData();
|
||||
},
|
||||
methods: {
|
||||
|
||||
groundingChange(e) {
|
||||
this.goodsData.grounding = e.detail.value;
|
||||
},
|
||||
|
||||
pickuptypeChange(e) {
|
||||
this.goodsData.pick_up_type = e.detail.value;
|
||||
},
|
||||
|
||||
// 获取编辑商品数据
|
||||
async editGetGoodsInfo() {
|
||||
this.$api.sendRequest({
|
||||
url: 'app.getgoodsinfo',
|
||||
data:{
|
||||
id:this.goodsData.id
|
||||
},
|
||||
success: res => {
|
||||
console.log(res)
|
||||
if(res.result.detail){
|
||||
this.goodsData = res.result.detail
|
||||
console.log(this.goodsData.goods_image)
|
||||
}else{
|
||||
this.$util.showToast({
|
||||
title: '商品不存在',
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo('/pages/goods/list', {}, 'redirectTo');
|
||||
}, 1000);
|
||||
}
|
||||
// if (res.status == 0) {
|
||||
// setTimeout(() => {
|
||||
// this.$util.redirectTo('/pages/goods/list', {}, 'redirectTo');
|
||||
// }, 1000);
|
||||
// }
|
||||
}
|
||||
})
|
||||
/*var res = await getGoodsInfoById(this.goodsData.goods_id);
|
||||
if (res.code == 0 && res.data) {
|
||||
var data = res.data;
|
||||
|
||||
data.goods_category.forEach((item, index) => {
|
||||
this.shopCategoryData['store_' + index] = {
|
||||
category_id: item.id,
|
||||
category_name: item.category_name
|
||||
}
|
||||
})
|
||||
this.shopCategoryNumber = data.goods_category.length;
|
||||
|
||||
// 商品分类
|
||||
data.category_id = data.goods_category[0].id;
|
||||
data.category_name = data.goods_category[0].category_name.replace(/\//g, " / ");
|
||||
|
||||
if (typeof data.category_id == 'string') {
|
||||
this.categoryId = data.category_id.split(",");
|
||||
this.categoryName = data.category_name.split(" / ");
|
||||
} else {
|
||||
this.categoryId = data.category_id;
|
||||
this.categoryName = data.category_name;
|
||||
}
|
||||
|
||||
delete data.category_json;
|
||||
delete data.goods_category;
|
||||
|
||||
data.goods_image = data.goods_image.split(",");
|
||||
|
||||
data.goods_sku_data.forEach((item) => {
|
||||
if (item.sku_spec_format) item.sku_spec_format = JSON.parse(item.sku_spec_format);
|
||||
});
|
||||
|
||||
if (data.goods_spec_format) {
|
||||
uni.setStorageSync("editGoodsSpecFormat", data.goods_spec_format);
|
||||
uni.setStorageSync("editGoodsSkuData", JSON.stringify(data.goods_sku_data));
|
||||
data.goods_spec_format = JSON.parse(data.goods_spec_format);
|
||||
} else {
|
||||
data.sku_id = data.goods_sku_data[0].sku_id;
|
||||
data.price = data.goods_sku_data[0].price;
|
||||
data.market_price = data.goods_sku_data[0].market_price;
|
||||
data.cost_price = data.goods_sku_data[0].cost_price;
|
||||
data.weight = data.goods_sku_data[0].weight;
|
||||
data.volume = data.goods_sku_data[0].volume;
|
||||
data.sku_no = data.goods_sku_data[0].sku_no;
|
||||
}
|
||||
|
||||
if (data.goods_class == 1) {
|
||||
// 实物商品
|
||||
delete data.virtual_indate;
|
||||
uni.setStorageSync("editGoodsShippingTemplateId", data.shipping_template);
|
||||
uni.setStorageSync("editGoodsShippingTemplateName", data.template_name ? data.template_name : '');
|
||||
} else {
|
||||
// 虚拟商品
|
||||
delete data.shipping_template;
|
||||
delete data.is_free_shipping;
|
||||
}
|
||||
|
||||
// 商品参数
|
||||
if (data.goods_attr_format) {
|
||||
uni.setStorageSync("editGoodsAttrClass", data.goods_attr_class);
|
||||
uni.setStorageSync("editGoodsAttrName", data.goods_attr_name);
|
||||
uni.setStorageSync("editGoodsAttrFormat", data.goods_attr_format);
|
||||
data.goods_attr_format = JSON.parse(data.goods_attr_format);
|
||||
}
|
||||
|
||||
uni.setStorageSync("editGoodsState", data.goods_state);
|
||||
uni.setStorageSync("editGoodsContent", data.goods_content);
|
||||
|
||||
if (data.verify_validity_type == 1) {
|
||||
this.virtualIndate = data.virtual_indate;
|
||||
} else if (data.verify_validity_type == 2) {
|
||||
this.virtualTime = this.$util.timeStampTurnTime(data.virtual_indate, 'Y-m-d');
|
||||
}
|
||||
data.verify_num = data.goods_sku_data[0].verify_num
|
||||
|
||||
this.goodsData = data;
|
||||
|
||||
this.goodsData.goods_form_index = 0;
|
||||
|
||||
this.goodsData.supply_index = 0;
|
||||
|
||||
this.$forceUpdate();
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: '商品不存在',
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo('/pages/goods/list', {}, 'redirectTo');
|
||||
}, 1000);
|
||||
}*/
|
||||
},
|
||||
// 选择商品分类
|
||||
openGoodsCategoryPop(index) {
|
||||
this.currCategory = index;
|
||||
if (this.shopCategoryData['store_' + index].category_id) {
|
||||
this.categoryId = this.shopCategoryData['store_' + index].category_id.split(',');
|
||||
this.categoryName = this.shopCategoryData['store_' + index].category_name.split(' / ');
|
||||
|
||||
this.categoryList.forEach((item, index) => {
|
||||
item.selected = this.categoryId.indexOf(item.category_id.toString()) != -1;
|
||||
if (item.selected) {
|
||||
this.secondCategory = item.child_list;
|
||||
}
|
||||
if (item.child_list) {
|
||||
if (item.selected) this.lastLevel = 2;
|
||||
item.child_list.forEach(secondItem => {
|
||||
secondItem.selected = this.categoryId.indexOf(secondItem.category_id.toString()) != -1;
|
||||
if (secondItem.selected) {
|
||||
this.thirdCategory = secondItem.child_list;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
this.changeShow(this.categoryId.length);
|
||||
} else {
|
||||
this.categoryId = [0];
|
||||
this.categoryName = [''];
|
||||
this.changeShow(1);
|
||||
}
|
||||
this.$refs.categoryPopup.open();
|
||||
},
|
||||
closeGoodsCategoryPop() {
|
||||
this.$refs.categoryPopup.close();
|
||||
},
|
||||
// 编辑规格类型
|
||||
openGoodsSpec() {
|
||||
this.$util.redirectTo('/pages/goods/edit/spec');
|
||||
},
|
||||
// 编辑多规格
|
||||
openGoodsSpecEdit() {
|
||||
this.$util.redirectTo('/pages/goods/edit/spec_edit', {
|
||||
goods_class: this.goodsData.goods_class,
|
||||
virtual_deliver_type: this.goodsData.virtual_deliver_type
|
||||
});
|
||||
},
|
||||
//编辑卡密
|
||||
openCarmichaelEdit() {
|
||||
this.$util.redirectTo('/pages/goods/edit/carmichael_edit', {
|
||||
goods_class: this.goodsData.goods_class
|
||||
});
|
||||
},
|
||||
// 编辑商品状态
|
||||
openGoodsState() {
|
||||
this.$util.redirectTo('/pages/goods/edit/state', {
|
||||
goods_state: this.goodsData.goods_state
|
||||
});
|
||||
},
|
||||
// 编辑快递运费
|
||||
openExpressFreight() {
|
||||
this.$util.redirectTo('/pages/goods/edit/express_freight', {
|
||||
template_id: this.goodsData.shipping_template
|
||||
});
|
||||
},
|
||||
// 编辑商品详情
|
||||
openGoodsContent() {
|
||||
this.$util.redirectTo('/pages/goods/edit/content');
|
||||
},
|
||||
// 编辑商品参数
|
||||
openAttr() {
|
||||
this.$util.redirectTo('/pages/goods/edit/attr');
|
||||
},
|
||||
/**
|
||||
* 刷新商品图片高度
|
||||
* @param {Object} data
|
||||
*/
|
||||
refreshGoodsImgHeight(data) {
|
||||
if (data.height == '') return;
|
||||
var height = parseFloat(data.height.replace('px', ''));
|
||||
this.goodsImgHeight = height + 80;
|
||||
this.$forceUpdate();
|
||||
if (data.isLoad && this.$refs.loadingCover) {
|
||||
// 数据渲染留点时间
|
||||
setTimeout(() => {
|
||||
this.$refs.loadingCover.hide();
|
||||
}, 100);
|
||||
}
|
||||
uni.removeStorageSync("selectedAlbumImg");
|
||||
|
||||
},
|
||||
// 获取商品分类树状结构
|
||||
getCategoryTreeFn() {
|
||||
getCategoryTree().then(res=>{
|
||||
if (res.data) {
|
||||
this.categoryList = res.data;
|
||||
this.categoryList.forEach((item, index) => {
|
||||
item.selected = this.categoryId.indexOf(item.category_id.toString()) != -1;
|
||||
if (item.selected) {
|
||||
this.secondCategory = item.child_list;
|
||||
this.currentLevel = 1;
|
||||
}
|
||||
if (item.child_list) {
|
||||
if (item.selected) this.lastLevel = 2;
|
||||
item.child_list.forEach(secondItem => {
|
||||
secondItem.selected = this.categoryId.indexOf(secondItem.category_id.toString()) != -1;
|
||||
if (secondItem.selected) {
|
||||
this.thirdCategory = secondItem.child_list;
|
||||
this.currentLevel = 2;
|
||||
}
|
||||
if (secondItem.child_list) {
|
||||
if (secondItem.selected) this.lastLevel = 3;
|
||||
secondItem.child_list.forEach(thirdItem => {
|
||||
thirdItem.selected = this.categoryId.indexOf(thirdItem.category_id.toString()) != -1;
|
||||
if (thirdItem.selected) this.currentLevel = 3;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
this.changeShow(this.lastLevel);
|
||||
if (this.goodsData.goods_id == 0 && this.$refs.loadingCover) {
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
changeShow(index) {
|
||||
if (index == 1) {
|
||||
this.showFisrt = true;
|
||||
this.showSecond = false;
|
||||
this.showThird = false;
|
||||
} else if (index == 2) {
|
||||
this.showFisrt = false;
|
||||
this.showSecond = true;
|
||||
this.showThird = false;
|
||||
} else if (index == 3) {
|
||||
this.showFisrt = false;
|
||||
this.showSecond = false;
|
||||
this.showThird = true;
|
||||
}
|
||||
this.currentLevel = index;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
selectCategory(category) {
|
||||
this.currentLevel = category.level;
|
||||
|
||||
// 如果当前选中跟上次不一样,则 要清空下级数据
|
||||
if (category.level == 1 && this.categoryId[0] > 0 && this.categoryId[0] != category.captcha_id) {
|
||||
this.categoryId[1] = 0;
|
||||
this.categoryName[1] = '';
|
||||
this.categoryId[2] = 0;
|
||||
this.categoryName[2] = '';
|
||||
} else if (category.level == 2 && this.categoryId[1] > 0 && this.categoryId[1] != category.captcha_id) {
|
||||
this.categoryId[2] = 0;
|
||||
this.categoryName[2] = '';
|
||||
}
|
||||
|
||||
this.categoryId[category.level - 1] = category.category_id;
|
||||
this.categoryName[category.level - 1] = category.category_name;
|
||||
if (category.level == 1) {
|
||||
if (category.child_list) {
|
||||
this.secondCategory = category.child_list;
|
||||
} else {
|
||||
this.categoryId[1] = 0;
|
||||
this.categoryName[1] = '';
|
||||
this.categoryId[2] = 0;
|
||||
this.categoryName[2] = '';
|
||||
}
|
||||
} else if (category.level == 2) {
|
||||
if (category.child_list) {
|
||||
this.thirdCategory = category.child_list;
|
||||
} else {
|
||||
this.categoryId[2] = 0;
|
||||
this.categoryName[2] = '';
|
||||
}
|
||||
}
|
||||
|
||||
this.lastLevel = 1;
|
||||
this.categoryList.forEach((item, index) => {
|
||||
item.selected = this.categoryId[0] == item.category_id;
|
||||
if (item.child_list) {
|
||||
if (item.selected) this.lastLevel = 2;
|
||||
item.child_list.forEach((secondItem, secondIndex) => {
|
||||
secondItem.selected = this.categoryId[1] == secondItem.category_id;
|
||||
if (secondItem.child_list) {
|
||||
if (secondItem.selected) this.lastLevel = 3;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.changeShow(this.lastLevel);
|
||||
|
||||
this.goodsData.category_id = [];
|
||||
this.goodsData.category_name = [];
|
||||
|
||||
for (var i = 0; i < this.categoryId.length; i++) {
|
||||
if (this.categoryId[i]) this.goodsData.category_id.push(this.categoryId[i]);
|
||||
}
|
||||
for (var i = 0; i < this.categoryName.length; i++) {
|
||||
if (this.categoryName[i]) this.goodsData.category_name.push(this.categoryName[i]);
|
||||
}
|
||||
|
||||
this.goodsData.category_id = this.goodsData.category_id.toString();
|
||||
this.goodsData.category_name = this.goodsData.category_name.join(" / ");
|
||||
|
||||
if (
|
||||
(this.lastLevel == 3 && this.categoryId[2]) ||
|
||||
(this.lastLevel == 2 && this.categoryId[1]) ||
|
||||
(this.lastLevel == 1 && this.categoryId[0])
|
||||
) {
|
||||
this.shopCategoryData['store_' + this.currCategory] = {
|
||||
category_id: this.goodsData.category_id,
|
||||
category_name: this.goodsData.category_name
|
||||
};
|
||||
this.closeGoodsCategoryPop();
|
||||
}
|
||||
|
||||
this.$forceUpdate();
|
||||
},
|
||||
addShopCategory() {
|
||||
if (this.shopCategoryNumber == 10) {
|
||||
this.$util.showToast({
|
||||
title: '商品可以属于多个分类,最多10个'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.shopCategoryData['store_' + this.shopCategoryNumber] = {};
|
||||
++this.shopCategoryNumber;
|
||||
},
|
||||
deleteShopCategory(index) {
|
||||
delete this.shopCategoryData['store_' + index];
|
||||
--this.shopCategoryNumber;
|
||||
|
||||
//重置数据
|
||||
let i = 0;
|
||||
let obj = {};
|
||||
for (let key in this.shopCategoryData) {
|
||||
obj['store_' + i] = this.shopCategoryData[key];
|
||||
i++;
|
||||
}
|
||||
this.shopCategoryData = {};
|
||||
this.shopCategoryData = Object.assign(this.shopCategoryData, obj);
|
||||
},
|
||||
// 刷新数据
|
||||
refreshData() {
|
||||
var selectedAlbumImg = uni.getStorageSync('selectedAlbumImg');
|
||||
if (selectedAlbumImg) {
|
||||
uni.setStorageSync('selectedAlbumImgTemp', selectedAlbumImg);
|
||||
selectedAlbumImg = JSON.parse(selectedAlbumImg);
|
||||
this.goodsData.goods_image = selectedAlbumImg.list.split(",");
|
||||
this.$refs.goodsShmilyDragImg.refresh();
|
||||
}
|
||||
|
||||
// 规格项
|
||||
this.goodsData.goods_spec_format = uni.getStorageSync('editGoodsSpecFormat') ? JSON.parse(uni.getStorageSync('editGoodsSpecFormat')) : [];
|
||||
if (this.goodsData.goods_spec_format.length <= 0) {
|
||||
|
||||
this.goodsData.carmichael = uni.getStorageSync('editGoodsCarmichael') ? JSON.parse(uni.getStorageSync('editGoodsCarmichael')) : [];
|
||||
if (this.goodsData.carmichael.length > 0) {
|
||||
this.carmiLength = '添加卡密【' + this.goodsData.carmichael.length + '】'
|
||||
}
|
||||
}
|
||||
|
||||
// 多规格数据
|
||||
this.goodsData.goods_sku_data = uni.getStorageSync('editGoodsSkuData') ? JSON.parse(uni.getStorageSync('editGoodsSkuData')) : [];
|
||||
if (this.goodsData.goods_sku_data.length > 0) {
|
||||
this.goodsData.goods_stock = 0;
|
||||
this.goodsData.goods_stock_alarm = 0;
|
||||
this.goodsData.goods_sku_data.forEach((item) => {
|
||||
if (item.stock) this.goodsData.goods_stock += parseInt(item.stock);
|
||||
if (item.stock_alarm) this.goodsData.goods_stock_alarm += parseInt(item.stock_alarm);
|
||||
});
|
||||
}
|
||||
|
||||
// 快递运费
|
||||
this.goodsData.shipping_template = uni.getStorageSync('editGoodsShippingTemplateId') || 0;
|
||||
this.goodsData.is_free_shipping = this.goodsData.shipping_template > 0 ? 0 : 1;
|
||||
this.goodsData.template_name = uni.getStorageSync('editGoodsShippingTemplateName') || '';
|
||||
|
||||
if (uni.getStorageSync('editGoodsState') !== undefined && uni.getStorageSync('editGoodsState') !== '') {
|
||||
this.goodsData.goods_state = uni.getStorageSync('editGoodsState');
|
||||
}
|
||||
|
||||
if (uni.getStorageSync('editGoodsContent') != undefined && uni.getStorageSync('editGoodsContent') != '') {
|
||||
this.goodsData.goods_content = uni.getStorageSync('editGoodsContent');
|
||||
}
|
||||
// 商品参数
|
||||
this.goodsData.goods_attr_class = uni.getStorageSync('editGoodsAttrClass') || 0;
|
||||
this.goodsData.goods_attr_name = uni.getStorageSync('editGoodsAttrName') || '';
|
||||
this.goodsData.goods_attr_format = uni.getStorageSync('editGoodsAttrFormat') ? JSON.parse(uni.getStorageSync('editGoodsAttrFormat')) : [];
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 验证
|
||||
verify() {
|
||||
|
||||
if (this.goodsData.goodsname.length == 0) {
|
||||
this.$util.showToast({
|
||||
title: '请输入商品名称'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.goodsData.subtitle.length > 100) {
|
||||
this.$util.showToast({
|
||||
title: '商品简介不能超过100个字符'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.goodsData.goods_image.length == 0) {
|
||||
this.$util.showToast({
|
||||
title: '请上传商品图片'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
// if (!this.shopCategoryData.store_0.category_id) {
|
||||
// this.$util.showToast({
|
||||
// title: `请选择商品分类`
|
||||
// });
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// if (this.goodsData.goods_class == 2 && this.goodsData.virtual_deliver_type == 'verify') {
|
||||
// if (this.goodsData.verify_validity_type == 1) {
|
||||
// if (this.virtualIndate.length == 0) {
|
||||
// this.$util.showToast({
|
||||
// title: '请输入有效期'
|
||||
// });
|
||||
// return false;
|
||||
// }
|
||||
// if (isNaN(this.virtualIndate) || !this.$util.data().regExp.number.test(this.virtualIndate)) {
|
||||
// this.$util.showToast({
|
||||
// title: '[有效期]格式输入错误'
|
||||
// });
|
||||
// return false;
|
||||
// }
|
||||
// if (this.virtualIndate < 1) {
|
||||
// this.$util.showToast({
|
||||
// title: '有效期不能小于1天'
|
||||
// });
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (this.goodsData.verify_validity_type == 2) {
|
||||
// if (this.virtualTime.length == 0) {
|
||||
// this.$util.showToast({
|
||||
// title: '请设置有效期'
|
||||
// });
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// 单规格
|
||||
if (this.goodsData.price == 0) {
|
||||
|
||||
this.$util.showToast({
|
||||
title: '请输入销售价'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (isNaN(this.goodsData.price) || !this.$util.data().regExp.digit.test(this.goodsData.price)) {
|
||||
this.$util.showToast({
|
||||
title: '[销售价]格式输入错误'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.goodsData.productprice.length > 0 && (isNaN(this.goodsData.productprice) || !this.$util.data().regExp.digit.test(this.goodsData.productprice))) {
|
||||
this.$util.showToast({
|
||||
title: '[原价价]格式输入错误'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 总库存
|
||||
if (this.goodsData.total == 0) {
|
||||
this.$util.showToast({
|
||||
title: '请输入库存'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (isNaN(this.goodsData.total) || !this.$util.data().regExp.number.test(this.goodsData.total)) {
|
||||
this.$util.showToast({
|
||||
title: '[库存]格式输入错误'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (isNaN(this.goodsData.goods_start_count) || !this.$util.data().regExp.number.test(this.goodsData.goods_start_count)) {
|
||||
this.$util.showToast({
|
||||
title: '[起售]格式输入错误'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.goodsData.goods_start_count < 0) {
|
||||
this.$util.showToast({
|
||||
title: '起售数量不能小于0'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
},
|
||||
// 删除本地缓存
|
||||
clearStoreage() {
|
||||
|
||||
// 临时选择的商品图片
|
||||
uni.removeStorageSync("selectedAlbumImg");
|
||||
uni.removeStorageSync("selectedAlbumImgTemp");
|
||||
|
||||
// 商品规格
|
||||
uni.removeStorageSync("editGoodsSpecFormat");
|
||||
uni.removeStorageSync("editGoodsSkuData");
|
||||
|
||||
//电子卡密
|
||||
uni.removeStorageSync("editGoodsCarmichael");
|
||||
uni.removeStorageSync("specName");
|
||||
|
||||
// 物流公司
|
||||
uni.removeStorageSync("editGoodsShippingTemplateId");
|
||||
uni.removeStorageSync("editGoodsShippingTemplateName");
|
||||
|
||||
// 商品状态
|
||||
uni.removeStorageSync("editGoodsState");
|
||||
|
||||
// 商品详情
|
||||
uni.removeStorageSync("editGoodsContent");
|
||||
|
||||
// 商品参数
|
||||
uni.removeStorageSync("editGoodsAttrClass");
|
||||
uni.removeStorageSync("editGoodsAttrName");
|
||||
uni.removeStorageSync("editGoodsAttrFormat");
|
||||
},
|
||||
save() {
|
||||
if (!this.verify()) return;
|
||||
if (this.repeatFlag) return;
|
||||
this.repeatFlag = true;
|
||||
this.$api.sendRequest({
|
||||
url: 'app.addgoods',
|
||||
data:this.goodsData,
|
||||
success: res => {
|
||||
this.$util.showToast({
|
||||
title: res.result.message
|
||||
});
|
||||
if (res.status == 1) {
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo('/pages/goods/list', {}, 'redirectTo');
|
||||
}, 1000);
|
||||
} else {
|
||||
this.repeatFlag = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 清空规格的图片
|
||||
console.log(this.goodsData)
|
||||
return false
|
||||
for (var i = 0; i < this.goodsData.goods_sku_data.length; i++) {
|
||||
if (this.goodsData.goods_sku_data[i].sku_images.length == 0) this.goodsData.goods_sku_data[i].sku_image = '';
|
||||
}
|
||||
var data = JSON.parse(JSON.stringify(this.goodsData));
|
||||
delete data.category_name;
|
||||
|
||||
data.category_json = [];
|
||||
data.category_id = '';
|
||||
|
||||
for (var key in this.shopCategoryData) {
|
||||
if (this.shopCategoryData[key].category_id) {
|
||||
data.category_id += ',' + this.shopCategoryData[key].category_id;
|
||||
data.category_json.push(this.shopCategoryData[key].category_id);
|
||||
}
|
||||
}
|
||||
data.category_id += ',';
|
||||
data.category_json = JSON.stringify(data.category_json);
|
||||
if (data.goods_spec_format.length == 0) {
|
||||
// 单规格数据
|
||||
var singData = {
|
||||
sku_id: (data.goods_id ? data.sku_id : 0),
|
||||
sku_name: data.goods_name,
|
||||
spec_name: '',
|
||||
sku_no: data.sku_no,
|
||||
sku_spec_format: '',
|
||||
price: data.price,
|
||||
market_price: data.market_price,
|
||||
cost_price: data.cost_price,
|
||||
stock: data.goods_stock,
|
||||
stock_alarm: data.goods_stock_alarm,
|
||||
weight: data.weight,
|
||||
volume: this.goodsData.volume,
|
||||
sku_image: data.goods_image[0],
|
||||
sku_images: data.goods_image.toString(),
|
||||
// verify_num: data.goods_sku_data.length > 0 ? data.goods_sku_data[0].verify_num : this.goodsData.verify_num
|
||||
verify_num: data.verify_num
|
||||
}
|
||||
var singleSkuData = JSON.stringify([singData]);
|
||||
}
|
||||
data.goods_image = data.goods_image.toString();
|
||||
// 商品规格json格式
|
||||
data.goods_spec_format = data.goods_spec_format.length > 0 ? JSON.stringify(data.goods_spec_format) : '';
|
||||
|
||||
// SKU商品数据
|
||||
data.goods_sku_data = data.goods_spec_format.length > 0 ? JSON.stringify(data.goods_sku_data) :
|
||||
singleSkuData;
|
||||
|
||||
// 商品参数json格式
|
||||
data.goods_attr_format = data.goods_attr_format.length > 0 ? JSON.stringify(data.goods_attr_format) : '';
|
||||
|
||||
data.spec_type_status = data.goods_spec_format.length > 0 ? 1 : 0;
|
||||
|
||||
if (this.goodsData.verify_validity_type == 1) {
|
||||
data.virtual_indate = this.virtualIndate;
|
||||
} else if (this.goodsData.verify_validity_type == 2) {
|
||||
data.virtual_indate = this.virtualTime;
|
||||
}
|
||||
|
||||
// console.log(this.goodsData.goods_spec_format,'format')
|
||||
// if(this.goodsData.goods_spec_format == '[]'){
|
||||
// data.carmichael= data.carmichael
|
||||
// }
|
||||
var save = null;
|
||||
if (data.goods_class == 3) {
|
||||
save = addVirtualCardGoods;
|
||||
if (data.goods_id) save = editVirtualCardGoods;
|
||||
}else if (data.goods_class == 2){
|
||||
save = addVirtualGoods;
|
||||
if (data.goods_id) save = editVirtualGoods;
|
||||
}else {
|
||||
save = addGoods;
|
||||
if (data.goods_id) save = editGoods;
|
||||
}
|
||||
data.goods_form = this.goodsData.goods_form_index ? this.goodsForm[this.goodsData.goods_form_index - 1].id : 0;
|
||||
|
||||
data.supplier_id = this.goodsData.supply_index ? this.supplyForm[this.goodsData.supply_index - 1].supplier_id : 0;
|
||||
if (this.repeatFlag) return;
|
||||
this.repeatFlag = true;
|
||||
save(data).then(res=>{
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
if (res.code == 0) {
|
||||
this.clearStoreage();
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo('/pages/goods/list', {}, 'tabbar');
|
||||
}, 1000);
|
||||
} else {
|
||||
this.repeatFlag = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//是否开启限购
|
||||
onLimit() {
|
||||
this.goodsData.is_limit = this.goodsData.is_limit == 1 ? 0 : 1
|
||||
},
|
||||
|
||||
//限购类型
|
||||
limitChange(e) {
|
||||
this.goodsData.limit_type = e
|
||||
},
|
||||
/**
|
||||
* 是否参与会员折扣
|
||||
*/
|
||||
joinMemberDiscount() {
|
||||
this.goodsData.is_consume_discount = this.goodsData.is_consume_discount == 1 ? 0 : 1;
|
||||
},
|
||||
switchBtn(type) {
|
||||
this.goodsData[type] = this.goodsData[type] == 1 ? 0 : 1;
|
||||
},
|
||||
/**
|
||||
* 推荐方式选择
|
||||
* @param {Object} e
|
||||
*/
|
||||
recommendWayChange(e) {
|
||||
this.goodsData.recommend_way = e.detail.value;
|
||||
},
|
||||
/**
|
||||
* 发货选择
|
||||
* @param {Object} e
|
||||
*/
|
||||
virtualDeliverTypeChange(e) {
|
||||
this.goodsData.virtual_deliver_type = this.virtualDeliverArray[e.detail.value]['value'];
|
||||
},
|
||||
/**
|
||||
* 收货选择
|
||||
* @param {Object} e
|
||||
*/
|
||||
virtualReceiveTypeChange(e) {
|
||||
this.goodsData.virtual_receive_type = this.virtualReceiveArray[e.detail.value]['value'];
|
||||
},
|
||||
/**
|
||||
* 核销有效期类型
|
||||
* @param {Object} e
|
||||
*/
|
||||
validityTypeChange(e) {
|
||||
this.goodsData.verify_validity_type = e.detail.value;
|
||||
},
|
||||
/**
|
||||
* 核销有效期选择
|
||||
* @param {Object} e
|
||||
*/
|
||||
virtualTimeChange(e) {
|
||||
this.virtualTime = e.detail.value;
|
||||
},
|
||||
|
||||
/**
|
||||
* 团购开始时间选择
|
||||
* @param {Object} e
|
||||
*/
|
||||
beginChange(e) {
|
||||
this.goodsData.begin_time = e.detail.value;
|
||||
},
|
||||
/**
|
||||
* 团购结束时间选择
|
||||
* @param {Object} e
|
||||
*/
|
||||
endChange(e) {
|
||||
this.goodsData.end_time = e.detail.value;
|
||||
},
|
||||
|
||||
/**
|
||||
* 是否需要核销
|
||||
*/
|
||||
isNeedVerify() {
|
||||
this.goodsData.is_need_verify = this.goodsData.is_need_verify == 1 ? 0 : 1;
|
||||
},
|
||||
/**
|
||||
* 获取商品表单
|
||||
*/
|
||||
getGoodsForm() {
|
||||
getOrderFormList().then(res=>{
|
||||
if (res.data) {
|
||||
let goodsForm = ['请选择商品表单'];
|
||||
res.data.forEach((item, index) => {
|
||||
goodsForm.push(item.form_name);
|
||||
if (this.goodsData.form_id && this.goodsData.form_id == item.id) this.goodsData.goods_form_index = index + 1;
|
||||
})
|
||||
this.goodsForm = res.data;
|
||||
this.goodsFormArray = goodsForm;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
})
|
||||
},
|
||||
goodsFormChange(e) {
|
||||
this.goodsData.goods_form_index = e.detail.value;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
/**
|
||||
* 获取供应商
|
||||
*/
|
||||
getSupplyList() {
|
||||
getSupplyList().then(res=>{
|
||||
if (res.data) {
|
||||
let supplyForm = ['请选择供应商'];
|
||||
res.data.forEach((item, index) => {
|
||||
supplyForm.push(item.title);
|
||||
if (this.goodsData.supplier_id && this.goodsData.supplier_id == item.supplier_id) this.goodsData.supply_index = index + 1;
|
||||
})
|
||||
this.supplyForm = res.data;
|
||||
this.supplyFormArray = supplyForm;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
})
|
||||
},
|
||||
supplyChange(e) {
|
||||
this.goodsData.supply_index = e.detail.value;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
}
|
||||
};
|
||||
275
pages_promotion/merch/public/edit.scss
Normal file
275
pages_promotion/merch/public/edit.scss
Normal file
@@ -0,0 +1,275 @@
|
||||
.container{
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
.safe-area{
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
|
||||
}
|
||||
.goods-edit-wrap {
|
||||
margin-bottom: 160rpx;
|
||||
}
|
||||
.form-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: $margin-updown $margin-both;
|
||||
// padding: 0 $padding;
|
||||
color: $color-tip;
|
||||
}
|
||||
.item-wrap uni-radio .uni-radio-input {
|
||||
width: 30rpx !important;
|
||||
height: 30rpx !important;
|
||||
}
|
||||
.item-wrap {
|
||||
background: #fff;
|
||||
// padding: $padding;
|
||||
margin-top: $margin-updown;
|
||||
.goods-type {
|
||||
display: flex;
|
||||
margin: 0 40rpx $margin-updown 40rpx;
|
||||
flex-wrap: wrap;
|
||||
view {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
border: 1px solid $color-disabled;
|
||||
color: $color-tip;
|
||||
margin-right: 40rpx;
|
||||
margin-top: 30rpx;
|
||||
position: relative;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
white-space: nowrap;
|
||||
min-width: calc((100% - 100rpx) / 3);
|
||||
max-width: calc((100% - 100rpx) / 3);
|
||||
&:nth-child(3n+3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.iconfont {
|
||||
display: none;
|
||||
}
|
||||
&.selected {
|
||||
.iconfont {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -22rpx;
|
||||
right: -22rpx;
|
||||
font-size: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 $margin-both;
|
||||
border-bottom: 1px solid $color-line;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.required {
|
||||
font-weight: bold;
|
||||
}
|
||||
.label {
|
||||
vertical-align: middle;
|
||||
margin-right: $margin-both;
|
||||
}
|
||||
input {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
&.more-wrap {
|
||||
.selected {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
color: $color-tip;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
&.have {
|
||||
color: $color-title;
|
||||
}
|
||||
}
|
||||
.iconfont {
|
||||
color: $color-tip;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.action {
|
||||
background-color: $color-disabled;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
&.goods-img {
|
||||
height: 200rpx;
|
||||
line-height: 200rpx;
|
||||
display: block;
|
||||
position: relative;
|
||||
.label{
|
||||
display: inline-block;
|
||||
}
|
||||
.img-list {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
top: 0;
|
||||
left: 100rpx;
|
||||
margin-top: 40rpx;
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
.tips {
|
||||
color: $color-tip;
|
||||
font-size: $font-size-activity-tag;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.unit {
|
||||
margin-left: 20rpx;
|
||||
width: 40rpx;
|
||||
}
|
||||
&.join-member-discount {
|
||||
.label{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.validity-type {
|
||||
border-bottom: 1px solid $color-line!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-wrap {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding: 40rpx 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.popup {
|
||||
width: 100vw;
|
||||
background: #fff;
|
||||
border-top-left-radius: 24rpx;
|
||||
border-top-right-radius: 24rpx;
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
position: relative;
|
||||
padding: 40rpx;
|
||||
|
||||
.tit {
|
||||
flex: 1;
|
||||
font-size: $font-size-toolbar;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.iconfont {
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
color: $color-tip;
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
height: calc(100% - 250rpx);
|
||||
&.safe-area {
|
||||
height: calc(100% - 270rpx);
|
||||
}
|
||||
}
|
||||
&.category {
|
||||
height: 50vh;
|
||||
.popup-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
.popup-body {
|
||||
padding: 0 30rpx;
|
||||
.nav {
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text {
|
||||
padding: 0 0 20rpx 0;
|
||||
margin-right: 20rpx;
|
||||
display: inline-block;
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
&.selected {
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
.category {
|
||||
height: 100%;
|
||||
.item {
|
||||
display: block;
|
||||
margin: 20rpx 0 0;
|
||||
text {
|
||||
&:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre;
|
||||
width: 90%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.iconfont {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.child-item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.choose-picture {
|
||||
background-color: $color-bg;
|
||||
.popup-header {
|
||||
border-bottom: none;
|
||||
background-color: #fff;
|
||||
}
|
||||
.popup-body {
|
||||
background-color: $color-bg;
|
||||
height: initial;
|
||||
.select-wrap{
|
||||
background-color: #fff;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.item {
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid $color-line;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
&.cancle {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
475
pages_promotion/merch/public/js/list.js
Normal file
475
pages_promotion/merch/public/js/list.js
Normal file
@@ -0,0 +1,475 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
listStyle: '',
|
||||
loadingType: 'loading', //加载更多状态
|
||||
orderType: '',
|
||||
priceOrder: 'desc', //1 价格从低到高 2价格从高到低
|
||||
categoryList: [], //排序类型
|
||||
goodsList: [],
|
||||
order: '',
|
||||
sort: 'desc',
|
||||
showScreen: false,
|
||||
keyword: '',
|
||||
categoryId: 0,
|
||||
minPrice: '',
|
||||
maxPrice: '',
|
||||
isFreeShipping: false, //是否免邮
|
||||
isIphoneX: false,
|
||||
coupon: 0,
|
||||
emptyShow: false,
|
||||
isList: true, //列表样式
|
||||
//分享所需标题
|
||||
share_title: '',
|
||||
//搜索到多少件商品
|
||||
count: 0,
|
||||
//当前分类名称
|
||||
category_title: '',
|
||||
//优惠券数据
|
||||
coupon_name: '',
|
||||
//列表瀑布流数据
|
||||
listHeight: [],
|
||||
listPosition: [],
|
||||
debounce: null,
|
||||
brandId: 0,
|
||||
merch_id:0,
|
||||
merch:{},
|
||||
brandList: [], //品牌筛选项
|
||||
config: {
|
||||
fontWeight: false,
|
||||
padding: 0,
|
||||
cartEvent: "detail",
|
||||
text: "购买",
|
||||
textColor: "#FFFFFF",
|
||||
theme: "default",
|
||||
aroundRadius: 25,
|
||||
control: true,
|
||||
bgColor: "#FF6A00",
|
||||
style: "button",
|
||||
iconDiy: {
|
||||
iconType: "icon",
|
||||
icon: "",
|
||||
style: {
|
||||
fontSize: "60",
|
||||
iconBgColor: [],
|
||||
iconBgColorDeg: 0,
|
||||
iconBgImg: "",
|
||||
bgRadius: 0,
|
||||
iconColor: [
|
||||
"#000000"
|
||||
],
|
||||
iconColorDeg: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
this.categoryId = options.category_id || 0;
|
||||
this.keyword = options.keyword || '';
|
||||
this.coupon = options.coupon || 0;
|
||||
this.goods_id_arr = options.goods_id_arr || 0;
|
||||
this.brandId = options.brand_id || 0;
|
||||
this.merch_id = options.merch_id || 0;
|
||||
if(this.merch_id > 0){
|
||||
this.getMerch()
|
||||
}else{
|
||||
uni.showModal({
|
||||
title:'提示',
|
||||
content:'商家不存在',
|
||||
showCancel:false,
|
||||
success(e){
|
||||
uni.navigateBack({})
|
||||
}
|
||||
})
|
||||
}
|
||||
this.loadCategoryList(this.categoryId);
|
||||
this.getBrandList();
|
||||
this.isIphoneX = this.$util.uniappIsIPhoneX();
|
||||
|
||||
//小程序分享接收source_member
|
||||
if (options.source_member) {
|
||||
uni.setStorageSync('source_member', options.source_member);
|
||||
}
|
||||
// 小程序扫码进入,接收source_member
|
||||
if (options.scene) {
|
||||
var sceneParams = decodeURIComponent(options.scene);
|
||||
sceneParams = sceneParams.split('&');
|
||||
if (sceneParams.length) {
|
||||
sceneParams.forEach(item => {
|
||||
if (item.indexOf('sku_id') != -1) this.skuId = item.split('-')[1];
|
||||
if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
|
||||
if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
uni.onWindowResize(res => {
|
||||
if (this.debounce) clearTimeout(this.debounce);
|
||||
this.waterfallflow(0);
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
//记录分享关系
|
||||
if (this.storeToken && uni.getStorageSync('source_member')) {
|
||||
this.$util.onSourceMember(uni.getStorageSync('source_member'));
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 转发分享
|
||||
*/
|
||||
onShareAppMessage(res) {
|
||||
var title = '搜索到' + this.count + '件“' + this.keyword + this.category_title + this.coupon_name + '”相关的优质商品';
|
||||
let route = this.$util.getCurrentShareRoute(this.memberInfo ? this.memberInfo.member_id : 0);
|
||||
var path = route.path;
|
||||
return {
|
||||
title: title,
|
||||
path: path,
|
||||
success: res => {
|
||||
},
|
||||
fail: res => {
|
||||
}
|
||||
};
|
||||
},
|
||||
// 分享到微信朋友圈
|
||||
onShareTimeline() {
|
||||
var title = '搜索到' + this.count + '件“' + this.keyword + this.category_title + this.coupon_name + '”相关的优质商品';
|
||||
let route = this.$util.getCurrentShareRoute(this.memberInfo ? this.memberInfo.member_id : 0);
|
||||
var query = route.query;
|
||||
return {
|
||||
title: title,
|
||||
query: query,
|
||||
imageUrl: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getMerch(){
|
||||
this.$api.sendRequest({
|
||||
url: '/merch/api/merch/merchinfo',
|
||||
data: {
|
||||
merch_id:this.merch_id
|
||||
},
|
||||
success: res => {
|
||||
console.log(res)
|
||||
this.merch = res.data
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取优惠券数据
|
||||
*/
|
||||
couponInfo(id) {
|
||||
return new Promise(resolve => {
|
||||
this.$api.sendRequest({
|
||||
url: '/coupon/api/coupon/typeinfo',
|
||||
data: {
|
||||
coupon_type_id: id
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
resolve(res.data.coupon_name);
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取分类名称
|
||||
*/
|
||||
share_select(data, id) {
|
||||
return new Promise((resolve) => {
|
||||
data.forEach((item) => {
|
||||
if (item.category_id == id) {
|
||||
resolve(item.category_name)
|
||||
}
|
||||
if (item.child_list && item.child_list.length > 0) {
|
||||
item.child_list.forEach((v) => {
|
||||
if (v.category_id == id) {
|
||||
resolve(v.category_name)
|
||||
}
|
||||
if (v.child_list && v.child_list.length > 0) {
|
||||
v.forEach((m) => {
|
||||
if (m.category_id == id) {
|
||||
resolve(m.category_name)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
//加载分类
|
||||
loadCategoryList(fid, sid) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goodscategory/tree',
|
||||
data: {},
|
||||
success: res => {
|
||||
if (res.data != null) {
|
||||
this.categoryList = res.data
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getGoodsList(mescroll) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goodssku/page',
|
||||
data: {
|
||||
page: mescroll.num,
|
||||
page_size: mescroll.size,
|
||||
keyword: this.keyword,
|
||||
category_id: this.categoryId,
|
||||
brand_id: this.brandId,
|
||||
min_price: this.minPrice,
|
||||
max_price: this.maxPrice,
|
||||
is_free_shipping: (this.isFreeShipping ? 1 : 0),
|
||||
order: this.order,
|
||||
sort: this.sort,
|
||||
coupon: this.coupon,
|
||||
goods_id_arr: this.goods_id_arr,
|
||||
merch_id:this.merch_id
|
||||
},
|
||||
success: res => {
|
||||
let newArr = []
|
||||
let msg = res.message;
|
||||
if (res.code == 0 && res.data) {
|
||||
this.count = res.data.count;
|
||||
if (res.data.page_count == 0) {
|
||||
this.emptyShow = true
|
||||
}
|
||||
newArr = res.data.list;
|
||||
newArr = newArr.map(item => {
|
||||
item.id = this.genNonDuplicate();
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
})
|
||||
}
|
||||
this.category_title = '';
|
||||
this.coupon_name = '';
|
||||
if (res.data.config) this.config = res.data.config;
|
||||
if (this.categoryId) {
|
||||
this.share_select(this.categoryList, this.categoryId).then(resolve => {
|
||||
this.category_title = resolve
|
||||
});
|
||||
}
|
||||
if (this.coupon) {
|
||||
this.couponInfo(this.coupon).then(resolve => {
|
||||
this.coupon_name = resolve
|
||||
});
|
||||
}
|
||||
mescroll.endSuccess(newArr.length);
|
||||
//设置列表数据
|
||||
if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
|
||||
this.goodsList = this.goodsList.concat(newArr); //追加新数据
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
|
||||
this.waterfallflow((mescroll.num - 1) * 10);
|
||||
},
|
||||
fail: res => {
|
||||
//联网失败的回调
|
||||
mescroll.endErr();
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
changeListStyle() {
|
||||
this.isList = !this.isList;
|
||||
this.waterfallflow(0);
|
||||
},
|
||||
//筛选点击
|
||||
sortTabClick(tag) {
|
||||
if (tag == 'sale_num') {
|
||||
this.order = 'sale_num';
|
||||
this.sort = 'desc';
|
||||
} else if (tag == 'discount_price') {
|
||||
this.order = 'discount_price';
|
||||
this.sort = 'desc';
|
||||
} else if (tag == 'screen') {
|
||||
//筛选
|
||||
this.showScreen = true;
|
||||
return;
|
||||
} else {
|
||||
this.order = '';
|
||||
this.sort = '';
|
||||
}
|
||||
|
||||
if (this.orderType === tag && tag !== 'discount_price') return;
|
||||
|
||||
this.orderType = tag;
|
||||
if (tag === 'discount_price') {
|
||||
this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
|
||||
this.sort = this.priceOrder;
|
||||
} else {
|
||||
this.priceOrder = '';
|
||||
}
|
||||
this.emptyShow = false;
|
||||
this.goodsList = [];
|
||||
this.$refs.mescroll.refresh();
|
||||
},
|
||||
//商品详情
|
||||
toDetail(item) {
|
||||
this.$util.redirectTo('/pages/goods/detail', {
|
||||
goods_id: item.goods_id
|
||||
});
|
||||
},
|
||||
search() {
|
||||
this.emptyShow = false;
|
||||
this.goodsList = [];
|
||||
this.$refs.mescroll.refresh();
|
||||
},
|
||||
selectedCategory(categoryId) {
|
||||
this.categoryId = categoryId;
|
||||
},
|
||||
screenData() {
|
||||
if (this.minPrice != '' || this.maxPrice != '') {
|
||||
// if (!Number(this.minPrice) && this.minPrice) {
|
||||
// this.$util.showToast({
|
||||
// title: '请输入最低价'
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
if (!Number(this.maxPrice) && this.maxPrice) {
|
||||
this.$util.showToast({
|
||||
title: '请输入最高价'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (Number(this.minPrice) < 0 || Number(this.maxPrice) < 0) {
|
||||
this.$util.showToast({
|
||||
title: '筛选价格不能小于0'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.minPrice != '' && Number(this.minPrice) > Number(this.maxPrice) && this.maxPrice) {
|
||||
|
||||
this.$util.showToast({
|
||||
title: '最低价不能大于最高价'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.maxPrice != '' && Number(this.maxPrice) < Number(this.minPrice)) {
|
||||
this.$util.showToast({
|
||||
title: '最高价不能小于最低价'
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.emptyShow = false;
|
||||
this.goodsList = [];
|
||||
this.$refs.mescroll.refresh();
|
||||
this.showScreen = false;
|
||||
},
|
||||
//重置数据
|
||||
resetData() {
|
||||
this.categoryId = 0
|
||||
this.minPrice = ''
|
||||
this.maxPrice = ''
|
||||
this.isFreeShipping = false
|
||||
},
|
||||
goodsImg(imgStr) {
|
||||
let imgs = imgStr.split(',');
|
||||
return imgs[0] ? this.$util.img(imgs[0], {
|
||||
size: 'mid'
|
||||
}) : this.$util.getDefaultImage().goods;
|
||||
},
|
||||
imgError(index) {
|
||||
this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
|
||||
},
|
||||
showPrice(data) {
|
||||
let price = data.discount_price;
|
||||
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
|
||||
return price;
|
||||
},
|
||||
showMarketPrice(item) {
|
||||
if (item.market_price_show) {
|
||||
let price = this.showPrice(item);
|
||||
if (item.market_price > 0) {
|
||||
return item.market_price;
|
||||
} else if (parseFloat(item.price) > parseFloat(price)) {
|
||||
return item.price;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
},
|
||||
goodsTag(data) {
|
||||
return data.label_name || '';
|
||||
},
|
||||
/**
|
||||
* 瀑布流
|
||||
*/
|
||||
waterfallflow(start = 0) {
|
||||
if (!this.isList) {
|
||||
//页面渲染完成后的事件
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
let listHeight = [];
|
||||
let listPosition = [];
|
||||
if (start != 0) {
|
||||
listHeight = this.listHeight;
|
||||
listPosition = this.listPosition;
|
||||
}
|
||||
let column = 2;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.selectAll('.double-column .goods-item').boundingClientRect(data => {
|
||||
for (let i = start; i < data.length; i++) {
|
||||
if (i < column) {
|
||||
let position = {};
|
||||
position.top = uni.upx2px(20) + 'px';
|
||||
if (i % column == 0) {
|
||||
position.left = data[i].width * i + "px";
|
||||
} else {
|
||||
position.left = data[i].width * i + (i % column * uni
|
||||
.upx2px(30)) + "px";
|
||||
}
|
||||
listPosition[i] = position;
|
||||
listHeight[i] = data[i].height + uni.upx2px(20);
|
||||
} else {
|
||||
let minHeight = Math.min(...listHeight); // 找到第一列的最小高度
|
||||
let minIndex = listHeight.findIndex(item => item === minHeight) // 找到最小高度的索引
|
||||
//设置当前子元素项的位置
|
||||
let position = {};
|
||||
position.top = minHeight + uni.upx2px(20) + "px";
|
||||
position.left = listPosition[minIndex].left;
|
||||
listPosition[i] = position;
|
||||
//重新定义数组最小项的高度 进行累加
|
||||
listHeight[minIndex] += data[i].height + uni.upx2px(20);
|
||||
}
|
||||
}
|
||||
this.listHeight = listHeight;
|
||||
this.listPosition = listPosition;
|
||||
}).exec();
|
||||
}, 50)
|
||||
})
|
||||
}
|
||||
},
|
||||
getBrandList() {
|
||||
var data = {
|
||||
page: 1,
|
||||
page_size: 0
|
||||
};
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goodsbrand/page',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
let data = res.data;
|
||||
this.brandList = data.list;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 添加购物车回调
|
||||
*/
|
||||
addCart(id) {
|
||||
},
|
||||
genNonDuplicate(len = 6) {
|
||||
return Number(Math.random().toString().substr(3, len) + Date.now()).toString(36);
|
||||
}
|
||||
}
|
||||
}
|
||||
308
pages_promotion/merch/public/list.scss
Normal file
308
pages_promotion/merch/public/list.scss
Normal file
@@ -0,0 +1,308 @@
|
||||
page {
|
||||
overflow: hidden;
|
||||
}
|
||||
.alarm-red{
|
||||
color: red;
|
||||
}
|
||||
.search-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 30rpx 0;
|
||||
background-color: #fff;
|
||||
.search-input-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 460rpx;
|
||||
height: 70rpx;
|
||||
padding: 0 30rpx;
|
||||
background-color: $color-bg;
|
||||
border-radius: 100rpx;
|
||||
box-sizing: border-box;
|
||||
.search-input-icon {
|
||||
margin-right: 10rpx;
|
||||
color: $color-tip;
|
||||
}
|
||||
}
|
||||
.search-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
color: #fff;
|
||||
border-radius: 100rpx;
|
||||
margin-left: 30rpx;
|
||||
text {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-block {
|
||||
// position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
// margin: 0 30rpx;
|
||||
.choose {
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
min-width: 50px;
|
||||
background-color: #fff;
|
||||
padding: 20rpx 0rpx 0 20rpx;
|
||||
height: 66rpx;
|
||||
}
|
||||
.tab-wrap {
|
||||
// width: calc(100% - 120rpx);
|
||||
width: 100%;
|
||||
// position: relative;
|
||||
// overflow-x: scroll;
|
||||
padding: 24rpx 0rpx 0 20rpx;
|
||||
height: 66rpx;
|
||||
background-color: #fff;
|
||||
// white-space: nowrap;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.tab-item {
|
||||
// display: inline-block;
|
||||
}
|
||||
.active {
|
||||
position: relative;
|
||||
// margin-right: 32rpx;
|
||||
font-weight: 600;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height:6rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-inner {
|
||||
position: relative;
|
||||
margin: 0 30rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: $border-radius;
|
||||
.item-wrap {
|
||||
display: flex;
|
||||
padding: 30rpx;
|
||||
.item-img {
|
||||
margin-right: 20rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
.item-desc {
|
||||
flex: 1;
|
||||
.item-name {
|
||||
width: 450rpx;
|
||||
line-height: 1.6;
|
||||
color: $color-title;
|
||||
display: flex;
|
||||
// white-space: nowrap;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
.name {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.goods-class {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.item-num-wrap {
|
||||
margin-top: 3px;
|
||||
font-size: $font-size-tag;
|
||||
color: $color-tip;
|
||||
text:first-of-type {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
view{
|
||||
font-size: 26rpx;
|
||||
line-height: 1.4;
|
||||
color:#999
|
||||
}
|
||||
}
|
||||
.item-operation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 1;
|
||||
padding-top: 10rpx;
|
||||
.item-price {
|
||||
font-weight: bold;
|
||||
}
|
||||
.iconshenglve {
|
||||
font-size: 48rpx;
|
||||
color: $color-tip;
|
||||
}
|
||||
}
|
||||
.promotion-ident {
|
||||
line-height: 1;
|
||||
padding: 6rpx 0;
|
||||
text{
|
||||
font-size: $font-size-activity-tag;
|
||||
padding: 2rpx 12rpx;
|
||||
border-radius: 4rpx;
|
||||
color: #fff;
|
||||
margin-right:10rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.operation {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border-radius: 10rpx;
|
||||
.operation-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
image {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
text {
|
||||
margin-top: 10rpx;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.screen-wrap {
|
||||
.title {
|
||||
font-size: $font-size-tag;
|
||||
padding: $padding;
|
||||
background: $color-bg;
|
||||
}
|
||||
scroll-view {
|
||||
height: 85%;
|
||||
.item-wrap {
|
||||
border-bottom: 1px solid $color-line;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.label {
|
||||
font-size: $font-size-tag;
|
||||
padding: $padding 30rpx 0 $padding;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.more {
|
||||
font-size: $font-size-tag;
|
||||
picker {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
view {
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
.uni-tag {
|
||||
padding: 0 $padding;
|
||||
font-size: $font-size-goods-tag;
|
||||
background: $color-bg;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
border: 0;
|
||||
margin-left: $margin-updown;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: $margin-updown $margin-both;
|
||||
overflow: hidden;
|
||||
.uni-tag {
|
||||
padding: 0 $padding;
|
||||
font-size: $font-size-goods-tag;
|
||||
background: $color-bg;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
border: 0;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.value-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $padding;
|
||||
.h-line {
|
||||
width: 40rpx;
|
||||
height: 2rpx;
|
||||
background-color: $color-tip;
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
background: $color-line;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: $font-size-goods-tag;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
&:last-child {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
picker {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
view {
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
//position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
button {
|
||||
margin: 0;
|
||||
width: 40%;
|
||||
&:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user