123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305 |
- <template>
- <div class="page_feedBack">
- <van-sticky>
- <div class="feedBackTitle">
- <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
- <span class="titleName">意见反馈</span>
- </div>
- </van-sticky>
- <div class="feedBackTip">问题类型</div>
- <div class="typeBox">
- <p :class="Num == 1 ? 'active' : ''" @click="onClick(1)">使用操作</p>
- <p :class="Num == 2 ? 'active' : ''" @click="onClick(2)">产品建议</p>
- <p :class="Num == 3 ? 'active' : ''" @click="onClick(3)">产品缺陷</p>
- <p :class="Num == 4 ? 'active' : ''" @click="onClick(4)">投诉</p>
- </div>
- <div class="feedBackTip">反馈标题</div>
- <div>
- <van-field
- v-model="form.title"
- type="text"
- maxlength="30"
- placeholder="请填写标题30个字以内"
- />
- </div>
- <div class="feedBackTip">
- 反馈内容
- <span style="font-size: .75rem;color:#ABABAB">(最多上传6张图片)</span>
- </div>
- <div class="feedBox">
- <van-field
- v-model="form.content"
- rows="3"
- autosize
- type="textarea"
- maxlength="50"
- placeholder="请输入反馈信息..."
- show-word-limit
- />
- <div class="uploaderBox">
- <van-uploader
- v-model="fileList"
- multiple
- :max-count="6"
- :data="uploadFileData"
- :before-read="beforeRead"
- :after-read="afterRead"
- />
- </div>
- </div>
- <div class="feedBackTip">
- 联系方式(手机号)
- <span style="color:#FF5400">*</span>
- </div>
- <div>
- <van-field v-model="form.phone" type="tel" placeholder="请输入联系方式" />
- </div>
- <div class="feedBackTip">接受电话处理时间</div>
- <div class="typeBox1">
- <p :class="time == 1 ? 'active' : ''" @click="clickTime(1)">任何时间</p>
- <p :class="time == 2 ? 'active' : ''" @click="clickTime(2)">
- 09:00~12:00
- </p>
- <p :class="time == 3 ? 'active' : ''" @click="clickTime(3)">
- 13:00~18:00
- </p>
- <p :class="time == 4 ? 'active' : ''" @click="clickTime(4)">从不接受</p>
- </div>
- <div>
- <div class="submitBtn" v-show="show">提交反馈</div>
- <div class="submitBtnSuccess" @click="submitFeed">提交反馈</div>
- </div>
- </div>
- </template>
-
- <script>
- import { submitFeed } from "@/api/patient/patient";
- import { getToken } from "@/api/qiniu";
- import { getFileExtension } from "@/utils/tools";
- export default {
- data() {
- return {
- message: "",
- fileList: [],
- tel: "",
- Num: 1,
- time: 1,
- show: false,
- form: {
- admin_user_id: "",
- title: "",
- content: "",
- phone: "",
- time: "",
- images: ""
- },
- qiniuDomain: "https://images.shengws.com/",
- uploadFileData: { token: "", key: "" }
- };
- },
- methods: {
- onClick(id) {
- if (id == 1) {
- this.Num = 1;
- } else if (id == 2) {
- this.Num = 2;
- } else if (id == 3) {
- this.Num = 3;
- } else if (id == 4) {
- this.Num = 4;
- }
- },
- clickTime(id) {
- if (id == 1) {
- this.time = 1;
- } else if (id == 2) {
- this.time = 2;
- } else if (id == 3) {
- this.time = 3;
- } else if (id == 4) {
- this.time = 4;
- }
- },
- submitFeed() {
- if (this.form.phone === "") {
- this.$toast("手机号不能为空");
- return false;
- }
- const params = {
- question: this.Num,
- title: this.form.title,
- content: this.form.content,
- phone: this.form.phone,
- time: this.time,
- admin_user_id: this.form.admin_user_id
- };
- submitFeed(params).then(response => {
- if (response.data.state === 1) {
- var feedback = response.data.data.feedback;
- this.$toast("保存成功");
- this.form.title = "";
- this.form.content = "";
- this.form.phone = "";
- this.$router.push("/newMy");
- }
- });
- },
- afterRead(file) {
- console.log("file", file);
- },
- // beforeRead(file) {
- // console.log("上传", file);
- // console.log(file.name);
- // this.form.images = this.qiniuDomain + file.name;
- // console.log("图片", this.form.images);
- // },
- beforeRead(file) {
- console.log("file", file);
- var date = new Date();
- var ext = getFileExtension(file.name);
- var key =
- date.getFullYear() +
- (date.getMonth() + 1) +
- date.getDate() +
- date.getHours() +
- date.getMinutes() +
- date.getSeconds() +
- "_o_" +
- file.lastModified +
- "." +
- ext;
- const _self = this;
- return new Promise((resolve, reject) => {
- getToken()
- .then(response => {
- const token = response.data.data.uptoken;
- console.log("token2是什么?", token);
- _self._data.uploadFileData.token = token;
- _self._data.uploadFileData.key = key;
- resolve(true);
- })
- .catch(err => {
- reject(false);
- });
- });
- }
- },
- created() {
- var id = this.$route.query.id;
- this.form.admin_user_id = id;
- }
- };
- </script>
-
- <style lang="scss" scoped>
- .page_feedBack {
- height: 100%;
- overflow: hidden;
- overflow-y: auto;
- background: #eeeeee;
- .feedBackTitle {
- background: #fff;
- padding: 0 1.125rem;
- height: 3.125rem;
- display: flex;
- align-items: center;
- }
- .jiantou {
- font-size: 1.5rem;
- font-weight: 600;
- margin-right: 7rem;
- }
- .titleName {
- font-size: 1.125rem;
- font-weight: 600;
- }
- .aboutImg {
- padding: 0 0.75rem;
- height: 10.0625rem;
- margin: 1rem 0 0.3125rem;
- img {
- width: 100%;
- height: 100%;
- }
- }
- .feedBackTip {
- height: 2.375rem;
- line-height: 2.375rem;
- padding-left: 0.75rem;
- font-size: 0.875rem;
- color: #696969;
- }
- .feedBox {
- min-height: 11.875rem;
- background: #fff;
- .uploaderBox {
- margin: 1.25rem 0 0 1rem;
- }
- }
- .typeBox {
- display: flex;
- justify-content: space-around;
- p {
- width: 5rem;
- height: 1.875rem;
- line-height: 1.875rem;
- text-align: center;
- border: 1px solid rgba(204, 204, 204, 1);
- font-size: 0.875rem;
- color: #696969;
- border-radius: 5px;
- cursor: pointer;
- }
- .active {
- background: rgba(51, 138, 251, 1);
- color: #fff;
- border: 1px solid #338afb;
- }
- }
- .typeBox1 {
- display: flex;
- justify-content: space-around;
- p {
- // width: 5rem;
- // height: 1.875rem;
- // line-height: 1.875rem;
- padding: 8px 6px;
- text-align: center;
- border: 1px solid rgba(204, 204, 204, 1);
- font-size: 0.875rem;
- color: #696969;
- border-radius: 5px;
- cursor: pointer;
- }
- .active {
- background: rgba(51, 138, 251, 1);
- color: #fff;
- border: 1px solid #338afb;
- }
- }
- .submitBtn {
- width: 80%;
- height: 2.75rem;
- line-height: 2.75rem;
- text-align: center;
- background: #c5c5c5;
- color: #fff;
- margin: 1.25rem auto;
- border-radius: 1.875rem;
- }
- .submitBtnSuccess {
- width: 80%;
- height: 2.75rem;
- line-height: 2.75rem;
- text-align: center;
- background: #338afb;
- color: #fff;
- margin: 1.25rem auto;
- border-radius: 1.875rem;
- }
- }
- ::-webkit-scrollbar {
- width: 0;
- }
- </style>
|