You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
zhishifufei_php/application/wap/view/first/store/detail.html

540 lines
24 KiB

10 months ago
<!-- +---------------------------------------------------------------------- -->
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者,助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed 该系统并不是自由软件,未经许可不能去掉相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
<!-- +---------------------------------------------------------------------- -->
{extend name="public/container"}
{block name="title"}商品详情{/block}
{block name="head_top"}
<link rel="stylesheet" href="{__PLUG_PATH}vue-photo-preview/skin.css">
<script src="{__PLUG_PATH}vue-photo-preview/vue-photo-preview.js"></script>
<style>
body {
padding-bottom: 1rem;
padding-bottom: calc(1rem + constant(safe-area-inset-bottom));
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.layui-layer-imgsee {
display: none;
}
a[href^="tel"] {
color: #2C8EFF;
}
</style>
{/block}
{block name="content"}
<div v-cloak id="app" class="goods-detail">
<div class="first">
<div :style="{ height: width + 'px' }" class="swiper-container">
<div class="swiper-wrapper">
<div v-for="(item, index) in storeInfo.slider_image" :key="index" class="swiper-slide">
<img :src="item">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="detail">
<div class="price">
<div class="now"><span>{{ storeInfo.price }}</span></div>
<div class="vip">¥{{ storeInfo.vip_price }}</div>
</div>
<div class="title">{{ storeInfo.store_name }}</div>
<div class="other">
<div>库存:{{ storeInfo.stock }}件</div>
<div>销量:{{ storeInfo.sales }}件</div>
</div>
</div>
</div>
<!-- 相关讲师 -->
<related-lecturer v-if="lecturer" :lecturer="lecturer"></related-lecturer>
<div class="second">
<div class="tab">
<div :class="{ on: tabOn == 1 }" @click="tabOn = 1">详情</div>
<div :class="{ on: tabOn == 2 }" @click="tabOn = 2">评价({{ whole }})</div>
<div :class="{ on: tabOn == 3 }" @click="tabOn = 3">赠送课程({{ specialList.length }})</div>
</div>
<div class="content">
<div v-show="tabOn == 1" class="detail" v-html="storeInfo.description"></div>
<div v-show="tabOn == 2" class="evaluate-section">
<div class="head">
<div class="score">
<div>评分<span v-for="star in 5" :key="star" :class="{ on: star <= rate }" class="iconfont iconxing"></span></div>
<div>{{ positive_rate }}%<span>好评率</span></div>
</div>
<div class="cate">
<div :class="{ on: score === 4 }" @click="cateTab(4)">全部({{ whole }})</div>
<div :class="{ on: score === 3 }" @click="cateTab(3)">好评({{ praise }})</div>
<div :class="{ on: score === 2 }" @click="cateTab(2)">中评({{ review }})</div>
<div :class="{ on: score === 1 }" @click="cateTab(1)">差评({{ difference }})</div>
</div>
</div>
<!-- 评价列表 -->
<evaluate-list :evaluate-list="evaluateList"></evaluate-list>
<div v-if="loading" class="loading">
<i class="fa fa-spinner fa-spin"></i>
</div>
<div v-if="finished && evaluateList.length" class="finished">已全部加载完</div>
<div v-if="finished && !evaluateList.length" class="empty">
<img src="{__WAP_PATH}zsff/images/empty.png" alt="暂无评价">
<div>暂无评价</div>
</div>
</div>
<div v-show="tabOn == 3" class="special">
<a v-for="item in specialList" :key="item.id" :href="item.path">
<div class="image">
<img :src="item.image">
<div>{{ item.typeName }}</div>
</div>
<div class="text">
<div class="title">{{ item.title }}</div>
<div class="label">
<div v-for="label in item.label">{{ label }}</div>
</div>
<div class="price"><span>{{ item.money }}</span></div>
</div>
</a>
</div>
</div>
</div>
<div class="third">
<div class="group">
<button type="button" @click="goPage(1)">
<img src="{__WAP_PATH}zsff/images/special01.png">
<div>首页</div>
</button>
<button type="button" @click="goPage(2)">
<img src="{__WAP_PATH}zsff/images/special02.png">
<div>客服</div>
</button>
</div>
<button type="button" @click="buy">立即购买</button>
</div>
<div class="share" @click="createSharePoster">
<i class="iconfont iconfenxiang"></i>
</div>
<base-login :login-show="loginShow" :site-name="siteName" @login-close="logComplete"></base-login>
<rebate-guide v-if="rebateMoney && isShareDisplaySwitch" :rebate-money="rebateMoney" @rebate-action="rebateAction"></rebate-guide>
</div>
<script>
require([
'vue',
'store',
'helper',
'swiper',
'components/evaluate-list/index',
'components/base-login/index',
'components/rebate-guide/index',
'components/related-lecturer/index',
'qrcode',
'layer',
'{__WAP_PATH}zsff/js/quick.js'
], function (Vue, api, $h, Swiper, evaluateList, BaseLogin, RebateGuide, RelatedLecturer) {
var storeInfo = {$storeInfo};
var siteUrl = '{$site_url}';
var siteName = '{$Auth_site_name}';
var isWeChat = '{$isWechat}';
var uid = {$uid};
var options = {
captionEl: false,
fullscreenEl: false,
zoomEl: false,
arrowEl: false
};
Vue.use(vuePhotoPreview, options);
var app = new Vue({
el: '#app',
components: {
'evaluate-list': evaluateList,
'base-login': BaseLogin,
'rebate-guide': RebateGuide,
'related-lecturer': RelatedLecturer
},
data: {
storeInfo: storeInfo ? storeInfo : [],
width: window.innerWidth,
loginShow: false,
isWeChat: isWeChat,
url: isWeChat ? $h.U({c: 'index', a: 'login'}) : $h.U({c: 'login', a: 'phone_check'}),
tabOn: 1,
score: 4,
page: 1,
limit: 16,
loading: false,
finished: false,
evaluateList: [],
rate: 5,
positive_rate: '0',
whole: 0,
praise: 0,
review: 0,
difference: 0,
siteUrl: siteUrl,
siteName: siteName,
rebateMoney: 0,
page2: 1,
specialList: [],
lecturer: null,
isShareDisplaySwitch: {$is_share_display_switch} // 是否显示分享返佣
},
created: function () {
var vm = this;
if (isWeChat) {
mapleWx($jssdk(), function () {
this.onMenuShareAll({
title: vm.storeInfo.store_name,
desc: vm.storeInfo.store_info,
imgUrl: vm.storeInfo.image,
link: window.location.href + (window.location.search ? '&' : '?') + 'spread_uid=' + uid
});
});
}
window.addEventListener('resize', function () {
vm.width = this.innerWidth;
});
$h.EventUtil.listenTouchDirection(document, function () {
if (vm.tabOn === 2) {
vm.getEvaluateList();
}
});
},
mounted: function () {
var vm = this;
this.$nextTick(function () {
this.initSwiper();
this.getLecturer();
this.getEvaluateStatus();
this.getEvaluateList();
this.rebateAmount();
this.getAssociatedTopics();
});
},
updated: function () {
this.$nextTick(function () {
this.$previewRefresh();
});
},
methods: {
goPage: function (value) {
var vm = this;
switch (value) {
case 1:
window.location.assign("{:url('index/index')}");
break;
case 2:
api.baseGet("{:url('index/login_user')}", function () {
api.baseGet("{:url('PublicApi/get_site_service_phone')}?mer_id=" + storeInfo.mer_id, function (res) {
var data = res.data.data;
if (Array.isArray(data)) {
api.baseGet("{:url('PublicApi/public_data')}", function (res) {
var data = res.data.data;
if (data.customer_service === '3') {
if (data.site_service_phone) {
layer.confirm('拨打<a href="tel:' + data.site_service_phone + '">' + data.site_service_phone + '</a>进行咨询?', {
title: false,
closeBtn: false,
btn: ['拨打', '取消']
}, function (index) {
window.location.assign('tel:' + data.site_service_phone);
layer.close(index);
});
} else {
layer.msg('抱歉,无法联系客服');
}
} else {
window.location.assign("{:url('service/service_list')}?mer_id=" + storeInfo.mer_id);
}
});
} else {
layer.confirm('拨打<a href="tel:' + data.site_service_phone + '">' + data.site_service_phone + '</a>进行咨询?', {
title: false,
closeBtn: false,
btn: ['拨打', '取消']
}, function (index) {
window.location.assign('tel:' + data.site_service_phone);
layer.close(index);
});
}
});
}, function () {
if (isWechat) {
window.localStorage.setItem('login_back_url', window.location.href);
window.location.assign("{:url('login/index')}");
} else {
vm.loginShow = true;
}
}, true);
break;
}
},
initSwiper: function () {
new Swiper('.swiper-container', {
loop: true,
autoplay: true,
pagination: {
el: '.swiper-pagination'
},
observeParents: true
});
},
// 立即购买
buy: function () {
var vm = this;
api.baseGet("{:url('index/login_user')}", function () {
if (isWechat) {
api.baseGet("{:url('index/user_login')}", function () {
api.goBuy({
productId: vm.storeInfo.id,
cartNum: 1
}, function (cartId) {
window.location.assign("{:url('special/confirm_order')}?cartId=" + cartId);
});
}, function () {
vm.loginShow = true;
}, true);
} else {
api.goBuy({
productId: vm.storeInfo.id,
cartNum: 1
}, function (cartId) {
window.location.assign("{:url('special/confirm_order')}?cartId=" + cartId);
});
}
}, function () {
if (isWechat) {
window.localStorage.setItem('login_back_url', window.location.href);
window.location.assign("{:url('login/index')}");
} else {
vm.loginShow = true;
}
}, true);
},
enter: function () {
this.loginShow = true;
},
//关闭登录
loginClose: function (value) {
this.loginShow = false;
value && this.logComplete();
},
//登录完成回调事件
logComplete: function () {
this.loginShow = false;
},
//所有插件回调处理事件
changeVal: function (opt) {
if (typeof opt != 'object') opt = {};
var action = opt.action || '';
var value = opt.value || '';
this[action] && this[action](value);
},
// 获取评价列表
getEvaluateList: function () {
var vm = this;
if (this.finished) {
return false;
}
api.baseGet($h.U({
c: 'auth_api',
a: 'product_reply_list',
q: {
productId: this.storeInfo.id,
score: this.score,
page: this.page++,
limit: this.limit
}
}), function (res) {
var data = res.data.data;
vm.evaluateList = vm.evaluateList.concat(data);
vm.finished = vm.limit > data.length;
});
},
// 获取各状态评价数量
getEvaluateStatus: function () {
var vm = this;
api.baseGet($h.U({
c: 'auth_api',
a: 'product_reply_data',
q: {
productId: this.storeInfo.id
}
}), function (res) {
var data = res.data.data;
vm.rate = data.star;
vm.positive_rate = data.positive_rate;
vm.whole = data.whole;
vm.praise = data.praise;
vm.review = data.review;
vm.difference = data.difference;
})
},
// 评价列表状态切换
cateTab: function (score) {
if (this.score === score) {
return;
}
this.score = score;
this.evaluateList = [];
this.loading = false;
this.finished = false;
this.page = 1;
this.getEvaluateList();
},
// 生成分享海报
createSharePoster: function () {
var vm = this;
var imagePromise = new Promise(function (resolve, reject) {
var image = new Image();
image.crossOrigin = 'anonymous';
image.src = vm.storeInfo.image + '?' + new Date().getTime();
image.onload = function () {
resolve(image);
},
image.onerror = function () {
reject('error-image');
};
}),
qrcodePromise = new Promise(function (resolve, reject) {
resolve(new QRCode(document.createElement('canvas'), vm.siteUrl));
});
Promise.all([
imagePromise,
qrcodePromise
]).then(function (sources) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 820;
context.fillStyle = '#FFFFFF';
context.fillRect(0, 0, 600, 820);
context.drawImage(sources[0], 0, 0, 600, 600);
context.drawImage(sources[1]._el.firstElementChild, 108, 635, 150, 150);
context.font = '22px sans-serif';
context.fillStyle = '#999999';
context.textBaseline = 'top';
var text = '邀您加入' + siteName;
var list = [];
var start = 0;
for (var i = 0; i <= text.length; i++) {
if (context.measureText(text.slice(start, i)).width > 198) {
list.push(text.slice(start, i - 1));
start = i - 1;
}
}
if (start !== text.length) {
list.push(text.slice(start));
}
if (list.length > 3) {
list.length = 3;
for (var j = 0; j <= list[2].length; j++) {
if (context.measureText(list[2].slice(0, j) + '……').width > 198) {
list[2] = list[2].slice(0, j - 1) + '……';
break;
}
}
}
list.push('长按识别或扫码进入');
for (var k = 0; k < list.length; k++) {
context.fillText(list[k], 294, 635 + (150 / list.length) * k);
}
layer.photos({
photos: {
data: [
{
src: canvas.toDataURL('image/jpeg')
}
]
},
anim: 5
});
canvas = null;
}).catch(function (err) {
$h.pushMsg(err);
});
},
// 获取返佣金额
rebateAmount: function () {
var vm = this;
api.baseGet($h.U({
c: 'auth_api',
a: 'rebateAmount',
p: {
type: 2,
id: this.storeInfo.id
}
}), function (res) {
vm.rebateMoney = Number(res.data.data.brokeragePrice);
});
},
rebateAction: function (value) {
switch (value) {
case 'close':
this.rebateMoney = 0;
break;
case 'share':
this.createSharePoster();
break;
}
},
// 获取关联专题
getAssociatedTopics: function () {
var vm = this;
api.baseGet($h.U({
c: 'store',
a: 'getAssociatedTopics',
q: {
page: this.page2,
list: 100,
id: this.storeInfo.id
}
}), function (res) {
var data = res.data.data;
data.forEach(function (item) {
var path = "{:url('special/details')}";
var typeName = '图文';
if (item.is_light) {
path = "{:url('special/single_details')}";
}
if (item.type === 2 || item.light_type === 2) {
typeName = '音频';
} else if (item.type === 3 || item.light_type === 3) {
typeName = '视频';
} else if (item.type === 4) {
typeName = '直播';
} else if (item.type === 5) {
typeName = '专栏';
}
item.path = path + '?id=' + item.id;
item.typeName = typeName;
});
vm.specialList = data;
});
},
// 相关讲师
getLecturer: function () {
var vm = this;
api.baseGet($h.U({
c: 'auth_api',
a: 'getLecturer',
q: {
mer_id: this.storeInfo.mer_id
}
}), function (res) {
vm.lecturer = res.data.data;
});
}
}
});
});
</script>
{/block}