ltlzx
/
cnic_buyer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化商品详情、新增限时秒杀和封装接口请求

master
ltlzx 4 years ago
parent
6a38ab4a66
commit
4804259a67
12 changed files with 352 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      api/request.js
  2. 108
      common/common.scss
  3. 107
      common/scss/order.scss
  4. 5
      config.js
  5. 6
      pages.json
  6. 109
      pages/index/flashSale.vue
  7. 3
      pages/index/index.vue
  8. 8
      pages/login/verifyEmail.vue
  9. 2
      pages/order/refundDetails.vue
  10. 73
      pages/productDetails/index.vue
  11. 3
      pages/productDetails/review.vue
  12. BIN
      static/img/add.png

39
api/request.js
View File

@ -0,0 +1,39 @@
import config from '../config.js'
const json_data={
appcode:'SHISE' ,//应用编码
appchannel:'FXXXXHUAWEI' ,//应用发布渠道
appver: '1.0.0',//应用版本
appname:'cnic_buyer' ,//应用名称
manufacturer:'HUAWEI' ,//设备生产商
phonebrand:'HORNOR' ,//设备品牌
phonetype:'X30' ,//设备型号
phoneos:'ANDROID'// 设备系统
}
const httpRequest = (params) => {
uni.showLoading({
title: "努力加载中..."
});
let httpOptions = {
url: config.apiUri + params.url,
data: params.data,
method: params.method,
header: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
};
return new Promise((resolve, reject) => {
uni.request({
...httpOptions,
success: res => {
uni.hideLoading();
resolve(res);
},
fail: err => {
uni.hideLoading();
reject(err);
}
})
})
}
export default httpRequest;

108
common/common.scss
View File

@ -113,6 +113,114 @@
}
}
// 谈判细节
.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{

107
common/scss/order.scss
View File

@ -194,115 +194,8 @@
}
}
// 谈判细节
.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;
}
}
}
}
// 进度条
.logistics_details{
border-top: 14.67rpx #F6F5FA solid;

5
config.js
View File

@ -0,0 +1,5 @@
var weburl='https://en.meixx.com/mapi/api_v2011.php';
export default {
apiUri: 'http://'+weburl+'/api/',
imgUri: 'http://'+weburl+'/',
}

6
pages.json
View File

@ -204,6 +204,12 @@
"style": {
"titleNView":false
}
},
{
"path": "pages/index/flashSale",
"style": {
"titleNView":false
}
}
],
"globalStyle": {

109
pages/index/flashSale.vue
View File

@ -0,0 +1,109 @@
<template>
<view>
<uni-nav-bar left-icon="left" 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 2 " :key="index">
<view class="recommend_content_item_image"></view>
<text>Adidas Yeezy Boost 350 DazzlingBlue Black</text>
<view class="recommend_item_operation">
<view>
<view class="recommend_content_item_pric">US$314.00</view>
<view class="recommend_content_item_pric1">US$314.00</view>
</view>
<image src="../../static/img/add.png" mode=""></image>
</view>
</view>
</view>
</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;
}
.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;
}
}
}
.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>

3
pages/index/index.vue
View File

@ -77,6 +77,7 @@
<image src="../../static/img/index_discount.png" mode="" class="discount page_padding"></image>
<!-- 标题 -->
<navigator url="/pages/index/flashSale">
<view class="index_title page_padding">
<text>Flash Sale</text>
<view class="title_right">
@ -84,6 +85,8 @@
<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">

8
pages/login/verifyEmail.vue
View File

