mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
654 lines
20 KiB
Vue
654 lines
20 KiB
Vue
<template>
|
||
<div>
|
||
<div class="user">
|
||
<Myheader></Myheader>
|
||
<!-- <unlogin></unlogin> -->
|
||
<!-- <tabs></tabs> -->
|
||
<div class="online" id="fixed-catbar-seperator"></div>
|
||
<div class="rc-top"></div>
|
||
<div
|
||
class="
|
||
rc-usermain
|
||
ts-product-detail
|
||
rc-max-width--xl
|
||
rc-layout-container rc-two-column rc-border-bottom
|
||
rc-border-colour--brand4
|
||
"
|
||
>
|
||
<!--
|
||
<magnifier v-bind:parentmsg="msg" ></magnifier>
|
||
-->
|
||
<div class="rc-column">
|
||
<div data-js-carousel="" data-image-gallery="true">
|
||
<div
|
||
class="rc-carousel rc-carousel__gallery-image"
|
||
data-zoom-container="328b2e5f-6904-4cac-9709-51ed18d2500f"
|
||
data-zoom-factor="2"
|
||
>
|
||
<!-- Big images-->
|
||
|
||
<div v-for="(item, index) in productAttachmentList" :key="index">
|
||
<div>
|
||
<img
|
||
:src="item.attachmentPath + '?w=420&fm=jpg&auto=compress'"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- <div>
|
||
<div>
|
||
<img
|
||
src="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=420&fm=jpg&auto=compress"
|
||
alt="Product alt text"
|
||
/>
|
||
</div>
|
||
</div> -->
|
||
<!-- Big images end-->
|
||
|
||
</div>
|
||
<div class="rc-carousel__gallery-thumbnails-wrapper">
|
||
<div class="rc-carousel rc-carousel__gallery-thumbnails">
|
||
<!-- Thunb images-->
|
||
<div
|
||
class="
|
||
rc-carousel__gallery-thumbnail
|
||
tns-item tns-slide-active
|
||
"
|
||
v-for="(item, index) in productAttachmentList"
|
||
:key="index"
|
||
>
|
||
<div class="rc-img--square">
|
||
<img :src="item.attachmentPath" alt="" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Thunb images end-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="ts-product-header rc-column"
|
||
id="328b2e5f-6904-4cac-9709-51ed18d2500f"
|
||
>
|
||
<div class="usermain" v-for="(item, index) in newlist" :key="index">
|
||
<div class="online bold rc-md-down"></div>
|
||
<div class="rc-main">
|
||
<div class="rc-title">
|
||
<h2>{{ item.productName }}</h2>
|
||
</div>
|
||
</div>
|
||
<div class="online rc-md-down"></div>
|
||
<div class="rc-main">
|
||
<div class="productdetails">
|
||
<div class="rc-productdetail">
|
||
<i class="ts-row-title">商品价格：</i>
|
||
<span class="ts-realprice">￥{{ item.rsp }}</span>
|
||
<span class="ts-remove ts-ecprice"
|
||
>￥{{ item.ecPrice }}
|
||
</span>
|
||
</div>
|
||
<div class="rc-productdetai">
|
||
<div>
|
||
<i class="ts-row-title">活动促销：</i>
|
||
<span>全场商品限时优惠</span>
|
||
</div>
|
||
<em class="ts-right-arr" @click="userget()">立即领取</em>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="online bold rc-md-down"></div>
|
||
<div class="rc-main rc-md-up">
|
||
<div class="online"></div>
|
||
</div>
|
||
|
||
<div class="rc-productdeta" v-if="userbuy">
|
||
<div class="rc-main">
|
||
<div class="rc-prodtop">
|
||
<div>
|
||
<i class="ts-row-title">商品规格：</i>
|
||
</div>
|
||
<!-- <em v-for="(item, index) in stype" :key="index" @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
|
||
{{ item.title }}
|
||
</em> -->
|
||
|
||
<em class="active">
|
||
{{ item.specifications }}
|
||
</em>
|
||
</div>
|
||
</div>
|
||
<div class="rc-main">
|
||
<div class="rc-produnnum">
|
||
<div><i class="ts-row-title">商品数量：</i></div>
|
||
<img
|
||
src="../../assets/image/userjian.png"
|
||
alt=""
|
||
@click="sub()"
|
||
/>
|
||
<strong>{{ sales_num }}</strong>
|
||
<img
|
||
src="../../assets/image/userjia.png"
|
||
alt=""
|
||
@click="plus()"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="rc-main rc-md-up">
|
||
<div class="online"></div>
|
||
</div>
|
||
<div class="online rc-md-down"></div>
|
||
<div class="rc-main">
|
||
<div class="rc-button" v-if="userbuy">
|
||
<span @click="usertanchu(item, 0)">加入购物车</span>
|
||
<span @click="usertanchu(item, 1)">立即购买</span>
|
||
</div>
|
||
<div class="certification">
|
||
<ul>
|
||
<li>
|
||
<span
|
||
><i class="ts-row-title">服务说明：</i
|
||
><i
|
||
>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i
|
||
></span
|
||
>
|
||
</li>
|
||
<li>
|
||
<span
|
||
><i class="ts-row-title">商品运费：</i
|
||
><i>全场包邮(港澳除外)</i></span
|
||
>
|
||
</li>
|
||
|
||
<li>
|
||
<span
|
||
><i class="ts-row-title">商品编号：</i
|
||
><i>{{ item.brandCode }}</i></span
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="online bold rc-md-down"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="rc-footimage rc-main">
|
||
<!-- <img :src="item.showImgFile" alt="" /> -->
|
||
</div>
|
||
<div class="rc-fixright">
|
||
<ul>
|
||
<li
|
||
v-for="(userfixed, index) in fixedlist"
|
||
:key="index"
|
||
@click="lianxi(userfixed, index)"
|
||
>
|
||
<img :src="userfixed.catimage" alt="" />
|
||
<span> {{ userfixed.title }}</span>
|
||
</li>
|
||
</ul>
|
||
<div class="tuntop" @click="toTop" v-show="gotop">
|
||
<img src="../../assets/image/turntop.png" alt="" />
|
||
<span>回到顶部</span>
|
||
</div>
|
||
</div>
|
||
<Myfooter v-on:litentop="showmesg"></Myfooter>
|
||
</div>
|
||
<el-dialog :visible.sync="dialogInfo1" @close="userclose">
|
||
<div class="rs-dis">
|
||
<div
|
||
class="rc-discount"
|
||
v-for="(item, index) in usernewlist"
|
||
:key="index"
|
||
>
|
||
<img :src="userimage" alt="" />
|
||
<div class="rc-contair">
|
||
<div class="rc-left">
|
||
<div><i>￥</i><span v-text="item.price"></span></div>
|
||
<p v-text="item.pricestype"></p>
|
||
</div>
|
||
<div class="rc-right">
|
||
<i>
|
||
{{ item.special }}
|
||
</i>
|
||
<div >
|
||
<span>有效期</span>
|
||
<em>{{ item.starttime }}</em>
|
||
</div>
|
||
<div class="rc-footer">
|
||
<span @click="usergetconf(item)">立即领取</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog :visible.sync="dialogInfo2" @close="userclose">
|
||
<div class="rc-headera">
|
||
<div class="rc-title">
|
||
<img src="../../assets/error.png" alt="" />
|
||
</div>
|
||
<div class="rc-logmain">
|
||
<h3>温馨提示</h3>
|
||
<span>请先点击下方进行登录/注册</span>
|
||
</div>
|
||
<nuxt-link :to="`/userlogin/login/`">
|
||
<div class="userer">
|
||
<span>立即登录</span>
|
||
</div>
|
||
</nuxt-link>
|
||
</div>
|
||
</el-dialog>
|
||
<div class="rc-button rc-md-down">
|
||
<span @click="usertanchu(item, 0)">加入购物车</span>
|
||
<span @click="usertanchu(item, 1)">立即购买</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Myheader from "~/components/header.vue";
|
||
import tabs from "@/components/tabs.vue";
|
||
import unlogin from "~/components/unlogin.vue";
|
||
import { mapMutations } from "vuex";
|
||
import Myfooter from "~/components/rc-footer.vue";
|
||
import {
|
||
goodsmessage,
|
||
getConfig,
|
||
postCourseId,
|
||
getdraw,
|
||
alldiscount,
|
||
} from "../../ajax/getData";
|
||
const settings = require("@/config");
|
||
export default {
|
||
// middleware: 'metaTitle',
|
||
// // middleware: 'metaTitle',
|
||
// meta: {title: '产品详情'},
|
||
data() {
|
||
return {
|
||
tableLabelTest: [],
|
||
userimage: require("../../assets/image/unused.png"),
|
||
activeIndexa: 0,
|
||
gotop: false,
|
||
dialogInfo1: false,
|
||
name: [],
|
||
userlist: [],
|
||
drawlist: [], //用户可以领取的优惠券
|
||
alldraw: [],
|
||
userlistmenu: [],
|
||
msg: ["11111111"],
|
||
parent_msg: ["111"],
|
||
usermessage: [],
|
||
dialogInfo2: false,
|
||
productCode: "", //商品code
|
||
productlist: [],
|
||
userbuy: true,
|
||
sales_num: 1,
|
||
usernewlist: [
|
||
{
|
||
price: "30",
|
||
pricestype: "新客优惠券",
|
||
special: "全场每满299-30",
|
||
period: "有效期",
|
||
starttime: "2021.11.29-2022.01.28",
|
||
catimage: require("../../assets/image/unused.png"),
|
||
},
|
||
{
|
||
price: "30",
|
||
pricestype: "新客优惠券",
|
||
special: "全场每满299-30",
|
||
period: "有效期",
|
||
starttime: "2021.11.29-2022.01.28",
|
||
catimage: require("../../assets/image/unused.png"),
|
||
},
|
||
],
|
||
fixedlist: [
|
||
{
|
||
title: "购物车",
|
||
catimage: require("../../assets/buy.png"),
|
||
},
|
||
{
|
||
title: "在线客服",
|
||
catimage: require("../../assets/service.png"),
|
||
},
|
||
{
|
||
title: "营养专家",
|
||
catimage: require("../../assets/consult.png"),
|
||
},
|
||
],
|
||
productAttachmentList: [
|
||
{
|
||
id: 15901,
|
||
attachmentType: 1,
|
||
attachmentPath:
|
||
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384849415_BLUWOs.jpg",
|
||
sort: 1,
|
||
},
|
||
{
|
||
id: 15902,
|
||
attachmentType: 1,
|
||
attachmentPath:
|
||
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384851821_jFleXA.jpg",
|
||
sort: 2,
|
||
},
|
||
{
|
||
id: 15903,
|
||
attachmentType: 1,
|
||
attachmentPath:
|
||
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384853824_GrxAIp.jpg",
|
||
sort: 3,
|
||
},
|
||
{
|
||
id: 15904,
|
||
attachmentType: 1,
|
||
attachmentPath:
|
||
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384856077_9FbE1z.jpg",
|
||
sort: 4,
|
||
},
|
||
{
|
||
id: 15905,
|
||
attachmentType: 1,
|
||
attachmentPath:
|
||
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384859055_iPkFXi.jpg",
|
||
sort: 5,
|
||
},
|
||
],
|
||
newlist: [
|
||
{
|
||
price: "167.00",
|
||
pricestype: "英国短毛猫成猫全价湿粮",
|
||
special: "限时折扣全场商品8折",
|
||
period: "今晚20:00前付款，明日12:00前发货",
|
||
starttime: "商品未满199元 快递费:9.00元",
|
||
shangbianhao: "6212263798102432",
|
||
catimage: require("../../assets/image/rc-new.png"),
|
||
},
|
||
],
|
||
stype: [
|
||
{
|
||
title: "3kg",
|
||
},
|
||
{
|
||
title: "5kg",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
|
||
components: {
|
||
Myheader,
|
||
|
||
tabs,
|
||
magnifier,
|
||
unlogin,
|
||
Myfooter,
|
||
|
||
},
|
||
mounted() {
|
||
// window.addEventListener("scroll", this.handleScroll, true);
|
||
if (this.usermessage !== "" || this.usermessage.data !== undefined) {
|
||
this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
|
||
let stype = this.$route.query.stype;
|
||
this.productCode = this.$route.query.productCode;
|
||
console.log(this.productCode);
|
||
this.userquery(this.productCode);
|
||
console.log(this.userlistmenu);
|
||
this.$nextTick(() => {});
|
||
if (stype == 1) {
|
||
this.userbuy = true;
|
||
} else if (stype == 2) {
|
||
console.log("这是要消失的");
|
||
this.$nextTick(() => {
|
||
this.userbuy = false;
|
||
});
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
...mapMutations(["changemessage"]),
|
||
handleScroll(e) {
|
||
let fixedCatbarSeperator = document.querySelector(
|
||
"#fixed-catbar-seperator"
|
||
);
|
||
let scrolltop =
|
||
document.documentElement.scrollTop || document.body.scrollTop;
|
||
if (fixedCatbarSeperator !== "null") {
|
||
if (scrolltop - fixedCatbarSeperator.offsetTop) {
|
||
this.gotop = true;
|
||
} else {
|
||
this.gotop = false;
|
||
}
|
||
}
|
||
},
|
||
lianxi(item, index) {
|
||
console.log(item, index);
|
||
if (item.title == "在线客服") {
|
||
var option = {
|
||
customer: {
|
||
id: "",
|
||
name: "",
|
||
email: "",
|
||
mobile: "",
|
||
memberId: "999999",
|
||
},
|
||
};
|
||
dis_livchat(option);
|
||
}
|
||
if (item.title == "购物车") {
|
||
console.log("---12314");
|
||
this.$router.push({
|
||
path: "../../myorder/userrecord",
|
||
});
|
||
}
|
||
if (item.title == "营养专家") {
|
||
var option = {
|
||
customer: {
|
||
id: "",
|
||
name: "",
|
||
email: "",
|
||
mobile: "",
|
||
memberId: "999999",
|
||
},
|
||
};
|
||
dis_livchat(option);
|
||
}
|
||
},
|
||
toTop() {
|
||
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
||
// 实现滚动效果
|
||
const timeTop = setInterval(() => {
|
||
document.body.scrollTop =
|
||
document.documentElement.scrollTop =
|
||
top -=
|
||
400;
|
||
if (top <= 0) {
|
||
clearInterval(timeTop);
|
||
}
|
||
}, 10);
|
||
},
|
||
showmesg() {
|
||
console.log("-----");
|
||
this.toTop();
|
||
},
|
||
toTop() {
|
||
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
||
// 实现滚动效果
|
||
const timeTop = setInterval(() => {
|
||
document.body.scrollTop =
|
||
document.documentElement.scrollTop =
|
||
top -=
|
||
400;
|
||
if (top <= 0) {
|
||
clearInterval(timeTop);
|
||
}
|
||
}, 10);
|
||
},
|
||
|
||
//领取优惠券
|
||
usergetconf(item) {
|
||
console.log(item);
|
||
if (this.usermessage.data !== "" || this.usermessage.data !== undefined) {
|
||
this.getconf(this.usermessage.data.id, item.couponId);
|
||
}
|
||
},
|
||
|
||
//获取用户领取的优惠券
|
||
async getconf(memberId, couponId) {
|
||
let data = await getConfig(memberId, couponId);
|
||
if (data) {
|
||
this.$message({
|
||
type: "warning",
|
||
message: data.msg,
|
||
});
|
||
|
||
console.log(data);
|
||
}
|
||
},
|
||
|
||
// changeName(newName){
|
||
// this.name = newName;
|
||
// },
|
||
|
||
userclose() {
|
||
console.log("这是关闭的");
|
||
this.userlist = [];
|
||
},
|
||
async userquery() {
|
||
let data = await goodsmessage(this.productCode);
|
||
if (data) {
|
||
this.newlist = data.data;
|
||
}
|
||
this.productAttachmentList = this.newlist[0].productAttachmentList;
|
||
|
||
this.userlistmenu = this.newlist[0].productAttachmentList;
|
||
let changemess = JSON.stringify(this.userlistmenu);
|
||
// console.log(changemess);
|
||
// this.productAttachmentList = this.userlistmenu;
|
||
this.changemessage({ data: changemess });
|
||
this.parent_msg = this.userlistmenu;
|
||
// console.log(this.userlistmenu);
|
||
},
|
||
|
||
//获取用户领取的优惠券
|
||
async userdraw(mobile) {
|
||
let data = await getdraw(mobile);
|
||
if (data) {
|
||
this.drawlist = data.data;
|
||
}
|
||
},
|
||
|
||
//获取所有的优惠券
|
||
async alldrawlist(memberId) {
|
||
let data = await alldiscount(memberId);
|
||
let userlist = [];
|
||
let menulsit = [];
|
||
if (data) {
|
||
this.alldraw = data;
|
||
// console.log(this.alldraw.data);
|
||
let alllist = [];
|
||
this.userlist = this.alldraw.data;
|
||
this.userlist.forEach((element, index) => {
|
||
if (typeof element.productCodes == "string") {
|
||
userlist.push(element);
|
||
// let s=element.productCodes.split(',');
|
||
// console.log(s.indexOf(this.productCode) != -1 )
|
||
// console.log('这是字符串')
|
||
}
|
||
});
|
||
let menualist = [];
|
||
userlist.filter((item) => {
|
||
console.log(item);
|
||
item.productCodes = item.productCodes.split(",");
|
||
item.productCodes.forEach((element) => {
|
||
if (element == this.productCode && item.activityId !== 10) {
|
||
console.log(element);
|
||
console.log(this.productCode);
|
||
menualist.push(item);
|
||
|
||
console.log("----");
|
||
}
|
||
});
|
||
});
|
||
// this.usernewlist = menualist;
|
||
// console.log(this.usernewlist);
|
||
}
|
||
},
|
||
|
||
plus(num, index) {
|
||
this.sales_num = parseInt(this.sales_num) + 1;
|
||
console.log(this.sales_num);
|
||
},
|
||
// 数量减方法
|
||
sub(num, index) {
|
||
if (this.sales_num <= 1) {
|
||
this.sales_num = 1;
|
||
} else {
|
||
this.sales_num = parseInt(this.sales_num) - 1;
|
||
}
|
||
},
|
||
|
||
async courseId(item) {
|
||
console.log(item);
|
||
console.log(this.usermessage);
|
||
// let userid=JSON.parse(location.getItem('userInfo'));
|
||
// let mobile=JSON.parse(location.getItem('userInfo'));
|
||
// console.log(userid,mobile);
|
||
let data = await postCourseId(
|
||
this.productCode,
|
||
this.sales_num,
|
||
this.usermessage.data.id,
|
||
this.usermessage.data.mobile,
|
||
item.picFile,
|
||
item.productName,
|
||
item.basePrice,
|
||
item.specifications
|
||
);
|
||
if (data) {
|
||
this.productlist = data;
|
||
}
|
||
console.log(data);
|
||
},
|
||
usertanchu(item, orderm) {
|
||
let user = localStorage.getItem("userInfo");
|
||
if (user == undefined || user == null || user == "") {
|
||
this.dialogInfo2 = true;
|
||
return;
|
||
} else {
|
||
this.courseId(item);
|
||
if (orderm == 0) {
|
||
this.$message({
|
||
type: "warning",
|
||
message: "加入购物车成功",
|
||
});
|
||
}
|
||
if (orderm == 1) {
|
||
this.$router.push({
|
||
path: "/myorder/userrecord",
|
||
});
|
||
}
|
||
}
|
||
},
|
||
userget() {
|
||
let user = localStorage.getItem("userInfo");
|
||
if (user == undefined || user == null || user == "") {
|
||
this.dialogInfo2 = true;
|
||
return;
|
||
} else {
|
||
this.userdraw(this.usermessage.data.mobile);
|
||
this.alldrawlist(this.usermessage.data.id);
|
||
this.dialogInfo1 = true;
|
||
}
|
||
},
|
||
selectsearch(item, index) {
|
||
this.activeIndexa = index;
|
||
},
|
||
},
|
||
|
||
onceproduct() {},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@import url("../../assets/css/global.less");
|
||
@import url("../../assets/css/producted.less");
|
||
</style> |