Rx goods supported / Product detail multi-specification added / "window" in fetch removed

This commit is contained in:
Vion 2022-01-22 19:20:04 +08:00
parent 79ff28e63d
commit c6267a73ee
10 changed files with 222 additions and 239 deletions

View File

@ -10,6 +10,29 @@
overflow-y: auto;
}
}
.ts-tag-list {
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
em {
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
padding:.43rem 1rem;
font-size: 16px;
margin-left: 4px;
margin-right: 12px;
border-radius: 3px;
margin-bottom:1rem;
}
.disabled {
background:#808285;
color:#F6F6F6;
cursor: not-allowed;;
}
}
.ts-product-detail{
i {
font-style: normal;
@ -83,7 +106,13 @@
}
}
}
.rc-footimage{
img{
margin-left:auto;
margin-right:auto;
max-width:100%;
}
}
// 手机端
@media screen and (max-width:768px) {
.ts-ecprice{
@ -248,18 +277,6 @@
cursor: pointer;
font-size: 16px;
}
.rc-footimage{
overflow: hidden;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
margin-top: 20px;
img{
width: 100%;
}
}
.ts-product-header {
width: 100%;
.rc-title {
@ -276,23 +293,14 @@
margin-top: 20px;
.rc-prodtop {
display: flex;
align-items: center;
align-items: flex-start;
span {
font-size: 14px;
color: #333333;
}
em {
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
width: 59px;
font-size: 16px;
margin-left: 4px;
margin-right: 12px;
height: 39px;
border-radius: 3px;
}
em {
padding: 5px;
}
}
}
.certification {
@ -342,6 +350,7 @@
margin: 0 auto;
width: 100%;
max-width: 1400px;
border-bottom-width: 4px;
.rc-main{
padding:0;
}
@ -529,20 +538,11 @@
margin-top: 16px;
.rc-prodtop {
display: flex;
align-items: center;
align-items: flex-start;
span {
font-size: 18px;
color: #333333;
}
em {
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
padding: 5px;
border-radius: 3px;
}
}
}
.rc-produnnum {
@ -578,16 +578,6 @@
}
}
}
.rc-footimage{
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
img{
width: 100%;
}
}
}
.rc-carousel__gallery-thumbnail{

View File

@ -104,7 +104,6 @@ ul li ol li em strong i {
}
}
strong{
font-size: 18px;
color: #333333;
display: block;
font-weight: bold;
@ -425,7 +424,6 @@ border-radius: 100px;
}
strong{
font-size: 26px;
color: #333333;
display: block;
}

View File

