qd_81fang/pages/intergalShop/confirm.vue

<template>
    <block>
        <view class="content">
            <view class="fui-cell-group" style="margin: 0 0px 10px 0px; border-radius: 10px">
                <view class="fui-cell-group" @tap="wx_address" >
                    <view class="fui-cell" hover-class="none">
                        <image class="fui-cell-icon" src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/f04e851e4d2ff9f050a9d080a89d49f2.png"></image>
                        <view class="fui-cell-text textl info">
                            <view v-if="addressData.mobile">
                                <text class="name">{{ addressData.name }}</text>
                                <text>{{ addressData.mobile }}</text>
                            </view>
                            <view class="adress" v-if="addressData.mobile">
                                {{ addressData.province.name + ' ' + addressData.city.name + ' ' + addressData.area.name + ' ' + addressData.address }}
                            </view>
                            <view class="text no-address" v-if="!addressData.phone">选择收货地址</view>
                        </view>
                        <view class="fui-cell-remark"></view>
                    </view>
                </view>

            </view>
            <view class="p-common iflex goodsInfo">
                <image class="p-goodsImg" :src="info.image" mode="aspectFit"></image>
                <view class="p-goods">
                    <text class="p-goodsName bold">{{ info.title }}</text>
                    <text class="p-goodsTips" v-if="info.good_info">{{ info.good_info }}</text>
                    <view class="p-goodsTips" v-if="select_sku.length > 0">{{ select_sku }}</view>
                </view>
            </view>

            <view class="p-common radius">
                <view class="ibetween p-list">
                    <text>商品积分：</text>
                    <text class="p-con">{{ info.sales_price }} 积分</text>
                </view>
                <view class="ibetween p-list" v-if="receive_type == 2">
                    <text>运费：</text>
                    <text class="p-con">￥{{ !first ? info.freight : 0 }}</text>
                </view>

                <view class="ibetween p-list" v-if="select_sku.length > 0">
                    <text>规格</text>
                    <text class="p-con">{{ select_sku }}</text>
                </view>

                <view class="ibetween p-list icenterY">
                    <text>支付方式：</text>

                    <!-- 上门自提 -->
        <!--            <block v-if="receive_type == 1">
                        <text class="p-con">
                            <text v-if="info.price">现金+</text>
                            积分支付
                        </text>
                    </block> -->

                    <!-- 快递配送 -->
                    <!-- <block v-if="receive_type == 2"> -->
					<block >
                        <text class="p-con">
                        
                            积分支付
                        </text>
                    </block>
                </view>
                <view class="ibetween p-list">
                    <text>实际支付：</text>

       

                    <!-- 快递配送 -->
                    <!-- <block v-if="receive_type == 2"> -->
					<block >
                        <text class="p-con">
                            <text class="p-red">
                                {{ info.sales_price }}
                            </text>
                            积分
                        </text>
                    </block>
                </view>
            </view>
        </view>

        <view class="botBox">
            <view class="botPrice" >
                <view>合计:</view>
                <view><text v-if="info.price">￥</text></view>
                <view>
                    <text v-if="info.price">{{ info.price }}+</text>
                    {{ info.sales_price }}
                </view>

                <view>积分</view>
            </view>



            <view class="botBtn" @tap="confirm">确定兑换</view>
        </view>
    </block>
</template>

