1,实际效果图
2,后台传的数据
3,页面代码
<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @tap="hideSpec">
<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @tap="hideSpec">
<!-- 遮罩层 -->
<view class="mask"></view>
<view class="layer attr-content" @click.stop="stopPrevent">
<view class="a-t">
<image :src="this.Pic" onerror="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg">
</image>
<view class="right">
<text class="price">¥{{price}}</text>
<text class="stock">库存{{ Stock }}件
</text>
<view class="selected">
已选：
<text class="selected-text" >{{ message }}</text>
</view>
</view>
</view>
<!-- sku算法 -->
<view>
<dl v-for="(item, key) in list.result" :key="key" class="attr-list" v-bind:class="{hl: highKeys[key]}">
<dt> {{key}}</dt>
<dd class="item-list">
<text
class="tit"
v-for="value in item"
:key="value.id"
@click="handleActive(key, value)"
v-bind:class="{selected: value.active, disabled: !value.active && value.disabled}"
> {{ value.name }}
</text>
</dd>
</dl>
</view>
<view class="selectCount">
<view class="row">
<view class="left">数量</view>
<view class="right"><uni-number-box class="count" :min="1" value="1" :max="5" @eventChange="numberChange"></uni-number-box></view>
</view>
</view>
<button class="btn bottom" @tap="complete()">完成</button>
</view>
</view>
js部分
export default {
components: {
},
data() {
return {
// sku算法
data: [],
Stock:"",
SkuID: "",
Price:"",
Pic:"",
skuName: "SkuID",
skuName1: "Price",
skuName2: "Pic",
skuName3:"Stock",
// 属性名称信息
keys: [],
// 数据集合{list.result list.items}
list: {},
// 分隔符
spliter: '\u2299',
result: {},
message: "",
highKeys: {},
}
}
onLoad: function(option) {
uni.request({
url: serverUrl + '/MallDataLoad.ashx?action=PromDetail',
method: 'GET',
data: {
PromDID: ID,
StoreID: this.StoreID,
tk: this.wxToken
},
success: (res) => {
console.log("团购返回数据",res.data);
// 获取真实数据之前，务必判断状态是否为200
if (res.statusCode == 200) {
//判断是否重复参加活动
PromFlag = res.data.PromFlag;
this.PromFlag = PromFlag;
if(PromFlag == 1){
this.$api.msg(res.data.PromFlagMsg);
this.spellFlag = true;
this.joinFlag = false;
}if(PromFlag == 2){
this.$api.msg(res.data.PromFlagMsg);
this.spellFlag = true;
this.joinFlag = true;
}if(PromFlag == 0){
this.$api.msg(res.data.PromFlagMsg);
this.spellFlag = false;
this.joinFlag = false;
}
var imgList = [];
goodsInfo = res.data;
this.goodsInfo = goodsInfo;
imgList = res.data.PromotionImgItem;
this.imgList = imgList;
//图文详情
desc = res.data.Describe;
this.desc = desc;
//发起拼单信息数组
Promotion1 = res.data.PromotionJoinModels;
this.Promotion1 = Promotion1;
console.log("Promotion1拼单活动数组",Promotion1);
specList = res.data.SpecsItems;
this.data = res.data.SKU;//获取后台sku数据
console.log("this.data",this.data);
this.initData();
}
}
});
}
methods: {
//sku算法
powerset(arr) {
let ps = [[]];
for (let i = 0; i < arr.length; i++) {
for (let j = 0, len = ps.length; j < len; j++) {
ps.push(ps[j].concat(arr[i]));
}
}
return ps;
},
/**
* 初始化数据
* @return
*/
initData() {
this.result = {};
this.keys = this.getAllKeys();//arrKeys["颜色", "尺码", "型号"]
for (let i = 0; i < this.keys.length; i ++) {
this.highKeys[this.keys[i]] = false;//所有的都为false
}
this.list = this.combineAttr(this.data, this.keys);
console.log("this.list",this.list);
this.initSeleted(this.SkuID);
this.initSeleted(this.Pic);
this.initSeleted(this.Price);
this.initSeleted(this.Stock);
this.buildResult(this.list.items)
this.updateStatus(this.getSelectedItem());
this.showResult();
},
/**
* 正常属性点击
*/
handleNormalClick(key, value) {
for (let i in this.list.result[key]) {
if (i != value.name) {
this.list.result[key][i].active = false;
} else {
this.list.result[key][i].active = true;
}
}
},
/**
* 无效属性点击
*/
handleDisableClick(key, value) {
this.list.result[key][value.name]["disabled"] = false;
// 清空高亮行的已选属性状态（因为更新的时候默认会跳过已选状态）
for (let i in this.list.result) {
if (i != key) {
for (let x in this.list.result[i]) {
this.list.result[i][x].active = false;
}
}
}
this.updateStatus(this.getSelectedItem());
},
/**
* 高亮行
*/
highAttributes: function() {
for (let key in this.list.result) {
this.highKeys[key] = true;
for (let attr in this.list.result[key]) {
if (this.list.result[key][attr].active === true) {
this.highKeys[key] = false;
break;
}
}
}
},
/**
* 点击事件处理
* @param key 点击的行
* @param value 点击的按钮的数据
*/
handleActive: function(key, value) {
if (value.active == true) {
return false;
}
this.handleNormalClick(key, value);
if (value.disabled === true) {
this.handleDisableClick(key, value);
}
this.updateStatus(this.getSelectedItem());
this.highAttributes();
this.showResult();
},
/**
* 计算属性
* @param {[type]} data [description]
* @param {[type]} keys [description]
* @return {[type]} [description]
*/
combineAttr(data, keys) {
let allKeys = []
let result = {}
for (let i = 0; i < data.length; i++) {
let item = data[i]
let values = []
for (let j = 0; j < keys.length; j++) {
let key = keys[j]
if (!result[key]) {
result[key] = {};
}
if (!result[key][item[key]]) {
result[key][item[key]] = {"name": item[key], "active": false, "disabled": true};
}
values.push(item[key]);
}
allKeys.push({
path: values.join(this.spliter),
sku: item['SkuID'],
price:item['Price'],
Pic:item['Pic'],
Stock:item['Stock']
});
}
return {
result: result,
items: allKeys
}
},
/**
* 获取所有属性
* @return {[type]} [description]
*/
getAllKeys() {
let arrKeys = [];
for (let attribute in this.data[0]) {
if (!this.data[0].hasOwnProperty(attribute)) {
continue;
}
if (attribute !== this.skuName && attribute !== this.skuName1 && attribute !== this.skuName2 && attribute !== this.skuName3) {
arrKeys.push(attribute);
}
}
console.log("arrKeys 所有属性",arrKeys)
return arrKeys;
},
getAttruites(arr) {
let result = []
for (let i = 0; i < arr.length; i++) {
result.push(arr[i].path)
}
return result
},
/**
* 生成所有子集是否可选、库存状态 map
*/
buildResult(items) {
let allKeys = this.getAttruites(items)
//价格 , 库存, 图片 赋值
for (let i = 0; i < allKeys.length; i++) {
let curr = allKeys[i];
let sku = items[i].sku;
let Pic = items[i].Pic;
let price =items[i].price;
let Stock = items[i].Stock;
let values = curr.split(this.spliter);
let allSets = this.powerset(values);
// 每个组合的子集
for (let j = 0; j < allSets.length; j++) {
let set = allSets[j]
let key = set.join(this.spliter)
if (this.result[key]) {
// this.result[key].skus.push();
} else {
this.result[key] = {
skus: [sku,Pic,price,Stock],
}
}
}
}
},
/**
* 获取选中的信息
* @return Array
*/
getSelectedItem() {
let result = [];
for (let attr in this.list.result) {
let attributeName = '';
for (let attribute in this.list.result[attr]) {
if (this.list.result[attr][attribute].active === true) {
attributeName = attribute;
}
}
result.push(attributeName);
}
return result
},
/**
* 更新所有属性状态
*/
updateStatus(selected) {
for (let i = 0; i < this.keys.length; i++) {
let key = this.keys[i],
data = this.list.result[key],
hasActive = !!selected[i],
copy = selected.slice();
for (let j in data) {
let item = data[j]["name"];
if (selected[i] == item) {
continue
}
copy[i] = item;
let curr = this.trimSpliter(copy.join(this.spliter), this.spliter);
this.list.result[key][j]["disabled"] = this.result[curr] ? false : true;
}
}
},
trimSpliter(str, spliter) {
// ⊙abc⊙ => abc
// ⊙a⊙⊙b⊙c⊙ => a⊙b⊙c
let reLeft = new RegExp('^' + spliter + '+', 'g');
let reRight = new RegExp(spliter + '+$', 'g');
let reSpliter = new RegExp(spliter + '+', 'g');
return str.replace(reLeft, '')
.replace(reRight, '')
.replace(reSpliter, spliter)
},
/**
* 初始化选中
* @param mixed|Int|String SkuID 需要选中的SkuID
* @return {[type]} [description]
*/
initSeleted(a) {
for (let i in this.data) {
if (this.data[i][this.skuName] == a) {
for (let x in this.data[i]) {
if (x !== this.skuName && x !== this.skuName1 && x !== this.skuName2 && x !== this.skuName3) {
this.list.result[x][this.data[i][x]].active = true;
}
}
break;
}
}
},
/**
* 显示选中的信息
* @return
*/
showResult() {
let result = this.getSelectedItem()
let s = []
for (let i = 0; i < result.length; i++) {
let item = result[i];
if (!!item) {
s.push(item)
}
}
if (s.length == this.keys.length) {
let curr = this.result[s.join(this.spliter)];
if (curr) {
this.SkuID = curr.skus[0];
this.Pic =curr.skus[1];
this.price = curr.skus[2];
this.Stock = curr.skus[3];
}
this.message = s.join('-');
}
},
created() {
this.getTextareaData();
}
}
css样式(把整个页面的都放上了)
<style lang="scss">
page {
background: $page-color-base;
padding-bottom: 160upx;
}
.disabled {
color:#ccc;
border: 1px dashed #ccc;
}
.active {
background: #fbebee;
color: $uni-color-primary;
}
.top-but {
margin: 10px;
}
.icon-you {
font-size: $font-base + 2upx;
color: #888;
}
.carousel {
height: 600upx;
position: relative;
swiper {
height: 100%;
}
.image-wrapper {
width: 100%;
height: 100%;
}
.swiper-item {
display: flex;
justify-content: center;
align-content: center;
height: 600upx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
/* 标题简介 */
.introduce-section {
background: #fff;
padding: 20upx 30upx;
.title {
font-size: 32upx;
color: $font-color-dark;
height: 50upx;
line-height: 50upx;
}
.price-box {
display: flex;
align-items: baseline;
height: 64upx;
padding: 10upx 0;
font-size: 26upx;
color: $uni-color-primary;
}
.price {
font-size: $font-lg + 2upx;
}
.m-price {
margin: 0 12upx;
color: $font-color-light;
text-decoration: line-through;
}
.coupon-tip {
align-items: center;
padding: 4upx 10upx;
background: $uni-color-primary;
font-size: $font-sm;
color: #fff;
border-radius: 6upx;
line-height: 1;
transform: translateY(-4upx);
}
.bot-row {
display: flex;
align-items: center;
height: 50upx;
font-size: $font-sm;
color: $font-color-light;
text {
flex: 1;
}
}
}
/* 分享 */
.share-section {
display: flex;
align-items: center;
color: $font-color-base;
background: linear-gradient(left, #fdf5f6, #fbebf6);
padding: 12upx 30upx;
.share-icon {
display: flex;
align-items: center;
width: 70upx;
height: 30upx;
line-height: 1;
border: 1px solid $uni-color-primary;
border-radius: 4upx;
position: relative;
overflow: hidden;
font-size: 22upx;
color: $uni-color-primary;
&:after {
content: '';
width: 50upx;
height: 50upx;
border-radius: 50%;
left: -20upx;
top: -12upx;
position: absolute;
background: $uni-color-primary;
}
}
.icon-xingxing {
position: relative;
z-index: 1;
font-size: 24upx;
margin-left: 2upx;
margin-right: 10upx;
color: #fff;
line-height: 1;
}
.tit {
font-size: $font-base;
margin-left: 10upx;
}
.icon-bangzhu1 {
padding: 10upx;
font-size: 30upx;
line-height: 1;
}
.share-btn {
flex: 1;
text-align: right;
font-size: $font-sm;
color: $uni-color-primary;
}
.icon-you {
font-size: $font-sm;
margin-left: 4upx;
color: $uni-color-primary;
}
}
.c-list {
font-size: $font-sm + 2upx;
color: $font-color-base;
background: #fff;
.c-row {
display: flex;
align-items: center;
padding: 20upx 30upx;
position: relative;
.user-info-box {
height: 180upx;
align-items: center;
display: flex;
position: relative;
z-index: 1;
.portrait {
width: 100upx;
height: 100upx;
border: 5upx solid #fff;
border-radius: 50%;
margin-right: 20upx;
}
.username {
margin-left: 30upx;
font-size: $font-base;
color: $font-color-light;
}
}
}
.tit {
width: 140upx;
}
.con {
flex: 1;
color: $font-color-dark;
.selected-text {
margin-right: 10upx;
}
}
.bz-list {
height: 40upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
text {
display: inline-block;
margin-right: 30upx;
}
}
.con-list {
flex: 1;
display: flex;
flex-direction: column;
color: $font-color-dark;
line-height: 40upx;
.con-row {
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.coupon-tip {
margin: 0 10upx;
align-items: center;
padding: 4upx 10upx;
background: $uni-color-primary;
font-size: $font-sm;
color: #fff;
border-radius: 6upx;
line-height: 1;
transform: translateY(-4upx);
}
.pro-box {
display: flex;
align-items: center;
font-size: $font-sm;
color: $font-base;
}
.progress-box {
line-height: 40upx;
flex: 1;
border-radius: 10px;
overflow: hidden;
margin-right: 8upx;
}
.btn {
text-align: center;
height: 40upx;
line-height: 40upx;
border-radius: 10upx;
background: $uni-color-primary;
font-size: $font-sm;
margin-left: 10upx;
}
}
.red {
color: $uni-color-primary;
}
}
.g-swiper {
height: 180upx;
}
/* 评价 */
.eva-section {
display: flex;
flex-direction: column;
padding: 20upx 30upx;
background: #fff;
margin-top: 16upx;
.e-header {
display: flex;
align-items: center;
height: 70upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.tit {
font-size: $font-base + 2upx;
color: $font-color-dark;
margin-right: 4upx;
}
.tip {
flex: 1;
text-align: right;
}
.icon-you {
margin-left: 10upx;
}
}
}
.eva-box {
display: flex;
padding: 20upx 0;
.portrait {
flex-shrink: 0;
width: 80upx;
height: 80upx;
border-radius: 100px;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
font-size: $font-base;
color: $font-color-base;
padding-left: 26upx;
.con {
font-size: $font-base;
color: $font-color-dark;
padding: 20upx 0;
}
.bot {
display: flex;
justify-content: space-between;
font-size: $font-sm;
color: $font-color-light;
}
}
}
.oper {
width: 140upx;
display: flex;
flex-direction: row;
justify-content: center;
color: #ffac30;
}
.praise-ico {
width: 38upx;
height: 38upx;
margin-left: 20upx;
margin-right: 10upx;
}
.praise-me {
}
.animation-opacity {
font-weight: bold;
opacity: 0;
}
/* 详情 */
.detail-desc {
background: #fff;
margin-top: 16upx;
.d-header {
display: flex;
justify-content: center;
align-items: center;
height: 80upx;
font-size: $font-base + 2upx;
color: $font-color-dark;
position: relative;
text {
padding: 0 20upx;
background: #fff;
position: relative;
z-index: 1;
}
&:after {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
width: 300upx;
height: 0;
content: '';
border-bottom: 1px solid #ccc;
}
}
}
/* 规格弹窗 */
.attr-content {
padding: 0 30upx;
.bottom {
/* position: absolute; */
left: 50%;
transform: translate(-50%, 0%);
bottom: 10upx;
width: 100%;
}
.a-t {
display: flex;
image {
width: 170upx;
height: 170upx;
flex-shrink: 0;
margin-top: -40upx;
border-radius: 8upx;
}
.right {
display: flex;
flex-direction: column;
padding-left: 24upx;
font-size: $font-sm + 2upx;
color: $font-color-base;
line-height: 42upx;
.price {
font-size: $font-lg;
color: $uni-color-primary;
margin-bottom: 10upx;
}
.selected-text {
margin-right: 10upx;
}
}
}
.attr-list {
display: flex;
flex-direction: column;
font-size: $font-base + 2upx;
color: $font-color-base;
padding-top: 30upx;
}
.selectCount {
.row {
padding:10upx;
margin: 20upx 0;
display: flex;
justify-content: space-between;
.left {
color: #606266;
font-size: $font-base + 2upx;
}
.right {
color: #999;
}
}
}
.item-list {
padding: 20upx 0 0;
display: flex;
flex-wrap: wrap;
text {
display: flex;
align-items: center;
justify-content: center;
background: #eee;
margin-right: 20upx;
margin-bottom: 20upx;
border-radius: 100upx;
min-width: 60upx;
height: 60upx;
padding: 0 20upx;
font-size: $font-base;
}
.selected {
background: #fbebee;
color: $uni-color-primary;
}
.disabled {
color:#ccc;
border: 1px dashed #ccc;
}
}
}
/* 弹出层选择数量 */
.choiceNum {
margin-top: 30upx;
border-top: solid 1upx #aaa;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20upx;
.text {
font-size: 30upx;
}
.number {
display: flex;
justify-content: center;
align-items: center;
.input {
width: 80upx;
margin: 0 10upx;
background-color: #f3f3f3;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
input {
width: 80upx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 26upx;
}
}
.sub,
.add {
width: 60upx;
background-color: #ece4e6;
border-radius: 5upx;
.icon {
font-size: 30upx;
width: 60upx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
/* 弹出层 */
.popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 99;
&.show {
display: block;
.mask {
animation: showPopup 0.2s linear both;
}
.layer {
animation: showLayer 0.2s linear both;
}
}
&.hide {
.mask {
animation: hidePopup 0.2s linear both;
}
.layer {
animation: hideLayer 0.2s linear both;
}
}
&.none {
display: none;
}
.mask {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.4);
}
.layer {
position: fixed;
z-index: 99;
bottom: 0;
width: 100%;
min-height: 60vh;
border-radius: 10upx 10upx 0 0;
background-color: #fff;
.btn {
height: 66upx;
line-height: 66upx;
border-radius: 18upx;
background: $uni-color-primary;
font-size: $font-sm;
color: #fff;
margin: 30upx auto 20upx;
}
}
@keyframes showPopup {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hidePopup {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes showLayer {
0% {
transform: translateY(120%);
}
100% {
transform: translateY(0%);
}
}
@keyframes hideLayer {
0% {
transform: translateY(0);
}
100% {
transform: translateY(120%);
}
}
}
/* 底部操作菜单 */
.page-bottom {
position: fixed;
left: 30upx;
bottom: 30upx;
z-index: 95;
display: flex;
justify-content: center;
align-items: center;
width: 690upx;
height: 100upx;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
border-radius: 16upx;
.p-b-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: $font-sm;
color: $font-color-base;
width: 96upx;
height: 80upx;
.yticon {
font-size: 40upx;
line-height: 48upx;
color: $font-color-light;
}
&.active,
&.active .yticon {
color: $uni-color-primary;
}
.icon-fenxiang2 {
font-size: 42upx;
transform: translateY(-2upx);
}
.icon-shoucang {
font-size: 46upx;
}
}
.action-btn-group {
display: flex;
height: 76upx;
border-radius: 100px;
overflow: hidden;
box-shadow: 0 20upx 40upx -16upx #fa436a;
background: linear-gradient(to right, #ec93a6, #f50505);
margin-left: 20upx;
position: relative;
&:after {
content: '';
position: absolute;
top: 50%;
right: 50%;
transform: translateY(-50%);
height: 28upx;
width: 0;
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 180upx;
height: 100%;
font-size: $font-base;
padding: 0;
border-radius: 0;
background: transparent;
}
}
}
</style>
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
