|
@@ -1,394 +1,404 @@
|
|
|
<template>
|
|
|
- <view class="cm-cart-product">
|
|
|
- <template v-if="productList.length > 0">
|
|
|
- <!-- 供应商名称 -->
|
|
|
- <view class="shop-info">
|
|
|
- <template v-if="isExpired">
|
|
|
- <view class="expired">失效商品{{ productList.length }}件</view>
|
|
|
- <view class="clear" @click="deletefailureList">清空失效商品</view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view
|
|
|
- class="radio iconfont"
|
|
|
- :class="data.checked ? 'icon-xuanze' : 'icon-weixuanze'"
|
|
|
- @click="chooseAll"
|
|
|
- ></view>
|
|
|
- <view class="name">{{ data.name }}</view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <!-- 商品列表 -->
|
|
|
- <view class="product-list">
|
|
|
- <view
|
|
|
- class="row"
|
|
|
- v-for="(item, index) in productList"
|
|
|
- :key="index"
|
|
|
- :class="{ 'no-border': index === 0 }"
|
|
|
- >
|
|
|
- <view
|
|
|
- class="radio iconfont"
|
|
|
- :class="item.productsChecked ? 'icon-xuanze' : 'icon-weixuanze'"
|
|
|
- @click="chooseOne(item)"
|
|
|
- v-if="isNormal || isDelete"
|
|
|
- ></view>
|
|
|
- <view class="expired" v-else>失效</view>
|
|
|
- <view class="product">
|
|
|
- <image class="cover" :src="item.mainImage"></image>
|
|
|
- <view class="content">
|
|
|
- <view class="title">{{ item.productName }}</view>
|
|
|
- <!-- 普通列表 -->
|
|
|
- <template v-if="isNormal">
|
|
|
- <view class="params">规格:{{ item.unit || '' }}</view>
|
|
|
- <view class="tags">
|
|
|
- <view class="tag type1">{{ item.heUserId ? '促销' : '自营' }}</view>
|
|
|
- <view
|
|
|
- class="tag type2"
|
|
|
- v-if="item.activeStatus == 1"
|
|
|
- @click="clickPopupShow(item, 2)"
|
|
|
- >活动价
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="footer">
|
|
|
- <view class="price">¥{{ item.price | formatPrice }}</view>
|
|
|
- <view>
|
|
|
- <number-box
|
|
|
+ <view class="cm-cart-product">
|
|
|
+ <template v-if="productList.length > 0">
|
|
|
+ <!-- 供应商名称 -->
|
|
|
+ <view class="shop-info">
|
|
|
+ <template v-if="isExpired">
|
|
|
+ <view class="expired">失效商品{{ productList.length }}件</view>
|
|
|
+ <view class="clear" @click="deletefailureList">清空失效商品</view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view
|
|
|
+ class="radio iconfont"
|
|
|
+ :class="data.checked ? 'icon-xuanze' : 'icon-weixuanze'"
|
|
|
+ @click="chooseAll"
|
|
|
+ ></view>
|
|
|
+ <view class="name">{{ data.name }}</view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <!-- 商品列表 -->
|
|
|
+ <view class="product-list">
|
|
|
+ <view
|
|
|
+ class="row"
|
|
|
+ v-for="(item, index) in productList"
|
|
|
+ :key="index"
|
|
|
+ :class="{ 'no-border': index === 0 }"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="radio iconfont"
|
|
|
+ :class="item.productsChecked ? 'icon-xuanze' : 'icon-weixuanze'"
|
|
|
+ @click="chooseOne(item)"
|
|
|
+ v-if="isNormal || isDelete"
|
|
|
+ ></view>
|
|
|
+ <view class="expired" v-else>失效</view>
|
|
|
+ <view class="product">
|
|
|
+ <image class="cover" :src="item.mainImage"></image>
|
|
|
+ <view class="content">
|
|
|
+ <view class="title">{{ item.productName }}</view>
|
|
|
+ <!-- 普通列表 -->
|
|
|
+ <template v-if="isNormal">
|
|
|
+ <view class="params">规格:{{ item.unit || '' }}</view>
|
|
|
+ <view class="tags">
|
|
|
+ <view class="tag type1">{{ item.heUserId ? '促销' : '自营' }}</view>
|
|
|
+ <view
|
|
|
+ class="tag type2"
|
|
|
+ v-if="item.activeStatus == 1"
|
|
|
+ @click="clickPopupShow(item, 2)"
|
|
|
+ >
|
|
|
+ 活动价
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="footer">
|
|
|
+ <view class="price">¥{{ item.price | formatPrice }}</view>
|
|
|
+ <view>
|
|
|
+ <cm-number-box
|
|
|
+ v-model="item.productCount"
|
|
|
+ :defaultVal="item.productCount"
|
|
|
+ :min="1"
|
|
|
+ max="1000"
|
|
|
+ @change="numberChange(item, $event)"
|
|
|
+ ></cm-number-box>
|
|
|
+ <!-- <number-box
|
|
|
@change="numberChange(item, $event)"
|
|
|
v-if="!isDelete"
|
|
|
:value="item.productCount"
|
|
|
- ></number-box>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-if="isExpired">
|
|
|
- <view class="tip">商品已下架</view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 合计价格 -->
|
|
|
- <!-- <view class="total" v-if="isNormal && !isDelete">
|
|
|
+ ></number-box> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-if="isExpired">
|
|
|
+ <view class="tip">商品已下架</view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 合计价格 -->
|
|
|
+ <!-- <view class="total" v-if="isNormal && !isDelete">
|
|
|
<text class="title">合计:</text> <text class="price">¥{{ data.totalPrice | formatPrice }}</text>
|
|
|
</view> -->
|
|
|
- </template>
|
|
|
- <!-- 促销活动弹窗 -->
|
|
|
- <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
|
|
|
- <!-- 操作弹窗 -->
|
|
|
- <tui-modal
|
|
|
- :show="modal"
|
|
|
- @click="confirm"
|
|
|
- @cancel="modal = false"
|
|
|
- :content="contentModalText"
|
|
|
- color="#333"
|
|
|
- :size="32"
|
|
|
- shape="circle"
|
|
|
- :maskClosable="false"
|
|
|
- ></tui-modal>
|
|
|
- <cm-loading :visible="showLoading" text="加载中..."></cm-loading>
|
|
|
- </view>
|
|
|
+ </template>
|
|
|
+ <!-- 促销活动弹窗 -->
|
|
|
+ <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
|
|
|
+ <!-- 操作弹窗 -->
|
|
|
+ <tui-modal
|
|
|
+ :show="modal"
|
|
|
+ @click="confirm"
|
|
|
+ @cancel="modal = false"
|
|
|
+ :content="contentModalText"
|
|
|
+ color="#333"
|
|
|
+ :size="32"
|
|
|
+ shape="circle"
|
|
|
+ :maskClosable="false"
|
|
|
+ ></tui-modal>
|
|
|
+ <cm-loading :visible="showLoading" text="加载中..."></cm-loading>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import NumberBox from './number-box.vue'
|
|
|
import activiPopup from '@/components/cm-module/productDetails/cm-activipopu'
|
|
|
import CmLoading from '@/components/cm-module/cm-loading/cm-loading.vue'
|
|
|
+import CmNumberBox from '@/components/cm-module/cm-number-box/cm-number-box.vue'
|
|
|
import { mapGetters, mapActions, mapMutations } from 'vuex'
|
|
|
export default {
|
|
|
- name: 'cm-cart-product',
|
|
|
- components: {
|
|
|
- NumberBox,
|
|
|
- activiPopup,
|
|
|
- CmLoading
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- modal: false,
|
|
|
- contentModalText: '',
|
|
|
- popupShow: false,
|
|
|
- handlerPros: {},
|
|
|
- showLoading: false
|
|
|
- }
|
|
|
- },
|
|
|
- props: {
|
|
|
- // 列表类型 list普通列表 delete删除列表 expired失效列表
|
|
|
- listType: {
|
|
|
- type: String,
|
|
|
- default: 'list'
|
|
|
- },
|
|
|
- // 数据
|
|
|
- data: {
|
|
|
- type: [Array, Object],
|
|
|
- default: () => {}
|
|
|
- },
|
|
|
- vkey: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- // 是普通商品列表
|
|
|
- isNormal() {
|
|
|
- return this.listType.indexOf('normal') !== -1
|
|
|
- },
|
|
|
- // 是失效商品列表
|
|
|
- isExpired() {
|
|
|
- return this.listType.indexOf('expired') !== -1
|
|
|
- },
|
|
|
- // 当前状态为删除状态
|
|
|
- isDelete() {
|
|
|
- return this.listType.indexOf('delete') !== -1
|
|
|
- },
|
|
|
- productList() {
|
|
|
- if (this.isExpired) {
|
|
|
- return this.data
|
|
|
- } else {
|
|
|
- return this.data[this.vkey]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapActions('cart', ['updateShoppogCount', 'removeFailureFromCart']),
|
|
|
- ...mapMutations('cart', ['selectProduct', 'selectAllShopProduct', 'selectFailure']),
|
|
|
- // 商品数量变化
|
|
|
- numberChange(product, count) {
|
|
|
- this.$emit('countChange')
|
|
|
- this.countChange(product, count)
|
|
|
- },
|
|
|
- // 勾选 / 取消勾选 供应商下所有商品
|
|
|
- chooseAll() {
|
|
|
- this.selectAllShopProduct({
|
|
|
- shopId: this.data.shopId,
|
|
|
- checked: !this.data.checked
|
|
|
- })
|
|
|
- this.$emit('chooseAll')
|
|
|
- },
|
|
|
- // 勾选到单个商品
|
|
|
- chooseOne(product) {
|
|
|
- if (this.isNormal) {
|
|
|
- this.selectProduct({
|
|
|
- shopId: this.data.shopId,
|
|
|
- productId: product.productId,
|
|
|
- checked: !product.productsChecked
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.selectFailure({
|
|
|
- productId: product.productId,
|
|
|
- checked: !product.productsChecked
|
|
|
- })
|
|
|
- }
|
|
|
- this.$emit('chooseOne')
|
|
|
- },
|
|
|
- //商品数量加加
|
|
|
- countChange(product, count) {
|
|
|
- this.showLoading = true
|
|
|
- this.updateShoppogCount({
|
|
|
- cartId: product.cartId,
|
|
|
- productCount: count
|
|
|
- }).finally(() => {
|
|
|
- this.showLoading = false
|
|
|
- })
|
|
|
- },
|
|
|
- // 促销活动弹窗
|
|
|
- clickPopupShow(pros, type) {
|
|
|
- if (pros.ladderList.length > 0) {
|
|
|
- this.popupShow = true
|
|
|
- this.handlerPros = pros
|
|
|
- }
|
|
|
- },
|
|
|
- // 清空失效商品
|
|
|
- deletefailureList() {
|
|
|
- this.modal = true
|
|
|
- this.contentModalText = '确定清除所有失效商品吗?'
|
|
|
- },
|
|
|
- // 确认清空
|
|
|
- confirm(e) {
|
|
|
- if (e.index !== 1) return (this.modal = false)
|
|
|
- this.showLoading = true
|
|
|
- this.removeFailureFromCart().finally(() => {
|
|
|
- this.modal = false
|
|
|
- this.showLoading = false
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+ name: 'cm-cart-product',
|
|
|
+ components: {
|
|
|
+ NumberBox,
|
|
|
+ activiPopup,
|
|
|
+ CmLoading,
|
|
|
+ CmNumberBox
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ modal: false,
|
|
|
+ contentModalText: '',
|
|
|
+ popupShow: false,
|
|
|
+ handlerPros: {},
|
|
|
+ showLoading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ // 列表类型 list普通列表 delete删除列表 expired失效列表
|
|
|
+ listType: {
|
|
|
+ type: String,
|
|
|
+ default: 'list'
|
|
|
+ },
|
|
|
+ // 数据
|
|
|
+ data: {
|
|
|
+ type: [Array, Object],
|
|
|
+ default: () => {}
|
|
|
+ },
|
|
|
+ vkey: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 是普通商品列表
|
|
|
+ isNormal() {
|
|
|
+ return this.listType.indexOf('normal') !== -1
|
|
|
+ },
|
|
|
+ // 是失效商品列表
|
|
|
+ isExpired() {
|
|
|
+ return this.listType.indexOf('expired') !== -1
|
|
|
+ },
|
|
|
+ // 当前状态为删除状态
|
|
|
+ isDelete() {
|
|
|
+ return this.listType.indexOf('delete') !== -1
|
|
|
+ },
|
|
|
+ productList() {
|
|
|
+ if (this.isExpired) {
|
|
|
+ return this.data
|
|
|
+ } else {
|
|
|
+ return this.data[this.vkey]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions('cart', ['updateShoppogCount', 'removeFailureFromCart']),
|
|
|
+ ...mapMutations('cart', ['selectProduct', 'selectAllShopProduct', 'selectFailure']),
|
|
|
+ // 商品数量变化
|
|
|
+ numberChange(product, count) {
|
|
|
+ this.$emit('countChange')
|
|
|
+ this.countChange(product, count)
|
|
|
+ },
|
|
|
+ // 勾选 / 取消勾选 供应商下所有商品
|
|
|
+ chooseAll() {
|
|
|
+ this.selectAllShopProduct({
|
|
|
+ shopId: this.data.shopId,
|
|
|
+ checked: !this.data.checked
|
|
|
+ })
|
|
|
+ this.$emit('chooseAll')
|
|
|
+ },
|
|
|
+ // 勾选到单个商品
|
|
|
+ chooseOne(product) {
|
|
|
+ if (this.isNormal) {
|
|
|
+ this.selectProduct({
|
|
|
+ shopId: this.data.shopId,
|
|
|
+ productId: product.productId,
|
|
|
+ checked: !product.productsChecked
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.selectFailure({
|
|
|
+ productId: product.productId,
|
|
|
+ checked: !product.productsChecked
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$emit('chooseOne')
|
|
|
+ },
|
|
|
+ //商品数量加加
|
|
|
+ countChange(product, count) {
|
|
|
+ this.showLoading = true
|
|
|
+ this.updateShoppogCount({
|
|
|
+ cartId: product.cartId,
|
|
|
+ productCount: count
|
|
|
+ }).finally(() => {
|
|
|
+ this.showLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 促销活动弹窗
|
|
|
+ clickPopupShow(pros, type) {
|
|
|
+ if (pros.ladderList.length > 0) {
|
|
|
+ this.popupShow = true
|
|
|
+ this.handlerPros = pros
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 清空失效商品
|
|
|
+ deletefailureList() {
|
|
|
+ this.modal = true
|
|
|
+ this.contentModalText = '确定清除所有失效商品吗?'
|
|
|
+ },
|
|
|
+ // 确认清空
|
|
|
+ confirm(e) {
|
|
|
+ if (e.index !== 1) return (this.modal = false)
|
|
|
+ this.showLoading = true
|
|
|
+ this.removeFailureFromCart().finally(() => {
|
|
|
+ this.modal = false
|
|
|
+ this.showLoading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
$grid: 24rpx;
|
|
|
.cm-cart-product {
|
|
|
- overflow: hidden;
|
|
|
- background: #fff;
|
|
|
- margin-bottom: $grid;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: $grid;
|
|
|
}
|
|
|
.shop-info {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: $grid $grid 0;
|
|
|
- .name {
|
|
|
- width: 622rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .expired {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .clear {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 184rpx;
|
|
|
- height: 42rpx;
|
|
|
- background: #fff8fd;
|
|
|
- border: 1rpx solid #ff457b;
|
|
|
- border-radius: 28rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #ff457b;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: $grid $grid 0;
|
|
|
+ .name {
|
|
|
+ width: 622rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .expired {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .clear {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 184rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ background: #fff8fd;
|
|
|
+ border: 1rpx solid #ff457b;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #ff457b;
|
|
|
+ }
|
|
|
}
|
|
|
.radio {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #b2b2b2;
|
|
|
- &.icon-xuanze {
|
|
|
- color: #f83c6c;
|
|
|
- }
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #b2b2b2;
|
|
|
+ &.icon-xuanze {
|
|
|
+ color: #f83c6c;
|
|
|
+ }
|
|
|
}
|
|
|
.product-list {
|
|
|
- .row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin: 0 $grid;
|
|
|
- padding: 30rpx 0;
|
|
|
- border-top: 1px solid #e1e1e1;
|
|
|
- &.no-border {
|
|
|
- border-top: 0;
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- .expired {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 72rpx;
|
|
|
- height: 36rpx;
|
|
|
- background: rgba(51, 51, 51, 0.3);
|
|
|
- border-radius: 24rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- .product {
|
|
|
- width: 622rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .cover {
|
|
|
- width: 180rpx;
|
|
|
- height: 180rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1rpx dashed #e1e1e1;
|
|
|
- }
|
|
|
- .content {
|
|
|
- width: 442rpx;
|
|
|
- .title,
|
|
|
- .tags,
|
|
|
- .params,
|
|
|
- .footer,
|
|
|
- .tip {
|
|
|
- padding-left: $grid;
|
|
|
- }
|
|
|
- .tags,
|
|
|
- .params {
|
|
|
- margin-top: 10rpx;
|
|
|
- }
|
|
|
- .tip {
|
|
|
- margin-top: 80rpx;
|
|
|
- margin-bottom: 0;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #f83c6c;
|
|
|
- }
|
|
|
- .title {
|
|
|
- height: 66rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333333;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2; // 这里控制几行显示省略号
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- .tags {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- height: 24rpx;
|
|
|
- .tag {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 30rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- &.type1 {
|
|
|
- width: 56rpx;
|
|
|
- background: #ff457b;
|
|
|
- border-radius: 4rpx;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- &.type2 {
|
|
|
- width: 80rpx;
|
|
|
- background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
|
|
|
- no-repeat;
|
|
|
- background-size: 80rpx 30rpx;
|
|
|
- color: #f83c6c;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .params {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .footer {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-end;
|
|
|
- margin-top: 4rpx;
|
|
|
- height: 48rpx;
|
|
|
- .add-cart {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- background: #ff457b;
|
|
|
- color: #fff;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- .price {
|
|
|
- flex: 1;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #f83c6c;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 $grid;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-top: 1px solid #e1e1e1;
|
|
|
+ &.no-border {
|
|
|
+ border-top: 0;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .expired {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 72rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background: rgba(51, 51, 51, 0.3);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product {
|
|
|
+ width: 622rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .cover {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1rpx dashed #e1e1e1;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 442rpx;
|
|
|
+ .title,
|
|
|
+ .tags,
|
|
|
+ .params,
|
|
|
+ .footer,
|
|
|
+ .tip {
|
|
|
+ padding-left: $grid;
|
|
|
+ }
|
|
|
+ .tags,
|
|
|
+ .params {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ .tip {
|
|
|
+ margin-top: 80rpx;
|
|
|
+ margin-bottom: 0;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #f83c6c;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ height: 66rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2; // 这里控制几行显示省略号
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .tags {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ height: 24rpx;
|
|
|
+ .tag {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ &.type1 {
|
|
|
+ width: 56rpx;
|
|
|
+ background: #ff457b;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ &.type2 {
|
|
|
+ width: 80rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
|
|
|
+ no-repeat;
|
|
|
+ background-size: 80rpx 30rpx;
|
|
|
+ color: #f83c6c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .params {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ .add-cart {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background: #ff457b;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #f83c6c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.total {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
- padding: 30rpx $grid;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: bold;
|
|
|
- .title {
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .price {
|
|
|
- color: #ff457b;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30rpx $grid;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ .title {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ color: #ff457b;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|