<script>
var app = getApp();
// var a = app.globalData.requirejs('core');
var running = false;
// yidu_tc/pages/jifen/integral/pay/pay.js
export default {
    data() {
        return {
            addressData: {
              
            },
			runing:false,

            show: false,
            message: '',
            first: 0,

            // 判断是否是首单用户
            send_type: 'selftake',

            centerInfo: {
                name: '',
                phone: ''
            },

            phone: '',
            select_sku: '',
            receive_type: '',
            consigner: '',

            info: {
             
            },

            config: {
                color: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
		this.id = options.id;
		
		this.getinfo()
    },

  
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
		async getinfo() {
			// 获取商品详情
			let data = await this.$api.request('/order/create','POST',{
				id:this.id
			});
			this.info = data.product[0];
			this.info.delivery_id = data.delivery[0].id;
		},
		
        callPhone(e) {
            var phone = e.currentTarget.dataset.phone;

            if (!phone) {
                uni.showToast({
                    title: '该商家暂无电话!',
                    icon: 'none'
                });
            } else {
                uni.makePhoneCall({
                    phoneNumber: phone
                });
            }
        },

        getCenterInfo() {
            // centerInfo
            var that = this;
            var id = that.id;
            a.get(
                'regionintegral/center',
                {
                    uid: app.globalData.getCache('userinfo').uid,
                    id: id
                },
                function (t) {
                    if (t.code == 0) {
                        that.setData({
                            centerInfo: t.info
                        });
                    } else {
                        a.alert(t.msg);
                    }
                },
                !that.show
            );
        },

        /**
         * 设置默认配送方式
         */
        defaultDelivery(url, res) {
			
        },

        /**
         * 切换方式
         */
        dispatchtype(r) {
            let ta = this;
            let td = ta;
            ta.setData({
                send_type: a.pdata(r).send_type,
                receive_type: a.pdata(r).receive_type
            });
        },

        getPhoneNumber: function (e) {
            app.globalData.getPhoneNumber(e, this);
        },

        dataChange: function (t) {
            let that = this;
            let message = that.message;
            let consigner = that.consigner;
            let phone = that.phone;
            switch (t.target.id) {
                case 'message':
                    //留言
                    message = t.detail.value;
                    break;

                case 'consigner':
                    consigner = t.detail.value;
                    break;

                case 'phone':
                    phone = t.detail.value;
                    break;
            }

            this.setData({
                message: message,
                consigner: consigner,
                phone: phone
            });
        },

        wx_address() {
			wx.navigateTo({
				url:'/pages/address/address?source=1'
			})
           
        },

        // judge(){
        //   var that = this
        //   a.get('Integral/is_one', {
        //     uid: app.getCache('userinfo').uid
        //   }, function(res){
        //     if(res.code == 0){
        //       that.setData({
        //         first: res.info
        //       })
        //       that.getinfo()
        //     }
        //   })
        // },
        async confirm() {
            // 确认订单
            var that = this;
			
			var id = this.id;
			
			var addressId = this.addressData.id||''
			
			if(!addressId){
				uni.showToast({
				    title: '请先选择收货地址!',
				    icon: 'none'
				});
				return false
			}
           
		   if(this.runing){
		   }
		   
		   this.runing = true
		   
		   let data = await this.$api.request('/order/submitIntegral','POST',{
				city_id: this.addressData.city.id,
				address_id: this.addressData.id,
				delivery_id: this.info.delivery_id,
				coupon_id: 0,
				remark: '积分换购',
				product_id: this.info.id,
				spec: this.info.spec,
				number: 1,
				cart: '',
				flash_id: 0,
				score: this.info.sales_price
		   });
		   
		   
		   this.runing = false
		   
		   if(data){
			uni.navigateTo({
				url:'/pages/order/order?state=2'
			});
		   }
        },

   
        selectAddress() {
            // 选择收货地址
            const that = this;
            app.globalData.select_address(function (r) {
                that.setData({
                    address: r
                });
            });
        },


        msgInput(e) {
            // 留言内容
            this.setData({
                message: e.detail.value
            });
        }
    }
};
</script>
<style>
/* yidu_tc/pages/jifen/integral/pay/pay.wxss */
page {
    background: #f6f6f6;
    font-size: 28rpx !important;
}
.content {
    padding: 20rpx 20rpx 132rpx;

    box-sizing: border-box;
}
.p-common {
    border-radius: 20rpx;
    padding: 26rpx 30rpx;
    margin-bottom: 20rpx;
    background: white;
    /* width: calc(100% - 132rpx); */
    position: relative;
}
.shippingType {
    font-size: 28rpx;
    color: #333;
}
.shopWrap {
    display: flex;
    align-items: center;
}
.p-common input {
    width: 74%;
}
.p-img {
    height: 44rpx;
    width: 44rpx;
    margin-right: 8rpx;
    color: #333;
    vertical-align: top;
}
.shareicon {
    position: absolute;
    right: 30rpx;
    top: calc(50% - 8px);
}
.p-goods {
    width: 72%;
}
.p-goodsImg {
    height: 128rpx;
    width: 128rpx;
    margin-right: 18rpx;
    flex-shrink: 0;
}
.p-goodsName {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    font-size: 32rpx;
}
.p-goodsTips {
    color: #666;
    font-size: 24rpx;
}
.p-con {
    font-size: 24rpx;
    color: #666;
}
.p-list {
    border-bottom: 1px solid #f2f2f2;
    padding: 26rpx 26rpx;
}
.p-list:first-child {
    padding-top: 0;
}
.p-list:last-child {
    border: none;
}
.p-red {
    color:#FB4C6F;
    font-size: 28rpx;
}
.isFixed {
    position: fixed;
    bottom: 32rpx;
    z-index: 999;
}
.p-total {
    width: 50%;
    text-align: center;
}
.p-btn {
    border: none;
    background: #f62e2e;
    color: white;
    height: 100%;
    border-radius: 0 20rpx 20rpx 0;
    width: 50%;
}
.p-common:last-child {
    padding: 0;

    margin-bottom: 0;
}
.bold {
    font-weight: bold;
}
input {
    margin-top: -4rpx;
}

.nav {
    height: 50rpx;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 20rpx 20rpx;
}

.default {
    /* line-height: 90rpx; */
    text-align: center;
    -webkit-flex: 1;

    color: #333;
    font-weight: 700;
    font-size: 25rpx;
    padding: 8rpx 12rpx;
    background: #eeeeee;
    border-radius: 10rpx;
    margin-left: 20rpx;
}

.red {
    /* line-height: 90rpx; */
    text-align: center;
    color: #ff6b05;
    font-size: 25rpx;

    padding: 8rpx 12rpx;
    background: #ffefe7;
    border-radius: 10rpx;
    margin-left: 20rpx;
}
.switch {
    float: right;
    zoom: 90%;
    overflow: hidden;
}

.btn {
    padding: 0 60rpx;
    border-radius: 0;
    height: 100rpx;
    line-height: 100rpx;
    margin: 0;
}

.fui-list-inner .sure_subtitle {
    /* line-height: 36rpx; */
    position: relative;
    font-size: 30rpx;
    color: #444;
    max-height: 68rpx;
    overflow: hidden;
    width: 460rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 20rpx;
}

.fui-list-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    display: block;
    margin-top: -60rpx;
}

