|
|
@@ -1,158 +1,541 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div class="take-out-list">
|
|
|
- <div class="item">
|
|
|
+ <div class="item" v-for="(v,index) in deliveryList" :key="index">
|
|
|
<div class="item-top">
|
|
|
- <div class="name">美团外卖</div>
|
|
|
- <div class="top-right">
|
|
|
+ <div class="top-left">
|
|
|
+ <img :src="v.logo" alt="" class="top-left-img">
|
|
|
+ <div class="name">{{v.name}}</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="v.bindStatus === 1" class="top-right">
|
|
|
<span>开启后首选该账号平台为配送平台</span>
|
|
|
- <el-switch />
|
|
|
+ <el-switch @change="statusDelivery(v)" v-model="v.preferredDelivery" :active-value="1" :inactive-value="0" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item-bottom">
|
|
|
<div class="left">
|
|
|
<div class="l-l">
|
|
|
- <img src="../../../static/image/alipay.png" class="l-l-img" />
|
|
|
+ <img :src="v.pcLogo" class="l-l-img" />
|
|
|
</div>
|
|
|
<div class="take-out-name">
|
|
|
- <div>商户编号：一点点</div>
|
|
|
- <div>账户余额：2222222</div>
|
|
|
+ <div v-if="v.shopNo">商户编号：{{v.code}}</div>
|
|
|
+ <div v-if="v.balance">账户余额：{{v.balance}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 1->绑定，0：未绑定，2-> 审核中，3->拒绝，4->待完善资料 -->
|
|
|
<div class="right">
|
|
|
- <el-button type="primary" size="small" class="right-btn">去绑定</el-button>
|
|
|
- <el-button type="primary" size="small" class="right-btn">完善资料</el-button>
|
|
|
- <el-button size="small">解 绑</el-button>
|
|
|
+ <el-button v-if="v.bindStatus === 0" @click="goBind(v)" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="关闭窗口后再操作！" type="primary" size="small" class="right-btn">去绑定</el-button>
|
|
|
+ <el-button v-if="[1,4].includes(v.bindStatus)" @click="release(v)" size="small">解 绑</el-button>
|
|
|
+ <!-- <el-button v-if="v.bindStatus === 2" @click="release(v)" type="info" size="small">审核中</el-button> -->
|
|
|
+ <!-- <el-button v-if="v.bindStatus === 3" @click="release(v)" type="danger" size="small">已拒绝</el-button> -->
|
|
|
+ <el-button v-if="[1,4].includes(v.bindStatus)&&[1,9].includes(v.type)" @click="perfectData(v)" type="primary" size="small" class="right-btn">完善资料</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- UU跑腿 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="centerDialogVisible" width="40%" center>
|
|
|
+ <el-form v-if="title === 'UU跑腿绑定'" :model="UUData" ref="UUData" label-width="80px" class="demo-ruleForm">
|
|
|
+ <el-form-item label="城市" prop="cityName" :rules="[{ required: true, message: '城市不能为空'}]">
|
|
|
+ <el-input v-model="UUData.cityName" placeholder="请输入当前城市名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号" prop="mobile" :rules="[{ required: true, message: '手机号不能为空'}]">
|
|
|
+ <el-input v-model="UUData.mobile" placeholder="请输入用户手机号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="验证码" prop="validateCode" :rules="[{ required: true, message: '验证码不能为空'}]">
|
|
|
+ <div class="code">
|
|
|
+ <el-input v-model="UUData.validateCode" placeholder="请输入验证码"></el-input>
|
|
|
+ <div class="get-code" v-if="!showCode" @click.stop="getCode">获取短信验证码</div>
|
|
|
+ <div class="get-code" v-else>{{ count }}秒</div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button size="small" @click="resetForm('UUData')">取 消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="bindUU">确 定</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-form v-if="title === 'UU跑腿解绑'" :model="UUData" ref="UUData" label-width="80px" class="demo-ruleForm">
|
|
|
+ <el-form-item label="手机号" prop="mobile" :rules="[{ required: true, message: '手机号不能为空'}]">
|
|
|
+ <el-input v-model="UUData.mobile" placeholder="请输入用户手机号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button size="small" @click="resetForm('UUData')">取 消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="releaseUU">确 定</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 完善资料 -->
|
|
|
+ <el-dialog title="请输入达达门店编号" :visible.sync="centerDialogVisible2" width="40%" center>
|
|
|
+ <div class="tips">请确保门店编号填写正确，否则会影响运力的使用！</div>
|
|
|
+ <el-form :model="DDData" ref="DDData" label-width="80px" class="demo-ruleForm">
|
|
|
+ <el-form-item label="门店编号" prop="shopNo">
|
|
|
+ <el-input v-model="DDData.shopNo" placeholder="请输入门店编号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button size="small" @click="resetForm('DDData')">取 消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="updateShopNo">确 定</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- storeList: [
|
|
|
- { id: 1, name: '门店名称-1' },
|
|
|
- { id: 2, name: '门店名称-2' },
|
|
|
- { id: 3, name: '门店名称-3' },
|
|
|
- { id: 4, name: '门店名称-4' },
|
|
|
- { id: 5, name: '门店名称-5' },
|
|
|
- { id: 6, name: '门店名称-6' },
|
|
|
- { id: 7, name: '门店名称-7' }
|
|
|
- ]
|
|
|
+import {
|
|
|
+ getDeliveryList,
|
|
|
+ releaseDelivery,
|
|
|
+ bindDelivery,
|
|
|
+ bindUserApplyDelivery,
|
|
|
+ bindUserSubmitDelivery,
|
|
|
+ explainDelivery,
|
|
|
+ updateShopNo,
|
|
|
+ statusDelivery,
|
|
|
+} from "../../api/shop";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ deliveryList: [],
|
|
|
+ jumpUrl: "",
|
|
|
+ fullscreenLoading: false,
|
|
|
+ centerDialogVisible: false,
|
|
|
+ centerDialogVisible2: false,
|
|
|
+ UUData: {
|
|
|
+ cityName: "",
|
|
|
+ mobile: "",
|
|
|
+ validateCode: "",
|
|
|
+ },
|
|
|
+ title: "UU跑腿绑定",
|
|
|
+ count: 60,
|
|
|
+ showCode: false,
|
|
|
+ timer: null, // 计时器
|
|
|
+ DDData: {
|
|
|
+ deliveryId: "",
|
|
|
+ shopNo: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ jumpUrl(newVal, oldVal) {
|
|
|
+ if (this.jumpUrl) {
|
|
|
+ this.fullscreenLoading = true;
|
|
|
+ let newWindowWidth = 800,
|
|
|
+ newWindowHeight = 500,
|
|
|
+ left = (window.screen.width - newWindowWidth) / 2,
|
|
|
+ top = (window.screen.height - newWindowHeight) / 2 - 100;
|
|
|
+ let features = `width=${newWindowWidth},height=${newWindowHeight},left=${left},top=${top}`;
|
|
|
+ let windowOpen = window.open(newVal, "name", features);
|
|
|
+ let loop = window.setInterval(() => {
|
|
|
+ console.log("windowOpen.closed", windowOpen.closed);
|
|
|
+ if (windowOpen.closed) {
|
|
|
+ this.jumpUrl = null;
|
|
|
+ this.fullscreenLoading = false;
|
|
|
+ window.clearInterval(loop);
|
|
|
+ this.getDeliveryList(this.curIdx);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDeliveryList();
|
|
|
+ this.explainDelivery();
|
|
|
+ },
|
|
|
+ // 1->达达
|
|
|
+ // 2->蜂鸟即配
|
|
|
+ // 3->美团飞速达
|
|
|
+ // 4->闪送
|
|
|
+ // 5->顺丰同城
|
|
|
+ // 7->UU跑腿
|
|
|
+ // 8->爱跑腿
|
|
|
+ // 9->达达优质
|
|
|
+ // 10->快服务
|
|
|
+ // 12->货拉拉
|
|
|
+ methods: {
|
|
|
+ explainDelivery() {
|
|
|
+ explainDelivery().then((res) => {
|
|
|
+ // console.log(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDeliveryList() {
|
|
|
+ getDeliveryList().then((res) => {
|
|
|
+ this.deliveryList = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ checkPhone(phone) {
|
|
|
+ if (!/^1\d{10}$/.test(phone)) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取验证码
|
|
|
+ getCode() {
|
|
|
+ if (!this.UUData.mobile.trim()) {
|
|
|
+ return this.$message({
|
|
|
+ message: "手机号码不能为空",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (!this.checkPhone(this.UUData.mobile)) {
|
|
|
+ return this.$message({
|
|
|
+ message: "请输入正确的手机号",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ mobile: this.UUData.mobile,
|
|
|
+ };
|
|
|
+ bindUserApplyDelivery(params).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.showCode = true;
|
|
|
+ this.$message({
|
|
|
+ message: "验证码发送成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.count--;
|
|
|
+ if (this.count <= 1) {
|
|
|
+ this.showCode = false;
|
|
|
+ this.count = 60;
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ return this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goBind(v) {
|
|
|
+ // 显示U跑腿绑定弹框
|
|
|
+ if (v.type === 7) {
|
|
|
+ this.title = "UU跑腿绑定";
|
|
|
+ this.centerDialogVisible = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let name = [1, 9];
|
|
|
+ let dadaName = name.includes(v.type) ? v.name : "";
|
|
|
+ let name2 = [1, 5];
|
|
|
+ let sfId = name2.includes(v.type) ? v.thirdShopId : "";
|
|
|
+ let params = {
|
|
|
+ deliveryId: v.deliveryId,
|
|
|
+ dadaName,
|
|
|
+ sfId,
|
|
|
+ };
|
|
|
+ bindDelivery(params).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.jumpUrl = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ bindUU() {
|
|
|
+ if (!this.UUData.cityName.trim()) {
|
|
|
+ return this.$message({
|
|
|
+ message: "城市不能为空",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (!this.UUData.mobile.trim()) {
|
|
|
+ return this.$message({
|
|
|
+ message: "手机号不能为空",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (!this.UUData.validateCode.trim()) {
|
|
|
+ return this.$message({
|
|
|
+ message: "验证码不能为空",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ bindUserSubmitDelivery(this.UUData).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ message: "绑定成功！",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.getDeliveryList();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: res.data,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.centerDialogVisible = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ releaseUU() {
|
|
|
+ if (!this.UUData.mobile.trim()) {
|
|
|
+ return this.$message({
|
|
|
+ message: "手机号不能为空",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ cancelBindDelivery({ mobile: this.UUData.mobile }).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "已成功解除绑定！",
|
|
|
+ });
|
|
|
+ this.getDeliveryList();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.data,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.centerDialogVisible = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ unBindDelivery(v) {
|
|
|
+ unBindDelivery({ id: v.id }).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "已成功解绑！",
|
|
|
+ });
|
|
|
+ this.getDeliveryList();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.data,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ release(v) {
|
|
|
+ // UU跑腿解除绑定
|
|
|
+ if (v.type === 7) {
|
|
|
+ this.title = "UU跑腿解绑";
|
|
|
+ this.centerDialogVisible = true;
|
|
|
+ this.UURelease(v);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$confirm("此操作将解绑当前配送平台, 是否继续?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ // 爱跑腿解除绑定
|
|
|
+ if (v.type === 8) {
|
|
|
+ this.unBindDelivery(v);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.confirmRelease(v);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消解除绑定！",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 确认解除绑定
|
|
|
+ confirmRelease(v) {
|
|
|
+ let params = {
|
|
|
+ id: v.id,
|
|
|
+ sfId: v.thirdShopId,
|
|
|
+ };
|
|
|
+ releaseDelivery(params).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "已成功解绑！",
|
|
|
+ });
|
|
|
+ this.getDeliveryList();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.data,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ perfectData(v) {
|
|
|
+ this.centerDialogVisible2 = true;
|
|
|
+ this.DDData.deliveryId = v.deliveryId;
|
|
|
+ this.DDData.shopNo = v.shopNo;
|
|
|
+ },
|
|
|
+ updateShopNo() {
|
|
|
+ updateShopNo(this.DDData).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "成功完善资料！",
|
|
|
+ });
|
|
|
+ this.getDeliveryList();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.centerDialogVisible2 = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ statusDelivery(v) {
|
|
|
+ statusDelivery({
|
|
|
+ id: v.id,
|
|
|
+ preferredDelivery: v.preferredDelivery,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "成功开启首选配送！",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.getDeliveryList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.centerDialogVisible = false;
|
|
|
+ this.centerDialogVisible2 = false;
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .store-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: nowrap;
|
|
|
- width: 100%;
|
|
|
- white-space: nowrap;
|
|
|
- overflow-x: auto;
|
|
|
- padding-bottom: 10px;
|
|
|
- &-item {
|
|
|
- padding: 8px 27px;
|
|
|
- background-color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #B1B1B1;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid #eee;
|
|
|
- border-radius: 17px;
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 10px;
|
|
|
- &.active {
|
|
|
- color: #017E61;
|
|
|
- }
|
|
|
+.store-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ &-item {
|
|
|
+ padding: 8px 27px;
|
|
|
+ background-color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #b1b1b1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ border-radius: 17px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 10px;
|
|
|
+ &.active {
|
|
|
+ color: #017e61;
|
|
|
}
|
|
|
}
|
|
|
- .store-list::-webkit-scrollbar {
|
|
|
- height: 6px;
|
|
|
- }
|
|
|
- .store-list::-webkit-scrollbar-track {
|
|
|
- background-color: #eee;
|
|
|
- /*border-radius: 5px;
|
|
|
+}
|
|
|
+.store-list::-webkit-scrollbar {
|
|
|
+ height: 6px;
|
|
|
+}
|
|
|
+.store-list::-webkit-scrollbar-track {
|
|
|
+ background-color: #eee;
|
|
|
+ /*border-radius: 5px;
|
|
|
-webkit-border-radius: 5px;
|
|
|
-moz-border-radius: 5px;*/
|
|
|
- }
|
|
|
- .store-list::-webkit-scrollbar-thumb {
|
|
|
- background-color: #999;
|
|
|
- border-radius: 6px;
|
|
|
- -webkit-border-radius: 6px;
|
|
|
- -moz-border-radius: 6px;
|
|
|
- }
|
|
|
+}
|
|
|
+.store-list::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #999;
|
|
|
+ border-radius: 6px;
|
|
|
+ -webkit-border-radius: 6px;
|
|
|
+ -moz-border-radius: 6px;
|
|
|
+}
|
|
|
|
|
|
- .take-out-list {
|
|
|
- .item {
|
|
|
- background-color: #fff;
|
|
|
- .item-top {
|
|
|
+.take-out-list {
|
|
|
+ .item {
|
|
|
+ background-color: #fff;
|
|
|
+ .item-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px 18px;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ .top-left {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20px 18px;
|
|
|
align-items: center;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
+ .top-left-img {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
.name {
|
|
|
font-size: 16px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
- color: #FFA608;
|
|
|
+ color: #ffa608;
|
|
|
}
|
|
|
- .top-right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #B1B1B1;
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .top-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #b1b1b1;
|
|
|
+ margin-right: 12px;
|
|
|
}
|
|
|
}
|
|
|
- .item-bottom {
|
|
|
+ }
|
|
|
+ .item-bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 25px 18px;
|
|
|
+ align-items: center;
|
|
|
+ .left {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 25px 18px;
|
|
|
align-items: center;
|
|
|
- .left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .l-l {
|
|
|
- width: 166px;
|
|
|
- height: 50px;
|
|
|
- border-radius: 25px;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 0;
|
|
|
- .l-l-img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .take-out-name {
|
|
|
- font-size: 13px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- line-height: 20px;
|
|
|
- margin-left: 30px;
|
|
|
+ .l-l {
|
|
|
+ width: 166px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 25px;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 0;
|
|
|
+ .l-l-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
- .right {
|
|
|
- .right-btn {
|
|
|
- background-color: #FC7200;
|
|
|
- border: none;
|
|
|
- }
|
|
|
+ .take-out-name {
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ .right-btn {
|
|
|
+ background-color: #fc7200;
|
|
|
+ border: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+.code {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .get-code {
|
|
|
+ min-width: 120px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 6px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #175199;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tips {
|
|
|
+ color: red;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
</style>
|
Funny