@ -6,11 +6,11 @@
</view>
<input type="text" class="login_input" placeholder="Enter code">
<view class="tips">The code is incorrect.</view>
<button class="login_submit" >CONTINUE</button>
<button class="login_submit" @click="isShow=true">CONTINUE</button>
<view class="verify_text">Resend code</view>
</view>
<view class="mask"></view>
<view class="verify_popup">
<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>
@ -27,7 +27,7 @@
export default {
data() {
return {
isShow:false
}
},
methods:{

2
pages/order/refundDetails.vue
View File

@ -181,7 +181,7 @@
data() {
return {
// 0、售后已取消 1、商家驳回申请 2、待买家退货 3、待商家收货 4、待退款 5、等待商家审核 6、退款成功
details_index:0,
details_index:5,
isShow:false,
}
},

73
pages/productDetails/index.vue
View File

@ -128,7 +128,7 @@
</view>
</scroll-view>
<view class="security">
<view class="goods_title">
<view class="goods_title" @click="isSecurity=true">
<view class="goods_title_left">
<image src="/static/img/security.png" mode=""></image>
<text>Shipping security</text>
@ -197,7 +197,7 @@
<view class="recommend recommend1">
<view class="recommend_title">Other options</view>
<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false">
<view class="spike1_item1" v-for="(item,index) in 8" :key="index" @click="goPage">
<view class="spike1_item1" v-for="(item,index) in 8" :key="index" >
<view class="spike1_item_img"></view>
<view class="spike1_item_bottom">
<text>US$314.00</text>
@ -226,7 +226,39 @@
<button @click="addCart">ADD TO CART</button>
</view>
</view>
<view class="mask" @click="isCart=false" v-show="isCart"></view>
<view class="mask" @click="isCart=false,isSecurity=false" v-show="isCart || isSecurity"></view>
<view class="order_popup" v-show="isSecurity">
<view class="order_popup_title">
<text>Shipping security</text>
<image src="../../static/img/close1.png" mode="" @click="isShow=false"></image>
</view>
<view class="securityDetails">
<view class="securityDetails_item">
<view class="securityDetails_item_title">Support 7-day return and replacement</view>
<view>
If there are quality problems or spillage damage within 7
days after receiving the goods, you can apply for return
and replacement Processing
</view>
</view>
<view class="securityDetails_item">
<view class="securityDetails_item_title">Private service</view>
<view>
The package is tightly packed and there is no sensitive
information on the express list
</view>
</view>
<view class="securityDetails_item">
<view class="securityDetails_item_title">Genuine guarantee</view>
<view>
t is guaranteed that there is no problem. All goods are
original and genuine products and brand authorized sales,
so as to eliminate one Cut fake goods to ensure your
shopping
</view>
</view>
</view>
</view>
<view class="addCard" v-show="isCart">
<image src="/static/img/close1.png" mode="" class="addCard_close"></image>
<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false">
@ -272,6 +304,7 @@
navWidth:'80rpx',
current:0,
isVedio:false,
isSecurity:false,
info: [{
colorClass: 'uni-bg-red',
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
@ -336,6 +369,40 @@
border-radius: 25rpx;
}
}
.securityDetails{
padding-top: 50.67rpx;
padding-bottom: 120rpx;
padding-left: 54.67rpx;
padding-right: 45.33rpx;
.securityDetails_item{
margin-bottom: 52rpx;
font-size: 24.67rpx;
font-weight: 400;
color: #999999;
&:last-child{
margin-bottom: 0;
}
.securityDetails_item_title{
position: relative;
color: #333333;
font-size: 30rpx;
font-weight: 500;
margin-bottom: 10.33rpx;
&:before{
content: "";
width: 6rpx;
height: 6rpx;
position: absolute;
border-radius: 50%;
background-color: #999999;
left: -25.67rpx;
top: 50%;
margin-top: -3rpx;
}
}
}
}
.variations_select_size{
margin-left: 20.67rpx;
display: flex;

3
pages/productDetails/review.vue
View File

@ -20,9 +20,6 @@
<image src="/static/img/bottom.png" mode=""></image>
</view>
</view>
<view class="info_price">
<text>US$314.00</text>
</view>
</view>
</view>
</view>

BIN
static/img/add.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

Write Preview
Loading…
Cancel
Save