TmOct5/dtx_store
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
唐明明
2022-06-07 16:37:03 +08:00
parent b1e8d774ff
commit 1c6091371e
1706 changed files with 225309 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
pages/store/buy.vue Normal file
View File

@@ -0,0 +1,309 @@
<template>
<view class="content">
<!-- address -->
<block v-if="address != ''">
<view class="block address" @click="$Router.push({name: 'Address'})">
<uni-icons class="address-icon location" type="location-filled" size="24" color="#34CE98"></uni-icons>
<uni-icons class="address-icon arrows" type="right" size="20" color="#999"></uni-icons>
<view class="user"><text>{{address.name}}</text>{{address.mobile}}</view>
<view class="city">{{address.full_address}}</view>
</view>
</block>
<block v-else>
<view class="block address-new" @click="$Router.push({name: 'Address'})">
<uni-icons class="icon" type="plus" size="26" color="#34CE98"></uni-icons>添加收货地址
</view>
</block>
<!-- 订单产品 -->
<view class="block goods-box">
<block v-for="(item, index) in goodsInfo" :key="index">
<view class="goods-item">
<image class="order-cover" :src="item.items[0].cover" mode="aspectFill"></image>
<view class="order-title">{{item.items[0].title}}</view>
<view class="order-count">
<view class="order-price"><text>￥</text>{{item.items[0].price}}</view>
</view>
</view>
</block>
</view>
<!-- 订单信息 -->
<view class="block info-box">
<view class="info-item">
<view class="label">购买数量</view>
<uni-number-box class="info-number" :value="qty" :min="1" :max="999" @change="numberChange" />
</view>
<view class="info-item">
<view class="label">配送方式</view>
<view class="nowrap">快递</view>
</view>
<view class="info-item">
<view class="label">配送费用</view>
<view class="nowrap">{{freight == 0 ? '免费': freight}}</view>
</view>
</view>
<view class="block info-box">
<view class="info-item">
<view class="label">订单备注</view>
<textarea class="info-textarea" v-model="remark" placeholder="订单备注"></textarea>
</view>
</view>
<!-- footer -->
<view class="order-footer">
<view class="total">总计：<text>￥{{total}}</text></view>
<button class="btn" @click="subOrder">确认订单</button>
</view>
</view>
</template>
<script>
import { buy, verify } from '@/apis/interfaces/store'
export default {
data() {
return {
qty : 1,
goodsInfo : [],
total : 0,
freight : 0,
address : "",
remark : ""
};
},
computed:{
},
onShow(){
if(JSON.stringify(this.$store.getters.getAddress) !== '{}') this.address = this.$store.getters.getAddress
},
mounted() {
this.getBuy()
},
methods:{
getBuy(){
buy({
goods_sku_id: this.$Route.query.skuId,
qty: this.qty
}).then(res => {
this.address = res.address
this.freight = res.freight
this.total = res.total
this.goodsInfo = res.detail
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
numberChange(e){
this.qty = e
this.getBuy()
},
// 确认订单
subOrder(){
if(this.address === ""){
uni.showModal({
title : '提示',
content : '暂未添加收货地址，无法下单',
showCancel : true,
confirmText : '添加',
success : res => {
if(res.confirm){
this.$Router.push({name: 'Address'})
}
}
})
return
}
verify({
goods_sku_id: this.$Route.query.skuId,
qty : this.qty,
address_id : this.address.address_id,
remark : this.remark || ''
}).then(res => {
this.$store.commit('setAddress', {})
this.$Router.replace({
name: 'Pay',
params: {
orderNo: res.order_no,
price : res.total
}
})
})
}
}
}
</script>
<style lang="scss" scoped>
.content{
background: $window-color;
min-height: 100vh;
overflow: hidden;
padding-bottom: $padding + 80;
box-sizing: border-box;
}
.block{
background: white;
margin: $margin;
border-radius: $radius;
}
// 地址管理
.address{
position: relative;
padding: $padding 80rpx $padding 90rpx;
font-size: $title-size-lg;
.user{
font-size: $title-size;
line-height: 40rpx;
color: $text-gray;
text{
color: black;
max-width: 200rpx;
display: inline-block;
margin-right: $margin/2;
}
}
.city{
padding-top: $padding/2;
font-size: $title-size-sm;
color: $text-gray;
line-height: 36rpx;
}
.address-icon{
position: absolute;
top: 50%;
&.location{
margin-top: -26rpx;
left: $margin - 10;
}
&.arrows{
margin-top: -20rpx;
right: $margin - 10;
}
}
}
.address-new{
padding: $padding;
text-align: center;
height: 90rpx;
line-height: 90rpx;
color: $main-color;
.icon{
vertical-align: middle;
margin-bottom: 8rpx;
margin-right: 10rpx;
}
}
// 订单列表
.goods-item{
display: flex;
align-items: center;
padding: $padding;
.order-cover{
vertical-align: top;
width: 128rpx;
height: 128rpx;
}
.order-title{
@extend .ellipsis;
text-align: left;
flex: 1;
padding-left: $margin;
font-size: 28rpx;
line-height: 40rpx;
}
.order-count{
text-align: right;
padding-left: $margin;
line-height: 40rpx;
.order-price{
font-size: 30rpx;
font-weight: bold;
color: $text-price;
&>text{
font-size: 24rpx;
}
}
.order-sum{
font-size: $title-size-sm;
color: $text-gray;
}
}
}
// 订单信息
.info-box{
.info-item{
position: relative;
padding: $padding $padding $padding 200rpx;
font-size: $title-size-m;
min-height: 40rpx;
text-align: right;
.label{
position: absolute;
left: $margin;
top: $margin;
color: $text-gray;
}
.info-textarea{
height: 120rpx;
width: 100%;
text-align: left;
font-size: $title-size-m;
}
&::after{
position: absolute;
left: $margin;
right: $margin;
content: " ";
height: 1rpx;
bottom: 0;
background: $border-color;
}
&:last-child::after{
display: none;
}
}
}
// footer
.order-footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: $padding;
background: white;
border-radius: $radius $radius 0 0;
box-shadow: 0 0 10rpx 10rpx rgba($color: #000000, $alpha: .02);
z-index: 99;
display: flex;
.total{
line-height: 80rpx;
font-size: $title-size-lg;
font-weight: bold;
width: calc(100% - 300rpx - #{$margin});
color: $text-gray;
font-weight: normal;
@extend .nowrap;
text{
color: $text-price;
font-size: $title-size-lg;
font-weight: bold;
}
}
.btn{
margin-left: $margin;
width: 300rpx;
height: 80rpx;
padding: 0;
line-height: 80rpx;
font-size: $title-size-lg;
border-radius: 40rpx;
background: $main-color;
color: white;
font-weight: bold;
&::after{
display: none;
}
}
}
</style>