通过微信开发者工具 商城模板 创建新小程序
This commit is contained in:
66
mini-program/pages/goods/details/components/buy-bar/index.js
Normal file
66
mini-program/pages/goods/details/components/buy-bar/index.js
Normal file
@@ -0,0 +1,66 @@
|
||||
Component({
|
||||
externalClasses: ['wr-sold-out', 'wr-class'],
|
||||
|
||||
options: { multipleSlots: true },
|
||||
|
||||
properties: {
|
||||
soldout: {
|
||||
// 商品是否下架
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
jumpArray: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
isStock: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
}, // 是否有库存
|
||||
isSlotButton: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
}, // 是否开启按钮插槽
|
||||
shopCartNum: {
|
||||
type: Number, // 购物车气泡数量
|
||||
},
|
||||
buttonType: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
},
|
||||
minDiscountPrice: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
minSalePrice: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
},
|
||||
|
||||
data: {
|
||||
fillPrice: false,
|
||||
},
|
||||
|
||||
methods: {
|
||||
toAddCart() {
|
||||
const { isStock } = this.properties;
|
||||
if (!isStock) return;
|
||||
this.triggerEvent('toAddCart');
|
||||
},
|
||||
|
||||
toBuyNow(e) {
|
||||
const { isStock } = this.properties;
|
||||
if (!isStock) return;
|
||||
this.triggerEvent('toBuyNow', e);
|
||||
},
|
||||
|
||||
toNav(e) {
|
||||
const { url } = e.currentTarget.dataset;
|
||||
return this.triggerEvent('toNav', {
|
||||
e,
|
||||
url,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
<view class="flex soldout flex-center wr-sold-out" wx:if="{{soldout || !isStock}}">
|
||||
{{soldout ? '商品已下架' : '商品已售馨'}}
|
||||
</view>
|
||||
<view class="footer-cont flex flex-between wr-class">
|
||||
<view class="flex flex-between bottom-operate-left" wx:if="{{jumpArray.length > 0}}">
|
||||
<view
|
||||
wx:for="{{jumpArray}}"
|
||||
wx:key="index"
|
||||
class="icon-warp operate-wrap"
|
||||
bindtap="toNav"
|
||||
data-ele="foot_navigation"
|
||||
data-index="{{index}}"
|
||||
data-url="{{item.url}}"
|
||||
>
|
||||
<view>
|
||||
<text wx:if="{{shopCartNum > 0 && item.showCartNum}}" class="tag-cart-num">
|
||||
{{shopCartNum > 99 ? '99+' : shopCartNum}}
|
||||
</text>
|
||||
<t-icon prefix="wr" name="{{item.iconName}}" size="40rpx" />
|
||||
<view class="operate-text">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block wx:if="{{buttonType === 1}}">
|
||||
<view class="flex buy-buttons">
|
||||
<view class="bar-separately {{soldout || !isStock ? 'bar-addCart-disabled' : ''}}" bindtap="toAddCart">
|
||||
加入购物车
|
||||
</view>
|
||||
<view class="bar-buy {{soldout || !isStock ? 'bar-buyNow-disabled' : ''}}" bindtap="toBuyNow">
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:if="{{isSlotButton}}">
|
||||
<slot name="buyButton" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
107
mini-program/pages/goods/details/components/buy-bar/index.wxss
Normal file
107
mini-program/pages/goods/details/components/buy-bar/index.wxss
Normal file
@@ -0,0 +1,107 @@
|
||||
.footer-cont {
|
||||
background-color: #fff;
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.icon-warp {
|
||||
width: 110rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.operate-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bottom-operate-left {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom-operate-left .icon-warp {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.tag-cart-num {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 50rpx;
|
||||
right: auto;
|
||||
top: 6rpx;
|
||||
color: #fff;
|
||||
line-height: 24rpx;
|
||||
text-align: center;
|
||||
z-index: 99;
|
||||
white-space: nowrap;
|
||||
min-width: 28rpx;
|
||||
border-radius: 14rpx;
|
||||
background-color: #fa550f !important;
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
padding: 2rpx 6rpx;
|
||||
}
|
||||
|
||||
.operate-text {
|
||||
color: #666;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.soldout {
|
||||
height: 80rpx;
|
||||
background: rgba(170, 170, 170, 1);
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.addCart-disabled,
|
||||
.bar-addCart-disabled {
|
||||
background: rgba(221, 221, 221, 1) !important;
|
||||
color: #fff !important;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.buyNow-disabled,
|
||||
.bar-buyNow-disabled {
|
||||
background: rgba(198, 198, 198, 1) !important;
|
||||
color: #fff !important;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.bar-separately,
|
||||
.bar-buy {
|
||||
width: 254rpx;
|
||||
height: 80rpx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bar-separately {
|
||||
background: #ffece9;
|
||||
color: #fa4126;
|
||||
border-radius: 40rpx 0 0 40rpx;
|
||||
}
|
||||
|
||||
.bar-buy {
|
||||
background-color: #fa4126;
|
||||
border-radius: 0rpx 40rpx 40rpx 0rpx;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
justify-content: center;
|
||||
-webkit-justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-align-items: center;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
-webkit-justify-content: space-between;
|
||||
}
|
||||
@@ -0,0 +1,339 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
/* eslint-disable no-nested-ternary */
|
||||
import Toast from 'tdesign-miniprogram/toast/index';
|
||||
|
||||
Component({
|
||||
options: {
|
||||
multipleSlots: true,
|
||||
addGlobalClass: true,
|
||||
},
|
||||
|
||||
properties: {
|
||||
src: {
|
||||
type: String,
|
||||
},
|
||||
title: String,
|
||||
show: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
limitBuyInfo: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
isStock: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
limitMaxCount: {
|
||||
type: Number,
|
||||
value: 999,
|
||||
},
|
||||
limitMinCount: {
|
||||
type: Number,
|
||||
value: 1,
|
||||
},
|
||||
skuList: {
|
||||
type: Array,
|
||||
value: [],
|
||||
observer(skuList) {
|
||||
if (skuList && skuList.length > 0) {
|
||||
if (this.initStatus) {
|
||||
this.initData();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
specList: {
|
||||
type: Array,
|
||||
value: [],
|
||||
observer(specList) {
|
||||
if (specList && specList.length > 0) {
|
||||
this.initData();
|
||||
}
|
||||
},
|
||||
},
|
||||
outOperateStatus: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
hasAuth: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
value: 1,
|
||||
observer(count) {
|
||||
this.setData({
|
||||
buyNum: count,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
initStatus: false,
|
||||
selectedSku: {},
|
||||
selectSpecObj: {},
|
||||
|
||||
data: {
|
||||
buyNum: 1,
|
||||
isAllSelectedSku: false,
|
||||
},
|
||||
|
||||
methods: {
|
||||
initData() {
|
||||
const { skuList } = this.properties;
|
||||
const { specList } = this.properties;
|
||||
specList.forEach((item) => {
|
||||
if (item.specValueList.length > 0) {
|
||||
item.specValueList.forEach((subItem) => {
|
||||
const obj = this.checkSkuStockQuantity(subItem.specValueId, skuList);
|
||||
subItem.hasStockObj = obj;
|
||||
});
|
||||
}
|
||||
});
|
||||
const selectedSku = {};
|
||||
specList.forEach((item) => {
|
||||
selectedSku[item.specId] = '';
|
||||
});
|
||||
this.setData({
|
||||
specList,
|
||||
});
|
||||
this.selectSpecObj = {};
|
||||
this.selectedSku = {};
|
||||
this.initStatus = true;
|
||||
},
|
||||
|
||||
checkSkuStockQuantity(specValueId, skuList) {
|
||||
let hasStock = false;
|
||||
const array = [];
|
||||
skuList.forEach((item) => {
|
||||
(item.specInfo || []).forEach((subItem) => {
|
||||
if (subItem.specValueId === specValueId && item.quantity > 0) {
|
||||
const subArray = [];
|
||||
(item.specInfo || []).forEach((specItem) => {
|
||||
subArray.push(specItem.specValueId);
|
||||
});
|
||||
array.push(subArray);
|
||||
hasStock = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
return {
|
||||
hasStock,
|
||||
specsArray: array,
|
||||
};
|
||||
},
|
||||
|
||||
chooseSpecValueId(specValueId, specId) {
|
||||
const { selectSpecObj } = this;
|
||||
const { skuList, specList } = this.properties;
|
||||
if (selectSpecObj[specId]) {
|
||||
selectSpecObj[specId] = [];
|
||||
this.selectSpecObj = selectSpecObj;
|
||||
} else {
|
||||
selectSpecObj[specId] = [];
|
||||
}
|
||||
|
||||
const itemAllSpecArray = [];
|
||||
const itemUnSelectArray = [];
|
||||
const itemSelectArray = [];
|
||||
specList.forEach((item) => {
|
||||
if (item.specId === specId) {
|
||||
const subSpecValueItem = item.specValueList.find((subItem) => subItem.specValueId === specValueId);
|
||||
let specSelectStatus = false;
|
||||
item.specValueList.forEach((n) => {
|
||||
itemAllSpecArray.push(n.hasStockObj.specsArray);
|
||||
if (n.isSelected) {
|
||||
specSelectStatus = true;
|
||||
}
|
||||
if (n.hasStockObj.hasStock) {
|
||||
itemSelectArray.push(n.specValueId);
|
||||
} else {
|
||||
itemUnSelectArray.push(n.specValueId);
|
||||
}
|
||||
});
|
||||
if (specSelectStatus) {
|
||||
selectSpecObj[specId] = this.flatten(subSpecValueItem?.hasStockObj.specsArray.concat(itemSelectArray));
|
||||
} else {
|
||||
const subSet = function (arr1, arr2) {
|
||||
const set2 = new Set(arr2);
|
||||
const subset = [];
|
||||
arr1.forEach((val) => {
|
||||
if (!set2.has(val)) {
|
||||
subset.push(val);
|
||||
}
|
||||
});
|
||||
return subset;
|
||||
};
|
||||
selectSpecObj[specId] = subSet(this.flatten(itemAllSpecArray), this.flatten(itemUnSelectArray));
|
||||
}
|
||||
} else {
|
||||
// 未点击规格的逻辑
|
||||
const itemSelectArray = [];
|
||||
let specSelectStatus = false;
|
||||
item.specValueList.map(
|
||||
// 找到有库存的规格数组
|
||||
(n) => {
|
||||
itemSelectArray.push(n.hasStockObj.specsArray);
|
||||
if (n.isSelected) {
|
||||
specSelectStatus = true;
|
||||
}
|
||||
n.hasStockObj.hasStock = true;
|
||||
return n;
|
||||
},
|
||||
);
|
||||
if (specSelectStatus) {
|
||||
selectSpecObj[item.specId] = this.flatten(itemSelectArray);
|
||||
} else {
|
||||
delete selectSpecObj[item.specId];
|
||||
}
|
||||
}
|
||||
this.selectSpecObj = selectSpecObj;
|
||||
});
|
||||
const combatArray = Object.values(selectSpecObj);
|
||||
if (combatArray.length > 0) {
|
||||
const showArray = combatArray.reduce((x, y) => this.getIntersection(x, y));
|
||||
const lastResult = Array.from(new Set(showArray));
|
||||
specList.forEach((item) => {
|
||||
item.specValueList.forEach((subItem) => {
|
||||
if (lastResult.includes(subItem.specValueId)) {
|
||||
subItem.hasStockObj.hasStock = true;
|
||||
} else {
|
||||
subItem.hasStockObj.hasStock = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
specList.forEach((item) => {
|
||||
if (item.specValueList.length > 0) {
|
||||
item.specValueList.forEach((subItem) => {
|
||||
const obj = this.checkSkuStockQuantity(subItem.specValueId, skuList);
|
||||
subItem.hasStockObj = obj;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
this.setData({
|
||||
specList,
|
||||
});
|
||||
},
|
||||
|
||||
flatten(input) {
|
||||
const stack = [...input];
|
||||
const res = [];
|
||||
while (stack.length) {
|
||||
const next = stack.pop();
|
||||
if (Array.isArray(next)) {
|
||||
stack.push(...next);
|
||||
} else {
|
||||
res.push(next);
|
||||
}
|
||||
}
|
||||
return res.reverse();
|
||||
},
|
||||
|
||||
getIntersection(array, nextArray) {
|
||||
return array.filter((item) => nextArray.includes(item));
|
||||
},
|
||||
|
||||
toChooseItem(e) {
|
||||
const { isStock } = this.properties;
|
||||
if (!isStock) return;
|
||||
const { id } = e.currentTarget.dataset;
|
||||
const specId = e.currentTarget.dataset.specid;
|
||||
const hasStock = e.currentTarget.dataset.hasstock;
|
||||
if (!hasStock) {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '该规格已售罄',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let { selectedSku } = this;
|
||||
const { specList } = this.properties;
|
||||
selectedSku =
|
||||
selectedSku[specId] === id ? { ...this.selectedSku, [specId]: '' } : { ...this.selectedSku, [specId]: id };
|
||||
specList.forEach((item) => {
|
||||
item.specValueList.forEach((valuesItem) => {
|
||||
if (item.specId === specId) {
|
||||
valuesItem.isSelected = valuesItem.specValueId === selectedSku[specId];
|
||||
}
|
||||
});
|
||||
});
|
||||
this.chooseSpecValueId(id, specId);
|
||||
const isAllSelectedSku = this.isAllSelected(specList, selectedSku);
|
||||
if (!isAllSelectedSku) {
|
||||
this.setData({
|
||||
selectSkuSellsPrice: 0,
|
||||
selectSkuImg: '',
|
||||
});
|
||||
}
|
||||
this.setData({
|
||||
specList,
|
||||
isAllSelectedSku,
|
||||
});
|
||||
this.selectedSku = selectedSku;
|
||||
this.triggerEvent('change', {
|
||||
specList,
|
||||
selectedSku,
|
||||
isAllSelectedSku,
|
||||
});
|
||||
},
|
||||
|
||||
// 判断是否所有的sku都已经选中
|
||||
isAllSelected(skuTree, selectedSku) {
|
||||
const selected = Object.keys(selectedSku).filter((skuKeyStr) => selectedSku[skuKeyStr] !== '');
|
||||
return skuTree.length === selected.length;
|
||||
},
|
||||
|
||||
handlePopupHide() {
|
||||
this.triggerEvent('closeSpecsPopup', {
|
||||
show: false,
|
||||
});
|
||||
},
|
||||
|
||||
specsConfirm() {
|
||||
const { isStock } = this.properties;
|
||||
if (!isStock) return;
|
||||
this.triggerEvent('specsConfirm');
|
||||
},
|
||||
|
||||
addCart() {
|
||||
const { isStock } = this.properties;
|
||||
if (!isStock) return;
|
||||
this.triggerEvent('addCart');
|
||||
},
|
||||
|
||||
buyNow() {
|
||||
const { isAllSelectedSku } = this.data;
|
||||
const { isStock } = this.properties;
|
||||
if (!isStock) return;
|
||||
this.triggerEvent('buyNow', {
|
||||
isAllSelectedSku,
|
||||
});
|
||||
},
|
||||
|
||||
// 总处理
|
||||
setBuyNum(buyNum) {
|
||||
this.setData({
|
||||
buyNum,
|
||||
});
|
||||
this.triggerEvent('changeNum', {
|
||||
buyNum,
|
||||
});
|
||||
},
|
||||
|
||||
handleBuyNumChange(e) {
|
||||
const { value } = e.detail;
|
||||
this.setData({
|
||||
buyNum: value,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "tdesign-miniprogram/popup/popup",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-image": "/components/webp-image/index",
|
||||
"t-stepper": "tdesign-miniprogram/stepper/stepper",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
<t-popup visible="{{show}}" placement="bottom" bind:visible-change="handlePopupHide">
|
||||
<view class="popup-container">
|
||||
<view class="popup-close" bindtap="handlePopupHide">
|
||||
<t-icon name="close" size="36rpx" />
|
||||
</view>
|
||||
<view class="popup-sku-header">
|
||||
<t-image t-class="popup-sku-header__img" src="{{src}}" />
|
||||
<view class="popup-sku-header__goods-info">
|
||||
<view class="popup-sku__goods-name">{{title}}</view>
|
||||
<view class="goods-price-container">
|
||||
<slot name="goods-price" />
|
||||
</view>
|
||||
<!-- 已选规格 -->
|
||||
<view class="popup-sku__selected-spec">
|
||||
<view>选择：</view>
|
||||
<view wx:for="{{specList}}" wx:key="specId">
|
||||
<view
|
||||
class="popup-sku__selected-item"
|
||||
wx:for="{{item.specValueList}}"
|
||||
wx:for-item="selectedItem"
|
||||
wx:if="{{selectedItem.isSelected}}"
|
||||
wx:key="specValueId"
|
||||
>
|
||||
{{selectedItem.specValue}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-sku-body">
|
||||
<view class="popup-sku-group-container">
|
||||
<view class="popup-sku-row" wx:for="{{specList}}" wx:key="specId">
|
||||
<view class="popup-sku-row__title">{{item.title}}</view>
|
||||
<block
|
||||
wx:for="{{item.specValueList}}"
|
||||
wx:for-item="valuesItem"
|
||||
wx:for-index="valuesIndex"
|
||||
wx:key="specValueId"
|
||||
>
|
||||
<view
|
||||
class="popup-sku-row__item {{valuesItem.isSelected ? 'popup-sku-row__item--active' : ''}} {{!valuesItem.hasStockObj.hasStock || !isStock ? 'disabled-sku-selected' : ''}}"
|
||||
data-specid="{{item.specId}}"
|
||||
data-id="{{valuesItem.specValueId}}"
|
||||
data-val="{{valuesItem.specValue}}"
|
||||
data-hasStock="{{valuesItem.hasStockObj.hasStock}}"
|
||||
bindtap="toChooseItem"
|
||||
>
|
||||
{{valuesItem.specValue}}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-sku-stepper-stock">
|
||||
<view class="popup-sku-stepper-container">
|
||||
<view class="popup-sku__stepper-title">
|
||||
购买数量
|
||||
<view class="limit-text" wx:if="{{limitBuyInfo}}"> ({{limitBuyInfo}}) </view>
|
||||
</view>
|
||||
<t-stepper value="{{buyNum}}" min="{{1}}" max="{{2}}" theme="filled" bind:change="handleBuyNumChange" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:if="{{outOperateStatus}}" class="single-confirm-btn {{!isStock ? 'disabled' : ''}}" bindtap="specsConfirm">
|
||||
确定
|
||||
</view>
|
||||
<view
|
||||
class="popup-sku-actions flex flex-between {{!isStock ? 'popup-sku-disabled' : ''}}"
|
||||
wx:if="{{!outOperateStatus}}"
|
||||
>
|
||||
<view class="sku-operate">
|
||||
<view class="selected-sku-btn sku-operate-addCart {{!isStock ? 'disabled' : ''}}" bindtap="addCart">
|
||||
加入购物车
|
||||
</view>
|
||||
</view>
|
||||
<view class="sku-operate">
|
||||
<view class="selected-sku-btn sku-operate-buyNow {{!isStock ? 'disabled' : ''}}" bindtap="buyNow">
|
||||
立即购买
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<slot name="bottomSlot" />
|
||||
</view>
|
||||
</t-popup>
|
||||
<t-toast id="t-toast" />
|
||||
@@ -0,0 +1,300 @@
|
||||
.popup-container {
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
|
||||
}
|
||||
|
||||
.popup-container .popup-close {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
z-index: 9;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.popup-sku-header {
|
||||
display: flex;
|
||||
padding: 30rpx 28rpx 0 30rpx;
|
||||
}
|
||||
|
||||
.popup-sku-header .popup-sku-header__img {
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #d8d8d8;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.popup-sku-header .popup-sku-header__goods-info {
|
||||
position: relative;
|
||||
width: 500rpx;
|
||||
}
|
||||
|
||||
.popup-sku-header .popup-sku-header__goods-info .popup-sku__goods-name {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
width: 430rpx;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.popup-sku-header .popup-sku-header__goods-info .popup-sku__selected-spec {
|
||||
display: flex;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.popup-sku-header
|
||||
.popup-sku-header__goods-info
|
||||
.popup-sku__selected-spec
|
||||
.popup-sku__selected-item {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.popup-sku-body {
|
||||
margin: 0 30rpx 40rpx;
|
||||
max-height: 600rpx;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-group-container .popup-sku-row {
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-group-container
|
||||
.popup-sku-row
|
||||
.popup-sku-row__title {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-group-container .popup-sku-row .popup-sku-row__item {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
min-width: 128rpx;
|
||||
height: 56rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #f5f5f5;
|
||||
margin: 19rpx 26rpx 0 0;
|
||||
padding: 0 16rpx;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-group-container
|
||||
.popup-sku-row
|
||||
.popup-sku-row__item.popup-sku-row__item--active {
|
||||
border: 2rpx solid #fa4126;
|
||||
color: #fa4126;
|
||||
background: rgba(255, 95, 21, 0.04);
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-group-container
|
||||
.popup-sku-row
|
||||
.disabled-sku-selected {
|
||||
background: #f5f5f5 !important;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-stepper-stock
|
||||
.popup-sku-stepper-container
|
||||
.popup-sku__stepper-title {
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-stepper-stock
|
||||
.popup-sku-stepper-container
|
||||
.popup-sku__stepper-title
|
||||
.limit-text {
|
||||
margin-left: 10rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-stepper-stock
|
||||
.popup-sku-stepper-container
|
||||
.popup-stepper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
height: 48rpx;
|
||||
line-height: 62rpx;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-stepper-stock
|
||||
.popup-sku-stepper-container
|
||||
.popup-stepper
|
||||
.input-btn,
|
||||
.popup-sku-body
|
||||
.popup-sku-stepper-stock
|
||||
.popup-sku-stepper-container
|
||||
.popup-stepper
|
||||
.input-num-wrap {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-stepper-stock
|
||||
.popup-sku-stepper-container
|
||||
.popup-stepper
|
||||
.input-num-wrap {
|
||||
color: #282828;
|
||||
display: flex;
|
||||
max-width: 76rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-stepper-stock
|
||||
.popup-sku-stepper-container
|
||||
.popup-stepper
|
||||
.input-num-wrap
|
||||
.input-num {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-stepper-stock
|
||||
.popup-sku-stepper-container
|
||||
.popup-stepper
|
||||
.input-btn {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-stepper-stock
|
||||
.popup-sku-stepper-container
|
||||
.popup-stepper
|
||||
.popup-stepper__minus {
|
||||
margin-right: 4rpx;
|
||||
border-radius: 4rpx;
|
||||
color: #9a979b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-stepper-stock
|
||||
.popup-sku-stepper-container
|
||||
.popup-stepper
|
||||
.popup-stepper__plus {
|
||||
margin-left: 4rpx;
|
||||
border-radius: 4rpx;
|
||||
color: #9a979b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-stepper-stock
|
||||
.popup-sku-stepper-container
|
||||
.popup-stepper
|
||||
.popup-stepper__plus::after {
|
||||
width: 24rpx;
|
||||
height: 3rpx;
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.popup-sku-body
|
||||
.popup-sku-stepper-stock
|
||||
.popup-sku-stepper-container
|
||||
.popup-stepper
|
||||
.popup-stepper__plus::before {
|
||||
width: 3rpx;
|
||||
height: 24rpx;
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.popup-sku-actions {
|
||||
font-size: 32rpx;
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.popup-sku-actions .sku-operate {
|
||||
height: 80rpx;
|
||||
width: 50%;
|
||||
color: #fff;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
|
||||
.popup-sku-actions .sku-operate .sku-operate-addCart {
|
||||
background-color: #ffece9;
|
||||
color: #fa4126;
|
||||
border-radius: 48rpx 0 0 48rpx;
|
||||
}
|
||||
|
||||
.popup-sku-actions .sku-operate .sku-operate-addCart.disabled {
|
||||
background: rgb(221, 221, 221);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.popup-sku-actions .sku-operate .sku-operate-buyNow {
|
||||
background-color: #fa4126;
|
||||
border-radius: 0 48rpx 48rpx 0;
|
||||
}
|
||||
|
||||
.popup-sku-actions .sku-operate .sku-operate-buyNow.disabled {
|
||||
color: #fff;
|
||||
background: rgb(198, 198, 198);
|
||||
}
|
||||
|
||||
.popup-sku-actions .sku-operate .selected-sku-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup-container .single-confirm-btn {
|
||||
border-radius: 48rpx;
|
||||
color: #ffffff;
|
||||
margin: 0 32rpx;
|
||||
font-size: 32rpx;
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
background-color: #fa4126;
|
||||
}
|
||||
|
||||
.popup-container .single-confirm-btn.disabled {
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
Component({
|
||||
options: {
|
||||
multipleSlots: true,
|
||||
},
|
||||
|
||||
properties: {
|
||||
list: Array,
|
||||
title: {
|
||||
type: String,
|
||||
value: '促销说明',
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
|
||||
// data: {
|
||||
// list: [],
|
||||
// },
|
||||
|
||||
methods: {
|
||||
change(e) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
this.triggerEvent('promotionChange', {
|
||||
index,
|
||||
});
|
||||
},
|
||||
|
||||
closePromotionPopup() {
|
||||
this.triggerEvent('closePromotionPopup', {
|
||||
show: false,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "tdesign-miniprogram/popup/popup",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<t-popup visible="{{show}}" placement="bottom" bind:visible-change="closePromotionPopup">
|
||||
<view class="promotion-popup-container">
|
||||
<view class="promotion-popup-close" bindtap="closePromotionPopup">
|
||||
<t-icon name="close" size="36rpx" />
|
||||
</view>
|
||||
<view class="promotion-popup-title">
|
||||
<view class="title">{{title}}</view>
|
||||
</view>
|
||||
<view class="promotion-popup-content">
|
||||
<view class="promotion-detail-list">
|
||||
<view
|
||||
class="list-item"
|
||||
wx:for="{{list}}"
|
||||
wx:key="index"
|
||||
bindtap="change"
|
||||
data-index="{{index}}"
|
||||
>
|
||||
<view class="tag">{{item.tag}}</view>
|
||||
<view class="content">
|
||||
<text class="list-content">{{item.label ? item.label : ''}}</text>
|
||||
</view>
|
||||
<t-icon
|
||||
class="collect-btn"
|
||||
name="chevron-right"
|
||||
size="40rpx"
|
||||
color="#bbb"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<slot name="promotion-bottom" />
|
||||
</view>
|
||||
</t-popup>
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
.promotion-popup-container {
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
|
||||
.promotion-popup-container .promotion-popup-close {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
z-index: 9;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
}
|
||||
|
||||
.promotion-popup-container .promotion-popup-close .market {
|
||||
font-size: 25rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.promotion-popup-container .promotion-popup-title {
|
||||
height: 100rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.promotion-popup-container .promotion-popup-title {
|
||||
font-size: 32rpx;
|
||||
color: #222427;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.promotion-popup-container .promotion-popup-content {
|
||||
min-height: 400rpx;
|
||||
max-height: 600rpx;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.promotion-popup-container .promotion-popup-content .promotion-detail-list {
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.promotion-popup-container
|
||||
.promotion-popup-content
|
||||
.promotion-detail-list
|
||||
.list-item:last-child {
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
border-bottom: 0;
|
||||
padding-bottom: calc(28rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.promotion-popup-container
|
||||
.promotion-popup-content
|
||||
.promotion-detail-list
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 0 28rpx;
|
||||
position: relative;
|
||||
font-size: 24rpx;
|
||||
color: #222427;
|
||||
}
|
||||
|
||||
.promotion-popup-container
|
||||
.promotion-popup-content
|
||||
.promotion-detail-list
|
||||
.list-item
|
||||
.tag {
|
||||
box-sizing: border-box;
|
||||
font-size: 20rpx;
|
||||
line-height: 32rpx;
|
||||
padding: 2rpx 12rpx;
|
||||
background-color: #ffece9;
|
||||
margin-right: 16rpx;
|
||||
display: inline-flex;
|
||||
color: #fa4126;
|
||||
border-radius: 54rpx;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
top: 2rpx;
|
||||
}
|
||||
|
||||
.promotion-popup-container
|
||||
.promotion-popup-content
|
||||
.promotion-detail-list
|
||||
.list-item
|
||||
.content {
|
||||
font-size: 28rpx;
|
||||
color: #222427;
|
||||
flex: 1;
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.promotion-popup-container
|
||||
.promotion-popup-content
|
||||
.promotion-detail-list
|
||||
.list-item
|
||||
.content
|
||||
.list-content {
|
||||
width: 440rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.promotion-popup-container
|
||||
.promotion-popup-content
|
||||
.promotion-detail-list
|
||||
.list-item
|
||||
.collect-btn {
|
||||
font-size: 24rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.promotion-popup-container
|
||||
.promotion-popup-content
|
||||
.promotion-detail-list
|
||||
.list-item
|
||||
.collect-btn
|
||||
.linkText {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user