回退 'Pull Request !42 : 1-19 He'

This commit is contained in:
Admin 2022-01-20 02:47:36 +00:00 committed by Gitee
parent e78a843e89
commit 4bfd884a9b
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
12 changed files with 1916 additions and 2461 deletions

View File

@ -31,13 +31,13 @@ export const courselist = (offset, courseId, type, sort, selectScreen = []) => {
courseId,
selectScreenStr
}
return fetch('/api/courselist', data)
return fetch( '/api/courselist', data)
}
/**
* 获取课程详情
*/
export const getDetail = (id) => {
fetch('/api/courseDetail/index/' + id)
fetch( '/api/courseDetail/index/' + id)
}
/**
@ -56,40 +56,44 @@ export const getleckCourse = (name, offset) => {
* 加入购物车
*/
export const postCourseId = (productCode, buyCount, memberId, mobile, productImg, productName, productPrice, specifications) => {
export const postCourseId = (productCode,buyCount,memberId, mobile,productImg,productName,productPrice,specifications) => {
var data = {
buyCount: buyCount,
buyCount:buyCount,
memberId: memberId,
mobile: mobile,
productCode: productCode,
mobile:mobile,
productCode:productCode,
productImg: productImg,
productName: productName,
productPrice: productPrice,
specifications: specifications
productName:productName,
productPrice:productPrice,
specifications:specifications
}
return fetch('/insertCartProductInfo', data, 'POST')
return fetch('/insertCartProductInfo', data,'POST')
}
/**
* 是否存在购物车
*/
export const isexistCart = (id) => {
export const isexistCart = (id, pet,address) => {
var data = {
memberId: id,
}
return fetch('getCartProductInfo', data, 'POST')
return fetch('getCartProductInfo?memberId='+id,data,'POST')
}
/**
* 删除购物车
*/
export const deleteCart = (memberId, productCode) => {
return fetch('cancelCartProductInfo?memberId=' + memberId, productCode, 'POST')
var data = {
memberId: memberId,
productCode:productCode
}
return fetch('cancelCartProductInfo',data,'POST')
}
/**
* 购物车批量提交
*/
export const mostAddClass = (id) => {
return fetch('/api/mostAddClass/', { id })
return fetch('/api/mostAddClass/', {id})
}
/**
* 删除购物车
@ -105,47 +109,47 @@ export const mostAddClass = (id) => {
/**
* 发送验证码
*/
export const sendMsg = (mobile, pet, address) => {
export const sendMsg = (mobile, pet,address) => {
var data = {
phoneNumber: mobile,
phoneNumber:mobile,
}
return fetch('sendMsg', data, 'POST')
return fetch('sendMsg', data, 'POST' )
}
/**
* 发送验证码数据
*/
export const vadatnmsg = (msgNum, hash, tamp) => {
export const vadatnmsg = (msgNum,hash,tamp) => {
var data = {
msgNum: msgNum,
tamp: tamp,
hash: hash
msgNum:msgNum,
tamp:tamp,
hash:hash
}
return fetch('validateNum', data, 'POST')
return fetch('validateNum', data, 'POST' )
}
/**
* 筛选标签
*/
export const userstype = (stype, pet, address) => {
export const userstype = (stype, pet,address) => {
var data = {
petType: 0,
petType:0,
}
return fetch('productSearchTag/query?petType=' + 0, data, 'POST')
return fetch('productSearchTag/query?petType=' + 0, data, 'POST' )
}
/**
* 登录
*/
export const userLongin = (mobile, pet, address) => {
export const userLongin = (mobile, pet,address) => {
var data = {
id: '',
mobile: mobile,
id:'',
mobile:mobile,
}
return fetch('member?type=get', data, 'POST')
return fetch('member?type=get', data, 'POST' )
}
//注册
export const useredit = (mobile, pet, address) => {
//注册
export const useredit = (mobile, pet,address) => {
var data = {
mobile:mobile,
memberName:'',
@ -180,10 +184,10 @@ export const userquery = (stype) => {
console.log(stype);
var data = {
goodsName: stype
goodsName:stype
}
return fetch('goods?goodsName=' + stype, data, 'POST')
return fetch('goods?goodsName='+stype, data, 'POST' )
}
//商品全部信息
export const userque = (stype) => {
@ -191,7 +195,7 @@ export const userque = (stype) => {
console.log(stype);
var data = {
}
return fetch('goods', data, 'POST')
return fetch('goods', data, 'POST' )
}
@ -230,14 +234,20 @@ export const searchchanpin = (stype,usertype,curPage,curRow) => {
curRow=10;
let queryTail='&page='+curPage+'&rows='+curRow;
console.log(stype);
let list = {};
stype.map(item => {
let list={};
stype.map(item=>{
console.log(item);
list=item
})
var str = "&";
for(var key in list){
str = str + key + "=" + list[key] + "&";
str = str + key + "=" + list[key] + "&";
}
str = str.substr(0,str.length-1);
var data = {
page:1,
row:10
}
return fetch('product/query?petType='+usertype+str+queryTail, data, 'POST' )
@ -255,19 +265,19 @@ export const searchchanpin = (stype,usertype,curPage,curRow) => {
//查询订单
export const userindent = (phoneNumber, orderNumber,) => {
export const userindent = (phoneNumber,orderNumber,) => {
var data = {
phoneNumber: '18112621098',
orderNumber: orderNumber,
phoneNumber:'18112621098',
orderNumber:orderNumber,
}
return fetch('orderMaster/?type=query', data, 'POST')
return fetch('orderMaster/?type=query', data, 'POST' )
}
//查询订单详情
export const userin = (orderNumber,) => {
var data = {
orderNumber: orderNumber,
orderNumber:orderNumber,
}
return fetch('orderMaster/?type=query', data, 'POST')
return fetch('orderMaster/?type=query', data, 'POST' )
}
@ -276,20 +286,20 @@ export const userin = (orderNumber,) => {
export const canceldanhao = (orderNumber) => {
var data = {
orderNumber: orderNumber,
orderNumber:orderNumber,
}
return fetch('cancelOrder/', data, 'POST')
return fetch('cancelOrder/', data, 'POST' )
}
export const biaomessa = (stype) => {
console.log(stype);
var data = {
name: stype,
page: 1,
row: 10
name:stype,
page:1,
row:10
}
return fetch('product/query', data, 'POST')
return fetch('product/query', data, 'POST' )
}
export const biaome = (usertype,stype,curPage,rows) => {
@ -301,9 +311,9 @@ export const biaome = (usertype,stype,curPage,rows) => {
let username='&name='+stype
console.log(stype);
var data = {
name: stype,
rows: 10,
page: 1,
name:stype,
rows:10,
page:1,
}
return fetch('product/query?petType='+usertype+username+queryTail,data, 'POST' )
}
@ -314,9 +324,9 @@ export const biaome = (usertype,stype,curPage,rows) => {
export const memberAccount = (stype) => {
console.log(stype);
var data = {
memberId: stype
memberId:stype
}
return fetch('memberAccount?type=history', data, 'POST')
return fetch('memberAccount?type=history', data, 'POST' )
}
@ -325,9 +335,9 @@ export const ordermaster = (stype) => {
console.log(stype);
var data = {
memberId: '223782'
memberId:'223782'
}
return fetch('memberAccount', data, 'POST')
return fetch('memberAccount', data, 'POST' )
}
//微信支付
@ -335,9 +345,9 @@ export const payOrderWX = (stype) => {
console.log(stype);
var data = {
memberId: '223782'
memberId:'223782'
}
return fetch('memberAccount', data, 'POST')
return fetch('memberAccount', data, 'POST' )
}
@ -346,9 +356,9 @@ export const payOrderWX = (stype) => {
export const insercar = (stype) => {
console.log(stype);
var data = {
petType: stype
petType:stype
}
return fetch('product/insertCartProductInfo', data, 'POST')
return fetch('product/insertCartProductInfo', data, 'POST' )
}
@ -356,25 +366,25 @@ export const insercar = (stype) => {
//查询猫狗商品信息
export const catquery = (productCode, type) => {
export const catquery = (productCode,type) => {
console.log(productCode);
var data = {
petType: 0
petType:0
}
return fetch('h5/product/query', data, 'POST')
return fetch('h5/product/query', data, 'POST' )
}
//查询猫狗商品信息
export const dogquery = (productCode, type) => {
export const dogquery = (productCode,type) => {
console.log(productCode);
var data = {
petType: 1,
pet_type: 0
petType:1,
pet_type:0
}
return fetch('h5/product/query', data, 'POST')
return fetch('h5/product/query', data, 'POST' )
}
@ -386,10 +396,10 @@ export const oncequery = (productCode) => {
var data = {
productCode: productCode
productCode:productCode
}
return fetch("goodsByProductCode?productCode=" + productCode, data, 'POST')
return fetch( "goodsByProductCode?productCode="+productCode, data, 'POST' )
}
@ -397,173 +407,163 @@ export const oncequery = (productCode) => {
export const goodsmessage = (productCode) => {
var data = {
productCode: productCode
productCode:productCode
}
return fetch("productMaster/query?productCode=" + productCode, data, 'POST')
return fetch( "productMaster/query?productCode="+productCode, data, 'POST' )
}
//优惠券的插入
export const inserdiscount = (mobile, couponId) => {
var data = {
mobile: mobile,
couponId: couponId
//优惠券的插入
export const inserdiscount = (mobile,couponId) => {
var data = {
mobile:mobile,
couponId:couponId
}
return fetch('coupon?type=fetch', data, 'POST' )
}
return fetch('coupon?type=fetch', data, 'POST')
}
//优惠券的查询
export const getdiscount = (memberId, channelSecurity, mobile) => {
var data = {
memberId: memberId,
mobile: mobile
//优惠券的查询
export const getdiscount = (memberId,channelSecurity,mobile) => {
var data = {
memberId:memberId,
mobile:mobile
}
return fetch('memberAddress?type=getAll', data, 'POST' )
}
//可用的优惠券
export const alldiscount = (memberId,channelSecurity,mobile) => {
var data = {
memberId:memberId,
}
return fetch('couponConfig?type=getAll', data, 'POST' )
}
//用户领取的优惠券
export const getdraw = (mobile,states) => {
var data = {
mobile:mobile,
status:states
}
return fetch('coupon?type=getAll', data, 'POST' )
}
//微信支付
export const generateOrderWX = (list) => {
var data = [{
}]
return fetch('generateOrderWX', list, 'POST' )
}
return fetch('memberAddress?type=getAll', data, 'POST')
}
//用户所有的优惠券
export const allConfig = (memberId,channelSecurity,mobile) => {
var data = {
}
return fetch('couponConfig?type=getAll', data, 'POST' )
}
//可用的优惠券
export const alldiscount = (memberId, channelSecurity, mobile) => {
var data = {
memberId: memberId,
//用户领取优惠券
export const getConfig = (memberId,couponId) => {
var data = {
memberId:memberId,
couponId:couponId,
}
return fetch('coupon?type=fetch', data, 'POST' )
}
//用户下的优惠券
export const userConfig = (memberId,couponId) => {
var data = {
memberId:memberId,
couponId:couponId,
}
return fetch('coupon?type=fetch', data, 'POST' )
}
//用户订单的查询
// export const customerorders = (memberId,channelSecurity,mobile) => {
// var data = {
// productName:'幼猫全价粮',
// buyCount:'2',
// productId:'210352',
// payAmount:'517',
// memberId:'844350',
// phoneNumber:'18112621098',
// }
// return fetch('generateOrderWX', data, 'POST' )
// }
//地址的查询
export const selectaddress = (memberId, pet,address) => {
var data = {
memberId:memberId,
}
return fetch('memberAddress?type=getAll', data, 'POST' )
}
return fetch('couponConfig?type=getAll', data, 'POST')
}
//用户领取的优惠券
export const getdraw = (mobile, states) => {
var data = {
mobile: mobile,
status: states
//地址的添加 //id/详细地址/ 收货人姓名/收货人电话号码/省份id/城市id/区域编码
export const editaddress = (memberId, detailAddress,recipient,tel,provinceId,cityId,districtId) => {
var data = {
memberId:844350,
provinceId:25,
cityId:36,
districtId:418,
detailAddress:'古美路1455弄46号302',
recipient:'蒋缘缘2',
recipientPhone:'13671516167',
zipCode:'214423',
default:false,
}
return fetch('memberAddress?type=add', data, 'POST' )
}
return fetch('coupon?type=getAll', data, 'POST')
}
//删除
export const editdelete = (memberId,ids) => {
var data = {
memberId:memberId,
ids:ids,
}
return fetch('memberAddress?type=delete', data, 'POST' )
}
//微信支付
export const generateOrderWX = (list) => {
return fetch('generateOrderWX', list, 'POST')
}
//微信支付返回
export const updateOrderWX = (data) => {
return fetch('updateOrderWX', data, 'POST')
}
//支付宝支付
export const generateOrderAlipay = (list) => {
return fetch('generateOrderAlipay', list, 'POST')
}
//地址的编辑
export const editupdate = (mobile, pet,address) => {
var data = {
//用户所有的优惠券
export const allConfig = (memberId, channelSecurity, mobile) => {
var data = {
}
return fetch('couponConfig?type=getAll', data, 'POST')
}
//用户领取优惠券
export const getConfig = (memberId, couponId) => {
var data = {
memberId: memberId,
couponId: couponId,
}
return fetch('coupon?type=fetch', data, 'POST')
}
//用户下的优惠券
export const userConfig = (memberId, couponId) => {
var data = {
memberId: memberId,
couponId: couponId,
}
return fetch('coupon?type=fetch', data, 'POST')
}
//用户订单的查询
// export const customerorders = (memberId,channelSecurity,mobile) => {
// var data = {
// productName:'幼猫全价粮',
// buyCount:'2',
// productId:'210352',
// payAmount:'517',
// memberId:'844350',
// phoneNumber:'18112621098',
// }
// return fetch('generateOrderWX', data, 'POST' )
// }
//地址的查询
export const memberAddress = (type, data) => {
return fetch('memberAddress?type=' + type, data, 'POST')
}
//地址的查询
export const selectaddress = (memberId, pet, address) => {
var data = {
memberId: memberId,
}
return fetch('memberAddress?type=getAll', data, 'POST')
}
//地址的添加 //id/详细地址/ 收货人姓名/收货人电话号码/省份id/城市id/区域编码
export const editaddress = (memberId, detailAddress, recipient, tel, provinceId, cityId, districtId) => {
var data = {
memberId: 844350,
provinceId: 25,
cityId: 36,
districtId: 418,
detailAddress: '古美路1455弄46号302',
recipient: '蒋缘缘2',
recipientPhone: '13671516167',
zipCode: '214423',
default: false,
}
return fetch('memberAddress?type=add', data, 'POST')
}
//删除
export const editdelete = (memberId, ids) => {
var data = {
memberId: memberId,
ids: ids,
}
return fetch('memberAddress?type=delete', data, 'POST')
}
//地址的编辑
export const editupdate = (mobile, pet, address) => {
var data = {
memberId: '3242',
id: '620111',
provinceId: '',
cityId: '',
districtId: '',
detailAddress: '江西省萍乡市',
recipient: '刘佳敏',
recipientPhone: '13407998521',
zipCode: '',
isDefault: '',
}
return fetch('memberAddress?type=update', data, 'POST')
}
memberId:'3242',
id:'620111',
provinceId:'',
cityId:'',
districtId:'',
detailAddress:'江西省萍乡市',
recipient:'刘佳敏',
recipientPhone:'13407998521',
zipCode:'',
isDefault:'',
}
return fetch('memberAddress?type=update', data, 'POST' )
}
//修改密码
export const userchange = (id, pet, address) => {
export const userchange = (id, pet,address) => {
var data = {
id: id,
id:id,
}
return fetch('member?type=update', data, 'POST')
return fetch('member?type=update', data, 'POST' )
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -1,78 +0,0 @@
* {
margin: 0;
padding: 0;
}
html {
line-height: 160%;
}
.rc_contline {
border-bottom: 3px solid #f6f6f6;
height: 0px;
margin: 0;
clear: both;
}
.page_modules {
padding-top: 100px;
}
.cont_modules {
margin: 0 auto;
max-width: 1400px;
}
.inline_right {
display: flex;
justify-content: space-between;
width: 100%;
}
.inline_mid {
display: flex;
justify-content: space-around;
width: 100%;
}
.inline_left {
display: flex;
justify-content: space-evenly;
width: 100%;
}
.li_inline {
li {
display: inline-block;
vertical-align: middle;
}
}
.color_red {
color: #E2001A;
}
.tc {
text-align: center;
}
.tr {
text-align: right;
}
.el-dialog{
width: 90%;
max-width: 440px;
}
#tns2-iw{ height: 90px;}
.rc-carousel:not(.rc-carousel--loaded){visibility:visible!important}
@media screen and (max-width: 768px) {
.el-message-box{
width: 300px;
}
.el-dialog{
width: 90%;
}
}

View File

@ -14,12 +14,12 @@ export default {
// { src: '/js/flexible.js', type: 'text/javascript', charset: 'utf-8'},
{ src: 'https://ocstest.royalcanin.com.cn:8081/livechat/chatapp/customer/branch/RoyalCanin/14053/index.js' },
//{ src: 'https://ocstest.royalcanin.com.cn:8081/livechat/chatapp/customer/branch/RoyalCanin/14054/index.js' },
{ innerHTML: trackingScript, type: 'text/javascript', charset: 'utf-8' },
{ innerHTML: assetsUrl, type: 'text/javascript', charset: 'utf-8' },
{ src: '/royalcanin-cdn-assets-new/css_js/royal-canin.min.bundle.js' },
{ innerHTML: trackingScript, type: 'text/javascript', charset: 'utf-8'},
{ innerHTML: assetsUrl, type: 'text/javascript', charset: 'utf-8'},
{ src: '/royalcanin-cdn-assets-new/css_js/royal-canin.min.bundle.js' },
],
__dangerouslyDisableSanitizers: ['script', 'innerHTML'],
],
__dangerouslyDisableSanitizers: ['script', 'innerHTML'],
meta: [
{ charset: 'utf-8' },
@ -29,8 +29,8 @@ export default {
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', id: 'royal-canin', href: '/royalcanin-cdn-assets-new/css_js/royal-canin.styles.prefix.min.critical.css?v=8-10-0' },
//{ rel: 'stylesheet', id:'royal-canin' ,href: '/royalcanin-cdn-assets-new/css_js/royal-canin.styles.prefix.min.css?v=8-10-0'},
{ rel: 'stylesheet', id:'royal-canin' ,href: '/royalcanin-cdn-assets-new/css_js/royal-canin.styles.prefix.min.critical.css?v=8-10-0'},
//{ rel: 'stylesheet', id:'royal-canin' ,href: '/royalcanin-cdn-assets-new/css_js/royal-canin.styles.prefix.min.css?v=8-10-0'},
]
},
@ -38,10 +38,8 @@ export default {
css: [
'vant/lib/index.css',
'element-ui/lib/theme-chalk/index.css',
'@/assets/style/default.less',
{ src:'@/assets/css/global.less'},
{ src:'@/assets/css/royalcanin-custom.css'},
{ src: "swiper/css/swiper.css" }
],
@ -70,12 +68,12 @@ export default {
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'@nuxtjs/axios',
['nuxt-tailvue', { toast: true }],
['nuxt-tailvue', {toast: true}],
],
styleResources: {
less: '/assets/style/default.less' // less文件路径
less: '@/assets/style/less/default.less' // less文件路径
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {

View File

@ -1,127 +0,0 @@
<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>

File diff suppressed because it is too large Load Diff

View File

@ -1,414 +0,0 @@
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;
}
}
}
}

View File

@ -1,5 +1,5 @@
<template>
<div class="settlement">
<div>
<Myheader></Myheader>
<tabs></tabs>
<div class="online"></div>
@ -8,99 +8,98 @@
<div class="rc-border"></div>
<div
class="mypersonal"
v-for="(item, index) in useraddress"
v-for="(dataaddress, index) in useraddress"
:key="index"
:class="item.isDefault ? 'active' : ''"
@click="selectAddress(item)"
>
<div class="edit" @click="editAddress(item)">
<i class="el-icon-edit"></i>编辑
</div>
<div class="my-delivery">
<span>{{ item.recipient }}</span>
<i>{{ item.recipientPhone }}</i>
<span>{{ dataaddress.state }}</span>
<i>{{ dataaddress.tel }}</i>
</div>
<div class="per-delivery">
<span>{{ item.address }}</span>
<span>{{ dataaddress.address }}</span>
</div>
</div>
<div class="mypersonal">
<div
class="my-delivery"
@click="addAddress"
style="justify-content: center"
>
<i class="el-icon-plus"></i>
<span>添加收货地址</span>
</div>
</div>
</div>
</div>
<div class="rc-contline"></div>
<div class="rc-main" v-for="(item, index) in goldmedal" :key="index">
<div class="rc-usermain">
<div class="rc-image">
<img :src="item.productImg" alt="" />
</div>
<div class="rc-right">
<div class="rc-usercenter">
<h3>{{ item.productName }}</h3>
<p>规格:{{ item.specifications }}</p>
</div>
<div class="rc-userbottom">
<p>{{ item.productPrice }}</p>
<p>X{{ item.buyCount }}</p>
<p class="price">{{ item.productPrice }}</p>
</div>
</div>
</div>
</div>
<div class="rc-contline"></div>
<div class="rc-main">
<div class="rc-merchandise">
<ul>
<li>
<span>配送方式:</span>
<i>{{ shopprice.price }}</i>
</li>
<li>
<span> 活动促销:</span>
<i>{{ shopprice.distribution }}</i>
</li>
<li>
<span>商品总价:</span>
<i class="red">{{ sumPrice }}</i>
</li>
<li>
<span>配送费用:</span>
<i class="red">{{ shopprice.payment }}</i>
</li>
</ul>
</div>
</div>
<div class="rc-contline"></div>
<div class="rc-main">
<div class="rc-foot">
<div class="rc-foo">
<div>
<i>合计金额:</i>
<em>{{ sumPrice }}</em>
</div>
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
<div>
<div class="rc-center">
<div class="rc-usermain">
<div class="rc-image">
<img :src="item.catimage" alt="" />
</div>
<div class="rc-right">
<div class="rc-usercenter">
<em>{{ item.usereat }}</em>
<div class="rc-userright">
<span>规格:{{ item.num }}</span>
</div>
</div>
<div class="rc-userbottom">
<span>数量:{{ item.specification }}</span>
<i>{{ item.userprice }}</i>
<div class="rc-bottom">
<span>联系客服申请售后</span>
</div>
<div style="font-weight: bold">
<span @click="jiesuan()">提交订单</span>
</div>
<div class="rc-bottomm">
<span>联系客服申请售后</span>
</div>
<!-- <div class="rc-userbottomm">
<i>{{ item.userprice }}</i>
<span>{{ item.orderstype }}</span>
<i>{{ item.userprice }}</i>
</div> -->
</div>
</div>
</div>
<div class="rc-merchandise">
<ul>
<li>
<span>配送方式:</span>
<i>{{ shopprice.price }}</i>
</li>
<li>
<span> 活动促销:</span>
<i>{{ shopprice.distribution }}</i>
</li>
<li>
<span>商品总价:</span>
<i>{{ shopprice.promotion }}</i>
</li>
<li>
<span>配送费用:</span>
<i>{{ shopprice.payment }}</i>
</li>
</ul>
</div>
<div class="rc-foot">
<div class="rc-foo">
<div style="padding-top:55px">
<i>合计金额:</i>
<em>167.00</em>
</div>
<div style="padding-bottom:40px">
<span>再次购买</span>
</div>
</div>
</div>
</div>
</div>
<div class="rc-button">
<div class="rc-left">
<span>总计</span>
<em>167.00</em>
</div>
<strong ref="rccolor" @click="jiesuan">结算</strong>
</div>
<el-dialog :visible.sync="dialogAdd" class="diallog_width" width="'100%">
<div class="tc dl_cont" v-if="dialogAdd">
<myAddress
@isClose="dialogCtrl"
:editAddressData="editAddressData"
></myAddress>
</div>
</el-dialog>
</div>
</template>
@ -113,18 +112,23 @@ export default {
meta: {title: '订单结算'},
data() {
return {
goldmedal: [],
goldmedal:[],
addressstype: null,
orderstatus: "",
userisdelivery: "待收货",
orderstatus: '',
userisdelivery:'待收货',
userdelivery: "派送中",
isshow: true,
isshow:true,
leftico: require("../../assets/image/rc-left.png"),
orderNumber: "",
dialogAdd: false,
editAddressData: {},
curAddress: {},
saveType: "",
orderNumber:'',
// delivery: [
// {
// state: "",
// time: "2021-11-21",
// address: "广15124617917",
// },
// ],
useraddress: [
{
state: "李某某",
@ -166,166 +170,40 @@ export default {
promotion: "¥167.00",
payment: "¥0.00 ",
},
information: {
reference: "1111111111111111",
ordertime: "2012-12-01 11:20:00",
paymentmethod: "微信支付",
distribution: "快递",
trackingnumber: "11111111111111",
catimage: require("../../assets/image/rc-left.png"),
},
};
},
computed: {
//
sumPrice() {
return this.goldmedal
.reduce((pre, cur) => {
console.log(pre);
return pre + cur.buyCount * cur.productPrice;
}, 0);
},
},
methods: {
async getAddressList() {
let memberId = JSON.parse(localStorage.getItem("userInfo")).data.id;
let { data } = await memberAddress("getAll", { memberId: memberId });
data.forEach((item) => {
item.address =
item.provinceName +
item.cityName +
item.districtName +
item.detailAddress;
});
this.useraddress = data;
console.log(data);
},
editAddress(item) {
this.editAddressData = {
memberId: item.memberId,
name: item.recipient,
tel: item.recipientPhone,
detailAddress: item.detailAddress,
id: item.id,
city: item.cityName,
districtId: item.districtName,
saveType: "edit",
};
this.dialogAdd = true;
},
addAddress() {
this.editAddressData = {};
this.dialogAdd = true;
},
selectAddress(cur) {
this.useraddress.forEach((item) => {
if (item.id == cur.id) {
item.isDefault = true;
} else {
item.isDefault = false;
}
});
},
dialogCtrl(parm) {
this.dialogAdd = parm;
this.getAddressList();
},
async jiesuan() {
let orderAddress = this.useraddress.filter(item=>item.isDefault)
let postData =[]
this.goldmedal.forEach(item=>{
let oneProduct={
productName: item.productName,
buyCount: item.buyCount,
productId:item. productCode,
payAmount: item.productPrice,
memberId: item.memberId,
phoneNumber: item.mobile,
// couponId: "NGQ2022P12",
// couponTypeId: "4",
// couponName: "",
// couponAmount: "0.3175",
// couponCode: "0007792402",
orderAddress: {
addressPhoneNumber:orderAddress[0].recipientPhone,
addressUserName:orderAddress[0].recipient,
addressProvinceName: orderAddress[0].provinceName,
addressCityName:orderAddress[0].cityName,
addressCountyName: orderAddress[0].districtName,
addressDetailInfo: orderAddress[0].detailAddress,
},
}
postData.push(oneProduct)
})
// let postData = [
// {
// productName: this.goldmedal.productName,
// buyCount: "2",
// productId: "20030200",
// payAmount: "147.00",
// memberId: "844350",
// phoneNumber: "18112621098",
// couponId: "NGQ2022P12",
// couponTypeId: "4",
// couponName: "",
// couponAmount: "0.3175",
// couponCode: "0007792402",
// orderAddress: {
// addressPhoneNumber:orderAddress[0].recipientPhone,
// addressUserName:orderAddress[0].recipient,
// addressProvinceName: orderAddress[0].provinceName,
// addressCityName:orderAddress[0].cityName,
// addressCountyName: orderAddress[0].districtName,
// addressDetailInfo: orderAddress[0].detailAddress,
// },
// },
// // {
// // productName: "",
// // buyCount: "2",
// // productId: "20030200",
// // payAmount: "147.00",
// // memberId: "844350",
// // phoneNumber: "18112621098",
// // couponId: "NGQ2022P12",
// // couponTypeId: "4",
// // couponName: "",
// // couponAmount: "0.3175",
// // couponCode: "0007792402",
// // orderAddress: {
// // addressPhoneNumber: "13602898745",
// // addressUserName: "",
// // addressProvinceName: "",
// // addressCityName: "",
// // addressCountyName: "",
// // addressDetailInfo: "",
// // },
// // },
// ];
// let res = await generateOrderWX(postData);
// if (res.success) {
// let payData=res.data
let userPayData={
postData:postData,
wxPay:'weixin://wxpay/bizpayurl?pr=4RJbokxzz'
}
jiesuan(){
// let userdata=this.$route.query.wxdata
this.$router.push({
path: "/personal/userpay",
query: {
userPayData: userPayData,
},
});
// }
},
async canceldanhao(orderNumber) {
let data = await userin(orderNumber);
console.log(data);
// this.goldmedal=data;
console.log(this.goldmedal);
},
path: "/personal/userpay",
query: {
wxdata:userdata
},
});
},
async canceldanhao(orderNumber){
let data=await userin(orderNumber);
console.log(data);
// this.goldmedal=data;
console.log(this.goldmedal);
},
},
mounted() {
this.goldmedal = this.$route.query.list;
console.log(this.$route.query.list);
this.getAddressList();
// this.addressstype = this.$route.query.stype;
// this.orderNumber = this.$route.query.orderNumber;
// this.canceldanhao(this.orderNumber);
// console.log(this.$refs.rccolor);
// this.$refs.rccolor.style.background = "gray";
this.addressstype = this.$route.query.stype;
this.orderNumber=this.$route.query.orderNumber;
this.canceldanhao(this.orderNumber)
console.log(this.$refs.rccolor)
this.$refs.rccolor.style.background='gray';
},
components: {
Myheader,

View File

@ -1,320 +1,578 @@
<template>
<div class="page_modules">
<div>
<Myheader></Myheader>
<div class="cont_modules">
<tabs></tabs>
<el-row class="order_info">
<el-col :span="6" class="ph_hidden">
<ul class="li_inline">
<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">&nbsp;</el-col>
<el-col :span="6" class="ready_right">
<div class="inline_right">
<p>付款金额:</p>
<p class="price">{{ info.userprice }}</p>
<div class="rc-main">
<div class="online" style="height:3px;width:93%;margin:0 auto;background:#DDDDDD;margin-top:0.23rem"></div>
<div class="rc-hearder">
<div class="rc-userpay">
<div class="paysucess">
<span>订单提交成功等待付款</span>
</div>
<div class="rc-all">
<div class="rc-payprice">
<span>付款金额:</span>
<i>{{ userprice }}</i>
</div>
<div class="inline_right">
<p>收货信息:</p>
<p>{{ info.userinformation }}</p>
<div class="rc-receiving">
<span>收货信息:</span>
<i>{{ userinformation }}</i>
</div>
</el-col>
</el-row>
</div>
<div class="rc_contline"></div>
<div class="cont_modules">
<div class="pay_title color_red">请选择支付方式</div>
</div>
<div class="rc_contline"></div>
<div class="cont_modules">
<div class="pay_list">
<ul>
<li
class="pay_item"
</div>
<div class="online" style="height:3px;width:100%;background:#DDDDDD;"></div>
<div class="rc-usermaina">
<div class="rc-title" id="qrcode" ref="qrcode" >
</div>
</div>
</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"
:key="index"
@click="selectGoods(item, index)"
:class="activeIndex == index ? 'active' : ''"
:class="activeIndex == index ? 'active' : 'unactive'"
>
<img :src="item.payimage" alt="" />
<span>{{ item.paytype }}支付</span>
</li>
</ul>
<div class="rc-payype">
<img :src="item.payimage" alt="" />
<span>{{ item.price }}</span>
</div>
<div class="user-righticon">
<img src="../../assets/image/rc-left.png" alt="" />
</div>
</div>
</div>
</div>
<div class="paycord" @click="usershow()" id="qrcode" ref="qrcode">
<!-- <img src="../../assets/image/rc-discount.png" alt="" />
<span>微信扫一扫立即支付</span> -->
</div>
</div>
<div class="paycord">
<div id="qrcode" ref="qrcode" class="qrcode"></div>
<span>{{ paytype }}扫一扫立即支付</span>
</div>
<el-dialog
:visible.sync="dialogSuccess"
@close="closeDialogSuccess"
>
<div class="tc dl_cont">
<div class="dl_img">
<img src="../../assets/image/usersucess.png" alt="" />
</div>
<h3 class="title">支付成功</h3>
<p>您的商品我们正在抓紧打包请耐心等候</p>
<div class="line_dashed"></div>
<div class="userer">
<img
width="210"
height="210"
src="../../assets/image/rc-discount.png"
alt=""
/>
<p>微信扫一扫识别二维码</p>
<p class="tips">加入社群0元试用商品随单发放</p>
</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>
:visible.sync="dialogInfo1"
hegight="700px"
@close='closeDialog'
>
<div class="rc-header">
<div class="rc-titled" >
<img src="../../assets/image/usersucess.png" alt="">
</div>
<div class="rc-logmain">
<h3>支付成功</h3>
<span>{{usermessage}}</span>
</div>
<div class="userer">
<img src="../../assets/image/rc-discount.png" alt="">
<span>微信扫一扫识别二维码</span>
<i>加入社群0元试用商品随单发放</i>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import Myheader from "~/components/header.vue";
import tabs from "@/components/tabs.vue";
import QRCode from "qrcodejs2";
import { generateOrderAlipay, updateOrderWX } from "../../ajax/getData";
import QRCode from 'qrcodejs2'
import { generateOrderWX } from "../../ajax/getData";
export default {
data() {
return {
activeIndex: 0,
isSucess: false,
paytype: "微信",
userdata:null,
activeIndex: 0,
usermessage:'您的商品我们正在抓紧打包,请耐心等候!',
userprice: "¥167.00",
userinformation: "李某某 151****7917",
userpaystype: [
{
paytype: "微信",
payimage: require("../../assets/pay/wx.png"),
price: "支付宝支付",
payimage: require("../../assets/image/rc-cat.png"),
catimage: require("../../assets/image/rc-left.png"),
},
{
paytype: "支付宝",
payimage: require("../../assets/pay/zfb.png"),
price: "微信支付",
payimage: require("../../assets/image/rc-cat.png"),
catimage: require("../../assets/image/rc-left.png"),
},
],
dialogSuccess: true,
dialogFail: false,
dialogInfo1: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() {
this.qrcode(this.$route.query.userPayData.wxPay);
this.userdata=this.$route.query.wxdata;
this.userpay(this.userdata);
console.log(this.userdata);
this.$nextTick(() => {
this.userpay();
})
},
methods: {
closeDialogSuccess() {
this.qrcode = null;
this.$router.push({
path: "/index",
});
closeDialog(){
this.qrcode=null;
console.log('关闭的')
},
async userpay(userdata) {
console.log("-----");
let data = await generateOrderWX();
console.log();
this.qrcode(userdata);
},
closeDialogFail() {
this.qrcode = null;
this.$router.push({
path: "/personal/useraddress",
});
},
qrcode(e) {
let qrcode = new QRCode("qrcode", {
width: 260, //
height: 260, //
text: e, //
});
},
async selectGoods(item, index) {
this.activeIndex = index;
this.paytype = item.paytype;
if (index == 1) {
//
let res = await generateOrderAlipay(
this.$route.query.userPayData.postData
);
if (res.success) {
this.qrcode(res.data);
}
qrcode (e) {
console.log(e);
let qrcode = new QRCode('qrcode',{
width: 150, //
height: 150, //
text: e//
})
},
selectGoods(item,index){
let _that=this
_that.dialogInfo1=true;
_that.activeIndex=index;
if(item.price=='微信支付'){
// this.userpay();
}
},
usershow(){
console.log('这是支付')
this.dialogInfo1=true;
}
},
//
async updateOrderWX() {
let res = await updateOrderWX();
if (res.success) {
this.dialogSuccess = true;
clearInterval(this.time);
} else {
this.dialogFail = true;
clearInterval(this.time);
}
},
},
components: {
Myheader,
tabs,
},
};
</script>
<style lang="less" scoped >
.sucess_img {
width: 96px;
height: 96px;
margin-right: 10px;
}
.order_info {
padding: 10px 0;
}
.info {
display: flex;
justify-content: space-between;
}
.ready {
font-size: 20px;
color: #e2001a;
}
.ready_right {
line-height: 200%;
padding-top: 8px;
}
.price {
font-size: 20px;
color: #e2001a;
}
.pay_title {
font-size: 26px;
padding: 26px 0;
border-bottom: 1px solid #d7d7d7;
}
.pay_list {
padding: 20px 0;
.pay_item {
float: left;
margin-right: 20px;
display: flex;
justify-content: center;
border: 1px solid #333333;
padding: 5px 20px;
cursor: pointer;
&.active {
border: 1px solid #e2001a;
color: #e2001a;
}
img {
margin-right: 5px;
width: 24px;
height: 24px;
}
}
&::after {
content: "";
display: block;
clear: both;
}
}
.paycord {
padding: 10px;
text-align: center;
.qrcode {
margin: 0 auto 10px;
width: 260px;
height: 260px;
}
}
.dl_width {
width: 440px;
}
.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 {
.rc-usermaina{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
display: none;
}
.rc-userpay{
display: none;
}
.ready_right {
/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;
height: 96px;
margin-left: 40px;
}
}
.rc-titled{
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%;
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;
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;
justify-content: space-between;
span {
font-size: 14px;
color: #333333;
}
i {
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;
}
}
}
}
}
.paycord{ display:none;}
}
@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;
display: block;
width: 61%;
color: #E2001A;
}
}
.rc-all{
display: flex;
flex-direction: column;
justify-content: center;
}
.rc-payprice {
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;
color: #E2001A;
}
}
.payAlipay {
margin-left: 20px;
.user-righticon{
display: none;
img{
width: 8px;
height: 16px;
}
}
display: flex;
justify-content: space-between;
height: 56px;
.rc-payype {
display: flex;
align-items: center;
font-size: 16px;
color: #E2001A;
justify-content: center;
width: 100%;
img {
width: 32px;
height: 32px;
border-radius: 50%;
}
span {
margin-left: 16px;
}
}
}
}
.paycord{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
img{
width: 260px;
height: 260px;
display: block;
}
span{
font-size: 20px;
display: block;
color: #333333;
}
}
}
}
</style>

View File

@ -73,222 +73,159 @@
<div class="online"></div>
</div>
<div class="rc-productdeta" v-if="userbuy">
<div class="rc-main">
<div class="rc-prodtop">
<div>
<i class="ts-row-title">商品规格</i>
</div>
<div class="rc-carousel__gallery-thumbnails-wrapper">
<div class="rc-carousel rc-carousel__gallery-thumbnails">
<!-- Thunb images-->
<div
class="
rc-carousel__gallery-thumbnail
tns-item tns-slide-active
"
v-for="(item, index) in productAttachmentList"
:key="index"
>
<div class="rc-img--square">
<img :src="item.attachmentPath" alt="" />
</div>
</div>
<!-- Thunb images end-->
</div>
</div>
</div>
</div>
<div
class="ts-product-header rc-column"
id="328b2e5f-6904-4cac-9709-51ed18d2500f"
>
<div class="usermain" v-for="(item, index) in newlist" :key="index">
<div class="online bold rc-md-down"></div>
<div class="rc-main">
<div class="rc-title">
<h2>{{ item.productName }}</h2>
</div>
</div>
<div class="online rc-md-down"></div>
<div class="rc-main">
<div class="productdetails">
<div class="rc-productdetail">
<i class="ts-row-title">商品价格</i>
<span class="ts-realprice">{{ item.rsp }}</span>
<span class="ts-remove ts-ecprice"
>{{ item.ecPrice }}
</span>
</div>
<div class="rc-productdetai">
<div>
<i class="ts-row-title">活动促销</i>
<span>全场商品限时优惠</span>
</div>
<em class="ts-right-arr" @click="userget()">立即领取</em>
</div>
</div>
</div>
<div class="online bold rc-md-down"></div>
<div class="rc-main rc-md-up">
<div class="online"></div>
</div>
<div class="rc-productdeta" v-if="userbuy">
<div class="rc-main">
<div class="rc-prodtop">
<div>
<i class="ts-row-title">商品规格</i>
</div>
<!-- <em v-for="(item, index) in stype" :key="index" @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
<!-- <em v-for="(item, index) in stype" :key="index" @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
{{ item.title }}
</em> -->
<em class="active">
{{ item.specifications }}
</em>
</div>
</div>
<div class="rc-main">
<div class="rc-produnnum">
<div><i class="ts-row-title">商品数量</i></div>
<img
src="../../assets/image/userjian.png"
alt=""
@click="sub()"
/>
<strong>{{ sales_num }}</strong>
<img
src="../../assets/image/userjia.png"
alt=""
@click="plus()"
/>
</div>
</div>
<div class="rc-main rc-md-up">
<div class="online"></div>
</div>
<div class="online rc-md-down"></div>
<div class="rc-main">
<div class="rc-button" v-if="userbuy">
<span @click="usertanchu(item, 0)">加入购物车</span>
<span @click="usertanchu(item, 1)">立即购买</span>
</div>
<div class="certification">
<ul>
<li>
<span
><i class="ts-row-title">服务说明</i
><i
>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i
></span
>
</li>
<li>
<span
><i class="ts-row-title">商品运费</i
><i>全场包邮(港澳除外)</i></span
>
</li>
<em class='active'>
{{ item.specifications }}
</em>
</div>
</div>
<div class="rc-main">
<div class="rc-produnnum">
<div><i class="ts-row-title">商品数量</i></div>
<img src="../../assets/image/userjian.png" alt="" @click="sub()" />
<strong>{{sales_num}}</strong>
<img src="../../assets/image/userjia.png" alt="" @click="plus()" />
</div>
</div>
<div class="rc-main rc-md-up">
<div class="online"></div>
</div>
<div class="online rc-md-down"></div>
<div class="rc-main">
<div class="certification">
<ul>
<li>
<span
><i class="ts-row-title">服务说明</i><i>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i></span
>
</li>
<li>
<span
><i class="ts-row-title">商品运费</i><i>全场包邮(港澳除外)</i></span
>
</li>
<li>
<span
><i class="ts-row-title">商品编号</i
><i>{{ item.brandCode }}</i></span
>
</li>
</ul>
<li>
<span
><i class="ts-row-title">商品编号</i><i>{{ item.brandCode }}</i></span
>
</li>
</ul>
</div>
<div class="rc-button" v-if="!userbuy">
<span @click="usertanchu(item,0)">加入购物车</span>
<span @click="usertanchu(item,1)">立即购买</span>
</div>
</div>
<div class="online bold rc-md-down"></div>
</div>
</div>
</div>
</div>
<div class="rc-footimage rc-main">
<img :src=item.showImgFile alt="">
</div>
<div class="rc-fixright" >
<ul >
<li v-for="(userfixed,index) in fixedlist" :key="index" @click="lianxi(userfixed,index)">
<img :src="userfixed.catimage" alt="">
<span> {{userfixed.title}}</span>
</li>
</ul>
<div class="tuntop" @click="toTop" v-show="gotop">
<img src="../../assets/image/turntop.png" alt="">
<span>回到顶部</span>
</div>
</div>
<Myfooter v-on:litentop='showmesg'></Myfooter>
</div>
<el-dialog
:visible.sync="dialogInfo1"
hegight="700px"
@close='userclose'
>
<div class="rs-dis">
<div
class="rc-discount"
v-for="(item, index) in usernewlist"
:key="index"
>
<img :src="userimage" alt="" />
<div class="rc-contair">
<div class="rc-left">
<div>
<i></i><span>{{ item.couponAmount }}</span>
</div>
</div>
<div class="online bold rc-md-down"></div>
</div>
</div>
</div>
</div>
<div class="rc-footimage rc-main">
<!-- <img :src="item.showImgFile" alt="" /> -->
</div>
<div class="rc-fixright">
<ul>
<li
v-for="(userfixed, index) in fixedlist"
:key="index"
@click="lianxi(userfixed, index)"
>
<img :src="userfixed.catimage" alt="" />
<span> {{ userfixed.title }}</span>
</li>
</ul>
<div class="tuntop" @click="toTop" v-show="gotop">
<img src="../../assets/image/turntop.png" alt="" />
<span>回到顶部</span>
</div>
</div>
<Myfooter v-on:litentop="showmesg"></Myfooter>
</div>
<el-dialog :visible.sync="dialogInfo1" @close="userclose">
<div class="rs-dis">
<div
class="rc-discount"
v-for="(item, index) in usernewlist"
:key="index"
>
<img :src="userimage" alt="" />
<div class="rc-contair">
<div class="rc-left">
<div><i></i><span v-text="item.price"></span></div>
<p v-text="item.pricestype"></p>
</div>
<div class="rc-right">
<i>
{{ item.special }}
</i>
<div >
<span>有效期</span>
<em>{{ item.starttime }}</em>
</div>
<div class="rc-footer">
<span @click="usergetconf(item)">立即领取</span>
<div class="rc-right">
<i>
{{ item.couponDesc }}
</i>
<div class="rc-main" id="rc-main">
<span>有效期</span>
<em>{{ item.validTo }}</em>
</div>
<div class="rc-footer">
<span @click="usergetconf(item)">立即领取</span>
</div>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogInfo2" @close="userclose">
<div class="rc-headera">
<div class="rc-title">
<img src="../../assets/error.png" alt="" />
</div>
<div class="rc-logmain">
<h3>温馨提示</h3>
<span>请先点击下方进行登录/注册</span>
</div>
<nuxt-link :to="`/userlogin/login/`">
<div class="userer">
<span>立即登录</span>
</div>
</nuxt-link>
</div>
</el-dialog>
<div class="rc-button rc-md-down">
<span @click="usertanchu(item, 0)">加入购物车</span>
<span @click="usertanchu(item, 1)">立即购买</span>
</div>
</el-dialog>
<el-dialog
:visible.sync="dialogInfo2"
@close='userclose'
>
<div class="rc-headera">
<div class="rc-title">
<img src="../../assets/error.png" alt="">
</div>
<div class="rc-logmain">
<h3>温馨提示</h3>
<span>请先点击下方进行登录/注册</span>
</div>
<nuxt-link :to="`/userlogin/login/`">
<div class="userer">
<span>立即登录</span>
</div>
</nuxt-link>
</div>
</el-dialog>
<div class="rc-button rc-md-down">
<span @click="usertanchu(item,0)">加入购物车</span>
<span @click="usertanchu(item,1)">立即购买</span>
</div>
</div>
</template>
<script>
import Myheader from "~/components/header.vue";
import tabs from "@/components/tabs.vue";
import unlogin from "~/components/unlogin.vue";
import unlogin from "~/components/unlogin.vue";
import { mapMutations } from "vuex";
import Myfooter from "~/components/rc-footer.vue";
import {
goodsmessage,
getConfig,
postCourseId,
getdraw,
alldiscount,
} from "../../ajax/getData";
const settings = require("@/config");
import Myfooter from "~/components/rc-footer.vue";
import { goodsmessage,getConfig,postCourseId,getdraw,alldiscount } from "../../ajax/getData";
const settings = require("@/config");
export default {
// middleware: 'metaTitle',
// // middleware: 'metaTitle',
@ -331,57 +268,27 @@ export default {
catimage: require("../../assets/image/unused.png"),
},
],
fixedlist: [
fixedlist: [
{
title: "购物车",
catimage: require("../../assets/buy.png"),
catimage: require("../../assets/buy.png"),
},
{
title: "在线客服",
catimage: require("../../assets/service.png"),
},
{
title: "营养专家",
catimage: require("../../assets/consult.png"),
},
],
productAttachmentList: [
{
id: 15901,
attachmentType: 1,
attachmentPath:
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384849415_BLUWOs.jpg",
sort: 1,
},
{
id: 15902,
attachmentType: 1,
attachmentPath:
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384851821_jFleXA.jpg",
sort: 2,
},
{
id: 15903,
attachmentType: 1,
attachmentPath:
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384853824_GrxAIp.jpg",
sort: 3,
},
{
id: 15904,
attachmentType: 1,
attachmentPath:
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384856077_9FbE1z.jpg",
sort: 4,
},
{
id: 15905,
attachmentType: 1,
attachmentPath:
"https://miniapp-product.royalcanin.com.cn/rcmini/upload/1574384859055_iPkFXi.jpg",
sort: 5,
catimage: require("../../assets/consult.png"),
},
],
newlist: [
{
price: "167.00",
@ -402,9 +309,11 @@ export default {
},
],
};
},
components: {
components: {
Myheader,
tabs,
unlogin,
@ -436,32 +345,8 @@ this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
}
}
tabs,
magnifier,
unlogin,
Myfooter,
},
mounted() {
// window.addEventListener("scroll", this.handleScroll, true);
if (this.usermessage !== "" || this.usermessage.data !== undefined) {
this.usermessage = JSON.parse(localStorage.getItem("userInfo"));
let stype = this.$route.query.stype;
this.productCode = this.$route.query.productCode;
console.log(this.productCode);
this.userquery(this.productCode);
console.log(this.userlistmenu);
this.$nextTick(() => {});
if (stype == 1) {
this.userbuy = true;
} else if (stype == 2) {
console.log("这是要消失的");
this.$nextTick(() => {
this.userbuy = false;
});
}
}
},
methods: {
...mapMutations(["changemessage"]),
handleScroll(e)
@ -480,64 +365,48 @@ this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
}
},
lianxi(item, index) {
console.log(item, index);
if (item.title == "在线客服") {
var option = {
customer: {
id: "",
name: "",
email: "",
mobile: "",
memberId: "999999",
},
};
dis_livchat(option);
}
if (item.title == "购物车") {
console.log("---12314");
this.$router.push({
path: "../../myorder/userrecord",
});
}
if (item.title == "营养专家") {
var option = {
customer: {
id: "",
name: "",
email: "",
mobile: "",
memberId: "999999",
},
};
dis_livchat(option);
}
},
toTop() {
lianxi(item,index){
console.log(item,index);
if(item.title=='在线客服'){
var option = {
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
}
dis_livchat(option);
}
if(item.title=='购物车'){
console.log('---12314');
this.$router.push({
path: "../../myorder/userrecord",
});
}
if(item.title=='营养专家'){
var option = {
customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
}
dis_livchat(option);
}
},
toTop() {
let top = document.documentElement.scrollTop || document.body.scrollTop;
//
const timeTop = setInterval(() => {
document.body.scrollTop =
document.documentElement.scrollTop =
top -=
400;
document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
if (top <= 0) {
clearInterval(timeTop);
}
}, 10);
},
showmesg() {
console.log("-----");
this.toTop();
},
toTop() {
showmesg(){
console.log('-----');
this.toTop();
},
toTop() {
let top = document.documentElement.scrollTop || document.body.scrollTop;
//
const timeTop = setInterval(() => {
document.body.scrollTop =
document.documentElement.scrollTop =
top -=
400;
document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
if (top <= 0) {
clearInterval(timeTop);
}
@ -545,106 +414,137 @@ this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
},
//
usergetconf(item) {
console.log(item);
if (this.usermessage.data !== "" || this.usermessage.data !== undefined) {
this.getconf(this.usermessage.data.id, item.couponId);
}
},
usergetconf(item){
console.log(item);
if(this.usermessage.data!==''||this.usermessage.data!==undefined){
this.getconf(this.usermessage.data.id,item.couponId);
}
},
//
async getconf(memberId, couponId) {
let data = await getConfig(memberId, couponId);
if (data) {
this.$message({
type: "warning",
message: data.msg,
});
//
async getconf(memberId,couponId) {
let data = await getConfig(memberId,couponId);
if(data){
this.$message({
type: 'warning',
message: data.msg
});
console.log(data);
}
},
// changeName(newName){
// this.name = newName;
// },
userclose() {
console.log("这是关闭的");
this.userlist = [];
},
async userquery() {
userclose(){
console.log('这是关闭的');
this.userlist=[];
},
async userquery() {
console.log("-----");
let data = await goodsmessage(this.productCode);
if (data) {
this.newlist = data.data;
}
this.productAttachmentList = this.newlist[0].productAttachmentList;
if(data){
this.newlist=data.data;
}
this.userlistmenu=this.newlist[0].productAttachmentList;
let changemess=JSON.stringify(this.userlistmenu);
console.log(changemess);
this.changemessage({ data: changemess });
this.parent_msg=this.userlistmenu;
console.log( this.userlistmenu)
this.userlistmenu = this.newlist[0].productAttachmentList;
let changemess = JSON.stringify(this.userlistmenu);
// console.log(changemess);
// this.productAttachmentList = this.userlistmenu;
this.changemessage({ data: changemess });
this.parent_msg = this.userlistmenu;
// console.log(this.userlistmenu);
},
//
async userdraw(mobile) {
//
async userdraw(mobile) {
let data = await getdraw(mobile);
if (data) {
this.drawlist = data.data;
if(data){
this.drawlist=data.data;
}
},
//
async alldrawlist(memberId) {
//
async alldrawlist(memberId) {
let data = await alldiscount(memberId);
let userlist = [];
let menulsit = [];
if (data) {
this.alldraw = data;
let userlist=[];
let menulsit=[];
if(data){
this.alldraw=data;
// console.log(this.alldraw.data);
let alllist = [];
this.userlist = this.alldraw.data;
this.userlist.forEach((element, index) => {
if (typeof element.productCodes == "string") {
userlist.push(element);
// let s=element.productCodes.split(',');
// console.log(s.indexOf(this.productCode) != -1 )
// console.log('')
}
});
let menualist = [];
userlist.filter((item) => {
console.log(item);
item.productCodes = item.productCodes.split(",");
item.productCodes.forEach((element) => {
if (element == this.productCode && item.activityId !== 10) {
console.log(element);
console.log(this.productCode);
menualist.push(item);
let alllist=[];
this.userlist=this.alldraw.data;
this.userlist.forEach((element,index)=>{
if(typeof element.productCodes=='string'){
userlist.push(element);
// let s=element.productCodes.split(',');
// console.log(s.indexOf(this.productCode) != -1 )
// console.log('')
}
})
let menualist=[];
userlist.filter(item=>{
console.log(item);
item.productCodes=item.productCodes.split(',')
item.productCodes.forEach(element=>{
if(element==this.productCode &&item.activityId!==10){
console.log(element)
console.log(this.productCode)
menualist.push(item);
console.log('----');
}
})
})
this.usernewlist=menualist;
console.log(this.usernewlist);
console.log("----");
}
});
});
// this.usernewlist = menualist;
// console.log(this.usernewlist);
}
},
plus(num, index) {
this.sales_num = parseInt(this.sales_num) + 1;
console.log(this.sales_num);
},
//
sub(num, index) {
if (this.sales_num <= 1) {
this.sales_num = 1;
} else {
this.sales_num = parseInt(this.sales_num) - 1;
plus(num,index){
this.sales_num= parseInt(this.sales_num) + 1;
console.log( this.sales_num);
} ,
//
sub(num,index){
if( this.sales_num <= 1){
this.sales_num = 1;
}
else{
this.sales_num = parseInt(this.sales_num) - 1;
}
},
async courseId(item) {
console.log(item);
console.log(this.usermessage);
// let userid=JSON.parse(location.getItem('userInfo'));
// let mobile=JSON.parse(location.getItem('userInfo'));
// console.log(userid,mobile);
let data = await postCourseId( this.productCode,this.sales_num,this.usermessage.data.id,this.usermessage.data.mobile,item.picFile,item.productName,item.basePrice,item.specifications);
if(data){
this.productlist=data;
}
console.log(data);
},
usertanchu(item,orderm){
@ -688,44 +588,19 @@ usertanchu(item,orderm){
}
},
usertanchu(item, orderm) {
let user = localStorage.getItem("userInfo");
if (user == undefined || user == null || user == "") {
this.dialogInfo2 = true;
return;
} else {
this.courseId(item);
if (orderm == 0) {
this.$message({
type: "warning",
message: "加入购物车成功",
});
}
if (orderm == 1) {
this.$router.push({
path: "/myorder/userrecord",
});
}
}
},
userget() {
let user = localStorage.getItem("userInfo");
if (user == undefined || user == null || user == "") {
this.dialogInfo2 = true;
return;
} else {
this.userdraw(this.usermessage.data.mobile);
this.alldrawlist(this.usermessage.data.id);
this.dialogInfo1 = true;
}
},
selectsearch(item, index) {
this.activeIndexa = index;
selectsearch(item, index) {
this.activeIndexa=index;
},
},
onceproduct() {},
onceproduct(){
},
};
</script>
<style lang="less" scoped>