123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232 |
- <template>
- <view class="cart-pages">
- <view class="cart-bar">
- <view>
- <u-image height="40rpx" width="40rpx" src="/static/position.png"></u-image>
- </view>
- <view class="position">
- <view class="address">陕西省西安市未央区华帝金座A座6楼</view>
- <view>王明 1456465455</view>
- </view>
- <view @click="editAddress">
- <u-image height="50rpx" width="50rpx" src="/static/edit.png"></u-image>
- </view>
- </view>
- <view class="goods-list">
- <!-- 商品列表 -->
- <view class="goods-item" v-for="(item,index) in goodsList" :key="item.id">
- <view class="goods-imgs">
- <u-image border-radius="12" width="158rpx" height="140rpx" :src="item.goods.homeImage"></u-image>
- </view>
- <view class="goods-info">
- <view class="good-name">{{item.goods.name}}</view>
- <view class="goods-price">
- <view>
- <text>{{item.goods.sellGold}}</text>
- <u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
- </view>
- <view>×{{item.buyQty}}</view>
- </view>
- </view>
- </view>
- <!-- 总计 -->
- <view class="goods-heji">
- <view>
- <view>商品合计:</view>
- <view class="heji">
- <text>{{totalPrice}}</text>
- <u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
- </view>
- </view>
- <view>
- <view>运费:</view>
- <view>免运费</view>
- </view>
- </view>
- </view>
- <view class="cart-submit">
- <view>
- <view>总计:<text>{{totalPrice}}</text></view>
- <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
- </view>
- <view>
- <u-button size="mini" :custom-style="toOrderButton" type="error" @click="toPay">确认支付</u-button>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- findAddressBycustomerNo
- } from '@/api/receiveAddress.js'
- export default {
- data() {
- return {
- toOrderButton: {
- borderRadius:'100rpx',
- fontSize:'30rpx',
- width: '180rpx',
- height: '60rpx'
- },
- goodsList: []
- };
- },
- onLoad() {
- this.goodsList = this.$store.state.vuex_toOrderList
- this.getLocation()
- },
- computed: {
- totalPrice() {
- let total = 0
- this.goodsList.map(item => {
- total = total + item.buyQty * item.goods.sellGold
- })
- return total
- }
- },
- methods: {
- // 获取用户位置
- getLocation() {
- findAddressBycustomerNo({customerNo:'12313'}).then(res => {
- console.log(res)
- })
- },
- //修改收货地址信息
- editAddress(){
- uni.navigateTo({
- url:"/pages/toOrder/editAddress"
- })
- },
- // 支付
- toPay(){
-
- }
- },
- }
- </script>
- <style lang="scss">
- page{
- height: 100%;
- }
- .cart-pages{
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- .cart-bar{
- background: #FFFFFF;
- border-bottom: 1px solid #F8F8F8;
- border-top: 10upx solid #F8F8F8;
- display: flex;
- align-items: center;
- padding:15upx 20upx;
- .position{
- flex-grow: 1;
- }
- > view{
- padding: 10upx;
- .address{
- padding: 5upx 0;
- }
- &:last-child{
- padding: 0 20upx;
- }
- }
- }
- .goods-list{
- padding: 20upx 0;
- flex-grow: 1;
- overflow: auto;
- .goods-class-box{
- background: #FFFFFF;
- box-shadow: 1px 1px 3px #eee;
- margin-bottom: 20upx;
- }
-
- .goods-item{
- padding: 20upx 40upx;
- display: flex;
- align-items: center;
- border-bottom: 1px solid #F8F8F8;
- background: #fff;
- &:last-child{
- border: 0;
- }
- .goods-imgs{
- position: relative;
- }
- .goods-info{
- flex-grow: 1;
- padding-left: 20upx;
- .good-name{
- font-weight: bold;
- word-break: break-all;
- }
- }
- .goods-price{
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding-top: 20upx;
- >view{
- &:first-child{
- display: flex;
- align-items: center;
- text{
- color: red;
- font-size: 35upx;
- margin-right: 6upx;
- font-weight: bold;
- }
- }
- }
- }
- }
- }
- .goods-heji{
- padding: 20upx 40upx;
- background: #FFFFFF;
- box-shadow: 1px 1px 3px #eee;
- margin-top: 20upx;
- >view{
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10upx 0;
- .heji{
- display: flex;
- align-items: center;
- text{
- color: red;
- margin-right: 6upx;
- font-size: 35upx;
- font-weight: bold;
- }
- }
- }
- }
- .cart-submit{
- padding: 20upx 30upx;
- background: #FFFFFF;
- box-shadow: 1px 1px 3px #eee;
- border-top: 1px solid #eee;
- display: flex;
- align-items: center;
- justify-content: space-between;
- > view{
- &:first-child{
- display: flex;
- align-items: center;
- text{
- color: red;
- font-size: 40upx;
- margin-right: 6upx;
- font-weight: bold;
- }
- }
- }
- }
- }
- </style>
|