.fui-number {
    height: 40rpx;
    width: 130rpx;
}

.minus,
.plus {
    width: 40rpx;
    height: 40rpx;
    font-size: 40rpx;
    line-height: 40rpx;
}

.fui-list-angle {
    margin-right: 0;
    text-align: right;
    word-break: normal;
    margin-top: 40px;
}

.fui-cell-text .shop_name {
    font-size: 33rpx;
}
.cart-option .choose-option {
    font-size: 24rpx;
    color: #ccc;
}
.fui-list-angle .price {
    color: #e02e24;
    font-size: 24rpx;
}
.fui-list-angle view {
    font-size: 24rpx;
    color: #444;
}

page {
    background: #f2f2f2;
}
.create_btn {
    background: #f5cb3b;
    font-size: 34rpx;
    color: #222222;
    border: 0;
}
.create_btn::after {
    border: 0;
    border-radius: 0;
}
.coupon_box {
    padding-left: 5rem;
    position: relative;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 0.5rem;
    height: 3.6rem;
    padding-bottom: 10px;
}
.coupon_box:after {
    content: '  ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 200%;
    height: 200%;
    border: 1px solid #f45068;
    border-radius: 10rpx;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
}
.coupon_price text {
    color: #f45068;
}
.coupon_price {
    text-align: left;
    height: 3rem;
    margin-left: -4.5rem;
    float: left;
    padding-top: 0.3rem;
    padding-right: 0.5rem;
}