@ -358,8 +358,8 @@ export default {
created(){
},
mounted() {
//
let usernot=this.checkIsLogin();
this.checkIsLogin();
let usernot=this.$store.state.userInfo;
//console.log(usernot);
if(usernot){
this.loginornot=true
@ -367,26 +367,10 @@ export default {
this.loginornot=false
this.usermessage=usernot;
}
//debugger;
if(isInitialized)
location.reload();
if(!isInitialized)
isInitialized=true;
//console.log(this.loginornot);
/*
if(RCDL && RCDL.utilities && RCDL.navigation && RCDL.navigation.rebuild)
{
if (["sm", "xs", "md-1"].includes(RCDL.utilities.breakpoints.values.width.current)) {
this.refreshMobileNav();
}
else
{
this.refreshDesktopNav();
}
}
*/
},
methods: {

View File

@ -19,13 +19,15 @@ export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
}
}
if (window.fetch && method === 'fetch') {
if (fetch && method === 'fetch') {
let token='';
let tokenStr = localStorage.getItem("userInfo");
if(tokenStr){
tokenStr = JSON.parse(tokenStr);
if(tokenStr && tokenStr.xaccessToken)
token=tokenStr.xaccessToken;
if(process.client) {
let tokenStr = localStorage.getItem("userInfo");
if(tokenStr){
tokenStr = JSON.parse(tokenStr);
if(tokenStr && tokenStr.xaccessToken)
token=tokenStr.xaccessToken;
}
}
let requestConfig = {
method: type,

View File

@ -1521,18 +1521,26 @@
}
},
selectproduce(item,index){
if(item.productList[0]==undefined){
item.productlist[0].productCode=0;
}
if(item.productList[0]==undefined){
item.productlist[0]=[];
selectproduce(item){
let isRxGoods=false;
let productCode = [];
let mainProductCode = item.productCode;
if(!item.ecPrice && !item.price)
{
isRxGoods=1;
productCode = [item.productCode];
} else {
for(let i of item.productList) {
productCode.push(i.productCode);
}
}
this.$router.push({
path: "/productdetails/producted",
query: {
stype: 1,
productCode:item.productList[0].productCode
isRxGoods: isRxGoods,
mainProductCode:mainProductCode,
productCode:productCode.join(",")
},
});
},

View File

@ -224,7 +224,7 @@ export default {
});
},
userinter(){
let user= this.checkIsLogin();
let user= this.$store.state.userInfo;
if(!user){
this.$message({
type: 'warning',
@ -377,9 +377,10 @@ obligation(item,index){
}
},
mounted() {
this.checkIsLogin();
let userwidth=0;
this.ifadroind();
let user= this.checkIsLogin();
let user= this.$store.state.userInfo;
if(user){
this.userid=user.data;
this.islogin=false;

View File

@ -88,27 +88,33 @@
<div
class="ts-product-header rc-column"
id="328b2e5f-6904-4cac-9709-51ed18d2500f"
v-for="(item, index) in newlist"
:key="index"
>
<div class="usermain">
<div class="online bold rc-md-down"></div>
<div class="rc-main">
<div class="rc-title">
<h2>{{ item.productName }}</h2>
<h2>{{ curItem.brandName + " " + curItem.productName }}</h2>
</div>
</div>
<div class="online rc-md-down"></div>
<div class="rc-main">
<div class="productdetails">
<div class="rc-productdetail">
<div class="rc-productdetail" v-if="!userbuy">
<i class="ts-row-title">适用年龄</i>
<span>{{ curItem.tagUsedAge }}</span>
</div>
<div class="rc-productdetail" v-if="!userbuy">
<i class="ts-row-title">所属分类</i>
<span>{{ curItem.categoryName }}</span>
</div>
<div class="rc-productdetail" v-if="userbuy">
<i class="ts-row-title">商品价格</i>
<span class="ts-realprice">{{ item.ecPrice }}</span>
<span class="ts-realprice">{{ curItem.ecPrice }}</span>
<span class="ts-remove ts-ecprice"
>{{ item.rsp }}
>{{ curItem.rsp }}
</span>
</div>
<div class="rc-productdetai">
<div class="rc-productdetai" v-if="userbuy">
<div>
<i class="ts-row-title">活动促销</i>
<span>全场商品限时优惠</span>
@ -118,7 +124,7 @@
</div>
</div>
<div class="online bold rc-md-down"></div>
<div class="rc-main rc-md-up">
<div class="rc-main rc-md-up" v-if="userbuy">
<div class="online"></div>
</div>
@ -128,13 +134,16 @@
<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 class="ts-tag-list">
<em v-for="(item, index) in newlist" :key="index" @click="selectsearch(item, index)" :class="[activeIndexa==index?'active':'unactive',item.leftAllotment?'':'disabled']">
{{ item.specifications }}
</em>
</div>
<!-- 一个标品有多个商品, 每个商品有不同的价格
<em class="active">
{{ item.specifications }}
</em>
-->
</div>
</div>
<div class="rc-main">
@ -153,7 +162,7 @@
/>
</div>
</div>
<div class="rc-main rc-md-up">
<div class="rc-main rc-md-up" v-if="userbuy">
<div class="online"></div>
</div>
<div class="online rc-md-down"></div>
@ -178,14 +187,14 @@
<li>
<span
><i class="ts-row-title">商品编号</i
><i>{{ item.brandCode }}</i></span
><i>{{ curItem.brandCode }}</i></span
>
</li>
</ul>
</div>
<div class="rc-button" v-if="userbuy">
<span @click="usertanchu(item, 0)">加入购物车</span>
<span @click="usertanchu(item, 1)">立即购买</span>
<span @click="usertanchu(curItem, 0)">加入购物车</span>
<span @click="usertanchu(curItem, 1)">立即购买</span>
</div>
</div>
<div class="online bold rc-md-down"></div>
@ -193,26 +202,10 @@
</div>
</div>
</div>
<div class="rc-footimage rc-main" v-for="(item, index) in newlist"
:key="index">
<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 class="rc-footimage rc-padding--sm rc-max-width--lg">
<img :src="curItem.showImgFile" alt="" />
</div>
<FixRight></FixRight>
<Myfooter v-on:litentop="showmesg"></Myfooter>
</div>
<el-dialog :visible.sync="dialogInfo1" @close="userclose" class="pop_coupon">
@ -262,8 +255,8 @@
</div>
</el-dialog>
<div class="rc-button rc-md-down">
<span @click="usertanchu(item, 0)">加入购物车</span>
<span @click="usertanchu(item, 1)">立即购买</span>
<span @click="usertanchu(curItem, 0)">加入购物车</span>
<span @click="usertanchu(curItem, 1)">立即购买</span>
</div>
</div>
</template>
@ -271,8 +264,8 @@
<script>
import Myheader from "~/components/header.vue";
import tabs from "@/components/tabs.vue";
import FixRight from "~/components/fixed-right.vue";
import unlogin from "~/components/unlogin.vue";
import { mapMutations } from "vuex";
import Myfooter from "~/components/rc-footer.vue";
import {
goodsmessage,
@ -280,9 +273,65 @@ import {
postCourseId,
getdraw,
alldiscount,
oncequery,
biaomessage
} from "../../ajax/getData";
import { mapMutations } from "vuex";
const settings = require("@/config");
export default {
async asyncData (context) {
let isRxGoods = context.route.query.isRxGoods;
let userbuy = true;
let newlist = [];
let curItem = {};
let productAttachmentList = [];
let userlistmenu = [];
isRxGoods = (isRxGoods == '1'?true:false);
let mainProductCode = context.route.query.mainProductCode;
let productCode = context.route.query.productCode;
let activeIndexa = 0;
productCode = productCode.split(",");
// console.log(this.productCode);
if(isRxGoods){
let data = await oncequery(mainProductCode);
let outputObj = {};
if (data) {
outputObj = data;
outputObj.productName = data.name;
outputObj.picture = 'https://royalcanincn.escase.cn/jc/royalcanin/'+outputObj.picture;
outputObj.showImgFile = 'https://royalcanincn.escase.cn/jc/royalcanin/'+outputObj.showImgFile;
newlist = [outputObj];
curItem = outputObj;
}
let insertTmpObj = {id:1, attachmentType:1, sort:1, attachmentPath:newlist[0].picture};
productAttachmentList = [insertTmpObj];
userbuy = false;
} else {
let stopLeftAllotmentChecking = false;
let stopIndex = 0;
for(let singleCode of productCode) {
let data = await goodsmessage(singleCode);
if (data && data.data.length>0) {
newlist.push(data.data[0]);
if(data.data[0].leftAllotment && !stopLeftAllotmentChecking) {
activeIndexa = stopIndex;
curItem = data.data[0];
stopLeftAllotmentChecking=true;
}
}
stopIndex++;
}
productAttachmentList = newlist[0].productAttachmentList;
userbuy = true;
}
return {
activeIndexa,
curItem,
newlist,
productAttachmentList,
userbuy
}
},
// middleware: 'metaTitle',
// // middleware: 'metaTitle',
// meta: {title: ''},
@ -290,7 +339,6 @@ export default {
return {
tableLabelTest: [],
userimage: require("../../assets/image/unused.png"),
activeIndexa: 0,
gotop: false,
dialogInfo1: false,
name: [],
@ -367,105 +415,32 @@ export default {
tabs,
unlogin,
Myfooter,
FixRight
},
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
this.checkIsLogin();
if (this.usermessage !== "" || this.usermessage.data !== undefined) {
this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
this.usermessage = this.$store.state.userInfo;
this.productCode = this.$route.query.productCode;
/*
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;
});
}
let isRxGoods = this.$route.query.isRxGoods;
isRxGoods = (isRxGoods == '1'?true:false);
if(isRxGoods){
this.rxquery(this.productCode);
this.userbuy = false;
} else {
this.userquery(this.productCode);
this.userbuy = true;
}
*/
}
},
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 == "购物车") {
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);
},
...mapMutations(["changemessage","checkIsLogin"]),
showmesg() {
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);
@ -482,8 +457,6 @@ export default {
type: "warning",
message: data.msg,
});
console.log(data);
}
},
@ -503,11 +476,22 @@ export default {
this.userlistmenu = this.newlist[0].productAttachmentList;
let changemess = JSON.stringify(this.userlistmenu);
console.log(changemess);
this.changemessage({ data: changemess });
this.parent_msg = this.userlistmenu;
console.log(this.userlistmenu);
},
async rxquery() {
let data = await oncequery(this.productCode);
let outputObj = {};
if (data) {
outputObj = data;
outputObj.productName = data.name;
outputObj.picture = 'https://royalcanincn.escase.cn/jc/royalcanin/'+outputObj.picture;
outputObj.showImgFile = 'https://royalcanincn.escase.cn/jc/royalcanin/'+outputObj.showImgFile;
this.newlist = [outputObj];
}
let picture = this.newlist[0].picture.split(",");
this.productAttachmentList = picture;
},
//
async userdraw(mobile) {
@ -537,20 +521,16 @@ export default {
});
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);
}
},
@ -585,8 +565,8 @@ export default {
}
},
usertanchu(item, orderm) {
let user = localStorage.getItem("userInfo");
if (user == undefined || user == null || user == "") {
let user = this.$store.state.userInfo;
if (!user) {
this.dialogInfo2 = true;
return;
} else {
@ -634,7 +614,11 @@ export default {
}
},
selectsearch(item, index) {
if(!item.leftAllotment)
return;
this.activeIndexa = index;
this.curItem = item;
this.productAttachmentList = item.productAttachmentList;
},
},

View File

@ -733,17 +733,25 @@ export default {
this.dialogInfo1 = false;
},
selectproduce(item,index){
if(item.productList[0]==undefined){
item.productlist[0].productCode=0;
}
if(item.productList[0]==undefined){
item.productlist[0]=[];
let isRxGoods=false;
let productCode = [];
let mainProductCode = item.productCode;
if(!item.ecPrice && !item.price)
{
isRxGoods=1;
productCode = [item.productCode];
} else {
for(let i of item.productList) {
productCode.push(i.productCode);
}
}
this.$router.push({
path: "/productdetails/producted",
query: {
stype: 1,
productCode:item.productList[0].productCode
isRxGoods: isRxGoods,
mainProductCode:mainProductCode,
productCode:productCode.join(",")
},
});
},

View File

@ -666,17 +666,25 @@ export default {
});
},
selectproduce(item,index){
if(item.productList[0]==undefined){
item.productlist[0].productCode=0;
}
if(item.productList[0]==undefined){
item.productlist[0]=[];
let isRxGoods=false;
let productCode = [];
let mainProductCode = item.productCode;
if(!item.ecPrice && !item.price)
{
isRxGoods=1;
productCode = [item.productCode];
} else {
for(let i of item.productList) {
productCode.push(i.productCode);
}
}
this.$router.push({
path: "/productdetails/producted",
query: {
stype: 1,
productCode:item.productList[0].productCode
isRxGoods: isRxGoods,
mainProductCode:mainProductCode,
productCode:productCode.join(",")
},
});
},
@ -1062,6 +1070,5 @@ export default {
</script>
<style lang="less" scoped >
@import url("../../assets/css/global.less");
@import url("../../assets/css/search.less");
</style>

View File

@ -29,12 +29,13 @@ const mutations = {
logoutSystem(state) {
localStorage.removeItem('userInfo')
},
checkIsLogin() {
checkIsLogin(state) {
let rawUserInfoStr = localStorage.getItem('userInfo');
let rawUserInfo = JSON.parse(rawUserInfoStr);
if(rawUserInfo && rawUserInfo.hasOwnProperty('xaccessToken') && rawUserInfo['xaccessToken'].length>36)
return rawUserInfo;
return false;
state.userInfo = rawUserInfo;
else
state.userInfo = undefined;
},
changemessage(state, val) {
localStorage.setItem('message', val.data);