You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
518 lines
16 KiB
518 lines
16 KiB
<template>
|
|
<view class="uibuydialog">
|
|
<block v-if="isload">
|
|
<view class="buydialog-mask" @tap="buydialogChange"></view>
|
|
<view class="buydialog">
|
|
<view class="buydialog-close" @tap="buydialogChange">
|
|
<image class="buydialog-close__img" :src="event_rul + '/static/img/static/img/close.png'"></image>
|
|
</view>
|
|
<view class="buydialog-product flex">
|
|
<image class="buydialog-product__img" :src="nowguige.pic || product.pic" @tap="previewImage" :data-url="nowguige.pic || product.pic"/>
|
|
<view class="buydialog-product__bd flex1">
|
|
<view class="buydialog-product__price flex al-item-center" :style="{color: colors.priceColor}">￥{{nowguige.sell_price}} <text v-if="nowguige.market_price > nowguige.sell_price" class="original-price">￥{{nowguige.market_price}}</text></view>
|
|
<text class="buydialog-product__choosename" v-if="product.limit_start > 1"> {{product.limit_start}}件起售</text>
|
|
<view class="buydialog-product__stock">库存：{{nowguige.stock}}</view>
|
|
<view class="buydialog-product__choosename" v-if="product.limit_start<=1">已选规格: {{nowguige.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="buydialog-bd">
|
|
<view v-if="nowguige.balance_price" class="installment-price" :style="{color:t('color1')}">首付款金额：{{nowguige.advance_price}}元，尾款金额：{{nowguige.balance_price}}元</view>
|
|
<view class="buydialog-specification__list">
|
|
<view v-for="(item, index) in guigedata" :key="index" class="buydialog-specification flex-col">
|
|
<view class="buydialog-specification__name">{{item.title}}</view>
|
|
<view class="buydialog-specification__list flex al-item-center">
|
|
<block v-for="(item2, index2) in item.items" :key="index2">
|
|
<view :data-itemk="item.k" :data-idx="item2.k" :style="{background: ggselected[item.k] == item2.k ? colors.textBgcolor : '#F4F4F4', color: ggselected[item.k] == item2.k ? colors.textColor : '#666'}" :class="'buydialog-specification__item ' + (ggselected[item.k]==item2.k ? 'on':'')" @tap="ggchange">{{item2.title}}</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="buydialog-buynum flex al-item-center j-between">
|
|
<view class="buydialog-buynum__txt flex1">购买数量：</view>
|
|
<view class="buydialog-buynum__btn flex al-item-center">
|
|
<view class="sub-btn flex al-item-center j-center"><text class="iconfont icon-jian" :class="{'disabled': gwcnum < 2}" @tap="gwcminus"></text></view>
|
|
<input class="num flex1" type="number" :value="gwcnum" @input="gwcinput"></input>
|
|
<view class="add-btn flex al-item-center j-center"><text class="iconfont icon-shanchu1" :class="{'disabled': gwcnum == nowguige.stock}" @tap="gwcplus"></text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="buydialog-ft">
|
|
<view v-if="shopset && shopset.showcommission==1 && nowguige.commission > 0" class="buydialog-ft__tips" :style="{color:colors.textColor}">分享好友购买预计可得{{t('佣金')}}：<text class="commission">{{nowguige.commission}}</text>{{nowguige.commission_desc}}</view>
|
|
<view class="buydialog-ft__btns flex">
|
|
<block v-if="nowguige.stock <= 0">
|
|
<button class="buydialog-ft__btn nostock flex1">库存不足</button>
|
|
</block>
|
|
<block v-else>
|
|
<button class="buydialog-ft__btn addcart flex1" :style="{background:colors.purchaseBtn,color:colors.purchaseText}" @tap="addcart" v-if="btntype==0 && canaddcart">加入购物车</button>
|
|
<button class="buydialog-ft__btn tobuy flex1" :style="{background:colors.singleBtn}" @tap="tobuy" v-if="btntype==0">立即购买</button>
|
|
<button class="buydialog-ft__btn addcart flex1" :style="{background:colors.singleBtn}" @tap="addcart" v-if="btntype==1">确 定</button>
|
|
<button class="buydialog-ft__btn tobuy flex1" :style="{background:colors.singleBtn}" @tap="tobuy" v-if="btntype==2">确 定</button>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<loading v-if="loading"></loading>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
ks:'',
|
|
product:{},
|
|
guigelist:{},
|
|
guigedata:{},
|
|
ggselected:{},
|
|
nowguige:{},
|
|
gwcnum:1,
|
|
isload:false,
|
|
loading:false,
|
|
canaddcart:true,
|
|
shopset:{},
|
|
|
|
event_rul: app.globalData.event_url,
|
|
pagesUrl: '',
|
|
colors:{
|
|
priceColor: '#ED5925', // 价格颜色
|
|
textBgcolor: '#E2F7EF', // 规格选中背景色
|
|
textColor: this.t('color1'), // 规格选中字体颜色
|
|
singleBtn: 'linear-gradient(to right, #01A664, #096741)', // 单个按钮背景色
|
|
purchaseBtn: 'linear-gradient(to right, #E9FAF4, #CAF6E5)', // 购买按钮背景色
|
|
purchaseText: this.t('color1'), // 购买按钮字体颜色
|
|
},
|
|
}
|
|
},
|
|
props: {
|
|
btntype:{default:0},
|
|
menuindex:{default:-1},
|
|
controller:{default:'ApiShop'},
|
|
needaddcart:{default:true},
|
|
proid:{},
|
|
showtaos: {default: 0},
|
|
themsColor: {default: 0}
|
|
},
|
|
created() {
|
|
if(this.themsColor == 1) { // 海纳百川
|
|
this.colors = {
|
|
priceColor: '#FF4800', // 价格颜色
|
|
textBgcolor: '#E6EFFF', // 规格选中背景色
|
|
textColor: '#1870C5', // 规格选中字体颜色
|
|
singleBtn: 'linear-gradient(to right, #269DD1, #5487D7)', // 单个按钮背景色
|
|
purchaseBtn: 'linear-gradient(to right, #E9F1FF, #E6EFFF)', // 购买按钮背景色
|
|
purchaseText: '#1870C5', // 购买按钮字体颜色
|
|
}
|
|
}
|
|
if(this.themsColor == 2) { // 百里挑一
|
|
this.colors = {
|
|
priceColor: '#CE0000', // 价格颜色
|
|
textBgcolor: '#FFE4C2', // 规格选中背景色
|
|
textColor: '#CE0000', // 规格选中字体颜色
|
|
singleBtn: 'linear-gradient(to right, #AECA00, #8CB400)', // 单个按钮背景色
|
|
purchaseBtn: 'linear-gradient(to right, #FFE8EC, #FFE8EC)', // 购买按钮背景色
|
|
purchaseText: '#CE0000', // 购买按钮字体颜色
|
|
}
|
|
}
|
|
if(this.themsColor == 3) { // 橙心如意
|
|
this.colors = {
|
|
priceColor: '#ED5925', // 价格颜色
|
|
textBgcolor: '#FFE8EC', // 规格选中背景色
|
|
textColor: '#FB5E00', // 规格选中字体颜色
|
|
singleBtn: 'linear-gradient(to right, #FF7D16, #FF640A)', // 单个按钮背景色
|
|
purchaseBtn: 'linear-gradient(to right, #FFE7C8, #FFE4C2)', // 购买按钮背景色
|
|
purchaseText: '#FB5E00', // 购买按钮字体颜色
|
|
}
|
|
}
|
|
if(this.themsColor == 4) { // 红福齐天
|
|
this.colors = {
|
|
priceColor: '#ED5925', // 价格颜色
|
|
textBgcolor: '#FFE4E6', // 规格选中背景色
|
|
textColor: '#D11800', // 规格选中字体颜色
|
|
singleBtn: 'linear-gradient(to right, #FA5F47, #FD5A54)', // 单个按钮背景色
|
|
purchaseBtn: 'linear-gradient(to right, #FFF4F5, #FFE0E1)', // 购买按钮背景色
|
|
purchaseText: '#D11800', // 购买按钮字体颜色
|
|
}
|
|
}
|
|
|
|
if(this.themsColor == 5) { // 和气生财
|
|
this.colors = {
|
|
priceColor: '#ED5925', // 价格颜色
|
|
textBgcolor: '#FFD9A4', // 规格选中背景色
|
|
textColor: '#E64520', // 规格选中字体颜色
|
|
singleBtn: 'linear-gradient(150deg, #F65326, #C40000)', // 单个按钮背景色
|
|
purchaseBtn: '#FFD9A4', // 购买按钮背景色
|
|
purchaseText: '#E64520', // 购买按钮字体颜色
|
|
}
|
|
}
|
|
if(this.themsColor == 6) { // 青山绿水
|
|
this.colors = {
|
|
priceColor: '#E55554', // 价格颜色
|
|
textBgcolor: '#EAFFFA', // 规格选中背景色
|
|
textColor: '#5CBB62', // 规格选中字体颜色
|
|
singleBtn: 'linear-gradient(150deg, #95E196, #65B76A)', // 单个按钮背景色
|
|
purchaseBtn: '#EAFFFA', // 购买按钮背景色
|
|
purchaseText: '#5CBB62', // 购买按钮字体颜色
|
|
}
|
|
}
|
|
},
|
|
mounted:function(){
|
|
var pages = getCurrentPages()
|
|
this.pagesUrl = pages[pages.length - 1].route
|
|
this.getdata();
|
|
},
|
|
methods:{
|
|
getdata:function(){
|
|
var that = this;
|
|
if(this.controller == 'ApiShop' && app.globalData.isdouyin == 1){
|
|
app.showLoading('加载中');
|
|
app.post('ApiShop/getDouyinProductId',{proid:that.proid},function(res){
|
|
app.showLoading(false);
|
|
if(res.status == 1){
|
|
tt.openEcGood({promotionId:res.douyin_product_id});
|
|
}else{
|
|
app.alert(res.msg)
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
|
|
that.loading = true;
|
|
app.post(this.controller+'/getproductdetail',{id:that.proid},function(res){
|
|
that.loading = false;
|
|
that.product = res.product;
|
|
that.shopset = res.shopset;
|
|
if(!that.product.limit_start){
|
|
that.product.limit_start = 1;
|
|
}
|
|
that.guigelist = res.guigelist;
|
|
that.guigedata = res.guigedata;
|
|
var guigedata = res.guigedata;
|
|
var ggselected = [];
|
|
for (var i = 0; i < guigedata.length; i++) {
|
|
ggselected.push(0);
|
|
}
|
|
that.ks = ggselected.join(',');
|
|
that.nowguige = that.guigelist[that.ks];
|
|
that.ggselected = ggselected;
|
|
if(that.nowguige.limit_start > 0)
|
|
that.gwcnum = that.nowguige.limit_start;
|
|
else
|
|
that.gwcnum = that.product.limit_start;
|
|
that.isload = true;
|
|
if(that.product.freighttype==3 || that.product.freighttype==4){ //虚拟商品不能加入购物车
|
|
that.canaddcart = false;
|
|
}
|
|
});
|
|
},
|
|
buydialogChange:function(){
|
|
this.$emit('buydialogChange');
|
|
},
|
|
//选择规格
|
|
ggchange: function (e){
|
|
var idx = e.currentTarget.dataset.idx;
|
|
var itemk = e.currentTarget.dataset.itemk;
|
|
var ggselected = this.ggselected;
|
|
ggselected[itemk] = idx;
|
|
var ks = ggselected.join(',');
|
|
this.ggselected = ggselected;
|
|
this.ks = ks;
|
|
this.nowguige = this.guigelist[this.ks];
|
|
if(this.nowguige.limit_start > 0) {
|
|
if (this.gwcnum < this.nowguige.limit_start) {
|
|
this.gwcnum = this.nowguige.limit_start;
|
|
}
|
|
}
|
|
},
|
|
tobuy: function (e) {
|
|
var that = this;
|
|
var ks = that.ks;
|
|
var proid = that.product.id;
|
|
var ggid = that.guigelist[ks].id;
|
|
var stock = that.guigelist[ks].stock;
|
|
var num = that.gwcnum;
|
|
if (num < 1) num = 1;
|
|
if (stock < num) {
|
|
app.error('库存不足');
|
|
return;
|
|
}
|
|
var prodata = proid + ',' + ggid + ',' + num;
|
|
this.$emit('buydialogChange');
|
|
if(this.controller == 'ApiShop'){
|
|
app.goto('/pagesA/shop/buy?prodata=' + prodata);
|
|
}else if(this.controller == 'ApiSeckill'){
|
|
app.goto('/activity/seckill/buy?prodata=' + prodata);
|
|
}else if(this.controller == 'ApiSeckill2'){
|
|
app.goto('/activity/seckill2/buy?prodata=' + prodata);
|
|
}else if(this.controller == 'ApiRestaurantTakeaway'){
|
|
app.goto('/restaurant/takeaway/buy?prodata=' + prodata);
|
|
}else if(this.controller == 'ApiRestaurantShop'){
|
|
app.goto('/restaurant/shop/buy?prodata=' + prodata);
|
|
}
|
|
},
|
|
//加入购物车操作
|
|
addcart: function () {
|
|
var that = this;
|
|
var ks = that.ks;
|
|
var num = that.gwcnum;
|
|
var proid = that.product.id;
|
|
var ggid = that.guigelist[ks].id;
|
|
var stock = that.guigelist[ks].stock;
|
|
if (num < 1) num = 1;
|
|
if (stock < num) {
|
|
app.error('库存不足');
|
|
return;
|
|
}
|
|
if(this.needaddcart){
|
|
app.post(this.controller+'/addcart', {proid: proid,ggid: ggid,num: num}, function (res) {
|
|
if (res.status == 1) {
|
|
app.success('添加成功');
|
|
} else {
|
|
app.error(res.msg, 1500);
|
|
if(that.showtaos == 1){
|
|
uni.hideToast()
|
|
}
|
|
if(that.pagesUrl == 'pages/shop/product') {
|
|
that.$emit('cartPuch',res.goods);
|
|
}
|
|
|
|
}
|
|
});
|
|
}
|
|
this.$emit('addcart',{proid: proid,ggid: ggid,num: num});
|
|
this.$emit('buydialogChange');
|
|
},
|
|
//加
|
|
gwcplus: function (e) {
|
|
var gwcnum = this.gwcnum + 1;
|
|
var ks = this.ks;
|
|
if (gwcnum > this.guigelist[ks].stock) {
|
|
app.error('库存不足');
|
|
return 1;
|
|
}
|
|
if (this.product.perlimitdan > 0 && gwcnum > this.product.perlimitdan) {
|
|
app.error('每单限购'+this.product.perlimitdan+'件');
|
|
return 1;
|
|
}
|
|
this.gwcnum = this.gwcnum + 1;
|
|
},
|
|
//减
|
|
gwcminus: function (e) {
|
|
var gwcnum = this.gwcnum - 1;
|
|
var ks = this.ks;
|
|
if(this.nowguige.limit_start > 0) {
|
|
if (gwcnum <= this.nowguige.limit_start - 1) {
|
|
if(this.nowguige.limit_start > 1){
|
|
app.error('该规格' + this.nowguige.limit_start + '件起售');
|
|
}
|
|
return;
|
|
}
|
|
}else{
|
|
if (gwcnum <= this.product.limit_start - 1) {
|
|
if(this.product.limit_start > 1){
|
|
app.error('该商品' + this.product.limit_start + '件起售');
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
this.gwcnum = this.gwcnum - 1;
|
|
},
|
|
//输入
|
|
gwcinput: function (e) {
|
|
var ks = this.ks;
|
|
var gwcnum = parseInt(e.detail.value);
|
|
if (gwcnum < 1) return 1;
|
|
if (gwcnum > this.guigelist[ks].stock) {
|
|
return this.guigelist[ks].stock > 0 ? this.guigelist[ks].stock : 1;
|
|
}
|
|
if(this.nowguige.limit_start > 0) {
|
|
if (gwcnum <= this.nowguige.limit_start - 1) {
|
|
if(this.nowguige.limit_start > 1){
|
|
app.error('该规格' + this.nowguige.limit_start + '件起售');
|
|
}
|
|
gwcnum = this.nowguige.limit_start;
|
|
}
|
|
}else{
|
|
if (gwcnum <= this.product.limit_start - 1) {
|
|
if(this.product.limit_start > 1){
|
|
app.error('该商品' + this.product.limit_start + '件起售');
|
|
}
|
|
gwcnum = this.product.limit_start;
|
|
}
|
|
|
|
}
|
|
if (this.product.perlimitdan > 0 && gwcnum > this.product.perlimitdan) {
|
|
app.error('每单限购'+this.product.perlimitdan+'件');
|
|
gwcnum = this.product.perlimitdan;
|
|
}
|
|
|
|
this.gwcnum = gwcnum;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.uibuydialog {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 9999990;
|
|
}
|
|
.buydialog-mask{ position: fixed; top: 0rem; left: 0rem; width: 100%; background: rgba(0,0,0,0.5); bottom: 0rem;z-index:10}
|
|
.buydialog {
|
|
position: fixed;
|
|
width: 100%;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: #fff;
|
|
z-index:9999995;
|
|
padding: 0 24rpx 28rpx;
|
|
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
border-radius:20rpx 20rpx 0 0;
|
|
&-close {
|
|
position: absolute;
|
|
top: 26rpx;
|
|
right: 26rpx;
|
|
z-index:12;
|
|
&__img {
|
|
width: 28rpx;
|
|
height:28rpx;
|
|
}
|
|
}
|
|
&-product {
|
|
padding: 16rpx 6rpx;
|
|
border-bottom: 1rpx solid #F4F4F4;
|
|
&__img {
|
|
flex-shrink: 0;
|
|
width: 204rpx;
|
|
height:204rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
&__price {
|
|
margin-top: 34rpx;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #ED5925;
|
|
line-height: 32rpx;
|
|
.original-price {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
line-height: 34rpx;
|
|
font-weight: normal;
|
|
text-decoration:line-through;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
&__stock,&__choosename {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
line-height: 36rpx;
|
|
margin-top: 12rpx;
|
|
}
|
|
&__choosename {
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
.installment-price {
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
&-specification{
|
|
padding-top: 28rpx;
|
|
&__name {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
&__list {
|
|
flex-wrap:wrap;
|
|
margin-bottom: -10rpx;
|
|
}
|
|
&__item {
|
|
background: #F4F4F4;
|
|
color:#666666;
|
|
margin-right: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
border-radius: 8rpx;
|
|
padding: 0 16rpx;
|
|
font-size: 24rpx;
|
|
line-height: 60rpx;
|
|
&.on {
|
|
color: #0A5D3B;
|
|
background: #E2F7EF;
|
|
}
|
|
}
|
|
}
|
|
&-buynum {
|
|
padding-top: 28rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
line-height: 56rpx;
|
|
&__btn {
|
|
border: 1rpx solid #CCCCCC;
|
|
border-radius: 6rpx;
|
|
width: 96px;
|
|
.sub-btn,.add-btn {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
flex-shrink: 0;
|
|
.iconfont {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
&.disabled {
|
|
color: #CCCCCC;
|
|
}
|
|
&.icon-shanchu1 {
|
|
font-size: 24rpx;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
}
|
|
.num {
|
|
height: 56rpx;
|
|
padding: 0 10rpx;
|
|
text-align: center;
|
|
border-left: 1rpx solid #CCCCCC;
|
|
border-right: 1rpx solid #CCCCCC;
|
|
}
|
|
}
|
|
}
|
|
&-ft {
|
|
&__tips {
|
|
margin-top:20rpx;
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
.commission {
|
|
font-weight: bold;
|
|
padding: 0 3rpx;
|
|
}
|
|
}
|
|
&__btns {
|
|
margin-top: 32rpx;
|
|
border-radius: 40rpx;
|
|
overflow: hidden;
|
|
}
|
|
&__btn {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-size:28rpx;
|
|
font-weight:bold;
|
|
color: #fff;
|
|
&:first-child {border-top-left-radius: 40rpx;border-end-start-radius: 40rpx;}
|
|
&:last-child {border-top-right-radius: 40rpx;border-end-end-radius: 40rpx;}
|
|
&.nostock{
|
|
background:#ccc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|