.coupon_price .price02 {
    font-size: 80rpx;
    font-weight: bold;
}
.coupon_price .price01 {
    font-size: 38rpx;
}
.coupon_time,
.coupon_con {
    font-size: 28rpx;
    color: #666;
    height: 44rpx;
    line-height: 44rpx;
    position: relative;
    right: 0px;
    margin-left: 10%;
}
.coupon_time {
    padding-top: 20rpx;
}
.cannel_btn {
    position: relative;
    width: calc(70% + 5rem);
    margin: 0 auto;
    margin-bottom: 0.5rem;
    height: 2.6rem;
    line-height: 2.6rem;
    text-align: center;
}
.cannel_btn:after {
    content: '  ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 200%;
    height: 200%;
    border: 1px solid #999;
    border-radius: 10rpx;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
}
.cannel_btn text {
    font-size: 32rpx;
    color: #8c8c8c;
}
.coupon_arrow {
    background: url('http://ddfwz.sssvip.net/asmce/diancan/right_arrow.png') no-repeat right center;
    background-size: 36rpx 36rpx;
}
.a-li {
    background: #fff url('http://ddfwz.sssvip.net/asmce/diancan/pt-ico1.png') no-repeat 95% center;
    background-size: 15rpx auto;
    padding: 23.4rpx 3%;
    text-align: left;
}
.a-li02 {
    background: #fff url('http://ddfwz.sssvip.net/asmce/diancan/pt-ico11.png') no-repeat 95% center;
    background-size: 28rpx auto;
    padding: 23.4rpx 3%;
    text-align: left;
}
/*自提*/
.join_g_li {
    background: #fff;
    position: relative;
}
.join_g_li .join_li {
    height: 3rem;
    line-height: 3rem;
    padding-left: 3.4rem;
    position: relative;
    font-size: 0.8rem;
}
.join_g_li .join_li:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    border-bottom: 2rpx solid #e6e6e6;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.join_g_li .join_li text {
    display: block;
    width: 4rem;
    margin-left: -4rem;
    float: left;
    text-align: right;
    font-size: 0.8rem;
    color: #666666;
}
.join_g_li .join_li input {
    height: 3rem;
    line-height: 3rem;
    margin-left: 0.5rem;
}
.join_g_li .join_li .section picker {
    margin-left: 0.5rem;
}
.bottom_form_btn {
    width: 260rpx;
    height: 100rpx;
    background: #000;
    position: fixed;
    bottom: 0;
    right: 0;
    opacity: 0;
    z-index: 999999999999999999999;
}
.join_g_li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    border-top: 2rpx solid #e6e6e6;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.getPhone_button {
    width: 120rpx;
    height: 50rpx;
    font-size: 22rpx;
    float: right;
    margin-top: -36px;
    padding: 0;
    color: #ff6b05;
    background: #fff;
    line-height: 50rpx;
    right: 10px;
    border: 1px solid #ff6b05;
}

.goodsInfo {
    margin-bottom: 0;
    border-radius: 0rpx 0rpx 0 0;
}

.radius {
    border-radius: 0 0 20rpx 20rpx;
}

.fw700 {
    font-weight: 700;
}
.fw500 {
    color: #fe6000;
}

.botBox {
    height: 112rpx;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #eee;
    background: #fff;
    width: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18rpx 0 37rpx;
    box-sizing: border-box;
}

.botPrice {
    display: flex;
    align-items: center;
}

.botPrice > view:nth-child(1) {
    font-size: 25rpx;
    color: #000000;
    margin-right: 12rpx;
}

.botPrice > view:nth-child(2) {
    font-size: 25rpx;
    color:#FB4C6F;
}

.botPrice > view:nth-child(3) {
    font-size: 38rpx;
    color:#FB4C6F;
    font-weight: 700;
}
.botPrice > view:nth-child(4) {
    font-size: 25rpx;
    color: #FB4C6F;
}

.botBtn {
    width: 203rpx;
    height: 86rpx;
    text-align: center;
    line-height: 86rpx;
    color: #fff;
    border-radius: 40rpx;
    background: #FB4C6F;
    font-size: 28rpx;
}

.busInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 26rpx;
    padding-bottom: 20rpx;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #eee;
}

.busInfo > view {
    font-size: 28rpx;
    color: #000;
    font-weight: 700;
}

.busInfo > image {
    width: 30rpx;
}
.fui-cell-group .fui-cell, .fui-cell-group08 .fui-cell {
  position: relative;
  padding: 29rpx;
  display: flex;
  align-items: center;
  -moz-transition-duration: 300ms;
  transition-duration: 300ms;
  transition-property: background-color;
  border-bottom: 1px solid #f2f2f2;
}
.fui-cell-group .fui-cell .fui-cell-icon {
  margin-right: 8rpx;
  width: 44rpx;
  height: 44rpx;
  color: #999;
  text-align: center;
}
.fui-cell-group .fui-cell .fui-cell-text {
  -webkit-flex: 1;
  flex: 1;
  color: #333;
  font-size: 28rpx;
}
.fui-cell-group, .fui-cell-group02, .fui-cell-group08 {
  margin-top: 0rpx;
  background-color: #fff;
  line-height: 1.4;
  font-size: 30rpx;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.iflex{
		display: flex;
	}
	
	.icentery,.icenterY{display: flex;align-items: center;flex-direction:row;}
	
	.ibetween{display: flex;justify-content: space-between}

</style>