Browse Source

主要修改购物车功能

master
zhengshuiqi 3 years ago
parent
commit
c651676969
  1. 6
      common/common.scss
  2. 1
      pages.json
  3. 24
      pages/account/index.vue
  4. 273
      pages/account/message.vue
  5. 2
      pages/account/wishlist.vue
  6. 1
      pages/category/productList.vue
  7. 53
      pages/index/index.vue
  8. 30
      pages/productDetails/index.vue
  9. 35
      pages/shippingCart/index.vue

6
common/common.scss

@ -1132,14 +1132,14 @@
// margin-right: 18.67rpx;
box-sizing: border-box;
&:nth-child(2n+0){
padding-left: 10px;
}
.wishlist_item_img{
width: 90%;
width: 100%;
height: 190px;
object-fit: cover;
margin-bottom: 25.33rpx;
margin-bottom: 20rpx;
background-color: #999999;
position: relative;
border-radius: 10rpx;

1
pages.json

@ -12,6 +12,7 @@
"bounce": "none",
"pullToRefresh": {
"style": "circle",
"backgroundColor": "#000000",
"color": "#aa0000"
}
// "renderer": "native"

24
pages/account/index.vue

@ -10,12 +10,12 @@
<image :src="user_info.user_head" mode="" class="header_img" v-show="user_info.isLogin&&user_info.user_head" @click="seeImg()"></image>
<!-- <image :src="user_info.user_head?user_info.user_head:user_info.headicons[5]" mode="" class="header_img" v-if="user_info.isLogin"></image> -->
<view class="info_name" v-if="!user_info.isLogin">
<navigator url="/pages/login/index" >
<navigator class="info_name_a" url="/pages/login/index" >
LOGIN / SIGUP>
</navigator>
</view>
<view class="info_name" v-else>
<navigator url="/pages/account/myProfile" >
<navigator class="info_name_a" url="/pages/account/myProfile" >
Hey.{{user_info.nickname!=''?user_info.nickname:user_info.email}}.>
</navigator>
</view>
@ -505,12 +505,22 @@
background-color: #000000;
}
.info_name{
font-size: 20px;
font-weight: bold;
color: #F7F7F7;
margin-bottom: 57px;
position: absolute;
padding: 50px 50px 0;
width: 100%;
top: 25px;
left: 15%;
// z-index: 1111;
// font-size: 20px;
// font-weight: bold;
// color: #F7F7F7;
// margin-bottom: 57px;
// position: absolute;
// padding: 100px 50px 0;
// top: 23px;
&_a {
z-index: 1111;font-size: 20px;font-weight: bold;color: #F7F7F7;margin-bottom: 57px;position: absolute;padding: 100px 50px 0;
}
}
.info_like{
display: flex;

273
pages/account/message.vue

@ -1,155 +1,170 @@
<template>
<view class="message">
<view class="body">
<view class="font">
<!-- <uni-icons style="padding-left: 11px;color: white;" type="arrow-left" size="30" @click="back"></uni-icons> -->
<uni-icons style="padding-left: 11px;color: white;font-weight: 100;" type="back" size="30" @click="back"></uni-icons>
<uni-icons style="padding-left: 11px;color: white;font-weight: 100;cursor: pointer;" type="back" size="23" @click="backs"></uni-icons>
<text style="margin-left: 30%;color: white;">Message</text>
</view>
<view class="body">
<view class="body-i">
<!-- <image src="../../static/img/message.png" mode=""></image> -->
<view class="empty_item" v-if="!List">
<view class="empty_item_img">
<image src="../../static/img/message.png" mode=""></image>
</view>
<button class="body-btn">Continue shopping</button>
<view>No comment!</view>
<!-- <view><button @click="gotoindex()">Go to see</button></view> -->
</view>
<view class="mask" v-show="isShwo" @click="isShwo=false"></view>
<button class="body-btn">Continue shopping</button>
</view>
</template>
<script>
import {defaultRequest} from '../../api/index.js'
import {
defaultRequest
} from '../../api/index.js'
export default {
data() {
return {
list:[],
list: [],
//
myMes:{
_action:'getmessagelist',
type:1,
importance:'',
label:'',
title:'',
page_index:1,
page_size:100
myMes: {
_action: 'getmessagelist',
type: 1,
importance: '',
label: '',
title: '',
page_index: 1,
page_size: 100
},
//
myMes1:{
_action:'getmessagelist',
type:0,
importance:'',
label:'',
title:'',
page_index:1,
page_size:100
myMes1: {
_action: 'getmessagelist',
type: 0,
importance: '',
label: '',
title: '',
page_index: 1,
page_size: 100
},
app_Mes:[],
app_Mes: [],
}
},
filters:{
Mes(e){
filters: {
Mes(e) {
let str = e
str=str.substring(0,10);
const year = str.substring(0,4)
let date = str.substring(5,10)
date = date.replace('-','/')
let time = date + '/'+year
str = str.substring(0, 10);
const year = str.substring(0, 4)
let date = str.substring(5, 10)
date = date.replace('-', '/')
let time = date + '/' + year
return time
}
},
methods:{
methods: {
// getList(){
// let data={_action:'getfavourableactivities'}
// defaultRequest(data).then(res=>{
// console.info(res)
// if(res.error==0){
// // this.list=res.data
// }
// })
// },
getMes(){
let data ={ _action:'getpagedata',pagecode:'006-PERSONALCENTERPAGE'
getMes() {
let data = {
_action: 'getpagedata',
pagecode: '006-PERSONALCENTERPAGE'
}
defaultRequest(data).then(res =>{
defaultRequest(data).then(res => {
let list = res.data.zones
list.map(item =>{
if(item.zone_code =='XIAOXI'){
list.map(item => {
if (item.zone_code == 'XIAOXI') {
this.list = item
console.log(this.list)
}
})
})
defaultRequest(this.myMes).then(res =>{
defaultRequest(this.myMes).then(res => {
console.log(res)
let i = 0
if(res.error ==0){
if (res.error == 0) {
this.app_Mes = res.data.message_list
this.app_Mes.map( item =>{
// console.log(item)
if(item.unread == 1){
i++
}
})
console.log(i)
this.app_Mes.map(item => {
// console.log(item)
if (item.unread == 1) {
i++
}
})
console.log(i)
}
})
defaultRequest(this.myMes1).then(res =>{
defaultRequest(this.myMes1).then(res => {
// console.log(res)
if(res.error == 0){
if (res.error == 0) {
this.app_Mes = res.data.message_list
console.log(this.app_Mes)
}
})
},
gotopage(item){
let data ={
_action:'readmessage',
message_id:''
gotopage(item) {
let data = {
_action: 'readmessage',
message_id: ''
}
console.log(item)
if(item.id){
if (item.id) {
data.message_id = item.id
}
// else{
// data.message_id = item.block_id
// }
defaultRequest(data).then(res =>{
if(res.error == 0){
defaultRequest(data).then(res => {
if (res.error == 0) {
uni.showToast({
title:'Read',
icon:'none'
title: 'Read',
icon: 'none'
})
console.log(res)
this.getMes()
}
})
if(item.block_link){
if(item.block_link.includes('goodslist')){
if (item.block_link) {
if (item.block_link.includes('goodslist')) {
const i = item.block_link.indexOf('?')
const src = item.block_link.substring(i)
uni.navigateTo({
url:'../category/productList'+src
url: '../category/productList' + src
})
}else{
} else {
uni.navigateTo({
url:'../productDetails/index'+src
url: '../productDetails/index' + src
})
}
}
},
back(){
uni.navigateBack()
backs() {
// uni.navigateTo({
// url:'../category/index'
// })
uni.navigateTo({
// url:'index'
url:'../category/index'
// url:'../account/index'
})
}
},
onLoad() {
@ -158,49 +173,77 @@
}
}
</script>
<style>
page{
height: 100vh;
background-color: #f6f5fa !important;
}
</style>
<style lang="scss" scoped>
.font {
display: flex;
position: fixed;
background-color: #000;
height: 56px;
width: 100%;
z-index: 999;
// padding-top: 28px;
align-items: center;
text-align: center;
top: 0;
left: 0;
font-size: 20px;
font-weight: bold;
}
.body {
margin-top: 56px;
display: flex;
justify-content: center;
position: fixed;
background-color: #000;
height: 44px;
width: 100%;
z-index: 999;
// padding-top: 28px;
align-items: center;
flex-direction: column;
height: 100%;
.body-i {
object-fit: cover;
width: 336px;
height: 106px;
margin-top: 61px;
background: url('../../static/img/message.png') center;
background-size: auto;
background-repeat: no-repeat;
text-align: center;
top: 0;
left: 0;
font-size: 16px;
// font-weight: bold;
}
.empty_item {
height: auto;
margin: 79px 0 0;
padding: 10px 50px 0 50px;
&_img {
margin-bottom: 0;
}
}
.body {
padding: 0 32rpx;
&-btn {
margin-top: 42px;
// margin-top: 42px;
background: #000;
border-radius: 8px;
color: #fff;
width: 200px;
height: auto;
transform: scale(.5);
}
}
.more {
text-align: right;
position: relative;
// margin-top: 20rpx;
image {
width: 24rpx;
height: 6.67rpx;
}
.more_delete {
background-image: url(@/static/img/message.png);
background-size: 100% 100%;
width: 102.67rpx;
height: 67.33rpx;
position: absolute;
right: 0;
bottom: 20rpx;
line-height: 50rpx;
text-align: center;
font-size: 24rpx;
z-index: 999;
}
}
</style>
.mask {
background-color: white;
opacity: 0;
}
</style>

2
pages/account/wishlist.vue

@ -14,7 +14,7 @@
</view>
<view class="wishlist_item_bottom">
<text style="margin-left: 4px;">US${{item.promote_price?item.promote_price:item.shop_price}}</text>
<image src="../../static/icon/cat_white.png" mode="" style="margin-right: 8px;" class="wishlist_item_bottom_icon" @click="isCart=true,getDate(item)"></image>
<image src="../../static/icon/cat_white.png" mode="" style="margin-right: 0px;" class="wishlist_item_bottom_icon" @click="isCart=true,getDate(item)"></image>
<!-- <image src="../../static/img/delete.png" mode="" class="wishlist_item_bottom_icon" @click="removeL(item)"> --></image>
</view>
</view>

1
pages/category/productList.vue

@ -558,6 +558,7 @@
}
.nav_right{
padding-right: 30rpx;
padding-top:10rpx;
image{
width: 44rpx;
height: 44rpx;

53
pages/index/index.vue

@ -11,6 +11,7 @@
data() {
return {
mycurrent: 0,
isScrollShow: false,
scroll_active: 0,
scrollList: [
@ -251,6 +252,9 @@
},
methods: {
handlechange(e) {
this.mycurrent = e.detail.current
},
change(e) {
this.index = e
let tarbar = this.tarbar
@ -1328,12 +1332,32 @@
v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'">
<view class="spike1_item padding_honlist2" v-for="(item1,index1) in item.blocks"
:key="item1.block_id">
<view class="item_img">
<view :class="['swiper-item',index==mycurrent ? 'active' : ''], item_img" >
<!-- class="item_img"> -->
<image :src="item1.block_pic" mode=""
:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
@click="imgTo(item1)"></image>
</view>
</view>
<!-- 轮播图 -->
<!-- <view> -->
<!-- previous-margin指的是当前图片的左边框距离屏幕最左边的距离 -->
<!-- <swiper class="spike1 page_padding" scroll-x="true" :show-scrollbar="false"
v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" style="height: 600rpx;"
previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"
:indicator-dots="true" :circular="true" :interval="3000" :duration="1000">
<swiper-item v-for="(item1,index1) in item.blocks" :key="item1.block_id"> -->
<!-- v-for="(item1,index1) in item.blocks" :key="item1.block_id"> -->
<!-- v-for="i,index in 10" :key="i" -->
<!-- <view :class="['swiper-items',index==mycurrent ? 'active' : '']">
<img :src="item1.block_pic" mode=""
:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
@click="imgTo(item1)">
</view>
</swiper-item>
</swiper>
</view> -->
</scroll-view>
<!-- 标题 -->
@ -1552,6 +1576,27 @@
}
</style>
<style lang="scss" scoped>
.swiper-items {
border-radius: 30rpx;
overflow: hidden;
// widthprevious-margin next-margin
// previous-marginnext-marginheight
// width: 450rpx;
height: 85%;
transform: scale(0.8);
transition: all 0.5s ease;
text-align: center;
transition: all 0.5s ease-in-out;
&.active {
transform: scale(1);
}
.uni-swiper-dots {
display: none;
}
}
page {
background-color: white;
position: relative;
@ -1602,7 +1647,7 @@
padding-bottom: 40rpx;
// line-height: 300rpx;
text-align: center;
line-height: 115rpx;
}
@ -1772,7 +1817,7 @@
background-color: #000000;
position: fixed;
top: 0;
z-index: 99;
z-index: 99999999;
// opacity: 0.8;
// height: 260rpx;
width: 100%;
@ -1841,7 +1886,7 @@
.navigation_scroll {
// margin-top: -80rpx;
// padding-top: 10rpx;
padding-top: 10px;
padding-top: 15px;
// margin: 20rpx 0 !important;
// position: fixed;
padding-bottom: 10rpx;

30
pages/productDetails/index.vue

@ -305,9 +305,10 @@
</view>
</scroll-view>
</view> -->
<view class="productImage_image1">
<!-- 产品详情页最后一张图片 -->
<!-- <view class="productImage_image1">
<image :src="goodsDate.goods_thumb" mode=""></image>
</view>
</view> -->
<view class="recommend">
<view class="recommend_title">You might also like</view>
<view class="recommend_content">
@ -1115,10 +1116,19 @@
}
</style>
<style lang="scss" scoped>
page {
background-color: #000 !important;
overflow-x: auto !important;
}
.body{
background-color: #000;
color:white;
padding-bottom: 35px;
// padding-bottom: 35px;
overflow: hidden;
box-sizing: border-box;
height: auto;
padding-bottom: -30px;
overflow-x: auto !important;
}
.bg_b{
background-color: #000000;
@ -1748,7 +1758,7 @@
padding: 0 12px;
flex-wrap: nowrap;
margin: 7px 0;
align-items: center;
line-height: 60rpx;
}
@ -1757,6 +1767,7 @@
height: 25rpx;
width: 30rpx;
padding-top: 5.37rpx;
line-height: 0px;
image{
height: 100%;
width: 100%;
@ -1785,7 +1796,7 @@
}
.nav_right{
padding-right: 30rpx;
padding-top: 9px;
padding-top: 10px;
image{
width: 44rpx;
height: 44rpx;
@ -2227,5 +2238,14 @@
}
uni-page-wrapper {
background: #000;
height: auto;
}
/deep/ body.pages-productDetails-index {
background-color: #000 !important;
overflow-x: auto !important;
height: 100%;
}
body {
background-color: #000;
}
</style>

35
pages/shippingCart/index.vue

@ -15,8 +15,10 @@
</navigator>
</view>
<template v-else>
<!-- <template v-else> -->
<template v-if="inlist.length>0">
<view class="cart_info" v-if="money>0">
<!-- <view class="cart_info" v-if="inlist.length>0"> -->
<image src="/static/img/Shipped.png" mode=""></image>
<view class="cart_title_content">Buy <text style="color:darkred;margin-left: 10rpx;margin-right: 10rpx;font-weight: 500;">US${{ money }}</text>more to enjoy FREE STANDARD SHIPPING!</view>
<view class="cart_title_right" @click="gotAdd()">Add</view>
@ -34,29 +36,30 @@
<view class="cart">
<view class="cart_content">
<view class="good_info" v-for="(gitem,index) in inlist" :key="gitem.rec_id">
<!-- 左侧按钮 -->
<image src="../../static/img/select1.png" mode="" class="cart_select" v-show="gitem.is_check==1"
@click="cartCheck(1,0,gitem.rec_id,gitem)"></image>
<image src="../../static/img/select2.png" mode="" class="cart_select" v-show="gitem.is_check==0"
@click="cartCheck(1,1,gitem.rec_id,gitem)"></image>
<view class="good_info_left ">
<!-- 左侧图片 -->
<view class="good_info_image" @click="goDetails(gitem.goods_id)">
<image :src="gitem.goods_thumb" mode=""></image>
</view>
<view class="left_info">
<view class="info_name">{{gitem.goods_name}}</view>
<view class="info_name" style="margin-top: 10px;">{{gitem.goods_name}}</view>
<!-- 中间框内 -->
<view class="left_info_bottom" v-if="gitem.goods_attr">
<view class="info_lable">
<view class="info_lable_text">{{gitem.goods_attr}}</view>
<view class="info_lable_text">{{gitem.goods_attr}}</view>
<!-- <image src="/static/img/bottom.png" mode="" @click="ChangeAttr(gitem)"></image> -->
<view class="image-v"><image src="/static/img/bottom.png" mode="" @click="ChangeAttr(gitem)"></image></view>
</view>
</view>
<view class="left_info_bottom2" v-if="!gitem.goods_attr"></view>
<view class="info_price">
<text>US${{gitem.goods_price}}</text>
<uni-number-box background="#FFFFFF" :min="1" :value="gitem.goods_number"
<view class="info_price" style="">
<text style="margin-top: -20px;">US${{gitem.goods_price}}</text>
<uni-number-box background="#FFFFFF" style="margin-top: -20px;" :min="1" :value="gitem.goods_number"
@change="updateCart($event,gitem.rec_id)"></uni-number-box>
</view>
@ -669,7 +672,8 @@
}else{
this.inlist = uni.getStorageSync('cartlist')
// bug
// this.inlist = uni.getStorageSync('cartlist')
}
}
@ -1445,7 +1449,7 @@
width: 15rpx;
margin-left:6rpx ;
float: right;
margin-bottom: 20rpx;
margin-bottom: 25rpx;
image{
height: 100%;
width: 100%;
@ -1455,12 +1459,19 @@
.info_lable {
display: flex;
height: 40rpx;
padding-left: 10rpx;
align-items: center;
height: 30rpx;
margin-top: -20px;
// height: 40rpx;
padding-left: 10rpx;
// border: 1px solid #C4C4C4;
overflow: hidden;
// border: none !important;
.info_lable_text {
//
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: -3rpx;
}

Loading…
Cancel
Save