|
|
@@ -1,8 +1,564 @@
|
|
|
<template>
|
|
|
+ <view class="good-list">
|
|
|
+ <view class="good flex">
|
|
|
+ <image :src="item.image" mode="" class="good-image"></image>
|
|
|
+ <view class="right">
|
|
|
+ <view class="good-name ">
|
|
|
+ <view class="clamp2">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="good-key">
|
|
|
+ {{item.keyword}}
|
|
|
+ </view>
|
|
|
+ <view class="good-price flex" v-if="item.specifications">
|
|
|
+ <view class="price">
|
|
|
+ ￥{{item.price}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="attr-list" v-if="item.specifications">
|
|
|
+ <text>选择规格分类</text>
|
|
|
+ <view class="item-list flex">
|
|
|
+ <text class="tit " @click="key=ind" :class="{selected:key==ind}"
|
|
|
+ v-for="(item,ind) in item.specifications">
|
|
|
+ {{item.attr_name}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="yt-list">
|
|
|
+ <view class="yt-list-cell b-b" @click="payType='weixin'">
|
|
|
+ <view class="cell-tit flex">
|
|
|
+ <image class="orderIcon" src="../../static/icon/orderWx.png" mode="widthFix"></image>
|
|
|
+ <text class="margin-l-10">微信支付</text>
|
|
|
+ </view>
|
|
|
+ <image class="checked" v-if="payType=='weixin'" src="../../static/icon/addressIconXz.png"
|
|
|
+ mode="widthFix"></image>
|
|
|
+ <view v-else class="noChecked"></view>
|
|
|
+ </view>
|
|
|
+ <view class="yt-list-cell b-b" @click="payType='yue'">
|
|
|
+ <view class="cell-tit flex">
|
|
|
+ <image class="orderIcon" src="../../static/icon/ye.png" mode="widthFix"></image>
|
|
|
+ <text class="margin-l-10">余额({{now_money}})</text>
|
|
|
+ </view>
|
|
|
+ <image class="checked" v-if="payType=='yue'" src="../../static/icon/addressIconXz.png" mode="widthFix">
|
|
|
+ </image>
|
|
|
+ <view v-else class="noChecked"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="footer">
|
|
|
+ <view class="price-content">
|
|
|
+ <text>支付金额</text>
|
|
|
+ <text class="price-tip">￥</text>
|
|
|
+ <text class="price" v-if="item.specifications">{{ item.specifications[key].price }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="submit" :class="{submitNo:payLoding}" @click="payLoding?'':cardAdd()">提交订单</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+ waterDetail
|
|
|
+ } from '@/api/water.js';
|
|
|
+ import {
|
|
|
+ cartAdd
|
|
|
+ } from '@/api/product.js';
|
|
|
+ import {
|
|
|
+ confirm,
|
|
|
+ createOrderkey,
|
|
|
+ orderPay
|
|
|
+ } from '@/api/order.js';
|
|
|
+ import {
|
|
|
+ getUserInfo
|
|
|
+ } from '@/api/user.js';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ //详情
|
|
|
+ item: {},
|
|
|
+ key: 0, //选中的数据对象
|
|
|
+ payLoding: false,
|
|
|
+ payType: 'weixin',
|
|
|
+ now_money: '' //微信余额
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ this.getGoodList();
|
|
|
+ },
|
|
|
+ onLoad: function(option) {
|
|
|
+ this.id = option.id
|
|
|
+ this.getGoodList();
|
|
|
+ this.userinfo();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 加载用户基础信息
|
|
|
+ userinfo() {
|
|
|
+ getUserInfo({}).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ this.now_money = data.now_money;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 加载数据
|
|
|
+ getGoodList(source) {
|
|
|
+ const that = this;
|
|
|
+ waterDetail({
|
|
|
+ id: this.id
|
|
|
+ })
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ that.item = data.storeInfo;
|
|
|
+ console.log(data);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 添加到购物车
|
|
|
+ async cardAdd() {
|
|
|
+ let obj = this;
|
|
|
+ // 判断是否余额不足
|
|
|
+ if (obj.payType == 'yue' && +obj.now_money < obj.payPrice) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '账户余额不足！',
|
|
|
+ showCancel: false,
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: '创建订单中',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ // 支付中
|
|
|
+ obj.payLoding = true;
|
|
|
+ try {
|
|
|
+ // 创建购物车传值对象
|
|
|
+ let cardData = {
|
|
|
+ cartNum: obj.item.specifications[obj.key].num, //商品数量
|
|
|
+ productId: obj.item.product_id, //商品编号
|
|
|
+ certificate_id: obj.item.id, //水票id
|
|
|
+ new: 1
|
|
|
+ };
|
|
|
+ // 加入购物车
|
|
|
+ const cartDetail = await cartAdd(cardData);
|
|
|
+ // 获取订单Key
|
|
|
+ const orderGet = await confirm({
|
|
|
+ cartId: cartDetail.data.cartId+'',
|
|
|
+ certificate_id: obj.item.id, //水票id
|
|
|
+ });
|
|
|
+ // 创建订单
|
|
|
+ const {
|
|
|
+ data,
|
|
|
+ status,
|
|
|
+ msg
|
|
|
+ } = await createOrderkey({
|
|
|
+ payType: obj.payType, //支付类型 weixin-微信 yue-余额
|
|
|
+ certificate_id: obj.item.id, //水票id
|
|
|
+ // #ifdef H5
|
|
|
+ from: 'weixin', //来源
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ from: 'routine', //来源
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ from: 'app', //来源
|
|
|
+ // #endif
|
|
|
+ }, orderGet.data.orderKey)
|
|
|
+ // 判断是否支付失败
|
|
|
+ if (data.status == 'ORDER_EXIST') {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: msg,
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ uni.hideLoading();
|
|
|
+ obj.payLoding = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 判断是否为余额支付
|
|
|
+ if (obj.payType == 'yue') {
|
|
|
+ if (status == 200 && data.status == 'SUCCESS') {
|
|
|
+ obj.paySuccessTo();
|
|
|
+ } else {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: msg,
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ uni.hideLoading();
|
|
|
+ obj.payLoding = false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 订单支付创建
|
|
|
+ const order = orderPay({
|
|
|
+ uni: data.result.orderId,
|
|
|
+ // #ifdef H5
|
|
|
+ from: 'weixin', //来源
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ from: 'routine', //来源
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ from: 'app', //来源
|
|
|
+ // #endif
|
|
|
+ paytype: obj.payType //支付类型 weixin-微信 yue-余额
|
|
|
+ })
|
|
|
+ obj.successOrder(order)
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: e.message||e.msg,
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ obj.payLoding = false;
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //订单支付创建成功回调处理
|
|
|
+ successOrder(e) {
|
|
|
+ const obj = this;
|
|
|
+ // 判断是否微信小程序支付
|
|
|
+ if (obj.payType == 'weixin') {
|
|
|
+ // #ifdef H5 || MP
|
|
|
+ let da = e.data.result.jsConfig;
|
|
|
+ let data = {
|
|
|
+ nonceStr: da.nonceStr,
|
|
|
+ package: da.package,
|
|
|
+ signType: da.signType,
|
|
|
+ paySign: da.paySign,
|
|
|
+ success: function(res) {
|
|
|
+ obj.paySuccessTo();
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/order/order?state=0'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ data.timestamp = da.timestamp;
|
|
|
+ weixinObj.chooseWXPay(data);
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ data.timeStamp = da.timestamp;
|
|
|
+ wx.requestPayment(data);
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP
|
|
|
+ console.log(e.data.result.jsConfig, '返回数值');
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: 'wxpay',
|
|
|
+ orderInfo: e.data.result.jsConfig,
|
|
|
+ success(e) {
|
|
|
+ obj.paySuccessTo();
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ console.log(e, '支付失败');
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/order/order?state=0'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+ // #ifdef APP
|
|
|
+ if (obj.payType == 'ali') {
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: 'alipay',
|
|
|
+ orderInfo: e.data.result.jsConfig,
|
|
|
+ success(e) {
|
|
|
+ obj.paySuccessTo();
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ console.log(e, '支付失败');
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/order/order?state=0'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ uni.hideLoading();
|
|
|
+ obj.payLoding = false;
|
|
|
+ },
|
|
|
+ //支付成功调用方法
|
|
|
+ paySuccessTo(){
|
|
|
+ const that = this;
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '购买成功是否继续购买',
|
|
|
+ cancelText: '返回',
|
|
|
+ confirmText: '确定',
|
|
|
+ success: res => {
|
|
|
+ if(res.cancel){
|
|
|
+ uni.reLaunch({
|
|
|
+ url:'/pages/home/index'
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ that.userinfo();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: () => {},
|
|
|
+ complete: () => {}
|
|
|
+ });
|
|
|
+ that.payLoding = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .good-list {
|
|
|
+ padding: 20rpx 28rpx;
|
|
|
+ width: 750rpx;
|
|
|
+
|
|
|
+ .good {
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .good-image {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ background-color: #eee;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ height: 180rpx;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ flex-shrink: 1;
|
|
|
+
|
|
|
+ .good-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .good-key {
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ padding-left: 20rpx
|
|
|
+ }
|
|
|
+
|
|
|
+ .good-price {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF1A1A;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .attr-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: $font-color-base;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .item-list {
|
|
|
+ padding: 20rpx 0 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ min-width: 200rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #eee;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ font-size: $font-base;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selected {
|
|
|
+ background: #FCEFF1;
|
|
|
+ color: $color-red;
|
|
|
+ border: 1px solid $color-red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 995;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 90rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 30rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ z-index: 998;
|
|
|
+ color: $font-color-base;
|
|
|
+ box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .price-content {
|
|
|
+ padding-left: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-tip {
|
|
|
+ color: $font-color-base;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ color: $color-red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: $color-red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 280rpx;
|
|
|
+ height: 100%;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ background: $bg-green-gradual;
|
|
|
+
|
|
|
+ &.submitNo {
|
|
|
+ background-color: $font-color-disabled;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .yt-list {
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ .yt-list-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10rpx 30rpx 10rpx 40rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .checked,
|
|
|
+ .noChecked {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .noChecked {
|
|
|
+ border: 1px solid $font-color-light;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.cell-hover {
|
|
|
+ background: #fafafa;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.b-b:after {
|
|
|
+ left: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cell-icon {
|
|
|
+ height: 32rpx;
|
|
|
+ width: 32rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32rpx;
|
|
|
+ background: #f85e52;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
+
|
|
|
+ &.hb {
|
|
|
+ background: #ffaa0e;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.lpk {
|
|
|
+ background: #3ab54a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cell-more {
|
|
|
+ align-self: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ margin-right: -10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cell-tit {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ margin-right: 10rpx;
|
|
|
+
|
|
|
+ .orderIcon {
|
|
|
+ width: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cell-tip {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+
|
|
|
+ &.disabled {
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: $base-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.red {
|
|
|
+ color: $base-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.desc-cell {
|
|
|
+ .cell-tit {
|
|
|
+ max-width: 90rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ text-align: right;
|
|
|
+ font-size: $font-base;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
