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

1
pages.json

@ -12,6 +12,7 @@
"bounce": "none", "bounce": "none",
"pullToRefresh": { "pullToRefresh": {
"style": "circle", "style": "circle",
"backgroundColor": "#000000",
"color": "#aa0000" "color": "#aa0000"
} }
// "renderer": "native" // "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" 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> --> <!-- <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"> <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> LOGIN / SIGUP>
</navigator> </navigator>
</view> </view>
<view class="info_name" v-else> <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}}.> Hey.{{user_info.nickname!=''?user_info.nickname:user_info.email}}.>
</navigator> </navigator>
</view> </view>
@ -505,12 +505,22 @@
background-color: #000000; background-color: #000000;
} }
.info_name{ .info_name{
font-size: 20px;
font-weight: bold;
color: #F7F7F7;
margin-bottom: 57px;
position: absolute; 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{ .info_like{
display: flex; display: flex;

273
pages/account/message.vue

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

1
pages/category/productList.vue

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

53
pages/index/index.vue

@ -11,6 +11,7 @@
data() { data() {
return { return {
mycurrent: 0,
isScrollShow: false, isScrollShow: false,
scroll_active: 0, scroll_active: 0,
scrollList: [ scrollList: [
@ -251,6 +252,9 @@
}, },
methods: { methods: {
handlechange(e) {
this.mycurrent = e.detail.current
},
change(e) { change(e) {
this.index = e this.index = e
let tarbar = this.tarbar let tarbar = this.tarbar
@ -1328,12 +1332,32 @@
v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'"> v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'">
<view class="spike1_item padding_honlist2" v-for="(item1,index1) in item.blocks" <view class="spike1_item padding_honlist2" v-for="(item1,index1) in item.blocks"
:key="item1.block_id"> :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="" <image :src="item1.block_pic" mode=""
:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}" :style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
@click="imgTo(item1)"></image> @click="imgTo(item1)"></image>
</view> </view>
</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> </scroll-view>
<!-- 标题 --> <!-- 标题 -->
@ -1552,6 +1576,27 @@
} }
</style> </style>
<style lang="scss" scoped> <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 { page {
background-color: white; background-color: white;
position: relative; position: relative;
@ -1602,7 +1647,7 @@
padding-bottom: 40rpx; padding-bottom: 40rpx;
// line-height: 300rpx; // line-height: 300rpx;
text-align: center; text-align: center;
line-height: 115rpx; line-height: 115rpx;
} }
@ -1772,7 +1817,7 @@
background-color: #000000; background-color: #000000;
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 99; z-index: 99999999;
// opacity: 0.8; // opacity: 0.8;
// height: 260rpx; // height: 260rpx;
width: 100%; width: 100%;
@ -1841,7 +1886,7 @@
.navigation_scroll { .navigation_scroll {
// margin-top: -80rpx; // margin-top: -80rpx;
// padding-top: 10rpx; // padding-top: 10rpx;
padding-top: 10px; padding-top: 15px;
// margin: 20rpx 0 !important; // margin: 20rpx 0 !important;
// position: fixed; // position: fixed;
padding-bottom: 10rpx; padding-bottom: 10rpx;

30
pages/productDetails/index.vue

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

35
pages/shippingCart/index.vue

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

Loading…
Cancel
Save