mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 18:26:38 +08:00
sumt
This commit is contained in:
summation
parent
320c23dde5
commit
e133d3e778
127
rc-busness/pages/address/address.vue
Normal file
127
rc-busness/pages/address/address.vue
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<van-address-edit
|
||||||
|
:area-list="areaList"
|
||||||
|
:address-info="{
|
||||||
|
name: editAddressData.name,
|
||||||
|
tel: editAddressData.tel,
|
||||||
|
addressDetail: editAddressData.detailAddress,
|
||||||
|
areaCode: areaCode,
|
||||||
|
}"
|
||||||
|
show-delete
|
||||||
|
show-set-default
|
||||||
|
show-search-result
|
||||||
|
:search-result="searchResult"
|
||||||
|
@save="onSave"
|
||||||
|
@delete="onDelete"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Toast } from "vant";
|
||||||
|
import { areaList } from "@vant/area-data";
|
||||||
|
var _ = require("lodash");
|
||||||
|
import { memberAddress } from "../../ajax/getData";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
areaList,
|
||||||
|
searchResult: [],
|
||||||
|
areaCode: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: ["editAddressData"],
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
async onSave(content) {
|
||||||
|
// Toast('save');
|
||||||
|
let provinceId = Number(content.areaCode.substring(0, 2)); //省份id
|
||||||
|
let cityId = Number(content.areaCode.substring(2, 4)); //城市id
|
||||||
|
let districtId = Number(content.areaCode.substring(4, 7)); //区域编码
|
||||||
|
//id 详细地址 /收货人姓名 电话号码 省份id/城市id/区域编码
|
||||||
|
let memberId = JSON.parse(localStorage.getItem("userInfo")).data.id;
|
||||||
|
let postData = {
|
||||||
|
memberId,
|
||||||
|
provinceId: 25,
|
||||||
|
cityId: 36,
|
||||||
|
districtId: 418,
|
||||||
|
// provinceId,
|
||||||
|
// cityId,
|
||||||
|
// districtId,
|
||||||
|
detailAddress: content.addressDetail,
|
||||||
|
recipient: content.name,
|
||||||
|
recipientPhone: content.tel,
|
||||||
|
default: content.default,
|
||||||
|
};
|
||||||
|
let saveType = this.editAddressData.saveType ? "update" : "add";
|
||||||
|
let data = await memberAddress(saveType, postData);
|
||||||
|
if (data) {
|
||||||
|
this.$message({
|
||||||
|
type: "warning",
|
||||||
|
message: data.msg,
|
||||||
|
});
|
||||||
|
if (data.code == "0") {
|
||||||
|
this.$emit("isClose", false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async onDelete() {
|
||||||
|
// Toast("delete");
|
||||||
|
let postData = {
|
||||||
|
ids: this.editAddressData.id,
|
||||||
|
memberId: this.editAddressData.memberId,
|
||||||
|
};
|
||||||
|
let data = await memberAddress("delete", postData);
|
||||||
|
if (data) {
|
||||||
|
this.$message({
|
||||||
|
type: "warning",
|
||||||
|
message: data.msg,
|
||||||
|
});
|
||||||
|
if (data.code == "0") {
|
||||||
|
this.$emit("isClose", false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async areaCodeInit() {
|
||||||
|
var city = this.editAddressData.city;
|
||||||
|
var district = this.editAddressData.district;
|
||||||
|
this.areaCode = "1310001";
|
||||||
|
// _.forEach(this.areaList.city_list, (o, c) => {
|
||||||
|
// if (o == city) {
|
||||||
|
// // let cityId = String(_.take(c, 2));
|
||||||
|
// let cityId = c.substring(0, 4);
|
||||||
|
// _.forEach(this.areaList.county_list, (i, a) => {
|
||||||
|
// if (i == district) {
|
||||||
|
// // let districtId = String(_.take(a, 2));
|
||||||
|
// let districtId = a.substring(0, 4);
|
||||||
|
// if (cityId == districtId) {
|
||||||
|
// this.areaCode = a;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.areaCodeInit();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.van-area {
|
||||||
|
width: 400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 1px solid #808285;
|
||||||
|
}
|
||||||
|
.van-popup {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.van-overlay {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.v-modal {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,19 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<div class="rc-top"></div>
|
<div class="rc-top"></div>
|
||||||
<unlogin></unlogin>
|
|
||||||
<!-- Suppose in header end -->
|
<!-- Suppose in header end -->
|
||||||
<van-swipe :autoplay="3000" class="rc-padding-bottom--md">
|
<div class="ts-banner-swiper-container">
|
||||||
<van-swipe-item v-for="(banner, index) in showingBanners" :key="index">
|
<swiper :options="headerSwiperOption">
|
||||||
|
<swiper-slide v-for="(banner, index) in showingBanners" :key="index">
|
||||||
|
<a :href="banner.link" target="_blank">
|
||||||
<img :src="banner.src" class="useraimg"/>
|
<img :src="banner.src" class="useraimg"/>
|
||||||
</van-swipe-item>
|
</a>
|
||||||
</van-swipe>
|
</swiper-slide>
|
||||||
|
</swiper>
|
||||||
|
<div id="homeBannerSwiperPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="online bold rc-md-down"></div>
|
||||||
<div class="online bold rc-md-down" id="fixed-catbar-seperator"></div>
|
<div id="fixed-catbar-seperator"></div>
|
||||||
<div class="rc-max-width--xl">
|
<div class="rc-max-width--xl">
|
||||||
<div class="usermain">
|
<div class="usermain">
|
||||||
<div :class="searchBar?'rc-ma':'rc-ma searchBara'">
|
<div :class="searchBar?'rc-ma':'rc-ma searchBara'">
|
||||||
@ -35,22 +37,25 @@
|
|||||||
<div class="online bold rc-md-up" v-show="catproduct"></div>
|
<div class="online bold rc-md-up" v-show="catproduct"></div>
|
||||||
|
|
||||||
<div class="rc-full-width">
|
<div class="rc-full-width">
|
||||||
<div class="rc-lunbo rc-full-width">
|
<div class="rc-lunbo rc-full-width ts-position-identifier" data-rel="明星猫粮">
|
||||||
<!-- <h2>明星猫粮</h2> -->
|
<!-- <h2>明星猫粮</h2> -->
|
||||||
<div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct" ref="mingxing">
|
<div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct" ref="mingxing">
|
||||||
<!-- 内容 -->
|
<!-- 内容 -->
|
||||||
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
|
<div class="rc-full-width rc-padding-y--md" id="swiper1">
|
||||||
<h2 class="rc-beta rc-text--center">{{usertitle}}</h2>
|
<h2 class="rc-beta rc-text--center">{{usertitle}}</h2>
|
||||||
<!-- 轮播图 -->
|
<!-- 轮播图 -->
|
||||||
<swiper :options="swiperOption">
|
<div class="ts-carousel-container">
|
||||||
<swiper-slide class="swiper-slide" v-for="(item, key) in catlistvideo" :key="key" >
|
<swiper class="rc-padding-bottom--md" :options="catStarProductswiperOption">
|
||||||
|
<swiper-slide v-for="(item, index) in catlistvideo" :key="index">
|
||||||
<div class="rc-video">
|
<div class="rc-video">
|
||||||
<div class="uservideo">
|
<div class="uservideo">
|
||||||
|
<video controls="" :poster=item.catimage>
|
||||||
|
<source :src=item.video type="video/mp4">
|
||||||
|
</video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rc-right">
|
<div class="rc-right">
|
||||||
<img :src=item.catimage alt="">
|
<img :src=item.productimage alt="">
|
||||||
<span>{{item.title}}</span>
|
<span>{{item.title}}</span>
|
||||||
<p>{{item.detail}}</p>
|
<p>{{item.detail}}</p>
|
||||||
<em>{{item.price}}</em>
|
<em>{{item.price}}</em>
|
||||||
@ -60,12 +65,12 @@
|
|||||||
<div class="sw-center" >
|
<div class="sw-center" >
|
||||||
<div class="rc-click" @click="selectproduce(item,index)">
|
<div class="rc-click" @click="selectproduce(item,index)">
|
||||||
<div class="uservideo">
|
<div class="uservideo">
|
||||||
<video width="300px" height="251" controls="controls">
|
<video controls="controls" :poster=item.catimage>
|
||||||
<source :src= item.video type="video/ogg">
|
<source :src= item.video type="video/ogg">
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img :src=item.catimage alt="">
|
<img :src=item.productimage alt="">
|
||||||
<span>{{item.title}}</span>
|
<span>{{item.title}}</span>
|
||||||
<p>{{item.detail}}</p>
|
<p>{{item.detail}}</p>
|
||||||
<em>{{item.price}}</em>
|
<em>{{item.price}}</em>
|
||||||
@ -74,24 +79,20 @@
|
|||||||
<i @click="userbuy(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i>
|
<i @click="userbuy(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
<div id="catStarSwiperPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="online bold" v-show="onemao"></div>
|
<div class="online bold" v-show="onemao"></div>
|
||||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" ref="usercontent" v-show="onemao">
|
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" ref="usercontent" v-show="onemao">
|
||||||
<h2 class="rc-beta rc-text--center" >全价猫湿粮</h2>
|
<h2 class="rc-beta rc-text--center ts-position-identifier" data-rel="猫湿粮" >全价猫湿粮</h2>
|
||||||
<van-tabs @change='catclick' class="van-tabs">
|
<van-tabs @click='catclickShi' class="van-tabs" v-if="onemao" v-model="maoshiCurIndex">
|
||||||
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
|
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
|
||||||
<div class="rc-contair">
|
<div class="rc-contair">
|
||||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||||
@ -158,28 +159,24 @@
|
|||||||
<div class="rc-column">
|
<div class="rc-column">
|
||||||
<div class="rc-click" @click="selectproduce(item,index)">
|
<div class="rc-click" @click="selectproduce(item,index)">
|
||||||
<span>{{item.title}}</span>
|
<span>{{item.title}}</span>
|
||||||
<i>0.001{{item.price}}</i>
|
<i>{{item.ecprice}}</i>
|
||||||
</div>
|
</div>
|
||||||
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
|
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<nuxt-link :to="`/productdetails/productlist/`">
|
<nuxt-link :to="`/productdetails/productlist/`">
|
||||||
<div class="userserlect">
|
<div class="userserlect">
|
||||||
<span class="ts-standard-btn center">查看更多</span>
|
<span class="ts-standard-btn center">查看更多</span>
|
||||||
</div>
|
</div>
|
||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="online bold" v-show="twomao"></div>
|
<div class="online bold" v-show="twomao"></div>
|
||||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="twomao" ref="catgan">
|
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="twomao" ref="catgan">
|
||||||
<h2 class="rc-beta rc-text--center">全价猫干粮</h2>
|
<h2 class="rc-beta rc-text--center ts-position-identifier" data-rel="猫干粮">全价猫干粮</h2>
|
||||||
<van-tabs @change='catclick' class="van-tabs">
|
<van-tabs @click='catclickGan' class="van-tabs" v-if="twomao" v-model="maoganCurIndex">
|
||||||
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
|
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
|
||||||
<div class="rc-contair">
|
<div class="rc-contair">
|
||||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||||
@ -192,7 +189,7 @@
|
|||||||
<div class="rc-column">
|
<div class="rc-column">
|
||||||
<div class="rc-click" @click="selectproduce(item,index)">
|
<div class="rc-click" @click="selectproduce(item,index)">
|
||||||
<span>{{item.name}}</span>
|
<span>{{item.name}}</span>
|
||||||
<i>0.001{{item.price}}</i>
|
<i>{{item.ecprice}}</i>
|
||||||
</div>
|
</div>
|
||||||
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
|
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
|
||||||
</div>
|
</div>
|
||||||
@ -272,20 +269,23 @@
|
|||||||
<div class="online bold" v-show="dogshow"></div>
|
<div class="online bold" v-show="dogshow"></div>
|
||||||
<div class="pageFullScreen" id="xxxFullScreen" v-show="dogshow" ref="mingxing">
|
<div class="pageFullScreen" id="xxxFullScreen" v-show="dogshow" ref="mingxing">
|
||||||
<!-- 内容 -->
|
<!-- 内容 -->
|
||||||
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
|
<div class="swiper-container rc-full-width rc-padding-y--md" id="swiper2">
|
||||||
<div class="oc-top">
|
<div class="oc-top">
|
||||||
<h2 class="rc-beta rc-text--center">{{dogtitle}}</h2>
|
<h2 class="rc-beta rc-text--center ts-position-identifier" data-rel="明星犬粮">{{dogtitle}}</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- 轮播图 -->
|
<!-- 轮播图 -->
|
||||||
<swiper :options="swiperOption">
|
<div class="ts-carousel-container">
|
||||||
<swiper-slide class="swiper-slide" v-for="(item, key) in doglistvideo" :key="key" >
|
<swiper class="rc-padding-bottom--md" :options="dogStarProductswiperOption" v-if="dogshow">
|
||||||
|
<swiper-slide v-for="(item, key) in doglistvideo" :key="key">
|
||||||
<div class="rc-video">
|
<div class="rc-video">
|
||||||
<div class="uservideo">
|
<div class="uservideo">
|
||||||
|
<video controls="" :poster=item.catimage>
|
||||||
|
<source :src=item.video type="video/mp4">
|
||||||
|
</video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rc-right">
|
<div class="rc-right">
|
||||||
<img :src=item.catimage alt="">
|
<img :src=item.productimage alt="">
|
||||||
<span>{{item.title}}</span>
|
<span>{{item.title}}</span>
|
||||||
<p>{{item.detail}}</p>
|
<p>{{item.detail}}</p>
|
||||||
<em>{{item.price}}</em>
|
<em>{{item.price}}</em>
|
||||||
@ -295,12 +295,12 @@
|
|||||||
<div class="sw-center" >
|
<div class="sw-center" >
|
||||||
<div class="rc-click" @click="selectproduce(item,index)">
|
<div class="rc-click" @click="selectproduce(item,index)">
|
||||||
<div class="uservideo">
|
<div class="uservideo">
|
||||||
<video width="300px" height="251" controls="controls">
|
<video controls="controls">
|
||||||
<source :src= item.video type="video/ogg">
|
<source :src= item.video type="video/ogg">
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img :src=item.catimage alt="">
|
<img :src=item.productimage alt="">
|
||||||
<span>{{item.title}}</span>
|
<span>{{item.title}}</span>
|
||||||
<p>{{item.detail}}</p>
|
<p>{{item.detail}}</p>
|
||||||
<em>{{item.price}}</em>
|
<em>{{item.price}}</em>
|
||||||
@ -312,6 +312,8 @@
|
|||||||
|
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
<div id="dogStarSwiperPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -322,21 +324,20 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="threemao" ref="doggshi">
|
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="threemao" ref="doggshi">
|
||||||
<h2 class="rc-beta rc-text--center">全价犬湿粮</h2>
|
<h2 class="rc-beta rc-text--center ts-position-identifier" data-rel="犬湿粮">全价犬湿粮</h2>
|
||||||
<van-tabs @change='userdog' class="van-tabs">
|
<van-tabs @click='userdogShi' class="van-tabs" v-if="threemao" v-model="quanshiCurIndex">
|
||||||
<div class="online bold rc-md-down" v-show="threemao"></div>
|
|
||||||
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
|
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
|
||||||
<div class="online bold" v-show="threemao"></div>
|
<div class="online bold rc-md-up" v-show="threemao"></div>
|
||||||
<div class="usermain">
|
<div class="usermain">
|
||||||
<ul class="ul-dog usermain">
|
<ul class="ul-dog usermain">
|
||||||
<li
|
<li
|
||||||
v-for="(item, index) in userdoglist"
|
v-for="(dogListitem, dogListIndex) in userdoglist"
|
||||||
:key="index"
|
:key="dogListIndex"
|
||||||
@click="quanshi(item, index)"
|
@click="quanshi(dogListitem, dogListIndex)"
|
||||||
:class="activeIndex5 == index ? 'active' : 'unactive'"
|
:class="activeIndex5 == dogListIndex ? 'active' : 'unactive'"
|
||||||
>
|
>
|
||||||
<img :src="item.catimage" alt="">
|
<img :src="dogListitem.catimage" alt="">
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ dogListitem.title }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -419,7 +420,6 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
<nuxt-link :to="`/productdetails/productlist/`">
|
<nuxt-link :to="`/productdetails/productlist/`">
|
||||||
<div class="userserlect">
|
<div class="userserlect">
|
||||||
<span class="ts-standard-btn center">查看更多</span>
|
<span class="ts-standard-btn center">查看更多</span>
|
||||||
@ -439,20 +439,20 @@
|
|||||||
|
|
||||||
<div class="online bold" v-show="fourmao"></div>
|
<div class="online bold" v-show="fourmao"></div>
|
||||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fourmao" ref="dogan">
|
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fourmao" ref="dogan">
|
||||||
<h2 class="rc-beta rc-text--center">全价犬干粮</h2>
|
<h2 class="rc-beta rc-text--center ts-position-identifier" data-rel="犬干粮">全价犬干粮</h2>
|
||||||
<van-tabs @change='userdog' class="van-tabs">
|
<van-tabs @click='userdogGan' class="van-tabs" v-if="fourmao" v-model="quanganCurIndex">
|
||||||
<div class="online bold" v-show="fourmao"></div>
|
<div class="online bold rc-md-up" v-show="fourmao"></div>
|
||||||
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
|
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
|
||||||
<div class="usermain">
|
<div class="usermain">
|
||||||
<ul class="ul-dog usermain">
|
<ul class="ul-dog usermain">
|
||||||
<li
|
<li
|
||||||
v-for="(item, index) in userdoglist"
|
v-for="(userDogListItem, userDogListIndex) in userdoglist"
|
||||||
:key="index"
|
:key="userDogListIndex"
|
||||||
@click="userdoghot(item, index)"
|
@click="userdoghot(userDogListItem, userDogListIndex)"
|
||||||
:class="activeIndex6 == index ? 'active' : 'unactive'"
|
:class="activeIndex6 == userDogListIndex ? 'active' : 'unactive'"
|
||||||
>
|
>
|
||||||
<img :src="item.catimage" alt="">
|
<img :src="userDogListItem.catimage" alt="">
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ userDogListItem.title }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -532,7 +532,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<nuxt-link :to="`/productdetails/productlist/`">
|
<nuxt-link :to="`/productdetails/productlist/`">
|
||||||
<div class="userserlect">
|
<div class="userserlect">
|
||||||
<span class="ts-standard-btn center">查看更多</span>
|
<span class="ts-standard-btn center">查看更多</span>
|
||||||
@ -550,8 +549,8 @@
|
|||||||
<div class="online bold" v-show="fivemao"></div>
|
<div class="online bold" v-show="fivemao"></div>
|
||||||
|
|
||||||
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fivemao" ref="chufang">
|
<div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fivemao" ref="chufang">
|
||||||
<h2 class="rc-beta rc-text--center">处方用粮</h2>
|
<h2 class="rc-beta rc-text--center ts-position-identifier" data-rel="处方用粮">处方用粮</h2>
|
||||||
<van-tabs @change='userclick' class="van-tabs">
|
<van-tabs @click='userclick' class="van-tabs" v-if="fivemao">
|
||||||
<van-tab v-for="(item,index) in discounchufang" :key="index" :title="item.title">
|
<van-tab v-for="(item,index) in discounchufang" :key="index" :title="item.title">
|
||||||
<div class="rc-contair">
|
<div class="rc-contair">
|
||||||
<ul class="ts-product-list rc-margin-bottom--lg">
|
<ul class="ts-product-list rc-margin-bottom--lg">
|
||||||
@ -695,7 +694,11 @@
|
|||||||
<span>回到顶部</span>
|
<span>回到顶部</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="!dataLoaded" class="ts-mask">
|
||||||
|
<div class="ts-mask-bg"></div>
|
||||||
|
<div class="userloding"></div>
|
||||||
|
<span>数据加载中</span>
|
||||||
|
</div>
|
||||||
<Myfooter v-on:litentop='showmesg'></Myfooter>
|
<Myfooter v-on:litentop='showmesg'></Myfooter>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -712,9 +715,11 @@
|
|||||||
meta: {title: '首页'},
|
meta: {title: '首页'},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
|
fixedHeader:false,
|
||||||
|
dataLoaded:true,
|
||||||
useraindex:0,
|
useraindex:0,
|
||||||
usertitle:'明星猫粮',
|
usertitle:'明星猫粮',
|
||||||
dogtitle:'明星狗粮',
|
dogtitle:'明星犬粮',
|
||||||
processinformation:[],
|
processinformation:[],
|
||||||
catshi:[],
|
catshi:[],
|
||||||
userindex:0,
|
userindex:0,
|
||||||
@ -736,7 +741,6 @@
|
|||||||
dogtype:[
|
dogtype:[
|
||||||
{
|
{
|
||||||
title: "幼犬",
|
title: "幼犬",
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "成犬",
|
title: "成犬",
|
||||||
@ -744,7 +748,12 @@
|
|||||||
{
|
{
|
||||||
title: "老年犬",
|
title: "老年犬",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "品种犬",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "亚健康",
|
||||||
|
}
|
||||||
],
|
],
|
||||||
anchor:'',
|
anchor:'',
|
||||||
dogshi:[],
|
dogshi:[],
|
||||||
@ -788,24 +797,29 @@
|
|||||||
],
|
],
|
||||||
'pc':[
|
'pc':[
|
||||||
{src:"/images/banner/pc-banner1.png",link:""},
|
{src:"/images/banner/pc-banner1.png",link:""},
|
||||||
{src:"/images/banner/pc-banner2.png",link:""}
|
{src:"/images/banner/pc-banner2.png",link:""},
|
||||||
|
{src:"/images/banner/pc-banner3.png",link:""},
|
||||||
|
{src:"/images/banner/pc-banner4.png",link:""}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
showingBanners:[],
|
showingBanners:[],
|
||||||
|
maoganCurIndex:0,
|
||||||
|
maoshiCurIndex:0,
|
||||||
|
quanshiCurIndex:0,
|
||||||
|
quanganCurIndex:0,
|
||||||
userdoglist: [
|
userdoglist: [
|
||||||
{
|
{
|
||||||
title: "小型犬",
|
title: "小型犬",
|
||||||
catimage: require("../assets/cat.png"),
|
catimage: "/images/dog/small.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "中型犬",
|
title: "中型犬",
|
||||||
catimage: require("../assets/four.png"),
|
catimage: "/images/dog/medium.png",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "大型犬",
|
title: "大型犬",
|
||||||
catimage: require("../assets/one.png"),
|
catimage: "/images/dog/big.png",
|
||||||
},
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
discoun: [
|
discoun: [
|
||||||
{
|
{
|
||||||
@ -823,11 +837,8 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "亚健康猫",
|
title: "亚健康猫"
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|
||||||
discountlist: [
|
discountlist: [
|
||||||
@ -851,7 +862,7 @@
|
|||||||
catimage: require("../assets/cat.png"),
|
catimage: require("../assets/cat.png"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "明星狗粮",
|
title: "明星犬粮",
|
||||||
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
||||||
price:'￥112',
|
price:'￥112',
|
||||||
catimage: require("../assets/six.png"),
|
catimage: require("../assets/six.png"),
|
||||||
@ -909,64 +920,72 @@
|
|||||||
],
|
],
|
||||||
catlistvideo: [
|
catlistvideo: [
|
||||||
{
|
{
|
||||||
title: "明星猫粮",
|
title: "主食级猫湿粮",
|
||||||
video:"/images/cat/one.mp4",
|
video:"/images/cat/one.mp4",
|
||||||
catimage: "/images/cat/one.jpg",
|
catimage: "/images/cat/one.jpg",
|
||||||
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
productimage: "/images/cat/star-1.png",
|
||||||
price:'¥123.45',
|
detail:'为10柔软细腻慕斯 适合离乳期幼猫舔食',
|
||||||
|
price:'¥77',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "猫湿粮",
|
title: "幼猫成长专属",
|
||||||
video:"/images/cat/two.mp4",
|
video:"/images/cat/two.mp4",
|
||||||
catimage: "/images/cat/two.jpg",
|
catimage: "/images/cat/two.jpg",
|
||||||
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
productimage: "/images/cat/star-2.png",
|
||||||
price:'¥123.45',
|
detail:'支持幼猫自身保护力 为快速生长提供足够能量',
|
||||||
|
price:'¥147',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "猫干粮",
|
title: "室内成猫专属",
|
||||||
video:"/images/cat/three.mp4",
|
video:"/images/cat/three.mp4",
|
||||||
catimage: "/images/cat/three.jpg",
|
catimage: "/images/cat/three.jpg",
|
||||||
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
productimage: "/images/cat/star-3.png",
|
||||||
price:'¥123.45',
|
detail:'高易消化蛋白 减少粪便量和异味',
|
||||||
|
price:'¥140',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "猫干粮",
|
title: "英短成猫专属",
|
||||||
video:"/images/cat/four.mp4",
|
video:"/images/cat/four.mp4",
|
||||||
catimage: "/images/cat/four.jpg",
|
catimage: "/images/cat/four.jpg",
|
||||||
detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
|
productimage: "/images/cat/star-4.png",
|
||||||
price:'¥123.45',
|
detail:'增强肌肉质量 支持骨骼与关节健康',
|
||||||
|
price:'¥183',
|
||||||
},
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|
||||||
doglistvideo: [
|
doglistvideo: [
|
||||||
{
|
{
|
||||||
title: "明星狗粮",
|
title: "主食级狗湿粮",
|
||||||
video:"/images/dog/one.mp4",
|
video:"/images/dog/one.mp4",
|
||||||
catimage: "/images/dog/one.jpg",
|
catimage: "/images/dog/one.jpg",
|
||||||
detail:'为10月龄及以上成犬量身打造的精准营养',
|
productimage: "/images/cat/star-1.png",
|
||||||
price:'¥123.45',
|
detail:'柔软细腻慕斯 适合离乳期幼犬舔食',
|
||||||
|
price:'¥77',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "狗湿粮",
|
title: "贵宾成犬专属",
|
||||||
video:"/images/dog/two.mp4",
|
video:"/images/dog/two.mp4",
|
||||||
catimage: "/images/dog/two.jpg",
|
catimage: "/images/dog/two.jpg",
|
||||||
detail:'为10月龄及以上英国成犬量身打造的精准营养',
|
productimage: "/images/cat/star-2.png",
|
||||||
price:'¥123.45',
|
detail:'护肤靓毛 理想体态',
|
||||||
|
price:'¥241',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "狗干粮",
|
title: "小型犬成犬专属",
|
||||||
video:"/images/dog/three.mp4",
|
video:"/images/dog/three.mp4",
|
||||||
catimage: "/images/dog/three.jpg",
|
catimage: "/images/dog/three.jpg",
|
||||||
detail:'为10月龄及以上英国犬成犬量身打造的精准营养',
|
productimage: "/images/cat/star-3.png",
|
||||||
price:'¥123.45',
|
detail:'亮泽被毛 呵护牙齿',
|
||||||
|
price:'¥121',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "狗干粮",
|
title: "离乳期全价奶糕",
|
||||||
video:"/images/dog/four.mp4",
|
video:"/images/dog/four.mp4",
|
||||||
catimage: "/images/dog/four.jpg",
|
catimage: "/images/dog/four.jpg",
|
||||||
detail:'为10月龄及以上英国成犬量身打造的精准营养',
|
productimage: "/images/cat/star-4.png",
|
||||||
price:'¥123.45',
|
detail:'高易再水合颗粒 帮助增强保护健康成长',
|
||||||
|
price:'¥88',
|
||||||
},
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
@ -1040,7 +1059,32 @@
|
|||||||
// },
|
// },
|
||||||
],
|
],
|
||||||
|
|
||||||
swiperOption: {
|
headerSwiperOption: {
|
||||||
|
loop: true,
|
||||||
|
slidesPerView: 'auto',
|
||||||
|
centeredSlides: true,
|
||||||
|
speed:1000,
|
||||||
|
spaceBetween: 0,
|
||||||
|
autoplay: true,
|
||||||
|
pagination: {
|
||||||
|
el: '#homeBannerSwiperPagnation'
|
||||||
|
},
|
||||||
|
paginationClickable: true,
|
||||||
|
loopAdditionalSlides: 100,
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev'
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
slideChange(Swiper) {
|
||||||
|
|
||||||
|
},
|
||||||
|
tap() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
catStarProductswiperOption: {
|
||||||
loop: true,
|
loop: true,
|
||||||
slidesPerView: 'auto',
|
slidesPerView: 'auto',
|
||||||
centeredSlides: true,
|
centeredSlides: true,
|
||||||
@ -1049,8 +1093,7 @@
|
|||||||
// autoplay: true,
|
// autoplay: true,
|
||||||
loopAdditionalSlides: 100,
|
loopAdditionalSlides: 100,
|
||||||
pagination: {
|
pagination: {
|
||||||
el: '.swiper-pagination',
|
el: '#catStarSwiperPagnation',
|
||||||
dynamicBullets: true
|
|
||||||
},
|
},
|
||||||
navigation: {
|
navigation: {
|
||||||
nextEl: '.swiper-button-next',
|
nextEl: '.swiper-button-next',
|
||||||
@ -1058,19 +1101,30 @@
|
|||||||
},
|
},
|
||||||
on: {
|
on: {
|
||||||
slideChange(Swiper) {
|
slideChange(Swiper) {
|
||||||
//console.log('onSlideChangeEnd',this);
|
|
||||||
// vm.ifadroind('','',this.realIndex);
|
|
||||||
vm.useraindex=this.realIndex;
|
vm.useraindex=this.realIndex;
|
||||||
},
|
},
|
||||||
tap() {
|
tap() {
|
||||||
//console.log('onTap', this);
|
|
||||||
}
|
}
|
||||||
// slideChange() {
|
}
|
||||||
// console.log('onSlideChangeEnd', this);
|
},
|
||||||
// },
|
dogStarProductswiperOption: {
|
||||||
// tap() {
|
loop: true,
|
||||||
// console.log('onTap', this);
|
slidesPerView: 'auto',
|
||||||
// }
|
centeredSlides: true,
|
||||||
|
speed:1000,
|
||||||
|
spaceBetween: 30,
|
||||||
|
// autoplay: true,
|
||||||
|
loopAdditionalSlides: 100,
|
||||||
|
pagination: {
|
||||||
|
el: '#dogStarSwiperPagnation',
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev'
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
slideChange(Swiper) {},
|
||||||
|
tap() {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@ -1083,9 +1137,9 @@
|
|||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
vm=this;
|
vm=this;
|
||||||
|
|
||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
const that = this
|
const that = this
|
||||||
@ -1096,8 +1150,14 @@
|
|||||||
}
|
}
|
||||||
window.addEventListener("scroll", this.handleScroll, true);
|
window.addEventListener("scroll", this.handleScroll, true);
|
||||||
this.userchufang();//查询处方粮商品信息
|
this.userchufang();//查询处方粮商品信息
|
||||||
|
|
||||||
this.catmessage();//查询猫的信息
|
this.catmessage();//查询猫的信息
|
||||||
|
this.catclickGan();
|
||||||
|
this.catclickShi();
|
||||||
|
|
||||||
this.dogmessage();//查询狗的信息
|
this.dogmessage();//查询狗的信息
|
||||||
|
this.userdogShi();
|
||||||
|
this.userdogGan();
|
||||||
},
|
},
|
||||||
destroyed () {
|
destroyed () {
|
||||||
window.removeEventListener('scroll', this.scrollToTop);
|
window.removeEventListener('scroll', this.scrollToTop);
|
||||||
@ -1115,9 +1175,8 @@
|
|||||||
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
||||||
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
||||||
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||||||
|
|
||||||
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
||||||
//console.log("当前是电脑打开")
|
console.log("当前是电脑打开")
|
||||||
this.stypechange=false;
|
this.stypechange=false;
|
||||||
//console.log(this.usertitle)
|
//console.log(this.usertitle)
|
||||||
|
|
||||||
@ -1133,7 +1192,7 @@
|
|||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
//console.log("当前是手机打开")
|
console.log("当前是手机打开")
|
||||||
this.showingBanners=this.banners.mobile;
|
this.showingBanners=this.banners.mobile;
|
||||||
this.stypechange=true;
|
this.stypechange=true;
|
||||||
this.onemao=true;
|
this.onemao=true;
|
||||||
@ -1150,8 +1209,6 @@
|
|||||||
|
|
||||||
ifadroind(item,index,order){
|
ifadroind(item,index,order){
|
||||||
//console.log(item,index,order);
|
//console.log(item,index,order);
|
||||||
|
|
||||||
|
|
||||||
var sUserAgent = navigator.userAgent.toLowerCase();
|
var sUserAgent = navigator.userAgent.toLowerCase();
|
||||||
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
||||||
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
||||||
@ -1226,7 +1283,7 @@
|
|||||||
this.dogshow=false;
|
this.dogshow=false;
|
||||||
this.catproduct=false;
|
this.catproduct=false;
|
||||||
}
|
}
|
||||||
if(item.title=='明星狗粮'){
|
if(item.title=='明星犬粮'){
|
||||||
this.onemao=false;
|
this.onemao=false;
|
||||||
this.twomao=false;
|
this.twomao=false;
|
||||||
this.threemao=false;
|
this.threemao=false;
|
||||||
@ -1248,6 +1305,30 @@
|
|||||||
let dogtop=document.querySelector('.oc-top');
|
let dogtop=document.querySelector('.oc-top');
|
||||||
//console.log(dogtop);
|
//console.log(dogtop);
|
||||||
//console.log(mingxin.offsetTop);
|
//console.log(mingxin.offsetTop);
|
||||||
|
|
||||||
|
let positionIdentifier=document.querySelectorAll('.ts-position-identifier');
|
||||||
|
let tmpTitle='';
|
||||||
|
let scrollToTop=0;
|
||||||
|
let _self=this;
|
||||||
|
let transition = 230;
|
||||||
|
positionIdentifier.forEach(function(ele,index){
|
||||||
|
tmpTitle = ele.getAttribute("data-rel");
|
||||||
|
if(item.title==tmpTitle)
|
||||||
|
{
|
||||||
|
if(_self.fixedHeader && item.title!='明星猫粮')
|
||||||
|
{
|
||||||
|
transition+=130;
|
||||||
|
}
|
||||||
|
scrollToTop = _self.heightToTop(positionIdentifier[index]) - transition;
|
||||||
|
//positionIdentifier[index].scrollIntoView(true);
|
||||||
|
window.scrollTo({
|
||||||
|
top:scrollToTop,
|
||||||
|
behavior:'smooth'
|
||||||
|
})
|
||||||
|
//document.body.scrollTop = oPos;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
/*
|
||||||
if(item.title=='犬湿粮'||item.title=='犬干粮'||item.title=='处方用粮'){
|
if(item.title=='犬湿粮'||item.title=='犬干粮'||item.title=='处方用粮'){
|
||||||
userindex=userindex-2
|
userindex=userindex-2
|
||||||
}else{
|
}else{
|
||||||
@ -1259,7 +1340,7 @@
|
|||||||
let catshiid=document.querySelectorAll('.selectionswitch');
|
let catshiid=document.querySelectorAll('.selectionswitch');
|
||||||
catshiid[userindex].scrollIntoView(true);
|
catshiid[userindex].scrollIntoView(true);
|
||||||
}
|
}
|
||||||
if(item.title=='明星狗粮')
|
if(item.title=='明星犬粮')
|
||||||
dogtop.scrollIntoView(true);
|
dogtop.scrollIntoView(true);
|
||||||
// if(item.title=="猫湿粮"){
|
// if(item.title=="猫湿粮"){
|
||||||
// this.catproduct=false;
|
// this.catproduct=false;
|
||||||
@ -1270,30 +1351,62 @@
|
|||||||
|
|
||||||
// }
|
// }
|
||||||
//console.log("当前是手机打开")
|
//console.log("当前是手机打开")
|
||||||
|
*/
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
userdog(item,index){
|
heightToTop(ele){
|
||||||
|
//ele为指定跳转到该位置的DOM节点
|
||||||
|
let root = document.body;
|
||||||
|
let height = 0;
|
||||||
|
do{
|
||||||
|
height += ele.offsetTop;
|
||||||
|
ele = ele.offsetParent;
|
||||||
|
}while( ele !== root )
|
||||||
|
return height;
|
||||||
|
},
|
||||||
|
userdogShi(){
|
||||||
|
this.activeIndex5=(this.activeIndex5?this.activeIndex5:0);
|
||||||
|
let apiDogSize=this.userdoglist[this.activeIndex5].title;
|
||||||
|
let apiDogFoodType=this.dogtype[this.quanshiCurIndex].title;
|
||||||
|
|
||||||
this.userstype=1;
|
this.userstype=1;
|
||||||
let petType={
|
let petType={
|
||||||
petType:1,
|
petType:1,
|
||||||
name:index,
|
categoryName:"皇家犬湿粮",
|
||||||
|
name:apiDogFoodType,
|
||||||
}
|
}
|
||||||
for(let i =0;i<this.userserachlist.length;i++){
|
for(let i =0;i<this.userserachlist.length;i++){
|
||||||
if(!this.userserachlist.includes(petType)){
|
if(!this.userserachlist.includes(petType)){
|
||||||
this.userserachlist.push(petType)
|
this.userserachlist.push(petType)
|
||||||
}W
|
|
||||||
}
|
}
|
||||||
this.dogmessage(this.userserachlist)
|
}
|
||||||
|
//TODO how to combine "apiName" here?
|
||||||
|
this.dogmessage(this.userserachlist,"Shi");
|
||||||
},
|
},
|
||||||
|
userdogGan(){
|
||||||
|
this.activeIndex6=(this.activeIndex6?this.activeIndex6:0);
|
||||||
|
let apiDogSize=this.userdoglist[this.activeIndex6].title;
|
||||||
|
let apiDogFoodType=this.dogtype[this.quanganCurIndex].title;
|
||||||
|
|
||||||
|
this.userstype=1;
|
||||||
|
let petType={
|
||||||
|
petType:1,
|
||||||
|
name:apiDogFoodType,
|
||||||
|
}
|
||||||
|
for(let i =0;i<this.userserachlist.length;i++){
|
||||||
|
if(!this.userserachlist.includes(petType)){
|
||||||
|
this.userserachlist.push(petType)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//TODO how to combine "apiName" here?
|
||||||
|
this.dogmessage(this.userserachlist,"Gan");
|
||||||
|
},
|
||||||
userlook(order){
|
userlook(order){
|
||||||
if(order==0){
|
if(order==0){
|
||||||
this.catshi=this.catlist;
|
this.catshi=this.catlist;
|
||||||
}
|
}
|
||||||
if(order==1){
|
if(order==1){
|
||||||
this.catgan=this.catlist;
|
this.catgan=this.catlist;
|
||||||
|
|
||||||
}else if(order==2){
|
}else if(order==2){
|
||||||
this.dogshi=this.doglist
|
this.dogshi=this.doglist
|
||||||
}
|
}
|
||||||
@ -1303,10 +1416,7 @@
|
|||||||
else if(order==4){
|
else if(order==4){
|
||||||
this.processinformation=this.chufanlist
|
this.processinformation=this.chufanlist
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
showmesg(){
|
showmesg(){
|
||||||
this.toTop();
|
this.toTop();
|
||||||
},
|
},
|
||||||
@ -1320,18 +1430,16 @@
|
|||||||
let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
|
let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
if((scrolltop-fixedCatbarSeperator.offsetTop)>0)
|
if((scrolltop-fixedCatbarSeperator.offsetTop)>0)
|
||||||
{
|
{
|
||||||
|
this.fixedHeader=false;
|
||||||
this.gotop = true
|
this.gotop = true
|
||||||
this.searchBar=false
|
this.searchBar=false
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
|
this.fixedHeader=true;
|
||||||
this.gotop = false;
|
this.gotop = false;
|
||||||
this.searchBar=true
|
this.searchBar=true
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
toTop() {
|
toTop() {
|
||||||
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
@ -1344,46 +1452,68 @@
|
|||||||
}, 10);
|
}, 10);
|
||||||
},
|
},
|
||||||
async courseId(item) {
|
async courseId(item) {
|
||||||
|
this.dataLoaded=false;
|
||||||
let data = await postCourseId(this.productCode,1,this.usermessage.data.id,this.usermessage.data.mobile,item.picFile,item.name,item.basePrice,item.specifications);
|
let data = await postCourseId(this.productCode,1,this.usermessage.data.id,this.usermessage.data.mobile,item.picFile,item.name,item.basePrice,item.specifications);
|
||||||
if(data){
|
if(data){
|
||||||
this.productlist=data;
|
this.productlist=data;
|
||||||
|
this.dataLoaded=true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//请求猫
|
//请求猫
|
||||||
async catmessage(stype) {
|
async catmessage(stype,dataType) {
|
||||||
|
this.dataLoaded=false;
|
||||||
let data=[];
|
let data=[];
|
||||||
if(stype==undefined||stype==null){
|
if(stype==undefined||stype==null){
|
||||||
data = await biaomessage(0);
|
data = await biaomessage(0,'',1,6);
|
||||||
}else{
|
}else{
|
||||||
data = await biaomessage(this.userserachlist);
|
data = await biaomessage(this.userserachlist,'',1,6);
|
||||||
}
|
}
|
||||||
if(data){
|
if(data){
|
||||||
this.catlist=data;
|
|
||||||
let userlist=[];
|
let userlist=[];
|
||||||
userlist=data.slice(0,6);
|
//userlist=data.slice(0,6);
|
||||||
this.catshi=userlist;
|
if(dataType)
|
||||||
this.catgan=userlist;
|
{
|
||||||
|
if(dataType=='Shi')
|
||||||
|
this.catshi=data;
|
||||||
|
else if(dataType=='Gan')
|
||||||
|
this.catgan=data;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.catlist=data;
|
||||||
|
//this.catgan=userlist;
|
||||||
|
//this.catshi=userlist;
|
||||||
|
}
|
||||||
|
this.dataLoaded=true;
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//请求犬
|
//请求犬
|
||||||
async dogmessage(stype) {
|
async dogmessage(stype,dataType) {
|
||||||
|
this.dataLoaded=false;
|
||||||
let data=[];
|
let data=[];
|
||||||
if(stype==undefined||stype==null){
|
if(stype==undefined||stype==null){
|
||||||
|
data = await biaomessage(1,'',1,6);
|
||||||
data = await biaomessage(1);
|
|
||||||
}else{
|
}else{
|
||||||
data = await biaomessage(this.userserachlist);
|
data = await biaomessage(this.userserachlist,'',1,6);
|
||||||
}
|
}
|
||||||
if(data){
|
if(data){
|
||||||
let userlist=[];
|
let userlist=[];
|
||||||
userlist=data.slice(0,6);
|
//userlist=data.slice(0,6);
|
||||||
|
if(dataType)
|
||||||
|
{
|
||||||
|
if(dataType=='Shi')
|
||||||
|
this.dogshi=data;
|
||||||
|
else if(dataType=='Gan')
|
||||||
|
this.doggan=data;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
this.doglist=data;
|
this.doglist=data;
|
||||||
this.doggan=userlist;
|
//this.doggan=userlist;
|
||||||
this.dogshi=userlist;
|
//this.dogshi=userlist;
|
||||||
|
}
|
||||||
|
this.dataLoaded=true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -1405,42 +1535,60 @@
|
|||||||
|
|
||||||
//请求处方量信息数据
|
//请求处方量信息数据
|
||||||
async userchufang() {
|
async userchufang() {
|
||||||
|
this.dataLoaded=false;
|
||||||
let list=[];
|
let list=[];
|
||||||
let data = await userque();
|
let data = await userque();
|
||||||
if(data){
|
if(data){
|
||||||
list=data.slice(0,6);
|
list=data.slice(0,6);
|
||||||
this.processinformation=list;
|
this.processinformation=list;
|
||||||
this.chufanlist=data;
|
this.chufanlist=data;
|
||||||
|
this.dataLoaded=true;
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//点击请求处方量标签信息数据
|
//点击请求处方量标签信息数据
|
||||||
async userquery(item) {
|
async userquery(item) {
|
||||||
|
this.dataLoaded=false;
|
||||||
let data = await userquery(item);
|
let data = await userquery(item);
|
||||||
if(data){
|
if(data){
|
||||||
this.processinformation=data;
|
this.processinformation=data;
|
||||||
|
this.dataLoaded=true;
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
//处方用粮筛选
|
//处方用粮筛选
|
||||||
userclick(item,index){
|
userclick(item,index){
|
||||||
this.userquery(index)
|
this.userquery(index)
|
||||||
},
|
},
|
||||||
//全价猫湿粮筛选
|
//全价猫干粮筛选
|
||||||
catclick(item,index){
|
catclickGan(){
|
||||||
this.userstype=0;
|
this.userstype=0;
|
||||||
|
this.maoganCurIndex=this.maoganCurIndex?this.maoganCurIndex:0;
|
||||||
|
let apiCatType=this.discoun[this.maoganCurIndex].title;
|
||||||
let petType={
|
let petType={
|
||||||
petType:0,
|
petType:0,
|
||||||
name:index,
|
name:apiCatType,
|
||||||
}
|
}
|
||||||
for(let i =0;i<this.userserachlist.length;i++){
|
for(let i =0;i<this.userserachlist.length;i++){
|
||||||
if(!this.userserachlist.includes(petType)){
|
if(!this.userserachlist.includes(petType)){
|
||||||
this.userserachlist.push(petType)
|
this.userserachlist.push(petType)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.catmessage(this.userserachlist)
|
this.catmessage(this.userserachlist,'Gan')
|
||||||
|
},
|
||||||
|
catclickShi(){
|
||||||
|
this.userstype=0;
|
||||||
|
this.maoshiCurIndex=this.maoshiCurIndex?this.maoshiCurIndex:0;
|
||||||
|
let apiCatType=this.discoun[this.maoshiCurIndex].title;
|
||||||
|
let petType={
|
||||||
|
petType:0,
|
||||||
|
categoryName:"皇家猫湿粮",
|
||||||
|
name:apiCatType,
|
||||||
|
}
|
||||||
|
for(let i =0;i<this.userserachlist.length;i++){
|
||||||
|
if(!this.userserachlist.includes(petType)){
|
||||||
|
this.userserachlist.push(petType)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.catmessage(this.userserachlist,'Shi')
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
@ -1455,7 +1603,6 @@
|
|||||||
if(item.title=='购物车'){
|
if(item.title=='购物车'){
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/myorder/userrecord",
|
path: "/myorder/userrecord",
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if(item.title=='营养专家'){
|
if(item.title=='营养专家'){
|
||||||
@ -1471,7 +1618,6 @@
|
|||||||
this.courseId(item)
|
this.courseId(item)
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/myorder/userrecord",
|
path: "/myorder/userrecord",
|
||||||
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -1481,16 +1627,14 @@
|
|||||||
//console.log(item.title);
|
//console.log(item.title);
|
||||||
this.ifadroind(item,index,this.useraindex)
|
this.ifadroind(item,index,this.useraindex)
|
||||||
// this.ifAdoid(item,index);
|
// this.ifAdoid(item,index);
|
||||||
|
|
||||||
},
|
},
|
||||||
quanshi(item,index){
|
quanshi(item,index){
|
||||||
//console.log(item,index);
|
this.activeIndex5=index;
|
||||||
this.activeIndex5=index
|
this.userdogShi();
|
||||||
//console.log(this.activeIndex5);
|
|
||||||
},
|
},
|
||||||
userdoghot(item,index){
|
userdoghot(item,index){
|
||||||
this.activeIndex6=index
|
this.activeIndex6=index;
|
||||||
|
this.userdogGan();
|
||||||
},
|
},
|
||||||
selectGo(item,index){
|
selectGo(item,index){
|
||||||
this.activeInde2=index;
|
this.activeInde2=index;
|
||||||
@ -1504,11 +1648,6 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@media screen and(min-width: 320px) and(max-width:768px){
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@import url("../assets/css/global.less");
|
@import url("../assets/css/global.less");
|
||||||
@import url("../assets/css/index.less");
|
@import url("../assets/css/index.less");
|
||||||
|
|
||||||
|
|||||||
@ -1,89 +1,83 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
<div class="rc-header">
|
<div class="rc-header">
|
||||||
<div class="rc-main">
|
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<tabs></tabs>
|
|
||||||
<div class="rc-commodity">
|
|
||||||
<div class="rc-commondi">
|
|
||||||
<img src="../../assets/image/rc-select.png" alt="" />
|
|
||||||
<span>商品</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rc-main">
|
||||||
|
<tabs></tabs>
|
||||||
|
<div class="cart-list">
|
||||||
|
<div class="header">
|
||||||
|
<div class="list-left">
|
||||||
|
<label class="check-label">
|
||||||
|
<input type="checkbox" v-model="checkAll" />
|
||||||
|
</label>
|
||||||
|
<span class="name">商品</span>
|
||||||
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li>单价</li>
|
<li>单价</li>
|
||||||
<li>数量</li>
|
<li>数量</li>
|
||||||
<li>操作</li>
|
<li>操作</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="header_ph">
|
||||||
<div class="rc-select">
|
<el-row>
|
||||||
<label>
|
<el-col :span="12">
|
||||||
<input type="checkbox" v-model="checkAll">
|
<div class="list-left">
|
||||||
全选
|
<label class="check-label">
|
||||||
|
<input type="checkbox" v-model="checkAll" />
|
||||||
</label>
|
</label>
|
||||||
|
<span class="name">全选</span>
|
||||||
<div class="select-right">
|
|
||||||
<img src="../../assets/image/userupdate.png" alt="" />
|
|
||||||
<span @click="useredit">编辑</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-col>
|
||||||
<div>
|
<el-col :span="12" class="tr">
|
||||||
<div v-for="(item, index) in goldmedal"
|
<span @click="editList()"
|
||||||
:key="index"
|
><i class="el-icon-edit"></i>{{ editState }}</span
|
||||||
class="rc-userdemand"
|
></el-col
|
||||||
|
|
||||||
>
|
>
|
||||||
<div class="rc-userdeman">
|
</el-row>
|
||||||
<label>
|
</div>
|
||||||
<input type="checkbox" v-model="item.checked">
|
<div class="list" v-for="(item, index) in cartData" :key="index">
|
||||||
|
<div class="list-left">
|
||||||
|
<label class="check-label">
|
||||||
|
<input type="checkbox" v-model="item.checked" />
|
||||||
</label>
|
</label>
|
||||||
|
<div class="product">
|
||||||
<!-- <img :src="item.image" /> -->
|
<div class="product-img">
|
||||||
<!-- <img :src="checkone?require('../../assets/image/rc-unselect.png'):require('../../assets/image/rc-select.png')" @click="userclick(checkone,index)"/> -->
|
<img :src="item.productImg" alt="" />
|
||||||
<img :src="item.productImg" alt="" class="re-message" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-userdem">
|
<div class="right">
|
||||||
<div class="rc-userdema">
|
<p class="product-title" v-text="item.productName"></p>
|
||||||
<span>{{ item.productName }}</span>
|
<p class="specifications">规格：{{ item.specifications }}</p>
|
||||||
<em>规格:{{ item.specifications }}</em>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-userd">
|
</div>
|
||||||
<i>￥{{ item.productPrice }}</i>
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li class="product-price">￥{{ item.productPrice }}</li>
|
||||||
|
<li>
|
||||||
<div class="rc-jia">
|
<div class="rc-jia">
|
||||||
<img src="../../assets/image/userjian.png" alt="" @click="sub(item.buyCount,index)"/>
|
<img
|
||||||
<strong> {{item.buyCount}} </strong>
|
src="../../assets/image/userjian.png"
|
||||||
<img src="../../assets/image/userjia.png" alt="" @click="plus(item.buyCount,index)" />
|
alt=""
|
||||||
|
@click="sub(item.buyCount, index)"
|
||||||
|
/>
|
||||||
|
<input type="text" v-model="item.buyCount" />
|
||||||
|
<img
|
||||||
|
src="../../assets/image/userjia.png"
|
||||||
|
alt=""
|
||||||
|
@click="plus(item.buyCount, index)"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<em @click="userdele(item,index)">删除</em>
|
</li>
|
||||||
</div>
|
<li class="del"><em @click="userdele(item)">删除</em></li>
|
||||||
</div>
|
</ul>
|
||||||
|
|
||||||
<div class="rc-footer">
|
|
||||||
<div class="rc-foote">
|
|
||||||
<div class="rc-shop">
|
|
||||||
<i>总计:</i>
|
|
||||||
<span>￥{{ sumPrice }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="rc-delete" @click="usejiesuan(item,index)">
|
|
||||||
<span>
|
|
||||||
{{ userdelete }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rc-footera">
|
<div class="rc-footera">
|
||||||
<div class="rc-foote">
|
<div class="rc-foote">
|
||||||
|
|
||||||
<div class="rc-shop">
|
<div class="rc-shop">
|
||||||
<label>
|
<label>
|
||||||
<input type="checkbox" v-model="checkAll">
|
<input type="checkbox" v-model="checkAll" />
|
||||||
全选
|
全选
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@ -97,9 +91,8 @@
|
|||||||
<em>共选择{{ sumlength }}件商品</em>
|
<em>共选择{{ sumlength }}件商品</em>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<strong @click="usejiesuan(item,index)" >{{mustpay}}</strong>
|
<strong @click="usejiesuan()">{{ mustpay }}</strong>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="rc-shop">
|
<!-- <div class="rc-shop">
|
||||||
@ -114,19 +107,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { List } from 'vant';
|
|
||||||
import Myheader from "~/components/header.vue";
|
import Myheader from "~/components/header.vue";
|
||||||
import tabs from "@/components/tabs.vue";
|
import tabs from "@/components/tabs.vue";
|
||||||
import instance from "@/config/request";
|
|
||||||
import { isexistCart, generateOrderWX, deleteCart } from "../../ajax/getData";
|
import { isexistCart, generateOrderWX, deleteCart } from "../../ajax/getData";
|
||||||
import accMul from "../../config/setDec.js"
|
|
||||||
export default {
|
export default {
|
||||||
middleware: 'metaTitle',
|
middleware: "metaTitle",
|
||||||
meta: {title: '购物车'},
|
meta: { title: "购物车" },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
ordersum: 1,
|
ordersum: 1,
|
||||||
@ -137,13 +126,49 @@ export default {
|
|||||||
ys1: true,
|
ys1: true,
|
||||||
ys2: true,
|
ys2: true,
|
||||||
userdelete: "结算",
|
userdelete: "结算",
|
||||||
orderprice:'￥199.00',
|
orderprice: "￥199.00",
|
||||||
mustpay:'立即结算',
|
mustpay: "立即结算",
|
||||||
totalMoney:'',
|
editState: "编辑",
|
||||||
|
dellist: [],
|
||||||
|
totalMoney: "",
|
||||||
allChecked: false,
|
allChecked: false,
|
||||||
userid: null,
|
userid: null,
|
||||||
|
cartData: [
|
||||||
|
// {
|
||||||
|
// buyCount: 3,
|
||||||
|
// id: 1,
|
||||||
|
// memberId: "1",
|
||||||
|
// productCode: "432434",
|
||||||
|
// productImg: require("../../assets/image/rc-select.png"),
|
||||||
|
// productName: "测试商品",
|
||||||
|
// productPrice: 399.0,
|
||||||
|
// specifications: "5KG",
|
||||||
|
// checked: false,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// buyCount: 1,
|
||||||
|
// id: 2,
|
||||||
|
// memberId: "2",
|
||||||
|
// productCode: "432434",
|
||||||
|
// productImg: require("../../assets/image/rc-select.png"),
|
||||||
|
// productName: "测试商品222",
|
||||||
|
// productPrice: "199.00",
|
||||||
|
// specifications: "5KG",
|
||||||
|
// checked: true,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// buyCount: 4,
|
||||||
|
// id: 3,
|
||||||
|
// memberId: "3",
|
||||||
|
// productCode: "432434",
|
||||||
|
// productImg: require("../../assets/image/rc-select.png"),
|
||||||
|
// productName: "测试商品3333",
|
||||||
|
// productPrice: 69.01,
|
||||||
|
// specifications: "5KG",
|
||||||
|
// checked: true,
|
||||||
|
// },
|
||||||
|
],
|
||||||
goldmedal: [
|
goldmedal: [
|
||||||
|
|
||||||
// {
|
// {
|
||||||
// ordernumber: "1111111111111111111",
|
// ordernumber: "1111111111111111111",
|
||||||
// orderstype: 1,
|
// orderstype: 1,
|
||||||
@ -156,18 +181,14 @@ export default {
|
|||||||
// buttontitle: "立即支付",
|
// buttontitle: "立即支付",
|
||||||
// checked:true,
|
// checked:true,
|
||||||
// userprice: "167",
|
// userprice: "167",
|
||||||
|
|
||||||
// catimage: require("../../assets/image/rc-win.png"),
|
// catimage: require("../../assets/image/rc-win.png"),
|
||||||
// },
|
// },
|
||||||
|
|
||||||
// {
|
// {
|
||||||
// ordernumber: "1111111111111111111",
|
// ordernumber: "1111111111111111111",
|
||||||
// sales_num:1,
|
// sales_num:1,
|
||||||
// usereat: "每年4次免积分产品试吃",
|
// usereat: "每年4次免积分产品试吃",
|
||||||
// image:require('../../assets/image/rc-select.png'),
|
// image:require('../../assets/image/rc-select.png'),
|
||||||
|
|
||||||
// checked:true,
|
// checked:true,
|
||||||
|
|
||||||
// ordernum: 0,
|
// ordernum: 0,
|
||||||
// buttontitle: "再次购买",
|
// buttontitle: "再次购买",
|
||||||
// catimage: require("../../assets/image/usereat.png"),
|
// catimage: require("../../assets/image/usereat.png"),
|
||||||
@ -178,31 +199,28 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log('---');
|
console.log("---");
|
||||||
this.goldmedal.forEach(item=>{
|
this.goldmedal.forEach((item) => {
|
||||||
item.checked = true;
|
item.checked = true;
|
||||||
})
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.carmessage();
|
this.carmessage();
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
Myheader,
|
Myheader,
|
||||||
tabs
|
tabs,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//请求猫
|
//请求猫
|
||||||
|
|
||||||
async carmessage() {
|
async carmessage() {
|
||||||
console.log(this.goldmedal);
|
|
||||||
let user = JSON.parse(localStorage.getItem("userInfo"));
|
let user = JSON.parse(localStorage.getItem("userInfo"));
|
||||||
console.log(user);
|
|
||||||
this.userid = user.data.id;
|
this.userid = user.data.id;
|
||||||
let data = await isexistCart(user.data.id);
|
let data = await isexistCart(user.data.id);
|
||||||
this.goldmedal=data;
|
this.cartData = data;
|
||||||
|
// this.goldmedal = data;
|
||||||
},
|
},
|
||||||
async userjie(list) {
|
async userjie(list) {
|
||||||
let user = JSON.parse(localStorage.getItem("userInfo"));
|
let user = JSON.parse(localStorage.getItem("userInfo"));
|
||||||
@ -211,39 +229,43 @@ export default {
|
|||||||
let data = await generateOrderWX(list);
|
let data = await generateOrderWX(list);
|
||||||
if (data) {
|
if (data) {
|
||||||
this.$message({
|
this.$message({
|
||||||
type: 'warning',
|
type: "warning",
|
||||||
message: data.msg
|
message: data.msg,
|
||||||
});
|
});
|
||||||
console.log(data);
|
console.log(data);
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/personal/settlement",
|
path: "/personal/settlement",
|
||||||
query: {
|
query: {
|
||||||
wxdata:data.data
|
wxdata: data.data,
|
||||||
},
|
},
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
console.log(data);
|
console.log(data);
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//删除购物车
|
//删除购物车
|
||||||
async deletsmessage(productCode) {
|
async deletsmessage(productCode) {
|
||||||
let user = JSON.parse(localStorage.getItem("userInfo"));
|
let user = JSON.parse(localStorage.getItem("userInfo"));
|
||||||
console.log(user);
|
|
||||||
this.userid = user.data.id;
|
this.userid = user.data.id;
|
||||||
let data = await deleteCart(user.data.id,productCode);
|
let data = await deleteCart(this.userid, productCode);
|
||||||
|
|
||||||
if (data) {
|
if (data) {
|
||||||
this.$message({
|
this.$message({
|
||||||
type: 'warning',
|
type: "warning",
|
||||||
message: data.msg
|
message: data.msg,
|
||||||
});
|
});
|
||||||
this.carmessage();
|
this.carmessage();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
editList() {
|
||||||
|
if (this.editState == "完成") {
|
||||||
|
this.mustpay = "立即结算";
|
||||||
|
this.editState = " 编辑";
|
||||||
|
} else {
|
||||||
|
this.mustpay = "删除";
|
||||||
|
this.editState = "完成";
|
||||||
|
}
|
||||||
|
},
|
||||||
// checkBox(){
|
// checkBox(){
|
||||||
|
|
||||||
// console.log(event.target.checked)
|
// console.log(event.target.checked)
|
||||||
@ -253,107 +275,113 @@ export default {
|
|||||||
// });
|
// });
|
||||||
// },
|
// },
|
||||||
|
|
||||||
// userdele(index){
|
userdele(item) {
|
||||||
|
let delform = [];
|
||||||
// this.goldmedal.splice(index,1);
|
if (item.length > 0) {
|
||||||
// },
|
delform = item;
|
||||||
|
} else {
|
||||||
|
delform = [item.productCode];
|
||||||
|
}
|
||||||
|
this.$confirm("确定删除", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "success",
|
||||||
|
callback: (action) => {
|
||||||
|
if (action === "confirm") {
|
||||||
|
this.deletsmessage(delform);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// this.$message({
|
||||||
|
// type: "warning",
|
||||||
|
// message: data.msg,
|
||||||
|
// });
|
||||||
|
},
|
||||||
plus(num, index) {
|
plus(num, index) {
|
||||||
console.log(index);
|
this.cartData[index].buyCount =
|
||||||
this.goldmedal[index].buyCount = parseInt(this.goldmedal[index].buyCount) + 1;
|
parseInt(this.cartData[index].buyCount) + 1;
|
||||||
},
|
},
|
||||||
// 数量减方法
|
// 数量减方法
|
||||||
sub(num, index) {
|
sub(num, index) {
|
||||||
if (parseInt(num) <= 1) {
|
if (parseInt(num) <= 1) {
|
||||||
this.goldmedal[index].buyCount = 1;
|
this.cartData[index].buyCount = 1;
|
||||||
|
} else {
|
||||||
|
this.cartData[index].buyCount =
|
||||||
|
parseInt(this.cartData[index].buyCount) - 1;
|
||||||
}
|
}
|
||||||
else{
|
|
||||||
this.goldmedal[index].buyCount = parseInt(this.goldmedal[index].buyCount) - 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 求总价
|
// 求总价
|
||||||
|
|
||||||
useredit(e) {
|
useredit(e) {
|
||||||
this.ys1 = !this.ys1
|
this.ys1 = !this.ys1;
|
||||||
if (this.ys1 == false) {
|
if (this.ys1 == false) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.userdelete='删除';
|
this.userdelete = "删除";
|
||||||
console.log(this.userdelete);
|
console.log(this.userdelete);
|
||||||
|
});
|
||||||
|
|
||||||
})
|
|
||||||
} else if (this.ys1 == true) {
|
} else if (this.ys1 == true) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.userdelete='结算';
|
this.userdelete = "结算";
|
||||||
|
|
||||||
console.log(this.userdelete);
|
console.log(this.userdelete);
|
||||||
|
});
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.userdelete == "删除") {
|
if (this.userdelete == "删除") {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
usejiesuan(item,index){
|
usejiesuan() {
|
||||||
|
// let procode = [];
|
||||||
|
// let list = [];
|
||||||
|
// let menulist = [];
|
||||||
|
// this.cartData.filter((item) => {
|
||||||
|
// if (item.checked) {
|
||||||
|
// list.push(item);
|
||||||
|
// console.log(item);
|
||||||
|
// procode.push(item.productCode);
|
||||||
|
// } else {
|
||||||
|
// list.splice(index, 1);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// let list = [];
|
||||||
|
// list = this.cartData.filter((item) => item.checked);
|
||||||
|
|
||||||
let procode=[];
|
// list.forEach((item) => {
|
||||||
|
// menulist.push({
|
||||||
|
// productName: item.productName,
|
||||||
|
// buyCount: item.buyCount,
|
||||||
|
// productId: item.productCode,
|
||||||
|
// payAmount: item.productPrice,
|
||||||
|
// memberId: item.memberId,
|
||||||
|
// phoneNumber: item.mobile,
|
||||||
|
// });
|
||||||
|
// });
|
||||||
let list = [];
|
let list = [];
|
||||||
let menulist=[];
|
list = this.cartData.filter((item) => item.checked);
|
||||||
this.goldmedal.filter(item=>{
|
if (list.length == 0) {
|
||||||
if(item.checked){
|
this.$message({
|
||||||
list.push(item);
|
type: "warning",
|
||||||
console.log(item);
|
message: "你还未选择商品",
|
||||||
procode.push(item.productCode)
|
});
|
||||||
|
return;
|
||||||
} else {
|
} else {
|
||||||
list.splice(index,1);
|
if (this.editState == "完成") {
|
||||||
}
|
let delList=[]
|
||||||
})
|
|
||||||
list=this.goldmedal.filter(item =>
|
|
||||||
item.checked
|
|
||||||
);
|
|
||||||
|
|
||||||
list.forEach(item=>{
|
list.forEach(item=>{
|
||||||
menulist.push({
|
delList.push(item.productCode)
|
||||||
productName:item.productName,
|
})
|
||||||
buyCount:item.buyCount,
|
this.userdele(delList);
|
||||||
productId: item.productCode,
|
|
||||||
payAmount: item.productPrice,
|
|
||||||
memberId:item.memberId,
|
|
||||||
phoneNumber:item.mobile
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if(this.ys1==false){
|
|
||||||
if(list.length==0){
|
|
||||||
|
|
||||||
this.$message({
|
|
||||||
type: 'warning',
|
|
||||||
message: '你还未选择商品'
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
} else {
|
} else {
|
||||||
this.deletsmessage(procode);
|
this.$router.push({
|
||||||
}
|
path: "/personal/settlement",
|
||||||
|
query: {
|
||||||
}else{
|
list: list,
|
||||||
if(list.length==0){
|
},
|
||||||
|
|
||||||
this.$message({
|
|
||||||
type: 'warning',
|
|
||||||
message: '你还未选择商品'
|
|
||||||
});
|
});
|
||||||
return;
|
|
||||||
}else{
|
|
||||||
this.userjie(menulist)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// list=[
|
// list=[
|
||||||
// {
|
// {
|
||||||
// "productName":"幼猫全价粮",
|
// "productName":"幼猫全价粮",
|
||||||
@ -378,10 +406,6 @@ plus(num,index){
|
|||||||
// .then((res) => {
|
// .then((res) => {
|
||||||
// console.log(res);
|
// console.log(res);
|
||||||
// });
|
// });
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// async userdelete(item) {
|
// async userdelete(item) {
|
||||||
@ -394,242 +418,43 @@ plus(num,index){
|
|||||||
checkAll: {
|
checkAll: {
|
||||||
// 设置值,当点击全选按钮的时候触发
|
// 设置值,当点击全选按钮的时候触发
|
||||||
set(v) {
|
set(v) {
|
||||||
this.goldmedal.forEach(item => {
|
this.cartData.forEach((item) => {
|
||||||
item.checked = v
|
item.checked = v;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 取值,当列表中的选择改变之后触发
|
// 取值,当列表中的选择改变之后触发
|
||||||
get() {
|
get() {
|
||||||
return this.goldmedal.length === this.goldmedal.filter(item => item.checked == true).length;
|
return (
|
||||||
|
this.cartData.length ===
|
||||||
|
this.cartData.filter((item) => item.checked == true).length
|
||||||
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// 总价计算
|
// 总价计算
|
||||||
sumPrice() {
|
sumPrice() {
|
||||||
return this.goldmedal
|
return this.cartData
|
||||||
.filter(item => item.checked)
|
.filter((item) => item.checked)
|
||||||
.reduce((pre, cur) => {
|
.reduce((pre, cur) => {
|
||||||
console.log(pre);
|
console.log(pre);
|
||||||
return pre + cur.buyCount * cur.productPrice;
|
return pre + cur.buyCount * cur.productPrice;
|
||||||
|
|
||||||
}, 0);
|
}, 0);
|
||||||
},
|
},
|
||||||
|
|
||||||
sumlength() {
|
sumlength() {
|
||||||
return this.goldmedal.filter(item => item.checked == true).length;
|
return this.cartData.filter((item) => item.checked == true).length;
|
||||||
}
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
// 手机端
|
.rc-footer {
|
||||||
@media screen and(min-width: 320px) and(max-width:768px) {
|
display: none;
|
||||||
.rc-header{
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.rc-footera {
|
.rc-footera {
|
||||||
display: none;
|
background: #f6f6f6;
|
||||||
}
|
|
||||||
.rc-footer {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.rc-foote {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
height: 80px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
.rc-shop {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #E1001A;
|
|
||||||
display: block;
|
|
||||||
margin-left: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-delete {
|
|
||||||
span {
|
|
||||||
width: 100px;
|
|
||||||
height: 48px;
|
|
||||||
background: #e2001a;
|
|
||||||
border-radius: 30px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-right: 40px;
|
|
||||||
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-header {
|
|
||||||
width: 100%;
|
|
||||||
.rc-main {
|
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
|
||||||
.rc-commodity{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rc-select {
|
|
||||||
border-bottom: 1px solid #d8d8d8;
|
|
||||||
height: 56px;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.select-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
img {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
display: block;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.select-right {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
img {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
display: block;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-userdemand {
|
|
||||||
width: 100%;
|
|
||||||
height: 180px;
|
|
||||||
border-bottom: 1px solid #d8d8d8;
|
|
||||||
display: flex;
|
|
||||||
.rc-userdeman {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.re-message {
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
display: block;
|
|
||||||
border: 1px solid #d8d8d8;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-userdem {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
margin-left: 8px;
|
|
||||||
justify-content: center;
|
|
||||||
span {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #e1001a;
|
|
||||||
display: block;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
em {
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 14px;
|
|
||||||
display: block;
|
|
||||||
margin-top: 8px;
|
|
||||||
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
.rc-userd {
|
|
||||||
em{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 8px;
|
|
||||||
i {
|
|
||||||
font-size: 18px;
|
|
||||||
font-style: normal;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
width: 74%;
|
|
||||||
color: #e1001a;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 23px;
|
|
||||||
height: 23px;
|
|
||||||
display: block;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
img:last-child {
|
|
||||||
width: 23px;
|
|
||||||
height: 23px;
|
|
||||||
display: block;
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
strong {
|
|
||||||
font-style: normal;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
list-style: none;
|
|
||||||
align-items: center;
|
|
||||||
width: 24px;
|
|
||||||
|
|
||||||
color: #666666;
|
|
||||||
height: 24px;
|
|
||||||
border: 1px solid #d7d7d7;
|
border: 1px solid #d7d7d7;
|
||||||
font-size: 12px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
.rc-jia{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// /* 最小768px最大1920 *pc端/
|
|
||||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
|
||||||
.rc-footer{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rc-footera {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.rc-foote {
|
.rc-foote {
|
||||||
width: 92%;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
|
||||||
height: 102px;
|
height: 102px;
|
||||||
@ -639,6 +464,7 @@ plus(num,index){
|
|||||||
.rc-shop {
|
.rc-shop {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-left: 24px;
|
||||||
img {
|
img {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
@ -680,7 +506,7 @@ display: block;
|
|||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #E1001A;
|
color: #e1001a;
|
||||||
}
|
}
|
||||||
em {
|
em {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -705,42 +531,92 @@ height: 48px;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.rc-header {
|
|
||||||
width: 100%;
|
|
||||||
.rc-main {
|
.rc-main {
|
||||||
width: 92%;
|
width: 92%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
.rc-commodity {
|
padding-top: 60px;
|
||||||
|
max-width: 1400px;
|
||||||
|
.cart-list {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid #d7d7d7;
|
border: 1px solid #d7d7d7;
|
||||||
border-radius: 3px 3px 0px 0px;
|
font-size: 16px;
|
||||||
background: #f6f6f6;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #666666;
|
color: #666666;
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
background: #f6f6f6;
|
||||||
|
border-radius: 3px 3px 0px 0px;
|
||||||
|
border-bottom: 1px solid #d7d7d7;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.rc-commondi {
|
}
|
||||||
display: flex;
|
.header_ph {
|
||||||
align-items: center;
|
display: none;
|
||||||
img {
|
}
|
||||||
|
.check-label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: 24px;
|
margin-left: 24px;
|
||||||
}
|
}
|
||||||
span {
|
.name {
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: 56px;
|
margin-left: 56px;
|
||||||
}
|
}
|
||||||
|
.list-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 80%;
|
width: 70%;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #d7d7d7;
|
||||||
|
padding: 15px 0;
|
||||||
|
.product-price {
|
||||||
|
color: #e1001a;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.product {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-left: 56px;
|
||||||
|
.product-title {
|
||||||
|
color: #e1001a;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-img {
|
||||||
|
margin-right: 10px;
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
img {
|
img {
|
||||||
width: 24px;
|
width: 100%;
|
||||||
height: 24px;
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-jia {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
img,
|
||||||
|
input {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
border: 1px solid #d7d7d7;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.rc-select {
|
.rc-select {
|
||||||
@ -828,7 +704,6 @@ height: 48px;
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 10%;
|
width: 10%;
|
||||||
|
|
||||||
}
|
}
|
||||||
.rc-userd {
|
.rc-userd {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -860,10 +735,10 @@ height: 48px;
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-bottom: 1px solid #E2001A;
|
border-bottom: 1px solid #e2001a;
|
||||||
display: block;
|
display: block;
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
color: #E1001A;
|
color: #e1001a;
|
||||||
}
|
}
|
||||||
strong {
|
strong {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -883,6 +758,66 @@ color: #E1001A;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//手机端
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.rc-main {
|
||||||
|
width: 100%;
|
||||||
|
.cart-list {
|
||||||
|
border: none;
|
||||||
|
.header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.header_ph {
|
||||||
|
display: block;
|
||||||
|
border-bottom: 2px solid #d8d8d8;
|
||||||
|
padding: 20px 10px 20px 0;
|
||||||
|
border-top: 5px solid #f6f6f6;
|
||||||
|
}
|
||||||
|
.check-label {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
display: block;
|
||||||
|
.product {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin-top: -32px;
|
||||||
|
margin-left: 128px;
|
||||||
|
width: 60%;
|
||||||
|
.del {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-footera {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
.rc-shop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.rc-delete {
|
||||||
|
margin-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
.rc-num {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
strong {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-message-box{
|
||||||
|
width: 300px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -2,11 +2,10 @@
|
|||||||
<div class="allmain">
|
<div class="allmain">
|
||||||
|
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<div class="online bold rc-md-down" id="fixed-catbar-seperator"></div>
|
|
||||||
<!-- <tabs></tabs> -->
|
<!-- <tabs></tabs> -->
|
||||||
<div class="rc-top"></div>
|
<div class="rc-top"></div>
|
||||||
<div class="rc-usermain">
|
<div class="rc-usermain">
|
||||||
<div class="online bold"></div>
|
|
||||||
<div class="rc">
|
<div class="rc">
|
||||||
<span
|
<span
|
||||||
v-for="(item, index) in discountlist"
|
v-for="(item, index) in discountlist"
|
||||||
@ -28,14 +27,14 @@
|
|||||||
>
|
>
|
||||||
<img :src="userimage" alt="" />
|
<img :src="userimage" alt="" />
|
||||||
<div class="rc-contair">
|
<div class="rc-contair">
|
||||||
<div class="rc-left" ref="userleft" id="userleft">
|
<div class="rc-left" ref="userleft" id="userleft" :style='usercolor'>
|
||||||
<div>
|
<div>
|
||||||
<i>￥</i><span>{{ item.couponAmount }}</span>
|
<i>￥</i><span>{{item.couponTypeId=='4'?parseInt(((item.discount) *10))+ '折':item.couponAmount}}</span>
|
||||||
</div>
|
</div>
|
||||||
<strong>{{ item.couponName }}</strong>
|
<strong>{{ item.couponName }}</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-right">
|
<div class="rc-right">
|
||||||
<i>
|
<i :style='usercolor'>
|
||||||
{{ item.couponName }}
|
{{ item.couponName }}
|
||||||
</i>
|
</i>
|
||||||
<div class="rc-userfont">
|
<div class="rc-userfont">
|
||||||
@ -71,6 +70,7 @@ export default {
|
|||||||
userload: true,
|
userload: true,
|
||||||
pastdue: false,
|
pastdue: false,
|
||||||
unused: false,
|
unused: false,
|
||||||
|
usercolor:{color:'#e1001a'},
|
||||||
usermessage:[],
|
usermessage:[],
|
||||||
userstates:0,
|
userstates:0,
|
||||||
userimage: require("../../assets/image/unused.png"),
|
userimage: require("../../assets/image/unused.png"),
|
||||||
@ -196,6 +196,10 @@ export default {
|
|||||||
if(data){
|
if(data){
|
||||||
console.log(data);
|
console.log(data);
|
||||||
this.newlist=data.data;
|
this.newlist=data.data;
|
||||||
|
this.newlist.forEach(element=>{
|
||||||
|
element.validFrom=element.validFrom.slice(0,10)
|
||||||
|
element.validTo=element.validTo.slice(0,10)
|
||||||
|
})
|
||||||
console.log(this.newlist);
|
console.log(this.newlist);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -207,21 +211,26 @@ export default {
|
|||||||
this.pastdue = true;
|
this.pastdue = true;
|
||||||
this.userimage = require("../../assets/image/hasused.png");
|
this.userimage = require("../../assets/image/hasused.png");
|
||||||
this.userstates=1
|
this.userstates=1
|
||||||
this.userdraw(this.usermessage.data.mobile,0)
|
console.log(this.$refs.userleft);
|
||||||
|
this.usercolor={color:'white'}
|
||||||
|
|
||||||
|
|
||||||
|
this.userdraw(this.usermessage.data.mobile,1)
|
||||||
}
|
}
|
||||||
if (this.activeIndex == 0) {
|
if (this.activeIndex == 0) {
|
||||||
this.userload = true;
|
this.userload = true;
|
||||||
this.pastdue = false;
|
this.pastdue = false;
|
||||||
this.userdraw(this.usermessage.data.mobile,0)
|
this.userdraw(this.usermessage.data.mobile,0)
|
||||||
|
this.usercolor={color:'#e1001a'}
|
||||||
this.userstates=0
|
this.userstates=0
|
||||||
this.userimage = require("../../assets/image/unused.png");
|
this.userimage = require("../../assets/image/unused.png");
|
||||||
}
|
}
|
||||||
if (this.activeIndex == 2) {
|
if (this.activeIndex == 2) {
|
||||||
this.userload = false;
|
this.userload = false;
|
||||||
this.pastdue = true;
|
this.pastdue = true;
|
||||||
this.userdraw(this.usermessage.data.mobile,0)
|
this.userdraw(this.usermessage.data.mobile,2)
|
||||||
this.userstates=2
|
this.userstates=2
|
||||||
|
this.usercolor={color:'white'}
|
||||||
this.userimage = require("../../assets/image/expired.png");
|
this.userimage = require("../../assets/image/expired.png");
|
||||||
}
|
}
|
||||||
console.log(index);
|
console.log(index);
|
||||||
@ -242,6 +251,18 @@ export default {
|
|||||||
// }
|
// }
|
||||||
// dis_livchat(option);
|
// dis_livchat(option);
|
||||||
// }
|
// }
|
||||||
|
},
|
||||||
|
|
||||||
|
directives: {
|
||||||
|
'color': {
|
||||||
|
bind: function(el, binding){
|
||||||
|
el.style.color = binding.value
|
||||||
|
},
|
||||||
|
inserted: function(el){
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if(this.usermessage!=='' ||this.usermessage.data!==undefined){
|
if(this.usermessage!=='' ||this.usermessage.data!==undefined){
|
||||||
|
|||||||
@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<div class="rc-top"></div>
|
|
||||||
<div class="rc-main rc-layout-container rc-max-width--lg">
|
|
||||||
<div class="rc-usermain ">
|
<div class="rc-usermain ">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item,index) in userrecord" :key="index">
|
<li v-for="(item,index) in userrecord" :key="index">
|
||||||
@ -10,23 +9,29 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ol>
|
<ol>
|
||||||
|
|
||||||
<li v-for="(item,index) in usermessage" :key="index">
|
<li v-for="(item,index) in usermessage" :key="index">
|
||||||
<span>{{item.startDate}}</span>
|
<span>{{item.startDate}}</span>
|
||||||
<em>{{item.changeValue}}</em>
|
<em>{{item.changeValue}}</em>
|
||||||
<i>{{item.remark}}</i>
|
<i>{{item.remark}}</i>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="rc-button">
|
||||||
|
<div class="rc-order">
|
||||||
|
<span>积分兑换</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<Myfooter v-on:litentop='showmesg'></Myfooter>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Myheader from '~/components/header.vue'
|
import Myheader from '~/components/header.vue'
|
||||||
import Myfooter from '~/components/rc-footer.vue'
|
|
||||||
import { memberAccount } from "../../ajax/getData";
|
import { memberAccount } from "../../ajax/getData";
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data(){
|
||||||
@ -103,7 +108,6 @@ export default {
|
|||||||
},
|
},
|
||||||
components:{
|
components:{
|
||||||
Myheader,
|
Myheader,
|
||||||
Myfooter
|
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -111,4 +115,6 @@ export default {
|
|||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url("../../assets/css/integral.less");
|
@import url("../../assets/css/integral.less");
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
|
<!-- <tabs></tabs> -->
|
||||||
<div class="rc-top"></div>
|
<div class="rc-top"></div>
|
||||||
<tabs></tabs>
|
|
||||||
<div class="rc-layout-container rc-one-column rc-full-width ts-mypersonal">
|
<div class="rc-layout-container rc-one-column rc-full-width ts-mypersonal">
|
||||||
<div class="rc-column">
|
<div class="rc-column">
|
||||||
<!-- <div class="rc-title">
|
<!-- <div class="rc-title">
|
||||||
@ -47,8 +47,10 @@
|
|||||||
<div class="rc-cordd">
|
<div class="rc-cordd">
|
||||||
<span>距离升级还差:</span> <span class="lackOfPoint">{{ rcvalue }}</span>
|
<span>距离升级还差:</span> <span class="lackOfPoint">{{ rcvalue }}</span>
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<div class="ts-point-tag rc-md-up"></div>
|
<div class="ts-point-tag rc-md-up">0</div>
|
||||||
<div class="r-block" ref="userblock"></div>
|
<div class="r-block" ref="userblock"></div>
|
||||||
|
<!-- <el-slider v-model="value" range show-stops :max="10"> </el-slider> -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-value">
|
<div class="rc-value">
|
||||||
<span>0</span>
|
<span>0</span>
|
||||||
@ -202,7 +204,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
Myheader,
|
Myheader,
|
||||||
MyFooter,
|
MyFooter,
|
||||||
tabs,
|
tabs
|
||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
|
|
||||||
@ -313,7 +315,7 @@ obligation(item,index){
|
|||||||
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||||||
|
|
||||||
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
||||||
//console.log("当前是电脑打开")
|
console.log("当前是电脑打开")
|
||||||
if(this.userlog==true){
|
if(this.userlog==true){
|
||||||
this.usermessage='关注皇家爱宠荟，修改个人资料',
|
this.usermessage='关注皇家爱宠荟，修改个人资料',
|
||||||
this.dialogInfo1=true;
|
this.dialogInfo1=true;
|
||||||
@ -323,7 +325,7 @@ obligation(item,index){
|
|||||||
}
|
}
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
//console.log("当前是手机打开")
|
console.log("当前是手机打开")
|
||||||
this.dialogInfo1=false;
|
this.dialogInfo1=false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -343,7 +345,8 @@ obligation(item,index){
|
|||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: `/useraddress/openaddress/`
|
path: `/useraddress/openaddress/`
|
||||||
})
|
})
|
||||||
//console.log('这是地址的跳转');
|
console.log('这是地址的跳转');
|
||||||
|
|
||||||
}
|
}
|
||||||
if(index==0){
|
if(index==0){
|
||||||
this.userlog=true
|
this.userlog=true
|
||||||
@ -368,18 +371,20 @@ obligation(item,index){
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
//console.log(this.islogin)
|
console.log(this.islogin)
|
||||||
//console.log(this.userid);
|
console.log(this.userid);
|
||||||
let userwidth=0;
|
let userwidth=0;
|
||||||
this.ifadroind();
|
this.ifadroind();
|
||||||
let user= JSON.parse(localStorage.getItem("userInfo"));
|
let user= JSON.parse(localStorage.getItem("userInfo"));
|
||||||
//console.log(user)
|
console.log(user)
|
||||||
if(user!==null){
|
if(user!==null){
|
||||||
//console.log('11')
|
console.log('11')
|
||||||
this.userid=user.data;
|
this.userid=user.data;
|
||||||
console.log(this.userid);
|
console.log(this.userid);
|
||||||
this.usertitle=this.userid.memberName;
|
this.usertitle=this.userid.memberName;
|
||||||
|
|
||||||
this.rcrcord=this.userid.availiblePoint;
|
this.rcrcord=this.userid.availiblePoint;
|
||||||
|
|
||||||
if(this.userid.memberLevel==1){
|
if(this.userid.memberLevel==1){
|
||||||
let userlength=this.userid.availiblePoint.toString().length;
|
let userlength=this.userid.availiblePoint.toString().length;
|
||||||
this.userimage=require('../../assets/image/rc-new.png');
|
this.userimage=require('../../assets/image/rc-new.png');
|
||||||
@ -388,7 +393,7 @@ obligation(item,index){
|
|||||||
this.rcvalue=this.uservalue-this.userid.availiblePoint; //新手总积分减去本身的积分
|
this.rcvalue=this.uservalue-this.userid.availiblePoint; //新手总积分减去本身的积分
|
||||||
if(userlength==1||userlength==2||userlength==3||userlength==4){
|
if(userlength==1||userlength==2||userlength==3||userlength==4){
|
||||||
userwidth=this.userid.availiblePoint/100
|
userwidth=this.userid.availiblePoint/100
|
||||||
//console.log(userwidth);
|
console.log(userwidth);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if(this.userid.memberLevel==2){
|
else if(this.userid.memberLevel==2){
|
||||||
@ -403,7 +408,7 @@ obligation(item,index){
|
|||||||
this.usrnewlist=this.goldmedal;
|
this.usrnewlist=this.goldmedal;
|
||||||
userwidth=100
|
userwidth=100
|
||||||
}
|
}
|
||||||
this.$refs.userblock.style.width=userwidth+'%'
|
this.$refs.userblock.style.width=userwidth+'%';
|
||||||
let tagEle=document.querySelector('.ts-point-tag');
|
let tagEle=document.querySelector('.ts-point-tag');
|
||||||
if(tagEle){
|
if(tagEle){
|
||||||
tagEle.innerText=this.userid.availiblePoint;
|
tagEle.innerText=this.userid.availiblePoint;
|
||||||
@ -413,6 +418,7 @@ obligation(item,index){
|
|||||||
tagEle.style.left=tagEleLeft+"%";
|
tagEle.style.left=tagEleLeft+"%";
|
||||||
}
|
}
|
||||||
} else{
|
} else{
|
||||||
|
console.log('---');
|
||||||
this.userid=[];
|
this.userid=[];
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -420,6 +426,8 @@ obligation(item,index){
|
|||||||
console.log(this.userid)
|
console.log(this.userid)
|
||||||
this.islogin=true;
|
this.islogin=true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
414
rc-busness/pages/personal/settlement.less
Normal file
414
rc-busness/pages/personal/settlement.less
Normal file
@ -0,0 +1,414 @@
|
|||||||
|
ul li ol li em strong i {
|
||||||
|
list-style: none;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.settlement {
|
||||||
|
padding-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.rc-main {
|
||||||
|
width: 92%;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 1400px;
|
||||||
|
|
||||||
|
.rc-userbottomm {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-border {
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid #d7d7d7;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-receiving {
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-style: normal;
|
||||||
|
color: #e1001a;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
display: block;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.delivery {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 140px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.viewdetails {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #444444;
|
||||||
|
font-size: 18px;
|
||||||
|
display: block;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 8px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.to-delivery {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
// margin-left: 16px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
margin-left: 8px;
|
||||||
|
display: block;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bo-delivery {
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666666;
|
||||||
|
display: block;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-list {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.mypersonal {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid #808285;
|
||||||
|
height: 118px;
|
||||||
|
width: 320px;
|
||||||
|
padding: 15px;
|
||||||
|
color: #333333;
|
||||||
|
margin: 20px 40px 20px 0;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border: 1px solid #E2001A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 8px;
|
||||||
|
display: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.edit {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-delivery {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
margin-left: 3px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
margin-left: 3px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.per-delivery {
|
||||||
|
span {
|
||||||
|
color: #666666;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.rc-usermain {
|
||||||
|
display: flex;
|
||||||
|
padding: 20px 0;
|
||||||
|
|
||||||
|
.rc-image {
|
||||||
|
border: 1px solid #d8d8d8;
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-right {
|
||||||
|
.rc-usercenter {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
h3,
|
||||||
|
.price {
|
||||||
|
font-style: normal;
|
||||||
|
display: block;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 17px;
|
||||||
|
color: #e1001a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-userright {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-userbottom {
|
||||||
|
display: flex;
|
||||||
|
width: 60%;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.price {
|
||||||
|
font-style: normal;
|
||||||
|
color: #e1001a;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-merchandise {
|
||||||
|
|
||||||
|
padding: 15px 0;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
content: '';
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
width: 25%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 40px;
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
font-style: normal;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li .red {
|
||||||
|
color: #e1001a;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-payment {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 80px;
|
||||||
|
|
||||||
|
.u-trackingnumber {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 8px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
color: #666666;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
font-style: normal;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-foot {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.rc-foo {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: self-end;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
color: #333333;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-style: normal;
|
||||||
|
color: #e1001a;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
width: 164px;
|
||||||
|
margin-top: 36px;
|
||||||
|
background: #e2001a;
|
||||||
|
line-height: 48px;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
height: 48px;
|
||||||
|
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.diallog_width{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 440px;
|
||||||
|
}
|
||||||
|
.el-dialog{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
//手机端
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
.diallog_width{
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.rc-main {
|
||||||
|
.address-list {
|
||||||
|
display: contents;
|
||||||
|
|
||||||
|
.mypersonal {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-usermain {
|
||||||
|
.rc-right { display: table}
|
||||||
|
}
|
||||||
|
.rc-merchandise{
|
||||||
|
padding: 15px 0 120px;
|
||||||
|
ul{
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-foot{
|
||||||
|
.rc-foo{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: self-end;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<div class="rc-top"></div>
|
<div class="rc-top"></div>
|
||||||
<div class="rc-full-width rc-layout-container">
|
<div class="rc-header">
|
||||||
<div class="rc-main">
|
<div class="rc-main">
|
||||||
<div class="rc-headera">
|
<div class="rc-headera">
|
||||||
<span
|
<span
|
||||||
@ -127,30 +127,18 @@ export default {
|
|||||||
buttontitle:'立即支付',
|
buttontitle:'立即支付',
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
catimage: require("../../assets/image/rc-win.png"),
|
catimage: require("../../assets/image/rc-win.png"),
|
||||||
orderDetailList:{
|
|
||||||
userlist:{
|
|
||||||
num:10,
|
|
||||||
pcs:10,
|
|
||||||
ecprice:167
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
ordernumber: "1111111111111111111",
|
ordernumber: "1111111111111111111",
|
||||||
|
|
||||||
usereat: "每年4次免积分产品试吃",
|
usereat: "每年4次免积分产品试吃",
|
||||||
ordernum: 0,
|
ordernum: 0,
|
||||||
buttontitle:'再次购买',
|
buttontitle:'再次购买',
|
||||||
catimage: require("../../assets/image/usereat.png"),
|
catimage: require("../../assets/image/usereat.png"),
|
||||||
orderstype: 2,
|
orderstype: 2,
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
orderDetailList:{
|
|
||||||
userlist:{
|
|
||||||
num:10,
|
|
||||||
pcs:10,
|
|
||||||
ecprice:167
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
ordernumber: "1111111111111111111",
|
ordernumber: "1111111111111111111",
|
||||||
@ -160,13 +148,6 @@ export default {
|
|||||||
catimage: require("../../assets/image/usercar.png"),
|
catimage: require("../../assets/image/usercar.png"),
|
||||||
orderstype: 3,
|
orderstype: 3,
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
orderDetailList:{
|
|
||||||
userlist:{
|
|
||||||
num:10,
|
|
||||||
pcs:10,
|
|
||||||
ecprice:167
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
ordernumber: "1111111111111111111",
|
ordernumber: "1111111111111111111",
|
||||||
@ -183,13 +164,6 @@ export default {
|
|||||||
catimage: require("../../assets/image/consult.png"),
|
catimage: require("../../assets/image/consult.png"),
|
||||||
orderstype: 2,
|
orderstype: 2,
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
orderDetailList:{
|
|
||||||
userlist:{
|
|
||||||
num:10,
|
|
||||||
pcs:10,
|
|
||||||
ecprice:167
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
ordernumber: "1111111111111111111",
|
ordernumber: "1111111111111111111",
|
||||||
@ -198,13 +172,6 @@ export default {
|
|||||||
catimage: require("../../assets/image/rc-book.png"),
|
catimage: require("../../assets/image/rc-book.png"),
|
||||||
orderstype: 3,
|
orderstype: 3,
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
orderDetailList:{
|
|
||||||
userlist:{
|
|
||||||
num:10,
|
|
||||||
pcs:10,
|
|
||||||
ecprice:100
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
ordernumber: "1111111111111111111",
|
ordernumber: "1111111111111111111",
|
||||||
@ -213,13 +180,6 @@ export default {
|
|||||||
catimage: require("../../assets/image/userself.png"),
|
catimage: require("../../assets/image/userself.png"),
|
||||||
orderstype: 3,
|
orderstype: 3,
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
orderDetailList:{
|
|
||||||
userlist:{
|
|
||||||
num:10,
|
|
||||||
pcs:10,
|
|
||||||
ecprice:100
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
usereat: "每年积分兑换1次价值288元的免费体检及100元医院绝育券",
|
usereat: "每年积分兑换1次价值288元的免费体检及100元医院绝育券",
|
||||||
@ -227,13 +187,6 @@ export default {
|
|||||||
catimage: require("../../assets/image/rc-health.png"),
|
catimage: require("../../assets/image/rc-health.png"),
|
||||||
orderstype: 3,
|
orderstype: 3,
|
||||||
userprice: "167.00",
|
userprice: "167.00",
|
||||||
orderDetailList:{
|
|
||||||
userlist:{
|
|
||||||
num:10,
|
|
||||||
pcs:10,
|
|
||||||
ecprice:100
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
@ -243,6 +196,7 @@ export default {
|
|||||||
let user= JSON.parse(localStorage.getItem("userInfo"));
|
let user= JSON.parse(localStorage.getItem("userInfo"));
|
||||||
this.userdata=user;
|
this.userdata=user;
|
||||||
let stype=this.$route.query.stype
|
let stype=this.$route.query.stype
|
||||||
|
|
||||||
if(user=='' ||user==null){
|
if(user=='' ||user==null){
|
||||||
this.$message({
|
this.$message({
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
@ -252,6 +206,8 @@ export default {
|
|||||||
}else{
|
}else{
|
||||||
this.indet(user.data.mobile,stype);
|
this.indet(user.data.mobile,stype);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Myheader,
|
Myheader,
|
||||||
@ -260,12 +216,13 @@ export default {
|
|||||||
async indet(mobile,stype){
|
async indet(mobile,stype){
|
||||||
let data=await userindent(mobile,);
|
let data=await userindent(mobile,);
|
||||||
this.activeIndex=stype;
|
this.activeIndex=stype;
|
||||||
//this.goldmedal=data;
|
this.goldmedal=data;
|
||||||
let list=[];
|
let list=[];
|
||||||
let fahuolist=[];
|
let fahuolist=[];
|
||||||
console.log(this.goldmedal);
|
console.log(this.goldmedal);
|
||||||
for(let i=0;i<this.goldmedal.length;i++){
|
for(let i=0;i<this.goldmedal.length;i++){
|
||||||
list.push(this.goldmedal[i].orderDetailList);
|
list.push(this.goldmedal[i].orderDetailList);
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -280,12 +237,14 @@ export default {
|
|||||||
});
|
});
|
||||||
this.indet(this.userdata.data.mobile);
|
this.indet(this.userdata.data.mobile);
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
userpay(item,index){
|
userpay(item,index){
|
||||||
console.log(item);
|
console.log(item);
|
||||||
if(item.status==0){
|
if(item.status==0){
|
||||||
this.canceldanhao(item.orderNumber);
|
this.canceldanhao(item.orderNumber);
|
||||||
|
|
||||||
}
|
}
|
||||||
console.log(item.buttontitle);
|
console.log(item.buttontitle);
|
||||||
if(item.buttontitle=='立即支付'){
|
if(item.buttontitle=='立即支付'){
|
||||||
@ -303,6 +262,8 @@ export default {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
selectGoods(item, index) {
|
selectGoods(item, index) {
|
||||||
this.activeIndex = index;
|
this.activeIndex = index;
|
||||||
@ -339,6 +300,360 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import url("../../assets/css/global.less");
|
|
||||||
@import url("../../assets/css/useraddress.less");
|
// 手机端
|
||||||
|
@media screen and(min-width: 320px) and(max-width:768px) {
|
||||||
|
.active {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e2001a;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.unactive {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #444444;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.rc-header {
|
||||||
|
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
.rc-main {
|
||||||
|
width: 92%;
|
||||||
|
margin: 0 auto;
|
||||||
|
.rc-usermaina{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.rc-headera {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 64px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.rc-userheader{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-center {
|
||||||
|
width: 100%;
|
||||||
|
height: 245px;
|
||||||
|
margin-top: 8px;
|
||||||
|
.rc-usermain {
|
||||||
|
.pc-bottom{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
.rc-image {
|
||||||
|
border: 1px solid #D8D8D8;
|
||||||
|
margin-top: 17px;
|
||||||
|
;
|
||||||
|
img {
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-right {
|
||||||
|
|
||||||
|
.rc-userbottomm{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 16px;
|
||||||
|
justify-content: center;
|
||||||
|
em
|
||||||
|
{
|
||||||
|
font-style: normal;
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
color: #E1001A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-userright {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 14px;
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-userbottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 8px;
|
||||||
|
span{
|
||||||
|
color: #666666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-style: normal;
|
||||||
|
color: #E1001A;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
width: 130px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
color: #e2001a;
|
||||||
|
height: 40px;
|
||||||
|
border: 2px solid #e2001a;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
span:last-child{
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-title {
|
||||||
|
height: 52px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #d8d8d8;
|
||||||
|
justify-content: space-between;
|
||||||
|
span{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999999;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
em{
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.rc-usertitle strong{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// /* 最小768px最大1920 *pc端/
|
||||||
|
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
||||||
|
.active {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #e2001a;
|
||||||
|
cursor: pointer;
|
||||||
|
// margin-left: 40px;
|
||||||
|
}
|
||||||
|
.unactive {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #444444;
|
||||||
|
cursor: pointer;
|
||||||
|
// margin-left: 80px;
|
||||||
|
}
|
||||||
|
.rc-header {
|
||||||
|
.rc-main {
|
||||||
|
width: 92%;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.rc-headera {
|
||||||
|
display: flex;
|
||||||
|
height: 64px;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid #D7D7D7;
|
||||||
|
border-radius: 3px 3px 0px 0px;
|
||||||
|
font-size: 18px;
|
||||||
|
span:first-child{
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
margin-left: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-userheader{
|
||||||
|
width: 100%;
|
||||||
|
height: 64px;
|
||||||
|
background: #F6F6F6;
|
||||||
|
border: 1px solid #D7D7D7;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 18px;
|
||||||
|
span:first-child{
|
||||||
|
margin-left: 173px;
|
||||||
|
}
|
||||||
|
span:last-child{
|
||||||
|
margin-right: 87px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-center {
|
||||||
|
width: 100%;
|
||||||
|
height: 220px;
|
||||||
|
border: 1px solid #D7D7D7;
|
||||||
|
.rc-usermain {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 164px;
|
||||||
|
.rc-usercenter{
|
||||||
|
width: 25%;
|
||||||
|
em{
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-image {
|
||||||
|
border: 1px solid #D8D8D8;
|
||||||
|
margin-left: 40px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 96px;
|
||||||
|
height: 96px;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-right {
|
||||||
|
.rc-userbottom{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 16px;
|
||||||
|
|
||||||
|
em
|
||||||
|
{
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 18px;
|
||||||
|
|
||||||
|
color: #E1001A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-userright {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #666666;
|
||||||
|
font-size: 16px;
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rc-userbottomm {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 58%;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #E1001A;
|
||||||
|
font-weight: bold;
|
||||||
|
i{
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 40px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
width: 130px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
color: #e2001a;
|
||||||
|
height: 40px;
|
||||||
|
border: 2px solid #e2001a;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
span:last-child{
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-bottom {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rc-title {
|
||||||
|
height: 55px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #d8d8d8;
|
||||||
|
justify-content: space-between;
|
||||||
|
span{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
strong{
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #444444;
|
||||||
|
}
|
||||||
|
em{
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-left: 40px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.rc-usertitle{
|
||||||
|
margin-right: 73px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
em{
|
||||||
|
display: block;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,578 +1,320 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="page_modules">
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
<div class="rc-main">
|
<div class="cont_modules">
|
||||||
<div class="online" style="height:3px;width:93%;margin:0 auto;background:#DDDDDD;margin-top:0.23rem"></div>
|
<tabs></tabs>
|
||||||
<div class="rc-hearder">
|
<el-row class="order_info">
|
||||||
<div class="rc-userpay">
|
<el-col :span="6" class="ph_hidden">
|
||||||
<div class="paysucess">
|
<ul class="li_inline">
|
||||||
<span>订单提交成功等待付款</span>
|
<li class="sucess_img">
|
||||||
|
<img src="../../assets/image/usersucess.png" alt="" />
|
||||||
|
</li>
|
||||||
|
<li class="ready">
|
||||||
|
<p>订单提交成功</p>
|
||||||
|
<p>等待付款</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="ph_hidden"> </el-col>
|
||||||
|
<el-col :span="6" class="ready_right">
|
||||||
|
<div class="inline_right">
|
||||||
|
<p>付款金额:</p>
|
||||||
|
<p class="price">{{ info.userprice }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-all">
|
<div class="inline_right">
|
||||||
<div class="rc-payprice">
|
<p>收货信息:</p>
|
||||||
<span>付款金额:</span>
|
<p>{{ info.userinformation }}</p>
|
||||||
<i>{{ userprice }}</i>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-receiving">
|
</el-col>
|
||||||
<span>收货信息:</span>
|
</el-row>
|
||||||
<i>{{ userinformation }}</i>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="rc_contline"></div>
|
||||||
|
<div class="cont_modules">
|
||||||
|
<div class="pay_title color_red">请选择支付方式</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
|
<div class="rc_contline"></div>
|
||||||
<div class="rc-usermaina">
|
<div class="cont_modules">
|
||||||
<div class="rc-title" id="qrcode" ref="qrcode" >
|
<div class="pay_list">
|
||||||
</div>
|
<ul>
|
||||||
</div>
|
<li
|
||||||
|
class="pay_item"
|
||||||
</div>
|
|
||||||
<div class="rc-paystype">
|
|
||||||
<span>请选择支付方式</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
|
|
||||||
<div class="paystype">
|
|
||||||
<div
|
|
||||||
class="payAlipay"
|
|
||||||
v-for="(item, index) in userpaystype"
|
v-for="(item, index) in userpaystype"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="selectGoods(item, index)"
|
@click="selectGoods(item, index)"
|
||||||
:class="activeIndex == index ? 'active' : 'unactive'"
|
:class="activeIndex == index ? 'active' : ''"
|
||||||
>
|
>
|
||||||
<div class="rc-payype">
|
|
||||||
<img :src="item.payimage" alt="" />
|
<img :src="item.payimage" alt="" />
|
||||||
<span>{{ item.price }}</span>
|
<span>{{ item.paytype }}支付</span>
|
||||||
</div>
|
</li>
|
||||||
<div class="user-righticon">
|
</ul>
|
||||||
<img src="../../assets/image/rc-left.png" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="paycord">
|
||||||
<div class="paycord" @click="usershow()" id="qrcode" ref="qrcode">
|
<div id="qrcode" ref="qrcode" class="qrcode"></div>
|
||||||
<!-- <img src="../../assets/image/rc-discount.png" alt="" />
|
<span>{{ paytype }}扫一扫立即支付</span>
|
||||||
<span>微信扫一扫立即支付</span> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<el-dialog
|
<el-dialog
|
||||||
:visible.sync="dialogInfo1"
|
:visible.sync="dialogSuccess"
|
||||||
hegight="700px"
|
@close="closeDialogSuccess"
|
||||||
@close='closeDialog'
|
|
||||||
>
|
>
|
||||||
|
<div class="tc dl_cont">
|
||||||
<div class="rc-header">
|
<div class="dl_img">
|
||||||
<div class="rc-titled" >
|
<img src="../../assets/image/usersucess.png" alt="" />
|
||||||
<img src="../../assets/image/usersucess.png" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-logmain">
|
<h3 class="title">支付成功</h3>
|
||||||
<h3>支付成功</h3>
|
<p>您的商品我们正在抓紧打包，请耐心等候！</p>
|
||||||
<span>{{usermessage}}</span>
|
<div class="line_dashed"></div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="userer">
|
<div class="userer">
|
||||||
|
<img
|
||||||
<img src="../../assets/image/rc-discount.png" alt="">
|
width="210"
|
||||||
<span>微信扫一扫，识别二维码</span>
|
height="210"
|
||||||
<i>加入社群0元试用商品随单发放</i>
|
src="../../assets/image/rc-discount.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<p>微信扫一扫，识别二维码</p>
|
||||||
|
<p class="tips">加入社群0元试用商品随单发放</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
<el-dialog
|
||||||
|
:visible.sync="dialogFail"
|
||||||
|
@close="closeDialogFail"
|
||||||
|
>
|
||||||
|
<div class="tc dl_cont">
|
||||||
|
<div class="dl_img">
|
||||||
|
<img src="../../assets/pay/fail.png" alt="" />
|
||||||
|
</div>
|
||||||
|
<h3 class="title">支付失败</h3>
|
||||||
|
<p>请返回商品结算页面重新支付</p>
|
||||||
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Myheader from "~/components/header.vue";
|
import Myheader from "~/components/header.vue";
|
||||||
import QRCode from 'qrcodejs2'
|
import tabs from "@/components/tabs.vue";
|
||||||
import { generateOrderWX } from "../../ajax/getData";
|
import QRCode from "qrcodejs2";
|
||||||
|
|
||||||
|
import { generateOrderAlipay, updateOrderWX } from "../../ajax/getData";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
userdata:null,
|
|
||||||
activeIndex: 0,
|
activeIndex: 0,
|
||||||
usermessage:'您的商品我们正在抓紧打包，请耐心等候！',
|
isSucess: false,
|
||||||
userprice: "￥167.00",
|
paytype: "微信",
|
||||||
userinformation: "李某某 151****7917",
|
|
||||||
userpaystype: [
|
userpaystype: [
|
||||||
{
|
{
|
||||||
price: "支付宝支付",
|
paytype: "微信",
|
||||||
payimage: require("../../assets/image/rc-cat.png"),
|
payimage: require("../../assets/pay/wx.png"),
|
||||||
catimage: require("../../assets/image/rc-left.png"),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
price: "微信支付",
|
paytype: "支付宝",
|
||||||
payimage: require("../../assets/image/rc-cat.png"),
|
payimage: require("../../assets/pay/zfb.png"),
|
||||||
catimage: require("../../assets/image/rc-left.png"),
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
dialogInfo1:false,
|
dialogSuccess: true,
|
||||||
|
dialogFail: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
// 总价计算
|
||||||
|
info() {
|
||||||
|
let obj = {
|
||||||
|
userprice: this.$route.query.userPayData.postData[0].payAmount,
|
||||||
|
userinformation:
|
||||||
|
this.$route.query.userPayData.postData[0].orderAddress
|
||||||
|
.addressUserName +
|
||||||
|
" " +
|
||||||
|
this.$route.query.userPayData.postData[0].orderAddress
|
||||||
|
.addressPhoneNumber,
|
||||||
|
};
|
||||||
|
return obj;
|
||||||
|
},
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.userdata=this.$route.query.wxdata;
|
this.qrcode(this.$route.query.userPayData.wxPay);
|
||||||
this.userpay(this.userdata);
|
|
||||||
console.log(this.userdata);
|
|
||||||
this.$nextTick(() => {
|
|
||||||
|
|
||||||
this.userpay();
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
closeDialogSuccess() {
|
||||||
closeDialog(){
|
|
||||||
this.qrcode = null;
|
this.qrcode = null;
|
||||||
console.log('关闭的')
|
this.$router.push({
|
||||||
|
path: "/index",
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
closeDialogFail() {
|
||||||
async userpay(userdata) {
|
this.qrcode = null;
|
||||||
|
this.$router.push({
|
||||||
console.log("-----");
|
path: "/personal/useraddress",
|
||||||
let data = await generateOrderWX();
|
});
|
||||||
console.log();
|
|
||||||
this.qrcode(userdata);
|
|
||||||
},
|
},
|
||||||
qrcode(e) {
|
qrcode(e) {
|
||||||
console.log(e);
|
let qrcode = new QRCode("qrcode", {
|
||||||
let qrcode = new QRCode('qrcode',{
|
width: 260, // 设置宽度，单位像素
|
||||||
width: 150, // 设置宽度，单位像素
|
height: 260, // 设置高度，单位像素
|
||||||
height: 150, // 设置高度，单位像素
|
text: e, // 设置二维码内容或跳转地址
|
||||||
text: e// 设置二维码内容或跳转地址
|
});
|
||||||
})
|
|
||||||
|
|
||||||
},
|
},
|
||||||
selectGoods(item,index){
|
async selectGoods(item, index) {
|
||||||
let _that=this
|
this.activeIndex = index;
|
||||||
_that.dialogInfo1=true;
|
this.paytype = item.paytype;
|
||||||
_that.activeIndex=index;
|
if (index == 1) {
|
||||||
if(item.price=='微信支付'){
|
//支付宝
|
||||||
// this.userpay();
|
let res = await generateOrderAlipay(
|
||||||
|
this.$route.query.userPayData.postData
|
||||||
|
);
|
||||||
|
if (res.success) {
|
||||||
|
this.qrcode(res.data);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
usershow(){
|
//支付监听
|
||||||
console.log('这是支付')
|
async updateOrderWX() {
|
||||||
this.dialogInfo1=true;
|
let res = await updateOrderWX();
|
||||||
|
if (res.success) {
|
||||||
|
this.dialogSuccess = true;
|
||||||
|
clearInterval(this.time);
|
||||||
|
} else {
|
||||||
|
this.dialogFail = true;
|
||||||
|
clearInterval(this.time);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
Myheader,
|
Myheader,
|
||||||
|
tabs,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped >
|
<style lang="less" scoped >
|
||||||
@media screen and (max-width: 768px) {
|
.sucess_img {
|
||||||
|
|
||||||
.rc-usermaina{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rc-userpay{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
/deep/.el-dialog {
|
|
||||||
width:80%;
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
.rc-header{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
h3{
|
|
||||||
color:#333333;
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
.rc-title{
|
|
||||||
display: flex;
|
|
||||||
margin-top: 30px;
|
|
||||||
display: none;
|
|
||||||
img{
|
|
||||||
width: 96px;
|
width: 96px;
|
||||||
height: 96px;
|
height: 96px;
|
||||||
margin-left: 40px;
|
margin-right: 10px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.order_info {
|
||||||
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
.rc-titled{
|
.info {
|
||||||
img{
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.userer{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
img{
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
span{
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
i{
|
|
||||||
font-size: 18px;
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
margin-top: 32px;
|
|
||||||
color: #E1001A;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-main {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 24%;
|
|
||||||
.paysucess{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.paycord{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.rc-hearder {
|
|
||||||
width: 93%;
|
|
||||||
margin: 0 auto;
|
|
||||||
i em {
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
.rc-userpay {
|
|
||||||
width: 100%;
|
|
||||||
// height: 96px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
.rc-all{
|
|
||||||
height: 96px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
// display: none;
|
|
||||||
}
|
|
||||||
.rc-payprice {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
}
|
}
|
||||||
i {
|
.ready {
|
||||||
font-size: 14px;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
color: #e1001a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-receiving {
|
|
||||||
margin-top: 8px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
color: #666666;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-size: 16px;
|
|
||||||
display: block;
|
|
||||||
margin-top: 53px;
|
|
||||||
color: #e1001a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-paystype {
|
|
||||||
height:64px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
span {
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
color: #e1001a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.payAlipay {
|
|
||||||
.user-righticon{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
img{
|
|
||||||
width: 8px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 80px;
|
|
||||||
border-bottom: 1px solid #d8d8d8;
|
|
||||||
.rc-payype {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
img {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #333333;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
|
||||||
.rc-usermaina{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/.el-dialog {
|
|
||||||
width: 440px;
|
|
||||||
height: 677px;
|
|
||||||
}
|
|
||||||
.rc-header{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
h3{
|
|
||||||
color:#333333;
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
.rc-titled{
|
|
||||||
img{
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rc-title{
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -75px;
|
|
||||||
display: block;
|
|
||||||
top: 59%;
|
|
||||||
img{
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.userer{
|
|
||||||
img{
|
|
||||||
width: 210px;
|
|
||||||
height: 210px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
span{
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
i{
|
|
||||||
font-size: 18px;
|
|
||||||
font-style: normal;
|
|
||||||
display: block;
|
|
||||||
margin-top: 32px;
|
|
||||||
color: #E1001A;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-main {
|
|
||||||
.active {
|
|
||||||
border: 1px solid #E2001A;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 200px;
|
|
||||||
height: 56px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.unactive {
|
|
||||||
border:1px solid #3D3D3D;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 200px;
|
|
||||||
height: 56px;
|
|
||||||
}
|
|
||||||
width: 100%;
|
|
||||||
.rc-hearder {
|
|
||||||
width: 93%;
|
|
||||||
margin: 0 auto;
|
|
||||||
i em {
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
.rc-userpay {
|
|
||||||
width: 100%;
|
|
||||||
height: 96px;
|
|
||||||
// display: flex;
|
|
||||||
// justify-content: space-between;
|
|
||||||
.paysucess{
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
span{
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
display: block;
|
color: #e2001a;
|
||||||
width: 61%;
|
|
||||||
color: #E2001A;
|
|
||||||
}
|
}
|
||||||
|
.ready_right {
|
||||||
|
line-height: 200%;
|
||||||
|
padding-top: 8px;
|
||||||
}
|
}
|
||||||
.rc-all{
|
.price {
|
||||||
display: flex;
|
font-size: 20px;
|
||||||
flex-direction: column;
|
color: #e2001a;
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
.rc-payprice {
|
.pay_title {
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
span {
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
color: #e1001a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rc-receiving {
|
|
||||||
margin-top: 8px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
span {
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
font-style: normal;
|
|
||||||
color: #666666;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-size: 16px;
|
|
||||||
display: block;
|
|
||||||
margin-top: 53px;
|
|
||||||
color: #e1001a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.paystype{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.rc-paystype {
|
|
||||||
height: 100px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
span {
|
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
|
padding: 26px 0;
|
||||||
color: #E2001A;
|
border-bottom: 1px solid #d7d7d7;
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.payAlipay {
|
|
||||||
|
|
||||||
margin-left: 20px;
|
|
||||||
.user-righticon{
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: 8px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.pay_list {
|
||||||
|
padding: 20px 0;
|
||||||
|
.pay_item {
|
||||||
|
float: left;
|
||||||
|
margin-right: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
height: 56px;
|
|
||||||
|
|
||||||
.rc-payype {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #E2001A;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 100%;
|
border: 1px solid #333333;
|
||||||
|
padding: 5px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
&.active {
|
||||||
|
border: 1px solid #e2001a;
|
||||||
|
color: #e2001a;
|
||||||
|
}
|
||||||
img {
|
img {
|
||||||
width: 32px;
|
margin-right: 5px;
|
||||||
height: 32px;
|
width: 24px;
|
||||||
border-radius: 50%;
|
height: 24px;
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.paycord {
|
.paycord {
|
||||||
width: 100%;
|
padding: 10px;
|
||||||
display: flex;
|
text-align: center;
|
||||||
justify-content: center;
|
.qrcode {
|
||||||
align-items: center;
|
margin: 0 auto 10px;
|
||||||
flex-direction: column;
|
|
||||||
img{
|
|
||||||
width: 260px;
|
width: 260px;
|
||||||
height: 260px;
|
height: 260px;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
span{
|
}
|
||||||
font-size: 20px;
|
.dl_width {
|
||||||
display: block;
|
width: 440px;
|
||||||
color: #333333;
|
}
|
||||||
|
.dl_cont {
|
||||||
|
color: #333;
|
||||||
|
margin-top: -10px;
|
||||||
|
.title {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
.line_dashed {
|
||||||
|
border-bottom: 2px dashed #999999;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.dl_img {
|
||||||
|
img {
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
padding: 0px 0 20px;
|
||||||
|
}
|
||||||
|
.userer {
|
||||||
|
img {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tips {
|
||||||
|
color: #e2001a;
|
||||||
|
margin-top: 30px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.ph_hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ready_right {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.pay_title {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.pay_list {
|
||||||
|
padding: 0;
|
||||||
|
.pay_item {
|
||||||
|
float: none;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid #d7d7d7;
|
||||||
|
height: 50px;;
|
||||||
|
margin-right: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: left;
|
||||||
|
justify-content: left; &.active {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid #d7d7d7;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.paycord{ display:none;}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,63 +1,92 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="user" v-for="(item,index) in newlist" :key="index">
|
<div class="user">
|
||||||
<Myheader></Myheader>
|
<Myheader></Myheader>
|
||||||
|
<!-- <unlogin></unlogin> -->
|
||||||
|
<!-- <tabs></tabs> -->
|
||||||
|
<div class="online" id="fixed-catbar-seperator"></div>
|
||||||
<div class="rc-top"></div>
|
<div class="rc-top"></div>
|
||||||
<unlogin></unlogin>
|
<div
|
||||||
<tabs></tabs>
|
class="
|
||||||
<div class="online" ></div>
|
rc-usermain
|
||||||
<div class="rc-usermain ts-product-detail rc-max-width--xl rc-layout-container rc-two-column rc-border-bottom rc-border-colour--brand4">
|
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 class="rc-column">
|
||||||
<div data-js-carousel="" data-image-gallery="true">
|
<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">
|
<div
|
||||||
|
class="rc-carousel rc-carousel__gallery-image"
|
||||||
|
data-zoom-container="328b2e5f-6904-4cac-9709-51ed18d2500f"
|
||||||
|
data-zoom-factor="2"
|
||||||
|
>
|
||||||
<!-- Big images-->
|
<!-- Big images-->
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<div v-for="(item, index) in productAttachmentList" :key="index">
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<img
|
||||||
<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" />
|
:src="item.attachmentPath + '?w=420&fm=jpg&auto=compress'"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</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-->
|
<!-- Big images end-->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-carousel__gallery-thumbnails-wrapper">
|
<div class="rc-carousel__gallery-thumbnails-wrapper">
|
||||||
<div class="rc-carousel rc-carousel__gallery-thumbnails">
|
<div class="rc-carousel rc-carousel__gallery-thumbnails">
|
||||||
<!-- Thunb images-->
|
<!-- Thunb images-->
|
||||||
<div class="rc-carousel__gallery-thumbnail">
|
<div
|
||||||
<figure class="rc-img--square" style="background-image: url('https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=64&fm=jpg&auto=compress')">
|
class="
|
||||||
<figcaption class="rc-screen-reader-text">Product caption text</figcaption>
|
rc-carousel__gallery-thumbnail
|
||||||
</figure>
|
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>
|
||||||
<div class="rc-carousel__gallery-thumbnail">
|
|
||||||
<figure class="rc-img--square" style="background-image: url('https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=64&fm=jpg&auto=compress')">
|
|
||||||
<figcaption class="rc-screen-reader-text">Product caption text</figcaption>
|
|
||||||
</figure>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Thunb images end-->
|
<!-- Thunb images end-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ts-product-header rc-column" id="328b2e5f-6904-4cac-9709-51ed18d2500f">
|
<div
|
||||||
<div class="usermain fixed-catbar-seperator">
|
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="online bold rc-md-down"></div>
|
||||||
<div class="rc-main">
|
<div class="rc-main">
|
||||||
<div class="rc-title">
|
<div class="rc-title">
|
||||||
<h2>{{ item.productName }}</h2>
|
<h2>{{ item.productName }}</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="online rc-md-down" id="fixed-catbar-seperator"></div>
|
<div class="online rc-md-down"></div>
|
||||||
<div class="rc-main">
|
<div class="rc-main">
|
||||||
<div class="productdetails">
|
<div class="productdetails">
|
||||||
<div class="rc-productdetail">
|
<div class="rc-productdetail">
|
||||||
<i class="ts-row-title">商品价格：</i>
|
<i class="ts-row-title">商品价格：</i>
|
||||||
<span class="ts-realprice">￥{{ item.rsp }}</span>
|
<span class="ts-realprice">￥{{ item.rsp }}</span>
|
||||||
<span class="ts-remove ts-ecprice">￥{{ item.ecPrice }} </span>
|
<span class="ts-remove ts-ecprice"
|
||||||
|
>￥{{ item.ecPrice }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-productdetai">
|
<div class="rc-productdetai">
|
||||||
<div>
|
<div>
|
||||||
@ -83,7 +112,7 @@
|
|||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</em> -->
|
</em> -->
|
||||||
|
|
||||||
<em class='active'>
|
<em class="active">
|
||||||
{{ item.specifications }}
|
{{ item.specifications }}
|
||||||
</em>
|
</em>
|
||||||
</div>
|
</div>
|
||||||
@ -91,9 +120,17 @@
|
|||||||
<div class="rc-main">
|
<div class="rc-main">
|
||||||
<div class="rc-produnnum">
|
<div class="rc-produnnum">
|
||||||
<div><i class="ts-row-title">商品数量：</i></div>
|
<div><i class="ts-row-title">商品数量：</i></div>
|
||||||
<img src="../../assets/image/userjian.png" alt="" @click="sub()" />
|
<img
|
||||||
|
src="../../assets/image/userjian.png"
|
||||||
|
alt=""
|
||||||
|
@click="sub()"
|
||||||
|
/>
|
||||||
<strong>{{ sales_num }}</strong>
|
<strong>{{ sales_num }}</strong>
|
||||||
<img src="../../assets/image/userjia.png" alt="" @click="plus()" />
|
<img
|
||||||
|
src="../../assets/image/userjia.png"
|
||||||
|
alt=""
|
||||||
|
@click="plus()"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-main rc-md-up">
|
<div class="rc-main rc-md-up">
|
||||||
@ -101,60 +138,63 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="online rc-md-down"></div>
|
<div class="online rc-md-down"></div>
|
||||||
<div class="rc-main">
|
<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">
|
<div class="certification">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<span
|
<span
|
||||||
><i class="ts-row-title">服务说明：</i><i>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i></span
|
><i class="ts-row-title">服务说明：</i
|
||||||
|
><i
|
||||||
|
>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i
|
||||||
|
></span
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span
|
<span
|
||||||
><i class="ts-row-title">商品运费：</i><i>全场包邮(港澳除外)</i></span
|
><i class="ts-row-title">商品运费：</i
|
||||||
|
><i>全场包邮(港澳除外)</i></span
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<span
|
<span
|
||||||
><i class="ts-row-title">商品编号：</i><i>{{ item.brandCode }}</i></span
|
><i class="ts-row-title">商品编号：</i
|
||||||
|
><i>{{ item.brandCode }}</i></span
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-button" v-if="!userbuy">
|
|
||||||
<span @click="usertanchu(item,0)">加入购物车</span>
|
|
||||||
<span @click="usertanchu(item,1)">立即购买</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="online bold rc-md-down"></div>
|
<div class="online bold rc-md-down"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-footimage rc-main">
|
<div class="rc-footimage rc-main">
|
||||||
<img :src=item.showImgFile alt="">
|
<!-- <img :src="item.showImgFile" alt="" /> -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-fixright">
|
<div class="rc-fixright">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(userfixed,index) in fixedlist" :key="index" @click="lianxi(userfixed,index)">
|
<li
|
||||||
<img :src="userfixed.catimage" alt="">
|
v-for="(userfixed, index) in fixedlist"
|
||||||
|
:key="index"
|
||||||
|
@click="lianxi(userfixed, index)"
|
||||||
|
>
|
||||||
|
<img :src="userfixed.catimage" alt="" />
|
||||||
<span> {{ userfixed.title }}</span>
|
<span> {{ userfixed.title }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="tuntop" @click="toTop" v-show="gotop">
|
<div class="tuntop" @click="toTop" v-show="gotop">
|
||||||
<img src="../../assets/image/turntop.png" alt="">
|
<img src="../../assets/image/turntop.png" alt="" />
|
||||||
<span>回到顶部</span>
|
<span>回到顶部</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Myfooter v-on:litentop='showmesg'></Myfooter>
|
<Myfooter v-on:litentop="showmesg"></Myfooter>
|
||||||
</div>
|
</div>
|
||||||
<el-dialog
|
<el-dialog :visible.sync="dialogInfo1" @close="userclose">
|
||||||
:visible.sync="dialogInfo1"
|
|
||||||
hegight="700px"
|
|
||||||
@close='userclose'
|
|
||||||
>
|
|
||||||
<div class="rs-dis">
|
<div class="rs-dis">
|
||||||
<div
|
<div
|
||||||
class="rc-discount"
|
class="rc-discount"
|
||||||
@ -164,52 +204,40 @@
|
|||||||
<img :src="userimage" alt="" />
|
<img :src="userimage" alt="" />
|
||||||
<div class="rc-contair">
|
<div class="rc-contair">
|
||||||
<div class="rc-left">
|
<div class="rc-left">
|
||||||
<div>
|
<div><i>￥</i><span v-text="item.price"></span></div>
|
||||||
<i>￥</i><span>{{ item.couponAmount }}</span>
|
<p v-text="item.pricestype"></p>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-right">
|
<div class="rc-right">
|
||||||
<i>
|
<i>
|
||||||
{{ item.couponDesc }}
|
{{ item.special }}
|
||||||
</i>
|
</i>
|
||||||
<div class="rc-main" id="rc-main">
|
<div >
|
||||||
<span>有效期</span>
|
<span>有效期</span>
|
||||||
<em>{{ item.validTo }}</em>
|
<em>{{ item.starttime }}</em>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-footer">
|
<div class="rc-footer">
|
||||||
<span @click="usergetconf(item)">立即领取</span>
|
<span @click="usergetconf(item)">立即领取</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<el-dialog
|
<el-dialog :visible.sync="dialogInfo2" @close="userclose">
|
||||||
:visible.sync="dialogInfo2"
|
|
||||||
@close='userclose'
|
|
||||||
>
|
|
||||||
<div class="rc-headera">
|
<div class="rc-headera">
|
||||||
<div class="rc-title">
|
<div class="rc-title">
|
||||||
<img src="../../assets/error.png" alt="">
|
<img src="../../assets/error.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-logmain">
|
<div class="rc-logmain">
|
||||||
<h3>温馨提示</h3>
|
<h3>温馨提示</h3>
|
||||||
<span>请先点击下方进行登录/注册</span>
|
<span>请先点击下方进行登录/注册</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<nuxt-link :to="`/userlogin/login/`">
|
<nuxt-link :to="`/userlogin/login/`">
|
||||||
<div class="userer">
|
<div class="userer">
|
||||||
<span>立即登录</span>
|
<span>立即登录</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<div class="rc-button rc-md-down">
|
<div class="rc-button rc-md-down">
|
||||||
<span @click="usertanchu(item, 0)">加入购物车</span>
|
<span @click="usertanchu(item, 0)">加入购物车</span>
|
||||||
@ -224,7 +252,13 @@ import tabs from "@/components/tabs.vue";
|
|||||||
import unlogin from "~/components/unlogin.vue";
|
import unlogin from "~/components/unlogin.vue";
|
||||||
import { mapMutations } from "vuex";
|
import { mapMutations } from "vuex";
|
||||||
import Myfooter from "~/components/rc-footer.vue";
|
import Myfooter from "~/components/rc-footer.vue";
|
||||||
import { goodsmessage,getConfig,postCourseId,getdraw,alldiscount } from "../../ajax/getData";
|
import {
|
||||||
|
goodsmessage,
|
||||||
|
getConfig,
|
||||||
|
postCourseId,
|
||||||
|
getdraw,
|
||||||
|
alldiscount,
|
||||||
|
} from "../../ajax/getData";
|
||||||
const settings = require("@/config");
|
const settings = require("@/config");
|
||||||
export default {
|
export default {
|
||||||
// middleware: 'metaTitle',
|
// middleware: 'metaTitle',
|
||||||
@ -242,11 +276,11 @@ export default {
|
|||||||
drawlist: [], //用户可以领取的优惠券
|
drawlist: [], //用户可以领取的优惠券
|
||||||
alldraw: [],
|
alldraw: [],
|
||||||
userlistmenu: [],
|
userlistmenu: [],
|
||||||
msg:['11111111'],
|
msg: ["11111111"],
|
||||||
parent_msg:['111'],
|
parent_msg: ["111"],
|
||||||
usermessage: [],
|
usermessage: [],
|
||||||
dialogInfo2: false,
|
dialogInfo2: false,
|
||||||
productCode:'',//商品code
|
productCode: "", //商品code
|
||||||
productlist: [],
|
productlist: [],
|
||||||
userbuy: true,
|
userbuy: true,
|
||||||
sales_num: 1,
|
sales_num: 1,
|
||||||
@ -272,23 +306,53 @@ export default {
|
|||||||
{
|
{
|
||||||
title: "购物车",
|
title: "购物车",
|
||||||
catimage: require("../../assets/buy.png"),
|
catimage: require("../../assets/buy.png"),
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "在线客服",
|
title: "在线客服",
|
||||||
catimage: require("../../assets/service.png"),
|
catimage: require("../../assets/service.png"),
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "营养专家",
|
title: "营养专家",
|
||||||
catimage: require("../../assets/consult.png"),
|
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: [
|
newlist: [
|
||||||
{
|
{
|
||||||
price: "167.00",
|
price: "167.00",
|
||||||
@ -309,103 +373,111 @@ export default {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
Myheader,
|
Myheader,
|
||||||
|
|
||||||
tabs,
|
tabs,
|
||||||
|
magnifier,
|
||||||
unlogin,
|
unlogin,
|
||||||
Myfooter
|
Myfooter,
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener("scroll", this.handleScroll, true);
|
// window.addEventListener("scroll", this.handleScroll, true);
|
||||||
if(this.usermessage!=='' ||this.usermessage.data!==undefined){
|
if (this.usermessage !== "" || this.usermessage.data !== undefined) {
|
||||||
this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
|
this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
|
||||||
let stype = this.$route.query.stype;
|
let stype = this.$route.query.stype;
|
||||||
this.productCode = this.$route.query.productCode;
|
this.productCode = this.$route.query.productCode;
|
||||||
console.log(this.productCode)
|
console.log(this.productCode);
|
||||||
this.userquery(this.productCode);
|
this.userquery(this.productCode);
|
||||||
console.log(this.userlistmenu)
|
console.log(this.userlistmenu);
|
||||||
this.$nextTick(()=>{})
|
this.$nextTick(() => {});
|
||||||
if (stype == 1) {
|
if (stype == 1) {
|
||||||
this.userbuy = true;
|
this.userbuy = true;
|
||||||
} else if (stype == 2) {
|
} else if (stype == 2) {
|
||||||
console.log('这是要消失的')
|
console.log("这是要消失的");
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.userbuy = false;
|
this.userbuy = false;
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations(["changemessage"]),
|
...mapMutations(["changemessage"]),
|
||||||
handleScroll(e)
|
handleScroll(e) {
|
||||||
{
|
let fixedCatbarSeperator = document.querySelector(
|
||||||
let fixedCatbarSeperator = document.getElementById("fixed-catbar-seperator");
|
"#fixed-catbar-seperator"
|
||||||
if(!fixedCatbarSeperator)
|
);
|
||||||
{
|
let scrolltop =
|
||||||
return;
|
document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
}
|
if (fixedCatbarSeperator !== "null") {
|
||||||
let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
|
if (scrolltop - fixedCatbarSeperator.offsetTop) {
|
||||||
if(fixedCatbarSeperator!=='null' ){
|
this.gotop = true;
|
||||||
if((scrolltop-fixedCatbarSeperator.offsetTop))
|
} else {
|
||||||
{
|
|
||||||
this.gotop = true
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
this.gotop = false;
|
this.gotop = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
lianxi(item, index) {
|
lianxi(item, index) {
|
||||||
console.log(item, index);
|
console.log(item, index);
|
||||||
if(item.title=='在线客服'){
|
if (item.title == "在线客服") {
|
||||||
var option = {
|
var option = {
|
||||||
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
|
customer: {
|
||||||
}
|
id: "",
|
||||||
|
name: "",
|
||||||
|
email: "",
|
||||||
|
mobile: "",
|
||||||
|
memberId: "999999",
|
||||||
|
},
|
||||||
|
};
|
||||||
dis_livchat(option);
|
dis_livchat(option);
|
||||||
}
|
}
|
||||||
if(item.title=='购物车'){
|
if (item.title == "购物车") {
|
||||||
console.log('---12314');
|
console.log("---12314");
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "../../myorder/userrecord",
|
path: "../../myorder/userrecord",
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if(item.title=='营养专家'){
|
if (item.title == "营养专家") {
|
||||||
var option = {
|
var option = {
|
||||||
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
|
customer: {
|
||||||
}
|
id: "",
|
||||||
|
name: "",
|
||||||
|
email: "",
|
||||||
|
mobile: "",
|
||||||
|
memberId: "999999",
|
||||||
|
},
|
||||||
|
};
|
||||||
dis_livchat(option);
|
dis_livchat(option);
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
toTop() {
|
toTop() {
|
||||||
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
// 实现滚动效果
|
// 实现滚动效果
|
||||||
const timeTop = setInterval(() => {
|
const timeTop = setInterval(() => {
|
||||||
document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
|
document.body.scrollTop =
|
||||||
|
document.documentElement.scrollTop =
|
||||||
|
top -=
|
||||||
|
400;
|
||||||
if (top <= 0) {
|
if (top <= 0) {
|
||||||
clearInterval(timeTop);
|
clearInterval(timeTop);
|
||||||
}
|
}
|
||||||
}, 10);
|
}, 10);
|
||||||
},
|
},
|
||||||
showmesg() {
|
showmesg() {
|
||||||
console.log('-----');
|
console.log("-----");
|
||||||
this.toTop();
|
this.toTop();
|
||||||
},
|
},
|
||||||
toTop() {
|
toTop() {
|
||||||
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
// 实现滚动效果
|
// 实现滚动效果
|
||||||
const timeTop = setInterval(() => {
|
const timeTop = setInterval(() => {
|
||||||
document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
|
document.body.scrollTop =
|
||||||
|
document.documentElement.scrollTop =
|
||||||
|
top -=
|
||||||
|
400;
|
||||||
if (top <= 0) {
|
if (top <= 0) {
|
||||||
clearInterval(timeTop);
|
clearInterval(timeTop);
|
||||||
}
|
}
|
||||||
@ -415,7 +487,7 @@ export default {
|
|||||||
//领取优惠券
|
//领取优惠券
|
||||||
usergetconf(item) {
|
usergetconf(item) {
|
||||||
console.log(item);
|
console.log(item);
|
||||||
if(this.usermessage.data!==''||this.usermessage.data!==undefined){
|
if (this.usermessage.data !== "" || this.usermessage.data !== undefined) {
|
||||||
this.getconf(this.usermessage.data.id, item.couponId);
|
this.getconf(this.usermessage.data.id, item.couponId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -424,45 +496,37 @@ if(this.usermessage.data!==''||this.usermessage.data!==undefined){
|
|||||||
async getconf(memberId, couponId) {
|
async getconf(memberId, couponId) {
|
||||||
let data = await getConfig(memberId, couponId);
|
let data = await getConfig(memberId, couponId);
|
||||||
if (data) {
|
if (data) {
|
||||||
|
|
||||||
this.$message({
|
this.$message({
|
||||||
type: 'warning',
|
type: "warning",
|
||||||
message: data.msg
|
message: data.msg,
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log(data);
|
console.log(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// changeName(newName){
|
// changeName(newName){
|
||||||
// this.name = newName;
|
// this.name = newName;
|
||||||
// },
|
// },
|
||||||
|
|
||||||
|
|
||||||
userclose() {
|
userclose() {
|
||||||
console.log('这是关闭的');
|
console.log("这是关闭的");
|
||||||
this.userlist = [];
|
this.userlist = [];
|
||||||
},
|
},
|
||||||
async userquery() {
|
async userquery() {
|
||||||
console.log("-----");
|
|
||||||
|
|
||||||
let data = await goodsmessage(this.productCode);
|
let data = await goodsmessage(this.productCode);
|
||||||
if (data) {
|
if (data) {
|
||||||
this.newlist = data.data;
|
this.newlist = data.data;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
this.productAttachmentList = this.newlist[0].productAttachmentList;
|
||||||
|
|
||||||
this.userlistmenu = this.newlist[0].productAttachmentList;
|
this.userlistmenu = this.newlist[0].productAttachmentList;
|
||||||
let changemess = JSON.stringify(this.userlistmenu);
|
let changemess = JSON.stringify(this.userlistmenu);
|
||||||
console.log(changemess);
|
// console.log(changemess);
|
||||||
|
// this.productAttachmentList = this.userlistmenu;
|
||||||
this.changemessage({ data: changemess });
|
this.changemessage({ data: changemess });
|
||||||
this.parent_msg = this.userlistmenu;
|
this.parent_msg = this.userlistmenu;
|
||||||
console.log( this.userlistmenu)
|
// console.log(this.userlistmenu);
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//获取用户领取的优惠券
|
//获取用户领取的优惠券
|
||||||
@ -471,7 +535,6 @@ if(this.usermessage.data!==''||this.usermessage.data!==undefined){
|
|||||||
if (data) {
|
if (data) {
|
||||||
this.drawlist = data.data;
|
this.drawlist = data.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//获取所有的优惠券
|
//获取所有的优惠券
|
||||||
@ -485,40 +548,33 @@ if(this.usermessage.data!==''||this.usermessage.data!==undefined){
|
|||||||
let alllist = [];
|
let alllist = [];
|
||||||
this.userlist = this.alldraw.data;
|
this.userlist = this.alldraw.data;
|
||||||
this.userlist.forEach((element, index) => {
|
this.userlist.forEach((element, index) => {
|
||||||
if(typeof element.productCodes=='string'){
|
if (typeof element.productCodes == "string") {
|
||||||
userlist.push(element);
|
userlist.push(element);
|
||||||
// let s=element.productCodes.split(',');
|
// let s=element.productCodes.split(',');
|
||||||
// console.log(s.indexOf(this.productCode) != -1 )
|
// console.log(s.indexOf(this.productCode) != -1 )
|
||||||
// console.log('这是字符串')
|
// console.log('这是字符串')
|
||||||
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
})
|
|
||||||
let menualist = [];
|
let menualist = [];
|
||||||
userlist.filter(item=>{
|
userlist.filter((item) => {
|
||||||
console.log(item);
|
console.log(item);
|
||||||
item.productCodes=item.productCodes.split(',')
|
item.productCodes = item.productCodes.split(",");
|
||||||
item.productCodes.forEach(element=>{
|
item.productCodes.forEach((element) => {
|
||||||
if (element == this.productCode && item.activityId !== 10) {
|
if (element == this.productCode && item.activityId !== 10) {
|
||||||
console.log(element)
|
console.log(element);
|
||||||
console.log(this.productCode)
|
console.log(this.productCode);
|
||||||
menualist.push(item);
|
menualist.push(item);
|
||||||
|
|
||||||
console.log('----');
|
console.log("----");
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
});
|
||||||
|
// this.usernewlist = menualist;
|
||||||
})
|
// console.log(this.usernewlist);
|
||||||
this.usernewlist=menualist;
|
|
||||||
console.log(this.usernewlist);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
plus(num, index) {
|
plus(num, index) {
|
||||||
|
|
||||||
this.sales_num = parseInt(this.sales_num) + 1;
|
this.sales_num = parseInt(this.sales_num) + 1;
|
||||||
console.log(this.sales_num);
|
console.log(this.sales_num);
|
||||||
},
|
},
|
||||||
@ -526,11 +582,9 @@ if(this.usermessage.data!==''||this.usermessage.data!==undefined){
|
|||||||
sub(num, index) {
|
sub(num, index) {
|
||||||
if (this.sales_num <= 1) {
|
if (this.sales_num <= 1) {
|
||||||
this.sales_num = 1;
|
this.sales_num = 1;
|
||||||
}
|
} else {
|
||||||
else{
|
|
||||||
this.sales_num = parseInt(this.sales_num) - 1;
|
this.sales_num = parseInt(this.sales_num) - 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
async courseId(item) {
|
async courseId(item) {
|
||||||
@ -539,7 +593,16 @@ if(this.usermessage.data!==''||this.usermessage.data!==undefined){
|
|||||||
// let userid=JSON.parse(location.getItem('userInfo'));
|
// let userid=JSON.parse(location.getItem('userInfo'));
|
||||||
// let mobile=JSON.parse(location.getItem('userInfo'));
|
// let mobile=JSON.parse(location.getItem('userInfo'));
|
||||||
// console.log(userid,mobile);
|
// 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);
|
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) {
|
if (data) {
|
||||||
this.productlist = data;
|
this.productlist = data;
|
||||||
}
|
}
|
||||||
@ -547,52 +610,42 @@ if(this.usermessage.data!==''||this.usermessage.data!==undefined){
|
|||||||
},
|
},
|
||||||
usertanchu(item, orderm) {
|
usertanchu(item, orderm) {
|
||||||
let user = localStorage.getItem("userInfo");
|
let user = localStorage.getItem("userInfo");
|
||||||
if(user==undefined||user==null||user==''){
|
if (user == undefined || user == null || user == "") {
|
||||||
this.dialogInfo2 = true;
|
this.dialogInfo2 = true;
|
||||||
return
|
return;
|
||||||
} else {
|
} else {
|
||||||
this.courseId(item);
|
this.courseId(item);
|
||||||
if (orderm == 0) {
|
if (orderm == 0) {
|
||||||
this.$message({
|
this.$message({
|
||||||
type: 'warning',
|
type: "warning",
|
||||||
message: '加入购物车成功'
|
message: "加入购物车成功",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (orderm == 1) {
|
if (orderm == 1) {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/myorder/userrecord",
|
path: "/myorder/userrecord",
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
userget() {
|
userget() {
|
||||||
|
|
||||||
|
|
||||||
let user = localStorage.getItem("userInfo");
|
let user = localStorage.getItem("userInfo");
|
||||||
if(user==undefined||user==null||user==''){
|
if (user == undefined || user == null || user == "") {
|
||||||
this.dialogInfo2 = true;
|
this.dialogInfo2 = true;
|
||||||
return
|
return;
|
||||||
} else {
|
} else {
|
||||||
this.userdraw(this.usermessage.data.mobile);
|
this.userdraw(this.usermessage.data.mobile);
|
||||||
this.alldrawlist(this.usermessage.data.id);
|
this.alldrawlist(this.usermessage.data.id);
|
||||||
this.dialogInfo1 = true;
|
this.dialogInfo1 = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
selectsearch(item, index) {
|
selectsearch(item, index) {
|
||||||
|
|
||||||
this.activeIndexa = index;
|
this.activeIndexa = index;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
onceproduct(){
|
onceproduct() {},
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|||||||
@ -1,14 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Myheader></Myheader>
|
<transition name="fade">
|
||||||
|
<div class="userloding" v-show="isLoading"></div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
<Myheader></Myheader>
|
||||||
<div class="rc-top"></div>
|
<div class="rc-top"></div>
|
||||||
<div class="rc-max-width--xl rc-main">
|
<div class="rc-max-width--xl rc-main">
|
||||||
<div class="usersearch">
|
<div class="usersearch">
|
||||||
<div class="usercontentshow" ref="usercontent">
|
<div class="usercontentshow" ref="usercontent">
|
||||||
<div class="rc-product ts-scrollable-container">
|
<div class="rc-product ts-scrollable-container">
|
||||||
<div class="rc-productcat ts-scrollable">
|
<div class="rc-productcat ts-scrollable">
|
||||||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
|
<div
|
||||||
|
class="rc-cat"
|
||||||
|
v-for="(item, index) in userproduct"
|
||||||
|
:key="index"
|
||||||
|
ref="userclicks"
|
||||||
|
@click="selectGoods(item, index)"
|
||||||
|
:class="activeIndex == index ? 'active' : 'unactive'"
|
||||||
|
>
|
||||||
<img :src="item.catimage" alt="" />
|
<img :src="item.catimage" alt="" />
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ item.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
@ -18,7 +28,13 @@
|
|||||||
<div class="ts-scrollable-container">
|
<div class="ts-scrollable-container">
|
||||||
<h2>专区:</h2>
|
<h2>专区:</h2>
|
||||||
<ol class="ts-scrollable">
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
<li
|
||||||
|
v-for="(item, index) in prefecture"
|
||||||
|
:key="index"
|
||||||
|
@click="selectproduct(item, index)"
|
||||||
|
:class="item.checked ? 'active' : 'unactive'"
|
||||||
|
ref="chosebox"
|
||||||
|
>
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
@ -27,7 +43,13 @@
|
|||||||
<div class="ts-scrollable-container">
|
<div class="ts-scrollable-container">
|
||||||
<h2>年龄:</h2>
|
<h2>年龄:</h2>
|
||||||
<ol class="ts-scrollable">
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
<li
|
||||||
|
v-for="(item, index) in catage"
|
||||||
|
:key="index"
|
||||||
|
@click="selectage(item, index)"
|
||||||
|
:class="item.checked ? 'active' : 'unactive'"
|
||||||
|
ref="chosebox1"
|
||||||
|
>
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
@ -36,7 +58,13 @@
|
|||||||
<div class="ts-scrollable-container">
|
<div class="ts-scrollable-container">
|
||||||
<h2>功能:</h2>
|
<h2>功能:</h2>
|
||||||
<ol class="ts-scrollable">
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
<li
|
||||||
|
v-for="(item, index) in catagea"
|
||||||
|
:key="index"
|
||||||
|
@click="selectagc(item, index)"
|
||||||
|
:class="item.checked ? 'active' : 'unactive'"
|
||||||
|
ref="cgosebox4"
|
||||||
|
>
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
@ -45,33 +73,55 @@
|
|||||||
<div class="ts-scrollable-container">
|
<div class="ts-scrollable-container">
|
||||||
<h2>品种:</h2>
|
<h2>品种:</h2>
|
||||||
<ol class="ts-scrollable">
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
<li
|
||||||
|
v-for="(item, index) in catageb"
|
||||||
|
:key="index"
|
||||||
|
@click="selectagd(item, index)"
|
||||||
|
:class="item.checked ? 'active' : 'unactive'"
|
||||||
|
ref="chosebox3"
|
||||||
|
>
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="online rc-md-up"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- rc-main end -->
|
<!-- rc-main end -->
|
||||||
<div class="online"></div>
|
<div class="online bold"></div>
|
||||||
<!-- rc-main start -->
|
<!-- rc-main start -->
|
||||||
<div class="rc-max-width--xl">
|
<div class="rc-max-width--xl">
|
||||||
<div class="usersearch">
|
<div class="usersearch">
|
||||||
<div class="rc-contair">
|
<div class="rc-contair">
|
||||||
<ul class="ts-product-list">
|
<ul class="ts-product-list">
|
||||||
<li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
|
<li
|
||||||
<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item)">
|
v-for="(item, index) in rccontair"
|
||||||
|
:key="index"
|
||||||
|
class="rc-margin-top--md"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="rc-click rc-margin-bottom--md"
|
||||||
|
@click="selectproduce(item)"
|
||||||
|
>
|
||||||
<div class="rc-rccontair">
|
<div class="rc-rccontair">
|
||||||
<img :src=item.picture alt="">
|
<img :src="item.picture" alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-column">
|
<div class="rc-column">
|
||||||
<div class="rc-click" @click="selectproduce(item)">
|
<div class="rc-click" @click="selectproduce(item)">
|
||||||
<span>{{ item.categoryName }}</span>
|
<span>{{ item.categoryName }}</span>
|
||||||
<i>0.001{{item.price}}</i>
|
<i>￥{{ item.ecPrice }}</i>
|
||||||
</div>
|
</div>
|
||||||
<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="userbuy()">立即购买</strong>
|
<strong
|
||||||
|
class="
|
||||||
|
ts-standard-btn ts-standard-btn--two
|
||||||
|
rc-margin-y--md
|
||||||
|
center
|
||||||
|
"
|
||||||
|
@click="userbuy()"
|
||||||
|
>立即购买</strong
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -83,22 +133,32 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- rc-main end -->
|
<!-- rc-main end -->
|
||||||
|
|
||||||
|
|
||||||
<div v-if="isadrond">
|
<div v-if="isadrond">
|
||||||
<div class="rc-mubu" v-if="isshow" @click="usershow()"></div>
|
<div class="rc-mubu" v-if="isshow" @click="usershow()"></div>
|
||||||
<div class="rc-bottom" v-if="isshow">
|
<div class="rc-bottom" v-if="isshow">
|
||||||
<div class="rc-bottoma">
|
<div class="rc-bottoma">
|
||||||
<div class="rc-productcat ts-scrollable">
|
<div class="rc-productcat ts-scrollable">
|
||||||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
|
<div
|
||||||
|
class="rc-cat"
|
||||||
|
v-for="(item, index) in userproduct"
|
||||||
|
:key="index"
|
||||||
|
@click="selectGoodsa(item, index)"
|
||||||
|
:class="activeIndex1 == index ? 'active' : 'unactive'"
|
||||||
|
>
|
||||||
<img :src="item.catimage" alt="" />
|
<img :src="item.catimage" alt="" />
|
||||||
<span>{{ item.tagName }}</span>
|
<span>{{ item.tagName }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-prefecture">
|
<div class="rc-prefecture">
|
||||||
<h2>专区:</h2>
|
<h2>专区:</h2>
|
||||||
<ol class="ts-scrollable">
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
<li
|
||||||
|
v-for="(item, index) in prefecture"
|
||||||
|
:key="index"
|
||||||
|
@click="selectproduct(item, index)"
|
||||||
|
:class="activeIndexb == index ? 'active' : 'unactive'"
|
||||||
|
ref="chosebox"
|
||||||
|
>
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
@ -107,7 +167,13 @@
|
|||||||
<div class="ts-scrollable-container rc-margin-y--md">
|
<div class="ts-scrollable-container rc-margin-y--md">
|
||||||
<h2>年龄:</h2>
|
<h2>年龄:</h2>
|
||||||
<ol class="ts-scrollable">
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
<li
|
||||||
|
v-for="(item, index) in catage"
|
||||||
|
:key="index"
|
||||||
|
@click="selectage(item, index)"
|
||||||
|
:class="activeIndexc == index ? 'active' : 'unactive'"
|
||||||
|
ref="chosebox1"
|
||||||
|
>
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
@ -115,7 +181,13 @@
|
|||||||
<div class="ts-scrollable-container rc-margin-y--md">
|
<div class="ts-scrollable-container rc-margin-y--md">
|
||||||
<h2>功能:</h2>
|
<h2>功能:</h2>
|
||||||
<ol class="ts-scrollable">
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
<li
|
||||||
|
v-for="(item, index) in catagea"
|
||||||
|
:key="index"
|
||||||
|
@click="selectagc(item, index)"
|
||||||
|
:class="activeIndexd == index ? 'active' : 'unactive'"
|
||||||
|
ref="cgosebox4"
|
||||||
|
>
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
@ -124,41 +196,51 @@
|
|||||||
<div class="ts-scrollable-container">
|
<div class="ts-scrollable-container">
|
||||||
<h2>品种:</h2>
|
<h2>品种:</h2>
|
||||||
<ol class="ts-scrollable">
|
<ol class="ts-scrollable">
|
||||||
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
<li
|
||||||
|
v-for="(item, index) in catageb"
|
||||||
|
:key="index"
|
||||||
|
@click="selectagd(item, index)"
|
||||||
|
:class="activeIndexe == index ? 'active' : 'unactive'"
|
||||||
|
ref="chosebox3"
|
||||||
|
>
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-footer">
|
<div class="rc-footer">
|
||||||
|
|
||||||
<span @click="usershow()">取消</span>
|
<span @click="usershow()">取消</span>
|
||||||
<em @click="usershow()">确定</em>
|
<em @click="usershow()">确定</em>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-dialog
|
<el-dialog :visible.sync="dialogInfo1" hegight="700px" v-if="!isadrond">
|
||||||
:visible.sync="dialogInfo1"
|
|
||||||
hegight="700px"
|
|
||||||
|
|
||||||
v-if="!isadrond"
|
|
||||||
>
|
|
||||||
|
|
||||||
<div class="rc-bottom">
|
<div class="rc-bottom">
|
||||||
<div class="rc-bottoma">
|
<div class="rc-bottoma">
|
||||||
<div class="rc-productcat ts-scrollable">
|
<div class="rc-productcat ts-scrollable">
|
||||||
<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
|
<div
|
||||||
|
class="rc-cat"
|
||||||
|
v-for="(item, index) in userproduct"
|
||||||
|
:key="index"
|
||||||
|
@click="selectGoodsa(item, index)"
|
||||||
|
ref="usercliak"
|
||||||
|
:class="activeIndex1 == index ? 'active' : 'unactive'"
|
||||||
|
>
|
||||||
<img :src="item.name" alt="" />
|
<img :src="item.name" alt="" />
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ item.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="rc-prefecture">
|
<div class="rc-prefecture">
|
||||||
<h2>专区:</h2>
|
<h2>专区:</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
|
<li
|
||||||
|
v-for="(item, index) in prefecture"
|
||||||
|
:key="index"
|
||||||
|
@click="selectproduct(item, index)"
|
||||||
|
:class="activeIndexb == index ? 'active' : 'unactive'"
|
||||||
|
ref="chosebox"
|
||||||
|
>
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
@ -167,7 +249,13 @@
|
|||||||
<div class="ts-scrollable-container rc-margin-y--md">
|
<div class="ts-scrollable-container rc-margin-y--md">
|
||||||
<h2>年龄:</h2>
|
<h2>年龄:</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
|
<li
|
||||||
|
v-for="(item, index) in catage"
|
||||||
|
:key="index"
|
||||||
|
@click="selectage(item, index)"
|
||||||
|
:class="activeIndexc == index ? 'active' : 'unactive'"
|
||||||
|
ref="chosebox1"
|
||||||
|
>
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
@ -175,7 +263,13 @@
|
|||||||
<div class="ts-scrollable-container rc-margin-y--md">
|
<div class="ts-scrollable-container rc-margin-y--md">
|
||||||
<h2>功能:</h2>
|
<h2>功能:</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
|
<li
|
||||||
|
v-for="(item, index) in catagea"
|
||||||
|
:key="index"
|
||||||
|
@click="selectagc(item, index)"
|
||||||
|
:class="activeIndexd == index ? 'active' : 'unactive'"
|
||||||
|
ref="cgosebox4"
|
||||||
|
>
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
@ -184,7 +278,13 @@
|
|||||||
<div class="ts-scrollable-container">
|
<div class="ts-scrollable-container">
|
||||||
<h2>品种:</h2>
|
<h2>品种:</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
|
<li
|
||||||
|
v-for="(item, index) in catageb"
|
||||||
|
:key="index"
|
||||||
|
@click="selectagd(item, index)"
|
||||||
|
:class="activeIndexe == index ? 'active' : 'unactive'"
|
||||||
|
ref="chosebox3"
|
||||||
|
>
|
||||||
{{ item.tagName }}
|
{{ item.tagName }}
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
@ -201,29 +301,46 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Myheader from '~/components/header.vue'
|
import Myheader from "~/components/header.vue";
|
||||||
import { userstype,biaomessa,biaomessage,searchchanpin } from "../../ajax/getData";
|
import {
|
||||||
|
userstype,
|
||||||
|
biaome,
|
||||||
|
biaomessage,
|
||||||
|
searchchanpin,
|
||||||
|
} from "../../ajax/getData";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: "",
|
value: "",
|
||||||
|
isLoading: true,
|
||||||
userstype: [],
|
userstype: [],
|
||||||
activeIndex:0,
|
activeIndex: "0",
|
||||||
|
allacindex: 0,
|
||||||
|
userishwo: true,
|
||||||
|
userishwo1: true,
|
||||||
|
userishwo2: true,
|
||||||
|
userishwo3: true,
|
||||||
|
userishwo4: true,
|
||||||
userserachlist: [
|
userserachlist: [
|
||||||
{}
|
{
|
||||||
|
categoryName: "", //专区
|
||||||
|
tagUsedAge: "", //年龄
|
||||||
|
tagFunction: "", //功能
|
||||||
|
tagBreed: "", //品种
|
||||||
|
},
|
||||||
],
|
],
|
||||||
activeIndex1: 0,
|
activeIndex1: 0,
|
||||||
activeIndexa:'-1',
|
activeIndexa: "-1",
|
||||||
dialogInfo1: false,
|
dialogInfo1: false,
|
||||||
activeIndexb:'-1',
|
activeIndexb: "-1",
|
||||||
activeIndexc:'-1',
|
activeIndexc: "-1",
|
||||||
activeIndexd:'-1',
|
activeIndexd: "-1",
|
||||||
activeIndexe:'-1',
|
activeIndexe: "-1",
|
||||||
activeIndexf:'-1',
|
activeIndexf: "-1",
|
||||||
isadrond: true,
|
isadrond: true,
|
||||||
isshow: false,
|
isshow: false,
|
||||||
openshow: false,
|
openshow: false,
|
||||||
direction:'btt',
|
direction: "btt",
|
||||||
searchdata: [
|
searchdata: [
|
||||||
{
|
{
|
||||||
title: "猫罐头",
|
title: "猫罐头",
|
||||||
@ -352,7 +469,7 @@ export default {
|
|||||||
rccontair: [
|
rccontair: [
|
||||||
{
|
{
|
||||||
title: "皇家英国短毛猫全价湿粮",
|
title: "皇家英国短毛猫全价湿粮",
|
||||||
price:'￥123.45',
|
price: "￥123.45",
|
||||||
ordernum: 1,
|
ordernum: 1,
|
||||||
|
|
||||||
catimage: require("../../assets/image/rc-cat.png"),
|
catimage: require("../../assets/image/rc-cat.png"),
|
||||||
@ -360,25 +477,25 @@ export default {
|
|||||||
|
|
||||||
{
|
{
|
||||||
title: "皇家英国短毛猫全价湿粮",
|
title: "皇家英国短毛猫全价湿粮",
|
||||||
price:'￥123.45',
|
price: "￥123.45",
|
||||||
ordernum: "2",
|
ordernum: "2",
|
||||||
catimage: require("../../assets/image/rc-dog.png"),
|
catimage: require("../../assets/image/rc-dog.png"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "皇家英国短毛猫全价湿粮",
|
title: "皇家英国短毛猫全价湿粮",
|
||||||
price:'￥123.45',
|
price: "￥123.45",
|
||||||
ordernum: "2",
|
ordernum: "2",
|
||||||
catimage: require("../../assets/image/rc-dog.png"),
|
catimage: require("../../assets/image/rc-dog.png"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "皇家英国短毛猫全价湿粮",
|
title: "皇家英国短毛猫全价湿粮",
|
||||||
price:'￥123.45',
|
price: "￥123.45",
|
||||||
ordernum: "2",
|
ordernum: "2",
|
||||||
catimage: require("../../assets/image/rc-dog.png"),
|
catimage: require("../../assets/image/rc-dog.png"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "皇家英国短毛猫全价湿粮",
|
title: "皇家英国短毛猫全价湿粮",
|
||||||
price:'￥123.45',
|
price: "￥123.45",
|
||||||
ordernum: "2",
|
ordernum: "2",
|
||||||
catimage: require("../../assets/image/rc-dog.png"),
|
catimage: require("../../assets/image/rc-dog.png"),
|
||||||
},
|
},
|
||||||
@ -392,22 +509,21 @@ export default {
|
|||||||
let stype = this.$route.query.stype;
|
let stype = this.$route.query.stype;
|
||||||
this.userst();
|
this.userst();
|
||||||
this.activeIndex = stype;
|
this.activeIndex = stype;
|
||||||
if(stype!==''&&stype!==undefined){
|
if (stype !== "" && stype !== undefined) {
|
||||||
this.onmessage(stype)
|
this.onmessage(stype);
|
||||||
} else {
|
} else {
|
||||||
this.usetmessage();
|
this.usetmessage();
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async usersearch(stype){
|
async usersearch(stype, usertype) {
|
||||||
let data=await searchchanpin(stype);
|
let data = await searchchanpin(stype, usertype, 1, 10);
|
||||||
if (data) {
|
if (data) {
|
||||||
this.rccontair = data;
|
this.rccontair = data;
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async userst() {
|
async userst() {
|
||||||
|
this.isLoading = true;
|
||||||
let pinzhong = [];
|
let pinzhong = [];
|
||||||
let zhuanqu = [];
|
let zhuanqu = [];
|
||||||
let age = [];
|
let age = [];
|
||||||
@ -415,46 +531,61 @@ export default {
|
|||||||
let data = await userstype();
|
let data = await userstype();
|
||||||
if (data) {
|
if (data) {
|
||||||
this.userstype = data;
|
this.userstype = data;
|
||||||
|
this.isLoading = false;
|
||||||
}
|
}
|
||||||
this.usercatlist=this.userstype.filter(item=>item.petType=='0')
|
this.usercatlist = this.userstype.filter((item) => item.petType == "0");
|
||||||
this.usercatlist.map(element=>{
|
this.usercatlist.map((element) => {
|
||||||
if(element.name=='品种'){
|
if (element.name == "品种") {
|
||||||
pinzhong.push(element);
|
pinzhong.push(element);
|
||||||
this.catageb=pinzhong
|
this.catageb = pinzhong;
|
||||||
|
this.catageb.forEach((element) => {
|
||||||
|
element.checked = false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
if(element.name=='功能'){
|
if (element.name == "功能") {
|
||||||
gonneg.push(element);
|
gonneg.push(element);
|
||||||
this.catagea=gonneg
|
this.catagea = gonneg;
|
||||||
|
this.catagea.forEach((element) => {
|
||||||
|
element.checked = false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
if(element.name=='年龄'){
|
if (element.name == "年龄") {
|
||||||
age.push(element);
|
age.push(element);
|
||||||
this.catage=age
|
this.catage = age;
|
||||||
|
this.catage.forEach((element) => {
|
||||||
|
element.checked = false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
if(element.name=='专区'){
|
if (element.name == "专区") {
|
||||||
zhuanqu.push(element);
|
zhuanqu.push(element);
|
||||||
this.prefecture=gonneg
|
this.prefecture = zhuanqu;
|
||||||
|
this.prefecture.forEach((element) => {
|
||||||
|
element.checked = false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
})
|
console.log(pinzhong);
|
||||||
this.userdoglisgt=this.userstype.filter(item=>item.petType=='1')
|
// debugger
|
||||||
|
});
|
||||||
|
this.userdoglisgt = this.userstype.filter((item) => item.petType == "1");
|
||||||
},
|
},
|
||||||
|
|
||||||
async usetmessage() {
|
async usetmessage() {
|
||||||
let data = await biaomessa();
|
this.isLoading = true;
|
||||||
|
let data = await biaome(this.activeIndex1, "", 1, 10);
|
||||||
if (data) {
|
if (data) {
|
||||||
this.rccontair = data;
|
this.rccontair = data;
|
||||||
|
this.isLoading = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async onmessage(stype) {
|
async onmessage(stype) {
|
||||||
let data = await biaomessage(stype);
|
this.isLoading = true;
|
||||||
|
let data = await biaomessage(stype, "", 1, 10);
|
||||||
if (data) {
|
if (data) {
|
||||||
this.rccontair = data;
|
this.rccontair = data;
|
||||||
|
this.isLoading = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
userbuy() {
|
userbuy() {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/myorder/userrecord",
|
path: "/myorder/userrecord",
|
||||||
@ -466,27 +597,13 @@ export default {
|
|||||||
openclose() {
|
openclose() {
|
||||||
this.dialogInfo1 = false;
|
this.dialogInfo1 = false;
|
||||||
},
|
},
|
||||||
selectproduce(item){
|
selectproduce() {
|
||||||
if(item.productList[0]==undefined){
|
|
||||||
item.productlist[0].productCode=0;
|
|
||||||
}
|
|
||||||
if(item.productList[0]==undefined){
|
|
||||||
item.productlist[0]=[];
|
|
||||||
}
|
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/productdetails/producted",
|
path: "/productdetails/producted",
|
||||||
query: {
|
query: {
|
||||||
stype: 1,
|
stype: 1,
|
||||||
productCode:item.productList[0].productCode
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// this.$router.push({
|
|
||||||
// path: "/productdetails/producted",
|
|
||||||
// query: {
|
|
||||||
// stype: 1,
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
},
|
},
|
||||||
ifadroind() {
|
ifadroind() {
|
||||||
var sUserAgent = navigator.userAgent.toLowerCase();
|
var sUserAgent = navigator.userAgent.toLowerCase();
|
||||||
@ -499,128 +616,242 @@ export default {
|
|||||||
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
||||||
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
||||||
|
|
||||||
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
if (
|
||||||
//console.log("当前是电脑打开")
|
!(
|
||||||
|
bIsIpad ||
|
||||||
|
bIsIphoneOs ||
|
||||||
|
bIsMidp ||
|
||||||
|
bIsUc7 ||
|
||||||
|
bIsUc ||
|
||||||
|
bIsAndroid ||
|
||||||
|
bIsCE ||
|
||||||
|
bIsWM
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
console.log("当前是电脑打开");
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
||||||
this.isadrond = false;
|
this.isadrond = false;
|
||||||
this.dialogInfo1 = true;
|
this.dialogInfo1 = true;
|
||||||
this.isadrond = false;
|
this.isadrond = false;
|
||||||
this.isshow = false;
|
this.isshow = false;
|
||||||
|
});
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
//console.log("当前是手机打开")
|
console.log("当前是手机打开");
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
||||||
this.isadrond = true;
|
this.isadrond = true;
|
||||||
this.isshow = true;
|
this.isshow = true;
|
||||||
this.$refs.usercontent.style.display='none ';
|
this.$refs.usercontent.style.display = "none ";
|
||||||
this.dialogInfo1 = false;
|
this.dialogInfo1 = false;
|
||||||
|
});
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
//搜索
|
|
||||||
onSearch() {},
|
|
||||||
selectGoods(item, index) {
|
selectGoods(item, index) {
|
||||||
|
this.activeIndex1 = index;
|
||||||
|
this.activeIndex = index;
|
||||||
|
this.allacindex = index;
|
||||||
|
this.usersearch(this.userserachlist, this.activeIndex1);
|
||||||
|
|
||||||
|
// for (let i = 0; i < this.userserachlist.length; i++) {
|
||||||
|
// if (!this.userserachlist.includes(petType)) {
|
||||||
|
// this.userserachlist.push(petType);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
this.userserachlist = [
|
||||||
|
{
|
||||||
|
categoryName: "", //专区
|
||||||
|
tagUsedAge: "", //年龄
|
||||||
|
tagFunction: "", //功能
|
||||||
|
tagBreed: "", //品种
|
||||||
|
},
|
||||||
|
];
|
||||||
|
let pinzhong = [];
|
||||||
|
let zhuanqu = [];
|
||||||
|
let age = [];
|
||||||
|
let gonneg = [];
|
||||||
|
if (this.activeIndex1 == 0) {
|
||||||
|
this.usercatlist.map((element) => {
|
||||||
|
if (element.name == "品种") {
|
||||||
|
pinzhong.push(element);
|
||||||
|
this.catageb = pinzhong;
|
||||||
|
}
|
||||||
|
if (element.name == "功能") {
|
||||||
|
gonneg.push(element);
|
||||||
|
this.catagea = gonneg;
|
||||||
|
}
|
||||||
|
if (element.name == "年龄") {
|
||||||
|
age.push(element);
|
||||||
|
this.catage = age;
|
||||||
|
}
|
||||||
|
if (element.name == "专区") {
|
||||||
|
zhuanqu.push(element);
|
||||||
|
this.prefecture = zhuanqu;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (this.activeIndex1 == 1) {
|
||||||
|
this.userdoglisgt.map((element) => {
|
||||||
|
if (element.name == "品种") {
|
||||||
|
pinzhong.push(element);
|
||||||
|
this.catageb = pinzhong;
|
||||||
|
this.catageb.forEach((element) => {
|
||||||
|
element.checked = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (element.name == "功能") {
|
||||||
|
gonneg.push(element);
|
||||||
|
this.catagea = gonneg;
|
||||||
|
this.catagea.forEach((element) => {
|
||||||
|
element.checked = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (element.name == "年龄") {
|
||||||
|
age.push(element);
|
||||||
|
this.catage = age;
|
||||||
|
this.catage.forEach((element) => {
|
||||||
|
element.checked = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (element.name == "专区") {
|
||||||
|
zhuanqu.push(element);
|
||||||
|
this.prefecture = zhuanqu;
|
||||||
|
this.prefecture.forEach((element) => {
|
||||||
|
element.checked = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
this.activeIndex = index;
|
this.activeIndex = index;
|
||||||
let petType={
|
|
||||||
petType:this.activeIndex,
|
|
||||||
}
|
|
||||||
for(let i =0;i<this.userserachlist.length;i++){
|
|
||||||
if(!this.userserachlist.includes(petType)){
|
|
||||||
this.userserachlist.push(petType)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.usersearch(this.userserachlist)
|
|
||||||
},
|
},
|
||||||
selectGoodsa(item, index) {
|
selectGoodsa(item, index) {
|
||||||
|
|
||||||
this.activeIndex1 = index;
|
this.activeIndex1 = index;
|
||||||
},
|
},
|
||||||
userselect() {
|
userselect() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
||||||
this.ifadroind();
|
this.ifadroind();
|
||||||
|
});
|
||||||
})
|
|
||||||
},
|
},
|
||||||
usershow() {
|
usershow() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.isshow = false;
|
this.isshow = false;
|
||||||
// dom元素更新后执行，因此这里能正确打印更改之后的值
|
// dom元素更新后执行，因此这里能正确打印更改之后的值
|
||||||
this.$refs.usercontent.style.display='block ';
|
this.$refs.usercontent.style.display = "block ";
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
selectsearch(item, index) {
|
selectsearch(item, index) {
|
||||||
|
|
||||||
this.activeIndexa = index;
|
this.activeIndexa = index;
|
||||||
},
|
},
|
||||||
selectage(item, index) {
|
selectage(item, index) {
|
||||||
let tagUsedAge={
|
let tagUsedAge = {};
|
||||||
petType:this.activeIndex1,
|
|
||||||
tagUsedAge:item.tagName
|
|
||||||
|
|
||||||
}
|
|
||||||
for(let i =0;i<this.userserachlist.length;i++){
|
|
||||||
if(!this.userserachlist.includes(tagUsedAge)){
|
|
||||||
this.userserachlist.push(tagUsedAge)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.usersearch(this.userserachlist)
|
|
||||||
this.activeIndexc = index;
|
this.activeIndexc = index;
|
||||||
|
this.userishwo1 = !this.userishwo1;
|
||||||
|
console.log(this.userishwo1);
|
||||||
|
if (item.checked == false) {
|
||||||
|
item.checked = true;
|
||||||
|
this.userserachlist[0].tagUsedAge = item.tagName;
|
||||||
|
this.$refs.chosebox1[index].className = "active";
|
||||||
|
} else {
|
||||||
|
this.userserachlist[0].tagUsedAge = "";
|
||||||
|
item.checked = false;
|
||||||
|
this.$refs.chosebox1[index].className = "unactive";
|
||||||
|
}
|
||||||
|
|
||||||
|
// for (let i = 0; i < this.userserachlist.length; i++) {
|
||||||
|
// if (!this.userserachlist.includes(tagUsedAge)) {
|
||||||
|
// this.userserachlist.push(tagUsedAge);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
this.usersearch(this.userserachlist, this.activeIndex1);
|
||||||
},
|
},
|
||||||
selectagc(item, index) {
|
selectagc(item, index) {
|
||||||
let tagFunction={
|
// let tagFunction = {};
|
||||||
petType:this.activeIndex1,
|
|
||||||
tagFunction:item.tagName
|
|
||||||
}
|
|
||||||
for(let i =0;i<this.userserachlist.length;i++){
|
|
||||||
if(!this.userserachlist.includes(tagFunction)){
|
|
||||||
this.userserachlist.push(tagFunction)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.usersearch(this.userserachlist)
|
|
||||||
this.activeIndexd = index;
|
this.activeIndexd = index;
|
||||||
|
this.userishwo2 = !this.userishwo2;
|
||||||
|
if (item.checked == false) {
|
||||||
|
item.checked = true;
|
||||||
|
this.$refs.cgosebox4[index].className = "active";
|
||||||
|
this.userserachlist[0].tagFunction = item.tagName;
|
||||||
|
} else {
|
||||||
|
item.checked = false;
|
||||||
|
this.$refs.cgosebox4[index].className = "unactive";
|
||||||
|
this.userserachlist[0].tagFunction = "";
|
||||||
|
}
|
||||||
|
// if (this.userishwo2 == false) {
|
||||||
|
// tagFunction = {
|
||||||
|
// petType: this.allacindex,
|
||||||
|
// tagFunction: item.tagName,
|
||||||
|
// };
|
||||||
|
// } else {
|
||||||
|
// console.log("这是false");
|
||||||
|
// tagFunction = {
|
||||||
|
// petType: this.allacindex,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// for (let i = 0; i < this.userserachlist.length; i++) {
|
||||||
|
// if (!this.userserachlist.includes(tagFunction)) {
|
||||||
|
// this.userserachlist.push(tagFunction);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
this.usersearch(this.userserachlist, this.activeIndex1);
|
||||||
},
|
},
|
||||||
selectagd(item, index) {
|
selectagd(item, index) {
|
||||||
let tagBreed={
|
let tagBreed = {};
|
||||||
petType:this.activeIndex1,
|
|
||||||
tagBreed:item.tagName
|
|
||||||
}
|
|
||||||
for(let i =0;i<this.userserachlist.length;i++){
|
|
||||||
if(!this.userserachlist.includes(tagBreed)){
|
|
||||||
this.userserachlist.push(tagBreed)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.usersearch(this.userserachlist)
|
|
||||||
this.activeIndexe = index;
|
this.activeIndexe = index;
|
||||||
|
this.userishwo3 = !this.userishwo3;
|
||||||
|
if (item.checked == false) {
|
||||||
|
item.checked = true;
|
||||||
|
this.$refs.chosebox3[index].className = "active";
|
||||||
|
this.userserachlist[0].tagBreed = item.tagName;
|
||||||
|
} else {
|
||||||
|
item.checked = false;
|
||||||
|
this.$refs.chosebox3[index].className = "unactive";
|
||||||
|
this.userserachlist[0].tagBreed = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
// this.$refs.chosebox3[index].className = "unactive";
|
||||||
|
// for (let i = 0; i < this.userserachlist.length; i++) {
|
||||||
|
// if (!this.userserachlist.includes(tagBreed)) {
|
||||||
|
// this.userserachlist.push(tagBreed);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
this.usersearch(this.userserachlist, this.activeIndex1);
|
||||||
},
|
},
|
||||||
selectproduct(item, index) {
|
selectproduct(item, index) {
|
||||||
this.activeIndexb = index;
|
this.activeIndexb = index;
|
||||||
let categoryName={
|
// console.log(this.userishwo=!this.userishwo)
|
||||||
petType:this.activeIndex1,
|
if (item.checked == false) {
|
||||||
categoryName:item.tagName,
|
item.checked = true;
|
||||||
|
this.$refs.chosebox[index].className = "active";
|
||||||
|
this.userserachlist[0].categoryName = item.tagName;
|
||||||
|
} else {
|
||||||
|
item.checked = false;
|
||||||
|
this.$refs.chosebox[index].className = "unactive";
|
||||||
|
this.userserachlist[0].categoryName = "";
|
||||||
}
|
}
|
||||||
for(let i =0;i<this.userserachlist.length;i++){
|
// if (this.userishwo == false) {
|
||||||
if(!this.userserachlist.includes(categoryName)){
|
// console.log("====");
|
||||||
this.userserachlist.push(categoryName)
|
// categoryName = {
|
||||||
}
|
// petType: this.allacindex,
|
||||||
}
|
// categoryName: item.tagName,
|
||||||
this.usersearch(this.userserachlist)
|
// };
|
||||||
|
// } else {
|
||||||
|
// categoryName = {
|
||||||
|
// petType: this.allacindex,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// this.$refs.chosebox[index].className = "unactive";
|
||||||
|
// for (let i = 0; i < this.userserachlist.length; i++) {
|
||||||
|
// if (!this.userserachlist.includes(categoryName)) {
|
||||||
|
// this.userserachlist.push(categoryName);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
this.usersearch(this.userserachlist, this.activeIndex1);
|
||||||
},
|
},
|
||||||
|
|
||||||
//弹框的显示隐藏
|
//弹框的显示隐藏
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -104,7 +104,6 @@ export default {
|
|||||||
|
|
||||||
//查询人的所有地址
|
//查询人的所有地址
|
||||||
async editaddress(user) {
|
async editaddress(user) {
|
||||||
|
|
||||||
user.data.id=844350
|
user.data.id=844350
|
||||||
let data = await selectaddress(user.data.id);
|
let data = await selectaddress(user.data.id);
|
||||||
this.list=data.data;
|
this.list=data.data;
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user