|
@@ -0,0 +1,606 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="inner-box">
|
|
|
+ <!-- 收货人 -->
|
|
|
+ <view class="address-box" v-if="address==null" @click="openAddress()">
|
|
|
+ <view class="left">
|
|
|
+ <view class="name-box">
|
|
|
+ <text class="text name">添加收货地址</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="arrow-box">
|
|
|
+ <image src="/static/images/arrow_gray.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="address-box" v-if="address!=null" @click="openAddress()">
|
|
|
+ <view class="left">
|
|
|
+ <view class="name-box">
|
|
|
+ <text class="text name">{{address.realName}}</text>
|
|
|
+ <text class="text" v-if="address.phone!=null">{{address.phone}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="address">
|
|
|
+ {{address.address}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="arrow-box">
|
|
|
+ <image src="/static/images/arrow_gray.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 药品列表 -->
|
|
|
+ <view class="goods-list">
|
|
|
+ <view class="item">
|
|
|
+ <view class="img-box">
|
|
|
+ <image :src="item.imgUrl==''?'/static/images/drug.svg':item.imgUrl" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view>
|
|
|
+ <view class="name-box ellipsis2">
|
|
|
+ {{item.goodsName}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="price-num">
|
|
|
+ <view class="price">
|
|
|
+ <text class="unit">积分</text>
|
|
|
+ <text class="num">{{item.integral}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="num" >x1</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="other-info">
|
|
|
+ <view class="item">
|
|
|
+ <view class="left">
|
|
|
+ <text class="label">所需积分:</text>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <text class="text">{{item.integral}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="btn" v-if="item!=null" @click="payOrder()">立即兑换</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {getIntegralGoodsById,createOrder} from '@/api/store.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ addressId:null,
|
|
|
+ address:null,
|
|
|
+ orderId:null,
|
|
|
+ order:null,
|
|
|
+ item:null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.goodsId=option.goodsId;
|
|
|
+ var that=this;
|
|
|
+ uni.$on('updateAddress', (e) => {
|
|
|
+ console.log(e)
|
|
|
+ that.addressId=e.id;
|
|
|
+
|
|
|
+ that.address=e;
|
|
|
+ that.address.address=e.province+e.city+e.district+e.detail
|
|
|
+ })
|
|
|
+ this.getIntegralGoodsById();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getIntegralGoodsById(){
|
|
|
+ var data={goodsId:this.goodsId};
|
|
|
+ console.log(data)
|
|
|
+ getIntegralGoodsById(data).then(
|
|
|
+ res => {
|
|
|
+ if(res.code==200){
|
|
|
+ this.item=res.data;
|
|
|
+
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ openAddress(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages_user/user/address'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ payOrder(){
|
|
|
+ console.log(this.addressId)
|
|
|
+ if(this.addressId==null){
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "请选择收货地址",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+
|
|
|
+ }
|
|
|
+ var data = {
|
|
|
+ goodsId:this.goodsId,
|
|
|
+ addressId:this.addressId,
|
|
|
+ };
|
|
|
+ var that=this;
|
|
|
+ uni.showLoading();
|
|
|
+ createOrder(data).then(
|
|
|
+ res => {
|
|
|
+ if(res.code==200){
|
|
|
+ console.log(7898)
|
|
|
+ // uni.redirectTo({
|
|
|
+ // url:"./integralOrderPaySuccess?orderId="+res.order.orderId
|
|
|
+ // })
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ setTimeout(()=>{
|
|
|
+ uni.redirectTo({
|
|
|
+ url:"/pages_shopping/store/integralOrderList"
|
|
|
+ })
|
|
|
+ },200)
|
|
|
+
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rej => {}
|
|
|
+ );
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .inner-box{
|
|
|
+ padding: 20upx 20upx 140upx;
|
|
|
+ .address-box{
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: 171upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16upx;
|
|
|
+ background-image: url(/static/images/address_bg.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 30upx;
|
|
|
+ background-position: left bottom;
|
|
|
+ padding: 38upx 30upx 36upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left{
|
|
|
+ width: 92%;
|
|
|
+ .name-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .text{
|
|
|
+ font-size: 32upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 1;
|
|
|
+ &.name{
|
|
|
+ margin-right: 30upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .address{
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 42upx;
|
|
|
+ text-align:left;
|
|
|
+ margin-top: 23upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .arrow-box{
|
|
|
+ width: 12upx;
|
|
|
+ height: 23upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: cenetr;
|
|
|
+ justify-content: cenetr;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-list{
|
|
|
+ margin-top: 20upx;
|
|
|
+ padding: 0 30upx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 16upx;
|
|
|
+ .item{
|
|
|
+ padding: 30upx 0;
|
|
|
+ border-bottom: 1px solid #EDEEEF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .img-box{
|
|
|
+ width: 160upx;
|
|
|
+ height: 160upx;
|
|
|
+ margin-right: 30upx;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-box{
|
|
|
+ width: calc(100% - 190upx);
|
|
|
+ height: 160upx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ .name-box{
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 40upx;
|
|
|
+ .tag{
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 6upx;
|
|
|
+ height: 30upx;
|
|
|
+ background: linear-gradient(90deg, #C39A58 0%, #E2C99E 100%);
|
|
|
+ border-radius: 4upx;
|
|
|
+ margin-right: 10upx;
|
|
|
+ font-size: 22upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 30upx;
|
|
|
+ float: left;
|
|
|
+ margin-top: 7upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .spec{
|
|
|
+ margin-top: 10upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ .price-num{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .price{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .unit{
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 1.2;
|
|
|
+ margin-right: 4upx;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-size: 32upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sub-total{
|
|
|
+ height: 88upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .label{
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .unit{
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF6633;
|
|
|
+ line-height: 1.2;
|
|
|
+ margin-right: 4upx;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-size: 32upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF6633;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .other-info{
|
|
|
+ margin-top: 20upx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20upx;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0 30upx;
|
|
|
+ .title{
|
|
|
+ height: 80upx;
|
|
|
+ line-height: 80upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 2upx solid #eeeeee;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ height: 80upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ &:last-child{
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .left{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .label{
|
|
|
+ min-width: 140rpx;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #1b1b1b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .text{
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #1b1b1b;
|
|
|
+ }
|
|
|
+ .ic-close{
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 30rpx;
|
|
|
+ height:30rpx;
|
|
|
+ }
|
|
|
+ .ic-back{
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 15rpx;
|
|
|
+ height:30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-btn{
|
|
|
+ max-width: 200rpx;
|
|
|
+ padding: 0rpx 15rpx;
|
|
|
+ height: 48upx;
|
|
|
+ border-radius: 24upx;
|
|
|
+ line-height: 48upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #000;
|
|
|
+ border: 1upx solid #d8d8d8;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .remarks{
|
|
|
+ height: 88upx;
|
|
|
+ padding: 0 30upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16upx;
|
|
|
+ margin-top: 20upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ input{
|
|
|
+ width: 100%;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .input{
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .btn-box{
|
|
|
+ height: 140upx;
|
|
|
+ z-index: 9999;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0rpx 30upx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .btn{
|
|
|
+ width: 100%;
|
|
|
+ height: 88upx;
|
|
|
+ line-height: 88upx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 34upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #018C39;
|
|
|
+ border-radius: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-type{
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 192upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16upx;
|
|
|
+ margin-top: 20upx;
|
|
|
+ padding: 40upx 30upx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ .title{
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ image{
|
|
|
+ width: 44upx;
|
|
|
+ height: 44upx;
|
|
|
+ margin-right: 20upx;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ font-size: 30upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coupon{
|
|
|
+ height: 100%;
|
|
|
+ .empty{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 650rpx;
|
|
|
+ width: 100%;
|
|
|
+ image{
|
|
|
+ width: 280rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coupon-box{
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 80rpx 20rpx 80rpx;
|
|
|
+ height: 650rpx;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: flex-start;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .coupon-item{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ height:170rpx;
|
|
|
+ &:last-child{
|
|
|
+ margin-bottom: 0rpx;
|
|
|
+ }
|
|
|
+ .left{
|
|
|
+ color: #fff;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ width: 230rpx;
|
|
|
+ image{
|
|
|
+ position: absolute;
|
|
|
+ width: 230rpx;
|
|
|
+ height:170rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
+ .pic-num{
|
|
|
+ font-size: 20rpx;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: flex-start;
|
|
|
+ height:170rpx;
|
|
|
+ width: calc(100% - 230rpx);
|
|
|
+ padding: 0 17rpx 0 24rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .title{
|
|
|
+ width: 100%;
|
|
|
+ font-size: 0.3 * 100rpx;
|
|
|
+ color: #282828;
|
|
|
+ height: 0.93 * 100rpx;
|
|
|
+ line-height: 0.93 * 100rpx;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ }
|
|
|
+ .btns{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 0.2 * 100rpx;
|
|
|
+ color: #999;
|
|
|
+ height: 0.76 * 100rpx;
|
|
|
+ .btn{
|
|
|
+ width: 1.36 * 100rpx;
|
|
|
+ height: 0.44 * 100rpx;
|
|
|
+ border-radius: 0.22 * 100rpx;
|
|
|
+ font-size: 0.22 * 100rpx;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 0.44 * 100rpx;
|
|
|
+ background-color: #FF5C03;
|
|
|
+ .gray{
|
|
|
+ background-color: #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+
|