<template>
<view :class="['qn-page-' + theme]">
<u-navbar :is-back="false" title-color="#000000" :title-bold="true" title-size="36" :title="goods_detail.title">
<view class="back-icon ibonfont ibonfanhui" @click="back"></view>
</u-navbar>
<!-- <block v-if="goods_detail.id"> -->
<block>
<!-- 底部菜单 -->
<view class="footer">
<view class="icons">
<view class="box" @click="goPage('/pages/index/index', 'switchTab')">
<view class="icon ibonfont ibonhome"></view>
<view class="text">首页</view>
</view>
<!-- <view class="box" @click="goPage('/pages/cart/cart', 'switchTab')">
<u-badge v-if="cartNum > 0" type="error" :offset="[-18, -24]" :count="cartNum"></u-badge>
<view class="icon ibonfont iboncart"></view>
<view class="text">购物车</view>
</view> -->
<!-- #ifdef MP-WEIXIN -->
<!-- <view class="box" @click="shareGoods">
<view class="icon ibonfont ibonfenxiang2"></view>
<view class="text">分享</view>
</view> -->
<!-- #endif -->
</view>
<!-- <block v-if="goods_detail.isDistribution === 4 && goods_detail.inventorTotal <= 0">
<view v-if="!(goods_detail.inventorTotal - 0) || goods_detail.inventorTotal - 0 <= 0" class="btn">
<view class="buy primary-bg" style="background-color: #666666 !important;">补货中</view>
</view>
</block> -->
<view class="btn">
<view class="buy primary-fu-bg" @click="openaddcartPop('btn')">立即购买</view>
<!-- <view class="buy primary-bg" @click="openaddcartPop('btn')">加入购物车</view> -->
</view>
</view>
<!-- 商品主图轮播 -->
<view class="swiper-box">
<swiper circular="true" autoplay="true" @change="swiperChange">
<swiper-item v-for="(item, index) in imgList" :key="index">
<image :src="item" mode="aspectFit" @click="previewImage(index)"></image>
</swiper-item>
</swiper>
<!-- <view class="indicator">{{ currentSwiper + 1 }}/{{ imgList.length }}</view> -->
</view>
<!-- 标题 价格 -->
<view class="goods-info">
<!-- 商品信息 -->
<view class="price-view primary-bg clearfix">
<view class="price-out">
<view style="display: inline-block;">
<text class="rmb-ic">¥</text>
<view style="display: inline-block;">
{{goods_detail.price}}
</view>
</view>
<view class="market-price">￥{{ goods_detail.ot_price }}</view>
</view>
<!-- <view class="right-view">
<view class="goods-num">
<view class="num-li">
已售{{ goods_detail.sold }}</view>
</view>
</view> -->
</view>
<view class="goods-info-main">
<view class="clearfix top-title">
<view class="title float_left ellipsis">
{{ goods_detail.name || '' }}
</view>
</view>
</view>
</view>
<!--规则选择 -->
<view class="info-box" style="margin-top: 0;" v-if="goods_detail.unitData">
<view class="row" v-if="goods_detail.unitData && goods_detail.unitData.length > 1">
<view class="text">换算</view>
<view class="content">
<block v-for="(item, index) in goods_detail.unitData" :key="index">
<view v-if="item.isMaster === 4" class="conversion">
<text
v-if="goods_detail.isEq === 5">1{{ item.unitName }}≈{{ item.conversion }}{{ goods_detail.unitName }}</text>
<text
v-else>1{{ item.unitName }}={{ item.conversion }}{{ goods_detail.unitName }}</text>
</view>
</block>
</view>
</view>
</view>
<!-- 详情 -->
<view class="description">
<view class="title">———— 商品详情 ————</view>
<view class="content">
<u-parse :html="goods_detail.result"></u-parse>
</view>
</view>
</block>
<u-popup mode="bottom" v-model="sharePop" >
<view class="share-tit">分享</view>
<view class="share-ul">
<!-- #ifdef MP -->
<view class="share-li">
<button class="share-btn" open-type="share">
<view class="icon-view">
<u-icon name="weixin-fill" top="12" color="#ffffff" size="60"></u-icon>
</view>
<view class="share-btn-label">分享给好友</view>
</button>
</view>
<!-- #endif -->
<!-- <view class="share-li" @click="generatePoster">
<button class="share-btn">
<view class="icon-view">
<u-icon name="photo-fill" top="12" color="#ffffff" size="60"></u-icon>
</view>
<view class="share-btn-label">生成分享海报</view>
</button>
</view> -->
</view>
<view class="share-cancel" @click="cancelPop">取消分享</view>
</u-popup>
<!-- 海报 -->
<u-popup class="no-pop-bg" v-model="canvasPop" mode="center" :border-radius="12" :mask-close-able="false">
<view v-if="imgList.length && QrSrc && is_poster">
<wm-poster :Width="600" :imgSrc="imgList[0]" :QrSrc="QrSrc" :Title="goods_detail.title"
:PriceTxt="!showGoodsPrice ? '¥' + goods_detail.salePrice : ''"
:OriginalTxt="!showGoodsPrice ? '¥' + goods_detail.marketPrice : ''" @saveImage="saveImage"
@cancelImg="cancelImg"></wm-poster>
</view>
</u-popup>
<!-- 加载动画 -->
<!-- 加入购物车弹窗 -->
<!-- <AddCardModel :isList="false" :selAddress="now_sel_address" @buyNumchange="buyNumchange" @skuChange="skuChange"
@close="is_add_show = false" @change="closeaddcartPop" :skuId="skuId" :isShow="is_add_show"
:goodsId="goods_id" />
<setMealMore :goods_id="goods_id" :shopId="goods_detail.shopId" :isShow="is_setMeal_show"
@close="is_setMeal_show = false" /> -->
<u-popup v-model="payPop" mode="bottom" :border-radius="12">
<view class="pay-pop-view">
<view class="pay-sel-title clearfix">
<text class="float_left">付款方式</text>
<text class="float_right ibonfont ibonguanbi" @click="closePayPop"></text>
</view>
<view class="pay-ul">
<view class="pay-li" @click="choosPayType(1)">
<!-- <view class="pay-li" > -->
<text class="ibonfont ibonhuodaofukuan"></text>
<view class="pay-name clearfix"
:class="[goods_detail.price*1 > userInfo.memberBalance ? 'balance-pay-name' : '']">
<view class="float_left">
<text>余额</text>
<text class="balace-num">（余额:¥{{ userInfo.memberBalance }}）</text>
</view>
<text class="float_right ibonfont ibonxuanze1" v-if="pay_type == 1"></text>
<text class="float_right ibonfont ibonxuanze1" style="color: #CCCCCC;" v-else></text>
</view>
</view>
<view class="pay-li" @click="choosPayType(2)" v-if="goods_detail.price*1 > 0">
<text class="ibonfont ibonweixinzhifu"></text>
<view class="pay-name clearfix ">
<view class="float_left">
<text>微信</text>
</view>
<text class="float_right ibonfont ibonxuanze1" v-if="pay_type == 2"></text>
<text class="float_right ibonfont ibonxuanze1" style="color: #CCCCCC;" v-else></text>
</view>
</view>
</view>
<view class="pay-btn primary-btn" @click="submit">
<text>确定</text>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import wmPoster from '../components/wm-poster/wm-poster.vue';
import webUrl from '../../config.js';
import AddCardModel from '@/components/AddCardModel';
import setMealMore from '@/components/setMealMore';
export default {
components: {
wmPoster,
AddCardModel,
setMealMore
},
computed: {
cartNum() {
return this.$store.state.cartNum;
},
showGoodsPrice() {
if (this.$store.state.baseSet.goodsPrice === 5 && this.$common.isLogin()) {
return '';
} else if (!this.$common.isLogin() && this.$store.state.baseSet.goodsPrice === 4) {
return '请登录';
} else if (this.$store.state.userStatus.enableStatus === 4 && this.$store.state.baseSet.goodsPrice === 4) {
return '已禁用';
} else if (this.$store.state.userStatus.status !== 2 && this.$store.state.baseSet.goodsPrice === 4) {
if (this.$store.state.userStatus.status === 0) {
return '待审核';
} else if (this.$store.state.userStatus.status === 1) {
return '审核中';
} else if (this.$store.state.userStatus.status === 3) {
return '已驳回';
}
} else {
return '';
}
},
isLogin() {
return this.$store.state.hasLogin;
},
// 辅助单位价格
unitsalePrice() {
if (this.goods_detail.isEq === 5) {
if (this.eq_sku_kg.enabledLadder !== 1) {
return this.eq_sku_kg.salePrice;
} else {
const unitnum = this.buy_num * Number(this.now_sku_data.conversion);
const priceData = this.eq_sku_kg.ladderPrice.find(item => {
return unitnum > item.from && unitnum <= item.to;
});
return priceData ? priceData.price : 0;
}
} else {
return this.eq_sku_kg.salePrice;
}
}
},
data() {
return {
userInfo: {},
pay_type: 1,
payPop: false,
eq_sku_kg: {}, // 抄码商品kg
eq_sku_jian: {}, // 抄码商品辅助单位
//轮播图下标
currentSwiper: 0,
service_pop: false,
sharePop: false, // 分享弹窗
canvasPop: false, // 海报弹窗
now_sel_address: {},
is_not_express: true, // 当前选择区域是否能够配送
address_data: {}, // 客户地址数据
not_dispatch_areas: {}, // 该商品不能配送区域
is_add_show: false,
is_poster: false,
buy_num: 1,
discountList: [],
activity: [],
maskState: false,
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 2000,
duration: 500,
goods_detail: {},
goods_id: '',
unit_list: [],
uni_index: 0,
specClass: 'none',
specSelected: [],
specList: [],
isCollect: false,
imgList: [],
phaseTime: {
second: 0,
day: 0
},
coupon_price: '', //领券活动价格
skuId: '', //商品的规格
source: 5,
QrSrc: '',
base_set_info: {},
spec_id_group: [],
now_sku_data: {},
startDeliveryPrice: 0,
isSalesNum: 4, // 起送价
pageName: '', // 启动页标示
is_setMeal_show: false, //组合套餐弹窗
combinedPackage: [],
total: 0,
shopId: '',
isyhk: 0,//是否是优惠卡
};
},
onShow() {
if (this.now_sel_address.provinceCode) {
this.address_data = this.now_sel_address;
if (this.not_dispatch_areas.areas) {
if (this.address_data.districtCode) {
this.is_not_express = this.not_dispatch_areas.areas.indexOf(parseInt(this.address_data
.districtCode)) === -1;
} else if (this.address_data.cityCode) {
this.is_not_express = this.not_dispatch_areas.citys.indexOf(parseInt(this.address_data
.cityCode)) === -1;
} else {
this.is_not_express = this.not_dispatch_areas.provinces.indexOf(parseInt(this.address_data
.provinceCode)) === -1;
}
}
}
},
onShareAppMessage() {
return {
title: this.goods_detail.name,
path: `/pagesT/unit/itemdetail?id=${this.goods_id}&businessmanId=${this.$store.state.userStatus.id || ''}&isyhk=${this.isyhk}`,
imageUrl: this.imgList[0],
success: res => {
console.log(res);
}
};
},
// #ifdef MP-WEIXIN
// 分享到朋友圈
onShareTimeline(obj) {
console.log('分享到朋友圈::', obj);
},
// 收藏小程序
onAddToFavorites() {},
// #endif
watch: {
async '$store.state.locationObj'(val) {
if (JSON.stringify(val) === '{}') {
this.getAuthorizeInfo();
return;
}
await this.getGoodsDetail();
await this.getQrSrc();
},
isLogin() {
this.getGoodsDetail();
}
},
async onLoad(options) {
if (options.pageName) {
this.pageName = options.pageName;
}
// 起送价
this.startDeliveryPrice = this.$store.state.baseSet.startDeliveryPrice || 0;
// #ifdef MP-WEIXIN
// 小程序的原生菜单中显示分享按钮
uni.showShareMenu({
withShareTicket: false,
menus: ['shareAppMessage', 'shareTimeline']
});
// 获取小程序分销商参数
if (options.businessmanId) {
this.$store.commit('commit_businessmanId', options.businessmanId);
this.relationshipBusinessman(options.businessmanId);
}
// #endif
// 接收传值
if (options.id) {
this.goods_id = options.id;
} else {
// 扫码进入
const scene = decodeURIComponent(options.scene);
this.goods_id = scene;
}
if(options.isyhk) {
this.isyhk = options.isyhk
}
if (options.skuId) {
this.skuId = parseInt(options.skuId);
}
// this.goods_id = 78;
this.spec_id_group[0] = this.goods_id;
this.base_set_info = this.$store.state.baseSet;
if (JSON.stringify(this.$store.state.locationObj) === '{}') {
this.getAuthorizeInfo();
return;
}
this.getGoodsDetail();
if (this.isLogin) {
this.address_data = this.$store.state.nowAddress;
if (this.address_data.provinceCode) {
if (this.not_dispatch_areas.areas) {
if (this.address_data.districtCode) {
this.is_not_express = this.not_dispatch_areas.areas.indexOf(parseInt(this.address_data
.districtCode)) === -1;
} else if (this.address_data.cityCode) {
this.is_not_express = this.not_dispatch_areas.citys.indexOf(parseInt(this.address_data
.cityCode)) === -1;
} else {
this.is_not_express = this.not_dispatch_areas.provinces.indexOf(parseInt(this.address_data
.provinceCode)) === -1;
}
}
} else {
await this.getAllShippingAddress();
}
}
await this.getQrSrc();
},
methods: {
choosPayType(val) {
this.pay_type = val
},
showNum(val) {
console.log(Number(val),'Number(val)');
return Number(val)
},
closePayPop() {
this.payPop = false
},
openService() {
this.service_pop = true;
},
// 商品服务弹窗
cancelService() {
this.service_pop = false;
},
// 获取地址列表
getAllShippingAddress() {
this.$u.api
.getAllShippingAddress({
page: 1,
pageSize: 10
})
.then(({
data
}) => {
if (data.length) {
const address = data.find(item => item.defaultStatus === 5) || data[0];
this.address_data = {
provinceCode: address.provinceCode,
cityCode: address.cityCode,
districtCode: address.districtCode,
provinceName: address.area.provinceName,
cityName: address.area.cityName,
districtName: address.area.districtName
};
this.$store.commit('commit_nowAddress', this.address_data);
if (this.not_dispatch_areas.areas) {
if (this.address_data.districtCode) {
this.is_not_express = this.not_dispatch_areas.areas.indexOf(parseInt(this
.address_data.districtCode)) === -1;
} else if (this.address_data.cityCode) {
this.is_not_express = this.not_dispatch_areas.citys.indexOf(parseInt(this
.address_data.cityCode)) === -1;
} else {
this.is_not_express = this.not_dispatch_areas.provinces.indexOf(parseInt(this
.address_data.provinceCode)) === -1;
}
}
}
});
},
// 修改购买金额
buyNumchange(val) {
this.buy_num = val;
},
// 切换商品规格属性
skuChange(val) {
this.now_sku_data = val;
if (this.now_sku_data.activity && this.now_sku_data.activity.activityId) {
let nowData = parseInt(new Date().getTime() / 1000);
if (this.now_sku_data.activity.endTime && this.now_sku_data.activity.endTime - nowData > 0) {
let totalSecond = this.now_sku_data.activity.endTime - nowData;
this.phaseTime = {
second: totalSecond % 86400,
day: totalSecond <= 0 ? 0 : parseInt(totalSecond / 86400)
};
}
}
},
// 收藏商品
collectGoods() {
if (!this.isLogin) {
this.$api.msg('请登录');
return;
}
if (this.goods_detail.isCollect) {
this.goods_detail.isCollect = false;
} else {
this.goods_detail.isCollect = true;
}
this.$u.api.collectGoods(this.goods_id).then(res => {
if (!this.goods_detail.isCollect) {
this.$api.msg('已取消收藏');
} else {
this.$api.msg('已收藏');
}
});
},
getQrSrc() {
// #ifdef MP-TOUTIAO
let pathT = 'pagesT/product/product?id=' + this.goods_id;
pathT = encodeURIComponent(pathT);
this.$u.api
.byteCreateQRCode({
path: pathT,
params: this.goods_id,
appname: 'toutiao'
})
.then(data => {
this.QrSrc = data.data.indexOf('https') > -1 ? data.data : webUrl.QRC_SRC + data.data;
});
// #endif
// #ifdef MP-WEIXIN || H5
let pathS = 'pagesT/product/product';
this.$u.api
.createwxaqrcode({
path: pathS,
params: this.goods_id
})
.then(data => {
this.QrSrc = data.data.indexOf('https') > -1 ? data.data : webUrl.QRC_SRC + data.data;
console.log(this.QrSrc);
});
// #endif
},
handelImg(url) {
if (url.indexOf('?imageView2/2/w/750/h/750') > -1) {
return url.replace('?imageView2/2/w/750/h/750', '');
} else if (url.indexOf('?imageView2/2/w/750') > -1) {
return url.replace('?imageView2/2/w/750', '');
} else {
return url;
}
},
generatePoster() {
// this.is_poster = true;
// this.canvasPop = true;
// this.sharePop = false;
const pramas = {
id: this.goods_detail.id,
priceShop: '¥' + this.goods_detail.maxMarketPrice,
headImgs: this.goods_detail.images.map(item => this.handelImg(item)),
goodsImg: this.handelImg(this.goods_detail.images[0]),
goodsName: this.goods_detail.title,
goodsPrice: '¥' + this.goods_detail.minSalePrice,
mainLogo: '',
recommendCodeGoods: this.QrSrc,
share: {
shareContent: this.$store.state.baseSet.shop || '',
shareImg: this.handelImg(this.goods_detail.images[0]),
shareTitle: this.goods_detail.title,
shareUrl: this.handelImg(this.goods_detail.images[0])
}
};
uni.setStorageSync('posterData', pramas)
uni.navigateTo({
url: '/pagesT/product/goodsPoster'
});
},
saveImage() {
this.canvasPop = false;
},
cancelImg() {
this.is_poster = false;
this.canvasPop = false;
},
shareGoods() {
this.sharePop = true;
},
//App分享为微信小程序（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）
shareFriend() {
const path = '/pagesT/unit/itemdetail?id=' + this.goods_id;
uni.share({
provider: 'weixin',
scene: 'WXSceneSession',
type: 5,
imageUrl: this.imgList[0],
title: this.goods_detail.title,
miniProgram: {
id: 'gh_16db94f79967', //微信小程序原始ID
path: path,
type: 0,
webUrl: ''
},
success: ret => {
console.log(JSON.stringify(ret));
}
});
},
// 分享弹窗关闭
cancelPop() {
this.sharePop = false;
},
// 如果是阶梯价
ladderPriceChange() {
return this.now_sku_data.ladderPrice.find(ladder => (this.buy_num || 1) >= ladder.from && (this.buy_num ||
1) <= ladder.to).price;
},
// 请求商品品详情
async getGoodsDetail() {
let that = this
if(that.isyhk == 1) {
that.$u.api.getYhkDetail({
id: that.goods_id
}).then(({
data
}) => {
console.log(data, 'itemdetail+++')
// 轮播图
that.goods_detail = data;
that.goods_detail.result = data.introduce
let arr = []
arr[0] = data.image
that.imgList = arr;
console.log(that.imgList,'that.imgList')
})
}else {
that.$u.api.getItemDetail({
id: that.goods_id
}).then(({
data
}) => {
console.log(data, 'itemdetail+++')
// 轮播图
that.goods_detail = data;
that.imgList = data.slider_image;
})
}
// this.$u.api
// .getGoodsDetail(this.goods_id)
// .then(({
// data
// }) => {
// uni.setNavigationBarTitle({
// title: data.title
// });
// this.imgList = data.images;
// data.specGroup = data.specGroup.map(item => {
// return {
// ...item,
// params: item.params.map(itemP => {
// return {
// ...itemP,
// isdisabled: true
// };
// })
// };
// });
// this.goods_detail = data;
// // 抄码商品获取 KG 数据
// if (data.isEq === 5) {
// this.eq_sku_kg = data.specMultiple.find(item => item.isMaster === 5);
// this.eq_sku_jian = data.specMultiple.find(item => item.isMaster === 4);
// }
// this.not_dispatch_areas = data.express.ruleData.not_dispatch_areas;
// if (this.skuId) {
// // 如果已有选中的skuId 根据ID匹配对应规格数据
// const specMultiple = data.specMultiple.find(item => item.id === parseInt(this.skuId));
// if (specMultiple.isSale !== 4) {
// this.now_sku_data = specMultiple;
// }
// } else if (data.specMultiple.length === 1 && data.specMultiple[0].isSale !== 4) {
// this.now_sku_data = data.specMultiple[0];
// } else {
// // 如果当前商品是非抄码商品 默认选中默认规格
// if (data.isEq === 4) {
// const specMultiple = data.specMultiple.find(item => item.isDefault === 5);
// if (specMultiple && specMultiple.isSale !== 4) {
// this.now_sku_data = specMultiple;
// }
// } else {
// // 抄码商品默认选中一个
// const specMultiple = data.specMultiple.find(item => item.isMaster === 4);
// if (specMultiple && specMultiple.isSale !== 4) {
// this.now_sku_data = specMultiple;
// }
// }
// }
// if (this.now_sku_data.activity && this.now_sku_data.activity.activityId) {
// let nowData = parseInt(new Date().getTime() / 1000);
// if (this.now_sku_data.activity.endTime && this.now_sku_data.activity.endTime -
// nowData > 0) {
// let totalSecond = this.now_sku_data.activity.endTime - nowData;
// this.phaseTime = {
// second: totalSecond % 86400,
// day: totalSecond <= 0 ? 0 : parseInt(totalSecond / 86400)
// };
// }
// }
// // 获取该商品的组合套餐
// if (this.isLogin) {
// this.listsApiComBinPackage();
// }
// })
// .catch(err => {
// setTimeout(() => {
// uni.navigateBack();
// }, 1500);
// });
},
//分享
share() {
this.$refs.share.toggleMask();
},
openaddcartPop(type) {
// if (!this.is_not_express) return;
// this.is_add_show = true;
// this.$u.api.calculation({
// })
console.log(this.isyhk,'this.isyhk');
if(this.isyhk == 1) {
this.$u.api.getCustomerInfo().then(({ data }) => {
console.log(data,'userInfo');
this.userInfo = data;
this.$store.commit('commit_userStatus', data);
this.payPop = true
});
}else {
this.goPage('/pagesT/order/createOrderT?id=' + this.goods_detail.id)
}
},
// 支付
submit() {
let that = this
// 判断余额是否足够
if(that.pay_type == 1 && (that.goods_detail.price*1 > that.userInfo.memberBalance*1)) {
return this.$u.toast('抱歉，您的可用余额不足');
}
that.$u.api.buyYhk({
"id": that.goods_detail.id,
"pay_type": that.pay_type, //1余额2微信3支付宝
"source": that.pay_type == 2 ? 3: '',
}).then(({
data
}) => {
// 余额支付
if(that.pay_type == 1) {
console.log(data)
if(data == '支付成功' || data.data == '支付成功') {
that.payPop = false
setTimeout(() => {
uni.navigateTo({
url:'/pagesT/money/paySuccess?price=' + that.goods_detail.price + '&isyhq=1'
})
// this.otheMsgTip('/pagesT/money/paySuccess?price=' + this
// .goods_detail.price + '&isyhq=1');
}, 200);
}
}
// 微信支付
if(that.pay_type == 2) {
// data.data
let payInfo = data.data
// #ifdef MP-WEIXIN
uni.requestPayment({
provider: 'wxpay',
timeStamp: payInfo.timeStamp, //当前时间
nonceStr: payInfo.nonceStr, //随机字符串，长度在32一下
package: payInfo.package, //统一单接口返回的prepay_id
signType: payInfo.signType, //签名算法，目前支持MD5
paySign: payInfo.paySign, //签名
success: res => {
// 订单审核，取消订单提醒
that.payPop = false
console.log('微信支付成功');
setTimeout(() => {
uni.navigateTo({
url:'/pagesT/money/paySuccess?price=' + that.goods_detail.price + '&isyhq=1'
})
// this.otheMsgTip('/pagesT/money/paySuccess?price=' + this
// .goods_detail.price + '&isyhq=1');
}, 200);
},
fail: async err => {
that.payPop = false
that.$u.toast('支付失败');
console.log('支付失败');
// await setTimeout(() => {
// // uni.redirectTo({
// // url: '/pagesT/order/orderT?state=0'
// // });
// }, 100);
}
});
// #endif
}
})
},
// 关闭加入购物车弹窗
closeaddcartPop(obj) {
if (!obj.show) {
this.is_add_show = false;
}
},
previewImage(index) {
let urls = JSON.parse(JSON.stringify(this.imgList));
if (index > 0) {
urls.unshift(urls[index]);
}
uni.previewImage({
urls: urls,
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: data => {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: err => {
console.log(err.errMsg);
}
}
});
},
//轮播图指示器
swiperChange(event) {
this.currentSwiper = event.detail.current;
},
back() {
if (this.pageName) {
this.goPage('/pages/index/index', 'switchTab');
} else {
uni.navigateBack();
}
},
// 获取该商品的组合套餐
listsApiComBinPackage() {
if (!this.goods_detail.shopId) return;
this.$u.api
.listsApiComBinPackage({
page: 1,
pageSize: 10,
shopId: this.goods_detail.shopId,
goodsId: this.goods_id
})
.then(({
data
}) => {
this.shopId = this.goods_detail.shopId;
this.combinedPackage = data;
this.total = data.length;
});
},
// #ifdef MP
// 添加分销上下级关系 source: 1:首次点击链接 2:首次下单 3:首次付款'
async relationshipBusinessman(businessmanId) {
console.log('上级ID', businessmanId);
if (!this.$store.state.hasLogin) {
// 没有登录不请求接口
return;
}
await this.$u.api.relationshipBusinessman({
businessmanId: businessmanId,
source: 1
});
console.log('上下:', data.data);
}
// #endif
}
};
</script>
<style lang="scss">
@keyframes showPopup {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hidePopup {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes showLayer {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
@keyframes hideLayer {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
.icon {
font-size: 26upx;
}
.back-icon {
font-size: 36rpx;
padding-left: 24rpx;
color: #2a2a2a;
}
.swiper-box {
background-color: #ffffff;
position: relative;
width: 100%;
height: 100vw;
swiper {
width: 100%;
height: 100vw;
swiper-item {
image {
width: 100%;
height: 100vw;
background-color: #f5f5f5;
}
}
}
.indicator {
display: flex;
justify-content: center;
align-items: center;
padding: 0 25upx;
height: 40upx;
border-radius: 4upx;
font-size: 22upx;
position: absolute;
bottom: 50upx;
right: 30upx;
color: #fff;
background-color: rgba(0, 0, 0, 0.2);
}
}
.goods-info {
overflow: hidden;
transform: translateY(-36rpx);
.seckill-view {
padding: 0 20upx;
height: 80upx;
line-height: 80upx;
background: linear-gradient(to right, #ff3859, #ff2d2e);
color: #ffffff;
.ibonxianshimiaosha {
font-size: 36rpx;
}
}
.price-view {
padding: 0 30rpx;
height: 152rpx;
background-color: #fa6400;
color: #ffffff;
border-radius: 48rpx 48rpx 0 0;
position: relative;
.price-out {
position: absolute;
top: 50%;
transform: translateY(calc(-50% - 16rpx));
font-size: 48rpx;
font-family: DIN-Medium;
.rmb-ic {
font-size: 24rpx;
}
.market-price {
text-decoration: line-through;
font-size: 24upx;
color: #ffffff;
opacity: 0.6;
font-weight: 400;
}
.vip-price {
display: inline-block;
margin-left: 20rpx;
line-height: 32rpx;
height: 32rpx;
border-radius: 4rpx;
overflow: hidden;
font-family: DINPro-Regular;
.price-text {
float: left;
min-width: 80rpx;
text-align: center;
vertical-align: middle;
font-size: 20rpx;
color: #ffdfa2;
background: linear-gradient(270deg, #1e5657 0%, #0d2b2c 100%);
padding: 0 8rpx;
}
.price-bs {
text-align: center;
float: left;
vertical-align: middle;
width: 32rpx;
background-color: #ffdfa2;
font-size: 20rpx;
color: #2c7564;
}
}
}
.right-view {
position: absolute;
right: 30rpx;
top: calc(50% - 16rpx);
transform: translateY(-50%);
font-size: 24rpx;
.goods-num {
text-align: right;
.num-li {
display: inline-block;
font-weight: 400;
margin-left: 20rpx;
}
}
}
}
.active-view {
padding: 0;
overflow: hidden;
// 限时秒杀样式
.active-left {
padding-left: 30rpx;
width: 270rpx;
line-height: normal;
padding-top: 20rpx;
.goods-num {
height: 28rpx;
line-height: 28rpx;
display: flex;
.num-li {
font-weight: 400;
margin-right: 20rpx;
font-size: 20rpx;
}
}
.market-price {
text-decoration: line-through;
font-size: 24upx;
color: #ffffff;
opacity: 0.6;
font-weight: 400;
}
}
.active-right {
padding-right: 30rpx;
width: 480rpx;
background-color: #e02020;
height: 150rpx;
padding-left: 28rpx;
padding-top: 20rpx;
.ac-r-left {
.active-ic {
height: 32rpx;
line-height: 32rpx;
font-size: 32rpx;
font-weight: bold;
.ibonshijian {
font-size: 32rpx;
font-weight: normal;
margin-right: 6rpx;
}
}
.active-desc {
height: 32rpx;
line-height: 32rpx;
font-size: 24rpx;
margin-top: 15rpx;
}
}
.ac-r-right {
text-align: center;
.time-title {
font-size: 24rpx;
margin-bottom: 8rpx;
}
.count-down {
font-family: DIN-Medium;
.day-num {
height: 40rpx;
padding: 0 4rpx;
display: inline-block;
background-color: #000000;
color: #ffffff;
border-radius: 6rpx;
text-align: center;
line-height: 40rpx;
font-size: 28rpx;
}
.day-text {
display: inline-block;
line-height: 40rpx;
color: #ffffff;
font-size: 24rpx;
margin: 0 8rpx;
}
}
}
}
}
.goods-info-main {
transform: translateY(-32rpx);
padding: 30rpx;
background: #ffffff;
border-radius: 32rpx 32rpx 8rpx 8rpx;
.lap-info {
display: flex;
font-size: 24upx;
.lap-li {
text-align: center;
flex: 3;
padding: 0 20upx;
.laprice-text {
font-size: 28upx;
font-weight: 600;
color: #ff4d01;
}
.laprice-goods-num {
color: #333333;
}
}
}
.top-title {
.title {
width: 594rpx;
font-size: 32rpx;
letter-spacing: 1px;
color: #2a2a2a;
font-weight: 500;
.goods-brand {
letter-spacing: 0;
font-weight: 400;
padding: 0 16upx;
height: 40rpx;
line-height: 40rpx;
border-radius: 40rpx;
font-size: 24rpx;
font-weight: 500;
display: inline-block;
color: #ffffff;
margin-right: 16rpx;
}
}
.collection-btn {
text-align: center;
font-size: 20rpx;
.ibonfont {
font-size: 40rpx;
}
}
}
.describe {
font-size: 28rpx;
color: #9a9a9a;
padding-top: 20rpx;
font-weight: 500;
color: #e02020;
}
.active-box {
margin-top: 40rpx;
.row {
width: 100%;
display: flex;
align-items: center;
position: relative;
.text {
font-size: 28upx;
color: #9a9a9a;
margin-right: 40upx;
}
.content {
.ac-li {
margin-bottom: 10upx;
.ac-label {
background-color: #fa6400;
padding: 0 16upx;
height: 40rpx;
line-height: 40rpx;
border-radius: 40rpx;
font-size: 20rpx;
font-weight: 500;
display: inline-block;
color: #ffffff;
margin-right: 16rpx;
}
.ac-activityTitle {
display: inline-block;
font-size: 24upx;
}
.ac-value {
font-size: 24upx;
padding-top: 10rpx;
.ac-p {
color: $price-color;
}
}
}
}
}
}
}
}
.info-box {
padding: 16rpx 30upx;
background-color: #fff;
border-radius: 12upx;
transform: translateY(-48rpx);
margin-top: 16rpx;
.row {
width: 100%;
display: flex;
align-items: center;
position: relative;
line-height: 80rpx;
.text {
font-size: 28upx;
color: #9a9a9a;
margin-right: 40upx;
}
.content {
.conversion {
display: inline-block;
margin-right: 10rpx;
}
.no-sel {
color: #9a9a9a;
}
.service-li {
display: inline-block;
font-size: 22rpx;
color: #6c6c6c;
margin-left: 20rpx;
-webkit-line-clamp: 1;
.service-icon {
font-size: 28rpx;
margin-right: 12rpx;
}
.icon {
width: 28rpx;
height: 28rpx;
border-radius: 4rpx;
margin-right: 12rpx;
}
}
}
.arrow {
position: absolute;
right: 0;
.icon {
color: #afafaf;
}
}
}
}
.group-ul {
.group-li {
background-color: #ffffff;
border-radius: 12rpx;
margin-bottom: 20rpx;
.float_left {
.left-scroll {
width: 430rpx;
white-space: nowrap;
.goods-li {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
image {
display: block;
width: 150rpx;
height: 150rpx;
border-radius: 10rpx;
margin: 0 auto;
}
text-align: center;
.goods-name {
width: 150rpx;
height: 36rpx;
line-height: 36rpx;
margin-top: 10rpx;
font-size: 24rpx;
-webkit-line-clamp: 1;
}
}
.plus-icon {
vertical-align: middle;
display: inline-block;
line-height: 150rpx;
padding: 0 10rpx;
height: 200rpx;
}
}
}
.dy-icon {
padding: 0 10rpx;
line-height: 150rpx;
padding: 0 10rpx;
height: 200rpx;
color: #cecece;
.ibonicon {
font-size: 26rpx;
}
}
.price-right {
color: #666666;
font-size: 24rpx;
text-align: center;
width: 190rpx;
.group-price {
font-family: DIN-Medium;
.primary-color {
font-weight: 700;
font-size: 28rpx;
}
}
.save-price {
font-family: DIN-Medium;
padding: 10rpx 0;
}
.buy-btn {
line-height: 56rpx;
height: 56rpx;
border-radius: 8rpx;
text-align: center;
color: #ffffff;
width: 150rpx;
margin: 10rpx auto 0;
}
}
}
}
.setMeal_more {
color: #999;
text-align: center;
font-size: 24rpx;
}
.description {
padding-bottom: 100upx;
.title {
width: 100%;
height: 80upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26upx;
color: #999;
}
}
.footer {
position: fixed;
bottom: 0upx;
width: 100%;
padding: 12upx 30rpx;
background-color: #ffffff;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px -3rpx 32rpx 0px rgba(156, 170, 175, 0.16);
.icons {
height: 74upx;
.box {
height: 64upx;
margin-left: 32rpx;
display: inline-block;
text-align: center;
position: relative;
.icon {
font-size: 36upx;
color: #000000;
}
.text {
display: flex;
justify-content: center;
width: 100%;
font-size: 20upx;
color: #3c3c3c;
padding-top: 5rpx;
}
&:first-child {
margin-left: 10rpx;
padding-right: 24rpx;
position: relative;
&::after {
position: absolute;
top: 10rpx;
right: 0;
content: ' ';
display: inline-block;
width: 1px;
height: 48rpx;
background: #d8d8d8;
border-radius: 2rpx;
}
}
}
}
.btn {
overflow: hidden;
.buy {
border-radius: 8upx;
height: 74upx;
// width: 385rpx;
width: 580rpx;
color: #ffffff;
display: inline-block;
line-height: 74upx;
text-align: center;
font-size: 28upx;
&:first-child {
margin-right: 10rpx;
}
}
}
}
.popup {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 20;
display: none;
.mask {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 21;
background-color: rgba(0, 0, 0, 0.6);
}
.layer {
position: fixed;
z-index: 22;
bottom: -70%;
width: 100%;
padding: 0 4%;
height: 70%;
border-radius: 20upx 20upx 0 0;
background-color: #fff;
display: flex;
flex-wrap: wrap;
align-content: space-between;
.content {
width: 100%;
padding: 20upx 0;
}
.btn {
width: 100%;
height: 100upx;
.button {
width: 100%;
height: 80upx;
border-radius: 40upx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-color: #f47952;
font-size: 28upx;
}
}
}
&.show {
display: block;
.mask {
animation: showPopup 0.2s linear both;
}
.layer {
animation: showLayer 0.2s linear both;
}
}
&.hide {
display: block;
.mask {
animation: hidePopup 0.2s linear both;
}
.layer {
animation: hideLayer 0.2s linear both;
}
}
&.none {
display: none;
}
&.service {
.row {
margin: 30upx 0;
.title {
font-size: 30upx;
margin: 10upx 0;
}
.description {
font-size: 28upx;
color: #999;
}
}
}
&.spec {
.title {
font-size: 30upx;
margin: 30upx 0;
}
.sp {
display: flex;
view {
font-size: 28upx;
padding: 5upx 20upx;
border-radius: 8upx;
margin: 0 30upx 20upx 0;
background-color: #f6f6f6;
&.on {
padding: 3upx 18upx;
border: solid 1upx #f47925;
}
}
}
.length {
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;
height: 60upx;
margin: 0 10upx;
background-color: #f3f3f3;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
input {
width: 80upx;
height: 60upx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 26upx;
}
}
.sub,
.add {
width: 60upx;
height: 60upx;
background-color: #f3f3f3;
border-radius: 5upx;
.icon {
font-size: 30upx;
width: 60upx;
height: 60upx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
}
.share {
display: none;
&.show {
display: block;
.mask {
animation: showPopup 0.15s linear both;
}
.layer {
animation: showLayer 0.15s linear both;
}
}
&.hide {
display: block;
.mask {
animation: hidePopup 0.15s linear both;
}
.layer {
animation: hideLayer 0.15s linear both;
}
}
&.none {
display: none;
}
.mask {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
width: 100%;
height: 100%;
top: 0;
z-index: 11;
}
.layer {
width: 92%;
position: fixed;
z-index: 12;
padding: 0 4%;
top: 100%;
background-color: rgba(255, 255, 255, 0.9);
.list {
width: 100%;
display: flex;
padding: 10upx 0 30upx 0;
.box {
width: 25%;
display: flex;
justify-content: center;
flex-wrap: wrap;
image {
width: 13.8vw;
height: 13.8vw;
}
.title {
margin-top: 10upx;
display: flex;
justify-content: center;
width: 100%;
font-size: 26upx;
}
}
}
.btn {
width: 100%;
height: 100upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28upx;
border-top: solid 1upx #666666;
}
.h1 {
width: 100%;
height: 80upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 34upx;
}
}
}
.coupon-box {
.row {
.content {
.coupon-li {
display: inline-block;
width: 120upx;
background-color: $price-color;
color: #ffffff;
line-height: 30upx;
font-size: 18upx;
text-align: center;
}
}
}
}
.share-tit {
line-height: 80upx;
text-align: center;
font-size: 32upx;
}
.share-cancel {
line-height: 80upx;
text-align: center;
font-size: 28upx;
border-top: 1px solid #f4f4f4;
}
.share-ul {
display: flex;
padding: 50upx 0;
.share-li {
flex: 3;
.share-btn {
background-color: #ffffff;
font-size: 26upx;
&::after {
border: 0 none;
}
.icon-view {
display: inline-block;
width: 100upx;
height: 100upx;
border-radius: 100%;
background-color: #18b566;
line-height: 100upx;
text-align: center;
margin-bottom: 10upx;
}
}
}
}
.poster-view {
// width: 600upx;
// margin: 0 auto;
}
.service-box {
.content {
width: 560rpx;
-webkit-line-clamp: 1;
.service-li {
display: inline-block;
color: #666666;
font-size: 24rpx;
margin-right: 30rpx;
.icon {
width: 50rpx;
height: 50rpx;
border-radius: 4rpx;
}
.ibonfont {
margin-right: 10rpx;
font-size: 24rpx;
color: $uni-color-primary;
}
}
}
}
.service-pop {
.title {
line-height: 100rpx;
height: 100rpx;
font-size: 32rpx;
text-align: center;
color: #222;
}
.service-ul {
padding: 0 30rpx;
max-height: 430rpx;
overflow-y: auto;
width: 100%;
.service-li {
font-size: 28rpx;
padding: 24rpx 0;
.icon {
width: 32rpx;
height: 32rpx;
border-radius: 4rpx;
margin-right: 20rpx;
}
.ibonfont {
font-size: 32rpx;
color: $uni-color-primary;
margin-right: 20rpx;
}
.desc {
padding-left: 54rpx;
padding-top: 10rpx;
font-size: 24rpx;
color: #999999;
}
}
}
.confirm-btn {
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #ffffff;
background-color: $uni-color-primary;
margin-top: 30rpx;
}
}
.pay-pop-view {
background-color: #ffffff;
border-top-left-radius: 12upx;
border-top-right-radius: 12upx;
font-size: 28upx;
.pay-sel-title {
padding: 0 30upx;
line-height: 88upx;
font-weight: bold;
font-size: 32upx;
.ibonfont {
color: #999;
font-weight: 400;
}
}
.pay-btn {
height: 90upx;
line-height: 90upx;
color: #000;
font-size: 32upx;
text-align: center;
background-color: #108ee9;
}
.pay-ul {
.pay-li {
line-height: 100upx;
.ibonfont {
padding-left: 30upx;
font-size: 46upx;
vertical-align: middle;
margin-right: 24upx;
}
.ibonweixinzhifu {
color: #04be02;
}
.ibonumidd17 {
color: #108ee9;
}
.ibonhuodaofukuan {
color: #f2b844;
}
.pay-name {
width: 650upx;
display: inline-block;
padding-right: 30upx;
vertical-align: middle;
border-bottom: 1px solid #f5f5f5;
.ibonxuanze1,
.ibonweixuanze {
margin-right: 0;
padding-left: 0;
font-size: 38upx;
}
.balace-num {
font-size: 24rpx;
color: #6c6c6c;
}
}
.balance-pay-name {
position: relative;
padding-bottom: 20rpx;
.balance-tip {
position: absolute;
font-size: 22rpx;
line-height: 36rpx;
bottom: 10rpx;
left: 0;
}
}
}
}
}
</style>