商城页面
This commit is contained in:
itgaojian163
parent
27f2fce932
commit
9288ba632a
3
app.json
3
app.json
@ -44,7 +44,8 @@
|
||||
"subpages/goodsaddress/goodsaddress",
|
||||
"subpages/goodsorder/goodsorder",
|
||||
"subpages/addshopaddress/addshopaddress",
|
||||
"subpages/editshopaddress/editshopaddress"
|
||||
"subpages/editshopaddress/editshopaddress",
|
||||
"subpages/orderconfirm/orderconfirm"
|
||||
],
|
||||
"subPackages": [
|
||||
{
|
||||
|
||||
@ -75,7 +75,15 @@ Page({
|
||||
},
|
||||
doDel(e) {
|
||||
var id = e.currentTarget.dataset.id;
|
||||
var item = e.currentTarget.dataset.item;
|
||||
var _self = this;
|
||||
if (1 == item.shopAddressDefault) {
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: '请先设置默认地址',
|
||||
})
|
||||
return;
|
||||
}
|
||||
wx.showModal({
|
||||
title: '警告',
|
||||
content: '确定要删除该收货地址吗?',
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</view>
|
||||
<view class="address-control-box">
|
||||
<image src="/subpages/images/ic_edit_icon.png" mode="scaleToFill" class="edit-icon" bindtap="doEdit" data-id="{{item.shopAddressId}}"></image>
|
||||
<image src="/images/delete.png" mode="scaleToFill" class="del-icon" bindtap="doDel" data-id="{{item.shopAddressId}}"></image>
|
||||
<image src="/images/delete.png" mode="scaleToFill" class="del-icon" bindtap="doDel" data-id="{{item.shopAddressId}}" data-item="{{item}}"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -99,5 +99,10 @@ Page({
|
||||
_self.setData({
|
||||
totalPrice: tempCount
|
||||
})
|
||||
},
|
||||
toConfirmOrder() {
|
||||
wx.navigateTo({
|
||||
url: '/subpages/orderconfirm/orderconfirm',
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -149,6 +149,11 @@
|
||||
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
color: #9f1512;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.bottom-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -232,3 +237,4 @@
|
||||
margin-left: 20rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
|
||||
BIN
subpages/images/ic_divid_line_bottom.png
Normal file
BIN
subpages/images/ic_divid_line_bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 B |
103
subpages/orderconfirm/orderconfirm.js
Normal file
103
subpages/orderconfirm/orderconfirm.js
Normal file
@ -0,0 +1,103 @@
|
||||
// subpages/orderconfirm/orderconfirm.js
|
||||
var app = getApp();
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
token: '',
|
||||
imgUrl: app.shopImgUrl,
|
||||
addressBean: {},
|
||||
hidePageLoading: false,
|
||||
goodsList: [],
|
||||
imgUrl: app.shopImgUrl,
|
||||
remark: '',
|
||||
totalPrice: 0
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
var _self = this;
|
||||
_self.getToken().then(result => {
|
||||
_self.getDefaultAddress();
|
||||
_self.getGoodsCar();
|
||||
})
|
||||
},
|
||||
getToken() {
|
||||
var self = this;
|
||||
return new Promise(resolve => {
|
||||
wx.getStorage({
|
||||
key: 'token',
|
||||
success(res) {
|
||||
self.setData({
|
||||
token: res.data
|
||||
})
|
||||
return resolve();
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
//获取默认地址
|
||||
getDefaultAddress() {
|
||||
var _self = this;
|
||||
app.restAjax.get(app.restAjax.path('{shopUrl}/app/shopaddress/getdefault', [app.shopUrl]), null, {
|
||||
headers: {
|
||||
token: _self.data.token
|
||||
}
|
||||
}, function (code, data) {
|
||||
wx.hideLoading()
|
||||
if (code == 200) {
|
||||
_self.setData({
|
||||
addressBean: data,
|
||||
hidePageLoading: true
|
||||
})
|
||||
}
|
||||
}, function (code, data) {
|
||||
app.dialog.msg(data.msg)
|
||||
_self.setData({
|
||||
hidePageLoading: true
|
||||
})
|
||||
});
|
||||
},
|
||||
getGoodsCar() {
|
||||
var _self = this;
|
||||
var tempPrice = 0;
|
||||
try {
|
||||
var carList = wx.getStorageSync('carlist');
|
||||
console.log(carList)
|
||||
if (carList) {
|
||||
for (let i = 0; i < carList.length; i++) {
|
||||
const item = carList[i];
|
||||
if (item.isCheck) {
|
||||
_self.data.goodsList.push(item);
|
||||
tempPrice = item.carAmount * item.goodsPrice + tempPrice;
|
||||
}
|
||||
}
|
||||
_self.setData({
|
||||
goodsList: _self.data.goodsList,
|
||||
totalPrice: tempPrice
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
},
|
||||
inputRemark(e) {
|
||||
var value = e.detail.value
|
||||
this.setData({
|
||||
remark: value
|
||||
})
|
||||
},
|
||||
doSelAddress() {
|
||||
//选择地址
|
||||
},
|
||||
checkParams() {
|
||||
|
||||
},
|
||||
doSave() {
|
||||
|
||||
}
|
||||
})
|
||||
4
subpages/orderconfirm/orderconfirm.json
Normal file
4
subpages/orderconfirm/orderconfirm.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "订单确认"
|
||||
}
|
||||
51
subpages/orderconfirm/orderconfirm.wxml
Normal file
51
subpages/orderconfirm/orderconfirm.wxml
Normal file
@ -0,0 +1,51 @@
|
||||
<!--subpages/orderconfirm/orderconfirm.wxml-->
|
||||
<scroll-view class="container-box" wx:if="{{addressBean.areaName}}">
|
||||
<!-- 收货地址 -->
|
||||
<view class="address-box">
|
||||
<view class="address-title">收货地址</view>
|
||||
<view class="address-area-name">{{addressBean.areaName}}</view>
|
||||
<view class="address-area-content">
|
||||
<view>{{addressBean.shopAddressContent}}</view>
|
||||
<image src="/subpages/images/ic_arrow_cir.png" mode="scaleToFill" class="icon"></image>
|
||||
</view>
|
||||
<view class="address-phone">
|
||||
<view>{{addressBean.shopAddressName}} {{addressBean.shopAddressPhone}}</view>
|
||||
</view>
|
||||
<image src="/subpages/images/ic_divid_line_bottom.png" mode="scaleToFill" class="line-img" />
|
||||
</view>
|
||||
<!-- 购买商品 -->
|
||||
<view class="goods-box">
|
||||
<view class="goods-title">确认商品</view>
|
||||
<block wx:for="{{goodsList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
|
||||
<view class="goods-item">
|
||||
<image class="goods-img" src="{{item.goodsIcon=='' ? '/images/address.png' : imgUrl+item.goodsIcon}}" mode="scaleToFill" bindtap="selSelect" data-index="{{index}}"></image>
|
||||
<view class="goods-content">
|
||||
<rich-text class="goods-name" nodes="{{item.goodsName}}" bindtap="selSelect" data-index="{{index}}"></rich-text>
|
||||
<view class="goods-price" bindtap="selSelect" data-index="{{index}}">¥{{item.goodsPrice}}</view>
|
||||
<view class="goods-standard" bindtap="selSelect" data-index="{{index}}">{{item.goodsStandarName}}</view>
|
||||
<view class="goods-type-box">
|
||||
<view class="type-box" bindtap="selSelect" data-index="{{index}}">
|
||||
<view class="goods-type">销量{{item.goodsSalesVolume}}</view>
|
||||
<view class="goods-type">{{item.goodsNotFreight ==1 ? '不包邮':'包邮'}}</view>
|
||||
</view>
|
||||
<view class="goods-count">数量:{{item.carAmount}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="remark-box">
|
||||
<view>留言</view>
|
||||
<textarea class="remark-input" bindinput="inputRemark" placeholder="请输入留言"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-box">
|
||||
<view class="bottom-content">
|
||||
<view class="bottom-price">
|
||||
<view class="price-icon">¥</view>
|
||||
<view class="price-content">{{totalPrice}}</view>
|
||||
</view>
|
||||
<view class="car-add" bindtap="doConfirmOrder">提交订单</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<page-loading wx:else></page-loading>
|
||||
310
subpages/orderconfirm/orderconfirm.wxss
Normal file
310
subpages/orderconfirm/orderconfirm.wxss
Normal file
@ -0,0 +1,310 @@
|
||||
/* subpages/orderconfirm/orderconfirm.wxss */
|
||||
page {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.container-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.address-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
box-shadow: 10rpx 10rpx 20rpx #f2f2f2;
|
||||
border-radius: 15rpx;
|
||||
padding: 20rpx;
|
||||
margin: 10rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.address-area-name {
|
||||
font-size: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.address-area-content {
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 40rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.address-area-content .icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.address-phone {
|
||||
font-size: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.line-img {
|
||||
width: 100%;
|
||||
height: 5rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.address-title {
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
box-shadow: 10rpx 10rpx 20rpx #f2f2f2;
|
||||
border-radius: 15rpx;
|
||||
padding: 20rpx;
|
||||
margin: 10rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.goods {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: 180rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.goods-content {
|
||||
margin: 0rpx 10rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
color: #9f1512;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.goods-count {
|
||||
color: #9f1512;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 32rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.goods-unit-price {
|
||||
font-size: 40rpx;
|
||||
color: #9f1512;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.goods-standard {
|
||||
margin-top: 10rpx;
|
||||
font-size: 32rpx;
|
||||
border: 1rpx solid #9f1512;
|
||||
border-radius: 3rpx;
|
||||
color: #9f1512;
|
||||
width: fit-content;
|
||||
max-width: fit-content;
|
||||
padding: 0rpx 10rpx;
|
||||
}
|
||||
|
||||
.goods-type-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.goods-type-box image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.goods-type {
|
||||
color: #9f1512;
|
||||
font-size: 25rpx;
|
||||
border: 1rpx solid #9f1512;
|
||||
padding: 0rpx 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.goods-type:last-child {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.type-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 50%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.add-del-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add-del-box .txt {
|
||||
font-size: 35rpx;
|
||||
padding: 0rpx 15rpx;
|
||||
}
|
||||
|
||||
.control-box {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
|
||||
.remark-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.remark-input {
|
||||
height: 180rpx;
|
||||
background: #f2f2f2;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bottom-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: white;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
color: #9f1512;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.bottom-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 15rpx 25rpx 15rpx 25rpx;
|
||||
}
|
||||
|
||||
.bottom-price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: baseline;
|
||||
color: #e70606;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.price-icon {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.price-content {
|
||||
font-size: 55rpx;
|
||||
}
|
||||
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.car-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.car-icon image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
margin-left: 25rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.car {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.car-num {
|
||||
position: relative;
|
||||
right: 10rpx;
|
||||
top: -10rpx;
|
||||
background: #e70606;
|
||||
color: white;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.car-add {
|
||||
background: linear-gradient(to right bottom, rgb(245, 74, 74), rgb(221, 5, 5) 70px);
|
||||
color: white;
|
||||
padding: 15rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user