commit
54e410ff8d
461 changed files with 52796 additions and 0 deletions
@ -0,0 +1,18 @@ |
|||
# Mac |
|||
.DS_Store |
|||
**/.DS_Store |
|||
|
|||
# vim/vi |
|||
*.swp |
|||
|
|||
# JavaScript |
|||
node_modules/ |
|||
.node_modules/ |
|||
.eslintcache |
|||
unpackage/dist/build/ |
|||
unpackage/dist/dev/ |
|||
unpackage/cache/ |
|||
unpackage/release/ |
|||
unpackage/debug/ |
|||
# python |
|||
*.pyc |
|||
@ -0,0 +1,24 @@ |
|||
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/ |
|||
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数 |
|||
"version": "0.0", |
|||
"configurations": [{ |
|||
"app-plus" : |
|||
{ |
|||
"launchtype" : "local" |
|||
}, |
|||
"default" : |
|||
{ |
|||
"launchtype" : "local" |
|||
}, |
|||
"h5" : |
|||
{ |
|||
"launchtype" : "local" |
|||
}, |
|||
"mp-weixin" : |
|||
{ |
|||
"launchtype" : "local" |
|||
}, |
|||
"type" : "uniCloud" |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
<script> |
|||
export default { |
|||
onLaunch: function() { |
|||
// console.log('App Launch') |
|||
}, |
|||
onShow: function() { |
|||
// console.log('App Show') |
|||
}, |
|||
onHide: function() { |
|||
// console.log('App Hide') |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
/*每个页面公共css */ |
|||
@import "@/common/common.scss"; |
|||
</style> |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"prompt" : "none" |
|||
} |
|||
@ -0,0 +1,76 @@ |
|||
import httpRequest from './request'; |
|||
|
|||
//默认请求地址
|
|||
export const defaultRequest =query=>{ |
|||
return httpRequest({ |
|||
url:'mapi/api_v2011.php?appcode=DOPE+', |
|||
method:'post', |
|||
data:query, |
|||
errMsg:true, |
|||
isCookies:false, |
|||
isEncryption:false, |
|||
isLoad:true |
|||
}) |
|||
} |
|||
|
|||
//默认请求地址 不显示错误信息
|
|||
export const defaultRequest1 =query=>{ |
|||
return httpRequest({ |
|||
url:'mapi/api_v2011.php?appcode=DOPE+', |
|||
method:'post', |
|||
data:query, |
|||
errMsg:false, |
|||
isCookies:false, |
|||
isEncryption:false, |
|||
isLoad:true |
|||
}) |
|||
} |
|||
//默认请求地址 只用cookies请求数据
|
|||
export const defaultRequest2 =query=>{ |
|||
return httpRequest({ |
|||
url:'mapi/api_v2011.php?appcode=DOPE+', |
|||
method:'post', |
|||
data:query, |
|||
errMsg:true, |
|||
isCookies:true, |
|||
isEncryption:false, |
|||
isLoad:true |
|||
}) |
|||
} |
|||
//默认请求地址 只用cookies请求数据 对里面的对象进行加密
|
|||
export const defaultRequest3 =(query,key)=>{ |
|||
return httpRequest({ |
|||
url:'mapi/api_v2011.php?appcode=DOPE+', |
|||
method:'post', |
|||
data:query, |
|||
errMsg:true, |
|||
isCookies:true, |
|||
isEncryption:true, |
|||
isLoad:true, |
|||
key:key |
|||
}) |
|||
} |
|||
//默认请求地址 不显示等待加载
|
|||
export const defaultRequest4 =query=>{ |
|||
return httpRequest({ |
|||
url:'mapi/api_v2011.php?appcode=DOPE+', |
|||
method:'post', |
|||
data:query, |
|||
errMsg:true, |
|||
isCookies:false, |
|||
isEncryption:false, |
|||
isLoad:false |
|||
}) |
|||
} |
|||
|
|||
export const defaultRequest5 =query=>{ |
|||
return httpRequest({ |
|||
url:'mapi/api_v2011.php?appcode=DOPE+', |
|||
method:'post', |
|||
data:query, |
|||
errMsg:true, |
|||
isCookies:false, |
|||
isEncryption:false, |
|||
isLoad:false |
|||
}) |
|||
} |
|||
@ -0,0 +1,99 @@ |
|||
import config from '../config.js' |
|||
import { encryptDes, decryptDes ,encrypt_by_des } from '@/utils/des.js' |
|||
import Base64 from 'base-64'; |
|||
import cryptoJS from "crypto-js" |
|||
|
|||
const httpRequest = (params) => { |
|||
if(params.isLoad){ |
|||
uni.showLoading({ |
|||
title: "努力加载中..." |
|||
}); |
|||
} |
|||
|
|||
const json_data={ |
|||
appcode:'DOPE+' ,//应用编码
|
|||
appchannel:'FXXXXHUAWEI' ,//应用发布渠道
|
|||
appver: '1.0.0',//应用版本
|
|||
appname:'cnic_buyer' ,//应用名称
|
|||
manufacturer:'HUAWEI' ,//设备生产商
|
|||
phonebrand:'HORNOR' ,//设备品牌
|
|||
phonetype:'X30' ,//设备型号
|
|||
phoneos:'ANDROID'// 设备系统
|
|||
} |
|||
let data=Object.assign(json_data,params.data) |
|||
console.info(data) |
|||
let key=params.key |
|||
if(params.isEncryption){ |
|||
// console.info(JSON.parse(JSON.stringify(data.consignee)))
|
|||
key=encryption(JSON.parse(JSON.stringify(data[params.key]))) |
|||
// console.info(consignee)
|
|||
data=encryption(data) |
|||
data[params.key]=key |
|||
}else{ |
|||
data=encryption(data) |
|||
} |
|||
|
|||
// console.info(data)
|
|||
//进行加密
|
|||
// console.info(encryptDes(JSON.stringify(data),'6780f04cf2e211ec86a8005056c00008'))
|
|||
// console.info(encrypt_by_des(JSON.stringify(data),'6780f04cf2e211ec86a8005056c00008'))
|
|||
// data=Base64.encode(encryptDes(JSON.stringify(data),'6780f04cf2e211ec86a8005056c00008'));
|
|||
data=encryptDes(JSON.stringify(data),'6780f04cf2e211ec86a8005056c00008'); |
|||
// console.info(data)
|
|||
// 解密
|
|||
// let data2 =JSON.parse(decodeURIComponent (decryptDes(Base64.decode(data),'6780f04cf2e211ec86a8005056c00008'))) ;
|
|||
// console.info(data2)
|
|||
|
|||
let data1={data:data} |
|||
|
|||
let httpOptions = { |
|||
url: config.apiUri + params.url, |
|||
data:data1, |
|||
method: params.method, |
|||
header: { |
|||
'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8', |
|||
// 'cookies':uni.getStorageSync('cookies') || ""
|
|||
} |
|||
}; |
|||
return new Promise((resolve, reject) => { |
|||
uni.request({ |
|||
...httpOptions, |
|||
success: res => { |
|||
// console.info(res)
|
|||
uni.hideLoading(); |
|||
// 进行解密
|
|||
res.data=JSON.parse(decryptDes(res.data,'6780f04cf2e211ec86a8005056c00008')) |
|||
// res.data=Base64.decode(decryptDes(res.data,'6780f04cf2e211ec86a8005056c00008'));
|
|||
// console.info(res.data)
|
|||
if(res.data.error!=0 && params.errMsg){ |
|||
uni.showToast({ |
|||
title: res.data.message, |
|||
icon:'none', |
|||
duration: 2000 |
|||
}); |
|||
} |
|||
if(res.data.error!=0 && params.isCookies){ |
|||
let user_info=uni.getStorageSync('user_info') |
|||
user_info.isLogin=false |
|||
uni.setStorageSync('user_info',user_info) |
|||
} |
|||
resolve(res.data); |
|||
}, |
|||
fail: err => { |
|||
|
|||
uni.hideLoading(); |
|||
reject(err); |
|||
} |
|||
}) |
|||
}) |
|||
|
|||
} |
|||
const encryption=(data)=>{ |
|||
for(let key in data){ |
|||
let item= data[key] |
|||
data[key]=encodeURIComponent(item) |
|||
} |
|||
return data |
|||
} |
|||
|
|||
export default httpRequest; |
|||
@ -0,0 +1,645 @@ |
|||
.status_bar { |
|||
height: var(--status-bar-height); |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
//地址信息 |
|||
.address{ |
|||
padding-top: 33.33rpx; |
|||
padding-bottom: 36rpx; |
|||
padding-left: 29.33rpx; |
|||
padding-right: 22.67rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-bottom: 14.67rpx #F6F5FA solid; |
|||
position: relative; |
|||
.address_left{ |
|||
|
|||
.address_title{ |
|||
display: flex; |
|||
align-items: center; |
|||
color: #666666; |
|||
font-size: 24rpx; |
|||
margin-bottom: 30.67rpx; |
|||
|
|||
image{ |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
.address_title_name{ |
|||
font-size: 28rpx; |
|||
color: black; |
|||
font-weight: bold; |
|||
margin-left: 24rpx; |
|||
margin-right: 38.67rpx; |
|||
} |
|||
} |
|||
.address_content{ |
|||
padding-left: 56rpx; |
|||
color: #666666; |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.address_xian{ |
|||
height: 4rpx; |
|||
width: 100%; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
.address_more{ |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
|
|||
// 评价 |
|||
.reviews_item{ |
|||
padding: 34rpx 0; |
|||
border-bottom: 1px solid #E2E2E2; |
|||
&:last-child{ |
|||
border-bottom: none; |
|||
} |
|||
.reviews_item_title{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.reviews_title_user{ |
|||
font-size: 32rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #3D3D3D; |
|||
text{ |
|||
display: inline-block; |
|||
margin-right: 26rpx; |
|||
} |
|||
} |
|||
.reviews_title_time{ |
|||
font-size: 24rpx; |
|||
font-weight: 400; |
|||
color: #909090; |
|||
} |
|||
} |
|||
.reviews_item_color{ |
|||
font-size: 24rpx; |
|||
color: #909090; |
|||
font-weight: 400; |
|||
margin-bottom: 21.33rpx; |
|||
margin-top: 10rpx; |
|||
} |
|||
.reviews_item_content{ |
|||
font-size: 26.67rpx; |
|||
font-weight: 400; |
|||
margin-bottom: 34.67rpx; |
|||
} |
|||
.reviews_item_image{ |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.reviews_image_content{ |
|||
width: 233.33rpx; |
|||
height: 233.33rpx; |
|||
margin-left: 16.67rpx; |
|||
background-color: #999999; |
|||
&:first-child{ |
|||
margin-left: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 谈判细节 |
|||
.order_popup{ |
|||
position: fixed; |
|||
z-index: 999; |
|||
background-color: white; |
|||
width: 100%; |
|||
bottom: 0; |
|||
|
|||
.order_popup_title{ |
|||
position: relative; |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
border-bottom: 1px solid #E2E2E2; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding-top: 44.67rpx; |
|||
padding-bottom: 30.67rpx; |
|||
|
|||
image{ |
|||
width: 21.33rpx; |
|||
height: 21.33rpx; |
|||
position: absolute; |
|||
right: 26rpx; |
|||
top: 50%; |
|||
margin-top: -5.5rpx; |
|||
} |
|||
.order_popup_title_span{ |
|||
color: #B22234; |
|||
} |
|||
|
|||
} |
|||
.order_popup_commodity{ |
|||
border-bottom:1px solid #E2E2E2 ; |
|||
padding-bottom: 40rpx; |
|||
} |
|||
.order_popup_coupons{ |
|||
padding:0 26.67rpx; |
|||
padding-top: 28rpx; |
|||
padding-bottom: 106.67rpx; |
|||
|
|||
} |
|||
|
|||
.order_popup_pay{ |
|||
padding: 0 26.67rpx; |
|||
padding-bottom: 56.67rpx; |
|||
|
|||
.pay_item{ |
|||
border-bottom: 1px solid #EEEEEE; |
|||
padding: 13.33rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
&:nth-child(4){ |
|||
border-bottom: none |
|||
} |
|||
.pay_item_select{ |
|||
width: 29.33rpx; |
|||
height: 29.33rpx; |
|||
margin-right: 26rpx; |
|||
|
|||
} |
|||
.pay_item_right{ |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
image{ |
|||
width: 74.67rpx; |
|||
height: 74.67rpx; |
|||
margin-right: 28.67rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
button{ |
|||
background: black; |
|||
color: white; |
|||
height: 88rpx; |
|||
line-height: 88rpx; |
|||
font-size: 26.67rpx; |
|||
font-weight: bold; |
|||
margin-top: 33.33rpx; |
|||
} |
|||
} |
|||
.order_popup_points{ |
|||
padding-bottom: 63.33rpx; |
|||
padding-left: 47.33rpx; |
|||
padding-top: 34.67rpx; |
|||
font-size: 28rpx; |
|||
|
|||
.points_item{ |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 40rpx; |
|||
&:last-child{ |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
image{ |
|||
width: 29.33rpx; |
|||
height: 29.33rpx; |
|||
margin-right: 26rpx; |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 遮罩层 |
|||
.mask{ |
|||
position: fixed; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: black; |
|||
opacity: 0.5; |
|||
z-index: 998; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
.wishlist_body{ |
|||
position: relative; |
|||
|
|||
} |
|||
.wishlist{ |
|||
padding: 0 26.67rpx; |
|||
display: flex; |
|||
// justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
|
|||
.wishlist_item{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
font-size: 25.33rpx; |
|||
font-weight: 500; |
|||
width: 33%; |
|||
margin-top: 33.33rpx; |
|||
// margin-right: 18.67rpx; |
|||
&:nth-child(3n+3){ |
|||
margin-right: 0; |
|||
} |
|||
|
|||
.wishlist_item_img{ |
|||
width: 220rpx; |
|||
height: 220rpx; |
|||
margin-bottom: 25.33rpx; |
|||
background-color: #999999; |
|||
position: relative; |
|||
|
|||
.wishlist_item_img_goods{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.select{ |
|||
position: absolute; |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
top: 8rpx; |
|||
right: 8rpx; |
|||
} |
|||
} |
|||
.wishlist_item_bottom{ |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 22.67rpx; |
|||
justify-content: space-between; |
|||
|
|||
.wishlist_item_bottom_icon{ |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.wishlist_foot{ |
|||
padding: 33.33rpx 26.67rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
border-top: 1px solid #F5F6FA; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
|
|||
.wishlist_foot_left{ |
|||
font-size: 36rpx; |
|||
font-weight: 400; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
image{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
margin-right: 9.33rpx; |
|||
} |
|||
} |
|||
.wishlist_foot_right{ |
|||
width: 164rpx; |
|||
height: 73.33rpx; |
|||
font-weight: bold; |
|||
|
|||
button{ |
|||
font-size: 26.67rpx; |
|||
line-height: 73.33rpx; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #C0C0C0; |
|||
color: #FFFFFF; |
|||
border: none; |
|||
border-radius: 0; |
|||
} |
|||
|
|||
.wishlist_foot_right_button{ |
|||
background-color: black !important; |
|||
} |
|||
} |
|||
|
|||
} |
|||
// 推荐 |
|||
.recommend{ |
|||
padding: 0 26.67rpx; |
|||
padding-top: 54rpx; |
|||
|
|||
.recommend_title{ |
|||
position: relative; |
|||
text-align: center; |
|||
font-size: 29.33rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 64rpx; |
|||
&::after{ |
|||
content: ""; |
|||
position: absolute; |
|||
bottom: -13.33rpx; |
|||
width: 53.33rpx; |
|||
height: 4rpx; |
|||
background-color: black; |
|||
left: 50%; |
|||
margin-left: -26rpx; |
|||
} |
|||
} |
|||
.recommend_content{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
font-size: 29.33rpx; |
|||
font-weight: 400; |
|||
|
|||
.recommend_content_item{ |
|||
width: 340rpx; |
|||
margin-bottom: 46.67rpx; |
|||
|
|||
.recommend_content_item_image{ |
|||
width: 100%; |
|||
height:340rpx ; |
|||
background-color: #999999; |
|||
margin-bottom: 37.33rpx; |
|||
|
|||
.recommend_content_item_image_name{ |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.recommend_content_item_pric{ |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
margin-top: 34rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// 优惠卷 |
|||
.coupons_item{ |
|||
display: flex; |
|||
background-color: #FEF6F4; |
|||
height: 186.67rpx; |
|||
color: #F66C46; |
|||
margin-bottom: 25.33rpx; |
|||
.coupons_item_left{ |
|||
width: 216.67rpx; |
|||
height: 100%; |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 20rpx; |
|||
font-weight: 400; |
|||
&:before{ |
|||
content: ""; |
|||
background-color: white; |
|||
z-index: 99; |
|||
position: absolute; |
|||
right: -15rpx; |
|||
top: 0; |
|||
width: 30rpx; |
|||
height: 20rpx; |
|||
border-radius: 0 0 15rpx 15rpx; |
|||
} |
|||
&:after{ |
|||
content: ""; |
|||
background-color: white; |
|||
z-index: 99; |
|||
position: absolute; |
|||
right: -15rpx; |
|||
bottom: 0; |
|||
width: 30rpx; |
|||
height: 20rpx; |
|||
border-radius: 15rpx 15rpx 0 0; |
|||
} |
|||
.item_left_prcie{ |
|||
font-weight: bold; |
|||
font-size: 40rpx; |
|||
// margin-bottom: 13.33rpx; |
|||
} |
|||
.item_left_span{ |
|||
text-align: center; |
|||
} |
|||
} |
|||
.coupons_item_right{ |
|||
width: 480.67rpx; |
|||
height: 100%; |
|||
font-size: 20rpx; |
|||
font-weight: 400; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
position: relative; |
|||
padding-left: 36rpx; |
|||
padding-right: 23.33rpx; |
|||
&:before{ |
|||
content: ""; |
|||
z-index: 99; |
|||
position: absolute; |
|||
left: -5rpx; |
|||
height: 120rpx; |
|||
border: dashed #F66C46 1rpx; |
|||
} |
|||
.coupons_item_right_select{ |
|||
width: 34.67rpx; |
|||
height: 34.67rpx; |
|||
position: absolute; |
|||
top: 12.67rpx; |
|||
right: 15.33rpx; |
|||
} |
|||
.coupons_item_right_bg{ |
|||
width: 82.67rpx; |
|||
height: 60.67rpx; |
|||
position: absolute; |
|||
top: 0; |
|||
right:116.67rpx; |
|||
} |
|||
.coupons_right_info{ |
|||
.coupons_right_info_title{ |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.coupons_right_info_time{ |
|||
font-size: 16rpx; |
|||
margin-top: 13.33rpx; |
|||
} |
|||
} |
|||
button{ |
|||
background: none; |
|||
border-radius: 0; |
|||
margin: 0; |
|||
border: #F66C46 1px solid; |
|||
font-size: 25.33rpx; |
|||
height: 39.33rpx; |
|||
line-height: 39.33rpx; |
|||
color: #F66C46; |
|||
font-weight: bold; |
|||
white-space:nowrap; |
|||
padding:0 10rpx; |
|||
box-sizing: content-box; |
|||
overflow: inherit; |
|||
&::after{ |
|||
content: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.login{ |
|||
padding: 0 32rpx; |
|||
|
|||
.login_input{ |
|||
height: 97.33rpx; |
|||
border: 1px solid #323333; |
|||
border-radius: 48.67rpx; |
|||
font-size: 22.67rpx; |
|||
padding-left: 33.33rpx; |
|||
margin-bottom: 56rpx; |
|||
} |
|||
.tips{ |
|||
color: #DA0303; |
|||
font-size: 18.67rpx; |
|||
font-weight: bold; |
|||
} |
|||
.forgot{ |
|||
font-size: 22.67rpx; |
|||
color: #666666; |
|||
margin-top: 29.33rpx; |
|||
text-align: right; |
|||
margin-bottom: 34.67rpx; |
|||
} |
|||
.login_submit{ |
|||
width: 100%; |
|||
height: 88rpx; |
|||
line-height: 88rpx; |
|||
background-color: #000000; |
|||
color: white; |
|||
// background-color: #e7e7e7; |
|||
// color: #666666; |
|||
border-radius: 6.67rpx; |
|||
margin-bottom: 52rpx; |
|||
font-weight: bold; |
|||
} |
|||
.login_submit1{ |
|||
background-color: #000000; |
|||
color: white; |
|||
} |
|||
.agreement{ |
|||
display: flex; |
|||
// align-items: center; |
|||
// padding: 0 33.33rpx; |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
|
|||
.agreement_image{ |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
margin-right: 13.33rpx; |
|||
padding-top: 4rpx; |
|||
} |
|||
.text{ |
|||
color: #4F92F1; |
|||
display: inline-block; |
|||
margin: 0 4px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 商品展示 |
|||
.good_info{ |
|||
padding: 40rpx 0; |
|||
font-size: 22.67rpx; |
|||
color: #666666; |
|||
font-weight: bold; |
|||
border-bottom: 2.67rpx solid #F1F1F1; |
|||
&:last-child{ |
|||
border-bottom: none; |
|||
} |
|||
.good_info_left{ |
|||
display: flex; |
|||
align-items: center; |
|||
.good_info_image{ |
|||
width: 200rpx ; |
|||
height: 200rpx; |
|||
background-color: #999999; |
|||
margin-right: 32.67rpx; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.left_info{ |
|||
|
|||
.info_name{ |
|||
font-size: 26.67rpx; |
|||
font-weight: 400; |
|||
width: 461.33rpx; |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; //溢出内容隐藏 |
|||
text-overflow: ellipsis; //文本溢出部分用省略号表示 |
|||
display: -webkit-box; //特别显示模式 |
|||
-webkit-line-clamp: 2; //行数 |
|||
line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
.left_info_bottom{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 32rpx; |
|||
color: #909090; |
|||
margin-top: 24rpx; |
|||
.info_lable{ |
|||
padding: 5.33rpx 20rpx; |
|||
font-size: 22.67rpx; |
|||
border-radius: 33.33rpx; |
|||
border: 1px solid #D3D3D3; |
|||
image{ |
|||
width: 17.33rpx; |
|||
height: 17.33rpx; |
|||
margin-left: 14.67rpx; |
|||
} |
|||
} |
|||
} |
|||
.info_price{ |
|||
font-size: 28rpx; |
|||
color: black; |
|||
font-weight: bold; |
|||
margin-top: 43.33rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
button{ |
|||
margin: 0; |
|||
height: 45.33rpx; |
|||
line-height: 45.33rpx; |
|||
border: #999999 solid 1px; |
|||
font-size: 17.33rpx; |
|||
color: #999999; |
|||
background: none; |
|||
&::after{ |
|||
content: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,261 @@ |
|||
.order_popup_commodity{ |
|||
padding:0 26rpx; |
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
// 订单详情 |
|||
.details_title{ |
|||
height: 176.67rpx; |
|||
background-color: #2C2C38; |
|||
width: 100%; |
|||
color: white; |
|||
font-size: 18.67rpx; |
|||
font-weight: bold; |
|||
border-top: 14.67rpx #F6F5FA solid; |
|||
|
|||
.shipped_right_text{ |
|||
width: 497.33rpx; |
|||
font-size: 33.33rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.cancelled{ |
|||
padding-left: 55.33rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
height: 100%; |
|||
justify-content: space-between; |
|||
|
|||
.cancelled_left{ |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
image{ |
|||
width: 61.33rpx; |
|||
height: 61.33rpx; |
|||
} |
|||
.cancelled_left_info{ |
|||
margin-left: 52.67rpx; |
|||
} |
|||
} |
|||
.cancelled_right{ |
|||
image{ |
|||
width: 34.67rpx; |
|||
height: 34.67rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.transit{ |
|||
padding-left: 74.67rpx; |
|||
padding-right: 16rpx; |
|||
|
|||
.cancelled_left{ |
|||
|
|||
image{ |
|||
width: 58.67rpx; |
|||
height: 58.67rpx; |
|||
} |
|||
.cancelled_left_info{ |
|||
margin-left: 49.33rpx; |
|||
} |
|||
} |
|||
} |
|||
.completed{ |
|||
padding-right: 20rpx; |
|||
|
|||
} |
|||
.toPaid{ |
|||
padding:0 31.33rpx; |
|||
} |
|||
.shipped{ |
|||
padding-left: 47.33rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
height: 100%; |
|||
|
|||
.shipped_left{ |
|||
background-image: url("@/static/img/order_bg.png"); |
|||
background-size: 100% 100%; |
|||
width: 114rpx; |
|||
height: 158.67rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-right: 30rpx; |
|||
image{ |
|||
width: 62.67rpx; |
|||
height: 62.67rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
.order_popup_commodity{ |
|||
border-bottom: 14.67rpx solid #F6F5FA; |
|||
} |
|||
.summary{ |
|||
border-bottom: 14.67rpx solid #F6F5FA; |
|||
padding:0 26rpx; |
|||
padding-top: 44rpx; |
|||
padding-bottom: 47.33rpx; |
|||
font-size: 28rpx; |
|||
&:last-child{ |
|||
border-bottom: none; |
|||
} |
|||
.summary_title{ |
|||
font-weight: bold; |
|||
margin-bottom: 35.33rpx; |
|||
} |
|||
.summary_item{ |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 41.33rpx; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
&:last-child{ |
|||
margin-bottom: 0; |
|||
} |
|||
.summary_item_text{ |
|||
color: #777777; |
|||
} |
|||
.summary_item_text1{ |
|||
color: #3C3B6E; |
|||
} |
|||
.summary_item_right{ |
|||
color: #3C3B6E; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
button{ |
|||
font-size: 20rpx; |
|||
color: black; |
|||
height: 28.67rpx; |
|||
border-radius: 0; |
|||
padding:0 15rpx; |
|||
line-height: 28.67rpx; |
|||
background:none; |
|||
margin-left: 15.33rpx; |
|||
} |
|||
} |
|||
.summary_item_right1{ |
|||
color: #B22234; |
|||
} |
|||
} |
|||
.summary_tips{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
color: #B22234; |
|||
font-size: 24rpx; |
|||
font-weight: 400; |
|||
image{ |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
margin-right: 13.33rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.details_footer{ |
|||
padding: 34rpx 26rpx; |
|||
background-color: white; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
button{ |
|||
height: 62.67rpx; |
|||
line-height:62.67rpx; |
|||
border-radius: 0; |
|||
margin: 0; |
|||
margin-left: 18rpx; |
|||
background-color: white; |
|||
border: none; |
|||
font-size: 22.67rpx; |
|||
&::after{ |
|||
content: none; |
|||
} |
|||
} |
|||
.black{ |
|||
color: white; |
|||
background-color: black; |
|||
} |
|||
.white{ |
|||
border: 1px solid #666666; |
|||
color: #666666; |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
// 进度条 |
|||
.logistics_details{ |
|||
border-top: 14.67rpx #F6F5FA solid; |
|||
padding-left: 28rpx; |
|||
padding-right: 24rpx; |
|||
padding-top: 64rpx; |
|||
|
|||
.logistics_step{ |
|||
color: #999999; |
|||
font-size: 26.67rpx; |
|||
font-weight: 400; |
|||
padding-bottom: 74rpx; |
|||
padding-left: 33.33rpx; |
|||
position: relative; |
|||
&:before{ |
|||
content: ""; |
|||
width: 17.33rpx; |
|||
height: 17.33rpx; |
|||
background-color: #EDEDED; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
border-radius: 50%; |
|||
z-index: 99; |
|||
} |
|||
&::after{ |
|||
content: ""; |
|||
width: 1px; |
|||
height: 95%; |
|||
background-color: #EDEDED; |
|||
position: absolute; |
|||
left: 9.5rpx; |
|||
bottom: 0; |
|||
border-radius: 50%; |
|||
} |
|||
&:last-child{ |
|||
|
|||
&::after{ |
|||
content: none; |
|||
} |
|||
} |
|||
|
|||
.logistics_step_time{ |
|||
|
|||
font-size: 22rpx; |
|||
margin-top: 13.33rpx; |
|||
} |
|||
} |
|||
} |
|||
.step_active{ |
|||
color: #333333 !important; |
|||
|
|||
&:before{ |
|||
background-color:#333333 !important; |
|||
} |
|||
|
|||
} |
|||
.step_active1{ |
|||
&::after{ |
|||
background-color: #333333 !important; |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
var weburl='en.meixx.com'; |
|||
export default { |
|||
apiUri: 'https://'+weburl+'/', |
|||
imgUri: 'http://'+weburl+'/', |
|||
} |
|||
@ -0,0 +1,20 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<script> |
|||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || |
|||
CSS.supports('top: constant(a)')) |
|||
document.write( |
|||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + |
|||
(coverSupport ? ', viewport-fit=cover' : '') + '" />') |
|||
</script> |
|||
<title></title> |
|||
<!--preload-links--> |
|||
<!--app-context--> |
|||
</head> |
|||
<body> |
|||
<div id="app"><!--app-html--></div> |
|||
<script type="module" src="/main.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,21 @@ |
|||
import App from './App' |
|||
|
|||
// #ifndef VUE3
|
|||
import Vue from 'vue' |
|||
Vue.config.productionTip = false |
|||
App.mpType = 'app' |
|||
const app = new Vue({ |
|||
...App |
|||
}) |
|||
app.$mount() |
|||
// #endif
|
|||
|
|||
// #ifdef VUE3
|
|||
import { createSSRApp } from 'vue' |
|||
export function createApp() { |
|||
const app = createSSRApp(App) |
|||
return { |
|||
app |
|||
} |
|||
} |
|||
// #endif
|
|||
@ -0,0 +1,122 @@ |
|||
{ |
|||
"name" : "DOPE PLUS", |
|||
"appid" : "__UNI__C0E0831", |
|||
"description" : "", |
|||
"versionName" : "1.0.0", |
|||
"versionCode" : "100", |
|||
"transformPx" : false, |
|||
/* 5+App特有相关 */ |
|||
"app-plus" : { |
|||
"usingComponents" : true, |
|||
"nvueStyleCompiler" : "uni-app", |
|||
"compilerVersion" : 3, |
|||
"splashscreen" : { |
|||
"alwaysShowBeforeRender" : true, |
|||
"waiting" : true, |
|||
"autoclose" : true, |
|||
"delay" : 0 |
|||
}, |
|||
/* 模块配置 */ |
|||
"modules" : { |
|||
"Payment" : {} |
|||
}, |
|||
/* 应用发布信息 */ |
|||
"distribute" : { |
|||
/* android打包配置 */ |
|||
"android" : { |
|||
"permissions" : [ |
|||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", |
|||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CAMERA\"/>", |
|||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", |
|||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" |
|||
] |
|||
}, |
|||
/* ios打包配置 */ |
|||
"ios" : {}, |
|||
/* SDK配置 */ |
|||
"sdkConfigs" : { |
|||
"ad" : {}, |
|||
"payment" : { |
|||
"alipay" : { |
|||
"__platform__" : [ "ios", "android" ] |
|||
} |
|||
} |
|||
}, |
|||
"splashscreen" : { |
|||
"androidStyle" : "default", |
|||
"android" : { |
|||
"hdpi" : "unpackage/res/icons/480_8001.9.png", |
|||
"xhdpi" : "unpackage/res/icons/720_1242.9.png", |
|||
"xxhdpi" : "unpackage/res/icons/1080_1882.9.png" |
|||
}, |
|||
"useOriginalMsgbox" : false |
|||
}, |
|||
"icons" : { |
|||
"android" : { |
|||
"hdpi" : "unpackage/res/icons/72x72.png", |
|||
"xhdpi" : "unpackage/res/icons/96x96.png", |
|||
"xxhdpi" : "unpackage/res/icons/144x144.png", |
|||
"xxxhdpi" : "unpackage/res/icons/192x192.png" |
|||
}, |
|||
"ios" : { |
|||
"appstore" : "unpackage/res/icons/1024x1024.png", |
|||
"ipad" : { |
|||
"app" : "unpackage/res/icons/76x76.png", |
|||
"app@2x" : "unpackage/res/icons/152x152.png", |
|||
"notification" : "unpackage/res/icons/20x20.png", |
|||
"notification@2x" : "unpackage/res/icons/40x40.png", |
|||
"proapp@2x" : "unpackage/res/icons/167x167.png", |
|||
"settings" : "unpackage/res/icons/29x29.png", |
|||
"settings@2x" : "unpackage/res/icons/58x58.png", |
|||
"spotlight" : "unpackage/res/icons/40x40.png", |
|||
"spotlight@2x" : "unpackage/res/icons/80x80.png" |
|||
}, |
|||
"iphone" : { |
|||
"app@2x" : "unpackage/res/icons/120x120.png", |
|||
"app@3x" : "unpackage/res/icons/180x180.png", |
|||
"notification@2x" : "unpackage/res/icons/40x40.png", |
|||
"notification@3x" : "unpackage/res/icons/60x60.png", |
|||
"settings@2x" : "unpackage/res/icons/58x58.png", |
|||
"settings@3x" : "unpackage/res/icons/87x87.png", |
|||
"spotlight@2x" : "unpackage/res/icons/80x80.png", |
|||
"spotlight@3x" : "unpackage/res/icons/120x120.png" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
/* 快应用特有相关 */ |
|||
"quickapp" : {}, |
|||
/* 小程序特有相关 */ |
|||
"mp-weixin" : { |
|||
"appid" : "", |
|||
"setting" : { |
|||
"urlCheck" : false |
|||
}, |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-alipay" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-baidu" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-toutiao" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"uniStatistics" : { |
|||
"enable" : false |
|||
}, |
|||
"vueVersion" : "2" |
|||
} |
|||
@ -0,0 +1,35 @@ |
|||
{ |
|||
"name": "cnic_buyer", |
|||
"lockfileVersion": 2, |
|||
"requires": true, |
|||
"packages": { |
|||
"": { |
|||
"dependencies": { |
|||
"base-64": "^1.0.0", |
|||
"crypto-js": "^4.1.1" |
|||
} |
|||
}, |
|||
"node_modules/base-64": { |
|||
"version": "1.0.0", |
|||
"resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz", |
|||
"integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==" |
|||
}, |
|||
"node_modules/crypto-js": { |
|||
"version": "4.1.1", |
|||
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz", |
|||
"integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==" |
|||
} |
|||
}, |
|||
"dependencies": { |
|||
"base-64": { |
|||
"version": "1.0.0", |
|||
"resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz", |
|||
"integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==" |
|||
}, |
|||
"crypto-js": { |
|||
"version": "4.1.1", |
|||
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz", |
|||
"integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==" |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"dependencies": { |
|||
"base-64": "^1.0.0", |
|||
"crypto-js": "^4.1.1" |
|||
} |
|||
} |
|||
@ -0,0 +1,283 @@ |
|||
{ |
|||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages |
|||
{ |
|||
"path": "pages/index/index", |
|||
"style": { |
|||
"navigationBarTitleText": "uni-app", |
|||
"app-plus":{ |
|||
"titleNView":false |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/index/search", |
|||
"style": { |
|||
"app-plus":{ |
|||
"titleNView":false |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/category/index", |
|||
"style": { |
|||
"app-plus":{ |
|||
"titleNView":false |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/account/index", |
|||
"style": { |
|||
"app-plus":{ |
|||
"titleNView":false |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/account/myProfile", |
|||
"style": { |
|||
"navigationBarTitleText": "My Profile", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/account/settings", |
|||
"style": { |
|||
"navigationBarTitleText": "Settings", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/account/wishlist", |
|||
"style": { |
|||
"titleNView":false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/account/favorites", |
|||
"style": { |
|||
"titleNView":false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/account/message", |
|||
"style": { |
|||
"titleNView":false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/login/index", |
|||
"style": { |
|||
"titleNView":false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/login/verifyEmail", |
|||
"style": { |
|||
"navigationBarTitleText": "Verify Email Address", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/login/changePwd", |
|||
"style": { |
|||
"navigationBarTitleText": "Change Password", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/account/myOrders", |
|||
"style": { |
|||
"navigationBarTitleText": "My orders", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/order/confirmation", |
|||
"style": { |
|||
"navigationBarTitleText": "0rder Confirmation", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/account/myCoupons", |
|||
"style": { |
|||
"titleNView":false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/index/pickUpCentre", |
|||
"style": { |
|||
"titleNView":false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/order/paySuccess", |
|||
"style": { |
|||
"navigationBarTitleText": "Pay success", |
|||
"navigationBarBackgroundColor":"#FFFFFF", |
|||
"enablePullDownRefresh":true |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/account/address", |
|||
"style": { |
|||
"navigationBarTitleText": "Shipping Address", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/account/addAddress", |
|||
"style": { |
|||
"navigationBarTitleText": "Shipping Address", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/account/pointsDetails", |
|||
"style": { |
|||
"titleNView":false, |
|||
"enablePullDownRefresh":true |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/order/details", |
|||
"style": { |
|||
"navigationBarTitleText": "Order details", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
// "app-plus": { |
|||
// "titleNView": { |
|||
// "splitLine":{ |
|||
// "color":"#F6F5FA", |
|||
// "height":"5px" |
|||
// } |
|||
// } |
|||
// } |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/order/logisticsDetails", |
|||
"style": { |
|||
"navigationBarTitleText": "Logistics details", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/order/refund", |
|||
"style": { |
|||
"navigationBarTitleText": "Refund", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/order/refundDetails", |
|||
"style": { |
|||
"navigationBarTitleText": "Refund Details", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
} |
|||
}, |
|||
// { |
|||
// "path": "pages/category/productList", |
|||
// "style": { |
|||
// "titleNView":false, |
|||
// "enablePullDownRefresh":true |
|||
// } |
|||
// }, |
|||
{ |
|||
"path": "pages/shippingCart/index", |
|||
"style": { |
|||
"titleNView":false, |
|||
"enablePullDownRefresh":true |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/productDetails/index", |
|||
"style": { |
|||
"titleNView":false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/account/myReview", |
|||
"style": { |
|||
"navigationBarTitleText": "My Review", |
|||
"navigationBarBackgroundColor":"#FFFFFF" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/productDetails/review", |
|||
"style": { |
|||
"titleNView":false |
|||
} |
|||
}, |
|||
{ |
|||
"path": "pages/index/flashSale", |
|||
"style": { |
|||
"titleNView":false |
|||
} |
|||
} |
|||
,{ |
|||
"path" : "pages/category/pets", |
|||
"style" : |
|||
{ |
|||
"navigationBarTitleText": "", |
|||
"navigationStyle":"custom", |
|||
"enablePullDownRefresh": true |
|||
} |
|||
|
|||
}, |
|||
{ |
|||
"path" : "pages/account/changeImg", |
|||
"style" : |
|||
{ |
|||
|
|||
"navigationStyle":"custom", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
|
|||
} |
|||
], |
|||
"globalStyle": { |
|||
"navigationBarTextStyle": "black", |
|||
"navigationBarTitleText": "DOPE PLUS", |
|||
"navigationBarBackgroundColor": "#F8F8F8", |
|||
"backgroundColor": "#F8F8F8" |
|||
}, |
|||
"tabBar": { |
|||
"borderStyle": "black", |
|||
"backgroundColor": "#FFFFFF", |
|||
"color": "#999999", |
|||
"selectedColor": "#000000", |
|||
"height":"60px", |
|||
"midButton":{ |
|||
"width": "80px", |
|||
"height":"70px", |
|||
"iconWidth":"60px", |
|||
"iconPath":"static/img/tabbar_img.png" |
|||
}, |
|||
"list": [{ |
|||
"pagePath": "pages/index/index", |
|||
"iconPath": "static/img/home.png", |
|||
"selectedIconPath": "static/img/home1.png", |
|||
"text": "Home" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/category/index", |
|||
"iconPath": "static/img/Category.png", |
|||
"selectedIconPath": "static/img/Category1.png", |
|||
"text": "Category" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/shippingCart/index", |
|||
"iconPath": "static/img/Cart.png", |
|||
"selectedIconPath": "static/img/cart1.png", |
|||
"text": "Cart" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/account/index", |
|||
"iconPath": "static/img/Account.png", |
|||
"selectedIconPath": "static/img/Account1.png", |
|||
"text": "Account" |
|||
} |
|||
] |
|||
} |
|||
} |
|||
@ -0,0 +1,453 @@ |
|||
<template> |
|||
<view> |
|||
<view class="address_serch"> |
|||
<input type="text" placeholder="ADDRESS FINDER:Search by postcode"> |
|||
</view> |
|||
<view class="address_info"> |
|||
<view class="address_info_item address_info_item1"> |
|||
<view class="info_item_title" > |
|||
|
|||
<picker @change="bindPickerChange" :value="index" :range="countryList" range-key="region_name" class="info_item_title_pick"> |
|||
<text>*Country/Region</text> |
|||
<view class="info_item_title_span">{{countryText}}</view> |
|||
</picker> |
|||
<image src="../../static/img/right1.png" mode=""></image> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view class="address_info_item"> |
|||
<view class="info_item_title"> |
|||
<view> |
|||
<text>*Fall name</text> |
|||
</view> |
|||
</view> |
|||
<view class="info_item_input"> |
|||
<input type="text" v-model="query.consignee.consignee"> |
|||
</view> |
|||
</view> |
|||
<view class="address_info_item"> |
|||
<view class="info_item_title"> |
|||
<view> |
|||
<text>*Phone Number</text> |
|||
</view> |
|||
</view> |
|||
<view class="info_item_input"> |
|||
<input type="number" v-model="query.consignee.mobile"> |
|||
</view> |
|||
</view> |
|||
<view class="address_info_item"> |
|||
<view class="info_item_title"> |
|||
<view> |
|||
<text>*Stree adderss or P.O.Box</text> |
|||
</view> |
|||
</view> |
|||
<view class="info_item_input"> |
|||
<input type="text" v-model="address"> |
|||
</view> |
|||
</view> |
|||
<view class="address_info_item"> |
|||
<view class="info_item_title"> |
|||
<view> |
|||
<text>*Appartment,suite,unit,etc.</text> |
|||
</view> |
|||
</view> |
|||
<view class="info_item_input"> |
|||
<input type="text" v-model="query.consignee.sign_building"> |
|||
</view> |
|||
</view> |
|||
<view class="address_info_item address_info_item1"> |
|||
|
|||
<view class="info_item_title" v-if="isSelect1"> |
|||
<picker @change="bindPickerChange2" :value="cityIndex" :range="cityList" range-key="region_name" class="info_item_title_pick"> |
|||
<text >*City/Town</text> |
|||
<view class="info_item_title_span">{{cityText}}</view> |
|||
</picker> |
|||
<image src="../../static/img/right1.png" mode=""></image> |
|||
</view> |
|||
|
|||
<template v-else> |
|||
<view class="info_item_title" > |
|||
<text >*City/Town</text> |
|||
</view> |
|||
|
|||
<view class="info_item_input"> |
|||
<input type="text" v-model="city"> |
|||
</view> |
|||
</template> |
|||
|
|||
<!-- <view class="info_item_title"> |
|||
<view> |
|||
<text>*City/Town</text> |
|||
</view> |
|||
</view> |
|||
<view class="info_item_input"> |
|||
<input type="text" v-model="city"> |
|||
</view> --> |
|||
|
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view class="address_info"> |
|||
<view class="address_info_item address_info_item1"> |
|||
<view class="info_item_title" v-if="isSelect"> |
|||
<picker @change="bindPickerChange1" :value="provinceIndex" :range="provinceList" range-key="region_name" class="info_item_title_pick"> |
|||
<text >State/Province</text> |
|||
<view class="info_item_title_span">{{provinceText}}</view> |
|||
</picker> |
|||
<image src="../../static/img/right1.png" mode=""></image> |
|||
</view> |
|||
|
|||
<template v-else> |
|||
<view class="info_item_title" > |
|||
<text >State/Province</text> |
|||
</view> |
|||
|
|||
<view class="info_item_input"> |
|||
<input type="text" v-model="province"> |
|||
</view> |
|||
</template> |
|||
|
|||
</view> |
|||
|
|||
<view class="address_info_item"> |
|||
<view class="info_item_title"> |
|||
<view> |
|||
<text>Zip code/Postcode/PLZ/Eircode</text> |
|||
</view> |
|||
</view> |
|||
<view class="info_item_input"> |
|||
<input type="text" v-model="query.consignee.zipcode"> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="address_switch"> |
|||
<text>Make this my default address</text> |
|||
<switch :checked="query.is_default==1" color="#B22234" @change="isDefault"/> |
|||
</view> |
|||
<view class="address_submit"> |
|||
<button @click="save">FINISH</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2,defaultRequest3} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
isSelect:false, |
|||
isSelect1:false, |
|||
countryList:[], |
|||
index:0, |
|||
countryText:'', |
|||
provinceList:[], |
|||
provinceIndex:0, |
|||
provinceText:'', |
|||
cityList:[], |
|||
cityIndex:0, |
|||
cityText:'', |
|||
query:{ |
|||
_action:'saveconsignee', |
|||
consignee:{ |
|||
address_id:0, |
|||
consignee:'', |
|||
country:0, |
|||
province:0, |
|||
city:0, |
|||
district:0, |
|||
address:'', |
|||
zipcode:'', |
|||
email:'', |
|||
tel:'', |
|||
mobile:'', |
|||
sign_building:'', |
|||
best_time:'' |
|||
}, |
|||
is_default:0 |
|||
}, |
|||
province:'', |
|||
city:'', |
|||
address:'' |
|||
} |
|||
}, |
|||
methods:{ |
|||
// 保存 |
|||
save(){ |
|||
if(this.query.consignee.consignee==''){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Please fill Fall name' |
|||
}) |
|||
return |
|||
} |
|||
if(this.query.consignee.mobile==''){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Please fill Phone Number' |
|||
}) |
|||
return |
|||
} |
|||
if(this.address==''){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Please fill Stree adderss or P.O.Box' |
|||
}) |
|||
return |
|||
} |
|||
if(this.query.consignee.sign_building==''){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Please fill Appartment,suite,unit,etc.' |
|||
}) |
|||
return |
|||
} |
|||
if(!this.isSelect1){ |
|||
if(this.city==''){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Please fill in City/Town' |
|||
}) |
|||
return |
|||
} |
|||
this.query.consignee.address=this.city+this.address |
|||
}else{ |
|||
if(this.query.consignee.city==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Please Select City/Town' |
|||
}) |
|||
return |
|||
} |
|||
} |
|||
if(!this.isSelect){ |
|||
if(this.province==''){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Please fill in State/Province' |
|||
}) |
|||
return |
|||
} |
|||
this.query.consignee.address=this.province+this.query.consignee.address |
|||
}else{ |
|||
if(this.query.consignee.province==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Please Select State/Province' |
|||
}) |
|||
return |
|||
} |
|||
} |
|||
if(this.query.consignee.zipcode==''){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Please fill Zip code/Postcode/PLZ/Eircode' |
|||
}) |
|||
return |
|||
} |
|||
console.info(this.query) |
|||
defaultRequest3(this.query,'consignee').then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:res.message |
|||
}) |
|||
uni.navigateBack() |
|||
} |
|||
this.query.consignee.address='' |
|||
}) |
|||
}, |
|||
// 切换是否默认地址 |
|||
isDefault(e){ |
|||
console.info(e) |
|||
if(e.detail.value){ |
|||
this.query.is_default=1 |
|||
}else{ |
|||
this.query.is_default=0 |
|||
} |
|||
}, |
|||
// 获取国家数据 |
|||
getCountry(){ |
|||
let data={_action:'getregions',parent_region_id:0} |
|||
defaultRequest2(data).then(res=>{ |
|||
// console.info(res) |
|||
if(res.error==0){ |
|||
this.countryList=res.data |
|||
} |
|||
}) |
|||
}, |
|||
// 选择国家 |
|||
bindPickerChange(e){ |
|||
if(this.index!=e.detail.value){ |
|||
this.provinceText='' |
|||
this.cityText='' |
|||
this.query.consignee.city=0 |
|||
this.query.consignee.province=0 |
|||
} |
|||
this.index=e.detail.value |
|||
if(this.countryList[this.index].regions){ |
|||
this.isSelect=true |
|||
this.provinceList=this.countryList[this.index].regions |
|||
}else{ |
|||
this.isSelect=false |
|||
this.isSelect1=false |
|||
} |
|||
|
|||
this.query.consignee.country=this.countryList[this.index].region_id |
|||
this.countryText=this.countryList[this.index].region_name |
|||
}, |
|||
// 选择省份 |
|||
bindPickerChange1(e){ |
|||
if(this.provinceIndex!=e.detail.value){ |
|||
this.cityText='' |
|||
this.query.consignee.city=0 |
|||
} |
|||
this.provinceIndex=e.detail.value |
|||
if(this.provinceList[this.provinceIndex].regions){ |
|||
this.isSelect1=true |
|||
this.cityList=this.provinceList[this.provinceIndex].regions |
|||
}else{ |
|||
this.isSelect1=false |
|||
this.cityText='' |
|||
} |
|||
|
|||
this.query.consignee.province=this.provinceList[this.provinceIndex].region_id |
|||
this.provinceText=this.provinceList[this.provinceIndex].region_name |
|||
}, |
|||
// 选择城市 |
|||
bindPickerChange2(e){ |
|||
this.cityIndex=e.detail.value |
|||
this.query.consignee.city=this.cityList[this.cityIndex].region_id |
|||
this.cityText=this.cityList[this.cityIndex].region_name |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
console.info(e) |
|||
if(e.type==1){ |
|||
e.data=JSON.parse(e.data) |
|||
this.query.consignee=e.data |
|||
this.address=this.query.consignee.address |
|||
if(e.data.default_address_id==e.data.address_id){ |
|||
this.query.is_default=1 |
|||
} |
|||
this.countryText=e.data.country_name |
|||
if(e.data.city!=0){ |
|||
this.isSelect1=true |
|||
this.cityText=e.data.city_name |
|||
}else{ |
|||
|
|||
} |
|||
if(e.data.province!=0){ |
|||
this.isSelect=true |
|||
this.provinceText=e.data.province_name |
|||
} |
|||
|
|||
} |
|||
this.getCountry() |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
page{ |
|||
background-color: #F6F5FA; |
|||
padding-bottom: 20rpx; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
|
|||
.address_serch{ |
|||
background-color: white; |
|||
padding: 26.67rpx 24rpx; |
|||
margin-top: 14.67rpx; |
|||
input{ |
|||
font-size: 22.67rpx; |
|||
font-weight: 400; |
|||
border: 1px solid #E2E2E2; |
|||
padding: 23.33rpx 0; |
|||
padding-left: 64.67rpx; |
|||
position: relative; |
|||
&:before{ |
|||
content: ""; |
|||
background-image: url("@/static/img/address1.png"); |
|||
background-size: 100% 100%; |
|||
width: 29.33rpx; |
|||
height: 29.33rpx; |
|||
position: absolute; |
|||
left: 20.67rpx; |
|||
} |
|||
} |
|||
} |
|||
.address_info{ |
|||
background-color: white; |
|||
padding: 0 26.67rpx; |
|||
margin-top: 14.67rpx; |
|||
.address_info_item{ |
|||
padding-top: 42.67rpx; |
|||
border-bottom: 1px solid #E2E2E2; |
|||
&:last-child{ |
|||
border-bottom: none; |
|||
} |
|||
.info_item_title{ |
|||
font-size: 24rpx; |
|||
color: #888888; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-weight: bold; |
|||
margin-bottom: 10rpx; |
|||
|
|||
.info_item_title_pick{ |
|||
width: 100%; |
|||
} |
|||
.info_item_title_span{ |
|||
color: black; |
|||
margin-top: 15.33rpx; |
|||
} |
|||
image{ |
|||
width: 25.33rpx; |
|||
height: 25.33rpx; |
|||
} |
|||
} |
|||
.info_item_input{ |
|||
input{ |
|||
font-size: 24rpx; |
|||
padding-left: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
.address_info_item1{ |
|||
padding-top: 32.67rpx; |
|||
padding-bottom: 27.33rpx; |
|||
} |
|||
} |
|||
.address_switch{ |
|||
margin-top: 14.67rpx; |
|||
background-color: white; |
|||
padding: 17.33rpx 0; |
|||
padding-left: 32rpx; |
|||
padding-right: 52.67rpx; |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.address_submit{ |
|||
padding: 0 32rpx; |
|||
margin-top: 112rpx; |
|||
|
|||
button{ |
|||
background-color: black; |
|||
color: white; |
|||
font-size: 26.67rpx; |
|||
margin: 0; |
|||
font-weight: bold; |
|||
height: 88rpx; |
|||
line-height: 88rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,197 @@ |
|||
<template> |
|||
<view> |
|||
<view class="address_item" v-for="(item,index) in list" :key="index" @click="selectAddress(item)"> |
|||
<view class="address_info"> |
|||
<view class="address_info_title"> |
|||
<view class="info_title_span">{{item.consignee}}</view> |
|||
<text>{{item.mobile}}</text> |
|||
</view> |
|||
<view class="address_info_content"> |
|||
<view class="info_content_left"> |
|||
<view>{{item.sign_building}} </view> |
|||
<text>{{item.country_name}} {{item.province_name}} {{item.city_name}} {{item.address}} {{item.mobile}}</text> |
|||
</view> |
|||
<image src="../../static/img/update.png" mode="" @click.stop="updateAddress(item)"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="address_default"> |
|||
<view class="address_default_left"> |
|||
<image src="../../static/img/select4.png" mode="" v-if="item.default_address_id==item.address_id"></image> |
|||
<image src="../../static/img/select2.png" mode="" v-else @click.stop="setDefault(item.address_id)"></image> |
|||
<text>Default address</text> |
|||
</view> |
|||
<text @click.stop="deleteAddress(item.address_id)">Delete</text> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="address_foot"> |
|||
<navigator url="/pages/account/addAddress" > |
|||
<button>ADD ADDRESS</button> |
|||
</navigator> |
|||
</view> |
|||
<uni-popup ref="alertDialog" type="dialog"> |
|||
<uni-popup-dialog type="error" cancelText="Close" confirmText="Delete" title="Tips" content="Whether to delete the address?" |
|||
@confirm="dialogConfirm" ></uni-popup-dialog> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
list:[], |
|||
address_id:'', |
|||
type:0 |
|||
} |
|||
}, |
|||
methods:{ |
|||
//确认订单选择地址 |
|||
selectAddress(item){ |
|||
if(this.type==1){ |
|||
uni.$emit('query' , {consignee : item,type:'address'}); |
|||
uni.navigateBack() |
|||
} |
|||
}, |
|||
// 修改地址 |
|||
updateAddress(item){ |
|||
uni.navigateTo({ |
|||
url:'./addAddress?type=1&data='+JSON.stringify(item) |
|||
}) |
|||
}, |
|||
// 删除地址 |
|||
deleteAddress(id){ |
|||
this.address_id=id |
|||
this.$refs.alertDialog.open() |
|||
}, |
|||
dialogConfirm(){ |
|||
let data={_action:'dropconsignee',address_id:this.address_id} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:res.message |
|||
}) |
|||
this.getList() |
|||
} |
|||
}) |
|||
}, |
|||
// 设置默认地址 |
|||
setDefault(id){ |
|||
let data={_action:'setdefaultconsignee',address_id:id} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.getList() |
|||
} |
|||
}) |
|||
}, |
|||
getList(){ |
|||
let data={_action:'getconsignees'} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.list=res.data |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.getList() |
|||
}, |
|||
onLoad(e) { |
|||
if(e.type==1){ |
|||
this.type=1 |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
page{ |
|||
background-color: #F6F5FA; |
|||
padding-bottom: 160rpx; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
|
|||
.address_foot{ |
|||
padding: 42rpx 24rpx; |
|||
background-color: white; |
|||
border-top: #E2E2E2 solid 1px; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
button{ |
|||
color: white; |
|||
background-color: black; |
|||
font-size: 26.67rpx; |
|||
font-weight: bold; |
|||
margin: 0; |
|||
} |
|||
} |
|||
.address_item{ |
|||
margin-top: 17.33rpx; |
|||
width: 100%; |
|||
background-color: white; |
|||
padding-top: 32rpx; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
font-weight: bold; |
|||
|
|||
.address_info{ |
|||
padding: 0 26.67rpx; |
|||
padding-bottom: 33.33rpx; |
|||
border-bottom: 1px solid #E2E2E2; |
|||
|
|||
.address_info_title{ |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 37.33rpx; |
|||
.info_title_span{ |
|||
font-size: 28rpx; |
|||
color: black; |
|||
margin-right: 38.67rpx; |
|||
} |
|||
} |
|||
.address_info_content{ |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
.info_content_left{ |
|||
padding-right: 38.67rpx; |
|||
margin-right: 34rpx; |
|||
min-width: 80%; |
|||
border-right: 1px solid #E2E2E2; |
|||
} |
|||
image{ |
|||
width: 34.67rpx; |
|||
height: 34.67rpx; |
|||
} |
|||
} |
|||
} |
|||
.address_default{ |
|||
padding: 29.33rpx 0; |
|||
padding-left: 26.67rpx; |
|||
padding-right: 52.67rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.address_default_left{ |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
image{ |
|||
width: 25.33rpx; |
|||
height: 25.33rpx; |
|||
margin-right: 13.33rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,165 @@ |
|||
<template> |
|||
<view> |
|||
<view class="foot fixed"> |
|||
<uni-section title="左侧文字+右侧文字" subTitle="使用 left-text/right-text 设置左右文字" type="line" |
|||
style="margin-bottom: 3px;"> |
|||
<view class="box-bg"> |
|||
<uni-nav-bar border="false" title="" > |
|||
<block slot="left"> |
|||
<!-- <view ><uni-icons type="back" size="30"></uni-icons></view> --> |
|||
<view class="icon-all"><image class="imgsize"src='../../static/icon/left.png'/></view> |
|||
</block> |
|||
<block slot="right"> |
|||
|
|||
<view class="text-bg" @click="Sub()">submit</view> |
|||
|
|||
</block> |
|||
</uni-nav-bar> |
|||
</view> |
|||
</uni-section> |
|||
</view> |
|||
|
|||
<view class="detail"> |
|||
<view class="contain" v-for="(item,index) in imglist" :key="index"> |
|||
<!-- <view class="icon imgsize" :style="{backgroundImage :'url(' + item +')'}"></view> --> |
|||
|
|||
<view class="icon" @click="tabActive(index,item)"> |
|||
|
|||
<image class="imgsize":src="item"></image> |
|||
<radio class="main-icon-radio" v-show="current>0" :checked="index == current?true:false" /> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
current:-1, |
|||
active_img:'', |
|||
query:{ |
|||
_action:'getinfo' |
|||
|
|||
}, |
|||
query2:{ |
|||
_action:'updateinfo', |
|||
nickname:'', |
|||
sex:'', |
|||
birthday:'', |
|||
user_head:'', |
|||
email:'' |
|||
}, |
|||
imglist:[] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getimglist() |
|||
}, |
|||
methods: { |
|||
getimglist(){ |
|||
defaultRequest(this.query).then(res => |
|||
{ |
|||
// console.log(res.data.headicons,'图片') |
|||
this.imglist = res.data.headicons |
|||
console.log(res.data) |
|||
this.query2.nickname = res.data.nickname |
|||
// for(let i of this.imglist) |
|||
// console.log(i) |
|||
}) |
|||
}, |
|||
|
|||
tabActive(index,item){ |
|||
this.current = index |
|||
console.log(index) |
|||
this.active_img = item |
|||
}, |
|||
// 提交图片 |
|||
Sub(){ |
|||
console.log( this.active_img,'选择的图片') |
|||
this.query2.user_head = this.active_img; |
|||
defaultRequest(this.query2).then( res => { |
|||
console.log(res,'yyyy') |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
title:'succuss', |
|||
duration: 2000, |
|||
icon:'none' |
|||
|
|||
}) |
|||
uni.navigateBack({ |
|||
delta:1 |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.foot{ |
|||
height:120rpx; |
|||
width: 100vw; |
|||
padding:50rpx 0 0 0; |
|||
background-color: #fff; |
|||
position: fixed; |
|||
} |
|||
.fixed{ |
|||
position: fixed; |
|||
z-index: 99; |
|||
} |
|||
.icon-all{ |
|||
height: 30rpx; |
|||
width:30rpx ; |
|||
} |
|||
.detail{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin:10rpx 50rpx 10rpx 50rpx; |
|||
padding: 100rpx 0; |
|||
background-color: #fff; |
|||
|
|||
|
|||
} |
|||
.text-bg{ |
|||
background-color: black; |
|||
color: aliceblue; |
|||
padding: 6rpx 10rpx; |
|||
border-radius: 15rpx; |
|||
} |
|||
.contain{ |
|||
width: 180rpx; |
|||
height: 160rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin: 50rpx 10rpx 10rpx 10rpx; |
|||
padding: 10rpx; |
|||
position: relative; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.icon{ |
|||
height: 160rpx; |
|||
width:160rpx; |
|||
margin: 12rpx; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
position: absolute; |
|||
align-items: center; |
|||
} |
|||
.imgsize{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.main-icon-radio { |
|||
position: absolute; |
|||
z-index: 9; |
|||
margin-top: 110rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,129 @@ |
|||
<template> |
|||
<view class="wishlist_body"> |
|||
<view class="status_bar"></view> |
|||
<uni-nav-bar left-icon="left" :rightText="isDelete?'Done':'Delete'" title="Favorites" color="#000000" @clickLeft="back" @clickRight="$refs.alertDialog.open()"/> |
|||
<view class="wishlist"> |
|||
<view class="wishlist_item" v-for="(item,index) in goodsList" :key="index" > |
|||
<view class="wishlist_item_img"> |
|||
<image :src="item.goods_img" mode="" class="wishlist_item_img_goods"></image> |
|||
<image src="../../static/img/select.png" mode="" class="select" v-show="isDelete"></image> |
|||
</view> |
|||
<view class="wishlist_item_bottom"> |
|||
<text>US${{item.promote_price?item.promote_price:item.shop_price}}</text> |
|||
<image src="/static/img/like.png" mode="" v-show="item.is_attention==0" class="wishlist_item_bottom_icon" @click="addLike(item.id)"></image> |
|||
<image src="../../static/img/like1.png" mode="" v-show="item.is_attention==1" class="wishlist_item_bottom_icon" @click="removeLike(item.id)"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="wishlist_foot" v-show="isDelete"> |
|||
<view class="wishlist_foot_left"> |
|||
<image src="../../static/img/select2.png" mode=""></image> |
|||
<text>All</text> |
|||
</view> |
|||
<view class="wishlist_foot_right"> |
|||
<button>DELETE</button> |
|||
</view> |
|||
</view> |
|||
<uni-popup ref="alertDialog" type="dialog"> |
|||
<uni-popup-dialog type="error" cancelText="Close" confirmText="Clear" title="Tips" content="Whether to clear browsing history?" |
|||
@confirm="clearFavorites" ></uni-popup-dialog> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
isDelete:false, |
|||
goodsList:[] |
|||
} |
|||
}, |
|||
methods:{ |
|||
// 清空浏览记录 |
|||
clearFavorites(){ |
|||
let data={_action:'cleargoodsbrowsehistory'} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
title:res.message, |
|||
icon:'none' |
|||
}) |
|||
this.getList() |
|||
} |
|||
}) |
|||
}, |
|||
// 添加收藏 |
|||
addLike(id){ |
|||
let data={_action:'setfaviouritegoods',goods_id:id} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
title:res.message, |
|||
icon:'none' |
|||
}) |
|||
this.changeImage(id,0) |
|||
} |
|||
}) |
|||
}, |
|||
// 取消收藏 |
|||
removeLike(id){ |
|||
let data={_action:'unsetfaviouritegoods',goods_id:id} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
title:res.message, |
|||
icon:'none' |
|||
}) |
|||
this.changeImage(id,1) |
|||
} |
|||
}) |
|||
}, |
|||
// 切换图片 |
|||
changeImage(id,type){ |
|||
this.goodsList.map(item=>{ |
|||
if(item.id==id){ |
|||
if(type==0){ |
|||
item.is_attention=1 |
|||
}else{ |
|||
item.is_attention=0 |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
back(){ |
|||
uni.navigateBack() |
|||
}, |
|||
getList(){ |
|||
let data={_action:'getgoodsbrowsehistory'} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.goodsList=res.data |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getList() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page{ |
|||
|
|||
} |
|||
.uni-navbar{ |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.wishlist_item_bottom{ |
|||
width: 220rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,304 @@ |
|||
<template> |
|||
<view> |
|||
<view class="status_bar"></view> |
|||
|
|||
<view class="account_info"> |
|||
<image src="../../static/img/logo.png" mode="" class="header_img" v-show="!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"> |
|||
<navigator url="/pages/login/index" > |
|||
LOGIN / SIGUP> |
|||
</navigator> |
|||
</view> |
|||
<view class="info_name" v-else> |
|||
<navigator url="/pages/account/myProfile" > |
|||
hi,{{user_info.nickname!=''?user_info.nickname:user_info.email}}> |
|||
</navigator> |
|||
</view> |
|||
|
|||
<view class="info_like"> |
|||
<navigator url="/pages/account/myCoupons" class="info_like_item"> |
|||
<text class="info_like_item_img">6</text> |
|||
<text class="info_like_item_span">Coupons</text> |
|||
</navigator> |
|||
<navigator url="/pages/account/pointsDetails" class="info_like_item"> |
|||
<text class="info_like_item_img">25</text> |
|||
<text class="info_like_item_span">Points</text> |
|||
</navigator> |
|||
<navigator url="/pages/account/wishlist" class="info_like_item"> |
|||
<image src="../../static/img/like.png" mode="" class="info_like_item_img"></image> |
|||
<text class="info_like_item_span">Wishlist</text> |
|||
</navigator> |
|||
<navigator url="/pages/account/favorites" class="info_like_item"> |
|||
<image src="../../static/img/favorites.png" mode="" class="info_like_item_img"></image> |
|||
<text class="info_like_item_span">Favorites</text> |
|||
</navigator> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="order"> |
|||
<view class="order_title">My Orders</view> |
|||
<view class="order_info"> |
|||
<navigator url="/pages/account/myOrders" class="order_info_item"> |
|||
<image src="../../static/img/unpaid.png" mode="" class="info_img"></image> |
|||
<text>Unpaid</text> |
|||
</navigator> |
|||
<view class="order_info_item"> |
|||
<image src="../../static/img/Processing.png" mode="" class="info_img"></image> |
|||
<text>Processing</text> |
|||
</view> |
|||
<view class="order_info_item"> |
|||
<image src="../../static/img/Shipped.png" class="info_img" mode=""></image> |
|||
<text>Shipped</text> |
|||
</view> |
|||
<view class="order_info_item"> |
|||
<image src="../../static/img/Returns.png" class="info_img" mode=""></image> |
|||
<text>Returns</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="order"> |
|||
<view class="order_title">My Service</view> |
|||
<view class="order_info"> |
|||
<navigator url="/pages/account/message" class="order_info_item"> |
|||
<image src="../../static/img/msg.png" class="info_img" mode=""></image> |
|||
<text>Message</text> |
|||
</navigator> |
|||
<navigator url="/pages/account/myReview" class="order_info_item"> |
|||
<image src="../../static/img/My Review.png" class="info_img" mode=""></image> |
|||
<text>My Review</text> |
|||
</navigator> |
|||
<navigator url="/pages/account/address" class="order_info_item"> |
|||
<image src="../../static/img/My Address.png" class="info_img" mode=""></image> |
|||
<text>My Address</text> |
|||
</navigator> |
|||
<view class="order_info_item"> |
|||
<image src="../../static/img/Return Policy.png" class="info_img" mode=""></image> |
|||
<text>Return Policy</text> |
|||
</view> |
|||
<view class="order_info_item"> |
|||
<image src="../../static/img/Help Center.png" class="info_img" mode=""></image> |
|||
<text>Help Center</text> |
|||
</view> |
|||
<view class="order_info_item"> |
|||
<image src="../../static/img/Attention CHIC.png" class="info_img" mode=""></image> |
|||
<text>Attention CHIC</text> |
|||
</view> |
|||
<view class="order_info_item"> |
|||
<image src="../../static/img/About CHIC.png" class="info_img" mode=""></image> |
|||
<text>About CHIC</text> |
|||
</view> |
|||
|
|||
<navigator url="/pages/account/settings" class="order_info_item"> |
|||
<!-- <view class="order_info_item"> --> |
|||
<image src="../../static/img/Setting.png" class="info_img" mode=""></image> |
|||
<text>Setting</text> |
|||
<!-- </view> --> |
|||
</navigator> |
|||
</view> |
|||
|
|||
<image src="../../static/img/mine_banner.png" class="mine_banner" mode=""></image> |
|||
<view class="order_title">Recommend</view> |
|||
|
|||
<scroll-view class="spike1" scroll-x="true" :show-scrollbar="false"> |
|||
<view class="spike1_item" v-for="(item,index) in 8" :key="index"> |
|||
<view class="spike1_item_img"></view> |
|||
<view class="spike1_item_bottom1"> |
|||
<view class="spike1_item_text">Adidas Yeezy Boost 350 DazzlingBlue Black</view> |
|||
<text class="spike1_item_text1">US$314.00</text> |
|||
</view> |
|||
|
|||
</view> |
|||
</scroll-view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
user_info:{ |
|||
isLogin:false, |
|||
} |
|||
} |
|||
}, |
|||
methods:{ |
|||
getUserInfo(){ |
|||
let data={_action:'getinfo'} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
res.data.isLogin=true |
|||
this.user_info=res.data |
|||
uni.setStorageSync('user_info',this.user_info) |
|||
}else{ |
|||
this.user_info=uni.getStorageSync('user_info') |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.user_info=uni.getStorageSync('user_info') |
|||
if(this.user_info){ |
|||
this.getUserInfo() |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.account_info{ |
|||
padding: 0 58rpx; |
|||
padding-top: 50rpx; |
|||
padding-bottom: 30rpx; |
|||
border-bottom: 13.33rpx #F7F7F7 solid; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.header_img{ |
|||
width: 144rpx; |
|||
height: 144rpx; |
|||
border-radius: 50%; |
|||
margin-bottom: 36.67rpx; |
|||
background-color: #F7F7F7; |
|||
} |
|||
.info_name{ |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 74.67rpx; |
|||
} |
|||
.info_like{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 100%; |
|||
.info_like_item{ |
|||
font-size: 40rpx; |
|||
font-weight: 400; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.info_like_item_img{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin-bottom: 14.67rpx; |
|||
display: block; |
|||
} |
|||
.info_like_item_span{ |
|||
font-size: 21.33rpx; |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
.order{ |
|||
padding: 0 23.33rpx; |
|||
padding-top: 37.33rpx; |
|||
padding-bottom: 43.33rpx; |
|||
border-bottom: 13.33rpx #F7F7F7 solid; |
|||
|
|||
.order_title{ |
|||
font-size: 26.67rpx; |
|||
font-weight: bold; |
|||
} |
|||
.order_info{ |
|||
width: 100%; |
|||
// padding: 0 35.33rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
flex-wrap: wrap; |
|||
|
|||
.order_info_item{ |
|||
width: 25%; |
|||
font-size: 21.33rpx; |
|||
font-weight: 400; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-top: 38.67rpx; |
|||
|
|||
} |
|||
.info_img{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
} |
|||
.mine_banner{ |
|||
width: 100%; |
|||
height: 226.67rpx; |
|||
margin: 56rpx 0; |
|||
} |
|||
.spike1{ |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
margin-top: 46.67rpx; |
|||
::-webkit-scrollbar { |
|||
width: 0; |
|||
height: 0; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.spike1_item{ |
|||
color: #191919; |
|||
font-size: 24.67rpx; |
|||
margin-right: 16.67rpx; |
|||
width: 286.67rpx; |
|||
display: inline-block; |
|||
font-weight: 400; |
|||
|
|||
.spike1_item_img{ |
|||
width: 286.67rpx; |
|||
height: 286.67rpx; |
|||
|
|||
background-color: #999999; |
|||
} |
|||
.spike1_item_bottom{ |
|||
padding-left: 9.33rpx; |
|||
margin-top: 22.67rpx; |
|||
|
|||
.spike1_item_text{ |
|||
color: #9D9D9D; |
|||
font-size: 21.33rpx; |
|||
text-decoration: line-through; |
|||
} |
|||
.spike1_item_text1{ |
|||
// color: #9D9D9D; |
|||
font-size: 27.33rpx !important; |
|||
font-weight: bold !important; |
|||
} |
|||
} |
|||
.spike1_item_bottom1{ |
|||
padding-left: 9.33rpx; |
|||
margin-top: 19.33rpx; |
|||
font-weight: bold; |
|||
|
|||
.spike1_item_text{ |
|||
color: #000000; |
|||
font-size: 16rpx; |
|||
font-weight: 400; |
|||
margin-bottom: 20.67rpx; |
|||
white-space: break-spaces; |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
.spike1_item:last-child{ |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,103 @@ |
|||
<template> |
|||
<view> |
|||
<uni-nav-bar left-icon="left" :statusBar="true" title="Message" |
|||
color="#000000" rightIcon="info" @clickLeft="back" @clickRight="isDelete=!isDelete" :border="false"/> |
|||
|
|||
<view class="body"> |
|||
<view class="msg_item" v-for="(item,index) in list" :key="index"> |
|||
<view class="msg_time">{{item.start_time}}~{{item.end_time}}</view> |
|||
<view class="msg_title">{{item.act_name}}</view> |
|||
<view class="msg_content">{{item.act_range}}</view> |
|||
<!-- <view class="msg_img"></view> --> |
|||
</view> |
|||
<!-- <view class="msg_item"> |
|||
<view class="msg_time">21/04/2022 14:42:31</view> |
|||
<view class="msg_title">Message heading</view> |
|||
<view class="msg_content"> |
|||
estimated to be deliverd on estimated to be deliverd on estim |
|||
ated to be deliverd on estimated to be deliverd on |
|||
</view> |
|||
</view> |
|||
<view class="msg_item"> |
|||
<view class="msg_time">21/04/2022 14:42:31</view> |
|||
<view class="msg_title">Message heading</view> |
|||
<view class="msg_content"> |
|||
estimated to be deliverd on estimated to be deliverd on estim |
|||
ated to be deliverd on estimated to be deliverd on |
|||
</view> |
|||
<view class="msg_img"></view> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
import {defaultRequest} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
list:[] |
|||
} |
|||
}, |
|||
methods:{ |
|||
getList(){ |
|||
let data={_action:'getfavourableactivities'} |
|||
defaultRequest(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.list=res.data |
|||
} |
|||
}) |
|||
}, |
|||
back(){ |
|||
uni.navigateBack() |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getList() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.uni-navbar{ |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.body{ |
|||
border-top: 13.33rpx #F7F7F7 solid; |
|||
padding:0 26.67rpx; |
|||
} |
|||
.msg_item{ |
|||
padding-top: 42.67rpx; |
|||
padding-bottom: 28rpx; |
|||
border-bottom: 1px solid #E2E2E2; |
|||
|
|||
.msg_time{ |
|||
font-size: 25.33rpx; |
|||
font-weight: 400; |
|||
text-align: center; |
|||
margin-bottom: 41.33rpx; |
|||
} |
|||
.msg_title{ |
|||
font-size: 28rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.msg_content{ |
|||
color: #555555; |
|||
font-size: 25.33rpx; |
|||
font-weight: 400; |
|||
|
|||
} |
|||
.msg_img{ |
|||
margin-top: 37.33rpx; |
|||
background-color: #FEF6F4; |
|||
width: 100%; |
|||
height: 281.33rpx; |
|||
} |
|||
} |
|||
.msg_item:last-child{ |
|||
border-bottom: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<view> |
|||
<uni-nav-bar left-icon="left" :statusBar="true" title="My Coupons" color="#000000" rightIcon="info" @clickLeft="back" @clickRight="goPage" :border="false"/> |
|||
<view class="body"> |
|||
<view class="coupons_item" v-for="(item,index) in list " :key="item.bonus_id"> |
|||
<view class="coupons_item_left"> |
|||
<view class="item_left_prcie">${{item.type_money}}</view> |
|||
<text class="item_left_span">Min.spend</text> |
|||
<view>${{item.min_goods_amount}}</view> |
|||
</view> |
|||
<view class="coupons_item_right"> |
|||
<view class="coupons_right_info"> |
|||
<view class="coupons_right_info_title">{{item.type_name}}</view> |
|||
<text>The tide zone is available</text> |
|||
<view class="coupons_right_info_time">{{item.use_start_date}} - {{item.use_end_date}}</view> |
|||
</view> |
|||
<button>Use Now</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
list:[] |
|||
} |
|||
}, |
|||
methods:{ |
|||
getList(){ |
|||
let data={_action:'getuserbonus'} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.list=res.data |
|||
} |
|||
}) |
|||
}, |
|||
back(){ |
|||
uni.navigateBack() |
|||
}, |
|||
goPage(){ |
|||
uni.navigateTo({ |
|||
url:"/pages/index/pickUpCentre" |
|||
}) |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.getList() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.uni-navbar{ |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.body{ |
|||
border-top: 14.67rpx #F7F7F7 solid; |
|||
padding:0 26rpx; |
|||
padding-top: 31.33rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,874 @@ |
|||
<template> |
|||
<view> |
|||
<view class="order_nav"> |
|||
<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false"> |
|||
<view :class="scroll_active==index?'scroll_active':''" v-for="(item,index) in scrollList" @click="scrollChange(index)" :key="index">{{item.text}}</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view class="body"> |
|||
<!-- 全部订单 --> |
|||
<template v-if="isList==true && scroll_active==0"> |
|||
<view class="" v-for="(item,idnex) in orderList" :key="item.order_id"> |
|||
<view class="order" @click="goDetails(item,item.order_id)"> |
|||
<view class="order_title"> |
|||
<!-- 待支付订单 --> |
|||
<text v-if="item.pay_status_code==0 && item.order_status_code==0">Waiting for payment</text> |
|||
<!-- 已取消订单 --> |
|||
<text v-else-if="item.order_status_code==2">cancelled</text> |
|||
<!-- 待发货订单 --> |
|||
<text v-else-if="item.pay_status_code==2 && item.shipping_status_code==0">To be shipped</text> |
|||
<!-- 运输中订单 --> |
|||
<text v-else-if="item.pay_status_code==2 && item.shipping_status_code==1 || item.shipping_status_code==4">Shipped</text> |
|||
<!-- 已完成订单 --> |
|||
<text v-else-if="item.pay_status_code==2 && item.shipping_status_code==2">Completed</text> |
|||
|
|||
<view class="order_title_right"> |
|||
<text>order#{{item.order_sn}}</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="order_content"> |
|||
<template v-if="item.order_goods.length==1"> |
|||
<view class="good_info" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" > |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
<view class="left_info"> |
|||
<view class="info_name">{{item1.goods_name}}</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>{{item1.goods_attr |goodsAttr}}</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>×{{item1.goods_number}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template v-else> |
|||
<view class="good_info" @click.stop="showGoods(item.order_goods,1)"> |
|||
<view class="good_info_left"> |
|||
<view class="good_info_image" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="good_info_right"> |
|||
<text>{{item.order_goods.length}} ltems</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
|
|||
<view class="good_price">total:US${{item.total_fee_o}}</view> |
|||
<view class="good_points" v-if="item.pay_status_code==0 && item.order_status_code==0"> |
|||
<image src="/static/img/gantan1.png" mode=""></image> |
|||
<text>Reward 10 points</text> |
|||
</view> |
|||
<view class="order_button"> |
|||
<!-- 待支付订单 --> |
|||
<template v-if="item.pay_status_code==0 && item.order_status_code==0"> |
|||
<button class="cancel" @click.stop="openTips(item.order_id,0)">CANCEL ORDER</button> |
|||
<button class="pay" @click.stop="payNow(item.order_id,0)">PAY NOW</button> |
|||
</template> |
|||
<!-- 已取消订单 --> |
|||
<button v-if="item.order_status_code==2" class="cancel" @click.stop="openTips(item.order_id,1)">DELETE ORDER</button> |
|||
<!-- 待发货订单 --> |
|||
<template v-if="item.pay_status_code==2 && item.shipping_status_code==1 || item.shipping_status_code==4"> |
|||
<button class="cancel" @click.stop="goLogistics(item.order_id)">LOGISTICS</button> |
|||
<button class="pay" @click.stop="openTips(item.order_id,2)">CONFIRM RECEIPT</button> |
|||
</template> |
|||
<!-- 已完成订单 --> |
|||
<template v-if="item.pay_status_code==2 && item.shipping_status_code==2"> |
|||
<button class="cancel" @click.stop="openTips(item.order_id,1)">DELETE ORDER</button> |
|||
<button class="pay" @click.stop="goComment(item)" v-if="item.comment_status_code==0">COMMENT</button> |
|||
</template> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</template> |
|||
<!-- 待支付订单 --> |
|||
<template v-if="isList==true && scroll_active==1"> |
|||
<view class="" v-for="(item,idnex) in orderList" :key="item.order_id"> |
|||
<view class="order" @click="goDetails(item,item.order_id)" v-if="item.pay_status_code==0 && item.order_status_code==0"> |
|||
<view class="order_title"> |
|||
<text >Waiting for payment</text> |
|||
<view class="order_title_right"> |
|||
<text>order#{{item.order_sn}}</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="order_content"> |
|||
<template v-if="item.order_goods.length==1"> |
|||
<view class="good_info" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" > |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
<view class="left_info"> |
|||
<view class="info_name">{{item1.goods_name}}</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>{{item1.goods_attr |goodsAttr}}</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>×{{item1.goods_number}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template v-else> |
|||
<view class="good_info" @click.stop="showGoods(item.order_goods,1)"> |
|||
<view class="good_info_left"> |
|||
<view class="good_info_image" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="good_info_right"> |
|||
<text>{{item.order_goods.length}} ltems</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<view class="good_price">total:US${{item.total_fee_o}}</view> |
|||
<view class="good_points" v-if="item.pay_status_code==0 && item.order_status_code==0"> |
|||
<image src="/static/img/gantan1.png" mode=""></image> |
|||
<text>Reward 10 points</text> |
|||
</view> |
|||
<view class="order_button"> |
|||
<button class="cancel" @click.stop="openTips(item.order_id,0)">CANCEL ORDER</button> |
|||
<button class="pay" @click.stop="payNow(item.order_id,0)">PAY NOW</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<!-- 待发货订单 --> |
|||
<template v-if="isList==true && scroll_active==2"> |
|||
<view class="order" v-if="item.pay_status_code==2 && item.shipping_status_code==0" @click="goDetails(0,item.order_id)"> |
|||
<view class="order_title"> |
|||
<text>To be shipped</text> |
|||
<view class="order_title_right"> |
|||
<text>order#{{item.order_sn}}</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="order_content"> |
|||
<template v-if="item.order_goods.length==1"> |
|||
<view class="good_info" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" > |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
<view class="left_info"> |
|||
<view class="info_name">{{item1.goods_name}}</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>{{item1.goods_attr |goodsAttr}}</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>×{{item1.goods_number}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template v-else> |
|||
<view class="good_info" @click.stop="showGoods(item.order_goods,1)"> |
|||
<view class="good_info_left"> |
|||
<view class="good_info_image" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="good_info_right"> |
|||
<text>{{item.order_goods.length}} ltems</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<view class="good_price">total:US${{item.total_fee_o}}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<!-- 运输中订单 --> |
|||
<template v-if="isList==true && scroll_active==3"> |
|||
<view class="order" v-if="item.pay_status_code==2 && item.shipping_status_code==1 || item.shipping_status_code==4" @click="goDetails(4,item.order_id)"> |
|||
<view class="order_title"> |
|||
<text>Shipped</text> |
|||
<view class="order_title_right"> |
|||
<text>order#{{item.order_sn}}</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="order_content"> |
|||
<template v-if="item.order_goods.length==1"> |
|||
<view class="good_info" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" > |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
<view class="left_info"> |
|||
<view class="info_name">{{item1.goods_name}}</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>{{item1.goods_attr |goodsAttr}}</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>×{{item1.goods_number}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template v-else> |
|||
<view class="good_info" @click.stop="showGoods(item.order_goods,1)"> |
|||
<view class="good_info_left"> |
|||
<view class="good_info_image" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="good_info_right"> |
|||
<text>{{item.order_goods.length}} ltems</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<view class="good_price">total:US${{item.total_fee_o}}</view> |
|||
<view class="order_button"> |
|||
<button class="cancel" @click.stop="goLogistics(item.order_id)">LOGISTICS</button> |
|||
<button class="pay" @click.stop="openTips(item.order_id,2)">CONFIRM RECEIPT</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<!-- 已完成订单 --> |
|||
<template v-if="isList==true && scroll_active==4"> |
|||
<view class="order " v-if="item.pay_status_code==2 && item.shipping_status_code==2" @click="goDetails(2,item.order_id)"> |
|||
<view class="order_title"> |
|||
<text>Completed</text> |
|||
<view class="order_title_right"> |
|||
<text>order#{{item.order_sn}}</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="order_content"> |
|||
<template v-if="item.order_goods.length==1"> |
|||
<view class="good_info" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" > |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
<view class="left_info"> |
|||
<view class="info_name">{{item1.goods_name}}</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>{{item1.goods_attr |goodsAttr}}</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>×{{item1.goods_number}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template v-else> |
|||
<view class="good_info" @click.stop="showGoods(item.order_goods,1)"> |
|||
<view class="good_info_left"> |
|||
<view class="good_info_image" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="good_info_right"> |
|||
<text>{{item.order_goods.length}} ltems</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<view class="good_price">total:US${{item.total_fee_o}}</view> |
|||
<view class="order_button"> |
|||
<button class="cancel" @click.stop="openTips(item.order_id,1)">DELETE ORDER</button> |
|||
<button class="pay" @click.stop="goComment(item)" v-if="item.comment_status_code==0">COMMENT</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<!-- 退换货订单 --> |
|||
<template v-if="isList==true && scroll_active==5"> |
|||
<view class="order" v-if="item.order_status_code==4" @click="goDetails(2,item.order_id)"> |
|||
<view class="order_title"> |
|||
<text>Return and exchange</text> |
|||
<view class="order_title_right"> |
|||
<text>order#{{item.order_sn}}</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="order_content"> |
|||
<template v-if="item.order_goods.length==1"> |
|||
<view class="good_info" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" > |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
<view class="left_info"> |
|||
<view class="info_name">{{item1.goods_name}}</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>{{item1.goods_attr |goodsAttr}}</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>×{{item1.goods_number}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template v-else> |
|||
<view class="good_info" @click.stop="showGoods(item.order_goods,1)"> |
|||
<view class="good_info_left"> |
|||
<view class="good_info_image" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="good_info_right"> |
|||
<text>{{item.order_goods.length}} ltems</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<view class="good_price">total:US${{item.total_fee_o}}</view> |
|||
<view class="order_button"> |
|||
<button class="pay">CANCEL RETURN</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<!-- 已取消订单 --> |
|||
<template v-if="isList==true && scroll_active==6"> |
|||
<view class="order" v-if="item.order_status_code==2" @click="goDetails(1,item.order_id)"> |
|||
<view class="order_title"> |
|||
<text>cancelled</text> |
|||
<view class="order_title_right"> |
|||
<text>order#{{item.order_sn}}</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="order_content"> |
|||
<template v-if="item.order_goods.length==1"> |
|||
<view class="good_info" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" > |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
<view class="left_info"> |
|||
<view class="info_name">{{item1.goods_name}}</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>{{item1.goods_attr |goodsAttr}}</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>×{{item1.goods_number}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template v-else> |
|||
<view class="good_info" @click.stop="showGoods(item.order_goods,1)"> |
|||
<view class="good_info_left"> |
|||
<view class="good_info_image" v-for="(item1,index1) in item.order_goods" :key="index1"> |
|||
<image :src="item1.goods_img" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="good_info_right"> |
|||
<text>{{item.order_goods.length}} ltems</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<view class="good_price">total:US${{item.total_fee_o}}</view> |
|||
<view class="order_button"> |
|||
<button class="cancel" @click.stop="openTips(item.order_id,1)">DELETE ORDER</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template v-if="isList==false"> |
|||
<view class="order1"> |
|||
<image src="../../static/img/order_nodate.png" mode=""></image> |
|||
<text>You made no order yet!</text> |
|||
<button>Continue shopping</button> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
|
|||
|
|||
<view class="mask" v-show="isShow" @click="isShow=false"></view> |
|||
<!-- 支付 --> |
|||
<view class="order_popup" v-if="isShow && showType==0"> |
|||
<view class="order_popup_title"> |
|||
<text> |
|||
Payment Method |
|||
</text> |
|||
<image src="../../static/img/close1.png" mode="" @click="isPay=false"></image> |
|||
</view> |
|||
<view class="order_popup_pay" > |
|||
<view class="pay_item" @click="selectPay(0)"> |
|||
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==0"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image> |
|||
<view class="pay_item_right"> |
|||
<image src="../../static/img/pay_pal.png" mode=""></image> |
|||
<text>Pay Pal</text> |
|||
</view> |
|||
</view> |
|||
<view class="pay_item" @click="selectPay(1)"> |
|||
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==1"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image> |
|||
<view class="pay_item_right"> |
|||
<image src="../../static/img/card.png" mode=""></image> |
|||
<text>Credit/Debit Card</text> |
|||
</view> |
|||
</view> |
|||
<view class="pay_item" @click="selectPay(2)"> |
|||
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==2"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image> |
|||
<view class="pay_item_right"> |
|||
<image src="../../static/img/GPay.png" mode=""></image> |
|||
<text>Google Pay</text> |
|||
</view> |
|||
</view> |
|||
<view class="pay_item" @click="selectPay(3)"> |
|||
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==3"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image> |
|||
<view class="pay_item_right"> |
|||
<image src="../../static/img/APay.png" mode=""></image> |
|||
<text>Apple pay</text> |
|||
</view> |
|||
</view> |
|||
<button @click="getPayDate">PAY NOW</button> |
|||
</view> |
|||
</view> |
|||
<!-- 商品信息 --> |
|||
<view class="order_popup" v-show="isShow && showType==1"> |
|||
<view class="order_popup_title"> |
|||
<text>Commodity information</text> |
|||
</text> |
|||
<image src="../../static/img/close1.png" mode="" @click="isShow=false"></image> |
|||
</view> |
|||
<view class="order_popup_commodity" > |
|||
<view class="good_info" v-for="(item,index) in goods_list " :key="index"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" > |
|||
<image :src="item.goods_img" mode=""></image> |
|||
</view> |
|||
<view class="left_info"> |
|||
<view class="info_name">{{item.goods_name}}</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>{{item.goods_attr |goodsAttr}}</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>x{{item.goods_number}}</text> |
|||
</view> |
|||
<view class="info_price">US${{item.goods_price}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
<!-- 删除、取消弹框 --> |
|||
<uni-popup ref="alertDialog" type="dialog"> |
|||
<uni-popup-dialog type="error" cancelText="Close" :confirmText="tipsBut" title="Tips" :content="tipsInfo" @confirm="dialogConfirm" ></uni-popup-dialog> |
|||
</uni-popup> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
scrollList:[{text:'All'},{text:'Unpaid'},{text:'Processing'},{text:'Shipped'},{text:'Returns'},{text:'Completed'},{text:'Closed'}], |
|||
scroll_active:0, |
|||
isList:true, |
|||
orderList:[], |
|||
isShow:false, |
|||
// 显示状态 0 为支付 1为商品列表 |
|||
showType:0, |
|||
payQuery:{ |
|||
_action:'payorder', |
|||
order_id:'', |
|||
order_type:'GOODSBUY', |
|||
payment_method:'alipay.native' |
|||
}, |
|||
pay_index:0, |
|||
cancelQuery:{ |
|||
_action:'cancelorder', |
|||
order_id:'' |
|||
}, |
|||
// 弹出提示框的状态 0：取消订单 1、删除订单 2、确认收货 |
|||
tipsType:0, |
|||
tipsInfo:'', |
|||
tipsBut:'', |
|||
goods_list:[], |
|||
query:{_action:'getuserorders',page_index:1,page_size:10,payingstatus:'',status:'',shippingstatus:''} |
|||
} |
|||
}, |
|||
methods:{ |
|||
// 跳转评论页面 |
|||
goComment(item){ |
|||
uni.navigateTo({ |
|||
url:'../productDetails/review?data='+JSON.stringify(item) |
|||
}) |
|||
}, |
|||
showGoods(goodsList,type){ |
|||
this.isShow=true |
|||
this.showType=type |
|||
this.goods_list=goodsList |
|||
}, |
|||
// 查看物流 |
|||
goLogistics(id){ |
|||
uni.navigateTo({ |
|||
url:'../order/logisticsDetails?order_id='+id |
|||
}) |
|||
}, |
|||
// 订单详情 |
|||
goDetails(item,id){ |
|||
let index |
|||
if(item.pay_status_code==0 && item.order_status_code==0){ |
|||
index=3 |
|||
}else if(item.order_status_code==2){ |
|||
index=1 |
|||
}else if(item.pay_status_code==2 && item.shipping_status_code==0){ |
|||
index=0 |
|||
}else if(item.pay_status_code==2 && item.shipping_status_code==1 || item.shipping_status_code==4){ |
|||
index=4 |
|||
}else if(item.pay_status_code==2 && item.shipping_status_code==2){ |
|||
index=2 |
|||
}else if(item.order_status_code==4){ |
|||
// 退货 |
|||
index=5 |
|||
} |
|||
let url='../order/details?details_index='+index+'&id='+id |
|||
if(index==5){ |
|||
url='../order/refundDetails' |
|||
} |
|||
uni.navigateTo({ |
|||
url:url |
|||
}) |
|||
|
|||
|
|||
}, |
|||
// 选择支付方式 |
|||
selectPay(index){ |
|||
this.pay_index=index |
|||
}, |
|||
// 获取调用支付信息数据 |
|||
getPayDate(){ |
|||
defaultRequest2(this.payQuery).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
//订单对象，从服务器获取 |
|||
if(res.data.need_pay_amount==0) return |
|||
uni.requestPayment({ |
|||
provider: 'alipay', |
|||
orderInfo: res.data.prepay_data.order_info, //支付宝订单数据 |
|||
success: function (res) { |
|||
console.log('success:' + JSON.stringify(res)); |
|||
uni.navigateTo({ |
|||
url: 'paySuccess?order_id='+this.payQuery.order_id |
|||
}); |
|||
}, |
|||
fail: function (err) { |
|||
console.log('fail:' + JSON.stringify(err)); |
|||
uni.showToast({ |
|||
title:'Payment failed', |
|||
icon:'none' |
|||
}) |
|||
} |
|||
}); |
|||
} |
|||
}) |
|||
}, |
|||
payNow(id,type){ |
|||
this.payQuery.order_id=id |
|||
this.isShow=true |
|||
this.showType=type |
|||
}, |
|||
// 淡出提示 |
|||
openTips(id,type){ |
|||
this.tipsType=type |
|||
if(type==0){ |
|||
this.tipsInfo='Are you sure you want to cancel this order? This order will be regarded as invalid after cancellation' |
|||
this.tipsBut='CancelOrder' |
|||
this.cancelQuery._action='cancelorder' |
|||
}else if(type==1){ |
|||
this.tipsInfo='Are you sure you want to delete this order?' |
|||
this.tipsBut='DeleteOrder' |
|||
this.cancelQuery._action='deleteorder' |
|||
}else if(type==2){ |
|||
this.tipsInfo='Are you sure you have received the products?' |
|||
this.tipsBut='Confirm' |
|||
this.cancelQuery._action='affirmorder' |
|||
} |
|||
this.cancelQuery.order_id=id |
|||
this.$refs.alertDialog.open() |
|||
|
|||
}, |
|||
// 提示框点击确操作 取消订单、删除订单 |
|||
dialogConfirm(){ |
|||
defaultRequest2(this.cancelQuery).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.getList() |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
getList(){ |
|||
defaultRequest2(this.query).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.orderList=res.data |
|||
} |
|||
}) |
|||
}, |
|||
scrollChange(index){ |
|||
// {_action:'getuserorders',page_index:1,page_size:10,payingstatus:'',status:'',shippingstatus:''} |
|||
this.scroll_active=index |
|||
// if(index==0){ |
|||
// this.query.payingstatus='' |
|||
// this.query.status='' |
|||
// }else if(index==1){ |
|||
// this.query.payingstatus='1' |
|||
// this.query.status='0' |
|||
// this.query.shippingstatus='1' |
|||
// } |
|||
// this.getList() |
|||
}, |
|||
}, |
|||
onShow() { |
|||
this.getList() |
|||
}, |
|||
filters:{ |
|||
goodsAttr(e){ |
|||
return e.replace(/\s\n/g,';'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.body{ |
|||
padding-top: 100rpx; |
|||
} |
|||
.order_nav{ |
|||
padding:0 38.67rpx ; |
|||
border-bottom: 13.33rpx #F7F7F7 solid; |
|||
position: fixed; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
z-index: 99; |
|||
background-color: white; |
|||
.scroll-view_H{ |
|||
white-space: nowrap; |
|||
font-size: 28rpx; |
|||
color: #666666; |
|||
width: 100%; |
|||
|
|||
::-webkit-scrollbar { |
|||
width: 0; |
|||
height: 0; |
|||
background-color: transparent; |
|||
} |
|||
view{ |
|||
margin-left: 37.33rpx; |
|||
display: inline-block; |
|||
padding: 25.33rpx 0; |
|||
} |
|||
view:first-child{ |
|||
margin-left: 0; |
|||
} |
|||
.scroll_active{ |
|||
color: #000000; |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
border-bottom: 2px solid #000000; |
|||
} |
|||
} |
|||
} |
|||
.order{ |
|||
border-bottom: 13.33rpx #F7F7F7 solid; |
|||
padding-bottom: 26.67rpx; |
|||
.order_title{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding-left: 34.67rpx; |
|||
padding-right: 25.33rpx; |
|||
font-size: 28rpx; |
|||
padding-top: 26.67rpx; |
|||
padding-bottom: 20rpx; |
|||
border-bottom: 1px solid #F1F1F1; |
|||
|
|||
.order_title_right{ |
|||
font-size: 22.67rpx; |
|||
font-weight: bold; |
|||
color: #666666; |
|||
|
|||
image{ |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
margin-left: 14.67rpx; |
|||
} |
|||
} |
|||
} |
|||
.order_content{ |
|||
padding-left: 32rpx; |
|||
padding-right: 26.67rpx; |
|||
|
|||
.good_info{ |
|||
padding: 30.67rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 22.67rpx; |
|||
color: #666666; |
|||
font-weight: bold; |
|||
border-bottom: 1px solid #F1F1F1; |
|||
.good_info_left{ |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.good_info_image{ |
|||
width: 133.33rpx; |
|||
height: 133.33rpx; |
|||
background-color: #999999; |
|||
margin-right: 8rpx; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.left_info{ |
|||
margin-left: 24rpx; |
|||
|
|||
.info_name{ |
|||
font-size: 26.67rpx; |
|||
font-weight: 400; |
|||
width: 477.33rpx; |
|||
} |
|||
.left_info_bottom{ |
|||
width: 533.33rpx !important; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 32rpx; |
|||
color: #909090; |
|||
width: 100%; |
|||
margin-top: 24rpx; |
|||
.info_lable{ |
|||
padding: 5.33rpx 20rpx; |
|||
font-size: 22.67rpx; |
|||
border-radius: 33.33rpx; |
|||
border: 1px solid #D3D3D3; |
|||
image{ |
|||
width: 17.33rpx; |
|||
height: 17.33rpx; |
|||
margin-left: 14.67rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.good_info_right{ |
|||
display: flex; |
|||
align-items: center; |
|||
image{ |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
} |
|||
.good_price{ |
|||
font-size: 28rpx; |
|||
text-align: right; |
|||
margin: 24rpx 0; |
|||
} |
|||
.good_points{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
font-size: 24rpx; |
|||
color: #B22234; |
|||
|
|||
image{ |
|||
width: 29.33rpx; |
|||
height: 29.33rpx; |
|||
margin-right: 13.33rpx; |
|||
} |
|||
} |
|||
.order_button{ |
|||
margin-top: 33.33rpx; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
|
|||
button{ |
|||
height: 57.33rpx; |
|||
line-height: 57.33rpx; |
|||
font-weight: bold; |
|||
font-size: 22.67rpx; |
|||
border: none; |
|||
margin: 0; |
|||
border-radius: 0; |
|||
|
|||
&:last-child{ |
|||
margin-right: 0 !important; |
|||
} |
|||
} |
|||
.cancel{ |
|||
color: #666666; |
|||
margin-right: 20rpx; |
|||
background-color: white; |
|||
} |
|||
.pay{ |
|||
color: white; |
|||
background: black; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
.order1{ |
|||
padding-top: 90.67rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 400; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
image{ |
|||
width: 146.67rpx; |
|||
height: 146.67rpx; |
|||
margin-bottom: 36rpx; |
|||
} |
|||
button{ |
|||
background-color: #000000; |
|||
font-size: 24rpx; |
|||
color: white; |
|||
border-radius: 13.33rpx; |
|||
height: 63.33rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,161 @@ |
|||
<template> |
|||
<view> |
|||
<view class="profile_item profile_item1"> |
|||
<text>Photo</text> |
|||
<view class="profile_item_right" @click="gotochange()"> |
|||
<image src="../../static/img/logo.png" mode="" class="head_img" v-show="!user_info.isLogin"></image> |
|||
<image :src="user_info.user_head?user_info.user_head:user_info.headicons[5]" mode="" class="head_img" v-if="user_info.isLogin"></image> |
|||
<image src="../../static/img/right1.png" alt="" class="right_img"></image> |
|||
</view> |
|||
</view> |
|||
<view class="profile_item " @click="$refs.inputDialog.open()"> |
|||
<text>Name</text> |
|||
<view class="profile_item_right"> |
|||
<text>{{user_info.nickname}}</text> |
|||
<image src="../../static/img/right1.png" alt="" class="right_img"></image> |
|||
</view> |
|||
</view> |
|||
<view class="profile_item "> |
|||
<text>Email</text> |
|||
<view class="profile_item_right"> |
|||
<image src="../../static/img/gantan.png" alt="" class="right_img1" v-if="user_info.is_validated==0"></image> |
|||
<text>{{user_info.is_validated==0?'unverified':user_info.email}}</text> |
|||
<image src="../../static/img/right1.png" alt="" class="right_img"></image> |
|||
</view> |
|||
</view> |
|||
<navigator :url="'/pages/login/verifyEmail?type=0&email='+user_info.email" > |
|||
<view class="profile_item "> |
|||
<text>Change Password</text> |
|||
<view class="profile_item_right"> |
|||
<image src="../../static/img/right1.png" alt="" class="right_img"></image> |
|||
</view> |
|||
</view> |
|||
</navigator> |
|||
<view class="profile_item "> |
|||
<text>Ship to</text> |
|||
<view class="profile_item_right"> |
|||
<text>{{addressDate.country_name || 'United States'}}</text> |
|||
<image src="../../static/img/right1.png" alt="" class="right_img"></image> |
|||
</view> |
|||
</view> |
|||
<uni-popup ref="inputDialog" type="dialog"> |
|||
<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" |
|||
placeholder="请输入姓名" @confirm="dialogInputConfirm"></uni-popup-dialog> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
user_info:{ |
|||
isLogin:false, |
|||
}, |
|||
query:{ |
|||
_action:'updateinfo', |
|||
nickname:'' |
|||
}, |
|||
addressDate:{} |
|||
} |
|||
}, |
|||
methods:{ |
|||
//换头像 |
|||
gotochange(){ |
|||
uni.navigateTo({ |
|||
url:'./changeImg' |
|||
}) |
|||
}, |
|||
// 获取默认地址 |
|||
getDefaultAddress(){ |
|||
let data={_action:'getdefaultconsignee'} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.addressDate=res.data |
|||
} |
|||
}) |
|||
}, |
|||
getUserInfo(){ |
|||
let data={_action:'getinfo'} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
res.data.isLogin=true |
|||
this.user_info=res.data |
|||
uni.setStorageSync('user_info',this.user_info) |
|||
}else{ |
|||
this.user_info=uni.getStorageSync('user_info') |
|||
} |
|||
}) |
|||
}, |
|||
dialogInputConfirm(val){ |
|||
this.query.nickname=val |
|||
defaultRequest2(this.query).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
title:'修改成功', |
|||
icon:'none' |
|||
}) |
|||
this.getUserInfo() |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.user_info=uni.getStorageSync('user_info') |
|||
this.getUserInfo() |
|||
this.getDefaultAddress() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page{ |
|||
border-top: 13.33rpx #F7F7F7 solid; |
|||
padding-left: 26.67rpx; |
|||
} |
|||
|
|||
</style> |
|||
<style lang="scss" scoped> |
|||
|
|||
.profile_item{ |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
padding: 40rpx 0; |
|||
padding-right: 33.33rpx; |
|||
border-bottom: 1.33rpx #ECECEC solid; |
|||
box-sizing: border-box; |
|||
|
|||
.profile_item_right{ |
|||
display: flex; |
|||
align-items: center; |
|||
.head_img{ |
|||
width: 112rpx; |
|||
height: 112rpx; |
|||
border-radius: 50%; |
|||
} |
|||
.right_img{ |
|||
width: 18.67rpx; |
|||
height: 18.67rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
.right_img1{ |
|||
width: 25.33rpx; |
|||
height: 25.33rpx; |
|||
margin-right: 9.33rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.profile_item1{ |
|||
padding: 17.33rpx 0; |
|||
padding-right: 33.33rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,74 @@ |
|||
<template> |
|||
<view class="body"> |
|||
<navigator url="/pages/productDetails/review"> |
|||
<view class="reviews_item" v-for="(item,index) in 2" :key="index"> |
|||
<view class="reviews_item_title"> |
|||
<view class="reviews_title_user"> |
|||
<text>e***8</text> |
|||
<uni-rate size="18" :disabled="true" disabledColor="red" :value="4" active-color="red" :is-fill="false"/> |
|||
</view> |
|||
<view class="reviews_title_time">07/03/2022</view> |
|||
</view> |
|||
<view class="reviews_item_color">Color:Multicolor</view> |
|||
<view class="reviews_item_content">So unique! Can’t wait to wear these.</view> |
|||
<view class="reviews_item_image"> |
|||
<view class="reviews_image_content" v-for="(item,index) in 3" :key="index"></view> |
|||
</view> |
|||
<view class="more"> |
|||
<image src="../../static/img/more.png" mode="" @click="isShwo=true"></image> |
|||
<view class="more_delete" v-show="isShwo">delete</view> |
|||
</view> |
|||
</view> |
|||
</navigator> |
|||
<view class="mask" v-show="isShwo" @click="isShwo=false"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isShwo:false |
|||
} |
|||
}, |
|||
methods:{ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
page{ |
|||
border-top: 14.67rpx #F6F5FA solid; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.body{ |
|||
padding: 0 32rpx; |
|||
} |
|||
.more{ |
|||
text-align: right; |
|||
position: relative; |
|||
// margin-top: 20rpx; |
|||
image{ |
|||
width: 24rpx; |
|||
height: 6.67rpx; |
|||
} |
|||
.more_delete{ |
|||
background-image: url(@/static/img/more_bf.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; |
|||
} |
|||
} |
|||
.mask{ |
|||
background-color: white; |
|||
opacity: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,60 @@ |
|||
<template> |
|||
<view> |
|||
<uni-nav-bar left-icon="left" title="Points Details" color="#000000" rightIcon="info" @clickLeft="back" :border="false" :statusBar="true" /> |
|||
<view class="points"> |
|||
<view class="points_item" v-for="(item,index) in 10" :key="index"> |
|||
<view class="points_item_title"> |
|||
<text>Order return</text> |
|||
<text class="item_title_price">+US$314.00</text> |
|||
</view> |
|||
<text>21/04/2022 15:42:31</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
back(){ |
|||
uni.navigateBack() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.uni-navbar{ |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
border-bottom: 14.67rpx #F6F5FA solid; |
|||
} |
|||
.points{ |
|||
padding: 0 25.33rpx; |
|||
|
|||
.points_item{ |
|||
padding: 37.33rpx 0; |
|||
color: #999999; |
|||
font-size: 24rpx; |
|||
font-weight: 400; |
|||
border-bottom: 1px solid #E2E2E2; |
|||
.points_item_title{ |
|||
font-size: 28rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 18rpx; |
|||
color: black; |
|||
|
|||
.item_title_price{ |
|||
color: #B22234; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,119 @@ |
|||
<template> |
|||
<view> |
|||
<view class="profile_item "> |
|||
<text>Country</text> |
|||
<image src="../../static/img/right1.png" mode="" class="right_img"></image> |
|||
</view> |
|||
<view class="profile_item "> |
|||
<text>Language</text> |
|||
<image src="../../static/img/right1.png" mode="" class="right_img"></image> |
|||
</view> |
|||
<view class="profile_item "> |
|||
<text>My account</text> |
|||
<image src="../../static/img/right1.png" mode="" class="right_img"></image> |
|||
</view> |
|||
<view class="profile_item "> |
|||
<text>Privacy policy</text> |
|||
<image src="../../static/img/right1.png" mode="" class="right_img"></image> |
|||
</view> |
|||
<view class="profile_item "> |
|||
<text>Legal</text> |
|||
<image src="../../static/img/right1.png" mode="" class="right_img"></image> |
|||
</view> |
|||
<view class="set_button"> |
|||
<button @click="signOut">SIGN OUT</button> |
|||
</view> |
|||
<view class="edition"> |
|||
<view class="edition_title">CHIC BUYER</view> |
|||
<text>Version 1.0</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
signOut(){ |
|||
let data={_action:'logout'} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.clearStorageSync() |
|||
uni.reLaunch({ |
|||
url:'../login/index' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
page{ |
|||
border-top: 14.67rpx #F7F7F7 solid; |
|||
padding-left: 26.67rpx; |
|||
box-sizing: border-box; |
|||
|
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
page{ |
|||
|
|||
} |
|||
.profile_item{ |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
padding: 40rpx 0; |
|||
padding-right: 33.33rpx; |
|||
border-bottom: 1.33rpx #ECECEC solid; |
|||
box-sizing: border-box; |
|||
|
|||
.right_img{ |
|||
width: 18.67rpx; |
|||
height: 18.67rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
} |
|||
.profile_item:last-child{ |
|||
border-bottom: none; |
|||
} |
|||
.set_button{ |
|||
width: 686.67rpx; |
|||
height: 73.33rpx; |
|||
margin-top: 133.33rpx; |
|||
|
|||
button{ |
|||
background-color: #191919; |
|||
font-size: 26.67rpx; |
|||
color: white; |
|||
font-weight: bold; |
|||
height: 100%; |
|||
line-height: 73.33rpx; |
|||
border-radius: 0; |
|||
} |
|||
} |
|||
.edition{ |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
font-size: 20rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 112rpx; |
|||
.edition_title{ |
|||
font-size: 25.33rpx; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,99 @@ |
|||
<template> |
|||
<view class="wishlist_body"> |
|||
<view class="status_bar"></view> |
|||
<uni-nav-bar left-icon="left" :rightText="isDelete?'Done':'Delete'" title="Wishlist" color="#000000" @clickLeft="back" @clickRight="$refs.alertDialog.open()"/> |
|||
<view class="wishlist"> |
|||
<view class="wishlist_item" v-for="(item,index) in goodsList" :key="index" @click="changeImage(item.id)"> |
|||
<view class="wishlist_item_img"> |
|||
<image :src="item.goods_img" mode="" class="wishlist_item_img_goods"></image> |
|||
<image src="../../static/img/select.png" mode="" class="select" v-show="isDelete && item.is_select==0"></image> |
|||
<image src="../../static/img/select.png" mode="" class="select" v-show="isDelete && item.is_select==1"></image> |
|||
</view> |
|||
<view class="wishlist_item_bottom"> |
|||
<text>US${{item.promote_price?item.promote_price:item.shop_price}}</text> |
|||
<image src="../../static/img/cart2.png" mode="" class="wishlist_item_bottom_icon"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="wishlist_foot" v-show="isDelete"> |
|||
<view class="wishlist_foot_left"> |
|||
<image src="../../static/img/select2.png" mode=""></image> |
|||
<text>All</text> |
|||
</view> |
|||
<view class="wishlist_foot_right"> |
|||
<button @click="removeLike">DELETE</button> |
|||
</view> |
|||
</view> |
|||
<uni-popup ref="alertDialog" type="dialog"> |
|||
<uni-popup-dialog type="error" cancelText="Close" confirmText="Delete" title="Tips" content="Whether to delete all favorites?" |
|||
@confirm="removeLike(0)" ></uni-popup-dialog> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
isDelete:false, |
|||
goodsList:[] |
|||
} |
|||
}, |
|||
methods:{ |
|||
getList(){ |
|||
let data={_action:'getfaviouritegoods',page_index:1,page_size:30} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.goodsList=res.data |
|||
} |
|||
}) |
|||
}, |
|||
// 添加收藏 |
|||
addLike(id){ |
|||
let data={_action:'setfaviouritegoods',goods_id:id} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
title:res.message, |
|||
icon:'none' |
|||
}) |
|||
this.changeImage(id,0) |
|||
} |
|||
}) |
|||
}, |
|||
// 取消收藏 |
|||
removeLike(id){ |
|||
let data={_action:'unsetfaviouritegoods',goods_id:id} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
title:res.message, |
|||
icon:'none' |
|||
}) |
|||
this.getList() |
|||
} |
|||
}) |
|||
}, |
|||
back(){ |
|||
uni.navigateBack() |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getList() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page{ |
|||
|
|||
} |
|||
.uni-navbar{ |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,213 @@ |
|||
<template> |
|||
<view class="body"> |
|||
|
|||
<view class="search"> |
|||
<view class="status_bar"></view> |
|||
<view class="search1"> |
|||
<navigator url="/pages/index/search"> |
|||
<view class="navigation_seach"> |
|||
<image src="../../static/img/seach.png" mode=""></image> |
|||
<text>search</text> |
|||
</view> |
|||
</navigator> |
|||
<view class="navigation_title_right"> |
|||
<image src="../../static/img/like.png" mode=""></image> |
|||
<uni-badge :text="5" type="error" absolute="rightTop"> |
|||
<image src="../../static/img/shop_cart.png" mode=""></image> |
|||
</uni-badge> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="category"> |
|||
<view class="category_left"> |
|||
<view class="category_left_item" :class="categoryIndex==item.cat_id?'categoryActive':''" v-for="(item,index) in categoryList" :key="item.cat_id" |
|||
@click="changeCategory(item.cat_id)"> |
|||
{{item.cat_name}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="good_body"> |
|||
<view class="good_title">PICKS FOR YOU</view> |
|||
<view class="good_content" v-for="(item,index) in categoryList" :key="item.cat_id" v-show="categoryIndex==item.cat_id"> |
|||
<view class="good_item" v-for="(item1,index1) in item.subcategories" :key="item1.cat_id" @click="goPets(item1.cat_id)"> |
|||
<img :src="item1.first_goods_thumb" alt="" class="good_item_img"> |
|||
<text>{{item1.cat_name}}</text> |
|||
</view> |
|||
</view> |
|||
<!-- <view class="good_title">YOU MAY ALSO LIKE</view> |
|||
<view class="good_content"> |
|||
<view class="good_item" v-for="(item,index) in 5" :key="index"> |
|||
<view class="good_item_img"></view> |
|||
<text>Women Drese</text> |
|||
</view> |
|||
</view> --> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
categoryIndex:0, |
|||
categoryList:['CHOICE','WOMEN','MEN','KIDS','PETS','SWIMWEAR','LINGERUE&LOUNGEAR','DENIM&JEANS','ACTIVEWEAR','BEAUTY','SHOES'] |
|||
} |
|||
}, |
|||
methods:{ |
|||
changeCategory(i){ |
|||
this.categoryIndex=i |
|||
}, |
|||
goPets(id){ |
|||
// uni.navigateTo({ |
|||
// url:"productList?cat_id="+id+'&type=0' |
|||
// }) |
|||
uni.navigateTo({ |
|||
url:"pets?cat_id="+id+'&type=0' |
|||
}) |
|||
}, |
|||
getList(){ |
|||
let data={_action:'getcategorytree'} |
|||
defaultRequest(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.categoryList=res.data |
|||
this.categoryIndex=res.data[0].cat_id |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.getList() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
|
|||
page{ |
|||
padding-top: 200rpx; |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.body{ |
|||
height: 100%; |
|||
} |
|||
.search{ |
|||
width: 100%; |
|||
background-color: white; |
|||
box-sizing: border-box; |
|||
padding: 33.33rpx 26.67rpx; |
|||
|
|||
position: fixed; |
|||
top: 0; |
|||
z-index: 99; |
|||
border-bottom: 1px solid #F5F6FA; |
|||
|
|||
.search1{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.navigation_seach{ |
|||
width: 546.67rpx; |
|||
background-color: #F5F6FA; |
|||
border-radius: 6.67rpx; |
|||
height: 66.67rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #8F9094; |
|||
font-size: 26.67rpx; |
|||
padding-left: 22rpx; |
|||
box-sizing: border-box; |
|||
|
|||
image{ |
|||
width: 29.33rpx; |
|||
height: 29.33rpx; |
|||
margin-right: 22rpx; |
|||
} |
|||
} |
|||
.navigation_title_right{ |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
image{ |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
} |
|||
>image:first-child{ |
|||
margin-right: 32.67rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
.category{ |
|||
height: 100%; |
|||
display: flex; |
|||
|
|||
.category_left{ |
|||
height: 100%; |
|||
background-color: #F5F6FA; |
|||
width: 197.33rpx; |
|||
.category_left_item{ |
|||
width: 100%; |
|||
padding: 0 18rpx; |
|||
height: 96rpx; |
|||
font-size: 26.67rpx; |
|||
font-weight: 600; |
|||
box-sizing: border-box; |
|||
font-family: PingFang SC; |
|||
|
|||
display: flex; |
|||
align-items: center; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
} |
|||
.categoryActive{ |
|||
background-color: black; |
|||
color: white; |
|||
} |
|||
} |
|||
.good_body{ |
|||
margin-left: 36rpx; |
|||
width: 552.67rpx; |
|||
// padding-top: 39.33rpx; |
|||
|
|||
.good_title{ |
|||
height: 96rpx; |
|||
line-height: 96rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
} |
|||
.good_content{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.good_item{ |
|||
font-size: 22.67rpx; |
|||
text-align: center; |
|||
margin-right: 25.33rpx; |
|||
margin-bottom: 51.33rpx; |
|||
|
|||
.good_item_img{ |
|||
display: block; |
|||
background-color: #999999; |
|||
width: 146.67rpx; |
|||
height: 146.67rpx; |
|||
margin-bottom: 22rpx; |
|||
|
|||
} |
|||
} |
|||
.good_item:nth-child(3n+3){ |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,225 @@ |
|||
<template> |
|||
<view style="background-color: #fff;"> |
|||
<view class="font fixed"> |
|||
<uni-section type="line" |
|||
style="margin-bottom: 3px;"> |
|||
<view class="box-bg"> |
|||
<uni-nav-bar title="Pets" border="false"> |
|||
<block slot="left" > |
|||
<!-- <view ><uni-icons type="back" size="30"></uni-icons></view> --> |
|||
<view class="icon-all" @click="goback()"><image class="imgsize"src='../../static/icon/left.png'/></view> |
|||
<view style="margin-left: 50rpx;" class="icon-all"><image class="imgsize"src='../../static/icon/search.png'/></view> |
|||
</block> |
|||
<block slot="right"> |
|||
<uni-badge class="uni-badge-left-margin" type="info"absolute="rightTop" :offset="[-22, -10]" :text="num" size="small"/> |
|||
<view class="icon-b"><image class="imgsize"src='../../static/icon/cart.png'></view> |
|||
</block> |
|||
</uni-nav-bar> |
|||
</view> |
|||
</uni-section> |
|||
|
|||
<!-- 分类 --> |
|||
<view class="classifity"> |
|||
<scroll-view scroll-x class="scroll_view"> |
|||
<view class="tab"> |
|||
<view class="tab_item" v-for ="(item,index) in list" :key ="index" @click="tabActive(index)"> |
|||
<view style="width: 100rpx;" :class="[index==tabNow?'select':'']">{{item.text}}</view> |
|||
<!-- <view><uni-icons :type="item.icon" :size="item.size"></uni-icons></view> --> |
|||
<view class="icon-a" :class="[index===3?'icon-b':'']"><image class="imgsize ":src="item.src"v-if="item.src!=''"/></view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
<view class="fg"></view> |
|||
<view class="tar" v-for="(item,index) in pets" :key="index"> |
|||
<!-- 图片 --> |
|||
<view class="img"><image :src="item.goods_img" class="imgsize"/></view> |
|||
<!-- 文字 --> |
|||
<view class="flex"> |
|||
<view class="tar_text"> |
|||
{{ item.short_name }} |
|||
</view> |
|||
<view class="tar-text2">{{ item.goods_sn}}</view> |
|||
<view class="icon flex"> |
|||
<view style="margin: 10rpx;font-weight: bold; width: 120rpx;">US${{ item.shop_price }}</view> |
|||
|
|||
<!-- <view style="margin-left: 150rpx;"><uni-icons :type="heart" size="30" ></uni-icons></view> |
|||
<view style="margin-left: 20rpx;"><uni-icons type="cart" size="30"></uni-icons></view> --> |
|||
|
|||
<view style="margin-left: 160rpx;"class="icon-b"><image class="imgsize" src="../../static/icon/heart.png"/></view> |
|||
<view style="margin-left: 30rpx;"><uni-icons type="cart" size="30"></uni-icons></view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest} from '../../api/index.js' |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
list:[ |
|||
{icon:'',text:'Synthesis',src:''}, |
|||
{icon:'bottom',size:15,text:'Sales',src:'../../static/icon/back.png'}, |
|||
{icon:'top',size:15,text:'Prise',src:'../../static/icon/back.png'}, |
|||
{icon:'settings-filled',size:30,text:' | ',src:'../../static/icon/all.png'} |
|||
|
|||
], |
|||
tabNow:0, |
|||
heart:'heart-filled', |
|||
num:13, |
|||
query:{ |
|||
_action:'getgoods', |
|||
order_type:0, |
|||
page_index:1, |
|||
pagesize:10, |
|||
cat:'', |
|||
}, |
|||
pets:[] |
|||
} |
|||
|
|||
}, |
|||
onLoad(e) { |
|||
console.log(e,'数据') |
|||
this.query.cat = e.cat_id |
|||
console.log(this.query.cat,'jjjjj') |
|||
this.getpets() |
|||
}, |
|||
onPullDownRefresh() { |
|||
this.getpets() |
|||
setTimeout(function () { |
|||
uni.stopPullDownRefresh(); |
|||
}, 1000); |
|||
}, |
|||
methods:{ |
|||
tabActive(i){ |
|||
console.log(i) |
|||
this.tabNow = i |
|||
}, |
|||
goback(){ |
|||
console.log('ppppp') |
|||
uni.navigateBack({ |
|||
delta:1 |
|||
}) |
|||
}, |
|||
getpets(){ |
|||
defaultRequest(this.query).then( res =>{ |
|||
// console.log(res,'res') |
|||
this.pets = res.data |
|||
console.log(res.data,'res') |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.flex{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.bg-white{ |
|||
background-color: #fff; |
|||
} |
|||
.font{ |
|||
height: 200rpx; |
|||
background-color: #fff; |
|||
padding: 60rpx 5rpx 0 5rpx ; |
|||
} |
|||
.fixed{ |
|||
position: fixed; |
|||
z-index: 99; |
|||
} |
|||
.icon-a{ |
|||
height: 18rpx; |
|||
width: 18rpx; |
|||
} |
|||
.icon-b{ |
|||
height: 40rpx; |
|||
width: 40rpx; |
|||
margin: 10rpx; |
|||
} |
|||
.icon-all{ |
|||
height: 30rpx; |
|||
width:30rpx ; |
|||
} |
|||
.imgsize{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.scroll_view { |
|||
background-color: #fff; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.tab { |
|||
display: flex; |
|||
text-align: center; |
|||
} |
|||
|
|||
.tab .tab_item { |
|||
height: 90rpx; |
|||
display: flex; |
|||
line-height: 90rpx; |
|||
margin:0 10rpx; |
|||
padding: 0 20rpx; |
|||
flex: 1; |
|||
} |
|||
.tab_item view:nth-child(1){ |
|||
/* margin-left: 10rpx; */ |
|||
text-align: center; |
|||
} |
|||
.fg{ |
|||
height: 200rpx; |
|||
background-color: #fff; |
|||
|
|||
} |
|||
.tar{ |
|||
height: 240rpx; |
|||
background-color: #fff; |
|||
padding: 18rpx 15rpx 5rpx 15rpx; |
|||
display: flex; |
|||
margin: 20rpx 0; |
|||
} |
|||
.img{ |
|||
height:200rpx ; |
|||
width:200rpx ; |
|||
margin: 20rpx 10rpx; |
|||
background-color: #ccc; |
|||
} |
|||
.tar_text{ |
|||
width: 60vw; |
|||
height: 70rpx; |
|||
padding: 6rpx; |
|||
margin: 10rpx 20rpx; |
|||
font-size: 28rpx; |
|||
overflow: hidden; |
|||
white-space: wrap; |
|||
text-overflow: ellipsis; |
|||
|
|||
|
|||
|
|||
} |
|||
.tar-text2{ |
|||
color:#B22234; |
|||
line-height: 50rpx; |
|||
text-align: center; |
|||
width: 200rpx; |
|||
background:#fcf0f1; |
|||
border-radius: 10rpx; |
|||
font-size: 20rpx; |
|||
margin: 5rpx 2rpx; |
|||
} |
|||
.icon{ |
|||
flex-direction: row; |
|||
/* justify-content: center; */ |
|||
align-items: center; |
|||
margin: 10rpx 10rpx; |
|||
} |
|||
.select{ |
|||
font-weight: 900; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,134 @@ |
|||
<template> |
|||
<view> |
|||
<uni-nav-bar left-icon="left" :statusBar="true" title="Flash Sale" |
|||
color="#000000" rightIcon="info" @clickLeft="back" @clickRight="isDelete=!isDelete" :border="false"/> |
|||
|
|||
<view class="body"> |
|||
<view class="countDown"> |
|||
<text>Ends in</text> |
|||
<uni-countdown :showDay="false" :hour="23" :minute="0" :second="0" color="#FFFFFF" background-color="#1B1B1B" class="countDown_assembly" /> |
|||
</view> |
|||
<view class="tips"> |
|||
Chic selects commodities from time to time to carry |
|||
out special price activities. |
|||
</view> |
|||
<view class="tips1">The quantity of special price commodities is limited and will be sold out</view> |
|||
<view class="recommend"> |
|||
<view class="recommend_content"> |
|||
<view class="recommend_content_item" v-for="(item,index) in list " :key="index"> |
|||
<view class="recommend_content_item_image"> |
|||
<image :src="item.goods_img" mode=""></image> |
|||
</view> |
|||
<view class="recommend_content_item_name">{{item.name}}</view> |
|||
<view class="recommend_item_operation"> |
|||
<view> |
|||
<view class="recommend_content_item_pric">US${{item.promote_price?item.promote_price:item.shop_price}}</view> |
|||
<view class="recommend_content_item_pric1">US${{item.shop_price}}</view> |
|||
</view> |
|||
<image src="../../static/img/add.png" mode=""></image> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
list:[] |
|||
} |
|||
}, |
|||
methods:{ |
|||
getList(){ |
|||
let data ={_action:'getseckillgoods',gid:'213'} |
|||
defaultRequest(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.list=res.data |
|||
} |
|||
}) |
|||
}, |
|||
back(){ |
|||
uni.navigateBack() |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getList() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.uni-navbar{ |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.body{ |
|||
border-top: 13.33rpx #F7F7F7 solid; |
|||
padding:0 26rpx; |
|||
padding-top: 34rpx; |
|||
} |
|||
.recommend{ |
|||
padding: 0; |
|||
|
|||
.recommend_item_operation{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 10rpx; |
|||
.recommend_content_item_pric{ |
|||
color: #B22234; |
|||
font-weight: 600; |
|||
font-size: 32rpx; |
|||
margin-top: 0; |
|||
} |
|||
.recommend_content_item_pric1{ |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
text-decoration: line-through; |
|||
} |
|||
image{ |
|||
width: 58.67rpx; |
|||
height: 58.67rpx; |
|||
} |
|||
} |
|||
} |
|||
.recommend_content_item_name{ |
|||
overflow : hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */ |
|||
-webkit-box-orient: vertical; /* 垂直排列 */ |
|||
word-break: break-all; /* 内容自动换行 */ |
|||
} |
|||
.countDown{ |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 41.33rpx; |
|||
justify-content: center; |
|||
margin-bottom: 34rpx; |
|||
|
|||
.countDown_assembly{ |
|||
margin-left: 12.67rpx; |
|||
} |
|||
|
|||
} |
|||
.tips{ |
|||
width: 572.67rpx; |
|||
margin: 0 auto; |
|||
font-size: 24rpx; |
|||
margin-bottom: 14rpx; |
|||
text-align: center; |
|||
} |
|||
.tips1{ |
|||
font-size: 20rpx; |
|||
color: #666666; |
|||
margin-bottom: 30rpx; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,736 @@ |
|||
<template> |
|||
|
|||
<view class="body" > |
|||
|
|||
<!-- 头部导航栏 --> |
|||
<view class="navigation page_padding" > |
|||
<view class="status_bar"></view> |
|||
<view class="navigation_title" :class="isScrollShow?'isScrollShow':'' "> |
|||
<template v-if="!isScrollShow "> |
|||
<navigator url="/pages/account/message" class="order_info_item"> |
|||
<uni-badge :text="5" type="error" absolute="rightTop"> |
|||
<image src="../../static/img/msg.png" mode=""></image> |
|||
</uni-badge> |
|||
</navigator> |
|||
<!-- <text>Dope VIDEO</text> --> |
|||
<image src="/static/img/dope plus.png" mode="" class="index_logo"></image> |
|||
</template> |
|||
|
|||
<view class="navigation_title_right"> |
|||
<image src="../../static/img/like.png" mode=""></image> |
|||
<uni-badge :text="5" type="error" absolute="rightTop"> |
|||
<image src="../../static/img/shop_cart.png" mode=""></image> |
|||
</uni-badge> |
|||
</view> |
|||
</view> |
|||
<navigator url="/pages/index/search"> |
|||
<view class="navigation_seach" :class="isScrollShow?'isScrollShow1':'' "> |
|||
<image src="../../static/img/seach.png" mode=""></image> |
|||
<text>search</text> |
|||
</view> |
|||
</navigator> |
|||
<view class="navigation_scroll" :class="isScrollShow?'isScrollShow2':'' "> |
|||
<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false"> |
|||
<view :class="scroll_active==index?'scroll_active':''" v-for="(item,index) in scrollList" @click="scrollChange(index)" :key="index">{{item.text}}</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-for="(item,index) in indexDate.zones" :key="item.zone_id"> |
|||
|
|||
<!-- 轮播图 --> |
|||
<view class="uni-margin-wrap page_padding" v-if="item.zone_code=='BANNER' && item.zone_status=='NORMAL'"> |
|||
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" > |
|||
<swiper-item v-for="(item1,index1) in item.blocks" :key="item1.block_id"> |
|||
<view class="swiper-item " v-if="item1.block_status=='NORMAL'"> |
|||
<image :src="item1.block_pic" mode=""></image> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
|
|||
<!-- 宫格 --> |
|||
<uni-swiper-dot :info="info" :current="current" field="content" mode="default" class="page_padding" |
|||
v-if="item.zone_code=='ICON' && item.zone_status=='NORMAL' && item.zone_code!=indexDate.zones[index-1].zone_code"> |
|||
<swiper class="grid_swiper" @change="gridSwiper"> |
|||
<swiper-item v-for="(item1,index1) in info" :key="item1.zone_id"> |
|||
<view class="grid_content"> |
|||
<view class="grid_item" v-for="(item2, index2) in item1.blocks" :key="item2.block_id"> |
|||
<template v-if="item2.block_status=='NORMAL'"> |
|||
<view class="grid_item_img"> |
|||
<image :src="item2.block_pic" mode=""></image> |
|||
</view> |
|||
<text>{{item2.block_title}}</text> |
|||
</template> |
|||
|
|||
</view> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</uni-swiper-dot> |
|||
|
|||
<!-- 打折 --> |
|||
<!-- class="discount page_padding" --> |
|||
<view class="ONEPIC" v-if="item.zone_code=='ONEPIC' && item.zone_status=='NORMAL'"> |
|||
<image :src="item.blocks[0].block_pic" mode="" ></image> |
|||
</view> |
|||
<view class="TWOPIC" v-if="item.zone_code=='TWOPIC' && item.zone_status=='NORMAL'"> |
|||
<image :src="item.blocks[0].block_pic" mode="" ></image> |
|||
</view> |
|||
<view class="THREEPIC" v-if="item.zone_code=='THREEPIC' && item.zone_status=='NORMAL'"> |
|||
<image :src="item.blocks[0].block_pic" mode="" ></image> |
|||
</view> |
|||
<view class="FOURPIC" v-if="item.zone_code=='FOURPIC' && item.zone_status=='NORMAL'"> |
|||
<image :src="item.blocks[0].block_pic" mode="" ></image> |
|||
</view> |
|||
<view class="FIVEPIC" v-if="item.zone_code=='FIVEPIC' && item.zone_status=='NORMAL'"> |
|||
<image :src="item.blocks[0].block_pic" mode="" ></image> |
|||
</view> |
|||
<view class="SIXPIC" v-if="item.zone_code=='SIXPIC' && item.zone_status=='NORMAL'"> |
|||
<image :src="item.blocks[0].block_pic" mode="" ></image> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<!-- 标题 --> |
|||
<navigator url="/pages/index/flashSale" v-if="item.zone_code=='SPIKE1' && item.zone_status=='NORMAL'"> |
|||
<view class="index_title page_padding"> |
|||
<text>Flash Sale</text> |
|||
<view class="title_right"> |
|||
<uni-countdown :showDay="false" :hour="curEndTime |hours" :minute="curEndTime|minutes" :second="curEndTime|seconds" color="#FFFFFF" background-color="#1B1B1B" /> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</navigator> |
|||
|
|||
|
|||
<!-- SPIKE 1 --> |
|||
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='SPIKE1' && item.zone_status=='NORMAL'"> |
|||
<view class="spike1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id" @click="goPage"> |
|||
<view class="spike1_item_img"> |
|||
<image :src="item1.block_pic" mode=""></image> |
|||
</view> |
|||
<view class="spike1_item_bottom"> |
|||
<text>US${{item1.block_price}}</text> |
|||
<view class="spike1_item_text">US${{item1.block_title}}</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<!-- 标题 --> |
|||
<view class="index_title page_padding" v-if="item.zone_code=='TITLE' && item.zone_status=='NORMAL'"> |
|||
<text>{{item.blocks[0].block_title}}</text> |
|||
<view class="title_right"> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- HOT SELLS 1 --> |
|||
|
|||
<view class="hotSells1 page_padding" v-if="item.zone_code=='GOODSTWO1' || item.zone_code=='GOODSTHREE1'"> |
|||
<template v-if="item.zone_code=='GOODSTWO1' && item.zone_status=='NORMAL'"> |
|||
<view class="hotSells1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id" > |
|||
<view class="hotSells1_item_img"> |
|||
<image :src="item1.block_pic" mode=""></image> |
|||
</view> |
|||
<text>{{item1.block_title}}</text> |
|||
</view> |
|||
</template> |
|||
<template v-if="item.zone_code=='GOODSTHREE1' && item.zone_status=='NORMAL'"> |
|||
<view class="hotSells2_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id"> |
|||
<view class="hotSells2_item_img"> |
|||
<image :src="item1.block_pic" mode=""></image> |
|||
</view> |
|||
<text>{{item1.block_title}}</text> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
|
|||
<!-- 标题 --> |
|||
<!-- <view class="index_title page_padding"> |
|||
<text>Hot Selle</text> |
|||
<view class="title_right"> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> --> |
|||
|
|||
<!-- HOT SELLS 2 --> |
|||
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'"> |
|||
<view class="spike1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id"> |
|||
<view class="spike1_item_img"> |
|||
<image :src="item1.block_pic" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<!-- 标题 --> |
|||
<!-- <view class="index_title page_padding"> |
|||
<text>Hot Selle</text> |
|||
<view class="title_right"> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
</view> --> |
|||
|
|||
<!-- HOT SELLS 3 --> |
|||
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='HONLIST3' && item.zone_status=='NORMAL'"> |
|||
<view class="spike1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id"> |
|||
<view class="spike1_item_img"> |
|||
<image :src="item1.block_pic" mode=""></image> |
|||
</view> |
|||
<view class="spike1_item_bottom"> |
|||
<text>US${{item1.block_price}}</text> |
|||
<view class="spike1_item_text1">{{item1.block_title}}</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<!-- GOODSTHREE 2 --> |
|||
<!-- <view class="goodsthree2"> |
|||
<view class="goodsthree2_item" v-for="(item,index) in 3" :key="index"></view> |
|||
</view> --> |
|||
|
|||
<!-- 轮播图 --> |
|||
<!-- <view class="uni-margin-wrap"> |
|||
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" > |
|||
<swiper-item> |
|||
<view class="swiper-item uni-bg-red">A</view> |
|||
</swiper-item> |
|||
<swiper-item> |
|||
<view class="swiper-item uni-bg-green">B</view> |
|||
</swiper-item> |
|||
<swiper-item> |
|||
<view class="swiper-item uni-bg-blue">C</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> --> |
|||
|
|||
<!-- SPIKE 1 --> |
|||
<!-- <scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false"> |
|||
<view class="spike1_item" v-for="(item,index) in 8" :key="index"> |
|||
<view class="spike1_item_img"></view> |
|||
<view class="spike1_item_bottom1"> |
|||
<view class="spike1_item_text">Adidas Yeezy Boost 350 DazzlingBlue Black</view> |
|||
<text>US$314.00</text> |
|||
</view> |
|||
</view> |
|||
</scroll-view> --> |
|||
|
|||
<!-- 瀑布流标题 --> |
|||
<view class="index_title1" v-if="item.zone_code=='LIST1' && item.zone_status=='NORMAL'">PRODUCTS FRO YOU</view> |
|||
|
|||
<view class="waterfall" v-if="item.zone_code=='LIST1' && item.zone_status=='NORMAL'"> |
|||
<custom-waterfalls-flow :value="item.blocks" imageKey="block_pic"> |
|||
<template v-slot:default="item1"> |
|||
<view class="item"> |
|||
<view class="title">{{item1.title}}</view> |
|||
<view class="desc">{{item1.block_price}}</view> |
|||
</view> |
|||
</template> |
|||
</custom-waterfalls-flow> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
isScrollShow:false, |
|||
scroll_active:0, |
|||
scrollList:[ |
|||
{text:'DOPE'},{text:'VIDEO'},{text:'MEN'},{text:'KIDS'},{text:'PETS'},{text:'MEN'},{text:'PETS'},{text:'MEN'}, |
|||
], |
|||
current:0, |
|||
list: [ |
|||
{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: 'Adidas Yeezy Boost 350 DazzlingBlue Black', desc: 'US$314.00' }, |
|||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: 'Adidas Yeezy Boost 350 DazzlingBlue Black', desc: 'US$314.00' } |
|||
], |
|||
indexDate:{}, |
|||
info:[], |
|||
banner:{} |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getIndex() |
|||
console.info(this.curEndTime) |
|||
}, |
|||
computed:{ |
|||
//当天结束时间 |
|||
curEndTime(){ |
|||
const endtime = new Date(new Date().setHours(23,59,59,999)).getTime() |
|||
// 获取当前时间 |
|||
const nowtime=(new Date()).getTime(); |
|||
var date3 = nowtime - endtime; //时间差的毫秒数 |
|||
date3 = Math.abs(date3) |
|||
return date3; |
|||
} |
|||
}, |
|||
filters:{ |
|||
hours (timestamp){ |
|||
var leave1=timestamp%(24*3600*1000) //计算天数后剩余的毫秒数 |
|||
var hours=Math.floor(leave1/(3600*1000)) |
|||
return hours |
|||
}, |
|||
minutes(timestamp){ |
|||
var leave2=(timestamp%(24*3600*1000))%(3600*1000) //计算小时数后剩余的毫秒数 |
|||
var minutes=Math.floor(leave2/(60*1000)) |
|||
return minutes |
|||
}, |
|||
seconds(timestamp){ |
|||
var leave3=((timestamp%(24*3600*1000))%(3600*1000))%(60*1000) //计算分钟数后剩余的毫秒数 |
|||
var seconds=Math.round(leave3/1000) |
|||
return seconds |
|||
} |
|||
|
|||
}, |
|||
methods: { |
|||
// 获取首页数据配置 |
|||
getIndex(){ |
|||
let data={_action:'getpagedata',pagecode:'HOME'} |
|||
defaultRequest(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.indexDate=res.data |
|||
res.data.zones.map(item=>{ |
|||
if(item.zone_code=='ICON'){ |
|||
item.content='' |
|||
this.info.push(item) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
goPage(){ |
|||
uni.navigateTo({ |
|||
url: '/pages/productDetails/index', |
|||
}); |
|||
}, |
|||
scrollChange(index){ |
|||
this.scroll_active=index |
|||
}, |
|||
gridSwiper(e){ |
|||
this.current = e.detail.current |
|||
} |
|||
}, |
|||
onPageScroll(res) { |
|||
if(res.scrollTop>40){ |
|||
this.isScrollShow=true |
|||
}else if(res.scrollTop<40){ |
|||
this.isScrollShow=false |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page{ |
|||
background-color: white; |
|||
// position: relative; |
|||
} |
|||
.ONEPIC{ |
|||
width: 100%; |
|||
height: auto; |
|||
image{ |
|||
// height: auto; |
|||
width: 100%; |
|||
} |
|||
} |
|||
.TWOPIC{ |
|||
width: 100%; |
|||
display: flex; |
|||
image{ |
|||
width: 50%; |
|||
} |
|||
} |
|||
.THREEPIC{ |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
image{ |
|||
width: 33%; |
|||
} |
|||
} |
|||
.FOURPIC{ |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
image{ |
|||
width: 25%; |
|||
} |
|||
} |
|||
.FIVEPIC{ |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
image{ |
|||
width: 20%; |
|||
} |
|||
} |
|||
.SIXPIC{ |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
image{ |
|||
width: 16.6%; |
|||
} |
|||
} |
|||
.body{ |
|||
padding-top: 361.33rpx; |
|||
} |
|||
.index_logo{ |
|||
width: 270.33rpx !important; |
|||
height: 50rpx !important; |
|||
margin-left: 50rpx; |
|||
} |
|||
|
|||
.isScrollShow{ |
|||
float: right; |
|||
} |
|||
.isScrollShow1{ |
|||
float: left; |
|||
margin-top: 20rpx; |
|||
width: 80% !important; |
|||
} |
|||
.isScrollShow2{ |
|||
float: left; |
|||
} |
|||
.page_padding{ |
|||
padding: 0 26.67rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.page_padding_left{ |
|||
padding-left: 26.67rpx; |
|||
} |
|||
.navigation{ |
|||
/* display: flex; */ |
|||
position: fixed; |
|||
top: 0; |
|||
z-index: 99; |
|||
background: white; |
|||
width: 100%; |
|||
.navigation_title{ |
|||
display: flex; |
|||
padding: 30rpx 0; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
image{ |
|||
width: 44rpx; |
|||
height: 44rpx; |
|||
} |
|||
text{ |
|||
font-family: Source Han Sans CN; |
|||
font-weight: 800; |
|||
font-style: italic; |
|||
font-size: 42.67rpx; |
|||
} |
|||
.navigation_title_right{ |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
>image:first-child{ |
|||
margin-right: 32.67rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.navigation_seach{ |
|||
width: 100%; |
|||
background-color: #F5F6FA; |
|||
border-radius: 6.67rpx; |
|||
height: 66.67rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
color: #8F9094; |
|||
font-size: 26.67rpx; |
|||
padding-left: 22rpx; |
|||
box-sizing: border-box; |
|||
|
|||
image{ |
|||
width: 29.33rpx; |
|||
height: 29.33rpx; |
|||
margin-right: 22rpx; |
|||
} |
|||
} |
|||
.navigation_scroll{ |
|||
padding-top: 28rpx; |
|||
padding-bottom: 37.33rpx; |
|||
padding-left: 40rpx; |
|||
.scroll-view_H{ |
|||
white-space: nowrap; |
|||
font-size: 26.67rpx; |
|||
color: #161616; |
|||
width: 100%; |
|||
// display: flex; |
|||
|
|||
::-webkit-scrollbar { |
|||
width: 0; |
|||
height: 0; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
view{ |
|||
margin-left: 46.67rpx; |
|||
display: inline-block; |
|||
font-weight: 600; |
|||
padding: 28.67rpx 0; |
|||
} |
|||
view:first-child{ |
|||
margin-left: 0; |
|||
} |
|||
.scroll_active{ |
|||
font-size: 32rpx; |
|||
border-bottom: 2.67rpx solid #000000; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.uni-margin-wrap{ |
|||
width: 100%; |
|||
margin-bottom: 35.33rpx; |
|||
|
|||
.swiper { |
|||
height: 373.33rpx; |
|||
|
|||
.swiper-item { |
|||
display: block; |
|||
height: 373.33rpx; |
|||
line-height: 373.33rpx; |
|||
text-align: center; |
|||
color: white; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.uni-bg-red{ |
|||
background-color: red; |
|||
} |
|||
.uni-bg-green{ |
|||
background-color: green; |
|||
} |
|||
.uni-bg-blue{ |
|||
background-color: blue; |
|||
} |
|||
} |
|||
} |
|||
.grid_swiper { |
|||
height: 380rpx; |
|||
|
|||
|
|||
.grid_content{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
padding: 0 28rpx; |
|||
|
|||
.grid_item{ |
|||
width: 97.33rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
color: #1B1B1B; |
|||
font-size: 24rpx; |
|||
margin-bottom: 53.33rpx; |
|||
margin-right: 84rpx; |
|||
font-weight: 500; |
|||
|
|||
.grid_item_img{ |
|||
width: 100%; |
|||
height: 97.33rpx; |
|||
margin-bottom: 6.67rpx; |
|||
background-color: #8F9094; |
|||
|
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
.grid_item:nth-child(n+4){ |
|||
margin-right: 0; |
|||
} |
|||
|
|||
} |
|||
} |
|||
.discount{ |
|||
width: 100%; |
|||
height: 239.33rpx; |
|||
margin-bottom: 72.67rpx; |
|||
} |
|||
|
|||
.index_title{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-size: 32rpx; |
|||
color: #161616; |
|||
font-weight: bold; |
|||
margin-bottom: 40rpx; |
|||
|
|||
.title_right{ |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
image{ |
|||
width: 22rpx; |
|||
height: 22rpx; |
|||
margin-left: 11.33rpx; |
|||
} |
|||
} |
|||
} |
|||
.spike1{ |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
margin-bottom: 70.67rpx; |
|||
::-webkit-scrollbar { |
|||
width: 0; |
|||
height: 0; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.spike1_item{ |
|||
color: #191919; |
|||
font-size: 26.67rpx; |
|||
margin-right: 16.67rpx; |
|||
width: 200rpx; |
|||
display: inline-block; |
|||
font-weight: 500; |
|||
|
|||
.spike1_item_img{ |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
// background-color: #999999; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.spike1_item_bottom{ |
|||
padding-left: 9.33rpx; |
|||
margin-top: 22.67rpx; |
|||
|
|||
.spike1_item_text{ |
|||
color: #9D9D9D; |
|||
font-size: 21.33rpx; |
|||
text-decoration: line-through; |
|||
} |
|||
.spike1_item_text1{ |
|||
color: #9D9D9D; |
|||
font-size: 21.33rpx; |
|||
} |
|||
} |
|||
.spike1_item_bottom1{ |
|||
padding-left: 9.33rpx; |
|||
margin-top: 19.33rpx; |
|||
font-weight: bold; |
|||
|
|||
.spike1_item_text{ |
|||
color: #000000; |
|||
font-size: 16rpx; |
|||
font-weight: 400; |
|||
margin-bottom: 20.67rpx; |
|||
white-space: break-spaces; |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
.spike1_item:last-child{ |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
.hotSells1{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
color: #000000; |
|||
font-size: 28rpx; |
|||
font-weight: 400; |
|||
margin-bottom: 69.33rpx; |
|||
|
|||
.hotSells1_item{ |
|||
width: 340rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.hotSells1_item_img{ |
|||
width: 100%; |
|||
height: 266.67rpx; |
|||
background-color: #999999; |
|||
margin-bottom: 23.33rpx; |
|||
} |
|||
} |
|||
.hotSells2_item{ |
|||
width: 224rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin-top: 49.33rpx; |
|||
.hotSells2_item_img{ |
|||
width: 100%; |
|||
height: 224rpx; |
|||
background-color: #999999; |
|||
margin-bottom: 25.33rpx; |
|||
} |
|||
} |
|||
} |
|||
.goodsthree2{ |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 29.33rpx; |
|||
|
|||
.goodsthree2_item{ |
|||
width: 242.67rpx; |
|||
height: 204.67rpx; |
|||
background-color: #999999; |
|||
} |
|||
} |
|||
.index_title1{ |
|||
text-align: center; |
|||
position: relative; |
|||
font-size: 29.33rpx; |
|||
font-weight: bold; |
|||
margin-top: 116rpx; |
|||
padding-bottom: 52rpx; |
|||
&:before{ |
|||
content: ''; |
|||
background-color: #000000; |
|||
height: 4rpx; |
|||
width: 53.33rpx; |
|||
position: absolute; |
|||
bottom: 13.33rpx; |
|||
left: 50%; |
|||
margin-left: -26.67rpx; |
|||
} |
|||
} |
|||
.waterfall{ |
|||
background-color: #F8F7FB; |
|||
padding:0 25.33rpx; |
|||
box-sizing: border-box; |
|||
padding-top: 52.67rpx; |
|||
|
|||
.item{ |
|||
padding: 0 16.67rpx; |
|||
padding-bottom: 36.67rpx; |
|||
.title{ |
|||
font-size: 29.33rpx; |
|||
font-weight: 400; |
|||
margin-top: 24.67rpx; |
|||
margin-bottom: 32.67rpx; |
|||
|
|||
} |
|||
.desc{ |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,92 @@ |
|||
<template> |
|||
<view> |
|||
<uni-nav-bar left-icon="left" :statusBar="true" title="Pick up centre" color="#000000" @clickLeft="back" :border="false"> |
|||
<block slot="right"> |
|||
<view class="head_coupons"> |
|||
<image src="../../static/img/coupons.png" mode=""></image> |
|||
</view> |
|||
|
|||
</block> |
|||
</uni-nav-bar> |
|||
<view class="body"> |
|||
|
|||
<view class="coupons_item" v-for="(item,index) in list " :key="index"> |
|||
<view class="coupons_item_left"> |
|||
<view class="item_left_prcie">${{item.type_money}}</view> |
|||
<text class="item_left_span">Min.spend</text> |
|||
<view>${{item.min_goods_amount}}</view> |
|||
</view> |
|||
<view class="coupons_item_right"> |
|||
<view class="coupons_right_info"> |
|||
<view class="coupons_right_info_title">{{item.type_name}}</view> |
|||
<text>The tide zone is available</text> |
|||
<view class="coupons_right_info_time">{{item.send_start_date}} - {{item.send_end_date}}</view> |
|||
</view> |
|||
<button v-if="item.is_obtained==0" @click="obtainbonus(item.type_id)">Receive</button> |
|||
<image src="../../static/img/coupons_bg.png" mode="" class="coupons_item_right_bg" v-if="item.is_obtained==1"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest,defaultRequest2} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
list:[] |
|||
} |
|||
}, |
|||
methods:{ |
|||
obtainbonus(id){ |
|||
let data={_action:'obtainbonus',type_id:id} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:res.message |
|||
}) |
|||
} |
|||
this.getList() |
|||
}) |
|||
}, |
|||
getList(){ |
|||
let data={_action:'getbonuslist'} |
|||
defaultRequest(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.list=res.data |
|||
} |
|||
}) |
|||
}, |
|||
back(){ |
|||
uni.navigateBack() |
|||
}, |
|||
}, |
|||
onLoad() { |
|||
this.getList() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.uni-navbar{ |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.body{ |
|||
border-top: 14.67rpx #F7F7F7 solid; |
|||
padding:0 26rpx; |
|||
padding-top: 31.33rpx; |
|||
} |
|||
.head_coupons{ |
|||
width: 34.67rpx; |
|||
height: 34.67rpx; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,168 @@ |
|||
<template> |
|||
<view> |
|||
<view class="status_bar"></view> |
|||
<view class="search_title"> |
|||
<navigator data="1" open-type="navigateBack"> |
|||
<image src="../../static/img/left.png" mode=""></image> |
|||
</navigator> |
|||
<uni-search-bar @confirm="search" v-model="searchValue" class="search_title_input" cancelText="Cancel" placeholder="search"></uni-search-bar> |
|||
</view> |
|||
<view class="history"> |
|||
<view class="history_title"> |
|||
<text>Recently Searched</text> |
|||
<image src="../../static/img/delete.png" mode=""></image> |
|||
</view> |
|||
<view class="history_lable"> |
|||
<view class="lable_item">Gold Necklaces</view> |
|||
<view class="lable_item">Push Up Swimsuit</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="history"> |
|||
<view class="history_title"> |
|||
<text>Figured you’d want it</text> |
|||
</view> |
|||
<view class="history_lable"> |
|||
<view class="lable_item">Gold Necklaces</view> |
|||
<view class="lable_item">Push Up Swimsuit</view> |
|||
</view> |
|||
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false"> |
|||
<view class="spike1_item" v-for="(item,index) in 8" :key="index"> |
|||
<view class="spike1_item_img"></view> |
|||
<view class="spike1_item_bottom"> |
|||
<text>US$314.00</text> |
|||
<view class="spike1_item_text">US$12.5</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
searchValue:'' |
|||
} |
|||
}, |
|||
methods:{ |
|||
search(){ |
|||
if(this.searchValue=='')return |
|||
uni.navigateTo({ |
|||
url:'../category/productList?keyword='+this.searchValue+'&type=1' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.search_title{ |
|||
width: 100%; |
|||
// height: 135.33rpx; |
|||
padding: 0 26.67rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
image{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
.search_title_input{ |
|||
width: 85%; |
|||
} |
|||
} |
|||
.history{ |
|||
margin-top: 62.67rpx; |
|||
padding: 0 26.67rpx; |
|||
margin-bottom: 85.33rpx; |
|||
|
|||
.history_title{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
margin-bottom: 26.67rpx; |
|||
image{ |
|||
width: 29.33rpx; |
|||
height: 29.33rpx; |
|||
} |
|||
} |
|||
.history_lable{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.lable_item{ |
|||
padding: 13.33rpx 16rpx; |
|||
background-color: #F5F6FA; |
|||
color: #565656; |
|||
font-size: 24rpx; |
|||
margin-right: 24.67rpx; |
|||
border-radius: 5px; |
|||
} |
|||
.lable_item:last-child{ |
|||
margin-right:0 |
|||
} |
|||
} |
|||
|
|||
.spike1{ |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
margin-bottom: 70.67rpx; |
|||
margin-top: 32rpx; |
|||
::-webkit-scrollbar { |
|||
width: 0; |
|||
height: 0; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.spike1_item{ |
|||
color: #191919; |
|||
font-size: 26.67rpx; |
|||
margin-right: 16.67rpx; |
|||
width: 200rpx; |
|||
display: inline-block; |
|||
font-weight: 500; |
|||
|
|||
.spike1_item_img{ |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
|
|||
background-color: #999999; |
|||
} |
|||
.spike1_item_bottom{ |
|||
padding-left: 9.33rpx; |
|||
margin-top: 22.67rpx; |
|||
|
|||
.spike1_item_text{ |
|||
color: #9D9D9D; |
|||
font-size: 21.33rpx; |
|||
text-decoration: line-through; |
|||
} |
|||
} |
|||
.spike1_item_bottom1{ |
|||
padding-left: 9.33rpx; |
|||
margin-top: 19.33rpx; |
|||
font-weight: bold; |
|||
|
|||
.spike1_item_text{ |
|||
color: #000000; |
|||
font-size: 16rpx; |
|||
font-weight: 400; |
|||
margin-bottom: 20.67rpx; |
|||
white-space: break-spaces; |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
.spike1_item:last-child{ |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,73 @@ |
|||
<template> |
|||
<view> |
|||
<view class="login"> |
|||
<input type="text" class="login_input" placeholder="New password" v-model="query.password1" @input="verificationLogin"> |
|||
<input type="text" class="login_input" placeholder="Confirm password" v-model="query.password2" @input="verificationLogin"> |
|||
<button class="login_submit" :disabled="isLogin" @click="submit">SUBMIT</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
query:{ |
|||
_action:'resetuserpwd', |
|||
username:'', |
|||
password1:'', |
|||
password2:'', |
|||
resetcode:'' |
|||
}, |
|||
isLogin:true, |
|||
user_info:{} |
|||
} |
|||
}, |
|||
methods:{ |
|||
submit(){ |
|||
defaultRequest(this.query).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
title:res.message, |
|||
icon:'none' |
|||
}) |
|||
setTimeout(function() { |
|||
uni.navigateBack({ |
|||
delta:2 |
|||
}) |
|||
},2000) |
|||
|
|||
} |
|||
}) |
|||
}, |
|||
// 验证是否填写登录信息 |
|||
verificationLogin(){ |
|||
if(this.query.password1&& this.query.password2){ |
|||
this.isLogin=false |
|||
}else{ |
|||
this.isLogin=true |
|||
} |
|||
}, |
|||
}, |
|||
onLoad(e) { |
|||
console.info(e) |
|||
this.query.username=e.username |
|||
this.query.resetcode=e.resetcode |
|||
this.user_info=uni.getStorageSync('user_info') |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
page{ |
|||
border-top: 13.33rpx #F7F7F7 solid; |
|||
padding-top: 48rpx; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
|
|||
.login_submit{ |
|||
font-size: 26.67rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,261 @@ |
|||
<template> |
|||
<view class="login_body"> |
|||
<view class="status_bar"></view> |
|||
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#010101" class="select"></uni-segmented-control> |
|||
<view class="body"> |
|||
<view class="login" v-show="current==0"> |
|||
<input type="text" class="login_input" placeholder="eamil address" v-model="loginDate.username" @input="verificationLogin"> |
|||
<input type="text" class="login_input" placeholder="password" v-model="loginDate.password" @input="verificationLogin"> |
|||
<view class="tips" v-show="loginErr">{{errMsg}}</view> |
|||
<view class="forgot" @click="forgotPwd">Forgot your Password?</view> |
|||
<button class="login_submit" :disabled="isLogin" @click="login()">SIGN IN</button> |
|||
<view class="agreement"> |
|||
<image src="../../static/img/select2.png" mode="" class="agreement_image" @click="loginSelect=!loginSelect,loginErr=false" v-show="!loginSelect"></image> |
|||
<image src="../../static/img/select1.png" mode="" class="agreement_image" @click="loginSelect=!loginSelect" v-show="loginSelect"></image> |
|||
<view class="agreement_right"> |
|||
by continuong, you agree to be <text class="text"> terms of use </text> and <text class="text"> privacy policy</text>. |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="login" v-show="current==1"> |
|||
<input type="text" class="login_input" placeholder="name" @input="verificationReg" v-model="regDate.username"> |
|||
<input type="text" class="login_input" placeholder="eamil address" @input="verificationReg" v-model="regDate.email"> |
|||
<input type="text" class="login_input" placeholder="password" @input="verificationReg" v-model="regDate.password1"> |
|||
<view class="tips" v-show="regErr">{{errMsg}}</view> |
|||
<button class="login_submit" :disabled="isReg" @click="Reg()">REGISTER</button> |
|||
<view class="agreement"> |
|||
<image src="../../static/img/select2.png" mode="" class="agreement_image" @click="regSelect=!regSelect" v-show="!regSelect"></image> |
|||
<image src="../../static/img/select1.png" mode="" class="agreement_image" @click="regSelect=!regSelect" v-show="regSelect"></image> |
|||
<view class="agreement_right"> |
|||
by continuong, you agree to be <text class="text"> terms of use </text> and <text class="text"> privacy policy</text>. |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="mode"> |
|||
<view class="mode_title">or continue with</view> |
|||
<view class="mode_content"> |
|||
<image src="/static/img/facebook.png" class="mode_content_image"></image> |
|||
<image src="/static/img/gugei.png" class="mode_content_image"></image> |
|||
<image src="/static/img/apple.png" class="mode_content_image"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<uni-popup ref="alertDialog" type="dialog"> |
|||
<uni-popup-dialog type="error" cancelText="Close" confirmText="Activation" title="Tips" content="Please activate the mailbox first" |
|||
@confirm="dialogConfirm" ></uni-popup-dialog> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest1,defaultRequest} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
items: ['SIGN IN', 'REGISTER'], |
|||
current: 0, |
|||
loginDate:{ |
|||
username:'', |
|||
password:'', |
|||
_action:'loginbyun' |
|||
}, |
|||
regDate:{ |
|||
username:'', |
|||
email:'', |
|||
password1:'', |
|||
password2:'', |
|||
_action:'registerun' |
|||
}, |
|||
// 是否填写完成信息 |
|||
isLogin:true, |
|||
isReg:true, |
|||
// 是否勾选 |
|||
regSelect:false, |
|||
loginSelect:false, |
|||
// 是否显示错误信息 |
|||
loginErr:false, |
|||
regErr:false, |
|||
errMsg:'The email address or password you enterde is incorrect.', |
|||
query:{ |
|||
_action:'sendmessagesforvalidation', |
|||
username:'', |
|||
} |
|||
} |
|||
}, |
|||
methods:{ |
|||
forgotPwd(){ |
|||
if(this.loginDate.username==''){ |
|||
uni.showToast({ |
|||
title:'Please fill in the user email first', |
|||
icon:'none', |
|||
}) |
|||
return |
|||
} |
|||
uni.navigateTo({ |
|||
url:'./verifyEmail?email='+this.loginDate.username |
|||
}) |
|||
}, |
|||
onClickItem(e) { |
|||
if (this.current != e.currentIndex) { |
|||
this.current = e.currentIndex; |
|||
} |
|||
}, |
|||
//获取页面配置 |
|||
configuration(){ |
|||
let data={_action:'getpagedata',pagecode:'PAGE-LOGIN'} |
|||
defaultRequest1(data).then(res=>{ |
|||
console.info(res) |
|||
}) |
|||
}, |
|||
// 登录 |
|||
login(){ |
|||
if(!this.loginSelect){ |
|||
this.errMsg='Please read and tick the terms of service and privacy policy first.' |
|||
this.loginErr=true |
|||
return |
|||
} |
|||
defaultRequest1(this.loginDate).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.loginErr=false |
|||
res.data.isLogin=true |
|||
uni.setStorageSync('user_info',res.data) |
|||
uni.switchTab({ |
|||
url:'../index/index' |
|||
}) |
|||
}else{ |
|||
if(res.data){ |
|||
this.$refs.alertDialog.open() |
|||
this.query.username=this.loginDate.username |
|||
}else{ |
|||
this.loginErr=true |
|||
this.errMsg=res.message |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
// 验证邮件 |
|||
dialogConfirm(){ |
|||
defaultRequest(this.query).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
title:res.message, |
|||
icon:'none', |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 注册 |
|||
Reg(){ |
|||
if(!this.regSelect){ |
|||
uni.showToast({ |
|||
title:'请先同意并勾选用户协议', |
|||
icon:'none', |
|||
}) |
|||
return |
|||
} |
|||
this.regDate.password2=this.regDate.password1 |
|||
defaultRequest1(this.regDate).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.regErr=false |
|||
uni.showToast({ |
|||
title:'注册成功,请进行邮箱验证！', |
|||
icon:'success', |
|||
}) |
|||
}else{ |
|||
this.regErr=true |
|||
this.errMsg=res.message |
|||
} |
|||
}) |
|||
}, |
|||
// 验证是否填写登录信息 |
|||
verificationLogin(){ |
|||
if(this.loginDate.username && this.loginDate.password){ |
|||
this.isLogin=false |
|||
}else{ |
|||
this.isLogin=true |
|||
} |
|||
}, |
|||
// 验证是否填写注册信息 |
|||
verificationReg(){ |
|||
if(this.regDate.username && this.regDate.password1 && this.regDate.email){ |
|||
this.isReg=false |
|||
}else{ |
|||
this.isReg=true |
|||
} |
|||
} |
|||
|
|||
}, |
|||
onLoad() { |
|||
this.configuration() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.login_body{ |
|||
padding-top: 145.33rpx; |
|||
} |
|||
.select{ |
|||
margin-bottom: 80rpx; |
|||
font-size: 33.33rpx; |
|||
font-weight: bold; |
|||
|
|||
} |
|||
.mode{ |
|||
position: fixed; |
|||
bottom: 138.67rpx; |
|||
width: 100%; |
|||
left: 0; |
|||
|
|||
.mode_title{ |
|||
font-size: 26.67rpx; |
|||
color: #666666; |
|||
position: relative; |
|||
text-align: center; |
|||
width: 100%; |
|||
|
|||
&:before{ |
|||
content: ""; |
|||
height: 1px; |
|||
width: 89.33rpx; |
|||
background-color: #BCBCBC; |
|||
position: absolute; |
|||
left: 20%; |
|||
top: 50%; |
|||
} |
|||
&:after{ |
|||
content: ""; |
|||
height: 1px; |
|||
width: 89.33rpx; |
|||
background-color: #BCBCBC; |
|||
position: absolute; |
|||
right: 20%; |
|||
top: 50%; |
|||
} |
|||
} |
|||
.mode_content{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-top: 50.67rpx; |
|||
|
|||
.mode_content_image{ |
|||
width: 54.67rpx; |
|||
height: 54.67rpx; |
|||
margin-right: 49.33rpx; |
|||
&:last-child{ |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.agreement_right{ |
|||
width: 582rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,159 @@ |
|||
<template> |
|||
<view> |
|||
<view class="login"> |
|||
<view class="verify_tips"> |
|||
To verify your email,we've send a verification code to {{username}} |
|||
</view> |
|||
<input type="text" class="login_input" placeholder="Enter code" v-model="resetcode" @input="verificationLogin"> |
|||
<view class="tips" v-show="isErr">The code is incorrect.</view> |
|||
<button class="login_submit" :disabled="isLogin" @click="goPage">CONTINUE</button> |
|||
<view class="verify_text" @click="sendresetcode">Resend code</view> |
|||
</view> |
|||
<view class="mask" v-show="isShow" @click="isShow=false"></view> |
|||
<view class="verify_popup" v-show="isShow"> |
|||
<view class="verify_popup_close"> |
|||
<image src="../../static/img/close.png" mode=""></image> |
|||
</view> |
|||
<view class="verify_popup_title">Send!</view> |
|||
<view class="verify_popup_msg">we send a new verification code to {{query.username}}</view> |
|||
<view class="verify_popup_btn"> |
|||
<button @click="isShow=false">OKAY</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest,defaultRequest2} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
isShow:false, |
|||
isErr:false, |
|||
isLogin:true, |
|||
username:'', |
|||
type:'', |
|||
resetcode:'', |
|||
query:{ |
|||
_action:'sendresetcode', |
|||
username:'', |
|||
// password:'', |
|||
} |
|||
} |
|||
}, |
|||
methods:{ |
|||
goPage(){ |
|||
console.info(this.username) |
|||
uni.navigateTo({ |
|||
url:'changePwd?resetcode='+this.resetcode+'&username='+this.username |
|||
}) |
|||
}, |
|||
sendresetcode(){ |
|||
defaultRequest(this.query).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
title:res.message, |
|||
icon:'none' |
|||
}) |
|||
this.isShow=true |
|||
} |
|||
}) |
|||
}, |
|||
// 验证是否填写登录信息 |
|||
verificationLogin(){ |
|||
if(this.resetcode){ |
|||
this.isLogin=false |
|||
}else{ |
|||
this.isLogin=true |
|||
} |
|||
}, |
|||
}, |
|||
onLoad(e) { |
|||
console.info(e) |
|||
this.type=e.type |
|||
if(e.type!=0){ |
|||
// this.query.password=e.password |
|||
this.query.username=e.email |
|||
}else{ |
|||
|
|||
} |
|||
this.username=e.email |
|||
this.sendresetcode() |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
page{ |
|||
border-top: 13.33rpx #F7F7F7 solid; |
|||
padding-top: 49.33rpx; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.verify_tips{ |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 52rpx; |
|||
} |
|||
.tips{ |
|||
margin: 44rpx 0; |
|||
} |
|||
.login_submit{ |
|||
margin-bottom: 33.33rpx; |
|||
} |
|||
.verify_text{ |
|||
font-size: 24rpx; |
|||
text-align: center; |
|||
font-weight: bold; |
|||
} |
|||
.verify_popup{ |
|||
width: 540rpx; |
|||
height: 366.67rpx; |
|||
position: fixed; |
|||
left: 50%; |
|||
margin-left: -270rpx; |
|||
top: 50%; |
|||
margin-top: -190rpx; |
|||
background-color: white; |
|||
border-radius: 20rpx; |
|||
z-index: 999; |
|||
box-sizing: border-box; |
|||
padding:15rpx 22rpx; |
|||
|
|||
.verify_popup_close{ |
|||
text-align: right; |
|||
|
|||
image{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
.verify_popup_title{ |
|||
font-size: 40rpx; |
|||
font-weight: 600; |
|||
text-align: center; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
.verify_popup_msg{ |
|||
font-size: 26.67rpx; |
|||
font-weight: 400; |
|||
margin-bottom: 40rpx; |
|||
text-align: center; |
|||
} |
|||
.verify_popup_btn{ |
|||
text-align: center; |
|||
|
|||
button{ |
|||
width: 321.33rpx; |
|||
height: 56rpx; |
|||
border-radius: 28rpx; |
|||
background-color: black; |
|||
color: white; |
|||
border: none; |
|||
font-size: 26.67rpx; |
|||
font-weight: bold; |
|||
line-height: 56rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,540 @@ |
|||
<template> |
|||
<view> |
|||
<view class="address" @click="goAddress"> |
|||
<view class="address_left"> |
|||
<view class="address_title"> |
|||
<image src="../../static/img/address.png" mode=""></image> |
|||
<view class="address_title_name">{{address.consignee}}</view> |
|||
<text>{{address.mobile}}</text> |
|||
</view> |
|||
<view class="address_content"> |
|||
{{address.sign_building}} |
|||
{{address.country_name}}{{address.province_name}}{{address.city_name}}{{address.address}}{{address.zipcode}} |
|||
</view> |
|||
</view> |
|||
<image src="../../static/img/right.png" class="address_more"></image> |
|||
<image src="../../static/img/address_xian.png" class="address_xian" mode=""></image> |
|||
</view> |
|||
|
|||
<view class="order_info" @click="openMore(0)"> |
|||
<view class="info_title"> |
|||
<text>Items in cart</text> |
|||
<view class="info_title_right"> |
|||
<text>{{goods_list.length}} ltems</text> |
|||
<image src="../../static/img/right.png" class="address_more"></image> |
|||
</view> |
|||
</view> |
|||
<view class="info_image"> |
|||
<image class="info_image_item" :src="item.goods_thumb" v-for="(item,index) in goods_list" :key="index"/> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="method" v-if="shipping_list"> |
|||
<view class="method_title">Shipping Method</view> |
|||
|
|||
<view class="method_item" v-for="(item,index) in shipping_list " :key="index"> |
|||
<view class="method_item_image" @click="cartselectshipping(item.shipping_id)"> |
|||
<image src="../../static/img/select1.png" style="width: 30rpx;height: 30rpx;" v-if="order.shipping_id==item.shipping_id"></image> |
|||
<image src="../../static/img/select2.png" style="width: 30rpx;height: 30rpx;"v-else ></image> |
|||
</view> |
|||
|
|||
<view class="method_item_right"> |
|||
<view class="item_price"> |
|||
<text>{{item.shipping_name}}:</text> |
|||
<text class="item_price_span">US${{item.shipping_fee}}</text> |
|||
</view> |
|||
<view class="item_time"> |
|||
<text class="item_time_span">{{item.shipping_desc}} </text> |
|||
<!-- <text> 15/05/2022-04/05/2022</text> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="discount"> |
|||
<view class="discount_item" @click="openMore(1)"> |
|||
<text>Coupons</text> |
|||
<view class="discount_item_right"> |
|||
<text v-show="isCoupons">-US$12.5</text> |
|||
<image src="../../static/img/right.png" mode="" class="address_more"></image> |
|||
</view> |
|||
</view> |
|||
<view class="discount_item" @click="openMore(3)"> |
|||
<view class="discount_item_left"> |
|||
<text>Points</text> |
|||
<text class="discount_item_left_span">({{orderDate.your_integral || 0}})</text> |
|||
</view> |
|||
<view class="discount_item_right"> |
|||
<text v-show="isPoints">-US$2.5</text> |
|||
<image src="../../static/img/right.png" mode="" class="address_more"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="settlement"> |
|||
<view class="settlement_item"> |
|||
<text>Subtotal:</text> |
|||
<text class="settlement_item_right">US${{total.goods_price}}</text> |
|||
</view> |
|||
<view class="settlement_item"> |
|||
<text>Shipping fee:</text> |
|||
<text class="settlement_item_right">US${{total.shipping_fee}}</text> |
|||
</view> |
|||
<view class="settlement_item"> |
|||
<text>Discount :</text> |
|||
<text class="settlement_item_right1">-US${{total.discount || 0}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="total"> |
|||
<text>Total: US${{total.amount}}</text> |
|||
<button @click="openMore(2)">PLACE ORDER</button> |
|||
</view> |
|||
|
|||
<view class="mask" v-show="isShow" @click="isShow=false"></view> |
|||
<view class="order_popup" v-show="isShow"> |
|||
<view class="order_popup_title"> |
|||
<text> |
|||
{{popup_index==0?'Commodity information':popup_index==1?'Coupons':popup_index==2?'Payment Method':'Points'}}<text v-show="popup_index==3">(total:<text class="order_popup_title_span" >{{orderDate.your_integral || 0}}</text>)</text> |
|||
</text> |
|||
<image src="../../static/img/close1.png" mode="" @click="isShow=false"></image> |
|||
</view> |
|||
|
|||
<view class="order_popup_commodity" v-show="popup_index==0"> |
|||
|
|||
<view class="good_info" v-for="(item,index) in goods_list " :key="index"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" > |
|||
<image :src="item.goods_thumb" mode=""></image> |
|||
</view> |
|||
<view class="left_info"> |
|||
<view class="info_name">{{item.goods_name}}</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>{{item.goods_attr |goodsAttr}}</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>x{{item.goods_number}}</text> |
|||
</view> |
|||
<view class="info_price">US${{item.goods_price}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="order_popup_coupons" v-show="popup_index==1"> |
|||
<view class="coupons_item" v-for="(item,index) in 3 " :key="index"> |
|||
<view class="coupons_item_left"> |
|||
<view class="item_left_prcie">$20.00</view> |
|||
<text class="item_left_span">Min.spend</text> |
|||
<view>$200.00</view> |
|||
</view> |
|||
<view class="coupons_item_right"> |
|||
<view class="coupons_right_info"> |
|||
<view class="coupons_right_info_title">All-purpose</view> |
|||
<text>The tide zone is available</text> |
|||
<view class="coupons_right_info_time">2022.09.23 10:37 - 2022.12.23 10:37</view> |
|||
</view> |
|||
<button>Use Now</button> |
|||
<image src="../../static/img/select3.png" mode="" class="coupons_item_right_select"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="order_popup_pay" v-show="popup_index==2"> |
|||
<view class="pay_item" @click="selectPay(0)"> |
|||
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==0"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image> |
|||
<view class="pay_item_right"> |
|||
<image src="../../static/img/pay_pal.png" mode=""></image> |
|||
<text>Pay Pal</text> |
|||
</view> |
|||
</view> |
|||
<view class="pay_item" @click="selectPay(1)"> |
|||
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==1"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image> |
|||
<view class="pay_item_right"> |
|||
<image src="../../static/img/card.png" mode=""></image> |
|||
<text>Credit/Debit Card</text> |
|||
</view> |
|||
</view> |
|||
<view class="pay_item" @click="selectPay(2)"> |
|||
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==2"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image> |
|||
<view class="pay_item_right"> |
|||
<image src="../../static/img/GPay.png" mode=""></image> |
|||
<text>Google Pay</text> |
|||
</view> |
|||
</view> |
|||
<view class="pay_item" @click="selectPay(3)"> |
|||
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==3"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image> |
|||
<view class="pay_item_right"> |
|||
<image src="../../static/img/APay.png" mode=""></image> |
|||
<text>Apple pay</text> |
|||
</view> |
|||
</view> |
|||
<!-- <navigator url="/pages/order/paySuccess"> --> |
|||
<button @click="submitorder">PAY NOW</button> |
|||
<!-- </navigator> --> |
|||
</view> |
|||
|
|||
<view class="order_popup_points" v-show="popup_index==3"> |
|||
<view class="points_item"> |
|||
<image src="../../static/img/select2.png" mode=""></image> |
|||
<text>Use points</text> |
|||
</view> |
|||
<view class="points_item"> |
|||
<image src="../../static/img/select1.png" mode=""></image> |
|||
<text>Do not use points</text> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<!-- <pay :payShow="" :orderId=""></pay> --> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2,defaultRequest3} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
isShow:false, |
|||
popup_index:'', |
|||
isCoupons:false, |
|||
isPoints:false, |
|||
query:{ |
|||
_action:'cartcheckout', |
|||
is_new:0, |
|||
direct_shopping:0, |
|||
consignee:'' |
|||
}, |
|||
orderDate:{}, |
|||
address:{}, |
|||
goods_list:[], |
|||
shipping_list:[], |
|||
bonus_list:[], |
|||
total:{}, |
|||
order:{}, |
|||
// 支付方式: 0、支付宝 1、银行卡、信用卡 2、谷歌支付 4、苹果支付 |
|||
pay_index:0 |
|||
} |
|||
}, |
|||
methods:{ |
|||
|
|||
// 获取调用支付信息数据 |
|||
getPayDate(id,will_get_integral){ |
|||
let data={_action:'payorder',order_id:id,order_type:'GOODSBUY',payment_method:'alipay.native'} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
//订单对象，从服务器获取 |
|||
if(res.data.need_pay_amount==0) return |
|||
uni.requestPayment({ |
|||
provider: 'alipay', |
|||
orderInfo: res.data.prepay_data.order_info, //支付宝订单数据 |
|||
success: function (res) { |
|||
console.log('success:' + JSON.stringify(res)); |
|||
uni.redirectTo({ |
|||
url: 'paySuccess?type=0&order_id='+id+'&will_get_integral='+will_get_integral |
|||
}); |
|||
}, |
|||
fail: function (err) { |
|||
console.log('fail:' + JSON.stringify(err)); |
|||
uni.redirectTo({ |
|||
url: 'paySuccess?type=1&order_id='+id+'&will_get_integral='+will_get_integral |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
// 选择支付方式 |
|||
selectPay(index){ |
|||
this.pay_index=index |
|||
}, |
|||
goAddress(){ |
|||
uni.navigateTo({ |
|||
url:'../account/address?type=1' |
|||
}) |
|||
}, |
|||
// 提交订单 |
|||
submitorder(){ |
|||
let data={ |
|||
_action:'submitorder', |
|||
consignee:this.address, |
|||
postscript:'', |
|||
bonus:this.order.bonus, |
|||
surplus:this.order.surplus, |
|||
shipping_id:this.order.shipping_id, |
|||
directshopping:0, |
|||
} |
|||
defaultRequest3(data,'consignee').then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.getPayDate(res.data.order.order_id,res.data.will_get_integral) |
|||
} |
|||
}) |
|||
}, |
|||
// 变更配送方式 |
|||
cartselectshipping(id){ |
|||
let data={_action:'cartselectshipping',shipping_id:id,consignee:this.address} |
|||
defaultRequest3(data,'consignee').then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.total=res.data.total |
|||
this.order=res.data.order |
|||
} |
|||
}) |
|||
}, |
|||
getList(){ |
|||
defaultRequest3(this.query,'consignee').then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.orderDate=res.data |
|||
this.address=res.data.consignee |
|||
this.goods_list=res.data.goods_list |
|||
this.shipping_list=res.data.shipping_list |
|||
if(res.data.bonus_list){ |
|||
this.bonus_list=res.data.bonus_list |
|||
} |
|||
this.total=res.data.total |
|||
this.order=res.data.order |
|||
} |
|||
}) |
|||
}, |
|||
openMore(i){ |
|||
this.popup_index=i |
|||
if(i==1){ |
|||
if(this.bonus_list.length==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'No coupon available' |
|||
}) |
|||
return |
|||
} |
|||
if(this.orderDate.allow_use_bonus==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Coupon cannot be used for this product' |
|||
}) |
|||
return |
|||
} |
|||
}else if(i==3){ |
|||
if(this.orderDate.allow_use_integral==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Points cannot be used for this product' |
|||
}) |
|||
return |
|||
} |
|||
} |
|||
this.isShow=true |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
this.query=JSON.parse(e.query) |
|||
this.getList() |
|||
}, |
|||
onShow() { |
|||
uni.$once('query' ,(query)=>{ |
|||
console.info(query) |
|||
if(query.type=='address'){ |
|||
this.query.consignee=query.consignee |
|||
this.query.is_new=0 |
|||
this.getList() |
|||
} |
|||
}); |
|||
}, |
|||
filters:{ |
|||
goodsAttr(e){ |
|||
return e.replace(/\s\n/g,';'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
page{ |
|||
border-top:14.67rpx #F6F5FA solid ; |
|||
padding-bottom: 140rpx; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
@import "@/common/scss/order.scss"; |
|||
|
|||
|
|||
|
|||
.order_info{ |
|||
padding-left: 26.67rpx; |
|||
padding-right: 22.67rpx; |
|||
padding-top: 50.67rpx; |
|||
padding-bottom: 42.67rpx; |
|||
border-bottom:14.67rpx #F6F5FA solid ; |
|||
.info_title{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-weight: bold; |
|||
font-size: 26.67rpx; |
|||
|
|||
.info_title_right{ |
|||
display: flex; |
|||
align-items: center; |
|||
color: #666666; |
|||
font-size: 24rpx; |
|||
|
|||
image{ |
|||
margin-left: 33.33rpx; |
|||
} |
|||
} |
|||
} |
|||
.info_image{ |
|||
display: flex; |
|||
margin-top: 26.67rpx; |
|||
.info_image_item{ |
|||
width: 133.33rpx; |
|||
height: 133.33rpx; |
|||
margin-right: 12rpx; |
|||
background-color: #999999; |
|||
} |
|||
} |
|||
} |
|||
.method{ |
|||
border-bottom:14.67rpx #F6F5FA solid ; |
|||
padding-top: 50rpx; |
|||
|
|||
.method_title{ |
|||
font-size: 26.67rpx; |
|||
font-weight: bold; |
|||
padding-left: 25.33rpx; |
|||
} |
|||
.method_item{ |
|||
padding:41.33rpx 0 ; |
|||
border-bottom: 1px #E2E2E2 solid; |
|||
padding-left: 42.67rpx; |
|||
padding-right: 29.33rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
&:last-child{ |
|||
border-bottom: none; |
|||
} |
|||
.method_item_image{ |
|||
width: 30rpx; |
|||
height: 30rpx; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.method_item_right{ |
|||
margin-left: 30.67rpx; |
|||
.item_price{ |
|||
font-size: 28rpx; |
|||
margin-bottom: 14rpx; |
|||
|
|||
.item_price_span{ |
|||
color: #B22234; |
|||
} |
|||
} |
|||
.item_time{ |
|||
font-size: 25.33rpx; |
|||
font-weight: 400; |
|||
.item_time_span{ |
|||
color: #555555; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.discount{ |
|||
border-bottom:14.67rpx #F6F5FA solid ; |
|||
padding-left: 26rpx; |
|||
padding-right: 22.67rpx; |
|||
padding-top: 42rpx; |
|||
padding-bottom: 45.33rpx; |
|||
|
|||
.discount_item{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 28rpx; |
|||
margin-bottom: 42rpx; |
|||
&:last-child{ |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.discount_item_left{ |
|||
.discount_item_left_span{ |
|||
color: #666666; |
|||
} |
|||
} |
|||
.discount_item_right{ |
|||
display: flex; |
|||
align-items: center; |
|||
color: #B22234; |
|||
font-weight: bold; |
|||
|
|||
image{ |
|||
margin-left: 14rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.settlement{ |
|||
border-bottom:14.67rpx #F6F5FA solid ; |
|||
padding: 44rpx 26rpx; |
|||
|
|||
.settlement_item{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 28rpx; |
|||
margin-bottom: 44rpx; |
|||
&:last-child{ |
|||
margin-bottom: 0; |
|||
} |
|||
.settlement_item_right{ |
|||
color: #3C3B6E; |
|||
font-weight: bold; |
|||
} |
|||
.settlement_item_right1{ |
|||
color: #B22234; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
.total{ |
|||
padding: 30.67rpx 0; |
|||
padding-left: 26rpx; |
|||
padding-right: 19.33rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
background-color: white; |
|||
z-index: 99; |
|||
box-sizing: border-box; |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
|
|||
button{ |
|||
font-size: 26.67rpx; |
|||
color: white; |
|||
height: 73.33rpx; |
|||
line-height: 73.33rpx; |
|||
border-radius: 0; |
|||
border: none; |
|||
background-color: black; |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,393 @@ |
|||
<template> |
|||
<view class="body"> |
|||
<view class="details_title"> |
|||
<view class="shipped" v-if="details_index==0"> |
|||
<view class="shipped_left"> |
|||
<image src="../../static/img/order_shipped.png" mode=""></image> |
|||
</view> |
|||
<view> |
|||
<text class="shipped_right_text">Ready for shipment</text> |
|||
<view>The buyer has paid,Waiting for the merchant to deliver</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="cancelled" v-if="details_index==1"> |
|||
<view class="cancelled_left"> |
|||
<image src="../../static/img/close2.png" mode=""></image> |
|||
<view class="cancelled_left_info"> |
|||
<text class="shipped_right_text">Deal’s off</text> |
|||
<view>The transaction has been closed, looking forward to your re-selection</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="cancelled completed" v-if="details_index==2"> |
|||
<view class="cancelled_left"> |
|||
<image src="../../static/img/completed.png" mode=""></image> |
|||
<view class="cancelled_left_info"> |
|||
<text class="shipped_right_text">Signed for</text> |
|||
<view>2022-04-27 21:15:55</view> |
|||
</view> |
|||
</view> |
|||
<view class="cancelled_right"> |
|||
<image src="../../static/img/right2.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="cancelled toPaid" v-if="details_index==3"> |
|||
<view class="cancelled_left"> |
|||
<view > |
|||
<text class="shipped_right_text">Waiting for payment</text> |
|||
<view>The timeout order will be closed automatically</view> |
|||
</view> |
|||
</view> |
|||
<view class="cancelled_right"> |
|||
<text class="shipped_right_text">23:59:58</text> |
|||
<view>T-minus payment</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="cancelled transit" @click="goLogistics" v-if="details_index==4"> |
|||
<view class="cancelled_left" > |
|||
<image src="../../static/img/transit.png" mode=""></image> |
|||
<view class="cancelled_left_info"> |
|||
<view class="shipped_right_text">【New York】Has arrived statesHas arrived states</view> |
|||
<view>2022-04-27 21:15:55</view> |
|||
</view> |
|||
</view> |
|||
<view class="cancelled_right"> |
|||
<image src="../../static/img/right2.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
<view class="address"> |
|||
<view class="address_left"> |
|||
<view class="address_title"> |
|||
<image src="../../static/img/address.png" mode=""></image> |
|||
<view class="address_title_name">{{goodsDate.consignee}}</view> |
|||
<text>{{goodsDate.mobile}}</text> |
|||
</view> |
|||
<view class="address_content"> |
|||
<text>{{goodsDate.sign_building}}</text> |
|||
<view >{{goodsDate.address_detail}}</view> |
|||
</view> |
|||
</view> |
|||
<image src="../../static/img/right.png" class="address_more"></image> |
|||
<image src="../../static/img/address_xian.png" class="address_xian" mode=""></image> |
|||
</view> |
|||
|
|||
<view class="order_popup_commodity"> |
|||
<view class="good_info" v-for="(item,index) in goods_list " :key="index"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" > |
|||
<image :src="item.goods_thumb" mode=""></image> |
|||
</view> |
|||
<view class="left_info"> |
|||
<view class="info_name">{{item.goods_name}}</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>{{item.goods_attr |goodsAttr}}</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>x{{item.goods_number}}</text> |
|||
</view> |
|||
<view class="info_price"> |
|||
<text>US${{item.subtotal}}</text> |
|||
<button v-if="details_index!=3 && details_index!=1">RREFUND</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="summary"> |
|||
<view class="summary_title">Order summary</view> |
|||
<view class="summary_item"> |
|||
<view> |
|||
Subtotal |
|||
<text :class="details_index==4?'summary_item_text1':'summary_item_text'">（Tax included）</text> |
|||
</view> |
|||
<view class="summary_item_right">US${{goodsDate.goods_amount}}</view> |
|||
</view> |
|||
<view class="summary_item"> |
|||
<view>Shipping</view> |
|||
<view class="summary_item_right">US${{goodsDate.shipping_fee}}</view> |
|||
</view> |
|||
<view class="summary_item"> |
|||
<view>Coupon</view> |
|||
<view class="summary_item_right1">-US${{goodsDate.discount}}</view> |
|||
</view> |
|||
<view class="summary_item"> |
|||
<view>Order total</view> |
|||
<view>US${{goodsDate.order_amount}}</view> |
|||
</view> |
|||
<view class="summary_tips" v-if="details_index==3"> |
|||
<image src="../../static/img/gantan1.png" mode=""></image> |
|||
<text>Reward 10 points</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="summary"> |
|||
<view class="summary_title">Order information</view> |
|||
<view class="summary_item"> |
|||
<view>Order id</view> |
|||
<view class="summary_item_right"> |
|||
<text>{{goodsDate.order_sn}}</text> |
|||
<button>copy</button> |
|||
</view> |
|||
</view> |
|||
<view class="summary_item"> |
|||
<view>Shipping</view> |
|||
<view class="summary_item_right">{{goodsDate.shipping_name}}</view> |
|||
</view> |
|||
<view class="summary_item"> |
|||
<view>Order Time</view> |
|||
<view class="summary_item_right">{{goodsDate.formated_add_time}}</view> |
|||
</view> |
|||
<view class="summary_item" v-if="details_index!=3 && goodsDate.formated_pay_time"> |
|||
<view>Payment time</view> |
|||
<view class="summary_item_right">{{goodsDate.formated_pay_time}}</view> |
|||
</view> |
|||
<view class="summary_item" v-if="details_index==4"> |
|||
<view>Delivery time</view> |
|||
<view class="summary_item_right">{{goodsDate.formated_shipping_time}}</view> |
|||
</view> |
|||
<!-- 完成时间 --> |
|||
<view class="summary_item" v-if="details_index==2"> |
|||
<view>Completion time</view> |
|||
<view class="summary_item_right"></view> |
|||
</view> |
|||
<!-- 取消时间 --> |
|||
<view class="summary_item" v-if="details_index==1"> |
|||
<view>Cancel time</view> |
|||
<view class="summary_item_right"></view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="details_footer" v-if="details_index!=0"> |
|||
<button class="white" v-if="details_index==2 || details_index==4" @click="goLogistics">LOGISTICS</button> |
|||
<button class="white" v-if="details_index==1 || details_index==2" @click.stop="openTips(1)">DELETE ORDER</button> |
|||
<button class="black" v-if="details_index==2 && goodsDate.comment_status_code==0" @click="goComment()">COMMENT</button> |
|||
|
|||
<button class="white" v-if="details_index==3 " @click.stop="openTips(0)">CANCEL ORDER</button> |
|||
<button class="black" v-if="details_index==3" @click="isPay=true">PAY NOW</button> |
|||
|
|||
<button class="black" v-if="details_index==4" @click.stop="openTips(2)">CONFIRM RECEIPT</button> |
|||
</view> |
|||
|
|||
<!-- 支付 --> |
|||
<view class="mask" v-show="isPay" @click="isPay=false"></view> |
|||
<view class="order_popup" v-show="isPay"> |
|||
<view class="order_popup_title"> |
|||
<text> |
|||
Payment Method |
|||
</text> |
|||
<image src="../../static/img/close1.png" mode="" @click="isPay=false"></image> |
|||
</view> |
|||
<view class="order_popup_pay" > |
|||
<view class="pay_item" @click="selectPay(0)"> |
|||
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==0"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image> |
|||
<view class="pay_item_right"> |
|||
<image src="../../static/img/pay_pal.png" mode=""></image> |
|||
<text>Pay Pal</text> |
|||
</view> |
|||
</view> |
|||
<view class="pay_item" @click="selectPay(1)"> |
|||
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==1"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image> |
|||
<view class="pay_item_right"> |
|||
<image src="../../static/img/card.png" mode=""></image> |
|||
<text>Credit/Debit Card</text> |
|||
</view> |
|||
</view> |
|||
<view class="pay_item" @click="selectPay(2)"> |
|||
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==2"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image> |
|||
<view class="pay_item_right"> |
|||
<image src="../../static/img/GPay.png" mode=""></image> |
|||
<text>Google Pay</text> |
|||
</view> |
|||
</view> |
|||
<view class="pay_item" @click="selectPay(3)"> |
|||
<image src="../../static/img/select1.png" mode="" class="pay_item_select" v-if="pay_index==3"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="pay_item_select" v-else></image> |
|||
<view class="pay_item_right"> |
|||
<image src="../../static/img/APay.png" mode=""></image> |
|||
<text>Apple pay</text> |
|||
</view> |
|||
</view> |
|||
<button @click="getPayDate">PAY NOW</button> |
|||
</view> |
|||
</view> |
|||
<!-- 删除、取消弹框 --> |
|||
<uni-popup ref="alertDialog" type="dialog"> |
|||
<uni-popup-dialog type="error" cancelText="Close" :confirmText="tipsBut" title="Tips" :content="tipsInfo" @confirm="dialogConfirm" ></uni-popup-dialog> |
|||
</uni-popup> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
// 0、待发货 1、已取消 2、已完成 3、待支付 4、运输中 |
|||
details_index:4, |
|||
query:{ |
|||
_action:'getorder', |
|||
order_id:'', |
|||
order_sn:'' |
|||
}, |
|||
goodsDate:{}, |
|||
goods_list:[], |
|||
isPay:false, |
|||
payQuery:{ |
|||
_action:'payorder', |
|||
order_id:'', |
|||
order_type:'GOODSBUY', |
|||
payment_method:'alipay.native' |
|||
}, |
|||
pay_index:0, |
|||
logisticsinfo:{}, |
|||
// 弹出提示框的状态 0：取消订单 1、删除订单 2、确认收货 |
|||
tipsType:0, |
|||
tipsInfo:'', |
|||
tipsBut:'', |
|||
cancelQuery:{ |
|||
_action:'cancelorder', |
|||
order_id:'' |
|||
}, |
|||
} |
|||
}, |
|||
methods:{ |
|||
// 跳转评论页面 |
|||
goComment(){ |
|||
let data=this.goodsDate |
|||
data.order_goods=this.goods_list |
|||
uni.navigateTo({ |
|||
url:'../productDetails/review?data='+JSON.stringify(data) |
|||
}) |
|||
}, |
|||
// 淡出提示 |
|||
openTips(type){ |
|||
this.tipsType=type |
|||
if(type==0){ |
|||
this.tipsInfo='Are you sure you want to cancel this order? This order will be regarded as invalid after cancellation' |
|||
this.tipsBut='CancelOrder' |
|||
this.cancelQuery._action='cancelorder' |
|||
}else if(type==1){ |
|||
this.tipsInfo='Are you sure you want to delete this order?' |
|||
this.tipsBut='DeleteOrder' |
|||
this.cancelQuery._action='deleteorder' |
|||
}else if(type==2){ |
|||
this.tipsInfo='Are you sure you have received the products?' |
|||
this.tipsBut='Confirm' |
|||
this.cancelQuery._action='affirmorder' |
|||
} |
|||
this.$refs.alertDialog.open() |
|||
|
|||
}, |
|||
// 提示框点击确操作 取消订单、删除订单 |
|||
dialogConfirm(){ |
|||
defaultRequest2(this.cancelQuery).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.getList() |
|||
} |
|||
}) |
|||
}, |
|||
goLogistics(){ |
|||
uni.navigateTo({ |
|||
url:'./logisticsDetails?order_id='+this.goodsDate.order_id |
|||
}) |
|||
}, |
|||
// 选择支付方式 |
|||
selectPay(index){ |
|||
this.pay_index=index |
|||
}, |
|||
// 获取调用支付信息数据 |
|||
getPayDate(){ |
|||
defaultRequest2(this.payQuery).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
//订单对象，从服务器获取 |
|||
if(res.data.need_pay_amount==0) return |
|||
uni.requestPayment({ |
|||
provider: 'alipay', |
|||
orderInfo: res.data.prepay_data.order_info, //支付宝订单数据 |
|||
success: function (res) { |
|||
console.log('success:' + JSON.stringify(res)); |
|||
uni.redirectTo({ |
|||
url: 'paySuccess?order_id='+this.payQuery.order_id |
|||
}); |
|||
}, |
|||
fail: function (err) { |
|||
console.log('fail:' + JSON.stringify(err)); |
|||
uni.showToast({ |
|||
title:'Payment failed', |
|||
icon:'none' |
|||
}) |
|||
} |
|||
}); |
|||
} |
|||
}) |
|||
}, |
|||
payNow(id){ |
|||
this.payQuery.order_id=id |
|||
this.isPay=true |
|||
}, |
|||
getDate(){ |
|||
defaultRequest2(this.query).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.goodsDate=res.data |
|||
this.goods_list=res.goods_list |
|||
if(this.details_index==4){ |
|||
this.getLogistics() |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
getLogistics(){ |
|||
let data ={_action:'getlogisticsinfo',order_id:this.goodsDate.order_id,order_sn:''} |
|||
defaultRequest2(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.logisticsinfo=res.data[0] |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
onLoad(e){ |
|||
console.info(e) |
|||
this.details_index=e.details_index |
|||
this.query.order_id=e.id |
|||
this.cancelQuery.order_id=e.id |
|||
|
|||
this.getDate() |
|||
}, |
|||
filters:{ |
|||
goodsAttr(e){ |
|||
return e.replace(/\s\n/g,';'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/common/scss/order.scss"; |
|||
page{ |
|||
|
|||
} |
|||
.body{ |
|||
padding-bottom: 130rpx; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,102 @@ |
|||
<template> |
|||
<view> |
|||
<view class="logistics_info"> |
|||
<view class="logistics_info_image"> |
|||
<image :src="list.logo" mode=""></image> |
|||
</view> |
|||
<view class="logistics_info_right"> |
|||
<view class="info_right_title">{{list.isreceived==1?'Signed for':'In Transit'}}</view> |
|||
<text>{{list.expname}}</text> |
|||
<view class="info_right_num"> |
|||
<text>Order number : {{list.mailno}}</text> |
|||
<view class="copy">Copy</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="logistics_details"> |
|||
<view class="logistics_step " v-for="(item,index) in list.records" :key="index" :class="index==0?'step_active':''"> |
|||
<text>{{item.context}}</text> |
|||
<view class="logistics_step_time">{{item.time}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
active: 0, |
|||
query:{ |
|||
_action:'getlogisticsinfo', |
|||
order_id:'', |
|||
order_sn:'' |
|||
}, |
|||
list:[] |
|||
} |
|||
}, |
|||
methods:{ |
|||
getList(){ |
|||
defaultRequest2(this.query).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.list=res.data[0] |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
this.query.order_id=e.order_id |
|||
this.getList() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/common/scss/order.scss"; |
|||
.logistics_info{ |
|||
border-top: 14.67rpx #F6F5FA solid; |
|||
padding: 32rpx 0; |
|||
padding-left: 29.33rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
.logistics_info_image{ |
|||
width: 133.33rpx; |
|||
height: 133.33rpx; |
|||
background-color: #999999; |
|||
|
|||
} |
|||
.logistics_info_right{ |
|||
margin-left: 33.33rpx; |
|||
font-size: 28rpx; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
|
|||
.info_right_title{ |
|||
color: #DE3139; |
|||
font-size: 29.33rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 10.33rpx; |
|||
} |
|||
.info_right_num{ |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 9.67rpx; |
|||
.copy{ |
|||
height: 41.33rpx; |
|||
line-height: 41.33rpx; |
|||
text-align: center; |
|||
background-color: #F6F5FA; |
|||
font-size: 24rpx; |
|||
border-radius: 20.67rpx; |
|||
margin-left: 26.67rpx; |
|||
padding: 0 18.67rpx ; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,169 @@ |
|||
<template> |
|||
<view> |
|||
<view class="success"> |
|||
<image src="../../static/img/success.png" mode="" v-if="type==0"></image> |
|||
<image src="../../static/img/fail.png" mode="" v-else></image> |
|||
<text class="success_title">{{type==0?'Payment is successful':'Payment failed'}}</text> |
|||
<view > |
|||
This order will be rewarded with |
|||
<text class="success_span">{{will_get_integral || 0}} points</text> |
|||
after receipt. |
|||
</view> |
|||
<view class="success_button"> |
|||
<button class="details" @click="goPage">Order details</button> |
|||
<button class="shop" @click="goCategory">Continue shopping</button> |
|||
</view> |
|||
</view> |
|||
<view class="recommend"> |
|||
<view class="recommend_title" >RECOMMEND</view> |
|||
<view class="recommend_content"> |
|||
<view class="recommend_content_item" v-for="(item,index) in catList " :key="index"> |
|||
<view class="recommend_content_item_image"> |
|||
<image :src="item.thumb" mode=""></image> |
|||
</view> |
|||
<view class="recommend_content_item_image_name">{{item.short_name}}</view> |
|||
<view class="recommend_content_item_pric">US${{item.is_promote==0? item.shop_price :item.promote_price}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest4} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
// 是否支付成功 0成功 1失败 |
|||
type:0, |
|||
id:'', |
|||
will_get_integral:0, |
|||
// 获取该分类的其他商品的请求参数 |
|||
catQuery:{ |
|||
_action:'getgoods', |
|||
page_index:1, |
|||
page_size:10 |
|||
}, |
|||
catList:[], |
|||
isReachBottom:true, |
|||
} |
|||
}, |
|||
methods:{ |
|||
// 获取的其他商品 |
|||
getCatList(type){ |
|||
defaultRequest4(this.catQuery).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
if(res.data){ |
|||
if(type==0){ |
|||
this.catList=res.data |
|||
}else{ |
|||
this.catList=this.catList.concat(res.data) |
|||
} |
|||
}else{ |
|||
this.isReachBottom=false |
|||
uni.showToast({ |
|||
title: 'No more data yet', |
|||
icon:'none' |
|||
}) |
|||
this.catQuery.page_index-- |
|||
} |
|||
} |
|||
uni.hideNavigationBarLoading(); |
|||
}) |
|||
}, |
|||
goPage(){ |
|||
let details_index |
|||
if(this.type==0){ |
|||
details_index=0 |
|||
}else{ |
|||
details_index=3 |
|||
} |
|||
uni.redirectTo({ |
|||
url: './details?details_index='+details_index+'&'+'id='+this.id |
|||
}); |
|||
}, |
|||
goCategory(){ |
|||
uni.switchTab({ |
|||
url:'../category/index' |
|||
}) |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
this.id=e.order_id |
|||
this.will_get_integral=e.will_get_integral || 0 |
|||
this.type=e.type |
|||
this.getCatList(0) |
|||
}, |
|||
// 上拉加载 |
|||
onReachBottom(){ |
|||
if(!this.isReachBottom)return |
|||
this.catQuery.page_index++ |
|||
this.getCatList(1) |
|||
}, |
|||
onPullDownRefresh(){ |
|||
uni.stopPullDownRefresh() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page{ |
|||
border-top: 14.67rpx #F7F7F7 solid; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
|
|||
.success{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding-top: 72rpx; |
|||
font-size: 24rpx; |
|||
color: #555555; |
|||
font-weight: 400; |
|||
flex-direction: column; |
|||
border-bottom: 14.67rpx #F7F7F7 solid; |
|||
padding-bottom: 81.33rpx; |
|||
image{ |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
margin-bottom: 46.67rpx; |
|||
} |
|||
.success_title{ |
|||
font-size: 32rpx; |
|||
color: black; |
|||
font-weight: 500; |
|||
margin-bottom: 13.33rpx; |
|||
} |
|||
.success_span{ |
|||
color: #B22234; |
|||
display: inline-block; |
|||
margin: 0 5rpx; |
|||
} |
|||
.success_button{ |
|||
display: flex; |
|||
margin-top: 70.67rpx; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
button{ |
|||
height: 63.33rpx; |
|||
font-size: 24rpx; |
|||
margin: 0; |
|||
font-weight: 500; |
|||
} |
|||
.details{ |
|||
background-color: white; |
|||
border: 1px solid #CBCBCB; |
|||
color: black; |
|||
} |
|||
.shop{ |
|||
color: white; |
|||
background-color: black; |
|||
margin-left: 48rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,251 @@ |
|||
<template> |
|||
<view> |
|||
<view class="order_popup_commodity"> |
|||
<view class="good_info" v-for="(item,index) in 1 " :key="index"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view> |
|||
<view class="left_info"> |
|||
<view class="info_name">Adidas Yeezy Boost 350 V2 DazzlingBlue Black GY7164 Men's</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>Multicolor;41</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>x1</text> |
|||
</view> |
|||
<view class="info_price"> |
|||
<text>US$314.00</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="goods"> |
|||
<view class="goods_title">Refunded goods</view> |
|||
<view class="goods_content"> |
|||
<view class="goods_item"> |
|||
<image src="../../static/img/refund.png" mode=""></image> |
|||
<text>Refund only</text> |
|||
<view class="goods_item_text">I didn't receive the goods</view> |
|||
</view> |
|||
<view class="goods_item"> |
|||
<image src="../../static/img/refund1.png" mode=""></image> |
|||
<text>Return&refund</text> |
|||
<view class="goods_item_text">I have received the goods</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="refund_price"> |
|||
<text>Refund amountï¼</text> |
|||
<text class="refund_price_text">US$6.5</text> |
|||
</view> |
|||
<view class="refund_reason"> |
|||
<view class="reason_item"> |
|||
<view class="reason_item_left"> |
|||
<text>Refund reason </text> |
|||
<text class="reason_item_left_text">Please select 1 refund reason</text> |
|||
</view> |
|||
<image src="/static/img/right1.png" mode=""></image> |
|||
|
|||
</view> |
|||
|
|||
<view class="reason_item1"> |
|||
<view class="">Notes on application</view> |
|||
<textarea placeholder="Please supplement the refund information"></textarea> |
|||
<view class="reason_upload"> |
|||
<view class="reason_upload_item"> |
|||
<image src="/static/img/camera.png" class="upload_item_camera" mode=""></image> |
|||
<view>Upload pictures</view> |
|||
</view> |
|||
|
|||
<view class="reason_upload_item reason_upload_item1"> |
|||
<image src="/static/img/logo.png" class="upload_item_image" mode=""></image> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="reason_upload_tips">Up to last 5 pictures</view> |
|||
|
|||
<navigator url="/pages/order/refundDetails"> |
|||
<button class="refund_submit">SUBMIT</button> |
|||
</navigator> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
orderDate:{} |
|||
} |
|||
}, |
|||
methods:{ |
|||
|
|||
}, |
|||
onLoad(e) { |
|||
this.orderDate=JSON.parse(e.data) |
|||
console.info(this.orderDate) |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
page{ |
|||
border-top: 14.67rpx #F6F5FA solid; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/common/scss/order.scss"; |
|||
.order_popup_commodity{ |
|||
border-bottom: 14.67rpx solid #F6F5FA; |
|||
} |
|||
.goods{ |
|||
padding: 34.67rpx 27.33rpx; |
|||
border-bottom: 14.67rpx solid #F6F5FA; |
|||
.goods_title{ |
|||
font-size: 28.67rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 34.67rpx; |
|||
} |
|||
.goods_content{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.goods_item{ |
|||
width: 336.67rpx; |
|||
height: 169.33rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 32rpx; |
|||
border: 1px solid #D3D3D3; |
|||
border-radius: 16rpx; |
|||
image{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin-bottom: 16.67rpx; |
|||
} |
|||
|
|||
.goods_item_text{ |
|||
margin-top: 8rpx; |
|||
font-size: 20rpx; |
|||
color: #666666; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.refund_price{ |
|||
padding: 38rpx 28rpx; |
|||
font-size: 28rpx; |
|||
border-bottom: 14.67rpx solid #F6F5FA; |
|||
.refund_price_text{ |
|||
font-size: 32rpx; |
|||
|
|||
} |
|||
} |
|||
.refund_reason{ |
|||
font-size: 28rpx; |
|||
padding-left: 28rpx; |
|||
padding-right: 21.33rpx; |
|||
.reason_item{ |
|||
padding:42.67rpx 0 ; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-bottom: 1px solid #E2E2E2; |
|||
.reason_item_left{ |
|||
display: flex; |
|||
align-items: center; |
|||
.reason_item_left_text{ |
|||
color: #D2D2D2; |
|||
font-weight: 400; |
|||
display: inline-block; |
|||
margin-left: 45.33rpx; |
|||
} |
|||
} |
|||
image{ |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
} |
|||
} |
|||
.reason_item1{ |
|||
padding: 42.67rpx 0; |
|||
|
|||
textarea{ |
|||
font-size: 28rpx; |
|||
font-weight: 400; |
|||
margin-top: 40rpx; |
|||
width: 100%; |
|||
height: 113.33rpx; |
|||
} |
|||
.reason_upload{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-bottom: 34.67rpx; |
|||
.reason_upload_item{ |
|||
border: 1px dashed #D2D2D2; |
|||
border-radius: 15rpx; |
|||
width: 156rpx; |
|||
height: 156rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
font-size: 12rpx; |
|||
color: #BFBCBC; |
|||
margin-right: 23.33rpx; |
|||
|
|||
&:nth-child(3n+3){ |
|||
margin-right: 0; |
|||
} |
|||
.upload_item_camera{ |
|||
width: 72rpx; |
|||
height: 54.67rpx; |
|||
margin-bottom: 14rpx; |
|||
} |
|||
.upload_item_image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 15rpx; |
|||
} |
|||
} |
|||
.reason_upload_item1{ |
|||
position: relative; |
|||
&::after{ |
|||
content: ""; |
|||
width: 30.67rpx; |
|||
height: 30.67rpx; |
|||
position: absolute; |
|||
right: -12rpx; |
|||
top: -12rpx; |
|||
z-index: 99; |
|||
background-image: url("@/static/img/close3.png"); |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
} |
|||
.reason_upload_tips{ |
|||
font-size: 20rpx; |
|||
color: #666666; |
|||
} |
|||
.refund_submit{ |
|||
margin-top: 118rpx; |
|||
background-color: black; |
|||
color: white; |
|||
font-size: 26.67rpx; |
|||
font-weight: bold; |
|||
width: 100%; |
|||
height: 73.33rpx; |
|||
line-height: 73.33rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,328 @@ |
|||
<template> |
|||
<view :class="details_index==0 ||details_index==6 ? 'body' :''"> |
|||
<view class="details_title" :class="details_index==3?'refund_details_title':''"> |
|||
<view class="cancelled toPaid" v-if="details_index==0 ||details_index==6"> |
|||
<view class="cancelled_left"> |
|||
<view > |
|||
<view class="shipped_right_text">{{details_index==0?'Cancelled':'Refunded'}}</view> |
|||
<view>Cancelled time：24/04/2022 15:54:21</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="cancelled" v-if="details_index==1 "> |
|||
<view class="cancelled_left"> |
|||
<image src="../../static/img/time.png" mode=""></image> |
|||
<view class="cancelled_left_info"> |
|||
<text class="shipped_right_text">Refund rejected</text> |
|||
<view>End in: 71:59:59</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
<view class="cancelled" v-if="details_index==2 || details_index==4 || details_index==5"> |
|||
<view class="cancelled_left"> |
|||
<image src="../../static/img/time.png" mode=""></image> |
|||
<view class="cancelled_left_info"> |
|||
<text class="shipped_right_text">To be returned</text> |
|||
<view>End in: 71:59:59</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="cancelled refund_transit" v-if="details_index==3"> |
|||
<view class="cancelled_left"> |
|||
<image src="../../static/img/transit.png" mode=""></image> |
|||
<view class="cancelled_left_info"> |
|||
<text class="shipped_right_text">To be returned</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
</view> |
|||
<view class="refund_success" v-if="details_index==6"> |
|||
<view class="refund_success_item"> |
|||
<text>Refund amount：</text> |
|||
<text class="refund_success_item_text">US$12.5</text> |
|||
</view> |
|||
<view class="refund_success_item"> |
|||
<text>Points：</text> |
|||
<text class="refund_success_item_text">2.5</text> |
|||
</view> |
|||
</view> |
|||
<view class="refund_address" v-if="details_index==2"> |
|||
<view class="address_title">Return address</view> |
|||
<view class="address_content"> |
|||
<view class="address_content_item">name: zhangsan</view> |
|||
<view class="address_content_item">phone: +8613800138000</view> |
|||
<view class="address_content_item">country: china</view> |
|||
<view class="address_content_item">state: 广东省 </view> |
|||
<view class="address_content_item">city：深圳市 </view> |
|||
<view class="address_content_item">zipcode：518000</view> |
|||
<view class="address_content_item">address line:详细地址(例：粤海街道深圳湾生态科技园9A3)</view> |
|||
</view> |
|||
</view> |
|||
<view class="negotiation_details" @click="isShow=true"> |
|||
<text>Negotiation Details</text> |
|||
<image src="../../static/img/right.png" mode=""></image> |
|||
</view> |
|||
|
|||
<view class="order_popup_commodity"> |
|||
<view class="order_popup_commodity_title">Refund Information</view> |
|||
<view class="good_info" v-for="(item,index) in 2 " :key="index"> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image" v-for="(item,index) in 1" :key="index"></view> |
|||
<view class="left_info"> |
|||
<view class="info_name">Adidas Yeezy Boost 350 V2 DazzlingBlue Black GY7164 Men's</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>Multicolor;41</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>x1</text> |
|||
</view> |
|||
<view class="info_price"> |
|||
<text>US$314.00</text> |
|||
<!-- <button>Rrefund</button> --> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
|
|||
|
|||
|
|||
<view class="summary"> |
|||
<view class="summary_item"> |
|||
<view>Refund ID</view> |
|||
<view class="summary_item_right">2013461121212</view> |
|||
</view> |
|||
<view class="summary_item"> |
|||
<view>Refund Amount</view> |
|||
<view class="summary_item_right">US$12.5</view> |
|||
</view> |
|||
<view class="summary_item"> |
|||
<view>Return Type</view> |
|||
<view class="summary_item_right">Refund Only</view> |
|||
</view> |
|||
<view class="summary_item"> |
|||
<view>Application Time</view> |
|||
<view class="summary_item_right"> 21/04/2022 15:42:31</view> |
|||
</view> |
|||
<view class="summary_item" > |
|||
<view>Reason For Refund</view> |
|||
<view class="summary_item_right">Quality Problem</view> |
|||
</view> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view class="details_footer" v-if="details_index!=0 && details_index!=6"> |
|||
<button class="white" v-if="details_index==1">MODIFY REFUND</button> |
|||
<button class="white" v-if="details_index==1 || details_index==2 || details_index==3 || details_index==4 || details_index==5">CANCEL RETURN</button> |
|||
|
|||
<button class="white" v-if="details_index==2 ">RETURN LOGISTICS</button> |
|||
|
|||
<!-- <button class="black" v-if="details_index==4">CONFIRM RECEIPT</button> --> |
|||
</view> |
|||
<view class="mask" v-show="isShow" @click="isShow=false"></view> |
|||
<view class="order_popup" v-show="isShow"> |
|||
<view class="order_popup_title"> |
|||
<text>Negotiation Details</text> |
|||
<image src="../../static/img/close1.png" mode="" @click="isShow=false"></image> |
|||
</view> |
|||
<view class="logistics_details"> |
|||
<view class="logistics_step step_active"> |
|||
<view class="logistics_step_title">CHIC Has Refunded</view> |
|||
<text>Refund amount: US $12.5</text> |
|||
<view class="logistics_step_time">2020.12.13 23:54:12</view> |
|||
</view> |
|||
<view class="logistics_step"> |
|||
<view class="logistics_step_title">CHIC Reject Goods</view> |
|||
<text>Reason: 驳回的内容。 please modify the refund application or return information</text> |
|||
<view class="logistics_step_time">2020.12.13 23:54:12</view> |
|||
</view> |
|||
<view class="logistics_step"> |
|||
<view class="logistics_step_title">Buyer Has Sent The Goods</view> |
|||
<text>Waiting for CHIC to receive the goods</text> |
|||
<view class="logistics_step_time">2020.12.13 23:54:12</view> |
|||
</view> |
|||
<view class="logistics_step"> |
|||
<view class="logistics_step_title">CHIC Agrees To Refund</view> |
|||
<text>To be returned by the buyer，Please submit the return logistics order number within 7 days</text> |
|||
<view class="logistics_step_time">2020.12.13 23:54:12</view> |
|||
</view> |
|||
<view class="logistics_step"> |
|||
<view class="logistics_step_title">Buyer Modifies Refund Application</view> |
|||
<text>Waiting for CHIC processing</text> |
|||
<view class="logistics_step_time">2020.12.13 23:54:12</view> |
|||
</view> |
|||
<view class="logistics_step"> |
|||
<view class="logistics_step_title">CHIC Refund Rejected</view> |
|||
<text>Reason : 驳回的内容。please modify the refund information</text> |
|||
<view class="logistics_step_time">2020.12.13 23:54:12</view> |
|||
</view> |
|||
<view class="logistics_step"> |
|||
<view class="logistics_step_title">Buyer Submits Refund Application</view> |
|||
<text>Waiting for CHIC processing</text> |
|||
<view class="logistics_step_time">2020.12.13 23:54:12</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
// 0、售后已取消 1、商家驳回申请 2、待买家退货 3、待商家收货 4、待退款 5、等待商家审核 6、退款成功 |
|||
details_index:5, |
|||
isShow:false, |
|||
} |
|||
}, |
|||
methods:{ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
@import "@/common/scss/order.scss"; |
|||
.body{ |
|||
padding-bottom: 140rpx; |
|||
|
|||
} |
|||
.order_popup_commodity_title{ |
|||
font-size: 28.67rpx; |
|||
font-weight: bold; |
|||
margin-top: 37.33rpx; |
|||
} |
|||
.negotiation_details{ |
|||
padding: 40.67rpx 0; |
|||
padding-left: 28rpx; |
|||
padding-right: 16rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 28.67rpx; |
|||
font-weight: bold; |
|||
border-bottom: 14.67rpx #F6F5FA solid; |
|||
image{ |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
} |
|||
.toPaid{ |
|||
.shipped_right_text{ |
|||
margin-bottom: 14rpx; |
|||
} |
|||
} |
|||
.refund_details_title{ |
|||
height: 126rpx !important; |
|||
} |
|||
.refund_transit{ |
|||
height: 126rpx !important; |
|||
} |
|||
.summary{ |
|||
border-bottom: 14.67rpx #F6F5FA solid; |
|||
padding-bottom: 44.67rpx; |
|||
} |
|||
.refund_address{ |
|||
padding: 40rpx 0; |
|||
padding-left: 28rpx; |
|||
padding-right: 16.67rpx; |
|||
font-size: 24rpx; |
|||
color: #666666; |
|||
font-weight: bold; |
|||
border-bottom: 14.67rpx #F6F5FA solid; |
|||
.address_title{ |
|||
font-size: 28.67rpx; |
|||
color: black; |
|||
margin-bottom: 22rpx; |
|||
} |
|||
.address_content{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
.address_content_item{ |
|||
width: 50%; |
|||
margin-bottom: 10.67rpx; |
|||
&:last-child{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.refund_success{ |
|||
padding: 40rpx 26.67rpx; |
|||
font-size: 28.67rpx; |
|||
font-weight: bold; |
|||
border-bottom: 14.67rpx #F6F5FA solid; |
|||
.refund_success_item{ |
|||
margin-bottom: 20rpx; |
|||
&:last-child{ |
|||
margin-bottom: 0; |
|||
} |
|||
.refund_success_item_text{ |
|||
color: #B22234; |
|||
} |
|||
} |
|||
} |
|||
.order_popup{ |
|||
padding: 0 28rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.order_popup_title{ |
|||
justify-content: flex-start; |
|||
} |
|||
} |
|||
.logistics_details{ |
|||
border-top: none; |
|||
padding: 26rpx 0; |
|||
padding-left: 0; |
|||
padding-right: 27.33rpx; |
|||
max-height: 1123.33rpx; |
|||
overflow-y: auto; |
|||
.logistics_step{ |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
font-weight: bold; |
|||
&:before{ |
|||
content: ""; |
|||
width: 26.67rpx; |
|||
height: 26.67rpx; |
|||
background-color: #E2E2E2; |
|||
} |
|||
&::after{ |
|||
background-color: #E2E2E2; |
|||
left: 12.5rpx; |
|||
} |
|||
.logistics_step_title{ |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
margin-bottom: 10rpx; |
|||
font-weight: 500; |
|||
} |
|||
.logistics_step_time{ |
|||
font-size: 20rpx; |
|||
color: #999999; |
|||
} |
|||
} |
|||
} |
|||
.step_active{ |
|||
color: #333333 !important; |
|||
|
|||
&:before{ |
|||
background-image: url(@/static/img/yuan.png); |
|||
background-size: 100% 100%; |
|||
background-color: white !important; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,283 @@ |
|||
<template> |
|||
<view> |
|||
<uni-nav-bar :statusBar="true" left-icon="left" title="Review" color="#000000" :fixed="true" @clickLeft="back"> |
|||
<block slot="right"> |
|||
<view class="nav_right"> |
|||
<button @click="reviewSub">Submit</button> |
|||
</view> |
|||
</block> |
|||
</uni-nav-bar> |
|||
<view class="body" v-for="(item,index) in orderDate.order_goods " :key="index"> |
|||
<view class="order_popup_commodity"> |
|||
<view class="good_info" > |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image"> |
|||
<image :src="item.goods_img" mode=""></image> |
|||
</view> |
|||
<view class="left_info"> |
|||
<view class="info_name">{{item.goods_name}}</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>{{item.goods_attr |goodsAttr}}</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="review"> |
|||
<view class="review_title"> |
|||
<text>Score</text> |
|||
<uni-rate size="22" disabledColor="red" v-model="query.comment_rank" active-color="red" :is-fill="false" class="rate" v-if="reviewType==0"/> |
|||
<uni-rate size="22" disabledColor="red" v-model="query1.comments[index].comment_rank" active-color="red" :is-fill="false" class="rate" v-else/> |
|||
</view> |
|||
<view class="review_content"> |
|||
<image src="../../static/img/write.png" mode=""></image> |
|||
<textarea placeholder="Write reviews" v-if="reviewType==0" v-model="query.comment"></textarea> |
|||
<textarea placeholder="Write reviews" v-else v-model="query1.comments[index].comment"></textarea> |
|||
</view> |
|||
<view class="reason_upload"> |
|||
<view class="reason_upload_item"> |
|||
<image src="/static/img/vedio.png" class="upload_item_camera1" mode=""></image> |
|||
<view>Upload the video</view> |
|||
</view> |
|||
<view class="reason_upload_item"> |
|||
<image src="/static/img/camera.png" class="upload_item_camera" mode=""></image> |
|||
<view>Upload pictures</view> |
|||
</view> |
|||
|
|||
<view class="reason_upload_item reason_upload_item1"> |
|||
<image src="/static/img/logo.png" class="upload_item_image" mode=""></image> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="reason_upload_tips">Upload JPG, PNG format, within 3M</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2,defaultRequest3} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
orderDate:{}, |
|||
// 评论状态 0、单个评论 1批量评论 |
|||
reviewType:0, |
|||
query:{ |
|||
_action:'commentordergoods', |
|||
order_id:'', |
|||
order_sn:'', |
|||
rec_id:'', |
|||
goods_id:'', |
|||
comment:'', |
|||
comment_rank:'', |
|||
commentlabels:'' |
|||
}, |
|||
query1:{ |
|||
_action:'commentorder', |
|||
order_id:'', |
|||
order_sn:'', |
|||
comments:[] |
|||
} |
|||
} |
|||
}, |
|||
methods:{ |
|||
// 提交评论内容 |
|||
reviewSub(){ |
|||
let data |
|||
if(this.reviewType==0){ |
|||
this.commentordergoods() |
|||
}else{ |
|||
data=this.query1 |
|||
} |
|||
console.info(data) |
|||
}, |
|||
// 单个评论内容 |
|||
commentordergoods(){ |
|||
defaultRequest2(this.query).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Comment successful!' |
|||
}) |
|||
setTimeout(function(){ |
|||
uni.navigateBack() |
|||
},2000) |
|||
} |
|||
}) |
|||
}, |
|||
// 批量评论内容 |
|||
commentordergoods(){ |
|||
defaultRequest2(this.query1,'comments').then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Comment successful!' |
|||
}) |
|||
setTimeout(function(){ |
|||
uni.navigateBack() |
|||
},2000) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
back(){ |
|||
uni.navigateBack() |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
let datas=JSON.parse(e.data) |
|||
this.orderDate=datas |
|||
if(datas.order_goods.length>1){ |
|||
this.reviewType=1 |
|||
this.query1.order_id=datas.order_id |
|||
this.query1.order_sn=datas.order_sn |
|||
datas.order_goods.map(item=>{ |
|||
let data={ |
|||
rec_id:item.rec_id, |
|||
goods_id:item.goods_id, |
|||
comment:'', |
|||
comment_rank:'', |
|||
commentlabels:item.goods_attr.replace(/\s\n/g,' ') |
|||
} |
|||
this.query1.comments.push(data) |
|||
}) |
|||
}else{ |
|||
this.query.order_id=datas.order_id |
|||
this.query.order_sn=datas.order_sn |
|||
this.query.rec_id=datas.order_goods[0].rec_id |
|||
this.query.goods_id=datas.order_goods[0].goods_id |
|||
this.commentlabels=datas.order_goods[0].goods_attr.replace(/\s\n/g,' ') |
|||
} |
|||
}, |
|||
filters:{ |
|||
goodsAttr(e){ |
|||
return e.replace(/\s\n/g,';'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
.review{ |
|||
padding: 0 26rpx; |
|||
padding-top: 35.33rpx; |
|||
|
|||
.review_title{ |
|||
display: flex; |
|||
align-items: center; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
margin-bottom: 44rpx; |
|||
.rate{ |
|||
margin-left: 24.67rpx; |
|||
} |
|||
} |
|||
.review_content{ |
|||
display: flex; |
|||
image{ |
|||
width: 29.33rpx; |
|||
height: 29.33rpx; |
|||
} |
|||
textarea{ |
|||
font-size: 28rpx; |
|||
font-weight: 400; |
|||
width: 100%; |
|||
height: 113.33rpx; |
|||
margin-left: 4rpx; |
|||
} |
|||
} |
|||
.reason_upload{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-bottom: 34.67rpx; |
|||
.reason_upload_item{ |
|||
border: 1px dashed #D2D2D2; |
|||
border-radius: 15rpx; |
|||
width: 156rpx; |
|||
height: 156rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
font-size: 12rpx; |
|||
color: #BFBCBC; |
|||
margin-right: 23.33rpx; |
|||
|
|||
&:nth-child(3n+3){ |
|||
margin-right: 0; |
|||
} |
|||
.upload_item_camera{ |
|||
width: 72rpx; |
|||
height: 54.67rpx; |
|||
margin-bottom: 14rpx; |
|||
} |
|||
.upload_item_camera1{ |
|||
width: 72rpx; |
|||
height: 72rpx; |
|||
// margin-bottom: 14rpx; |
|||
|
|||
} |
|||
.upload_item_image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 15rpx; |
|||
} |
|||
} |
|||
.reason_upload_item1{ |
|||
position: relative; |
|||
&::after{ |
|||
content: ""; |
|||
width: 30.67rpx; |
|||
height: 30.67rpx; |
|||
position: absolute; |
|||
right: -12rpx; |
|||
top: -12rpx; |
|||
z-index: 99; |
|||
background-image: url("@/static/img/close3.png"); |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
} |
|||
.reason_upload_tips{ |
|||
font-size: 20rpx; |
|||
color: #666666; |
|||
} |
|||
} |
|||
.uni-navbar{ |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.nav_right{ |
|||
|
|||
|
|||
button{ |
|||
width: 116.67rpx; |
|||
height: 48rpx; |
|||
background-color: black; |
|||
margin: 0; |
|||
line-height: 48rpx; |
|||
border-radius: 24rpx; |
|||
font-size: 24rpx; |
|||
font-weight: bold; |
|||
color: white; |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
} |
|||
} |
|||
.body{ |
|||
border-top: 14.67rpx #F6F5FA solid; |
|||
} |
|||
.order_popup_commodity{ |
|||
padding: 0 33.33rpx; |
|||
border-bottom: 14.67rpx #F6F5FA solid; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,539 @@ |
|||
<template> |
|||
<view> |
|||
<uni-nav-bar :statusBar="true" left-icon="left" title="Shipping Cart" color="#000000" :fixed="true" @clickLeft="back"> |
|||
<block slot="right"> |
|||
<view class="nav_right"> |
|||
<image src="../../static/img/delete1.png" mode="" @click="deleteCart"></image> |
|||
</view> |
|||
</block> |
|||
</uni-nav-bar> |
|||
<view class="empty" v-if="goods_list.length==0"> |
|||
<image src="/static/img/cart3.png" mode=""></image> |
|||
<text>Your cart is empty</text> |
|||
<button>Shop Now</button> |
|||
</view> |
|||
<template v-else> |
|||
<view class="cart_info"> |
|||
<image src="/static/img/Shipped.png" mode=""></image> |
|||
<view class="cart_title_content">Buy US$32.00 more to enjoy FREE STANDARD SHIPPING!</view> |
|||
<view class="cart_title_right">Add</view> |
|||
</view> |
|||
<view class="cart"> |
|||
<view class="cart_content"> |
|||
<view class="good_info" v-for="(item,index) in goods_list" :key="item.rec_id"> |
|||
<image src="../../static/img/select1.png" mode="" class="cart_select" v-show="item.is_check==1" @click="cartCheck(1,0,item.rec_id,index)"></image> |
|||
<image src="../../static/img/select2.png" mode="" class="cart_select" v-show="item.is_check==0" @click="cartCheck(1,1,item.rec_id,index)"></image> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image"> |
|||
<image :src="item.goods_thumb" mode=""></image> |
|||
</view> |
|||
<view class="left_info"> |
|||
<view class="info_name">{{item.goods_name}}</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>{{item.goods_attr}}</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="info_price"> |
|||
<text>US${{item.goods_price}}</text> |
|||
<uni-number-box background="#FFFFFF" :min="1" :value="item.goods_number" @change="updateCart($event,item.rec_id)"></uni-number-box> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
<view class="cart"> |
|||
<view class="cart_content"> |
|||
<view class="good_info" v-for="(item,index) in 3 " :key="index"> |
|||
<image src="../../static/img/select.png" mode="" class="cart_select"></image> |
|||
<view class="good_info_left "> |
|||
<view class="good_info_image"> |
|||
<view class="good_info_image_tips">sold out</view> |
|||
</view> |
|||
|
|||
<view class="left_info left_info1"> |
|||
<view class="info_name">Adidas Yeezy Boost 350 V2 DazzlingBlue Black GY7164 Men's</view> |
|||
<view class="left_info_bottom"> |
|||
<view class="info_lable"> |
|||
<text>Multicolor;41</text> |
|||
<image src="/static/img/bottom.png" mode=""></image> |
|||
</view> |
|||
<text>x1</text> |
|||
</view> |
|||
<view class="info_price"> |
|||
<text>US$314.00</text> |
|||
<image src="../../static/img/delete2.png" mode="" class="delete"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
|
|||
<view class="recommend"> |
|||
<view class="recommend_title">RECOMMEND</view> |
|||
<view class="recommend_content"> |
|||
<view class="recommend_content_item" v-for="(item,index) in catList " :key="index" @click="goDetails(item.id)"> |
|||
<view class="recommend_content_item_image"> |
|||
<image :src="item.thumb" mode=""></image> |
|||
</view> |
|||
<view class="recommend_content_item_image_name">{{item.short_name}}</view> |
|||
<view class="recommend_content_item_pric">US${{item.is_promote==0? item.shop_price :item.promote_price}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="footer"> |
|||
<view class="footer_left"> |
|||
<image src="../../static/img/select1.png" mode="" v-if="all_allno==1 && goods_list.length>0" @click="cartCheck(0,0)"></image> |
|||
<image src="../../static/img/select2.png" mode="" v-else @click="cartCheck(0,1)"></image> |
|||
<text>All</text> |
|||
</view> |
|||
<view class="footer_right"> |
|||
<text>US${{total.goods_price}}</text> |
|||
<button @click="cartCheckOut">CHECKOUT({{total.goods_count}})</button> |
|||
</view> |
|||
</view> |
|||
<uni-popup ref="alertDialog" type="dialog"> |
|||
<uni-popup-dialog type="error" cancelText="Close" confirmText="Delete" title="Tips" content="Whether to delete goods?" |
|||
@confirm="dialogConfirm" ></uni-popup-dialog> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import {defaultRequest2,defaultRequest4} from '../../api/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
isEmpty:false, |
|||
// 购物车数据 |
|||
total:{}, |
|||
// 商品数据 |
|||
goods_list:[], |
|||
// 全选标识。1-全部选中，2-全部未选，3-部分选中。 |
|||
all_allno:2, |
|||
deleteQuery:{ |
|||
_action:'removecart' |
|||
}, |
|||
// 获取该分类的其他商品的请求参数 |
|||
catQuery:{ |
|||
_action:'getgoods', |
|||
page_index:1, |
|||
page_size:10 |
|||
}, |
|||
catList:[], |
|||
isReachBottom:true, |
|||
} |
|||
}, |
|||
methods:{ |
|||
goDetails(id){ |
|||
uni.navigateTo({ |
|||
url:'/pages/productDetails/index?goods_id='+id |
|||
}) |
|||
}, |
|||
// 获取的其他商品 |
|||
getCatList(type){ |
|||
defaultRequest4(this.catQuery).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
if(res.data){ |
|||
if(type==0){ |
|||
this.catList=res.data |
|||
}else{ |
|||
this.catList=this.catList.concat(res.data) |
|||
} |
|||
}else{ |
|||
this.isReachBottom=false |
|||
uni.showToast({ |
|||
title: 'No more data yet', |
|||
icon:'none' |
|||
}) |
|||
this.catQuery.page_index-- |
|||
} |
|||
} |
|||
uni.hideNavigationBarLoading(); |
|||
}) |
|||
}, |
|||
// 修改商品数量 |
|||
updateCart(e,id){ |
|||
let data={_action:'updatecart',rec_id:id,goods_number:e} |
|||
defaultRequest4(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.getList() |
|||
} |
|||
}) |
|||
}, |
|||
// 提交订单 |
|||
cartCheckOut(){ |
|||
if(this.goods_list.length==0) return |
|||
if(this.all_allno==2){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Please select the product' |
|||
}) |
|||
return |
|||
} |
|||
let data={_action:'cartcheckout',is_new:1,direct_shopping:0,consignee:''} |
|||
uni.navigateTo({ |
|||
url:'../order/confirmation?query='+JSON.stringify(data) |
|||
}) |
|||
|
|||
}, |
|||
// 删除商品 |
|||
deleteCart(){ |
|||
if(this.goods_list.length==0) return |
|||
if(this.all_allno==2){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Please select the product to delete' |
|||
}) |
|||
return |
|||
}else if(this.all_allno==3){ |
|||
let selectNum=0, |
|||
rec_id='' |
|||
this.goods_list.map(item=>{ |
|||
if(item.is_check==1){ |
|||
rec_id=item.rec_id |
|||
selectNum++ |
|||
} |
|||
}) |
|||
if(selectNum>1){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Only one or all items can be deleted' |
|||
}) |
|||
return |
|||
}else{ |
|||
this.deleteQuery.rec_id=rec_id |
|||
} |
|||
}else{ |
|||
// this.deleteQuery._action='clearcart' |
|||
} |
|||
this.$refs.alertDialog.open() |
|||
|
|||
}, |
|||
dialogConfirm(){ |
|||
defaultRequest2(this.deleteQuery).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
uni.showToast({ |
|||
icon:'none', |
|||
title:'Successfully deleted!' |
|||
}) |
|||
this.getList() |
|||
} |
|||
}) |
|||
}, |
|||
// 购物车-商品勾选-单个记录 type: 1为单选 、0为全选 |
|||
cartCheck(type,is_check,id,index){ |
|||
if(this.goods_list.length==0) return |
|||
let data={} |
|||
if(type==1){ |
|||
data={_action:'cartcheck',rec_id:id,is_check:is_check} |
|||
}else{ |
|||
data={_action:'cartcheckall',is_check:is_check} |
|||
} |
|||
defaultRequest4(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.getList() |
|||
|
|||
// Object.assign(this.total,res.data) |
|||
// this.total.goods_price=res.data.price |
|||
// this.all_allno=res.data.all_allno |
|||
// if(type==1){ |
|||
// if(is_check==0){ |
|||
// this.goods_list[index].is_check=0 |
|||
// }else{ |
|||
// this.goods_list[index].is_check=1 |
|||
// } |
|||
|
|||
// }else{ |
|||
// this.goods_list.map(item=>{ |
|||
// if(is_check==0){ |
|||
// item.is_check=0 |
|||
// }else{ |
|||
// item.is_check=1 |
|||
// } |
|||
|
|||
// }) |
|||
// } |
|||
|
|||
} |
|||
}) |
|||
}, |
|||
getList(){ |
|||
let data={_action:'getcartgoods'} |
|||
defaultRequest4(data).then(res=>{ |
|||
console.info(res) |
|||
if(res.error==0){ |
|||
this.total=res.data.total |
|||
this.all_allno=res.data.all_allno |
|||
if(res.data.goods_list){ |
|||
res.data.goods_list.map(item=>{ |
|||
item.goods_attr=item.goods_attr.replace(/\s\n/g,';'); |
|||
}) |
|||
this.goods_list=res.data.goods_list |
|||
}else{ |
|||
this.goods_list=[] |
|||
} |
|||
|
|||
|
|||
} |
|||
}) |
|||
}, |
|||
back(){ |
|||
uni.switchTab({ |
|||
url: '/pages/index/index' |
|||
}); |
|||
} |
|||
}, |
|||
onShow() { |
|||
uni.hideTabBar() |
|||
this.getList() |
|||
this.getCatList(0) |
|||
}, |
|||
onHide(){ |
|||
uni.showTabBar() |
|||
}, |
|||
// 上拉加载 |
|||
onReachBottom(){ |
|||
if(!this.isReachBottom)return |
|||
this.catQuery.page_index++ |
|||
this.getCatList(1) |
|||
}, |
|||
onPullDownRefresh(){ |
|||
uni.stopPullDownRefresh() |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
page{ |
|||
background-color: #F6F5FA; |
|||
padding-bottom: 150rpx; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.uni-navbar{ |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
.uni-numbox{ |
|||
border: 1px solid #999999; |
|||
border-radius: 14rpx; |
|||
height: 42.67rpx; |
|||
|
|||
/deep/ .uni-numbox__minus{ |
|||
border-radius: 14rpx; |
|||
} |
|||
/deep/.uni-numbox__plus{ |
|||
border-radius: 14rpx; |
|||
} |
|||
/deep/.uni-numbox__value{ |
|||
border-left: 1px solid #999999; |
|||
border-right: 1px solid #999999; |
|||
height: 100%; |
|||
width: 63.33rpx; |
|||
font-size: 21.33rpx; |
|||
} |
|||
} |
|||
.nav_right{ |
|||
image{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
} |
|||
.empty{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding-top: 136rpx; |
|||
font-size: 30.67rpx; |
|||
font-weight: 400; |
|||
image{ |
|||
width: 125.33rpx; |
|||
height: 125.33rpx; |
|||
margin-bottom: 49.33rpx; |
|||
} |
|||
button{ |
|||
font-size: 29.33rpx; |
|||
font-weight: 500; |
|||
background-color: black; |
|||
color: white; |
|||
height: 45.67rpx; |
|||
line-height: 45.67rpx; |
|||
border-radius: 0; |
|||
margin-top: 33.33rpx; |
|||
} |
|||
} |
|||
.recommend{ |
|||
margin-top: 124rpx; |
|||
} |
|||
.cart_info{ |
|||
background-color: white; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 36.67rpx 32rpx; |
|||
font-size: 24rpx; |
|||
font-weight: 400; |
|||
|
|||
image{ |
|||
width: 41.33rpx; |
|||
height: 41.33rpx; |
|||
} |
|||
.cart_title_content{ |
|||
width: 510.67rpx; |
|||
} |
|||
.cart_title_right{ |
|||
font-size: 26rpx; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.cart{ |
|||
background-color: white; |
|||
margin: 0 18rpx; |
|||
padding: 42rpx 12.67rpx; |
|||
margin-top: 16.67rpx; |
|||
|
|||
.cart_title{ |
|||
padding-left: 12.67rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 28rpx; |
|||
margin-bottom: 76rpx; |
|||
} |
|||
.cart_content{ |
|||
|
|||
.good_info{ |
|||
display: flex; |
|||
align-items: center; |
|||
color: #000000; |
|||
justify-content: space-between; |
|||
border-bottom: none; |
|||
padding: 0; |
|||
margin-bottom: 78.67rpx; |
|||
|
|||
&:last-child{ |
|||
margin-bottom: 0; |
|||
} |
|||
.good_info_image{ |
|||
position: relative; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.good_info_image_tips{ |
|||
width: 117.33rpx; |
|||
height: 117.33rpx; |
|||
border-radius: 50%; |
|||
background: rgba(0, 0, 0, 0.3); |
|||
color: white; |
|||
font-size: 22rpx; |
|||
font-weight: 800; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 99; |
|||
position: absolute; |
|||
top: 50%; |
|||
margin-top: -60rpx; |
|||
left: 50%; |
|||
margin-left: -60rpx; |
|||
} |
|||
} |
|||
.left_info1{ |
|||
color: #C4C4C4; |
|||
|
|||
.left_info_bottom{ |
|||
color: #C4C4C4; |
|||
|
|||
.info_lable{ |
|||
border: 1px solid #C4C4C4; |
|||
} |
|||
} |
|||
.info_price{ |
|||
color: #C4C4C4; |
|||
} |
|||
} |
|||
.cart_select{ |
|||
width: 34.67rpx; |
|||
height: 34.67rpx; |
|||
} |
|||
.info_name{ |
|||
width: 406.67rpx; |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; //溢出内容隐藏 |
|||
text-overflow: ellipsis; //文本溢出部分用省略号表示 |
|||
display: -webkit-box; //特别显示模式 |
|||
-webkit-line-clamp: 2; //行数 |
|||
line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
.delete{ |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
.footer{ |
|||
padding: 42rpx 0; |
|||
padding-left: 27.33rpx; |
|||
padding-right: 19.33rpx; |
|||
background-color: white; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
border-top: 2px solid #F6F5FA; |
|||
z-index: 100; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 36rpx; |
|||
.footer_left{ |
|||
font-weight: 400; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
image{ |
|||
width: 34.67rpx; |
|||
height: 34.67rpx; |
|||
margin-right: 10rpx; |
|||
} |
|||
} |
|||
.footer_right{ |
|||
display: flex; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
|
|||
button{ |
|||
height: 73.33rpx; |
|||
line-height: 73.33rpx; |
|||
background-color: #191919; |
|||
margin: 0; |
|||
font-size: 26.67rpx; |
|||
font-weight: bold; |
|||
color: white; |
|||
margin-left: 23.33rpx; |
|||
border-radius: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 369 B |
|
After Width: | Height: | Size: 205 B |
|
After Width: | Height: | Size: 646 B |
|
After Width: | Height: | Size: 421 B |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 355 B |
|
After Width: | Height: | Size: 471 B |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 846 B |
|
After Width: | Height: | Size: 604 B |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 990 B |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue