Skip to content

M
mallapp
Commit c1cb52b5 authored by 黄奎's avatar 黄奎
Browse files
Options

10

parent bd8e9696
Show whitespace changes
Inline Side-by-side
Showing with 782 additions and 0 deletions
components/goods/goodsku2.vue 0 → 100644
View file @ c1cb52b5
<template>
<u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble"
length="auto" :safeAreaInsetBottom="true" @close="popupClose" :z-index="9999" close-icon="close">
<view class="goodsku">
<view class="goods">
<image :src="goodimage" class="img" @click="previewImage(0,goodimage)"></image>
<view class="chosen-info">
<view class="price" :style="{ color: mc }">
<text class="small">￥</text>
<!-- <text v-show="notes">{{ goodprice2 }}</text> -->
<text>{{ goodprice }}</text>
</view>
<!-- <view class="amount">{{g.form_id ==1?'余位':'库存'}} {{ goodamount }} {{ g.unit }}</view> -->
<!-- <view class="sku">{{ skuObj ? '已选择' : '选择' }} {{ sku }}</view> -->
<view class="amount amount2">可报名额 {{ goodamount }}人</view>
<view class="sku_close">
<u-icon name="cross" color="#9F9F9F" @click="cloGood()" size="40" />
</view>
</view>
</view>
<!-- <scroll-view scroll-y class="sku-box">
<view class="sku-item" v-for="(x, i) in g.attr_groups" :key="i">
<view class="sku-title">{{ x.attr_group_name }}</view>
<view>
<view class="sku-chi" :style="{
background: y.attr_id == x.checkId ? mc : '#eee',
color: y.attr_id == x.checkId ? '#FFF' : '#333'
}" :class="{ disable: notStockGood.indexOf(y.attr_id) != -1 }" v-for="(y, yi) in x.attr_list" :key="yi"
@click="clickSkuItemHandler(yi, i)">
<image :src="y.pic_url" class="img" v-if="i == 0 && y.pic_url"></image>
<text class="val">{{ y.attr_name }}</text>
</view>
</view>
</view>
</scroll-view> -->
<view class="count-box">
<text class="label">数量</text>
<!-- :max="goodamount" -->
<!-- <u-number-box :disabled="!skuObj" v-model="gc" :min="1" :max="g.attr_groups[0].service_time"
@change="valChange"></u-number-box> -->
</view>
<view class="sku-chi2" :style="{
background: y.attr_id == x.checkId ? mc : '#eee',
color: y.attr_id == x.checkId ? '#FFF' : '#333'
}">
<text class="val2">{{g.attr_groups[0].service_time}}次</text>
</view>
<view class="count-box">
<text >
<text class="label2">物品</text>
<text class="label3">
说明:以下物品需与当前课程绑定购买
</text>
</text>
<!-- :max="goodamount" -->
<!-- <u-number-box :disabled="!skuObj" v-model="gc" :min="1" :max="g.attr_groups[0].service_time"
@change="valChange"></u-number-box> -->
</view>
<!-- 是否购买讲义 -->
<!-- <view v-show="g.goodsRelevanceList.length>0">
<u-checkbox-group @change="checkboxChange">
<u-checkbox v-model="checkboxValue1" shape="circle" v-for="(item, index) in checkboxList1"
:key="index" :label="item.name" :name="item.name">{{ item.name}}</u-checkbox>
</u-checkbox-group>
</view> -->
<view class="val3 sku-chi2" :style="{
background: y.attr_id == x.checkId ? mc : '#eee',
color: y.attr_id == x.checkId ? '#FFF' : '#333'
}" v-if="notes" v-for="(item, index) in g.goodsRelevanceList" :key="index">
<text>{{item.RelevanceName}}</text>
<text>￥</text>
<text>{{item.RelevancePrice}}</text>
</view>
<view class="btn-box" v-if="g.totalStock>0&& g.status==1 && (g.form_id == -1 || g.form_id ==0)">
<view style="flex: 1;" v-if="optionType != 1">
<u-button @click="joinCar" :ripple="true" :hair-line="false" :custom-style="btn1">加入购物车</u-button>
</view>
<view style="flex: 1;" v-if="optionType != 0">
<u-button @click="buy" :ripple="true" :hair-line="false" :custom-style="btn2">立即购买</u-button>
</view>
</view>
<view class="btn-box" v-if="g.totalStock>0&& g.status==1 && g.form_id ==1">
<view style="flex: 1;">
<u-button :ripple="true" :hair-line="false" :custom-style="btn4" @click='signup'>立即报名</u-button>
</view>
</view>
<view class="btn-box" v-if="g.totalStock==0">
<view style="flex: 1;">
<u-button :ripple="true" :hair-line="false" :custom-style="btn3">售馨</u-button>
</view>
</view>
<view class="btn-box" v-if="g.status==2">
<view style="flex: 1;">
<u-button :ripple="true" :hair-line="false" :custom-style="btn3">已下架</u-button>
</view>
</view>
</view>
</u-popup>
</template>
<script>
export default {
model: {},
props: {
borderRadius: {
type: [String, Number],
default: 0
},
value: {
type: Boolean,
default: false
},
maskCloseAble: {
type: Boolean,
default: true
},
safeAreaInsetBottom: {
type: Boolean,
default: true
},
good: {
type: Object,
default: {}
},
optionType: {
type: [String, Number],
default: 0
},
skued: {
type: Object,
default: {}
}
},
data() {
return {
checkboxValue1: ['是否购买讲义'],
checkboxList1: [{
name: '是否购买讲义',
checked: true
}, ],
goodprice2: '',
notes: true,
goodimage: '',
goodprice: '',
goodamount: '',
mc: '',
fu: '',
secondary: '',
gc: 1,
bian: false,
btn1: {
flex: 1,
height: '100%',
borderRadius: '40px',
border: 'none',
color: '#FFF',
fontSize: '13px',
width: '100%'
},
btn2: {
flex: 1,
height: '100%',
borderRadius: '40px',
border: 'none',
color: '#FFF',
fontSize: '13px',
width: '100%'
},
btn3: {
flex: 1,
height: '100%',
borderRadius: '40px',
border: 'none',
color: '#FFF',
fontSize: '13px',
width: '100%',
background: '#ababab'
},
btn4: {
flex: 1,
height: '100%',
borderRadius: '40px',
border: 'none',
color: '#FFF',
fontSize: '13px',
width: '100%'
},
sku: '',
g: {},
skuObj: null,
notStockGood: [],
forms: {
list: [{
mch_id: 0,
goods_list: [],
distance: 0,
remark: '',
order_form: [],
use_integral: 0,
user_coupon_id: 0
}],
address_id: 0
}
};
},
mounted() {
this.request2({
url: '/api/AppletGoods/GetAppletGoodsInfo',
data: {
GoodsId: this.good.id
}
},
res => {
this.g = res.data.goods;
this.g.totalStock = 0;
// console.log("进入新的",this.g.attr_groups[0].service_time);
this.g.attr.forEach(x => {
this.g.totalStock += x.stock
})
this.goodimage = this.g.cover_pic;
this.mc = this.$uiConfig.mainColor;
this.fu = this.$uiConfig.secondary;
this.secondary = this.$uiConfig.secondary;
this.skuObj = this.skued.id ? this.skued : null;
if (this.skuObj) {
this.goodimage = this.skuObj.pic_url || this.g.cover_pic;
// this.goodprice = (parseFloat(this.skuObj.price) * 1).toFixed(2);
this.goodamount = this.skuObj.stock;
// 新增讲义
if (this.notes) {
this.$nextTick(() => {
this.g.goodsRelevanceList.forEach(item => {
this.goodprice = (parseFloat(this.skuObj.price) * 1 + parseFloat(
item
.RelevancePrice)).toFixed(2);
})
});
} else {
this.$nextTick(() => {
this.goodprice = (parseFloat(this.skuObj.price) * 1).toFixed(2);
});
}
} else {
this.goodimage = this.g.cover_pic;
// this.goodprice = this.g.price_min && this.g.price_min != '' ? this.g.price_min : this.g
// .price_content;
// 新增讲义
if (this.notes) {
this.$nextTick(() => {
this.g.goodsRelevanceList.forEach(item => {
// this.goodprice2 =(parseFloat(this.goodprice)+parseFloat(item.RelevancePrice)).toFixed(2);
this.goodprice = this.g.price_min && this.g.price_min != '' ? (
parseFloat(
this.g.price_min) + parseFloat(item.RelevancePrice))
.toFixed(2) :
(parseFloat(this.g.price_content) + parseFloat(item
.RelevancePrice))
.toFixed(2)
})
console.log('22222222222222222222', this.goodprice)
});
// this.goodprice2 =parseFloat(this.goodprice)+parseFloat(this.g.goodsRelevanceList[0].RelevancePrice)
} else {
this.$nextTick(() => {
this.goodprice = this.g.price_min && this.g.price_min != '' ? this.g
.price_min : this.g
.price_content;
});
}
this.goodamount = this.g.goods_stock;
}
this.bian = this.$utils.is_biang;
this.btn1.background = this.secondary;
this.btn2.background = this.mc;
this.btn4.background = this.mc;
if (this.optionType == 2) {
this.btn1.borderRadius = '40px 0 0 40px';
this.btn2.borderRadius = '0 40px 40px 0';
}
if (this.g.attr_groups && this.g.attr_groups.length > 0) {
this.g.attr_groups.forEach(x => {
if (!this.skuObj) {
//(x.checkId = 0), (x.checkName = x.attr_group_name);
(x.checkId = 0), (x.checkName = x.attr_list[0].attr_name);
x.checkId = x.attr_list[0].attr_id;
} else {
let sign = `:${this.skuObj.sign_id}:`;
x.attr_list.forEach(y => {
if (sign.indexOf(`:${y.attr_id}:`) != -1) {
x.checkId = y.attr_id;
x.checkName = y.attr_name;
}
});
}
});
}
this.getfu()
this.formatDisableSku();
this.formatChosenTips();
}
);
// this.g = this.good;
},
methods: {
checkboxChange(n) {
this.notes = !this.notes
if (!this.notes) {
this.g.goodsRelevanceList.forEach(item => {
this.goodprice = (parseFloat(this.goodprice) - parseFloat(item
.RelevancePrice)).toFixed(2);
})
// this.goodprice = this.goodprice+this.g.goodsRelevanceList[0].RelevancePrice
} else {
this.g.goodsRelevanceList.forEach(item => {
this.goodprice = (parseFloat(this.goodprice) + parseFloat(item
.RelevancePrice)).toFixed(2);
})
}
// if(n.length>0) {
// this.goodprice = this.goodprice+this.g.goodsRelevanceList[0].RelevancePrice
// }
},
getfu() {
let fucolor = this.colorRgb(this.fu);
var RgbValue = fucolor.replace("rgb(", "").replace(")", "");
var RgbValueArry = RgbValue.split(",");
var grayLevel = RgbValueArry[0] * 0.299 + RgbValueArry[1] * 0.587 + RgbValueArry[2] * 0.114;
console.log(grayLevel)
if (grayLevel >= 192) {
this.btn1.color = this.mc;
} else {
this.btn1.color = '#FFF';
}
},
colorRgb(color) {
var sColor = color.toLowerCase();
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 如果是16进制颜色
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange.join(",");
}
return sColor;
},
joinCar() {
if (this.skuObj && this.skuObj.id) {
this.request2({
url: '/api/AppletOrder/SetGoodsShoppingCartInfo',
data: {
GoodsId: this.skuObj.goods_id,
SpecificationSort: this.skuObj.sign_id,
Number: this.gc == 0 ? 1 : this.gc
}
},
res => {
uni.showToast({
title: '加入购物车成功',
icon: 'success',
duration: 2000
});
this.popupClose();
}
);
} else {
uni.showToast({
title: '请选择商品',
position: 'bottom',
icon: 'none',
duration: 2000
});
}
},
buy() {
let ShoppingCartIdList = [];
if (this.skuObj && this.skuObj.id) {
let good = {
DetailList: [],
Use_Integral: 0,
User_Coupon_Id: 0,
DeliveryMethod: 0,
AddressId: 0
};
let g = {
GoodsId: this.skuObj.goods_id,
Number: this.gc,
SpecificationSort: this.skuObj.sign_id
};
good.DetailList.push(g);
uni.navigateTo({
url: '/pages/order-submit/order-submit?formData=' +
encodeURIComponent(JSON.stringify(good)) +
'&IsFormShoppingCart=2&ShoppingCartIdList=' +
JSON.stringify(ShoppingCartIdList),
complete(res) {
console.log(res);
}
});
} else {
uni.showToast({
title: '请选择商品',
position: 'bottom',
icon: 'none',
duration: 2000
});
}
},
signup() { //教育报名
let ShoppingCartIdList = [];
if (this.skuObj && this.skuObj.id) {
let good = {
DetailList: [],
Use_Integral: 0,
User_Coupon_Id: 0,
DeliveryMethod: 0,
AddressId: 0
};
let g = {
GoodsId: this.skuObj.goods_id,
Number: this.gc,
SpecificationSort: this.skuObj.sign_id
};
good.DetailList.push(g);
uni.navigateTo({
url: '/pages/order-submit/neweducation-submit?formData=' +
encodeURIComponent(JSON.stringify(good)) +
'&IsFormShoppingCart=2&ShoppingCartIdList=' +
JSON.stringify(ShoppingCartIdList),
complete(res) {
console.log(res);
}
});
} else {
uni.showToast({
title: '请选择商品',
position: 'bottom',
icon: 'none',
duration: 2000
});
}
},
//关闭弹窗
cloGood() {
this.popupClose();
},
clickSkuItemHandler(index, groupRow) {
let temp = this.g.attr_groups[groupRow].attr_list[index];
if (this.notStockGood.indexOf(temp.attr_id) == -1) {
if (this.g.attr_groups[groupRow].checkId != temp.attr_id) {
this.g.attr_groups[groupRow].checkId = temp.attr_id;
this.g.attr_groups[groupRow].checkName = temp.attr_name;
} else {
this.g.attr_groups[groupRow].checkId = 0;
this.g.attr_groups[groupRow].checkName = this.g.attr_groups[groupRow].attr_group_name;
}
this.formatDisableSku();
this.$forceUpdate();
this.formatChosenTips();
}
},
formatChosenTips() {
let unchosen = '';
let chosen = '';
if (this.g.attr_groups && this.g.attr_groups.length > 0) {
this.g.attr_groups.forEach(x => {
// if (x.checkId != 0) {
if (x.checkId != -1) {
chosen += (chosen == '' ? '' : ',') + x.checkName;
} else {
unchosen += (unchosen == '' ? '' : ',') + x.attr_group_name;
}
});
}
if (unchosen != '') {
this.sku = unchosen;
this.skuObj = null;
this.goodimage = this.g.cover_pic;
this.goodprice = this.g.price_min && this.g.price_min != '' ? this.g.price_min : this.g.price_content;
this.goodamount = this.g.goods_stock;
} else {
this.sku = chosen;
this.formatSku();
}
},
formatDisableSku() {
let sign = [];
if (this.g.attr_groups && this.g.attr_groups.length > 0) {
this.g.attr_groups.forEach(x => {
if (x.checkId != 0) {
sign.push(`${x.checkId}`);
}
});
if (sign.length == this.g.attr_groups.length - 1) {
this.formatDisable(sign);
} else if (sign.length == this.g.attr_groups.length) {
let t = sign.join(':');
let len = -1;
this.g.attr.forEach(x => {
if (x.sign_id == t && x.stock == 0) {
len = this.g.attr_groups.length - 1;
}
});
if (len != -1) {
this.g.attr_groups[len].checkId = 0;
this.g.attr_groups[len].checkName = this.g.attr_groups[len].attr_name;
this.formatDisableSku();
} else {
this.formatDisable(sign.splice(sign.length - 1, 1));
}
}
}
},
formatDisable(sign) {
this.notStockGood = [];
this.g.attr.forEach(x => {
if (x.stock == 0) {
let t = x.sign_id.split(':');
let t1 = [];
t.forEach(x => {
if (sign.indexOf(x) == -1) {
t1.push(x);
}
});
if (t1.length == 1) {
this.notStockGood.push(parseInt(t1[0]));
}
}
});
this.$forceUpdate();
},
formatSku() {
let sign = '';
if (this.g.attr_groups && this.g.attr_groups.length > 0) {
this.g.attr_groups.forEach(x => {
if (x.checkId != -1) {
sign += (sign == '' ? '' : ':') + x.checkId;
}
});
}
if (this.g.attr && this.g.attr.length) {
this.g.attr.forEach(x => {
if (x.sign_id == sign) {
this.skuObj = x;
}
});
}
if (this.skuObj != null) {
this.goodimage = this.skuObj.pic_url || this.g.cover_pic;
this.goodprice = (parseFloat(this.skuObj.price) * parseFloat(this.gc)).toFixed(2);
this.goodamount = this.skuObj.stock;
}
},
// 弹窗关闭
popupClose() {
this.$emit('close', this.skuObj);
this.$emit('input', false);
},
valChange(e) {
this.gc = e.value;
if (this.skuObj) {
this.goodprice = (parseFloat(this.skuObj.price) * parseFloat(this.gc)).toFixed(2);
// this.goodprice = (parseFloat(this.skuObj.price) * parseFloat(this.gc)).toFixed(2);
if (this.notes) {
this.$nextTick(() => {
this.g.goodsRelevanceList.forEach(item => {
this.goodprice = (parseFloat(this.skuObj.price) * parseFloat(this.gc) +
parseFloat(item.RelevancePrice)).toFixed(2);
// this.goodprice = (parseFloat(this.goodprice) + parseFloat(item.RelevancePrice))
// .toFixed(2);
})
})
} else {
this.$nextTick(() => {
this.goodprice = (parseFloat(this.skuObj.price) * parseFloat(this.gc)).toFixed(2);
})
}
}
},
previewImage(index, images) {
images = [images]
uni.previewImage({
urls: images,
current: index,
});
},
}
};
</script>
<style>
.amount2 {
margin-top: 40rpx;
}
.goodsku {
position: relative;
padding: 10px;
padding-bottom: 0;
}
.goodsku .goods {
display: flex;
background: transparent;
padding-bottom: 10px;
}
.goodsku .goods .img {
width: 116px;
height: 116px;
border-radius: 4px;
margin-top: -45px;
border: 2px solid #fff;
}
.goodsku .goods .chosen-info {
margin-left: 15px;
flex: 1;
width: 1px;
position: relative;
}
.goodsku .chosen-info .sku_close {
position: absolute;
right: 4px;
top: 5px;
}
.goodsku .goods .chosen-info .price {
font-size: 24px;
font-family: 'oswald';
font-weight: unset;
}
.goodsku .goods .chosen-info .price .small {
font-size: 16px;
margin-right: 5px;
}
.goodsku .goods .chosen-info .amount {
font-size: 13px;
color: gray;
}
.goodsku .goods .chosen-info .sku {
font-size: 13px;
margin-top: 5px;
}
.goodsku .sku-box {
padding: 0;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
display: block;
}
.goodsku .sku-box .sku-item {
padding: 15px 0;
border-bottom: 1px solid #eee;
width: 100%;
}
.goodsku .sku-box .sku-item .sku-title {
color: #333;
font-size: 14px;
}
.goodsku .sku-box .sku-item .sku-chi {
background: #eee;
border-radius: 3px;
padding: 3px;
display: flex;
color: #111;
display: inline-block;
margin-top: 10px;
margin-right: 10px;
font-size: 13px;
}
.sku-chi2{
background: #eee;
border-radius: 3px;
padding: 3px;
display: flex;
color: #111;
display: inline-block;
margin-top: 10px;
margin-right: 10px;
font-size: 13px;
}
.goodsku .sku-box .sku-item .sku-chi.disable {
background: #eee !important;
color: #ddd !important;
}
.goodsku .sku-box .sku-item .sku-chi .val {
width: 1px;
height: 24px;
line-height: 24px;
padding: 0 7px;
}
.val2{
/* width: 1px; */
height: 24px;
line-height: 24px;
padding: 0 7px;
}
.val3{
/* width: 1px; */
height: 24px;
line-height: 24px;
padding: 0 26rpx;
}
.goodsku .sku-box .sku-item .sku-chi .img {
width: 24px;
height: 24px;
border-radius: 2px;
margin-right: 5px;
vertical-align: bottom;
}
.goodsku .count-box {
display: flex;
padding: 15px 0;
}
.goodsku .count-box .label {
font-size: 14px;
color: #333;
width: 1px;
flex: 1;
}
.label2{
font-size: 14px;
color: #333;
width: 1px;
flex: 1;
}
.label3{
font-size: 20rpx;
color: #333;
width: 1px;
flex: 1;
margin-left: 10rpx;
}
.goodsku .btn-box {
display: flex;
background: #fff;
height: 60px;
align-items: center;
border-top: 1px solid #eee;
padding: 5px 10px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment