chore(组件): 组件移动方案实施可行性最高的方案
This commit is contained in:
465
pages_goods/components/goods-detail-view/detail.js
Normal file
465
pages_goods/components/goods-detail-view/detail.js
Normal file
@@ -0,0 +1,465 @@
|
|||||||
|
// 商品详情业务
|
||||||
|
import {
|
||||||
|
Weixin
|
||||||
|
} from '@/common/js/wx-jssdk.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
skuId: 0,
|
||||||
|
goodsId: 0,
|
||||||
|
isIphoneX: false, //判断手机是否是iphoneX以上
|
||||||
|
whetherCollection: 0,
|
||||||
|
|
||||||
|
//是否开启预览，0：不开启，1：开启
|
||||||
|
preview: 0,
|
||||||
|
videoContext: '',
|
||||||
|
|
||||||
|
// 媒体,图片,视频
|
||||||
|
|
||||||
|
// 解决每个商品SKU图片数量不同时，无法切换到第一个，导致轮播图显示不出来
|
||||||
|
swiperInterval: 1,
|
||||||
|
swiperAutoplay: false,
|
||||||
|
swiperCurrent: 1,
|
||||||
|
switchMedia: 'img',
|
||||||
|
|
||||||
|
//评价
|
||||||
|
goodsEvaluate: [{
|
||||||
|
member_headimg: '',
|
||||||
|
member_name: '',
|
||||||
|
content: '',
|
||||||
|
images: [],
|
||||||
|
create_time: 0,
|
||||||
|
sku_name: ''
|
||||||
|
}],
|
||||||
|
evaluateConfig: {
|
||||||
|
evaluate_audit: 1,
|
||||||
|
evaluate_show: 0,
|
||||||
|
evaluate_status: 1
|
||||||
|
},
|
||||||
|
|
||||||
|
// 是否可分享到好物圈
|
||||||
|
goodsCircle: false,
|
||||||
|
service: null,
|
||||||
|
shareUrl: '', // 分享链接
|
||||||
|
source_member: 0, //分享人的id
|
||||||
|
isCommunity: false, //社群弹窗
|
||||||
|
|
||||||
|
poster: "-1", //海报
|
||||||
|
posterMsg: "", //海报错误信息
|
||||||
|
posterHeight: 0,
|
||||||
|
posterParams: {}, //海报所需参数
|
||||||
|
goodsRoute: '',
|
||||||
|
posterApi: '',
|
||||||
|
goodsAttrShow: false, // 商品属性是否展开
|
||||||
|
|
||||||
|
//门店列表
|
||||||
|
storeList: {
|
||||||
|
data: [],
|
||||||
|
page: 1,
|
||||||
|
page_size: 10
|
||||||
|
},
|
||||||
|
isShowStore: false,
|
||||||
|
latitude: null, // 纬度
|
||||||
|
longitude: null, // 经度
|
||||||
|
evaluateCount: 0, // 商品评论数量
|
||||||
|
deliveryType: null, // 配送方式
|
||||||
|
isVirtual: 0 //是否为虚拟商品
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.isIphoneX = this.$util.uniappIsIPhoneX();
|
||||||
|
|
||||||
|
if (this.location) {
|
||||||
|
this.latitude = this.location.latitude;
|
||||||
|
this.longitude = this.location.longitude;
|
||||||
|
} else {
|
||||||
|
this.$util.getLocation();
|
||||||
|
}
|
||||||
|
this.getStoreData();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
location: function (nVal) {
|
||||||
|
if (nVal) {
|
||||||
|
this.latitude = nVal.latitude;
|
||||||
|
this.longitude = nVal.longitude;
|
||||||
|
this.getStoreData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init(params) {
|
||||||
|
this.skuId = params.sku_id;
|
||||||
|
this.goodsId = params.goods_id;
|
||||||
|
this.preview = params.preview;
|
||||||
|
this.source_member = params.source_member;
|
||||||
|
this.whetherCollection = params.whetherCollection;
|
||||||
|
this.posterParams = params.posterParams;
|
||||||
|
|
||||||
|
this.shareUrl = params.shareUrl;
|
||||||
|
this.goodsRoute = params.goodsRoute;
|
||||||
|
this.posterApi = params.posterApi;
|
||||||
|
this.isVirtual = params.isVirtual;
|
||||||
|
this.deliveryType = params.deliveryType;
|
||||||
|
this.evaluateConfig = params.evaluateConfig;
|
||||||
|
|
||||||
|
if (this.evaluateConfig.evaluate_show == 1) {
|
||||||
|
//商品评论
|
||||||
|
this.getGoodsEvaluate(params.evaluateList);
|
||||||
|
this.evaluateCount = params.evaluateCount;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let k in this.deliveryType) {
|
||||||
|
if (k == 'store') {
|
||||||
|
this.isShowStore = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getService();
|
||||||
|
|
||||||
|
this.videoContext = uni.createVideoContext('goodsVideo');
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
this.goodsSyncToGoodsCircle();
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
},
|
||||||
|
swiperChange(e) {
|
||||||
|
this.swiperCurrent = e.detail.current + 1;
|
||||||
|
},
|
||||||
|
|
||||||
|
//-------------------------------------服务-------------------------------------
|
||||||
|
|
||||||
|
openMerchantsServicePopup() {
|
||||||
|
this.$refs.merchantsServicePopup.open();
|
||||||
|
},
|
||||||
|
closeMerchantsServicePopup() {
|
||||||
|
this.$refs.merchantsServicePopup.close();
|
||||||
|
},
|
||||||
|
|
||||||
|
//-------------------------------------门店列表-------------------------------------
|
||||||
|
openStoreListPopup() {
|
||||||
|
this.$refs.storeListPopup.open();
|
||||||
|
},
|
||||||
|
closeStoreListPopup() {
|
||||||
|
this.$refs.storeListPopup.close();
|
||||||
|
},
|
||||||
|
getStoreData() {
|
||||||
|
//门店列表
|
||||||
|
let data = {
|
||||||
|
page: this.storeList.page,
|
||||||
|
page_size: this.storeList.page_size
|
||||||
|
};
|
||||||
|
if (this.latitude && this.longitude) {
|
||||||
|
data.latitude = this.latitude;
|
||||||
|
data.longitude = this.longitude;
|
||||||
|
}
|
||||||
|
this.$api.sendRequest({
|
||||||
|
url: '/api/store/page',
|
||||||
|
data: data,
|
||||||
|
success: res => {
|
||||||
|
if (this.storeList.page == 1) this.storeList.data == [];
|
||||||
|
if (res.code >= 0 && res.data) {
|
||||||
|
this.storeList.data = this.storeList.data.concat(res.data.list);
|
||||||
|
} else {
|
||||||
|
this.$util.showToast({
|
||||||
|
title: res.message
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
selectStore(item) {
|
||||||
|
this.$util.redirectTo('/pages_tool/store/detail', {
|
||||||
|
store_id: item.store_id
|
||||||
|
});
|
||||||
|
this.closeStoreListPopup();
|
||||||
|
},
|
||||||
|
//-------------------------------------属性-------------------------------------
|
||||||
|
|
||||||
|
switchGoodsAttr() {
|
||||||
|
this.goodsAttrShow = !this.goodsAttrShow;
|
||||||
|
},
|
||||||
|
//-------------------------------------评价-------------------------------------
|
||||||
|
//商品评论列表
|
||||||
|
getGoodsEvaluate(list) {
|
||||||
|
if (list) {
|
||||||
|
this.goodsEvaluate = list;
|
||||||
|
this.goodsEvaluate.forEach((item, index) => {
|
||||||
|
if (this.goodsEvaluate[index].images) this.goodsEvaluate[index].images = this.goodsEvaluate[index].images.split(",");
|
||||||
|
if (this.goodsEvaluate[index].is_anonymous == 1) this.goodsEvaluate[index].member_name = this.goodsEvaluate[index].member_name.replace(this.goodsEvaluate[index].member_name.substring(1, this.goodsEvaluate[index].member_name.length - 1), '***')
|
||||||
|
})
|
||||||
|
// if (this.goodsEvaluate.images) this.goodsEvaluate.images = this.goodsEvaluate.images.split(",");
|
||||||
|
// if (this.goodsEvaluate.is_anonymous == 1) this.goodsEvaluate.member_name = this.goodsEvaluate.member_name.replace(
|
||||||
|
// this.goodsEvaluate.member_name.substring(1, this.goodsEvaluate.member_name.length - 1), '***')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 预览评价图片
|
||||||
|
previewEvaluate(index, img_index, field) {
|
||||||
|
var paths = [];
|
||||||
|
for (let i = 0; i < this.goodsEvaluate[index][field].length; i++) {
|
||||||
|
paths.push(this.$util.img(this.goodsEvaluate[index][field][i]));
|
||||||
|
}
|
||||||
|
uni.previewImage({
|
||||||
|
current: img_index,
|
||||||
|
urls: paths
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//-------------------------------------关注-------------------------------------
|
||||||
|
async collection() {
|
||||||
|
if (this.preview) return; // 开启预览，禁止任何操作和跳转
|
||||||
|
|
||||||
|
if (this.storeToken) {
|
||||||
|
|
||||||
|
//未关注添加关注
|
||||||
|
if (this.whetherCollection == 0) {
|
||||||
|
let res = await this.$api.sendRequest({
|
||||||
|
url: "/api/goodscollect/add",
|
||||||
|
data: {
|
||||||
|
sku_id: this.skuId,
|
||||||
|
goods_id: this.goodsSkuDetail.goods_id,
|
||||||
|
sku_name: this.goodsSkuDetail.sku_name,
|
||||||
|
sku_price: this.goodsSkuDetail.show_price,
|
||||||
|
sku_image: this.goodsSkuDetail.sku_image
|
||||||
|
},
|
||||||
|
async: false,
|
||||||
|
});
|
||||||
|
var data = res.data;
|
||||||
|
if (data > 0) {
|
||||||
|
this.whetherCollection = 1;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//已关注取消关注
|
||||||
|
let res = await this.$api.sendRequest({
|
||||||
|
url: "/api/goodscollect/delete",
|
||||||
|
data: {
|
||||||
|
goods_id: this.goodsSkuDetail.goods_id
|
||||||
|
},
|
||||||
|
async: false,
|
||||||
|
});
|
||||||
|
var data = res.data;
|
||||||
|
if (data > 0) {
|
||||||
|
this.whetherCollection = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this.whetherCollection;
|
||||||
|
} else {
|
||||||
|
if (this.source_member) {
|
||||||
|
this.$refs.login.open(this.shareUrl + '&source_member=' + this.source_member);
|
||||||
|
} else {
|
||||||
|
this.$refs.login.open(this.shareUrl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//-------------------------------------分享-------------------------------------
|
||||||
|
// 打开分享弹出层
|
||||||
|
openSharePopup() {
|
||||||
|
this.$refs.sharePopup.open();
|
||||||
|
},
|
||||||
|
// 关闭分享弹出层
|
||||||
|
closeSharePopup() {
|
||||||
|
this.$refs.sharePopup.close();
|
||||||
|
},
|
||||||
|
copyUrl() {
|
||||||
|
let text = this.$config.h5Domain + this.shareUrl;
|
||||||
|
if (this.memberInfo && this.memberInfo.member_id) text += '&source_member=' + this.memberInfo.member_id;
|
||||||
|
this.$util.copy(text, () => {
|
||||||
|
this.closeSharePopup();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//-------------------------------------海报-------------------------------------
|
||||||
|
// 打开海报弹出层
|
||||||
|
openPosterPopup() {
|
||||||
|
this.getGoodsPoster();
|
||||||
|
this.$refs.sharePopup.close();
|
||||||
|
},
|
||||||
|
// 关闭海报弹出层
|
||||||
|
closePosterPopup() {
|
||||||
|
this.$refs.posterPopup.close();
|
||||||
|
this.poster = ''
|
||||||
|
},
|
||||||
|
//生成海报
|
||||||
|
getGoodsPoster() {
|
||||||
|
uni.showLoading({
|
||||||
|
'title': '海报生成中...'
|
||||||
|
})
|
||||||
|
//活动海报信息
|
||||||
|
if (this.memberInfo && this.memberInfo.member_id) this.posterParams.source_member = this.memberInfo.member_id;
|
||||||
|
|
||||||
|
this.$api.sendRequest({
|
||||||
|
url: this.posterApi,
|
||||||
|
data: {
|
||||||
|
page: this.goodsRoute,
|
||||||
|
qrcode_param: JSON.stringify(this.posterParams)
|
||||||
|
},
|
||||||
|
success: res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$refs.posterPopup.open();
|
||||||
|
this.poster = res.data.path + "?time=" + new Date().getTime();
|
||||||
|
} else {
|
||||||
|
this.posterMsg = res.message;
|
||||||
|
this.$util.showToast({
|
||||||
|
title: res.message
|
||||||
|
})
|
||||||
|
}
|
||||||
|
uni.hideLoading();
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 预览图片
|
||||||
|
previewMedia(index) {
|
||||||
|
var paths = [];
|
||||||
|
for (let i = 0; i < this.goodsSkuDetail.sku_images.length; i++) {
|
||||||
|
paths.push(this.$util.img(this.goodsSkuDetail.sku_images[i], {
|
||||||
|
size: 'big'
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
uni.previewImage({
|
||||||
|
current: index,
|
||||||
|
urls: paths,
|
||||||
|
// longPressActions: {
|
||||||
|
// itemList: ['发送给朋友', '保存图片', '关注'],
|
||||||
|
// success: function(data) {
|
||||||
|
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
||||||
|
// },
|
||||||
|
// fail: function(err) {
|
||||||
|
// console.log(err.errMsg);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
swiperImageError(index) {
|
||||||
|
this.goodsSkuDetail.sku_images[index] = this.$util.getDefaultImage().goods;
|
||||||
|
this.$forceUpdate();
|
||||||
|
},
|
||||||
|
// #ifdef MP || APP-PLUS
|
||||||
|
//小程序中保存海报
|
||||||
|
saveGoodsPoster() {
|
||||||
|
let url = this.$util.img(this.poster);
|
||||||
|
uni.downloadFile({
|
||||||
|
url: url,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.errMsg == "downloadFile:ok") {
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
success: () => {
|
||||||
|
this.$util.showToast({
|
||||||
|
title: "保存成功"
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
this.$util.showToast({
|
||||||
|
title: "保存失败，请稍后重试"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
this.$util.showToast({
|
||||||
|
title: "保存失败，请稍后重试"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
//售后保障查询
|
||||||
|
getService() {
|
||||||
|
this.$api.sendRequest({
|
||||||
|
url: '/api/goods/aftersale',
|
||||||
|
success: res => {
|
||||||
|
if (res.code == 0 && res.data) {
|
||||||
|
this.service = res.data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
/**
|
||||||
|
* 将商品同步到微信圈子
|
||||||
|
*/
|
||||||
|
goodsSyncToGoodsCircle() {
|
||||||
|
this.$api.sendRequest({
|
||||||
|
url: '/goodscircle/api/goods/sync',
|
||||||
|
data: {
|
||||||
|
goods_id: this.goodsSkuDetail.goods_id
|
||||||
|
},
|
||||||
|
success: res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.goodsCircle = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 将商品推荐到微信圈子
|
||||||
|
*/
|
||||||
|
openBusinessView() {
|
||||||
|
if (wx.openBusinessView) {
|
||||||
|
wx.openBusinessView({
|
||||||
|
businessType: 'friendGoodsRecommend',
|
||||||
|
extraData: {
|
||||||
|
product: {
|
||||||
|
item_code: this.goodsSkuDetail.goods_id,
|
||||||
|
title: this.goodsSkuDetail.sku_name,
|
||||||
|
image_list: this.goodsSkuDetail.sku_images.map((ele) => {
|
||||||
|
return this.$util.img(ele);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
success: function (res) {
|
||||||
|
console.log('success', res);
|
||||||
|
},
|
||||||
|
fail: function (res) {
|
||||||
|
console.log('fail', res);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
toEvaluateDetail(id) {
|
||||||
|
this.$util.redirectTo('/pages_tool/goods/evaluate', {
|
||||||
|
goods_id: id
|
||||||
|
});
|
||||||
|
},
|
||||||
|
showImg(e) {
|
||||||
|
//拿到图片的路径里面的内容放在我们数组中
|
||||||
|
let contentimg = e.target.dataset.nodes;
|
||||||
|
let arrImg = [];
|
||||||
|
for (var i = 0; i < contentimg.length; i++) {
|
||||||
|
var img = contentimg[i].children;
|
||||||
|
if (Array.isArray(img)) {
|
||||||
|
for (var j = 0; j < img.length; j++) {
|
||||||
|
if (img[j].attrs && img[j].name == "img") {
|
||||||
|
if (img[j].attrs.src) {
|
||||||
|
arrImg.push(img[j].attrs.src)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//最后一步就是把我们的所有图片放在预览的api中就可以了
|
||||||
|
uni.previewImage({
|
||||||
|
current: arrImg,
|
||||||
|
urls: arrImg,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
//-------------------------------------社群-------------------------------------
|
||||||
|
|
||||||
|
//添加福利群
|
||||||
|
onCommunity() {
|
||||||
|
this.isCommunity = true
|
||||||
|
},
|
||||||
|
onCloseCommunity() {
|
||||||
|
this.isCommunity = false
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
455
pages_goods/components/goods-detail-view/goods-detail-view.vue
Normal file
455
pages_goods/components/goods-detail-view/goods-detail-view.vue
Normal file
@@ -0,0 +1,455 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
|
||||||
|
<view class="goods-container">
|
||||||
|
<!-- 弹幕 -->
|
||||||
|
<pengpai-fadein-out v-if="goodsSkuDetail.barrage_show && goodsSkuDetail.barrageData" ref="pengpai" :duration="1600" :wait="1900" :top="200" :left="0" :radius="60" :loop="true" :info="goodsSkuDetail.barrageData"/>
|
||||||
|
|
||||||
|
<!-- 商品媒体信息 -->
|
||||||
|
<view class="goods-media" :style="{height: goodsSkuDetail.swiperHeight}">
|
||||||
|
<!-- 商品图片 -->
|
||||||
|
<view class="goods-img" :class="{ show: switchMedia == 'img' }">
|
||||||
|
<swiper class="swiper" @change="swiperChange" :interval="swiperInterval" :autoplay="swiperAutoplay" autoplay="true" interval="4000" circular="true">
|
||||||
|
<swiper-item v-for="(item, index) in goodsSkuDetail.sku_images" :key="index" :item-id="'goods_id_' + index">
|
||||||
|
<view class="item" @click="previewMedia(index)">
|
||||||
|
<image :src="$util.img(item, { size: 'big' })" @error="swiperImageError(index)" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<view class="img-indicator-dots">
|
||||||
|
<text>{{ swiperCurrent }}</text>
|
||||||
|
<text v-if="goodsSkuDetail.sku_images">/{{ goodsSkuDetail.sku_images.length }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品视频 -->
|
||||||
|
<view class="goods-video" :class="{ show: switchMedia == 'video' }">
|
||||||
|
<video id="goodsVideo" :src="$util.img(goodsSkuDetail.video_url)" :poster="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" objectFit="cover"></video>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 切换视频、图片 -->
|
||||||
|
<view class="media-mode" v-if="goodsSkuDetail.video_url != ''">
|
||||||
|
<text :class="{ 'color-base-bg': switchMedia == 'video' }" @click="switchMedia = 'video'">{{ $lang('video') }}</text>
|
||||||
|
<text :class="{ 'color-base-bg': switchMedia == 'img' }" @click="(switchMedia = 'img'), videoContext.pause()">{{ $lang('image') }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 价格区域 -->
|
||||||
|
<view class="goods-gression">
|
||||||
|
<slot name="price"></slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.isinformation == 0">
|
||||||
|
|
||||||
|
<!-- 入口区域 -->
|
||||||
|
<slot name="entrance"></slot>
|
||||||
|
|
||||||
|
<!-- 配送 -->
|
||||||
|
<!-- @click="$refs.deliveryType.open()" -->
|
||||||
|
<view class="item delivery-type" v-if="goodsSkuDetail.is_virtual == 0" >
|
||||||
|
<view class="label">{{$lang('send')}}</view>
|
||||||
|
<block v-if="deliveryType">
|
||||||
|
<view class="box">
|
||||||
|
<block v-for="(item, index) in deliveryType" :key="index">
|
||||||
|
<text v-if="goodsSkuDetail.support_trade_type.indexOf(index) != -1">{{$lang('express')}}</text>
|
||||||
|
<!-- {{ item.name }} -->
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<text class="iconfont icon-right"></text>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="box">未配置</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 门店 -->
|
||||||
|
<!-- <view class="item store-wrap" @click="openStoreListPopup()" v-if="addonIsExist.store && globalStoreInfo && isShowStore">
|
||||||
|
<view class="label">门店</view>
|
||||||
|
<view class="list-wrap">
|
||||||
|
<view class="name-wrap">
|
||||||
|
<text class="icondiy icon-system-shop"></text>
|
||||||
|
<text class="name">{{globalStoreInfo.store_name}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="other-wrap">
|
||||||
|
<text class="distance" v-if="parseFloat(globalStoreInfo.distance)">距离{{ globalStoreInfo.distance > 1 ? globalStoreInfo.distance + 'km' : globalStoreInfo.distance * 1000 + 'm' }}</text>
|
||||||
|
<text class="decorate" v-if="parseFloat(globalStoreInfo.distance)">.</text>
|
||||||
|
<view class="address">{{ globalStoreInfo.full_address + globalStoreInfo.address }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="iconfont icon-right"></text>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
|
<view class="item service" @click="openMerchantsServicePopup()" v-if="goodsSkuDetail.goods_service.length">
|
||||||
|
<view class="label">服务</view>
|
||||||
|
<view class="list-wrap">
|
||||||
|
<view class="item-wrap" v-for="(item, index) in goodsSkuDetail.goods_service" :key="index" v-if="index < 3">
|
||||||
|
<view class="item-wrap-box">
|
||||||
|
<view class="item-wrap-icon">
|
||||||
|
<text class="iconfont icon-dui" v-if="!item.icon || (!item.icon.imageUrl && !item.icon.icon)"></text>
|
||||||
|
<image class="icon-img" v-else-if="item.icon.iconType == 'img'" :src=" $util.img(item.icon.imageUrl)" />
|
||||||
|
<diy-icon class="icon-box" v-else-if="item.icon.iconType == 'icon'" :icon="item.icon.icon" :value="item.icon.style ? item.icon.style : null"></diy-icon>
|
||||||
|
</view>
|
||||||
|
<text>{{ item.service_name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="iconfont icon-right"></text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!--多规格区域-->
|
||||||
|
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.sku_spec_format">
|
||||||
|
<!-- 入口区域 -->
|
||||||
|
<slot name="skuspec"></slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.merch_id > 0">
|
||||||
|
<!-- 入口区域 -->
|
||||||
|
<slot name="entrance"></slot>
|
||||||
|
<!-- 商家 -->
|
||||||
|
<view class="item store-wrap" @click="$util.redirectTo('/pages_promotion/merch/detail', { merch_id: goodsSkuDetail.merch_id })">
|
||||||
|
<view class="list-wrap" style="display: flex;">
|
||||||
|
<view class="name-wrap">
|
||||||
|
<image :src="$util.img(goodsSkuDetail.merchinfo.merch_image)" mode="widthFix" style="width: 100rpx;height: 100rpx;border-radius: 50rpx;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="other-wrap">
|
||||||
|
<view class="address" style="margin-left: 30rpx;">
|
||||||
|
<view>{{goodsSkuDetail.merchinfo.merch_name}}</view>
|
||||||
|
<view style="font-size: 24rpx;color: #888;">官方认证商家，值得信赖！</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="iconfont icon-right"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 配送方式 -->
|
||||||
|
<view @touchmove.prevent.stop>
|
||||||
|
<uni-popup ref="deliveryType" type="bottom">
|
||||||
|
<view class="deliverytype-popup-layer popup-layer">
|
||||||
|
<view class="head-wrap" @click="$refs.deliveryType.close()">
|
||||||
|
<text>配送</text>
|
||||||
|
<text class="iconfont icon-close"></text>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-y class="type-body">
|
||||||
|
<block v-for="(item, index) in deliveryType" :key="index">
|
||||||
|
<view class="type-item" :class="{ 'not-support': goodsSkuDetail.support_trade_type.indexOf(index) == -1 }">
|
||||||
|
<text class="iconfont" :class="item.icon"></text>
|
||||||
|
<view class="content">
|
||||||
|
<view class="title">{{ item.name }}</view>
|
||||||
|
<view class="desc">{{ item.desc }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品服务 -->
|
||||||
|
<view @touchmove.prevent.stop>
|
||||||
|
<uni-popup ref="merchantsServicePopup" type="bottom">
|
||||||
|
<view class="goods-merchants-service-popup-layer popup-layer">
|
||||||
|
<view class="head-wrap" @click="closeMerchantsServicePopup()">
|
||||||
|
<text>商品服务</text>
|
||||||
|
<text class="iconfont icon-close"></text>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-y>
|
||||||
|
<view class="item" :class="{ 'empty-desc': !item.desc }" v-for="(item, index) in goodsSkuDetail.goods_service" :key="index">
|
||||||
|
<view class="item-icon" :class="{'empty-desc':!item.desc}">
|
||||||
|
<text class="iconfont icon-dui color-base-text" v-if="!item.icon || (!item.icon.imageUrl && !item.icon.icon)"></text>
|
||||||
|
<image class="icon-img" v-else-if="item.icon.iconType == 'img'" :src=" $util.img(item.icon.imageUrl)" />
|
||||||
|
<diy-icon class="icon-box" v-else-if="item.icon.iconType == 'icon'" :icon="item.icon.icon" :value="item.icon.style ? item.icon.style : null"></diy-icon>
|
||||||
|
</view>
|
||||||
|
<view class="info-wrap">
|
||||||
|
<text class="title">{{ item.service_name }}</text>
|
||||||
|
<text class="describe" v-if="item.desc">{{ item.desc }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="button-box">
|
||||||
|
<button type="primary" @click="closeMerchantsServicePopup()">确定</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 门店列表 -->
|
||||||
|
<view @touchmove.prevent.stop>
|
||||||
|
<uni-popup ref="storeListPopup" type="bottom">
|
||||||
|
<view class="goods-merchants-service-popup-layer popup-layer store-list-wrap">
|
||||||
|
<view class="head-wrap" @click="closeStoreListPopup()">
|
||||||
|
<text>门店列表</text>
|
||||||
|
<text class="iconfont icon-close"></text>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-y>
|
||||||
|
<view class="store-list-content">
|
||||||
|
<view class="list-item" v-for="(item, index) in storeList.data" :key="index" @click="selectStore(item)">
|
||||||
|
<view class="item-box">
|
||||||
|
<view class="item-image">
|
||||||
|
<image :src="$util.img(item.store_image)" v-if="item.store_image"/>
|
||||||
|
<image :src="$util.getDefaultImage().store" v-else/>
|
||||||
|
</view>
|
||||||
|
<view class="item-info">
|
||||||
|
<view class="item-title">
|
||||||
|
<text class="title">{{ item.store_name }}</text>
|
||||||
|
<text class="distance color-base-text" v-if="item.distance">
|
||||||
|
距离{{ item.distance > 1 ? item.distance + 'km' : item.distance * 1000 + 'm' }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-time" v-if="item.open_date">营业时间：{{ item.open_date }}
|
||||||
|
</view>
|
||||||
|
<view class="item-address">{{ item.full_address + item.address }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="item-right"><text class="iconfont icon-right"></text></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 业务区域 -->
|
||||||
|
<slot name="business"></slot>
|
||||||
|
|
||||||
|
<view class="detail-community" v-if="goodsSkuDetail.qr_data && goodsSkuDetail.qr_data.qr_state == 1">
|
||||||
|
<view class="community-box">
|
||||||
|
<image :src="$util.img('public/uniapp/goods/detail_erweiImage.png')" mode="aspectFill"></image>
|
||||||
|
<view class="community-content">
|
||||||
|
<view class="community-title">{{ goodsSkuDetail.qr_data.qr_name }}</view>
|
||||||
|
<view class="community-txt">{{ goodsSkuDetail.qr_data.community_describe }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="community-btn" @click="onCommunity()">添加</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 促销 -->
|
||||||
|
<!-- <view class="community-model" @touchmove.prevent.stop @click.stop="onCloseCommunity()" v-show="isCommunity">
|
||||||
|
<view class="community-model-content" @click.stop>
|
||||||
|
<view class="community-model-content-radius">
|
||||||
|
<view>添加社群</view>
|
||||||
|
</view>
|
||||||
|
<view class="community-model-content-draw" v-if="goodsSkuDetail.qr_data && goodsSkuDetail.qr_data.qr_img">
|
||||||
|
<image :src="goodsSkuDetail.qr_data.qr_img != '' && goodsSkuDetail.qr_data.qr_state == 1 ? $util.img(goodsSkuDetail.qr_data.qr_img) : $util.img('public/uniapp/goods/detail_erweiImage.png') " mode="aspectFill" show-menu-by-longpress="true"/>
|
||||||
|
</view>
|
||||||
|
<view class="community-model-content-text">长按识别二维码，添加社群</view>
|
||||||
|
</view>
|
||||||
|
<view class="community-model-close" @click.stop="onCloseCommunity()">
|
||||||
|
<text class="iconfont icon-close"></text>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
|
<!-- 参与流程 -->
|
||||||
|
<slot name="articipation"></slot>
|
||||||
|
|
||||||
|
<!-- 商品评价 -->
|
||||||
|
<view class="group-wrap" v-if="evaluateConfig.evaluate_show == 1 && goodsSkuDetail.isinformation == 0" style="display: none;">
|
||||||
|
<view class="goods-evaluate" @click="toEvaluateDetail(goodsSkuDetail.goods_id)">
|
||||||
|
<view class="tit">
|
||||||
|
<!-- <view class="tit" :class="{ active: goodsEvaluate.content }"> -->
|
||||||
|
<view>
|
||||||
|
<text class="color-title font-size-base">
|
||||||
|
评价
|
||||||
|
<text class="font-size-base">({{ evaluateCount }})</text>
|
||||||
|
</text>
|
||||||
|
<text class="evaluate-item-empty" v-if="!evaluateCount">暂无评价</text>
|
||||||
|
<view class="evaluate-item-empty" v-else>
|
||||||
|
<text class="font-size-tag">查看全部</text>
|
||||||
|
<text class="iconfont icon-right font-size-tag"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="evaluate-item" v-for="(item, index) in goodsEvaluate" :key="index"
|
||||||
|
v-if="item.content">
|
||||||
|
<view class="evaluator">
|
||||||
|
<view class="evaluator-info">
|
||||||
|
<view class="evaluator-face">
|
||||||
|
<image v-if="item.member_headimg" :src="$util.img(item.member_headimg)" @error="item.member_headimg = $util.getDefaultImage().head" mode="aspectFill" />
|
||||||
|
<image v-else :src="$util.getDefaultImage().head" @error="item.member_headimg = $util.getDefaultImage().head" mode="aspectFill" />
|
||||||
|
</view>
|
||||||
|
<view class="evaluator-name-wrap">
|
||||||
|
<text class="evaluator-name using-hidden" v-if="item.member_name.length > 2 && item.is_anonymous == 1">
|
||||||
|
{{ item.member_name[0] }}***{{ item.member_name[item.member_name.length - 1] }}
|
||||||
|
</text>
|
||||||
|
<text class="evaluator-name using-hidden" v-else>{{ item.member_name }}</text>
|
||||||
|
<view v-if="item.scores" class="evaluator-xing">
|
||||||
|
<xiaoStarComponent :starCount="item.scores * 2"></xiaoStarComponent>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="time color-tip">{{ $util.timeStampTurnTime(item.create_time) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="cont margin-top">{{ item.content }}</view>
|
||||||
|
<scroll-view scroll-x="true">
|
||||||
|
<view class="evaluate-img" v-if="item.images">
|
||||||
|
<view class="img-box" v-for="(img, img_index) in item.images" :key="img_index" @click="previewEvaluate(index, img_index, 'images')">
|
||||||
|
<image :src="$util.img(img)" mode="aspectFill" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="goods-attr" v-if="goodsSkuDetail.goods_attr_format && goodsSkuDetail.goods_attr_format.length > 0">
|
||||||
|
<view class="title">规格属性</view>
|
||||||
|
<view class="attr-wrap">
|
||||||
|
<block v-for="(item, index) in goodsSkuDetail.goods_attr_format" :key="index">
|
||||||
|
<view class="item" v-if="goodsAttrShow || (!goodsAttrShow && index < 4)">
|
||||||
|
<text class="attr-name">{{ item.attr_name }}</text>
|
||||||
|
<text class="value-name">{{ item.attr_value_name }}</text>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<view class="attr-action" v-if="goodsSkuDetail.goods_attr_format.length > 4" @click="switchGoodsAttr">
|
||||||
|
<block v-if="!goodsAttrShow">
|
||||||
|
展开<text class="iconfont icon-iconangledown"></text>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
收起<text class="iconfont icon-iconangledown-copy"></text>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 详情 -->
|
||||||
|
<view class="goods-detail-tab">
|
||||||
|
<view class="detail-tab">
|
||||||
|
<view class="tab-item">{{$lang('details')}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="detail-content active">
|
||||||
|
<view class="detail-content-item">
|
||||||
|
<view class="goods-details" v-if="goodsSkuDetail.goods_content">
|
||||||
|
<!-- <rich-text :nodes="goodsSkuDetail.goods_content" @click="showImg($event)" :data-nodes="goodsSkuDetail.goods_content"></rich-text> -->
|
||||||
|
<!-- {{goodsSkuDetail.goods_content}} -->
|
||||||
|
<mp-html :content="goodsSkuDetail.goods_content" />
|
||||||
|
<!-- :loading="loading" @preview="preview" @navigate="navigate" -->
|
||||||
|
</view>
|
||||||
|
<view class="goods-details active" v-else></view>
|
||||||
|
<view class="goods-details" v-if="service && service.is_display == 1 && service.content">
|
||||||
|
<rich-text :nodes="service.content" @click="showImg($event)" :data-nodes="service.content"></rich-text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品推荐 -->
|
||||||
|
<ns-goods-recommend ref="goodrecommend" route="goods_detail"></ns-goods-recommend>
|
||||||
|
|
||||||
|
<ns-copyright></ns-copyright>
|
||||||
|
|
||||||
|
<!-- 海报 -->
|
||||||
|
<view @touchmove.prevent.stop class="poster-layer">
|
||||||
|
<uni-popup ref="posterPopup" type="center">
|
||||||
|
<template v-if="poster != '-1'">
|
||||||
|
<view class="poster-wrap">
|
||||||
|
<view class="image-wrap">
|
||||||
|
<image :src="$util.img(poster)" :show-menu-by-longpress="true" mode="widthFix" />
|
||||||
|
<view class="close iconfont icon-close" @click="closePosterPopup()"></view>
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef MP || APP-PLUS -->
|
||||||
|
<view class="save-btn" @click="saveGoodsPoster()">保存图片</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<view class="save-btn">长按图片进行保存</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 分享弹窗 -->
|
||||||
|
<view @touchmove.prevent.stop>
|
||||||
|
<uni-popup ref="sharePopup" type="bottom" class="share-popup">
|
||||||
|
<view>
|
||||||
|
<view class="share-title">分享</view>
|
||||||
|
<view class="share-content">
|
||||||
|
<!-- #ifdef MP -->
|
||||||
|
<view class="share-box">
|
||||||
|
<button class="share-btn" :plain="true" open-type="share">
|
||||||
|
<view class="iconfont icon-share-friend"></view>
|
||||||
|
<text>分享给好友</text>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
|
<view class="share-box" v-if="goodsCircle">
|
||||||
|
<button class="share-btn" :plain="true" @click="openBusinessView">
|
||||||
|
<view class="iconfont icon-haowuquan"></view>
|
||||||
|
<text>分享到好物圈</text>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<view class="share-box" @click="openPosterPopup">
|
||||||
|
<button class="share-btn" :plain="true">
|
||||||
|
<view class="iconfont icon-pengyouquan"></view>
|
||||||
|
<text>生成分享海报</text>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<view class="share-box" @click="copyUrl">
|
||||||
|
<button class="share-btn" :plain="true">
|
||||||
|
<view class="iconfont icon-fuzhilianjie"></view>
|
||||||
|
<text>复制链接</text>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<slot name="fixedbtn"></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作区域 -->
|
||||||
|
<slot name="action"></slot>
|
||||||
|
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
|
||||||
|
<ns-login ref="login"></ns-login>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 商品详情视图
|
||||||
|
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||||
|
import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
|
||||||
|
import pengpaiFadeinOut from '@/components/pengpai-fadein-out/pengpai-fadein-out.vue';
|
||||||
|
import xiaoStarComponent from '@/components/xiao-star-component/xiao-star-component.vue';
|
||||||
|
import scroll from '@/common/js/scroll-view.js';
|
||||||
|
import toTop from '@/components/toTop/toTop.vue';
|
||||||
|
import detail from './detail.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'goods-detail-view',
|
||||||
|
props: {
|
||||||
|
goodsSkuDetail: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
uniPopup,
|
||||||
|
nsGoodsRecommend,
|
||||||
|
pengpaiFadeinOut,
|
||||||
|
toTop,
|
||||||
|
xiaoStarComponent
|
||||||
|
},
|
||||||
|
mixins: [scroll, detail]
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '@/common/css/goods_detail.scss';
|
||||||
|
</style>
|
||||||
|
<style scoped></style>
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
<template>
|
||||||
|
<view class="action-buttom-wrap disabled" v-if="disabled" @click="clickEvent">{{ disabledText }}</view>
|
||||||
|
<view class="action-buttom-wrap"
|
||||||
|
:class="[backgroundClass, textPrice ? 'has-second' : '', background ? 'color-join-cart' : 'color-base-bg']"
|
||||||
|
:style="{background:backgroundColor+'!important', 'color':textColor ? textColor : '#ffffff'}" v-else
|
||||||
|
@click="clickEvent">
|
||||||
|
<text class="price-font">{{ textPrice }}</text>
|
||||||
|
<text>{{ text }}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ns-goods-action-button',
|
||||||
|
props: {
|
||||||
|
// 商品底部按钮文字
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 商品底部按钮价格文字
|
||||||
|
textPrice: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 背景色
|
||||||
|
background: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 背景色样式
|
||||||
|
backgroundClass: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
//
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 是否禁用
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 禁用文字提示
|
||||||
|
disabledText: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 文字颜色
|
||||||
|
textColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
clickEvent() {
|
||||||
|
this.$emit('click');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.action-buttom-wrap {
|
||||||
|
flex: 1;
|
||||||
|
height: 70rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttom-wrap.has-second {
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttom-wrap.has-second text {
|
||||||
|
display: block;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttom-wrap:active {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttom-wrap.disabled {
|
||||||
|
background: $color-disabled;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,146 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<block v-if="text == '客服' || text == 'Contact'">
|
||||||
|
<!-- <ns-contact :niushop="chatParam" :send-message-title="sendData.title" :send-message-path="sendData.path" :send-message-img="sendData.img"> -->
|
||||||
|
<button hoverClass="none" openType="contact" sessionFrom="weapp" showMessageCard="true" class="action-icon-wrap" style="background: transparent;padding: 0;margin: 0;">
|
||||||
|
<view class="iconfont color-title" :class="icon"></view>
|
||||||
|
<text>{{ text }}</text>
|
||||||
|
<view class="corner-mark color-base-bg" v-if="cornerMark.length" :style="{ background: cornerMarkBg+'!important', color: cornerMarkColor }">{{ cornerMark }}</view>
|
||||||
|
</button>
|
||||||
|
<!-- </ns-contact> -->
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="action-icon-wrap" @click="clickEvent">
|
||||||
|
<view class="iconfont " :class="icon"></view>
|
||||||
|
<text>{{ text }}</text>
|
||||||
|
<view class="corner-mark color-base-bg" :class="{'max' : parseInt(cornerMark)>99}" v-if="cornerMark.length" :style="{ background: cornerMarkBg+'!important', color: cornerMarkColor }">{{ cornerMark > 99 ? '99+' : cornerMark }}</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import nsContact from '@/components/ns-contact/ns-contact.vue';
|
||||||
|
export default {
|
||||||
|
name: 'ns-goods-action-icon',
|
||||||
|
props: {
|
||||||
|
// 商品底部icon导航icon图标
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 商品底部icon导航文字
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 角标文字
|
||||||
|
cornerMark: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 角标背景色
|
||||||
|
cornerMarkBg: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 角标文字颜色
|
||||||
|
cornerMarkColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#fff'
|
||||||
|
},
|
||||||
|
// 开放能力
|
||||||
|
openType: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 发送内容 openType="contact"时有效
|
||||||
|
sendData: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return {
|
||||||
|
title: '',
|
||||||
|
path: '',
|
||||||
|
img: ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chatParam: {
|
||||||
|
type: Object,
|
||||||
|
default: function(){
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components:{
|
||||||
|
nsContact
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clickEvent() {
|
||||||
|
this.$emit('click');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.action-icon-wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100rpx;
|
||||||
|
min-width: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
.action-icon-wrap button {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
border: none;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background: none;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon-wrap button::after {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon-wrap .iconfont {
|
||||||
|
margin: 0 auto 10rpx;
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon-wrap .corner-mark {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
font-size: $font-size-activity-tag;
|
||||||
|
top: 4rpx;
|
||||||
|
right: 12rpx;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
padding: 6rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
&.max{
|
||||||
|
right:-4rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon-wrap text {
|
||||||
|
font-size: $font-size-tag;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
33
pages_goods/components/ns-goods-action/ns-goods-action.vue
Normal file
33
pages_goods/components/ns-goods-action/ns-goods-action.vue
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<template>
|
||||||
|
<view class="ns-goods-action bottom-safe-area" :class="{ 'bottom-safe-area': safeArea }"><slot></slot></view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ns-goods-action',
|
||||||
|
props: {
|
||||||
|
safeArea: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.ns-goods-action {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
.ns-goods-action.bottom-safe-area {
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
125
pages_goods/components/ns-goods-promotion/ns-goods-promotion.vue
Normal file
125
pages_goods/components/ns-goods-promotion/ns-goods-promotion.vue
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 当前商品参与的营销活动入口 -->
|
||||||
|
<view class="ns-goods-promotion" v-if="goodsPromotion.length">
|
||||||
|
<view v-for="(item, index) in goodsPromotion" v-if="promotion != item.promotion_type" :key="index">
|
||||||
|
<view v-if="item.promotion_type == 'discount'" class="item" @click="redirectTo('/pages_goods/detail', { goods_id: item.goods_id })">
|
||||||
|
<text class="promotion-mark ">限时折扣</text>
|
||||||
|
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||||
|
<text class="iconfont icon-right"></text>
|
||||||
|
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||||
|
</view>
|
||||||
|
<view v-else-if="item.promotion_type == 'groupbuy'" class="item" @click="redirectTo('/pages_promotion/groupbuy/detail', { groupbuy_id: item.groupbuy_id })">
|
||||||
|
<!-- <view v-else-if="item.promotion_type == 'groupbuy'" class="item" @click="redirectTo('/pages_promotion/groupbuy/detail', { id: item.groupbuy_id })"> -->
|
||||||
|
<text class="promotion-mark ">团购</text>
|
||||||
|
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||||
|
<text class="iconfont icon-right"></text>
|
||||||
|
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||||
|
</view>
|
||||||
|
<view v-else-if="item.promotion_type == 'pintuan'" class="item" @click="redirectTo('/pages_promotion/pintuan/detail', { pintuan_id: item.pintuan_id })">
|
||||||
|
<text class="promotion-mark ">拼团</text>
|
||||||
|
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||||
|
<text class="iconfont icon-right"></text>
|
||||||
|
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||||
|
</view>
|
||||||
|
<view v-else-if="item.promotion_type == 'seckill'" class="item" @click="redirectTo('/pages_promotion/seckill/detail', { seckill_id: item.id })">
|
||||||
|
<text class="promotion-mark ">秒杀</text>
|
||||||
|
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||||
|
<text class="iconfont icon-right"></text>
|
||||||
|
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||||
|
</view>
|
||||||
|
<view v-else-if="item.promotion_type == 'topic'" class="item" @click="redirectTo('/pages_promotion/topics/goods_detail', { id: item.id })">
|
||||||
|
<text class="promotion-mark ">专题活动</text>
|
||||||
|
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||||
|
<text class="iconfont icon-right"></text>
|
||||||
|
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||||
|
</view>
|
||||||
|
<view v-else-if="item.promotion_type == 'bargain'" class="item" @click="redirectTo('/pages_promotion/bargain/detail', { b_id: item.bargain_id })">
|
||||||
|
<text class="promotion-mark ">砍价</text>
|
||||||
|
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||||
|
<text class="iconfont icon-right"></text>
|
||||||
|
<!-- <view class="img-wrap"><image :src="$util.img('public/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
|
||||||
|
</view>
|
||||||
|
<view v-else-if="item.promotion_type == 'pinfan'" class="item" @click="redirectTo('/pages_promotion/pinfan/detail', { pinfan_id: item.pintuan_id })">
|
||||||
|
<text class="promotion-mark ">拼团返利</text>
|
||||||
|
<text class="title">当前商品正在参加{{ item.promotion_name }}</text>
|
||||||
|
<text class="iconfont icon-right"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ns-goods-promotion',
|
||||||
|
props: {
|
||||||
|
promotion: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
goodsPromotion: {
|
||||||
|
type: Array
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
refresh(goodsPromotion) {
|
||||||
|
this.goodsPromotion = goodsPromotion;
|
||||||
|
},
|
||||||
|
redirectTo(path, param) {
|
||||||
|
this.$util.redirectTo(path, param);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.ns-goods-promotion {
|
||||||
|
background-color: #fff;
|
||||||
|
& > view {
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 2rpx solid $color-line;
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.promotion-mark {
|
||||||
|
padding: 12rpx 14rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--main-color);
|
||||||
|
border-radius: 6rpx;
|
||||||
|
font-size: $font-size-tag;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: var(--main-color-shallow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
flex: 1;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
color: $color-tip;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-wrap {
|
||||||
|
width: 38rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -522,18 +522,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import nsGoodsAction from '@/components/ns-goods-action/ns-goods-action.vue';
|
import nsGoodsAction from '@/pages_goods/components/ns-goods-action/ns-goods-action.vue';
|
||||||
import nsGoodsActionIcon from '@/components/ns-goods-action-icon/ns-goods-action-icon.vue';
|
import nsGoodsActionIcon from '@/pages_goods/components/ns-goods-action-icon/ns-goods-action-icon.vue';
|
||||||
import nsGoodsActionButton from '@/components/ns-goods-action-button/ns-goods-action-button.vue';
|
import nsGoodsActionButton from '@/pages_goods/components/ns-goods-action-button/ns-goods-action-button.vue';
|
||||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||||
import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
|
import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
|
||||||
import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
|
import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
|
||||||
import detail from './public/js/detail.js';
|
import detail from './public/js/detail.js';
|
||||||
import scroll from '@/common/js/scroll-view.js';
|
import scroll from '@/common/js/scroll-view.js';
|
||||||
import toTop from '@/components/toTop/toTop.vue';
|
import toTop from '@/components/toTop/toTop.vue';
|
||||||
import nsGoodsPromotion from '@/components/ns-goods-promotion/ns-goods-promotion.vue';
|
import nsGoodsPromotion from '@/pages_goods/components/ns-goods-promotion/ns-goods-promotion.vue';
|
||||||
import goodsDetailBase from '@/common/js/goods_detail_base.js';
|
import goodsDetailBase from '@/common/js/goods_detail_base.js';
|
||||||
import goodsDetailView from '@/components/goods-detail-view/goods-detail-view.vue';
|
import goodsDetailView from '@/pages_goods/components/goods-detail-view/goods-detail-view.vue';
|
||||||
// 按需引入全局组件
|
// 按需引入全局组件
|
||||||
import nsLogin from '@/components/ns-login/ns-login.vue';
|
import nsLogin from '@/components/ns-login/ns-login.vue';
|
||||||
import loadingCover from '@/components/loading-cover/loading-cover.vue';
|
import loadingCover from '@/components/loading-cover/loading-cover.vue';
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import nsAdv from '@/components/ns-adv/ns-adv.vue';
|
import nsAdv from '@/pages_tool/components/ns-adv/ns-adv.vue';
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
120
pages_tool/components/ns-adv/ns-adv.vue
Normal file
120
pages_tool/components/ns-adv/ns-adv.vue
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="advList.length" :class="['container-box',className]">
|
||||||
|
<swiper :indicator-dots="advList.length > 1" indicator-active-color="#ffffff" :autoplay="true" :interval="3000" :duration="1000" v-if="advList.length > 1" @change="changeSwiper" :current="currentIndex" :style="{ height: swiperHeight + 'px' }" class="item-wrap">
|
||||||
|
<swiper-item v-for="(item, index) in advList" :key="index" @click="jumppage(item.adv_url)">
|
||||||
|
<view class="image-box">
|
||||||
|
<image :src="$util.img(item.adv_image)" mode="widthFix" :id="'content-wrap' + index"/>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<view v-else class="container-box item-wrap">
|
||||||
|
<image :src="$util.img(advList[0]['adv_image'])" mode="widthFix" lazy-load="true" @load="imageLoad" @click="jumppage(advList[0].adv_url)"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ns-advert',
|
||||||
|
props: {
|
||||||
|
keyword: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
className: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
advList: [],
|
||||||
|
isImage: false,
|
||||||
|
//滑块的高度(单位px)
|
||||||
|
swiperHeight: 150,
|
||||||
|
//当前索引
|
||||||
|
currentIndex: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getAdvList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//获取广告位
|
||||||
|
getAdvList() {
|
||||||
|
var item = {
|
||||||
|
adv_image: '',
|
||||||
|
adv_url: ''
|
||||||
|
};
|
||||||
|
this.$api.sendRequest({
|
||||||
|
url: '/api/adv/detail',
|
||||||
|
data: {
|
||||||
|
keyword: this.keyword
|
||||||
|
},
|
||||||
|
success: res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
var data = res.data.adv_list;
|
||||||
|
for (var index in data) {
|
||||||
|
if (data[index].adv_url) data[index].adv_url = JSON.parse(data[index].adv_url);
|
||||||
|
}
|
||||||
|
this.advList = res.data.adv_list;
|
||||||
|
|
||||||
|
//动态设置swiper的高度
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setSwiperHeight();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
jumppage(e) {
|
||||||
|
this.$util.diyRedirectTo(e);
|
||||||
|
},
|
||||||
|
imageLoad(data) {
|
||||||
|
this.isImage = true;
|
||||||
|
},
|
||||||
|
//手动切换题目
|
||||||
|
changeSwiper(e) {
|
||||||
|
this.currentIndex = e.detail.current;
|
||||||
|
//动态设置swiper的高度，使用nextTick延时设置
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setSwiperHeight();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//动态设置swiper的高度
|
||||||
|
setSwiperHeight() {
|
||||||
|
if (this.advList.length > 1) {
|
||||||
|
setTimeout(() => {
|
||||||
|
let element = "#content-wrap" + this.currentIndex;
|
||||||
|
let query = uni.createSelectorQuery().in(this);
|
||||||
|
query.select(element).boundingClientRect();
|
||||||
|
query.exec((res) => {
|
||||||
|
if (res && res[0]) {
|
||||||
|
this.swiperHeight = res[0].height;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.container-box {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.item-wrap {
|
||||||
|
border-radius: 10rpx;
|
||||||
|
|
||||||
|
.image-box {
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -68,7 +68,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
nsAdv: () => import('@/components/ns-adv/ns-adv.vue'),
|
nsAdv: () => import('@/pages_tool/components/ns-adv/ns-adv.vue'),
|
||||||
nsEmpty: () => import('@/components/ns-empty/ns-empty.vue'),
|
nsEmpty: () => import('@/components/ns-empty/ns-empty.vue'),
|
||||||
loadingCover: () => import('@/components/loading-cover/loading-cover.vue')
|
loadingCover: () => import('@/components/loading-cover/loading-cover.vue')
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import uniGrid from '@/components/uni-grid/uni-grid.vue';
|
import uniGrid from '@/components/uni-grid/uni-grid.vue';
|
||||||
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
|
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
|
||||||
import nsAdv from '@/components/ns-adv/ns-adv.vue';
|
import nsAdv from '@/pages_tool/components/ns-adv/ns-adv.vue';
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
uniGrid,
|
uniGrid,
|
||||||
|
|||||||
Reference in New Issue
Block a user