|
|
@@ -105,7 +105,8 @@
|
|
|
<td>
|
|
|
<div class="prize-info">
|
|
|
<div class="prize-img-container">
|
|
|
- <el-image :src="data.imgUrl" v-if="data.imgUrl" :preview-src-list="imgUrls.length==0?[data.imgUrl]:imgUrls"
|
|
|
+ <el-image :src="data.imgUrl" v-if="data.imgUrl"
|
|
|
+ :preview-src-list="imgUrls.length == 0 ? [data.imgUrl] : imgUrls"
|
|
|
class="prize-img"></el-image>
|
|
|
</div>
|
|
|
<div class="prize-detail-info">
|
|
|
@@ -121,25 +122,28 @@
|
|
|
<el-input-number @change="changeCount" size="mini" v-model="skuCount" :step="1" :min="1"
|
|
|
step-strictly></el-input-number>
|
|
|
</td>
|
|
|
- <td style="text-align: center">{{ data.price }} 积分</td>
|
|
|
<td style="text-align: center">
|
|
|
- <el-select size="small" clearable v-model="deliveryType" placeholder="请选择" value-key="value"
|
|
|
- @change="changeDeliveryType">
|
|
|
+ {{ data.price }} 积分
|
|
|
+ </td>
|
|
|
+ <td style="text-align: center">
|
|
|
+ <el-select size="small" clearable v-model="deliveryType" placeholder="请选择"
|
|
|
+ value-key="value" @change="changeDeliveryType">
|
|
|
<el-option :key="item.dictValue" v-for="item in deliveryTypeList"
|
|
|
:label="item.dictLabel" :value="item.dictValue">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</td>
|
|
|
<td v-if="deliveryType == '0'" style="text-align: center">
|
|
|
- <el-select size="small" clearable v-model="reclaimAddr" placeholder="请选择" value-key="value"
|
|
|
- @change="changeReclaimAddr">
|
|
|
- <el-option :key="item.dictValue" v-for="item in reclaimAddrList" :label="item.dictLabel"
|
|
|
- :value="item.dictValue">
|
|
|
+ <el-select size="small" clearable v-model="reclaimAddr" placeholder="请选择"
|
|
|
+ value-key="value" @change="changeReclaimAddr">
|
|
|
+ <el-option :key="item.dictValue" v-for="item in reclaimAddrList"
|
|
|
+ :label="item.dictLabel" :value="item.dictValue">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</td>
|
|
|
<td style="text-align: center" class="finlly-price">
|
|
|
{{ total }} 积分
|
|
|
+ <span style="color: red;" v-if="money">+{{ money }}元</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
@@ -157,8 +161,9 @@
|
|
|
<th style="text-align: center" width="15%">
|
|
|
<span style="color: red">*</span>兑换方式
|
|
|
</th>
|
|
|
- <th v-if="deliveryType == '1' && data.freightType=='0'" style="text-align: center" width="15%">
|
|
|
- 快递费
|
|
|
+ <th v-if="deliveryType == '1' && data.freightType == '0'" style="text-align: center"
|
|
|
+ width="15%">
|
|
|
+ 快递费
|
|
|
</th>
|
|
|
<th v-if="deliveryType == '0'" style="text-align: center" width="15%">
|
|
|
<span style="color: red">*</span>领取地点
|
|
|
@@ -170,7 +175,8 @@
|
|
|
<td>
|
|
|
<div class="prize-info">
|
|
|
<div class="prize-img-container">
|
|
|
- <el-image :src="data.imgUrl" v-if="data.imgUrl" :preview-src-list="imgUrls.length==0?[data.imgUrl]:imgUrls"
|
|
|
+ <el-image :src="data.imgUrl" v-if="data.imgUrl"
|
|
|
+ :preview-src-list="imgUrls.length == 0 ? [data.imgUrl] : imgUrls"
|
|
|
class="prize-img"></el-image>
|
|
|
</div>
|
|
|
<div class="prize-detail-info">
|
|
|
@@ -186,25 +192,26 @@
|
|
|
<td style="text-align: center">
|
|
|
<el-select size="small" clearable v-model="voucher" placeholder="请选择" value-key="value"
|
|
|
@change="changeCouponList">
|
|
|
- <el-option :key="item.voucher" v-for="item in couponList"
|
|
|
- :label="item.couponName" :value="item.voucher">
|
|
|
+ <el-option :key="item.voucher" v-for="item in couponList" :label="item.couponName"
|
|
|
+ :value="item.voucher">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</td>
|
|
|
<td style="text-align: center">
|
|
|
- <el-select size="small" clearable v-model="deliveryType" placeholder="请选择" value-key="value"
|
|
|
- @change="changeDeliveryTypeGift">
|
|
|
+ <el-select size="small" clearable v-model="deliveryType" placeholder="请选择"
|
|
|
+ value-key="value" @change="changeDeliveryTypeGift">
|
|
|
<el-option :key="item.dictValue" v-for="item in deliveryTypeList"
|
|
|
:label="item.dictLabel" :value="item.dictValue">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</td>
|
|
|
- <td v-if="deliveryType == '1' && data.freightType=='0'" style="text-align: center">180 积分</td>
|
|
|
+ <td v-if="deliveryType == '1' && data.freightType == '0'" style="text-align: center">180 积分
|
|
|
+ </td>
|
|
|
<td v-if="deliveryType == '0'" style="text-align: center">
|
|
|
- <el-select size="small" clearable v-model="reclaimAddr" placeholder="请选择" value-key="value"
|
|
|
- @change="changeReclaimAddr">
|
|
|
- <el-option :key="item.dictValue" v-for="item in reclaimAddrList" :label="item.dictLabel"
|
|
|
- :value="item.dictValue">
|
|
|
+ <el-select size="small" clearable v-model="reclaimAddr" placeholder="请选择"
|
|
|
+ value-key="value" @change="changeReclaimAddr">
|
|
|
+ <el-option :key="item.dictValue" v-for="item in reclaimAddrList"
|
|
|
+ :label="item.dictLabel" :value="item.dictValue">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</td>
|
|
|
@@ -249,7 +256,8 @@
|
|
|
<el-dialog title="手机充值" :visible.sync="dialogFormPhoneNumber" width="500px">
|
|
|
<el-form :model="dataFormPhoneNumber" ref="dataFormPhoneNumber" :rules="rules">
|
|
|
<el-form-item label="充值手机" :label-width="formLabelWidth" prop="phoneNumber">
|
|
|
- <el-input size="medium" v-model="dataFormPhoneNumber.phoneNumber" placeholder="请输入11位手机号码"></el-input>
|
|
|
+ <el-input size="medium" v-model="dataFormPhoneNumber.phoneNumber"
|
|
|
+ placeholder="请输入11位手机号码"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer" style="text-align: center">
|
|
|
@@ -273,7 +281,10 @@
|
|
|
</div>
|
|
|
<div class="listItem">
|
|
|
<div class="itemName">合计</div>
|
|
|
- <div class="itemValue">{{ total }}</div>
|
|
|
+ <div class="itemValue">
|
|
|
+ {{ total }}
|
|
|
+ <span style="color: red;" v-if="money">+{{ money }}元</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div slot="footer" class="dialog-footer" style="text-align: center">
|
|
|
@@ -311,13 +322,15 @@
|
|
|
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
|
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
|
|
|
- <feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_6844:108643"></feGaussianBlur>
|
|
|
+ <feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_6844:108643">
|
|
|
+ </feGaussianBlur>
|
|
|
</filter>
|
|
|
<filter id="filter1_f_6844:108643" x="49" y="76.9961" width="15" height="16"
|
|
|
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
|
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
|
|
|
- <feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_6844:108643"></feGaussianBlur>
|
|
|
+ <feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_6844:108643">
|
|
|
+ </feGaussianBlur>
|
|
|
</filter>
|
|
|
</defs>
|
|
|
</svg>
|
|
|
@@ -343,19 +356,19 @@
|
|
|
<div class="itemName">商品名称</div>
|
|
|
<div class="itemValue">{{ data.name }}</div>
|
|
|
</div>
|
|
|
- <div v-if="activeName=='giftNotice'" class="listItem">
|
|
|
+ <div v-if="activeName == 'giftNotice'" class="listItem">
|
|
|
<div class="itemName">商品属性</div>
|
|
|
<div class="itemValue">{{ data.productAttributeName }}</div>
|
|
|
</div>
|
|
|
- <div v-if="activeName=='giftNotice'" class="listItem">
|
|
|
+ <div v-if="activeName == 'giftNotice'" class="listItem">
|
|
|
<div class="itemName">兑换卷</div>
|
|
|
<div class="itemValue">{{ couponName }}</div>
|
|
|
</div>
|
|
|
- <div v-if="activeName=='goodsNotice'" class="listItem">
|
|
|
+ <div v-if="activeName == 'goodsNotice'" class="listItem">
|
|
|
<div class="itemName">商品积分</div>
|
|
|
<div class="itemValue">{{ data.price }}</div>
|
|
|
</div>
|
|
|
- <div v-if="activeName=='goodsNotice'" class="listItem">
|
|
|
+ <div v-if="activeName == 'goodsNotice'" class="listItem">
|
|
|
<div class="itemName">商品数量</div>
|
|
|
<div class="itemValue">{{ skuCount }}</div>
|
|
|
</div>
|
|
|
@@ -371,9 +384,9 @@
|
|
|
<div class="itemName">领取地点</div>
|
|
|
<div class="itemValue">{{ reclaimAddrName }}</div>
|
|
|
</div>
|
|
|
- <div v-if="activeName=='goodsNotice'" class="listItem">
|
|
|
+ <div v-if="activeName == 'goodsNotice'" class="listItem">
|
|
|
<div class="itemName">合计</div>
|
|
|
- <div class="itemValue">{{ total }}</div>
|
|
|
+ <div class="itemValue">{{ total }}<span style="color: red;" v-if="money">+{{ money }}元</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
@@ -384,11 +397,36 @@
|
|
|
<el-dialog title="物品详情" :visible.sync="dialogVisibleGoods" width="40%">
|
|
|
<div v-html="data.skuDesc"></div>
|
|
|
</el-dialog>
|
|
|
+ <el-dialog title="扫码充值" :visible.sync="recharge" width="40%">
|
|
|
+ <div class="payBox-way">
|
|
|
+ <div class="way-item">
|
|
|
+ <div class="item-left">
|
|
|
+ <div id="expCode" ref="expCodeRef"></div>
|
|
|
+ </div>
|
|
|
+ <div class="item-right">
|
|
|
+ <div class="up">
|
|
|
+ <div>应付金额</div>
|
|
|
+ <div style="color: #fe2c55;margin-left: 8px;">¥ {{ money }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="center">
|
|
|
+ <img style="height: 18px;" src="../../assets/icon/weixinPay.png" alt="weixinpay">
|
|
|
+ <div class="textStyle">微信扫码支付</div>
|
|
|
+ </div>
|
|
|
+ <div class="down">
|
|
|
+ <div>扫码支付代表已阅读并同意</div>
|
|
|
+ <div style="color: #04498d;cursor: pointer;">《充值协议》</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import QRCode from 'qrcodejs2';
|
|
|
+import { getWxPayCode, queryWxPayStatus } from "@/api/pay";
|
|
|
import { integralInfo, start, kill, couponList } from "@/api/allApi";
|
|
|
-import {regionData,codeToText,} from "element-china-area-data";
|
|
|
+import { regionData, codeToText, } from "element-china-area-data";
|
|
|
import { setTab } from "@/utils/auth";
|
|
|
import { debounce } from "@/utils/index";
|
|
|
export default {
|
|
|
@@ -407,12 +445,19 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
return {
|
|
|
- couponName:'',
|
|
|
- voucher:'',
|
|
|
- couponList:[],
|
|
|
- skuDesc:'',
|
|
|
- dialogVisibleGoods:false,
|
|
|
- dialogVisible:false,
|
|
|
+ timer: null,
|
|
|
+ //充值二维码
|
|
|
+ url: 'www.baidu.com',
|
|
|
+ //充值弹窗
|
|
|
+ recharge: false,
|
|
|
+ //充值金额
|
|
|
+ money: undefined,
|
|
|
+ couponName: '',
|
|
|
+ voucher: '',
|
|
|
+ couponList: [],
|
|
|
+ skuDesc: '',
|
|
|
+ dialogVisibleGoods: false,
|
|
|
+ dialogVisible: false,
|
|
|
options: regionData,
|
|
|
reclaimAddr: "",
|
|
|
reclaimAddrName: "",
|
|
|
@@ -420,7 +465,7 @@ export default {
|
|
|
phoneNumber: "",
|
|
|
deliveryTypeList: [],
|
|
|
deliveryType: "",
|
|
|
- deliveryTypeName:"",
|
|
|
+ deliveryTypeName: "",
|
|
|
contactInfo: {},
|
|
|
activeName: this.$route.query.name,
|
|
|
activeType: this.$route.query.type,
|
|
|
@@ -434,7 +479,7 @@ export default {
|
|
|
skuCount: 1,
|
|
|
total: undefined,
|
|
|
data: {},
|
|
|
- imgUrls:[],
|
|
|
+ imgUrls: [],
|
|
|
dialogFormOrderInfo: false,
|
|
|
dialogFormPhoneNumber: false,
|
|
|
addressDetail: false,
|
|
|
@@ -494,6 +539,16 @@ export default {
|
|
|
formLabelWidth: "80px",
|
|
|
};
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ total(val) {
|
|
|
+ let surplusIntegral = this.$store.getters.userInfo.surplusIntegral;
|
|
|
+ let money = (val - surplusIntegral) / 10;
|
|
|
+ if (money > 0) {
|
|
|
+ this.money = money
|
|
|
+ }
|
|
|
+ console.log(this.money);
|
|
|
+ }
|
|
|
+ },
|
|
|
created() {
|
|
|
const skuId = this.$route.query.id;
|
|
|
this.dataForm.skuId = skuId;
|
|
|
@@ -501,33 +556,90 @@ export default {
|
|
|
this.getCouponList(skuId);
|
|
|
},
|
|
|
methods: {
|
|
|
- changeCouponList(val){
|
|
|
- this.couponName = this.couponList.find(item => item.voucher == val).couponName;
|
|
|
+ handlePayWxQRcode(row) { // 获取微信支付二维码
|
|
|
+ getWxPayCode({ // 这里根据不同的后端接口去修改
|
|
|
+ totalFee: row.totalAmount * 100,
|
|
|
+ outTradeNo: row.orderSn,
|
|
|
+ }).then(res => {
|
|
|
+ this.qrcode(res.data.url); // 例如：res.data.url 的值为 "weixin://wxpay/bizpayurl?pr=......"，根据这个值生成相对应的微信支付二维码
|
|
|
+ this.timer = setInterval(() => { // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
|
|
|
+ this.handleQueryWxPayStatus(row, res.data.outTradeNo);
|
|
|
+ }, 1000);
|
|
|
+ })
|
|
|
},
|
|
|
- getCouponList(id){
|
|
|
- couponList({ actId: this.activeType,skuId:id })
|
|
|
- .then((response) => {
|
|
|
- this.couponList = response.data.data;
|
|
|
+ handleQueryWxPayStatus(row, sn) { // 查询微信支付状态
|
|
|
+ queryWxPayStatus({ // 这里根据不同的后端接口去修改
|
|
|
+ totalFee: row.totalAmount * 100,
|
|
|
+ outTradeNo: sn,
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.paySuccess) {
|
|
|
+ // 当查询到支付成功时
|
|
|
+ this.$store.dispatch('GetUserInfo');
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '支付成功！'
|
|
|
});
|
|
|
+ this.recharge = false;
|
|
|
+ clearInterval(this.timer); // 清除定时器;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 清空二维码,避免生成多个二维码
|
|
|
+ delQrcode() {
|
|
|
+ this.$refs.expCodeRef.innerHTML = ""
|
|
|
+ },
|
|
|
+ // 前端根据 URL 生成微信支付二维码
|
|
|
+ qrcode(url) {
|
|
|
+ this.delQrcode();
|
|
|
+ return new QRCode('expCode', {
|
|
|
+ width: 150,
|
|
|
+ height: 150,
|
|
|
+ text: url,
|
|
|
+ colorDark: '#000',
|
|
|
+ colorLight: '#fff'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ changeCouponList(val) {
|
|
|
+ this.couponName = this.couponList.find(item => item.voucher == val).couponName;
|
|
|
+ },
|
|
|
+ getCouponList(id) {
|
|
|
+ couponList({ actId: this.activeType, skuId: id })
|
|
|
+ .then((response) => {
|
|
|
+ this.couponList = response.data.data;
|
|
|
+ });
|
|
|
},
|
|
|
handleClickGood(val) {
|
|
|
this.skuDesc = val;
|
|
|
- if(this.skuDesc){
|
|
|
+ if (this.skuDesc) {
|
|
|
this.dialogVisibleGoods = true;
|
|
|
}
|
|
|
},
|
|
|
- handleClick(){
|
|
|
- if(this.activeName=='giftNotice'){
|
|
|
- if(!this.voucher){
|
|
|
+ handleClick() {
|
|
|
+ if (this.activeName == 'giftNotice') {
|
|
|
+ if (!this.voucher) {
|
|
|
this.$message({
|
|
|
message: '请选择兑换卷',
|
|
|
type: 'warning'
|
|
|
});
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.money) {
|
|
|
+ this.$confirm('积分不足，请充值！', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.recharge = true;
|
|
|
+ this.$nextTick(function () {
|
|
|
+ this.qrcode(this.url);
|
|
|
+ })
|
|
|
+
|
|
|
+ }).catch(() => { });
|
|
|
+ } else {
|
|
|
this.dialogVisible = true;
|
|
|
}
|
|
|
- }else{
|
|
|
- this.dialogVisible = true;
|
|
|
}
|
|
|
},
|
|
|
handleChange(value) {
|
|
|
@@ -581,7 +693,7 @@ export default {
|
|
|
}
|
|
|
this.deliveryTypeName = this.deliveryTypeList.find(item => item.dictValue == val).dictLabel;
|
|
|
},
|
|
|
- changeDeliveryTypeGift(val){
|
|
|
+ changeDeliveryTypeGift(val) {
|
|
|
this.reclaimAddr = '';
|
|
|
this.disabled = true;
|
|
|
if (val == "0" || val == "") {
|
|
|
@@ -628,29 +740,29 @@ export default {
|
|
|
},
|
|
|
getInfo(skuId) {
|
|
|
integralInfo({ skuId: skuId })
|
|
|
- .then((response) => {
|
|
|
- this.data = response.data.data;
|
|
|
- this.deliveryTypeList = response.data.data.dictDataList;
|
|
|
- this.reclaimAddrList = response.data.data.reclaimAddrList;
|
|
|
- this.contactInfo = response.data.data.contactInfo;
|
|
|
- if (this.contactInfo) {
|
|
|
- this.name = this.contactInfo.contact;
|
|
|
- this.phone = this.contactInfo.contactPhone;
|
|
|
- this.addressArr = this.contactInfo.addressArr;
|
|
|
- this.addressStr = this.contactInfo.addressStr;
|
|
|
- this.street = this.contactInfo.street;
|
|
|
- this.address = this.contactInfo.contactAddr;
|
|
|
- }
|
|
|
- this.total = response.data.data.price;
|
|
|
- let imgs = response.data.data.imgs;
|
|
|
- if(imgs){
|
|
|
- imgs.forEach(element => {
|
|
|
- this.imgUrls.push(element.url);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- .catch(() => { });
|
|
|
+ .then((response) => {
|
|
|
+ this.data = response.data.data;
|
|
|
+ this.deliveryTypeList = response.data.data.dictDataList;
|
|
|
+ this.reclaimAddrList = response.data.data.reclaimAddrList;
|
|
|
+ this.contactInfo = response.data.data.contactInfo;
|
|
|
+ if (this.contactInfo) {
|
|
|
+ this.name = this.contactInfo.contact;
|
|
|
+ this.phone = this.contactInfo.contactPhone;
|
|
|
+ this.addressArr = this.contactInfo.addressArr;
|
|
|
+ this.addressStr = this.contactInfo.addressStr;
|
|
|
+ this.street = this.contactInfo.street;
|
|
|
+ this.address = this.contactInfo.contactAddr;
|
|
|
+ }
|
|
|
+ this.total = response.data.data.price;
|
|
|
+ let imgs = response.data.data.imgs;
|
|
|
+ if (imgs) {
|
|
|
+ imgs.forEach(element => {
|
|
|
+ this.imgUrls.push(element.url);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
},
|
|
|
handleClickPhoneNumber() {
|
|
|
this.dialogFormPhoneNumber = true;
|
|
|
@@ -701,7 +813,7 @@ export default {
|
|
|
if (this.deliveryType == "1") {
|
|
|
var params = {
|
|
|
actId: this.activeType,
|
|
|
- voucher:this.voucher,
|
|
|
+ voucher: this.voucher,
|
|
|
skuId: this.data.skuId,
|
|
|
skuCount: this.skuCount,
|
|
|
price: this.data.price,
|
|
|
@@ -719,7 +831,7 @@ export default {
|
|
|
} else if (this.deliveryType == "4") {
|
|
|
var params = {
|
|
|
actId: this.activeType,
|
|
|
- voucher:this.voucher,
|
|
|
+ voucher: this.voucher,
|
|
|
skuId: this.data.skuId,
|
|
|
skuCount: this.skuCount,
|
|
|
price: this.data.price,
|
|
|
@@ -732,7 +844,7 @@ export default {
|
|
|
} else {
|
|
|
var params = {
|
|
|
actId: this.activeType,
|
|
|
- voucher:this.voucher,
|
|
|
+ voucher: this.voucher,
|
|
|
skuId: this.data.skuId,
|
|
|
skuCount: this.skuCount,
|
|
|
price: this.data.price,
|
|
|
@@ -1090,5 +1202,60 @@ img {
|
|
|
margin-bottom: 24px;
|
|
|
max-width: 300px;
|
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
+.payBox-way {
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.way-item {
|
|
|
+ display: flex;
|
|
|
+ background-color: #f7f7f9;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.item-left {
|
|
|
+ position: relative;
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 7px;
|
|
|
+}
|
|
|
+
|
|
|
+.item-right {
|
|
|
+ margin-left: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.up {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+.center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.textStyle {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-left: 4px;
|
|
|
+ color: rgba(22, 24, 35, .34);
|
|
|
+}
|
|
|
+
|
|
|
+.down {
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(22, 24, 35, .34);
|
|
|
+ margin-top: 16px;
|
|
|
+ display: flex;
|
|
|
+ -moz-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|
